* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #2a2f55; font-family: "Pretendard", -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif; color: #2f3550; user-select: none; -webkit-user-select: none; touch-action: none; overscroll-behavior: none; }
.hidden { display: none !important; }
button { font: inherit; cursor: pointer; }
#gl { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
#fxc { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.kit-root { --kit-accent: #ff6b6b; --kit-accent2: #ffb03b; }

/* ---------- 메뉴 ---------- */
.screen { position: fixed; inset: 0; padding: max(14px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); display: grid; grid-template-columns: minmax(250px, 340px) 1fr; grid-template-rows: auto 1fr auto; gap: 10px; pointer-events: none; }
.screen > * { pointer-events: auto; }
.m-top { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.logo { display: flex; align-items: baseline; gap: 6px; font-weight: 900; letter-spacing: -2px; filter: drop-shadow(0 4px 0 rgba(42, 47, 85, .25)); }
.logo .l1 { font-size: 46px; color: #ffd23f; -webkit-text-stroke: 2px #2a2f55; paint-order: stroke fill; transform: rotate(-6deg); display: inline-block; }
.logo .l2 { font-size: 40px; color: #fff; -webkit-text-stroke: 2px #2a2f55; paint-order: stroke fill; }
.m-side { grid-row: 2; display: grid; gap: 10px; align-content: center; }
.mbtn { text-align: left; border: 0; border-radius: 20px; padding: 14px 18px; background: #fff; box-shadow: 0 6px 0 rgba(42, 47, 85, .22), 0 10px 26px rgba(42, 47, 85, .18); display: grid; gap: 2px; transition: transform .1s; color: #2f3550; }
.mbtn:active { transform: translateY(3px); box-shadow: 0 3px 0 rgba(42, 47, 85, .22); }
.mbtn b { font-size: 21px; font-weight: 900; }
.mbtn small { font-size: 13px; color: #7a809c; font-weight: 600; }
.mbtn.solo { background: linear-gradient(135deg, #ff7a7a, #ffb03b); color: #fff; }
.mbtn.solo small, .mbtn.host small { color: rgba(255, 255, 255, .9); }
.mbtn.host { background: linear-gradient(135deg, #5fb8ff, #8b7cf6); color: #fff; }
.m-card { grid-row: 2; align-self: end; justify-self: end; background: rgba(255, 255, 255, .92); border-radius: 18px; padding: 10px 14px; font-size: 13px; max-width: 300px; box-shadow: 0 8px 22px rgba(42, 47, 85, .18); }
.m-card b { font-size: 15px; }
.m-card .bars { display: grid; grid-template-columns: auto 1fr; gap: 3px 8px; align-items: center; margin-top: 6px; }
.bar { height: 8px; border-radius: 9px; background: #eceaf5; overflow: hidden; }
.bar i { display: block; height: 100%; border-radius: 9px; background: linear-gradient(90deg, #5fdc9a, #5fb8ff); }
.bar i.up { background: linear-gradient(90deg, #ffb03b, #ff6b6b); }
.m-bot { grid-column: 1 / -1; display: flex; gap: 8px; flex-wrap: wrap; }
.chip { border: 0; border-radius: 99px; padding: 8px 14px; background: rgba(255, 255, 255, .9); font-weight: 800; font-size: 13px; color: #2f3550; }
.chip.off { opacity: .55; }

@media (max-width: 640px) and (orientation: portrait) {
  .screen { grid-template-columns: 1fr; grid-template-rows: auto auto 1fr auto; }
  .m-side { grid-row: 3; align-content: end; }
  .m-card { grid-row: 2; justify-self: stretch; max-width: none; align-self: start; }
  .logo .l1 { font-size: 36px; } .logo .l2 { font-size: 32px; }
  .mbtn { padding: 11px 16px; } .mbtn b { font-size: 18px; }
}
@media (max-height: 430px) {
  .mbtn { padding: 9px 14px; border-radius: 16px; } .mbtn b { font-size: 17px; } .mbtn small { font-size: 12px; }
  .logo .l1 { font-size: 32px; } .logo .l2 { font-size: 28px; }
  .m-side { gap: 7px; }
}

/* ---------- 경주 HUD ---------- */
#hud { position: fixed; inset: 0; pointer-events: none; color: #fff; }
#hud button { pointer-events: auto; }
.h-tl { position: absolute; left: max(12px, env(safe-area-inset-left)); top: max(10px, env(safe-area-inset-top)); display: flex; align-items: center; gap: 10px; text-shadow: 0 2px 0 rgba(0, 0, 0, .35); }
.pos { font-weight: 900; line-height: 1; }
.pos b { font-size: 54px; color: #ffd23f; -webkit-text-stroke: 2px #2a2f55; paint-order: stroke fill; }
.pos span { font-size: 22px; -webkit-text-stroke: 1px #2a2f55; paint-order: stroke fill; }
.lapbox { font-weight: 900; font-size: 17px; background: rgba(30, 34, 64, .45); padding: 5px 10px; border-radius: 12px; }
.lapbox #hTime { font-size: 14px; font-variant-numeric: tabular-nums; opacity: .9; }
#minimap { position: absolute; right: max(10px, env(safe-area-inset-right)); top: max(8px, env(safe-area-inset-top)); width: 120px; height: 120px; }
#hPause { position: absolute; right: max(136px, calc(env(safe-area-inset-right) + 126px)); top: max(10px, env(safe-area-inset-top)); }
.hbtn { border: 0; border-radius: 12px; background: rgba(30, 34, 64, .5); color: #fff; font-weight: 900; padding: 8px 12px; }
.msg { position: absolute; left: 0; right: 0; top: 26%; text-align: center; font-size: 76px; font-weight: 900; color: #fff; -webkit-text-stroke: 3px #2a2f55; paint-order: stroke fill; text-shadow: 0 6px 0 rgba(42, 47, 85, .35); transition: transform .15s; }
.msg.pop { animation: pop .5s ease-out; }
@keyframes pop { 0% { transform: scale(1.8); opacity: 0; } 40% { transform: scale(.95); opacity: 1; } 100% { transform: scale(1); } }
.sub { position: absolute; left: 0; right: 0; top: calc(26% + 92px); text-align: center; font-size: 22px; font-weight: 900; -webkit-text-stroke: 1.5px #2a2f55; paint-order: stroke fill; }
#hBoard { position: absolute; left: max(12px, env(safe-area-inset-left)); top: 84px; display: grid; gap: 3px; font-size: 12px; font-weight: 800; }
#hBoard div { display: flex; gap: 6px; align-items: center; background: rgba(30, 34, 64, .38); padding: 2px 8px 2px 4px; border-radius: 9px; min-width: 96px; }
#hBoard div.me { background: rgba(255, 210, 63, .9); color: #2a2f55; }
#hBoard em { font-style: normal; width: 16px; text-align: center; opacity: .85; }
#hBoard i { width: 8px; height: 8px; border-radius: 50%; }
.h-gauge { position: absolute; left: 50%; bottom: max(14px, env(safe-area-inset-bottom)); transform: translateX(-50%); display: flex; align-items: center; gap: 10px; }
.gbar { width: min(34vw, 260px); height: 16px; border-radius: 10px; background: rgba(30, 34, 64, .55); border: 2px solid rgba(255, 255, 255, .8); overflow: hidden; }
.gbar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #5fd4ff, #8b7cf6, #ff7aa2); transition: width .08s linear; }
.spd { font-weight: 900; text-shadow: 0 2px 0 rgba(0, 0, 0, .35); display: flex; align-items: baseline; gap: 2px; min-width: 70px; }
.spd b { font-size: 30px; font-variant-numeric: tabular-nums; }
.spd small { font-size: 12px; }
.ctl { position: absolute; bottom: max(14px, env(safe-area-inset-bottom)); display: flex; gap: 12px; align-items: flex-end; }
.ctl.left { left: max(14px, env(safe-area-inset-left)); }
.ctl.right { right: max(14px, env(safe-area-inset-right)); }
.pad { width: 84px; height: 84px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .85); background: rgba(30, 34, 64, .35); color: #fff; font-size: 30px; font-weight: 900; touch-action: none; display: grid; place-items: center; backdrop-filter: blur(2px); }
.pad.on { background: rgba(255, 255, 255, .45); transform: scale(.95); }
.pad.drift { width: 96px; height: 96px; font-size: 17px; background: rgba(139, 124, 246, .55); }
.pad.boost { font-size: 15px; background: rgba(255, 107, 107, .5); position: relative; }
.pad.boost.ready { background: rgba(255, 107, 107, .9); box-shadow: 0 0 22px #ffb03b; animation: glow 1s infinite alternate; }
@keyframes glow { to { box-shadow: 0 0 6px #ffb03b; } }
.pad.brake { width: 58px; height: 58px; font-size: 20px; }
.pad em { position: absolute; top: -12px; display: flex; gap: 3px; }
.pad em i { width: 20px; height: 24px; border-radius: 6px; background: rgba(30, 34, 64, .5); border: 2px solid #fff; }
.pad em i.f { background: linear-gradient(#ffd23f, #ff6b6b); }
body.pc .ctl { display: none; }
body.pc .h-gauge { bottom: 22px; }
@media (max-height: 430px) { .pad { width: 72px; height: 72px; } .pad.drift { width: 84px; height: 84px; } .msg { font-size: 60px; } .sub { top: calc(26% + 72px); } #hBoard { display: none; } }
@media (orientation: portrait) {
  #minimap { width: 96px; height: 96px; } #hPause { right: 112px; }
  .h-gauge { bottom: calc(max(14px, env(safe-area-inset-bottom)) + 108px); }
  .pad { width: 72px; height: 72px; } .pad.drift { width: 82px; height: 82px; }
  .ctl.right { flex-wrap: wrap-reverse; justify-content: flex-end; width: 170px; }
  .msg { font-size: 58px; } .sub { top: calc(26% + 70px); font-size: 18px; }
  #hBoard { display: none; }
}

#rotateHint { position: fixed; left: 50%; top: 130px; transform: translateX(-50%); background: rgba(30, 34, 64, .8); color: #fff; padding: 6px 12px; border-radius: 99px; font-size: 13px; font-weight: 800; z-index: 50; pointer-events: none; }

/* ---------- 창 (차고·경주 설정·결과) ---------- */
.g-tabs { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; margin: 6px 0 10px; }
.g-tabs button { border: 0; border-radius: 99px; padding: 7px 12px; background: #f1eff8; font-weight: 800; font-size: 13px; color: #5a607c; }
.g-tabs button.on { background: #2a2f55; color: #fff; }
.g-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.g-item { border: 2px solid #ece8f4; border-radius: 16px; padding: 8px; display: grid; gap: 4px; justify-items: center; text-align: center; background: #fff; }
.g-item.on { border-color: #ff6b6b; background: #fff6f6; }
.g-item.lock { background: #faf9fd; }
.g-item b { font-size: 14px; }
.g-item small { font-size: 11.5px; color: #7a809c; line-height: 1.35; min-height: 30px; }
.g-item .tier { color: #ffb03b; font-size: 11px; letter-spacing: 1px; }
.g-item .bars { width: 100%; display: grid; grid-template-columns: auto 1fr; gap: 2px 6px; align-items: center; font-size: 10.5px; color: #7a809c; text-align: left; }
.g-item .bar { height: 6px; }
.g-item .kit-btn { width: 100%; }
.typ { font-size: 10px; font-weight: 900; padding: 1px 7px; border-radius: 99px; background: #e3efff; color: #3b6fb0; }
.typ.bike { background: #ffe9d6; color: #c0602a; }
.upg-box { display: grid; gap: 10px; justify-items: center; text-align: center; padding: 6px; }
.upg-stars { font-size: 26px; letter-spacing: 3px; color: #ffb03b; }
.upg-stars span { color: #ddd; }
.stat-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.stat-table td { padding: 4px 6px; border-bottom: 1px solid #f0eef6; }
.stat-table td:last-child { text-align: right; font-weight: 800; }
.tracks { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; }
.trk { border: 2px solid #ece8f4; border-radius: 16px; padding: 8px; background: #fff; text-align: center; display: grid; gap: 3px; }
.trk.on { border-color: #ff6b6b; background: #fff6f6; }
.trk canvas { width: 100%; height: auto; border-radius: 10px; }
.trk b { font-size: 14px; } .trk small { font-size: 11px; color: #7a809c; }
.trk em { font-style: normal; font-size: 11px; font-weight: 800; }
.seg { display: flex; gap: 6px; justify-content: center; margin: 10px 0 4px; }
.seg button { flex: 1; border: 2px solid #ece8f4; background: #fff; border-radius: 12px; padding: 8px; font-weight: 800; color: #5a607c; }
.seg button.on { border-color: #2a2f55; background: #2a2f55; color: #fff; }
.res-list { display: grid; gap: 5px; margin: 8px 0; }
.res-row { display: grid; grid-template-columns: 34px 14px 1fr auto; gap: 8px; align-items: center; padding: 7px 10px; border-radius: 12px; background: #f6f5fb; font-weight: 700; font-size: 14px; }
.res-row.me { background: #fff1c2; }
.res-row .pl { font-weight: 900; font-size: 17px; text-align: center; }
.res-row i { width: 12px; height: 12px; border-radius: 50%; }
.res-row small { color: #7a809c; font-variant-numeric: tabular-nums; }
.res-gold { text-align: center; font-size: 22px; font-weight: 900; color: #e08a00; }
.help-list { display: grid; gap: 8px; font-size: 14px; line-height: 1.5; }
.help-list div { background: #f6f5fb; border-radius: 12px; padding: 8px 12px; }
.kl-set label { display: block; font-weight: 800; font-size: 13px; color: #7a809c; margin: 8px 0 4px; }

.itembox { width: 46px; height: 46px; border-radius: 14px; border: 2px solid rgba(255,255,255,.8); background: rgba(30,34,64,.5); display: grid; place-items: center; position: relative; font-size: 26px; }
.itembox.has { background: rgba(255,210,63,.85); animation: glow 1s infinite alternate; }
.itembox small { position: absolute; right: 2px; bottom: 0; font-size: 10px; font-weight: 900; color: #fff; }
body:not(.pc) .itembox small { display: none; }
body:not(.pc) .itembox { display: none; }
.pad.item { width: 64px; height: 64px; font-size: 28px; background: rgba(255,210,63,.35); }
.pad.item.ready { background: rgba(255,210,63,.9); }

.ctl .col { display: flex; flex-direction: column; gap: 10px; align-items: center; }
body:not(.pc) .h-gauge { top: max(12px, env(safe-area-inset-top)); bottom: auto !important; }
body:not(.pc) .gbar { width: min(30vw, 220px); }
@media (orientation: portrait) { body:not(.pc) .h-gauge { top: 76px; } .ctl.right { width: auto; flex-wrap: nowrap; } .ctl .col .pad.item { width: 56px; height: 56px; } .ctl .col .pad.brake { width: 50px; height: 50px; } }
@media (orientation: portrait) and (max-width: 500px) {
  .pad { width: 64px; height: 64px; font-size: 24px; } .pad.drift { width: 74px; height: 74px; font-size: 14px; } .pad.boost { font-size: 12px; }
  .ctl .col .pad.item { width: 50px; height: 50px; font-size: 22px; } .ctl .col .pad.brake { width: 46px; height: 46px; font-size: 16px; }
  .ctl { gap: 8px; } .ctl.left { left: 10px; } .ctl.right { right: 10px; }
}

body.pc #btnSteer { display: none; }
body.steer-drag .ctl.left, body.steer-tilt .ctl.left { display: none; }
#dragKnob { position: fixed; width: 110px; height: 110px; margin: -55px 0 0 -55px; border-radius: 50%; border: 3px solid rgba(255,255,255,.7); background: rgba(30,34,64,.25); pointer-events: none; z-index: 5; }
#dragKnob i { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; background: rgba(255,255,255,.85); transition: transform .03s; }
#tiltBar { position: fixed; left: 50%; bottom: max(118px, calc(env(safe-area-inset-bottom) + 110px)); width: 160px; height: 10px; margin-left: -80px; border-radius: 9px; background: rgba(30,34,64,.4); pointer-events: none; }
#tiltBar i { position: absolute; top: -4px; left: 50%; width: 18px; height: 18px; margin-left: -9px; border-radius: 50%; background: #ffd23f; border: 2px solid #fff; }

/* 시상대: 결과 창을 옆으로 비켜서 3D 시상대가 보이게 */
.kit-modal.res-side { place-items: center end; background: rgba(60, 50, 100, .08); backdrop-filter: none; }
.kit-modal.res-side .kit-sheet { max-width: 380px; padding: 16px; }
.kit-modal.res-side .res-row { padding: 5px 10px; font-size: 13px; }
@media (orientation: portrait) { .kit-modal.res-side { place-items: end center; } .kit-modal.res-side .kit-sheet { max-height: 56vh; } }
#hud.podium .ctl, #hud.podium .h-gauge, #hud.podium #hBoard, #hud.podium #tiltBar, #hud.podium #minimap, #hud.podium .msg, #hud.podium .sub { display: none; }

.rank-list { display: grid; gap: 5px; margin: 8px 0; min-height: 120px; align-content: start; }
.rank-row { display: grid; grid-template-columns: 30px 40px 1fr auto; gap: 8px; align-items: center; padding: 4px 10px; border-radius: 12px; background: #f6f5fb; font-weight: 700; font-size: 14px; }
.rank-row.me { background: #fff1c2; }
.rank-row .pl { font-weight: 900; text-align: center; }
.rank-row svg { width: 34px; height: 32px; }
.rank-row small { color: #7a809c; font-variant-numeric: tabular-nums; }