@charset "UTF-8";

/* ── Variables ─────────────────────────────────────────────────────────── */
:root {
  --bg:          #0a0a0f;
  --panel:       #12121a;
  --addition:    #00f5ff;
  --subtraction: #ff2d78;
  --multiply:    #39ff14;
  --division:    #ffb700;
  --neutral:     #9b8ec4;
  --font-display: 'Press Start 2P', monospace;
  --font-mono:    'Share Tech Mono', monospace;
  --font-body:    'VT323', monospace;
  --glow-sm: 0 0 8px;
  --glow-md: 0 0 16px;
}

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

body {
  background: var(--bg);
  color: #e0e0e0;
  font-family: var(--font-body);
  font-size: 18px;
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;
}

/* Scanline overlay */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent 2px,
    rgba(0,0,0,0.05) 2px,
    rgba(0,0,0,0.05) 4px
  );
  pointer-events: none;
  z-index: 9999;
}

/* ── Layout ────────────────────────────────────────────────────────────── */
#app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  max-width: 1400px;
  margin: 0 auto;
  padding: 16px;
  gap: 16px;
}

#main-area {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

#work-area {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

#repair-bay {
  flex: 1;
  min-width: 0;
}

/* ── Header ────────────────────────────────────────────────────────────── */
#header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--panel);
  border: 2px solid #2a2438;
  padding: 10px 16px;
}

.header__title {
  font-family: var(--font-display);
  font-size: 10px;
  color: var(--neutral);
}

.header__earnings {
  font-family: var(--font-mono);
  font-size: 36px;
  color: var(--division);
}

/* ── Status bar ────────────────────────────────────────────────────────── */
#status-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--panel);
  border: 2px solid #2a2438;
  padding: 5px 16px;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--neutral);
}

.status-sep { color: #333; }

#status-zone, #status-round {
  white-space: nowrap;
  font-family: var(--font-body);
  font-size: 20px;
  letter-spacing: 1px;
}

#status-goal-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
}

.status-goal-track {
  flex: 1;
  height: 5px;
  background: #1a1828;
  border: 1px solid #2a2438;
}

.status-goal-fill {
  height: 100%;
  width: 0;
  background: var(--multiply);
  transition: width 0.3s ease;
}

.status-goal-fill--done { background: var(--division); }

#status-goal-label {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--neutral);
  white-space: nowrap;
}

#status-run-balance {
  font-family: var(--font-mono);
  font-size: 18px;
  color: var(--division);
  white-space: nowrap;
  margin-left: auto;
}

/* ── Earnings flash animations ─────────────────────────────────────────── */
@keyframes flash-up {
  0%   { color: var(--multiply); text-shadow: 0 0 14px var(--multiply); transform: scale(1.18); }
  50%  { color: var(--multiply); text-shadow: 0 0 8px var(--multiply); }
  100% { color: inherit; text-shadow: none; transform: scale(1); }
}
@keyframes flash-down {
  0%   { color: var(--subtraction); text-shadow: 0 0 14px var(--subtraction); transform: scale(1.08); }
  50%  { color: var(--subtraction); text-shadow: 0 0 8px var(--subtraction); }
  100% { color: inherit; text-shadow: none; transform: scale(1); }
}
.flash-up   { animation: flash-up   0.7s ease-out forwards; }
.flash-down { animation: flash-down 0.6s ease-out forwards; }

/* ── Repair Bay ────────────────────────────────────────────────────────── */
.section-label {
  font-family: var(--font-body);
  font-size: 18px;
  color: var(--neutral);
  letter-spacing: 2px;
  margin-bottom: 4px;
}

.repair-bay-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.repair-bay-header .section-label {
  margin-bottom: 0;
}

#send-back-btn {
  font-family: var(--font-display);
  font-size: 9px;
  color: var(--neutral);
  background: transparent;
  border: 1px solid #2a2438;
  padding: 5px 10px;
  cursor: pointer;
  letter-spacing: 1px;
  white-space: nowrap;
}

#send-back-btn:hover {
  border-color: var(--neutral);
  color: #e0e0e0;
}

#repair-bay {
  background: var(--panel);
  border: 2px solid #2a2438;
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

#robot-display {
  display: flex;
  align-items: center;
  gap: 20px;
}

/* ── Part icon hardpoint socket ──────────────────────────────────────────
   Inward-pointing corner brackets: the part is clamped into this recess.
   Inset shadow gives depth — this is a cavity, not a frame.
   Color is deliberately dim/neutral so the icon's type color speaks.     */
.part-icon-frame {
  display: inline-block;
  padding: 6px;
  --c: #7a70a8;
  border: 1px solid #3a3858;
  /* gap=4  arm=8  thick=2
     Each corner: H-arm right/left edge at (W-4), V-arm right edge at (W-4)
     Arms share a 2×2 corner pixel so the L is clean.               */
  background:
    /* top-left     H */ linear-gradient(var(--c),var(--c)) 4px 4px                             /  8px 2px no-repeat,
    /* top-left     V */ linear-gradient(var(--c),var(--c)) 4px 4px                             /  2px 8px no-repeat,
    /* top-right    H */ linear-gradient(var(--c),var(--c)) calc(100% - 12px) 4px               /  8px 2px no-repeat,
    /* top-right    V */ linear-gradient(var(--c),var(--c)) calc(100% - 6px)  4px               /  2px 8px no-repeat,
    /* bottom-left  H */ linear-gradient(var(--c),var(--c)) 4px               calc(100% - 6px)  /  8px 2px no-repeat,
    /* bottom-left  V */ linear-gradient(var(--c),var(--c)) 4px               calc(100% - 12px) /  2px 8px no-repeat,
    /* bottom-right H */ linear-gradient(var(--c),var(--c)) calc(100% - 12px) calc(100% - 6px)  /  8px 2px no-repeat,
    /* bottom-right V */ linear-gradient(var(--c),var(--c)) calc(100% - 6px)  calc(100% - 12px) /  2px 8px no-repeat;
}

.part-icon-frame img {
  display: block;
}

.portrait-frame {
  display: inline-block;
  position: relative;
  padding: 14px 14px 18px 14px; /* extra bottom for hazard stripe */
  width: 200px;
  height: 200px;
  box-sizing: content-box;
  flex-shrink: 0;
  --c: var(--neutral);
  background:
    /* ── bolt holes: rings at all 4 corners ── */
    radial-gradient(circle, transparent 30%, var(--c) 30%, var(--c) 60%, transparent 60%)
      0    0    / 16px 16px no-repeat,
    radial-gradient(circle, transparent 30%, var(--c) 30%, var(--c) 60%, transparent 60%)
      100% 0    / 16px 16px no-repeat,
    radial-gradient(circle, transparent 30%, var(--c) 30%, var(--c) 60%, transparent 60%)
      0    100% / 16px 16px no-repeat,
    radial-gradient(circle, transparent 30%, var(--c) 30%, var(--c) 60%, transparent 60%)
      100% 100% / 16px 16px no-repeat,
    /* ── tick mark rulers: top + left + right edges ── */
    repeating-linear-gradient(90deg,  var(--c) 0, var(--c) 1px, transparent 1px, transparent 10px)
      top    / 100% 5px  no-repeat,
    repeating-linear-gradient(180deg, var(--c) 0, var(--c) 1px, transparent 1px, transparent 10px)
      left   / 5px  100% no-repeat,
    repeating-linear-gradient(180deg, var(--c) 0, var(--c) 1px, transparent 1px, transparent 10px)
      right  / 5px  100% no-repeat,
    /* ── hazard stripes: bottom edge ── */
    repeating-linear-gradient(-45deg,
      var(--c)        0,
      var(--c)        4px,
      transparent     4px,
      transparent     10px)
      bottom / 100% 6px  no-repeat;
}

