:root{
  --bg:#0D1220; --panel:#161E33; --panel2:#1D2742; --panel3:#243156;
  --line:#2B3757; --line2:#3A4970;
  --text:#E8ECF6; --dim:#8794B4; --dim2:#5F6C8C;
  --gold:#F0B429; --red:#E2564A; --teal:#3FBFA8; --blue:#4B8DF0; --purple:#9B6BE0;
  --hp-hi:#48C98A; --hp-mid:#F0B429; --hp-lo:#E2564A;
  --r:10px;
  --font:"Apple SD Gothic Neo","Pretendard","Noto Sans KR","Malgun Gothic",system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--bg); color:var(--text); font-family:var(--font);
  font-size:15px; line-height:1.5; -webkit-font-smoothing:antialiased;
  overflow:hidden;
}
button{font-family:inherit;font-size:inherit;color:inherit;background:none;border:none;cursor:pointer}
button:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:var(--line2);border-radius:9px}
::-webkit-scrollbar-track{background:transparent}

/* ---------- 포켓볼 심(seam) : 이 게임의 구조 모티프 ---------- */
.seam{position:relative;height:2px;background:var(--line);margin:18px 0}
.seam::after{
  content:"";position:absolute;left:50%;top:50%;width:13px;height:13px;
  transform:translate(-50%,-50%);border-radius:50%;
  background:var(--bg);border:2px solid var(--line);
}
.ball{position:relative;width:26px;height:26px;border-radius:50%;flex:none;
  background:linear-gradient(#E2564A 0 49%, #16203a 49% 51%, #EDF1FA 51% 100%);
  box-shadow:inset 0 0 0 1.5px rgba(0,0,0,.45)}
.ball::after{content:"";position:absolute;left:50%;top:50%;width:8px;height:8px;
  transform:translate(-50%,-50%);border-radius:50%;background:#EDF1FA;
  box-shadow:0 0 0 1.5px #16203a}
.ball.great{background:linear-gradient(#3D7BE0 0 49%,#16203a 49% 51%,#EDF1FA 51% 100%)}
.ball.ultra{background:linear-gradient(#F0B429 0 42%,#1a1a1a 42% 51%,#16203a 51% 53%,#EDF1FA 53% 100%)}
.ball.master{background:linear-gradient(#9B6BE0 0 49%,#16203a 49% 51%,#EDF1FA 51% 100%)}
.ball.champ{background:linear-gradient(#3FBFA8 0 49%,#16203a 49% 51%,#F0B429 51% 100%)}

/* ---------- 레이아웃 ---------- */
#app{display:flex;flex-direction:column;height:100%}
header{
  display:flex;align-items:center;gap:16px;padding:11px 20px;
  background:var(--panel);border-bottom:2px solid var(--line);flex:none;
}
.logo{font-size:16px;font-weight:800;letter-spacing:-.02em;white-space:nowrap}
.logo small{display:block;font-size:10px;font-weight:600;color:var(--dim2);letter-spacing:.06em}
.tierbadge{display:flex;align-items:center;gap:9px;background:var(--panel2);
  border:1px solid var(--line);border-radius:999px;padding:5px 14px 5px 6px}
.tierbadge b{font-size:14px}
.tierbadge span{font-size:11px;color:var(--dim)}
.purse{margin-left:auto;display:flex;gap:8px;align-items:center}
.coin,.tick{display:flex;align-items:center;gap:6px;background:var(--panel2);
  border:1px solid var(--line);border-radius:var(--r);padding:6px 12px;font-weight:700;font-size:14px}
.coin i,.tick i{font-style:normal;font-size:13px}
.coin{color:var(--gold)} .tick{color:var(--teal)}
nav{display:flex;gap:2px;padding:0 20px;background:var(--panel);flex:none;
  border-bottom:1px solid var(--line)}
nav button{padding:10px 18px;font-size:14px;font-weight:600;color:var(--dim);
  border-bottom:2px solid transparent;margin-bottom:-1px}
nav button:hover{color:var(--text)}
nav button.on{color:var(--text);border-bottom-color:var(--gold)}
main{flex:1;overflow-y:auto;padding:24px 20px 60px}
.wrap{max-width:1080px;margin:0 auto}
h2{font-size:20px;font-weight:800;letter-spacing:-.02em;margin-bottom:4px}
h3{font-size:15px;font-weight:700;margin-bottom:10px}
.sub{color:var(--dim);font-size:13px;margin-bottom:18px}

/* ---------- 공통 요소 ---------- */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:16px}
.btn{background:var(--panel3);border:1px solid var(--line2);border-radius:8px;
  padding:9px 16px;font-weight:700;font-size:14px;transition:background .12s}
.btn:hover:not(:disabled){background:var(--line2)}
.btn:disabled{opacity:.35;cursor:not-allowed}
.btn.pri{background:var(--red);border-color:var(--red);color:#fff}
.btn.pri:hover:not(:disabled){background:#EE6A5E}
.btn.go{background:var(--teal);border-color:var(--teal);color:#06231E}
.btn.go:hover:not(:disabled){background:#4FD4BB}
.btn.sm{padding:5px 11px;font-size:12.5px}
.chip{display:inline-block;padding:2px 9px;border-radius:999px;font-size:11.5px;
  font-weight:700;color:#0C1220}
.grid{display:grid;gap:12px}
.muted{color:var(--dim)} .tiny{font-size:12px}
.row{display:flex;align-items:center;gap:10px}

/* ---------- HP 바 ---------- */
.hpwrap{height:7px;background:#0A0F1C;border-radius:99px;overflow:hidden;
  box-shadow:inset 0 0 0 1px var(--line)}
.hpbar{height:100%;border-radius:99px;transition:width .45s cubic-bezier(.4,0,.2,1)}

/* ---------- 포켓몬 카드 ---------- */
.pcard{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:13px;display:flex;gap:12px;align-items:flex-start;text-align:left;width:100%;
  transition:border-color .12s,background .12s}
.pcard:hover{border-color:var(--line2)}
.pcard.sel{border-color:var(--gold);background:var(--panel2)}
.pcard.dim{opacity:.4}
.sprite{width:56px;height:56px;border-radius:8px;flex:none;background:var(--panel3);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  border:1px dashed var(--line2);font-size:9px;color:var(--dim2);text-align:center;line-height:1.2}
.sprite img{width:100%;height:100%;object-fit:contain}
.sprite.lg{width:120px;height:120px}
.pname{font-weight:700;font-size:15px}
.types{display:flex;gap:4px;margin-top:4px}

/* ---------- 스탯 바 ---------- */
.statrow{display:grid;grid-template-columns:52px 40px 1fr 30px;gap:8px;align-items:center;
  font-size:12.5px;margin-bottom:5px}
.statrow .lbl{color:var(--dim)}
.statrow .val{text-align:right;font-weight:700;font-variant-numeric:tabular-nums}
.statbar{height:6px;background:#0A0F1C;border-radius:99px;overflow:hidden}
.statbar div{height:100%;background:var(--blue);border-radius:99px}
.statbar div.up{background:var(--teal)} .statbar div.dn{background:var(--red)}
.ptbtn{width:26px;height:22px;border:1px solid var(--line2);border-radius:5px;
  font-size:13px;font-weight:700;line-height:1;color:var(--dim)}
.ptbtn:hover:not(:disabled){color:var(--text);background:var(--panel3)}
.ptbtn:disabled{opacity:.25}

/* ---------- 배틀 ---------- */
#battle{position:fixed;inset:0;background:var(--bg);display:none;flex-direction:column;z-index:50}
#battle.on{display:flex}
.field{flex:1;position:relative;overflow:hidden;
  background:radial-gradient(120% 80% at 50% 0%,#1B2744 0%,#0D1220 70%)}
.side{position:absolute;display:flex;gap:14px;align-items:flex-end}
.side.foe{top:22px;right:24px;flex-direction:row-reverse}
.side.mine{bottom:22px;left:24px}
.mon{width:190px;background:rgba(22,30,51,.92);border:1px solid var(--line);
  border-radius:var(--r);padding:10px 12px;backdrop-filter:blur(4px)}
.mon.fnt{opacity:.35;filter:grayscale(1)}
.mon .top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px}
.mon .nm{font-weight:700;font-size:13.5px}
.mon .lv{font-size:11px;color:var(--dim)}
.mon .hpnum{font-size:11px;color:var(--dim);margin-top:4px;font-variant-numeric:tabular-nums}
.badges{display:flex;gap:4px;flex-wrap:wrap;margin-top:6px;min-height:16px}
.st{font-size:10px;font-weight:800;padding:1px 6px;border-radius:4px;color:#0C1220}
.boost{font-size:10px;font-weight:700;padding:1px 5px;border-radius:4px;
  background:var(--panel3);color:var(--dim)}
.boost.p{color:var(--teal)} .boost.m{color:var(--red)}
.avatar{width:96px;height:96px;border-radius:10px;background:rgba(29,39,66,.7);
  border:1px dashed var(--line2);display:flex;align-items:center;justify-content:center;
  font-size:10px;color:var(--dim2);text-align:center;overflow:hidden;flex:none}
.avatar img{width:100%;height:100%;object-fit:contain}
.weather{position:absolute;top:16px;left:50%;transform:translateX(-50%);
  font-size:12px;font-weight:700;padding:5px 14px;border-radius:999px;
  background:var(--panel2);border:1px solid var(--line)}
.control{flex:none;background:var(--panel);border-top:2px solid var(--line);
  display:flex;min-height:190px;max-height:44vh}
.log{flex:1;padding:14px 18px;overflow-y:auto;font-size:13.5px;line-height:1.75;
  border-right:1px solid var(--line);min-width:0}
.log p{margin-bottom:3px;color:var(--dim)}
.log p.hi{color:var(--text)} .log p.eff{color:var(--gold);font-weight:600}
.log p.bad{color:var(--red)}
.actions{width:min(56%,560px);padding:14px;flex:none;overflow-y:auto}
.movegrid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.mvbtn{border:1px solid var(--line2);border-radius:8px;padding:9px 11px;text-align:left;
  background:var(--panel2);transition:background .12s}
.mvbtn:hover:not(:disabled){background:var(--panel3)}
.mvbtn:disabled{opacity:.3;cursor:not-allowed}
.mvbtn .mn{font-weight:700;font-size:13.5px;display:flex;justify-content:space-between;gap:8px}
.mvbtn .mi{font-size:11px;color:var(--dim);margin-top:3px;display:flex;gap:8px}
.switchgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px}

/* ---------- 모달 ---------- */
.modal{position:fixed;inset:0;background:rgba(6,10,20,.78);display:flex;
  align-items:center;justify-content:center;padding:20px;z-index:80}
.sheet{background:var(--panel);border:1px solid var(--line2);border-radius:14px;
  padding:24px;max-width:640px;width:100%;max-height:88vh;overflow-y:auto}
.sheet h2{margin-bottom:8px}

/* ---------- 상점 ---------- */
.shoprow{display:flex;align-items:center;gap:12px;padding:10px 12px;
  border-bottom:1px solid var(--line)}
.shoprow:last-child{border-bottom:none}
.shoprow .nm{font-weight:700;font-size:13.5px;min-width:118px}
.shoprow .ef{flex:1;font-size:12.5px;color:var(--dim);min-width:0}
.shoprow .pr{font-weight:800;color:var(--gold);font-variant-numeric:tabular-nums;
  white-space:nowrap;font-size:13px}
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.tabs button{padding:5px 12px;border-radius:999px;font-size:12.5px;font-weight:700;
  background:var(--panel2);border:1px solid var(--line);color:var(--dim)}
.tabs button.on{background:var(--gold);border-color:var(--gold);color:#1A1204}

@media (max-width:820px){
  .control{flex-direction:column-reverse;max-height:56vh}
  .log{border-right:none;border-top:1px solid var(--line);max-height:120px}
  .actions{width:100%}
  .side.foe{right:12px;top:12px} .side.mine{left:12px;bottom:12px}
  .mon{width:150px} .avatar{width:64px;height:64px}
  header{flex-wrap:wrap;gap:10px} .logo small{display:none}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ================= 추가: 툴팁 ================= */
.tip{position:fixed;z-index:120;max-width:290px;pointer-events:none;
  background:#0A0F1C;border:1px solid var(--line2);border-radius:9px;
  padding:10px 12px;box-shadow:0 8px 26px rgba(0,0,0,.55);
  font-size:12.5px;line-height:1.55;opacity:0;transition:opacity .1s}
.tip.on{opacity:1}
.tip .th{font-weight:800;font-size:13.5px;margin-bottom:5px;display:flex;
  align-items:center;gap:6px;flex-wrap:wrap}
.tip .tm{color:var(--dim);font-size:11.5px;margin-bottom:6px;
  display:flex;gap:9px;flex-wrap:wrap;font-variant-numeric:tabular-nums}
.tip .td{color:var(--text)}
.tip .tx{color:var(--gold);margin-top:6px;font-size:11.5px}
.hint{border-bottom:1px dotted var(--dim2);cursor:help}

/* ================= 추가: 배틀 화면 3영역 색 분리 ================= */
.field{background:
  radial-gradient(130% 90% at 50% -10%, #24406B 0%, #16294A 45%, #0C1526 100%)}
.control{background:transparent;border-top:none}
.log{background:#0A0F1C;border-right:2px solid #05080F;border-top:2px solid #05080F}
.actions{background:#1A2440;border-top:2px solid #05080F}
.mvbtn{background:#22305A;border-color:#3B4E86}
.mvbtn:hover:not(:disabled){background:#2C3D71}

/* ================= 추가: 날씨 연출 ================= */
.wx{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.wx.sun{background:radial-gradient(60% 45% at 50% -8%,rgba(255,196,84,.42),transparent 70%)}
.wx.sun::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(255,170,60,.16),transparent 55%)}
.wx.rain{background:linear-gradient(180deg,rgba(38,66,116,.5),rgba(20,36,66,.32))}
.wx.rain::before{content:"";position:absolute;inset:-30% -10%;
  background:repeating-linear-gradient(101deg,transparent 0 7px,
    rgba(174,206,255,.5) 7px 8.5px,transparent 8.5px 15px);
  animation:rainfall .55s linear infinite}
@keyframes rainfall{to{transform:translateY(30%)}}
.wx.sand{background:linear-gradient(180deg,rgba(196,158,86,.34),rgba(150,116,58,.24))}
.wx.sand::before{content:"";position:absolute;inset:-20%;
  background:repeating-linear-gradient(76deg,transparent 0 22px,
    rgba(233,203,142,.28) 22px 26px,transparent 26px 52px);
  animation:sandblow 1.5s linear infinite}
@keyframes sandblow{to{transform:translateX(-52px)}}
.wx.hail{background:linear-gradient(180deg,rgba(168,214,224,.3),rgba(96,150,172,.2))}
.wx.hail::before{content:"";position:absolute;inset:-30% 0;
  background:repeating-linear-gradient(94deg,transparent 0 13px,
    rgba(226,248,255,.55) 13px 15px,transparent 15px 30px);
  animation:hailfall .95s linear infinite}
@keyframes hailfall{to{transform:translateY(30%)}}
.weather{z-index:3;display:flex;align-items:center;gap:7px}
.weather .wt{font-size:10.5px;color:var(--dim);font-weight:600}

/* ================= 추가: 잔여 포켓몬 표시 ================= */
.roster{position:absolute;display:flex;gap:5px;align-items:center;z-index:3;
  background:rgba(10,15,28,.72);border:1px solid var(--line);
  border-radius:999px;padding:5px 11px}
.roster.foe{top:16px;left:20px} .roster.mine{bottom:16px;right:20px}
.roster .rl{font-size:11px;color:var(--dim);font-weight:700;margin-right:2px}
.pip{width:11px;height:11px;border-radius:50%;background:var(--hp-hi);
  box-shadow:inset 0 0 0 1.5px rgba(0,0,0,.4)}
.pip.out{background:#2E3A56}
.pip.hurt{background:var(--hp-mid)}

/* ================= 추가: 상태이상 강조 로그 ================= */
.log p.st{color:#C08BE0;font-weight:600}
.log p.turn{color:var(--dim2);margin:10px 0 4px;font-weight:700;
  border-top:1px solid #16203A;padding-top:8px}
.mon{background:rgba(16,24,44,.94)}

/* ================= 팔레트 확장 : 네온 포인트 ================= */
:root{
  --neon-red:#FF3B4E; --neon-yel:#FFE24D; --neon-cyan:#2BE8D8; --neon-mag:#FF5FD2;
  --slate:#2F3440; --slate2:#3A404F; --slate3:#464D5F;
  --ink:#070A12;
}
/* 헤더에 얇은 네온 라인 */
header{border-bottom:2px solid var(--ink);
  box-shadow:0 2px 0 0 var(--neon-red), 0 3px 14px rgba(255,59,78,.22)}
.logo{color:var(--text)}
.logo small{color:var(--neon-red);letter-spacing:.14em;opacity:.9}
.coin{color:var(--neon-yel);border-color:#5A4A18;background:#221C09;
  text-shadow:0 0 9px rgba(255,226,77,.45)}
.tick{color:var(--neon-cyan);border-color:#14504C;background:#082220;
  text-shadow:0 0 9px rgba(43,232,216,.4)}
nav button.on{border-bottom-color:var(--neon-red);
  text-shadow:0 0 12px rgba(255,59,78,.5)}
.tierbadge{border-color:var(--line2)}

/* ================= 배틀 : 세 영역을 확실히 분리 ================= */
/* 1) 필드 — 청록 스타디움 */
.field{background:
  radial-gradient(75% 55% at 50% -12%, rgba(43,232,216,.16), transparent 62%),
  radial-gradient(130% 95% at 50% 0%, #1E3E63 0%, #14294A 42%, #0A1120 100%)}
.field::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(0,0,0,.13) 3px 4px)}

/* 2) 로그창 — 잉크빛, 왼쪽에 시안 라인 */
.log{background:var(--ink);border-right:3px solid #000;
  border-top:3px solid #000;box-shadow:inset 3px 0 0 0 var(--neon-cyan);
  font-size:15px;line-height:1.8;padding:16px 20px}
.log p{margin-bottom:5px;color:#9FB0CE}
.log p.hi{color:#FFFFFF;font-weight:600}
.log p.eff{color:var(--neon-yel);font-weight:700;text-shadow:0 0 10px rgba(255,226,77,.3)}
.log p.bad{color:var(--neon-red);font-weight:600}
.log p.st{color:var(--neon-mag);font-weight:600}
.log p.turn{color:#6B7A99;font-size:12.5px;letter-spacing:.1em;font-weight:800;
  margin:14px 0 7px;border-top:1px solid #1A2butt;border-top:1px solid #17203A;padding-top:9px}

/* 3) 기술창 — 회색 계열 커맨드 패널 */
.actions{background:linear-gradient(180deg,var(--slate) 0%,#262A34 100%);
  border-top:3px solid #000;box-shadow:inset 0 3px 0 0 var(--neon-red);padding:16px}
.mvbtn{background:#3C4353;border:1px solid #545C70;border-left-width:5px;
  border-radius:7px;box-shadow:0 2px 0 0 rgba(0,0,0,.35)}
.mvbtn:hover:not(:disabled){background:#4A5266;transform:translateY(-1px);
  box-shadow:0 3px 0 0 rgba(0,0,0,.4)}
.mvbtn:active:not(:disabled){transform:translateY(1px);box-shadow:0 1px 0 0 rgba(0,0,0,.35)}
.mvbtn .mn{color:#F2F5FB;font-size:14px}
.mvbtn .mi{color:#B3BDD1;font-size:11.5px}
.actions .btn{background:var(--slate2);border-color:#5A6276}
.actions .btn:hover:not(:disabled){background:var(--slate3)}
.actions .tiny.muted{color:#AEB8CC}
.actions h3{color:#F2F5FB}

/* HP 바 : 네온 */
.hpwrap{background:#05080F;box-shadow:inset 0 0 0 1px #000}
.hpbar{box-shadow:0 0 9px currentColor}
.mon{background:rgba(11,17,32,.95);border:1px solid #2E3C5E;
  box-shadow:0 4px 16px rgba(0,0,0,.45)}
.mon .nm{color:#FFF}
.pip{box-shadow:0 0 7px currentColor,inset 0 0 0 1.5px rgba(0,0,0,.45)}
.weather{background:rgba(7,10,18,.85);border-color:var(--line2);
  box-shadow:0 0 18px rgba(0,0,0,.5)}
.roster{background:rgba(7,10,18,.8)}

/* 속도 조절 */
.speed{display:flex;gap:5px;align-items:center;margin-left:auto}
.speed span{font-size:11px;color:#AEB8CC;font-weight:700}
.speed button{padding:3px 10px;border-radius:999px;font-size:11.5px;font-weight:700;
  background:#3C4353;border:1px solid #545C70;color:#C6CFE0}
.speed button.on{background:var(--neon-yel);border-color:var(--neon-yel);color:#241E00}
.actbar{display:flex;align-items:center;gap:8px;margin-top:11px;flex-wrap:wrap}

/* ============================================================
   네온 팔레트 — 포켓몬 챔피언스풍 포인트 컬러
   ============================================================ */
:root{
  --neon-red:#FF3B5C; --neon-yellow:#FFE14D; --neon-cyan:#22E6D6;
  --neon-purple:#B15CFF; --neon-lime:#A6FF3D; --neon-orange:#FF8A3D;
  /* 기술 선택창은 의도적으로 무채색 계열 — "선택 패널"이라는 신호 */
  --slate:#2C313C; --slate2:#363C4A; --slate3:#434B5C; --slate-line:#525C70;
  --cat-phy:#F0783C; --cat-spe:#4E7BE8; --cat-sta:#9AA4B8;
}
header{border-bottom:2px solid transparent;
  border-image:linear-gradient(90deg,var(--neon-red),var(--neon-yellow),var(--neon-cyan)) 1;
  background:linear-gradient(180deg,#1A2440,#141B30)}
.logo{background:linear-gradient(92deg,var(--neon-yellow),var(--neon-red));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.logo small{color:var(--dim2);-webkit-text-fill-color:var(--dim2)}
nav button.on{border-bottom-color:var(--neon-yellow);
  text-shadow:0 0 14px rgba(255,225,77,.45)}
.coin{color:var(--neon-yellow);border-color:rgba(255,225,77,.32)}
.tick{color:var(--neon-cyan);border-color:rgba(34,230,214,.32)}
.btn.pri{background:var(--neon-red);border-color:var(--neon-red);
  box-shadow:0 0 20px rgba(255,59,92,.32)}
.btn.pri:hover:not(:disabled){background:#FF5473;box-shadow:0 0 26px rgba(255,59,92,.5)}
.btn.go{background:var(--neon-cyan);border-color:var(--neon-cyan);color:#04211E;
  box-shadow:0 0 20px rgba(34,230,214,.26)}
.pcard.sel{border-color:var(--neon-yellow);
  box-shadow:0 0 0 1px var(--neon-yellow),0 0 22px rgba(255,225,77,.2)}
.tabs button.on{background:var(--neon-yellow);border-color:var(--neon-yellow);color:#1A1204}
.shoprow .pr{color:var(--neon-yellow)}

/* ---------- 배틀: 세 영역을 확실히 분리 ---------- */
.field{background:
  radial-gradient(120% 78% at 50% -12%,#3A5B94 0%,#22355E 40%,#101A30 100%)}
.field::after{content:"";position:absolute;left:0;right:0;bottom:0;height:44%;
  background:linear-gradient(180deg,transparent,rgba(8,14,26,.72));pointer-events:none}
.log{background:#0B0E16;border-right:3px solid #05070C;border-top:3px solid #05070C;
  font-size:15px;line-height:1.8}
.log p{margin-bottom:5px}
.log p.hi{color:#FFF;font-weight:700}
.log p.eff{color:var(--neon-yellow);font-weight:700;
  text-shadow:0 0 12px rgba(255,225,77,.3)}
.log p.bad{color:var(--neon-red);font-weight:600}
.log p.st{color:var(--neon-purple);font-weight:700}

.log p.turn{color:#7A88A8;font-weight:800;font-size:13px;letter-spacing:.08em;
  margin:14px 0 6px;padding-top:9px;border-top:1px solid #1A2136}

/* 기술창 = 무채색 선택 패널 */
.actions{background:linear-gradient(180deg,var(--slate),#242932);
  border-top:3px solid #05070C;box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.mvbtn{background:var(--slate2);border:1px solid var(--slate-line);
  border-left:4px solid var(--slate-line);position:relative;overflow:hidden}
.mvbtn:hover:not(:disabled){background:var(--slate3);transform:translateY(-1px)}
.mvbtn:active:not(:disabled){transform:translateY(0)}
.actions .btn{background:var(--slate2);border-color:var(--slate-line)}
.actions .btn:hover:not(:disabled){background:var(--slate3)}
.catdot{font-size:10px;font-weight:800;padding:1px 6px;border-radius:4px;color:#0B0E16}

/* ---------- 속도 조절 ---------- */
.speedbar{display:flex;gap:5px;align-items:center;margin-top:10px}
.speedbar .sl{font-size:11.5px;color:var(--dim);font-weight:700;margin-right:3px}
.speedbar button{font-size:11.5px;font-weight:700;padding:4px 10px;border-radius:999px;
  background:var(--slate2);border:1px solid var(--slate-line);color:var(--dim)}
.speedbar button.on{background:var(--neon-cyan);border-color:var(--neon-cyan);color:#04211E}

/* ============================================================
   모션
   ============================================================ */
@keyframes lungeR{0%{transform:translate(0,0)}35%{transform:translate(26px,-12px) scale(1.06)}100%{transform:translate(0,0)}}
@keyframes lungeL{0%{transform:translate(0,0)}35%{transform:translate(-26px,12px) scale(1.06)}100%{transform:translate(0,0)}}
.avatar.lunge-r{animation:lungeR .42s cubic-bezier(.3,1.4,.5,1)}
.avatar.lunge-l{animation:lungeL .42s cubic-bezier(.3,1.4,.5,1)}

@keyframes shake{0%,100%{transform:translate(0,0)}
  15%{transform:translate(-8px,3px)}30%{transform:translate(7px,-3px)}
  45%{transform:translate(-6px,2px)}60%{transform:translate(5px,-2px)}
  75%{transform:translate(-3px,1px)}}
.avatar.hit{animation:shake .38s ease-out}
@keyframes flashWhite{0%,100%{filter:none}25%,60%{filter:brightness(2.6) saturate(.25)}}
.avatar.flash{animation:flashWhite .38s ease-out}

@keyframes faintDrop{to{transform:translateY(30px) scale(.82);opacity:0;filter:grayscale(1)}}
.avatar.faint{animation:faintDrop .6s ease-in forwards}
@keyframes sendIn{from{transform:translateY(26px) scale(.7);opacity:0}
  to{transform:translateY(0) scale(1);opacity:1}}
.avatar.enter{animation:sendIn .45s cubic-bezier(.2,1.5,.4,1)}
@keyframes panelIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.mon.enter{animation:panelIn .4s ease-out}

/* 기술 타입 섬광 */
.zap{position:absolute;inset:0;pointer-events:none;z-index:4;opacity:0}
@keyframes zapFlash{0%{opacity:0}18%{opacity:.5}100%{opacity:0}}
.zap.on{animation:zapFlash .45s ease-out}

/* 데미지 숫자 */
.dmgpop{position:absolute;font-weight:900;font-size:22px;z-index:6;pointer-events:none;
  color:var(--neon-red);text-shadow:0 2px 10px rgba(0,0,0,.8);
  animation:pop 1s cubic-bezier(.2,1,.4,1) forwards}
.dmgpop.heal{color:var(--neon-lime)}
@keyframes pop{0%{opacity:0;transform:translateY(6px) scale(.7)}
  22%{opacity:1;transform:translateY(-14px) scale(1.15)}
  60%{opacity:1;transform:translateY(-24px) scale(1)}
  100%{opacity:0;transform:translateY(-42px) scale(.95)}}

/* HP 바 피격 반짝임 */
@keyframes hpFlash{0%,100%{box-shadow:inset 0 0 0 1px var(--line)}
  40%{box-shadow:inset 0 0 0 1px #fff,0 0 14px rgba(255,255,255,.6)}}
.hpwrap.hurt{animation:hpFlash .4s ease-out}
.log p{animation:logIn .22s ease-out}
@keyframes logIn{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:none}}

/* 날씨 모션 강화 */
.wx.sun::before{content:"";position:absolute;left:50%;top:-58%;width:150%;height:150%;
  transform:translateX(-50%);
  background:conic-gradient(from 0deg,transparent 0 8deg,rgba(255,208,110,.15) 8deg 13deg,
    transparent 13deg 26deg);animation:sunspin 22s linear infinite}
@keyframes sunspin{to{transform:translateX(-50%) rotate(360deg)}}
.wx.rain::after{content:"";position:absolute;left:0;right:0;bottom:0;height:34%;
  background:repeating-linear-gradient(90deg,transparent 0 30px,
    rgba(174,206,255,.16) 30px 33px,transparent 33px 66px);
  animation:splash 1.1s steps(3) infinite}
@keyframes splash{to{opacity:.35}}
.wx.hail::after{content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 30% 20%,rgba(255,255,255,.14),transparent 40%),
             radial-gradient(circle at 72% 60%,rgba(255,255,255,.1),transparent 38%);
  animation:hailglint 2.4s ease-in-out infinite alternate}
@keyframes hailglint{to{opacity:.4}}
.weather{animation:wxIn .5s cubic-bezier(.2,1.4,.4,1)}
@keyframes wxIn{from{opacity:0;transform:translate(-50%,-14px)}to{opacity:1;transform:translate(-50%,0)}}

/* ---------- 랜덤 박스 연출 ---------- */
.boxstage{display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:34px 10px;min-height:280px;position:relative;overflow:hidden}
.bigball{width:96px;height:96px;position:relative;z-index:2}
.bigball .ball{width:96px;height:96px}
.bigball.shake{animation:ballshake .5s ease-in-out 3}
@keyframes ballshake{0%,100%{transform:rotate(0)}25%{transform:rotate(-17deg)}75%{transform:rotate(17deg)}}
.bigball.burst{animation:ballburst .5s ease-out forwards}
@keyframes ballburst{0%{transform:scale(1);opacity:1}
  45%{transform:scale(1.5);opacity:1;filter:brightness(3)}
  100%{transform:scale(2.4);opacity:0}}
.rays{position:absolute;inset:-40%;opacity:0;
  background:conic-gradient(from 0deg,transparent 0 6deg,rgba(255,225,77,.5) 6deg 11deg,
    transparent 11deg 22deg)}
.rays.on{animation:raysIn 1.3s ease-out forwards}
@keyframes raysIn{0%{opacity:0;transform:scale(.4) rotate(0)}
  30%{opacity:.95}100%{opacity:0;transform:scale(1.5) rotate(150deg)}}
.reveal{opacity:0}
.reveal.on{animation:revealIn .6s cubic-bezier(.2,1.5,.4,1) forwards}
@keyframes revealIn{from{opacity:0;transform:scale(.6) translateY(20px)}
  to{opacity:1;transform:none}}
.spark{position:absolute;width:7px;height:7px;border-radius:50%;background:var(--neon-yellow)}
@keyframes sparkOut{to{transform:translate(var(--dx),var(--dy)) scale(0);opacity:0}}

/* 로고를 버튼으로 쓰면서도 헤더 모양은 그대로 유지 */
button.logo{cursor:pointer;text-align:left;padding:0;background:none;border:none;
  font-size:16px;font-weight:800;letter-spacing:-.02em;white-space:nowrap;
  background:linear-gradient(92deg,var(--neon-yellow),var(--neon-red));
  -webkit-background-clip:text;background-clip:text;color:transparent}
button.logo:hover{filter:brightness(1.18)}