:root{
  --bg:#0b6b3a;
  --felt:#125e2e;
  --rail:#6b3b2a;
  --text:#fff;
  --accent:#ffd54f;
  --panel: rgba(0,0,0,0.4);
}
*{box-sizing:border-box}
html,body {height:100%}
body{
  margin:0;
  font-family:Inter,Segoe UI,Roboto,Arial;
  background:linear-gradient(180deg,#062c1a 0%, #08361f 100%);
  color:var(--text);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px;
}
.page{
  width:100%;
  max-width:1200px;
  background:transparent;
}
.topbar{
  display:flex;
  gap:12px;
  align-items:center;
  justify-content:space-between;
  margin-bottom:12px;
}
.topbar h1{margin:0;font-size:20px}
.topbar .back{
  color:var(--text);
  text-decoration:none;
  opacity:0.9;
  padding:6px 8px;
  border-radius:6px;
  background: rgba(255,255,255,0.03);
}
.topbar .controls button{
  background:var(--panel);
  color:var(--text);
  border:1px solid rgba(255,255,255,0.06);
  padding:8px 10px;
  border-radius:6px;
  cursor:pointer;
  margin-left:6px;
}

.main{display:flex; gap:12px}
.game-area{position:relative; display:flex; gap:12px}

canvas{
  border-radius:12px;
  background: linear-gradient(180deg, #0d5f2f 0%, #0b5b2b 100%);
  box-shadow: 0 10px 30px rgba(0,0,0,0.6), inset 0 3px 8px rgba(255,255,255,0.02);
  margin-right:12px;
}

/* HUD (right panel) */
.hud{
  width:320px;
  display:flex;
  flex-direction:column;
  gap:12px;
  align-items:stretch;
  justify-content:flex-start;
}
.players{display:flex; flex-direction:column; gap:8px;}
.player{
  display:flex;
  gap:12px;
  align-items:center;
  justify-content:space-between;
  padding:10px 12px;
  background: rgba(0,0,0,0.25);
  border-radius:8px;
  border:1px solid rgba(255,255,255,0.03);
}
.player.active{box-shadow: 0 6px 18px rgba(0,0,0,0.45); transform:translateY(-2px); border:1px solid rgba(255,213,79,0.12)}
.pcolor{font-weight:600}
.ptype{opacity:0.9}
.score{font-weight:700}

.turn-info{
  padding:12px;
  background: rgba(255,255,255,0.02);
  border-radius:8px;
  border:1px solid rgba(255,255,255,0.03);
}
.power-meter{
  width:100%;
  height:14px;
  background:rgba(255,255,255,0.06);
  border-radius:8px;
  margin:8px 0;
  overflow:hidden;
}
#powerFill{
  width:0%;
  height:100%;
  background:linear-gradient(90deg,var(--accent), #ffb74d);
  transition: width 0.08s linear;
}

.message{
  margin-top:6px;
  font-size:13px;
  opacity:0.95;
}

/* legend */
.legend{margin-top:8px; opacity:0.9}
.legend-dot{
  display:inline-block;
  width:12px;
  height:12px;
  border-radius:50%;
  margin-right:6px;
  vertical-align:middle;
  border:1px solid rgba(0,0,0,0.2);
}
.legend-dot.solids{background:linear-gradient(#d32f2f,#c62828)}
.legend-dot.stripes{background:linear-gradient(#1976d2,#1565c0)}

/* footer */
.footer{text-align:center;margin-top:14px;opacity:0.85;font-size:13px}
@media(max-width:1100px){
  .hud{display:none}
  canvas{width:100%; height:auto}
}