/* ========== ROOT & RESET ========== */
:root {
  --bg: #0f172a;
  --bg-card: #1e293b;
  --text: #f1f5f9;
  --muted: #94a3b8;
  --red: #e53935;
  --green: #43a047;
  --yellow: #fdd835;
  --blue: #1e88e5;
  --app-width: min(96vw, 680px);
  --board-size: min(calc(var(--app-width) - 2*var(--side-station) - 40px), calc(100vh - 225px), 600px);
  /* Side stations must stay wide enough that "Hijau"/"Lempar" never get clipped
     (they are laid out inside a column of exactly this width with overflow:hidden). */
  --side-station: clamp(58px, 14vw, 74px);
  /* Animation speed multiplier, kept in sync with state.speed by script.js */
  --speed: 1;
}

* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body { width:100%; height:100%; overflow:hidden; }
body {
  font-family: 'Segoe UI', Arial, sans-serif;
  background: linear-gradient(145deg, #1a1a2e 0%, #16213e 100%);
  color: var(--text);
  display: flex;
  justify-content: center;
  align-items: center;
}

/* ========== APP ========== */
#app {
  width:100%; max-width:var(--app-width); height:100vh; max-height:100dvh;
  display:flex; flex-direction:column; padding:6px 10px; gap:4px;
}

