/* TAECHORA WEB v2 · DEFENDER — 두 고리 시안 톤(짙은 남색 밤 · 흰 코어 · 파란 안쪽 고리 #43c9ff · 금빛 바깥 고리 #ffae1f · 붉은 침 떼).
   공통 틀은 ../shell.css. 여기서는 색 변수와 디펜더 전용 HUD·카드만 정한다. */
:root{
  --void:#05060b;
  --acc:#43c9ff;--acc2:#ffae1f;--accGlow:rgba(67,201,255,.22);
  --panelA:rgba(9,28,52,.95);--panelB:rgba(5,8,16,.97);--chip:rgba(6,18,36,.72);
  --line:rgba(214,236,255,.14);--line2:rgba(214,236,255,.28);
  --logoA:#ffffff;--logoB:#cfeeff;--logoC:#43c9ff;
  --mute:#9db6cc;--dim:#5f7a92;--hot:#ff5a6a;
}
.screen.title{background:linear-gradient(180deg,rgba(5,6,11,.1) 0%,rgba(5,6,11,.18) 30%,rgba(5,6,11,.6) 48%,rgba(5,6,11,.66) 76%,rgba(5,6,11,.42) 100%)}
.screen.title .ko,.screen.title .tag,.screen.title .keys{text-shadow:0 1px 10px rgba(0,0,0,.85),0 0 2px rgba(0,0,0,.9)}

