:root{
  --bg:#f3f6f8;
  --card:#ffffff;
  --muted:#6b7280;
  --red:#e63946;
  --green:#2ecc71;
  --yellow:#f1c40f;
  --blue:#3498db;
  --cell:44px;
}

*{box-sizing:border-box;font-family:Inter, system-ui, Arial, sans-serif}
body{margin:0;background:var(--bg);color:#111}
.app{max-width:1200px;margin:18px auto;padding:14px}
.app-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.app-header h1{font-size:20px;margin:0}
.controls{display:flex;gap:8px;align-items:center}
.controls select, .controls button{padding:8px;border-radius:8px;border:1px solid rgba(0,0,0,0.06);background:var(--card);cursor:pointer}

.board-area{display:flex;gap:16px}
.board-wrapper{background:linear-gradient(180deg,#fff,#fbfdff);padding:14px;border-radius:12px;box-shadow:0 12px 30px rgba(16,24,40,0.08);border:6px solid transparent}
.board{width: calc(var(--cell) * 15);height: calc(var(--cell) * 15);display:grid;grid-template-columns: repeat(15, var(--cell));grid-template-rows: repeat(15, var(--cell));gap:4px;padding:6px;border-radius:8px;background:linear-gradient(180deg,#e6eef8, #f7fbff);position:relative}
.cell{background:transparent;display:flex;align-items:center;justify-content:center;font-size:12px}

/* professional home blocks */
.home-block{width:100%;height:100%;border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:6px;box-shadow:inset 0 -6px 14px rgba(0,0,0,0.03)}
.home-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;width:100%;}
.home-slot{height:36px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700}
.home-label{font-size:11px;margin-top:6px;color:var(--muted)}

/* color themes */
.home-red{background:linear-gradient(135deg,var(--red),#ff7b87)}
.home-green{background:linear-gradient(135deg,var(--green),#7ff0a3)}
.home-yellow{background:linear-gradient(135deg,var(--yellow),#ffe58a);color:#111}
.home-blue{background:linear-gradient(135deg,var(--blue),#8fbfe8)}

/* path cells */
.path-cell{width:100%;height:100%;border-radius:6px;background:#fff;border:1px solid rgba(0,0,0,0.06);display:flex;align-items:center;justify-content:center}
.path-mark{width:10px;height:10px;border-radius:50%}
.start-cell{box-shadow:0 6px 18px rgba(0,0,0,0.06);}
.center-home{grid-column:6/span:5;grid-row:6/span:5;display:flex;align-items:center;justify-content:center}
.center-inner{width:100%;height:100%;border-radius:8px;background:linear-gradient(180deg,#fff,#f1f5f9);display:flex;align-items:center;justify-content:center;flex-direction:column}
.center-hex{width:60%;height:60%;border-radius:12px;background:linear-gradient(135deg,#fff,#e9f2ff);display:flex;align-items:center;justify-content:center;flex-direction:column;box-shadow:0 10px 24px rgba(16,24,40,0.06)}

/* token */
.token{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;cursor:pointer;box-shadow:0 10px 18px rgba(2,6,23,0.12)}
.token.small{width:24px;height:24px;font-size:12px}

/* sidepanel */
.sidepanel{width:320px}
.indicator{height:46px;border-radius:8px;display:flex;align-items:center;padding:10px;color:#fff;font-weight:700;margin-bottom:12px}
.dice-box{background:var(--card);padding:12px;border-radius:10px;box-shadow:0 8px 20px rgba(2,6,23,0.06)}
.dice{width:70px;height:70px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:28px;font-weight:800;margin-bottom:8px;background:#f3f4f6}
.dice-msg{font-size:13px;color:var(--muted);margin-top:8px}
.players-list{margin-top:12px;display:flex;flex-direction:column;gap:8px}
.player-row{display:flex;align-items:center;gap:8px;padding:8px;border-radius:8px;background:#fff;border:1px solid rgba(0,0,0,0.04)}
.player-color{width:18px;height:18px;border-radius:6px}

/* responsive */
@media(max-width:1000px){.board{transform:scale(.78);transform-origin:top left}.sidepanel{width:220px}}
@media(max-width:700px){.board-area{flex-direction:column}.sidepanel{width:100%}}