/* ============================================================
   daily.css — Daily Hand (daily.html) and its dashboard card.
   Everything is scoped under .daily-* so it cannot leak into other
   pages. Themes off the styles.css tokens: dark is :root, light is
   [data-theme="light"]. Mobile first; the desktop tweaks are at the
   bottom. Nothing here may be wider than the viewport at 375px.
   ============================================================ */

:root {
    --daily-felt: radial-gradient(ellipse at 50% 40%, #17613f 0%, #0e4a2f 58%, #0a3522 100%);
    --daily-felt-rim: #2b2b2e;
    --daily-felt-ink: rgba(255, 255, 255, 0.86);
    --daily-felt-muted: rgba(255, 255, 255, 0.8);
    --daily-card-face: #f5f5f7;
    --daily-card-ink: #1c1c1e;
    --daily-card-red: #d70015;
    --daily-card-back: repeating-linear-gradient(45deg, #0a84ff 0 4px, #0060c9 4px 8px);
    --daily-slot: rgba(255, 255, 255, 0.12);
    --daily-seat-bg: rgba(28, 28, 30, 0.96);
    --daily-seat-edge: rgba(255, 255, 255, 0.14);
    --daily-to-act: #ffd60a;
    --daily-key: #bf5af2;
    /* Fills behind small white text, dark enough for 4.5:1. --daily-key
       itself stays bright: it is also text on dark (the lesson kicker). */
    --daily-key-fill: #9b3fd1;
    --daily-bet-bg: #0060c9;
    --daily-won-ink: var(--positive-color);
    --daily-bubble-bg: #ffffff;
    --daily-bubble-ink: #000000;
    /* The bubble is white in the dark theme, where the app's bright green
       would be under 2:1; this one is 5:1 on it. */
    --daily-check-ink: #1e7e34;
    /* Warning zones get explicit backgrounds (never inherit a card tint). */
    --daily-notice-bg: #2a2107;
    --daily-notice-edge: rgba(255, 214, 10, 0.35);
    --daily-locked-bg: #1d1a10;
    --daily-lesson-bg: #1f1630;
    --daily-lesson-edge: rgba(191, 90, 242, 0.45);
}

[data-theme="light"] {
    --daily-felt: radial-gradient(ellipse at 50% 40%, #3f9c68 0%, #2e8055 58%, #246a45 100%);
    --daily-felt-rim: #c7c7cc;
    --daily-felt-ink: rgba(255, 255, 255, 0.95);
    --daily-felt-muted: rgba(255, 255, 255, 0.9);
    --daily-card-face: #ffffff;
    --daily-card-ink: #111111;
    --daily-slot: rgba(255, 255, 255, 0.22);
    --daily-seat-bg: rgba(255, 255, 255, 0.97);
    --daily-seat-edge: rgba(0, 0, 0, 0.12);
    --daily-to-act: #ff9500;
    --daily-key: #8e44ad;
    --daily-key-fill: #8e44ad;
    /* The app's green is 2.2:1 on the white seat; this one is 5:1. */
    --daily-won-ink: #1e7e34;
    --daily-bubble-bg: #1c1c1e;
    --daily-bubble-ink: #ffffff;
    /* The bubble is near-black in the light theme, so the bright green reads. */
    --daily-check-ink: #30d158;
    --daily-notice-bg: #fff8e6;
    --daily-notice-edge: rgba(255, 149, 0, 0.35);
    --daily-locked-bg: #fffaf0;
    --daily-lesson-bg: #f7f0ff;
    --daily-lesson-edge: rgba(142, 68, 173, 0.35);
}

/* ── Page frame ── */
.daily-content { max-width: 720px; }
.daily-h2 { font-size: 17px; font-weight: 700; margin: 0 0 12px; letter-spacing: -0.2px; }
.daily-muted { color: var(--text-muted); font-size: 13px; margin: 0 0 12px; }
.daily-section-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--text-muted);
    margin-bottom: 6px;
}
.daily-empty { color: var(--text-muted); text-align: center; padding: 20px 8px; margin: 0; font-size: 14px; }
/* Read by screen readers, not shown. Never display:none or visibility:hidden,
   which would take it out of the accessibility tree (#dailyAnnounce). */
.daily-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.daily-streak {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 700;
    background: var(--accent-warning-muted);
    color: var(--text-primary);
    white-space: nowrap;
}
.daily-streak.is-cold { background: var(--bg-tertiary); color: var(--text-muted); }

/* ── Tabs and the home game switcher ── */
.daily-tabs {
    display: flex;
    gap: 4px;
    padding: 4px;
    margin-bottom: 14px;
    background: var(--bg-tertiary);
    border-radius: 12px;
}
.daily-tab {
    flex: 1 1 0;
    min-width: 0;
    margin: 0;
    padding: 9px 6px;
    border-radius: 9px;
    background: transparent;
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 600;
}
.daily-tab[aria-selected="true"] {
    background: var(--bg-secondary);
    color: var(--text-primary);
    box-shadow: var(--shadow-sm);
}
.daily-hg-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}
.daily-hg-row label { margin: 0; flex-shrink: 0; font-size: 13px; color: var(--text-muted); }
.daily-select { padding: 8px 12px; font-size: 16px; min-width: 0; }

