/* ============================================================
   FOOD COURT TYCOON — design system
   Warm dark arcade. Dyslexia-friendly body type + spacing.
   ============================================================ */
:root{
  --bg:        #16110f;
  --bg-2:      #1f1815;
  --panel:     #241b17;
  --panel-2:   #2c211b;
  --ink:       #f6ecdf;   /* warm off-white, easier than pure white */
  --ink-dim:   #c7b6a3;
  --line:      #40302700; /* placeholder */
  --border:    #4a352a;
  --taco:      #ff7a1a;
  --soda:      #ff3b6b;
  --mint:      #2ee6a6;
  --neon:      #ffd23f;
  --sky:       #45c2ff;
  --grape:     #b98cff;
  --shadow:    0 8px 0 rgba(0,0,0,.45), 0 18px 40px rgba(0,0,0,.55);
  --radius:    18px;
  font-size: 17px;
}

*{ box-sizing:border-box; }
html{ margin:0; }
body{ margin:0; min-height:100%; }
body{
  background:
    radial-gradient(1100px 600px at 78% -8%, rgba(255,122,26,.16), transparent 60%),
    radial-gradient(900px 520px at 8% 108%, rgba(46,230,166,.10), transparent 60%),
    var(--bg);
  color:var(--ink);
  font-family:"Atkinson Hyperlegible", system-ui, sans-serif;
  line-height:1.7;
  letter-spacing:.2px;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* film grain for depth */
.grain{
  position:fixed; inset:0; pointer-events:none; z-index:1; opacity:.05;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  mix-blend-mode:overlay;
}

.hidden{ display:none !important; }

/* ---------- buttons ---------- */
.btn{
  font-family:"Silkscreen", monospace; font-size:.82rem; font-weight:700;
  letter-spacing:1px; text-transform:uppercase;
  color:#1a120c; background:var(--neon);
  border:3px solid #1a120c; border-radius:12px;
  padding:.7em 1.1em; cursor:pointer;
  box-shadow:0 4px 0 #1a120c; transition:transform .06s ease, box-shadow .06s ease, background .2s;
}
.btn:hover{ transform:translateY(-2px); box-shadow:0 6px 0 #1a120c; }
.btn:active{ transform:translateY(2px); box-shadow:0 1px 0 #1a120c; }
.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--border); box-shadow:0 4px 0 #120c08; }
.btn-ghost:hover{ background:var(--panel-2); }
.btn-huge{ font-size:1.2rem; padding:.9em 1.8em; background:var(--taco); color:#fff; }
.btn:disabled{ opacity:.4; cursor:not-allowed; transform:none; box-shadow:0 4px 0 #1a120c; }

/* ============================================================
   TITLE SCREEN
   ============================================================ */
.title-screen{
  position:relative; z-index:2; min-height:100vh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:2rem; text-align:center; padding:2rem;
}
.title-neon{ line-height:.9; }
.sign-flicker{
  font-family:"Bungee",cursive; font-size:clamp(2rem,7vw,4.2rem);
  color:var(--mint); text-shadow:0 0 18px rgba(46,230,166,.7);
  animation:flicker 4s infinite;
}
.sign-big{
  font-family:"Bungee",cursive; font-size:clamp(3.4rem,14vw,9rem);
  color:var(--taco); text-shadow:0 0 26px rgba(255,122,26,.7), 6px 6px 0 #120c08;
}
.title-sub{ font-size:1.15rem; color:var(--ink-dim); margin-top:1rem; }
.title-foot{ max-width:40ch; color:var(--ink-dim); font-size:.95rem; }
@keyframes flicker{
  0%,19%,21%,55%,57%,100%{ opacity:1; }
  20%,56%{ opacity:.35; }
}

/* ============================================================
   GAME LAYOUT
   ============================================================ */
.game{ position:relative; z-index:2; min-height:100vh; display:flex; flex-direction:column; }

.hud{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.7rem 1.1rem; background:linear-gradient(180deg,var(--panel-2),var(--panel));
  border-bottom:3px solid var(--border); position:sticky; top:0; z-index:10;
}
.hud-logo{ font-family:"Bungee",cursive; font-size:1rem; color:var(--neon); }
.hud-mid{ flex:1; display:flex; justify-content:center; }
.xp-wrap{ display:flex; align-items:center; gap:.6rem; width:min(460px,60vw); }
.xp-label{ font-family:"Silkscreen",monospace; font-size:.7rem; color:var(--mint); white-space:nowrap; }
.xp-bar{ flex:1; height:16px; background:#120c08; border:2px solid var(--border); border-radius:10px; overflow:hidden; }
.xp-fill{ height:100%; width:0%; background:linear-gradient(90deg,var(--mint),var(--neon)); transition:width .5s cubic-bezier(.2,.9,.2,1); }
.xp-num{ font-family:"Silkscreen",monospace; font-size:.7rem; color:var(--ink-dim); white-space:nowrap; }
.coins{ font-family:"Silkscreen",monospace; font-size:.8rem; color:var(--neon); }
.hud-right{ display:flex; align-items:center; gap:.7rem; }

.layout{ flex:1; display:grid; grid-template-columns:260px 1fr; gap:1.2rem; padding:1.2rem; max-width:1200px; margin:0 auto; width:100%; }

/* ---------- level map ---------- */
.level-map{ display:flex; flex-direction:column; gap:.5rem; }
.lvl-item{
  display:flex; align-items:center; gap:.7rem; text-align:left;
  padding:.6rem .7rem; border:2px solid var(--border); border-radius:12px;
  background:var(--panel); color:var(--ink); cursor:pointer; font:inherit;
  transition:transform .08s, border-color .2s, background .2s;
}
.lvl-item:hover{ transform:translateX(3px); border-color:var(--taco); }
.lvl-item.active{ border-color:var(--neon); background:var(--panel-2); box-shadow:inset 0 0 0 1px var(--neon); }
.lvl-item.locked{ opacity:.45; cursor:not-allowed; }
.lvl-item.locked:hover{ transform:none; border-color:var(--border); }
.lvl-badge{
  width:30px; height:30px; flex:none; border-radius:8px; display:grid; place-items:center;
  font-family:"Silkscreen",monospace; font-size:.75rem; background:#120c08; border:2px solid var(--border);
}
.lvl-item.done .lvl-badge{ background:var(--mint); color:#0c1a12; border-color:#0c1a12; }
.lvl-name{ font-size:.9rem; line-height:1.2; }
.lvl-kicker{ display:block; font-family:"Silkscreen",monospace; font-size:.55rem; color:var(--ink-dim); }

/* ---------- stage / page ---------- */
.stage{ display:flex; flex-direction:column; gap:1rem; min-width:0; }
.page{
  background:linear-gradient(180deg,var(--panel),var(--bg-2));
  border:3px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:1.6rem 1.8rem; min-height:60vh;
  animation:pageIn .45s cubic-bezier(.2,.9,.2,1) both;
}
@keyframes pageIn{ from{ opacity:0; transform:translateY(14px) scale(.99); } to{ opacity:1; transform:none; } }

.page .kicker{ font-family:"Silkscreen",monospace; font-size:.7rem; letter-spacing:1px; color:var(--taco); }
.page h1{ font-family:"Bungee",cursive; font-size:clamp(1.6rem,3.4vw,2.4rem); margin:.2rem 0 .1rem; line-height:1.05; color:var(--ink); }
.page h2{ font-family:"Bungee",cursive; font-size:1.1rem; color:var(--neon); margin:1.4rem 0 .4rem; }
.page p{ margin:.7rem 0; max-width:64ch; }
.page strong{ color:var(--neon); }
.analogy{
  border-left:5px solid var(--mint); background:rgba(46,230,166,.08);
  padding:.7rem 1rem; border-radius:0 10px 10px 0; margin:1rem 0; font-style:italic;
}
.analogy::before{ content:"🍟 ANALOGY  "; font-family:"Silkscreen",monospace; font-size:.6rem; font-style:normal; color:var(--mint); letter-spacing:1px; }

/* visual holder */
.visual{ margin:1.2rem 0; display:flex; justify-content:center; }
.visual svg{ max-width:100%; height:auto; filter:drop-shadow(0 10px 22px rgba(0,0,0,.4)); }

/* two-column key points */
.keys{ display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:.7rem; margin:1rem 0; }
.key{ background:var(--panel-2); border:2px solid var(--border); border-radius:12px; padding:.8rem .9rem; }
.key b{ display:block; color:var(--neon); font-family:"Silkscreen",monospace; font-size:.7rem; margin-bottom:.3rem; }

/* ---------- quick check ---------- */
.quiz{ margin-top:1.6rem; border-top:2px dashed var(--border); padding-top:1.2rem; }
.quiz .q{ font-weight:700; margin-bottom:.6rem; }
.opt{
  display:block; width:100%; text-align:left; margin:.4rem 0; padding:.7rem .9rem;
  background:var(--panel-2); color:var(--ink); border:2px solid var(--border);
  border-radius:12px; cursor:pointer; font:inherit; transition:border-color .15s, background .15s;
}
.opt:hover{ border-color:var(--sky); }
.opt.correct{ border-color:var(--mint); background:rgba(46,230,166,.15); }
.opt.wrong{ border-color:var(--soda); background:rgba(255,59,107,.14); }
.explain{ margin-top:.7rem; padding:.7rem .9rem; border-radius:10px; background:rgba(69,194,255,.10); border:2px solid rgba(69,194,255,.3); display:none; }
.explain.show{ display:block; animation:pageIn .3s both; }

/* ---------- interactive labs ---------- */
.lab{ margin:1.2rem 0; background:#120c08; border:2px solid var(--border); border-radius:14px; padding:1rem; }
.lab-title{ font-family:"Silkscreen",monospace; font-size:.7rem; color:var(--sky); margin-bottom:.7rem; }
.lab-controls{ display:flex; align-items:center; gap:1rem; flex-wrap:wrap; margin-bottom:.8rem; }
.lab-controls input[type=range]{ accent-color:var(--taco); width:200px; }
.stalls{ display:flex; gap:.5rem; flex-wrap:wrap; min-height:64px; align-items:flex-end; }
.stall{ width:52px; text-align:center; animation:pop .3s both; }
.stall .roof{ height:14px; background:var(--taco); border-radius:6px 6px 0 0; }
.stall .body{ height:40px; background:var(--panel-2); border:2px solid var(--border); border-top:none; border-radius:0 0 6px 6px; display:grid; place-items:center; font-size:1.3rem; }
@keyframes pop{ from{ transform:scale(0) translateY(10px); opacity:0; } to{ transform:none; opacity:1; } }
.metric{ font-family:"Silkscreen",monospace; font-size:.72rem; }
.metric b{ color:var(--neon); }
.bad{ color:var(--soda) !important; }
.good{ color:var(--mint) !important; }

/* queue lab */
.rail{ display:flex; gap:4px; align-items:center; min-height:34px; padding:.3rem; background:var(--panel); border:2px solid var(--border); border-radius:10px; overflow:hidden; }
.ticket{ width:16px; height:22px; background:var(--neon); border-radius:3px; flex:none; animation:pop .2s both; }

/* breaker lab */
.breaker{ display:flex; gap:.6rem; align-items:center; flex-wrap:wrap; }
.pipe{ padding:.5rem .8rem; border-radius:10px; border:2px solid var(--border); font-family:"Silkscreen",monospace; font-size:.7rem; }
.pipe.up{ border-color:var(--mint); color:var(--mint); }
.pipe.down{ border-color:var(--soda); color:var(--soda); }
.pipe.open{ border-color:var(--neon); color:var(--neon); }

/* drag lab */
.dishes,.dropzones{ display:flex; gap:.6rem; flex-wrap:wrap; margin:.5rem 0; }
.dish{ padding:.5rem .8rem; background:var(--panel-2); border:2px solid var(--border); border-radius:10px; cursor:grab; font-size:1.1rem; }
.dish.dragging{ opacity:.4; }
.zone{ min-width:80px; min-height:56px; padding:.4rem; border:2px dashed var(--border); border-radius:10px; text-align:center; font-size:.75rem; color:var(--ink-dim); }
.zone.over{ border-color:var(--neon); background:rgba(255,210,63,.08); }
.zone.filled{ border-style:solid; border-color:var(--mint); }

/* stage footer */
.stage-foot{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:0 .3rem 1rem; }
.dots{ display:flex; gap:.4rem; }
.dot{ width:9px; height:9px; border-radius:50%; background:var(--border); }
.dot.on{ background:var(--neon); }
.dot.done{ background:var(--mint); }

/* toast */
.toast{
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(20px);
  z-index:50; background:var(--mint); color:#0c1a12; font-family:"Silkscreen",monospace;
  font-size:.75rem; padding:.7rem 1.1rem; border-radius:12px; border:3px solid #0c1a12;
  box-shadow:0 6px 0 #0c1a12; opacity:0; transition:opacity .25s, transform .25s;
}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

/* mobile */
@media (max-width:820px){
  .layout{ grid-template-columns:1fr; }
  .level-map{ flex-direction:row; overflow-x:auto; padding-bottom:.4rem; }
  .lvl-item{ flex:none; }
  .lvl-name{ display:none; }
  .hud-mid{ display:none; }
}