/* ============================================================
   Find the Nerd - site.css  v2
   Palette:
     bg:         #07111f
     panel:      #10243a
     panel-lt:   #163653
     navy:       #0D1B2A
     blue:       #1E3A5F
     cyan:       #3AD1FF  (decorative only; gameplay relies on shape)
     orange:     #FF9A1F  (decorative only)
     cream:      #F2F4F7
     gray:       #647070
     purple:     #7b61ff
     green:      #7bd88f
     danger:     #ff4d6d
   ============================================================ */

/* ---- Reset & base ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:        #07111f;
  --panel:     #10243a;
  --panel-lt:  #163653;
  --navy:      #0D1B2A;
  --blue:      #1E3A5F;
  --cyan:      #3AD1FF;
  --orange:    #FF9A1F;
  --cream:     #F2F4F7;
  --gray:      #647070;
  --purple:    #7b61ff;
  --green:     #7bd88f;
  --danger:    #ff4d6d;
  --cell-gap:  3px;
  --radius:    8px;
  --cell-size: 60px;   /* fixed cell size; boards extend beyond viewport */
}

html {
  color-scheme: dark;
  font-size: 16px;
  overscroll-behavior: none;
}

body {
  background: var(--bg);
  color: var(--cream);
  font-family: system-ui, -apple-system, sans-serif;
  min-height: 100dvh;
  overflow-x: hidden;
  overscroll-behavior: none;
}

/* ---- Screens ---- */
.screen {
  display: none;
  min-height: 100dvh;
  width: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 1.5rem 1rem 2rem;
  animation: fadeIn 0.25s ease;
}
.screen.active { display: flex; }

@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---- Title screen ---- */
.title-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 1rem;
}

.title-logo-wrap {
  width: min(480px, 92vw);
  margin-bottom: 0.75rem;
}

.title-artwork {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 0 20px rgba(58,209,255,0.20)) drop-shadow(0 8px 18px rgba(0,0,0,0.45));
}

/* Visually hidden but available to assistive tech */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.game-title {
  font-size: clamp(2rem, 6vw, 3.2rem);
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--cream);
  text-shadow: 0 0 24px var(--cyan), 0 2px 4px #000;
  line-height: 1.1;
}

.game-subtitle {
  font-size: 1rem;
  color: var(--cyan);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
}

.game-tagline {
  font-size: 0.9rem;
  color: var(--gray);
  font-style: italic;
  text-align: center;
}

.title-desc {
  max-width: 480px;
  text-align: center;
  color: var(--gray);
  font-size: 0.9rem;
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

.title-actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 1rem;
}

.title-best {
  font-size: 0.85rem;
  color: var(--orange);
  min-height: 1.2em;
  margin-bottom: 0.5rem;
}

.sound-toggle-wrap {
  margin-bottom: 1rem;
}

.game-footer {
  margin-top: auto;
  padding-top: 2rem;
  font-size: 0.75rem;
  color: #3a4f60;
  text-align: center;
}

.game-brand {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.4rem 0.6rem;
  margin-top: 0.6rem;
  font-size: 0.7rem;
  color: #8397a8;
  line-height: 1.5;
}

.game-brand a {
  color: var(--cyan);
  text-decoration: none;
  font-weight: 600;
  border-bottom: 1px solid transparent;
  transition: border-bottom-color 0.2s, color 0.2s;
  outline-offset: 2px;
}

.game-brand a:hover {
  color: #7de3ff;
  border-bottom-color: var(--cyan);
}

.game-brand a:focus-visible {
  outline: 2px solid var(--cyan);
  border-radius: 2px;
}

.brand-sep {
  color: #8397a8;
  user-select: none;
}

.game-brand-final {
  margin-top: 1rem;
  padding-top: 0.8rem;
  border-top: 1px solid #1a3450;
}

/* ---- Buttons ---- */
.btn {
  font-family: inherit;
  font-weight: 700;
  font-size: 0.95rem;
  padding: 0.65rem 1.4rem;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  transition: transform 0.1s, box-shadow 0.1s, opacity 0.15s;
  outline-offset: 3px;
}
.btn:focus-visible { outline: 2px solid var(--cyan); }
.btn:active { transform: scale(0.96); }
.btn:disabled { opacity: 0.4; cursor: default; transform: none; }

