:root {
  --bg: #0a0a1a;
  --panel: rgba(20, 20, 45, 0.75);
  --red: #ff2e63;
  --green: #2bff88;
  --yellow: #ffe23d;
  --blue: #2e9bff;
  --neon-pink: #ff2e9a;
  --neon-cyan: #29f6ff;
  --neon-purple: #b14aff;
  --text: #eaf2ff;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  font-family: "Segoe UI", "Trebuchet MS", system-ui, sans-serif;
  color: var(--text);
  background:
    radial-gradient(1200px 800px at 10% -10%, #25104a 0%, transparent 60%),
    radial-gradient(1000px 700px at 110% 10%, #0b3a5e 0%, transparent 55%),
    radial-gradient(900px 900px at 50% 120%, #3a0b4a 0%, transparent 60%),
    var(--bg);
  background-attachment: fixed;
  overflow-x: hidden;
}

.app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 18px;
}

/* ---------- Title ---------- */
.title {
  font-size: clamp(28px, 6vw, 52px);
  font-weight: 900;
  letter-spacing: 4px;
  text-transform: uppercase;
  margin: 8px 0 4px;
  background: linear-gradient(90deg, var(--neon-pink), var(--neon-cyan), var(--neon-purple));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 14px rgba(255, 46, 154, 0.55));
  animation: hue 8s linear infinite;
}
@keyframes hue { to { filter: drop-shadow(0 0 14px rgba(41,246,255,0.55)) hue-rotate(360deg); } }
.subtitle { opacity: .7; font-size: 13px; letter-spacing: 2px; margin-bottom: 14px; text-transform: uppercase; }

/* ---------- Glass panel ---------- */
.panel {
  background: var(--panel);
  border: 1px solid rgba(120, 160, 255, 0.25);
  border-radius: 18px;
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 40px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.04);
  padding: 22px;
}

/* ---------- Menu ---------- */
.menu { width: min(520px, 94vw); display: flex; flex-direction: column; gap: 16px; }
.menu h2 { font-size: 16px; letter-spacing: 2px; text-transform: uppercase; opacity:.85; }
.mode-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mode-btn {
  cursor: pointer; border: 1px solid rgba(120,160,255,.3); border-radius: 14px;
  background: rgba(255,255,255,.03); padding: 16px; text-align: left; color: var(--text);
  transition: .18s; font-size: 14px;
}
.mode-btn .ic { font-size: 26px; display:block; margin-bottom:6px; }
.mode-btn small { opacity:.65; display:block; margin-top:4px; font-size:12px; }
.mode-btn:hover { transform: translateY(-3px); border-color: var(--neon-cyan);
  box-shadow: 0 0 22px rgba(41,246,255,.3); }
.mode-btn.active { border-color: var(--neon-pink); box-shadow: 0 0 22px rgba(255,46,154,.4); }

.row { display:flex; gap:10px; flex-wrap: wrap; align-items:center; }
.field { display:flex; flex-direction:column; gap:6px; flex:1; min-width: 140px; }
.field label { font-size: 12px; opacity:.7; letter-spacing:1px; text-transform: uppercase; }
input, select {
  background: rgba(0,0,0,.35); border: 1px solid rgba(120,160,255,.3); border-radius: 10px;
  color: var(--text); padding: 11px 12px; font-size: 14px; outline: none;
}
input:focus, select:focus { border-color: var(--neon-cyan); box-shadow: 0 0 0 3px rgba(41,246,255,.15); }

.btn {
  cursor: pointer; border: none; border-radius: 12px; padding: 13px 22px; font-weight: 800;
  letter-spacing: 1px; text-transform: uppercase; font-size: 14px; color: #06121f;
  background: linear-gradient(90deg, var(--neon-cyan), var(--neon-pink));
  box-shadow: 0 0 22px rgba(41,246,255,.35); transition: .15s;
}
.btn:hover { transform: translateY(-2px); filter: brightness(1.08); }
.btn:active { transform: translateY(0); }
.btn.secondary { background: rgba(255,255,255,.08); color: var(--text); box-shadow:none;
  border:1px solid rgba(120,160,255,.3); }
