:root {
  --bg: linear-gradient(135deg, #f6f4ef, #fff8e5);
  color-scheme: light;
  --ink: #202124;
  --tile-ink: #202124;
  --surface: #fff;
  --surface-hover: #fff1c9;
  --separator: #d8dadd;
  --error-ink: #a32121;
  --link-ink: #0000ee;
  --button-disabled-background: #e5e5e5;
  --button-pressed-shadow: inset 0 2px 3px rgb(0 0 0 / 0.2), 0 1px 0 rgb(255 255 255 / 0.7);
  --title-ink: #593e03;
  --grid: #bfc7cf;
  --anchor: #d5ecff;
  --anchor-hover: #eef4ff;
  --anchor-drop: var(--anchor);
  --challenge-anchor: #f6cee3;
  --challenge-anchor-hover: #fde8f2;
  --challenge-anchor-drop: var(--challenge-anchor);
  --accepted: #89e59c;
  --page-max-width: 1120px;
  --page-padding: 20px;
  --page-padding-small: 12px;
  --page-safe-top: env(safe-area-inset-top, 0px);
  --page-safe-right: env(safe-area-inset-right, 0px);
  --page-safe-bottom: env(safe-area-inset-bottom, 0px);
  --page-safe-left: env(safe-area-inset-left, 0px);
  --layout-gap: 18px;
  --board-header-gap: 10px;
  --control-radius: 6px;
  --control-gap: 8px;
  --grid-size: 8; /* overridden by GRID_SIZE */
  --board-max-size: calc(var(--page-max-width) / 2);
  --board-gap: 2px;
  --board-padding: 6px;
  --board-border-width: 9px;
  --board-border-radius: 8px;
  --board-border-slice: 24;
  --accepted-board-pulse-scale: 1.01;
  --accepted-board-pulse-duration: 200ms;
  --challenge-board-glow-color: #ce79a5;
  --rack-size: 7;
  --rack-gap: 8px;
  --rack-action-button-height: 58px;
  --rack-action-button-padding: 10px;
  --rack-action-compact-button-padding: 3px;
  --rack-action-compact-image-height: 30px;
  --rack-action-play-font-size: 22px;
  --rack-action-count-size: 14px;
  --ui-button-border: 1px solid #92979d;
  --ui-button-background: linear-gradient(to bottom, #ffffff 0%, #f7f8f9 48%, #d9dde1 52%, #f4f5f6 100%);
  --ui-button-hover-background: linear-gradient(to bottom, #ffffff 0%, #f2f8ff 48%, #cbdcf0 52%, #edf5ff 100%);
  --ui-button-gloss: linear-gradient(to bottom, rgb(255 255 255 / 0.85), rgb(255 255 255 / 0.15));
  --ui-button-box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.95), inset 0 -1px 1px rgb(0 0 0 / 0.12), 0 1px 2px rgb(0 0 0 / 0.18);
  --ui-button-label-active: #42464d;
  --ui-button-text-active: var(--ui-button-label-active);
  --ui-button-text-disabled: var(--ui-button-label-disabled);
  --ui-button-text-pressed: var(--ui-button-label-pressed);
  --ui-button-label-disabled: #777c82;
  --ui-button-label-pressed: #282b30;
  --cell-font-min: 18px;
  --cell-font-max: 42px;
  --cell-font-scale: calc((100cqi - 2 * (var(--board-border-width) + var(--board-padding))) * 0.46);
  --rack-font-min: 18px;
  --rack-font-max: 36px;
  --rack-font-scale: 42cqi;
  --tile-artwork-1: url("/icons/tile-bg-1.6d13569c4487.png");
  --tile-artwork-2: url("/icons/tile-bg-2.1e9621f8c0b6.png");
  --tile-artwork-3: url("/icons/tile-bg-3.1720b8e3b6b4.png");
  --tile-artwork-4: url("/icons/tile-bg-4.00f172153ad7.png");
  --tile-artwork-5: url("/icons/tile-bg-5.754c47b6e7db.png");
  --tile-artwork-6: url("/icons/tile-bg-6.f5598681fcd9.png");
  --tile-artwork-7: url("/icons/tile-bg-7.4e438afcea80.png");
  --tile-artwork-8: url("/icons/tile-bg-8.02431e878ddd.png");
  --tile-artwork-9: url("/icons/tile-bg-9.bbaba3dae955.png");
  --tile-artwork-10: url("/icons/tile-bg-10.d4c67d350e17.png");
  --tile-artwork-11: url("/icons/tile-bg-11.7368629278bf.png");
  --tile-artwork-12: url("/icons/tile-bg-12.c9b787810fe2.png");
  --tile-artwork-13: url("/icons/tile-bg-13.f72ebe370b02.png");
  --tile-artwork-14: url("/icons/tile-bg-14.2254c4b52a63.png");
  --tile-artwork-15: url("/icons/tile-bg-15.b34d6c38eb3b.png");
  --tile-artwork-16: url("/icons/tile-bg-16.06b187e0a2ab.png");
  --tile-artwork-17: url("/icons/tile-bg-17.f554652362f8.png");
  --tile-artwork-18: url("/icons/tile-bg-18.699238e19afa.png");
  --tile-artwork: var(--tile-artwork-1);
  --rack-tile-border: 0;
  --rack-tile-border-radius: 0;
  --empty-cell-background: #fbfbfb;
  --rack-tile-color: var(--tile-ink);
  --rack-tile-box-shadow: none;
  --score-value-size: 56px;
  --high-score-value-size: 20px;
  --scoreboard-row-gap: 0;
  --scoreboard-padding-block: 0;
  --scoreboard-padding-inline: 0;
  --config-button-size: 44px;
  --config-button-icon-size: 22px;
  --language-flag-size: 22px;
  --modal-gap: 18px;
  --modal-row-padding: 16px;
  --modal-max-width: var(--board-max-size);
  --modal-close-size: 44px;
  --app-version-color: #777c82;
  --app-version-size: 12px;
  --score-bounce-scale: 1.7;
  --score-bounce-rise-duration: 50ms;
  --score-bounce-settle-duration: 500ms;
  --celebration-label-duration: 1200ms; /* overridden by CELEBRATION_LABEL_DURATION_MS */
  --celebration-points-duration: 300ms; /* overridden by CELEBRATION_POINTS_DURATION_MS */
  --celebration-points-delay: 240ms; /* overridden by CELEBRATION_POINTS_DELAY_MS */
  --celebration-label-size: 12cqi;
  --celebration-label-color: #6399ff;
  --celebration-round-number-color: #1a2640;
  --celebration-points-size: 16cqi;
  --celebration-points-color: #aa5aff;
  --celebration-points-entry-scale: 4;
  --engagement-celebration-color: #b8860b;
  --engagement-celebration-rotation: 4deg;
  --celebration-outline-width: clamp(2px, 0.8cqi, 8px);
  --celebration-outline-color: #ffffff;
  --celebration-text-shadow: 0 0.35cqi 0.7cqi rgb(0 0 0 / 0.55);
  --celebration-gap: 12px;
  --engagement-celebration-duration: 1800ms; /* overridden by ENGAGEMENT_CELEBRATION_DURATION_MS */
  --engagement-celebration-size: 9cqi;
  --engagement-celebration-inset: 14cqi;
  --game-over-duration: 500ms; /* overridden by GAME_OVER_ANIMATION_DURATION_MS */
  --game-over-entry-scale: 0.7;
  --game-over-overshoot-scale: 1.08;
  --game-over-label-color-1: #5c0a0a;
  --game-over-label-color-2: #bf9a00;
  --game-over-label-color-3: #002e60;
  --game-over-label-color-4: #320000;
  --game-over-color-duration: 7000ms;
  --play-again-width: 46cqi;
  --play-again-height: 14cqi;
  --play-again-background: #20c900;
  --play-again-border: 2px solid #159000;
  --play-again-border-radius: 3cqi;
  --play-again-icon-size: 9cqi;
  --play-again-box-shadow: 0 0.8cqi 1.5cqi rgb(0 0 0 / 0.35), inset 0 0.5cqi 0.8cqi rgb(255 255 255 / 0.35);
  --round-tile-border: var(--rack-tile-border);
  --round-tile-border-radius: var(--rack-tile-border-radius);
  --round-tile-box-shadow: var(--rack-tile-box-shadow);
  --round-tile-color: transparent;
  --round-image-opacity: 0.7; /* 0 = tile-back texture only, 1 = image only */
  --rejected-tile-shake-distance: 2%;
  --rejected-tile-shake-rotation: 2deg;
  --rejected-tile-shake-duration: 420ms;
  --rejected-tile-dim: 0.96;
  --drag-target-color: var(--anchor-drop);
  --drag-source-opacity: 0.3;
  --drag-source-color: rgb(188 188 188 / var(--drag-source-opacity));
  --rack-hover-scale: 1.1;
  --rack-insertion-width: 4px;
  --rack-insertion-offset: -8px;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: linear-gradient(135deg, #171b23, #242b35);
  --ink: #edf0f4;
  --title-ink: #f5d58a;
  --grid: #58616f;
  --empty-cell-background: #303845;
  --anchor-hover: #48576b;
  --challenge-anchor-hover: #64465c;
  --surface: #303845;
  --surface-hover: #465062;
  --separator: #58616f;
  --error-ink: #ff9c9c;
  --link-ink: #aacaff;
  --app-version-color: #b5bdc9;
  --ui-button-border: 1px solid #697484;
  --ui-button-background: linear-gradient(to bottom, #535f70 0%, #414c5d 48%, #303a49 52%, #414c5d 100%);
  --ui-button-hover-background: linear-gradient(to bottom, #63748a 0%, #4b5e75 48%, #394c65 52%, #4b5e75 100%);
  --ui-button-gloss: linear-gradient(to bottom, rgb(255 255 255 / 0.12), transparent);
  --ui-button-box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.16), inset 0 -1px 1px rgb(0 0 0 / 0.3), 0 1px 2px rgb(0 0 0 / 0.4);
  --ui-button-text-active: #edf0f4;
  --ui-button-text-disabled: #c0c7d1;
  --ui-button-text-pressed: #fff;
  --button-disabled-background: #38414f;
  --button-pressed-shadow: inset 0 2px 3px rgb(0 0 0 / 0.4), 0 1px 0 rgb(255 255 255 / 0.15);
}

:root[data-theme="dark"] #aboutButton img,
:root[data-theme="dark"] .rack-action-image-active { filter: brightness(0) invert(0.9); }
:root[data-theme="dark"] .rack-action-image-pressed { filter: brightness(0) invert(1); }
:root[data-theme="dark"] .rack-action-image-disabled { filter: brightness(0) invert(0.75); }
a { color: var(--link-ink); }

html {
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

html,
body {
  touch-action: none;
  overscroll-behavior: none;
  height: 1vw;
}

button {
  touch-action: manipulation;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: Fredoka, Helvetica, Arial, sans-serif;
  line-height: 1.35;
}

main {
  max-width: var(--page-max-width);
  margin: 0 auto;
}

/* One CSS inset owner for the game and full-screen dialogs. */
main,
.modal {
  padding:
    max(var(--page-padding), var(--page-safe-top))
    max(var(--page-padding), var(--page-safe-right))
    max(var(--page-padding), var(--page-safe-bottom))
    max(var(--page-padding), var(--page-safe-left));
}

h1, h2, h3, h4, h5, h6, b {
  color: var(--title-ink);
}

.layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-areas:
    "scoreboard ."
    "board side";
  column-gap: var(--layout-gap);
  row-gap: var(--board-header-gap);
  align-items: start;
}

.board-stage {
  grid-area: board;
  position: relative;
  width: min(100%, var(--board-max-size));
}

/* One board size container: nesting another on .board can stale WebKit media styles. */
.board-content {
  position: relative;
  width: 100%;
  container-type: inline-size;
}

.board {
  --anchor-cell-background: var(--anchor);
  --empty-cell-hover-background: var(--anchor-hover);
  display: grid;
  grid-template-columns: repeat(var(--grid-size, 8), 1fr);
  grid-template-rows: repeat(var(--grid-size, 8), 1fr);
  gap: var(--board-gap);
  width: 100%;
  aspect-ratio: 1;
  padding: var(--board-padding);
  background: linear-gradient(var(--grid), var(--grid)) padding-box;
  border: var(--board-border-width) solid transparent;
  border-image: var(--board-frame-artwork, var(--tile-artwork)) var(--board-border-slice) stretch;
  filter: drop-shadow(0 0 4px #777);
  border-radius: var(--board-border-radius);
}

.board.acceptance-pulse {
  animation: accepted-board-pulse calc(var(--accepted-board-pulse-duration) / 3) ease-in-out 3;
}

@keyframes accepted-board-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(var(--accepted-board-pulse-scale)); }
}

@media (prefers-reduced-motion: reduce) {
  .board.acceptance-pulse { animation: none; }
}

.board.challenge-round {
  --anchor-cell-background: var(--challenge-anchor);
  --empty-cell-hover-background: var(--challenge-anchor-hover);
  --drag-target-color: var(--challenge-anchor-drop);
  filter:
    drop-shadow(0 0 4px #777)
    drop-shadow(0 0 7.5px var(--challenge-board-glow-color));
  background: var(--challenge-board-glow-color);
  background-clip: padding-box;
}

.scoreboard {
  grid-area: scoreboard;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "current-score setup"
    "current-score high-score";
  align-items: center;
  row-gap: var(--scoreboard-row-gap);
  padding-block: var(--scoreboard-padding-block);
  padding-inline: var(--scoreboard-padding-inline);
}

.scoreboard b {
  color: var(--title-ink);
  font-weight: 600;
  line-height: 1;
}

.high-score {
  grid-area: high-score;
  display: flex;
  align-items: center;
  gap: 5px;
  justify-self: end;
  padding: 0 calc((var(--config-button-size) - var(--config-button-icon-size)) / 2);
  border: 0;
  border-radius: var(--control-radius);
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: var(--high-score-value-size);
  line-height: 1;
  cursor: pointer;
  min-height: var(--config-button-size);
  min-width: var(--config-button-size);
}

.high-score b {
  color: #cf8f00;
}

.high-score:disabled { cursor: not-allowed; opacity: 0.45; }

.scoreboard-setup {
  grid-area: setup;
  display: flex;
  align-items: center;
  justify-self: end;
  gap: var(--control-gap);
}

.current-score {
  grid-area: current-score;
  place-self: stretch;
  display: grid;
  place-items: center;
  line-height: 1;
  padding-left: calc((var(--config-button-size) - var(--config-button-icon-size)) / 2);
  font-size: var(--score-value-size);
  container-type: inline-size;
}

.current-score > b {
  /* The measured text width is in em; container units also handle resizing. */
  font-size: min(var(--score-value-size), calc(100cqi / var(--score-text-em, 1)));
  white-space: nowrap;
}

.config-button {
  display: grid;
  place-items: center;
  min-height: var(--config-button-size);
  min-width: var(--config-button-size);
  border-radius: var(--control-radius);
  font-size: var(--config-button-icon-size);
  line-height: 1;
  cursor: pointer;
}

.config-button:disabled { cursor: not-allowed; opacity: 0.45; }

.config-button img,
.high-score img {
  display: block;
  width: var(--config-button-icon-size);
  height: var(--config-button-icon-size);
}

.modal {
  position: fixed;
  inset: 0;
  z-index: 10;
  overflow-y: auto;
  touch-action: pan-y;
  overscroll-behavior: contain;
  background: var(--bg);
}

.modal[hidden] { display: none; }

.native-update-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding:
    max(24px, var(--page-safe-top))
    max(24px, var(--page-safe-right))
    max(24px, var(--page-safe-bottom))
    max(24px, var(--page-safe-left));
  scroll-padding-top: max(24px, var(--page-safe-top));
  scroll-padding-bottom: max(24px, var(--page-safe-bottom));
}
.native-update-panel {
  flex-shrink: 0;
  width: 100%;
  max-width: 472px; /* The 404 page's 520px panel minus its two 24px insets. */
  margin: auto;
  text-align: center;
}
.native-update-logo {
  display: block;
  width: min(34vw, 130px);
  max-width: 100%;
  height: auto;
  margin: 0 auto 28px;
}
.native-update-panel h2 {
  margin: 0 0 12px;
  font-size: clamp(1.75rem, 5vw, 2.5rem);
}
.native-update-panel p { margin: 0 0 28px; }
.native-update-actions { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; color: var(--title-ink); }
.native-update-required .native-update-actions { justify-content: center; }
.native-update-actions > * {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  padding: 10px 16px;
  border: 1px solid currentColor;
  border-radius: var(--control-radius);
  color: inherit;
  background: transparent;
  font: inherit;
  cursor: pointer;
  text-decoration: none;
}
#nativeUpdateLater { border: 0; text-decoration: underline; text-underline-offset: 3px; }
.native-update-actions > [hidden] { display: none; }
@media (pointer: fine), (pointer: none) {
  .native-update-actions > :focus-visible { outline: 3px solid currentColor; outline-offset: 4px; }
}
@media (max-height: 420px) {
  .native-update-logo { width: min(34vw, 20vh); margin-bottom: 16px; }
  .native-update-panel p { margin-bottom: 16px; }
}

.quit-screen {
  display: flex;
  align-items: center;
  justify-content: center;
}

.quit-panel {
  width: min(100%, 420px);
  text-align: center;
}

.quit-panel h2 { margin: 0 0 12px; font-size: 28px; }
.quit-panel p { margin: 0 0 28px; }

.quit-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.quit-actions button {
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid currentColor;
  border-radius: var(--control-radius);
  color: var(--title-ink);
  background: transparent;
  font: inherit;
  cursor: pointer;
}

#quitCancel {
  border-color: #159000;
  background: var(--play-again-background);
  color: #fff;
  font-weight: 600;
}

#quitConfirm { border-color: var(--error-ink); color: var(--error-ink); font-weight: 600; }

@media (pointer: coarse) { *:focus-visible { outline: none; } }

.setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--modal-gap);
  min-height: 44px;
  cursor: pointer;
}

