/* 미술 방향: 그리스 하늘섬 + 고대 태엽차
   남색 잉크 글자·테두리 + 대리석 종이 + 금빛(태엽·빛나는 삼각형) + 테라코타 빨강 + 청금석 파랑, 그리스 뇌문(메안더) 띠.
   제목·버튼·숫자는 Jua, 본문은 Pretendard(할로매쓰 다른 게임과 같다). */
:root {
  --vh: 1vh;           /* 실제 보이는 높이의 1%(게임이 고쳐 쓴다) */
  --ink: #1f2a44;
  --ink2: #3b4a6b;
  --muted: #66708a;
  --paper: #fbf8f2;
  --cream: #f1ebe0;
  --brass: #e2b33c;
  --brass-d: #a87b12;
  --red: #c8553d;
  --red-d: #9c3b28;
  --sky: #2b59c3;
  --green: #6b8f3a;
  --meander: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='12'%3E%3Crect width='16' height='12' fill='%23e2b33c'/%3E%3Cpath d='M0 9.5H10.5V2.5H4.5V6.5H7.5' fill='none' stroke='%231f2a44' stroke-width='1.7'/%3E%3Cpath d='M10.5 9.5H16' stroke='%231f2a44' stroke-width='1.7'/%3E%3C/svg%3E");
  --marble: linear-gradient(135deg, rgba(255,255,255,.0) 0 38%, rgba(160,150,135,.10) 40%, rgba(255,255,255,0) 44% 70%, rgba(160,150,135,.08) 72%, rgba(255,255,255,0) 76%), linear-gradient(180deg, #fbf8f2, #efe8dc);
  --line: 3px solid var(--ink);
  --drop: 0 4px 0 var(--ink);
  --display: "Jua", "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --body: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #2a3466;
  font-family: var(--body); color: var(--ink);
  user-select: none; -webkit-user-select: none; touch-action: manipulation; }
#view { position: fixed; left: 0; top: 0; width: 100vw; height: calc(var(--vh) * 100); display: block; }
.hidden { display: none !important; }

/* ---------- 버튼: 굵은 테두리 + 아래 그림자, 누르면 내려간다 ---------- */
.btn { font-family: var(--display); font-size: 18px; line-height: 1; color: var(--ink); background: var(--paper);
  border: var(--line); border-radius: 14px; padding: 10px 16px; box-shadow: var(--drop); cursor: pointer;
  transition: transform .06s, box-shadow .06s; }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.btn.big { background: var(--brass); font-size: 22px; padding: 13px 26px; }
.btn.mini { font-size: 14px; padding: 6px 10px; border-width: 2px; border-radius: 10px; box-shadow: 0 3px 0 var(--ink); }

/* ---------- 패널: 크림색 종이, 위에 체크무늬 띠 ---------- */
.panel { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 10;
  width: min(640px, calc(100vw - 32px)); max-height: calc(calc(var(--vh) * 100) - 24px); overflow: auto;
  background: var(--marble); border: var(--line); border-radius: 22px; padding: 24px 22px 18px;
  box-shadow: 0 6px 0 var(--ink), 0 0 0 5px rgba(226, 179, 60, .55), 0 18px 40px rgba(10, 14, 40, .45); }
.panel.bottom { top: auto; bottom: 12px; transform: translateX(-50%); padding: 20px 16px 12px; }
/* 위쪽 띠: 그리스 뇌문 */
.checker { position: absolute; left: 0; right: 0; top: 0; height: 12px; border-radius: 19px 19px 0 0;
  background: var(--meander) repeat-x 0 0 / 16px 12px; border-bottom: 2px solid var(--ink); }
.ptitle { font-family: var(--display); font-weight: 400; font-size: 22px; margin: 4px 0 8px; display: flex; align-items: center; gap: 8px; }
/* 랜덤 뽑기: 도는 동안 주사위가 흔들린다 */
#btnDice { margin-left: auto; background: var(--brass); white-space: nowrap; }
#btnDice.rolling { animation: dice .16s ease-in-out infinite alternate; }
@keyframes dice { from { transform: rotate(-6deg); } to { transform: rotate(6deg) translateY(-2px); } }
.ptitle.sub2 { margin-top: 14px; padding-top: 12px; border-top: 2px dashed rgba(29, 42, 68, .25); }
.note { margin: 10px 0 0; font-size: 13px; color: var(--muted); }
h2 { font-family: var(--display); font-weight: 400; margin: 6px 0 8px; font-size: 30px; }

/* 시작 화면: 가로 화면에서는 오른쪽, 세로 화면에서는 아래 */
.panel.dock { left: auto; right: 16px; top: 60px; bottom: 16px; transform: none; width: 380px; max-height: none; }
@media (max-aspect-ratio: 1/1) {
  .panel.dock { left: 12px; right: 12px; top: auto; bottom: 12px; width: auto; max-height: calc(var(--vh) * 56); }
}
.field { margin: 8px 0; }
.field > label { display: block; font-weight: 800; font-size: 14px; color: var(--ink2); margin-bottom: 6px; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chips button { font-family: var(--display); font-size: 16px; color: var(--ink); background: var(--paper);
  border: 2px solid var(--ink); border-radius: 12px; padding: 8px 12px; box-shadow: 0 3px 0 var(--ink); cursor: pointer; }
.chips button.on { background: var(--ink); color: var(--cream); }
.chips button:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
.swatches button { width: 38px; height: 38px; padding: 0; border-radius: 50%; border: 3px solid var(--ink); }
.swatches button.on { outline: 4px solid var(--brass); outline-offset: 2px; background-clip: padding-box; }
#btnGo { display: block; width: 100%; margin-top: 16px; }

#logo { position: fixed; left: 18px; top: 14px; z-index: 6; display: flex; align-items: center; gap: 10px; pointer-events: none; }
.logoText { font-family: var(--display); font-size: clamp(30px, calc(var(--vh) * 5), 46px); color: #ffe39a;
  -webkit-text-stroke: 7px var(--ink); paint-order: stroke fill; text-shadow: 0 5px 0 var(--ink), 0 0 24px rgba(255, 210, 110, .8); }
/* 로고 아이콘: 빛나는 직각삼각형 */
.logoKey { width: 46px; height: 40px; background: var(--ink); clip-path: polygon(0 100%, 0 0, 100% 100%); position: relative;
  filter: drop-shadow(0 0 8px rgba(255, 210, 110, .9)); }
.logoKey::after { content: ""; position: absolute; inset: 6px 9px 4px 4px; background: linear-gradient(160deg, #fff2c2, var(--brass));
  clip-path: polygon(0 100%, 0 0, 100% 100%); }

/* ---------- 위쪽 표시 ---------- */
#hud { position: fixed; top: 10px; left: 10px; right: 10px; display: flex; align-items: center; z-index: 5; pointer-events: none; }
#hud > * { pointer-events: auto; }
.hudR { margin-left: auto; display: flex; gap: 8px; align-items: center; }
#fps { font: 700 12px monospace; color: var(--ink); background: rgba(255, 253, 247, .75); border-radius: 8px; padding: 4px 6px; }
.pill { display: flex; align-items: center; gap: 6px; background: var(--paper); border: var(--line); border-radius: 999px;
  padding: 5px 14px; box-shadow: 0 3px 0 var(--ink); font-family: var(--display); font-size: 17px; }
.pill b { font-family: var(--display); font-weight: 400; font-size: 26px; line-height: 1; margin: 0 2px; }
/* 황금 삼각형 */
.coin { width: 20px; height: 18px; display: inline-block; background: var(--ink); clip-path: polygon(0 100%, 0 0, 100% 100%); position: relative; }
.coin::after { content: ""; position: absolute; inset: 3px 5px 2px 2px; background: linear-gradient(160deg, #fff2c2, var(--brass));
  clip-path: polygon(0 100%, 0 0, 100% 100%); }
#windHud { position: fixed; top: 10px; left: 50%; transform: translateX(-50%); z-index: 6; }
#windHud b { color: var(--brass-d); }
.wk { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--ink);
  background: radial-gradient(circle, var(--ink) 0 22%, var(--brass) 23%); }
#windBar { width: 130px; height: 14px; border-radius: 7px; background: #e9e2d0; border: 2px solid var(--ink); overflow: hidden; }
#windBar i { display: block; height: 100%; width: 100%;
  background: repeating-linear-gradient(90deg, var(--brass) 0 10px, #ffd56b 10px 12px); }
/* 덜 감은 태엽이 풀려 갈 때: 창이 붉게 깜빡인다(창 위치는 transform을 쓰므로 색과 그림자만 움직인다) */
#windHud.low { animation: windLow .45s ease-in-out infinite alternate; }
#windHud.low #windBar i { background: repeating-linear-gradient(90deg, #d8402f 0 10px, #ff8a6e 10px 12px); }
@keyframes windLow { from { background: var(--paper); box-shadow: 0 3px 0 var(--ink); }
  to { background: #ffd2c8; box-shadow: 0 3px 0 var(--ink), 0 0 0 4px rgba(216, 64, 47, .55), 0 0 18px rgba(216, 64, 47, .7); } }

/* ---------- 경주 중: 화면 왼쪽 반, 오른쪽 반 ---------- */
#touch { position: fixed; inset: 0; z-index: 4; display: flex; touch-action: none; }
.tz { flex: 1; position: relative; }
.tz span { position: absolute; bottom: 22px; width: 78px; height: 78px; border-radius: 50%; display: grid; place-items: center;
  font-size: 30px; color: var(--paper); background: rgba(29, 42, 68, .45); border: 3px solid rgba(255, 253, 247, .85);
  transition: background .1s, transform .1s; }
#tzL span { left: 22px; }
#tzR span { right: 22px; }
.tz.hit span { background: var(--brass); color: var(--ink); border-color: var(--ink); transform: scale(1.12); }
.tz.hint { animation: hint .8s ease-in-out infinite alternate; }
#tzL.hint { background: linear-gradient(270deg, rgba(242, 182, 50, 0), rgba(242, 182, 50, .35)); }
#tzR.hint { background: linear-gradient(90deg, rgba(242, 182, 50, 0), rgba(242, 182, 50, .35)); }
@keyframes hint { from { opacity: .4; } to { opacity: 1; } }

/* ---------- 큰 글자: 카운트다운·튜토리얼·알림 ---------- */
#count { position: fixed; inset: 0; display: grid; place-items: center; z-index: 8; pointer-events: none;
  font-family: var(--display); font-size: clamp(90px, calc(var(--vh) * 22), 170px); color: var(--brass);
  -webkit-text-stroke: 10px var(--ink); paint-order: stroke fill; text-shadow: 0 8px 0 var(--ink); }
/* 카운트다운 아래: 출발 탭과 조작 안내 */
#startTip { position: fixed; left: 50%; top: 64px; transform: translateX(-50%); width: min(92vw, 720px); z-index: 8;
  text-align: center; pointer-events: none; word-break: keep-all; }
#stGo { margin: 0; font-family: var(--display); font-size: clamp(22px, calc(var(--vh) * 4.2), 34px); line-height: 1.3; color: var(--paper);
  -webkit-text-stroke: 6px var(--ink); paint-order: stroke fill; text-shadow: 0 4px 0 var(--ink); }
#stGo b { font-weight: 400; color: var(--brass); }
#stCtrl { display: inline-block; margin: 10px 0 0; font-weight: 800; font-size: 15px; color: var(--paper);
  background: rgba(29, 42, 68, .72); border-radius: 999px; padding: 6px 14px; }
/* 숫자 둘레 금빛 고리: 카운트다운 동안 천천히, 「출발!」 뒤에는 빠르게 깜빡인다. 아래에 「시작 신호에 맞춰 탭!」 */
#tapGo { position: fixed; left: 50%; top: 50%; width: 240px; height: 240px; margin: -120px 0 0 -120px; z-index: 7; pointer-events: none;
  display: grid; place-items: center; }
#tapGo .tgRing { position: absolute; inset: 0; border-radius: 50%; border: 6px solid var(--brass);
  box-shadow: 0 0 0 4px var(--ink), 0 0 30px rgba(255, 210, 110, .9); animation: tgRing 1s ease-out infinite; }
