/* ── Pixel icon canvases (data-icon) ─────────────────────────────────── */
canvas[data-icon] {
  display: inline-block;
  vertical-align: middle;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* ── Intro Splash — tap/click to dismiss ─────────────────────────────── */
#introOverlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #000;
  cursor: pointer;
  user-select: none;
  opacity: 1;
  transition: opacity 0.5s ease;
}
#introOverlay.intro-fade {
  opacity: 0;
  pointer-events: none;
}
.intro-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  image-rendering: pixelated;
}
.intro-crow-canvas {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
}
.intro-tap-text {
  position: absolute;
  bottom: 11%;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Press Start 2P', cursive;
  font-size: clamp(13px, 2.4vw, 22px);
  color: #fff;
  text-shadow: 0 0 18px rgba(255,220,80,0.9), 0 2px 8px rgba(0,0,0,0.95);
  animation: introPulse 1.5s ease-in-out infinite;
  letter-spacing: 0.12em;
  user-select: none;
  pointer-events: none;
  white-space: nowrap;
}
@keyframes introPulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.25; }
}

/* ── Reset & Base ────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; overflow: hidden; }
body {
  background: #0d1a0d;
  color: #d4e8d4;
  font-family: 'Nunito', sans-serif;
  font-size: 23px;
  /* Stop accidental text/element selection during play — a drag-select used to
     leave text highlighted and break click/drag interactions. Inputs re-enable
     selection below so the name/room fields stay usable. */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;          /* no iOS long-press callout menu */
  -webkit-tap-highlight-color: transparent;
}
/* Re-enable selection where the user actually types. */
input, textarea {
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}
button {
  cursor: pointer;
  border: 1px solid #4a6a4a;
  background: #1a3a1a;
  color: #d4e8d4;
  border-radius: 4px;
  padding: 4px 10px;
  font-family: inherit;
  font-size: 21px;
  transition: background 0.15s, transform 0.1s;
}
button:hover:not(:disabled) { background: #2a5a2a; transform: translateY(-1px); }
button:active:not(:disabled) { transform: translateY(0); }
button:disabled { opacity: 0.45; cursor: not-allowed; }

/* ── Screens ─────────────────────────────────────────────────────────── */
.screen { display: none; width: 100%; height: 100%; position: absolute; top: 0; left: 0; }

/* ── Menu Screen ─────────────────────────────────────────────────────── */
#menuScreen {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: 32px;
  gap: 0;
  overflow-x: hidden;
  overflow-y: auto;
  background: #08081e;
  image-rendering: pixelated;
}

@media (max-width: 500px) {
  .menu-title { font-size: 28px; letter-spacing: 1px; }
  .menu-sub   { font-size: 7px; }
  .menu-box   { padding: 10px 12px; }
  .menu-box h3 { font-size: 10px; }
}

#menuBg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  image-rendering: pixelated;
}

.menu-ui {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 0 16px 16px;
}

.menu-title {
  font-family: 'Press Start 2P', sans-serif;
  font-size: 46px;
  color: #f0c030;
  text-shadow: 3px 3px 0 #7a3a00, 5px 5px 0 rgba(0,0,0,0.5);
  letter-spacing: 2px;
  margin-bottom: 6px;
}

.menu-sub {
  font-family: 'Press Start 2P', sans-serif;
  font-size: 10px;
  color: #6aaa40;
  letter-spacing: 2px;
  margin-bottom: 10px;
}

.menu-box {
  background: rgba(4, 8, 18, 0.92);
  border: 3px solid #b89030;
  border-radius: 0;
  padding: 14px 18px;
  width: 100%;
  max-width: 450px;
  box-shadow: 4px 4px 0 rgba(0,0,0,0.8), inset 0 0 0 1px rgba(240,180,40,0.10);
}

.menu-box h3 {
  font-family: 'Press Start 2P', sans-serif;
  font-size: 14px;
  color: #f0c030;
  margin-bottom: 10px;
  letter-spacing: 1px;
}

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

.input-row input {
  flex: 1;
  background: rgba(0, 8, 0, 0.80);
  border: 2px solid #4a7020;
  border-radius: 0;
  color: #b8e060;
  padding: 7px 10px;
  font-family: 'Nunito', sans-serif;
  font-size: 23px;
}
.input-row input::placeholder { color: #3a5518; }

/* ── Menu buttons ── */
#menuScreen button {
  font-family: 'Press Start 2P', sans-serif;
  font-size: 12px;
  border-radius: 0;
  border: 2px solid #4a7a28;
  background: rgba(12, 30, 8, 0.88);
  color: #90d050;
  box-shadow: 2px 2px 0 #000;
  letter-spacing: 0.5px;
  padding: 7px 12px;
}
#menuScreen button:hover:not(:disabled) {
  background: rgba(28, 55, 15, 0.92);
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0 #000;
}
#menuScreen button:active:not(:disabled) { transform: translate(0,0); box-shadow: 1px 1px 0 #000; }

.btn-primary {
  border-color: #d0a030 !important;
  background: rgba(80, 50, 5, 0.92) !important;
  color: #f0c030 !important;
}
.btn-primary:hover:not(:disabled) {
  background: rgba(110, 70, 10, 0.96) !important;
}

.btn-avatar {
  border-color: #4a7a28 !important;
}

#roomList { max-height: 130px; overflow-y: auto; margin-top: 6px; }

.room-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 8px;
  border: 2px solid #3a5a1a;
  border-radius: 0;
  margin-bottom: 4px;
  background: rgba(0, 8, 0, 0.65);
}

.no-rooms {
  font-family: 'Press Start 2P', sans-serif;
  font-size: 10px;
  color: #3a5a28;
  text-align: center;
  padding: 14px;
}

#connStatus { position: fixed; top: 8px; right: 12px; font-size: 19px; z-index: 9998; }