/* 위 HUD */
.wchip{position:relative;display:flex;align-items:baseline;gap:6px;height:46px;padding:0 12px;border-radius:12px;background:var(--chip);border:1px solid var(--line);overflow:hidden}
.wchip small{font-size:11px;color:var(--mute);letter-spacing:.1em;line-height:46px}
.wchip b{font-size:24px;line-height:46px;color:#fff}
.wbar{position:absolute;left:8px;right:8px;bottom:5px;height:3px;border-radius:2px;background:rgba(214,236,255,.12);overflow:hidden}
.wbar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--acc),#fff);transition:width .25s}
.score{font-size:32px;color:#fff;text-shadow:0 2px 14px rgba(0,0,0,.6);line-height:1}
.score.pop{animation:scorePop .22s ease-out}
@keyframes scorePop{from{transform:scale(1.15)}}
.mult{margin-top:5px;font-size:12px;color:var(--mute);letter-spacing:.08em}
.mult.hot{color:var(--gold2)}
.hud-row2{position:absolute;left:12px;right:12px;top:calc(68px + env(safe-area-inset-top));display:flex;justify-content:space-between;align-items:center;gap:10px}
.lvchip{position:relative;display:flex;align-items:center;gap:6px;height:30px;padding:0 10px 0 10px;border-radius:10px;background:var(--chip);border:1px solid var(--line)}
.lvchip small{font-size:10px;color:var(--mute);letter-spacing:.1em}
.lvchip b{font-size:16px;color:#fff;min-width:14px}
.xbar{width:72px;height:5px;border-radius:3px;background:rgba(214,236,255,.12);overflow:hidden}
.xbar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#43c9ff,#bdf0ff);transition:width .2s}
.lvchip em{font-style:normal;font-size:13px;color:var(--ink);background:var(--gold);padding:1px 6px;border-radius:6px;animation:pendPop .3s ease-out}
@keyframes pendPop{from{transform:scale(1.4)}}
.corechip{display:flex;align-items:center;gap:6px;height:30px;padding:0 10px;border-radius:10px;background:var(--chip);border:1px solid var(--line)}
.corechip svg{width:16px;height:16px;fill:#fff;stroke:rgba(255,255,255,.55)}
.corechip b{font-size:16px;color:#fff}
.corechip.low{border-color:rgba(255,90,106,.6);animation:coreLow .8s ease-in-out infinite}
.corechip.low svg{fill:var(--hot)}
.corechip.hurt{animation:coreHurt .35s ease-out}
@keyframes coreLow{50%{box-shadow:0 0 0 3px rgba(255,90,106,.25),0 0 22px rgba(255,90,106,.45)}}
@keyframes coreHurt{0%{transform:scale(1.18);background:rgba(255,90,106,.45)}}
.bossbar{position:absolute;left:50%;top:calc(108px + env(safe-area-inset-top));transform:translateX(-50%);width:min(420px,72vw);display:flex;align-items:center;gap:8px}
.bossbar span{font-size:12px;color:var(--hot);letter-spacing:.12em}
.bossbar>i{flex:1;height:7px;border-radius:4px;background:rgba(255,90,106,.16);overflow:hidden;border:1px solid rgba(255,90,106,.35)}
.bossbar>i>i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#ff3346,#ff8a9a);transition:width .15s}

.hint{position:absolute;left:50%;top:calc(var(--hintY,112px) + env(safe-area-inset-top));transform:translate(-50%,-6px);max-width:calc(100vw - 28px);padding:9px 16px;border-radius:999px;background:rgba(5,14,28,.82);border:1px solid var(--line2);font:700 14px/1.3 var(--f-ui);color:#fff;opacity:0;transition:opacity .2s,transform .2s;white-space:nowrap;text-align:center}
.hint.on{opacity:1;transform:translate(-50%,0)}
.hint b{color:var(--gold2);font-weight:700}
.banner{top:calc(var(--bannerY,30vh))}
.banner small{text-shadow:0 2px 10px rgba(0,0,0,.9),0 0 3px rgba(0,0,0,.9)}

.gauge .val{stroke:var(--acc)}
.gauge.ready{color:var(--ink);background:radial-gradient(circle at 50% 42%,#ffffff,#bfeaff 52%,#43c9ff);animation:gaugeReadyB 1s ease-in-out infinite;box-shadow:0 0 0 4px rgba(67,201,255,.35),0 0 40px rgba(67,201,255,.6)}
.gauge.ready small{color:rgba(7,8,14,.6)}
@keyframes gaugeReadyB{50%{box-shadow:0 0 0 10px rgba(67,201,255,.12),0 0 60px rgba(160,230,255,.85)}}
.gauge.off{opacity:.45}

/* 강화 카드 */
.screen.cardscr{background:rgba(3,7,14,.66);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.panel-in.wide{width:min(760px,100%)}
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:8px}
.card{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:16px 12px 14px;border-radius:16px;background:linear-gradient(170deg,rgba(12,36,66,.96),rgba(6,10,20,.96));border:1.5px solid var(--line2);color:var(--text);transition:transform .14s,border-color .14s,box-shadow .14s;animation:cardIn .32s cubic-bezier(.2,.8,.2,1) both}
.card:nth-child(2){animation-delay:.05s}.card:nth-child(3){animation-delay:.1s}
@keyframes cardIn{from{opacity:0;transform:translateY(14px) scale(.96)}}
.card:hover,.card:focus-visible{transform:translateY(-3px);border-color:var(--acc);box-shadow:0 12px 36px rgba(0,0,0,.5),0 0 30px rgba(67,201,255,.22);outline:none}
.card .tag{align-self:stretch;font:700 11px/1 var(--f-ui);letter-spacing:.02em;color:var(--mute)}
.card .tag.new{color:var(--mint)}.card .tag.gold{color:var(--acc2)}
.card .ic{width:58px;height:58px;display:grid;place-items:center;border-radius:14px;background:radial-gradient(circle at 50% 40%,rgba(67,201,255,.24),rgba(6,14,28,.85) 70%);border:1px solid var(--line)}
.card.out .ic{background:radial-gradient(circle at 50% 40%,rgba(255,174,31,.26),rgba(20,12,4,.85) 70%)}
.card .ic svg{width:40px;height:40px}
.card .nm{font:700 16px/1.25 var(--f-ui);color:#fff}
.card .nm small{display:block;font:400 11px/1.3 var(--f-disp);letter-spacing:.08em;color:var(--mute);margin-top:2px}
.card .ds{font-size:12.5px;line-height:1.5;color:var(--mute);min-height:38px}
.card .pips{display:flex;gap:4px}
.card .pips i{width:9px;height:9px;border-radius:2px;transform:rotate(45deg);background:rgba(214,236,255,.16)}
.card .pips i.on{background:var(--acc)}
.card.out .pips i.on{background:var(--acc2)}
.card .pips i.next{background:#fff;box-shadow:0 0 8px rgba(255,255,255,.8)}
.card .key{position:absolute;top:8px;right:10px;font-size:11px;color:var(--dim)}
@media (max-width:640px){
  .cards{grid-template-columns:1fr;gap:9px}
  .card{flex-direction:row;text-align:left;gap:12px;padding:12px 14px}
  .card .tag{position:absolute;top:10px;right:12px;width:auto;text-align:right}
  .card .ic{width:50px;height:50px;flex:none}
  .card .ic svg{width:34px;height:34px}
  .card .txt{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:1px}
  .card .ds{min-height:0;margin-top:2px}
  .card .pips{margin-top:6px}
  .card .key{display:none}
}
@media (min-width:900px){
  .score{font-size:38px}
  .hud-row2{left:24px;right:24px;top:calc(72px + env(safe-area-inset-top))}
}
@media (max-height:520px){
  .hud-row2{top:calc(64px + env(safe-area-inset-top))}
  .banner{font-size:34px}
  .hint{top:auto;bottom:calc(12px + env(safe-area-inset-bottom));transform:translate(-50%,6px)}
  .bossbar{top:calc(66px + env(safe-area-inset-top));width:min(300px,40vw)}
  .cardscr .panel-in{padding:14px 14px 12px}
  .cardscr h2{margin:6px 0 2px;font-size:20px}
  .cardscr .sub{display:none}
  .cards{grid-template-columns:repeat(3,minmax(0,1fr))}
  .card{flex-direction:column;text-align:center;padding:10px 8px}
  .card .ds{font-size:11.5px;min-height:0}
  .card .ic{width:42px;height:42px}
}