/* ============================================================
   tdw3d.css — overlay UI for the 3D Special Edition.
   Matches the 2D game's design system (tokens.css): dark futuristic
   arena, holographic teal accents, SHARP corners, uppercase Chakra
   Petch, Material Symbols icons. The WebGL canvas is the world;
   everything here floats on top.
   Colour vars (--accent, --bg, --line, --gold, …) come from tokens.css.
   ============================================================ */
* { box-sizing: border-box; }

/* Visually-hidden live region for screen readers. */
.tdw3d-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* Reduced-motion: neutralise every CSS animation/transition in the overlay
   (splash pulse, coin spin, banner scale, inspector/hint pop, toast slide).
   The WebGL scene is calmed separately by tdw3d-scene.js setReducedMotion. */
html.reduce-motion *, html.reduce-motion *::before, html.reduce-motion *::after {
  animation-duration: .001ms !important; animation-iteration-count: 1 !important;
  transition-duration: .001ms !important; scroll-behavior: auto !important;
}

/* Keyboard focus rings (mouse clicks stay ring-free via :focus-visible). */
.tdw3d-mode:focus-visible, .tdw3d-deck:focus-visible, .tdw3d-start:focus-visible,
.tdw3d-act:focus-visible, .tdw3d-ghost:focus-visible, .tdw3d-iconbtn:focus-visible,
.tdw3d-pick:focus-visible, .tdw3d-reveal:focus-visible, .tdw3d-attack:focus-visible,
.tdw3d-set-toggle:focus-visible, .tdw3d-set-range:focus-visible, .tdw3d-insp-close:focus-visible,
.tdw3d-hint-ok:focus-visible, .tdw3d-back:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
html, body {
  margin: 0; height: 100%; overflow: hidden;
  font-family: 'Chakra Petch', system-ui, sans-serif; color: var(--light);
  -webkit-user-select: none; user-select: none;
}
#tdw3d-canvas { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; z-index: 0; touch-action: none; }
/* Cinematic vignette over the WebGL frame (subtle — focuses the eye, hides the
   flat edges). Sits above the canvas, below the HUD; never eats input. */
#tdw3d-vignette {
  position: fixed; inset: 0; z-index: 5; pointer-events: none;
  background: radial-gradient(ellipse 75% 70% at 50% 46%, transparent 55%, rgba(0,4,9,0.42) 100%);
}

/* shared icon sizing inside our buttons */
.tdw3d-ico { font-family: 'Material Symbols Rounded'; font-weight: 500; font-size: 20px; line-height: 1; vertical-align: middle; font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24; }

/* ── Splash ── */
#tdw3d-splash {
  position: fixed; inset: 0; display: grid; place-items: center; z-index: 60;
  background: radial-gradient(ellipse at 50% 30%, var(--bg-3), var(--bg) 70%);
}
.tdw3d-splash-inner { color: var(--accent); letter-spacing: 0.3em; text-transform: uppercase; font-weight: 600; font-size: 13px; animation: tdwpulse 1.2s infinite; }
@keyframes tdwpulse { 0%,100%{opacity:.35} 50%{opacity:1} }

/* ── Start menu — reuses the 2D "Choose Your Deck" play screen (styles.css).
   The container just fills the viewport above the canvas; the .play-stage
   inside provides its own opaque background. ── */
#tdw3d-menu { position: fixed; inset: 0; z-index: 50; overflow: hidden; }
/* Help + Settings cluster, top-right of the play-header (in normal flow now). */
.tdw3d-menu-tools { display: flex; gap: 8px; flex: none; }
/* 3D menu reuses the 2D .play-footer (right-aligned) — split it so the
   "Classic 2D" link sits left and the Start button stays right. */