.btn-primary {
  background: var(--cyan);
  color: var(--navy);
  box-shadow: 0 0 16px rgba(58,209,255,0.35);
}
.btn-primary:hover:not(:disabled) { box-shadow: 0 0 24px rgba(58,209,255,0.55); }

.btn-secondary {
  background: var(--panel-lt);
  color: var(--cream);
  border: 1px solid var(--blue);
}
.btn-secondary:hover:not(:disabled) { background: var(--blue); }

.btn-hint {
  background: var(--orange);
  color: var(--navy);
  font-size: 0.85rem;
  padding: 0.5rem 1rem;
}
.btn-hint:hover:not(:disabled) { box-shadow: 0 0 14px rgba(255,154,31,0.5); }

.btn-icon {
  background: var(--panel);
  color: var(--cream);
  border: 1px solid var(--blue);
  font-size: 0.8rem;
  padding: 0.5rem 0.8rem;
}
.btn-icon:hover:not(:disabled) { background: var(--panel-lt); }

.btn-restart {
  background: transparent;
  color: var(--gray);
  border: 1px solid #2a3f55;
  font-size: 0.8rem;
  padding: 0.5rem 0.9rem;
}
.btn-restart:hover:not(:disabled) { color: var(--cream); border-color: var(--gray); }

/* ---- Zoom / view controls ---- */
.view-controls {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin-left: auto;
}

.btn-view {
  background: var(--panel-lt);
  color: var(--cream);
  border: 1px solid var(--blue);
  font-size: 1rem;
  font-weight: 900;
  padding: 0.3rem 0.65rem;
  line-height: 1;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.1s;
}
.btn-view:hover { background: var(--blue); }
.btn-view:active { transform: scale(0.93); }
.btn-reset-view { font-size: 0.85rem; padding: 0.3rem 0.55rem; }

.zoom-label {
  font-size: 0.72rem;
  color: var(--gray);
  min-width: 3.2ch;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* ---- Panel box ---- */
.panel-box {
  background: var(--panel);
  border: 1px solid var(--blue);
  border-radius: 12px;
  padding: 2rem 1.5rem;
  max-width: 580px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  box-shadow: 0 4px 32px rgba(0,0,0,0.5);
}

/* ---- How to play ---- */
.how-panel h2 { color: var(--cyan); font-size: 1.4rem; }

.how-list {
  list-style: none;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--cream);
}
.how-list li { display: flex; align-items: flex-start; gap: 0.5rem; }
.how-icon { font-size: 1rem; min-width: 1.4rem; }

.how-nerd-guide {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  background: var(--panel-lt);
  border-radius: 10px;
  padding: 1rem;
  width: 100%;
}

.how-signals {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  font-size: 0.8rem;
  color: var(--gray);
}

.how-signals-title {
  font-size: 0.75rem;
  color: var(--cream);
  font-weight: 700;
  margin-bottom: 0.2rem;
}

.signal-item { display: flex; align-items: center; gap: 0.5rem; }

/* Shape indicators - non-color, pattern/shape only */
.sig-shape {
  width: 20px;
  height: 14px;
  display: inline-block;
  flex-shrink: 0;
  border-radius: 2px;
}
.sig-shape.glasses {
  /* Two oval frames joined */
  background: none;
  border: 2px solid var(--cream);
  position: relative;
  width: 22px;
  height: 10px;
  border-radius: 3px;
  outline: 2px solid transparent;
  box-shadow: 7px 0 0 0 var(--cream);
}
.sig-shape.hair {
  /* Wavy/bumpy top */
  background: #111;
  clip-path: polygon(0% 100%, 10% 40%, 25% 70%, 40% 20%, 55% 60%, 70% 10%, 85% 50%, 100% 30%, 100% 100%);
}
.sig-shape.antenna {
  /* Vertical rod with dot top */
  background: none;
  border-left: 2px solid var(--cream);
  width: 2px;
  height: 14px;
  margin-right: 4px;
  position: relative;
}
.sig-shape.antenna::after {
  content: '';
  position: absolute;
  top: -4px;
  left: -4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cream);
}
.sig-shape.tablet {
  /* Rectangle with horizontal lines */
  background: var(--panel);
  border: 1.5px solid var(--cream);
  width: 20px;
  height: 14px;
  background-image: repeating-linear-gradient(
    to bottom, transparent 0px, transparent 3px, var(--cream) 3px, var(--cream) 4px
  );
  background-size: 100% 8px;
  background-position: 0 5px;
  opacity: 0.8;
}
.sig-shape.robot {
  /* Small square with two eyes */
  background: var(--panel-lt);
  border: 1.5px solid var(--cream);
  width: 14px;
  height: 14px;
  border-radius: 3px;
  box-shadow: inset 3px 3px 0 0 var(--cream), inset 8px 3px 0 0 var(--cream);
}
.sig-shape.hoodie {
  /* Dark rectangle with top stripe */
  background: #0f1d30;
  border: 1.5px solid var(--blue);
  width: 18px;
  height: 14px;
  border-radius: 3px;
  background-image: linear-gradient(to bottom, var(--orange) 0px, var(--orange) 3px, transparent 3px);
}

