/* ===========================================================
   SWIFT QUEST — design tokens
   Paper/notebook puzzle world, Swift-orange accent, playful
   Baloo 2 display + Inter body + JetBrains Mono for code.
=========================================================== */
:root{
  --paper:      #FBF7EE;
  --paper-dot:  #E9E2D2;
  --card:       #FFFFFF;
  --ink:        #22242B;
  --ink-soft:   #5B5A66;
  --indigo:     #3A4CA8;
  --indigo-deep:#2A3680;
  --orange:     #FA7343;
  --orange-deep:#E15E2F;
  --mint:       #2FB380;
  --mint-bg:    #E4F6EE;
  --coral:      #E0483E;
  --coral-bg:   #FCE7E5;
  --gold:       #F2B705;
  --line:       #E7E0D0;

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 26px;

  --shadow-card: 0 2px 0 var(--line), 0 10px 24px -12px rgba(34,36,43,.18);
  --shadow-pop:  0 6px 0 var(--orange-deep), 0 16px 28px -14px rgba(225,94,47,.5);

  --font-display: 'Baloo 2', ui-rounded, system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}
.hidden{ display:none !important; }
button{ font-family: inherit; cursor:pointer; }
code, .mono{ font-family: var(--font-mono); }
a{ color: var(--indigo); }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---------- dotted paper background helper ---------- */
.hero-grid-bg{
  position:absolute; inset:0;
  background-image: radial-gradient(var(--paper-dot) 1.6px, transparent 1.6px);
  background-size: 22px 22px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 20%, black 40%, transparent 90%);
  opacity: .9;
}

