:root{--th-body-top: #d8e8d8;--th-body-bottom: #c4d4c4;--th-body-border: #94a894;--th-panel-top: #f0e4cc;--th-panel-bottom: #e0d0b0;--th-screen-bezel: #1a0808;--th-accent: #e07060;--th-pause-btn: #3e4a58;--th-launch-btn: #c85858;--th-ink-panel: #5a3018;--th-ink-brand: #3e4a58;--th-ink-subtle: #7a8a78;--th-recess: #6a4830;--th-led-on: #e07a7a;--th-ball-base: #c85858;--th-ball-dark: #5a1a1a;--th-ball-light: #e89898}html,body{margin:0;padding:0;height:100%;width:100%;background:#07070d;overflow:hidden;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:#e6f4ff;-webkit-tap-highlight-color:transparent;touch-action:manipulation}body{display:flex;align-items:stretch;justify-content:center;background:linear-gradient(180deg,var(--th-body-top) 0%,var(--th-body-bottom) 100%);transition:background .24s ease}#device{display:flex;flex-direction:column;align-items:stretch;width:100%;max-width:640px;height:100%;padding:12px 18px calc(24px + env(safe-area-inset-bottom)) 18px;box-sizing:border-box;gap:10px}#device>#controls{margin-top:auto}#brand{display:flex;align-items:center;justify-content:space-between;width:100%;max-width:540px;margin:0 auto;padding:0 4px;font-family:Space Grotesk,system-ui,sans-serif;flex:0 0 auto}.brand-name{font-weight:900;font-style:italic;font-size:18px;letter-spacing:1px;color:var(--th-ink-brand);transition:color .24s ease}.brand-name .brand-version{font-size:10px;font-style:normal;margin-left:8px;color:var(--th-ink-subtle);letter-spacing:3px}.brand-led{display:flex;align-items:center;gap:6px;font-size:10px;color:var(--th-ink-subtle);letter-spacing:2px;font-weight:700}.brand-led:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--th-led-on);box-shadow:inset 0 1px 2px #0000004d,0 0 6px var(--th-led-on)}#screen-bezel{background:var(--th-screen-bezel);border-radius:12px;padding:2px;box-shadow:0 1px #fff6;transition:background .24s ease;flex:0 0 auto;align-self:stretch;display:flex;align-items:center;justify-content:center}#game{position:relative;border-radius:12px;overflow:hidden;background:transparent}#game canvas{display:block;width:100%!important;height:100%!important;border-radius:4px}#controls{display:grid;grid-template-columns:1fr auto 1fr;grid-template-rows:auto auto;align-items:center;justify-items:center;column-gap:12px;row-gap:8px;width:100%;max-width:540px;margin:0 auto;padding:8px 24px;box-sizing:border-box;flex:0 0 auto;background:transparent}.ctrl-label{font-family:Space Grotesk,system-ui,sans-serif;font-size:11px;letter-spacing:3px;color:var(--th-ink-brand);font-weight:800;text-shadow:0 1px 0 rgba(255,255,255,.35);transition:color .24s ease}.ctrl-pause,.ctrl-launch{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:44px;height:44px;padding:0;border:none;border-radius:14px;cursor:pointer;box-shadow:inset 0 -3px 4px #00000040,inset 0 2px 3px #fff6,0 3px #00000040;display:inline-flex;align-items:center;justify-content:center;-webkit-tap-highlight-color:transparent;transition:transform 80ms ease,background .24s ease}.ctrl-pause:active,.ctrl-launch:active{transform:translateY(1px) scale(.98);box-shadow:inset 0 2px 4px #00000080,0 1px #00000040}.ctrl-pause{flex-direction:column;gap:3px;background:linear-gradient(180deg,var(--th-pause-btn) 0%,color-mix(in srgb,var(--th-pause-btn) 70%,black) 100%)}.ctrl-pause .menu-glyph{display:inline-block;width:18px;height:2.5px;background:color-mix(in srgb,var(--th-pause-btn) 35%,black);border-radius:1.5px;box-shadow:0 1px #fff6;transition:background .24s ease}.ctrl-launch{background:linear-gradient(180deg,var(--th-launch-btn) 0%,color-mix(in srgb,var(--th-launch-btn) 70%,black) 100%)}.ctrl-launch .action-glyph{width:14px;height:14px;border-radius:50%;background:color-mix(in srgb,var(--th-launch-btn) 35%,black);box-shadow:inset 0 -1px 1px #0000004d,inset 0 1px 1px #fff6;transition:background .24s ease}.trackball-bezel{position:relative;width:66px;height:66px;box-sizing:border-box;border-radius:50%;padding:3px;background:radial-gradient(circle at 50% 50%,color-mix(in srgb,var(--th-recess) 88%,white 12%) 50%,var(--th-recess) 80%,color-mix(in srgb,var(--th-recess) 75%,black) 100%);box-shadow:inset 0 3px 5px #00000059,inset 0 -1px 2px #ffffff1f,0 1px #fff3,0 -1px #0003,0 2px 4px #0000002e;display:flex;align-items:center;justify-content:center;transition:background .24s ease;touch-action:none}.trackball-bezel:after{content:"";position:absolute;top:1.5px;right:1.5px;bottom:1.5px;left:1.5px;border-radius:50%;background:radial-gradient(circle at 50% 50%,transparent 65%,rgba(0,0,0,.16) 100%);pointer-events:none;z-index:1}.trackball{width:100%;height:100%;border-radius:50%;position:relative;overflow:hidden;cursor:grab;z-index:3;background:radial-gradient(circle at 32% 28%,var(--th-ball-light) 0%,var(--th-ball-base) 38%,color-mix(in srgb,var(--th-ball-base) 50%,var(--th-ball-dark)) 78%,var(--th-ball-dark) 100%);box-shadow:0 3px 6px #0009,0 0 14px color-mix(in srgb,var(--th-ball-base) 30%,transparent);user-select:none;-webkit-user-select:none;-webkit-user-drag:none;touch-action:none;transition:background .24s ease,box-shadow .24s ease}.trackball-light{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:50%;pointer-events:none;background:radial-gradient(circle at 30% 25%,#ffffff80,#fff0 22%),radial-gradient(circle at 36% 30%,#ffffff2e,#fff0 40%),radial-gradient(circle at 70% 78%,#00000040,#0000 55%);box-shadow:inset 0 -3px 7px #00000038}.trackball:active,.trackball.is-dragging{cursor:grabbing;box-shadow:0 2px 4px #0009,0 0 22px color-mix(in srgb,var(--th-ball-base) 50%,transparent)}.trackball-grip{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;border-radius:50%;pointer-events:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='80'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.5' numOctaves='2' stitchTiles='stitch' seed='7'/></filter><rect width='80' height='80' filter='url(%23n)'/></svg>");background-size:80px 80px;background-repeat:repeat;background-position:var(--grip-x, 0px) var(--grip-y, 0px);mix-blend-mode:overlay;opacity:.85;-webkit-mask-image:radial-gradient(circle,#000 70%,rgba(0,0,0,.6) 92%,transparent 100%);mask-image:radial-gradient(circle,#000 70%,rgba(0,0,0,.6) 92%,transparent 100%)}:root{--neon: var(--th-accent);--neon-soft: color-mix(in srgb, var(--th-accent) 18%, transparent);--neon-glow: 0 0 18px color-mix(in srgb, var(--th-accent) 35%, transparent);--text: #e6f4ff;--dim: #7f8ea6;--bg: #07070d}#ui-root{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--text)}#ui-root .screen{position:absolute;top:0;right:0;bottom:0;left:0;display:none;flex-direction:column;align-items:center;justify-content:center;gap:1rem;padding:1.6rem 1rem;box-sizing:border-box;text-align:center;background:#07070df0;pointer-events:auto;overflow-y:auto}#ui-root[data-screen=title] .screen-title,#ui-root[data-screen=gameover] .screen-gameover,#ui-root[data-screen=entername] .screen-entername,#ui-root[data-screen=settings] .screen-settings,#ui-root[data-screen=pause] .screen-pause{display:flex}.logo{font-size:clamp(28px,7vw,48px);font-weight:800;letter-spacing:2px;margin:0;color:var(--neon);text-shadow:0 0 12px rgba(108,240,255,.55),0 0 28px rgba(108,240,255,.25)}.subtitle{margin:0;font-size:clamp(11px,2.6vw,16px);letter-spacing:8px;color:var(--dim);text-transform:uppercase}.section-heading{margin:0;font-size:clamp(14px,3vw,20px);letter-spacing:4px;color:var(--text)}.leaderboard{list-style:none;margin:0;padding:.4rem .8rem;border:1px solid rgba(108,240,255,.25);border-radius:6px;min-width:220px;background:#6cf0ff0a;font-size:clamp(13px,3vw,16px)}.leaderboard li{display:grid;grid-template-columns:1.2rem 3.2rem 1fr;gap:.6rem;padding:.16rem .2rem;text-align:left;font-variant-numeric:tabular-nums}.leaderboard li.empty,.leaderboard li.empty .score,.leaderboard li.empty .name,.leaderboard li.empty .rank{color:var(--dim)}.leaderboard li .score{text-align:right}.big-score{margin:0;font-size:clamp(18px,4.5vw,26px);letter-spacing:4px;color:var(--text);font-variant-numeric:tabular-nums}.prompt{margin:0;font-size:clamp(12px,2.8vw,15px);color:var(--text);letter-spacing:1px}.hint{margin:0;font-size:clamp(10px,2.4vw,13px);color:var(--dim);letter-spacing:.5px}.primary-btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;font:inherit;font-weight:700;letter-spacing:3px;font-size:clamp(13px,3vw,17px);color:var(--neon);background:var(--neon-soft);border:2px solid var(--neon);border-radius:8px;padding:.8em 1.4em;cursor:pointer;box-shadow:var(--neon-glow);transition:transform 80ms ease,background .12s ease;-webkit-tap-highlight-color:transparent}.primary-btn:hover,.primary-btn:focus-visible{background:#6cf0ff52;outline:none}.primary-btn:active{transform:scale(.97)}#ui-entername-form{display:flex;flex-direction:column;align-items:center;gap:1rem}#ui-name-input{width:220px;max-width:60vw;padding:.4em;font-family:inherit;font-size:clamp(36px,11vw,52px);font-weight:800;text-align:center;text-transform:uppercase;letter-spacing:14px;color:var(--neon);background:var(--neon-soft);border:2px solid var(--neon);border-radius:8px;outline:none;caret-color:var(--neon);box-shadow:var(--neon-glow)}#ui-name-input::placeholder{color:color-mix(in srgb,var(--th-accent) 40%,transparent)}.button-row{display:flex;flex-direction:column;gap:.6rem;align-items:stretch;width:min(280px,80%)}.secondary-btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;font:inherit;font-weight:700;letter-spacing:3px;font-size:clamp(12px,2.6vw,15px);color:var(--text);background:transparent;border:1px solid rgba(230,244,255,.4);border-radius:8px;padding:.7em 1.2em;cursor:pointer;transition:transform 80ms ease,background .12s ease,border-color .12s ease;-webkit-tap-highlight-color:transparent}.secondary-btn:hover,.secondary-btn:focus-visible{background:#e6f4ff14;border-color:#e6f4ffb3;outline:none}.is-menu-focus{outline:3px solid var(--th-accent);outline-offset:4px;box-shadow:0 0 0 6px color-mix(in srgb,var(--th-accent) 30%,transparent),0 0 24px color-mix(in srgb,var(--th-accent) 50%,transparent);position:relative;z-index:1;transform:scale(1.05);transition:transform .14s ease,outline-color .14s ease,box-shadow .14s ease}.theme-card.is-menu-focus{outline:5px solid var(--th-accent);outline-offset:6px;transform:scale(1.1);animation:menu-focus-pulse 1.6s ease-in-out infinite}@keyframes menu-focus-pulse{0%,to{box-shadow:0 0 0 4px var(--th-accent),0 0 32px color-mix(in srgb,var(--th-accent) 60%,transparent),0 12px 24px #00000080}50%{box-shadow:0 0 0 7px var(--th-accent),0 0 64px color-mix(in srgb,var(--th-accent) 85%,transparent),0 12px 24px #00000080}}.secondary-btn:active{transform:scale(.97)}.theme-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;width:min(360px,86%)}.theme-card{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:2px solid transparent;border-radius:12px;padding:12px 10px 10px;background:linear-gradient(180deg,var(--card-body-top) 0%,var(--card-body-bottom) 100%);display:flex;flex-direction:column;align-items:center;gap:8px;cursor:pointer;font-family:inherit;-webkit-tap-highlight-color:transparent;transition:transform 80ms ease,border-color .12s ease,box-shadow .12s ease;box-shadow:0 4px 10px #00000059}.theme-card:hover,.theme-card:focus-visible{outline:none;transform:translateY(-1px);box-shadow:0 8px 16px #00000073}.theme-card:active{transform:scale(.98)}.theme-card[aria-pressed=true]{border-color:var(--card-accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--card-accent) 35%,transparent),0 8px 18px #00000073}.theme-card .theme-preview{width:100%;aspect-ratio:5 / 4;border-radius:8px;background:linear-gradient(180deg,var(--card-panel-top) 0%,var(--card-panel-bottom) 100%);display:flex;align-items:center;justify-content:center;position:relative;box-shadow:inset 0 -3px 6px #0000004d,inset 0 2px 3px #fff3}.theme-card .theme-ball{width:38%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 32% 28%,var(--card-ball-light) 0%,var(--card-ball-base) 38%,color-mix(in srgb,var(--card-ball-base) 50%,var(--card-ball-dark)) 80%,var(--card-ball-dark) 100%);box-shadow:0 2px 4px #00000080}.theme-card .theme-name{font-family:Space Grotesk,system-ui,sans-serif;font-weight:800;letter-spacing:3px;font-size:12px;color:var(--card-ink)}.theme-card .theme-check{position:absolute;top:6px;right:6px;width:18px;height:18px;border-radius:50%;background:var(--card-accent);color:#fff;display:none;align-items:center;justify-content:center;font-size:12px;font-weight:900;box-shadow:0 1px 3px #0006}.theme-card[aria-pressed=true] .theme-check{display:flex}