:root {
  color-scheme: light;
  --bg: #cfe8c4;
  --ink: #202124;
  --muted: #6f6a63;
  --panel: #fffaf2;
  --line: #d8cabb;
  --accent: #d9573f;
  --orb-bg: rgba(255, 250, 242, 0.48);
  --tile: #fefefe;
  --tile-ink: #2f2b27;
  --tile-line: rgba(77, 61, 45, 0.13);
  --tile-shadow: 0 5px 0 #d7c9b7, 0 10px 18px rgba(43, 32, 23, 0.09);
  --tile-warm-ink: #2a2119;
  --tile-selected: #1c7c7d;
  --tile-selected-ink: #fff;
  --tile-selected-shadow: 0 5px 0 #125152, 0 10px 18px rgba(18, 81, 82, 0.18);
  --tile-word-selected: #ffd775;
  --tile-word-selected-shadow: 0 5px 0 #c99428, 0 10px 18px rgba(98, 57, 17, 0.13);
  --tile-found: #f4a12b;
  --tile-found-shadow: 0 5px 0 #b67922, 0 10px 18px rgba(98, 57, 17, 0.13);
  --tile-hint: #58c4b6;
  --tile-hint-ink: #132a28;
  --tile-hint-shadow: 0 5px 0 #2f8279, 0 10px 18px rgba(47, 130, 121, 0.2);
  --board-width: min(100%, 408px);
  --board-gap: 6px;
  font-family: ui-rounded, "SF Pro Rounded", "Avenir Next", system-ui, sans-serif;
  color: var(--ink);
  background: var(--bg);
  font-synthesis: none;
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}

body {
  min-width: 320px;
  min-height: 100dvh;
  margin: 0;
  overflow-x: hidden;
  color: var(--ink);
  background: var(--bg);
}

button,
a {
  font: inherit;
}

