/* =====================================================================
   games.css - "Our Little Adventure" story map + game overlay
   A warm parchment board with a winding dashed path: chapter nodes
   alternate sides, fun-fact sparkles sit on the connectors, the finale
   waits at the bottom. Games open in the layered overlay; arcade games
   fill it with an iframe behind a boot screen (ui-kit.css).
   ===================================================================== */

/* ======================= HUD ======================= */
.adv-hud {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: var(--space-md);
}
.board-btn {
    display: inline-flex; align-items: center; gap: 6px; flex: none;
    font-family: var(--pixel); font-weight: 600; font-size: var(--px-sm); color: #fff;
    background: linear-gradient(var(--accent), var(--accent-deep));
    border: 2px solid var(--accent-deep);
    border-radius: var(--radius-pill); padding: 8px 12px; cursor: pointer;
    box-shadow: var(--card-shadow);
}
.board-btn:active { transform: translateY(2px); }
.board-btn svg { width: 13px; height: 13px; }

/* ======================= ADVENTURE BOARD ======================= */
.adv-board {
    position: relative;
    background: linear-gradient(var(--paper-2), var(--card-warm));
    padding: var(--space-lg) var(--space-md) var(--space-sm);
    margin-bottom: var(--space-md);
    overflow: hidden;
}
/* one ambient decoration only (perf budget) */
.adv-board .adv-cloud {
    position: absolute; top: 14px; left: 8%;
    width: 56px; height: 16px; border-radius: 40px;
    background: rgba(255,255,255,.7);
    animation: drift var(--drift-dur) linear infinite;
    pointer-events: none;
}

/* a chapter row: node on one side, fact sparkle on the connector */
.adv-row {
    position: relative;
    display: flex;
    padding-bottom: 14px;
}
.adv-row--l { justify-content: flex-start; }
.adv-row--r { justify-content: flex-end; }
.adv-row--fin { justify-content: center; }
.adv-row + .adv-row { margin-top: 48px; }

/* the winding dashed path between consecutive nodes */
.adv-row + .adv-row::before {
    content: '';
    position: absolute;
    top: -52px; height: 76px;
    left: 22%; right: 22%;
    border: 0 dashed color-mix(in srgb, var(--ink-mute) 75%, transparent);
    border-bottom-width: 4px;
    pointer-events: none;
    z-index: 0;
    transition: border-color var(--dur-med);
}
.adv-row--l + .adv-row--r::before { border-left-width: 4px; border-bottom-left-radius: 40px; }
.adv-row--r + .adv-row--l::before,
.adv-row--r + .adv-row--fin::before { border-right-width: 4px; border-bottom-right-radius: 40px; }
.adv-row--l + .adv-row--fin::before { border-left-width: 4px; border-bottom-left-radius: 40px; }
/* lit when the previous chapter is complete */
.adv-row.lit::before { border-color: var(--accent); }
.adv-row.lit-new .adv-node { animation: nodePop var(--ease-bounce); }
@keyframes nodePop { 0% { transform: scale(1); } 45% { transform: scale(1.06); } 100% { transform: scale(1); } }

