@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Rajdhani:wght@400;600;700&family=Inter:wght@400;500;600;700&display=swap');

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  width: 100%; height: 100%;
  overflow: hidden;
  touch-action: none;
  background: #02010a;
  font-family: 'Inter', sans-serif;
  color: #e2d9f3;
  user-select: none;
  -webkit-user-select: none;
}

button { cursor: pointer; border: none; background: transparent; font-family: inherit; }
button:focus { outline: none; }

#game-root {
  position: fixed;
  inset: 0;
  z-index: 0;
}

#scale-root {
  position: absolute;
  width: 1280px;
  height: 720px;
  transform-origin: top left;
  background: #070412;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ── Atmospheric Background ── */
#bg-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 55% 70% at 18% 60%, rgba(88,28,200,.32) 0%, transparent 60%),
    radial-gradient(ellipse 55% 70% at 82% 60%, rgba(160,70,0,.30) 0%, transparent 60%),
    radial-gradient(ellipse 40% 30% at 50% 100%, rgba(60,0,120,.25) 0%, transparent 60%);
}

#bg-glow::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 30% 40% at 22% 85%, rgba(139,92,246,.18) 0%, transparent 55%),
    radial-gradient(ellipse 30% 40% at 78% 85%, rgba(245,120,0,.18) 0%, transparent 55%);
}

#bg-glow::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 220px;
  background: linear-gradient(0deg, rgba(4,2,16,.9) 0%, transparent 100%);
}

/* ── Top Nav ── */
#top-nav {
  height: 46px;
  display: flex;
  align-items: center;
  padding: 0 16px;
  gap: 2px;
  background: linear-gradient(180deg, rgba(8,5,24,.99) 0%, rgba(6,4,18,.98) 100%);
  border-bottom: 1px solid rgba(139,92,246,.28);
  flex-shrink: 0;
  position: relative;
  z-index: 10;
}

