/* Name a Card — the game page (/name-a-card/). Builds on the site tokens in /styles.css.
   The only new colours are the ones Magic itself owns: five card frames and
   four rarity stamps. Both sets are muted to sit on the site's warm paper. */

:root {
    --frame-w: #f1ecd9; --frame-u: #d3e2ee; --frame-b: #cfc9c6; --frame-r: #efcfc2;
    --frame-g: #cfe0c9; --frame-m: #ead79b; --frame-c: #dadde0; --frame-l: #e3d5c3;
    --frame-ink: #1c1a17;
    --rar-common: #1c1a17; --rar-uncommon: #8597a4; --rar-rare: #b08a2e; --rar-mythic: #cf5226;
    --rar-guest: #7d4fb0; --rar-restricted: #2a6fbd; --lotus-gold: #d9b45f; --lotus-black: #100e0b;
    --card-back: #6b3a26; --card-back-edge: #4a2618; --card-back-oval: #c9a36a;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --frame-w: #6f6a55; --frame-u: #34536b; --frame-b: #3a3536; --frame-r: #7a3f30;
        --frame-g: #37573a; --frame-m: #7d6a2c; --frame-c: #4c5257; --frame-l: #5c4d3c;
        --frame-ink: #f4efe6;
        --rar-common: #ece7dd; --rar-uncommon: #a9bac6; --rar-rare: #d8b46a; --rar-mythic: #ee7a4c;
        --rar-guest: #b58be0; --rar-restricted: #5fa3e6;
    }
}
:root[data-theme="dark"] {
    --frame-w: #6f6a55; --frame-u: #34536b; --frame-b: #3a3536; --frame-r: #7a3f30;
    --frame-g: #37573a; --frame-m: #7d6a2c; --frame-c: #4c5257; --frame-l: #5c4d3c;
    --frame-ink: #f4efe6;
    --rar-common: #ece7dd; --rar-uncommon: #a9bac6; --rar-rare: #d8b46a; --rar-mythic: #ee7a4c;
    --rar-guest: #b58be0; --rar-restricted: #5fa3e6;
}

/* rcmtg sets headings in sans outside .prose; the game wants the serif throughout. */
.nac h1, .nac-credits h2 { font-family: var(--serif); font-weight: 600; line-height: 1.15; letter-spacing: -0.01em; margin: 0; }

.nac { max-width: 44rem; margin: 0 auto; padding: 3rem 0 1rem; min-height: 30rem; }
.nac [hidden] { display: none !important; }

.nac-eyebrow {
    font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--ink-faint); margin: 0 0 0.6rem;
}
.nac-title { font-size: clamp(2.4rem, 8vw, 3.8rem); line-height: 1.02; letter-spacing: -0.02em; }
.nac-epigraph { font-family: var(--serif); font-style: italic; color: var(--ink-soft); margin: 0.6rem 0 0; }
.nac-lede { font-size: 1.15rem; color: var(--ink-soft); margin: 1.5rem 0 0; max-width: 36rem; }

.nac-rules { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; gap: 0.9rem; max-width: 36rem; }
.nac-rules li { display: grid; grid-template-columns: 1.4rem 1fr; gap: 0.75rem; align-items: baseline; }
.nac-rules em { font-family: var(--serif); }
.nac-rules .sym { justify-self: center; transform: translateY(1px) rotate(45deg); }

/* The rarity stamp: Magic's expansion symbol, reduced to a diamond. */
.sym {
    display: inline-block; width: 0.62em; height: 0.62em; flex: none;
    background: var(--rar-common); transform: rotate(45deg);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);
}
.sym[data-rarity="uncommon"], [data-rarity="uncommon"] > .mc-type .sym { background: var(--rar-uncommon); }
.sym[data-rarity="rare"], [data-rarity="rare"] > .mc-type .sym { background: var(--rar-rare); }
.sym[data-rarity="mythic"], [data-rarity="mythic"] > .mc-type .sym { background: var(--rar-mythic); }
.sym[data-rarity="guest"], [data-rarity="guest"] > .mc-type .sym { background: var(--rar-guest); }
.sym[data-rarity="restricted"], [data-rarity="restricted"] > .mc-type .sym { background: var(--rar-restricted); }
/* One of a kind: black, ringed in gold — the Lotus. */
.sym[data-rarity="lotus"], [data-rarity="lotus"] > .mc-type .sym { background: var(--lotus-black); box-shadow: 0 0 0 2px var(--lotus-gold); }

