: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;
}