:root{color-scheme:dark;--bg:#080c14;--surface:#0d1420;--line:#202d40;--text:#edf3fc;--muted:#8d9db4;--blue:#48aaff;--red:#ff4969;font-family:Inter,"Segoe UI","Microsoft YaHei",sans-serif}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text)}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;font-size:14px;font-weight:600;cursor:pointer;border-radius:8px;border:1px solid transparent;padding:13px 20px;transition:background .15s,transform .15s}button:hover{filter:brightness(1.12)}button:active{transform:translateY(1px)}button:focus-visible,a:focus-visible{outline:2px solid var(--blue);outline-offset:4px}button:disabled{opacity:.5;cursor:wait}[hidden]{display:none!important}.app{max-width:1344px;margin:auto;padding:0 56px}header{height:108px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{color:var(--text);font-size:29px;letter-spacing:-1.4px;font-weight:800;text-decoration:none;display:flex;align-items:center}.brand>span{color:var(--blue)}.brand small{font-size:10px;color:var(--muted);letter-spacing:1px;font-weight:500;margin:7px 0 0 13px}.header-note{font-size:12px;letter-spacing:2px;color:var(--muted)}.quiet{color:var(--muted);background:transparent;padding:10px 12px}.quiet:hover{color:var(--text);background:#142033}.home{min-height:650px;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:55px;padding:60px 0}.eyebrow{font-size:12px;letter-spacing:3px;color:var(--blue);margin:0 0 24px}h1{font-size:clamp(42px,4.4vw,64px);font-weight:650;line-height:1.25;letter-spacing:-2px;margin:0 0 26px}h1 span{color:var(--blue)}.lead{color:var(--muted);font-size:15px;line-height:1.9;margin:0 0 34px}.controls{display:flex;gap:12px;flex-wrap:wrap}.primary{background:var(--blue);color:#061325;padding:15px 25px}.primary span{margin-left:32px;font-size:20px}.secondary{background:#121d2c;border-color:#2a3b51;color:#dbe8fa}.hint{font-size:11px;color:var(--muted);line-height:1.8;margin-top:18px}.home-bottom{display:flex;gap:45px;align-items:center;margin-top:47px}.label{font-size:11px;letter-spacing:1.5px;color:var(--muted);display:block;margin-bottom:8px}strong{font-variant-numeric:tabular-nums}.home-bottom strong{font-size:32px;font-weight:500}.home-bottom p{color:#66758a;font-size:12px;line-height:1.8;border-left:1px solid var(--line);padding-left:30px}.hero-art{height:430px;position:relative;overflow:hidden;border:1px solid #25344b;background:radial-gradient(ellipse at 50% 60%,#10203b 0,transparent 66%),#0a111d;border-radius:12px;box-shadow:0 22px 90px #0004}.art-grid{position:absolute;inset:0;background-image:linear-gradient(#42618a12 1px,transparent 1px),linear-gradient(90deg,#42618a12 1px,transparent 1px);background-size:43px 43px}.orb{display:block;position:absolute;border-radius:50%}.blue{width:72px;height:72px;left:44%;top:44%;background:radial-gradient(circle at 32% 27%,#b7e4ff,#48aaff 35%,#1664ce 90%);box-shadow:0 0 45px #309dff52,inset 0 0 1px 2px #a4d7ff}.red{width:26px;height:26px;background:radial-gradient(circle at 30% 25%,#ffb1c1,#ff4969 45%,#ab1736);box-shadow:0 0 25px #ff49693a}.r1{top:21%;left:22%}.r2{top:70%;left:73%}.r3{top:32%;left:83%}.art-caption{position:absolute;bottom:25px;left:26px;font-size:11px;color:#7087a5;letter-spacing:4px}.art-plus{position:absolute;top:18px;right:23px;color:#435c7b}.hud{height:106px;display:flex;align-items:center;gap:65px}.hud strong{font-size:30px;font-weight:500}.hud strong span{font-size:15px;color:var(--muted);margin-left:3px}.hud>button{margin-left:auto}kbd{font:10px monospace;color:var(--muted);margin-left:12px}.arena{position:relative;width:100%;height:clamp(300px,60dvh,660px);border:1px solid #30435e;border-radius:10px;overflow:hidden;background:#0b121f;box-shadow:0 15px 50px #0003}canvas{width:100%;height:100%;display:block;touch-action:none}.game-footer{display:flex;align-items:center;justify-content:space-between;padding-top:12px;color:var(--muted);font-size:12px}.sensor-status{min-height:18px;color:var(--blue);font-size:12px;margin:0 0 12px}.overlay{position:absolute;inset:0;background:#050a14a8;display:grid;place-items:center;padding:20px}.modal{width:min(360px,100%);padding:30px;background:#0c1524f5;border:1px solid #30445f;border-radius:12px;text-align:center;box-shadow:0 20px 80px #0008}.modal .eyebrow{font-size:10px;margin-bottom:12px}.modal h2{font-size:35px;letter-spacing:-1px;margin:0 0 12px;font-weight:600}.muted{color:var(--muted);font-size:13px;line-height:1.7}.results{display:flex;justify-content:space-around;margin:26px 0 14px}.results strong{font-size:27px;font-weight:500}.modal button{width:100%;margin-top:9px}.modal .quiet{margin-top:4px}.record{color:var(--blue);font-size:12px;min-height:16px;margin:10px 0}.game{padding-bottom:15px}footer{display:flex;justify-content:space-between;border-top:1px solid var(--line);padding:24px 0;color:#66778f;font-size:11px;letter-spacing:.5px}dialog{background:#0e1828;color:var(--text);border:1px solid #324966;border-radius:12px;max-width:520px;width:calc(100% - 32px);padding:35px}dialog::backdrop{background:#030711b8}dialog h2{font-size:25px}dialog p{font-size:14px;line-height:1.9;color:#a9b7cd}dialog .eyebrow{color:var(--blue)}.close{float:right;background:transparent;color:var(--muted);font-size:24px;padding:0 5px} @media(max-width:760px){.app{padding:0 22px}header{height:76px}.header-note{display:none}.brand{font-size:25px}.home{grid-template-columns:1fr;gap:30px;padding:40px 0 30px;min-height:0}.intro{order:0}h1{font-size:44px}.lead{font-size:14px;margin-bottom:25px}.hero-art{height:230px}.blue{width:60px;height:60px;top:36%}.home-bottom{margin-top:25px}.home-bottom strong{font-size:27px}.home-bottom p{font-size:11px}.eyebrow{font-size:10px;margin-bottom:18px}.hud{height:94px;gap:22px}.hud strong{font-size:23px}.label{font-size:9px;letter-spacing:.6px}.hud button{padding:10px 13px;font-size:12px}.hud kbd{display:none}.arena{height:calc(100dvh - 255px);min-height:330px}.game-footer{font-size:10px;gap:4px}.game-footer .quiet{font-size:11px;padding:10px 6px}.modal{padding:22px}.modal h2{font-size:29px}.results{margin-top:18px}footer{font-size:9px;gap:12px;line-height:1.8}.primary,.secondary{font-size:13px}.hint{font-size:10px}}@media(max-height:600px) and (min-width:761px){header{height:66px}.hud{height:74px}.arena{height:65dvh;min-height:280px}.modal{padding:15px}.modal h2{font-size:25px}.results{margin:12px 0}.modal .eyebrow{display:none}.modal button{padding:9px}.record{margin:4px 0}.game-footer{padding-top:0}footer{padding:12px 0}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}
@media(max-width:760px){.arena{min-height:460px}}

/* Compact, flat presentation requested in the annotated reference. */
.app:has(#home[hidden]) header #help{visibility:hidden;pointer-events:none}
.pause-settings{display:flex;justify-content:center;gap:8px;border-top:1px solid var(--line);margin-top:10px;padding-top:6px}
.modal .pause-settings button{width:auto;font-size:11px;padding:7px 10px;margin:0}
.modal .sensor-status{font-size:11px;margin:0;min-height:0}
.modal .eyebrow{display:none}.modal .results{margin:14px 0 8px}
.modal:has(#resume[hidden]) .pause-settings{display:none}
.modal:has(#resume[hidden]) .sensor-status{display:none}
.modal{padding:22px}.modal h2{font-size:29px}.modal .results{margin:20px 0 10px}
.app{max-width:1064px;padding:0 40px}
.home{display:flex;justify-content:center;min-height:440px;padding:60px 0;gap:0}
.intro{text-align:center}.controls{justify-content:center}.home-bottom{justify-content:center;margin-top:34px}
.game{max-width:760px;margin:0 auto}.hud{gap:42px;height:94px}
.arena{height:auto;aspect-ratio:1000/680;min-height:0;box-shadow:none;border-radius:6px}
@media(max-width:760px){.app{padding:0 22px}.home{min-height:370px;padding:45px 0}.hud{gap:20px}.arena{aspect-ratio:auto;height:400px;min-height:0}.modal{padding:18px}.modal .eyebrow{display:none}.modal h2{font-size:26px;margin-bottom:8px}.modal .results{margin:16px 0 8px}.modal button{padding:10px}.modal .record{margin:5px 0;min-height:0}.modal .muted{margin:8px 0}.home-bottom{margin-top:30px}}
@media(max-height:600px) and (min-width:761px){.arena{height:auto;min-height:0}}
/* Enlarge desktop play while keeping the full board inside the viewport. */
.overlay .modal{background:transparent;border:0;box-shadow:none;padding:24px;width:min(360px,100%)}
.overlay .modal .results{margin:28px 0 24px}
.overlay .modal .record:empty{display:none}
.overlay .modal>button{display:block;background:transparent;border:0;box-shadow:none;color:var(--text);border-radius:0;padding:12px 16px;margin:18px 0 0;font-size:16px}
.overlay .modal>button.primary{color:var(--text)}
.overlay .modal>button.quiet{color:var(--text)}
.overlay .modal>button:hover{color:var(--blue);background:transparent}
.overlay .modal>button:focus-visible{outline:none}
.home-poster{display:block;width:min(560px,100%);height:auto;margin:0 auto 26px}
.home .intro{width:min(560px,100%)}
.home-title{margin:0 0 24px;text-align:center}
#home-status:empty{display:none}
.home-title h1{font-size:52px;line-height:1.1;font-weight:800;letter-spacing:-2px;margin:0}
.home-title h1 span{color:var(--blue)}
.home-title p{font-size:13px;line-height:1.5;letter-spacing:3px;color:var(--muted);margin:12px 0 0}
/* Match BrianStudio's staggered .85s fade/rise entrance. */
#sensor-home.is-lit{background:var(--blue);border-color:var(--blue);color:#061325}
#pause:focus-visible{outline:none}
#pause{display:inline-flex;align-items:center;justify-content:center;gap:12px;background:transparent;border:0;box-shadow:none}
.pause-icon{display:block;flex:none;color:var(--muted)}
#instructions{width:min(536px,calc(100% - 32px));max-width:536px;max-height:calc(100dvh - 32px);padding:27px 30px 28px;background:linear-gradient(130deg,#111c2c,#0d1522 75%);border:1px solid #30435e;border-radius:12px;box-shadow:0 24px 80px #0008;overflow-y:auto}
#instructions .close{position:absolute;right:23px;top:17px;float:none;padding:0 4px;font-size:26px;color:#8d9db4}
#instructions .help-kicker{font-size:12px;font-weight:650;letter-spacing:3px;line-height:1.4;color:#8bbaff;margin:0 0 10px}
#instructions h2{font-size:28px;line-height:1.2;letter-spacing:-.6px;margin:0 30px 19px 0;font-weight:700}
.control-guide{border-top:1px solid #425066;border-bottom:1px solid #425066;padding:18px 0;display:grid;gap:23px}
.control-row{display:grid;grid-template-columns:124px 1fr;align-items:center;gap:18px}
.control-art{padding-right:18px;border-right:1px solid #2d3d53;min-height:55px;display:flex;align-items:center;justify-content:center}
.key-art{flex-direction:column;gap:4px}.key-top,.key-bottom{display:flex;justify-content:center;gap:4px}
#instructions kbd{display:grid;place-items:center;width:24px;height:24px;border:1px solid #b2bdcc;border-radius:5px;color:#eaf1fc;font-size:13px;font-weight:600;margin:0;background:#f2f7ff08;box-shadow:inset 0 0 0 1px #ffffff15}
.tilt-art{width:108px;height:65px;display:block;flex:none}
#instructions .control-copy h3{font-size:16px;font-weight:650;line-height:1.3;margin:0 0 4px}
#instructions .control-copy p{font-size:12px;line-height:1.55;color:#b4bfd0;margin:0}
.help-rules{padding:17px 0 19px;border-bottom:1px solid #425066}
#instructions .help-confirm{margin-top:22px}
#instructions .help-rules .help-kicker{margin-bottom:14px}
.help-rules ul{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.help-rules li{display:flex;align-items:center;gap:13px;font-size:13px;line-height:1.45;color:#e0e7f2}
.rule-dot{width:15px;height:15px;border-radius:50%;flex:none}.rule-blue{background:#69a8f5}.rule-red{background:#ed746d}.rule-yellow{background:#f0d061}
#instructions .help-footnote{text-align:center;color:#97a6ba;font-size:12px;line-height:1.6;margin:13px 0 19px}
#instructions .help-confirm{width:100%;border:0;border-radius:9px;background:linear-gradient(#4b81d7,#3765b7);color:#f2f6ff;font-size:16px;font-weight:650;padding:13px 20px}
@keyframes help-arrive{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes help-backdrop{from{background-color:#03071100}to{background-color:#030711b8}}
@media(prefers-reduced-motion:no-preference){#instructions[open]{animation:help-arrive .32s cubic-bezier(.22,1,.36,1) both}#instructions[open]::backdrop{animation:help-backdrop .32s ease both}}
@media(max-width:480px){#instructions{padding:23px 20px}#instructions h2{font-size:24px}.control-row{grid-template-columns:88px 1fr;gap:13px}.control-art{padding-right:12px}.tilt-art{width:83px}#instructions .control-copy h3{font-size:14px}#instructions .control-copy p{font-size:11px}.help-rules li{font-size:12px}#instructions .help-footnote{font-size:10px}}
.score-cell{position:relative;padding-right:26px}
.score-bonus{position:absolute;bottom:4px;right:0;font-size:15px;font-weight:500;color:#ffd34d;opacity:0;pointer-events:none}
.score-bonus{line-height:18px}
header>.brand,header>#help{translate:0 8px}
.header-actions{display:flex;align-items:center;gap:14px;translate:0 8px}
.header-left{display:flex;align-items:center;gap:20px;translate:0 8px}
.app:has(#home:not([hidden])) .header-left>.brand{display:none}
#sound-toggle{display:flex;align-items:center;gap:8px;padding:10px 0;background:transparent;border:0;color:var(--muted);font-size:12px;white-space:nowrap}
#sound-toggle:hover{color:var(--blue);background:transparent}
#sound-toggle:focus,#sound-toggle:focus-visible{outline:none;box-shadow:none}
#sound-toggle svg{width:17px;height:17px;flex:none}
#sound-label{display:none}
@media(max-width:760px){.header-left{gap:12px}#sound-label{display:none}.header-actions{gap:6px}}
.header-actions>#help{background:transparent;transition:transform .22s ease,color .22s ease}
@media(hover:hover) and (prefers-reduced-motion:no-preference){.header-actions>#help:hover{transform:translateY(-4px)}}
.app:has(#home[hidden]) .header-actions{visibility:hidden;pointer-events:none}
.language-picker{position:relative}
#language-toggle{display:flex;align-items:center;gap:8px;font-size:12px;padding:10px 8px;background:transparent;min-width:52px;justify-content:center}
.language-menu{position:absolute;right:0;top:calc(100% + 8px);z-index:20;min-width:116px;padding:5px;background:#111c2b;border:1px solid #2d3d53;border-radius:8px;box-shadow:0 10px 28px #0005}
.language-menu button{display:block;width:100%;padding:10px 12px;text-align:left;color:var(--text);font-size:12px;background:transparent;border:0;border-radius:4px}
.language-menu button:hover,.language-menu button[aria-checked="true"]{color:var(--blue);background:#1b2c42}
.app:has(#home:not([hidden])) header>.brand{visibility:hidden;pointer-events:none}
header>#help{transition:translate .22s ease,color .22s ease;background:transparent}
@media(hover:hover) and (prefers-reduced-motion:no-preference){header>#help:hover{translate:0 4px;background:transparent}}
.flight-a{--flight-x:-104px;--flight-y:-54px}
.flight-b{--flight-x:101px;--flight-y:-58px}
.flight-c{--flight-x:-75px;--flight-y:-16px}
.flight-d{--flight-x:-99px;--flight-y:60px}
.flight-e{--flight-x:107px;--flight-y:62px}
@keyframes red-arrive{from{translate:var(--flight-x) var(--flight-y)}to{translate:0 0}}
@media(prefers-reduced-motion:no-preference){
  #home:not([hidden]) .red-arrival{animation:red-arrive 1.15s cubic-bezier(.22,1,.36,1) .38s backwards}
}
@keyframes bb-fade-in{from{opacity:0}to{opacity:1}}
@keyframes bb-rise-in{from{opacity:0;translate:0 26px}to{opacity:1;translate:0 0}}
@media(prefers-reduced-motion:no-preference){
  header{animation:bb-fade-in .85s ease backwards}
  #home:not([hidden]) .home-title h1{animation:bb-rise-in .85s cubic-bezier(.22,1,.36,1) .18s backwards}
  #home:not([hidden]) .home-title p{animation:bb-rise-in .85s cubic-bezier(.22,1,.36,1) .28s backwards}
  #home:not([hidden]) .home-poster{animation:bb-fade-in .85s ease .38s backwards}
  #home:not([hidden]) .controls{animation:bb-fade-in .85s ease .48s backwards}
  #home:not([hidden]) .hint{animation:bb-fade-in .85s ease .58s backwards}
  #home:not([hidden]) .home-bottom{animation:bb-rise-in .85s cubic-bezier(.22,1,.36,1) .68s backwards}
}
@media(max-width:760px){.home-title h1{font-size:40px}.home-title p{font-size:11px;letter-spacing:2px}.home-title{margin-bottom:18px}}
.home{padding:calc(34px + clamp(40px,9dvh,110px)) 0 44px}
@media(max-width:760px){.home-poster{margin-bottom:24px}.home{padding-top:24px}}
@media(min-width:1024px){
  .app{max-width:1360px}
  .app:has(#home[hidden]) header{height:72px}
  .game{max-width:min(1200px,calc((100dvh - 180px) * 1.470588))}
  .game .hud{height:78px}
}