#tdw3d-menu .play-footer { justify-content: space-between; align-items: center; }
#tdw3d-menu .play-footer .tdw3d-back { margin-top: 0; }
.tdw3d-panel {
  width: min(860px, 96vw); max-height: 92vh; overflow: auto;
  background: rgba(0,17,26,0.78); border: 1px solid var(--line);
  padding: 30px 34px; box-shadow: var(--shadow-deep);
  position: relative;
}
.tdw3d-panel::before {  /* top accent bar — a 2D arena signature */
  content: ''; position: absolute; left: 0; top: 0; height: 3px; width: 64px; background: var(--accent);
}
.tdw3d-menu-tools { position: absolute; top: 18px; right: 18px; display: flex; gap: 8px; }
.tdw3d-eyebrow { letter-spacing: .35em; font-size: 11px; color: var(--accent); font-weight: 700; text-transform: uppercase; }
.tdw3d-title { margin: 6px 0 4px; font-size: 46px; font-weight: 700; text-transform: uppercase; letter-spacing: .01em; line-height: 1; }
.tdw3d-title span { background: linear-gradient(90deg, var(--accent), #7af0e0); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tdw3d-sub { color: var(--muted); margin: 0 0 20px; font-size: 14px; }
.tdw3d-label { letter-spacing: .25em; font-size: 11px; color: var(--muted); margin: 18px 0 9px; text-transform: uppercase; font-weight: 600; }

.tdw3d-mode-row { display: flex; gap: 10px; }
.tdw3d-mode {
  flex: 1; padding: 13px; cursor: pointer;
  background: rgba(255,255,255,.03); border: 1px solid var(--line); color: var(--light);
  font-family: inherit; font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; transition: .15s;
}
.tdw3d-mode:hover { border-color: var(--accent); }
.tdw3d-mode.on { background: rgba(52,217,195,.14); border-color: var(--accent); color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }

.tdw3d-deckgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.tdw3d-deck {
  background: rgba(255,255,255,.025); border: 1px solid var(--line);
  padding: 10px; cursor: pointer; color: var(--light); font-family: inherit; text-align: left; transition: .15s; position: relative;
}
.tdw3d-deck:hover { border-color: var(--accent); transform: translateY(-2px); }
.tdw3d-deck.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), var(--glow); background: rgba(52,217,195,.08); }
.tdw3d-deck-art { width: 100%; aspect-ratio: 0.72; background: #0a1622 center/cover no-repeat; margin-bottom: 9px; box-shadow: var(--shadow-deep); }
.tdw3d-deck-name { font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .03em; }
.tdw3d-deck-strat { font-size: 11px; color: var(--muted); margin-top: 3px; }

/* shared button (mirrors 2D button.btn) */
.tdw3d-start, .tdw3d-act, .tdw3d-ghost {
  font-family: inherit; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; font-size: 13px;
  cursor: pointer; transition: all .2s; border-radius: 0; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.tdw3d-start {
  margin-top: 24px; width: 100%; padding: 16px; border: 1px solid var(--accent);
  color: var(--bg); background: var(--accent);
}
.tdw3d-start:hover:not(:disabled) { box-shadow: 0 0 28px rgba(52,217,195,.55); }
.tdw3d-start:disabled { opacity: .4; cursor: not-allowed; box-shadow: none; }
.tdw3d-back { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; color: var(--muted); text-decoration: none; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.tdw3d-back:hover { color: var(--accent); }

/* ── HUD ── */
#tdw3d-hud { position: fixed; inset: 0; z-index: 20; pointer-events: none; }
#tdw3d-hud .tdw3d-hud-bar, #tdw3d-hud .tdw3d-turnchip, #tdw3d-actions, #tdw3d-logwrap, #tdw3d-topbar, .tdw3d-hint, .tdw3d-clocks { pointer-events: auto; }
.tdw3d-hud-bar {
  position: absolute; left: 50%; transform: translateX(-50%);
  background: rgba(0,17,26,0.9); border: 1px solid var(--line);
  padding: 7px 16px; font-size: 12px; color: var(--muted); white-space: nowrap; letter-spacing: .04em;
  display: flex; align-items: center; gap: 12px;
}
.tdw3d-hud-bar b { color: var(--light); text-transform: uppercase; letter-spacing: .08em; }
.tdw3d-hud-name { color: var(--light); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: 12px; }
.tdw3d-pips { display: inline-flex; gap: 4px; align-items: center; }
.tdw3d-pip { width: 8px; height: 8px; border-radius: 50%; border: 1px solid var(--line); background: transparent; transition: .2s; }
.tdw3d-pip.on { background: var(--gold); border-color: var(--gold); box-shadow: 0 0 6px rgba(255,200,87,.6); }
.tdw3d-stat { display: inline-flex; align-items: center; gap: 4px; font-variant-numeric: tabular-nums; color: var(--muted); }
.tdw3d-stat .tdw3d-ico { font-size: 15px; color: var(--accent); }
.tdw3d-hud-bar.top { top: 16px; }
.tdw3d-hud-bar.top { border-top: 2px solid var(--joy); }       /* Bob = warm */
.tdw3d-hud-bar.bottom { bottom: 92px; border-bottom: 2px solid var(--accent); }  /* You = teal */
.tdw3d-turnchip {
  position: absolute; top: 16px; right: 16px; background: rgba(0,17,26,0.9);
  border: 1px solid var(--line); border-left: 2px solid var(--accent);
  padding: 8px 14px; font-size: 12px; color: var(--accent); font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
}

/* Pro-mode chess clock */
.tdw3d-clocks {
  position: absolute; top: 52px; right: 16px; display: flex; align-items: center; gap: 8px;
  background: rgba(0,17,26,0.9); border: 1px solid var(--line);
  padding: 7px 14px; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: .05em;
}
.tdw3d-clock { color: var(--muted); transition: color .2s; }
.tdw3d-clock.active { color: var(--light); }
.tdw3d-clock.low { color: var(--gold); }
.tdw3d-clock.crit { color: var(--danger); animation: tdwpulse .8s infinite; }
.tdw3d-clock-sep { color: var(--muted); opacity: .5; }

#tdw3d-actions { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; transition: opacity .2s, bottom .25s; }
/* Hand-tracking on: lift the action buttons off the bottom edge (which the
   hand cursor can't reach without leaving the camera frame) and enlarge them. */
body.tdw3d-hands-on #tdw3d-actions { bottom: 19%; gap: 14px; }
body.tdw3d-hands-on .tdw3d-act { padding: 16px 26px; font-size: 14px; }
.tdw3d-act {
  padding: 14px 22px; border: 1px solid var(--accent);
  background: transparent; color: var(--accent);
}
.tdw3d-act:hover:not(:disabled) { background: rgba(52,217,195,.12); }
.tdw3d-act:disabled { opacity: .35; cursor: not-allowed; }
.tdw3d-act.primary { background: var(--accent); color: var(--bg); }
.tdw3d-act.primary:hover:not(:disabled) { box-shadow: 0 0 28px rgba(52,217,195,.55); background: var(--accent); }

/* Top-left control cluster: leave / recenter / settings */
#tdw3d-topbar { position: absolute; top: 16px; left: 16px; display: flex; gap: 8px; }
.tdw3d-iconbtn { width: 40px; height: 40px; display: grid; place-items: center; background: rgba(0,17,26,0.9); border: 1px solid var(--line); color: var(--muted); text-decoration: none; cursor: pointer; transition: .15s; }
.tdw3d-iconbtn:hover { color: var(--accent); border-color: var(--accent); }
.tdw3d-iconbtn.on { color: var(--accent); border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent), 0 0 14px rgba(52,217,195,.4); }
.tdw3d-exit:hover { color: var(--danger); border-color: var(--danger); }

/* ── Hand-tracking cursor (shows where each hand points; fills to confirm a
   pinch = click/drag). Sits above everything; never eats input. ── */
#tdw3d-hand-cursors { position: fixed; inset: 0; z-index: 60; pointer-events: none; }
.tdw3d-hand-cursor { position: absolute; top: 0; left: 0; width: 52px; height: 52px; will-change: transform; transition: opacity .15s; }
.thc-ring { position: absolute; inset: 0; border: 2px solid var(--accent); border-radius: 50%; box-shadow: 0 0 12px rgba(52,217,195,.55), inset 0 0 8px rgba(52,217,195,.3); }
.thc-fill { position: absolute; inset: 34%; border-radius: 50%; background: var(--accent); opacity: 0; transform: scale(0); transition: transform .16s ease, opacity .16s; box-shadow: 0 0 16px rgba(52,217,195,.8); }
.tdw3d-hand-cursor.pinch .thc-fill { opacity: .95; transform: scale(1); }
.tdw3d-hand-cursor.pinch .thc-ring { border-color: var(--gold); box-shadow: 0 0 18px rgba(255,200,87,.7), inset 0 0 10px rgba(255,200,87,.4); }
/* Over a real UI button — square the ring up to read as "button", not board. */
.tdw3d-hand-cursor.over .thc-ring { border-radius: 8px; border-color: var(--gold); }

/* ── Hand contact zones (point at them to spin / zoom / recenter) ── */
#tdw3d-hand-zones { position: fixed; inset: 0; z-index: 23; pointer-events: none; }
.thz { position: absolute; display: grid; place-items: center; gap: 2px; color: var(--muted); background: rgba(0,17,26,.42); border: 1px solid var(--line); transition: .12s; }
.thz .tdw3d-ico { font-size: 24px; }
.thz-label { font-size: 9px; letter-spacing: .18em; text-transform: uppercase; }
.thz.active { color: var(--bg); background: var(--accent); border-color: var(--accent); box-shadow: 0 0 22px rgba(52,217,195,.6); }
.thz-left { left: 10px; top: 24%; width: 62px; height: 52%; }
.thz-right { right: 10px; top: 24%; width: 62px; height: 52%; }
.thz-cluster { position: absolute; top: 60px; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; }
.thz-c { position: relative; width: 52px; height: 52px; }

/* ── Hand-tracking status + nerd camera/skeleton panel ── */
#tdw3d-hands-hud { position: fixed; right: 16px; bottom: 120px; z-index: 22; pointer-events: auto; background: rgba(0,17,26,.92); border: 1px solid var(--line); padding: 8px 10px; max-width: 244px; }
.thh-row { display: flex; align-items: center; gap: 8px; }
.thh-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); flex: none; }
.thh-status { color: var(--muted); font-size: 11px; letter-spacing: .04em; flex: 1; white-space: nowrap; }
.thh-skel, .thh-help { background: transparent; border: 1px solid var(--line); color: var(--muted); font-family: inherit; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; padding: 4px 8px; cursor: pointer; }
.thh-help { padding: 4px 7px; }
.thh-skel:hover, .thh-help:hover { color: var(--accent); border-color: var(--accent); }
.thh-cam { position: relative; margin-top: 8px; width: 220px; height: 165px; }
.thh-cam.hidden { display: none; }
.thh-video { width: 220px; height: 165px; object-fit: cover; transform: scaleX(-1); background: #000; display: block; border: 1px solid var(--line); }
.thh-canvas { position: absolute; left: 0; top: 0; }

/* ── Log drawer ── */
#tdw3d-logwrap { position: absolute; left: 16px; bottom: 18px; width: 290px; }
#tdw3d-log-toggle { width: 100%; text-align: left; padding: 9px 13px; background: rgba(0,17,26,0.9); border: 1px solid var(--line); color: var(--accent); font-family: inherit; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; }
#tdw3d-log { max-height: 0; overflow: hidden; background: rgba(0,12,18,.95); border: 1px solid var(--line); border-top: 0; transition: max-height .25s; font-size: 12px; }
#tdw3d-logwrap.open #tdw3d-log { max-height: 230px; overflow-y: auto; padding: 9px 11px; }
.tdw3d-logline { color: var(--muted); padding: 2px 0; line-height: 1.35; }
.tdw3d-logline.action { color: var(--light); }
.tdw3d-logline.dmg { color: #ff8a8a; }
.tdw3d-logline.win { color: var(--gold); font-weight: 700; }
/* custom scrollbar to match 2D inner panels */
#tdw3d-log::-webkit-scrollbar { width: 6px; }
#tdw3d-log::-webkit-scrollbar-thumb { background: var(--accent-dim); }

/* ── Banner / toast ── */
#tdw3d-banner { position: fixed; top: 28%; left: 50%; transform: translate(-50%,-50%) scale(.92); z-index: 35; text-align: center; opacity: 0; pointer-events: none; transition: .3s; }
#tdw3d-banner.show { opacity: 1; transform: translate(-50%,-50%) scale(1); }
.tdw3d-banner-title { font-size: 48px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; text-shadow: 0 0 30px rgba(52,217,195,.55); }
.tdw3d-banner-sub { color: var(--accent); letter-spacing: .28em; font-size: 13px; text-transform: uppercase; margin-top: 4px; }
#tdw3d-toast { position: fixed; bottom: 78px; left: 50%; transform: translateX(-50%) translateY(10px); z-index: 40; background: rgba(0,17,26,.96); border: 1px solid var(--accent); padding: 12px 20px; font-size: 14px; font-weight: 500; letter-spacing: .05em; opacity: 0; pointer-events: none; transition: .2s; box-shadow: var(--glow); }
#tdw3d-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ── Modals (mirror 2D .big-modal) ── */
/* z-index 55 so panels (inspector / settings / confirm) sit ABOVE the start
   menu (z 50) — the settings gear on the menu opens into this overlay. */
#tdw3d-overlay { position: fixed; inset: 0; z-index: 55; pointer-events: none; }
.tdw3d-modal-back { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0,5,10,.88); backdrop-filter: blur(6px); pointer-events: auto; padding: 18px; }
.tdw3d-modal { width: min(820px, 96vw); max-height: 90vh; overflow: auto; background: var(--bg); border: 1px solid rgba(255,255,255,.22); padding: 30px 34px; box-shadow: var(--shadow-deep); text-align: center; position: relative; }
.tdw3d-modal::before { content: ''; position: absolute; left: 0; top: 0; height: 3px; width: 64px; background: var(--accent); }
.tdw3d-modal-title { margin: 0 0 8px; font-size: 26px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--accent); }
.tdw3d-modal-sub { color: var(--muted); font-size: 13px; margin-bottom: 18px; }