.ladder { display: flex; flex-wrap: wrap; gap: 0.3rem 1.1rem; margin-top: 0.55rem; font-size: 0.9rem; color: var(--ink-soft); }
.ladder > span { display: inline-flex; align-items: center; gap: 0.5rem; }
.ladder b { color: var(--ink); font-weight: 600; }
.nac-query { font-size: 0.9rem; }
.nac-query code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.92em; }

.nac-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.5rem; margin-top: 2.25rem; }
.nac-btn {
    font: inherit; font-weight: 600; cursor: pointer;
    background: var(--accent); color: var(--bg);
    border: 1px solid var(--accent); border-radius: 10px;
    padding: 0.8rem 1.6rem; min-height: 44px;
}
.nac-btn:hover { filter: brightness(1.08); }
.nac-btn:focus-visible, .nac-link:focus-visible, .nac-input:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.nac-link {
    font: inherit; cursor: pointer; background: none; border: 0; padding: 0.6rem 0; min-height: 44px;
    color: var(--accent); text-decoration: underline; text-underline-offset: 2px;
}
.nac-link:hover { text-decoration: none; }
.nac-note { color: var(--ink-faint); font-size: 0.9rem; margin: 1rem 0 0; }

/* ---------- The hand: seven slots across the top of a round ---------- */
.hand { display: flex; gap: 0.45rem; margin: 0 0 2.25rem; padding: 0; list-style: none; }
.hand li {
    flex: 0 1 2.6rem; aspect-ratio: 5 / 7; border-radius: 5px;
    display: grid; place-items: center;
    background:
        radial-gradient(ellipse 34% 40% at 50% 50%, transparent 62%, var(--card-back-oval) 64% 78%, transparent 80%),
        var(--card-back);
    border: 2px solid var(--card-back-edge);
    transition: transform 0.25s ease;
}
.hand li[data-state="now"] { transform: translateY(-0.45rem); box-shadow: 0 6px 14px rgba(0, 0, 0, 0.18); }
.hand li[data-state="done"] { background: var(--frame); border-color: color-mix(in srgb, var(--frame) 70%, #000); }
.hand li[data-state="miss"] { opacity: 0.35; }
.hand { perspective: 600px; }
.hand li.flip-in { animation: slot-turn 0.45s cubic-bezier(0.3, 0.7, 0.2, 1); }
@keyframes slot-turn { from { transform: translateY(-0.45rem) rotateY(90deg); } }

/* ---------- A prompt ---------- */
.prompt-q { font-size: clamp(1.9rem, 6.5vw, 3rem); line-height: 1.1; letter-spacing: -0.015em; text-wrap: balance; }
.prompt-form { display: flex; gap: 0.6rem; margin-top: 1.75rem; }
.nac-input {
    flex: 1 1 auto; min-width: 0; font: inherit; font-family: var(--serif); font-size: 1.25rem;
    color: var(--ink); background: var(--surface);
    border: 1px solid var(--rule); border-radius: 10px; padding: 0.7rem 0.9rem;
}
.clock { display: flex; align-items: center; gap: 0.75rem; margin-top: 1rem; }
.clock-track { flex: 1; height: 4px; border-radius: 2px; background: var(--rule); overflow: hidden; }
.clock-fill { height: 100%; width: 100%; background: var(--ink-soft); transform-origin: left; }
.clock-num { display: inline-block; font-variant-numeric: tabular-nums; font-size: 0.9rem; color: var(--ink-soft); min-width: 1.6rem; text-align: right; }
.clock-num.beat { animation: beat 0.45s ease-out; }
@keyframes beat { from { transform: scale(1.4); } }
.clock[data-low] .clock-fill { background: var(--accent); }
.clock[data-low] .clock-num { color: var(--accent); font-weight: 600; }
.prompt-msg { min-height: 1.7rem; margin: 0.9rem 0 0; color: var(--accent); }
.shake { animation: shake 0.3s; }
@keyframes shake { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }

/* ---------- A Magic card, drawn in CSS ---------- */
.mc {
    --frame: var(--frame-c);
    position: relative; width: 100%; aspect-ratio: 5 / 7;
    display: flex; flex-direction: column; gap: 3.5%;
    padding: 5% 5% 7.5%; border-radius: 4.5% / 3.2%;
    background: #17140f; color: var(--frame-ink);
    /* The hairline keeps a black card's edge visible on the dark theme; on paper it disappears. */
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 10px 24px rgba(0, 0, 0, 0.16);
    font-size: var(--mc-size, 0.8rem); line-height: 1.25;
    text-decoration: none;
}
[data-frame="w"] { --frame: var(--frame-w); } [data-frame="u"] { --frame: var(--frame-u); }
[data-frame="b"] { --frame: var(--frame-b); } [data-frame="r"] { --frame: var(--frame-r); }
[data-frame="g"] { --frame: var(--frame-g); } [data-frame="m"] { --frame: var(--frame-m); }
[data-frame="c"] { --frame: var(--frame-c); } [data-frame="l"] { --frame: var(--frame-l); }

.mc-name, .mc-type {
    display: flex; align-items: center; justify-content: space-between; gap: 0.4em;
    background: var(--frame); border-radius: 0.35em; padding: 0.3em 0.55em;
    font-family: var(--serif); font-weight: 600;
}
.mc-name span:first-child, .mc-type span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mc-mv {
    flex: none; width: 1.45em; height: 1.45em; border-radius: 50%;
    display: grid; place-items: center; font-family: var(--sans); font-size: 0.85em;
    background: color-mix(in srgb, var(--frame) 55%, var(--frame-ink)); color: var(--frame);
}
.mc-art {
    flex: 1 1 0; min-height: 0; border-radius: 0.3em;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    background:
        repeating-linear-gradient(135deg, transparent 0 9px, rgba(0, 0, 0, 0.045) 9px 10px),
        color-mix(in srgb, var(--frame) 78%, var(--frame-ink));
}
.mc-score { display: flex; flex-direction: column; align-items: center; }
/* Once the real art arrives, the score steps aside into a plate in the corner. */
.mc-art.has-art { background-size: cover; background-position: center 20%; align-items: flex-start; justify-content: flex-end; }
.has-art .mc-score {
    flex-direction: row; align-items: baseline; gap: 0.45em; margin: 0.4em;
    padding: 0.2em 0.55em; border-radius: 0.35em;
    background: rgba(23, 20, 15, 0.82); color: #f4efe6;
}
.has-art .mc-pts { font-size: 1.35em; }
.has-art .mc-rar { margin-top: 0; font-size: 0.68em; }
.mc-artist {
    position: absolute; left: 6%; bottom: 1.6%; max-width: 62%;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: 0.66em; color: #b9b0a2; letter-spacing: 0.01em;
}
.mc-pts { font-family: var(--serif); font-size: 2.6em; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; }
.mc-rar { font-size: 0.78em; letter-spacing: 0.14em; text-transform: uppercase; margin-top: 0.35em; }
.mc-type { font-size: 0.82em; }
.mc-text {
    flex: 0 0 30%; overflow: hidden; background: color-mix(in srgb, var(--frame) 45%, var(--surface));
    border-radius: 0.3em; padding: 0.5em 0.6em; font-size: 0.82em; color: var(--ink);
}
.mc-text i { font-family: var(--serif); }
.mc-pt {
    position: absolute; right: 3.5%; bottom: 4%;
    background: var(--frame); border: 2px solid #17140f; border-radius: 0.5em;
    padding: 0.05em 0.5em; font-family: var(--serif); font-weight: 600; font-size: 0.9em;
}
a.mc:hover { transform: translateY(-3px); transition: transform 0.15s ease; }

.mc-back {
    background:
        radial-gradient(ellipse 30% 34% at 50% 50%, transparent 60%, var(--card-back-oval) 62% 74%, transparent 76%),
        var(--card-back);
    border: 0.5em solid var(--card-back-edge);
    align-items: center; justify-content: flex-end;
    color: #f1e3cf; font-family: var(--serif); font-style: italic;
}

/* ---------- Motion, shared ---------- */
/* Every animation here is written as `from` the start state only, so the
   element's own style is where it ends — and `.instant` (a skipped reveal)
   can finish any of them by making them take a millisecond. */
.rise { animation: rise 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) backwards; animation-delay: calc(var(--i, 0) * 70ms); }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }
.instant, .instant *, .instant *::after {
    animation-duration: 1ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important;
    transition-duration: 1ms !important; transition-delay: 0s !important;
}