#robot-portrait {
  width: 200px;
  height: 200px;
  object-fit: contain;
  display: block;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

#robot-portrait[hidden] { display: none; }

#robot-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#robot-name {
  font-family: var(--font-display);
  font-size: 13px;
  color: #e0e0e0;
}

#robot-value {
  font-family: var(--font-mono);
  font-size: 22px;
  color: var(--neutral);
}

#parts-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

/* ── Part / Drop Zone ──────────────────────────────────────────────────── */
.part-slot {
  background: var(--bg);
  border: 2px solid var(--neutral);
  padding: 16px 12px;
  width: 200px;
  min-height: 180px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  transition: border-color 0.15s, box-shadow 0.15s;
  position: relative;
}

.part-slot img {
  width: 48px;
  height: 48px;
  image-rendering: pixelated;
}

.part-slot__name {
  font-family: var(--font-body);
  font-size: 22px;
  text-align: center;
  color: #e0e0e0;
}

.part-slot__req {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.part-slot__type-label {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 1px;
}

.part-slot__chevrons {
  font-family: var(--font-body);
  font-size: 26px;
  line-height: 1;
  color: #fff;
}

/* Type-colored borders — no ambient glow, only glow on active drop */
.part-slot[data-type="addition"]       { border-color: var(--addition); }
.part-slot[data-type="subtraction"]    { border-color: var(--subtraction); }
.part-slot[data-type="multiplication"] { border-color: var(--multiply); }
.part-slot[data-type="division"]       { border-color: var(--division); }

.part-slot[data-type="addition"]       .part-slot__type-label { color: var(--addition); }
.part-slot[data-type="subtraction"]    .part-slot__type-label { color: var(--subtraction); }
.part-slot[data-type="multiplication"] .part-slot__type-label { color: var(--multiply); }
.part-slot[data-type="division"]       .part-slot__type-label { color: var(--division); }

.part-slot__drop-hint {
  font-family: var(--font-body);
  font-size: 16px;
  color: #444;
  margin-top: auto;
  letter-spacing: 1px;
}

.part-slot--repaired {
  border-color: #333 !important;
  box-shadow: none !important;
  opacity: 0.45;
}

.part-slot--repaired .part-slot__drop-hint { display: none; }

.part-slot--repaired::after {
  content: '✓ REPAIRED';
  position: absolute;
  font-family: var(--font-display);
  font-size: 9px;
  color: var(--multiply);
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
}

.drop-zone--active {
  border-color: #fff !important;
  box-shadow: 0 0 20px #fff !important;
}

.drop-zone--active .part-slot__drop-hint {
  color: #fff;
}

/* ── Bottom area: three panels ─────────────────────────────────────────── */
#bottom-area {
  display: flex;
  gap: 16px;
  align-items: stretch;
}

.side-pile-panel {
  background: var(--panel);
  border: 2px solid #2a2438;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex-shrink: 0;
  width: 160px;
}

#hand-panel {
  flex: 1;
  background: var(--panel);
  border: 2px solid #2a2438;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.card-pile {
  width: 120px;
  height: 180px;
  margin-top: 22px; /* match #hand padding-top so piles align with cards */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #0d0d14;
  border: 2px solid #2a2438;
  box-shadow: 4px 4px 0 #111120, 8px 8px 0 #0d0d18;
}

.card-pile__count {
  font-family: var(--font-mono);
  font-size: 36px;
  color: #3a3a50;
}

.card-pile--has-cards .card-pile__count {
  color: #c0c0d0;
}

.discard-drop-zone {
  cursor: default;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}

.discard-drop-zone.discard-zone--active {
  border-color: var(--subtraction);
  background: #1a0810;
  box-shadow: 4px 4px 0 #2a0d1a, 8px 8px 0 #1f0914, 0 0 14px #ff2d7844;
}

.discard-zone__cost {
  font-family: var(--font-mono);
  font-size: 16px;
  color: #2a1a20;
  transition: color 0.15s;
}

.discard-drop-zone.discard-zone--active .discard-zone__cost {
  color: var(--subtraction);
}

#hand {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  padding-top: 22px;
}

/* ── Cards ─────────────────────────────────────────────────────────────── */
.card {
  background: var(--panel);
  border: 2px solid var(--neutral);
  width: 130px;
  height: 180px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  position: relative;
  cursor: grab;
  user-select: none;
  transition: transform 0.1s, box-shadow 0.1s;
}

.card:hover { transform: translateY(-6px); }

.card--addition       { border-color: var(--addition);    box-shadow: var(--glow-sm) var(--addition); }
.card--subtraction    { border-color: var(--subtraction); box-shadow: var(--glow-sm) var(--subtraction); }
.card--multiplication { border-color: var(--multiply);    box-shadow: var(--glow-sm) var(--multiply); }
.card--division       { border-color: var(--division);    box-shadow: var(--glow-sm) var(--division); }

.card--dragging { opacity: 0.4; cursor: grabbing; }

.card--low-durability {
  opacity: 0.7;
  filter: contrast(0.8) brightness(0.7);
}
.card--low-durability::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 4px,
    rgba(255,0,0,0.06) 4px,
    rgba(255,0,0,0.06) 6px
  );
  pointer-events: none;
}

.card__type {
  font-family: var(--font-display);
  font-size: 8px;
  letter-spacing: 1px;
}

.card--addition       .card__type { color: var(--addition); }
.card--subtraction    .card__type { color: var(--subtraction); }
.card--multiplication .card__type { color: var(--multiply); }
.card--division       .card__type { color: var(--division); }

.card__chevrons {
  position: absolute;
  top: 8px;
  right: 10px;
  font-family: var(--font-body);
  font-size: 22px;
  color: #fff;
  line-height: 1;
}

.card__problem {
  font-family: var(--font-mono);
  font-size: 22px;
  text-align: center;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}


.card__pips {
  display: flex;
  gap: 5px;
  justify-content: flex-start;
  margin-top: auto;
}

.pip {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--neutral);
  box-shadow: 0 0 5px var(--neutral);
}

.pip--empty {
  background: transparent;
  border: 1px solid #444;
  box-shadow: none;
}

/* ── Modal ─────────────────────────────────────────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-overlay[hidden] { display: none; }

.modal-box {
  background: var(--panel);
  border: 2px solid var(--neutral);
  padding: 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  min-width: 320px;
}

.modal-box[data-type="addition"]       { border-color: var(--addition);    box-shadow: var(--glow-md) var(--addition); }
.modal-box[data-type="subtraction"]    { border-color: var(--subtraction); box-shadow: var(--glow-md) var(--subtraction); }
.modal-box[data-type="multiplication"] { border-color: var(--multiply);    box-shadow: var(--glow-md) var(--multiply); }
.modal-box[data-type="division"]       { border-color: var(--division);    box-shadow: var(--glow-md) var(--division); }

#modal-context {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--neutral);
  text-align: center;
}

#modal-problem {
  font-family: var(--font-mono);
  font-size: 42px;
  color: #fff;
  text-align: center;
  letter-spacing: 2px;
}

#answer-form {
  display: flex;
  gap: 10px;
  align-items: center;
}

#answer-input {
  background: var(--bg);
  border: 2px solid var(--neutral);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 28px;
  width: 120px;
  padding: 6px 10px;
  text-align: center;
  outline: none;
}

#answer-input:focus { border-color: #fff; }

/* Hide browser spinner arrows on number input */
#answer-input::-webkit-outer-spin-button,
#answer-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
#answer-input[type=number] { -moz-appearance: textfield; }

