* { margin: 0; padding: 0; box-sizing: border-box; }
:root {
  --bg: #09090a; --surface: #141418; --border: #362e48;
  --accent: #7540b0; --accent-dim: rgba(117,64,176,0.10); --accent-bright: #c2a9df;
  --text: #e8e8ed; --muted: #7c7c7e; --dim: #58535d;
}
body { font-family: 'Inter', -apple-system, sans-serif; background: var(--bg); color: var(--text); line-height: 1.6; -webkit-font-smoothing: antialiased; overflow: hidden; height: 100vh; height: 100dvh; }
a { color: var(--accent-bright); text-decoration-color: rgba(194,169,223,0.3); text-underline-offset: 2px; transition: text-decoration-color 0.2s; }
a:hover { text-decoration-color: var(--accent-bright); }

/* SCREENS */
.screen { display: none; position: fixed; inset: 0; overflow-y: auto; opacity: 0; transition: opacity 0.35s ease; }
.screen.active { display: flex; opacity: 1; animation: screenIn 0.5s cubic-bezier(0.16, 1, 0.3, 1); }
.screen.fading { opacity: 0; }
@keyframes screenIn { from { opacity: 0; transform: scale(0.98); } to { opacity: 1; transform: scale(1); } }

/* START — Epic Game Cover Style */
.screen-start {
  align-items: center; justify-content: center;
  background:
    radial-gradient(ellipse at 30% 50%, rgba(117,64,176,0.15) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 30%, rgba(84,50,140,0.1) 0%, transparent 40%),
    radial-gradient(ellipse at 50% 100%, rgba(117,64,176,0.08) 0%, transparent 50%),
    var(--bg);
}

/* Light rays behind character */
.screen-start::before {
  content: '';
  position: fixed;
  width: 140vh; height: 140vh;
  left: -20vh; top: 50%;
  transform: translateY(-50%);
  background: conic-gradient(
    from 0deg at 50% 50%,
    transparent 0deg, rgba(117,64,176,0.06) 10deg,
    transparent 20deg, rgba(117,64,176,0.04) 30deg,
    transparent 40deg, rgba(117,64,176,0.06) 50deg,
    transparent 60deg, rgba(117,64,176,0.03) 70deg,
    transparent 80deg, rgba(117,64,176,0.06) 90deg,
    transparent 100deg, rgba(117,64,176,0.04) 110deg,
    transparent 120deg, rgba(117,64,176,0.06) 130deg,
    transparent 140deg, rgba(117,64,176,0.03) 150deg,
    transparent 160deg, rgba(117,64,176,0.06) 170deg,
    transparent 180deg, rgba(117,64,176,0.04) 190deg,
    transparent 200deg, rgba(117,64,176,0.06) 210deg,
    transparent 220deg, rgba(117,64,176,0.03) 230deg,
    transparent 240deg, rgba(117,64,176,0.06) 250deg,
    transparent 260deg, rgba(117,64,176,0.04) 270deg,
    transparent 280deg, rgba(117,64,176,0.06) 290deg,
    transparent 300deg, rgba(117,64,176,0.03) 310deg,
    transparent 320deg, rgba(117,64,176,0.06) 330deg,
    transparent 340deg, rgba(117,64,176,0.04) 350deg,
    transparent 360deg
  );
  animation: raysSpin 60s linear infinite;
  pointer-events: none;
  z-index: 0;
}
@keyframes raysSpin { to { transform: translateY(-50%) rotate(360deg); } }

/* Floating particles */
.screen-start::after {
  content: '';
  position: fixed;
  inset: 0;
  will-change: transform;
  background-image:
    radial-gradient(1px 1px at 10% 20%, rgba(117,64,176,0.6) 50%, transparent 50%),
    radial-gradient(1px 1px at 80% 15%, rgba(194,169,223,0.5) 50%, transparent 50%),
    radial-gradient(1.5px 1.5px at 25% 70%, rgba(117,64,176,0.4) 50%, transparent 50%),
    radial-gradient(1px 1px at 60% 80%, rgba(194,169,223,0.5) 50%, transparent 50%),
    radial-gradient(1.5px 1.5px at 90% 60%, rgba(117,64,176,0.4) 50%, transparent 50%),
    radial-gradient(1px 1px at 45% 40%, rgba(194,169,223,0.3) 50%, transparent 50%),
    radial-gradient(1px 1px at 70% 45%, rgba(117,64,176,0.5) 50%, transparent 50%),
    radial-gradient(1.5px 1.5px at 15% 90%, rgba(194,169,223,0.4) 50%, transparent 50%);
  animation: particlesDrift 20s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 0;
}
@keyframes particlesDrift { 
  0% { transform: translateY(0) translateX(0); }
  100% { transform: translateY(-15px) translateX(10px); }
}

.start-content {
  display: flex; align-items: center; gap: 3rem;
  max-width: 1100px; padding: 1.5rem 2rem;
  position: relative; z-index: 1;
}
.start-ghost-wrap { flex-shrink: 0; position: relative; }
.start-left { flex: 1; }

/* Stagger animation */
.anim-stagger > * { opacity: 0; transform: translateY(12px); animation: staggerIn 0.5s ease forwards; }
.anim-stagger > *:nth-child(1) { animation-delay: 0.1s; }
.anim-stagger > *:nth-child(2) { animation-delay: 0.2s; }
.anim-stagger > *:nth-child(3) { animation-delay: 0.3s; }
.anim-stagger > *:nth-child(4) { animation-delay: 0.4s; }
.anim-stagger > *:nth-child(5) { animation-delay: 0.5s; }
.anim-stagger > *:nth-child(6) { animation-delay: 0.6s; }
@keyframes staggerIn { to { opacity: 1; transform: translateY(0); } }

