/* ============ Kingshot Whale Simulator ============ */
* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
html,body { height:100%; }
body {
  font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background:#0b0e14;
  color:#e8dfc8;
  display:flex; justify-content:center;
  user-select:none;
  overflow:hidden;
}
#app {
  width:100%; max-width:440px; height:100dvh;
  display:flex; flex-direction:column;
  background:
    radial-gradient(1200px 500px at 50% -10%, #2a3550 0%, transparent 60%),
    linear-gradient(180deg,#141a28 0%,#0d1119 100%);
  position:relative;
  box-shadow:0 0 60px #000;
}

/* ============ TOP BAR (floating navy pills, Kingshot style) ============ */
#topbar {
  padding:8px 8px 6px;
  background:linear-gradient(180deg,#1b2438 0%,#161d2e 100%);
  border-bottom:2px solid #0d1220;
  z-index:5;
}
.tb-row { display:flex; align-items:center; gap:6px; }
.tb-row.row2 { margin-top:5px; }
.avatar-wrap { flex:0 0 auto; }
.avatar {
  width:46px; height:46px; border-radius:10px;
  background:radial-gradient(circle at 35% 30%, #4a5a7a, #232c42);
  border:2px solid #e8c464;
  display:flex; align-items:center; justify-content:center;
  font-size:26px;
  box-shadow:0 2px 6px rgba(0,0,0,.5), inset 0 0 6px rgba(0,0,0,.4);
}
.hp-bar {
  height:6px; margin-top:2px; border-radius:4px;
  background:#0d1220; border:1px solid #000; overflow:hidden;
}
.hp-fill {
  height:100%; width:0%;
  background:linear-gradient(180deg,#8fe05a,#4ca82e);
  border-radius:4px; transition:width .4s;
}
.gov-block { min-width:0; margin-right:auto; }
.gov-name { font-weight:800; font-size:13px; color:#fff; text-shadow:0 1px 2px #000; }
.gov-title { font-size:10px; color:#ffd76a; font-weight:700; }
.tb-pills { display:flex; align-items:center; gap:6px; }
.pill {
  display:flex; align-items:center; gap:4px;
  background:rgba(13,20,38,.85); border:1px solid #0a0f1c;
  border-radius:16px; padding:3px 10px;
  font-size:11.5px; font-weight:800; color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 1px 3px rgba(0,0,0,.4);
  white-space:nowrap;
}
.power-pill { color:#fff; font-size:12.5px; }
.vip-pill {
  background:linear-gradient(180deg,#ffd76a,#d69420);
  border:1px solid #8a5c0a; color:#4a2f04;
  text-shadow:0 1px 0 rgba(255,255,255,.35);
}
.spent-pill { color:#7ee787; }
.cart-btn {
  display:flex; flex-direction:column; align-items:center;
  background:linear-gradient(180deg,#ffd76a 0%,#e8a83a 60%,#c9861e 100%);
  border:1.5px solid #8a5c0a; border-radius:10px;
  padding:2px 8px; cursor:pointer; font-family:inherit;
  box-shadow:0 2px 0 #7a5410, inset 0 1px 0 #fff3c9;
  transition:transform .06s;
}
.cart-btn:active { transform:translateY(1px); }
.cart-ic { font-size:16px; line-height:1; }
.cart-gems {
  font-size:9.5px; font-weight:900; color:#3a2404;
  background:rgba(0,0,0,.15); border-radius:6px; padding:0 4px; margin-top:1px;
}

/* ============ RESOURCE BAR ============ */
#resbar {
  display:flex; justify-content:space-around;
  padding:4px 6px;
  background:rgba(0,0,0,.35);
  border-bottom:1px solid #2a2f40;
  z-index:4;
}
.res { font-size:10px; font-weight:700; color:#d8cfa8; display:flex; align-items:center; gap:3px; }

/* ============ PANELS ============ */
#panels { flex:1; overflow:hidden; position:relative; }
.panel {
  position:absolute; inset:0; overflow-y:auto; overflow-x:hidden;
  padding:10px 10px 20px; display:none;
  scrollbar-width:thin;
}
.panel.active { display:block; }

/* ============ BOTTOM NAV (cream parchment, Kingshot style) ============ */
#bottomnav {
  display:flex; align-items:stretch;
  background:linear-gradient(180deg,#f6ecd2 0%,#e6d6b0 55%,#d8c496 100%);
  border-top:2px solid #b09b6e;
  box-shadow:0 -2px 8px rgba(0,0,0,.35);
  z-index:5;
}
.nav-btn {
  flex:1; background:none; border:none; color:#6a5636;
  font-size:10.5px; font-weight:800; padding:6px 0 8px;
  display:flex; flex-direction:column; align-items:center; gap:1px;
  cursor:pointer; position:relative; font-family:inherit;
  border-right:1px solid #c9b488;
}
.nav-btn:last-child { border-right:none; }
.nav-btn .nav-ic {
  font-size:22px; transition:.15s;
  filter:grayscale(.9) sepia(.4) brightness(.75);
}
.nav-btn.active { color:#2e2008; }
.nav-btn.active .nav-ic { filter:none; transform:translateY(-3px) scale(1.18); }
.nav-btn.active::after {
  content:""; position:absolute; inset:2px 3px;
  background:rgba(255,248,225,.55); border:1px solid #b09b6e;
  border-radius:8px; z-index:-1;
}
.nav-dot {
  position:absolute; top:3px; right:calc(50% - 17px);
  width:9px; height:9px; border-radius:50%;
  background:#ff4d4d; border:1.5px solid #fff;
  animation:pulse 1.4s infinite;
}
.nav-badge {
  position:absolute; top:1px; right:calc(50% - 24px);
  background:#ff4d4d; border:1.5px solid #fff; border-radius:8px;
  color:#fff; font-size:8.5px; font-weight:900; padding:0 4px;
}
@keyframes pulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.35)} }

/* ============ CHAT TICKER ============ */
#chat-ticker {
  background:rgba(235,240,245,.13);
  border-top:1px solid rgba(255,255,255,.08);
  padding:3px 10px; z-index:4;
}
.chat-line {
  font-size:10px; font-weight:600; color:#e6ecf4;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  line-height:1.5; text-shadow:0 1px 2px rgba(0,0,0,.6);
}
.chat-line b { color:#7ee787; }

/* ============ SIDE BUTTONS ============ */
#side-btns {
  position:absolute; right:6px; top:12px; z-index:6;
  display:flex; flex-direction:column; gap:10px; align-items:center;
}
.side-btn {
  width:52px; border:none; background:none; cursor:pointer;
  display:flex; flex-direction:column; align-items:center;
  font-family:inherit; position:relative;
  transition:transform .08s;
}
.side-btn:active { transform:scale(.9); }
.side-btn .sb-ic {
  width:44px; height:44px; border-radius:12px;
  background:radial-gradient(circle at 35% 28%, #4a5a7a, #232c42);
  border:2px solid #e8c464;
  display:flex; align-items:center; justify-content:center;
  font-size:22px;
  box-shadow:0 3px 6px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.15);
}
.side-btn .sb-label {
  font-size:9px; font-weight:900; color:#fff;
  text-shadow:0 1px 2px #000, 0 0 4px #000; margin-top:1px;
}
.side-btn .nav-dot { top:-2px; right:2px; }
.sb-badge {
  position:absolute; top:-4px; right:0;
  background:#ff4d4d; border:1.5px solid #fff; border-radius:9px;
  color:#fff; font-size:9px; font-weight:900; padding:0 5px;
}

/* ============ QUEST BANNER ============ */
#quest-banner {
  position:absolute; left:6px; bottom:10px; z-index:6;
  max-width:70%;
  background:linear-gradient(180deg,#f0e3c2,#d8c496);
  border:2px solid #a08850; border-radius:10px;
  font-family:inherit; font-size:10px; font-weight:800; color:#4a3a1c;
  padding:6px 10px; cursor:pointer; text-align:left;
  box-shadow:0 3px 8px rgba(0,0,0,.45);
}
#quest-banner:active { transform:scale(.97); }

/* ============ GENERIC CARDS ============ */
.section-head {
  display:flex; align-items:center; gap:8px;
  margin:12px 2px 8px; font-size:13px; font-weight:800;
  color:#f0d792; text-transform:uppercase; letter-spacing:.5px;
}
.section-head::after { content:""; flex:1; height:1px; background:linear-gradient(90deg,#c9a24b66,transparent); }
.card {
  background:linear-gradient(180deg,#242c40,#1a2030);
  border:1px solid #3d4356; border-radius:12px;
  padding:10px; margin-bottom:8px;
  box-shadow:0 2px 8px rgba(0,0,0,.35);
}

/* ============ SHOP ============ */
.spent-banner {
  text-align:center; padding:10px 8px 8px;
  background:linear-gradient(180deg,#1d2c1f,#14201a);
  border:1px solid #2f5a3a; border-radius:12px; margin-bottom:10px;
}
.spent-banner .amount { font-size:26px; font-weight:900; color:#7ee787; text-shadow:0 0 14px #2e9e4f66; }
.spent-banner .label { font-size:10px; color:#89a893; font-weight:700; letter-spacing:1px; text-transform:uppercase; }
.spent-banner .flavor { font-size:11px; color:#c9c19b; margin-top:4px; font-style:italic; min-height:14px; }

.deal-timer {
  text-align:center; font-size:11px; color:#ff9d5c; font-weight:700; margin:2px 0 8px;
}
.pack {
  position:relative; overflow:hidden;
  border-radius:14px; margin-bottom:10px;
  border:2px solid var(--pc,#c9a24b);
  background:
    radial-gradient(500px 160px at 20% -30%, var(--pg,#4a3b16) 0%, transparent 70%),
    linear-gradient(160deg,#232c44 0%,#171d2c 100%);
  box-shadow:0 3px 10px rgba(0,0,0,.45);
}
.pack-ribbon {
  position:absolute; top:12px; right:-34px; transform:rotate(38deg);
  background:linear-gradient(180deg,#ff6161,#c22525);
  color:#fff; font-size:9px; font-weight:900; letter-spacing:.5px;
  padding:3px 36px; text-transform:uppercase;
  box-shadow:0 2px 4px rgba(0,0,0,.4);
}
.pack-head { display:flex; align-items:center; gap:8px; padding:10px 12px 4px; }
.pack-art { font-size:30px; filter:drop-shadow(0 2px 4px #000); }
.pack-name { font-size:14.5px; font-weight:800; color:#ffe9b0; }
.pack-tag { font-size:10px; color:#a9b2c8; }
.pack-value {
  display:inline-block; margin:2px 12px 0;
  background:linear-gradient(180deg,#43d16b,#1f8c3f);
  color:#fff; font-size:10px; font-weight:900;
  padding:2px 8px; border-radius:9px;
  border:1px solid #0f5c26;
}
.pack-items {
  display:flex; flex-wrap:wrap; gap:5px; padding:8px 12px 6px;
}
.pitem {
  background:rgba(0,0,0,.4); border:1px solid #444d66;
  border-radius:8px; padding:3px 7px;
  font-size:10.5px; font-weight:700; color:#dcd4b6;
  display:flex; align-items:center; gap:3px;
}
.pack-foot { display:flex; align-items:center; gap:8px; padding:4px 12px 12px; }
.buy-btn {
  flex:1; border:none; cursor:pointer; font-family:inherit;
  background:linear-gradient(180deg,#57d873 0%,#23a244 55%,#1b8236 100%);
  border:1px solid #0e5c22; border-radius:10px;
  color:#fff; font-size:15px; font-weight:900;
  padding:9px 0; text-shadow:0 1px 2px rgba(0,0,0,.4);
  box-shadow:0 3px 0 #0d4d1e, inset 0 1px 0 #9dffb4;
  transition:transform .06s;
}
.buy-btn:active { transform:translateY(2px); box-shadow:0 1px 0 #0d4d1e; }
.buy-x10 {
  flex:0 0 88px;
  background:linear-gradient(180deg,#ffd76a,#d69420);
  border:1px solid #8a5c0a; border-radius:10px;
  color:#3a2404; font-size:12px; font-weight:900;
  padding:9px 0; cursor:pointer; font-family:inherit;
  box-shadow:0 3px 0 #7a5410, inset 0 1px 0 #fff3c9;
  transition:transform .06s;
}
.buy-x10:active { transform:translateY(2px); box-shadow:0 1px 0 #7a5410; }
.first-bonus {
  display:inline-block; margin-left:12px; margin-top:4px;
  color:#ff9d5c; font-size:10px; font-weight:900;
  animation:pulse 1.2s infinite;
}
.bought-count { font-size:10px; color:#8b93a8; font-weight:700; }

.cd-note {
  display:inline-block; margin-left:10px; margin-top:4px;
  color:#8b93a8; font-size:9.5px; font-weight:800;
}
.buy-btn.cooling {
  background:linear-gradient(180deg,#4a5468,#2c3242);
  border-color:#1c2130; box-shadow:0 3px 0 #171c28;
  color:#9aa3b8; cursor:not-allowed;
}

/* ============ ITEM TILES (rarity-framed, mobile-game style) ============ */
.tile {
  position:relative; width:44px; height:44px; flex:0 0 44px;
  border-radius:9px; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  border:1.5px solid var(--tc,#6a7288);
  background:
    radial-gradient(circle at 50% 28%, var(--tg,#3a4258) 0%, var(--tb,#20263a) 75%);
  box-shadow:0 2px 4px rgba(0,0,0,.5), inset 0 0 8px var(--tg,#3a4258);
}
.tile.big { width:56px; height:56px; flex:0 0 56px; }
.tile .tile-ic { font-size:22px; filter:drop-shadow(0 1px 2px rgba(0,0,0,.6)); z-index:1; display:flex; align-items:center; justify-content:center; }
.tile.big .tile-ic { font-size:28px; }
.tile-img { width:34px; height:34px; object-fit:contain; }
.tile.big .tile-img { width:44px; height:44px; }
.tile .tile-shine {
  position:absolute; inset:0;
  background:linear-gradient(160deg, rgba(255,255,255,.22) 0%, transparent 38%);
}
.tile .tile-q {
  position:absolute; bottom:0; right:0; left:0; z-index:2;
  background:rgba(0,0,0,.68);
  color:#fff; font-size:8.5px; font-weight:900; text-align:right;
  padding:1px 3px; line-height:1.1;
}
.tile.r-common   { --tc:#8b93a8; --tg:#4a5266; --tb:#252b3a; }
.tile.r-uncommon { --tc:#5abf4c; --tg:#2f5a2a; --tb:#1a2e1a; }
.tile.r-rare     { --tc:#42a5f5; --tg:#1f4a74; --tb:#122238; }
.tile.r-epic     { --tc:#ab47bc; --tg:#4e2358; --tb:#241028; }
.tile.r-mythic   { --tc:#ffd76a; --tg:#6a4d14; --tb:#302208; }
.tile.r-mythic { box-shadow:0 2px 4px rgba(0,0,0,.5), 0 0 8px #ffd76a44, inset 0 0 8px #6a4d14; }
.tile-wrap { text-align:center; width:60px; animation:popin .3s backwards; }
.tile-wrap .tile { margin:0 auto; }
.tile-name { font-size:8.5px; color:#c8c0a0; font-weight:700; margin-top:2px; line-height:1.15; }
.inv-strip {
  display:flex; gap:6px; overflow-x:auto; padding:4px 2px 6px;
  scrollbar-width:none;
}
.inv-strip.wrap { flex-wrap:wrap; overflow:visible; }

/* Mystery shop */
.mshop-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; }
.mshop-item {
  background:linear-gradient(180deg,#252e46,#1a2133);
  border:1px solid #3d4356; border-radius:10px;
  padding:8px 4px 6px; text-align:center; cursor:pointer;
  transition:transform .08s;
  display:flex; flex-direction:column; align-items:center;
}
.mshop-item:active { transform:scale(.94); }
.mshop-item .mi-name { font-size:9.5px; font-weight:700; color:#d8cfa8; margin:3px 0; line-height:1.15; }
.mshop-item .mi-cost {
  background:rgba(0,0,0,.45); border-radius:8px;
  font-size:10px; font-weight:800; color:#7fd4ff;
  padding:2px 8px;
}

/* ============ HEROES ============ */
.gacha-card {
  background:
    radial-gradient(400px 140px at 50% -40%, #5a3b8a55, transparent 70%),
    linear-gradient(160deg,#2c2440,#1a1830);
  border:2px solid #8a63c9; border-radius:14px;
  padding:12px; margin-bottom:10px; text-align:center;
}
.gacha-title { font-size:15px; font-weight:900; color:#d8b8ff; }
.gacha-keys { font-size:11px; color:#b5a8d8; margin:4px 0 8px; font-weight:700; }
.gacha-btns { display:flex; gap:8px; }
.gacha-btn {
  flex:1; border:none; cursor:pointer; font-family:inherit;
  border-radius:10px; padding:9px 0; font-size:12.5px; font-weight:900;
  transition:transform .06s;
}
.gacha-btn:active { transform:translateY(2px); }
.gacha-gold { background:linear-gradient(180deg,#ffd76a,#d69420); color:#3a2404; border:1px solid #8a5c0a; box-shadow:0 3px 0 #7a5410; }
.gacha-plat { background:linear-gradient(180deg,#c8e8ff,#7ba8d4); color:#122a44; border:1px solid #3a5a80; box-shadow:0 3px 0 #2e4a6a; }
.gacha-btn:disabled { filter:grayscale(1) brightness(.6); cursor:not-allowed; }

.hero-card { display:flex; gap:10px; align-items:center; }
.hero-portrait {
  width:56px; height:56px; flex:0 0 56px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  font-size:30px; position:relative;
  background:radial-gradient(circle at 35% 30%, #4a5a7a, #20283c);
  border:2px solid var(--hc,#c9a24b);
  box-shadow:0 0 10px var(--hc,#c9a24b)33;
}
.hero-portrait.locked { filter:grayscale(1) brightness(.55); }
.hp-img {
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; border-radius:8px;
}
.hero-gen {
  position:absolute; top:-6px; left:-6px;
  background:#1a2133; border:1px solid var(--hc,#c9a24b);
  color:var(--hc,#c9a24b); font-size:8.5px; font-weight:900;
  padding:1px 4px; border-radius:6px; z-index:2;
}
.hero-portrait .hero-cls, .hero-portrait .hero-lvl { z-index:2; }
.hero-mid { flex:1; min-width:0; }
.hero-name { font-size:13.5px; font-weight:800; color:#f4ead0; display:flex; gap:6px; align-items:center; }
.hero-class { font-size:9.5px; color:#a9b2c8; font-weight:700; }
.hero-stars { font-size:11px; letter-spacing:1px; margin:1px 0; }
.hero-stars .on { color:#ffd76a; } .hero-stars .off { color:#3d4356; }
.hero-sub { font-size:10px; color:#9aa3b8; font-weight:600; }
.hero-cls {
  position:absolute; top:-6px; right:-6px;
  background:#1a2133; border:1px solid #5a6a80;
  font-size:9px; padding:1px 3px; border-radius:6px;
}
.hero-lvl {
  position:absolute; bottom:-6px; left:50%; transform:translateX(-50%);
  background:linear-gradient(180deg,#42a5f5,#1a5aa4);
  color:#fff; font-size:8px; font-weight:900;
  padding:1px 5px; border-radius:6px; border:1px solid #12406e;
  white-space:nowrap;
}
.hero-skills { display:flex; align-items:center; gap:4px; margin-top:2px; flex-wrap:wrap; }
.skill-pip {
  font-size:10px; background:rgba(0,0,0,.4); border:1px solid #3d4356;
  border-radius:6px; padding:1px 4px; filter:grayscale(1) brightness(.7);
}
.skill-pip.on { filter:none; border-color:#8a63c9; }
.skill-pip i { font-style:normal; font-size:8px; font-weight:900; color:#d8b8ff; margin-left:1px; }
.excl-gear { font-size:9px; color:#6ab8ff; font-weight:800; }
.mini-btn.purple { background:linear-gradient(180deg,#b88ae0,#7a3fa8); color:#fff; border-color:#54246e; box-shadow:0 2px 0 #451e5c; }
.hero-actions { display:flex; flex-direction:column; gap:5px; }
.mini-btn {
  border:none; cursor:pointer; font-family:inherit;
  background:linear-gradient(180deg,#57d873,#1b8236);
  border:1px solid #0e5c22; border-radius:8px;
  color:#fff; font-size:10.5px; font-weight:900; padding:6px 10px;
  box-shadow:0 2px 0 #0d4d1e; white-space:nowrap;
  transition:transform .06s;
}
.mini-btn:active { transform:translateY(1px); }
.mini-btn.gold { background:linear-gradient(180deg,#ffd76a,#d69420); color:#3a2404; border-color:#8a5c0a; box-shadow:0 2px 0 #7a5410; }
.mini-btn.blue { background:linear-gradient(180deg,#6ab8ff,#2a6ed4); color:#fff; border-color:#1a4a94; box-shadow:0 2px 0 #163e7c; }
.mini-btn:disabled { filter:grayscale(1) brightness(.55); cursor:not-allowed; }
.maxed-chip {
  font-size:10px; font-weight:900; color:#ffd76a;
  border:1px solid #c9a24b; border-radius:8px; padding:5px 10px;
  background:rgba(201,162,75,.12); text-align:center;
}

/* ============ GEAR ============ */
.gear-card { display:flex; gap:10px; align-items:center; }
.gear-icon {
  width:52px; height:52px; flex:0 0 52px; border-radius:10px;
  display:flex; align-items:center; justify-content:center; font-size:26px;
  background:radial-gradient(circle at 35% 30%, #333d58, #1a2133);
  border:2px solid var(--gc,#5a9e4c);
  box-shadow:0 0 12px var(--gc,#5a9e4c)44;
}
.gear-tier { font-size:10.5px; font-weight:900; color:var(--gc,#5a9e4c); }
.gear-cost { display:flex; flex-wrap:wrap; gap:4px 8px; font-size:10px; color:#9aa3b8; font-weight:700; margin-top:2px; }
.gear-cost .lack { color:#ff6b6b; }
.charm-grid { display:flex; gap:4px; margin:4px 0; }
.charm-slot {
  width:26px; height:26px; border-radius:6px;
  background:radial-gradient(circle at 35% 30%, #3a3050, #201a30);
  border:1px solid #7a63b8;
  display:flex; align-items:center; justify-content:center;
  font-size:13px; position:relative;
}
.charm-slot .clv {
  position:absolute; bottom:-5px; right:-4px;
  background:#7a63b8; color:#fff; font-size:7.5px; font-weight:900;
  border-radius:5px; padding:0 3px;
}
.setbonus { font-size:10px; color:#7ee787; font-weight:700; margin:4px 2px; }

/* ============ CITY MAP ============ */
.city-map {
  position:relative; height:320px; border-radius:14px; overflow:hidden;
  border:2px solid #3a2f18; margin-bottom:10px;
  background:
    radial-gradient(500px 200px at 50% 40%, #3a5a34 0%, #2c4628 45%, #223a20 100%);
  box-shadow:inset 0 0 40px rgba(0,0,0,.55), 0 3px 10px rgba(0,0,0,.4);
}
.city-map::before { /* dirt paths */
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(90deg, transparent 47.5%, #6a5636cc 48.5%, #7a6540cc 50%, #6a5636cc 51.5%, transparent 52.5%),
    linear-gradient(0deg, transparent 44%, #6a5636aa 46%, #7a6540aa 48%, #6a5636aa 50%, transparent 52%);
  opacity:.5;
}
.city-wall {
  position:absolute; inset:7%; border-radius:18px;
  border:3px dashed #8a744655; pointer-events:none;
}
.deco { position:absolute; transform:translate(-50%,-50%); font-size:14px; opacity:.75; pointer-events:none; }
.bld {
  position:absolute; transform:translate(-50%,-50%);
  display:flex; flex-direction:column; align-items:center;
  cursor:pointer; z-index:2; transition:transform .1s;
}
.bld:active { transform:translate(-50%,-50%) scale(.92); }
.bld-ic {
  font-size:30px; filter:drop-shadow(0 3px 4px rgba(0,0,0,.65));
}
.bld-plate {
  margin-top:-2px;
  background:linear-gradient(180deg,#3a3020,#241d10);
  border:1px solid #8a7446; border-radius:6px;
  font-size:7.5px; font-weight:800; color:#e8dfc8;
  padding:1px 5px; text-align:center; line-height:1.2;
  white-space:nowrap;
}
.bld-plate b { display:block; color:#ffd76a; font-size:8px; }
.bld-tc { z-index:3; }
.bld-tc .bld-ic { font-size:52px; }
.bld-tc .tc-plate { border-color:#c9a24b; font-size:8.5px; box-shadow:0 0 10px #c9a24b55; }
.bld-tc.can-up .bld-ic { animation:bounce 1.2s infinite; }
@keyframes bounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-5px)} }
.up-arrow {
  position:absolute; top:-20px; font-size:16px;
  animation:bounce 1s infinite;
}

/* ============ CITY ============ */
.tc-card {
  text-align:center;
  background:
    radial-gradient(400px 150px at 50% -30%, #4a3b1666, transparent 70%),
    linear-gradient(170deg,#242c40,#181e2e);
  border:2px solid #c9a24b; border-radius:14px;
  padding:14px 12px; margin-bottom:10px;
}
.tc-emoji { font-size:44px; filter:drop-shadow(0 3px 6px #000); }
.tc-level { font-size:17px; font-weight:900; color:#ffe9b0; margin:2px 0; }
.tc-power { font-size:11px; color:#c9a24b; font-weight:700; }
.tc-cost { display:flex; justify-content:center; flex-wrap:wrap; gap:5px 12px; margin:8px 0; font-size:11px; font-weight:700; color:#c8c0a0; }
.tc-cost .lack { color:#ff6b6b; }
.big-btn {
  border:none; cursor:pointer; font-family:inherit; width:100%;
  background:linear-gradient(180deg,#57d873 0%,#23a244 55%,#1b8236 100%);
  border:1px solid #0e5c22; border-radius:12px;
  color:#fff; font-size:15px; font-weight:900; padding:11px 0;
  box-shadow:0 3px 0 #0d4d1e, inset 0 1px 0 #9dffb4;
  transition:transform .06s;
}
.big-btn:active { transform:translateY(2px); box-shadow:0 1px 0 #0d4d1e; }
.big-btn:disabled { filter:grayscale(.9) brightness(.6); cursor:not-allowed; }
.progress-outer {
  height:14px; background:rgba(0,0,0,.5); border-radius:8px;
  border:1px solid #3d4356; overflow:hidden; margin:6px 0;
}
.progress-inner {
  height:100%; border-radius:8px;
  background:linear-gradient(90deg,#c9a24b,#ffd76a);
  transition:width .4s ease; min-width:0;
}
.kv-row { display:flex; justify-content:space-between; font-size:11.5px; padding:4px 2px; font-weight:600; color:#c8c0a0; }
.kv-row b { color:#f0d792; }

/* ============ MORE / LEADERBOARD ============ */
.lb-note {
  font-size:9.5px; color:#8b93a8; font-weight:600;
  text-align:center; margin:2px 0 6px;
}
.lb-row {
  display:flex; align-items:center; gap:8px;
  padding:7px 8px; border-radius:9px; margin-bottom:4px;
  background:rgba(0,0,0,.28); border:1px solid #2c3247;
  font-size:11.5px; font-weight:700;
}
.lb-row.me {
  background:linear-gradient(90deg,#3a2f14,#241f10);
  border-color:#c9a24b;
  box-shadow:0 0 10px #c9a24b44;
}
.lb-rank { flex:0 0 26px; text-align:center; font-weight:900; color:#c9a24b; }
.lb-name { flex:1; color:#e8dfc8; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lb-power { color:#ffd76a; }
.whale-meter { text-align:center; padding:6px 0 2px; }
.whale-emoji { font-size:40px; }
.danger-btn {
  border:1px solid #7a1010; background:linear-gradient(180deg,#c23a3a,#8a1c1c);
  color:#fff; border-radius:10px; font-weight:900; font-size:12px;
  padding:9px; width:100%; cursor:pointer; font-family:inherit;
}
.coffee-link {
  display:block; margin-top:8px; text-align:center;
  background:linear-gradient(180deg,#4a3b28,#332818);
  border:1px solid #c9a24b; border-radius:10px;
  color:#ffd76a; font-size:11.5px; font-weight:700;
  padding:9px 10px; text-decoration:none; line-height:1.4;
}
.coffee-link:active { transform:scale(.98); }
.coffee-link b { color:#7ee787; }

/* ============ MODAL ============ */
#modal-root:empty { display:none; }
.modal-scrim {
  position:fixed; inset:0; background:rgba(0,0,0,.72);
  display:flex; align-items:center; justify-content:center;
  z-index:50; animation:fadein .18s;
}
@keyframes fadein { from{opacity:0} to{opacity:1} }
.modal {
  width:min(92%,380px); max-height:80dvh; overflow-y:auto;
  background:linear-gradient(180deg,#2a3350,#1a2030);
  border:2px solid #c9a24b; border-radius:16px;
  padding:16px 14px; text-align:center;
  animation:popin .25s cubic-bezier(.2,1.6,.4,1);
  box-shadow:0 0 40px #c9a24b55;
}
@keyframes popin { from{transform:scale(.7); opacity:0} to{transform:scale(1); opacity:1} }
.modal h2 { color:#ffe9b0; font-size:17px; margin-bottom:4px; }
.modal .sub { font-size:11px; color:#a9b2c8; margin-bottom:10px; }
.reward-grid { display:flex; flex-wrap:wrap; gap:6px; justify-content:center; margin:8px 0 12px; }
.reward-item {
  background:rgba(0,0,0,.4); border:1px solid #c9a24b66;
  border-radius:10px; padding:6px 9px;
  font-size:11px; font-weight:800; color:#ffe9b0;
  animation:popin .3s backwards;
}
.modal .big-btn { margin-top:4px; }
.name-input {
  width:100%; margin:10px 0 12px;
  background:rgba(0,0,0,.5); border:2px solid #c9a24b;
  border-radius:10px; padding:11px 12px;
  color:#ffe9b0; font-size:15px; font-weight:800; text-align:center;
  font-family:inherit; outline:none;
}
.name-input::placeholder { color:#8b93a8; font-weight:600; }
.name-input:focus { box-shadow:0 0 12px #c9a24b66; }

/* ============ ARENA ============ */
.arena-head {
  display:flex; justify-content:space-between; align-items:center;
  background:rgba(0,0,0,.35); border:1px solid #3d4356;
  border-radius:10px; padding:7px 10px; margin:8px 0;
  font-size:11.5px; font-weight:800; color:#ffe9b0;
}
.arena-slots { color:#7fd4ff; }
.arena-row {
  display:flex; align-items:center; gap:7px;
  background:rgba(0,0,0,.28); border:1px solid #2c3247;
  border-radius:9px; padding:6px 8px; margin-bottom:5px;
  font-size:11px; font-weight:700; text-align:left;
}
.arena-row.me {
  background:linear-gradient(90deg,#3a2f14,#241f10);
  border-color:#c9a24b; box-shadow:0 0 10px #c9a24b44;
}
.arena-rank { flex:0 0 34px; text-align:center; font-weight:900; color:#c9a24b; font-size:12px; }
.arena-name { flex:1; min-width:0; color:#e8dfc8; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.arena-power { font-size:9.5px; color:#9aa3b8; font-weight:700; }
.fight-btn {
  border:none; cursor:pointer; font-family:inherit;
  background:linear-gradient(180deg,#ff7a5c,#c23a1e);
  border:1px solid #7a1c08; border-radius:8px;
  color:#fff; font-size:10.5px; font-weight:900; padding:6px 12px;
  box-shadow:0 2px 0 #5c1404;
  transition:transform .06s;
}
.fight-btn:active { transform:translateY(1px); }
.fight-btn:disabled { filter:grayscale(1) brightness(.55); cursor:not-allowed; }
.battle-log {
  text-align:left; background:rgba(0,0,0,.4); border:1px solid #3d4356;
  border-radius:10px; padding:9px 11px; margin:8px 0;
  font-size:11px; font-weight:600; color:#d8cfa8; line-height:1.75;
}
.battle-vs {
  display:flex; align-items:center; justify-content:center; gap:10px;
  font-size:12px; font-weight:900; margin:6px 0;
}
.battle-vs .bv-side { flex:1; }
.battle-vs .bv-you { color:#7ee787; text-align:right; }
.battle-vs .bv-opp { color:#ff8a7a; text-align:left; }
.battle-vs .bv-x { color:#ffd76a; font-size:15px; }
.battle-result-win { color:#7ee787; font-size:19px; font-weight:900; text-shadow:0 0 14px #2e9e4f88; }
.battle-result-loss { color:#ff8a7a; font-size:19px; font-weight:900; }

/* ============ TOASTS & FX ============ */
#toast-root {
  position:fixed; top:64px; left:50%; transform:translateX(-50%);
  z-index:60; display:flex; flex-direction:column; gap:6px; align-items:center;
  pointer-events:none; width:min(90%,400px);
}
.toast {
  background:rgba(20,16,8,.92); border:1px solid #c9a24b;
  color:#ffe9b0; font-size:12px; font-weight:700;
  padding:8px 16px; border-radius:20px;
  animation:toastin .25s, fadeout .4s 1.8s forwards;
  text-align:center;
}
.toast.err { border-color:#ff6b6b; color:#ffb3b3; }
@keyframes toastin { from{transform:translateY(-14px); opacity:0} to{transform:none; opacity:1} }
@keyframes fadeout { to{opacity:0; transform:translateY(-8px)} }

#fx-root { position:fixed; inset:0; pointer-events:none; z-index:70; overflow:hidden; }
.float-reward {
  position:absolute; font-size:14px; font-weight:900; color:#7ee787;
  text-shadow:0 1px 3px #000; animation:floatup 1.1s ease-out forwards;
  white-space:nowrap;
}
@keyframes floatup { from{opacity:1; transform:translateY(0)} to{opacity:0; transform:translateY(-70px)} }
.confetti {
  position:absolute; width:9px; height:9px; top:-12px;
  animation:confall linear forwards;
}
@keyframes confall {
  to { transform:translateY(105dvh) rotate(720deg); opacity:.6; }
}
.power-pop {
  position:fixed; top:52px; right:14px; z-index:65;
  color:#ffd76a; font-size:13px; font-weight:900;
  text-shadow:0 0 8px #c9a24b; animation:floatup 1.3s forwards;
}
.shake { animation:shake .35s; }
@keyframes shake {
  0%,100%{transform:translateX(0)} 20%{transform:translateX(-6px)}
  40%{transform:translateX(6px)} 60%{transform:translateX(-4px)} 80%{transform:translateX(4px)}
}