:root {
  --navy: #102f3a;
  --cream: #fffaf0;
  --mint: #d8f3ec;
  --sky: #dcecfb;
  --peach: #fbded8;
  --sun: #ffe69a;
  --lilac: #eadff1;
  --game-shadow: 0 11px 0 rgba(9, 40, 48, .24), 0 28px 70px rgba(8, 42, 50, .24);
}

body {
  background:
    radial-gradient(circle at 8% 9%, rgba(245,189,79,.27) 0 6px, transparent 7px),
    radial-gradient(circle at 92% 19%, rgba(232,111,90,.24) 0 8px, transparent 9px),
    radial-gradient(circle at 82% 83%, rgba(255,255,255,.18) 0 5px, transparent 6px),
    linear-gradient(145deg, #164956 0%, #1e7378 48%, #2a8a88 100%);
  background-size: 72px 72px, 94px 94px, 58px 58px, auto;
}

.topbar { color: white; }
.brand-mark {
  background: var(--coral);
  border: 3px solid white;
  transform: rotate(-4deg);
  box-shadow: 0 5px 0 #b94636, 0 10px 24px rgba(7,35,42,.24);
}
.ghost-button {
  color: white;
  border: 2px solid rgba(255,255,255,.52);
  background: rgba(16,47,58,.35);
  backdrop-filter: blur(8px);
}
.ghost-button:hover { color: var(--ink); background: white; border-color: white; }

.setup-card {
  border: 4px solid var(--navy);
  border-radius: 38px;
  background: var(--cream);
  box-shadow: var(--game-shadow);
}
.setup-card::before {
  content: "LES  •  FLYT  •  VINN";
  position: absolute;
  right: 31px;
  top: 28px;
  padding: 9px 13px;
  border: 2px solid var(--navy);
  border-radius: 999px;
  color: var(--navy);
  background: var(--sun);
  font-size: .7rem;
  font-weight: 1000;
  letter-spacing: .11em;
  transform: rotate(3deg);
  z-index: 1;
}
.setup-card::after {
  right: -86px;
  top: -105px;
  width: 252px;
  height: 252px;
  border-width: 42px;
  border-color: rgba(232,111,90,.17);
}
.setup-card h1 {
  color: var(--navy);
  text-shadow: 3px 3px 0 rgba(245,189,79,.42);
}
.setup-card .eyebrow {
  display: inline-block;
  padding: 7px 11px;
  border-radius: 9px;
  color: white;
  background: var(--teal);
  transform: rotate(-2deg);
}
.intro { color: #48636a; }

.choice {
  position: relative;
  border: 2px solid var(--navy);
  border-radius: 17px;
  background: white;
  box-shadow: 0 5px 0 rgba(16,47,58,.14);
}
.choice:hover { transform: translateY(-3px); box-shadow: 0 8px 0 rgba(16,47,58,.12); }
.choice[aria-pressed="true"] {
  color: var(--navy);
  border-color: var(--navy);
  background: color-mix(in srgb, var(--choice-color, var(--amber)) 19%, white);
  box-shadow: inset 0 0 0 3px white, 0 6px 0 var(--choice-color, var(--teal));
  transform: translateY(-2px);
}
#listChoices .choice { padding-top: 20px; }
#listChoices .choice::before {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  top: 8px;
  left: 50%;
  border-radius: 50%;
  background: var(--choice-color);
  transform: translateX(-50%);
  box-shadow: 14px 0 0 color-mix(in srgb, var(--choice-color) 45%, white), -14px 0 0 color-mix(in srgb, var(--choice-color) 45%, white);
}
.primary-button {
  border: 3px solid var(--navy);
  border-radius: 17px;
  color: white;
  background: var(--coral);
  box-shadow: 0 7px 0 #a94235, 0 14px 24px rgba(93,39,31,.17);
}
.primary-button:hover { background: #ef765f; transform: translateY(-2px); box-shadow: 0 9px 0 #a94235, 0 17px 27px rgba(93,39,31,.17); }
.primary-button:active { transform: translateY(5px); box-shadow: 0 2px 0 #a94235; }

.game-heading { color: white; }
.game-heading .eyebrow { color: #bfe9e5; }
.game-heading h1 { text-shadow: 3px 4px 0 rgba(6,37,44,.34); }
.list-chip {
  color: var(--navy);
  border: 2px solid white;
  background: white;
  box-shadow: 0 5px 0 rgba(8,42,50,.24);
}

.board-shell {
  border: 4px solid rgba(255,255,255,.78);
  border-radius: 34px;
  background: var(--navy);
  box-shadow: var(--game-shadow);
}
.board {
  gap: clamp(3px, .8vw, 7px);
  padding: clamp(3px, .8vw, 7px);
  border: 0;
  border-radius: 22px;
  background: #0b2730;
  overflow: hidden;
}
.cell {
  border: 0;
  border-radius: clamp(7px, 1.5vw, 14px);
  background: white;
  box-shadow: inset 0 -6px 0 rgba(16,47,58,.10), inset 0 2px 0 rgba(255,255,255,.92);
}
.cell:nth-child(5n + 1) { background: var(--sun); }
.cell:nth-child(5n + 2) { background: var(--mint); }
.cell:nth-child(5n + 3) { background: var(--sky); }
.cell:nth-child(5n + 4) { background: var(--peach); }
.cell:nth-child(5n + 5) { background: var(--lilac); }
.cell.goal {
  color: white;
  background: linear-gradient(145deg, #ec745e 0%, #ca4f41 100%);
  box-shadow: inset 0 -7px 0 rgba(97,25,19,.23), inset 0 2px 0 rgba(255,255,255,.28);
}
.cell-word {
  color: var(--navy);
  font-size: clamp(.73rem, 2.25vw, 1.22rem);
  letter-spacing: -.015em;
}
.goal .cell-word { color: white; text-shadow: 0 2px 0 rgba(74,20,15,.26); }
.cell-number {
  top: 6px;
  left: 7px;
  min-width: 20px;
  height: 20px;
  padding: 0 4px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: white;
  background: rgba(16,47,58,.68);
  font-size: clamp(.56rem, 1.4vw, .7rem);
}
.goal .cell-number { color: var(--navy); background: var(--sun); }
.route-badge {
  border: 2px solid white;
  box-shadow: 0 3px 0 rgba(16,47,58,.2);
}
.routes { filter: drop-shadow(0 3px 1px rgba(8,35,42,.22)); }
.route-ladder { stroke: #9b642b; stroke-width: 1.65; opacity: 1; }
.route-rung { stroke: #ffe6a8; stroke-width: 1.35; opacity: 1; }
.route-snake-outline { stroke-width: 4.25; }
.route-snake { stroke: #df503f; stroke-width: 2.45; opacity: 1; }
.cell.current-landing { animation: landingPop .75s ease 2; }
@keyframes landingPop {
  50% { transform: scale(.91); box-shadow: inset 0 0 0 6px white, 0 0 0 5px var(--amber); }
}

.token {
  width: clamp(34px, 5.2vw, 50px);
  height: clamp(34px, 5.2vw, 50px);
  border: 3px solid white;
  font-size: clamp(.82rem, 2vw, 1.1rem);
  box-shadow: 0 4px 0 rgba(16,47,58,.36), 0 6px 9px rgba(16,47,58,.22);
}
.tokens { max-width: 106px; gap: 3px; }
.start-tokens { gap: 6px; }
.start-dock { color: white; padding-top: 16px; }
.start-label {
  color: var(--navy);
  border: 2px solid white;
  background: var(--sun);
  box-shadow: 0 4px 0 rgba(0,0,0,.18);
  transform: rotate(-2deg);
}

.play-panel {
  border: 4px solid rgba(255,255,255,.76);
  background: linear-gradient(165deg, #173b45 0%, #0c2a33 100%);
  box-shadow: var(--game-shadow);
}
.turn-player { margin-top: 8px; }
.turn-color { width: 23px; height: 23px; border-width: 3px; box-shadow: 0 3px 0 rgba(0,0,0,.22); }
.dice-button {
  border: 3px solid #0a2730;
  color: var(--navy);
  background: linear-gradient(145deg, #fffdf7 0%, #f7e8c8 100%);
  box-shadow: inset 0 -9px 0 #e0c998, 0 8px 0 #071f26, 0 13px 25px rgba(0,0,0,.22);
}
.dice-button:hover:not(:disabled) { transform: translateY(-3px) rotate(-.5deg); }
.dice-button:active:not(:disabled) { transform: translateY(5px); box-shadow: inset 0 -5px 0 #e0c998, 0 3px 0 #071f26; }
.die-face { color: var(--coral); text-shadow: 0 4px 0 rgba(129,48,38,.14); }
.dice-text {
  display: inline-block;
  padding: 5px 11px;
  border-radius: 999px;
  color: white;
  background: var(--teal);
}
.status {
  min-height: 58px;
  padding: 12px 13px;
  border-radius: 14px;
  color: white;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.12);
}
.source { color: #bcd0d4; }

dialog {
  border: 4px solid var(--navy);
  background: var(--cream);
  box-shadow: 0 10px 0 rgba(8,37,44,.32), 0 35px 100px rgba(7,28,34,.45);
}
.prompt-word { color: var(--coral); text-shadow: 3px 4px 0 rgba(245,189,79,.44); }
.word-confirm {
  border: 3px solid var(--navy);
  box-shadow: 0 6px 0 #a94235;
}
.word-confirm:active { transform: translateY(4px); box-shadow: 0 2px 0 #a94235; }

@media (max-width: 820px) {
  .play-panel { border-width: 3px; }
  .dice-button { box-shadow: inset 0 -7px 0 #e0c998, 0 5px 0 #071f26; }
  .status { min-height: 48px; }
}
@media (max-width: 610px) {
  .setup-card::before { position: static; display: inline-block; margin: 0 0 17px; transform: rotate(2deg); }
  .setup-card .eyebrow { display: none; }
  .setup-card h1 { font-size: clamp(2.45rem, 12vw, 3.5rem); }
  .board-shell { padding: 7px; border-width: 3px; border-radius: 22px; }
  .board { gap: 3px; padding: 3px; border-radius: 14px; }
  .cell { border-radius: 7px; box-shadow: inset 0 -4px 0 rgba(16,47,58,.1); }
  .cell-number { top: 3px; left: 3px; min-width: 15px; height: 15px; padding: 0 2px; }
  .cell-word { font-size: clamp(.66rem, 3.3vw, .92rem); }
}

/* Original brand and tactile, readable die. */
.topbar { min-height: 108px; }
.brand-original {
  display: block;
  background: transparent;
  padding: 4px 12px;
  border-radius: 20px;
  box-shadow: none;
}
.topbar-actions { display: flex; align-items: center; gap: 9px; }
.sound-toggle { display: grid; place-items: center; width: 44px; padding: 0; flex: 0 0 44px; }
.sound-toggle .sound-cross { display: none; }
.sound-toggle[aria-pressed="false"] .sound-waves { display: none; }
.sound-toggle[aria-pressed="false"] .sound-cross { display: block; }
.sound-toggle:focus-visible { outline: 4px solid #f5bd4f; outline-offset: 4px; }
.brand-logo { display: block; width: 146px; height: auto; }
.dice-button {
  min-height: 213px;
  gap: 20px;
  padding: 26px 12px 18px;
  border: 1px solid rgba(255,255,255,.17);
  background: radial-gradient(ellipse at 50% 28%, #387b7c, #204f59 74%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.17), 0 5px 0 #071f26;
}
.dice-button:hover:not(:disabled) { transform: translateY(-2px); filter: none; }
.dice-button:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 2px 0 #071f26; }
.dice-button:disabled { opacity: 1; cursor: default; }
.die-face {
  display: grid;
  grid-template: repeat(3, 1fr) / repeat(3, 1fr);
  place-items: center;
  gap: 7px;
  width: 104px;
  height: 104px;
  padding: 18px;
  background: linear-gradient(140deg, #fffefb 18%, #fff4df 80%);
  border: 2px solid #fff;
  border-radius: 23px;
  transform: rotate(-7deg);
  box-shadow: inset -4px -5px 0 #ead6b3, inset 3px 3px 0 white, 1px 7px 0 #c4ab82, 3px 17px 17px #0a2b3580;
  text-shadow: none;
  transition: transform .45s ease;
}
.pip {
  display: block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  opacity: 0;
  background: #235764;
  box-shadow: inset 1px 2px 2px #0d303d, 0 1px 0 white;
}
.die-face[data-value="1"] .pip:nth-child(5),
.die-face[data-value="3"] .pip:nth-child(5),
.die-face[data-value="5"] .pip:nth-child(5),
.die-face[data-value="2"] .pip:nth-child(1),
.die-face[data-value="2"] .pip:nth-child(9),
.die-face[data-value="3"] .pip:nth-child(1),
.die-face[data-value="3"] .pip:nth-child(9),
.die-face[data-value="4"] .pip:nth-child(1),
.die-face[data-value="4"] .pip:nth-child(3),
.die-face[data-value="4"] .pip:nth-child(7),
.die-face[data-value="4"] .pip:nth-child(9),
.die-face[data-value="5"] .pip:nth-child(1),
.die-face[data-value="5"] .pip:nth-child(3),
.die-face[data-value="5"] .pip:nth-child(7),
.die-face[data-value="5"] .pip:nth-child(9),
.die-face[data-value="6"] .pip:nth-child(1),
.die-face[data-value="6"] .pip:nth-child(3),
.die-face[data-value="6"] .pip:nth-child(4),
.die-face[data-value="6"] .pip:nth-child(6),
.die-face[data-value="6"] .pip:nth-child(7),
.die-face[data-value="6"] .pip:nth-child(9) { opacity: 1; }
.die-face[data-value="1"] .pip:nth-child(5) { background: #d65c47; box-shadow: inset 1px 2px 2px #a93f30; }
.dice-button[data-phase="move"] .die-face { transform: rotate(0); }
.dice-button.rolling .die-face { animation: gentleRoll 1.2s ease-in-out; }
@keyframes gentleRoll {
  0%,100% { transform: rotate(-7deg) translateY(0); }
  25% { transform: rotate(15deg) translateY(-9px); }
  50% { transform: rotate(-16deg) translateY(-3px); }
  75% { transform: rotate(9deg) translateY(-7px); }
}
.dice-text {
  background: #fff3d7;
  color: #173b45;
  max-width: 100%;
  padding: 8px 14px;
  white-space: normal;
  font-size: 1rem;
  line-height: 1.3;
}
.dice-button[data-phase="moving"] .dice-text,
.dice-button[data-phase="reading"] .dice-text,
.dice-button[data-phase="rolling"] .dice-text { background: transparent; color: #e1f0ed; }
.travelling-token {
  position: absolute;
  z-index: 9;
  transform: translate(-50%, -50%) scale(1.2);
  pointer-events: none;
}
.route-snake-outline { stroke: #fff6e7; stroke-width: 4.3; opacity: 1; }
.route-snake { stroke: #f28c67; stroke-width: 3.1; }
.route-snake-pattern { fill: none; stroke: #d56950; stroke-width: 1.7; stroke-linecap: round; stroke-dasharray: .25 3.1; }
.snake-head { filter: drop-shadow(0 .35px .2px #552c2940); }
.snake-start .route-badge.down { top: auto; bottom: 6px; right: 5px; width: auto; min-width: 27px; padding-inline: 3px; font-size: .75rem; }
.snake-start .cell-word { transform: translateY(3px); }
.listen-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 50px;
  padding: 10px 20px;
  border: 2px solid #2a7f83;
  border-radius: 16px;
  background: #e8f5f4;
  color: #205d60;
  font-weight: 800;
  cursor: pointer;
}
.listen-button:hover:not(:disabled) { background: #d5efed; }
.listen-button:disabled { cursor: default; }
.listen-button.playing { background: #2a7f83; color: white; }
.listen-button:focus-visible { outline: 4px solid #f5bd4f; outline-offset: 4px; }
.audio-status { margin: 10px 0; color: #8d352b; font-size: .9rem; }
.audio-status:empty { margin: 0; }
.listen-button + audio + .audio-status + .dialog-message { margin-top: 20px; }
.cell.current-landing { animation: landingPulse 1.1s ease; }
@media (max-width: 820px) {
  .dice-button { min-height: 157px; gap: 14px; padding: 15px 8px 12px; }
  .die-face { width: 76px; height: 76px; padding: 13px; gap: 4px; border-radius: 18px; }
  .pip { width: 12px; height: 12px; }
  .dice-text { padding: 6px 9px; font-size: .875rem; }
  .status { font-size: 1rem; }
}
@media (max-width: 610px) {
  .topbar { min-height: 93px; }
  .brand-logo { width: 120px; }
  .brand-original { border-radius: 16px; padding: 3px 9px; }
}
@media (max-width: 390px) {
  .topbar { gap: 8px; }
  .brand-logo { width: 100px; }
  .brand-original { padding-inline: 0; }
  .topbar-actions { gap: 6px; }
  #newGameButton { font-size: .875rem; padding-inline: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .dice-button.rolling .die-face, .cell.current-landing { animation: none; }
  .die-face { transition: none; }
}

/* A simpler, brighter game surface with the board as the clear focus. */
html,
body {
  background: #f5fafb;
}

body {
  background: linear-gradient(180deg, #ffffff 0, #f5fafb 340px);
}

.topbar,
main {
  width: min(1600px, calc(100% - 20px));
}

.topbar {
  min-height: 48px;
  color: var(--ink);
}

.brand-original {
  padding: 0;
}

.brand-logo {
  width: 90px;
}

.ghost-button {
  color: var(--ink);
  border: 1px solid var(--line);
  background: #ffffff;
  box-shadow: none;
  backdrop-filter: none;
}

.ghost-button:hover {
  color: var(--ink);
  border-color: #a9c8cc;
  background: #f4fafa;
}

main {
  padding: 0 0 28px;
}

.setup-card {
  max-width: 820px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: #ffffff;
  box-shadow: 0 16px 42px rgba(23, 59, 69, .09);
}

.setup-card::before,
.setup-card::after {
  display: none;
}

.setup-card h1,
.game-heading h1 {
  color: var(--ink);
  text-shadow: none;
}

.setup-card .eyebrow {
  padding: 0;
  color: var(--teal);
  background: transparent;
  transform: none;
}

.choice {
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: none;
}

.choice:hover {
  border-color: var(--choice-color, var(--teal));
  box-shadow: none;
  transform: translateY(-1px);
}

.choice[aria-pressed="true"] {
  border-color: var(--choice-color, var(--teal));
  background: color-mix(in srgb, var(--choice-color, var(--teal)) 10%, white);
  box-shadow: inset 0 0 0 1px var(--choice-color, var(--teal));
  transform: none;
}

#listChoices .choice {
  padding-top: 10px;
}

#listChoices .choice::before {
  display: none;
}

.primary-button {
  border: 0;
  border-radius: 14px;
  box-shadow: none;
}

.primary-button:hover,
.primary-button:active {
  box-shadow: none;
}

.game-heading {
  margin: 0 0 7px;
  color: var(--ink);
}

.game-heading .eyebrow {
  display: none;
}

.game-heading h1 {
  font-size: clamp(1.45rem, 2.7vw, 2.25rem);
  line-height: 1;
}

.list-chip {
  padding: 6px 10px;
  color: var(--ink);
  border: 1px solid var(--line);
  background: #ffffff;
  box-shadow: none;
}

.game-layout {
  grid-template-columns: minmax(0, 1fr) minmax(230px, 260px);
  gap: 14px;
}

@media (min-width: 901px) {
  .game-layout {
    grid-template-columns: minmax(0, 760px) minmax(230px, 260px);
    justify-content: center;
  }

  .board-shell {
    width: 100%;
    max-width: 760px;
  }
}

.board-shell {
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: #ffffff;
  box-shadow: 0 14px 38px rgba(23, 59, 69, .10);
}

.board {
  gap: 2px;
  padding: 2px;
  border: 2px solid var(--ink);
  border-radius: 14px;
  background: #dce8ea;
}

.cell,
.cell:nth-child(5n + 1),
.cell:nth-child(5n + 2),
.cell:nth-child(5n + 3),
.cell:nth-child(5n + 4),
.cell:nth-child(5n + 5) {
  border-radius: 0;
  background: #ffffff;
  box-shadow: none;
}

.cell:nth-child(even) {
  background: #f0f8f7;
}

.cell.goal {
  color: #ffffff;
  background: var(--ink);
  box-shadow: none;
}

.cell-number {
  top: 6px;
  left: 7px;
  min-width: 0;
  height: auto;
  padding: 0;
  color: var(--muted);
  background: transparent;
  border-radius: 0;
}

.goal .cell-number {
  color: rgba(255, 255, 255, .7);
  background: transparent;
}

.route-badge {
  border: 1px solid #ffffff;
  box-shadow: none;
}

.routes {
  filter: none;
}

.start-dock {
  color: var(--ink);
  padding-top: 13px;
}

.start-label {
  border: 0;
  background: #f5d77f;
  box-shadow: none;
  transform: none;
}

.play-panel {
  padding: 16px;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 22px;
  background: #ffffff;
  box-shadow: 0 12px 32px rgba(23, 59, 69, .08);
}

.turn-label {
  color: var(--muted);
}

.turn-color {
  border-color: #ffffff;
  box-shadow: 0 0 0 1px var(--line);
}

.dice-button {
  min-height: 190px;
  border: 1px solid #cfe3e3;
  color: var(--ink);
  background: #edf7f6;
  box-shadow: none;
}

.dice-button:hover:not(:disabled) {
  background: #e3f2f1;
  box-shadow: none;
  transform: translateY(-1px);
}

.dice-button:active:not(:disabled) {
  box-shadow: none;
  transform: translateY(1px);
}

.die-face {
  border: 1px solid #d9e3e2;
  background: #ffffff;
  box-shadow: 0 6px 16px rgba(23, 59, 69, .13);
  transform: none;
}

.dice-button[data-phase="move"] .die-face {
  transform: none;
}

.dice-text,
.dice-button[data-phase="moving"] .dice-text,
.dice-button[data-phase="reading"] .dice-text,
.dice-button[data-phase="rolling"] .dice-text {
  color: var(--ink);
  background: transparent;
}

.status {
  color: var(--ink);
  background: #f7fafb;
  border: 1px solid #e2ecee;
}

.source {
  color: var(--muted);
}

dialog {
  border: 1px solid var(--line);
  background: #ffffff;
  box-shadow: 0 24px 70px rgba(9, 35, 42, .25);
}

.prompt-word {
  text-shadow: none;
}

.word-confirm,
.word-confirm:active {
  border: 0;
  box-shadow: none;
}

@media (max-width: 900px) {
  .game-layout {
    grid-template-columns: 1fr;
    gap: 7px;
  }

  .play-panel {
    position: static;
    order: -1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 126px;
    column-gap: 9px;
    align-items: center;
    padding: 8px;
    border-radius: 16px;
  }

  .turn-label {
    font-size: .66rem;
    letter-spacing: .07em;
  }

  .turn-player {
    gap: 7px;
    margin: 2px 0 4px;
    font-size: 1.05rem;
  }

  .turn-color {
    width: 14px;
    height: 14px;
  }

  .dice-button {
    grid-row: 1 / span 2;
    grid-column: 2;
    min-height: 90px;
    gap: 4px;
    padding: 7px 5px 6px;
    border-radius: 14px;
  }

  .die-face {
    width: 64px;
    height: 64px;
    padding: 8px;
    gap: 2px;
    border-radius: 15px;
  }

  .pip {
    width: 14px;
    height: 14px;
  }

  .dice-text {
    padding: 2px 5px;
    font-size: .76rem;
    line-height: 1.1;
  }

  .status {
    grid-column: 1;
    min-height: 0;
    margin: 0;
    padding: 6px 7px;
    font-size: .78rem;
    line-height: 1.25;
  }

  .source {
    grid-column: 1 / -1;
    margin: 3px 2px 0;
    font-size: .64rem;
    line-height: 1.2;
  }
}

@media (max-width: 610px) {
  .topbar,
  main {
    width: min(100% - 10px, 1600px);
  }

  .topbar {
    min-height: 42px;
    gap: 6px;
  }

  .brand-logo {
    width: 72px;
  }

  .topbar-actions {
    gap: 4px;
  }

  .sound-toggle {
    width: 36px;
    min-height: 36px;
    flex-basis: 36px;
  }

  .ghost-button {
    min-height: 36px;
    padding: 0 10px;
    font-size: .78rem;
  }

  .game-heading {
    margin-bottom: 3px;
  }

  .game-heading h1 {
    font-size: 1.1rem;
  }

  .list-chip {
    gap: 5px;
    padding: 4px 7px;
    font-size: .7rem;
  }

  .list-dot {
    width: 8px;
    height: 8px;
  }

  .board-shell {
    padding: 4px;
    border-radius: 15px;
  }

  .board {
    gap: 1px;
    padding: 1px;
    border-radius: 10px;
  }

  .cell {
    border-radius: 0;
  }

  .tokens {
    max-width: 72px;
    gap: 1px;
  }
}