.setting-row[hidden] { display: none; }

.setting-switch {
  appearance: none;
  flex: 0 0 48px;
  width: 48px;
  height: 28px;
  margin: 0;
  border: 2px solid #666;
  border-radius: 16px;
  background: #777;
  cursor: pointer;
}

.setting-switch::before {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  margin: 2px;
  border-radius: 50%;
  background: white;
}

.setting-switch:checked {
  background: #176a35;
  border-color: #176a35;
}

.setting-switch:checked::before { transform: translateX(20px); }
.setting-switch:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }

.modal-panel {
  display: grid;
  gap: var(--modal-gap);
  width: min(100%, var(--modal-max-width));
  margin: 0 auto;
}

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

.modal-header h1,
.modal-header h2 {
  margin: 0;
  font-size: 28px;
}

.modal-close {
  display: grid;
  place-items: center;
  align-self: flex-start;
  flex-shrink: 0;
  width: var(--modal-close-size);
  height: var(--modal-close-size);
  border-radius: var(--control-radius);
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
}

.language-list {
  display: grid;
  border-block: 1px solid var(--separator);
}

.language-option {
  display: flex;
  align-items: center;
  gap: var(--modal-gap);
  width: 100%;
  padding: var(--modal-row-padding);
  border-bottom: 1px solid var(--separator);
  font-size: 22px;
  font-weight: 500;
  cursor: pointer;
}