/* Loading a hand: three card backs riffling. */
.shuffle { position: relative; width: 3.4rem; height: 4.2rem; margin: 0 0 1.25rem; }
.shuffle i {
    position: absolute; left: 0.4rem; top: 0.3rem; width: 2.6rem; aspect-ratio: 5 / 7; border-radius: 5px;
    background: radial-gradient(ellipse 34% 40% at 50% 50%, transparent 62%, var(--card-back-oval) 64% 78%, transparent 80%), var(--card-back);
    border: 2px solid var(--card-back-edge); box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
    animation: riffle 1.5s cubic-bezier(0.5, 0, 0.3, 1) infinite;
}
.shuffle i:nth-child(2) { animation-delay: 0.5s; }
.shuffle i:nth-child(3) { animation-delay: 1s; }
@keyframes riffle { 30% { transform: translateX(0.9rem) rotate(8deg); } 60% { transform: none; } }

/* ---------- Reveal ---------- */
.reveal { display: grid; grid-template-columns: minmax(0, 15rem) 1fr; gap: 2rem; align-items: center; transition: background-color 0.7s, box-shadow 0.7s, padding 0.4s; }
.reveal .mc { --mc-size: 0.86rem; }

/* The card: dealt onto the stack face down, then turned over. */
.flip { perspective: 1400px; animation: deal 0.4s cubic-bezier(0.2, 0.7, 0.2, 1) backwards; }
@keyframes deal { from { opacity: 0; transform: translateY(18px) rotate(-4deg); } }
.flipper { position: relative; transform-style: preserve-3d; transform: rotateY(180deg); transition: transform 0.65s cubic-bezier(0.3, 0.7, 0.2, 1); }
.flip.is-face .flipper { transform: none; }
.flip-front, .flip-back { -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.flip-front { aspect-ratio: 5 / 7; }
.flip-back { position: absolute; inset: 0; transform: rotateY(180deg); }
/* On the stack, the oval glows while the server answers. */
.flip-back::after {
    content: ''; position: absolute; inset: 18% 22%; border-radius: 50%;
    box-shadow: 0 0 24px 6px rgba(232, 196, 120, 0.55); opacity: 0;
}
.reveal[data-phase="resolving"] .flip-back::after { animation: glow 0.9s ease-in-out infinite alternate; }
@keyframes glow { to { opacity: 1; } }
/* A missed draw: the card is laid down, dimmed. */
.reveal[data-phase="miss"] .flip { opacity: 0.55; transform: rotate(-3deg) translateY(6px); transition: opacity 0.5s, transform 0.5s; }

/* Rare and above catch the light once as they turn; mythic and above keep a glow in their colour. */
.flip-front .mc::after {
    content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0;
    background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.5) 50%, transparent 62%) 130% 0 / 260% 100% no-repeat;
}
.reveal:is([data-tier="rare"], [data-tier="mythic"], [data-tier="guest"], [data-tier="restricted"], [data-tier="lotus"]) .flip-front .mc::after {
    animation: sheen 1.1s 0.3s ease-out backwards;
}
@keyframes sheen { from, to { opacity: 1; } from { background-position: 130% 0; } to { background-position: -30% 0; } }
.reveal .flip-front .mc { transition: box-shadow 0.8s ease; }
.reveal[data-tier="mythic"] .flip-front .mc { box-shadow: 0 0 0 2px var(--rar-mythic), 0 14px 36px color-mix(in srgb, var(--rar-mythic) 38%, transparent); }
.reveal[data-tier="guest"] .flip-front .mc { box-shadow: 0 0 0 2px var(--rar-guest), 0 14px 40px color-mix(in srgb, var(--rar-guest) 42%, transparent); }
.reveal[data-tier="restricted"] .flip-front .mc { box-shadow: 0 0 0 2px var(--rar-restricted), 0 14px 44px color-mix(in srgb, var(--rar-restricted) 46%, transparent); }

