:root {
  --bg-1: #f6f1e6;
  --bg-2: #ede4d4;
  --bg-3: #e2d4bf;
  --ink: #17203a;
  --muted: #5d6786;
  --panel: rgba(251, 247, 238, 0.95);
  --panel-border: rgba(110, 92, 67, 0.28);
  --accent: #1ea7fd;
  --accent-2: #ff6d8c;
  --success: #22ba7a;
  --error: #e34e5f;
  --shadow: 0 8px 18px rgba(71, 56, 37, 0.14);
  --tile-fill: #f7f7f4;
  --tile-line-light: rgba(255, 255, 255, 0.96);
  --tile-line-dark: rgba(120, 126, 140, 0.42);
  --tile-border: rgba(36, 48, 76, 0.48);
  --tile-text: #0c5ea8;
  --tile-letter-inner: #fffefa;
  --tile-letter-outer: #d6c09a;
  --tile-letter-stroke: 0px;
  --tile-letter-stroke-small: 0px;
  --tile-danger-fill: #f14458;
  --tile-selected-fill: #7be7ff;
  --tile-selected-light: rgba(242, 253, 255, 0.9);
  --tile-selected-dark: rgba(7, 114, 145, 0.46);
  --tile-selected-border: rgba(18, 38, 74, 0.88);
  --board-gap: 1px;
  --slide-board-gap: 10px;
  --slide-frame-pad: 12px;
  --slide-move-anim-ms: 100ms;
  --slide-merge-anim-ms: 100ms;
  --slide-merge-bounce-ms: 200ms;
  --tile-size: 104px;
  --tile-pitch: calc(var(--tile-size) + var(--board-gap));
  --single-board-frame-width: calc(var(--tile-size) * 4 + var(--slide-board-gap) * 3 + var(--slide-frame-pad) * 2);
  --radius: 1rem;
  --font-vintage-serif: "Iowan Old Style", "Baskerville", "Palatino Linotype", "Book Antiqua", "Garamond", "Times New Roman", serif;
}

html.mobile-optimized {
  --slide-move-anim-ms: 100ms;
  --slide-merge-anim-ms: 100ms;
  --slide-merge-bounce-ms: 200ms;
}

html.perf-dense-board {
  --slide-merge-bounce-ms: 200ms;
}

html.perf-ultra-mobile {
  --slide-merge-bounce-ms: 200ms;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  color: var(--ink);
  font-family: var(--font-vintage-serif);
}

html.board-scroll-lock,
body.board-scroll-lock {
  overscroll-behavior: none;
}

body.board-scroll-lock {
  overflow: hidden;
  touch-action: none;
}

body {
  background:
    radial-gradient(circle at 18% 10%, rgba(255, 255, 255, 0.52), transparent 34%),
    radial-gradient(circle at 84% 14%, rgba(255, 255, 255, 0.36), transparent 38%),
    linear-gradient(180deg, var(--bg-1) 0%, var(--bg-2) 56%, var(--bg-3) 100%);
  position: relative;
}

body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
}

body::before {
  background:
    linear-gradient(135deg, rgba(116, 94, 65, 0.06), rgba(116, 94, 65, 0) 42%),
    linear-gradient(45deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0) 44%);
  opacity: 0.55;
}

body::after {
  display: none;
}

/* Use stepped pixel sizes so tiles/text land on whole pixels more often. */
@media (max-width: 900px) {
  :root {
    --tile-size: 88px;
  }
}

@media (max-width: 760px) {
  :root {
    --tile-size: clamp(74px, calc((100vw - 1rem - (var(--slide-frame-pad) * 2) - (var(--slide-board-gap) * 3)) / 4), 92px);
  }
}

@media (max-width: 560px) {
  :root {
    --slide-board-gap: 8px;
    --slide-frame-pad: 12px;
    --tile-size: clamp(64px, calc((100vw - 0.8rem - (var(--slide-frame-pad) * 2) - (var(--slide-board-gap) * 3)) / 4), 86px);
  }
}

@media (max-width: 430px) {
  :root {
    --slide-board-gap: 7px;
    --slide-frame-pad: 12px;
    --tile-size: clamp(58px, calc((100vw - 0.6rem - (var(--slide-frame-pad) * 2) - (var(--slide-board-gap) * 3)) / 4), 78px);
  }
}

@media (min-width: 1280px) {
  :root {
    --tile-size: 120px;
  }
}

@media (min-width: 1500px) {
  :root {
    --tile-size: 132px;
  }
}

.app {
  max-width: 1500px;
  margin: 0 auto;
  padding: 1rem 1rem 1.25rem;
  display: grid;
  gap: 0.9rem;
  grid-template-columns: 1fr;
  align-items: start;
}

.site-footer {
  width: min(100% - 1rem, 1100px);
  margin: 0.2rem auto 0.8rem;
  padding: 0.5rem 0.65rem calc(0.6rem + env(safe-area-inset-bottom, 0px));
  color: rgba(61, 49, 34, 0.74);
  font-size: 0.76rem;
  line-height: 1.35;
  text-align: center;
}

.site-footer a {
  color: #2d6faa;
  text-underline-offset: 2px;
}

.site-footer a:hover {
  color: #235889;
}

.site-footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  margin-left: 0.35rem;
  white-space: nowrap;
}

.site-footer-brand-icon {
  width: 1em;
  height: 1em;
  display: inline-block;
  vertical-align: middle;
  object-fit: contain;
}

.top-stack {
  display: grid;
  gap: 0.9rem;
}

.single-mode-app {
  max-width: 980px;
  justify-items: center;
  gap: 0.55rem;
}

.single-mode-app .panel-card::before {
  display: none;
}

.single-mode-app .top-stack,
.single-mode-app .bottom-tools {
  width: min(100%, var(--single-board-frame-width));
  justify-self: center;
}

.single-mode-app .utility-panels {
  width: min(100%, var(--single-board-frame-width));
  justify-self: center;
}

.single-mode-app .board-shell {
  width: min(100%, var(--single-board-frame-width));
  justify-content: center;
}

.hud-panel {
  padding: 0.18rem 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
}

.hud-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.45rem;
}

.hud-actions {
  display: flex;
  align-items: center;
  gap: 0.32rem;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.game-title {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  color: #1a2445;
  display: inline-flex;
  align-items: center;
  gap: 0;
  white-space: nowrap;
}

.game-title-tiles.board.slide-mode {
  --tile-size: clamp(58px, 8.8vw, 78px);
  --slide-board-gap: 8px;
  display: inline-grid;
  grid-template-columns: repeat(4, auto);
  grid-auto-rows: auto;
  gap: var(--slide-board-gap);
  padding: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  touch-action: auto;
}

.game-title-tiles .title-game-tile {
  --letter-edge-pattern: none;
  cursor: default;
  pointer-events: none;
  overflow: hidden;
  contain: paint;
}

.hud-menu-btn {
  white-space: nowrap;
  padding: 0.16rem 0.24rem;
  border-radius: 0;
  font-size: 0.76rem;
  letter-spacing: 0.02em;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: #1a2445;
}

.hud-menu-btn.active {
  color: #0c5ea8;
  text-decoration: underline;
  text-underline-offset: 0.14em;
}

.compact-stats {
  width: auto;
  padding: 0;
  gap: 0.3rem;
  grid-template-columns: repeat(2, minmax(72px, auto));
}

.compact-stats .stat {
  padding: 0.06rem 0.1rem;
  border-radius: 0;
  gap: 0.06rem;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.compact-stats .stat .label {
  font-size: 0.54rem;
  letter-spacing: 0.06em;
  color: #5a6380;
}

.compact-stats .stat strong {
  font-size: 0.94rem;
  color: #1a2445;
}

.menu-panel {
  padding: 0;
  overflow: hidden;
}

.single-mode-app .menu-panel {
  display: none;
  border: 0;
  box-shadow: none;
  background: transparent;
}

.single-mode-app .menu-panel[open] {
  display: block;
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + 3.6rem);
  left: 50%;
  transform: translateX(-50%);
  width: min(92vw, 29rem);
  max-height: min(78vh, 42rem);
  overflow: auto;
  z-index: 2;
  pointer-events: auto;
  border: 1px solid rgba(122, 104, 76, 0.34);
  box-shadow:
    var(--shadow),
    0 0 0 9999px rgba(40, 32, 22, 0.28);
  background: var(--panel);
}

.menu-panel > summary {
  cursor: pointer;
  list-style: none;
  padding: 0.7rem 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #1a2445;
  background: rgba(255, 255, 255, 0.62);
}

.single-mode-app .menu-panel > summary {
  display: none;
}

.menu-panel > summary::-webkit-details-marker {
  display: none;
}

.menu-panel[open] > summary {
  border-bottom: 1px solid rgba(23, 32, 58, 0.1);
}

.menu-content {
  display: grid;
  gap: 0.55rem;
  padding: 0.65rem 0.75rem 0.75rem;
}

.menu-actions {
  display: flex;
  gap: 0.5rem;
}

.menu-actions .btn {
  width: 100%;
}

.menu-section-label {
  margin: 0;
  color: #51608a;
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
}

.rule-list {
  margin: 0;
  padding-left: 1rem;
  display: grid;
  gap: 0.3rem;
  color: #3f4c70;
  font-size: 0.86rem;
  line-height: 1.3;
}

.menu-status {
  min-height: 0;
  font-size: 0.82rem;
  line-height: 1.25;
}

.bottom-tools,
.utility-panels {
  min-width: 0;
}

@supports (content-visibility: auto) {
  .utility-panels,
  .words,
  .menu-panel {
    content-visibility: auto;
    contain-intrinsic-size: 520px;
  }
}

.single-mode-app .bottom-tools {
  position: fixed;
  inset: 0;
  width: auto;
  min-width: 0;
  z-index: 36;
  pointer-events: none;
}

.panel-card {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 0.88rem;
  box-shadow: var(--shadow);
  position: relative;
}

.panel-card::before {
  content: none;
}

.hero {
  padding: 1rem 1rem 1.05rem;
}

.eyebrow {
  margin: 0 0 0.35rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.75rem;
  color: #187ec0;
  font-weight: 700;
}

.hero h1 {
  margin: 0;
  line-height: 1;
  font-size: clamp(1.6rem, 4vw, 2.3rem);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #1a2445;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45);
}

.subtitle {
  margin: 0.65rem 0 0;
  color: var(--muted);
  line-height: 1.35;
  font-size: 0.95rem;
}

.stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.65rem;
  padding: 0.75rem;
}

.stat {
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(23, 32, 58, 0.12);
  border-radius: 0.75rem;
  padding: 0.65rem 0.8rem;
  display: grid;
  gap: 0.18rem;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 2px 0 rgba(23, 32, 58, 0.05);
}

.stat .label {
  color: #51608a;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.stat strong {
  font-size: 1.35rem;
  color: #1a2445;
}

.controls {
  padding: 0.9rem;
  display: grid;
  gap: 0.8rem;
}

.mode-switch {
  display: grid;
  gap: 0.35rem;
  padding: 0 0.15rem;
}

.mode-switch-label {
  color: #51608a;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
}

.mode-switch-buttons {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.4rem;
}

.mode-btn {
  padding: 0.52rem 0.55rem;
  font-size: 0.84rem;
  letter-spacing: 0.05em;
}

.mode-btn[aria-pressed="true"] {
  background: rgba(30, 167, 253, 0.96);
  border-color: rgba(9, 94, 145, 0.28);
  color: #041a28;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 2px 0 rgba(13, 86, 129, 0.12);
}

.top-controls {
  gap: 0.7rem;
}

.current-word {
  display: grid;
  gap: 0.3rem;
  font-size: 0.9rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.current-word output {
  display: block;
  min-height: 2.2rem;
  padding: 0.45rem 0.65rem;
  border-radius: 0.65rem;
  border: 1px solid rgba(130, 165, 255, 0.18);
  background: rgba(12, 18, 40, 0.9);
  color: #f3f6ff;
  font-weight: 700;
  letter-spacing: 0.08em;
  font-size: 1.05rem;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.03),
    0 4px 10px rgba(4, 8, 22, 0.14);
}

.dict-status {
  margin: 0;
  padding: 0.45rem 0.65rem;
  border-radius: 0.65rem;
  border: 1px solid rgba(130, 165, 255, 0.12);
  background: rgba(10, 16, 37, 0.75);
  color: var(--muted);
  font-size: 0.83rem;
  line-height: 1.25;
}

.dict-status.ready {
  color: var(--success);
  border-color: rgba(123, 227, 159, 0.18);
  background: rgba(16, 42, 27, 0.3);
}

.dict-status.error {
  color: var(--error);
  border-color: rgba(255, 127, 148, 0.16);
  background: rgba(58, 18, 28, 0.28);
}

.input-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  gap: 0.45rem;
  align-items: center;
}

.text-input {
  min-width: 0;
  width: 100%;
  border: 1px solid rgba(23, 32, 58, 0.16);
  background: rgba(255, 255, 255, 0.88);
  color: var(--ink);
  border-radius: 0.65rem;
  padding: 0.68rem 0.72rem;
  font: inherit;
  font-weight: 600;
  letter-spacing: 0.02em;
  outline: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    0 1px 0 rgba(23, 32, 58, 0.03);
}

.text-input::placeholder {
  color: var(--muted);
}

.text-input:focus {
  border-color: rgba(30, 167, 253, 0.44);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 0 0 3px rgba(30, 167, 253, 0.12);
}

.button-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.55rem;
}

.btn {
  border: 1px solid rgba(23, 32, 58, 0.14);
  background: rgba(255, 255, 255, 0.9);
  color: #1b2748;
  border-radius: 0.65rem;
  padding: 0.62rem 0.7rem;
  font: inherit;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    0 2px 0 rgba(23, 32, 58, 0.06),
    0 6px 16px rgba(23, 32, 58, 0.08);
  transition:
    transform 120ms ease,
    background-color 120ms ease,
    box-shadow 120ms ease,
    filter 120ms ease;
}

.btn:hover:not(:disabled) {
  transform: translateY(-1px);
  filter: brightness(1.04);
}

.btn:active:not(:disabled) {
  transform: translateY(0);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.02),
    0 1px 3px rgba(4, 7, 20, 0.16);
}

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

.btn.primary {
  background: rgba(255, 110, 140, 0.94);
  border-color: rgba(147, 46, 66, 0.26);
  color: #fff7fa;
  box-shadow:
    inset 0 1px 0 rgba(255, 227, 234, 0.45),
    0 2px 0 rgba(147, 46, 66, 0.1),
    0 8px 18px rgba(227, 78, 95, 0.16);
}

.btn.tiny {
  padding: 0.28rem 0.45rem;
  font-size: 0.8rem;
}

.status {
  margin: 0;
  min-height: 2.7rem;
  line-height: 1.3;
  font-size: 0.9rem;
  color: var(--muted);
  text-wrap: balance;
}

.status.success {
  color: var(--success);
}

.status.error {
  color: var(--error);
}

.words {
  padding: 0.75rem;
  display: grid;
  gap: 0.55rem;
}

.words-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.words-header.simple {
  justify-content: flex-start;
}

.words h2 {
  margin: 0;
  font-size: 0.95rem;
}

.word-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.35rem;
  max-height: 180px;
  overflow: auto;
}

.word-list.hidden {
  display: none;
}

.utility-panels {
  display: grid;
}

.single-mode-app .utility-panels .words {
  gap: 0.45rem;
}

.single-mode-app .utility-panels .word-list {
  max-height: min(28vh, 220px);
}

