:root {
  --gold: #ffd24a; --gold2: #e0a020; --ink: #120a1c; --panel: rgba(18, 10, 30, 0.9); --line: rgba(255, 210, 74, 0.35);
  --txt: #f4ecff; --muted: #b3a6c8; --red: #d8344a; --green: #42d36a; --blue: #4fa3ff;
  --font: "Pretendard", "Malgun Gothic", "Apple SD Gothic Neo", "Noto Sans KR", "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
  --display: "Impact", "Arial Black", "Haettenschweiler", "Trebuchet MS", sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: #000; color: var(--txt); font-family: var(--font); overflow: hidden; overscroll-behavior: none; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
#game { position: fixed; inset: 0; display: block; }
button { font: inherit; color: inherit; cursor: pointer; }
input { font: inherit; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
#boot { position: fixed; inset: 0; display: grid; place-items: center; background: #0b0612; color: var(--gold); font: 900 28px var(--display); letter-spacing: 3px; z-index: 50; }

/* ---- screen host ---- */
#ui { position: fixed; inset: 0; z-index: 10; display: flex; flex-direction: column; overflow: auto; pointer-events: none; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
#ui > * { pointer-events: auto; }
#ui:not(:empty) { background: radial-gradient(ellipse at 50% 35%, rgba(18, 10, 30, 0.35), rgba(8, 4, 16, 0.86)); }
#ui.screen-pause, #ui.screen-results, #ui.screen-help, #ui.screen-settings { background: rgba(6, 3, 12, 0.72); justify-content: center; align-items: center; }

/* ---- buttons ---- */
.mbtn { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 240px; padding: 12px 26px; border: 2px solid var(--line); border-radius: 10px; background: linear-gradient(#3a2660, #22143c); box-shadow: 0 3px 0 #0a0514, inset 0 1px 0 rgba(255, 255, 255, 0.18); transition: transform 0.08s, filter 0.12s, border-color 0.12s; }
.mbtn b { font-size: 20px; letter-spacing: 0.5px; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.5); }
.mbtn small { color: var(--muted); font-size: 12.5px; }
.mbtn:hover:not(:disabled), .mbtn:focus-visible { border-color: var(--gold); filter: brightness(1.15); transform: translateY(-1px); }
.mbtn:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 #0a0514; }
.mbtn.primary { background: linear-gradient(#e6902a, #b0561a); border-color: #ffd98a; }
.mbtn.primary small { color: #ffe8c0; }
.mbtn:disabled { opacity: 0.45; cursor: not-allowed; }
.row { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; align-items: center; }
.row > button:not(.mbtn), .chip, .back, .seg button { padding: 8px 16px; border: 1.5px solid var(--line); border-radius: 8px; background: rgba(40, 24, 66, 0.85); font-size: 14.5px; font-weight: 600; }
.row > button:not(.mbtn):hover, .chip:hover, .back:hover, .seg button:hover { border-color: var(--gold); filter: brightness(1.2); }
.muted { color: var(--muted); font-size: 13px; margin: 6px 0; }
.spacer { flex: 1; }
.warn { color: #ff8a8a; }

/* ---- title ---- */
.title-wrap { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; padding: 16px; }
.logo { text-align: center; }
.logo small { display: block; color: var(--gold); letter-spacing: 6px; font-size: 13px; text-transform: uppercase; font-weight: 700; text-shadow: 0 2px 6px #000; }
.logo h1 { margin: 2px 0 0; font: 900 italic clamp(38px, 9vw, 96px)/0.95 var(--display); letter-spacing: 3px; display: flex; flex-direction: column; align-items: center; }
.logo h1 span { color: #fff4d0; text-shadow: 0 4px 0 #6a2a10, 0 0 22px rgba(255, 150, 40, 0.55); -webkit-text-stroke: 2px #2a1008; }
.logo h1 b { background: linear-gradient(#fff2a0, #ffb02a 55%, #e0501a); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-stroke: 2.5px #3a1408; filter: drop-shadow(0 5px 0 #4a1a08) drop-shadow(0 0 18px rgba(255, 120, 30, 0.6)); }
.logo .ko { margin-top: 6px; font: 800 clamp(18px, 3.4vw, 30px) var(--font); color: #fff; letter-spacing: 8px; text-shadow: 0 2px 8px #000; }
.menu { display: flex; flex-direction: column; gap: 10px; align-items: center; }
.menu .row.small { margin-top: 6px; }
.home-link { position: absolute; top: calc(env(safe-area-inset-top) + 10px); left: calc(env(safe-area-inset-left) + 12px); padding: 7px 14px; border: 1.5px solid var(--line); border-radius: 8px; background: rgba(40, 24, 66, 0.85); color: var(--gold); font-size: 14px; font-weight: 800; letter-spacing: 2px; text-decoration: none; text-shadow: 0 1px 3px #000; }
.home-link:hover, .home-link:focus-visible { border-color: var(--gold); filter: brightness(1.2); }

/* ---- bars, setup ---- */
.bar-top { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: linear-gradient(rgba(10, 5, 20, 0.9), rgba(10, 5, 20, 0)); }
.bar-top h2 { margin: 0; font-size: 20px; text-shadow: 0 2px 4px #000; }
.setup, .local { flex: 1; display: flex; gap: 16px; padding: 6px 16px 16px; align-items: stretch; min-height: 0; }
.hcards { flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; min-width: 0; }
.hcard { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 8px; border: 2px solid rgba(255, 255, 255, 0.14); border-radius: 12px; background: linear-gradient(rgba(60, 38, 96, 0.7), rgba(24, 14, 40, 0.85)); text-align: center; position: relative; overflow: hidden; }
.hcard::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 30%, color-mix(in srgb, var(--c) 32%, transparent), transparent 70%); pointer-events: none; }
.hcard.sel { border-color: var(--c); box-shadow: 0 0 0 2px var(--c), 0 0 26px color-mix(in srgb, var(--c) 55%, transparent); transform: translateY(-3px); }
.hcard:hover { border-color: var(--c); }
.hport { display: block; pointer-events: none; }
.hname { display: flex; flex-direction: column; line-height: 1.15; }
.hname b { font-size: 19px; }
.hname small { color: var(--c); font-weight: 800; letter-spacing: 1px; }
.hstats { width: 100%; display: grid; gap: 3px; }
.st { display: grid; grid-template-columns: 38px 1fr; align-items: center; gap: 6px; font-size: 11px; color: var(--muted); text-align: left; }
.st i { display: block; height: 6px; border-radius: 3px; background: rgba(0, 0, 0, 0.5); overflow: hidden; }
.st b { display: block; height: 100%; background: var(--c); border-radius: 3px; }
.hdesc { margin: 4px 0 0; font-size: 12px; line-height: 1.35; color: #d8cceb; min-height: 4.1em; }
.hspc { font-size: 12px; font-weight: 800; color: var(--gold); border-top: 1px solid var(--line); padding-top: 4px; width: 100%; }
.opts { width: 290px; display: flex; flex-direction: column; gap: 8px; justify-content: center; }
.opts label, .lopts label, .room-side label { color: var(--gold); font-size: 12.5px; font-weight: 800; letter-spacing: 1px; margin-top: 4px; }
.seg { display: flex; flex-wrap: wrap; gap: 6px; }
.seg button { flex: 1; min-width: 60px; }
.seg button.sel { background: linear-gradient(#e6902a, #b0561a); border-color: #ffd98a; color: #fff; }
.opts .go { margin-top: 10px; min-width: 0; }
.best { color: var(--muted); margin: 0; font-size: 13px; }
.best b { color: var(--gold); }

/* ---- shared screen ---- */
.local { flex-direction: column; align-items: center; }
.hint { color: var(--muted); margin: 4px 0; text-align: center; }
.lseats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; width: min(900px, 100%); }
.lseat { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 230px; padding: 8px; border: 2px dashed rgba(255, 255, 255, 0.2); border-radius: 12px; background: rgba(20, 12, 34, 0.75); position: relative; text-align: center; }
.lseat:not(.empty) { border-style: solid; border-color: var(--c); }
.lseat.ready { box-shadow: 0 0 22px color-mix(in srgb, var(--c) 60%, transparent); }
.lseat .pn { position: absolute; top: 6px; left: 8px; font: 900 16px var(--display); color: var(--c); }
.lseat.empty span { color: var(--muted); font-size: 13px; padding: 0 8px; }
.lseat small { color: var(--muted); font-size: 11.5px; }
.lseat .rd { font-style: normal; font-size: 12px; color: var(--muted); margin-top: 2px; }
.lseat.ready .rd { color: var(--green); font-weight: 800; }
.lopts { display: flex; flex-wrap: wrap; gap: 8px 22px; justify-content: center; align-items: center; }
.lopts label { margin: 0; }

/* ---- panels: help, pause, results ---- */
.panel { width: min(560px, 94vw); max-height: 94vh; overflow: auto; padding: 22px 26px; border: 2px solid var(--line); border-radius: 14px; background: var(--panel); box-shadow: 0 10px 50px rgba(0, 0, 0, 0.7); display: flex; flex-direction: column; gap: 12px; align-items: stretch; }
.panel h2 { margin: 0; text-align: center; font: 900 30px var(--display); letter-spacing: 2px; color: var(--gold); text-shadow: 0 3px 0 #4a1a08; }
.panel .mbtn { align-self: center; }
.help table { border-collapse: collapse; width: 100%; }
.help th { text-align: left; color: var(--gold); padding: 6px 12px 6px 0; white-space: nowrap; vertical-align: top; }
.help td { padding: 6px 0; color: #eadff8; }
.help tr + tr { border-top: 1px solid rgba(255, 255, 255, 0.08); }
.tips { margin: 0; padding-left: 18px; color: #d8cceb; font-size: 13.5px; line-height: 1.5; }
.pause .vol { display: grid; grid-template-columns: 80px 1fr; align-items: center; gap: 10px; color: var(--muted); font-size: 14px; }
.pause input[type=range] { width: 100%; accent-color: var(--gold); }
.result { width: min(820px, 96vw); }
.result.win h2 { color: var(--gold); font-size: 38px; }
.result.lose h2 { color: #ff7a7a; font-size: 38px; text-shadow: 0 3px 0 #3a0810; }
.result .sub { margin: -4px 0 4px; text-align: center; color: var(--muted); }
.rtable { display: flex; flex-direction: column; gap: 6px; }
.rrow { display: grid; grid-template-columns: 2.2fr repeat(5, 1fr); align-items: center; gap: 6px; padding: 6px 10px; border-radius: 9px; background: rgba(60, 38, 96, 0.45); border-left: 4px solid var(--c, transparent); text-align: right; font-variant-numeric: tabular-nums; }
.rrow.head { background: none; border: 0; color: var(--muted); font-size: 12px; padding-top: 0; padding-bottom: 0; }
.rrow.mvp { background: rgba(140, 100, 20, 0.35); }
.rrow .who { display: flex; align-items: center; gap: 8px; text-align: left; }
.rrow .who b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rrow em { font-style: normal; font-size: 10.5px; font-weight: 900; color: #3a2410; background: var(--gold); border-radius: 5px; padding: 1px 6px; }
#relay-row h3 { margin: 6px 0; font-size: 14px; color: var(--gold); text-align: center; }
.relay-games { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.relay-games button { display: flex; flex-direction: column; padding: 8px 14px; border: 1.5px solid var(--line); border-radius: 8px; background: rgba(40, 24, 66, 0.85); }
.relay-games small { color: var(--muted); font-size: 11.5px; }
.relay-banner { position: fixed; left: 50%; top: 14px; transform: translateX(-50%); z-index: 40; padding: 12px 18px; border: 2px solid var(--gold); border-radius: 12px; background: var(--panel); text-align: center; }
.relay-banner p { margin: 0 0 8px; }
.relay-banner div { display: flex; gap: 8px; justify-content: center; }
.relay-banner button { padding: 6px 14px; border-radius: 8px; border: 1.5px solid var(--line); background: #2c1c48; }
.relay-banner .primary { background: linear-gradient(#e6902a, #b0561a); }

/* ---- online ---- */
.lobby { flex: 1; display: grid; grid-template-columns: minmax(300px, 420px) 1fr; gap: 18px; padding: 8px 18px 18px; min-height: 0; }
.lobby-main, .lobby-list, .room-side { display: flex; flex-direction: column; gap: 10px; padding: 14px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--panel); min-height: 0; overflow: auto; }
.set { display: grid; gap: 4px; }
.set span { color: var(--gold); font-size: 12.5px; font-weight: 800; letter-spacing: 1px; }
input[type=text], .set input, .code-row input { padding: 9px 12px; border: 1.5px solid var(--line); border-radius: 8px; background: rgba(0, 0, 0, 0.4); color: #fff; width: 100%; }
.code-row { flex-wrap: nowrap; }
.code-row input { text-transform: uppercase; letter-spacing: 6px; text-align: center; font-weight: 800; font-size: 18px; }
.hero-pick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.hpick { display: flex; flex-direction: column; align-items: center; gap: 0; padding: 6px 2px; border: 2px solid rgba(255, 255, 255, 0.14); border-radius: 10px; background: rgba(40, 24, 66, 0.7); line-height: 1.15; }
.hpick b { font-size: 13px; } .hpick small { color: var(--c); font-size: 10.5px; font-weight: 800; }
.hpick.sel { border-color: var(--c); box-shadow: 0 0 14px color-mix(in srgb, var(--c) 60%, transparent); }
.hpick:disabled { opacity: 0.35; }
.room-row { display: grid; grid-template-columns: 56px 1fr auto auto; gap: 10px; align-items: center; width: 100%; padding: 9px 12px; margin-bottom: 6px; border: 1.5px solid var(--line); border-radius: 9px; background: rgba(40, 24, 66, 0.7); text-align: left; font-size: 13.5px; }
.room-row b { color: var(--gold); letter-spacing: 3px; }
.room-row:hover { border-color: var(--gold); }
.online-about { color: var(--muted); font-size: 12.5px; margin-top: auto; }
.room { flex: 1; display: grid; grid-template-columns: 1fr minmax(300px, 380px); gap: 16px; padding: 8px 18px 18px; min-height: 0; }
.seats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; align-content: start; }
.seat { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 190px; padding: 8px; border: 2px solid var(--c); border-radius: 12px; background: rgba(20, 12, 34, 0.8); text-align: center; }
.seat.me { box-shadow: 0 0 22px color-mix(in srgb, var(--c) 55%, transparent); }
.seat.empty { border-style: dashed; border-color: rgba(255, 255, 255, 0.2); color: var(--muted); }
.seat.ai canvas { opacity: 0.6; }
.seat.gone { opacity: 0.5; }
.seat small { color: var(--muted); font-size: 12px; }
.seat .rd { font-style: normal; font-size: 12.5px; color: var(--muted); }
.seat .rd.on { color: var(--green); font-weight: 800; }
.room-side h3, .lobby-list h3 { margin: 0; color: var(--gold); font-size: 15px; }
.stage-ro { margin: 0; }

/* ---- toast ---- */
#toast { position: fixed; left: 50%; bottom: 14%; transform: translate(-50%, 20px); padding: 10px 18px; border-radius: 10px; background: rgba(12, 6, 22, 0.94); border: 1.5px solid var(--line); opacity: 0; pointer-events: none; transition: opacity 0.2s, transform 0.2s; z-index: 60; max-width: 90vw; text-align: center; }
#toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---- fullscreen + touch ---- */
.fs { position: fixed; top: calc(env(safe-area-inset-top) + 6px); right: calc(env(safe-area-inset-right) + 6px); z-index: 20; width: 38px; height: 38px; border-radius: 10px; border: 1.5px solid var(--line); background: rgba(18, 10, 30, 0.6); padding: 7px; opacity: 0.75; display: none; }
.touch .fs:not([hidden]) { display: block; }
body:not(.touch) .fs:not([hidden]) { display: block; }
body.ingame .fs { display: none !important; }
.fs svg { width: 100%; height: 100%; }
#touch { position: fixed; inset: 0; z-index: 15; pointer-events: none; display: none; }
body.touch.ingame #touch { display: block; }
#touch > * { pointer-events: auto; touch-action: none; }
#stick-zone { position: absolute; left: 0; top: 18%; width: 46%; bottom: 0; }
#stick { pointer-events: none !important; position: absolute; left: calc(env(safe-area-inset-left) + 26px); bottom: calc(env(safe-area-inset-bottom) + 26px); width: 132px; height: 132px; border-radius: 50%; background: radial-gradient(rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.05)); border: 2px solid rgba(255, 255, 255, 0.28); display: grid; place-items: center; }
#stick:not(.active) { opacity: 0.55; }
#knob { width: 56px; height: 56px; border-radius: 50%; background: radial-gradient(#ffe9a8, #d89a28); border: 2px solid #6a3a10; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6); pointer-events: none; }
.tb { position: absolute; width: 72px; height: 72px; border-radius: 50%; border: 2.5px solid rgba(255, 255, 255, 0.55); background: rgba(30, 18, 50, 0.6); color: #fff; padding: 16px; display: grid; place-items: center; }
.tb svg { width: 100%; height: 100%; }
.tb.down { background: rgba(255, 190, 60, 0.7); transform: scale(0.94); }
.tb.a { right: calc(env(safe-area-inset-right) + 34px); bottom: calc(env(safe-area-inset-bottom) + 40px); width: 92px; height: 92px; padding: 22px; background: rgba(216, 60, 60, 0.55); }
.tb.j { right: calc(env(safe-area-inset-right) + 138px); bottom: calc(env(safe-area-inset-bottom) + 30px); background: rgba(60, 130, 216, 0.55); }
.tb.s { right: calc(env(safe-area-inset-right) + 40px); bottom: calc(env(safe-area-inset-bottom) + 146px); background: rgba(150, 70, 220, 0.55); }
.tb.g { right: calc(env(safe-area-inset-right) + 136px); bottom: calc(env(safe-area-inset-bottom) + 112px); width: 60px; height: 60px; padding: 14px; background: rgba(60, 170, 110, 0.5); }
#t-pause { position: absolute; top: calc(env(safe-area-inset-top) + 74px); right: calc(env(safe-area-inset-right) + 10px); width: 40px; height: 40px; border-radius: 10px; border: 1.5px solid rgba(255, 255, 255, 0.4); background: rgba(18, 10, 30, 0.55); color: #fff; padding: 9px; }
#rotate { position: fixed; inset: 0; z-index: 45; display: none; place-items: center; background: #0b0612; color: var(--gold); text-align: center; padding: 30px; }
#rotate svg { width: 70px; height: 70px; display: block; margin: 0 auto 14px; }
@media (orientation: portrait) and (pointer: coarse) { body.ingame #rotate { display: grid; } }

/* ---- small screens ---- */
@media (max-width: 900px), (max-height: 520px) {
  .setup { flex-direction: column; overflow: auto; }
  .opts { width: 100%; flex-direction: row; flex-wrap: wrap; align-items: flex-end; }
  .opts .seg { flex: 1; }
  .hdesc { display: none; }
  .hcards { grid-template-columns: repeat(4, 1fr); }
  .lobby, .room { grid-template-columns: 1fr; overflow: auto; }
  .mbtn { min-width: 200px; padding: 9px 20px; }
  .title-wrap { gap: 12px; }
  .lseat { min-height: 180px; }
}
@media (max-height: 460px) {
  .logo h1 { font-size: 46px; }
  .logo .ko { display: none; }
  .title-wrap { flex-direction: row; gap: 28px; }
  .hstats { display: none; }
  .hport { height: 130px !important; width: auto !important; }
  .panel { padding: 12px 16px; gap: 8px; }
  .panel h2 { font-size: 24px; }
  .bar-top { padding: 6px 12px; }
}

#s-stage button, #l-stage button, #r-stage button { flex: 2 1 130px; }
.bar-top { padding-right: 54px; }
.hpick .hport { width: 100% !important; max-width: 84px; height: auto !important; }
.room-side .hero-pick { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tog { display: grid; grid-template-columns: 110px 1fr; align-items: center; gap: 10px; color: var(--muted); font-size: 14px; }
@media (max-width: 600px) {
  .opts { flex-direction: column; align-items: stretch; flex-wrap: nowrap; }
  .opts .seg { flex: none; }
  .seg button { min-width: 0; padding: 8px 10px; white-space: nowrap; }
  #s-stage button, #l-stage button, #r-stage button { flex: 1 1 100%; }
  .setup { overflow: auto; }
}

/* ---- phones: the touch controls never sit on top of a menu; every menu fits a phone held sideways ---- */
/* The controls belong to the game. While any screen (pause, results, help ...) is open they step aside, so they neither cover a button nor swallow the tap meant for it. */
#ui:not(:empty) ~ #touch { display: none; }
input, textarea { -webkit-user-select: text; user-select: text; }
#t-pause { width: 44px; height: 44px; }
@media (pointer: coarse) { input[type=range] { height: 32px; } }
@supports (height: 1dvh) { .panel { max-height: 94dvh; } }

@media (orientation: landscape) and (max-height: 520px) {
  .mbtn { padding: 7px 18px; }
  .mbtn b { font-size: 18px; }
  .panel { max-height: 100%; }
  .row > button:not(.mbtn), .chip, .back { padding: 6px 12px; }

  /* solo: the heroes on the left, the options on the right, the start button always in view */
  .setup, .local { padding: 0 12px 8px; }
  .setup { flex-direction: row; overflow: hidden; gap: 10px; }
  .hcards { gap: 6px; align-items: start; align-content: start; }
  .hcard { padding: 6px 3px; gap: 2px; min-width: 0; }
  .hcard.sel { transform: none; }
  .hport { height: min(138px, 34vh) !important; width: auto !important; max-width: 100%; }
  .hname b { font-size: 15px; }
  .hname small, .hspc { font-size: 10.5px; }
  .hspc { padding-top: 3px; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .opts { width: 232px; flex: none; flex-direction: column; flex-wrap: nowrap; align-items: stretch; justify-content: flex-start; gap: 3px; overflow-y: auto; }
  .opts .seg { flex: none; gap: 4px; }
  .opts label { margin-top: 3px; font-size: 11px; }
  .seg button { min-width: 0; padding: 6px 4px; font-size: 13px; white-space: nowrap; }
  #s-stage button, #l-stage button, #r-stage button { flex: 1 1 100%; }
  .opts .go { margin-top: 6px; position: sticky; bottom: 0; }
  .best { font-size: 12px; }

  /* shared screen */
  .local { gap: 4px; }
  .hint { font-size: 12px; margin: 0; }
  .lseat { min-height: 0; padding: 4px; }
  .lseat .hport { height: 64px !important; width: auto !important; }
  .lopts { gap: 4px 14px; }
  .lopts .seg button { min-width: 44px; }

  /* online lobby: your details on the left, the open rooms on the right */
  .lobby { grid-template-columns: minmax(290px, 380px) minmax(0, 1fr); gap: 10px; padding: 0 12px 8px; overflow: hidden; }
  .lobby-main, .lobby-list { padding: 8px 10px; gap: 6px; }
  .set span { font-size: 11px; }
  input[type=text], .set input, .code-row input { padding: 6px 10px; }
  .hero-pick { gap: 4px; }
  .hpick { padding: 3px 2px; }
  .hpick small { display: none; }
  .hpick .hport { max-width: 44px; }
  .online-about { display: none; }

  /* room: the seats on the left, your hero and the start button on the right */
  .room { grid-template-columns: minmax(0, 1fr) minmax(250px, 310px); gap: 10px; padding: 0 12px 8px; overflow: hidden; }
  .seats { gap: 8px; }
  .seat { min-height: 0; padding: 4px; }
  .seat .hport { height: 80px !important; width: auto !important; }
  .room-side { padding: 8px 10px; gap: 6px; }
  .room-side h3 { font-size: 13px; }
  .room-side .muted { margin: 2px 0; font-size: 12px; }
  .room-side .mbtn { position: sticky; bottom: 0; min-width: 0; box-shadow: 0 0 12px 10px rgba(18, 10, 30, 0.92), 0 3px 0 #0a0514, inset 0 1px 0 rgba(255, 255, 255, 0.18); }

  /* panels: a title, the content, and the buttons that answer it stay in view */
  .help th, .help td { padding: 3px 10px 3px 0; font-size: 13px; }
  .help .tips { display: none; }
  .help > .mbtn { position: sticky; bottom: 0; min-width: 0; padding: 7px 24px; box-shadow: 0 0 14px 10px rgba(18, 10, 30, 0.92), 0 3px 0 #0a0514; }
  .result { gap: 6px; padding: 8px 14px; }
  .result.win h2, .result.lose h2 { font-size: 26px; }
  .result .sub { margin: -2px 0 0; font-size: 13px; }
  .rrow { padding: 3px 8px; }
  .rrow .hport { height: 34px !important; width: auto !important; }
  .panel.result > .row { position: sticky; bottom: 0; z-index: 2; padding: 6px 0 2px; background: linear-gradient(rgba(18, 10, 30, 0), var(--panel) 30%); }
}

@media (orientation: landscape) and (min-height: 370px) and (max-height: 520px) {
  .seg button { padding: 8px 4px; }
}

/* the shortest screens (a browser's own bars take a phone's height): portraits in the hero pickers make way, the buttons slim down */
@media (orientation: landscape) and (max-height: 340px) {
  .hpick .hport { display: none; }
  .hpick { min-height: 34px; justify-content: center; }
  .mbtn { padding: 5px 16px; }
  .lobby-main { gap: 4px; }
  .seat .hport { height: 60px !important; }
}

/* touch controls on a short screen: a smaller cluster, so the special button does not sit on the pause button */
@media (orientation: landscape) and (max-height: 360px) {
  .tb { width: 60px; height: 60px; padding: 13px; }
  .tb.a { right: calc(env(safe-area-inset-right) + 30px); bottom: calc(env(safe-area-inset-bottom) + 30px); width: 76px; height: 76px; padding: 18px; }
  .tb.j { right: calc(env(safe-area-inset-right) + 116px); bottom: calc(env(safe-area-inset-bottom) + 24px); }
  .tb.s { right: calc(env(safe-area-inset-right) + 34px); bottom: calc(env(safe-area-inset-bottom) + 116px); }
  .tb.g { right: calc(env(safe-area-inset-right) + 112px); bottom: calc(env(safe-area-inset-bottom) + 92px); width: 50px; height: 50px; padding: 11px; }
}

/* ---- phones held upright (how an invite link gets opened): one page that scrolls as a whole, and the button that moves things on stays at the bottom ---- */
@media (max-width: 900px) and (orientation: portrait) {
  /* no scroll inside a scroll: the panels grow, the page scrolls */
  .lobby-main, .lobby-list, .room-side { overflow: visible; min-height: auto; }
  .seat { min-height: 0; padding: 6px; }
  .seat .hport { height: 88px !important; width: auto !important; }
  .room-side .hpick .hport { max-width: 56px; }
  .setup .hport { height: 118px !important; width: auto !important; max-width: 100%; object-fit: contain; }
  .hstats { display: none; }
  /* Go! / Ready / Start: always in view, with room left under the content so nothing hides behind it */
  #s-go, #r-start, #r-ready { position: fixed; left: 16px; right: 16px; bottom: calc(env(safe-area-inset-bottom) + 12px); z-index: 12; width: auto; min-width: 0; box-shadow: 0 0 14px 10px rgba(10, 5, 20, 0.9), 0 3px 0 #0a0514, inset 0 1px 0 rgba(255, 255, 255, 0.18); }
  .setup::after { content: ""; flex: none; height: 84px; }
  .room::after { content: ""; height: 84px; }
  .help > .mbtn { position: sticky; bottom: 0; box-shadow: 0 0 14px 10px rgba(18, 10, 30, 0.92), 0 3px 0 #0a0514; }
}