/* ------------------------------------------------------------------
   W.B. Game Lab: shared game-page shell.
   Same tokens as the homepage. Each game keeps its own logic and its own
   canvas drawing code. This file only owns the page around the canvas.
   Relative paths, no build step, works from file:// and from the server.
   ------------------------------------------------------------------ */

@font-face{
  font-family:'Outfit';
  font-style:normal;
  font-weight:300 900;
  font-display:swap;
  src:url('fonts/outfit-latin.woff2') format('woff2');
}

:root{
  --navy-900:#050c1c;
  --navy-800:#081431;
  --navy-700:#0d1e42;
  --blue:#3fa7f0;
  --blue-soft:#7cc8ff;
  --orange:#f7931e;
  --orange-hot:#ffab3d;
  --ink:#eaf1fb;
  --ink-dim:#93a7c4;
  --hairline:rgba(124,200,255,.14);
  --ease:cubic-bezier(.23,1,.32,1);
  --shell:22px;
  --core:16px;
  --bar:64px;
}

*{margin:0;padding:0;box-sizing:border-box;}

body{
  background:var(--navy-900);
  color:var(--ink);
  font-family:'Outfit',system-ui,sans-serif;
  min-height:100dvh;
  display:flex;flex-direction:column;align-items:center;
  padding:16px 16px 32px;
  overscroll-behavior:none;
  -webkit-font-smoothing:antialiased;
}

/* the logo's grid field, same as the homepage */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    linear-gradient(rgba(124,200,255,.045) 1px,transparent 1px) 0 0/64px 64px,
    linear-gradient(90deg,rgba(124,200,255,.045) 1px,transparent 1px) 0 0/64px 64px,
    radial-gradient(120% 80% at 50% 0%,var(--navy-800) 0%,var(--navy-900) 62%);
  -webkit-mask-image:radial-gradient(140% 90% at 50% 0%,#000 40%,transparent 100%);
          mask-image:radial-gradient(140% 90% at 50% 0%,#000 40%,transparent 100%);
}
body > *{position:relative;z-index:1;}

/* ---- top bar: back to the lab, plus the game's name ---- */
.lab-bar{
  width:100%;max-width:900px;
  height:var(--bar);
  flex:0 0 auto;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:0 8px 0 8px;
  margin-bottom:18px;
  border-radius:999px;
  border:1px solid var(--hairline);
  background:rgba(8,20,49,.72);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
          backdrop-filter:blur(14px) saturate(140%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 12px 40px rgba(2,6,20,.6);
}
.lab-back{
  display:flex;align-items:center;gap:10px;
  padding:6px 16px 6px 6px;
  border-radius:999px;
  text-decoration:none;color:var(--ink-dim);
  font-size:.9rem;font-weight:600;
  transition:color 160ms var(--ease),background-color 160ms var(--ease);
}
.lab-back img{width:40px;height:40px;border-radius:10px;object-fit:cover;display:block;}
.lab-back:hover{color:var(--ink);background:rgba(124,200,255,.08);}
.lab-back:active{transform:scale(.98);}
.lab-title{
  padding-right:16px;
  font-size:1rem;font-weight:800;letter-spacing:-.01em;
  white-space:nowrap;
}
.lab-title i{font-style:normal;color:var(--blue);}

/* ---- the frame: outer shell, inner core, canvas inside ---- */
.stage{
  display:flex;flex-direction:column;align-items:center;gap:10px;
  width:100%;max-width:var(--stage-max,880px);
}
.frame{
  width:100%;
  padding:6px;
  border-radius:var(--shell);
  background:rgba(124,200,255,.05);
  border:1px solid var(--hairline);
}
.frame-core{
  border-radius:var(--core);
  overflow:hidden;
  background:var(--navy-800);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
  display:flex;justify-content:center;align-items:center;
}

/* The canvas keeps its internal resolution and is scaled by CSS. Every game
   already maps pointer coords through getBoundingClientRect, so scaling is
   safe. width:100% + height:auto keeps the aspect ratio from the width and
   height attributes; max-height stops tall games overflowing the viewport. */
canvas{
  display:block;
  width:100%;height:auto;
  max-width:100%;
  max-height:calc(100dvh - var(--chrome,180px));
  touch-action:manipulation;
}

/* ---- controls ---- */
.lab-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 22px;
  border-radius:999px;border:none;cursor:pointer;
  background:var(--orange);color:#1b1000;
  font-family:inherit;font-size:.95rem;font-weight:700;
  transition:transform 160ms var(--ease),background-color 160ms var(--ease),box-shadow 200ms var(--ease);
  box-shadow:0 8px 26px rgba(247,147,30,.2);
}
.lab-btn:active{transform:scale(.97);}
.lab-btn.ghost{
  background:rgba(124,200,255,.07);
  color:var(--ink);
  border:1px solid var(--hairline);
  box-shadow:none;
  font-weight:600;
}
@media (hover:hover) and (pointer:fine){
  .lab-btn:hover{background:var(--orange-hot);box-shadow:0 12px 34px rgba(247,147,30,.3);}
  .lab-btn.ghost:hover{background:rgba(124,200,255,.13);border-color:rgba(63,167,240,.45);color:var(--ink);}
}
.lab-btn:focus-visible,.lab-back:focus-visible{outline:2px solid var(--blue-soft);outline-offset:3px;}

/* ---- status strip above / below the canvas ---- */
.lab-strip{
  width:100%;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  font-size:.9rem;color:var(--ink-dim);
  min-height:34px;
}
.lab-strip b{color:var(--ink);font-weight:700;}
.lab-strip .warn{color:var(--orange);font-weight:700;}

/* ---- overlays: glass, scaled from 0.95, never from zero ---- */
.lab-overlay{
  display:none;position:fixed;inset:0;z-index:50;
  align-items:center;justify-content:center;padding:20px;
  background:rgba(3,8,22,.78);
  -webkit-backdrop-filter:blur(16px);
          backdrop-filter:blur(16px);
}
.lab-overlay.show{display:flex;}
.lab-overlay.show .lab-modal{
  opacity:1;transform:none;
  transition:opacity 220ms var(--ease),transform 220ms var(--ease);
}
.lab-modal{
  opacity:0;transform:scale(.95);
  width:100%;max-width:420px;
  padding:6px;
  border-radius:var(--shell);
  background:rgba(124,200,255,.06);
  border:1px solid var(--hairline);
}
.lab-modal-core{
  border-radius:var(--core);
  background:var(--navy-800);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
  padding:34px 30px 26px;
  text-align:center;
}
.lab-modal h2{font-size:1.7rem;font-weight:800;letter-spacing:-.02em;}
.lab-modal p{color:var(--ink-dim);font-size:.95rem;margin-top:10px;line-height:1.55;white-space:pre-line;}
.lab-modal .row{display:flex;gap:10px;justify-content:center;margin-top:24px;flex-wrap:wrap;}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;}
  .lab-modal{opacity:1;transform:none;}
}

/* ---- mobile: the game runs to the edges ---- */
@media (max-width:720px){
  body{padding:10px 10px 24px;}
  .lab-bar{height:56px;margin-bottom:12px;}
  .lab-back{font-size:0;gap:0;padding:6px;}      /* mark only, no wordmark */
  .lab-back img{width:36px;height:36px;}
  .lab-title{font-size:.95rem;padding-right:12px;}
  .stage{max-width:100%;}
  .frame{padding:4px;border-radius:16px;}
  .frame-core{border-radius:12px;}
  .lab-strip{font-size:.82rem;}
}