* { 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 { white-space: nowrap; 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-width: 380px) and (orientation: portrait) { .logo { gap: 3px; } .logo .l1 { font-size: 29px; } .logo .l2 { font-size: 25px; } }
@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; }
}

.or-fs { left: 50%; transform: translateX(-50%); bottom: max(14px, env(safe-area-inset-bottom)); }
@media (orientation: portrait) { .or-fs { bottom: auto; top: calc(max(10px, env(safe-area-inset-top)) + 62px); } }
#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: 112px; } .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; }

/* ---------- 터치 버튼 크기: 키트 공통 --kit-btn-scale × 화면에 맞춘 --cs (game.js fitControls) ---------- */
#hud { --pad: 84px; --drift: 96px; --item: 64px; --brake: 58px; --gap: 12px; --cs: var(--kit-btn-scale, 1); }
@media (max-height: 430px) { #hud { --pad: 72px; --drift: 84px; --item: 56px; --brake: 50px; } }
@media (orientation: portrait) { #hud { --pad: 64px; --drift: 74px; --item: 50px; --brake: 46px; --gap: 8px; } }
.ctl { gap: calc(var(--gap) * var(--cs)); }
.ctl .col, .ctl .row2 { display: flex; gap: calc(var(--gap) * var(--cs)); align-items: center; }
.ctl .col { flex-direction: column; }
.ctl .row2 { align-items: flex-end; }
.pad { width: calc(var(--pad) * var(--cs)); height: calc(var(--pad) * var(--cs)); font-size: calc(var(--pad) * var(--cs) * .34); border-width: calc(3px * var(--cs)); }
.pad.drift { width: calc(var(--drift) * var(--cs)); height: calc(var(--drift) * var(--cs)); font-size: calc(var(--drift) * var(--cs) * .18); }
.pad.boost { font-size: calc(var(--pad) * var(--cs) * .18); }
.ctl .col .pad.item { width: calc(var(--item) * var(--cs)); height: calc(var(--item) * var(--cs)); font-size: calc(var(--item) * var(--cs) * .44); }
.ctl .col .pad.brake { width: calc(var(--brake) * var(--cs)); height: calc(var(--brake) * var(--cs)); font-size: calc(var(--brake) * var(--cs) * .34); }
.pad em { top: calc(-12px * var(--cs)); }
.pad em i { width: calc(20px * var(--cs)); height: calc(24px * var(--cs)); }
@media (orientation: portrait) {
  .ctl.right { flex-direction: column; align-items: flex-end; flex-wrap: nowrap; width: auto; }
  .ctl .col { flex-direction: row; }
  .ctl.left { left: 10px; } .ctl.right { right: 10px; }
}
#dragKnob { width: calc(110px * var(--kit-btn-scale, 1)); height: calc(110px * var(--kit-btn-scale, 1)); margin: calc(-55px * var(--kit-btn-scale, 1)) 0 0 calc(-55px * var(--kit-btn-scale, 1)); }
.set-row { display: grid; gap: 6px; margin: 10px 0; }
.set-row > small { font-weight: 800; color: #7a809c; font-size: 13px; }

/* ---------- 그림 버튼 (js/icons.js) ---------- */
.ic { display: block; width: 1em; height: 1em; flex: none; overflow: visible; }
.pad { font-size: 0 !important; padding: 0; }
.pad > .ic { width: 58%; height: 58%; filter: drop-shadow(0 2px 0 rgba(30, 34, 64, .35)); pointer-events: none; }
.pad.drift > .ic { width: 64%; height: 64%; }
.pad.brake > .ic { width: 62%; height: 62%; }
.pad.item > .ic { width: 66%; height: 66%; }
.pad.item:not(.ready) > .ic { opacity: .55; filter: grayscale(.4) drop-shadow(0 2px 0 rgba(30, 34, 64, .3)); }
.pad.boost .pi { display: grid; place-items: center; width: 58%; height: 58%; pointer-events: none; }
.pad.boost .pi > .ic { width: 100%; height: 100%; filter: drop-shadow(0 2px 0 rgba(30, 34, 64, .35)); }
.pad.boost:not(.ready) .pi { opacity: .6; }
.pad.on > .ic, .pad.on .pi { transform: scale(.92); }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 13px 6px 8px; }
.chip > .ic { width: 22px; height: 22px; }
/* 그림(아이콘)은 JS 가 나중에 넣음 → 그 전에도 같은 자리를 잡아 둬서 버튼 줄이 넘쳐 메뉴가 툭 올라가지 않게 */
.chip[data-ic]:not([data-ic-now])::before { content: ""; width: 22px; height: 22px; flex: none; }
.hbtn.icon { width: calc(44px * var(--kit-btn-scale, 1)); height: calc(44px * var(--kit-btn-scale, 1)); padding: calc(7px * var(--kit-btn-scale, 1)); border-radius: 14px; display: grid; place-items: center; background: rgba(30, 34, 64, .4); border: 2px solid rgba(255, 255, 255, .8); }
.hbtn.icon > .ic { width: 100%; height: 100%; }
@media (orientation: portrait) { #hPause { right: max(112px, calc(env(safe-area-inset-right) + 106px)); } }
.itembox > span { display: grid; place-items: center; width: 80%; height: 80%; }
.itembox > span > .ic { width: 100%; height: 100%; }
.h-ic-row { display: flex; align-items: center; justify-content: center; gap: 8px; }
.h-ic { width: 30px; height: 30px; }
.key-open { display: flex; align-items: center; gap: 8px; justify-content: center; width: 100%; }
.key-open > .ic { width: 26px; height: 26px; }
.help-ics { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; }
.help-ics > b { width: 100%; }
.help-ics span { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; }
.help-ics .ic { width: 28px; height: 28px; padding: 3px; border-radius: 8px; background: #2f3a66; }
.help-ics small { width: 100%; color: #7a809c; }

/* 키 설정 */
.key-list { display: grid; gap: 6px; }
.key-row { display: grid; grid-template-columns: 34px minmax(70px, 1fr) minmax(76px, 104px) minmax(76px, 104px); gap: 8px; align-items: center; padding: 6px 8px; border-radius: 14px; background: #f6f5fb; }
.key-row.bad { background: #fff0f3; box-shadow: inset 0 0 0 2px #ffb3c4; }
.key-row > b { font-size: 14px; }
.key-ic { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: #2f3a66; padding: 4px; }
.key-ic .ic { width: 100%; height: 100%; }
.key-cap { border: 1.5px solid #dcd8ea; border-bottom-width: 4px; background: #fff; border-radius: 10px; padding: 7px 4px; font-weight: 900; font-size: 14px; color: #2f3550; min-height: 38px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.key-cap.empty { color: #b0b4c8; font-weight: 700; border-style: dashed; border-bottom-width: 1.5px; }
.key-cap.wait { border-color: #8b7cf6; background: #f1eeff; color: #5b4bc4; font-size: 12px; animation: keyBlink .8s infinite alternate; }
.key-cap:disabled { opacity: .7; cursor: default; background: #eeedf5; }
@keyframes keyBlink { to { background: #e3dcff; } }
.key-warn { grid-column: 2 / -1; font-style: normal; font-size: 12px; font-weight: 800; color: #e0567a; }
.key-note { min-height: 20px; text-align: center; font-size: 13px; font-weight: 700; color: #4a8a5a; margin: 8px 0 0; }
.key-note .warn { color: #d0662a; }
@media (max-width: 420px) { .key-row { grid-template-columns: 30px 1fr 1fr; } .key-row > b { grid-column: 2 / -1; } .key-ic { grid-row: span 2; width: 30px; height: 30px; } .key-row > .key-cap:first-of-type { grid-column: 2; } }

/* ---------- v3: 부스터 칸·순간 부스터 신호·출발 신호등·순위 알림 ---------- */
.gwrap { display: grid; gap: 4px; justify-items: center; }
.nslots { display: flex; gap: 6px; }
.nslots i { width: 30px; height: 14px; border-radius: 6px; background: rgba(30, 34, 64, .5); border: 2px solid rgba(255, 255, 255, .85); transition: background .15s, transform .15s; }
.nslots i.f { background: linear-gradient(90deg, #ffd23f, #ff6b6b); box-shadow: 0 0 10px rgba(255, 176, 59, .9); }
.nslots i.pop { animation: slotPop .4s ease-out; }
@keyframes slotPop { 0% { transform: scale(1.7); } 100% { transform: scale(1); } }
.gbar.full i { animation: gFull .3s infinite alternate; }
@keyframes gFull { to { filter: brightness(1.5); } }
.ibcue { position: absolute; left: calc(50% + min(24vw, 200px)); top: 50%; width: 104px; height: 104px; margin-left: -52px; display: grid; place-items: center; pointer-events: none; }
.ibcue svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.ibcue circle { fill: rgba(30, 34, 64, .35); stroke: rgba(255, 255, 255, .5); stroke-width: 6; }
.ibcue circle.ring { fill: none; stroke: #ffd23f; stroke-width: 9; stroke-linecap: round; stroke-dasharray: 276.5; stroke-dashoffset: calc(276.5 * (1 - var(--p, 1))); filter: drop-shadow(0 0 6px #ffb03b); }
.ibcue.lv2 circle.ring { stroke: #ff5fa2; filter: drop-shadow(0 0 8px #ff5fa2); }
.ibcue b { position: relative; font-size: 26px; font-weight: 900; color: #fff; -webkit-text-stroke: 1.5px #2a2f55; paint-order: stroke fill; margin-top: -8px; }
.ibcue small { position: absolute; bottom: 20px; font-size: 12px; font-weight: 900; color: #ffd23f; -webkit-text-stroke: 1px #2a2f55; paint-order: stroke fill; }
.ibcue.go { animation: ibIn .18s ease-out; }
@keyframes ibIn { from { transform: scale(1.5); opacity: .2; } to { transform: scale(1); opacity: 1; } }
.pad.boost.ib { background: rgba(255, 210, 63, .95) !important; box-shadow: 0 0 0 calc(5px * var(--cs)) #fff, 0 0 26px #ffd23f; animation: none; }
.lights { position: absolute; left: 50%; top: 14%; transform: translateX(-50%); display: flex; gap: 12px; padding: 10px 14px; border-radius: 20px; background: rgba(30, 34, 64, .75); border: 3px solid #fff; }
.lights i { width: 34px; height: 34px; border-radius: 50%; background: #3a3f60; box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .3); }
.lights i.r { background: #ff4f5e; box-shadow: 0 0 16px #ff4f5e; }
.lights.go i { background: #3fe07a; box-shadow: 0 0 18px #3fe07a; }
.pospop { position: absolute; left: max(12px, env(safe-area-inset-left)); top: 74px; font-weight: 900; font-size: 22px; color: #3fe07a; -webkit-text-stroke: 1.5px #2a2f55; paint-order: stroke fill; opacity: 0; pointer-events: none; }
.pospop.down { color: #ff6b6b; }
.pospop.show { animation: posPop 1.1s ease-out; }
@keyframes posPop { 0% { opacity: 0; transform: translateY(8px) scale(1.4); } 15% { opacity: 1; transform: none; } 75% { opacity: 1; } 100% { opacity: 0; transform: translateY(-6px); } }
.msg.lap { color: #ffd23f; }
.msg.final { color: #ff7aa2; }
@media (orientation: portrait) { .ibcue { top: 47%; width: 88px; height: 88px; margin-left: -44px; } .ibcue b { font-size: 22px; } .lights i { width: 26px; height: 26px; } }
#hud.podium .ibcue, #hud.podium .lights, #hud.podium .pospop { display: none; }
.trk { position: relative; }
.trk .new { position: absolute; top: 4px; right: 4px; background: #ff4f5e; color: #fff; font-size: 10px; font-weight: 900; padding: 1px 6px; border-radius: 99px; box-shadow: 0 2px 0 rgba(0, 0, 0, .2); }
.seg button .new { background: #ff4f5e; color: #fff; font-size: 9px; font-weight: 900; padding: 0 4px; border-radius: 99px; margin-left: 3px; vertical-align: 2px; }

/* ---------- 버튼 위치 바꾸기 (js/layout.js) ---------- */
body.lay-custom #hud .ctl .pad { position: fixed; margin: 0; }
body.lay-custom #hud .ctl .pad > .ic, body.lay-custom #hud .ctl .pad .pi { width: 58%; height: 58%; }
body.lay-custom .pad.boost { font-size: 0; }
body.lay-custom .pad em { top: -14px; }
body.lay-edit #hud > :not(.ctl) { visibility: hidden; }
body.lay-edit #hud .ctl { display: flex !important; }
body.lay-edit #menu { display: none; }
body.lay-edit .pad { cursor: grab; touch-action: none; }
.pad.lay-sel { outline: 4px dashed #ffd23f; outline-offset: 4px; }
.pad.lay-bad { border-color: #ff4f5e !important; box-shadow: 0 0 0 4px rgba(255, 79, 94, .55) !important; }
#layEd { position: fixed; left: 0; right: 0; top: max(6px, env(safe-area-inset-top)); z-index: 60; display: flex; justify-content: center; pointer-events: none; }
#layEd.bottom { top: auto; bottom: max(6px, env(safe-area-inset-bottom)); }
#layEd .le-bar { pointer-events: auto; background: rgba(255, 255, 255, .95); color: #2f3550; border-radius: 16px; padding: 8px 12px; box-shadow: 0 8px 24px rgba(30, 34, 64, .3); display: grid; gap: 5px; width: min(560px, calc(100vw - 20px)); font-size: 13px; }
#layEd .le-head { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
#layEd .le-head b { font-size: 15px; font-weight: 900; }
#layEd .le-head small { color: #7a809c; font-weight: 700; }
#layEd .le-row { display: flex; gap: 8px; align-items: center; }
#layEd .le-row label { font-weight: 800; white-space: nowrap; min-width: 54px; }
#layEd .le-row input { flex: 1; min-width: 80px; accent-color: #ff6b6b; }
#layEd .le-seg { display: flex; gap: 4px; }
#layEd .le-seg button { border: 2px solid #ece8f4; background: #fff; border-radius: 10px; padding: 4px 8px; font-weight: 800; font-size: 12px; color: #5a607c; white-space: nowrap; }
#layEd .le-seg button.on { background: #2a2f55; border-color: #2a2f55; color: #fff; }
#layEd .le-act { display: flex; gap: 6px; justify-content: flex-end; }
#layEd .le-warn { margin: 0; min-height: 0; color: #e0567a; font-weight: 800; font-size: 12px; }
#layEd .le-warn:empty { display: none; }
@media (max-height: 430px) { #layEd .le-bar { padding: 6px 10px; gap: 3px; } #layEd .le-head small { display: none; } }
.seg.wrap { flex-wrap: wrap; }
.seg.wrap button { flex: 1 1 30%; }
#hud.speedmode .itembox, #hud.speedmode #tItem { display: none !important; }
#layEd .le-b { border: 2px solid #ece8f4; background: #fff; color: #2f3550; border-radius: 12px; padding: 6px 14px; font-weight: 900; font-size: 13px; }
#layEd .le-b.ok { background: linear-gradient(135deg, #ff7a7a, #ffb03b); border-color: transparent; color: #fff; min-width: 72px; }

/* ---------- 이벤트 '나만의 카트 키우기' · 리어장식 HUD ---------- */
.itembox .item2 { position: absolute; right: -14px; top: -10px; width: 24px; height: 24px; border-radius: 8px; background: rgba(255,210,63,.95); border: 2px solid #fff; display: grid; place-items: center; }
.itembox .item2 svg { width: 18px; height: 18px; }
.exg { position: relative; width: 54px; height: 54px; border-radius: 50%; border: 3px solid rgba(255,255,255,.85); background: conic-gradient(#5fd4ff calc(var(--ex, 0) * 360deg), rgba(30,34,64,.55) 0); display: grid; place-items: center; color: #fff; padding: 0; }
.exg i { position: absolute; inset: 5px; border-radius: 50%; background: rgba(30,34,64,.75); }
.exg b { position: relative; font-size: 15px; font-weight: 900; letter-spacing: -.5px; }
.exg.ready b { color: #ff5f6b; animation: exblink .6s infinite alternate; }
.exg.full { box-shadow: 0 0 16px #5fd4ff; }
.exg.on { border-color: #7fe8ff; box-shadow: 0 0 22px #7fe8ff; }
.exg.on b { color: #7fe8ff; animation: none; }
@keyframes exblink { from { opacity: 1; } to { opacity: .45; } }

/* 메뉴 오른쪽: 이벤트 창 + 뽑기 창 (내 카드와 같은 오른쪽 칸 위쪽 → 가운데 전시장 카트를 가리지 않음) */
.m-evs { grid-column: 3; grid-row: 2; align-self: start; justify-self: end; display: grid; gap: 14px; width: 230px; }
.m-card { grid-column: 3; }
.ev-card { width: 100%; border: 0; border-radius: 18px; padding: 10px 12px; background: linear-gradient(135deg, #2a2f55, #5b4bc4); color: #fff; text-align: left; box-shadow: 0 6px 0 rgba(42,47,85,.3), 0 10px 26px rgba(42,47,85,.25); display: grid; grid-template-columns: 64px 1fr; gap: 2px 10px; align-items: center; position: relative; }
.ev-card.gc { background: linear-gradient(135deg, #7a2a55, #e0567a 60%, #ffb03b); }
.ev-card.gc .ev-tag { background: #ffd23f; color: #2a2f55; }
.ev-card .ev-tag { position: absolute; top: -8px; left: 12px; background: #ff5f6b; color: #fff; font-size: 11px; font-weight: 900; border-radius: 99px; padding: 2px 8px; }
.ev-card img { grid-row: span 3; width: 64px; height: 48px; object-fit: contain; }
.ev-card b { font-size: 15px; font-weight: 900; }
.ev-card small { font-size: 12px; color: #f0eeff; font-weight: 700; }
.ev-card .ev-bar { height: 6px; border-radius: 9px; background: rgba(255,255,255,.2); overflow: hidden; }
.ev-card .ev-bar i { display: block; height: 100%; background: linear-gradient(90deg, #ffd23f, #ff7aa2); }
.ev-card.ok { animation: glow 1s infinite alternate; }
/* 작은 창(휴대폰): 두 창을 나란히 작은 칸으로 (그림 + 이름 + 막대) */
@media (max-height: 430px), (max-width: 640px) and (orientation: portrait) {
  .m-evs { grid-template-columns: 1fr 1fr; gap: 8px; width: 224px; }
  .ev-card { grid-template-columns: 1fr; justify-items: center; text-align: center; padding: 8px 6px 7px; gap: 1px; border-radius: 14px; }
  .ev-card img { grid-row: auto; width: 50px; height: 34px; }
  .ev-card b { font-size: 12px; white-space: nowrap; }
  .ev-card small { display: none; }
  .ev-card .ev-bar { width: 100%; height: 5px; }
  .ev-card .ev-tag { font-size: 10px; left: 8px; }
}
/* 가로 휴대폰: 내 카드는 이름만 (능력치 막대는 차고에서) */
@media (max-height: 430px) {
  .m-card { padding: 7px 12px; } .m-card .bars, .m-card > div:not(.bars) { display: none; }
}
@media (max-width: 640px) and (orientation: portrait) {
  .screen { grid-template-rows: auto auto auto 1fr auto; }
  .m-card { grid-column: 1; }
  .m-evs { grid-column: 1; grid-row: 3; justify-self: end; }
  .m-side { grid-row: 4; }
  .screen { grid-template-columns: minmax(0, 1fr); }
  .m-card .bars { display: none; }   /* 세로 휴대폰: 능력치 막대는 차고에서 → 전시장 카트가 잘 보이게 */
}
.ev-ring { position: relative; width: min(330px, 84vw); aspect-ratio: 1; margin: 4px auto 8px; }
.ev-ring .ev-k { position: absolute; width: 31%; transform: translate(-50%, -50%); border: 3px solid transparent; border-radius: 18px; background: #f4f1fb; padding: 2px 2px 4px; display: grid; justify-items: center; gap: 0; cursor: pointer; font: inherit; color: #2f3550; }
.ev-ring .ev-k img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; }
.ev-ring .ev-k b { font-size: 12px; font-weight: 900; }
.ev-ring .ev-k em { font-style: normal; font-size: 10px; font-weight: 800; color: #8b7cf6; }
.ev-ring .ev-k.sel { border-color: #ff6b6b; background: #fff; box-shadow: 0 4px 14px rgba(255,107,107,.35); }
.ev-ring .ev-k.cur { border-color: #8b7cf6; }
.ev-ring .ev-k.done::after { content: '✓'; position: absolute; top: -8px; right: -6px; width: 22px; height: 22px; border-radius: 50%; background: #2fae6a; color: #fff; font-weight: 900; display: grid; place-items: center; font-size: 13px; }
.ev-ring .ev-logo { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: grid; justify-items: center; line-height: .95; font-weight: 900; letter-spacing: -1.5px; pointer-events: none; }
.ev-ring .ev-logo .l1 { font-size: 34px; color: #ffd23f; -webkit-text-stroke: 1.5px #2a2f55; paint-order: stroke fill; transform: rotate(-6deg); }
.ev-ring .ev-logo .l2 { font-size: 22px; color: #fff; -webkit-text-stroke: 1.5px #2a2f55; paint-order: stroke fill; }
.ev-steps { display: flex; gap: 4px; justify-content: center; flex-wrap: wrap; margin: 6px 0; }
.ev-steps span { font-size: 12px; font-weight: 900; border-radius: 99px; padding: 4px 9px; background: #eceaf5; color: #9a98b5; }
.ev-steps span.done { background: #d8f5e3; color: #2fae6a; }
.ev-steps span.now { background: #8b7cf6; color: #fff; }
.ev-need { display: grid; gap: 6px; margin: 8px 0; }
.ev-need div { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; font-size: 13px; font-weight: 700; }
.ev-need .bar { grid-column: 1 / -1; }
.ev-need .ok { color: #2fae6a; }
.ev-rears { display: grid; gap: 6px; margin: 6px 0; }
.ev-rears button { text-align: left; border: 2px solid #eceaf5; border-radius: 14px; background: #fff; padding: 8px 10px; font-size: 13px; color: #2f3550; }
.ev-rears button.on { border-color: #8b7cf6; background: #f4f1fb; }
.ev-rears button b { display: block; font-size: 14px; }
.ev-info { text-align: center; font-size: 13px; color: #5a607c; margin: 2px 0 6px; }
.ev-info b { font-size: 17px; color: #2f3550; }
.g-item img.kshot { width: 64px; height: 48px; object-fit: contain; }

/* ---------- 뽑기 ---------- */
.rar { display: inline-block; font-size: 11px; font-weight: 900; color: #fff; background: var(--rc, #8a94a8); border-radius: 99px; padding: 2px 8px; }
.g-item[style*="--rc"] { border-color: var(--rc); }
.g-item[style*="--rc"].lock .kshot { filter: grayscale(.8) brightness(1.1) opacity(.55); }
.g-gacha { width: 100%; margin: 0 0 10px; }
.res-tk { display: inline-block; margin-left: 8px; color: #e0567a; }
.gc-top { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: center; background: #f4f1fb; border-radius: 16px; padding: 10px 14px; margin: 4px 0 6px; }
.gc-tk { font-size: 18px; font-weight: 900; white-space: nowrap; } .gc-tk b { font-size: 26px; color: #e0567a; }
.gc-pity { font-size: 13px; font-weight: 700; color: #5a607c; } .gc-pity b { color: #b04dff; }
.gc-prob td { padding: 5px 6px; font-size: 13px; } .gc-prob td:nth-child(2) b { font-size: 16px; color: var(--rc); }
.gc-coll { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.gc-c { border: 3px solid var(--rc); border-radius: 14px; background: #fff; padding: 2px 4px 6px; display: grid; justify-items: center; text-align: center; }
.gc-c img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; filter: grayscale(1) brightness(.2) opacity(.35); }
.gc-c.own img { filter: none; }
.gc-c b { font-size: 12px; } .gc-c em { font-style: normal; font-size: 10px; font-weight: 800; color: var(--rc); }
/* 카드 뒤집기 연출 */
.gc-stage { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; padding: 10px 0; perspective: 900px; cursor: pointer; }
.gc-card { width: min(220px, 62vw); aspect-ratio: 3 / 4; position: relative; animation: gcIn .35s var(--d, 0s) both; }
.gc-stage.ten .gc-card { width: min(108px, 28vw); }
.gc-in { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .6s cubic-bezier(.3, 1.4, .5, 1); transition-delay: var(--d, 0s); }
.gc-stage:not(.flip) .gc-in { animation: gcShake .5s infinite; }
.gc-back, .gc-front { position: absolute; inset: 0; border-radius: 16px; backface-visibility: hidden; -webkit-backface-visibility: hidden; display: grid; place-items: center; }
.gc-back { background: repeating-linear-gradient(45deg, #2a2f55 0 12px, #3a3f75 12px 24px); border: 4px solid #ffd23f; box-shadow: 0 8px 20px rgba(42,47,85,.35); transition: box-shadow .4s, border-color .4s; }
.gc-back span { font-size: 64px; font-weight: 900; color: #ffd23f; -webkit-text-stroke: 2px #2a2f55; }
.gc-stage.ten .gc-back span { font-size: 34px; }
.gc-stage.glow .gc-back { border-color: var(--rc); box-shadow: 0 0 0 4px var(--rc), 0 0 30px 8px var(--rc); }
.gc-front { transform: rotateY(180deg); background: radial-gradient(circle at 50% 35%, #fff, #f4f1fb 70%); border: 4px solid var(--rc); box-shadow: 0 0 24px 4px var(--rc); grid-template-rows: auto auto auto auto; align-content: center; gap: 4px; padding: 8px; text-align: center; }
.gc-front img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; }
.gc-front b { font-size: 16px; } .gc-front small { font-size: 12px; color: #7a809c; font-weight: 700; }
.gc-stage.ten .gc-front b { font-size: 11px; } .gc-stage.ten .gc-front small { font-size: 9px; } .gc-stage.ten .gc-front .rar { font-size: 9px; padding: 1px 5px; }
.gc-new { position: absolute; top: -10px; right: -8px; background: #ff5f6b; color: #fff; font-style: normal; font-weight: 900; font-size: 12px; border-radius: 99px; padding: 3px 8px; transform: rotate(8deg); }
.gc-stage.flip .gc-in { transform: rotateY(180deg); }
.gc-after { visibility: hidden; } .gc-stage.done ~ .gc-after { visibility: visible; }
@keyframes gcShake { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-3deg) scale(1.02); } 75% { transform: rotate(3deg) scale(1.02); } }
@keyframes gcIn { from { transform: translateY(30px) scale(.8); opacity: 0; } to { transform: none; opacity: 1; } }
@media (max-height: 430px) {
  .gc-card { width: 168px; }
  .gc-stage { padding: 4px 0; gap: 8px; }
  .gc-stage.ten .gc-card { width: 84px; aspect-ratio: 4 / 5; }
  .gc-stage.ten .gc-front { padding: 4px; gap: 1px; } .gc-stage.ten .gc-front small { display: none; }
  .gc-new { font-size: 10px; padding: 2px 6px; }
}

/* v5 트랙 고르기: 테마 탭 + 미니맵 카드 */
.g-tabs.tgroups button { position: relative; padding: 6px 10px; }
@media (max-width: 600px), (max-height: 500px) { .g-tabs.tgroups { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; padding-bottom: 4px; scrollbar-width: thin; -webkit-overflow-scrolling: touch; } .g-tabs.tgroups button { flex: 0 0 auto; } }
.g-tabs .dotnew { position: absolute; top: 3px; right: 4px; width: 7px; height: 7px; border-radius: 50%; background: #ff4f5e; }
.trk-rnd { aspect-ratio: 160/110; display: grid; place-items: center; font-size: 44px; border-radius: 10px; background: #f4f1fb; }
.trk em { letter-spacing: .5px; }
.seg button .dots { display: block; font-size: 9px; color: #e0567a; letter-spacing: 1px; font-weight: 900; }
.seg button.on .dots { color: #ffb3c0; }
.exg.exfloat { position: fixed; z-index: 6; pointer-events: auto; }
.exg.exfloat b { font-size: 17px; }
#hud.podium .exg.exfloat { display: none; }