.how-note {
  font-size: 0.82rem;
  color: var(--orange);
  text-align: center;
  background: rgba(255,154,31,0.08);
  border: 1px solid rgba(255,154,31,0.3);
  border-radius: 6px;
  padding: 0.5rem 0.8rem;
  width: 100%;
}

/* ---- HUD ---- */
#screen-game {
  padding: 0;
  gap: 0;
}

.game-hud {
  width: 100%;
  background: var(--navy);
  border-bottom: 2px solid var(--blue);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0.5rem 1rem;
  gap: 0.5rem;
}

.hud-left { display: flex; flex-direction: column; }
.hud-level { font-size: 0.7rem; color: var(--cyan); letter-spacing: 0.1em; text-transform: uppercase; }
.hud-title { font-size: 0.85rem; font-weight: 700; color: var(--cream); }

.hud-center { display: flex; flex-direction: column; align-items: center; }
.hud-timer-label { font-size: 0.6rem; color: var(--gray); letter-spacing: 0.1em; text-transform: uppercase; }
.hud-timer {
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  font-weight: 900;
  color: var(--cream);
  min-width: 2.5ch;
  text-align: center;
  transition: color 0.3s;
  font-variant-numeric: tabular-nums;
}
.hud-timer.warn   { color: var(--orange); }
.hud-timer.danger { color: var(--danger); animation: timerPulse 0.4s infinite alternate; }
@keyframes timerPulse { from { opacity: 1; } to { opacity: 0.6; } }

.hud-right { display: flex; flex-direction: column; align-items: flex-end; }
.hud-score-label { font-size: 0.6rem; color: var(--gray); letter-spacing: 0.1em; text-transform: uppercase; }
.hud-score { font-size: 1.1rem; font-weight: 700; color: var(--orange); }
.hud-noise { font-size: 0.7rem; color: var(--gray); }

/* ---- Game controls bar ---- */
.game-controls {
  width: 100%;
  background: var(--panel);
  border-bottom: 1px solid #1a3450;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 1rem;
  flex-wrap: wrap;
}
.game-controls .btn-hint,
.game-controls .btn-icon,
.game-controls .btn-restart { font-size: 0.78rem; padding: 0.4rem 0.75rem; }

/* ---- Board instruction strip ---- */
.board-instruction {
  width: 100%;
  text-align: center;
  font-size: 0.78rem;
  color: var(--gray);
  padding: 0.3rem 1rem;
  background: #091624;
  border-bottom: 1px solid #0f2035;
  font-style: italic;
}

/* ---- Board area ---- */
.board-area {
  width: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  overflow: hidden;   /* clipping - pan layer moves inside */
  position: relative;
}

/* ---- Viewport / pan layer ---- */
.board-viewport {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
  flex: 1;
  /* Allow the viewport to fill available height */
  min-height: 0;
  cursor: grab;
  touch-action: none;
  overscroll-behavior: contain;
  user-select: none;
  -webkit-user-select: none;
}
.board-viewport.is-panning { cursor: grabbing; }

.board-pan-layer {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 0 0;
  /* transform is set inline by JS: translate(x,y) scale(zoom) */
  will-change: transform;
  padding: 12px;   /* breathing room around grid */
  touch-action: none;
}

/* ---- Grid board ---- */
.grid-board {
  display: grid;
  gap: var(--cell-gap);
  /* columns and width set inline by JS */
}

.grid-cell {
  width:  var(--cell-size);
  height: var(--cell-size);
  background: var(--panel);
  border: 1px solid var(--blue);
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.12s;
  overflow: hidden;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
  position: relative;
  flex-shrink: 0;
}