.language-option:last-child { border-bottom: 0; }
.language-option:hover { background: var(--anchor-hover); }
.language-option-flags {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}
.language-option-flags img {
  display: block;
  width: var(--language-flag-size);
  height: var(--language-flag-size);
}
.config-button .language-option-flags img {
  width: var(--config-button-icon-size);
  height: var(--config-button-icon-size);
}
.inline-language-flags {
  vertical-align: -0.15em;
  margin-inline-end: 0.15em;
}
.inline-language-flags img {
  width: 1em;
  height: 1em;
}

.language-save-error {
  margin: 0;
  color: var(--error-ink);
  text-align: center;
}

.app-version {
  margin: 0;
  color: var(--app-version-color);
  font-size: var(--app-version-size);
  text-align: center;
}

.high-score-list {
  display: grid;
  border-block: 1px solid var(--separator);
}

.high-score-option {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--modal-gap);
  padding: var(--modal-row-padding);
  border-bottom: 1px solid var(--separator);
  font-size: 22px;
  font-weight: 500;
}

.high-score-option:last-child { border-bottom: 0; }
.high-score-option-value { font-weight: 600; }

.current-score b {
  display: inline-block;
  transform-origin: center;
}

#score.score-bounce {
  animation:
    score-bounce-up var(--score-bounce-rise-duration) ease-out forwards,
    score-bounce-down var(--score-bounce-settle-duration) ease-in-out var(--score-bounce-rise-duration) forwards;
}