/* ── Lobby Screen ────────────────────────────────────────────────────── */
#lobbyScreen {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background: #0d1a0d;
}
.lobby-box {
  background: #0f1f0f;
  border: 1px solid #3a5a3a;
  border-radius: 8px;
  padding: 24px;
  width: 560px;
  max-width: 94vw;
}
.lobby-box h2 { color: #7CFC00; margin-bottom: 4px; }
.lobby-box h3 { color: #90EE90; margin-bottom: 4px; font-size: 23px; }
.lobby-sub { color: #6a8a6a; font-size: 16px; margin-bottom: 14px; }

/* ── 8-seat grid ─────────────────────────────────────────────────────── */
#lobbySlots {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 16px;
}
.lobby-slot {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 6px 10px;
  border-radius: 6px;
  background: #152015;
  border: 2px solid #2a4a2a;
}
.lobby-slot.empty {
  border-style: dashed;
  border-color: #2a3a2a;
  background: #101810;
  justify-content: center;
}
.lobby-slot.bot { border-color: #4a6a8a; background: #131c24; }
.slot-dot { width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 5px rgba(255,255,255,0.2); }
.slot-name { font-weight: bold; color: #cfe8c0; font-size: 18px; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.slot-tags { display: flex; gap: 4px; flex-shrink: 0; }
.slot-tag { font-size: 12px; font-weight: bold; padding: 2px 5px; border-radius: 3px; text-transform: uppercase; }
.slot-tag.host { background: #5a4810; color: #ffd24a; }
.slot-tag.bot  { background: #1d3a52; color: #7fc8ff; }
.slot-tag.you  { background: #1d4a1d; color: #9bff7a; }
.slot-x {
  font-size: 14px; line-height: 1; padding: 3px 7px; border-radius: 4px;
  background: #3a1414; border: 1px solid #6a2020; color: #ff8888; flex-shrink: 0;
}
.slot-x:hover { background: #5a1c1c; }
.slot-addbot {
  font-size: 16px; font-weight: bold; padding: 6px 12px; border-radius: 5px;
  background: rgba(40,70,90,0.4); border: 1px solid #3a6a8a; color: #8fd0ff; width: 100%;
}
.slot-addbot:hover { background: rgba(50,90,120,0.6); }
.slot-empty-label { color: #3a5a3a; font-style: italic; font-size: 15px; }
.lobby-actions { display: flex; gap: 8px; }
#launchBtn:disabled { opacity: 0.4; cursor: not-allowed; }

/* ── Prestige chest shop (lobby) ─────────────────────────────────────── */
.prestige-shop {
  margin-top: 14px;
  padding: 10px 12px;
  background: #0a160a;
  border: 1px solid #3a5a1a;
  border-radius: 6px;
}
.prestige-shop-header {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 21px;
  color: #90EE90;
  margin-bottom: 8px;
}
.prestige-shop-header strong { color: #FFD700; font-size: 24px; }
.prestige-shop-hint { color: #4a6a4a; font-size: 18px; }
.prestige-shop-row { display: flex; align-items: center; gap: 10px; }
.btn-chest {
  background: #1a2a0a;
  border: 1px solid #6a8a3a;
  color: #c8e890;
  padding: 6px 14px;
  font-size: 21px;
  white-space: nowrap;
}
.btn-chest:hover:not(:disabled) { background: #243814; border-color: #8ab850; }
.btn-chest:disabled { opacity: 0.4; }
.chest-cost { color: #FFD700; font-size: 19px; }
#chestResult {
  font-size: 19px;
  color: #aaa;
  flex: 1;
  min-height: 16px;
}

/* ── Game Screen — full-viewport backdrop, clipped ────────────────────── */
#gameScreen {
  display: none;
  overflow: hidden;
  background: #040804;
}

/* Game window: natural fixed size; JS scales + centres it via transform */
#gameWindow {
  display: flex;
  flex-direction: column;
  /* Natural size: 1534×767 = exactly 2:1 (20:10) ratio */
  width: 1534px;
  height: 767px;
  transform-origin: 0 0;   /* JS applies translate+scale from top-left */
  overflow: hidden;
  background: #0a140a;
  border-left: 1px solid #1a3a1a;
  border-right: 1px solid #1a3a1a;
}

/* Middle row: canvas + side panels — fills all space between stats and bottom */
#gameMain {
  display: flex;
  flex-direction: row;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* ── Relic HUD — DOM overlay above the battlefield canvas ───────────── */
#relicHUD {
  position: absolute;
  top: 6px;
  left: 6px;
  display: flex;
  gap: 5px;
  z-index: 10;
  pointer-events: none;
  transition: opacity 0.18s ease;
}
/* Relic icons step aside whenever a bottom tab (ATK / Market / Castle / …) is
   open, so they never sit on top of the squeezed playfield. */
#gameWindow:has(#bottomPanel.bottom-open) #relicHUD {
  opacity: 0;
}
.relic-slot {
  width: 40px;
  height: 40px;
  background: rgba(0, 0, 0, 0.78);
  border-radius: 5px;
  border: 1.5px solid var(--relic-col, #aaa);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 6px 2px var(--relic-col, #aaa);
  animation: relic-glow 1.3s ease-in-out infinite alternate;
}
@keyframes relic-glow {
  from { box-shadow: 0 0 4px 1px var(--relic-col, #aaa); }
  to   { box-shadow: 0 0 16px 6px var(--relic-col, #aaa); }
}

/* Canvas area: stretches to fill gameMain, centers the canvas inside */
#canvasArea {
  flex: 1;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  min-width: 0;
}
#gameCanvas {
  display: block;
  width: 100%;
  max-height: 100%;
  height: auto;
  image-rendering: pixelated;
}

/* ── Players side panel — left of canvas ────────────────────────────── */
#playersSidePanel {
  width: 130px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: #060e06;
  border-right: 2px solid #1e3e1e;
  overflow-y: auto;
  transition: width 0.22s ease, border-color 0.22s ease;
  overflow-x: hidden;
}
.players-side-header {
  font-family: 'Press Start 2P', sans-serif;
  font-size: 10px;
  color: #5a8a40;
  padding: 8px 8px 6px;
  border-bottom: 1px solid #1a3a1a;
  letter-spacing: 1px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

/* ── Emotes ──────────────────────────────────────────────────────────────── */
.emote-btn {
  padding: 2px; line-height: 0;
  background: rgba(40,70,30,0.5);
  border: 1px solid #3a6a2a; border-radius: 6px;
  cursor: pointer; flex-shrink: 0;
}
.emote-btn:hover { background: rgba(60,100,40,0.7); transform: none; }
.emote-btn canvas { image-rendering: pixelated; display: block; }
.emote-picker {
  position: fixed; z-index: 9500;
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px;
  padding: 8px; border-radius: 10px;
  background: rgba(10,20,10,0.96);
  border: 2px solid #3a6a2a;
  box-shadow: 0 6px 24px rgba(0,0,0,0.6);
}
.emote-pick-btn {
  padding: 4px; line-height: 0; border-radius: 6px;
  background: rgba(255,255,255,0.04); border: 1px solid transparent; cursor: pointer;
}
.emote-pick-btn:hover { background: rgba(120,200,80,0.25); border-color: #6fbf3f; transform: none; }
.emote-pick-btn img { image-rendering: pixelated; display: block; }
/* floating emote that pops from an avatar / left edge */
.emote-pop {
  position: fixed; z-index: 8000; pointer-events: none;
  transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  animation: emote-pop-anim 2.3s ease-out forwards;
}
.emote-pop img { image-rendering: pixelated; filter: drop-shadow(0 2px 3px rgba(0,0,0,0.6)); }
.emote-pop-name {
  font-size: 12px; font-weight: bold; color: #eaffd0;
  background: rgba(10,20,10,0.85); border: 1px solid #3a6a2a;
  border-radius: 5px; padding: 1px 6px; white-space: nowrap;
}
@keyframes emote-pop-anim {
  0%   { opacity: 0; transform: translate(-50%, -30%) scale(0.4); }
  14%  { opacity: 1; transform: translate(-50%, -55%) scale(1.15); }
  26%  { transform: translate(-50%, -60%) scale(1); }
  70%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -150%) scale(0.95); }
}
.player-side-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 6px 4px 8px;
  border-bottom: 1px solid #1a3a1a;
  gap: 3px;
  position: relative;        /* anchor for the 🔇 mute badge */
}
.player-side-card.player-side-dead {
  opacity: 0.35;
  filter: grayscale(0.6);
}
.player-side-avatar {
  display: block;
  width: 110px;
  height: 140px;
  image-rendering: pixelated;
  border-radius: 4px;
  border: 1px solid #2a4a2a;
  background: #141e14;
}
.player-side-stats {
  font-size: 15px;
  color: #5a8a5a;
  text-align: center;
  width: 100%;
}
/* Solo wild crops decorative display */
.solo-crops-label {
  font-size: 13px;
  color: #3a5a3a;
  text-align: center;
  padding: 8px 4px 4px;
  font-style: italic;
}
.solo-crop-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  padding: 5px;
}
.solo-crop-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  opacity: 0.52;
  pointer-events: none;
  user-select: none;
}
.solo-crop-icon {
  display: block;
  width: 44px;
  height: 44px;
  image-rendering: pixelated;
}
.solo-crop-name {
  font-size: 11px;
  color: #3a5a3a;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}

/* ── Crop side panel — right of canvas, beside farm & pond ──────────── */
#cropSidePanel {
  width: 130px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: #060e06;
  border-left: 2px solid #1e3e1e;
  overflow-y: auto;
  overflow-x: hidden;
  transition: width 0.22s ease, border-color 0.22s ease;
}

.crop-side-header {
  font-family: 'Press Start 2P', sans-serif;
  font-size: 11px;
  color: #5a8a40;
  padding: 5px 6px 4px;
  border-bottom: 1px solid #1a3a1a;
  letter-spacing: 1px;
  flex-shrink: 0;
}

/* Crop buttons inside the side panel — single column, compact to fit 5 in 450px */
#cropSidePanel #cropOptions {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 4px;
}

#cropSidePanel .btn-crop {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 100%;
  padding: 5px 4px;
  border: 2px solid #2a4a1a;
  border-radius: 6px;
  background: rgba(0,0,0,0.30);
}
#cropSidePanel .btn-crop:hover:not(:disabled) {
  background: rgba(40,70,20,0.55);
  border-color: #4a7a2a;
  transform: none;
}
#cropSidePanel .btn-crop.selected {
  border-color: #FFD700;
  background: rgba(60,70,10,0.55);
  box-shadow: 0 0 0 1px #FFD700;
}
#cropSidePanel .crop-btn-icon { font-size: 30px; }
#cropSidePanel .crop-btn-name { font-size: 13px; font-weight: bold; }
#cropSidePanel .crop-btn-info { font-size: 11px; color: #4a6a38; }

/* ── Bottom panel — collapses to tab-bar only; expands when a tab is active ── */
#bottomPanel {
  flex-shrink: 0;
  height: 51px;              /* collapsed = tab bar only (~30% less than original 73px) */
  display: flex;
  flex-direction: column;
  background: #070e07;
  border-top: 2px solid #1e3e1e;
  overflow: hidden;
  transition: height 0.22s ease;
}
#bottomPanel.bottom-open {
  height: 285px;             /* expanded = tab bar + content (sized so no tab scrolls) */
}

/* ── Collapsed side panels ─────────────────────────────────────────────── */
#playersSidePanel.panel-hidden,
#cropSidePanel.panel-hidden {
  width: 0;
  border-color: transparent;
}

/* ── Side tab buttons — vertical tabs matching ATK/MARKET style ─────────── */
.side-tab-btn {
  flex-shrink: 0;
  align-self: stretch;
  font-family: 'Press Start 2P', sans-serif;
  font-size: 30px;
  padding: 20px 12px;
  border: 2px solid transparent;
  background: #050c05;
  color: #3a5a30;
  cursor: pointer;
  letter-spacing: 0.5px;
  line-height: 1;
  white-space: nowrap;
  transition: color 0.12s, background 0.12s, border-color 0.12s;
}
.side-tab-left {
  writing-mode: vertical-rl;
  transform: rotate(180deg);   /* text reads bottom-to-top on left edge */
  border-right: 1px solid #162816;
}
.side-tab-right {
  writing-mode: vertical-rl;   /* text reads top-to-bottom on right edge */
  border-left: 1px solid #162816;
}
.side-tab-btn:hover:not(:disabled) {
  background: rgba(255,255,255,0.05);
  color: #80b850;
  transform: none;                  /* override global button:hover translateY */
}
.side-tab-left:hover:not(:disabled) {
  transform: rotate(180deg);        /* keep the left-tab rotation on hover */
}
.side-tab-btn.active {
  color: #f0c030;
  border-color: #705a18;
  background: rgba(160,120,15,0.18);
}

/* Tab bar: tabs on left, action icons on right */
#tabBar {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 3px 8px;
  background: #050c05;
  border-bottom: 1px solid #162816;
  flex-shrink: 0;
}