/* The words beside it. */
.reveal-name { font-family: var(--serif); font-size: 1.2rem; font-weight: 600; color: var(--ink); margin: 0 0 0.15rem; }
.reveal-head { font-size: clamp(1.7rem, 5vw, 2.4rem); transform-origin: left center; }
.reveal[data-phase="resolving"] .reveal-head { color: var(--ink-faint); animation: breathe 0.9s ease-in-out infinite alternate; }
@keyframes breathe { to { opacity: 0.45; } }
.reveal-head.pop { animation: pop 0.24s ease-out; }
@keyframes pop { from { transform: scale(1.07); } }
.reveal-head[data-rarity="uncommon"] { color: var(--rar-uncommon); }
.reveal-head[data-rarity="rare"] { color: var(--rar-rare); }
.reveal-head[data-rarity="mythic"] { color: var(--rar-mythic); }
.reveal-head[data-rarity="guest"] { color: var(--rar-guest); }
.reveal-head[data-rarity="restricted"] { color: var(--rar-restricted); }
.reveal-head { transition: color 0.2s; }

.reveal-score { display: flex; align-items: baseline; gap: 0.4rem; margin-top: 0.4rem; }
.reveal-score b { font-family: var(--serif); font-size: 1.9rem; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; color: var(--ink); }
.reveal-score span { color: var(--ink-faint); font-size: 0.9rem; }
.reveal[data-phase="resolving"] :is(.reveal-score, .climb) { opacity: 0.4; }
.reveal :is(.reveal-score, .climb) { transition: opacity 0.3s; }

