/* SPIRE extras: menu dock, pause, panels, toast. Shares the palette in styles.css. */
.home-link{position:absolute;z-index:6;top:max(12px,env(safe-area-inset-top));left:14px;padding:8px 12px;border-radius:999px;background:rgba(255,255,255,.85);border:2px solid #fff;color:var(--ink);font:900 11px/1 Nunito;letter-spacing:.06em;text-decoration:none;box-shadow:0 3px 0 rgba(16,37,58,.2)}
.coin-pill{position:absolute;z-index:6;top:max(12px,env(safe-area-inset-top));right:14px;padding:8px 12px;border-radius:999px;background:rgba(255,248,230,.95);border:2px solid #fff;font:900 13px/1 Nunito;color:var(--ink);box-shadow:0 3px 0 rgba(16,37,58,.2)}
.dock{position:absolute;z-index:6;left:50%;transform:translateX(-50%);bottom:max(134px,calc(env(safe-area-inset-bottom) + 112px));display:flex;gap:8px;width:min(360px,92vw);justify-content:center}
.dock-btn{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 4px;border:2px solid var(--ink);border-radius:14px;background:#fff8e6;color:var(--ink);box-shadow:0 4px 0 rgba(16,37,58,.35);cursor:pointer;font:900 10px/1.1 Nunito;letter-spacing:.04em}
.dock-btn span{font-size:20px;line-height:1}.dock-btn b{font-weight:900}.dock-btn:active{transform:translateY(3px);box-shadow:0 1px 0 rgba(16,37,58,.35)}
.dock-btn:focus-visible,.chip:focus-visible,.look:focus-visible,.x:focus-visible,.icon-button:focus-visible,.primary:focus-visible,.home-link:focus-visible{outline:3px solid #1b78d6;outline-offset:2px}
.best-pill{bottom:max(202px,calc(env(safe-area-inset-bottom) + 180px))}
.hud{grid-template-columns:1fr auto auto auto auto}
.result-extra{margin:10px 0 0!important;color:#fff!important;font-weight:900!important;letter-spacing:.04em}
.result-links{position:relative;z-index:4;display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:22px}
.chip{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:40px;padding:8px 16px;border:2px solid var(--ink);border-radius:999px;background:#fff8e6;color:var(--ink);font:900 13px/1 Nunito;text-decoration:none;cursor:pointer;box-shadow:0 3px 0 rgba(16,37,58,.3)}
.chip.solid{background:linear-gradient(#ff9637,#ff721f);color:#fff;border-color:var(--ink)}.chip:active{transform:translateY(2px)}
.pause{background:linear-gradient(rgba(9,35,54,.4),rgba(9,35,54,.82));backdrop-filter:blur(4px);color:#fff}.pause .primary{position:relative;bottom:auto;margin-top:26px}.pause .eyebrow{color:var(--ink)}
.panel{position:absolute;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(9,35,54,.6);backdrop-filter:blur(3px)}
.panel-card{width:min(420px,100%);max-height:86dvh;overflow:auto;padding:16px;border:3px solid var(--ink);border-radius:20px;background:#fff8e6;color:var(--ink);box-shadow:0 10px 0 rgba(16,37,58,.35)}
.panel-head{display:flex;align-items:center;gap:10px;margin-bottom:12px}.panel-head h3{flex:1;margin:0;font:900 30px/1 Barlow Condensed;letter-spacing:.04em;text-transform:uppercase}
.coin-chip{padding:6px 10px;border-radius:999px;background:#fff;border:2px solid var(--ink);font:900 12px/1 Nunito}
.x{width:36px;height:36px;border:2px solid var(--ink);border-radius:10px;background:#fff;color:var(--ink);font-weight:900;cursor:pointer}
.panel-body{display:flex;flex-direction:column;gap:10px;text-align:left}.panel-body p{margin:0!important;color:var(--ink)!important}.panel-body .big{font:900 24px/1.1 Barlow Condensed;letter-spacing:.03em}.panel-body .sub{font-size:13px!important;color:#4d6a80!important;font-weight:800}
.bar{height:14px;border:2px solid var(--ink);border-radius:999px;background:#fff;overflow:hidden}.bar i{display:block;height:100%;background:linear-gradient(#ffd24d,#ff9a2e)}
.look-sec h4{margin:6px 0;font:900 12px/1 Nunito;letter-spacing:.12em;text-transform:uppercase;color:#4d6a80}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:8px}
.look{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 4px;border:2px solid var(--ink);border-radius:12px;background:#fff;color:var(--ink);cursor:pointer;font:inherit}.look b{font:900 13px/1 Nunito}.look small{font:800 11px/1 Nunito;color:#4d6a80}
.look.on{background:#ffe9a8;box-shadow:inset 0 0 0 2px #ff9a2e}.look.locked{opacity:.78}.sw{display:flex;width:100%;height:22px;border:2px solid var(--ink);border-radius:7px;overflow:hidden}.sw i{flex:1}
.trophies{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}.trophies li{display:flex;gap:10px;align-items:center;padding:8px 10px;border:2px solid #cdbf9e;border-radius:12px;background:#fff;opacity:.6}
.trophies li.got{opacity:1;border-color:var(--ink);background:#fff3c4}.trophies span{font-size:22px}.trophies b{display:block;font:900 14px/1.1 Nunito}.trophies small{font:800 12px/1.2 Nunito;color:#4d6a80}
.row{display:flex;align-items:center;gap:10px;font:900 13px/1 Nunito}.row span{width:70px}.row input{flex:1;accent-color:#ff721f;height:28px}
.toast{position:absolute;z-index:60;left:50%;top:max(64px,calc(env(safe-area-inset-top) + 56px));transform:translate(-50%,-12px);opacity:0;pointer-events:none;max-width:88vw;padding:10px 16px;border-radius:999px;border:2px solid #fff;background:rgba(16,37,58,.94);color:#fff;font:900 14px/1.1 Nunito;box-shadow:0 6px 0 rgba(5,20,33,.3);white-space:nowrap}
.toast.show{animation:toast 2.3s both}@keyframes toast{0%{opacity:0;transform:translate(-50%,-12px)}10%,85%{opacity:1;transform:translate(-50%,0)}100%{opacity:0;transform:translate(-50%,-8px)}}
@media(max-width:600px){.hud{gap:6px}.dock{gap:6px}.dock-btn{font-size:9px}}
@media(max-height:640px){.hero-building{transform:translateX(-50%) scale(.7);transform-origin:bottom}}
@media(prefers-reduced-motion:reduce){.toast.show{animation:none;opacity:1;transform:translate(-50%,0)}}
.quiz{z-index:35;background:rgba(9,35,54,.72);backdrop-filter:blur(4px)}
.quiz-card{width:min(420px,100%);padding:18px;border:3px solid var(--ink);border-radius:20px;background:#fff8e6;color:var(--ink);box-shadow:0 10px 0 rgba(16,37,58,.35);display:flex;flex-direction:column;align-items:center;gap:12px}
.quiz-card .eyebrow{background:#ffd24d}.screen p.quiz-sub{margin:0;font-size:13px;color:#4d6a80}
.quiz-q{font:900 28px/1.2 Barlow Condensed;letter-spacing:.02em;text-align:center}.quiz-q .blank{display:inline-block;width:56px;height:1em;margin:0 6px;vertical-align:-3px;border-bottom:4px solid #ff721f}
.quiz-opts{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%}
.quiz-opt{position:relative;min-height:52px;padding:10px 12px;border:3px solid var(--ink);border-radius:14px;background:#fff;color:var(--ink);font:900 20px/1.1 Nunito;cursor:pointer;box-shadow:0 4px 0 rgba(16,37,58,.3)}
.quiz-opt i{position:absolute;left:8px;top:6px;font:900 10px/1 Nunito;color:#8aa0b3;font-style:normal}.quiz-opt:active{transform:translateY(3px)}
.quiz-opt.good{background:#b9f0c4;border-color:#1f8a3b;animation:qpop .35s}.quiz-opt.bad{background:#ffc6c0;border-color:#c0392b;animation:qshake .34s}
.quiz-opt:focus-visible{outline:3px solid #1b78d6;outline-offset:2px}
.screen p.quiz-msg{min-height:20px;margin:0;font-size:14px;font-weight:900}.quiz-msg.good{color:#1f8a3b}.quiz-msg.bad{color:#c0392b}
@keyframes qpop{50%{transform:scale(1.06)}}@keyframes qshake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
@media(prefers-reduced-motion:reduce){.quiz-opt.good,.quiz-opt.bad{animation:none}}
.quiz-cell{position:relative}.quiz-cell .quiz-opt{width:100%;padding-right:42px}
.quiz-hear{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:32px;height:32px;border:2px solid var(--ink);border-radius:50%;background:#fff8e6;font-size:14px;line-height:1;cursor:pointer;box-shadow:0 2px 0 rgba(16,37,58,.3)}
.quiz-hear:active{transform:translateY(-50%) scale(.92)}.quiz-hear:focus-visible{outline:3px solid #1b78d6;outline-offset:2px}
.gate{z-index:55;background:rgba(9,35,54,.78);backdrop-filter:blur(4px)}.gate-lock{font-size:30px;line-height:1}
.quiz-english{width:100%}.quiz-math{display:flex;gap:10px;width:100%;justify-content:center}
.num-input{width:140px;min-height:52px;padding:8px 12px;border:3px solid var(--ink);border-radius:14px;background:#fff;color:var(--ink);text-align:center;font:900 26px/1 Nunito;box-shadow:inset 0 3px 0 rgba(16,37,58,.1)}
.num-input:focus-visible{outline:3px solid #1b78d6;outline-offset:2px}.num-input.good{background:#b9f0c4;border-color:#1f8a3b}.num-input.bad{background:#ffc6c0;border-color:#c0392b}
.quiz-math .chip{min-height:52px;font-size:16px}
.quiz-card.shake{animation:qshake .34s}
.quiz-pick{display:flex;flex-direction:column;gap:6px}.quiz-pick b{font:900 13px/1 Nunito}.quiz-pick small{font:800 11px/1.3 Nunito;color:#4d6a80}
.seg{display:flex;gap:8px}.seg-btn{flex:1;min-height:42px;border:2px solid var(--ink);border-radius:12px;background:#fff;color:var(--ink);font:900 14px/1 Nunito;cursor:pointer;box-shadow:0 3px 0 rgba(16,37,58,.3)}
.seg-btn.on{background:#ffe9a8;box-shadow:inset 0 0 0 2px #ff9a2e,0 3px 0 rgba(16,37,58,.3)}.seg-btn:focus-visible{outline:3px solid #1b78d6;outline-offset:2px}
@media(prefers-reduced-motion:reduce){.quiz-card.shake{animation:none}}