/* ============================================================
   TOWER DEFENSE — Game UI v2 (3D / Gamified)
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@700;900&family=Exo+2:wght@400;600;700;800;900&display=swap');

/* ============================================================
   PAGE LAYOUT
   ============================================================ */
.td-page {
  background:
    radial-gradient(ellipse at 20% 10%, rgba(200,240,255,.55) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 90%, rgba(80,180,60,.35) 0%, transparent 50%),
    linear-gradient(170deg, #a8d8ea 0%, #8bc4a0 50%, #9fd490 100%);
  height: calc(100vh - 72px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 12px 0;
  font-family: 'Exo 2', 'Inter', sans-serif;
  color: #2a1a00;
}

/* ============================================================
   TOPBAR — Game HUD
   ============================================================ */
.td-topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(180deg, #c8a030 0%, #a87e20 60%, #8c6810 100%);
  border: 2px solid #7a5508;
  border-top: 2px solid #f0c840;
  border-radius: 16px;
  padding: 10px 18px;
  margin-bottom: 12px;
  width: 100%;
  max-width: 1110px;
  box-shadow:
    0 6px 24px rgba(80,50,0,.45),
    0 0 0 3px rgba(200,160,40,.18),
    inset 0 1px 0 rgba(255,240,160,.28),
    inset 0 -1px 0 rgba(0,0,0,.25);
  position: relative;
}

.td-topbar::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,240,160,.12) 0%, transparent 60%);
  pointer-events: none;
}

.td-lvname {
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: .95rem;
  color: #fff8e0;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 0 rgba(80,40,0,.5), 0 0 16px rgba(255,220,80,.4);
  letter-spacing: .04em;
}

/* ============================================================
   STATS — Inventory Slots
   ============================================================ */
.td-stats {
  display: flex;
  gap: 8px;
  align-items: center;
}

.td-stat {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: .85rem;
  font-weight: 800;
  padding: 5px 13px;
  border-radius: 10px;
  border: 1px solid rgba(100,65,0,.35);
  border-top: 1px solid rgba(255,240,160,.25);
  border-bottom: 2px solid rgba(80,40,0,.55);
  background: linear-gradient(180deg, rgba(255,240,160,.18) 0%, rgba(100,65,0,.35) 100%);
  box-shadow:
    0 3px 10px rgba(80,50,0,.25),
    inset 0 1px 0 rgba(255,240,160,.18),
    inset 0 -1px 0 rgba(0,0,0,.2);
  letter-spacing: .02em;
  color: #fff8e0;
}