@media (max-width: 640px) {
  .hud-row {
    align-items: stretch;
    flex-direction: column;
    gap: 0.55rem;
  }

  .compact-stats {
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .game-title {
    justify-content: center;
  }
}

.word-item {
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(118, 101, 74, 0.18);
  border-radius: 0.6rem;
  padding: 0.45rem 0.55rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

.word-item .points {
  color: #4760aa;
  font-weight: 600;
  font-size: 0.82rem;
}

.board-shell {
  display: flex;
  justify-content: center;
  align-items: center;
  overscroll-behavior: contain;
}

.board-frame {
  position: relative;
  background: rgba(255, 253, 248, 0.92);
  border: 1px solid rgba(117, 100, 74, 0.32);
  border-radius: 18px;
  padding: 14px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 2px 0 rgba(117, 100, 74, 0.14),
    0 10px 18px rgba(71, 56, 37, 0.16);
}

.board-stage {
  position: relative;
  display: grid;
}

.board-frame::before {
  content: none;
}

.board-frame.slide-mode {
  background: #b2a293;
  border: 0;
  border-radius: 18px;
  padding: var(--slide-frame-pad);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 8px 18px rgba(69, 52, 35, 0.14);
}

.board-frame.slide-mode::before {
  content: none;
}

.board {
  position: relative;
  grid-area: 1 / 1;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, var(--tile-size));
  grid-auto-rows: var(--tile-size);
  gap: var(--board-gap);
  padding: 4px;
  border-radius: 7px;
  background: #08163a;
  box-shadow:
    inset 0 0 0 1px rgba(4, 10, 28, 0.42);
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  overscroll-behavior: contain;
}

.board-slots {
  position: relative;
  grid-area: 1 / 1;
  z-index: 0;
  display: grid;
  grid-template-columns: repeat(4, var(--tile-size));
  grid-auto-rows: var(--tile-size);
  gap: var(--board-gap);
  padding: 4px;
  pointer-events: none;
}

.board-slots.slide-mode {
  --board-gap: var(--slide-board-gap);
  gap: var(--board-gap);
  padding: 0;
}

.board-slot {
  border-radius: 9px;
  border: 2px solid rgba(146, 129, 111, 0.34);
  background: #c1b29f;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.board.slide-mode {
  --board-gap: var(--slide-board-gap);
  gap: var(--board-gap);
  padding: 0;
  border-radius: 10px;
  background: #b2a293;
  box-shadow: none;
}

.board.slide-mode .tile {
  border-radius: 9px;
  border-width: 2px;
  border-color: rgba(136, 121, 103, 0.42);
  outline: none;
  --letter-edge-pattern: none;
  --letter-edge-pattern-moving: var(--letter-edge-pattern);
  --letter-edge-pattern-size: 100% 100%;
  --letter-edge-pattern-position: center;
  --letter-edge-pattern-size-moving: var(--letter-edge-pattern-size);
  --letter-edge-pattern-position-moving: var(--letter-edge-pattern-position);
  background-color: #faf9f5;
  background-image:
    var(--letter-edge-pattern),
    linear-gradient(180deg, rgba(255, 255, 255, 0.46), rgba(255, 255, 255, 0));
  background-size: var(--letter-edge-pattern-size), 100% 100%;
  background-repeat: no-repeat;
  background-position: var(--letter-edge-pattern-position), center;
  box-shadow:
    0 1px 2px rgba(96, 75, 54, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.board.slide-mode .tile.empty {
  background: transparent;
  background-image: none;
  border-color: transparent;
  box-shadow: none;
  opacity: 0;
  transition: none;
}

.board.slide-mode .tile.selected {
  box-shadow:
    0 0 0 2px rgba(30, 167, 253, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.62);
}

.board.slide-mode .tile.slide-valid-word {
  background-color: #d8f9df;
  border-color: rgba(20, 143, 65, 0.92);
  box-shadow:
    0 0 0 2px rgba(52, 211, 102, 0.44),
    0 1px 2px rgba(22, 76, 43, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

.selection-trail {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
  overflow: visible;
}

.slide-fx-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
}

.slide-actuator-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}

.slide-actuator-layer .tile.actuator-tile {
  position: absolute;
  margin: 0;
  pointer-events: none;
  border-radius: 9px;
  border-width: 2px;
  border-color: rgba(136, 121, 103, 0.42);
  outline: none;
  --letter-edge-pattern: none;
  --letter-edge-pattern-moving: var(--letter-edge-pattern);
  --letter-edge-pattern-size: 100% 100%;
  --letter-edge-pattern-position: center;
  --letter-edge-pattern-size-moving: var(--letter-edge-pattern-size);
  --letter-edge-pattern-position-moving: var(--letter-edge-pattern-position);
  background-color: #faf9f5;
  background-image:
    var(--letter-edge-pattern-moving, var(--letter-edge-pattern)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.46), rgba(255, 255, 255, 0));
  background-size:
    var(--letter-edge-pattern-size-moving, var(--letter-edge-pattern-size, 100% 100%)),
    100% 100%;
  background-repeat: no-repeat;
  background-position:
    var(--letter-edge-pattern-position-moving, var(--letter-edge-pattern-position, center)),
    center;
  box-shadow:
    0 1px 2px rgba(96, 75, 54, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.slide-actuator-layer .tile.actuator-tile.slide-valid-word {
  background-color: #d8f9df;
  background-image:
    var(--letter-edge-pattern-moving, var(--letter-edge-pattern)),
    radial-gradient(circle at 20% 14%, rgba(255, 255, 255, 0.58), rgba(255, 255, 255, 0) 42%);
  background-size:
    var(--letter-edge-pattern-size-moving, var(--letter-edge-pattern-size, 100% 100%)),
    100% 100%;
  background-position:
    var(--letter-edge-pattern-position-moving, var(--letter-edge-pattern-position, center)),
    center;
  background-repeat: no-repeat;
  border-color: rgba(20, 143, 65, 0.92);
  box-shadow:
    0 0 0 2px rgba(52, 211, 102, 0.44),
    0 1px 2px rgba(22, 76, 43, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

.board.actuator-active .tile:not(.empty) {
  opacity: 0 !important;
  transition: none !important;
}

.board-loading-overlay {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: grid;
  place-items: center;
  padding: 0.7rem;
  background: rgba(16, 24, 42, 0.24);
  backdrop-filter: blur(1.2px);
}

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

.board-loading-card {
  padding: 0.5rem 0.75rem;
  border-radius: 0.64rem;
  border: 1px solid rgba(118, 101, 74, 0.32);
  background: rgba(255, 252, 245, 0.95);
  color: #1e2f59;
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    0 8px 16px rgba(37, 29, 20, 0.22);
}

.game-over-overlay {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: grid;
  place-items: center;
  padding: 0.75rem;
  background: rgba(18, 24, 40, 0.34);
  backdrop-filter: blur(1.5px);
}

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

.game-over-card {
  width: min(92%, calc(var(--tile-size) * 3.3));
  padding: 0.75rem 0.75rem 0.7rem;
  border-radius: 12px;
  background: rgba(255, 252, 244, 0.98);
  border: 1px solid rgba(23, 32, 58, 0.18);
  box-shadow:
    0 12px 30px rgba(18, 22, 36, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  display: grid;
  gap: 0.45rem;
  text-align: center;
}

.game-over-kicker {
  margin: 0;
  color: #6a769a;
  font-size: 0.68rem;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 700;
}

.game-over-title {
  margin: 0;
  color: #1a2445;
  font-size: 1.05rem;
  line-height: 1.05;
}

.game-over-summary {
  margin: 0;
  color: #45527a;
  font-size: 0.85rem;
  line-height: 1.2;
}

.game-over-summary strong {
  color: #1a2445;
  font-weight: 800;
}

.game-over-actions {
  display: flex;
  justify-content: center;
  margin-top: 0.1rem;
}

.game-over-actions .btn {
  min-width: 8.5rem;
}

.slide-clear-burst {
  position: absolute;
  display: grid;
  place-items: center;
  border-radius: 0.28rem;
  background: rgba(251, 251, 247, 0.98);
  color: var(--tile-text);
  border: 1px solid rgba(36, 48, 76, 0.3);
  box-shadow:
    0 2px 6px rgba(23, 32, 58, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  font-family: var(--font-vintage-serif);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: 0;
  font-kerning: none;
  font-variant-ligatures: none;
  text-align: center;
  font-size: calc(var(--tile-size) * 0.19);
  padding: 2px;
  text-shadow: none;
  transform-origin: 50% 50%;
  animation: slide-clear-burst 340ms cubic-bezier(0.14, 0.82, 0.24, 1) forwards;
  will-change: transform, opacity;
  overflow: hidden;
}

.slide-clear-burst::before {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 0.38rem;
  border: 1px solid rgba(12, 94, 168, 0.26);
  opacity: 0;
  animation: slide-clear-ring 340ms cubic-bezier(0.12, 0.8, 0.22, 1) forwards;
}

.slide-discard-shatter {
  position: absolute;
  pointer-events: none;
  z-index: 6;
  border-radius: 9px;
  animation: slide-discard-shatter-stage 620ms cubic-bezier(0.15, 0.88, 0.22, 1) forwards;
  will-change: transform, opacity;
  backface-visibility: hidden;
  contain: paint;
  transform-origin: 50% 54%;
}

.slide-discard-shatter.lite {
  animation: slide-discard-shatter-lite 260ms cubic-bezier(0.2, 0.86, 0.28, 1) forwards;
  overflow: visible;
}

.slide-discard-red-flash-overlay {
  position: absolute;
  pointer-events: none;
  z-index: 11;
  border-radius: 9px;
  transform-origin: 50% 50%;
  opacity: 0;
  background:
    radial-gradient(circle at 50% 52%, rgba(255, 34, 34, 0.98), rgba(255, 34, 34, 0) 62%),
    radial-gradient(circle at 44% 40%, rgba(255, 122, 122, 0.76), rgba(255, 122, 122, 0) 58%);
  box-shadow:
    inset 0 0 0 1.5px rgba(255, 44, 44, 0.92),
    0 0 9px rgba(255, 44, 44, 0.52);
  animation: slide-discard-red-flash-overlay 620ms cubic-bezier(0.18, 0.84, 0.22, 1) forwards;
}

.slide-discard-red-flash-overlay.lite {
  animation-name: slide-discard-red-flash-overlay-lite;
  animation-duration: 260ms;
}

.slide-discard-shatter.lite::before {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: inherit;
  background:
    radial-gradient(circle at 50% 52%, rgba(184, 166, 142, 0.48), rgba(184, 166, 142, 0) 58%),
    radial-gradient(circle at 54% 47%, rgba(244, 236, 220, 0.36), rgba(244, 236, 220, 0) 62%);
  opacity: 0;
  animation: slide-discard-lite-dust 260ms ease-out forwards;
}

.slide-discard-shatter.lite .slide-discard-face::before,
.slide-discard-shatter.lite .slide-discard-face::after {
  content: none !important;
  animation: none !important;
}

.slide-discard-shatter.lite .slide-discard-face {
  animation: slide-discard-face-lite 260ms cubic-bezier(0.2, 0.86, 0.28, 1) forwards;
}

.slide-discard-shatter.lite .slide-discard-label {
  animation: slide-discard-label-lite 260ms cubic-bezier(0.2, 0.86, 0.28, 1) forwards;
}

.slide-discard-shatter.lite .slide-discard-shard {
  display: none;
}

.slide-discard-lite-shard {
  position: absolute;
  inset: 20%;
  border-radius: 5px;
  opacity: 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.84), rgba(236, 228, 214, 0.96)),
    #f3ede3;
  border: 1px solid rgba(104, 88, 72, 0.28);
  box-shadow:
    0 1px 2px rgba(44, 36, 28, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.55);
  pointer-events: none;
}

.slide-discard-lite-shard.shard-a {
  clip-path: polygon(8% 12%, 100% 0, 88% 72%, 26% 100%, 0 60%);
  animation: slide-discard-lite-shard-a 260ms cubic-bezier(0.2, 0.86, 0.28, 1) forwards;
}

.slide-discard-lite-shard.shard-b {
  clip-path: polygon(0 0, 90% 8%, 100% 52%, 74% 100%, 6% 86%);
  animation: slide-discard-lite-shard-b 260ms cubic-bezier(0.2, 0.86, 0.28, 1) forwards;
}

.slide-discard-shatter::before {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: inherit;
  background:
    radial-gradient(circle at 50% 52%, rgba(181, 160, 135, 0.42), rgba(181, 160, 135, 0) 58%),
    radial-gradient(circle at 46% 56%, rgba(244, 236, 220, 0.35), rgba(244, 236, 220, 0) 66%);
  opacity: 0;
  z-index: 0;
  animation: slide-discard-dust-bloom 620ms ease-out forwards;
}

.slide-discard-shatter::after {
  content: none;
}

.slide-discard-shatter.lite::after {
  content: none;
}

.slide-discard-face,
.slide-discard-shard {
  position: absolute;
  inset: 0;
  border-radius: 9px;
  background: #f7f7f4;
  border: 1px solid rgba(126, 110, 93, 0.34);
  box-shadow:
    0 1px 1px rgba(96, 75, 54, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 -1px 0 rgba(118, 107, 95, 0.14);
  overflow: hidden;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  z-index: 2;
}

.slide-discard-face {
  animation: slide-discard-face-break 620ms cubic-bezier(0.15, 0.88, 0.22, 1) forwards;
}

.slide-discard-face::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(132deg, transparent 43.6%, rgba(255, 255, 255, 0.97) 44.4%, rgba(66, 72, 83, 0.65) 45.5%, rgba(50, 56, 66, 0.18) 46.6%, transparent 48%),
    linear-gradient(34deg, transparent 57.8%, rgba(255, 255, 255, 0.92) 58.5%, rgba(64, 70, 80, 0.58) 59.6%, rgba(49, 55, 65, 0.16) 60.7%, transparent 62.1%),
    linear-gradient(88deg, transparent 66.9%, rgba(255, 255, 255, 0.86) 67.6%, rgba(62, 67, 78, 0.52) 68.6%, rgba(46, 52, 62, 0.15) 69.6%, transparent 71.1%),
    linear-gradient(116deg, transparent 24.2%, rgba(255, 255, 255, 0.78) 24.9%, rgba(68, 74, 85, 0.45) 25.9%, transparent 27.1%),
    linear-gradient(12deg, transparent 80.5%, rgba(255, 255, 255, 0.75) 81.1%, rgba(68, 74, 85, 0.42) 82%, transparent 83.1%);
  opacity: 0;
  animation: slide-discard-crack-reveal 620ms ease-out forwards;
}

.slide-discard-face::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 48% 54%, rgba(45, 50, 61, 0.16), rgba(45, 50, 61, 0) 54%),
    linear-gradient(138deg, transparent 45.2%, rgba(36, 41, 50, 0.22) 46.2%, transparent 47.2%);
  opacity: 0;
  transform: translate3d(0, 0, 0) scale(1);
  animation: slide-discard-split-gap 620ms cubic-bezier(0.15, 0.88, 0.22, 1) forwards;
}

.slide-discard-label {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 2px 3px;
  color: var(--tile-text);
  font-family: var(--font-vintage-serif);
  font-weight: 800;
  font-size: calc(var(--tile-size) * 0.2);
  line-height: 0.9;
  letter-spacing: 0;
  text-align: center;
  text-shadow: none;
  animation: slide-discard-label-pop 620ms cubic-bezier(0.15, 0.88, 0.22, 1) forwards;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.slide-discard-shard {
  opacity: 0;
  box-shadow:
    0 2px 4px rgba(72, 58, 40, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 -1px 0 rgba(118, 107, 95, 0.18);
  transform-origin: 50% 50%;
}

.slide-discard-shard.shard-1 {
  clip-path: polygon(0 0, 56% 0, 50% 44%, 0 68%);
  animation: slide-discard-shard-1 620ms cubic-bezier(0.15, 0.88, 0.22, 1) forwards;
}

.slide-discard-shard.shard-2 {
  clip-path: polygon(56% 0, 100% 0, 100% 44%, 60% 56%, 50% 44%);
  animation: slide-discard-shard-2 620ms cubic-bezier(0.15, 0.88, 0.22, 1) forwards;
}

.slide-discard-shard.shard-3 {
  clip-path: polygon(0 68%, 50% 44%, 60% 56%, 52% 100%, 0 100%);
  animation: slide-discard-shard-3 620ms cubic-bezier(0.15, 0.88, 0.22, 1) forwards;
}

.slide-discard-shard.shard-4 {
  clip-path: polygon(60% 56%, 100% 44%, 100% 100%, 52% 100%);
  animation: slide-discard-shard-4 620ms cubic-bezier(0.15, 0.88, 0.22, 1) forwards;
}

.slide-submit-drop {
  position: absolute;
  margin: 0;
  pointer-events: none;
  z-index: 5;
  animation: slide-submit-drop-off var(--submit-drop-ms, 620ms) linear
    forwards;
  will-change: transform, opacity;
  backface-visibility: hidden;
  transform-origin: 50% 50%;
  transform: translateZ(0);
  contain: paint;
  transition: none !important;
}

.slide-submit-drop::before {
  content: none;
  animation: none !important;
}

.slide-submit-drop::after {
  content: none;
  animation: none !important;
}

.slide-submit-score-pop {
  position: absolute;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 2px;
  padding: 3px;
  pointer-events: none;
  z-index: 6;
  border-radius: 5px;
  background: rgba(251, 251, 247, 0.96);
  border: 1px solid rgba(36, 48, 76, 0.28);
  box-shadow:
    0 2px 6px rgba(23, 32, 58, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  animation: slide-submit-score-pop 360ms cubic-bezier(0.16, 0.9, 0.24, 1) forwards;
  will-change: transform, opacity;
  backface-visibility: hidden;
}

.slide-submit-score-word {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--tile-text);
  font-family: var(--font-vintage-serif);
  font-weight: 800;
  font-size: calc(var(--tile-size) * 0.16);
  line-height: 0.95;
  letter-spacing: 0;
  font-kerning: none;
  font-variant-ligatures: none;
}

.slide-submit-score-points {
  display: block;
  color: #13743b;
  font-family: var(--font-vintage-serif);
  font-weight: 800;
  font-size: calc(var(--tile-size) * 0.13);
  line-height: 0.95;
  letter-spacing: 0;
}

.word-tile-inspector {
  position: absolute;
  z-index: 4;
  width: min(24rem, calc(100vw - 2rem));
  max-width: calc(var(--tile-size) * 4 + 2rem);
  background: rgba(255, 252, 244, 0.98);
  border: 1px solid rgba(23, 32, 58, 0.14);
  border-radius: 0.85rem;
  box-shadow:
    0 12px 24px rgba(23, 32, 58, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.92);
  padding: 0.6rem;
}

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

.word-tile-inspector-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
}

.word-tile-inspector-title-wrap {
  min-width: 0;
}

.word-tile-inspector-label {
  margin: 0;
  color: #5673b9;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.68rem;
  font-weight: 700;
}

.word-tile-inspector-title {
  margin: 0.12rem 0 0;
  font-size: 1rem;
  line-height: 1.1;
  color: #1a2445;
  word-break: break-word;
}

.word-tile-inspector-close {
  border: 1px solid rgba(23, 32, 58, 0.14);
  background: rgba(255, 255, 255, 0.9);
  color: #1d2747;
  border-radius: 0.45rem;
  width: 1.9rem;
  height: 1.9rem;
  display: grid;
  place-items: center;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}

.word-tile-inspector-close:hover {
  filter: brightness(1.06);
}

.word-tile-inspector-meta {
  margin: 0.45rem 0 0;
  color: #5d6786;
  font-size: 0.8rem;
  line-height: 1.25;
}

.word-tile-inspector-list {
  margin: 0.55rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.28rem;
  max-height: min(18rem, 42vh);
  overflow: auto;
}

.word-tile-inspector-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.32rem 0.42rem;
  border-radius: 0.45rem;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(23, 32, 58, 0.08);
}

.word-tile-inspector-more {
  justify-content: center;
  color: #5d6786;
  font-size: 0.74rem;
  letter-spacing: 0.02em;
}

.word-tile-inspector-word {
  color: #1d2747;
  font-weight: 600;
  word-break: break-word;
}

.word-tile-inspector-item-meta {
  color: #5f72aa;
  font-size: 0.72rem;
  white-space: nowrap;
}

.board.locked {
  pointer-events: auto;
}

.board.locked .tile {
  pointer-events: none;
}

.board.dragging {
  cursor: grabbing;
}

.tile {
  --ttl-badge-inset-x: calc(var(--tile-size) * 0.11);
  --ttl-badge-inset-y: calc(var(--tile-size) * 0.09);
  --letter-edge-pattern: none;
  --letter-edge-pattern-moving: var(--letter-edge-pattern);
  --letter-edge-pattern-size: 100% 100%;
  --letter-edge-pattern-position: center;
  --letter-edge-pattern-size-moving: var(--letter-edge-pattern-size);
  --letter-edge-pattern-position-moving: var(--letter-edge-pattern-position);
  position: relative;
  z-index: 0;
  isolation: isolate;
  width: var(--tile-size);
  height: var(--tile-size);
  border: 1px solid var(--tile-border);
  border-radius: 5px;
  background: var(--tile-fill);
  color: var(--tile-text);
  font-size: calc(var(--tile-size) * 0.42);
  font-weight: 700;
  font-family: var(--font-vintage-serif);
  line-height: 0.95;
  letter-spacing: 0;
  font-kerning: none;
  font-variant-ligatures: none;
  display: grid;
  place-items: center;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.38),
    0 1px 2px rgba(30, 34, 47, 0.08),
    0 1px 0 rgba(30, 34, 47, 0.08),
    inset 1px 1px 0 var(--tile-line-light),
    inset -1px -1px 0 var(--tile-line-dark);
  text-shadow: none;
  transition:
    transform 100ms ease-in-out,
    border-color 100ms ease-in-out;
  overflow: visible;
  contain: none;
}

.tile * {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.tile.empty {
  cursor: default;
  background: #071231;
  border-color: rgba(6, 10, 28, 0.8);
  color: transparent;
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 0.01),
    inset -1px -1px 0 rgba(0, 0, 0, 0.26);
  text-shadow: none;
}

.tile:hover {
  filter: brightness(1.03);
}

.tile::before,
.tile::after {
  content: none;
}

.tile.selected {
  background: #fbfbf7;
  border-color: rgba(31, 153, 232, 0.9);
  color: #0b78c4;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.4),
    0 1px 2px rgba(30, 34, 47, 0.1),
    0 1px 0 rgba(30, 34, 47, 0.08),
    0 0 0 2px rgba(30, 167, 253, 0.3),
    inset 1px 1px 0 rgba(255, 255, 255, 0.98),
    inset -1px -1px 0 rgba(89, 138, 172, 0.14);
}

.tile.score-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.1rem;
  padding: 0.12rem;
  background:
    radial-gradient(circle at 17% 20%, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0) 38%),
    linear-gradient(
      135deg,
      rgba(30, 167, 253, 0.12) 0 16%,
      transparent 16% 34%,
      rgba(255, 109, 140, 0.1) 34% 42%,
      transparent 42% 100%
    ),
    var(--tile-fill);
  border-color: rgba(21, 33, 66, 0.64);
  color: #0b78c4;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.42),
    0 2px 5px rgba(30, 34, 47, 0.14),
    0 1px 0 rgba(30, 34, 47, 0.1),
    0 0 0 2px rgba(21, 33, 66, 0.14),
    inset 1px 1px 0 rgba(255, 255, 255, 0.98),
    inset -1px -1px 0 rgba(108, 115, 135, 0.2);
  text-shadow: none;
}

.tile.score-tile .score-tile-value {
  display: block;
  max-width: 100%;
  font-family: var(--font-vintage-serif);
  font-size: calc(var(--tile-size) * 0.18);
  line-height: 0.95;
  font-weight: 800;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #0b78c4;
  text-shadow: none;
}

.tile.score-tile .score-tile-label {
  display: block;
  max-width: 100%;
  font-size: clamp(0.34rem, 0.9vw, 0.52rem);
  line-height: 1;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: rgba(19, 36, 73, 0.86);
  text-shadow: none;
}

.tile.word-tile {
  --word-fit-scale: 1;
  padding: 2px 3px;
  letter-spacing: 0;
  text-align: center;
  font-size: calc(var(--tile-size) * 0.24);
  line-height: 0.9;
  text-shadow: none;
  word-break: break-word;
}

.tile .tile-label {
  display: block;
  max-width: 100%;
  white-space: nowrap;
  line-height: inherit;
  transform: translateZ(0) scale(var(--word-fit-scale, 1));
  transform-origin: center center;
  pointer-events: none;
}

.tile.word-tile[data-len="3"] {
  font-size: calc(var(--tile-size) * 0.26);
}

.tile.word-tile[data-len="4"] {
  font-size: calc(var(--tile-size) * 0.22);
}

.tile.word-tile[data-len="5"] {
  font-size: calc(var(--tile-size) * 0.185);
}

.tile.word-tile[data-len="6"],
.tile.word-tile[data-len="7"],
.tile.word-tile[data-len="8"],
.tile.word-tile[data-len="9"],
.tile.word-tile[data-len="10"] {
  font-size: calc(var(--tile-size) * 0.16);
  letter-spacing: 0;
}

@supports (-webkit-text-stroke: 1px #000) {
  .tile {
    -webkit-text-fill-color: currentColor;
    -webkit-text-stroke: 0 transparent;
    text-shadow: none;
  }

  .tile.word-tile {
    -webkit-text-stroke-width: 0;
    text-shadow: none;
  }

  .tile.score-tile .score-tile-value {
    -webkit-text-fill-color: currentColor;
    -webkit-text-stroke: 0 transparent;
    text-shadow: none;
  }

  .slide-clear-burst {
    -webkit-text-fill-color: currentColor;
    -webkit-text-stroke: 0 transparent;
    text-shadow: none;
  }
}

@media (max-width: 700px) {
  :root {
    --tile-letter-stroke: 0px;
    --tile-letter-stroke-small: 0px;
  }

  .tile {
    letter-spacing: 0;
    font-size: calc(var(--tile-size) * 0.4);
  }

  .tile.word-tile {
    letter-spacing: 0;
  }
}

.tile.ttl-prefix {
  overflow: visible;
}

.tile.ttl-prefix.ttl-heat-1,
.tile.ttl-prefix.ttl-heat-2,
.tile.ttl-prefix.ttl-heat-3,
.tile.ttl-prefix.ttl-heat-4,
.tile.ttl-prefix.ttl-heat-5 {
  background-color: var(--tile-fill);
  background-image:
    var(--letter-edge-pattern),
    radial-gradient(circle at 18% 14%, rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0) 42%);
  color: var(--tile-text);
}