/* The ladder: six equal steps, one per tier, and the Lotus past the end. */
.climb { margin: 1rem 0 0; max-width: 26rem; }
.climb-row { display: flex; align-items: center; gap: 0.65rem; }
.climb-track { position: relative; flex: 1; display: grid; grid-template-columns: repeat(6, 1fr); gap: 3px; }
.climb-seg { height: 6px; border-radius: 3px; background: var(--rule); transition: background-color 0.25s; }
.climb-seg.on[data-rarity="common"] { background: var(--rar-common); }
.climb-seg.on[data-rarity="uncommon"] { background: var(--rar-uncommon); }
.climb-seg.on[data-rarity="rare"] { background: var(--rar-rare); }
.climb-seg.on[data-rarity="mythic"] { background: var(--rar-mythic); }
.climb-seg.on[data-rarity="guest"] { background: var(--rar-guest); }
.climb-seg.on[data-rarity="restricted"] { background: var(--rar-restricted); }
.climb-marker {
    position: absolute; top: 50%; left: 0; width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px;
    transform: rotate(45deg); background: var(--surface); border: 2px solid var(--ink);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}
.climb-jewel { width: 11px; height: 11px; opacity: 0.22; transition: opacity 0.4s, box-shadow 0.6s; }
.climb.charging .climb-jewel { animation: charge 0.28s ease-in-out infinite alternate; }
@keyframes charge { to { opacity: 0.85; } }
.climb.lit .climb-jewel { opacity: 1; box-shadow: 0 0 0 2px var(--lotus-gold), 0 0 16px 3px var(--lotus-gold); }
.climb-labels {
    display: grid; grid-template-columns: repeat(6, 1fr); gap: 3px; margin: 0.5rem calc(11px + 0.65rem) 0 0; padding: 0;
    list-style: none; font-size: 0.72rem; color: var(--ink-faint); white-space: nowrap;
}
/* Only the step the marker is on is named: six labels do not fit six steps on a phone, and the headline names it anyway. */
.climb-labels li { visibility: hidden; }
.climb-labels li.on { visibility: visible; color: var(--ink); font-weight: 600; }

.reveal-lines > * { animation: rise 0.45s cubic-bezier(0.2, 0.7, 0.2, 1) backwards; animation-delay: calc(var(--i, 0) * 90ms); }
.reveal .nac-actions .nac-btn:not([hidden]) { animation: rise 0.45s 0.25s cubic-bezier(0.2, 0.7, 0.2, 1) backwards; }

