* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #12121f;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  touch-action: manipulation;
}

#game-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  height: 100dvh;
  max-width: 600px;
  margin: 0 auto;
}

/* ---------- Top bar ---------- */
#top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 10px 10px;
  padding-top: calc(10px + env(safe-area-inset-top));
  background: #1a1a2e;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
}

#elixir-stat { color: #d63db4; }

.stat { white-space: nowrap; }

.hud-btn {
  background: #2c2c4a;
  color: #fff;
  border: 1px solid #44446a;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 700;
  padding: 6px 12px;
}

.hud-btn:active { background: #3d3d63; }
.hud-btn.rank { color: #f1c40f; border-color: #7a6a2a; }

/* ---------- Canvas ---------- */
#canvas-wrap {
  flex: 1;
  position: relative;
  min-height: 0;
}

#game-canvas {
  width: 100%;
  height: 100%;
  display: block;
  background: #1e2a23;
  /* The board owns all touch gestures (drag-to-merge / reposition). Without
     this, mobile browsers hijack a drag as a scroll/pan and fire
     pointercancel, so merging silently fails. */
  touch-action: none;
}

/* ---------- Hero ability button ---------- */
#hero-btn {
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: #2c2c4a;
  border: 3px solid #f1c40f;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 5;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

#hero-btn.hidden { display: none; }
#hero-btn:active { filter: brightness(1.2); }
#hero-btn:disabled { border-color: #44446a; filter: grayscale(0.8); opacity: 0.75; }
#hero-icon { font-size: 24px; line-height: 1; }
#hero-cd { font-size: 11px; font-weight: 800; color: #f1c40f; }

/* ---------- Bottom bar ---------- */
#bottom-bar {
  background: #1a1a2e;
  padding: 10px 12px;
  padding-bottom: calc(10px + env(safe-area-inset-bottom));
  min-height: 100px;
  display: flex;
  align-items: center;
}

.panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
}

.panel.hidden { display: none; }

#panel-hint {
  color: #9a9ab8;
  font-size: 14px;
}

.action-btn {
  background: #27ae60;
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 700;
  padding: 12px 18px;
  white-space: nowrap;
}

.action-btn:active { filter: brightness(1.15); transform: scale(0.96); }
.action-btn { transition: transform 0.08s ease; }
.action-btn:disabled { background: #44446a; color: #8888aa; }
.action-btn.sell { background: #c0392b; }
.action-btn.merge { background: #f39c12; }
.action-btn.menu { background: #2c2c4a; border: 1px solid #44446a; padding: 12px 14px; flex-shrink: 0; }

.hud-btn.restart { color: #ff8a80; border-color: #7a3a35; white-space: nowrap; }

/* ---------- Wave banner ---------- */
#wave-banner {
  position: absolute;
  top: 18%;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(20, 20, 40, 0.85);
  border: 2px solid #f1c40f;
  border-radius: 14px;
  color: #fff;
  font-size: 24px;
  font-weight: 800;
  padding: 12px 28px;
  pointer-events: none;
  z-index: 4;
  white-space: nowrap;
  animation: banner-pop 1.6s cubic-bezier(0.2, 1.2, 0.4, 1) forwards;
}

#wave-banner.hidden { display: none; }

@keyframes banner-pop {
  0%   { opacity: 0; transform: translateX(-50%) scale(0.5); }
  15%  { opacity: 1; transform: translateX(-50%) scale(1.05); }
  25%  { transform: translateX(-50%) scale(1); }
  80%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(-50%) scale(1) translateY(-14px); }
}

.tab-badge { animation: badge-pulse 1.6s ease infinite; }

@keyframes badge-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}

/* ---------- Home screen ---------- */
#home-screen {
  position: fixed;
  inset: 0;
  z-index: 8;
  background: radial-gradient(circle at 50% 20%, #232345 0%, #12121f 70%);
  display: flex;
  flex-direction: column;
}

#home-screen.hidden { display: none; }

#home-pages {
  flex: 1;
  min-height: 0;
  position: relative;
}

.home-page {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 16px;
  padding-top: calc(16px + env(safe-area-inset-top));
}

.home-page.hidden { display: none; }

#page-battle:not(.hidden) {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

#home-title {
  font-size: 34px;
  font-weight: 900;
  color: #fff;
  text-shadow: 0 4px 14px rgba(241, 196, 15, 0.35);
}

#home-rank-card {
  width: min(340px, 86vw);
  background: #1a1a2e;
  border: 1px solid #44446a;
  border-radius: 14px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

#home-rank-line { color: #f1c40f; font-size: 16px; font-weight: 800; }

.action-btn.home-battle {
  width: min(340px, 86vw);
  font-size: 20px;
  padding: 16px;
  background: linear-gradient(135deg, #27ae60, #1e8e4f);
  box-shadow: 0 6px 18px rgba(39, 174, 96, 0.35);
}

#home-restart { width: min(340px, 86vw); }

#home-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  width: min(360px, 90vw);
}

.home-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  background: #1a1a2e;
  border: 1px solid #44446a;
  border-radius: 12px;
  color: #fff;
  font-size: 19px;
  font-weight: 700;
  padding: 10px 2px;
}

.home-tile span:not(.tab-badge) { font-size: 10px; color: #9a9ab8; }
.home-tile .tab-badge { position: absolute; top: 3px; right: 4px; }
.home-tile:active { background: #2c2c4a; transform: scale(0.96); }

/* ---------- Bottom tab bar (Clash style) ---------- */
#home-tabs {
  display: flex;
  background: #15152a;
  border-top: 2px solid #2c2c4a;
  padding-bottom: env(safe-area-inset-bottom);
}

.home-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  background: none;
  border: none;
  border-top: 3px solid transparent;
  color: #9a9ab8;
  font-size: 24px;
  padding: 10px 0 8px;
}

.home-tab span { font-size: 11px; font-weight: 700; }
.home-tab.active {
  color: #fff;
  border-top-color: #f1c40f;
  background: #1d1d36;
}
.home-tab:active { background: #24244a; }

#cards-subtabs {
  display: flex;
  border-bottom: 1px solid #2c2c4a;
  margin-bottom: 8px;
}

/* ---------- Deck tab ---------- */
.deck-count {
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  text-align: center;
  background: #22223a;
  border: 1px solid #2c2c4a;
  border-radius: 10px;
  padding: 10px;
}

.deck-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #22223a;
  border: 1px solid #2c2c4a;
  border-radius: 10px;
  padding: 9px 12px;
  color: #fff;
}