.anim-ghost { opacity: 0; animation: ghostIn 1s cubic-bezier(0.16, 1, 0.3, 1) 0.1s forwards; }
@keyframes ghostIn {
  from { opacity: 0; transform: scale(0.7) translateY(30px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.start-eyebrow { font-size: 0.78rem; color: var(--muted); margin-bottom: 0.8rem; text-transform: uppercase; letter-spacing: 0.15em; }
.start-eyebrow a { color: var(--accent); text-decoration: none; }

/* Epic title */
.start-left h1 {
  font-size: clamp(2rem, 4vw, 3.2rem); font-weight: 800;
  letter-spacing: -0.03em; line-height: 1.05;
  margin-bottom: 0.5rem;
  background: linear-gradient(135deg, #fff 0%, var(--accent-bright) 50%, var(--accent) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: none;
  filter: drop-shadow(0 2px 10px rgba(117,64,176,0.3));
}

.start-sub { font-size: 1rem; color: var(--accent-bright); margin-bottom: 1.2rem; letter-spacing: 0.05em; }

.start-btn {
  position: relative; z-index: 2;
  background: linear-gradient(135deg, var(--accent) 0%, #5b2d8e 100%);
  color: #fff; border: none;
  padding: 0.85rem 3.5rem; border-radius: 14px;
  font-family: 'Inter', sans-serif; font-size: 1.15rem; font-weight: 700;
  cursor: pointer; transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 25px rgba(117,64,176,0.35), inset 0 1px 0 rgba(255,255,255,0.15);
  text-transform: uppercase; letter-spacing: 0.08em;
  animation: staggerIn 0.5s ease forwards 0.4s, btnPulse 2.5s ease-in-out 0.9s infinite;
}
@keyframes btnPulse {
  0%, 100% { box-shadow: 0 4px 25px rgba(117,64,176,0.35), inset 0 1px 0 rgba(255,255,255,0.15); }
  50% { box-shadow: 0 4px 40px rgba(117,64,176,0.55), 0 0 60px rgba(117,64,176,0.15), inset 0 1px 0 rgba(255,255,255,0.15); }
}
.start-btn:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 8px 40px rgba(117,64,176,0.5), inset 0 1px 0 rgba(255,255,255,0.2);
  animation: staggerIn 0.5s ease forwards, btnPulse 2.5s ease-in-out 0.9s infinite;
}
.start-actions {
  display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap;
}
/* Continuar: CTA primario cuando hay progreso (mismo peso visual que Empezar) */
.start-btn-secondary {
  position: relative; z-index: 2;
  background: linear-gradient(135deg, var(--accent) 0%, #5b2d8e 100%);
  color: #fff; border: none;
  padding: 0.85rem 3.5rem; border-radius: 14px;
  font-family: 'Inter', sans-serif; font-size: 1.15rem; font-weight: 700;
  cursor: pointer; transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 25px rgba(117,64,176,0.35), inset 0 1px 0 rgba(255,255,255,0.15);
  text-transform: uppercase; letter-spacing: 0.08em;
  animation: staggerIn 0.5s ease forwards 0.4s, btnPulse 2.5s ease-in-out 0.9s infinite;
}
.start-btn-secondary:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 8px 40px rgba(117,64,176,0.5), inset 0 1px 0 rgba(255,255,255,0.2);
  animation: staggerIn 0.5s ease forwards, btnPulse 2.5s ease-in-out 0.9s infinite;
}
/* Reiniciar: accion destructiva, baja jerarquia visual */
.start-btn-reset {
  background: none; border: none;
  color: var(--dim); font-family: 'Inter', sans-serif;
  font-size: 0.75rem; font-weight: 500;
  cursor: pointer; transition: color 0.25s, text-decoration-color 0.25s;
  padding: 0.3rem 0; text-decoration: underline;
  text-decoration-color: transparent;
  animation: staggerIn 0.5s ease forwards 0.6s;
}
.start-btn-reset:hover { color: var(--muted); text-decoration-color: var(--muted); }

/* Reset confirmation modal */
.reset-panel { max-width: 360px; text-align: center; }
.reset-icon {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 10px;
  background: var(--accent-dim); color: var(--accent-bright); font-size: 1rem;
}
.reset-desc { font-size: 0.85rem; color: var(--muted); line-height: 1.5; margin-bottom: 1.2rem; }
.reset-actions { display: flex; gap: 0.6rem; }
.reset-cancel {
  flex: 1; padding: 0.6rem; border-radius: 8px;
  background: linear-gradient(135deg, var(--accent) 0%, #5b2d8e 100%);
  border: none; color: #fff;
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem; font-weight: 600; cursor: pointer;
  transition: box-shadow 0.2s, transform 0.2s;
  box-shadow: 0 2px 12px rgba(117,64,176,0.3);
}
.reset-cancel:hover { transform: translateY(-1px); box-shadow: 0 4px 20px rgba(117,64,176,0.4); }
.reset-confirm {
  flex: 1; padding: 0.6rem; border-radius: 8px;
  background: var(--bg); border: 1px solid var(--border);
  color: var(--muted); font-family: 'Inter', sans-serif;
  font-size: 0.85rem; font-weight: 500; cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}
.reset-confirm:hover { border-color: var(--accent); color: var(--accent-bright); }
.start-modes { margin-top: 1rem; display: flex; align-items: center; gap: 0.6rem; }
.mode-toggle {
  display: flex; align-items: center; gap: 0.5rem;
  background: none; border: none; cursor: pointer; padding: 0;
  font-family: inherit;
}
.mode-toggle-track {
  position: relative; width: 36px; height: 20px;
  background: var(--dim); border-radius: 10px;
  transition: background 0.25s, box-shadow 0.25s;
}
.mode-toggle-knob {
  position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--text); transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.mode-toggle[aria-checked="true"] .mode-toggle-track {
  background: var(--accent);
  box-shadow: 0 0 8px rgba(117,64,176,0.4);
}
.mode-toggle[aria-checked="true"] .mode-toggle-knob {
  transform: translateX(16px);
}
.mode-toggle-label { font-size: 0.8rem; color: var(--muted); transition: color 0.2s; }
.mode-toggle[aria-checked="true"] .mode-toggle-label { color: var(--accent-bright); }
.mode-toggle:hover .mode-toggle-label { color: var(--accent-bright); }
.mode-toggle:focus-visible .mode-toggle-track { outline: 2px solid var(--accent-bright); outline-offset: 2px; }
.start-mode { font-size: 0.8rem; color: var(--muted); text-decoration: none; transition: color 0.2s; }
.start-mode:hover { color: var(--accent); }
.start-mode-disabled { opacity: 0.4; cursor: default; pointer-events: none; }
.start-sep { color: var(--border); }
.start-help { display: block; margin-top: 0.6rem; font-size: 0.72rem; color: var(--dim); text-decoration: none; }
.start-help:hover { color: var(--accent); }

/* Ghost — the hero character */
.start-ghost-img {
  width: clamp(280px, 30vw, 400px); height: auto;
  transform: scaleX(-1) rotate(-3deg);
  animation: ghostFloat 4s ease-in-out infinite;
  will-change: transform;
  filter:
    drop-shadow(0 0 60px rgba(117,64,176,0.5))
    drop-shadow(0 0 120px rgba(117,64,176,0.2))
    drop-shadow(0 20px 40px rgba(0,0,0,0.4));
  transition: filter 0.3s ease;
}
.start-ghost-img:hover {
  filter:
    drop-shadow(0 0 80px rgba(117,64,176,0.6))
    drop-shadow(0 0 150px rgba(117,64,176,0.3))
    drop-shadow(0 20px 40px rgba(0,0,0,0.4));
}
@keyframes ghostFloat {
  0%,100% { transform: scaleX(-1) rotate(-3deg) translateY(0); }
  50% { transform: scaleX(-1) rotate(-3deg) translateY(-18px); }
}

@media (max-width: 700px) {
  .screen-start::before { width: 100vh; height: 100vh; left: -25vh; }
  .start-content { flex-direction: column; gap: 1.5rem; text-align: center; }
  .start-left h1 { font-size: 2.2rem; text-align: center; }
  .start-sub { text-align: center; }
  .start-modes { justify-content: center; }
  .start-ghost-img { width: 220px; height: auto; max-width: none; transform: scaleX(-1) rotate(-2deg); }
  @keyframes ghostFloat {
    0%,100% { transform: scaleX(-1) rotate(-2deg) translateY(0); }
    50% { transform: scaleX(-1) rotate(-2deg) translateY(-12px); }
  }
}

/* PLAY SCREEN */
.screen-play {
  flex-direction: column;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(117,64,176,0.07) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 100%, rgba(84,50,140,0.05) 0%, transparent 40%),
    radial-gradient(ellipse at 20% 80%, rgba(117,64,176,0.04) 0%, transparent 40%),
    var(--bg);
}
.screen-play::after {
  content: '';
  position: fixed; inset: 0;
  background-image:
    radial-gradient(1px 1px at 15% 25%, rgba(117,64,176,0.3) 50%, transparent 50%),
    radial-gradient(1px 1px at 75% 20%, rgba(194,169,223,0.25) 50%, transparent 50%),
    radial-gradient(1px 1px at 50% 75%, rgba(117,64,176,0.2) 50%, transparent 50%),
    radial-gradient(1px 1px at 85% 65%, rgba(194,169,223,0.25) 50%, transparent 50%),
    radial-gradient(1px 1px at 30% 90%, rgba(117,64,176,0.2) 50%, transparent 50%);
  animation: particlesDrift 25s ease-in-out infinite alternate;
  pointer-events: none; z-index: 0;
}

.topbar {
  display: flex; align-items: center; padding: 0.5rem 1rem;
  border-bottom: 1px solid var(--border); flex-shrink: 0;
  background: rgba(9,9,10,0.85); backdrop-filter: blur(12px);
  position: relative; z-index: 2;
}
.topbar-home { background: none; border: none; color: var(--dim); cursor: pointer; padding: 0.3rem; transition: color 0.2s; display: flex; }
.topbar-home:hover { color: var(--accent); }
.topbar-phases { display: flex; gap: 0.2rem; margin: 0 auto; }
.topbar-phase {
  background: none; border: none; font-family: 'Inter', sans-serif;
  font-size: 0.78rem; font-weight: 500; color: var(--dim);
  padding: 0.4rem 0.8rem; border-radius: 6px; cursor: pointer; transition: all 0.2s;
}
.topbar-phase.active { color: var(--accent); background: var(--accent-dim); }
.topbar-phase.locked { opacity: 0.3; cursor: default; }
.topbar-phase.unlocked { opacity: 0.7; }
.topbar-phase.done { color: var(--muted); }
.topbar-count { font-size: 0.75rem; color: var(--dim); font-variant-numeric: tabular-nums; }
.topbar-help { background: none; border: none; color: var(--dim); cursor: pointer; padding: 0.3rem; transition: color 0.2s; display: flex; align-items: center; margin-left: 0.5rem; font-size: 0.9rem; }
.topbar-help:hover { color: var(--accent); }

/* MISSION AREA */
.mission-area { flex: 1; display: flex; align-items: safe center; justify-content: center; overflow-y: auto; padding: 1.5rem; position: relative; z-index: 1; }
.mission { display: none; max-width: 640px; width: 100%; }
.mission.active { display: block; animation: missionIn 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes missionIn {
  from { opacity: 0; transform: translateX(20px) scale(0.98); }
  to { opacity: 1; transform: translateX(0) scale(1); }
}

.mission-tag {
  display: inline-block;
  font-size: 0.65rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--accent-bright);
  background: var(--accent-dim);
  padding: 0.2rem 0.6rem; border-radius: 20px;
  border: 1px solid rgba(117,64,176,0.2);
}
.mission h2 {
  font-size: 1.4rem; font-weight: 700; margin: 0.35rem 0 0.6rem;
  background: linear-gradient(135deg, #fff 0%, var(--accent-bright) 70%, var(--accent) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 1px 6px rgba(117,64,176,0.2));
}
.mission-inner > p { font-size: 0.92rem; color: #9a9a9f; margin-bottom: 0.7rem; line-height: 1.5; }
.mission-result { font-size: 0.85rem; color: var(--accent-bright); font-weight: 500; margin: 0.7rem 0; }
.mission-result::before { content: '✦ '; opacity: 0.7; }
.mission-then { font-size: 0.88rem; color: var(--muted); margin: 0.7rem 0 0.2rem; }

/* KIRO CHAT */
.kiro-chat {
  background: #08080c;
  border: 1px solid rgba(117,64,176,0.25);
  border-radius: 10px; margin: 0.6rem 0;
  box-shadow: 0 2px 12px rgba(117,64,176,0.08);
}
.kiro-bar { padding: 0.35rem 0.85rem; background: var(--surface); border-bottom: 1px solid var(--border); font-size: 0.65rem; color: var(--dim); font-weight: 500; border-radius: 10px 10px 0 0; }
.kiro-chat code { display: block; padding: 0.7rem 0.85rem; font-family: 'JetBrains Mono', monospace; font-size: 0.8rem; color: var(--text); white-space: pre-wrap; line-height: 1.6; }
.kiro-chat pre { margin: 0; }
.kiro-chat pre code { padding: 0.7rem 0.85rem; }
.ask-btn {
  position: relative;
  display: flex; align-items: center; gap: 0.3rem;
  margin: 0.15rem 0.85rem 0.5rem auto;
  background: var(--surface); color: var(--text);
  border: 1px solid rgba(117,64,176,0.35);
  border-radius: 8px;
  padding: 0.32rem 0.7rem 0.32rem 1.6rem;
  font-family: 'Inter', sans-serif; font-size: 0.72rem; font-weight: 600;
  cursor: pointer;
  transition: border-color 0.25s, box-shadow 0.25s, color 0.25s;
  box-shadow: 0 0 8px rgba(117,64,176,0.1);
  overflow: visible;
}
.ask-btn::before {
  content: '';
  position: absolute;
  left: -0.55rem; top: 50%;
  width: 1.5rem; height: 1.5rem;
  transform: translateY(-50%) scaleX(-1);
  background: url('kiro.svg') center/contain no-repeat;
  border-radius: 50%;
  filter: drop-shadow(0 0 4px rgba(117,64,176,0.4));
  animation: askBtnFloat 3s ease-in-out infinite;
  transition: filter 0.3s;
}
.ask-btn:hover {
  border-color: rgba(194,169,223,0.5);
  box-shadow: 0 0 14px rgba(117,64,176,0.25), 0 0 4px rgba(117,64,176,0.15) inset;
  color: var(--accent-bright);
}
.ask-btn:hover::before {
  filter: drop-shadow(0 0 8px rgba(117,64,176,0.6));
  animation: askBtnWiggle 0.5s ease-in-out 2;
}
.ask-btn.copied {
  border-color: var(--accent-bright);
  color: var(--accent-bright);
  box-shadow: 0 0 12px rgba(117,64,176,0.3);
}

@keyframes askBtnFloat {
  0%, 100% { transform: translateY(-50%) scaleX(-1) rotate(0deg); }
  25% { transform: translateY(-58%) scaleX(-1) rotate(-2deg); }
  50% { transform: translateY(-45%) scaleX(-1) rotate(1.5deg); }
  75% { transform: translateY(-55%) scaleX(-1) rotate(-1deg); }
}
@keyframes askBtnWiggle {
  0%, 100% { transform: translateY(-50%) scaleX(-1) rotate(0deg); }
  20% { transform: translateY(-50%) scaleX(-1) rotate(-8deg) scale(1.1); }
  40% { transform: translateY(-50%) scaleX(-1) rotate(6deg) scale(1.05); }
  60% { transform: translateY(-50%) scaleX(-1) rotate(-4deg) scale(1.08); }
  80% { transform: translateY(-50%) scaleX(-1) rotate(2deg); }
}

.mission-action { font-size: 0.88rem; color: var(--muted); background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 0.55rem 0.85rem; margin: 0.6rem 0; }
.action-lbl { font-size: 0.6rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; background: var(--border); color: var(--muted); padding: 0.1rem 0.3rem; border-radius: 3px; margin-right: 0.3rem; }

/* TIPS */
.mission-tip {
  display: flex; align-items: flex-start; gap: 0.5rem;
  font-size: 0.82rem; color: var(--muted); line-height: 1.5;
  background: rgba(117,64,176,0.05);
  border: 1px solid rgba(117,64,176,0.12);
  border-radius: 8px; padding: 0.55rem 0.75rem; margin: 0.6rem 0;
}
.mission-tip::before {
  content: '\f0eb'; font-family: 'Font Awesome 6 Free'; font-weight: 900;
  color: var(--accent); font-size: 0.75rem; flex-shrink: 0; margin-top: 0.1rem;
}

/* MCP MANUAL (details/summary) */
.mcp-manual { margin: 0.5rem 0; font-size: 0.82rem; }
.mcp-manual summary {
  color: var(--muted); cursor: pointer; padding: 0.3rem 0;
  list-style: none;
}
.mcp-manual summary::before {
  content: '▸ '; color: var(--dim); transition: transform 0.2s;
}
.mcp-manual[open] summary::before { content: '▾ '; }
.mcp-manual summary:hover { color: var(--accent-bright); }
.mcp-manual summary code {
  font-family: 'JetBrains Mono', monospace; font-size: 0.78rem;
  background: var(--accent-dim); padding: 0.1rem 0.35rem; border-radius: 4px;
}

/* SPEC VS VIBE DIAGRAM */
.spec-vs {
  display: flex; flex-direction: column; gap: 0.5rem;
  margin: 0.6rem 0; font-size: 0.78rem;
}
.spec-vs-col {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.5rem 0.7rem; border-radius: 8px;
  border: 1px solid var(--border);
}
.spec-vs-vibe { background: rgba(124,124,126,0.06); }
.spec-vs-spec { background: var(--accent-dim); border-color: rgba(117,64,176,0.25); }
.spec-vs-label {
  font-size: 0.65rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--dim); min-width: 5.5rem; flex-shrink: 0;
}
.spec-vs-spec .spec-vs-label { color: var(--accent); }
.spec-vs-flow { display: flex; align-items: center; gap: 0.3rem; flex-wrap: wrap; }
.spec-vs-step {
  background: var(--surface); border: 1px solid var(--border);
  padding: 0.2rem 0.5rem; border-radius: 5px; color: var(--muted);
  font-size: 0.72rem; white-space: nowrap;
}
.spec-vs-arrow { color: var(--dim); font-size: 0.7rem; }
.spec-vs-check { border-color: rgba(117,64,176,0.3); color: var(--text); }
.spec-vs-ok { color: var(--accent-bright); border-color: var(--accent); }
.spec-vs-risk { border: none; background: none; font-size: 0.85rem; padding: 0; }

/* SPEC TREE — wizard timeline compacta */
.spec-tree {
  display: flex; flex-direction: column;
  gap: 0.25rem; margin: 0.5rem 0; padding: 0.3rem 0 0.3rem 1rem;
  position: relative;
}
/* Linea vertical conectora */
.spec-tree::before {
  content: ''; position: absolute;
  left: 0.35rem; top: 0.5rem; bottom: 0.5rem;
  width: 2px; background: var(--border); border-radius: 1px;
}
.spec-tree-node {
  padding: 0.3rem 0.55rem; border-radius: 6px;
  font-size: 0.78rem; color: var(--muted); line-height: 1.4;
  position: relative;
}
/* Dot en la linea */
.spec-tree-node::before {
  content: ''; position: absolute;
  left: -0.78rem; top: 0.55rem;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--dim);
}
.spec-tree-node strong { color: var(--text); font-weight: 600; }
.spec-tree-badge {
  display: inline-block; font-size: 0.55rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em;
  padding: 0.05rem 0.3rem; border-radius: 3px; margin-right: 0.2rem;
  vertical-align: middle;
}
/* Kiro — fondo surface */
.spec-tree-kiro {
  background: var(--surface); border: 1px solid var(--border);
}
.spec-tree-kiro .spec-tree-badge {
  background: var(--bg); color: var(--dim); border: 1px solid var(--border);
}
.spec-tree-kiro::before { background: var(--dim); }
/* Tu — fondo accent, dot accent */
.spec-tree-tu {
  background: var(--accent-dim); border: 1px solid rgba(117,64,176,0.25);
  color: var(--accent-bright);
}
.spec-tree-tu .spec-tree-badge {
  background: var(--accent); color: #fff;
}
.spec-tree-tu::before { background: var(--accent-bright); }
/* Opciones pill */
.spec-tree-opts { display: flex; gap: 0.3rem; margin-top: 0.2rem; flex-wrap: wrap; }
.spec-tree-opt {
  font-size: 0.68rem; padding: 0.1rem 0.4rem; border-radius: 5px;
  border: 1px solid var(--border); color: var(--dim); background: var(--bg);
}
.spec-tree-pick {
  border-color: rgba(117,64,176,0.4); color: var(--accent-bright);
  background: var(--accent-dim); font-weight: 600;
}
/* Nodo final */
.spec-tree-final { border-color: rgba(117,64,176,0.3); }
.spec-tree-final, .spec-tree-final .spec-tree-badge { color: var(--accent-bright); }
.spec-tree-final::before {
  background: var(--accent-bright);
  box-shadow: 0 0 6px rgba(117,64,176,0.5);
}

/* PRESENTER */
.pnote { background: var(--accent-dim); border-left: 3px solid var(--accent); padding: 0.55rem 0.85rem; border-radius: 0 6px 6px 0; margin: 0.7rem 0; font-size: 0.82rem; display: none; line-height: 1.5; }
.pnote p { margin: 0 0 0.3rem; }
.pnote p:last-child { margin-bottom: 0; }
.pnote-lbl { display: block; font-size: 0.58rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent); margin-bottom: 0.2rem; }
.pnote-ask { font-style: italic; color: var(--accent-bright); }
.pnote-time { font-size: 0.7rem; color: var(--dim); margin-top: 0.3rem; }
body.mode-presenter .pnote { display: block; }

/* BOTTOM NAV */
.bottombar {
  display: flex; align-items: center; padding: 0.55rem 1rem;
  border-top: 1px solid var(--border); flex-shrink: 0;
  background: rgba(9,9,10,0.85); backdrop-filter: blur(12px);
  position: relative; z-index: 2;
}
.nav-btn {
  background: rgba(20,20,24,0.6); border: 1px solid var(--border); color: var(--text);
  padding: 0.35rem 0.9rem; border-radius: 6px;
  font-family: 'Inter', sans-serif; font-size: 0.8rem; font-weight: 500;
  cursor: pointer; transition: all 0.15s; min-width: 85px;
}
.nav-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); background: var(--accent-dim); }
.nav-btn:disabled { opacity: 0.35; cursor: default; }
.nav-btn-home { color: var(--muted); border-color: transparent; background: transparent; }
.nav-btn-home:hover { color: var(--accent); border-color: var(--border); background: var(--accent-dim); }
.nav-btn-next {
  background: linear-gradient(135deg, var(--accent) 0%, #5b2d8e 100%);
  color: #fff; border-color: transparent;
  font-weight: 600;
  box-shadow: 0 2px 12px rgba(117,64,176,0.3);
  animation: btnPulseSubtle 3s ease-in-out infinite;
}
@keyframes btnPulseSubtle {
  0%, 100% { box-shadow: 0 2px 12px rgba(117,64,176,0.3); }
  50% { box-shadow: 0 2px 20px rgba(117,64,176,0.45), 0 0 30px rgba(117,64,176,0.1); }
}
.nav-btn-next:hover { background: linear-gradient(135deg, var(--accent-bright) 0%, var(--accent) 100%); border-color: transparent; animation: none; }
.nav-btn-next.finish { background: linear-gradient(135deg, var(--accent-bright) 0%, #5b2d8e 100%); }

/* DOTS with phase separators */
.nav-dots { flex: 1; display: flex; justify-content: center; align-items: center; gap: 0.3rem; }
.nav-dot {
  width: 26px; height: 26px; border-radius: 50%;
  background: transparent; border: none; cursor: pointer;
  transition: all 0.2s; padding: 0; position: relative;
}
.nav-dot::after {
  content: ''; position: absolute;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--dim);
  transition: all 0.2s;
}
.nav-dot.active::after { width: 12px; height: 12px; background: var(--accent-bright); box-shadow: 0 0 8px rgba(117,64,176,0.5); }
.nav-dot.visited::after { background: var(--accent-bright); opacity: 0.6; width: 8px; height: 8px; animation: dotComplete 0.3s ease; }
@keyframes dotComplete { 0% { transform: translate(-50%,-50%) scale(1); } 50% { transform: translate(-50%,-50%) scale(1.6); } 100% { transform: translate(-50%,-50%) scale(1); } }
.nav-dot.dot-locked { cursor: default; }
.nav-dot.dot-locked::after { background: var(--dim); opacity: 0.25; }
.nav-sep { width: 2px; height: 16px; background: var(--accent); opacity: 0.3; border-radius: 1px; margin: 0 0.4rem; }

/* END SCREEN — Victory / Power-Up */
.screen-end {
  align-items: safe center; justify-content: center;
  background:
    radial-gradient(ellipse at 50% 35%, rgba(117,64,176,0.18) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 100%, rgba(84,50,140,0.1) 0%, transparent 40%),
    radial-gradient(ellipse at 30% 60%, rgba(117,64,176,0.06) 0%, transparent 40%),
    var(--bg);
}
.screen-end::before {
  content: '';
  position: fixed;
  width: 120vh; height: 120vh;
  left: 50%; top: 45%;
  transform: translate(-50%, -50%);
  background: conic-gradient(
    from 0deg at 50% 50%,
    transparent 0deg, rgba(117,64,176,0.06) 8deg,
    transparent 16deg, rgba(194,169,223,0.04) 24deg,
    transparent 32deg, rgba(117,64,176,0.06) 40deg,
    transparent 48deg, rgba(194,169,223,0.03) 56deg,
    transparent 64deg, rgba(117,64,176,0.06) 72deg,
    transparent 80deg, rgba(194,169,223,0.04) 88deg,
    transparent 96deg, rgba(117,64,176,0.06) 104deg,
    transparent 112deg, rgba(194,169,223,0.03) 120deg,
    transparent 128deg, rgba(117,64,176,0.06) 136deg,
    transparent 144deg, rgba(194,169,223,0.04) 152deg,
    transparent 160deg, rgba(117,64,176,0.06) 168deg,
    transparent 176deg, rgba(194,169,223,0.03) 184deg,
    transparent 192deg, rgba(117,64,176,0.06) 200deg,
    transparent 208deg, rgba(194,169,223,0.04) 216deg,
    transparent 224deg, rgba(117,64,176,0.06) 232deg,
    transparent 240deg, rgba(194,169,223,0.03) 248deg,
    transparent 256deg, rgba(117,64,176,0.06) 264deg,
    transparent 272deg, rgba(194,169,223,0.04) 280deg,
    transparent 288deg, rgba(117,64,176,0.06) 296deg,
    transparent 304deg, rgba(194,169,223,0.03) 312deg,
    transparent 320deg, rgba(117,64,176,0.06) 328deg,
    transparent 336deg, rgba(194,169,223,0.04) 344deg,
    transparent 360deg
  );
  animation: raysSpin 35s linear infinite;
  pointer-events: none;
}
.screen-end::after {
  content: '';
  position: fixed; inset: 0;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 25%, rgba(117,64,176,0.5) 50%, transparent 50%),
    radial-gradient(1px 1px at 85% 15%, rgba(194,169,223,0.4) 50%, transparent 50%),
    radial-gradient(2px 2px at 30% 75%, rgba(117,64,176,0.35) 50%, transparent 50%),
    radial-gradient(1px 1px at 70% 85%, rgba(194,169,223,0.4) 50%, transparent 50%),
    radial-gradient(1.5px 1.5px at 55% 30%, rgba(117,64,176,0.3) 50%, transparent 50%),
    radial-gradient(1px 1px at 90% 55%, rgba(194,169,223,0.35) 50%, transparent 50%),
    radial-gradient(1.5px 1.5px at 20% 50%, rgba(117,64,176,0.25) 50%, transparent 50%);
  animation: particlesDrift 22s ease-in-out infinite alternate;
  pointer-events: none; z-index: 0;
}

.end-content { text-align: center; padding: 2rem; position: relative; z-index: 1; max-width: 700px; width: 100%; }

/* Ghost — epic entrance */
.end-ghost-wrap {
  position: relative; display: inline-block;
  margin-bottom: 1rem;
}
.end-ghost {
  width: clamp(180px, 25vw, 260px); height: auto;
  will-change: transform, filter;
  animation:
    endGhostIn 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards,
    endGhostPower 4s ease-in-out 1.4s infinite,
    endGhostGlow 3s ease-in-out 1.4s infinite;
  filter:
    drop-shadow(0 0 40px rgba(117,64,176,0.6))
    drop-shadow(0 0 80px rgba(117,64,176,0.3))
    drop-shadow(0 0 120px rgba(117,64,176,0.15));
}
@keyframes endGhostIn {
  0% { opacity: 0; transform: scale(0.3) translateY(40px); filter: drop-shadow(0 0 0 transparent); }
  60% { opacity: 1; transform: scale(1.1) translateY(-10px); }
  100% { opacity: 1; transform: scale(1) translateY(0);
    filter:
      drop-shadow(0 0 40px rgba(117,64,176,0.6))
      drop-shadow(0 0 80px rgba(117,64,176,0.3))
      drop-shadow(0 0 120px rgba(117,64,176,0.15));
  }
}
/* Power-up idle: float + squash-stretch + micro-wiggle */
@keyframes endGhostPower {
  0%   { transform: translateY(0)    scaleX(1)    scaleY(1)    rotate(0deg); }
  15%  { transform: translateY(-14px) scaleX(0.97) scaleY(1.04) rotate(-1.5deg); }
  30%  { transform: translateY(-20px) scaleX(0.95) scaleY(1.06) rotate(0.5deg); }
  50%  { transform: translateY(-16px) scaleX(1.03) scaleY(0.97) rotate(1.5deg); }
  70%  { transform: translateY(-22px) scaleX(0.96) scaleY(1.05) rotate(-0.8deg); }
  85%  { transform: translateY(-10px) scaleX(1.02) scaleY(0.98) rotate(0.3deg); }
  100% { transform: translateY(0)    scaleX(1)    scaleY(1)    rotate(0deg); }
}
/* Glow intensity cycling — aura de poder */
@keyframes endGhostGlow {
  0%, 100% {
    filter:
      drop-shadow(0 0 40px rgba(117,64,176,0.6))
      drop-shadow(0 0 80px rgba(117,64,176,0.3))
      drop-shadow(0 0 120px rgba(117,64,176,0.15));
  }
  50% {
    filter:
      drop-shadow(0 0 60px rgba(117,64,176,0.8))
      drop-shadow(0 0 100px rgba(117,64,176,0.5))
      drop-shadow(0 0 160px rgba(117,64,176,0.25))
      drop-shadow(0 0 200px rgba(194,169,223,0.1));
  }
}

/* Aura pulse behind ghost — inner ring */
.end-ghost-wrap::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 200%; height: 200%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(117,64,176,0.25) 0%, rgba(117,64,176,0.08) 35%, transparent 65%);
  animation: auraPulse 2.5s ease-in-out infinite;
  z-index: -1;
}
/* Outer energy ring */
.end-ghost-wrap::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 280%; height: 280%;
  border-radius: 50%;
  background: radial-gradient(circle, transparent 30%, rgba(117,64,176,0.06) 50%, rgba(194,169,223,0.04) 60%, transparent 75%);
  animation: auraOuter 3.5s ease-in-out infinite;
  z-index: -1;
}
@keyframes auraPulse {
  0%, 100% { transform: translate(-50%, -50%) scale(0.8); opacity: 0.5; }
  50% { transform: translate(-50%, -50%) scale(1.15); opacity: 1; }
}
@keyframes auraOuter {
  0%, 100% { transform: translate(-50%, -50%) scale(0.7); opacity: 0.3; }
  50% { transform: translate(-50%, -50%) scale(1); opacity: 0.7; }
}