.tab-btn {
  font-family: 'Press Start 2P', sans-serif;
  font-size: 22px;
  padding: 16px 7px;
  border-radius: 4px;
  border: 2px solid transparent;
  background: transparent;
  color: #3a5a30;
  box-shadow: none;
  letter-spacing: 0;
  white-space: nowrap;
  line-height: 1;
  transition: color 0.12s, background 0.12s;
}
/* tab icons: a touch smaller than the side-tab icons so all 7 tabs fit one row */
.tab-btn canvas {
  width: 42px;
  height: 42px;
  image-rendering: pixelated;
  vertical-align: middle;
}
.tab-btn:hover:not(:disabled) {
  background: rgba(255,255,255,0.05);
  color: #80b850;
  transform: none;
  box-shadow: none;
}
.tab-btn.active {
  color: #f0c030;
  border-color: #705a18;
  background: rgba(160,120,15,0.18);
}

.tab-spacer { flex: 1; }

/* Action buttons (missions, opponents, avatar) */
.tab-action-btn {
  font-size: 34px;
  padding: 4px 9px;
  border-radius: 4px;
  border: 2px solid #1e3a1e;
  background: transparent;
  box-shadow: none;
  line-height: 1;
  color: #90c080;
}
.tab-action-btn:hover:not(:disabled) {
  background: rgba(30,55,20,0.85);
  color: #c0e8a0;
  transform: none;
  box-shadow: none;
}
.tab-action-btn.active {
  background: rgba(40,80,120,0.6);
  border-color: #4a90d0;
  color: #aee0ff;
  box-shadow: 0 0 8px rgba(80,170,255,0.5);
}

/* ── Chat (shared line styling) ─────────────────────────────────────────── */
.chat-line { color: #cfe6c0; word-break: break-word; }
.chat-name { font-weight: 800; margin-right: 4px; }
.chat-text { color: #dfeccf; }
.chat-line.mine .chat-text { color: #ffffff; }

/* ── Lobby chat box ─────────────────────────────────────────────────────── */
.chat-box {
  margin-top: 14px;
  border-top: 1px solid #2a4a2a;
  padding-top: 12px;
}
.chat-log {
  height: 118px;
  overflow-y: auto;
  background: #0a160a;
  border: 1px solid #28401e;
  border-radius: 6px;
  padding: 7px 9px;
  margin-bottom: 8px;
  font-family: 'Nunito', sans-serif;
  font-size: 16px;
  line-height: 1.5;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.chat-log:empty::before {
  content: 'No messages yet — say hi! 👋';
  color: #4a6a4a;
  font-style: italic;
  font-size: 15px;
}
.chat-input-row { display: flex; gap: 8px; }
.chat-input {
  flex: 1;
  background: #0c1a0c;
  border: 1px solid #3a5a3a;
  border-radius: 6px;
  color: #eaffd0;
  font-family: 'Nunito', sans-serif;
  font-size: 17px;
  padding: 9px 11px;
  outline: none;
}
.chat-input:focus { border-color: #6fbf3f; box-shadow: 0 0 0 1px rgba(111,191,63,0.4); }
.chat-send {
  background: #1e3a14;
  border: 1px solid #4a7a2a;
  color: #cfe6b0;
  border-radius: 6px;
  padding: 0 18px;
  font-family: 'Nunito', sans-serif;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
}
.chat-send:hover { background: #2a5018; border-color: #6fbf3f; color: #eaffd0; }

/* ── In-game floating last-chat window (bottom-right of the battlefield) ──── */
#gameChat {
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 360px;
  max-width: 44%;
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
  pointer-events: none;            /* field stays clickable behind the chat */
}
/* Recent lines fade out COMPLETELY when idle; they reappear on a new message,
   while composing (Enter / 💬), or on hover (desktop). */
#gameChatLog {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  font-family: 'Nunito', sans-serif;
  opacity: 0;
  transition: opacity 0.5s ease;
}
#gameChat.chat-lit #gameChatLog,
#gameChat.chat-active #gameChatLog,
#gameChat:hover #gameChatLog { opacity: 1; }
#gameChatLog:empty { display: none; }
#gameChatLog .chat-line {
  background: rgba(8,16,8,0.84);
  border: 1px solid #2a4a2a;
  border-radius: 7px;
  padding: 4px 9px;
  font-size: 16px;
  line-height: 1.35;
  max-width: 100%;
  box-shadow: 0 1px 4px rgba(0,0,0,0.5);
}
/* Composer row (input + Send) — only shown while composing */
#gameChatRow {
  display: none;
  gap: 6px;
  width: 100%;
  pointer-events: auto;
}
#gameChat.chat-active #gameChatRow { display: flex; }
#gameChatInput {
  flex: 1;
  min-width: 0;
  background: rgba(8,16,8,0.96);
  border: 1px solid #6fbf3f;
  border-radius: 7px;
  color: #eaffd0;
  font-family: 'Nunito', sans-serif;
  font-size: 16px;
  padding: 8px 11px;
  outline: none;
  box-shadow: 0 0 0 1px rgba(111,191,63,0.35), 0 2px 8px rgba(0,0,0,0.6);
}
#gameChatInput::placeholder { color: #7a9a6a; }
#gameChatSend {
  flex-shrink: 0;
  background: #1e3a14;
  border: 1px solid #6fbf3f;
  color: #eaffd0;
  border-radius: 7px;
  padding: 0 15px;
  font-family: 'Nunito', sans-serif;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.6);
}
#gameChatSend:hover { background: #2a5018; }
/* 💬 launcher — always tappable so touch users (no Enter key) can open chat;
   hidden while the composer is open. */
#gameChatToggle {
  pointer-events: auto;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  background: rgba(8,16,8,0.82);
  border: 1px solid #3a6a2a;
  border-radius: 50%;
  color: #cfe6b0;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  opacity: 0.6;
  box-shadow: 0 2px 8px rgba(0,0,0,0.5);
  transition: opacity 0.2s ease;
}
#gameChatToggle:hover { opacity: 1; }
#gameChat.chat-active #gameChatToggle { display: none; }

