:root {
  --ink: #20352b;
  --muted: #63786a;
  --leaf: #4b9b62;
  --leaf-dark: #2f7146;
  --sky: #c9eff2;
  --cream: #fff9e7;
  --paper: #ffffff;
  --gold: #f4bf45;
  --shadow: 0 16px 36px rgba(35, 79, 48, 0.17);
  font-family: "Trebuchet MS", "Microsoft YaHei", sans-serif;
  color: var(--ink);
  background: var(--sky);
}

* { box-sizing: border-box; }

body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  background-color: #bce9dc;
  background-image: url("assets/forest-bg.svg");
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
}

button, input { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: 0.55; }

#app { min-height: 100vh; padding: 28px 18px 42px; }
.screen-shell { width: min(1180px, 100%); margin: 0 auto; }

.setup-card, .control-card, .players-card, .message-card, .game-over-card {
  background: rgba(255, 255, 255, 0.94);
  border: 3px solid rgba(47, 113, 70, 0.14);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.setup-card {
  max-width: 660px;
  margin: 7vh auto 0;
  padding: 38px;
  text-align: center;
}

.eyebrow { margin: 0 0 8px; color: var(--leaf-dark); font-weight: 800; letter-spacing: 0.08em; }
h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 12px; font-size: 3rem; line-height: 1; }
h2 { margin-bottom: 10px; font-size: 1.8rem; }
.subtitle { color: var(--muted); font-size: 1.08rem; }