.tdw3d-pickgrid, .tdw3d-revealgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 12px; }
.tdw3d-pick, .tdw3d-reveal { background: rgba(255,255,255,.03); border: 1px solid var(--line); padding: 8px; cursor: pointer; color: var(--light); font-family: inherit; text-align: center; transition: .15s; }
.tdw3d-pick:hover, .tdw3d-reveal:hover { transform: translateY(-2px); border-color: var(--accent); box-shadow: var(--glow); }
.tdw3d-pick.off { opacity: .32; cursor: not-allowed; }
.tdw3d-pick.chosen { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), var(--glow); }
.tdw3d-reveal.hl { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold), 0 0 16px rgba(255,200,87,.4); }
.tdw3d-pick-art { width: 100%; aspect-ratio: 0.72; background: #0a1622 center/cover no-repeat; box-shadow: var(--shadow-deep); }
.tdw3d-pick-name { font-size: 12px; font-weight: 700; margin-top: 7px; text-transform: uppercase; letter-spacing: .02em; }
.tdw3d-pick-hp { height: 6px; background: rgba(255,255,255,.12); margin: 6px 4px 2px; overflow: hidden; }
.tdw3d-pick-hp span { display: block; height: 100%; background: var(--accent); }
.tdw3d-pick-hp-num { font-size: 10px; color: var(--muted); letter-spacing: .04em; }
.tdw3d-pick-role { font-size: 10px; color: var(--gold); font-weight: 700; min-height: 12px; letter-spacing: .14em; }
.tdw3d-pick-tip { font-size: 9px; color: var(--muted); letter-spacing: .08em; text-transform: uppercase; opacity: .55; margin-top: 3px; }
.tdw3d-pick:hover .tdw3d-pick-tip, .tdw3d-reveal:hover .tdw3d-pick-tip { opacity: .9; color: var(--accent); }

.tdw3d-attack { display: flex; flex-direction: column; align-items: stretch; gap: 6px; width: 100%; margin: 8px 0; padding: 13px 16px; background: rgba(255,255,255,.035); border: 1px solid var(--line); color: var(--light); font-family: inherit; cursor: pointer; transition: .15s; text-align: left; }
.tdw3d-attack:hover:not(:disabled) { border-color: var(--accent); transform: translateX(3px); box-shadow: var(--glow); }
.tdw3d-attack.off, .tdw3d-attack:disabled { opacity: .6; cursor: not-allowed; }
.tdw3d-attack-main { display: flex; align-items: center; gap: 12px; }
.tdw3d-attack-name { flex: 1; text-align: left; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.tdw3d-attack-cost { font-size: 18px; letter-spacing: 2px; }
.tdw3d-attack-free { font-size: 11px; color: var(--muted); letter-spacing: .04em; }
.tdw3d-attack-dmg { min-width: 44px; text-align: right; font-size: 22px; font-weight: 700; color: var(--accent); }
.tdw3d-attack-sub { font-size: 12px; color: var(--muted); line-height: 1.35; }
.tdw3d-attack-reason { color: var(--gold); font-weight: 600; }

.tdw3d-ghost { margin-top: 14px; padding: 12px 20px; background: transparent; border: 1px solid var(--line); color: var(--muted); font-family: inherit; }
.tdw3d-ghost:hover { color: var(--accent); border-color: var(--accent); background: rgba(52,217,195,.08); }

.tdw3d-coin, .tdw3d-gameover { display: flex; flex-direction: column; align-items: center; }
.tdw3d-coin-spin { font-size: 64px; color: var(--gold); animation: tdwspin 1s ease; }
@keyframes tdwspin { from { transform: rotateY(0) scale(.3); opacity: 0; } to { transform: rotateY(720deg) scale(1); opacity: 1; } }
.tdw3d-go-emoji { font-size: 80px; }

/* ── Card inspector (hold / right-click a card) ── */
.tdw3d-inspect-back { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0,5,10,.86); backdrop-filter: blur(7px); pointer-events: auto; padding: 18px; animation: tdwfade .18s ease; }
@keyframes tdwfade { from { opacity: 0; } to { opacity: 1; } }
.tdw3d-inspect {
  --card-col: var(--accent);
  width: min(620px, 96vw); max-height: 92vh; overflow: auto;
  display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 0;
  background: var(--bg); border: 1px solid rgba(255,255,255,.18);
  box-shadow: var(--shadow-deep); position: relative;
  animation: tdwpop .22s cubic-bezier(.2,.9,.3,1.2);
}
@keyframes tdwpop { from { transform: scale(.92); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.tdw3d-inspect::before { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 3px; background: var(--card-col); z-index: 2; }
.tdw3d-insp-art { background: #0a1622 center/cover no-repeat; min-height: 320px; border-right: 1px solid var(--line); }
.tdw3d-insp-body { padding: 22px 24px; text-align: left; }
.tdw3d-insp-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.tdw3d-insp-name { font-size: 24px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; line-height: 1.05; color: var(--light); }
.tdw3d-insp-close { flex: none; width: 32px; height: 32px; display: grid; place-items: center; background: transparent; border: 1px solid var(--line); color: var(--muted); cursor: pointer; }
.tdw3d-insp-close:hover { color: var(--danger); border-color: var(--danger); }
.tdw3d-insp-meta { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0; }
.tdw3d-insp-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--line); padding: 4px 8px; }
.tdw3d-insp-col { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.tdw3d-insp-hp { display: flex; align-items: baseline; gap: 8px; margin: 6px 0 12px; }
.tdw3d-insp-hp-label { font-size: 11px; letter-spacing: .2em; color: var(--muted); font-weight: 700; }
.tdw3d-insp-hp-num { font-size: 30px; font-weight: 700; color: var(--light); font-variant-numeric: tabular-nums; }
.tdw3d-insp-evo { font-size: 11px; color: var(--muted); margin-bottom: 10px; font-style: italic; }
.tdw3d-insp-ability { border: 1px solid var(--gold); border-left-width: 3px; padding: 9px 12px; margin: 10px 0; background: rgba(255,200,87,.06); }
.tdw3d-insp-ab-name { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--gold); }
.tdw3d-insp-ab-name .tdw3d-ico { font-size: 16px; }
.tdw3d-insp-ab-text { font-size: 13px; color: var(--light); margin-top: 4px; line-height: 1.4; }
.tdw3d-insp-atk { border-top: 1px solid var(--line); padding: 11px 0; }
.tdw3d-insp-atk-top { display: flex; align-items: center; gap: 10px; }
.tdw3d-insp-atk-cost { font-size: 17px; letter-spacing: 2px; min-width: 46px; }
.tdw3d-insp-atk-name { flex: 1; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; font-size: 14px; }
.tdw3d-insp-atk-dmg { font-size: 22px; font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; }
.tdw3d-insp-atk-fx { font-size: 12px; color: var(--muted); margin-top: 4px; line-height: 1.4; }
.tdw3d-insp-free { font-size: 11px; color: var(--muted); letter-spacing: .04em; }
.tdw3d-insp-tool { font-size: 13px; color: var(--light); line-height: 1.45; margin-top: 8px; border-top: 1px solid var(--line); padding-top: 11px; }

/* ── Settings panel rows ── */
.tdw3d-settings { display: flex; flex-direction: column; gap: 4px; text-align: left; margin-top: 6px; }
.tdw3d-set-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 13px 2px; border-bottom: 1px solid var(--line); }
.tdw3d-set-label { font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--light); }
.tdw3d-set-toggle { min-width: 62px; padding: 8px 0; background: rgba(255,255,255,.04); border: 1px solid var(--line); color: var(--muted); font-family: inherit; font-weight: 700; font-size: 12px; letter-spacing: .12em; cursor: pointer; transition: .15s; }
.tdw3d-set-toggle.on { background: rgba(52,217,195,.16); border-color: var(--accent); color: var(--accent); }
.tdw3d-set-range { width: 180px; max-width: 50vw; accent-color: var(--accent); cursor: pointer; }