/* ── Mute: player context menu + muted indicators ───────────────────────── */
.player-ctx-menu {
  position: fixed; z-index: 9600;
  background: rgba(10,20,10,0.97);
  border: 1px solid #3a6a2a; border-radius: 8px;
  padding: 6px; min-width: 132px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.6);
  font-family: 'Nunito', sans-serif;
}
.pcm-name {
  font-size: 14px; font-weight: 800; color: #cfe6b0;
  padding: 2px 6px 6px; margin-bottom: 5px;
  border-bottom: 1px solid #234a23;
  max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pcm-btn {
  width: 100%; text-align: left;
  background: #1a2a14; border: 1px solid #3a6a3a; color: #eaffd0;
  border-radius: 6px; padding: 7px 10px; font-size: 15px; cursor: pointer;
  font-family: 'Nunito', sans-serif;
}
.pcm-btn:hover { background: #2a5018; border-color: #6fbf3f; }

/* Muted player card: dim + 🔇 badge */
.player-side-card.player-muted { opacity: 0.6; filter: grayscale(0.5); }
.player-mute-badge {
  position: absolute; top: 2px; right: 2px;
  font-size: 14px; line-height: 1;
  background: rgba(8,14,8,0.85); border-radius: 5px; padding: 1px 3px;
  pointer-events: none;
}

/* In-game chat names react to right-click/long-press only while the log is
   visible — so the battlefield stays clickable once chat fades out. */
#gameChat.chat-lit #gameChatLog,
#gameChat.chat-active #gameChatLog,
#gameChat:hover #gameChatLog { pointer-events: auto; }
#gameChatLog .chat-line, #lobbyChatLog .chat-line { cursor: context-menu; }

/* Settings: chat-mute hint + muted toggle state */
.settings-hint { font-size: 13px; color: #6a8a6a; }
.btn-avatar.toggle-muted { background: #4a1414; border-color: #a04040; color: #ffc0b0; }

/* Tab content — scrollable, fills remaining bottom-panel height */
#tabContent {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
}

.tab-pane { display: none; padding: 6px 10px; }
.tab-pane.active { display: block; }

/* ── Castle Upgrade panel ─────────────────────────────────────────────── */
#castlePanel { font-size: 20px; }
.castle-header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.castle-title { color: #FFD700; font-weight: 800; font-size: 24px; }
.castle-sub   { color: #9ab98a; font-size: 18px; }
.castle-upgrade-btn {
  width: 100%; padding: 10px; font-size: 22px; margin-bottom: 12px;
  background: #2a3a5a; border: 2px solid #4a6a9a; color: #cfe0ff; border-radius: 6px; cursor: pointer;
}
.castle-upgrade-btn:hover:not(:disabled) { background: #34507a; }
.castle-upgrade-btn:disabled { opacity: 0.5; cursor: default; }
.castle-upgrade-hint {
  padding: 9px 11px; margin-bottom: 12px; border-radius: 6px; font-size: 19px;
  background: #16202e; border: 1px dashed #3a5a7a; color: #9fb6cc;
}
.castle-upgrade-hint.ready { border-color: #caa83a; background: rgba(160,120,15,0.14); color: #e8d8a8; }
.cu-ready { color: #FFE040; font-weight: 800; }
.cu-cost { color: #FFD700; }
.castle-max { text-align: center; color: #FFD700; font-weight: 800; padding: 8px; margin-bottom: 12px;
  border: 1px solid #6a5a18; border-radius: 6px; background: rgba(160,120,15,0.12); }
.castle-section-title { color: #cfe0a0; font-weight: 700; font-size: 19px; margin: 10px 0 6px; }
.cu-hint { color: #6a8a6a; font-weight: 400; font-size: 16px; }
.castle-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: 6px; }
.cu-cell {
  display: flex; align-items: center; gap: 6px; padding: 6px 8px;
  background: #101c10; border-left: 3px solid var(--at, #888); border-radius: 4px;
}
.cu-name { flex: 1; text-transform: capitalize; font-size: 18px; }
.cu-val  { color: var(--at, #fff); font-weight: 800; width: 48px; text-align: right; font-size: 18px; }
.cu-cell button {
  font-size: 16px; padding: 5px 8px; white-space: nowrap;
  background: #1a3a1a; border: 1px solid #3a6a3a; color: #cfe0a0; border-radius: 4px; cursor: pointer;
}
.cu-cell button:hover:not(:disabled) { background: #2a5a2a; }
.cu-cell button:disabled { opacity: 0.45; cursor: default; }

.panel-hint {
  font-size: 18px;
  color: #446040;
  margin-bottom: 6px;
  line-height: 1.5;
}

/* Stats bar */
#statsBar {
  display: flex;
  flex-wrap: wrap;
  flex-shrink: 0;
  gap: 4px;
  padding: 6px 8px;
  background: #0a160a;
  border-bottom: 1px solid #2a4a2a;
}
.stat-item { font-size: 21px; padding: 2px 6px; background: #152015; border-radius: 3px; }
/* "Someone is spying on you" indicator — pulses red while watched */
#spyWatchHud {
  display: inline-flex; align-items: center; gap: 4px;
  background: #3a1414; border: 1px solid #c0443c; color: #ff9a90;
  font-weight: bold; cursor: default; animation: spyPulse 1.3s ease-in-out infinite;
}
#spyWatchHud .spy-eye { font-size: 18px; line-height: 1; }
#spyWatchHud.spy-multi { background: #4a1010; border-color: #ff5a4a; color: #ffb0a6; }
#spyWatchHud.spy-flash { animation: spyFlash 0.6s ease-out 1, spyPulse 1.3s ease-in-out infinite 0.6s; }
@keyframes spyPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(224,68,60,0.0); } 50% { box-shadow: 0 0 8px 1px rgba(224,68,60,0.55); } }
@keyframes spyFlash { 0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255,90,74,0.9); } 50% { transform: scale(1.35); box-shadow: 0 0 16px 5px rgba(255,90,74,0.8); } 100% { transform: scale(1); } }
#xpBarContainer {
  width: 100%;
  height: 4px;
  background: #1a2a1a;
  border-radius: 2px;
  overflow: hidden;
  margin-top: 2px;
}
#xpBar {
  height: 100%;
  background: linear-gradient(90deg, #4CAF50, #7CFC00);
  border-radius: 2px;
  transition: width 0.3s;
  width: 0%;
}

/* ── Next-wave timer — HUD overlay at bottom-centre of battlefield ──────── */
#prepTimer {
  position: absolute;
  bottom: 10px;
  left: 35%;                    /* ~centre of the battlefield (70 % of canvas) */
  transform: translateX(-50%);
  z-index: 10;
  pointer-events: none;
  color: #90EE90;
  font-size: 21px;
  font-weight: bold;
  background: rgba(0, 0, 0, 0.60);
  border-radius: 5px;
  padding: 4px 14px;
  white-space: nowrap;
  letter-spacing: 0.5px;
}
#prepTimer:empty { display: none; }   /* invisible between waves */

/* ── Market price ticker — inline in the stats bar, right-aligned ────────── */
#marketTicker {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 3px;
  align-items: center;
  pointer-events: none;
  margin-left: auto;
}

/* ── Market status bar — always visible at top of market tab ─────────────── */
#marketStatusBar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 10px 4px;
  font-family: 'Press Start 2P', sans-serif;
  font-size: 11px;
  font-weight: bold;
  letter-spacing: .05em;
  border-bottom: 1px solid #162816;
  flex-shrink: 0;
  gap: 8px;
}
#marketStatusBar.mkt-open   { color: #60d040; }
#marketStatusBar.mkt-closed { color: #e06040; }
#marketStatusBar.mkt-soon   { color: #f0c030; }

.mkt-sentiment {
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 3px;
  border: 1px solid;
  white-space: nowrap;
  flex-shrink: 0;
}
.sent-bull   { color: #40e060; border-color: #40e06060; background: rgba(40,160,40,0.18); }
.sent-bear   { color: #ff5544; border-color: #ff554460; background: rgba(180,40,20,0.18); }
.sent-rising { color: #90d060; border-color: #90d06060; background: rgba(60,120,20,0.15); }
.sent-fall   { color: #f08840; border-color: #f0884060; background: rgba(160,80,10,0.18); }
.sent-flat   { color: #5a8a5a; border-color: #5a8a5a50; background: transparent; }

/* ── Wave countdown in tab bar ───────────────────────────────────────────── */
#waveTimerBar {
  font-family: 'Nunito', sans-serif;
  font-size: 18px;
  font-weight: bold;
  color: #5a8a40;
  padding: 0 8px;
  white-space: nowrap;
  align-self: center;
}
.ticker-crop {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 2px 5px 2px 3px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.62);
  border: 1px solid rgba(255,255,255,0.07);
  backdrop-filter: none;
}
.ticker-crop.t-peak { border-color: rgba(255,215,0,0.55); background: rgba(40,30,0,0.80); }
.ticker-crop.t-low  { border-color: rgba(60,60,60,0.45); }
/* Canvas drawn at 40×40, CSS-scaled to 20×20 — pixel-perfect nearest-neighbour */
.ticker-icon  { width: 20px; height: 20px; display: block; image-rendering: pixelated; flex-shrink: 0; }
.ticker-price { font-size: 18px; font-weight: bold; color: #a0c898; }
.ticker-trend { font-size: 16px; font-weight: bold; padding-left: 1px; }
.ticker-hot   { color: #FFD700; }
.ticker-up    { color: #60e020; }
.ticker-flat  { color: #3a5a3a; }
.ticker-down  { color: #ff9940; }
.ticker-crash { color: #ff4422; }

/* Shop */
#shopSection { }
#shopOffers { display: flex; flex-direction: column; gap: 6px; }
.shop-offer {
  background: #111e11;
  border: 1px solid #3a5a3a;
  border-radius: 6px;
  padding: 8px;
}
.offer-icon { font-size: 38px; text-align: center; }
.offer-name { font-weight: bold; font-size: 23px; text-align: center; }
.offer-rarity { font-size: 18px; text-align: center; color: #888; }
.offer-desc { font-size: 19px; color: #aaa; margin: 3px 0; }
.offer-stats { font-size: 19px; color: #90EE90; margin-bottom: 4px; }
.btn-pick { width: 100%; background: #1a4a1a; border-color: #4a8a4a; font-weight: bold; }

/* Crop panel — big touch grid */
#cropOptions {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  gap: 6px;
}
.btn-crop {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 10px 6px 8px;
  min-height: 80px;
  text-align: center;
  border: 2px solid #2a4a1a;
  border-radius: 6px;
  background: rgba(0,0,0,0.28);
  transition: background 0.12s, border-color 0.12s;
}
.btn-crop:hover:not(:disabled) { background: rgba(40,70,20,0.5); border-color: #4a7a2a; transform: none; }
.btn-crop.selected { border-color: #FFD700; background: rgba(60,70,10,0.5); box-shadow: 0 0 0 1px #FFD700; }
.crop-btn-icon { font-size: 49px; line-height: 1; }
.crop-btn-name { font-size: 19px; font-weight: bold; color: #b8d8b0; }
.crop-btn-info { font-size: 16px; color: #5a7a48; }

/* Market — big touch grid, vertical cards like ATK */
#marketPrices {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(228px, 1fr));
  gap: 6px;
}
.market-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px;
  border-radius: 6px;
  background: rgba(0,0,0,0.28);
  border: 2px solid #1e3a1e;
}
.market-card.peak { border-color: #FFD700; background: rgba(50,60,5,0.4); }
.market-card.low  { border-color: #444; }
.market-top {
  display: flex;
  align-items: center;
  gap: 6px;
}
.market-top-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1;
}
.crop-icon  { font-size: 49px; flex-shrink: 0; line-height: 1; }
/* Pixel art crop icon canvas — market cards & crop side panel */
.crop-icon-canvas {
  width: 32px; height: 32px;
  flex-shrink: 0; display: block;
  image-rendering: pixelated;
}
.crop-btn-icon-canvas {
  width: 26px; height: 26px;
  display: block; image-rendering: pixelated;
  flex-shrink: 0;
}
/* Stats bar icon canvases */
.stat-icon-item { display: flex; align-items: center; gap: 3px; }
.stat-px-icon   { display: block; image-rendering: pixelated; flex-shrink: 0; }
.crop-name  { font-size: 16px; font-weight: bold; color: #b8d8b0; }
.crop-price { font-size: 20px; font-weight: bold; color: #90EE90; }
.price-peak { color: #FFD700; }
.price-low  { color: #888; }
.sparkline  { flex-shrink: 0; align-self: flex-start; }
.crop-stock { font-size: 15px; color: #5a8a5a; }
.crop-stock.empty { color: #334433; font-style: italic; }
.crop-stock.stock-full { color: #ff8866; font-weight: bold; }
.sell-btns  { display: flex; gap: 4px; margin-top: auto; }
.btn-sell-s {
  flex: 1;
  font-size: 14px;
  padding: 5px 3px;
  background: #1a3a1a;
  border-color: #2a6a2a;
  border-radius: 4px;
  color: #90EE90;
  min-height: 28px;
  text-align: center;
  white-space: nowrap;
  letter-spacing: -0.2px;
}
.btn-sell-s img { vertical-align: -1px; margin-left: 1px; }
.btn-sell-s:hover:not(:disabled) { background: #236a23; transform: none; }
.btn-sell-s:disabled { opacity: 0.30; cursor: not-allowed; }

/* ── Buy produce buttons — gold accent ───────────────────────────────── */
.btn-buy-s {
  background: #3a2e0a !important;
  border-color: #8a6a1a !important;
  color: #ffd96a !important;
}
.btn-buy-s:hover:not(:disabled) { background: #5a4612 !important; }
/* keep old .btn-sell for any legacy usage */
.btn-sell { font-size: 18px; padding: 2px 6px; }

/* Missions */
#missionList { display: flex; flex-direction: column; gap: 4px; max-height: 200px; overflow-y: auto; }
.mission-row {
  padding: 4px 6px;
  background: #111e11;
  border: 1px solid #1e3a1e;
  border-radius: 4px;
}
.mission-row.done { border-color: #4CAF50; opacity: 0.6; }
.mission-label { font-size: 19px; }
.mission-progress {
  height: 3px;
  background: #1a2a1a;
  border-radius: 2px;
  margin: 3px 0;
  overflow: hidden;
}
.mission-bar { height: 100%; background: #4CAF50; border-radius: 2px; transition: width 0.3s; }
.mission-reward { font-size: 18px; color: #90EE90; }

/* Opponents */
#opponentsSection { }
#opponentList { display: flex; flex-direction: column; gap: 4px; }
.opponent-card {
  background: #111e11;
  border: 1px solid #1e3a1e;
  border-radius: 4px;
  padding: 6px;
}
.opponent-card.dead { opacity: 0.4; border-style: dashed; }
.opp-name { font-weight: bold; font-size: 21px; }
.opp-stats { font-size: 19px; color: #aaa; margin: 2px 0; }
.btn-send { font-size: 18px; padding: 2px 8px; }
.eliminated { color: #F44336; font-size: 19px; }

/* Fishing */
#fishingSection { }
.btn-fish { width: 100%; font-size: 23px; padding: 8px; background: #1a3a4a; border-color: #2a6a8a; }

/* ── Wave banner ─────────────────────────────────────────────────────── */
#waveBanner {
  position: fixed;
  top: 30px;
  left: 50%;
  transform: translateX(-50%) scale(1);
  background: rgba(0,0,0,0.85);
  color: #FFD700;
  font-size: 38px;
  font-weight: bold;
  padding: 12px 28px;
  border-radius: 8px;
  border: 2px solid #FFD700;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s, transform 0.4s;
  z-index: 100;
}

/* ── Market open/close announcement (big, central, auction-house) ────── */
#marketBanner {
  position: fixed;
  top: 34%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.7);
  text-align: center;
  opacity: 0;
  pointer-events: none;
  z-index: 150;
  transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.2, 1.5, 0.4, 1);
}
#marketBanner.mb-show {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
#marketBanner .mb-main {
  font-size: 60px;
  font-weight: 900;
  letter-spacing: 2px;
  color: #FFD700;
  text-shadow: 0 0 20px rgba(255, 200, 40, 0.85), 0 4px 0 #6b4a00, 0 7px 16px rgba(0, 0, 0, 0.85);
}
#marketBanner .mb-sub {
  margin-top: 6px;
  font-size: 23px;
  font-weight: bold;
  color: #ffe9a0;
  text-shadow: 0 2px 7px rgba(0, 0, 0, 0.9);
}
#marketBanner.mb-closed .mb-main {
  color: #ff8a5a;
  text-shadow: 0 0 18px rgba(255, 90, 40, 0.75), 0 4px 0 #5a1c00, 0 7px 16px rgba(0, 0, 0, 0.85);
}
#marketBanner.mb-closed .mb-sub { color: #ffc6a0; }
#marketBanner .mb-coin { display: inline-block; }
#marketBanner.mb-show .mb-coin { animation: coinflip 0.9s ease-in-out; }
@keyframes coinflip {
  0%   { transform: scaleX(1); }
  25%  { transform: scaleX(0.12); }
  50%  { transform: scaleX(1); }
  75%  { transform: scaleX(0.12); }
  100% { transform: scaleX(1); }
}
#marketBanner .mb-gavel { display: inline-block; transform-origin: 65% 35%; }
#marketBanner.mb-show .mb-gavel { animation: gavelknock 0.6s ease-in-out; }
@keyframes gavelknock {
  0%   { transform: rotate(-30deg) translateY(-4px); }
  30%  { transform: rotate(0deg)   translateY(0); }
  48%  { transform: rotate(-16deg) translateY(-3px); }
  72%  { transform: rotate(0deg)   translateY(0); }
  100% { transform: rotate(0deg); }
}

/* ── Modals ──────────────────────────────────────────────────────────── */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.75);
  align-items: center;
  justify-content: center;
  z-index: 200;
}
.modal-box {
  background: #0f1f0f;
  border: 2px solid #4a7a4a;
  border-radius: 10px;
  padding: 24px;
  min-width: 320px;
  max-width: 480px;
}
.modal-box h3 { color: #FFD700; margin-bottom: 16px; font-size: 32px; text-align: center; }

/* ── Settings modal (audio volume) ─────────────────────────────────────── */
.settings-box { min-width: 380px; }
.settings-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 14px 0;
}
.settings-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: 90px;
  flex-shrink: 0;
  font-size: 22px;
  font-weight: 700;
  color: #cfe8b8;
}
.settings-val {
  width: 56px;
  flex-shrink: 0;
  text-align: right;
  font-size: 20px;
  font-weight: 700;
  color: #FFD700;
}
.settings-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}
/* Range slider — themed */
.settings-row input[type="range"] {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 8px;
  border-radius: 4px;
  background: #1c3a1c;
  border: 1px solid #2e5a2e;
  outline: none;
  cursor: pointer;
}
.settings-row input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #FFD700;
  border: 2px solid #8a6a10;
  cursor: pointer;
  box-shadow: 0 0 4px rgba(255,215,0,0.5);
}
.settings-row input[type="range"]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #FFD700;
  border: 2px solid #8a6a10;
  cursor: pointer;
}

/* ── Menu button row (Customize Avatar + Settings, side by side) ───────── */
.menu-btn-row {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}
.menu-btn-row .btn-avatar { flex: 1; }

/* Perk modal */
#perkList { display: flex; flex-direction: column; gap: 10px; }
.btn-perk {
  width: 100%;
  padding: 12px;
  text-align: left;
  font-size: 23px;
  background: #1a3a1a;
  border-color: #3a6a3a;
}
.btn-perk:hover { background: #2a5a2a; }

/* Send modal */
#sendCreepList { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.btn-send-option {
  padding: 10px;
  text-align: left;
  background: #3a1a1a;
  border-color: #7a3a3a;
  font-size: 21px;
}
.btn-send-option:hover { background: #5a2a2a; }

/* Fish modal */
#fishModal .modal-box { text-align: center; }
#fishResult {
  display: none;
  font-size: 35px;
  font-weight: bold;
  color: #FFD700;
  margin: 16px 0;
}
.fish-animation {
  font-size: 84px;
  margin: 12px 0;
  animation: bob 1s ease-in-out infinite;
}
@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
.btn-fish-cast {
  background: #1a4a6a;
  border-color: #2a7aaa;
  padding: 10px 24px;
  font-size: 24px;
  font-weight: bold;
}

/* Game Over */
#gameOverModal .modal-box { text-align: center; }
#gameOverTitle { font-size: 63px; margin-bottom: 16px; }
.game-over-stats { margin-bottom: 20px; color: #aaa; }

/* ── Post-game scoreboard ────────────────────────────────────────────────── */
.pg-wave { font-size: 22px; color: #cfe8c0; margin-bottom: 10px; }
.pg-table {
  width: 100%; max-width: 560px; margin: 0 auto 14px; border-collapse: collapse;
  font-size: 18px; color: #cfe0c0;
}
.pg-table th {
  font-size: 14px; color: #6a9a5a; text-transform: uppercase; letter-spacing: 1px;
  padding: 4px 8px; border-bottom: 2px solid #2a4a2a; text-align: left;
}
.pg-table td { padding: 5px 8px; border-bottom: 1px solid #18301840; }
.pg-table .pg-name { font-weight: bold; color: #e0f0d0; }
.pg-table .pg-hp img { vertical-align: -1px; }
.pg-diff {
  font-size: 11px; font-weight: bold; text-transform: uppercase;
  background: #1d3a52; color: #7fc8ff; border-radius: 3px; padding: 1px 5px; margin-left: 4px;
}
.pg-table tr.pg-me   td { background: rgba(60,110,40,0.22); }
.pg-table tr.pg-win  td { background: rgba(180,150,30,0.22); color: #ffe48a; }
.pg-table tr.pg-win .pg-name { color: #ffe48a; }
.pg-yourrun {
  max-width: 560px; margin: 0 auto 12px; padding: 8px 12px;
  background: rgba(0,0,0,0.25); border: 1px solid #2a4a2a; border-radius: 8px;
  font-size: 16px; color: #b8d8b0; line-height: 1.8;
}
.pg-yourrun img { vertical-align: -2px; }
.pg-crows { color: #aaa; font-size: 18px; margin-top: 4px; }

/* ── Interactive postgame: tabs, graphs, comparison ──────────────────────── */
#gameOverModal .modal-box {
  max-width: 720px; width: 94vw;
  max-height: 92vh; overflow-y: auto;
}
.pg-dot {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  margin-right: 6px; vertical-align: 1px;
}
.pg-tabs {
  display: flex; gap: 6px; justify-content: center; margin: 6px 0 14px;
  flex-wrap: wrap;
}
.pg-tab {
  background: #16291350; border: 1px solid #2a4a2a; color: #9bbf8c;
  padding: 7px 16px; border-radius: 7px; font-size: 15px; font-weight: bold;
  cursor: pointer; transition: background .12s, color .12s, border-color .12s;
}
.pg-tab:hover { background: #1d3a1d; color: #cfe8c0; }
.pg-tab.active { background: #2a6a1a; border-color: #4a9a2a; color: #eafce0; }
.pg-pane { display: none; }
.pg-pane.active { display: block; }

.pg-canvas {
  width: 600px; max-width: 100%; height: 300px; display: block;
  margin: 6px auto 8px; background: rgba(0,0,0,0.22);
  border: 1px solid #24401f; border-radius: 8px;
}
.pg-radar { width: 360px; height: 300px; }

.pg-metric-row { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin-bottom: 4px; }
.pg-metric {
  background: #14241050; border: 1px solid #284a26; color: #88aa7c;
  padding: 4px 12px; border-radius: 14px; font-size: 13px; cursor: pointer;
}
.pg-metric:hover { color: #cfe8c0; }
.pg-metric.active { background: #356a1f; border-color: #4a9a2a; color: #eafce0; }

.pg-legend { display: flex; gap: 10px 16px; justify-content: center; flex-wrap: wrap; margin: 4px auto 2px; }
.pg-leg { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: #cfe0c0; cursor: pointer; user-select: none; }
.pg-leg i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.pg-leg.off { opacity: 0.38; text-decoration: line-through; }
.pg-hint { font-size: 12px; color: #6a8a6a; text-align: center; margin-top: 4px; }
.pg-empty { color: #b8d8b0; font-size: 17px; padding: 38px 10px; text-align: center; line-height: 1.7; }

.pg-cmp-head { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 6px 0 4px; font-size: 17px; color: #e0f0d0; }
.pg-cmp-you { color: #FFD700; font-weight: bold; }
.pg-cmp-vs { color: #6a8a6a; }
.pg-cmp-select {
  background: #14241080; border: 1px solid #3a6a2a; color: #cfe8c0;
  padding: 5px 10px; border-radius: 6px; font-size: 15px; cursor: pointer;
}
.pg-cmp-table { width: 100%; max-width: 420px; margin: 4px auto 0; border-collapse: collapse; font-size: 16px; color: #cfe0c0; }
.pg-cmp-table th { font-size: 13px; color: #6a9a5a; text-transform: uppercase; letter-spacing: 1px; padding: 4px 10px; border-bottom: 2px solid #2a4a2a; }
.pg-cmp-table td { padding: 5px 10px; border-bottom: 1px solid #18301840; text-align: center; }
.pg-cmp-metric { text-align: left !important; color: #9bbf8c; }
.pg-cmp-mine { color: #FFD700; font-weight: bold; }
.btn-restart {
  background: #2a6a1a;
  border-color: #4a9a2a;
  padding: 10px 28px;
  font-size: 26px;
  font-weight: bold;
  color: #fff;
}

/* ── Toasts ──────────────────────────────────────────────────────────── */
#toastContainer {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 300;
  pointer-events: none;
}
.toast {
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 21px;
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.3s, transform 0.3s;
  max-width: 280px;
}
.toast.show { opacity: 1; transform: translateX(0); }
.toast-info    { background: #1a3a5a; border: 1px solid #2a6a9a; }
.toast-success { background: #1a4a1a; border: 1px solid #2a8a2a; color: #90EE90; }
.toast-warning { background: #4a3a1a; border: 1px solid #9a7a2a; color: #FFD700; }
.toast-danger  { background: #4a1a1a; border: 1px solid #9a2a2a; color: #FF8888; }

/* ── Spectate bar — floats above the spy view after you're eliminated ── */
#spectateBar {
  position: fixed; top: 0; left: 50%; transform: translateX(-50%);
  z-index: 600; display: flex; align-items: center; gap: 9px;
  padding: 7px 13px; background: rgba(22,10,10,0.94);
  border: 1px solid #c0443c; border-top: none; border-radius: 0 0 11px 11px;
  box-shadow: 0 3px 14px rgba(0,0,0,0.55);
}
#spectateBar .spec-skull { font-size: 18px; }
#spectateBar .spec-label { color: #ff8a80; font-weight: bold; font-size: 16px; letter-spacing: 0.5px; }
#spectateBar .spec-btn {
  display: inline-flex; align-items: center; gap: 5px;
  background: #1a3a1a; color: #d4e8d4; border: 1px solid #4a6a4a;
  border-radius: 6px; padding: 7px 11px; font-size: 15px; cursor: pointer;
  transition: background .12s, border-color .12s;
}
#spectateBar .spec-btn:hover { background: #2a5a2a; border-color: #6a9a6a; }
#spectateBar .spec-btn canvas { image-rendering: pixelated; vertical-align: middle; }
#spectateBar .spec-results { background: #3a2a10; border-color: #b8860b; color: #ffd24a; }

/* ── Spy view — full-screen opponent battlefield overlay ────────────── */
#spyView {
  display: none;
  position: fixed;
  inset: 0;
  background: #000;
  z-index: 500;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
}
#spyHeader {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
#spyPlayerName {
  font-family: 'Press Start 2P', sans-serif;
  font-size: clamp(10px, 1.4vw, 18px);
  color: #90EE90;
  letter-spacing: 2px;
}
#spyPlayerStats {
  font-size: 19px;
  color: #4a7a4a;
}
#spyFrame, #spyBotCanvas {
  display: none;
  max-width: 99vw;
  max-height: 90vh;
  width: auto;
  height: auto;
  border: 1px solid #1a3a1a;
  image-rendering: pixelated;
}
#spyWaiting {
  display: none;
  color: #3a6a3a;
  font-size: 21px;
  padding: 40px;
}
#spyReturn {
  font-family: 'Press Start 2P', sans-serif;
  font-size: clamp(7px, 0.85vw, 12px);
  color: rgba(255,255,255,0.25);
  letter-spacing: 2px;
  animation: introPulse 2.2s ease-in-out infinite;
}
.player-side-card:hover {
  background: rgba(40,70,20,0.35);
}

/* ── Scrollbar ───────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #0a160a; }
::-webkit-scrollbar-thumb { background: #2a4a2a; border-radius: 3px; }

/* ── Character Creator ───────────────────────────────────────────────── */
#charCreatorModal .modal-box {
  max-width: 460px;
  width: 460px;
  padding: 20px 22px 18px;
}
.char-creator-layout {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  margin: 12px 0 14px;
}
.char-preview-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
#charPreviewCanvas {
  background: #141e14;
  border: 2px solid #3a5a3a;
  border-radius: 8px;
  image-rendering: pixelated;
  display: block;
}
.char-preview-label {
  font-size: 16px;
  color: #5a7a5a;
  text-transform: uppercase;
  letter-spacing: 2px;
}

/* Groups */
.char-groups {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.cc-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.cc-group-label {
  font-size: 18px;
  color: #7ab07a;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  user-select: none;
}
.cc-unlock-hint {
  color: #7a6a20;
  font-size: 16px;
  letter-spacing: 0;
  text-transform: none;
  margin-left: 4px;
}
.cc-presets {
  display: flex;
  gap: 6px;
  align-items: center;
}
/* Each preset swatch — split colour via CSS background gradient */
.cc-preset-swatch {
  width: 34px;
  height: 34px;
  border-radius: 7px;
  border: 2px solid #2a4a2a;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform 0.12s, border-color 0.12s, box-shadow 0.12s;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);
}
.cc-preset-swatch:hover {
  transform: scale(1.14);
  border-color: #7CFC00;
  box-shadow: 0 0 6px rgba(124,252,0,0.35), inset 0 0 0 1px rgba(255,255,255,0.06);
}
.cc-preset-swatch.selected {
  border-color: #FFD700;
  border-width: 2.5px;
  box-shadow: 0 0 10px rgba(255,215,0,0.55), inset 0 0 0 1px rgba(255,255,255,0.12);
  transform: scale(1.08);
}

/* Prestige swatch row — shown below the regular swatches */
.cc-prestige-row {
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px dashed #2a4a1a;
  min-height: 10px;
}
.cc-prestige-swatch {
  position: relative;
}
.cc-prestige-swatch.prestige-locked {
  cursor: not-allowed;
  opacity: 0.45;
  border-color: #2a2a2a;
}
.cc-prestige-swatch.prestige-locked:hover {
  transform: none;
  border-color: #2a2a2a;
  box-shadow: none;
}
.cc-prestige-swatch.prestige-unlocked {
  border-color: #7a5a00;
  box-shadow: 0 0 6px rgba(255,200,0,0.2), inset 0 0 0 1px rgba(255,255,255,0.08);
}
.cc-prestige-swatch.prestige-unlocked:hover {
  border-color: #FFD700;
  box-shadow: 0 0 10px rgba(255,215,0,0.5);
}
.cc-prestige-swatch.prestige-unlocked.selected {
  border-color: #FFD700;
  box-shadow: 0 0 14px rgba(255,215,0,0.7);
}
.prestige-lock-icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  pointer-events: none;
}

/* ── Character select tabs (30 characters — strip wraps + scrolls) ───── */
.cc-char-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 12px;
  max-height: 138px;
  overflow-y: auto;
  scrollbar-width: thin;
}
.cc-tab-emoji { font-size: 14px; line-height: 1; }

/* ── DEV panel (visible only with body.dev-mode; Ctrl+Shift+D collapses) ── */
#devPanel { display: none; }
body.dev-mode #devPanel {
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: absolute;
  left: 8px;
  top: 56px;
  z-index: 60;
  padding: 7px 8px;
  background: rgba(10, 14, 8, 0.88);
  border: 1px solid #FFD700;
  border-radius: 7px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.55);
}
#devPanel .dev-title {
  color: #FFD700;
  font-weight: bold;
  font-size: 13px;
  text-align: center;
  letter-spacing: 1px;
  margin-bottom: 2px;
}
#devPanel button {
  background: #1a240f;
  border: 1px solid #4a6a2a;
  color: #cfe0a0;
  font-size: 13px;
  padding: 4px 9px;
  border-radius: 5px;
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
  transition: background 0.12s, border-color 0.12s;
}
#devPanel button:hover { background: #2a3a18; border-color: #FFD700; color: #ffe9a0; }
#devPanel.dev-collapsed button { display: none; }
#devPanel.dev-collapsed .dev-title { margin-bottom: 0; cursor: default; }

/* ── Wardrobe (item system: inventory + avatar creation) ─────────────── */
/* Full-screen window: every tier fits on one labelled row → no scrolling */
.wardrobe-box {
  width: 96vw;
  max-width: none;
  height: 94vh;
  max-height: 94vh;
  display: flex;
  flex-direction: column;
  padding: 14px 20px;
}
.wardrobe-tabs { display: flex; gap: 6px; align-items: center; margin-bottom: 10px; flex: 0 0 auto; }
.wardrobe-tabs .cc-char-tab { flex: 0 1 220px; }
.wardrobe-tabs .wardrobe-close { flex: 0 0 auto; margin-left: auto; }
.wardrobe-hint { color: #6a8a6a; font-size: 13px; margin-left: 8px; }
.wardrobe-pane { overflow-y: auto; scrollbar-width: thin; flex: 1; }
.w-inv-grid { display: flex; flex-direction: column; gap: 8px; min-height: 100%; justify-content: flex-start; padding-bottom: 10px; }
.w-inv-pets-hdr { margin-top: 6px; padding: 6px 0 2px; border-top: 1px solid rgba(255,255,255,0.10); font-weight: bold; font-size: 16px; letter-spacing: 1px; color: #cfe0c0; }
.w-tier-row { display: flex; align-items: center; gap: 12px; }
.w-inv-tier {
  flex: 0 0 104px;
  font-weight: bold;
  font-size: 13px;
  letter-spacing: 2px;
  text-align: right;
}
.w-tier-cells { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; }
.w-item-cell {
  position: relative;
  width: 64px;
  background: #121a10;
  border: 1.5px solid #2a3a2a;
  border-radius: 7px;
  padding: 4px 3px 2px;
  text-align: center;
}
.w-item-cell canvas { display: block; margin: 0 auto; image-rendering: pixelated; }
.w-item-name { font-size: 9px; color: #9eb89e; margin-top: 2px; line-height: 1.1; white-space: nowrap; overflow: hidden; }
.w-item-count {
  position: absolute; top: 1px; right: 3px;
  font-size: 11px; font-weight: bold; color: #ffe080;
  text-shadow: 0 1px 2px #000;
}
.w-item-locked { opacity: 0.75; }
.w-item-locked .w-item-name { color: #4a564a; }
.w-av-layout { display: flex; gap: 20px; align-items: flex-start; height: 100%; }
.w-av-left { flex: 0 0 220px; text-align: center; }
.w-av-left canvas {
  background: #101a10; border: 1px solid #2a4a2a; border-radius: 8px;
  width: 220px; height: auto; image-rendering: pixelated;
}
.w-save-btn { width: 100%; margin-top: 10px; }
.w-av-right { flex: 1; min-width: 0; display: flex; flex-direction: column; height: 100%; }
.w-slot-tabs { display: flex; gap: 5px; margin-bottom: 8px; flex: 0 0 auto; }
.w-slot-tabs .cc-char-tab { flex: 0 1 160px; }
.w-piece-grid {
  display: flex; flex-wrap: wrap; gap: 6px; align-content: flex-start;
  flex: 0 1 auto; max-height: 44vh; overflow-y: auto; scrollbar-width: thin;
  padding: 8px; background: #0e160e; border-radius: 7px; margin-bottom: 8px;
}
.w-piece { width: 62px; padding: 3px; cursor: pointer; transition: border-color .12s, transform .12s; }
.w-piece:hover { transform: translateY(-2px); }
.w-piece.selected { box-shadow: 0 0 9px rgba(255, 224, 128, 0.55); outline: 2px solid #ffe080; }
.cc-char-tab {
  flex: 1 1 70px;
  padding: 6px 5px;
  font-size: 19px;
  background: #0f1f0f;
  border: 1px solid #2a4a2a;
  color: #6a8a6a;
  border-radius: 5px;
  cursor: pointer;
  text-align: center;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.cc-char-tab:hover:not(:disabled) { background: #1a2e1a; border-color: #4a7a4a; color: #90EE90; }
.cc-char-tab.active { background: #1a3a1a; border-color: #7CFC00; color: #7CFC00; font-weight: bold; }
.cc-char-tab.active[data-tier="noble"]  { border-color: #c090e8; color: #c090e8; }
.cc-char-tab.active[data-tier="royal"]  { border-color: #FFD700; color: #FFD700; }
.cc-char-tab.active[data-tier="god"]    { border-color: #60e0ff; color: #60e0ff; background: #080c18; }
.cc-char-tab:disabled { opacity: 0.4; cursor: not-allowed; }

/* Battle avatar unlock section */
.battle-avatar-section {
  margin: 10px 0 2px;
  padding: 10px 14px;
  background: linear-gradient(135deg, #1a0a0a 0%, #0e1a0e 100%);
  border: 1px solid #8B3010;
  border-radius: 6px;
  box-shadow: 0 0 12px rgba(180,60,0,0.2);
}
.battle-avatar-badge {
  font-size: 21px;
  color: #FF8040;
  margin-bottom: 6px;
  letter-spacing: 0.3px;
}
.battle-avatar-badge strong { color: #FFA060; }
.battle-avatar-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.battle-avatar-desc {
  font-size: 18px;
  color: #8a6a5a;
  flex: 1;
  line-height: 1.4;
}
.btn-battle-toggle {
  background: #2a0a0a;
  border: 1px solid #8B3010;
  color: #FF8040;
  padding: 6px 12px;
  font-size: 19px;
  white-space: nowrap;
  flex-shrink: 0;
}
.btn-battle-toggle:hover:not(:disabled) { background: #3a1010; border-color: #FF5020; }

/* Footer */
.char-creator-footer {
  display: flex;
  gap: 10px;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid #1a3a1a;
  padding-top: 12px;
  margin-top: 2px;
}
.char-creator-footer .footer-right { display: flex; gap: 8px; }

/* Avatar button (lobby + panel) */
.btn-avatar {
  font-size: 19px;
  padding: 5px 12px;
  background: #1a2a3a;
  border-color: #2a4a6a;
  color: #90c8e8;
}
.btn-avatar:hover:not(:disabled) { background: #203050; }

/* ── Opponent mini-maps ───────────────────────────────────────────────── */
.opp-minimap {
  display: block;
  width: 100%;
  image-rendering: pixelated;
  border: 1px solid #2a4a2a;
  border-radius: 3px;
  margin: 5px 0 3px;
  cursor: pointer;
  transition: border-color 0.15s;
}
.opp-minimap:hover {
  border-color: #4aaa4a;
}
.opponent-card {
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid #1a3a1a;
}

/* ── Stat popup (tower / creep inspector) ────────────────────────────────── */
#statPopup {
  position: absolute;
  z-index: 180;
  background: rgba(6, 14, 6, 0.96);
  border: 1px solid #3a6a3a;
  border-radius: 7px;
  padding: 10px 12px 9px;
  min-width: 165px;
  max-width: 200px;
  font-size: 19px;
  color: #c8e4c8;
  pointer-events: none;
  box-shadow: 0 5px 22px rgba(0,0,0,0.85), 0 0 0 1px rgba(255,255,255,0.04);
  line-height: 1.45;
  user-select: none;
}
.sp-head {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 2px;
}
.sp-icon { font-size: 26px; flex-shrink: 0; line-height: 1; }
.sp-icon-cv { flex-shrink: 0; image-rendering: pixelated; vertical-align: middle; width: 40px; height: 40px; }
.sp-lbl img, .sp-val img, .sp-sell img, .sp-elem img, .sp-status img { vertical-align: middle; margin-right: 1px; }
.sp-name { font-weight: bold; color: #eef8ee; font-size: 21px; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-tier {
  font-size: 16px;
  font-weight: bold;
  border: 1px solid;
  border-radius: 3px;
  padding: 1px 4px;
  flex-shrink: 0;
  letter-spacing: 0.3px;
}
.sp-rarity {
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 0.9px;
  margin: 1px 0 5px 22px;
  opacity: 0.85;
}
.sp-divider {
  height: 1px;
  background: rgba(255,255,255,0.07);
  margin: 5px 0;
}
.sp-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  padding: 1.5px 0;
}
.sp-lbl { color: #6a9a6a; font-size: 18px; }
.sp-val { color: #ddf0dd; font-weight: 500; text-align: right; font-size: 19px; }
/* HP bar */
.sp-hpwrap { margin: 4px 0 2px; }
.sp-hpbar {
  height: 5px;
  background: #111e11;
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 2px;
  border: 1px solid #1e3a1e;
}
.sp-hpfill { height: 100%; border-radius: 2px; }
.sp-hptext { font-size: 18px; color: #7a9a7a; text-align: right; }
/* Elemental hints */
.sp-elem {
  font-size: 18px;
  margin-top: 3px;
  line-height: 1.35;
}
.sp-elem.strong { color: #88dd55; }
.sp-elem.weak   { color: #88aabb; }
/* Sell / footer */
.sp-sell { font-size: 18px; color: #ccaa44; }
/* Status effects */
.sp-statusrow {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  margin-top: 3px;
}
.sp-status {
  font-size: 16px;
  padding: 1px 5px;
  border-radius: 3px;
  font-weight: 500;
}
.sp-status.slowed  { background: #0a2030; color: #66ccff; border: 1px solid #1a5070; }
.sp-status.burning { background: #200a00; color: #ff8844; border: 1px solid #703010; }

/* ── Sell confirm popup ───────────────────────────────────────────────────── */
#sellConfirmPopup {
  position: absolute;
  z-index: 185;
  background: rgba(10, 7, 3, 0.97);
  border: 1px solid #7a5018;
  border-radius: 7px;
  padding: 10px 12px;
  min-width: 142px;
  font-size: 19px;
  color: #e0d0a8;
  box-shadow: 0 5px 22px rgba(0,0,0,0.88), 0 0 0 1px rgba(255,200,80,0.06);
  user-select: none;
}
.sc-title {
  display: flex;
  align-items: center;
  gap: 5px;
  font-weight: bold;
  font-size: 21px;
  color: #f0e8cc;
  margin-bottom: 3px;
}
.sc-tier {
  font-size: 16px;
  border: 1px solid;
  border-radius: 3px;
  padding: 1px 4px;
  font-weight: bold;
}
.sc-refund {
  font-size: 19px;
  color: #bbaa44;
  margin-bottom: 9px;
  padding-left: 1px;
}
.sc-btns { display: flex; gap: 6px; }
.sc-btn {
  flex: 1;
  padding: 5px 0;
  font-size: 19px;
  font-weight: bold;
  border-radius: 4px;
  cursor: pointer;
  border: 1px solid;
  transition: background 0.1s, border-color 0.1s;
}
.sc-confirm { background: #3a1208; border-color: #993322; color: #ff8866; }
.sc-confirm:hover { background: #5a1e0c; border-color: #cc5533; }
.sc-cancel  { background: #081408; border-color: #2a5a2a; color: #88cc88; }
.sc-cancel:hover  { background: #0e240e; border-color: #4a8a4a; }

/* ── Active attack-type dot in tower stat popup ──────────────────────────── */
.sp-act { color: #88ee88; font-size: 16px; }

/* ── Global Attack Priority Panel ────────────────────────────────────────────
   Always-visible panel at bottom-left of the arena.
   Each row is a toggleable attack type; ON forces all eligible T3+ towers
   to fire their secondary instead of primary.                          */
/* ATK tab: 5-column grid of big toggle cards */
#attackPriorityPanel {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  padding: 8px;
  width: 100%;
  background: transparent;
  border: none;
  box-shadow: none;
  overflow: visible;
  font-size: 19px;
  color: #b8d8b8;
  user-select: none;
}
.app-header {
  grid-column: 1 / -1;           /* span all 5 columns */
  font-size: 14px;
  font-weight: bold;
  color: #5a8a5a;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 0 2px 6px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

/* Each attack-type: tap card — big icon, label, ON/OFF badge */
.app-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 7px 4px;
  background: rgba(0,0,0,0.30);
  border: 2px solid rgba(255,255,255,0.06);
  border-radius: 6px;
  color: #5a8a5a;
  font-size: 19px;
  cursor: pointer;
  text-align: center;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
  box-sizing: border-box;
  width: 100%;
}
.app-row:first-of-type { border-top: 2px solid rgba(255,255,255,0.06); }
.app-row:hover { background: rgba(255,255,255,0.08); color: #a0c090; border-color: rgba(255,255,255,0.14); }
.app-row.app-on {
  color: #e0f0d0;
  border-color: rgba(180,220,80,0.4);
  background: rgba(50,90,20,0.35);
}

/* Big attack-type icon (matches the 42px menu/tab icons) */
.app-ico {
  display: block;
  line-height: 0;
}
.app-ico img { width: 42px; height: 42px; image-rendering: pixelated; display: block; }
.app-label {
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  line-height: 1.15;
  word-break: break-word;
}
.app-badge {
  font-size: 17px;
  font-weight: bold;
  color: #4a6a4a;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
}
.app-badge-on { color: inherit; }
.app-count {
  font-size: 17px;
  font-weight: bold;
}
.app-count-zero {
  color: #3a5a3a;
  font-weight: normal;
}
/* "(+N)" preview — towers that would switch to this type once it's activated.
   Grayed/muted so it reads as latent, not part of the live count. */
.app-count-pending {
  font-size: 15px;
  font-weight: bold;
  color: #6f7d63;
  margin-left: 1px;
}

/* ── Sign-in overlay (cloud save) ─────────────────────────────────────────── */
#authOverlay {
  display: none;            /* shown by js/account.js when a choice is needed */
  position: fixed; inset: 0;
  background: rgba(6, 12, 6, 0.94);
  align-items: center; justify-content: center;
  z-index: 9000;
}
.auth-box {
  background: #0f1f0f;
  border: 2px solid #4a7a4a;
  border-radius: 12px;
  padding: 30px 34px;
  width: 92vw; max-width: 380px;
  text-align: center;
  box-shadow: 0 12px 50px rgba(0,0,0,0.7);
}
.auth-title {
  font-size: 34px; font-weight: bold; color: #FFD700;
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.auth-sub { color: #9bbf8c; font-size: 16px; margin: 8px 0 22px; line-height: 1.5; }
.auth-provider { display: flex; justify-content: center; margin: 10px 0; min-height: 44px; }
#authGoogleBtn { display: inline-block; }
.auth-apple-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: #000; color: #fff; border: 1px solid #333;
  border-radius: 22px; padding: 11px 22px; font-size: 17px; font-weight: 600;
  cursor: pointer; min-width: 250px;
}
.auth-apple-btn:hover { background: #1a1a1a; }
.auth-disabled {
  display: none; color: #6a8a6a; font-size: 13px; font-style: italic;
  margin: 8px auto; max-width: 280px; line-height: 1.5;
}
.auth-divider {
  display: flex; align-items: center; gap: 10px; margin: 18px 4px 14px; color: #4a6a4a; font-size: 14px;
}
.auth-divider::before, .auth-divider::after {
  content: ''; flex: 1; height: 1px; background: #2a4a2a;
}
.auth-guest-btn {
  width: 100%;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: #1d3a1d; border: 1px solid #3a6a2a; color: #cfe8c0;
  border-radius: 22px; padding: 11px 0; font-size: 17px; font-weight: bold; cursor: pointer;
  transition: background .12s, border-color .12s;
}
.auth-guest-btn:hover { background: #265026; border-color: #4a9a2a; }
.auth-guest-note { color: #6a8a6a; font-size: 13px; margin-top: 8px; }
.auth-error {
  display: none; margin-top: 14px; color: #ff8a65; font-size: 14px;
  background: rgba(255,80,40,0.08); border: 1px solid #5a2a1a; border-radius: 6px; padding: 8px;
}

/* ── Account chip in the menu ─────────────────────────────────────────────── */
.account-box { padding-top: 12px !important; padding-bottom: 12px !important; }
.account-chip {
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  font-size: 15px; color: #cfe0c0;
}
.acct-id { display: flex; align-items: center; gap: 7px; font-weight: bold; color: #e0f0d0; font-size: 16px; }
.acct-badge {
  font-size: 11px; font-weight: bold; text-transform: uppercase; letter-spacing: .5px;
  background: #1d3a52; color: #7fc8ff; border-radius: 4px; padding: 2px 7px;
}
.acct-badge.guest { background: #3a3320; color: #e0c878; }
.acct-sync { color: #6a8a6a; font-size: 13px; }
.acct-btn {
  margin-top: 6px; align-self: stretch;
  background: #14241050; border: 1px solid #2a4a2a; color: #9bbf8c;
  border-radius: 6px; padding: 6px 0; font-size: 14px; font-weight: bold; cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.acct-btn:hover { background: #1d3a1d; color: #cfe8c0; }
.acct-btn.primary { background: #2a6a1a; border-color: #4a9a2a; color: #eafce0; }
.acct-btn.primary:hover { background: #357a22; }