:root {
  color-scheme: dark;
  --bg: #060608;
  --surface: #111116;
  --surface-2: #181820;
  --surface-3: #20202a;
  --line: rgb(255 255 255 / 12%);
  --line-strong: rgb(255 255 255 / 22%);
  --text: #f7f7f8;
  --muted: #9a9aa6;
  --red: #d50020;
  --red-bright: #ff304d;
  --aka: #ff4d5f;
  --gold: #f0c040;
  --lime: #37e678;
  --cyan: #64b5ff;
  --warning: #ffb84d;
  --radius: 20px;
  --shadow: 0 28px 80px rgb(0 0 0 / 36%), 0 2px 10px rgb(0 0 0 / 42%);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { min-width: 320px; min-height: 100%; background: var(--bg); touch-action: manipulation; }
body { min-height: 100vh; margin: 0; overflow-x: hidden; background: var(--bg); color: var(--text); }
button, input, select, textarea, a { font: inherit; }
button, a { -webkit-tap-highlight-color: rgb(213 0 32 / 18%); }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .42; }
a { color: inherit; text-decoration: none; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
input, select, textarea { min-height: 48px; border: 1px solid var(--line-strong); border-radius: 12px; background: #0d0d12; color: var(--text); padding: 12px 14px; }
select { background-color: #0d0d12; color: var(--text); }
kbd { display: inline-flex; min-width: 28px; min-height: 26px; align-items: center; justify-content: center; border: 1px solid rgb(255 255 255 / 20%); border-bottom-color: rgb(255 255 255 / 32%); border-radius: 7px; background: rgb(255 255 255 / 7%); color: #d5d5dc; font: 600 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace; padding: 0 6px; }

.skip-link { position: fixed; z-index: 9999; top: 8px; left: 8px; transform: translateY(-150%); border-radius: 10px; background: #fff; color: #000; padding: 10px 14px; transition: transform 120ms ease; }
.skip-link:focus { transform: translateY(0); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }

.app-shell { min-height: 100vh; padding-bottom: env(safe-area-inset-bottom); background: radial-gradient(circle at 50% -20%, rgb(213 0 32 / 12%), transparent 38%), var(--bg); }
.app-shell--display { height: 100vh; overflow: hidden; }
.topbar { position: sticky; z-index: 50; top: 0; display: flex; min-height: 72px; align-items: center; justify-content: space-between; gap: 24px; border-bottom: 1px solid var(--line); background: rgb(6 6 8 / 90%); padding: 0 max(20px, calc((100vw - 1500px)/2)); backdrop-filter: blur(18px); }
.brand { display: inline-flex; min-width: 0; align-items: center; gap: 12px; }
.brand-logo { display: block; width: 46px; height: 46px; flex: 0 0 46px; object-fit: contain; }
.brand-copy { display: grid; min-width: 0; gap: 2px; text-transform: uppercase; }
.brand-copy strong { overflow: hidden; font-size: 12px; letter-spacing: .14em; text-overflow: ellipsis; white-space: nowrap; }
.brand-copy small { color: var(--red-bright); font-size: 9px; font-weight: 800; letter-spacing: .2em; }
.topnav { display: flex; align-items: center; gap: 8px; }
.topnav a { min-height: 40px; border-radius: 10px; color: #c6c6cf; font-size: 13px; padding: 11px 14px; }
.topnav a:hover, .topnav a[aria-current="page"] { background: rgb(255 255 255 / 7%); color: #fff; }

.main { width: min(1500px, calc(100% - 40px)); margin: 0 auto; padding: 22px 0 40px; }
.main--display { width: 100%; height: 100vh; padding: 0; }
.context-bar { display: flex; min-height: 54px; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 18px; }
.context-bar > div:first-child { display: grid; grid-template-columns: auto auto; align-items: center; gap: 1px 8px; }
.context-bar strong { font-size: 12px; letter-spacing: .14em; }
.context-bar small { grid-column: 2; color: var(--muted); font-size: 12px; }
.status-dot { width: 8px; height: 8px; grid-row: 1 / 3; border-radius: 50%; background: #777; box-shadow: 0 0 0 4px rgb(255 255 255 / 5%); }
.status-dot--fighting { background: var(--lime); box-shadow: 0 0 0 4px rgb(55 230 120 / 12%); }
.status-dot--paused, .status-dot--hantei { background: var(--gold); }
.status-dot--confirm, .status-dot--finished { background: var(--red-bright); }
.context-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; color: #c6c6cf; font-size: 12px; }
.context-meta > span { border: 1px solid var(--line); border-radius: 999px; padding: 7px 10px; }
.context-meta .sync-pill { border-color: rgb(55 230 120 / 25%); color: #82efa9; }

.control-layout { display: grid; grid-template-columns: minmax(0, 1fr) 310px; gap: 18px; }
.match-stage, .operator-panel { border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(180deg, rgb(255 255 255 / 3%), transparent 18%), var(--surface); box-shadow: var(--shadow); }
.match-stage { position: relative; min-width: 0; overflow: hidden; }
.fighters-grid { display: grid; grid-template-columns: 1fr 1fr; }
.fighter-card { min-width: 0; padding: 22px; }
.fighter-card--shiro { background: radial-gradient(circle at 0 0, rgb(255 255 255 / 8%), transparent 48%), #15151d; }
.fighter-card--aka { border-left: 1px solid var(--line); background: radial-gradient(circle at 100% 0, rgb(213 0 32 / 22%), transparent 55%), #170a0f; text-align: right; }
.fighter-head { display: flex; min-width: 0; align-items: flex-start; justify-content: space-between; gap: 18px; }
.fighter-card--aka .fighter-head { flex-direction: row-reverse; }
.fighter-head > div:first-child { min-width: 0; }
.side-label { display: inline-block; margin-bottom: 6px; color: var(--muted); font-size: 11px; font-weight: 850; letter-spacing: .24em; }
.fighter-head h2 { max-width: 100%; margin: 0; overflow: hidden; font-size: clamp(24px, 3vw, 42px); letter-spacing: -.035em; line-height: 1; text-overflow: ellipsis; white-space: nowrap; }
.fighter-head p { margin: 8px 0 0; overflow: hidden; color: var(--muted); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.ippon-state { display: grid; justify-items: center; gap: 7px; color: #5d5d66; font-size: 9px; letter-spacing: .16em; }
.ippon-state span { width: 28px; height: 28px; border: 2px solid rgb(255 255 255 / 13%); border-radius: 50%; background: rgb(255 255 255 / 3%); }
.ippon-state--active { color: #a7f8c2; }
.ippon-state--active span { border-color: var(--lime); background: var(--lime); box-shadow: 0 0 22px rgb(55 230 120 / 55%); }
.score-grid { display: grid; grid-template-columns: 1fr 1.5fr; gap: 12px; margin-top: 24px; }
.score-block { display: grid; min-height: 104px; align-content: start; gap: 11px; border: 1px solid var(--line); border-radius: 14px; background: rgb(0 0 0 / 12%); padding: 14px; }
.score-block > span { color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.score-block--penalty strong { min-height: 28px; overflow: hidden; color: var(--warning); font-size: 14px; line-height: 1.2; text-overflow: ellipsis; }
.score-dots, .penalty-dots { display: flex; gap: 8px; }
.fighter-card--aka .score-dots, .fighter-card--aka .penalty-dots { justify-content: flex-end; }
.score-dots i { width: 28px; height: 28px; border: 2px solid rgb(240 192 64 / 25%); border-radius: 50%; background: rgb(240 192 64 / 4%); }
.score-dots i.active { border-color: var(--gold); background: var(--gold); box-shadow: 0 0 20px rgb(240 192 64 / 38%); }
.penalty-dots i { width: 11px; height: 11px; border: 1px solid rgb(255 184 77 / 35%); border-radius: 50%; background: transparent; }
.penalty-dots i.active { background: var(--warning); box-shadow: 0 0 10px rgb(255 184 77 / 45%); }
.fighter-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 18px; }
.action { display: flex; min-height: 58px; align-items: center; justify-content: space-between; gap: 10px; border: 1px solid var(--line); border-radius: 14px; background: rgb(255 255 255 / 5%); color: #fff; padding: 11px 13px; text-align: left; transition: background 120ms ease, border-color 120ms ease, transform 80ms ease; }
.action > span { display: grid; min-width: 0; gap: 3px; }
.action > span strong { font-size: 13px; line-height: 1.1; }
.action > span small { color: var(--muted); font-size: 10px; line-height: 1.2; }
.action--primary { min-height: 68px; }
.action kbd { flex: 0 0 auto; }
.action:hover:not(:disabled) { border-color: var(--line-strong); background: rgb(255 255 255 / 9%); }
.action:active:not(:disabled) { transform: scale(.985); }
.action--score { border-color: rgb(240 192 64 / 20%); }
.action--ippon { grid-column: 1 / -1; min-height: 82px; border-color: rgb(55 230 120 / 38%); background: rgb(55 230 120 / 9%); }
.action--ippon > span strong { font-size: 18px; letter-spacing: .08em; }
.action--ippon > span small { color: #b8f4cb; font-size: 11px; }
.action--ippon:hover:not(:disabled) { border-color: rgb(55 230 120 / 58%); background: rgb(55 230 120 / 14%); }
.action--penalty { border-color: rgb(255 184 77 / 20%); }
.action--quiet { color: var(--muted); font-size: 12px; }
.action--direct { grid-column: 1 / -1; min-height: 46px; border-color: rgb(255 77 95 / 18%); color: #ffd8de; }
.action--direct small { color: var(--muted); font-size: 10px; }

.timer-panel { display: grid; place-items: center; border-top: 1px solid var(--line); background: radial-gradient(circle at 50% 15%, rgb(255 255 255 / 5%), transparent 55%), #0c0c10; padding: 20px; }
.phase-chip { border: 1px solid var(--line); border-radius: 999px; color: #bcbcc5; font-size: 10px; font-weight: 800; letter-spacing: .15em; padding: 7px 11px; text-transform: uppercase; }
.timer { margin: 4px 0 -2px; font-variant-numeric: tabular-nums; font-size: clamp(76px, 12vw, 172px); font-weight: 850; letter-spacing: -.07em; line-height: .92; text-shadow: 0 0 42px rgb(255 255 255 / 12%); }
.timer--danger { color: #ff3850; text-shadow: 0 0 50px rgb(255 56 80 / 45%); }
.timer-button, .medical-button { display: inline-flex; min-width: min(480px, 100%); min-height: 68px; align-items: center; justify-content: center; gap: 18px; border: 1px solid rgb(55 230 120 / 24%); border-radius: 16px; background: rgb(55 230 120 / 10%); color: #c8ffda; font-weight: 800; padding: 12px 20px; }
.timer-button > span, .medical-button > span { display: grid; gap: 2px; text-align: center; }
.timer-button strong, .medical-button strong { font-size: 18px; letter-spacing: .08em; }
.timer-button small, .medical-button small { color: currentColor; font-size: 10px; font-weight: 650; letter-spacing: .02em; opacity: .72; }
.timer-button--start, .timer-button--resume { border-color: rgb(55 230 120 / 32%); background: rgb(55 230 120 / 12%); color: #c8ffda; }
.timer-button--stop { border-color: rgb(240 192 64 / 36%); background: rgb(240 192 64 / 11%); color: #ffe5a0; }
.timer-button:hover:not(:disabled) { background: rgb(255 255 255 / 12%); }
.medical-button { margin-top: 8px; border-color: rgb(255 77 95 / 32%); background: rgb(255 77 95 / 9%); color: #ffb1bc; }
.medical-button--active { background: rgb(255 77 95 / 20%); }
.event-notice { display: flex; min-height: 48px; align-items: center; justify-content: center; gap: 16px; border-top: 1px solid var(--line); background: #0a0a0d; color: #dddde2; font-size: 12px; font-weight: 850; letter-spacing: .14em; padding: 10px 18px; text-align: center; text-transform: uppercase; }
.event-notice--success { color: var(--lime); }
.event-notice--warning, .event-notice--gold { color: var(--gold); }
.event-notice--danger, .event-notice--aka { color: var(--aka); }
.event-notice--shiro { color: #fff; }

.operator-panel { align-self: start; overflow: hidden; }
.operator-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line); padding: 18px; }
.operator-heading span { color: var(--red-bright); font-size: 10px; font-weight: 850; letter-spacing: .15em; text-transform: uppercase; }
.operator-heading h2 { margin: 3px 0 0; font-size: 20px; }
.operator-heading .touch-badge { border: 1px solid rgb(100 181 255 / 23%); border-radius: 999px; color: #8ec8ff; padding: 6px 8px; }
.operator-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 12px; }
.operator-actions button, .operator-actions a { display: grid; min-height: 90px; align-content: center; gap: 2px; border: 1px solid var(--line); border-radius: 12px; background: rgb(255 255 255 / 4%); color: #fff; padding: 12px; text-align: left; }
.operator-actions button:hover:not(:disabled), .operator-actions a:hover { border-color: var(--line-strong); background: rgb(255 255 255 / 7%); }
.operator-actions button > span, .operator-actions a > span { margin-bottom: 5px; color: var(--muted); font-size: 18px; }
.operator-actions strong { font-size: 13px; }
.operator-actions small { color: var(--muted); font-size: 10px; }
.operator-actions .danger-action { border-color: rgb(255 77 95 / 18%); }
.shortcuts-card { border-top: 1px solid var(--line); padding: 12px; }
.shortcuts-toggle { display: flex; width: 100%; min-height: 44px; align-items: center; justify-content: space-between; border: 0; border-radius: 10px; background: transparent; color: #cfcfd5; font-size: 12px; padding: 0 8px; }
.shortcuts-list { display: grid; gap: 8px; border-top: 1px solid var(--line); margin-top: 8px; padding: 12px 8px 4px; }
.shortcuts-list div { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--muted); font-size: 10px; }

.decision-layer, .result-layer { position: fixed; z-index: 100; inset: 0; display: grid; place-items: center; overflow: auto; overscroll-behavior: contain; background: rgb(2 2 5 / 88%); padding: 24px; backdrop-filter: blur(12px); }
dialog.decision-layer, dialog.result-layer { width: auto; max-width: none; max-height: none; margin: 0; border: 0; color: inherit; }
dialog.decision-layer:not([open]), dialog.result-layer:not([open]) { display: none; }
dialog.decision-layer::backdrop, dialog.result-layer::backdrop { background: transparent; }
.decision-card { width: min(900px, 100%); border: 1px solid var(--line-strong); border-radius: 24px; background: #0d0d12; box-shadow: 0 40px 120px rgb(0 0 0 / 55%); padding: 24px; }
.decision-card--wide { width: min(1080px, 100%); }
.decision-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.decision-head span { color: var(--red-bright); font-size: 11px; font-weight: 850; letter-spacing: .16em; text-transform: uppercase; }
.decision-head h2 { margin: 4px 0 0; font-size: clamp(34px, 6vw, 64px); letter-spacing: .08em; }
.decision-head > strong { border: 1px solid var(--line); border-radius: 999px; color: #ccc; font-size: 13px; padding: 8px 11px; }
.decision-help { max-width: 740px; margin: 8px 0 24px; color: var(--muted); font-size: 14px; line-height: 1.55; }
.vote-grid, .weigh-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.vote-grid--two { grid-template-columns: repeat(2, 1fr); }
.vote-option { display: grid; min-height: 230px; place-items: center; align-content: center; gap: 10px; border: 1px solid color-mix(in srgb, var(--vote-color) 28%, transparent); border-radius: 18px; background: color-mix(in srgb, var(--vote-color) 5%, #0c0c11); }
.vote-option > span { color: var(--vote-color); font-size: 12px; font-weight: 850; letter-spacing: .16em; }
.vote-option > strong { color: var(--vote-color); font-variant-numeric: tabular-nums; font-size: 90px; line-height: .9; }
.vote-option > div { display: flex; gap: 8px; }
.vote-option button { width: 52px; height: 52px; border: 1px solid var(--line-strong); border-radius: 12px; background: rgb(255 255 255 / 5%); color: #fff; font-size: 24px; }
.decision-footer { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }
.weigh-option { display: grid; min-height: 220px; place-items: center; align-content: center; gap: 7px; border: 1px solid var(--line); border-radius: 18px; background: #111117; color: #fff; padding: 18px; text-align: center; }
.weigh-option:hover { border-color: #fff; }
.weigh-option span { font-size: 12px; font-weight: 850; letter-spacing: .16em; }
.weigh-option strong { font-size: 26px; line-height: 1.05; }
.weigh-option small { color: var(--muted); }
.weigh-option--aka { border-color: rgb(255 77 95 / 26%); background: rgb(213 0 32 / 9%); }
.weigh-option--shiro { border-color: rgb(255 255 255 / 24%); }
.weigh-option--none { border-color: rgb(240 192 64 / 25%); color: #ffe39a; }

.button-primary, .button-secondary, .button-danger { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; border: 1px solid transparent; border-radius: 12px; font-weight: 800; padding: 0 18px; }
.button-primary { background: #fff; color: #080808; }
.button-secondary { border-color: var(--line-strong); background: rgb(255 255 255 / 4%); color: #fff; }
.button-danger { background: var(--red); color: #fff; }

.result-layer { background: rgb(1 1 4 / 94%); }
.result-layer--aka { background: radial-gradient(circle at 50% 50%, rgb(213 0 32 / 32%), rgb(1 1 4 / 96%) 58%); }
.result-layer--shiro { background: radial-gradient(circle at 50% 50%, rgb(255 255 255 / 15%), rgb(1 1 4 / 96%) 58%); }
.result-card { display: grid; width: min(760px, 100%); justify-items: center; text-align: center; }
.result-summary > span { color: var(--muted); font-size: 11px; font-weight: 850; letter-spacing: .2em; text-transform: uppercase; }
.result-card p { margin: 16px 0 0; color: var(--gold); font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.result-card h2 { margin: 10px 0 -2px; font-size: clamp(90px, 18vw, 190px); letter-spacing: .05em; line-height: .85; }
.result-layer--aka h2 { color: var(--aka); text-shadow: 0 0 80px rgb(255 77 95 / 38%); }
.result-card h3 { margin: 14px 0 0; font-size: clamp(26px, 5vw, 48px); }
.result-card small { margin-top: 7px; color: var(--muted); font-size: 15px; }
.result-actions { display: flex; gap: 10px; margin-top: 30px; }

.confirm-dialog { max-width: 520px; border: 1px solid var(--line-strong); border-radius: 20px; background: #111116; color: #fff; box-shadow: var(--shadow); padding: 0; }
.confirm-dialog::backdrop { background: rgb(0 0 0 / 70%); backdrop-filter: blur(8px); }
.confirm-dialog form { padding: 24px; }
.confirm-dialog form > span { color: var(--aka); font-size: 10px; font-weight: 850; letter-spacing: .16em; text-transform: uppercase; }
.confirm-dialog h2 { margin: 6px 0 8px; }
.confirm-dialog p { margin: 0; color: var(--muted); line-height: 1.55; }
.confirm-dialog form > div { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; }
.sanction-dialog-body { padding: 24px; }
.sanction-dialog-body > span { color: var(--aka); font-size: 10px; font-weight: 850; letter-spacing: .16em; text-transform: uppercase; }
.sanction-dialog-body h2 { margin: 6px 0 8px; }
.sanction-dialog-body p { margin: 0; color: var(--muted); line-height: 1.55; }
.sanction-options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 22px; }
.sanction-cancel { display: flex; justify-content: flex-end; margin-top: 12px; }

.setup-page { display: grid; grid-template-columns: .78fr 1.4fr; gap: 40px; padding: 36px 0 60px; }
.setup-intro { position: sticky; top: 110px; align-self: start; }
.setup-brand { display: block; width: min(300px, 80%); height: auto; margin-bottom: 32px; }
.setup-intro > span { color: var(--red-bright); font-size: 11px; font-weight: 850; letter-spacing: .18em; text-transform: uppercase; }
.setup-intro h1 { margin: 8px 0 14px; font-size: clamp(44px, 7vw, 82px); letter-spacing: -.06em; line-height: .9; text-wrap: balance; }
.setup-intro p { max-width: 480px; color: var(--muted); font-size: 16px; line-height: 1.65; }
.setup-form { display: grid; gap: 14px; }
.setup-form fieldset { min-width: 0; margin: 0; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); padding: 20px; }
.setup-form legend { color: #fff; font-size: 13px; font-weight: 850; letter-spacing: .12em; padding: 0 8px; text-transform: uppercase; }
.setup-form label { display: grid; gap: 7px; color: #dddde2; font-size: 13px; }
.setup-form label + label { margin-top: 14px; }
.setup-form label > span { font-weight: 750; }
.setup-form label > small { color: var(--muted); font-size: 11px; }
.form-errors { min-height: 20px; color: #ff9ba8; font-size: 13px; font-weight: 750; }
.field-error { color: #ff9ba8 !important; font-size: 12px !important; font-weight: 700; }
[aria-invalid="true"] { border-color: var(--aka); box-shadow: 0 0 0 1px rgb(255 77 95 / 22%); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
.form-row label + label { margin-top: 0; }
.setup-fighters { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.setup-fighter--aka { background: radial-gradient(circle at 100% 0, rgb(213 0 32 / 15%), transparent 55%), var(--surface) !important; }
.setup-actions { display: flex; justify-content: flex-end; gap: 10px; padding-top: 8px; }

/* Full-screen scoreboard */
.display-board { position: relative; display: grid; width: 100vw; height: 100vh; grid-template-rows: 74px 1fr minmax(240px, 36vh) 42px; overflow: hidden; background: radial-gradient(circle at 50% 35%, #11111a, #020205 60%); }
.display-header { display: flex; align-items: center; justify-content: space-between; gap: 18px; border-bottom: 1px solid var(--line); background: rgb(5 5 7 / 86%); padding: 0 clamp(18px, 3vw, 44px); }
.display-brand { display: flex; min-width: 0; align-items: center; gap: 14px; }
.display-brand > img { display: block; width: 46px; height: 46px; flex: 0 0 auto; object-fit: contain; }
.display-brand div { display: grid; gap: 3px; }
.display-brand strong { font-size: clamp(10px, 1.3vw, 15px); letter-spacing: .13em; }
.display-brand small { color: var(--red-bright); font-size: clamp(7px, .9vw, 10px); font-weight: 800; letter-spacing: .22em; }
.display-meta { display: flex; align-items: center; gap: 14px; color: #aaaab4; font-size: clamp(9px, 1vw, 12px); }
.display-meta strong { color: #fff; }
.display-timer-wrap { display: grid; place-items: center; align-content: center; min-height: 0; padding: 1vh; }
.display-status { margin-bottom: -1vh; color: #85858e; font-size: clamp(10px, 1.4vw, 18px); font-weight: 850; letter-spacing: .3em; }
.timer--display { margin: 0; font-size: min(27vw, 31vh); line-height: .76; }
.display-notice { min-height: 2.5vh; color: #bdbdc7; font-size: clamp(11px, 1.5vw, 20px); font-weight: 850; letter-spacing: .14em; text-transform: uppercase; }
.display-notice--success { color: var(--lime); }
.display-notice--warning, .display-notice--gold { color: var(--gold); }
.display-notice--danger, .display-notice--aka { color: var(--aka); }
.display-fighters { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); }
.display-fighters .fighter-card { display: grid; align-content: center; padding: clamp(16px, 2.5vw, 38px); }
.display-fighters .fighter-head h2 { font-size: clamp(30px, 5vw, 76px); }
.display-fighters .fighter-head p { font-size: clamp(11px, 1.5vw, 22px); }
.display-fighters .score-grid { grid-template-columns: 1fr 1.3fr; margin-top: 2vh; }
.display-fighters .score-block { min-height: 8vh; background: rgb(0 0 0 / 10%); padding: clamp(10px, 1.5vw, 20px); }
.display-fighters .score-block--penalty strong { font-size: clamp(12px, 1.8vw, 28px); }
.display-fighters .score-dots i { width: clamp(24px, 3.2vw, 54px); height: clamp(24px, 3.2vw, 54px); }
.display-fighters .penalty-dots i { width: clamp(9px, 1vw, 15px); height: clamp(9px, 1vw, 15px); }
.display-fighters .ippon-state span { width: clamp(26px, 3vw, 50px); height: clamp(26px, 3vw, 50px); }
.display-fighters .ippon-state strong { font-size: clamp(8px, 1vw, 14px); }
.display-footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; border-top: 1px solid var(--line); color: #6f6f78; font-size: clamp(8px, .9vw, 11px); padding: 0 clamp(18px, 3vw, 44px); text-transform: uppercase; }
.display-center-overlay { position: absolute; z-index: 20; inset: 74px 0 42px; display: grid; place-items: center; align-content: center; gap: 8px; background: rgb(1 1 4 / 91%); backdrop-filter: blur(10px); }
.display-center-overlay span { color: #888894; font-size: clamp(11px, 1.8vw, 20px); font-weight: 850; letter-spacing: .26em; }
.display-center-overlay strong { font-size: clamp(70px, 15vw, 190px); letter-spacing: .08em; line-height: .92; }
.display-center-overlay--medical strong { color: var(--aka); font-size: clamp(50px, 10vw, 130px); text-align: center; }
.app-shell--display .result-layer { position: absolute; inset: 74px 0 42px; }

@media (max-width: 1050px) {
  .control-layout { grid-template-columns: 1fr; }
  .operator-panel { width: 100%; }
  .operator-actions { grid-template-columns: repeat(4, 1fr); }
  .operator-actions button, .operator-actions a { min-height: 78px; }
  .setup-page { grid-template-columns: 1fr; gap: 18px; }
  .setup-intro { position: static; }
}

@media (max-width: 760px) {
  .topbar { min-height: 64px; padding-inline: 14px; }
  .brand-copy small { display: none; }
  .topnav { gap: 2px; }
  .topnav a { min-height: 44px; padding: 12px 10px; }
  .main { width: min(100% - 24px, 1500px); padding-top: 12px; }
  .context-bar { align-items: flex-start; }
  .context-meta { max-width: 50%; }
  .context-meta .sync-pill { display: none; }
  .fighters-grid { grid-template-columns: 1fr; }
  .fighter-card--aka { border-top: 1px solid var(--line); border-left: 0; }
  .fighter-actions { grid-template-columns: 1fr 1fr; }
  .action { min-height: 56px; }
  .timer { font-size: clamp(86px, 28vw, 150px); }
  .operator-actions { grid-template-columns: 1fr 1fr; }
  .vote-grid, .weigh-grid, .vote-grid--two { grid-template-columns: 1fr; }
  .vote-option, .weigh-option { min-height: 130px; }
  .vote-option > strong { font-size: 58px; }
  .decision-layer, .result-layer { padding: 12px; }
  .decision-card { padding: 18px; }
  .setup-fighters, .form-row { grid-template-columns: 1fr; }
  .form-row label + label { margin-top: 14px; }
  input, select, textarea { font-size: 16px; }
}


@media (hover: none), (pointer: coarse) {
  .fighter-actions { gap: 10px; }
  .action { min-height: 64px; padding: 12px 14px; }
  .action--primary { min-height: 76px; }
  .action--ippon { min-height: 88px; }
  .timer-button, .medical-button { min-height: 76px; }
  .operator-actions button, .operator-actions a { min-height: 96px; }
  kbd { display: none; }
  .shortcuts-card { display: none; }
  .touch-badge { border-color: rgb(55 230 120 / 25%) !important; color: #91efb0 !important; }
}

@media (orientation: landscape) and (max-height: 650px) and (max-width: 1100px) {
  .topbar { min-height: 58px; }
  .context-bar { min-height: 38px; margin-bottom: 8px; }
  .main { padding-top: 8px; }
  .control-layout { grid-template-columns: minmax(0, 1fr) 260px; gap: 10px; }
  .operator-actions { grid-template-columns: 1fr 1fr; }
  .fighter-card { padding: 14px; }
  .fighter-head h2 { font-size: 26px; }
  .score-grid { margin-top: 12px; }
  .score-block { min-height: 78px; padding: 10px; }
  .fighter-actions { margin-top: 10px; }
  .action { min-height: 56px; }
  .timer-panel { padding: 10px; }
  .timer { font-size: 17vh; }
  .timer-button, .medical-button { min-height: 58px; }
  .event-notice { min-height: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Tournament manager */
.manager-main { padding-bottom: 70px; }
.manager-topbar { padding-inline: max(20px, calc((100vw - 1500px)/2)); }
.manager-nav { min-width: 0; overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-width: none; }
.manager-nav::-webkit-scrollbar { display: none; }
.manager-eventbar { display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:78px; margin-bottom:22px; border-bottom:1px solid var(--line); }
.manager-eventbar > div { display:grid; min-width:0; gap:3px; }
.manager-eventbar strong { overflow:hidden; font-size:18px; line-height:1.1; text-overflow:ellipsis; white-space:nowrap; }
.manager-eventbar small { color:var(--muted); font-size:12px; }
.eyebrow { color:var(--red-bright); font-size:10px; font-weight:850; letter-spacing:.18em; text-transform:uppercase; }
.live-eyebrow { color:var(--lime); }
.compact-button { min-height:42px !important; width:auto !important; padding:10px 14px !important; }
.hero-dashboard { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(220px,.6fr); gap:32px; min-height:360px; overflow:hidden; border:1px solid var(--line); border-radius:28px; background:radial-gradient(circle at 92% 15%, rgb(213 0 32 / 22%), transparent 34%), linear-gradient(135deg,#131318,#08080b); box-shadow:var(--shadow); padding:clamp(28px,5vw,64px); }
.hero-dashboard > div:first-child { display:flex; min-width:0; flex-direction:column; justify-content:center; align-items:flex-start; }
.hero-dashboard h1 { max-width:820px; margin:10px 0 18px; font-size:clamp(48px,7vw,98px); letter-spacing:-.065em; line-height:.88; text-wrap:balance; }
.hero-dashboard p { max-width:700px; margin:0; color:#b3b3bd; font-size:clamp(15px,1.6vw,19px); line-height:1.6; }
.hero-mark { display:grid; place-items:center; min-width:0; }
.hero-mark img { display:block; width:min(100%,320px); max-height:290px; object-fit:contain; filter:drop-shadow(0 24px 50px rgb(0 0 0 / 50%)); }
.stats-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-top:14px; }
.stats-grid article { display:grid; min-width:0; gap:4px; border:1px solid var(--line); border-radius:18px; background:var(--surface); padding:20px; }
.stats-grid span { color:var(--muted); font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.stats-grid strong { font-variant-numeric:tabular-nums; font-size:40px; letter-spacing:-.04em; }
.stats-grid small { color:#73737e; }
.manager-section { margin-top:34px; scroll-margin-top:90px; }
.manager-section--split { display:grid; grid-template-columns:minmax(280px,.72fr) minmax(0,1.6fr); gap:18px; align-items:start; }
.section-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:18px; margin-bottom:14px; }
.section-heading--wrap { flex-wrap:wrap; }
.section-heading > div:first-child { display:grid; gap:3px; }
.section-heading h1,.section-heading h2 { margin:0; font-size:clamp(30px,4vw,48px); letter-spacing:-.045em; line-height:1; }
.section-heading > a { color:#c9c9d0; font-size:13px; }
.section-heading > a:hover { color:#fff; }
.panel-card { min-width:0; border:1px solid var(--line); border-radius:20px; background:var(--surface); box-shadow:0 18px 54px rgb(0 0 0 / 22%); padding:22px; }
.sticky-card { position:sticky; top:96px; }
.panel-card > h1,.panel-card > h2 { margin:8px 0 10px; letter-spacing:-.04em; }
.panel-card > p,.muted-copy { color:var(--muted); line-height:1.6; }
.stack-form { display:grid; gap:14px; }
.stack-form label { display:grid; gap:7px; }
.stack-form label > span { color:#dddde3; font-size:12px; font-weight:750; }
.table-card { padding:0; overflow:hidden; }
.table-card .section-heading { padding:22px 22px 10px; }
.table-wrap { width:100%; overflow:auto; overscroll-behavior:contain; }
table { width:100%; border-collapse:collapse; font-size:13px; }
th,td { border-top:1px solid var(--line); padding:14px 16px; text-align:left; vertical-align:middle; }
th { color:#8d8d98; font-size:10px; font-weight:850; letter-spacing:.12em; text-transform:uppercase; }
td strong,td small { display:block; }
td small { margin-top:3px; color:var(--muted); }
td.num { font-variant-numeric:tabular-nums; }
.icon-button { display:grid; width:44px; height:44px; place-items:center; border:1px solid var(--line); border-radius:12px; background:transparent; color:#c5c5cd; font-size:22px; }
.icon-button:hover { border-color:rgb(255 77 95 / 35%); background:rgb(255 77 95 / 8%); color:#fff; }
.bouts-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.bout-card { min-width:0; border:1px solid var(--line); border-radius:18px; background:linear-gradient(180deg,rgb(255 255 255 / 2%),transparent 22%),var(--surface); overflow:hidden; }
.bout-card--live { border-color:rgb(55 230 120 / 38%); box-shadow:0 0 0 1px rgb(55 230 120 / 8%),0 20px 60px rgb(0 0 0 / 24%); }
.bout-card__meta,.bout-card__footer { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:14px 16px; }
.bout-card__meta { border-bottom:1px solid var(--line); }
.bout-card__meta span { overflow:hidden; font-size:12px; font-weight:800; text-overflow:ellipsis; white-space:nowrap; }
.bout-card__meta small { color:var(--muted); white-space:nowrap; }
.bout-fighters { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center; gap:14px; padding:18px 16px; }
.bout-fighters > div { min-width:0; }
.bout-fighters > div:last-child { text-align:right; }
.bout-fighters span { display:block; color:var(--muted); font-size:9px; font-weight:850; letter-spacing:.14em; }
.bout-fighters strong { display:block; overflow:hidden; margin-top:3px; font-size:18px; line-height:1.1; text-overflow:ellipsis; white-space:nowrap; }
.bout-fighters small { display:block; overflow:hidden; margin-top:5px; color:#7d7d87; text-overflow:ellipsis; white-space:nowrap; }
.bout-fighters b { color:#565660; font-size:10px; letter-spacing:.15em; }
.bout-card__footer { border-top:1px solid var(--line); }
.state-pill { display:inline-flex; align-items:center; min-height:28px; border:1px solid var(--line); border-radius:999px; color:#aaaab3; font-size:9px; font-weight:850; letter-spacing:.11em; padding:6px 9px; text-transform:uppercase; }
.state-pill--scheduled { border-color:rgb(100 181 255 / 30%); color:#8cc8ff; }
.state-pill--live { border-color:rgb(55 230 120 / 35%); color:#8cf2ae; }
.state-pill--completed { color:#c2c2ca; }
.empty-state { display:grid; min-height:220px; place-items:center; align-content:center; gap:8px; border:1px dashed var(--line-strong); border-radius:20px; color:var(--muted); padding:30px; text-align:center; }
.empty-state strong { color:#fff; font-size:19px; }
.empty-state p { max-width:520px; margin:0 0 10px; }
.empty-state .button-primary { width:auto; }
.toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.compact-field select { min-width:220px; min-height:42px; }
.bracket-summary { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
.bracket-summary > * { border:1px solid var(--line); border-radius:999px; color:#aaaab3; font-size:11px; padding:7px 10px; }
.bracket-summary strong { color:#fff; }
.bracket-board { display:grid; grid-auto-columns:minmax(270px,1fr); grid-auto-flow:column; gap:18px; overflow-x:auto; overscroll-behavior-inline:contain; scroll-snap-type:x proximity; padding:4px 2px 18px; }
.bracket-round { display:grid; min-width:0; scroll-snap-align:start; }
.bracket-round h3 { position:sticky; left:0; margin:0 0 10px; color:#9e9ea8; font-size:11px; font-weight:850; letter-spacing:.13em; text-transform:uppercase; }
.bracket-round__bouts { display:flex; min-height:520px; flex-direction:column; justify-content:space-around; gap:12px; }
.bracket-bout { border:1px solid var(--line); border-radius:15px; background:var(--surface); overflow:hidden; box-shadow:0 10px 30px rgb(0 0 0 / 16%); }
.bracket-bout--done { opacity:.84; }
.bracket-line { display:grid; grid-template-columns:46px minmax(0,1fr); align-items:center; gap:9px; min-height:52px; padding:10px 12px; }
.bracket-line + .bracket-line { border-top:1px solid var(--line); }
.bracket-line span { color:#85858f; font-size:8px; font-weight:850; letter-spacing:.1em; }
.bracket-line strong { overflow:hidden; font-size:13px; text-overflow:ellipsis; white-space:nowrap; }
.bracket-line.winner { background:rgb(55 230 120 / 7%); }
.bracket-line.winner strong { color:#9af3b8; }
.bracket-line--aka { background:rgb(213 0 32 / 4%); }
.bracket-actions { display:flex; min-height:36px; align-items:center; justify-content:space-between; gap:8px; border-top:1px solid var(--line); padding:7px 10px; }
.bracket-actions small { color:#73737d; font-size:9px; }
.bracket-actions button { min-height:28px; border:0; background:transparent; color:#d9d9df; font-size:10px; font-weight:800; }
.tatami-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.tatami-card { min-width:0; border:1px solid var(--line); border-radius:22px; background:#0e0e13; overflow:hidden; }
.tatami-card > header { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:20px; }
.tatami-card > header span { color:var(--muted); font-size:9px; font-weight:850; letter-spacing:.13em; }
.tatami-card > header h2 { margin:3px 0 0; font-size:32px; letter-spacing:-.04em; }
.tatami-light { width:13px; height:13px; border-radius:50%; background:#555; box-shadow:0 0 0 5px rgb(255 255 255 / 4%); }
.tatami-light--live { background:var(--lime); box-shadow:0 0 0 5px rgb(55 230 120 / 10%),0 0 24px rgb(55 230 120 / 45%); }
.tatami-queue { display:grid; gap:10px; border-top:1px solid var(--line); padding:18px; }
.tatami-queue h3 { margin:0; font-size:13px; }
.tatami-queue > p { color:var(--muted); }
.tatami-queue .bout-card { background:#131319; }
.tatami-queue .bout-card__meta { padding:10px 12px; }
.tatami-queue .bout-fighters { padding:12px; }
.tatami-queue .bout-card__footer { padding:10px 12px; }
.podiums-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.podium-card { display:grid; gap:9px; border:1px solid var(--line); border-radius:20px; background:var(--surface); padding:20px; }
.podium-card > span { color:var(--muted); font-size:10px; font-weight:850; letter-spacing:.13em; text-transform:uppercase; }
.podium-place { display:grid; grid-template-columns:34px minmax(0,1fr) auto; align-items:center; gap:10px; min-height:50px; border-top:1px solid var(--line); padding-top:9px; }
.podium-place b { display:grid; width:30px; height:30px; place-items:center; border-radius:50%; background:rgb(255 255 255 / 6%); font-variant-numeric:tabular-nums; }
.podium-place strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.podium-place small { color:var(--muted); }
.podium-place--gold strong,.podium-place--gold small { color:var(--gold); }
.results-log { margin-top:16px; }
.result-row { display:grid; grid-template-columns:minmax(160px,.8fr) minmax(180px,1fr) minmax(180px,1fr); align-items:center; gap:16px; min-height:60px; border-top:1px solid var(--line); padding:10px 0; font-size:12px; }
.result-row span:first-child small { display:block; margin-top:3px; color:var(--muted); }
.result-row > span:last-child { color:var(--muted); text-align:right; }
.settings-layout { grid-template-columns:1fr 1fr; }
.backup-card { display:grid; align-content:start; gap:10px; }
.backup-card h2,.backup-card h3 { margin:6px 0 0; }
.backup-card hr { width:100%; margin:14px 0; border:0; border-top:1px solid var(--line); }
.backup-actions { display:flex; flex-wrap:wrap; gap:8px; }
.file-button { position:relative; cursor:pointer; }
.file-button input { position:absolute; width:1px; height:1px; overflow:hidden; opacity:0; }

@media (max-width: 1050px) {
  .manager-section--split,.settings-layout { grid-template-columns:1fr; }
  .sticky-card { position:static; }
  .podiums-grid { grid-template-columns:1fr 1fr; }
}

@media (max-width: 820px) {
  .manager-topbar { align-items:flex-start; flex-direction:column; gap:4px; padding-block:8px; }
  .manager-nav { width:100%; }
  .manager-nav a { flex:0 0 auto; }
  .manager-main { padding-top:8px; }
  .manager-eventbar { min-height:64px; }
  .hero-dashboard { grid-template-columns:1fr; min-height:0; padding:28px; }
  .hero-mark { display:none; }
  .stats-grid { grid-template-columns:1fr 1fr; }
  .bouts-grid,.tatami-grid { grid-template-columns:1fr; }
  .podiums-grid { grid-template-columns:1fr; }
  .result-row { grid-template-columns:1fr; gap:5px; padding:14px 0; }
  .result-row > span:last-child { text-align:left; }
}

@media (max-width: 560px) {
  .manager-eventbar { align-items:flex-start; flex-direction:column; padding-block:10px; }
  .hero-dashboard h1 { font-size:48px; }
  .stats-grid { grid-template-columns:1fr 1fr; gap:8px; }
  .stats-grid article { padding:15px; }
  .stats-grid strong { font-size:32px; }
  .section-heading { align-items:flex-start; flex-direction:column; }
  .toolbar { width:100%; }
  .compact-field,.compact-field select,.toolbar .button-primary { width:100%; }
  .bout-fighters { gap:7px; }
  .bout-fighters strong { font-size:14px; }
}

@media print {
  .topbar,.manager-eventbar .button-secondary,.backup-actions,.section-heading>a,.section-heading .button-secondary { display:none !important; }
  html,body,.app-shell { background:#fff !important; color:#111 !important; }
  .manager-main { width:100%; padding:0; }
  .podium-card,.panel-card { break-inside:avoid; border-color:#ddd; background:#fff; box-shadow:none; }
  .podium-place strong,.result-row strong { color:#111 !important; }
}


/* Shihan MVP · Command Center */
.hero-status-row { display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
.demo-pill { display:inline-flex; min-height:28px; align-items:center; border:1px solid rgb(240 192 64 / 28%); border-radius:999px; background:rgb(240 192 64 / 9%); color:#f7d875; font-size:9px; font-weight:850; letter-spacing:.14em; padding:6px 10px; }
.hero-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:26px; }
.hero-actions .button-primary, .hero-actions .button-secondary { width:auto; min-height:48px; padding:13px 18px; }
.command-tatami-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.command-tatami { min-width:0; overflow:hidden; border:1px solid var(--line); border-radius:20px; background:linear-gradient(180deg,rgb(255 255 255 / 3%),transparent 22%),var(--surface); box-shadow:0 18px 54px rgb(0 0 0 / 22%); }
.command-tatami--live { border-color:rgb(55 230 120 / 32%); box-shadow:0 18px 54px rgb(0 0 0 / 22%), inset 0 1px 0 rgb(55 230 120 / 12%); }
.command-tatami > header { display:flex; align-items:center; justify-content:space-between; gap:14px; border-bottom:1px solid var(--line); padding:18px 20px; }
.command-tatami > header > div { display:grid; gap:3px; }
.command-tatami > header span { color:var(--muted); font-size:9px; font-weight:850; letter-spacing:.18em; }
.command-tatami--live > header span { color:#91efb0; }
.command-tatami > header h3 { margin:0; font-size:26px; letter-spacing:-.035em; }
.command-tatami__match { display:grid; gap:12px; padding:22px 20px; }
.command-tatami__match > small { color:var(--muted); font-size:11px; }
.command-tatami__match > div { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center; gap:12px; }
.command-tatami__match strong { min-width:0; overflow:hidden; font-size:clamp(20px,2.5vw,34px); letter-spacing:-.035em; line-height:1; text-overflow:ellipsis; white-space:nowrap; }
.command-tatami__match strong:last-child { text-align:right; }
.command-tatami__match b { color:#676772; font-size:10px; letter-spacing:.12em; }
.command-tatami > footer { display:flex; flex-wrap:wrap; gap:8px; border-top:1px solid var(--line); padding:14px 20px 18px; }
.command-tatami > footer .compact-button { flex:1 1 160px; text-align:center; }
@media (max-width: 820px) { .command-tatami-grid { grid-template-columns:1fr; } .hero-dashboard--mvp { grid-template-columns:1fr; } .hero-dashboard--mvp .hero-mark { display:none; } }
@media (hover: none), (pointer: coarse) { .hero-actions a, .command-tatami > footer .compact-button { min-height:52px !important; } }

/* Sudamericano · países y nombres de llaves */
.athlete-lockup { display:inline-flex !important; min-width:0; align-items:center; gap:8px; }
.athlete-lockup > span:last-child { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.country-flag { display:inline-grid; flex:0 0 auto; min-width:1.35em; place-items:center; font-size:1.15em; line-height:1; }
.country-flag--table { font-size:1.35em; }
.country-flag--fighter { font-size:.9em; filter:drop-shadow(0 4px 10px rgb(0 0 0 / 28%)); }
.country-chip { display:inline-flex; min-height:30px; align-items:center; gap:7px; border:1px solid var(--line); border-radius:999px; background:rgb(255 255 255 / 2%); color:#d4d4db; padding:6px 10px; white-space:nowrap; }
.fighter-name-with-country { display:flex; min-width:0; align-items:center; gap:10px; }
.fighter-name-with-country > span:last-child { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fighter-name-with-country--result { justify-content:center; }
.bracket-name-editor { display:grid; grid-template-columns:minmax(0,1.6fr) minmax(240px,.9fr) auto; align-items:end; gap:16px; margin-bottom:14px; }
.bracket-name-editor > div { min-width:0; }
.bracket-name-editor h2 { margin:4px 0 5px; font-size:clamp(22px,3vw,34px); letter-spacing:-.04em; }
.bracket-name-editor p { max-width:700px; margin:0; color:var(--muted); font-size:12px; line-height:1.5; }
.bracket-name-editor label { display:grid; gap:7px; }
.bracket-name-editor label > span { color:#dddde3; font-size:12px; font-weight:750; }
.bracket-name-editor .button-secondary { width:auto; min-height:48px; }
.bracket-line .athlete-lockup { max-width:100%; }
.command-tatami__match .athlete-lockup { max-width:100%; }
.bout-fighters .athlete-lockup { max-width:100%; }
.podium-place .athlete-lockup { max-width:100%; }
.result-row .athlete-lockup { max-width:100%; }

@media (max-width: 980px) {
  .bracket-name-editor { grid-template-columns:1fr; align-items:stretch; }
  .bracket-name-editor .button-secondary { width:100%; }
}

@media (hover: none), (pointer: coarse) {
  .country-chip { min-height:36px; }
  .bracket-name-editor input, .bracket-name-editor select { min-height:52px; font-size:16px; }
}

/* Sudamericano v1.3.0 ----------------------------------------------------- */
.international-summary-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(280px,.65fr);gap:14px;align-items:stretch}
.medal-dashboard-card{padding:0;overflow:hidden}
.medal-table-wrap{overflow-x:auto;overscroll-behavior-inline:contain}
.medal-table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.medal-table th,.medal-table td{border-bottom:1px solid var(--line);padding:12px 14px;text-align:left;white-space:nowrap}
.medal-table th{color:var(--muted);font-size:10px;font-weight:850;letter-spacing:.11em;text-transform:uppercase}
.medal-table tbody tr:last-child td{border-bottom:0}
.medal-table .num{text-align:right}
.medal-table .medal-rank{width:42px;color:var(--muted);font-weight:800}
.medal-num{font-weight:800}
.medal-num--gold{color:var(--gold)}
.medal-table-note{margin:0;border-top:1px solid var(--line);color:var(--muted);font-size:12px;padding:12px 14px}
.delegation-name{display:inline-flex;align-items:center;gap:9px}
.delegation-cta{display:flex;min-width:0;flex-direction:column;justify-content:flex-end;gap:8px;border:1px solid rgb(190 22 34 / 28%);border-radius:20px;background:radial-gradient(circle at 80% 20%,rgb(190 22 34 / 18%),transparent 45%),var(--surface);color:inherit;padding:24px;text-decoration:none;box-shadow:0 18px 54px rgb(0 0 0 / 20%)}
.delegation-cta strong{font-size:clamp(24px,2.4vw,34px);letter-spacing:-.035em}
.delegation-cta p{margin:0;color:var(--muted);line-height:1.55}
.delegation-cta>span:last-child{margin-top:8px;color:#fff;font-size:13px;font-weight:800}
.section-subcopy{max-width:780px;margin:8px 0 0;color:var(--muted);line-height:1.55}
.delegation-overview{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:18px 0}
.delegation-overview article{display:grid;gap:4px;border:1px solid var(--line);border-radius:16px;background:var(--surface);padding:18px}
.delegation-overview strong{font-size:34px;font-variant-numeric:tabular-nums;letter-spacing:-.04em}
.delegation-overview span{color:var(--muted);font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.delegations-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.delegation-card{min-width:0;overflow:hidden;border:1px solid var(--line);border-radius:20px;background:linear-gradient(180deg,rgb(255 255 255 / 3%),transparent 22%),var(--surface);box-shadow:0 18px 54px rgb(0 0 0 / 18%)}
.delegation-card--empty{opacity:.62;box-shadow:none}
.delegation-card>header{display:flex;align-items:center;gap:14px;border-bottom:1px solid var(--line);padding:18px}
.delegation-card>header>div{display:grid;min-width:0;gap:2px}
.delegation-card>header span:not(.delegation-flag){color:var(--muted);font-size:9px;font-weight:850;letter-spacing:.13em}
.delegation-card h2{overflow:hidden;margin:0;font-size:24px;letter-spacing:-.03em;text-overflow:ellipsis;white-space:nowrap}
.delegation-flag{font-size:36px;filter:drop-shadow(0 6px 12px rgb(0 0 0 / 28%))}
.delegation-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-bottom:1px solid var(--line)}
.delegation-metrics>div{display:grid;gap:2px;padding:14px 12px;text-align:center}
.delegation-metrics>div+div{border-left:1px solid var(--line)}
.delegation-metrics strong{font-size:22px;font-variant-numeric:tabular-nums}
.delegation-metrics span{color:var(--muted);font-size:9px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.delegation-medals{display:flex;justify-content:space-around;gap:8px;border-bottom:1px solid var(--line);padding:12px 16px;font-variant-numeric:tabular-nums}
.delegation-medals span{display:inline-flex;align-items:center;gap:6px;color:var(--muted)}
.delegation-medals b{color:#fff}
.delegation-athletes{display:grid;gap:0;margin:0;padding:8px 18px 14px;list-style:none}
.delegation-athletes li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;border-bottom:1px solid var(--line);padding:9px 0}
.delegation-athletes li:last-child{border-bottom:0}
.delegation-athletes span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.delegation-athletes small{max-width:145px;overflow:hidden;color:var(--muted);text-overflow:ellipsis;white-space:nowrap}
.delegation-athletes .delegation-more{display:block;color:var(--muted);font-size:11px}
.delegation-card>.muted-copy{padding:18px}
.competitor-filters{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}
.competitor-filters input,.competitor-filters select{min-height:42px}
.competitor-filters input{min-width:min(280px,65vw)}
.filter-empty{margin:12px 0 0;color:var(--muted);text-align:center}
.championship-medal-table{margin-bottom:20px;overflow:hidden;padding:0}
.championship-medal-table>.section-heading{padding:20px 20px 8px}
.championship-medal-table>.medal-table-wrap{padding-bottom:4px}

@media (max-width:1100px){
  .delegations-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:820px){
  .international-summary-grid{grid-template-columns:1fr}
  .delegation-overview{grid-template-columns:1fr 1fr 1fr}
}
@media (max-width:620px){
  .delegations-grid{grid-template-columns:1fr}
  .delegation-overview{grid-template-columns:1fr}
  .competitor-filters{width:100%;justify-content:stretch}
  .competitor-filters label,.competitor-filters input,.competitor-filters select{width:100%;min-width:0}
  .medal-table th,.medal-table td{padding:11px 10px}
}
@media (hover:none),(pointer:coarse){
  .delegation-cta{min-height:150px}
  .competitor-filters input,.competitor-filters select{min-height:48px;font-size:16px}
}
@media print{
  .delegation-cta,.competitor-filters,.delegation-card--empty{display:none!important}
  .delegations-grid{grid-template-columns:1fr 1fr 1fr}
  .delegation-card{break-inside:avoid;border-color:#ddd;background:#fff;box-shadow:none}
}

/* Gestión de categorías -------------------------------------------------- */
.category-admin-grid{display:grid;gap:12px}
.category-admin-card{overflow:hidden;border:1px solid var(--line);border-radius:20px;background:var(--surface)}
.category-admin-card>header{display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid var(--line);padding:18px 20px}
.category-admin-card>header>div{display:grid;min-width:0;gap:3px}
.category-admin-card>header span:not(.category-rule-pill){color:var(--muted);font-size:9px;font-weight:850;letter-spacing:.12em}
.category-admin-card h2{overflow:hidden;margin:0;font-size:24px;letter-spacing:-.03em;text-overflow:ellipsis;white-space:nowrap}
.category-rule-pill{flex:0 0 auto;border:1px solid var(--line);border-radius:999px;background:rgb(255 255 255 / 3%);color:#ddd;padding:7px 10px;font-size:11px;font-weight:800}
.category-admin-stats{display:flex;flex-wrap:wrap;gap:16px;border-bottom:1px solid var(--line);padding:12px 20px;color:var(--muted);font-size:11px}
.category-admin-stats strong{color:#fff;font-variant-numeric:tabular-nums}
.category-edit-form{padding:18px 20px 20px}
.category-card-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.category-card-actions .compact-button{flex:1 1 150px;text-align:center}
.category-lock-note{margin:-6px 20px 18px;color:var(--muted);font-size:11px}
@media (hover:none),(pointer:coarse){.category-card-actions .compact-button{min-height:48px}}

/* MVP v1.4 · carga manual + plantilla Sudamericano */
h1,h2,h3,h4,h5,h6 { scroll-margin-top: 100px; text-wrap: balance; }
.manager-shell { position: relative; isolation: isolate; }
.manager-shell::before { content:""; position:fixed; z-index:-1; right:-110px; bottom:-150px; width:min(720px,68vw); aspect-ratio:1; background:url('./wko-ambient-mark.png') center/contain no-repeat; opacity:.035; pointer-events:none; }
.button-primary,.button-secondary,.button-danger { transition:background 120ms ease,border-color 120ms ease,color 120ms ease,transform 80ms ease; }
.button-primary:hover:not(:disabled),.button-primary:focus-visible { background:#e8e8ec; }
.button-secondary:hover:not(:disabled),.button-secondary:focus-visible { border-color:rgb(255 255 255 / 34%); background:rgb(255 255 255 / 9%); }
.button-danger:hover:not(:disabled),.button-danger:focus-visible { background:#ef1232; }
.button-primary:active:not(:disabled),.button-secondary:active:not(:disabled),.button-danger:active:not(:disabled) { transform:scale(.985); }
.competitor-entry-column { display:grid; gap:18px; min-width:0; }
.competitor-entry-column .sticky-card { position:static; }
.import-card { display:grid; gap:10px; }
.import-card h2 { margin:6px 0 0; }
.import-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:6px; }
.inline-help { margin:0; color:var(--muted); font-size:11px; line-height:1.55; overflow-wrap:anywhere; }
.inline-warning { margin:12px 0; border:1px solid rgb(240 192 64 / 30%); border-radius:12px; background:rgb(240 192 64 / 8%); color:#f0d77f; padding:11px 12px; font-size:12px; line-height:1.5; }
.row-actions { display:flex; align-items:center; justify-content:flex-end; gap:7px; min-width:max-content; }
.athlete-edit-dialog { width:min(620px,calc(100vw - 28px)); max-width:620px; max-height:min(90dvh,820px); overflow:auto; overscroll-behavior:contain; }
.athlete-edit-dialog .stack-form { padding:24px; }
.athlete-edit-dialog .form-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:0; }
.dialog-actions { display:flex !important; justify-content:flex-end !important; gap:10px !important; margin-top:8px !important; }
.import-preview-dialog { width:min(1080px,calc(100vw - 28px)); max-width:1080px; max-height:90dvh; overflow:hidden; overscroll-behavior:contain; }
.import-preview-shell { display:grid; max-height:90dvh; grid-template-rows:auto auto minmax(0,1fr) auto; gap:10px; padding:24px; }
.import-preview-shell h2 { margin:4px 0 2px; }
.import-summary { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.import-summary > * { border:1px solid var(--line); border-radius:999px; padding:7px 10px; font-size:11px; }
.import-summary strong { max-width:min(520px,70vw); overflow:hidden; border-color:var(--line-strong); text-overflow:ellipsis; white-space:nowrap; }
.import-preview-table { min-height:0; overflow:auto; overscroll-behavior:contain; border:1px solid var(--line); border-radius:14px; }
.import-preview-table table { min-width:760px; }
.import-preview-table th { position:sticky; z-index:1; top:0; background:#111116; }
.import-row--error { background:rgb(255 77 95 / 5%); }
.import-error-text { color:#ff9ba8; font-weight:700; line-height:1.35; }
.import-ok-text { color:#91efb0; font-weight:750; }
.import-file-errors { border:1px solid rgb(255 77 95 / 30%); border-radius:12px; background:rgb(255 77 95 / 7%); color:#ffc0c9; padding:10px 12px; }
.import-file-errors p { margin:0; }
.import-file-errors p + p { margin-top:5px; }
.filter-empty { margin:0; border-top:1px solid var(--line); color:var(--muted); padding:18px 22px; }
[aria-busy="true"]::before { content:""; width:14px; height:14px; flex:0 0 14px; border:2px solid currentColor; border-right-color:transparent; border-radius:50%; animation:wko-spin .7s linear infinite; }
@keyframes wko-spin { to { transform:rotate(360deg); } }

@media (min-width:1060px) {
  .competitors-layout { grid-template-columns:minmax(330px,.78fr) minmax(0,1.7fr); }
}
@media (max-width:760px) {
  .import-actions { grid-template-columns:1fr; }
  .row-actions { gap:4px; }
  .row-actions .compact-button { min-height:44px !important; padding-inline:11px !important; }
  .athlete-edit-dialog .form-row { grid-template-columns:1fr; }
  .dialog-actions { flex-direction:column-reverse; }
  .dialog-actions > * { width:100%; }
  .import-preview-shell { padding:18px; }
}
@media (hover:none),(pointer:coarse) {
  .import-actions .button-primary,.import-actions .button-secondary,.dialog-actions button { min-height:52px; }
}
@media (prefers-reduced-motion:reduce) {
  [aria-busy="true"]::before { animation:none; border-right-color:currentColor; }
}
.inline-create-form { display:grid; grid-template-columns:minmax(220px,1fr) minmax(240px,.8fr) minmax(0,.8fr) auto; align-items:end; gap:14px; margin-bottom:16px; }
.inline-create-form > div:first-child { align-self:center; }
.inline-create-form h2 { margin:4px 0 0; font-size:22px; }
.inline-create-form label { display:grid; gap:7px; }
.inline-create-form label > span,.tatami-config-form label > span { color:#dddde3; font-size:12px; font-weight:750; }
.tatami-config-form { display:grid; grid-template-columns:minmax(180px,1fr) auto auto; align-items:end; gap:10px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:rgb(255 255 255 / 2%); padding:14px 18px; }
.tatami-config-form > label:first-child { display:grid; gap:6px; }
.checkbox-field { display:flex !important; min-height:48px; align-items:center; gap:9px; cursor:pointer; padding:8px 4px; }
.checkbox-field input { width:22px; height:22px; min-height:22px; margin:0; accent-color:var(--red-bright); }
.tatami-card--disabled { opacity:.72; }
.tatami-grid--admin { margin-top:0; }
@media(max-width:920px){
  .inline-create-form { grid-template-columns:1fr 1fr; }
  .tatami-config-form { grid-template-columns:1fr 1fr; }
  .tatami-config-form > label:first-child { grid-column:1/-1; }
}
@media(max-width:560px){
  .inline-create-form,.tatami-config-form { grid-template-columns:1fr; }
  .tatami-config-form > label:first-child { grid-column:auto; }
}
@media (hover:none),(pointer:coarse) {
  .compact-button { min-height:48px !important; }
  .compact-field select,.bracket-actions button { min-height:44px; }
  .bracket-actions button { min-width:44px; padding-inline:8px; }
}
.results-count { color:var(--muted); font-size:11px; }
.competitor-filters { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.competitor-filters label { min-width:180px; }
.pagination { display:flex; align-items:center; justify-content:flex-end; gap:10px; border-top:1px solid var(--line); padding:14px 18px; }
.pagination > span { color:var(--muted); font-size:11px; font-variant-numeric:tabular-nums; }
.pagination a[aria-disabled="true"] { pointer-events:none; opacity:.42; }
@media(max-width:760px){
  .competitor-filters { width:100%; }
  .competitor-filters label,.competitor-filters input,.competitor-filters select,.competitor-filters .compact-button { width:100%; }
  .pagination { justify-content:space-between; flex-wrap:wrap; }
}

/* Authentication + role management */
.login-shell { min-height: 100svh; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(420px, .9fr); background: #050507; }
.login-brand-panel { position: relative; display: grid; align-content: end; min-height: 100svh; overflow: hidden; border-right: 1px solid var(--line); background: radial-gradient(circle at 18% 16%, rgb(213 0 32 / 26%), transparent 34%), linear-gradient(145deg,#111116,#050507 68%); padding: clamp(38px,6vw,86px); }
.login-ambient-mark { position: absolute; inset: 50% auto auto 50%; width: min(72%,680px); height: auto; transform: translate(-50%,-56%); opacity: .18; filter: drop-shadow(0 36px 80px rgb(0 0 0 / 60%)); }
.login-brand-copy { position: relative; z-index: 1; max-width: 760px; }
.login-brand-copy > span { color: var(--red-bright); font-size: 11px; font-weight: 850; letter-spacing: .22em; }
.login-brand-copy > strong { display: block; margin: 14px 0 18px; font-size: clamp(56px,7.5vw,118px); font-weight: 900; letter-spacing: -.065em; line-height: .82; text-wrap: balance; }
.login-brand-copy > p { max-width: 520px; margin: 0; color: #aaaab4; font-size: 15px; line-height: 1.6; }
.login-form-panel { display: grid; place-items: center; min-width: 0; min-height: 100svh; padding: max(28px,env(safe-area-inset-top)) max(24px,env(safe-area-inset-right)) max(28px,env(safe-area-inset-bottom)) max(24px,env(safe-area-inset-left)); }
.login-shell--single { grid-template-columns: 1fr; }
.login-card { width: min(440px,100%); }
.login-logo-lockup { display: flex; align-items: center; gap: 16px; }
.login-logo-lockup img { display: block; width: 76px; height: 76px; object-fit: contain; }
.login-logo-lockup div { display: grid; gap: 4px; }
.login-logo-lockup span { color: var(--red-bright); font-size: 10px; font-weight: 850; letter-spacing: .19em; }
.login-logo-lockup strong { font-size: clamp(28px,4vw,40px); letter-spacing: -.045em; line-height: 1; }
.login-intro { margin: 24px 0; color: var(--muted); line-height: 1.6; }
.login-demo-note { display: grid; gap: 5px; margin-bottom: 18px; border: 1px solid rgb(100 181 255 / 26%); border-radius: 14px; background: rgb(100 181 255 / 7%); padding: 13px 14px; color: #b9ddff; font-size: 12px; }
.login-demo-note strong { color: #e1f2ff; }
.login-demo-note code { font-size: 11px; }
.login-form { display: grid; gap: 16px; }
.login-form label { display: grid; gap: 8px; }
.login-form label > span { color: #e0e0e6; font-size: 12px; font-weight: 800; }
.login-form input { width: 100%; min-height: 54px; font-size: 16px; }
.password-field { position: relative; }
.password-field input { padding-right: 94px; }
.password-toggle { position: absolute; top: 5px; right: 5px; min-width: 78px; min-height: 44px; border: 0; border-radius: 9px; background: transparent; color: #b7b7c1; font-size: 12px; }
.password-toggle:hover { background: rgb(255 255 255 / 7%); color: #fff; }
.form-alert { min-height: 20px; color: #ff98a7; font-size: 12px; line-height: 1.45; }
.form-alert--error { border: 1px solid rgb(255 77 95 / 28%); border-radius: 12px; background: rgb(255 77 95 / 8%); padding: 12px; }
.login-submit { display: flex; width: 100%; min-height: 56px; align-items: center; justify-content: center; gap: 12px; border: 1px solid #fff; border-radius: 14px; background: #fff; color: #08080a; font-size: 13px; font-weight: 900; letter-spacing: .09em; padding: 0 18px; }
.login-submit:hover:not(:disabled) { background: #e9e9ec; }
.button-spinner { display: none; width: 16px; height: 16px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: auth-spin 700ms linear infinite; }
.is-loading .button-spinner { display: inline-block; }
.login-security-note { margin: 18px 0 0; color: #71717c; font-size: 11px; line-height: 1.55; }
@keyframes auth-spin { to { transform: rotate(360deg); } }

.manager-session { display: flex; flex: 0 0 auto; align-items: center; gap: 10px; }
.manager-session > span { display: grid; max-width: 170px; gap: 2px; text-align: right; }
.manager-session strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.manager-session small { color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.session-logout { min-width: 48px; min-height: 44px; border: 1px solid var(--line); border-radius: 10px; background: rgb(255 255 255 / 4%); color: #d4d4dc; font-size: 11px; font-weight: 800; }
.session-logout:hover { border-color: rgb(255 77 95 / 32%); background: rgb(255 77 95 / 8%); color: #fff; }
.auth-provider-badge { min-height: 32px; display: inline-flex; align-items: center; border: 1px solid rgb(100 181 255 / 24%); border-radius: 999px; background: rgb(100 181 255 / 6%); color: #abd6ff; font-size: 10px; font-weight: 850; letter-spacing: .08em; padding: 0 10px; text-transform: uppercase; }
.users-layout { grid-template-columns: minmax(300px,.7fr) minmax(0,1.6fr); }
.user-create-submit { gap: 10px; }
.form-help { margin: -4px 0 0; color: var(--muted); font-size: 11px; line-height: 1.55; }
.users-list-card { min-width: 0; }
.users-loading { min-height: 140px; display: grid; place-items: center; color: var(--muted); font-size: 13px; }
.users-table td:first-child strong { overflow-wrap: anywhere; }
.role-pill,.user-status { display: inline-flex; min-height: 28px; align-items: center; border: 1px solid var(--line); border-radius: 999px; font-size: 10px; font-weight: 850; padding: 0 9px; }
.role-pill--admin { border-color: rgb(255 77 95 / 32%); background: rgb(255 77 95 / 8%); color: #ffb2bd; }
.role-pill--operator { border-color: rgb(100 181 255 / 30%); background: rgb(100 181 255 / 7%); color: #b6ddff; }
.role-pill--viewer { border-color: rgb(165 206 176 / 35%); background: rgb(165 206 176 / 8%); color: #c9efd0; }
.user-status { border-color: rgb(55 230 120 / 28%); color: #a5f5c0; }
.user-status--disabled { border-color: var(--line); color: var(--muted); }

@media (max-width: 1080px) {
  .login-shell { grid-template-columns: minmax(0,.8fr) minmax(390px,1fr); }
  .login-brand-copy > strong { font-size: clamp(46px,7vw,78px); }
  .manager-topbar { flex-wrap: wrap; gap: 8px 14px; padding-block: 9px; }
  .manager-nav { order: 3; width: 100%; }
  .manager-session { margin-left: auto; }
}

@media (max-width: 760px) {
  .login-shell { grid-template-columns: 1fr; }
  .login-brand-panel { display: none; }
  .login-form-panel { min-height: 100svh; align-items: center; }
  .login-logo-lockup img { width: 64px; height: 64px; }
  .login-card { padding-block: 18px; }
  .manager-session > span { display: none; }
  .session-logout { min-width: 56px; }
  .users-layout { grid-template-columns: 1fr; }
  .users-list-card { padding-inline: 0; }
  .users-list-card > .section-heading { padding-inline: 18px; }
}

/* User administration v1.6 */
.users-directory { display:grid; gap:12px; }
.user-account-card { display:grid; grid-template-columns:minmax(0,1.2fr) auto; gap:16px 18px; border:1px solid var(--line); border-radius:16px; background:rgb(255 255 255 / 2.5%); padding:16px; }
.user-account-main { display:flex; min-width:0; align-items:center; gap:12px; }
.user-account-avatar { width:44px; height:44px; flex:0 0 44px; display:grid; place-items:center; border:1px solid var(--line-strong); border-radius:12px; background:rgb(255 255 255 / 5%); color:#fff; font-size:17px; font-weight:900; }
.user-account-copy { min-width:0; display:grid; gap:3px; }
.user-account-copy > div { min-width:0; display:flex; align-items:center; gap:8px; }
.user-account-copy strong { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.user-account-copy > span,.user-account-copy small { color:var(--muted); overflow-wrap:anywhere; }
.user-account-copy > span { font-size:11px; font-weight:800; }
.user-account-copy small { font-size:10px; }
.self-pill { min-height:24px; display:inline-flex; align-items:center; border:1px solid rgb(100 181 255 / 26%); border-radius:999px; color:#b9ddff; font-size:9px; font-weight:850; padding:0 7px; white-space:nowrap; }
.user-account-meta { display:flex; align-items:center; justify-content:flex-end; gap:8px; flex-wrap:wrap; }
.user-status--pending { border-color:rgb(255 198 71 / 30%); background:rgb(255 198 71 / 7%); color:#ffe0a0; }
.user-actions { grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:8px; border-top:1px solid var(--line); padding-top:13px; }
.user-actions .compact-button { min-height:44px; }
.user-actions button:disabled { opacity:.42; cursor:not-allowed; }
.user-admin-dialog { width:min(560px,calc(100vw - 28px)); max-width:560px; max-height:min(90dvh,760px); overflow:auto; overscroll-behavior:contain; }
.user-admin-dialog form { display:grid; gap:14px; }
.user-admin-dialog form > p { margin:0 0 2px; }
.user-dialog-fields { display:grid; gap:12px; }
.user-dialog-fields label { display:grid; gap:7px; }
.user-dialog-fields label > span { color:#e0e0e6; font-size:12px; font-weight:800; }
.user-dialog-fields input,.user-dialog-fields select { min-height:50px; font-size:16px; }
.user-admin-dialog .form-alert { min-height:18px; }
.user-admin-dialog .button-danger { min-height:44px; }
@media (max-width:760px) {
  .user-account-card { grid-template-columns:1fr; }
  .user-account-meta { justify-content:flex-start; }
  .user-actions { display:grid; grid-template-columns:1fr 1fr; }
  .user-actions .compact-button { width:100%; }
}
@media (max-width:460px) {
  .user-actions { grid-template-columns:1fr; }
}

/* Operator Console v1.6.1 — one-screen control + compact TV display */
.topnav-action {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid rgb(100 181 255 / 24%);
  border-radius: 10px;
  background: rgb(100 181 255 / 7%);
  color: #b9ddff;
  padding: 8px 12px;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.topnav-action:hover { border-color: rgb(100 181 255 / 42%); background: rgb(100 181 255 / 12%); color: #fff; }
.topnav-action span { font-size: 16px; line-height: 1; }
.topnav-action strong { font-size: 11px; font-weight: 800; white-space: nowrap; }
.timer-controls { display: grid; width: min(480px, 100%); gap: 8px; }
.timer-controls .timer-button,
.timer-controls .medical-button { width: 100%; min-width: 0; margin-top: 0; }

/* On an operator laptop, the control behaves like a dedicated console instead of a page. */
@media (min-width: 900px) and (min-height: 560px) {
  .app-shell--control { height: 100dvh; min-height: 560px; overflow: hidden; padding-bottom: env(safe-area-inset-bottom); }
  .app-shell--control .topbar { min-height: 52px; padding-inline: max(14px, calc((100vw - 1500px)/2)); }
  .app-shell--control .brand-logo { width: 34px; height: 34px; flex-basis: 34px; }
  .app-shell--control .brand-copy strong { font-size: 10px; }
  .app-shell--control .brand-copy small { display: none; }
  .app-shell--control .topnav { gap: 4px; }
  .app-shell--control .topnav a { min-height: 36px; font-size: 11px; padding: 8px 10px; }
  .app-shell--control .topnav-action { min-height: 36px; padding: 7px 9px; }

  .main--control {
    display: grid;
    width: min(1500px, calc(100% - 24px));
    height: calc(100dvh - 52px - env(safe-area-inset-bottom));
    grid-template-rows: auto minmax(0, 1fr);
    padding: 7px 0 8px;
    overflow: hidden;
  }
  .main--control .context-bar { min-height: 34px; margin-bottom: 7px; }
  .main--control .context-bar strong { font-size: 10px; }
  .main--control .context-bar small,
  .main--control .context-meta { font-size: 10px; }
  .main--control .context-meta > span { padding: 5px 8px; }

  .main--control .control-layout { min-height: 0; height: 100%; grid-template-columns: minmax(0, 1fr) 252px; gap: 10px; }
  .main--control .match-stage { display: grid; min-height: 0; grid-template-rows: minmax(0, 1fr) auto auto; }
  .main--control .fighters-grid { min-height: 0; }
  .main--control .fighter-card { display: grid; min-height: 0; align-content: start; padding: 12px 14px; }
  .main--control .fighter-head { gap: 10px; }
  .main--control .side-label { margin-bottom: 3px; font-size: 8px; }
  .main--control .fighter-head h2 { font-size: clamp(22px, 2.15vw, 32px); }
  .main--control .fighter-head p { margin-top: 5px; font-size: 10px; }
  .main--control .ippon-state { gap: 3px; font-size: 7px; }
  .main--control .ippon-state span { width: 22px; height: 22px; }

  .main--control .score-grid { grid-template-columns: .88fr 1.35fr; gap: 7px; margin-top: 9px; }
  .main--control .score-block { min-height: 61px; gap: 4px; border-radius: 10px; padding: 8px 9px; }
  .main--control .score-block > span { font-size: 8px; }
  .main--control .score-block--penalty strong { min-height: 15px; font-size: 10px; }
  .main--control .score-dots,
  .main--control .penalty-dots { gap: 5px; }
  .main--control .score-dots i { width: 18px; height: 18px; }
  .main--control .penalty-dots i { width: 8px; height: 8px; }

  .main--control .fighter-actions { gap: 6px; margin-top: 8px; }
  .main--control .action { min-height: 40px; border-radius: 10px; padding: 7px 9px; }
  .main--control .action--primary { min-height: 46px; }
  .main--control .action--ippon { min-height: 54px; }
  .main--control .action--ippon > span strong { font-size: 15px; }
  .main--control .action--ippon > span small { font-size: 8px; }
  .main--control .action > span strong { font-size: 11px; }
  .main--control .action > span small,
  .main--control .action--direct small { font-size: 8px; }
  .main--control .action--direct { min-height: 38px; }
  .main--control .action--quiet { min-height: 36px; font-size: 9px; }
  .main--control kbd { min-width: 23px; min-height: 22px; border-radius: 5px; font-size: 8px; padding-inline: 4px; }

  .main--control .timer-panel {
    grid-template-columns: auto minmax(180px, .8fr) minmax(235px, .72fr);
    column-gap: 15px;
    justify-items: stretch;
    padding: 8px 14px;
  }
  .main--control .phase-chip { align-self: center; justify-self: start; font-size: 8px; padding: 5px 8px; }
  .main--control .timer { align-self: center; justify-self: center; margin: 0; font-size: clamp(70px, 10vh, 102px); line-height: .8; }
  .main--control .timer-controls { align-self: center; width: 100%; gap: 5px; }
  .main--control .timer-button,
  .main--control .medical-button { min-height: 48px; border-radius: 11px; padding: 7px 10px; }
  .main--control .timer-button strong,
  .main--control .medical-button strong { font-size: 13px; }
  .main--control .timer-button small,
  .main--control .medical-button small { font-size: 8px; }
  .main--control .event-notice { min-height: 30px; font-size: 8px; padding: 6px 12px; }

  .main--control .operator-panel { height: 100%; align-self: stretch; overflow: hidden; }
  .main--control .operator-heading { min-height: 48px; padding: 9px 10px; }
  .main--control .operator-heading span { font-size: 7px; }
  .main--control .operator-heading h2 { margin-top: 2px; font-size: 15px; }
  .main--control .operator-heading .touch-badge { font-size: 7px; padding: 4px 6px; }
  .main--control .operator-actions { grid-template-columns: 1fr 1fr; gap: 6px; padding: 8px; }
  .main--control .operator-actions button,
  .main--control .operator-actions a { min-height: 68px; border-radius: 10px; padding: 8px; }
  .main--control .operator-actions button > span,
  .main--control .operator-actions a > span { margin-bottom: 2px; font-size: 14px; }
  .main--control .operator-actions strong { font-size: 10px; }
  .main--control .operator-actions small { font-size: 8px; }
  .main--control .shortcuts-card { padding: 7px 8px; }
  .main--control .shortcuts-toggle { min-height: 36px; font-size: 9px; padding-inline: 5px; }
  .main--control .shortcuts-list { gap: 5px; margin-top: 4px; padding: 7px 4px 2px; }
  .main--control .shortcuts-list div { font-size: 8px; }
}

/* Especially short laptop/browser viewports: keyboard hints remain on action buttons,
   while the expanded shortcut reference is removed to protect the one-screen layout. */
@media (min-width: 900px) and (max-height: 720px) {
  .main--control .shortcuts-card { display: none; }
  .main--control .operator-actions button,
  .main--control .operator-actions a { min-height: 62px; }
  .main--control .fighter-card { padding-block: 9px; }
  .main--control .score-block { min-height: 54px; }
  .main--control .action--ippon { min-height: 48px; }
  .main--control .action--primary { min-height: 42px; }
  .main--control .timer-panel { padding-block: 6px; }
  .main--control .timer { font-size: clamp(62px, 9vh, 84px); }
  .main--control .timer-button,
  .main--control .medical-button { min-height: 42px; }
}

/* Compact TV scoreboard: athletes and clock share the same visual plane. */
.display-board { grid-template-rows: 58px minmax(0, 1fr) 34px; }
.display-header { padding-inline: clamp(14px, 2.2vw, 34px); }
.display-brand > img { width: 38px; height: 38px; }
.display-arena { display: grid; min-height: 0; grid-template-columns: minmax(0, 1fr) minmax(300px, .82fr) minmax(0, 1fr); overflow: hidden; }
.display-arena > .fighter-card { display: grid; min-width: 0; min-height: 0; align-content: center; border-radius: 0; padding: clamp(18px, 2vw, 34px); }
.display-arena > .fighter-card--aka { border-left: 1px solid var(--line); }
.display-arena .fighter-head { display: grid; justify-items: start; gap: 12px; }
.display-arena .fighter-card--aka .fighter-head { justify-items: end; }
.display-arena .fighter-head > div:first-child { width: 100%; }
.display-arena .fighter-head h2 { font-size: clamp(28px, 3.6vw, 66px); white-space: normal; text-wrap: balance; }
.display-arena .fighter-head p { font-size: clamp(10px, 1.05vw, 17px); white-space: normal; }
.display-arena .side-label { font-size: clamp(9px, .8vw, 13px); }
.display-arena .ippon-state { grid-auto-flow: column; align-items: center; justify-content: start; }
.display-arena .fighter-card--aka .ippon-state { justify-content: end; }
.display-arena .score-grid { grid-template-columns: .85fr 1.15fr; gap: 10px; margin-top: clamp(14px, 2vh, 24px); }
.display-arena .score-block { min-height: 86px; padding: clamp(10px, 1vw, 16px); }
.display-arena .score-block--penalty strong { font-size: clamp(12px, 1.25vw, 20px); }
.display-arena .score-dots i { width: clamp(26px, 2.6vw, 46px); height: clamp(26px, 2.6vw, 46px); }
.display-arena .penalty-dots i { width: clamp(9px, .8vw, 13px); height: clamp(9px, .8vw, 13px); }
.display-timer-wrap { min-width: 0; border-inline: 1px solid var(--line); padding: 18px clamp(10px, 1.4vw, 22px); background: radial-gradient(circle at 50% 42%, rgb(255 255 255 / 6%), transparent 55%), #08080c; }
.display-status { margin: 0; font-size: clamp(9px, 1vw, 14px); }
.timer--display { margin: clamp(8px, 2vh, 20px) 0; font-size: clamp(92px, 13vw, 240px); line-height: .78; }
.display-notice { min-height: 22px; font-size: clamp(9px, 1vw, 16px); text-align: center; }
.display-center-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; margin-top: 18px; color: #898994; font-size: clamp(8px, .75vw, 11px); text-transform: uppercase; }
.display-center-meta strong,
.display-center-meta span { border: 1px solid var(--line); border-radius: 999px; padding: 5px 8px; }
.display-footer { padding-inline: clamp(14px, 2.2vw, 34px); }
.display-center-overlay { inset: 58px 0 34px; }
.app-shell--display .result-layer { inset: 58px 0 34px; }

@media (max-width: 900px), (orientation: portrait) {
  .display-board { grid-template-rows: 50px minmax(0, 1fr) 30px; }
  .display-arena { grid-template-columns: 1fr 1fr; grid-template-rows: minmax(150px, .72fr) minmax(0, 1fr); }
  .display-timer-wrap { grid-column: 1 / -1; grid-row: 1; border-inline: 0; border-bottom: 1px solid var(--line); padding: 8px 14px; }
  .display-arena > .fighter-card { grid-row: 2; padding: 12px; }
  .display-arena > .fighter-card--shiro { grid-column: 1; }
  .display-arena > .fighter-card--aka { grid-column: 2; }
  .display-arena .fighter-head h2 { font-size: clamp(22px, 5vw, 44px); }
  .display-arena .score-grid { margin-top: 9px; }
  .display-arena .score-block { min-height: 66px; padding: 8px; }
  .timer--display { margin: 0; font-size: min(25vw, 16vh); }
  .display-center-meta { margin-top: 5px; }
  .display-center-overlay { inset: 50px 0 30px; }
  .app-shell--display .result-layer { inset: 50px 0 30px; }
}

@media (hover: none), (pointer: coarse) {
  .topnav-action { min-height: 44px; }
  .main--control .action--ippon { min-height: 64px; }
  .main--control .action--primary { min-height: 54px; }
  .main--control .timer-button,
  .main--control .medical-button { min-height: 52px; }
  .main--control .operator-actions button,
  .main--control .operator-actions a { min-height: 72px; }
}

/* v1.7 Event-ready operator and public display */
.main--control .side-label {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  margin-bottom: 7px;
  padding: 5px 10px;
  color: #111118;
  background: #f7f7fb;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .16em;
}
.main--control .fighter-card--aka .side-label { border-color: rgb(255 77 95 / 55%); color: #fff; background: #a60f20; }
.main--control .fighter-card--last-action { box-shadow: inset 0 0 0 2px rgb(240 192 64 / 72%), 0 0 0 1px rgb(240 192 64 / 12%); }

.operator-last-action { margin: 8px 8px 0; border: 1px solid var(--line); border-radius: 11px; padding: 10px; background: rgb(255 255 255 / 3%); }
.operator-last-action > span { display: block; margin-bottom: 5px; color: var(--muted); font-size: 8px; font-weight: 850; letter-spacing: .14em; text-transform: uppercase; }
.operator-last-action > strong { display: block; color: #f3f3f7; font-size: 11px; line-height: 1.35; overflow-wrap: anywhere; }
.operator-last-action--shiro { border-color: rgb(255 255 255 / 24%); background: rgb(255 255 255 / 6%); }
.operator-last-action--aka { border-color: rgb(255 77 95 / 34%); background: rgb(255 77 95 / 8%); }

.operator-help { margin: 0 8px 8px; border: 1px solid var(--line); border-radius: 11px; background: rgb(255 255 255 / 2%); overflow: clip; }
.operator-help summary { min-height: 44px; display: grid; grid-template-columns: 24px 1fr auto; align-items: center; gap: 7px; padding: 7px 9px; cursor: pointer; list-style: none; touch-action: manipulation; }
.operator-help summary::-webkit-details-marker { display: none; }
.operator-help summary > span { width: 23px; height: 23px; display: grid; place-items: center; border: 1px solid var(--line-strong); border-radius: 50%; color: #9fd0ff; font-weight: 900; }
.operator-help summary strong { font-size: 10px; }
.operator-help summary small { color: var(--muted); font-size: 8px; }
.operator-help summary:focus-visible { outline: 3px solid #7bbcff; outline-offset: -3px; }
.operator-help-body { display: grid; gap: 6px; border-top: 1px solid var(--line); padding: 9px; }
.operator-help-body p { margin: 0 0 2px; color: var(--muted); font-size: 9px; line-height: 1.45; }
.operator-help-body > div { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 7px; color: #cfcfd7; font-size: 8px; }
.operator-help-body kbd { min-width: 24px; }

.decision-card--transition { max-width: 680px; }
.transition-next { display: grid; gap: 5px; margin: 20px 0 8px; border: 1px solid rgb(240 192 64 / 28%); border-radius: 13px; padding: 16px; background: rgb(240 192 64 / 7%); }
.transition-next span { color: #d7b953; font-size: 9px; font-weight: 850; letter-spacing: .14em; text-transform: uppercase; }
.transition-next strong { font-size: clamp(18px, 2vw, 28px); }

/* Dedicated TV layout. No fighter-card CSS participates in this grid. */
.display-board { grid-template-rows: 60px minmax(0, 1fr) 34px; }
.display-arena--event { display: grid; min-height: 0; grid-template-columns: minmax(0, 1fr) minmax(290px, .72fr) minmax(0, 1fr); grid-template-rows: 1fr; overflow: hidden; }
.display-fighter { position: relative; display: grid; min-width: 0; min-height: 0; align-content: center; gap: clamp(12px, 2vh, 24px); padding: clamp(20px, 2.6vw, 44px); }
.display-fighter--shiro { background: radial-gradient(circle at 0 0, rgb(255 255 255 / 9%), transparent 48%), #15151d; }
.display-fighter--aka { justify-items: end; text-align: right; background: radial-gradient(circle at 100% 0, rgb(255 50 70 / 18%), transparent 50%), #24070d; }
.display-side-badge { min-height: 36px; display: inline-flex; width: max-content; align-items: center; border: 1px solid rgb(255 255 255 / 26%); border-radius: 999px; padding: 7px 13px; color: #111118; background: #f7f7fb; font-size: clamp(12px, 1vw, 16px); font-weight: 950; letter-spacing: .18em; }
.display-fighter--aka .display-side-badge { border-color: rgb(255 77 95 / 54%); color: #fff; background: #a60f20; }
.display-fighter-name { display: flex; min-width: 0; align-items: center; gap: clamp(10px, 1vw, 18px); margin: 0; font-size: clamp(34px, 4.2vw, 72px); line-height: .98; text-wrap: balance; }
.display-fighter--aka .display-fighter-name { flex-direction: row-reverse; }
.display-fighter-name .country-flag { flex: 0 0 auto; font-size: .72em; }
.display-fighter > p { max-width: 100%; margin: -7px 0 0; color: #a9a9b3; font-size: clamp(12px, 1.15vw, 19px); line-height: 1.35; overflow-wrap: anywhere; }
.display-score-row { display: grid; width: 100%; grid-template-columns: .8fr 1.2fr; gap: 10px; }
.display-score-item { min-height: 94px; display: grid; align-content: center; gap: 9px; border: 1px solid var(--line); border-radius: 14px; padding: 13px 15px; background: rgb(0 0 0 / 12%); }
.display-score-item > span { color: #a9a9b3; font-size: clamp(9px, .8vw, 12px); font-weight: 850; letter-spacing: .11em; text-transform: uppercase; }
.display-score-item--penalty strong { min-height: 21px; color: #ffbd3e; font-size: clamp(13px, 1.3vw, 21px); }
.display-fighter--aka .display-score-item { justify-items: end; }
.display-fighter .score-dots i { width: clamp(28px, 2.5vw, 44px); height: clamp(28px, 2.5vw, 44px); }
.display-fighter .penalty-dots i { width: clamp(9px, .75vw, 13px); height: clamp(9px, .75vw, 13px); }
.display-clock { display: grid; min-width: 0; min-height: 0; place-items: center; align-content: center; border-inline: 1px solid var(--line); padding: clamp(14px, 2vw, 28px); background: radial-gradient(circle at 50% 42%, rgb(255 255 255 / 7%), transparent 57%), #08080c; text-align: center; }
.display-clock .display-status { font-size: clamp(10px, .9vw, 14px); }
.display-clock .timer--display { margin: clamp(10px, 2vh, 24px) 0; font-size: clamp(82px, 10.5vw, 178px); line-height: .78; }
.display-clock .display-notice { min-height: 24px; font-size: clamp(10px, 1vw, 16px); }
.display-clock .display-center-meta { margin-top: 18px; }

.display-center-overlay { inset: 60px 0 34px; background: rgb(1 1 4 / 82%); }
.display-center-overlay::before { content: ''; position: absolute; inset: 18% 12%; z-index: -1; border: 1px solid rgb(255 255 255 / 10%); border-radius: 28px; background: rgb(10 10 16 / 88%); box-shadow: 0 30px 80px rgb(0 0 0 / 42%); }
.display-center-overlay span { font-size: clamp(11px, 1.35vw, 20px); }
.display-center-overlay strong { font-size: clamp(58px, 11vw, 156px); }
.display-center-overlay small { max-width: min(900px, 76vw); color: #b6b6c0; font-size: clamp(12px, 1.35vw, 21px); font-weight: 700; line-height: 1.4; text-align: center; text-wrap: balance; }
.display-center-overlay--draw strong { color: #f0c040; }
.display-center-overlay--decision strong { color: #fff; }

/* Only genuinely narrow displays stack. A TV/notebook stays horizontal. */
@media (max-width: 720px) {
  .display-board { grid-template-rows: 50px minmax(0, 1fr) 30px; }
  .display-arena--event { grid-template-columns: 1fr 1fr; grid-template-rows: minmax(132px, .55fr) minmax(0, 1fr); }
  .display-clock { grid-column: 1 / -1; grid-row: 1; border-inline: 0; border-bottom: 1px solid var(--line); padding: 8px 12px; }
  .display-fighter { grid-row: 2; gap: 8px; padding: 11px; }
  .display-fighter--shiro { grid-column: 1; }
  .display-fighter--aka { grid-column: 2; }
  .display-side-badge { min-height: 28px; padding: 5px 8px; font-size: 9px; }
  .display-fighter-name { gap: 6px; font-size: clamp(20px, 5vw, 36px); }
  .display-fighter > p { display: none; }
  .display-score-row { grid-template-columns: 1fr; gap: 5px; }
  .display-score-item { min-height: 58px; gap: 4px; padding: 7px; }
  .display-clock .timer--display { margin: 0; font-size: min(25vw, 15vh); }
  .display-clock .display-center-meta { margin-top: 4px; }
  .display-center-overlay { inset: 50px 0 30px; }
}

@media (min-width: 900px) and (max-height: 780px) {
  .main--control .side-label { min-height: 24px; margin-bottom: 4px; padding: 4px 8px; font-size: 10px; }
  .main--control .operator-last-action { padding: 8px; }
  .main--control .operator-actions button,
  .main--control .operator-actions a { min-height: 60px; }
  .main--control .operator-help summary { min-height: 38px; }
}

/* v1.8 Bracket handoff --------------------------------------------------- */
.result-summary { display: grid; justify-items: center; text-align: center; }
.result-card--handoff { width: min(1160px, 100%); grid-template-columns: minmax(250px, .62fr) minmax(0, 1.38fr); align-items: center; gap: clamp(20px, 3vw, 42px); }
.result-card--handoff .result-summary { min-width: 0; }
.result-card--handoff .result-summary h2 { margin-top: 8px; font-size: clamp(58px, 8vw, 108px); }
.result-card--handoff .result-summary h3 { max-width: 100%; font-size: clamp(22px, 3vw, 38px); overflow-wrap: anywhere; }
.result-card--handoff .result-summary small { font-size: 13px; }
.next-bout-card { width: 100%; min-width: 0; display: grid; gap: 14px; border: 1px solid var(--line-strong); border-radius: 20px; background: #111117; padding: clamp(18px, 2vw, 26px); box-shadow: 0 24px 64px rgb(0 0 0 / 28%); color: #f5f5f7; text-align: left; }
.next-bout-head { display: flex; min-width: 0; align-items: flex-start; justify-content: space-between; gap: 16px; }
.next-bout-head > div:first-child { min-width: 0; }
.next-bout-head span, .next-bout-card > span { color: #f05260; font-size: 9px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.next-bout-head h3, .next-bout-card > h3 { margin: 4px 0 0; font-size: clamp(22px, 2.4vw, 34px); line-height: 1.05; text-wrap: balance; }
.next-bout-pills { display: flex; max-width: 52%; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.next-bout-pills span { border: 1px solid var(--line); border-radius: 999px; background: rgb(255 255 255 / 3%); color: #c6c6cf; padding: 6px 8px; font-size: 8px; letter-spacing: .05em; }
.next-bout-help, .next-bout-card--manual > p, .next-bout-card--empty > p { margin: 0; color: #a8a8b2; font-size: 12px; line-height: 1.5; text-transform: none; letter-spacing: normal; }
.next-bout-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: end; gap: 10px; }
.next-bout-fighter { min-width: 0; display: grid; gap: 7px; border: 1px solid var(--line); border-radius: 14px; background: rgb(255 255 255 / 2%); padding: 12px; }
.next-bout-fighter--aka { border-color: rgb(255 77 95 / 25%); background: rgb(255 77 95 / 5%); }
.next-bout-fighter > span { color: #e7e7ec; font-size: 10px; font-weight: 950; letter-spacing: .14em; }
.next-bout-fighter--aka > span { color: #ff7180; }
.next-bout-fighter select { width: 100%; min-width: 0; min-height: 48px; border: 1px solid var(--line-strong); border-radius: 10px; background-color: #0c0c11; color: #f4f4f7; padding: 0 34px 0 11px; font-size: 14px; font-weight: 750; text-overflow: ellipsis; }
.next-bout-fighter select:focus-visible { outline: 3px solid #7bbcff; outline-offset: 2px; border-color: #7bbcff; }
.next-bout-fighter small { color: #777781; font-size: 9px; }
.next-bout-vs { align-self: center; color: #777781; font-size: 10px; letter-spacing: .12em; }
.next-bout-warning { margin: 0; border-left: 3px solid #d7b953; background: rgb(240 192 64 / 6%); color: #a8a8b2; padding: 9px 11px; font-size: 10px; line-height: 1.45; text-transform: none; letter-spacing: normal; }
.next-bout-warning strong { color: #e7cc72; }
.next-bout-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.next-bout-actions .button-primary, .next-bout-actions .button-secondary { min-height: 44px; }
.next-bout-card--manual, .next-bout-card--empty { align-content: center; }

@media (max-width: 900px) {
  .result-card--handoff { grid-template-columns: 1fr; gap: 18px; }
  .result-card--handoff .result-summary h2 { font-size: clamp(52px, 14vw, 88px); }
  .next-bout-head { display: grid; }
  .next-bout-pills { max-width: none; justify-content: flex-start; }
}

@media (max-width: 620px) {
  .next-bout-grid { grid-template-columns: 1fr; }
  .next-bout-vs { justify-self: center; }
  .next-bout-fighter select { min-height: 52px; font-size: 16px; }
  .next-bout-actions { display: grid; grid-template-columns: 1fr; }
  .next-bout-actions .button-primary, .next-bout-actions .button-secondary { width: 100%; min-height: 48px; }
}


.storage-failure-banner {
  position: fixed;
  z-index: 9999;
  inset-inline: max(16px, env(safe-area-inset-left)) max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  max-width: 760px;
  margin-inline: auto;
  padding: 14px 18px;
  border: 1px solid currentColor;
  border-radius: 12px;
  background: Canvas;
  color: CanvasText;
  box-shadow: 0 12px 36px rgb(0 0 0 / 24%);
  font-size: 1rem;
  line-height: 1.4;
}