.tile.ttl-prefix.ttl-heat-1 {
  border-color: color-mix(in srgb, var(--tile-border) 92%, rgba(63, 70, 88, 0.55) 8%);
}

.tile.ttl-prefix.ttl-heat-2 {
  border-color: color-mix(in srgb, var(--tile-border) 84%, rgba(63, 70, 88, 0.7) 16%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.34),
    0 1px 2px rgba(30, 34, 47, 0.1),
    0 1px 0 rgba(30, 34, 47, 0.08),
    inset 1px 1px 0 rgba(255, 255, 255, 0.9),
    inset -1px -1px 0 rgba(138, 142, 154, 0.28),
    inset 0 -1px 0 rgba(106, 110, 121, 0.06);
}

.tile.ttl-prefix.ttl-heat-3 {
  border-color: color-mix(in srgb, var(--tile-border) 64%, rgba(55, 61, 77, 0.92) 36%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.26),
    0 1px 2px rgba(30, 34, 47, 0.11),
    0 1px 0 rgba(30, 34, 47, 0.1),
    inset 1px 1px 0 rgba(255, 255, 255, 0.82),
    inset -1px -1px 0 rgba(120, 125, 138, 0.42),
    inset 0 -2px 0 rgba(96, 100, 112, 0.18),
    inset 0 0 0 1px rgba(58, 63, 75, 0.04);
}

.tile.ttl-prefix.ttl-heat-4 {
  border-color: color-mix(in srgb, var(--tile-border) 42%, rgba(45, 50, 64, 0.98) 58%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.22),
    0 1px 2px rgba(30, 34, 47, 0.13),
    0 1px 0 rgba(30, 34, 47, 0.11),
    inset 1px 1px 0 rgba(255, 255, 255, 0.76),
    inset -1px -1px 0 rgba(112, 117, 131, 0.52),
    inset 0 -3px 0 rgba(90, 94, 106, 0.24),
    inset 0 0 0 1px rgba(52, 57, 69, 0.08);
}

.tile.ttl-prefix.ttl-heat-5 {
  border-color: color-mix(in srgb, var(--tile-border) 88%, rgba(59, 66, 82, 0.58) 12%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.2),
    0 1px 2px rgba(30, 34, 47, 0.11),
    0 1px 0 rgba(30, 34, 47, 0.08),
    inset 1px 1px 0 rgba(255, 255, 255, 0.74),
    inset -1px -1px 0 rgba(108, 114, 128, 0.4),
    inset 0 -2px 0 rgba(88, 92, 104, 0.18),
    inset 0 0 0 1px rgba(52, 57, 69, 0.08);
}

.tile.ttl-prefix.ttl-heat-1::before,
.tile.ttl-prefix.ttl-heat-2::before,
.tile.ttl-prefix.ttl-heat-3::before,
.tile.ttl-prefix.ttl-heat-4::before,
.tile.ttl-prefix.ttl-heat-5::before {
  content: "";
  position: absolute;
  inset: 0.08rem;
  border-radius: 0.12rem;
  pointer-events: none;
  background: none;
  opacity: 0;
  z-index: 1;
}

.tile.ttl-prefix.ttl-heat-1::before {
  background:
    linear-gradient(
      var(--crack-a1, 148deg),
      transparent calc(var(--crack-p1, 24%) - 0.72%),
      rgba(255, 255, 255, 0.8) calc(var(--crack-p1, 24%) - 0.24%),
      rgba(255, 255, 255, 0.8) calc(var(--crack-p1, 24%) - 0.03%),
      rgba(50, 55, 66, 0.5) calc(var(--crack-p1, 24%) - 0.03%),
      rgba(50, 55, 66, 0.5) calc(var(--crack-p1, 24%) + 0.26%),
      transparent calc(var(--crack-p1, 24%) + 0.72%)
    );
  opacity: 0.44;
}

.tile.ttl-prefix.ttl-heat-2::before {
  background:
    linear-gradient(
      var(--crack-a1, 148deg),
      transparent calc(var(--crack-p1, 24%) - 0.9%),
      rgba(255, 255, 255, 0.82) calc(var(--crack-p1, 24%) - 0.3%),
      rgba(255, 255, 255, 0.82) calc(var(--crack-p1, 24%) - 0.04%),
      rgba(50, 55, 66, 0.5) calc(var(--crack-p1, 24%) - 0.04%),
      rgba(50, 55, 66, 0.5) calc(var(--crack-p1, 24%) + 0.34%),
      transparent calc(var(--crack-p1, 24%) + 0.9%)
    ),
    linear-gradient(
      var(--crack-a2, 42deg),
      transparent calc(var(--crack-p2, 41%) - 0.86%),
      rgba(255, 255, 255, 0.74) calc(var(--crack-p2, 41%) - 0.26%),
      rgba(255, 255, 255, 0.74) calc(var(--crack-p2, 41%) - 0.03%),
      rgba(56, 61, 72, 0.44) calc(var(--crack-p2, 41%) - 0.03%),
      rgba(56, 61, 72, 0.44) calc(var(--crack-p2, 41%) + 0.3%),
      transparent calc(var(--crack-p2, 41%) + 0.82%)
    );
  opacity: 0.54;
}