.grid-cell:hover  { background: var(--panel-lt); }
.grid-cell:active { transform: scale(0.93); }
.grid-cell:focus-visible { outline: 2px solid var(--cream); }

.grid-cell.hint-glow {
  animation: hintGlow 1.8s ease-out forwards;
  box-shadow: 0 0 0 3px var(--cream) inset;
}

@keyframes hintGlow {
  0%   { box-shadow: 0 0 0 3px var(--cream) inset, 0 0 20px rgba(255,255,255,0.5); }
  70%  { box-shadow: 0 0 0 3px var(--cream) inset, 0 0 20px rgba(255,255,255,0.5); }
  100% { box-shadow: none; }
}

.grid-cell.wrong-flash {
  animation: wrongFlash 0.35s ease;
}
@keyframes wrongFlash {
  0%   { background: var(--danger); }
  100% { background: var(--panel); }
}

/* ---- Multi-grid (Level 5) ---- */
.multi-grid-wrap {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: flex-start;
  padding: 0 12px;
}

.multi-grid-tabs {
  display: flex;
  gap: 0.5rem;
  padding: 0 0 0 12px;
}

.tab-btn {
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  padding: 0.45rem 1.2rem;
  border-radius: 6px 6px 0 0;
  border: 1px solid var(--blue);
  border-bottom: none;
  background: var(--panel);
  color: var(--gray);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.tab-btn.active {
  background: var(--panel-lt);
  color: var(--cyan);
  border-color: var(--cyan);
}
.tab-btn:focus-visible { outline: 2px solid var(--cyan); }

.multi-panel {
  display: none;
}
.multi-panel.active { display: block; }

.multi-panel-label {
  font-size: 0.75rem;
  color: var(--cyan);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 0.4rem;
  text-align: center;
}

/* V6: Tabs-always - no desktop side-by-side. One panel visible at a time on all screen sizes. */
/* (The previous desktop @media override has been intentionally removed.) */

/* ---- Cell content: decoys ---- */
.decoy-icon {
  width: 78%;
  height: 78%;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

/* ---- SVG character pieces ---- */
.char-wrap {
  width: 80%;
  height: 80%;
  position: relative;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---- Feedback message ---- */
.feedback-msg {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--danger);
  color: #fff;
  font-weight: 700;
  font-size: 0.85rem;
  padding: 0.4rem 1.1rem;
  border-radius: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
  white-space: nowrap;
  z-index: 100;
  max-width: 90vw;
  text-align: center;
}
.feedback-msg.show { opacity: 1; }
.feedback-msg.success-msg { background: var(--green); color: var(--navy); }

/* ---- Level result ---- */
.result-panel { gap: 0.8rem; }
.result-icon { font-size: 2.5rem; }
.result-panel h2 { color: var(--cyan); font-size: 1.4rem; }
#result-sub { color: var(--gray); font-size: 0.9rem; text-align: center; }

.result-stats {
  background: var(--panel-lt);
  border-radius: 8px;
  padding: 0.8rem 1.2rem;
  width: 100%;
  font-size: 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.stat-row { display: flex; justify-content: space-between; align-items: center; }
.stat-label { color: var(--gray); }
.stat-value { font-weight: 700; color: var(--cream); }
.stat-value.good  { color: var(--green); }
.stat-value.warn  { color: var(--orange); }
.stat-value.bad   { color: var(--danger); }
.stat-value.score { color: var(--cyan); font-size: 1.1rem; }

/* ---- Final screen ---- */
.final-panel { gap: 1rem; max-width: 480px; padding-top: 2.5rem; }
.final-heading { color: var(--cyan); font-size: 1.6rem; text-align: center; }
.final-sub { color: var(--cream); font-size: 0.9rem; text-align: center; opacity: 0.85; }

/* Final screen is always centered - not shifted */
#screen-final { align-items: center; }

.final-scores {
  background: var(--panel-lt);
  border-radius: 8px;
  padding: 0.8rem 1.2rem;
  width: 100%;
  font-size: 0.88rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.final-best {
  font-size: 1rem;
  font-weight: 700;
  color: var(--orange);
  text-align: center;
}

.final-nerd {
  width: 150px;
  height: 170px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  margin: 0 auto 0.2rem;
}

.final-roadmap {
  margin-top: 0.5rem;
  border-top: 1px solid #1a3450;
  padding-top: 0.8rem;
  text-align: center;
  width: 100%;
}
.roadmap-label { font-size: 0.7rem; color: var(--gray); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 0.25rem; }
.roadmap-text  { font-size: 0.75rem; color: #3a5570; line-height: 1.5; }

/* V6 score detail rows in final screen */
.final-level-section {
  border-bottom: 1px solid #1a3450;
  padding-bottom: 0.4rem;
  margin-bottom: 0.25rem;
}
.final-level-section:last-of-type { border-bottom: none; }
.final-level-title {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--cream);
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.15rem;
}
.final-level-title .lv-result {
  font-size: 0.7rem;
  font-weight: 400;
  color: var(--gray);
  margin-left: 0.5rem;
}
.final-level-title .lv-result.fail { color: var(--danger); }
.final-level-detail {
  font-size: 0.75rem;
  color: var(--gray);
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 0.6rem;
  padding-left: 0.5rem;
}
.detail-item { white-space: nowrap; }
.detail-item.positive { color: var(--green); }
.detail-item.negative { color: var(--orange); }
.detail-item.bad { color: var(--danger); }

/* Continue button */
.btn-continue {
  background: var(--purple);
  color: var(--cream);
  box-shadow: 0 0 12px rgba(123,97,255,0.4);
}
.btn-continue:hover:not(:disabled) { box-shadow: 0 0 20px rgba(123,97,255,0.6); }

/* ---- Responsive ---- */
@media (max-width: 480px) {
  .game-hud { padding: 0.4rem 0.6rem; }
  .hud-title { font-size: 0.75rem; }
  .game-controls { flex-wrap: wrap; gap: 0.35rem; padding: 0.35rem 0.6rem; }
  :root {
    --cell-gap: 2px;
    --cell-size: 54px;
  }
  .view-controls { margin-left: 0; }
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}


/* ============================================================
   V4 mobile-safe low-res pixel sprites
   Replaces SVG-heavy decoys with CSS/HTML block sprites to avoid
   iPhone blank-tile repaint/compositing failures.
   ============================================================ */
.pixel-sprite {
  --skin: #c49a7a;
  --hair: #101217;
  --suit: #17243a;
  --accent: #ff9a1f;
  --glass: #0b0e14;
  --glow: #d7f4ff;
  position: relative;
  display: block;
  width: 36px;
  height: 40px;
  margin: 1px auto 0;
  image-rendering: pixelated;
  contain: layout paint style;
  transform: translateZ(0);
  color: var(--cream);
}
.pixel-sprite i, .pixel-sprite b, .pixel-sprite em {
  position: absolute;
  display: block;
  box-sizing: border-box;
  pointer-events: none;
}
.pixel-sprite .px-head {
  left: 9px; top: 5px; width: 18px; height: 16px;
  background: var(--skin); border: 2px solid #3a2418; border-radius: 7px 7px 6px 6px;
  z-index: 5;
}
.pixel-sprite .px-hair { left: -2px; top: -5px; width: 22px; height: 9px; background: var(--hair); border-radius: 7px 7px 3px 3px; }
.pixel-sprite .px-hair::before { content: ''; position:absolute; left:2px; top:4px; width:5px; height:5px; background:var(--hair); box-shadow: 6px -3px 0 var(--hair), 12px 0 0 var(--hair), 17px 2px 0 var(--hair); }
.pixel-sprite .px-helmet { left:-1px; top:-4px; width:20px; height:12px; background:#1a2a40; border-radius:9px 9px 4px 4px; border:1px solid #334; }
.pixel-sprite .px-cap { left:0; top:-3px; width:18px; height:7px; background:#2a1a0a; border-radius:5px 5px 2px 2px; }
.pixel-sprite .px-robot-top { left:2px; top:-3px; width:14px; height:5px; background:#45505e; border-radius:3px; }
.pixel-sprite .px-eyes { left:4px; top:7px; width:3px; height:3px; background:#101010; box-shadow: 8px 0 0 #101010; }
.pixel-sprite .px-glasses { left:1px; top:5px; width:7px; height:6px; border:2px solid var(--glass); border-radius:2px; box-shadow: 9px 0 0 -1px transparent, 10px 0 0 0 var(--glass), 10px 0 0 1px transparent; }
.pixel-sprite .px-glasses::after { content:''; position:absolute; left:6px; top:2px; width:4px; height:2px; background:var(--glass); }
.pixel-sprite .px-visor { left:2px; top:6px; width:14px; height:5px; background:#07111f; border:1px solid #6f8ea4; border-radius:2px; }
.pixel-sprite .px-roboeyes { left:4px; top:6px; width:4px; height:4px; background:var(--glow); box-shadow:7px 0 0 var(--glow); }
.pixel-sprite .px-mouth { left:7px; top:12px; width:5px; height:2px; border-bottom:2px solid #69452c; border-radius:0 0 5px 5px; }
.pixel-sprite .px-neck { left:15px; top:20px; width:6px; height:4px; background:var(--skin); z-index:3; }
.pixel-sprite .px-body { left:9px; top:23px; width:18px; height:11px; background:var(--suit); border:2px solid #0b1424; border-radius:4px 4px 3px 3px; z-index:4; }
.pixel-sprite .px-body b { left:1px; top:1px; width:14px; height:2px; background:rgba(255,154,31,.7); border-radius:2px; }
.pixel-sprite .px-arm { top:24px; width:5px; height:11px; background:var(--suit); border:1px solid #0b1424; border-radius:3px; z-index:3; }
.pixel-sprite .px-arm.left { left:4px; }
.pixel-sprite .px-arm.right { right:4px; }
.pixel-sprite .px-leg { top:33px; width:6px; height:5px; background:#111827; border-radius:2px; z-index:2; }
.pixel-sprite .px-leg.left { left:11px; }
.pixel-sprite .px-leg.right { left:20px; }
.pixel-sprite .px-shoe { top:37px; width:8px; height:3px; background:#101018; border-bottom:1px solid var(--accent); border-radius:2px; z-index:3; }
.pixel-sprite .px-shoe.left { left:9px; }
.pixel-sprite .px-shoe.right { left:20px; }
.pixel-sprite .px-backpack { display:none; left:25px; top:19px; width:8px; height:14px; background:#182b3b; border:1px solid #07111f; border-radius:3px; z-index:1; }
.pixel-sprite .px-backpack.show { display:block; }
.pixel-sprite .px-antenna { display:none; left:29px; top:6px; width:2px; height:14px; background:#647070; z-index:2; }
.pixel-sprite .px-antenna.show { display:block; }
.pixel-sprite .px-antenna::before { content:''; position:absolute; left:-2px; top:-4px; width:6px; height:6px; background:var(--accent); border-radius:50%; }
.pixel-sprite .px-bot { display:none; left:29px; top:5px; width:9px; height:8px; background:#1e3a50; border:1px solid #07111f; border-radius:3px; z-index:6; }
.pixel-sprite .px-bot.show { display:block; }
.pixel-sprite .px-bot b { left:2px; top:2px; width:2px; height:2px; background:var(--glow); box-shadow:3px 0 0 var(--glow); }
.pixel-sprite .px-bot::after { content:''; position:absolute; left:3px; top:9px; width:3px; height:3px; background:rgba(215,244,255,.45); border-radius:50%; }
.pixel-sprite.is-robot { --skin:#4d5968; --hair:#3f4b59; --suit:#26364a; --glass:#d7f4ff; }
.pixel-sprite.is-alien { --skin:#7bd88f; --hair:#275238; --suit:#21394a; }
.pixel-sprite.pose-run .px-arm.left { transform: rotate(-25deg); transform-origin: top center; }
.pixel-sprite.pose-run .px-arm.right { transform: rotate(25deg); transform-origin: top center; }
.pixel-sprite.pose-run .px-leg.left { transform: translateX(-2px) rotate(16deg); }
.pixel-sprite.pose-run .px-leg.right { transform: translateX(2px) rotate(-16deg); }
.pixel-sprite.pose-wave .px-arm.right { top:17px; height:12px; transform: rotate(-45deg); transform-origin: bottom center; }
.pixel-sprite.near-decoy .px-body { outline: 1px dashed rgba(242,244,247,.12); }
.pixel-nerd { --skin:#c49a7a; --hair:#0b0d12; --suit:#0d1b2a; --accent:#ff9a1f; --glass:#0a0a0a; --glow:#f2f4f7; }
.pixel-nerd.normal { width: 112px; height: 124px; transform: scale(2.8); transform-origin:center; margin: 70px auto; }
.pixel-nerd.small { width: 56px; height: 62px; transform: scale(1.4); transform-origin:center; margin: 18px auto; }
.pixel-nerd.tiny { width: 36px; height: 40px; }
.pixel-nerd .nerd-glasses { border-radius:3px; width:8px; height:7px; box-shadow: 10px 0 0 -1px transparent, 11px 0 0 0 var(--glass); }
.pixel-nerd .nerd-hair { border-radius:8px 8px 4px 4px; }
.pixel-nerd .nerd-jacket em { left:8px; top:3px; width:2px; height:7px; background:rgba(255,154,31,.8); border-radius:1px; }
.pixel-nerd.torso-only .px-leg,
.pixel-nerd.torso-only .px-shoe { display:none; }
.pixel-nerd.torso-only { height: 32px; margin-top: 6px; }
.grid-cell .pixel-sprite svg { display:none; }


/* V5 title visibility + mixed torso variants - preserved in V6 */
.pixel-sprite.torso-only .px-leg,
.pixel-sprite.torso-only .px-shoe {
  display: none;
}
.pixel-sprite.torso-only {
  height: 32px;
  margin-top: 6px;
}
.grid-cell[data-variant="torso"] .pixel-sprite {
  margin-top: 6px;
}

/* ============================================================
   V6 corrections:
   - Tabs-always for multi-panel levels (no desktop side-by-side)
   - Final screen centered, mascot not clipped
   - Improved Nerd pixel sprite: more prominent hair, glasses, backpack, robot
   - Continue button style
   - Score detail rows
   ============================================================ */

/* V6: Improved Nerd pixel sprite - messy hair with larger spiky clumps */
.pixel-nerd .nerd-hair {
  /* Larger base blob for the messy hair */
  left: -4px; top: -7px; width: 26px; height: 11px;
  background: var(--hair);
  border-radius: 9px 9px 3px 3px;
}
.pixel-nerd .nerd-hair::before {
  /* Multiple hair clumps: left spike, top center tuft, right spike, far right wisp */
  content: '';
  position: absolute;
  left: 0px; top: -3px;
  width: 6px; height: 7px;
  background: var(--hair);
  border-radius: 4px 4px 2px 2px;
  box-shadow:
    8px -5px 0 5px var(--hair),   /* top-center large tuft */
    16px -2px 0 4px var(--hair),  /* right tuft */
    22px 1px 0 3px var(--hair),   /* far right wisp */
    -2px 2px 0 3px var(--hair);   /* left side droop */
}

/* V6: Nerd glasses - larger, rectangular/angular, clearly angular tech frames */
.pixel-nerd .nerd-glasses {
  left: 0px; top: 5px;
  width: 9px; height: 7px;
  border: 2px solid var(--glass);
  border-radius: 2px;
  background: rgba(58,209,255,0.06);
  /* Right lens via box-shadow */
  box-shadow: 11px 0 0 0 var(--glass), 11px 0 0 -1px rgba(58,209,255,0.06);
}
.pixel-nerd .nerd-glasses::after {
  /* Bridge between lenses */
  content: '';
  position: absolute;
  left: 9px; top: 2px;
  width: 2px; height: 2px;
  background: var(--glass);
}

/* V6: Nerd backpack - more visible, slightly larger and warmer color */
.pixel-nerd .px-backpack {
  display: block !important;
  left: 26px; top: 18px;
  width: 9px; height: 15px;
  background: #1a3040;
  border: 1px solid var(--accent);
  border-radius: 3px;
}
.pixel-nerd .px-backpack::after {
  content: '';
  position: absolute;
  left: 2px; top: 3px;
  width: 5px; height: 2px;
  background: rgba(255,154,31,0.55);
  border-radius: 1px;
  box-shadow: 0 4px 0 rgba(255,154,31,0.35);
}

/* V6: Nerd antenna - always shown, slightly taller */
.pixel-nerd .px-antenna {
  display: block !important;
  left: 29px; top: 3px;
  width: 2px; height: 16px;
  background: #8a9aaa;
}
.pixel-nerd .px-antenna::before {
  content: '';
  position: absolute;
  left: -3px; top: -5px;
  width: 8px; height: 8px;
  background: var(--accent);
  border-radius: 50%;
}

/* V6: Robot companion (px-bot) - more prominent, clearly a little robot face */
.pixel-nerd .px-bot {
  display: block !important;
  left: 28px; top: 4px;
  width: 11px; height: 9px;
  background: #1e3a50;
  border: 1px solid #3ad1ff;
  border-radius: 3px;
}
.pixel-nerd .px-bot b {
  left: 2px; top: 2px;
  width: 3px; height: 3px;
  background: var(--glow);
  box-shadow: 4px 0 0 var(--glow);
}
.pixel-nerd .px-bot::after {
  content: '';
  position: absolute;
  left: 3px; top: 10px;
  width: 5px; height: 4px;
  background: rgba(58,209,255,0.35);
  border-radius: 50%;
}

/* V6: Nerd jacket - make the stripe bolder */
.pixel-nerd .nerd-jacket > b {
  left: 1px; top: 0px;
  width: 14px; height: 3px;
  background: var(--accent);
  opacity: 0.85;
  border-radius: 2px;
}
.pixel-nerd .nerd-jacket em {
  left: 7px; top: 3px;
  width: 2px; height: 7px;
  background: rgba(255,154,31,0.8);
  border-radius: 1px;
}

/* V6: Fix .pixel-nerd.normal scale/margin to avoid top clipping */
.pixel-nerd.normal {
  width: 36px;
  height: 40px;
  transform: scale(2.8);
  transform-origin: center center;
  margin: 68px auto 66px;
}
.pixel-nerd.small {
  width: 36px;
  height: 40px;
  transform: scale(1.4);
  transform-origin: center center;
  margin: 16px auto;
}
.pixel-nerd.tiny {
  width: 36px;
  height: 40px;
}

/* V6: Final nerd preview inside the final-nerd container */
.final-nerd .pixel-nerd.normal {
  margin: 20px auto 0;
  transform: scale(2.3);
  transform-origin: center center;
}


/* ============================================================
   V7 simplified Nerd sprite + clickable tab fixes
   Goals:
   - Same visual footprint as decoys; no oversized hair silhouette.
   - Simple 2-3 clump messy hair, not a giant spiky blob.
   - Clear small rectangular glasses, not thick square mask.
   - Hide floating robot companion in grid (tiny) size; keep for normal/final.
   - Reduce backpack/antenna clutter in tiny - keep a subtle hint only.
   - Tabs: position: relative + z-index + pointer-events: auto so they
     stay clickable above the pan/zoom viewport.
   ============================================================ */

/* V7: Tabs - sit above the pan layer so pointer events always reach them */
.multi-grid-tabs {
  position: relative;
  z-index: 10;
  pointer-events: auto;
}
.tab-btn {
  position: relative;
  z-index: 10;
  pointer-events: auto;
}

/* V7: Hair - revert oversized V6 blob to a compact 2-clump shape */
.pixel-nerd .nerd-hair {
  left: -1px; top: -5px;
  width: 20px; height: 8px;
  background: var(--hair);
  border-radius: 7px 7px 3px 3px;
}
.pixel-nerd .nerd-hair::before {
  content: '';
  position: absolute;
  left: 1px; top: -3px;
  width: 5px; height: 5px;
  background: var(--hair);
  border-radius: 3px 3px 2px 2px;
  /* Two clumps only - no giant multi-shadow blob */
  box-shadow: 9px -2px 0 4px var(--hair);
}

/* V7: Glasses - small clean rectangular frames, not thick oversized mask */
.pixel-nerd .nerd-glasses {
  left: 1px; top: 5px;
  width: 7px; height: 5px;
  border: 1px solid var(--glass);
  border-radius: 1px;
  background: rgba(58,209,255,0.05);
  box-shadow: 9px 0 0 0 var(--glass);
}
.pixel-nerd .nerd-glasses::after {
  content: '';
  position: absolute;
  left: 7px; top: 1px;
  width: 2px; height: 1px;
  background: var(--glass);
}

/* V7: Hide robot companion in tiny/grid size - too small to read cleanly */
.pixel-nerd.tiny .px-bot {
  display: none !important;
}

/* V7: Keep antenna in tiny but subtle - don't force it off */
/* V7: Keep backpack in tiny but don't force extra size */
/* (Backpack and antenna remain via V6 show rules; no additional overrides needed.) */

/* V7: Restore normal/final robot - keep it visible for title and final screen */
/* .pixel-nerd.normal .px-bot and .pixel-nerd.small .px-bot are already shown by V6. */