:root{
  --bg:#14171F;
  --bg-alt:#1B1F2A;
  --line:#2C3242;
  --text:#EDEAE2;
  --text-dim:#98A0B0;
  --amber:#E7A33E;
  --teal:#4FBFAE;
  --radius:10px;
  --font-display:'Space Grotesk',sans-serif;
  --font-body:'Inter',sans-serif;
  --font-mono:'JetBrains Mono',monospace;
}
*{box-sizing:border-box;}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--teal);text-decoration:underline;text-underline-offset:2px;}
a:hover{color:var(--amber);}

main{max-width:960px;margin:0 auto;padding:48px 6vw 96px;}

.eyebrow{
  font-family:var(--font-mono);font-size:12px;color:var(--teal);
  letter-spacing:0.08em;text-transform:uppercase;margin:0 0 14px;
}
h1{
  font-family:var(--font-display);font-size:clamp(28px,5vw,44px);
  font-weight:700;margin:0 0 18px;letter-spacing:-0.01em;
}
.lede{font-size:16px;color:var(--text-dim);max-width:62ch;margin:0 0 28px;}

.howto{margin-bottom:20px;}
.howto p{color:var(--text-dim);font-size:14px;max-width:62ch;margin:0 0 8px;}

.game-toolbar{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:20px;
  font-family:var(--font-mono);font-size:13px;
}
.game-toolbar select{
  font-family:var(--font-mono);font-size:13px;color:var(--text);
  background:var(--bg-alt);border:1px solid var(--line);border-radius:8px;padding:8px 12px;
}
.status{
  display:inline-block;font-family:var(--font-mono);font-size:11px;
  color:var(--teal);border:1px solid var(--teal);border-radius:20px;
  padding:3px 10px;letter-spacing:0.03em;
  width:19ch;text-align:center;white-space:nowrap;flex-shrink:0;
}
.play-btn{
  width:52px;height:52px;border-radius:50%;border:none;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  transition:background-color .15s ease, transform .1s ease;
}
.play-btn:active{transform:scale(0.94);}
.play-btn::before{content:'';display:block;}
.play-btn.is-paused{background:#3FA88A;}
.play-btn.is-paused::before{
  width:0;height:0;margin-left:4px;
  border-top:11px solid transparent;border-bottom:11px solid transparent;
  border-left:18px solid var(--bg);
}
.play-btn.is-playing{background:#D64545;}
.play-btn.is-playing::before{
  width:16px;height:16px;background:var(--bg);border-radius:2px;
}

.game-canvas-wrap{
  border:1px solid var(--line);border-radius:var(--radius);
  background:var(--bg-alt);padding:12px;overflow-x:auto;margin-bottom:8px;
}
#lifeCanvas{display:block;max-width:100%;height:auto;image-rendering:pixelated;}

.chips{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 8px;}
.chip{
  font-family:var(--font-mono);font-size:12px;color:var(--text-dim);
  border:1px solid var(--line);border-radius:6px;padding:5px 10px;
}

footer{
  border-top:1px solid var(--line);padding:32px 6vw;
  font-family:var(--font-mono);font-size:12px;color:var(--text-dim);
}