:root{
  --board-size: min(92vmin,680px);
  --cell-size: calc(var(--board-size) / 9);
}
*{box-sizing:border-box}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,'Noto Sans',sans-serif;margin:0;background:#f7f7f9;color:#222}
.app{max-width:1100px;margin:16px auto;padding:12px}
header{display:flex;align-items:center;justify-content:space-between}
.controls{display:flex;gap:12px;align-items:center}
.orientation{display:flex;gap:6px;align-items:center}
#boardWrap{display:flex;justify-content:center;margin:18px 0}
.cell{position:absolute;display:flex;align-items:center;justify-content:center;overflow:hidden}
#board{width:var(--board-size);height:var(--board-size);position:relative;background:#f0d9b5;border:8px solid #8b5a2b;border-radius:8px}
/* ensure width/height refer to board content area so JS can set exact inner pixels */
#board{box-sizing:content-box}
/* grid lines */
.cell{border:1px solid rgba(0,0,0,0.06);background-clip:padding-box}
.cell.highlight{background:rgba(0,128,255,0.12);cursor:pointer}
.cell.highlight.primary{background:rgba(0,128,255,0.18)}
.cell.highlight.secondary{background:rgba(160,160,160,0.08)}

/* turn indicator */
.turn-pill{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:18px;font-weight:600}
.turn-pill .dot{width:14px;height:14px;border-radius:50%;box-shadow:0 1px 2px rgba(0,0,0,.2)}
.turn-p1{background:#fff;border:1px solid #ccc;color:#111}
.turn-p1 .dot{background:#fff}
.turn-p2{background:#333;color:#fff}
.turn-p2 .dot{background:#333}
.cell:hover{background:rgba(255,255,255,0.06)}
.pawn{width:36%;height:36%;border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,.3);position:static;z-index:30}
.pawn.p1{background:#fff}
.pawn.p2{background:#333}
.wall-slot{position:absolute;opacity:0;z-index:20;pointer-events:auto}
.wall{position:absolute;background:#444;border-radius:3px}
.wall.h{height:var(--wall-thickness);width:calc(var(--cell-size) * 2);}
.wall.v{width:var(--wall-thickness);height:calc(var(--cell-size) * 2);}
.wall-preview{position:absolute;background:rgba(68,68,68,0.45);border-radius:3px;pointer-events:none}
.wall-preview.h{height:var(--wall-thickness);width:calc(var(--cell-size) * 2);}
.wall-preview.v{width:var(--wall-thickness);height:calc(var(--cell-size) * 2);}
#board.flipped{transform:rotate(180deg);}
.pawn{z-index:70;pointer-events:auto}
.move-dot{width:18%;height:18%;border-radius:50%;background:rgba(0,128,255,0.95);box-shadow:0 1px 4px rgba(0,0,0,.3);position:absolute;z-index:60;transform:translate(-50%,-50%)}
.cell.touch-friendly{padding:6px}
.hud{position:absolute;right:8px;top:8px;background:rgba(255,255,255,0.9);padding:6px;border-radius:6px}
.hint{font-size:14px;color:#555}
footer{margin-top:12px;font-size:13px;color:#666}

/* Side panel / log */
#side{width:260px;margin-left:12px}
#side .hint{margin-bottom:8px}
#log{background:#fff;padding:8px;border-radius:6px;border:1px solid #e6e6e6}
#log h2{margin:0 0 8px 0;font-size:14px}
#moves{list-style:none;margin:0;padding:0;max-height:48vh;overflow:auto}
#moves li{padding:6px 8px;border-bottom:1px solid #f0f0f0;font-size:13px}

@media (max-width:900px){
  #side{display:none}
  #boardWrap{margin:8px}
}

@media (max-width:600px){
  :root{--board-size:88vmin}
  header h1{font-size:18px}
}

/* Force horizontal text on small screens to avoid vertical rendering */
@media (max-width:600px){
  html, body, .app { writing-mode: horizontal-tb !important; }
}

/* Mobile: ensure wall dimensions equal two cells and are touch friendly */
@media (max-width:600px){
  .wall.h, .wall-preview.h { width: calc(var(--cell-size) * 2) !important; }
  .wall.v, .wall-preview.v { height: calc(var(--cell-size) * 2) !important; }
  /* increase wall thickness proportionally on small screens */
  :root { --wall-thickness: calc(var(--cell-size) * 0.14); }
  /* make wall-slot visible and larger for touch */
  .wall-slot{opacity:0.8}
}

@media (pointer:coarse){
  .cell{border-width:1px}
  .pawn{width:46%;height:46%}
  .wall-slot{opacity:0.0001}
}

/* Game over overlay */
.game-over-overlay{position:absolute;left:0;top:0;right:0;bottom:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:rgba(0,0,0,0.45);z-index:999}
.game-over-overlay .game-over-msg{background:#fff;padding:12px 18px;border-radius:8px;font-weight:700;margin-bottom:10px}
.game-over-overlay .next-game-btn{padding:8px 12px;border-radius:6px;border:none;background:#0b79f7;color:#fff;font-weight:600;cursor:pointer}

/* Rules modal */
.rules-overlay{position:fixed;left:0;top:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.45);z-index:1200}
.rules-box{background:#fff;padding:18px;border-radius:8px;max-width:640px;width:92%;max-height:80vh;overflow:auto;box-shadow:0 8px 30px rgba(0,0,0,0.4)}
.rules-box h2{margin:0 0 8px 0}
.rules-close{position:sticky;display:inline-block;margin-top:12px;padding:8px 10px;border-radius:6px;border:none;background:#777;color:#fff;cursor:pointer}
.rules-content p{margin:8px 0;color:#222;line-height:1.4}