#answer-form button {
  background: var(--neutral);
  border: none;
  color: var(--bg);
  font-family: var(--font-display);
  font-size: 10px;
  padding: 10px 14px;
  cursor: pointer;
}

#answer-form button:hover { filter: brightness(1.2); }

#modal-feedback {
  font-family: var(--font-body);
  font-size: 18px;
  color: var(--subtraction);
  min-height: 24px;
  text-align: center;
}

#modal-cancel {
  background: transparent;
  border: 1px solid #444;
  color: #666;
  font-family: var(--font-body);
  font-size: 16px;
  padding: 4px 12px;
  cursor: pointer;
}

#modal-cancel:hover { color: #aaa; border-color: #aaa; }

/* ── Payout popup ──────────────────────────────────────────────────────── */
.payout-title {
  font-family: var(--font-display);
  font-size: 10px;
  color: var(--multiply);
}

#payout-breakdown {
  font-family: var(--font-mono);
  font-size: 18px;
  color: #e0e0e0;
  text-align: right;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 220px;
}

.payout-line {
  display: flex;
  justify-content: space-between;
  gap: 24px;
}

.payout-line--total {
  border-top: 1px solid var(--neutral);
  padding-top: 6px;
  color: var(--multiply);
  font-size: 22px;
}

#payout-close {
  background: var(--multiply);
  border: none;
  color: var(--bg);
  font-family: var(--font-display);
  font-size: 10px;
  padding: 10px 16px;
  cursor: pointer;
}

#payout-close:hover { filter: brightness(1.2); }

/* ── Round timer ───────────────────────────────────────────────────────── */
.header__timer {
  font-family: var(--font-mono);
  font-size: 28px;
  color: var(--neutral);
}

@keyframes pulse-red {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.35; }
}

.round-timer--urgent {
  color: var(--subtraction) !important;
  animation: pulse-red 0.8s ease-in-out infinite;
}

/* ── Multiplier decay bar ──────────────────────────────────────────────── */
#multiplier-bar {
  display: flex;
  align-items: center;
  gap: 8px;
}

#multiplier-bar[hidden] { display: none; }

.multiplier-track {
  width: 120px;
  height: 6px;
  background: #1a1828;
  border: 1px solid #2a2438;
}

.multiplier-fill {
  height: 100%;
  transition: width 0.3s linear, background-color 0.5s ease;
}

.multiplier-fill--high { background: var(--multiply); }
.multiplier-fill--mid  { background: var(--division); }
.multiplier-fill--low  { background: var(--subtraction); }

.multiplier-label {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--neutral);
  min-width: 40px;
}

/* ── Intake queue ──────────────────────────────────────────────────────── */
#intake-queue {
  background: var(--panel);
  border: 2px solid #2a2438;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: border-color 0.3s;
  width: 290px;
  flex-shrink: 0;
  overflow: visible;
}

.intake-queue--selecting {
  border-color: var(--neutral);
}

.intake-queue-hint {
  font-family: var(--font-display);
  font-size: 8px;
  color: var(--division);
  letter-spacing: 2px;
  animation: pulse-amber 1.2s ease-in-out infinite;
}

.intake-queue-hint[hidden] { display: block !important; visibility: hidden; }

@keyframes pulse-amber {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.3; }
}

#queue-cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 540px;
  flex-shrink: 0;
}

.queue-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--bg);
  border: 1px solid #2a2438;
  padding: 10px 12px;
  cursor: default;
  transition: border-color 0.15s, box-shadow 0.15s;
  width: 100%;
  height: 100px;
  flex-shrink: 0;
  box-sizing: border-box;
  position: relative;
}

.intake-queue--selecting #queue-cards .queue-card--kb-focus::before {
  content: '◀◀';
  position: absolute;
  right: -38px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
  color: var(--division);
  animation: pulse-amber 1.2s ease-in-out infinite;
  pointer-events: none;
}

.queue-card--selectable {
  cursor: pointer;
  border-color: var(--neutral);
  box-shadow: var(--glow-sm) var(--neutral);
}

.queue-card--selectable:hover {
  border-color: #fff;
  box-shadow: 0 0 16px var(--neutral);
}

.queue-portrait {
  width: 56px;
  height: 56px;
  object-fit: contain;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  flex-shrink: 0;
}

.queue-card__info {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1;
  min-width: 0;
}

.queue-card__name {
  font-family: var(--font-body);
  font-size: 16px;
  color: #e0e0e0;
  letter-spacing: 1px;
}

.queue-card__value {
  font-family: var(--font-mono);
  font-size: 17px;
  color: var(--neutral);
}

.queue-card__mult {
  color: var(--division);
}

.queue-card__parts {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.queue-req {
  font-family: var(--font-display);
  font-size: 8px;
  padding: 3px 6px;
  border: 1px solid;
  letter-spacing: 0.5px;
  flex-shrink: 0;
  white-space: nowrap;
}

.queue-req--addition       { color: var(--addition);    border-color: var(--addition); }
.queue-req--subtraction    { color: var(--subtraction); border-color: var(--subtraction); }
.queue-req--multiplication { color: var(--multiply);    border-color: var(--multiply); }
.queue-req--division       { color: var(--division);    border-color: var(--division); }
.queue-req--repaired       { color: #3a4a3a; border-color: #3a4a3a; }

/* ── Queue decay bar ────────────────────────────────────────────────────── */
.queue-decay-bar {
  margin-top: 4px;
}

.queue-decay-track {
  width: 100%;
  height: 4px;
  background: #1a1828;
  border: 1px solid #2a2438;
}

.queue-decay-fill {
  height: 100%;
  transition: width 0.5s linear;
}

.queue-decay-fill--high { background: var(--multiply); }
.queue-decay-fill--mid  { background: var(--division); }
.queue-decay-fill--low  { background: var(--subtraction); }

.queue-waiting {
  font-family: 'VT323', monospace;
  font-size: 16px;
  color: #4a4060;
  text-align: center;
  padding: 12px 0;
  letter-spacing: 0.05em;
}

/* ── Swap mode queue card ───────────────────────────────────────────────── */
.queue-card--swap-target {
  border-color: var(--division) !important;
  box-shadow: 0 0 14px rgba(255,183,0,0.5) !important;
}

.intake-queue--swap .intake-queue-hint {
  color: var(--division);
}

/* ── Zone progress bar ─────────────────────────────────────────────────── */
.zone-progress {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.zone-progress__header {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--neutral);
}

.zone-progress__track {
  width: 100%;
  height: 8px;
  background: #1a1828;
  border: 1px solid #2a2438;
}

.zone-progress__fill {
  height: 100%;
  width: 0;
  background: var(--multiply);
  transition: width 0.4s ease;
}

.zone-progress__fill--over { background: var(--division); }
.zone-progress__fill--fail { background: var(--subtraction); }

/* ── Inter-round screen ────────────────────────────────────────────────── */
.inter-round-stat {
  font-family: var(--font-mono);
  font-size: 18px;
  color: var(--neutral);
  text-align: center;
}

#inter-round-shop, #round-end-shop {
  background: transparent;
  border: 1px solid var(--neutral);
  color: var(--neutral);
  font-family: var(--font-display);
  font-size: 10px;
  padding: 8px 14px;
  cursor: pointer;
}

#inter-round-shop:hover, #round-end-shop:hover { background: rgba(155,142,196,0.08); }

#inter-round-reroll {
  background: transparent;
  border: 1px solid var(--division);
  color: var(--division);
  font-family: var(--font-display);
  font-size: 10px;
  padding: 8px 14px;
  cursor: pointer;
}

