:root{color-scheme:light;--bg:#dff4ff;--panel:#ffffff;--line:#e8e0fb;--ink:#2d2160;--muted:#76699f;--violet:#7c4dff;--pink:#ff4fa3;--yellow:#ffd23f;--sky:#3ec6ff;--lime:#3fbf5f;--orange:#ff8a3d;--text:var(--ink);--round:"Arial Rounded MT Bold","SF Pro Rounded",ui-rounded,"Trebuchet MS",system-ui,sans-serif;--outline:3px 0 0 var(--ink),-3px 0 0 var(--ink),0 3px 0 var(--ink),0 -3px 0 var(--ink),2px 2px 0 var(--ink),-2px -2px 0 var(--ink),2px -2px 0 var(--ink),-2px 2px 0 var(--ink);font-family:Inter,"Pretendard",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-synthesis:none}
*{box-sizing:border-box}
body{margin:0;color:var(--ink);min-height:100vh;background-color:var(--bg);background-image:radial-gradient(circle,#ffffffd0 1.5px,transparent 2.2px),radial-gradient(ellipse at 12% 8%,#ffd3ea 0,transparent 42%),radial-gradient(ellipse at 88% 18%,#d8caff 0,transparent 44%),radial-gradient(ellipse at 50% 105%,#fff0b3 0,transparent 55%),linear-gradient(180deg,#c6edff 0%,#e8e0ff 55%,#ffe4f2 100%);background-size:28px 28px,auto,auto,auto,auto}
button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;color:inherit}button:disabled{opacity:.45;cursor:wait}a{color:inherit;text-decoration:none}
button:focus-visible,a:focus-visible{outline:3px solid var(--violet);outline-offset:4px}button{border:0}button[hidden],[hidden]{display:none!important}
.skip{position:absolute;left:10px;top:-100px;z-index:50;background:var(--violet);color:#fff;padding:12px;border-radius:10px}.skip:focus{top:10px}

.topbar{height:76px;border-bottom:2px solid #ffffffb0;background:#ffffff8c;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:space-between;padding:0 4%;gap:24px}
.brand{font-size:20px;font-weight:800;display:flex;align-items:center;letter-spacing:-.8px}.brand>span:not(.brand-mark){color:#2fae5a}
.brand-mark{display:flex;align-items:center;justify-content:center;background:#b8f57c;color:#14260b;border-radius:9px;width:31px;height:31px;margin-right:9px;font-size:18px;letter-spacing:-3px;padding-right:3px;box-shadow:0 3px 0 #7cc44a}.brand-mark span{transform:translateY(3px)}
.brand small{font-size:9px;letter-spacing:2px;color:var(--muted);margin-left:22px;font-weight:600}
.topbar nav{display:flex;gap:28px;font-size:12px;font-weight:600;color:#5a4d8a}.topbar nav button{background:none;padding:0;font-size:12px;font-weight:600}.topbar nav a:hover,.topbar nav button:hover{color:var(--pink)}
.account{display:flex;gap:9px;align-items:center;font-size:10px;font-weight:700;letter-spacing:.7px}
.status-dot{display:inline-block;width:7px;height:7px;background:var(--lime);border-radius:50%;box-shadow:0 0 0 3px #3fbf5f30}
.account button{padding:8px 14px;background:#fff;border:2px solid #e3d9ff;border-radius:999px;font-size:10px;font-weight:700;color:var(--violet)}
.account #login-button{background:linear-gradient(#9d7bff,var(--violet));border-color:#fff;color:#fff;box-shadow:0 3px 0 #5a2fd6}

.layout{width:min(1280px,92%);margin:38px auto 28px;display:grid;grid-template-columns:minmax(175px,1fr) minmax(340px,480px) minmax(220px,1fr);gap:42px;align-items:start}
.intro{padding-top:22px}
.eyebrow{font-family:ui-monospace,SFMono-Regular,monospace;font-size:9px;font-weight:700;letter-spacing:1.5px;color:#8a6fe0;display:flex;align-items:center;gap:7px}.eyebrow>span{display:block;width:7px;height:7px;background:var(--pink);border-radius:50%}
h1{position:relative;font-family:Impact,"Arial Narrow",sans-serif;font-weight:900;font-size:clamp(60px,6.1vw,86px);line-height:1;letter-spacing:1px;margin:29px 0 25px;transform:scaleX(.94) rotate(-2deg);transform-origin:left;color:var(--pink);text-shadow:var(--outline),0 8px 0 var(--ink)}
h1>span{color:var(--yellow)}
h1 i{font-family:serif;font-style:normal;position:absolute;font-size:38px;color:var(--sky);top:-12px;right:0;text-shadow:var(--outline);animation:twinkle 4s linear infinite}
@keyframes twinkle{0%{transform:rotate(0) scale(1)}50%{transform:rotate(180deg) scale(1.2)}100%{transform:rotate(360deg) scale(1)}}
.tagline{font-weight:800;font-size:23px;line-height:1.6;letter-spacing:-.8px}
.intro-copy{font-size:12px;color:var(--muted);line-height:1.9}
.table-label{display:flex;align-items:center;gap:13px;background:#ffffffc0;border:2px solid #fff;border-radius:18px;padding:16px;margin:30px 0;box-shadow:0 8px 20px #7c4dff18}
.tiny-orbit{font-size:29px;color:var(--pink)}.table-label small{display:block;font-size:8px;font-weight:700;letter-spacing:1.6px;color:var(--muted);margin-bottom:7px}.table-label strong{font-size:13px;font-weight:700}
.label-badge{margin-left:auto;color:#fff;background:var(--sky);border-radius:999px;padding:3px 8px;font:700 10px monospace}
.howto h2{font-size:10px;letter-spacing:1.6px;margin:26px 0 21px;color:var(--violet)}.howto h2 span{float:right;color:var(--muted);font-size:10px;font-weight:600;letter-spacing:0}
.howto>div{display:flex;justify-content:space-between;align-items:center;margin:14px 0;font-size:11px;font-weight:600;color:#54487f}
kbd{font-family:ui-monospace,monospace;font-size:10px;font-weight:700;padding:4px 7px;border:2px solid #d9ccff;border-bottom-width:4px;border-radius:8px;color:var(--violet);background:#fff}
.howto p{font-size:10px;color:var(--muted);line-height:1.8;margin:22px 0}
.personal{margin-top:27px;padding:18px;border-radius:18px;background:linear-gradient(135deg,#fff7cc,#ffe3f1);border:2px solid #fff;box-shadow:0 8px 20px #ff4fa318}
.personal small{font-size:10px;font-weight:700;color:#b0457e}.personal strong{display:block;font:900 26px var(--round);letter-spacing:2px;margin:8px 0 5px;color:var(--pink);font-variant-numeric:tabular-nums}.personal>span{font-size:9px;color:var(--muted)}
.edition{font:700 8px/2 ui-monospace,monospace;letter-spacing:1.2px;color:#8a7fb5;margin-top:32px}.edition span{color:#a99fd0}

.machine{background:linear-gradient(160deg,#9b6bff 0%,#ff5fb0 55%,#ffb347 100%);border:3px solid #fff;padding:10px;border-radius:26px;box-shadow:0 0 0 5px #ffffff70,0 24px 60px #7c4dff45,inset 0 2px 0 #ffffffa0;overflow:hidden}
.machine-hud{display:flex;justify-content:space-between;align-items:center;padding:9px 15px 12px;margin-bottom:8px;background-color:#2a1c5c;background-image:radial-gradient(#ffffff14 1px,transparent 1.3px);background-size:4px 4px;border:3px solid #fff;border-radius:16px;box-shadow:inset 0 0 18px #0009}
.machine-hud small{display:block;font:700 8px ui-monospace,monospace;letter-spacing:2px;color:#c9b8ff;margin-bottom:5px}
.machine-hud strong{font:700 30px ui-monospace,monospace;letter-spacing:2px;color:var(--yellow);text-shadow:0 0 12px #ffb300aa;font-variant-numeric:tabular-nums}
.hud-right{text-align:right}.hud-right>span{font:700 8px ui-monospace,monospace;color:#c9b8ff;letter-spacing:1px}
.hud-right>div{margin-top:9px;display:flex;align-items:center;gap:12px}.hud-right #balls{font-size:10px;letter-spacing:3px;color:#ff8cc6;text-shadow:0 0 8px #ff4fa3}
.hud-right b{color:#2a1c5c;background:var(--orange);border-radius:999px;padding:1px 9px;font:900 16px var(--round);box-shadow:0 0 10px #ff8a3d99}
.playfield{position:relative;background:#fff;border-radius:16px;border:2px solid #fff;overflow:hidden;aspect-ratio:3/5;box-shadow:0 6px 18px #3b2a7340}
.playfield canvas{display:block;width:100%;height:100%;touch-action:none}
.board-top{position:absolute;top:12px;left:18px;right:18px;display:flex;justify-content:space-between;pointer-events:none;color:#fff;font:700 6px ui-monospace,monospace;letter-spacing:1.5px;text-shadow:0 1px 2px #1f6b55}
.board-top i{display:inline-block;background:var(--yellow);width:4px;height:4px;border-radius:50%;margin-right:4px}
.machine-footer{display:flex;align-items:center;justify-content:space-between;padding:11px 7px 3px;font-size:10px;font-weight:600;color:#fff;text-shadow:0 1px 2px #6b2fa080}
.machine-footer>span{display:flex;align-items:center;gap:6px}.machine-footer>div{display:flex;gap:5px;align-items:center}
.machine-footer button{background:#ffffff30;color:#fff;font:700 8px monospace;border:2px solid #ffffffa0;border-radius:999px;padding:5px 9px}.machine-footer button:hover{background:#ffffff55}
.machine-footer .status-dot{background:var(--yellow);box-shadow:0 0 0 3px #ffd23f50}

.start-panel,.pause-panel{position:absolute;inset:auto 25px 90px;text-align:center;padding:28px 22px 23px;background:#fffffff2;border:3px solid #fff;border-radius:22px;box-shadow:0 16px 40px #3b2a7355;overflow:hidden}
.start-panel::before,.pause-panel::before{content:'';position:absolute;left:0;right:0;top:0;height:7px;background:linear-gradient(90deg,var(--pink),var(--orange),var(--yellow),var(--lime),var(--sky),var(--violet))}
.start-orbit{display:block;color:var(--pink);font-size:38px;line-height:1;animation:bob 2.4s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-5px) rotate(12deg)}}
.start-panel>p:first-of-type{font:700 8px ui-monospace,monospace;color:#8a6fe0;letter-spacing:2px;margin-top:16px}
.start-panel h2,.pause-panel h2{font:900 23px var(--round);letter-spacing:-.4px;margin:12px 0;color:var(--ink)}
.start-copy{font-size:11px;line-height:1.8;color:var(--muted)}
.primary{display:flex;align-items:center;justify-content:space-between;background:linear-gradient(#ffe56f,#ffc21a);color:var(--ink);border-radius:999px;padding:15px 22px;font-size:14px;font-weight:800;width:100%;margin-top:20px;box-shadow:0 5px 0 #e39a00,0 10px 20px #ff9f1a50;transition:filter .15s,transform .15s,box-shadow .15s}
.primary:hover{filter:brightness(1.06);transform:translateY(-2px);box-shadow:0 7px 0 #e39a00,0 12px 24px #ff9f1a60}
.primary:active{transform:translateY(4px);box-shadow:0 1px 0 #e39a00,0 4px 10px #ff9f1a40}
.start-panel>small{display:block;font-size:9px;color:var(--muted);margin-top:14px}
.pause-panel{inset:34% 30px auto;z-index:4}.pause-panel .eyebrow{justify-content:center}
.subtle{background:none;font-size:11px;font-weight:600;color:var(--muted);padding:18px 0 0}.subtle:hover{color:var(--pink)}
.table-toast{position:absolute;top:36%;left:0;right:0;text-align:center;color:var(--yellow);font:900 30px/1.15 var(--round);letter-spacing:1px;text-shadow:var(--outline),0 7px 0 var(--pink),0 0 24px #fff;pointer-events:none;opacity:0;transform:rotate(-3deg);transition:opacity .25s}
.table-toast.visible{opacity:1;animation:toast-pop .55s cubic-bezier(.2,1.7,.45,1)}
@keyframes toast-pop{0%{transform:scale(.2) rotate(-14deg);opacity:0}100%{transform:scale(1) rotate(-3deg);opacity:1}}
.launch-hint{position:absolute;bottom:31px;left:26%;right:22%;text-align:center;pointer-events:none}
.launch-hint span{font-size:10px;font-weight:800;color:var(--violet);text-shadow:0 0 4px #fff,0 0 8px #fff}
.launch-hint>div{height:7px;background:#ffffffd0;border:2px solid #fff;border-radius:99px;margin:7px 0 0;overflow:hidden;box-shadow:0 2px 6px #3b2a7330}
.launch-hint i{display:block;background:linear-gradient(90deg,var(--lime),var(--yellow),var(--orange),var(--pink));height:100%;width:0;border-radius:99px}

.touch-controls{display:none;gap:7px;margin-top:9px}
.touch-controls button{height:48px;background:linear-gradient(#ffffff,#efe8ff);border:2px solid #fff;border-bottom:5px solid #c4b0ff;border-radius:16px;flex:1;display:flex;align-items:center;justify-content:center;gap:5px;font-size:17px;font-weight:900;color:var(--violet);touch-action:none;user-select:none;-webkit-user-select:none;transition:transform .05s}
.touch-controls button span{font:800 8px monospace;color:inherit;opacity:.9}
.touch-controls button:nth-child(2),.touch-controls button:nth-child(3){flex:.6;flex-direction:column;gap:0}
.touch-controls [data-input="left"]{background:linear-gradient(#8de2ff,var(--sky));border-bottom-color:#1a96cf;color:#fff}
.touch-controls [data-input="right"]{background:linear-gradient(#ff97cb,var(--pink));border-bottom-color:#c92a7d;color:#fff}
.touch-controls [data-input="nudge"]{background:linear-gradient(#9cebab,#4cc86a);border-bottom-color:#2b9447;color:#fff}
.touch-controls .launch-control{background:linear-gradient(#ffe56f,#ffc21a);border-bottom-color:#e39a00;color:var(--ink)}
.touch-controls button.held{transform:translateY(3px);border-bottom-width:2px;filter:brightness(1.12)}

.dashboard{padding-top:12px}
.section-heading{display:flex;justify-content:space-between;align-items:center}
.section-heading h2{font:800 10px ui-monospace,monospace;letter-spacing:1.6px;margin:0;color:var(--violet)}
.section-heading>span{font-size:13px;color:var(--muted)}
.section-heading .live-label{font:800 8px monospace;color:#fff;background:var(--pink);padding:3px 7px;border-radius:999px;animation:live 1.6s ease-in-out infinite}
@keyframes live{50%{box-shadow:0 0 0 5px #ff4fa333}}
.mission-card{background:#ffffffeb;border:3px solid #fff;border-radius:24px;padding:20px;box-shadow:0 14px 34px #7c4dff22}
.mission-icon{font-size:44px;color:var(--pink);margin:24px 0 10px;line-height:1;display:inline-block;animation:twinkle 6s linear infinite}
.mission-card h3{font:900 19px var(--round);margin:15px 0 8px;letter-spacing:-.3px}
.mission-card>p{font-size:11px;color:var(--muted);line-height:1.7;min-height:34px;margin:0 0 22px}
.mission-track{height:12px;background:#efe8ff;border-radius:99px;overflow:hidden;box-shadow:inset 0 2px 3px #7c4dff22}
.mission-track i{display:block;height:100%;width:0;border-radius:99px;transition:width .15s;background:repeating-linear-gradient(45deg,#ffffff40 0 6px,transparent 6px 12px),linear-gradient(90deg,var(--sky),var(--violet),var(--pink))}
.mission-caption{display:flex;justify-content:space-between;margin:10px 0 23px;font:700 9px monospace;color:var(--muted)}.mission-caption b{font-size:8px;color:var(--pink);font-weight:800}
.mission-stats{display:flex;border-top:2px dashed var(--line);padding-top:18px;justify-content:space-between}
.mission-stats small{display:block;font:700 8px monospace;letter-spacing:1px;color:var(--muted)}
.mission-stats strong{display:block;font:900 19px var(--round);margin-top:8px;color:var(--ink)}
.mission-stats div:nth-child(2) strong{font-size:12px;color:var(--lime);margin-top:13px}
.ranking-card{margin-top:22px;background:#ffffffeb;border:3px solid #fff;border-radius:24px;padding:20px;box-shadow:0 14px 34px #7c4dff22}
.ranking-card .section-heading{margin-bottom:16px}
.rank-tabs{display:flex;background:#f3eeff;border-radius:999px;padding:4px;gap:3px}
.rank-tabs button{width:25%;padding:8px 0;background:none;color:var(--muted);font-size:11px;font-weight:700;border-radius:999px}
.rank-tabs button[aria-pressed=true]{color:#fff;background:var(--violet);box-shadow:0 3px 0 #5a2fd6}
.ranking-period{display:flex;align-items:center;justify-content:space-between;margin-top:14px;font:700 10px ui-monospace,monospace;color:var(--muted)}
.ranking-period button{font-size:18px;background:none;color:var(--violet);padding:0 4px}
.ranking-card ol{list-style:none;padding:0;margin:9px 0 0;min-height:130px}
.ranking-card li{display:flex;align-items:center;gap:10px;padding:12px 4px;border-bottom:2px dashed #f0eaff;font-size:11px}
.ranking-card li .rank-number{color:#fff;background:#c4b0ff;border-radius:999px;font:800 9px monospace;min-width:24px;text-align:center;padding:3px 0}
.ranking-card li:first-child .rank-number{background:var(--yellow);color:var(--ink)}
.ranking-card li .rank-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100px;color:var(--ink);font-weight:600}
.ranking-card li strong{margin-left:auto;font:900 12px var(--round);color:var(--violet)}
.ranking-card li.rank-empty{display:flex;flex-direction:column;justify-content:center;text-align:center;line-height:1.9;color:var(--muted);min-height:125px;font-size:11px;border:0}
.rank-empty>span{font-size:24px;color:#c4b0ff;margin-bottom:6px}
.rank-note{font-size:9px;color:var(--muted);text-align:center;margin-top:14px}
.rank-login{background:#f3eeff;border:2px solid #fff;color:var(--violet);font-size:10px;font-weight:800;border-radius:999px;padding:12px 6px;width:100%;margin-top:7px}.rank-login:hover{background:#e9e0ff}
.tip-card{display:flex;gap:10px;background:#fff7cc;border:3px solid #fff;border-radius:20px;padding:16px;margin-top:22px;color:var(--orange);box-shadow:0 10px 24px #ff8a3d22;transform:rotate(-1deg)}
.tip-card>span{font-size:22px}.tip-card p{font-size:11px;color:#8a6a2a;line-height:1.8;margin:0}.tip-card strong{display:block;color:var(--ink);font-weight:800;margin-bottom:4px}
.page-footer{max-width:1280px;width:92%;margin:0 auto;padding:18px 0;border-top:2px dashed #ffffffb0;display:flex;justify-content:space-between;color:#8a7fb5;font:700 7px ui-monospace,monospace;letter-spacing:1.7px}

dialog{color:var(--ink);background:linear-gradient(90deg,var(--pink),var(--orange),var(--yellow),var(--lime),var(--sky),var(--violet)) top/100% 8px no-repeat,#fff;border:4px solid #fff;border-radius:28px;padding:36px;max-width:440px;width:calc(100% - 32px);box-shadow:0 30px 80px #7c4dff55;max-height:85svh;overflow:auto}
dialog::backdrop{background:#6b4fd04d;backdrop-filter:blur(7px)}
dialog h2{font:900 26px var(--round);letter-spacing:-.4px}
.dialog-close{position:absolute;top:14px;right:16px;background:#f3eeff;color:var(--violet);font-size:22px;width:36px;height:36px;border-radius:50%;line-height:1}
.result-score{font:900 46px var(--round);color:var(--yellow);letter-spacing:2px;margin:30px 0;text-shadow:var(--outline),0 6px 0 var(--pink);font-variant-numeric:tabular-nums}
.result-actions>button:not(.primary){background:transparent;width:100%;font-size:12px;font-weight:700;padding:17px 0 0;color:var(--violet)}
#result-status{font-size:12px;line-height:1.8;color:var(--muted)}
.help-steps{padding-left:20px;color:var(--muted);font-size:12px;line-height:1.8}.help-steps li{padding:7px 0 10px 5px}.help-steps li::marker{color:var(--pink);font-weight:900}
.help-steps b{display:block;color:var(--ink);font-weight:800}
#notice{position:fixed;bottom:30px;left:50%;transform:translateX(-50%);padding:14px 22px;background:#fff;border:3px solid #e3d9ff;border-radius:999px;color:var(--ink);font-weight:600;box-shadow:0 10px 30px #7c4dff40;font-size:12px;z-index:200;max-width:90vw;text-align:center}
body #gamenow-guide-launcher{top:auto;bottom:95px}body #gamenow-exit-launcher{top:auto;bottom:28px}body #gamenow-mobile-menu-launcher{top:80px}

@media(min-width:1400px){.layout{grid-template-columns:235px 480px 265px;justify-content:space-between}}
@media(max-width:1100px){.layout{gap:23px;width:94%;grid-template-columns:minmax(145px,1fr) minmax(310px,430px) minmax(185px,1fr)}h1{font-size:62px}.mission-card,.ranking-card{padding:16px}.tagline{font-size:20px}.intro-copy{font-size:11px}.howto>div{font-size:10px}.brand small{display:none}.machine-hud strong{font-size:26px}.start-panel{inset:auto 18px 75px;padding:24px 20px}.section-heading h2{font-size:9px;letter-spacing:1px}}
@media(max-width:850px){.layout{grid-template-columns:minmax(300px,450px) minmax(200px,1fr);max-width:740px;gap:24px;margin-top:24px}.intro{display:none}.topbar{padding:0 4%;height:60px}.topbar nav{gap:15px}.topbar nav a{display:none}.machine{grid-column:1}.dashboard{grid-column:2}.touch-controls{display:flex}.page-footer{font-size:6px}.account{font-size:9px}.brand{font-size:17px}}
@media(max-width:560px){.topbar{height:52px;gap:7px}.brand{font-size:16px}.brand-mark{width:26px;height:26px;font-size:15px;border-radius:7px}.topbar nav{margin-left:auto}.topbar nav button{font-size:10px}.account{gap:6px;font-size:8px}.account .status-dot{display:none}.account button{font-size:9px;padding:6px 9px}
  .layout{display:flex;flex-direction:column;width:100%;gap:22px;margin:12px auto 24px;align-items:center}
  .machine{width:min(calc(100% - 24px),calc((100svh - 210px)*.6 + 20px));min-width:260px;padding:6px;border-radius:18px}
  .machine-hud{padding:5px 9px 7px;margin-bottom:6px;border-radius:12px;border-width:2px}.machine-hud strong{font-size:24px}.machine-hud small{font-size:7px}.hud-right>span{font-size:7px}.hud-right>div{margin-top:6px}
  .playfield{border-radius:12px}.machine-footer{font-size:9px;padding:7px 3px 1px}.machine-footer button{font-size:7px;padding:4px 7px}
  .touch-controls{gap:5px;margin-top:7px}.touch-controls button{height:46px;font-size:15px}.touch-controls button span{font-size:7px}
  .start-panel{inset:auto 14px 40px;padding:20px 17px 16px}.start-orbit{font-size:28px}.start-panel h2{font-size:19px}.start-panel>p:first-of-type{font-size:7px;margin-top:12px}.start-copy{font-size:10px}.start-panel .primary{font-size:12px;padding:12px 16px;margin-top:15px}.start-panel>small{font-size:8px}
  .board-top{top:10px;left:11px;right:11px;font-size:5px;letter-spacing:1px}
  .dashboard{width:calc(100% - 32px);max-width:400px;display:grid;grid-template-columns:1fr;gap:20px;padding:0}
  .mission-card{padding:18px}.mission-icon{display:none}.mission-card h3{margin:4px 0 8px}.mission-card>p{min-height:0;margin-bottom:15px}.mission-caption{margin-bottom:15px}.mission-stats{padding-top:12px}
  .ranking-card{margin-top:0;padding:18px}.tip-card{margin-top:0}.page-footer{display:block;line-height:2;width:calc(100% - 36px)}.page-footer>span{display:block}
  .table-toast{font-size:21px}.pause-panel{inset:30% 15px auto;padding:25px 18px}.pause-panel h2{font-size:20px}.launch-hint{bottom:21px;left:20%;right:20%}.launch-hint span{font-size:8px}}
@media(max-height:500px) and (orientation:landscape){.topbar{height:45px}.layout{margin:12px auto;grid-template-columns:minmax(230px,300px) 230px;justify-content:center;max-width:620px}.machine{max-width:300px}.playfield{max-height:none}.dashboard{padding-top:0}.touch-controls{display:flex}.page-footer{display:none}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}dialog::backdrop{backdrop-filter:none}}
/* Keep the complete playfield in view while a ball is live. */
@media(min-width:851px){.machine{width:min(100%,calc((100svh - 275px)*.6 + 20px));justify-self:center}}
@media(max-width:560px){body #gamenow-mobile-menu-launcher{top:3px;right:3px}.topbar{padding-right:52px}.topbar nav{display:none}.account{margin-left:auto}#account-name{max-width:70px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}
@media(max-height:500px) and (orientation:landscape){
  body.is-playing .topbar{height:40px}body.is-playing .layout{display:flex;justify-content:center;gap:25px;margin-top:8px;width:100%;max-width:760px;align-items:flex-start}
  body.is-playing .machine{position:relative;width:calc((100svh - 155px)*.6 + 160px);max-width:none;flex:none;padding:5px;border-radius:16px}
  body.is-playing .machine-hud{padding:2px 8px;height:48px;margin-bottom:0;border-width:1px}body.is-playing .machine-hud small{margin-bottom:2px}body.is-playing .machine-hud strong{font-size:22px}
  body.is-playing .playfield{width:calc((100svh - 155px)*.6);height:calc(100svh - 155px);margin:auto;max-height:none}
  body.is-playing .machine-footer{font-size:7px;padding:7px 2px 2px}body.is-playing .machine-footer>span{max-width:205px}
  body.is-playing .touch-controls{position:absolute;inset:100px 7px 40px;display:grid;grid-template-columns:60px 60px;justify-content:space-between;gap:9px;margin:0;pointer-events:none}
  body.is-playing .touch-controls button{pointer-events:auto;width:60px;height:100%;min-height:44px;display:flex;flex-direction:column;font-size:20px;gap:6px}
  body.is-playing .touch-controls button:nth-child(1){grid-column:1;grid-row:1}body.is-playing .touch-controls button:nth-child(4){grid-column:2;grid-row:1}
  body.is-playing .touch-controls button:nth-child(2){grid-column:1;grid-row:2}body.is-playing .touch-controls button:nth-child(3){grid-column:2;grid-row:2}
  body.is-playing .dashboard{width:220px;max-height:calc(100svh - 60px);overflow:auto;padding:0 4px;flex:none}
  body.is-playing .mission-card{padding:14px}body.is-playing .mission-icon{display:none}body.is-playing .mission-card h3{margin-top:15px}
  body.is-playing .pause-panel{inset:25% 5px auto;padding:10px 7px}body.is-playing .pause-panel h2{font-size:14px}body.is-playing .pause-panel .primary{font-size:10px;padding:10px;margin-top:12px}body.is-playing .pause-panel .eyebrow{font-size:6px}body.is-playing .subtle{font-size:9px;padding-top:12px}
  body.is-playing .launch-hint{bottom:12px;left:6%;right:6%}body.is-playing .launch-hint span{font-size:5px}body.is-playing .board-top{font-size:4px;left:6px;right:6px;letter-spacing:0}body.is-playing .table-toast{font-size:14px}
}

/* Refinements: locale, history, results and mobile controls. */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.language-control{position:relative}
.language-control select{appearance:none;background:#fff;border:2px solid #e3d9ff;color:var(--ink);border-radius:999px;padding:7px 22px 7px 11px;font:700 10px ui-monospace,monospace;cursor:pointer}
.language-control::after{content:'⌄';position:absolute;right:9px;top:50%;transform:translateY(-60%);color:var(--violet);pointer-events:none}
.language-control select:focus-visible{outline:3px solid var(--violet);outline-offset:3px}
.ranking-card .section-heading button{font-size:16px;color:var(--violet);background:#f3eeff;border-radius:50%;width:30px;height:30px;line-height:1}
.ranking-card .section-heading button:hover{background:var(--violet);color:#fff}
#touch-settings-button{display:none}
.result-score{margin:22px 0 18px}
.result-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 0 20px}
.result-stats>div{border:2px solid #fff;border-radius:16px;padding:10px 12px;background:#f6f2ff;box-shadow:0 4px 10px #7c4dff14}
.result-stats>div:nth-child(1){background:#e3f6ff}.result-stats>div:nth-child(2){background:#ffe8f4}.result-stats>div:nth-child(3){background:#fff6cf}.result-stats>div:nth-child(4){background:#e6fbe9}
.result-stats dt{font-size:10px;font-weight:700;color:var(--muted)}.result-stats dd{margin:6px 0 0;font:900 18px var(--round);color:var(--ink)}
.result-actions #share-fallback{display:block;width:100%;min-height:63px;margin-top:10px;resize:none;background:#f8f5ff;border:2px solid #e3d9ff;border-radius:12px;color:var(--ink);padding:10px;font:11px/1.5 ui-monospace,monospace}
.result-actions #share-fallback[hidden]{display:none}
.wide-dialog{max-width:610px}
.history-controls{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:22px 0}
.history-controls label{display:grid;gap:7px;color:var(--muted);font-size:11px;font-weight:700}
.history-controls input,.history-controls select{width:100%;background:#f8f5ff;color:var(--ink);border:2px solid #e3d9ff;border-radius:12px;padding:10px 9px;font:13px ui-monospace,monospace;color-scheme:light}
.history-range,.history-count{font:700 10px ui-monospace,monospace;color:var(--muted)}
.history-list{list-style:none;padding:0;margin:10px 0;max-height:min(48svh,470px);overflow:auto;scrollbar-color:#c4b0ff #f3eeff}
.history-list li{display:flex;gap:14px;padding:10px 6px;border-bottom:2px dashed #f0eaff;align-items:center;font-size:12px}
.history-list .rank-number{color:var(--pink);width:27px;font:800 11px ui-monospace,monospace}
.history-list .rank-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.history-list strong{margin-left:auto;font:900 13px var(--round);color:var(--violet)}
.history-list .rank-empty{color:var(--muted);min-height:70px;justify-content:center;border:0}
.history-count{text-align:right}
.touch-help{color:var(--muted);font-size:12px;line-height:1.7}
.touch-layout-options{border:0;padding:0;margin:22px 0 0;display:grid;gap:10px}
.touch-layout-options legend{font-size:10px;font-weight:700;color:var(--muted);letter-spacing:.7px;margin-bottom:10px}
.touch-layout-options label{display:flex;align-items:center;gap:12px;border:2px solid #e3d9ff;border-radius:14px;padding:13px;cursor:pointer;font-size:12px;font-weight:600}
.touch-layout-options label:has(input:checked){border-color:var(--violet);background:#f3eeff}
.touch-layout-options input{accent-color:var(--violet)}
@media(max-width:850px){#touch-settings-button{display:inline-block}}
@media(max-width:560px){.language-control select{font-size:9px;padding:6px 17px 6px 7px}.account #account-name{max-width:47px}.history-controls{grid-template-columns:1fr}.result-stats{gap:6px}.result-stats>div{padding:8px}.wide-dialog{padding:25px 17px}.history-list{max-height:44svh}}
@media(pointer:coarse){html,body{touch-action:pan-y}.playfield,.touch-controls,.touch-controls button,.machine-footer button{touch-action:none}.touch-controls button{user-select:none;-webkit-user-select:none}
  body[data-touch-layout="left-launch"] .touch-controls [data-input="left"]{order:0}body[data-touch-layout="left-launch"] .touch-controls [data-input="launch"]{order:1}body[data-touch-layout="left-launch"] .touch-controls [data-input="nudge"]{order:2}body[data-touch-layout="left-launch"] .touch-controls [data-input="right"]{order:3}}
@media(max-height:500px) and (orientation:landscape){body[data-touch-layout="left-launch"].is-playing .touch-controls [data-input="launch"]{grid-column:1;grid-row:2}body[data-touch-layout="left-launch"].is-playing .touch-controls [data-input="nudge"]{grid-column:2;grid-row:2}}
@media(max-width:380px){.topbar{gap:6px}.account{gap:5px}.account #account-name{display:none}.account button{white-space:nowrap;padding:7px 8px}.language-control select{max-width:68px}}
.gate-status{display:flex;justify-content:space-between;align-items:center;margin:-7px 0 17px;padding:9px 12px;border:2px solid #ece5ff;border-radius:999px;background:#f6f2ff;color:var(--muted);font:800 9px ui-monospace,monospace;letter-spacing:.8px}
.gate-status strong{color:var(--muted);font-weight:800}
.gate-status[data-mode="open"]{border-color:#7ad98e;background:#e6fbe9;color:#1f8a3c}.gate-status[data-mode="open"] strong{color:#1f8a3c}
.gate-status[data-mode="overdrive"]{border-color:#ffb27a;background:#fff1d6;color:#c55a00;animation:live 1s ease-in-out infinite}.gate-status[data-mode="overdrive"] strong{color:#c55a00}