.btn.small { padding: 9px 14px; font-size: 12px; }
.btn:disabled { opacity:.4; cursor:not-allowed; transform:none; }

.count-pick { display:flex; gap:8px; }
.count-pick button {
  flex:1; padding:12px; border-radius:10px; cursor:pointer; font-weight:800; font-size:16px;
  background: rgba(255,255,255,.04); color: var(--text); border:1px solid rgba(120,160,255,.3);
}
.count-pick button.active { background: linear-gradient(90deg,var(--neon-purple),var(--neon-pink));
  color:#fff; border-color: transparent; box-shadow:0 0 18px rgba(177,74,255,.5); }

.seat-list { display:flex; flex-direction:column; gap:8px; }
.seat { display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:10px;
  background: rgba(255,255,255,.03); border:1px solid rgba(120,160,255,.18); }
.seat .dot { width:18px; height:18px; border-radius:50%; box-shadow: 0 0 10px currentColor; }
.seat select { flex:1; }
.dot.red{color:var(--red);background:var(--red);} .dot.green{color:var(--green);background:var(--green);}
.dot.yellow{color:var(--yellow);background:var(--yellow);} .dot.blue{color:var(--blue);background:var(--blue);}

/* ---------- Game layout ---------- */
.game-wrap { display:none; gap:20px; width:100%; max-width:1100px; align-items:flex-start;
  justify-content:center; flex-wrap:wrap; }
.game-wrap.show { display:flex; }

.board-shell { position:relative; }
.board {
  --cell: min(8.5vw, 46px);
  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));
  border-radius: 16px; overflow:hidden; position:relative;
  background:#05060f; border:2px solid rgba(120,160,255,.3);
  box-shadow: 0 0 50px rgba(41,246,255,.18), inset 0 0 60px rgba(0,0,0,.6);
}
.cell { position:relative; border:.5px solid rgba(255,255,255,.05); }
.cell.path { background: rgba(255,255,255,.04); }
.cell.r-home { background: rgba(255,46,99,.16); }
.cell.g-home { background: rgba(43,255,136,.16); }
.cell.y-home { background: rgba(255,226,61,.16); }
.cell.b-home { background: rgba(46,155,255,.16); }
.cell.entry-red{background:rgba(255,46,99,.45);} .cell.entry-green{background:rgba(43,255,136,.4);}
.cell.entry-yellow{background:rgba(255,226,61,.4);} .cell.entry-blue{background:rgba(46,155,255,.45);}
.cell.star::after{ content:"★"; position:absolute; inset:0; display:flex; align-items:center;
  justify-content:center; color:rgba(255,255,255,.55); font-size:calc(var(--cell)*.55); }
.cell.safe { box-shadow: inset 0 0 0 2px rgba(255,255,255,.25); }

/* yards */
.yard { position:absolute; width:calc(var(--cell)*6); height:calc(var(--cell)*6);
  border-radius:14px; display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr;
  place-items:center; padding:calc(var(--cell)*.6); }
.yard.red{top:0;left:0;background:rgba(255,46,99,.25);box-shadow:inset 0 0 30px rgba(255,46,99,.4);}
.yard.green{top:0;right:0;background:rgba(43,255,136,.22);box-shadow:inset 0 0 30px rgba(43,255,136,.4);}
.yard.yellow{bottom:0;right:0;background:rgba(255,226,61,.22);box-shadow:inset 0 0 30px rgba(255,226,61,.4);}
.yard.blue{bottom:0;left:0;background:rgba(46,155,255,.25);box-shadow:inset 0 0 30px rgba(46,155,255,.4);}
.yard-slot { width:75%; height:75%; border-radius:50%; background:rgba(0,0,0,.35);
  display:flex; align-items:center; justify-content:center; }