.daily-notice {
    margin-bottom: 14px;
    padding: 10px 14px;
    border-radius: 12px;
    background: var(--daily-notice-bg);
    border: 1px solid var(--daily-notice-edge);
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 600;
}

.daily-loading { text-align: center; padding: 48px 16px; color: var(--text-muted); }
.daily-loading p { margin-top: 12px; }
.daily-error { text-align: center; padding: 32px 16px; }
.daily-error p { color: var(--text-secondary); margin: 0 0 14px; }

/* ── The table ── */
.daily-table {
    position: relative;
    width: 100%;
    max-width: 560px;
    height: 390px;
    margin: 0 auto 12px;
}
.daily-felt {
    position: absolute;
    inset: 16% 7% 20%;
    border-radius: 50% / 46%;
    background: var(--daily-felt);
    border: 7px solid var(--daily-felt-rim);
    box-shadow: inset 0 0 28px rgba(0, 0, 0, 0.35);
}
/* The board's top edge sits at 40% of the table, so the cards fill the
   40–52% band the seat slots in daily-hand-view.js keep clear; pot and
   street hang below, narrower than the gap between the lower side seats. */
.daily-center {
    position: absolute;
    left: 50%;
    top: 40%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    width: 72%;
    pointer-events: none;
}
.daily-board-cards { display: flex; gap: 4px; justify-content: center; }
.daily-pot {
    font-size: 13px;
    font-weight: 700;
    color: var(--daily-felt-ink);
    background: rgba(0, 0, 0, 0.28);
    padding: 2px 10px;
    border-radius: 20px;
}
.daily-street {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--daily-felt-muted);
}

/* Cards: board size by default, --sm on villain seats and in the breakdown,
   --lg for the hero's hole cards. */