#inter-round-reroll:hover:not(:disabled) { background: rgba(255,183,0,0.08); }

#inter-round-reroll:disabled {
  opacity: 0.25;
  cursor: not-allowed;
}

.inter-round-hand {
  width: 100%;
  margin: 4px 0 2px;
}

.inter-round-hand__label {
  font-family: var(--font-display);
  font-size: 7px;
  color: var(--neutral);
  letter-spacing: 1px;
  text-align: center;
  margin-bottom: 8px;
  opacity: 0.6;
}

.inter-round-hand__cards {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  justify-content: center;
}

.inter-round-hand__card {
  font-family: var(--font-mono);
  font-size: 14px;
  color: #e0e0e0;
  border: 1px solid;
  padding: 4px 9px;
  background: #0a0a12;
}

.inter-round-goal-met {
  font-family: var(--font-display);
  font-size: 9px;
  color: var(--multiply);
  letter-spacing: 2px;
  text-align: center;
}

.inter-round-goal-met[hidden] { display: none; }

#inter-round-advance {
  background: var(--multiply);
  border: none;
  color: var(--bg);
  font-family: var(--font-display);
  font-size: 10px;
  padding: 10px 20px;
  cursor: pointer;
}

#inter-round-advance:hover  { filter: brightness(1.2); }
#inter-round-advance[hidden] { display: none; }

#inter-round-continue {
  background: transparent;
  border: 1px solid #444;
  color: #666;
  font-family: var(--font-display);
  font-size: 10px;
  padding: 10px 20px;
  cursor: pointer;
}

#inter-round-continue:hover { color: #aaa; border-color: #aaa; }

/* When goal not yet met, continue is the primary action */
#inter-round-continue.is-primary {
  background: var(--neutral);
  border: none;
  color: var(--bg);
}

#inter-round-continue.is-primary:hover { filter: brightness(1.2); }

/* ── Round-end screen ──────────────────────────────────────────────────── */
.round-end-box {
  min-width: 380px;
  gap: 20px;
}

.round-end-title {
  font-family: var(--font-display);
  font-size: 11px;
  color: var(--division);
  letter-spacing: 2px;
  text-align: center;
}

.round-end-title--clear { color: var(--multiply); }
.round-end-title--fail  { color: var(--subtraction); }
.round-end-title--win   { color: var(--division); }

.round-end-highscore {
  font-family: var(--font-body);
  font-size: 18px;
  color: #555;
  text-align: center;
}

.round-end-highscore[hidden]      { display: none; }
#round-end-zone-progress[hidden]  { display: none; }

.round-end-robots {
  font-family: var(--font-mono);
  font-size: 18px;
  color: #e0e0e0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  min-height: 28px;
}

.round-end-robot-row {
  display: flex;
  justify-content: space-between;
  gap: 24px;
}

.round-end-empty {
  color: #555;
  text-align: center;
  font-size: 16px;
}

.round-end-totals {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  border-top: 1px solid var(--neutral);
  padding-top: 10px;
  width: 100%;
  font-family: var(--font-mono);
  font-size: 22px;
  color: var(--multiply);
}

.round-end-deck {
  font-family: var(--font-body);
  font-size: 16px;
  color: #555;
  text-align: center;
}

#round-end-close {
  background: var(--neutral);
  border: none;
  color: var(--bg);
  font-family: var(--font-display);
  font-size: 10px;
  padding: 10px 20px;
  cursor: pointer;
}

#round-end-close:hover { filter: brightness(1.2); }

/* ── Keyboard navigation ───────────────────────────────────────────────── */
.card--kb-selected {
  transform: translateY(-18px) !important;
  z-index: 5;
}

.card--kb-selected.card--addition       { box-shadow: var(--glow-md) var(--addition); }
.card--kb-selected.card--subtraction    { box-shadow: var(--glow-md) var(--subtraction); }
.card--kb-selected.card--multiplication { box-shadow: var(--glow-md) var(--multiply); }
.card--kb-selected.card--division       { box-shadow: var(--glow-md) var(--division); }

.card--kb-held {
  transform: translateY(-18px) !important;
  z-index: 5;
  outline: 2px dashed rgba(255,255,255,0.5);
  outline-offset: 4px;
  animation: held-pulse 0.9s ease-in-out infinite;
}

@keyframes held-pulse {
  0%, 100% { outline-color: rgba(255,255,255,0.5); }
  50%       { outline-color: rgba(255,255,255,0.15); }
}

.part-slot--kb-valid {
  border-style: dashed !important;
  opacity: 0.8;
}

.part-slot--kb-targeted {
  border-color: #fff !important;
  border-style: solid !important;
  box-shadow: 0 0 20px rgba(255,255,255,0.6) !important;
  opacity: 1 !important;
}

.part-slot--kb-targeted .part-slot__drop-hint {
  color: #fff;
}

.queue-card--kb-focus {
  border-color: #fff !important;
  box-shadow: 0 0 14px rgba(155,142,196,0.5) !important;
}

/* ── Key legend ────────────────────────────────────────────────────────── */
#modal-key-legend {
  display: flex;
  gap: 24px;
  padding-top: 10px;
  border-top: 1px solid #2a2438;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 4px;
}

#key-legend {
  display: flex;
  gap: 24px;
  padding-top: 10px;
  border-top: 1px solid #1a1828;
  flex-wrap: wrap;
  min-height: 28px;
}

.key-hint {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-body);
  font-size: 16px;
  color: #555;
}

.key-hint__key {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--neutral);
  background: #0e0d17;
  border: 1px solid #2a2438;
  padding: 2px 7px;
  border-radius: 2px;
}

.key-hint__action {
  color: #4a4860;
  letter-spacing: 1px;
}

/* ── Animations ────────────────────────────────────────────────────────── */
@keyframes shake {
  0%,100% { transform: translateX(0); }
  20%      { transform: translateX(-6px); }
  40%      { transform: translateX(6px); }
  60%      { transform: translateX(-4px); }
  80%      { transform: translateX(4px); }
}

@keyframes dim-flash {
  0%,100% { opacity: 1; }
  50%      { opacity: 0.2; }
}

@keyframes flash-success {
  0%,100% { box-shadow: var(--glow-md) var(--neutral); }
  50%      { box-shadow: 0 0 32px var(--multiply); }
}

@keyframes flash-error {
  0%,100% { box-shadow: var(--glow-md) var(--neutral); }
  50%      { box-shadow: 0 0 32px var(--subtraction); }
}

