/* --- Base reset --- */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: #13141a;
  background: radial-gradient(1200px 800px at 20% -10%, #fff3, transparent),
              radial-gradient(1000px 600px at 120% 10%, #ffd6e7, transparent),
              linear-gradient(180deg, #ffffff, #ffffff);
}

:root{
  --bg-card: #ffffff;
  --ink-soft: #5c5f6a;
  --brand: #ff3b6b;
  --brand-2: #ffd166;
  --ring: 2px solid #00000010;
  --radius: 14px;
}

@media (prefers-color-scheme: light){
  body { background: radial-gradient(1200px 800px at 20% -10%, #00000044, transparent),
                  radial-gradient(1000px 600px at 120% 10%, #2a2335, transparent),
                  linear-gradient(180deg, #121318, #14161d);
         color: #f3f5f7; }
  :root{
    --bg-card: #181b22;
    --ink-soft: #c7cad3;
    --ring: 2px solid #ffffff18;
  }
}

.no-js { padding: 12px 16px; background: #222; color: #fff; text-align:center; }

/* --- Header --- */
.site-header{
  display:flex; align-items:center; justify-content:space-between; gap: 16px;
  padding: 16px clamp(16px, 5vw, 40px);
  position: sticky; top: 0; z-index: 10; backdrop-filter: blur(8px);
  background: color-mix(in oklab, rgb(243, 136, 195) 70%, transparent);
  border-bottom: var(--ring);
}
.logo{ display:flex; align-items:center; gap: 12px; }
.logo svg{ width: 44px; height: 44px; filter: drop-shadow(0 8px 16px #ff3b6b33); }
.wordmark .title{ font: 700 20px/1 "Press Start 2P", system-ui; letter-spacing: 0.5px; }
.wordmark .subtitle{ display:block; font-size: 12px; color: var(--ink-soft); margin-top: 2px; }
.main-nav a{ text-decoration:none; color: inherit; padding: 8px 12px; border-radius: 8px; }
.main-nav a:hover{ background: #00000008; }

/* --- Hero --- */
.hero{ text-align:center; padding: clamp(24px, 6vw, 72px) 16px; }
.hero h1{ font-size: clamp(28px, 5vw, 56px); margin:0 0 12px; letter-spacing:-0.02em; }
.hero .lede{ max-width: 60ch; margin: 0 auto 16px; color: var(--ink-soft); }
.cta{ border: none; background: linear-gradient(135deg, var(--brand), #ff7aa2); color: #fff;
      padding: 12px 16px; border-radius: 999px; font-weight: 700; cursor: pointer;
      box-shadow: 0 10px 24px #ff3b6b44; }
.cta:hover{ transform: translateY(-1px); }

/* --- Panels --- */
.panel{
  background: var(--bg-card); margin: 24px clamp(12px, 4vw, 48px); padding: clamp(16px, 3vw, 32px);
  border-radius: var(--radius); box-shadow: 0 12px 40px #0000000d; border: var(--ring);
}

.planner-controls{ display:grid; grid-template-columns: 1fr auto 1fr auto; gap: 12px; align-items:end; }
.field{ display:flex; flex-direction:column; gap: 6px; font-size: 14px; }
.field select{ padding: 10px 12px; border-radius: 12px; border: var(--ring); background: transparent; color: inherit; }
.swap{ display:grid; place-items:center; width: 40px; height: 40px; border-radius: 12px; border: var(--ring); cursor: pointer; user-select: none; }
.primary{ padding: 10px 14px; border-radius: 12px; border: none; background: #222; color: #fff; }
.ghost{ padding: 8px 12px; border-radius: 12px; border: var(--ring); background: transparent; color: inherit; }

.summary{ margin-top: 12px; color: var(--ink-soft); }

/* --- Timeline --- */
.timeline-track{ display:grid; gap: 16px; margin-block: 12px; }
.step-card{
  display:grid; grid-template-columns: 48px 1fr auto; gap: 12px; align-items:center;
  padding: 12px; border-radius: 12px; border: var(--ring);
  background: linear-gradient(180deg, #ffffff, #fff8) padding-box,
              radial-gradient(120px 60px at 0% 0%, #ffd16644, transparent) border-box;
  position: relative; overflow:hidden;
}
.step-card .badge{ width: 36px; height: 36px; border-radius: 50%; display:grid; place-items:center; font-weight:700; }
.step-card .badge.step{ background: #ff3b6b22; }
.step-card .badge.req{ background: #ffd16655; }
.step-card .badge.caution{ background: #ff9f1c44; }
.step-card .title{ font-weight: 800; }
.step-card .meta{ font-size: 12px; color: var(--ink-soft); }
.step-card .chip{ display:inline-flex; padding: 4px 8px; border-radius: 999px; border: var(--ring); font-size: 12px; gap: 6px; align-items:center; }
.chip.step{ background: #ff3b6b11; }
.chip.requirement{ background: #ffd16633; }
.chip.caution{ background: #ff9f1c22; }

/* --- Conveyor mini-game --- */
.minigame-ui{ display:grid; gap: 16px; grid-template-columns: 1fr; }
.card-pool{ display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; min-height: 120px; }
.card{ padding: 12px; border-radius: 12px; border: var(--ring); background: var(--bg-card); cursor: grab; }
.card:active{ cursor: grabbing; }
.conveyor{
  min-height: 120px; border: 2px dashed #00000033; border-radius: 12px; display:flex; flex-wrap:wrap; gap: 12px; padding: 12px;
  background: repeating-linear-gradient(45deg, #00000005 0 10px, #0000000a 10px 20px);
}
.score{ font-weight: 800; }

/* --- Footer --- */
.site-footer{ display:flex; align-items:center; justify-content:space-between; gap: 12px; padding: 24px clamp(16px, 4vw, 48px); color: var(--ink-soft); }

.introtext {
  font-size: 0.2px;
}

/* --- Confetti --- */
#confetti{ pointer-events:none; position: fixed; inset: 0; overflow: hidden; }
.confetti-piece{
  position:absolute; width: 10px; height: 14px; border-radius: 3px;
  animation: fall 1800ms linear forwards; opacity: 0.9;
}
@keyframes fall{
  0%{ transform: translateY(-10vh) rotate(0deg); }
  100%{ transform: translateY(105vh) rotate(540deg); }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; }
}