* { box-sizing: border-box; margin: 0; padding: 0; }

:root { --menu-ink: #10213f; --menu-gold: #ffd54f; --menu-gold-dark: #e0a100; --menu-blue: #2f7fe0; --menu-red: #e24b4a; --menu-mint: #3fc9a8; }

html, body {
  width: 100%; height: 100%;
  overflow: hidden;
  background: #0b1220;
  color: #fff;
  font-family: "Malgun Gothic", "Apple SD Gothic Neo", sans-serif;
}

#game { position: fixed; inset: 0; }
#court { position: absolute; inset: 0; width: 100%; height: 100%; }
#vs-divider { display: none; position: absolute; z-index: 12; left: 50%; top: 0; bottom: 0; width: 3px; transform: translateX(-50%); background: rgba(255,255,255,.92); box-shadow: 0 0 10px rgba(0,0,0,.65); pointer-events: none; }
body.vs-split #vs-divider { display: block; }
#flash {
  position: absolute; inset: 0; z-index: 24; pointer-events: none; opacity: 0;
  background: radial-gradient(circle at center, rgba(255,255,255,1) 0%, rgba(255,255,255,.55) 24%, rgba(255,255,255,0) 72%);
}
#flash.transition { background: #fff; }
#video { display: none; }

.pill {
  background: rgba(0, 0, 0, .5);
  padding: .3em 1em; border-radius: 999px;
  font-size: clamp(14px, 1.4vw, 26px); font-weight: bold;
}

/* 원작처럼 양쪽으로 나뉘 점수판 */
.score-box {
  position: absolute; top: 2vh; display: flex; align-items: center; gap: .8vw;
  min-width: 15vw; padding: .45vh 1.2vw; border: .25vh solid rgba(255,255,255,.6);
  border-radius: 1.2vh; box-shadow: 0 .5vh 2vh rgba(0,0,0,.35);
  font-size: clamp(18px, 2.2vw, 42px); font-weight: 900;
}
.score-box b { font-size: 1.5em; min-width: 1.2em; text-align: center; }
.score-box span { font-size: .72em; }
.score-box.me { left: 2vw; color: #fff; background: linear-gradient(90deg, rgba(3,80,155,.92), rgba(33,150,243,.78)); }
.score-box.ai { right: 2vw; justify-content: flex-end; color: #fff; background: linear-gradient(90deg, rgba(239,83,80,.78), rgba(145,20,31,.92)); }
#goal { position: absolute; top: 2.5vh; left: 50%; transform: translateX(-50%); }
#quality-status { position: fixed; z-index: 240; top: 10vh; left: 50%; transform: translateX(-50%); max-width: 90vw; text-align: center; }
#action-cues { position: absolute; inset: 0; pointer-events: none; z-index: 13; }
.action-cue { position: absolute; left: 50%; top: 21vh; transform: translateX(-50%); max-width: 88vw; padding: .35em .8em; border-radius: .55em; background: rgba(5,18,38,.94); border: 2px solid rgba(255,255,255,.7); font-size: clamp(24px,2.5vw,42px); font-weight: 900; text-align: center; text-shadow: 0 2px 3px #000; }
.action-cue[hidden] { display: none; }
.action-cue { white-space: pre-line; }
body.vs-split .action-cue { left: 25%; max-width: 46vw; }
body.vs-split .action-cue + .action-cue { left: 75%; }
#slowmo {
  position: absolute; inset: 0; display: flex; align-items: flex-start; justify-content: center;
  padding-top: 7vh; pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 42%, rgba(3,5,16,.78) 100%);
  font-size: clamp(38px, 5vw, 100px); font-weight: 1000; font-style: italic;
  color: #ff8a65; letter-spacing: -.04em;
  text-shadow: 0 .5vh 0 #8d2818, 0 1vh 3vh #000;
  opacity: 0; visibility: hidden;
  transition: opacity .2s ease, visibility 0s linear .2s;
}
#slowmo span { color: #ffd54f; }
body.slow-motion #slowmo { opacity: 1; visibility: visible; transition: opacity .2s ease; animation: slowPulse .55s ease-in-out infinite alternate; }
@keyframes slowPulse { from { transform: scale(.97); } to { transform: scale(1.03); } }

/* 가운데 큰 안내 */
#message {
  position: absolute; left: 50%; top: 30%;
  transform: translate(-50%, -50%);
  text-align: center; pointer-events: none;
  text-shadow: 0 4px 16px rgba(0, 0, 0, .8), 0 0 4px rgba(0, 0, 0, .8);
}
#msg-text { font-size: clamp(36px, 6vw, 120px); font-weight: 900; }
#msg-sub { font-size: clamp(18px, 2.2vw, 40px); font-weight: bold; margin-top: 1vh; }
#message.pop #msg-text { animation: pop .35s ease-out; }
#message.serve-guide {
  top: auto; bottom: calc(2vh + clamp(28px, 2vw, 36px));
  width: min(88vw, 760px); transform: translateX(-50%);
  padding: .22em .6em; border-radius: .75em;
  background: rgba(7, 15, 32, .72);
}
#message.serve-guide #msg-text { font-size: clamp(16px, 1.9vw, 28px); }
#message.serve-guide #msg-sub { font-size: clamp(12px, 1.1vw, 18px); margin-top: 0; }
#message.point-focus { top: 22%; z-index: 25; transform: translate(-50%, -50%) scale(1.15); transition: transform .16s ease-out; }
body.vs-split #message[data-side="p1"] { left: 25%; width: 46vw; }
body.vs-split #message[data-side="p2"] { left: 75%; width: 46vw; }
body.vs-split #message.serve-guide { width: min(44vw, 720px); }
body.vs-split #pip-wrap { left: 50%; right: auto; bottom: 1.5vh; width: min(15vw, 270px); transform: translateX(-50%); }
body.vs-split[data-action-side="p1"] #slowmo { right: 50%; }
body.vs-split[data-action-side="p2"] #slowmo { left: 50%; }
@keyframes pop {
  0% { transform: scale(.6); opacity: 0; }
  60% { transform: scale(1.1); opacity: 1; }
  100% { transform: scale(1); }
}

