.control-page { width: 100vw; height: 100vh; height: 100dvh; min-height: 320px; overflow: hidden; overscroll-behavior: none; background: #020304; }
.control-shell { width: 100vw; height: 100vh; height: 100dvh; min-height: 320px; display: grid; grid-template: 11% 73% 16% / 1fr 1fr; position: relative; padding: min(2.7vw,2.4dvh) 1.8vw min(2.4vw,2.1dvh); border: .45vw solid #292b2e; border-radius: min(4.8vw,5dvh); background: linear-gradient(180deg,#07090c,#111419 87%,#050607); box-shadow: inset 0 0 0 .3vw #030303, inset 0 0 0 .5vw #777, inset 0 0 1.2vw #000; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.control-header { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 3.9vw; border-bottom: 1px solid rgba(255,255,255,.1); color: #f5f5f5; }
.room-label { font-size: 1.7vw; letter-spacing: .03em; }.room-label strong { font: inherit; }
.round-status { justify-self: center; font-size: 1.8vw; font-weight: 800; }.round-status span:not(:first-child) { display: none; }
.header-actions { justify-self: end; display: flex; gap: .65vw; }
.settings-button { display: grid; place-items: center; width: clamp(38px,3.6vw,48px); height: clamp(38px,3.6vw,48px); padding: 0; color: #d9d9d9; border: 1px solid rgba(255,255,255,.16); border-radius: clamp(7px,.65vw,9px); background: linear-gradient(#25282d,#17191d); cursor: pointer; }
.settings-button svg { display: block; width: clamp(20px,1.8vw,24px); height: clamp(20px,1.8vw,24px); margin: auto; fill: none; stroke: currentColor; stroke-width: 1.7; }

.fighter-zone { grid-row: 2; position: relative; min-width: 0; overflow: hidden; border: 1px solid rgba(255,255,255,.13); isolation: isolate; }
.fighter-zone::before, .fighter-zone::after { content: ""; position: absolute; inset: 0; z-index: -2; }
.fighter-zone::after { z-index: -1; opacity: .25; background: repeating-linear-gradient(135deg,transparent 0 3.2vw,rgba(255,255,255,.035) 3.25vw 3.32vw,transparent 3.38vw 4.8vw); }
.blue-zone::before { background: radial-gradient(circle at 58% 43%,#053ca7 0,#001f64 38%,#001238 78%,#000b26 100%); }
.red-zone::before { background: radial-gradient(circle at 42% 43%,#c40008 0,#790004 38%,#430002 78%,#270001 100%); }
.fighter-zone h2 { position: absolute; top: 3.4%; left: 0; width: 100%; margin: 0; text-align: center; font-size: 1.9vw; line-height: 1; z-index: 3; }
.blue-zone h2 { color: #1592ff; }.red-zone h2 { color: #ff292f; }
.round-score { position: absolute; display: grid; place-items: center; aspect-ratio: 1; border-radius: 50%; color: white; cursor: pointer; border: .22vw solid rgba(255,255,255,.68); transition: transform .08s, filter .08s; box-shadow: inset 0 0 0 .55vw rgba(255,255,255,.08), inset 0 1vw 1.3vw rgba(255,255,255,.15), inset 0 -1vw 1.4vw rgba(0,0,0,.28), 0 .5vw .8vw rgba(0,0,0,.55), 0 0 0 .32vw rgba(0,0,0,.45); }
.round-score::after { content: ""; position: absolute; inset: .55vw; border-radius: 50%; border: .08vw solid rgba(255,255,255,.26); pointer-events: none; }
.round-score:active { transform: scale(.96); filter: brightness(1.2); }.round-score:disabled { opacity: 1; cursor: default; filter: none; }
.round-score b { font: 800 5.2vw/1 Arial, sans-serif; text-shadow: 0 .25vw .35vw rgba(0,0,0,.5); }
.score-two b { font-size: 11vw; }
.score-three b { font-size: 9.5vw; }
.score-one b { font-size: 7vw; }
.penalty-button b { font-family: "Noto Sans SC",sans-serif; font-size: 5.2vw; }.penalty-button span { position: absolute; opacity: 0; }
.blue-zone .round-score { background: radial-gradient(circle at 48% 38%,#197dff,#0753d9 48%,#002b91 75%,#001d61); border-color: #42a9ff; }
.red-zone .round-score { background: radial-gradient(circle at 48% 38%,#ff262b,#e60008 48%,#9f0005 75%,#600003); border-color: #ff6a6d; }
.score-three { width: 34%; top: 1%; }.score-two { width: 48%; top: 22%; }.penalty-button { width: 26%; bottom: 2%; }.score-one { width: 22%; bottom: 4.5%; }
.blue-zone .score-three { left: 1%; }.blue-zone .score-two { left: 31%; }.blue-zone .penalty-button { left: 3%; }.blue-zone .score-one { right: 1%; }
.red-zone .score-three { right: 1%; }.red-zone .score-two { right: 31%; }.red-zone .penalty-button { right: 3%; }.red-zone .score-one { left: 1%; }

.match-toolbar { grid-column: 1 / -1; grid-row: 3; display: grid; grid-template-columns: repeat(5,1fr); align-items: center; gap: 1.2vw; padding: 1.2% 4.8% .2%; position: relative; }
.match-toolbar button { height: 100%; min-height: 0; display: flex; align-items: center; justify-content: center; gap: 1.15vw; color: #eee; border: 1px solid #4b4e53; border-radius: .65vw; background: linear-gradient(145deg,#272a2f,#17191d); box-shadow: inset 0 1px rgba(255,255,255,.08), 0 .3vw .6vw rgba(0,0,0,.45); cursor: pointer; }
.match-toolbar button:disabled { opacity: .35; cursor: default; }.match-toolbar button span { font-size: 2.1vw; line-height: 1; }.match-toolbar button b { font-size: 1.85vw; font-weight: 500; }
.status-label { position: absolute; right: 4.6vw; top: -.1vw; color: #aaa; font-size: .65vw; opacity: .65; }
.rotate-notice { display: none; }
.score-pop { position: fixed; z-index: 10; pointer-events: none; font: 800 3.3vw/1 Arial,sans-serif; animation: score-pop .55s ease-out forwards; }
@keyframes score-pop { from { opacity: 1; transform: translate(-50%,-10px) scale(.8); } to { opacity: 0; transform: translate(-50%,-65px) scale(1.2); } }

@media (max-height: 600px), (max-width: 900px) {
  .control-shell { grid-template-rows: 10% 75% 15%; padding: 0; border: 0; border-radius: 0; box-shadow: none; }
  .control-header { padding-inline: 3vw; }
}

@media (orientation: portrait) and (max-width: 700px) {
  .control-page { min-height: 0; }
  .control-shell { position: fixed; left: 50%; top: 50%; width: 100vh; width: 100dvh; height: 100vw; min-height: 0; transform: translate(-50%,-50%) rotate(90deg); transform-origin: center; }
  .rotate-notice { display: none; }
}