@font-face {
  font-family: Caesar;
  src: url('/fonts/caesar.otf') format('opentype');
  font-display: swap;
}
@font-face {
  font-family: 'Caesar Dressing Cyrillic';
  src: url('/fonts/caesar.otf') format('opentype');
  font-display: swap;
}

:root { color-scheme: dark; font-family: Arial, sans-serif; color: #fff; background: #171217; }
* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; }
body { overflow-x: hidden; }
.spectator { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.stage { position: relative; width: min(100vw, 1920px, calc((100vh - 76px) * 1.77778)); aspect-ratio: 16 / 9; overflow: hidden; background: #261e21; }
#arena { position: absolute; inset: 0; background: url('/arena/assets/Arena_1.png') center / 100% 100% no-repeat; }
#arena canvas { display: block; }
#scoreboard { display: none; position: absolute; z-index: 2; inset: 0 0 auto; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: clamp(8px, 2vw, 36px); align-items: start; padding: clamp(12px, 3vw, 56px); pointer-events: none; }
.fighter-card { min-width: 0; max-width: 410px; text-shadow: 2px 2px 4px #000, 0 0 9px #000; }
.fighter-b { justify-self: end; text-align: right; }
.fighter-name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: bold clamp(18px, 2.6vw, 42px) Caesar, Georgia, serif; }
.fighter-a .fighter-name { color: #ff6b6b; }
.fighter-b .fighter-name { color: #4d96ff; }
.bar { height: clamp(14px, 2.2vw, 40px); margin: 10px 0 4px; padding: 2px; background: rgb(0 0 0 / 80%); border: 2px solid rgb(255 255 255 / 35%); }
.bar span { display: block; width: 100%; height: 100%; background: #8fbf8a; transition: width .12s linear; }
.fighter-b .bar span { margin-left: auto; }
.hp { font: bold clamp(14px, 1.5vw, 24px) Arial, sans-serif; }
.equipment, .resources, .status-line { margin-top: 5px; font-size: clamp(11px, 1vw, 17px); color: #f5eedc; }
.resources { color: #d9b678; }
.status-line { color: #f4a8a0; }
.center-score { display: flex; flex-direction: column; align-items: center; gap: 6px; padding-top: 4px; text-shadow: 1px 2px 4px #000; }
.versus { font: bold clamp(16px, 2vw, 28px) Caesar, Georgia, serif; color: #eacb8b; }
.clock { padding: 8px 12px; border: 2px solid rgb(255 255 255 / 30%); border-radius: 10px; background: rgb(0 0 0 / 55%); font: bold clamp(15px, 1.7vw, 26px) Arial, sans-serif; white-space: nowrap; }
.announcements { display: none; position: absolute; z-index: 2; bottom: 3%; left: 5%; width: 90%; text-align: center; pointer-events: none; text-shadow: 1px 2px 5px #000, 0 0 12px #000; }
#result { font: bold clamp(20px, 2.5vw, 40px) Caesar, Georgia, serif; color: #f5cf87; }
#event { margin-top: 7px; font-size: clamp(12px, 1.2vw, 18px); color: #f5e9d6; }
#error { position: absolute; z-index: 3; bottom: 12%; left: 10%; width: 80%; margin: 0; text-align: center; color: #ff9d96; font-weight: bold; white-space: pre-wrap; text-shadow: 1px 2px 5px #000; pointer-events: none; }
.stats[hidden] { display: none; }
.audio-controls { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px 22px; min-height: 76px; padding: 12px 20px; color: #f5e9d6; }
.audio-controls label { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; }
.audio-controls input { width: 100px; accent-color: #d9b678; }
.audio-controls button { padding: 7px 12px; border: 1px solid #bd9a63; border-radius: 4px; background: #302b32; color: inherit; font: inherit; cursor: pointer; }
.audio-controls button[aria-pressed="true"] { background: #916937; }
html[data-arena-mode="obs"] { background: transparent; }
html[data-arena-mode="obs"] body { background: transparent; overflow: hidden; }
html[data-arena-mode="obs"] .spectator { justify-content: flex-start; }
html[data-arena-mode="obs"] .stage { width: min(100vw, calc(100vh * 1.77778)); background: transparent; }
html[data-arena-mode="obs"] #arena { background: transparent; }
html[data-arena-mode="obs"] .audio-controls { display: none; }
@font-face { font-family: 'Arena Trajan'; src: url('/fonts/Trajan%20Pro%203%20Regular.otf') format('opentype'); font-display: swap; }
@font-face { font-family: 'Arena Museo'; src: url('/fonts/SchuelerNeuerVerbessert-Regular.otf') format('opentype'); font-display: swap; }
@font-face { font-family: 'Arena Cormorant'; src: url('/fonts/CormorantInfant-Medium.ttf') format('truetype'); font-display: swap; }
:root { --bg: #0d0a08; --card: #1a1410; --iron: #2a221a; --border: #3a2f23; --gold: #c9a96e; --dim: #8b7355; --text: #d4c5a9; --muted: #8b8578; --blood: #8b0000; background: var(--bg); color: var(--text); font-family: 'Arena Museo', Georgia, serif; }
html.theme-steel { --bg: #0c0e10; --card: #15181b; --iron: #20262b; --border: #2c333a; --gold: #9fb0bd; --dim: #6b7884; --text: #c3c9cf; --muted: #8b939b; --blood: #9a3b3b; }
body { background: var(--bg); }
button, input { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .55; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.spectator { display: block; min-height: 100vh; }
.arena-header { width: 100%; border-bottom: 1px solid var(--border); background: var(--card); }
.arena-header-inner { max-width: 1920px; margin: auto; padding: 14px clamp(16px, 3vw, 40px); display: flex; align-items: center; flex-wrap: wrap; gap: 14px 28px; }
h2, .state-pill, .live-badge, .arena-schedule strong { font-family: 'Arena Trajan', Georgia, serif; }
.arena-header nav, .header-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.arena-header nav a { color: var(--dim); text-decoration: none; padding: 7px 9px; border: 1px solid var(--border); border-radius: 3px; font-size: 12px; }
.arena-header nav a:hover { color: var(--gold); }
.header-actions { margin-left: auto; }
.live-badge { color: var(--gold); font-size: 11px; letter-spacing: .09em; text-transform: uppercase; }
.viewer-count, .eyebrow { color: var(--dim); font-size: 12px; }
.public-ui button { color: var(--gold); border: 1px solid var(--border); background: var(--iron); border-radius: 4px; padding: 8px 12px; }
.public-ui button:not(:disabled):hover { border-color: var(--gold); background: var(--card); }
.icon-button { display: inline-grid; place-items: center; width: 36px; height: 34px; padding: 6px !important; }
.icon-button svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
#arena-settings-toggle svg { fill: currentColor; stroke: none; }
#atmosphere-mute .sound-off, #atmosphere-mute[aria-pressed='true'] .sound-on { display: none; }
#atmosphere-mute[aria-pressed='true'] .sound-off { display: block; }
.arena-layout { width: min(100%, 1920px); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(290px, 350px); align-items: start; gap: 16px; padding: 16px; }
.arena-main { min-width: 0; }
.arena-main .stage { width: 100%; border: 1px solid var(--border); box-shadow: 0 12px 30px #0008; }
.replay-controls { margin-top: 12px; padding: 16px 20px; display: grid; gap: 12px; }
.replay-controls[hidden] { display: none; }
.replay-controls-heading, .replay-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; }
.replay-controls-heading strong { font: 16px 'Arena Trajan', Georgia, serif; color: var(--gold); }
.replay-controls-heading #replay-return { margin-left: auto; }
.replay-timeline { display: flex; align-items: center; gap: 12px; }
.replay-timeline input { min-width: 0; flex: 1; accent-color: var(--gold); cursor: pointer; }
.replay-timeline output { min-width: 13ch; text-align: right; font-variant-numeric: tabular-nums; color: var(--text); }
.replay-speeds { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.replay-speeds button[aria-pressed='true'] { border-color: var(--gold); background: var(--card); color: var(--text); }
.replay-actions button { font: 12px 'Arena Trajan', Georgia, serif; }
@media (max-width: 650px) { .replay-controls { padding: 14px; } .replay-timeline { flex-wrap: wrap; } .replay-timeline input { flex-basis: 100%; } .replay-timeline output { text-align: left; } }
.arena-below { display: flex; align-items: center; gap: 10px; min-height: 54px; padding: 10px 4px; }
.fighter-state-label { color: var(--text); font: 16px 'Arena Trajan', Georgia, serif; }
#fighter-arena-charges { color: var(--gold); font: 16px 'Arena Trajan', Georgia, serif; }
.fighter-charge-next { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.recovery-help { display: inline-grid; place-items: center; width: 24px; height: 24px; padding: 0 !important; border-radius: 50% !important; font-family: 'Arena Museo', Georgia, serif; }
#fighter-arena-charges[hidden], .fighter-charge-next[hidden], .recovery-help[hidden] { display: none; }
.panel { position: relative; border: 1px solid var(--border); border-radius: 6px; background: linear-gradient(180deg, color-mix(in srgb, var(--card), white 3%), var(--card) 50%); box-shadow: 0 6px 22px #0008, inset 0 0 0 4px var(--card), inset 0 0 0 5px color-mix(in srgb, var(--gold), transparent 88%); }
.panel::before, .panel::after { content: ''; position: absolute; width: 7px; height: 7px; border-radius: 50%; background: var(--dim); box-shadow: inset 1px 1px 2px #fff5, 0 1px 2px #000; pointer-events: none; }
.panel::before { top: 9px; left: 9px; } .panel::after { top: 9px; right: 9px; }
.panel-heading, .chat-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 13px; border-bottom: 1px solid var(--border); }
.panel-heading h2, .chat-heading h2 { margin: 3px 0 0; font-size: clamp(18px, 2vw, 24px); color: var(--gold); text-shadow: 0 0 8px color-mix(in srgb, var(--gold), transparent 60%); }
.arena-schedule { padding: 22px; margin-bottom: 18px;
  transition: opacity .36s ease-out, transform .36s ease-out, visibility .36s;
}
.arena-schedule.panel-pending { opacity: 0; visibility: hidden; transform: translateY(12px); }
@media (prefers-reduced-motion: reduce) {
  .arena-schedule { transition: none; }
}
.schedule-hero { padding-bottom: 15px; border-bottom: 1px solid var(--border); }
.schedule-kicker { display: block; color: var(--dim); font: 12px 'Arena Trajan', Georgia, serif; letter-spacing: .08em; }
.schedule-matchup { max-width: 100%; margin: 7px 0 0; color: var(--gold); font: clamp(22px, 3vw, 34px)/1.18 'Arena Trajan', Georgia, serif; overflow-wrap: anywhere; text-wrap: balance; text-shadow: 0 0 8px color-mix(in srgb, var(--gold), transparent 65%); }
.schedule-matchup:empty { display: none; }
.schedule-timing { margin: 10px 0 0; }
.schedule-timing strong, .schedule-timing small { display: block; }
.schedule-timing strong { color: var(--text); font: clamp(16px, 2vw, 20px) 'Arena Trajan', Georgia, serif; }
.schedule-timing small { margin-top: 5px; color: var(--muted); font-size: 12px; }
.schedule-timezone-hint { display: block; margin-top: 5px; color: var(--muted); font-size: 11px; }
.arena-schedule ol { list-style: none; padding: 0; margin: 18px 0 0; }
.arena-schedule > ol > li { display: grid; grid-template-columns: minmax(72px, auto) minmax(0, 1fr) auto; align-items: center; gap: 8px 14px; padding: 14px; margin: 8px 0; border: 1px solid var(--border); border-left: 4px solid var(--dim); background: var(--iron); border-radius: 4px; }
.arena-schedule > ol > li.slot-free { padding: 10px 12px; gap: 4px 12px; border-color: color-mix(in srgb, var(--border), transparent 50%); border-left-width: 1px; background: color-mix(in srgb, var(--bg) 76%, var(--iron)); color: var(--muted); }
.arena-schedule > ol > li.slot-free.slot-next { box-shadow: none; }
.arena-schedule > ol > li.slot-free .slot-time, .arena-schedule > ol > li.slot-free .slot-heading { color: var(--muted); text-shadow: none; }
.arena-schedule > ol > li.slot-free .slot-meta { color: var(--dim); font-size: 14px; }
.arena-schedule > ol > li.slot-free > button { min-height: 44px; min-width: 148px; background: var(--player-gold); color: var(--bg); border-color: var(--player-gold); font-weight: 700; }
.arena-schedule > ol > li.slot-free > button:disabled { background: var(--player-gold); color: var(--bg); border-color: var(--player-gold); opacity: .7; }
.arena-schedule > ol > li.slot-free > button:not(:disabled):hover { background: color-mix(in srgb, var(--player-gold), white 18%); color: var(--bg); border-color: var(--player-gold); }
.arena-schedule > ol > li.slot-free > button:focus-visible { outline: 2px solid var(--player-gold); outline-offset: 3px; }
.arena-schedule { --player-gold: #c9a96e; }
html.theme-steel .arena-schedule { --player-gold: #c9a94e; }
.arena-schedule > ol > li.slot-player { border: 1px solid var(--player-gold); border-left: 4px solid var(--player-gold); background: color-mix(in srgb, var(--iron), var(--player-gold) 11%); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--player-gold), transparent 72%); }
.arena-schedule > ol > li.slot-player .slot-fighters { color: var(--text); font-weight: 600; }
.slot-player-name { color: var(--player-gold); font-weight: 700; }
.slot-player-name, .chat-author { display: inline-flex; align-items: center; vertical-align: baseline; gap: 4px; max-width: 100%; }
.public-ui .prestige-badge-button { position: relative; display: inline-block; flex: 0 0 28px; width: 28px; height: 18px; padding: 0; margin: 0 2px 0 0; border: 0; background: none; vertical-align: middle; overflow: visible; }
.public-ui .prestige-badge-button:hover { border: 0; background: none; }
.prestige-avatar { position: absolute; left: 0; top: 50%; width: 28px; height: 28px; max-width: none; max-height: none; object-fit: contain; transform: translateY(-50%); filter: drop-shadow(0 1px 2px #0009); }
.prestige-dialog { width: min(360px, calc(100% - 24px)); max-height: calc(100% - 24px); overflow-y: auto; padding: 24px; color: var(--text); background: var(--card); border: 1px solid var(--gold); border-radius: 8px; box-shadow: 0 20px 50px #000c; text-align: center; }
.prestige-dialog::backdrop { background: #000b; }
.prestige-dialog .panel-heading { text-align: left; }
.prestige-dialog .panel-heading h2 { font-size: 16px; }
.prestige-dialog-image { display: block; width: min(180px, 55vw); height: min(180px, 55vw); object-fit: contain; margin: 20px auto; filter: drop-shadow(0 4px 10px #0009); }
.prestige-dialog p { margin: 0; font: italic 17px/1.4 'Arena Cormorant', Georgia, serif; }
.arena-schedule > ol > li.slot-waiting { border-style: dashed; border-left-style: solid; background: color-mix(in srgb, var(--iron), var(--player-gold) 7%); }
.arena-schedule > ol > li.slot-waiting .slot-heading { color: var(--text); }
.arena-schedule > ol > li.slot-automatic { border-left-color: var(--muted); opacity: .9; }
.arena-schedule > ol > li.slot-next { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold), transparent 45%); }
.slot-time { grid-row: 1 / span 2; color: var(--gold); font: 21px 'Arena Trajan', Georgia, serif; }
.slot-heading { color: var(--gold); font: 12px 'Arena Trajan', Georgia, serif; letter-spacing: .05em; }
.slot-fighters { min-width: 0; overflow-wrap: anywhere; font: 14px 'Arena Museo', Georgia, serif; }
.slot-fighters .versus-mark { padding: 0 7px; color: var(--dim); }
.arena-schedule > ol .slot-meta { grid-column: 2; color: var(--muted); font: italic 15px 'Arena Cormorant', Georgia, serif; }
.arena-schedule > ol > li > button { grid-column: 3; grid-row: 1 / span 3; }
.arena-schedule > ol > li > button:disabled { background: var(--iron); color: var(--muted); border-color: var(--border); }
.arena-schedule > ol > li > button, .dialog-actions #signup-submit { background: var(--gold); color: var(--bg); border-color: var(--gold); font: 12px 'Arena Trajan', Georgia, serif; }
.schedule-notice, #signup-feedback { color: #e8a598; min-height: 1em; }
.next-opportunity { display: grid; gap: 5px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
.next-opportunity button { justify-self: start; }
.next-opportunity small { color: var(--muted); font: italic 13px 'Arena Cormorant', Georgia, serif; }
.arena-history-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.past-fights { margin-top: 14px; border-top: 1px solid var(--border); padding-top: 14px; }
.past-fights h3 { color: var(--gold); font: 16px 'Arena Trajan', Georgia, serif; }
.past-fights ul { list-style: none; margin: 0; padding: 0; }
.past-fight-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px; border-bottom: 1px solid var(--border); }
.past-fight-row strong { flex: 1 1 220px; }
.past-fight-matchup { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px 4px; min-width: 0; }
.past-fight-row .history-participant { overflow-wrap: anywhere; }
.past-fight-row small { flex: 1 1 150px; }
.past-fight-row .replay-copy { min-width: 34px; padding: 5px !important; font: 18px/1 sans-serif; }
.clipboard-fallback { position: fixed; top: 0; left: -10000px; opacity: 0; }
.arena-schedule .slot-deadline { grid-column: 2; color: var(--gold); font-size: 12px; }
.signup-fighter { background: var(--iron); border: 1px solid var(--border); padding: 12px; color: var(--gold); overflow-wrap: anywhere; }
.arena-stand-emotes { position: absolute; z-index: 5; top: 2%; left: 8%; width: 84%; height: 55%; pointer-events: none; }
.arena-stand-emotes .stand-emote { position: absolute; left: var(--emote-x); top: var(--emote-y); color: #fff; font: clamp(24px, 3.2vw, 54px) sans-serif; filter: drop-shadow(0 3px 4px #000c); transform-origin: center; animation: stand-emote-rise 3.2s ease-out forwards; }
@keyframes stand-emote-rise { 0% { opacity: 0; transform: translate3d(0,18px,0) rotate(var(--emote-tilt)) scale(.65); } 12%, 55% { opacity: 1; } 100% { opacity: 0; transform: translate3d(var(--emote-drift),-260px,0) rotate(calc(var(--emote-tilt) * -1)) scale(var(--emote-scale)); } }
@media (prefers-reduced-motion: reduce) { .arena-stand-emotes .stand-emote { animation-name: stand-emote-fade-reduced; } }
@keyframes stand-emote-fade-reduced { 0% { opacity: 0; } 15%, 70% { opacity: 1; } 100% { opacity: 0; } }
.arena-sidebar { position: sticky; top: 16px; height: min(770px, calc(100vh - 32px)); min-height: 400px; display: flex; flex-direction: column; padding: 20px 14px 14px; }
.chat-heading { padding: 0 6px 14px; }
.chat-heading h2 { font-size: 21px; }
.chat-content { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.chat-status { color: var(--muted); font-size: 12px; margin: 12px 6px; }
.chat-messages { flex: 1; overflow-y: auto; min-height: 0; padding: 0 5px; margin: 0; list-style: none; scrollbar-color: var(--border) transparent; }
.chat-messages li { padding: 7px 3px; border-bottom: 1px solid var(--border); font-size: 13px; line-height: 1.4; overflow-wrap: anywhere; }
.chat-messages strong { color: var(--chat-author-color, var(--gold)); margin-right: 5px; }
.chat-author .prestige-badge-button { flex-basis: 28px; }
.chat-message-text { overflow-wrap: anywhere; }
.chat-message-text a { color: #9ed7ff; text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor, transparent 35%); }
.chat-message-text a:visited { color: #d3b4ff; }
.chat-mention { color: #f2cf7a; font-weight: 700; }
.chat-mention.is-own-mention { color: #ffe37d; background: color-mix(in srgb, #ffe37d, transparent 88%); border-radius: 3px; }
.chat-reply-action { margin-left: 7px; padding: 1px 5px !important; color: var(--muted) !important; font-size: 11px; }
.chat-messages time { float: right; color: var(--muted); font-size: 11px; }
.chat-compose { position: relative; border-top: 1px solid var(--border); padding-top: 12px; }
.emote-row { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 10px; }
.emote-row button { min-width: 34px; padding: 5px 7px; font: 20px sans-serif; filter: grayscale(.2); }
#chat-form { position: relative; display: flex; align-items: stretch; gap: 6px; }
.chat-input-wrap { position: relative; display: flex; flex: 1; min-width: 0; }
.tribune-send, .chat-emoji-toggle { flex: 0 0 40px; width: 40px; padding: 7px !important; }
.tribune-send svg { display: block; width: 21px; height: 21px; margin: auto; fill: currentColor; }
#chat-input { width: 100%; min-width: 0; flex: 1; padding: 9px; background: var(--iron); border: 1px solid var(--border); color: var(--text); border-radius: 4px; }
.chat-compose small { display: block; color: var(--muted); margin-top: 8px; }
.chat-reply { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 7px; padding: 5px 8px; border-left: 2px solid var(--gold); background: var(--iron); color: var(--muted); font-size: 12px; }
.chat-reply[hidden], .chat-mentions[hidden], .chat-emoji-picker[hidden] { display: none; }
.chat-reply button { padding: 1px 6px !important; font-size: 16px; line-height: 1; }
.chat-mentions { position: absolute; z-index: 12; right: 0; bottom: calc(100% + 5px); left: 0; max-height: 190px; overflow-y: auto; padding: 4px; border: 1px solid var(--border); border-radius: 5px; background: var(--card); box-shadow: 0 8px 24px #000a; }
.chat-mention-option { display: block; width: 100%; padding: 7px 9px !important; text-align: left; overflow-wrap: anywhere; }
.chat-mention-option[aria-selected="true"] { background: var(--border); color: var(--text); }
.chat-emoji-picker { position: absolute; z-index: 13; right: 44px; bottom: calc(100% + 6px); display: flex; flex-direction: column; gap: 8px; max-width: min(228px, calc(100vw - 42px)); padding: 8px; border: 1px solid var(--border); border-radius: 6px; background: var(--card); box-shadow: 0 8px 24px #000a; }
.chat-emoji-group-title { margin-bottom: 4px; color: var(--muted); font-size: 11px; }
.chat-emoji-grid { display: grid; grid-template-columns: repeat(5, 40px); gap: 4px; }
.chat-emoji-picker button { display: grid; place-items: center; min-width: 40px; min-height: 40px; padding: 4px !important; font: 23px/1 sans-serif; }
.chat-custom-emote { display: block; width: 28px; height: 28px; object-fit: contain; }
.chat-message-emote { display: inline-block; width: 28px; height: 28px; margin: 0 2px; object-fit: contain; vertical-align: middle; }
@media (max-width: 420px) { .tribune-send, .chat-emoji-toggle { flex-basis: 38px; width: 38px; } .chat-emoji-grid { grid-template-columns: repeat(5, 38px); } .chat-emoji-picker { right: 42px; } }
.arena-sidebar.collapsed { height: auto; min-height: 0; }
.arena-sidebar.collapsed .chat-content { display: none; }
.signup-dialog { width: min(440px, calc(100% - 24px)); max-height: calc(100% - 30px); overflow-y: auto; color: var(--text); background: var(--card); border: 1px solid var(--gold); border-radius: 8px; box-shadow: 0 20px 50px #000c; padding: 24px; }
.signup-dialog::backdrop { background: #000b; }
.signup-dialog p { font-size: 14px; }
.signup-option { display: flex; gap: 12px; align-items: start; margin: 10px 0; padding: 13px; background: var(--iron); border: 1px solid var(--border); border-radius: 4px; cursor: pointer; }
.signup-option:has(input:checked) { border-color: var(--gold); }
.signup-option:has(input:disabled) { opacity: .6; cursor: not-allowed; }
.signup-option strong, .signup-option small { display: block; }
.signup-option strong { color: var(--gold); } .signup-option small { margin-top: 5px; color: var(--muted); }
.signup-option input { accent-color: var(--gold); }
.dialog-actions { display: flex; justify-content: end; gap: 8px; }
.arena-settings, .recovery-dialog { width: min(420px, calc(100% - 24px)); padding: 22px; color: var(--text); background: var(--card); border: 1px solid var(--gold); border-radius: 7px; box-shadow: 0 18px 48px #000c; }
.arena-settings::backdrop, .recovery-dialog::backdrop { background: #000a; }
.recovery-dialog p { color: var(--text); line-height: 1.55; }
.recovery-dialog-remaining { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-top: 13px; border-top: 1px solid var(--border); color: var(--muted); }
.recovery-dialog-remaining strong { width: 8ch; color: var(--gold); font: 20px 'Arena Trajan', ui-monospace, monospace; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.arena-settings section { padding: 15px 2px 5px; border-bottom: 1px solid var(--border); }
.arena-settings section:last-child { border-bottom: 0; }
.arena-settings h3 { margin: 0 0 10px; color: var(--gold); font: 14px 'Arena Trajan', Georgia, serif; }
.arena-settings label { display: grid; grid-template-columns: 95px minmax(0,1fr); align-items: center; gap: 12px; margin: 11px 0; color: var(--dim); }
.arena-settings input[type='range'] { width: 100%; accent-color: var(--gold); }
.settings-state { margin: -4px 0 10px; color: var(--muted); font-size: 12px; }
.playback-state { position: absolute; z-index: 7; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: rgb(13 10 8 / 78%); color: var(--gold); font: 18px 'Arena Trajan', Georgia, serif; }
.playback-state[hidden] { display: none; }
.arena-spinner { width: 34px; height: 34px; border: 3px solid color-mix(in srgb, var(--gold), transparent 70%); border-top-color: var(--gold); border-radius: 50%; animation: arena-spin .8s linear infinite; }
@keyframes arena-spin { to { transform: rotate(360deg); } }
.past-loading { display: flex; align-items: center; gap: 10px; color: var(--muted); padding: 16px 4px; }
.past-loading .arena-spinner { width: 20px; height: 20px; }
html.arena-fullscreen-view body { overflow: hidden; }
html.arena-fullscreen-view .arena-header, html.arena-fullscreen-view .arena-sidebar, html.arena-fullscreen-view .arena-below, html.arena-fullscreen-view .arena-schedule, html.arena-fullscreen-view .replay-controls, html.arena-fullscreen-view .arena-settings, html.arena-fullscreen-view .recovery-dialog { display: none !important; }
html.arena-fullscreen-view .arena-layout { display: block; width: 100vw; height: 100vh; padding: 0; }
html.arena-fullscreen-view .arena-main, html.arena-fullscreen-view .stage { width: 100vw; height: 100vh; max-width: none; aspect-ratio: auto; border: 0; }
.fullscreen-return { position: fixed; z-index: 30; top: 12px; right: 12px; }
html[data-arena-mode='obs'], html[data-arena-mode='obs'] body { background: transparent; }
html[data-arena-mode='obs'] .spectator { display: flex; justify-content: flex-start; }
html[data-arena-mode='obs'] .public-ui, html[data-arena-mode='obs'] .signup-dialog { display: none !important; }
html[data-arena-mode='obs'] .arena-layout { display: block; padding: 0; width: 100%; }
html[data-arena-mode='obs'] .arena-main .stage { width: min(100vw, calc(100vh * 1.77778)); background: transparent; border: 0; box-shadow: none; }
@media (max-width: 1000px) {
  html:not(.arena-fullscreen-view) .arena-layout { display: flex; flex-direction: column; }
  html:not(.arena-fullscreen-view) .arena-main { display: contents; }
  html:not(.arena-fullscreen-view) .arena-main .stage { order: 1; }
  html:not(.arena-fullscreen-view) .replay-controls { order: 2; width: 100%; }
  html:not(.arena-fullscreen-view) .arena-sidebar { order: 2; position: static; width: 100%; height: 480px; }
  html:not(.arena-fullscreen-view) .arena-sidebar.collapsed { height: auto; min-height: 0; padding: 10px 14px; }
  .arena-sidebar.collapsed .chat-heading { padding-bottom: 0; border-bottom: 0; }
  html:not(.arena-fullscreen-view) .arena-schedule { order: 3; }
  html:not(.arena-fullscreen-view) .arena-below { order: 4; }
}
@media (max-width: 650px) {
  .arena-header-inner { padding: 12px; } .arena-layout { padding: 8px; gap: 8px; }
  .header-actions { margin-left: 0; } .arena-header nav { flex: 1 1 auto; } .stage { width: 100vw; }
  #scoreboard { padding: 10px; gap: 5px; } .bar { margin-top: 5px; }
  .center-score { padding-top: 0; } .clock { padding: 4px; }
  .arena-schedule { padding: 16px; } .arena-below { flex-wrap: wrap; }
  .fighter-state-label { flex: 1 1 100%; }
  .schedule-matchup { font-size: clamp(20px, 7vw, 28px); }
  .arena-schedule > ol > li { grid-template-columns: 64px minmax(0,1fr); }
  .arena-schedule > ol > li > button { grid-column: 1 / -1; grid-row: auto; width: 100%; }
  .arena-schedule > ol > li.slot-free > button { grid-column: 2; justify-self: end; width: auto; max-width: 100%; }
  .slot-time { font-size: 17px; }
}