/* 웹캠 작은 화면 */
#pip-wrap {
  position: absolute; right: 1.5vw; bottom: 5vh;
  width: 22vw; aspect-ratio: 16 / 9;
  border-radius: 1.5vh; overflow: hidden;
  border: .4vh solid rgba(255, 255, 255, .6);
  background: #000; display: none;
}
#pip-wrap.ok { border-color: #66bb6a; }
#pip-wrap.bad { border-color: #ef5350; }
#pip { width: 100%; height: 100%; display: block; }
#pip-join {
  position: absolute; left: 0; right: 0; bottom: 0; padding: .35em;
  text-align: center; background: rgba(0,0,0,.72); color: #70ffc0;
  font-size: clamp(13px, 1.15vw, 22px); font-weight: 900;
}

/* 웹캠 준비 중 안내 (게임 멈춤) */
#cam-overlay {
  position: absolute; inset: 0;
  display: none; flex-direction: column; align-items: center; justify-content: center; gap: 3vh;
  background: rgba(0, 0, 0, .55);
  font-size: clamp(28px, 4.5vw, 84px); font-weight: 900;
  text-align: center; white-space: pre-line;
}
#cam-bar {
  width: 40vw; height: 2.2vh; border-radius: 999px;
  background: rgba(255, 255, 255, .2); overflow: hidden; display: none;
}
#cam-fill { height: 100%; width: 0; background: #4fc3f7; }
#hand-choice {
  position: absolute; inset: 0; pointer-events: none;
}
#hand-confirm {
  position: absolute; z-index: 24; left: 50%; top: 31%; transform: translate(-50%, -50%);
  padding: .28em .75em; border: 4px solid rgba(255,255,255,.9); border-radius: .55em;
  color: #fff176; background: rgba(12, 30, 44, .88);
  font-size: clamp(34px, 5vw, 78px); font-weight: 1000; text-shadow: 0 3px 8px #000;
  box-shadow: 0 8px 28px rgba(0,0,0,.4); pointer-events: none;
}
.hand-choice-tag {
  position: absolute; top: 57%; transform: translate(-50%, -50%);
  padding: .18em .5em; border-radius: .45em;
  color: #fff59d; background: rgba(0, 0, 0, .68);
  font-size: clamp(30px, 5vw, 76px); font-weight: 1000;
  text-shadow: 0 3px 8px #000;
}
#tutorial-prompt { white-space: pre-line; }