/* chapter node: a mini chrome window */
.adv-node {
    position: relative; z-index: 1;
    width: min(66%, 220px);
    display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
    text-align: left;
    background: var(--card);
    border: var(--bw) solid var(--frame-ink);
    border-radius: var(--gw-radius);
    box-shadow: var(--chrome), var(--chrome-shadow);
    padding: 12px 14px;
    cursor: pointer;
    transition: transform var(--dur-fast);
}
.adv-node:active { transform: translateY(2px) scale(.98); }
.adv-num {
    font-family: var(--pixel-tight); font-weight: 700; font-size: var(--px-xs);
    letter-spacing: .05em; text-transform: uppercase;
    color: #fff; background: var(--node-col, var(--accent));
    border: var(--bw) solid var(--frame-ink);
    border-radius: 6px; padding: 2px 8px;
    text-shadow: 0 1px 0 rgba(0,0,0,.18);
}
.adv-node .adv-title {
    font-family: var(--serif); font-weight: 500; font-size: var(--text-lg);
    line-height: 1.1; color: var(--ink);
    padding-right: 48px;     /* clear the floating portrait */
}
.adv-node .adv-portrait { position: absolute; top: 6px; right: 8px; }
.adv-node .adv-game {
    display: inline-flex; align-items: center; gap: 5px;
    font-family: var(--pixel); font-weight: 600; font-size: var(--px-sm);
    color: var(--accent-deep);
}
.adv-node .adv-game svg { width: 14px; height: 14px; flex: none; }
.adv-node .adv-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* finale node: gold, centered, a little grander */
.adv-node--fin {
    width: min(82%, 250px);
    align-items: center; text-align: center;
    background: linear-gradient(var(--card), var(--card-warm));
    border-color: var(--accent-deep);
}
.adv-node--fin .adv-num { background: var(--gold); color: var(--ink); text-shadow: none; }
.adv-node--fin .adv-title { padding-right: 0; }
.adv-node--fin .adv-portrait { position: static; display: flex; gap: 6px; }
.adv-node--fin .adv-meta { justify-content: center; }

/* fun-fact sparkle on the connector */
.adv-fact {
    position: absolute; z-index: 1;
    bottom: -30px;
    width: 40px; height: 40px;
    display: grid; place-items: center;
    background: var(--card);
    border: var(--bw) solid color-mix(in srgb, var(--c-mint) 60%, var(--frame-strong));
    border-radius: 50%;
    box-shadow: var(--chrome-shadow);
    color: var(--gold);
    cursor: pointer;
}
.adv-fact svg { width: 20px; height: 20px; }
.adv-fact:not(.got) { animation: factPulse 1.8s ease-in-out infinite; }
.adv-fact.got { opacity: .8; }
.adv-row--l .adv-fact { right: 14%; }
.adv-row--r .adv-fact { left: 14%; }
.adv-row--fin .adv-fact { bottom: auto; top: -14px; right: 6%; }
@keyframes factPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.12); } }

.adv-note {
    text-align: center;
    font-size: var(--text-xs); color: var(--ink-mute);
    margin: 4px 8px var(--space-sm);
}

/* ======================= CENTERED POP MODAL =======================
   Story moments, facts, results, the quiz and the scoreboard open as
   a centered card over a blurred, dimmed page; the speaking mascot
   stands on the card's top edge. Only the arcade iframes still use
   the full-screen sheet below. */
.pop-overlay {
    position: fixed; inset: 0; z-index: 120;
    display: flex; align-items: center; justify-content: center;
    padding: 72px var(--page-pad) 24px;
    background: rgba(59,40,26,.38);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    animation: ovIn .2s ease both;
    transition: opacity .18s ease;
}
@supports not (backdrop-filter: blur(5px)) {
    .pop-overlay { background: rgba(59,40,26,.52); }
}
.pop-overlay.out { opacity: 0; pointer-events: none; }

.pop {
    position: relative;
    width: 100%; max-width: 400px;
    max-height: min(75vh, calc(100% - 8px));
    display: flex; flex-direction: column;
    background: var(--card);
    border: var(--bw) solid var(--frame-ink);
    border-radius: 22px;
    box-shadow: 0 18px 50px -18px rgba(80,50,30,.5);
    animation: popIn .24s ease both;
}
@keyframes popIn { from { opacity: 0; transform: translateY(10px); } }

