/* Linked raids extend the existing Prism arcade cabinet, outside its portrait shell. */
.online-open .app { visibility: hidden; }
body.online-open #rotate { display: none !important; }
.online-raid { position: fixed; top: 0; left: 0; width: var(--app-width); height: var(--app-height); z-index: 90; display: flex; flex-direction: column; overflow: hidden; isolation: isolate; background: var(--bg); padding: max(14px, var(--sat)) max(14px, var(--sar)) max(12px, var(--sab)) max(14px, var(--sal)); color: var(--text); }
.online-head { display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: 12px; width: 100%; max-width: 1500px; margin: 0 auto 16px; padding: 16px 14px; background: linear-gradient(180deg, #232839, #171c29); border: 2px solid #000; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--edge-hi), inset 0 3px 0 #ffffff08, 0 4px 0 #000; }
.online-brand { color: var(--amber); font: 700 10px var(--pixel); letter-spacing: .12em; }
.online-head h1 { font: 700 24px/1.2 var(--pixel); margin: 9px 0 0; color: var(--cyan); text-shadow: 0 3px 0 #062f3c, 0 0 16px #4ee6ff18; }
.online-head p { font: 13px/1.5 var(--body); color: var(--muted); margin: 8px 0 0; }
.online-exit { flex-shrink: 0; min-height: 46px; padding: 0 12px; font-size: 12px; }
.online-exit .px-ic { width: 13px; }
.online-menu { min-height: 0; flex: 1; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; align-items: center; padding: 8px 0 16px; }
.online-cabinet { width: 100%; max-width: 420px; margin: auto 0; padding: 30px 20px 24px; display: flex; flex-direction: column; gap: 18px; text-align: center; background: linear-gradient(180deg, #1a1e2c, #12151f); border: 2px solid #000; border-radius: 12px; box-shadow: inset 0 0 0 2px var(--edge), inset 0 4px 0 rgba(255, 255, 255, .05), 0 8px 0 #000, 0 30px 80px rgba(0, 0, 0, .7); }
.online-cabinet h2 { color: var(--amber); font: 700 20px/1.35 var(--pixel); margin: 0; text-shadow: 0 2px 0 #000; }
.online-cabinet p { font-size: 13px; line-height: 1.55; margin: 0; color: var(--text-2); }
.online-emblem { display: grid; place-items: center; align-self: center; width: 44px; height: 44px; font-size: 26px; color: var(--amber); background: #11141d; border: 2px solid #000; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--edge); }
.online-roles { display: grid; gap: 16px; }
.online-roles .btn { font-size: 14px; min-height: 58px; padding: 12px; line-height: 1.3; }
.online-rules { color: var(--amber) !important; font: 400 12px/1.6 var(--pixel) !important; padding-top: 12px; border-top: 2px solid var(--edge-dark); box-shadow: inset 0 1px 0 var(--edge); }
.online-fine, .online-cabinet .online-fine { color: var(--muted); font: 12px/1.5 var(--body); }
.online-error { color: #ff9292; font-size: 13px; line-height: 1.5; white-space: pre-wrap; }
.online-error:empty { display: none; }
.online-code-label { font: 700 12px var(--pixel); color: var(--muted); letter-spacing: .12em; }
.online-code-input { display: block; width: 100%; border: 2px solid #000; border-radius: 6px; box-shadow: inset 0 0 0 2px var(--cyan-deep); background: #0c0e15; padding: 16px 8px; font: 700 32px var(--pixel); letter-spacing: .18em; text-align: center; color: var(--cyan); min-height: 68px; }
.online-code-value { font: 700 40px/1.3 var(--pixel); color: var(--cyan); letter-spacing: .1em; padding: 4px 0 12px; user-select: all; }
.online-seat { display: flex; align-items: center; gap: 10px; min-height: 54px; padding: 10px 0; border-top: 1px solid var(--edge-hi); font: 12px var(--pixel); text-align: left; }
.online-seat > span:last-child { margin-left: auto; color: var(--muted); font-size: 10px; }
.online-seat.p1 b { color: var(--cyan); }.online-seat.p2 b { color: var(--gem); }
.online-led { height: 8px; width: 8px; flex: 0 0 auto; background: #5c6276; border-radius: 0; box-shadow: 0 0 0 2px var(--edge-dark); }
.online-led.lit { background: var(--green); box-shadow: 0 0 0 2px #152a22, 2px 2px 0 #000; }
.online-connection { font: 11px/1.5 var(--pixel); color: var(--green); min-height: 17px; overflow-wrap: anywhere; }
.online-wait { color: var(--cyan) !important; font-family: var(--pixel) !important; }
.online-flight { flex: 1; min-height: 0; display: flex; justify-content: center; gap: clamp(14px, 3vw, 48px); }
.online-side { display: flex; flex-direction: column; align-self: center; width: clamp(180px, 23vw, 340px); padding: clamp(18px, 2.6vw, 38px); gap: 20px; }
.online-side h2 { margin: 0; font: 700 clamp(20px, 2.7vw, 40px)/1.35 var(--pixel); color: var(--amber); }
.online-side p { margin: 0; font: 14px/1.7 var(--body); color: var(--muted); }
.online-team-loadout { color: var(--cyan); font: 12px/1.7 var(--pixel); }
.online-play-area { min-width: 0; min-height: 0; width: 100%; display: flex; flex-direction: column; align-items: center; }
.online-game-hud { display: flex; justify-content: space-between; gap: 12px; width: 100%; max-width: 510px; flex: 0 0 auto; padding: 0 6px 10px; }
.online-game-hud span { display: flex; flex-direction: column; gap: 5px; }
.online-game-hud span:last-child { text-align: right; }
.online-game-hud small { font: 10px var(--pixel); color: var(--muted); }.online-game-hud b { font: 700 clamp(17px, 2vw, 25px) var(--pixel); color: var(--amber); }
.online-stage { min-height: 0; flex: 1; width: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.online-world { position: relative; flex-shrink: 0; background: #080a11; border: 1px solid #64718c; box-sizing: content-box; box-shadow: 0 0 40px #4ee6ff14; }
#online-canvas { display: block; width: 100%; height: 100%; touch-action: none; }
.online-float { position: absolute; top: 14%; left: 5%; width: 90%; text-align: center; opacity: 0; color: var(--cyan); font: 700 14px/1.5 var(--pixel); text-shadow: 0 2px 4px #000, 0 0 8px #000; pointer-events: none; transition: opacity .15s; }
.online-float.show { opacity: 1; }.online-float.bad { color: #ff9292; }
.online-phase { font: 10px/1.4 var(--pixel); color: var(--muted); text-align: center; padding: 9px 0 0; min-height: 24px; }
.online-controls { flex: 0 0 auto; width: 100%; max-width: 620px; align-self: center; margin-top: 10px; text-align: center; }
.online-control-row { display: flex; justify-content: center; gap: 20px; align-items: center; padding-top: 12px; }
.online-touchpad { position: relative; width: 152px; height: 126px; flex: 0 0 auto; border: 3px solid var(--edge-dark); border-radius: 0; background: linear-gradient(180deg, #262c3f, #1a1e2c); box-shadow: inset 0 2px 0 #ffffff1a, inset 0 -4px 0 #0006; touch-action: none; }
.pad-cross::before, .pad-cross::after { content: ''; position: absolute; top: 22px; left: 61px; width: 24px; height: 66px; background: #080b13; border: 2px solid #000; border-radius: 1px; box-shadow: inset 0 0 0 1px var(--edge-hi); }.pad-cross::after { transform: rotate(90deg); }
.pad-stick { position: absolute; width: 43px; height: 43px; top: 32px; left: 51px; border-radius: 0; background: linear-gradient(180deg, #56627e, #2a334b); border: 3px solid #0b1320; box-shadow: inset 0 3px 0 #b5d1e340, inset 0 -3px 0 #0008; pointer-events: none; }
.online-touchpad small { position: absolute; bottom: 10px; left: 0; width: 100%; font: 9px var(--pixel); color: var(--muted); pointer-events: none; }
.online-action-column { display: grid; gap: 12px; min-width: 136px; }.online-action-column .btn { min-height: 51px; font-size: 12px; padding: 0 12px; }
.online-pad-note { font: 9px/1.5 var(--pixel); color: var(--muted); margin: 12px 0 0; }
.online-screen-actions { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 10px; font: 11px var(--pixel); color: var(--muted); }
.online-layer { position: absolute; inset: 0; z-index: 5; background: #060912c9; display: grid; place-items: center; overflow: auto; padding: max(24px, var(--sat)) 16px max(24px, var(--sab)); backdrop-filter: blur(3px); }
.online-layer-card { width: 100%; max-width: 420px; padding: 30px 24px 26px; display: flex; flex-direction: column; gap: 16px; margin: auto; background: linear-gradient(180deg, #1a1e2c, #12151f); border: 2px solid #000; box-shadow: inset 0 0 0 2px var(--edge), inset 0 4px 0 #ffffff0d, 0 8px 0 #000; }
.online-layer-card h2 { color: var(--amber); font: 700 23px/1.3 var(--pixel); margin: 0; }.online-layer-card p { font-size: 14px; line-height: 1.6; margin: 0; color: var(--text-2); }
.online-upgrade { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; text-align: left; padding: 13px 16px; font-size: 14px; }.online-upgrade small { font: 12px/1.5 var(--body); color: var(--text-2); text-transform: none; letter-spacing: 0; }
@media (max-width: 1000px) { .online-side { display: none; } .online-play-area { max-width: 650px; } }
@media (max-width: 600px) {
  .online-raid { padding-left: max(12px, var(--sal)); padding-right: max(12px, var(--sar)); }
  .online-head { margin-bottom: 12px; gap: 8px; }.online-head h1 { font-size: 20px; }.online-head p { font-size: 12px; }.online-brand { font-size: 10px; }
  .online-head .online-exit { min-height: 44px; padding: 0 10px; }.online-exit span { display: none; }
  .online-cabinet { padding: 30px 18px 24px; gap: 16px; }.online-cabinet h2 { font-size: 16px; }.online-cabinet p { font-size: 13px; }
  .online-cabinet .online-fine { font-size: 11px; }.online-game-hud small { font-size: 9px; }.online-game-hud b { font-size: 17px; }
  .online-control-row { gap: 16px; }.online-action-column { min-width: 130px; }
  .is-pilot .online-side { display: none; }
}
@media (max-height: 700px) and (min-width: 600px) {
  .is-pilot.in-raid .online-flight { padding-right: 245px; }
  .is-pilot.in-raid .online-controls { position: absolute; right: max(20px, var(--sar)); bottom: max(20px, var(--sab)); width: 220px; }
  .online-control-row { gap: 10px; flex-direction: column; }.online-action-column { grid-template-columns: 1fr 1fr; }.online-action-column .btn { padding: 0 8px; }
  .online-head p { display: none; }.online-head { margin-bottom: 8px; }
}
@media (max-width: 599px) and (max-height: 720px) {
  .online-touchpad { width: 134px; height: 108px; }.pad-cross::before,.pad-cross::after { top: 15px; left: 52px; }.pad-stick { top: 25px; left: 42px; }
  .online-controls { margin-top: 4px; }.online-control-row { padding-top: 7px; }.online-pad-note { margin-top: 8px; }.online-head { margin-bottom: 8px; }
}
@media (prefers-reduced-motion: reduce) { .online-float { transition: none; } }


/* Match the original .app CRT layer on the separate full-width linked shell. */
.online-raid::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(#0b0d14c9, #0b0d14ee), url('./assets/nebula.webp') center/cover; }
.online-raid::after { content: ''; position: absolute; inset: 0; z-index: 20; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .07) 0 1px, transparent 1px 4px), radial-gradient(ellipse at center, transparent 65%, rgba(0, 0, 0, .3) 100%); }
body.no-crt .online-raid::after { display: none; }
.in-raid .online-head { padding: 0; background: none; border: 0; box-shadow: none; }
.in-raid .online-brand { color: var(--amber); font-family: var(--pixel); }
.in-raid .online-head h1 { color: var(--cyan); }
.online-touchpad, .pad-stick { clip-path: polygon(0 8px, 8px 8px, 8px 0, calc(100% - 8px) 0, calc(100% - 8px) 8px, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 8px calc(100% - 8px), 0 calc(100% - 8px)); }
.online-float.loss { top: auto; bottom: 7%; left: 6%; width: 88%; padding: 8px; background: #11141df2; border: 2px solid #000; border-radius: 3px; box-shadow: inset 0 0 0 1px #765438, 0 3px 0 #000; font-size: 11px; line-height: 1.45; color: var(--amber-hi); text-shadow: 0 2px 0 #000; }
.online-float.loss::before { content: 'UPGRADE LOST'; display: block; margin-bottom: 3px; color: var(--red); font: 700 9px/1.4 var(--pixel); letter-spacing: .08em; }

@media (max-width: 360px) { .online-head h1 { font-size: 16px; } .online-code-value { font-size: 32px; } }

/* Keep menu scrolling available without visible browser scrollbars. */
.online-menu, .online-layer { overflow-y: auto; scrollbar-width: none; -ms-overflow-style: none; }
.online-menu::-webkit-scrollbar, .online-layer::-webkit-scrollbar { width: 0; height: 0; display: none; }
/* Menu Close belongs at the natural top-right inset, independent of body copy. */
.online-raid:not(.in-raid) .online-head { position: relative; align-items: flex-start; padding-right: 74px; }
.online-raid:not(.in-raid) .online-head .online-exit { position: absolute; top: 12px; right: 12px; width: 44px; height: 44px; min-height: 44px; padding: 0; }
.online-raid:not(.in-raid) .online-head .online-exit span { display: none; }

/* Keep role/join/lobby cards close to their heading, without flexible centering. */
.online-raid:not(.in-raid) .online-head { margin-bottom: 8px; }
.online-raid:not(.in-raid) .online-menu { padding-top: 4px; }
.online-raid:not(.in-raid) .online-menu > .online-cabinet { margin: 0; }

/* The Screen is the arena. Pairing details live in the lobby and pause menu. */
.online-raid.is-screen.in-raid { padding: 0; }
.is-screen.in-raid .online-screen-arena { position: relative; flex: 1; min-width: 0; min-height: 0; width: 100%; overflow: hidden; }
.is-screen.in-raid .online-stage { position: absolute; inset: 0; display: block; height: 100%; }
.is-screen.in-raid .online-world { border: 0; box-shadow: none; box-sizing: border-box; }
.is-screen.in-raid .online-game-hud { position: absolute; z-index: 2; top: 0; left: 0; right: 0; width: auto; max-width: none; padding: max(10px, calc(var(--sat) + 6px)) max(16px, var(--sar)) 22px max(16px, var(--sal)); gap: 16px; pointer-events: none; background: linear-gradient(#05070bd9, #05070b80 65%, transparent); text-shadow: 0 2px 0 #000; }
.is-screen.in-raid .online-game-hud small { font-size: clamp(9px, .8vw, 13px); }
.is-screen.in-raid .online-game-hud b { font-size: clamp(17px, 1.8vw, 28px); }
.is-screen.in-raid .online-float.loss { left: 50%; width: min(88%, 520px); transform: translateX(-50%); font-size: clamp(11px, 1.1vw, 16px); }
.online-screen-context { display: flex; flex-direction: column; gap: 12px; padding-top: 12px; border-top: 2px solid var(--edge-dark); }
.online-screen-context .online-seat { min-height: 44px; padding: 8px 0; }
.screen-portrait { display: none; }
/* Screen role in portrait (lobby or raid): the same full-screen, animated
   rotate prompt as the solo upright guard, turning the other way. */
.online-raid.screen-needs-landscape .screen-portrait { position: absolute; inset: 0; z-index: 40; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; padding: max(28px, var(--sat)) max(24px, var(--sar)) max(28px, var(--sab)) max(24px, var(--sal)); text-align: center; background: radial-gradient(ellipse at 50% 45%, #1a1408, #0b0d14 70%); }
.online-raid.screen-needs-landscape:not(.in-raid) > .online-menu { visibility: hidden; }
.online-raid.is-screen.in-raid.screen-needs-landscape .screen-portrait { z-index: 12; }
.screen-portrait .screen-turn-phone { width: 40px; height: 68px; margin: 18px; animation-name: turn-sideways; }
@keyframes turn-sideways { 0%, 20% { transform: rotate(0); } 55%, 100% { transform: rotate(-90deg); } }
.screen-portrait h2 { margin: 0; color: var(--amber); font: 700 24px/1.35 var(--pixel); text-shadow: 0 3px 0 #000; }
.screen-portrait p { max-width: 340px; margin: 0; color: var(--text-2); font: 14px/1.6 var(--body); }
.screen-phone-icon { position: relative; width: 78px; height: 48px; margin: 12px; border: 4px solid var(--cyan); border-radius: 7px; box-shadow: 0 0 0 3px #05070b; }
.screen-phone-icon::after { content: ''; position: absolute; width: 4px; height: 12px; top: 14px; right: 5px; background: var(--amber); }
.screen-portrait .btn { min-height: 48px; }
.is-screen.screen-menu-open .online-layer { z-index: 14; }

/* Screen setup uses the display's width; phone and Multiplayer lobbies stay compact. */
.online-raid.is-screen-lobby:not(.in-raid) .online-head { max-width: 1100px; padding: 16px 80px 16px 20px; }
.is-screen-lobby:not(.in-raid) .online-head h1 { font-size: clamp(26px, 2.7vw, 36px); }
.is-screen-lobby:not(.in-raid) .online-head .online-brand { font-size: 12px; }
.is-screen-lobby:not(.in-raid) .online-head p { display: block; font-size: 14px; }
.is-screen-lobby:not(.in-raid) .screen-lobby-cabinet { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 18px; max-width: 1100px; min-height: clamp(450px, 62vh, 600px); padding: 18px; text-align: left; }
.is-screen-lobby .screen-lobby-section { display: flex; flex-direction: column; gap: 14px; min-width: 0; padding: 20px; background: linear-gradient(180deg, #171c2a, #10141e); border: 2px solid #05070b; box-shadow: inset 0 0 0 1px var(--edge), inset 0 3px 0 #ffffff08; }
.is-screen-lobby .screen-lobby-section h2 { font-size: clamp(20px, 2vw, 25px); line-height: 1.25; }
.is-screen-lobby .screen-lobby-section p { font-size: clamp(15px, 1.4vw, 18px); line-height: 1.55; }
.is-screen-lobby .screen-lobby-section .online-fine { font-size: clamp(13px, 1.1vw, 15px); color: var(--muted); }
.is-screen-lobby .screen-lobby-pair { justify-content: center; text-align: center; }
.is-screen-lobby .online-code-label { font-size: 14px; }
.is-screen-lobby .online-code-value { display: block; width: 100%; padding: 8px 0 10px; font-size: clamp(48px, 5.2vw, 64px); line-height: 1.15; letter-spacing: .08em; border-top: 2px solid var(--edge-dark); border-bottom: 2px solid var(--edge-dark); text-shadow: 0 3px 0 #000; }
.is-screen-lobby .online-seat { min-height: 56px; gap: 12px; padding: 12px 0; font-size: clamp(15px, 1.4vw, 19px); }
.is-screen-lobby .online-seat > span:last-child { font-size: clamp(11px, 1vw, 14px); }
.is-screen-lobby .online-led { width: 10px; height: 10px; }
.is-screen-lobby .online-connection { min-height: 36px; font-size: clamp(13px, 1.2vw, 17px); line-height: 1.5; }
.is-screen-lobby .screen-lobby-actions { display: grid; gap: 12px; margin-top: auto; }
.is-screen-lobby .screen-lobby-section .btn { min-height: 52px; padding: 12px 16px; font-size: clamp(15px, 1.5vw, 20px); line-height: 1.25; }
.is-screen-lobby .screen-lobby-actions #online-start { min-height: 60px; }
.is-screen-lobby .screen-lobby-footer { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; padding-top: 12px; border-top: 2px solid var(--edge-dark); text-align: left; }
.is-screen-lobby .screen-lobby-footer .online-fine { margin: 0; font-size: 13px; line-height: 1.5; }
@media (max-width: 760px) {
  .online-raid.is-screen-lobby:not(.in-raid) .online-head { padding: 14px 72px 14px 16px; }
  .is-screen-lobby:not(.in-raid) .online-head h1 { font-size: 22px; }
  .is-screen-lobby:not(.in-raid) .online-head .online-brand { font-size: 10px; }
  .is-screen-lobby:not(.in-raid) .online-head p { font-size: 12px; }
  .is-screen-lobby:not(.in-raid) .screen-lobby-cabinet { grid-template-columns: minmax(0, 1fr); gap: 18px; min-height: 0; padding: 18px; }
  .is-screen-lobby .screen-lobby-section { padding: 20px 16px; gap: 16px; }
  .is-screen-lobby .screen-lobby-section h2 { font-size: 20px; }
  .is-screen-lobby .online-code-value { font-size: clamp(36px, 10vw, 48px); }
  .is-screen-lobby .screen-lobby-footer { grid-template-columns: minmax(0, 1fr); padding-top: 14px; }
}

/* Shared online menus retain the original pixel cabinet and CRT treatment. */
.online-raid:not(.in-raid) .online-menu > .online-cabinet { animation: online-cabinet-in .2s steps(4, end) both; }
.online-emblem { border-radius: 3px; color: var(--cyan); box-shadow: inset 0 2px 0 #ffffff0d, inset 0 0 0 1px var(--edge-hi), 0 3px 0 #000; }
.online-roles .btn { box-shadow: inset 0 2px 0 #ffffff24, inset 0 -3px 0 #0004, 0 4px 0 #05070b; }
.online-code-input { caret-color: var(--cyan); transition: border-color .12s, box-shadow .12s; }
.online-code-input:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; border-color: #000; box-shadow: inset 0 0 0 2px var(--cyan), 0 0 18px #4ee6ff18; }
.online-code-input::placeholder { color: var(--dim); opacity: 1; }
.online-led.lit { animation: online-signal 2.4s steps(2, end) infinite; }
.screen-lobby-ready { justify-content: center; }
.screen-lobby-pair .online-code-value { background: linear-gradient(90deg, transparent, #4ee6ff08, transparent); }
#online-seat-list { display: grid; gap: 12px; width: 100%; margin-top: 4px; }
.online-seat-choice { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%; min-height: 58px; padding: 14px 16px; border: 2px solid #05070b; border-radius: 8px; background: linear-gradient(180deg, #223043, #142332); box-shadow: inset 0 0 0 1px #4ee6ff60, inset 0 2px 0 #ffffff12, 0 4px 0 #05070b; font: 700 14px/1.3 var(--pixel); text-align: left; }
.online-seat-choice b { color: var(--cyan); }
.online-seat-choice[data-slot="2"] b { color: var(--gem); }
.online-seat-choice > span { font: 700 11px/1.4 var(--body); color: var(--green); letter-spacing: .04em; text-align: right; }
.online-seat-choice:disabled { background: linear-gradient(180deg, #1c2231, #141925); box-shadow: inset 0 0 0 1px var(--edge), 0 3px 0 #05070b; }
.online-seat-choice:disabled b, .online-seat-choice:disabled > span { color: var(--muted); }
.online-seat-choice:active:not(:disabled) { transform: translateY(2px); box-shadow: inset 0 0 0 1px var(--cyan), 0 2px 0 #05070b; }
.online-seat-back { min-height: 44px; font-size: 12px; }
.online-layer-card { border-radius: 12px; }
.online-layer-card:has(.online-upgrade-grid) { max-width: 980px; }
.online-upgrade.card { align-items: stretch; gap: 0; min-height: 44px; padding: 0; }
.online-upgrade.card .online-upgrade-copy { gap: 8px; padding: 12px; }
.online-upgrade.card .online-upgrade-art { margin: 8px 8px 0; }
.online-upgrade.card strong { font-size: 14px; }
.online-upgrade.card p { font-size: 12px; line-height: 1.45; }
.online-upgrade.card:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }

/* Direct co-op paints the complete viewport, just like a solo arena. */
.online-raid.is-direct.in-raid { padding: 0; }
.is-direct.in-raid .online-screen-arena { position: relative; flex: 1; min-width: 0; min-height: 0; width: 100%; overflow: hidden; }
.is-direct.in-raid .online-stage { position: absolute; inset: 0; display: block; height: 100%; }
.is-direct.in-raid .online-world { border: 0; box-shadow: none; box-sizing: border-box; }
.is-direct.in-raid .online-game-hud { position: absolute; z-index: 2; top: 0; left: 0; right: 0; width: auto; max-width: none; align-items: flex-start; gap: 8px; padding: max(10px, calc(var(--sat) + 6px)) max(12px, var(--sar)) 26px max(12px, var(--sal)); pointer-events: none; background: linear-gradient(#05070b99, transparent); text-shadow: 0 2px 0 #000; }
.is-direct.in-raid .online-game-hud small { font-size: 9px; }
.is-direct.in-raid .online-game-hud b { color: var(--text); font-size: 16px; }
.online-game-hud #online-pause { pointer-events: auto; flex: 0 0 auto; width: 44px; height: 44px; }
.online-direct-actions { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; display: flex; justify-content: flex-end; align-items: flex-end; padding: 18px max(12px, var(--sar)) max(12px, var(--sab)) max(12px, var(--sal)); pointer-events: none; }
.online-nova.nova { --online-nova-size: 62px; width: var(--online-nova-size); height: var(--online-nova-size); pointer-events: auto; }
.online-nova-meter { --online-nova-size: clamp(58px, 5vw, 76px); position: absolute; right: max(12px, var(--sar)); bottom: max(12px, var(--sab)); z-index: 3; display: grid; place-items: center; flex: 0 0 auto; width: var(--online-nova-size); height: var(--online-nova-size); padding: 0; border: 2px solid #000b; border-radius: 50%; color: var(--amber); background: #16141ab8; box-shadow: 0 3px 0 #0008; pointer-events: none; }
.online-nova .nova-ring, .online-nova-meter .nova-ring { -webkit-mask: radial-gradient(circle, transparent calc(var(--online-nova-size) / 2 - 3px), #000 calc(var(--online-nova-size) / 2 - 2px)); mask: radial-gradient(circle, transparent calc(var(--online-nova-size) / 2 - 3px), #000 calc(var(--online-nova-size) / 2 - 2px)); }
.online-nova .nova-cap, .online-nova-meter .nova-cap { transform: translateY(-5px); gap: 2px; text-align: center; }
.online-nova .nova-cap .px-ic, .online-nova-meter .nova-cap .px-ic { font-size: 18px; }
.online-nova .nova-cap small, .online-nova-meter .nova-cap small { color: inherit; font: 800 8px/1 var(--body); letter-spacing: .1em; }
.online-nova > #online-nova-pct, .online-nova-meter > #online-nova-pct { position: absolute; left: 0; right: 0; bottom: 6px; display: block; font: 700 10px/1 var(--body); color: var(--text-2); text-align: center; }
.online-nova-meter.ready { color: var(--amber-hi); box-shadow: inset 0 2px 0 #ffe1aa30, 0 3px 0 #0008, 0 0 20px #ffb54738; }
.online-nova-meter.ready .nova-ring { background: var(--amber); }
@keyframes online-cabinet-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes online-signal { 0%, 75%, 100% { opacity: 1; } 80% { opacity: .65; } }
@media (max-width: 360px) {
  .online-seat-choice { grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 12px; }
  .online-seat-choice > span { text-align: left; }
  .is-direct.in-raid .online-game-hud b { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .online-raid:not(.in-raid) .online-menu > .online-cabinet, .online-led.lit { animation: none; }
  .online-code-input { transition: none; }
}
body.reduce-motion .online-raid:not(.in-raid) .online-menu > .online-cabinet, body.reduce-motion .online-led.lit { animation: none; }

/* ==========================================================================
   3.6.1 lobbies: built from the game's own menu pieces (.dialog, .dlg-head,
   .mode-card, .sec-title, .note), so they read as a continuation of New Raid.
   ========================================================================== */
.online-raid { --p1: #4ee6ff; --p2: #ff8fe0; }
.p1 { --pc: var(--p1); } .p2 { --pc: var(--p2); }

/* The actual atlas ship, cropped like the controller emblem, tinted per pilot. */
.pr-ship { --w: 56px; position: relative; display: block; flex: 0 0 auto; width: var(--w); height: calc(var(--w) * 546 / 459); overflow: hidden; }
.pr-ship img { position: absolute; display: block; max-width: none; width: calc(var(--w) * 1254 / 459); height: calc(var(--w) * 1254 / 459); left: calc(var(--w) * -97 / 459); top: calc(var(--w) * -22 / 459); filter: hue-rotate(var(--hue, 0deg)); pointer-events: none; user-select: none; -webkit-user-select: none; }
.pr-ship.mini { --w: 20px; }

/* ---------- Lobby shell: one sheet, centred on large displays ---------- */
.online-raid.is-lobby .online-menu { justify-content: center; padding: 12px 0; }
.online-sheet.dialog { flex: 0 0 auto; max-width: 440px; max-height: none; overflow: visible; animation: none; }
.sheet-enter .online-sheet.dialog { animation: pop-in .22s cubic-bezier(.3, 1.4, .5, 1); }
.online-sheet-body { animation: online-step-in .18s ease-out; }
.online-sheet .dlg-head { position: relative; }
.online-sheet .dlg-back { flex-shrink: 0; width: 34px; height: 34px; font-size: 13px; }
.online-sheet .dlg-ic.c-gem { color: var(--gem); } .online-sheet .dlg-ic.c-cyan { color: var(--cyan); } .online-sheet .dlg-ic.c-green { color: var(--green); }
.online-sheet .note { margin-top: 14px; }
.online-sheet .note b { color: var(--text-2); }
.online-sheet .btn.small { display: flex; width: auto; min-width: 140px; margin: 12px auto 0; }
.online-sheet .online-error { margin-top: 12px; text-align: center; }
.online-sheet .online-error.is-info { color: var(--cyan); }
.online-sheet .mode-card .mc-go { color: var(--muted); font-size: 20px; line-height: 1; }
.online-sheet .online-roles { gap: 10px; }
.online-sheet .online-role strong { font-size: 14px; }
.online-sheet > .online-sheet-body > .btn.block { margin-top: 12px; }
.online-raid.is-lobby .online-error.is-info { animation: online-breathe 1s steps(2, end) infinite; }
/* Phones: a bottom sheet over the (dimmed) home screen, exactly like New Raid.
   3.7.4: 739px, so an iPad mini in portrait gets the big-screen sheets. */
@media (max-width: 739px) {
  .online-raid.is-lobby { padding: var(--sat) 0 0; }
  .online-raid.is-lobby .online-menu { justify-content: flex-end; padding: 36px 0 0; }
  .online-raid.is-lobby .online-sheet.dialog { width: 100%; max-width: none; border-radius: 18px 18px 0 0; border-bottom: 0; padding-bottom: max(18px, calc(var(--sab) + 12px)); padding-left: max(16px, var(--sal)); padding-right: max(16px, var(--sar)); box-shadow: inset 2px 0 0 var(--edge), inset -2px 0 0 var(--edge), inset 0 2px 0 var(--edge), inset 0 4px 0 rgba(255, 255, 255, .05), 0 -10px 40px rgba(0, 0, 0, .55); }
  .online-raid.is-lobby .online-sheet .dlg-head { margin-left: calc(-1 * max(16px, var(--sal))); margin-right: calc(-1 * max(16px, var(--sar))); border-radius: 16px 16px 0 0; }
  .online-raid.is-lobby .online-sheet .grab { display: block; position: absolute; top: 5px; left: 50%; width: 36px; height: 4px; margin-left: -18px; background: var(--edge-hi); border-radius: 2px; }
  .sheet-enter .online-sheet.dialog { animation: sheet-up .3s cubic-bezier(.2, .9, .3, 1); }
  body.online-open:has(> .online-raid.is-lobby:not(.is-screen-lobby)) .app { visibility: visible; }
  body.online-open:has(> .online-raid.is-lobby:not(.is-screen-lobby)) > .online-raid.is-lobby { background: rgba(3, 4, 8, .78); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
  body.online-open:has(> .online-raid.is-lobby:not(.is-screen-lobby)) > .online-raid.is-lobby::before, body.online-open:has(> .online-raid.is-lobby:not(.is-screen-lobby)) > .online-raid.is-lobby::after { display: none; }
}
/* The role and code pages can also be on the big screen: scale them up there. */
@media (min-width: 1600px) and (min-height: 880px) { .online-raid.is-lobby:not(.is-screen-lobby):not(.is-roles) .online-sheet { zoom: 1.4; } }
@media (min-width: 2400px) and (min-height: 1300px) { .online-raid.is-lobby:not(.is-screen-lobby):not(.is-roles) .online-sheet { zoom: 2; } }

/* ---------- Code entry: six slots over one real, accessible field ---------- */
.online-code-field { position: relative; height: 66px; }
.online-code-field .online-code-input { position: absolute; inset: 0; z-index: 2; display: block; width: 100%; height: 100%; min-height: 0; padding: 0; color: transparent; -webkit-text-fill-color: transparent; caret-color: transparent; background: transparent; border: 0; box-shadow: none; font-size: 32px; letter-spacing: 0; outline: none; }
.online-code-field .online-code-input:focus-visible { outline: none; box-shadow: none; }
.online-code-field .online-code-input::selection { background: transparent; }
.online-code-slots { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; pointer-events: none; }
.online-code-slots i { position: relative; display: grid; place-items: center; font: 700 28px/1 var(--pixel); font-style: normal; color: var(--text); background: #141824; border: 2px solid #000; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--edge), 0 3px 0 #000; transition: box-shadow .12s; }
.online-code-slots i.is-filled { color: var(--cyan); animation: online-slot-in .14s steps(2, end); }
.online-code-slots i.is-next { box-shadow: inset 0 0 0 1px var(--amber), 0 3px 0 #000, 0 0 12px rgba(255, 181, 71, .2); }
.online-code-slots i.is-next::after { content: ''; position: absolute; left: 30%; right: 30%; bottom: 10px; height: 3px; background: var(--amber); animation: blink 1s steps(1) infinite; }
.online-code-field.is-complete .online-code-slots i { box-shadow: inset 0 0 0 1px var(--green), 0 3px 0 #000; }
.online-code-field.is-checking .online-code-slots i { animation: online-breathe .7s steps(2, end) infinite; }
.online-code-field.is-error .online-code-slots { animation: online-shake .32s steps(4, end); }
.online-code-field.is-error .online-code-slots i { color: #ffb0b0; box-shadow: inset 0 0 0 1px var(--red), 0 3px 0 #000; }
@media (max-width: 360px) { .online-code-slots { gap: 5px; } .online-code-slots i { font-size: 22px; } .online-code-field { height: 56px; } }

/* ---------- Seat picker rows (New Raid mode cards with a ship) ---------- */
.lobby-seat .m-ic.lobby-seat-ship { overflow: hidden; background: radial-gradient(circle at 50% 40%, rgba(255, 255, 255, .06), #0c0e15 70%); box-shadow: inset 0 0 0 1px var(--pc); border-color: #000; }
.lobby-seat .pr-ship { --w: 30px; }
.lobby-seat .seat-state { color: var(--text-2); }
.lobby-seat.is-open .seat-state, .lobby-seat.is-own .seat-state { color: var(--green); }
.lobby-seat.is-reserved .seat-state, .lobby-seat.is-busy .seat-state { color: var(--amber); }
.lobby-seat:disabled .pr-ship { filter: grayscale(1) brightness(.7); }
.lobby-seat .mc-go .px-ic { font-size: 14px; }
.online-raid .lobby-seat.is-busy { border-color: var(--amber); box-shadow: 0 0 0 1px var(--amber), 0 0 18px rgba(255, 181, 71, .2); }
.online-raid .lobby-seat.is-busy:disabled { opacity: 1; }
#online-seat-list.is-updated .lobby-seat { animation: online-seat-refresh .5s steps(3, end); }
.online-sheet .note .online-code-value { padding: 0; font: 700 12px/1 var(--pixel); letter-spacing: .1em; color: var(--cyan); user-select: all; }

/* ---------- Code tiles (lobby code shown to others) ---------- */
.online-raid .online-code-value.code-tiles { display: flex; justify-content: center; gap: 8px; width: auto; max-width: 100%; margin: 0; padding: 0; font: inherit; letter-spacing: 0; text-shadow: none; background: none; border: 0; user-select: all; }
.code-tiles span { display: grid; place-items: center; flex: 0 1 auto; min-width: 0; width: 48px; height: 60px; font: 700 32px/1 var(--pixel); color: var(--cyan); background: #0c0e15; border: 2px solid #000; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--edge-hi), 0 3px 0 #000; text-shadow: 0 0 12px rgba(78, 230, 255, .35), 0 2px 0 #000; }
@media (max-width: 360px) { .code-tiles span { width: 40px; height: 52px; font-size: 26px; } }

/* ---------- Pilot bays ---------- */
.lobby-bays { display: grid; grid-template-columns: repeat(var(--bays, 2), minmax(0, 1fr)); gap: 10px; }
.players-1 .lobby-bays { --bays: 1; }
.lobby-bay { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 16px 10px 14px; text-align: center; background: var(--panel); border: 2px solid var(--edge); border-radius: 12px; box-shadow: inset 0 2px 0 rgba(255, 255, 255, .035), 0 4px 0 rgba(0, 0, 0, .3); transition: border-color .25s, box-shadow .25s; }
.lobby-bay .bay-art { position: relative; display: grid; place-items: center; width: 100%; height: 86px; }
.lobby-bay .bay-art .pr-ship { --w: 58px; transition: transform .16s cubic-bezier(.3, 1.5, .5, 1), filter .3s, opacity .3s; transform: translate(calc(var(--tx, 0) * 10px), calc(var(--ty, 0) * 8px)); }
.lobby-bay .bay-art::after { content: ''; position: absolute; left: 50%; bottom: 0; width: 40%; height: 22%; transform: translateX(-50%); background: radial-gradient(ellipse, var(--pc), transparent 70%); opacity: 0; transition: opacity .3s; pointer-events: none; }
.lobby-bay .bay-copy { display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 0; }
.lobby-bay strong { font: 800 14px/1.2 var(--body); letter-spacing: .02em; color: var(--text); }
.lobby-bay .bay-status { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; line-height: 1.3; color: var(--muted); }
.lobby-bay .bay-hint { font-size: 12px; color: var(--dim); }
.lobby-bay .bay-hint-ok { display: none; color: var(--green); font-weight: 700; }
.lobby-bay.is-open { border-style: dashed; border-color: var(--edge-hi); background: rgba(22, 26, 38, .55); box-shadow: none; }
.lobby-bay.is-open .pr-ship { filter: brightness(0); opacity: .45; }
.lobby-bay.is-reserved { border-style: dashed; border-color: #7a5420; }
.lobby-bay.is-reserved .pr-ship { filter: grayscale(.9) brightness(.7); opacity: .7; }
.lobby-bay.is-reserved .bay-status { color: var(--amber); }
.lobby-bay.is-ready { border-color: var(--pc); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .035), 0 0 18px rgba(255, 255, 255, .06), 0 4px 0 rgba(0, 0, 0, .3); }
.lobby-bay.is-ready .bay-status { color: var(--green); }
.lobby-bay.is-ready .bay-art { animation: online-hover 2.6s ease-in-out infinite; }
.lobby-bay.is-ready .bay-art::after { opacity: .55; animation: online-thrust .45s steps(2, end) infinite; }
.lobby-bay.just-joined { animation: online-bay-join .7s ease-out; }
/* A controller press on a waiting phone makes its ship hop and say so. */
.lobby-bay.is-pinged .bay-art .pr-ship { animation: online-hop .38s cubic-bezier(.3, 1.6, .5, 1); }
.lobby-bay.is-pinged .bay-art::after { opacity: 1; }
.lobby-bay.is-pinged .bay-hint-idle { display: none; }
.lobby-bay.is-pinged .bay-hint-ok { display: inline; }
/* Compact rows for phone lobbies. */
.lobby-bays.is-compact { grid-template-columns: minmax(0, 1fr); gap: 10px; }
.lobby-bays.is-compact .lobby-bay { flex-direction: row; gap: 12px; padding: 10px 12px; text-align: left; }
.lobby-bays.is-compact .bay-art { flex: 0 0 auto; width: 44px; height: 44px; border: 2px solid #000; border-radius: 8px; background: #0c0e15; box-shadow: inset 0 0 0 1px var(--edge); }
.lobby-bays.is-compact .bay-art .pr-ship { --w: 30px; }
.lobby-bays.is-compact .bay-art::after { display: none; }
.lobby-bays.is-compact .bay-copy { align-items: flex-start; gap: 4px; }

/* ---------- Single lobby status line ---------- */
.online-lobby-status { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 16px 0 0; font: 600 13px/1.45 var(--body); color: var(--text-2); text-align: center; }
.online-lobby-status .online-led { flex: 0 0 auto; animation: online-breathe 1.4s steps(2, end) infinite; }
.online-lobby-status .online-led.lit { animation: online-breathe .4s steps(2, end) infinite; }
.lobby-all-ready .online-lobby-status { color: var(--green); }
.online-raid.is-lobby .online-connection { min-height: 0; margin-top: 8px; text-align: center; font: 600 12px/1.4 var(--body); color: var(--amber); }
.online-raid.is-lobby .online-connection:empty { display: none; }
.pilot-lobby-hint { margin: 12px 0 0 !important; text-align: center; }

/* ---------- Screen (TV) lobby: same anatomy, scaled with the display ---------- */
/* One unit (--u): 1px at 1280×720, 1.5px at 1920×1080, never below .8px. */
.online-raid.is-screen { --u: clamp(.8px, min(.078125vw, .13889vh), 2.4px); }
.online-raid.is-screen-lobby { padding: max(calc(16 * var(--u)), var(--sat)) max(calc(20 * var(--u)), var(--sar)) max(calc(16 * var(--u)), var(--sab)) max(calc(20 * var(--u)), var(--sal)); }
.is-screen-lobby .online-menu { padding: 0; }
.is-screen-lobby .online-sheet.dialog { width: 100%; max-width: calc(1060 * var(--u)); padding: 0 calc(26 * var(--u)) calc(24 * var(--u)); border-radius: calc(16 * var(--u)); }
.is-screen-lobby .online-sheet .dlg-head { gap: calc(12 * var(--u)); margin: 0 calc(-26 * var(--u)) calc(22 * var(--u)); padding: calc(16 * var(--u)) calc(18 * var(--u)) calc(14 * var(--u)) calc(22 * var(--u)); border-radius: calc(14 * var(--u)) calc(14 * var(--u)) 0 0; }
.is-screen-lobby .online-sheet .dlg-ic { width: calc(42 * var(--u)); height: calc(42 * var(--u)); font-size: calc(22 * var(--u)); border-radius: calc(8 * var(--u)); }
.is-screen-lobby .online-sheet .dlg-close { width: calc(42 * var(--u)); height: calc(42 * var(--u)); min-width: 40px; min-height: 40px; font-size: calc(14 * var(--u)); border-radius: calc(10 * var(--u)); }
.is-screen-lobby .online-sheet .eyeline { margin-bottom: calc(6 * var(--u)); font-size: calc(11 * var(--u)); }
.is-screen-lobby .online-sheet h2 { font-size: calc(22 * var(--u)); }
.is-screen-lobby .sec-title { gap: calc(8 * var(--u)); margin-bottom: calc(14 * var(--u)); font-size: calc(13 * var(--u)); }
.is-screen-lobby .sec-title .aside { font: 700 calc(13 * var(--u)) var(--pixel); color: var(--green); }
.is-screen-lobby .online-sheet .sub { margin: 0 0 calc(18 * var(--u)); font-size: calc(16 * var(--u)); line-height: 1.5; }
.is-screen-lobby .online-sheet .sub b { color: var(--text); }
.is-screen-lobby .online-code-value.code-tiles { gap: calc(9 * var(--u)); }
.is-screen-lobby .code-tiles span { width: calc(62 * var(--u)); height: calc(78 * var(--u)); font-size: calc(42 * var(--u)); border-radius: calc(9 * var(--u)); }
.is-screen-lobby .lobby-bays { gap: calc(14 * var(--u)); }
.is-screen-lobby .lobby-bay { gap: calc(12 * var(--u)); padding: calc(20 * var(--u)) calc(12 * var(--u)) calc(18 * var(--u)); border-radius: calc(12 * var(--u)); }
.is-screen-lobby .lobby-bay .bay-art { height: calc(112 * var(--u)); }
.is-screen-lobby .lobby-bay .bay-art .pr-ship { --w: calc(76 * var(--u)); }
.is-screen-lobby.players-1 .lobby-bay .bay-art { height: calc(140 * var(--u)); }
.is-screen-lobby.players-1 .lobby-bay .bay-art .pr-ship { --w: calc(94 * var(--u)); }
.is-screen-lobby .lobby-bay .bay-copy { gap: calc(6 * var(--u)); }
.is-screen-lobby .lobby-bay strong { font-size: calc(17 * var(--u)); }
.is-screen-lobby .lobby-bay .bay-status { gap: calc(7 * var(--u)); font-size: calc(14 * var(--u)); }
.is-screen-lobby .lobby-bay .bay-status .online-led { width: calc(9 * var(--u)); height: calc(9 * var(--u)); }
.is-screen-lobby .lobby-bay .bay-hint { font-size: calc(13 * var(--u)); }
.is-screen-lobby .online-lobby-status { gap: calc(9 * var(--u)); margin-top: calc(24 * var(--u)); padding-top: calc(18 * var(--u)); font-size: calc(15 * var(--u)); border-top: 2px solid rgba(42, 48, 68, .6); }
.is-screen-lobby .online-lobby-status .online-led { width: calc(9 * var(--u)); height: calc(9 * var(--u)); }
.is-screen-lobby .online-connection, .is-screen-lobby .online-error { font-size: calc(13 * var(--u)); }
@media (max-width: 760px) { .screen-lobby-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Popups: the solo dialog anatomy on every online surface ---------- */
.online-layer { background: rgba(3, 4, 8, .78); }
.online-raid .online-layer-card { --tone-c: var(--amber); gap: 0; padding: 0 0 16px; text-align: left; overflow: hidden; animation: pop-in .22s cubic-bezier(.3, 1.4, .5, 1); }
.online-layer-card.tone-warn { --tone-c: var(--amber); }
.online-layer-card.tone-danger { --tone-c: var(--red); }
.online-layer-card.tone-win { --tone-c: var(--green); }
.online-dlg-head { display: flex; align-items: center; gap: 12px; padding: 13px 16px 12px; background: linear-gradient(180deg, #232839, #1a1e2c); border-bottom: 2px solid #000; box-shadow: 0 2px 0 var(--edge); }
.online-dlg-head .dlg-ic { color: var(--tone-c); }
.online-dlg-head .dlg-titles { min-width: 0; }
.online-layer-card .online-dlg-head .eyeline { margin: 0 0 5px; font: 700 10px/1.3 var(--body); letter-spacing: .14em; color: var(--muted); overflow-wrap: anywhere; }
.online-layer-card .online-dlg-head h2 { margin: 0; font: 700 18px/1.2 var(--pixel); letter-spacing: .04em; color: var(--amber); text-shadow: 0 2px 0 #000; }
.online-dlg-body { display: flex; flex-direction: column; gap: 12px; padding: 16px 16px 0; }
.online-layer-card .online-dlg-body p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--text-2); }
.online-layer-card .online-dlg-body .online-dlg-sub { font-size: 13px; color: var(--muted); }
.online-layer-card .online-dlg-body .online-dlg-wait { font: 700 13px/1.5 var(--pixel); letter-spacing: .04em; color: var(--amber); text-shadow: 0 2px 0 #000; }
.online-dlg-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.online-dlg-chips .chip { font-size: 11px; }
.online-dlg-actions { display: grid; gap: 10px; padding: 16px 16px 0; }
.online-dlg-actions .btn { width: 100%; }
.online-dlg-actions .btn .px-ic { font-size: 14px; }
.online-dlg-seats .online-seat { min-height: 40px; padding: 7px 0; gap: 10px; }
.online-dlg-seats .online-seat:first-child, .online-screen-context .online-seat:first-of-type { border-top: 0; }
.online-seat > span:last-child { display: inline-flex; align-items: center; gap: 7px; }
.online-seat.p1 b { color: var(--p1); } .online-seat.p2 b { color: var(--p2); }
.online-seat.is-open .pr-ship { filter: brightness(0) opacity(.6); }
.online-screen-context { padding-top: 12px; border-top: 2px solid var(--edge-dark); box-shadow: inset 0 1px 0 var(--edge); }
.online-upgrade.is-preview { cursor: default; }
.online-dots { display: inline-flex; gap: 3px; margin-left: 6px; vertical-align: middle; }
.online-dots i { width: 4px; height: 4px; background: currentColor; animation: online-dots 1.2s steps(1, end) infinite; }
.online-dots i:nth-child(2) { animation-delay: .2s; } .online-dots i:nth-child(3) { animation-delay: .4s; }
.is-direct .online-layer-card { max-width: 400px; }

/* The Screen is read from across a room: popups scale with the display (--u). */
.is-screen .online-layer { padding: calc(24 * var(--u)) calc(20 * var(--u)); }
.is-screen .online-layer-card { max-width: calc(560 * var(--u)); border-radius: calc(14 * var(--u)); }
.is-screen .online-dlg-head { gap: calc(14 * var(--u)); padding: calc(15 * var(--u)) calc(20 * var(--u)) calc(14 * var(--u)); }
.is-screen .online-dlg-head .dlg-ic { width: calc(40 * var(--u)); height: calc(40 * var(--u)); font-size: calc(21 * var(--u)); border-radius: calc(8 * var(--u)); }
.is-screen .online-layer-card .online-dlg-head h2 { font-size: calc(23 * var(--u)); }
.is-screen .online-layer-card .online-dlg-head .eyeline { margin-bottom: calc(6 * var(--u)); font-size: calc(11 * var(--u)); }
.is-screen .online-dlg-body { gap: calc(14 * var(--u)); padding: calc(18 * var(--u)) calc(20 * var(--u)) 0; }
.is-screen .online-layer-card .online-dlg-body p { font-size: calc(16 * var(--u)); }
.is-screen .online-layer-card .online-dlg-body .online-dlg-sub { font-size: calc(14 * var(--u)); }
.is-screen .online-layer-card .online-dlg-body .online-dlg-wait { font-size: calc(15 * var(--u)); }
.is-screen .online-dlg-actions { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: calc(12 * var(--u)); padding: calc(18 * var(--u)) calc(20 * var(--u)) 0; }
.is-screen .online-layer-card { padding-bottom: calc(20 * var(--u)); }
.is-screen .online-dlg-actions .btn { min-height: calc(54 * var(--u)); font-size: calc(15 * var(--u)); border-radius: calc(10 * var(--u)); }
.is-screen .online-dlg-actions .btn .px-ic { font-size: calc(15 * var(--u)); }
.is-screen .online-dlg-chips { gap: calc(6 * var(--u)); }
.is-screen .online-dlg-chips .chip { padding: calc(6 * var(--u)) calc(9 * var(--u)); font-size: calc(13 * var(--u)); border-radius: calc(6 * var(--u)); }
.is-screen .online-screen-context { gap: calc(10 * var(--u)); padding-top: calc(14 * var(--u)); }
.is-screen .online-screen-context .online-code-label { font-size: calc(13 * var(--u)); }
.is-screen .online-screen-context .online-seat { min-height: calc(46 * var(--u)); gap: calc(10 * var(--u)); font-size: calc(14 * var(--u)); }
.is-screen .online-screen-context .online-seat > span:last-child { font-size: calc(12 * var(--u)); }
.is-screen .online-screen-context .online-seat .pr-ship.mini { --w: calc(24 * var(--u)); }
.is-screen .online-screen-context .online-team-loadout { font-size: calc(13 * var(--u)); }
.is-screen .online-layer-card.is-upgrade { max-width: min(94vw, calc(1080 * var(--u))); }
.is-screen .is-upgrade .online-upgrade-grid { gap: calc(16 * var(--u)); margin: 0; }
.is-screen .is-upgrade .card { border-radius: calc(12 * var(--u)); }
.is-screen .is-upgrade .card .art-frame { margin: calc(7 * var(--u)) calc(7 * var(--u)) 0; }
.is-screen .is-upgrade .card .cbody { gap: calc(8 * var(--u)); padding: calc(12 * var(--u)); }
.is-screen .is-upgrade .card strong { font-size: calc(16 * var(--u)); }
.is-screen .is-upgrade .card p { font-size: calc(13 * var(--u)); }
.is-screen .is-upgrade .card .lv { font-size: calc(10.5 * var(--u)); }
.is-screen .is-upgrade .card .tag { font-size: calc(9 * var(--u)); }
.is-screen .is-watching .online-dlg-actions { grid-auto-columns: minmax(0, calc(320 * var(--u))); justify-content: center; }
/* The solo wave/boss/clear banner, read from across the room. */
.is-screen .banner { padding: calc(16 * var(--u)) 0; }
.is-screen .banner .b-kicker, .is-screen .banner .b-sub { font-size: calc(15 * var(--u)); }
.is-screen .banner .b-title { margin: calc(14 * var(--u)) calc(14 * var(--u)) calc(12 * var(--u)); font-size: calc(52 * var(--u)); }
.is-screen .banner.warn::before, .is-screen .banner.warn::after { height: calc(14 * var(--u)); }
.is-launching .online-screen-arena > .online-stage { animation: fade .45s ease-out both; }

@keyframes online-step-in { from { opacity: 0; transform: translateY(4px); } }
@keyframes online-breathe { 50% { opacity: .45; } }
@keyframes online-slot-in { 0% { transform: translateY(-3px); } }
@keyframes online-shake { 25% { transform: translateX(-5px); } 50% { transform: translateX(5px); } 75% { transform: translateX(-3px); } }
@keyframes online-seat-refresh { 0% { filter: brightness(1.4); } }
@keyframes online-hover { 50% { transform: translateY(-4px); } }
@keyframes online-thrust { 50% { opacity: .3; } }
@keyframes online-hop { 40% { transform: translate(calc(var(--tx, 0) * 10px), calc(var(--ty, 0) * 8px - 12px)) scale(1.06); } }
@keyframes online-bay-join { 0% { transform: scale(1.04); filter: brightness(1.8); } 100% { transform: none; filter: none; } }
@keyframes online-dots { 0%, 100% { opacity: .2; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .online-sheet-body, .lobby-bay.is-ready .bay-art, .lobby-bay.is-ready .bay-art::after, .lobby-bay.is-pinged .bay-art .pr-ship, .online-lobby-status .online-led, .online-code-slots i, .online-code-field.is-error .online-code-slots, .online-dots i, .online-raid.is-lobby .online-error.is-info { animation: none; }
}
.online-screen-context .sec-title { margin: 0 0 4px; }
.online-screen-context .sec-title .aside { font: 700 11px var(--pixel); color: var(--muted); letter-spacing: .08em; }
.is-screen .online-screen-context .sec-title, .is-screen .online-screen-context .sec-title .aside { font-size: calc(12 * var(--u)); }

/* ---------- Balance pass: equal-weight blocks under left-aligned titles ---------- */
/* Code card: the lobby code with its route above and a quiet copy link below. */
.lobby-code-card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 16px 12px 8px; text-align: center; }
.lobby-code-route { margin: 0; font-size: 13px; line-height: 1.45; color: var(--text-2); }
.lobby-code-route b { color: var(--text); font-weight: 700; }
.online-sheet .lobby-copy.link { margin: -2px 0 0; padding: 6px 10px; font-size: 12px; }
.online-sheet .lobby-copy.is-done { color: var(--green); text-decoration: none; }
/* Phone lobby rhythm: title, block, title, block, status. */
.is-pilot .online-sheet .sec-title { margin-bottom: 8px; }
.is-pilot .online-lobby-status { margin-top: 14px; }
/* Screen lobby: two columns of equal height, each a title over one block. */
.screen-lobby-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: calc(24 * var(--u)); align-items: stretch; }
.is-screen-lobby.players-1 .screen-lobby-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, .9fr); }
.screen-lobby-col { display: flex; flex-direction: column; min-width: 0; }
.screen-lobby-col > .lobby-code-card, .screen-lobby-col > .lobby-bays { flex: 1; }
.is-screen-lobby .lobby-code-card { gap: calc(16 * var(--u)); padding: calc(22 * var(--u)) calc(18 * var(--u)) calc(12 * var(--u)); border-radius: calc(12 * var(--u)); }
.is-screen-lobby .lobby-code-route { font-size: calc(15 * var(--u)); }
.is-screen-lobby .online-sheet .lobby-copy.link { padding: calc(6 * var(--u)) calc(10 * var(--u)); font-size: calc(13 * var(--u)); }
.is-screen-lobby .lobby-bays { align-items: stretch; }
.is-screen-lobby .lobby-bay { justify-content: center; }
.is-screen-lobby .sec-title { margin-bottom: calc(12 * var(--u)); }
.is-screen-lobby .online-lobby-status { margin-top: calc(22 * var(--u)); padding-top: calc(16 * var(--u)); }
/* Even text: no lonely last words in lobby copy, dialogs or bays. */
.online-sheet .note, .lobby-code-route, .lobby-bay .bay-copy, .online-lobby-status, .online-sheet .online-error { text-wrap: balance; }
.online-sheet .sub, .online-layer-card .online-dlg-body p { text-wrap: pretty; }
/* Status lights: green connected, amber waiting or reconnecting, none for an empty seat. */
.online-led.warn { background: var(--amber); box-shadow: 0 0 0 2px #2a1f0e; }
.online-lobby-status .online-led { background: var(--amber); box-shadow: 0 0 0 2px #2a1f0e; }
.online-lobby-status .online-led.lit { background: var(--green); box-shadow: 0 0 0 2px #152a22; }
/* Role cards share one height, whatever their copy length. */
.online-sheet .online-roles { grid-auto-rows: 1fr; }
/* Phones: every sheet fits its content, so no step carries empty space. */
/* Code entry: JOIN directly under the slots, hint beneath. */
.online-sheet .online-code-hint { margin-top: 12px; }
/* The code step is short on purpose: it sits snugly above the phone keyboard,
   with JOIN directly under the slots and no stretched gap. */
.online-sheet .online-join-go { margin-top: 16px; }
.online-sheet .dlg-close.online-exit .px-ic { width: 1em; font-size: 12px; }
.is-screen-lobby .online-sheet .dlg-close.online-exit .px-ic { font-size: calc(14 * var(--u)); }
.online-seat.is-reserved > span:last-child { color: var(--amber); }
.online-seat.is-open > span:last-child { color: var(--dim); }
/* Keyboard open (iOS): the layer is pinned to the visible area, so the sheet
   sits right on the keyboard; drop the home-indicator padding and the grab bar. */
.online-raid.keyboard-open { padding-top: 0; }
.online-raid.keyboard-open .online-menu { justify-content: flex-end; padding-top: 8px; }
.online-raid.keyboard-open .online-sheet.dialog { padding-bottom: 14px; }
.online-raid.keyboard-open .online-sheet .grab { display: none; }
/* Sheet close / back: square buttons with the icon dead centre (the old
   header's Exit padding and 46px min-height no longer leak in). */
.online-sheet .dlg-close.online-exit, .online-sheet .dlg-back { display: grid; place-items: center; width: 40px; height: 40px; min-width: 40px; min-height: 40px; padding: 0; flex-shrink: 0; }
.online-sheet .dlg-close.online-exit .px-ic, .online-sheet .dlg-back .px-ic { display: block; width: 1em; height: 1em; margin: 0; font-size: 13px; }
.is-screen-lobby .online-sheet .dlg-close.online-exit { width: calc(42 * var(--u)); height: calc(42 * var(--u)); }

/* ---------- Pick a role / Play together on a big display ----------
   The same wide frame and scale (--u) as the TV lobby it leads into, with the
   two roles as large side-by-side tiles, so the page is balanced, not a phone
   popup floating in empty space. */
@media (min-width: 900px) and (min-height: 480px), (min-width: 740px) and (min-height: 900px) and (orientation: portrait) {
  .online-raid.is-roles { --u: clamp(.8px, min(.078125vw, .13889vh), 2.4px); padding: max(calc(16 * var(--u)), var(--sat)) max(calc(20 * var(--u)), var(--sar)) max(calc(16 * var(--u)), var(--sab)) max(calc(20 * var(--u)), var(--sal)); }
  .is-roles .online-menu { padding: 0; }
  .is-roles .online-sheet.dialog { width: 100%; max-width: calc(1060 * var(--u)); padding: 0 calc(26 * var(--u)) calc(24 * var(--u)); border-radius: calc(16 * var(--u)); }
  .is-roles .online-sheet .dlg-head { gap: calc(12 * var(--u)); margin: 0 calc(-26 * var(--u)) calc(22 * var(--u)); padding: calc(16 * var(--u)) calc(18 * var(--u)) calc(14 * var(--u)) calc(22 * var(--u)); border-radius: calc(14 * var(--u)) calc(14 * var(--u)) 0 0; }
  .is-roles .online-sheet .dlg-ic { width: calc(42 * var(--u)); height: calc(42 * var(--u)); font-size: calc(22 * var(--u)); border-radius: calc(8 * var(--u)); }
  .is-roles .online-sheet .dlg-close.online-exit { width: calc(42 * var(--u)); height: calc(42 * var(--u)); border-radius: calc(10 * var(--u)); }
  .is-roles .online-sheet .dlg-close.online-exit .px-ic { font-size: calc(14 * var(--u)); }
  .is-roles .online-sheet .eyeline { margin-bottom: calc(6 * var(--u)); font-size: calc(11 * var(--u)); }
  .is-roles .online-sheet h2 { font-size: calc(22 * var(--u)); }
  .is-roles .online-sheet .sub { margin: 0 0 calc(20 * var(--u)); font-size: calc(16 * var(--u)); line-height: 1.5; text-align: center; }
  .is-roles .online-sheet .online-roles { grid-template-columns: 1fr 1fr; grid-auto-rows: auto; gap: calc(18 * var(--u)); }
  .online-raid.is-roles .online-sheet .online-role { grid-template-columns: 1fr; justify-items: center; align-content: center; gap: calc(14 * var(--u)); min-height: calc(260 * var(--u)); padding: calc(30 * var(--u)) calc(24 * var(--u)) calc(28 * var(--u)); text-align: center; border-radius: calc(14 * var(--u)); background: radial-gradient(ellipse at 50% 34%, rgba(255, 255, 255, .05), transparent 62%), var(--panel); }
  .is-roles .online-role .m-ic { width: calc(104 * var(--u)); height: calc(104 * var(--u)); font-size: calc(54 * var(--u)); border-radius: calc(14 * var(--u)); border-width: calc(2 * var(--u)); box-shadow: inset 0 0 0 calc(1 * var(--u)) var(--edge), 0 0 calc(36 * var(--u)) rgba(255, 181, 71, .12); }
  .is-roles .online-role .m-ic.c-cyan { box-shadow: inset 0 0 0 calc(1 * var(--u)) var(--edge), 0 0 calc(36 * var(--u)) rgba(78, 230, 255, .12); }
  .is-roles .online-role .mc-text { display: flex; flex-direction: column; align-items: center; gap: calc(8 * var(--u)); }
  .is-roles .online-sheet .online-role strong { margin: 0; font: 700 calc(21 * var(--u))/1.2 var(--pixel); letter-spacing: .05em; }
  .is-roles .online-role .m-ic.c-amber + .mc-text strong { color: var(--amber); } .is-roles .online-role .m-ic.c-cyan + .mc-text strong { color: var(--cyan); }
  .is-roles .online-role small { max-width: calc(300 * var(--u)); font-size: calc(15 * var(--u)); line-height: 1.45; }
  .is-roles .online-role .mc-go { display: none; }
  .is-roles .online-sheet > .online-sheet-body > .btn.block { min-height: calc(50 * var(--u)); margin-top: calc(16 * var(--u)); font-size: calc(14 * var(--u)); border-radius: calc(10 * var(--u)); }
  .is-roles .online-sheet .note { margin-top: calc(22 * var(--u)); padding-top: calc(16 * var(--u)); font-size: calc(13 * var(--u)); border-top: 2px solid rgba(42, 48, 68, .6); }
  .is-roles .online-sheet .online-error { font-size: calc(13 * var(--u)); }
}
.online-sheet .online-role .m-ic.c-cyan { color: var(--cyan); }
.online-sheet .online-role .m-ic.c-amber { color: var(--amber); }
/* TV raid HUD is read from across the room: scale it with the display (--u). */
.is-screen.in-raid .online-game-hud { padding: max(calc(10 * var(--u)), calc(var(--sat) + 6px)) max(calc(18 * var(--u)), var(--sar)) calc(26 * var(--u)) max(calc(18 * var(--u)), var(--sal)); }
.is-screen.in-raid .online-game-hud span { gap: calc(5 * var(--u)); }
.is-screen.in-raid .online-game-hud small { font-size: max(10px, calc(12 * var(--u))); letter-spacing: .06em; }
.is-screen.in-raid .online-game-hud b { font-size: max(17px, calc(26 * var(--u))); }
.is-screen.in-raid .online-nova-meter { --online-nova-size: max(58px, calc(70 * var(--u))); right: max(calc(16 * var(--u)), var(--sar)); bottom: max(calc(16 * var(--u)), var(--sab)); }

/* ==========================================================================
   3.7.4 big-screen polish (iPad, desktop, TV)
   Role pickers, lobbies and the code / seat sheets fill the display and read
   from the sofa; phones (< 740px wide) keep their bottom sheets unchanged.
   ========================================================================== */
/* Couch-distance type on the landscape role picker and TV lobby. */
@media (min-width: 900px) and (min-height: 480px), (min-width: 740px) and (min-height: 900px) and (orientation: portrait) {
  .is-roles .online-sheet .eyeline, .is-screen-lobby .online-sheet .eyeline { font-size: calc(12.5 * var(--u)); letter-spacing: .16em; }
  .is-roles .online-sheet h2, .is-screen-lobby .online-sheet h2 { font-size: calc(26 * var(--u)); }
  .is-roles .online-sheet .sub { font-size: calc(18 * var(--u)); }
  .online-raid.is-roles .online-sheet .online-role { min-height: calc(280 * var(--u)); }
  .is-roles .online-sheet .online-role strong { font-size: calc(24 * var(--u)); }
  .is-roles .online-role small { max-width: calc(340 * var(--u)); font-size: calc(17 * var(--u)); color: var(--text-2); }
  .is-roles .online-sheet .note { font-size: calc(14.5 * var(--u)); line-height: 1.55; }
  .is-roles .online-sheet .online-error { font-size: calc(15 * var(--u)); }
  .online-raid.is-roles .online-sheet .online-role { transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; }
  .online-raid.is-roles .online-sheet .online-role:focus-visible { outline: calc(3 * var(--u)) solid var(--cyan); outline-offset: calc(3 * var(--u)); }
  .is-screen-lobby .sec-title, .is-screen-lobby .sec-title .aside { font-size: calc(14.5 * var(--u)); }
  .is-screen-lobby .lobby-code-route { font-size: calc(17 * var(--u)); }
  .is-screen-lobby .online-sheet .lobby-copy.link { font-size: calc(14.5 * var(--u)); }
  .is-screen-lobby .lobby-bay strong { font-size: calc(19 * var(--u)); }
  .is-screen-lobby .lobby-bay .bay-status { font-size: calc(16 * var(--u)); }
  .is-screen-lobby .lobby-bay .bay-hint { font-size: calc(14.5 * var(--u)); }
  .is-screen-lobby .online-lobby-status { font-size: calc(17 * var(--u)); }
  .is-screen-lobby .online-connection, .is-screen-lobby .online-error { font-size: calc(15 * var(--u)); }
}
@media (hover: hover) and (pointer: fine) and (min-width: 900px) and (min-height: 480px) {
  .online-raid.is-roles .online-sheet .online-role:hover:not(:disabled) { transform: translateY(calc(-2 * var(--u, 1px))); border-color: var(--edge-hi); }
}
/* Tablets in portrait: a taller unit (--u) sized to the width, roles stacked as
   large horizontal tiles, and the TV lobby in one column. */
@media (min-width: 740px) and (min-height: 900px) and (orientation: portrait) {
  .online-raid.is-roles, .online-raid.is-screen { --u: clamp(.9px, min(.128vw, .098vh), 2.4px); }
  .is-roles .online-sheet.dialog, .is-screen-lobby .online-sheet.dialog { max-width: calc(700 * var(--u)); }
  .is-roles .online-sheet .sub { text-align: left; }
  .is-roles .online-sheet .online-roles { grid-template-columns: minmax(0, 1fr); gap: calc(16 * var(--u)); }
  .online-raid.is-roles .online-sheet .online-role { grid-template-columns: auto minmax(0, 1fr) auto; justify-items: start; align-items: center; gap: calc(22 * var(--u)); min-height: calc(156 * var(--u)); padding: calc(22 * var(--u)) calc(26 * var(--u)); text-align: left; background: radial-gradient(ellipse at 12% 50%, rgba(255, 255, 255, .05), transparent 55%), var(--panel); }
  .is-roles .online-role .m-ic { width: calc(96 * var(--u)); height: calc(96 * var(--u)); font-size: calc(50 * var(--u)); }
  .is-roles .online-role .mc-text { align-items: flex-start; }
  .is-roles .online-role small { max-width: none; }
  .is-roles .online-role .mc-go { display: block; font-size: calc(34 * var(--u)); color: var(--muted); }
  .is-roles .online-sheet .note { text-align: center; }
  .is-screen-lobby.players-2 .screen-lobby-grid { grid-template-columns: minmax(0, 1fr); gap: calc(22 * var(--u)); } /* solo keeps code + pilot side by side */
}
/* Code entry, seat picker and the pilot lobby on a tablet or desktop: the same
   sheet, scaled as a whole so spacing, type and hit targets grow together. */
@media (min-width: 740px) and (min-height: 900px) and (orientation: portrait) { .online-raid.is-lobby:not(.is-screen-lobby):not(.is-roles) .online-sheet { zoom: 1.4; } }
@media (min-width: 980px) and (min-height: 1200px) and (orientation: portrait) { .online-raid.is-lobby:not(.is-screen-lobby):not(.is-roles) .online-sheet { zoom: 1.6; } }
@media (min-width: 1100px) and (min-height: 760px) and (orientation: landscape) { .online-raid.is-lobby:not(.is-screen-lobby):not(.is-roles) .online-sheet { zoom: 1.2; } }
@media (min-width: 1300px) and (min-height: 960px) and (orientation: landscape) { .online-raid.is-lobby:not(.is-screen-lobby):not(.is-roles) .online-sheet { zoom: 1.4; } }
@media (min-width: 1600px) and (min-height: 880px) { .online-raid.is-lobby:not(.is-screen-lobby):not(.is-roles) .online-sheet { zoom: 1.5; } }
@media (min-width: 2400px) and (min-height: 1300px) { .online-raid.is-lobby:not(.is-screen-lobby):not(.is-roles) .online-sheet { zoom: 2; } }
/* TV raid HUD: a touch larger labels, so score / wave / hull read across a room. */
.is-screen.in-raid .online-game-hud small { font-size: max(11px, calc(13.5 * var(--u))); }
.is-screen.in-raid .online-game-hud b { font-size: max(18px, calc(30 * var(--u))); }

/* The controller keeps its compact status card; the display reserves its stage for the spot. */
.screen-intermission .online-dlg-body { align-items: center; text-align: center; }
.screen-intermission .screen-ad-clock { color: var(--amber-hi); font-variant-numeric: tabular-nums; }
.is-screen .online-layer-card.screen-intermission {
  width: 94%; max-width: none; height: 86vh; height: 86dvh; max-height: 100%;
  padding-bottom: 0;
}
.is-screen .screen-intermission .online-dlg-head { flex: none; }
.is-screen .screen-intermission .online-dlg-body {
  flex: 1; min-height: 0; display: grid; align-items: stretch;
  grid-template-rows: minmax(0, 1fr) auto;
  padding: clamp(12px, 2vmin, 32px); gap: clamp(10px, 2vmin, 26px);
}
.screen-ad-art {
  position: relative; display: grid; place-items: center; overflow: hidden;
  border: 1px solid var(--edge-hi); border-radius: 8px;
  color: var(--amber); font-size: clamp(38px, 9vmin, 160px);
  background: radial-gradient(ellipse at 50% 55%, #080d1999, #080d19ce 78%),
    repeating-linear-gradient(0deg, transparent 0 4px, #0004 4px 5px),
    url('./assets/nebula.webp') center / cover, #0b0e16;
}
.screen-ad-art::before {
  content: ''; position: absolute; inset: clamp(12px, 2.8vmin, 42px);
  --mark: linear-gradient(var(--amber), var(--amber));
  background: var(--mark) top left / 24px 2px, var(--mark) top left / 2px 24px,
    var(--mark) top right / 24px 2px, var(--mark) top right / 2px 24px,
    var(--mark) bottom left / 24px 2px, var(--mark) bottom left / 2px 24px,
    var(--mark) bottom right / 24px 2px, var(--mark) bottom right / 2px 24px;
  background-repeat: no-repeat; opacity: .65;
}
.screen-ad-art .px-ic { filter: drop-shadow(0 0 12px #ffae373d); }
.is-screen .screen-intermission .screen-ad-clock {
  display: inline-block; padding: .18em .55em; margin-left: .25em;
  background: #111420; border: 1px solid var(--edge-hi); border-radius: 6px;
}

/* Keep pairing directions legible below the code, including a landscape iPad. */
.is-screen-lobby .lobby-code-route { max-width: 36ch; margin: 0; text-wrap: balance; }
.is-screen-lobby .lobby-code-route b { display: block; margin-top: .25em; color: var(--text); }
.is-screen-lobby .lobby-copy.link { min-height: 40px; padding-inline: 16px; }
.is-screen-lobby .screen-lobby-count { white-space: nowrap; font-family: var(--body); letter-spacing: .06em; }
.screen-portrait p { text-wrap: balance; }
@media (min-width: 740px) and (min-height: 600px) {
  .screen-portrait h2 { font-size: clamp(24px, 3.2vmin, 42px); max-width: 22ch; text-wrap: balance; }
  .screen-portrait p { max-width: 36ch; font-size: clamp(16px, 1.9vmin, 24px); }
}

/* TV and tablet setup: the code and pilot bays share the available stage. */
@media (min-width: 740px) and (min-height: 600px) {
  .big-screen-mode .online-raid.is-roles,
  .online-raid.is-screen-lobby {
    --u: clamp(.95px, min(.092vw, .165vh), 3.6px);
  }
  .big-screen-mode .is-roles .online-sheet.dialog,
  .is-screen-lobby .online-sheet.dialog {
    width: min(93vw, 100%); max-width: none;
    min-height: 76dvh; display: flex; flex-direction: column;
  }
  .big-screen-mode .is-roles .online-sheet-body,
  .is-screen-lobby .online-sheet-body { flex: 1; display: flex; flex-direction: column; }
  .big-screen-mode .is-roles .online-roles,
  .is-screen-lobby .screen-lobby-grid { flex: 1; }
  .big-screen-mode .is-roles .online-role { min-height: 0; }
  .is-screen-lobby .lobby-bays { align-items: stretch; }
  .is-screen-lobby .lobby-copy.link { font-size: max(15px, calc(15 * var(--u))); }
  .big-screen-mode .is-lobby:is(.is-code-entry,.is-seat-picker,.is-closed) .online-sheet.dialog {
    width: min(88vw, 100%); max-width: none; min-height: 60dvh;
    zoom: 1; display: flex; flex-direction: column; padding-inline: clamp(20px, 3vw, 72px);
  }
  .big-screen-mode .is-lobby:is(.is-code-entry,.is-seat-picker,.is-closed) .online-sheet .dlg-head {
    margin-inline: calc(-1 * clamp(20px, 3vw, 72px)); padding: clamp(18px, 2.4vmin, 48px) clamp(20px, 3vw, 72px);
  }
  .big-screen-mode .is-lobby:is(.is-code-entry,.is-seat-picker,.is-closed) .online-sheet-body {
    flex: 1; display: flex; flex-direction: column; justify-content: center; gap: clamp(8px, 1.8vh, 22px);
    width: min(100%, 76ch); align-self: center; font-size: clamp(16px, 2.3vmin, 36px);
  }
  .big-screen-mode .is-lobby:is(.is-code-entry,.is-seat-picker,.is-closed) .online-sheet .sub { text-align: center; font-size: inherit; }
  .big-screen-mode .is-lobby:is(.is-code-entry,.is-seat-picker,.is-closed) .online-sheet .note { font-size: .88em; }
  .big-screen-mode .is-seat-picker .online-seat-note { text-wrap: balance; }
  .screen-portrait h2 { font-size: clamp(32px, 5vmin, 84px); max-width: 20ch; }
  .screen-portrait p { font-size: clamp(18px, 2.7vmin, 38px); }
  .screen-portrait .screen-turn-phone { width: 7vmin; height: 11vmin; }
  .screen-portrait .btn { min-width: 20vmin; }
  .is-screen .online-layer-card:not(.screen-intermission) {
    --u: clamp(1px,min(.11vw,.175vh),4px);
    width: min(86vw,100%); max-width: none; min-height: 55dvh;
  }
  .is-screen .online-layer-card.is-upgrade { width: min(94vw,100%); }
  .is-screen .online-layer-card:not(.screen-intermission) .online-dlg-body { flex: 1; justify-content: center; }
  .is-screen .online-layer-card:not(.screen-intermission) .online-dlg-actions { justify-content: stretch; }
  .is-screen .online-layer-card:not(.screen-intermission) .online-dlg-actions:has(> :only-child) { grid-template-columns: minmax(0, 55%); justify-content: center; }
  .is-screen .online-layer-card .online-dlg-chips { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%, 7em),1fr)); }
  .is-screen .online-layer-card .online-dlg-chips .chip { justify-content: center; }
}
@media (min-width:740px) and (min-height:900px) and (orientation:portrait) {
  .big-screen-mode .is-roles .online-sheet.dialog { min-height: 70dvh; }
}
.screen-raid-stats { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: calc(12 * var(--u)); margin: 0; }
.screen-raid-stats div { display: grid; align-content: center; justify-items: center; gap: .6em; min-height: calc(98 * var(--u)); padding: .7em; border: 1px solid var(--edge-hi); border-radius: 8px; background: #101421; }
.screen-raid-stats dt { font: 700 max(11px,calc(13 * var(--u)))/1.2 var(--body); color: var(--muted); letter-spacing: .1em; }
.screen-raid-stats dd { margin: 0; font: 700 max(16px,calc(27 * var(--u)))/1.2 var(--pixel); color: var(--amber-hi); overflow-wrap: anywhere; }
@media (min-width:740px) and (min-height:600px) {
  .big-screen-mode .is-code-entry .online-code-field { height: clamp(62px,9vmin,120px); }
  .big-screen-mode .is-code-entry .online-code-slots i { font-size: clamp(26px,4vmin,60px); }
  .big-screen-mode .is-lobby:is(.is-code-entry,.is-seat-picker,.is-closed) .online-sheet h2 { font-size: clamp(22px,3.4vmin,54px); }
  .big-screen-mode .is-lobby:is(.is-code-entry,.is-seat-picker,.is-closed) .online-sheet .btn,
  .big-screen-mode .is-seat-picker .lobby-seat { min-height: clamp(52px,8vmin,108px); }
  .big-screen-mode .is-seat-picker .lobby-seat strong { font-size: clamp(16px,2.2vmin,32px); }
}