/* ==========================================================================
   Dereks Monop — FULL CSS (NEON theme, GO top-left, clockwise)
   ========================================================================== */

:root{
  --bg:#0a0f15; --panel:#0f1723; --glass:#0c1420; --ink:#e9eef7; --muted:#b8c2d6;
  --line:#1b2a3d; --neon:#32e6ff; --neon2:#7dfc90; --accent:#8aa0ff; --danger:#ff5e5e; --amber:#ffd64d;
}

/* Base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--ink);
  background:
    radial-gradient(1200px 800px at 70% -50%, rgba(50,230,255,.08), transparent),
    #0a0f15;
  font:14px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}

/* Landing */
.landing-aaa{max-width:1100px;margin:0 auto;padding:28px 16px 18px}
.hero h1{margin:0 0 6px 0;font-size:28px;letter-spacing:.4px;color:var(--neon)}
.hero p{margin:0 0 18px 0;color:var(--muted)}
.panel-actions{display:grid;gap:16px}
.stack{display:grid;gap:10px}
.join-row{display:flex;gap:8px}
.list{list-style:none;padding:0;margin:8px 0 0 0}
.list li{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:#0f1723}

/* HUD */
.hud{
  position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
  padding:10px 14px;border-bottom:1px solid var(--line);backdrop-filter: blur(6px);
  background:linear-gradient(180deg,rgba(12,20,32,.75),rgba(12,20,32,.55));
}
.brand{font-weight:800;letter-spacing:.4px;color:var(--neon)}
.lobby{display:flex;gap:8px;flex-wrap:wrap}

/* Inputs & Buttons */
.input{background:#0d1624;border:1px solid var(--line);border-radius:10px;padding:10px 12px;color:var(--ink);width:100%}
.input.small{padding:6px 8px;width:auto}
.btn{
  background:linear-gradient(180deg,#142033,#0f1828);border:1px solid #233452;color:var(--ink);border-radius:12px;
  padding:10px 14px;cursor:pointer;transition:transform .06s ease, box-shadow .12s ease
}
.btn.big{padding:12px 16px;font-weight:700}
.btn:active{transform:translateY(1px)}
.btn:hover{box-shadow:0 6px 12px rgba(0,0,0,.25)}
.btn.accent{border-color:#2b465a;background:#17212a}
.btn.ghost{background:#0f1624;border:1px solid var(--line)}
.btn.slim{padding:6px 10px}
.chk.small{font-size:12px;opacity:.85}
.muted{opacity:.8;color:var(--muted)}

/* Layout */
.grid{display:grid;grid-template-columns:minmax(280px,1fr) 360px;gap:16px;padding:16px;max-width:1600px;margin:0 auto}
.side .panel{
  background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:12px;margin-bottom:12px;
  box-shadow:0 6px 18px rgba(0,0,0,.25)
}
.panel h3{margin:0 0 8px 0}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.row.spread{justify-content:space-between}
.row.end{justify-content:flex-end}
.log{height:160px;overflow:auto;background:var(--glass);border:1px solid var(--line);border-radius:10px;padding:8px;font-size:12px}

/* Board */
.board{
  position:relative;width:100%;aspect-ratio:1/1;overflow:hidden;
  background:linear-gradient(180deg,#0e1622,#0c141f);
  border-radius:16px;display:grid;grid-template-columns:repeat(11,1fr);grid-template-rows:repeat(11,1fr);
  box-shadow:0 0 0 2px rgba(255,255,255,.05) inset,0 18px 60px rgba(0,0,0,.55),0 0 60px rgba(50,230,255,.20),0 0 120px rgba(125,252,144,.12);
  border:6px solid #000;
}
.board::before{
  content:"";position:absolute;inset:12%;border-radius:16px;pointer-events:none;
  background:linear-gradient(130deg, rgba(50,230,255,.12), rgba(125,252,144,.10));
  filter:drop-shadow(0 4px 30px rgba(50,230,255,.25));opacity:.18;
}

/* Tile */
.tile{
  position:relative;background:linear-gradient(180deg,#0f1726,#0b111a);border:1px solid var(--line);padding:6px;color:#dbe9ff;
  display:flex;flex-direction:column;gap:3px;
}
.tile:hover{outline:1px solid rgba(50,230,255,.25)}
.band{height:8px;border-radius:3px;margin-bottom:2px;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;font-weight:800}
.price{display:block;font-size:10px;color:var(--muted);opacity:.85}

/* Tokens */
.tok{position:absolute;left:4px;top:4px;width:18px;height:18px;border-radius:50%;border:2px solid #2b3446;background:#fff}

/* Corner captions */
.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-weight:800;letter-spacing:.06em;font-size:11px;
  background:linear-gradient(180deg,var(--amber),#b48a3c);
  -webkit-background-clip:text;background-clip:text;color:transparent;pointer-events:none;
}

/* Color bands */
.color-brown{background:#9a5b24}
.color-lightblue{background:#7fc7ff}
.color-pink{background:#ff7ae6}
.color-orange{background:#ff9b3a}
.color-red{background:#ff5e5e}
.color-yellow{background:#ffd64d}
.color-green{background:#7dfc90}
.color-darkblue{background:#8aa0ff}
.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%)}

/* Dice (center) */
.dice{display:flex;gap:12px;z-index:4;pointer-events:none}
.dice-onboard{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
.die{
  width:54px;height:54px;border-radius:12px;border:1px solid #2b3446;
  background: radial-gradient(circle at 35% 30%, #fff, #eef2f7 60%, #cfd8e6 100%);
  box-shadow: 0 10px 20px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.35);
  display:flex;align-items:center;justify-content:center;font-weight:900;font-size:22px;color:#1a2234;
}
@keyframes dice-shake {
  0%{ transform: translate(-50%,-50%) rotate(0) }
  15%{ transform: translate(calc(-50% - 6px), calc(-50% - 6px)) rotate(15deg) }
  30%{ transform: translate(calc(-50% + 5px), calc(-50% + 5px)) rotate(-10deg) }
  45%{ transform: translate(calc(-50% - 4px), calc(-50% + 6px)) rotate(8deg) }
  60%{ transform: translate(calc(-50% + 3px), calc(-50% - 3px)) rotate(-6deg) }
  75%{ transform: translate(calc(-50% - 2px), calc(-50% + 2px)) rotate(4deg) }
  100%{ transform: translate(-50%,-50%) rotate(0) }
}
@keyframes die-roll {
  0%{ transform: rotate(0) scale(1) }
  25%{ transform: rotate(90deg) scale(1.05) }
  50%{ transform: rotate(180deg) scale(1) }
  75%{ transform: rotate(270deg) scale(1.05) }
  100%{ transform: rotate(360deg) scale(1) }
}
.dice-onboard.rolling{animation:dice-shake .7s ease}
.die.rolling{animation:die-roll .7s cubic-bezier(.3,.7,.2,1)}

/* Players panel */
#players .card{background:#0e1520;border:1px solid var(--line);border-radius:12px;padding:10px;margin:8px 0}
.prop-tag{padding:3px 6px;border-radius:8px;border:1px solid var(--line);background:#0c1420;margin:2px;display:inline-block}
.prop-tag.mort{opacity:.6}
.prop-row{display:flex;flex-wrap:wrap}

/* Auction */
#auctionPanel .row input{flex:1}

/* Trade bell & inbox */
.bell{
  position:fixed;right:16px;bottom:24px;z-index:50;background:#0f1624;border:1px solid var(--line);color:var(--ink);
  border-radius:12px;padding:8px 10px;display:flex;align-items:center;gap:8px;box-shadow:0 8px 24px rgba(0,0,0,.35);cursor:pointer
}
.bell .badge{
  min-width:18px;height:18px;padding:0 6px;border-radius:999px;background:var(--danger);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:800
}
.trade-inbox{
  position:fixed;right:0;top:0;bottom:0;width:min(380px,92vw);z-index:40;background:#0f1624;border-left:1px solid var(--line);
  transform:translateX(102%);transition:transform .25s ease;display:flex;flex-direction:column;box-shadow:-16px 0 32px rgba(0,0,0,.45)
}
.trade-inbox.open{transform:translateX(0)}
.inbox-head{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border-bottom:1px solid var(--line)}
.inbox-list{padding:10px 10px 18px;overflow:auto;flex:1;display:grid;gap:10px}
.trade-card{background:#0e1520;border:1px solid var(--line);border-radius:12px;padding:10px;display:grid;gap:8px}
.trade-card .meta{font-size:12px;opacity:.8;display:flex;justify-content:space-between;gap:8px}
.trade-card .summary{font-size:13px;line-height:1.35}
.trade-card .actions{display:flex;gap:8px;flex-wrap:wrap}

/* Modals */
.modal{position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.5);backdrop-filter: blur(4px);display:flex;align-items:center;justify-content:center}
.modal[hidden]{display:none}
.modal-card{width:min(960px,95vw);max-height:90vh;overflow:auto;background:#0f1624;border:1px solid var(--line);border-radius:14px;padding:12px}
.modal-card.narrow{width:min(520px,92vw)}
.modal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.modal-head h3{margin:0}
.trade-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.trade-col h4{margin:6px 0}
.prop-pool,.prop-bin{display:flex;flex-wrap:wrap;gap:6px;background:#0c1420;border:1px solid var(--line);border-radius:10px;padding:8px;min-height:48px}
.prop-chip{padding:6px 8px;border-radius:8px;background:#0f1a2b;border:1px solid var(--line);cursor:grab}
.prop-chip.mort{opacity:.6}
.trade-footer{display:flex;align-items:center;gap:8px;justify-content:flex-end;margin-top:10px}
.cash{margin-top:8px}

/* ---------- Tile ring mapping (GO top-left, clockwise) ---------- */
/* TOP: tiles 1..11 left→right */
.board .tile:nth-child(1){grid-row:1;grid-column:1}
.board .tile:nth-child(2){grid-row:1;grid-column:2}
.board .tile:nth-child(3){grid-row:1;grid-column:3}
.board .tile:nth-child(4){grid-row:1;grid-column:4}
.board .tile:nth-child(5){grid-row:1;grid-column:5}
.board .tile:nth-child(6){grid-row:1;grid-column:6}
.board .tile:nth-child(7){grid-row:1;grid-column:7}
.board .tile:nth-child(8){grid-row:1;grid-column:8}
.board .tile:nth-child(9){grid-row:1;grid-column:9}
.board .tile:nth-child(10){grid-row:1;grid-column:10}
.board .tile:nth-child(11){grid-row:1;grid-column:11}

/* RIGHT: tiles 12..21 top→bottom */
.board .tile:nth-child(12){grid-row:2;grid-column:11}
.board .tile:nth-child(13){grid-row:3;grid-column:11}
.board .tile:nth-child(14){grid-row:4;grid-column:11}
.board .tile:nth-child(15){grid-row:5;grid-column:11}
.board .tile:nth-child(16){grid-row:6;grid-column:11}
.board .tile:nth-child(17){grid-row:7;grid-column:11}
.board .tile:nth-child(18){grid-row:8;grid-column:11}
.board .tile:nth-child(19){grid-row:9;grid-column:11}
.board .tile:nth-child(20){grid-row:10;grid-column:11}
.board .tile:nth-child(21){grid-row:11;grid-column:11}

/* BOTTOM: tiles 22..31 right→left */
.board .tile:nth-child(22){grid-row:11;grid-column:10}
.board .tile:nth-child(23){grid-row:11;grid-column:9}
.board .tile:nth-child(24){grid-row:11;grid-column:8}
.board .tile:nth-child(25){grid-row:11;grid-column:7}
.board .tile:nth-child(26){grid-row:11;grid-column:6}
.board .tile:nth-child(27){grid-row:11;grid-column:5}
.board .tile:nth-child(28){grid-row:11;grid-column:4}
.board .tile:nth-child(29){grid-row:11;grid-column:3}
.board .tile:nth-child(30){grid-row:11;grid-column:2}
.board .tile:nth-child(31){grid-row:11;grid-column:1}

/* LEFT: tiles 32..40 bottom→top */
.board .tile:nth-child(32){grid-row:10;grid-column:1}
.board .tile:nth-child(33){grid-row:9;grid-column:1}
.board .tile:nth-child(34){grid-row:8;grid-column:1}
.board .tile:nth-child(35){grid-row:7;grid-column:1}
.board .tile:nth-child(36){grid-row:6;grid-column:1}
.board .tile:nth-child(37){grid-row:5;grid-column:1}
.board .tile:nth-child(38){grid-row:4;grid-column:1}
.board .tile:nth-child(39){grid-row:3;grid-column:1}
.board .tile:nth-child(40){grid-row:2;grid-column:1}

/* Responsive */
@media (max-width: 900px){
  .grid{grid-template-columns:1fr;gap:12px;padding:12px}
  .trade-row{grid-template-columns:1fr}
  .die{width:46px;height:46px;font-size:18px}
  .dice-onboard{gap:10px}
}