:root {
  color-scheme: light;
  --bg: #f4efe6;
  --bg-accent: #e6dfd1;
  --deep-green: #274030;
  --forest: #2f4b36;
  --sage: #dbe3d6;
  --clay: #c78853;
  --rust: #9a4f2e;
  --ink: #1f1a16;
  --muted: rgba(31, 26, 22, 0.65);
  --card: #fffaf3;
  --shadow: 0 20px 40px rgba(22, 36, 26, 0.18);
  --radius: 18px;
  font-family: "Space Grotesk", "Helvetica Neue", sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background: radial-gradient(circle at 20% 20%, #fdf8f0, #efe8dc 45%, #e2d7c7);
  color: var(--ink);
  position: relative;
}

.grain {
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.08'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: 0;
}

.page {
  position: relative;
  z-index: 1;
  padding: 36px clamp(20px, 4vw, 48px) 60px;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.hero {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.logo-row {
  width: 100%;
  display: flex;
  justify-content: flex-start;
}

.hero-main {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
}

.hero-side {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-end;
}

.hero-brand {
  max-width: 620px;
}

.logo {
  width: 96px;
  height: auto;
}

h1,
h2,
h3 {
  font-family: "Playfair Display", "Georgia", serif;
  margin: 0;
}

h1 {
  font-size: clamp(2.3rem, 3.6vw, 3.1rem);
}

h2 {
  font-size: clamp(1.4rem, 2.4vw, 1.8rem);
}

h3 {
  font-size: clamp(1.1rem, 2vw, 1.4rem);
}

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 0.7rem;
  color: var(--muted);
  margin: 0 0 8px;
}

.subhead {
  margin: 12px 0 0;
  max-width: 540px;
  color: var(--muted);
  line-height: 1.6;
}

.status-card {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px 22px;
  display: flex;
  gap: 22px;
  align-items: center;
  flex-wrap: wrap;
}

.lang-toggle {
  background: var(--card);
  border-radius: 999px;
  box-shadow: var(--shadow);
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.lang-title {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--muted);
}

.switch-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: #5a3a1e;
}

.lang-code {
  font-size: 0.8rem;
}

.switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: #e2d0b8;
  border-radius: 999px;
  transition: background 0.2s ease;
}

.slider::before {
  content: "";
  position: absolute;
  height: 18px;
  width: 18px;
  left: 3px;
  top: 3px;
  background: #fff6ed;
  border-radius: 50%;
  box-shadow: 0 4px 10px rgba(69, 45, 19, 0.25);
  transition: transform 0.2s ease;
}

.switch input:checked + .slider {
  background: #c6a783;
}

.switch input:checked + .slider::before {
  transform: translateX(20px);
}

.status-card .label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--muted);
  margin: 0 0 6px;
}

.status-card .value {
  font-size: 1.05rem;
  margin: 0;
}

.layout {
  display: block;
}

.board-panel {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  overflow-x: auto;
}

.board-header {
  display: flex;
  gap: 16px;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
}

.board-header p {
  margin: 6px 0 0;
  color: var(--muted);
}

.legend {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.board-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
  order: -1;
}

.legend-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.btn.compact {
  padding: 8px 14px;
  font-size: 0.8rem;
}

.legend-item {
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--sage);
}

.legend-item.bonus {
  background: #f6e6c6;
  color: #624219;
}

.legend-item.hazard {
  background: #f2c9b6;
  color: #6f2d14;
}

.legend-item.finish {
  background: #d5ebce;
  color: #1c3e1d;
}

.board {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px 0px;
  min-width: 520px;
  --road-gap: 16px;
}

.tile {
  position: relative;
  padding: 10px;
  min-height: 86px;
  border-radius: 14px;
  border: 1px solid rgba(126, 116, 104, 0.25);
  background: linear-gradient(180deg, #cfc6bb, #b8aea2);
  box-shadow: inset 0 0 0 0.6px rgba(255, 255, 255, 0.35);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 6px;
  font-size: 0.75rem;
  color: #3f3428;
  --lane-color: rgba(244, 233, 197, 0.95);
  --lane-inset: 10%;
  --lane-extend: calc(var(--road-gap) / 2);
  --gap-half: calc(var(--road-gap) / 2);
  --lane-left: var(--lane-inset);
  --lane-right: var(--lane-inset);
  --lane-top: var(--lane-inset);
  --lane-bottom: var(--lane-inset);
  overflow: visible;
}

.tile .number {
  font-weight: 700;
  font-size: 0.9rem;
  color: #5c4630;
}

.tile .label {
  color: rgba(63, 52, 40, 0.7);
  line-height: 1.3;
  padding-right: 68px;
}

.tile.start .label,
.tile.finish .label {
  padding-right: 0;
}

.tile-illustration {
  margin-top: auto;
  z-index: 1;
  display: flex;
  width: 100%;
}

.tile-illustration.start {
  justify-content: flex-start;
}

.tile-illustration img {
  max-width: 62px;
  max-height: 44px;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 3px 5px rgba(36, 29, 21, 0.18));
}