/* the speaker stands on the card's top edge (feet overlap 8px) */
.pop-mascot {
    position: absolute; top: -56px; left: 50%; transform: translateX(-50%);
    display: flex; align-items: flex-end; gap: 6px;
    z-index: 2; pointer-events: none;
}
.pop-tag {
    position: absolute; top: -12px; left: 16px; z-index: 3;
    font-family: var(--pixel-tight); font-weight: 700; font-size: var(--px-xs);
    letter-spacing: .05em; text-transform: uppercase; line-height: 1.25;
    color: #fff; background: var(--pop-accent, var(--accent));
    border: var(--bw) solid var(--frame-ink);
    border-radius: 8px; padding: 3px 10px;
    box-shadow: 0 2px 5px -2px rgba(122,97,73,.3);
    white-space: nowrap;
}
.pop-tag[hidden] { display: none; }
.pop-close {
    position: absolute; top: 10px; right: 10px; z-index: 3;
    width: 28px; height: 28px; border-radius: 50%;
    border: var(--bw) solid var(--line);
    background: var(--paper-2); color: var(--ink-soft);
    font-size: 13px; cursor: pointer;
    display: grid; place-items: center;
}
.pop-body {
    flex: 1; min-height: 0;
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    padding: 26px 18px 14px;
}
.pop-body.swap { animation: bodySwap .18s var(--ease) both; }
.pop .av-tabs { padding-top: 20px; }
.pop-foot-slot { flex: none; }
.pop-foot {
    display: flex; align-items: center; gap: 10px;
    padding: 2px 18px 12px;
}
.pop-dots { display: inline-flex; gap: 5px; margin-right: auto; }
.pop-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--line); }
.pop-dots i.on { background: var(--accent); }
.pop-hint { font-size: var(--text-xs); color: var(--ink-mute); }
.pop-count { margin-left: auto; font-family: var(--pixel); font-weight: 700; font-size: var(--px-sm); color: var(--accent-deep); white-space: nowrap; }

/* ======================= GAME OVERLAY (full-screen sheet) ======= */
.game-overlay {
    position: fixed; inset: 0; z-index: 120;
    display: flex; justify-content: center;
    background: rgba(34,24,18,.5);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    animation: ovIn .25s ease both;
}
@keyframes ovIn { from { opacity: 0; } to { opacity: 1; } }
.game-panel {
    position: relative;
    width: 100%; max-width: var(--content-max); height: 100%;
    background: var(--card);
    display: flex; flex-direction: column;
    box-shadow: 0 0 60px -8px rgba(0,0,0,.45);
    overflow: hidden;
    animation: panelIn .3s var(--ease) both;
}
@keyframes panelIn { from { opacity:0; transform: translateY(26px);} to {opacity:1; transform:none;} }
/* gentle content-only cross-fade when stepping through a sheet */
@keyframes bodySwap { from { opacity:0; transform: translateY(6px);} to { opacity:1; transform:none;} }
.game-panel .gp-body.swap { animation: bodySwap .18s var(--ease) both; }
@media (prefers-reduced-motion: reduce) { .game-panel .gp-body.swap { animation: none; } }
.game-panel .gp-bar {
    flex: none;
    display: flex; align-items: center; gap: 8px;
    padding: calc(12px + env(safe-area-inset-top, 0)) var(--space-md) 12px;
    background: linear-gradient(var(--card-2), var(--card-warm));
    border-bottom: var(--bw) solid var(--frame-ink);
}
.game-panel .gp-bar .gp-title { font-family: var(--pixel); font-weight: 700; font-size: var(--px-md); color: var(--accent-deep); white-space: nowrap; }
.game-panel .gp-bar .gp-score { margin-left: auto; font-family: var(--pixel); font-weight: 600; font-size: var(--px-sm); color: var(--ink-soft); white-space: nowrap; }
.game-panel .gp-close {
    width: 30px; height: 30px; border-radius: 50%; border: var(--bw) solid var(--frame-ink);
    background: var(--card); color: var(--ink-soft); font-size: 15px; cursor: pointer; display: grid; place-items: center;
}
.game-panel .gp-body {
    flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch;
    padding: var(--space-lg) var(--space-md) calc(var(--space-lg) + env(safe-area-inset-bottom, 0));
}
/* embedded arcade game: iframe fills the panel below the slim bar */
.game-panel.embed .gp-body { padding: 0; overflow: hidden; }
.game-frame { display: block; width: 100%; height: 100%; border: 0; background: var(--arcade-ink); }

