/* =====================================================
   The Lab: playground hub + games
   Shares Ilse Enter's portfolio design tokens
   ===================================================== */
:root{
  --bg:#070b14; --bg-2:#0a0f1c; --surface:#0e1422; --surface-2:#131b2c;
  --line:rgba(120,150,210,0.14); --line-2:rgba(120,150,210,0.26);
  --ink:#eef2fb; --ink-soft:#aab4ca; --ink-mute:#6c7891;
  --gold:#f5b94a; --gold-deep:#d99a2b; --green:#34e6a8; --red:#ff5167; --blue:#5b8cff;
  --serif:'Sora', system-ui, sans-serif;
  --sans:'Inter', system-ui, sans-serif;
  --mono:'IBM Plex Mono', ui-monospace, monospace;
  --ease:cubic-bezier(.16,1,.3,1);
}
*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  min-height:100vh;
  background:
    radial-gradient(1200px 700px at 78% -8%, rgba(91,140,255,.10), transparent 60%),
    radial-gradient(900px 600px at 8% 12%, rgba(245,185,74,.07), transparent 55%),
    var(--bg);
  color:var(--ink); font-family:var(--sans); line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
a{ color:inherit; text-decoration:none; }
.grad{ background:linear-gradient(100deg,var(--gold) 10%,#ffe6ad 45%,var(--gold-deep) 90%); -webkit-background-clip:text; background-clip:text; color:transparent; }

.grid-overlay{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(circle at 50% 25%, #000 0%, transparent 75%);
  mask-image:radial-gradient(circle at 50% 25%, #000 0%, transparent 75%);
  opacity:.5;
}

.wrap{ position:relative; z-index:1; max-width:1100px; margin:0 auto; padding:clamp(28px,6vw,72px) clamp(20px,5vw,48px) 80px; }

/* ---- top bar ---- */
.topbar{ display:flex; align-items:center; justify-content:space-between; margin-bottom:clamp(40px,8vh,90px); }
.topbar__brand{ display:flex; align-items:center; gap:11px; font-family:var(--serif); font-weight:700; letter-spacing:.18em; font-size:14px; }
.topbar__brand svg{ color:var(--gold); }
.topbar__back{ font-family:var(--mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft); display:inline-flex; align-items:center; gap:8px; transition:color .3s; }
.topbar__back:hover{ color:var(--gold); }

/* ---- lab hero ---- */
.lab-hero{ max-width:680px; margin-bottom:clamp(40px,7vh,70px); }
.lab-hero__eyebrow{ font-family:var(--mono); font-size:12px; letter-spacing:.28em; text-transform:uppercase; color:var(--gold); }
.lab-hero h1{ font-family:var(--serif); font-weight:800; font-size:clamp(40px,8vw,86px); line-height:.95; letter-spacing:-.03em; margin:14px 0 18px; }
.lab-hero p{ color:var(--ink-soft); font-size:clamp(15px,1.7vw,18px); }

/* ---- experiment grid ---- */
.lab-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:20px; }
.exp{
  position:relative; display:flex; flex-direction:column; border:1px solid var(--line-2); border-radius:18px;
  background:linear-gradient(160deg,var(--surface-2),var(--surface)); overflow:hidden; min-height:230px;
  transition:transform .35s var(--ease), border-color .35s, box-shadow .35s;
}
.exp--live:hover{ transform:translateY(-6px); border-color:var(--gold); box-shadow:0 30px 70px rgba(0,0,0,.5); }
.exp__art{ position:relative; height:130px; overflow:hidden; border-bottom:1px solid var(--line); background:#080c15; }
.exp__art canvas, .exp__art svg{ position:absolute; inset:0; width:100%; height:100%; }
.exp__body{ padding:18px 20px 20px; display:flex; flex-direction:column; gap:6px; flex:1; }
.exp__tag{ font-family:var(--mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); }
.exp__title{ font-family:var(--serif); font-weight:600; font-size:20px; }
.exp__desc{ color:var(--ink-soft); font-size:14px; flex:1; }
.exp__cta{ font-family:var(--mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--gold); display:inline-flex; align-items:center; gap:8px; margin-top:6px; }
.exp__cta svg{ transition:transform .3s var(--ease); }
.exp--live:hover .exp__cta svg{ transform:translateX(4px); }
.exp--soon{ opacity:.55; }
.exp--soon .exp__tag{ color:var(--ink-mute); }

.lab-foot{ margin-top:60px; font-family:var(--mono); font-size:12px; letter-spacing:.1em; color:var(--ink-mute); }

/* =====================================================
   GAME PAGE
   ===================================================== */
.game-shell{ position:relative; z-index:1; max-width:1000px; margin:0 auto; padding:clamp(20px,4vw,40px) clamp(16px,4vw,32px) 70px; }
.game-head{ display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; gap:14px; margin-bottom:22px; }
.game-head h1{ font-family:var(--serif); font-weight:800; font-size:clamp(28px,5vw,46px); letter-spacing:-.02em; line-height:1; }
.game-head h1 small{ display:block; font-family:var(--mono); font-weight:400; font-size:12px; letter-spacing:.28em; text-transform:uppercase; color:var(--gold); margin-bottom:8px; }

.game-frame{
  position:relative; width:100%; aspect-ratio:8 / 5; border:1px solid var(--line-2); border-radius:16px;
  overflow:hidden; background:#05070d; box-shadow:0 40px 110px rgba(0,0,0,.6);
}
#game{ position:absolute; inset:0; width:100%; height:100%; display:block; touch-action:none; }

/* overlays (menus) */
.overlay{
  position:absolute; inset:0; z-index:3; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:24px; gap:18px;
  background:radial-gradient(circle at 50% 40%, rgba(7,11,20,.72), rgba(5,7,13,.94));
  backdrop-filter:blur(3px); transition:opacity .45s var(--ease), visibility .45s;
}
.overlay.hidden{ opacity:0; visibility:hidden; pointer-events:none; }
.overlay__title{ font-family:var(--serif); font-weight:800; font-size:clamp(34px,7vw,64px); letter-spacing:.02em; line-height:1; }
.overlay__title.died{ color:var(--red); text-shadow:0 0 40px rgba(255,81,103,.55); letter-spacing:.06em; }
.overlay__title.win{ color:var(--gold); text-shadow:0 0 40px rgba(245,185,74,.55); }
.overlay__sub{ color:var(--ink-soft); font-size:15px; max-width:440px; }
.overlay__controls{ font-family:var(--mono); font-size:12.5px; color:var(--ink-soft); letter-spacing:.04em; display:grid; gap:7px; margin:4px 0 6px; }
.overlay__controls b{ color:var(--gold); font-weight:500; }
.overlay__row{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }

.btn{
  font-family:var(--mono); font-size:13px; letter-spacing:.1em; text-transform:uppercase; cursor:pointer;
  padding:13px 22px; border-radius:48px; border:1px solid var(--line-2); background:rgba(255,255,255,.02); color:var(--ink);
  transition:transform .25s var(--ease), border-color .25s, background .25s, color .25s;
}
.btn:hover{ transform:translateY(-2px); border-color:var(--gold); color:var(--gold); }
.btn--primary{ background:linear-gradient(100deg,var(--gold),var(--gold-deep)); color:#1a1206; border-color:transparent; font-weight:600; box-shadow:0 0 34px rgba(245,185,74,.35); }
.btn--primary:hover{ color:#1a1206; box-shadow:0 0 50px rgba(245,185,74,.55); }

/* difficulty buttons */
.diffs{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; }
.diff{
  cursor:pointer; text-align:left; width:215px; padding:18px; border-radius:14px;
  border:1px solid var(--line-2); background:var(--bg-2); color:var(--ink);
  transition:transform .25s var(--ease), border-color .25s, background .25s;
}
.diff:hover{ transform:translateY(-4px); border-color:var(--gold); background:rgba(245,185,74,.05); }
.diff__name{ font-family:var(--serif); font-weight:600; font-size:18px; display:flex; align-items:center; gap:9px; }
.diff__name i{ width:9px; height:9px; border-radius:50%; }
.diff--easy .diff__name i{ background:var(--green); box-shadow:0 0 10px var(--green); }
.diff--fair .diff__name i{ background:var(--gold); box-shadow:0 0 10px var(--gold); }
.diff--hard .diff__name i{ background:var(--red); box-shadow:0 0 10px var(--red); }
.diff__desc{ color:var(--ink-soft); font-size:13px; margin-top:8px; }

.game-hint{ margin-top:18px; font-family:var(--mono); font-size:12px; letter-spacing:.06em; color:var(--ink-mute); text-align:center; }
.game-hint b{ color:var(--ink-soft); font-weight:500; }

@media (max-width:600px){
  /* portrait phones: taller frame with the 8:5 game centred inside it (no squishing), so menus fit */
  .game-frame{ aspect-ratio:3 / 4; }
  #game{ inset:auto; left:0; right:0; top:50%; transform:translateY(-50%); width:100%; height:auto; }
  .overlay{ justify-content:safe center; overflow-y:auto; gap:12px; padding:18px; }
  .overlay__title{ font-size:clamp(30px,9vw,46px); }
  #startScreen .overlay__sub{ display:none; }   /* save vertical room; the difficulty cards explain enough */
  .diffs{ gap:10px; }
  .diff{ width:100%; padding:13px 15px; }
  .diff__desc{ font-size:12.5px; margin-top:5px; }
}

/* on-screen touch controls (shown only on touch devices) */
.overlay__touch{ display:none; font-family:var(--mono); font-size:12.5px; letter-spacing:.03em; color:var(--ink-soft); max-width:440px; }
.overlay__touch b{ color:var(--gold); font-weight:500; }
.touch-controls{ display:none; position:absolute; inset:0; z-index:4; pointer-events:none; }
.tc-btn{
  position:absolute; pointer-events:auto; border-radius:50%; border:1px solid var(--line-2);
  background:rgba(18,24,38,.5); color:var(--ink); font-family:var(--mono); font-size:12px; letter-spacing:.05em;
  text-transform:uppercase; user-select:none; -webkit-user-select:none; touch-action:none;
  -webkit-tap-highlight-color:transparent; backdrop-filter:blur(2px); display:grid; place-items:center;
}
.tc-btn:active{ transform:scale(.93); }
.tc-attack{ width:82px; height:82px; right:18px; bottom:18px; font-size:13px; font-weight:600; color:#1a1206;
  background:linear-gradient(100deg,var(--gold),var(--gold-deep)); border-color:transparent; box-shadow:0 0 24px rgba(245,185,74,.4); }
.tc-dodge{ width:60px; height:60px; right:114px; bottom:24px; }
.tc-heal{ width:60px; height:60px; right:40px; bottom:114px; color:var(--green); border-color:rgba(52,230,168,.5); }

.is-touch .kb-controls{ display:none; }
.is-touch .overlay__touch{ display:block; }
.is-touch .touch-controls.active{ display:block; }