.anim-shake     { animation: shake 0.4s ease; }
.anim-dim-flash { animation: dim-flash 0.5s ease; }
.anim-success   { animation: flash-success 0.4s ease; }
.anim-error     { animation: flash-error 0.4s ease; }

/* ── Deck select screen ─────────────────────────────────────────────── */

#deck-select {
  z-index: 200;
}

.deck-select-box {
  max-width: 900px;
  width: 100%;
}

.deck-select-title {
  font-family: var(--font-display);
  font-size: 0.75rem;
  color: var(--neutral);
  text-align: center;
  margin-bottom: 0.5rem;
}

.deck-select-subtitle {
  font-family: var(--font-body);
  font-size: 18px;
  color: #666;
  text-align: center;
  margin-bottom: 1.25rem;
  opacity: 0.7;
}

#deck-select-grid {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 0.75rem;
  justify-content: center;
  margin-bottom: 2.5rem;
}

.deck-card {
  background: var(--panel);
  border: 2px solid #2a2438;
  padding: 0.75rem;
  cursor: pointer;
  width: 148px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  transition: border-color 0.15s;
  position: relative;
}

.deck-card:hover {
  border-color: #5a4888;
}

.deck-card--selected {
  border-color: var(--neutral);
  box-shadow: var(--glow-sm) var(--neutral);
}

.deck-card--kb-focus::after {
  content: '▲';
  position: absolute;
  bottom: -36px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 32px;
  color: #ff8c42;
  animation: pulse-amber 1s ease-in-out infinite;
  pointer-events: none;
}

.deck-card__name {
  font-family: var(--font-body);
  font-size: 20px;
  color: var(--neutral);
  line-height: 1.1;
}

.deck-card__flavor {
  font-family: var(--font-body);
  font-size: 16px;
  opacity: 0.55;
  line-height: 1.2;
}

.deck-card__composition {
  font-family: var(--font-body);
  font-size: 14px;
  opacity: 0.5;
  line-height: 1.2;
}

.deck-card__passive {
  font-family: var(--font-body);
  font-size: 16px;
  color: #e0e0e0;
  line-height: 1.2;
}

.deck-card__type-picker {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-top: 0.25rem;
}

.deck-card__type-picker[hidden] {
  display: none;
}

.deck-type-btn {
  font-family: var(--font-body);
  font-size: 16px;
  padding: 0.2rem 0.4rem;
  background: transparent;
  border: 1px solid currentColor;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.1s;
}

.deck-type-btn.card--addition    { color: var(--addition); }
.deck-type-btn.card--subtraction { color: var(--subtraction); }
.deck-type-btn.card--multiplication { color: var(--multiply); }
.deck-type-btn.card--division    { color: var(--division); }

.deck-type-btn:hover {
  opacity: 1;
}

.deck-type-btn--selected {
  opacity: 1;
  background: rgba(255,255,255,0.08);
  box-shadow: var(--glow-sm) currentColor;
}

#deck-select-start {
  display: block;
  margin: 0 auto;
  font-family: var(--font-display);
  font-size: 0.65rem;
  padding: 0.75rem 2rem;
  background: transparent;
  border: 2px solid var(--neutral);
  color: var(--neutral);
  cursor: pointer;
  transition: box-shadow 0.15s, opacity 0.15s;
}

#deck-select-start:not(:disabled):hover {
  box-shadow: var(--glow-sm) var(--neutral);
}

#deck-select-start:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  border-color: #444;
  color: #444;
}

/* ── Modal strikes ──────────────────────────────────────────────────── */

#modal-strikes {
  display: flex;
  flex-direction: row;
  gap: 0.5rem;
  justify-content: center;
  margin: 0.5rem 0;
  min-height: 1.2rem;
}

.strike-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--neutral);
  display: inline-block;
  box-shadow: var(--glow-sm) var(--neutral);
}

.strike-dot--used {
  background: transparent;
  border: 2px solid #444;
  box-shadow: none;
}

/* ── Toast notifications (Tier 1) ──────────────────────────────────────── */

/* Dialog toasts — bottom-right, large */
#toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 500;
  display: flex;
  flex-direction: column-reverse;
  gap: 10px;
  pointer-events: none;
  padding: 0;
  max-width: 480px;
}

/* Money toasts — top-right near earnings display */
#toast-money-container {
  position: fixed;
  top: 64px;
  right: 24px;
  z-index: 500;
  display: flex;
  flex-direction: column;
  gap: 6px;
  pointer-events: none;
  padding: 0;
  max-width: 280px;
}

@keyframes toast-in {
  from { transform: translateX(110%); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}

@keyframes toast-out {
  from { transform: translateX(0);    opacity: 1; }
  to   { transform: translateX(110%); opacity: 0; }
}

.toast {
  background: var(--panel);
  border: 2px solid var(--toast-color, var(--neutral));
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  pointer-events: none;
  animation: toast-in 0.25s ease forwards;
  box-shadow: 0 0 10px var(--toast-color, var(--neutral));
}

.toast--money {
  gap: 8px;
  padding: 6px 12px;
}

.toast--out {
  animation: toast-out 0.3s ease forwards;
}

.toast__portrait {
  width: 96px;
  height: 96px;
  object-fit: contain;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  flex-shrink: 0;
}

.toast--money .toast__portrait {
  width: 28px;
  height: 28px;
}

.toast__portrait[hidden] { display: none; }

.toast__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.toast__speaker {
  font-family: var(--font-display);
  font-size: 8px;
  letter-spacing: 1px;
}

.toast--money .toast__speaker {
  font-size: 6px;
}

.toast__text {
  font-family: var(--font-body);
  font-size: 32px;
  color: #e0e0e0;
  line-height: 1.1;
}

.toast--money .toast__text {
  font-family: var(--font-mono);
  font-size: 16px;
}

/* ── Callout panel (Tier 2) ─────────────────────────────────────────────── */

#callout-panel {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 510;
  background: var(--panel);
  border: 2px solid var(--callout-color, var(--neutral));
  box-shadow: 0 0 16px var(--callout-color, var(--neutral));
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 16px;
  max-width: 400px;
  animation: toast-in 0.3s ease forwards;
}

#callout-panel[hidden] { display: none; }

.callout__portrait {
  width: 60px;
  height: 60px;
  object-fit: contain;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  flex-shrink: 0;
}

.callout__portrait[hidden] { display: none; }

.callout__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  min-width: 0;
}

.callout__speaker {
  font-family: var(--font-display);
  font-size: 7px;
  letter-spacing: 1px;
  color: var(--callout-color, var(--neutral));
}

.callout__text {
  font-family: var(--font-body);
  font-size: 20px;
  color: #e0e0e0;
  line-height: 1.2;
  max-height: 4.8em;
  overflow: hidden;
}

.callout__dismiss {
  align-self: flex-end;
  background: transparent;
  border: 1px solid #444;
  color: #666;
  font-family: var(--font-body);
  font-size: 16px;
  padding: 3px 10px;
  cursor: pointer;
  flex-shrink: 0;
}

.callout__dismiss:hover { color: #aaa; border-color: #aaa; }

/* ── Vignette screen (Tier 3) ───────────────────────────────────────────── */

#vignette {
  z-index: 600;
}

.vignette-box {
  background: var(--panel);
  border: 2px solid var(--neutral);
  padding: 36px 40px;
  max-width: 900px;
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 40px;
  min-height: 280px;
}