.tile.ttl-prefix.ttl-heat-3::before {
  background:
    linear-gradient(
      var(--crack-a1, 148deg),
      transparent calc(var(--crack-p1, 24%) - 1.06%),
      rgba(255, 255, 255, 0.83) calc(var(--crack-p1, 24%) - 0.35%),
      rgba(255, 255, 255, 0.83) calc(var(--crack-p1, 24%) - 0.04%),
      rgba(50, 55, 66, 0.52) calc(var(--crack-p1, 24%) - 0.04%),
      rgba(50, 55, 66, 0.52) calc(var(--crack-p1, 24%) + 0.4%),
      transparent calc(var(--crack-p1, 24%) + 1.04%)
    ),
    linear-gradient(
      var(--crack-a2, 42deg),
      transparent calc(var(--crack-p2, 41%) - 0.98%),
      rgba(255, 255, 255, 0.76) calc(var(--crack-p2, 41%) - 0.3%),
      rgba(255, 255, 255, 0.76) calc(var(--crack-p2, 41%) - 0.03%),
      rgba(56, 61, 72, 0.46) calc(var(--crack-p2, 41%) - 0.03%),
      rgba(56, 61, 72, 0.46) calc(var(--crack-p2, 41%) + 0.34%),
      transparent calc(var(--crack-p2, 41%) + 0.94%)
    ),
    linear-gradient(
      var(--crack-a3, 96deg),
      transparent calc(var(--crack-p3, 57%) - 0.92%),
      rgba(255, 255, 255, 0.68) calc(var(--crack-p3, 57%) - 0.26%),
      rgba(255, 255, 255, 0.68) calc(var(--crack-p3, 57%) - 0.03%),
      rgba(55, 60, 71, 0.42) calc(var(--crack-p3, 57%) - 0.03%),
      rgba(55, 60, 71, 0.42) calc(var(--crack-p3, 57%) + 0.32%),
      transparent calc(var(--crack-p3, 57%) + 0.9%)
    );
  opacity: 0.68;
}

.tile.ttl-prefix.ttl-heat-4::before {
  background:
    linear-gradient(
      var(--crack-a1, 148deg),
      transparent calc(var(--crack-p1, 24%) - 1.24%),
      rgba(255, 255, 255, 0.84) calc(var(--crack-p1, 24%) - 0.42%),
      rgba(255, 255, 255, 0.84) calc(var(--crack-p1, 24%) - 0.05%),
      rgba(50, 55, 66, 0.54) calc(var(--crack-p1, 24%) - 0.05%),
      rgba(50, 55, 66, 0.54) calc(var(--crack-p1, 24%) + 0.48%),
      transparent calc(var(--crack-p1, 24%) + 1.2%)
    ),
    linear-gradient(
      var(--crack-a2, 42deg),
      transparent calc(var(--crack-p2, 41%) - 1.16%),
      rgba(255, 255, 255, 0.8) calc(var(--crack-p2, 41%) - 0.36%),
      rgba(255, 255, 255, 0.8) calc(var(--crack-p2, 41%) - 0.04%),
      rgba(56, 61, 72, 0.48) calc(var(--crack-p2, 41%) - 0.04%),
      rgba(56, 61, 72, 0.48) calc(var(--crack-p2, 41%) + 0.42%),
      transparent calc(var(--crack-p2, 41%) + 1.12%)
    ),
    linear-gradient(
      var(--crack-a3, 96deg),
      transparent calc(var(--crack-p3, 57%) - 1.08%),
      rgba(255, 255, 255, 0.74) calc(var(--crack-p3, 57%) - 0.3%),
      rgba(255, 255, 255, 0.74) calc(var(--crack-p3, 57%) - 0.04%),
      rgba(55, 60, 71, 0.44) calc(var(--crack-p3, 57%) - 0.04%),
      rgba(55, 60, 71, 0.44) calc(var(--crack-p3, 57%) + 0.38%),
      transparent calc(var(--crack-p3, 57%) + 1.02%)
    ),
    linear-gradient(
      var(--crack-a4, 16deg),
      transparent calc(var(--crack-p4, 69%) - 1.02%),
      rgba(255, 255, 255, 0.68) calc(var(--crack-p4, 69%) - 0.26%),
      rgba(255, 255, 255, 0.68) calc(var(--crack-p4, 69%) - 0.03%),
      rgba(54, 58, 68, 0.4) calc(var(--crack-p4, 69%) - 0.03%),
      rgba(54, 58, 68, 0.4) calc(var(--crack-p4, 69%) + 0.34%),
      transparent calc(var(--crack-p4, 69%) + 0.98%)
    );
  opacity: 0.84;
}

.tile.ttl-prefix.ttl-heat-5::before {
  background:
    linear-gradient(
      var(--crack-a1, 148deg),
      transparent calc(var(--crack-p1, 24%) - 1.42%),
      rgba(255, 255, 255, 0.86) calc(var(--crack-p1, 24%) - 0.48%),
      rgba(255, 255, 255, 0.86) calc(var(--crack-p1, 24%) - 0.06%),
      rgba(50, 55, 66, 0.58) calc(var(--crack-p1, 24%) - 0.06%),
      rgba(50, 55, 66, 0.58) calc(var(--crack-p1, 24%) + 0.56%),
      transparent calc(var(--crack-p1, 24%) + 1.4%)
    ),
    linear-gradient(
      var(--crack-a2, 42deg),
      transparent calc(var(--crack-p2, 41%) - 1.34%),
      rgba(255, 255, 255, 0.82) calc(var(--crack-p2, 41%) - 0.42%),
      rgba(255, 255, 255, 0.82) calc(var(--crack-p2, 41%) - 0.05%),
      rgba(56, 61, 72, 0.52) calc(var(--crack-p2, 41%) - 0.05%),
      rgba(56, 61, 72, 0.52) calc(var(--crack-p2, 41%) + 0.5%),
      transparent calc(var(--crack-p2, 41%) + 1.28%)
    ),
    linear-gradient(
      var(--crack-a3, 96deg),
      transparent calc(var(--crack-p3, 57%) - 1.24%),
      rgba(255, 255, 255, 0.78) calc(var(--crack-p3, 57%) - 0.36%),
      rgba(255, 255, 255, 0.78) calc(var(--crack-p3, 57%) - 0.05%),
      rgba(55, 60, 71, 0.48) calc(var(--crack-p3, 57%) - 0.05%),
      rgba(55, 60, 71, 0.48) calc(var(--crack-p3, 57%) + 0.46%),
      transparent calc(var(--crack-p3, 57%) + 1.2%)
    ),
    linear-gradient(
      var(--crack-a4, 16deg),
      transparent calc(var(--crack-p4, 69%) - 1.18%),
      rgba(255, 255, 255, 0.72) calc(var(--crack-p4, 69%) - 0.32%),
      rgba(255, 255, 255, 0.72) calc(var(--crack-p4, 69%) - 0.04%),
      rgba(54, 58, 68, 0.44) calc(var(--crack-p4, 69%) - 0.04%),
      rgba(54, 58, 68, 0.44) calc(var(--crack-p4, 69%) + 0.42%),
      transparent calc(var(--crack-p4, 69%) + 1.14%)
    ),
    linear-gradient(
      calc(var(--crack-a2, 42deg) + 28deg),
      transparent calc(var(--crack-p2, 41%) + 11% - 1.08%),
      rgba(255, 255, 255, 0.66) calc(var(--crack-p2, 41%) + 11% - 0.28%),
      rgba(255, 255, 255, 0.66) calc(var(--crack-p2, 41%) + 11% - 0.04%),
      rgba(54, 59, 70, 0.42) calc(var(--crack-p2, 41%) + 11% - 0.04%),
      rgba(54, 59, 70, 0.42) calc(var(--crack-p2, 41%) + 11% + 0.36%),
      transparent calc(var(--crack-p2, 41%) + 11% + 1.06%)
    );
  opacity: 0.96;
}

.tile.ttl-prefix.ttl-heat-2::after,
.tile.ttl-prefix.ttl-heat-3::after,
.tile.ttl-prefix.ttl-heat-4::after,
.tile.ttl-prefix.ttl-heat-5::after {
  content: "";
  position: absolute;
  inset: 0.08rem;
  border-radius: 0.12rem;
  pointer-events: none;
  clip-path: var(--shard-clip, polygon(58% -2%, 102% -2%, 102% 102%, 40% 102%, 47% 64%));
  background:
    linear-gradient(
      var(--fracture-a, 132deg),
      transparent calc(var(--fracture-p, 56%) - 1.15%),
      rgba(255, 255, 255, 0.9) calc(var(--fracture-p, 56%) - 0.28%),
      rgba(255, 255, 255, 0.9) calc(var(--fracture-p, 56%) - 0.03%),
      rgba(43, 48, 58, 0.34) calc(var(--fracture-p, 56%) - 0.03%),
      rgba(43, 48, 58, 0.34) calc(var(--fracture-p, 56%) + 0.54%),
      transparent calc(var(--fracture-p, 56%) + 1.15%)
    ),
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0)),
    var(--tile-fill);
  opacity: 0;
  z-index: 1;
  transform-origin: 72% 58%;
  box-shadow:
    0 0 0 1px rgba(44, 50, 63, 0.06),
    0 1px 1px rgba(20, 24, 34, 0.12),
    inset 1px 1px 0 rgba(255, 255, 255, 0.66),
    inset -1px -1px 0 rgba(108, 114, 128, 0.2);
}

.tile.ttl-prefix.ttl-heat-2::after {
  opacity: 0.06;
  transform: translate(0, 0) rotate(0deg);
}

.tile.ttl-prefix.ttl-heat-3::after {
  opacity: 0.2;
  transform: translate(
      calc(var(--shard-x, 1px) * 0.58),
      calc(var(--shard-y, 1px) * 0.58)
    )
    rotate(calc(var(--shard-r, 1deg) * 0.58));
}

.tile.ttl-prefix.ttl-heat-4::after {
  opacity: 0.4;
  transform: translate(
      calc(var(--shard-x, 1px) * 1.3),
      calc(var(--shard-y, 1px) * 1.3)
    )
    rotate(calc(var(--shard-r, 1deg) * 1.1));
  box-shadow:
    0 0 0 1px rgba(44, 50, 63, 0.09),
    0 2px 3px rgba(20, 24, 34, 0.2),
    inset 1px 1px 0 rgba(255, 255, 255, 0.62),
    inset -1px -1px 0 rgba(108, 114, 128, 0.3);
}

.tile.ttl-prefix.ttl-heat-5::after {
  opacity: 0.68;
  transform: translate(
      calc(var(--shard-x, 1px) * 2.25),
      calc(var(--shard-y, 1px) * 2.25)
    )
    rotate(calc(var(--shard-r, 1deg) * 2));
  box-shadow:
    0 0 0 1px rgba(44, 50, 63, 0.14),
    0 4px 6px rgba(20, 24, 34, 0.28),
    inset 1px 1px 0 rgba(255, 255, 255, 0.56),
    inset -1px -1px 0 rgba(108, 114, 128, 0.38);
  animation: tile-final-fracture-rattle 240ms steps(3, end) infinite alternate;
}

.tile.ttl-prefix.ttl-heat-5::before {
  animation: tile-final-crack-creep 420ms ease-in-out infinite alternate;
}

.tile.ttl-warn {
  box-shadow:
    inset 1px 1px 0 var(--tile-line-light),
    inset -1px -1px 0 var(--tile-line-dark),
    0 0 0 1px rgba(74, 80, 96, 0.08);
}

.tile.ttl-danger {
  box-shadow:
    inset 1px 1px 0 var(--tile-line-light),
    inset -1px -1px 0 var(--tile-line-dark),
    0 0 0 1px rgba(74, 80, 96, 0.08);
}