.daily-card {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 45px;
    border-radius: 5px;
    background: var(--daily-card-face);
    color: var(--daily-card-ink);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
    font-weight: 700;
    line-height: 1;
    flex-shrink: 0;
    user-select: none;
}
.daily-card.is-red { color: var(--daily-card-red); }
.daily-card-rank { font-size: 15px; letter-spacing: -0.5px; }
.daily-card-suit { font-size: 14px; margin-top: 1px; }
.daily-card--sm { width: 24px; height: 34px; border-radius: 4px; }
.daily-card--sm .daily-card-rank { font-size: 12px; }
.daily-card--sm .daily-card-suit { font-size: 11px; }
.daily-card--lg { width: 40px; height: 56px; border-radius: 6px; }
.daily-card--lg .daily-card-rank { font-size: 19px; }
.daily-card--lg .daily-card-suit { font-size: 17px; }
.daily-card--back { background: var(--daily-card-back); border: 2px solid #ffffff; }
.daily-card--slot { background: var(--daily-slot); box-shadow: none; border: 1px dashed rgba(255, 255, 255, 0.3); }
.daily-card.is-undealt { opacity: 0.4; }
.daily-card.is-new { animation: daily-deal 0.35s ease-out both; }
@keyframes daily-deal {
    from { opacity: 0; transform: translateY(-8px) scale(0.92); }
    to   { opacity: 1; transform: none; }
}

/* Seats: absolutely placed by their slot (left/top inline, in %). */
.daily-seat {
    position: absolute;
    transform: translate(-50%, -50%);
    width: 96px;
    margin: 0;
    padding: 6px 4px 7px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    background: var(--daily-seat-bg);
    color: var(--text-primary);
    border: 1px solid var(--daily-seat-edge);
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    font-size: 11px;
    font-weight: 500;
    line-height: 1.25;
    white-space: normal;
    text-align: center;
    cursor: pointer;
    z-index: 2;
}
/* opacity: 1 undoes styles.css's button:hover dimming everywhere; the accent
   border only where hover is real, or a tapped seat keeps it after the
   card closes. */
.daily-seat:hover { opacity: 1; }
@media (hover: hover) {
    .daily-seat:hover { border-color: var(--accent-primary); }
    .daily-seat--hero:hover { border-color: var(--daily-seat-edge); }
}
.daily-seat:active { transform: translate(-50%, -50%) scale(0.98); }
.daily-seat:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 2px; }
.daily-seat--hero { width: 128px; cursor: default; z-index: 3; }
.daily-seat--hero:active { transform: translate(-50%, -50%); }
.daily-seat.is-to-act { border-color: var(--daily-to-act); box-shadow: 0 0 0 2px var(--daily-to-act); }
.daily-seat.is-folded { opacity: 0.5; }
.daily-table--reveal .daily-seat.is-folded { opacity: 0.72; }
.daily-seat.is-key { border-color: var(--daily-key); box-shadow: 0 0 0 2px var(--daily-key); }
.daily-seat-cards { display: flex; gap: 3px; min-height: 34px; align-items: center; }
.daily-seat--hero .daily-seat-cards { min-height: 56px; }
.daily-seat-name {
    max-width: 100%;
    font-size: 12px;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.daily-seat-pos { font-weight: 600; color: var(--text-muted); margin-left: 4px; font-size: 10px; }
.daily-seat-type {
    max-width: 100%;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.daily-seat-stack { font-weight: 700; color: var(--text-secondary); }
.daily-seat-hand { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; color: var(--text-muted); }
/* The mood rides the pod's top-left corner (the dealer button takes the right). */
.daily-mood {
    position: absolute;
    top: -9px;
    left: -6px;
    max-width: 90%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 9px;
    font-weight: 800;
    padding: 1px 7px;
    border-radius: 20px;
    background: var(--daily-notice-bg);
    border: 1px solid var(--daily-notice-edge);
    color: var(--text-primary);
}
.daily-seat-folded {
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--text-muted);
}
.daily-outcome {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: -0.2px;
    color: var(--text-secondary);
}
.daily-seat.is-won .daily-outcome { color: var(--daily-won-ink); }
.daily-seat.is-lost .daily-outcome { color: var(--negative-color); }
/* In a reveal the key villain's tag takes the mood's corner (moods are hidden
   then), and like the mood it stops short of the dealer button. */
.daily-key-tag {
    position: absolute;
    top: -9px;
    left: -6px;
    max-width: 90%;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 1px 7px;
    border-radius: 20px;
    background: var(--daily-key-fill);
    color: #ffffff;
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    white-space: nowrap;
}
.daily-dealer {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #ffffff;
    color: #000000;
    border: 1px solid rgba(0, 0, 0, 0.25);
    font-size: 11px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-sm);
}
.daily-bet {
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    padding: 1px 8px;
    border-radius: 20px;
    background: var(--daily-bet-bg);
    color: #ffffff;
    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
}
.daily-bubble {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    padding: 2px 9px;
    border-radius: 20px;
    background: var(--daily-bubble-bg);
    color: var(--daily-bubble-ink);
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
    box-shadow: var(--shadow-md);
    animation: daily-pop 0.25s ease-out both;
    z-index: 4;
}
@keyframes daily-pop {
    from { opacity: 0; transform: translate(-50%, 4px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}
/* A check or call stays on the seat until the street is dealt: the bubble
   above is wiped by the redraw after each move. */
.daily-seat-badge {
    margin-top: 2px;
    padding: 1px 7px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.02em;
    white-space: nowrap;
    background: var(--daily-bubble-bg);
    color: var(--daily-bubble-ink);
    box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,.25));
}
.daily-seat-badge--check { color: var(--daily-check-ink); }
.daily-seat.is-knocking { animation: daily-knock 0.6s ease-out; }
@keyframes daily-knock {
    /* The ring is the first shadow and the seat's resting shadow stays
       second, so nothing flickers at either end. */
    0%, 100% { transform: translate(-50%, -50%) scale(1); box-shadow: 0 0 0 0 rgba(48, 209, 88, 0), var(--shadow-sm); }
    20% { transform: translate(-50%, -50%) scale(1.06); box-shadow: 0 0 0 4px rgba(48, 209, 88, .45), var(--shadow-sm); }
    40% { transform: translate(-50%, -50%) scale(1); }
    60% { transform: translate(-50%, -50%) scale(1.06); box-shadow: 0 0 0 8px rgba(48, 209, 88, 0), var(--shadow-sm); }
}
/* A reveal swaps the reads for results: type, mood and villain stacks go,
   the outcome and 'hand · net' lines come in, so pods stay the same height. */