.vignette-content {
  display: flex;
  flex-direction: column;
  gap: 18px;
  flex: 1;
  min-width: 0;
}

.vignette-heading {
  font-family: var(--font-display);
  font-size: 8px;
  color: var(--division);
  letter-spacing: 2px;
  min-height: 1.8em;
}

.vignette-lines {
  font-family: var(--font-body);
  font-size: 22px;
  color: #e0e0e0;
  line-height: 1.5;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.vignette-line {
  display: block;
}

@keyframes blink-cursor {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

.vignette-cursor {
  display: inline-block;
  width: 10px;
  height: 1.1em;
  background: var(--neutral);
  vertical-align: text-bottom;
  animation: blink-cursor 0.7s step-end infinite;
}

@keyframes blink-prompt {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

.vignette-prompt {
  font-family: var(--font-display);
  font-size: 8px;
  color: var(--neutral);
  letter-spacing: 2px;
  text-align: center;
  margin-top: 12px;
  animation: blink-prompt 1s ease-in-out infinite;
}

.vignette-prompt[hidden] { display: none; }

.vignette-portrait-frame {
  flex-shrink: 0;
  position: relative;
  padding: 14px 14px 18px 14px;
  width: 200px;
  height: 200px;
  box-sizing: content-box;
  --c: var(--neutral);
  background:
    radial-gradient(circle, transparent 30%, var(--c) 30%, var(--c) 60%, transparent 60%)
      0    0    / 16px 16px no-repeat,
    radial-gradient(circle, transparent 30%, var(--c) 30%, var(--c) 60%, transparent 60%)
      100% 0    / 16px 16px no-repeat,
    radial-gradient(circle, transparent 30%, var(--c) 30%, var(--c) 60%, transparent 60%)
      0    100% / 16px 16px no-repeat,
    radial-gradient(circle, transparent 30%, var(--c) 30%, var(--c) 60%, transparent 60%)
      100% 100% / 16px 16px no-repeat,
    repeating-linear-gradient(90deg,  var(--c) 0, var(--c) 1px, transparent 1px, transparent 10px)
      top    / 100% 5px  no-repeat,
    repeating-linear-gradient(180deg, var(--c) 0, var(--c) 1px, transparent 1px, transparent 10px)
      left   / 5px  100% no-repeat,
    repeating-linear-gradient(180deg, var(--c) 0, var(--c) 1px, transparent 1px, transparent 10px)
      right  / 5px  100% no-repeat,
    repeating-linear-gradient(-45deg,
      var(--c)        0,
      var(--c)        4px,
      transparent     4px,
      transparent     10px)
      bottom / 100% 6px  no-repeat;
}

.vignette-scene {
  position: absolute;
  top: 14px;
  left: 14px;
  width: 200px;
  height: 200px;
  object-fit: cover;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  opacity: 0.6;
}

.vignette-scene[hidden] { display: none; }

.vignette-portrait {
  position: absolute;
  bottom: 18px;
  right: 0;
  width: 110px;
  height: 110px;
  object-fit: contain;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* ── Robot flavor text ──────────────────────────────────────────────────── */

#robot-flavor {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 4px;
}

.robot-flavor__line {
  font-family: var(--font-body);
  font-size: 18px;
  color: #7878a0;
  font-style: italic;
  line-height: 1.2;
}

/* ── Inter-round one-liner ──────────────────────────────────────────────── */

#inter-round-oneliner {
  font-family: var(--font-body);
  font-size: 18px;
  color: var(--neutral);
  font-style: italic;
  text-align: center;
  opacity: 0.7;
  min-height: 1.4em;
}

/* ── Run fail flavor ────────────────────────────────────────────────────── */

.run-fail-body {
  font-family: var(--font-body);
  font-size: 18px;
  color: #888;
  text-align: center;
  line-height: 1.4;
}

.run-fail-wrench {
  font-family: var(--font-body);
  font-size: 20px;
  color: #ff8c42;
  text-align: center;
  font-style: italic;
  opacity: 0.85;
}

/* ── Title screen ───────────────────────────────────────────────────────── */

#title-screen {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;
}

#title-screen[hidden] { display: none !important; }

.title-stamp {
  font-family: var(--font-display);
  font-size: 6px;
  color: #4a4060;
  letter-spacing: 2px;
  text-align: center;
}

.title-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}

.title-logo__sub {
  font-family: var(--font-mono);
  font-size: 13px;
  color: #4a4060;
  letter-spacing: 2px;
}

.title-logo__main {
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--neutral);
  letter-spacing: 4px;
  line-height: 1.5;
}

.title-logo__tagline {
  font-family: var(--font-mono);
  font-size: 13px;
  color: #4a4060;
  letter-spacing: 2px;
}

