/* ============================================================
   DAILY GAME PAGE — laid out as an interior comic page
   ============================================================ */

.gpage {
    position: relative;
    z-index: 2;
    max-width: 1240px;
    margin: 0 auto;
    padding: 1.5rem 1.25rem 4rem;
    overflow-x: clip;       /* iOS-safe horizontal clipping */
}

/* Tiny issue header strip across the top */
.thinhead {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    background: var(--ink);
    color: var(--paper);
    border: 3px solid var(--ink);
    padding: 0.4rem 0.8rem;
    font-family: var(--display);
    letter-spacing: 0.14em;
    font-size: 0.85rem;
    box-shadow: 5px 5px 0 var(--red);
    margin-bottom: 1.25rem;
}
.thinhead .back {
    color: var(--yellow);
    text-decoration: none;
    border-right: 2px solid var(--paper); padding-right: 0.7rem;
    font-family: var(--display);
}
.thinhead .back:hover { color: var(--paper); }
.thinhead .crumbs {
    text-align: center;
    color: var(--yellow);
    font-family: var(--display);
    letter-spacing: 0.16em;
    font-size: 1rem;
}
.thinhead .crumbs em { color: var(--paper); font-style: normal; opacity: 0.7; }
.thinhead .right {
    display: flex; gap: 0.5rem; align-items: center;
    color: var(--yellow);
}
.thinhead .right .pg {
    background: var(--yellow); color: var(--ink);
    padding: 2px 8px; border: 2px solid var(--paper);
    font-size: 0.75rem;
}

/* Page-title masthead — used on archive, terms, privacy. The daily page
   no longer renders a .gmast (its title sits in the .thinhead instead). */
.gmast {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: end;
    gap: 1rem;
    margin-bottom: 1.25rem;
}
.gmast .gmast-l, .gmast .gmast-r {
    border-bottom: 4px solid var(--ink);
    padding-bottom: 0.3rem;
}
.gmast .gmast-l { text-align: left; }
.gmast .gmast-r { text-align: right; }
.gmast .gmast-l .label,
.gmast .gmast-r .label {
    font-family: var(--display);
    letter-spacing: 0.14em;
    font-size: 0.85rem;
    color: var(--ink);
    opacity: 0.6;
}
.gmast h1 {
    font-family: var(--display);
    font-size: clamp(2rem, 4.4vw, 3.4rem);
    line-height: 0.85;
    letter-spacing: 0.02em;
    -webkit-text-stroke: 2.5px var(--ink);
    paint-order: stroke fill;
    color: var(--yellow);
    text-shadow: 4px 4px 0 var(--red), 4px 4px 0 var(--ink);
    text-align: center;
    padding: 0 1rem;
    white-space: nowrap;
}
.gmast h1 b { color: var(--red); font-weight: 400; }

/* ---- TOP STRIP — status panels (Lives + Next Case) sit side-by-side on
   every viewport, including mobile, so the row stays compact. ---- */
.topstrip {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.frame {
    background: var(--paper-hi);
    border: 4px solid var(--ink);
    box-shadow: 6px 6px 0 var(--ink);
    overflow: hidden;
    position: relative;
}
.frame > .ftag {
    background: var(--ink);
    color: var(--paper);
    padding: 0.32rem 0.85rem 0.26rem;
    font-family: var(--display);
    letter-spacing: 0.14em;
    font-size: 0.85rem;
    line-height: 1;
    display: flex; align-items: center; justify-content: space-between;
}
.frame > .ftag.yellow { background: var(--yellow); color: var(--ink); }
.frame > .ftag.red    { background: var(--red);    color: var(--paper); }
.frame > .ftag.blue   { background: var(--blue);   color: var(--paper); }
.frame > .ftag.green  { background: var(--green);  color: var(--paper); }

.frame > .fbody {
    padding: 1rem 1.1rem 1.1rem;
}

/* lives panel */
.lives-row {
    display: flex; gap: 0.35rem; flex-wrap: wrap; justify-content: center;
    margin-bottom: 0.5rem;
}
.life {
    width: 30px; height: 30px;
    background: var(--red);
    border: 2.5px solid var(--ink);
    display: inline-block;
    transform: rotate(-5deg);
    clip-path: polygon(50% 0, 65% 35%, 100% 35%, 73% 58%, 85% 95%, 50% 75%, 15% 95%, 27% 58%, 0 35%, 35% 35%);
    text-indent: -9999px; overflow: hidden;
}
.life:nth-child(2n) { transform: rotate(7deg); }
.life:nth-child(3n) { transform: rotate(-2deg); }
.life.spent {
    background:
        repeating-linear-gradient(45deg,
            rgba(14,13,11,0.45) 0 2px, transparent 2px 5px),
        var(--paper-lo);
    opacity: 0.55;
}
.lives-meta {
    text-align: center;
    font-family: var(--display);
    letter-spacing: 0.08em;
    font-size: 1.15rem;
}
.lives-meta b { color: var(--red); }

/* clock panel */
.clock-num {
    font-family: var(--display);
    font-size: clamp(2rem, 3.5vw, 2.8rem);
    color: var(--blue);
    -webkit-text-stroke: 2px var(--ink);
    paint-order: stroke fill;
    line-height: 0.95;
    letter-spacing: 0.04em;
    text-align: center;
}
.clock-meta {
    text-align: center;
    font-family: var(--hand);
    font-weight: 700;
    font-size: 0.9rem;
    margin-top: 0.2rem;
    opacity: 0.85;
}

/* ---- INPUT PANEL (the suspect lineup) ---- */
.input-frame { margin-bottom: 1.5rem; }

.input-frame .fbody {
    padding: 1.25rem;
}

.input-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.8rem;
    align-items: stretch;
    position: relative;
}