@keyframes score-bounce-up {
  to { transform: scale(min(var(--score-bounce-scale), var(--score-bounce-width-scale, 1.7))); }
}

@keyframes score-bounce-down {
  from { transform: scale(min(var(--score-bounce-scale), var(--score-bounce-width-scale, 1.7))); }
  to { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  #score.score-bounce { animation: none; }
}

.lex-celebration {
  --lex-artwork-width: 32%;
  position: absolute;
  bottom: 100%;
  left: calc((100% - var(--lex-artwork-width)) / 2);
  width: var(--lex-artwork-width);
  aspect-ratio: 380 / 210;
  clip-path: inset(-10px 0 0);
  z-index: 4;
  pointer-events: none;
}

.lex-celebration[hidden] { display: none; }
.lex-celebration[data-word-length="6"],
.lex-celebration[data-motion="jump"] {
  /* Normalize the peek canvases; spin has similar body proportions to yay. */
  --lex-artwork-width: calc(32% * 500 / 380);
  aspect-ratio: 2 / 1;
}
.lex-celebration-sprite[hidden] { display: none; }

.lex-celebration-sprite {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 200%;
  transform: translateY(-10px);
}

.lex-celebration.active .lex-celebration-sprite {
  animation: lex-peek var(--celebration-label-duration) ease-in-out both;
}

.lex-celebration img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.lex-celebration.active img:first-child {
  animation: lex-frame-one var(--celebration-label-duration) steps(1, end) both;
}

.lex-celebration.active img:nth-child(2) {
  animation: lex-frame-two var(--celebration-label-duration) steps(1, end) both;
}

.lex-celebration.active img:nth-child(3) {
  animation: lex-frame-three var(--celebration-label-duration) steps(1, end) both;
}

@keyframes lex-peek {
  0%, 100% { transform: translateY(50%); }
  22%, 78% { transform: translateY(-10px); }
}

@keyframes lex-frame-one {
  0% { opacity: 1; }
  26%, 100% { opacity: 0; }
}

@keyframes lex-frame-two {
  0%, 31%, 100% { opacity: 0; }
  26% { opacity: 1; }
}

@keyframes lex-frame-three {
  0% { opacity: 0; }
  31%, 100% { opacity: 1; }
}

.lex-celebration[data-motion="jump"] {
  top: 0;
  bottom: auto;
  aspect-ratio: 1;
  clip-path: inset(-100cqi 0 -100cqi);
}

.lex-celebration[data-motion="jump"] .lex-celebration-sprite {
  height: 100%;
  transform: translateY(calc(50cqi - 50%));
}

.lex-celebration.active[data-motion="jump"] {
  animation: var(--lex-jump-mask, lex-jump-mask) var(--celebration-label-duration) linear both;
}

.lex-celebration.active[data-motion="jump"] .lex-celebration-sprite {
  animation-name: var(--lex-jump-animation, lex-jump);
}

.lex-celebration.active[data-motion="jump"] img:first-child { animation-name: lex-jump-frame-one; }
.lex-celebration.active[data-motion="jump"] img:nth-child(2) { animation-name: lex-jump-frame-two; }
.lex-celebration.active[data-motion="jump"] img:nth-child(3) { animation-name: lex-jump-frame-three; }

@keyframes lex-jump {
  0% { transform: translateY(0); animation-timing-function: ease-out; }
  16% { transform: translateY(calc(-50% - 10px)); animation-timing-function: ease-in; }
  42%, 100% { transform: translateY(calc(50cqi - 50%)); }
}

@keyframes lex-jump-mask {
  0%, 16% { clip-path: inset(-100cqi 0 100%); }
  28%, 100% { clip-path: inset(-100cqi 0 -100cqi); }
}

@keyframes lex-jump-landscape {
  0% { transform: translateY(calc(50cqi - 50%)); animation-timing-function: ease-out; }
  16% { transform: translateY(10px); animation-timing-function: ease-in; }
  42%, 100% { transform: translateY(calc(50cqi - 50%)); }
}

@keyframes lex-jump-frame-one {
  0% { opacity: 1; }
  46%, 100% { opacity: 0; }
}

@keyframes lex-jump-frame-two {
  0%, 51%, 100% { opacity: 0; }
  46% { opacity: 1; }
}

@keyframes lex-jump-frame-three {
  0% { opacity: 0; }
  51%, 100% { opacity: 1; }
}

/* Dedicated opposite-side views keep the L and crown consistent through the turn. */
.lex-celebration.active[data-word-length="8"] img:nth-child(n) {
  animation: lex-spin-front var(--celebration-label-duration) steps(1, end) both;
}
.lex-celebration.active[data-word-length="8"] img:nth-child(2) { animation-name: lex-spin-two; }
.lex-celebration.active[data-word-length="8"] img:nth-child(3) { animation-name: lex-spin-three; }
.lex-celebration.active[data-word-length="8"] img:nth-child(4) { animation-name: lex-spin-four; }
.lex-celebration.active[data-word-length="8"] img:nth-child(5) { animation-name: lex-spin-back; }
.lex-celebration.active[data-word-length="8"] img:nth-child(6) { animation-name: lex-spin-six; }
.lex-celebration.active[data-word-length="8"] img:nth-child(7) { animation-name: lex-spin-seven; }
.lex-celebration.active[data-word-length="8"] img:nth-child(8) { animation-name: lex-spin-eight; }

/* Land at 42%, turn from 46% in 100ms steps, then hold the original front. */
@keyframes lex-spin-front {
  0%, 81%, 100% { opacity: 1; }
  46% { opacity: 0; }
}
@keyframes lex-spin-two {
  0%, 51%, 100% { opacity: 0; }
  46% { opacity: 1; }
}
@keyframes lex-spin-three {
  0%, 56%, 100% { opacity: 0; }
  51% { opacity: 1; }
}
@keyframes lex-spin-four {
  0%, 61%, 100% { opacity: 0; }
  56% { opacity: 1; }
}
@keyframes lex-spin-back {
  0%, 66%, 100% { opacity: 0; }
  61% { opacity: 1; }
}
@keyframes lex-spin-six {
  0%, 71%, 100% { opacity: 0; }
  66% { opacity: 1; }
}
@keyframes lex-spin-seven {
  0%, 76%, 100% { opacity: 0; }
  71% { opacity: 1; }
}
@keyframes lex-spin-eight {
  0%, 81%, 100% { opacity: 0; }
  76% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .lex-celebration.active .lex-celebration-sprite {
    animation-name: celebration-fade;
  }
  .lex-celebration.active img:first-child { animation: none; opacity: 1; }
  .lex-celebration.active img:nth-child(n+2) { animation: none; opacity: 0; }
  .lex-celebration.active[data-motion="jump"],
  .lex-celebration.active[data-motion="jump"] .lex-celebration-sprite,
  .lex-celebration.active[data-motion="jump"] img:nth-child(n) { animation: none; }
}

.celebration {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: grid;
  place-items: center;
  color: var(--celebration-label-color);
  font-weight: 600;
  line-height: 1;
  text-align: center;
  pointer-events: none;
}

.celebration-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--celebration-gap);
  max-width: 90%;
  font-size: var(--celebration-label-size);
  filter: drop-shadow(var(--celebration-text-shadow));
}