#replay-label {
  position: absolute; z-index: 28; top: 12vh; left: 50%; transform: translateX(-50%) rotate(-3deg);
  padding: .16em .6em; border: .08em solid #fff; border-radius: .18em;
  background: rgba(198,40,40,.9); color: #fff; box-shadow: 0 .12em 0 rgba(0,0,0,.55);
  font-size: clamp(34px,5vw,82px); font-weight: 1000; letter-spacing: .08em;
  animation: replayStamp .18s ease-out both;
}
#replay-label[hidden] { display: none; }
@keyframes replayStamp { from { opacity: 0; transform: translateX(-50%) scale(1.35) rotate(-3deg); } to { opacity: 1; transform: translateX(-50%) scale(1) rotate(-3deg); } }

#pause {
  position: absolute; inset: 0; z-index: 40;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, .6);
  font-size: clamp(40px, 7vw, 130px); font-weight: 900;
}
#pause[hidden] { display: none; }
#pause small { font-size: .3em; opacity: .8; }
.pause-actions { display: flex; gap: 2vw; margin-top: 4vh; }
.pause-actions .big { min-width: 22vw; font-size: clamp(22px, 2.8vw, 46px); }

/* 손 커서 사용 시 교실 TV에서도 목표가 화면 폭의 약 12% 이상이 되게 한다. */
[data-hand-target] { min-width: 12vw; min-height: 7vh; }
[data-hand-target].hand-hover { outline: .55vh solid #ffd54f; outline-offset: .45vh; transform: scale(1.04); }

#keys-help {
  position: absolute; left: 0; right: 0; bottom: 1vh;
  text-align: center; font-size: clamp(14px, 1vw, 18px);
  color: #fff; background: rgba(5,18,38,.88); padding: .3em .6em;
}

