:root{
  --bg:#0b1220; --panel:#0f1724; --accent:#2dd4bf; --muted:#94a3b8;
}
*{box-sizing:border-box}
html,body,#app{height:100%;}
body{margin:0;font-family:Inter,system-ui,Arial;background:linear-gradient(180deg,#071126 0%,#0b1220 100%);color:#e6eef8}
.container{max-width:1100px;margin:20px auto;padding:16px}
header{display:flex;align-items:center;justify-content:space-between}
h1{margin:0}
main{display:flex;gap:18px;margin-top:12px}
.left{flex:1}
.right{width:220px}
.menu{display:flex;flex-direction:column;gap:12px;background:var(--panel);padding:16px;border-radius:8px}
.menu button{padding:10px 14px;border-radius:6px;border:0;background:var(--accent);color:#012;cursor:pointer}
.game-area{display:flex;flex-direction:column;gap:12px}
.status{display:flex;gap:12px}
.board{width:320px;height:640px;background:#061022;border-radius:8px;padding:8px;position:relative;box-shadow:0 6px 20px rgba(0,0,0,.6)}
.row{display:flex;flex:1}
.cell{width:100%;height:100%;flex:1;margin:2px;background:rgba(255,255,255,0.02);border-radius:4px}
.controls{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.controls button{padding:8px 10px;border-radius:6px;border:0;background:#1f2937;color:#fff}
.overlay{position:absolute;inset:0;background:rgba(2,6,23,0.7);display:flex;justify-content:center;align-items:center;flex-direction:column;font-size:24px}
.next{background:var(--panel);padding:8px;border-radius:6px;width:160px;height:100px;display:flex;align-items:center;justify-content:center}
.next-row{display:flex}
.next-cell{width:20px;height:20px;margin:2px;background:rgba(255,255,255,0.02);border-radius:3px}
.controls-legend{margin-top:18px;background:var(--panel);padding:8px;border-radius:6px}
footer{margin-top:12px;color:var(--muted)}

/* Responsive */
@media (max-width:900px){
  main{flex-direction:column}
  .board{width:260px;height:520px}
  .right{width:100%}
}

/* Make the board grid cells square using JS-less approach */
.board .row{height:calc((100% - (19*4px)) / 20)}
.board .cell{flex-basis:0}

/* allow game to be full width on tiny screens */
@media (max-width:420px){
  .board{width:92vw;height:184vw}
}