.daily-table--reveal .daily-seat-type,
.daily-table--reveal .daily-mood,
.daily-table--reveal .daily-seat:not(.daily-seat--hero) .daily-seat-stack { display: none; }

/* ── Action bar and log ── */
/* The bar sticks to the foot of the screen, so on a short phone (375x667)
   its stuck position covers the hero's own seat at the bottom of the table.
   --daily-bar-h is the bar's measured height, kept by daily-hand-page.js
   (keepHeroClear; 0 while the bar is hidden). --daily-bar-inset is how far
   above the screen's foot it sticks: clear of the bottom tab bar on phones.
   The Today panel gets the bar's height as extra bottom room, so the page
   can always scroll the hero clear, and the hero's seat a scroll margin of
   the bar plus its inset, so scrolling it into view stops above the bar. */
:root {
    --daily-bar-h: 0px;
    --daily-bar-inset: calc(var(--bottom-tab-height) + env(safe-area-inset-bottom) + 8px);
}
.daily-panel { padding-bottom: var(--daily-bar-h); }
.daily-seat--hero { scroll-margin-bottom: calc(var(--daily-bar-h) + var(--daily-bar-inset) + 8px); }
.daily-action-bar {
    position: sticky;
    bottom: var(--daily-bar-inset);
    z-index: 5;
    margin: 0 0 14px;
    padding: 10px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    box-shadow: var(--shadow-md);
}
.daily-bar-hint { font-size: 12px; font-weight: 600; color: var(--text-muted); margin: 0 2px 8px; }
.daily-bar-note { margin: 0; text-align: center; font-size: 13px; color: var(--text-secondary); }
.daily-actions {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(74px, 1fr));
    gap: 6px;
}
.daily-act {
    margin: 0;
    min-width: 0;
    min-height: 48px;
    padding: 6px 4px;
    display: flex;
    flex-direction: column;
    gap: 1px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.15;
    white-space: normal;
}
.daily-act-sub { font-size: 11px; font-weight: 600; opacity: 0.85; }
.daily-act--fold { background: var(--accent-danger-muted); color: var(--accent-danger); border: 1px solid rgba(255, 69, 58, 0.3); }
.daily-act--passive { background: var(--bg-hover); color: var(--text-primary); border: 1px solid var(--border-color); }
.daily-act--aggressive { background: var(--accent-primary); color: #ffffff; }
.daily-act--allin { background: var(--accent-warning); color: #000000; }
.daily-action-bar.is-busy .daily-act { opacity: 0.45; }

.daily-log-wrap { margin-bottom: 16px; }
.daily-log {
    list-style: none;
    margin: 0;
    padding: 10px 12px;
    max-height: 168px;
    overflow-y: auto;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    font-size: 13px;
}
.daily-log:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 2px; }
.daily-log-item { color: var(--text-secondary); padding: 2px 0; }
.daily-log-item.is-hero { color: var(--text-primary); font-weight: 700; }
.daily-log-street {
    margin-top: 6px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--text-muted);
}
.daily-log-street:first-child { margin-top: 0; }

