:root{--bg:#0b1020;--bg2:#121a33;--panel:#18223f;--panel2:#1f2b50;--line:#2c3a66;--text:#e8ecff;--muted:#8d98c4;
--accent:#ffcc33;--accent2:#5ce1e6;--good:#4ade80;--warn:#fbbf24;--bad:#f87171;--purple:#a78bfa;
--font:"Trebuchet MS","Segoe UI",system-ui,sans-serif;--mono:ui-monospace,Consolas,"Courier New",monospace}
*{box-sizing:border-box}
html,body{margin:0;background:radial-gradient(ellipse at top,#1a2450 0%,var(--bg) 60%);color:var(--text);font-family:var(--font);min-height:100vh}
a{color:var(--accent2)}
.btn{display:inline-flex;align-items:center;gap:6px;border:0;border-radius:10px;padding:10px 18px;font:700 15px var(--font);cursor:pointer;
 background:linear-gradient(#ffd95a,#f5a623);color:#2a1a00;box-shadow:0 4px 0 #b06d00,0 6px 14px rgba(0,0,0,.4);transition:transform .08s,box-shadow .08s;text-decoration:none}
.btn:hover{filter:brightness(1.08)}.btn:active{transform:translateY(3px);box-shadow:0 1px 0 #b06d00}
.btn.secondary{background:linear-gradient(#3b4b82,#2a3766);color:var(--text);box-shadow:0 4px 0 #18214a,0 6px 14px rgba(0,0,0,.4)}
.btn.small{padding:6px 10px;font-size:13px;border-radius:8px}
.btn:disabled{opacity:.45;cursor:not-allowed;filter:grayscale(.6)}
.panel{background:linear-gradient(180deg,var(--panel2),var(--panel));border:2px solid var(--line);border-radius:16px;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.modal-bg{position:fixed;inset:0;background:rgba(4,8,20,.75);display:flex;align-items:center;justify-content:center;z-index:50;backdrop-filter:blur(3px)}
.modal{max-width:560px;width:92%;padding:26px;animation:pop .25s ease-out}
@keyframes pop{from{transform:scale(.85);opacity:0}to{transform:scale(1);opacity:1}}
.hidden{display:none!important}
.stars{color:var(--accent);letter-spacing:2px}.stars .off{color:#3a4570}
.pixel-title{font-weight:900;letter-spacing:1px;text-shadow:0 3px 0 #b06d00,0 0 18px rgba(255,204,51,.35);color:var(--accent)}
/* ---- mobile / app-shell foundations ---- */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;overscroll-behavior:none}
body{-webkit-tap-highlight-color:transparent;touch-action:manipulation;overscroll-behavior:none;
 padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
button,.btn,a{touch-action:manipulation;-webkit-user-select:none;user-select:none}
.btn{min-height:44px;justify-content:center}.btn.small{min-height:44px;padding:8px 12px}
.modal{max-height:calc(100vh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom));overflow:auto;-webkit-overflow-scrolling:touch}
@media(max-width:480px){.modal{padding:18px;width:96%}.row .btn{flex:1}}
/* ---- glossary terms + popovers ---- */
.term{font:inherit;color:inherit;background:none;border:0;padding:0 1px;margin:0;cursor:help;display:inline;
 text-decoration:underline dotted;text-decoration-color:var(--accent2);text-decoration-thickness:2px;text-underline-offset:3px;border-radius:4px;
 -webkit-user-select:text;user-select:text;min-height:0;line-height:inherit;text-align:inherit}
.term::after{content:"ⓘ";font-size:.7em;vertical-align:super;margin-left:1px;color:var(--accent2);text-decoration:none;display:inline-block}
.bubble .term{text-decoration-color:#2a7f86}.bubble .term::after{color:#2a7f86}
.term:focus-visible,[data-term]:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.term.term-open{background:rgba(92,225,230,.18)}
.gloss-pop{position:fixed;z-index:100;background:#0f1733;color:var(--text);border:2px solid var(--accent2);border-radius:12px;padding:10px 12px;
 font:14px/1.4 var(--font);box-shadow:0 10px 30px rgba(0,0,0,.55);max-width:340px;animation:pop .14s ease-out;text-align:left;
 pointer-events:none;overflow-wrap:anywhere} /* display-only: taps pass through to what is underneath */
.gloss-pop.compact{padding:7px 10px;font-size:13px}.gloss-pop.compact .gp-int{display:none}.gloss-pop.compact .gp-tech{font-size:12px}
.gloss-pop.clipped{overflow:hidden;-webkit-mask-image:linear-gradient(#000 calc(100% - 22px),transparent);mask-image:linear-gradient(#000 calc(100% - 22px),transparent)}
.gloss-pop.clipped:before{display:none}
.gloss-pop[hidden]{display:none}
.gloss-pop:before{content:"";position:absolute;left:var(--arrow-x,20px);top:-8px;margin-left:-7px;border:7px solid transparent;border-top:0;border-bottom-color:var(--accent2)}
.gloss-pop.above:before{top:auto;bottom:-8px;border-bottom:0;border-top:7px solid var(--accent2)}
.gp-title{font-weight:900;color:var(--accent2);margin-bottom:4px}.gp-analogy{margin-bottom:6px}.gp-tech{color:#c9d1f2;font-size:13px}
.gp-int{margin-top:6px;font-size:12.5px;color:var(--accent)}.gp-int b{color:var(--accent)}
.gloss-sheet-bg{position:fixed;inset:0;z-index:90;background:rgba(4,8,20,.7);display:flex;align-items:flex-end;justify-content:center}
.gloss-sheet-bg[hidden]{display:none}
.gloss-sheet{width:100%;max-width:640px;max-height:88vh;display:flex;flex-direction:column;border-radius:18px 18px 0 0;padding:12px 14px calc(12px + env(safe-area-inset-bottom));animation:pop .2s}
@media(min-width:700px){.gloss-sheet-bg{align-items:center}.gloss-sheet{border-radius:18px;max-height:80vh}}
.gs-head{display:flex;align-items:center;justify-content:space-between}.gs-head h2{margin:0}
.gs-search{margin:8px 0;min-height:44px;border-radius:10px;border:2px solid var(--line);background:var(--bg2);color:var(--text);padding:0 12px;font:15px var(--font)}
.gs-list{overflow:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.gs-list h3{margin:12px 0 6px;font-size:12px;color:var(--muted);letter-spacing:1px;text-transform:uppercase}
.gs-item{background:var(--bg2);border-radius:10px;margin-bottom:6px;padding:0 12px;border:1px solid var(--line)}
.gs-item summary{cursor:pointer;min-height:44px;padding:8px 0;font-weight:700;list-style:none}
.gs-item summary::-webkit-details-marker{display:none}
.gs-an{display:block;font-weight:400;font-size:12.5px;color:var(--muted)}.gs-item p{margin:0 0 10px;font-size:13.5px;line-height:1.45}
.iconbtn{min-width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;background:var(--bg2);color:var(--text);border:2px solid var(--line);border-radius:12px;font-size:18px;cursor:pointer;text-decoration:none;padding:0 8px}

/* ---- reduced motion: no decorative animation or transitions ---- */
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:0s!important;animation-delay:0s!important;animation-iteration-count:1!important;transition:none!important;scroll-behavior:auto!important}}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}