:root{
  --bg:#2a0f18; /* slate-900 */
  --fg:#e5e7eb; /* gray-200 */
  --accent:#ee2299; /* cyan-400 */
  --muted:#94a3b8; /* slate-400 */
  --panel:#27111acc;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: DynaPuff, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji";
  background: var(--bg);
  color: var(--fg);
  display:grid; place-items:center;
}
#app{ width:min(1100px, 100%); padding:20px; }

.screen{ display:none; }
.screen.active{ display:block; }

.title{ text-align:center; margin-top:24px; }
.title h1{ font-size: clamp(42px, 6vw, 72px); margin:0 0 8px;}
.title p{ color:var(--muted); margin: 0 0 20px;}

.btn{ cursor:pointer; border:none; padding:12px 18px; border-radius:14px; font-weight:200;
  background: linear-gradient(135deg, var(--accent), #60a5fa); color:black;
  box-shadow: 0 10px 24px #22d3ee33; transition: transform .08s ease;
  font-family: DynaPuff;
}
.btn:active{ transform: translateY(1px) scale(.99); }
.btn.secondary{ background:#5b154c; color:#e5e7eb; border:1px solid #523355; box-shadow:none; }

.tutorial{ max-width:900px; margin:0 auto; display:grid; gap:14px; }
.tutorial-page{ background:#27111a; border:1px solid #351f37; border-radius:16px; padding:18px; min-height:180px; }
.tutorial-nav{ display:flex; justify-content:space-between; align-items:center; }
.dots{ display:flex; gap:8px; }
.dots span{ width:10px; height:10px; border-radius:999px; background:#334155; display:inline-block; }
.dots span.active{ background:#22d3ee; }

.diff-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:16px; }
.diff{ padding:18px; border-radius:18px; border:1px solid #351f37; background:#27111a; display:grid; gap:10px;}
.diff h3{ margin:4px 0 4px;}
.diff p{ margin:0; color:var(--muted); }

#game-wrap{ position:relative; }
#game {
  display: block;
  width: 1100px;
  height: 680px;
  background: #27111a;
  border-radius: 16px;
  border: 1px solid #351f37;
}
#tut-body{
  white-space: pre-line
}
#hud{ position:absolute; inset:0; pointer-events:none; }
#hud .bar{ position:absolute; left:12px; right:12px; top:8px; display:flex; align-items:center; gap:12px; }
#hud .panel{ pointer-events:auto; background:var(--panel); border:1px solid #351f37; padding:8px 12px; border-radius:12px;}
#hud .timer{ margin-left:auto; font-weight:200; letter-spacing:0.5px; }

.footer{ text-align:center; color:#94a3b8; margin:12px 0 8px; font-size:12px; }