/* Neon Space Gem — match reference ~99% */

:root {
  --scrolly-bg: #06051a;
  --scrolly-accent: #c44dff;
  --scrolly-accent2: #7ad4ff;
  --scrolly-text: #ffffff;
  --scrolly-muted: rgba(255, 255, 255, 0.6);
  --scrolly-edge-padding: 24px;
  --scrolly-safe-left: env(safe-area-inset-left, 0px);
  --scrolly-safe-right: env(safe-area-inset-right, 0px);
  --scrolly-board-scale: 1;
  --scrolly-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --tile-radius: 16%;
  /* Soft rim — a bit more bevel for volume */
  --keycap-bevel:
    inset 0 2px 0 rgba(255, 255, 255, 0.4),
    inset 0 -4px 6px rgba(0, 0, 0, 0.28),
    inset 2px 0 0 rgba(255, 255, 255, 0.18),
    inset -2px 0 0 rgba(0, 0, 0, 0.2);
  --gem-font: "Nunito", "Avenir Next", system-ui, sans-serif;
}

html, body {
  margin: 0 !important;
  padding: 0 !important;
  background: var(--scrolly-bg) !important;
  color: var(--scrolly-text) !important;
  font-family: var(--gem-font) !important;
  min-height: 100vh;
  width: 100%;
  overflow: hidden !important;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  touch-action: none;
  overscroll-behavior: none;
}

