:root {
  --sea: #2a6f97;
  --sea-deep: #184e77;
  --sand: #e9dcc3;
  --ink: #23201b;
  --panel: #fffdf7;
  --accent: #c1440e;
  --accent-d: #9e3409;
  --good: #2e7d32;
  --line: #d8cdb5;
  --shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
  color: var(--ink);
  background: radial-gradient(circle at 50% 0%, #3a80b3, var(--sea-deep));
  min-height: 100%;
}

.screen { display: none; min-height: 100vh; }
.screen.active { display: block; }

/* ---------- Home + lobby cards ---------- */
.home-card {
  max-width: 640px;
  margin: 6vh auto;
  background: var(--panel);
  border-radius: 16px;
  box-shadow: var(--shadow);
  padding: 28px 32px;
}
.home-card h1 { margin: 0 0 4px; font-size: 2.1rem; }
.home-card h1 span { display: block; font-size: 0.95rem; color: var(--accent); letter-spacing: 2px; text-transform: uppercase; }
.tagline { color: #6b6355; margin-top: 0; }
label { display: block; font-size: 0.85rem; font-weight: 600; margin: 14px 0 4px; color: #4a4436; }
input, select {
  width: 100%; padding: 10px 12px; font-size: 1rem;
  border: 1px solid var(--line); border-radius: 8px; background: #fff;
}
.home-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 18px; }
.panel { border: 1px solid var(--line); border-radius: 12px; padding: 14px; background: #fbf7ee; }
.panel h3 { margin: 0 0 6px; }
button {
  cursor: pointer; border: none; border-radius: 8px; padding: 11px 16px;
  font-size: 1rem; font-weight: 700; background: #eee; color: var(--ink);
  transition: transform 0.05s ease, filter 0.15s ease;
}
button:hover:not(:disabled) { filter: brightness(1.05); }
button:active:not(:disabled) { transform: translateY(1px); }
button:disabled { opacity: 0.5; cursor: not-allowed; }
button.primary { background: var(--accent); color: #fff; width: 100%; margin-top: 12px; }
button.primary:hover:not(:disabled) { background: var(--accent-d); }
.error { color: #b3261e; font-weight: 600; min-height: 1.2em; }
.hint { color: #6b6355; }

.code-box {
  display: flex; align-items: center; gap: 10px; justify-content: center;
  background: var(--ink); color: #ffd9a0; border-radius: 10px; padding: 12px;
  font-size: 2rem; letter-spacing: 8px; font-weight: 800; margin: 8px 0 16px;
}
.code-box button { background: transparent; font-size: 1.2rem; padding: 4px; }
.player-list { list-style: none; padding: 0; }
.player-list li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; background: #f5efe2; margin-bottom: 6px; }
.swatch { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(0,0,0,0.25); }

/* ---------- Game layout ---------- */
#game.active { display: flex; flex-direction: column; height: 100vh; }
#topbar {
  display: flex; align-items: center; gap: 16px; padding: 8px 16px;
  background: var(--ink); color: #f4ecd8; flex: 0 0 auto;
}
.brand { font-weight: 800; font-size: 1.1rem; }
.turn-banner { font-weight: 700; color: #ffd9a0; flex: 1; }
.dice { display: flex; align-items: center; gap: 8px; }
.die { width: 46px; height: 46px; filter: drop-shadow(0 2px 3px rgba(0,0,0,0.4)); animation: die-in 0.25s ease; }
.dice-total { font-size: 1.5rem; font-weight: 800; color: #ffd9a0; margin-left: 2px; }
@keyframes die-in { from { transform: rotate(-18deg) scale(0.6); opacity: 0; } to { transform: none; opacity: 1; } }
.game-code { font-family: monospace; opacity: 0.7; }
.res-label { font-weight: 600; }

#gameMain { display: flex; flex: 1; min-height: 0; }
#boardWrap { position: relative; flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 50% 40%, var(--sea), var(--sea-deep)); }
#board { width: 100%; height: 100%; }
.prompt {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
  background: rgba(35,32,27,0.9); color: #ffe; padding: 8px 16px; border-radius: 20px;
  font-weight: 700; box-shadow: var(--shadow); pointer-events: none; max-width: 80%; text-align: center;
}

#sidebar {
  flex: 0 0 320px; background: var(--panel); display: flex; flex-direction: column;
  border-left: 2px solid var(--line); min-height: 0;
}
.players { padding: 10px; display: flex; flex-direction: column; gap: 6px; border-bottom: 1px solid var(--line); }
.pcard { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px; background: #f6f0e3; font-size: 0.85rem; }
.pcard.current { outline: 2px solid var(--accent); background: #fff4e6; }
.pcard .pname { font-weight: 700; flex: 1; }
.pcard .badges { display: flex; gap: 4px; font-size: 0.75rem; }
.pcard .vp { font-weight: 800; }
.pcard.disconnected { opacity: 0.5; }
.badge { background: #e0d6c0; border-radius: 6px; padding: 1px 5px; }
.badge.lr { background: #6a4a2b; color: #fff; }
.badge.la { background: #7a2b2b; color: #fff; }

.my-hand { padding: 10px; border-bottom: 1px solid var(--line); }
.res-row { display: flex; gap: 6px; flex-wrap: wrap; }
.res-chip { display: flex; align-items: center; gap: 4px; background: #f0e9d8; border-radius: 8px; padding: 4px 8px; font-weight: 700; }
.dev-row { margin-top: 8px; display: flex; gap: 6px; flex-wrap: wrap; }
.dev-chip { background: #efe3ff; border: 1px solid #d8c4f0; border-radius: 8px; padding: 3px 8px; font-size: 0.8rem; cursor: pointer; }
.dev-chip:hover { background: #e3d0ff; }

.actions { padding: 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; border-bottom: 1px solid var(--line); }
.actions button { font-size: 0.85rem; padding: 9px 8px; background: #efe7d5; }
.actions button.hot { background: var(--accent); color: #fff; }
.actions button.act { background: var(--good); color: #fff; }
.actions .wide { grid-column: 1 / -1; }

.log-wrap { flex: 1; overflow: hidden; display: flex; flex-direction: column; padding: 10px; min-height: 0; }
.log-wrap h4 { margin: 0 0 6px; }
.log { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1; font-size: 0.82rem; }
.log li { padding: 3px 6px; border-bottom: 1px solid #f0e9d8; }
.log li:nth-child(odd) { background: #faf6ec; }

/* Board interactive elements */
.hex-clickable { cursor: pointer; }
.spot { cursor: pointer; }
.spot:hover { filter: brightness(1.3); }
.spot-vertex { fill: #ffe08a; stroke: #b3801e; stroke-width: 3; opacity: 0.85; }
.spot-edge { stroke: #ffe08a; stroke-width: 10; stroke-linecap: round; opacity: 0.75; cursor: pointer; }
.spot-edge:hover { stroke: #fff; }
.spot-hex { fill: rgba(255,255,255,0.15); stroke: #ffe08a; stroke-width: 4; cursor: pointer; }
.spot-hex:hover { fill: rgba(255,255,255,0.3); }

/* Modal */
.modal-back { position: fixed; inset: 0; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; z-index: 50; }
.modal { background: var(--panel); border-radius: 14px; padding: 22px; max-width: 520px; width: 92%; box-shadow: var(--shadow); max-height: 90vh; overflow: auto; }
.modal h3 { margin-top: 0; }
.modal-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 8px 0; }
.stepper { display: flex; align-items: center; gap: 8px; }
.stepper button { width: 30px; height: 30px; padding: 0; }
.modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; }
.dev-card-img { width: 120px; border-radius: 8px; box-shadow: var(--shadow); }

@media (max-width: 820px) {
  #gameMain { flex-direction: column; }
  #sidebar { flex: 1 1 auto; border-left: none; border-top: 2px solid var(--line); }
  .home-actions { grid-template-columns: 1fr; }
}

/* ============ Animations & new UI (rejoin, goats, sound) ============ */

/* Mute button in the top bar */
.mute-btn { background: transparent; color: #f4ecd8; font-size: 1.2rem; padding: 4px 8px; }
.mute-btn:hover { filter: brightness(1.2); }

/* Home: rejoin recent games */
.recent { margin-top: 18px; }
.recent-title { font-weight: 700; font-size: 0.85rem; color: #6b6355; margin-bottom: 6px; }
.recent-btn {
  display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px;
  background: #f5efe2; border: 1px solid var(--line); border-radius: 10px;
  padding: 8px 14px; margin: 0 8px 8px 0; font-family: monospace; font-size: 1.05rem; font-weight: 800;
  letter-spacing: 2px; transition: transform 0.08s ease, background 0.15s ease;
}
.recent-btn:hover { background: #fff4e6; transform: translateY(-2px); }
.recent-btn span { font-family: "Trebuchet MS", sans-serif; font-weight: 500; font-size: 0.75rem; letter-spacing: 0; color: #6b6355; }

/* Goat tooltip in the resource bar */
.res-chip { position: relative; transition: transform 0.1s ease; }
.res-chip[data-goat] { cursor: help; }
.res-chip[data-goat]::after {
  content: "🐐 Zlatan is the goat"; position: absolute; bottom: 130%; left: 50%;
  transform: translateX(-50%) scale(0.8); transform-origin: bottom center;
  background: var(--ink); color: #ffe08a; padding: 6px 10px; border-radius: 8px;
  font-size: 0.78rem; font-weight: 700; white-space: nowrap; box-shadow: var(--shadow);
  opacity: 0; pointer-events: none; transition: opacity 0.15s ease, transform 0.15s ease; z-index: 20;
}
.res-chip[data-goat]:hover::after { opacity: 1; transform: translateX(-50%) scale(1); }
.res-chip[data-goat]:hover { transform: translateY(-2px) rotate(-3deg); }

/* Resource chip pops when its count goes up */
.res-chip.changed { animation: chipPop 0.5s ease; }
@keyframes chipPop {
  0% { transform: scale(1); }
  35% { transform: scale(1.4); background: #ffe08a; }
  100% { transform: scale(1); }
}

/* Number token that just paid out */
.token, .robber-piece { transform-box: fill-box; transform-origin: center; }
.token-rolled { animation: tokenPulse 0.9s ease; }
@keyframes tokenPulse {
  0%, 100% { transform: scale(1); }
  30% { transform: scale(1.5); }
  60% { transform: scale(1.15); }
}
.robber-piece { animation: robberBob 2.4s ease-in-out infinite; }
@keyframes robberBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }

/* Clickable placement spots gently pulse to draw the eye */
.spot-vertex { animation: spotPulse 1.3s ease-in-out infinite; }
.spot-edge { animation: spotPulseStroke 1.3s ease-in-out infinite; }
@keyframes spotPulse { 0%, 100% { opacity: 0.55; r: 12; } 50% { opacity: 0.95; r: 16; } }
@keyframes spotPulseStroke { 0%, 100% { opacity: 0.5; } 50% { opacity: 0.9; } }

/* Log entries slide in */
.log-in { animation: logIn 0.35s ease; }
@keyframes logIn { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: none; } }

/* Current player card glow */
.pcard.current { animation: currentGlow 2s ease-in-out infinite; }
@keyframes currentGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(193, 68, 14, 0.4); }
  50% { box-shadow: 0 0 0 4px rgba(193, 68, 14, 0.15); }
}

/* Modals fade + scale in */
.modal-back { animation: fadeIn 0.2s ease; }
.modal { animation: modalIn 0.25s cubic-bezier(0.2, 0.9, 0.3, 1.3); }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes modalIn { from { opacity: 0; transform: translateY(16px) scale(0.96); } to { opacity: 1; transform: none; } }

/* Screen transitions */
.screen.active { animation: screenIn 0.35s ease; }
@keyframes screenIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Winner banner celebration */
.turn-banner.win { animation: winPulse 0.8s ease-in-out infinite; }
@keyframes winPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); color: #fff; } }

/* Buttons get a little press feedback everywhere */
.actions button, .primary, .recent-btn, .dev-chip { transition: transform 0.06s ease, filter 0.15s ease, background 0.15s ease; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; }
}