.display-page { height: 100vh; height: 100dvh; overflow: hidden; background: #000; }
.room-entry[hidden], .scoreboard[hidden] { display: none; }
.room-entry { width: 100vw; height: 100vh; display: grid; place-items: center; padding: 24px; background: radial-gradient(circle at 50% 45%, #111d2d 0, #05080d 52%, #000 100%); }
.room-entry-card { width: min(420px, 100%); display: grid; gap: 14px; padding: 36px; border: 1px solid rgba(255,255,255,.1); border-radius: 18px; background: rgba(10,16,25,.9); box-shadow: 0 28px 70px rgba(0,0,0,.45); }
.room-entry-card > p { margin: 0 0 4px; color: #458fda; font: 700 10px/1 "Arial Narrow", sans-serif; letter-spacing: .2em; }
.room-entry-card h1 { margin: 0 0 12px; font-size: 25px; }
.room-entry-card input { width: 100%; height: 56px; padding: 0 16px; border: 1px solid rgba(255,255,255,.14); border-radius: 10px; outline: none; color: white; background: #070c13; font-size: 20px; font-weight: 700; letter-spacing: .2em; text-align: center; text-transform: uppercase; }
.room-entry-card input:focus { border-color: #168bff; box-shadow: 0 0 0 3px rgba(8,120,249,.14); }
.room-entry-card button { height: 50px; border: 0; border-radius: 10px; color: white; background: linear-gradient(135deg, #1589f7, #086bdc); cursor: pointer; font-weight: 700; }
.room-entry-card button:disabled { opacity: .5; cursor: default; }
.room-entry-card > span { min-height: 18px; color: #ff7885; text-align: center; font-size: 11px; }

.scoreboard { width: 100vw; height: 100vh; height: 100dvh; min-width: 720px; min-height: 405px; display: grid; grid-template-rows: 14% 13% 73%; border: .35vw solid #101010; background: #000; color: #fff; overflow: hidden; position: relative; container-type: inline-size; }
.cast-button { position: absolute; right: 1.2cqw; top: 1.2cqw; z-index: 30; display: flex; align-items: center; gap: .55cqw; height: 3.2cqw; padding: 0 1cqw; border: 1px solid rgba(255,255,255,.42); border-radius: .45cqw; color: white; background: rgba(15,17,21,.86); box-shadow: 0 .3cqw .8cqw rgba(0,0,0,.45); cursor: pointer; font-size: 1cqw; }
.cast-button svg { width: 1.35cqw; stroke: currentColor; }.cast-button[hidden] { display: none; }
.display-header { display: grid; grid-template-columns: 1fr 2.2fr 1fr; align-items: center; padding: 0 2cqw; background: #020202; border-bottom: 1px solid #111; }
.event-brand { display: flex; align-items: center; gap: .6cqw; color: #bcbcbc; font-size: 1.55cqw; font-weight: 800; white-space: nowrap; }
.event-logo { width: 4cqw; height: auto; }
.event-logo circle, .event-logo path { stroke: none; }.event-logo circle { fill: #02c985; }.event-logo path:nth-of-type(1) { fill: #0867ff; }.event-logo path:nth-of-type(2) { fill: #ffda00; }.event-logo path:nth-of-type(3) { fill: #e71921; }
.display-header h1 { margin: 0; text-align: center; font-size: 3.8cqw; line-height: 1; white-space: nowrap; letter-spacing: .02em; }
.display-header h1 strong { font: inherit; }.display-header h1 em { padding: 0 .35cqw; font-style: normal; }

.name-row { display: grid; grid-template-columns: 1fr 1fr; }
.name-row h2 { display: flex; align-items: center; justify-content: center; margin: 0; font-size: 3.35cqw; line-height: 1; letter-spacing: .06em; }
.blue-name-title { background: linear-gradient(110deg,#072664,#001951 68%,#00143e); }
.red-name-title { background: linear-gradient(250deg,#9d0007,#5e0005 68%,#3e0003); }

.score-area { display: grid; grid-template-columns: 38% 24% 38%; min-height: 0; }
.display-fighter { display: grid; grid-template-rows: 22% 56% 22%; min-width: 0; overflow: hidden; }
.display-blue { background: linear-gradient(130deg,#00183f,#043cae 58%,#002477); }
.display-red { background: linear-gradient(230deg,#5e0000,#e20009 58%,#8b0004); }
.country-strip { display: flex; align-items: center; min-width: 0; background: rgba(0,0,0,.72); }
.country-strip strong { flex: 1; text-align: center; font-size: 4.4cqw; line-height: 1; letter-spacing: .08em; white-space: nowrap; }
.country-flag { position: relative; display: block; width: 12cqw; height: 100%; border: .55cqw solid #070707; background: #e5151c; overflow: hidden; }
.country-flag i { position: absolute; color: #ffe300; font: normal 1.05cqw/1 Arial,sans-serif; }.country-flag .star-main { left: 1.15cqw; top: 1.2cqw; font-size: 2.65cqw; }.country-flag i:nth-child(2) { left: 4.25cqw; top: .8cqw; transform: rotate(18deg); }.country-flag i:nth-child(3) { left: 5.1cqw; top: 2cqw; transform: rotate(28deg); }.country-flag i:nth-child(4) { left: 5cqw; top: 3.45cqw; }.country-flag i:nth-child(5) { left: 4cqw; top: 4.4cqw; transform: rotate(18deg); }
.camera-icon { width: 13cqw; height: 100%; padding: 3.3cqw 3cqw; fill: none; stroke: #fff; stroke-width: 4; }
.display-blue .country-strip strong { order: 1; }.display-blue .country-strip .country-flag { order: 2; }.display-blue .country-strip .camera-icon { order: 3; }
.score-stage { display: flex; align-items: center; min-width: 0; background: rgba(0,0,0,.06); }
.big-score { flex: 1; text-align: center; color: white; font: 700 18cqw/.8 Arial, sans-serif; font-variant-numeric: tabular-nums; letter-spacing: -.07em; text-shadow: 0 .5cqw 1.2cqw rgba(0,0,0,.22); }
.fighter-footer { display: grid; grid-template-columns: 1fr; align-content: center; padding: 0 4cqw; background: linear-gradient(90deg,rgba(0,0,0,.58),rgba(0,0,0,.16)); }
.fighter-footer > span { font-size: 1.55cqw; }.fighter-footer b { font-size: 3.65cqw; line-height: 1; }
.red-footer { text-align: right; background: linear-gradient(270deg,rgba(0,0,0,.58),rgba(0,0,0,.16)); }

.match-center { position: relative; display: grid; grid-template-rows: 29% 36% 35%; text-align: center; background: #000; border-inline: 1px solid #090909; }
.match-number { display: grid; align-content: center; border-bottom: 1px solid #111; }.match-number span { font-size: 2.35cqw; font-weight: 800; }.match-number strong { font-size: 5.5cqw; line-height: .95; }
.match-center time { display: grid; place-items: center; margin: 0 -.5cqw; border: .18cqw solid #eee; border-radius: .25cqw; color: #edff00; background: #000; font: 700 7.5cqw/.9 Arial, sans-serif; font-variant-numeric: tabular-nums; letter-spacing: -.08em; z-index: 1; }
.round-number { display: grid; place-items: center; }.round-number > span { font-size: 5.7cqw; line-height: 1; font-weight: 800; }
.connection-state { position: absolute; left: 50%; bottom: .5cqw; transform: translateX(-50%); color: #aaa; font-size: .7cqw; white-space: nowrap; }
.connection-state[data-status="RUNNING"] { color: #edff00; }.connection-state[data-status="PAUSED"] { color: #ffca52; }.connection-state[data-status="ROUND_END"], .connection-state[data-status="FINISHED"] { color: #ff5a65; }

@media (max-aspect-ratio: 4/3) {
  .scoreboard { min-width: 0; }
  .display-header h1 { font-size: 3.2cqw; }
}

@media (orientation: portrait) and (max-width: 900px) {
  .scoreboard:not([hidden]) { position: fixed; left: 50%; top: 50%; width: 100vh; width: 100dvh; height: 100vw; min-width: 0; min-height: 0; transform: translate(-50%,-50%) rotate(90deg); transform-origin: center; }
}