#tapGo.go .tgRing { animation-duration: .45s; border-width: 9px; }
#tapGo b { position: absolute; top: 100%; margin-top: 14px; white-space: nowrap; font-family: var(--display); font-weight: 400; font-size: 30px; color: var(--paper);
  -webkit-text-stroke: 7px var(--ink); paint-order: stroke fill; text-shadow: 0 4px 0 var(--ink); }
#tapGo.go b { color: var(--brass); animation: cue .3s ease-in-out infinite alternate; }
@keyframes tgRing { from { transform: scale(.8); opacity: 1; } to { transform: scale(1.12); opacity: .25; } }
/* 카운트다운 동안 왼쪽·오른쪽 버튼이 살짝 깜빡인다 */
#touch.ready .tz span { animation: hint .5s ease-in-out infinite alternate; }
#toast { position: fixed; left: 50%; top: 15%; transform: translateX(-50%); z-index: 9; pointer-events: none;
  font-family: var(--display); font-size: 24px; color: var(--paper); background: var(--ink);
  border: 3px solid var(--brass); border-radius: 16px; padding: 10px 20px; box-shadow: 0 5px 0 rgba(29, 42, 68, .45); white-space: nowrap; }

/* ---------- 준비: 태엽 감기 ---------- */
#known { font-family: var(--display); font-size: 20px; margin-bottom: 8px; }
/* 길마다 한 줄: 감을 차례인 줄은 황동빛, 다 감은 줄은 ✔ */
  padding: 5px 8px; border-radius: 10px; border: 2px solid transparent; opacity: .55; }
