:root{
  --bg:#0e0f13;
  --card:#161821;
  --text:#e9ecf1;
  --muted:#9aa3b2;
  --border:#232637;
  --accent:#6ae3ff;
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial, 'Apple Color Emoji', 'Segoe UI Emoji';
  color:var(--text);
  background: radial-gradient(1000px 600px at 50% -200px, #1d2030 0%, var(--bg) 65%);
  min-height:100vh;
  display:flex;
  flex-direction:column;
  gap:16px;
}
.site-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 12px; max-width:1100px; width:100%; margin:0 auto;
}
.site-header h1{margin:0; font-size:28px;}
.credits{ color:#c7ffe8; font-weight:700; text-shadow:0 0 6px rgba(22,255,169,.35) }
.site-footer{ text-align:center; padding:16px 12px; color:var(--muted) }
.layout{
  width:100%;
  max-width:1100px;
  margin:0 auto;
  padding:0 12px 24px;
  display:grid;
  grid-template-columns: 340px 1fr;
  gap:16px;
}
@media (max-width: 900px){
  .layout{ grid-template-columns: 1fr; }
}
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:16px;
  padding:16px;
  box-shadow: 0 20px 30px rgba(0,0,0,0.25);
}
.controls h2{margin-top:0}
.control-row{
  display:grid;
  grid-template-columns: 160px 1fr 48px;
  align-items:center;
  gap:8px;
  padding:6px 0;
}
.control-row label{color:var(--muted)}
.button-row{display:flex; flex-wrap:wrap; gap:8px; margin-top:8px;}
button{
  appearance:none; border:1px solid var(--border); background:#1b1e2b; color:#fff;
  padding:10px 14px; border-radius:12px; cursor:pointer; font-weight:600;
  transition:transform .06s ease, background .2s;
}
button:hover{ background:#202437; transform:translateY(-1px) }
.hint{ color:var(--muted); font-size:13px; margin-top:10px }
.game{display:flex; flex-direction:column; gap:12px; align-items:center}
#game-wrap{
  position:relative;
  width: 100%;
  max-width: 600px;
  margin:0 auto;
}
canvas{
  border:1px solid var(--border);
  background: #090a10;
  border-radius:12px;
  display:block;
  width:100%;
  height:auto;
}
#plinkoCanvas{ position: relative; z-index: 1; }
#fxCanvas{
  position:absolute; inset:0; z-index: 2; background: transparent !important; pointer-events: none;
}
#winText{
  position:absolute; left:50%; top:32%; transform:translate(-50%,-50%);
  font-weight:900; font-size:34px; color:#fff; text-shadow:0 0 16px rgba(255,255,255,.6);
  opacity:0; pointer-events:none;
  transition: opacity .15s ease;
  z-index:3;
}
#bin-labels{
  position:absolute; left:0; right:0; bottom:10px; z-index:4;
  display:grid; grid-template-columns: repeat(17, 1fr);
  gap:0; padding:0; text-align:center;
  pointer-events:none; user-select:none; font-weight:700; font-size:12px;
  color:#c7ffe8; text-shadow:0 0 6px rgba(22,255,169,.45);
}
#bin-labels > div{ justify-self:center; }
.stats-grid{
  display:grid; grid-template-columns: repeat(4, 1fr); gap:12px; width:100%; max-width:600px;
}
.stat{ background:#121523; border:1px solid var(--border); border-radius:12px; padding:10px 12px; text-align:center }
.label{ color:var(--muted); font-size:12px; }
.value{ font-size:18px; font-weight:700; color:#fff }