/* Kings Arcade — a Wraith Labs Studios product.
   Storybook cartoon theme. Local fonts only; no network requests; all art is original SVG/CSS/canvas. */
@font-face{font-family:"Source Sans 3";font-style:normal;font-weight:400;font-display:swap;src:url(../assets/fonts/source-sans-3-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Source Sans 3";font-style:normal;font-weight:600;font-display:swap;src:url(../assets/fonts/source-sans-3-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Newsreader";font-style:normal;font-weight:600;font-display:swap;src:url(../assets/fonts/newsreader-latin-600-normal.woff2) format("woff2")}

/* ---------- Tokens: studio colors, warmed for a gentle storybook world ---------- */
:root{
  color-scheme:dark;
  /* Twilight storybook (default) */
  --bg:#131834; --bg-elev:#1d2350; --bg-sunk:#171c40; --chip:#272e5e;
  --text:#fbf6ec; --muted:#cfd1ea; --line:#39417a; --line-strong:#5059a0;
  --ink:#0b0e24; --ink-soft:rgba(6,8,24,.55);
  --accent:#5eead4; --accent-ink:#06221c; --accent-hover:#8ff6e4; --focus:#ffd36e;
  --sun:#ffd36e; --sun-ink:#3b2a00; --peach:#ffb38a; --rose:#ff9fb6; --grape:#b9a6ff; --leaf:#93dd8c; --sea:#7cc6ff;
  --font-serif:"Newsreader","Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --font-sans:"Source Sans 3","Segoe UI",sans-serif;
  /* Long scripture passages use the studio serif fallbacks (Newsreader is bundled at weight 600 only, for headings). */
  --font-verse:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --tint:rgba(94,234,212,.10); --tint-strong:rgba(94,234,212,.20);
  --warm:#ffb38a; --warm-bg:rgba(255,179,138,.16); --sky:#9ccfff; --sky-bg:rgba(124,198,255,.16); --olive:#b9e08a; --olive-bg:rgba(185,224,138,.16);
  --ok:#7cf0b0; --ok-bg:rgba(124,240,176,.16); --bad:#ffa09a; --bad-bg:rgba(255,160,154,.16);
  --radius:24px; --pop:0 6px 0 var(--ink); --shadow:0 6px 0 var(--ink),0 18px 34px rgba(0,0,0,.28);
  --page-sky:radial-gradient(1200px 520px at 80% -10%,rgba(255,211,110,.16),transparent 60%),radial-gradient(900px 480px at 0% 10%,rgba(185,166,255,.18),transparent 60%),linear-gradient(180deg,#151a3a 0%,#1a1f47 45%,#131834 100%);
  --cloud:rgba(255,255,255,.06); --star:#fff4c8;
}
:root[data-theme=light]{
  color-scheme:light;
  /* Sunny meadow */
  --bg:#fff6e6; --bg-elev:#ffffff; --bg-sunk:#fff2db; --chip:#ffeccb;
  --text:#2b2142; --muted:#544a6c; --line:#efd6ae; --line-strong:#ddb47a;
  --ink:#3b2b52; --ink-soft:rgba(59,43,82,.35);
  --accent:#0a5c4f; --accent-ink:#f4fffc; --accent-hover:#084e43; --focus:#0a5c4f;
  --sun:#ffc93c; --sun-ink:#3b2a00; --peach:#ff9a6b; --rose:#f37d9b; --grape:#8f78f0; --leaf:#4fae55; --sea:#3a95e0;
  --tint:rgba(10,92,79,.07); --tint-strong:rgba(10,92,79,.14);
  --warm:#a0462c; --warm-bg:rgba(255,154,107,.2); --sky:#245f93; --sky-bg:rgba(58,149,224,.16); --olive:#3f6a1f; --olive-bg:rgba(79,174,85,.18);
  --ok:#1f7a45; --ok-bg:rgba(31,122,69,.12); --bad:#b3372c; --bad-bg:rgba(179,55,44,.1);
  --pop:0 6px 0 var(--ink); --shadow:0 6px 0 var(--ink),0 16px 28px rgba(59,43,82,.14);
  --page-sky:radial-gradient(900px 420px at 85% -5%,rgba(255,201,60,.35),transparent 60%),linear-gradient(180deg,#bfe6ff 0%,#e3f4ff 26%,#fff6e6 60%,#fff6e6 100%);
  --cloud:rgba(255,255,255,.92); --star:#ffffff;
}

*,*:before,*:after{box-sizing:border-box}
html{background:var(--bg)}
html,body{margin:0;padding:0}
body{font-family:var(--font-sans);color:var(--text);background:var(--page-sky);background-attachment:fixed;line-height:1.55;font-size:1.0625rem;min-height:100vh;display:flex;flex-direction:column;text-rendering:optimizeLegibility;overflow-x:hidden;position:relative}
body > header,body > main,body > footer{position:relative;z-index:1}
h1,h2,h3{font-family:var(--font-serif);font-weight:600;letter-spacing:-.01em}
a{color:var(--accent);text-underline-offset:3px}
a:hover{color:var(--accent-hover)}
a:focus-visible,button:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.wrap{width:100%;max-width:1100px;margin:0 auto;padding:0 20px}
.logo-mark{color:var(--text);flex:none}
.hidden{display:none !important}

/* ---------- Floating sky: soft clouds and twinkles (decorative) ---------- */
.sky{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.sky .cloud{position:absolute;width:160px;height:46px;border-radius:999px;background:var(--cloud);filter:blur(.3px);animation:drift 70s linear infinite}
.sky .cloud:before,.sky .cloud:after{content:"";position:absolute;background:inherit;border-radius:50%}
.sky .cloud:before{width:70px;height:70px;left:24px;top:-34px}
.sky .cloud:after{width:52px;height:52px;left:82px;top:-22px}
.sky .c1{top:12%;left:-200px;animation-duration:80s}
.sky .c2{top:34%;left:-200px;transform:scale(.7);animation-duration:110s;animation-delay:-40s}
.sky .c3{top:62%;left:-200px;transform:scale(1.15);animation-duration:95s;animation-delay:-70s;opacity:.75}
.sky .c4{top:84%;left:-200px;transform:scale(.6);animation-duration:120s;animation-delay:-15s;opacity:.6}
.sky .tw{position:absolute;width:10px;height:10px;color:var(--star);animation:twinkle 3.2s ease-in-out infinite}
.sky .tw:before{content:"";position:absolute;inset:0;background:currentColor;clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%)}
.sky .t1{top:9%;left:12%}.sky .t2{top:18%;left:72%;animation-delay:-1s;transform:scale(1.4)}.sky .t3{top:46%;left:90%;animation-delay:-2s}
.sky .t4{top:70%;left:6%;animation-delay:-.6s;transform:scale(1.2)}.sky .t5{top:28%;left:40%;animation-delay:-2.4s;transform:scale(.8)}.sky .t6{top:88%;left:60%;animation-delay:-1.6s}
:root[data-theme=light] .sky .tw{color:#ffd36e}
@keyframes drift{from{translate:0 0}to{translate:calc(100vw + 420px) 0}}
@keyframes twinkle{0%,100%{opacity:.25;scale:.7}50%{opacity:1;scale:1.15}}

/* ---------- Header ---------- */
.site-header{background:var(--bg);background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:3px solid var(--ink);position:sticky;top:0;z-index:20}
.header-bar{display:flex;align-items:center;justify-content:space-between;gap:10px 16px;min-height:72px;flex-wrap:wrap;padding-top:6px;padding-bottom:6px}
.product{display:flex;align-items:center;gap:12px;min-width:0}
.brand{display:inline-flex;align-items:center;gap:.7rem;color:var(--text);text-decoration:none;min-height:44px}
.brand:hover{color:var(--text)}
.site-header .brand .logo-mark{transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.site-header .brand:hover .logo-mark{transform:rotate(-8deg) scale(1.08)}
.brand-lockup{display:flex;flex-direction:column;gap:.18rem}
.brand-name{font-family:var(--font-serif);font-weight:600;letter-spacing:-.01em;font-size:1.35rem;line-height:1}
.brand-sub{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:600;line-height:1.2}
.brand-sub a{color:var(--muted);text-decoration:none}
.brand-sub a:hover{color:var(--accent)}
.header-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.back{color:var(--text);text-decoration:none;font-weight:600;font-size:.95rem;padding:8px 16px;border:3px solid var(--ink);background:var(--bg-elev);border-radius:999px;min-height:44px;display:inline-flex;align-items:center;box-shadow:0 4px 0 var(--ink);transition:transform .12s,box-shadow .12s}
.back:hover{color:var(--accent);transform:translateY(-2px);box-shadow:0 6px 0 var(--ink)}
.back:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}
.theme-switch{display:inline-flex;align-items:center;border:3px solid var(--ink);background:var(--bg-elev);border-radius:999px;padding:.18rem;box-shadow:0 4px 0 var(--ink)}
.theme-switch button{min-width:3.9rem;min-height:36px;color:var(--text);font:inherit;font-size:.9rem;font-weight:600;cursor:pointer;background:none;border:0;border-radius:999px;padding:.2rem .8rem;transition:background .2s}
.theme-switch button[aria-pressed=true]{background:var(--accent);color:var(--accent-ink)}

/* ---------- Hero ---------- */
.hero{padding:40px 0 10px;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:24px;align-items:center;animation:enter .6s ease-out both}
.kicker{display:inline-block;color:var(--sun-ink);background:var(--sun);border:3px solid var(--ink);box-shadow:0 4px 0 var(--ink);border-radius:999px;letter-spacing:.1em;text-transform:uppercase;font-size:.76rem;font-weight:600;margin:0 0 16px;padding:5px 14px;transform:rotate(-1.5deg)}
.hero h1{font-size:clamp(2.3rem,5.6vw,3.8rem);line-height:1.04;margin:0 0 14px;text-shadow:0 4px 0 var(--ink-soft)}
.hero h1 .h1-accent{color:var(--accent);display:inline-block;animation:wiggle 5s ease-in-out infinite}
.hero p.lede{max-width:600px;font-size:1.12rem;color:var(--muted);margin:0}
.hero blockquote{margin:22px 0 0;max-width:600px;font-family:var(--font-verse);font-size:1.1rem;color:var(--text);background:var(--bg-elev);border:3px solid var(--ink);box-shadow:var(--pop);border-radius:20px;padding:14px 18px;position:relative}
.hero blockquote:before{content:"";position:absolute;left:28px;bottom:-14px;width:20px;height:20px;background:var(--bg-elev);border-right:3px solid var(--ink);border-bottom:3px solid var(--ink);transform:rotate(45deg) skew(8deg,8deg)}
.hero blockquote cite{display:block;font-family:var(--font-sans);font-style:normal;font-size:.85rem;color:var(--accent);font-weight:600;margin-top:6px}
.hero-art{position:relative}
.hero-art svg{width:100%;height:auto;display:block;border-radius:28px;border:3px solid var(--ink);box-shadow:var(--shadow);background:#ffe9b8}
@keyframes enter{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes wiggle{0%,90%,100%{transform:rotate(0)}93%{transform:rotate(-3deg)}96%{transform:rotate(3deg)}}

/* SVG character motion helpers (used in hero, tiles and game scenes) */
.bob{animation:bob 3.4s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 100%}
.bob.d1{animation-delay:-1.1s}.bob.d2{animation-delay:-2.2s}
.blink{animation:blink 4.6s infinite;transform-box:fill-box;transform-origin:center}
.blink.d1{animation-delay:-1.7s}.blink.d2{animation-delay:-3s}
.sway{animation:sway 4s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 100%}
.flicker{animation:flicker 1.6s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 100%}
.glow{animation:glow 3s ease-in-out infinite}
.floaty{animation:floaty 5s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.floaty.d1{animation-delay:-1.6s}.floaty.d2{animation-delay:-3.2s}
.spark{animation:twinkle 2.6s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.spark.d1{animation-delay:-.9s}.spark.d2{animation-delay:-1.8s}
.rock{animation:rock 4.5s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 80%}
.wave{animation:wave 3.5s ease-in-out infinite}
.wave.d1{animation-delay:-1.2s}
.rain line{animation:rain 1.1s linear infinite}
.rain line:nth-child(2n){animation-delay:-.4s}.rain line:nth-child(3n){animation-delay:-.75s}
.fly{animation:fly 7s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes blink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}}
@keyframes sway{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg)}}
@keyframes flicker{0%,100%{transform:scale(1,1)}30%{transform:scale(.92,1.08)}60%{transform:scale(1.06,.94)}}
@keyframes glow{0%,100%{opacity:.55}50%{opacity:.95}}
@keyframes floaty{0%,100%{transform:translate(0,0)}50%{transform:translate(0,-7px)}}
@keyframes rock{0%,100%{transform:rotate(-2.5deg)}50%{transform:rotate(2.5deg)}}
@keyframes wave{0%,100%{transform:translateX(0)}50%{transform:translateX(-14px)}}
@keyframes rain{from{transform:translateY(-30px);opacity:0}20%{opacity:.9}to{transform:translateY(60px);opacity:0}}
@keyframes fly{0%,100%{transform:translate(0,0) rotate(-3deg)}50%{transform:translate(-30px,-8px) rotate(3deg)}}

/* ---------- Filters ---------- */
.filters{display:flex;flex-wrap:wrap;gap:10px;margin:30px 0 22px}
.chip{font:inherit;font-size:.95rem;font-weight:600;padding:7px 16px;min-height:42px;border-radius:999px;border:3px solid var(--ink);background:var(--bg-elev);color:var(--text);cursor:pointer;box-shadow:0 4px 0 var(--ink);transition:transform .12s,box-shadow .12s,background .2s}
.chip:hover{transform:translateY(-2px);box-shadow:0 6px 0 var(--ink)}
.chip:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}
.chip[aria-pressed="true"]{background:var(--sun);color:var(--sun-ink)}

/* ---------- Game cards (home tiles) ---------- */
ul.grid{list-style:none;margin:0;padding:0 0 56px;display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:24px}
ul.grid li{display:flex;animation:enter .55s ease-out both}
ul.grid li:nth-child(2){animation-delay:.07s}ul.grid li:nth-child(3){animation-delay:.14s}ul.grid li:nth-child(4){animation-delay:.21s}ul.grid li:nth-child(5){animation-delay:.28s}
.tile{flex:1;display:flex;flex-direction:column;background:var(--bg-elev);border:3px solid var(--ink);border-radius:var(--radius);overflow:hidden;text-decoration:none;color:inherit;box-shadow:var(--shadow);transition:transform .25s cubic-bezier(.34,1.56,.64,1),box-shadow .2s}
.tile:hover{transform:translateY(-7px) rotate(-1deg);box-shadow:0 12px 0 var(--ink),0 22px 36px rgba(0,0,0,.25);color:inherit}
ul.grid li:nth-child(even) .tile:hover{transform:translateY(-7px) rotate(1deg)}
.tile:active{transform:translateY(3px) !important;box-shadow:0 2px 0 var(--ink)}
.tile .art{height:150px;display:flex;align-items:center;justify-content:center;border-bottom:3px solid var(--ink);position:relative;overflow:hidden}
.tile .art svg{width:100%;height:100%;display:block}
.tile:hover .art svg{animation:hop .6s cubic-bezier(.34,1.56,.64,1)}
@keyframes hop{0%{transform:translateY(0)}40%{transform:translateY(-6px) scale(1.03)}100%{transform:none}}
.tile .body{padding:14px 18px 18px;display:flex;flex-direction:column;gap:6px;flex:1}
.tile h2{font-size:1.38rem;margin:0}
.tile p{margin:0;color:var(--muted);font-size:.98rem;flex:1}
.tile .play{align-self:flex-start;margin-top:8px;font-weight:600;font-size:.9rem;padding:4px 14px;border-radius:999px;border:3px solid var(--ink);background:var(--accent);color:var(--accent-ink);box-shadow:0 3px 0 var(--ink)}
.tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.tag{font-size:.72rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:3px 9px;border-radius:999px;background:var(--chip);color:var(--muted)}
.tag.ot{background:var(--warm-bg);color:var(--warm)}
.tag.nt{background:var(--sky-bg);color:var(--sky)}
.tag.skill{background:var(--olive-bg);color:var(--olive)}
.tile .best{font-size:.85rem;color:var(--accent);font-weight:600}
.art.a1{background:linear-gradient(180deg,#3b2f6b,#6b4fa0)}
.art.a2{background:linear-gradient(180deg,#ffd9a0,#ffb27a)}
.art.a3{background:linear-gradient(180deg,#bfe3ff,#ffe6b0)}
.art.a4{background:linear-gradient(180deg,#9fd4ff,#d9f0ff)}
.art.a5{background:linear-gradient(180deg,#bfe6ff,#fff0c4)}
.empty{grid-column:1/-1;color:var(--muted)}

/* ---------- Footer ---------- */
.site-footer{margin-top:auto;border-top:3px solid var(--ink);background:var(--bg);background:color-mix(in srgb,var(--bg) 88%,transparent);padding:26px 0 30px;font-size:.95rem;color:var(--muted)}
.footer-grid{display:flex;flex-wrap:wrap;gap:18px 40px;justify-content:space-between;align-items:flex-start}
.footer-grid p{margin:6px 0 0;max-width:520px}
.fineprint{font-size:.85rem}

/* ---------- Game layout ---------- */
.game{padding-top:26px;padding-bottom:56px}
.game-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:16px;animation:enter .5s ease-out both}
.game-head h1{font-size:clamp(1.9rem,4.5vw,2.8rem);margin:0;line-height:1.1;text-shadow:0 3px 0 var(--ink-soft)}
.game-head p{margin:6px 0 0;color:var(--muted)}
.scorebar{display:flex;gap:10px;flex-wrap:wrap}
.stat{background:var(--bg-elev);border:3px solid var(--ink);border-radius:16px;padding:5px 14px;text-align:center;min-width:80px;box-shadow:0 4px 0 var(--ink)}
.stat:nth-child(1){background:color-mix(in srgb,var(--sun) 26%,var(--bg-elev))}
.stat:nth-child(2){background:color-mix(in srgb,var(--sea) 22%,var(--bg-elev))}
.stat:nth-child(3){background:color-mix(in srgb,var(--rose) 22%,var(--bg-elev))}
.stat:nth-child(4){background:color-mix(in srgb,var(--leaf) 22%,var(--bg-elev))}
.stat b{display:block;font-size:1.35rem;line-height:1.2;font-weight:600}
.stat span{font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);font-weight:600}
.panel{background:var(--bg-elev);border:3px solid var(--ink);border-radius:var(--radius);box-shadow:var(--shadow);padding:24px;animation:enter .45s ease-out both}
.panel + .panel,.panel + section,.scene + .panel,.scene + section,#intro + .panel{margin-top:18px}
.panel h2{margin:0;font-size:1.6rem}
.center{text-align:center}
.muted{color:var(--muted)}
.small{font-size:.9rem}

/* Story scene banner on each game page */
.scene{margin:0 0 18px;border:3px solid var(--ink);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);animation:enter .5s .05s ease-out both;line-height:0}
.scene svg{width:100%;height:auto;aspect-ratio:6/1;min-height:130px;display:block}

/* Buttons: chunky cartoon press */
.btn{font:inherit;font-weight:600;font-size:1rem;padding:9px 20px;min-height:46px;border-radius:999px;border:3px solid var(--ink);background:var(--bg-elev);color:var(--text);cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:8px;justify-content:center;box-shadow:0 5px 0 var(--ink);transition:transform .12s,box-shadow .12s,background .2s;user-select:none;-webkit-user-select:none}
.btn:hover{color:var(--text);transform:translateY(-2px);box-shadow:0 7px 0 var(--ink)}
.btn:active:not(:disabled){transform:translateY(4px);box-shadow:0 1px 0 var(--ink)}
.btn.primary,.btn.gold{background:var(--sun);color:var(--sun-ink)}
.btn.primary:hover,.btn.gold:hover{background:color-mix(in srgb,var(--sun) 85%,#fff);color:var(--sun-ink)}
.btn.ghost{background:var(--bg-elev)}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:0 3px 0 var(--ink)}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.row.center{justify-content:center}

/* ---------- Quiz ---------- */
.choices{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin-top:18px}
.choice{font:inherit;text-align:left;padding:12px 14px;border-radius:18px;border:3px solid var(--ink);background:var(--bg-sunk);color:var(--text);cursor:pointer;display:flex;gap:10px;align-items:flex-start;font-size:1.02rem;box-shadow:0 4px 0 var(--ink);transition:transform .12s,box-shadow .12s,background .2s;animation:popin .4s cubic-bezier(.34,1.56,.64,1) both;position:relative}
.choice:nth-child(2){animation-delay:.05s}.choice:nth-child(3){animation-delay:.1s}.choice:nth-child(4){animation-delay:.15s}
.choice:hover:not(:disabled){background:var(--tint-strong);transform:translateY(-2px);box-shadow:0 6px 0 var(--ink)}
.choice:active:not(:disabled){transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}
.choice .key{flex:none;width:26px;height:26px;border-radius:50%;background:var(--sun);color:var(--sun-ink);border:2px solid var(--ink);font-size:.8rem;font-weight:600;display:flex;align-items:center;justify-content:center}
.choice.correct{background:var(--ok-bg);border-color:var(--ok);animation:joy .6s cubic-bezier(.34,1.56,.64,1) both}
.choice.correct .key{background:var(--ok);color:#0b2a18}
.choice.correct:after{content:"\2726";position:absolute;right:12px;top:-12px;font-size:1.4rem;color:var(--sun);text-shadow:0 2px 0 var(--ink);animation:sparkle 1.2s ease-out both}
.choice.wrong{background:var(--bad-bg);border-color:var(--bad);animation:wobble .5s ease both}
.choice:disabled{cursor:default}
@keyframes popin{from{opacity:0;transform:scale(.85) translateY(8px)}to{opacity:1;transform:none}}
@keyframes joy{0%{transform:scale(1)}35%{transform:scale(1.06) rotate(-1deg)}65%{transform:scale(.98) rotate(1deg)}100%{transform:scale(1)}}
@keyframes wobble{20%{transform:translateX(-6px) rotate(-1deg)}40%{transform:translateX(5px) rotate(1deg)}60%{transform:translateX(-3px)}80%{transform:translateX(2px)}}
@keyframes sparkle{0%{opacity:0;transform:scale(.2) rotate(0)}40%{opacity:1;transform:scale(1.3) rotate(90deg)}100%{opacity:.9;transform:scale(1) rotate(180deg)}}

.qtype{display:inline-block;font-size:.76rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);background:var(--tint);border-radius:999px;padding:3px 12px}
.prompt{font-family:var(--font-verse);font-size:clamp(1.25rem,2.6vw,1.55rem);line-height:1.45;margin:10px 0 0}
.verse{font-family:var(--font-verse);font-size:1.17rem;line-height:1.65;margin:0}
.verse-card{position:relative;background:linear-gradient(180deg,#fff8e4,#fdecc4);color:#3a2a14;border:3px solid var(--ink);box-shadow:0 5px 0 var(--ink);padding:16px 18px 14px 46px;border-radius:18px;margin-top:16px;animation:unroll .5s cubic-bezier(.34,1.56,.64,1) both}
.verse-card:before{content:"";position:absolute;left:14px;top:16px;width:20px;height:26px;background:radial-gradient(circle at 50% 70%,#ffd36e 0 40%,transparent 42%),radial-gradient(ellipse at 50% 35%,#ff9f43 0 30%,transparent 32%);animation:flicker 1.6s ease-in-out infinite}
.verse-card .verse{color:#3a2a14}
.verse-card .ref{color:#8a4b12}
@keyframes unroll{from{opacity:0;transform:scaleY(.6) translateY(-6px)}to{opacity:1;transform:none}}
.ref{display:block;font-family:var(--font-sans);font-weight:600;font-size:.88rem;color:var(--accent);margin-top:6px}
.feedback{font-weight:600;margin-top:16px;font-size:1.08rem;animation:popin .4s cubic-bezier(.34,1.56,.64,1) both}
.feedback.ok{color:var(--ok)} .feedback.no{color:var(--bad)}
.feedback.ok:before{content:"\2605 ";color:var(--sun)}
.progress{height:14px;background:var(--chip);border:3px solid var(--ink);border-radius:999px;overflow:hidden;margin-bottom:18px}
.progress i{display:block;height:100%;width:0;transition:width .45s cubic-bezier(.34,1.56,.64,1);background:repeating-linear-gradient(-45deg,var(--accent) 0 10px,color-mix(in srgb,var(--accent) 70%,#fff) 10px 20px)}

.mode-pick{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin-top:16px}
.mode{font:inherit;padding:18px;border-radius:20px;border:3px solid var(--ink);background:var(--bg-sunk);cursor:pointer;text-align:left;color:var(--text);box-shadow:0 5px 0 var(--ink);transition:transform .2s cubic-bezier(.34,1.56,.64,1),box-shadow .15s}
.mode:nth-child(1){background:color-mix(in srgb,var(--peach) 22%,var(--bg-sunk))}
.mode:nth-child(2){background:color-mix(in srgb,var(--sea) 22%,var(--bg-sunk))}
.mode:nth-child(3){background:color-mix(in srgb,var(--grape) 22%,var(--bg-sunk))}
.mode:hover{transform:translateY(-4px) rotate(-1deg);box-shadow:0 9px 0 var(--ink)}
.mode:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}
.mode b{display:block;font-family:var(--font-serif);font-weight:600;font-size:1.25rem}
.mode span{font-size:.92rem;color:var(--muted)}

/* ---------- Verse memory ---------- */
.blank{display:inline-block;min-width:70px;border-bottom:3px dashed #b8860b;text-align:center;color:transparent;margin:0 2px}
.blank.current{background:rgba(255,211,110,.55);border-radius:6px 6px 0 0;animation:glow 1.4s ease-in-out infinite}
.blank.filled{color:#1f7a45;font-weight:600;border-bottom-style:solid;animation:popin .35s cubic-bezier(.34,1.56,.64,1)}
.wordbank{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px;justify-content:center}
.word{font:inherit;font-family:var(--font-verse);font-size:1.1rem;padding:8px 15px;min-height:46px;border-radius:14px;border:3px solid var(--ink);background:var(--bg-sunk);color:var(--text);cursor:pointer;box-shadow:0 4px 0 var(--ink);transition:transform .15s cubic-bezier(.34,1.56,.64,1),box-shadow .12s;animation:popin .35s cubic-bezier(.34,1.56,.64,1) both}
.word{background:var(--chip);border-top-width:6px}
.word:nth-child(3n+1){border-top-color:var(--sun)}
.word:nth-child(3n+2){border-top-color:var(--sea)}
.word:nth-child(3n){border-top-color:var(--rose)}
.word:hover:not(:disabled){transform:translateY(-3px) rotate(-2deg);box-shadow:0 7px 0 var(--ink)}
.word:active:not(:disabled){transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}
.word.used{visibility:hidden}
.word.shake{animation:shake .35s;border-color:var(--bad)}
@keyframes shake{20%,60%{transform:translateX(-5px) rotate(-2deg)}40%,80%{transform:translateX(5px) rotate(2deg)}}

/* ---------- Order the verse ---------- */
.built{min-height:110px;border:3px dashed #b8860b;border-radius:18px;padding:14px 16px;font-family:var(--font-verse);font-size:1.22rem;line-height:1.75;background:linear-gradient(180deg,#fff8e4,#fdecc4);color:#3a2a14}
.built .muted{color:#7a6448}
.built .w{display:inline-block;margin-right:6px;animation:place .4s cubic-bezier(.34,1.56,.64,1)}
.built .w.hinted{color:#8a4b12}
@keyframes pop{from{transform:scale(.8);opacity:.3}to{transform:none;opacity:1}}
@keyframes place{0%{transform:translateY(-14px) scale(.7);opacity:0}70%{transform:translateY(2px) scale(1.08);opacity:1}100%{transform:none}}

/* ---------- Noah's pairs ---------- */
.board{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;max-width:540px;margin:0 auto}
.card{aspect-ratio:1/1;perspective:700px;border:0;padding:0;background:none;cursor:pointer;animation:deal .45s cubic-bezier(.34,1.56,.64,1) both;border-radius:16px}
.card:nth-child(4n+2){animation-delay:.04s}.card:nth-child(4n+3){animation-delay:.08s}.card:nth-child(4n){animation-delay:.12s}
.card .in{position:relative;width:100%;height:100%;transition:transform .55s cubic-bezier(.34,1.56,.64,1);transform-style:preserve-3d}
.card:hover:not(.up):not(.done) .in{transform:translateY(-4px) rotate(-2deg)}
.card.up .in,.card.done .in{transform:rotateY(180deg)}
.card .face{position:absolute;inset:0;border-radius:16px;display:flex;align-items:center;justify-content:center;backface-visibility:hidden;-webkit-backface-visibility:hidden;border:3px solid var(--ink);box-shadow:0 4px 0 var(--ink)}
.card .back-face{background:radial-gradient(circle at 30% 25%,#ffe08a 0 12%,transparent 13%),linear-gradient(180deg,#7cc6ff 0%,#a8dcff 58%,#3a95e0 59%,#2f7fc4 100%)}
.card .back-face svg{width:78%;height:78%}
.card .front{background:linear-gradient(180deg,#fff8e4,#ffe7b8);color:#3a2a14;transform:rotateY(180deg);flex-direction:column;gap:2px}
.card .front .em{font-size:clamp(1.6rem,6vw,2.6rem);line-height:1}
.card.up .front .em{animation:boing .6s .2s cubic-bezier(.34,1.56,.64,1) both}
.card .front small{font-size:.7rem;font-weight:600;color:#6b5434;text-transform:uppercase;letter-spacing:.08em}
.card.done .front{background:linear-gradient(180deg,#e6ffe9,#b9f0c4);border-color:#1f7a45}
.card.done{animation:hooray .7s cubic-bezier(.34,1.56,.64,1)}
.card.done .front:after{content:"\2665";position:absolute;top:4px;right:8px;color:#f37d9b;font-size:1rem;animation:sparkle 1s ease-out both}
.card.miss .in{animation:nope .45s ease}
@keyframes deal{from{opacity:0;transform:translateY(-20px) rotate(-8deg) scale(.8)}to{opacity:1;transform:none}}
@keyframes boing{0%{transform:scale(.4)}60%{transform:scale(1.2)}100%{transform:scale(1)}}
@keyframes hooray{0%{transform:none}40%{transform:translateY(-10px) scale(1.06)}100%{transform:none}}
@keyframes nope{0%,100%{transform:rotateY(180deg)}25%{transform:rotateY(180deg) rotate(-5deg)}75%{transform:rotateY(180deg) rotate(5deg)}}

/* ---------- David's sling ---------- */
.stage{position:relative;width:100%;max-width:860px;margin:0 auto}
canvas#field{width:100%;height:auto;display:block;border-radius:20px;border:3px solid var(--ink);background:#bfe6ff;touch-action:none;box-shadow:0 5px 0 var(--ink)}
.controls{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:center;margin-top:16px}
.controls label{font-weight:600;font-size:.95rem;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.controls input[type=range]{width:180px;accent-color:var(--accent)}
.meter{width:200px;max-width:70vw;height:20px;border-radius:999px;background:var(--chip);overflow:hidden;border:3px solid var(--ink)}
.meter i{display:block;height:100%;width:0;background:linear-gradient(90deg,#6fd08c,#ffd36e,#ff9a6b)}
#sling{touch-action:none}
.overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(19,24,52,.55);border-radius:20px;padding:16px}
.overlay .panel{max-width:540px;width:100%;max-height:100%;overflow:auto}
.kbd{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.8rem;background:var(--chip);border:2px solid var(--line-strong);border-radius:6px;padding:1px 6px}

@keyframes spin{to{transform:rotate(360deg)}}
.hero-copy{min-width:0}

/* ---------- Small screens ---------- */
@media (max-width:760px){
  .hero{grid-template-columns:1fr;padding-top:26px}
  .hero-art{order:-1;max-width:520px}
}
@media (max-width:560px){
  .panel{padding:18px}
  .board{gap:8px}
  .card .face{border-width:2px;box-shadow:0 3px 0 var(--ink)}
  .controls input[type=range]{width:140px}
  .brand-name{font-size:1.15rem}
  .stage .overlay{position:static;background:none;padding:12px 0 0}
  .stat{min-width:68px;padding:4px 10px}
}

/* ---------- Reduced motion: keep it still and calm ---------- */
@media (prefers-reduced-motion:reduce){
  *,*:before,*:after{animation:none !important;transition:none !important;scroll-behavior:auto !important}
  .sky .cloud,.sky .tw{display:none}
}