:root {
  color-scheme: dark;
  --ink: #f7f2ef;
  --muted: #b8aeb8;
  --panel: rgba(34, 25, 43, .84);
  --panel-strong: rgba(27, 20, 36, .95);
  --line: rgba(255, 239, 229, .14);
  --sun: #ffb45d;
  --coral: #ff806d;
  --plum: #7b4f89;
  --night: #171321;
  --mint: #8fe0c1;
  --danger: #ff6573;
  font-family: Pretendard, "Noto Sans KR", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--night); color: var(--ink); }
button, input, textarea, select { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }

.entry-shell { min-height: 100svh; display: grid; place-items: center; padding: 24px; overflow: hidden; position: relative; background: radial-gradient(circle at 70% 12%, rgba(255,180,93,.2), transparent 31%), linear-gradient(145deg,#5f3f6c 0,#382642 42%,#171321 100%); }
.entry-shell::before { content: ""; position: absolute; inset: 0; opacity: .25; background-image: linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px); background-size: 40px 40px; mask-image: linear-gradient(to bottom,black,transparent 80%); }
.sunset-orb { position: absolute; width: min(72vw,760px); aspect-ratio: 1; border-radius: 50%; left: -24vw; bottom: -48vw; background: linear-gradient(#ffcb72,#ff7968 48%,#704678); filter: blur(1px); box-shadow: 0 0 100px rgba(255,126,95,.22); }
.entry-card { position: relative; z-index: 1; width: min(920px,100%); padding: clamp(28px,5vw,58px); border: 1px solid rgba(255,239,229,.18); border-radius: 32px; background: rgba(27,20,36,.78); box-shadow: 0 40px 120px rgba(8,5,14,.5); backdrop-filter: blur(22px); }
.entry-heading { text-align: center; }
.school-chip { display: inline-flex; padding: 7px 12px; border: 1px solid rgba(255,184,102,.32); border-radius: 999px; color: #ffc784; background: rgba(255,174,84,.08); font-size: .8rem; font-weight: 800; letter-spacing: .08em; }
.entry-heading h1 { margin: 18px 0 10px; font-size: clamp(3rem,8vw,6.5rem); line-height: .95; letter-spacing: -.075em; }
.entry-heading p { margin: 0; color: var(--muted); font-size: 1rem; }
.role-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 34px; }
.role-card { min-height: 170px; display: grid; place-items: center; align-content: center; gap: 7px; padding: 22px; border: 1px solid var(--line); border-radius: 22px; color: var(--ink); background: rgba(255,255,255,.035); cursor: pointer; transition: transform .16s ease,border-color .16s ease,background .16s ease; }
.role-card:hover, .role-card:focus-visible { transform: translateY(-3px); border-color: rgba(255,184,102,.55); background: rgba(255,174,84,.08); outline: none; }
.role-icon { width: 64px; height: 52px; display: grid; place-items: center; border: 1px solid rgba(255,190,113,.32); border-radius: 14px; color: #ffd199; background: rgba(255,174,84,.1); font-size: .8rem; font-weight: 900; letter-spacing: .08em; }
.role-card strong { font-size: 1.25rem; }
.role-card small { color: var(--muted); font-size: .85rem; }
.room-join { width: min(440px,100%); margin: 30px auto 0; display: grid; gap: 10px; }
.room-join label { color: #d7cad5; font-size: .9rem; font-weight: 700; }
.room-join input { height: 72px; border: 1px solid rgba(255,239,229,.2); border-radius: 16px; color: white; background: rgba(7,5,12,.34); font-size: 2.3rem; font-weight: 800; letter-spacing: .3em; text-align: center; outline: none; }
.room-join input:focus { border-color: var(--sun); box-shadow: 0 0 0 4px rgba(255,180,93,.12); }
.room-join p { margin: 2px 0 0; color: #998e9d; font-size: .8rem; line-height: 1.5; text-align: center; }
.primary-button, .secondary-button, .danger-button { min-height: 60px; border-radius: 13px; font-weight: 850; cursor: pointer; }
.primary-button { border: 0; color: #241520; background: linear-gradient(135deg,#ffc46f,#ff8a6a); }
.secondary-button { border: 1px solid var(--line); color: #ece4e9; background: rgba(255,255,255,.035); }
.danger-button { border: 1px solid rgba(255,101,115,.3); color: #ff9ba4; background: rgba(255,101,115,.08); }
.text-button { min-height: 40px; border: 0; color: #c4b5c2; background: transparent; text-align: left; cursor: pointer; }

.controller-shell { min-height: 100svh; padding-bottom: 92px; background: radial-gradient(circle at 88% 0,rgba(255,151,96,.11),transparent 27%),#15111d; }
.controller-shell button { min-height:60px; }
.controller-topbar { height: 78px; display: flex; align-items: center; justify-content: space-between; padding: 0 22px; border-bottom: 1px solid var(--line); background: rgba(21,17,29,.92); backdrop-filter: blur(18px); }
.brand-lockup { display: flex; align-items: center; gap: 12px; }
.brand-lockup > span { width: 43px; height: 43px; display: grid; place-items: center; border-radius: 12px; color: #251622; background: linear-gradient(135deg,#ffca78,#ff826b); font-weight: 950; }
.brand-lockup > div { display: grid; gap: 2px; }
.brand-lockup b { font-size: .92rem; letter-spacing: .05em; }
.brand-lockup small { color: #8e8491; font-size: .75rem; }
.connection-block { display: flex; align-items: center; gap: 10px; }
.connection-block > div { display: grid; }
.connection-block small { color: #796f7b; font-size: .65rem; letter-spacing: .12em; }
.connection-block b { color: #ffc078; font-size: 1.1rem; letter-spacing: .12em; }
.status-dot { width: 9px; height: 9px; border-radius: 50%; background: #5f5664; }
.status-dot.online { background: #76e4ae; box-shadow: 0 0 12px rgba(118,228,174,.75); }
.tiny-button, .icon-button, .small-action { border: 1px solid var(--line); color: #d7ccd4; background: rgba(255,255,255,.035); cursor: pointer; }
.tiny-button { min-height: 38px; padding: 0 12px; border-radius: 9px; font-size: .78rem; }
.controller-main { min-height: calc(100svh - 78px - 92px); display: grid; grid-template-columns: 260px minmax(0,1fr) 300px; gap: 12px; padding: 12px; }
.run-sidebar, .utility-sidebar { min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.delay-card, .panel, .current-run-card, .activity-tool { border: 1px solid var(--line); border-radius: 16px; background: var(--panel); box-shadow: inset 0 1px rgba(255,255,255,.025); }
.delay-card { min-height: 90px; display: grid; grid-template-columns: 1fr auto; align-content: center; gap: 3px 10px; padding: 14px; background: linear-gradient(135deg,rgba(122,76,135,.62),rgba(49,35,59,.88)); }
.delay-card span { color: #c3b5c3; font-size: .72rem; }
.delay-card strong { grid-column: 1; font-size: 1.25rem; }
.delay-card small { grid-row: 1/3; grid-column: 2; align-self: center; color: #ffc27c; font-size: 1.5rem; font-weight: 300; }
.schedule-nav-head, .panel-title-row { display: flex; align-items: center; justify-content: space-between; }
.schedule-nav-head { padding: 4px 3px; }
.schedule-nav-head h2, .panel h2 { margin: 0; font-size: .95rem; }
.icon-button { width: 42px; height: 42px; border-radius: 11px; font-size: 1.3rem; }
.schedule-list { flex: 1; min-height: 400px; overflow-y: auto; display: grid; align-content: start; gap: 6px; padding-right: 3px; }
.schedule-item { width: 100%; min-height: 64px; display: grid; grid-template-columns: 47px minmax(0,1fr) 34px; align-items: center; gap: 7px; padding: 6px 7px; border: 1px solid rgba(255,255,255,.075); border-radius: 12px; color: #c7bdc7; background: rgba(255,255,255,.025); text-align: left; cursor: pointer; }
.schedule-item.active { border-color: rgba(255,180,93,.48); color: white; background: linear-gradient(100deg,rgba(255,174,84,.14),rgba(255,128,109,.05)); box-shadow: inset 3px 0 var(--sun); }
.schedule-item > span { color: #938796; font-size: .75rem; font-variant-numeric: tabular-nums; }
.schedule-item > b { overflow: hidden; font-size: .84rem; white-space: nowrap; text-overflow: ellipsis; }
.schedule-item > i { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; color: #8e828f; background: rgba(255,255,255,.035); font-style: normal; }
.live-console { min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.current-run-card { min-height: 330px; display: grid; justify-items: center; align-content: center; padding: 24px; position: relative; overflow: hidden; background: radial-gradient(circle at 50% -20%,rgba(255,184,93,.23),transparent 50%),linear-gradient(150deg,rgba(66,42,72,.94),rgba(30,22,39,.96)); }
.current-run-card::after { content: ""; position: absolute; width: 280px; height: 280px; border: 1px solid rgba(255,203,136,.12); border-radius: 50%; right: -140px; top: -150px; box-shadow: 0 0 0 50px rgba(255,203,136,.025),0 0 0 100px rgba(255,203,136,.018); }
.run-meta { display: flex; gap: 10px; color: #cab9c7; font-size: .78rem; letter-spacing: .07em; }
.run-meta b { color: #ffca83; }
.current-run-card h1 { margin: 12px 0 2px; font-size: clamp(1.55rem,3vw,2.7rem); letter-spacing: -.045em; text-align: center; }
.main-timer { color: #fff6ee; font-size: clamp(4.5rem,8vw,8rem); font-weight: 240; line-height: 1; letter-spacing: -.075em; font-variant-numeric: tabular-nums; }
.main-timer.warning { color: #ffd076; animation: pulse-warning .75s ease-in-out infinite alternate; }
.main-timer.ended { color: #ff7783; }
.timer-actions { width: min(600px,100%); display: grid; grid-template-columns: 1fr 1.25fr 1fr; gap: 8px; margin-top: 20px; }
.touch-button { min-height: 64px; border-radius: 13px; font-weight: 850; cursor: pointer; }
.touch-button.primary { border: 0; color: #241520; background: linear-gradient(135deg,#ffc56f,#ff826a); }
.touch-button.secondary { border: 1px solid var(--line); color: white; background: rgba(255,255,255,.04); }
.time-adjust-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; margin-top: 10px; }
.time-adjust-row button { min-height: 42px; padding: 0 14px; border: 1px solid rgba(255,255,255,.12); border-radius: 9px; color: #d3c6d0; background: rgba(8,6,12,.16); cursor: pointer; }
.activity-tool { flex: 1; min-height: 310px; padding: 18px; }
.tool-placeholder { min-height: 250px; display: grid; place-items: center; color: #958a97; text-align: center; }
.panel { padding: 14px; }
.compact-panel textarea, .app-dialog textarea, .app-dialog input, .app-dialog select, .activity-tool input, .activity-tool textarea, .activity-tool select { width: 100%; border: 1px solid rgba(255,255,255,.13); border-radius: 10px; color: #f4edf2; background: rgba(7,5,11,.28); outline: none; }
.compact-panel textarea, .activity-tool textarea, .app-dialog textarea { padding: 11px; resize: vertical; }
.compact-panel input, .activity-tool input, .activity-tool select, .app-dialog input, .app-dialog select { min-height: 48px; padding: 0 11px; }
.score-controls { display: grid; gap: 7px; margin-top: 11px; }
.score-control-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px; padding: 9px; border: 1px solid rgba(255,255,255,.08); border-radius: 11px; background: rgba(255,255,255,.025); }
.score-control-row > div:first-child { min-width: 0; display: grid; gap: 2px; }
.score-control-row b { overflow: hidden; font-size: .86rem; white-space: nowrap; text-overflow: ellipsis; }
.score-control-row strong { color: #ffc67d; font-size: 1.35rem; }
.score-buttons { grid-column: 1/-1; display: grid; grid-template-columns: repeat(3,1fr); gap: 5px; }
.score-buttons button { min-height: 44px; border: 1px solid rgba(255,255,255,.1); border-radius: 8px; color: #e8dfe5; background: rgba(255,255,255,.035); font-weight: 800; cursor: pointer; }
.mvp-panel textarea { margin-top: 10px; }
.small-action { width: 100%; min-height: 44px; margin-top: 7px; border-radius: 9px; }
.reserve-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 10px; }
.reserve-grid button { min-height: 55px; border: 1px solid rgba(255,255,255,.1); border-radius: 10px; color: #e5dce2; background: rgba(255,255,255,.035); cursor: pointer; }
.reserve-grid .wide { grid-column: 1/-1; }
.controller-dock { position: fixed; z-index: 20; left: 0; right: 0; bottom: 0; min-height: 82px; display: flex; align-items: center; justify-content: center; gap: 7px; padding: 10px 18px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: rgba(19,15,26,.96); backdrop-filter: blur(20px); }
.controller-dock > span { margin-right: 5px; color: #817684; font-size: .72rem; }
.controller-dock button { min-width: 92px; min-height: 62px; border: 1px solid rgba(255,255,255,.11); border-radius: 12px; color: #e9e0e5; background: rgba(255,255,255,.04); cursor: pointer; }
.controller-dock button.active { border-color: rgba(255,180,93,.55); color: #ffd18e; background: rgba(255,174,84,.12); }

.stage-shell { position: fixed; inset: 0; overflow: hidden; background: #171321; color: white; }
.stage-sky { position: absolute; inset: 0; background: linear-gradient(155deg,#6b4d78 0,#3c2b4c 34%,#201929 67%,#14111b 100%); }
.stage-sky::before { content: ""; position: absolute; width: 60vw; height: 60vw; border-radius: 50%; right: -12vw; top: -40vw; background: radial-gradient(circle,#ffd27f 0,#ff9670 36%,rgba(168,88,115,.35) 63%,transparent 70%); filter: blur(2px); opacity: .78; }
.stage-sky i { position: absolute; left: -5%; right: -5%; height: 1px; background: linear-gradient(90deg,transparent,rgba(255,222,186,.19),transparent); transform: rotate(-7deg); }
.stage-sky i:nth-child(1){top:28%}.stage-sky i:nth-child(2){top:46%}.stage-sky i:nth-child(3){top:64%}
.stage-header { position: relative; z-index: 3; height: 12vh; min-height: 90px; display: grid; grid-template-columns:1fr auto 1fr; align-items: center; gap:3vw; padding: 0 4vw; border-bottom: 1px solid rgba(255,239,229,.15); background: linear-gradient(to bottom,rgba(20,15,27,.48),transparent); }
.stage-header > div:first-child { display: grid; gap: 4px; }
.stage-header span { color: #ffcb8d; font-size: clamp(.75rem,1vw,1.1rem); font-weight: 850; letter-spacing: .16em; }
.stage-header b { font-size: clamp(1.2rem,1.6vw,2rem); }
.stage-live-bar { display:grid; grid-template-columns:auto auto; align-items:center; gap:2px 18px; text-align:right; }
.stage-live-bar > b { overflow:hidden; max-width:34vw; color:#fff5ec; font-size:clamp(1rem,1.35vw,1.65rem); white-space:nowrap; text-overflow:ellipsis; }
.stage-live-bar > span { grid-row:1/3; grid-column:2; min-width:118px; color:#ffd08a; font-size:clamp(2rem,3vw,3.8rem); font-weight:260; letter-spacing:-.06em; font-variant-numeric:tabular-nums; }
.stage-live-bar > span.warning { color:#ffe06e; animation:pulse-warning .75s ease-in-out infinite alternate; }.stage-live-bar > span.ended { color:#ff7783; }
.stage-live-bar small { color:#a99ba7; font-size:clamp(.65rem,.8vw,.92rem); }.stage-live-bar small b { color:#cfc0ca; font-size:inherit; }
.stage-room { display: flex; align-items: center; gap: 10px; color: #b9abb8; font-size: clamp(.8rem,1vw,1.1rem); letter-spacing: .08em; }
.stage-room { justify-self:end; }
.stage-content { position: relative; z-index: 2; height: calc(100vh - 12vh - 15vh); min-height: 0; display: grid; place-items: center; padding: 4vh 5vw; }
.stage-activity { width: 100%; height: 100%; display: grid; place-items: center; align-content: center; text-align: center; }
.stage-kicker { color: #ffc681; font-size: clamp(.85rem,1.2vw,1.4rem); font-weight: 900; letter-spacing: .18em; }
.stage-activity h1 { max-width: 1500px; margin: .14em 0 .05em; font-size: clamp(5.5rem,10vw,12rem); line-height: .95; letter-spacing: -.075em; text-wrap: balance; text-shadow: 0 18px 55px rgba(8,4,14,.28); }
.stage-timer { font-size: clamp(7rem,13vw,16rem); font-weight: 200; line-height: .95; letter-spacing: -.08em; font-variant-numeric: tabular-nums; }
.stage-timer.warning { color: #ffd273; animation: pulse-warning .75s ease-in-out infinite alternate; }
.stage-timer.ended { color: #ff7783; }
.stage-next { margin-top: 2vh; color: #c2b4c0; font-size: clamp(1.2rem,1.8vw,2.2rem); }
.stage-next b { color: #ffd092; }
.stage-scoreboard { position: relative; z-index: 4; height: 15vh; min-height: 110px; display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; padding: 1px; border-top: 1px solid rgba(255,239,229,.14); background: rgba(10,7,14,.4); backdrop-filter: blur(18px); }
.stage-score-team { display: grid; grid-template-columns: 1fr auto; align-content: center; gap: 2px 14px; padding: 1.5vh 2vw; background: rgba(29,21,37,.78); }
.stage-score-team span { grid-column: 1/-1; color: #b9abb8; font-size: clamp(.75rem,1vw,1.1rem); }
.stage-score-team b { font-size: clamp(1.5rem,2.1vw,2.7rem); }
.stage-score-team strong { grid-row: 1/3; grid-column: 2; align-self: center; color: #ffd08d; font-size: clamp(3rem,4vw,5rem); font-weight: 260; font-variant-numeric: tabular-nums; }
.sound-unlock { position: fixed; z-index: 30; left: 50%; top: 50%; transform: translate(-50%,-50%); min-width: 370px; min-height: 88px; border: 1px solid rgba(255,211,152,.35); border-radius: 20px; color: #241520; background: linear-gradient(135deg,#ffd082,#ff8a6d); box-shadow: 0 30px 100px rgba(0,0,0,.44); font-size: 1.35rem; font-weight: 900; cursor: pointer; }
.stage-leave { position: fixed; z-index: 15; right: 18px; top: 18px; min-width: 70px; min-height: 42px; border: 1px solid rgba(255,255,255,.1); border-radius: 10px; color: rgba(255,255,255,.45); background: rgba(0,0,0,.15); cursor: pointer; opacity: .25; }
.stage-leave:hover { opacity: 1; }
.blackout-layer { position: fixed; z-index: 25; inset: 0; background: #000; opacity: 0; pointer-events: none; transition: opacity .2s ease; }
.blackout-layer.active { opacity: 1; }
.confetti-canvas { position: fixed; z-index: 28; inset: 0; width: 100%; height: 100%; pointer-events: none; }

.app-dialog { width: min(1050px,calc(100vw - 32px)); max-height: calc(100svh - 32px); padding: 0; border: 1px solid rgba(255,239,229,.18); border-radius: 22px; color: white; background: #211927; box-shadow: 0 45px 130px rgba(0,0,0,.65); }
.app-dialog::backdrop { background: rgba(7,4,10,.72); backdrop-filter: blur(10px); }
.small-dialog { width: min(560px,calc(100vw - 32px)); }
.dialog-sheet { max-height: calc(100svh - 34px); overflow-y: auto; display: grid; gap: 10px; padding: 22px; }
.dialog-sheet > header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.dialog-sheet > header span { color: #ffbf76; font-size: .72rem; font-weight: 850; letter-spacing: .14em; }
.dialog-sheet h2 { margin: 3px 0 0; }
.dialog-close { width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 11px; color: #ddd3da; background: rgba(255,255,255,.035); font-size: 1.5rem; cursor: pointer; }
.dialog-sheet label { margin-top: 6px; color: #d4c8d1; font-size: .86rem; font-weight: 700; }
.dialog-sheet label small { color: #8d818f; font-weight: 500; }
.dialog-sheet menu { display: flex; justify-content: flex-end; gap: 8px; margin: 12px 0 0; padding: 0; }
.dialog-sheet menu button { min-width: 100px; }
.team-setup-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 8px; }
.team-setup-card { padding: 12px; border: 1px solid var(--line); border-radius: 13px; background: rgba(255,255,255,.025); }
.team-setup-card h3 { margin: 0 0 8px; font-size: .9rem; }
.team-setup-card input { margin-top: 6px; }
.team-members { min-height: 48px; margin-top: 8px; color: #aa9daa; font-size: .78rem; line-height: 1.55; }
.toast { position: fixed; z-index: 100; left: 50%; bottom: 110px; transform: translate(-50%,18px); padding: 12px 16px; border: 1px solid rgba(255,208,142,.3); border-radius: 12px; color: white; background: rgba(33,24,40,.95); box-shadow: 0 18px 50px rgba(0,0,0,.35); opacity: 0; pointer-events: none; transition: .2s ease; }
.toast.show { transform: translate(-50%,0); opacity: 1; }
@keyframes pulse-warning { to { opacity: .72; transform: scale(.985); } }

/* Activity tools */
.tool-head { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; padding-bottom:14px; border-bottom:1px solid var(--line); }
.tool-head span { color:#ffbc73; font-size:.68rem; font-weight:900; letter-spacing:.14em; }
.tool-head h2 { margin:4px 0 3px; font-size:1.3rem; }
.tool-head p { margin:0; color:#9f929d; font-size:.82rem; line-height:1.5; }
.tool-head > b { flex:0 0 auto; padding:8px 11px; border:1px solid rgba(255,190,114,.22); border-radius:999px; color:#ffc37d; background:rgba(255,171,83,.08); font-size:.75rem; }
.tool-action-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin-top:16px; }
.tool-action-grid button, .round-buttons button, .winner-buttons button, .intro-buttons button, .answer-pass-grid button, .day-night-buttons button, .award-buttons button, .reserve-number-actions button { min-height:62px; border:1px solid rgba(255,255,255,.11); border-radius:12px; color:#eee4eb; background:rgba(255,255,255,.045); font-weight:800; cursor:pointer; }
.tool-main-button, .correct-button { border:0!important; color:#281824!important; background:linear-gradient(135deg,#ffd17f,#ff8b70)!important; box-shadow:0 10px 28px rgba(255,131,104,.14); }
.distance-grid, .stopwatch-list, .vote-option-list, .best-records { display:grid; gap:8px; margin-top:14px; }
.distance-grid { grid-template-columns:repeat(2,1fr); }
.distance-grid section, .stopwatch-list section, .vote-option-list section, .best-records > div { padding:12px; border:1px solid rgba(255,255,255,.08); border-radius:12px; background:rgba(255,255,255,.025); }
.distance-grid h3, .stopwatch-list h3 { margin:0 0 8px; font-size:.88rem; }
.distance-grid label { display:grid; grid-template-columns:1fr 88px; align-items:center; gap:8px; margin-top:6px; color:#aa9eaa; font-size:.77rem; }
.round-console, .rope-console, .initial-control, .role-handoff { display:grid; justify-items:center; gap:12px; margin-top:17px; padding:20px; border:1px solid rgba(255,255,255,.085); border-radius:15px; background:rgba(7,5,11,.14); }
.round-console strong, .rope-console strong, .reserve-number { color:#fff5ed; font-size:clamp(3.5rem,8vw,7rem); font-weight:240; line-height:1; letter-spacing:-.06em; font-variant-numeric:tabular-nums; }
.round-buttons, .winner-buttons, .intro-buttons, .answer-pass-grid, .day-night-buttons, .award-buttons, .reserve-number-actions { width:100%; display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.winner-buttons { grid-template-columns:repeat(4,1fr); margin-top:10px; }
.round-history { margin:12px 0 0; color:#a99ba7; font-size:.82rem; line-height:1.7; }
.water-actions { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:14px; padding:13px; border:1px solid rgba(111,213,207,.18); border-radius:12px; background:rgba(80,196,189,.05); }
.water-actions button, .subtle-wide { min-height:54px; border:1px solid rgba(255,255,255,.12); border-radius:11px; color:#e9dfe6; background:rgba(255,255,255,.04); font-weight:800; cursor:pointer; }
.rope-console .tool-main-button { width:min(360px,100%); min-height:112px; border-radius:18px; font-size:1.25rem; }
.best-records { grid-template-columns:repeat(4,1fr); }
.best-records > div { display:grid; gap:4px; text-align:center; }
.best-records b { font-size:.8rem; }.best-records strong { color:#ffd08a; font-size:1.4rem; }
.stopwatch-list section { display:grid; grid-template-columns:1fr auto; align-items:center; gap:7px 12px; }
.stopwatch-list strong { color:#fff5ed; font-size:1.8rem; font-weight:300; font-variant-numeric:tabular-nums; }
.stopwatch-list div { grid-column:1/-1; display:grid; grid-template-columns:repeat(3,1fr); gap:7px; }
.stopwatch-list button { min-height:48px; border:1px solid rgba(255,255,255,.1); border-radius:9px; color:#e8dee5; background:rgba(255,255,255,.04); cursor:pointer; }
.upload-tool-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:14px; }
.file-drop { min-height:110px; display:grid; place-items:center; padding:14px; border:1px dashed rgba(255,202,133,.3); border-radius:13px; color:#d5c8d1; background:rgba(255,175,86,.035); text-align:center; cursor:pointer; }
.file-drop input { display:none; }
.file-status, .consent-note { margin-top:10px; color:#a99ba7; font-size:.78rem; line-height:1.55; }
.consent-note { padding:10px 12px; border-radius:10px; background:rgba(255,255,255,.03); }
.person-preview { width:100%; max-height:260px; object-fit:contain; border-radius:12px; background:#110e16; }
.wide-field { display:grid; gap:6px; margin-top:12px; color:#cbbec8; font-size:.82rem; font-weight:700; }
.vote-option-list section { display:grid; grid-template-columns:1fr 96px; align-items:center; gap:9px; }
.vote-option-list section input:first-of-type { min-width:0; }
.secret-word { margin-top:14px; padding:26px 18px; border:1px solid rgba(255,198,124,.18); border-radius:15px; color:#fff4e9; background:radial-gradient(circle at 50% 0,rgba(255,178,92,.12),transparent 70%); font-size:clamp(2rem,5vw,4rem); font-weight:900; text-align:center; word-break:keep-all; }
.answer-pass-grid { grid-template-columns:1.4fr 1fr; margin-top:10px; }
.word-editor { margin-top:12px; }
.word-editor textarea { min-height:82px; }
.subtle-wide { width:100%; margin-top:10px; }
.initial-control h3 { margin:0; color:#ffe6c2; font-size:3rem; letter-spacing:.12em; }
.mafia-settings, .award-inputs { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin-top:14px; }
.mafia-settings label, .award-inputs label { display:grid; gap:6px; color:#b9adb7; font-size:.77rem; }
.role-handoff b { font-size:1.2rem; }.role-handoff strong { color:#ffcb84; font-size:2.2rem; }.role-handoff p { margin:0; color:#9e929d; text-align:center; }
.day-night-buttons, .award-buttons { margin-top:10px; }.day-night-buttons { grid-template-columns:1fr 1fr; }
.award-buttons { grid-template-columns:repeat(4,1fr); }
.photo-count-button { width:100%; min-height:90px; margin-top:15px; border:0; border-radius:16px; color:#281823; background:linear-gradient(135deg,#ffd07f,#ff896e); font-size:1.25rem; font-weight:900; cursor:pointer; }
.reserve-number { margin:26px 0; text-align:center; }.rules-card { margin-top:15px; padding:18px; border:1px solid rgba(255,255,255,.08); border-radius:14px; background:rgba(255,255,255,.025); }.rules-card b { color:#ffd08b; }.rules-card p { color:#baadb8; line-height:1.65; }

/* TV activity scenes */
.stage-tool-screen { width:100%; height:100%; display:grid; align-content:center; justify-items:center; gap:1.5vh; text-align:center; }
.stage-tool-title { max-width:1500px; margin:.08em 0 .18em; font-size:clamp(4.4rem,8vw,9rem); line-height:1; letter-spacing:-.065em; text-wrap:balance; }
.stage-team-grid { width:min(1500px,94%); display:grid; grid-template-columns:repeat(4,1fr); gap:1.2vw; }
.stage-team-grid > div { min-height:260px; display:grid; align-content:center; gap:12px; padding:2vw 1.5vw; border:1px solid color-mix(in srgb,var(--team-color) 45%,transparent); border-top:8px solid var(--team-color); border-radius:22px; background:rgba(26,18,34,.62); }
.stage-team-grid b { font-size:clamp(2rem,3vw,4rem); }.stage-team-grid span,.stage-team-grid small { color:#d6c7d2; font-size:clamp(.85rem,1.1vw,1.3rem); }.stage-team-grid p { margin:0; color:#ac9eaa; font-size:clamp(.9rem,1.25vw,1.45rem); line-height:1.6; }
.result-ranking, .stopwatch-ranking { width:min(1250px,90%); display:grid; gap:1.2vh; }
.result-ranking > div, .stopwatch-ranking > div { display:grid; grid-template-columns:80px 1fr auto; align-items:center; gap:25px; padding:1.5vh 2vw; border:1px solid rgba(255,255,255,.1); border-radius:18px; background:rgba(25,18,33,.62); text-align:left; }
.result-ranking span,.stopwatch-ranking span { color:#ffca85; font-size:clamp(1.5rem,2vw,2.5rem); }.result-ranking b,.stopwatch-ranking b { font-size:clamp(1.8rem,2.6vw,3.4rem); }.result-ranking strong,.stopwatch-ranking strong { color:#fff1df; font-size:clamp(2.1rem,3vw,4rem); font-weight:300; font-variant-numeric:tabular-nums; }.result-ranking small { font-size:.45em; }
.result-ranking .place-1 { border-color:rgba(255,204,113,.48); box-shadow:0 0 45px rgba(255,183,84,.08); }
.tool-timer { color:#fff5ec; font-size:clamp(7rem,14vw,16rem); font-weight:200; line-height:.9; letter-spacing:-.08em; font-variant-numeric:tabular-nums; }
.round-winner { color:#c4b4c0; font-size:clamp(1.2rem,2vw,2.4rem); }.round-winner b { color:#ffc986; }
.rope-count { color:#fff4e8; font-size:clamp(12rem,25vw,28rem); font-weight:170; line-height:.75; letter-spacing:-.1em; }.rope-stage p { color:#c6b8c3; font-size:2rem; }
.person-stage img { width:min(68vw,1050px); height:min(55vh,620px); object-fit:contain; border-radius:26px; background:#0f0c14; box-shadow:0 35px 90px rgba(0,0,0,.35); transition:filter .6s ease; }
.stage-empty-box { width:min(70vw,1100px); min-height:42vh; display:grid; place-items:center; border:2px dashed rgba(255,255,255,.16); border-radius:25px; color:#a99ba6; font-size:2rem; }
.stage-answer { display:grid; gap:8px; margin-top:1vh; padding:1.4vh 3vw; border:1px solid rgba(255,204,136,.4); border-radius:18px; color:#2c1b26; background:linear-gradient(135deg,#ffe1a7,#ff9b7b); font-size:clamp(2rem,3.5vw,4.5rem); font-weight:900; box-shadow:0 18px 60px rgba(255,145,111,.18); }
.stage-answer span { font-size:.55em; font-weight:700; }.music-disc { width:clamp(150px,16vw,270px); aspect-ratio:1; display:grid; place-items:center; border:4px solid rgba(255,216,160,.5); border-radius:50%; color:#ffd18e; background:repeating-radial-gradient(circle,#24182c 0 13px,#3a283f 14px 20px); font-size:5rem; box-shadow:0 0 80px rgba(255,158,109,.13); animation:disc-spin 6s linear infinite; }
@keyframes disc-spin { to { transform:rotate(360deg); } }
.tmi-stage h1 { max-width:1400px; font-size:clamp(3rem,6vw,7rem); line-height:1.08; }
.stage-vote-bars { width:min(1350px,92%); display:grid; gap:1.3vh; }.stage-vote-bars > div { display:grid; grid-template-columns:55px minmax(180px,.6fr) 1.4fr 80px; align-items:center; gap:18px; font-size:clamp(1.2rem,1.8vw,2.2rem); text-align:left; }.stage-vote-bars i { height:28px; overflow:hidden; border-radius:999px; background:rgba(255,255,255,.08); }.stage-vote-bars em { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#ff9874,#ffd27f); transition:width .35s ease; }.stage-vote-bars strong { color:#ffd08b; font-size:1.5em; }
.word-stage-grid { width:min(1100px,86%); display:grid; grid-template-columns:1fr 1fr; gap:2vw; }.word-stage-grid > div { display:grid; gap:1vh; padding:3vh 2vw; border:1px solid rgba(255,255,255,.12); border-radius:26px; background:rgba(25,18,33,.55); }.word-stage-grid small { color:#b6a9b4; font-size:1.5rem; }.word-stage-grid strong { font-size:clamp(6rem,10vw,12rem); font-weight:230; line-height:1; font-variant-numeric:tabular-nums; }
.initial-stage h1 { margin:.05em 0; color:#fff3e3; font-size:clamp(12rem,25vw,30rem); line-height:.8; letter-spacing:.08em; }.initial-stage p { color:#c5b6c2; font-size:clamp(1.5rem,2.2vw,2.8rem); }
.mafia-stage { margin:-4vh -5vw; width:calc(100% + 10vw); height:calc(100% + 8vh); transition:background .6s ease; }.mafia-stage.night { background:radial-gradient(circle at 50% 35%,#23345b,#0c0e1c 70%); }.mafia-stage.day { background:radial-gradient(circle at 50% 35%,rgba(255,179,105,.22),transparent 60%); }.mafia-stage h1 { margin:0; font-size:clamp(5rem,10vw,12rem); }
.team-reveal-stage .stage-team-grid.reveal > div { opacity:0; transform:translateY(35px) scale(.95); animation:team-in .65s cubic-bezier(.2,.8,.2,1) forwards; animation-delay:var(--delay); }.team-reveal-stage .stage-team-grid span { color:var(--team-color); font-weight:900; letter-spacing:.12em; }
.team-reveal-stage .stage-team-grid > div.spinning { opacity:.75; filter:blur(1.5px); border-color:rgba(255,255,255,.28); box-shadow:inset 0 0 45px rgba(255,255,255,.045); }.team-reveal-stage .stage-team-grid > div.settled { filter:none; box-shadow:0 15px 55px color-mix(in srgb,var(--team-color) 14%,transparent); }
@keyframes team-in { to { opacity:1; transform:none; } }
.water-stage h1,.reserve-stage h1,.photo-stage h1 { margin:.05em 0; font-size:clamp(6rem,12vw,14rem); line-height:.9; letter-spacing:-.07em; }.water-stage p,.reserve-stage p,.photo-stage p { color:#c6b7c3; font-size:clamp(1.4rem,2vw,2.5rem); }
.nunchi-stage-number { font-size:clamp(17rem,35vw,40rem); font-weight:160; line-height:.7; letter-spacing:-.12em; }.rules-stage > div { padding:3vh 5vw; border:1px solid rgba(255,199,127,.26); border-radius:25px; background:rgba(255,174,86,.06); }.rules-stage b { color:#ffd08b; font-size:clamp(3rem,6vw,7rem); }.rules-stage p { line-height:1.7; }
.telepathy-stage h1 { max-width:1500px; font-size:clamp(4rem,8vw,9rem); line-height:1.05; }
.award-podium { width:min(1250px,90%); height:42vh; display:flex; align-items:flex-end; justify-content:center; gap:1.5vw; }.award-podium > div { width:30%; display:grid; align-content:center; gap:8px; padding:2vh 1vw; border:1px solid rgba(255,255,255,.12); border-radius:22px 22px 8px 8px; background:linear-gradient(to bottom,rgba(255,199,120,.16),rgba(38,27,44,.8)); opacity:.16; filter:blur(3px); transition:.6s ease; }.award-podium .visible { opacity:1; filter:none; transform:translateY(0); }.award-podium .podium-1 { min-height:100%; order:2; border-color:rgba(255,211,125,.55); }.award-podium .podium-2 { min-height:76%; order:1; }.award-podium .podium-3 { min-height:60%; order:3; }.award-podium span { color:#ffca84; font-size:1.4rem; }.award-podium b { font-size:clamp(2rem,3.2vw,4.2rem); }.award-podium strong { font-size:clamp(2.7rem,4vw,5rem); font-weight:250; }.award-podium small { font-size:.38em; }
.special-awards { width:min(1300px,92%); display:grid; grid-template-columns:repeat(3,1fr); gap:1vw; }.special-awards span { padding:1.2vh 1vw; border:1px solid rgba(255,255,255,.1); border-radius:14px; color:#bcaeba; font-size:1.2rem; }.special-awards b { display:block; color:#ffe1b0; font-size:2.2rem; }
.photo-number { color:#fff1dd; font-size:clamp(13rem,30vw,34rem); font-weight:180; line-height:.72; letter-spacing:-.1em; text-shadow:0 0 90px rgba(255,172,100,.18); }.photo-number.pop { animation:photo-pop .55s cubic-bezier(.2,.8,.2,1); } @keyframes photo-pop { 0%{transform:scale(.65);opacity:.2} 60%{transform:scale(1.08)} 100%{transform:none;opacity:1} }

@media (max-width: 1100px) {
  .controller-main { grid-template-columns: 220px minmax(0,1fr); }
  .utility-sidebar { grid-column: 1/-1; display: grid; grid-template-columns: 1fr 1fr 1fr; }
  .controller-shell { padding-bottom: 96px; }
}
@media (max-width: 720px) {
  .role-grid { grid-template-columns: 1fr; }
  .controller-topbar { padding: 0 10px; }
  .brand-lockup small, .connection-block .tiny-button { display: none; }
  .controller-main { grid-template-columns: 1fr; }
  .run-sidebar { order: 2; }
  .live-console { order: 1; }
  .utility-sidebar { order: 3; grid-template-columns: 1fr; }
  .controller-dock { overflow-x: auto; justify-content: flex-start; }
  .controller-dock > span { display: none; }
  .current-run-card { min-height: 360px; }
  .schedule-list { min-height: 300px; max-height: 58vh; }
  .team-setup-grid { grid-template-columns: 1fr; }
  .tool-action-grid, .mafia-settings, .award-inputs { grid-template-columns:1fr; }
  .distance-grid, .upload-tool-grid { grid-template-columns:1fr; }
  .best-records { grid-template-columns:1fr 1fr; }
}