* { box-sizing: border-box; }
html, body { width:100%; height:100%; margin:0; overflow:hidden; background:#080e19; color:#edf4f6; font-family:Arial,Helvetica,sans-serif; }
body { display:flex; flex-direction:column; }
button, a { -webkit-tap-highlight-color:transparent; }
button { display:inline-flex; align-items:center; justify-content:center; color:#dce9ee; background:#1a293b; border:1px solid #304359; border-radius:14px; padding:12px 18px; min-height:44px; font:600 14px Arial,Helvetica,sans-serif; cursor:pointer; }
button:hover { background:#25394c; }
button:focus { outline:none; }
body[data-focus="keyboard"] button:focus { outline:2px solid #b7f7dc; outline-offset:2px; }
button:disabled { opacity:.45; cursor:default; }
.icon { width:24px; height:24px; flex-shrink:0; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; pointer-events:none; }
button .icon + span { margin-left:9px; }
.icon-button { width:44px; height:44px; min-height:44px; padding:10px; border-color:transparent; background:transparent; border-radius:13px; }
.icon-button[aria-pressed="true"] { color:#071c1b; background:#a5efcf; }
.sr-only { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); }
.topbar { flex:0 0 auto; height:64px; padding:0 24px; display:flex; align-items:center; justify-content:space-between; background:#0e1827; border-bottom:1px solid #1c2b3e; }
.brand { display:flex; align-items:center; font-size:22px; font-weight:900; letter-spacing:-.8px; white-space:nowrap; }
.brand-mark { display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; color:#a9f1d2; margin-right:7px; }
.team { display:flex; align-items:center; font-size:12px; font-weight:700; }
#waveLabel { margin-right:12px; color:#c8d5e2; white-space:nowrap; }
#spiritMeter { display:flex; }
#spiritMeter i { width:5px; height:14px; margin:0 1px; background:#a5efcf; border-radius:2px; }
.tools { display:flex; align-items:center; }
.tools > button, .tools > div { margin-left:4px; }
.scorebar { flex:0 0 auto; min-height:30px; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; padding:4px; }
.score-chip { display:flex; align-items:center; margin:0 9px; font-size:11px; color:#9caec1; white-space:nowrap; }
.score-chip b { border-radius:50%; display:inline-block; width:20px; height:20px; text-align:center; padding:4px 0; color:#101926; margin-right:5px; font-size:10px; }
.score-chip span { margin-left:7px; color:#eef7fa; font-weight:bold; }
#stage { position:relative; flex:1 1 auto; min-height:0; display:flex; align-items:center; justify-content:center; overflow:hidden; }
canvas { display:block; }
.overlay { position:absolute; z-index:2; left:0; top:0; width:100%; height:100%; display:flex; align-items:center; justify-content:center; background:rgba(8,14,25,.91); }
.overlay.hidden { display:none; }
.lobby-card { display:flex; align-items:center; width:880px; max-width:96%; max-height:100%; padding:24px; overflow-y:auto; }
.lobby-hero { position:relative; flex:0 0 42%; height:340px; display:flex; align-items:center; justify-content:center; }
.hero-moon { position:absolute; width:260px; height:260px; border-radius:50%; background:#183b3e; border:1px solid #305755; }
.lobby-hero img { position:relative; width:100%; max-width:350px; max-height:100%; object-fit:contain; }
.lobby-content { flex:1; min-width:0; padding-left:28px; }
.eyebrow { color:#9eafc3; font-size:10px; font-weight:bold; letter-spacing:2px; }
h1 { font-size:48px; font-weight:900; letter-spacing:-2px; line-height:1.04; margin:12px 0; }
h1 em { font-style:normal; color:#a6efd0; }
p { font-size:14px; line-height:1.5; color:#9fb0c3; margin:10px 0; }
.lobby-actions { display:flex; margin-top:20px; }
.lobby-actions button { min-height:52px; }
.primary { background:#a6efd0; color:#112f2a; border-color:#a6efd0; font-weight:800; }
.primary:hover { background:#c7f9e4; }
.secondary { background:#192b3c; border-color:#30485a; }
#practiceBtn { flex:1; font-size:16px; }
#practiceBtn .icon { fill:currentColor; stroke-width:0; width:18px; }
#startBtn { margin-left:8px; }
.join-area { display:flex; align-items:center; margin-top:20px; }
.join-copy { margin-left:20px; min-width:0; }
.join-copy strong { display:block; font-size:16px; margin-bottom:5px; }
.join-copy span, .join-copy a { display:block; font-size:11px; color:#95a8bc; line-height:1.5; overflow-wrap:break-word; }
.join-copy a { margin-top:8px; text-decoration:none; color:#b7d2df; }
#qr { width:116px; height:163px; min-width:116px; }
#qr .rcRoomQrCodeLink { transform:scale(.7); transform-origin:top left; }
.small { font-size:10px; letter-spacing:1.4px; color:#70859c; margin:16px 0 0; }
.banner { position:absolute; top:12px; left:15%; width:70%; text-align:center; font-size:13px; font-weight:700; color:#e4f8ee; pointer-events:none; padding:8px; }
.banner:empty { display:none; }
footer { flex:0 0 auto; height:24px; display:flex; align-items:center; justify-content:space-between; padding:0 20px; font-size:9px; color:#6e849c; letter-spacing:.5px; }
#fps { display:none; }
#error { display:none; position:absolute; z-index:30; bottom:30px; left:5%; right:5%; padding:12px; color:#ffe6dc; background:#562d39; border:1px solid #c48787; border-radius:10px; text-align:center; font-size:12px; }
#liveQr { display:none; position:absolute; top:12px; right:12px; width:83px; height:116px; }
#liveQr .rcRoomQrCodeLink { transform:scale(.5); transform-origin:top left; }
.invite-link { display:none; text-decoration:none; }
#liveInvite { display:none; }
.invite-modal { position:absolute; z-index:20; top:0; left:0; width:100%; height:100%; padding:16px; background:rgba(4,9,17,.94); display:flex; align-items:center; justify-content:center; }
.invite-modal.hidden { display:none; }
.invite-card { width:360px; max-width:100%; max-height:100%; overflow-y:auto; -webkit-overflow-scrolling:touch; background:#132133; border:1px solid #304357; border-radius:22px; padding:20px; text-align:center; }
.invite-heading { display:flex; align-items:center; justify-content:space-between; }
.invite-heading h2 { margin:0; font-size:24px; letter-spacing:-.8px; }
#inviteClose { padding:10px; min-width:44px; min-height:44px; background:transparent; border:none; }
.invite-card p { font-size:12px; margin:10px 0; }
#inviteQr { margin:18px auto; }
.invite-card label { display:block; text-align:left; color:#a8bacb; font-size:11px; margin-bottom:7px; }
#inviteAddress { width:100%; padding:12px; border:1px solid #31475f; border-radius:10px; background:#0a1523; color:#dce8f3; font:16px Arial; }
#inviteCopy { min-height:48px; width:100%; margin-top:10px; }
#inviteCopyStatus { min-height:18px; color:#b9ebd6; }
.setting-row { width:100%; margin-top:10px; justify-content:space-between; min-height:54px; }
.setting-row[aria-pressed="true"] { border-color:#76b69f; color:#b9f8dd; }
#touchControls { display:none; }
body.touch-view { position:fixed; top:0; left:0; padding-top:constant(safe-area-inset-top); padding-top:env(safe-area-inset-top); padding-left:constant(safe-area-inset-left); padding-left:env(safe-area-inset-left); padding-right:constant(safe-area-inset-right); padding-right:env(safe-area-inset-right); }
.touch-view #touchControls { display:block; flex:0 0 auto; padding:12px 14px 16px; padding-bottom:calc(16px + constant(safe-area-inset-bottom)); padding-bottom:calc(16px + env(safe-area-inset-bottom)); background:#0e1928; border-top:1px solid #26374b; }
.touch-status { display:none; }
.touch-pad { display:flex; -ms-touch-action:none; touch-action:none; -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }
.touch-pad button { position:relative; flex:1 1 0; min-width:0; height:76px; margin:0 3px; padding:8px; border-radius:20px; border:1px solid #3b516b; border-bottom-width:5px; background:#223449; color:#e2edf6; flex-direction:column; }
.touch-pad button .icon { width:28px; height:28px; stroke-width:2.4; }
.touch-pad button span { margin:4px 0 0; font:700 10px Arial; letter-spacing:.7px; }
.touch-pad .touch-jump { margin-left:18px; background:#b96951; border-color:#e6ac83; border-bottom-color:#834736; color:#fff2dc; }
.touch-pad .touch-zap { background:#79c3a4; border-color:#b3efd0; border-bottom-color:#458c72; color:#092e29; }
.touch-pad button[aria-pressed="true"] { transform:translateY(3px); border-bottom-width:2px; background:#d9f5e9; color:#15332c; }
.touch-pad .flight-icon { display:none; transform:rotate(180deg); }
.touch-pad[data-spirit="true"] #touchZap > .icon { display:none; }
.touch-pad[data-spirit="true"] #touchZap > .flight-icon { display:block; }
.touch-view footer { display:none; }
body[data-phase="lobby"] .team, body[data-phase="lobby"] .scorebar, body[data-phase="lobby"] #pauseBtn { display:none; }
body[data-phase="lobby"] #touchControls, body[data-phase="over"] #touchControls, body[data-phase="won"] #touchControls { display:none !important; }
.lean * { box-shadow:none !important; filter:none !important; }
@media (min-width:1450px) { .topbar {height:76px;padding:0 32px;} .brand {font-size:28px;} .score-chip {font-size:14px;} .lobby-card {width:1040px;} .lobby-hero {height:450px;} .lobby-hero img {max-width:440px;} .hero-moon {width:330px;height:330px;} h1 {font-size:62px;} .lobby-content {padding-left:40px;} }
@media (max-width:700px) {
 .topbar {height:56px;padding:0 12px;} .brand {font-size:18px;} .tools > button, .tools > div {margin-left:0;}
 body[data-phase="playing"] .brand, body[data-phase="intermission"] .brand {font-size:0;} .team {font-size:11px;}
 .score-chip {margin:0 6px;font-size:10px;} .scorebar {min-height:28px;}
 .lobby-card {display:block;text-align:center;padding:16px 22px;max-width:100%;width:420px;} .lobby-hero {height:210px;width:100%;} .lobby-hero img {width:240px;} .hero-moon {width:170px;height:170px;}
 .lobby-content {padding:0;} h1 {font-size:44px;margin:12px 0;} .eyebrow {font-size:9px;letter-spacing:1.6px;} .lobby-actions {margin-top:18px;}
 .join-area {margin-top:10px;justify-content:center;} #joinArea .join-copy, #qr, #liveQr {display:none !important;} .invite-link {display:inline-flex;width:100%;min-height:46px;}
 .small {font-size:9px;} .banner {top:4px;left:5%;width:90%;font-size:11px;} footer {font-size:8px;padding:0 12px;} #hint {display:none;}
}
@media (min-width:701px) { #liveInvite {display:none !important;} }
@media (max-width:360px) {
 body[data-phase="playing"] .brand, body[data-phase="intermission"] .brand {display:none;}
 .team {font-size:10px;} #waveLabel {margin-right:6px;} #spiritMeter i {width:3px;margin:0 .5px;}
}
@media (max-height:650px) { .lobby-card {padding-top:12px;padding-bottom:12px;} .lobby-hero {height:260px;} h1 {font-size:40px;} .small {display:none;} .lobby-actions {margin-top:12px;} .join-area {margin-top:12px;} }
@media (max-width:700px) and (max-height:650px) { .lobby-hero {height:125px;} .lobby-hero img {width:145px;} .hero-moon {width:110px;height:110px;} h1 {font-size:34px;margin:8px 0;} .lobby-content p {font-size:12px;margin:8px 0;} .lobby-actions {margin-top:12px;} .touch-pad button {height:64px;} }
@media (orientation:landscape) and (max-height:500px) { .topbar {height:48px;} .scorebar {min-height:24px;} .touch-view #touchControls {padding:7px 12px 8px;padding-bottom:calc(8px + env(safe-area-inset-bottom));} .touch-pad {max-width:560px;margin:0 auto;} .touch-pad button {height:54px;flex-direction:row;} .touch-pad button span {margin:0 0 0 8px;} .touch-pad button .icon {width:23px;height:23px;} .lobby-hero {height:170px;} h1 {font-size:32px;} .lobby-card {padding:10px;} .join-copy {display:none;} #qr {width:83px;height:116px;min-width:83px;} #qr .rcRoomQrCodeLink {transform:scale(.5);} }
@media (max-height:600px) { .invite-card {padding:12px;} .invite-heading h2 {font-size:22px;} .invite-card p {margin:6px 0;line-height:1.25;} #inviteQr {width:133px;height:186px;margin:8px auto;} #inviteQr .rcRoomQrCodeLink {transform:scale(.8);transform-origin:top left;} #inviteCopyStatus {font-size:11px;min-height:14px;} }
@media (orientation:landscape) and (max-height:500px) and (max-width:700px) {
 .lobby-card {display:flex;padding:8px 16px;width:100%;}
 .lobby-hero {flex:0 0 35%;height:170px;}
 .lobby-content {padding-left:20px;text-align:left;}
 .lobby-content h1 {font-size:28px;margin:7px 0;}
 .lobby-content p {font-size:12px;line-height:1.3;margin:6px 0;}
 .lobby-actions {margin-top:10px;} .lobby-actions button {min-height:44px;}
 .join-area {margin-top:8px;} .invite-link {min-height:40px;}
}

/* Standard RCWeb panel from /v/style.css; keep its internal proportions intact. */
.rcRoomQrCodeLink, .rcRoomQrCodeLink * { box-sizing: content-box; }
.rcRoomQrCodeLink {
    display: block; width: 150px; margin-left: auto; margin-right: auto;
    border: solid 8px #fff; border-radius: 8px; color: #fff; background-color: #fff;
    box-shadow: 0 0 32px #000; text-align: center; transition: opacity 1s ease; text-decoration: none;
}
.rcTechLabel {
    background-color: #000; color: #fff; font-family: monospace; font-size: 13px; font-weight: bold;
    margin: 0 0 8px 0; padding: 4px; letter-spacing: 0.2em; border-radius: 8px 8px 0 0;
}
.rcRoomQrCode { width: 150px; height: 150px; }
.rcRoomId {
    background-color: #000; color: #fff; font-family: monospace; font-size: 16px;
    padding: 4px; margin: 8px 0 0 0; letter-spacing: 0.25em; border-radius: 0 0 8px 8px;
}

.lobby-guide { flex:0 0 48%; min-width:0; }
@media (min-width:1450px) { .lobby-guide .guide-art { flex-basis:140px; width:140px; height:140px; } .lobby-guide .ecto-guide p { font-size:16px; } }
.settings-card { width:440px; }
.settings-card .ecto-guide { margin-top:18px; }
@media (max-width:700px) { .lobby-guide { width:100%; } .lobby-content { margin-top:20px; } .lobby-content h1 { font-size:32px; } }
@media (orientation:landscape) and (max-height:500px) { .lobby-guide { flex-basis:46%; } .lobby-content { margin-top:0; } }

@media (max-height:650px) {
 .lobby-content h1 { font-size:32px; margin:8px 0; }
 .lobby-content .name-field { margin-top:8px; }
 .lobby-actions { margin-top:8px; } .lobby-actions button { min-height:44px; }
}
@media (min-width:701px) and (min-height:501px) and (max-height:650px) {
 #qr { width:100px; height:140px; min-width:100px; }
 #qr .rcRoomQrCodeLink { transform:scale(.6); }
}
@media (max-height:650px) and (max-width:700px), (orientation:landscape) and (max-height:500px) {
 .lobby-guide .guide-art { flex-basis:56px; width:56px; height:56px; margin-right:10px; }
 .lobby-guide .ecto-guide li { margin:6px 0; }
 .lobby-guide .ecto-guide h2 { font-size:16px; margin-bottom:8px; }
 .lobby-guide .ecto-guide strong { font-size:12px; }
 .lobby-guide .ecto-guide p { font-size:11px; line-height:1.3; }
 .lobby-guide .guide-note { display:none; }
 .lobby-content { margin-top:8px; }
 .lobby-content #eyebrow, .lobby-content #overlayCopy { display:none; }
 .lobby-content h1 { font-size:24px; margin:4px 0; }
}
@media (orientation:portrait) and (max-height:650px) and (max-width:700px) {
 .lobby-content h1 { display:block; }
 .lobby-card { padding:12px 18px; }
 .lobby-content .name-feedback { font-size:10px; }
}

/* Put the invitation and play actions before the illustrated instructions. */
.lobby-card { display:block; }
.lobby-content { position:relative; margin-top:0; padding:0; }
.lobby-guide { width:100%; margin-top:24px; }
.lobby-content #howto { display:none; }
@media (min-width:701px) {
 .lobby-content { padding-right:190px; }
 .lobby-content .name-field, .lobby-actions { max-width:460px; }
 .lobby-content .join-area { position:absolute; right:0; top:50%; margin:0; transform:translateY(-50%); }
 .lobby-content .join-copy { display:none; }
 .lobby-guide .ecto-guide ol { display:flex; }
 .lobby-guide .ecto-guide li { flex:1; min-width:0; margin:0 12px 0 0; align-items:flex-start; }
 .lobby-guide .guide-art { flex-basis:76px; width:76px; height:76px; margin-right:10px; }
 .lobby-guide .ecto-guide p { font-size:12px; }
 .lobby-guide .ecto-guide strong { font-size:14px; }
}
@media (max-height:650px) { .lobby-guide { margin-top:16px; } }