#windAsk { font-family: var(--display); font-size: 19px; margin: 10px 0 0; }
#windAsk em { font-style: normal; color: var(--red); }
.prepFoot { display: flex; align-items: center; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
.prepFoot .note { margin: 0; flex: 1; }
#btnNext { margin-left: auto; }

#cue { position: fixed; left: 18px; bottom: 112px; z-index: 8; pointer-events: none; font-family: var(--display); font-size: clamp(22px, calc(var(--vh) * 4), 32px);
  color: var(--brass); -webkit-text-stroke: 6px var(--ink); paint-order: stroke fill; text-shadow: 0 4px 0 var(--ink); animation: cue .35s ease-in-out infinite alternate; }
@keyframes cue { from { transform: scale(1); } to { transform: scale(1.08); } }
.windRow { display: flex; gap: 10px; align-items: center; margin-top: 12px; flex-wrap: wrap; }
#key { position: relative; width: 78px; height: 78px; flex: none; border-radius: 50%; touch-action: none; cursor: grab;
  border: var(--line); box-shadow: var(--drop);
  background: radial-gradient(circle at 40% 35%, #ffe7a3 0 30%, var(--brass) 31% 70%, var(--brass-d) 71%); }
#keyArm { position: absolute; left: 50%; top: 5px; width: 18px; height: 34px; margin-left: -9px; border-radius: 9px; background: var(--ink); }
#keyHub { position: absolute; left: 50%; top: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%; background: var(--ink); }
.windInfo { display: flex; align-items: baseline; gap: 4px; font-family: var(--display); font-size: 17px; }
.windInfo b { font-family: var(--display); font-weight: 400; font-size: 46px; color: var(--brass-d); min-width: 52px; text-align: right; line-height: 1; }
.prepBtns { display: flex; gap: 6px; align-items: center; }
.prepBtns .btn { min-width: 50px; padding: 10px 10px; }
#btnStart { margin-left: auto; }
#btnStart[disabled] { opacity: .45; }

/* ---------- 전체 다시 보기 ---------- */
#cine { position: fixed; inset: 0; z-index: 9; pointer-events: none; }
#cine .bar { position: absolute; left: 0; right: 0; height: calc(var(--vh) * 11); background: #000; }
#cine .bar.top { top: 0; }
#cine .bar.bot { bottom: 0; display: grid; place-items: center; }
#cineCap { font-family: var(--display); color: var(--brass); font-size: clamp(22px, calc(var(--vh) * 5), 40px); letter-spacing: 2px; }
#cineCap.pop { animation: capIn .6s ease-out; }
@keyframes capIn { from { opacity: 0; transform: translateY(10px) scale(.96); } to { opacity: 1; transform: none; } }
/* 건너뛰기: 위쪽 검은 띠 안 오른쪽(화면 속 「다시 보기 ▶」 글씨를 가리지 않게) */
#btnSkip { position: absolute; top: max(4px, calc(var(--vh) * 5.5 - 15px)); right: 12px; pointer-events: auto; }

/* ---------- 결과 ---------- */
#resMsg { font-size: 18px; font-weight: 700; margin: 4px 0; }
.why { background: var(--paper); border: 2px dashed var(--ink2); border-radius: 14px; padding: 10px 12px; font-size: 17px; }
.why b { font-family: var(--display); font-weight: 400; color: var(--red); font-size: 20px; }
#resRace { font-size: 15px; color: var(--ink2); margin: 6px 0; }
#resStats { display: flex; gap: 8px; margin: 12px 0; }
#resStats div { flex: 1; text-align: center; background: var(--paper); border: 2px solid var(--ink); border-radius: 14px; padding: 8px;
  box-shadow: 0 3px 0 var(--ink); font-weight: 700; }
#resStats b { display: block; font-family: var(--display); font-weight: 400; font-size: 30px; }
.resBtns { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }

/* ---------- 경주 중에는 꼭 필요한 버튼만(화질·FPS는 숨김) ---------- */
body[data-phase="race"] #btnQuality, body[data-phase="race"] #fps,
body[data-phase="count"] #btnQuality, body[data-phase="count"] #fps { display: none; }

/* ---------- 키가 낮은 화면(휴대폰 가로): 촘촘하게 ---------- */
@media (max-height: 520px) {
  .btn { font-size: 15px; padding: 8px 12px; }
  .btn.big { font-size: 18px; padding: 9px 16px; }
  .btn.mini { font-size: 12px; padding: 5px 8px; }
  .panel { padding: 18px 14px 10px; border-radius: 16px; max-height: calc(calc(var(--vh) * 100) - 12px); }
  .note { display: none; }
  h2 { font-size: 22px; margin: 2px 0 4px; }
  .logoText { font-size: 26px; -webkit-text-stroke-width: 5px; }
  .logoKey { width: 34px; height: 30px; }
  /* 시작 화면: 「준비하러 가기」는 늘 패널 아래에 보이게 */
  .panel.dock { top: 50px; bottom: 6px; right: 8px; width: min(330px, 50vw); padding-bottom: 0; }
  .ptitle { font-size: 17px; margin: 2px 0 4px; }
  .ptitle.sub2 { margin-top: 6px; padding-top: 6px; }
  .field { margin: 4px 0; }
  .field > label { font-size: 12px; margin-bottom: 3px; }
  .chips { gap: 5px; }
  .chips button { font-size: 13px; padding: 5px 8px; border-radius: 10px; }
  .swatches button { width: 28px; height: 28px; border-width: 2px; }
  #btnGo { position: sticky; bottom: 0; margin: 8px 0 0; box-shadow: 0 4px 0 var(--ink), 0 -8px 12px rgba(239, 232, 220, .95); }
  /* 준비 화면: 왼쪽에 세로로 세워 오른쪽에 코스가 보이게 */
  #prep.panel.bottom { left: 8px; right: auto; top: 8px; bottom: 8px; transform: none; width: min(400px, 56vw); overflow-y: auto; }
  #known { font-size: 16px; margin-bottom: 4px; }
  #windAsk { font-size: 15px; margin-top: 6px; }
  .windRow { gap: 6px; margin-top: 6px; }
  #key { width: 58px; height: 58px; }
  #keyArm { width: 14px; height: 26px; margin-left: -7px; }
  .windInfo b { font-size: 34px; min-width: 40px; }
  .prepBtns .btn { min-width: 40px; padding: 7px 8px; }
  .prepFoot { margin-top: 6px; }
  /* 경주 중 위쪽 표시 */
  .pill { padding: 3px 10px; font-size: 14px; }
  .pill b { font-size: 21px; }
  #windHud { top: 6px; }
  #windBar { width: 80px; }
  .tz span { width: 64px; height: 64px; bottom: 14px; font-size: 24px; }
  #cue { bottom: 90px; font-size: 22px; }
  #startTip { top: 44px; }
  #stGo { font-size: 19px; -webkit-text-stroke-width: 5px; }
  #stCtrl { font-size: 12px; margin-top: 6px; padding: 4px 10px; }
  #tapGo { width: 150px; height: 150px; margin: -75px 0 0 -75px; }
  #tapGo b { font-size: 20px; margin-top: 8px; -webkit-text-stroke-width: 5px; }
  #count { font-size: 96px; }
  #toast { top: 18%; font-size: 18px; padding: 7px 14px; }
  /* 결과 화면 */
  #resMsg { font-size: 15px; }
  .why { font-size: 14px; padding: 7px 10px; }
  .why b { font-size: 17px; }
  #resRace { font-size: 12px; margin: 4px 0; }
  #resStats { margin: 6px 0; }
  #resStats div { padding: 4px; font-size: 13px; }
  #resStats b { font-size: 20px; }
  #cineCap { font-size: 20px; }
}