.title-menu {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.title-btn {
  font-family: var(--font-display);
  font-size: 10px;
  padding: 14px 32px;
  background: transparent;
  border: 2px solid currentColor;
  cursor: pointer;
  letter-spacing: 2px;
  transition: box-shadow 0.15s;
}

.title-btn--green   { color: #39ff14; }
.title-btn--cyan    { color: #00f5ff; }
.title-btn--neutral { color: #9b8ec4; }
.title-btn--amber   { color: var(--division); }
.title-btn--pink    { color: var(--subtraction); }

.title-btn--green:hover,
.title-btn--green.title-btn--active   { box-shadow: 0 0 16px #39ff14; }
.title-btn--cyan:hover,
.title-btn--cyan.title-btn--active    { box-shadow: 0 0 16px #00f5ff; }
.title-btn--neutral:hover,
.title-btn--neutral.title-btn--active { box-shadow: 0 0 16px #9b8ec4; }
.title-btn--amber:hover,
.title-btn--amber.title-btn--active   { box-shadow: 0 0 16px var(--division); }
.title-btn--pink:hover,
.title-btn--pink.title-btn--active    { box-shadow: 0 0 16px var(--subtraction); }

.title-footer {
  font-family: var(--font-body);
  font-size: 16px;
  color: #4a4060;
  letter-spacing: 1px;
}

/* ── Difficulty screen ──────────────────────────────────────────────────── */

#difficulty-screen {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;
}

#difficulty-screen[hidden] { display: none !important; }

/* ── Learn screen ───────────────────────────────────────────────────────── */

#learn-screen {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(5, 5, 10, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
}

#learn-screen[hidden] { display: none !important; }

#learn-panel {
  background: #12121a;
  border: 2px solid #2a2438;
  padding: 32px 40px;
  width: 860px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.learn-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}

.learn-heading {
  font-family: var(--font-display);
  font-size: 10px;
  color: var(--neutral);
  letter-spacing: 2px;
}

.learn-counter {
  font-family: var(--font-mono);
  font-size: 20px;
  color: var(--neutral);
}

.learn-body {
  flex: 1;
  min-height: 0;
}

.learn-slide {
  display: flex;
  flex-direction: row;
  gap: 48px;
  height: 340px;
  align-items: center;
}

.learn-slide[hidden] { display: none; }

.learn-text {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 340px;
  flex-shrink: 0;
}

.learn-slide-heading {
  font-family: var(--font-display);
  font-size: 9px;
  color: var(--neutral);
  letter-spacing: 1px;
  margin-bottom: 4px;
}

.learn-para {
  font-family: var(--font-body);
  font-size: 22px;
  color: #d8d8e8;
  line-height: 1.4;
}

.learn-visual {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.learn-footer {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
  border-top: 1px solid #2a2438;
  padding-top: 20px;
}

.learn-nav {
  display: flex;
  flex-direction: row;
  gap: 12px;
}

.learn-btn {
  font-family: var(--font-display);
  font-size: 8px;
  padding: 12px 24px;
  background: transparent;
  border: 2px solid #9b8ec4;
  color: #9b8ec4;
  cursor: pointer;
  letter-spacing: 1px;
  transition: box-shadow 0.15s;
}

.learn-btn:hover:not(:disabled) { box-shadow: 0 0 12px #9b8ec4; }

.learn-btn:disabled {
  opacity: 0.3;
  cursor: default;
  box-shadow: none;
}

.learn-btn--back {
  color: #ff2d78;
  border-color: #ff2d78;
}

.learn-btn--back:hover { box-shadow: 0 0 12px #ff2d78; }

.learn-control-row {
  display: flex;
  flex-direction: row;
  gap: 16px;
  align-items: center;
}

.learn-key {
  font-family: var(--font-display);
  font-size: 8px;
  color: var(--division);
  border: 2px solid var(--division);
  padding: 8px 14px;
  white-space: nowrap;
  flex-shrink: 0;
  min-width: 80px;
  text-align: center;
}

.learn-key-desc {
  font-family: var(--font-body);
  font-size: 22px;
  color: #d8d8e8;
}

.learn-portrait-frame {
  width: auto;
  height: auto;
  padding: 10px 10px 14px 10px;
}

/* ── Settings screen ────────────────────────────────────────────────────── */

#settings-screen {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;
}

#settings-screen[hidden] { display: none !important; }

.settings-heading {
  font-family: var(--font-display);
  font-size: 12px;
  color: var(--neutral);
  letter-spacing: 3px;
}

.settings-body {
  font-family: var(--font-body);
  font-size: 22px;
  color: #c0c0d0;
  text-align: center;
  line-height: 1.6;
}

.settings-notice {
  font-family: var(--font-body);
  font-size: 16px;
  color: #4a4060;
  margin-top: 8px;
}

/* ── Dead card ──────────────────────────────────────────────────────────── */

.card--dead {
  opacity: 0.45;
  cursor: not-allowed;
  border-style: dashed;
  position: relative;
}

.card--dead .card__problem {
  text-decoration: line-through;
  opacity: 0.6;
}

.card__dead-label {
  font-family: var(--font-body);
  font-size: 14px;
  color: #ff2d78;
  text-align: center;
  margin-top: 4px;
  letter-spacing: 0.5px;
}

/* ── Tool row ────────────────────────────────────────────────────────────── */

#tool-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 6px 0 2px;
}

.tool-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #1a1a28;
  border: 1px solid #2a2438;
  padding: 4px 10px;
  cursor: default;
}

.tool-chip__name {
  font-family: var(--font-body);
  font-size: 16px;
  color: #c0c0d0;
  white-space: nowrap;
}

.tool-chip__rarity {
  font-family: var(--font-display);
  font-size: 6px;
  letter-spacing: 1px;
}

.tool-chip__rarity--common   { color: #9b8ec4; }
.tool-chip__rarity--uncommon { color: #00f5ff; }
.tool-chip__rarity--rare     { color: #ffb700; }

/* ── Shop overlay ───────────────────────────────────────────────────────── */

.shop-box {
  width: min(960px, 97vw);
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 2px solid #2a2438;
  overflow: hidden;
}

.shop-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 20px;
  border-bottom: 2px solid #2a2438;
  flex-shrink: 0;
}

.shop-title {
  font-family: var(--font-display);
  font-size: 10px;
  color: var(--neutral);
  letter-spacing: 2px;
  flex: 1;
}

.shop-balance {
  font-family: var(--font-mono);
  font-size: 22px;
  color: #ffb700;
}

#shop-close {
  background: transparent;
  border: 1px solid #2a2438;
  color: var(--neutral);
  font-family: var(--font-body);
  font-size: 18px;
  padding: 4px 12px;
  cursor: pointer;
}
#shop-close:hover { border-color: var(--neutral); color: #e0e0e0; }

/* Tabs */
.shop-tabs {
  display: flex;
  gap: 0;
  border-bottom: 2px solid #2a2438;
  flex-shrink: 0;
}

.shop-tab {
  flex: 1;
  background: transparent;
  border: none;
  border-right: 1px solid #2a2438;
  color: #4a4060;
  font-family: var(--font-display);
  font-size: 7px;
  letter-spacing: 1px;
  padding: 10px 4px;
  cursor: pointer;
  transition: color 0.1s, background 0.1s;
}
.shop-tab:last-child { border-right: none; }
.shop-tab:hover { color: var(--neutral); background: #1a1a28; }
.shop-tab--active { color: #e0e0e0; background: #1a1a28; border-bottom: 2px solid var(--neutral); }

/* Content pane — no global scroll; each pane handles its own overflow */
.shop-content {
  flex: 1;
  overflow: hidden;
  padding: 20px;
  display: flex;
  flex-direction: column;
}

.shop-pane { display: flex; flex-direction: column; gap: 14px; flex: 1; overflow-y: auto; }
.shop-pane[hidden] { display: none; }

/* Stat upgrade rows */
.shop-stat-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 2px solid #2a2438;
  background: #12121a;
}
.shop-stat-row--disabled { opacity: 0.4; }

.shop-stat-info { flex: 1; }

.shop-stat-name {
  font-family: var(--font-display);
  font-size: 8px;
  color: #e0e0e0;
  letter-spacing: 1px;
  margin-bottom: 4px;
}

.shop-stat-desc {
  font-family: var(--font-body);
  font-size: 18px;
  color: #9b8ec4;
}

.shop-buy-btn {
  font-family: var(--font-display);
  font-size: 7px;
  letter-spacing: 1px;
  padding: 8px 14px;
  border: 2px solid #39ff14;
  background: transparent;
  color: #39ff14;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.1s;
}
.shop-buy-btn:hover:not(:disabled) { background: #39ff1422; }
.shop-buy-btn:disabled { border-color: #2a2438; color: #4a4060; cursor: default; }
.shop-buy-btn--amber { border-color: #ffb700; color: #ffb700; }
.shop-buy-btn--amber:hover:not(:disabled) { background: #ffb70022; }
.shop-buy-btn--pink  { border-color: #ff2d78; color: #ff2d78; }
.shop-buy-btn--pink:hover:not(:disabled)  { background: #ff2d7822; }
.shop-buy-btn--cyan  { border-color: #00f5ff; color: #00f5ff; }
.shop-buy-btn--cyan:hover:not(:disabled)  { background: #00f5ff22; }

/* Card shop */
.shop-draft-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  flex-wrap: wrap;
}

.shop-section-label {
  font-family: var(--font-display);
  font-size: 7px;
  color: var(--neutral);
  letter-spacing: 1px;
  margin-bottom: 10px;
}

.shop-card-offer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

/* ── Deck card tile (Bench / Surplus grid) ──────────────────────────── */

.deck-card-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 4px 0 10px;
  align-content: flex-start;
}

.deck-card-tile {
  width: 88px;
  min-height: 112px;
  border: 2px solid;
  background: #0e0e18;
  padding: 8px 8px 7px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex-shrink: 0;
  transition: transform 0.1s, border-color 0.1s, box-shadow 0.1s;
  position: relative;
  user-select: none;
}
.deck-card-tile--addition    { border-color: #00f5ff2a; }
.deck-card-tile--subtraction { border-color: #ff2d782a; }
.deck-card-tile--multiplication { border-color: #39ff142a; }
.deck-card-tile--division    { border-color: #ffb7002a; }

.deck-card-tile:hover { transform: translateY(-3px); }

/* Selected state (bench) */
.deck-card-tile--selected { transform: translateY(-4px); }
.deck-card-tile--selected.deck-card-tile--addition    { border-color: #00f5ff; box-shadow: 0 0 10px #00f5ff33; }
.deck-card-tile--selected.deck-card-tile--subtraction { border-color: #ff2d78; box-shadow: 0 0 10px #ff2d7833; }
.deck-card-tile--selected.deck-card-tile--multiplication { border-color: #39ff14; box-shadow: 0 0 10px #39ff1433; }
.deck-card-tile--selected.deck-card-tile--division    { border-color: #ffb700; box-shadow: 0 0 10px #ffb70033; }

/* Marked for scrap (surplus) */
.deck-card-tile--scrapping {
  border-color: #ff2d78 !important;
  box-shadow: 0 0 8px #ff2d7822 !important;
  background: #16080e;
}
.deck-card-tile--locked {
  opacity: 0.28;
  cursor: not-allowed;
}
.deck-card-tile--locked:hover { transform: none; }
.deck-card-tile__check {
  position: absolute;
  top: 3px;
  right: 5px;
  font-size: 12px;
  color: #ff2d78;
  line-height: 1;
}

.deck-card-tile__type {
  font-family: var(--font-display);
  font-size: 5px;
  letter-spacing: 1px;
  line-height: 1.4;
}
.deck-card-tile--addition    .deck-card-tile__type { color: #00f5ff; }
.deck-card-tile--subtraction .deck-card-tile__type { color: #ff2d78; }
.deck-card-tile--multiplication .deck-card-tile__type { color: #39ff14; }
.deck-card-tile--division    .deck-card-tile__type { color: #ffb700; }

.deck-card-tile__chevrons {
  font-size: 11px;
  color: #4a3a6a;
  line-height: 1;
}

.deck-card-tile__problem {
  font-family: var(--font-mono);
  font-size: 12px;
  color: #d0d0e0;
  margin-top: auto;
  line-height: 1.3;
  word-break: break-all;
}

.deck-card-tile__temper {
  font-family: var(--font-body);
  font-size: 12px;
  color: #ffb700;
}

/* Grid scroller wrapper */
.deck-grid-scroll {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
}

/* Action bar — fixed at bottom of bench/surplus */
.deck-action-panel {
  flex-shrink: 0;
  border-top: 2px solid #2a2438;
  padding: 12px 0 0;
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  min-height: 52px;
}

.deck-action-hint {
  font-family: var(--font-body);
  font-size: 20px;
  color: #3a3050;
}

.deck-action-info {
  font-family: var(--font-mono);
  font-size: 14px;
  color: #e0e0e0;
  flex: 1;
  min-width: 100px;
  line-height: 1.4;
}

.deck-action-btns {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.deck-retool-row {
  display: flex;
  gap: 6px;
  width: 100%;
  padding-top: 8px;
  flex-wrap: wrap;
  border-top: 1px solid #2a2438;
  margin-top: 4px;
}

/* Surplus action bar counts */
.deck-surplus-summary {
  font-family: var(--font-mono);
  font-size: 16px;
  flex: 1;
}
.deck-surplus-summary span { color: #39ff14; }

/* Tools tab */
.shop-tool-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 18px;
  border: 2px solid #2a2438;
  background: #12121a;
}

.shop-tool-card--common   { border-color: #2a2438; }
.shop-tool-card--uncommon { border-color: #00f5ff44; }
.shop-tool-card--rare     { border-color: #ffb70055; }

.shop-tool-card__name {
  font-family: var(--font-display);
  font-size: 8px;
  color: #e0e0e0;
  letter-spacing: 1px;
  line-height: 1.4;
}

.shop-tool-card__rarity { font-family: var(--font-body); font-size: 14px; }
.shop-tool-card--common   .shop-tool-card__rarity { color: #9b8ec4; }
.shop-tool-card--uncommon .shop-tool-card__rarity { color: #00f5ff; }
.shop-tool-card--rare     .shop-tool-card__rarity { color: #ffb700; }

.shop-tool-card__desc {
  font-family: var(--font-body);
  font-size: 18px;
  color: #c0c0d0;
  line-height: 1.3;
  flex: 1;
}

.shop-tool-card__flavor {
  font-family: var(--font-body);
  font-size: 15px;
  color: #4a4060;
  line-height: 1.3;
}

.shop-tool-grid {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.shop-tool-grid .shop-tool-card { width: 220px; }

/* Mini-draft overlay within shop */
.shop-minidraft-overlay {
  position: absolute;
  inset: 0;
  background: rgba(10,10,15,0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}
.shop-minidraft-box {
  background: var(--panel);
  border: 2px solid #ff2d7888;
  padding: 28px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  max-width: 600px;
  width: 90%;
}
.shop-minidraft-title {
  font-family: var(--font-display);
  font-size: 9px;
  color: #ff2d78;
  letter-spacing: 2px;
  text-align: center;
}
.shop-minidraft-cards {
  display: flex;
  gap: 12px;
}

/* Shop card offer (card shop + mini-draft — larger than deck tile) */
.shop-card-preview {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 14px 12px;
  border: 2px solid;
  background: #0e0e18;
  width: 140px;
  cursor: pointer;
  transition: transform 0.1s, box-shadow 0.1s;
  position: relative;
}
.shop-card-preview:hover { transform: translateY(-3px); }
.shop-card-preview--addition    { border-color: #00f5ff55; }
.shop-card-preview--subtraction { border-color: #ff2d7855; }
.shop-card-preview--multiplication { border-color: #39ff1455; }
.shop-card-preview--division    { border-color: #ffb70055; }
.shop-card-preview--addition:hover    { box-shadow: 0 0 12px #00f5ff33; }
.shop-card-preview--subtraction:hover { box-shadow: 0 0 12px #ff2d7833; }
.shop-card-preview--multiplication:hover { box-shadow: 0 0 12px #39ff1433; }
.shop-card-preview--division:hover    { box-shadow: 0 0 12px #ffb70033; }

.shop-card-preview__type {
  font-family: var(--font-display);
  font-size: 6px;
  letter-spacing: 1px;
}
.shop-card-preview--addition    .shop-card-preview__type { color: #00f5ff; }
.shop-card-preview--subtraction .shop-card-preview__type { color: #ff2d78; }
.shop-card-preview--multiplication .shop-card-preview__type { color: #39ff14; }
.shop-card-preview--division    .shop-card-preview__type { color: #ffb700; }

.shop-card-preview__chevrons {
  font-size: 14px;
  color: #6a5a8a;
  line-height: 1;
}

.shop-card-preview__problem {
  font-family: var(--font-mono);
  font-size: 16px;
  color: #e0e0e0;
  margin-top: auto;
}

.shop-card-preview__temper {
  font-family: var(--font-body);
  font-size: 14px;
  color: #ffb700;
}