.suspect-input {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    background: transparent;
    border: 3px dashed var(--ink);
    /* iOS Safari rounds <input> corners by default, which clips the first
       dash of the dashed border on the left edge — kill the radius and
       UA appearance so the border renders flush on every device. */
    border-radius: 0;
    -webkit-appearance: none;
    appearance: none;
    padding: 0.9rem 1.1rem 0.7rem;
    font-family: var(--display);
    font-size: clamp(1.4rem, 2.5vw, 2rem);
    letter-spacing: 0.04em;
    color: var(--ink);
    text-transform: uppercase;
    outline: none;
    line-height: 1;
}
.suspect-input::placeholder { color: rgba(14,13,11,0.35); }
.suspect-input:focus { border-style: solid; border-color: var(--red); }

.guess-cta {
    display: flex; align-items: stretch;
}

.guess-cta .cbtn {
    height: 100%;
    padding: 0.8rem 1.4rem 0.6rem;
    font-size: 1.5rem;
    line-height: 1;
}

/* Inline status / error toast shown under the input on bad guesses or
   the post-share confirmation. Hidden by default via the `hidden`
   attribute; populated by showError() in game.js. */
.suspect-toast {
    margin: 0.6rem 0 0;
    padding: 0.4rem 0.8rem;
    background: var(--yellow);
    border: 2.5px solid var(--ink);
    box-shadow: 3px 3px 0 var(--ink);
    font-family: var(--hand);
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--ink);
    text-align: center;
}
.suspect-toast[hidden] { display: none; }

.suggestions {
    border-top: 3px solid var(--ink);
    background: var(--paper-lo);
    /* Negative margins break the suggestions panel out of the .fbody
       padding so it sits flush against the frame's left/right/bottom
       borders. */
    margin: 0 -1.25rem -1.25rem;
}
.sug {
    display: grid;
    grid-template-columns: 38px 1fr auto;
    gap: 0.8rem;
    align-items: center;
    padding: 0.55rem 1.25rem;
    border-bottom: 2px dashed var(--ink);
    cursor: pointer;
    transition: background .15s, padding-left .15s;
}
.sug:last-child { border-bottom: none; }
.sug:hover { background: var(--yellow); padding-left: 1.7rem; }
.sug.active { background: var(--yellow); padding-left: 1.7rem; }
.sug-num {
    font-family: var(--display);
    font-size: 1.4rem;
    color: var(--red);
    -webkit-text-stroke: 1px var(--ink);
    paint-order: stroke fill;
    line-height: 1;
    text-align: center;
}
.sug-name {
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 0.01em;
}
.sug-name em { font-style: italic; font-weight: 400; opacity: 0.7; margin-left: 0.4rem; }
.sug-tag {
    font-family: var(--display);
    letter-spacing: 0.1em;
    font-size: 0.8rem;
    background: var(--ink); color: var(--paper);
    padding: 2px 8px;
}