/* ======================= CHAPTER SHEET ======================= */
.ch-head { text-align: center; margin-bottom: 12px; }
.ch-head .adv-num { display: inline-block; }
.ch-title { font-family: var(--serif); font-weight: 500; font-size: var(--text-xl); margin-top: 6px; }
.ch-skip { margin-top: 10px; }
.ch-meta { display: flex; justify-content: center; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 12px; }

/* result interstitial */
.ch-result { text-align: center; }
.res-score { margin: 18px 0 4px; }
.res-big {
    display: block;
    font-family: var(--pixel); font-weight: 700; font-size: var(--text-3xl);
    color: var(--accent-deep); line-height: 1;
}
.res-lbl {
    font-family: var(--pixel-tight); font-weight: 700; font-size: var(--px-xs);
    letter-spacing: .08em; text-transform: uppercase; color: var(--ink-mute);
}
.res-chip { margin-top: 10px; }
.res-best { display: inline-flex; margin-top: 10px; }

/* ======================= FINALE SCENE ======================= */
.finale-scene {
    position: fixed; inset: 0; z-index: 130;
    display: flex; align-items: center; justify-content: center;
    background: rgba(59,40,26,.38);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    padding: var(--page-pad);
    animation: ovIn .25s ease both;
}
@supports not (backdrop-filter: blur(5px)) {
    .finale-scene { background: rgba(59,40,26,.52); }
}
.fin-card {
    position: relative; z-index: 2;
    width: 100%; max-width: 360px;
    text-align: center;
    background: var(--card);
    border: var(--bw) solid var(--frame-ink);
    border-radius: var(--gw-radius);
    box-shadow: var(--chrome), var(--chrome-shadow);
    padding: var(--space-lg) var(--space-md);
}
.fin-pair { display: flex; justify-content: center; align-items: flex-end; gap: 12px; margin: 12px 0 16px; }
.fin-btns { margin-top: 16px; }
.fin-conf { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 1; }
.fin-conf i {
    position: absolute; top: -12px;
    width: 8px; height: 8px; border-radius: 2px;
    animation: confFall 2.4s ease-in forwards;
}
@keyframes confFall { to { transform: translateY(105vh) rotate(720deg); opacity: 0; } }

/* ======================= COUPLE QUIZ ======================= */
.quiz-q { font-family: var(--serif); font-weight: 500; font-size: var(--text-xl); line-height: 1.25; text-align: center; margin-bottom: 4px; }
.quiz-count { text-align: center; font-family: var(--pixel-tight); font-weight: 700; font-size: var(--px-xs); letter-spacing: .05em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: var(--space-md); }
.quiz-opts { display: flex; flex-direction: column; gap: 10px; }
.quiz-opt {
    display: flex; align-items: center; gap: 12px;
    background: var(--card-2); border: var(--bw) solid var(--frame-ink);
    border-radius: var(--radius-sm); padding: 12px 16px; cursor: pointer;
    font-family: var(--sans); font-size: var(--text-base); color: var(--ink);
    transition: transform var(--ease), border-color var(--ease), background var(--ease);
    text-align: left;
}
.quiz-opt:active { transform: scale(.98); }
.quiz-opt .key { width: 24px; height: 24px; flex: none; border-radius: 8px; display: grid; place-items: center;
    font-family: var(--pixel); font-weight: 700; font-size: var(--px-sm); background: var(--card); border: var(--bw) solid var(--frame-strong); color: var(--accent-deep); }
