/* ===== 좀비 디펜스 — 스타일 ===== */

:root{
  --bg:#12151A;
  --panel:#1B2028;
  --panel2:#232A34;
  --edge:#343D4A;
  --ink:#E7ECF3;
  --dim:#8C99AA;
  --coin:#F0B429;
  --hp:#E0574C;
  --merge:#9B6DFF;
  --sans:'Pretendard','Apple SD Gothic Neo','Malgun Gothic',system-ui,-apple-system,sans-serif;
  --mono:ui-monospace,'SFMono-Regular',Consolas,monospace;
}

*{box-sizing:border-box}
html,body{min-height:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--sans);font-size:15px;line-height:1.5;
  -webkit-font-smoothing:antialiased;
  padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
  /* align-items:flex-start 가 없으면 .app 이 뷰포트 높이로 눌려서
     내부 요소가 패널 밖으로 넘쳐 겹친다 */
  display:flex;justify-content:center;align-items:flex-start;
}
.app{width:100%;max-width:420px;padding:10px 12px 20px;display:flex;flex-direction:column;gap:9px}

/* ---- HUD ---- */
.hud{
  /* 320px 폰에서도 칸이 안 넘치게 gap 을 줄였다. 버튼이 둘로 늘어나 여유가 없다. */
  display:grid;grid-template-columns:1fr 1fr 1fr auto auto;gap:6px;align-items:center;
  background:var(--panel);border:1px solid var(--edge);border-radius:12px;padding:9px 12px;
}
.stat{display:flex;flex-direction:column;line-height:1.2;min-width:0}
.stat .k{font-size:10px;letter-spacing:.08em;color:var(--dim)}
.stat .v{font-family:var(--mono);font-size:17px;font-weight:600;font-variant-numeric:tabular-nums}
.stat .v.coin{color:var(--coin)}
.stat .v.hp{color:var(--hp)}
.speed{
  font-family:var(--mono);font-size:13px;font-weight:600;color:var(--ink);white-space:nowrap;
  background:var(--panel2);border:1px solid var(--edge);border-radius:8px;padding:7px 9px;cursor:pointer;
}
.speed:active{background:var(--edge)}

/* ---- 캔버스 ---- */
.stage{
  position:relative;border:1px solid var(--edge);border-radius:12px;
  overflow:hidden;background:#0D1014;
  /* 캔버스 비율 360:600 = 0.6. 폰에서는 뷰포트 높이로 폭을 제한해야
     HUD·피버·스킬·액션 버튼까지 한 화면에 들어온다. 폭이 남아도 높이가 먼저 걸린다.
     맵이 세로로 길어진 만큼(540→600) vh 도 같이 올려서 실제 폭을 유지한다. */
  width:100%;max-width:calc(58vh * 0.6);margin-inline:auto;
}
/* 캔버스 백킹 해상도는 game.js 의 fitCanvas() 가 표시 크기에 맞춰 잡는다.
   여기서는 표시 크기만 정하고, 논리 좌표는 언제나 360×600 이다. */
canvas{display:block;width:100%;height:auto;touch-action:none}

.wavebar{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.06)}
.wavefill{height:100%;width:0%;background:var(--coin);transition:width .15s linear}

.overlay{position:absolute;inset:0;background:rgba(10,12,16,.88);display:grid;place-items:center;padding:20px}
.overlay[hidden]{display:none}
.overlay .card{text-align:center;max-width:280px}
.overlay h2{font-size:22px;margin:0 0 8px}
.overlay p{font-size:14px;color:var(--dim);margin:0 0 16px;line-height:1.6}

