* { box-sizing: border-box; }

:root {
  --bg: #f4ead8;
  --card: #fffdf7;
  --ink: #3a2f24;
  --accent: #4da258;
  --board: #d9c9a8;
  --cell: #efe3c8;
  --pit: #4a3c2c;
  --start: #cfe3cd;
  --goal: #f3d9a0;
  --hl: #ffd54d;
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--ink);
  min-height: 100vh;
}

header {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 0.6rem 1.2rem;
  background: #3a2f24;
  color: #f4ead8;
}
header h1 { margin: 0; font-size: 1.4rem; }
#room-info { font-size: 0.95rem; opacity: 0.9; }
#room-code { font-weight: bold; letter-spacing: 2px; }

main { max-width: 1100px; margin: 0 auto; padding: 1rem; }

.hidden { display: none !important; }
.muted { color: #7a6d5c; }
.error { color: #b33a2b; min-height: 1.2em; }

.card {
  background: var(--card);
  border-radius: 12px;
  padding: 1.2rem 1.5rem;
  box-shadow: 0 2px 8px rgba(58, 47, 36, 0.15);
  max-width: 420px;
  margin: 1rem auto;
}
.tagline { margin-top: 0; }

label { display: block; margin-bottom: 0.8rem; font-weight: 600; }
input {
  display: block;
  width: 100%;
  margin-top: 0.3rem;
  padding: 0.55rem 0.7rem;
  font-size: 1rem;
  border: 2px solid #cbbca4;
  border-radius: 8px;
  background: #fff;
}
input:focus { outline: none; border-color: var(--accent); }

button {
  font-size: 1rem;
  padding: 0.55rem 1.1rem;
  border: none;
  border-radius: 8px;
  background: #d9c9a8;
  color: var(--ink);
  cursor: pointer;
  font-weight: 600;
}
button:hover { filter: brightness(0.95); }
button.primary { background: var(--accent); color: #fff; width: 100%; margin: 0.4rem 0; }
.join-row { display: flex; gap: 0.5rem; margin-top: 0.8rem; }
.join-row input { margin: 0; text-transform: uppercase; letter-spacing: 2px; }

.rules summary { cursor: pointer; font-weight: 600; }
.rules ul { padding-left: 1.2rem; }
.rules li { margin: 0.35rem 0; }

.code { letter-spacing: 3px; font-size: 1.2em; }

.player-list { list-style: none; padding: 0; margin: 0.8rem 0; }
.player-list li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0;
}
.player-list .dot {
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid rgba(0,0,0,0.25);
  flex-shrink: 0;
}
.player-list .offline { opacity: 0.45; }
.player-list .you { font-weight: 700; }
.player-list .badge {
  font-size: 0.75rem;
  background: #d9c9a8;
  border-radius: 6px;
  padding: 0.05rem 0.4rem;
}

/* ---- game layout ---- */
#screen-game {
  display: grid;
  grid-template-columns: 1fr 260px;
  grid-template-areas:
    "status status"
    "board  sidebar"
    "controls sidebar";
  gap: 0.8rem;
}
#status-bar { grid-area: status; display: flex; align-items: center; gap: 1rem; min-height: 3rem; }
#board-wrap { grid-area: board; overflow-x: auto; }
#controls { grid-area: controls; display: flex; gap: 0.6rem; flex-wrap: wrap; }
#controls button.primary { width: auto; }
#sidebar { grid-area: sidebar; }

#turn-indicator {
  font-size: 1.1rem;
  font-weight: 600;
  background: var(--card);
  padding: 0.5rem 1rem;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(58,47,36,0.12);
}
#die-display {
  font-size: 1.6rem;
  font-weight: 800;
  background: #fff;
  border: 3px solid var(--ink);
  border-radius: 10px;
  width: 3rem; height: 3rem;
  display: flex; align-items: center; justify-content: center;
}

#board {
  display: grid;
  grid-template-columns: 2rem repeat(9, minmax(52px, 1fr));
  gap: 4px;
  background: var(--board);
  padding: 10px;
  border-radius: 12px;
  min-width: 560px;
}
.lane-label {
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 1.1rem; color: #6b5b45;
}
.lane-label.rolled { color: #b33a2b; }
.col-head {
  text-align: center; font-size: 0.7rem; font-weight: 700;
  color: #6b5b45; text-transform: uppercase; align-self: end;
}

.cell {
  position: relative;
  aspect-ratio: 1;
  background: var(--cell);
  border-radius: 8px;
  border: 2px solid transparent;
}
.cell.start { background: var(--start); }
.cell.goal { background: var(--goal); }
.cell.pit { background: var(--pit); }
.cell.pit::before {
  content: "";
  position: absolute; inset: 22%;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #2c2417, #120e08);
}
.cell.lane-hl { box-shadow: inset 0 0 0 3px rgba(179, 58, 43, 0.45); }
.cell.clickable { border-color: var(--hl); cursor: pointer; box-shadow: 0 0 8px 2px var(--hl); }
.cell.clickable:hover { filter: brightness(1.08); }
.cell.selected { border-color: #b33a2b; box-shadow: 0 0 8px 2px #b33a2b; }
.cell.target { border-color: var(--accent); cursor: pointer; box-shadow: 0 0 8px 2px var(--accent); }

.stack {
  position: absolute; inset: 0;
  display: flex; flex-direction: column-reverse;
  align-items: center; justify-content: center;
  pointer-events: none;
}
.hog {
  width: 62%;
  height: 26%;
  border-radius: 50% 50% 42% 42%;
  border: 2px solid rgba(0,0,0,0.35);
  margin-top: -8%;
  box-shadow: 0 1px 2px rgba(0,0,0,0.35);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.6rem;
}
.hog.stuck::after { content: "💤"; font-size: 0.7em; }

#log {
  background: var(--card);
  border-radius: 10px;
  padding: 0.6rem 0.8rem;
  height: 320px;
  overflow-y: auto;
  font-size: 0.85rem;
  box-shadow: 0 2px 6px rgba(58,47,36,0.12);
}
#log p { margin: 0.25rem 0; }

#toast {
  position: fixed;
  bottom: 1.5rem; left: 50%;
  transform: translateX(-50%);
  background: #b33a2b; color: #fff;
  padding: 0.6rem 1.2rem;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  z-index: 10;
}

@media (max-width: 760px) {
  #screen-game {
    grid-template-columns: 1fr;
    grid-template-areas: "status" "board" "controls" "sidebar";
  }
  #log { height: 180px; }
}