.field-label { display: block; margin: 24px 0 10px; text-align: left; font-weight: 800; }
.player-count { display: grid; grid-template-columns: repeat(5, 1fr); gap: 9px; }
.choice-button, .primary-button, .secondary-button, .dice-button {
  border: 0;
  border-radius: 15px;
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}
.choice-button { padding: 12px 8px; background: #e2f2e3; color: var(--leaf-dark); font-weight: 800; }
.choice-button.selected { background: var(--leaf); color: white; box-shadow: 0 5px 0 var(--leaf-dark); }
.choice-button:hover, .primary-button:hover, .secondary-button:hover, .dice-button:hover { transform: translateY(-2px); }
.name-fields { display: grid; gap: 10px; margin: 12px 0 22px; }
.name-field { width: 100%; padding: 13px 15px; border: 2px solid #d9ead8; border-radius: 12px; color: var(--ink); background: #fbfff9; }
.primary-button { width: 100%; padding: 15px 22px; background: var(--gold); color: #503a0f; font-weight: 900; box-shadow: 0 5px 0 #d39b23; }
.secondary-button { padding: 10px 15px; background: #eaf5e7; color: var(--leaf-dark); font-weight: 800; }

.game-layout { display: grid; grid-template-columns: minmax(0, 1fr) 310px; gap: 18px; align-items: start; }
.game-heading { display: flex; align-items: end; justify-content: space-between; gap: 14px; margin: 0 0 14px; }
.game-heading h1 { margin: 0; font-size: 2.5rem; }
.round-label { margin: 0; color: var(--muted); font-weight: 800; }
.board-card { position: relative; padding: 18px; border-radius: 8px; background: #92cf84; box-shadow: var(--shadow); overflow: hidden; }
.board-card::before, .board-card::after { position: absolute; font-size: 3rem; opacity: .7; }
.board-card::before { content: "🌲"; top: 9px; left: 12px; }
.board-card::after { content: "🌳"; right: 12px; bottom: 8px; }
.board { position: relative; display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: 1fr; gap: 8px; aspect-ratio: 1.14; padding: 34px 28px; border: 5px solid #4b934f; border-radius: 8px; background: #a7d987; }
.space { position: relative; display: grid; place-items: center; min-width: 0; border: 3px solid rgba(53, 116, 54, .35); border-radius: 8px; background: #eaf5bf; color: #416c3e; font-weight: 900; font-size: .9rem; }
.space.special { background: #fff1b8; }
.space.special-treasure { background: #fff0b8; border-color: #d1aa44; }
.space.special-mushroom { background: #f0e6ff; border-color: #9b83c3; }
.space.special-mud { background: #efd8c9; border-color: #ae8469; }
.space.special-treehouse { background: #d9f0f4; border-color: #76aeb8; }
.space.start { background: #c5f2cb; }
.space.finish { background: #ffd87b; }
.space-label { position: absolute; top: 3px; left: 5px; font-size: .65rem; color: #5d7449; }
.space-icon { font-size: 1.5rem; }
.pieces { position: absolute; right: 3px; bottom: 3px; display: flex; max-width: calc(100% - 6px); flex-wrap: wrap; justify-content: end; gap: 2px; }
.piece { position: relative; z-index: var(--piece-index, 0); display: grid; place-items: center; flex: 0 0 28px; width: 28px; height: 28px; border: 2px solid white; border-radius: 50%; color: white; font-size: .62rem; font-weight: 900; box-shadow: 0 2px 4px rgba(0,0,0,.22); }
.piece.current { outline: 3px solid var(--gold); outline-offset: 1px; }

.side-column { display: grid; gap: 14px; }
.control-card, .players-card, .message-card { padding: 18px; }
.turn-kicker { margin: 0 0 4px; color: var(--muted); font-size: .88rem; font-weight: 800; }
.turn-name { display: flex; align-items: center; gap: 8px; margin: 0 0 15px; font-size: 1.4rem; font-weight: 900; }
.color-dot { display: inline-block; width: 16px; height: 16px; border-radius: 50%; border: 2px solid white; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.dice-button { display: grid; place-items: center; width: 100%; min-height: 118px; margin: 0 0 13px; border: 4px solid #d29b2c; background: #fff4c4; color: #715016; font-size: 3rem; font-weight: 900; box-shadow: 0 5px 0 #d29b2c; }
.dice-button.rolling { animation: bounce .45s ease-in-out infinite alternate; }
.dice-hint { margin: 0; color: var(--muted); text-align: center; font-size: .9rem; }
.message-card { min-height: 78px; color: var(--leaf-dark); font-weight: 800; }
.message-card[aria-live] { animation: pop-in 220ms ease-out; }
.players-card h2 { font-size: 1.2rem; }
.player-row { display: grid; grid-template-columns: 1fr auto; gap: 6px; padding: 10px 0; border-bottom: 1px dashed #d6e7d2; }
.player-row:last-child { border-bottom: 0; }
.player-row.current { color: var(--leaf-dark); font-weight: 900; }
.player-meta { display: flex; align-items: center; gap: 7px; min-width: 0; }
.player-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.player-status { color: var(--muted); font-size: .82rem; text-align: right; }
.game-actions { display: flex; justify-content: end; margin-top: 10px; }

#game-over { position: fixed; inset: 0; z-index: 5; display: grid; place-items: center; padding: 20px; background: rgba(32, 53, 43, .42); }
#game-over[hidden] { display: none; }
.game-over-card { width: min(500px, 100%); padding: 32px; text-align: center; }
.winner-badge { margin: 0 auto 15px; font-size: 4rem; }
.ranking { margin: 18px 0; padding: 0; list-style: none; text-align: left; }
.ranking li { display: flex; justify-content: space-between; padding: 9px 0; border-bottom: 1px solid #e1eee0; }
.overlay-actions { display: flex; gap: 10px; }
.overlay-actions > * { flex: 1; }

@keyframes bounce { from { transform: rotate(-3deg) scale(1); } to { transform: rotate(3deg) scale(1.04); } }
@keyframes pop-in { from { opacity: .3; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; } }
@media (max-width: 760px) {
  #app { padding: 15px 10px 28px; }
  .setup-card { margin-top: 3vh; padding: 24px 18px; }
  h1 { font-size: 2.1rem; }
  .game-layout { grid-template-columns: 1fr; }
  .board { aspect-ratio: 1.04; grid-template-columns: repeat(6, 1fr); grid-auto-rows: 1fr; padding: 28px 14px; gap: 5px; }
  .game-heading { align-items: start; flex-direction: column; gap: 4px; }
  .game-heading h1 { font-size: 1.8rem; }
  .space-icon { font-size: 1.1rem; }
  .pieces { right: 1px; bottom: 1px; flex-wrap: nowrap; gap: 0; }
  .piece { flex-basis: 16px; width: 16px; height: 16px; margin-left: -4px; font-size: .5rem; }
  .piece:first-child { margin-left: 0; }
  .side-column { grid-template-columns: 1fr; }
}