.td-page { max-width:1100px; margin-inline:auto; }
.td-intro { display:flex; justify-content:space-between; align-items:end; gap:30px; padding:30px 0 23px; }
.td-intro .back-link { margin-bottom:15px; }
.td-intro .eyebrow { margin-bottom:6px; }
.td-intro h1 { font-size:clamp(38px,5vw,62px); margin:0 0 9px; }
.td-intro h1 span { color:var(--accent-ink); }
.td-intro p { margin:0; color:var(--muted); font-size:14px; }
.td-mode { display:grid; grid-template-columns:10px auto; align-items:center; gap:6px 9px; padding-bottom:4px; font-size:12px; }
.td-mode small { grid-column:2; color:var(--muted); }
.td-mode-dot { width:7px; height:7px; border-radius:50%; background:var(--accent-ink); }
.td-workspace { display:grid; grid-template-columns:minmax(0,1fr) 258px; max-width:calc(clamp(640px,80svh,880px) + 258px); margin-inline:auto; border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--surface); }
.td-game { min-width:0; }
.td-hud { display:flex; align-items:center; gap:32px; padding:17px 22px; }
.td-hud > div > span { display:block; color:var(--muted); font-size:10px; text-transform:uppercase; letter-spacing:.1em; }
.td-hud strong { font:600 25px/1.2 var(--display); font-variant-numeric:tabular-nums; }
.td-hud strong small { color:var(--muted); font-size:12px; font-weight:400; }
.td-hud .td-gold { color:var(--accent-ink); }
.td-hud-controls { margin-left:auto; display:flex; gap:6px; }
.td-hud-controls button { background:var(--surface-alt); border:1px solid var(--line); color:var(--ink); border-radius:6px; font-size:11px; padding:7px 10px; }
.td-map { position:relative; aspect-ratio:16 / 12; background:#173c40; isolation:isolate; overflow:hidden; }
.td-map canvas { display:block; width:100%; height:100%; }
.td-pads { position:absolute; inset:0; display:grid; grid-template-columns:repeat(16,minmax(0,1fr)); grid-template-rows:repeat(12,minmax(0,1fr)); }
.td-pad { min-width:0; min-height:0; width:100%; height:100%; border:1px solid transparent; border-radius:5px; background:transparent; cursor:crosshair; transition:background .15s,border-color .15s; padding:0; }
.td-pad:hover, .td-pad[aria-pressed="true"] { border:1px solid #c6fff0; background:#a2f7dd20; }
.td-pad.reserved { pointer-events:none; }
.td-pad.occupied { border-color:transparent; background:transparent; color:transparent; }
.td-pad.occupied:hover, .td-pad.occupied[aria-pressed="true"] { border-color:#f8f4cd; }
.td-pad.attacked { border-color:#fa826f; background:#fa826f30; }
.td-pad:focus-visible { outline:3px solid #fff; outline-offset:3px; }
.td-enemies { position:absolute; inset:0; pointer-events:none; z-index:2; }
.td-enemy { position:absolute; top:0; left:0; width:32px; height:32px; padding:0; border:1px solid transparent; border-radius:50%; background:transparent; pointer-events:auto; cursor:help; will-change:transform; }
.td-enemy:hover, .td-enemy[aria-pressed="true"], .td-enemy:focus-visible { border-color:#fff1ca; outline:1px solid #fff1ca; outline-offset:2px; }
.td-enemy-info { position:absolute; top:0; left:0; max-width:min(210px,85%); padding:9px 12px; border:1px solid var(--line); border-radius:7px; background:var(--surface); color:var(--ink); box-shadow:0 5px 20px #0b202c55; pointer-events:none; z-index:4; font-size:11px; }
.td-enemy-info strong, .td-enemy-info > span, .td-enemy-info small { display:block; }
.td-enemy-info strong { margin-bottom:3px; }
.td-enemy-info small { color:var(--muted); font-size:9px; margin-top:5px; }
.td-enemy-health-track { margin-top:5px; height:4px; background:var(--line); border-radius:3px; overflow:hidden; }
.td-enemy-health-track span { display:block; height:100%; background:var(--accent-ink); }
.td-field-header { display:flex; align-items:center; justify-content:space-between; gap:9px; padding:9px 15px; background:#173c40; color:#9fbdbc; font-size:9px; letter-spacing:.05em; }
.td-field-header > span:first-child { color:#f2a2ab; }
.td-field-header > span:last-child { color:#94e8d0; }
.td-field-header .blocked { color:#ffb38d; }
.td-wave-bar { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:16px 20px; border-bottom:1px solid var(--line); }
.td-wave-bar > div { display:flex; align-items:center; gap:8px; font-size:12px; }
.td-wave-indicator { width:6px; height:6px; border-radius:50%; background:var(--accent-ink); flex-shrink:0; }
.td-wave-bar .button { font-size:12px; padding:10px 18px; min-height:40px; }
.td-defense-actions { display:grid; grid-template-columns:minmax(0,1fr) 170px 150px; align-items:center; gap:24px; padding:16px 20px; border-bottom:1px solid var(--line); background:var(--surface-alt); }
.td-action-context { min-width:0; display:grid; gap:3px; }
.td-action-context > span { color:var(--muted); font-size:9px; text-transform:uppercase; letter-spacing:.05em; }
.td-action-context strong { font-size:13px; line-height:1.5; }
.td-defense-actions button { width:100%; height:52px; min-height:52px; font-size:12px; padding:8px 10px; border-radius:7px; }
.td-action-upgrade { display:flex; flex-direction:column; justify-content:center; gap:2px; }
.td-action-upgrade:hover { transform:none; }
.td-defense-actions small { display:block; font-size:10px; font-weight:400; line-height:1.4; }
.td-action-sell { display:flex; align-items:center; justify-content:center; gap:9px; border:2px solid var(--danger); background:var(--surface); color:var(--danger); text-align:left; }
.td-action-sell svg { width:20px; height:22px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex:none; }
.td-action-sell:hover:not(:disabled) { background:color-mix(in srgb,var(--danger) 10%,var(--surface)); }
.td-action-sell:focus-visible { outline:3px solid var(--danger); outline-offset:3px; }
.td-action-sell:disabled { opacity:.5; cursor:default; }
.td-game-foot { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:11px 20px; font-size:10px; color:var(--muted); }
.td-game-foot button { border:0; color:var(--muted); font-size:10px; background:none; padding:5px; white-space:nowrap; }
.td-inspector { border-left:1px solid var(--line); padding:20px; display:flex; flex-direction:column; gap:17px; }
.td-inspector .eyebrow { font-size:9px; margin-bottom:7px; }
.td-inspector h2 { font-size:23px; margin-bottom:8px; }
.td-inspector p { font-size:11px; color:var(--muted); line-height:1.6; margin:0; }
.td-shop { display:grid; gap:7px; }
.td-shop button { text-align:left; display:grid; grid-template-columns:40px 1fr auto; align-items:center; gap:8px; padding:11px 10px; border:1px solid var(--line); border-radius:8px; background:var(--surface); color:var(--ink); transition:background .15s, border-color .15s; }
.td-shop button[aria-pressed="true"] { background:var(--accent-soft); border-color:var(--accent-ink); }
.td-shop button > span:nth-child(2) { display:grid; gap:3px; }
.td-shop b { font-size:12px; }
.td-shop small { color:var(--muted); font-size:9px; }
.td-shop .td-price { font-size:12px; font-variant-numeric:tabular-nums; }
.td-shop svg { width:38px; height:42px; }
.td-selection { border-top:1px solid var(--line); padding-top:15px; min-height:120px; }
.td-selection h3 { font-size:19px; margin-bottom:7px; }
.td-values { display:flex; gap:18px; margin:12px 0; font-size:11px; }
.td-values span { display:grid; color:var(--muted); font-size:9px; }
.td-values b { color:var(--ink); font-size:14px; }
.td-sell { display:block; width:100%; border:0; background:none; color:var(--muted); font-size:10px; padding:9px; }
.td-enemy-preview { border-top:1px solid var(--line); padding-top:13px; margin-top:auto; }
.td-enemy-preview small { color:var(--muted); font-size:9px; line-height:1.5; display:block; margin-top:7px; }
.td-feedback { min-height:19px; color:var(--danger); font-size:12px; margin:9px 0 0; }
.td-overlay { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:min(80%,360px); padding:26px; background:var(--surface); color:var(--ink); text-align:center; border:1px solid var(--line); border-radius:9px; box-shadow:0 10px 70px #1c2e2f60; z-index:3; }
.td-overlay h2 { font-size:29px; margin:8px 0; }
.td-overlay p { font-size:12px; color:var(--muted); margin-bottom:18px; }
.td-overlay .button { min-height:38px; padding:10px 20px; font-size:12px; }
.td-bottom { display:grid; grid-template-columns:1.15fr 1fr; gap:70px; margin-top:31px; }
.td-bottom h2 { font-size:27px; margin-bottom:15px; }
.td-bottom p, .td-bottom li { color:var(--muted); font-size:12px; }
.td-guide ol { padding-left:18px; margin:0 0 18px; }
.td-guide li { margin-bottom:9px; padding-left:4px; }
.td-guide b { color:var(--ink); }
.td-best { font:600 22px/1.3 var(--display); padding:13px 0; color:var(--accent-ink); }
.td-history { margin-bottom:18px; }
.td-history-row { display:flex; justify-content:space-between; align-items:center; gap:10px; border-bottom:1px solid var(--line); padding:9px 0; font-size:11px; }
.td-history-row small { color:var(--muted); font-size:10px; }
.td-records .button { border:1px solid var(--line); font-size:12px; }
.tower-library { --card-background:var(--accent-soft); --card-ink:var(--ink); --card-muted:var(--muted); --card-label:var(--accent-ink); --card-status:var(--accent-ink); }
.tower-library-art { height:90px; display:flex; align-items:center; gap:16px; margin-bottom:20px; border-bottom:2px dashed var(--line); font:48px/1 var(--display); color:var(--accent-ink); }
.tower-library-art span:nth-child(2) { font-size:22px; opacity:.6; }
@media (max-width:1050px) { .td-workspace { grid-template-columns:minmax(0,1fr) 220px; } .td-inspector { padding:15px; } .td-hud { gap:20px; padding:15px; } .td-hud strong { font-size:22px; } }
@media (max-width:800px) {
  .td-intro { align-items:start; flex-direction:column; gap:12px; padding-top:24px; }
  .td-workspace { grid-template-columns:1fr; max-width:672px; }
  .td-inspector { border-left:0; border-top:1px solid var(--line); display:grid; grid-template-columns:1fr 1fr; gap:14px 20px; }
  .td-inspector-head { display:none; }
  .td-selection { border:0; padding:0; }
  .td-enemy-preview { grid-column:1 / -1; }
  .td-bottom { gap:30px; }
}
@media (max-width:520px) {
  .td-hud { gap:10px; padding:12px; flex-wrap:wrap; }
  .td-hud > div > span { font-size:8px; } .td-hud strong { font-size:21px; }
  .td-hud-controls { gap:3px; } .td-hud-controls button { padding:6px 5px; font-size:9px; }
  .td-field-header { font-size:8px; padding:8px; letter-spacing:0; }
  .td-wave-bar { padding:12px; align-items:start; flex-direction:column; }
  .td-wave-bar .button { width:100%; justify-content:center; }
  .td-defense-actions { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:14px; padding:12px; }
  .td-defense-actions button { height:64px; min-height:64px; }
  .td-action-context { grid-column:1 / -1; min-height:38px; }
  .td-game-foot { padding:8px 12px; font-size:9px; }
  .td-inspector { padding:13px; grid-template-columns:1fr; }
  .td-shop { grid-template-columns:repeat(5, minmax(0,1fr)); gap:4px; }
  .td-shop button { grid-template-columns:1fr; padding:8px 4px; text-align:center; gap:4px; justify-items:center; }
  .td-shop svg { width:31px; height:32px; }
  .td-shop small { display:none; } .td-shop b { font-size:9px; } .td-shop .td-price { font-size:10px; }
  .td-selection { min-height:70px; }
  .td-values { margin:8px 0; } .td-enemy-preview { grid-column:auto; }
  .td-bottom { grid-template-columns:1fr; gap:25px; }
  .td-overlay { padding:13px; width:82%; } .td-overlay h2 { font-size:22px; } .td-overlay p { margin:7px 0; font-size:10px; }
  .td-overlay .button { padding:6px 15px; min-height:30px; }
}
@media (max-width:360px) { .td-shop { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (prefers-reduced-motion:reduce) { .td-shop button, .td-pad { transition:none; } }

/* Compact play layout. */

.td-workspace{max-width:calc(clamp(460px,(100svh - 425px)*1.3333,820px) + 258px)}.td-hud{padding:10px 14px;gap:22px}.td-hud strong{font-size:22px}.td-inspector-head{padding:14px}.td-inspector-head h2{font-size:20px}.td-inspector-head .eyebrow{display:none}.td-bottom{display:block;margin:10px 0}.td-guide{padding:0;border:0}.td-guide h2{font-size:25px}.td-guide li,.td-guide p{font-size:14px}.td-records{padding:16px}.td-enemy-preview{padding:12px 14px}
@media(max-width:850px){.td-workspace{max-width:100%}.td-hud{gap:14px}}
@media(min-width:851px) {
  .td-hud { padding:8px 14px; gap:18px; }
  .td-field-header { padding-block:6px; }
  .td-wave-bar { padding:8px 14px; }
  .td-defense-actions { grid-template-columns:minmax(0,1fr) 135px 130px; gap:10px; padding:10px 14px; }
  .td-defense-actions button { height:46px; min-height:46px; padding:6px; }
  .td-defense-actions .button>span { font-size:12px; line-height:1.3; }
  .td-action-context strong { font-size:12px; }
  .td-action-context>span { font-size:8px; }
  .td-inspector-head { padding:0; }
  .td-inspector { padding:14px; gap:12px; }
  .td-shop button { grid-template-columns:32px 1fr auto; padding:7px 10px; }
  .td-shop svg { width:30px; height:32px; }
  .td-selection { min-height:90px; padding-top:10px; }
  .td-enemy-preview { padding:10px 0 0; }
  .td-game-foot { padding:7px 14px; }
}