/* Base (scoped) */
.td-page{
  display:flex !important;
  flex-direction:column !important;
  gap:12px;
  padding: 16px 12px 24px;
  color:#e6edf3;
}

.td-wrap{
  position:relative;
  order:1 !important;
  max-width: 1100px;
  margin: 0 auto;
  border-radius: 14px;
  overflow: hidden;
  border:1px solid #223045;
  box-shadow: 0 6px 22px rgba(0,0,0,.35);
}

.td-wrap canvas{
  display:block;
  width:100%;
  height:auto;
  background:#0f1623;
}

.td-ui{
  order:2 !important;
  display:flex;
  gap:12px;
  align-items:stretch;
  flex-wrap:wrap;
  margin: 0 auto !important;
  max-width: 1100px;
}

.td-btn{
  background:#1f2a37;
  color:#e6edf3;
  border:1px solid #324155;
  padding:10px 12px;
  border-radius:10px;
  cursor:pointer;
}

.td-btn.active{ outline:2px solid #7dd3fc; }

.td-pill{
  padding:6px 10px;
  border:1px solid #324155;
  border-radius:999px;
  background: rgba(18,27,42,0.75);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
  color:#e6edf3;
}

.td-hint{ opacity:.9; }

.td-page kbd{
  background:#0b1220;
  border:1px solid #223045;
  border-bottom-width:2px;
  padding:1px 6px;
  border-radius:6px;
  font-size:.9em;
}

/* Overlay HUD */
.td-overlay{
  position:absolute;
  top:10px;
  left:10px;
  right:10px;
  z-index:10;
  display:flex;
  align-items:center;
  gap:10px;
  pointer-events:none; /* clicks pass through by default */
}

.td-overlay > *{ pointer-events:none; }
.td-overlay #start{ pointer-events:auto; }

/* Icon-only play/pause button */
.td-btn-icon{
  width:40px;
  height:34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
}

/* Icons: make them click-transparent and aligned */
.td-btn svg, .td-btn-icon svg, .td-ico{
  pointer-events:none;
}

.td-ico{
  vertical-align:-3px;
  margin-right:6px;
}

.td-hud-label{
  opacity:.9;
  font-weight:600;
}

/* Tower button typography: stacked */
.td-btn{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:2px;
  line-height:1.05;
}

.td-tower-name{
  font-weight:800;
  letter-spacing:.06em;
  font-size:.88em;
  opacity:.98;
}

.td-tower-cost{
  font-weight:700;
  opacity:.92;
}

.td-cost-num{
  font-weight:400; /* NOT bold */
}

.td-ico-after .td-ico{
  margin-right:0;
  margin-left:6px;
  vertical-align:-2px;
}

/* Hide the old inline hint pill (replaced by help icon + tooltip) */
.td-hint{ display:none !important; }

/* Overlay layout: keep stats + play together */
.td-overlay{ justify-content:flex-start; }
.td-ol-left, .td-ol-right{ display:flex; align-items:center; gap:10px; }
.td-ol-right{ margin-left:auto; justify-content:flex-end; }

/* Tower buttons: centered stack */
.td-tower-btn{ align-items:center; text-align:center; }
.td-tower-btn .td-tower-cost{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* Fix: play/pause icon centered (no SVG margin) */
.td-btn-icon .td-ico{ margin-right:0 !important; margin-left:0 !important; }


/* =========================
   UI polish: play/pause + tower buttons
   ========================= */

/* Play/Pause icon button: center SVG */
.td-btn-icon{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:0 !important;
}
.td-btn-icon svg,
.td-btn-icon .td-ico{
  display:block !important;
  margin:0 !important;
}
/* optical centering for play triangle */
.td-btn-icon .td-ico{ transform: translateX(1px); }

/* Tower buttons stacked and centered */
.td-btn.td-tower{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:4px !important;
  text-align:center !important;
}
.td-tower .td-tname{
  font-weight:800;
  letter-spacing:.06em;
}
.td-tower .td-tcost{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  opacity:.95;
}
.td-tower .td-tcost svg,
.td-tower .td-tcost .td-ico{ display:block; margin:0 !important; }



/* =========================
   Drawer: hover on desktop, toggle on touch
   ========================= */

#td-drawer.td-drawer{
  --panelW: 320px;
  position:absolute;
  top:10px;
  right:10px;
  height: calc(100% - 20px);
  width: var(--panelW);
  z-index: 20;
  transform: translateX(calc(100% + 12px)); /* fully hidden */
  transition: transform .18s ease;
  pointer-events:none; /* panel controls this */
}

#td-drawer .td-drawer-panel{
  height:100%;
  width:100%;
  border-radius:14px;
  border:1px solid #223045;
  background: rgba(18,27,42,0.78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 10px 28px rgba(0,0,0,.40);
  padding:14px;
  pointer-events:auto;
}

.td-wrap.drawer-open #td-drawer.td-drawer{ transform: translateX(0); }

/* Desktop: hover opens (no click required) */
@media (hover:hover) and (pointer:fine){
  .td-wrap:hover #td-drawer.td-drawer{ transform: translateX(0); }
}

/* Toggle button (needed on touch + also handy on desktop) */
#td-drawer-toggle.td-drawer-toggle{
  position:absolute;
  top:12px;
  right:12px;
  width:44px;
  height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
  border-radius:14px;
  background:#1f2a37;
  color:#e6edf3;
  border:1px solid #324155;
  cursor:pointer;
  line-height:0;
  z-index: 30; /* always above the drawer panel */
  pointer-events:auto;
}
#td-drawer-toggle.td-drawer-toggle svg{ display:block; margin:0 !important; }
#td-drawer-toggle.td-drawer-toggle .td-ico{ margin:0 !important; vertical-align:0 !important; }

.td-drawer-title{ font-weight:800; letter-spacing:.04em; }
.td-drawer-line{ opacity:.95; margin:7px 0; font-size:.95em; }

/* Overlay should not block clicks on buttons */
.td-overlay .td-btn-icon{ pointer-events:auto; }