.center {
  position:absolute; top:calc(var(--cell)*6); left:calc(var(--cell)*6);
  width:calc(var(--cell)*3); height:calc(var(--cell)*3);
  background:#070815;
  clip-path: polygon(0 0,100% 0,50% 50%,0 0, 100% 0,100% 100%,50% 50%, 100% 100%,0 100%,50% 50%, 0 100%,0 0);
}
.tri { position:absolute; width:0; height:0; }
.tri.t-red{ top:0; left:0; border-left:calc(var(--cell)*1.5) solid transparent;
  border-right:calc(var(--cell)*1.5) solid transparent; border-bottom:none;
  border-top:calc(var(--cell)*1.5) solid var(--red); transform:none;}
.center .seg { position:absolute; width:0;height:0; }
.seg-top{top:0;left:0;border-left:calc(var(--cell)*1.5) solid transparent;border-right:calc(var(--cell)*1.5) solid transparent;border-top:calc(var(--cell)*1.5) solid var(--green);}
.seg-bottom{bottom:0;left:0;border-left:calc(var(--cell)*1.5) solid transparent;border-right:calc(var(--cell)*1.5) solid transparent;border-bottom:calc(var(--cell)*1.5) solid var(--blue);}
.seg-left{top:0;left:0;border-top:calc(var(--cell)*1.5) solid transparent;border-bottom:calc(var(--cell)*1.5) solid transparent;border-left:calc(var(--cell)*1.5) solid var(--red);}
.seg-right{top:0;right:0;border-top:calc(var(--cell)*1.5) solid transparent;border-bottom:calc(var(--cell)*1.5) solid transparent;border-right:calc(var(--cell)*1.5) solid var(--yellow);}
.center .crown{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:calc(var(--cell)*1.1);filter:drop-shadow(0 0 8px #000);z-index:2;}

/* tokens */
.token {
  position:absolute; width:calc(var(--cell)*.72); height:calc(var(--cell)*.72);
  border-radius:50%; border:2px solid rgba(255,255,255,.9);
  transition: top .35s cubic-bezier(.5,1.6,.5,1), left .35s cubic-bezier(.5,1.6,.5,1);
  z-index:5; cursor:default; display:flex; align-items:center; justify-content:center;
  font-size:calc(var(--cell)*.34); font-weight:900; color:rgba(0,0,0,.55);
}
.token.red{background:radial-gradient(circle at 30% 25%,#ff8fb0,var(--red));box-shadow:0 0 14px var(--red);}
.token.green{background:radial-gradient(circle at 30% 25%,#a6ffcf,var(--green));box-shadow:0 0 14px var(--green);}
.token.yellow{background:radial-gradient(circle at 30% 25%,#fff3a6,var(--yellow));box-shadow:0 0 14px var(--yellow);}
.token.blue{background:radial-gradient(circle at 30% 25%,#a6d4ff,var(--blue));box-shadow:0 0 14px var(--blue);}
.token.movable{ cursor:pointer; animation: bob .8s ease-in-out infinite; outline:3px solid #fff; }
@keyframes bob { 50%{ transform: translateY(-4px) scale(1.08); } }

/* ---------- Side panel ---------- */
.side { width:min(340px,94vw); display:flex; flex-direction:column; gap:14px; }
.turn-banner { display:flex; align-items:center; gap:12px; }
.turn-banner .who { font-size:20px; font-weight:900; letter-spacing:1px; }
.turn-banner .pdot { width:22px;height:22px;border-radius:50%; box-shadow:0 0 12px currentColor; }

.dice-area { display:flex; align-items:center; gap:16px; }
.die {
  width:74px;height:74px;border-radius:16px; background:#fff; position:relative; cursor:pointer;
  box-shadow:0 6px 0 rgba(0,0,0,.35), 0 0 26px rgba(41,246,255,.4); transition:.1s;
}
.die:active{ transform:translateY(4px); box-shadow:0 2px 0 rgba(0,0,0,.35); }
.die.rolling{ animation: shake .5s; }
@keyframes shake{ 0%,100%{transform:rotate(0)} 25%{transform:rotate(-18deg)} 75%{transform:rotate(18deg)} }
.die .pip{ position:absolute; width:13px;height:13px;border-radius:50%;background:#10101c; }
.die.disabled{ opacity:.5; cursor:not-allowed; }

.players-status { display:flex; flex-direction:column; gap:8px; }
.pstatus { display:flex; align-items:center; gap:10px; padding:8px 12px; border-radius:10px;
  background:rgba(255,255,255,.03); border:1px solid rgba(120,160,255,.15); font-size:13px;}
.pstatus.active { border-color: var(--neon-cyan); box-shadow:0 0 16px rgba(41,246,255,.25); }
.pstatus .pdot{width:16px;height:16px;border-radius:50%;box-shadow:0 0 8px currentColor;}
.pstatus .home-count{ margin-left:auto; opacity:.8; }
.pstatus .badge{ font-size:10px; padding:2px 6px;border-radius:6px;background:rgba(255,255,255,.08); }

.log { font-size:13px; max-height:140px; overflow-y:auto; display:flex; flex-direction:column-reverse; gap:6px; }
.log div{ padding:6px 8px;border-radius:8px;background:rgba(255,255,255,.03); opacity:.9; }

.room-bar { display:flex; align-items:center; gap:8px; font-size:13px; flex-wrap:wrap; }
.room-code { font-weight:900; letter-spacing:3px; color: var(--neon-cyan); }

/* toast / overlay */
.overlay { position:fixed; inset:0; background:rgba(4,4,14,.82); display:none; align-items:center;
  justify-content:center; z-index:50; backdrop-filter:blur(6px); }
.overlay.show{ display:flex; }
.win-card { text-align:center; padding:40px; }
.win-card h1{ font-size:42px; margin-bottom:10px;
  background:linear-gradient(90deg,var(--yellow),var(--neon-pink));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.ranks{ margin:18px 0; display:flex;flex-direction:column;gap:8px; }
.ranks div{ padding:8px 14px; border-radius:10px; background:rgba(255,255,255,.05); }

.toast { position:fixed; top:18px; left:50%; transform:translateX(-50%); z-index:60;
  background:rgba(20,20,45,.95); border:1px solid var(--neon-cyan); padding:12px 20px;
  border-radius:12px; box-shadow:0 0 24px rgba(41,246,255,.4); opacity:0; pointer-events:none;
  transition:.3s; font-size:14px; }
.toast.show{ opacity:1; transform:translateX(-50%) translateY(6px); }

/* ---------- Matchmaking ---------- */
.mm-spinner { position:relative; width:140px; height:140px; margin:8px auto 6px; display:flex;
  align-items:center; justify-content:center; }
.mm-ring { position:absolute; inset:0; border-radius:50%;
  border:6px solid rgba(120,160,255,.15);
  border-top-color: var(--neon-cyan); border-right-color: var(--neon-pink);
  animation: spin 1.1s linear infinite;
  box-shadow: 0 0 26px rgba(41,246,255,.35), inset 0 0 26px rgba(255,46,154,.2); }
@keyframes spin { to { transform: rotate(360deg); } }
.mm-count { font-size:30px; font-weight:900; letter-spacing:2px;
  background: linear-gradient(90deg,var(--neon-cyan),var(--neon-pink));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.mm-seat-empty { opacity:.45; font-style:italic; }
.pulse-dot { width:10px;height:10px;border-radius:50%;background:var(--neon-cyan);
  box-shadow:0 0 10px var(--neon-cyan); animation: pulse 1s ease-in-out infinite; }
@keyframes pulse { 50%{ transform:scale(1.6); opacity:.4; } }

.hint { font-size:12px; opacity:.6; line-height:1.5; }
.hidden{ display:none !important; }

@media (max-width: 720px){
  .mode-grid{ grid-template-columns:1fr; }
  .board{ --cell: min(6vw, 24px); }
}