:root{
  --bg:#0b0f14; --panel:#111823; --ink:#e9eef7; --line:#1b2532;
  --gold:#d9b06a; --gold2:#b48a3c;
}

*{box-sizing:border-box}
body{margin:0;background:#0b0f14;color:var(--ink);font:14px/1.4 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}
header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid var(--line);background:#0f141b}
header h1{margin:0;font-size:18px}
.row{display:flex;gap:8px;flex-wrap:wrap}
header input, header select{background:#0c1218;color:var(--ink);border:1px solid var(--line);padding:8px 10px;border-radius:10px}
header button{background:#1a2130;color:#e9eef8;border:1px solid #2b3446;border-radius:10px;padding:8px 12px;cursor:pointer}

main{display:grid;grid-template-columns:minmax(280px,1fr) 360px;gap:16px;padding:16px;max-width:1600px;margin:0 auto}

#board{
  background:#0c1118;border:6px solid #000;border-radius:10px;
  box-shadow:0 0 0 1px rgba(255,255,255,.04) inset,0 0 0 3px rgba(217,176,106,.15) inset,0 18px 60px rgba(0,0,0,.5);
  width:100%;aspect-ratio:1/1;position:relative;overflow:hidden;
  display:grid;grid-template-columns:repeat(11,1fr);grid-template-rows:repeat(11,1fr);
}
#board::before{
  content:"";position:absolute;left:12%;right:12%;top:12%;bottom:12%;
  opacity:.12;filter:drop-shadow(0 2px 10px rgba(217,176,106,.2));
  background:
    linear-gradient(160deg, rgba(217,176,106,.15), rgba(180,138,60,.12)),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 400'><defs><linearGradient id='g' x1='0' x2='0' y1='0' y2='1'><stop offset='0' stop-color='%23d9b06a' stop-opacity='0.95'/><stop offset='1' stop-color='%23b48a3c' stop-opacity='0.95'/></linearGradient></defs><g fill='url(%23g)'><rect x='0' y='260' width='1200' height='140' opacity='0.15'/><rect x='30' y='180' width='60' height='220' opacity='0.18'/><rect x='110' y='210' width='80' height='190' opacity='0.22'/><rect x='220' y='150' width='70' height='250' opacity='0.25'/><rect x='300' y='200' width='50' height='200' opacity='0.22'/><rect x='380' y='120' width='90' height='280' opacity='0.28'/><rect x='500' y='170' width='70' height='230' opacity='0.26'/><rect x='580' y='90' width='100' height='310' opacity='0.30'/><rect x='710' y='190' width='60' height='210' opacity='0.24'/><rect x='790' y='140' width='80' height='260' opacity='0.27'/><rect x='900' y='200' width='55' height='200' opacity='0.22'/><rect x='980' y='160' width='75' height='240' opacity='0.25'/><rect x='1070' y='210' width='60' height='190' opacity='0.22'/></g></svg>");
  background-size:cover;background-position:center;border-radius:12px;pointer-events:none;
}

.tile{position:relative;background:linear-gradient(180deg,#0f141d,#0b1017);border:1px solid #1a2331;padding:6px;font-size:11px;color:#deebff}
.band{height:8px;border-radius:3px;margin-bottom:6px;box-shadow:0 1px 0 rgba(255,255,255,.08) inset,0 1px 6px rgba(0,0,0,.35)}
.name{display:block;font-size:11px;line-height:1.15}
.tok{position:absolute;left:4px;top:4px;width:20px;height:20px;border-radius:50%;border:1px solid #2b3446;background:#fff}

aside .panel{background:#0f141b;border:1px solid var(--line);border-radius:14px;padding:12px;margin-bottom:12px;box-shadow:0 6px 16px rgba(0,0,0,.25)}
.panel h3{margin:0 0 8px 0}
.panel .row button{background:#1a2130;border:1px solid #2b3446;border-radius:10px;padding:8px 12px;color:#e9eef8}
.log{height:160px;overflow:auto;background:#0c1218;border:1px solid var(--line);border-radius:10px;padding:8px;font-size:12px}
#players .card{background:#0e151f;border:1px solid var(--line);border-radius:12px;padding:10px;margin:8px 0}

.color-brown{background:#9a5b24}
.color-lightblue{background:#7fc7ff}
.color-pink{background:#ff6fad}
.color-orange{background:#ff9b3a}
.color-red{background:#ff4a4a}
.color-yellow{background:#ffd64d}
.color-green{background:#36d187}
.color-darkblue{background:#244a9a}
.color-rail{background:linear-gradient(90deg,#ddd 25%,#222 25% 50%,#ddd 50% 75%,#222 75%)}
.color-utility{background:linear-gradient(90deg,#ddd 50%,#666 50%)}

/* Edge positions (1..40 nth-child) */
#board .tile:nth-child(1){grid-row:11;grid-column:11}
#board .tile:nth-child(2){grid-row:11;grid-column:10}
#board .tile:nth-child(3){grid-row:11;grid-column:9}
#board .tile:nth-child(4){grid-row:11;grid-column:8}
#board .tile:nth-child(5){grid-row:11;grid-column:7}
#board .tile:nth-child(6){grid-row:11;grid-column:6}
#board .tile:nth-child(7){grid-row:11;grid-column:5}
#board .tile:nth-child(8){grid-row:11;grid-column:4}
#board .tile:nth-child(9){grid-row:11;grid-column:3}
#board .tile:nth-child(10){grid-row:11;grid-column:2}
#board .tile:nth-child(11){grid-row:11;grid-column:1}
#board .tile:nth-child(12){grid-row:10;grid-column:1}
#board .tile:nth-child(13){grid-row:9;grid-column:1}
#board .tile:nth-child(14){grid-row:8;grid-column:1}
#board .tile:nth-child(15){grid-row:7;grid-column:1}
#board .tile:nth-child(16){grid-row:6;grid-column:1}
#board .tile:nth-child(17){grid-row:5;grid-column:1}
#board .tile:nth-child(18){grid-row:4;grid-column:1}
#board .tile:nth-child(19){grid-row:3;grid-column:1}
#board .tile:nth-child(20){grid-row:2;grid-column:1}
#board .tile:nth-child(21){grid-row:1;grid-column:1}
#board .tile:nth-child(22){grid-row:1;grid-column:2}
#board .tile:nth-child(23){grid-row:1;grid-column:3}
#board .tile:nth-child(24){grid-row:1;grid-column:4}
#board .tile:nth-child(25){grid-row:1;grid-column:5}
#board .tile:nth-child(26){grid-row:1;grid-column:6}
#board .tile:nth-child(27){grid-row:1;grid-column:7}
#board .tile:nth-child(28){grid-row:1;grid-column:8}
#board .tile:nth-child(29){grid-row:1;grid-column:9}
#board .tile:nth-child(30){grid-row:1;grid-column:10}
#board .tile:nth-child(31){grid-row:1;grid-column:11}
#board .tile:nth-child(32){grid-row:2;grid-column:11}
#board .tile:nth-child(33){grid-row:3;grid-column:11}
#board .tile:nth-child(34){grid-row:4;grid-column:11}
#board .tile:nth-child(35){grid-row:5;grid-column:11}
#board .tile:nth-child(36){grid-row:6;grid-column:11}
#board .tile:nth-child(37){grid-row:7;grid-column:11}
#board .tile:nth-child(38){grid-row:8;grid-column:11}
#board .tile:nth-child(39){grid-row:9;grid-column:11}
#board .tile:nth-child(40){grid-row:10;grid-column:11}

/* Corner labels */
#board .tile:nth-child(1)::before{content:"GO";}
#board .tile:nth-child(11)::before{content:"JAIL";}
#board .tile:nth-child(21)::before{content:"FREE PARKING";}
#board .tile:nth-child(31)::before{content:"GO TO JAIL";}
#board .tile:nth-child(1)::before,
#board .tile:nth-child(11)::before,
#board .tile:nth-child(21)::before,
#board .tile:nth-child(31)::before{
  position:absolute;left:0;right:0;bottom:6px;text-align:center;
  font-family:Georgia, Garamond, "Times New Roman", serif;text-transform:uppercase;letter-spacing:.08em;font-weight:600;font-size:11px;
  background:linear-gradient(180deg,var(--gold),var(--gold2));-webkit-background-clip:text;background-clip:text;color:transparent;pointer-events:none;
}

/* Dice tray */
.dice-tray{position:absolute;left:50%;top:50%;transform:translate(-50%,-78%);display:flex;gap:10px;z-index:5;pointer-events:none}
.die{width:46px;height:46px;background:radial-gradient(circle at 30% 30%,#fff,#f3f6fb 60%,#c9d3e3 100%);border-radius:10px;border:1px solid #2b3446;
  box-shadow:0 10px 20px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.35);position:relative;pointer-events:auto}
@keyframes dice-roll{0%{transform:translateY(0) rotate(0deg)}20%{transform:translateY(-14px) rotate(90deg)}40%{transform:translateY(0) rotate(180deg)}60%{transform:translateY(-8px) rotate(270deg)}80%{transform:translateY(0) rotate(360deg)}100%{transform:translateY(0) rotate(360deg)}}
.die.rolling{animation:dice-roll .8s cubic-bezier(.3,.7,.2,1) both}

/* Mobile */
@media (max-width:900px){
  main{grid-template-columns:1fr;gap:12px;padding:12px}
}