/* ---- LEDGER (the panel of guess panels) ---- */
.ledger-strap {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.8rem;
    margin-bottom: 0.9rem;
}
.ledger-strap::before, .ledger-strap::after {
    content: '';
    height: 4px;
    background:
        repeating-linear-gradient(90deg, var(--ink) 0 8px, transparent 8px 14px);
}
.ledger-strap .strap {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--blue);
    color: var(--paper);
    padding: 0.5rem 1rem 0.4rem;
    border: 3px solid var(--ink);
    box-shadow: 4px 4px 0 var(--ink);
    font-family: var(--display);
    letter-spacing: 0.14em;
    transform: rotate(-1deg);
    line-height: 1;
}
.ledger-strap .strap small {
    background: var(--paper-hi); color: var(--ink);
    padding: 2px 8px;
    font-size: 0.75rem; letter-spacing: 0.1em;
    border: 2px solid var(--ink);
}

/* GUESS PANEL — each attempt */
.gpanel {
    background: var(--paper-hi);
    border: 4px solid var(--ink);
    box-shadow: 6px 6px 0 var(--ink);
    margin-bottom: 1.2rem;
    position: relative;
}
.gpanel.t1 { transform: rotate(-0.25deg); }
.gpanel.t2 { transform: rotate(0.35deg); }
.gpanel.t3 { transform: rotate(-0.4deg); }

.gpanel .corner {
    position: absolute;
    top: -16px;
    left: -10px;
    width: 56px; height: 56px;
    background: var(--red);
    color: var(--paper);
    border: 3px solid var(--ink);
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    font-family: var(--display);
    line-height: 0.95;
    transform: rotate(-8deg);
    box-shadow: 3px 3px 0 var(--ink);
    z-index: 2;
}
.gpanel .corner small { font-size: 0.55rem; letter-spacing: 0.1em; }
.gpanel .corner b { font-size: 1.4rem; line-height: 1; }

.gpanel-head {
    display: grid;
    grid-template-columns: 60px 1fr auto;
    align-items: center;
    gap: 1rem;
    padding: 0.7rem 1rem 0.7rem 4.5rem;
    border-bottom: 3px solid var(--ink);
    background: var(--paper-lo);
    position: relative;
}

/* Small character portrait in the row header. Mirrors the splash portrait
   styling but at thumbnail size; the missing-image fallback uses the same
   "?" silhouette pattern as the cover and splash. */
.gpanel-head .row-portrait {
    width: 56px;
    aspect-ratio: 4/5;
    border: 2.5px solid var(--ink);
    box-shadow: 3px 3px 0 var(--ink);
    background-size: cover;
    background-position: center 18%;
    background-color: var(--paper-hi);
    filter: contrast(1.05) saturate(1.05);
    position: relative;
    overflow: hidden;
    transform: rotate(-2deg);
    flex-shrink: 0;
}
.gpanel-head .row-portrait.row-portrait--missing {
    filter: none;
    background:
        radial-gradient(circle at 30% 35%, rgba(214,32,44,0.35), transparent 55%),
        radial-gradient(circle, rgba(255,236,164,0.18) 1px, transparent 1.5px) 0 0/4px 4px,
        var(--ink);
}
.gpanel-head .row-portrait.row-portrait--missing::after {
    content: '?';
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--display);
    font-size: 2.2rem;
    color: var(--yellow);
    -webkit-text-stroke: 2px var(--ink);
    paint-order: stroke fill;
    line-height: 1;
    text-shadow: 2px 2px 0 var(--red);
    transform: rotate(-6deg);
}

.gpanel-head .name {
    font-family: var(--display);
    font-size: clamp(1.4rem, 2.6vw, 2rem);
    line-height: 1;
    letter-spacing: 0.04em;
    background: var(--yellow);
    color: var(--ink);
    padding: 0 0.5rem;
    display: inline-block;
}
.gpanel-head .quote {
    font-family: var(--hand);
    font-weight: 700;
    font-size: 0.95rem;
    opacity: 0.85;
    color: var(--ink);
    display: inline-block;
    margin-top: 0.25rem;
}
.gpanel-head .verdict {
    font-family: var(--display);
    letter-spacing: 0.1em;
    font-size: 0.78rem;
    padding: 0.3rem 0.7rem;
    border: 2px solid var(--ink);
    background: var(--paper-hi);
    white-space: nowrap;
    line-height: 1;
    align-self: center;
}
.gpanel-head .verdict.cold  { background: var(--red);    color: var(--paper); }
.gpanel-head .verdict.warm  { background: var(--yellow); color: var(--ink); }
.gpanel-head .verdict.hot   { background: var(--green);  color: var(--paper); }

