/* ========== 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 ========== */
/* A 3-column grid instead of a flex row: each card is exactly a third of the
   start card, so the row can never overflow. The old row needed 380px
   (3x min-width:120px + 2 gaps) inside a 308px card, and the 72px overflow was
   silently clipped by the card's overflow-x:hidden - the outer halves of the
   first and last button were cut off on every screen wider than 520px. */
.mode-select {
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px;
  margin:18px 0 6px;
}
.mode-btn {
  position:relative; display:flex; flex-direction:column; align-items:center;
  justify-content:flex-start; gap:6px; min-height:104px; padding:14px 8px 12px;
  border:2px solid rgba(255,255,255,0.10); border-radius:16px;
  background:linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  color:var(--text); cursor:pointer;
  transition:transform 0.15s ease, border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.mode-btn:hover { border-color:rgba(124,58,237,0.55); transform:translateY(-2px); }
.mode-btn:active { transform:translateY(0) scale(0.98); }
.mode-btn:focus-visible { outline:2px solid #c4b5fd; outline-offset:2px; }
.mode-btn.selected {
  border-color:#7c3aed;
  background:linear-gradient(180deg, rgba(124,58,237,0.34), rgba(124,58,237,0.14));
  box-shadow:0 6px 18px rgba(124,58,237,0.30);
}
/* A tick badge, so the active mode is readable at a glance and not only by the
   border colour (colour alone also fails for colour-blind users). */
.mode-btn.selected::after {
  content:'✓'; position:absolute; top:6px; right:8px; width:16px; height:16px;
  border-radius:50%; background:#7c3aed; color:#fff; font-size:10px; line-height:1;
  display:grid; place-items:center;
}
/* A fixed round badge gives the three emoji the same optical size - at
   font-size alone they have different heights and the cards looked uneven. */
.mode-icon {
  width:40px; height:40px; border-radius:50%; display:grid; place-items:center;
  background:rgba(255,255,255,0.07); font-size:22px; line-height:1;
}
.mode-btn.selected .mode-icon { background:rgba(124,58,237,0.38); }
.mode-label { font-size:clamp(11.5px, 3.1vw, 13.5px); font-weight:700; line-height:1.15; }
/* margin-top:auto pins the description to the bottom of the card, so the icon
   row (top) and the description row (bottom) line up across all three cards
   even when one label wraps to two lines. */
.mode-desc { font-size:clamp(9px, 2.5vw, 10.5px); line-height:1.25; opacity:0.62; margin-top:auto; }
.mode-btn.selected .mode-desc { opacity:0.85; }
/* 320-380px phones: keep three readable columns and drop the hint text instead
   of letting every card wrap into a wall of words. */
@media (max-width:380px) {
  .mode-btn { min-height:88px; padding:12px 4px 10px; }
  .mode-icon { width:32px; height:32px; font-size:18px; }
  .mode-label { font-size:11px; }
  .mode-desc { display:none; }
}
.ai-settings-section { margin-top:14px; }
.player-count-section { margin-top:14px; }
.dice-mode-section { width:100%; margin-top:14px; }

/* ========== 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 ========== */
/* The start card holds the 3-column mode picker plus two rows of options, so it
   gets more room than the other overlays: 420px gives every mode column ~117px
   instead of ~97px. Phones keep the 90% width, so nothing changes there. */
#start-screen .overlay-card { max-width:420px; }
.color-section { width:100%; margin-top:14px; }
.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); }
}