/* USA States Adventure — bright, warm, kid-friendly (Grades 3–5). */
:root {
  --ink: #2b2a4c; --gold: #ffcf4d; --gold-d: #e0a12a; --sky1: #3b5bdb; --sky2: #9b59b6;
  --ok: #2e9e5b; --no: #e5484d; --paper: #fffaf0; --font: "Baloo 2", "Trebuchet MS", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: #1e1a4d; color: var(--ink); font-family: var(--font); }
button, input { font-family: inherit; }
.scr { position: relative; min-height: 100vh; min-height: 100dvh; padding: 56px 16px 28px; overflow-x: hidden;
  background: linear-gradient(180deg, #4b6cd9 0%, #8e6fd8 55%, #f7b267 100%); color: #fff; }
.scr-body { max-width: 1100px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.topbar { position: fixed; top: 8px; right: 10px; display: flex; gap: 8px; z-index: 70; } /* above pop-ups too, so Home is always there */
.tb { border: 2px solid #ffffffaa; background: #1e1a4dcc; color: #fff; border-radius: 999px; padding: 6px 14px; font-weight: 800; cursor: pointer; }
h1, h2 { margin: 0; }
.h1, .logo { font-size: clamp(1.8rem, 5vw, 3rem); font-weight: 800; color: #fff; text-shadow: 0 3px 0 #2a1d6b, 0 6px 14px #0006; }
.logo { font-size: clamp(2.2rem, 7vw, 4.2rem); color: var(--gold); }
.sub, .tag { margin: 0; font-size: clamp(1rem, 2.4vw, 1.25rem); font-weight: 700; text-shadow: 0 2px 6px #0007; }
.tag b { color: #ffd34d; font-size: 1.12em; }
.btns { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.btns.low { margin-top: 6px; }
.big, .ghost, .warn { border-radius: 999px; padding: 12px 26px; font-size: 1.15rem; font-weight: 800; cursor: pointer; border: 3px solid #fff; transition: transform .15s; }
.big { background: linear-gradient(180deg, #ffe27a, var(--gold-d)); color: #3b2300; box-shadow: 0 5px 0 #b77b14, 0 8px 18px #0005; }
.big:disabled { filter: grayscale(1); opacity: .55; cursor: not-allowed; }
.big:not(:disabled):hover, .ghost:hover { transform: translateY(-2px); }
.ghost { background: #ffffff22; color: #fff; }
.warn { background: var(--no); color: #fff; }
.art { display: block; }
[data-say] { cursor: pointer; }
.saying { animation: glow .9s; }
@keyframes glow { 50% { filter: drop-shadow(0 0 10px #fff6a8); } }

/* title */
.title-art { display: flex; align-items: flex-end; gap: 6px; }
.title-art .art-explorer { width: 130px; } .title-art .art-dog { width: 110px; }

/* choose explorer */
.pick-row { display: flex; gap: clamp(20px, 6vw, 70px); }
.pick { background: #ffffff1a; border: 3px solid transparent; border-radius: 24px; padding: 14px 24px; cursor: pointer; transition: transform .2s, box-shadow .2s; }
.pick .art { width: clamp(110px, 18vw, 160px); }
.pick.on { transform: scale(1.05); box-shadow: 0 0 0 4px var(--gold), 0 0 30px var(--gold); }
.pick-dog .art { width: 120px; animation: hop 1.2s ease-in-out infinite; }
@keyframes hop { 50% { transform: translateY(-8px); } }
.name-box { display: grid; gap: 6px; }
.name-box label { font-size: 1.3rem; font-weight: 800; }
.name-box input { font-size: 1.4rem; padding: 10px 16px; border-radius: 14px; border: 3px solid var(--gold); text-align: center; width: min(320px, 80vw); }

/* story */
.story .scr-body { max-width: 1200px; }
.sky { width: min(820px, 96vw); }
.sky-map .st { fill: #ffffff26; stroke: #ffffff88; stroke-width: 1; }
.star { font-size: 26px; fill: #ffe066; filter: drop-shadow(0 0 6px #ffd43b); transition: transform 1.4s, opacity 1.4s; }
.star.dim { fill: #ffffff55; filter: none; font-size: 20px; }
.scatter .sky-map .star { animation: scatter 1.6s forwards; }
@keyframes scatter { to { transform: translate(var(--dx, 60px), 120px) rotate(200deg); opacity: .15; } }
.story-cast { display: flex; align-items: flex-end; gap: 4px; margin-top: -60px; align-self: flex-start; margin-left: 4%; }
.story-cast .art-explorer { width: 100px; } .story-cast .art-dog { width: 80px; }
.story-panel { background: #1e1a4dcc; border: 2px solid #ffd76a88; border-radius: 22px; padding: 14px 18px; width: min(820px, 96vw); }
.story-text { font-size: clamp(1.1rem, 2.6vw, 1.5rem); font-weight: 700; margin: 0 0 8px; line-height: 1.35; }
.dots { display: flex; gap: 8px; justify-content: center; margin-bottom: 10px; }
.dots span { width: 10px; height: 10px; border-radius: 50%; background: #ffffff55; } .dots span.on { background: var(--gold); }

/* magic map hub */
.hub-head { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: center; }
.stars-count { background: #1e1a4dcc; border-radius: 999px; padding: 6px 16px; font-weight: 800; color: var(--gold); }
.hub-grid { display: grid; grid-template-columns: 200px 1fr; gap: 16px; width: 100%; align-items: start; }
.menu { display: grid; gap: 10px; }
.menu button { background: #1e1a4dcc; color: #fff; border: 2px solid #ffffff55; border-radius: 16px; padding: 12px; font-weight: 800; font-size: 1rem; cursor: pointer; text-align: left; }
.menu button:hover { border-color: var(--gold); }
.hub-map { background: #1e1a4d66; border-radius: 24px; padding: 10px; }
.usa { width: 100%; height: auto; display: block; }
.usa .st { fill: #c9d3ec; stroke: #fff; stroke-width: 1.2; }
.hub-map .st.locked { fill: #8c94b8; }
.hub-map .st.open { fill: #ffd43b; cursor: pointer; animation: pulse 1.4s ease-in-out infinite; }
.hub-map .st.pick { fill: #ffe58a; cursor: pointer; }
.hub-map .st.pick:hover { fill: #ffd43b; }
.hub-map .st.locked { cursor: pointer; }
.hub-map .st.done, .sr-map .st.done { fill: #ffe066; }
.hub-map .star { cursor: pointer; pointer-events: none; }
@keyframes pulse { 50% { fill: #fff3a3; } }
.hint { margin: 6px 0 0; font-weight: 700; }

/* welcome */
.welcome-top .wt { margin: 0; font-size: 1.4rem; font-weight: 800; letter-spacing: .1em; }
.state-big { font-size: clamp(2.6rem, 9vw, 5rem); color: var(--gold); text-shadow: 0 4px 0 #8a4b00, 0 8px 18px #0006; line-height: 1; }
.abbr { margin: 4px 0 0; font-size: 1.6rem; font-weight: 800; }
.welcome-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; width: 100%; align-items: end; }
.loc-card { background: #fffffff0; color: var(--ink); border-radius: 22px; padding: 12px; }
.loc-card p { margin: 6px 0 0; font-weight: 700; }
.loc-map .st { fill: #dfe4f2; } .loc-map .st.hi { fill: #ffcf4d; stroke: #b5651d; stroke-width: 2; }
.welcome-cast { display: flex; align-items: flex-end; justify-content: center; gap: 4px; }
.welcome-cast .art-explorer { width: 120px; } .welcome-cast .art-dog { width: 95px; }

/* route */
.route-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 300px); gap: 18px; width: 100%; align-items: center; }
.route-map { width: 100%; max-height: 70vh; background: #ffffff22; border-radius: 24px; }
.route-state { fill: #ffe9a8; stroke: #b5651d; stroke-width: 3; }
.route-trail { fill: none; stroke: #8a4b00; stroke-width: 4; stroke-dasharray: 10 8; }
.stop circle { fill: #fff; stroke: #8a4b00; stroke-width: 4; }
.stop.done circle { fill: var(--ok); } .stop.next circle { fill: var(--gold); animation: blink 1s infinite; }
.stop text { font-size: 18px; font-weight: 800; fill: #2b2a4c; paint-order: stroke; stroke: #fff; stroke-width: 4px; }
@keyframes blink { 50% { r: 18; } }
.route-side { display: grid; gap: 12px; }
.next-stop { background: #fffffff0; color: var(--ink); border-radius: 18px; padding: 14px; margin: 0; font-size: 1.2rem; }
.next-stop small { font-size: .95rem; }

/* time of day backgrounds (placeholder for the 3 real-place backgrounds) */
.t-morning { background: linear-gradient(180deg, #74c0fc 0%, #a5d8ff 50%, #ffe8a3 100%); }
.t-afternoon { background: linear-gradient(180deg, #4dabf7 0%, #91d5ff 60%, #fff3bf 100%); }
.t-evening { background: linear-gradient(180deg, #5f3dc4 0%, #f76707 70%, #ffd43b 100%); }
.t-night { background: linear-gradient(180deg, #0b1440 0%, #24308a 60%, #3b5bdb 100%); }

/* knowledge cards */
.kcards { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; width: 100%; }
.kcard { background: #fffef5; color: var(--ink); border: 4px solid #ffffff; border-radius: 20px; padding: 16px 12px; display: grid; gap: 4px; justify-items: center; cursor: pointer; box-shadow: 0 6px 16px #0004; transform: rotateY(0); transition: transform .3s, border-color .3s; font-size: 1rem; }
.kcard:not(.read) { background: repeating-linear-gradient(45deg, #ffe08a, #ffe08a 12px, #ffd25e 12px, #ffd25e 24px); }
.kcard:not(.read) .kv, .kcard:not(.read) img { visibility: hidden; }
.kcard.read { border-color: var(--ok); }
.ki { font-size: 2.2rem; } .kl { font-weight: 800; color: #8a4b00; } .kv { font-weight: 800; font-size: 1.2rem; }
.kcard img { width: 90px; border: 1px solid #ccc; }
.kcards.small .kcard { background: #fffef5; } .kcards.small .kv, .kcards.small img { visibility: visible !important; }

/* battle */
.place-tag { background: #1e1a4dcc; padding: 4px 14px; border-radius: 999px; font-weight: 800; text-transform: capitalize; }
.arena { display: flex; align-items: flex-end; justify-content: space-between; width: 100%; min-height: 300px; }
.cast { display: flex; align-items: flex-end; gap: 4px; } .cast .art-explorer { width: 110px; } .cast .art-dog { width: 85px; }
.foe { display: grid; justify-items: center; gap: 8px; }
.art-monster { animation: bob 1.6s ease-in-out infinite; }
.foe .m-small { width: 150px; } .foe .m-medium { width: 210px; } .foe .m-boss { width: 300px; }
@keyframes bob { 50% { transform: translateY(-6px); } }
.bubble { background: #fff; color: var(--ink); border-radius: 18px; padding: 10px 16px; margin: 0; font-weight: 800; max-width: 420px; box-shadow: 0 4px 12px #0004; }
.bubble.big { font-size: 1.5rem; }
.hud { display: flex; justify-content: space-between; align-items: center; width: 100%; font-size: 1.4rem; font-weight: 800; background: #1e1a4dcc; border-radius: 18px; padding: 6px 16px; }
.round-dots { display: flex; gap: 8px; } .round-dots span { width: 14px; height: 14px; border-radius: 50%; background: #ffffff44; } .round-dots .on { background: var(--gold); } .round-dots .done { background: var(--ok); }
.battle-grid { display: grid; grid-template-columns: 170px 1fr; gap: 14px; width: 100%; align-items: start; }
.mini-foe { display: grid; justify-items: center; background: #ffffff22; border-radius: 18px; padding: 8px; font-weight: 800; }
.mini-foe small { text-shadow: 0 1px 3px rgba(0,0,0,.85), 0 0 2px rgba(0,0,0,.6); }
.mini-foe .art { width: 140px; }
.game-box { background: #fffef8; color: var(--ink); border-radius: 22px; padding: 14px; box-shadow: 0 8px 22px #0005; }
.q { font-size: clamp(1.15rem, 2.6vw, 1.5rem); font-weight: 800; margin: 0 0 10px; }
.ghost.free { background: var(--ok); }
.shake .game-box { animation: shake .35s; }
@keyframes shake { 25% { transform: translateX(-8px); } 75% { transform: translateX(8px); } }

/* mini-game: drag map */
.drag-map .st { fill: #d7dcef; stroke: #fff; }
.piece-shape { fill: #ffcf4d; stroke: #b5651d; stroke-width: 3; filter: drop-shadow(0 4px 4px #0005); }
.piece { touch-action: none; } .piece.dragging .piece-shape { fill: #ffe27a; } .piece.snapped .piece-shape { fill: #8ce99a; stroke: var(--ok); }

/* mini-game: match */
.match { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.col { display: grid; gap: 10px; }
.mcard { min-height: 64px; border-radius: 16px; border: 3px solid #c9b8ff; background: #f3efff; color: var(--ink); font-weight: 800; font-size: 1.1rem; cursor: pointer; padding: 8px; }
.mcard img { height: 46px; display: block; margin: 0 auto; }
.mcard.left { background: #fff4d6; border-color: #ffcf4d; }
.mcard.sel { box-shadow: 0 0 0 4px var(--sky1); }
.mcard.ok { background: #d3f9d8; border-color: var(--ok); cursor: default; }
.mcard.no { background: #ffe3e3; border-color: var(--no); }

/* mini-game: true / false */
.tf-top { display: flex; justify-content: space-between; font-weight: 800; }
.combo { color: #e8590c; }
.tf-q { font-size: clamp(1.3rem, 3vw, 1.8rem); font-weight: 800; margin: 10px 0; }
.timer { height: 10px; background: #eee; border-radius: 6px; overflow: hidden; margin-bottom: 12px; }
.timer span { display: block; height: 100%; background: linear-gradient(90deg, var(--no), var(--gold)); }
.tf-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tf-b { font-size: 1.4rem; font-weight: 800; border-radius: 18px; padding: 16px; border: 0; color: #fff; cursor: pointer; }
.tf-b.yes { background: var(--ok); } .tf-b.no { background: var(--no); }

/* mini-game: typing */
.typer { display: grid; gap: 10px; justify-items: center; }
.typer .hint { margin: 0; font-weight: 700; color: #8a4b00; }
.type-in { font-size: 1.8rem; padding: 10px 16px; border-radius: 14px; border: 3px solid var(--sky1); text-align: center; width: min(420px, 90%); }
.type-in.ok { border-color: var(--ok); background: #d3f9d8; } .type-in.no { border-color: var(--no); background: #ffe3e3; }

/* hit close-up */
.hit .scr-body { justify-content: center; min-height: 70vh; }
.closeup .art-monster { width: min(70vw, 420px); animation: hitwobble .6s; }
@keyframes hitwobble { 30% { transform: scale(.9) rotate(-6deg); } 60% { transform: scale(1.05) rotate(4deg); } }
.hp-flash { font-size: 2.6rem; }
.hp-flash.flash { animation: flash .5s 3; }
@keyframes flash { 50% { opacity: .2; } }

/* star returns */
.star-return { background: linear-gradient(180deg, #1b1f5e, #4b3bb5); }
.sr-map { width: min(900px, 96vw); }
.sr-map .st { fill: #ffffff22; stroke: #ffffff66; }
.sr-map .st.glow { fill: #ffe066; filter: drop-shadow(0 0 12px #ffd43b); }
.flying-star { font-size: 70px; fill: #f76707; stroke: #fff; stroke-width: 3px; paint-order: stroke; filter: drop-shadow(0 0 14px #ffd43b); }
.restored { font-size: clamp(1.8rem, 5vw, 3rem); color: var(--gold); display: grid; }
.restored small { font-size: 1.2rem; color: #fff; }

/* state cards (2.5 × 3.5 in, landscape) */
.card-pair { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; }
.scard { width: 350px; height: 250px; background: #fff; color: var(--ink); border-radius: 14px; border: 3px solid #2b2a4c; padding: 10px; display: flex; flex-direction: column; box-shadow: 0 6px 16px #0005; text-align: center; }
.sc-name { font-size: 1.5rem; font-weight: 800; }
.sc-mid { flex: 1; display: grid; grid-template-columns: 90px 1fr; gap: 6px; align-items: center; min-height: 0; }
.sc-hero .art { width: 80px; margin: 0 auto; }
.card-map .st { fill: #e9ecef; stroke: #8a8f98; stroke-width: 1; }
.card-map .st.target { fill: #fff3a8; stroke: #2b2a4c; stroke-width: 2.6; }
.card-map .st-label { font-size: 44px; font-weight: 800; fill: #000; }
.sc-foot { font-weight: 800; font-size: .95rem; }
.scard.back { justify-content: flex-start; }
.sc-flag { height: 52px; margin: 0 auto 6px; border: 1px solid #ccc; }
.scard dl { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; margin: 0; text-align: left; font-size: .92rem; }
.scard dt { font-weight: 800; color: #8a4b00; } .scard dd { margin: 0; font-weight: 700; }
.item-drop { background: #fffef5; color: var(--ink); border-radius: 18px; padding: 10px 18px; font-size: 1.2rem; font-weight: 700; }
.item-drop span { font-size: 2rem; vertical-align: middle; }

/* my cards */
.card-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; width: 100%; }
.cg { aspect-ratio: 1; border-radius: 14px; overflow: hidden; display: grid; place-items: center; }
.cg.on { position: relative; border: 3px solid var(--gold); background: #fff; padding: 0; cursor: pointer; }
.cg.on .scard { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(.4); box-shadow: none; border-width: 2px; }
.cg.off { border: 3px dashed #ffffff88; color: #fff; font-weight: 700; font-size: .85rem; padding: 4px; }

/* my player */
.mp { display: flex; align-items: flex-end; gap: 6px; } .mp .art-explorer { width: 140px; } .mp .art-dog { width: 100px; }
.items { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.item { border-radius: 14px; border: 3px solid #fff; background: #ffffff22; color: #fff; font-weight: 800; padding: 10px 16px; cursor: pointer; font-size: 1.05rem; }
.item.on { background: var(--gold); color: #3b2300; }

/* overlays, toasts */
.ovl { position: fixed; inset: 0; background: #0009; display: grid; place-items: center; z-index: 60; padding: 16px; }
.ovl-card { background: #fffef8; color: var(--ink); border-radius: 24px; padding: 20px; width: min(560px, 100%); max-height: 90vh; overflow: auto; text-align: center; display: grid; gap: 12px; }
.ovl.bag .ovl-card { width: min(820px, 100%); }
.ovl-card .ghost { color: var(--ink); border-color: var(--ink); }
.howto { text-align: left; font-size: 1.15rem; font-weight: 700; line-height: 1.7; margin: 0; padding-left: 8px; list-style: none; }
.tired-art .art { width: 120px; margin: 0 auto; }
.toast { position: fixed; left: 50%; top: 70px; transform: translateX(-50%); background: #2b2a4c; color: #fff; padding: 10px 20px; border-radius: 999px; font-weight: 800; z-index: 70; animation: pop .25s; }
.toast.bad { background: var(--no); } .toast.good { background: var(--ok); }
@keyframes pop { from { transform: translateX(-50%) scale(.7); } }

/* phones and small tablets */
@media (max-width: 720px) {
  .hub-grid, .welcome-grid, .route-grid, .battle-grid { grid-template-columns: 1fr; }
  .menu { grid-template-columns: 1fr 1fr; }
  .mini-foe { grid-auto-flow: column; justify-content: center; align-items: center; } .mini-foe .art { width: 80px; }
  .card-grid { grid-template-columns: repeat(3, 1fr); }
  .foe .m-boss { width: 200px; } .foe .m-medium { width: 160px; }
  .arena { min-height: 220px; } .cast .art-explorer { width: 80px; } .cast .art-dog { width: 60px; }
  .scard { transform-origin: top center; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* printing: cards at real size, front and back side by side */
#print-area { display: none; }
@media print {
  @page { size: A4; margin: 12mm; }
  body { background: #fff; }
  #app, .topbar, .ovl, .toast { display: none !important; }
  #print-area { display: block; }
  .print-pair { display: flex; gap: 6mm; margin-bottom: 8mm; break-inside: avoid; }
  .print-pair .scard { width: 3.5in; height: 2.5in; box-shadow: none; border: 1px solid #000; border-radius: 0; }
}

/* speaker on knowledge cards */
.kcard { position: relative; }
.kspk { position: absolute; top: 6px; right: 8px; font-size: 1.3rem; background: #fff; border: 2px solid #ffcf4d; border-radius: 50%; width: 38px; height: 38px; display: grid; place-items: center; box-shadow: 0 2px 6px #0003; }
.kspk.saying { background: #fff3a8; }

/* mini tasks */
.task-ovl .ovl-card { width: min(620px, 100%); }
.task-q { font-weight: 800; font-size: 1.15rem; margin: 0 0 8px; }
.field { position: relative; height: 260px; background: linear-gradient(#bfe6ff, #e9f7ff); border-radius: 18px; overflow: hidden; }
.snack { position: absolute; top: -50px; font-size: 2.4rem; background: none; border: 0; cursor: pointer; animation: fall linear forwards; padding: 4px; }
@keyframes fall { to { transform: translateY(330px); } }
/* the game clock is stopped: falling foods freeze too */
.halt-task .ovl .snack, .halt-app #app .snack { animation-play-state: paused; }
.flip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.fc { aspect-ratio: 1; border-radius: 16px; border: 3px solid #c9b8ff; background: #7b61ff; font-size: 2.6rem; cursor: pointer; }
.fc span { visibility: hidden; } .fc.up { background: #fff; } .fc.up span { visibility: visible; } .fc.got { border-color: var(--ok); background: #d3f9d8; }
.sand { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.dig { aspect-ratio: 1; font-size: 2rem; border-radius: 14px; border: 2px solid #c9a46a; background: #f1d9a8; cursor: pointer; }
.dig.got { background: #fff3a8; border-color: var(--ok); }
.ghost.free { background: var(--ok); border-color: #fff; }

/* story: all parts on one page; the part being read is highlighted */
.story-panel .story-text { margin: 0 0 8px; opacity: .55; transition: opacity .4s; }
.story-panel .story-text.now { opacity: 1; color: #ffe07a; }
.story-panel .story-text:last-of-type { margin-bottom: 12px; }
.story .sky { width: min(620px, 92vw); }
.story .sky svg { max-height: 36vh; }
.story .story-cast { margin-top: -50px; }
.story .story-cast .art-explorer { width: 78px; } .story .story-cast .art-dog { width: 64px; }
.story .story-text { font-size: clamp(1rem, 2vw, 1.22rem); line-height: 1.3; }
.story .story-panel { padding: 12px 16px; }

/* where is the capital? */
.cap-map { width: min(420px, 100%); height: auto; margin: 0 auto; display: block; }
.cap-pt { cursor: pointer; }
.cap-pt .cap-hit { fill: #ffffff00; }
.cap-pt text { font-size: 34px; fill: #f08c00; paint-order: stroke; stroke: #fff; stroke-width: 4px; }
.cap-pt:hover text { fill: #ffa94d; }
.cap-pt.ok text { fill: var(--ok); } .cap-pt.no text { fill: #adb5bd; }
/* which picture? */
.photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.photo { border: 4px solid #e9ecef; border-radius: 16px; padding: 0; overflow: hidden; cursor: pointer; background: #fff; }
.photo .scene { width: 100%; height: auto; display: block; }
.photo img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.photos { max-width: 520px; margin: 0 auto; }
.photo.ok { border-color: var(--ok); box-shadow: 0 0 0 4px #b2f2bb; } .photo.no { border-color: var(--no); opacity: .5; }
/* gold panning */
.gold-count { font-weight: 800; font-size: 1.2rem; margin: 0 0 6px; }
.river { position: relative; height: 240px; border-radius: 18px; background: url('assets/river.svg') center / 100% 100% no-repeat; overflow: hidden; border: 3px solid #fff; }
/* flowing water: soft light streaks drift across the river */
.river::before { content: ''; position: absolute; inset: 14% 0; background: repeating-linear-gradient(100deg, transparent 0 60px, rgba(255,255,255,.18) 60px 70px, transparent 70px 140px); animation: flow 3s linear infinite; pointer-events: none; }
@keyframes flow { from { background-position: 0 0; } to { background-position: 140px 0; } }
.river .nugget { z-index: 1; }
.nugget.rock { box-shadow: inset -4px -4px 0 rgba(0,0,0,.15); }
.nugget { position: absolute; font-size: 2.4rem; background: none; border: 0; cursor: pointer; animation: popin .2s; padding: 4px; }
.nugget.gold { filter: drop-shadow(0 0 8px #ffd43b); }
@keyframes popin { from { transform: scale(.3); } }
@media (max-width: 720px) { .photos { grid-template-columns: 1fr 1fr 1fr; gap: 6px; } }
.nugget { width: 46px; height: 36px; }
.nugget.gold { width: 80px; height: 60px; margin: -12px 0 0 -17px; background: url('assets/gold-bar.png') center / contain no-repeat; filter: none; }
.nugget.rock { background: radial-gradient(circle at 35% 30%, #ced4da, #868e96 60%, #495057); border-radius: 52% 48% 56% 44% / 45% 55% 45% 55%; }
/* real art: the golden retriever stands about chest-high to the explorer */
.title-art .art-dog { width: 90px; } .story-cast .art-dog { width: 68px; } .welcome-cast .art-dog { width: 82px; }
.cast .art-dog { width: 75px; } .mp .art-dog { width: 95px; } .story .story-cast .art-dog { width: 53px; }
.pick-dog .art-dog { width: 90px; }
.tired-art .art-dog { width: 110px; }
@media (max-width: 600px) { .cast .art-dog { width: 55px; } }
/* approved backgrounds (USA States Quest image catalog #044 night kingdom, #038 story sky, #043 day kingdom) */
.scr.title, .scr.select, .scr.my-player { background: #1e1a4d url('assets/bg/kingdom-night.webp') center / cover no-repeat; }
.scr.story { background: #0e1238 url('assets/bg/story-sky.webp') center / cover no-repeat; }
.scr.hub { background: #4b3fa8 url('assets/bg/magic-map.webp') center bottom / cover no-repeat; } /* picture A (Magic Map); every trail uses picture B. The map panel sits on dark glass so it stays easy to read */
.scr.hub .hub-map { background: rgba(30, 26, 77, .82); box-shadow: 0 10px 30px rgba(0,0,0,.35); border: 3px solid #ffffff99; }
.scr.title h1, .scr.select h1, .scr.hub h1, .scr.my-cards h1 { text-shadow: 0 3px 0 #1e1a4d, 0 0 18px rgba(0,0,0,.55); }
.scr.title p, .scr.select p, .scr.hub p, .scr.my-cards p { text-shadow: 0 2px 6px rgba(0,0,0,.7); }
.pick { background: rgba(20, 22, 60, .55); backdrop-filter: blur(3px); }
/* characters stand on the ground: a soft grassy patch and a shadow under their feet */
.title-art, .story-cast, .welcome-cast, .cast, .mp, .pick-dog { position: relative; align-items: flex-end; padding-bottom: 6px; }
.title-art::before, .story-cast::before, .welcome-cast::before, .cast::before, .mp::before {
  content: ''; position: absolute; left: -14%; right: -14%; bottom: -6px; height: 34px; z-index: 0; border-radius: 50%;
  background: radial-gradient(ellipse at 50% 40%, #8fd16a 0%, #5fa84a 55%, rgba(60, 120, 50, 0) 72%); }
.title-art > *, .story-cast > *, .welcome-cast > *, .cast > *, .mp > * { position: relative; z-index: 1; }
.art-explorer, .art-dog { filter: drop-shadow(0 6px 3px rgba(0, 0, 0, .35)); overflow: visible; }
.pick .art-explorer { filter: drop-shadow(0 4px 2px rgba(0, 0, 0, .35)); }

/* story: explorer + dog stand on the stone path at the bottom-left (wide screens) */
@media (min-width: 1000px) {
  .story .story-cast { position: absolute; left: 2.5%; bottom: 26px; margin: 0; z-index: 2; }
  .story .story-cast .art-explorer { width: 110px; } .story .story-cast .art-dog { width: 76px; }
}
/* food snack games (photos from the state cards) */
.pick-strip { display: flex; gap: 10px; justify-content: center; margin: 4px 0 8px; }
.pick-strip span { display: flex; flex-direction: column; align-items: center; font-size: .78rem; font-weight: 800; color: #2b2a4c; }
.pick-strip img { width: 64px; height: 56px; object-fit: cover; border-radius: 10px; border: 3px solid var(--gold); }
.snack.food { width: 84px; height: 74px; padding: 0; border-radius: 14px; overflow: hidden; border: 3px solid #fff; box-shadow: 0 4px 10px rgba(0,0,0,.3); background: #fff; font-size: 0; }
.snack.food img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.snack.food.nope { opacity: .35; border-color: #e53935; }
.food-field { min-height: 230px; }
.food-flip { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 10px; }
.food-flip .fc { aspect-ratio: 1 / 1; min-height: 0; height: auto; padding: 0; overflow: hidden; }
.food-flip .fc span { display: flex; flex-direction: column; width: 100%; height: 100%; }
.food-flip .fc img { width: 100%; flex: 1; min-height: 0; object-fit: cover; display: block; }
.food-flip .fc small { font-size: .72rem; font-weight: 800; color: #2b2a4c; padding: 3px 2px; background: #fff; line-height: 1.1; }
.lunch { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 6px; }
.lunch-pick { display: flex; flex-direction: column; padding: 0; overflow: hidden; border-radius: 16px; border: 4px solid #fff; background: #fff; cursor: pointer; box-shadow: 0 4px 10px rgba(0,0,0,.2); transition: transform .12s; }
.lunch-pick:hover { transform: translateY(-3px); }
.lunch-pick img { width: 100%; aspect-ratio: 8 / 7; object-fit: cover; display: block; }
.lunch-pick small { font-size: .82rem; font-weight: 800; color: #2b2a4c; padding: 6px 4px; line-height: 1.15; }
.lunch-pick.ok { border-color: var(--ok); } .lunch-pick.no { border-color: #e53935; opacity: .45; }
.snack.food { top: -90px; }
.task-ovl .ovl-card { width: min(600px, 94vw); max-width: none; }
.task-ovl .tired-art .art-dog { width: 70px; }
.task-ovl h2 { margin: 2px 0; } .task-ovl .ovl-card > p { margin: 2px 0 6px; font-size: .9rem; }
.food-flip .fc { position: relative; background: linear-gradient(135deg, #7b61ff, #a58bff); }
.food-flip .fc:not(.up)::before { content: '🐾'; position: absolute; inset: 0; display: grid; place-items: center; font-size: 2.2rem; }
.food-flip .fc.up, .food-flip .fc.got { background: #fff; }
.snack.food { width: 104px; height: 90px; } .snack.food { top: -100px; }
/* trail map on real terrain */
.route-map { background: radial-gradient(ellipse at 50% 50%, #9fd3ff 0%, #6fb6f0 70%, #5aa3e3 100%); border: 4px solid #ffffffaa; }
.route-state.relief { fill: none; stroke: #fff8e1; stroke-linejoin: round; filter: drop-shadow(0 0 3px rgba(0,0,0,.45)); }
.route-trail { stroke: #fff3b0; filter: drop-shadow(0 0 2px rgba(0,0,0,.6)); }
.stop .ring { fill: #fff; filter: drop-shadow(0 3px 4px rgba(0,0,0,.4)); }
.stop.next .ring { fill: var(--gold); animation: blink 1s infinite; }
.stop.done .ring { fill: var(--ok); } .stop.done svg { opacity: .75; }
.stop .tick { fill: var(--ok); stroke: #fff; stroke-width: 2; } .stop .tick-t { fill: #fff; font-weight: 900; stroke: none; }
.stop .lbl { fill: rgba(30, 26, 77, .82); }
.stop text { fill: #fff; font-weight: 800; stroke: none; paint-order: normal; }
/* title: explorer + dog stand on the lantern-lit dirt path at the bottom of the picture */
.scr.title { background-position: center bottom; }
.scr.title .title-art { position: absolute; left: 50%; bottom: 4vh; transform: translateX(-62%); z-index: 2; padding: 0; }
.scr.title .title-art::before { display: none; }
.scr.title .title-art .art-explorer { width: clamp(110px, 15vh, 170px); }
.scr.title .title-art .art-dog { width: clamp(80px, 11vh, 120px); }
.scr.title .btns { margin-top: 18vh; }
.scr.title .title-art { bottom: 2vh; }
.scr.title .title-art .art-explorer { width: clamp(150px, 26vh, 260px); }
.scr.title .title-art .art-dog { width: clamp(110px, 19vh, 185px); }
.scr.title .btns { margin-top: 10vh; }
/* trail map v2: red dots in the state, names in call-outs beside it */
.stop .dot { fill: #e53935; stroke: #fff; }
.stop.later .dot { fill: #e53935; opacity: .9; }
.stop.next .dot { fill: #e53935; }
.stop .pulse { fill: none; stroke: #fff; stroke-width: 3px; opacity: .9; animation: dot-pulse 1.2s ease-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes dot-pulse { from { transform: scale(.6); opacity: .95; } to { transform: scale(1.6); opacity: 0; } }
.stop.done .dot, .stop.arrive .dot { fill: #ffd23f; stroke: #fff; filter: drop-shadow(0 0 6px #ffe680) drop-shadow(0 0 12px #ffd23f); }
.stop.arrive .dot { animation: light-up 1.2s ease-out forwards; transform-box: fill-box; transform-origin: center; }
@keyframes light-up { 0% { transform: scale(1); } 50% { transform: scale(1.8); } 100% { transform: scale(1.25); } }
.stop .lead { stroke: #fff; opacity: .85; }
.stop .callout { fill: rgba(30, 26, 77, .85); stroke: #fff; }
.stop.next .callout { stroke: #ffd23f; }
.stop.done .callout, .stop.arrive .callout { fill: #fff6c9; stroke: #ffd23f; }
.stop .callout-edge { fill: none; stroke: #fff; }
.stop.next .callout-edge, .stop.done .callout-edge, .stop.arrive .callout-edge { stroke: #ffd23f; }
.stop.done text, .stop.arrive text { fill: #3b2a00; }
.stop text { fill: #fff; font-weight: 800; }
.route-cast { display: flex; align-items: flex-end; justify-content: center; gap: 4px; position: relative; padding-bottom: 6px; }
.route-cast::before { content: ''; position: absolute; left: 6%; right: 6%; bottom: -4px; height: 26px; border-radius: 50%; background: radial-gradient(ellipse at 50% 40%, #8fd16a 0%, #5fa84a 55%, rgba(60,120,50,0) 72%); }
.route-cast > * { position: relative; }
.route-cast .art-explorer { width: 92px; } .route-cast .art-dog { width: 64px; }
.route-cast.walking .art-explorer, .route-cast.walking .art-dog { animation: cast-hop .35s ease-in-out infinite alternate; }
@keyframes cast-hop { to { transform: translateY(-8px); } }
/* real scene pictures behind a stop (California art): words get a dark outline so they stay readable */
.scr.has-bg h1, .scr.has-bg .sub, .scr.has-bg .wt, .scr.has-bg .abbr, .scr.has-bg .state-big { text-shadow: 0 3px 0 #1e1a4d, 0 0 14px rgba(0,0,0,.75); }
.scr.has-bg .sub { background: rgba(20, 22, 60, .55); padding: 4px 14px; border-radius: 999px; }
.art-monster.real { animation: bob 1.6s ease-in-out infinite; filter: drop-shadow(0 8px 6px rgba(0,0,0,.35)); }
.art-monster.real.ko { transform: rotate(8deg); animation: none; }
/* A soft white halo for monsters whose colors match their background (m.glow). */
.art-monster.real.glow { filter: drop-shadow(0 0 3px #fff) drop-shadow(0 0 10px rgba(255,255,255,.8)) drop-shadow(0 8px 6px rgba(0,0,0,.35)); }
/* Light-colored monsters on light backgrounds: a soft dark halo instead. */
.art-monster.real.glow.dark { filter: drop-shadow(0 0 3px rgba(60,40,20,.85)) drop-shadow(0 0 10px rgba(60,40,20,.5)) drop-shadow(0 8px 6px rgba(0,0,0,.35)); }
.closeup .art-monster.real { width: auto; height: min(52vh, 420px); max-width: 80vw; }
.foe .art-monster.real.m-small { width: 190px; } .foe .art-monster.real.m-medium { width: 210px; } .foe .art-monster.real.m-boss { width: 270px; }
.mini-foe .art-monster.real { width: 130px; }
@media (max-width: 600px) { .foe .art-monster.real.m-boss { width: 190px; } .foe .art-monster.real.m-small { width: 150px; } .mini-foe .art-monster.real { width: 70px; } }
.scr.has-bg .ghost:not(.free) { background: rgba(30, 26, 77, .82); }
.scr.has-bg .cast::before, .scr.has-bg .welcome-cast::before { display: none; }
/* the explorer stands on the ledge at the bottom-left of the scene, the monster across from them */
.scr.has-bg .arena.intro { min-height: calc(100vh - 200px); min-height: calc(100dvh - 200px); align-items: flex-end; padding: 0 2%; }
.scr.has-bg .arena.intro .cast .art-explorer { width: 150px; } .scr.has-bg .arena.intro .cast .art-dog { width: 100px; }
@media (max-width: 600px) { .scr.has-bg .arena.intro { min-height: 52vh; } .scr.has-bg .arena.intro .cast .art-explorer { width: 100px; } .scr.has-bg .arena.intro .cast .art-dog { width: 66px; } }
@media (max-width: 600px) { .scr.has-bg { background-position: 12% center !important; } .scr.has-bg .arena.intro { min-height: 66vh; } .scr.has-bg .arena.intro .bubble { font-size: .95rem; } }
/* phones: the welcome screen fits without scrolling, and its buttons stay in view side by side */
@media (max-width: 600px) {
  .scr.welcome .welcome-top .wt { font-size: 1.1rem; }
  .scr.welcome .state-big { font-size: 2.4rem; }
  .scr.welcome .loc-card { padding: 8px 10px; }
  .scr.welcome .loc-card .loc-map { max-height: 20vh; width: 100%; }
  .scr.welcome .loc-card p { font-size: .9rem; }
  .scr.welcome .welcome-cast .art-explorer { width: 92px; } .scr.welcome .welcome-cast .art-dog { width: 66px; }
  .scr.welcome .sub { font-size: .9rem; margin: 6px 0; }
  .scr.welcome .btns { position: fixed; left: 0; right: 0; bottom: max(12px, env(safe-area-inset-bottom)); flex-wrap: nowrap; z-index: 30; }
  .scr.welcome .scr-body { padding-bottom: 80px; }
  .scr.welcome .btns button { padding: 12px 14px; font-size: 1rem; white-space: nowrap; }
}
@media (max-width: 600px) and (max-height: 720px) { .scr.welcome .sub { display: none; } .scr.welcome .loc-card p { font-size: .8rem; } }  /* small phones (iPhone SE): keep the buttons clear */

/* ---------- state mini-games (hunt, lanes, rocket, climb, quill) ---------- */
.mg-field { position: relative; height: 250px; border-radius: 18px; overflow: hidden; border: 3px solid #fff; background: #dee2e6 center / cover no-repeat; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.mg-item { position: absolute; font-size: 2.6rem; line-height: 1; background: none; border: 0; padding: 6px; cursor: pointer; animation: popin .2s; z-index: 1; }
.mg-item.good { filter: drop-shadow(0 0 8px #fff) drop-shadow(0 0 4px #74c0fc); }
.mg-item.bad { filter: drop-shadow(0 2px 2px rgba(0,0,0,.35)); }
.mg-item.nugget.rock { padding: 0; }

.lanes.snow { background: linear-gradient(180deg, #e7f5ff, #fff 40%, #e9ecef); }
.lanes.sea { background: linear-gradient(180deg, #4dabf7, #1971c2 60%, #0b3d6e); }
.lanes.sea::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle, rgba(255,255,255,.35) 2px, transparent 3px) 0 0 / 46px 52px; animation: bubbles 4s linear infinite; pointer-events: none; }
@keyframes bubbles { to { background-position: 0 -104px; } }
.lane-line { position: absolute; left: 0; right: 0; border-top: 3px dashed rgba(0,0,0,.12); }
.lanes.sea .lane-line { border-color: rgba(255,255,255,.25); }
.lane-me { position: absolute; left: 12%; transform: translate(-50%, -50%); transition: top .15s; z-index: 2; }
.lane-me .sled { display: inline-block; transform: scaleX(-1); font-size: 2.3rem; white-space: nowrap; }
.lane-me .sub { width: 104px; display: block; }
.lane-me.bump { animation: bump .4s; }
@keyframes bump { 25% { transform: translate(-60%, -50%) rotate(-8deg); } 75% { transform: translate(-40%, -50%) rotate(8deg); } }
.lane-ob { position: absolute; font-size: 2.5rem; transform: translate(-50%, -50%); z-index: 1; }
.lanes .finish { position: absolute; right: 8px; top: 8px; font-size: 1.6rem; opacity: .8; }
.lanes.done .finish { font-size: 3rem; opacity: 1; transition: font-size .3s; }
.lane-btns { display: flex; gap: 10px; justify-content: center; margin-top: 8px; }
.lane-btns button { min-width: 120px; font-size: 1.1rem; }

.rocket-pad { background: linear-gradient(180deg, #0b1440, #3b5bdb 70%, #74c0fc); display: flex; align-items: flex-end; justify-content: center; }
.rocket-pad .rocket { font-size: 4.5rem; transform: rotate(-45deg); margin-bottom: 22px; transition: transform 1.6s cubic-bezier(.5,0,.9,.4); }
.rocket-pad.lift .rocket { transform: translateY(-340px) rotate(-45deg); }
.rocket-pad .countdown { position: absolute; top: 14px; left: 0; right: 0; text-align: center; font-size: 2.6rem; font-weight: 900; color: #ffd43b; text-shadow: 0 3px 0 #000; }
.gauge { position: relative; height: 40px; margin: 14px 4px 4px; border-radius: 20px; background: #ffc9c9; border: 3px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.15); }
.gauge .zone { position: absolute; top: 0; bottom: 0; background: #51cf66; border-radius: 16px; transition: left .25s, width .25s; }
.gauge.in .zone { background: #37b24d; box-shadow: 0 0 16px 4px #8ce99a; }
.gauge .needle { position: absolute; top: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff, #ffd43b 45%, #f08c00); border: 3px solid #5c3d00; box-shadow: 0 2px 6px rgba(0,0,0,.35); z-index: 1; }
.gauge-tip { margin: 2px 0 6px; text-align: center; font-weight: 700; font-size: .95rem; }
.gauge-tip b { color: #2f9e44; }
.launch { display: block; margin: 0 auto 6px; min-width: 200px; transition: background .1s, transform .1s; }
.launch.ready { background: linear-gradient(180deg, #69db7c, #2f9e44); color: #fff; transform: scale(1.08); box-shadow: 0 0 18px #8ce99a; }

.climb { display: flex; align-items: center; }
.climb-meter { position: absolute; left: 10px; top: 10px; bottom: 10px; width: 46px; display: flex; flex-direction: column; justify-content: space-between; align-items: center; background: rgba(255,255,255,.8); border-radius: 23px; padding: 6px 0; font-size: 1.5rem; }
.climb-meter span { min-height: 26px; width: 26px; text-align: center; border-bottom: 2px dotted #adb5bd; }
.climb-meter .base { border: 0; }
.holds { display: flex; gap: 14px; justify-content: center; flex: 1; padding-left: 60px; }
.hold { width: 130px; max-width: 24vw; background: rgba(255,255,255,.75); border: 3px solid #fff; border-radius: 18px; padding: 8px; cursor: pointer; }
.hold svg { width: 100%; display: block; }
.hold.crumble { animation: shake .4s; opacity: .35; }

.parchment { background: linear-gradient(135deg, #fff4d6, #f3dfae); }
.parchment svg { width: 100%; height: 100%; }
.parchment .we { font: italic 700 20px Georgia, serif; fill: #6b4f1d; }
.parchment .ink { fill: none; stroke: #1c2a5a; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.parchment .dot { cursor: pointer; }
.parchment .dot circle { fill: #fff; stroke: #6b4f1d; stroke-width: 3; }
.parchment .dot text { font: 800 16px sans-serif; fill: #6b4f1d; pointer-events: none; }
.parchment .dot.on circle { fill: #1c2a5a; stroke: #1c2a5a; } .parchment .dot.on text { fill: #fff; }
.parchment.signed::after { content: '✒️ Signed!'; position: absolute; right: 16px; bottom: 10px; font: italic 800 1.5rem Georgia, serif; color: #1c2a5a; }
@media (max-width: 560px) {
  .holds { gap: 6px; padding: 0 6px 0 58px; }
  .hold { width: auto; max-width: none; flex: 1; padding: 4px; border-radius: 12px; }
  .climb-meter { width: 40px; }
  .parchment svg .dot circle { r: 21px; }
  .parchment svg .dot text { font-size: 19px; }
}
.credits-link { text-align: center; font-size: .85rem; margin: 10px 0 0; } .credits-link a { color: inherit; opacity: .7; }
.lanes.surf { background: linear-gradient(180deg, #99e9f2, #3bc9db 50%, #1098ad); }
.lanes.surf::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 40px, rgba(255,255,255,.35) 40px 52px, transparent 52px 90px); animation: surfwave 1.2s linear infinite; pointer-events: none; }
@keyframes surfwave { to { background-position: -90px 0; } }
.lane-me .surfer { font-size: 2.6rem; display: inline-block; }
.stack-pad { background: linear-gradient(180deg, #74c0fc, #d0ebff); display: flex; align-items: flex-end; justify-content: center; }
.stack-pad .countdown { position: absolute; top: 14px; left: 0; right: 0; text-align: center; font-size: 2.2rem; font-weight: 900; color: #1c2a5a; text-shadow: 0 2px 0 #fff; }
.stack-pad .tower { display: flex; flex-direction: column; align-items: center; margin-bottom: 0; }
.stack-pad .tower::after { content: ''; width: 150px; height: 26px; background: #495057; border-radius: 4px 4px 0 0; }
.stack-pad .floor { width: 120px; height: 46px; background: repeating-linear-gradient(90deg, #343a40 0 8px, #ffe066 8px 22px, #343a40 22px 30px); border: 3px solid #212529; border-bottom: 0; animation: popin .25s; }
.stack-pad.done .tower::before { content: '🚩'; font-size: 2rem; }
.lanes.track { background: linear-gradient(180deg, #495057, #343a40 50%, #495057); }
.lanes.track .lane-line { border-top: 4px dashed rgba(255,255,255,.7); }
.lanes.track::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 70px, rgba(255,255,255,.08) 70px 74px); animation: surfwave .5s linear infinite; pointer-events: none; }
.lane-me .car { display: inline-block; transform: scaleX(-1); font-size: 2.8rem; }
.ovl-note { font-size: .9em; opacity: .75; }
/* lanes: any emoji rider, plus more places to steer through */
.lane-me .rider { display: inline-block; transform: scaleX(-1); font-size: 2.8rem; }
.lanes.park { background: linear-gradient(180deg, #b2f2bb, #69db7c 55%, #40c057); }
.lanes.river { background: linear-gradient(180deg, #74c0fc, #339af0 55%, #1c7ed6); }
.lanes.river::after, .lanes.lake::after, .lanes.bayou::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 60px, rgba(255,255,255,.1) 60px 64px, transparent 64px 130px), radial-gradient(ellipse 18px 4px, rgba(255,255,255,.35) 60%, transparent 62%) 0 0 / 90px 40px; animation: surfwave 1.4s linear infinite; pointer-events: none; }
.lanes.lake { background: linear-gradient(180deg, #a5d8ff, #4dabf7 55%, #1971c2); }
.lanes.bayou { background: linear-gradient(180deg, #5c7a3a, #3d5a2a 50%, #2e4220); }
.lanes.sky { background: linear-gradient(180deg, #d0ebff, #a5d8ff 55%, #e7f5ff); }
.lanes.sky::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 40px 14px, rgba(255,255,255,.9) 60%, transparent 62%) 0 0 / 180px 90px; animation: surfwave 3s linear infinite; pointer-events: none; }
.lanes.prairie { background: linear-gradient(180deg, #ffe8a1, #e9c46a 50%, #c99a4b); }
.lanes.turf { background: linear-gradient(180deg, #8ce99a, #2f9e44 50%, #8d6e4a 50.5%, #a47c55); }
.lanes.river .lane-line, .lanes.lake .lane-line, .lanes.bayou .lane-line, .lanes.park .lane-line { border-color: rgba(255,255,255,.3); }
/* timing game with another hero (dog treats, geysers…) */
.rocket-pad.toss { background: linear-gradient(180deg, #d3f9d8, #8ce99a 70%, #51cf66); }
.rocket-pad.geyser { background: linear-gradient(180deg, #a5d8ff, #e7f5ff 55%, #c9a66b 56%, #a47c55); }
.rocket-pad.toss .rocket, .rocket-pad.geyser .rocket { transform: none; }
.rocket-pad.toss.lift .rocket { transform: translateY(-60px) rotate(-12deg); transition-duration: .5s; }
.rocket-pad.geyser.lift .rocket { transform: translateY(-120px) scale(1.6); }
/* connect-the-stars at night */
.parchment.night { background: radial-gradient(circle at 20% 20%, #364fc7, #141e5a 70%); }
.parchment.night .we { fill: #ffe066; }
.parchment.night .ink { stroke: #ffd43b; }
.parchment.night .dot circle { fill: #fff9db; stroke: #ffd43b; }
.parchment.night .dot.on circle { fill: #ffd43b; stroke: #fff; } .parchment.night .dot.on text { fill: #5c3d00; }
.parchment.night.signed::after { content: '✨ Shining!'; color: #ffe066; }
/* Monster Blaster */
.mg-field.blaster { height: 340px; background: radial-gradient(circle at 50% 120%, #4c6ef5, #1b1f5e 55%, #0b0d2e); }
.bl-stars { position: absolute; inset: 0; background: radial-gradient(1.5px 1.5px at 10% 20%, #fff, transparent), radial-gradient(1.5px 1.5px at 30% 70%, #fff, transparent), radial-gradient(2px 2px at 60% 30%, #ffe066, transparent), radial-gradient(1.5px 1.5px at 80% 60%, #fff, transparent), radial-gradient(1.5px 1.5px at 90% 15%, #fff, transparent), radial-gradient(1.5px 1.5px at 45% 85%, #fff, transparent); opacity: .8; }
.bl-cannon { position: absolute; left: 50%; bottom: 6px; margin-left: -26px; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; font-size: 1.8rem; background: radial-gradient(circle, #fff3bf, #fab005); box-shadow: 0 0 18px #ffd43b; transition: transform .15s; z-index: 3; }
.bl-foe { position: absolute; transform: translate(-50%, 0); background: none; border: 0; padding: 0; cursor: pointer; display: flex; flex-direction: column; align-items: center; z-index: 2; transition: opacity .4s; }
.bl-foe img { height: 96px; width: auto; filter: drop-shadow(0 0 6px rgba(255,255,255,.7)); pointer-events: none; }
.bl-foe b { margin-top: -6px; background: #fff; color: #1b1f5e; border: 3px solid #ffd43b; border-radius: 999px; padding: 2px 10px; font-size: .85rem; font-weight: 800; line-height: 1.15; text-align: center; box-shadow: 0 3px 8px rgba(0,0,0,.35); }
.bl-foe.miss { animation: bump .4s; } .bl-foe.miss b { background: #ffe3e3; border-color: #e03131; }
.bl-foe.pop { animation: blpop 1.2s forwards; } .bl-foe.pop b { background: #d3f9d8; border-color: #2f9e44; }
.bl-foe.flee { opacity: 0; pointer-events: none; }
@keyframes blpop { 0% { transform: translate(-50%, 0) scale(1); } 30% { transform: translate(-50%, -10px) scale(1.25) rotate(-8deg); } 100% { transform: translate(-50%, -60px) scale(.2) rotate(360deg); opacity: 0; } }
.bl-shot { position: absolute; color: #ffe066; font-size: 1.6rem; text-shadow: 0 0 10px #ffd43b; transform: translate(0, 0); transition: transform .25s linear; z-index: 4; margin: -14px 0 0 -8px; pointer-events: none; }
.bl-spark { position: absolute; font-size: 1.3rem; transition: transform .8s ease-out, opacity .8s; z-index: 4; pointer-events: none; }
@media (max-width: 600px) { .mg-field.blaster { height: 380px; } .bl-foe img { height: 64px; } .bl-foe b { font-size: .75rem; padding: 2px 6px; } }

/* stages: the explorer and the monster each stand on a perch that fits the picture (ART.perch) */
.stand .who { position: relative; display: flex; align-items: flex-end; gap: 2px; }
.stand .who > .art { position: relative; z-index: 2; }
.stand .perch { position: absolute; left: 50%; bottom: 0; width: 102%; transform: translate(-50%, calc((1 - var(--f, .3)) * 100%)); z-index: 1; pointer-events: none; }
.stand .perch:empty { display: none; }
.stand .perch .perch-img { display: block; width: 100%; height: auto; filter: drop-shadow(0 6px 5px rgba(0,0,0,.3)); animation: perch-in .35s ease-out; }
.stand[data-perch="boat"] .perch { z-index: 3; width: 112%; }
.stand[data-perch="boat"] .who { animation: boat-rock 3.2s ease-in-out infinite; transform-origin: 50% 90%; }
.stand[data-perch="lily"] .who, .stand[data-perch="stone"] .who { animation: float-bob 3.6s ease-in-out infinite; }
@keyframes perch-in { from { opacity: 0; transform: scale(.9); } }
@keyframes boat-rock { 25% { transform: rotate(-1.5deg) translateY(2px); } 75% { transform: rotate(1.5deg) translateY(-2px); } }
@keyframes float-bob { 50% { transform: translateY(3px); } }
/* standing on something, a monster breathes instead of hovering */
.stand .art-monster { animation: breathe 2.4s ease-in-out infinite; transform-origin: 50% 100%; }
.stand .art-monster.real.ko { animation: none; transform: rotate(6deg); transform-origin: 50% 100%; }
@keyframes breathe { 50% { transform: scale(1.02, .975); } }

/* the challenge intro: bigger explorer, dog, and monster, all on their perches; the bubble sits above the monster */
.scr.has-bg .arena.intro.staged { padding: 0 3% 64px; gap: 12px; }
.arena.staged .foe { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.scr.has-bg .arena.intro.staged .cast .art-explorer { width: auto; height: min(300px, 40vh); }
.scr.has-bg .arena.intro.staged .cast .art-dog { width: auto; height: min(168px, 22.5vh); }
.arena.staged .foe .art-monster.real { width: auto; max-width: 40vw; }
.arena.staged .foe .art-monster.real.m-small { height: min(250px, 34vh); }
.arena.staged .foe .art-monster.real.m-medium { height: min(280px, 37vh); }
.arena.staged .foe .art-monster.real.m-boss { height: min(320px, 42vh); }
/* the challenge screen: a bigger monster on its own small perch */
.mini-foe.stand .who { justify-content: center; margin-bottom: 52px; }
.mini-foe.stand .art-monster.real { width: auto; height: 170px; max-width: 160px; }
@media (max-width: 720px) {
  .mini-foe.stand .who { margin-bottom: 32px; }
  .mini-foe.stand .art-monster.real { height: 96px; max-width: 110px; }
}
@media (max-width: 600px) {
  .scr.has-bg .arena.intro.staged { position: relative; padding: 0 2% 40px; gap: 4px; }
  .arena.staged .foe .bubble { position: absolute; top: 0; left: 3%; right: 3%; max-width: none; }
  .scr.has-bg .arena.intro.staged .cast .art-explorer { height: 20vh; }
  .scr.has-bg .arena.intro.staged .cast .art-dog { height: 11.5vh; }
  .arena.staged .foe .art-monster.real { max-width: 40vw; }
  .arena.staged .stand .perch { width: 104%; }
  .arena.staged .stand[data-perch="boat"] .perch { width: 104%; }
  .arena.staged .foe .art-monster.real.m-small { height: 22vh; }
  .arena.staged .foe .art-monster.real.m-medium { height: 24vh; }
  .arena.staged .foe .art-monster.real.m-boss { height: 26vh; }
}
/* the walk-in: the explorer and dog come from the left, then the monster jumps out to block the way */
.arena.staged.enter .stand .who, .arena.staged.enter .foe .bubble { visibility: hidden; }
.arena.staged.entering:not(.foe-in) .foe .who, .arena.staged.entering .foe .bubble { visibility: hidden; }
.arena.staged.entering .foe .bubble { animation: none; }
.arena.staged:not(.enter):not(.entering) .foe .bubble { animation: bubble-in .3s ease-out; }
@keyframes bubble-in { from { opacity: 0; transform: translateY(8px) scale(.9); } }
.stand .who > .art.walking { animation: walk-hop .3s ease-in-out infinite alternate; }
@keyframes walk-hop { to { translate: 0 -9px; } }
.big.later { visibility: hidden; }
/* the tour guide card: plays while the explorer walks in, pauses when the monster cuts in */
.tour-card { background: rgba(255, 254, 245, .94); color: var(--ink); border-radius: 18px; padding: 8px 16px 10px; max-width: 640px; width: calc(100% - 24px); box-shadow: 0 6px 16px #0004; animation: bubble-in .3s ease-out; }
.tour-card .tc-head { font-size: .85rem; color: #5f3dc4; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.tour-card .tc-state { font-weight: 700; color: #868e96; }
.tour-card .tc-text { margin: 4px 0 0; font-weight: 800; font-size: clamp(1rem, 2.2vw, 1.2rem); }
.tour-card.paused { opacity: .7; } .tour-card.paused .tc-text::after { content: ' —'; }
.tour-card .tc-lines { margin: 6px 0 0; padding-left: 22px; font-weight: 700; display: grid; gap: 4px; }
.tour-card .tc-lines li { transition: background .2s; border-radius: 8px; padding: 1px 6px; }
.tour-card .tc-lines li.on { background: #ffe066; }
.scr.tour .scr-body { min-height: calc(100vh - 84px); min-height: calc(100dvh - 84px); }
.scr.has-bg .arena.intro.staged.after { flex: 1; min-height: 0; }
.tour-card .btns { margin-top: 10px; justify-content: center; }
.tour-card .btns .ghost { background: #5f3dc4; color: #fff; }

/* startled: exclamation marks pop over the explorer and the dog */
.stand .gasp { position: absolute; z-index: 4; font-style: normal; font-size: 2.6rem; opacity: 0; pointer-events: none; filter: drop-shadow(0 2px 2px #0006); }
.stand .gasp.g1 { left: 14%; top: -14%; } .stand .gasp.g2 { left: 72%; top: 34%; font-size: 2rem; }
.stand.scared .gasp { animation: gasp 2.4s ease-out forwards; } .stand.scared .gasp.g2 { animation-delay: .08s; }
@keyframes gasp { 0% { opacity: 0; transform: scale(.2) translateY(10px); } 12% { opacity: 1; transform: scale(1.3) translateY(-6px); } 22% { transform: scale(1); } 80% { opacity: 1; } 100% { opacity: 0; } }
@media (max-width: 600px) { .stand .gasp { font-size: 1.8rem; } .stand .gasp.g2 { font-size: 1.4rem; } .tour-card .tc-text { font-size: .95rem; } }
.scr.has-bg .arena.intro.staged:not(.after) { min-height: calc(100vh - 300px); min-height: calc(100dvh - 300px); }
@media (max-width: 600px) { .scr.has-bg .arena.intro.staged:not(.after) { min-height: 54vh; } }
/* victory: the explorer and dog jump for joy, with confetti */
.celebrate { display: flex; align-items: flex-end; justify-content: center; gap: 6px; }
.celebrate .art-explorer { animation: cheer-jump .75s ease-in-out infinite; transform-origin: 50% 100%; }
.celebrate .art-dog { animation: cheer-jump .62s .18s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes cheer-jump { 0%, 100% { transform: translateY(0) scale(1.04, .94); } 15% { transform: translateY(0) scale(1); } 45% { transform: translateY(-38%) rotate(-6deg); } 60% { transform: translateY(-38%) rotate(6deg); } 85% { transform: translateY(0) scale(1); } }
.sr-cast { margin-top: 6px; } .sr-cast .art-explorer { height: min(220px, 26vh); width: auto; } .sr-cast .art-dog { height: min(125px, 15vh); width: auto; }
.sr-cast::before, .cc-cast::before { content: '🎉'; font-size: 2.6rem; align-self: center; animation: cheer-jump .9s infinite; }
.sr-cast::after, .cc-cast::after { content: '🎉'; font-size: 2.6rem; align-self: center; transform: scaleX(-1); animation: cheer-jump .9s .3s infinite; }
.cc-cast { align-self: flex-end; padding-top: 70px; } .cc-cast .art-explorer { height: 200px; width: auto; } .cc-cast .art-dog { height: 112px; width: auto; }
@media (max-width: 600px) { .cc-cast { padding-top: 40px; } .cc-cast .art-explorer { height: 130px; } .cc-cast .art-dog { height: 74px; } }
.stand.happy .who > .art { animation: cheer-jump .7s ease-in-out 3; }
.stand.happy .who > .art-dog { animation-delay: .15s; }
.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 60; overflow: hidden; }
.confetti i { position: absolute; top: -20px; width: 10px; height: 16px; border-radius: 2px; animation: confetti-fall linear forwards; }
@keyframes confetti-fall { to { transform: translate(var(--x), 110vh) rotate(var(--r)); } }
.sr-cast { margin-top: 70px; }
@media (min-width: 701px) { .sr-cast { position: fixed; left: 3%; bottom: 3%; margin: 0; } }
/* the treasure chest */
.scr.treasure { background: linear-gradient(180deg, #2b1b6b, #5b3fc4); }
.chest-box { position: relative; height: 260px; width: 260px; display: grid; place-items: center; }
.chest-box .chest { font-size: 150px; filter: drop-shadow(0 10px 12px #0006); background: none; }
.chest-box .chest.shake { animation: chest-shake .35s ease-in-out 4; }
.chest-box .chest.open { animation: chest-pop .4s ease-out forwards; }
.chest-hat { position: absolute; inset: 0; display: grid; place-items: center; animation: hat-fly .7s cubic-bezier(.2,1.4,.4,1) both; }
.chest-hat span { font-size: 120px; filter: drop-shadow(0 0 18px #ffe066); } .chest-hat img { width: 220px; filter: drop-shadow(0 0 18px #ffe066); }
.chest-msg { font-size: 1.3rem; font-weight: 800; background: #fffef5; color: var(--ink); border-radius: 18px; padding: 10px 20px; max-width: 520px; }
@keyframes chest-shake { 25% { transform: rotate(-8deg); } 75% { transform: rotate(8deg); } }
@keyframes chest-pop { to { transform: scale(.6) translateY(70px); opacity: .5; } }
@keyframes hat-fly { from { transform: translateY(80px) scale(.2); opacity: 0; } }
.item.locked { opacity: .45; cursor: default; min-width: 56px; }
/* explorer and dog poses (ART.explorer / ART.dog): normal, startled when .scared, cheer when celebrating */
.art-explorer .pose, .art-dog .pose { display: none; }
.art-explorer .pose-normal, .art-dog .pose-normal { display: inline; }
.scared .art-explorer .pose-normal, .scared .art-dog .pose-normal,
.celebrate .art-explorer .pose-normal, .celebrate .art-dog .pose-normal,
.happy .art-explorer .pose-normal, .happy .art-dog .pose-normal { display: none; }
.scared .art-explorer .pose-startled, .scared .art-dog .pose-startled { display: inline; }
.celebrate .art-explorer .pose-cheer, .celebrate .art-dog .pose-cheer,
.happy .art-explorer .pose-cheer, .happy .art-dog .pose-cheer { display: inline; }
/* state card front: the explorer and dog fill the left side; name, map, and date on the right */
.scard.front.big-hero { display: grid; grid-template-columns: 56% 1fr; gap: 6px; padding: 0; overflow: hidden; }
.big-hero .sc-hero { position: relative; display: flex; align-items: flex-end; justify-content: center; gap: 0; padding: 14px 4px 6px; background: radial-gradient(ellipse at 50% 85%, #fff3c4 0, #e7f5ff 55%, #d0ebff 100%); border-right: 2px solid #e9ecef; }
/* no dog on the card: the whole explorer, head (and hat) to toe */
.big-hero .sc-hero { overflow: hidden; align-items: flex-start; padding: 0; }
.big-hero .sc-hero .art-explorer { width: auto; height: 81%; max-height: none; margin: 12% 0 0; flex: none; filter: drop-shadow(0 3px 2px rgba(0,0,0,.25)); }
.big-hero .sc-hero .art-dog { width: auto; height: 46%; margin-left: -14px; filter: drop-shadow(0 3px 2px rgba(0,0,0,.25)); }
.big-hero .sc-side { display: flex; flex-direction: column; justify-content: space-between; padding: 10px 10px 8px 2px; min-width: 0; }
.big-hero .sc-name { font-size: 1.35rem; line-height: 1.1; }
.big-hero .sc-map { flex: 1; display: grid; place-items: center; min-height: 0; }
.big-hero .sc-map svg { width: 100%; height: auto; max-height: 120px; }
.big-hero .sc-foot { display: grid; font-size: .95rem; } .big-hero .sc-foot small { font-weight: 700; font-size: .75rem; color: #666; }
@media print { .print-pair .scard.front.big-hero { padding: 0; } .big-hero .sc-hero .art-explorer { max-height: none; } }
/* bigger explorer and dog everywhere they appear outside the challenges (owner: 角色跟狗都要大一點) */
.story .story-cast .art-explorer { width: 165px; } .story .story-cast .art-dog { width: 112px; }
.welcome-cast .art-explorer { width: 170px; } .welcome-cast .art-dog { width: 122px; }
.route-cast .art-explorer { width: 132px; } .route-cast .art-dog { width: 92px; }
.mp .art-explorer { width: 190px; } .mp .art-dog { width: 132px; }
@media (max-width: 600px) {
  .story .story-cast .art-explorer { width: 118px; } .story .story-cast .art-dog { width: 80px; }
  .scr.welcome .welcome-cast .art-explorer { width: 120px; } .scr.welcome .welcome-cast .art-dog { width: 86px; }
  .route-cast .art-explorer { width: 108px; } .route-cast .art-dog { width: 76px; }
  .mp .art-explorer { width: 150px; } .mp .art-dog { width: 104px; }
}
/* the wardrobe pop-up: a live preview, then the shelves */
.wardrobe .ovl-card { width: min(760px, 100%); }
.wr-preview { display: flex; align-items: flex-end; justify-content: center; gap: 4px; min-height: 200px; background: radial-gradient(ellipse at 50% 90%, #fff3c4, #e7f5ff 60%, #d0ebff); border-radius: 18px; padding: 16px 0 8px; }
.wr-preview .art-explorer { width: 128px; } .wr-preview .art-dog { width: 92px; }
.wardrobe h2 { margin: 6px 0 2px; font-size: 1.1rem; }
.wardrobe .items { gap: 8px; }
.wardrobe .item { color: var(--ink); background: #fff; border-color: #c5b6ff; font-size: .95rem; padding: 8px 12px; }
.wardrobe .item.on { background: var(--gold); border-color: #e0a800; color: #3b2300; }
.wardrobe .item.locked { background: #f1f3f5; border-color: #dee2e6; }
.chest-hat img.outfit-pic { width: auto; height: 240px; }
.wardrobe .wr-foot { display: grid; gap: 8px; justify-items: center; }
@media (min-width: 760px) {
  .wardrobe .ovl-card { width: min(940px, 100%); grid-template-columns: 300px 1fr; align-items: start; text-align: center; }
  .wardrobe .wr-title, .wardrobe .wr-foot { grid-column: 1 / -1; }
  .wardrobe .wr-preview { min-height: 380px; position: sticky; top: 0; } .wr-preview .art-explorer { width: 170px; } .wr-preview .art-dog { width: 115px; }
}
@media (max-width: 600px) { .wr-preview { min-height: 150px; } .wr-preview .art-explorer { width: 96px; } .wr-preview .art-dog { width: 70px; } .wardrobe .item { font-size: .85rem; padding: 6px 10px; } }
@media (max-width: 759px) { .wardrobe .wr-foot { position: sticky; bottom: -20px; background: #fffef8; padding: 8px 0 12px; margin: 0 -20px -20px; box-shadow: 0 -6px 12px #fffef8; } .wardrobe .wr-foot .ovl-note { display: none; } }
.sub.small { font-size: .9rem; opacity: .8; }
/* clear-glass buttons and words on busy pictures get a dark backing so they are easy to read */
.ghost { background: rgba(20, 18, 60, .62); text-shadow: 0 1px 2px #0008; }
.scr.my-player .sub { display: inline-block; margin: 6px auto; padding: 6px 16px; border-radius: 999px; background: rgba(20, 18, 60, .7); color: #fff; text-shadow: 0 1px 2px #000; }
.scr.my-player .mp-name { font-size: 1.5rem; padding: 4px 22px; }
.scr.my-player .sub.small { font-size: .85rem; }
.mp-gear-title { margin: 18px 0 2px; color: #fff; text-shadow: 0 2px 4px #000a; }
.item.locked { background: rgba(20, 18, 60, .62) !important; opacity: 1 !important; color: #ffd43b; }
/* inside white pop-up cards the clear buttons stay white with dark words */
.ovl-card .ghost, .ovl .ghost { background: #fff; color: var(--ink); text-shadow: none; }
/* bigger words for the top buttons, place name and tour guide */
.tb { font-size: 1.05rem; padding: 9px 18px; }
.place-tag { font-size: 1.1rem; padding: 6px 18px; }
.tour-card .tc-head { font-size: 1rem; }
.tour-card .tc-lines { font-size: 1.12rem; }
@media (max-width: 600px) {
  .topbar { gap: 5px; right: 6px; }
  .tb { font-size: .9rem; padding: 7px 11px; }
  .tour-card .tc-lines { font-size: 1rem; }
}
.menu button { font-size: 1.15rem; padding: 14px 16px; }
.tb { white-space: nowrap; }
@media (max-width: 600px) {
  .tb { font-size: .82rem; padding: 6px 9px; }
  #app { padding-top: 46px; }   /* room for the top buttons */
  .menu button { font-size: 1rem; padding: 12px; }
}
@media (min-width: 761px) { .hub-grid { grid-template-columns: 230px 1fr; } .menu button { white-space: nowrap; } }
/* the treasure chest drops in on the STAR RESTORED screen */
.chest-drop { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; align-content: center; gap: 10px; pointer-events: none; }
.chest-drop .cd-stage { position: relative; width: min(300px, 70vw); aspect-ratio: 1; display: grid; place-items: end center;
  transform: translateY(-110vh); animation: cd-fall .9s cubic-bezier(.5,0,.75,0) forwards; }
.chest-drop.landed .cd-stage { animation: cd-bounce .45s ease-out forwards; transform: none; }
.chest-drop .chest-art { width: 78%; overflow: visible; filter: drop-shadow(0 12px 14px #0007); }
.chest-drop .chest-lid { transform-box: fill-box; transform-origin: 50% 100%; transition: transform .45s cubic-bezier(.3,1.6,.5,1); }
.chest-drop.shake .chest-art { animation: chest-shake .3s ease-in-out 4; }
.chest-drop.open .chest-art { animation: none; }
.chest-drop.open .chest-lid { transform: translateY(-34px) rotate(-28deg); }
.chest-drop .cd-prize { position: absolute; left: 50%; bottom: 30%; width: 62%; display: grid; place-items: center; opacity: 0; transform: translate(-50%, 0) scale(.2); z-index: 2; }
.chest-drop .cd-prize img { width: 100%; filter: drop-shadow(0 0 18px #ffe066); } .chest-drop .cd-prize img.outfit-pic { width: auto; height: 110%; }
.chest-drop .cd-prize span { font-size: 110px; filter: drop-shadow(0 0 18px #ffe066); }
.chest-drop.open .cd-prize { animation: cd-burst .9s cubic-bezier(.2,1.5,.4,1) forwards; }
.chest-drop .cd-rays { position: absolute; left: 50%; bottom: 40%; width: 170%; aspect-ratio: 1; transform: translate(-50%, 50%) scale(0); border-radius: 50%; opacity: 0;
  background: repeating-conic-gradient(#fff3b0aa 0 10deg, transparent 10deg 24deg); -webkit-mask: radial-gradient(circle, #000 25%, transparent 70%); mask: radial-gradient(circle, #000 25%, transparent 70%); }
.chest-drop.open .cd-rays { animation: cd-rays .6s ease-out forwards, cd-spin 9s linear infinite; }
.chest-drop .cd-panel { pointer-events: auto; display: grid; gap: 8px; justify-items: center; animation: fade-up .4s ease-out; }
.chest-drop .cd-panel[hidden] { display: none; }
@keyframes cd-fall { to { transform: translateY(0); } }
@keyframes cd-bounce { 0% { transform: translateY(0) scale(1.15, .8); } 50% { transform: translateY(-26px) scale(.95, 1.06); } 100% { transform: translateY(0) scale(1); } }
@keyframes cd-burst { 0% { opacity: 1; transform: translate(-50%, 40%) scale(.2); } 60% { opacity: 1; transform: translate(-50%, -78%) scale(1.15); } 100% { opacity: 1; transform: translate(-50%, -62%) scale(1); } }
@keyframes cd-rays { to { opacity: 1; transform: translate(-50%, 0) scale(1); } }
@keyframes cd-spin { to { rotate: 360deg; } }
@keyframes fade-up { from { opacity: 0; transform: translateY(14px); } }
.chest-drop .cd-prize img.outfit-pic { width: 58%; height: auto; }
@media (max-width: 700px) {
  .chest-drop { align-content: start; padding-top: 70px; }
  .chest-drop .cd-stage { width: min(230px, 60vw); }
}
/* after Receive: the explorer, with the new piece floating beside, asked to put it on */
.chest-drop.try { background: rgba(15, 12, 50, .72); pointer-events: auto; }
.chest-drop.try .cd-stage { animation: none; transform: none; display: flex; align-items: flex-end; justify-content: center; gap: 4px; aspect-ratio: auto; width: auto; }
.chest-drop .cd-cast { display: flex; align-items: flex-end; }
.chest-drop .cd-cast .art-explorer { height: min(300px, 40vh); width: auto; } .chest-drop .cd-cast .art-dog { height: min(170px, 22vh); width: auto; }
.chest-drop .cd-new { width: min(150px, 30vw); align-self: center; animation: cd-float 1.6s ease-in-out infinite; }
.chest-drop .cd-new img { width: 100%; filter: drop-shadow(0 0 16px #ffe066); } .chest-drop .cd-new img.outfit-pic { width: 80%; } .chest-drop .cd-new span { font-size: 90px; }
.chest-drop .cd-dressed { animation: cd-pop .6s cubic-bezier(.2,1.6,.4,1); }
@keyframes cd-float { 50% { transform: translateY(-12px) rotate(4deg); } }
@keyframes cd-pop { 0% { transform: scale(.85); filter: brightness(2.2); } 100% { transform: scale(1); filter: none; } }
@media (max-width: 700px) {
  .chest-drop.try { padding-top: 120px; }
  .chest-drop.try .cd-stage { max-width: 94vw; }
  .chest-drop .cd-cast .art-explorer { height: 28vh; } .chest-drop .cd-cast .art-dog { height: 15vh; }
  .chest-drop .cd-new { width: 22vw; }
}
/* snack game: zap the monsters */
.zap-count { position: absolute; left: 10px; top: 8px; z-index: 4; background: #fff; color: #1b1f5e; border: 3px solid #ffd43b; border-radius: 999px; padding: 2px 12px; font-weight: 800; }
.mg-field.zap .bl-foe img { height: 84px; }
/* snack game: 3 x 3 picture puzzle */
.pz-wrap { display: flex; gap: 12px; align-items: flex-start; justify-content: center; flex-wrap: wrap; }
.pz-board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; width: min(330px, 82vw); aspect-ratio: 16 / 9; background: #2b2a4c; border: 3px solid #fff; border-radius: 14px; padding: 3px; }
.pz-tile { border: 0; padding: 0; border-radius: 6px; cursor: pointer; background-size: 300% 300%; background-repeat: no-repeat; transition: transform .15s, box-shadow .15s; }
.pz-tile.on { transform: scale(.92); box-shadow: 0 0 0 4px #ffd43b, 0 0 16px #ffd43b; }
.pz-board.done { gap: 0; padding: 0; transition: gap .4s, padding .4s; }
.pz-board.done .pz-tile { border-radius: 0; }
.pz-peek { display: grid; gap: 2px; justify-items: center; width: min(120px, 30vw); }
.pz-peek img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; border: 2px solid #fff; box-shadow: 0 3px 8px #0004; }
.pz-peek small { font-weight: 700; color: #555; font-size: .75rem; text-align: center; }
.chest-drop .cd-cast .art-explorer { height: min(420px, 52vh); } .chest-drop .cd-cast .art-dog { height: min(300px, 38vh); }
@media (max-width: 700px) { .chest-drop .cd-cast .art-explorer { height: 40vh; } .chest-drop .cd-cast .art-dog { height: 28vh; } .chest-drop .cd-new { width: 26vw; } }
/* a restored state turns gold, so its star turns white with an orange edge to stand out on it */
.hub-map .star:not(.dim), .sr-map .star:not(.dim) { font-size: 30px; fill: #f76707; stroke: #fff; stroke-width: 2.5px; paint-order: stroke; filter: drop-shadow(0 1px 3px rgba(0,0,0,.45)); }
/* the picture puzzle as a challenge: a bigger board, then "Where are we?" */
.game-box .pz-board { width: min(480px, 86vw); }
.game-box .pz-peek { width: min(150px, 30vw); }
.pz-ask { display: grid; gap: 6px; justify-items: center; align-self: center; }
.pz-ask p { margin: 0; font-size: 1.3rem; font-weight: 800; }
.pz-ask .btns { flex-direction: column; }
.pz-opt { background: #fff !important; color: var(--ink) !important; border: 3px solid #5f3dc4; font-size: 1.05rem; text-shadow: none; }
.pz-opt.right { background: #d3f9d8 !important; border-color: #2f9e44; }
.pz-opt.wrong { background: #ffe3e3 !important; border-color: #e03131; opacity: .7; }
.mg-field.zap.facts { height: 380px; }
.mg-field.zap.facts .bl-foe img { height: 72px; }
.mg-field.zap.facts .bl-foe b { font-size: .8rem; padding: 2px 6px; }
@media (max-width: 600px) { .mg-field.zap.facts .bl-foe img { height: 54px; } .mg-field.zap.facts .bl-foe b { font-size: .68rem; } }
/* the state's treasures in the zap game: friendly signs, not monsters */
.bl-foe.zf-friend { background: #fffef5; border: 3px solid #2f9e44; border-radius: 14px; padding: 6px 8px; box-shadow: 0 0 0 3px #d3f9d8, 0 4px 10px #0006; max-width: 150px; }
.bl-foe.zf-friend .zf-icon { font-size: 1.8rem; line-height: 1; }
.bl-foe.zf-friend b { margin: 2px 0 0; border: 0; box-shadow: none; padding: 0; font-size: .78rem; background: none; }
.bl-foe.zf-friend .zf-flag { height: auto; width: 96px; border-radius: 4px; filter: none; }
.bl-foe.zf-friend.miss { border-color: #e03131; box-shadow: 0 0 0 3px #ffe3e3; }
.sr-cast:not([hidden]), .cc-cast { display: flex; align-items: flex-end; justify-content: center; gap: 6px; }
/* gear shelves: a grid of item slots */
.items { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 8px; width: 100%; max-width: 620px; margin: 0 auto; }
.item.tile { display: grid; grid-template-rows: 1fr auto; justify-items: center; align-items: center; aspect-ratio: 1 / 1.08; padding: 6px 4px 5px; border-radius: 14px; font-size: .72rem; line-height: 1.1; }
.item.tile .it-pic { width: 100%; height: 100%; display: grid; place-items: center; min-height: 0; }
.item.tile .it-pic img { max-width: 86%; max-height: 54px; object-fit: contain; filter: drop-shadow(0 2px 2px #0003); }
.item.tile .it-pic i { font-style: normal; font-size: 2rem; }
.item.tile .it-name { font-weight: 800; text-align: center; }
.item.tile.locked .it-pic { font-size: 1.8rem; }
.item.tile.on { box-shadow: 0 0 0 3px #fff, 0 0 12px #ffd43b; }
.wardrobe .items { grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); }
@media (max-width: 600px) { .items { grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); } .item.tile { font-size: .66rem; } .item.tile .it-pic img { max-height: 42px; } }
.wardrobe .ovl-card { max-width: 100%; box-sizing: border-box; } .wardrobe .ovl-card > * { min-width: 0; }
.wardrobe .item.tile { padding: 6px 4px 5px; font-size: .72rem; }
@media (max-width: 600px) { .wardrobe .items { grid-template-columns: repeat(4, 1fr); gap: 6px; } .wardrobe .item.tile { font-size: .62rem; } }
.scr.my-player .item.tile:not(.on) { background: rgba(20, 18, 60, .72); }
/* the real chest picture: body + lid */
.chest-drop .chest-art { position: relative; width: 82%; aspect-ratio: 600 / 480; }
.chest-drop .chest-art img { position: absolute; left: 0; width: 100%; height: auto; pointer-events: none; }
.chest-drop .chest-body { bottom: 0; z-index: 1; }
.chest-drop .chest-lid { top: 0; z-index: 1; transform-origin: 50% 100%; transition: transform .5s cubic-bezier(.3,1.6,.5,1); }
.chest-drop .ch-glow { position: absolute; left: 7%; right: 7%; top: 44%; height: 14%; z-index: 0; border-radius: 8px; opacity: 0; background: radial-gradient(ellipse, #fffbe0, #ffd43b 55%, #f59f00); box-shadow: 0 0 40px 18px #ffd43b; transition: opacity .3s; }
.chest-drop.open .ch-glow { opacity: 1; }
.chest-drop.open .chest-lid { transform: translateY(-30%) rotate(-12deg); }
@media (max-width: 700px) { .chest-drop:not(.try) { padding-top: 120px; } }
/* music / sound switches: dimmer when off */
.tb.sw.off { background: #495057cc; border-color: #ffffff66; }
@media (max-width: 600px) { .tb .tl { display: none; } .tb { font-size: 1.05rem; padding: 6px 11px; } }
/* the opening "Tap to Start" screen */
.tap-start { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; align-content: center; gap: 28px; cursor: pointer;
  background: #1e1a4d url('assets/bg/kingdom-night.webp') center / cover no-repeat; transition: opacity .45s; }
.tap-start::before { content: ''; position: absolute; inset: 0; background: rgba(15, 12, 50, .35); }
.tap-start > * { position: relative; }
.tap-start .ts-go { font-size: clamp(1.4rem, 4vw, 2rem); padding: 18px 44px; animation: ts-pulse 1.4s ease-in-out infinite; }
.tap-start.gone { opacity: 0; pointer-events: none; }
@keyframes ts-pulse { 50% { transform: scale(1.08); box-shadow: 0 0 30px #ffd43b; } }
/* "Who's playing?" on the home screen: up to 3 explorers */
.who-row { display: grid; justify-items: center; gap: 6px; }
.who-row p { margin: 0; font-weight: 800; color: #fff; text-shadow: 0 2px 4px #000a; }
.who-kids { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.who-kid { display: grid; justify-items: center; gap: 0; width: 104px; padding: 8px 6px 6px; border-radius: 16px; border: 3px solid #ffffffaa; background: rgba(20, 18, 60, .72); color: #fff; cursor: pointer; }
.who-kid .art-explorer { width: auto; height: 92px; overflow: hidden; }
.who-kid b { font-size: .95rem; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .who-kid small { font-weight: 700; color: var(--gold); }
.who-kid.on { border-color: var(--gold); box-shadow: 0 0 16px #ffd43b; background: rgba(60, 45, 130, .85); }
.who-kid.add span { font-size: 2.4rem; line-height: 92px; }
@media (max-width: 600px) { .who-kid { width: 88px; } .who-kid .art-explorer { height: 74px; } .who-kid.add span { line-height: 74px; } }
@media (max-width: 600px) { .scr.title:has(.who-row) .title-art { display: none; } }
.who-kid.add span { color: #fff; }
/* home screen: three tall explorer frames */
.ks-ask { margin: 4px 0 0; font-weight: 800; font-size: 1.15rem; color: #fff; text-shadow: 0 2px 4px #000a; }
.kid-slots { display: grid; grid-template-columns: repeat(3, minmax(0, 210px)); gap: 16px; justify-content: center; width: 100%; margin-top: 6px; }
.kid-slot { display: grid; grid-template-rows: 1fr auto; gap: 6px; height: min(400px, 56vh); }
.kid-slot .ks-play, .kid-slot.empty { display: grid; grid-template-rows: 1fr auto auto auto; justify-items: center; align-items: end; gap: 2px; padding: 10px 6px 10px; border-radius: 22px; border: 3px solid #ffffffcc; background: linear-gradient(180deg, rgba(40, 32, 110, .55), rgba(20, 18, 60, .85)); color: #fff; cursor: pointer; min-height: 0; transition: transform .15s, box-shadow .15s; }
.kid-slot .ks-play:hover, .kid-slot.empty:hover { transform: translateY(-4px); box-shadow: 0 0 20px #ffd43b; border-color: var(--gold); }
.ks-art { height: 100%; min-height: 0; display: flex; align-items: flex-end; justify-content: center; overflow: visible; }
.ks-art .art-explorer { height: 88%; width: auto; filter: drop-shadow(0 4px 4px #0008); }
.kid-slot b { font-size: 1.2rem; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kid-slot small { color: var(--gold); font-weight: 800; }
.ks-go { margin-top: 4px; background: var(--gold); color: #3b2300; border-radius: 999px; padding: 4px 16px; font-weight: 800; }
.ks-reset { background: none; border: 0; color: #fffc; font-weight: 700; font-size: .8rem; cursor: pointer; text-shadow: 0 1px 2px #000; }
.kid-slot.empty { grid-template-rows: 1fr auto; align-items: center; border-style: dashed; height: min(400px, 56vh); }
.ks-plus { font-size: 5rem; font-weight: 300; line-height: 1; color: #fff; opacity: .9; }
@media (max-width: 600px) {
  .kid-slots { gap: 8px; }
  .kid-slot, .kid-slot.empty { height: 300px; }
  .kid-slot b { font-size: .95rem; } .ks-go { padding: 3px 10px; font-size: .85rem; } .ks-plus { font-size: 3.4rem; }
  .kid-slot.empty b { font-size: .8rem; text-align: center; white-space: normal; }
}
.kid-slot .ks-play.on { border-color: var(--gold); box-shadow: 0 0 18px #ffd43b; }
/* the wooden gear panels */
.gpanel { position: relative; width: 100%; max-width: 760px; margin: 6px auto; background: center / 100% 100% no-repeat; }
.gp-title { position: absolute; display: grid; place-items: center; color: #ffe8a3; font-weight: 800; font-size: clamp(.95rem, 2.4vw, 1.35rem); letter-spacing: .03em; text-shadow: 0 2px 2px #000; }
.gp-slots { position: absolute; display: grid; }
.gpanel .item.tile, .gpanel .gp-empty { aspect-ratio: auto; height: 100%; min-width: 0; margin: 0; border: 0; border-radius: 8%; background: none !important; box-shadow: none; padding: 6% 3% 5%; color: #f6e7c1; text-shadow: 0 1px 2px #000; }
.gpanel .item.tile .it-pic img { max-height: 100%; max-width: 92%; }
.gpanel.tall .item.tile .it-pic img { max-width: 96%; }
.gpanel .item.tile .it-name { font-size: clamp(.5rem, 1.25vw, .72rem); line-height: 1.05; }
.gpanel .item.tile.on { background: radial-gradient(circle, rgba(255, 212, 59, .35), rgba(255, 212, 59, .08) 70%) !important; box-shadow: inset 0 0 0 3px #ffd43b, 0 0 12px #ffd43b; color: #fff3bf; }
.gpanel .item.tile:not(.locked):hover { background: rgba(255, 255, 255, .08) !important; }
.gpanel .item.tile.locked .it-pic { font-size: clamp(1rem, 3vw, 1.6rem); opacity: .55; } .gpanel .item.tile.locked .it-name { opacity: .5; }
.wardrobe .gpanel { max-width: 640px; }
/* short panels: picture and one line of name both fit inside the slot */
.gpanel:not(.tall) .item.tile { grid-template-rows: minmax(0, 1fr) auto; padding: 5% 3% 4%; overflow: hidden; }
.gpanel:not(.tall) .item.tile .it-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; font-size: clamp(.45rem, 1.05vw, .62rem); }
.gpanel:not(.tall) .item.tile .it-pic i { font-size: clamp(1rem, 2.6vw, 1.6rem); }
/* shelf: pictures only; the piece you tap pops up bigger with its name */
.gpanel .item.tile .it-name { display: none; }
.gpanel .item.tile { grid-template-rows: 1fr !important; position: relative; overflow: visible !important; }
.gpanel .item.tile.picked { z-index: 5; animation: tile-pop 1.8s ease-out forwards; }
.gpanel .item.tile.picked .it-name { display: block; position: absolute; left: 50%; bottom: 100%; transform: translate(-50%, -4px); white-space: nowrap; max-width: none; overflow: visible;
  background: #fffef5; color: #3b2300; text-shadow: none; border: 2px solid #e0a800; border-radius: 999px; padding: 2px 10px; font-size: .8rem; box-shadow: 0 3px 8px #0006; animation: name-pop 1.8s ease-out forwards; }
@keyframes tile-pop { 0% { transform: scale(1); } 20% { transform: scale(1.45); } 75% { transform: scale(1.35); } 100% { transform: scale(1); } }
@keyframes name-pop { 0%, 80% { opacity: 1; } 100% { opacity: 0; } }
.star.waiting { opacity: 0; }
.gpanel.tall .item.tile .it-pic i { font-size: clamp(1.6rem, 4vw, 2.6rem); }
/* the gear window: an old leather-bound adventure book */
.wardrobe .ovl-card {
  background:
    radial-gradient(ellipse at 50% 40%, rgba(255, 220, 160, .18), transparent 65%),
    repeating-linear-gradient(35deg, rgba(0,0,0,.035) 0 2px, transparent 2px 7px),
    linear-gradient(160deg, #a8703d 0%, #8a5527 45%, #6e4019 100%);
  border: 6px solid #4a2a10; outline: 2px dashed #e0b77a; outline-offset: -14px;
  box-shadow: inset 0 0 40px rgba(40, 18, 4, .65), 0 14px 40px #000a; color: #fff3dc;
}
.wardrobe .wr-title { color: #ffe8a3; text-shadow: 0 2px 3px #3b1d08; font-size: 1.5rem; }
.wardrobe .wr-preview { background: radial-gradient(ellipse at 50% 85%, #fff3c4, #f3dfb6 55%, #d9b98a 100%); border: 4px solid #4a2a10; box-shadow: inset 0 0 18px rgba(74, 42, 16, .45); }
.wardrobe .ovl-note { color: #fde7c2; text-shadow: 0 1px 2px #3b1d08; }
@media (max-width: 759px) { .wardrobe .wr-foot { background: #7a4a20; box-shadow: 0 -6px 12px #7a4a20; } }
/* 2 x 2 picture puzzle */
.pz-board { grid-template-columns: repeat(2, 1fr); gap: 4px; }
.pz-tile { background-size: 200% 200%; }
/* bigger answer screen for the monster blasters: bigger field, monsters, and answer labels */
.scr.battle .scr-body { max-width: 1250px; }
.scr.battle .battle-grid { grid-template-columns: 150px 1fr; }
.mg-field.blaster { height: min(520px, 62vh); }
.bl-foe img { height: clamp(90px, 13vh, 130px); }
.bl-foe b { font-size: clamp(1rem, 2.2vw, 1.3rem); padding: 4px 14px; border-width: 4px; }
.mg-field.zap.facts { height: min(560px, 66vh); }
.mg-field.zap.facts .bl-foe img { height: clamp(70px, 10vh, 100px); }
.mg-field.zap.facts .bl-foe b { font-size: clamp(.9rem, 1.9vw, 1.15rem); padding: 3px 10px; }
.bl-cannon { width: 64px; height: 64px; margin-left: -32px; font-size: 2.2rem; }
@media (max-width: 600px) {
  .mg-field.blaster { height: 60vh; }
  .bl-foe b { font-size: .9rem; padding: 3px 8px; }
  .mg-field.zap.facts .bl-foe b { font-size: .78rem; }
}
/* parent sign-in */
.parent-ovl .ovl-card { width: min(440px, 94vw); }
.pa-tabs { display: flex; gap: 6px; justify-content: center; margin: 8px 0; }
.pa-tabs button { flex: 1; padding: 8px; border-radius: 12px; border: 2px solid #c5b6ff; background: #fff; color: var(--ink); font-weight: 800; cursor: pointer; }
.pa-tabs button.on { background: #5f3dc4; border-color: #5f3dc4; color: #fff; }
.pa-form { display: grid; gap: 8px; }
.pa-form input { font: inherit; font-size: 1.05rem; padding: 10px 12px; border-radius: 12px; border: 2px solid #c5b6ff; }
.pa-msg { min-height: 1.2em; margin: 0; font-weight: 700; color: #2f9e44; font-size: .9rem; } .pa-msg.bad { color: #e03131; }
.pa-link { background: none; border: 0; color: #5f3dc4; text-decoration: underline; cursor: pointer; font-weight: 700; }
/* the opening story: a bigger map */
.story .sky { width: min(920px, 96vw); }
.story .sky svg { max-height: 50vh; }
.story .story-cast .art-explorer { width: 110px; } .story .story-cast .art-dog { width: 88px; }
/* parent sign-in: bigger words */
.parent-ovl h2 { font-size: 1.6rem; }
.parent-ovl p { font-size: 1.05rem; } .parent-ovl .ovl-note { font-size: 1rem; }
.pa-tabs button { font-size: 1.05rem; padding: 11px; }
.pa-form input { font-size: 1.15rem; padding: 12px 14px; }
.pa-msg { font-size: 1rem; } .pa-link { font-size: 1rem; }
/* picking cards to print */
.my-cards.printing .cg.on { position: relative; opacity: .55; transition: opacity .15s; }
.my-cards.printing .cg.on.picked { opacity: 1; outline: 4px solid var(--gold); outline-offset: 2px; }
.pick-mark { position: absolute; top: 6px; right: 6px; z-index: 3; width: 30px; height: 30px; border-radius: 50%; background: var(--gold); color: #3b2300; font-weight: 900; display: grid; place-items: center; box-shadow: 0 2px 6px #0006; }
.cg:not(.picked) .pick-mark { background: #fff; border: 2px solid #999; }
@media print { @page { size: letter; margin: 0.5in; } .print-pair { gap: 0; margin-bottom: 0.35in; } }
/* state card front: the explorer on the left, a bigger map on the right */
.scard.front.big-hero { grid-template-columns: 40% 1fr; }
.big-hero .sc-hero { justify-content: flex-start; }
.big-hero .sc-hero .art-explorer { margin-left: -6%; }
.big-hero .sc-side { padding: 8px 8px 6px 4px; }
.big-hero .sc-map svg { max-height: 150px; }
.card-map .zoom-box { fill: none; stroke: #e03131; stroke-width: 5; }
.map-two { display: grid; grid-template-rows: 44% 1fr; gap: 3px; width: 100%; height: 100%; }
.map-two svg { width: 100%; height: 100%; max-height: none !important; }
.map-two svg.zoom { border: 2px solid #e03131; border-radius: 6px; background: #f1f8ff; }
.card-map.zoom .st { vector-effect: non-scaling-stroke; stroke-width: 1; }
.card-map.zoom .st.target { stroke-width: 2.2; }
.big-hero .sc-map:has(.map-two) { display: block; overflow: hidden; }
.map-two { height: 100%; max-height: 150px; }
.big-hero .sc-side { overflow: hidden; }
.card-map .st.gone { display: none; }
/* card back: the facts sit a little in from the left edge */
.scard.back dl { padding: 0 6px 0 22px; }
/* card front, round 2: explorer centered in its column (cape and sword both fit), whole U.S. map fully shown */
.scard.front.big-hero { grid-template-columns: 43% 1fr; }
.big-hero .sc-hero { justify-content: center; }
.big-hero .sc-hero .art-explorer { margin-left: 0; height: 80%; }
.big-hero .sc-side { display: grid; grid-template-rows: auto 1fr auto; gap: 2px; }
.big-hero .sc-map { min-height: 0; overflow: hidden; }
.map-two { height: 100%; max-height: none; grid-template-rows: 1fr 1fr; gap: 4px; }
.map-two svg { display: block; min-height: 0; }
.big-hero .sc-map .map-two svg { width: 100%; height: 100%; max-height: none; }
.big-hero .sc-hero .art-explorer { margin-top: 15%; height: 78%; }
/* stand the explorer on the bottom of the card, so tall hats have room on top */
.big-hero .sc-hero { align-items: flex-end; }
.big-hero .sc-hero .art-explorer { margin: 0 0 3%; height: 78%; }
/* Terms / Privacy links on the Tap to Start screen */
.tap-start .ts-legal { position: absolute; bottom: 14px; left: 0; right: 0; margin: 0; text-align: center; font-size: .9rem; }
.tap-start .ts-legal a { color: #fff; opacity: .85; }
.del-list { text-align: left; margin: 6px auto 10px; max-width: 30em; padding-left: 1.2em; }
.del-list li { margin: 4px 0; }
/* phones: My State Cards thumbnails shrink around their middle (the phone rule above pins cards to
   the top, which pushed the thumbnail out of its box), and a bit smaller to fit 3 across */
@media (max-width: 720px) { .card-grid .cg.on .scard { transform-origin: 50% 50%; transform: translate(-50%, -50%) scale(.32); } }
/* printed card backs: a little smaller so two-line answers still fit inside the card */
@media print { .print-pair .scard.back .sc-flag { height: 44px; margin-bottom: 4px; } .print-pair .scard.back dl { font-size: .84rem; line-height: 1.2; gap: 1px 10px; } }