/* ---------- 세로로 든 휴대폰·태블릿: 가로로 돌려 달라는 안내(터치 기기에서만) ---------- */
#rotateGate { display: none; position: fixed; inset: 0; z-index: 50; background: rgba(26, 35, 82, .92);
  align-items: center; justify-content: center; padding: 20px; }
@media (orientation: portrait) and (pointer: coarse) {
  #rotateGate { display: flex; }
}
.rotCard { background: var(--marble); border: var(--line); border-radius: 22px; padding: 24px 22px; text-align: center;
  box-shadow: 0 6px 0 var(--ink), 0 0 0 5px rgba(226, 179, 60, .55); max-width: 340px; }
.rotPhone { width: 46px; height: 76px; margin: 0 auto 12px; border: 4px solid var(--ink); border-radius: 10px; background: #fff;
  animation: rotPhone 1.8s ease-in-out infinite; }
@keyframes rotPhone { 0%, 25% { transform: rotate(0); } 55%, 100% { transform: rotate(-90deg); } }
.rotTitle { font-family: var(--display); font-size: 26px; margin: 4px 0; }
.rotDesc { margin: 0 0 16px; color: var(--ink2); font-weight: 700; }

/* ---------- 시상식 ---------- */
#award { position: fixed; top: 10px; left: 50%; transform: translateX(-50%); z-index: 10; width: min(680px, calc(100vw - 20px));
  background: var(--marble); border: var(--line); border-radius: 18px; padding: 18px 12px 10px;
  box-shadow: 0 5px 0 var(--ink), 0 0 0 4px rgba(226, 179, 60, .55), 0 14px 30px rgba(10, 14, 40, .5); overflow: hidden; }
.awardHead { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 10px; margin: 2px 6px 6px; }   /* 부제(다음 코스)가 길면 제목 아래 줄로 */
#awardTitle { font-family: var(--display); font-weight: 400; font-size: 26px; white-space: nowrap; }
#awardSub { font-size: 14px; color: var(--ink2); font-weight: 700; }
#awardList { max-height: calc(var(--vh) * 34); overflow-y: auto; padding-right: 2px; }
.arow { display: grid; grid-template-columns: 52px 1fr 1.1fr 64px 64px; gap: 6px; align-items: center;
  padding: 5px 8px; border-radius: 10px; font-weight: 700; font-size: 15px; }
.arow.ahead { font-size: 12px; color: var(--muted); padding-top: 0; padding-bottom: 2px; }
#awardList .arow { background: rgba(255, 255, 255, .6); margin-bottom: 4px; border: 2px solid transparent;
  opacity: 0; transform: translateY(-10px); animation: rowIn .35s ease-out forwards; animation-delay: calc(var(--i) * 0.14s + 0.6s); }
@keyframes rowIn { to { opacity: 1; transform: none; } }
#awardList .arow.me { border-color: var(--sky); background: #e3ecff; }
/* 내 줄: 순위표 위쪽(1~3등)은 그대로 보이고, 내 줄이 아래로 가려지면 순위표 맨 아래에 붙어 늘 보인다.
   3등 다음 차례에 나타난다(25등이어도 4초 넘게 기다리지 않게) */
