.judge-mode-nav { display:flex; gap:8px; margin:0 0 18px; padding:5px; background:#151923; border:1px solid #2a3345; border-radius:14px; }
.judge-mode-nav[hidden] { display:none; }
.judge-mode-nav button { flex:1; border:0; border-radius:10px; padding:12px 8px; color:#a7b1c3; background:transparent; cursor:pointer; }
.judge-mode-nav button.active { background:#343044; color:#ffe0a0; box-shadow:inset 0 0 0 1px #655746; }
.on-mode { --on-gold:#ebc77d; --on-ink:#a6b7d2; }
.on-mode .panel { overflow:hidden; }
.on-mode .btn { min-height:48px; }
.on-mode .btn-row { margin-top:20px; flex-wrap:wrap; }
.on-mode h2 { font-size:clamp(24px,5.5vw,34px); margin-bottom:12px; }
.on-mode .lead { font-size:15px; line-height:1.8; }
.on-overline { font-size:11px; color:var(--on-gold); letter-spacing:.13em; margin:0 0 12px; }
.on-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.on-heading h3 { margin-bottom:0; }
.on-moon { font-size:48px; color:var(--on-gold); opacity:.65; }
.on-hero { background:radial-gradient(ellipse at 100% 0%,#39334788,transparent 65%),#151923; }
.on-names { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:18px; }
.on-names label { display:flex; align-items:center; gap:8px; color:#a6b7d2; font-size:12px; }
.on-names input { min-width:0; width:100%; }
.on-checks { display:flex; justify-content:center; gap:10px; flex-direction:column; }
.on-checks input { width:auto; accent-color:var(--on-gold); }
.on-role-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.on-role-option { display:flex; align-items:center; gap:9px; padding:12px; border:1px solid #30364a; border-radius:12px; background:#111721; }
.on-role-option > span:nth-child(2) { flex:1; min-width:0; }
.on-role-option strong { font-size:14px; display:block; margin-bottom:5px; }
.on-role-option small { font-size:11px; color:#aab6c8; line-height:1.55; display:block; }
.on-role-option select { width:51px; padding:8px; flex-shrink:0; }
.on-role-icon { color:var(--on-gold); font-size:25px; width:28px; text-align:center; }
.on-deck-status { margin:20px 0 12px; color:var(--on-gold); }
.on-rules { margin-top:24px; border-top:1px solid #30364a; padding-top:16px; font-size:13px; color:#acb8cb; }
.on-rules summary { cursor:pointer; color:#e4d4ac; padding:5px 0; }
.on-rules p { margin:12px 0 0; line-height:1.8; }
.on-table { position:relative; padding:25px 22px 16px; margin:22px 0; isolation:isolate; border-radius:80px / 42px; border:7px solid #594638; background:radial-gradient(ellipse at 50% 35%,#24423e 0%,#162f2e 65%,#102320 100%); box-shadow:0 12px 26px #0007,inset 0 0 0 2px #c4974c55,inset 0 0 26px #0009; }
.on-table::before { content:""; position:absolute; inset:8px; border:1px dashed #b79f6950; border-radius:70px / 34px; z-index:-1; pointer-events:none; }
.on-table-label { text-align:center; color:#c8d2b7; letter-spacing:.15em; font-size:11px; margin-bottom:20px; }
.on-table-label span { color:#d9be77; padding:0 8px; }
.on-center-cards { display:flex; gap:clamp(8px,3vw,22px); justify-content:center; align-items:center; }
.on-card { position:relative; width:clamp(72px,20vw,128px); aspect-ratio:2/3; flex:0 1 128px; padding:12px 6px 8px; border:1px solid #c9ac6c; border-radius:10px; display:flex; flex-direction:column; align-items:center; justify-content:center; color:#e6cb87; box-shadow:0 7px 10px #0008; cursor:pointer; transition:transform .22s,box-shadow .22s,border-color .22s; background:repeating-linear-gradient(45deg,transparent 0 8px,#bba16508 8px 9px),linear-gradient(155deg,#283951,#111c30); }
.on-card::before { content:""; position:absolute; inset:5px; border:1px solid #cfb57b55; border-radius:6px; pointer-events:none; }
.on-card:disabled { opacity:1; cursor:default; }
.on-card-index { position:absolute; top:9px; left:12px; font-family:Georgia,serif; font-weight:bold; font-size:14px; }
.on-card-art { font-size:clamp(29px,8vw,52px); line-height:1.1; margin:12px 0; text-shadow:0 2px 15px #d6b95c33; }
.on-card strong { font-size:clamp(10px,2.5vw,14px); letter-spacing:.07em; }
.on-card small { font-size:9px; opacity:.65; margin-top:6px; }
.on-card.is-selected { transform:translateY(-9px); border:2px solid #ffe19a; box-shadow:0 0 0 3px #ffe19a33,0 10px 20px #0008; }
.on-selected-mark { position:absolute; right:7px; top:6px; background:#eccc8c; color:#222; width:19px; height:19px; border-radius:50%; font-size:13px; }
.on-card.is-face { background:linear-gradient(145deg,#f5e4bf,#c7b482); color:#30291d; animation:on-flip .35s ease-out; }
.on-card.is-face::before { border-color:#745b3680; }
.on-table-hint { text-align:center; font-size:10px; color:#9ea998; margin:17px 0 0; line-height:1.5; }
.on-card.is-swapped { animation:on-exchange .65s ease-in-out; }
.on-own-card { margin:-8px auto 20px; padding:12px; max-width:300px; border:1px dashed #7f7560; border-radius:12px; text-align:center; color:#ccb988; font-size:13px; }
.on-own-card span { display:block; font-size:24px; }
.on-seats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin:16px 0; }
.on-seat { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:82px; padding:10px 5px; border:1px solid #354158; border-radius:14px; background:#1a2231; color:#e4e6eb; cursor:pointer; }
.on-seat b { font-size:22px; color:#cebf9a; }
.on-seat span { max-width:100%; overflow-wrap:anywhere; font-size:12px; margin-top:5px; }
.on-seat small { color:#8a98ae; font-size:10px; }
.on-seat:disabled { opacity:.55; cursor:default; }
.on-seat.is-selected { background:#423b2d; border-color:#eccc8c; box-shadow:0 0 0 2px #eccc8c22; }
.on-seat-heading { margin-top:24px; font-size:15px; }
.on-selection-summary { padding:12px; color:#e4ca90; background:#d5b7720b; border-radius:10px; font-size:13px; min-height:42px; margin:16px 0; }
.on-timer { display:flex; align-items:center; gap:10px; border-top:1px solid #2e394e; border-bottom:1px solid #2e394e; padding:12px 0; margin:12px 0 20px; }
.on-timer > span { color:#99a9bd; font-size:12px; }
.on-timer strong { flex:1; font-size:25px; font-variant-numeric:tabular-nums; }
.on-timer .btn { padding:8px 16px; min-height:40px; }
.on-private-cover { min-height:240px; display:flex; flex-direction:column; align-items:center; justify-content:center; border:1px solid #38415a; border-radius:18px; background:radial-gradient(ellipse at center,#30384d,#151c29); margin:20px 0; }
.on-private-cover > span { font-size:66px; color:#c7ac76; }
.on-private-cover strong { font-size:19px; margin:15px 0 10px; }
.on-private-cover p { color:#90a0b6; font-size:13px; }
.on-identity { text-align:center; max-width:330px; margin:20px auto; padding:25px; border:1px solid #c5a467; border-radius:18px; background:linear-gradient(145deg,#2e3548,#181e2c); }
.on-identity > span { color:#aab5c9; font-size:12px; }
.on-face-icon { font-size:65px; color:var(--on-gold); margin:20px 0; }
.on-identity p { font-size:14px; line-height:1.8; margin-bottom:0; color:#c1c9d7; }
.on-private-caption { padding:10px; border-radius:8px; background:#354458; color:#d7e3f1; font-size:12px; text-align:center; margin-bottom:16px; }
.on-recognition,.on-copy { padding:18px; background:#252d3e; border:1px solid #47536a; border-radius:12px; margin:16px 0; }
.on-recognition p { color:#e9cf91; font-size:20px; line-height:1.6; }
.on-recognition small { color:#aab6cb; }
.on-feedback { text-align:center; padding:10px 0; }
.on-feedback > span { font-size:38px; color:#b5d3a7; }
.on-feedback h3 { font-size:17px; line-height:1.7; }
.on-feedback p { color:#c4b384; }
.on-warning { padding:12px; border:1px solid #b8985155; border-radius:10px; color:#efce89; font-size:13px; line-height:1.7; }
.on-composition { color:#b4c1d3; line-height:1.9; font-size:13px; }
.on-result-reasons { border-left:3px solid #d9b773; padding-left:14px; color:#e0d3b9; }
.on-result-list { display:grid; gap:10px; }
.on-result-player { padding:15px; border:1px solid #344158; border-radius:12px; background:#171e2c; }
.on-result-player.is-winner { border-color:#aaa06a; background:#34332655; }
.on-result-player > div { display:flex; justify-content:space-between; gap:10px; }
.on-result-player > div span { color:#cdbd86; font-size:12px; white-space:nowrap; }
.on-result-player p { margin:12px 0 8px; font-size:14px; }
.on-result-player b { margin:0 8px; color:#8897af; }
.on-result-player small { color:#9babbe; }
.on-replay { padding-left:22px; }
.on-replay li { padding:10px 0 16px 5px; border-bottom:1px solid #293347; }
.on-replay p { margin:7px 0; color:#b4c2d6; font-size:13px; line-height:1.7; }
.on-replay small { color:#deca95; }
.on-mode button:focus-visible { outline:3px solid #93ccef; outline-offset:4px; }
body.on-dialog-open { overflow:hidden; }
.on-vote-dialog { box-sizing:border-box; width:400px; max-width:calc(100vw - 32px); max-height:calc(100dvh - 32px); margin:auto; padding:32px 26px 26px; color:#f4f5f8; background:linear-gradient(140deg,#2a3343,#1c2330); border:1px solid #69778e; border-radius:22px; box-shadow:0 24px 80px #0009,inset 0 1px 0 #ffffff0d; }
.on-vote-dialog::backdrop { background:#050911b3; backdrop-filter:blur(3px); }
.on-vote-dialog[open] { animation:on-dialog-enter .18s ease-out; }
.on-dialog-close { position:absolute; right:10px; top:10px; display:grid; place-items:center; width:44px; height:44px; padding:11px; border:0; border-radius:10px; color:#aab5c8; background:transparent; cursor:pointer; }
.on-dialog-close:hover { background:#ffffff0a; color:#fff; }
.on-dialog-close svg { width:22px; height:22px; }
.on-dialog-heading { display:flex; align-items:center; gap:14px; padding-right:26px; margin:10px 0 22px; }
.on-dialog-icon { flex:none; width:42px; height:42px; color:#efc36f; }
.on-dialog-heading h2 { margin:0; font-size:26px; line-height:1.3; letter-spacing:.02em; }
.on-vote-dialog p { margin:0 0 28px; color:#d0d7e3; font-size:17px; line-height:1.85; }
.on-dialog-actions { display:grid; grid-template-columns:1fr 1.15fr; gap:12px; }
.on-dialog-actions .btn { min-width:0; min-height:50px; padding:12px 8px; border-radius:12px; font-size:16px; white-space:nowrap; }
.on-dialog-actions .btn.secondary { border-color:#8796ac; color:#e1e6ef; }
.on-dialog-actions .btn.primary { background:linear-gradient(135deg,#f5cd78,#e8b45c); border:1px solid #f6d797; }
.on-dialog-actions .btn:hover { filter:brightness(1.08); }
.on-vote-dialog button:focus-visible { outline:3px solid #93ccef; outline-offset:3px; }
@keyframes on-dialog-enter { from { opacity:0; transform:translateY(8px) scale(.98); } to { opacity:1; transform:none; } }
@media(max-width:360px) { .on-vote-dialog { padding:28px 20px 22px; } .on-dialog-heading { gap:10px; } .on-dialog-heading h2 { font-size:23px; } .on-dialog-actions { gap:8px; } .on-vote-dialog p { font-size:16px; } }
@media(prefers-reduced-motion:reduce) { .on-vote-dialog[open] { animation:none; } }
@keyframes on-flip { from { transform:rotateY(70deg); opacity:.4; } to { transform:rotateY(0); opacity:1; } }
@keyframes on-exchange { 0% { transform:translateY(0); } 40% { transform:translateY(18px) rotate(-6deg); } 75% { transform:translateY(-7px) rotate(3deg); } 100% { transform:translateY(0); } }
@media(max-width:520px) { .on-role-grid { grid-template-columns:1fr; } .on-table { padding:22px 12px 14px; border-width:5px; border-radius:54px / 30px; } .on-role-option small { font-size:12px; } .on-table-label { letter-spacing:.08em; } .on-heading .btn { font-size:12px; padding:8px; } }
@media(max-width:360px) { .on-seats { gap:6px; } .on-table { padding-left:8px; padding-right:8px; } .on-names { grid-template-columns:1fr; } .on-center-cards { gap:7px; } }
@media(prefers-reduced-motion:reduce) { .on-mode *, .on-mode *::before { animation:none!important; transition:none!important; } }