.celebration.lex-jump .celebration-content {
  position: absolute;
  inset: 0;
  display: block;
  max-width: none;
}

.celebration.lex-jump .celebration-label {
  position: absolute;
  top: 3cqi;
  left: 5%;
  width: 90%;
}

.celebration.lex-jump .celebration-points {
  position: absolute;
  bottom: 4cqi;
  left: 5%;
  width: 90%;
  font-size: 13cqi;
}

.celebration-label,
.celebration-points {
  -webkit-text-stroke: var(--celebration-outline-width) var(--celebration-outline-color);
  paint-order: stroke fill;
}

.celebration-round-number,
.celebration-word-length {
  color: var(--celebration-round-number-color);
}

.engagement-celebration-layer {
  position: absolute;
  inset: 0;
  z-index: 6;
  overflow: hidden;
  pointer-events: none;
}

.engagement-celebration {
  position: absolute;
  top: var(--engagement-celebration-inset);
  right: var(--engagement-celebration-inset);
  z-index: 6;
  max-width: 64%;
  color: var(--engagement-celebration-color);
  font-size: var(--engagement-celebration-size);
  font-weight: 600;
  line-height: 1.1;
  text-align: right;
  overflow-wrap: anywhere;
  pointer-events: none;
  transform-origin: top right;
  -webkit-text-stroke: var(--celebration-outline-width) var(--celebration-outline-color);
  paint-order: stroke fill;
  filter: drop-shadow(var(--celebration-text-shadow));
}

.engagement-celebration[data-corner="top-left"],
.engagement-celebration[data-corner="bottom-left"] {
  right: auto;
  left: var(--engagement-celebration-inset);
  text-align: left;
  transform-origin: top left;
}

.engagement-celebration[data-corner="top-left"],
.engagement-celebration[data-corner="bottom-right"] {
  --engagement-celebration-rotation: -4deg;
}

.engagement-celebration[data-corner="bottom-right"],
.engagement-celebration[data-corner="bottom-left"] {
  top: auto;
  bottom: var(--engagement-celebration-inset);
  transform-origin: bottom right;
}

.engagement-celebration[data-corner="bottom-left"] { transform-origin: bottom left; }
.engagement-celebration[hidden] { display: none; }
.engagement-celebration.active {
  animation: celebration-fade var(--engagement-celebration-duration) ease-out both;
}

#engagementCelebrationLabel {
  display: block;
  transform-origin: inherit;
}

.engagement-celebration.active #engagementCelebrationLabel {
  animation: engagement-celebration-recede var(--celebration-points-duration) ease-out var(--celebration-points-delay) both;
}

.play-again-button {
  display: grid;
  place-items: center;
  width: var(--play-again-width);
  height: var(--play-again-height);
  border: var(--play-again-border);
  border-radius: var(--play-again-border-radius);
  background: var(--play-again-background);
  box-shadow: var(--play-again-box-shadow);
  color: #fff;
  cursor: pointer;
  pointer-events: auto;
}

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