/* ---- 액션 ---- */
.actions{display:grid;grid-template-columns:1.15fr .5fr 1.2fr;gap:6px}
/* 버튼 안 글자가 두 줄로 깨지지 않게 */
.actions button{white-space:nowrap;padding-inline:6px}
.actions .cost{flex:none}
button.primary,button.ghost{
  font-family:inherit;font-size:13.5px;font-weight:700;border-radius:10px;padding:12px 10px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:7px;border:0;width:100%;
}
button.primary{color:#0F1216;background:var(--coin)}
button.ghost{color:var(--ink);background:var(--panel2);border:1px solid var(--edge)}
button.primary:disabled,button.ghost:disabled{background:var(--panel2);color:var(--dim);border-color:var(--edge);cursor:default}
button.primary:not(:disabled):active,button.ghost:not(:disabled):active{filter:brightness(.88)}
.cost{font-family:var(--mono);font-size:12px;font-weight:600;opacity:.75}

/* ---- 패널 ---- */
.panel{background:var(--panel);border:1px solid var(--edge);border-radius:12px;padding:12px;min-height:150px}
.hint{margin:0;font-size:13px;color:var(--dim);line-height:1.65}
.hint b{color:var(--ink)}
.hint .tag{color:var(--merge);font-weight:700}

.selhead{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.tier{font-family:var(--mono);font-size:11px;font-weight:700;padding:3px 7px;border-radius:6px;color:#0F1216}
.selhead .t{font-size:15px;font-weight:700}
.selhead .stars{margin-left:auto;font-size:12px;color:var(--coin);letter-spacing:1px}

.stats3{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:9px}
.s3{background:var(--panel2);border-radius:8px;padding:7px 8px;text-align:center}
.s3 .n{font-size:10px;color:var(--dim);letter-spacing:.05em}
.s3 .x{font-family:var(--mono);font-size:14px;font-weight:600;font-variant-numeric:tabular-nums}

.ups{display:grid;gap:5px}
.up{
  display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center;
  background:var(--panel2);border:1px solid var(--edge);border-radius:9px;
  padding:8px 11px;cursor:pointer;text-align:left;color:var(--ink);font:inherit;
}
.up:disabled{opacity:.42;cursor:default}
.up:not(:disabled):active{background:var(--edge)}
.up .lab{font-size:13px}
.up .lab small{display:block;color:var(--dim);font-size:11px;font-family:var(--mono)}
.up .price{font-family:var(--mono);font-size:13px;font-weight:600;color:var(--coin);white-space:nowrap}
.up .price.no{color:var(--dim)}
.sell{margin-top:7px;width:100%;font-family:inherit;font-size:12px;color:var(--dim);
  background:transparent;border:1px solid var(--edge);border-radius:8px;padding:8px;cursor:pointer}
.sell:active{background:var(--panel2);color:var(--ink)}

.saves{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.saves button{font-family:inherit;font-size:12px;color:var(--dim);background:transparent;
  border:1px solid var(--edge);border-radius:8px;padding:8px 4px;cursor:pointer}
.saves button:active{background:var(--panel2);color:var(--ink)}

.log{margin:0;font-size:12px;color:var(--dim);text-align:center;line-height:1.55;min-height:34px}

#btnHire b{font-weight:800}
.selhead .stars{letter-spacing:0;font-size:11px}

/* ---- 병종 선택 (5성 이상) ---- */
.forms{display:grid;grid-template-columns:repeat(2,1fr);gap:5px;margin-bottom:9px}
.form{
  font:inherit;color:var(--ink);background:var(--panel2);border:1px solid var(--edge);
  border-radius:9px;padding:8px 5px;cursor:pointer;text-align:center;display:grid;gap:2px;
}
.form b{font-size:12.5px;font-weight:700}
.form small{font-size:10px;color:var(--dim);line-height:1.3}
.form em{font-style:normal;font-family:var(--mono);font-size:10.5px;color:var(--coin)}
.form.on{border-color:var(--coin);background:rgba(240,180,41,.12)}
.form.on em{color:var(--ink)}
.form:disabled{opacity:.42;cursor:default}
.form:not(:disabled):not(.on):active{background:var(--edge)}

/* ---- 병종 선택 오버레이 (서로 다른 특수형을 합쳤을 때) ---- */
.chbtns{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.chbtn{
  font:inherit;color:var(--ink);background:var(--panel2);border:1px solid var(--edge);
  border-radius:10px;padding:14px 8px;cursor:pointer;display:grid;gap:3px;text-align:center;
}
.chbtn b{font-size:15px}
.chbtn small{font-size:11px;color:var(--dim);line-height:1.35}
.chbtn:active{background:var(--edge);border-color:var(--coin)}

/* ---- 피버 게이지 버튼 ---- */
.fever{
  display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;
  font:inherit;color:var(--dim);background:var(--panel);
  border:1px solid var(--edge);border-radius:11px;padding:9px 13px;cursor:pointer;width:100%;
}
.fvlabel{font-family:var(--mono);font-size:11.5px;font-weight:600;letter-spacing:.14em}
.fvbar{height:9px;background:#10141A;border-radius:99px;overflow:hidden}
.fvfill{display:block;height:100%;width:0%;border-radius:99px;background:var(--edge);transition:width .18s linear}
.fvpct{font-family:var(--mono);font-size:11.5px;font-weight:600;font-variant-numeric:tabular-nums;min-width:38px;text-align:right}
.fever:disabled{cursor:default}
.fever.ready{color:#0F1216;background:var(--coin);border-color:var(--coin);animation:fvpulse 1s ease-in-out infinite}
.fever.ready .fvbar{background:rgba(0,0,0,.22)}
.fever.ready .fvfill{background:#0F1216}
.fever.active{color:var(--coin);border-color:var(--coin);background:rgba(240,180,41,.12)}
.fever.active .fvfill{background:var(--coin)}
@keyframes fvpulse{0%,100%{filter:brightness(1)}50%{filter:brightness(1.18)}}
@media(prefers-reduced-motion:reduce){.fever.ready{animation:none}}

/* ---- 시작 화면 난이도 선택 ---- */
.diffs{display:grid;gap:8px}
.diff{
  font:inherit;color:var(--ink);background:var(--panel2);border:1px solid var(--edge);
  border-radius:10px;padding:13px 14px;cursor:pointer;display:grid;gap:3px;text-align:left;
}
.diff b{font-size:15px}
.diff small{font-size:11.5px;color:var(--dim);line-height:1.4}
.diff:active{background:var(--edge);border-color:var(--coin)}
.stat .k b{color:var(--coin);font-weight:700}

/* ---- 라운드 보상 카드 ---- */
#rewardOv{background:radial-gradient(ellipse at 50% 38%,rgba(46,34,14,.86),rgba(8,9,12,.95))}
#rewardOv .card{max-width:310px;width:100%}
.rwkick{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.22em;color:var(--coin);margin-bottom:2px}
#rewardOv h2{font-size:22px;margin:0 0 4px}
#rewardOv p{margin:0 0 14px;font-size:12.5px}
.rws{display:grid;gap:10px}
.rw{
  --rc:#8C99AA;--rcd:#3a414c;
  position:relative;overflow:hidden;font:inherit;color:var(--ink);text-align:left;cursor:pointer;
  display:grid;grid-template-columns:58px 1fr;gap:12px;align-items:center;
  padding:15px 14px 13px;background:linear-gradient(180deg,#252c37,#1a1f27);
  border:2px solid var(--rc);border-radius:6px;
  box-shadow:0 4px 0 var(--rcd),inset 0 0 0 2px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.08);
  animation:rwIn .38s cubic-bezier(.2,.9,.3,1.3) backwards;transition:transform .12s,box-shadow .12s;
}
.rw:nth-child(2){animation-delay:.07s}.rw:nth-child(3){animation-delay:.14s}
.rw.rare{--rc:#4A90D9;--rcd:#1f4470}
.rw.epic{--rc:#F0B429;--rcd:#7a5a10;background:linear-gradient(180deg,#3a2e14,#211b10)}
.rw .rk{position:absolute;top:0;right:0;font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.14em;padding:2px 7px 3px 9px;background:var(--rc);color:#0F1216;border-bottom-left-radius:6px}
.rw .ic{width:58px;height:58px;background:rgba(0,0,0,.3);border-radius:4px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
.rw .tx{display:grid;gap:2px;min-width:0}
.rw b{font-size:15px;color:var(--ink)}
.rw small{font-size:12px;color:var(--dim);line-height:1.4}
.rw .stack{display:flex;align-items:center;gap:6px;margin-top:3px;font-family:var(--mono);font-size:11.5px;color:var(--dim)}
.rw .stack s{text-decoration:none;opacity:.85}
.rw .stack i{font-style:normal;font-weight:700;color:#5FC77E;background:rgba(95,199,126,.14);padding:1px 6px;border-radius:4px}
.rw:hover{transform:translateY(-2px)}
.rw:active{transform:translateY(3px);box-shadow:0 1px 0 var(--rcd),inset 0 0 0 2px rgba(0,0,0,.35)}
.rw.epic::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 40%,rgba(255,240,200,.26) 50%,transparent 60%);transform:translateX(-100%);animation:rwShine 2.6s ease-in-out infinite}
@keyframes rwIn{from{opacity:0;transform:translateY(14px) scale(.94)}}
@keyframes rwShine{60%,100%{transform:translateX(100%)}}
.stat .k i{font-style:normal;font-weight:700;color:#5FC77E}

/* ---- 결과 알림 (보스 돌파 / 기지 함락 / 승리) ---- */
.overlay .emb{display:block;width:124px;height:124px;margin:0 auto 4px}
.overlay .kicker{font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.22em;margin-bottom:4px}
.overlay.fail{background:radial-gradient(ellipse at 50% 40%,rgba(110,16,16,.88),rgba(10,6,6,.96))}
.overlay.fail .kicker,.overlay.fail h2{color:#ff6a5a}
.overlay.breach .kicker{color:#E8873C}
.overlay.win{background:radial-gradient(ellipse at 50% 40%,rgba(70,54,12,.88),rgba(10,9,6,.95))}
.overlay.win .kicker,.overlay.win h2{color:var(--coin)}
.overlay.fail .card{animation:ovShake .5s cubic-bezier(.36,.07,.19,.97) both}
@keyframes ovShake{10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(4px)}30%,50%,70%{transform:translateX(-7px)}40%,60%{transform:translateX(7px)}}

/* ---- 긴급 스킬 ---- */
.skills{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.skill{
  font:inherit;color:var(--ink);background:var(--panel);border:1px solid var(--edge);
  border-radius:10px;padding:6px 4px;cursor:pointer;display:grid;gap:0;text-align:center;
}
.skill .ic{display:block;width:26px;height:26px;margin:0 auto}
.skill b{font-size:12.5px;font-weight:700}
.skill em{font-style:normal;font-family:var(--mono);font-size:11px;color:var(--coin)}
.skill:disabled{opacity:.4;cursor:default}
.skill:disabled em{color:var(--dim)}
.skill:not(:disabled):active{background:var(--panel2);border-color:var(--coin)}

/* ---- 태블릿: 한 단 그대로, 캔버스만 조금 키운다 ---- */
@media (min-width:600px) and (max-width:999px){
  .app{max-width:560px}
  .stage{max-width:calc(64vh * 0.6)}
  .skill .ic{width:30px;height:30px}
}

/* ---- 넓은 화면: 캔버스를 왼쪽에 크게 두고 조작부를 오른쪽 단으로 보낸다.
       한 단으로 쌓으면 캔버스 높이가 화면의 절반으로 묶여서 더 못 키운다. ---- */
@media (min-width:1000px){
  .app{
    max-width:1180px;padding:16px 16px 28px;
    display:grid;grid-template-columns:auto minmax(340px,380px);
    /* 오른쪽 단 항목 7개는 내용 높이대로, 마지막 1fr 이 캔버스와의 높이 차를 전부 먹는다.
       이 줄이 없으면 남는 높이가 7개 행 사이에 흩뿌려져 간격이 벌어진다. */
    grid-template-rows:repeat(7,min-content) 1fr;
    /* auto 트랙은 기본값에서 남는 폭까지 늘어난다. 가운데 정렬로 두 단을 붙인다. */
    justify-content:center;column-gap:18px;align-items:start;
  }
  /* 항목을 늘리면 위 repeat(7) 과 아래 span 8 을 같이 올린다. */
  .stage{
    grid-column:1;grid-row:1 / span 8;
    width:min(calc(92vh * 0.6), 56vw);max-width:none;
  }
  .hud,.fever,.skills,.actions,.panel,.saves,.log{grid-column:2}
  .panel{min-height:0}
  .skill .ic{width:34px;height:34px}
  .overlay .card{max-width:340px}
  .overlay h2{font-size:26px}
}

/* ---- 피버 게이지 강화 ---- */
.fever.ready{background:linear-gradient(90deg,#E8873C,#F0B429,#ffd86a,#F0B429,#E8873C);background-size:200% 100%;animation:fvpulse 1s ease-in-out infinite,fvflow 1.4s linear infinite;box-shadow:0 0 16px rgba(240,160,40,.5)}
.fever.active{box-shadow:0 0 0 1px var(--coin),0 0 18px rgba(240,140,40,.45)}
.fever.active .fvfill{background:repeating-linear-gradient(-45deg,#F0B429 0 6px,#E8873C 6px 12px);background-size:17px 17px;animation:fvstripe .5s linear infinite}
@keyframes fvflow{to{background-position:-200% 0}}
@keyframes fvstripe{to{background-position:17px 0}}
@media(prefers-reduced-motion:reduce){.fever.ready,.fever.active .fvfill,.rw,.rw.epic::after,.overlay.fail .card{animation:none}}

/* ---- 짧은 화면: 오버레이가 스테이지 밖으로 잘리지 않게 ---- */
.overlay{overflow-y:auto;place-items:safe center}
@media (max-height:760px){
  .overlay{padding:12px}
  .overlay .emb{width:80px;height:80px}
  .overlay h2{font-size:18px;margin-bottom:4px}
  .overlay p{font-size:12.5px;margin-bottom:10px}
  #rewardOv p{display:none}
  #rewardOv h2{font-size:17px;margin-bottom:8px}
  .rws{gap:7px}
  .rw{padding:10px 10px 9px;grid-template-columns:40px 1fr;gap:9px;box-shadow:0 3px 0 var(--rcd),inset 0 0 0 2px rgba(0,0,0,.35)}
  .rw .ic{width:40px;height:40px}
  .rw b{font-size:13.5px}
  .rw small{font-size:11px}
}