/* ============================================================
   Build Lab — shared engine styles for the AI Builder type-to-build games
   (Food Boxing, City Cleanup Fly, …). Each game ships only its own
   <canvas> drawing + code-steps; the terminal + layout live here.
   ============================================================ */
:root{
  --bg:#0b1020; --bg2:#121a33; --ink:#eaf0ff; --mute:#8a93c0; --line:rgba(255,255,255,0.12);
  --coral:#ff6b4a; --gold:#ffcf5c; --green:#5ee0a0; --laser:#7cf6ff; --bad:#ff6b8a;
  --accent:var(--coral);   /* per-game header accent — override in the game page if you like */
}
*{box-sizing:border-box; margin:0; padding:0;}
html,body{height:100%;}
body{ background:var(--bg); color:var(--ink); font-family:'Geist',sans-serif; overflow:hidden; }
.lab{ display:flex; height:100vh; gap:0; }
@media (max-width:820px){ .lab{ flex-direction:column; } }

/* ---------- Terminal pane ---------- */
.term{ width:370px; flex:none; background:var(--bg2); border-right:1px solid var(--line);
  display:flex; flex-direction:column; }
@media (max-width:820px){ .term{ width:100%; border-right:0; border-bottom:1px solid var(--line); max-height:46%; } }
.term-head{ padding:14px 16px; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:8px; }
.term-head .ttl{ font-family:'Fraunces',serif; font-style:italic; font-size:18px; }
.term-head .sub{ font-family:'Geist Mono',monospace; font-size:10px; letter-spacing:0.1em; text-transform:uppercase; color:var(--mute); margin-left:auto; }
.term-log{ flex:1; overflow-y:auto; padding:12px 16px; font-family:'Geist Mono',monospace; font-size:12.5px; line-height:1.7; }
.term-log .line{ white-space:pre-wrap; word-break:break-word; }
.term-log .ok{ color:var(--green); }
.term-log .ok::before{ content:"✓ "; }
.term-log .sys{ color:var(--mute); }
.term-log .err{ color:var(--bad); }
.term-log .echo{ color:var(--ink); opacity:0.85; }
.term-log .echo::before{ content:"> "; color:var(--laser); }

.term-task{ padding:12px 16px; border-top:1px solid var(--line); background:rgba(124,246,255,0.05); }
.term-task .note{ font-size:12.5px; color:var(--mute); margin-bottom:8px; }
.term-task .target{ font-family:'Geist Mono',monospace; font-size:14px; background:#0a0f1f; border:1px solid var(--line);
  border-radius:8px; padding:9px 11px; letter-spacing:0.2px; user-select:none; }
.term-task .target.shake{ animation:shake 0.32s; border-color:var(--bad); }
@keyframes shake{ 0%,100%{transform:translateX(0);} 25%{transform:translateX(-4px);} 75%{transform:translateX(4px);} }
.target .todo{ color:#4e9e7a; }   /* the line to type reads green so it's easy to spot */
.target .ok{ color:var(--green); font-weight:600; }   /* already-typed-correct: brighter green */
.target .bad{ color:var(--bad); text-decoration:underline; }
.target .cur{ color:var(--ink); background:rgba(124,246,255,0.25); border-radius:2px; }
.target .locked{ color:var(--gold); font-weight:600; }
.type-timer{ margin-top:8px; font-family:'Geist Mono',monospace; font-size:12px; color:var(--laser); }
.type-timer b{ color:var(--gold); font-weight:600; }
.type-timer .best{ color:var(--mute); }

.term-input-row{ display:flex; align-items:center; gap:8px; padding:12px 16px; border-top:1px solid var(--line); }
.term-input-row .pr{ color:var(--laser); font-family:'Geist Mono',monospace; }
#bl-input{ flex:1; background:#0a0f1f; border:1px solid var(--line); border-radius:8px; color:var(--ink);
  font-family:'Geist Mono',monospace; font-size:14px; padding:9px 11px; outline:none; }
#bl-input:focus{ border-color:var(--laser); }
.btn{ background:var(--accent); color:#fff; border:none; border-radius:8px; padding:9px 14px; cursor:pointer;
  font-family:'Geist',sans-serif; font-size:13px; font-weight:600; }
.btn:hover{ filter:brightness(1.08); }
.btn.ghost{ background:transparent; border:1px solid var(--line); color:var(--mute); }
.term-foot{ padding:10px 16px; border-top:1px solid var(--line); display:flex; gap:8px; align-items:center; }
.term-foot .prog{ font-family:'Geist Mono',monospace; font-size:10px; letter-spacing:0.08em; text-transform:uppercase; color:var(--mute); margin-right:auto; }

/* ---------- Game pane ---------- */
.stage{ flex:1; position:relative; min-width:0; }
canvas#bl-game{ display:block; width:100%; height:100%; }
.overlay{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; pointer-events:none; }
.overlay .card{ background:rgba(10,15,31,0.82); border:1px solid var(--line); border-radius:16px; padding:26px 30px;
  text-align:center; pointer-events:auto; max-width:340px; }
.overlay h2{ font-family:'Fraunces',serif; font-style:italic; font-size:30px; margin-bottom:8px; }
.overlay p{ color:var(--mute); font-size:13.5px; margin-bottom:16px; line-height:1.5; }
.overlay.hidden{ display:none; }
.hint-tip{ position:absolute; left:14px; bottom:12px; font-family:'Geist Mono',monospace; font-size:11px;
  color:var(--mute); background:rgba(10,15,31,0.7); border:1px solid var(--line); border-radius:8px; padding:5px 9px; }

/* ---------- Star Wars–style high-score crawl (shown on game over) ---------- */
.overlay .card.sw{ background:#000; max-width:none; width:100%; height:100%; padding:0; border:none; border-radius:0; overflow:hidden; }
.sw-wrap{ position:absolute; inset:0; overflow:hidden; }
/* score flies UP to the middle (no flip), holds ~2s, then exits to the right */
.sw-crawl{ position:absolute; left:50%; top:135%; width:80%; transform:translate(-50%,-50%);
  text-align:center; animation:sw-rise 3.6s ease forwards; }
@keyframes sw-rise{
  0%   { top:135%; left:50%; }   /* start just below the screen */
  20%  { top:50%;  left:50%; }   /* rise to the vertical middle (~0.7s) */
  75%  { top:50%;  left:50%; }   /* hold in the middle (~2s) */
  100% { top:50%;  left:150%; }  /* slide off to the right (~0.9s) */
}
.sw-crawl h3{ color:#ffcf5c; font-family:'Fraunces',serif; font-style:italic; font-weight:700; font-size:30px;
  line-height:1.18; margin-bottom:22px; text-shadow:0 0 16px rgba(255,180,40,0.5); }
.sw-crawl .row{ color:#ffcf5c; font-family:'Geist',sans-serif; font-weight:700; font-size:21px; line-height:2.0;
  text-shadow:0 0 10px rgba(255,180,40,0.35); }
.sw-crawl .row.you{ color:#fff; text-shadow:0 0 12px rgba(255,255,255,0.55); }
.sw-again{ position:absolute; left:50%; bottom:18px; transform:translateX(-50%); z-index:3; }