/* Stagger entrance for end content */
.end-stagger > * { opacity: 0; transform: translateY(16px); animation: staggerIn 0.6s ease forwards; }
.end-stagger > *:nth-child(1) { animation-delay: 0.2s; }
.end-stagger > *:nth-child(2) { animation-delay: 0.5s; }
.end-stagger > *:nth-child(3) { animation-delay: 0.7s; }
.end-stagger > *:nth-child(4) { animation-delay: 0.9s; }
.end-stagger > *:nth-child(5) { animation-delay: 1.1s; }
.end-stagger > *:nth-child(6) { animation-delay: 1.3s; }
.end-stagger > *:nth-child(7) { animation-delay: 1.5s; }

.end-content h2 {
  font-size: clamp(1.8rem, 4vw, 2.8rem); font-weight: 800; margin-bottom: 0.4rem;
  background: linear-gradient(135deg, #fff 0%, var(--accent-bright) 50%, var(--accent) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 2px 12px rgba(117,64,176,0.4));
  letter-spacing: -0.02em;
}
.end-stats { font-size: 0.95rem; color: var(--accent-bright); margin-bottom: 1.2rem; letter-spacing: 0.03em; }
.end-quote { border: none; font-style: italic; font-size: 1.2rem; color: var(--text); max-width: 460px; margin: 0 auto 2.5rem; line-height: 1.6; opacity: 0.8; }
.end-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.end-btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.75rem 1.8rem; border-radius: 12px;
  font-family: 'Inter', sans-serif; font-weight: 600; font-size: 0.95rem;
  cursor: pointer; border: none; text-decoration: none;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.end-btn i { font-size: 1.05rem; }
.end-btn-primary {
  background: linear-gradient(135deg, var(--accent) 0%, #5b2d8e 100%);
  color: #fff;
  box-shadow: 0 4px 25px rgba(117,64,176,0.35), inset 0 1px 0 rgba(255,255,255,0.15);
  animation: staggerIn 0.6s ease forwards 1.3s, btnPulse 2.5s ease-in-out 1.9s infinite;
  opacity: 0;
}
.end-btn-primary:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 8px 40px rgba(117,64,176,0.5), inset 0 1px 0 rgba(255,255,255,0.2);
}
.end-btn-secondary {
  background: rgba(20,20,24,0.6);
  border: 1px solid var(--border);
  color: var(--accent-bright);
  box-shadow: 0 2px 12px rgba(117,64,176,0.1);
  animation: staggerIn 0.6s ease forwards 1.5s;
  opacity: 0;
}
.end-btn-secondary:hover {
  border-color: var(--accent);
  background: var(--accent-dim);
  color: #fff;
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 4px 20px rgba(117,64,176,0.25);
}
.end-btn-secondary:nth-child(3) { animation-delay: 1.7s; }
.end-btn-disabled { opacity: 0.35; cursor: default; pointer-events: none; }
.end-share {
  display: flex; align-items: center; gap: 0.6rem;
  margin-top: 1.4rem;
  opacity: 0; animation: staggerIn 0.5s ease forwards 2s;
}
.end-share-label {
  font-size: 0.72rem; color: var(--dim); font-weight: 500;
}
.end-share-btn {
  display: flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem;
  border-radius: 50%;
  background: rgba(117,64,176,0.12);
  border: 1px solid rgba(117,64,176,0.25);
  color: var(--accent-bright);
  font-size: 0.85rem;
  text-decoration: none;
  transition: background 0.2s, border-color 0.2s, transform 0.2s;
}
.end-share-btn:hover {
  background: rgba(117,64,176,0.25);
  border-color: rgba(194,169,223,0.5);
  transform: scale(1.1);
}
.end-links {
  display: flex; align-items: center; gap: 0.5rem;
  margin-top: 0.8rem;
  opacity: 0; animation: staggerIn 0.5s ease forwards 2.2s;
}
.end-footer-link {
  display: inline-flex; align-items: center; gap: 0.3rem;
  font-size: 0.78rem; color: var(--dim); text-decoration: none;
  transition: color 0.2s;
}
.end-footer-link:hover { color: var(--accent-bright); }
.end-link-sep { color: var(--dim); font-size: 0.7rem; }

/* ONBOARDING MODAL */
.onboard-overlay { display: none; position: fixed; inset: 0; z-index: 200; background: rgba(0,0,0,0.75); backdrop-filter: blur(6px); align-items: center; justify-content: center; }
.onboard-overlay.open { display: flex; }
.onboard-panel {
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  padding: 1.8rem 2rem; max-width: 440px; width: 90%;
  animation: missionIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.onboard-header { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 1.2rem; }
.onboard-ghost { width: 36px; height: 36px; filter: drop-shadow(0 0 8px rgba(117,64,176,0.4)); }
.onboard-panel h3 {
  font-size: 1.1rem; font-weight: 700;
  background: linear-gradient(135deg, #fff 0%, var(--accent-bright) 70%, var(--accent) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.onboard-steps { display: flex; flex-direction: column; gap: 0.8rem; margin-bottom: 1.2rem; }
.onboard-step { display: flex; align-items: flex-start; gap: 0.7rem; }
.onboard-icon {
  flex-shrink: 0; width: 32px; height: 32px; border-radius: 8px;
  background: var(--accent-dim); border: 1px solid rgba(117,64,176,0.2);
  display: flex; align-items: center; justify-content: center;
  color: var(--accent-bright); font-size: 0.8rem;
}
.onboard-step-title { font-size: 0.85rem; font-weight: 600; color: var(--text); margin-bottom: 0.1rem; }
.onboard-step-desc { font-size: 0.76rem; color: var(--muted); line-height: 1.4; }
.onboard-note {
  font-size: 0.72rem; color: var(--dim); margin-bottom: 1.2rem;
  display: flex; align-items: center; gap: 0.4rem;
}
.onboard-note i { color: var(--accent); font-size: 0.8rem; }
.onboard-note a { color: var(--accent); text-decoration: none; }
.onboard-go {
  width: 100%;
  background: linear-gradient(135deg, var(--accent) 0%, #5b2d8e 100%);
  color: #fff; border: none; border-radius: 10px;
  padding: 0.7rem; font-family: 'Inter', sans-serif; font-size: 0.9rem; font-weight: 600;
  cursor: pointer; transition: all 0.2s;
  box-shadow: 0 4px 20px rgba(117,64,176,0.3);
}
.onboard-go:hover { box-shadow: 0 4px 30px rgba(117,64,176,0.5); transform: translateY(-1px); }

/* RECAP — concept map on end screen */
.recap {
  max-width: 600px; margin: 0 auto 2rem; padding: 1.2rem;
  background: rgba(20,20,24,0.5); border: 1px solid var(--border); border-radius: 12px;
}
.recap-title {
  font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--accent-bright); margin-bottom: 1rem;
  display: flex; align-items: center; gap: 0.4rem; justify-content: center;
}
.recap-title i { font-size: 0.85rem; }
.recap-map { display: flex; align-items: center; justify-content: center; gap: 0.6rem; flex-wrap: wrap; }
.recap-phase { text-align: center; }
.recap-phase-label {
  display: block; font-size: 0.65rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--accent); margin-bottom: 0.4rem;
}
.recap-nodes { display: flex; flex-direction: column; gap: 0.3rem; }
.recap-node {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-size: 0.72rem; color: var(--text); background: var(--accent-dim);
  border: 1px solid rgba(117,64,176,0.15); border-radius: 6px;
  padding: 0.3rem 0.6rem; white-space: nowrap;
}
.recap-node i { color: var(--accent-bright); font-size: 0.7rem; }
.recap-arrow { color: var(--accent); opacity: 0.4; font-size: 0.9rem; }

@media (max-width: 600px) {
  .recap-map { flex-direction: column; }
  .recap-arrow { transform: rotate(90deg); }
  .recap-nodes { flex-direction: row; flex-wrap: wrap; justify-content: center; }
}

/* HELP */
.help-overlay { display: none; position: fixed; inset: 0; z-index: 200; background: rgba(0,0,0,0.7); backdrop-filter: blur(4px); align-items: center; justify-content: center; }
.help-overlay.open { display: flex; }
.help-panel { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 1.5rem; max-width: 460px; width: 90%; position: relative; }
.help-close { position: absolute; top: 0.8rem; right: 1rem; background: none; border: none; color: var(--muted); font-size: 1.5rem; cursor: pointer; }
.help-panel h3 { font-size: 1rem; margin-bottom: 1rem; }
.help-items { display: flex; flex-direction: column; gap: 0.4rem; }
.help-item { background: var(--bg); border: 1px solid var(--border); border-radius: 6px; }
.help-item summary { padding: 0.45rem 0.7rem; font-size: 0.8rem; color: var(--muted); cursor: pointer; }
.help-item p { padding: 0 0.7rem 0.4rem; font-size: 0.76rem; color: var(--dim); }
.help-item .kiro-chat { margin: 0.3rem 0.7rem 0.5rem; }
.help-item .kiro-chat code { font-size: 0.72rem; padding: 0.5rem 0.7rem; }
.help-item a { color: var(--accent); text-decoration: none; }
.help-item code { font-family: 'JetBrains Mono', monospace; font-size: 0.7rem; background: var(--accent-dim); padding: 0.1rem 0.2rem; border-radius: 3px; }
.help-steps { padding: 0.2rem 0.7rem 0.5rem 1.8rem; font-size: 0.76rem; color: var(--dim); line-height: 1.6; }
.help-steps li { margin-bottom: 0.15rem; }

@media (max-width: 600px) {
  .start-left h1 { font-size: 1.8rem; }
  .topbar-phase { font-size: 0.7rem; padding: 0.3rem 0.5rem; }
  .mission h2 { font-size: 1.2rem; }
  .nav-sep { display: none; }
}

/* Focus visible */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.nav-dot:focus-visible { outline-offset: -2px; }
.start-btn:focus-visible { outline-offset: 3px; }
.topbar-home:focus-visible, .topbar-phase:focus-visible { outline-offset: 1px; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}