:root{
  --bg:#0f0f10;
  --card:#17181a;
  --text:#f2f2f2;
  --muted:#a9a9a9;
  --accent:#d6b16a;  /* warm wood/gold */
  --accent2:#9b6b2e;
  --border:#2a2b2e;
  --good:#4ade80;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: radial-gradient(1200px 600px at 20% 10%, #1b1a16, var(--bg));
  color:var(--text);
}

.wrap{ max-width: 1280px; margin: 0 auto; padding: 18px; }
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:14px 16px; border:1px solid var(--border);
  background: linear-gradient(180deg, #1a1a1a, #141416);
  border-radius:18px; box-shadow: 0 12px 28px rgba(0,0,0,.35);
}
.brand{ display:flex; gap:12px; align-items:center; }
.logo{
  width:42px; height:42px; display:grid; place-items:center;
  border-radius:14px;
  background: linear-gradient(180deg, #2b241a, #1f1a12);
  border:1px solid #3a2f22;
  font-size:20px;
}
.title{ font-size:18px; font-weight:800; letter-spacing:.2px; }
.subtitle{ color:var(--muted); font-size:13px; }

.controls{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.btn{
  background: linear-gradient(180deg, #2c2418, #211a10);
  border:1px solid #3c2f1f;
  color:var(--text);
  padding:10px 12px;
  border-radius:14px;
  cursor:pointer;
  font-weight:700;
}
.btn:hover{ filter: brightness(1.08); }
.btn:disabled{ opacity:.45; cursor:not-allowed; }
.btn.ghost{
  background: transparent;
  border:1px solid var(--border);
}
.toggle{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; border-radius:14px;
  border:1px solid var(--border);
  background: rgba(0,0,0,.2);
}
.toggle input{ width:18px; height:18px; accent-color: var(--accent); }
.toggle .label{ font-weight:700; color:var(--text); }

.grid{
  margin-top:16px;
  display:grid;
  grid-template-columns: 1.55fr 1fr;
  gap:16px;
}
.card{
  background: linear-gradient(180deg, #1a1b1e, #141518);
  border:1px solid var(--border);
  border-radius:18px;
  box-shadow: 0 16px 42px rgba(0,0,0,.35);
  padding:14px;
}
canvas{
  width:100%;
  border-radius:14px;
  border:1px solid #352a1d;
  background: #0b0b0b;
}

.hud{ margin-top:12px; display:grid; gap:12px; }
.hudRow{ display:flex; gap:10px; flex-wrap:wrap; }
.pill{
  padding:8px 10px;
  border:1px solid var(--border);
  border-radius:999px;
  color:var(--text);
  background: rgba(0,0,0,.22);
  font-weight:700;
}
.powerWrap{ display:grid; gap:8px; }
.powerLabel{ display:flex; gap:10px; align-items:baseline; font-weight:800; }
.hint{ color:var(--muted); font-weight:600; }
.powerBar{
  height:14px; border-radius:999px; overflow:hidden;
  border:1px solid #3a2f22;
  background: #0f0f10;
}
.powerFill{
  height:100%;
  width:0%;
  background: linear-gradient(90deg, var(--accent2), var(--accent));
}
.scoreboard{
  border:1px solid var(--border);
  border-radius:16px;
  padding:12px;
  background: rgba(0,0,0,.18);
}
.scoreTitle{ font-weight:900; margin-bottom:8px; }
.frames{
  display:grid;
  grid-template-columns: repeat(10, 1fr);
  gap:8px;
}
.frameBox{
  border:1px solid var(--border);
  border-radius:12px;
  padding:8px;
  min-height:54px;
  background: rgba(0,0,0,.2);
}
.frameNum{ color:var(--muted); font-size:12px; }
.frameRolls{ font-weight:900; margin-top:6px; letter-spacing:.4px; }
.scoreTotal{ margin-top:10px; font-weight:900; }
.tips{ color:var(--muted); font-size:13px; display:grid; gap:4px; }

.sideTitle{ font-weight:900; font-size:16px; margin-bottom:10px; }
.lb{ display:grid; gap:10px; }
.lbRow{ display:flex; gap:10px; }
.input{
  flex:1;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid var(--border);
  background: rgba(0,0,0,.25);
  color: var(--text);
  outline:none;
}
.muted{ color:var(--muted); }
.small{ font-size:12px; }
.sep{ border:none; border-top:1px solid var(--border); margin:8px 0; }

.lbListWrap{
  border:1px solid var(--border);
  border-radius:16px;
  overflow:hidden;
}
.lbHeader, .lbItem{
  display:grid;
  grid-template-columns: 42px 1fr 70px 120px;
  gap:10px;
  padding:10px 12px;
}
.lbHeader{
  background: rgba(0,0,0,.25);
  font-weight:900;
}
.lbList{ max-height: 380px; overflow:auto; }
.lbItem{ border-top:1px solid var(--border); background: rgba(0,0,0,.12); }
.lbActions{ display:flex; gap:10px; align-items:center; }
.footer{ margin-top:14px; text-align:center; }

@media (max-width: 980px){
  .grid{ grid-template-columns: 1fr; }
}