/* ── Result, Why, lesson, share ── */
.daily-result { text-align: center; padding: 8px 0 16px; }
.daily-result-number { font-size: 44px; font-weight: 800; letter-spacing: -1.5px; line-height: 1.05; }
/* styles.css's .positive / .negative set weight 600: keep a win or a loss as heavy as 0 BB. */
.daily-result-number .positive, .daily-result-number .negative { font-weight: inherit; }
.daily-result-number .daily-result-emoji { font-size: 36px; letter-spacing: 0; }
.daily-squares { font-size: 22px; letter-spacing: 3px; margin-top: 8px; }
.daily-result-sub { font-size: 13px; color: var(--text-muted); margin-top: 6px; min-height: 1em; }

.daily-why {
    margin: 4px 0 16px;
    padding: 16px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 14px;
}
.daily-why-street + .daily-why-street { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border-color); }
.daily-why-head {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 8px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.8px;
    color: var(--text-muted);
}
.daily-why-head span:first-child { margin-right: 6px; }
.daily-why-line { margin: 0 0 6px; font-size: 14px; color: var(--text-secondary); line-height: 1.45; }
.daily-why-line.is-hero { color: var(--text-primary); font-weight: 700; }
.daily-why-field {
    margin: -2px 0 8px 12px;
    padding-left: 10px;
    border-left: 2px solid var(--accent-primary);
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
}
.daily-why-field.is-thin { border-left-color: var(--border-strong); color: var(--text-muted); font-weight: 500; }
.daily-why-empty, .daily-why-note { margin: 0; font-size: 13px; color: var(--text-muted); font-style: italic; }
.daily-why-note { margin-top: 12px; }

.daily-lesson {
    margin: 0 0 16px;
    padding: 16px;
    border-radius: 14px;
    background: var(--daily-lesson-bg);
    border: 1px solid var(--daily-lesson-edge);
}
.daily-lesson-kicker {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.9px;
    color: var(--daily-key);
}
.daily-lesson-name { font-size: 17px; font-weight: 700; margin: 4px 0 4px; }
.daily-lesson-line { margin: 0; font-size: 15px; line-height: 1.45; color: var(--text-primary); }