.tile.slide-valid-word {
  background-color: #d8f9df;
  background-image:
    var(--letter-edge-pattern),
    radial-gradient(circle at 20% 14%, rgba(255, 255, 255, 0.58), rgba(255, 255, 255, 0) 42%);
  background-size: var(--letter-edge-pattern-size, 100% 100%), 100% 100%;
  background-position: var(--letter-edge-pattern-position, center), center;
  background-repeat: no-repeat;
  border-color: rgba(13, 132, 57, 0.98);
  color: #097632;
  box-shadow:
    0 0 0 2px rgba(52, 211, 102, 0.5),
    0 1px 2px rgba(22, 76, 43, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.ttl-badge {
  position: absolute;
  top: var(--ttl-badge-inset-y);
  right: var(--ttl-badge-inset-x);
  transform: none;
  transform-origin: top right;
  width: auto;
  min-width: 2ch;
  max-width: calc(var(--tile-size) * 0.42);
  text-align: right;
  height: auto;
  padding: 0.06em 0.16em;
  border-radius: 0.3em;
  display: block;
  font-size: clamp(9px, calc(var(--tile-size) * 0.1), 13px);
  line-height: 1;
  font-weight: 800;
  font-family: "SF Pro Text", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-feature-settings: "tnum" 1, "lnum" 1;
  letter-spacing: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
  border: 0;
  background: rgba(248, 252, 255, 0.78);
  color: #102855;
  box-shadow: 0 0 0 1px rgba(16, 40, 85, 0.11);
  font-variant-numeric: tabular-nums;
  paint-order: normal;
  -webkit-text-stroke: 0 transparent;
  text-shadow: none;
  pointer-events: none;
  z-index: 5;
}

.ttl-badge[data-urgency="safe"] {
  color: #102855;
}

.ttl-badge[data-urgency="warn"] {
  color: #102855;
}

.ttl-badge[data-urgency="danger"] {
  color: #102855;
}

.tile.slide-move {
  animation: tile-slide-move var(--slide-move-anim-ms) cubic-bezier(0.2, 0.84, 0.24, 1) both;
  z-index: 24;
  will-change: transform;
  backface-visibility: hidden;
  transform: translate3d(0, 0, 0);
}

.board.dom-slide-active .tile:not(.dom-slide-moving) {
  transition: none !important;
}

.board.dom-slide-active .tile.slide-move {
  animation: none !important;
}

/* During active swipes, simplify heavy crack layers only on moving tiles. */
.mobile-optimized .board.dom-slide-active .tile.dom-slide-moving.ttl-prefix.ttl-heat-2::after,
.mobile-optimized .board.dom-slide-active .tile.dom-slide-moving.ttl-prefix.ttl-heat-3::after,
.mobile-optimized .board.dom-slide-active .tile.dom-slide-moving.ttl-prefix.ttl-heat-4::after,
.mobile-optimized .board.dom-slide-active .tile.dom-slide-moving.ttl-prefix.ttl-heat-5::after,
.perf-dense-board .board.dom-slide-active .tile.dom-slide-moving.ttl-prefix.ttl-heat-2::after,
.perf-dense-board .board.dom-slide-active .tile.dom-slide-moving.ttl-prefix.ttl-heat-3::after,
.perf-dense-board .board.dom-slide-active .tile.dom-slide-moving.ttl-prefix.ttl-heat-4::after,
.perf-dense-board .board.dom-slide-active .tile.dom-slide-moving.ttl-prefix.ttl-heat-5::after,
.perf-ultra-mobile .board.dom-slide-active .tile.dom-slide-moving.ttl-prefix.ttl-heat-2::after,
.perf-ultra-mobile .board.dom-slide-active .tile.dom-slide-moving.ttl-prefix.ttl-heat-3::after,
.perf-ultra-mobile .board.dom-slide-active .tile.dom-slide-moving.ttl-prefix.ttl-heat-4::after,
.perf-ultra-mobile .board.dom-slide-active .tile.dom-slide-moving.ttl-prefix.ttl-heat-5::after {
  content: none !important;
  animation: none !important;
}

.mobile-optimized .board.dom-slide-active .tile.dom-slide-moving.ttl-prefix.ttl-heat-1::before,
.mobile-optimized .board.dom-slide-active .tile.dom-slide-moving.ttl-prefix.ttl-heat-2::before,
.mobile-optimized .board.dom-slide-active .tile.dom-slide-moving.ttl-prefix.ttl-heat-3::before,
.mobile-optimized .board.dom-slide-active .tile.dom-slide-moving.ttl-prefix.ttl-heat-4::before,
.mobile-optimized .board.dom-slide-active .tile.dom-slide-moving.ttl-prefix.ttl-heat-5::before,
.perf-dense-board .board.dom-slide-active .tile.dom-slide-moving.ttl-prefix.ttl-heat-1::before,
.perf-dense-board .board.dom-slide-active .tile.dom-slide-moving.ttl-prefix.ttl-heat-2::before,
.perf-dense-board .board.dom-slide-active .tile.dom-slide-moving.ttl-prefix.ttl-heat-3::before,
.perf-dense-board .board.dom-slide-active .tile.dom-slide-moving.ttl-prefix.ttl-heat-4::before,
.perf-dense-board .board.dom-slide-active .tile.dom-slide-moving.ttl-prefix.ttl-heat-5::before,
.perf-ultra-mobile .board.dom-slide-active .tile.dom-slide-moving.ttl-prefix.ttl-heat-1::before,
.perf-ultra-mobile .board.dom-slide-active .tile.dom-slide-moving.ttl-prefix.ttl-heat-2::before,
.perf-ultra-mobile .board.dom-slide-active .tile.dom-slide-moving.ttl-prefix.ttl-heat-3::before,
.perf-ultra-mobile .board.dom-slide-active .tile.dom-slide-moving.ttl-prefix.ttl-heat-4::before,
.perf-ultra-mobile .board.dom-slide-active .tile.dom-slide-moving.ttl-prefix.ttl-heat-5::before {
  opacity: 0.34 !important;
}

.board.dom-slide-active .tile.dom-slide-moving:not(.empty) {
  box-shadow: none !important;
  background-image: var(--letter-edge-pattern-moving, var(--letter-edge-pattern)) !important;
  background-size: var(--letter-edge-pattern-size-moving, var(--letter-edge-pattern-size, 100% 100%)) !important;
  background-position: var(--letter-edge-pattern-position-moving, var(--letter-edge-pattern-position, center)) !important;
  background-repeat: no-repeat !important;
}

.tile.dom-slide-moving {
  animation: none !important;
  will-change: transform, opacity;
  backface-visibility: hidden;
  transform: translate3d(0, 0, 0);
  contain: paint;
}

.board.dom-slide-active .tile.dom-slide-moving {
  box-shadow: none !important;
  background-image: var(--letter-edge-pattern-moving, var(--letter-edge-pattern)) !important;
  background-size: var(--letter-edge-pattern-size-moving, var(--letter-edge-pattern-size, 100% 100%)) !important;
  background-position: var(--letter-edge-pattern-position-moving, var(--letter-edge-pattern-position, center)) !important;
  background-repeat: no-repeat !important;
}

.mobile-optimized .board.dom-slide-active .tile.dom-slide-moving::before,
.mobile-optimized .board.dom-slide-active .tile.dom-slide-moving::after,
.perf-dense-board .board.dom-slide-active .tile.dom-slide-moving::before,
.perf-dense-board .board.dom-slide-active .tile.dom-slide-moving::after,
.perf-ultra-mobile .board.dom-slide-active .tile.dom-slide-moving::before,
.perf-ultra-mobile .board.dom-slide-active .tile.dom-slide-moving::after {
  content: none !important;
  animation: none !important;
}

.tile.merge-ghost {
  position: absolute;
  margin: 0;
  pointer-events: none;
}

.tile.submit-ghost-lite {
  border-color: rgba(20, 143, 65, 0.9) !important;
  background: #d8f9df !important;
  background-image: none !important;
  box-shadow: none !important;
}

.tile.slide-spawn {
  animation: tile-slide-spawn 130ms cubic-bezier(0.16, 0.94, 0.22, 1) both;
  z-index: 20;
  transform-origin: 50% 55%;
  will-change: transform, opacity;
  backface-visibility: hidden;
}

.tile.slide-merge {
  animation: tile-slide-merge var(--slide-merge-anim-ms) cubic-bezier(0.2, 0.86, 0.24, 1) both;
  z-index: 22;
  transform-origin: 50% 55%;
  will-change: transform, opacity;
  backface-visibility: hidden;
  overflow: hidden;
}

.tile.merge-bounce {
  animation: tile-merge-pop-2048 var(--slide-merge-bounce-ms) cubic-bezier(0.22, 0.61, 0.36, 1) 0ms both;
  z-index: 23;
  transform-origin: 50% 55%;
  will-change: transform;
  backface-visibility: hidden;
  transform: scale(1);
}

/* Keep countdown badges visible while merge tiles clip their internal FX. */
.tile.slide-merge .ttl-badge {
  top: var(--ttl-badge-inset-y);
  right: var(--ttl-badge-inset-x);
  transform: none;
}

.tile.slide-merge::before,
.tile.slide-merge::after {
  content: "";
  position: absolute;
  inset: 0.12rem;
  border-radius: 0.14rem;
  pointer-events: none;
}

.tile.slide-merge::before {
  background:
    radial-gradient(circle at 50% 40%, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0) 72%);
  opacity: 0;
  animation: tile-slide-merge-flash var(--slide-merge-anim-ms) cubic-bezier(0.2, 0.82, 0.24, 1) both;
}

.tile.slide-merge::after {
  border: 1px solid rgba(255, 244, 214, 0.65);
  box-shadow: inset 0 0 0 1px rgba(255, 244, 214, 0.16);
  opacity: 0;
  animation: tile-slide-merge-ring var(--slide-merge-anim-ms) cubic-bezier(0.2, 0.82, 0.24, 1) both;
}

.board.dragging .tile.selected {
  transform: none;
  filter: brightness(1.06);
}

.tile .step {
  position: absolute;
  right: 0.08rem;
  top: 0.08rem;
  min-width: 1.05rem;
  height: 1.05rem;
  padding: 0 0.2rem;
  border-radius: 0.18rem;
  font-size: 0.62rem;
  font-weight: 800;
  border: 1px solid rgba(4, 18, 68, 0.55);
  background: linear-gradient(180deg, #ffffff, #d7efff);
  color: #041544;
  display: inline-grid;
  place-items: center;
  line-height: 1;
  box-shadow: 0 1px 0 rgba(4, 18, 68, 0.45);
}

.tile.fall {
  animation: tile-fall 360ms cubic-bezier(0.2, 0.7, 0.2, 1);
  transform-origin: 50% 58%;
  will-change: transform, opacity;
  backface-visibility: hidden;
}

.tile.pop {
  animation: tile-pop 260ms cubic-bezier(0.15, 0.85, 0.35, 1) forwards;
  z-index: 2;
  overflow: visible;
  will-change: transform, opacity;
  backface-visibility: hidden;
}

.tile.pop::before,
.tile.pop::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  pointer-events: none;
}

.tile.pop::before {
  width: 86%;
  height: 86%;
  margin-left: -43%;
  margin-top: -43%;
  border-radius: 0.22rem;
  background: rgba(255, 247, 214, 0.85);
  opacity: 0;
  animation: tile-flash 220ms cubic-bezier(0.08, 0.8, 0.2, 1) forwards;
  z-index: 1;
  will-change: transform, opacity;
}

.tile.pop::after {
  width: 0.9rem;
  height: 0.9rem;
  margin-left: -0.45rem;
  margin-top: -0.45rem;
  border-radius: 0.3rem;
  border: 2px solid rgba(255, 247, 214, 0.95);
  box-shadow: 0 0 0 1px rgba(255, 163, 90, 0.25);
  animation: tile-blast-ring 260ms cubic-bezier(0.08, 0.82, 0.2, 1) forwards;
  z-index: 2;
  will-change: transform, opacity;
}

.tile.unique-bonus {
  animation: tile-unique-bonus 540ms cubic-bezier(0.2, 0.85, 0.22, 1) both;
  z-index: 3;
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 0.72),
    inset -1px -1px 0 rgba(10, 65, 132, 0.65),
    0 0 0 1px rgba(111, 208, 255, 0.34),
    0 0 14px rgba(111, 208, 255, 0.32);
}

.tile.unique-bonus::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 0.3rem;
  border: 1px solid rgba(226, 246, 255, 0.85);
  opacity: 0;
  pointer-events: none;
  animation: tile-unique-ring 540ms cubic-bezier(0.2, 0.85, 0.22, 1) both;
}

@keyframes tile-fall {
  from {
    transform:
      translateX(var(--tumble-x, 0px))
      translateY(calc(var(--drop, 0) * (var(--tile-size) + var(--board-gap)) * -1))
      rotate(var(--tumble-rot, 0deg))
      scale(0.97);
    opacity: 0.84;
  }
  72% {
    transform:
      translateX(var(--tumble-x-overshoot, 0px))
      translateY(0)
      rotate(var(--tumble-rot-overshoot, 0deg))
      scale(1.01);
    opacity: 1;
  }
  to {
    transform: translateX(0) translateY(0) rotate(0deg) scale(1);
    opacity: 1;
  }
}

@keyframes tile-slide-move {
  from {
    transform: translate3d(
      var(--slide-from-x, 0px),
      var(--slide-from-y, 0px),
      0
    );
    animation-timing-function: cubic-bezier(0.2, 0.82, 0.24, 1);
  }
  78% {
    transform: translate3d(
      var(--slide-bounce-x, 0px),
      var(--slide-bounce-y, 0px),
      0
    );
    animation-timing-function: cubic-bezier(0.22, 0.76, 0.24, 1);
  }
  92% {
    transform: translate3d(
      var(--slide-settle-x, 0px),
      var(--slide-settle-y, 0px),
      0
    );
    animation-timing-function: cubic-bezier(0.24, 0.74, 0.24, 1);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes tile-slide-spawn {
  from {
    transform: scale(0.78);
    opacity: 0.35;
  }
  72% {
    transform: scale(1.04);
    opacity: 1;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes tile-slide-merge {
  from {
    transform: scale(0.72);
    animation-timing-function: cubic-bezier(0.2, 0.9, 0.24, 1);
  }
  40% {
    transform: scale(1.17);
    animation-timing-function: cubic-bezier(0.24, 0.74, 0.24, 1);
  }
  63% {
    transform: scale(0.93);
    animation-timing-function: cubic-bezier(0.24, 0.76, 0.24, 1);
  }
  82% {
    transform: scale(1.045);
    animation-timing-function: cubic-bezier(0.24, 0.78, 0.24, 1);
  }
  to {
    transform: scale(1);
  }
}

@keyframes tile-merge-pop-2048 {
  0% {
    transform: scale(1);
  }
  45% {
    transform: scale(1.12);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes tile-slide-merge-flash {
  0% {
    opacity: 0;
    transform: scale(0.74);
  }
  28% {
    opacity: 0.86;
    transform: scale(1.02);
  }
  56% {
    opacity: 0.42;
    transform: scale(1.12);
  }
  100% {
    opacity: 0;
    transform: scale(1.2);
  }
}

@keyframes tile-slide-merge-ring {
  0% {
    opacity: 0;
    transform: scale(0.72);
  }
  26% {
    opacity: 0.9;
    transform: scale(1);
  }
  58% {
    opacity: 0.36;
    transform: scale(1.14);
  }
  100% {
    opacity: 0;
    transform: scale(1.22);
  }
}

@keyframes tile-final-fracture-rattle {
  0% {
    transform: translate(
        calc(var(--shard-x, 1px) * 2.2),
        calc(var(--shard-y, 1px) * 2.2)
      )
      rotate(calc(var(--shard-r, 1deg) * 2));
  }
  50% {
    transform: translate(
        calc(var(--shard-x, 1px) * 2.65),
        calc(var(--shard-y, 1px) * 2.65)
      )
      rotate(calc(var(--shard-r, 1deg) * 2.45));
  }
  100% {
    transform: translate(
        calc(var(--shard-x, 1px) * 2.3),
        calc(var(--shard-y, 1px) * 2.3)
      )
      rotate(calc(var(--shard-r, 1deg) * 2.1));
  }
}

@keyframes tile-final-crack-creep {
  0% {
    opacity: 0.9;
    transform: translate(0, 0);
  }
  55% {
    opacity: 1;
    transform: translate(
        calc(var(--shard-x, 1px) * 0.06),
        calc(var(--shard-y, 1px) * 0.06)
      );
  }
  100% {
    opacity: 1;
    transform: translate(
        calc(var(--shard-x, 1px) * -0.16),
        calc(var(--shard-y, 1px) * -0.16)
      );
  }
}

@keyframes tile-prefix-crackle {
  0% {
    opacity: 0.22;
    transform: translate(0, 0) scale(1);
  }
  22% {
    opacity: 0.4;
    transform: translate(-0.2px, 0.15px) scale(1.002);
  }
  48% {
    opacity: 0.6;
    transform: translate(0.18px, -0.12px) scale(0.998);
  }
  74% {
    opacity: 0.34;
    transform: translate(-0.12px, -0.08px) scale(1.001);
  }
  100% {
    opacity: 0.52;
    transform: translate(0, 0) scale(1);
  }
}

@keyframes tile-prefix-crack-pulse {
  0% {
    opacity: 0.35;
    transform: translate(0, 0) scale(1);
  }
  50% {
    opacity: 0.95;
    transform: translate(0.2px, -0.15px) scale(1.008);
  }
  100% {
    opacity: 0.45;
    transform: translate(0, 0) scale(1);
  }
}

@keyframes tile-pop {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  30% {
    transform: scale(1.08) rotate(2deg);
    opacity: 1;
  }
  62% {
    transform: scale(1.16) rotate(-3deg);
    opacity: 1;
  }
  100% {
    transform: scale(0.06) rotate(-8deg);
    opacity: 0;
  }
}

@keyframes tile-flash {
  0% {
    transform: scale(0.85);
    opacity: 0;
  }
  35% {
    transform: scale(1.05);
    opacity: 0.85;
  }
  100% {
    transform: scale(1.12);
    opacity: 0;
  }
}

@keyframes tile-blast-ring {
  0% {
    transform: scale(0.35) rotate(0deg);
    opacity: 0.95;
  }
  65% {
    transform: scale(1.35) rotate(6deg);
    opacity: 0.45;
  }
  100% {
    transform: scale(1.75) rotate(8deg);
    opacity: 0;
  }
}

@keyframes tile-unique-bonus {
  0% {
    transform: scale(1);
    filter: brightness(1);
  }
  28% {
    transform: scale(1.08);
    filter: brightness(1.12);
  }
  62% {
    transform: scale(0.98);
    filter: brightness(1.03);
  }
  100% {
    transform: scale(1);
    filter: brightness(1);
  }
}

@keyframes tile-unique-ring {
  0% {
    transform: scale(0.9);
    opacity: 0;
  }
  30% {
    transform: scale(1.04);
    opacity: 0.9;
  }
  100% {
    transform: scale(1.14);
    opacity: 0;
  }
}

@keyframes slide-clear-burst {
  0% {
    transform: scale(0.78);
    opacity: 0;
  }
  22% {
    transform: scale(1.04);
    opacity: 1;
  }
  68% {
    transform: scale(1.08);
    opacity: 0.86;
  }
  100% {
    transform: scale(0.6);
    opacity: 0;
  }
}

@keyframes slide-clear-ring {
  0% {
    transform: scale(0.7);
    opacity: 0;
  }
  18% {
    opacity: 0.85;
  }
  100% {
    transform: scale(1.55);
    opacity: 0;
  }
}

@keyframes slide-submit-drop-off {
  0% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
  100% {
    transform: translate3d(var(--submit-exit-x, 0px), var(--submit-exit-y, 0px), 0);
    opacity: 1;
  }
}

@keyframes slide-submit-depth-shadow {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0) scale(1);
  }
  14% {
    opacity: 0.08;
    transform: translate3d(var(--submit-push-x, 0px), var(--submit-push-y, 0px), 0) scale(0.96);
  }
  40% {
    opacity: 0.14;
    transform: translate3d(var(--submit-edge-x, 0px), var(--submit-edge-y, 0px), 0) scale(0.88);
  }
  66% {
    opacity: 0.12;
    transform: translate3d(var(--submit-mid-x, 0px), var(--submit-mid-y, 0px), 0) scale(0.5);
  }
  100% {
    opacity: 0;
    transform: translate3d(var(--submit-abyss-x, var(--submit-fall-x, 0px)), var(--submit-abyss-y, var(--submit-fall-y, 0px)), 0)
      scale(0.16);
  }
}

@keyframes slide-submit-edge-rim {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0) scale(1);
  }
  14% {
    opacity: 0.28;
    transform: translate3d(var(--submit-push-x, 0px), var(--submit-push-y, 0px), 0) scale(0.98);
  }
  40% {
    opacity: 0.42;
    transform: translate3d(var(--submit-edge-x, 0px), var(--submit-edge-y, 0px), 0) scale(0.96);
  }
  66% {
    opacity: 0.18;
    transform: translate3d(var(--submit-mid-x, 0px), var(--submit-mid-y, 0px), 0) scale(0.52);
  }
  100% {
    opacity: 0;
    transform: translate3d(var(--submit-abyss-x, var(--submit-fall-x, 0px)), var(--submit-abyss-y, var(--submit-fall-y, 0px)), 0)
      scale(0.16);
  }
}

@keyframes slide-discard-shatter-stage {
  0% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
  12% {
    opacity: 1;
    transform: translate3d(-1px, 1px, 0) scale(1.016);
  }
  24% {
    opacity: 1;
    transform: translate3d(2px, -1px, 0) scale(1.024);
  }
  38% {
    opacity: 1;
    transform: translate3d(-2px, 2px, 0) scale(1.01);
  }
  68% {
    opacity: 1;
    transform: translate3d(0, 1px, 0) scale(0.99);
  }
  100% {
    opacity: 0;
    transform: translate3d(
        calc(var(--expire-jitter-x, 0px) * 0.12),
        calc(var(--expire-jitter-y, 10px) * 0.18),
        0
      )
      scale(0.88);
  }
}

@keyframes slide-discard-shatter-lite {
  0% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
  22% {
    opacity: 1;
    transform: translate3d(var(--expire-jitter-mid-x, 0px), var(--expire-jitter-mid-y, 0px), 0) scale(1.02);
  }
  58% {
    opacity: 0.96;
    transform: translate3d(
        calc(var(--expire-jitter-mid-x, 0px) * 1.2),
        calc(var(--expire-jitter-mid-y, 0px) * 0.8),
        0
      )
      scale(0.92);
  }
  100% {
    opacity: 0;
    transform: translate3d(var(--expire-jitter-x, 0px), var(--expire-jitter-y, 10px), 0)
      rotate(calc(var(--expire-jitter-r, 0deg) * 0.3))
      scale(0.76);
  }
}

@keyframes slide-discard-lite-dust {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0) scale(0.84);
  }
  24% {
    opacity: 0.92;
    transform: translate3d(var(--expire-jitter-mid-x, 0px), var(--expire-jitter-mid-y, 0px), 0) scale(1.02);
  }
  100% {
    opacity: 0;
    transform: translate3d(var(--expire-jitter-x, 0px), var(--expire-jitter-y, 10px), 0) scale(1.28);
  }
}