.ceremony {
  position: absolute; inset: 0; z-index: 24; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2vh;
  pointer-events: auto; background: radial-gradient(circle, rgba(9,30,58,.22), rgba(2,8,18,.7)); text-align: center;
}
.ceremony[hidden], #tutorial-hud[hidden] { display: none; }
.ceremony h2 { font-size: clamp(46px, 7vw, 120px); text-shadow: 0 .6vh 2vh #000; }
.ceremony small { font-size: clamp(13px, 1.2vw, 22px); opacity: .8; }
/* 2026-09-27 Claude: 넓은 화면(1400px~)에서 선수 카드(2vw 글씨)가 1050px 상자를 넘쳐 잘렸다 → 상자는 내용만큼, 화면의 94%까지 */
.team-card { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 2.2vw; width: max-content; max-width: 94vw; box-sizing: border-box; padding: 2vh 2.4vw; border-radius: 2em; background: rgba(255,255,255,.22); border: .35vh solid var(--menu-ink); box-shadow: 0 1vh 0 var(--menu-ink), 0 1.5vh 3vh rgba(0,0,0,.32); backdrop-filter: blur(5px); }
.team-side { display: flex; gap: 1vw; justify-content: center; }
.team-player { display: flex; align-items: center; justify-content: center; gap: .55em; min-width: 7.5em; padding: .5em; border-radius: 1.2em; font-size: clamp(15px, 1.6vw, 30px); font-weight: 900; color: #fff; border: .3vh solid var(--menu-ink); box-shadow: 0 .6vh 0 var(--menu-ink); }
.team-player img { width: 3.2em; height: 4.1em; border-radius: .6em; object-fit: cover; object-position: center 20%; border: .12em solid rgba(255,255,255,.9); }
.team-player span { text-align: left; }
.team-player.me { background: linear-gradient(135deg,#29b6f6,#0d47a1); }
.team-player.ai { background: linear-gradient(135deg,#ef5350,#8e1820); }
.team-player small { display: block; font-size: .65em; }
.team-vs { font-size: clamp(40px, 5vw, 84px); font-weight: 1000; color: var(--menu-gold); -webkit-text-stroke: .08em var(--menu-ink); paint-order: stroke fill; text-shadow: 0 .08em 0 var(--menu-ink); transform: rotate(-6deg); }
.team-meta { grid-column: 1 / -1; color: var(--menu-ink); font-size: clamp(15px, 1.4vw, 25px); font-weight: 900; }
.victory { background: radial-gradient(circle,rgba(255,194,35,.25),rgba(3,10,24,.4)); pointer-events: none; }
.victory h2 { padding: .22em .7em; border-radius: .35em; background: linear-gradient(90deg,#0d47a1,#29b6f6); }
.victory.lose h2 { background: linear-gradient(90deg,#8e1820,#ef5350); }

#tutorial-hud { position: absolute; inset: 0; z-index: 22; pointer-events: none; }
#tutorial-prompt { position: absolute; left: 50%; top: 10vh; transform: translateX(-50%); padding: .45em 1.1em; border-radius: 999px; background: rgba(5,18,38,.88); font-size: clamp(22px,3vw,54px); font-weight: 900; white-space: nowrap; }
#tutorial-cards { position: absolute; left: 50%; bottom: 2vh; transform: translateX(-50%); display: flex; gap: 1vw; }
.tutorial-card { min-width: 10vw; padding: .65em .8em; border-radius: 1em; background: rgba(5,18,38,.72); border: .25vh solid rgba(255,255,255,.35); font-size: clamp(14px,1.4vw,24px); font-weight: 900; opacity: .48; }
.tutorial-card.active { opacity: 1; background: #ffd54f; color: #222; transform: scale(1.08); }
.tutorial-card.done { opacity: 1; background: #2e9f5b; }
.big.tutorial { background: #b8f3c9; color: #16472a; }
.practice-mode #message.serve-guide, .practice-mode #keys-help { display: none; }
.practice-mode #tutorial-cards { bottom: 2.5vh; }
.highlight-setting > span { width: auto; white-space: nowrap; }
.highlight-setting small { flex-basis: 100%; color: #b9e4ff; font-size: clamp(11px,1vw,17px); }
.result-card { padding: 1.4vh 4vw; border-radius: 1.4em; background: rgba(255,255,255,.1); }
.result-card > b { font-size: clamp(18px,2vw,34px); color: #b9e4ff; }
.result-teams { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 2vw; margin-top: 1vh; }
.result-teams .team-player { min-width: 6.5em; padding: .55em; font-size: clamp(14px,1.4vw,24px); }
.result-teams .team-vs.score { color: #fff; font-size: clamp(32px,4.5vw,74px); white-space: nowrap; }

#perf {
  position: absolute; z-index: 30; left: 1.2vw; top: 11vh; min-width: 25em;
  padding: .8em 1em; border-radius: .8em; background: rgba(3,8,18,.84);
  color: #bfffe2; border: 1px solid rgba(160,255,215,.45);
  font: 700 clamp(12px, 1vw, 18px)/1.45 Consolas, monospace; white-space: pre-wrap;
}
#perf[hidden], #gpu-warning[hidden] { display: none; }
#gpu-warning {
  position: absolute; z-index: 31; right: 1.5vw; top: 11vh; max-width: 31em;
  padding: .7em 1em; border-radius: .8em; background: rgba(150,25,18,.9);
  color: #fff; font-size: clamp(13px, 1.15vw, 22px); font-weight: 900;
}

/* 시작·결과 화면 */
.screen {
  position: fixed; inset: 0; z-index: 70;
  display: flex; flex-direction: column; align-items: center; justify-content: safe center; gap: 2.4vh;
  background: #0b1220 center / cover no-repeat;
  text-align: center; padding: 2.5vh 2vw; overflow: hidden;
}
.screen[hidden] { display: none; }
.menu-screen { background-image: url('assets/ui/menu/menu-bg.webp'); }
#ready-screen { background-image: url('assets/ui/menu/ready-bg.webp'); }
.menu-screen::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 55%, transparent 40%, rgba(6,18,40,.45) 100%); pointer-events: none; }
.menu-screen > * { position: relative; }
.menu-enter, .menu-enter-back { animation: menuFade .25s ease-out both; }
@keyframes menuFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes cardBounce { 0% { opacity: 0; transform: translateY(9vh) scale(.86); } 72% { opacity: 1; transform: translateY(-1.2vh) scale(1.02); } 100% { opacity: 1; } }
.menu-enter .mode-grid button, .menu-enter .character-grid button, .menu-enter .team-player,
.menu-enter-back .mode-grid button, .menu-enter-back .character-grid button, .menu-enter-back .team-player { animation: cardBounce .3s cubic-bezier(.2,.8,.25,1.2) both; }
.menu-enter .mode-grid button:nth-child(2), .menu-enter .character-grid button:nth-child(2), .menu-enter .team-player:nth-child(2),
.menu-enter-back .mode-grid button:nth-child(2), .menu-enter-back .character-grid button:nth-child(2), .menu-enter-back .team-player:nth-child(2) { animation-delay: .06s; }
.menu-enter .mode-grid button:nth-child(3), .menu-enter .character-grid button:nth-child(3),
.menu-enter-back .mode-grid button:nth-child(3), .menu-enter-back .character-grid button:nth-child(3) { animation-delay: .12s; }
.menu-enter .character-grid button:nth-child(4), .menu-enter-back .character-grid button:nth-child(4) { animation-delay: .18s; }
.screen h1 { font-weight: 900; font-size: clamp(28px, 4.2vw, 72px); color: #fff; -webkit-text-stroke: .09em var(--menu-ink); paint-order: stroke fill; text-shadow: 0 .08em 0 var(--menu-ink); }
#start-screen { gap: 2vh; }
#start-screen .menu-logo { font-size: clamp(40px, 6.4vw, 120px); line-height: 1; letter-spacing: -.02em; transform: rotate(-3deg); text-shadow: 0 .09em 0 var(--menu-ink), 0 .16em .2em rgba(0,0,0,.35); }
.menu-logo small { display: block; font-size: .42em; color: var(--menu-gold); -webkit-text-stroke: .1em var(--menu-ink); margin-bottom: .1em; }

.home-actions { display: flex; flex-direction: column; gap: 2.2vh; width: min(66vw, 760px); }
.menu-primary, .menu-secondary, .choice-grid button, .character-grid button, .ready-chips button,
.teacher-options button, .teacher-links a, .corner-actions > *, .menu-back {
  border: .45vh solid var(--menu-ink); border-radius: 2.4vh; color: var(--menu-ink);
  background: rgba(255,255,255,.92); font: inherit; font-weight: 900; cursor: pointer; text-decoration: none;
  box-shadow: 0 .65vh 0 var(--menu-ink), 0 1.1vh 2vh rgba(0,0,0,.25); transition: transform .12s, filter .12s;
}
.menu-primary, .menu-secondary { position: relative; overflow: hidden; min-height: 11vh; padding: .35em 1em; font-size: clamp(26px,3.6vw,60px); }
.menu-primary { background: linear-gradient(#fff3b0, var(--menu-gold) 45%, var(--menu-gold-dark)); box-shadow: 0 1vh 0 var(--menu-ink), 0 1.6vh 2.4vh rgba(0,0,0,.35); }
.menu-secondary { font-size: clamp(22px,2.8vw,46px); background: linear-gradient(#b8fff0, var(--menu-mint) 50%, #1f9c80); box-shadow: 0 .85vh 0 var(--menu-ink), 0 1.4vh 2.2vh rgba(0,0,0,.32); }
.menu-primary::after, .menu-secondary::after { content: ''; position: absolute; top: -50%; left: -30%; width: 22%; height: 200%; background: rgba(255,255,255,.55); transform: rotate(20deg); animation: menuShine 2.8s infinite; pointer-events: none; }
@keyframes menuShine { 0%,60% { left: -30%; } 100% { left: 130%; } }
.menu-primary:hover, .menu-secondary:hover, .menu-primary.hand-hover, .menu-secondary.hand-hover,
.corner-actions > :hover, .corner-actions > .hand-hover, .menu-back:hover, .menu-back.hand-hover,
.ready-chips button:hover, .ready-chips button.hand-hover, .teacher-options button:hover, .teacher-options button.hand-hover,
.teacher-links a:hover, .teacher-links a.hand-hover { transform: translateY(-.6vh) scale(1.04); }
.corner-actions { position: absolute; left: 0; right: 0; bottom: 3vh; display: flex; align-items: center; justify-content: center; gap: 1vw; flex-wrap: wrap; }
.corner-actions > * { min-width: auto; min-height: 5.5vh; padding: .5em 1em; border-width: .3vh; border-radius: 999px; font-size: clamp(13px,1.3vw,22px); }
.menu-back { position: absolute; left: 2vw; top: 3vh; min-width: 12vw; min-height: 7vh; padding: .35em .8em; border-width: .3vh; border-radius: 999px; font-size: clamp(18px,2vw,32px); z-index: 2; }

.choice-grid { display: grid; width: min(90vw, 1040px); gap: 2.4vw; align-items: end; }
.mode-grid { grid-template-columns: repeat(3,1fr); }
.choice-grid button, .character-grid button { position: relative; aspect-ratio: 3 / 4; padding: 0; overflow: hidden; border-width: .5vh; background: #fff center / cover no-repeat; }
.choice-grid button { background-image: var(--card-image); font-size: clamp(20px,2.5vw,44px); }
.choice-grid button:nth-child(odd), .character-grid button:nth-child(odd) { transform: rotate(-2deg); }
.choice-grid button:nth-child(even), .character-grid button:nth-child(even) { transform: rotate(2deg); }
.choice-grid button:hover, .choice-grid button.hand-hover, .character-grid button:hover, .character-grid button.hand-hover { transform: translateY(-2vh) scale(1.05) rotate(0); z-index: 2; }
.choice-grid b, .character-grid b { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; display: block; padding: 4.5vh .4em 1.5vh; color: #fff; background: linear-gradient(transparent, rgba(8,20,45,.9) 42%); -webkit-text-stroke: .06em var(--menu-ink); paint-order: stroke fill; }
.choice-grid small { display: block; margin-top: .35vh; font-size: .5em; font-weight: 700; color: #cfe8ff; -webkit-text-stroke: 0; }

.character-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 1.8vw; width: min(92vw,1040px); align-items: end; }
.character-grid button { display: grid; grid-template-rows: minmax(0,1fr) auto auto; height: min(68vh,580px); aspect-ratio: auto; font-size: clamp(20px,2.35vw,40px); }
.character-grid img { display: block; width: 100%; height: 100%; min-height: 0; object-fit: contain; }
.character-grid b { position: static; padding: .12em .4em; background: #10213f; }
.character-stats { position: static; display: block; padding: .5em .8em .65em; color: #fff; background: #10213f; font-size: clamp(12px,.9vw,16px); line-height: 1.2; text-align: left; text-shadow: 0 1px 2px #000; }
.character-stats strong { display: block; margin-bottom: .28em; color: #ffe36e; text-align: center; font-size: 1.08em; }
.character-stats > span { display: grid; grid-template-columns: 2.4em 1fr 2em; align-items: center; gap: .24em; margin-top: .13em; }
.character-stats em { font-style: normal; font-weight: 900; }
.character-stats small { font-size: .88em; font-weight: 900; text-align: right; }
.stars { position: relative; display: inline-block; width: 5.2em; color: rgba(255,255,255,.28); letter-spacing: .04em; white-space: nowrap; }
.stars::before { content: '★★★★★'; position: absolute; inset: 0 auto 0 0; width: calc(var(--rating) / 5 * 100%); overflow: hidden; color: #ffd54f; white-space: nowrap; }
.character-number { position: absolute; z-index: 3; top: 1.2vh; left: 1.2vh; min-width: 1.8em; padding: .18em .45em; border-radius: .65em; color: #fff; background: #4aa3ff; border: .3vh solid var(--menu-ink); font-weight: 900; font-size: .58em; }
.character-grid button:nth-child(2) .character-number { background: var(--menu-mint); }
.character-grid button:nth-child(3) .character-number { background: var(--menu-red); }
.character-grid button:nth-child(4) .character-number { background: #ff8f3a; }
.character-grid button.remembered { outline: .65vh solid var(--menu-gold); outline-offset: -.65vh; }
.character-grid button.remembered::after { content: '지난 선택'; position: absolute; z-index: 4; right: .7em; top: .7em; padding: .25em .55em; border-radius: 999px; color: var(--menu-ink); background: var(--menu-gold); border: .25vh solid var(--menu-ink); font-size: .42em; font-weight: 900; }
.character-grid button.picked, .character-grid button:disabled { opacity: .4; filter: grayscale(.55); cursor: default; }
.character-grid button.picked::after { content: '1P'; position: absolute; z-index: 5; inset: 50% auto auto 50%; transform: translate(-50%,-50%) rotate(-6deg); padding: .18em .55em; border-radius: .4em; color: #fff; background: var(--menu-blue); border: .3vh solid var(--menu-ink); font-size: 1em; font-weight: 1000; filter: none; }

.ready-team-card { max-height: 43vh; }
.ready-chips { display: flex; gap: 1.5vw; }
.ready-chips button { min-width: 14vw; min-height: 7vh; padding: .3em 1em; border-width: .3vh; border-radius: 999px; font-size: clamp(20px,2.2vw,36px); }
.start-match { width: min(42vw,560px); min-height: 10vh; }

.teacher-screen { gap: 1.25vh; }
.teacher-screen h1 { font-size: clamp(30px,4vw,64px); }
.teacher-options { display: grid; gap: 1vh; width: min(76vw,900px); padding: 2vh 2vw; border: .4vh solid var(--menu-ink); border-radius: 2.4vh; background: rgba(255,255,255,.78); box-shadow: 0 1vh 0 var(--menu-ink); color: var(--menu-ink); backdrop-filter: blur(5px); }
.setting-line { display: grid; grid-template-columns: 1fr repeat(2, minmax(12vw,1fr)); align-items: center; gap: .8vw; font-size: clamp(17px,1.8vw,29px); }
.setting-line > b { text-align: left; }
.setting-line button { min-width: 0; min-height: 7vh; padding: .25em .6em; font-size: .9em; }
.setting-line button.on { color: var(--menu-ink); background: var(--menu-gold); }
.hand-choice { display: contents; }
.teacher-screen > p, .teacher-screen > small { padding: .25em .7em; border-radius: .6em; background: rgba(16,33,63,.72); font-size: clamp(12px,1.15vw,19px); }
.teacher-links { display: flex; gap: 1vw; }
.teacher-links a { display: grid; place-items: center; min-height: 7vh; padding: .35em 1em; font-size: clamp(15px,1.5vw,24px); }
.settings-done { width: min(34vw,430px); min-height: 10vh; font-size: clamp(24px,3vw,46px); }

@media (max-width: 820px) {
  .mode-grid { grid-template-columns: 1fr; }
  .choice-grid { width: min(62vw,420px); }
  .choice-grid button { aspect-ratio: 16 / 7; }
  .character-grid { grid-template-columns: repeat(2,1fr); }
  .character-grid button { max-height: 34vh; }
}

.options { display: flex; flex-direction: column; gap: 1.5vh; width: 100%; max-width: 96vw; }
.opt-row { display: flex; align-items: center; justify-content: center; gap: 1vw; flex-wrap: wrap; }
.opt-row span { font-size: clamp(16px, 1.8vw, 32px); width: 4em; opacity: .8; }
.opt-row button {
  font: inherit; font-size: clamp(16px, 1.8vw, 32px); font-weight: bold;
  padding: .4em 1.2em; border-radius: 999px; cursor: pointer;
  border: .2vh solid rgba(255, 255, 255, .4); background: transparent; color: #fff;
}
.opt-row button.on { background: #fff; color: #0b1220; }
.opt-row select {
  font: inherit; font-size: clamp(15px, 1.45vw, 25px); font-weight: 800;
  padding: .35em .8em; border: 2px solid rgba(255,255,255,.45); border-radius: 999px;
  background: #173b5e; color: #fff;
}
.character-row span { width: auto; }
.hand-choice { display: inline-flex; gap: .35vw; }
.teacher-options .hand-choice { display: contents; }
.hand-choice button { min-width: 12vw; padding-inline: .65em; }

.start-row { display: flex; gap: 2vw; flex-wrap: wrap; justify-content: center; width: 100%; max-width: 96vw; }
.big {
  font: inherit; font-size: clamp(20px, 2.6vw, 48px); font-weight: 900;
  padding: .5em 1.6em; border: 0; border-radius: 999px;
  background: #ffd54f; color: #222; cursor: pointer;
}
.big.alt { background: rgba(255, 255, 255, .15); color: #fff; }
.big.help { background: #86e7d6; color: #123c48; font-size: clamp(17px, 1.9vw, 32px); }
.big.settings { background: #ffb8de; color: #47132f; font-size: clamp(17px, 1.9vw, 32px); }
.big.intro-link { background: #c5b3ff; color: #251951; font-size: clamp(17px, 1.9vw, 32px); text-decoration: none; }
.big:disabled { opacity: .5; cursor: wait; }

#start-info { font-size: clamp(14px, 1.25vw, 22px); opacity: .85; max-width: 68em; line-height: 1.5; }
#start-info small { font-size: .82em; color: #b9e4ff; }
.link { color: #90caf9; font-size: clamp(14px, 1.3vw, 22px); }

.settings-screen { z-index: 80; gap: 2vh; overflow: auto; padding-block: 3vh; }
.settings-screen h1 { font-size: clamp(30px, 4.5vw, 76px); }
.settings-screen > p { font-size: clamp(13px, 1.25vw, 22px); opacity: .85; }
#key-settings-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2vw; width: calc(100vw - 32px); max-width: 1450px; }
.key-group { min-width: 0; padding: 1.4vh 1vw; border-radius: 1.2em; background: rgba(255,255,255,.09); }
.key-group h2 { margin-bottom: 1vh; font-size: clamp(18px, 1.7vw, 30px); }
.key-row { display: flex; align-items: center; justify-content: space-between; gap: 1em; margin: .45vh 0; }
.key-row span { text-align: left; font-size: clamp(13px, 1.1vw, 19px); }
.key-bind { min-width: 8.5em; padding: .45em .7em; border: 2px solid rgba(255,255,255,.45); border-radius: .7em; background: #173b5e; color: #fff; font-family: inherit; font-size: clamp(13px, 1.1vw, 19px); font-weight: 800; cursor: pointer; }
.key-bind.listening { color: #202020; background: #ffd54f; outline: .35vh solid #fff; }
@media (max-width: 900px) { #key-settings-grid { grid-template-columns: 1fr; } }

#over-stats { font-size: clamp(16px, 1.8vw, 32px); opacity: .9; line-height: 1.6; }
#over-screen { gap: 1.4vh; padding-block: 1.5vh; }
#over-screen h1 { font-size: clamp(28px, 4vw, 64px); }
#over-reel .hl-reel { padding-block: .8vh; gap: .5vh; }
#over-reel .hl-stage { width: min(48vw, 380px); }
#over-reel .hl-thumbs { margin-top: .7vh; }