/* Working Memory — only test-specific overrides */
:root { --test-accent: #6c63ff; }

/* ── STIMULUS BOX ── */
.wm-box {
  border-radius: 18px;
  min-height: 400px;
  background: #f0f5f8;
  border: 2.5px solid #e0eaee;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  transition: background 0.15s, border-color 0.15s;
}

.wm-box[data-state="flash"]  { background: #ffffff; border-color: var(--test-accent); box-shadow: 0 0 0 4px var(--test-accent-soft); }
.wm-box[data-state="input"]  { background: #f8fafb; border-color: #dde8ed; }
.wm-box[data-state="hit"]    { background: #edfaf4; border-color: #2ecc71; }
.wm-box[data-state="miss"]   { background: #fef2f1; border-color: #e74c3c; }

/* ── TASK HEADER (lives + count + restart) ── */
.wm-task-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.wm-lives {
  display: flex;
  gap: 4px;
}

.wm-life {
  font-size: 22px;
  line-height: 1;
  color: #e74c3c;
  transition: opacity 0.2s, transform 0.2s;
}

.wm-life.lost {
  color: #dde8ed;
  transform: scale(0.85);
}

.wm-restart-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  background: transparent;
  border: 1.5px solid #dde8ed;
  border-radius: 8px;
  font-family: 'Lexend', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: #5a7285;
  cursor: pointer;
  touch-action: manipulation;
  transition: all 0.15s;
}
.wm-restart-btn:hover { border-color: var(--test-accent); color: var(--test-accent); }
.wm-restart-btn:active { transform: scale(0.96); }

/* ── TIMER BAR ── */
.wm-timer-track {
  height: 6px;
  background: #e8f0f4;
  border-radius: 10px;
  overflow: hidden;
}

.wm-timer-fill {
  height: 100%;
  width: 100%;
  border-radius: 10px;
  background: var(--test-accent);
  transition: none; /* driven by rAF */
}

/* ── IDLE MSG ── */
.wm-idle-msg {
  display: none;
  font-family: 'Lexend', sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: #9eb0bc;
  animation: pulse 1s infinite;
}
.wm-box[data-state="idle"] .wm-idle-msg {
  display: block;
}

/* ── ALL DIGITS SHOWN AT ONCE ── */
.wm-digit-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(4px, 1.5vw, 12px);
  flex-wrap: nowrap;
  padding: 24px 8px;
  width: 100%;
}
.wm-box:not([data-state="flash"]) .wm-digit-row {
  display: none;
}

.wm-digit-card {
  background: transparent;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Manrope', sans-serif;
  font-size: clamp(28px, 6vw, 64px);
  font-weight: 900;
  color: var(--test-accent);
  animation: cardPop 0.18s ease both;
  flex-shrink: 1;
  line-height: 1;
}

@keyframes cardPop {
  from { opacity: 0; transform: scale(0.75); }
  to   { opacity: 1; transform: scale(1); }
}

/* ── DELETED SLOTS CSS ── */

/* ── INPUT UI (Numpad) ── */
.wm-input-wrap {
  display: none;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 300px;
  padding: 16px 20px 20px;
}
.wm-box[data-state="input"] .wm-input-wrap,
.wm-box[data-state="hit"] .wm-input-wrap,
.wm-box[data-state="miss"] .wm-input-wrap {
  display: flex;
  animation: fadeSlideUp 0.28s ease both;
}

.wm-display {
  width: 100%;
  min-height: 80px;
  background: transparent;
  border: none;
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: 'Manrope', sans-serif;
  font-size: clamp(32px, 8vw, 48px);
  font-weight: 800;
  letter-spacing: clamp(0.05em, 1vw, 0.15em);
  color: var(--test-accent);
  white-space: nowrap;
  padding: 8px;
  transition: color 0.2s;
}

.wm-display.correct {
  color: #2ecc71;
}
.wm-display.wrong {
  color: #e74c3c;
}

.wm-numpad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  width: 100%;
}

.wm-key {
  height: 52px;
  background: #fff;
  border: 1.5px solid #dde8ed;
  border-radius: 12px;
  font-family: 'Manrope', sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: #1a2e3b;
  cursor: pointer;
  box-shadow: 0 4px 0 #dde8ed;
  transition: all 0.08s;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
}
.wm-key:active { transform: translateY(4px); box-shadow: 0 0 0 #dde8ed; }

.wm-key.clear { font-size: 13px; font-weight: 800; color: #5a7285; background: #f0f5f8; }
.wm-key.submit { background: var(--test-accent); border-color: var(--test-accent); box-shadow: 0 4px 0 color-mix(in srgb, var(--test-accent) 60%, black); color: #fff; }
.wm-key.submit:active { box-shadow: 0 0 0 color-mix(in srgb, var(--test-accent) 60%, black); }

@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── INTRO VISUAL MAPPING ── */
.wm-intro-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  background: #f4f3ff;
  border: 2px dashed #dcd8ff;
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 24px;
}

.wm-intro-rule {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.wm-intro-shape {
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.wm-digit-box {
  width: 32px;
  height: 44px;
  background: #fff;
  border: 2px solid #dde8ed;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Manrope', sans-serif;
  font-weight: 800;
  font-size: 20px;
  color: var(--test-accent);
}

.wm-mini-numpad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
}

.wm-mini-key {
  width: 16px;
  height: 16px;
  background: #fff;
  border: 1.5px solid #dde8ed;
  border-radius: 4px;
}

.wm-mini-key.active {
  background: var(--test-accent);
  border-color: var(--test-accent);
}

.wm-intro-text {
  font-family: 'Lexend', sans-serif;
  font-size: 15px;
  color: #1a2e3b;
  text-align: center;
}

.wm-intro-divider {
  color: #cdd8df;
}