.nav-logo {
  display: flex; align-items: center; gap: 7px;
  margin-right: 14px; flex-shrink: 0;
}
.nav-logo-icon {
  width: 30px; height: 30px;
  border-radius: 8px;
  background: linear-gradient(135deg, #7c3aed, #4c1d95);
  border: 1px solid rgba(167,139,250,.5);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 16px rgba(139,92,246,.5), inset 0 1px 0 rgba(255,255,255,.1);
}
.nav-logo-text {
  font-family: 'Orbitron', sans-serif;
  font-weight: 900; font-size: 13px;
  letter-spacing: 2px; color: #e2d9f3;
  line-height: 1;
}
.nav-logo-text span { color: #8b5cf6; }

.nav-item {
  display: flex; align-items: center; gap: 5px;
  padding: 5px 10px;
  border-radius: 6px;
  font-family: 'Rajdhani', sans-serif;
  font-size: 11px; font-weight: 700; letter-spacing: 1px;
  color: rgba(180,170,210,.65);
  border-bottom: 2px solid transparent;
  transition: all .2s;
}
.nav-item:hover { color: rgba(200,185,255,.9); }
.nav-item.active {
  color: #c4b5fd;
  background: rgba(139,92,246,.15);
  border-bottom: 2px solid #8b5cf6;
}

.nav-spacer { flex: 1; }

.nav-currency {
  display: flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 99px;
  font-size: 11px; font-weight: 700;
}
.nav-currency.gold {
  background: rgba(180,120,0,.18);
  border: 1px solid rgba(234,179,8,.35);
  color: #fcd34d;
}
.nav-currency.gem {
  background: rgba(99,102,241,.16);
  border: 1px solid rgba(99,102,241,.35);
  color: #a5b4fc;
}
.currency-dot {
  width: 17px; height: 17px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 8px; font-weight: 900;
}
.currency-dot.gold { background: linear-gradient(135deg,#f59e0b,#b45309); color: #fff; }
.currency-dot.gem  { background: linear-gradient(135deg,#6366f1,#4338ca); color: #c7d2fe; }
.plus-btn {
  width: 15px; height: 15px; border-radius: 50%;
  background: rgba(139,92,246,.45);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; color: #e9d5ff; font-weight: 900;
}

.nav-icon-btn {
  padding: 5px; color: #6b7280;
  font-size: 16px; position: relative; transition: color .2s;
}
.nav-icon-btn:hover { color: #c4b5fd; }
.notif-dot {
  position: absolute; top: 2px; right: 2px;
  width: 7px; height: 7px; background: #ef4444;
  border-radius: 50%; border: 1.5px solid #070412;
}

/* ── Middle Row ── */
#middle-row {
  display: flex; flex: 1; min-height: 0;
  position: relative; z-index: 5;
}

/* ── Sidebars ── */
.sidebar {
  width: 70px; display: flex; flex-direction: column;
  align-items: center; gap: 3px; padding: 8px 0;
  flex-shrink: 0;
}
#left-sidebar {
  background: linear-gradient(180deg, rgba(9,6,26,.97) 0%, rgba(7,4,20,.99) 100%);
  border-right: 1px solid rgba(139,92,246,.2);
}
#right-sidebar {
  background: linear-gradient(180deg, rgba(9,6,26,.97) 0%, rgba(7,4,20,.99) 100%);
  border-left: 1px solid rgba(139,92,246,.2);
}

.sidebar-btn {
  display: flex; flex-direction: column; align-items: center;
  gap: 2px; padding: 6px 3px; border-radius: 8px;
  width: 44px; font-size: 8px; font-weight: 700;
  letter-spacing: .4px; text-align: center; line-height: 1.2;
  transition: all .2s; position: relative;
}
.sidebar-btn.left-btn {
  background: rgba(109,40,217,.1);
  border: 1px solid rgba(109,40,217,.2);
  color: rgba(167,139,250,.85);
}
.sidebar-btn.left-btn:hover {
  background: rgba(109,40,217,.25);
  border-color: rgba(167,139,250,.4);
  color: #c4b5fd;
  box-shadow: 0 0 10px rgba(109,40,217,.3);
}
.sidebar-btn.right-btn {
  background: rgba(180,80,0,.1);
  border: 1px solid rgba(245,158,11,.2);
  color: rgba(253,186,116,.9);
}
.sidebar-btn.right-btn:hover {
  background: rgba(180,80,0,.22);
  border-color: rgba(245,158,11,.4);
  color: #fbbf24;
  box-shadow: 0 0 10px rgba(180,80,0,.3);
}
.sidebar-btn svg { width: 18px; height: 18px; }
.sidebar-badge {
  position: absolute; top: -4px; right: -4px;
  width: 15px; height: 15px; border-radius: 50%;
  background: linear-gradient(135deg,#ef4444,#b91c1c);
  font-size: 8px; font-weight: 900; color: #fff;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid #070412;
  box-shadow: 0 0 6px rgba(239,68,68,.5);
}
.sidebar-timer { font-size: 7px; color: #fb923c; margin-top: 1px; }

/* ── Arena ── */
#arena { flex: 1; display: flex; flex-direction: column; min-width: 0; }

#battle-row { flex: 1; display: flex; min-height: 0; }

/* ── Character Columns ── */
.char-col {
  width: 238px; display: flex; flex-direction: column;
  padding: 8px 8px 4px; gap: 5px; flex-shrink: 0;
}

/* Info Card */
.char-info-card {
  border-radius: 10px; padding: 7px 10px;
  flex-shrink: 0; display: flex; align-items: center; gap: 8px;
}
.char-info-card.hero-card {
  background: linear-gradient(135deg, rgba(55,15,115,.85), rgba(15,8,45,.95));
  border: 1px solid rgba(139,92,246,.5);
  box-shadow: 0 0 18px rgba(109,40,217,.25), inset 0 1px 0 rgba(167,139,250,.1);
}
.char-info-card.boss-card {
  background: linear-gradient(135deg, rgba(80,20,5,.85), rgba(35,8,3,.95));
  border: 1px solid rgba(239,68,68,.45);
  box-shadow: 0 0 18px rgba(185,28,28,.2), inset 0 1px 0 rgba(245,158,11,.08);
  flex-direction: row-reverse;
}

.char-avatar {
  width: 38px; height: 38px; border-radius: 9px;
  overflow: hidden; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.char-avatar.hero {
  border: 2px solid rgba(139,92,246,.65);
  background: linear-gradient(135deg,#5b21b6,#3b0764);
  box-shadow: 0 0 10px rgba(139,92,246,.4);
}
.char-avatar.boss {
  border: 2px solid rgba(245,158,11,.6);
  background: linear-gradient(135deg,#92400e,#78350f);
  box-shadow: 0 0 10px rgba(245,158,11,.35);
}
.char-avatar img { width: 100%; height: 100%; object-fit: cover; object-position: top; transform: scale(1.5); }

.char-meta { flex: 1; min-width: 0; }
.char-meta.right { text-align: right; }
.char-lv-badge {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 1px 6px; border-radius: 4px;
  font-size: 11px; font-weight: 800; letter-spacing: .5px;
}
.char-lv-badge.hero { background: rgba(109,40,217,.65); color: #ddd6fe; border: 1px solid rgba(139,92,246,.35); }
.char-lv-badge.boss { background: rgba(185,28,28,.65); color: #fecaca; border: 1px solid rgba(239,68,68,.35); }
.char-name { color: #f0e6ff; font-weight: 800; font-size: 14px; margin-top: 2px; letter-spacing: .3px; }
.char-name.boss { color: #fff8e1; }
.char-rank { font-weight: 700; font-size: 12px; margin-top: 1px; }
.char-rank.hero { color: #a78bfa; }
.char-rank.boss { color: #f97316; }
.char-rp { display: flex; align-items: center; gap: 3px; margin-top: 3px; }
.char-rp.right { justify-content: flex-end; }
.char-rp span { color: #fcd34d; font-weight: 800; font-size: 12px; }

/* Character Art Wrapper */
.char-art-wrap {
  flex: 1; position: relative; overflow: hidden; min-height: 0;
  background: linear-gradient(180deg, rgba(8,5,20,.4) 0%, rgba(4,2,12,.6) 100%);
}

/* Stat Cards */
.stat-card {
  border-radius: 8px; padding: 6px 9px;
  flex-shrink: 0;
  background: rgba(6,4,18,.95);
}
.stat-card.hp  { border: 1px solid rgba(239,68,68,.3); }
.stat-card.nrg { border: 1px solid rgba(245,158,11,.25); }

.stat-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 5px;
}
.stat-header-inner {
  display: flex; align-items: center; gap: 4px;
}
.stat-label { font-weight: 700; font-size: 13px; letter-spacing: .5px; }
.stat-label.hp  { color: #fca5a5; }
.stat-label.nrg { color: #fde68a; }
.stat-val { color: #fff; font-weight: 700; font-size: 13px; }

.bar-track {
  height: 10px; background: rgba(255,255,255,.05);
  border-radius: 999px; overflow: hidden;
  border: 1px solid rgba(255,255,255,.04);
}
.bar-fill {
  height: 100%; border-radius: 999px; transition: width .5s;
}
.bar-fill.hp {
  background: linear-gradient(90deg, #b91c1c, #ef4444, #f87171);
  box-shadow: 0 0 8px rgba(239,68,68,.65);
}

.energy-dots { display: flex; gap: 2px; }
.energy-dot {
  flex: 1; height: 8px; border-radius: 2px;
  background: rgba(255,255,255,.07);
}
.energy-dot.on {
  background: linear-gradient(180deg, #fde047, #ca8a04);
  box-shadow: 0 0 5px rgba(234,179,8,.75);
}

/* ── Center Column ── */
#center-col {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; padding: 5px 10px; gap: 5px; min-width: 0;
}

/* Round + Timer */
#round-badge {
  background: rgba(16,8,50,.98);
  border: 1px solid rgba(139,92,246,.35);
  border-radius: 6px; padding: 2px 14px;
  font-size: 12px; font-weight: 800; color: #c4b5fd; letter-spacing: 2px;
}
#timer {
  font-family: 'Orbitron', monospace;
  font-size: 42px; font-weight: 900; color: #f0e9ff;
  letter-spacing: 5px; line-height: 1.05;
  text-shadow: 0 0 24px rgba(139,92,246,.6), 0 0 8px rgba(167,139,250,.3);
  margin-top: 1px;
}

@keyframes vsPulse {
  0%, 100% { filter: drop-shadow(0 0 35px rgba(245,158,11,.85)) drop-shadow(0 0 12px rgba(239,68,68,.6)); transform: translate(-50%,-50%) skewX(-8deg) scale(1); }
  50%       { filter: drop-shadow(0 0 55px rgba(245,158,11,1)) drop-shadow(0 0 20px rgba(239,68,68,.9)); transform: translate(-50%,-50%) skewX(-8deg) scale(1.07); }
}
#battle-arena { flex: 1; position: relative; overflow: hidden; min-width: 0; min-height: 0; }

/* Market Box */
#market-box {
  width: 100%;
  background: transparent;
  border: none;
  border-radius: 10px; padding: 7px 12px;
  text-align: center; flex-shrink: 0;
}
.market-label {
  font-size: 11px; font-weight: 800;
  color: #7c3aed; letter-spacing: 2px;
}
.market-pair {
  font-size: 13px; color: #a78bfa; font-weight: 700; margin-top: 1px;
}
#market-price {
  font-family: 'Orbitron', monospace;
  font-size: 30px; font-weight: 900; color: #4ade80;
  text-shadow: 0 0 16px rgba(74,222,128,.6);
  letter-spacing: -0.5px; margin-top: 2px; transition: color .3s;
}
#market-pct { font-size: 13px; font-weight: 800; margin-top: 1px; }
#market-pct.up   { color: #4ade80; }
#market-pct.down { color: #f87171; }

.market-stats {
  display: flex; justify-content: space-between;
  margin-top: 4px; font-size: 11px; color: #6b7280;
}
.market-stats span { font-weight: 700; }
.market-stats span.high { color: #4ade80; }
.market-stats span.low  { color: #f87171; }

/* Action Buttons */
#action-btns {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  gap: 7px; width: 100%; flex-shrink: 0;
}
.action-btn {
  border-radius: 10px; padding: 9px 4px;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  transition: transform .12s, box-shadow .12s;
  position: relative; overflow: hidden;
}
.action-btn::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.06) 0%, transparent 50%);
  pointer-events: none;
}
.action-btn:hover  { transform: scale(1.05); }
.action-btn:active { transform: scale(.96); }
.action-btn svg { width: 17px; height: 17px; }
.action-btn-label {
  font-family: 'Orbitron', sans-serif;
  font-size: 14px; font-weight: 900; letter-spacing: 1px;
}
.action-btn-sub { font-size: 10px; font-weight: 700; opacity: .75; }

#btn-buy  { background: linear-gradient(180deg,rgba(16,55,25,.98),rgba(10,35,15,.99)); border: 2px solid #16a34a; box-shadow: 0 0 18px rgba(34,197,94,.4); }
#btn-hold { background: linear-gradient(180deg,rgba(15,15,65,.98),rgba(8,8,45,.99));   border: 2px solid #4338ca; box-shadow: 0 0 18px rgba(99,102,241,.4); }
#btn-sell { background: linear-gradient(180deg,rgba(60,10,10,.98),rgba(40,5,5,.99));   border: 2px solid #dc2626; box-shadow: 0 0 18px rgba(239,68,68,.4); }
#btn-buy  .action-btn-label, #btn-buy  .action-btn-sub, #btn-buy  svg { color: #22c55e; }
#btn-hold .action-btn-label, #btn-hold .action-btn-sub, #btn-hold svg { color: #818cf8; }
#btn-sell .action-btn-label, #btn-sell .action-btn-sub, #btn-sell svg { color: #f87171; }
#btn-buy:hover  { box-shadow: 0 0 28px rgba(34,197,94,.7); }
#btn-hold:hover { box-shadow: 0 0 28px rgba(99,102,241,.7); }
#btn-sell:hover { box-shadow: 0 0 28px rgba(239,68,68,.7); }

/* Battle Log */
#battle-log {
  width: 100%; flex: 1; min-height: 0;
  background: rgba(6,4,18,.97);
  border: 1px solid rgba(139,92,246,.22);
  border-radius: 10px; display: flex; flex-direction: column; overflow: hidden;
}
#log-tabs {
  display: flex; border-bottom: 1px solid rgba(139,92,246,.18); flex-shrink: 0;
}
.log-tab {
  flex: 1; padding: 6px 0; font-size: 12px; font-weight: 800;
  font-family: 'Rajdhani', sans-serif; letter-spacing: 1px;
  color: #4b5563; border-bottom: 2px solid transparent; transition: all .2s;
}
.log-tab.active {
  color: #c4b5fd; background: rgba(139,92,246,.12);
  border-bottom: 2px solid #8b5cf6;
}
#log-entries {
  flex: 1; overflow-y: auto; padding: 5px 10px;
  display: flex; flex-direction: column; gap: 3px;
  scrollbar-width: thin; scrollbar-color: rgba(139,92,246,.3) transparent;
}
.log-entry {
  display: flex; align-items: flex-start; gap: 6px;
  padding-bottom: 3px; border-bottom: 1px solid rgba(139,92,246,.06);
}
.log-time { font-family: monospace; font-size: 11px; color: #374151; flex-shrink: 0; }
.log-icon { width: 11px; height: 11px; flex-shrink: 0; margin-top: 1px; }
.log-msg  { font-size: 12px; }
.log-entry.good .log-msg { color: #86efac; }
.log-entry.bad  .log-msg { color: #fca5a5; }
.log-entry.fire .log-msg { color: #fdba74; }

/* ── Bottom Row ── */
#bottom-row {
  height: 190px;
  display: flex; align-items: stretch;
  padding: 6px 8px 8px; gap: 8px;
  border-top: 1px solid rgba(139,92,246,.16);
  flex-shrink: 0;
}

.bottom-panel {
  flex: 1;
  background: rgba(7,5,22,.98);
  border: 1px solid rgba(139,92,246,.28);
  border-radius: 10px;
  padding: 8px 12px;
  display: flex; flex-direction: column; gap: 5px;
  box-shadow: inset 0 1px 0 rgba(139,92,246,.06);
}
.panel-header {
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid rgba(139,92,246,.16);
  padding-bottom: 5px; flex-shrink: 0;
}
.panel-title {
  display: flex; align-items: center; gap: 5px;
  font-weight: 800; font-size: 13px; color: #c4b5fd; letter-spacing: .5px;
}
.panel-title svg { width: 13px; height: 13px; color: #8b5cf6; }
.panel-timer {
  display: flex; align-items: center; gap: 3px;
  font-size: 12px; font-weight: 700; color: #fbbf24;
}

/* Quest items */
#quest-items { display: flex; gap: 8px; flex: 1; }
.quest-item { flex: 1; }
.quest-top {
  display: flex; justify-content: space-between; align-items: center; margin-bottom: 3px;
}
.quest-icon { font-size: 15px; margin-right: 2px; }
.quest-name { font-size: 12px; color: #d1d5db; }
.quest-xp   { font-size: 11px; color: #a78bfa; font-weight: 800; }
.quest-bar  { height: 5px; background: rgba(255,255,255,.06); border-radius: 99px; overflow: hidden; }
.quest-fill { height: 100%; background: linear-gradient(90deg,#6d28d9,#a78bfa); border-radius: 99px; }
.quest-prog { font-size: 11px; color: #4b5563; text-align: right; margin-top: 2px; }

.weekly-strip {
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(180,120,0,.1);
  border: 1px solid rgba(202,138,4,.2);
  border-radius: 6px; padding: 3px 8px; flex-shrink: 0;
}
.weekly-label {
  display: flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 800; color: #fbbf24;
}
.weekly-dots { display: flex; align-items: center; gap: 2px; }
.weekly-dot  { width: 10px; height: 4px; border-radius: 99px; }
.weekly-dot.on  { background: linear-gradient(90deg,#facc15,#ca8a04); box-shadow: 0 0 4px rgba(250,204,21,.5); }
.weekly-dot.off { background: rgba(31,41,55,.8); }
.weekly-count { font-size: 11px; color: #6b7280; margin-left: 3px; }

/* Season Panel */
.season-meta { display: flex; align-items: center; gap: 12px; flex: 1; }
.season-rank-icon {
  width: 54px; height: 54px; position: relative; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.season-info { flex: 1; }
.season-tier  { color: #c4b5fd; font-weight: 800; font-size: 13px; letter-spacing: .3px; }
.season-rp-row { display: flex; justify-content: space-between; margin-top: 2px; align-items: baseline; }
.season-rp  { color: #fff; font-weight: 900; font-size: 17px; font-family: 'Orbitron', monospace; }
.season-rp .unit { font-size: 11px; color: #6b7280; font-family: 'Inter', sans-serif; margin-left: 2px; }
.season-max { font-size: 11px; color: #6b7280; align-self: flex-end; }
.season-bar { height: 6px; background: rgba(255,255,255,.06); border-radius: 99px; overflow: hidden; margin-top: 5px; }
.season-bar-fill {
  height: 100%;
  background: linear-gradient(90deg,#5b21b6,#8b5cf6,#a78bfa);
  box-shadow: 0 0 8px rgba(139,92,246,.65);
  border-radius: 99px;
}
.season-badge {
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: 5px;
  background: rgba(180,120,0,.15);
  border: 1px solid rgba(202,138,4,.28);
  border-radius: 5px; padding: 2px 7px;
}
.season-badge span { font-size: 12px; font-weight: 800; color: #fcd34d; }

/* ── Bottom Nav (Marquee) ── */
#bottom-nav {
  height: 38px; overflow: hidden; flex-shrink: 0; position: relative; z-index: 10;
}

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(139,92,246,.35); border-radius: 99px; }

/* ── Price Animation ── */
@keyframes priceFlash {
  0%   { opacity: .6; transform: scale(.97); }
  50%  { opacity: 1;  transform: scale(1.02); }
  100% { opacity: 1;  transform: scale(1); }
}
.price-update { animation: priceFlash .35s ease-out; }

/* ── Particle sparks for VS ── */
@keyframes sparkFloat {
  0%   { transform: translateY(0) scale(1); opacity: .9; }
  100% { transform: translateY(-40px) scale(.3); opacity: 0; }
}