.cells {
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    gap: 0;
}
@media (max-width: 1100px) { .cells { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px)  { .cells { grid-template-columns: repeat(2, 1fr); } }

.cell {
    border-right: 2.5px solid var(--ink);
    border-bottom: 2.5px solid var(--ink);
    padding: 0.55rem 0.5rem 0.6rem;
    text-align: center;
    background: var(--paper-hi);
    min-height: 78px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
}
.cell .cell-sym {
    position: absolute;
    top: 4px;
    right: 6px;
    font-family: var(--display);
    font-size: 1rem;
    line-height: 1;
    color: var(--ink);
    opacity: 0.85;
    font-weight: 700;
    pointer-events: none;
}
.cell[data-s="hot"]  .cell-sym { color: var(--paper); }
.cell[data-s="cold"] .cell-sym { color: var(--paper); }
.cell:last-child { border-right: none; }
@media (max-width: 1100px) { .cell { border-bottom: 2.5px solid var(--ink); } .cell:nth-child(3n) { border-right: none; } }
@media (max-width: 600px)  { .cell:nth-child(3n) { border-right: 2.5px solid var(--ink); } .cell:nth-child(2n) { border-right: none; } }

.cell b {
    font-family: var(--display);
    font-weight: 400;
    font-size: 0.7rem;
    letter-spacing: 0.14em;
    margin-bottom: 0.25rem;
    display: block;
    color: var(--ink);
    opacity: 0.55;
}
.cell span {
    font-family: var(--body);
    font-weight: 700;
    font-size: 0.82rem;
    line-height: 1.15;
    letter-spacing: -0.005em;
    color: var(--ink);
}

/* halftone state fills */
.cell[data-s="hot"] {
    background:
        radial-gradient(circle, rgba(0,0,0,0.20) 1.1px, transparent 1.4px) 0 0/4.5px 4.5px,
        var(--green);
    color: var(--paper);
}
.cell[data-s="hot"] b { color: var(--paper); opacity: 0.85; }
.cell[data-s="hot"] span { color: var(--paper); }

.cell[data-s="warm"] {
    background:
        radial-gradient(circle, rgba(0,0,0,0.22) 1.1px, transparent 1.4px) 0 0/4.5px 4.5px,
        var(--yellow);
}

.cell[data-s="cold"] {
    background:
        radial-gradient(circle, rgba(0,0,0,0.16) 0.9px, transparent 1.2px) 0 0/4.5px 4.5px,
        var(--red);
    color: var(--paper);
}
.cell[data-s="cold"] b { color: var(--paper); opacity: 0.8; }
.cell[data-s="cold"] span { color: var(--paper); text-decoration: line-through; text-decoration-thickness: 2px; }

/* Direction arrow on the year cell — bumped up so it reads as a directive,
   not a decoration. Drops onto its own line below the year. The attribute
   selector matches the cold cell's `.cell[data-s="cold"] span` specificity
   so the line-through on the year value doesn't strike through the arrow. */
.cell[data-s] .arr {
    display: block;
    margin: 0.2rem auto 0;
    font-family: var(--display);
    font-size: 1.75rem;
    line-height: 0.9;
    color: var(--paper);
    -webkit-text-stroke: 1.5px var(--ink);
    paint-order: stroke fill;
    text-shadow: 2px 2px 0 var(--ink);
    letter-spacing: 0;
    text-decoration: none;
}

/* ---- COMIC FOOT ---- */
.gfoot {
    margin-top: 2rem;
    background: var(--ink);
    color: var(--paper);
    padding: 1rem 1.2rem;
    text-align: center;
    box-shadow: 6px 6px 0 var(--red);
}
.gfoot .nx {
    font-family: var(--hand);
    font-weight: 700;
    color: var(--yellow);
    font-size: 1.05rem;
}
.gfoot .nx b { font-family: var(--display); letter-spacing: 0.08em; color: var(--paper); }
.gfoot small {
    display: block; margin-top: 0.4rem;
    opacity: 0.7;
    font-size: 0.7rem;
    letter-spacing: 0.12em;
}

/* "TURN PAGE" arrow on edge */
.turn-page {
    position: absolute;
    right: -8px; top: 60%;
    transform: rotate(-90deg) translateX(50%);
    transform-origin: right top;
    background: var(--red); color: var(--paper);
    border: 3px solid var(--ink);
    padding: 0.4rem 0.9rem 0.3rem;
    font-family: var(--display);
    letter-spacing: 0.12em;
    font-size: 0.85rem;
    box-shadow: -3px 3px 0 var(--ink);
}

/* ============================================================
   MOBILE — narrow-viewport fixes (<= 500px)
   The daily layout's thinhead and masthead were designed for
   desktop. On mobile we let everything shrink, stack the
   header crumbs, shorten the input placeholder, and keep the
   ledger panels readable. The cells grid already responds via
   media queries above.
   ============================================================ */
@media (max-width: 500px) {
    /* allow grid/flex children to shrink to fit */
    .thinhead,
    .thinhead > *,
    .gmast,
    .gmast > *,
    .topstrip,
    .topstrip > *,
    .input-row,
    .input-row > *,
    .gpanel-head,
    .gpanel-head > * { min-width: 0; }

    .gpage {
        padding: 1rem 0.6rem 3rem;
        max-width: 100vw;
    }
    /* lighter box-shadows on mobile so they don't push past the viewport */
    .frame,
    .gpanel,
    .fanmail { box-shadow: 4px 4px 0 var(--ink); }
    .ledger-strap .strap { box-shadow: 3px 3px 0 var(--ink); }
    .gfoot { box-shadow: 4px 4px 0 var(--red); }
    /* keep input font >= 16px so iOS Safari doesn't auto-zoom on focus */
    .suspect-input { font-size: 16px; }

    /* ---- thinhead: 3-col grid was cramming a long breadcrumb
       string. Drop the size, let the middle text shrink/ellipsis,
       hide the right-side date chip (the masthead below already
       shows date / issue). ---- */
    .thinhead {
        grid-template-columns: auto 1fr;
        font-size: 0.7rem;
        padding: 0.4rem 0.6rem;
        gap: 0.4rem;
    }
    .thinhead .crumbs {
        font-size: 0.65rem;
        letter-spacing: 0.08em;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .thinhead .right { display: none; } /* date duplicated in masthead */
    .thinhead .back { padding-right: 0.5rem; font-size: 0.7rem; }

    /* ---- masthead (archive / terms / privacy): stack instead of 3 cols ---- */
    .gmast {
        grid-template-columns: 1fr;
        gap: 0.6rem;
        text-align: center;
    }
    .gmast .gmast-l,
    .gmast .gmast-r { text-align: center; }
    .gmast h1 {
        font-size: clamp(2rem, 9vw, 2.6rem);
        padding: 0 0.5rem;
        white-space: normal;
    }
    .gmast .bubble { display: inline-block; }

    /* ---- topstrip: already stacks at 800px, just tighten ---- */
    .clock-num { font-size: clamp(1.8rem, 8vw, 2.4rem); }

    /* ---- input frame: shorter placeholder; wrap input + button ---- */
    .input-frame .fbody { padding: 1rem; }
    .input-row {
        grid-template-columns: 1fr;
        gap: 0.6rem;
    }
    .suspect-input { font-size: clamp(1.1rem, 5vw, 1.5rem); padding: 0.7rem 0.8rem; }
    .guess-cta .cbtn { padding: 0.7rem 1rem 0.55rem; font-size: 1.2rem; }
    .suggestions { margin: 0 -1rem -1rem; }
    .sug { grid-template-columns: 28px 1fr auto; padding: 0.5rem 1rem; gap: 0.5rem; }
    .sug-num { font-size: 1.1rem; }
    .sug-name { font-size: 0.85rem; }

    /* ---- ledger: simplify panel header so portrait+name+verdict fit ---- */
    .gpanel-head {
        grid-template-columns: 48px 1fr auto;
        gap: 0.6rem;
        padding: 0.6rem 0.7rem 0.6rem 3.5rem;
    }
    .gpanel-head .row-portrait { width: 44px; }
    .gpanel-head .name { font-size: clamp(0.95rem, 4.5vw, 1.3rem); }
    .gpanel-head .quote { font-size: 0.78rem; line-height: 1.2; }
    .gpanel-head .verdict { font-size: 0.65rem; padding: 0.25rem 0.5rem; }
    .gpanel .corner { width: 44px; height: 44px; top: -12px; left: -8px; }
    .gpanel .corner b { font-size: 1.05rem; }
    .gpanel .corner small { font-size: 0.5rem; }

    /* ---- ledger strap: hide the decorative tick lines on either side ---- */
    .ledger-strap { grid-template-columns: 1fr; }
    .ledger-strap::before,
    .ledger-strap::after { display: none; }
    .ledger-strap .strap { justify-self: center; transform: none; }
}