@keyframes slide-discard-crack-reveal {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 0.18;
  }
  24% {
    opacity: 1;
  }
  52% {
    opacity: 0.98;
  }
  74% {
    opacity: 0.52;
  }
  100% {
    opacity: 0;
  }
}

@keyframes slide-discard-face-break {
  0% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
  12% {
    opacity: 1;
    transform: translate3d(1px, -1px, 0) rotate(0.25deg) scale(1.03);
  }
  24% {
    opacity: 1;
    transform: translate3d(-1px, 1px, 0) rotate(-0.35deg) scale(0.995);
  }
  38% {
    opacity: 0.9;
    transform: translate3d(0, 1px, 0) rotate(0deg) scale(0.94);
  }
  56% {
    opacity: 0.42;
    transform: translate3d(0, 3px, 0) rotate(calc(var(--expire-jitter-r, 0deg) * 0.12)) scale(0.82);
  }
  100% {
    opacity: 0;
    transform: translate3d(
        calc(var(--expire-jitter-mid-x, 0px) * 0.9),
        calc(var(--expire-jitter-y, 10px) * 0.35),
        0
      )
      rotate(calc(var(--expire-jitter-r, 0deg) * 0.3))
      scale(0.58);
  }
}

@keyframes slide-discard-face-lite {
  0% {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
  }
  24% {
    opacity: 0.92;
    transform: translate3d(var(--expire-jitter-mid-x, 0px), var(--expire-jitter-mid-y, 0px), 0)
      rotate(calc(var(--expire-jitter-r, 0deg) * 0.22)) scale(0.94);
  }
  56% {
    opacity: 0.34;
    transform: translate3d(
        calc(var(--expire-jitter-mid-x, 0px) * 0.4),
        calc(var(--expire-jitter-mid-y, 0px) * 0.4 + 2px),
        0
      )
      rotate(calc(var(--expire-jitter-r, 0deg) * 0.26))
      scale(0.78);
  }
  100% {
    opacity: 0;
    transform: translate3d(
        calc(var(--expire-jitter-x, 0px) * 0.8),
        calc(var(--expire-jitter-y, 10px) * 0.9),
        0
      )
      rotate(calc(var(--expire-jitter-r, 0deg) * 0.8))
      scale(0.48);
  }
}

@keyframes slide-discard-label-pop {
  0% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
  18% {
    opacity: 1;
    transform: translate3d(0, -1px, 0) scale(1.06);
  }
  34% {
    opacity: 0.86;
    transform: translate3d(1px, 0, 0) rotate(0.4deg) scale(0.98);
  }
  56% {
    opacity: 0.34;
    transform: translate3d(0, 2px, 0) rotate(-0.6deg) scale(0.76);
  }
  100% {
    opacity: 0;
    transform: translate3d(0, 8px, 0) scale(0.42);
  }
}

@keyframes slide-discard-label-lite {
  0% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
  50% {
    opacity: 0.44;
    transform: translate3d(var(--expire-jitter-mid-x, 0px), var(--expire-jitter-mid-y, 0px), 0)
      rotate(calc(var(--expire-jitter-r, 0deg) * 0.14))
      scale(0.74);
  }
  100% {
    opacity: 0;
    transform: translate3d(
        calc(var(--expire-jitter-mid-x, 0px) * 1.2),
        calc(var(--expire-jitter-y, 10px) * 0.3),
        0
      )
      rotate(calc(var(--expire-jitter-r, 0deg) * 0.24))
      scale(0.34);
  }
}

@keyframes slide-discard-lite-shard-a {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0) rotate(0deg) scale(0.95);
  }
  18% {
    opacity: 0.98;
    transform: translate3d(var(--expire-jitter-mid-x, 0px), var(--expire-jitter-mid-y, 0px), 0)
      rotate(calc(var(--expire-shard-a-r, -16deg) * 0.24))
      scale(1.02);
  }
  54% {
    opacity: 0.82;
    transform: translate3d(
        calc(var(--expire-shard-a-x, -12px) * 0.62),
        calc(var(--expire-shard-a-y, 10px) * 0.62),
        0
      )
      rotate(calc(var(--expire-shard-a-r, -16deg) * 0.62))
      scale(0.84);
  }
  100% {
    opacity: 0;
    transform: translate3d(
        calc(var(--expire-shard-a-x, -12px) * 1.1),
        calc(var(--expire-shard-a-y, 10px) * 1.1),
        0
      )
      rotate(var(--expire-shard-a-r, -16deg))
      scale(0.42);
  }
}

@keyframes slide-discard-lite-shard-b {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0) rotate(0deg) scale(0.95);
  }
  18% {
    opacity: 0.96;
    transform: translate3d(var(--expire-jitter-mid-x, 0px), var(--expire-jitter-mid-y, 0px), 0)
      rotate(calc(var(--expire-shard-b-r, 16deg) * 0.24))
      scale(1.02);
  }
  54% {
    opacity: 0.8;
    transform: translate3d(
        calc(var(--expire-shard-b-x, 12px) * 0.62),
        calc(var(--expire-shard-b-y, 10px) * 0.62),
        0
      )
      rotate(calc(var(--expire-shard-b-r, 16deg) * 0.62))
      scale(0.84);
  }
  100% {
    opacity: 0;
    transform: translate3d(
        calc(var(--expire-shard-b-x, 12px) * 1.1),
        calc(var(--expire-shard-b-y, 10px) * 1.1),
        0
      )
      rotate(var(--expire-shard-b-r, 16deg))
      scale(0.42);
  }
}

@keyframes slide-discard-dust-bloom {
  0% {
    opacity: 0;
    transform: scale(0.7);
  }
  20% {
    opacity: 0.46;
    transform: scale(1.08);
  }
  42% {
    opacity: 0.24;
    transform: scale(1.18);
  }
  100% {
    opacity: 0;
    transform: scale(1.42);
  }
}

@keyframes slide-discard-red-flash-overlay {
  0% {
    opacity: 0;
    transform: scale(0.94);
  }
  68% {
    opacity: 0;
    transform: scale(0.98);
  }
  84% {
    opacity: 1;
    transform: scale(1.012);
  }
  96% {
    opacity: 0.78;
    transform: scale(1.03);
  }
  100% {
    opacity: 0;
    transform: scale(1.06);
  }
}

@keyframes slide-discard-red-flash-overlay-lite {
  0% {
    opacity: 0;
    transform: scale(0.96);
  }
  55% {
    opacity: 0;
    transform: scale(0.99);
  }
  74% {
    opacity: 1;
    transform: scale(1.006);
  }
  92% {
    opacity: 0.86;
    transform: scale(1.024);
  }
  100% {
    opacity: 0;
    transform: scale(1.05);
  }
}

@keyframes slide-discard-split-gap {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0) scale(1);
  }
  20% {
    opacity: 0.74;
    transform: translate3d(0, 0, 0) scale(1.04);
  }
  46% {
    opacity: 0.66;
    transform: translate3d(0, 1px, 0) scale(1.02);
  }
  72% {
    opacity: 0.3;
    transform: translate3d(0, 4px, 0) scale(0.86);
  }
  100% {
    opacity: 0;
    transform: translate3d(0, 10px, 0) scale(0.62);
  }
}

@keyframes slide-discard-shard-1 {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0) rotate(0deg) scale(0.92);
  }
  8% {
    opacity: 0.96;
    transform: translate3d(-2px, -2px, 0) rotate(-4deg) scale(1.04);
  }
  22% {
    opacity: 1;
    transform: translate3d(-8px, -9px, 0) rotate(-12deg) scale(1.02);
  }
  52% {
    opacity: 0.9;
    transform: translate3d(-22px, -25px, 0) rotate(-24deg) scale(0.88);
  }
  100% {
    opacity: 0;
    transform: translate3d(-46px, -52px, 0) rotate(-42deg) scale(0.46);
  }
}

@keyframes slide-discard-shard-2 {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0) rotate(0deg) scale(0.92);
  }
  8% {
    opacity: 0.96;
    transform: translate3d(2px, -2px, 0) rotate(5deg) scale(1.04);
  }
  22% {
    opacity: 1;
    transform: translate3d(9px, -8px, 0) rotate(13deg) scale(1.02);
  }
  52% {
    opacity: 0.9;
    transform: translate3d(24px, -20px, 0) rotate(26deg) scale(0.88);
  }
  100% {
    opacity: 0;
    transform: translate3d(52px, -40px, 0) rotate(46deg) scale(0.44);
  }
}

@keyframes slide-discard-shard-3 {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0) rotate(0deg) scale(0.92);
  }
  8% {
    opacity: 0.96;
    transform: translate3d(-2px, 2px, 0) rotate(-3deg) scale(1.03);
  }
  22% {
    opacity: 1;
    transform: translate3d(-8px, 9px, 0) rotate(-9deg) scale(1.02);
  }
  52% {
    opacity: 0.9;
    transform: translate3d(-18px, 22px, 0) rotate(-18deg) scale(0.86);
  }
  100% {
    opacity: 0;
    transform: translate3d(-36px, 48px, 0) rotate(-32deg) scale(0.42);
  }
}

@keyframes slide-discard-shard-4 {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0) rotate(0deg) scale(0.92);
  }
  8% {
    opacity: 0.96;
    transform: translate3d(2px, 2px, 0) rotate(3deg) scale(1.03);
  }
  22% {
    opacity: 1;
    transform: translate3d(8px, 8px, 0) rotate(10deg) scale(1.02);
  }
  52% {
    opacity: 0.9;
    transform: translate3d(20px, 24px, 0) rotate(21deg) scale(0.86);
  }
  100% {
    opacity: 0;
    transform: translate3d(42px, 52px, 0) rotate(34deg) scale(0.4);
  }
}

@keyframes slide-submit-score-pop {
  0% {
    transform: translate3d(0, 6px, 0) scale(0.88);
    opacity: 0;
  }
  35% {
    transform: translate3d(0, -2px, 0) scale(1.02);
    opacity: 1;
  }
  100% {
    transform: translate3d(0, -10px, 0) scale(0.96);
    opacity: 0;
  }
}

@media (max-width: 960px) {
  .single-mode-app .board-shell {
    width: 100%;
    display: grid;
    place-items: center;
  }

  .single-mode-app .board-stage {
    justify-self: center;
  }

  .board-frame {
    width: 100%;
    overflow-x: auto;
    display: flex;
    justify-content: center;
  }

  .single-mode-app .board-frame {
    width: 100%;
    max-width: var(--single-board-frame-width);
    margin-inline: auto;
    overflow: visible;
    display: grid;
    place-items: center;
  }

  .input-row {
    grid-template-columns: 1fr 1fr;
  }

  .input-row .text-input {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  :root {
    --slide-move-anim-ms: 100ms;
    --slide-merge-anim-ms: 100ms;
    --slide-merge-bounce-ms: 200ms;
  }

  body::before {
    opacity: 0.4;
  }

  .app {
    padding: 0.4rem 0.35rem 0.7rem;
    gap: 0.6rem;
  }

  .single-mode-app {
    gap: 0.45rem;
  }

  .panel-card {
    border-radius: 0.85rem;
  }

  .hud-panel {
    padding: 0.14rem 0;
  }

  .game-title {
    font-size: 0.82rem;
    letter-spacing: 0.04em;
  }

  .hud-actions {
    gap: 0.3rem;
    padding: 0;
  }

  .hud-menu-btn {
    padding: 0.16rem 0.2rem;
    font-size: 0.72rem;
  }

  .compact-stats .stat {
    padding: 0.04rem 0.08rem;
    border-radius: 0;
  }

  .compact-stats .stat .label {
    font-size: 0.58rem;
  }

  .compact-stats .stat strong {
    font-size: 0.9rem;
  }

  .board-frame {
    border-radius: 14px;
    padding: 10px;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.95),
      0 2px 0 rgba(23, 32, 58, 0.06),
      0 6px 12px rgba(23, 32, 58, 0.07);
  }

  .board-frame.slide-mode {
    border-radius: 14px;
    padding: var(--slide-frame-pad);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.15),
      0 5px 14px rgba(69, 52, 35, 0.12);
  }

  .board.slide-mode {
    border-radius: 8px;
  }

  .board.slide-mode .tile {
    border-radius: 7px;
  }

  .words {
    padding: 0.58rem;
    gap: 0.45rem;
  }

  .words h2 {
    font-size: 0.88rem;
  }

  .single-mode-app .utility-panels .word-list {
    max-height: min(26vh, 11rem);
  }

  .word-item {
    padding: 0.38rem 0.48rem;
    border-radius: 0.5rem;
    font-size: 0.83rem;
    gap: 0.4rem;
  }

  .word-item .points {
    font-size: 0.76rem;
  }

  .menu-panel > summary {
    padding: 0.62rem 0.7rem;
    font-size: 0.88rem;
  }

  .menu-content {
    padding: 0.55rem 0.65rem 0.65rem;
    gap: 0.48rem;
  }

  .rule-list {
    font-size: 0.8rem;
    line-height: 1.25;
    gap: 0.25rem;
  }
}

@media (max-width: 640px) {
  .hud-row {
    flex-direction: row;
    align-items: center;
    gap: 0.45rem;
  }

  .game-title {
    justify-content: flex-start;
    flex: 1 1 auto;
    min-width: 0;
  }

  .compact-stats {
    width: auto;
    grid-template-columns: repeat(2, minmax(74px, auto));
    gap: 0.3rem;
    flex: 0 0 auto;
  }

  .hud-menu-btn {
    flex: 0 0 auto;
    min-height: auto;
    padding: 0.12rem 0.18rem;
  }

  .tile {
    font-size: calc(var(--tile-size) * 0.46);
  }

  .tile.word-tile[data-len="3"] {
    font-size: calc(var(--tile-size) * 0.29);
  }

  .tile.word-tile[data-len="4"] {
    font-size: calc(var(--tile-size) * 0.245);
  }

  .tile.word-tile[data-len="5"] {
    font-size: calc(var(--tile-size) * 0.205);
  }

  .tile.word-tile[data-len="6"],
  .tile.word-tile[data-len="7"],
  .tile.word-tile[data-len="8"],
  .tile.word-tile[data-len="9"],
  .tile.word-tile[data-len="10"] {
    font-size: calc(var(--tile-size) * 0.18);
  }

  .tile {
    --ttl-badge-inset-x: calc(var(--tile-size) * 0.12);
    --ttl-badge-inset-y: calc(var(--tile-size) * 0.1);
  }

  .game-over-overlay {
    padding: 0.45rem;
    backdrop-filter: blur(1px);
  }

  .game-over-card {
    width: min(94%, calc(var(--tile-size) * 3.65));
    padding: 0.65rem 0.65rem 0.6rem;
    border-radius: 10px;
    gap: 0.38rem;
  }
}

