:root {
    --footer-h: 1.8rem; /* matches .copyright-notice height: padding(0.7rem) + line(1.008rem) + border(1px) */
}

/* ── Small-screen footer reclaim ──────────────────────────────────────
   On landscape phones every vertical pixel is playfield: hide the
   copyright bar and zero --footer-h so the game shell's
   calc(100dvh - footer) reclaims the space automatically. The height
   gate (not width) is what targets landscape phones without touching
   desktops — no desktop window is this short. The notice remains on
   every desktop view, the homepage, portrait, and /legal, which is
   where legal visibility actually lives. */
@media (max-height: 520px) {
    :root {
        --footer-h: 0rem;
    }
    .copyright-notice {
        display: none;
    }
}

html, body {
    margin: 0;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    padding: 0 0.75rem;
    scroll-behavior: smooth;     /* no vertical padding — body height must stay exactly 100vh */
    background-image: url('/watermark.svg?v=2');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

/* ── App shell — flex column so footer sits in flow at the bottom ────────── */
.app-shell {
    display: flex;
    flex-direction: column;
    min-height: 100vh;   /* fallback */
    min-height: 100dvh;  /* dynamic viewport: tracks the mobile URL bar */
}

/* Routes wrapper — flex:1 fills all space above the footer.
   display:flow-root keeps child margins from escaping (fixes waiting-room scroll).
   position:relative + isolation:isolate support the ::before watermark layer.    */
.routes-wrapper {
    flex: 1;
    display: flow-root;
    position: relative;
    isolation: isolate;
}
.routes-wrapper::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('/watermark.svg?v=2');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    pointer-events: none;
    z-index: -1;
}

/* ── Watermark inside panels ─────────────────────────────────────────────────
   background-image set here; panels must use background-color (longhand) in
   their scoped CSS — the background shorthand resets background-image.        */
.your-hand,
.score-panel,
.card-panel,
.trick-status-bar,
.waiting-room,
.loading {
    background-image: url('/watermark.svg?v=2');
    background-size: cover;
    background-position: center;
}