.play-again-button:active { transform: translateY(1px); }

.play-again-icon {
  width: var(--play-again-icon-size);
  aspect-ratio: 1;
  background: currentColor;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.celebration[hidden] { display: none; }

.celebration.active {
  animation: celebration-life var(--celebration-label-duration) ease-out both;
}

.celebration-points {
  color: var(--celebration-points-color);
  font-size: var(--celebration-points-size);
}

.celebration.active .celebration-points {
  animation: celebration-points-recede var(--celebration-points-duration) ease-out var(--celebration-points-delay) both;
}

.celebration.game-over {
  color: var(--game-over-label-color-1);
  animation:
    game-over-enter var(--game-over-duration) ease-out both,
    game-over-color-pulse var(--game-over-color-duration) ease-in-out var(--game-over-duration) infinite;
}

@keyframes celebration-life {
  0% { opacity: 0; transform: scale(0.9); }
  12%, 76% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.04); }
}

@keyframes celebration-points-recede {
  0% { opacity: 0; transform: scale(var(--celebration-points-entry-scale)); }
  35% { opacity: 1; }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes engagement-celebration-recede {
  0% { opacity: 0; transform: scale(var(--celebration-points-entry-scale)) rotate(0deg); }
  35% { opacity: 1; }
  100% { opacity: 1; transform: scale(1) rotate(var(--engagement-celebration-rotation)); }
}

@keyframes game-over-enter {
  0% { opacity: 0; transform: scale(var(--game-over-entry-scale)); }
  70% { opacity: 1; transform: scale(var(--game-over-overshoot-scale)); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes game-over-color-pulse {
  0%, 100% { color: var(--game-over-label-color-1); }
  25% { color: var(--game-over-label-color-2); }
  50% { color: var(--game-over-label-color-3); }
  75% { color: var(--game-over-label-color-4); }
}

@media (prefers-reduced-motion: reduce) {
  .engagement-celebration.active #engagementCelebrationLabel { animation-name: engagement-celebration-fade; }
  .celebration.active { animation-name: celebration-fade; }
  .celebration.active .celebration-points { animation-name: celebration-points-fade; }
  .celebration.game-over { animation: none; }
}

@keyframes celebration-fade {
  0% { opacity: 0; }
  12%, 76% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes celebration-points-fade {
  0%, 20% { opacity: 0; }
  38%, 100% { opacity: 1; }
}

@keyframes engagement-celebration-fade {
  0%, 20% { opacity: 0; transform: rotate(var(--engagement-celebration-rotation)); }
  38%, 100% { opacity: 1; transform: rotate(var(--engagement-celebration-rotation)); }
}

button {
  appearance: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  line-height: inherit;
  text-align: inherit;
}

/* Resolve each element's chosen artwork locally, including its transition cover. */
.cell,
.rack-tile,
.drag-tile {
  --rack-tile-background: var(--tile-artwork) center / 100% 100% no-repeat transparent;
  --round-tile-background: var(--cover-tile-artwork, var(--tile-artwork)) center / 100% 100% no-repeat transparent;
}

.cell-button {
  display: grid;
  place-items: center;
  border-radius: var(--control-radius);
  cursor: pointer;
  user-select: none;
}

.cell {
  --cell-background: var(--empty-cell-background);
  --cell-border: 0 solid transparent;
  --cell-border-radius: var(--control-radius);
  --cell-box-shadow: none;
  --cell-color: var(--tile-ink);
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: var(--cell-border);
  border-radius: var(--cell-border-radius);
  background: var(--cell-background);
  box-shadow: var(--cell-box-shadow);
  color: var(--cell-color);
  font-weight: 600;
  font-size: clamp(16px, 2vw, 25px);
  font-size: clamp(var(--cell-font-min), calc(var(--cell-font-scale) / var(--grid-size, 8)), var(--cell-font-max));
  line-height: 1;
}

.cell.anchor {
  --cell-background: var(--anchor-cell-background);
  cursor: default;
}
.cell.temp {
  --cell-color: var(--rack-tile-color);
  --cell-border-radius: var(--rack-tile-border-radius);
  --cell-background: var(--rack-tile-background);
  --cell-border: var(--rack-tile-border);
  --cell-box-shadow: var(--rack-tile-box-shadow);
  touch-action: none;
}

.cell.drag-drop-target {
  background: var(--drag-target-color);
}

.cell.temp.rejected {
  animation: rejected-tile-shake var(--rejected-tile-shake-duration) ease-in-out;
  transform-origin: center;
}

@keyframes rejected-tile-shake {
  0%, 100% {
    filter: grayscale(0) brightness(1);
    transform: translateX(0) rotate(0deg);
  }
  15% {
    filter: grayscale(1) brightness(var(--rejected-tile-dim));
    transform: translateX(calc(0% - var(--rejected-tile-shake-distance))) rotate(calc(0deg - var(--rejected-tile-shake-rotation)));
  }
  30% { transform: translateX(var(--rejected-tile-shake-distance)) rotate(var(--rejected-tile-shake-rotation)); }
  45% { transform: translateX(calc(0% - var(--rejected-tile-shake-distance))) rotate(calc(0deg - var(--rejected-tile-shake-rotation))); }
  60% { transform: translateX(var(--rejected-tile-shake-distance)) rotate(var(--rejected-tile-shake-rotation)); }
  75% {
    filter: grayscale(1) brightness(var(--rejected-tile-dim));
    transform: translateX(calc(0% - var(--rejected-tile-shake-distance))) rotate(calc(0deg - var(--rejected-tile-shake-rotation)));
  }
}

@media (prefers-reduced-motion: reduce) {
  .cell.temp.rejected {
    animation-name: rejected-tile-desaturate;
  }
}

@keyframes rejected-tile-desaturate {
  0%, 100% { filter: grayscale(0) brightness(1); }
  25%, 75% { filter: grayscale(1) brightness(var(--rejected-tile-dim)); }
}

.cell.highlight {
  --cell-color: var(--tile-ink);
  --cell-background: var(--accepted);
  --cell-border: transparent;
  --cell-box-shadow: none;
}

.cell.round-covered {
  --cell-background: var(--round-tile-background);
  --cell-border: var(--round-tile-border);
  --cell-border-radius: var(--round-tile-border-radius);
  --cell-box-shadow: var(--round-tile-box-shadow);
  --cell-color: var(--round-tile-color);
}

/* Every back samples the same board-sized image, including the gaps between tiles. */
.board.round-image .cell.round-covered {
  --cell-border: 0 solid transparent;
  position: relative;
}

.board.round-image .cell.round-covered::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: var(--round-image-opacity);
  background-image: var(--round-background-image, none);
  background-size:
    calc(var(--grid-size) * 100% + (var(--grid-size) - 1) * var(--board-gap))
    calc(var(--grid-size) * 100% + (var(--grid-size) - 1) * var(--board-gap));
  background-position: var(--round-image-x) var(--round-image-y);
  background-repeat: no-repeat;
}

.side {
  grid-area: side;
}

.ui-button {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 38px;
  border: var(--ui-button-border);
  border-radius: var(--control-radius);
  background: var(--ui-button-background);
  box-shadow: var(--ui-button-box-shadow);
  color: var(--ui-button-text-active);
  font: inherit;
  padding: 8px 10px;
  font-weight: 500;
  text-align: center;
  cursor: pointer;
}

.ui-button::before {
  position: absolute;
  z-index: -1;
  inset: 1px 1px 50%;
  border-radius: calc(var(--control-radius) - 1px) calc(var(--control-radius) - 1px) 45% 45%;
  background: var(--ui-button-gloss);
  content: "";
  pointer-events: none;
}

.ui-button:hover:not(:disabled) { background: var(--ui-button-hover-background); }
.ui-button:active:not(:disabled) {
  box-shadow: var(--button-pressed-shadow);
  color: var(--ui-button-text-pressed);
  transform: translateY(1px);
}
.ui-button:disabled {
  cursor: not-allowed;
  opacity: 0.65;
  background: var(--button-disabled-background);
  color: var(--ui-button-text-disabled);
}

.rack-section {
  display: grid;
  gap: 20px;
}

.rack-actions {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--control-gap);
  container-type: inline-size;
}

.rack-action-button {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--rack-action-button-height);
  min-width: 0;
  padding: var(--rack-action-button-padding);
}

.rack-action-button-shuffle,
.rack-action-button-clear,
.rack-action-button-pass {
  --rack-action-button-padding: var(--rack-action-compact-button-padding);
  --rack-action-image-height: var(--rack-action-compact-image-height);
}

.rack-action-button-play {
  grid-column: span 3;
}

.play-label {
  font-size: var(--rack-action-play-font-size);
  font-weight: 600;
  text-transform: uppercase;
}

.rack-action-button-pass {
  grid-column: span 1;
  gap: 2px;
}

.rack-action-image {
  display: grid;
  flex: none;
}

.rack-action-image img {
  grid-area: 1 / 1;
  display: block;
  width: auto;
  height: var(--rack-action-image-height);
  object-fit: contain;
  pointer-events: none;
}

.rack-action-count {
  flex: 0 1 auto;
  min-width: 0;
  font-size: var(--rack-action-count-size);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-align: start;
}

.rack-action-image-disabled {
  filter:
    grayscale(1)
    drop-shadow(0 1px 0 rgb(255 255 255 / 0.62))
    drop-shadow(0 -1px 0 rgb(0 0 0 / 0.18));
  opacity: 0.68;
}

.rack-action-image-disabled,
.rack-action-image-pressed {
  visibility: hidden;
}

.rack-action-button:disabled .rack-action-image-active,
.rack-action-button:active:not(:disabled) .rack-action-image-active {
  visibility: hidden;
}

.rack-action-button:disabled .rack-action-image-disabled,
.rack-action-button:active:not(:disabled) .rack-action-image-pressed {
  visibility: visible;
}

.rack {
  display: grid;
  grid-template-columns: repeat(var(--rack-size), minmax(0, 1fr));
  gap: var(--rack-gap);
  container-type: inline-size;
}

.rack:empty::before {
  content: "";
  width: 100%;
  aspect-ratio: 1;
}

.rack-tile {
  --rack-tile-scale: 1;
  width: 100%;
  height: auto;
  min-height: 0;
  aspect-ratio: 1;
  padding: 0;
  border: var(--rack-tile-border);
  border-radius: var(--rack-tile-border-radius);
  background: var(--rack-tile-background);
  color: var(--rack-tile-color);
  box-shadow: var(--rack-tile-box-shadow);
  font-weight: 600;
  font-size: 21px;
  font-size: clamp(var(--rack-font-min), calc(var(--rack-font-scale) / var(--rack-size)), var(--rack-font-max));
  line-height: 1;
  transform: scale(var(--rack-tile-scale));
  transition: transform 0.1s linear;
  touch-action: none;
}

.rack-tile:active:not(:disabled) {
  --rack-tile-scale: var(--rack-hover-scale);
}

@media (hover: hover) and (pointer: fine) {
  .cell.empty:not(.drag-drop-target):hover:not(:disabled) {
    background: var(--empty-cell-hover-background);
  }

  .rack-tile:hover:not(:disabled) {
    --rack-tile-scale: var(--rack-hover-scale);
  }
}

.rack.dragging .rack-tile {
  --rack-tile-scale: 1;
  transition: none;
}

.rack-tile:disabled { opacity: 0.45; }

.rack-tile.in-rack-transition {
  position: relative;
  z-index: 2;
  pointer-events: none;
  will-change: transform;
}

.rack-tile.drag-insert-before,
.rack-tile.drag-insert-after {
  position: relative;
}

.rack-tile.drag-insert-before::after,
.rack-tile.drag-insert-after::after {
  content: "";
  position: absolute;
  top: -4px;
  bottom: -4px;
  width: var(--rack-insertion-width);
  border-radius: var(--rack-insertion-width);
  background: var(--drag-target-color);
}

.rack-tile.drag-insert-before::after { left: var(--rack-insertion-offset); }
.rack-tile.drag-insert-after::after { right: var(--rack-insertion-offset); }

.rack-tile.drag-source,
.cell.temp.drag-source {
  position: relative;
  isolation: isolate;
  background: none;
  opacity: 1;
  color: var(--drag-source-color);
  box-shadow: none;
}

/* Keep the board visible through faded wood the same color as empty cells. */
.cell.temp.drag-source {
  background: var(--empty-cell-background);
  border-radius: var(--control-radius);
}

.rack-tile.drag-source::before,
.cell.temp.drag-source::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--rack-tile-background);
  opacity: var(--drag-source-opacity);
}