.deck-row.in-deck { border-color: #2ecc71; background: #1f3328; }

.deck-toggle {
  flex-shrink: 0;
  background: #27ae60;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  padding: 8px 12px;
}

.deck-toggle.remove { background: #c0392b; }
.deck-toggle:active { filter: brightness(1.15); }
.deck-toggle:disabled { background: #44446a; color: #8888aa; }

/* Rarity accents (top border + name tint) */
.rarity-common    { border-top-color: #95a5a6; }
.rarity-rare      { border-top-color: #3498db; }
.rarity-epic      { border-top-color: #9b59b6; }
.rarity-legendary { border-top-color: #f39c12; }
.rarity-common .build-name    { color: #b8c4c4; }
.rarity-rare .build-name      { color: #7fc1ec; }
.rarity-epic .build-name      { color: #c39bd3; }
.rarity-legendary .build-name { color: #f8c471; }

.tower-icon {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.6);
  flex-shrink: 0;
}

img.tower-icon {
  width: 38px;
  height: 38px;
  border: none;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.18);
  image-rendering: auto;
}

.pack-card img.tower-icon { width: 46px; height: 46px; }

.build-name { font-size: 12px; font-weight: 600; }
.build-cost { font-size: 12px; color: #f1c40f; font-weight: 700; }
.build-lv { font-size: 10px; color: #8888aa; font-weight: 700; }
.build-lock { font-size: 11px; color: #8888aa; font-weight: 700; }

/* ---------- Tower panel ---------- */
#tower-info { flex: 1; color: #fff; }
#tower-name { font-size: 15px; font-weight: 700; }
#tower-stats { font-size: 12px; color: #9a9ab8; margin-top: 2px; }

/* ---------- XP bars ---------- */
.xp-bar {
  width: 100%;
  height: 10px;
  background: #2c2c4a;
  border-radius: 5px;
  overflow: hidden;
}

.xp-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #f1c40f, #f39c12);
  border-radius: 5px;
  transition: width 0.6s ease;
}

.xp-label { font-size: 12px; color: #9a9ab8; }
.xp-gain { font-size: 20px; font-weight: 800; color: #f1c40f; }
.coin-gain { font-size: 20px; font-weight: 800; color: #f8c471; }
.overlay-earnings { display: flex; justify-content: center; gap: 18px; }

/* ---------- Overlays ---------- */
#overlay, #rewards-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 10, 20, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

#overlay.hidden, #rewards-overlay.hidden { display: none; }

#overlay-box {
  background: #1a1a2e;
  border: 1px solid #44446a;
  border-radius: 16px;
  padding: 32px 28px;
  text-align: center;
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 280px;
  max-width: 90vw;
}

#overlay-title { font-size: 28px; }
#overlay-text { color: #9a9ab8; font-size: 15px; }
.action-btn.hidden { display: none; }

/* ---------- Rewards / cards screen ---------- */
#rewards-box {
  background: #1a1a2e;
  border: 1px solid #44446a;
  border-radius: 16px;
  width: min(420px, 92vw);
  max-height: 82dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#rewards-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid #2c2c4a;
}

#rewards-rank-badge {
  font-size: 20px;
  font-weight: 800;
  color: #f1c40f;
  background: #2c2c4a;
  border: 1px solid #7a6a2a;
  border-radius: 10px;
  padding: 8px 12px;
  white-space: nowrap;
}

#rewards-progress {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

#rewards-tabs {
  display: flex;
  border-bottom: 1px solid #2c2c4a;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

#rewards-tabs::-webkit-scrollbar { display: none; }

.tab-btn {
  flex: 0 0 auto;
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  color: #9a9ab8;
  font-size: 13px;
  font-weight: 700;
  padding: 12px 13px;
  white-space: nowrap;
}

.tab-btn.active {
  color: #fff;
  border-bottom-color: #f1c40f;
}

.tab-badge {
  display: inline-block;
  background: #e74c3c;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  border-radius: 8px;
  padding: 1px 6px;
  vertical-align: 1px;
}

.tab-badge.hidden { display: none; }

/* ---------- Balances bar ---------- */
.balances {
  display: flex;
  justify-content: center;
  gap: 18px;
  background: #22223a;
  border: 1px solid #2c2c4a;
  border-radius: 10px;
  padding: 10px;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
}

.balances .gems { color: #74b9ff; }
.balances .coins { color: #f8c471; }

#rewards-list, #cards-list, #heroes-list, #social-list, #quests-list, #shop-list, #deck-list, #pass-list, #clan-list, #help-list {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 10px 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#rewards-list.hidden, #cards-list.hidden, #heroes-list.hidden, #social-list.hidden,
#quests-list.hidden, #shop-list.hidden, #deck-list.hidden, #pass-list.hidden, #clan-list.hidden,
#help-list.hidden { display: none; }

/* ---------- Clan ---------- */
#clan-join-ui.hidden, #clan-main.hidden, #clan-no-name.hidden, #clan-offline.hidden { display: none; }

#clan-list select {
  flex: 1;
  min-width: 0;
  background: #22223a;
  border: 1px solid #44446a;
  border-radius: 8px;
  color: #fff;
  font-size: 13px;
  padding: 10px 8px;
}

#clan-chat {
  background: #16162a;
  border: 1px solid #2c2c4a;
  border-radius: 10px;
  padding: 8px 10px;
  max-height: 180px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.chat-msg { font-size: 12px; color: #cfcfe8; line-height: 1.4; display: flex; align-items: flex-start; gap: 7px; }
.chat-msg .chat-name { color: #f1c40f; font-weight: 700; }
.chat-msg.chat-system { color: #9a9ab8; font-style: italic; display: block; }
.chat-pfp { width: 26px; height: 26px; flex-shrink: 0; }
.chat-body { min-width: 0; }

.req-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #22223a;
  border: 1px solid #2c2c4a;
  border-radius: 10px;
  padding: 9px 12px;
  color: #fff;
  margin-top: 8px;
}

.req-row.mine { border-color: #f1c40f; }
.req-info { flex: 1; min-width: 0; }
.req-name { font-size: 13px; font-weight: 700; }

.req-donate-btn {
  flex-shrink: 0;
  background: #27ae60;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  padding: 8px 12px;
  white-space: nowrap;
}

.req-donate-btn:active { filter: brightness(1.15); }
.req-donate-btn:disabled { background: #44446a; color: #8888aa; }

.member-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #fff;
  padding: 6px 4px;
  border-bottom: 1px solid #22223a;
}

.member-row .board-stats { margin-left: auto; }
.member-pfp { width: 30px; height: 30px; flex-shrink: 0; }
.member-name { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; overflow: hidden; }

.role-tag {
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  padding: 1px 6px;
  border-radius: 6px;
  flex-shrink: 0;
}
.role-tag.role-leader { background: #5a4412; color: #ffd84a; }
.role-tag.role-coleader { background: #2a3f5c; color: #8fd0ff; }
.role-tag.role-member { background: #2c2c4a; color: #9a9ab8; }

.member-actions { display: flex; gap: 4px; flex-shrink: 0; }
.clan-act {
  background: #2c2f58;
  border: 1px solid #4d519a;
  color: #d7dbff;
  border-radius: 7px;
  font-size: 10px;
  font-weight: 700;
  padding: 4px 7px;
  white-space: nowrap;
}
.clan-act:active { transform: scale(0.93); }
.clan-act.danger { background: #5a1f18; border-color: #b03226; color: #ffb3a7; }

.clan-gear {
  background: none;
  border: none;
  font-size: 16px;
  padding: 0 4px;
  cursor: pointer;
}

#clan-desc .clan-desc-text {
  background: #1a1b33;
  border: 1px solid #2c2c4a;
  border-radius: 8px;
  padding: 7px 10px;
  font-size: 12px;
  color: #c6c9e8;
  margin-bottom: 8px;
}

#clan-settings {
  background: #1a1b33;
  border: 1px solid #3a3d6c;
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
#clan-settings.hidden { display: none; }
#clan-settings textarea {
  background: #22223a;
  border: 1px solid #44446a;
  border-radius: 8px;
  color: #fff;
  font-size: 13px;
  padding: 8px;
  resize: vertical;
  min-height: 44px;
  font-family: inherit;
}
.clan-set-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12px; color: #c6c9e8; }
.clan-set-row input, .clan-set-row select {
  background: #22223a;
  border: 1px solid #44446a;
  border-radius: 8px;
  color: #fff;
  font-size: 13px;
  padding: 7px 8px;
  width: 55%;
}

#clan-browse { display: flex; flex-direction: column; gap: 7px; max-height: 260px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.clan-browse-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #22223a;
  border: 1px solid #2c2c4a;
  border-radius: 10px;
  padding: 9px 12px;
}
.clan-browse-info { flex: 1; min-width: 0; }
.clan-browse-name { font-size: 13px; font-weight: 700; color: #fff; }
.clan-browse-join { flex-shrink: 0; }
.clan-browse-join:disabled { background: #44446a; color: #8888aa; }

.friend-remove {
  flex-shrink: 0;
  background: rgba(231, 76, 60, 0.15);
  border: 1px solid rgba(231, 76, 60, 0.5);
  color: #ff8a80;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 800;
  width: 26px;
  height: 26px;
  margin-left: 6px;
}
.friend-remove:active { transform: scale(0.9); }

/* ---------- Quests ---------- */
.quest-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #22223a;
  border: 1px solid #2c2c4a;
  border-radius: 10px;
  padding: 10px 12px;
  color: #fff;
}

.quest-row.claimable { border-color: #2ecc71; }
.quest-row.claimed { opacity: 0.45; }

.quest-icon { font-size: 22px; flex-shrink: 0; width: 30px; text-align: center; }
.quest-info { flex: 1; min-width: 0; }
.quest-name { font-size: 13px; font-weight: 700; }

.quest-claim-btn {
  flex-shrink: 0;
  background: #27ae60;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  padding: 9px 12px;
  white-space: nowrap;
}

.quest-claim-btn:active { filter: brightness(1.15); }
.quest-claim-btn:disabled { background: #44446a; color: #8888aa; }

.quest-gems { color: #74b9ff; font-weight: 800; font-size: 13px; flex-shrink: 0; }

/* ---------- Shop ---------- */
.shop-heading {
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  margin-top: 6px;
}

.shop-sub { color: #9a9ab8; font-size: 11px; margin-top: -4px; }

.chest-row {
  display: flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(135deg, #26263f, #1f1f33);
  border: 1px solid #44446a;
  border-radius: 12px;
  padding: 12px;
  color: #fff;
}

.chest-row.wood      { border-color: #8d6e63; }
.chest-row.gold      { border-color: #f1c40f; }
.chest-row.mythic    { border-color: #9b59b6; }
.chest-row.satchel   { border-color: #27ae60; }
.chest-row.vault     { border-color: #3498db; }
.chest-row.reliquary { border-color: #e84393; }

.chest-icon { font-size: 30px; flex-shrink: 0; }
.chest-info { flex: 1; min-width: 0; }
.chest-name { font-size: 14px; font-weight: 800; }
.chest-desc { font-size: 11px; color: #9a9ab8; margin-top: 2px; }

.chest-open-btn {
  flex-shrink: 0;
  background: #8e44ad;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 800;
  padding: 10px 12px;
  white-space: nowrap;
}

.chest-open-btn:active { filter: brightness(1.2); }
.chest-open-btn:disabled { background: #44446a; color: #8888aa; }

.shop-offer {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #22223a;
  border: 1px solid #2c2c4a;
  border-top-width: 3px;
  border-radius: 10px;
  padding: 10px 12px;
  color: #fff;
}

.shop-offer .tower-icon { flex-shrink: 0; }
.offer-info { flex: 1; min-width: 0; }
.offer-name { font-size: 13px; font-weight: 700; }
.offer-sub { font-size: 11px; color: #9a9ab8; margin-top: 1px; }

.offer-buy-btn {
  flex-shrink: 0;
  background: #27ae60;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  padding: 9px 12px;
  white-space: nowrap;
}

.offer-buy-btn:active { filter: brightness(1.15); }
.offer-buy-btn:disabled { background: #44446a; color: #8888aa; }

/* ---------- Social tab ---------- */
#social-online.hidden, #social-offline.hidden { display: none; }

.social-note {
  color: #9a9ab8;
  font-size: 13px;
  background: #22223a;
  border: 1px solid #2c2c4a;
  border-radius: 10px;
  padding: 14px;
  line-height: 1.5;
}

.social-note code { color: #f1c40f; }

.social-section { margin-bottom: 14px; }

.social-label {
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 6px;
}

.social-input-row { display: flex; gap: 8px; }

.social-input-row input {
  flex: 1;
  min-width: 0;
  background: #22223a;
  border: 1px solid #44446a;
  border-radius: 8px;
  color: #fff;
  font-size: 14px;
  padding: 10px 12px;
  user-select: text;
  -webkit-user-select: text;
}

.social-input-row input:focus { outline: none; border-color: #f1c40f; }

.social-btn {
  background: #27ae60;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  padding: 10px 16px;
}

.social-btn:active { filter: brightness(1.15); }

.social-msg { font-size: 12px; margin-top: 5px; color: #9a9ab8; min-height: 15px; }
.social-msg.err { color: #e74c3c; }
.social-msg.ok { color: #2ecc71; }

.board-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #22223a;
  border: 1px solid #2c2c4a;
  border-radius: 10px;
  padding: 9px 12px;
  color: #fff;
  margin-bottom: 6px;
}

.board-row.me { border-color: #f1c40f; }

.board-pos {
  width: 26px;
  font-size: 13px;
  font-weight: 800;
  color: #9a9ab8;
  flex-shrink: 0;
}

.board-name {
  flex: 1;
  font-size: 14px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.board-stats { font-size: 12px; color: #9a9ab8; white-space: nowrap; }
.board-empty { font-size: 12px; color: #9a9ab8; padding: 4px 2px; }

/* ---------- Hero rows ---------- */
.hero-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #22223a;
  border: 1px solid #2c2c4a;
  border-radius: 10px;
  padding: 10px 12px;
  color: #fff;
}

.hero-row.locked { opacity: 0.55; }
.hero-row.equipped { border-color: #f1c40f; }

.hero-emoji { font-size: 26px; flex-shrink: 0; width: 34px; text-align: center; }

img.hero-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  flex-shrink: 0;
}

.pack-card img.hero-icon { width: 50px; height: 50px; }

.hero-btn-img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
}
.hero-info { flex: 1; min-width: 0; }
.hero-name { font-size: 14px; font-weight: 700; }
.hero-ability { font-size: 11px; color: #9a9ab8; margin-top: 1px; }

.hero-equip-btn, .hero-upgrade-btn {
  flex-shrink: 0;
  background: #27ae60;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  padding: 9px 12px;
  white-space: nowrap;
}

.hero-upgrade-btn { background: #8e44ad; margin-right: 6px; }
.hero-upgrade-btn:active { filter: brightness(1.2); }
.hero-upgrade-btn:disabled { background: #44446a; color: #8888aa; }

.hero-equip-btn:active { filter: brightness(1.15); }
.hero-equip-btn:disabled { background: #44446a; color: #8888aa; }
.hero-equip-btn.equipped { background: #f39c12; }

.reward-row {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #22223a;
  border: 1px solid #2c2c4a;
  border-radius: 10px;
  padding: 10px 12px;
  color: #fff;
}

.reward-row.locked { opacity: 0.5; }
.reward-row.current { border-color: #f1c40f; }

.reward-rank {
  font-size: 13px;
  font-weight: 800;
  color: #9a9ab8;
  width: 44px;
  flex-shrink: 0;
}

.reward-row .tower-icon { flex-shrink: 0; }

.reward-desc { flex: 1; min-width: 0; }
.reward-name { font-size: 14px; font-weight: 700; }
.reward-sub { font-size: 11px; margin-top: 1px; color: #9a9ab8; }

.rarity-chip-common    { color: #b8c4c4; }
.rarity-chip-rare      { color: #7fc1ec; }
.rarity-chip-epic      { color: #c39bd3; }
.rarity-chip-legendary { color: #f8c471; }

.reward-state { font-size: 16px; flex-shrink: 0; }

/* ---------- Card upgrade rows ---------- */
.card-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #22223a;
  border: 1px solid #2c2c4a;
  border-radius: 10px;
  padding: 10px 12px;
  color: #fff;
}

.card-row.locked { opacity: 0.5; }

.card-info { flex: 1; min-width: 0; }
.card-name { font-size: 14px; font-weight: 700; }
.card-level { font-size: 11px; color: #f1c40f; font-weight: 700; }

.card-progress {
  margin-top: 4px;
  height: 8px;
  background: #2c2c4a;
  border-radius: 4px;
  overflow: hidden;
}

.card-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #3498db, #5dade2);
  border-radius: 4px;
}

.card-progress-fill.ready { background: linear-gradient(90deg, #27ae60, #2ecc71); }

.card-count { font-size: 11px; color: #9a9ab8; margin-top: 2px; }

.card-upgrade-btn {
  flex-shrink: 0;
  background: #27ae60;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  padding: 9px 10px;
  white-space: nowrap;
}

.card-upgrade-btn:active { filter: brightness(1.15); }
.card-upgrade-btn:disabled { background: #44446a; color: #8888aa; }

/* ---------- Pack opening animation ---------- */
#pack-overlay {
  position: fixed;
  inset: 0;
  background: rgba(8, 8, 18, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 30;
}

#pack-overlay.hidden { display: none; }

#pack-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  max-width: 92vw;
  max-height: 86dvh;
}

#pack-title {
  font-size: 24px;
  font-weight: 800;
  color: #fff;
  text-align: center;
  animation: pack-title-pop 0.5s cubic-bezier(0.2, 1.6, 0.4, 1) both;
}

@keyframes pack-title-pop {
  from { opacity: 0; transform: scale(0.4) translateY(20px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

#pack-cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  max-height: 60dvh;
  overflow-y: auto;
  perspective: 700px;
}

.pack-card {
  width: 86px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  background: #22223a;
  border: 2px solid #44446a;
  border-radius: 12px;
  padding: 12px 6px;
  color: #fff;
  opacity: 0;
  transform: rotateY(95deg) scale(0.5);
  /* revealed one at a time by JS (see showPackAnimation) */
}

.pack-card.revealed { animation: pack-flip 0.5s cubic-bezier(0.2, 1.5, 0.4, 1) forwards; }
.pack-card.shown { opacity: 1; transform: none; } /* instant (skip) */

@keyframes pack-flip {
  0%  { opacity: 0; transform: rotateY(95deg) scale(0.5); }
  55% { opacity: 1; transform: rotateY(-14deg) scale(1.12); }
  to  { opacity: 1; transform: rotateY(0) scale(1); }
}

.pack-card.rarity-common    { border-color: #95a5a6; box-shadow: 0 0 10px rgba(149, 165, 166, 0.25); }
.pack-card.rarity-rare      { border-color: #3498db; box-shadow: 0 0 12px rgba(52, 152, 219, 0.45); }
.pack-card.rarity-epic      { border-color: #9b59b6; box-shadow: 0 0 14px rgba(155, 89, 182, 0.55); }
.pack-card.rarity-legendary { border-color: #f39c12; box-shadow: 0 0 18px rgba(243, 156, 18, 0.65); }

.pack-card .tower-icon { width: 28px; height: 28px; }
.pack-card-emoji { font-size: 26px; line-height: 1; }
.pack-card-name { font-size: 11px; font-weight: 700; text-align: center; }
.pack-card-count { font-size: 13px; font-weight: 800; color: #f1c40f; }

/* ---------- Toasts ---------- */
#toast-container {
  position: fixed;
  top: calc(64px + env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 20;
  pointer-events: none;
  width: max-content;
  max-width: 92vw;
}

.toast {
  background: #2c2c4a;
  border: 1px solid #f1c40f;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  border-radius: 10px;
  padding: 10px 16px;
  text-align: center;
  animation: toast-in 0.3s ease, toast-out 0.4s ease 3.2s forwards;
}

@keyframes toast-in {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes toast-out {
  to { opacity: 0; transform: translateY(-12px); }
}

/* ============================================================
   Glossy mobile-arcade theme pass — bevels, gold trim, vibrancy
   ============================================================ */

:root {
  --panel-hi: #32355f;
  --panel-lo: #232548;
  --panel-edge: #454879;
  --gold: #ffc83d;
  --gold-dark: #8a6a1f;
}

/* --- Bars --- */
#top-bar {
  background: linear-gradient(180deg, #2c2f5c 0%, #1d1f40 100%);
  border-bottom: 2px solid #41447a;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.35);
  font-weight: 700;
}

#bottom-bar {
  background: linear-gradient(180deg, #1d1f40 0%, #161730 100%);
  border-top: 2px solid #41447a;
}

/* --- Glossy buttons --- */
.action-btn, .social-btn, .quest-claim-btn, .chest-open-btn, .offer-buy-btn,
.card-upgrade-btn, .deck-toggle, .hero-equip-btn, .hero-upgrade-btn {
  background: linear-gradient(180deg, #44d97c 0%, #27ae60 48%, #1b8a4a 100%);
  border: 2px solid #0f5c30;
  border-radius: 12px;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.38),
              inset 0 -3px 0 rgba(0, 0, 0, 0.28),
              0 3px 8px rgba(0, 0, 0, 0.4);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  color: #fff;
}

.action-btn.sell, .deck-toggle.remove {
  background: linear-gradient(180deg, #f0705a 0%, #c0392b 48%, #96281c 100%);
  border-color: #6e1d14;
}

.action-btn.menu {
  background: linear-gradient(180deg, #3b3e6e 0%, #2c2e54 48%, #20223f 100%);
  border-color: #14152c;
}

.chest-open-btn, .hero-upgrade-btn {
  background: linear-gradient(180deg, #b06fd8 0%, #8e44ad 48%, #6c3286 100%);
  border-color: #4a2160;
}

.action-btn.home-battle {
  background: linear-gradient(180deg, #52e288 0%, #27ae60 50%, #188043 100%);
  border: 3px solid #0f5c30;
  border-radius: 16px;
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.45),
              inset 0 -4px 0 rgba(0, 0, 0, 0.3),
              0 6px 16px rgba(39, 174, 96, 0.45);
  text-shadow: 0 2px 3px rgba(0, 0, 0, 0.45);
}

.action-btn:disabled, .quest-claim-btn:disabled, .chest-open-btn:disabled,
.offer-buy-btn:disabled, .card-upgrade-btn:disabled, .deck-toggle:disabled,
.hero-upgrade-btn:disabled {
  background: linear-gradient(180deg, #4b4e74 0%, #3c3e60 100%);
  border-color: #252640;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
  color: #9093b8;
  text-shadow: none;
}

.hud-btn {
  background: linear-gradient(180deg, #3b3e6e 0%, #272a50 100%);
  border: 2px solid #181a36;
  border-radius: 10px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22),
              inset 0 -2px 0 rgba(0, 0, 0, 0.3);
}

.hud-btn.rank {
  border-color: var(--gold-dark);
  background: linear-gradient(180deg, #4a4220 0%, #2e2a18 100%);
}

/* --- Panels & rows --- */
#rewards-box, #overlay-box, #home-rank-card, #rewards-header {
  background: linear-gradient(180deg, var(--panel-hi) 0%, var(--panel-lo) 100%);
}

#rewards-box, #overlay-box {
  border: 2px solid var(--panel-edge);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

#home-rank-card {
  border: 2px solid var(--gold-dark);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 4px 12px rgba(0, 0, 0, 0.4);
}

.reward-row, .card-row, .quest-row, .deck-row, .hero-row, .shop-offer,
.req-row, .board-row, .balances, .deck-count, .social-note {
  background: linear-gradient(180deg, #2c2f58 0%, #222447 100%);
  border: 2px solid #3a3d6c;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 2px 6px rgba(0, 0, 0, 0.3);
}

.chest-row {
  background: linear-gradient(160deg, #313463 0%, #232548 70%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 3px 10px rgba(0, 0, 0, 0.4);
  border-width: 2px;
}

.quest-row.claimable, .reward-row.current { border-color: var(--gold); box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 0 12px rgba(255, 200, 61, 0.25); }
.deck-row.in-deck { border-color: #2ecc71; background: linear-gradient(180deg, #25503a 0%, #1c3c2c 100%); }
.hero-row.equipped { border-color: var(--gold); }
.req-row.mine { border-color: var(--gold); }
.board-row.me { border-color: var(--gold); }

/* --- Gold glossy progress bars --- */
.xp-bar, .card-progress {
  background: #15162e;
  border: 1px solid #000;
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.6);
}

.xp-fill {
  background: linear-gradient(180deg, #ffe084 0%, #ffc83d 45%, #e09b18 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.card-progress-fill {
  background: linear-gradient(180deg, #7ec8f5 0%, #3498db 50%, #1f6da8 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

.card-progress-fill.ready {
  background: linear-gradient(180deg, #63e695 0%, #27ae60 50%, #188043 100%);
}

/* --- Tabs --- */
#home-tabs {
  background: linear-gradient(180deg, #23254a 0%, #15162e 100%);
  border-top: 2px solid #41447a;
  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.4);
}

.home-tab.active {
  background: linear-gradient(180deg, #34376a 0%, #23254a 100%);
  border-top-color: var(--gold);
  text-shadow: 0 0 10px rgba(255, 200, 61, 0.5);
}

.tab-btn.active { border-bottom-color: var(--gold); }

.home-tile {
  background: linear-gradient(180deg, #2e3158 0%, #222447 100%);
  border: 2px solid #3a3d6c;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 3px 6px rgba(0, 0, 0, 0.35);
}

/* --- Title & badges --- */
#home-title {
  color: var(--gold);
  text-shadow: 0 2px 0 #8a5a10, 0 4px 10px rgba(0, 0, 0, 0.6);
  letter-spacing: 0.5px;
}

.tab-badge {
  background: linear-gradient(180deg, #ff7a6b 0%, #e74c3c 100%);
  border: 1px solid #7e1d12;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}

/* --- Toasts & banner --- */
.toast {
  background: linear-gradient(180deg, #32355f 0%, #232548 100%);
  border: 2px solid var(--gold);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

#wave-banner {
  background: linear-gradient(180deg, #32355f 0%, #1d1f40 100%);
  border: 2px solid var(--gold);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.15);
  color: var(--gold);
  text-shadow: 0 2px 3px rgba(0, 0, 0, 0.5);
}

/* --- Hero ability button --- */
#hero-btn {
  background: radial-gradient(circle at 35% 30%, #3b3e6e 0%, #20223f 80%);
  border: 3px solid var(--gold);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.55), inset 0 2px 0 rgba(255, 255, 255, 0.2),
              0 0 14px rgba(255, 200, 61, 0.3);
}

/* --- Pack reveal --- */
.pack-card {
  background: linear-gradient(180deg, #32355f 0%, #222447 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 4px 10px rgba(0, 0, 0, 0.45);
}

/* ---------- Generated inline icons ---------- */
.ic-inline { width: 15px; height: 15px; vertical-align: -2px; }
.ic-block { display: inline-block; vertical-align: middle; }
.ic-md { width: 22px; height: 22px; vertical-align: -5px; }
.quest-icon img, .chest-icon img { width: 30px; height: 30px; }
#home-title .ic-block { vertical-align: -6px; }

/* ---------- Damage stats panel ---------- */
#dmg-panel {
  position: absolute;
  left: 10px;
  right: 10px;
  top: 12px;
  z-index: 6;
  background: linear-gradient(180deg, rgba(44, 47, 92, 0.95), rgba(29, 31, 64, 0.95));
  border: 2px solid var(--gold);
  border-radius: 12px;
  padding: 10px 12px;
  color: #fff;
  font-size: 12px;
  max-height: 55%;
  overflow-y: auto;
}

#dmg-panel.hidden { display: none; }

.dmg-row { display: flex; align-items: center; gap: 8px; padding: 3px 0; }
.dmg-row img.tower-icon { width: 26px; height: 26px; }
.dmg-name { flex: 1; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dmg-bar { flex: 2; height: 9px; background: #15162e; border-radius: 5px; overflow: hidden; }
.dmg-fill { height: 100%; background: linear-gradient(90deg, #ffe084, #e09b18); }
.dmg-val { width: 56px; text-align: right; font-weight: 800; color: #ffe084; }

/* ---------- Help tab ---------- */
.help-block {
  background: linear-gradient(180deg, #2c2f58 0%, #222447 100%);
  border: 2px solid #3a3d6c;
  border-radius: 10px;
  padding: 12px 14px;
  color: #cfd2ec;
  font-size: 13px;
  line-height: 1.55;
}
.help-block b { color: #fff; }
.help-block .ic-inline { vertical-align: -3px; }

/* ---------- Long-press unit tooltip ---------- */
#unit-tip {
  position: absolute;
  left: 12px;
  right: 12px;
  top: 14px;
  z-index: 7;
  background: linear-gradient(180deg, rgba(50, 53, 95, 0.97), rgba(34, 36, 71, 0.97));
  border: 2px solid var(--gold);
  border-radius: 12px;
  padding: 12px 14px;
  color: #fff;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.55);
  animation: toast-in 0.18s ease;
}

#unit-tip.hidden { display: none; }

.tip-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.tip-name { font-size: 15px; font-weight: 800; }
.tip-sub { font-size: 11px; color: #9a9ab8; }
.tip-stats { font-size: 12px; color: #ffe084; font-weight: 700; margin-bottom: 6px; }
.tip-ability { font-size: 12px; color: #cfd2ec; line-height: 1.5; padding-left: 14px; position: relative; }
.tip-ability::before { content: "\2726"; position: absolute; left: 0; color: var(--gold); }

/* ---------- Unified deck + collection grid ---------- */
.deck-slots {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
  margin-top: 8px;
}

.deck-slot {
  position: relative;
  aspect-ratio: 0.85;
  border-radius: 10px;
  background: linear-gradient(180deg, #2c2f58 0%, #222447 100%);
  border: 2px solid #3a3d6c;
  border-top-width: 3px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 3px;
  color: #fff;
}

.deck-slot.empty {
  border-style: dashed;
  color: #666a92;
  font-size: 22px;
  font-weight: 800;
}

.deck-slot img.tower-icon, .cgrid-cell img.tower-icon {
  width: 86%;
  height: auto;
  border-radius: 7px;
  background: transparent;
}

.slot-lv, .cg-lv { font-size: 9px; font-weight: 800; color: #ffe084; line-height: 1; }

.card-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
  margin-top: 10px;
}

.cgrid-cell {
  position: relative;
  aspect-ratio: 0.8;
  border-radius: 10px;
  background: linear-gradient(180deg, #2c2f58 0%, #222447 100%);
  border: 2px solid #3a3d6c;
  border-top-width: 3px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 3px;
  color: #fff;
}

.cgrid-cell:active { transform: scale(0.94); }
.cgrid-cell.locked { filter: grayscale(0.85); opacity: 0.45; }
.cgrid-cell.indeck { border-color: #2ecc71; box-shadow: 0 0 9px rgba(46, 204, 113, 0.45); }
.cgrid-cell.ready { box-shadow: 0 0 10px rgba(255, 200, 61, 0.55); }
.cgrid-cell.selected { border-color: #fff; }

.cg-bar {
  width: 90%;
  height: 4px;
  background: #15162e;
  border-radius: 2px;
  overflow: hidden;
}

.cg-bar span { display: block; height: 100%; background: linear-gradient(90deg, #7ec8f5, #3498db); }
.cg-bar span.full { background: linear-gradient(90deg, #63e695, #27ae60); }

.cg-check, .cg-up {
  position: absolute;
  top: 1px;
  right: 2px;
}

.cg-check img, .cg-up img { width: 13px; height: 13px; }
.cg-lockrank { font-size: 8px; color: #9093b8; font-weight: 700; }

.card-detail {
  display: flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(180deg, #32355f 0%, #232548 100%);
  border: 2px solid var(--gold);
  border-radius: 12px;
  padding: 10px 12px;
  margin-top: 10px;
  color: #fff;
}

.card-detail .detail-info { flex: 1; min-width: 0; }
.detail-name { font-size: 14px; font-weight: 800; }
.detail-sub { font-size: 11px; color: #9a9ab8; margin-top: 1px; }
.detail-btns { display: flex; flex-direction: column; gap: 6px; }
.detail-btns button { font-size: 11px; padding: 8px 10px; }

/* ---------- Studio watermark ---------- */
#studio-mark {
  position: absolute;
  top: calc(8px + env(safe-area-inset-top));
  left: 0;
  right: 0;
  text-align: center;
  z-index: 9;
  pointer-events: none;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 15px;
  font-weight: 700;
  font-style: italic;
  letter-spacing: 6px;
  text-transform: uppercase;
  background: linear-gradient(180deg, #fff3c4 0%, #ffc83d 35%, #b87a14 70%, #ffe084 100%);
  background-size: 100% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 1px 0 rgba(70, 45, 0, 0.9)) drop-shadow(0 3px 6px rgba(0, 0, 0, 0.55));
  opacity: 0.92;
  animation: mark-shimmer 5s ease-in-out infinite;
}

#studio-mark::after {
  content: "";
  display: block;
  width: 130px;
  height: 2px;
  margin: 3px auto 0;
  background: linear-gradient(90deg, transparent, #ffc83d 30%, #fff3c4 50%, #ffc83d 70%, transparent);
  opacity: 0.7;
}

@keyframes mark-shimmer {
  0%, 100% { background-position: 0% 0%; }
  50% { background-position: 0% 100%; }
}

/* ---------- Overall power banner ---------- */
.power-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: linear-gradient(180deg, #4a4220 0%, #2e2a18 100%);
  border: 2px solid var(--gold-dark);
  border-radius: 12px;
  padding: 10px;
  margin-bottom: 8px;
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 0 12px rgba(255, 200, 61, 0.18);
}

.power-banner .power-val {
  color: var(--gold);
  font-size: 17px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

.cg-name {
  font-size: 7px;
  font-weight: 700;
  color: #cfd2ec;
  line-height: 1.1;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.deck-slot .cg-name { font-size: 7px; }

/* ---------- Scroll fix: home-page lists scroll with the page ----------
   Nested overflow:auto containers trap touch swipes on mobile, so the
   lists embedded in home tabs defer scrolling to .home-page itself. */
#deck-list, #cards-list, #shop-list, #clan-list {
  overflow: visible;
  -webkit-overflow-scrolling: auto;
}

.home-page { touch-action: pan-y; }

/* ---------- Cards tab: lock to vertical scrolling only ----------
   Grid cells default to min-width:auto, so long nowrap names blew
   the 6-column grid wider than the screen. Let cells shrink and
   clamp any sideways overflow. */
.home-page { overflow-x: hidden; }

.card-grid, .deck-slots {
  width: 100%;
  max-width: 100%;
  gap: 5px;
}

.cgrid-cell, .deck-slot {
  min-width: 0;
  max-width: 100%;
  padding: 2px;
}

.cg-name {
  display: block;
  width: 100%;
  text-align: center;
}

.card-detail { min-width: 0; }
.card-detail .detail-info { overflow: hidden; }
.detail-btns button { padding: 7px 8px; font-size: 10px; }

/* Inline card detail spans the grid row beneath the tapped card */
.card-grid .card-detail {
  grid-column: 1 / -1;
  margin: 2px 0;
}

.cg-count {
  font-size: 7px;
  font-weight: 800;
  color: #9fb4ff;
  line-height: 1;
}

/* Max-level (Lv 20) cards wear a glowing champion-gold treatment */
.cgrid-cell.maxed, .deck-slot.maxed {
  border-color: #ffd23d;
  background: linear-gradient(180deg, #3b3252 0%, #2b2542 100%);
  animation: max-glow 2.2s ease-in-out infinite;
}

.cgrid-cell.maxed .cg-lv,
.cgrid-cell.maxed .cg-count,
.deck-slot.maxed .slot-lv { color: #ffd84a; }

.cgrid-cell.maxed .cg-bar span.full {
  background: linear-gradient(90deg, #ffe084, #f1a01b);
}

.card-detail.maxed {
  border-color: #ffd23d;
  box-shadow: 0 0 12px rgba(255, 210, 61, 0.35), inset 0 0 10px rgba(255, 210, 61, 0.12);
}

@keyframes max-glow {
  0%, 100% { box-shadow: 0 0 6px rgba(255, 210, 61, 0.35), inset 0 0 5px rgba(255, 210, 61, 0.15); }
  50%      { box-shadow: 0 0 14px rgba(255, 210, 61, 0.75), inset 0 0 9px rgba(255, 210, 61, 0.3); }
}

/* Selection highlight still wins over the gold border */
.cgrid-cell.maxed.selected { border-color: #fff; }

/* ---------- Profile pictures & frames (Social tab) ---------- */
#profile-row {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #22223a;
  border: 1px solid #2c2c4a;
  border-radius: 12px;
  padding: 10px 12px;
  margin-bottom: 10px;
}

#profile-main { width: 80px; height: 80px; flex-shrink: 0; }

#profile-meta { min-width: 0; }
.profile-name { font-size: 15px; font-weight: 800; color: #fff; margin-bottom: 2px; }
.profile-sub { font-size: 11px; color: #9a9ab8; }

.pfp-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

.pfp-pick {
  width: 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  background: #22223a;
  border: 2px solid #2c2c4a;
  border-radius: 10px;
  padding: 5px 2px 4px;
  color: #9a9ab8;
  font-size: 7px;
  font-weight: 700;
  line-height: 1.1;
  text-align: center;
}

.pfp-pick canvas { width: 44px; height: 44px; }
.pfp-pick.equipped { border-color: #2ecc71; color: #c9ffe2; box-shadow: 0 0 9px rgba(46, 204, 113, 0.45); }
.pfp-pick.locked { filter: grayscale(0.8); opacity: 0.5; }
.pfp-pick:active { transform: scale(0.94); }
.pfp-pick span { width: 100%; overflow: hidden; text-overflow: ellipsis; }

.board-pfp { width: 32px; height: 32px; flex-shrink: 0; }

/* ---------- Mailbox ---------- */
#mail-btn {
  position: absolute;
  top: calc(6px + env(safe-area-inset-top));
  right: 10px;
  z-index: 10;
  width: 44px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #2c2f58 0%, #222447 100%);
  border: 2px solid #3a3d6c;
  border-top-color: #4d519a;
  border-radius: 12px;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4);
}

#mail-btn:active { transform: scale(0.92); }

#mail-btn .tab-badge {
  position: absolute;
  top: -6px;
  right: -6px;
}

#mail-overlay {
  position: fixed;
  inset: 0;
  background: rgba(8, 8, 18, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 30;
}

#mail-overlay.hidden { display: none; }

#mail-box {
  width: min(440px, 94vw);
  max-height: 84dvh;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #232548 0%, #191a33 100%);
  border: 2px solid #3a3d6c;
  border-radius: 16px;
  padding: 12px;
  gap: 10px;
}

#mail-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  font-weight: 800;
  color: #fff;
}

#mail-header-title { flex: 1; }

#mail-list {
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mail-letter {
  background: #22223a;
  border: 1px solid #2c2c4a;
  border-left: 4px solid #3a3d6c;
  border-radius: 10px;
  padding: 10px 12px;
  color: #fff;
}

.mail-letter.unread { border-left-color: #ffd23d; box-shadow: 0 0 8px rgba(255, 210, 61, 0.25); }

.mail-letter-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.mail-version {
  font-size: 11px;
  font-weight: 800;
  color: #ffd84a;
  background: rgba(255, 210, 61, 0.12);
  border: 1px solid rgba(255, 210, 61, 0.4);
  border-radius: 6px;
  padding: 2px 7px;
}

.mail-date { flex: 1; font-size: 10px; color: #9a9ab8; }

.mail-del {
  font-size: 10px;
  font-weight: 700;
  color: #ffb3a7;
  background: rgba(231, 76, 60, 0.15);
  border: 1px solid rgba(231, 76, 60, 0.5);
  border-radius: 6px;
  padding: 3px 9px;
}

.mail-del:active { transform: scale(0.92); }

.mail-title { font-size: 14px; font-weight: 800; margin-bottom: 4px; }
.mail-body { font-size: 11.5px; line-height: 1.5; color: #c6c9e8; }

#mail-btn.hidden { display: none; }

#studio-mark.hidden { display: none; }

/* Card detail: combat stats + ability breakdown */
.detail-stats {
  font-size: 11px;
  font-weight: 800;
  color: #fff;
  margin: 3px 0 2px;
}

.detail-eff { color: #7ee8a2; font-weight: 800; }
.detail-ability { color: #9fb4ff; }

/* Mail letters with attached rewards */
.mail-claim {
  font-size: 11px;
  font-weight: 800;
  color: #2a1d00;
  background: linear-gradient(180deg, #ffe084 0%, #f1a01b 100%);
  border: 1px solid #b87a14;
  border-radius: 6px;
  padding: 4px 10px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  animation: max-glow 2.2s ease-in-out infinite;
}

.mail-claim:active { transform: scale(0.92); }

.mail-claimed {
  margin-top: 6px;
  font-size: 11px;
  font-weight: 700;
  color: #7ee8a2;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* ---------- Cards tab: loud rarity coding (this tab only) ---------- */
#page-cards .cgrid-cell.rarity-common,
#page-cards .deck-slot.rarity-common {
  border-color: #8d9aa0;
  background: linear-gradient(180deg, #2e3440 0%, #232733 100%);
}

#page-cards .cgrid-cell.rarity-rare,
#page-cards .deck-slot.rarity-rare {
  border-color: #3498db;
  background: linear-gradient(180deg, #20355a 0%, #1b2742 100%);
  box-shadow: 0 0 5px rgba(52, 152, 219, 0.25);
}

#page-cards .cgrid-cell.rarity-epic,
#page-cards .deck-slot.rarity-epic {
  border-color: #b06cd8;
  background: linear-gradient(180deg, #3a2454 0%, #281b3d 100%);
  box-shadow: 0 0 7px rgba(155, 89, 182, 0.4);
}

#page-cards .cgrid-cell.rarity-legendary,
#page-cards .deck-slot.rarity-legendary {
  border-color: #f3a012;
  background: linear-gradient(180deg, #4a3415 0%, #332410 100%);
  box-shadow: 0 0 9px rgba(243, 156, 18, 0.5);
}

#page-cards .rarity-common .cg-name    { color: #b8c4c4; }
#page-cards .rarity-rare .cg-name      { color: #7fc1ec; }
#page-cards .rarity-epic .cg-name      { color: #cf9ee8; }
#page-cards .rarity-legendary .cg-name { color: #ffc966; }

/* Deck/upgrade states still read on top of the rarity coding */
#page-cards .cgrid-cell.indeck { border-color: #2ecc71; box-shadow: 0 0 9px rgba(46, 204, 113, 0.45); }
#page-cards .cgrid-cell.ready { box-shadow: 0 0 10px rgba(255, 200, 61, 0.55); }
#page-cards .cgrid-cell.maxed {
  border-color: #ffd23d;
  background: linear-gradient(180deg, #3b3252 0%, #2b2542 100%);
  animation: max-glow 2.2s ease-in-out infinite;
}
#page-cards .cgrid-cell.selected { border-color: #fff; }

/* ---------- Endless mode ---------- */
.home-endless {
  background: linear-gradient(180deg, #6d3db4 0%, #4a2483 100%);
  border-color: #8e5cd9;
}

.home-endless:active { transform: scale(0.96); }

#time-stat.hidden { display: none; }

/* Battle is commitment: no menu hopping mid-run. The old rank button
   is retired from the battle HUD; forfeit lives bottom-left. */
#rank-btn { display: none; }

#forfeit-btn[data-confirm="yes"] {
  background: linear-gradient(180deg, #e74c3c 0%, #b03226 100%);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
}

/* ---------- Save backup & restore ---------- */
.backup-area {
  width: 100%;
  box-sizing: border-box;
  background: #16162a;
  border: 1px solid #44446a;
  border-radius: 8px;
  color: #cfd3ff;
  font-family: ui-monospace, monospace;
  font-size: 11px;
  line-height: 1.35;
  padding: 8px;
  margin: 8px 0;
  min-height: 56px;
  resize: vertical;
  word-break: break-all;
}
#backup-section .social-btn:disabled { opacity: 0.45; }
.social-btn.restore { background: #c06a1e; border-color: #e08a36; width: 100%; }
.social-btn.restore[data-confirm="yes"] { background: #b03226; border-color: #e74c3c; }

/* ---------- PvP / Arena ---------- */
.home-pvp {
  background: linear-gradient(180deg, #c0392b 0%, #8e2920 100%);
  border-color: #e74c3c;
}
.home-pvp:active { transform: scale(0.96); }

#pvp-screen, #pvp-search {
  position: fixed; inset: 0; z-index: 30;
  background: rgba(8, 8, 18, 0.93);
  display: flex; align-items: center; justify-content: center;
}
#pvp-screen.hidden, #pvp-search.hidden { display: none; }

#pvp-box {
  width: min(440px, 94vw); max-height: 86dvh;
  display: flex; flex-direction: column; gap: 8px;
  background: linear-gradient(180deg, #2a1c2e 0%, #191a33 100%);
  border: 2px solid #b03226; border-radius: 16px; padding: 14px;
}
#pvp-header { display: flex; align-items: center; gap: 8px; font-size: 18px; font-weight: 800; color: #fff; }
#pvp-title-text { flex: 1; }
#pvp-trophies { font-size: 22px; font-weight: 800; color: #ffd84a; display: flex; align-items: center; gap: 6px; }
#pvp-record { font-size: 12px; color: #c6c9e8; }
#pvp-road-label { margin-top: 6px; }
#pvp-road { overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }

#pvp-search-box {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  background: linear-gradient(180deg, #2a1c2e 0%, #191a33 100%);
  border: 2px solid #b03226; border-radius: 16px; padding: 28px 26px;
  max-width: 88vw; text-align: center;
}
#pvp-search-spin {
  width: 46px; height: 46px; border-radius: 50%;
  border: 5px solid #44263a; border-top-color: #e74c3c;
  animation: pvp-spin 0.9s linear infinite;
}
@keyframes pvp-spin { to { transform: rotate(360deg); } }
#pvp-search-title { font-size: 18px; font-weight: 800; color: #fff; }
#pvp-search-sub { font-size: 12px; color: #9a9ab8; }
#pvp-search-count { color: #ffd84a; font-weight: 800; }

#pvp-bar {
  position: absolute; top: 0; left: 0; right: 0;
  display: flex; align-items: center; gap: 8px;
  padding: 5px 8px;
  background: linear-gradient(180deg, rgba(20,12,24,0.92), rgba(20,12,24,0.7));
  border-bottom: 1px solid #b03226;
  z-index: 6; color: #fff; pointer-events: none;
}
#pvp-bar.hidden { display: none; }
.pvp-opp { display: flex; align-items: center; gap: 7px; flex: 1; min-width: 0; }
.pvp-opp-pfp { width: 30px; height: 30px; flex-shrink: 0; }
.pvp-opp-info { min-width: 0; }
.pvp-opp-name { font-size: 12px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pvp-hearts { font-size: 12px; font-weight: 800; color: #ff7a6b; display: flex; align-items: center; gap: 3px; }
.pvp-hearts img { width: 13px; height: 13px; }
.pvp-mid { text-align: right; flex-shrink: 0; }
.pvp-round { font-size: 11px; font-weight: 800; color: #ffd84a; }
.pvp-phase { font-size: 12px; font-weight: 800; }
.pvp-phase.pvp-prep { color: #7fd0ff; }
.pvp-phase.pvp-defend { color: #ff7a6b; }
.pvp-phase.pvp-dummy { color: #f1c40f; }
.pvp-phase.pvp-transition { color: #7ee8a2; }
.pvp-incoming { font-size: 10px; color: #c6a4ff; }

#wave-stat.hidden { display: none; }

/* ---------- Equipment / Gear ---------- */
#gear-screen { position: fixed; inset: 0; z-index: 30; background: rgba(8,8,18,0.93); display: flex; align-items: center; justify-content: center; }
#gear-screen.hidden { display: none; }
#gear-box {
  width: min(440px, 94vw); max-height: 88dvh;
  display: flex; flex-direction: column; gap: 8px;
  background: linear-gradient(180deg, #232548 0%, #191a33 100%);
  border: 2px solid #4d519a; border-radius: 16px; padding: 14px;
}
#gear-header { display: flex; align-items: center; gap: 8px; font-size: 18px; font-weight: 800; color: #fff; }
#gear-title-text { flex: 1; }
#gear-gems { font-size: 14px; font-weight: 700; color: #ffd84a; display: flex; align-items: center; gap: 10px; }
#gear-slots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.gear-slot {
  background: #1a1b33; border: 1px solid #3a3d6c; border-radius: 10px;
  padding: 7px 4px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 3px;
}
.gear-slot .gear-icon { width: 38px; height: 38px; }
.gear-slot-name { font-size: 9px; font-weight: 800; }
.gear-slot-bonus { font-size: 8px; color: #9fb4ff; line-height: 1.2; }
.gear-slot-empty { font-size: 22px; color: #4d519a; height: 38px; line-height: 38px; }
#gear-list { overflow-y: auto; display: flex; flex-direction: column; gap: 5px; }
#gear-list .social-label { margin-top: 8px; }
.gear-icon { width: 40px; height: 40px; border-radius: 8px; flex-shrink: 0; }
.gear-row {
  display: flex; align-items: center; gap: 10px;
  background: #22223a; border: 1px solid #2c2c4a; border-left: 4px solid #3a3d6c;
  border-radius: 10px; padding: 7px 10px; color: #fff;
}
.gear-row.rarity-common { border-left-color: #8d9aa0; }
.gear-row.rarity-rare { border-left-color: #3498db; }
.gear-row.rarity-epic { border-left-color: #b06cd8; }
.gear-row.rarity-legendary { border-left-color: #f3a012; }
.gear-row.locked { opacity: 0.5; filter: grayscale(0.7); }
.gear-row.equipped { box-shadow: 0 0 8px rgba(46,204,113,0.4); border-color: #2ecc71; }
.gear-info { flex: 1; min-width: 0; }
.gear-name { font-size: 13px; font-weight: 700; }
.gear-btns { display: flex; flex-direction: column; gap: 4px; flex-shrink: 0; align-items: flex-end; }
.gear-equip, .gear-up {
  border: none; border-radius: 7px; font-size: 11px; font-weight: 800; padding: 5px 9px; white-space: nowrap;
}
.gear-equip { background: #2ecc71; color: #06371d; }
.gear-up { background: #2c2f58; border: 1px solid #4d519a; color: #d7dbff; }
.gear-up:disabled { opacity: 0.45; }
.gear-eq-tag { font-size: 10px; font-weight: 800; color: #7ee8a2; display: flex; align-items: center; gap: 3px; }
.gear-eq-tag img { width: 12px; height: 12px; }

#speed-btn.speed-locked { opacity: 0.7; }
#speed-btn.speed-locked::after { content: " \1F512"; font-size: 9px; }

/* ---------- In-app purchases & premium pass ---------- */
.iap-btn {
  flex-shrink: 0;
  background: linear-gradient(180deg, #2ecc71 0%, #1f9e57 100%);
  border: 1px solid #43e08a;
  color: #fff; font-size: 12px; font-weight: 800;
  border-radius: 8px; padding: 8px 12px; white-space: nowrap;
}
.iap-btn:active { filter: brightness(1.15); }
.iap-row .chest-icon img { width: 30px; height: 30px; }

.pass-premium-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: linear-gradient(180deg, #4a3a12 0%, #2c2410 100%);
  border: 1px solid #b8860b; border-radius: 12px;
  padding: 10px 12px; margin: 8px 0; color: #ffe084;
}
.pass-premium-banner.owned { justify-content: flex-start; gap: 8px; color: #7ee8a2; border-color: #2ecc71; font-weight: 700; font-size: 13px; }
.pass-premium-title { font-size: 14px; font-weight: 800; color: #ffd84a; }

.pass-track-head { display: flex; align-items: center; gap: 6px; margin: 6px 0 2px; font-size: 11px; font-weight: 800; color: #9a9ab8; }
.pass-track-head .reward-rank { visibility: hidden; }
.pass-col { flex: 1; text-align: center; }
.pass-col.gold { color: #ffd84a; }

.pass-row { display: flex; align-items: stretch; gap: 6px; margin-bottom: 6px; }
.pass-row .reward-rank { flex-shrink: 0; align-self: center; width: 26px; }
.pass-cell {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 7px;
  background: #22223a; border: 1px solid #2c2c4a; border-radius: 10px; padding: 7px 9px; color: #fff;
}
.pass-cell.claimable { border-color: #2ecc71; }
.pass-cell.claimed { opacity: 0.5; }
.pass-cell.premium { background: linear-gradient(180deg, #2e2716 0%, #221d11 100%); border-color: #6a5520; }
.pass-cell.premium.claimable { border-color: #ffd23d; box-shadow: 0 0 7px rgba(255,210,61,0.3); }
.pass-cell .quest-icon { font-size: 18px; width: 22px; text-align: center; flex-shrink: 0; }
.pass-cell img.tower-icon, .pass-cell .ric { width: 26px; height: 26px; flex-shrink: 0; }
.pass-cell-info { flex: 1; min-width: 0; }
.pass-cell .quest-name { font-size: 11px; font-weight: 700; }
.pass-cell .card-count { font-size: 9px; }
.pass-cell .quest-claim-btn { padding: 6px 8px; font-size: 10px; }
.pass-locked { flex-shrink: 0; opacity: 0.6; }
.pass-locked img { width: 16px; height: 16px; }

/* ---------- PvP tap-to-peek ---------- */
#pvp-peek-btn {
  position: absolute; top: 46px; right: 8px; z-index: 7;
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(20,12,24,0.85); border: 2px solid #b03226;
  color: #fff; font-size: 18px; line-height: 1;
}
#pvp-peek-btn.hidden { display: none; }
#pvp-peek-btn:active { transform: scale(0.9); }

#pvp-peek {
  position: fixed; inset: 0; z-index: 28;
  background: rgba(8,8,18,0.86);
  display: flex; align-items: center; justify-content: center;
}
#pvp-peek.hidden { display: none; }
#pvp-peek-box {
  background: linear-gradient(180deg, #2a1c2e 0%, #191a33 100%);
  border: 2px solid #b03226; border-radius: 14px; padding: 12px;
  display: flex; flex-direction: column; gap: 8px; max-width: 94vw;
}
#pvp-peek-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 16px; font-weight: 800; color: #fff; }
#pvp-peek-canvas { border-radius: 10px; width: 300px; max-width: 80vw; height: auto; background: #3a7d44; }
#pvp-peek-sub { font-size: 13px; color: #ffd0c4; display: flex; align-items: center; gap: 5px; }
#pvp-peek-sub img { width: 14px; height: 14px; }

/* ---------- Account / cloud save ---------- */
#account-section input {
  width: 100%; box-sizing: border-box;
  background: #16162a; border: 1px solid #44446a; border-radius: 8px;
  color: #fff; font-size: 14px; padding: 10px; margin: 6px 0;
}
.account-row { font-size: 13px; color: #c6c9e8; margin: 4px 0; }
.account-row b { color: #fff; }
#account-section .social-btn.restore { background: #b03226; border-color: #e74c3c; }

.acct-link { background: none; border: none; color: #7fc1ec; font-size: 12px; font-weight: 700; text-decoration: underline; padding: 0; cursor: pointer; }
.acct-unverified { color: #ffb74d; font-size: 11px; font-weight: 700; }