/* ===================== TOPBAR ===================== */
.topbar{
  position: sticky; top:0; z-index: 40;
  background: rgba(251,247,238,.85);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.topbar-inner{
  max-width: 720px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  padding: 12px 18px;
}
.brand{
  display:flex; align-items:center; gap:8px;
  background:none; border:none; padding:0;
}
.brand-mark{ font-size:22px; transform: rotate(-8deg); display:inline-block; }
.brand-text{
  font-family: var(--font-display); font-weight:700; font-size:20px; color: var(--indigo-deep);
}
.brand-text em{ font-style:normal; color: var(--orange); }
.stat-pills{ display:flex; gap:8px; }
.pill{
  display:flex; align-items:center; gap:6px;
  background: var(--card); border:1px solid var(--line);
  border-radius: 999px; padding: 6px 12px;
  font-weight:600; font-size: 13px;
}
.pill-streak{ color: var(--orange-deep); }
.pill-xp{ color: var(--indigo-deep); }
.pill-icon{ font-size:14px; }

/* ===================== HERO ===================== */
.hero{
  position:relative; overflow:hidden;
  padding: 64px 20px 40px;
  text-align:center;
}
.hero-inner{ position:relative; max-width: 560px; margin:0 auto; }
.eyebrow{
  font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  font-size:12px; color: var(--orange-deep); margin:0 0 14px;
}
.hero-title{
  font-family: var(--font-display); font-weight:800;
  font-size: clamp(32px, 7vw, 52px); line-height:1.06;
  color: var(--indigo-deep); margin: 0 0 18px;
}
.hero-sub{
  color: var(--ink-soft); font-size:16px; line-height:1.6;
  max-width: 440px; margin: 0 auto 28px;
}
.hero-sub code{
  background: var(--mint-bg); color:#1d7a52; padding:1px 6px; border-radius:6px; font-size:14px;
}
.hero-legend{
  display:flex; gap:18px; justify-content:center; flex-wrap:wrap;
  margin-top: 28px; font-size:13px; color: var(--ink-soft); font-weight:600;
}
.legend-item{ display:flex; align-items:center; gap:7px; }
.legend-swatch{ width:12px; height:12px; border-radius:4px; display:inline-block; }
.swatch-quiz{ background: var(--indigo); }
.swatch-fix{ background: var(--coral); }
.swatch-order{ background: var(--mint); }

/* ===================== BUTTONS ===================== */
.btn{
  border:none; border-radius: var(--radius-md);
  font-family: var(--font-display); font-weight:700; letter-spacing:.01em;
  transition: transform .08s ease, box-shadow .08s ease;
}
.btn:active{ transform: translateY(2px); }
.btn-primary{
  background: var(--orange); color:#fff;
  box-shadow: var(--shadow-pop);
}
.btn-primary:active{ box-shadow: 0 2px 0 var(--orange-deep); }
.btn-primary:disabled{
  background:#E9C7B8; box-shadow:none; cursor:not-allowed;
}
.btn-lg{ font-size:17px; padding: 15px 28px; }
.btn-block{ width:100%; padding:15px; font-size:16px; }

/* ===================== LEVEL MAP ===================== */
.map-screen{ max-width: 560px; margin: 0 auto; padding: 28px 16px 80px; }
.map-heading{ text-align:center; margin-bottom: 12px; }
.map-heading h2{
  font-family: var(--font-display); color: var(--indigo-deep); font-size: 26px; margin:0 0 4px;
}
.map-heading p{ color: var(--ink-soft); margin:0; font-size:14px; }

.map-wrap{ position:relative; margin-top: 20px; }
.map-svg{ position:absolute; top:0; left:0; width:100%; height:100%; z-index:0; }
.map-nodes{ position:relative; z-index:1; }

.level-node{
  position:absolute; transform: translate(-50%, -50%);
  display:flex; flex-direction:column; align-items:center; gap:6px;
  background:none; border:none; padding:0;
}
.node-badge{
  width:64px; height:64px; border-radius: 20px;
  display:flex; align-items:center; justify-content:center;
  font-size:26px; position:relative;
  background: var(--card);
  border: 3px solid var(--line);
  box-shadow: 0 4px 0 var(--line);
  transition: transform .12s ease;
}
.level-node:not(.locked):hover .node-badge{ transform: translateY(-2px); }
.level-node.locked .node-badge{ color:#B9B3A3; }
.level-node.locked{ opacity:.7; cursor:default; }
.level-node.current .node-badge{
  border-color: var(--orange); box-shadow: 0 4px 0 var(--orange-deep);
  background: #FFF3EC;
}
.level-node.done .node-badge{
  border-color: var(--mint); box-shadow: 0 4px 0 #1f9068; background: var(--mint-bg);
}
.node-stars{ display:flex; gap:1px; font-size:11px; height:12px; }
.node-label{
  font-family: var(--font-display); font-weight:600; font-size:12.5px;
  color: var(--ink); text-align:center; max-width: 100px; line-height:1.2;
}
.node-lock{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:20px;
}

/* ===================== GAME SCREEN ===================== */
.game-screen{
  max-width: 560px; margin:0 auto; min-height: calc(100vh - 60px);
  display:flex; flex-direction:column; padding: 14px 16px 20px;
}
.game-topbar{ display:flex; align-items:center; gap:12px; }
.icon-btn{
  background: var(--card); border:1px solid var(--line); border-radius:10px;
  width:36px; height:36px; font-size:16px; color: var(--ink-soft);
}
.progress-dots{ flex:1; display:flex; gap:6px; }
.progress-dots .dot{
  height:8px; flex:1; border-radius:99px; background: var(--line);
}
.progress-dots .dot.filled{ background: var(--orange); }
.progress-dots .dot.current{ background: var(--indigo); }
.hearts{ font-size:15px; letter-spacing:2px; color: var(--coral); min-width: 54px; text-align:right; }

.card-stage{ flex:1; display:flex; align-items:flex-start; justify-content:center; padding-top: 22px; }
.challenge-card{
  background: var(--card); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card); border:1px solid var(--line);
  width:100%; max-width: 520px; padding: 24px 22px 22px;
}
.challenge-kicker{
  display:inline-flex; align-items:center; gap:6px;
  font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
  padding: 4px 10px; border-radius: 999px; margin-bottom: 14px;
}
.kicker-quiz{ background: #EAEDF9; color: var(--indigo); }
.kicker-fix{ background: var(--coral-bg); color: var(--coral); }
.kicker-order{ background: var(--mint-bg); color: #1d7a52; }

.challenge-prompt{
  font-family: var(--font-display); font-size: 19px; font-weight:600;
  color: var(--ink); line-height:1.35; margin: 0 0 16px;
}
.code-block{
  background: #1E2130; color:#E8E6F0; border-radius: 12px;
  padding: 16px 16px; font-family: var(--font-mono); font-size: 13.5px;
  line-height:1.65; overflow-x:auto; margin-bottom: 18px; white-space:pre;
}
.code-block .blank{
  background: rgba(250,115,67,.25); color: var(--orange);
  padding: 1px 8px; border-radius:6px; font-weight:600;
}
.code-block .kw{ color:#F2779A; }
.code-block .str{ color:#9CDC8C; }
.code-block .com{ color:#7A7E96; font-style:italic; }
.code-block .num{ color:#F2C879; }

.options{ display:flex; flex-direction:column; gap:10px; }
.option{
  text-align:left; background: var(--paper); border: 2px solid var(--line);
  border-radius: var(--radius-sm); padding: 13px 16px; font-size: 14.5px;
  font-family: var(--font-mono); color: var(--ink); transition: border-color .1s, background .1s;
}
.option:hover{ border-color: var(--indigo); }
.option.selected{ border-color: var(--indigo); background: #EAEDF9; }
.option.correct{ border-color: var(--mint); background: var(--mint-bg); }
.option.wrong{ border-color: var(--coral); background: var(--coral-bg); }
.option:disabled{ cursor:default; }

/* order / build-the-code challenge */
.order-answer{
  min-height: 56px; border: 2px dashed var(--line); border-radius: var(--radius-sm);
  padding: 10px; display:flex; flex-wrap:wrap; gap:8px; margin-bottom: 14px;
  background: #FAF8F2;
}
.order-answer:empty::before{
  content: "Tap pieces below to build the code…";
  color: #B9B3A3; font-size: 13px; font-family: var(--font-body); padding: 6px 4px;
}
.order-bank{ display:flex; flex-wrap:wrap; gap:8px; }
.token{
  font-family: var(--font-mono); font-size: 13.5px; font-weight:500;
  background: var(--card); border: 2px solid var(--line); border-radius: 9px;
  padding: 9px 12px; color: var(--ink);
}
.token.in-answer{ background: #EAEDF9; border-color: var(--indigo); }
.token.bank-empty{ opacity:.25; border-style:dashed; pointer-events:none; }

/* ===================== FOOTER / FEEDBACK ===================== */
.game-footer{ position:sticky; bottom:0; padding-top: 14px; }
.feedback{
  border-radius: var(--radius-sm); padding: 12px 14px; font-size:14px; font-weight:600;
  margin-bottom: 10px; display:none;
}
.feedback.show{ display:block; }
.feedback.good{ background: var(--mint-bg); color:#1d7a52; }
.feedback.bad{ background: var(--coral-bg); color: var(--coral); }
.feedback .explain{ display:block; font-weight:400; color: var(--ink-soft); margin-top:4px; font-size:13px; }

/* ===================== RESULT SCREEN ===================== */
.result-screen{
  min-height: 100vh; display:flex; align-items:center; justify-content:center; padding: 24px;
}
.result-card{
  background: var(--card); border-radius: var(--radius-lg); border:1px solid var(--line);
  box-shadow: var(--shadow-card); padding: 40px 30px; text-align:center; max-width: 380px; width:100%;
}
.result-emoji{ font-size: 48px; margin-bottom: 8px; }
.result-card h2{ font-family: var(--font-display); color: var(--indigo-deep); margin: 0 0 14px; }
.stars-row{ font-size: 30px; letter-spacing: 6px; margin-bottom: 10px; }
.result-xp{ color: var(--orange-deep); font-weight:700; margin: 0 0 12px; }
.result-sub{ color: var(--ink-soft); font-size:14px; margin: 0 0 26px; }

/* ===================== TOAST ===================== */
.toast{
  position: fixed; top: 14px; left:50%; transform: translateX(-50%) translateY(-60px);
  background: var(--ink); color:#fff; padding: 10px 18px; border-radius: 999px;
  font-size:13px; font-weight:600; z-index: 100; transition: transform .25s ease;
}
.toast.show{ transform: translateX(-50%) translateY(0); }

/* ===================== FOOTER ===================== */
.site-footer{
  text-align:center; padding: 30px 16px 50px; color: var(--ink-soft); font-size: 12.5px;
}

/* ===================== responsive ===================== */
@media (max-width: 420px){
  .hero{ padding: 44px 16px 30px; }
  .challenge-card{ padding: 20px 16px 18px; }
}