.drag-tile {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 0;
  border: var(--rack-tile-border);
  border-radius: var(--rack-tile-border-radius);
  background: var(--rack-tile-background);
  color: var(--rack-tile-color);
  box-shadow: var(--rack-tile-box-shadow);
  font-weight: 600;
  line-height: 1;
  pointer-events: none;
  will-change: transform;
}

.drag-tile[hidden] { display: none; }

.store-banner:not([hidden]) {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 18px auto 0;
  padding: 4px 8px;
  border: 1px solid var(--grid);
  border-radius: 5px;
  background: var(--surface);
  min-height: 42px;
  justify-content: flex-start;
  font-size: 15px;
  color: var(--title-ink);
  font-weight: 600;
  cursor: pointer;
}
.store-banner[hidden] { display: none; }
.store-banner-icon { flex: 0 0 36px; width: 36px; height: 36px; border-radius: 5px; }
.store-banner-badge {
  flex: 0 0 auto;
  width: auto;
  height: 36px;
  margin: 0 0px 0 auto;
}
.store-banner > span[data-i18n="storeBanner.title"] { margin-right: 2px; }
.store-banner-badge[hidden] { display: none; }
.store-banner span { min-width: 0; text-align: center; }
.store-banner:hover { background: var(--surface-hover); }
.store-chooser-icon { display: block; width: 96px; height: 96px; margin: 32px auto 0; border-radius: 20px; }
.store-choices { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; margin: 24px 0; padding: 12px; }
.store-choices a { display: block; flex: 0 0 auto; line-height: 0; }
.store-choices img { display: block; height: 48px; width: auto; }
.store-choices a[hidden] { display: none; }
.store-choices a[href] { cursor: pointer; }
.store-choices a[aria-disabled="true"] { cursor: default; }

