:root{color-scheme:dark;font-family:Inter,ui-sans-serif,system-ui,sans-serif;background:#080e21;color:#ecedf6}body{background:radial-gradient(ellipse at 50% 30%,#252646,#090e20 70%)}button,a{touch-action:manipulation}button:focus-visible,a:focus-visible{outline:2px solid #e1c886;outline-offset:4px}[hidden]{display:none!important}.arena-gate{position:fixed;inset:0;z-index:1500;display:flex;align-items:center;justify-content:center;overflow:auto;background:radial-gradient(ellipse at 50% 0,#3e355844,transparent 65%),radial-gradient(ellipse at 50% 100%,#24517424,transparent 60%),#0b1022;text-align:center;padding:52px 24px 72px}.arena-gate::before{content:'';position:absolute;inset:20px;border:1px solid #af9d6025;pointer-events:none}.arena-gate::after{content:'';position:absolute;width:100%;height:1px;top:50%;left:0;background:linear-gradient(90deg,transparent,#a8986230,transparent);pointer-events:none}.arena-intro{position:relative;z-index:2;max-width:650px}.arena-eyebrow{font-size:10px;letter-spacing:3px;color:#9dacc7;display:flex;justify-content:center;align-items:center;gap:9px}.arena-eyebrow span{width:5px;height:5px;background:#adcaaa;box-shadow:0 0 12px #9bbeb2;border-radius:50%}.arena-crown{font-size:52px;color:#d3c18a;margin:24px 0 10px;line-height:1}.arena-intro h1{font-family:Georgia,'Times New Roman',serif;font-size:clamp(42px,6.5vw,82px);font-weight:500;letter-spacing:-3px;line-height:.94;margin:0;color:#f0eadd;text-shadow:0 3px 30px #cfd3f425}.arena-intro h1 i{font-size:.4em;font-weight:400;letter-spacing:-1px}.arena-subtitle{display:flex;justify-content:center;align-items:center;gap:20px;color:#d2bc83;font-size:12px;letter-spacing:6px;margin-top:25px}.arena-subtitle span{width:42px;height:1px;background:#ad955c66}.arena-lede{font-family:Georgia,serif;font-style:italic;font-size:22px;color:#c5c8dd;margin:27px 0 12px}.arena-desc{color:#8e9ab2;font-size:13px;line-height:1.8;margin:0 0 28px}.arena-actions{display:flex;justify-content:center;gap:12px}.arena-actions button{min-height:54px;padding:0 24px;border-radius:5px;letter-spacing:.2px;font-size:14px;font-weight:600;cursor:pointer;transition:filter .2s,transform .2s}.arena-actions button:hover{filter:brightness(1.18);transform:translateY(-2px)}.arena-actions button:disabled{opacity:.45;cursor:wait}.arena-primary{background:linear-gradient(#e6d7ad,#c9b578);border:1px solid #f9e9b7;color:#1e2331;box-shadow:0 4px 30px #d9c78e15}.arena-primary span{margin-right:13px}.arena-primary b{margin-left:28px;font-size:18px;font-weight:400}.arena-secondary{border:1px solid #6d71934f;background:#22283d;color:#daddea}.arena-secondary span{margin-left:20px;color:#b9ab88}.arena-progress{font-size:11px;color:#929fba;margin:15px 0 22px;min-height:18px}.arena-micro{display:flex;justify-content:center;gap:27px;color:#727e98;font-size:10px;text-transform:uppercase;letter-spacing:1.5px}.arena-bottom{position:absolute;bottom:34px;left:48px;right:48px;display:flex;justify-content:space-between;gap:20px;color:#646e88;font-size:9px;letter-spacing:1.5px}.arena-bottom a{color:#8c96b0;text-decoration:none}.arena-orbit{position:absolute;border:1px solid #bdb29a10;border-radius:50%;width:780px;height:780px;pointer-events:none}.orbit-two{width:1000px;height:1000px;border-style:dashed;animation:spin 180s linear infinite}.orbit-one::before{content:'✦';color:#b8a97477;position:absolute;left:10%;top:10%;font-size:20px}@keyframes spin{to{transform:rotate(360deg)}}.menubar{height:48px;background:#11182b;border-color:#48567442;padding:0 18px;gap:4px;flex-wrap:wrap}.brand{color:#d5c398;font-size:19px;display:flex;gap:9px;align-items:center}.brand span{font-family:Georgia,serif;color:#d9ddec;font-size:12px;letter-spacing:1px}.menu>summary{color:#abb8d0}.menu[open]>summary,.menu>summary:hover{background:#2c3450}.menu-items{background:#151e34;border-color:#4a5570;z-index:1100}.menu-items button:hover{background:#35415c}.arena-toolbar{font-size:11px;color:#d6c68f;background:#283047;border:1px solid #9d8e6133;border-radius:4px;padding:6px 9px;margin-right:8px}.arena-help{display:flex;align-items:center;gap:20px;padding:12px 25px;background:#1b2740;color:#aabbd5;font-size:11px;line-height:1.65;border-bottom:1px solid #4d647966}.arena-help b{color:#e4d5a6}.arena-help button{border:0;background:none;color:#b8c4d6;font-size:25px;cursor:pointer}.screen canvas{image-rendering:pixelated}.screen{background:#090e20!important}.statusbar,#status-bar{background:#10182b;border-color:#3b4b6840}.beta-badge{font-size:8px;background:#483f2f;color:#d1c08b}.menu-note{color:#9eacc6}#report-issue-menu,[data-action="report"],#pause-report-issue{display:none!important}#debug-overlay{display:none!important}@media(max-width:700px){.arena-gate{padding:35px 24px 65px}.arena-crown{font-size:40px;margin-top:23px}.arena-intro h1{font-size:55px}.arena-eyebrow{font-size:8px;letter-spacing:1.7px}.arena-lede{font-size:18px}.arena-actions{flex-direction:column}.arena-actions button{min-height:49px;width:100%}.arena-desc{font-size:12px;margin-bottom:21px}.arena-bottom{left:30px;right:30px;bottom:25px;font-size:8px;line-height:1.6}.arena-bottom span{max-width:175px;text-align:left}.menubar{height:auto;min-height:45px;padding:6px 8px;gap:1px}.brand span{font-size:9px}.brand{margin-right:5px}.menu>summary{font-size:11px;padding:6px}.arena-help{padding:8px 12px;font-size:10px}.arena-micro{gap:18px;font-size:9px}}@media(max-height:580px){.arena-gate{padding:20px 24px 35px}.arena-crown{display:none}.arena-eyebrow{margin:0 0 15px}.arena-intro h1{font-size:43px}.arena-subtitle{margin-top:12px;font-size:10px}.arena-lede{margin:15px 0 8px;font-size:18px}.arena-desc{margin-bottom:15px;font-size:11px}.arena-progress{margin:8px 0}.arena-micro{display:none}.arena-actions{flex-direction:row}.arena-bottom{bottom:13px}.arena-actions button{min-height:44px}.arena-gate::before{inset:8px}}@media(prefers-reduced-motion:reduce){.orbit-two{animation:none}}

/* Play view: one quiet header, unobstructed video, thumb-sized controls. */
html, body { overscroll-behavior: none; }
body { height: 100dvh; height: var(--arena-height, 100dvh); }
body.duel-active { --hud-height: 56px; --safe-top: env(safe-area-inset-top, 0px); background: #090e1b; }
#screens, #screens canvas, .touch-controls, .touch-controls * { touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.arena-hud { flex: 0 0 auto; min-height: calc(var(--hud-height) + var(--safe-top)); padding: calc(4px + var(--safe-top)) max(16px, env(safe-area-inset-right)) 4px max(16px, env(safe-area-inset-left)); display: flex; align-items: center; justify-content: space-between; gap: 12px; background: #101728; border-bottom: 1px solid #d8c79620; z-index: 302; }
.arena-session { display: flex; align-items: center; gap: 12px; min-width: 0; }
.arena-hud-crown { color: #d8c796; font-size: 27px; }
.arena-session b { display: block; font-size: 10px; color: #e5d8b5; letter-spacing: 1.6px; }
.arena-session span:not(.arena-hud-crown) { display: block; font-size: 11px; color: #93a4bd; margin-top: 4px; }
.arena-hud-actions { display: flex; gap: 8px; }
.arena-hud button { min-height: 44px; min-width: 44px; border: 1px solid #8291b22e; border-radius: 10px; padding: 0 14px; color: #dce2f0; background: #1b253a; font: 600 12px system-ui; cursor: pointer; }
.arena-hud #arena-invite { color: #e6d9b9; border-color: #d8c79645; }
.duel-active .menubar { display: none; }
.duel-active #screens { padding: 14px; background: radial-gradient(ellipse at 50% 40%, #202a43, #090e1b 75%); gap: 12px; }
.duel-active .screen-cell { border-radius: 8px; outline: none; background: #000; }
.host-session .screen-tag { display: none; }
.host-session .arena-host-hidden { display: none !important; }
.duel-active .overlay, .duel-active .touch-pause, .duel-active .touch-note { display: none !important; }
.arena-menu-shade { position: fixed; inset: calc(var(--hud-height) + var(--safe-top)) 0 0; background: #020713aa; z-index: 300; }
.duel-active.arena-menu-open .menubar { display: flex !important; position: fixed; z-index: 301; top: calc(var(--hud-height) + var(--safe-top)); right: env(safe-area-inset-right, 0px); bottom: env(safe-area-inset-bottom, 0px); width: min(390px, 100%); height: auto; overflow-y: auto; overscroll-behavior: contain; flex-direction: column; flex-wrap: nowrap; align-items: stretch; padding: 18px; gap: 6px; box-shadow: -12px 0 48px #0006; }
.duel-active .menubar .brand { display: none; }
.duel-active .menubar .arena-toolbar { margin: 0 0 8px; min-height: 44px; }
.duel-active .menu > summary { min-height: 44px; padding: 12px; font-size: 14px; }
.duel-active .menu-items { position: static; min-width: 0; width: 100%; box-shadow: none; }
.duel-active .menu-items button { min-height: 44px; font-size: 14px; }
.duel-active .menu-note { white-space: normal; line-height: 1.5; }
.duel-active .status { margin: 12px 0; max-width: none; white-space: normal; flex-shrink: 0; line-height: 1.5; }
.duel-active .arena-help { order: 0; font-size: 12px; line-height: 1.6; border: 1px solid #d8c79620; border-radius: 8px; padding: 12px; }
.duel-active .arena-help button { min-width: 36px; min-height: 44px; }
/* Quiet, native-style overlay. Opacity affects the artwork, never hit areas. */
.duel-active .touch-controls { --touch-opacity: .25; gap: 0; padding: 0; background: transparent; border: 0; }
.duel-active .touch-btn {
  position: relative; isolation: isolate; appearance: none; -webkit-appearance: none;
  padding: 0; color: #fff; background: transparent; border: 0; box-shadow: none;
  opacity: var(--touch-opacity); font: 500 22px/1 system-ui, sans-serif;
  text-shadow: 0 1px 3px #0009; transition: opacity 120ms ease, transform 90ms ease;
}
.duel-active .touch-btn::before {
  content: ""; position: absolute; z-index: -1; inset: 4px; border: 1.5px solid #fff;
  border-radius: inherit; background: #ffffff06; box-shadow: 0 1px 3px #0007, inset 0 1px 2px #0003;
  pointer-events: none;
}
.duel-active .touch-btn.pressed {
  opacity: .85; color: #fff; background: transparent; border: 0; box-shadow: none;
  transform: scale(.96); transition-duration: 25ms;
}
.duel-active .touch-btn.pressed::before { background: #ffffff24; }
.duel-active .touch-btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; opacity: 1; }
.duel-active .touch-dpad { position: relative; pointer-events: auto; gap: 0; }
.duel-active .touch-dpad::before {
  content: ""; position: absolute; inset: 3px; background: url("touch-dpad.svg") center / contain no-repeat;
  opacity: var(--touch-opacity); pointer-events: none; filter: drop-shadow(0 1px 2px #0007);
}
.duel-active .touch-dpad .touch-btn { border-radius: 10px; }
.duel-active .touch-dpad .touch-btn::before { border: 0; background: transparent; box-shadow: none; inset: 5px; }
.duel-active .touch-dpad .touch-btn.pressed::before { background: #ffffff24; }
.duel-active .dp-center { background: transparent; }
.touch-chevron { display: block; width: 8px; height: 8px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; pointer-events: none; }
.dp-up .touch-chevron { transform: translateY(2px) rotate(-45deg); }
.dp-right .touch-chevron { transform: translateX(-2px) rotate(45deg); }
.dp-down .touch-chevron { transform: translateY(-2px) rotate(135deg); }
.dp-left .touch-chevron { transform: translateX(2px) rotate(-135deg); }
.duel-active .touch-center-row { position: absolute; bottom: calc(6px + env(safe-area-inset-bottom, 0px)); left: 50%; transform: translateX(-50%); gap: 12px; }
.duel-active .touch-meta { height: 44px; min-height: 44px; width: 68px; border-radius: 999px; font-size: 9px; font-weight: 600; letter-spacing: 1px; }
.duel-active .touch-meta::before { inset: 10px 2px; border-width: 1px; }
.duel-active .touch-shoulder { height: 48px; width: 88px; border-radius: 999px; font-size: 16px; }
.duel-active .touch-shoulder::before { inset: 6px 2px; }
.duel-active .touch-top-center { position: absolute; left: 50%; transform: translateX(-50%); top: 0; }
.duel-active .touch-player-picker button { min-height: 44px; min-width: 44px; background: #ffffff08; border-color: #ffffff30; color: #ffffff70; }
.duel-active .touch-player-picker button.active { background: #ffffff16; border-color: #ffffff70; color: #fff; }
.touch-appearance { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 12px; padding: 12px; color: #dce2f0; font: 500 13px/1.5 system-ui, sans-serif; }
.touch-appearance output { color: #aab8ce; font-variant-numeric: tabular-nums; }
.touch-appearance input { grid-column: 1 / -1; width: 100%; min-width: 0; height: 44px; margin: 0; accent-color: #d8c796; touch-action: pan-y; }
.touch-appearance small { grid-column: 1 / -1; color: #93a4bd; font-size: 11px; font-weight: 400; }
@media (prefers-reduced-motion: reduce) { .duel-active .touch-btn { transition: none; } }
.arena-menu-open .touch-controls { visibility: hidden; }
.online-invite-url, #online-slot { font-size: 16px; } /* no iOS focus zoom */
.online-qr-panel, .pause-panel, .remap-panel { max-height: calc(var(--arena-height, 100dvh) - 32px); }
.online-qr-actions button { min-height: 44px; }

/* Landscape: controls float over the edges; no rails shrinking the game. */
@media (orientation: landscape) {
  .duel-active.touch-enabled { --pad: clamp(44px, 6vw, 56px); }
  .duel-active.touch-enabled #screens { padding: 0 env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px); background: #000; }
  .duel-active.touch-enabled .screen-cell { border-radius: 0; }
  .duel-active .touch-controls { top: calc(var(--hud-height) + var(--safe-top)); bottom: 0; left: env(safe-area-inset-left, 0px); right: env(safe-area-inset-right, 0px); }
  .duel-active .touch-top { position: absolute; top: 8px; left: 18px; right: 18px; }
  .duel-active .touch-main { position: absolute; inset: 0; }
  .duel-active .touch-dpad { position: absolute; left: 14px; bottom: calc(32px + env(safe-area-inset-bottom, 0px)); grid-template-columns: repeat(3, var(--pad)); grid-template-rows: repeat(3, var(--pad)); }
  .duel-active .touch-actions { position: absolute; right: 18px; bottom: calc(36px + env(safe-area-inset-bottom, 0px)); grid-template-columns: repeat(2, clamp(56px, 8vw, 72px)); grid-template-rows: repeat(2, clamp(56px, 8vw, 72px)); gap: 4px; }
}
/* Portrait: comfortable thumb space, without a solid controller panel. */
@media (orientation: portrait) {
  .duel-active.touch-enabled { --pad: clamp(44px, 12vw, 56px); --deck: max(clamp(250px, 36dvh, 300px), calc(var(--pad) * 3 + 116px)); }
  .duel-active.touch-enabled #screens { margin-bottom: calc(var(--deck) + env(safe-area-inset-bottom, 0px)); padding: 8px max(8px, env(safe-area-inset-right)) 8px max(8px, env(safe-area-inset-left)); background: transparent; }
  .duel-active .touch-controls { height: calc(var(--deck) + env(safe-area-inset-bottom, 0px)); border-radius: 0; }
  .duel-active .touch-top { position: absolute; top: 4px; left: max(18px, env(safe-area-inset-left)); right: max(18px, env(safe-area-inset-right)); }
  .duel-active .touch-main { position: absolute; left: max(14px, env(safe-area-inset-left)); right: max(18px, env(safe-area-inset-right)); bottom: calc(58px + env(safe-area-inset-bottom, 0px)); align-items: center; }
  .duel-active .touch-dpad { grid-template-columns: repeat(3, var(--pad)); grid-template-rows: repeat(3, var(--pad)); }
  .duel-active .touch-actions { grid-template-columns: repeat(2, clamp(56px, 16vw, 72px)); grid-template-rows: repeat(2, clamp(56px, 16vw, 72px)); gap: 4px; }
}
@media (max-height: 440px) and (orientation: landscape) {
  body.duel-active { --hud-height: 48px; }
  .arena-hud { padding-top: var(--safe-top); padding-bottom: 0; }
  .duel-active.touch-enabled { --pad: 44px; }
  .duel-active .touch-dpad { bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
  .duel-active .touch-actions { bottom: calc(14px + env(safe-area-inset-bottom, 0px)); grid-template-columns: repeat(2, 60px); grid-template-rows: repeat(2, 60px); }
  .duel-active .touch-top { top: 2px; }
}
@media (max-width: 600px) {
  .arena-hud { gap: 6px; padding-left: max(10px, env(safe-area-inset-left)); padding-right: max(10px, env(safe-area-inset-right)); }
  .arena-hud-crown { display: none; }
  .arena-session b { letter-spacing: .8px; font-size: 9px; }
  .arena-session span:not(.arena-hud-crown) { font-size: 10px; }
  .arena-hud-actions { gap: 4px; }
  .arena-hud button { padding: 0 8px; font-size: 11px; }
}