/* Deep space — navy/purple, not charcoal gray */
body {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  padding-left: max(20px, calc(var(--scrolly-safe-left) + 16px));
  padding-right: max(20px, calc(var(--scrolly-safe-right) + 16px));
  box-sizing: border-box;
  position: relative;
  background-color: #05041a !important;
  background-image:
    /* star cores */
    radial-gradient(1.8px 1.8px at 6% 10%, #fff 0%, transparent 100%),
    radial-gradient(1.2px 1.2px at 14% 28%, rgba(200, 230, 255, 0.95) 0%, transparent 100%),
    radial-gradient(2px 2px at 22% 72%, #fff 0%, transparent 100%),
    radial-gradient(1px 1px at 31% 16%, rgba(180, 210, 255, 0.8) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 38% 88%, #fff 0%, transparent 100%),
    radial-gradient(1px 1px at 47% 34%, rgba(255, 255, 255, 0.7) 0%, transparent 100%),
    radial-gradient(2.2px 2.2px at 54% 58%, #fff 0%, transparent 100%),
    radial-gradient(1px 1px at 62% 12%, rgba(200, 220, 255, 0.85) 0%, transparent 100%),
    radial-gradient(1.4px 1.4px at 71% 46%, #fff 0%, transparent 100%),
    radial-gradient(1px 1px at 78% 82%, rgba(180, 200, 255, 0.75) 0%, transparent 100%),
    radial-gradient(1.8px 1.8px at 86% 22%, #fff 0%, transparent 100%),
    radial-gradient(1px 1px at 93% 64%, rgba(220, 230, 255, 0.7) 0%, transparent 100%),
    radial-gradient(1.3px 1.3px at 11% 54%, #fff 0%, transparent 100%),
    radial-gradient(1px 1px at 27% 42%, rgba(255, 255, 255, 0.55) 0%, transparent 100%),
    radial-gradient(1.6px 1.6px at 43% 8%, #fff 0%, transparent 100%),
    radial-gradient(1px 1px at 58% 76%, rgba(190, 210, 255, 0.65) 0%, transparent 100%),
    radial-gradient(1.2px 1.2px at 69% 30%, #fff 0%, transparent 100%),
    radial-gradient(1px 1px at 84% 92%, rgba(255, 255, 255, 0.5) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 96% 40%, #fff 0%, transparent 100%),
    radial-gradient(1px 1px at 18% 92%, rgba(200, 220, 255, 0.6) 0%, transparent 100%),
    /* purple/blue nebula behind board */
    radial-gradient(ellipse 85% 65% at 50% 45%, rgba(120, 55, 220, 0.45), transparent 58%),
    radial-gradient(ellipse 50% 42% at 25% 70%, rgba(50, 90, 220, 0.28), transparent 55%),
    radial-gradient(ellipse 45% 38% at 78% 28%, rgba(170, 60, 240, 0.26), transparent 50%),
    linear-gradient(180deg, #12103a 0%, #0a0824 35%, #06051a 70%, #040312 100%) !important;
  background-attachment: fixed;
}

/* Soft cosmic rays only — NO gray noise on screen blend */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    conic-gradient(from 195deg at 50% 48%,
      transparent 0deg,
      rgba(150, 90, 255, 0.2) 18deg,
      transparent 36deg,
      rgba(80, 150, 255, 0.14) 70deg,
      transparent 95deg,
      rgba(190, 80, 255, 0.16) 140deg,
      transparent 165deg,
      rgba(100, 170, 255, 0.12) 210deg,
      transparent 235deg,
      rgba(170, 100, 255, 0.14) 280deg,
      transparent 310deg,
      rgba(80, 140, 255, 0.12) 340deg,
      transparent 360deg);
  opacity: 0.9;
  mix-blend-mode: screen;
}

/* Soft vignette only */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(
    ellipse 78% 68% at 50% 48%,
    transparent 15%,
    rgba(0, 0, 12, 0.55) 100%
  );
}

/* Tiny grain — overlay keeps purple/navy intact */
html::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: var(--scrolly-noise);
  background-repeat: repeat;
  background-size: 128px 128px;
  opacity: 0.04;
  mix-blend-mode: overlay;
}

.container {
  width: calc(500px * var(--scrolly-board-scale)) !important;
  max-width: calc(500px * var(--scrolly-board-scale));
  margin: 0 auto !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
  position: relative;
  z-index: 1;
}

.heading {
  margin: 0 !important;
  margin-bottom: 0 !important;
  min-height: 0;
  padding: 0;
}

#hud {
  position: fixed;
  top: calc(48px + env(safe-area-inset-top, 0px));
  left: 50% !important;
  transform: translateX(-50%) !important;
  text-align: center !important;
  color: #fff;
  font-family: var(--gem-font);
  font-size: 2.5rem;
  font-weight: 900;
  letter-spacing: -0.03em;
  text-shadow:
    0 0 12px rgba(180, 120, 255, 0.55),
    0 0 28px rgba(120, 60, 220, 0.35),
    0 2px 8px rgba(0, 0, 0, 0.85);
  z-index: 10;
  pointer-events: none;
  transition: transform 0.15s ease-out, color 0.15s ease-out;
  line-height: 1;
}

.hud-score-addition {
  position: absolute;
  right: 0;
  bottom: 100%;
  margin-bottom: 6px;
  font-size: 1.05rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: #ffe066;
  text-shadow: 0 0 14px rgba(255, 200, 40, 0.8), 0 1px 8px rgba(0, 0, 0, 0.9);
  white-space: nowrap;
  animation: hud-score-float 0.55s ease-out forwards;
}

@keyframes hud-score-float {
  0% { transform: translateY(12px); opacity: 0; }
  18% { opacity: 1; }
  100% { transform: translateY(-32px); opacity: 0; }
}

@keyframes hud-score-fade {
  0% { opacity: 0.85; }
  100% { opacity: 0; }
}

#hud.pulse {
  transform: translateX(-50%) scale(1.15);
  color: #ffe066;
  animation: scorePulse 0.3s ease-out;
}

@keyframes scorePulse {
  0% { transform: translateX(-50%) scale(1.15); }
  50% { transform: translateX(-50%) scale(1.25); }
  100% { transform: translateX(-50%) scale(1); }
}

h1.title {
  display: none !important;
}

/*
 * Neon tube frame. Always render at 500px native, then scale.
 * Prefer scale ≤ 1 (downscale) on phones — upscaling blurs tiles/text.
 */
.game-container {
  background:
    linear-gradient(165deg, #12102a 0%, #080816 55%, #050510 100%) padding-box,
    linear-gradient(135deg, #6ad8ff 0%, #a060ff 40%, #d24dff 70%, #5a9cff 100%) border-box !important;
  border: 2px solid transparent !important;
  border-radius: 26px !important;
  margin-top: 0 !important;
  padding: 12px !important;
  width: 500px !important;
  max-width: 500px !important;
  height: 500px !important;
  box-sizing: border-box;
  position: relative;
  overflow: hidden !important;
  transform: scale(var(--scrolly-board-scale)) translateZ(0);
  transform-origin: center center;
  box-shadow: inset 0 0 36px rgba(20, 10, 50, 0.55);
  -webkit-font-smoothing: antialiased;
  backface-visibility: hidden;
}

/* No corner glow flares */
.game-container::before,
.game-container::after {
  content: none !important;
  display: none !important;
}

/* Gap 12 > stem 7 so tiles don't merge; cell 110, step 122 */
.grid-row {
  margin-bottom: 12px !important;
}
.grid-row:last-child {
  margin-bottom: 0 !important;
}
.grid-cell {
  width: 110px !important;
  height: 110px !important;
  margin-right: 12px !important;
}
.grid-cell:last-child {
  margin-right: 0 !important;
}
.tile,
.tile .tile-inner {
  width: 110px !important;
  height: 110px !important;
  line-height: 110px !important;
}
.tile {
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
}
.tile.tile-position-1-1 { transform: translate3d(0px, 0px, 0) !important; }
.tile.tile-position-1-2 { transform: translate3d(0px, 122px, 0) !important; }
.tile.tile-position-1-3 { transform: translate3d(0px, 244px, 0) !important; }
.tile.tile-position-1-4 { transform: translate3d(0px, 366px, 0) !important; }
.tile.tile-position-2-1 { transform: translate3d(122px, 0px, 0) !important; }
.tile.tile-position-2-2 { transform: translate3d(122px, 122px, 0) !important; }
.tile.tile-position-2-3 { transform: translate3d(122px, 244px, 0) !important; }
.tile.tile-position-2-4 { transform: translate3d(122px, 366px, 0) !important; }
.tile.tile-position-3-1 { transform: translate3d(244px, 0px, 0) !important; }
.tile.tile-position-3-2 { transform: translate3d(244px, 122px, 0) !important; }
.tile.tile-position-3-3 { transform: translate3d(244px, 244px, 0) !important; }
.tile.tile-position-3-4 { transform: translate3d(244px, 366px, 0) !important; }
.tile.tile-position-4-1 { transform: translate3d(366px, 0px, 0) !important; }
.tile.tile-position-4-2 { transform: translate3d(366px, 122px, 0) !important; }
.tile.tile-position-4-3 { transform: translate3d(366px, 244px, 0) !important; }
.tile.tile-position-4-4 { transform: translate3d(366px, 366px, 0) !important; }

@keyframes scrolly-board-shake {
  0%, 100% { transform: scale(var(--scrolly-board-scale, 1)) translate3d(0, 0, 0); }
  20% { transform: scale(var(--scrolly-board-scale, 1)) translate3d(-3px, 1px, 0); }
  40% { transform: scale(var(--scrolly-board-scale, 1)) translate3d(3px, -1px, 0); }
  60% { transform: scale(var(--scrolly-board-scale, 1)) translate3d(-2px, 0, 0); }
  80% { transform: scale(var(--scrolly-board-scale, 1)) translate3d(2px, 1px, 0); }
}

.game-container.scrolly-shake {
  animation: scrolly-board-shake 0.16s ease-out;
  animation-fill-mode: forwards;
}

/* Recessed empty slots — outline, not border (border breaks float 4-col wrap) */
.grid-cell {
  box-sizing: border-box !important;
  background: rgba(6, 5, 16, 0.95) !important;
  border-radius: var(--tile-radius) !important;
  border: none !important;
  outline: 1px solid rgba(100, 70, 180, 0.28);
  outline-offset: -1px;
  box-shadow:
    inset 0 3px 10px rgba(0, 0, 0, 0.7),
    inset 0 0 0 1px rgba(40, 25, 80, 0.35);
}

.game-container .game-message {
  display: none !important;
}

@keyframes scrolly-appear {
  0% { opacity: 0; transform: scale(0.88); }
  65% { opacity: 1; transform: scale(1.06); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes scrolly-pop {
  0% { transform: scale(1); }
  45% { transform: scale(1.14); }
  100% { transform: scale(1); }
}

/* —— Soft raised buttons (match user screenshot) —— */
.tile .tile-inner {
  position: relative !important;
  overflow: visible !important;
  font-family: var(--gem-font) !important;
  font-variant-numeric: tabular-nums !important;
  border-radius: var(--tile-radius) !important;
  font-weight: 900 !important;
  font-size: 68px !important;
  letter-spacing: -0.03em;
  color: #fff !important;
  text-shadow: none;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  box-sizing: border-box;
  transform: translateZ(0);
  backface-visibility: hidden;
  border: none;
  box-shadow: var(--keycap-bevel);
}

/* Soft face volume: top light + bottom shade */
.tile .tile-inner::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.22) 0%,
      rgba(255, 255, 255, 0.06) 35%,
      transparent 55%
    ),
    linear-gradient(
      180deg,
      transparent 55%,
      rgba(0, 0, 0, 0.18) 100%
    );
  z-index: 1;
}

.tile .tile-inner::after {
  content: none !important;
  display: none !important;
}

.tile.tile-128 .tile-inner,
.tile.tile-256 .tile-inner,
.tile.tile-512 .tile-inner {
  font-size: 58px !important;
}

.tile.tile-1024 .tile-inner,
.tile.tile-2048 .tile-inner {
  font-size: 46px !important;
}

.tile.tile-super .tile-inner {
  font-size: 40px !important;
}

.tile-new .tile-inner {
  animation: scrolly-appear 220ms cubic-bezier(0.34, 1.45, 0.64, 1) 50ms both !important;
}

.tile-merged .tile-inner {
  z-index: 20;
  animation: scrolly-pop 200ms ease-out 60ms both !important;
}

/* Faces + thick color stem — sampled from screenshot */
.tile.tile-2 .tile-inner {
  background: linear-gradient(180deg, #4a4558 0%, #353246 100%) !important;
  color: #fff !important;
  box-shadow:
    var(--keycap-bevel),
    0 4px 0 #2a2836,
    0 7px 0 #1e1c28,
    0 10px 14px rgba(0, 0, 0, 0.4) !important;
}

.tile.tile-4 .tile-inner {
  background: linear-gradient(180deg, #3ad4e6 0%, #0e92aa 100%) !important;
  color: #fff !important;
  box-shadow:
    var(--keycap-bevel),
    0 4px 0 #0a7a90,
    0 7px 0 #055360,
    0 10px 14px rgba(0, 0, 0, 0.35),
    0 0 14px rgba(0, 180, 210, 0.28) !important;
}

.tile.tile-8 .tile-inner {
  background: linear-gradient(180deg, #4aa4ff 0%, #145fc8 100%) !important;
  color: #fff !important;
  box-shadow:
    var(--keycap-bevel),
    0 4px 0 #1558b8,
    0 7px 0 #0a3c88,
    0 10px 14px rgba(0, 0, 0, 0.35),
    0 0 14px rgba(40, 130, 240, 0.28) !important;
}

.tile.tile-16 .tile-inner {
  background: linear-gradient(180deg, #3a78e8 0%, #143ea0 100%) !important;
  color: #fff !important;
  box-shadow:
    var(--keycap-bevel),
    0 4px 0 #143ea0,
    0 7px 0 #0a2868,
    0 10px 14px rgba(0, 0, 0, 0.35),
    0 0 12px rgba(40, 90, 210, 0.25) !important;
}

.tile.tile-32 .tile-inner {
  background: linear-gradient(180deg, #7e5af8 0%, #3e20b0 100%) !important;
  color: #fff !important;
  box-shadow:
    var(--keycap-bevel),
    0 4px 0 #3e20b0,
    0 7px 0 #220e70,
    0 10px 14px rgba(0, 0, 0, 0.35),
    0 0 14px rgba(100, 70, 230, 0.28) !important;
}

.tile.tile-64 .tile-inner {
  background: linear-gradient(180deg, #d850ff 0%, #9a18c4 100%) !important;
  color: #fff !important;
  box-shadow:
    var(--keycap-bevel),
    0 4px 0 #8e12a8,
    0 7px 0 #5a0a70,
    0 10px 14px rgba(0, 0, 0, 0.35),
    0 0 18px rgba(200, 50, 255, 0.4) !important;
}

.tile.tile-128 .tile-inner {
  background: linear-gradient(180deg, #ffe24a 0%, #d89c00 100%) !important;
  color: #1c1206 !important;
  text-shadow: none !important;
  box-shadow:
    var(--keycap-bevel),
    0 4px 0 #b08800,
    0 7px 0 #7a5c00,
    0 10px 14px rgba(0, 0, 0, 0.35),
    0 0 18px rgba(255, 190, 30, 0.42) !important;
}

.tile.tile-128 .tile-inner::before {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0.08) 35%, transparent 55%),
    linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, 0.14) 100%);
}

.tile.tile-256 .tile-inner {
  background: linear-gradient(180deg, #ffc83a 0%, #d08000 100%) !important;
  color: #1c1206 !important;
  text-shadow: none !important;
  box-shadow:
    var(--keycap-bevel),
    0 4px 0 #b87800,
    0 7px 0 #805000,
    0 10px 14px rgba(0, 0, 0, 0.35),
    0 0 16px rgba(255, 160, 20, 0.38) !important;
}

.tile.tile-256 .tile-inner::before {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.24) 0%, rgba(255, 255, 255, 0.06) 35%, transparent 55%),
    linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, 0.14) 100%);
}

.tile.tile-512 .tile-inner {
  background: linear-gradient(180deg, #ffa028 0%, #c85800 100%) !important;
  color: #1a1006 !important;
  text-shadow: none !important;
  box-shadow:
    var(--keycap-bevel),
    0 4px 0 #a85800,
    0 7px 0 #703800,
    0 10px 14px rgba(0, 0, 0, 0.35),
    0 0 16px rgba(255, 130, 20, 0.32) !important;
}

.tile.tile-512 .tile-inner::before {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.05) 35%, transparent 55%),
    linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, 0.14) 100%);
}

.tile.tile-1024 .tile-inner {
  background: linear-gradient(180deg, #ff6a58 0%, #c01838 100%) !important;
  color: #fff !important;
  box-shadow:
    var(--keycap-bevel),
    0 4px 0 #a81838,
    0 7px 0 #700820,
    0 10px 14px rgba(0, 0, 0, 0.35),
    0 0 16px rgba(240, 50, 90, 0.32) !important;
}

.tile.tile-2048 .tile-inner {
  background: linear-gradient(180deg, #f4fcff 0%, #68b8dc 100%) !important;
  color: #0a1824 !important;
  text-shadow: none !important;
  box-shadow:
    var(--keycap-bevel),
    0 4px 0 #5aa8c0,
    0 7px 0 #2a7088,
    0 10px 14px rgba(0, 0, 0, 0.3),
    0 0 18px rgba(140, 210, 255, 0.38) !important;
}

.tile.tile-2048 .tile-inner::before {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0.1) 35%, transparent 55%),
    linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, 0.12) 100%);
}

.tile.tile-super .tile-inner {
  background: linear-gradient(180deg, #c0f850 0%, #20a038 100%) !important;
  color: #081808 !important;
  text-shadow: none !important;
  box-shadow:
    var(--keycap-bevel),
    0 4px 0 #28a040,
    0 7px 0 #145c28,
    0 10px 14px rgba(0, 0, 0, 0.3),
    0 0 16px rgba(80, 220, 60, 0.32) !important;
}

/* Static glow only — animated filter:drop-shadow blurs tiles */
.tile.tile-64:not(.tile-new):not(.tile-merged),
.tile.tile-128:not(.tile-new):not(.tile-merged),
.tile.tile-256:not(.tile-new):not(.tile-merged),
.tile.tile-512:not(.tile-new):not(.tile-merged),
.tile.tile-1024:not(.tile-new):not(.tile-merged),
.tile.tile-2048:not(.tile-new):not(.tile-merged),
.tile.tile-super:not(.tile-new):not(.tile-merged) {
  animation: none !important;
  filter: none !important;
}

@media screen and (min-width: 521px) {
  :root {
    /* Cap scale-up — large upscales softens digits */
    --scrolly-board-scale: min(1.15, (100vw - 64px) / 500px, (100vh - 220px) / 500px);
  }

  .container {
    width: calc(500px * var(--scrolly-board-scale)) !important;
    max-width: min(calc(500px * var(--scrolly-board-scale)), calc(100vw - 64px));
  }

  .game-container {
    margin-top: calc(250px * (var(--scrolly-board-scale) - 1)) !important;
    margin-bottom: calc(250px * (var(--scrolly-board-scale) - 1)) !important;
    border-radius: 30px !important;
  }

  #hud {
    font-size: clamp(2.6rem, 4.2vw, 3.4rem);
    z-index: 20;
  }
}

@media screen and (min-width: 700px) {
  :root {
    --scrolly-board-scale: min(1.25, (100vw - 64px) / 500px, (100vh - 220px) / 500px);
  }
}

@media screen and (min-width: 900px) {
  :root {
    --scrolly-board-scale: min(1.35, (100vw - 72px) / 500px, (100vh - 240px) / 500px);
  }

  #hud {
    font-size: clamp(3rem, 3.8vw, 3.8rem);
  }
}

@media screen and (min-width: 1024px) {
  :root {
    --scrolly-board-scale: min(1.4, (100vw - 80px) / 500px, (100vh - 260px) / 500px);
  }
}

/*
 * Phones: keep 500px native geometry and SCALE DOWN into the viewport.
 * Scaling a 280px board UP was making tiles/numbers look soft.
 */
@media screen and (max-width: 520px) {
  :root {
    --scrolly-edge-padding: 20px;
    --tile-radius: 16%;
    --scrolly-board-scale: min(
      1,
      (100vw - var(--scrolly-edge-padding) * 2 - var(--scrolly-safe-left) - var(--scrolly-safe-right)) / 500px,
      (100vh - 160px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) / 500px
    );
  }

  body {
    padding: 12px;
    padding-left: max(16px, calc(var(--scrolly-safe-left) + 12px));
    padding-right: max(16px, calc(var(--scrolly-safe-right) + 12px));
  }

  .container {
    width: calc(500px * var(--scrolly-board-scale)) !important;
    max-width: calc(500px * var(--scrolly-board-scale)) !important;
  }

  .game-container {
    width: 500px !important;
    max-width: 500px !important;
    height: 500px !important;
    padding: 12px !important;
    border-radius: 26px !important;
    border-width: 2px !important;
    transform: scale(var(--scrolly-board-scale)) translateZ(0);
    transform-origin: center center;
    margin-top: calc(250px * (var(--scrolly-board-scale) - 1)) !important;
    margin-bottom: calc(250px * (var(--scrolly-board-scale) - 1)) !important;
  }

  .grid-container,
  .tile-container {
    left: auto !important;
    top: auto !important;
    width: auto !important;
    height: auto !important;
    transform: none !important;
    position: absolute !important;
  }

  .tile.tile-128 .tile-inner,
  .tile.tile-256 .tile-inner,
  .tile.tile-512 .tile-inner {
    font-size: 56px !important;
  }

  .tile.tile-1024 .tile-inner,
  .tile.tile-2048 .tile-inner {
    font-size: 44px !important;
  }

  .tile.tile-super .tile-inner {
    font-size: 36px !important;
  }

  #hud {
    font-size: clamp(2.2rem, 9vw, 2.8rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .tile-new .tile-inner,
  .tile-merged .tile-inner {
    animation: none !important;
  }

  #hud.pulse {
    animation: none !important;
    transform: none !important;
    color: var(--scrolly-text) !important;
  }

  .hud-score-addition {
    animation: hud-score-fade 0.4s ease-out forwards !important;
    transform: none !important;
  }

  .tile.tile-64,
  .tile.tile-128,
  .tile.tile-256,
  .tile.tile-512,
  .tile.tile-1024,
  .tile.tile-2048,
  .tile.tile-super {
    animation: none !important;
    filter: none !important;
  }

  .game-container.scrolly-shake {
    animation: none !important;
    transform: scale(var(--scrolly-board-scale, 1)) !important;
  }
}