:root {
  --bg: #171a36;
  --bg2: #232858;
  --card: #ffffff;
  --ink: #1d2140;
  --muted: #6b7099;
  --yellow: #ffd32a;
  --pink: #ff5fa2;
  --blue: #3d7cff;
  --green: #2ed573;
  --red: #ff4757;
  --radius: 18px;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: 'Jua', 'Noto Sans KR', system-ui, sans-serif;
  background: var(--bg);
  color: #fff;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
input, textarea, select, button { font-family: inherit; }
button { cursor: pointer; }
.hidden { display: none !important; }

.screen { position: fixed; inset: 0; display: none; }
.screen.on { display: flex; }
.center { align-items: center; justify-content: center; }
.scroll { overflow-y: auto; }

.lobby-bg {
  background:
    linear-gradient(rgba(23, 26, 54, 0.55), rgba(23, 26, 54, 0.75)),
    url('assets/lobby_bg.jpg') center / cover no-repeat,
    radial-gradient(circle at 20% 20%, #3b4bb5, transparent 50%),
    radial-gradient(circle at 80% 80%, #b53b8f, transparent 50%),
    var(--bg);
}

.logo {
  font-size: 64px; margin: 0 0 6px; letter-spacing: 2px;
  color: var(--yellow);
  text-shadow: 0 4px 0 #e17055, 0 8px 0 rgba(0, 0, 0, 0.35);
  text-align: center;
}
.logo small { display: block; font-size: 20px; color: #fff; text-shadow: none; letter-spacing: 0; margin-top: 8px; opacity: 0.9; }

.card {
  background: var(--card); color: var(--ink);
  border-radius: var(--radius);
  padding: 28px;
  box-shadow: 0 10px 0 rgba(0, 0, 0, 0.25), 0 20px 40px rgba(0, 0, 0, 0.3);
}
.join-card { width: min(420px, 92vw); display: flex; flex-direction: column; gap: 14px; }
.field {
  font-size: 26px; padding: 14px 18px; border-radius: 14px;
  border: 3px solid #dfe3f5; outline: none; width: 100%; color: var(--ink); background: #f6f7ff;
}
.field:focus { border-color: var(--blue); background: #fff; }
.field.code { text-align: center; letter-spacing: 12px; font-size: 40px; }

.btn {
  border: 0; border-radius: 14px; padding: 12px 22px; font-size: 20px;
  background: var(--yellow); color: var(--ink);
  box-shadow: 0 5px 0 #c9a000; transition: transform 0.06s;
}
.btn:active { transform: translateY(3px); box-shadow: 0 2px 0 #c9a000; }
.btn.big { font-size: 28px; padding: 16px 24px; }
.btn.blue { background: var(--blue); color: #fff; box-shadow: 0 5px 0 #2650b8; }
.btn.pink { background: var(--pink); color: #fff; box-shadow: 0 5px 0 #c23778; }
.btn.green { background: var(--green); color: #fff; box-shadow: 0 5px 0 #1e9c52; }
.btn.red { background: var(--red); color: #fff; box-shadow: 0 5px 0 #b8303d; }
.btn.ghost { background: rgba(255, 255, 255, 0.14); color: #fff; box-shadow: none; }
.btn:disabled { opacity: 0.5; pointer-events: none; }
.teacher-link { color: #fff; opacity: 0.85; font-size: 18px; text-decoration: none; background: rgba(23,26,54,0.55); padding: 8px 16px; border-radius: 999px; }
.teacher-link:hover { opacity: 1; background: rgba(23,26,54,0.8); }
.err { color: var(--red); min-height: 1.2em; margin: 0; text-align: center; font-size: 18px; }

/* 차고 */
.garage { width: min(980px, 96vw); display: grid; grid-template-columns: 1fr 1.2fr; gap: 20px; align-items: stretch; }
.garage .preview { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; }
.garage canvas.big { width: 100%; max-width: 360px; aspect-ratio: 1; background: radial-gradient(circle, #eef1ff 0%, #d6dcff 70%); border-radius: 50%; }
.tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.tab { border: 0; border-radius: 999px; padding: 8px 14px; font-size: 18px; background: #eef0fb; color: var(--ink); }
.tab.on { background: var(--ink); color: #fff; }
.opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; max-height: 330px; overflow-y: auto; padding: 4px; }
.opt { border: 3px solid #e6e8f5; border-radius: 14px; background: #fff; padding: 6px; display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 15px; color: var(--ink); }
.opt.on { border-color: var(--blue); background: #edf3ff; }
.opt canvas { width: 64px; height: 64px; }
.swatch { width: 48px; height: 48px; border-radius: 50%; border: 3px solid rgba(0, 0, 0, 0.15); }

/* 대기실 */
.wait { width: min(1100px, 96vw); max-height: 94vh; display: flex; flex-direction: column; gap: 16px; }
.wait-head { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.wait-head .track-thumb { width: 180px; height: 120px; border-radius: 12px; }
.pill { display: inline-block; background: #eef0fb; border-radius: 999px; padding: 4px 12px; font-size: 16px; color: var(--ink); }
.roster { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; overflow-y: auto; padding: 4px; }
.racer { background: #f4f5ff; border-radius: 14px; padding: 8px; text-align: center; color: var(--ink); font-size: 16px; position: relative; }
.racer.me { background: #fff6cc; outline: 3px solid var(--yellow); }
.racer.off { opacity: 0.45; }
.racer canvas { width: 72px; height: 72px; display: block; margin: 0 auto; }
.racer .x { position: absolute; top: 2px; right: 6px; border: 0; background: none; color: #aaa; font-size: 18px; }
.blink { animation: blink 1.4s infinite; }
@keyframes blink { 50% { opacity: 0.4; } }

/* 레이스 화면 */
#game, #game3d { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#game3d + #game { pointer-events: none; }
.hud-btns { display: flex; gap: 6px; justify-content: flex-end; margin-top: 6px; pointer-events: auto; }
.hud-btns button { border: 0; border-radius: 10px; padding: 6px 10px; font-size: 15px; background: rgba(23,26,54,0.75); color: #fff; }
.hud-btns button.off { opacity: 0.5; text-decoration: line-through; }
.hud { position: absolute; pointer-events: none; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.5); }
.hud-tl { top: 12px; left: 14px; display: flex; flex-direction: column; gap: 4px; }
.hud-lap { font-size: 30px; }
.hud-rank { font-size: 54px; color: var(--yellow); line-height: 1; }
.hud-rank small { font-size: 22px; color: #fff; }
.hud-tr { top: 12px; right: 12px; }
.hud-tr canvas { width: 210px; height: 150px; border-radius: 12px; background: rgba(0, 0, 0, 0.35); }
.hud-tc { top: 12px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 6px; }
.banner { background: rgba(23, 26, 54, 0.85); border-radius: 999px; padding: 6px 18px; font-size: 20px; white-space: nowrap; }
.hud-bl { left: 16px; bottom: 16px; display: flex; align-items: flex-end; gap: 14px; }
.item-slot {
  width: 96px; height: 96px; border-radius: 22px; background: rgba(23, 26, 54, 0.75);
  border: 4px solid rgba(255, 255, 255, 0.85); display: flex; align-items: center; justify-content: center; position: relative;
}
.item-slot.full { border-color: var(--yellow); box-shadow: 0 0 18px var(--yellow); animation: pop 0.3s; }
.item-slot .key { position: absolute; bottom: -22px; font-size: 14px; opacity: 0.85; }
@keyframes pop { 0% { transform: scale(0.6); } 70% { transform: scale(1.15); } }
.gauge { width: 180px; }
.gauge .bar { height: 14px; border-radius: 8px; background: rgba(0, 0, 0, 0.45); overflow: hidden; border: 2px solid rgba(255, 255, 255, 0.7); }
.gauge .fill { height: 100%; width: 0; background: linear-gradient(90deg, #4facfe, #00f2fe); }
.gauge .lbl { font-size: 14px; margin-bottom: 3px; }
.speed { font-size: 26px; }
.status { display: flex; gap: 6px; }
.status .st { background: rgba(23, 26, 54, 0.8); border-radius: 12px; padding: 4px 8px; font-size: 16px; display: flex; align-items: center; gap: 4px; }
.status .st.bad { background: rgba(255, 71, 87, 0.85); }

.feed { position: absolute; right: 12px; top: 215px; width: 260px; display: flex; flex-direction: column; gap: 6px; pointer-events: none; }
.feed div { background: rgba(23, 26, 54, 0.8); border-radius: 10px; padding: 6px 10px; font-size: 16px; animation: slidein 0.25s; }
@keyframes slidein { from { transform: translateX(40px); opacity: 0; } }

.center-msg {
  position: absolute; left: 50%; top: 38%; transform: translate(-50%, -50%);
  font-size: 110px; color: var(--yellow); pointer-events: none; text-align: center;
  text-shadow: 0 6px 0 #e17055, 0 12px 20px rgba(0, 0, 0, 0.5); white-space: nowrap;
}
.center-msg.small { font-size: 48px; }
.toast {
  position: absolute; left: 50%; top: 22%; transform: translateX(-50%);
  background: rgba(23, 26, 54, 0.9); padding: 10px 22px; border-radius: 999px; font-size: 26px;
  pointer-events: none; animation: pop 0.3s;
  max-width: min(92vw, 640px); text-align: center; white-space: normal; word-break: keep-all;
}
.flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; transition: opacity 0.4s; }
.ink-layer { position: absolute; inset: 0; pointer-events: none; }
.ink-layer .splat { position: absolute; border-radius: 50%; background: #111; filter: blur(2px); animation: inkin 0.3s; }
@keyframes inkin { from { transform: scale(0.2); } }

/* 문제 창 */
.quiz {
  position: absolute; inset: 0; display: flex; align-items: flex-start; justify-content: center; padding-top: 64px;
  background: rgba(10, 12, 30, 0.3);
}
.quiz .card { width: min(760px, 94vw); text-align: center; }
.quiz .qtag { display: inline-block; background: var(--pink); color: #fff; border-radius: 999px; padding: 4px 14px; font-size: 18px; }
.quiz .qtext { font-size: 32px; margin: 10px 0 14px; line-height: 1.35; word-break: keep-all; }
.quiz .timer { height: 12px; border-radius: 6px; background: #eceefa; overflow: hidden; margin-bottom: 18px; }
.quiz .timer div { height: 100%; background: linear-gradient(90deg, var(--green), var(--yellow), var(--red)); background-size: 300% 100%; width: 100%; }
.choices { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.choice { border: 0; border-radius: 16px; padding: 14px 12px; font-size: 26px; color: #fff; text-align: left; display: flex; gap: 12px; align-items: center; box-shadow: 0 5px 0 rgba(0, 0, 0, 0.2); }
.choice b { background: rgba(255, 255, 255, 0.3); border-radius: 10px; width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.choice:nth-child(1) { background: #ff4757; }
.choice:nth-child(2) { background: #1e90ff; }
.choice:nth-child(3) { background: #f0a500; }
.choice:nth-child(4) { background: #2ed573; }
.choice:nth-child(5) { background: #a55eea; }
.choice:nth-child(6) { background: #ff6b9d; }
.short { display: flex; gap: 10px; }
.short input { flex: 1; }
.quiz-result { font-size: 30px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.quiz-result .big { font-size: 56px; }
.quiz-result.ok .big { color: #19b35c; }
.quiz-result.no .big { color: var(--red); }
.quiz-result .eff { display: flex; align-items: center; gap: 12px; background: #f3f4ff; border-radius: 16px; padding: 10px 18px; }
.quiz-result .desc { font-size: 20px; color: var(--muted); }

/* 터치 버튼 */
.touch { position: absolute; bottom: 0; left: 0; right: 0; height: 0; }
.tbtn {
  position: absolute; bottom: 24px; width: 96px; height: 96px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.22); border: 3px solid rgba(255, 255, 255, 0.6);
  color: #fff; font-size: 30px; display: flex; align-items: center; justify-content: center; touch-action: none;
}
.tbtn.down { background: rgba(255, 211, 42, 0.6); }
.tbtn.sm { width: 74px; height: 74px; font-size: 20px; }

/* 결과 */
.result { width: min(980px, 96vw); max-height: 94vh; overflow-y: auto; }
.podium { display: flex; justify-content: center; align-items: flex-end; gap: 14px; margin: 10px 0 20px; }
.podium .p { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 150px; }
.podium .step { width: 100%; border-radius: 14px 14px 0 0; display: flex; align-items: flex-start; justify-content: center; font-size: 40px; color: #fff; padding-top: 6px; }
.podium .p1 .step { height: 130px; background: linear-gradient(#ffd32a, #f0a500); }
.podium .p2 .step { height: 95px; background: linear-gradient(#dfe4ea, #a4b0be); }
.podium .p3 .step { height: 70px; background: linear-gradient(#e8a87c, #c0713b); }
.podium canvas { width: 90px; height: 90px; }
table.rank { width: 100%; border-collapse: collapse; font-size: 18px; }
table.rank th, table.rank td { padding: 8px 10px; border-bottom: 1px solid #eceefa; text-align: center; }
table.rank th { color: var(--muted); font-weight: normal; }
table.rank tr.me td { background: #fff6cc; }

@media (max-width: 760px) {
  .garage { grid-template-columns: 1fr; }
  .logo { font-size: 44px; }
  .hud-tr canvas { width: 150px; height: 108px; }
  .feed { top: 170px; width: 200px; }
  .quiz .qtext { font-size: 26px; }
  .choice { font-size: 20px; padding: 14px 10px; }
}

/* 기기 고르기 (입장 화면) */
.device-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.device-pick .dev {
  display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 6px; font-size: 30px;
  border-radius: 16px; border: 3px solid #e3e6f5; background: #fff; cursor: pointer; font-family: inherit;
}
.device-pick .dev b { font-size: 16px; color: #2a2d4a; }
.device-pick .dev small { font-size: 12px; color: var(--muted); }
.device-pick .dev.on { border-color: #ffb81f; background: #fff7dc; box-shadow: 0 4px 0 #f0a500; }

/* 태블릿·휴대폰 조이스틱 */
.mob { position: absolute; inset: 0; pointer-events: none; }
.joy {
  position: absolute; left: 28px; bottom: 28px; width: 170px; height: 170px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.18); border: 3px solid rgba(255, 255, 255, 0.55); pointer-events: auto; touch-action: none;
}
.joy-knob {
  position: absolute; left: 50%; top: 50%; width: 76px; height: 76px; margin: -38px 0 0 -38px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.85); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.mbtn {
  position: absolute; width: 104px; height: 104px; border-radius: 50%; pointer-events: auto; touch-action: none;
  background: rgba(255, 255, 255, 0.22); border: 3px solid rgba(255, 255, 255, 0.6); color: #fff; font-size: 34px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: inherit;
}
.mbtn small { font-size: 13px; }
.mbtn.item { right: 26px; bottom: 30px; }
.mbtn.drift { right: 146px; bottom: 30px; width: 88px; height: 88px; font-size: 28px; }
.mbtn.down { background: rgba(255, 211, 42, 0.6); }
/* 태블릿·휴대폰: 왼쪽 아래 정보(아이템 칸·속도)는 가운데 아래로 옮겨 조이스틱과 안 겹치게 */
body.mobile .hud-bl { left: 50%; transform: translateX(-50%) scale(0.85); transform-origin: bottom center; bottom: 8px; }
body.mobile .hud-bl .key { display: none; }

/* 게임 꿀팁 카드 (대기실 · 출발 전 · 차고) */
.tip-card {
  display: flex; align-items: stretch; gap: 16px; background: linear-gradient(135deg, #fff8dc, #ffeef6);
  border: 3px solid #ffe08a; border-radius: 16px; padding: 10px; position: relative; flex: none;
}
.tip-pic {
  position: relative; flex: none; width: 210px; aspect-ratio: 32 / 21; border-radius: 12px; overflow: hidden;
  display: flex; align-items: center; justify-content: center; font-size: 64px; /* 그림이 없으면 이모지가 보임 */
}
.tip-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tip-body { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 6px; padding-right: 34px; }
.tip-tag { align-self: flex-start; background: var(--pink); color: #fff; border-radius: 999px; padding: 2px 12px; font-size: 14px; }
.tip-title { font-size: 26px; color: var(--ink); }
.tip-text { font-size: 18px; color: #4a4f78; line-height: 1.4; word-break: keep-all; }
.tip-dots { display: flex; gap: 6px; margin-top: 4px; flex-wrap: wrap; }
.tip-dots button { width: 10px; height: 10px; padding: 0; border: 0; border-radius: 50%; background: #e2c9d6; }
.tip-dots button.on { background: var(--pink); width: 22px; border-radius: 6px; }
.tip-nav {
  position: absolute; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border: 0; border-radius: 50%;
  background: rgba(29, 33, 64, 0.12); color: var(--ink); font-size: 18px; line-height: 1;
}
.tip-nav.prev { left: 4px; background: rgba(255, 255, 255, 0.85); }
.tip-nav.next { right: 6px; }
.tip-card .anim { animation: tipin 0.35s; }
@keyframes tipin { from { opacity: 0; transform: translateX(14px); } }

/* 출발 전 꿀팁: 아래쪽 가운데, 클릭을 막지 않음 */
.race-tip {
  position: absolute; left: 50%; bottom: 150px; transform: translateX(-50%); width: min(560px, 92vw);
  display: flex; gap: 12px; align-items: center; padding: 10px; border-radius: 16px; pointer-events: none;
  background: rgba(255, 255, 255, 0.94); color: var(--ink); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  transition: opacity 0.6s, transform 0.6s; animation: tippop 0.4s;
}
.race-tip.out { opacity: 0; transform: translate(-50%, 20px); }
.race-tip .tip-pic { width: 170px; font-size: 52px; }
.race-tip .tip-body { padding-right: 4px; gap: 3px; }
.race-tip .tip-title { font-size: 22px; }
.race-tip .tip-text { font-size: 16px; }

/* 차고: 한 줄 꿀팁 */
.garage-tip { font-size: 16px; color: #8e44ad; text-align: center; background: #f6efff; border-radius: 12px; padding: 6px 12px; word-break: keep-all; max-width: 360px; }
.garage-tip:empty { display: none; }

@media (max-width: 760px), (max-height: 560px) {
  .tip-pic { width: 130px; font-size: 44px; }
  .tip-title { font-size: 20px; }
  .tip-text { font-size: 15px; }
  .race-tip { bottom: 120px; }
  .race-tip .tip-pic { width: 110px; font-size: 40px; }
  .race-tip .tip-text { font-size: 14px; }
}
@keyframes tippop { from { opacity: 0; transform: translate(-50%, 24px); } }
@media (max-width: 480px) {
  .tip-card { flex-direction: column; gap: 8px; }
  .tip-pic { width: 100%; max-height: 22vh; }
  .tip-body { padding: 0 6px 4px; }
  .tip-nav { top: 30%; }
  .race-tip .tip-pic { width: 96px; font-size: 34px; }
  .race-tip .tip-title { font-size: 17px; }
  .race-tip .tip-text { font-size: 13px; }
}

/* 저작권 표시 (첫 화면·선생님 화면·사용법) */
.copyright { margin: 6px 0 0; font-size: 13px; color: #fff; opacity: .85; text-align: center; text-shadow: 0 1px 4px rgba(0,0,0,.55); }

/* 첫 화면 구석: 지금 퀴즈 카트를 하는 학생 수 */
.live-count { position: absolute; top: 14px; left: 14px; z-index: 5; color: #fff; font-size: 15px; font-weight: 700; background: rgba(23,26,54,0.6); padding: 7px 14px; border-radius: 999px; }
.live-count b { color: #ffd32a; }
@media (max-width: 600px) { .live-count { position: static; font-size: 13px; padding: 5px 12px; margin-bottom: -10px; } }

/* 결승 통과 배너: 크고 화려하게, 결과 화면이 나올 때까지 */
.finish-banner { position: absolute; inset: 0; z-index: 30; pointer-events: none; display: grid; place-items: center; background: radial-gradient(ellipse at center, rgba(15,18,45,0.55) 0%, rgba(15,18,45,0.15) 70%); }
.fb-card { text-align: center; animation: fb-pop .7s cubic-bezier(.2,1.6,.4,1) both; }
.fb-title { font-size: clamp(30px, 6vw, 64px); color: #fff; text-shadow: 0 4px 0 #2d3561, 0 8px 18px rgba(0,0,0,.5); letter-spacing: 2px; }
.fb-rank { margin: 4px 0 2px; line-height: 1; display: flex; align-items: baseline; justify-content: center; gap: 6px; }
.fb-rank b { font-size: clamp(110px, 22vw, 230px); font-weight: normal; color: var(--fb, #4fc3ff); text-shadow: 0 8px 0 var(--fb2, #1e6fb8), 0 16px 34px rgba(0,0,0,.45); animation: fb-glow 1.6s ease-in-out infinite; }
.fb-rank span { font-size: clamp(40px, 7vw, 76px); color: #fff; text-shadow: 0 5px 0 #2d3561; }
.fb-sub { font-size: clamp(16px, 2.6vw, 24px); color: #fff; opacity: .9; text-shadow: 0 2px 6px rgba(0,0,0,.6); animation: fb-blink 1.4s ease-in-out infinite; }
.finish-banner.r1 { --fb: #ffd32a; --fb2: #c98a00; }
.finish-banner.r2 { --fb: #e9eef5; --fb2: #8d99ab; }
.finish-banner.r3 { --fb: #ffb27a; --fb2: #b0602c; }
.fb-confetti { position: absolute; inset: 0; overflow: hidden; }
.fb-confetti i { position: absolute; top: -20px; width: 10px; height: 16px; border-radius: 2px; opacity: .95; animation: fb-fall linear infinite; }
@keyframes fb-pop { 0% { transform: scale(.2); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@keyframes fb-glow { 0%,100% { filter: brightness(1); transform: scale(1); } 50% { filter: brightness(1.25); transform: scale(1.06); } }
@keyframes fb-blink { 0%,100% { opacity: .9; } 50% { opacity: .45; } }
@keyframes fb-fall { to { transform: translateY(110vh) rotate(720deg); } }
.finish-banner[hidden] { display: none; }
/* 도착 배너 꾸미기 (2차): 카드 · 리본 제목 · 메달 · 회전 빛줄기 — 모두 transform/opacity 애니메이션이라 가벼움 */
.fb-card { position: relative; padding: 26px 56px 24px; border-radius: 30px; background: linear-gradient(160deg, rgba(44,50,120,.82), rgba(22,24,64,.82)); border: 3px solid rgba(255,255,255,.35); box-shadow: 0 18px 50px rgba(0,0,0,.45), inset 0 2px 0 rgba(255,255,255,.25); }
.fb-rays { position: absolute; left: 50%; top: 56%; width: 520px; height: 520px; margin: -260px 0 0 -260px; z-index: -1; border-radius: 50%; pointer-events: none;
  background: repeating-conic-gradient(from 0deg, rgba(255,255,255,.16) 0 10deg, transparent 10deg 24deg);
  -webkit-mask: radial-gradient(circle, #000 25%, transparent 68%); mask: radial-gradient(circle, #000 25%, transparent 68%); animation: fb-spin 14s linear infinite; }
.fb-title { display: inline-block; margin-top: -48px; padding: 8px 30px; border-radius: 999px; font-size: clamp(24px, 4.4vw, 46px); background: linear-gradient(90deg, #ff5e7e, #ff9f43); box-shadow: 0 6px 0 #c0392b, 0 10px 20px rgba(0,0,0,.35); text-shadow: 0 3px 0 rgba(0,0,0,.25); }
.fb-medal { font-size: clamp(44px, 7vw, 72px); margin-top: 10px; line-height: 1; animation: fb-bob 1.8s ease-in-out infinite; }
.fb-rank { margin-top: -4px; }
.fb-sub { display: inline-block; margin-top: 8px; padding: 6px 18px; border-radius: 999px; background: rgba(255,255,255,.14); }
.finish-banner { background: radial-gradient(ellipse at center, rgba(10,12,35,.45) 0%, rgba(10,12,35,.1) 75%); }
@keyframes fb-spin { to { transform: rotate(360deg); } }
@keyframes fb-bob { 0%,100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-8px) rotate(6deg); } }
@media (max-width: 600px) { .fb-card { padding: 22px 26px 20px; } .fb-rays { width: 360px; height: 360px; margin: -180px 0 0 -180px; } }

/* 첫 화면 세로 맞춤 (2026-10-12): 노트북 100% 배율에서 위(로고)·아래(저작권)가 잘리던 문제
   - 가운데 정렬은 유지하되, 넘치면 잘리지 않고 스크롤되게(margin:auto 방식)
   - 화면 높이가 낮을수록 로고·입력칸·버튼·간격을 단계적으로 줄인다 */
#s-join.on { align-items: flex-start; overflow-y: auto; }
#s-join > div { margin: auto 0; padding: 18px 0 14px; }
@media (max-height: 880px) {
  #s-join > div { gap: 14px !important; }
  #s-join .logo { font-size: 52px; margin-bottom: 0; }
  #s-join .logo small { font-size: 17px; margin-top: 4px; }
  #s-join .card { padding: 22px; }
  #s-join .join-card { gap: 11px; }
  #s-join .field { font-size: 22px; padding: 11px 16px; }
  #s-join .field.code { font-size: 32px; }
  #s-join .device-pick .dev { padding: 8px 6px; font-size: 24px; }
  #s-join .btn.big { font-size: 24px; padding: 12px 20px; }
  #s-join .teacher-link { font-size: 16px; padding: 6px 14px; }
  #s-join .teacher-link[style*="margin-top"] { margin-top: -6px !important; }
}
@media (max-height: 720px) {
  #s-join > div { gap: 10px !important; padding: 10px 0; }
  #s-join .logo { font-size: 42px; }
  #s-join .logo small { font-size: 15px; }
  #s-join .card { padding: 16px; }
  #s-join .join-card { gap: 8px; }
  #s-join .field { font-size: 19px; padding: 8px 14px; }
  #s-join .field.code { font-size: 26px; letter-spacing: 8px; }
  #s-join .device-pick .dev { padding: 6px; font-size: 20px; }
  #s-join .device-pick .dev small { display: none; }
  #s-join .btn.big { font-size: 21px; padding: 10px 18px; }
  #s-join .copyright { margin-top: 0; }
}

/* 태블릿 조작 알아보기 쉽게 (2026-10-12)
   - 조이스틱 위·아래에 '핸들 / 브레이크' 글씨 (앞으로는 저절로 달림)
   - 🎁 버튼에 가진 아이템을 보여 주고 노랗게 반짝, 아래 가운데 아이템 칸도 누르면 사용 */
.joy::before, .joy::after { position: absolute; left: 50%; transform: translateX(-50%); white-space: nowrap; color: #fff; font-size: 15px; font-weight: 700; text-shadow: 0 2px 4px rgba(0,0,0,.7); pointer-events: none; }
.joy::before { content: '좌우로 밀어 운전'; top: -26px; }
.joy::after { content: '아래로 당기면 브레이크'; bottom: -24px; font-size: 13px; opacity: .9; }
.mbtn.item.full { border-color: var(--yellow); background: rgba(255, 211, 42, 0.38); box-shadow: 0 0 22px var(--yellow); animation: mbtn-glow 1s ease-in-out infinite; }
.mbtn.item img { pointer-events: none; }
@keyframes mbtn-glow { 50% { box-shadow: 0 0 6px var(--yellow); transform: scale(1.06); } }
.item-slot { pointer-events: auto; cursor: pointer; touch-action: none; }

/* ===== 휴대폰 가로 등 높이가 낮은 화면 (2026-10-12) =====
   휴대폰을 가로로 들면 화면 높이가 300px 안팎이라 문제 보기·꾸미기·대기 화면이 잘렸다.
   - 조이스틱·버튼: 손가락 위치 계산이 있어 크기만 직접 줄인다
   - 나머지 카드·HUD: zoom 으로 비율대로 줄이고, 넘치면 스크롤 */
@media (max-height: 500px) {
  /* 꾸미기·대기·결과 화면: 줄이고, 넘치면 스크롤(가운데 정렬 유지) */
  #s-garage.on, #s-wait.on, #s-result.on { align-items: flex-start; overflow-y: auto; }
  #s-garage > *, #s-wait > *, #s-result > * { margin: auto 0; }
  .garage, .wait, .result { zoom: 0.62; }
  .garage { grid-template-columns: 1fr 1.2fr; width: min(1100px, 155vw); } /* 가로 폰: 위아래로 쌓지 말고 좌우 두 칸 */
  .garage canvas.big { max-width: 300px; }
  .opts { max-height: 260px; }
  .wait, .result { max-height: none; }
  #s-join > div { zoom: 0.8; }

  /* 문제 창: 보기 4개가 한 화면에 다 보이게 */
  .quiz { padding-top: 6px; align-items: flex-start; overflow-y: auto; }
  .quiz .card { padding: 14px 20px; } /* 크기는 game.js fitQuiz()가 화면에 맞춰 줄임 */
  .quiz .qtext { margin: 6px 0 8px; }
  .quiz .timer { margin-bottom: 10px; }

  /* 레이스 HUD: 순위·바퀴·미니맵·소식·가운데 글씨 줄이기 */
  .hud-tl, .hud-tc, .hud-tr, .feed { zoom: 0.6; }
  .center-msg { font-size: 64px; }
  body.mobile .hud-bl { zoom: 0.75; }
  .finish-banner .fb-card { zoom: 0.6; }
  .race-tip { zoom: 0.7; bottom: 90px; }

  /* 조이스틱·버튼: 크기 직접 (zoom 금지) */
  .joy { width: 116px; height: 116px; left: 14px; bottom: 22px; }
  .joy-knob { width: 52px; height: 52px; margin: -26px 0 0 -26px; }
  .joy::before { top: -20px; font-size: 12px; }
  .joy::after { bottom: -19px; font-size: 11px; }
  .mbtn { width: 74px; height: 74px; font-size: 26px; }
  .mbtn small { font-size: 11px; }
  .mbtn.item { right: 14px; bottom: 16px; }
  .mbtn.drift { right: 98px; bottom: 16px; width: 62px; height: 62px; font-size: 22px; }
}

/* 레이스가 아닌 화면은 넘치면 손가락으로 스크롤 (2026-10-12)
   body 는 레이스 화면이 흔들리지 않게 overflow:hidden 이라, 넘친 부분을 볼 방법이 없었다.
   화면(section) 자체가 스크롤되게 하고, 넉넉하면 지금처럼 가운데 정렬(margin:auto). */
#s-join.on, #s-garage.on, #s-wait.on, #s-result.on {
  align-items: flex-start; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; touch-action: pan-y;
}
#s-join > *, #s-garage > *, #s-wait > *, #s-result > * { margin-top: auto; margin-bottom: auto; }
#s-garage.on, #s-wait.on, #s-result.on { padding-block: 10px; box-sizing: border-box; }
.quiz { overflow-y: auto; -webkit-overflow-scrolling: touch; touch-action: pan-y; }

/* ===== 조이스틱·버튼을 화면 크기에 비례 (2026-10-12, 휴대폰 세로에서 겹치던 문제) =====
   vmin = 화면의 짧은 쪽 길이의 1%. 큰 화면은 원래 크기(최대값), 작은 화면은 비례해서 작아짐.
   (위의 '높이 500px 이하' 고정 크기 규칙보다 뒤에 있어 이 규칙이 우선) */
.joy { width: min(170px, 34vmin); height: min(170px, 34vmin); left: 4vmin; bottom: 6vmin; }
.joy-knob { width: 45%; height: 45%; margin: -22.5% 0 0 -22.5%; }
.mbtn { width: min(104px, 21vmin); height: min(104px, 21vmin); font-size: min(34px, 7vmin); }
.mbtn small { font-size: min(13px, 3vmin); }
.mbtn.item { right: 4vmin; bottom: 6vmin; }
.mbtn.drift { right: calc(6vmin + min(104px, 21vmin)); bottom: 6vmin; width: min(88px, 17vmin); height: min(88px, 17vmin); font-size: min(28px, 6vmin); }
.joy::before { top: -1.6em; }
.joy::after { bottom: -1.6em; }

/* 휴대폰 세로(폭이 좁을 때): 위쪽 글씨들 줄이고, 속도·아이템 칸은 조이스틱 위 가운데로 */
@media (max-width: 600px) and (orientation: portrait) {
  .hud-tl, .hud-tr, .feed { zoom: 0.65; }
  .hud-tc { zoom: 0.65; top: 150px; }
  .center-msg { font-size: 72px; }
  body.mobile .hud-bl { zoom: 1; bottom: calc(min(170px, 34vmin) + 20vmin); transform: translateX(-50%) scale(0.75); transform-origin: bottom center; }
  .race-tip { zoom: 0.75; }
  .finish-banner .fb-card { zoom: 0.7; }
}

/* 레이스 중 문서 자체가 밀리지 않게 (휴대폰 키보드) */
html.kart-game { overflow: hidden; overscroll-behavior: none; } /* 학생 게임 화면만 (game.js가 붙임), 선생님 화면은 그대로 스크롤 */
/* 레이스 화면·문제 창에서는 손가락 끌기로 페이지가 밀리지 않게 (누르기는 그대로)
   — 문제 창은 fitQuiz()로 항상 화면 안에 들어오니 스크롤이 필요 없다 */
#s-race, #s-race .quiz { touch-action: none; }
#s-race .quiz { overflow: hidden; overscroll-behavior: none; }