.td-stat strong { font-size: .92rem; }
.td-stat.g { color: #ffe840; text-shadow: 0 1px 0 rgba(80,50,0,.4), 0 0 10px rgba(255,220,30,.5); }
.td-stat.l { color: #ff6868; text-shadow: 0 1px 0 rgba(80,0,0,.4), 0 0 10px rgba(255,100,100,.4); }
.td-stat.w { color: #e0f0ff; text-shadow: 0 1px 0 rgba(0,50,100,.4), 0 0 10px rgba(160,210,255,.4); }
.td-stat.c { color: #ffe840; text-shadow: 0 1px 0 rgba(80,50,0,.4), 0 0 10px rgba(255,220,30,.4); }

/* ============================================================
   3D WAVE / SPEED BUTTONS
   ============================================================ */
.td-wavebtn {
  background: linear-gradient(180deg, #5ec832 0%, #3da010 45%, #2e8008 100%);
  color: #f0ffe0;
  border: none;
  border-radius: 10px;
  padding: 8px 18px;
  font-size: .86rem;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  letter-spacing: .04em;
  text-shadow: 0 1px 3px rgba(0,50,0,.7);
  box-shadow:
    0 6px 0 #1c5804,
    0 8px 16px rgba(30,100,0,.45),
    inset 0 1px 0 rgba(255,255,255,.3),
    inset 0 -1px 0 rgba(0,0,0,.2);
  transform: translateY(0);
  transition: transform .08s, box-shadow .08s, background .15s;
  position: relative;
}

.td-wavebtn:hover:not(:disabled) {
  background: linear-gradient(180deg, #70e040 0%, #4ab818 45%, #389010 100%);
  box-shadow:
    0 6px 0 #1c5804,
    0 10px 22px rgba(60,180,10,.4),
    inset 0 1px 0 rgba(255,255,255,.35),
    inset 0 -1px 0 rgba(0,0,0,.18);
}

.td-wavebtn:active:not(:disabled) {
  transform: translateY(5px);
  box-shadow:
    0 1px 0 #1c5804,
    0 2px 8px rgba(0,0,0,.3),
    inset 0 2px 5px rgba(0,0,0,.3);
}

.td-wavebtn:disabled {
  background: linear-gradient(180deg, #8aaa70 0%, #6a8850 100%);
  color: rgba(255,255,255,.45);
  box-shadow: 0 3px 0 #3a5020, 0 4px 10px rgba(0,0,0,.2);
  cursor: default;
  opacity: .55;
  transform: none;
}

.td-wavebtn.act {
  background: linear-gradient(180deg, #ffd040 0%, #e09010 45%, #c07808 100%);
  color: #fff0d0;
  box-shadow:
    0 6px 0 #7c5002,
    0 8px 16px rgba(200,140,0,.5),
    inset 0 1px 0 rgba(255,255,255,.32),
    inset 0 -1px 0 rgba(0,0,0,.2);
}

.td-wavebtn.act:active:not(:disabled) {
  transform: translateY(5px);
  box-shadow: 0 1px 0 #7c5002, 0 2px 8px rgba(0,0,0,.3), inset 0 2px 5px rgba(0,0,0,.3);
}

/* ============================================================
   LAYOUT
   ============================================================ */
.td-body {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  max-width: 1110px;
  width: 100%;
  overflow: hidden;
  min-height: 0;
  flex: 1;
}

/* ============================================================
   CANVAS — Ornate Frame
   ============================================================ */
#canvasWrap {
  position: relative;
  flex-shrink: 0;
  padding: 4px;
  background: linear-gradient(135deg, #f0d060, #d4a820 50%, #f0c840);
  border-radius: 14px;
  box-shadow:
    0 0 0 2px rgba(120,80,0,.6),
    0 0 0 5px rgba(200,160,40,.15),
    0 8px 40px rgba(80,50,0,.45),
    0 0 80px rgba(200,160,40,.1);
}

#tdCanvas {
  display: block;
  border-radius: 11px;
  cursor: crosshair;
  flex-shrink: 0;
  image-rendering: pixelated;
  box-shadow: inset 0 0 30px rgba(0,0,0,.5);
}

/* ============================================================
   SIDE PANEL — Arcane Tome
   ============================================================ */
.td-panel {
  width: 232px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: linear-gradient(160deg, #f5e8c0 0%, #ede0a8 60%, #f2e8be 100%);
  border: 2px solid #c89830;
  border-top: 2px solid #f0d060;
  border-radius: 14px;
  overflow: hidden;
  max-height: 580px;
  box-shadow:
    0 8px 36px rgba(80,50,0,.35),
    0 0 0 3px rgba(200,160,40,.12),
    inset 0 1px 0 rgba(255,240,160,.3),
    inset 1px 0 0 rgba(200,160,40,.1),
    inset -1px 0 0 rgba(200,160,40,.1);
  color: #3a2000;
}

/* ============================================================
   PANEL TABS — Game Navigation
   ============================================================ */
.td-tab-nav {
  display: flex;
  border-bottom: 2px solid rgba(160,110,20,.35);
  background: linear-gradient(180deg, rgba(160,110,20,.25) 0%, rgba(180,130,30,.1) 100%);
  flex-shrink: 0;
  padding: 6px 6px 0;
  gap: 3px;
}

.td-tab-btn {
  flex: 1;
  padding: 8px 0 10px;
  border: 1px solid rgba(160,110,20,.2);
  border-bottom: none;
  background: linear-gradient(180deg, rgba(255,240,160,.08) 0%, rgba(160,110,20,.1) 100%);
  color: rgba(80,50,0,.5);
  font-size: 1.05rem;
  cursor: pointer;
  border-radius: 8px 8px 0 0;
  transition: all .15s;
  line-height: 1;
  position: relative;
}

.td-tab-btn:hover {
  color: rgba(80,50,0,.85);
  background: linear-gradient(180deg, rgba(255,240,160,.16) 0%, rgba(160,110,20,.14) 100%);
}

.td-tab-btn.active {
  color: #5a2e00;
  background: linear-gradient(180deg, rgba(255,220,80,.25) 0%, rgba(200,150,30,.12) 100%);
  border-color: rgba(180,130,20,.35);
  border-bottom: 1px solid transparent;
  box-shadow:
    0 -3px 8px rgba(200,160,30,.12),
    inset 0 1px 0 rgba(255,230,100,.25);
  text-shadow: 0 1px 0 rgba(255,230,100,.4);
}

.td-tab-content {
  display: none;
  flex-direction: column;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(160,110,20,.3) transparent;
}

.td-tab-content.active { display: flex; }
.td-tab-content::-webkit-scrollbar { width: 4px; }
.td-tab-content::-webkit-scrollbar-thumb { background: rgba(160,110,20,.3); border-radius: 2px; }

/* ============================================================
   PANEL SECTIONS
   ============================================================ */
.td-ps {
  padding: 12px 12px;
  border-bottom: 1px solid rgba(160,120,20,.18);
  position: relative;
}
.td-ps:last-child { border-bottom: none; }

.td-ps h3 {
  margin: 0 0 10px;
  font-size: .62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .2em;
  color: rgba(100,65,10,.6);
  display: flex;
  align-items: center;
  gap: 7px;
}

.td-ps h3::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(160,110,10,.25), transparent);
}

/* ============================================================
   TOWER CARDS — Inventory Slots
   ============================================================ */
.td-tc {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border-radius: 10px;
  cursor: pointer;
  border: 1px solid rgba(160,120,20,.22);
  border-bottom: 2px solid rgba(100,70,0,.35);
  margin-bottom: 5px;
  background: linear-gradient(160deg, rgba(255,240,160,.12) 0%, rgba(180,140,40,.08) 100%);
  transition: all .14s;
  position: relative;
  overflow: hidden;
  --c: #c87020;
}

.td-tc::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,240,160,.08) 0%, transparent 55%);
  pointer-events: none;
}

.td-tc:last-child { margin-bottom: 0; }

.td-tc:hover {
  background: linear-gradient(160deg, rgba(255,240,160,.2) 0%, rgba(180,140,40,.12) 100%);
  border-color: rgba(200,160,40,.4);
  transform: translateX(2px);
  box-shadow: -3px 0 0 var(--c), 0 4px 14px rgba(100,70,0,.2);
}

.td-tc.sel {
  border-color: var(--c);
  border-bottom-color: color-mix(in srgb, var(--c) 60%, #000);
  background: linear-gradient(160deg, rgba(255,240,160,.22) 0%, rgba(180,140,40,.14) 100%);
  box-shadow:
    0 0 0 1px var(--c),
    0 4px 16px rgba(100,70,0,.25),
    inset 0 0 20px rgba(255,220,100,.05);
  transform: none;
}

.td-tc.sel::after {
  content: '◀';
  position: absolute;
  right: 8px;
  font-size: .6rem;
  color: var(--c);
  text-shadow: 0 0 10px var(--c);
  opacity: .9;
}

/* Tower Icon — Gem style */
.td-dot {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 2px solid var(--c);
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.18) 0%, #0d1006 65%);
  box-shadow:
    0 0 12px var(--c),
    0 0 24px rgba(0,0,0,.6),
    inset 0 1px 0 rgba(255,255,255,.28),
    inset 0 -1px 0 rgba(0,0,0,.55);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

.td-tn  { font-size: .84rem; font-weight: 700; color: #3a2000; display: block; letter-spacing: .02em; }
.td-cost{ font-size: .72rem; color: #b05800; display: block; margin-top: 2px; font-weight: 700; }
.td-desc{ font-size: .67rem; color: rgba(80,50,0,.5); display: block; margin-top: 2px; }

/* ============================================================
   LOCKED TOWERS
   ============================================================ */
.td-tc.locked {
  opacity: .3;
  cursor: not-allowed;
  filter: grayscale(.6);
}
.td-tc.locked:hover {
  transform: none;
  box-shadow: none;
  background: linear-gradient(160deg, rgba(255,255,255,.05) 0%, rgba(0,0,0,.18) 100%);
  border-color: rgba(255,255,255,.06);
}

.td-lock-badge {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  font-size: .6rem;
  color: rgba(255,255,255,.4);
  background: rgba(0,0,0,.65);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 5px;
  padding: 1px 5px;
  pointer-events: none;
}

/* ============================================================
   LEVEL NAV BUTTONS
   ============================================================ */
.td-lbtns { display: flex; gap: 7px; }

.td-lbtn {
  flex: 1;
  padding: 7px 0;
  border-radius: 9px;
  border: 1px solid rgba(160,120,20,.28);
  border-bottom: 3px solid rgba(100,70,0,.4);
  background: linear-gradient(180deg, rgba(255,240,160,.14) 0%, rgba(160,120,20,.18) 100%);
  color: rgba(80,50,0,.6);
  font-size: .82rem;
  font-weight: 700;
  cursor: pointer;
  transition: all .1s;
  box-shadow: inset 0 1px 0 rgba(255,240,160,.16);
}

.td-lbtn:hover {
  background: linear-gradient(180deg, rgba(255,240,160,.22) 0%, rgba(180,140,30,.22) 100%);
  color: rgba(80,50,0,.9);
}

.td-lbtn:active {
  transform: translateY(2px);
  border-bottom-width: 1px;
  box-shadow: inset 0 2px 4px rgba(100,70,0,.25);
}

.td-lbtn.act {
  background: linear-gradient(180deg, #5ec832 0%, #2e8008 100%);
  color: #f0ffe0;
  border-color: #3da010;
  border-bottom: 3px solid #1c5804;
  box-shadow: 0 4px 14px rgba(60,160,10,.3), inset 0 1px 0 rgba(255,255,255,.25);
  text-shadow: 0 1px 2px rgba(0,40,0,.45);
}

/* ============================================================
   HINT
   ============================================================ */
.td-hint {
  font-size: .71rem;
  color: rgba(80,50,0,.5);
  line-height: 1.65;
  text-align: center;
  padding: 4px 0;
}
.td-hint strong { color: #3a8010; }

/* ============================================================
   ENEMY LIST
   ============================================================ */
.td-elist { display: flex; flex-direction: column; gap: 4px; }

.td-erow {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .72rem;
  color: rgba(60,35,0,.65);
  padding: 3px 6px;
  border-radius: 6px;
  transition: background .12s;
}
.td-erow:hover { background: rgba(160,110,20,.1); }

.td-edot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 6px currentColor;
}

/* ============================================================
   UPGRADE TOOLTIP (floating panel on canvas)
   ============================================================ */
.td-upg-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.td-upg-icon { font-size: 20px; }
.td-upg-name { font-size: .9rem; font-weight: 800; color: #3a2000; }
.td-upg-stars { font-size: .95rem; letter-spacing: 1px; color: #e08010; }

.td-upg-stats {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 12px;
  padding: 8px;
  background: rgba(160,120,20,.1);
  border-radius: 8px;
  border: 1px solid rgba(160,120,20,.2);
}

.td-upg-stat { display: flex; justify-content: space-between; font-size: .73rem; color: rgba(80,50,0,.55); }
.td-upg-stat span { font-weight: 700; color: #3a2000; }
.td-upg-next { font-size: .7rem; color: #3a8010; margin-bottom: 10px; text-align: center; min-height: 14px; }

/* 3D Upgrade Button */
.td-upg-btn {
  width: 100%;
  padding: 9px 0;
  border-radius: 9px;
  border: none;
  background: linear-gradient(180deg, #5ec832 0%, #3da010 45%, #2e8008 100%);
  color: #f0ffe0;
  font-size: .82rem;
  font-weight: 800;
  cursor: pointer;
  margin-bottom: 6px;
  text-shadow: 0 1px 3px rgba(0,50,0,.6);
  letter-spacing: .04em;
  box-shadow:
    0 5px 0 #1a5004,
    0 7px 14px rgba(50,140,10,.4),
    inset 0 1px 0 rgba(255,255,255,.3);
  transform: translateY(0);
  transition: transform .08s, box-shadow .08s, background .15s;
}

.td-upg-btn:hover:not(:disabled) {
  background: linear-gradient(180deg, #70e040 0%, #4ab818 45%, #389010 100%);
}

.td-upg-btn:active:not(:disabled) {
  transform: translateY(4px);
  box-shadow: 0 1px 0 #1a5004, 0 2px 6px rgba(30,100,0,.3), inset 0 2px 5px rgba(0,0,0,.3);
}

.td-upg-btn:disabled {
  background: linear-gradient(180deg, #b0c898 0%, #8aaa70 100%);
  color: rgba(255,255,255,.45);
  box-shadow: 0 3px 0 #4a6830;
  cursor: default;
  transform: none;
}

.td-upg-btn.maxed {
  background: linear-gradient(180deg, #ffd040 0%, #e09010 45%, #c07808 100%);
  color: #fff0d0;
  box-shadow:
    0 5px 0 #7c5002,
    0 7px 16px rgba(200,140,0,.45),
    inset 0 1px 0 rgba(255,255,255,.25);
}

/* 3D Sell Button */
.td-sell-btn {
  width: 100%;
  padding: 7px 0;
  border-radius: 9px;
  border: 1px solid rgba(255,255,255,.09);
  border-bottom: 3px solid rgba(0,0,0,.55);
  background: linear-gradient(180deg, rgba(255,255,255,.06) 0%, rgba(0,0,0,.22) 100%);
  color: rgba(255,255,255,.48);
  font-size: .77rem;
  font-weight: 700;
  cursor: pointer;
  transition: all .1s;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}

.td-sell-btn:hover {
  background: linear-gradient(180deg, rgba(239,68,68,.14) 0%, rgba(180,20,20,.18) 100%);
  border-color: rgba(239,68,68,.32);
  border-bottom-color: rgba(150,10,10,.55);
  color: #fca5a5;
  box-shadow: 0 4px 14px rgba(239,68,68,.15), inset 0 1px 0 rgba(255,100,100,.08);
}

.td-sell-btn:active {
  transform: translateY(2px);
  border-bottom-width: 1px;
  box-shadow: inset 0 2px 4px rgba(0,0,0,.35);
}

/* ============================================================
   POWERS — BUTTONS 3D (Special Abilities)
   ============================================================ */

/* Météorite */
#meteoriteBtn {
  opacity: .4;
  cursor: default;
  background: linear-gradient(180deg, #5c1212 0%, #3e0d0d 100%) !important;
  border-radius: 10px !important;
  border: none !important;
  border-bottom: 4px solid #1c0505 !important;
  box-shadow:
    0 4px 0 #1c0505,
    0 6px 12px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.06) !important;
  pointer-events: none;
  transition: all .3s;
  transform: translateY(0);
}

#meteoriteBtn.ready {
  opacity: 1;
  cursor: pointer;
  pointer-events: auto;
  background: linear-gradient(180deg, #ff5555 0%, #dc2626 45%, #b91c1c 100%) !important;
  border-bottom: 4px solid #7a0c0c !important;
  box-shadow:
    0 6px 0 #7a0c0c,
    0 8px 22px rgba(220,38,38,.55),
    inset 0 1px 0 rgba(255,255,255,.28) !important;
  animation: meteorReady .85s infinite alternate;
}

#meteoriteBtn.aiming {
  animation: meteorAiming .3s infinite alternate !important;
  outline: 2px solid #fbbf24;
  outline-offset: 2px;
}

#meteoriteBtn.ready:active {
  transform: translateY(5px) !important;
  border-bottom: 1px solid #7a0c0c !important;
  box-shadow: 0 1px 0 #7a0c0c, 0 2px 8px rgba(220,38,38,.35), inset 0 2px 5px rgba(0,0,0,.4) !important;
}

@keyframes meteorReady {
  from { box-shadow: 0 6px 0 #7a0c0c, 0 8px 18px rgba(220,38,38,.45), inset 0 1px 0 rgba(255,255,255,.22) !important; }
  to   { box-shadow: 0 6px 0 #7a0c0c, 0 8px 36px rgba(220,38,38,.85), 0 0 52px rgba(251,146,60,.38) !important; }
}

@keyframes meteorAiming {
  from { box-shadow: 0 6px 0 #7a0c0c, 0 0 28px rgba(220,38,38,.75) !important; }
  to   { box-shadow: 0 6px 0 #7a0c0c, 0 0 55px rgba(251,146,60,.95), 0 0 90px rgba(251,146,60,.45) !important; }
}

/* Gel de Zone */
#gelBtn {
  opacity: .4;
  cursor: default;
  background: linear-gradient(180deg, #0f2040 0%, #0a1830 100%) !important;
  border-radius: 10px !important;
  border: none !important;
  border-bottom: 4px solid #050d1a !important;
  box-shadow:
    0 4px 0 #050d1a,
    0 6px 12px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.05) !important;
  pointer-events: none;
  transition: all .3s;
  transform: translateY(0);
}

#gelBtn.ready {
  opacity: 1;
  cursor: pointer;
  pointer-events: auto;
  background: linear-gradient(180deg, #45d8ff 0%, #0284c7 45%, #0369a1 100%) !important;
  border-bottom: 4px solid #01456b !important;
  box-shadow:
    0 6px 0 #01456b,
    0 8px 22px rgba(14,116,144,.6),
    inset 0 1px 0 rgba(255,255,255,.32) !important;
  animation: gelReady .9s infinite alternate;
}

#gelBtn.ready:active {
  transform: translateY(5px) !important;
  border-bottom: 1px solid #01456b !important;
  box-shadow: 0 1px 0 #01456b, inset 0 2px 5px rgba(0,0,0,.4) !important;
}

@keyframes gelReady {
  from { box-shadow: 0 6px 0 #01456b, 0 8px 18px rgba(14,116,144,.45), inset 0 1px 0 rgba(255,255,255,.28) !important; }
  to   { box-shadow: 0 6px 0 #01456b, 0 8px 36px rgba(14,116,144,.85), 0 0 52px rgba(103,232,249,.35) !important; }
}

/* Boost de Tours */
#boostBtn {
  opacity: .4;
  cursor: default;
  background: linear-gradient(180deg, #3a1e06 0%, #281404 100%) !important;
  border-radius: 10px !important;
  border: none !important;
  border-bottom: 4px solid #130901 !important;
  box-shadow:
    0 4px 0 #130901,
    0 6px 12px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.05) !important;
  pointer-events: none;
  transition: all .3s;
  transform: translateY(0);
}

#boostBtn.ready {
  opacity: 1;
  cursor: pointer;
  pointer-events: auto;
  background: linear-gradient(180deg, #ffe060 0%, #d97706 45%, #b45309 100%) !important;
  color: #1c0e00 !important;
  text-shadow: 0 1px 0 rgba(255,230,120,.35) !important;
  border-bottom: 4px solid #7c3802 !important;
  box-shadow:
    0 6px 0 #7c3802,
    0 8px 22px rgba(217,119,6,.6),
    inset 0 1px 0 rgba(255,255,255,.38) !important;
  animation: boostReady .9s infinite alternate;
}

#boostBtn.ready:active {
  transform: translateY(5px) !important;
  border-bottom: 1px solid #7c3802 !important;
  box-shadow: 0 1px 0 #7c3802, inset 0 2px 5px rgba(0,0,0,.4) !important;
}

@keyframes boostReady {
  from { box-shadow: 0 6px 0 #7c3802, 0 8px 18px rgba(217,119,6,.45), inset 0 1px 0 rgba(255,255,255,.32) !important; }
  to   { box-shadow: 0 6px 0 #7c3802, 0 8px 36px rgba(217,119,6,.85), 0 0 52px rgba(253,224,71,.38) !important; }
}

/* ============================================================
   BUY POWER BUTTON
   ============================================================ */
.power-buy-btn {
  padding: 8px 12px;
  border-radius: 9px;
  border: 1px solid rgba(252,211,77,.28);
  border-bottom: 3px solid rgba(100,60,0,.55);
  background: linear-gradient(180deg, rgba(252,211,77,.09) 0%, rgba(100,60,0,.12) 100%);
  color: rgba(252,211,77,.65);
  font-size: .74rem;
  font-weight: 700;
  cursor: pointer;
  transition: all .1s;
  white-space: nowrap;
  width: 100%;
  letter-spacing: .04em;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}

.power-buy-btn:hover {
  background: linear-gradient(180deg, rgba(252,211,77,.18) 0%, rgba(160,100,0,.15) 100%);
  border-color: rgba(252,211,77,.5);
  color: #fcd34d;
  box-shadow: 0 4px 14px rgba(252,211,77,.14), inset 0 1px 0 rgba(255,255,255,.08);
}

.power-buy-btn:active {
  transform: translateY(2px);
  border-bottom-width: 1px;
  box-shadow: inset 0 2px 4px rgba(0,0,0,.35);
}

/* ============================================================
   PREMIUM SHOP
   ============================================================ */
.td-tc.prem-locked {
  opacity: .52;
  cursor: pointer;
  flex-direction: column;
  align-items: stretch;
}

.td-tc.prem-locked:hover {
  opacity: .88;
  background: linear-gradient(160deg, rgba(252,211,77,.08) 0%, rgba(0,0,0,.12) 100%) !important;
  transform: translateX(2px);
  box-shadow: -3px 0 0 rgba(252,211,77,.45);
}

.td-tc.prem-locked .td-tc-row { display: flex; align-items: center; gap: 9px; }

.td-buy-btn {
  width: 100%;
  margin-top: 7px;
  padding: 6px 0;
  border-radius: 7px;
  border: 1px solid rgba(252,211,77,.32);
  border-bottom: 2px solid rgba(100,60,0,.55);
  background: linear-gradient(180deg, rgba(252,211,77,.09) 0%, rgba(80,40,0,.12) 100%);
  color: rgba(252,211,77,.6);
  font-size: .71rem;
  font-weight: 700;
  cursor: pointer;
  transition: all .12s;
  pointer-events: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}

.td-buy-btn.can-buy {
  border-color: rgba(252,211,77,.58);
  background: linear-gradient(180deg, rgba(252,211,77,.2) 0%, rgba(160,100,0,.14) 100%);
  color: #fcd34d;
  box-shadow: 0 3px 12px rgba(252,211,77,.12), inset 0 1px 0 rgba(255,255,255,.08);
}

.td-tc.prem-unlocked { flex-direction: row; align-items: center; gap: 9px; }

/* ============================================================
   SKILL TREE MODAL
   ============================================================ */
#skillModal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(0,0,0,.9);
  display: none;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(8px);
}
#skillModal.open { display: flex; }

.sk-box {
  background: linear-gradient(160deg, #f5e8c0 0%, #ede0a8 60%, #f2e8be 100%);
  border: 2px solid #c89830;
  border-top: 2px solid #f0d060;
  border-radius: 20px;
  width: 700px;
  max-width: 98vw;
  max-height: 94vh;
  overflow-y: auto;
  box-shadow:
    0 0 80px rgba(80,50,0,.55),
    0 0 0 4px rgba(200,160,40,.15),
    inset 0 1px 0 rgba(255,240,160,.3);
  color: #3a2000;
}

.sk-header {
  display: flex;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 2px solid rgba(160,110,20,.25);
  gap: 12px;
  background: linear-gradient(180deg, rgba(255,220,80,.12) 0%, transparent 100%);
}

.sk-title {
  font-family: 'Cinzel', serif;
  font-size: 1rem;
  font-weight: 700;
  color: #7a4a00;
  text-shadow: 0 1px 0 rgba(255,220,100,.4), 0 0 16px rgba(200,140,20,.3);
  letter-spacing: .07em;
}

.sk-sp-badge {
  background: linear-gradient(135deg, rgba(110,231,183,.12), rgba(52,211,153,.06));
  border: 1px solid rgba(110,231,183,.28);
  color: #6ee7b7;
  font-size: .8rem;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 20px;
  box-shadow:
    0 0 14px rgba(110,231,183,.1),
    inset 0 1px 0 rgba(255,255,255,.06);
  text-shadow: 0 0 12px rgba(110,231,183,.5);
}

.sk-close {
  background: linear-gradient(180deg, rgba(255,255,255,.07) 0%, rgba(0,0,0,.22) 100%);
  border: 1px solid rgba(255,255,255,.09);
  border-bottom: 2px solid rgba(0,0,0,.45);
  color: rgba(255,255,255,.42);
  border-radius: 8px;
  width: 30px;
  height: 30px;
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  transition: all .12s;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}

.sk-close:hover {
  background: linear-gradient(180deg, rgba(239,68,68,.2) 0%, rgba(180,20,20,.22) 100%);
  border-color: rgba(239,68,68,.38);
  color: #fca5a5;
}

.sk-close:active { transform: translateY(1px); border-bottom-width: 1px; }

.sk-tabs {
  display: flex;
  gap: 5px;
  padding: 10px 16px;
  border-bottom: 1px solid rgba(80,140,20,.1);
  flex-wrap: wrap;
}

.sk-tab {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.09);
  border-bottom: 3px solid rgba(0,0,0,.45);
  background: linear-gradient(180deg, rgba(255,255,255,.06) 0%, rgba(0,0,0,.22) 100%);
  font-size: 20px;
  cursor: pointer;
  transition: all .12s;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

.sk-tab:hover:not(.sk-tab-locked) {
  background: linear-gradient(180deg, rgba(255,255,255,.12) 0%, rgba(0,0,0,.12) 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.1);
}

.sk-tab:active:not(.sk-tab-locked) {
  transform: translateY(2px);
  border-bottom-width: 1px;
  box-shadow: inset 0 2px 4px rgba(0,0,0,.35);
}

.sk-tab.sk-tab-active {
  border-color: rgba(163,230,53,.28);
  border-bottom: 3px solid rgba(80,140,10,.55);
  background: linear-gradient(180deg, rgba(163,230,53,.13) 0%, rgba(80,140,10,.07) 100%);
  box-shadow: 0 0 14px rgba(163,230,53,.14), inset 0 1px 0 rgba(163,230,53,.2);
}

.sk-tab.sk-tab-locked { opacity: .24; cursor: not-allowed; filter: grayscale(1); }

.sk-body { padding: 16px 20px 20px; }

.sk-tree-wrap {
  position: relative;
  width: 520px;
  height: 210px;
  margin: 0 auto;
}
.sk-tree-wrap svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}

.sk-node-info {
  min-height: 52px;
  margin-top: 14px;
  padding: 12px 14px;
  background: rgba(160,120,20,.1);
  border-radius: 10px;
  border: 1px solid rgba(160,120,20,.22);
  font-size: .8rem;
  color: #3a2000;
}

/* ============================================================
   MODE SELECTION OVERLAY
   ============================================================ */
.td-mode-overlay {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(200,240,255,.55) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 80%, rgba(80,180,60,.4) 0%, transparent 50%),
    linear-gradient(160deg, #4a9040 0%, #2e6a25 50%, #3d8030 100%);
  backdrop-filter: blur(4px);
}

.td-mode-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding: 40px 32px 36px;
  max-width: 680px;
  width: 100%;
}

.td-mode-title {
  font-family: 'Cinzel', serif;
  font-size: 2.2rem;
  font-weight: 900;
  color: #ffe840;
  text-shadow: 0 2px 0 rgba(80,50,0,.6), 0 0 30px rgba(255,220,50,.6), 0 0 60px rgba(255,200,20,.3);
  letter-spacing: .08em;
  text-align: center;
}

.td-mode-subtitle {
  font-size: .95rem;
  color: rgba(255,255,255,.7);
  letter-spacing: .06em;
  text-align: center;
  margin-top: -12px;
  text-shadow: 0 1px 0 rgba(0,50,0,.5);
}

.td-mode-cards {
  display: flex;
  gap: 20px;
  width: 100%;
}

.td-mode-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 28px 22px 22px;
  border-radius: 18px;
  cursor: pointer;
  transition: transform .18s, box-shadow .18s;
  position: relative;
  overflow: hidden;
}

.td-mode-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 18px;
  background: linear-gradient(160deg, rgba(255,255,255,.06) 0%, transparent 60%);
  pointer-events: none;
}

.td-mode-card--classic {
  background: linear-gradient(160deg, #f5e8c0 0%, #ede0a8 70%);
  border: 2px solid #c89830;
  border-top: 2px solid #f0d060;
  box-shadow: 0 8px 40px rgba(80,50,0,.35), 0 0 0 3px rgba(200,160,40,.12), inset 0 1px 0 rgba(255,240,160,.3);
}

.td-mode-card--infinite {
  background: linear-gradient(160deg, #dce8f8 0%, #c8d8ee 70%);
  border: 2px solid #6090d0;
  border-top: 2px solid #90c0f0;
  box-shadow: 0 8px 40px rgba(30,60,120,.35), 0 0 0 3px rgba(100,160,240,.12), inset 0 1px 0 rgba(180,220,255,.3);
}

.td-mode-card:hover { transform: translateY(-4px); }
.td-mode-card--classic:hover { box-shadow: 0 14px 50px rgba(80,50,0,.4), 0 0 28px rgba(200,160,30,.25), inset 0 1px 0 rgba(255,230,120,.35); }
.td-mode-card--infinite:hover { box-shadow: 0 14px 50px rgba(30,60,120,.4), 0 0 28px rgba(100,160,240,.3), inset 0 1px 0 rgba(180,220,255,.35); }

.td-mode-card-icon {
  font-size: 3rem;
  line-height: 1;
  filter: drop-shadow(0 0 12px currentColor);
}

.td-mode-card-name {
  font-family: 'Cinzel', serif;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: .06em;
}
.td-mode-card--classic .td-mode-card-name { color: #5a2e00; text-shadow: 0 1px 0 rgba(255,220,100,.4); }
.td-mode-card--infinite .td-mode-card-name { color: #1a3a7c; text-shadow: 0 1px 0 rgba(100,160,255,.3); }

.td-mode-card-desc {
  font-size: .82rem;
  color: rgba(60,35,0,.6);
  text-align: center;
  line-height: 1.5;
  min-height: 36px;
}

.td-mode-feats {
  list-style: none;
  margin: 4px 0 8px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}

.td-mode-feats li {
  font-size: .78rem;
  color: rgba(60,35,0,.65);
  padding: 5px 10px;
  border-radius: 7px;
  background: rgba(160,110,20,.1);
  border: 1px solid rgba(160,110,20,.18);
}

/* 3D Mode Buttons */
.td-mode-btn {
  width: 100%;
  padding: 11px 0;
  border: none;
  border-radius: 11px;
  font-size: .92rem;
  font-weight: 800;
  letter-spacing: .06em;
  cursor: pointer;
  text-shadow: 0 1px 3px rgba(0,0,0,.6);
  transform: translateY(0);
  transition: transform .08s, box-shadow .08s, background .15s;
  margin-top: 4px;
}

.td-mode-btn--classic {
  background: linear-gradient(180deg, #ffd040 0%, #e09010 45%, #c07808 100%);
  color: #fff0d0;
  box-shadow: 0 6px 0 #7c5002, 0 8px 18px rgba(100,60,0,.45), inset 0 1px 0 rgba(255,255,255,.32);
}
.td-mode-btn--classic:hover { background: linear-gradient(180deg, #ffe060 0%, #f0a020 45%, #d08810 100%); }
.td-mode-btn--classic:active { transform: translateY(5px); box-shadow: 0 1px 0 #7c5002, 0 2px 8px rgba(0,0,0,.3); }

.td-mode-btn--infinite {
  background: linear-gradient(180deg, #60a8f0 0%, #3070d0 45%, #204fa8 100%);
  color: #e8f4ff;
  box-shadow: 0 6px 0 #102a78, 0 8px 18px rgba(20,60,180,.45), inset 0 1px 0 rgba(255,255,255,.28);
}
.td-mode-btn--infinite:hover { background: linear-gradient(180deg, #78c0ff 0%, #4888e8 45%, #3060c0 100%); }
.td-mode-btn--infinite:active { transform: translateY(5px); box-shadow: 0 1px 0 #102a78, 0 2px 8px rgba(0,0,0,.3); }

@media(max-width:540px) {
  .td-mode-cards { flex-direction: column; }
  .td-mode-title { font-size: 1.6rem; }
  .td-mode-box { padding: 24px 16px 28px; gap: 18px; }
}

/* Mobile compact mode overlay — fits within rotated portrait height (~100vw ≈ 390px) */
@media(max-width:900px) {
  .td-mode-overlay {
    align-items: flex-start;
    overflow-y: auto;
    padding: 6px;
  }
  .td-mode-box {
    padding: 14px 10px 16px;
    gap: 10px;
    max-width: 100%;
  }
  .td-mode-title { font-size: 1.3rem; }
  .td-mode-subtitle { font-size: .75rem; margin-top: -4px; }
  .td-mode-card { padding: 14px 12px 12px; gap: 5px; }
  .td-mode-card-icon { font-size: 2rem; }
  .td-mode-card-name { font-size: .95rem; }
  .td-mode-card-desc { font-size: .72rem; min-height: 0; }
  .td-mode-feats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3px;
    margin: 2px 0 4px;
  }
  .td-mode-feats li { font-size: .67rem; padding: 3px 6px; }
  .td-mode-btn { padding: 7px 0; font-size: .8rem; margin-top: 2px; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
#canvasWrap { max-width: 100%; overflow: visible; flex: 1; min-width: 0; }
#tdCanvas { display: block; width: 100% !important; height: auto !important; aspect-ratio: 880/572; }

@media(max-width:980px) {
  .td-body { overflow-x: hidden; }
  #canvasWrap { flex: 1; min-width: 0; }
  #tdCanvas { width: 100% !important; height: auto !important; aspect-ratio: 880/572; }
  .td-topbar { flex-wrap: wrap; gap: 8px; padding: 8px 12px; }
  .td-lvname { flex: 0 0 100%; margin-bottom: 0; }
  .td-stat { font-size: .78rem; padding: 4px 9px; }
  .td-wavebtn { font-size: .8rem; padding: 7px 13px; }
  .td-panel { max-height: calc(100vh - 110px); overflow: hidden; }
}

@media(max-width:640px) {
  .td-page { height: auto; overflow-y: auto; overflow-x: hidden; padding: 6px 6px 24px; }
  .td-topbar { flex-wrap: wrap; gap: 5px; padding: 7px 9px; margin-bottom: 7px; border-radius: 10px; }
  .td-lvname { flex: 0 0 100%; font-size: .85rem; }
  .td-stats { gap: 4px; flex-wrap: wrap; }
  .td-stat { font-size: .68rem; padding: 3px 7px; gap: 3px; }
  #nextWaveBtn,#speed1Btn,#speed2Btn,#speed4Btn { font-size: .74rem; padding: 6px 10px; }
  .td-body { flex-direction: column; gap: 8px; flex: none; min-height: 0; overflow-x: hidden; }
  #canvasWrap { width: 100%; }
  #tdCanvas { width: 100% !important; height: auto !important; aspect-ratio: 880/572; border-radius: 8px !important; touch-action: none; }
  .td-panel { width: 100%; max-height: none; border-radius: 10px; max-width: 100%; }
  .td-tab-content { max-height: 52vh; }
  .td-ps { padding: 9px 11px; }
  .sk-box { width: 100vw; max-width: 100vw; border-radius: 0; margin: 0; }
  .sk-tree-wrap { width: 100%; min-width: 0; overflow-x: auto; }
  #towerTooltip { width: 155px !important; font-size: .78rem; }
  .td-elist { gap: 4px 10px; }
  .td-erow { font-size: .7rem; }
}

@media(max-width:400px) {
  .td-stat.w, .td-stat.c, #spCount { display: none; }
  .td-stats { gap: 3px; }
}

/* ============================================================
   MOBILE — Kingdom Rush style (portrait + landscape)
   ============================================================ */
#mobileHud { display: none; }
#mobilePicker { display: none; }
#mobileShop { display: none; }
#mobBuildHint { display: none; }

/* Wrapper : plein écran sur mobile, transparent sur desktop */
@media (max-width: 900px) {
  #tdGameRoot {
    position: fixed;
    inset: 0;
    overflow: hidden;
    z-index: 100;
  }

  /* Portrait → rotation 90° pour simuler le paysage */
  @media (orientation: portrait) {
    #tdGameRoot {
      width: 100vh;
      height: 100vw;
      inset: unset;
      top: 0;
      left: 0;
      transform-origin: 0 0;
      transform: translateX(100vw) rotate(90deg);
    }
  }

  /* Layout plein écran (les 2 orientations car le wrapper gère la rotation) */
  .td-page {
    padding: 0;
    height: 100%;
    background: none;
  }
  .td-topbar { display: none !important; }
  .td-body {
    gap: 0;
    flex: 1;
    height: calc(100% - 56px);
    min-height: 0;
  }
  .td-panel { display: none !important; }

  #canvasWrap {
    flex: 1;
    width: 100%;
    height: 100%;
    padding: 0;
    background: none;
    border-radius: 0;
    box-shadow: none;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }
  #tdCanvas {
    max-width: 100% !important;
    max-height: 100% !important;
    width: auto !important;
    height: auto !important;
    aspect-ratio: 880/572 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    touch-action: none;
  }

  #mobileHud { display: flex; }
}

/* ============================================================
   MOBILE HUD — Bottom bar
   ============================================================ */
#mobileHud {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 56px;
  z-index: 200;
  align-items: center;
  padding: 0 8px;
  gap: 5px;
  background: linear-gradient(180deg, #c8a030 0%, #8c6810 100%);
  border-top: 2px solid #f0c840;
  box-shadow: 0 -4px 20px rgba(80,50,0,.55), inset 0 1px 0 rgba(255,240,160,.25);
}

.mob-stat {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: .78rem;
  font-weight: 800;
  padding: 4px 8px;
  border-radius: 8px;
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(0,0,0,.25);
  border-top: 1px solid rgba(255,240,160,.15);
  white-space: nowrap;
  color: #fff8e0;
}
.mob-stat strong { font-size: .85rem; min-width: 16px; text-align: right; }
.mob-g strong { color: #ffe840; }
.mob-l strong { color: #ff8080; }
.mob-w strong { color: #c0e8ff; }

.mob-wave-btn {
  flex: 1;
  min-width: 0;
  height: 38px;
  border: none;
  border-radius: 10px;
  background: linear-gradient(180deg, #5ec832 0%, #2e8008 100%);
  color: #f0ffe0;
  font-size: .78rem;
  font-weight: 800;
  cursor: pointer;
  letter-spacing: .03em;
  text-shadow: 0 1px 2px rgba(0,40,0,.6);
  box-shadow: 0 4px 0 #1c5804, inset 0 1px 0 rgba(255,255,255,.25);
  transform: translateY(0);
  transition: transform .08s, box-shadow .08s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 8px;
}
.mob-wave-btn:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 #1c5804; }
.mob-wave-btn:disabled { background: linear-gradient(180deg, #7aaa60 0%, #4a7030 100%); opacity: .6; cursor: default; }
.mob-wave-btn.boss { background: linear-gradient(180deg, #e09010 0%, #a06008 100%); box-shadow: 0 4px 0 #6a3802; }

.mob-speeds {
  display: flex;
  gap: 2px;
  flex-shrink: 0;
}

.mob-spd {
  width: 32px;
  height: 32px;
  border: 1px solid rgba(0,0,0,.3);
  border-bottom: 2px solid rgba(0,0,0,.45);
  border-radius: 7px;
  background: rgba(0,0,0,.25);
  color: rgba(255,255,255,.55);
  font-size: .72rem;
  font-weight: 800;
  cursor: pointer;
  transition: all .08s;
}
.mob-spd:active { transform: translateY(1px); border-bottom-width: 1px; }
.mob-spd.mob-spd-act {
  background: rgba(255,220,80,.25);
  color: #ffe840;
  border-color: rgba(255,200,50,.45);
  border-bottom-color: rgba(120,80,0,.55);
}

.mob-sep {
  width: 1px;
  height: 30px;
  background: rgba(0,0,0,.25);
  flex-shrink: 0;
  margin: 0 2px;
}

.mob-pwr {
  position: relative;
  width: 38px;
  height: 38px;
  border: none;
  border-radius: 9px;
  background: linear-gradient(180deg, rgba(255,255,255,.18) 0%, rgba(0,0,0,.35) 100%);
  border: 1px solid rgba(255,255,255,.15);
  border-bottom: 2px solid rgba(0,0,0,.4);
  font-size: 1.2rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
  transition: all .08s;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
}
.mob-pwr:active { transform: translateY(2px); border-bottom-width: 1px; }
.mob-pwr.mob-pwr-off { opacity: .35; cursor: default; pointer-events: none; }
.mob-pwr.mob-pwr-ready {
  background: linear-gradient(180deg, rgba(80,200,80,.3) 0%, rgba(20,100,20,.35) 100%);
  border-color: rgba(100,220,100,.4);
  animation: mobPwrPulse .9s infinite alternate;
}
@keyframes mobPwrPulse {
  from { box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 0 8px rgba(80,220,80,.2); }
  to   { box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 0 18px rgba(80,220,80,.55); }
}

.mob-pwr-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  border-radius: 0 0 9px 9px;
  background: linear-gradient(90deg, #22c55e, #86efac);
  width: 0%;
  transition: width .25s;
}

/* ============================================================
   MOBILE TOWER PICKER
   ============================================================ */
#mobilePicker {
  position: fixed;
  inset: 0;
  z-index: 400;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 64px;
}
#mobilePicker.open { display: flex; }

#mobilePickerBg {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(2px);
}

#mobilePickerPanel {
  position: relative;
  z-index: 1;
  background: linear-gradient(160deg, #f5e8c0 0%, #ede0a8 100%);
  border: 2px solid #c89830;
  border-top: 2px solid #f0d060;
  border-radius: 18px 18px 14px 14px;
  padding: 12px 10px 10px;
  width: min(96vw, 420px);
  box-shadow:
    0 -8px 40px rgba(80,50,0,.45),
    0 0 0 3px rgba(200,160,40,.12),
    inset 0 1px 0 rgba(255,240,160,.35);
}

.mob-pick-title {
  font-family: 'Cinzel', serif;
  font-size: .85rem;
  font-weight: 700;
  color: #5a3000;
  text-align: center;
  margin-bottom: 10px;
  letter-spacing: .05em;
  text-shadow: 0 1px 0 rgba(255,220,100,.3);
}

#mobilePickerGrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-bottom: 8px;
}

.mob-tower-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 8px 4px 6px;
  border-radius: 11px;
  border: 2px solid rgba(160,110,20,.25);
  border-bottom: 3px solid rgba(100,65,0,.35);
  background: linear-gradient(180deg, rgba(255,240,160,.18) 0%, rgba(180,140,30,.1) 100%);
  cursor: pointer;
  transition: all .1s;
  min-height: 68px;
  --tc: #888;
}
.mob-tower-btn:active { transform: translateY(2px); border-bottom-width: 1px; }
.mob-tower-btn.mob-selected {
  border-color: var(--tc);
  border-bottom-color: color-mix(in srgb, var(--tc) 60%, #000);
  background: linear-gradient(180deg, rgba(255,240,160,.3) 0%, rgba(180,140,30,.18) 100%);
  box-shadow: 0 0 0 1px var(--tc), 0 4px 14px rgba(0,0,0,.2);
}
.mob-tower-btn.mob-unaffordable {
  opacity: .38;
  cursor: default;
}
.mob-tower-icon { font-size: 1.5rem; line-height: 1; }
.mob-tower-name { font-size: .62rem; font-weight: 700; color: #3a2000; white-space: nowrap; }
.mob-tower-cost { font-size: .62rem; color: #b05800; font-weight: 700; }
.mob-tower-cost-lock { color: #7a5a00; }
.mob-tower-locked {
  opacity: .6;
  border-style: dashed;
  cursor: pointer;
}

.mob-pick-cancel {
  width: 100%;
  padding: 8px 0;
  border-radius: 9px;
  border: 1px solid rgba(160,110,20,.3);
  border-bottom: 2px solid rgba(100,65,0,.4);
  background: linear-gradient(180deg, rgba(200,50,50,.12) 0%, rgba(150,20,20,.1) 100%);
  color: #8b2000;
  font-size: .78rem;
  font-weight: 700;
  cursor: pointer;
  transition: all .1s;
}
.mob-pick-cancel:hover { background: linear-gradient(180deg, rgba(200,50,50,.2) 0%, rgba(150,20,20,.18) 100%); }
.mob-pick-cancel:active { transform: translateY(1px); border-bottom-width: 1px; }

/* ============================================================
   MOBILE HUD — Menu buttons (Shop / Skills)
   ============================================================ */
/* BUILD button — primary action */
.mob-build-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  height: 42px;
  padding: 0 10px;
  border: none;
  border-radius: 10px;
  border-bottom: 3px solid #1c5804;
  background: linear-gradient(180deg, #5ec832 0%, #2e8008 100%);
  color: #f0ffe0;
  font-size: 1.05rem;
  font-weight: 800;
  cursor: pointer;
  flex-shrink: 0;
  transition: all .08s;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25);
  text-shadow: 0 1px 2px rgba(0,40,0,.6);
}
.mob-build-btn span {
  font-size: .52rem;
  font-weight: 800;
  color: rgba(240,255,224,.85);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.mob-build-btn:active { transform: translateY(2px); border-bottom-width: 1px; }
.mob-build-btn.mob-build-active {
  background: linear-gradient(180deg, #ffd040 0%, #e09010 100%);
  border-bottom-color: #7c5002;
  color: #5a2e00;
  animation: mobBuildPulse .7s infinite alternate;
}
.mob-build-btn.mob-build-active span { color: rgba(90,46,0,.8); }
@keyframes mobBuildPulse {
  from { box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 0 6px rgba(255,200,40,.3); }
  to   { box-shadow: inset 0 1px 0 rgba(255,255,255,.3),  0 0 16px rgba(255,200,40,.7); }
}

.mob-menu-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  width: 44px;
  height: 42px;
  border: 1px solid rgba(255,255,255,.18);
  border-bottom: 2px solid rgba(0,0,0,.4);
  border-radius: 9px;
  background: linear-gradient(180deg, rgba(255,255,255,.22) 0%, rgba(0,0,0,.3) 100%);
  color: #fff8e0;
  font-size: 1.05rem;
  cursor: pointer;
  flex-shrink: 0;
  transition: all .08s;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
}
.mob-menu-btn span {
  font-size: .47rem;
  font-weight: 800;
  color: rgba(255,248,224,.75);
  letter-spacing: .05em;
  text-transform: uppercase;
}
.mob-menu-btn:active { transform: translateY(2px); border-bottom-width: 1px; }

/* ============================================================
   MOBILE SHOP OVERLAY
   ============================================================ */
#mobileShop {
  position: fixed;
  inset: 0;
  z-index: 400;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 64px;
}
#mobileShop.open { display: flex; }

#mobileShopBg {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(2px);
}

#mobileShopPanel {
  position: relative;
  z-index: 1;
  background: linear-gradient(160deg, #f5e8c0 0%, #ede0a8 100%);
  border: 2px solid #c89830;
  border-top: 2px solid #f0d060;
  border-radius: 18px 18px 14px 14px;
  padding: 12px 10px 10px;
  width: min(96vw, 480px);
  max-height: 65vh;
  overflow-y: auto;
  box-shadow: 0 -8px 40px rgba(80,50,0,.45), inset 0 1px 0 rgba(255,240,160,.35);
}

#mobileShopGrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 7px;
  margin-bottom: 8px;
}

.mob-shop-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 10px 8px 8px;
  border-radius: 11px;
  border: 2px solid rgba(160,110,20,.25);
  border-bottom: 3px solid rgba(100,65,0,.35);
  background: linear-gradient(180deg, rgba(255,240,160,.18) 0%, rgba(180,140,30,.1) 100%);
  text-align: center;
}
.mob-shop-card.mob-shop-unlocked {
  border-color: #22c55e;
  border-bottom-color: #166534;
  background: linear-gradient(180deg, rgba(34,197,94,.1) 0%, rgba(22,101,52,.08) 100%);
}
.mob-shop-icon { font-size: 1.6rem; line-height: 1; }
.mob-shop-name { font-size: .72rem; font-weight: 800; color: #3a2000; }
.mob-shop-tag  { font-size: .6rem; color: rgba(80,50,0,.55); }
.mob-shop-unlocked-badge {
  font-size: .62rem;
  font-weight: 800;
  color: #166534;
  padding: 2px 8px;
  background: rgba(34,197,94,.15);
  border-radius: 6px;
  border: 1px solid rgba(34,197,94,.3);
}
.mob-shop-buy-btn {
  width: 100%;
  padding: 5px 0;
  border-radius: 8px;
  border: none;
  border-bottom: 2px solid rgba(100,65,0,.4);
  background: linear-gradient(180deg, rgba(200,150,30,.2) 0%, rgba(140,90,10,.18) 100%);
  color: #7a4000;
  font-size: .66rem;
  font-weight: 800;
  cursor: pointer;
  margin-top: 3px;
  opacity: .4;
}
.mob-shop-buy-btn.can-buy {
  background: linear-gradient(180deg, #ffd040 0%, #e09010 100%);
  color: #5a2e00;
  opacity: 1;
  box-shadow: 0 3px 0 #7c5002;
}
.mob-shop-buy-btn.can-buy:active { transform: translateY(2px); box-shadow: 0 1px 0 #7c5002; }

/* ============================================================
   BUILD HINT (canvas overlay)
   ============================================================ */
#mobBuildHint {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,.72);
  color: #fff;
  font-size: .82rem;
  font-weight: 700;
  padding: 9px 16px;
  border-radius: 12px;
  pointer-events: none;
  z-index: 150;
  white-space: nowrap;
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,.18);
  transition: opacity .7s;
}