/* Orbit edition: presentation only. Existing UI classes and handlers remain. */
:root {
  --font: 'Segoe UI', 'Trebuchet MS', sans-serif;
  --purple: #152b3d; --purple-hi: #214158;
  --green: #244759; --green-hi: #315e70;
  --teal: #64e4d0; --teal-hi: #94f5e0;
  --salmon: #d77368; --brown: #253548; --gray: #283643;
  --red: #aa4c51; --blue: #355b84; --gold: #d6ad64;
  --title: #f3f4ed; --text: #e9f2f5; --dim: #95acbc;
}
body { background: #081322; }
button { letter-spacing: .02em; }
.clay { background-image: linear-gradient(145deg, #ffffff09, #0000000c); background-color: var(--c, var(--purple)); background-size: auto; background-blend-mode: normal; border: 1px solid #a9e2ed24; box-shadow: inset 0 1px 0 #ffffff0c, 0 12px 32px #00000025; }
.btn { border-radius: 10px; text-shadow: none; font-size: 21px; font-weight: 650; transition: background .16s, box-shadow .16s, transform .16s; }
.btn:hover { filter: brightness(1.14); transform: translateY(-2px); }
.btn:active { transform: translateY(1px); }
.btn.focus, .btn:focus-visible { outline: 2px solid #87f2df; outline-offset: 4px; box-shadow: 0 0 24px #64e4d01c; }
.btn.c-teal { color: #08292e; }
.btn.disabled { opacity: .52; }
.panel { border-radius: 20px; padding: 28px 38px 34px; background-color: #102438f5; box-shadow: 0 30px 100px #0008; max-height: 92vh; }
.panel-title { font-size: 32px; font-weight: 750; letter-spacing: -.035em; text-shadow: none; margin: 6px 0 26px; }
.back-btn, .close-btn { border-radius: 9px; width: 44px; height: 40px; top: 26px; left: 26px; }
.back-btn svg { width: 23px; }
.screen:not(.main-menu):not(.lobby):not(.results) { background: #050e1c78; }
.screen.enter { animation: orbit-enter .26s ease-out; }
@keyframes orbit-enter { from { opacity: 0; } to { opacity: 1; } }
.main-menu { background: linear-gradient(90deg, #081322fa 0%, #081322dd 28%, #08132200 62%); }
.orbit-masthead { position: absolute; left: 5%; right: 5%; top: 30px; display: flex; align-items: center; gap: 20px; color: #829cae; font-size: 10px; font-weight: 650; letter-spacing: .18em; }
.orbit-mark { color: #dcf6f2; font-size: 18px; font-weight: 850; letter-spacing: -.06em; padding: 10px 13px; border: 1px solid #8fd5d93b; border-radius: 10px; }
.orbit-status { margin-left: auto; font-size: 9px; }
.orbit-status::before { content: ''; display: inline-block; width: 6px; height: 6px; background: #65e4cc; border-radius: 50%; margin-right: 10px; box-shadow: 0 0 12px #65e4cc70; }
.logo { left: 7%; top: 22%; width: 43%; transform: none; }
.orbit-kicker { font: 650 10px var(--font); letter-spacing: .21em; color: #78acb8; margin-bottom: 20px; }
.logo h1 { margin: 0; font-size: clamp(62px, 8.7vw, 142px); font-weight: 950; letter-spacing: -.075em; line-height: .82; color: #f2f3e9; }
.logo h1 > span { display: block; }
.logo h1 > span + span { margin-top: 10px; }
.logo h1 i { color: #6ae9d3; font-style: normal; }
.orbit-edition { margin-top: 26px; font-size: 11px; letter-spacing: .19em; color: #9bb0bc; display: flex; align-items: center; gap: 12px; }
.orbit-edition span { color: #071e26; background: #70e6d1; border-radius: 4px; padding: 5px 10px; font-weight: 850; letter-spacing: .13em; }
.orbit-intro { font-size: 15px; line-height: 1.65; color: #9cb1c1; white-space: pre-line; margin-top: 20px; }
.menu-row { left: 7%; bottom: 17%; transform: none; width: 380px; display: grid; grid-template-columns: repeat(4, 1fr); align-items: stretch; gap: 10px; }
.menu-row .btn { font-size: 11px; height: 44px; padding: 0 8px; background: #112536bd; border: 1px solid #9cc7d127; color: #abc1ce; box-shadow: none; }
.menu-row .btn.big { grid-column: 1 / -1; grid-row: 1; font-size: 20px; height: 61px; min-width: 0; border-radius: 9px; background: #70e6d1; color: #072a32; justify-content: space-between; padding: 0 25px; font-weight: 800; }
.menu-row .btn.big::after { content: '\2197'; font-size: 28px; font-weight: 400; }
.menu-row .btn.icon { width: auto; height: 44px; font-size: 11px; flex-direction: row; padding: 0 8px; gap: 5px; }
.menu-row .btn.icon svg { width: 17px; height: 17px; color: #9cb9c5; }
.menu-row .btn.focus { outline-width: 1px; outline-offset: 5px; }
.orbit-caption { position: absolute; left: 59%; bottom: 8%; display: flex; flex-direction: column; gap: 9px; text-align: center; width: 30%; }
.orbit-caption span { color: #7295a8; font-size: 9px; letter-spacing: .19em; }
.orbit-caption strong { color: #d4e3e8; font-size: 18px; font-weight: 500; }
.corner-btns { left: auto; right: 5%; bottom: 25px; }
.corner-btns .btn { width: 40px; height: 40px; border-radius: 10px; background: #132a3b; }
.corner-btns svg { width: 22px; height: 22px; }
.version { left: 7%; bottom: 34px; transform: none; font-size: 9px; letter-spacing: .025em; color: #5f7b8f; max-width: 78%; white-space: normal; }
.play-cards { gap: 18px; padding: 8px 0 10px; }
.card { width: 244px; height: 225px; border-radius: 14px; background-color: #19364a; padding: 18px 10px; }
.card:nth-child(2) { background-color: #243551; }
.card:nth-child(3) { background-color: #453442; }
.card .label { font-size: 20px; white-space: normal; line-height: 1.25; }
.card .sub { font-size: 12px; color: #b2c9d5; margin-top: 8px; font-weight: 400; }
.card .art { padding: 10px; }
.section-title { font-size: 18px; font-weight: 650; letter-spacing: .02em; text-shadow: none; color: #a8c6d3; }
.coop-scroll { border-radius: 12px; scrollbar-color: #3d6575 #112638; }
.diff-col .btn { font-size: 18px; }
.level { border-radius: 10px; font-size: 14px; background-color: #214351; }
.level .thumb { border-radius: 6px; box-shadow: inset 0 0 0 1px #9debe626; }
.level .stars { font-size: 17px; }
.playlist { border-radius: 14px; background-color: #19364a; font-size: 18px; }
.playlist .thumbs div, .dialog .thumbgrid div { border-radius: 5px; }
.dialog .row { font-size: 20px; text-shadow: none; color: #c9dce4; }
.dialog .row .val { color: #79e4d0; font-variant-numeric: tabular-nums; }
.dialog .row .btn { border-radius: 7px; }
.wide-btn { height: 58px; font-size: 25px; border-radius: 10px; }
.pause { width: 340px; }
.pause .name { font-size: 14px; letter-spacing: .04em; }
.pause .btn { height: 52px; font-size: 23px; }
.confirm .q { font-size: 24px; text-shadow: none; }
.confirm .btn { font-size: 22px; }
.set-row { font-size: 19px; margin: 18px 8px; }
.set-row input[type=range] { accent-color: #70e6d1; }
.seg .btn { font-size: 15px; }
.seg .btn.on { color: #08292e; }
.textpage .body { font-size: 17px; line-height: 1.7; text-shadow: none; color: #c1d2dc; }
.textpage h3 { color: #70e6d1; font-size: 21px; font-weight: 650; }
.lobby, .results { background: radial-gradient(ellipse at 75% 25%, #17425555, transparent 55%), linear-gradient(125deg, #0d2031, #081322); }
.lobby::before, .results::before { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(#83bfc908 1px, transparent 1px), linear-gradient(90deg, #83bfc908 1px, transparent 1px); background-size: 64px 64px; }
.lobby-bg, .results .bg { opacity: .07; }
.lobby .prompt { font-size: 23px; color: #d2e6ec; text-shadow: none; }
.lobby .prompt b { color: #70e6d1; }
.lobby .title { font-size: 32px; font-weight: 750; text-shadow: none; }
.lobby .upnext { color: #8daabd; font-size: 15px; }
.lobby .slots { gap: 8px; max-height: 52vh; overflow-y: auto; width: min(620px, 62vw); align-items: stretch; scrollbar-width: thin; }
.slot { gap: 12px; font-size: 23px; padding: 10px 15px; background: #173044b3; border: 1px solid #86b8c323; border-radius: 11px; }
.slot .icon, .slot .icon.pic { flex-shrink: 0; width: 46px; height: 46px; border-radius: 8px; }
.slot .arrows { font-size: 14px; color: #99b2c5; }
.slot .ready { font-size: 13px; color: #70e6d1; margin-left: auto; }
.lobby .note { color: #b1c8d1; font-size: 17px; line-height: 1.6; text-shadow: none; }
.lobby .more { color: #819ead; font-size: 15px; }
.lobby .tip { left: 5%; bottom: 30px; transform: none; width: 32%; font-size: 12px; gap: 10px; line-height: 1.55; }
.lobby .tip b { font-size: 14px; color: #70e6d1; }
.lobby .lobby-btns { right: 4%; bottom: 32px; gap: 8px; }
.lobby .lobby-btns .btn { font-size: 15px; padding: 12px; }
.controls-guide { font-size: 17px; text-shadow: none; color: #c4d7e2; }
.controls-guide .b { border-radius: 13px; box-shadow: inset 0 1px 0 #ffffff55, 0 5px 14px #0004; }
.controls-guide .k { font-size: 18px; font-weight: 700; }
.controls-guide .small { font-size: 12px; color: #96afbd; }
.hud-tl { left: 22px; top: 20px; text-shadow: 0 2px 8px #0008; }
.hud-game { font-size: 24px; font-weight: 800; letter-spacing: -.03em; }
.hud-desc { font-size: 13px; color: #b9d3df; margin-top: 6px; }
.scoreboard { gap: 5px; margin-top: 14px; }
.sb-row { height: 32px; min-width: 168px; font-size: 15px; border-left-width: 3px; background: #0b2033d9; border-radius: 0 7px 7px 0; }
.sb-row .sc { font-weight: 750; font-variant-numeric: tabular-nums; }
.score-box { border-width: 1px; border-color: #62b7ca66; border-radius: 8px; background: #102b40db; font-size: 18px; padding: 6px 12px; }
.hud-timer { display: inline-block; font-size: 23px; font-weight: 600; padding: 6px 18px; border-radius: 0 0 10px 10px; background: #0b2033bd; font-variant-numeric: tabular-nums; }
.hud-timer:empty { display: none; }
.hud-wave { font-size: 27px; font-weight: 700; }
.hud-bonus { font-size: 15px; color: #f4c17d; }
.menu-btn { width: 43px; height: 43px; top: 17px; right: 20px; border-radius: 10px; background: #153348d9; }
.menu-btn svg { width: 23px; }
.nametag { font-size: 13px; font-weight: 700; }
.nametag .hp { height: 4px; }
.nametag .hp i { background: #68ebc8; }
.big-title .t { font-size: 70px; letter-spacing: -.04em; font-weight: 850; transform: none; background-image: linear-gradient(#f3fbff, #98e4e2); }
.big-title .s { font-size: 21px; }
.tip-bar { font-size: 13px; background: #081b2bbf; border: 1px solid #8bc2cc20; border-radius: 9px; padding: 9px 16px; color: #abc1ce; text-shadow: none; }
.tip-bar b { font-size: 14px; font-weight: 700; color: #70e6d1; white-space: nowrap; }
.results .head { color: #70e6d1; font-size: 33px; font-weight: 750; transform: none; }
.results .sub { color: #98bbca; }
.results .big { font-weight: 850; letter-spacing: -.06em; text-shadow: none; color: #f49a7b; }
.results .big.win { color: #70e6d1; }
.results .btns .btn { border-radius: 13px; width: 90px; height: 70px; }
.standings h2 { font-weight: 800; letter-spacing: -.03em; }
.st-row { background: #153045b3; border: 1px solid #91c1cb20; padding: 10px; border-radius: 10px; font-size: 25px; }
.press-any { font-size: 16px; color: #93aebd; }
#boot { background: radial-gradient(ellipse at 50% 40%, #183c4c, #081322 65%); }
.boot-title { font-size: 56px; font-weight: 900; text-transform: uppercase; letter-spacing: -.07em; text-shadow: none; }
.boot-sub { font-size: 13px; letter-spacing: .12em; color: #70e6d1; }
.touch .stick { border: 1px solid #88ddd65c; background: #0c253e80; }
.touch .stick i { background: #71e7d178; border: 1px solid #a5f6e1aa; }
.touch .pad .b { border-radius: 20px; }
@media (min-width: 1600px) { .menu-row { width: 430px; } .logo { top: 24%; } }
@media (max-height: 740px) and (min-width: 701px) { .logo { top: 20%; } .logo h1 { font-size: min(8vw, 104px); } .orbit-intro { font-size: 13px; margin-top: 14px; } .orbit-edition { margin-top: 20px; } .menu-row { bottom: 15%; } }
@media (max-width: 1000px) {
  .menu-row { width: 330px; } .orbit-masthead { top: 20px; } .orbit-masthead > span:nth-child(2) { font-size: 8px; }
  .panel { padding: 22px; } .panel-title { font-size: 28px; } .play-cards { gap: 12px; } .card { width: 210px; height: 185px; } .card .label { font-size: 17px; }
  .back-btn { left: 18px; top: 18px; } .lobby .lobby-btns { right: 3%; } .lobby .lobby-btns .btn { font-size: 12px; } .lobby .tip { width: 27%; }
}
@media (max-width: 700px) {
  .main-menu { background: linear-gradient(0deg, #081322 2%, #081322ef 30%, #08132230 75%); }
  .orbit-masthead { top: 16px; } .orbit-masthead > span:nth-child(2) { display: none; }
  .logo { top: 15%; left: 7%; width: 86%; } .logo h1 { font-size: clamp(55px, 13vw, 85px); } .orbit-kicker { font-size: 8px; margin-bottom: 14px; }
  .orbit-edition { font-size: 9px; margin-top: 18px; } .orbit-intro { display: none; }
  .menu-row { left: 7%; width: 86%; bottom: 13%; } .menu-row .btn.big { height: 54px; }
  .orbit-caption { display: none; } .version { font-size: 8px; bottom: 24px; max-width: 70%; }
  .corner-btns { bottom: 18px; } .panel { padding: 16px; max-width: 95vw; border-radius: 15px; overflow-y: auto; }
  .panel-title { font-size: 24px; margin: 8px 35px 20px; } .back-btn { width: 33px; height: 33px; top: 17px; left: 14px; }
  .play-cards { flex-direction: column; gap: 10px; } .card { flex-direction: row; align-items: center; justify-content: flex-start; width: 100%; height: 110px; gap: 10px; }
  .card .art { flex: 0 0 26%; height: 80px; padding: 0; } .card .label { font-size: 15px; text-align: left; } .card .sub { font-size: 11px; white-space: nowrap; margin-left: auto; }
  .playlists { gap: 12px; padding: 0; } .playlist { width: 44%; font-size: 14px; } .set-row { font-size: 15px; gap: 10px; margin: 15px 0; flex-wrap: wrap; } .set-row input[type=range] { width: 160px; }
  .lobby .prompt { font-size: 18px; padding: 0 10px; } .lobby .upnext { font-size: 12px; padding: 0 12px; } .lobby .slots { width: 92%; max-height: 45vh; }
  .slot { font-size: 17px; gap: 8px; padding: 8px; } .slot .arrows { font-size: 11px; } .slot .icon.pic { width: 36px; height: 36px; }
  .lobby .note { width: 85%; font-size: 14px; top: 58%; } .lobby .tip { display: none; } .lobby .more { font-size: 12px; bottom: 150px; padding: 0 15px; }
  .lobby .lobby-btns { left: 4%; right: 4%; bottom: 22px; display: grid; grid-template-columns: 1fr 1fr; } .lobby .lobby-btns .btn { font-size: 13px; }
  .hud-tl { top: 15px; left: 12px; } .hud-game { font-size: 20px; } .hud-desc { max-width: 200px; font-size: 12px; } .sb-row { min-width: 130px; font-size: 12px; height: 26px; }
  .big-title .t { font-size: 45px; } .big-title .s { font-size: 16px; } .results .col { font-size: 14px; } .results .col h4 { font-size: 17px; } .results .big { font-size: 70px; }
}
@media (max-height: 560px) and (min-width: 701px) {
  .orbit-masthead { top: 12px; } .orbit-mark { padding: 6px 10px; font-size: 14px; }
  .logo { top: 19%; } .logo h1 { font-size: min(6.4vw, 70px); } .orbit-kicker { margin-bottom: 12px; font-size: 8px; } .orbit-edition { margin-top: 10px; font-size: 9px; } .orbit-intro { display: none; }
  .menu-row { bottom: 13%; width: 320px; gap: 8px; } .menu-row .btn.big { height: 46px; font-size: 17px; } .menu-row .btn, .menu-row .btn.icon { height: 34px; font-size: 10px; }
  .version { bottom: 16px; font-size: 8px; } .corner-btns { bottom: 12px; } .orbit-caption { bottom: 5%; } .orbit-caption > :not(:last-child) { display: none; }
  .card { height: 160px; } .panel-title { margin-bottom: 18px; } .lobby .lobby-btns { bottom: 12px; } .lobby .tip { display: none; }
}
@media (prefers-reduced-motion: reduce) { .screen, .btn, .press-any, .st-row { animation-duration: .01ms !important; transition-duration: .01ms !important; } }