/* One of a kind turns the whole reveal into the Lotus: black, gold, petals. */
.reveal.is-lotus {
    background: radial-gradient(ellipse at 70% 0%, #2a2114 0%, var(--lotus-black) 62%);
    border: 1px solid var(--lotus-gold); border-radius: 14px; padding: 1.75rem;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
}
.is-lotus .reveal-head, .is-lotus .nac-eyebrow { color: var(--lotus-gold); }
.is-lotus .reveal-body p { color: #cfc4ae; }
.is-lotus .reveal-body strong, .is-lotus .reveal-body a { color: #f6ecd6; }
.is-lotus .mc { box-shadow: 0 0 0 2px var(--lotus-gold), 0 0 34px rgba(217, 180, 95, 0.45); }
.is-lotus .nac-btn { background: var(--lotus-gold); border-color: var(--lotus-gold); color: var(--lotus-black); }
.lotus { display: block; width: 7.5rem; margin: 0 0 0.9rem; overflow: visible; }
.lotus path { fill: #17130d; stroke: var(--lotus-gold); stroke-width: 2; stroke-linejoin: round; transform-box: fill-box; }
.lotus g > path { animation: bloom 1s cubic-bezier(0.2, 0.7, 0.2, 1) backwards; transform-origin: 50% 100%; }
.lotus g > path:nth-child(1), .lotus g > path:nth-child(2) { animation-delay: 0.3s; }
.lotus g > path:nth-child(3), .lotus g > path:nth-child(4) { animation-delay: 0.15s; }
@keyframes bloom { from { opacity: 0; transform: scaleY(0.2); } }
.is-lotus .climb-seg { background: #3a3125; }
.is-lotus .climb-seg.on { background: var(--lotus-gold); }
.is-lotus .climb-marker { background: var(--lotus-black); border-color: var(--lotus-gold); }
.is-lotus .climb-labels li, .is-lotus .reveal-score span { color: #8d806a; }
.is-lotus .climb-labels li.on, .is-lotus .reveal-score b, .is-lotus .reveal-name { color: #f6ecd6; }
.is-lotus .nac-query code { color: #f6ecd6; }
.reveal-body p { margin: 0.8rem 0 0; color: var(--ink-soft); }
.reveal-body strong { color: var(--ink); }

/* ---------- The finished hand ---------- */
.final-score { display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; margin-top: 0.3rem; }
.final-score b { font-family: var(--serif); font-size: clamp(3rem, 12vw, 4.6rem); line-height: 1; letter-spacing: -0.02em; }
.final-score span { color: var(--ink-faint); font-size: 1.1rem; }
.final-verdict { font-family: var(--serif); font-style: italic; font-size: 1.25rem; color: var(--ink-soft); margin: 0.5rem 0 0; }
.final-tally { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; margin: 1rem 0 0; padding: 0; list-style: none; color: var(--ink-soft); font-size: 0.92rem; }
.final-tally li { display: flex; align-items: center; gap: 0.5rem; }
.final-hand { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin: 2.25rem 0 0; padding: 0; list-style: none; }
.final-hand .mc { --mc-size: 0.62rem; }
.final-hand li { animation: deal 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) backwards; animation-delay: calc(0.35s + var(--i, 0) * 90ms); }
.final-score b { font-variant-numeric: tabular-nums; }

/* ---------- Credits ---------- */
.nac-credits { max-width: 44rem; margin: 4rem auto 0; padding-top: 2rem; border-top: 1px solid var(--rule); color: var(--ink-soft); font-size: 0.95rem; }
.nac-credits h2 { font-size: 1.15rem; color: var(--ink); margin-bottom: 0.6rem; }
.nac-credits p { margin: 0 0 0.9rem; }
.nac-credits summary { cursor: pointer; color: var(--accent); padding: 0.4rem 0; }
.nac-credits details p { margin-top: 0.4rem; }
.nac-legal { color: var(--ink-faint); font-size: 0.8rem; margin-top: 1.25rem; }

@media (max-width: 640px) {
    .nac { padding-top: 2rem; }
    .reveal { grid-template-columns: 1fr; gap: 1.5rem; }
    .reveal .flip { width: 100%; max-width: 13.5rem; margin: 0 auto; }
    .reveal.is-lotus { padding: 1.25rem; }
    .final-hand { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
    .final-hand .mc { --mc-size: 0.68rem; }
    .prompt-form { flex-wrap: wrap; }
    .prompt-form .nac-btn { flex: 1 1 100%; }
}
@media (max-width: 400px) {
    .climb-labels { font-size: 0.66rem; }
}
@media (prefers-reduced-motion: reduce) {
    .nac *, .nac *::after {
        animation-duration: 1ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important;
        transition-duration: 1ms !important; transition-delay: 0s !important;
    }
    a.mc:hover { transform: none; }
}