.tile-illustration.start img {
  max-width: 88px;
  max-height: 56px;
}

.tile .token {
  position: absolute;
  right: 8px;
  bottom: 8px;
  width: 96px;
  height: 72px;
  transform-origin: center;
  z-index: 2;
  transform: scaleX(-1);
}

.tile .token-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  pointer-events: none;
}

.tile .token.facing-right {
  transform: none;
}

.tile .smoke {
  position: absolute;
  bottom: 16px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(164, 145, 121, 0.98);
  filter: blur(0.9px);
  opacity: 0;
  animation: smokePuff 1400ms ease-out forwards;
  z-index: 1;
  --smoke-dx: -12px;
}

.tile .smoke.left {
  right: 72px;
  --smoke-dx: -18px;
}

.tile .smoke.right {
  right: 18px;
  --smoke-dx: 16px;
}

@keyframes smokePuff {
  0% {
    opacity: 0;
    transform: translate(0, 0) scale(0.7);
  }
  20% {
    opacity: 0.95;
  }
  100% {
    opacity: 0;
    transform: translate(var(--smoke-dx), -26px) scale(1.6);
  }
}

.tile.is-current {
  border: 2px solid rgba(186, 141, 78, 0.8);
  background: linear-gradient(160deg, #d4c6b4, #b8a58f);
  box-shadow: 0 12px 20px rgba(126, 98, 63, 0.25);
}

.tile.join-right {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  --lane-right: calc(var(--lane-inset) - var(--lane-extend));
}

.tile.join-left {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  --lane-left: calc(var(--lane-inset) - var(--lane-extend));
}

.tile.join-top {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  --lane-top: calc(var(--lane-inset) - var(--lane-extend));
}

.tile.join-bottom {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  --lane-bottom: calc(var(--lane-inset) - var(--lane-extend));
}

.tile.corner-ne.join-bottom,
.tile.corner-nw.join-bottom,
.tile.corner-se.join-bottom,
.tile.corner-sw.join-bottom {
  margin-bottom: calc(-1 * var(--gap-half));
}

.tile.corner-ne.join-top,
.tile.corner-nw.join-top,
.tile.corner-se.join-top,
.tile.corner-sw.join-top {
  margin-top: calc(-1 * var(--gap-half));
}

.tile.is-complete::after {
  content: "✓";
  position: absolute;
  top: 8px;
  right: 8px;
  font-weight: 700;
  color: #5c4630;
}

.tile.bonus {
  background: linear-gradient(150deg, #efe0c6, #d9c5a6);
  border-color: rgba(186, 141, 78, 0.5);
  --lane-color: rgba(255, 238, 191, 0.95);
}

.tile.hazard {
  background: linear-gradient(150deg, #f2d7cf, #e3bfb4);
  border-color: rgba(199, 122, 96, 0.5);
  --lane-color: rgba(255, 219, 207, 0.95);
}

.tile.start,
.tile.start.is-current {
  background-color: #ffffff;
  background-image: url("assets/farmer.png");
  background-repeat: no-repeat;
  background-size: auto 80%;
  background-position: left 8px bottom 6px;
  border-color: rgba(186, 141, 78, 0.65);
}

.tile.start .number,
.tile.start .label {
  position: relative;
  z-index: 3;
  color: #5a5046;
  text-shadow:
    -1px -1px 0 rgba(255, 255, 255, 0.96),
    1px -1px 0 rgba(255, 255, 255, 0.96),
    -1px 1px 0 rgba(255, 255, 255, 0.96),
    1px 1px 0 rgba(255, 255, 255, 0.96),
    0 2px 5px rgba(255, 255, 255, 0.75);
  -webkit-text-stroke: 0.35px rgba(255, 255, 255, 0.9);
}

.tile.start .label {
  font-weight: 600;
}

.tile.start::before,
.tile.start::after {
  display: none;
}

.tile.finish,
.tile.finish.is-current {
  background: #ffffff;
  background-image: url("assets/characters.png");
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  border-color: rgba(92, 97, 91, 0.4);
}

.tile.finish .number,
.tile.finish .label {
  color: #2f352f;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.85);
}

.tile.finish::before,
.tile.finish::after {
  display: none;
}

.tile::before,
.tile::after {
  content: "";
  position: absolute;
  border-radius: 999px;
  background: repeating-linear-gradient(
    90deg,
    var(--lane-color) 0 12px,
    transparent 12px 22px
  );
  opacity: 0.85;
}

.tile.path-h::before {
  left: var(--lane-left);
  right: var(--lane-right);
  top: 50%;
  height: 4px;
  transform: translateY(-50%);
}

.tile.path-v::before {
  top: var(--lane-top);
  bottom: var(--lane-bottom);
  left: 50%;
  width: 4px;
  transform: translateX(-50%);
  background: repeating-linear-gradient(
    180deg,
    var(--lane-color) 0 12px,
    transparent 12px 22px
  );
}

.tile.corner-ne::before,
.tile.corner-se::before {
  left: 50%;
  right: var(--lane-right);
  top: 50%;
  height: 4px;
  transform: translateY(-50%);
}

.tile.corner-nw::before,
.tile.corner-sw::before {
  left: var(--lane-left);
  right: 50%;
  top: 50%;
  height: 4px;
  transform: translateY(-50%);
}

.tile.corner-ne::after,
.tile.corner-nw::after {
  top: var(--lane-top);
  bottom: 50%;
  left: 50%;
  width: 4px;
  transform: translateX(-50%);
  background: repeating-linear-gradient(
    180deg,
    var(--lane-color) 0 12px,
    transparent 12px 22px
  );
}

.tile.corner-se::after,
.tile.corner-sw::after {
  top: 50%;
  bottom: var(--lane-bottom);
  left: 50%;
  width: 4px;
  transform: translateX(-50%);
  background: repeating-linear-gradient(
    180deg,
    var(--lane-color) 0 12px,
    transparent 12px 22px
  );
}

.tile:not(.path-h):not(.path-v):not(.corner-ne):not(.corner-nw):not(.corner-se):not(.corner-sw)::before,
.tile:not(.path-h):not(.path-v):not(.corner-ne):not(.corner-nw):not(.corner-se):not(.corner-sw)::after {
  display: none;
}

.rules-collapsible {
  margin-top: 8px;
  border-radius: 14px;
  border: 1px dashed rgba(39, 64, 48, 0.25);
  padding: 10px 14px;
  background: linear-gradient(135deg, #fff7ea, #f3e5cf);
}

.rules-collapsible summary {
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.rules-collapsible summary::marker {
  display: none;
}

.rules-collapsible summary::after {
  content: "▾";
  font-size: 0.9rem;
  color: #6a3b1b;
  display: inline-block;
  margin-left: 2px;
  transition: transform 0.2s ease;
}

.rules-collapsible[open] summary::after {
  transform: rotate(180deg);
}

.rules-collapsible ul {
  margin: 12px 0 0;
  padding-left: 18px;
  color: var(--muted);
  line-height: 1.5;
}

.rules-lang {
  margin-top: 12px;
  justify-content: space-between;
  width: 100%;
}

.floating-result {
  position: fixed;
  right: 24px;
  bottom: 24px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 250, 243, 0.95);
  padding: 10px 14px;
  border-radius: 999px;
  box-shadow: var(--shadow);
  z-index: 9;
}


.spinner-wrap {
  margin: 18px auto 12px;
  width: 190px;
  height: 190px;
  position: relative;
}

.spinner {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  position: relative;
  background: #f7efe3;
  border: 4px solid #f7efe3;
  box-shadow: inset 0 0 0 2px rgba(146, 98, 45, 0.18);
  overflow: hidden;
}

.spinner-wheel {
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  transition: transform 1.8s cubic-bezier(0.2, 0.8, 0.2, 1);
  display: grid;
  place-items: center;
  background: conic-gradient(
    #f7e1bf 0deg 60deg,
    #f3d0a7 60deg 120deg,
    #ead3ae 120deg 180deg,
    #e7c8a0 180deg 240deg,
    #f5d7b0 240deg 300deg,
    #f0cba0 300deg 360deg
  );
  border: 2px solid rgba(146, 98, 45, 0.2);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6);
  --slice-radius: clamp(46px, 18vw, 92px);
}

.spinner-wheel span {
  position: absolute;
  font-weight: 700;
  color: #5d3b1a;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
}

.spinner-wheel span:nth-child(1) {
  --angle: 30deg;
  transform: rotate(var(--angle)) translateY(calc(-1 * var(--slice-radius)))
    rotate(calc(-1 * var(--angle)));
}

.spinner-wheel span:nth-child(2) {
  --angle: 90deg;
  transform: rotate(var(--angle)) translateY(calc(-1 * var(--slice-radius)))
    rotate(calc(-1 * var(--angle)));
}

.spinner-wheel span:nth-child(3) {
  --angle: 150deg;
  transform: rotate(var(--angle)) translateY(calc(-1 * var(--slice-radius)))
    rotate(calc(-1 * var(--angle)));
}

.spinner-wheel span:nth-child(4) {
  --angle: 210deg;
  transform: rotate(var(--angle)) translateY(calc(-1 * var(--slice-radius)))
    rotate(calc(-1 * var(--angle)));
}

.spinner-wheel span:nth-child(5) {
  --angle: 270deg;
  transform: rotate(var(--angle)) translateY(calc(-1 * var(--slice-radius)))
    rotate(calc(-1 * var(--angle)));
}

.spinner-wheel span:nth-child(6) {
  --angle: 330deg;
  transform: rotate(var(--angle)) translateY(calc(-1 * var(--slice-radius)))
    rotate(calc(-1 * var(--angle)));
}

.spinner-center {
  position: absolute;
  inset: 50%;
  width: 24px;
  height: 24px;
  background: #fff7eb;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  border: 2px solid rgba(95, 60, 25, 0.5);
  box-shadow: 0 4px 10px rgba(60, 38, 14, 0.25);
}

.spinner-pointer {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-bottom: 18px solid #6b3e1b;
}

.spin-modal {
  text-align: center;
}

.spin-modal .spinner-wrap {
  width: min(300px, 70vw);
  height: min(300px, 70vw);
  margin: 12px auto 18px;
}

.spin-result {
  margin: 8px 0 0;
  font-weight: 600;
  color: var(--forest);
}

.spin-result span {
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.spin-result strong {
  display: block;
  margin-top: 6px;
  font-size: clamp(2.2rem, 7vw, 3.6rem);
  line-height: 1;
  color: #1f3a2b;
}
.roll-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.btn {
  border: none;
  border-radius: 999px;
  padding: 10px 18px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn:active {
  transform: translateY(1px) scale(0.98);
}

.btn.primary {
  background: var(--forest);
  color: #fffaf3;
  box-shadow: 0 10px 20px rgba(39, 64, 48, 0.3);
}

.spin-btn {
  font-size: 1.05rem;
  padding: 14px 26px;
  letter-spacing: 0.04em;
  box-shadow: 0 16px 30px rgba(29, 64, 36, 0.35),
    0 0 0 4px rgba(214, 182, 123, 0.35);
  background: linear-gradient(145deg, #2f5b3d, #1f3a2b);
  position: relative;
  animation: spinBounce 1.4s ease-in-out infinite;
}

@keyframes spinBounce {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }
  45% {
    transform: translateY(-6px) scale(1.03);
  }
  70% {
    transform: translateY(2px) scale(0.99);
  }
}

.btn.ghost {
  background: #f4ede1;
  color: #5c3c1f;
}

.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  box-shadow: none;
}

.roll-result {
  margin-top: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--forest);
}

.mode-tag {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 4px 8px;
  border-radius: 999px;
  background: #e3d2b9;
  color: #5c3c1f;
}

.rules-card ul {
  margin: 12px 0 18px;
  padding-left: 18px;
  color: var(--muted);
  line-height: 1.5;
}

.backdrop {
  position: fixed;
  inset: 0;
  background: rgba(31, 26, 22, 0.45);
  backdrop-filter: blur(6px);
  z-index: 10;
}

.confetti-canvas {
  position: fixed;
  inset: 0;
  z-index: 12;
  pointer-events: none;
}

.modal {
  position: fixed;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  background: #fffaf1;
  border-radius: 20px;
  box-shadow: 0 25px 45px rgba(25, 22, 16, 0.25);
  padding: 24px;
  width: min(520px, calc(100% - 40px));
  z-index: 11;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.badge {
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  background: #f1e1c8;
  color: #6a3b1b;
}

.question-text {
  margin: 0;
  line-height: 1.5;
}

.options {
  display: grid;
  gap: 10px;
}

.option {
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(39, 64, 48, 0.2);
  background: #fff;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.option:hover {
  border-color: rgba(39, 64, 48, 0.5);
  transform: translateY(-1px);
}

.option.correct {
  border-color: #2f6e3c;
  background: #e6f4ea;
}

.option.wrong {
  border-color: #b34a2d;
  background: #fce8e2;
}

.feedback {
  font-weight: 600;
  margin: 0;
  min-height: 1.4em;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
}

.hidden {
  display: none !important;
}

@media (max-width: 960px) {
  .hero-main {
    flex-direction: column;
    align-items: flex-start;
  }

  .hero-side {
    align-items: flex-start;
  }

  .lang-toggle {
    justify-content: space-between;
    width: 100%;
  }

  .floating-result {
    right: 14px;
    bottom: 14px;
  }
}

@media (max-width: 640px) {
  .tile {
    min-height: 90px;
  }

  .tile .token {
    width: 72px;
    height: 56px;
  }

  .tile-illustration img {
    max-width: 52px;
    max-height: 36px;
  }

  .tile-illustration.start img {
    max-width: 70px;
    max-height: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .spinner-wheel,
  .spin-btn,
  .btn,
  .option {
    transition: none;
  }

  .spin-btn {
    animation: none;
  }
}