/* Saga engine chrome — placeholder-friendly; final art replaces sprites, not this layout */
/* every game's info bar sits on a light banner so stats stay readable over any art */
.sg-hud{display:flex;align-items:center;gap:14px;justify-content:center;font:700 15px 'Sono',monospace;color:#241E33;background:rgba(255,255,255,.92);border:1px solid rgba(0,0,0,.08);border-radius:12px;padding:7px 14px;margin:0 auto 8px;max-width:1280px;box-shadow:0 3px 10px rgba(20,15,40,.15);backdrop-filter:blur(6px)}
#sg-cv{display:block;margin:0 auto;border-radius:14px;border:2px solid var(--line);max-width:100%}
#sg-card{display:none;position:fixed;inset:0;place-items:center;background:#0008;z-index:60}
.sg-cardbox{background:var(--panel,#fff);border-radius:16px;padding:22px 26px;text-align:center;display:grid;gap:10px;min-width:260px;max-width:min(92vw,440px)}
.sg-cardbox input{font:600 20px 'Sono',monospace;text-align:center;padding:8px;border:2px solid var(--honey,#F0B429);border-radius:10px;width:100%;min-width:0}
.sg-cardbox b{overflow-wrap:anywhere}
.sg-cardmean{font:600 13.5px 'Hanken',sans-serif;color:var(--muted,#7A6E5C);line-height:1.4;max-width:340px;margin:2px auto 0;text-align:center}
.sg-race-mean{font:600 13px 'Hanken',sans-serif;color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.5);text-align:center;margin-top:6px;max-width:480px}
/* Bee Grand Prix — how-to-play overlay */
.sg-howto{position:absolute;inset:0;display:grid;place-items:center;background:rgba(20,26,40,.62);backdrop-filter:blur(3px);z-index:40;border-radius:14px;padding:12px}
.sg-howto-card{background:var(--panel,#fff);border-radius:18px;padding:20px 22px;max-width:min(94vw,400px);box-shadow:0 12px 40px rgba(0,0,0,.35);text-align:left}
.sg-howto-h{font:800 22px 'Fraunces',serif;color:var(--ink,#2B2117);text-align:center}
.sg-howto-sub{font:600 13.5px 'Hanken',sans-serif;color:var(--honey-d,#B8860B);text-align:center;margin:4px 0 12px}
.sg-howto-steps{margin:0 0 14px;padding-left:20px;display:grid;gap:9px}
.sg-howto-steps li{font:500 14px 'Hanken',sans-serif;color:var(--ink,#2B2117);line-height:1.42}
.sg-howto-go{width:100%;font-size:16px;padding:12px}
.sg-pw-legend{list-style:none;margin-left:-20px;display:flex;flex-wrap:wrap;gap:5px 8px}
.sg-pw-legend span{font:600 11.5px 'Hanken',sans-serif;background:var(--surface2,#f3eee3);border-radius:99px;padding:2px 8px;color:var(--ink,#2B2117)}
/* pseudo-3D racer chrome */
.sg-race3d{position:relative;width:max-content;max-width:100%;margin:0 auto}
.sg-pwtray{position:absolute;top:8px;left:0;right:0;display:flex;gap:8px;justify-content:center;pointer-events:none;flex-wrap:wrap;padding:0 8px}
.sg-pw-next{font:800 12.5px 'Hanken',sans-serif;color:#fff;background:rgba(20,26,40,.52);border-radius:99px;padding:4px 11px;text-shadow:0 1px 2px rgba(0,0,0,.4)}
.sg-pw-on{font-size:17px;background:rgba(255,255,255,.85);border-radius:99px;padding:1px 7px;line-height:1.5}
.sg-steer{position:absolute;left:0;right:0;bottom:10px;display:flex;justify-content:space-between;padding:0 10px;pointer-events:none}
.sg-sbtn{pointer-events:auto;width:60px;height:60px;border-radius:50%;font-size:24px;background:rgba(255,255,255,.82);color:#2B2117;border:2px solid rgba(0,0,0,.12);box-shadow:0 3px 10px rgba(0,0,0,.25);touch-action:none;user-select:none}
.sg-sbtn:active{background:var(--honey,#F0B429);transform:scale(.94)}
.sg-cardw{font-size:26px}
.sg-hivestage{position:relative;border-radius:16px;overflow:hidden;padding:20px 10px;margin:12px auto;max-width:820px}
.sg-hive-bg{position:absolute;inset:0;z-index:0}
.sg-hive-bg .sg-plate{width:100%;height:100%;object-fit:cover;filter:brightness(.86)}
.sg-bigword{position:relative;z-index:1;display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin:0}
.sg-tile{font:600 24px 'Sono',monospace;background:var(--hexfill,#F6E7BF);border:2px solid var(--honey,#F0B429);border-radius:10px;padding:6px 10px;box-shadow:0 3px 8px rgba(0,0,0,.3)}
#sg-hi{display:block;margin:0 auto;font:600 18px 'Sono',monospace;text-align:center;padding:9px;border:2px solid var(--honey,#F0B429);border-radius:12px;width:min(90%,340px)}
.sg-found{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;margin-top:12px;max-width:640px;margin-inline:auto}
.sg-fw{font:600 13px 'Sono',monospace;background:var(--tint,#FAF4E4);border:1px solid var(--line,#EADFC8);border-radius:999px;padding:3px 10px}
.sg-race-word{position:sticky;bottom:8px;text-align:center;font:600 16px 'Sono',monospace;background:var(--panel,#fff);border:2px solid var(--honey,#F0B429);border-radius:12px;padding:8px;margin:8px auto 0;width:min(94%,420px)}
.sg-target{display:flex;gap:5px;justify-content:center;margin:10px 0;flex-wrap:wrap;max-width:100%}
.sg-tl{font:600 22px 'Sono',monospace;border-bottom:3px solid var(--line,#EADFC8);min-width:22px;text-align:center}
.sg-tl.done{color:var(--honey,#F0B429);border-color:var(--honey,#F0B429)}
.sg-tl.next{border-color:var(--deep,#4A32A8)}
.sg-mothstage{position:relative;border-radius:16px;overflow:hidden;padding:16px;max-width:760px;margin:0 auto}
.sg-moth-bg{position:absolute;inset:0;z-index:0}
.sg-moth-bg .sg-plate{width:100%;height:100%;object-fit:cover;filter:saturate(.8) brightness(.9)}
.sg-molegrid{position:relative;z-index:1;display:grid;grid-template-columns:repeat(4,1fr);gap:12px;max-width:680px;margin:0 auto}
.sg-cell{aspect-ratio:1;border-radius:16px;background:rgba(255,247,226,.55);border:2px solid rgba(240,180,41,.65);font-size:20px;cursor:pointer;position:relative;display:grid;place-items:center;backdrop-filter:blur(2px)}
.sg-cell:empty{background:rgba(255,247,226,.14);border-style:dashed}
.sg-moth{display:grid;place-items:center;width:100%;height:100%}
.sg-mothimg{width:74%;height:74%;filter:drop-shadow(0 3px 5px rgba(0,0,0,.3))}
.sg-moth b{position:absolute;inset:auto 0 4px;font:800 16px 'Sono',monospace;color:#2B2117;text-shadow:0 1px 2px rgba(255,255,255,.8)}
.sg-moth.gold{filter:drop-shadow(0 0 8px gold)}
.sg-boss{position:relative;display:grid;gap:14px;justify-items:center;padding:18px 10px;border-radius:16px;overflow:hidden;min-height:300px}
.sg-boss-bg{position:absolute;inset:0;z-index:0}
.sg-boss-bg .sg-plate{width:100%;height:100%;object-fit:cover;filter:saturate(.7) brightness(.82)}
.sg-boss>*:not(.sg-boss-bg){position:relative;z-index:1}
.sg-bossface{font-size:34px;text-align:center;animation:sg-hover 2.6s ease-in-out infinite}
.sg-bossimg{width:150px;height:150px;filter:drop-shadow(0 8px 16px rgba(0,0,0,.4))}
.sg-bossface.dive{animation:sg-dive .5s ease-in-out infinite}
@keyframes sg-hover{50%{transform:translateY(-8px)}}
@keyframes sg-dive{50%{transform:translateY(6px) scale(1.06)}}
.sg-shieldwall{display:flex;gap:6px}
.sg-hex{font-size:30px;opacity:.25}
.sg-hex.up{opacity:1;color:var(--honey,#F0B429);text-shadow:0 0 8px #F0B42966}
.sg-scramble{font:600 26px 'Sono',monospace;letter-spacing:.14em;color:#fff;text-shadow:0 2px 6px rgba(0,0,0,.55);word-break:break-word;overflow-wrap:anywhere;max-width:100%;line-height:1.25}
.sg-duel{display:grid;gap:10px;justify-items:center;background:rgba(20,14,40,.55);padding:12px 14px;border-radius:14px;backdrop-filter:blur(3px)}
#sg-di{font:600 20px 'Sono',monospace;text-align:center;padding:9px;border:2px solid var(--deep,#4A32A8);border-radius:12px}
.sg-dtimer{font:600 20px 'Sono',monospace;color:var(--villain,#C43D5A)}
@media (prefers-reduced-motion:reduce){.sg-bossface{animation:none}}
.sg-overlay{position:fixed;inset:0;background:var(--bg,#FBF7EC);z-index:80;overflow:auto}
.sg-top{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:2px solid var(--honey,#F0B429)}
.sg-back{font:600 14px 'Hanken',sans-serif;border:1px solid var(--line,#EADFC8);background:var(--panel,#fff);border-radius:999px;padding:6px 14px;cursor:pointer}
.sg-brand{font:800 16px 'Fraunces',serif}
.sg-body{max-width:1320px;margin:0 auto;padding:10px 8px}
.sg-note{color:var(--muted,#7A6E5C);font-size:13px;text-align:center;margin-top:16px}
.sg-dlg{display:grid;grid-template-columns:72px 1fr;gap:14px;align-items:start;margin-top:24px}
.sg-dface{font-size:52px;line-height:1}
.sg-dbox{background:var(--panel,#fff);border:2px solid var(--line,#EADFC8);border-radius:14px;padding:12px 16px}
.sg-dbox b{font:600 13px 'Sono',monospace;color:var(--honey,#B8860B)}
.sg-dbox p{margin:4px 0 0;font:400 17px/1.5 'Hanken',sans-serif}
.sg-next{grid-column:2;justify-self:end;font-size:22px;border:none;background:var(--honey,#F0B429);color:#2B2117;border-radius:999px;width:44px;height:44px;cursor:pointer;margin-top:8px}
.sg-gamehost{padding-top:8px}
.sg-stage{position:relative;background:rgba(20,15,38,.5);border-radius:16px;padding:26px 12px;max-width:900px;min-height:min(56vh,560px);margin:0 auto;overflow:hidden;display:grid;align-content:center}
.sg-stage-bg{position:absolute;inset:0;z-index:0}
.sg-stage-bg .sg-plate{width:100%;height:100%;object-fit:cover;opacity:.9}
.sg-stage>*:not(.sg-stage-bg){position:relative;z-index:1}
.sg-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.sg-stile{aspect-ratio:1;font:800 24px 'Sono',monospace;background:#2A2244;color:#8F86B8;border:2px solid #3A3160;border-radius:12px;cursor:pointer}
.sg-stile.lit{background:#F0B429;color:#2B2117;border-color:#FFE28A;box-shadow:0 0 18px #F0B42999}
.sg-simonprompt{text-align:center;font:600 15px 'Hanken',sans-serif;padding:10px;color:var(--muted,#7A6E5C)}
.sg-sky{position:relative;background:linear-gradient(rgba(16,26,56,.5),rgba(30,42,92,.5));border-radius:16px;padding:22px 12px;max-width:560px;margin:0 auto;overflow:hidden}
.sg-sky-bg{position:absolute;inset:0;z-index:0}
.sg-sky-bg .sg-plate{width:100%;height:100%;object-fit:cover}
.sg-sky>*:not(.sg-sky-bg){position:relative;z-index:1}
.sg-stars{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;min-height:64px}
.sg-star{width:52px;height:52px;font:800 20px 'Sono',monospace;background:radial-gradient(circle at 35% 30%,#FFF3C8,#F0B429);color:#2B2117;border:none;border-radius:50%;cursor:pointer;box-shadow:0 0 12px #F0B42966}
.sg-star.set{opacity:.15}
.sg-star.no{transform:translateX(3px);background:#C43D5A;color:#fff}
.sg-star.lit{box-shadow:0 0 22px #FFF3C8;transform:scale(1.15)}
.sg-answer{display:flex;gap:6px;justify-content:center;margin-top:18px}
.sg-slot{width:34px;height:40px;border-bottom:3px solid #8FA0F5;font:800 22px 'Sono',monospace;color:#EAF0FF;text-align:center}
.sg-slot.fill{border-color:#F0B429}
.sg-hintbtn{font:600 14px 'Hanken',sans-serif;background:var(--panel,#fff);border:2px solid var(--honey,#F0B429);border-radius:999px;padding:7px 16px;cursor:pointer}

/* ===== Claude Design saga-art layer (registries via saga-art-dom.js) ===== */
.sg-grey{filter:saturate(.12) brightness(1.05)}
/* full-bleed world plate behind a game screen */
.sg-gameframe{position:relative;border-radius:18px;overflow:hidden;min-height:360px;padding:10px 0}
.sg-gameframe > .sg-plate{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.sg-gameframe::after{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(180deg,rgba(20,15,38,.10),rgba(20,15,38,.28));pointer-events:none}
.sg-gameframe > .sg-gamehost{position:relative;z-index:1}
/* dialogue scene banner */
.sg-scenebanner{position:relative;height:150px;border-radius:16px;overflow:hidden;margin-top:6px;box-shadow:inset 0 -40px 60px -30px rgba(20,15,38,.6)}
.sg-scenebanner .sg-plate{position:absolute;inset:0;width:100%;height:100%}
/* dialogue portrait sprite */
.sg-dface.has-art{font-size:0}
.sg-dface .sg-portrait{width:72px;height:72px;display:block;filter:drop-shadow(0 2px 6px rgba(40,30,60,.25))}
/* map act banner */
.sg-actbanner{position:relative;border-radius:18px;overflow:hidden;margin:4px 0 14px;min-height:132px;display:flex;align-items:flex-end}
.sg-actbanner .sg-plate{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.sg-actbanner-in{position:relative;z-index:1;padding:16px 18px;color:#fff;text-shadow:0 2px 10px rgba(20,15,38,.85);width:100%;background:linear-gradient(180deg,transparent,rgba(20,15,38,.55))}
.sg-actkick{font:600 12px 'Sono',monospace;letter-spacing:.14em;color:#FFE28A}
.sg-actbanner-in h3{margin:2px 0;font:800 24px 'Fraunces',serif;color:#fff}
.sg-actbanner-in p{margin:2px 0 0;font:400 14px 'Hanken',sans-serif;color:#F3ECFF;opacity:.95}
.sg-actgem{position:absolute;right:16px;bottom:14px;display:flex;align-items:center;gap:6px}
.sg-actgem .sg-sprite{width:30px;height:30px}
.sg-actgem b{font:800 18px 'Sono',monospace;color:#FFE28A}
/* music toggle in the saga top bar */
.sg-music{margin-left:auto;font-size:18px;line-height:1;border:1px solid var(--line,#EADFC8);background:var(--panel,#fff);border-radius:999px;width:40px;height:40px;cursor:pointer;display:grid;place-items:center}
.sg-music.off{opacity:.55}

/* ===== Cinematic story scene (big backdrop + large character + speech bubble) ===== */
.sg-scene{position:relative;height:min(74vh,600px);border-radius:20px;overflow:hidden;margin-top:8px;box-shadow:0 10px 30px rgba(20,15,38,.28)}
.sg-scene-bg{position:absolute;inset:0}
.sg-scene-bg .sg-plate{position:absolute;inset:0;width:100%;height:100%}
.sg-scene-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,15,38,0) 45%,rgba(20,15,38,.35) 100%)}
.sg-scene-char{position:absolute;left:5%;bottom:20%;height:52%;display:flex;align-items:flex-end;z-index:2;filter:drop-shadow(0 10px 18px rgba(20,15,38,.45));animation:sg-char-in .45s cubic-bezier(.2,.9,.3,1.2) both}
.sg-scene-char svg{height:100%;width:auto;max-width:46vw}
.sg-scene-char.narrator{display:none}
.sg-scene-emoji{font-size:88px;line-height:1}
@keyframes sg-char-in{from{opacity:0;transform:translateY(18px) scale(.92)}to{opacity:1;transform:none}}
.sg-bubble{position:absolute;left:5%;right:5%;bottom:5%;z-index:3;background:rgba(255,255,255,.97);border-radius:20px;padding:16px 18px 14px;box-shadow:0 10px 28px rgba(20,15,38,.4);animation:sg-bubble-in .3s ease both}
@keyframes sg-bubble-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.sg-bubble b{display:block;font:600 12px 'Sono',monospace;letter-spacing:.04em;text-transform:uppercase;color:var(--honey,#B8860B);margin-bottom:3px}
.sg-bubble p{margin:0;font:400 18px/1.5 'Hanken',sans-serif;color:#241E33}
.sg-bubble .sg-next{position:absolute;right:14px;bottom:-22px;font-size:22px;border:none;background:var(--honey,#F0B429);color:#2B2117;border-radius:999px;width:46px;height:46px;cursor:pointer;box-shadow:0 4px 0 #C8891B}
@media(max-width:520px){ .sg-scene{height:66vh} .sg-scene-char{height:44%;bottom:24%} .sg-scene-emoji{font-size:64px} }

/* ===== Spell Scene — the unified, fluid story spelling game ===== */
.ss-wrap{position:relative;height:min(80vh,660px);display:flex;flex-direction:column;border-radius:20px;overflow:hidden;box-shadow:0 12px 32px rgba(20,15,38,.3)}
.ss-bg{position:absolute;inset:0;transition:filter 1.1s ease}
.ss-bg .sg-plate{position:absolute;inset:0;width:100%;height:100%}
.ss-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,15,38,0) 42%,rgba(20,15,38,.5))}
.ss-stage{position:relative;flex:1;min-height:150px;z-index:1}
.ss-hero,.ss-foe{position:absolute;bottom:4%;height:46%;filter:drop-shadow(0 10px 16px rgba(20,15,38,.45))}
.ss-hero svg,.ss-foe svg{height:100%;width:auto}
.ss-hero{left:4%;animation:ss-bob 2.8s ease-in-out infinite}
.ss-foe{right:4%;animation:ss-hover 3.4s ease-in-out infinite}
.ss-emoji{font-size:80px;line-height:1}
@keyframes ss-bob{50%{transform:translateY(-9px)}}
@keyframes ss-hover{50%{transform:translateY(-7px) rotate(-2deg)}}
.ss-foe.recoil{animation:ss-recoil .6s ease}
@keyframes ss-recoil{30%{transform:translateX(46px) scale(.84) rotate(9deg);opacity:.65}100%{transform:none}}
.ss-foe.gloat{animation:ss-gloat .4s ease}
@keyframes ss-gloat{50%{transform:translateX(-18px) scale(1.09)}}
.ss-burst{position:absolute;inset:-10%;background:radial-gradient(circle,rgba(255,214,110,.95),transparent 62%);animation:ss-bst .72s ease forwards;pointer-events:none}
@keyframes ss-bst{0%{transform:scale(.4);opacity:1}100%{transform:scale(1.7);opacity:0}}
.ss-meterwrap{position:relative;display:flex;align-items:center;gap:9px;padding:9px 13px;z-index:2}
.ss-meter{flex:1;height:13px;border-radius:99px;background:rgba(20,15,38,.35);overflow:hidden;box-shadow:inset 0 1px 3px rgba(0,0,0,.3)}
.ss-meter-fill{height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,#F0B429,#FFD86E);transition:width .6s cubic-bezier(.2,.9,.3,1.1);box-shadow:0 0 10px #F0B42999}
.ss-mlbl{font:700 12px 'Sono',monospace;color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.6)}
.ss-panel{position:relative;z-index:2;background:rgba(255,255,255,.97);border-radius:20px 20px 0 0;padding:12px 14px 14px;box-shadow:0 -6px 20px rgba(20,15,38,.25)}
.ss-prompt{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.ss-say{font-size:18px;width:40px;height:40px;border-radius:999px;border:none;background:var(--honey,#F0B429);color:#2B2117;cursor:pointer;flex-shrink:0}
.ss-hint{font:400 14px/1.35 'Hanken',sans-serif;color:#4A4359}
.ss-slots{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin:4px 0 12px}
.ss-slots.shake{animation:ss-shake .4s}
@keyframes ss-shake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.ss-slot{width:30px;height:42px;border-bottom:3px solid #C9BFEA;font:800 23px 'Sono',monospace;color:#241E33;display:grid;place-items:center;transition:.15s}
.ss-slot.fill{border-color:var(--honey,#F0B429);animation:ss-pop .18s ease}
.ss-slot.wrong{border-color:#C43D5A;color:#C43D5A}
@keyframes ss-pop{0%{transform:scale(.55)}100%{transform:scale(1)}}
.ss-key{display:flex;flex-direction:column;gap:5px;align-items:center}
.ss-krow{display:flex;gap:4px;justify-content:center}
.ss-kb{min-width:27px;height:38px;padding:0 5px;border-radius:8px;border:1px solid var(--line,#EADFC8);background:#fff;font:700 15px 'Hanken',sans-serif;color:#241E33;cursor:pointer;text-transform:uppercase}
.ss-kb:active{background:var(--honey,#F0B429);transform:translateY(1px)}
.ss-kwide{min-width:66px}
.ss-kgo{background:var(--honey,#F0B429);border-color:#C8901B}
@media(max-width:520px){ .ss-wrap{height:82vh} .ss-hero,.ss-foe{height:38%} .ss-kb{min-width:24px;height:34px;font-size:14px} }

/* On-screen D-pad — tablet controls for movement games */
.sg-dpad{display:flex;flex-direction:column;align-items:center;gap:6px;margin:14px auto 0;width:fit-content;user-select:none;touch-action:none}
.sg-dmid{display:flex;gap:6px}
.sg-dbtn{width:54px;height:54px;border-radius:14px;border:none;background:var(--honey,#F0B429);color:#2B2117;font-size:20px;font-weight:800;cursor:pointer;box-shadow:0 3px 0 #C8901B;display:grid;place-items:center;-webkit-tap-highlight-color:transparent}
.sg-dbtn:active{transform:translateY(2px);box-shadow:0 1px 0 #C8901B}

/* Bee Grand Prix — spell-to-nitro race controls (keyboard + tablet) */
.sg-race-word{display:flex;gap:6px;align-items:center;width:100%;max-width:520px;margin:0 auto}
.sg-rin{flex:1;min-width:0;font:600 16px 'Sono',ui-monospace,monospace;padding:9px 12px;border:2px solid var(--honey,#F0B429);border-radius:12px;text-align:center;background:#FFFDF8;color:#2B2117;outline:none}
.sg-rin:focus{border-color:#36D1FF;box-shadow:0 0 0 3px rgba(54,209,255,.25)}
.sg-rbtn{flex:none;border:none;background:var(--honey,#F0B429);color:#2B2117;font-weight:800;font-size:15px;border-radius:12px;padding:9px 13px;cursor:pointer;box-shadow:0 3px 0 #C8901B;-webkit-tap-highlight-color:transparent}
.sg-rbtn:active{transform:translateY(2px);box-shadow:0 1px 0 #C8901B}
.sg-rbtn.boost{background:#36D1FF;box-shadow:0 3px 0 #1B9FC7}
.sg-rbtn.boost:active{box-shadow:0 1px 0 #1B9FC7}
.sg-lanebtns{display:flex;gap:10px;justify-content:center;margin-top:10px}

/* Inline input + submit button row — tablet-friendly spelling submit */
.sg-inrow{display:flex;gap:6px;align-items:stretch;width:100%;max-width:420px;margin:6px auto 0}
.sg-inrow input{flex:1;min-width:0}
.sg-inrow .sg-rbtn{flex:none;white-space:nowrap}

/* ===== ENGINE K · Stage Rhythm ===== */
.sg-rhythm{position:relative;height:max(340px,calc(100vh - 320px));max-width:900px;margin:0 auto;background:rgba(20,15,38,.55);border-radius:16px;overflow:hidden}
.sg-rhythm-bg{position:absolute;inset:0;z-index:0}
.sg-rhythm-bg .sg-plate{width:100%;height:100%;object-fit:cover;opacity:.85}
.sg-rlanes{position:absolute;inset:0;z-index:1;display:grid;grid-template-columns:repeat(4,1fr)}
.sg-rlane{position:relative;border-left:1px solid rgba(255,255,255,.10);cursor:pointer;-webkit-tap-highlight-color:transparent}
.sg-rlane:first-child{border-left:none}
.sg-rlane:active{background:rgba(240,180,41,.10)}
.sg-rkey{position:absolute;bottom:6px;left:50%;transform:translateX(-50%);font:800 13px 'Sono',monospace;color:rgba(255,255,255,.5);background:rgba(0,0,0,.35);border-radius:8px;padding:2px 9px;pointer-events:none}
.sg-rhit{position:absolute;left:0;right:0;bottom:34px;height:56px;z-index:1;border-top:2px dashed rgba(240,180,41,.75);border-bottom:2px dashed rgba(240,180,41,.75);background:rgba(240,180,41,.08);pointer-events:none}
.sg-rhit.pulse{animation:sgRhitPulse .5s ease-out}
@keyframes sgRhitPulse{0%{background:rgba(240,180,41,.28)}100%{background:rgba(240,180,41,.08)}}
.sg-rnote{position:absolute;z-index:2;transform:translateX(-50%);width:44px;height:44px;display:grid;place-items:center;font:800 21px 'Sono',monospace;color:#2B2117;background:radial-gradient(circle at 32% 30%,#FFE28A,#F0B429 68%);border-radius:50%;box-shadow:0 3px 10px rgba(0,0,0,.35),inset 0 -3px 0 rgba(0,0,0,.12);pointer-events:none}
.sg-rnote.pop{animation:sgNotePop .18s ease-out forwards}
@keyframes sgNotePop{to{transform:translateX(-50%) scale(1.7);opacity:0}}
.sg-rnote.bad{background:radial-gradient(circle at 32% 30%,#FF9F9F,#E5484D 68%);color:#fff;animation:sgNoteBad .22s ease-in forwards}
@keyframes sgNoteBad{to{transform:translateX(-50%) scale(.4) rotate(-18deg);opacity:0}}
.sg-rword{display:flex;gap:10px;align-items:center;justify-content:center;margin:12px auto 4px;flex-wrap:wrap}
.sg-rword .sg-slot{width:30px;height:36px}
.sg-slot.next{border-color:#36D1FF;box-shadow:0 3px 0 -1px rgba(54,209,255,.5)}

/* ===== ENGINE L · Constellation Connect ===== */
.sg-consky{position:relative;height:max(330px,calc(100vh - 330px));max-width:1000px;margin:0 auto;background:#141031;border-radius:16px;overflow:hidden}
.sg-consky-bg{position:absolute;inset:0}
.sg-consky-bg .sg-plate{width:100%;height:100%;object-fit:cover;opacity:.9}
.sg-consky.lit .sg-conlayer polyline{stroke:#FFE28A;filter:drop-shadow(0 0 6px #F0B429)}
.sg-conlayer{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
.sg-conlayer polyline{fill:none;stroke:#8FA0F5;stroke-width:.8;stroke-linecap:round;stroke-linejoin:round;opacity:.95;transition:stroke .4s}
.sg-constar{position:absolute;z-index:2;transform:translate(-50%,-50%);width:46px;height:46px;border:none;background:transparent;display:grid;place-items:center;font:800 19px 'Sono',monospace;color:#EAF0FF;cursor:pointer;-webkit-tap-highlight-color:transparent}
.sg-conglow{position:absolute;inset:8px;border-radius:50%;background:radial-gradient(circle,#EAF0FF 0%,#8FA0F599 40%,transparent 70%);opacity:.8;transition:.25s}
.sg-constar.on{color:#2B2117}
.sg-constar.on .sg-conglow{inset:4px;background:radial-gradient(circle,#FFE28A 0%,#F0B429 55%,transparent 78%);opacity:1}
.sg-constar.shake{animation:sgStarShake .35s}
@keyframes sgStarShake{25%{transform:translate(-58%,-50%)}50%{transform:translate(-42%,-50%)}75%{transform:translate(-54%,-50%)}}
.sg-constar.hintpulse .sg-conglow{animation:sgHintGlow .8s ease-in-out 2}
@keyframes sgHintGlow{50%{inset:-2px;background:radial-gradient(circle,#7CF29C 0%,#3CBF66aa 55%,transparent 80%)}}

/* ===== ENGINE M · Type Blaster ===== */
.sg-tbstage{position:relative;height:max(300px,calc(100vh - 380px));max-width:900px;margin:0 auto;background:rgba(12,10,30,.65);border-radius:16px;overflow:hidden}
.sg-tbstage-bg{position:absolute;inset:0}
.sg-tbstage-bg .sg-plate{width:100%;height:100%;object-fit:cover;opacity:.8}
.sg-tbstage.breach{animation:sgBreach .5s}
@keyframes sgBreach{0%,60%{box-shadow:inset 0 0 0 4px #E5484D}100%{box-shadow:none}}
.sg-tbfoe{position:absolute;left:50%;top:0;transform:translateX(-50%);z-index:2;display:grid;place-items:center;gap:4px;transition:top .12s linear;filter:drop-shadow(0 4px 10px rgba(0,0,0,.45))}
.sg-tbimg{width:74px;height:74px}
.sg-tbemoji{font-size:52px;line-height:1}
.sg-tbfoe.hitfx{animation:sgFoeHit .2s}
@keyframes sgFoeHit{40%{transform:translateX(-50%) translateY(-9px) scale(.94);filter:brightness(1.9) drop-shadow(0 0 12px #36D1FF)}}
.sg-tbfoe.gloatfx{animation:sgFoeGloat .3s}
@keyframes sgFoeGloat{40%{transform:translateX(-50%) scale(1.12) rotate(4deg)}}
.sg-tbfoe.boom{animation:sgFoeBoom .6s forwards}
@keyframes sgFoeBoom{30%{filter:brightness(2.4)}100%{transform:translateX(-50%) scale(2.1);opacity:0;filter:brightness(3) blur(3px)}}
.sg-tbslots{display:flex;gap:4px;background:rgba(0,0,0,.4);border-radius:10px;padding:4px 8px}
.sg-tbslots .sg-slot{width:22px;height:27px;font-size:16px}
.sg-tbbeam{position:absolute;left:50%;bottom:44px;transform:translateX(-50%);z-index:1;width:6px;height:0;border-radius:4px;background:linear-gradient(#36D1FF,#EAF0FF);opacity:0;pointer-events:none}
.sg-tbbeam.fire{animation:sgBeam .22s ease-out}
@keyframes sgBeam{0%{opacity:1;height:78%}100%{opacity:0;height:78%}}
.sg-tbshield{position:absolute;left:6%;right:6%;bottom:38px;height:0;z-index:1;border-top:3px solid rgba(54,209,255,.75);box-shadow:0 0 14px rgba(54,209,255,.5);border-radius:99px}
.sg-tbcannon{position:absolute;left:50%;bottom:2px;transform:translateX(-50%);z-index:2;font-size:30px;filter:drop-shadow(0 2px 6px rgba(0,0,0,.5))}
.sg-tbkey{max-width:560px;margin:10px auto 0}

/* Long Sky v3: pot progress bar with the gate at the end */
.sg-flyprog{position:relative;flex:1;min-width:70px;max-width:180px;height:12px;border-radius:99px;background:rgba(255,255,255,.25);border:1px solid rgba(255,255,255,.4);overflow:visible}
.sg-flyprog i{position:absolute;left:0;top:0;bottom:0;border-radius:99px;background:linear-gradient(90deg,#FFE28A,#F0B429);width:0;transition:width .5s}
.sg-flyprog b{position:absolute;right:-7px;top:-7px;font-size:15px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.4))}

/* ===== Bee Grand Prix v2: readable light HUD + live position bar + held power-up ===== */
.sg-racehud{background:rgba(255,255,255,.92);border:1px solid rgba(0,0,0,.08);border-radius:14px;padding:8px 12px;margin:0 auto 8px;max-width:1280px;box-shadow:0 3px 10px rgba(20,15,40,.15);backdrop-filter:blur(6px)}
.sg-rh-row{display:flex;align-items:center;gap:12px}
.sg-rh-place{font:800 20px 'Fraunces',serif;color:#241E33;white-space:nowrap}
.sg-rh-place i{font:700 12px 'Hanken',sans-serif;color:#8A7F70;font-style:normal}
.sg-rh-spd{font:800 13px 'Sono',monospace;color:#5C5140;white-space:nowrap;min-width:64px;text-align:right}
.sg-posbar{position:relative;flex:1;height:26px;min-width:120px}
.sg-pb-road{position:absolute;left:0;right:14px;top:50%;height:8px;transform:translateY(-50%);border-radius:99px;background:linear-gradient(90deg,#E8E2D4,#D8D0BE);border:1px solid rgba(0,0,0,.1)}
.sg-pb-flag{position:absolute;right:-4px;top:50%;transform:translateY(-50%);font-size:16px}
.sg-pb-dot{position:absolute;top:50%;transform:translate(-50%,-50%);width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:11px;border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.3);transition:left .3s linear}
.sg-pb-dot.me{width:26px;height:26px;font-size:15px;background:#FFD34D;border:3px solid #fff;box-shadow:0 0 0 2px #F0B429,0 2px 6px rgba(0,0,0,.35);z-index:2}
.sg-hold{position:absolute;right:10px;top:10px;z-index:5;width:58px;height:58px;border-radius:16px;background:rgba(255,255,255,.92);border:2px solid rgba(0,0,0,.12);box-shadow:0 3px 10px rgba(20,15,40,.25);display:grid;place-items:center;padding:7px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.sg-hold svg{width:100%;height:100%}
.sg-hold-empty{font:800 24px 'Fraunces',serif;color:#C9C0AE}
.sg-hold.ready{border-color:#F0B429;animation:sgHoldPulse 1.2s ease-in-out infinite}
@keyframes sgHoldPulse{50%{box-shadow:0 0 0 6px rgba(240,180,41,.25),0 3px 10px rgba(20,15,40,.25)}}
.sg-unlock{display:grid;place-items:center;gap:6px;text-align:center}
.sg-unlock-ic{width:74px;height:74px;display:block;animation:sgUnlockPop .5s cubic-bezier(.2,1.6,.4,1) both}
.sg-unlock-ic svg{width:100%;height:100%}
.sg-unlock b{font:800 20px 'Fraunces',serif}
.sg-unlock i{font:650 12.5px 'Hanken',sans-serif;color:#8A7F70;font-style:normal}
@keyframes sgUnlockPop{0%{transform:scale(.3) rotate(-14deg);opacity:0}100%{transform:scale(1) rotate(0)}}
.sg-rh-lap{font:800 13px 'Hanken',sans-serif;color:#5C5140;background:rgba(240,180,41,.18);border:1px solid rgba(240,180,41,.45);border-radius:99px;padding:3px 10px;white-space:nowrap}

/* ===== Evolution system — chip in the HUD, "Evolved!" toast, endpoint finish button ===== */
.sg-evochip{display:inline-flex;align-items:center;gap:5px;font:800 13px 'Hanken',sans-serif;color:#2E6E2C;background:rgba(120,200,120,.22);border:1px solid rgba(120,200,120,.5);border-radius:999px;padding:3px 11px;white-space:nowrap}
.sg-evochip b{font-weight:800}
.sg-evochip.pop{animation:sgEvoPop .5s cubic-bezier(.2,1.6,.4,1)}
@keyframes sgEvoPop{0%{transform:scale(.6);opacity:.4}100%{transform:scale(1);opacity:1}}
.sg-evotoast{position:absolute;left:50%;top:22%;transform:translateX(-50%);z-index:30;display:grid;justify-items:center;gap:2px;background:rgba(20,15,38,.82);color:#fff;border-radius:16px;padding:12px 22px;box-shadow:0 12px 40px rgba(0,0,0,.4);animation:sgEvoToast 1.7s ease both;pointer-events:none}
.sg-evotoast-ic{font-size:38px;line-height:1}
.sg-evotoast b{font:800 13px 'Fraunces',serif;color:#FFD98A;letter-spacing:.06em}
.sg-evotoast i{font:700 16px 'Hanken',sans-serif;font-style:normal}
@keyframes sgEvoToast{0%{transform:translateX(-50%) scale(.5) translateY(10px);opacity:0}15%{transform:translateX(-50%) scale(1.08) translateY(0);opacity:1}80%{transform:translateX(-50%) scale(1);opacity:1}100%{transform:translateX(-50%) scale(.95) translateY(-8px);opacity:0}}
.sg-finishbtn{position:absolute;right:12px;bottom:12px;z-index:25;font:800 14px 'Hanken',sans-serif;color:#241E33;background:linear-gradient(135deg,#FFD24D,#F0A93C);border:none;border-radius:999px;padding:11px 20px;cursor:pointer;box-shadow:0 5px 16px rgba(240,169,60,.55);animation:sgEvoPop .5s cubic-bezier(.2,1.6,.4,1)}

/* ---- chapter hardness picker (4 levels) ---- */
.sg-diffpick{max-width:560px;margin:0 auto;text-align:center;padding:8px 6px}
.sg-diffpick h3{font-family:var(--display,serif);font-weight:800;font-size:26px;margin:6px 0 6px;color:var(--ink,#2B2117)}
.sg-diffpick>p{font-size:14px;color:var(--muted,#7A6E5C);line-height:1.5;margin:0 auto 18px;max-width:44ch}
.sg-diffgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media(max-width:520px){.sg-diffgrid{grid-template-columns:1fr}}
.sg-diff{display:flex;flex-direction:column;align-items:center;gap:3px;background:var(--panel,#fff);border:2px solid var(--line,#EADFC8);border-radius:16px;padding:16px 12px 14px;cursor:pointer;transition:transform .12s ease,border-color .12s ease,box-shadow .12s ease}
.sg-diff:hover,.sg-diff:focus{transform:translateY(-3px);border-color:var(--honey,#F0B429);box-shadow:0 8px 22px rgba(200,150,30,.22);outline:none}
.sg-diff-stars{font-size:19px;letter-spacing:1px;color:#F0B429;line-height:1}
.sg-diff-stars i{color:#D9C79A;font-style:normal}
.sg-diff b{font-family:var(--display,serif);font-weight:800;font-size:18px;color:var(--ink,#2B2117);margin-top:4px}
.sg-diff-sub{font-size:12px;color:var(--muted,#7A6E5C);font-weight:600}
.sg-diff-tag{margin-top:6px;font-size:11px;font-weight:800;letter-spacing:.03em;padding:3px 10px;border-radius:999px;background:var(--chip,#FBEFCF);color:var(--honey-deep,#8A5B00)}
.sg-diff.cleared{border-color:#7ED9A6}
.sg-diff.cleared .sg-diff-tag{background:#E4F7EC;color:#1F8A52}
.sg-diff-back{margin:18px auto 4px;display:block;background:none;border:0;color:var(--muted,#7A6E5C);font-weight:700;font-size:13px;cursor:pointer}

/* ---- The saga is a fixed-light stage ----------------------------------------------------
   Every panel, plate, hex and card in Bizzy & the Great Unspelling is drawn on parchment and
   stays parchment in Dusk — the artwork does not have a night variant. But the ink was still
   following the app palette, so in Dusk it flipped to white and vanished on its own light
   background. Re-pin the light tokens on the overlay and they cascade to everything inside:
   elements that name var(--text)/var(--ink) get dark ink back, and bare <b>/<i>/<p> inherit
   the dark `color` set here instead of the white one from <body>. */
[data-mode="dusk"] .sg-overlay{
  --tint:#F0EDF8; --tint-deep:#E4E0F0; --paper:#FFFFFF; --line:#E9E5F0;
  --ink:#241E33; --muted:#6A6478; --text:#241E33;
  --bg:#FBF7EC; --bg1:#F0EDF8; --bg2:#FFFFFF; --bg3:#E4E0F0;
  --panel:#FFFFFF; --honey:#F0B429; --honey-d:#B8860B;
  --surface:rgb(36 30 51 / .04); --surface2:rgb(36 30 51 / .07);
  --treasure-tint:#FFF3D6; --treasure-deep:#8A5B00;
  --mastered-tint:#E4F3EA; --fix-tint:#FBE7E7;
  color:#241E33;
}
/* the word card is portalled to <body>, so it needs the same pinning on its own */
[data-mode="dusk"] #sg-card{
  --paper:#FFFFFF; --panel:#FFFFFF; --line:#E9E5F0; --ink:#241E33; --muted:#6A6478; --text:#241E33;
  --surface2:rgb(36 30 51 / .07); --honey:#F0B429;
  color:#241E33;
}

/* ================= the saga's painted boards =================
   The chapter select was a stack of rectangular buttons. It is now the World
   Atlas treatment: an act picker of painted cards, then one bird's-eye board per
   act with the chapters walked along the road the painter drew. */
.sg-picker{max-width:1080px;margin:0 auto}
.sg-pickhead{text-align:center;margin:2px 0 20px}
.sg-pickhead h2{font:800 30px 'Fraunces',serif;margin:0;color:var(--ink,#241E33)}
.sg-pickhead p{margin:5px 0 0;font:600 13.5px 'Hanken',sans-serif;color:var(--muted,#7A6E5C)}
.sg-actgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.sg-actcard{display:flex;flex-direction:column;text-align:left;padding:0;border:0;border-radius:20px;overflow:hidden;
  background:var(--panel,#fff);box-shadow:0 0 0 1px rgba(40,28,80,.10),0 10px 26px rgba(30,20,60,.16);
  cursor:pointer;transition:transform .18s ease,box-shadow .18s ease}
.sg-actcard:hover{transform:translateY(-4px);box-shadow:0 0 0 1px rgba(40,28,80,.12),0 18px 36px rgba(30,20,60,.26)}
.sg-actcard.locked{cursor:default;filter:grayscale(.75) brightness(.94);opacity:.62}
.sg-actcard.locked:hover{transform:none}
.sg-actcard.here{box-shadow:0 0 0 3px #F0B429,0 12px 30px rgba(30,20,60,.24)}
.sg-actcard-art{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:#241E33}
.sg-actcard-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.sg-actcard-art:after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(16,10,34,.30) 0%,rgba(16,10,34,0) 46%,rgba(16,10,34,.44) 100%)}
.sg-actcard-lock{position:absolute;inset:0;z-index:2;display:grid;place-items:center;font-size:30px;background:rgba(16,10,34,.34)}
.sg-actcard-here{position:absolute;top:9px;left:10px;z-index:2;font:800 10px 'Hanken',sans-serif;letter-spacing:.12em;
  text-transform:uppercase;color:#3A2504;background:linear-gradient(160deg,#FFE49B,#E8A81C);border-radius:99px;padding:3px 10px}
.sg-actcard-in{display:flex;flex-direction:column;gap:4px;padding:12px 15px 14px;flex:1}
.sg-actcard-in .sg-actkick{font:800 10px 'Hanken',sans-serif;letter-spacing:.18em;color:var(--honey-d,#B8860B)}
.sg-actcard-in b{font:800 18px 'Fraunces',serif;line-height:1.12;color:var(--ink,#241E33)}
.sg-actcard-in i{font:400 12.5px/1.42 'Hanken',sans-serif;font-style:normal;color:var(--muted,#7A6E5C)}
.sg-actbar{display:block;height:5px;border-radius:99px;background:rgba(120,100,170,.18);overflow:hidden;margin-top:6px}
.sg-actbar s{display:block;height:100%;border-radius:99px;text-decoration:none;background:linear-gradient(90deg,#8B6BD6,#F0B429)}
.sg-actmeta{display:flex;align-items:center;gap:7px;margin-top:2px}
.sg-actmeta em{font:700 11.5px 'Hanken',sans-serif;font-style:normal;color:var(--muted,#7A6E5C)}

/* ---- the board ---- */
.sg-boardwrap{max-width:1080px;margin:0 auto}
.sg-boardtop{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.sg-tolink{background:rgba(120,100,170,.12);border:1px solid rgba(120,100,170,.24);color:var(--ink,#241E33);
  border-radius:99px;padding:7px 14px;font:800 13px 'Hanken',sans-serif;cursor:pointer;min-height:36px}
.sg-tolink:hover{background:rgba(120,100,170,.22)}
.sg-boardkick{font:800 17px 'Fraunces',serif;color:var(--ink,#241E33)}
.sg-boardcount{margin-left:auto;font:800 12px 'Hanken',sans-serif;color:#8A5B00;
  background:rgba(240,180,41,.16);border:1px solid rgba(240,180,41,.34);border-radius:99px;padding:5px 12px}
.sg-pan{border-radius:22px;overflow:hidden;box-shadow:0 0 0 1px rgba(40,28,80,.12),0 14px 32px rgba(26,18,54,.22)}
.sg-board{position:relative;aspect-ratio:16/9;border-radius:22px;overflow:hidden;width:100%}
.sg-boardart{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;display:block}
/* the road, stroked over the painting so the walk is visible */
.sg-road{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
.sg-road path{fill:none;vector-effect:non-scaling-stroke;stroke-linecap:round}
.sg-road-b{stroke:rgba(20,12,40,.34);stroke-width:9}
.sg-road-f{stroke:rgba(255,247,224,.60);stroke-width:4;stroke-dasharray:2 7}
/* chapter medallions: HTML pins over the painting, so they keep a real size at
   every board width instead of scaling with the picture */
.sg-pin{position:absolute;transform:translate(-50%,-50%);z-index:var(--pz,3);background:none;border:0;padding:0;
  cursor:pointer;line-height:0;transition:transform .16s ease}
.sg-pin:hover:not([disabled]),.sg-pin:focus-visible{transform:translate(-50%,-50%) scale(1.12);z-index:8}
.sg-pin[disabled]{cursor:default}
.sg-pind{display:grid;place-items:center;border-radius:50%;border:2.5px solid rgba(255,251,239,.92);
  font:800 15px 'Fraunces',serif;line-height:1;box-shadow:0 4px 12px rgba(10,6,26,.48)}
.sg-pin.now .sg-pind{border-width:3px;border-color:#F0B429;animation:sg-pulse 2.4s ease-in-out infinite}
.sg-pin.on .sg-pind{box-shadow:0 0 0 3px #F0B429,0 6px 16px rgba(10,6,26,.55)}
.sg-pin.locked .sg-pind{border-color:rgba(255,251,239,.55);box-shadow:0 3px 9px rgba(10,6,26,.35)}
.sg-pin.boss .sg-pind{border-color:#E0553C;box-shadow:0 0 0 4px rgba(224,85,60,.22),0 5px 14px rgba(10,6,26,.5)}
.sg-pin.finale .sg-pind{border-color:#8B6BD6;box-shadow:0 0 0 4px rgba(139,107,214,.26),0 5px 14px rgba(10,6,26,.5)}
@keyframes sg-pulse{0%,100%{box-shadow:0 0 0 0 rgba(240,180,41,.55),0 4px 12px rgba(10,6,26,.48)}
  50%{box-shadow:0 0 0 9px rgba(240,180,41,0),0 4px 12px rgba(10,6,26,.48)}}
.sg-pinstars{position:absolute;left:50%;bottom:-14px;transform:translateX(-50%);white-space:nowrap;
  font-size:9px;line-height:1;color:#FFD24D;text-shadow:0 1px 3px rgba(8,5,22,.85);pointer-events:none}
.sg-rider{position:absolute;left:50%;top:-7px;transform:translate(-50%,-100%);width:34px;height:36px;display:block;
  pointer-events:none;filter:drop-shadow(0 3px 6px rgba(8,5,22,.5));animation:sg-bob 2.8s ease-in-out infinite}
@keyframes sg-bob{0%,100%{transform:translate(-50%,-100%) translateY(0)}50%{transform:translate(-50%,-100%) translateY(-5px)}}
/* the chapter card under the board */
.sg-chcard{display:flex;gap:14px;align-items:stretch;margin-top:14px;border-radius:18px;overflow:hidden;
  background:var(--panel,#fff);box-shadow:0 0 0 1px rgba(40,28,80,.10),0 8px 20px rgba(30,20,60,.14)}
.sg-chcard.locked{opacity:.72}
.sg-chcard-art{position:relative;flex:0 0 150px;overflow:hidden;background:#241E33}
.sg-chcard-art .sg-plate{position:absolute;inset:0;width:100%;height:100%}
.sg-chcard-in{display:flex;flex-direction:column;gap:5px;justify-content:center;padding:14px 16px;flex:1;min-width:0}
.sg-chkick{font:800 10px 'Hanken',sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--honey-d,#B8860B)}
.sg-chcard-in b{font:800 20px 'Fraunces',serif;line-height:1.14;color:var(--ink,#241E33)}
.sg-chgo{margin-top:5px}
.sg-chgo em{font:600 13px 'Hanken',sans-serif;font-style:normal;color:var(--muted,#7A6E5C)}
.sg-play{min-height:44px;padding:11px 22px;border:0;border-radius:99px;cursor:pointer;
  font:800 15px 'Fraunces',serif;color:#3A2504;background:linear-gradient(160deg,#FFE49B,#E8A81C);
  box-shadow:0 6px 16px rgba(240,180,41,.34);transition:transform .15s ease}
.sg-play:hover{transform:translateY(-2px)}
@media (max-width:640px){
  .sg-actgrid{grid-template-columns:1fr}
  .sg-pickhead h2{font-size:24px}
  .sg-board{aspect-ratio:4/3}
  .sg-pind{width:30px !important;height:30px !important;font-size:13px;border-width:2px}
  .sg-pin.now .sg-pind{width:36px !important;height:36px !important}
  .sg-rider{width:26px;height:28px;top:-4px}
  .sg-chcard{flex-direction:column}
  .sg-chcard-art{flex:0 0 108px}
  .sg-boardkick{font-size:15px}
}
@media (prefers-reduced-motion:reduce){
  .sg-pin.now .sg-pind,.sg-rider{animation:none}
}

/* ---- the act's painting behind the dialogue, the difficulty dial and the round ----
   One art language from the board to the round: the child walks a painted map
   and then plays inside the same painting, rather than stepping from an oil
   painting onto a flat vector plate. */
.sg-actbg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;z-index:0}
.sg-actbg.sg-grey{filter:saturate(.14) brightness(.92)}
.sg-actbg-scrim{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(18,11,36,.42) 0%,rgba(18,11,36,.20) 40%,rgba(18,11,36,.62) 100%)}
.sg-scene-bg .sg-actbg-scrim{background:linear-gradient(180deg,rgba(18,11,36,.24) 0%,rgba(18,11,36,0) 40%,rgba(18,11,36,.52) 100%)}
.sg-gameframe > .sg-actbg,.sg-gameframe > .sg-actbg-scrim{border-radius:18px}
/* the difficulty dial now sits on the painting rather than on the page */
.sg-diffpick{position:relative;max-width:none;padding:0;border-radius:20px;overflow:hidden;
  box-shadow:0 10px 30px rgba(20,15,38,.28)}
.sg-diffpick-in{position:relative;z-index:1;max-width:620px;margin:0 auto;text-align:center;padding:30px 18px 26px;color:#FFF6E4}
.sg-diffkick{display:block;font:800 10px 'Hanken',sans-serif;letter-spacing:.2em;text-transform:uppercase;color:#FFD24D}
.sg-diffpick-in h3{margin:4px 0 8px;font:800 26px 'Fraunces',serif;color:#FFF6E4;text-shadow:0 2px 12px rgba(10,6,26,.7)}
.sg-diffpick-in p{margin:0 auto 18px;max-width:52ch;font:500 13.5px/1.5 'Hanken',sans-serif;color:#E4DAF4;
  text-shadow:0 1px 8px rgba(10,6,26,.7)}
.sg-diffpick-in p b{color:#FFD24D}
.sg-diffpick-in .sg-diff-back{margin-top:16px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.26);
  color:#FFF6E4;border-radius:99px;padding:9px 18px;font:800 13px 'Hanken',sans-serif;cursor:pointer;min-height:40px}
.sg-diffpick-in .sg-diff-back:hover{background:rgba(255,255,255,.22)}