@media (max-width: 700px) {
  .word-tile-inspector {
    position: fixed;
    left: 0.5rem !important;
    right: 0.5rem;
    top: auto !important;
    bottom: calc(0.5rem + env(safe-area-inset-bottom, 0px));
    width: auto;
    max-width: none;
    border-radius: 0.95rem;
    padding: 0.55rem;
    box-shadow:
      0 14px 34px rgba(23, 32, 58, 0.2),
      inset 0 1px 0 rgba(255, 255, 255, 0.92);
  }

  .word-tile-inspector-meta {
    font-size: 0.76rem;
    line-height: 1.2;
  }

  .word-tile-inspector-list {
    max-height: min(34vh, 12.5rem);
    gap: 0.24rem;
  }

  .word-tile-inspector-item {
    padding: 0.3rem 0.38rem;
    gap: 0.45rem;
  }

  .word-tile-inspector-item-meta {
    font-size: 0.68rem;
  }
}

@media (max-width: 380px) {
  .hud-row {
    align-items: stretch;
    flex-direction: column;
    gap: 0.4rem;
  }

  .game-title {
    justify-content: center;
  }

  .compact-stats {
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hud-actions {
    width: 100%;
    justify-content: space-between;
  }

  .hud-menu-btn {
    min-width: 5.8rem;
  }

  .single-mode-app .utility-panels .word-list {
    max-height: min(24vh, 9rem);
  }
}

@media (min-width: 980px) {
  .single-mode-app {
    max-width: 1200px;
    grid-template-columns: auto clamp(250px, 25vw, 300px);
    grid-template-areas:
      "top top"
      "board side"
      "tools side";
    column-gap: 0.95rem;
    row-gap: 0.65rem;
    justify-content: center;
    justify-items: stretch;
    align-items: start;
  }

  .single-mode-app .top-stack {
    grid-area: top;
    width: 100%;
    max-width: none;
  }

  .single-mode-app .board-shell {
    grid-area: board;
    width: auto;
    justify-self: center;
  }

  .single-mode-app .bottom-tools {
    grid-area: tools;
    width: auto;
    justify-self: stretch;
  }

  .single-mode-app .utility-panels {
    grid-area: side;
    width: clamp(250px, 25vw, 300px);
    align-self: start;
    justify-self: start;
  }

  .single-mode-app .utility-panels .words {
    position: sticky;
    top: 0.9rem;
    max-height: calc(100vh - 1.8rem);
    gap: 0.45rem;
  }

  .single-mode-app .utility-panels .word-list {
    max-height: min(70vh, 36rem);
  }

  .app {
    grid-template-columns: minmax(0, 1fr) minmax(250px, 300px);
    grid-template-areas:
      "top top"
      "board side"
      "tools side";
    column-gap: 0.95rem;
    row-gap: 0.85rem;
    align-items: start;
  }

  .top-stack {
    grid-area: top;
  }

  .board-shell {
    grid-area: board;
    justify-content: center;
  }

  .bottom-tools {
    grid-area: tools;
  }

  .utility-panels {
    grid-area: side;
    align-self: start;
  }

  .utility-panels .words {
    position: sticky;
    top: 0.9rem;
    max-height: calc(100vh - 1.8rem);
    gap: 0.6rem;
  }

  .utility-panels .word-list {
    max-height: min(64vh, 32rem);
  }

  .app.single-mode-app {
    grid-template-columns: auto clamp(250px, 25vw, 300px);
    grid-template-areas:
      "top top"
      "board side"
      "tools side";
    justify-content: center;
    justify-items: stretch;
  }
}

/* Mobile layout override layer: keep one coherent, board-first flow. */
@media (max-width: 979px) {
  .single-mode-app {
    max-width: 100%;
    width: 100%;
    grid-template-columns: 1fr;
    justify-items: center;
    row-gap: 0.55rem;
  }

  .single-mode-app .top-stack,
  .single-mode-app .board-shell,
  .single-mode-app .utility-panels {
    width: min(100vw - 0.75rem, var(--single-board-frame-width));
    max-width: 100%;
    justify-self: center;
  }

  .single-mode-app .top-stack {
    margin-top: calc(0.1rem + env(safe-area-inset-top, 0px));
  }

  .single-mode-app .board-shell {
    margin-inline: auto;
    display: grid;
    place-items: center;
  }

  .single-mode-app .board-frame {
    width: 100%;
    max-width: var(--single-board-frame-width);
    margin-inline: auto;
    overflow: visible;
    display: grid;
    place-items: center;
    padding: var(--slide-frame-pad);
    border-radius: 14px;
  }

  .single-mode-app .board-frame.slide-mode {
    border-radius: 14px;
    padding: var(--slide-frame-pad);
  }

  .single-mode-app .utility-panels {
    display: grid;
    gap: 0.5rem;
  }

  .single-mode-app .utility-panels .words {
    width: 100%;
    padding: 0.56rem;
    border-radius: 0.78rem;
  }

  .single-mode-app .utility-panels .word-list {
    max-height: min(30vh, 13rem);
  }

  .site-footer {
    width: min(100vw - 0.75rem, var(--single-board-frame-width));
    margin: 0.12rem auto 0.65rem;
  }

  .single-mode-app .menu-panel[open] {
    top: calc(env(safe-area-inset-top, 0px) + 0.75rem);
    width: min(100vw - 1rem, 32rem);
    max-height: min(82vh, 42rem);
  }
}

@media (max-width: 640px) {
  .app {
    padding: 0.34rem 0.26rem 0.65rem;
    gap: 0.5rem;
  }

  .single-mode-app .top-stack,
  .single-mode-app .board-shell,
  .single-mode-app .utility-panels {
    width: min(100vw - 0.52rem, var(--single-board-frame-width));
  }

  .hud-row {
    display: flex;
    flex-direction: column;
    width: 100%;
    justify-content: center;
    gap: 0.34rem;
    align-items: center;
    text-align: center;
  }

  .game-title {
    width: 100%;
    justify-content: center;
  }

  .game-title-tiles.board.slide-mode {
    --tile-size: clamp(42px, 13.8vw, 60px);
    --slide-board-gap: 6px;
  }

  .hud-actions {
    width: auto;
    max-width: 100%;
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 0.28rem;
    align-items: center;
    margin-inline: auto;
  }

  .hud-actions #menuHeaderBtn {
    flex: 0 0 auto;
  }

  .hud-actions #resetHeaderBtn {
    flex: 0 0 auto;
  }

  .hud-actions .compact-stats {
    margin-left: 0;
    width: auto;
  }

  .hud-menu-btn {
    min-height: 2.2rem;
    display: inline-grid;
    place-items: center;
    border-radius: 0.58rem;
    border: 1px solid rgba(86, 74, 58, 0.28);
    background: rgba(255, 251, 243, 0.84);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.85),
      0 1px 0 rgba(76, 61, 42, 0.12);
    font-size: 0.74rem;
    padding: 0.24rem 0.38rem;
  }

  .hud-menu-btn.active {
    text-decoration: none;
    color: #0a5a9a;
    border-color: rgba(12, 94, 168, 0.36);
    background: rgba(230, 241, 253, 0.86);
  }

  .compact-stats {
    width: auto;
    grid-template-columns: repeat(2, minmax(60px, auto));
    justify-content: center;
    gap: 0.28rem;
  }

  .compact-stats .stat {
    min-height: 2.15rem;
    justify-content: center;
    align-content: center;
    border-radius: 0.58rem;
    border: 1px solid rgba(108, 91, 66, 0.22);
    background: rgba(255, 250, 242, 0.82);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.88),
      0 1px 0 rgba(90, 72, 49, 0.1);
    padding: 0.18rem 0.24rem;
    gap: 0.1rem;
  }

  .compact-stats .stat .label {
    font-size: 0.53rem;
    letter-spacing: 0.07em;
  }

  .compact-stats .stat strong {
    font-size: 0.93rem;
    line-height: 1;
  }

  .single-mode-app .board-frame {
    border-radius: 12px;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.16),
      0 4px 10px rgba(69, 52, 35, 0.12);
  }

  .single-mode-app .board-frame.slide-mode {
    border-radius: 12px;
  }

  .single-mode-app .board.slide-mode {
    border-radius: 8px;
  }

  .single-mode-app .board.slide-mode .tile {
    border-radius: 7px;
  }

  .single-mode-app .utility-panels .word-list {
    max-height: min(28vh, 11rem);
  }

  .word-item {
    padding: 0.34rem 0.44rem;
    border-radius: 0.45rem;
    font-size: 0.8rem;
    gap: 0.35rem;
  }

  .word-item .points {
    font-size: 0.72rem;
  }

  .single-mode-app .menu-panel[open] {
    top: calc(env(safe-area-inset-top, 0px) + 0.45rem);
    width: min(100vw - 0.64rem, 30rem);
    border-radius: 0.85rem;
  }

  .menu-content {
    padding: 0.52rem 0.58rem 0.64rem;
  }
}

@media (max-width: 420px) {
  .game-title-tiles.board.slide-mode {
    --tile-size: clamp(38px, 14.2vw, 54px);
    --slide-board-gap: 5px;
  }

  .hud-menu-btn {
    min-height: 2.05rem;
    font-size: 0.7rem;
  }
}

@media (hover: none) and (pointer: coarse) {
  .board-loading-overlay,
  .game-over-overlay {
    backdrop-filter: none;
  }

  .tile.ttl-prefix.ttl-heat-5::after {
    animation: none;
  }
}

.mobile-optimized .tile {
  transition: none;
  box-shadow: 0 1px 1px rgba(30, 34, 47, 0.07);
  contain: paint;
  isolation: auto;
}

.mobile-optimized .board.slide-mode .tile.empty,
.perf-low .board.slide-mode .tile.empty,
.perf-ultra-mobile .board.slide-mode .tile.empty {
  background: transparent !important;
  background-image: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
  opacity: 0 !important;
  transition: none !important;
}

.mobile-optimized .board.slide-mode .tile {
  background-image: var(--letter-edge-pattern-moving, var(--letter-edge-pattern));
  background-size: var(--letter-edge-pattern-size-moving, var(--letter-edge-pattern-size, 100% 100%));
  background-position: var(--letter-edge-pattern-position-moving, var(--letter-edge-pattern-position, center));
  background-repeat: no-repeat;
}

.mobile-optimized .tile .tile-label {
  transform: translateZ(0) scale(var(--word-fit-scale, 1));
}

.mobile-optimized .tile:hover {
  filter: none;
}

.mobile-optimized .board.dragging .tile.selected {
  filter: none;
}

.mobile-optimized .tile.selected {
  box-shadow: 0 0 0 2px rgba(30, 167, 253, 0.24);
}

.mobile-optimized .tile.slide-valid-word {
  box-shadow: 0 0 0 1px rgba(52, 211, 102, 0.4);
}

.mobile-optimized .board.slide-mode .tile.slide-valid-word,
.perf-low .board.slide-mode .tile.slide-valid-word,
.perf-dense-board .board.slide-mode .tile.slide-valid-word,
.perf-ultra-mobile .board.slide-mode .tile.slide-valid-word {
  background-color: #d8f9df !important;
  border-color: rgba(20, 143, 65, 0.92) !important;
}

.mobile-optimized .tile.score-tile {
  box-shadow: 0 1px 1px rgba(30, 34, 47, 0.1);
}

.mobile-optimized .tile.ttl-prefix.ttl-heat-1,
.mobile-optimized .tile.ttl-prefix.ttl-heat-2,
.mobile-optimized .tile.ttl-prefix.ttl-heat-3,
.mobile-optimized .tile.ttl-prefix.ttl-heat-4,
.mobile-optimized .tile.ttl-prefix.ttl-heat-5 {
  background-image: var(--letter-edge-pattern-moving, var(--letter-edge-pattern));
  border-color: color-mix(in srgb, var(--tile-border) 90%, rgba(60, 66, 82, 0.5) 10%);
  box-shadow: 0 1px 1px rgba(30, 34, 47, 0.07);
}

.mobile-optimized .tile.ttl-prefix.ttl-heat-2::after,
.mobile-optimized .tile.ttl-prefix.ttl-heat-3::after,
.mobile-optimized .tile.ttl-prefix.ttl-heat-4::after,
.mobile-optimized .tile.ttl-prefix.ttl-heat-5::after {
  content: none !important;
  animation: none !important;
}

.mobile-optimized .tile.ttl-prefix.ttl-heat-5::before,
.mobile-optimized .tile.ttl-prefix.ttl-heat-5::after,
.perf-low .tile.ttl-prefix.ttl-heat-5::before,
.perf-low .tile.ttl-prefix.ttl-heat-5::after,
.perf-dense-board .tile.ttl-prefix.ttl-heat-5::before,
.perf-dense-board .tile.ttl-prefix.ttl-heat-5::after,
.perf-ultra-mobile .tile.ttl-prefix.ttl-heat-5::before,
.perf-ultra-mobile .tile.ttl-prefix.ttl-heat-5::after {
  animation: none !important;
}

.mobile-optimized .board.dom-slide-active .tile:not(.dom-slide-moving) {
  transition: none !important;
}

.mobile-optimized .board.dom-slide-active .tile.dom-slide-moving:not(.empty) {
  box-shadow: 0 1px 1px rgba(30, 34, 47, 0.05);
}

.mobile-optimized .board.dom-slide-active .tile.dom-slide-moving:not(.empty) {
  background-image: var(--letter-edge-pattern-moving, var(--letter-edge-pattern)) !important;
}

.mobile-optimized .board.dom-slide-active .tile.slide-valid-word,
.perf-low .board.dom-slide-active .tile.slide-valid-word,
.perf-dense-board .board.dom-slide-active .tile.slide-valid-word,
.perf-ultra-mobile .board.dom-slide-active .tile.slide-valid-word {
  background-color: #d8f9df !important;
  border-color: rgba(20, 143, 65, 0.92) !important;
}

.mobile-optimized .board.dom-slide-active .tile.dom-slide-moving,
.perf-low .board.dom-slide-active .tile.dom-slide-moving,
.perf-ultra-mobile .board.dom-slide-active .tile.dom-slide-moving {
  box-shadow: none !important;
  background-image: var(--letter-edge-pattern-moving, var(--letter-edge-pattern)) !important;
  background-size: var(--letter-edge-pattern-size-moving, var(--letter-edge-pattern-size, 100% 100%)) !important;
  background-position: var(--letter-edge-pattern-position-moving, var(--letter-edge-pattern-position, center)) !important;
  background-repeat: no-repeat !important;
  filter: none !important;
}

