:root{color-scheme:dark;font-family:Arial,'Noto Sans JP',sans-serif;color:#e4f1f4;background:#080d14;--mint:#92e7d8;--muted:#8ea4b1;--line:#35444e}*{box-sizing:border-box}body{margin:0;min-height:100dvh;background:radial-gradient(ellipse at 15% 25%,#1a344b66,transparent 60%),radial-gradient(ellipse at 85% 80%,#1f273244,transparent 60%)}button,a{-webkit-tap-highlight-color:transparent}.stars{position:fixed;inset:0;pointer-events:none;background-image:radial-gradient(1px 1px at 20% 32%,#819cb5 60%,transparent),radial-gradient(1px 1px at 70% 14%,#809bb8 60%,transparent);background-size:217px 263px,313px 227px;opacity:.3}main{position:relative;max-width:1100px;margin:auto;padding:22px 30px max(20px,env(safe-area-inset-bottom))}header{display:flex;align-items:center;gap:24px;height:50px}#brand{font-size:20px;letter-spacing:2px;font-weight:800;color:#e7f4f3;text-decoration:none;display:flex;align-items:center;gap:12px;line-height:1.2}#brand small{display:block;font-size:7px;letter-spacing:2.7px;margin-top:7px;color:#8ca4b4}.brand-orbit{font-size:35px;color:#a2e9d8}.tag{margin-left:10px;font-size:8px;letter-spacing:1px;color:#7f97a6;border-left:1px solid #354159;padding-left:24px}.tag b{color:#94dbc7;font-weight:400}.tag i{display:inline-block;width:4px;height:4px;background:#a0dfbd;border-radius:50%;margin-right:6px}button{font:inherit;cursor:pointer;color:inherit;border:1px solid #40535d;background:#16232c;min-height:44px;border-radius:4px}button:hover{border-color:#9dcaba;background:#20333d}button:focus-visible,a:focus-visible{outline:2px solid #b4ffdf;outline-offset:3px}button:disabled{cursor:not-allowed;opacity:.45}#sound{margin-left:auto;font-size:10px;padding:0 14px;background:#121c25}.headline{margin:16px 0;display:flex;align-items:center;justify-content:space-between}.headline span{font-size:8px;letter-spacing:2px;color:#8dadb4}.headline h1{font-size:11px;letter-spacing:2px;font-weight:400;color:#99aab5}.game{max-width:620px;margin:auto;border:1px solid #43525c;border-radius:9px;overflow:hidden;box-shadow:0 25px 100px #0009,0 0 80px #355c6c12;background:#090e16}.score{display:flex;align-items:center;justify-content:space-between;padding:12px 22px;border-bottom:1px solid #35434e;background:linear-gradient(#1b2732,#121c27);font-size:9px;letter-spacing:2px}.score>div{display:flex;align-items:center;gap:11px}.score strong{font-size:30px;font-variant-numeric:tabular-nums;letter-spacing:0}.scorecenter{flex-direction:column;gap:5px!important;font-size:8px;letter-spacing:1px;color:#b0c5d1}.scorecenter small{font-size:7px;letter-spacing:.2px;color:#7b91a3}.dot{display:inline-block;width:5px;height:5px;border-radius:50%}.cyan{background:#9cebd8;box-shadow:0 0 9px #7ce3cf66}.pink{background:#ef94b1;box-shadow:0 0 9px #f56b9b55}#viewport{height:min(78dvh,800px);min-height:450px;position:relative;touch-action:none;overflow:hidden;background:#080c13}canvas{display:block;width:100%;height:100%}[hidden]{display:none!important}.cockpit{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;background:linear-gradient(110deg,#25313c,#141f29 32%,#17212a 70%,#28343e);border:8px solid #1e2b36;box-shadow:inset 0 0 0 1px #61717c,inset 0 0 55px #0009}.cockpit:before,.cockpit:after{content:'';position:absolute;z-index:5;pointer-events:none;width:6px;height:6px;border-radius:50%;background:linear-gradient(135deg,#9cabb4,#354552);box-shadow:0 0 0 2px #101921}.cockpit:before{left:4px;top:4px}.cockpit:after{right:4px;bottom:4px}.cockpit-top,.cockpit-bottom{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 17px;font-size:8px;letter-spacing:1.3px;background:#0d1823;border-bottom:1px solid #53616b;color:#9eb3bd;flex-shrink:0}.cockpit-top .dot{margin-right:7px}.cockpit-top span:last-child{color:#bfd7d3;letter-spacing:1px}.cockpit-bottom{border:0;border-top:1px solid #4b5962;padding:11px 17px;font-size:7px;letter-spacing:.6px;background:repeating-linear-gradient(135deg,#27343b 0 5px,#202b32 5px 10px)}.cockpit-bottom b{color:#aad2be;font-weight:400}.setup-progress{display:flex;align-items:center;gap:12px;font-size:8px;letter-spacing:.6px;padding:13px 20px;color:#657e8e;flex-shrink:0;background:#101b26}.setup-progress .active{color:#a5f1da}.setup-progress i{height:1px;background:#374b58;flex:1}#setupScroller{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;touch-action:pan-y;padding:16px 24px 22px;scrollbar-color:#637a88 #15212a;scrollbar-width:thin}.mission-window{height:99px;position:relative;overflow:hidden;border:3px solid #0a1219;border-radius:26% 26% 9px 9px/24% 24% 8px 8px;box-shadow:0 0 0 1px #60727c,inset 0 0 20px #000;background:radial-gradient(1px 1px at 15% 20%,#b9cfdf 70%,transparent),radial-gradient(1px 1px at 65% 30%,#b9cfdf 70%,transparent),#060c16}.window-earth{position:absolute;width:31px;height:31px;left:67%;top:12px;border-radius:100%;background:radial-gradient(ellipse at 28% 35%,#dae6e8 0 7%,transparent 8%),radial-gradient(ellipse at 45% 55%,#638a87 0 17%,transparent 18%),radial-gradient(circle at 30% 30%,#688cb5,#1c3753 65%,#060b14);box-shadow:0 0 5px #94b4e238}.window-moon{position:absolute;width:130%;height:110px;left:-15%;bottom:-80px;border-radius:50% 55% 0 0;background:radial-gradient(ellipse at 38% 5%,#171f27 0 5%,#75818b 5.2% 6.5%,transparent 7%),radial-gradient(ellipse at 68% 12%,#303842 0 6%,#89919b 6.2% 7%,transparent 7.5%),linear-gradient(#84909a,#3d4856)}.window-grid{position:absolute;inset:0;background:linear-gradient(90deg,transparent 49.8%,#708e8b44 50%,transparent 50.3%),linear-gradient(transparent 49.8%,#708e8b33 50%,transparent 50.3%)}.window-label{position:absolute;left:13px;top:12px;font-size:6px;letter-spacing:1px;color:#8aa6b3}#sectorCode{position:absolute;left:13px;bottom:10px;font-size:14px;letter-spacing:3px;color:#daf5e7}.reticle{position:absolute;width:24px;height:24px;border:1px solid #84b2a455;border-radius:50%;left:calc(50% - 12px);top:calc(50% - 12px)}.mission-title{margin:16px 0 13px}.mission-title>small{font-size:8px;color:#96b4bc;letter-spacing:1.8px}h2{font-size:26px;letter-spacing:2px;margin:7px 0 8px;font-weight:700}.mission-title p{font-size:10px;color:#9fb4c1;line-height:1.7;margin:0}.mission-title p b{color:#d1dedf;font-weight:400}.stages{display:grid;grid-template-columns:1fr 1fr;gap:8px}.stage{--course:#9ad7cc;text-align:left;display:flex;align-items:center;gap:10px;padding:12px 11px;background:linear-gradient(120deg,#1b2a36,#101c27);border-color:#43555f;position:relative;min-height:75px}.stage.selected,.rackets .selected{border-color:#97d8c4;background:linear-gradient(110deg,#2c4b4b,#1b3538);box-shadow:inset 3px 0 #a5edcf}.stage.selected:after{content:'✓';position:absolute;right:7px;top:5px;font-size:9px;color:#a3e6cd}.stage>div{display:flex;flex-direction:column;gap:6px;min-width:0}.stage span:not(.course-symbol){font-size:6px;letter-spacing:1.3px;color:#92b0ba}.stage b{font-size:11px;letter-spacing:.3px;font-weight:600}.stage small{font-size:8px;color:#91a7b4;line-height:1.4}.stage:last-child{grid-column:1/-1;min-height:65px}.stage:nth-child(2){--course:#f3c979}.stage:nth-child(3){--course:#e9a08a}.stage:nth-child(4){--course:#baabeb}.stage:nth-child(5){--course:#95bddf}.course-symbol{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:30px;height:38px;border:1px solid var(--course);border-radius:3px;color:var(--course);font-size:23px;line-height:1;opacity:.85}.stage .course-symbol{color:var(--course);border-color:var(--course)}.course-symbol.normal:before{content:'';width:7px;height:7px;border-radius:50%;border:1px solid #a5d9cc}.course-symbol.fever{font-size:17px;letter-spacing:1px}.course-symbol.meteor{font-size:25px}.course-symbol.zigzag{font-size:24px}.console-readout{display:flex;gap:14px;align-items:flex-start;margin:13px 0;padding:11px 12px;background:#0c1922;border:1px solid #354a52;border-left:2px solid #93bfae}.console-readout>span{font-size:6px;color:#73ac9f;letter-spacing:1px;white-space:nowrap;line-height:1.8}.console-readout p{font-size:9px;line-height:1.7;color:#a8bdc6;margin:0}.primary{background:linear-gradient(#a6e6cf,#82c5b4);color:#0f2a29;border:1px solid #b9f1df;font-size:13px;font-weight:700;min-height:48px;padding:0 16px;display:flex;align-items:center;justify-content:space-between;width:100%;box-shadow:0 3px 0 #3b665e;letter-spacing:.5px}.primary:hover{background:#b2efda;color:#102f2b;border-color:#c3fce6}.primary span{font-size:21px;font-weight:400}.back{font-size:10px;color:#a9c0c9;padding:0 11px;background:#15232c;border-color:#41545e;margin-bottom:7px}.rackets{display:flex;flex-direction:column;gap:11px;margin:19px 0}.rackets button{display:flex;align-items:center;gap:21px;min-height:99px;padding:18px 21px;text-align:left;background:linear-gradient(115deg,#1f2d39,#101d29);position:relative}.rackets button>div{display:flex;flex-direction:column;gap:9px}.rackets b{font-size:14px;font-weight:600}.rackets small{font-size:10px;line-height:1.65;color:#99b2bd}.racket-spec{font-size:6px;letter-spacing:1.3px;color:#7c9fac;position:absolute;right:12px;top:12px}.racket-icon{display:block;flex-shrink:0;width:39px;height:39px;background:linear-gradient(135deg,#c1fae6,#5ea89b);border:2px solid #c0f3e5;box-shadow:0 5px 0 #37665c,0 8px 17px #020c12;border-radius:4px}.racket-icon.round{border-radius:50%}.racket-icon.wide{width:47px;height:24px;margin:7.5px -4px}.racket-icon.diamond{transform:rotate(45deg);width:30px;height:30px;margin:4.5px}.launch-summary{padding:14px;background:#0b1921;border:1px solid #405b60;margin:19px 0}.launch-summary>span{font-size:7px;letter-spacing:2px;color:#8dc7ae}.launch-summary p{font-size:12px;line-height:1.5;margin:10px 0;color:#d2dfde}.launch-summary b{font-weight:400}.launch-summary i{font-style:normal;color:#729091;padding:0 10px}.launch-summary small{font-size:8px;color:#7e9aa6}.hint{text-align:center;color:#849faa;font-size:9px;line-height:1.7;margin:15px 0 3px}#pausePanel{justify-content:center;padding:36px;text-align:center}#pausePanel h2{font-size:35px;margin:20px 0}.panel-id{font-size:9px;letter-spacing:3px;color:#88afa7}#pausePanel p{font-size:12px;color:#a1b5c2;line-height:1.8;margin:5px 0 26px}.secondary{width:100%;margin-top:15px;font-size:12px}#message{position:absolute;z-index:2;top:40%;width:100%;text-align:center;font-size:25px;font-weight:700;letter-spacing:2px;pointer-events:none;text-shadow:0 2px 12px #000}#eventHud{position:absolute;top:12px;left:9px;right:9px;text-align:center;z-index:2;pointer-events:none;color:#ffe3a6;font-size:10px;letter-spacing:.6px;text-shadow:0 1px 8px #000;background:#081321bd;border:1px solid #66746355;padding:7px;border-radius:4px}#eventHud:empty{display:none}#viewAngle{position:absolute;z-index:3;right:10px;bottom:19px;font-size:9px;min-height:44px;padding:0 12px;background:#0c1824d9;border-color:#4d606d}.rinklabel{position:absolute;bottom:7px;width:100%;text-align:center;font-size:6px;letter-spacing:2.6px;color:#97a8b2;pointer-events:none}.telemetry{height:76px;display:flex;align-items:center;gap:25px;padding:12px 22px;border-top:1px solid #40515f;background:linear-gradient(#1b2a35,#121d28)}.telemetry>div:first-child{flex:1}.telemetry span{font-size:7px;letter-spacing:1.3px;color:#8da7b8;display:block}.telemetry b{display:block;font-size:19px;margin-top:5px;font-variant-numeric:tabular-nums}.telemetry small{font-size:9px;color:#819bab}.meter{height:3px;background:#33444f;margin-top:6px}.meter i{display:block;height:100%;background:#a1d9bf;width:0;transition:width .1s}.bounce{border-left:1px solid #40525f;padding-left:22px}#pause{width:44px;flex-shrink:0}.instructions{display:flex;justify-content:center;gap:22px;font-size:9px;color:#8ba0af;margin:18px 0}.instructions b{font-size:8px;color:#9ac9b5;margin-right:6px}.bottom{display:flex;justify-content:space-between;font-size:7px;letter-spacing:1.6px;color:#607989;margin-top:23px}#error{padding:20px;color:#ffc39d;font-size:12px;line-height:1.8;max-width:620px;margin:auto}
@media(max-width:600px){main{padding:12px 10px max(15px,env(safe-area-inset-bottom))}header{height:42px;gap:10px}#brand{font-size:15px;letter-spacing:.6px;gap:8px}#brand small{font-size:5px;letter-spacing:1.6px}.brand-orbit{font-size:27px}.tag{display:none}#sound{font-size:9px;padding:0 10px}.headline{margin:10px 0}.headline span{font-size:6px;letter-spacing:1px}.headline h1{font-size:9px;letter-spacing:1px}.score{padding:10px 13px}.score strong{font-size:27px}.score>div{gap:8px}.scorecenter{font-size:7px}.scorecenter small{font-size:6px}#viewport{height:74dvh;min-height:460px}.cockpit{border-width:6px}.cockpit-top{padding:11px 12px;font-size:6px;letter-spacing:.8px}.cockpit-bottom{font-size:5.5px;padding:10px 11px}.setup-progress{padding:11px 14px;font-size:7px;gap:8px}#setupScroller{padding:13px 15px 20px}.mission-window{height:82px}.window-label{font-size:5px}.window-earth{width:25px;height:25px;top:8px}.mission-title{margin:13px 0 11px}h2{font-size:22px;letter-spacing:1px}.mission-title p{font-size:9px}.stages{gap:7px}.stage{padding:10px 8px;gap:8px;min-height:76px}.stage>div{gap:6px}.stage span:not(.course-symbol){font-size:5px;letter-spacing:.8px}.stage b{font-size:10px;letter-spacing:0}.stage small{font-size:7px}.course-symbol{width:22px;height:32px;font-size:20px}.stage:last-child{min-height:60px}.console-readout{padding:9px;gap:9px;margin:11px 0}.console-readout p{font-size:8px}.console-readout>span{font-size:5px}.primary{font-size:12px;min-height:47px}.telemetry{height:70px;padding:10px 15px;gap:18px}.bounce{padding-left:17px}.telemetry span{font-size:6px}.instructions{font-size:7px;gap:9px;flex-wrap:wrap;margin:13px 0}.bottom{font-size:5.5px;letter-spacing:1px;margin-top:17px}.rackets{gap:10px;margin:14px 0}.rackets button{min-height:90px;padding:16px;gap:19px}.rackets b{font-size:12px}.rackets small{font-size:9px}.racket-spec{font-size:5px}.racket-icon{width:33px;height:33px}.racket-icon.wide{width:41px;height:20px;margin:6.5px -4px}.racket-icon.diamond{width:26px;height:26px;margin:3.5px}.launch-summary{padding:12px;margin:14px 0}.launch-summary p{font-size:11px}.launch-summary small{font-size:7px}#eventHud{font-size:9px}#pausePanel{padding:25px}}
@media(max-width:360px){#brand{font-size:13px}.stage{gap:6px;padding:10px 7px}.stage b{font-size:9px}.course-symbol{width:19px}.stage small{font-size:6px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
.game{max-width:720px}#viewport{height:min(82dvh,880px);min-height:500px}.course-title{margin-top:0}.course-title h2{font-size:27px}.demo-frame{position:relative;border:1px solid #536d78;background:#08111b;border-radius:7px;overflow:hidden;margin:14px 0 9px}#courseDemo{width:100%;height:265px;display:block}.demo-frame button{position:absolute;right:10px;bottom:10px;font-size:9px;min-height:38px;background:#132936e6;padding:0 12px}.demo-caption{font-size:10px;line-height:1.7;color:#b7c9d1;min-height:34px;margin:8px 0 13px}.stages.course-tabs{display:flex;gap:7px;overflow-x:auto;touch-action:pan-x;padding-bottom:5px}.course-tabs .stage{min-width:98px;flex:1;min-height:65px;padding:10px;text-align:center;justify-content:center}.course-tabs .stage:last-child{min-height:65px}.course-tabs .stage b{font-size:11px}.course-tabs .stage span:not(.course-symbol){font-size:6px;letter-spacing:.6px}.course-tabs .stage.selected{box-shadow:inset 0 -3px #ace3c8}.course-facts{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:12px 0;font-size:8px;color:#b0c4cd;line-height:1.6}.course-facts>span:first-child{font-size:6px;letter-spacing:1px;white-space:nowrap}.course-facts b{font-size:10px;color:#e6edea;letter-spacing:.2px;margin-left:8px}#racketStep .rackets{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:14px 0}#racketStep .rackets button{flex-direction:column;min-height:146px;padding:16px 8px 11px;gap:15px;text-align:center}#racketStep .rackets button>div{gap:8px}#racketStep .rackets small{font-size:8px}#racketStep .rackets b{font-size:12px}#racketStep .racket-spec{position:static;font-size:5px;order:-1}.difficulty-label{font-size:8px;letter-spacing:1.2px;color:#91b2bd;margin:16px 0 8px}.difficulties{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.difficulties button{padding:11px 3px;font-size:11px;background:#152631;min-height:65px}.difficulties small{display:block;font-size:8px;margin-top:8px;color:#8ca8b7}.difficulties .selected{border-color:#a1dfc7;background:#24453f;box-shadow:inset 0 -2px #9dd6bc}.options-row{display:flex;gap:9px;margin:16px 0 10px}.options-row button{flex:1;min-height:44px;font-size:10px}.options-row button[aria-pressed=true]{border-color:#719c92;color:#b4ead7}.bgm-volume{display:flex;align-items:center;gap:20px;font-size:9px;color:#95adbb}.bgm-volume input{flex:1;min-height:32px;accent-color:#9bd6bf}.launch-summary{margin:14px 0}#scoreFlash{position:absolute;z-index:6;left:12%;right:12%;top:38%;min-height:96px;padding:20px 10px;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:#0a2028eb;border:1px solid #8ae9d1;border-radius:5px;box-shadow:0 5px 45px #0009;pointer-events:none}#scoreFlash strong{font-size:25px;letter-spacing:1px;color:#a8ffe2}#scoreFlash.cpu-goal{background:#281926eb;border-color:#f5a6c6}#scoreFlash.cpu-goal strong{color:#ffbdd5}#scoreFlash span{font-size:12px;letter-spacing:3px;color:#e4ebef}.demo-frame button:focus-visible{outline-offset:-4px}@media(max-width:600px){#viewport{height:79dvh;min-height:500px}#courseDemo{height:220px}.course-title h2{font-size:23px}.course-title p{font-size:9px}.course-tabs .stage{min-width:94px;min-height:61px}.course-tabs .stage b{font-size:10px}.course-tabs .stage span:not(.course-symbol){font-size:5px}.course-facts{font-size:7px;gap:8px;align-items:flex-start}.course-facts>span:last-child{max-width:58%}.demo-caption{font-size:9px;min-height:30px}.demo-frame{margin-top:12px}#racketStep .rackets{gap:7px}#racketStep .rackets button{min-height:141px;padding:13px 5px 9px;gap:13px}#racketStep .rackets small{font-size:7px;line-height:1.7}#racketStep .rackets b{font-size:11px}.difficulties{gap:7px}.difficulties button{font-size:10px;padding:10px 2px;min-height:61px}.difficulties small{font-size:7px}.options-row button{font-size:9px}.bgm-volume{font-size:8px;gap:13px}#scoreFlash{left:9%;right:9%}#scoreFlash strong{font-size:21px}}
body[data-screen=home] .score,body[data-screen=home] .telemetry,body[data-screen=home] .instructions,body[data-screen=home] .headline,body[data-screen=home] .cockpit-top,body[data-screen=home] .setup-progress,body[data-screen=home] .cockpit-bottom{display:none}body[data-screen=home] #setupScroller{padding:0;overflow:hidden}body[data-screen=home] #viewport{height:min(81dvh,840px)}#homeScreen{min-height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:55px 30px;position:relative;isolation:isolate;background:radial-gradient(ellipse at 50% 65%,#22454f5c,transparent 65%),#0b1420}#homeScreen:before{content:'';position:absolute;inset:0;background-image:radial-gradient(1px 1px at 25% 17%,#afc5ce 70%,transparent),radial-gradient(1px 1px at 80% 35%,#afc5ce 70%,transparent);background-size:167px 219px,271px 187px;z-index:-1;opacity:.7}.home-orbit{width:190px;height:125px;position:relative;margin-bottom:30px}.home-moon{position:absolute;inset:15px 25px -5px;border-radius:50%;background:radial-gradient(ellipse at 32% 35%,#2d3b46 0 12%,#89979d 12.5% 14%,transparent 15%),radial-gradient(ellipse at 68% 60%,#3b4651 0 14%,#78888f 14.5% 16%,transparent 17%),radial-gradient(circle at 30% 20%,#b5c0c0,#61707d 58%,#202b3b 88%);box-shadow:inset -20px -8px 20px #08101fc9,0 0 60px #9ac5bc17;transform:rotate(-20deg)}.home-earth{width:35px;height:35px;position:absolute;right:7px;top:-18px;border-radius:100%;background:radial-gradient(ellipse at 30% 45%,#a4c4bc 0 20%,transparent 23%),radial-gradient(circle at 30% 30%,#698bb6,#132438 75%)}.home-heading>small{font-size:8px;letter-spacing:3px;color:#8fc5b4}.home-heading h1{font-size:36px;letter-spacing:3px;margin:17px 0 12px;line-height:1.4}.home-heading p{font-size:11px;letter-spacing:1px;color:#8fa8b8}#gameStart{width:min(310px,100%);margin-top:30px;text-transform:lowercase;font-size:17px;letter-spacing:2px;padding:0 22px;min-height:54px}.home-caption{font-size:7px;letter-spacing:1.5px;color:#65828e;margin-top:27px}.mode-options{display:flex;flex-direction:column;gap:18px;margin:27px 0}.mode-options button{display:flex;flex-direction:column;align-items:flex-start;gap:13px;padding:24px;background:linear-gradient(120deg,#223f45,#142632);text-align:left;border-color:#638b8c}.mode-options b{font-size:23px}.mode-options small{font-size:11px;color:#a4bdc4}.mode-options span{font-size:8px;letter-spacing:1.5px;color:#96d4bd}.field-label{display:flex;flex-direction:column;gap:9px;font-size:11px;color:#a7c1cd;margin:18px 0 12px}.field-label input,.field-label select{width:100%;padding:12px 14px;min-height:47px;border-radius:4px;border:1px solid #4d6878;background:#0e1c2a;color:#e3eeee;font:inherit;font-size:14px}.field-label input:focus,.field-label select:focus{outline:2px solid #95d7c0;outline-offset:1px}.field-help{font-size:8px;color:#8aa4b2}.ui-error{font-size:11px;color:#f2baa6;line-height:1.7;min-height:15px}#modeScreen,#lobbyEntry,#roomScreen{padding:4px 0 12px}#lobbyEntry .join-box{padding:19px;border:1px solid #40596b;background:#0e1c28;margin:26px 0 15px}.join-box h3{font-size:16px;margin:2px 0 18px}.room-code{padding:18px;background:#0b1d2c;border:1px solid #6b958d;border-radius:4px;text-align:center;margin:23px 0}.room-code span{display:block;font-size:7px;letter-spacing:2px;color:#8ab7ac}.room-code b{display:block;user-select:all;font-size:34px;letter-spacing:8px;color:#c2f4df;margin:13px 0}.room-code small{font-size:8px;color:#7e9ba9}.room-player{display:flex;justify-content:space-between;gap:20px;padding:17px 13px;background:#142b36;border:1px solid #3f5b69;margin:10px 0}.room-player b{font-size:13px;overflow-wrap:anywhere}.room-player span{font-size:9px;color:#a1bdb8}#roomSummary,#roomStatus{font-size:11px;color:#9dbbc6;line-height:1.8}#roomResult{background:#244b43;border:1px solid #93d5b9;padding:22px;text-align:center;font-size:17px;line-height:1.8;margin:20px 0}#roomStart,#roomReturn,#roomRematch{margin:17px 0}#roomLeave{margin-top:20px}.racket-icon.wide{width:36px;height:36px;margin:0;border-radius:2px}#demoToggle{font-size:17px;min-width:44px;min-height:44px}body[data-screen=mode] .setup-progress,body[data-screen=lobby] .setup-progress,body[data-screen=room] .setup-progress{display:none}#stageBack{margin:0 0 13px}.course-title{margin-top:4px}#scoreSettings .field-label{flex-direction:row;align-items:center;justify-content:space-between}#targetScore{max-width:150px}.course-title>p:empty{display:none}@media(max-width:600px){#homeScreen{padding:40px 19px}.home-heading h1{font-size:27px;letter-spacing:1px}.home-heading p{font-size:9px}.home-orbit{transform:scale(.9);margin-bottom:18px}.mode-options button{padding:20px;gap:12px}.mode-options b{font-size:20px}.mode-options small{font-size:9px}.mode-options span{font-size:7px}.field-label{font-size:10px}.field-label input,.field-label select{font-size:13px}.room-code b{font-size:29px}.room-player{gap:12px}.room-player b{font-size:11px}.room-player span{font-size:8px}#roomResult{font-size:14px}.racket-icon.wide{width:32px;height:32px;margin:0}}
#localName,#opponentName{max-width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;letter-spacing:.1px}#roomReturn{margin:15px 0}.ui-error:empty{min-height:0;margin:0}.course-title h2{margin-top:7px;margin-bottom:12px}.field-label input:disabled{opacity:.5}@media(max-width:600px){#localName,#opponentName{max-width:66px;font-size:8px}.score{gap:5px}.scorecenter{min-width:82px}.scorecenter small{font-size:5px}}
body:not([data-screen=playing]) #viewAngle,body:not([data-screen=playing]) .score,body:not([data-screen=playing]) .telemetry,body:not([data-screen=playing]) .instructions,body:not([data-screen=playing]) .headline{display:none}body:not([data-screen=playing]) .game{margin-top:20px}.mode-options button:hover{transform:none}#roomStatus{min-height:36px}

/* Home: illuminated lunar arena, with motion limited to this screen. */
body[data-screen=home] .cockpit{background:radial-gradient(ellipse at 50% 28%,#204d6966,transparent 53%),radial-gradient(ellipse at 12% 70%,#61358055,transparent 52%),linear-gradient(155deg,#08152c,#111728 65%,#062d3a);border-color:#253b50}
body[data-screen=home] .setup-progress{display:none}
#homeScreen{position:relative;isolation:isolate;overflow:hidden;min-height:100%;padding:35px 18px 32px;justify-content:center;background:radial-gradient(1px 1px at 17% 28%,#dcffff 90%,transparent),radial-gradient(2px 2px at 87% 18%,#fbd2fa 90%,transparent),radial-gradient(1px 1px at 75% 69%,#fff 90%,transparent)}
#homeScreen:after{content:'';position:absolute;inset:12px;z-index:-1;border:1px solid #6ed8e326;clip-path:polygon(0 0,25% 0,25% 1px,75% 1px,75% 0,100% 0,100% 100%,75% 100%,75% calc(100% - 1px),25% calc(100% - 1px),25% 100%,0 100%);pointer-events:none}
.home-orbit{width:290px;height:230px;margin:0 0 10px;flex-shrink:0;filter:drop-shadow(0 8px 25px #061124)}
.home-halo{position:absolute;inset:0 -3px;border:1px solid #77e5f654;border-radius:50%;transform:rotate(-24deg) scaleY(.68);box-shadow:0 0 20px #68e2ee17,inset 0 0 20px #68e2ee17}
.home-halo:after{content:'';position:absolute;inset:17px;border:1px dashed #95c6ee47;border-radius:50%}
.home-moon{inset:18px 40px 8px;box-shadow:inset -26px -10px 30px #08101fe0,0 0 60px #9ac5bc30}
.home-earth{width:47px;height:47px;right:0;top:0;box-shadow:0 0 23px #65c6fc55,inset -8px -4px 10px #030b23}
.home-rink{position:absolute;left:40px;right:40px;top:78px;height:125px;border:3px solid #a7f8f1;border-radius:16px;background:linear-gradient(135deg,#163f59ee,#10213bee);transform:perspective(350px) rotateX(42deg) rotateZ(-18deg);box-shadow:0 7px 0 #24536c,0 11px 0 #071323,0 0 28px #73e9f86b,inset 0 0 25px #6ed7e52e}
.home-rink:before{content:'';position:absolute;inset:50% 0 auto;border-top:1px solid #87eced8c}.home-center{position:absolute;width:38px;height:38px;border:1px solid #87eced8c;border-radius:50%;left:calc(50% - 19px);top:calc(50% - 19px)}
.home-mallet{position:absolute;width:32px;height:32px;border:3px solid;border-radius:50%;box-shadow:0 5px 0 #081424,0 0 22px currentColor}.cyan-mallet{left:35px;bottom:15px;color:#6fffe3;background:#237d83}.pink-mallet{right:34px;top:14px;color:#ff9ad8;background:#a44585}.home-puck{position:absolute;width:14px;height:14px;left:58%;top:51%;border-radius:50%;background:#fff5c9;box-shadow:0 0 18px #ffe694,0 4px 0 #5f563b}
.home-spark{position:absolute;width:5px;height:5px;background:#c6fcff;box-shadow:0 0 12px #8ce8ff;transform:rotate(45deg)}.spark-one{left:7px;top:107px}.spark-two{right:8px;bottom:32px;background:#ffa8dc}
.home-heading h1{font-size:clamp(25px,5vw,38px);letter-spacing:2px;background:linear-gradient(110deg,#f5fffd 20%,#a6f5ee 57%,#c9c4ff 90%);background-clip:text;-webkit-background-clip:text;color:transparent;filter:drop-shadow(0 0 15px #84e7e84d);margin:12px 0}
.home-heading>small{color:#ade9e5;letter-spacing:3px}.home-heading p{color:#b4c8d9}.home-caption{color:#9dbacb;margin-top:20px}
#gameStart{border:1px solid #b1fff0;background:linear-gradient(115deg,#a8ffe7,#7bdce6 60%,#a7bdf7);color:#092b39;box-shadow:0 0 28px #6ce5df30,inset 0 1px #efffff;min-height:56px;font-weight:700;margin-top:22px}#gameStart:hover{background:linear-gradient(115deg,#d2fff2,#a2f5fc);box-shadow:0 0 35px #6ce5df55}
#sound{font-size:21px;min-width:46px;padding:0 10px;line-height:1}.racket-icon.wide{width:32px;height:32px}
@media(prefers-reduced-motion:no-preference){body[data-screen=home] .home-orbit{animation:home-float 6s ease-in-out infinite}body[data-screen=home] .home-spark{animation:home-glow 3s ease-in-out infinite alternate}.spark-two{animation-delay:1s!important}@keyframes home-float{50%{transform:translateY(-7px)}}@keyframes home-glow{to{opacity:.35}}}
@media(max-width:600px){#homeScreen{padding:26px 12px}.home-orbit{width:250px;height:200px;margin-bottom:5px}.home-rink{left:34px;right:34px;top:64px;height:111px}.home-heading h1{font-size:26px;letter-spacing:1px}.home-heading p{font-size:9px}#gameStart{margin-top:20px}.racket-icon.wide{width:29px;height:29px}}
@media(max-height:740px){.home-orbit{width:230px;height:170px}.home-rink{top:48px;left:32px;right:32px;height:98px}.home-moon{inset:10px 39px 0}.home-heading h1{margin:8px 0}.home-caption{margin-top:15px}#homeScreen{padding-top:18px;padding-bottom:18px}}

#settingsOpen{font-size:24px;min-width:46px;margin-left:8px;padding:0 10px}#settingsDialog{width:min(440px,calc(100vw - 28px));max-height:calc(100dvh - 28px);overflow:auto;overscroll-behavior:contain;color:#e4f1f4;border:1px solid #80c7cf;border-radius:12px;padding:24px;background:linear-gradient(145deg,#183445,#0d1c2d);box-shadow:0 20px 80px #000a}#settingsDialog::backdrop{background:#020816bb}.settings-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.settings-heading small{font-size:8px;letter-spacing:2px;color:#99d7d4}.settings-heading h2{font-size:22px;letter-spacing:1px}.settings-heading button{min-width:44px}#settingsDialog p,#settingsDialog>small{font-size:11px;color:#a4bdca;line-height:1.8}.volume-setting{display:grid;grid-template-columns:1fr 35px;align-items:center;gap:8px;margin:20px 0;font-size:13px}.volume-setting output{text-align:center;color:#b7fff0;font-size:19px;font-variant-numeric:tabular-nums}.volume-setting input{grid-column:1/-1;width:100%;min-height:32px;margin:0;accent-color:#a0f4df;touch-action:pan-x}.settings-toggles{display:flex;gap:8px;margin:22px 0}.settings-toggles button{flex:1;font-size:11px;padding:8px 5px}
body[data-screen=playing] #settingsOpen{position:fixed;right:max(12px,env(safe-area-inset-right));bottom:max(12px,env(safe-area-inset-bottom));z-index:20;background:#153344ef;box-shadow:0 3px 18px #0008}

/* Touch inputs stay readable without disabling user pinch zoom. */
.field-label input,.field-label select,input[type=text],input[type=password],textarea{font-size:16px!important}
#matchTools{display:none}body[data-screen=playing] #settingsOpen{display:none}
body[data-screen=playing]{overflow:hidden;overscroll-behavior:none;background:#02050b}
body[data-screen=playing] main{max-width:none;padding:0;position:fixed;inset:0}
body[data-screen=playing] header,body[data-screen=playing] .bottom,body[data-screen=playing] .stars,body[data-screen=playing] .rinklabel{display:none}
body[data-screen=playing] .game{margin:0!important;max-width:none;width:100%;height:100dvh;border:0;border-radius:0;display:flex;flex-direction:column;box-shadow:none;padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}
body[data-screen=playing] .score{flex:none;min-height:54px;padding:7px max(12px,env(safe-area-inset-right)) 7px max(12px,env(safe-area-inset-left))}
body[data-screen=playing] #viewport{height:auto;min-height:0;flex:1;touch-action:none}
body[data-screen=playing] .telemetry{height:48px;flex:none;padding:5px max(12px,env(safe-area-inset-right)) 5px max(12px,env(safe-area-inset-left));gap:12px}
body[data-screen=playing] .telemetry>div{flex:1}
body[data-screen=playing] #pause{display:none}
body[data-screen=playing] #matchTools{display:flex;position:fixed;right:max(8px,env(safe-area-inset-right));top:calc(env(safe-area-inset-top) + 5px);bottom:auto;gap:8px;z-index:6;height:44px}
#matchTools button{min-width:48px;min-height:44px;background:#132c3e;font-size:23px}
body[data-screen=playing] .score{padding-right:124px}
body[data-screen=playing] .telemetry{padding-right:max(12px,env(safe-area-inset-right))}
body[data-screen=playing] #viewAngle{top:8px;bottom:auto;font-size:9px;min-height:36px}
#matchSettings{margin:10px 0;min-height:48px}
body[data-screen=playing] #pausePanel{overflow:auto;touch-action:pan-y;padding:30px max(20px,env(safe-area-inset-left));z-index:10}
body[data-screen=playing] #pausePanel~#matchTools{pointer-events:auto}
@media(min-width:900px){body[data-screen=playing] .game{max-width:1100px;margin:0 auto!important}.wide-court #viewport{width:100%}}
@media(orientation:landscape) and (max-height:600px){body[data-screen=playing] .score{min-height:40px;padding-top:2px;padding-bottom:2px}.score strong{font-size:24px}body[data-screen=playing] .telemetry{height:44px}}

#roomGameSettings{border:1px solid var(--line);border-radius:12px;padding:14px;margin:16px 0}#roomGameSettings small{display:block;line-height:1.6}#roomGameSettings select{font-size:16px;min-height:44px;width:100%;background:#132c3e;color:#fff;border:1px solid #43677d;border-radius:6px;padding:8px}#roomHostSettings{display:grid;grid-template-columns:minmax(0,2fr) minmax(70px,1fr);gap:10px}

#renderStats{color:#b4e6d9;font-size:10px;white-space:nowrap;font-variant-numeric:tabular-nums}
body[data-screen=playing] .headline{display:none}

#opponentPortrait{width:28px;height:28px;border-radius:9px;vertical-align:middle;margin:0 5px;flex:none}#planetRoute{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0}#planetRoute button{min-height:48px;border:1px solid #42687b;border-radius:12px;background:#122a3d;color:#d9f5fa;padding:10px 14px;font:inherit;font-size:13px}#planetRoute button.selected{border-color:#b3ffe4;background:#244c50}#planetRoute button:disabled{opacity:.4}#encounterCard{display:flex;gap:18px;border:1px solid #45677c;background:linear-gradient(130deg,#173343,#152137);border-radius:18px;padding:20px}#encounterPortrait{width:96px;height:96px;flex:none;border-radius:24px}#encounterCard h3{font-size:26px;margin:6px 0}#encounterCard p,#encounterCard blockquote{font-size:13px;line-height:1.7}#encounterCard blockquote{margin:12px 0;padding-left:12px;border-left:2px solid #80dcca;color:#b9e9df}#encounterTitle{color:#88d6d0}#journeyProgress{color:#b9ffe1;font-weight:bold}#journeyResult{line-height:1.7;color:#ffe2ad}#storyPrepare{margin-top:18px;width:100%}#planetRoute button:focus-visible{outline:3px solid #c5ffdf;outline-offset:2px}@media(max-width:500px){#encounterCard{padding:14px;gap:12px}#encounterPortrait{width:64px;height:64px;border-radius:18px}#encounterCard h3{font-size:23px}#opponentPortrait{width:23px;height:23px;margin:0 2px}.score #opponentName{font-size:12px}}
body[data-screen=story] .setup-progress{display:none}

#planetRoute{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}#planetRoute button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:8px 4px;border-radius:18px;background:radial-gradient(ellipse at top,#1a3c54,#0a1829);transition:border-color .15s}#planetRoute button img{width:min(100%,105px);height:auto;aspect-ratio:1;filter:drop-shadow(0 3px 8px #0006)}#planetRoute button strong{font-size:15px}#planetRoute button small{font-size:11px;color:#b6d4df}#planetRoute button:disabled{opacity:.48}#planetRoute button.selected{border-color:#a7ffe0;box-shadow:0 0 0 1px #a7ffe0 inset;background:radial-gradient(ellipse at top,#28594f,#102c38)}@media(max-width:400px){#planetRoute{gap:6px}#planetRoute button strong{font-size:13px}#planetRoute button small{font-size:10px}}

#cupDifficultySettings{padding:16px;border:1px solid #42687b;border-radius:14px;margin:16px 0}.difficulties{grid-template-columns:repeat(2,minmax(0,1fr))}.difficulties button{min-height:52px;white-space:normal}#planetRoute button:last-child:nth-child(9){grid-column:2 / span 2}#cupDifficulties{display:grid;gap:8px}#cupDifficulties button.selected{background:#28594f;border-color:#a7ffe0}

.net-diagnostic{margin:12px 0;padding:12px;border:1px solid #43516b;border-radius:12px}.net-diagnostic summary{cursor:pointer;min-height:44px;display:flex;align-items:center}.net-diagnostic p{font-size:12px;line-height:1.6}.diagnostic-actions{display:flex;gap:8px;flex-wrap:wrap}.diagnostic-actions button{min-height:44px}.net-diagnostic textarea{box-sizing:border-box;width:100%;font-size:16px;color:#e6faff;background:#0b1420;resize:vertical;border:1px solid #43516b;border-radius:8px;padding:8px}

.render-settings{margin:18px 0;padding-top:12px;border-top:1px solid #43516b}.render-settings h3{font-size:15px}.render-settings select{font-size:16px}.render-settings button{min-height:44px}.render-settings p{overflow-wrap:anywhere}