:root {
  --ink: #06283d;
  --sea: #0f6f7c;
  --sea2: #19c3c9;
  --sun: #ffc832;
  --red: #e5372b;
  --card: rgba(6, 40, 61, .82);
  --font: "Pretendard", "Noto Sans KR", "Malgun Gothic", "Apple SD Gothic Neo", system-ui, sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: #041a2b; color: #fff; font-family: var(--font); overflow: hidden; overscroll-behavior: none; }
body { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: none; }
#app { height: var(--app-h, 100dvh); display: flex; align-items: center; justify-content: center;
  background: radial-gradient(120% 90% at 50% 0%, #0d5c7e 0%, #06304a 55%, #031524 100%); }
#game { position: relative; height: var(--app-h, 100dvh); width: min(100vw, calc(var(--app-h, 100dvh) * 0.5625)); max-width: 100vw; overflow: hidden; background: #6ec0ef; box-shadow: 0 0 60px rgba(0,0,0,.5); }
@media (min-aspect-ratio: 3/5) { #game { width: min(100vw, calc(var(--app-h, 100dvh) * 0.5625)); } }
canvas#view { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hidden { display: none !important; }

/* ───── HUD ───── */
#hud { position: absolute; inset: 0; pointer-events: none; padding: calc(env(safe-area-inset-top) + 10px) 12px 0; }
.hud-top { display: flex; gap: 8px; align-items: stretch; }
.chip { background: var(--card); border-radius: 12px; padding: 5px 11px; display: flex; flex-direction: column; justify-content: center; min-width: 58px; backdrop-filter: blur(4px); box-shadow: 0 2px 8px rgba(0,0,0,.25); }
.chip small { font-size: 10px; opacity: .75; letter-spacing: .04em; line-height: 1.1; }
.chip b { font-size: 20px; line-height: 1.15; font-variant-numeric: tabular-nums; }
.chip.lvl b { color: var(--sun); }
.chip.score { flex: 1; }
.chip.best b { font-size: 15px; color: #bfeff7; }
.hud-btns { display: flex; flex-direction: column; gap: 5px; pointer-events: auto; }
.icon-btn { width: 34px; height: 24px; border: 0; border-radius: 9px; background: var(--card); color: #fff; font-size: 12px; cursor: pointer; padding: 0; }
.icon-btn:active { transform: scale(.94); }

.progress { margin-top: 8px; }
.ptrack { position: relative; height: 12px; border-radius: 9px; background: rgba(6,40,61,.7); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.25); }
#p-water { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 9px; background: linear-gradient(90deg, #146f9c, #2aa6cf); }
#p-car { position: absolute; top: -9px; left: 0; font-size: 20px; transform: translateX(-50%); filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); }
.p-dest { position: absolute; right: -6px; top: -11px; font-size: 20px; }
.danger { margin-top: 12px; display: flex; align-items: center; gap: 7px; font-size: 11px; }
.danger .dl { opacity: .95; text-shadow: 0 1px 3px rgba(0,0,0,.6); font-weight: 700; }
.dbar { flex: 1; height: 9px; border-radius: 6px; background: rgba(6,40,61,.7); overflow: hidden; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.25); }
#danger-fill { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #3ecf8e, #f5c832); transition: background .2s; }
.danger.warn #danger-fill { background: linear-gradient(90deg, #f5c832, #ff8a3a); }
.danger.crit #danger-fill { background: linear-gradient(90deg, #ff6a3a, #ff2d2d); }
.danger.crit { animation: pulse .5s infinite alternate; }
.danger em { font-style: normal; font-weight: 800; min-width: 38px; text-align: right; font-variant-numeric: tabular-nums; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
@keyframes pulse { to { transform: scale(1.03); filter: brightness(1.25); } }

.stage-name { position: absolute; top: calc(env(safe-area-inset-top) + 142px); left: 0; right: 0; text-align: center; font-size: 13px; font-weight: 700; text-shadow: 0 1px 4px rgba(0,0,0,.7); opacity: 0; transition: opacity .6s; }
.stage-name.show { opacity: .95; }
#toasts { position: absolute; left: 0; right: 0; top: max(calc(env(safe-area-inset-top) + 152px), 19%); pointer-events: none; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.toast { font-weight: 900; font-size: 22px; padding: 4px 14px; border-radius: 999px; background: rgba(6,40,61,.72); text-shadow: 0 2px 4px rgba(0,0,0,.5); animation: toast 1.2s ease-out forwards; white-space: nowrap; }
.toast.good { color: #ffe27a; } .toast.bad { color: #ff8f80; } .toast.warn { color: #ff5a4a; font-size: 24px; background: rgba(60,6,6,.7); } .toast.info { color: #bfeff7; }
@keyframes toast { 0% { transform: translateY(14px) scale(.8); opacity: 0; } 15% { transform: translateY(0) scale(1.08); opacity: 1; } 70% { opacity: 1; } 100% { transform: translateY(-34px); opacity: 0; } }
#countdown { position: absolute; left: 0; right: 0; top: 43%; z-index: 20; pointer-events: none; text-align: center; font-size: 110px; font-weight: 900; color: #fff; text-shadow: 0 6px 24px rgba(0,0,0,.55), 0 0 0 #000; }
#countdown.pop { animation: cd .9s ease-out; }
@keyframes cd { 0% { transform: scale(1.8); opacity: 0; } 25% { transform: scale(1); opacity: 1; } 100% { transform: scale(.9); opacity: .3; } }
.tutorial { position: absolute; left: 14px; right: 14px; top: 27%; background: rgba(6,40,61,.82); border-radius: 18px; padding: 14px 16px; text-align: center; box-shadow: 0 6px 24px rgba(0,0,0,.35); animation: fadein .3s; }
.tut-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 6px 0; font-size: 14px; text-align: left; }
.tut-row b { color: var(--sun); font-size: 17px; white-space: nowrap; }
.tut-row span { opacity: .95; text-align: right; }
.tut-note { margin-top: 6px; font-size: 12px; opacity: .8; }
@keyframes fadein { from { opacity: 0; transform: translateY(8px); } }

/* ───── ACTION 버튼 ───── */
#action { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(env(safe-area-inset-bottom) + 14px);
  width: min(88%, 460px); height: clamp(96px, 15.5dvh, 150px); border: 0; border-radius: 999px; cursor: pointer; touch-action: none; overflow: hidden;
  background: linear-gradient(180deg, #ffd95a 0%, #ffb01f 55%, #f28c00 100%); color: #5a2c00;
  box-shadow: 0 8px 0 #b86a00, 0 14px 26px rgba(0,0,0,.4), inset 0 3px 0 rgba(255,255,255,.55);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-family: var(--font); transition: transform .05s, box-shadow .05s; }
#action.down { transform: translateX(-50%) translateY(6px); box-shadow: 0 2px 0 #b86a00, 0 6px 14px rgba(0,0,0,.4), inset 0 3px 0 rgba(255,255,255,.4); filter: brightness(1.06); }
#action .a-main { font-size: clamp(30px, 6.4dvh, 46px); font-weight: 900; letter-spacing: .1em; position: relative; z-index: 1; }
#action .a-sub { font-size: 12px; font-weight: 700; opacity: .75; position: relative; z-index: 1; }
#action .charge { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: linear-gradient(90deg, rgba(255,255,255,.0), rgba(255,255,255,.55)); z-index: 0; }
#action.jumping .charge { background: linear-gradient(90deg, rgba(25,195,201,.55), rgba(25,195,201,.9)); }

/* ───── 공통 화면 ───── */
.screen { position: absolute; inset: 0; z-index: 10; display: flex; flex-direction: column; }
.btn { display: block; width: 100%; border: 0; border-radius: 16px; padding: 14px 16px; font-size: 18px; font-weight: 800; color: #fff; background: rgba(255,255,255,.18); backdrop-filter: blur(6px); cursor: pointer; font-family: var(--font); text-align: center; text-decoration: none; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.35); transition: transform .08s; }
.btn:active { transform: scale(.97); }
.btn.primary { background: linear-gradient(180deg, #ffd95a, #ffab1a); color: #5a2c00; box-shadow: 0 5px 0 #b86a00, 0 10px 20px rgba(0,0,0,.3); }
.btn.big { font-size: 24px; padding: 18px; }
.btn.ghost { background: transparent; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.4); font-size: 15px; }
.btn.teal { background: linear-gradient(180deg, #2fd6d9, #0f9aa8); box-shadow: 0 5px 0 #0a6b76, 0 10px 20px rgba(0,0,0,.3); }

.title { justify-content: space-between; padding: calc(env(safe-area-inset-top) + 22px) 22px calc(env(safe-area-inset-bottom) + 22px); background: linear-gradient(180deg, rgba(4,40,70,.55) 0%, rgba(4,40,70,0) 36%, rgba(4,40,70,0) 52%, rgba(4,30,54,.78) 100%); }
.brand { font-weight: 900; letter-spacing: .18em; font-size: 15px; text-shadow: 0 2px 6px rgba(0,0,0,.5); }
.brand span { letter-spacing: 0; margin-left: 6px; color: var(--sun); }
.title-main { text-align: center; margin-top: -8vh; }
.title h1 { margin: 0; font-size: clamp(54px, 15.5dvh * .55, 84px); line-height: 1.02; font-weight: 900; color: #fff; letter-spacing: -.02em;
  text-shadow: 0 4px 0 #0f6f7c, 0 8px 0 #0a4a54, 0 14px 26px rgba(0,0,0,.45); }
.title .sub { margin: 16px 0 0; font-size: 20px; font-weight: 800; color: #ffe27a; text-shadow: 0 2px 8px rgba(0,0,0,.6); }
.title-bottom { display: flex; flex-direction: column; gap: 10px; }
.howto { margin: 4px 0 0; text-align: center; font-size: 12.5px; line-height: 1.6; opacity: .92; text-shadow: 0 1px 4px rgba(0,0,0,.7); }
.howto small { opacity: .8; }

.levels { background: linear-gradient(180deg, #08324b, #041a2b); padding: calc(env(safe-area-inset-top) + 14px) 16px 16px; overflow-y: auto; touch-action: pan-y; }
.levels header { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.levels h2 { margin: 0; font-size: 22px; }
.back { background: rgba(255,255,255,.14); color: #fff; border: 0; border-radius: 10px; padding: 8px 12px; font-size: 14px; font-weight: 700; cursor: pointer; font-family: var(--font); }
#level-list { display: flex; flex-direction: column; gap: 10px; }
.lv { display: flex; gap: 12px; align-items: center; text-align: left; border: 0; border-radius: 16px; padding: 12px 14px; color: #fff; font-family: var(--font); cursor: pointer; background: linear-gradient(90deg, rgba(25,195,201,.22), rgba(255,255,255,.08)); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.22); }
.lv .n { flex: none; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; font-size: 24px; font-weight: 900; color: #5a2c00; background: linear-gradient(180deg, #ffd95a, #ffab1a); }
.lv .t { flex: 1; min-width: 0; }
.lv .t b { display: block; font-size: 17px; }
.lv .t small { display: block; opacity: .8; font-size: 12px; line-height: 1.45; margin-top: 2px; }
.lv .r { font-size: 12px; text-align: right; opacity: .9; white-space: nowrap; }
.lv.locked { opacity: .45; filter: grayscale(.6); cursor: not-allowed; }
.lv.locked .n { background: #6b7a86; color: #fff; }

.pause { background: rgba(2,14,32,.62); align-items: center; justify-content: center; }
.panel { width: min(80%, 320px); background: var(--card); border-radius: 22px; padding: 22px; display: flex; flex-direction: column; gap: 10px; text-align: center; }
.panel h2 { margin: 0 0 6px; }

.result { justify-content: flex-start; align-items: center; padding: calc(env(safe-area-inset-top) + 14px) 18px calc(env(safe-area-inset-bottom) + 40px); background: rgba(2,14,32,.55); overflow-y: auto; touch-action: pan-y; }
.result .card { margin: auto 0; flex: none; width: 100%; max-width: 420px; background: linear-gradient(180deg, rgba(8,58,86,.96), rgba(4,30,54,.96)); border-radius: 26px; padding: 22px 18px 18px; box-shadow: 0 16px 50px rgba(0,0,0,.5), inset 0 0 0 1.5px rgba(255,255,255,.16); text-align: center; animation: cardin .5s cubic-bezier(.2,.9,.3,1.2); }
@keyframes cardin { from { transform: translateY(40px) scale(.94); opacity: 0; } }
.result .kicker { font-size: 13px; letter-spacing: .12em; opacity: .75; font-weight: 800; }
.result h2 { margin: 4px 0 4px; font-size: 38px; font-weight: 900; }
.result.win h2 { color: #ffe27a; text-shadow: 0 3px 0 #b86a00; }
.result.lose h2 { color: #ff8f80; text-shadow: 0 3px 0 #7a1c14; font-size: 32px; }
.result .msg { margin: 0 0 12px; opacity: .92; font-size: 15px; }
.record { margin: 4px auto 12px; display: inline-block; padding: 8px 18px; border-radius: 999px; font-weight: 900; font-size: 20px; color: #5a2c00; background: linear-gradient(180deg, #fff3a0, #ffbf2a); animation: recpulse .9s infinite alternate; box-shadow: 0 0 22px rgba(255,200,50,.7); }
@keyframes recpulse { to { transform: scale(1.07) rotate(-1.5deg); } }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 6px 0 12px; }
.stat { background: rgba(255,255,255,.09); border-radius: 14px; padding: 9px 6px; }
.stat small { display: block; font-size: 11px; opacity: .75; }
.stat b { font-size: 22px; font-variant-numeric: tabular-nums; }
.stat.hl b { color: #ffe27a; }
.missions { text-align: left; margin: 0 0 12px; padding: 10px 12px; border-radius: 14px; background: rgba(255,255,255,.07); }
.missions h3 { margin: 0 0 6px; font-size: 13px; opacity: .8; letter-spacing: .06em; }
.mi { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; padding: 3px 0; }
.mi .ck { flex: none; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; background: rgba(255,255,255,.15); }
.mi.done .ck { background: #2fd48a; color: #04321f; font-weight: 900; }
.mi.done span { color: #d6ffea; }
.mi .gift { font-size: 11px; color: #ffe27a; margin-left: 4px; }
.reward-note { font-size: 12px; color: #ffe27a; margin: -6px 0 12px; }
.result .btns { display: flex; flex-direction: column; gap: 9px; }
.result .row { display: flex; gap: 9px; }

/* ───── 에너지(차량 상태) ───── */
.danger.energy { margin-top: 6px; }
#energy-fill { display: block; height: 100%; width: 100%; transition: width .25s; background: linear-gradient(90deg, #3ecf8e, #9be24a); }
.danger.energy.mid #energy-fill { background: linear-gradient(90deg, #f5c832, #ffa23a); }
.danger.energy.low #energy-fill { background: linear-gradient(90deg, #ff6a3a, #ff2d2d); }
.danger.energy.low { animation: pulse .45s infinite alternate; }
.row2 { display: flex; gap: 10px; }
.row2 .btn { flex: 1; font-size: 16px; padding: 14px 8px; }

/* ───── 자동차 선택 ───── */
.garage { background: linear-gradient(180deg, #08324b, #041a2b); padding: calc(env(safe-area-inset-top) + 14px) 14px 16px; overflow-y: auto; touch-action: pan-y; }
.garage header { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.garage h2 { margin: 0; font-size: 22px; }
.gr-hint { margin: 0 2px 10px; font-size: 12.5px; opacity: .8; }
#car-list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding-bottom: 12px; }
.car { position: relative; border: 0; border-radius: 16px; padding: 8px 8px 10px; color: #fff; font-family: var(--font); cursor: pointer; text-align: left;
  background: linear-gradient(180deg, rgba(25,195,201,.16), rgba(255,255,255,.06)); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.18); }
.car.sel { background: linear-gradient(180deg, rgba(255,200,50,.28), rgba(255,255,255,.08)); box-shadow: inset 0 0 0 2.5px #ffc832, 0 0 18px rgba(255,200,50,.35); }
.car canvas { display: block; width: 100%; height: auto; border-radius: 10px; background: radial-gradient(90% 70% at 50% 100%, rgba(255,255,255,.14), rgba(0,0,0,.18)); }
.car b { display: block; font-size: 15px; margin-top: 6px; }
.car .tg { display: block; font-size: 11px; opacity: .75; margin-bottom: 5px; }
.car .st { display: grid; grid-template-columns: 42px 1fr; gap: 3px 6px; align-items: center; font-size: 10.5px; opacity: .95; }
.car .bar { height: 6px; border-radius: 4px; background: rgba(255,255,255,.14); overflow: hidden; }
.car .bar i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, #19c3c9, #7ee8a8); }
.car .bar.sp i { background: linear-gradient(90deg, #ffb83a, #ff6a3a); }
.car .bar.du i { background: linear-gradient(90deg, #5aa8ff, #8bd0ff); }
.car .chk { position: absolute; top: 8px; right: 8px; background: #ffc832; color: #5a2c00; font-size: 11px; font-weight: 900; padding: 2px 8px; border-radius: 999px; }
.result .reason { font-size: 13px; opacity: .8; margin: -6px 0 10px; }

/* 낮은 화면: 점수/경고 글씨를 작게 (하늘 영역이 짧아 먼 장애물을 가리지 않게) */
@media (max-height: 720px) {
  .toast { font-size: 17px; padding: 3px 11px; }
  .toast.warn { font-size: 18px; }
  #toasts { gap: 4px; }
}

/* 조작 안내: 게임이 시작되면 빠르게 흐려지며 사라진다 */
.tutorial.out { opacity: 0; transform: translateY(-6px); transition: opacity .22s ease, transform .22s ease; }

/* ───── 로켓 연료 게이지 (스페이스 엑스, LEVEL 10) ───── */
.fuel { position: absolute; right: 9px; top: 36%; width: 36px; display: flex; flex-direction: column; align-items: center; gap: 4px; pointer-events: none; text-shadow: 0 1px 3px rgba(0,0,0,.7); }
.fuel .fi { font-size: 20px; filter: drop-shadow(0 1px 2px rgba(0,0,0,.6)); }
.fuel .fbar { width: 18px; height: 128px; border-radius: 9px; background: rgba(6,40,61,.72); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.3); display: flex; align-items: flex-end; overflow: hidden; }
#fuel-fill { display: block; width: 100%; height: 0; background: linear-gradient(0deg, #ff5a30, #ffb03a 60%, #ffe27a); transition: height .1s linear; }
.fuel em { font-style: normal; font-weight: 900; font-size: 12px; font-variant-numeric: tabular-nums; }
.fuel.ready .fbar { box-shadow: 0 0 12px #ffb03a, inset 0 0 0 1.5px #ffd54a; }
.fuel.ready .fi { animation: pulse .5s infinite alternate; }
.fuel.empty #fuel-fill { background: #79808a; }
.fuel.burn .fbar { box-shadow: 0 0 16px #ff7a2a, inset 0 0 0 1.5px #ff9a4a; }
.car .rk { display: inline-block; margin-top: 5px; font-size: 10.5px; font-weight: 800; color: #ffd54a; background: rgba(255,120,40,.22); padding: 2px 8px; border-radius: 999px; }

.fuel .ft { font-size: 11px; font-weight: 900; letter-spacing: .04em; color: #ffe27a; margin-top: -2px; }
.fuel { width: 40px; right: 6px; }
.fuel .fbar { width: 20px; height: 140px; }
.fuel em { font-size: 12px; }
.fuel.locked { opacity: .6; filter: grayscale(.7); }

/* 잠금 상태(LEVEL 10 미만): 왜 잠겼는지 글로 알려준다 */
.fuel .fnote { display: none; font-size: 10px; font-weight: 900; line-height: 1.25; text-align: center; color: #ffe27a; white-space: nowrap; }
.fuel.locked .fnote { display: block; }
.fuel.locked { opacity: .85; filter: none; }
.fuel.locked .fbar { opacity: .5; }

.car { touch-action: manipulation; }
.gr-hint b { color: #ffe27a; }

/* 자동차 선택: 물저항 막대 · 잠금 · 시작 버튼 */
.car .bar.wr i { background: linear-gradient(90deg, #4fc3f7, #b3ecff); }
.car.locked { opacity: .55; filter: grayscale(.5); }
.car .lk { position: absolute; top: 8px; left: 8px; background: rgba(6,40,61,.85); color: #ffe27a; font-size: 11px; font-weight: 900; padding: 2px 8px; border-radius: 999px; }
.gr-bar { position: sticky; bottom: -16px; margin: 0 -14px -16px; padding: 22px 14px calc(env(safe-area-inset-bottom) + 14px); background: linear-gradient(180deg, rgba(4,26,43,0), #041a2b 38%); }

/* ───── 쿠폰 ───── */
.btn.gift { background: linear-gradient(180deg, #ff9a7a, #ff5a4a); color: #fff; box-shadow: 0 5px 0 #b3322a, 0 10px 20px rgba(0,0,0,.3); font-size: 16px; padding: 12px; }
.cp-tiers { display: flex; flex-direction: column; gap: 6px; margin: 0 0 12px; }
.cp-tier { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 12px; background: rgba(255,255,255,.08); font-size: 13.5px; }
.cp-tier b { color: #ffe27a; min-width: 62px; } .cp-tier span { flex: 1; opacity: .95; } .cp-tier em { font-style: normal; font-weight: 800; color: #bfeff7; white-space: nowrap; }
.cp-tier.got { background: rgba(47,212,138,.18); }
#coupon-list { display: flex; flex-direction: column; gap: 10px; padding-bottom: 16px; }
.cp-card { border-radius: 16px; padding: 14px; background: linear-gradient(135deg, #fff6d6, #ffe7a3); color: #4a2a00; position: relative; box-shadow: 0 4px 14px rgba(0,0,0,.3); }
.cp-card::before, .cp-card::after { content: ''; position: absolute; top: 50%; width: 16px; height: 16px; border-radius: 50%; background: #06283d; transform: translateY(-50%); }
.cp-card::before { left: -8px; } .cp-card::after { right: -8px; }
.cp-card .nm { font-weight: 900; font-size: 16px; } .cp-card .vl { font-weight: 900; font-size: 22px; color: #c2410c; margin: 2px 0 6px; }
.cp-card .cd { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border-radius: 10px; background: rgba(255,255,255,.7); border: 2px dashed #d99a2b; }
.cp-card .cd code { font-size: 19px; font-weight: 900; letter-spacing: .06em; font-family: ui-monospace, Consolas, monospace; }
.cp-card .cd button { border: 0; border-radius: 8px; padding: 7px 12px; font-weight: 800; font-size: 13px; background: #0f6f7c; color: #fff; cursor: pointer; font-family: var(--font); }
.cp-card .mt { margin-top: 6px; font-size: 12px; opacity: .8; }
.cp-card.used, .cp-card.expired, .cp-card.void { filter: grayscale(.9); opacity: .6; }
.cp-card .test-badge { display: inline-block; background: #d92d20; color: #fff; font-size: 11px; font-weight: 900; letter-spacing: .01em; padding: 4px 9px; border-radius: 999px; box-shadow: 0 2px 6px rgba(0,0,0,.25); white-space: nowrap; margin-bottom: 6px; }
.cp-card .test-note { margin-top: 8px; padding: 8px 10px; border-radius: 10px; background: rgba(217,45,32,.12); border: 1px solid rgba(217,45,32,.4); color: #9a1c10; font-size: 12.5px; font-weight: 700; line-height: 1.4; }
.cp-empty { text-align: center; opacity: .75; padding: 26px 8px; font-size: 14px; }
/* 결과 화면의 쿠폰 상자 */
.cp-box { margin: 0 0 12px; }
.cp-box .wait { padding: 14px; border-radius: 14px; background: rgba(255,255,255,.08); font-size: 14px; }
.cp-box .err { padding: 12px; border-radius: 14px; background: rgba(255,90,74,.18); font-size: 13.5px; line-height: 1.5; }
.cp-box .err button { margin-top: 8px; border: 0; border-radius: 10px; padding: 8px 14px; font-weight: 800; background: #ffd95a; color: #5a2c00; cursor: pointer; font-family: var(--font); }
.cp-box .head { font-weight: 900; color: #ffe27a; margin: 0 0 6px; font-size: 15px; animation: recpulse .9s infinite alternate; text-align: center; }
.lv .cp { display: inline-block; margin-top: 3px; font-size: 11px; font-weight: 800; color: #5a2c00; background: linear-gradient(180deg, #ffe27a, #ffbf2a); padding: 1px 8px; border-radius: 999px; }
.result .card { margin: auto; }   /* 카드가 화면보다 길어져도(쿠폰 상자) 위가 잘리지 않고 스크롤된다 */

/* ───── SUCCESS → 선물상자 → 폭죽 ───── */
.gift-ov { position: absolute; inset: 0; z-index: 30; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 16px; overflow: hidden;
  background: radial-gradient(90% 70% at 50% 45%, rgba(8,58,86,.72), rgba(2,14,32,.9)); animation: fadein .3s; }
#gift-fw { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
.gift-success { font-size: clamp(54px, 15vw, 84px); font-weight: 900; letter-spacing: .04em; color: #ffe27a; text-shadow: 0 5px 0 #b86a00, 0 10px 26px rgba(0,0,0,.55), 0 0 40px rgba(255,200,50,.6);
  animation: successpop .7s cubic-bezier(.2,1.6,.4,1) both; z-index: 3; }
.gift-sub { font-size: 18px; font-weight: 800; letter-spacing: .14em; opacity: .9; z-index: 3; margin-top: -4px; }
@keyframes successpop { 0% { transform: scale(.2) rotate(-8deg); opacity: 0; } 70% { transform: scale(1.12) rotate(2deg); opacity: 1; } 100% { transform: scale(1) rotate(0); } }
.gift-ov.s-box .gift-success { transform: scale(.55) translateY(-6vh); transition: transform .5s; animation: none; }
.gift-ov.s-box .gift-sub { opacity: .75; }
.gift-hint { min-height: 26px; font-size: 16px; font-weight: 800; color: #bfeff7; z-index: 3; text-shadow: 0 2px 6px rgba(0,0,0,.6); }
.gift-box { width: min(46vw, 220px); z-index: 3; cursor: pointer; filter: drop-shadow(0 12px 22px rgba(0,0,0,.5)); }
.gift-box svg { display: block; width: 100%; height: auto; overflow: visible; }
.gift-box.drop { animation: giftdrop .7s cubic-bezier(.3,1.5,.5,1) both, giftwobble 1s ease-in-out .9s infinite; }
@keyframes giftdrop { 0% { transform: translateY(-70vh) scale(.6); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes giftwobble { 0%, 100% { transform: rotate(0) scale(1); } 20% { transform: rotate(-7deg) scale(1.05); } 40% { transform: rotate(7deg) scale(1.08); } 60% { transform: rotate(-5deg) scale(1.1); } 80% { transform: rotate(5deg) scale(1.06); } }
.gift-box.open { animation: giftburst .5s ease-out forwards; }
.gift-box.open #gift-lid { animation: liddfly .6s ease-out forwards; }
@keyframes giftburst { 0% { transform: scale(1.1); filter: brightness(1); } 40% { transform: scale(1.35); filter: brightness(2.2); } 100% { transform: scale(1.5); opacity: 0; filter: brightness(3); } }
@keyframes liddfly { to { transform: translate(30px, -130px) rotate(28deg); opacity: 0; } }
.gift-reveal { width: min(92%, 420px); z-index: 3; text-align: center; animation: revealup .6s cubic-bezier(.2,1.3,.4,1) both; }
@keyframes revealup { from { transform: translateY(40px) scale(.7); opacity: 0; } to { transform: none; opacity: 1; } }
.gift-title { font-size: 30px; font-weight: 900; color: #ffe27a; margin-bottom: 10px; text-shadow: 0 3px 0 #b86a00; }
.gift-note { margin-top: 10px; font-size: 13px; opacity: .9; line-height: 1.5; }
.gift-btns { width: min(92%, 420px); display: flex; flex-direction: column; gap: 9px; margin-top: 8px; z-index: 3; }
/* 쿠폰함 상세 */
.cp-card.tap { cursor: pointer; } .cp-card.tap:active { transform: scale(.99); }
.cp-detail { background: rgba(2,14,32,.82); align-items: center; justify-content: center; padding: 18px; overflow-y: auto; touch-action: pan-y; z-index: 25; }
.cp-detail-in { width: 100%; max-width: 420px; margin: auto; }
.cp-guide { margin: 12px 0; padding: 12px 14px; border-radius: 14px; background: rgba(15,111,124,.55); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.3); font-size: 13.5px; line-height: 1.55; display: flex; flex-direction: column; gap: 3px; }
.cp-guide b { font-size: 16px; color: #ffe27a; } .cp-guide em { font-style: normal; font-weight: 900; color: #ffe27a; }
.cp-detail .btns { display: flex; flex-direction: column; gap: 9px; }
.gift-ov [hidden] { display: none !important; }

/* 쿠폰 카드 (새 형식: 종류/코드/발급일/유효기간/상태/사용처) */
.cp-card .tp { font-size: 11px; font-weight: 800; letter-spacing: .08em; color: #a55a00; margin: 1px 0 6px; }
.cp-card .nm { font-size: 20px; }
.cp-card .ln { font-size: 13.5px; font-weight: 700; margin-top: 4px; }
.cp-card .ln.stt { font-weight: 900; color: #0a7a3e; }
.cp-card.used .ln.stt, .cp-card.expired .ln.stt { color: #7a1c14; }
.cp-card .cd { margin-top: 8px; }

/* ───── 모바일 화면 맞춤 (2026-09-22): 인앱 브라우저 하단 바에 가려지지 않도록 아래 여백 확보 + 키가 작은 화면은 촘촘하게 ───── */
.levels, .garage { padding-bottom: calc(env(safe-area-inset-bottom) + 40px); }
.cp-detail { justify-content: flex-start; padding-bottom: calc(env(safe-area-inset-bottom) + 40px); } .cp-detail-in { margin: auto; }
.gr-bar { padding-bottom: calc(env(safe-area-inset-bottom) + 34px); }
@media (max-height: 820px) {
  .result { padding-top: calc(env(safe-area-inset-top) + 8px); }
  .result .card { padding: 16px 14px 14px; border-radius: 22px; }
  .result h2 { font-size: 32px; margin: 2px 0; } .result.lose h2 { font-size: 28px; }
  .result .msg { font-size: 14px; margin-bottom: 8px; }
  .record { margin: 2px auto 8px; padding: 6px 14px; font-size: 17px; }
  .stats { gap: 6px; margin: 4px 0 8px; } .stat { padding: 6px 4px; } .stat b { font-size: 19px; }
  .missions { margin-bottom: 8px; padding: 8px 10px; } .mi { font-size: 13px; padding: 2px 0; }
  .result .btns { gap: 7px; } .result .btn { padding: 11px 12px; font-size: 16px; } .result .btn.big { font-size: 19px; padding: 12px; }
}
@media (max-height: 700px) { .result h2 { font-size: 27px; } .stat b { font-size: 17px; } .result .btn.big { font-size: 17px; padding: 10px; } }

/* ───── 제부도 도착 성공 배너 ───── */
.arrive { position: absolute; left: 0; right: 0; top: 17%; z-index: 12; text-align: center; pointer-events: none; }
.arrive-t { display: inline-block; padding: 10px 22px; border-radius: 999px; font-size: clamp(24px, 7.4vw, 40px); font-weight: 900; color: #5a2c00;
  background: linear-gradient(180deg, #fff3a0, #ffbf2a); box-shadow: 0 6px 0 #b86a00, 0 14px 30px rgba(0,0,0,.35); text-shadow: 0 2px 0 rgba(255,255,255,.6); }
.arrive-s { margin-top: 12px; font-size: clamp(15px, 4.4vw, 22px); font-weight: 900; color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,.75); }
.arrive.go .arrive-t { animation: arrivepop .7s cubic-bezier(.2,1.5,.4,1) both, arrivefloat 1.6s ease-in-out .7s infinite alternate; }
.arrive.go .arrive-s { animation: arrivefade .6s ease .6s both; }
@keyframes arrivepop { from { transform: scale(.3) rotate(-6deg); opacity: 0; } }
@keyframes arrivefloat { to { transform: translateY(-6px) rotate(.8deg); } }
@keyframes arrivefade { from { opacity: 0; transform: translateY(8px); } }