#awardList .arow.me { position: sticky; bottom: 0; z-index: 1; box-shadow: 0 -6px 10px rgba(239, 232, 220, .95); animation-delay: calc(min(var(--i), 3) * 0.14s + 0.6s); }
.arow .rk { font-family: var(--display); font-size: 20px; text-align: center; border-radius: 9px; padding: 2px 0; }
.arow.r1 .rk { background: linear-gradient(160deg, #fff2c2, #e2b33c); border: 2px solid var(--ink); }
.arow.r2 .rk { background: linear-gradient(160deg, #ffffff, #b9bfcc); border: 2px solid var(--ink); }
.arow.r3 .rk { background: linear-gradient(160deg, #ffe0c2, #c07a3a); border: 2px solid var(--ink); }
.arow .nm2 { font-family: var(--display); font-size: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.arow .rs { font-size: 14px; white-space: nowrap; }
.arow .pt { font-family: var(--display); font-size: 17px; color: var(--green); text-align: right; }
.arow .tt { font-family: var(--display); font-size: 19px; text-align: right; }
#awardBtns { position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 10; display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
/* 세로 화면: 위에 순위표, 가운데 시상대. 가로 화면: 오른쪽에 순위표, 왼쪽에 시상대 */
@media (max-aspect-ratio: 1/1) {
  #awardList { max-height: calc(var(--vh) * 30); }
}
@media (min-aspect-ratio: 1/1) {
  #award { left: auto; right: 12px; top: 12px; bottom: 12px; transform: none; width: min(430px, 48vw); display: flex; flex-direction: column; }
  #awardList { max-height: none; flex: 1; }
  .arow { grid-template-columns: 40px 1fr 1.25fr 48px 48px; font-size: 13px; }
  .arow .nm2 { font-size: 16px; }
  #awardBtns { left: 12px; right: calc(min(430px, 48vw) + 24px); transform: none; }
  #awardBtns .btn { font-size: 16px; padding: 9px 12px; }
  #awardBtns .btn.big { font-size: 18px; padding: 11px 16px; }
}

/* 시작 화면: 차를 누른 채로 끌어 돌린다 */
body[data-phase="menu"] #view { cursor: grab; }
body[data-phase="menu"] #view.grabbing { cursor: grabbing; }

/* 키가 낮은 화면(휴대폰 가로)의 시상식: 제목 한 줄, 버튼 한 줄(위 시상식 규칙보다 뒤에 두어야 이긴다) */
@media (max-height: 520px) {
  #award { padding: 14px 8px 6px; }
  .awardHead { flex-wrap: wrap; gap: 0 8px; margin: 0 4px 4px; }
  #awardTitle { font-size: 19px; white-space: nowrap; }
  #awardSub { font-size: 11px; white-space: nowrap; }
  .arow { font-size: 12px; padding: 3px 6px; grid-template-columns: 34px 1fr 1.25fr 40px 40px; }
  .arow .nm2 { font-size: 14px; }
  .arow .rk { font-size: 16px; }
  .arow .pt, .arow .tt { font-size: 15px; }
  #awardBtns { bottom: 8px; gap: 6px; flex-wrap: nowrap; }
  #awardBtns .btn { font-size: 12px; padding: 7px 8px; white-space: nowrap; }
  #awardBtns .btn.big { font-size: 13px; padding: 8px 10px; }
}
.rotHelp { margin: 14px 0 0; font-size: 14px; line-height: 1.5; color: var(--ink2); word-break: keep-all; }
.rotHelp b { color: var(--red); }

/* ---------- 감는 창(새 배치): 왼쪽 코스 지도, 오른쪽 감기. 아래 줄에 처음부터·다음·출발 ---------- */
.prepMain { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 12px; align-items: center; }
#gauges { display: block; }
svg.tri { display: block; width: 100%; height: auto; max-height: 220px; }
.tri .sd { stroke: #d9d2c4; stroke-width: 7; stroke-linecap: round; }
.tri .sd.done { stroke: #9cc46a; }
.tri .sd.cur { stroke: #ffe7a3; stroke-width: 9; }
.tri .sd.q { stroke: var(--red); stroke-dasharray: 2 9; stroke-width: 6; }
.tri .sd.q.cur { stroke-width: 8; }
.tri .cell { stroke: var(--brass); stroke-width: 7; stroke-linecap: butt; }
.tri .sd.done ~ .cell { stroke: var(--brass); }
.tri .tick { stroke: var(--ink); stroke-width: 1.6; }
.tri .ra { fill: none; stroke: var(--ink); stroke-width: 1.5; }
.tri .lb, .tri .lb2 { font-family: var(--display); fill: var(--ink2); }
.tri .lb { font-size: 15px; }
.tri .lb2 { font-size: 13px; }
.tri .lb.cur, .tri .lb2.cur { fill: var(--ink); }
.tri .lb.q { fill: var(--red); }
.tri .lb.cur { font-size: 17px; }
.prepCtl { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.prepCtl #windAsk { margin: 0; }
.prepCtl .windRow { margin: 0; flex-wrap: nowrap; }
.windInfo span { white-space: nowrap; }
.prepFoot { display: flex; align-items: center; gap: 10px; margin-top: 10px; flex-wrap: nowrap; }
.prepFoot .note { flex: 1; margin: 0; }
.prepFoot #btnNext, .prepFoot #btnStart { margin-left: auto; white-space: nowrap; }
@media (max-height: 520px) {
  #prep.panel.bottom { display: flex; flex-direction: column; }
  .prepMain { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 6px; flex: 1; align-items: center; }
  svg.tri { max-height: calc(calc(var(--vh) * 100) - 150px); }
  .prepCtl { gap: 6px; }
  .prepFoot { margin-top: 6px; }
}
#windAsk { word-break: keep-all; }

/* ---------- 수업 모드: 학생 입장·안내, 선생님 진행 창 ---------- */
.liveOnly, .hostOnly { display: none; }
body.live-student .liveOnly { display: block; }
body.live-student .soloOnly, body.live-host .soloOnly { display: none !important; }
body.live-host .hostOnly:not(.hidden) { display: inline-block; }
.liveNote { margin: 14px 0 4px; font-weight: 800; color: var(--ink2); background: #fff6d6; border: 2px dashed var(--brass-d);
  border-radius: 12px; padding: 10px 12px; word-break: keep-all; }
#resLive { margin: 10px 0 2px; text-align: center; font-family: var(--display); font-size: 20px; color: var(--ink); }
#liveJoin { width: min(420px, calc(100vw - 32px)); text-align: center; z-index: 30; }
.ljRoom { margin: 4px 0 14px; font-weight: 700; color: var(--ink2); }
.ljRoom b { font-family: var(--display); font-size: 26px; letter-spacing: 3px; color: var(--ink); margin-left: 4px; }
.ljLabel { display: block; font-weight: 800; text-align: left; margin: 0 0 6px; }
#ljName { width: 100%; font: 700 20px var(--body); color: var(--ink); padding: 10px 12px; border: var(--line); border-radius: 12px; background: #fff; }
.ljErr { min-height: 22px; color: var(--red); font-weight: 700; margin: 8px 0; }
#btnJoin { width: 100%; }
#liveBanner { position: fixed; left: 50%; top: 12px; transform: translateX(-50%); z-index: 12; width: max-content; max-width: min(92vw, 640px);
  font-family: var(--display); font-size: 20px; color: var(--ink); background: var(--paper); border: var(--line); border-radius: 999px;
  padding: 8px 20px; box-shadow: 0 4px 0 var(--ink), 0 0 0 4px rgba(226, 179, 60, .5); text-align: center; word-break: keep-all; pointer-events: none; }
#liveBanner.big { top: 38%; font-size: 26px; padding: 14px 28px; border-radius: 20px; }
#hostPanel { position: fixed; right: 12px; top: 12px; bottom: 12px; width: min(400px, 42vw); z-index: 10; display: flex; flex-direction: column; gap: 8px;
  background: var(--marble); border: var(--line); border-radius: 18px; padding: 20px 14px 12px; overflow: hidden;
  box-shadow: 0 5px 0 var(--ink), 0 0 0 4px rgba(226, 179, 60, .55), 0 14px 30px rgba(10, 14, 40, .5); }
#hostPanel.hidden { display: none; }
.hpHead { display: flex; align-items: center; gap: 8px; font-family: var(--display); font-size: 20px; }
.hpHead b { font-weight: 400; }
.hpRoom { margin-left: auto; font-family: var(--body); font-size: 13px; font-weight: 700; color: var(--ink2); }
.hpRoom b { font-family: var(--display); font-size: 22px; letter-spacing: 2px; color: var(--ink); }
#hpRound { font-family: var(--display); font-size: 17px; word-break: keep-all; }
#hpStageField { margin: 0; }
#hpCounts { display: flex; flex-wrap: wrap; gap: 6px; font-weight: 700; font-size: 13px; }
#hpCounts span { background: #fff; border: 2px solid var(--ink); border-radius: 999px; padding: 2px 9px; }
#hpRoster { flex: 1; min-height: 60px; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 6px; align-content: start; }
.hpS { display: flex; justify-content: space-between; align-items: center; gap: 4px; background: #fff; border: 2px solid var(--ink); border-radius: 10px;
  padding: 4px 8px; font-size: 13px; }
.hpS b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hpS i { font-style: normal; font-weight: 700; font-size: 11px; white-space: nowrap; padding: 1px 6px; border-radius: 999px; background: #e9e2d0; }
.hpS.wind i, #hpCounts .wind { background: #ffe7a3; }
.hpS.ready i, #hpCounts .ready { background: #c8f7c5; }
.hpS.race i, #hpCounts .race { background: #bfe3ff; }
.hpS.done i, #hpCounts .done { background: #9cc46a; color: #fff; }
.hpS.rest i, #hpCounts .rest { background: #f3c7bd; }
.hpEmpty { grid-column: 1 / -1; color: var(--muted); font-weight: 700; margin: 8px 0; }
.hpBtns { display: flex; flex-direction: column; gap: 8px; }
.hpBtns .btn { width: 100%; }
.hpFoot { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--red); font-weight: 700; word-break: keep-all; }
@media (max-aspect-ratio: 1/1) {
  #hostPanel { left: 12px; right: 12px; top: auto; width: auto; height: calc(var(--vh) * 46); }
}
.hpPin { display: flex; align-items: center; gap: 3px; font-family: var(--body); font-size: 12px; font-weight: 700; color: var(--ink2); white-space: nowrap; cursor: pointer; }
.hpPin input { width: 16px; height: 16px; accent-color: var(--brass-d); }
.hpQr { display: flex; align-items: center; gap: 10px; }

/* 화면 반쪽 누르기: 아래 동그라미 버튼 없이, 누른 쪽이 잠깐 빛난다 */
.tz.hit { background: rgba(255, 215, 110, .28); }
/* 수업 모드: 출발 신호를 기다리는 동안 조작 익히기(어둡게 깔고 안내) */
#practice { position: fixed; inset: 0; z-index: 3; pointer-events: none; background: rgba(40, 30, 80, .38); }
#prGuide { position: absolute; left: 24px; top: 90px; margin: 0; max-width: min(460px, 70vw); font-family: var(--display); font-size: clamp(18px, calc(var(--vh) * 3.4), 26px);
  line-height: 1.45; color: #fff; background: rgba(15, 18, 40, .82); border: 2px solid rgba(255, 255, 255, .7); padding: 12px 18px; word-break: keep-all; }
#prGuide em { font-style: normal; color: #ffd76e; }
.prTap { position: absolute; top: 46%; transform: translate(-50%, -50%); font-family: var(--display); font-size: clamp(18px, calc(var(--vh) * 3.6), 28px); color: #fff;
  text-shadow: 0 2px 6px rgba(0, 0, 0, .6); white-space: nowrap; }
.prTap b { font-weight: 400; background: var(--brass); color: var(--ink); border-radius: 6px; padding: 0 6px; margin-right: 4px; text-shadow: none; }
.prTap.left { left: 25%; }
.prTap.right { left: 75%; }

/* 코너 앞 드리프트 안내: 길은 그대로 두고, 왼쪽 가운데에 한 줄만 */
#driftTip { position: fixed; inset: 0; z-index: 3; pointer-events: none; background: none; }
#dtGuide { display: none; }
#dtTap { white-space: normal; max-width: 46vw; text-align: center; line-height: 1.35; }
/* 위 알림이 태엽 막대와 겹치지 않게, 안내가 떠 있는 동안만 태엽을 아래로 */
body.drift-on #windHud { top: auto; bottom: 16px; }

/* 출발 신호등 */
#lights { position: fixed; left: 50%; top: calc(50% - 205px); transform: translateX(-50%); z-index: 8; pointer-events: none; display: flex; gap: 14px;
  background: #1b1f2e; border: 4px solid var(--ink); border-radius: 18px; padding: 10px 16px; box-shadow: 0 5px 0 var(--ink), 0 0 0 3px rgba(226, 179, 60, .6); }
#lights i { width: 42px; height: 42px; border-radius: 50%; background: #3a3f52; box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .35); transition: background .08s; }
#lights i.red { background: radial-gradient(circle at 40% 35%, #ffb4a8, #ff3b2f 55%, #b3150c); box-shadow: 0 0 18px 4px rgba(255, 60, 40, .75); }
#lights i.go { background: radial-gradient(circle at 40% 35%, #d6ffd0, #36d65a 55%, #13872d); box-shadow: 0 0 22px 6px rgba(60, 230, 100, .8); }
@media (max-height: 520px) {
  /* 키가 낮은 화면: 위쪽 안내와 겹치지 않게 숫자 고리 왼쪽에 세로로 */
  #lights { top: 50%; left: calc(50% - 92px); transform: translate(-100%, -50%); flex-direction: column; gap: 7px; padding: 8px 6px; border-width: 3px; }
  #lights i { width: 26px; height: 26px; }
}

/* 태엽 감기: 레이싱 화면 왼쪽에 세운 감는 창(오른쪽에는 출발선의 내 차).
   위에서 아래로: 라운드 이름 → 코스 지도(남는 자리를 다 쓴다) → 묻는 말 → 열쇠·바퀴 수·버튼 한 줄 → 처음부터·다음 길 */
@media (min-aspect-ratio: 1/1) {
  #prep.panel.bottom { left: 12px; right: auto; top: 12px; bottom: 12px; transform: none; width: min(420px, 44vw); display: flex; flex-direction: column; overflow-y: auto; }
  #prep .prepMain { display: flex; flex-direction: column; flex: 1 1 0; min-height: 0; gap: 8px; }
  #prep #gauges { position: relative; flex: 1 1 0; min-height: 110px; align-self: stretch; }
  #prep svg.tri { position: absolute; inset: 0; width: 100%; height: 100%; max-height: none; }
  #prep .prepCtl { flex: none; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 12px; }
  #prep .prepCtl #windAsk { flex-basis: 100%; text-align: center; }
  #prep .prepFoot { flex: none; }
}
@media (min-aspect-ratio: 1/1) and (min-height: 521px) {
  #prep .prepMain { gap: 14px; }
  #prep #gauges { max-height: 380px; }
}
@media (min-aspect-ratio: 1/1) and (max-height: 520px) {
  #prep.panel.bottom { left: 8px; top: 8px; bottom: 8px; width: min(400px, 50vw); }
}

/* 다시 보기: 녹화 화면(레코드 형식이라는 걸 알 수 있게) */
#cine .tape { position: absolute; inset: 0;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .07) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at center, transparent 58%, rgba(0, 0, 0, .42) 100%); }
#cine .vf { position: absolute; left: 18px; right: 18px; top: calc(calc(var(--vh) * 11) + 14px); bottom: calc(calc(var(--vh) * 11) + 14px); }
#cine .vf i { position: absolute; width: clamp(22px, calc(var(--vh) * 5), 40px); height: clamp(22px, calc(var(--vh) * 5), 40px); border: 0 solid rgba(255, 255, 255, .9);
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .5)); }
#cine .vf .tl { left: 0; top: 0; border-top-width: 4px; border-left-width: 4px; }
#cine .vf .tr { right: 0; top: 0; border-top-width: 4px; border-right-width: 4px; }
#cine .vf .bl { left: 0; bottom: 0; border-bottom-width: 4px; border-left-width: 4px; }
#cine .vf .br { right: 0; bottom: 0; border-bottom-width: 4px; border-right-width: 4px; }
#cine .rec, #cine .recR { position: absolute; top: calc(calc(var(--vh) * 11) + 26px); font-family: var(--display); color: #fff; font-size: clamp(15px, calc(var(--vh) * 3.2), 24px);
  letter-spacing: 2px; text-shadow: 0 2px 4px rgba(0, 0, 0, .7); display: flex; gap: 10px; align-items: center; }
#cine .rec { left: 40px; }
#cine .recR { right: 40px; }
#cine .rec b { color: #ff3b30; font-weight: 400; animation: recBlink 1s steps(1) infinite; }
#cine .rec span { font-variant-numeric: tabular-nums; letter-spacing: 1px; opacity: .95; }
@keyframes recBlink { 50% { opacity: 0; } }
#flash { position: absolute; inset: 0; background: #fff; opacity: 0; }
#flash.on { animation: shutterFlash .32s ease-out; }
@keyframes shutterFlash { from { opacity: .7; } to { opacity: 0; } }
/* 수업 모드 학생의 시상식: 안내 띠는 순위표를 가리지 않게 시상대 아래로 */
@media (min-aspect-ratio: 1/1) {
  body[data-phase="award"] #liveBanner { top: auto; bottom: 12px; left: calc((100vw - min(430px, 48vw) - 24px) / 2); max-width: calc(100vw - min(430px, 48vw) - 48px); }
}
@media (max-aspect-ratio: 1/1) {
  body[data-phase="award"] #liveBanner { top: auto; bottom: 12px; }
}

/* 수업 모드(학생): 다 꾸몄으면 출발선으로 */
#btnLiveReady { width: 100%; margin-top: 12px; }
@media (max-height: 520px) {
  #btnLiveReady { position: sticky; bottom: 0; margin: 8px 0 0; box-shadow: 0 4px 0 var(--ink), 0 -8px 12px rgba(239, 232, 220, .95); }
  .liveNote { margin: 8px 0 2px; padding: 6px 10px; font-size: 12px; }
}

/* 다시 보기 건너뛰기: 혼자 하기·선생님 큰 화면에만(학생 기기는 다 함께 끝까지) */
body.live-student #btnSkip { display: none; }
/* 수업 모드(학생) 고르기 화면: 안내 띠가 로고와 겹치지 않게 돌림판 아래로 */
@media (min-aspect-ratio: 1/1) {
  body[data-phase="menu"] #liveBanner { top: auto; bottom: 14px; left: 14px; transform: none; max-width: calc(100vw - 420px); }
}
@media (min-aspect-ratio: 1/1) and (max-height: 520px) {
  body[data-phase="menu"] #liveBanner { max-width: calc(100vw - min(330px, 50vw) - 36px); font-size: 14px; }
}
@media (max-aspect-ratio: 1/1) {
  body[data-phase="menu"] #liveBanner { top: 72px; }
}

/* 태엽 감기: 내 차 열쇠를 따라다니는 고리(돌려서 감는다), 차 옆 −1·+1·+5·준비 완료 */
#carKey { position: fixed; left: 0; top: 0; width: 140px; height: 140px; margin: -70px 0 0 -70px; z-index: 6; touch-action: none; cursor: grab; border-radius: 50%; }
#carKey .ckRing { position: absolute; inset: 0; border-radius: 50%; border: 4px dashed rgba(255, 215, 110, .95);
  box-shadow: 0 0 0 3px rgba(31, 42, 68, .35), inset 0 0 22px rgba(255, 215, 110, .35); animation: ckSpin 6s linear infinite; }
#carKey.drag { cursor: grabbing; }
#carKey.drag .ckRing { animation-play-state: paused; border-style: solid; }
#carKey .ckTip { position: absolute; right: 100%; top: 50%; transform: translate(-6px, -50%); white-space: nowrap; font-family: var(--display); font-weight: 400;
  color: #fff; font-size: 20px; -webkit-text-stroke: 5px var(--ink); paint-order: stroke fill; pointer-events: none; }
@keyframes ckSpin { to { transform: rotate(360deg); } }
#carBtns { position: fixed; right: 16px; top: 50%; transform: translateY(-50%); z-index: 6; display: flex; flex-direction: column; gap: 8px; align-items: stretch; }
#carBtns .btn { min-width: 64px; }
#carBtns #btnStart { margin-top: 6px; white-space: nowrap; }
#prep .windRow { justify-content: center; }
@media (max-height: 520px) {
  #carKey { width: 112px; height: 112px; margin: -56px 0 0 -56px; }
  #carKey .ckTip { font-size: 16px; -webkit-text-stroke-width: 4px; }
  #carBtns { right: 10px; gap: 6px; }
  #carBtns .btn { min-width: 52px; }
}

/* 휴대폰·태블릿을 직접 가로로 돌렸는데 전체화면이 아닐 때: 가운데 전체화면 안내(세로 안내와 같은 모양) */
#fsGate { display: none; position: fixed; inset: 0; z-index: 49; background: rgba(26, 35, 82, .88); align-items: center; justify-content: center; padding: 16px; }
#fsGate.on { display: flex; }
#fsGate .rotCard { max-width: 380px; padding: 18px 20px; }
#fsGate .rotTitle { margin: 4px 0 6px; }
#fsSkip { display: block; margin: 10px auto 0; background: none; border: 0; color: var(--muted); font-size: 13px; text-decoration: underline; cursor: pointer; }

/* 제우스의 번개: 화면이 파랗게 번쩍 */
#boltFlash { position: fixed; inset: 0; z-index: 3; pointer-events: none; background: #dff0ff; opacity: 0; }
#boltFlash.on { animation: boltFlash .35s ease-out; }
@keyframes boltFlash { 0% { opacity: .55; } 20% { opacity: .1; } 35% { opacity: .4; } 100% { opacity: 0; } }

/* 진행 창: 학생 입장 QR은 늘 보인다(1라운드를 열기 전에는 크게, 경기 중에는 작게 — 늦게 온 학생도 찍을 수 있게) */
.hpQr { display: flex; align-items: center; gap: 12px; }
#hpQrImg { width: 104px; height: 104px; flex: none; background: #fff; border: 3px solid var(--ink); border-radius: 10px; image-rendering: pixelated; transition: width .3s, height .3s; }
.hpQr.big { flex-direction: column; align-items: center; }
.hpQr.big #hpQrImg { width: min(230px, calc(var(--vh) * 26)); height: min(230px, calc(var(--vh) * 26)); }
.hpQrSide { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.hpQr.big .hpQrSide { align-items: center; }
.hpQrTip { margin: 0; font-size: 13px; font-weight: 700; color: var(--ink2); word-break: keep-all; }
.hpQr.big .hpQrTip { text-align: center; }
.hpQr.big .hpQrSide { flex-direction: row; flex-wrap: wrap; justify-content: center; }
.hpQr.big .hpQrTip { flex-basis: 100%; }
/* 진행 창이 화면보다 길면(낮은 화면) 스크롤: 버튼이 가려지지 않게. 낮은 화면에서는 큰 QR도 조금 작게 */
#hostPanel { overflow-y: auto; }
#hpRoster { min-height: 40px; }
.hpBtns { flex: none; }
@media (max-height: 600px) { .hpQr.big #hpQrImg { width: calc(var(--vh) * 22); height: calc(var(--vh) * 22); } }

/* 선생님: 언제든 QR 다시 보기(진행 창이 닫혀 있는 동안 왼쪽 위) */
#btnQrFloat { position: fixed; left: 12px; top: 12px; z-index: 12; font-size: 16px; padding: 8px 12px; }
/* 수업 모드: 학생·선생님 화면에는 FPS(기술용 숫자)를 보이지 않는다 */
body.live-student #fps, body.live-host #fps { display: none; }
/* 안내 띠는 오른쪽 위 버튼(소리·화질)을 가리지 않게 폭을 줄이고, 길면 두 줄로 */
#liveBanner:not(.big) { max-width: min(640px, calc(100vw - 300px)); border-radius: 18px; }
@media (max-width: 700px) { #liveBanner:not(.big) { max-width: calc(100vw - 230px); font-size: 15px; padding: 6px 12px; } }
/* 차 아래: −1 · +1 · +5 · 처음부터 한 줄, 준비 완료!는 그 아래 */
#carBtns { left: 0; right: auto; top: auto; bottom: 14px; transform: none; flex-direction: column; align-items: stretch; gap: 8px; width: max-content; }
#carWind { display: flex; align-items: center; gap: 8px; }
#carBtns .btn[data-d] { width: 72px; min-width: 0; }
#carBtns #btnReset { white-space: nowrap; padding-left: 14px; padding-right: 14px; }
#carBtns #btnStart { margin: 0; white-space: nowrap; }
@media (max-height: 520px) {
  #carBtns { bottom: 8px; gap: 6px; }
  #carWind { gap: 6px; }
  #carBtns .btn[data-d] { width: 58px; }
}
/* 「준비 완료!」 자리는 처음부터 비워 둔다(나타나도 위 버튼 줄이 밀리지 않게) */
#carBtns #btnStart.hidden { display: block !important; visibility: hidden; }

/* 로고: 게임 이름 아래 부제 「딱 맞게 감아라!」 */
.logoName { display: flex; flex-direction: column; align-items: flex-start; line-height: 1; }
.logoSub { font-family: var(--display); font-size: clamp(15px, calc(var(--vh) * 2.4), 22px); color: #fff; margin-top: 4px; margin-left: 2px;
  -webkit-text-stroke: 5px var(--ink); paint-order: stroke fill; text-shadow: 0 3px 0 var(--ink); }
@media (max-height: 520px) { .logoSub { font-size: 14px; -webkit-text-stroke-width: 3px; text-shadow: 0 2px 0 var(--ink); } }

/* 라운드 소개 카드: 화면 위쪽 가운데에 장소 이름이 톡 나왔다가 3초쯤 뒤 사라진다 */
#roundCard { position: fixed; left: 50%; top: 14%; z-index: 8; pointer-events: none; display: flex; flex-direction: column; align-items: center; gap: 2px;
  font-family: var(--display); color: var(--paper); background: rgba(29, 42, 68, .9); border: 4px solid var(--brass); border-radius: 24px;
  padding: 12px 34px 16px; box-shadow: 0 6px 0 rgba(29, 42, 68, .45); text-align: center; white-space: nowrap; transform: translateX(-50%); }
#roundCard.on { animation: rcIn 3.4s ease forwards; }
@keyframes rcIn { 0% { opacity: 0; transform: translateX(-50%) scale(.6); } 12% { opacity: 1; transform: translateX(-50%) scale(1.06); } 18% { transform: translateX(-50%) scale(1); } 82% { opacity: 1; } 100% { opacity: 0; transform: translateX(-50%) translateY(-12px); } }
#rcIcon { font-style: normal; font-size: 34px; line-height: 1.1; }
#rcTitle { font-weight: 400; font-size: 40px; color: #ffe39a; line-height: 1.15; }
#rcSub { font-size: 20px; }
@media (max-height: 520px) {
  #roundCard { padding: 8px 22px 11px; border-width: 3px; border-radius: 18px; top: 8%; }
  #rcIcon { font-size: 24px; } #rcTitle { font-size: 28px; } #rcSub { font-size: 15px; }
}
/* 태엽 감기 안내: 감을 길이 바뀔 때마다 차 위 가운데에 크게 톡 튀어나오고, 5초 뒤 작게 줄어 그 길을 다 감을 때까지 남는다 */
#windGuide { position: fixed; left: 0; top: 0; z-index: 7; pointer-events: none; display: flex; flex-direction: column; align-items: center; gap: 4px;
  font-family: var(--display); color: var(--paper); background: rgba(29, 42, 68, .92); border: 4px solid var(--brass); border-radius: 22px;
  padding: 14px 28px 16px; box-shadow: 0 6px 0 rgba(29, 42, 68, .45); text-align: center; white-space: nowrap; transition: opacity .35s; transform: translate(-50%, -100%); }
#windGuide.on { animation: wgPop .45s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes wgPop { from { transform: translate(-50%, -100%) scale(.6); } to { transform: translate(-50%, -100%) scale(1); } }
#wgDone { font-style: normal; font-size: 20px; color: #9fe39a; }
#wgDone:empty { display: none; }
#wgTitle { font-weight: 400; font-size: 40px; color: #ffe39a; line-height: 1.1; }
#wgSub { font-size: 22px; }
#windGuide.mini { padding: 7px 16px 9px; border-width: 3px; border-radius: 14px; gap: 2px; background: rgba(29, 42, 68, .85); }
#windGuide.mini #wgDone { display: none; }
#windGuide.mini #wgTitle { font-size: 24px; }
#windGuide.mini #wgSub { font-size: 15px; }
@media (max-height: 520px) {
  #windGuide { padding: 9px 18px 11px; border-width: 3px; border-radius: 16px; }
  #wgDone { font-size: 15px; } #wgTitle { font-size: 27px; } #wgSub { font-size: 16px; }
  #windGuide.mini { padding: 5px 12px 7px; } #windGuide.mini #wgTitle { font-size: 19px; } #windGuide.mini #wgSub { font-size: 13px; }
}

/* 수업 모드(학생): 출발까지 남은 시간(2026-10-09). 안내 띠(위 12px) 아래에 */
#liveClock { position: fixed; left: 50%; top: 62px; transform: translateX(-50%); z-index: 12; width: max-content; max-width: min(92vw, 640px);
  font-family: var(--display); font-size: 17px; color: var(--ink); background: #fff6d6; border: 2px solid var(--brass-d); border-radius: 12px;
  padding: 5px 14px; box-shadow: 0 3px 0 var(--ink); text-align: center; word-break: keep-all; pointer-events: none; }
/* 10초 남으면 빨갛게 두근: 가운데 맞춤(translateX)을 지키도록 cue 대신 따로 둔다(cue는 transform을 덮어 오른쪽으로 밀렸다) */
#liveClock.hurry { background: #ffe1d9; border-color: var(--red); color: var(--red-d); animation: clockHurry .35s ease-in-out infinite alternate; }
@keyframes clockHurry { from { transform: translateX(-50%) scale(1); } to { transform: translateX(-50%) scale(1.08); } }
@media (max-height: 520px) { #liveClock { top: 50px; font-size: 13px; padding: 3px 10px; } }
/* 수업 모드(선생님): 출발 신호 버튼 아래 한 줄 안내 */
#hpHint { font-size: 13px; color: var(--ink); font-weight: 700; word-break: keep-all; }
#hpHint:empty { display: none; }
#btnGoSignal:disabled { opacity: .55; filter: grayscale(.4); cursor: default; }
/* 1라운드에 준비 안 된 학생이 있을 때 출발 신호 재확인 */
#hpConfirm { flex: none; background: #fff6d8; border: 3px solid var(--ink); border-radius: 14px; padding: 10px 12px; }
#hpConfirmTxt { margin: 0 0 8px; font-size: 14px; font-weight: 700; word-break: keep-all; }
.hpConfirmBtns { display: flex; gap: 8px; }
.hpConfirmBtns .btn { flex: 1; font-size: 17px; padding: 11px 10px; }