*{box-sizing:border-box}
:root{--bg:#0b132b;--panel:#1c2541;--accent:#5bc0be;--text:#e0e0e0;--white:#f0f0f0;--black:#111;--wood1:#b98447;--wood2:#8e5f2c}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial}
.container{max-width:1100px;margin:0 auto;padding:16px}
.topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.badge{background:var(--panel);padding:6px 10px;border-radius:999px;margin-left:6px;border:1px solid #2f3b63}
.toolbar{display:flex;gap:8px;align-items:center;margin:8px 0;flex-wrap:wrap}
.toolbar input{background:#0f1a3a;border:1px solid #2f3b63;border-radius:8px;padding:8px 10px;color:var(--text);min-width:200px}
.toolbar button{background:var(--accent);color:#081229;border:none;padding:8px 12px;border-radius:10px;font-weight:700;cursor:pointer}
.toolbar .muted{opacity:.7}

/* Board layout using grid: 14 columns (6 + bar + 6), 2 rows */
#boardWrapper{display:flex;justify-content:center;align-items:center}
.board-grid{
  width:min(95vw,1000px);
  aspect-ratio:2/1;
  background:#1a2752;
  border-radius:12px;
  padding:10px;
  box-shadow:0 10px 30px rgba(0,0,0,.4);
  display:grid;
  grid-template-columns: repeat(6,1fr) 5% repeat(6,1fr);
  grid-template-rows: 1fr 1fr;
  gap:6px 6px;
  position:relative;
}
.triangle{background:linear-gradient(to top, var(--wood1), var(--wood2));border-radius:6px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding:2px;overflow:hidden}
.triangle.top{transform:scaleY(-1);}
.triangle.selected{box-shadow:0 0 0 3px var(--accent) inset}
.checker{width:28px;height:28px;border-radius:999px;margin:2px;border:2px solid rgba(255,255,255,.25)}
.checker.white{background:var(--white);border-color:rgba(255,255,255,.7)}
.checker.black{background:var(--black);border-color:rgba(0,0,0,.7)}

/* Bar is a grid cell in the middle column spanning both rows */
.bar-col{
  grid-column:7;
  grid-row:1 / span 2;
  background:#162047;
  border-radius:8px;
  display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:6px
}
.bar-stack{display:flex;flex-direction:column;align-items:center;gap:4px}

.controls{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:12px}
button#rollButton{background:var(--accent);color:#081229;border:none;padding:10px 14px;border-radius:10px;font-weight:700;cursor:pointer}
button#rollButton:disabled{opacity:.5;cursor:not-allowed}
button.ghost{background:transparent;border:1px solid #2f3b63;color:var(--text);padding:10px 14px;border-radius:10px;cursor:pointer}
.dice{min-width:100px;text-align:center;padding:8px 10px;background:var(--panel);border-radius:8px;border:1px solid #2f3b63}
.help{opacity:.7;font-size:.9rem}

/* Responsive */
@media (max-width:700px){.checker{width:22px;height:22px}.board-grid{gap:4px;aspect-ratio:1.8/1}}
@media (orientation:portrait){.board-grid{width:95vw;aspect-ratio:1/1.6}}