@media (max-width: 740px) { /* 740 -> 8x8 grid, adjust when changing GRID_SIZE */
  main { --page-padding: var(--page-padding-small); --rack-action-button-height: 50px; }
  main:not([hidden]):has(#storeBanner:not([hidden])) {
    --rack-action-button-height: 46px;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
    padding-bottom: max(10px, var(--page-safe-bottom));
  }
  .layout {
    grid-template-columns: 1fr;
    grid-template-areas:
      "scoreboard"
      "board"
      "side";
  }
  main:has(#storeBanner:not([hidden])) .layout {
    flex: 1;
    grid-template-rows: auto auto 1fr;
  }
  .board-stage { width: 100%; justify-self: center; }
  .side {
    width: 100%;
    margin-top: calc(var(--layout-gap) - var(--board-header-gap));
    align-self: stretch;
    display: flex;
    flex-direction: column;
    gap: 18px;
  }
  .side > .rack-section { flex-shrink: 0; }
  .side > .store-banner:not([hidden]) { margin: auto 0 0; flex-shrink: 0; }
}
/* Width and height caps must leave room for 44px action targets and safe areas. */
@media (orientation: landscape) and (min-width: 540px) and (min-height: 250px) and (max-height: 600px) {
  main {
    --page-padding: var(--page-padding-small);
    --rack-action-button-height: 50px;
    --landscape-viewport-height: 100vh;
    --landscape-board-size: calc(var(--landscape-viewport-height)
      - max(var(--page-padding), var(--page-safe-top))
      - max(var(--page-padding), var(--page-safe-bottom)));
  }
  @supports (height: 100dvh) {
    main { --landscape-viewport-height: 100dvh; }
  }
  main:not([hidden]):has(#storeBanner:not([hidden])) {
    display: block;
    min-height: 0;
    padding-bottom: max(var(--page-padding), var(--page-safe-bottom));
  }
  .layout,
  main:has(#storeBanner:not([hidden])) .layout {
    grid-template-columns: repeat(2, min(calc((100% - var(--layout-gap)) / 2), var(--landscape-board-size)));
    justify-content: center;
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "board scoreboard"
      "board side";
  }
  .board-stage { width: 100%; }
  .side {
    min-width: 0;
    margin-top: 0;
    display: block;
  }
  .rack-section { gap: 12px; }
  .rack-actions {
    gap: 4px;
    grid-template-columns: minmax(44px, 1fr) minmax(44px, 1fr) minmax(0, 3fr) minmax(52px, 1fr);
  }
  .rack-action-button-play { grid-column: span 1; padding-inline: 1px; }
  .play-label {
    /* Use the rack width so height-limited columns also get compact labels. */
    font-size: clamp(14px, calc(25cqi - 41px), var(--rack-action-play-font-size));
    white-space: nowrap;
  }
  .side > .store-banner:not([hidden]) { margin: 18px 0 0; }
  .lex-celebration[data-motion="peek"] { top: 10px; bottom: auto; }
  .lex-celebration[data-motion="jump"] {
    --lex-jump-mask: none;
    --lex-jump-animation: lex-jump-landscape;
    clip-path: none;
  }
  @media (max-width: 740px), (max-height: 340px) {
    .scoreboard {
      grid-template-areas: "current-score setup" "high-score high-score";
    }
    .high-score { justify-self: start; }
    /* Keep the link's translated name accessible beside the official badge. */
    .store-banner:has(.store-banner-badge:not([hidden])) > span[data-i18n="storeBanner.title"] {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip-path: inset(50%);
      white-space: nowrap;
    }
  }
}

/* Ownership status is outside the inert game, never an interactive second board. */
.ownership-notice {
  position: fixed;
  inset: 0;
  padding: 2rem 1rem;
  text-align: center;
}
.ownership-notice:not([hidden]) {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
}
.ownership-notice p { margin: 0; }
.ownership-spinner {
  width: 2rem;
  height: 2rem;
  border: 3px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  color: var(--title-ink);
  animation: ownership-spin 900ms linear infinite;
}
@keyframes ownership-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .ownership-spinner { animation: none; }
}

.tile-carry-status {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}