/* ── Copyright footer ────────────────────────────────────────────────────── */
.copyright-notice {
    flex-shrink: 0;
    text-align: center;
    padding: 0.35rem 1rem;
    font-size: 0.72rem;
    color: #6b7280;
    background: rgba(255, 255, 255, 0.92);
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

/* Inherits color rather than a fixed value so this stays correct under
   Home.razor's dark-theme override of .copyright-notice too, without
   needing a second, duplicate rule there. */
.copyright-notice a {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: rgba(107, 114, 128, 0.4);
}
.copyright-notice a:hover {
    text-decoration-color: currentColor;
}

/* ═══════════════════════════════════════════
   Playing card rendering (global — applies to
   MarkupString-injected .ci/.cr inner spans)
   Mobile-first: full portrait card at 65×94px.
   Desktop ≥ 641px: bumps to 87×126px.
   ═══════════════════════════════════════════ */

/* Always show the full portrait card face; never show the compact stub */
.ci { display: none !important; }
.cr {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    height: 100%;
}

/* Rank corner (top-left) */
.crk { font-weight: 700; font-size: 1.0rem; line-height: 1; }

/* Centred suit symbol / face art */
.crm {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    font-size: 1.6rem;
    line-height: 1;
}
.crm svg { width: 100%; height: 100%; display: block; overflow: visible; }

/* Permanent trump text layout */
.perm-trump { align-items: flex-start !important; justify-content: flex-start !important; }
.perm-trump .crk { font-size: 0.85rem; font-weight: 800; }
.perm-trump .crm {
    display: flex !important;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    font-weight: 800;
}

/* Desktop: bump text sizes */
@media (min-width: 641px) {
    .crk { font-size: 1.35rem; }
    .crm { font-size: 2.2rem; }
    .perm-trump .crk { font-size: 1.1rem; }
    .perm-trump .crm { font-size: 1.6rem; }
}

/* Bid/Taken shown inside the figure body on all screen sizes */
.player-status-label { display: none; }   /* external label retired */
.player-body-label   { display: inline; } /* body label always visible */

@media (max-width: 640px) {
    /* SVG font-size attribute is a presentation attribute — CSS overrides it */
    .player-body-label text { font-size: 24px; }
}

/* ── Face card sprite (htdebeer/SVG-cards, LGPL) ──────────────────────────
   The sprite SVG draws its own rank, border, and art — strip the CSS frame.
   !important on width/height overrides the inline style='width:87px;height:126px'
   set in C# (inline styles without !important lose to stylesheet !important).
   ───────────────────────────────────────────────────────────────────────── */

/* Strip double-border on sprite cards for all screen sizes */
.card:has(.cr-face) {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
    overflow: hidden !important;
}

.cr { min-height: 0; }

/* Mobile: 65×94px slot */
.cr-face {
    display: block !important;
    width: 65px;
    height: 94px;
    overflow: hidden !important;
    min-height: 0;
    flex-shrink: 0;
}
.cr-face svg {
    display: block;
    width: 65px !important;
    height: 94px !important;
}
.cr-face .trump-card-canvas {
    display: block;
    width: 65px !important;
    height: 94px !important;
}

/* Desktop: bump sprite slot to 87×126px */
@media (min-width: 641px) {
    .card:has(.cr-face) {
        width: 87px !important;
        height: 126px !important;
    }
    .cr-face {
        width: 87px;
        height: 126px;
    }
    .cr-face svg {
        width: 87px !important;
        height: 126px !important;
    }
    .cr-face .trump-card-canvas {
        width: 87px !important;
        height: 126px !important;
    }
}

/* Valid-play / played-card outlines for sprite cards (both sizes) */
.card.valid-play:has(.cr-face) {
    outline: 2px solid #2563eb !important;
    border-radius: 4px;
}
.card.played-card:has(.cr-face) {
    outline: 2px solid #16a34a !important;
    border-radius: 4px;
}

/* ── Landscape phone: reclaim the side gutter ───────────────────────────────
   html AND body each carry padding: 0 0.75rem above — 48px in total, which is
   a phone-PORTRAIT figure. In landscape it makes every in-flow panel narrower
   than the hand strip, which is absolutely positioned against the padding box
   and so spans past it. [C]: "the frame is still not taking up the full width."

   This has to live here, not in GameRoom.razor.css: that file is scoped, so
   "html, body" would compile to "html[b-xxxxx]" and never match.

   What replaces it is the REAL safe-area inset rather than nothing. [C]:
   "it doesn't account for the front camera... the user can turn the phone
   either way, the top can be left or right."  No detection is needed — iOS
   reports env(safe-area-inset-left/right) for the CURRENT orientation and
   swaps them when the phone is rotated the other way, so the gutter follows
   the camera on its own.

   It has to be here, on html/body, not on .game-view-shell. The shell's own
   padding only protects IN-FLOW children; the hand strip, trick status bar
   and tab wrapper are absolutely positioned, and left:0 resolves to the
   PADDING box — so they spanned straight through it and under the camera.
   Insetting the document instead catches every one of them.

   pointer:coarse keeps every desktop window out, at any height. */
@media (max-height: 500px) and (pointer: coarse) {
    /* html and body BOTH carry the base gutter, so applying the inset to the
       pair doubles it — a 59px camera became a 118px gutter. html zeroed,
       body carries it once. */
    /* [C]: "when I tried scrolling down to see it, it instead reloaded the
       page."  That is Safari's pull-to-refresh firing on an overscroll.
       contain keeps the gesture inside the scroller that owns it, so a
       scoreboard can be scrolled without the page reloading underneath you. */
    html, body { overscroll-behavior-y: contain; }

    html { padding-left: 0; padding-right: 0; }
    body {
        padding-left:  env(safe-area-inset-left, 0px);
        padding-right: env(safe-area-inset-right, 0px);
    }
}