.quiz-opt.correct { border-color: var(--leaf); background: color-mix(in srgb, var(--leaf) 16%, var(--card)); }
.quiz-opt.correct .key { background: var(--leaf); color: #fff; border-color: var(--leaf); }
.quiz-opt.wrong { border-color: var(--rose); background: color-mix(in srgb, var(--rose) 14%, var(--card)); }

/* ======================= SCOREBOARD ======================= */
.lb-filter { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; margin-bottom: var(--space-md); }
.lb-chip {
    font-family: var(--pixel); font-weight: 600; font-size: var(--px-sm);
    color: var(--ink-soft); background: var(--card-2);
    border: var(--bw) solid var(--frame-ink); border-radius: var(--radius-pill);
    padding: 5px 11px; cursor: pointer;
    transition: background var(--dur-fast), color var(--dur-fast);
}
.lb-chip.on { color: #fff; background: linear-gradient(var(--accent), var(--accent-deep)); border-color: var(--accent-deep); }

.board { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.board-row {
    display: flex; align-items: center; gap: 10px;
    background: var(--card-2); border: var(--bw) solid var(--frame-ink);
    border-radius: var(--radius-sm); padding: 8px 12px;
}
.board-row.you { background: color-mix(in srgb, var(--accent) 14%, var(--card)); border-color: var(--accent-deep); }
.board-row .rank {
    width: 24px; height: 24px; flex: none; display: grid; place-items: center;
    font-family: var(--pixel); font-weight: 700; font-size: var(--px-sm); color: var(--ink-soft);
    background: var(--card); border-radius: 8px; border: var(--bw) solid var(--frame-ink);
}
.board-row .rank.top { color: #fff; border: none; }
.board-row .rank.r1 { background: linear-gradient(var(--medal-1a), var(--medal-1b)); }
.board-row .rank.r2 { background: linear-gradient(var(--medal-2a), var(--medal-2b)); }
.board-row .rank.r3 { background: linear-gradient(var(--medal-3a), var(--medal-3b)); }
.board-row .bn { font-family: var(--serif); font-weight: 500; font-size: var(--text-lg); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board-row .bn .me { font-family: var(--pixel-tight); font-weight: 700; font-size: var(--px-xs); letter-spacing: .05em; text-transform: uppercase; color: #fff; background: var(--accent); border-radius: 5px; padding: 2px 7px; vertical-align: middle; }
.board-row .bsc { font-family: var(--pixel); font-weight: 700; font-size: var(--px-lg); color: var(--accent-deep); font-variant-numeric: tabular-nums; }

/* ======================= AVATAR EDITOR ======================= */
/* (reuses .game-overlay / .game-panel) */
.av-tabs { display: flex; gap: 6px; padding: 12px var(--space-md) 0; }
.av-tabs button {
    flex: 1; font-family: var(--pixel); font-weight: 600; font-size: var(--px-sm); color: var(--ink-soft);
    background: var(--card-2); border: var(--bw) solid var(--frame-ink); border-radius: var(--radius-pill);
    padding: 8px; cursor: pointer; transition: background .2s, color .2s;
}
.av-tabs button.on { background: linear-gradient(var(--accent), var(--accent-deep)); color: #fff; border-color: var(--accent-deep); }
.char-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 8px; }
.char-cell {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    background: var(--card-2); border: var(--bw) solid var(--frame-ink); border-radius: var(--radius-sm);
    padding: 10px 4px 8px; cursor: pointer; transition: transform var(--ease), border-color var(--ease);
}
.char-cell:active { transform: scale(.95); }
.char-cell.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 13%, var(--card)); }
.char-cell .char-name { font-family: var(--pixel); font-weight: 600; font-size: var(--px-sm); letter-spacing: .03em; color: var(--ink-soft); text-align: center; line-height: 1.25; }
.photo-up {
    height: 168px; border: var(--bw) dashed var(--frame-strong); border-radius: var(--radius-sm);
    background: var(--card-2); display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 8px; cursor: pointer; overflow: hidden;
}
.photo-up img { width: 100%; height: 100%; object-fit: cover; }
.photo-up .pu-ico { width: 36px; height: 36px; color: var(--accent-deep); }
.photo-up .pu-t { font-family: var(--pixel); font-size: var(--px-sm); color: var(--ink-soft); }

/* ======================= REDUCED MOTION ======================= */
@media (prefers-reduced-motion: reduce) {
    .adv-board .adv-cloud, .adv-fact:not(.got), .adv-row.lit-new .adv-node { animation: none; }
    .fin-conf i { animation: none; top: auto; bottom: 24%; opacity: .5; }
    .pop-overlay, .pop, .pop-body.swap { animation: none; transition: none; }
}