.daily-share-row { text-align: center; margin: 0 0 20px; }
.daily-percentile { margin: 0 0 12px; font-size: 15px; font-weight: 600; }
.daily-share-btn { min-width: 200px; padding: 13px 24px; font-size: 16px; font-weight: 700; border-radius: 12px; }
.daily-share-preview {
    margin: 12px auto 0;
    max-width: 320px;
    padding: 10px 12px;
    text-align: left;
    white-space: pre-wrap;
    user-select: all;
    background: var(--bg-tertiary);
    border-radius: 10px;
    font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* ── Boards ── */
.daily-board-section { margin-bottom: 20px; }
.daily-board-meta { font-size: 13px; color: var(--text-muted); margin: -6px 0 10px; }
.daily-lb { display: flex; flex-direction: column; gap: 8px; }
.daily-lb-row {
    display: grid;
    grid-template-columns: 30px 32px minmax(0, 1fr) auto auto;
    gap: 8px;
    align-items: center;
    padding: 10px 12px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
}
.daily-lb-row.is-me { border-color: var(--accent-primary); }
.daily-lb--month .daily-lb-row { grid-template-columns: 30px 32px minmax(0, 1fr) auto; }
.daily-lb-rank { font-size: 15px; text-align: center; }
.daily-lb-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--accent-primary);
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.daily-lb-avatar img { width: 100%; height: 100%; object-fit: cover; }
.daily-lb-name {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
}
/* The name span is the flex item that must shrink: text-overflow does nothing on
   the flex container itself, and a min-width:auto item never goes below its full
   nowrap width, which clipped long names mid-letter and pushed the You / timeout
   tags (flex-shrink:0) past the clip edge. */
.daily-lb-name > span:first-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
.daily-lb-sub { display: block; font-size: 11px; font-weight: 500; color: var(--text-muted); }
.daily-lb-squares { font-size: 13px; letter-spacing: 1px; white-space: nowrap; }
.daily-lb-result { font-size: 14px; text-align: right; white-space: nowrap; }
.daily-you {
    flex-shrink: 0;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 20px;
    background: var(--accent-primary-muted);
    color: var(--accent-primary);
}
.daily-timeout { flex-shrink: 0; font-size: 12px; }

.daily-locked {
    text-align: center;
    padding: 22px 16px;
    border-radius: 14px;
    background: var(--daily-locked-bg);
    border: 1px dashed var(--daily-notice-edge);
}
.daily-locked-icon { font-size: 26px; }
.daily-locked-title { margin: 6px 0 4px; font-size: 15px; font-weight: 700; color: var(--text-primary); }
.daily-locked-sub { margin: 0; font-size: 13px; color: var(--text-muted); }

.daily-join {
    padding: 18px 16px;
    border-radius: 14px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    text-align: center;
    font-size: 14px;
    color: var(--text-secondary);
}
.daily-join a { color: var(--accent-primary); font-weight: 600; text-decoration: none; }

/* ── The Global board ── */
/* The nameplate wash and the border ring come from cosmetics.js and
   cosmetics.css. A ringed avatar (.cb.cb-round, 3px of ring) is 38px, so
   the avatar column is that wide and a plain 32px avatar sits centred in it. */
.daily-lb--global .daily-lb-row { grid-template-columns: 30px 38px minmax(0, 1fr) auto; }
.daily-lb--global .daily-lb-row > .daily-lb-avatar { justify-self: center; }
/* A block avatar inside the ring, so no line-box gap opens under it. */
.daily-lb--global .cb-round > .daily-lb-avatar,
.daily-podium .cb-round > .daily-lb-avatar { display: flex; }
/* The gap between the top 50 and your own pinned row. */
.daily-lb-divider {
    height: 0;
    margin: 4px 24px;
    border-top: 1px dashed var(--border-color);
}
.daily-global-note { margin: 10px 0 0; }
.daily-podium {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.daily-podium-spot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 0;
    padding: 12px 8px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    text-align: center;
}
.daily-podium-spot.is-me { border-color: var(--accent-primary); }
.daily-podium-rank { font-size: 18px; }
.daily-podium-name {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}
.daily-podium-total { font-size: 13px; white-space: nowrap; }
.daily-global-footer { margin-bottom: 20px; }

/* Four tabs on a narrow phone: a little smaller, and "This month" may
   wrap onto two lines rather than overflow its tab. */
@media (max-width: 400px) {
    .daily-tab { padding: 8px 2px; font-size: 13px; line-height: 1.2; }
}

/* ── Visitors (signed out on the web) ── */
/* nav.js draws nothing on a visitor's page (<html class="no-app-nav">), so
   no room is kept for the sidebar or the bottom tabs. The action bar's
   inset is computed from --bottom-tab-height on this same element, so it
   drops to the safe area as well. */