/* ========== TOPBAR ========== */
.topbar { display:flex; align-items:center; justify-content:space-between; padding:4px 0; }
.topbar-left { width:40px; }
.topbar-right { display:flex; align-items:center; gap:8px; }
.icon-btn {
  background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.1);
  color:var(--text); width:34px; height:34px; border-radius:10px; font-size:1.1rem;
  cursor:pointer; display:grid; place-items:center;
}
.speed-btn { width:auto; min-width:40px; padding:0 8px; font-size:.72rem; font-weight:800; }
.topbar-title { font-size:1.2rem; font-weight:800; }
.turn-pill {
  font-size:0.7rem; font-weight:700; text-transform:uppercase; letter-spacing:0.1em;
  padding:4px 12px; border-radius:20px; background:rgba(255,255,255,0.08);
}
.turn-pill.red { color:var(--red); }
.turn-pill.green { color:var(--green); }
.turn-pill.yellow { color:#e6c200; }
.turn-pill.blue { color:var(--blue); }

/* ========== INFO BAR ========== */
.info-bar { text-align:center; }
.info-text { font-size:0.78rem; color:var(--muted); line-height:1.3; }

/* ========== BOARD ========== */
.board-container {
  position:relative;
  display:grid;
  grid-template-areas:
    ".    top    ."
    "left board  right"
    ".  bottom  .";
  grid-template-columns: var(--side-station) 1fr var(--side-station);
  grid-template-rows: auto 1fr auto;
  gap:6px;
  align-items:center;
  justify-items:center;
  flex-shrink:0;
}

.ludo-board {
  width:var(--board-size); height:var(--board-size);
  display:grid; grid-template-columns:repeat(15,1fr); grid-template-rows:repeat(15,1fr);
  border-radius:10px; overflow:hidden; border:2px solid rgba(255,255,255,0.15);
  box-shadow:0 8px 40px rgba(0,0,0,0.5); background:#fff;
  position:relative;
  transform-origin:center center; transition:transform .35s ease;
  grid-area: board; justify-self:center; align-self:center;
}

.b {
  width:100%; height:100%; border:0.5px solid #ccc; position:relative;
  font-size:calc(var(--board-size) / 15 * 0.62);
}

/* Base areas — borders match bg so grid is invisible */
.b.red    { background:var(--red); border-color:var(--red); }
.b.green  { background:var(--green); border-color:var(--green); }
.b.yellow { background:#e6c200; border-color:#e6c200; }
.b.blue   { background:var(--blue); border-color:var(--blue); }

/* Base inner white area */
.b.bi {
  background:#fff; border-radius:6px; border:2px solid #ddd;
}

/* Track cells */
.b.t { background:#f8f8f8; border-color:#ddd; }

/* Home stretch — borders match bg so grid is invisible */
.b.hr { background:var(--red); border-color:var(--red); }
.b.hg { background:var(--green); border-color:var(--green); }
.b.hy { background:#e6c200; border-color:#e6c200; }
.b.hb { background:var(--blue); border-color:var(--blue); }

/* Start cells */
.b.sr { background:var(--red); border:2px solid #fff; }
.b.sg { background:var(--green); border:2px solid #fff; }
.b.sy { background:#e6c200; border:2px solid #fff; }
.b.sb { background:var(--blue); border:2px solid #fff; }
/* Arrow points along the direction of travel from each start square */
.b.sr::after, .b.sg::after, .b.sy::after, .b.sb::after {
  position:absolute; inset:0; display:flex;
  align-items:center; justify-content:center;
  color:#fff; font-size:0.6em; z-index:2; pointer-events:none;
}
.b.sg::after { content:'▶'; }  /* green start (6,1)  moves right */
.b.sy::after { content:'▼'; }  /* yellow start (1,8) moves down  */
.b.sb::after { content:'◀'; }  /* blue start (8,13)  moves left  */
.b.sr::after { content:'▲'; }  /* red start (13,6)   moves up    */

/* Safe stars */
.b.safe::after {
  content:'★'; position:absolute; inset:0; display:flex;
  align-items:center; justify-content:center;
  color:rgba(0,0,0,0.35); font-size:0.7em; z-index:2; pointer-events:none;
}

/* Center home: the 9 middle cells are blank; the triangles are drawn
   by a single overlay so they line up perfectly with each home column. */
.b.cc { background:#fff; border-color:transparent; }

.center-home {
  position:absolute; z-index:3; pointer-events:none;
  left:40%; top:40%; width:20%; height:20%;
  border:1px solid #bbb; background:#fff;
}
.center-home .tri { position:absolute; inset:0; }
.tri-yellow { background:#e6c200;    clip-path:polygon(0 0, 100% 0, 50% 50%); }
.tri-blue   { background:var(--blue);  clip-path:polygon(100% 0, 100% 100%, 50% 50%); }
.tri-red    { background:var(--red);   clip-path:polygon(100% 100%, 0 100%, 50% 50%); }
.tri-green  { background:var(--green); clip-path:polygon(0 100%, 0 0, 50% 50%); }

/* ========== PLAYER STATIONS (4 sides) ========== */
.station-top    { grid-area: top; }
.station-left   { grid-area: left; }
.station-right  { grid-area: right; }
.station-bottom { grid-area: bottom; }
.station {
  --st-accent:#94a3b8;
  position:relative;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:6px; padding:7px 10px;
  background:linear-gradient(160deg, rgba(255,255,255,0.10), rgba(255,255,255,0.03));
  border:1px solid rgba(255,255,255,0.12);
  border-radius:16px;
  box-shadow:0 6px 18px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.08);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  overflow:hidden;
  transition:border-color .25s, box-shadow .25s, transform .25s, background .25s;
}
.station-top, .station-bottom { flex-direction:row; gap:10px; padding:6px 12px; }
/* Coloured accent strip bound to each player's colour */
.station::before {
  content:""; position:absolute; top:0; left:12px; right:12px; height:3px;
  background:var(--st-accent); border-radius:0 0 6px 6px; opacity:.9;
}
.station[data-color="red"]    { --st-accent:var(--red); }
.station[data-color="green"]  { --st-accent:var(--green); }
.station[data-color="yellow"] { --st-accent:#e6c200; }
.station[data-color="blue"]   { --st-accent:var(--blue); }
/* Active / current-player state */
.station.active {
  transform:scale(1.045);
  border-color:var(--st-accent);
  background:linear-gradient(160deg, rgba(255,255,255,0.14), rgba(255,255,255,0.05));
}
.station.active[data-color="red"]    { box-shadow:0 0 0 2px var(--red),   0 0 22px rgba(229,57,53,.55),  0 8px 26px rgba(0,0,0,.45); }
.station.active[data-color="green"]  { box-shadow:0 0 0 2px var(--green), 0 0 22px rgba(67,160,71,.55),  0 8px 26px rgba(0,0,0,.45); }
.station.active[data-color="yellow"] { box-shadow:0 0 0 2px #e6c200,0 0 22px rgba(230,194,0,.55),  0 8px 26px rgba(0,0,0,.45); }
.station.active[data-color="blue"]   { box-shadow:0 0 0 2px var(--blue),  0 0 22px rgba(30,136,229,.55), 0 8px 26px rgba(0,0,0,.45); }
.station-head { display:flex; align-items:center; gap:6px; }
.station-name { font-size:.72rem; font-weight:800; color:var(--text); white-space:nowrap; letter-spacing:.02em; text-shadow:0 1px 2px rgba(0,0,0,.4); }
/* Avatar orb using the player's colour */
.station .player-dot {
  width:17px; height:17px; border:2px solid rgba(255,255,255,.85);
  box-shadow:0 0 0 2px rgba(255,255,255,.12), 0 2px 6px rgba(0,0,0,.4);
}
.station.active .player-dot { box-shadow:0 0 0 3px var(--st-accent), 0 0 12px var(--st-accent); }

/* Dice inside a station — a clean rounded tile that scales with the board */
.station .dice {
  width:min(50px, calc(var(--side-station) - 16px));
  height:min(50px, calc(var(--side-station) - 16px));
  padding:6px; border-radius:12px;
  border:2px solid rgba(255,255,255,0.25);
  box-shadow:0 4px 12px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.35);
  transition:border-color .2s, box-shadow .2s, opacity .2s;
}
.station .dice .dice-placeholder { font-size:1.05rem; }
.station:not(.active) .station-dice { opacity:.55; }
.station.active .dice { border-color:var(--st-accent); box-shadow:0 4px 12px rgba(0,0,0,.4), 0 0 14px var(--st-accent); }

/* Turn arrow — an orange pointer on the active player's station (Ludo-King style). */
.station .turn-arrow {
  position:absolute; z-index:6; pointer-events:none;
  width:0; height:0; border:8px solid transparent; display:none;
}
.station.active .turn-arrow { display:block; }
.station-top .turn-arrow    { left:50%; bottom:2px; transform:translateX(-50%); border-top:11px solid #ff9500; border-bottom-width:0; }
.station-left .turn-arrow   { top:50%; right:2px;  transform:translateY(-50%); border-left:11px solid #ff9500; border-right-width:0; }
.station-right .turn-arrow  { top:50%; left:2px;   transform:translateY(-50%); border-right:11px solid #ff9500; border-left-width:0; }
.station-bottom .turn-arrow { left:50%; top:2px;   transform:translateX(-50%); border-bottom:11px solid #ff9500; border-top-width:0; }

/* Roll button — a glowing gradient pill */
.station-roll {
  border:none; border-radius:999px; padding:7px 12px;
  background:linear-gradient(135deg, #8b5cf6, #6d28d9);
  color:#fff; font-weight:800; font-size:.66rem; cursor:pointer;
  white-space:nowrap; letter-spacing:.02em;
  box-shadow:0 4px 12px rgba(124,58,237,.45), inset 0 1px 0 rgba(255,255,255,.25);
  transition:opacity .2s, transform .15s, box-shadow .2s, filter .2s;
}
.station.active .station-roll {
  background:linear-gradient(135deg, #7c3aed, #4f46e5);
  box-shadow:0 4px 18px rgba(124,58,237,.6), inset 0 1px 0 rgba(255,255,255,.3);
}
.station-roll:active { transform:scale(.95); }
.station-roll:disabled { opacity:.4; cursor:not-allowed; filter:saturate(.5); }
/* Side stations only get --side-station of horizontal room, so their labels must
   shrink with it instead of being clipped by overflow:hidden. */
.station-left .station-roll, .station-right .station-roll {
  padding:6px 4px; font-size:clamp(.5rem, 1.6vw, .58rem); width:calc(100% - 2px);
}
.station-left .station-name, .station-right .station-name { font-size:clamp(.52rem, 1.6vw, .62rem); }

/* Colours that have no seat in a local 2/3-player game: shown for context only. */
.station.bench { opacity:.4; filter:saturate(.35); }
.station.bench .station-roll { display:none; }

@media (max-height:620px) {
  .station { gap:4px; padding:5px 8px; border-radius:14px; }
  .station-top, .station-bottom { gap:8px; padding:5px 10px; }
  .station .dice { width:min(42px, calc(var(--side-station) - 16px)); height:min(42px, calc(var(--side-station) - 16px)); }
  .station-roll { font-size:.52rem; padding:6px 9px; }
  .station-name { font-size:.6rem; }
  .station .player-dot { width:15px; height:15px; }
}

/* ========== TOKENS ========== */
.token-layer {
  position:absolute; inset:0; z-index:10; pointer-events:none;
}

/* ========== PAWNS (Ludo tokens) ========== */
.pawn {
  position:absolute; pointer-events:auto; z-index:10;
  border-radius:50%;
  border:2px solid rgba(0,0,0,0.28);
  box-shadow:
    inset 0 2px 4px rgba(255,255,255,0.5),
    inset 0 -4px 8px rgba(0,0,0,0.32),
    0 4px 8px rgba(0,0,0,0.4);
  transition: left calc(0.3s / var(--speed)) ease, top calc(0.3s / var(--speed)) ease, transform calc(0.16s / var(--speed)) ease;
}
/* Glossy highlight glint on the upper-left of each token */
.pawn::before {
  content:""; position:absolute; left:20%; top:15%;
  width:26%; height:20%; border-radius:50%;
  background:linear-gradient(135deg, rgba(255,255,255,0.9), rgba(255,255,255,0.15));
  transform:rotate(-24deg); filter:blur(0.4px);
  pointer-events:none;
}
/* Thin inner ring for a coin/token feel */
.pawn::after {
  content:""; position:absolute; inset:16%; border-radius:50%;
  border:2px solid rgba(255,255,255,0.28);
  box-shadow:inset 0 1px 2px rgba(255,255,255,0.35);
  pointer-events:none;
}

.pawn.red    { background:radial-gradient(circle at 32% 28%, #ff8a80, #e53935 52%, #b71c1c 100%); }
.pawn.green  { background:radial-gradient(circle at 32% 28%, #b9e7bb, #43a047 52%, #1b5e20 100%); }
.pawn.yellow { background:radial-gradient(circle at 32% 28%, #fff59d, #e6c200 52%, #9e8700 100%); }
.pawn.blue   { background:radial-gradient(circle at 32% 28%, #90caf9, #1e88e5 52%, #0d47a1 100%); }

/* Moveable pawn: pointer + white ring glow + gentle pulse */
.pawn.active {
  cursor:pointer; z-index:20;
  animation:pulse calc(0.7s / var(--speed)) ease-in-out infinite;
  box-shadow:
    inset 0 2px 4px rgba(255,255,255,0.5),
    inset 0 -4px 8px rgba(0,0,0,0.32),
    0 0 0 3px #fff,
    0 0 14px rgba(255,255,255,0.65),
    0 4px 12px rgba(0,0,0,0.35);
}
@keyframes pulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.18)} }

/* Lively hop (squash & stretch) while the pawn steps across the board */
.pawn.hop { animation:pawnHop calc(0.32s / var(--speed)) cubic-bezier(.25,.65,.35,1) both; }
@keyframes pawnHop {
  0%   { transform:translateY(0)     scale(1, 1); }
  25%  { transform:translateY(-16%)  scale(0.92, 1.12); }
  55%  { transform:translateY(-55%)  scale(1, 1); }
  82%  { transform:translateY(-6%)   scale(1.14, 0.84); }
  100% { transform:translateY(0)     scale(1, 1); }
}

.debug-num {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:0.55em; color:#e44; font-weight:700; pointer-events:none; z-index:5;
  text-shadow:0 0 2px #fff, 0 0 2px #fff;
}
/* Debug numbers are hidden by default; add class "debug-on" to #board to show them */
.ludo-board:not(.debug-on) .debug-num {
  display:none;
}
/* ========== DICE ========== */
.dice {
  width:100px; height:100px; background:#fff; border-radius:16px;
  display:grid; grid-template-columns:repeat(3, 1fr); grid-template-rows:repeat(3, 1fr);
  padding:10px; place-items:center;
  box-shadow:0 4px 16px rgba(0,0,0,0.4);
  border:3px solid #ddd; user-select:none;
}
.dice .pip {
  width:80%; height:80%; background:#1a1a1a; border-radius:50%;
  box-shadow:inset 0 2px 3px rgba(255,255,255,0.35), 0 2px 4px rgba(0,0,0,0.4);
}
.dice .dice-placeholder {
  grid-column:1 / -1; grid-row:1 / -1;
  font-size:2rem; font-weight:800; color:#1a1a1a;
}
.dice.rolling { animation:diceRoll calc(0.5s / var(--speed)) ease-out; }
@keyframes diceRoll {
  0%{transform:rotate(0deg) scale(0.7)}
  50%{transform:rotate(180deg) scale(1.1)}
  100%{transform:rotate(360deg) scale(1)}
}

/* ========== PLAYER DOT (station heads) ========== */
.player-dot {
  width:14px; height:14px; border-radius:50%; border:2px solid rgba(255,255,255,0.8);
}
.player-dot.red { background:var(--red); }
.player-dot.green { background:var(--green); }
.player-dot.yellow { background:#e6c200; }
.player-dot.blue { background:var(--blue); }

/* ========== NEW GAME ========== */
.new-game-area { display:flex; justify-content:center; }
.new-game-btn {
  padding:8px 24px; border:1px solid rgba(255,255,255,0.12); border-radius:12px;
  background:rgba(255,255,255,0.06); color:var(--muted); font-weight:600;
  font-size:0.8rem; cursor:pointer; transition:background 0.2s;
}
.new-game-btn:hover { background:rgba(255,255,255,0.12); }

/* ========== OVERLAYS ========== */
.overlay {
  position:fixed; inset:0; background:rgba(0,0,0,0.75);
  display:flex; align-items:center; justify-content:center;
  z-index:100; backdrop-filter:blur(6px);
}
.overlay.hidden { display:none; }
.overlay-card {
  background:var(--bg-card); border:1px solid rgba(255,255,255,0.1);
  border-radius:24px; padding:30px 26px; text-align:center;
  max-width:360px; width:90%; box-shadow:0 20px 60px rgba(0,0,0,0.5);
}
.overlay-title { font-size:2.2rem; margin-bottom:8px; }
.overlay-sub { color:var(--muted); margin-bottom:18px; font-size:0.95rem; }
.overlay-hint { color:var(--muted); font-size:0.75rem; margin:10px 0 18px; }
.player-select { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.select-btn {
  padding:10px 20px; border-radius:12px; border:2px solid rgba(255,255,255,0.12);
  background:transparent; color:var(--text); font-weight:600; font-size:0.9rem;
  cursor:pointer; transition:all 0.2s;
}
.select-btn.selected { border-color:#7c3aed; background:rgba(124,58,237,0.2); color:#c4b5fd; }
.color-btn.red    { color:#ff8a80; }
.color-btn.green  { color:#81c784; }
.color-btn.yellow { color:#fdd835; }
.color-btn.blue   { color:#64b5f6; }
.color-btn.selected.red    { border-color:var(--red);    background:rgba(229,57,53,.18); color:#ff8a80; }
.color-btn.selected.green  { border-color:var(--green);  background:rgba(67,160,71,.18); color:#81c784; }
.color-btn.selected.yellow { border-color:#fdd835;       background:rgba(253,216,53,.18); color:#fdd835; }
.color-btn.selected.blue   { border-color:var(--blue);   background:rgba(30,136,229,.18); color:#64b5f6; }
.start-btn {
  padding:14px 36px; border:none; border-radius:14px;
  background:linear-gradient(135deg, #7c3aed, #4f46e5); color:#fff;
  font-weight:700; font-size:1.05rem; cursor:pointer; transition:transform 0.1s;
}
.start-btn:active { transform:scale(0.96); }
.winner-text { font-size:1.4rem; font-weight:700; margin:12px 0 24px; }

/* ========== MODE SELECT ========== */
.mode-select {
  display:flex; gap:10px; justify-content:center; margin:16px 0 10px;
}
.mode-btn {
  background:var(--bg-card); border:2px solid #333; border-radius:12px;
  padding:14px 18px; cursor:pointer; display:flex; flex-direction:column;
  align-items:center; gap:4px; min-width:120px; transition:all 0.2s; color:#fff;
}
/* Three mode buttons in a 360px card must shrink instead of pushing a horizontal
   scrollbar into the start screen. */
@media (max-width:520px) {
  .mode-select { gap:6px; }
  .mode-btn { min-width:0; flex:1 1 0; padding:12px 6px; }
  .mode-icon { font-size:24px; }
  .mode-label { font-size:12px; }
  .mode-desc { font-size:10px; }
}
.mode-btn:hover { border-color:#7c3aed; }
.mode-btn.selected { border-color:#7c3aed; background:rgba(124,58,237,0.15); }
.mode-icon { font-size:28px; }
.mode-label { font-weight:700; font-size:14px; }
.mode-desc { font-size:11px; opacity:0.6; }
.ai-settings-section { margin-top:12px; }
.player-count-section { margin-top:12px; }

/* ========== RESPONSIVE ========== */
@media (max-height:700px) {
  #app { padding:4px 8px; gap:3px; }
  .dice { width:78px; height:78px; }
  /* Keep stations compact on short screens so the board never overflows */
  .station { padding:4px 8px; }
  .station-top, .station-bottom { padding:4px 10px; }
  .station-roll { padding:6px 10px; }
  .station .dice { width:min(42px, calc(var(--side-station) - 16px)); height:min(42px, calc(var(--side-station) - 16px)); }
}

/* ========== START SCREEN SECTIONS / IN-GAME MENU ========== */
.color-section { width:100%; }
.menu-actions { display:flex; flex-direction:column; gap:10px; width:100%; margin-top:22px; }
.menu-actions .select-btn { padding:12px 18px; flex-direction:row; min-width:0; }

/* ========== UTILITIES ========== */
/* Panels, chips and buttons are shown/hidden with this class all over the app
   (start-screen sections, the room chip, the lobby's "back to board" button).
   Only overlays had a rule for it, so the rest were never actually hidden. */
.hidden { display:none !important; }

/* ========== ONLINE MULTIPLAYER ========== */
/* The start card grows tall in online mode, so both cards must scroll instead of
   pushing the buttons off a short phone screen. */
#start-screen .overlay-card,
#room-screen .overlay-card {
  max-height:92dvh; overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain;
}

.online-section { display:flex; flex-direction:column; gap:12px; text-align:left; margin:6px 0 4px; }
.online-section code {
  background:rgba(255,255,255,0.08); padding:2px 6px; border-radius:6px;
  font-family:Consolas, monospace; color:#c4b5fd;
}

.field { display:flex; flex-direction:column; gap:5px; }
.field-label { font-size:.7rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.field-input {
  background:rgba(0,0,0,0.28); border:2px solid rgba(255,255,255,0.12); border-radius:12px;
  padding:11px 13px; color:var(--text); font-size:.95rem; font-weight:600; width:100%;
  transition:border-color .2s;
}
.field-input:focus { outline:none; border-color:#7c3aed; }
.field-input.code {
  text-transform:uppercase; letter-spacing:.35em; text-align:center; font-weight:800;
  max-width:130px; font-size:1.05rem;
}

.room-actions { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
/* "Buat Kamar" gets its own line; the code field and "Gabung" share the next one,
   so nothing is squeezed off the card on a narrow phone. */
.room-actions #room-create-btn { flex:1 1 100%; }
.room-actions .field-input.code { flex:1 1 90px; max-width:none; min-width:0; }
.room-actions #room-join-btn { flex:0 0 auto; }
.room-or { color:var(--muted); font-size:.75rem; flex:0 0 auto; }
.start-btn.small { padding:11px 18px; font-size:.9rem; white-space:nowrap; }
.start-btn:disabled { opacity:.55; cursor:default; }
.start-btn:disabled:active { transform:none; }

.net-details { color:var(--muted); font-size:.72rem; }
.net-details summary { cursor:pointer; padding:2px 0; }
.net-details .field-input { margin-top:8px; font-size:.85rem; }
.net-status { color:#c4b5fd; font-size:.75rem; min-height:1.1em; line-height:1.35; }

.room-code {
  font-family:Consolas, monospace; font-size:2.4rem; font-weight:800; letter-spacing:.28em;
  color:#fff; background:rgba(124,58,237,0.16); border:1px dashed rgba(124,58,237,0.6);
  border-radius:14px; padding:10px 6px 10px 16px; margin:2px 0 6px; user-select:all;
}
.room-host-tag { color:var(--muted); font-size:.75rem; margin-bottom:12px; }
.room-players { list-style:none; display:flex; flex-direction:column; gap:7px; margin-bottom:10px; }
.room-player {
  display:flex; align-items:center; gap:10px; width:100%;
  background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.08);
  border-radius:12px; padding:9px 12px; font-size:.86rem;
}
.room-player .player-dot { width:15px; height:15px; flex:0 0 auto; }
.room-player-name { flex:1 1 auto; text-align:left; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.room-player-role { font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); }
.room-player.empty { justify-content:center; color:var(--muted); font-style:italic; background:transparent; border-style:dashed; }

/* Room chip in the top bar (room code + your colour + ping) */
.net-badge {
  background:rgba(124,58,237,0.18); border:1px solid rgba(124,58,237,0.5); color:#c4b5fd;
  font-size:.66rem; font-weight:800; letter-spacing:.05em; border-radius:20px;
  padding:5px 10px; white-space:nowrap; max-width:44vw; overflow:hidden; text-overflow:ellipsis;
}

/* ========== PLAYER CHAT ========== */
/* The chat button only exists inside an online room (net.js shows/hides it), and
   the panel is a corner sheet so it never covers the dice or the roll buttons. */
.chat-btn { position:relative; width:auto; min-width:34px; padding:0 9px; }
.chat-unread {
  position:absolute; top:-4px; right:-4px; min-width:16px; height:16px; padding:0 3px;
  border-radius:8px; background:#ef4444; color:#fff; font-size:.6rem; font-weight:800;
  display:grid; place-items:center; line-height:1;
}

.chat-panel {
  position:fixed; z-index:60; right:12px; bottom:12px;
  width:min(320px, calc(100vw - 24px)); height:min(400px, 62vh);
  display:flex; flex-direction:column; gap:8px;
  background:var(--bg-card); border:1px solid rgba(255,255,255,0.12);
  border-radius:16px; padding:10px;
  box-shadow:0 18px 50px rgba(0,0,0,0.55);
}
.chat-head { display:flex; align-items:center; gap:8px; }
.chat-title { font-size:.9rem; font-weight:800; flex:1 1 auto; }
.chat-room { font-size:.66rem; font-weight:800; letter-spacing:.06em; color:#c4b5fd; }
.chat-close { width:28px; height:28px; font-size:.9rem; }

.chat-log {
  flex:1 1 auto; overflow-y:auto; overscroll-behavior:contain;
  display:flex; flex-direction:column; gap:6px; padding-right:2px;
  font-size:.8rem; line-height:1.35;
}
.chat-msg { display:flex; flex-direction:column; gap:2px; max-width:92%; }
.chat-msg .chat-meta { font-size:.62rem; color:var(--muted); display:flex; gap:5px; align-items:center; }
.chat-msg .chat-bubble {
  background:rgba(255,255,255,0.07); border-radius:12px; padding:6px 9px;
  word-break:break-word; white-space:pre-wrap; overflow-wrap:anywhere;
}
.chat-msg.mine { align-self:flex-end; align-items:flex-end; }
.chat-msg.mine .chat-bubble { background:rgba(124,58,237,0.28); border:1px solid rgba(124,58,237,0.45); }
.chat-msg .chat-dot { width:9px; height:9px; border-radius:50%; display:inline-block; }
.chat-msg.system { align-self:center; max-width:100%; }
.chat-msg.system .chat-bubble { background:transparent; color:var(--muted); font-style:italic; text-align:center; }
.chat-empty { color:var(--muted); font-size:.75rem; font-style:italic; text-align:center; margin:auto 0; }

.chat-form { display:flex; gap:6px; align-items:center; }
.chat-input { flex:1 1 auto; min-width:0; }
.chat-form .start-btn.small { padding:9px 14px; font-size:.82rem; }

@media (max-width:520px) {
  .chat-panel { left:12px; right:12px; width:auto; height:min(340px, 55vh); }
}