.game-shell {
  width: min(100%, 440px);
  min-height: 100dvh;
  margin: 0 auto;
  padding: max(16px, env(safe-area-inset-top)) 16px max(18px, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.game-header,
.game-status,
.bottom-hud {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand {
  display: flex;
  gap: 3px;
  color: inherit;
  text-decoration: none;
}

.brand-tile {
  width: 28px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 1px solid #c85020;
  border-radius: 5px;
  color: #fffaf3;
  background: #e7662b;
  box-shadow: 0 2px 0 #a83c16;
  font-size: 15px;
  font-weight: 950;
}

.game-status {
  margin-top: 4px;
}

.eyebrow {
  margin: 0 0 3px;
  color: #625b54;
  font-size: 10px;
  font-weight: 850;
  text-transform: uppercase;
}

h1 {
  margin: 0;
  font-size: 23px;
  line-height: 1;
}

.top-zone {
  min-height: 150px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.score-counter {
  display: flex;
  justify-content: center;
  text-align: center;
}

.score-counter strong {
  min-width: 3ch;
  font-size: clamp(2.8rem, 16vw, 4.8rem);
  font-weight: 950;
  font-variant-numeric: tabular-nums;
  line-height: 0.95;
  transform-origin: center;
}

.current-word {
  width: 100%;
  height: 78px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-size: clamp(1.35rem, 7vw, 2rem);
  font-weight: 950;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.score-word {
  --score-rack-height: 72px;
  --score-letter-size: clamp(1.95rem, 9.4vw, 2.78rem);
  --score-label-height: calc(var(--score-letter-size) * 0.78);
  width: 100%;
  max-width: 100%;
  height: var(--score-rack-height);
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: clamp(2px, 1vw, 5px);
  animation: score-word-arrive 220ms ease both;
}

.score-word[data-length="6"] {
  --score-letter-size: clamp(1.82rem, 8.6vw, 2.46rem);
}

.score-word[data-length="7"] {
  --score-letter-size: clamp(1.58rem, 7.5vw, 2.1rem);
  gap: clamp(1px, 0.8vw, 4px);
}

.score-letter-group {
  min-width: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) 22px;
  align-items: center;
  justify-items: center;
  gap: 4px;
}

.score-letter {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--score-letter-size);
  font-weight: 950;
  line-height: 1;
}

.letter-points {
  min-width: 24px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  border-radius: 4px;
  color: white;
  background: var(--accent);
  font-size: clamp(0.58rem, 3vw, 0.86rem);
  font-weight: 950;
}

.word-bonus {
  min-width: 54px;
  align-self: stretch;
  display: grid;
  grid-template-rows: minmax(0, 1fr) 22px;
  gap: 4px;
  margin-left: 4px;
}

.vision-bonus {
  min-width: 58px;
}

.word-length,
.word-multiplier {
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
  border-radius: 4px;
  color: white;
  font-weight: 950;
  line-height: 1;
}

.word-length {
  height: var(--score-label-height);
  align-self: center;
  background: #2a2119;
  font-size: clamp(0.48rem, 2.2vw, 0.66rem);
  white-space: nowrap;
}

.word-multiplier {
  background: var(--accent);
  font-size: clamp(0.68rem, 3vw, 0.92rem);
}

.letter-points.counting,
.word-multiplier.counting {
  animation: point-count-pop 170ms ease both;
}

.score-counter strong.score-bump {
  animation: score-final-bump 170ms cubic-bezier(0.2, 0.92, 0.25, 1.18) both;
}

.hint-score-bonus {
  display: flex;
  align-items: center;
  gap: 10px;
  animation: score-word-arrive 220ms ease both;
}

.hint-score-icon {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  position: relative;
  border: 2px solid #fff7d8;
  border-radius: 50%;
  color: #fff7d8;
  background: #25131a;
}

.hint-score-dot {
  width: 11px;
  height: 11px;
  position: absolute;
  border-radius: 50%;
  background: var(--tile-selected);
  transition: opacity 160ms ease, transform 160ms ease;
}

.hint-score-dot.used {
  opacity: 0.18;
  transform: scale(0.55);
}

.hint-score-dot.dot-1 { right: 8px; top: -5px; }
.hint-score-dot.dot-2 { right: -4px; top: 7px; }
.hint-score-dot.dot-3 { right: -8px; top: 22px; }

.hint-score-value {
  min-width: 58px;
  display: block;
  margin: 0;
}

.hint-score-value .word-length {
  display: none;
}

.hint-score-value .word-multiplier {
  width: 58px;
  height: 28px;
  font-size: 0.92rem;
}

.current-word[data-kind="invalid"] {
  color: #8a2f1f;
  font-size: clamp(0.86rem, 4vw, 1.15rem);
}

.current-word[data-kind="valid"] {
  color: #166663;
}

.board-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.prep-bar {
  --prep-fill: 0%;
  --prep-color: color-mix(in srgb, var(--accent) var(--prep-fill), var(--tile-selected));
  width: calc((var(--board-width) - 6 * var(--board-gap)) * 5 / 7 + 4 * var(--board-gap));
  height: 12px;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--prep-color) 28%, var(--line));
  border-radius: 999px;
  background: color-mix(in srgb, var(--prep-color) 16%, var(--panel));
  transition: --prep-fill 260ms ease, background 260ms ease, border-color 260ms ease;
}

.prep-bar-fill {
  width: var(--prep-fill);
  height: 100%;
  border-radius: inherit;
  background: var(--prep-color);
  transform-origin: left center;
  transition: width 260ms ease;
}

.prep-bar-ticks {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.prep-bar-ticks span {
  position: absolute;
  top: 2px;
  bottom: 2px;
  width: 1.5px;
  border-radius: 1px;
  background: color-mix(in srgb, var(--panel) 52%, var(--ink));
  opacity: 0.72;
  transform: translateX(-50%);
}

.prep-bar-ticks span:nth-child(1) { left: 20%; }
.prep-bar-ticks span:nth-child(2) { left: 40%; }
.prep-bar-ticks span:nth-child(3) { left: 60%; }
.prep-bar-ticks span:nth-child(4) { left: 80%; }
.prep-bar-ticks span:nth-child(5) { display: none; }

.prep-bar[data-heat="3"] { animation: prep-overheat 400ms ease-in-out infinite; }
.prep-bar[data-heat="4"] { animation: prep-overheat 240ms ease-in-out infinite; }

.board {
  width: var(--board-width);
  max-width: 100%;
  aspect-ratio: 1;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--board-gap);
  overflow: visible;
  position: relative;
  touch-action: none;
}

.tile {
  --tile-face-shadow: var(--tile-shadow);
  --tile-ring: color-mix(in srgb, var(--tile-ink) 26%, var(--tile));
  --tile-ring-fill: var(--tile);
  min-width: 0;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border: 1px solid var(--tile-line);
  border-radius: 11px;
  color: var(--tile-ink);
  background: var(--tile);
  box-shadow: var(--tile-face-shadow), inset 0 0 0 2px var(--tile-ring), inset 0 0 0 5px var(--tile-ring-fill);
  font-size: clamp(1rem, 7.4vw, 2rem);
  font-weight: 950;
  line-height: 1;
  cursor: pointer;
  touch-action: none;
}

.tile-letter {
  line-height: 1;
  pointer-events: none;
}

.tile.swap-selected {
  --tile-face-shadow: var(--tile-selected-shadow);
  --tile-ring: color-mix(in srgb, #fff 55%, var(--tile-selected));
  --tile-ring-fill: var(--tile-selected);
  color: var(--tile-selected-ink);
  background: var(--tile-selected);
}

.tile.word-selected {
  --tile-face-shadow: var(--tile-word-selected-shadow);
  --tile-ring: color-mix(in srgb, var(--tile-warm-ink) 28%, var(--tile-word-selected));
  --tile-ring-fill: var(--tile-word-selected);
  color: var(--tile-warm-ink);
  background: var(--tile-word-selected);
}

.tile.word-found {
  --tile-face-shadow: var(--tile-found-shadow);
  --tile-ring: color-mix(in srgb, var(--tile-warm-ink) 30%, var(--tile-found));
  --tile-ring-fill: var(--tile-found);
  color: var(--tile-warm-ink);
  background: var(--tile-found);
  animation: tile-pop-celebration 420ms cubic-bezier(0.18, 0.9, 0.24, 1.2) both;
  z-index: 3;
}

.tile.hint-selected {
  --tile-face-shadow: var(--tile-hint-shadow);
  --tile-ring: color-mix(in srgb, var(--tile-hint-ink) 35%, var(--tile-hint));
  --tile-ring-fill: var(--tile-hint);
  color: var(--tile-hint-ink);
  background: var(--tile-hint);
  animation: hint-pulse 780ms ease-in-out infinite;
}

.tile.swapping {
  pointer-events: none;
  transition: transform 190ms cubic-bezier(0.2, 0.88, 0.24, 1);
  will-change: transform;
  z-index: 3;
}

.tile.shuffling {
  pointer-events: none;
  will-change: transform;
  z-index: 3;
}

.board.dropping .tile {
  animation: drop-tile 330ms cubic-bezier(0.18, 0.78, 0.24, 1);
}

.current-word.invalid {
  animation: invalid-word-shake 260ms ease;
}

.loading-status {
  position: absolute;
  inset: 32px 12px auto;
  z-index: 5;
  margin: 0;
  padding: 8px 10px;
  border-radius: 5px;
  color: #fff;
  background: #25131a;
  text-align: center;
  font-size: 12px;
}

.bottom-hud {
  min-height: 58px;
  margin-top: 2px;
  position: relative;
}

.hud-cluster {
  display: flex;
  align-items: center;
  gap: 8px;
}

.match-orb,
.hint-button,
.rewind-button {
  width: 54px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 0;
  border: 2px solid currentColor;
  border-radius: 50%;
  color: #fff7d8;
  background: #25131a;
  box-shadow: none;
}

.match-orb strong {
  color: #fff7d8;
  font-size: 1.2rem;
  font-weight: 950;
  line-height: 1;
}

.hint-button,
.rewind-button {
  cursor: pointer;
}

.rewind-button[hidden] {
  display: none;
}

.hud-icon-image {
  width: 32px;
  height: 32px;
  display: block;
  object-fit: contain;
  image-rendering: pixelated;
  mix-blend-mode: screen;
  pointer-events: none;
}

.hint-dot {
  width: 11px;
  height: 11px;
  position: absolute;
  border-radius: 50%;
  background: var(--tile-selected);
  transition: opacity 160ms ease, transform 160ms ease;
}

.hint-dot.used {
  opacity: 0;
  transform: scale(0.35);
}

.dot-one { right: 8px; top: -5px; }
.dot-two { right: -4px; top: 7px; }
.dot-three { right: -8px; top: 22px; }

.hint-button:disabled {
  color: #fff7d8;
  cursor: default;
}

.hint-button:disabled .hint-dot:not(.used) {
  opacity: 0.42;
}

.end-overlay {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: grid;
  place-items: center;
  padding: 22px;
  background: rgba(25, 31, 23, 0.48);
  backdrop-filter: blur(8px);
}

.welcome-overlay {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  padding: 22px;
  background: rgba(25, 31, 23, 0.58);
  backdrop-filter: blur(8px);
}

.welcome-overlay[hidden] {
  display: none;
}

.welcome-dialog {
  width: min(100%, 620px);
  max-height: calc(100dvh - 44px);
  overflow: auto;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: 0 22px 60px rgba(32, 29, 26, 0.24);
}

.welcome-dialog h2 {
  margin: 0 0 18px;
  font-size: clamp(1.25rem, 5vw, 1.65rem);
  line-height: 1.15;
}

.welcome-video {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 6px;
  background: #202124;
}

.welcome-video iframe {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
}

.welcome-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 16px;
}

.welcome-button {
  min-height: 46px;
  padding: 0 18px;
  border: 1px solid #a83c16;
  border-radius: 6px;
  color: #fffaf3;
  background: #e15a38;
  font-weight: 950;
  cursor: pointer;
}

.end-overlay[hidden] {
  display: none;
}

.end-panel {
  width: min(100%, 560px);
  max-height: calc(100dvh - 44px);
  overflow: auto;
  padding: 18px;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.visually-hidden {
  width: 1px;
  height: 1px;
  position: absolute;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.submission-status {
  min-height: 20px;
  margin: 0 0 8px;
  color: #fffaf2;
  font-size: 13px;
  font-weight: 850;
  text-align: center;
}

.end-panel .share-card-preview {
  width: 100%;
}

.end-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 12px;
}

.end-button {
  min-height: 46px;
  border: 1px solid rgba(255, 250, 242, 0.45);
  border-radius: 6px;
  font-weight: 950;
  cursor: pointer;
}

.share-button {
  color: #fffaf2;
  background: var(--accent);
}

.ok-button {
  color: var(--ink);
  background: var(--panel);
}

.end-button:disabled {
  opacity: 0.5;
  cursor: default;
}

@keyframes prep-overheat {
  0%, 100% { transform: translateX(0); }
  35% { transform: translateX(-2px); }
  70% { transform: translateX(2px); }
}

@keyframes hint-pulse {
  0%, 100% { filter: brightness(1); transform: scale(1); }
  50% { filter: brightness(1.08); transform: scale(1.035); }
}

@keyframes tile-pop-celebration {
  0% { transform: scale(1); }
  45% { transform: translateY(-7%) scale(1.09); }
  100% { transform: scale(1); }
}

@keyframes drop-tile {
  from { transform: translateY(-18px); opacity: 0.35; }
}

@keyframes invalid-word-shake {
  0%, 100% { transform: translateX(0); }
  28% { transform: translateX(-5px); }
  58% { transform: translateX(5px); }
}

@keyframes score-word-arrive {
  from { opacity: 0; transform: translateY(8px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes point-count-pop {
  0%, 100% { transform: scale(1); }
  50% { filter: brightness(1.25); transform: scale(1.18); }
}

@keyframes score-final-bump {
  0% { transform: scale(1); }
  50% { transform: scale(1.08); }
  100% { transform: scale(1); }
}

@media (max-height: 760px) {
  .game-shell { gap: 6px; }
  .top-zone { min-height: 112px; }
  .current-word { height: 72px; }
  .score-counter strong { font-size: 2.8rem; }
  .board { width: min(100%, 52dvh); }
  .prep-bar { width: min(72%, 280px); }
}

@media (min-width: 700px) {
  :root {
    --board-width: min(100%, 62svh);
    --board-gap: 8px;
  }

  .game-shell {
    width: min(100%, 800px);
    padding-inline: 28px;
  }

  .tile {
    border-radius: 12px;
    font-size: clamp(1.7rem, 7.6cqi, 3.35rem);
  }

  .prep-bar {
    height: 16px;
  }

  .match-orb,
  .hint-button,
  .rewind-button {
    width: 66px;
    height: 66px;
  }

  .hud-icon-image {
    width: 38px;
    height: 38px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tile,
  .board,
  .prep-bar {
    animation: none !important;
    transition: none !important;
  }
}