:root.no-app-nav { --nav-width: 0px; --bottom-tab-height: 0px; }
/* The class's display would otherwise beat the hidden attribute. */
.daily-public-header[hidden] { display: none; }
.daily-public-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: max(12px, env(safe-area-inset-top)) 16px 12px;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-secondary);
}
.daily-public-header:not([hidden]) + .page-header { padding-top: 16px; }
.daily-public-brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.3px;
    color: var(--text-primary);
    text-decoration: none;
}
.daily-public-brand img { width: 28px; height: 28px; border-radius: 7px; display: block; flex-shrink: 0; }
.daily-public-links { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.daily-public-login, .daily-public-signup {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 12px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}
.daily-public-login { color: var(--text-secondary); }
.daily-public-signup { background: var(--accent-primary); color: #ffffff; }

/* The offer to keep a visitor's hand (under the result), and the card in
   place of a home game board: one primary, one secondary link. */
.daily-visitor-cta {
    margin: 0 0 16px;
    padding: 16px;
    border-radius: 14px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    text-align: center;
}
.daily-visitor-cta-text, .daily-signup-text { margin: 0 0 12px; font-size: 14px; color: var(--text-secondary); line-height: 1.45; }
.daily-cta-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.daily-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 18px;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
}
.daily-join .daily-cta--primary, .daily-cta--primary { background: var(--accent-primary); color: #ffffff; }
.daily-join .daily-cta--secondary, .daily-cta--secondary {
    background: var(--bg-hover);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
}

.daily-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 20px;
}
.daily-stat {
    padding: 12px 14px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    min-width: 0;
}
.daily-stat-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
}
.daily-stat-value { font-size: 20px; font-weight: 700; margin-top: 2px; white-space: nowrap; }
.daily-stat-sub { font-size: 11px; color: var(--text-muted); }

.daily-past-head { margin-bottom: 8px; }
.daily-past-head .daily-h2 { margin-bottom: 2px; }

/* ── Player card: bottom sheet on phones, popover on desktop ── */
.daily-sheet-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
.daily-sheet {
    position: relative;
    width: 100%;
    max-height: 85vh;
    /* dvh leaves out iOS Safari's collapsible toolbar; vh stays as the fallback. */
    max-height: 85dvh;
    overflow-y: auto;
    padding: 10px 18px calc(22px + env(safe-area-inset-bottom));
    background: var(--bg-secondary);
    color: var(--text-primary);
    border-radius: 18px 18px 0 0;
    box-shadow: var(--shadow-lg);
    animation: daily-sheet-up 0.22s ease-out both;
    outline: none;
}
@keyframes daily-sheet-up {
    from { transform: translateY(24px); opacity: 0; }
    to   { transform: none; opacity: 1; }
}
.daily-sheet-handle {
    width: 38px;
    height: 5px;
    margin: 0 auto 10px;
    border-radius: 3px;
    background: var(--border-strong);
}
.daily-sheet-close {
    position: absolute;
    top: 8px;
    right: 10px;
    width: 34px;
    height: 34px;
    margin: 0;
    padding: 0;
    border-radius: 50%;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    font-size: 20px;
    line-height: 1;
}
/* A 34px circle with a 44px tap target around it. */
.daily-sheet-close::before {
    content: '';
    position: absolute;
    inset: -5px;
}
.daily-pc-head { padding-right: 40px; margin-bottom: 10px; }
.daily-pc-name { font-size: 20px; font-weight: 700; letter-spacing: -0.3px; }
.daily-pc-meta { font-size: 13px; color: var(--text-muted); margin-top: 2px; }
.daily-pc-mood {
    display: inline-block;
    margin-top: 8px;
    padding: 6px 10px;
    border-radius: 10px;
    background: var(--daily-notice-bg);
    border: 1px solid var(--daily-notice-edge);
    font-size: 13px;
}
.daily-pc-read { margin: 0 0 12px; font-size: 14px; line-height: 1.5; color: var(--text-secondary); }
.daily-pc-tendencies { margin: 0 0 12px; padding: 0; list-style: none; border-top: 1px solid var(--border-color); }
.daily-pc-tendencies li {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid var(--border-color);
    font-size: 14px;
}
.daily-pc-axis { color: var(--text-muted); }
.daily-pc-value { font-weight: 700; text-align: right; }
.daily-pc-value.is-hidden {
    min-width: 28px;
    padding: 0 8px;
    border-radius: 8px;
    background: var(--bg-tertiary);
    color: var(--text-muted);
    text-align: center;
}
.daily-pc-was { font-size: 11px; font-weight: 600; color: var(--text-muted); margin-left: 6px; }
.daily-pc-nugget { margin: 0; font-size: 13px; font-style: italic; color: var(--text-muted); }
.daily-pc-cards { display: flex; align-items: center; gap: 6px; margin: 0 0 12px; font-size: 13px; color: var(--text-secondary); }
.daily-pc-key { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.6px; color: var(--daily-key); margin-bottom: 4px; }