/* ── Help / how-to-play ── */
.tdw3d-help { text-align: left; margin-top: 4px; }
.tdw3d-help-sec { padding: 12px 0; border-bottom: 1px solid var(--line); }
.tdw3d-help-sec:last-child { border-bottom: 0; }
.tdw3d-help-sec h3 { margin: 0 0 5px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); font-weight: 700; }
.tdw3d-help-sec p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--light); }
.tdw3d-help-keys { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.tdw3d-help-keys li { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--light); }
.tdw3d-help-keys .tdw3d-ico { color: var(--accent); font-size: 20px; flex: none; }

/* ── Game-over match summary ── */
.tdw3d-go-stats { display: flex; justify-content: center; gap: 14px; margin: 18px 0 6px; }
.tdw3d-go-stat { flex: 1; max-width: 130px; border: 1px solid var(--line); padding: 12px 8px; display: flex; flex-direction: column; gap: 4px; }
.tdw3d-go-statn { font-size: 26px; font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; }
.tdw3d-go-statl { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.tdw3d-go-mood { font-size: 12px; color: var(--muted); margin: 4px 0 0; text-transform: capitalize; }

/* ── First-run controls hint ── */
.tdw3d-hint { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: min(420px, 92vw); background: rgba(0,17,26,.97); border: 1px solid var(--accent); box-shadow: var(--glow); padding: 22px 24px; z-index: 30; animation: tdwpop .25s cubic-bezier(.2,.9,.3,1.2); }
.tdw3d-hint-title { font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; color: var(--accent); margin-bottom: 14px; }
.tdw3d-hint-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.tdw3d-hint-list li { display: flex; align-items: center; gap: 11px; font-size: 13px; color: var(--light); }
.tdw3d-hint-list .tdw3d-ico { color: var(--accent); font-size: 22px; flex: none; }
.tdw3d-hint-ok { margin-top: 18px; width: 100%; padding: 12px; background: var(--accent); color: var(--bg); border: 0; font-family: inherit; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; font-size: 13px; cursor: pointer; }
.tdw3d-hint-ok:hover { box-shadow: 0 0 22px rgba(52,217,195,.5); }

@media (max-width: 640px) {
  .tdw3d-title { font-size: 32px; }
  #tdw3d-logwrap { width: 200px; }
  .tdw3d-hud-bar { font-size: 11px; }
  #tdw3d-actions { bottom: 12px; }
  .tdw3d-act { padding: 12px 16px; font-size: 12px; }
  /* Inspector stacks (art on top) on narrow screens */
  .tdw3d-inspect { grid-template-columns: 1fr; max-width: 94vw; }
  .tdw3d-insp-art { min-height: 190px; border-right: 0; border-bottom: 1px solid var(--line); }
  .tdw3d-insp-name { font-size: 20px; }
}