.mobile-optimized .board.dom-slide-active .tile.empty {
  background: transparent !important;
  background-image: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

.mobile-optimized .board.dom-slide-active .tile.dom-slide-moving.ttl-prefix::before,
.mobile-optimized .board.dom-slide-active .tile.dom-slide-moving.ttl-prefix::after,
.perf-dense-board .board.dom-slide-active .tile.dom-slide-moving.ttl-prefix::before,
.perf-dense-board .board.dom-slide-active .tile.dom-slide-moving.ttl-prefix::after {
  content: none !important;
  animation: none !important;
}

.mobile-optimized .tile.slide-merge::before,
.mobile-optimized .tile.slide-merge::after,
.mobile-optimized .tile.unique-bonus::before {
  content: none !important;
  animation: none !important;
}

.mobile-optimized .tile.unique-bonus {
  animation: none !important;
  box-shadow: 0 0 0 1px rgba(111, 208, 255, 0.24);
}

.mobile-optimized .ttl-badge {
  top: calc(var(--tile-size) * 0.1);
  right: calc(var(--tile-size) * 0.12);
  max-width: calc(var(--tile-size) * 0.44);
  font-size: clamp(9px, calc(var(--tile-size) * 0.1), 12px);
  box-shadow: none;
}

.perf-ultra-mobile .board.slide-mode .tile {
  background-color: #faf9f5;
  background-image: var(--letter-edge-pattern-moving, var(--letter-edge-pattern)) !important;
  border-color: rgba(136, 121, 103, 0.34);
  box-shadow: none !important;
}

.perf-ultra-mobile .tile.slide-valid-word {
  background-image: var(--letter-edge-pattern-moving, var(--letter-edge-pattern)) !important;
  box-shadow: 0 0 0 1px rgba(52, 211, 102, 0.38) !important;
}

.perf-ultra-mobile .tile.ttl-prefix::before,
.perf-ultra-mobile .tile.ttl-prefix::after,
.perf-ultra-mobile .tile.slide-merge::before,
.perf-ultra-mobile .tile.slide-merge::after,
.perf-ultra-mobile .tile.unique-bonus::before {
  content: none !important;
  animation: none !important;
}

.perf-ultra-mobile .tile.unique-bonus {
  animation: none !important;
  box-shadow: 0 0 0 1px rgba(111, 208, 255, 0.22) !important;
}

.perf-ultra-mobile .board.dom-slide-active .tile:not(.empty) {
  box-shadow: none !important;
}

.perf-ultra-mobile .ttl-badge {
  box-shadow: none;
  background: rgba(248, 252, 255, 0.9);
}

.perf-ultra-mobile .board-loading-overlay,
.perf-ultra-mobile .game-over-overlay {
  backdrop-filter: none;
}

.perf-low .tile {
  box-shadow: 0 1px 1px rgba(30, 34, 47, 0.07);
}

.perf-low .board.slide-mode .tile {
  background-image: var(--letter-edge-pattern-moving, var(--letter-edge-pattern));
}

.perf-low .tile.ttl-prefix.ttl-heat-1,
.perf-low .tile.ttl-prefix.ttl-heat-2,
.perf-low .tile.ttl-prefix.ttl-heat-3,
.perf-low .tile.ttl-prefix.ttl-heat-4,
.perf-low .tile.ttl-prefix.ttl-heat-5 {
  border-color: color-mix(in srgb, var(--tile-border) 90%, rgba(60, 66, 82, 0.5) 10%);
}

.perf-low .tile.ttl-prefix.ttl-heat-2::after,
.perf-low .tile.ttl-prefix.ttl-heat-3::after,
.perf-low .tile.ttl-prefix.ttl-heat-4::after,
.perf-low .tile.ttl-prefix.ttl-heat-5::after {
  content: none !important;
  animation: none !important;
}

.perf-dense-board .tile.ttl-prefix.ttl-heat-1,
.perf-dense-board .tile.ttl-prefix.ttl-heat-2,
.perf-dense-board .tile.ttl-prefix.ttl-heat-3,
.perf-dense-board .tile.ttl-prefix.ttl-heat-4,
.perf-dense-board .tile.ttl-prefix.ttl-heat-5 {
  background-image: var(--letter-edge-pattern-moving, var(--letter-edge-pattern));
  border-color: color-mix(in srgb, var(--tile-border) 90%, rgba(60, 66, 82, 0.5) 10%);
  box-shadow: 0 1px 1px rgba(30, 34, 47, 0.07);
}

.perf-dense-board .tile.ttl-prefix.ttl-heat-2::after,
.perf-dense-board .tile.ttl-prefix.ttl-heat-3::after,
.perf-dense-board .tile.ttl-prefix.ttl-heat-4::after,
.perf-dense-board .tile.ttl-prefix.ttl-heat-5::after,
.perf-dense-board .tile.slide-merge::before,
.perf-dense-board .tile.slide-merge::after {
  content: none !important;
  animation: none !important;
}

.perf-dense-board .tile.ttl-prefix .ttl-badge {
  background: rgba(248, 252, 255, 0.86);
}

.mobile-optimized .tile.ttl-prefix.ttl-heat-1::before,
.mobile-optimized .tile.ttl-prefix.ttl-heat-2::before,
.mobile-optimized .tile.ttl-prefix.ttl-heat-3::before,
.mobile-optimized .tile.ttl-prefix.ttl-heat-4::before,
.mobile-optimized .tile.ttl-prefix.ttl-heat-5::before,
.perf-low .tile.ttl-prefix.ttl-heat-1::before,
.perf-low .tile.ttl-prefix.ttl-heat-2::before,
.perf-low .tile.ttl-prefix.ttl-heat-3::before,
.perf-low .tile.ttl-prefix.ttl-heat-4::before,
.perf-low .tile.ttl-prefix.ttl-heat-5::before,
.perf-dense-board .tile.ttl-prefix.ttl-heat-1::before,
.perf-dense-board .tile.ttl-prefix.ttl-heat-2::before,
.perf-dense-board .tile.ttl-prefix.ttl-heat-3::before,
.perf-dense-board .tile.ttl-prefix.ttl-heat-4::before,
.perf-dense-board .tile.ttl-prefix.ttl-heat-5::before {
  content: "" !important;
  inset: 0.1rem;
  border-radius: 0.12rem;
  background: none !important;
  animation: none !important;
}

.mobile-optimized .tile.ttl-prefix.ttl-heat-1::before,
.perf-low .tile.ttl-prefix.ttl-heat-1::before,
.perf-dense-board .tile.ttl-prefix.ttl-heat-1::before {
  background:
    linear-gradient(
      var(--crack-a1, 148deg),
      transparent calc(var(--crack-p1, 24%) - 0.68%),
      rgba(255, 255, 255, 0.76) calc(var(--crack-p1, 24%) - 0.14%),
      rgba(58, 64, 76, 0.54) calc(var(--crack-p1, 24%) + 0.26%),
      transparent calc(var(--crack-p1, 24%) + 0.74%)
    ) !important;
  opacity: 0.42 !important;
}

.mobile-optimized .tile.ttl-prefix.ttl-heat-2::before,
.perf-low .tile.ttl-prefix.ttl-heat-2::before,
.perf-dense-board .tile.ttl-prefix.ttl-heat-2::before {
  background:
    linear-gradient(
      var(--crack-a1, 148deg),
      transparent calc(var(--crack-p1, 24%) - 0.82%),
      rgba(255, 255, 255, 0.78) calc(var(--crack-p1, 24%) - 0.18%),
      rgba(58, 64, 76, 0.54) calc(var(--crack-p1, 24%) + 0.34%),
      transparent calc(var(--crack-p1, 24%) + 0.88%)
    ),
    linear-gradient(
      var(--crack-a2, 42deg),
      transparent calc(var(--crack-p2, 41%) - 0.78%),
      rgba(255, 255, 255, 0.72) calc(var(--crack-p2, 41%) - 0.16%),
      rgba(60, 66, 78, 0.48) calc(var(--crack-p2, 41%) + 0.3%),
      transparent calc(var(--crack-p2, 41%) + 0.82%)
    ) !important;
  opacity: 0.56 !important;
}

.mobile-optimized .tile.ttl-prefix.ttl-heat-3::before,
.perf-low .tile.ttl-prefix.ttl-heat-3::before,
.perf-dense-board .tile.ttl-prefix.ttl-heat-3::before {
  background:
    linear-gradient(
      var(--crack-a1, 148deg),
      transparent calc(var(--crack-p1, 24%) - 0.96%),
      rgba(255, 255, 255, 0.8) calc(var(--crack-p1, 24%) - 0.2%),
      rgba(58, 64, 76, 0.56) calc(var(--crack-p1, 24%) + 0.38%),
      transparent calc(var(--crack-p1, 24%) + 0.98%)
    ),
    linear-gradient(
      var(--crack-a2, 42deg),
      transparent calc(var(--crack-p2, 41%) - 0.9%),
      rgba(255, 255, 255, 0.74) calc(var(--crack-p2, 41%) - 0.2%),
      rgba(60, 66, 78, 0.52) calc(var(--crack-p2, 41%) + 0.34%),
      transparent calc(var(--crack-p2, 41%) + 0.92%)
    ),
    linear-gradient(
      var(--crack-a3, 96deg),
      transparent calc(var(--crack-p3, 57%) - 0.84%),
      rgba(255, 255, 255, 0.68) calc(var(--crack-p3, 57%) - 0.16%),
      rgba(59, 65, 76, 0.48) calc(var(--crack-p3, 57%) + 0.32%),
      transparent calc(var(--crack-p3, 57%) + 0.86%)
    ) !important;
  opacity: 0.7 !important;
}

.mobile-optimized .tile.ttl-prefix.ttl-heat-4::before,
.perf-low .tile.ttl-prefix.ttl-heat-4::before,
.perf-dense-board .tile.ttl-prefix.ttl-heat-4::before {
  background:
    linear-gradient(
      var(--crack-a1, 148deg),
      transparent calc(var(--crack-p1, 24%) - 1.08%),
      rgba(255, 255, 255, 0.82) calc(var(--crack-p1, 24%) - 0.24%),
      rgba(58, 64, 76, 0.58) calc(var(--crack-p1, 24%) + 0.44%),
      transparent calc(var(--crack-p1, 24%) + 1.12%)
    ),
    linear-gradient(
      var(--crack-a2, 42deg),
      transparent calc(var(--crack-p2, 41%) - 1.02%),
      rgba(255, 255, 255, 0.76) calc(var(--crack-p2, 41%) - 0.24%),
      rgba(60, 66, 78, 0.54) calc(var(--crack-p2, 41%) + 0.4%),
      transparent calc(var(--crack-p2, 41%) + 1.02%)
    ),
    linear-gradient(
      var(--crack-a3, 96deg),
      transparent calc(var(--crack-p3, 57%) - 0.98%),
      rgba(255, 255, 255, 0.7) calc(var(--crack-p3, 57%) - 0.2%),
      rgba(59, 65, 76, 0.52) calc(var(--crack-p3, 57%) + 0.36%),
      transparent calc(var(--crack-p3, 57%) + 0.98%)
    ),
    linear-gradient(
      var(--crack-a4, 16deg),
      transparent calc(var(--crack-p4, 69%) - 0.92%),
      rgba(255, 255, 255, 0.66) calc(var(--crack-p4, 69%) - 0.18%),
      rgba(58, 63, 74, 0.46) calc(var(--crack-p4, 69%) + 0.32%),
      transparent calc(var(--crack-p4, 69%) + 0.92%)
    ) !important;
  opacity: 0.84 !important;
}

.mobile-optimized .tile.ttl-prefix.ttl-heat-5::before,
.perf-low .tile.ttl-prefix.ttl-heat-5::before,
.perf-dense-board .tile.ttl-prefix.ttl-heat-5::before {
  background:
    linear-gradient(
      var(--crack-a1, 148deg),
      transparent calc(var(--crack-p1, 24%) - 1.2%),
      rgba(255, 255, 255, 0.84) calc(var(--crack-p1, 24%) - 0.28%),
      rgba(58, 64, 76, 0.62) calc(var(--crack-p1, 24%) + 0.5%),
      transparent calc(var(--crack-p1, 24%) + 1.24%)
    ),
    linear-gradient(
      var(--crack-a2, 42deg),
      transparent calc(var(--crack-p2, 41%) - 1.14%),
      rgba(255, 255, 255, 0.78) calc(var(--crack-p2, 41%) - 0.28%),
      rgba(60, 66, 78, 0.58) calc(var(--crack-p2, 41%) + 0.46%),
      transparent calc(var(--crack-p2, 41%) + 1.16%)
    ),
    linear-gradient(
      var(--crack-a3, 96deg),
      transparent calc(var(--crack-p3, 57%) - 1.08%),
      rgba(255, 255, 255, 0.74) calc(var(--crack-p3, 57%) - 0.24%),
      rgba(59, 65, 76, 0.56) calc(var(--crack-p3, 57%) + 0.42%),
      transparent calc(var(--crack-p3, 57%) + 1.1%)
    ),
    linear-gradient(
      var(--crack-a4, 16deg),
      transparent calc(var(--crack-p4, 69%) - 1.02%),
      rgba(255, 255, 255, 0.7) calc(var(--crack-p4, 69%) - 0.22%),
      rgba(58, 63, 74, 0.5) calc(var(--crack-p4, 69%) + 0.38%),
      transparent calc(var(--crack-p4, 69%) + 1.02%)
    ),
    linear-gradient(
      calc(var(--crack-a2, 42deg) + 28deg),
      transparent calc(var(--crack-p2, 41%) + 11% - 0.92%),
      rgba(255, 255, 255, 0.64) calc(var(--crack-p2, 41%) + 11% - 0.2%),
      rgba(58, 63, 74, 0.48) calc(var(--crack-p2, 41%) + 11% + 0.34%),
      transparent calc(var(--crack-p2, 41%) + 11% + 0.92%)
    ) !important;
  opacity: 0.92 !important;
}

.perf-low .slide-discard-shatter,
.perf-low .slide-discard-shatter::before,
.perf-low .slide-discard-red-flash-overlay,
.perf-low .slide-discard-face,
.perf-low .slide-discard-face::before,
.perf-low .slide-discard-face::after,
.perf-low .slide-discard-label,
.perf-low .slide-discard-shard {
  animation-duration: 420ms !important;
}

.slide-discard-shatter.lite,
.slide-discard-shatter.lite .slide-discard-face,
.slide-discard-shatter.lite .slide-discard-label,
.slide-discard-shatter.lite::before,
.slide-discard-red-flash-overlay.lite,
.slide-discard-lite-shard {
  animation-duration: 260ms !important;
}

@media (max-width: 760px) {
  .single-mode-app,
  .app.single-mode-app {
    width: 100%;
    justify-items: center;
    row-gap: 0.48rem;
  }

  .single-mode-app .top-stack,
  .single-mode-app .board-shell,
  .single-mode-app .utility-panels,
  .site-footer {
    width: min(100vw - 0.56rem, var(--single-board-frame-width));
    max-width: 100%;
    margin-inline: auto;
  }

  .single-mode-app .board-shell {
    display: grid;
    place-items: center;
  }

  .single-mode-app .board-frame {
    width: 100%;
    max-width: var(--single-board-frame-width);
    margin-inline: auto;
  }

  .hud-row {
    width: 100%;
    display: grid;
    justify-items: center;
    gap: 0.34rem;
  }

  .game-title {
    width: 100%;
    justify-content: center;
  }

  .hud-actions {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0.28rem;
  }

  .hud-actions .compact-stats {
    grid-template-columns: repeat(2, minmax(64px, auto));
    gap: 0.24rem;
  }

  .hud-menu-btn,
  .btn,
  .menu-panel > summary,
  .word-tile-inspector-close {
    border: 1px solid rgba(108, 91, 66, 0.28);
    background: rgba(255, 250, 242, 0.9);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.88),
      0 1px 0 rgba(90, 72, 49, 0.1);
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    scroll-behavior: auto !important;
  }

  .btn,
  .tile {
    transition: none;
  }

  .tile.fall,
  .tile.pop,
  .tile.merge-bounce,
  .tile.ttl-prefix.ttl-heat-2::before,
  .tile.ttl-prefix.ttl-heat-3::before,
  .tile.ttl-prefix.ttl-heat-4::before,
  .tile.ttl-prefix.ttl-heat-5::before,
  .tile.ttl-prefix.ttl-heat-2::after,
  .tile.ttl-prefix.ttl-heat-3::after,
  .tile.ttl-prefix.ttl-heat-4::after,
  .tile.ttl-prefix.ttl-heat-5::after,
  .slide-clear-burst,
  .slide-clear-burst::before,
  .slide-submit-drop,
  .slide-submit-drop::before,
  .slide-submit-drop::after,
  .slide-submit-score-pop,
  .slide-discard-shatter,
  .slide-discard-shatter::before,
  .slide-discard-red-flash-overlay,
  .slide-discard-face,
  .slide-discard-face::before,
  .slide-discard-face::after,
  .slide-discard-label,
  .slide-discard-shard,
  .slide-discard-lite-shard {
    animation-duration: 1ms !important;
  }
}