/* ── Dashboard card (dashboard.html #dailyHandCard) ── */
.daily-promo {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
    padding: 14px 16px;
    border-radius: 16px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
    color: var(--text-primary);
    text-decoration: none;
    transition: border-color 0.15s ease;
}
@media (hover: hover) {
    .daily-promo:hover { border-color: var(--accent-primary); }
}
.daily-promo-icon {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    background: var(--daily-felt);
    color: #ffffff;
}
.daily-promo-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.daily-promo-title { font-size: 15px; font-weight: 700; }
/* overflow-wrap: a home game name with no spaces breaks instead of overflowing the card. */
.daily-promo-line { font-size: 13px; color: var(--text-secondary); line-height: 1.35; overflow-wrap: anywhere; }
.daily-promo-cta { flex-shrink: 0; font-size: 13px; font-weight: 700; color: var(--accent-primary); white-space: nowrap; }
/* Phones: the CTA takes its own line under the text (lined up past the
   icon: 42px + the 14px gap), so the title and counts keep the width. */
@media (max-width: 480px) {
    .daily-promo { flex-wrap: wrap; row-gap: 6px; }
    .daily-promo-cta { flex-basis: calc(100% - 56px); margin-left: 56px; }
}

/* ── Small phones (320px wide): squeeze the seats a little more ── */
@media (max-width: 350px) {
    /* The logo alone, so Log in and Sign up free keep one line. */
    .daily-public-brand span { display: none; }
    .daily-seat { width: 84px; padding: 5px 3px 6px; }
    /* Narrow and short enough to clear the lower side seats in 5- and 6-seat games. */
    .daily-seat--hero { width: 108px; }
    .daily-seat--hero .daily-seat-cards { min-height: 50px; }
    .daily-card--lg { width: 36px; height: 50px; }
    .daily-result-number { font-size: 38px; }
}

/* ── Desktop ── */
@media (min-width: 768px) {
    .daily-public-header { padding-left: 32px; padding-right: 32px; }
    .daily-table { height: 440px; }
    .daily-seat { width: 112px; font-size: 12px; }
    .daily-seat--hero { width: 144px; }
    :root { --daily-bar-inset: 16px; }
    .daily-actions { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
    .daily-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    /* Popover: the overlay only catches outside clicks; the card is placed by JS. */
    .daily-sheet-overlay.is-popover { background: transparent; display: block; }
    .daily-sheet-overlay.is-popover .daily-sheet {
        position: fixed;
        width: 340px;
        max-height: 70vh;
        max-height: 70dvh;
        border-radius: 16px;
        border: 1px solid var(--border-strong);
        padding: 14px 18px 18px;
    }
    .daily-sheet-overlay.is-popover .daily-sheet-handle { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .daily-card.is-new, .daily-bubble, .daily-sheet, .daily-seat.is-knocking { animation: none; }
}