* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

html {
  background: #f8fafc;
}

:root {
  --topbar-pad-inline: 16px;

--loading-spinner-size: 9.4vmin;
--loading-spinner-border-width: 1.1vmin;

--loading-message-font-size: 4.2vmin;
--loading-message-line-height: 1.4;

--loading-logo-spinner-gap: 7vmin;
--loading-spinner-message-gap: 2.8vmin;

--loading-splash-offset-y: -4vmin;

--loading-spinner-speed: 700ms;

  --howto-highlight-color: #ff1f1f;
  --howto-highlight-width: 4px;
  --howto-highlight-glow: 0 0 18px rgba(255, 31, 31, 0.45);

--board-scale: 0.8;

--main-ui-max-width: min(
  calc(73.6vh * var(--board-scale)),
  calc(544px * var(--board-scale))
);

--moves-scale: 1;
--controls-gap-y: 10px;
--confirm-y-adjust: 0px;

--play-area-width: min(
  calc(73.6vmin * var(--board-scale)),
  calc(544px * var(--board-scale))
);
  --logo-size-ratio: 0.23;
  --logo-height: calc(var(--play-area-width) * var(--logo-size-ratio));

  --c1: #FF4D6D;
  --c2: #00C389;
  --c3: #F97316;
  --c4: #00A3C4;
  --c5: #FF006E;
  --c6: #7B61FF;

--app-bg:
  radial-gradient(
    ellipse 140% 80% at 4% -2%,
    rgba(96, 165, 250, 0.28) 0%,
    rgba(96, 165, 250, 0.10) 32%,
    rgba(96, 165, 250, 0) 67%
  ),
  radial-gradient(
    ellipse 135% 80% at 104% 104%,
    rgba(249, 115, 22, 0.18) 0%,
    rgba(249, 115, 22, 0.06) 34%,
    rgba(249, 115, 22, 0) 68%
  ),
  #f8fafc;

  --c1h: var(--c4);
  --c2h: var(--c5);
  --c3h: var(--c6);
  --c4h: var(--c1);
  --c5h: var(--c2);
  --c6h: var(--c3);
}
body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  color: #101828;
  background: var(--app-bg);
}

.pattern-button {
  appearance: none;
  border: 1px solid rgba(0,0,0,0.1);
  background: #ffffff;
  color: #0f172a;
  padding: 6px 10px;
  height: 38px;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background 160ms ease, box-shadow 160ms ease, transform 80ms ease;
}

.pattern-button:hover { background: #f3f4f6; }

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

.pattern-button:focus-visible { outline: 2px solid #60a5fa; outline-offset: 2px; }

.pattern-button .pattern-name { font-size: 14px; color: #334155; font-weight: 700; }

.pattern-button .swatch {
  width: 24px;
  height: 24px;

  display: block;
  overflow: hidden;

  border-radius: 6px;
  background-color: #e5e7eb;

  box-shadow:
    inset 0 0 0 1px
    rgba(0, 0, 0, 0.12);
}

.pattern-swatch-image {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: fill;

  pointer-events: none;
  user-select: none;

  -webkit-user-drag: none;
}
.pattern-button .swatch .sq { display: block; width: 100%; height: 100%; }

.pattern-btn {
  appearance: none;
  width: 100%;
  aspect-ratio: 1 / 1;
  padding: 0;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,0.12);
  background: #ffffff;
  position: relative;
  display: inline-grid;
  place-items: center;
  cursor: pointer;
  transition: background 160ms ease, box-shadow 160ms ease, transform 80ms ease;
}

.pattern-btn:hover { background: #f3f4f6; }

.pattern-btn:active { transform: translateY(1px); }

.pattern-btn:focus-visible { outline: 2px solid #60a5fa; outline-offset: 2px; }

.pattern-btn.is-active {
  box-shadow: 0 0 0 2px #fff, 0 0 0 5px rgba(59,130,246,0.35);
}

.pattern-btn .swatch {
  width: 80%;
  height: 80%;
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.12);
}

.button, .icon-button {
  appearance: none;
  border: 1px solid rgba(0,0,0,0.1);
  background: #ffffff;
  color: #0f172a;
  padding: 8px 12px;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 600;
  transition: background 160ms ease, box-shadow 160ms ease, transform 80ms ease;
}

#btn-rules.howto-needs-attention,
#btn-text-tutorial.howto-needs-attention {
  border-color: var(--howto-highlight-color);
  box-shadow:
    0 0 0 var(--howto-highlight-width) var(--howto-highlight-color),
    var(--howto-highlight-glow);
}

.button:hover, .icon-button:hover { background: #f3f4f6; }

.button:active, .icon-button:active { transform: translateY(1px); }

.icon-button { width: 38px; height: 38px; padding: 0; font-weight: 800; }

.button.primary { background: #2563eb; color: #fff; border-color: #1d4ed8; }

.button.primary:hover { background: #1d4ed8; }

.main { display: flex; align-items: flex-start; justify-content: center; padding: 0px 16px 28px; }

.board-wrap { position: relative; width: fit-content; display: grid; grid-template-rows: auto auto; justify-items: center; }

.board-toolbar { width: 100%; display: grid; grid-template-columns: auto 1fr auto; align-items: center; margin-bottom: var(--controls-gap-y); }

.rotate-btn {
  width: var(--rotate-btn-width);
  height: var(--rotate-btn-height);
  border-radius: 6px;
  border: 0;
  color: #fff;
  background: linear-gradient(145deg, #60a5fa 0%, #2563eb 60%, #1e40af 100%);
  box-shadow:
    0 8px 16px rgba(37,99,235,0.25),
    inset 0 1px 0 rgba(255,255,255,0.6),
    inset 0 -1px 0 rgba(0,0,0,0.12);
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.rotate-btn::before { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 120% at 30% 20%, rgba(255,255,255,0.25), rgba(255,255,255,0) 45%); pointer-events: none; }

.rotate-btn::after { display: none; }

.rotate-btn:hover { transform: translateY(0) scale(1.02); box-shadow: 0 12px 24px rgba(37,99,235,0.3), inset 0 1px 0 rgba(255,255,255,0.7), inset 0 -1px 0 rgba(0,0,0,0.14); }

.rotate-btn:active { transform: scale(0.98); }

.rotate-btn:focus-visible { outline: 3px solid #93c5fd; outline-offset: 2px; }

.rotate-btn i { font-size: 16px; color: #fff; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.25)); }

.grid {
  --gap: clamp(6px, 0.9vmin, 12px);
  --tile-inset-frac: 0.14;
  --inset: calc(var(--cell-size, 0px) * var(--tile-inset-frac));
  --sel-move: clamp(1px, calc(var(--inset) * 0.28), 6px);
  --sel-glow-size: 16px;
  --bleed: 0.5px;
  position: relative;
  width: var(--play-area-width);
  aspect-ratio: 1 / 1;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(255,255,255,0.8)), #ffffff;
  box-shadow: 0 20px 40px rgba(2,6,23,0.08), inset 0 0 0 1px rgba(2,6,23,0.06);
  overflow: hidden;
  user-select: none;
  touch-action: none;
}

.slot {
  position: absolute;
  z-index: 0;
  background: var(--target-color);
  background-image:
    linear-gradient(145deg, rgba(255,255,255,0.18), rgba(0,0,0,0.08));
  background-blend-mode: overlay;
  box-shadow: inset 0 0 0 1px rgba(2,6,23,0.06);
  backface-visibility: hidden;
}

.cell {
  position: absolute;
  cursor: pointer;
  will-change: transform, filter;
  z-index: 2;
  backface-visibility: hidden;

  -webkit-tap-highlight-color: transparent;
  outline: none;
}

.cell::before {
  content: "";
  position: absolute;
  inset: calc(var(--inset) - var(--bleed, 0px));
  border-radius: 12px;
  background:
    linear-gradient(145deg,
      color-mix(in oklab, var(--tile-color), white 10%) 0%,
      color-mix(in oklab, var(--tile-color), black 14%) 100%);
  box-shadow:
    0 14px 24px rgba(2,6,23,0.18),
    0 4px 10px rgba(2,6,23,0.14),
    inset 0 1px 0 rgba(255,255,255,0.45),
    inset 0 -1px 0 rgba(0,0,0,0.08);
  transform: translate(0, 0) translateY(var(--lift, 0));
  transition: box-shadow 180ms ease, transform 180ms ease, filter 180ms ease;
}

.cell::after {
  content: "";
  position: absolute;
  left: calc(var(--inset) + 6px);
  right: calc(var(--inset) + 6px);
  top: calc(var(--inset) + 3px);
  height: 18px;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(255,255,255,0.45), rgba(255,255,255,0) 70%);
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0.7;
  transition: opacity 180ms ease;
}

.grid .cell.selected {
  animation: none;
  filter: none;
}

.grid .cell.selected::before {
  --lift: -3px;

  --sel-glow-color:
    color-mix(
      in srgb,
      var(--tile-color) 68%,
      white 10%
    );

  animation:
    sel-jiggle 1.5s ease-in-out infinite,
    sel-blink 1.15s ease-in-out infinite;
}
@keyframes sel-blink { 0%, 100% { filter: drop-shadow(0 0 0 var(--sel-glow-color)); } 50% { filter: drop-shadow(0 0 var(--sel-glow-size, 16px) var(--sel-glow-color)); } }

@keyframes sel-jiggle {
  0%   { transform: translate(0, calc(var(--sel-move, 3px) * -1)) translateY(var(--lift, 0)); }
  25%  { transform: translate(0, var(--sel-move, 3px)) translateY(var(--lift, 0)); }
  50%  { transform: translate(var(--sel-move, 3px), 0) translateY(var(--lift, 0)); }
  75%  { transform: translate(calc(var(--sel-move, 3px) * -1), 0) translateY(var(--lift, 0)); }
  100% { transform: translate(0, calc(var(--sel-move, 3px) * -1)) translateY(var(--lift, 0)); }
}

.grid[data-style="neon"],
.grid[data-style="neonwire"],
.grid[data-style="jelly"],
.grid[data-style="rubber"] { --sel-glow-size: 22px; }

.cell.animating { z-index: 5; }

.cell.ghost { pointer-events: none; }

.overlay {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(15,23,42,0.6);
  padding: 16px;
  z-index: 9999;
}

.overlay[hidden] { display: none; }

.overlay-content {
  width: 100%;
  max-width: 640px;
  max-height: 90vh;
  background: #ffffff;
  border-radius: 16px;
  padding: 20px 18px 16px;
  box-shadow: 0 24px 60px rgba(2,6,23,0.25);
  display: flex;
  flex-direction: column;
}

.overlay-content h2 {
  margin: 0 0 8px 0;
  text-align: center;
}

.howto-gif-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 4px 0 12px;
  flex: 0 0 auto;
}

.howto-body {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.howto-body[hidden] {
  display: none !important;
}

.howto-good-luck {
  display: block;
  text-align: center;
  margin: 0 0 12px;
}

.howto-gif {
  display: block;
  max-width: min(100%, 460px);

  width: auto;
  height: auto;
  border-radius: 12px;
}

.rules { margin: 8px 0 10px 18px; padding: 0 0 0 6px; }

.note { margin: 10px 0 6px; color: #475569; }

.note:empty { display: none; }

.consts { margin: 0 0 10px; color: #334155; font-weight: 600; }

.actions { display: flex; justify-content: flex-end; gap: 8px; }

.howto-actions{
  align-items: center;
  justify-content: space-between;
}

.actions-left{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-right: auto;
}

.pattern-list, .style-list { flex: 1 1 auto; overflow: auto; display: grid; gap: 10px; }

.pattern-list { grid-template-columns: repeat(6, 1fr); }

.style-list { grid-template-columns: repeat(6, 1fr); }

#style-overlay .style-list { margin-bottom: 16px; margin-top: 0px; padding-top: 6px; padding-bottom: 6px; padding-left: 8px; padding-right: 8px; }

#pattern-overlay .pattern-list { padding-top: 6px; padding-bottom: 6px; padding-left: 8px; padding-right: 8px; }

.howto-scroll {
  flex: 1 1 auto;
  overflow: auto;
}

#overlay .howto-scroll,
#text-tutorial-overlay .howto-scroll {
  padding-top: 6px;
  padding-bottom: 6px;
  padding-left: 8px;
  padding-right: 8px;
}

.style-btn {
  appearance: none;
  width: 100%;
  padding: 8px 6px 10px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,0.12);
  background: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: background 160ms ease, box-shadow 160ms ease, transform 80ms ease;
}

.style-btn:hover { background: #f3f4f6; }

.style-btn:active { transform: translateY(1px); }

.style-btn:focus-visible { outline: 2px solid #60a5fa; outline-offset: 2px; }

.style-btn.is-active { box-shadow: 0 0 0 2px #fff, 0 0 0 5px rgba(59,130,246,0.35); }

.style-btn .swatch {
  width: 64px;
  height: 64px;

  display: block;
  position: relative;
  overflow: hidden;

  border-radius: 10px;
  background-color: #e5e7eb;

  box-shadow:
    inset 0 0 0 1px
    rgba(0, 0, 0, 0.12);
}

.style-preview-image {
  display: block;

  width: 100%;
  height: 100%;

  border-radius: inherit;

  object-fit: cover;
  object-position: center;

  pointer-events: none;
  user-select: none;

  -webkit-user-drag: none;
}

.style-btn .caption {
  font-size: 12px;
  color: #334155;
  text-align: center;
  line-height: 1.2;
}

.style-preview-missing {
  background:
    repeating-linear-gradient(
      45deg,
      #e5e7eb 0 8px,
      #f8fafc 8px 16px
    );
}
@media (prefers-reduced-motion: reduce) {
  .button, .icon-button, .cell, .cell::before, .cell::after { transition: none !important; }
  .grid .cell.selected { animation: none !important; }
  .grid .cell.selected::before { animation: none !important; }
}

:is(.grid, .style-btn .swatch, .style-button .swatch)[data-style="flat"] { 
  --gap: clamp(4px, 0.7vmin, 10px);
  background: #ffffff;
  box-shadow: 0 16px 28px rgba(2,6,23,0.06), inset 0 0 0 1px rgba(2,6,23,0.05);
}

:is(.grid, .style-btn .swatch, .style-button .swatch)[data-style="flat"] .slot {
  background: color-mix(in oklab, var(--target-color), white 24%);
  background-image: none;
  box-shadow: inset 0 0 0 1px rgba(2,6,23,0.05);
}

:is(.grid, .style-btn .swatch, .style-button .swatch)[data-style="flat"] .cell::before {
  background: color-mix(in oklab, var(--tile-color), white 10%);
  box-shadow: 0 2px 4px rgba(2,6,23,0.08), inset 0 0 0 1px rgba(255,255,255,0.6);
}

:is(.grid, .style-btn .swatch, .style-button .swatch)[data-style="flat"] .cell::after { display: none; }

.grid[data-style="flat"] .cell.selected::before { box-shadow: 0 0 0 2px color-mix(in oklab, var(--tile-color), white 18%), 0 0 0 6px color-mix(in oklab, var(--tile-color) 50%, transparent), 0 6px 12px rgba(2,6,23,0.12), inset 0 0 0 1px rgba(255,255,255,0.7); }

:is(.grid, .style-btn .swatch, .style-button .swatch)[data-style="neon"] {
  --gap: clamp(6px, 0.9vmin, 12px);
  background: radial-gradient(600px 400px at 30% 10%, #0f1a3a 0%, rgba(15,26,58,0) 60%), #0b1020;
  box-shadow: 0 24px 60px rgba(0,0,0,0.45), inset 0 0 0 1px rgba(255,255,255,0.06);
}

:is(.grid, .style-btn .swatch, .style-button .swatch)[data-style="neon"] .slot {
  background: color-mix(in srgb, var(--target-color) 50%, #0b1020);
  background-image: none;
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--target-color) 30%, transparent),
    0 0 18px color-mix(in srgb, var(--target-color) 45%, transparent);
}

:is(.grid, .style-btn .swatch, .style-button .swatch)[data-style="neon"] .cell::before {
  background: color-mix(in srgb, var(--tile-color) 28%, black);
  box-shadow:
    0 0 18px color-mix(in srgb, var(--tile-color) 55%, transparent),
    0 0 8px color-mix(in srgb, var(--tile-color) 50%, transparent),
    inset 0 0 0 1px color-mix(in srgb, var(--tile-color) 60%, white 10%);
}

:is(.grid, .style-btn .swatch, .style-button .swatch)[data-style="neon"] .cell::after { display: none; }

.grid[data-style="neon"] .cell.selected::before {
  box-shadow:
    0 0 36px color-mix(in srgb, var(--tile-color) 80%, transparent),
    0 0 18px color-mix(in srgb, var(--tile-color) 65%, transparent),
    0 0 0 2px color-mix(in srgb, var(--tile-color) 70%, white 30%),
    inset 0 0 0 1px color-mix(in srgb, var(--tile-color) 75%, white 10%);
}

:is(.grid, .style-btn .swatch, .style-button .swatch)[data-style="glass"] {
  --gap: clamp(8px, 1.2vmin, 14px);
  background: linear-gradient(135deg, rgba(255,255,255,0.35), rgba(255,255,255,0.12)),
              url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2240%22 height=%2240%22 viewBox=%220 0 40 40%22%3E%3Cg fill=%22%23ffffff%22 fill-opacity=%220.08%22%3E%3Ccircle cx=%225%22 cy=%225%22 r=%221%22/%3E%3Ccircle cx=%2225%22 cy=%2215%22 r=%221%22/%3E%3Ccircle cx=%2212%22 cy=%2230%22 r=%221%22/%3E%3Ccircle cx=%2230%22 cy=%2232%22 r=%221%22/%3E%3C/g%3E%3C/svg%3E') center/auto repeat,
              linear-gradient(180deg, #e0f2fe, #f5f3ff);
  backdrop-filter: blur(2px);
  box-shadow: 0 24px 50px rgba(2,6,23,0.16), inset 0 0 0 1px rgba(255,255,255,0.3);
}

:is(.grid, .style-btn .swatch, .style-button .swatch)[data-style="glass"] .slot {
  background: color-mix(in oklab, var(--target-color), white 20%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.4), inset 0 0 10px rgba(255,255,255,0.25);
}

:is(.grid, .style-btn .swatch, .style-button .swatch)[data-style="glass"] .cell::before {
  background: color-mix(in oklab, var(--tile-color), white 40%);
  backdrop-filter: blur(6px) saturate(140%);
  border: 2px solid rgba(255,255,255,0.6);
  box-shadow: 0 10px 20px rgba(2,6,23,0.18), inset 0 1px 0 rgba(255,255,255,0.7);
}

:is(.grid, .style-btn .swatch, .style-button .swatch)[data-style="glass"] .cell::after { opacity: 0.9; }

.grid[data-style="glass"] .cell.selected::before {
  border: 2px solid color-mix(in oklab, var(--tile-color), white 40%);
  box-shadow:
    0 14px 26px rgba(2,6,23,0.22),
    0 0 0 3px color-mix(in oklab, var(--tile-color) 55%, transparent),
    inset 0 1px 0 rgba(255,255,255,0.9);
}

:is(.grid, .style-btn .swatch, .style-button .swatch)[data-style="pastel"] {
  --gap: clamp(6px, 1vmin, 12px);
  background: linear-gradient(180deg, #fff7ed, #f1f5f9);
  box-shadow: 0 18px 36px rgba(2,6,23,0.08), inset 0 0 0 1px rgba(2,6,23,0.05);
}

:is(.grid, .style-btn .swatch, .style-button .swatch)[data-style="pastel"] .slot {
  background: color-mix(in oklab, var(--target-color), white 45%);
  box-shadow: inset 0 0 0 1px rgba(2,6,23,0.04);
}

:is(.grid, .style-btn .swatch, .style-button .swatch)[data-style="pastel"] .cell::before {
  background: color-mix(in oklab, var(--tile-color), white 35%);
  box-shadow: 0 8px 16px rgba(2,6,23,0.08), inset 0 1px 0 rgba(255,255,255,0.9);
}

:is(.grid, .style-btn .swatch, .style-button .swatch)[data-style="pastel"] .cell::after { opacity: 0.75; }

.grid[data-style="pastel"] .cell.selected::before { box-shadow: 0 0 0 2px color-mix(in oklab, var(--tile-color), white 25%), 0 0 0 6px color-mix(in oklab, var(--tile-color) 40%, transparent), 0 8px 18px rgba(2,6,23,0.12), inset 0 1px 0 rgba(255,255,255,0.9); }

:is(.grid, .style-btn .swatch, .style-button .swatch)[data-style="retro"] {
  --gap: clamp(5px, 0.9vmin, 10px);
  background: linear-gradient(180deg, #faf5e6, #f4e9d8);
  box-shadow: 0 16px 28px rgba(106,72,41,0.15), inset 0 0 0 1px rgba(106,72,41,0.15);
}

:is(.grid, .style-btn .swatch, .style-button .swatch)[data-style="retro"] .slot {
  background: color-mix(in srgb, var(--target-color) 55%, #f4e9d8);
  background-image: none;
  box-shadow: inset 0 0 0 1px rgba(106,72,41,0.2);
}

:is(.grid, .style-btn .swatch, .style-button .swatch)[data-style="retro"] .cell::before {
  border-radius: 6px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--tile-color) 70%, #fff), color-mix(in srgb, var(--tile-color) 40%, #e2d3c2));
  box-shadow: 0 6px 0 rgba(106,72,41,0.3), 0 8px 16px rgba(106,72,41,0.18), inset 0 0 0 1px rgba(255,255,255,0.5);
}

:is(.grid, .style-btn .swatch, .style-button .swatch)[data-style="retro"] .cell::after { display: none; }

.grid[data-style="retro"] .cell.selected::before { box-shadow: 0 0 0 2px color-mix(in oklab, var(--tile-color), white 22%), 0 0 0 6px color-mix(in oklab, var(--tile-color) 45%, transparent), 0 6px 0 rgba(106,72,41,0.3), 0 10px 18px rgba(106,72,41,0.22), inset 0 0 0 1px rgba(255,255,255,0.6); }

.moves {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  height: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font-weight: 700;
  font-size: calc(1rem * var(--moves-scale));
  text-align: center;
  white-space: nowrap;

  transform: scale(1);
  transform-origin: 50% 60%;
  will-change: transform;
}

.moves.is-solved {
  cursor: pointer;
  user-select: none;
  font-size: 18px;
}

.moves.is-solved .char {
  display: inline-block;
  color: var(--ch, currentColor);
  transition: color 160ms ease, transform 160ms ease;
}

.moves.is-solved:hover .char {
  color: var(--ch-hover, var(--ch, currentColor));
}

.moves.is-idle {
  color: inherit;
}

.moves:focus-visible {
  outline: 2px solid #60a5fa;
  outline-offset: 6px;
  border-radius: 8px;
}

.moves-bar { display: none; }

.pattern-btn .swatch {
  display: block;
  overflow: hidden;

  background-color:
    #e5e7eb !important;
}

.pat-horiz,
.pat-vert,
.pat-diag,
.pat-rings {
  background: none !important;
  background-image: none !important;
}

:is(.grid, .style-btn .swatch, .style-button .swatch)[data-style="gold"] { background: linear-gradient(180deg,#fff7e6,#fef3c7); }

:is(.grid, .style-btn .swatch, .style-button .swatch)[data-style="gold"] .slot { background: color-mix(in srgb, var(--target-color) 65%, #fde68a); box-shadow: inset 0 0 0 1px rgba(202,138,4,0.25); }

:is(.grid, .style-btn .swatch, .style-button .swatch)[data-style="gold"] .cell::before { border-radius: 10px; background: linear-gradient(145deg,#fff1a6 0%, color-mix(in srgb, var(--tile-color) 65%, #b45309) 40%, color-mix(in srgb, var(--tile-color) 55%, #7c2d12) 100%); box-shadow: 0 10px 0 rgba(180,83,9,0.35), 0 20px 36px rgba(180,83,9,0.25), inset 0 2px 0 rgba(255,255,255,0.8); }

.grid[data-style="gold"] .cell.selected::before { box-shadow: 0 0 0 2px color-mix(in oklab, var(--tile-color), white 20%), 0 0 0 6px color-mix(in oklab, var(--tile-color) 50%, transparent), 0 10px 0 rgba(180,83,9,0.4), 0 24px 40px rgba(180,83,9,0.3); }

:is(.grid, .style-btn .swatch, .style-button .swatch)[data-style="marble"] { background: linear-gradient(180deg,#fdfdfd,#f2f2f2); }

:is(.grid, .style-btn .swatch, .style-button .swatch)[data-style="marble"] .slot { background: color-mix(in oklab, var(--target-color), white 30%); }

:is(.grid, .style-btn .swatch, .style-button .swatch)[data-style="marble"] .cell::before { background: radial-gradient(200% 120% at -20% -10%, rgba(0,0,0,0.06), transparent 40%), radial-gradient(200% 120% at 120% 110%, rgba(0,0,0,0.06), transparent 40%), color-mix(in oklab, var(--tile-color), white 40%); box-shadow: 0 12px 22px rgba(2,6,23,0.16), inset 0 1px 0 rgba(255,255,255,0.9); }

:is(.grid, .style-btn .swatch, .style-button .swatch)[data-style="stone"] { background: linear-gradient(180deg,#f4f4f5,#e4e4e7) }

:is(.grid, .style-btn .swatch, .style-button .swatch)[data-style="stone"] .slot{ background: color-mix(in srgb, var(--target-color) 55%, #e4e4e7) }

:is(.grid, .style-btn .swatch, .style-button .swatch)[data-style="stone"] .cell::before{ border-radius: 14px; background: radial-gradient(60% 80% at 30% 20%, rgba(0,0,0,0.15), transparent 50%), radial-gradient(50% 90% at 70% 80%, rgba(0,0,0,0.1), transparent 50%), color-mix(in oklab, var(--tile-color), black 10%); box-shadow: 0 10px 18px rgba(2,6,23,0.18), inset 0 2px 0 rgba(255,255,255,0.4) }

:is(.grid, .style-btn .swatch, .style-button .swatch)[data-style="leather"] { background: linear-gradient(180deg,#faf5e6,#f0ead2) }

:is(.grid, .style-btn .swatch, .style-button .swatch)[data-style="leather"] .slot{ background: color-mix(in srgb, var(--target-color) 60%, #f0ead2) }

:is(.grid, .style-btn .swatch, .style-button .swatch)[data-style="leather"] .cell::before{ background: radial-gradient(1px 1px at 2px 2px, rgba(0,0,0,0.08) 0 50%, transparent 51%) 0 0/6px 6px, color-mix(in srgb, var(--tile-color) 70%, #7c2d12); box-shadow: 0 8px 16px rgba(124,45,18,0.25), inset 0 1px 0 rgba(255,255,255,0.5) }

:is(.grid, .style-btn .swatch, .style-button .swatch)[data-style="rubber"] { background:#111827 }

:is(.grid, .style-btn .swatch, .style-button .swatch)[data-style="rubber"] .slot{ background: color-mix(in srgb, var(--target-color) 40%, #111827); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06) }

:is(.grid, .style-btn .swatch, .style-button .swatch)[data-style="rubber"] .cell::before{ border-radius: 18px; background: radial-gradient(100% 100% at 50% 20%, rgba(255,255,255,0.12), rgba(0,0,0,0.2) 70%), color-mix(in srgb, var(--tile-color) 60%, #18181b); box-shadow: 0 16px 24px rgba(0,0,0,0.5), inset 0 2px 0 rgba(255,255,255,0.1) }

:is(.grid, .style-btn .swatch, .style-button .swatch)[data-style="rubber"] .cell::after{ opacity:.35 }

:is(.grid, .style-btn .swatch, .style-button .swatch)[data-style="fabric"] { background: linear-gradient(180deg,#f8fafc,#eef2ff) }

:is(.grid, .style-btn .swatch, .style-button .swatch)[data-style="fabric"] .slot { background: color-mix(in oklab, var(--target-color), white 30%); }

:is(.grid, .style-btn .swatch, .style-button .swatch)[data-style="fabric"] .cell::before{ background: repeating-linear-gradient(0deg, color-mix(in srgb, var(--tile-color) 80%, #fff) 0 2px, color-mix(in srgb, var(--tile-color) 70%, #ddd) 2px 4px), repeating-linear-gradient(90deg, transparent 0 2px, rgba(255,255,255,0.2) 2px 4px); filter: contrast(102%); box-shadow: 0 10px 18px rgba(2,6,23,0.14), inset 0 1px 0 rgba(255,255,255,0.9) }

:is(.grid, .style-btn .swatch, .style-button .swatch)[data-style="pearl"] { background: linear-gradient(180deg,#fafafa,#eef2ff) }

:is(.grid, .style-btn .swatch, .style-button .swatch)[data-style="pearl"] .slot{ background: color-mix(in oklab, var(--target-color), white 35%) }

:is(.grid, .style-btn .swatch, .style-button .swatch)[data-style="pearl"] .cell::before{ border-radius: 50%; background: radial-gradient(100% 100% at 30% 20%, #fff, color-mix(in oklab, var(--tile-color), white 40%) 60%, color-mix(in oklab, var(--tile-color), black 10%)); box-shadow: 0 14px 24px rgba(2,6,23,0.18), inset 0 1px 0 rgba(255,255,255,0.9) }

:is(.grid, .style-btn .swatch, .style-button .swatch)[data-style="bubble"] { background: linear-gradient(180deg,#e0f2fe,#f5f3ff) }

:is(.grid, .style-btn .swatch, .style-button .swatch)[data-style="bubble"] .slot{ background: color-mix(in oklab, var(--target-color), white 30%) }

:is(.grid, .style-btn .swatch, .style-button .swatch)[data-style="bubble"] .cell::before{ border-radius: 50%; background: radial-gradient(100% 100% at 30% 20%, rgba(255,255,255,0.9), rgba(255,255,255,0) 50%), color-mix(in oklab, var(--tile-color), white 25%); box-shadow: 0 20px 28px rgba(2,6,23,0.16), inset 0 1px 0 rgba(255,255,255,0.9) }

:is(.grid, .style-btn .swatch, .style-button .swatch)[data-style="bubble"] .cell::after{ opacity: 1; height: 22px }

:is(.grid, .style-btn .swatch, .style-button .swatch)[data-style="jelly"] { background:#0f172a }

:is(.grid, .style-btn .swatch, .style-button .swatch)[data-style="jelly"] .slot{ background: color-mix(in srgb, var(--target-color) 50%, #0f172a) }

:is(.grid, .style-btn .swatch, .style-button .swatch)[data-style="jelly"] .cell::before{ border-radius: 20px; background: radial-gradient(60% 80% at 50% 20%, rgba(255,255,255,0.3), rgba(255,255,255,0) 60%), color-mix(in srgb, var(--tile-color) 80%, #000); box-shadow: 0 18px 40px rgba(0,0,0,0.6), inset 0 -6px 16px rgba(0,0,0,0.35), inset 0 2px 0 rgba(255,255,255,0.5) }

:is(.grid, .style-btn .swatch, .style-button .swatch)[data-style="graffiti"] { background: linear-gradient(180deg,#fef9c3,#f1f5f9) }

:is(.grid, .style-btn .swatch, .style-button .swatch)[data-style="graffiti"] .slot{ background: color-mix(in srgb, var(--target-color) 60%, #fef08a) }

:is(.grid, .style-btn .swatch, .style-button .swatch)[data-style="graffiti"] .cell::before{ border-radius: 8px; background: radial-gradient(40px 40px at 20% 20%, rgba(255,255,255,0.4), transparent 60%), conic-gradient(from 45deg, color-mix(in srgb, var(--tile-color) 80%, #fff), color-mix(in srgb, var(--tile-color) 60%, #000)); filter: contrast(110%) saturate(120%); box-shadow: 0 18px 30px rgba(2,6,23,0.22), inset 0 1px 0 rgba(255,255,255,0.85) }

:is(.grid, .style-btn .swatch, .style-button .swatch)[data-style="flower"] { background: linear-gradient(180deg,#fef9c3,#fce7f3) }

:is(.grid, .style-btn .swatch, .style-button .swatch)[data-style="flower"] .slot{ background: color-mix(in oklab, var(--target-color), white 26%) }

:is(.grid, .style-btn .swatch, .style-button .swatch)[data-style="flower"] .cell::before{ border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--tile-color) 80%, #fff) 0 40%, transparent 41%), conic-gradient(from 0deg, color-mix(in srgb, var(--tile-color) 70%, #fff) 0 60deg, color-mix(in srgb, var(--tile-color) 40%, #000) 60deg 120deg, color-mix(in srgb, var(--tile-color) 70%, #fff) 120deg 180deg, color-mix(in srgb, var(--tile-color) 40%, #000) 180deg 240deg, color-mix(in srgb, var(--tile-color) 70%, #fff) 240deg 300deg, color-mix(in srgb, var(--tile-color) 40%, #000) 300deg 360deg); box-shadow: 0 16px 26px rgba(2,6,23,0.18), inset 0 1px 0 rgba(255,255,255,0.9) }

:is(.grid, .style-btn .swatch, .style-button .swatch)[data-style="flower"] .cell::after{ display:none }

:is(.grid, .style-btn .swatch, .style-button .swatch)[data-style="shadowbox"] { background: linear-gradient(180deg,#f8fafc,#e5e7eb) }

:is(.grid, .style-btn .swatch, .style-button .swatch)[data-style="shadowbox"] .slot{ background: color-mix(in oklab, var(--target-color), white 24%) }

:is(.grid, .style-btn .swatch, .style-button .swatch)[data-style="shadowbox"] .cell::before{ border-radius: 8px; background: color-mix(in oklab, var(--tile-color), white 10%); box-shadow: 0 2px 0 rgba(2,6,23,0.2), 0 6px 0 rgba(2,6,23,0.16), 0 16px 28px rgba(2,6,23,0.12), inset 0 1px 0 rgba(255,255,255,0.8) }

:is(.grid, .style-btn .swatch, .style-button .swatch)[data-style="neonwire"] {
  background:
    radial-gradient(600px 400px at 35% 15%, #121a2f 0%, rgba(18,26,47,0) 60%),
    #0e1426;
  box-shadow: 0 24px 60px rgba(0,0,0,0.45), inset 0 0 0 1px rgba(255,255,255,0.06);
}

:is(.grid, .style-btn .swatch, .style-button .swatch)[data-style="neonwire"] .slot{
  background: color-mix(in srgb, var(--target-color) 46%, #0e1426);
}

:is(.grid, .style-btn .swatch, .style-button .swatch)[data-style="neonwire"] .cell::before{
  border-radius: 10px;
  background: color-mix(in srgb, var(--tile-color) 25%, #000);
  box-shadow: 0 0 22px color-mix(in srgb, var(--tile-color) 60%, transparent), 0 0 10px color-mix(in srgb, var(--tile-color) 50%, transparent), inset 0 0 0 2px color-mix(in srgb, var(--tile-color) 70%, #fff);
}

:is(.grid, .style-btn .swatch, .style-button .swatch)[data-style="neonwire"] .cell::after{ display:none }

.share-panel { margin-top: 10px; display: grid; gap: 0; align-self: center; width: max-content; max-width: 100%; }

.share-preview-wrap { position: relative; }

.share-preview-skeleton { height: 200px; border-radius: 12px; background: linear-gradient(90deg,#f1f5f9,#e5e7eb,#f1f5f9); background-size: 200% 100%; animation: shine 1.2s linear infinite; }

.share-preview { max-width: 100%; width: auto; height: auto; border-radius: 12px; display: block; margin-left: auto; margin-right: auto; box-shadow: 0 6px 16px rgba(2,6,23,0.12), inset 0 0 0 1px rgba(2,6,23,0.06); }

.share-actions { justify-content: space-around; flex-wrap: wrap; margin-top: 20px; margin-bottom: 7px; width: 100%; }

@keyframes shine { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

.grid[data-style="marble"] .cell.selected::before,
.grid[data-style="stone"] .cell.selected::before,
.grid[data-style="leather"] .cell.selected::before,
.grid[data-style="rubber"] .cell.selected::before,
.grid[data-style="fabric"] .cell.selected::before {
  border: 2px solid color-mix(in oklab, var(--tile-color), white 20%);
  box-shadow:
    0 18px 30px rgba(2,6,23,0.22),
    0 8px 16px rgba(2,6,23,0.18),
    0 0 0 4px color-mix(in oklab, var(--tile-color) 45%, transparent),
    inset 0 1px 0 rgba(255,255,255,0.8);
}

.grid[data-style="jelly"] .cell.selected::before {
  border: 3px solid color-mix(in oklab, var(--tile-color), white 28%);
  box-shadow:
    0 18px 30px rgba(2,6,23,0.22),
    0 8px 16px rgba(2,6,23,0.18),
    inset 0 1px 0 rgba(255,255,255,0.8);
}

.grid[data-style="pearl"] .cell.selected::before,
.grid[data-style="bubble"] .cell.selected::before {
  border: 3px solid color-mix(in oklab, var(--tile-color), white 28%);
  box-shadow:
    0 18px 30px rgba(2,6,23,0.22),
    0 8px 16px rgba(2,6,23,0.18),
    inset 0 1px 0 rgba(255,255,255,0.8);
}

.grid[data-style="graffiti"] .cell.selected::before,
.grid[data-style="shadowbox"] .cell.selected::before,
.grid[data-style="neonwire"] .cell.selected::before {
  border: 3px solid color-mix(in oklab, var(--tile-color), white 24%);
  box-shadow:
    0 18px 30px rgba(2,6,23,0.22),
    0 8px 16px rgba(2,6,23,0.18),
    inset 0 1px 0 rgba(255,255,255,0.8);
}

.grid[data-style="flower"] .cell.selected::before {
  border: 3px solid color-mix(in oklab, var(--tile-color), white 26%);
}

.grid[data-style="glass"] .cell.selected::before { border-color: color-mix(in oklab, var(--tile-color), black 26%); }

.grid[data-style="pastel"] .cell.selected::before { border: 2px solid color-mix(in oklab, var(--tile-color), black 18%); }

.grid[data-style="gold"] .cell.selected::before { border: 2px solid color-mix(in oklab, var(--tile-color), black 22%); }

.grid[data-style="fabric"] .cell.selected::before { border-color: color-mix(in oklab, var(--tile-color), black 22%); }

.grid[data-style="pearl"] .cell.selected::before,
.grid[data-style="bubble"] .cell.selected::before { border-color: color-mix(in oklab, var(--tile-color), black 24%); }

.grid[data-style="flower"] .cell.selected::before { border-color: color-mix(in oklab, var(--tile-color), black 22%); }

.grid[data-style="shadowbox"] .cell.selected::before,
.grid[data-style="neonwire"] .cell.selected::before { border-color: color-mix(in oklab, var(--tile-color), black 22%); }

.grid[data-style="3d"] .cell.selected::before {
  box-shadow:
    0 20px 38px rgba(30,64,175,0.22),
    0 10px 20px rgba(30,64,175,0.18),
    0 0 0 2px color-mix(in oklab, var(--tile-color), black 22%),
    0 0 0 8px color-mix(in oklab, var(--tile-color) 55%, transparent),
    inset 0 1px 0 rgba(255,255,255,0.5),
    inset 0 -1px 0 rgba(0,0,0,0.08);
}

.pattern-preview {
  display: block;

  width: min(92%, 260px);

  margin-left: auto;
  margin-right: auto;

  padding: 0;

  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.pattern-preview .pattern-swatch-image {
  width: 100%;
  height: auto;

  object-fit: contain;
}
.grid .cell::before {
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.14),
    inset 0 1px 0 rgba(255,255,255,0.45),
    inset 0 -1px 0 rgba(0,0,0,0.08);
}

.grid .cell.selected::before {
  box-shadow:
    0 0 0 2px rgba(0,0,0,0.22),
    0 0 22px 8px var(--tile-color),
    inset 0 1px 0 rgba(255,255,255,0.55),
    inset 0 -1px 0 rgba(0,0,0,0.1);
}

.grid .slot {
  background: var(--target-color);
  filter: brightness(0.92) saturate(1.02);
}

.grid .cell.selected::after {
  box-shadow: inset 0 0 0 999px rgba(255,255,255,0.04);
}

.grid[data-style="3d"] .cell::before {
  box-shadow:
    0 10px 20px rgba(0,0,0,0.10),
    0 0 0 1px rgba(0,0,0,0.15),
    inset 0 1px 0 rgba(255,255,255,0.50),
    inset 0 -1px 0 rgba(0,0,0,0.09);
}

.grid[data-style="3d"] .cell.selected::before {
  box-shadow:
    0 18px 32px rgba(0,0,0,0.18),
    0 0 0 2px rgba(0,0,0,0.24),
    0 0 24px 10px var(--tile-color),
    inset 0 1px 0 rgba(255,255,255,0.60),
    inset 0 -1px 0 rgba(0,0,0,0.10);
}

.grid[data-style="flat"] .cell::before {
  box-shadow: 0 0 0 1px rgba(0,0,0,0.18);
}

.grid[data-style="flat"] .cell.selected::before {
  box-shadow:
    0 0 0 3px rgba(0,0,0,0.28),
    0 0 18px 6px var(--tile-color);
}

.grid[data-style="neon"] .cell::before,
.grid[data-style="neonwire"] .cell::before {
  box-shadow: 0 0 0 1px rgba(0,0,0,0.18);
}

.grid[data-style="neon"] .cell.selected::before,
.grid[data-style="neonwire"] .cell.selected::before {
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.24),
    0 0 8px 0 var(--tile-color),
    0 0 18px 4px var(--tile-color),
    0 0 28px 8px var(--tile-color);
}

.grid[data-style="pastel"] .cell::before {
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.10),
    inset 0 1px 0 rgba(255,255,255,0.55);
}

.grid[data-style="pastel"] .cell.selected::before {
  box-shadow:
    0 0 0 2px rgba(0,0,0,0.16),
    0 12px 18px rgba(0,0,0,0.10);
}

.grid[data-style="glass"] .cell::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(255,255,255,0.35), rgba(255,255,255,0));
  pointer-events: none;
  border-radius: inherit;
}

.grid[data-style="jelly"], .grid[data-style="bubble"] .cell::before {
  box-shadow:
    0 10px 24px rgba(0,0,0,0.14),
    0 0 0 1px rgba(0,0,0,0.14),
    inset 0 1px 0 rgba(255,255,255,0.55);
}

.overlay-content { background: rgba(255,255,255,0.96); }

.grid .cell  { filter: none; }

@media (max-width: 768px) {
  html, body { -webkit-text-size-adjust: 100%; }
  body { padding-bottom: 8px; }
  :root {
    --controls-gap-y: 8px;
    --rotate-btn-width: 44px;
    --rotate-btn-height: 28px;
    --logo-center-offset: 0px;
    --right-center-offset: 0px;
    --right-block-dy: 0px;
  }
  .topbar {
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px var(--topbar-pad-inline);
  }
  .title {
    margin: 0;
    width: 100%;
    display: flex;
    justify-content: center;
  }
  .logo {
    height: 72px;
  }
  .spacer { display: none; }
  .top-right {
    width: 100%;
    margin: 0;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
  }
  .button, .icon-button, .pattern-button {
    min-height: 44px;
  }
  .icon-button { width: 44px; height: 44px; }
  .size-value { min-width: 40px; }
  .main {
    padding: 0 12px 20px;
  }
  .board-wrap {
    width: 100%;
    justify-items: center;
  }
  .board-toolbar {
    grid-template-columns: 1fr auto 1fr;
    column-gap: 8px;
    width: 100%;
  }

.solved-summary:hover .char {
  color: var(--ch-hover, var(--ch, currentColor));
}
  #btn-rotate-left { justify-self: start; }
  #btn-rotate-right { justify-self: end; }
  #moves {
    justify-self: center;
    font-weight: 700;
  }
.grid {
  width:
    min(
      92vw,
      var(--main-ui-max-width)
    );

  --gap: 10px;
}
.overlay-content {
  width: 100%;
  max-width: 640px;
  padding: 16px 14px 12px;
  border-radius: 14px;
}
  .overlay-content h2 {
    font-size: 1.125rem;
  }
  .rules {
    margin: 6px 0 8px 18px;
    padding-left: 4px;
  }
  .actions {
    gap: 10px;
  }
  .pattern-list,
  .style-list {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }
  .style-btn .swatch { width: 56px; height: 56px; }
  .style-btn .caption { font-size: 11px; }
  #btn-rotate-left { margin-left: 0; }
  #btn-rotate-right { margin-right: 0; }
}

html, body { overflow-x: hidden; }

@media (max-width: 768px) {
  html, body {
    -webkit-text-size-adjust: 100%;
  }

  body {
    padding-bottom: 8px;
  }

  :root {
    --play-area-width:
      min(
        92vw,
        var(--main-ui-max-width)
      );
  }

  .main {
    padding: 0 12px 20px;
  }

  .grid {
    --gap: 10px;
  }

  .pattern-list,
  .style-list {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }

  .style-btn .swatch {
    width: 56px;
    height: 56px;
  }

  .style-btn .caption {
    font-size: 11px;
  }
}

@media (max-width: 400px) {
  :root {
    --play-area-width:
      min(
        94vw,
        var(--main-ui-max-width)
      );
  }
}

@media (max-width: 768px) and (min-resolution: 2dppx) {
  .cell::after { opacity: 0.6; }
}

@supports (padding: max(0px)) {
  .topbar { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
  .overlay-content { padding-bottom: max(12px, calc(12px + env(safe-area-inset-bottom))); }
}

.topbar, .main, .overlay-content { max-width: 100%; }
.grid { max-width: 100%; }

.overlay-content {
  max-height: 90vh;
  overflow: auto;
}

@media (max-width: 1024px) {
  .overlay-content {
    max-height: 80vh;
    padding: 16px 14px 12px;
  }
}

@media (max-width: 768px) {
  .overlay-content {
    max-height: 70vh;
    padding: 12px 10px 10px;
    border-radius: 12px;
  }

  .actions {
    margin-top: 8px;
    padding-top: 8px;
  }
}

@media (max-height: 640px) {
  .overlay-content {
    max-height: calc(100svh - 20px);
    padding: 10px 8px 8px;
  }
}

.solved-summary {
  margin-top: 12px;
  text-align: center;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
  color: #334155;
}

.solved-summary .char {
  display: inline-block;
  color: var(--ch, currentColor);
  transition: color 160ms ease, transform 160ms ease;
}

.solved-summary.is-solved {
  cursor: pointer;
  user-select: none;
}

.solved-summary.is-solved:hover .char,
.solved-summary:hover .char {
  color: var(--ch-hover, var(--ch, currentColor));
}

.solved-summary:focus { outline: none; }

.solved-summary:focus-visible {
  outline: 2px solid #60a5fa;
  outline-offset: 6px;
  border-radius: 8px;
}

@media (max-width: 520px) {
  .howto-actions { align-items: stretch; }
  .actions-left { flex-wrap: wrap; }
}

.logo-only {
  justify-content: flex-start;
}

.logo-only .title {
  margin: 0;
}

.logo-only .spacer {
  display: none;
}

.bottom-game-controls {
  
  --bottom-btn-height: clamp(24px, calc(var(--play-area-width) * 0.1), 40px);

  --bottom-icon-width: var(--bottom-btn-height);

  --bottom-text-width: calc(var(--bottom-icon-width) * 2);

  --bottom-text-font-size: clamp(10px, calc(var(--bottom-btn-height) * 0.36), 16px);

  --bottom-swatch-size: calc(var(--bottom-btn-height) * 0.58);

  --bottom-style-icon-size: calc(var(--bottom-btn-height) * 0.58);

  --bottom-swatch-radius: calc(var(--bottom-swatch-size) * 0.28);

  --bottom-border-width: clamp(1px, calc(var(--bottom-btn-height) * 0.055), 2px);

  --bottom-controls-margin-top: clamp(8px, calc(var(--play-area-width) * 0.023), 12px);

  --bottom-btn-radius: 999px;

--bottom-pattern-color: #3B82F6;
--bottom-new-color: #22D3EE;
--bottom-how-color: #00C389;
--bottom-style-color: #84CC16;

  width: var(--play-area-width);
  max-width: 100%;
  margin-top: var(--bottom-controls-margin-top);

  display: grid;
  grid-template-columns: max-content 1fr max-content 1fr max-content 1fr max-content;
  align-items: center;
  gap: 0;
}

.bottom-control-spacer {
  min-width: 0;
}

.bottom-capsule-button {
  appearance: none;

  border: var(--bottom-border-width) solid color-mix(in oklab, var(--bottom-btn-color), white 8%);
  background: color-mix(in oklab, var(--bottom-btn-color), white 86%);
  color: #334155;

  height: var(--bottom-btn-height);
  min-height: var(--bottom-btn-height);
  max-height: var(--bottom-btn-height);

  min-width: 0;
  padding: 0;

  border-radius: var(--bottom-btn-radius);

  position: relative;
  overflow: hidden;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.01em;
  white-space: nowrap;

  cursor: pointer;

  box-shadow:
    0 3px 7px rgba(2,6,23,0.06),
    inset 0 1px 0 rgba(255,255,255,0.9);

  transition: none;
}

.bottom-capsule-button:hover {
  background: color-mix(in oklab, var(--bottom-btn-color), white 86%);
}

.bottom-capsule-button:active {
  transform: none;
}

.bottom-capsule-button:focus,
.bottom-capsule-button:focus-visible {
  outline: none;
}

.bottom-capsule-button:focus-visible {
  box-shadow:
    0 0 0 calc(var(--bottom-border-width) * 1.7)
      color-mix(in oklab, var(--bottom-btn-color), white 80%),
    inset 0 0 0 var(--bottom-border-width)
      var(--bottom-btn-color);
}

.bottom-capsule-icon {
  width: var(--bottom-icon-width);
  min-width: var(--bottom-icon-width);
  max-width: var(--bottom-icon-width);
  padding: 0;
}

.bottom-capsule-text {
  width: var(--bottom-text-width);
  min-width: var(--bottom-text-width);
  max-width: var(--bottom-text-width);

  padding-inline: 0;

  font-size: var(--bottom-text-font-size);
}

.bottom-capsule-label {
  position: relative;
  z-index: 1;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  height: 100%;

  line-height: 1;
}

.bottom-capsule-pattern {
  --bottom-btn-color: var(--bottom-pattern-color);
}

.bottom-capsule-new {
  --bottom-btn-color: var(--bottom-new-color);
}

.bottom-capsule-how {
  --bottom-btn-color: var(--bottom-how-color);
}

.bottom-capsule-style {
  --bottom-btn-color: var(--bottom-style-color);
}

.bottom-capsule-button .swatch {
  width: var(--bottom-swatch-size);
  height: var(--bottom-swatch-size);

  display: block;
  overflow: hidden;

  border-radius:
    var(--bottom-swatch-radius);

  background-color: #e5e7eb;

  box-shadow:
    inset 0 0 0 1px
    rgba(15, 23, 42, 0.14),
    0 1px 2px
    rgba(2, 6, 23, 0.08);
}

.bottom-capsule-button .style-icon {
  font-size: var(--bottom-style-icon-size);
  line-height: 1;
}

#btn-rules.bottom-capsule-button.howto-needs-attention {
  border-color: var(--howto-highlight-color);
  box-shadow:
    0 0 0 var(--howto-highlight-width) var(--howto-highlight-color),
    var(--howto-highlight-glow);
}

@media (max-width: 400px) {
  .bottom-game-controls {
    
    --bottom-btn-height: clamp(23px, calc(var(--play-area-width) * 0.12), 36px);
  }
}

.board-wrap {
  
  --rotate-btn-height: clamp(24px, calc(var(--play-area-width) * 0.07), 34px);

  --rotate-btn-ratio: 1.55;

  --rotate-btn-width: calc(var(--rotate-btn-height) * var(--rotate-btn-ratio));

  --rotate-icon-size: calc(var(--rotate-btn-height) * 0.58);

  --rotate-btn-radius: calc(var(--rotate-btn-height) * 0.22);

  --controls-gap-y: clamp(8px, calc(var(--play-area-width) * 0.023), 14px);
}

.rotate-btn {
  width: var(--rotate-btn-width);
  min-width: var(--rotate-btn-width);
  max-width: var(--rotate-btn-width);

  height: var(--rotate-btn-height);
  min-height: var(--rotate-btn-height);
  max-height: var(--rotate-btn-height);

  padding: 0;
  border-radius: var(--rotate-btn-radius);

  flex: 0 0 var(--rotate-btn-width);
  box-sizing: border-box;

  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.rotate-btn i {
  font-size: var(--rotate-icon-size);
  line-height: 1;
}

:root {
  --visible-board-width: var(--play-area-width);
}

.grid {
  width: var(--visible-board-width);
  max-width: var(--visible-board-width);
}

.board-wrap {
  width: var(--play-area-width);
  max-width: var(--play-area-width);
  justify-items: center;
}

.board-toolbar {
  width: var(--visible-board-width);
  max-width: var(--visible-board-width);

  justify-self: center;

  display: grid;
  grid-template-columns: var(--rotate-btn-width) minmax(0, 1fr) var(--rotate-btn-width);
  align-items: center;

  column-gap: 0;
  margin-bottom: var(--controls-gap-y);
}

#btn-rotate-left {
  justify-self: start;
  margin-left: 0;
}

#btn-rotate-right {
  justify-self: end;
  margin-right: 0;
}

#moves {
  justify-self: center;
}

.topbar.logo-only {
  width: var(--play-area-width);
  max-width: var(--play-area-width);

  margin: 0 auto;
  padding: clamp(8px, calc(var(--play-area-width) * 0.025), 12px) 0 0;

  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: nowrap;
}

.logo-only .title {
  margin: 0;
  width: auto;
  line-height: 1;
  display: block;
}

.logo-only .logo {
  display: block;

  height: var(--logo-height);
  width: auto;

  max-width: var(--play-area-width);
  object-fit: contain;
}

#pattern-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;

  display: block;
  padding: 0;

    background: var(--app-bg);

  overflow: hidden;
}

#pattern-overlay[hidden] {
  display: none;
}

#pattern-overlay .overlay-content {
  width: 100%;
  max-width: none;

  height: 100dvh;
  max-height: none;
  min-height: 100dvh;

  margin: 0;
  padding: clamp(14px, 3vw, 28px);

  border-radius: 0;
  box-shadow: none;
  background: transparent;

  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: clamp(10px, 2vw, 18px);
}

#pattern-overlay h2 {
  margin: 0;
  text-align: center;

  font-size: clamp(22px, 4vw, 36px);
  line-height: 1.1;
}

#pattern-overlay .pattern-list {
  width: min(100%, 980px);
  margin-inline: auto;

  overflow: auto;

  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(74px, 1fr));
  gap: clamp(10px, 2vw, 18px);

  padding:
    clamp(6px, 1.5vw, 12px)
    clamp(4px, 1vw, 8px)
    clamp(12px, 2vw, 20px);
}

#pattern-overlay .pattern-btn {
  border-radius: clamp(12px, 2vw, 18px);
  background: rgba(255,255,255,0.82);

  box-shadow:
    0 8px 20px rgba(2,6,23,0.08),
    inset 0 0 0 1px rgba(2,6,23,0.06);
}

#pattern-overlay .pattern-btn.is-active {
  box-shadow:
    0 0 0
    var(--ui-active-ring-inner)
    #ffffff,

    0 0 0
    var(--ui-active-ring-outer)
    rgba(59, 130, 246, 0.38),

    0
    calc(var(--ui-base) * 0.028)
    calc(var(--ui-base) * 0.055)
    rgba(2, 6, 23, 0.12);
}

#pattern-overlay .note {
  width: min(100%, 980px);
  margin: 0 auto;

  text-align: center;
  color: #475569;
  font-size: clamp(13px, 2vw, 16px);
}

#pattern-overlay .actions {
  width: min(100%, 980px);
  margin: 0 auto;

  display: flex;
  justify-content: space-between;
  gap: 12px;

  padding-top: clamp(8px, 1.5vw, 14px);
}

#pattern-overlay .actions .button {
  min-height: 44px;
  padding-inline: 18px;
}

#style-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;

  display: block;
  padding: 0;

  background: var(--app-bg);

  overflow: hidden;
}

#style-overlay[hidden] {
  display: none;
}

#style-overlay .overlay-content {
  width: 100%;
  max-width: none;

  height: 100dvh;
  max-height: none;
  min-height: 100dvh;

  margin: 0;
  padding: clamp(14px, 3vw, 28px);

  border-radius: 0;
  box-shadow: none;
  background: transparent;

  display: grid;
  grid-template-rows: auto 1fr;
  gap: clamp(10px, 2vw, 18px);
}

#style-overlay h2 {
  margin: 0;
  text-align: center;

  font-size: clamp(22px, 4vw, 36px);
  line-height: 1.1;
}

#style-overlay .style-list {
  width: min(100%, 980px);
  margin-inline: auto;
  margin-top: 0;
  margin-bottom: 0;

  overflow: auto;

  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  align-content: start;
  gap: clamp(10px, 2vw, 18px);

  padding:
    clamp(6px, 1.5vw, 12px)
    clamp(4px, 1vw, 8px)
    clamp(12px, 2vw, 20px);
}

#style-overlay .style-btn {
  width: 100%;
  min-width: 0;
  aspect-ratio: 1 / 1;

  padding: clamp(8px, 1.6vw, 14px);
  border: 0;
  border-radius: clamp(12px, 2vw, 18px);
  background: rgba(255,255,255,0.82);

  display: grid;
  grid-template-rows: 1fr auto;
  justify-items: center;
  align-items: center;
  gap: clamp(5px, 1vw, 9px);

  box-shadow:
    0 8px 20px rgba(2,6,23,0.08),
    inset 0 0 0 1px rgba(2,6,23,0.06);
}

#style-overlay .style-btn:hover {
  background: rgba(255,255,255,0.9);
}

#style-overlay .style-btn.is-active {
  box-shadow:
    0 0 0
    var(--ui-active-ring-inner)
    #ffffff,

    0 0 0
    var(--ui-active-ring-outer)
    rgba(59, 130, 246, 0.38),

    0
    calc(var(--ui-base) * 0.028)
    calc(var(--ui-base) * 0.055)
    rgba(2, 6, 23, 0.12);
}

#style-overlay .style-btn .swatch {
  width: min(72%, 88px);
  height: auto;
  aspect-ratio: 1 / 1;

  border-radius: clamp(8px, 1.5vw, 14px);
}

#style-overlay .style-btn .caption {
  max-width: 100%;

  color: #334155;
  font-size: clamp(11px, 1.7vw, 14px);
  font-weight: 700;
  line-height: 1.12;
  text-align: center;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#style-overlay .actions {
  width: min(100%, 980px);
  margin: 0 auto;

  display: flex;
  justify-content: space-between;
  gap: 12px;

  padding-top: clamp(8px, 1.5vw, 14px);
}

#style-overlay .actions .button {
  min-height: 44px;
  padding-inline: 18px;
}

@media (max-width: 420px) {
  #style-overlay .style-list {
    grid-template-columns: repeat(auto-fit, minmax(86px, 1fr));
    gap: 10px;
  }

  #style-overlay .style-btn {
    padding: 8px;
  }

  #style-overlay .style-btn .swatch {
    width: min(68%, 68px);
  }

  #style-overlay .style-btn .caption {
    font-size: 11px;
  }
}

#overlay .overlay-content,
#text-tutorial-overlay .overlay-content,
#pattern-overlay .overlay-content,
#style-overlay .overlay-content {
  position: relative;
}

.overlay-back-button {
  appearance: none;
  -webkit-appearance: none;

  position: absolute;

  top: clamp(2px, 1vw, 8px);
  width: 50px;
  height: 50px;
  font-size: clamp(24px, 3vw, 36px);

  left: clamp(10px, 2.4vw, 22px);
  z-index: 5;

  padding: 0;

  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;

  color: #0f172a;
  
  font-weight: 700;
  line-height: 1;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  cursor: pointer;
  user-select: none;

  transition:
    transform 120ms ease,
    opacity 120ms ease;
}

.overlay-back-button:hover {
  background: transparent;
  opacity: 0.78;
}

.overlay-back-button:active {
  transform: translateX(-1px) scale(0.96);
}

.overlay-back-button:focus-visible {
  outline: 2px solid #60a5fa;
  outline-offset: 3px;
  border-radius: 8px;
}
.overlay-forward-button {
  appearance: none;
  -webkit-appearance: none;

  position: absolute;

  top: clamp(2px, 1vw, 8px);
  right: clamp(10px, 2.4vw, 22px);
  z-index: 5;

  width: 50px;
  height: 50px;
  padding: 0;

  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;

  color: #0f172a;
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 700;
  line-height: 1;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  cursor: pointer;
  user-select: none;

  transition:
    transform 120ms ease,
    opacity 120ms ease;
}

.overlay-forward-button:hover {
  background: transparent;
  opacity: 0.78;
}

.overlay-forward-button:active {
  transform: translateX(1px) scale(0.96);
}

.overlay-forward-button:focus-visible {
  outline: 2px solid #60a5fa;
  outline-offset: 3px;
  border-radius: 8px;
}

.confirm-actions {
  --bottom-btn-height: clamp(32px, calc(var(--play-area-width) * 0.1), 40px);
  --bottom-icon-width: var(--bottom-btn-height);
  --bottom-text-width: calc(var(--bottom-icon-width) * 2);
  --bottom-text-font-size: clamp(12px, calc(var(--bottom-btn-height) * 0.36), 16px);
  --bottom-border-width: clamp(1px, calc(var(--bottom-btn-height) * 0.055), 2px);
  --bottom-btn-radius: 999px;

  --bottom-new-color: var(--c2);
  --bottom-how-color: #ff9f1c;

  width: 100%;
  justify-content: space-between;
  align-items: center;
  margin-top: 12px;
}

.confirm-actions .confirm-choice-button {
  min-width: var(--bottom-text-width);
}

.confirm-no-button {
  --bottom-btn-color: var(--bottom-how-color);
}

.confirm-yes-button {
  --bottom-btn-color: var(--bottom-new-color);
}

.solved-share {
  flex: 1 1 auto;
  min-width: 0;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding-left: clamp(8px, calc(var(--play-area-width) * 0.03), 18px);

  color: #334155;
  font-size: clamp(12px, calc(var(--play-area-width) * 0.04), 18px);
  font-weight: 800;
  line-height: 1.1;
  text-align: center;
  white-space: nowrap;

  transform: scale(1);
  transform-origin: 50% 50%;
  will-change: transform;
}

.solved-share[hidden] {
  display: none !important;
}

.solved-share.is-solved {
  cursor: pointer;
  user-select: none;
}

.solved-share .char {
  display: inline-block;
  color: var(--ch, currentColor);
  transition: color 160ms ease, transform 160ms ease;
}

.solved-share.is-solved:hover .char {
  color: var(--ch-hover, var(--ch, currentColor));
}

.solved-share:focus {
  outline: none;
}

.solved-share:focus-visible {
  outline: 2px solid #60a5fa;
  outline-offset: 6px;
  border-radius: 8px;
}

.moves.is-solved {
  cursor: default;
  user-select: text;
}
.solved-share {
  position: relative;
}

.solved-share::after {
  content: attr(data-copy-message);

  position: absolute;
  left: 50%;
  top: calc(100% + 3px);
  transform: translate(-50%, -2px);

  opacity: 0;
  pointer-events: none;

  color: #334155;
  font-size: clamp(10px, calc(var(--play-area-width) * 0.028), 13px);
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;

  transition:
    opacity 160ms ease,
    transform 160ms ease;
}

.solved-share.is-copied::after {
  opacity: 1;
  transform: translate(-50%, 0);
}

:root {
--logo-layout-base: var(--visible-board-width, var(--play-area-width));
  
  --main-menu-button-size-ratio: 0.11;
  --main-menu-icon-size-ratio: 0.06;

  --main-menu-offset-x-ratio: 0.01;
  --main-menu-offset-y-ratio: -0.065;

  --main-menu-focus-width-ratio: 0.005;
  --main-menu-focus-offset-ratio: 0.006;

  --main-menu-button-size:
    calc(
      var(--logo-layout-base) *
      var(--main-menu-button-size-ratio)
    );

  --main-menu-icon-size:
    calc(
      var(--logo-layout-base) *
      var(--main-menu-icon-size-ratio)
    );

  --main-menu-offset-x:
    calc(
      var(--logo-layout-base) *
      var(--main-menu-offset-x-ratio)
    );

  --main-menu-offset-y:
    calc(
      var(--logo-layout-base) *
      var(--main-menu-offset-y-ratio)
    );

  --main-menu-focus-width:
    calc(
      var(--logo-layout-base) *
      var(--main-menu-focus-width-ratio)
    );

  --main-menu-focus-offset:
    calc(
      var(--logo-layout-base) *
      var(--main-menu-focus-offset-ratio)
    );

  --logo-row-top-gap-ratio: 0.023;

  --logo-to-board-gap-ratio: -0.08;

  --logo-row-top-gap: calc(var(--logo-layout-base) * var(--logo-row-top-gap-ratio));
  --logo-to-board-gap: calc(var(--logo-layout-base) * var(--logo-to-board-gap-ratio));
  
  --solved-share-y: -22px;
  --solved-share-x: 0px;
  --solved-share-font-size: clamp(12px, calc(var(--play-area-width) * 0.05), 18px);
  --solved-share-line-height: 1.1;

  --solved-share-area-width: calc(var(--play-area-width) - var(--logo-height) * 2.6);
}

.topbar.logo-only {
  padding-top: var(--logo-row-top-gap);

  display: grid;
  grid-template-columns:
    max-content
    minmax(0, 1fr)
    max-content;

  align-items: center;
  justify-content: start;
  column-gap: 0;

  width: var(--play-area-width);
  max-width: var(--play-area-width);
}

.logo-only .title {
  grid-column: 1;
}

.main-menu-button {
  grid-column: 3;

  justify-self: end;
  align-self: center;

  position: relative;
  left: var(--main-menu-offset-x);
  top: var(--main-menu-offset-y);

  width: var(--main-menu-button-size);
  height: var(--main-menu-button-size);

  min-width: var(--main-menu-button-size);
  min-height: var(--main-menu-button-size);

  padding: 0;
  border: 0;
  border-radius: 50%;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  background: transparent;
  color: #334155;

  cursor: pointer;
  -webkit-tap-highlight-color: transparent;

  transition:
    background-color 160ms ease,
    transform 80ms ease;
}

.main-menu-button .main-menu-icon {
  display: block;

  width: var(--main-menu-icon-size);
  height: var(--main-menu-icon-size);

  flex: 0 0 auto;

  overflow: visible;
  pointer-events: none;
}

@media (any-hover: hover) and (any-pointer: fine) {
  .main-menu-button:hover {
    background: rgba(51, 65, 85, 0.09);
  }
}

.main-menu-button:active {
  transform: scale(0.94);
}

.main-menu-button:focus:not(:focus-visible) {
  outline: none;
  background: transparent;
}

.main-menu-button:focus-visible {
  outline:
    var(--main-menu-focus-width)
    solid
    #60a5fa;

  outline-offset:
    var(--main-menu-focus-offset);
}
.solved-share {
  grid-column: 2;

  width: 100%;
  min-width: 0;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  position: relative;
  top: var(--solved-share-y);
  left: var(--solved-share-x);

  padding-left: 0;

  font-size: var(--solved-share-font-size);
  line-height: var(--solved-share-line-height);
}

.main {
  margin-top: var(--logo-to-board-gap);
}

@media (orientation: portrait) {
  :root {
    
    --app-side-gap-min: 14px;

    --app-side-gap: var(--app-side-gap-min);

    --app-bottom-gap: 24px;

    --scroll-fit-safety-gap: 6px;

    --fit-min-ui-width: 180px;

--ui-width-by-screen:
  min(
    calc(
      100vw -
      (var(--app-side-gap) * 2)
    ),
    var(--main-ui-max-width)
  );

--ui-width:
  var(
    --fit-ui-width,
    var(--ui-width-by-screen)
  );

--play-area-width:
  var(--ui-width);

--visible-board-width:
  var(--ui-width);
  
    --logo-height: calc(var(--ui-width) * var(--logo-size-ratio));
    --solved-share-font-size: clamp(12px, calc(var(--ui-width) * 0.05), 18px);
    --solved-share-area-width: calc(var(--ui-width) - var(--logo-height) * 2.6);
  }

  html,
  body {
    overflow-x: hidden;
    overscroll-behavior: none;
  }

  body.main-fit-active {
    overflow-y: hidden;
  }

  .main {
    padding-left: var(--app-side-gap);
    padding-right: var(--app-side-gap);
    padding-bottom: var(--app-bottom-gap);
  }

  .topbar.logo-only,
  .board-wrap,
  .board-toolbar,
  .grid,
  .bottom-game-controls {
    width: var(--ui-width);
    max-width: var(--ui-width);
  }
}

:root {
  
  --main-buttons-base: var(--visible-board-width);

  --rotate-btn-height-ratio: 0.07;
  --rotate-btn-width-ratio: 1.55;
  --rotate-icon-ratio: 0.58;
  --rotate-radius-ratio: 0.22;

  --bottom-btn-height-ratio: 0.10;
  --bottom-text-width-ratio: 2;
  --bottom-text-font-ratio: 0.4;
  --bottom-icon-ratio: 0.58;
  --bottom-border-ratio: 0.055;

  --main-controls-gap-ratio: 0.023;
}

.board-wrap {
  --rotate-btn-height: calc(var(--main-buttons-base) * var(--rotate-btn-height-ratio));
  --rotate-btn-width: calc(var(--rotate-btn-height) * var(--rotate-btn-width-ratio));
  --rotate-icon-size: calc(var(--rotate-btn-height) * var(--rotate-icon-ratio));
  --rotate-btn-radius: calc(var(--rotate-btn-height) * var(--rotate-radius-ratio));

  --controls-gap-y: calc(var(--main-buttons-base) * var(--main-controls-gap-ratio));
}

.board-toolbar {
  width: var(--main-buttons-base);
  max-width: var(--main-buttons-base);

  grid-template-columns: var(--rotate-btn-width) minmax(0, 1fr) var(--rotate-btn-width);
  margin-bottom: var(--controls-gap-y);
}

.rotate-btn {
  width: var(--rotate-btn-width);
  min-width: var(--rotate-btn-width);
  max-width: var(--rotate-btn-width);

  height: var(--rotate-btn-height);
  min-height: var(--rotate-btn-height);
  max-height: var(--rotate-btn-height);

  padding: 0;
  border-radius: var(--rotate-btn-radius);
}

.rotate-btn i {
  font-size: var(--rotate-icon-size);
  line-height: 1;
}

.bottom-game-controls {
  --bottom-btn-height: calc(var(--main-buttons-base) * var(--bottom-btn-height-ratio));

  --bottom-icon-width: var(--bottom-btn-height);
  --bottom-text-width: calc(var(--bottom-icon-width) * var(--bottom-text-width-ratio));

  --bottom-text-font-size: calc(var(--bottom-btn-height) * var(--bottom-text-font-ratio));
  --bottom-swatch-size: calc(var(--bottom-btn-height) * var(--bottom-icon-ratio));
  --bottom-style-icon-size: calc(var(--bottom-btn-height) * var(--bottom-icon-ratio));

  --bottom-swatch-radius: calc(var(--bottom-swatch-size) * 0.28);
  --bottom-border-width: calc(var(--bottom-btn-height) * var(--bottom-border-ratio));

  --bottom-controls-margin-top: calc(var(--main-buttons-base) * var(--main-controls-gap-ratio));

  width: var(--main-buttons-base);
  max-width: var(--main-buttons-base);

  margin-top: var(--bottom-controls-margin-top);
}

.bottom-capsule-button {
  appearance: none;
  -webkit-tap-highlight-color: transparent;

  border: var(--bottom-border-width) solid color-mix(in oklab, var(--bottom-btn-color), white 8%);
  background: color-mix(in oklab, var(--bottom-btn-color), white 86%);
  color: #334155;

  height: var(--bottom-btn-height);
  min-height: var(--bottom-btn-height);
  max-height: var(--bottom-btn-height);

  min-width: 0;
  padding: 0;

  border-radius: var(--bottom-btn-radius);

  position: relative;
  overflow: hidden;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.01em;
  white-space: nowrap;

  cursor: pointer;

  box-shadow:
    0 3px 7px rgba(2,6,23,0.06),
    inset 0 1px 0 rgba(255,255,255,0.9);

  transition: none;
}

.bottom-capsule-icon {
  width: var(--bottom-icon-width);
  min-width: var(--bottom-icon-width);
  max-width: var(--bottom-icon-width);
}

.bottom-capsule-text {
  width: var(--bottom-text-width);
  min-width: var(--bottom-text-width);
  max-width: var(--bottom-text-width);

  font-size: var(--bottom-text-font-size);
}

.bottom-capsule-button .swatch {
  width: var(--bottom-swatch-size);
  height: var(--bottom-swatch-size);
  border-radius: var(--bottom-swatch-radius);

  gap: max(1px, calc(var(--bottom-swatch-size) * 0.055));
}

.bottom-capsule-button .style-icon {
  font-size: var(--bottom-style-icon-size);
}

:root {
  
  --game-text-base: var(--visible-board-width);

  --moves-font-ratio: 0.045;
  --moves-line-height: 1.1;
  --moves-min-height-ratio: 0.07;

  --solved-share-font-ratio: 0.05;
  --solved-share-copy-message-font-ratio: 0.032;
}

.moves,
.moves.is-solved,
#moves {
  font-size: calc(var(--game-text-base) * var(--moves-font-ratio));
  line-height: var(--moves-line-height);

  min-height: calc(var(--game-text-base) * var(--moves-min-height-ratio));
}

.solved-share {
  font-size: calc(var(--game-text-base) * var(--solved-share-font-ratio));
}

.solved-share::after {
  font-size: calc(var(--game-text-base) * var(--solved-share-copy-message-font-ratio));
}

:root {
  
  --solved-share-y: 0px;
}

.topbar.logo-only {
  align-items: center;
}

.logo-only .title {
  display: flex;
  align-items: center;
}

.logo-only .logo {
  display: block;
}

.solved-share {
  align-self: center;

  top: var(--solved-share-y);

  display: inline-flex;
  align-items: center;

  line-height: 1;
}

.moves.is-solved,
.solved-share.is-solved {
  cursor: pointer;
  user-select: none;
}

.moves.is-solved {
  position: relative;
}

.moves.is-solved.is-copied::after {
  opacity: 1;
  transform: translate(-50%, 0);
}

.moves.is-solved:focus {
  outline: none;
}

.moves.is-solved:focus-visible {
  outline: 2px solid #60a5fa;
  outline-offset: 6px;
  border-radius: 8px;
}
.moves.is-solved.is-copied {
  cursor: pointer;
}

:root {
  
  --chooser-preview-columns: 3;

  --chooser-preview-gap: 12px;

  --chooser-list-padding-x: 10px;
  --chooser-list-padding-y: 10px;
}

#pattern-overlay .pattern-list,
#style-overlay .style-list {
  display: grid;

  grid-template-columns: repeat(var(--chooser-preview-columns), minmax(0, 1fr));

  gap: var(--chooser-preview-gap);

  padding-top: var(--chooser-list-padding-y);
  padding-bottom: var(--chooser-list-padding-y);
  padding-left: var(--chooser-list-padding-x);
  padding-right: var(--chooser-list-padding-x);

  overflow: auto;
}

#pattern-overlay .pattern-btn {
  width: 100%;
  aspect-ratio: 1 / 1;
}

#style-overlay .style-btn {
  width: 100%;
}

#style-overlay .style-btn .swatch {
  width: 76%;
  max-width: none;
  height: auto;
  aspect-ratio: 1 / 1;
}

#style-overlay .style-btn .caption {
  font-size: 12px;
  line-height: 1.15;
}

:root {
  
  --chooser-text-base: var(--visible-board-width, var(--play-area-width));

  --chooser-title-font-ratio: 0.06;

  --chooser-back-font-ratio: 0.085;
  --chooser-back-size-ratio: 0.13;

  --chooser-caption-font-ratio: 0.033;

  --chooser-note-font-ratio: 0.038;

  --chooser-title-line-height: 1.05;
  --chooser-caption-line-height: 1.12;
  --chooser-note-line-height: 1.25;
}

#pattern-overlay .overlay-content h2,
#style-overlay .overlay-content h2 {
  font-size:
    calc(
      var(--chooser-text-base)
      * var(--chooser-title-font-ratio)
    );

  line-height:
    var(--chooser-title-line-height);

  margin: 0;
  padding: 0;

  font-weight: 800;
  text-align: center;
}

#pattern-overlay .chooser-header,
#style-overlay .chooser-header {
  position: relative;

top:
  calc(
    var(--chooser-text-base)
    * var(--chooser-header-y-adjust-ratio)
  );
  width:
    min(
      100%,
      var(--chooser-panel-width)
    );

  height:
    calc(
      var(--chooser-text-base)
      * var(--chooser-title-font-ratio)
      * var(--chooser-title-line-height)
    );

  margin-left: auto;
  margin-right: auto;

  padding-left:
    var(--chooser-back-side-inset);

  padding-right:
    var(--chooser-back-side-inset);

  display: grid;

  grid-template-columns:
    calc(
      var(--chooser-text-base)
      * var(--chooser-back-size-ratio)
    )
    minmax(0, 1fr)
    calc(
      var(--chooser-text-base)
      * var(--chooser-back-size-ratio)
    );

  align-items: center;

  overflow: visible;
}


#pattern-overlay .chooser-header h2,
#style-overlay .chooser-header h2 {
  grid-column: 2;

  align-self: center;
  justify-self: stretch;

  width: 100%;

  margin: 0;
  padding: 0;

  text-align: center;
}
#pattern-overlay .chooser-header .overlay-back-button,
#style-overlay .chooser-header .overlay-back-button {
  position: relative;

  grid-column: 1;

  justify-self: center;
  align-self: center;

  width:
    calc(
      var(--chooser-text-base)
      * var(--chooser-back-size-ratio)
    );

  height:
    calc(
      var(--chooser-text-base)
      * var(--chooser-back-size-ratio)
    );

  font-size:
    calc(
      var(--chooser-text-base)
      * var(--chooser-back-font-ratio)
    );

  line-height: 1;

  top:
    calc(
      var(--chooser-text-base)
      * var(--chooser-back-y-adjust-ratio)
    );

  left:
    calc(
      var(--chooser-text-base)
      * var(--chooser-back-x-adjust-ratio)
    );

  margin: 0;
}

#style-overlay .chooser-header {
  margin-bottom:
    calc(
      var(--chooser-text-base)
      * 0.025
    );
}

#style-overlay .style-btn .caption {
  font-size: calc(var(--chooser-text-base) * var(--chooser-caption-font-ratio));
  line-height: var(--chooser-caption-line-height);

  font-weight: 700;
  text-align: center;

  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#pattern-overlay .pattern-btn .caption {
  font-size: calc(var(--chooser-text-base) * var(--chooser-caption-font-ratio));
  line-height: var(--chooser-caption-line-height);

  font-weight: 700;
  text-align: center;
}

#pattern-overlay .note {
  font-size: calc(var(--chooser-text-base) * var(--chooser-note-font-ratio));
  line-height: var(--chooser-note-line-height);

  margin-top: calc(var(--chooser-text-base) * 0.025);
  margin-bottom: calc(var(--chooser-text-base) * 0.015);

  color: #475569;
  text-align: center;
}

#style-overlay .note {
  font-size: calc(var(--chooser-text-base) * var(--chooser-note-font-ratio));
  line-height: var(--chooser-note-line-height);
}

:root {
  
  --confirm-base: var(--visible-board-width, var(--play-area-width));

  --confirm-panel-width-ratio: 0.86;
  --confirm-panel-padding-ratio: 0.045;
  --confirm-panel-radius-ratio: 0.045;

  --confirm-gap-ratio: 0.035;
  --confirm-actions-gap-ratio: 0.045;

  --confirm-title-font-ratio: 0.055;
  --confirm-note-font-ratio: 0.036;
  --confirm-button-font-ratio: 0.04;

  --confirm-button-height-ratio: 0.105;
  --confirm-button-radius-ratio: 0.5;
  --confirm-button-border-ratio: 0.005;
}

.confirm-overlay {
  position: absolute;
  inset: 0;

  display: block;

  padding: 0;

  background: transparent;

  overflow: visible;

  z-index: 20000;

  pointer-events: auto;
}

.confirm-overlay::before {
  content: "";
  position: fixed;
  inset: 0;

  background: rgba(15, 23, 42, 0.6);

  z-index: 0;
}

.confirm-overlay .overlay-content {
  
  position: absolute;
  left: 50%;
  top: calc(var(--confirm-board-center-y, 50%) + var(--confirm-y-adjust, 0px));
  transform: translate(-50%, -50%);

  z-index: 1;

  width: calc(var(--confirm-base) * var(--confirm-panel-width-ratio));
  max-width: calc(var(--confirm-base) * var(--confirm-panel-width-ratio));
  min-width: 0;

  max-height: none;
  min-height: 0;

  margin: 0;
  padding: calc(var(--confirm-base) * var(--confirm-panel-padding-ratio));

  border-radius: calc(var(--confirm-base) * var(--confirm-panel-radius-ratio));
  background: #ffffff;

  box-shadow:
    0 calc(var(--confirm-base) * 0.04)
    calc(var(--confirm-base) * 0.11)
    rgba(2, 6, 23, 0.25);

  display: grid;
  grid-template-rows: auto auto auto;
  gap: calc(var(--confirm-base) * var(--confirm-gap-ratio));

  overflow: visible;
}

.confirm-overlay .overlay-content h2 {
  margin: 0;

  font-size: calc(var(--confirm-base) * var(--confirm-title-font-ratio));
  line-height: 1.08;
  font-weight: 800;

  text-align: center;
}

.confirm-overlay .note {
  margin: 0;

  font-size: calc(var(--confirm-base) * var(--confirm-note-font-ratio));
  line-height: 1.25;
  font-weight: 500;

  color: #475569;
  text-align: center;
}

.confirm-overlay .confirm-actions {
  
  --bottom-btn-height: calc(var(--confirm-base) * var(--confirm-button-height-ratio));
  --bottom-text-width: 100%;
  --bottom-text-font-size: calc(var(--confirm-base) * var(--confirm-button-font-ratio));
  --bottom-border-width: calc(var(--confirm-base) * var(--confirm-button-border-ratio));
  --bottom-btn-radius: 999px;

  width: 100%;

  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(var(--confirm-base) * var(--confirm-actions-gap-ratio));

  margin: 0;
  padding: 0;

  align-items: center;
  justify-content: normal;
}

.confirm-overlay .confirm-choice-button {
  width: 100%;
  min-width: 0;
  max-width: none;

  height: calc(var(--confirm-base) * var(--confirm-button-height-ratio));
  min-height: calc(var(--confirm-base) * var(--confirm-button-height-ratio));
  max-height: calc(var(--confirm-base) * var(--confirm-button-height-ratio));

  padding: 0 calc(var(--confirm-base) * 0.035);

  border-width: calc(var(--confirm-base) * var(--confirm-button-border-ratio));
  border-radius: calc(
    var(--confirm-base) *
    var(--confirm-button-height-ratio) *
    var(--confirm-button-radius-ratio)
  );

  font-size: calc(var(--confirm-base) * var(--confirm-button-font-ratio));
  line-height: 1;
  font-weight: 800;

  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.confirm-overlay .bottom-capsule-text {
  width: 100%;
  min-width: 0;
  max-width: none;
}

.confirm-overlay .confirm-no-button {
  --bottom-btn-color: #ff9f1c;
}

.confirm-overlay .confirm-yes-button {
  --bottom-btn-color: var(--c2);
}

#overlay .overlay-content h2,
#text-tutorial-overlay .overlay-content h2,
#feedback-overlay .overlay-content h2,
#share-overlay .overlay-content h2 {
  margin-top: 0;
  margin-bottom: calc(var(--how-base) * var(--how-title-margin-bottom-ratio));

  font-size: calc(var(--how-base) * var(--how-title-font-ratio));
  line-height: var(--how-title-line-height);
  font-weight: 800;

  text-align: center;
}

:root {
  
  --how-base: var(--visible-board-width, var(--play-area-width));

  --how-panel-y-adjust: 0px;

  --how-panel-width-ratio: 0.92;
  --how-panel-padding-x-ratio: 0.045;
  --how-panel-padding-top-ratio: 0.045;
  --how-panel-padding-bottom-ratio: 0.04;
  --how-panel-radius-ratio: 0.045;

  --how-panel-max-height-ratio: 1.22;

  --how-title-font-ratio: 0.06;
  --how-title-line-height: 1.05;
  --how-title-margin-bottom-ratio: 0.035;

  --how-arrow-size-ratio: 0.13;
  --how-arrow-font-ratio: 0.085;
  --how-arrow-top-ratio: 0.015;
  --how-arrow-side-ratio: 0.025;

  --how-text-font-ratio: 0.038;
  --how-text-line-height: 1.28;

  --how-good-luck-font-ratio: 0.042;
  --how-good-luck-margin-top-ratio: 0.01;

  --how-gif-width-ratio: 0.82;
  --how-gif-radius-ratio: 0.035;

  --how-rules-padding-left-ratio: 0.045;
  --how-rules-gap-ratio: 0.025;
}

#overlay:not([hidden]),
#text-tutorial-overlay:not([hidden]),
#feedback-overlay:not([hidden]),
#share-overlay:not([hidden]) {
  display: block;
  padding: 0;
  background: rgba(15, 23, 42, 0.6);
}

#overlay .overlay-content,
#text-tutorial-overlay .overlay-content,
#feedback-overlay .overlay-content,
#share-overlay .overlay-content {
  position: fixed;

  left: var(--how-panel-center-x, 50vw);
  top: calc(var(--how-panel-center-y, 50vh) + var(--how-panel-y-adjust));

  transform: translate(-50%, -50%);

  width: calc(var(--how-base) * var(--how-panel-width-ratio));
  max-width: calc(var(--how-base) * var(--how-panel-width-ratio));
  min-width: 0;

  max-height: calc(var(--how-base) * var(--how-panel-max-height-ratio));

  padding:
    calc(var(--how-base) * var(--how-panel-padding-top-ratio))
    calc(var(--how-base) * var(--how-panel-padding-x-ratio))
    calc(var(--how-base) * var(--how-panel-padding-bottom-ratio));

  border-radius: calc(var(--how-base) * var(--how-panel-radius-ratio));

  background: #ffffff;

  box-shadow:
    0 calc(var(--how-base) * 0.055)
    calc(var(--how-base) * 0.14)
    rgba(2, 6, 23, 0.25);

  display: flex;
  flex-direction: column;

  overflow: hidden;
}

#overlay .overlay-back-button,
#overlay .overlay-forward-button,
#text-tutorial-overlay .overlay-back-button,
#text-tutorial-overlay .overlay-forward-button,
#feedback-overlay .overlay-back-button,
#share-overlay .overlay-back-button {
  width: calc(var(--how-base) * var(--how-arrow-size-ratio));
  height: calc(var(--how-base) * var(--how-arrow-size-ratio));

  top: calc(var(--how-base) * var(--how-arrow-top-ratio));

  font-size: calc(var(--how-base) * var(--how-arrow-font-ratio));
  line-height: 1;

  padding: 0;

  border: 0;
  background: transparent;
  box-shadow: none;

  color: #0f172a;

  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#overlay .overlay-back-button,
#text-tutorial-overlay .overlay-back-button,
#feedback-overlay .overlay-back-button,
#share-overlay .overlay-back-button {
  left: calc(var(--how-base) * var(--how-arrow-side-ratio));
}

#overlay .overlay-forward-button,
#text-tutorial-overlay .overlay-forward-button {
  right: calc(var(--how-base) * var(--how-arrow-side-ratio));
}

#overlay .howto-body {
  display: flex;
  flex-direction: column;
  align-items: center;

  min-height: 0;
}

#overlay .howto-gif-wrap {
  width: 100%;

  margin-top: 0;
  margin-bottom: calc(var(--how-base) * 0.03);

  display: flex;
  justify-content: center;
  align-items: center;

  flex: 0 0 auto;

  background: transparent;
}

#overlay .howto-gif {
  display: block;

  width: calc(var(--how-base) * var(--how-gif-width-ratio));
  max-width: 100%;
  height: auto;

  background: #ffffff;
  border-radius: calc(var(--how-base) * var(--how-gif-radius-ratio));
}

#overlay .howto-good-luck {
  display: block;

  margin-top: calc(var(--how-base) * var(--how-good-luck-margin-top-ratio));
  margin-bottom: 0;

  font-size: calc(var(--how-base) * var(--how-good-luck-font-ratio));
  line-height: var(--how-text-line-height);
  font-weight: 800;

  text-align: center;
}

#text-tutorial-overlay .howto-scroll {
  flex: 1 1 auto;
  min-height: 0;

  overflow: auto;

  padding-top: calc(var(--how-base) * 0.015);
  padding-bottom: calc(var(--how-base) * 0.015);
  padding-left: calc(var(--how-base) * 0.02);
  padding-right: calc(var(--how-base) * 0.02);
}

#text-tutorial-overlay .rules {
  margin: 0;
  padding-left: calc(var(--how-base) * var(--how-rules-padding-left-ratio));

  font-size: calc(var(--how-base) * var(--how-text-font-ratio));
  line-height: var(--how-text-line-height);
  font-weight: 500;

  color: #334155;
}

#text-tutorial-overlay .rules li {
  margin-bottom: calc(var(--how-base) * var(--how-rules-gap-ratio));
}

#text-tutorial-overlay .rules li:last-child {
  margin-bottom: 0;
}

#text-tutorial-overlay .note {
  font-size: calc(var(--how-base) * var(--how-text-font-ratio));
  line-height: var(--how-text-line-height);

  margin-top: calc(var(--how-base) * 0.025);
  margin-bottom: 0;

  color: #475569;
}

:root {
  --ui-base: var(--visible-board-width, var(--play-area-width));

  --topbar-pad-inline-ratio: 0;
  --main-pad-inline-ratio: 0.037;
  --main-pad-bottom-ratio: 0.064;
  --body-bottom-pad-ratio: 0.018;

  --topbar-pad-inline: calc(var(--ui-base) * var(--topbar-pad-inline-ratio));
  --main-pad-inline: calc(var(--ui-base) * var(--main-pad-inline-ratio));
  --main-pad-bottom: calc(var(--ui-base) * var(--main-pad-bottom-ratio));
  --body-bottom-pad: calc(var(--ui-base) * var(--body-bottom-pad-ratio));

  --ui-focus-outline-ratio: 0.006;
  --ui-focus-offset-ratio: 0.007;
  --ui-active-ring-inner-ratio: 0.005;
  --ui-active-ring-outer-ratio: 0.016;

  --ui-focus-outline-width: calc(var(--ui-base) * var(--ui-focus-outline-ratio));
  --ui-focus-outline-offset: calc(var(--ui-base) * var(--ui-focus-offset-ratio));
  --ui-active-ring-inner: calc(var(--ui-base) * var(--ui-active-ring-inner-ratio));
  --ui-active-ring-outer: calc(var(--ui-base) * var(--ui-active-ring-outer-ratio));

  --howto-highlight-width-ratio: 0.009;
  --howto-highlight-glow-ratio: 0.041;

  --howto-highlight-width: calc(var(--ui-base) * var(--howto-highlight-width-ratio));
  --howto-highlight-glow:
    0 0 calc(var(--ui-base) * var(--howto-highlight-glow-ratio))
    rgba(255, 31, 31, 0.45);
  }

body {
  padding-bottom: var(--body-bottom-pad);
}

.topbar.logo-only {
  padding:
    var(--logo-row-top-gap)
    var(--topbar-pad-inline)
    0
    var(--topbar-pad-inline);
}

.main {
  padding:
    0
    var(--main-pad-inline)
    var(--main-pad-bottom);
}

.grid {
  --tile-visual-base: var(--cell-size, calc(var(--ui-base) / 6));

  --grid-gap-ratio: 0.018;
  --grid-radius-ratio: 0.037;
  --grid-shadow-y-ratio: 0.046;
  --grid-shadow-blur-ratio: 0.092;

  --tile-sel-glow-ratio: 0.16;
  --tile-bleed-ratio: 0.005;

  --gap: calc(var(--ui-base) * var(--grid-gap-ratio));
  --sel-glow-size: calc(var(--tile-visual-base) * var(--tile-sel-glow-ratio));
  --bleed: calc(var(--tile-visual-base) * var(--tile-bleed-ratio));

  border-radius: calc(var(--ui-base) * var(--grid-radius-ratio));

  box-shadow:
    0 calc(var(--ui-base) * var(--grid-shadow-y-ratio))
    calc(var(--ui-base) * var(--grid-shadow-blur-ratio))
    rgba(2, 6, 23, 0.08),
    inset 0 0 0 calc(var(--ui-base) * 0.0023)
    rgba(2, 6, 23, 0.06);
}

.grid[data-style="neon"],
.grid[data-style="neonwire"],
.grid[data-style="jelly"],
.grid[data-style="rubber"] {
  --tile-sel-glow-ratio: 0.22;
}
.grid.grid[data-style] {
  --gap: calc(var(--ui-base) * var(--grid-gap-ratio));
}

.grid .cell::before {
  --tile-radius-ratio: 0.12;
  --tile-shadow-y-1-ratio: 0.14;
  --tile-shadow-blur-1-ratio: 0.24;
  --tile-shadow-y-2-ratio: 0.04;
  --tile-shadow-blur-2-ratio: 0.10;

  border-radius: calc(var(--tile-visual-base) * var(--tile-radius-ratio));

  box-shadow:
    0 calc(var(--tile-visual-base) * var(--tile-shadow-y-1-ratio))
    calc(var(--tile-visual-base) * var(--tile-shadow-blur-1-ratio))
    rgba(2, 6, 23, 0.18),
    0 calc(var(--tile-visual-base) * var(--tile-shadow-y-2-ratio))
    calc(var(--tile-visual-base) * var(--tile-shadow-blur-2-ratio))
    rgba(2, 6, 23, 0.14),
    inset 0 calc(var(--tile-visual-base) * 0.01) 0
    rgba(255, 255, 255, 0.45),
    inset 0 calc(var(--tile-visual-base) * -0.01) 0
    rgba(0, 0, 0, 0.08);
}

.grid .cell::after {
  --tile-highlight-x-ratio: 0.06;
  --tile-highlight-top-ratio: 0.03;
  --tile-highlight-height-ratio: 0.18;
  --tile-highlight-radius-ratio: 0.10;

  left: calc(var(--inset) + var(--tile-visual-base) * var(--tile-highlight-x-ratio));
  right: calc(var(--inset) + var(--tile-visual-base) * var(--tile-highlight-x-ratio));
  top: calc(var(--inset) + var(--tile-visual-base) * var(--tile-highlight-top-ratio));

  height: calc(var(--tile-visual-base) * var(--tile-highlight-height-ratio));
  border-radius: calc(var(--tile-visual-base) * var(--tile-highlight-radius-ratio));
}
  
.bottom-capsule-button:focus-visible,
.rotate-btn:focus-visible,
.button:focus-visible,
.icon-button:focus-visible,
.pattern-button:focus-visible,
.pattern-btn:focus-visible,
.style-btn:focus-visible {
  outline: var(--ui-focus-outline-width) solid #93c5fd;
  outline-offset: var(--ui-focus-outline-offset);
}

.pattern-btn.is-active,
.style-btn.is-active {
  box-shadow:
    0 0 0 var(--ui-active-ring-inner) #fff,
    0 0 0 var(--ui-active-ring-outer) rgba(59, 130, 246, 0.35);
}

:root {
  --chooser-panel-padding-ratio: 0.045;
  --chooser-panel-gap-ratio: 0.03;

  --chooser-list-width-ratio: 1;

  --chooser-panel-width:
    calc(
      var(--chooser-text-base)
      * var(--chooser-list-width-ratio)
    );

  --chooser-back-side-inset:
    calc(var(--chooser-text-base) * 0.025);

      --chooser-back-x-adjust-ratio: 0;
  --chooser-back-y-adjust-ratio: 0.001;
  --chooser-header-y-adjust-ratio: -0.035;

  --chooser-preview-gap-ratio: 0.028;
  --chooser-list-padding-x-ratio: 0.023;
  --chooser-list-padding-y-ratio: 0.023;
    --chooser-preview-gap-ratio: 0.028;
  --chooser-list-padding-x-ratio: 0.023;
  --chooser-list-padding-y-ratio: 0.023;

  --chooser-preview-radius-ratio: 0.032;
  --chooser-preview-border-ratio: 0.0025;

  --chooser-style-card-padding-ratio: 0.022;
  --chooser-style-card-gap-ratio: 0.018;

  --chooser-mini-gap-ratio: 0.0025;
  --chooser-mini-radius-ratio: 0.018;

  --chooser-preview-gap: calc(var(--chooser-text-base) * var(--chooser-preview-gap-ratio));
  --chooser-list-padding-x: calc(var(--chooser-text-base) * var(--chooser-list-padding-x-ratio));
  --chooser-list-padding-y: calc(var(--chooser-text-base) * var(--chooser-list-padding-y-ratio));
}

#pattern-overlay .overlay-content,
#style-overlay .overlay-content {
  padding: calc(var(--chooser-text-base) * var(--chooser-panel-padding-ratio));
  gap: calc(var(--chooser-text-base) * var(--chooser-panel-gap-ratio));
}

#pattern-overlay .pattern-list,
#style-overlay .style-list {
  width: min(100%, var(--chooser-panel-width));
  max-width: min(100%, var(--chooser-panel-width));

  margin-inline: auto;

  grid-template-columns:
    repeat(var(--chooser-preview-columns, 3), minmax(0, 1fr));

  gap: var(--chooser-preview-gap);

  padding:
    var(--chooser-list-padding-y)
    var(--chooser-list-padding-x);
}

#pattern-overlay .pattern-btn,
#style-overlay .style-btn {
  border-radius: calc(var(--chooser-text-base) * var(--chooser-preview-radius-ratio));
  border-width: calc(var(--chooser-text-base) * var(--chooser-preview-border-ratio));
}

#style-overlay .style-btn {
  padding: calc(var(--chooser-text-base) * var(--chooser-style-card-padding-ratio));
  gap: calc(var(--chooser-text-base) * var(--chooser-style-card-gap-ratio));
}

#pattern-overlay .pattern-btn .swatch,
#style-overlay .style-btn .swatch {
  border-radius: calc(var(--chooser-text-base) * var(--chooser-mini-radius-ratio));
  box-shadow:
    inset 0 0 0
    calc(var(--chooser-text-base) * var(--chooser-preview-border-ratio))
    rgba(0, 0, 0, 0.12);
}

#style-overlay .style-btn .swatch {
  gap: calc(var(--chooser-text-base) * var(--chooser-mini-gap-ratio));
  --gap: calc(var(--chooser-text-base) * var(--chooser-mini-gap-ratio));
}

#overlay .overlay-back-button:focus-visible,
#overlay .overlay-forward-button:focus-visible,
#text-tutorial-overlay .overlay-back-button:focus-visible,
#text-tutorial-overlay .overlay-forward-button:focus-visible,
#pattern-overlay .overlay-back-button:focus-visible,
#pattern-overlay .overlay-forward-button:focus-visible,
#style-overlay .overlay-back-button:focus-visible,
#style-overlay .overlay-forward-button:focus-visible {
  outline: calc(var(--ui-base) * 0.006) solid #60a5fa;
  outline-offset: calc(var(--ui-base) * 0.007);
  border-radius: calc(var(--ui-base) * 0.018);
}

:root {
  --confirm-y-adjust-ratio: 0;
  --how-panel-y-adjust-ratio: 0;

  --confirm-y-adjust: calc(var(--confirm-base) * var(--confirm-y-adjust-ratio));
  --how-panel-y-adjust: calc(var(--how-base) * var(--how-panel-y-adjust-ratio));
}

.grid {
  
  --theme-line-thin: calc(var(--tile-visual-base) * 0.012);
  --theme-line-medium: calc(var(--tile-visual-base) * 0.024);
  --theme-line-strong: calc(var(--tile-visual-base) * 0.036);

  --theme-radius-small: calc(var(--tile-visual-base) * 0.07);
  --theme-radius-medium: calc(var(--tile-visual-base) * 0.12);
  --theme-radius-large: calc(var(--tile-visual-base) * 0.20);

  --theme-shadow-y-small: calc(var(--tile-visual-base) * 0.06);
  --theme-shadow-y-medium: calc(var(--tile-visual-base) * 0.12);
  --theme-shadow-y-large: calc(var(--tile-visual-base) * 0.20);

  --theme-shadow-blur-small: calc(var(--tile-visual-base) * 0.12);
  --theme-shadow-blur-medium: calc(var(--tile-visual-base) * 0.22);
  --theme-shadow-blur-large: calc(var(--tile-visual-base) * 0.38);

  --theme-glow-small: calc(var(--tile-visual-base) * 0.12);
  --theme-glow-medium: calc(var(--tile-visual-base) * 0.24);
  --theme-glow-large: calc(var(--tile-visual-base) * 0.42);

  --theme-lift-small: calc(var(--tile-visual-base) * -0.012);
  --theme-lift-medium: calc(var(--tile-visual-base) * -0.02);

  --theme-blur-small: calc(var(--tile-visual-base) * 0.025);
  --theme-blur-medium: calc(var(--tile-visual-base) * 0.065);
}

.grid.grid[data-style] .slot {
  box-shadow:
    0 0 0 1px rgba(2, 6, 23, 0.08),

    inset 0 0 0 var(--theme-line-thin)
    rgba(2, 6, 23, 0.08);
}

.grid.grid[data-style] .cell::before {
  border-width: 0;
  border-radius: var(--theme-radius-medium);

  box-shadow:
    0 var(--theme-shadow-y-medium)
    var(--theme-shadow-blur-medium)
    rgba(2, 6, 23, 0.16),
    inset 0 var(--theme-line-thin) 0
    rgba(255, 255, 255, 0.55),
    inset 0 calc(var(--theme-line-thin) * -1) 0
    rgba(0, 0, 0, 0.10);
}

.grid.grid[data-style] .cell.selected::before {
  border: var(--theme-line-medium) solid
    color-mix(in oklab, var(--tile-color), white 20%);

  box-shadow:
    0 var(--theme-shadow-y-large)
    var(--theme-shadow-blur-large)
    rgba(2, 6, 23, 0.24),
    0 0 0 var(--theme-line-strong)
    color-mix(in oklab, var(--tile-color) 46%, transparent),
    0 0 var(--theme-glow-medium)
    color-mix(in oklab, var(--tile-color) 54%, transparent),
    inset 0 var(--theme-line-thin) 0
    rgba(255, 255, 255, 0.70);
}

.grid.grid[data-style="flat"] .cell::before {
  border-radius: var(--theme-radius-small);

  box-shadow:
    0 0 0 var(--theme-line-thin)
    rgba(2, 6, 23, 0.16);
}

.grid.grid[data-style="flat"] .cell.selected::before {
  border: var(--theme-line-medium) solid
    color-mix(in oklab, var(--tile-color), white 16%);

  box-shadow:
    0 0 0 var(--theme-line-strong)
    color-mix(in oklab, var(--tile-color) 48%, transparent),
    0 0 var(--theme-glow-medium)
    color-mix(in oklab, var(--tile-color) 42%, transparent);
}

.grid.grid[data-style="neon"] .cell::before,
.grid.grid[data-style="neonwire"] .cell::before {
  border-radius: var(--theme-radius-medium);

  box-shadow:
    0 0 var(--theme-glow-small)
    color-mix(in srgb, var(--tile-color) 55%, transparent),
    inset 0 0 0 var(--theme-line-thin)
    color-mix(in srgb, var(--tile-color) 60%, white 10%);
}

/* Bright Neon.
   Keep the current responsive tile geometry,
   but restore the stronger glow of the original desktop style. */

.grid.grid[data-style="neonwire"] .cell::before {
  box-shadow:
    0 0 calc(var(--tile-visual-base) * 0.30)
      color-mix(in srgb, var(--tile-color) 60%, transparent),
    0 0 calc(var(--tile-visual-base) * 0.14)
      color-mix(in srgb, var(--tile-color) 50%, transparent),
    inset 0 0 0 calc(var(--tile-visual-base) * 0.028)
      color-mix(in srgb, var(--tile-color) 70%, #fff);
}

.grid.grid[data-style="neonwire"] .cell.selected::before {
  box-shadow:
    0 0 0 var(--theme-line-thin)
      rgba(0, 0, 0, 0.24),
    0 0 var(--theme-glow-small)
      var(--tile-color),
    0 0 var(--theme-glow-medium)
      var(--tile-color),
    0 0 var(--theme-glow-large)
      var(--tile-color);
}

.grid.grid[data-style="neon"] .cell.selected::before,
.grid.grid[data-style="neonwire"] .cell.selected::before {
  border: var(--theme-line-thin) solid
    color-mix(in srgb, var(--tile-color) 70%, white 20%);

  box-shadow:
    0 0 var(--theme-glow-small)
    color-mix(in srgb, var(--tile-color) 70%, transparent),
    0 0 var(--theme-glow-medium)
    color-mix(in srgb, var(--tile-color) 58%, transparent),
    0 0 var(--theme-glow-large)
    color-mix(in srgb, var(--tile-color) 44%, transparent);
}

.grid.grid[data-style="glass"] .cell::before {
  border: var(--theme-line-medium) solid rgba(255, 255, 255, 0.6);
  border-radius: var(--theme-radius-medium);
  backdrop-filter: blur(var(--theme-blur-medium)) saturate(140%);

  box-shadow:
    0 var(--theme-shadow-y-medium)
    var(--theme-shadow-blur-medium)
    rgba(2, 6, 23, 0.18),
    inset 0 var(--theme-line-thin) 0
    rgba(255, 255, 255, 0.7);
}

.grid.grid[data-style="glass"] .cell.selected::before {
  border-width: var(--theme-line-medium);

  box-shadow:
    0 var(--theme-shadow-y-large)
    var(--theme-shadow-blur-large)
    rgba(2, 6, 23, 0.22),
    0 0 0 var(--theme-line-strong)
    color-mix(in oklab, var(--tile-color) 55%, transparent),
    inset 0 var(--theme-line-thin) 0
    rgba(255, 255, 255, 0.9);
}

.grid.grid[data-style="retro"] .cell::before,
.grid.grid[data-style="shadowbox"] .cell::before {
  border-radius: var(--theme-radius-small);

  box-shadow:
    0 calc(var(--tile-visual-base) * 0.06) 0
    rgba(2, 6, 23, 0.18),
    0 var(--theme-shadow-y-medium)
    var(--theme-shadow-blur-medium)
    rgba(2, 6, 23, 0.16),
    inset 0 var(--theme-line-thin) 0
    rgba(255, 255, 255, 0.65);
}

.grid.grid[data-style="gold"] .cell::before {
  border-radius: var(--theme-radius-medium);

  box-shadow:
    0 calc(var(--tile-visual-base) * 0.10) 0
    rgba(180, 83, 9, 0.35),
    0 var(--theme-shadow-y-large)
    var(--theme-shadow-blur-large)
    rgba(180, 83, 9, 0.25),
    inset 0 var(--theme-line-medium) 0
    rgba(255, 255, 255, 0.8);
}

.grid.grid[data-style="gold"] .cell.selected::before {
  border-width: var(--theme-line-medium);

  box-shadow:
    0 0 0 var(--theme-line-strong)
    color-mix(in oklab, var(--tile-color) 50%, transparent),
    0 calc(var(--tile-visual-base) * 0.10) 0
    rgba(180, 83, 9, 0.40),
    0 var(--theme-shadow-y-large)
    var(--theme-shadow-blur-large)
    rgba(180, 83, 9, 0.30);
}

.grid.grid[data-style="pearl"] .cell::before,
.grid.grid[data-style="bubble"] .cell::before,
.grid.grid[data-style="flower"] .cell::before {
  border-radius: 50%;

  box-shadow:
    0 var(--theme-shadow-y-large)
    var(--theme-shadow-blur-large)
    rgba(2, 6, 23, 0.17),
    inset 0 var(--theme-line-thin) 0
    rgba(255, 255, 255, 0.9);
}

.grid.grid[data-style="pearl"] .cell.selected::before,
.grid.grid[data-style="bubble"] .cell.selected::before,
.grid.grid[data-style="flower"] .cell.selected::before {
  border-width: var(--theme-line-strong);

  box-shadow:
    0 var(--theme-shadow-y-large)
    var(--theme-shadow-blur-large)
    rgba(2, 6, 23, 0.22),
    0 0 0 var(--theme-line-strong)
    color-mix(in oklab, var(--tile-color) 42%, transparent),
    inset 0 var(--theme-line-thin) 0
    rgba(255, 255, 255, 0.9);
}

.grid.grid[data-style="rubber"] .cell::before,
.grid.grid[data-style="jelly"] .cell::before {
  border-radius: var(--theme-radius-large);

  box-shadow:
    0 var(--theme-shadow-y-large)
    var(--theme-shadow-blur-large)
    rgba(0, 0, 0, 0.48),
    inset 0 calc(var(--tile-visual-base) * -0.06)
    calc(var(--tile-visual-base) * 0.16)
    rgba(0, 0, 0, 0.30),
    inset 0 var(--theme-line-medium) 0
    rgba(255, 255, 255, 0.22);
}

.grid.grid[data-style="jelly"] .cell.selected::before,
.grid.grid[data-style="rubber"] .cell.selected::before {
  border-width: var(--theme-line-strong);

  box-shadow:
    0 var(--theme-shadow-y-large)
    var(--theme-shadow-blur-large)
    rgba(0, 0, 0, 0.55),
    0 0 var(--theme-glow-medium)
    color-mix(in srgb, var(--tile-color) 48%, transparent),
    inset 0 calc(var(--tile-visual-base) * -0.06)
    calc(var(--tile-visual-base) * 0.16)
    rgba(0, 0, 0, 0.30);
}

.grid.grid[data-style="marble"] .cell::before,
.grid.grid[data-style="stone"] .cell::before,
.grid.grid[data-style="leather"] .cell::before,
.grid.grid[data-style="fabric"] .cell::before,
.grid.grid[data-style="graffiti"] .cell::before {
  border-radius: var(--theme-radius-medium);

  box-shadow:
    0 var(--theme-shadow-y-medium)
    var(--theme-shadow-blur-medium)
    rgba(2, 6, 23, 0.17),
    inset 0 var(--theme-line-thin) 0
    rgba(255, 255, 255, 0.60);
}

.grid.grid[data-style="marble"] .cell.selected::before,
.grid.grid[data-style="stone"] .cell.selected::before,
.grid.grid[data-style="leather"] .cell.selected::before,
.grid.grid[data-style="fabric"] .cell.selected::before,
.grid.grid[data-style="graffiti"] .cell.selected::before {
  border-width: var(--theme-line-medium);

  box-shadow:
    0 var(--theme-shadow-y-large)
    var(--theme-shadow-blur-large)
    rgba(2, 6, 23, 0.23),
    0 0 0 var(--theme-line-strong)
    color-mix(in oklab, var(--tile-color) 45%, transparent),
    inset 0 var(--theme-line-thin) 0
    rgba(255, 255, 255, 0.75);
}

.grid.grid[data-style="bubble"] .cell::after {
  height: calc(var(--tile-visual-base) * 0.22);
}

.grid.grid[data-style="graffiti"] .cell::before {
  background:
    radial-gradient(
      calc(var(--tile-visual-base) * 0.40)
      calc(var(--tile-visual-base) * 0.40)
      at 20% 20%,
      rgba(255, 255, 255, 0.4),
      transparent 60%
    ),
    conic-gradient(
      from 45deg,
      color-mix(in srgb, var(--tile-color) 80%, #fff),
      color-mix(in srgb, var(--tile-color) 60%, #000)
    );
}

.grid.grid[data-style="leather"] .cell::before {
  background:
    radial-gradient(
      calc(var(--tile-visual-base) * 0.012)
      calc(var(--tile-visual-base) * 0.012)
      at calc(var(--tile-visual-base) * 0.025)
      calc(var(--tile-visual-base) * 0.025),
      rgba(0, 0, 0, 0.08) 0 50%,
      transparent 51%
    )
    0 0 /
    calc(var(--tile-visual-base) * 0.07)
    calc(var(--tile-visual-base) * 0.07),
    color-mix(in srgb, var(--tile-color) 70%, #7c2d12);
}

.grid.grid[data-style="fabric"] .cell::before {
  background:
    repeating-linear-gradient(
      0deg,
      color-mix(in srgb, var(--tile-color) 80%, #fff) 0
      calc(var(--tile-visual-base) * 0.024),
      color-mix(in srgb, var(--tile-color) 70%, #ddd)
      calc(var(--tile-visual-base) * 0.024)
      calc(var(--tile-visual-base) * 0.048)
    ),
    repeating-linear-gradient(
      90deg,
      transparent 0
      calc(var(--tile-visual-base) * 0.024),
      rgba(255, 255, 255, 0.2)
      calc(var(--tile-visual-base) * 0.024)
      calc(var(--tile-visual-base) * 0.048)
    );
}

:root {
  --theme-line-thin-ratio: 0.012;
  --theme-line-medium-ratio: 0.024;
  --theme-line-strong-ratio: 0.036;

  --theme-radius-small-ratio: 0.07;
  --theme-radius-medium-ratio: 0.12;
  --theme-radius-large-ratio: 0.20;

  --theme-shadow-y-small-ratio: 0.06;
  --theme-shadow-y-medium-ratio: 0.12;
  --theme-shadow-y-large-ratio: 0.20;

  --theme-shadow-blur-small-ratio: 0.12;
  --theme-shadow-blur-medium-ratio: 0.22;
  --theme-shadow-blur-large-ratio: 0.38;

  --theme-glow-small-ratio: 0.12;
  --theme-glow-medium-ratio: 0.24;
  --theme-glow-large-ratio: 0.42;

  --theme-lift-small-ratio: -0.012;
  --theme-lift-medium-ratio: -0.02;

  --theme-blur-small-ratio: 0.025;
  --theme-blur-medium-ratio: 0.065;
}

.grid,
#style-overlay .style-btn .swatch {
  --theme-line-thin: calc(var(--tile-visual-base) * var(--theme-line-thin-ratio));
  --theme-line-medium: calc(var(--tile-visual-base) * var(--theme-line-medium-ratio));
  --theme-line-strong: calc(var(--tile-visual-base) * var(--theme-line-strong-ratio));

  --theme-radius-small: calc(var(--tile-visual-base) * var(--theme-radius-small-ratio));
  --theme-radius-medium: calc(var(--tile-visual-base) * var(--theme-radius-medium-ratio));
  --theme-radius-large: calc(var(--tile-visual-base) * var(--theme-radius-large-ratio));

  --theme-shadow-y-small: calc(var(--tile-visual-base) * var(--theme-shadow-y-small-ratio));
  --theme-shadow-y-medium: calc(var(--tile-visual-base) * var(--theme-shadow-y-medium-ratio));
  --theme-shadow-y-large: calc(var(--tile-visual-base) * var(--theme-shadow-y-large-ratio));

  --theme-shadow-blur-small: calc(var(--tile-visual-base) * var(--theme-shadow-blur-small-ratio));
  --theme-shadow-blur-medium: calc(var(--tile-visual-base) * var(--theme-shadow-blur-medium-ratio));
  --theme-shadow-blur-large: calc(var(--tile-visual-base) * var(--theme-shadow-blur-large-ratio));

  --theme-glow-small: calc(var(--tile-visual-base) * var(--theme-glow-small-ratio));
  --theme-glow-medium: calc(var(--tile-visual-base) * var(--theme-glow-medium-ratio));
  --theme-glow-large: calc(var(--tile-visual-base) * var(--theme-glow-large-ratio));

  --theme-lift-small: calc(var(--tile-visual-base) * var(--theme-lift-small-ratio));
  --theme-lift-medium: calc(var(--tile-visual-base) * var(--theme-lift-medium-ratio));

  --theme-blur-small: calc(var(--tile-visual-base) * var(--theme-blur-small-ratio));
  --theme-blur-medium: calc(var(--tile-visual-base) * var(--theme-blur-medium-ratio));
}

#style-overlay .style-btn {
  
  --style-preview-column-width:
    calc(
      (
        var(--chooser-text-base)
        - (var(--chooser-preview-gap) * 2)
        - (var(--chooser-list-padding-x) * 2)
      ) * 0.333333
    );

  --style-preview-swatch-size: calc(var(--style-preview-column-width) * 0.76);
  --style-preview-cell-size: calc(var(--style-preview-swatch-size) * 0.333333);
}

#style-overlay .style-btn .swatch {
  width: var(--style-preview-swatch-size);
  height: var(--style-preview-swatch-size);

  --tile-visual-base: var(--style-preview-cell-size);

  --tile-inset-frac: var(--game-tile-inset-frac, 0.14);

  --inset: calc(var(--tile-visual-base) * var(--tile-inset-frac));
  --bleed: calc(var(--tile-visual-base) * 0.005);

  --gap: calc(var(--tile-visual-base) * 0.018);
  gap: var(--gap);

  border-radius: calc(var(--style-preview-swatch-size) * 0.045);

  box-shadow:
    inset 0 0 0 var(--theme-line-thin)
    rgba(0, 0, 0, 0.12);
}

#style-overlay .style-btn .swatch .cell::before {
  transform: translate(0, 0) translateY(var(--lift, 0));
}

#style-overlay .style-btn .swatch .cell::after {
  transform: none;
}

#style-overlay .style-btn .swatch[data-style] .slot {
  box-shadow:
    inset 0 0 0 var(--theme-line-thin)
    rgba(2, 6, 23, 0.08);
}

#style-overlay .style-btn .swatch[data-style] .cell::before {
  border-width: 0;
  border-radius: var(--theme-radius-medium);

  box-shadow:
    0 var(--theme-shadow-y-medium)
    var(--theme-shadow-blur-medium)
    rgba(2, 6, 23, 0.16),
    inset 0 var(--theme-line-thin) 0
    rgba(255, 255, 255, 0.55),
    inset 0 calc(var(--theme-line-thin) * -1) 0
    rgba(0, 0, 0, 0.10);
}

#style-overlay .style-btn .swatch[data-style="flat"] .cell::before {
  border-radius: var(--theme-radius-small);

  box-shadow:
    0 0 0 var(--theme-line-thin)
    rgba(2, 6, 23, 0.16);
}

#style-overlay .style-btn .swatch[data-style="neon"] .cell::before,
#style-overlay .style-btn .swatch[data-style="neonwire"] .cell::before {
  border-radius: var(--theme-radius-medium);

  box-shadow:
    0 0 var(--theme-glow-small)
    color-mix(in srgb, var(--tile-color) 55%, transparent),
    inset 0 0 0 var(--theme-line-thin)
    color-mix(in srgb, var(--tile-color) 60%, white 10%);
}

#style-overlay .style-btn .swatch[data-style="glass"] .cell::before {
  border: var(--theme-line-medium) solid rgba(255, 255, 255, 0.6);
  border-radius: var(--theme-radius-medium);
  backdrop-filter: blur(var(--theme-blur-medium)) saturate(140%);

  box-shadow:
    0 var(--theme-shadow-y-medium)
    var(--theme-shadow-blur-medium)
    rgba(2, 6, 23, 0.18),
    inset 0 var(--theme-line-thin) 0
    rgba(255, 255, 255, 0.7);
}

#style-overlay .style-btn .swatch[data-style="retro"] .cell::before,
#style-overlay .style-btn .swatch[data-style="shadowbox"] .cell::before {
  border-radius: var(--theme-radius-small);

  box-shadow:
    0 calc(var(--tile-visual-base) * 0.06) 0
    rgba(2, 6, 23, 0.18),
    0 var(--theme-shadow-y-medium)
    var(--theme-shadow-blur-medium)
    rgba(2, 6, 23, 0.16),
    inset 0 var(--theme-line-thin) 0
    rgba(255, 255, 255, 0.65);
}

#style-overlay .style-btn .swatch[data-style="gold"] .cell::before {
  border-radius: var(--theme-radius-medium);

  box-shadow:
    0 calc(var(--tile-visual-base) * 0.10) 0
    rgba(180, 83, 9, 0.35),
    0 var(--theme-shadow-y-large)
    var(--theme-shadow-blur-large)
    rgba(180, 83, 9, 0.25),
    inset 0 var(--theme-line-medium) 0
    rgba(255, 255, 255, 0.8);
}

#style-overlay .style-btn .swatch[data-style="pearl"] .cell::before,
#style-overlay .style-btn .swatch[data-style="bubble"] .cell::before,
#style-overlay .style-btn .swatch[data-style="flower"] .cell::before {
  border-radius: 50%;

  box-shadow:
    0 var(--theme-shadow-y-large)
    var(--theme-shadow-blur-large)
    rgba(2, 6, 23, 0.17),
    inset 0 var(--theme-line-thin) 0
    rgba(255, 255, 255, 0.9);
}

#style-overlay .style-btn .swatch[data-style="rubber"] .cell::before,
#style-overlay .style-btn .swatch[data-style="jelly"] .cell::before {
  border-radius: var(--theme-radius-large);

  box-shadow:
    0 var(--theme-shadow-y-large)
    var(--theme-shadow-blur-large)
    rgba(0, 0, 0, 0.48),
    inset 0 calc(var(--tile-visual-base) * -0.06)
    calc(var(--tile-visual-base) * 0.16)
    rgba(0, 0, 0, 0.30),
    inset 0 var(--theme-line-medium) 0
    rgba(255, 255, 255, 0.22);
}

#style-overlay .style-btn .swatch[data-style="marble"] .cell::before,
#style-overlay .style-btn .swatch[data-style="stone"] .cell::before,
#style-overlay .style-btn .swatch[data-style="leather"] .cell::before,
#style-overlay .style-btn .swatch[data-style="fabric"] .cell::before,
#style-overlay .style-btn .swatch[data-style="graffiti"] .cell::before {
  border-radius: var(--theme-radius-medium);

  box-shadow:
    0 var(--theme-shadow-y-medium)
    var(--theme-shadow-blur-medium)
    rgba(2, 6, 23, 0.17),
    inset 0 var(--theme-line-thin) 0
    rgba(255, 255, 255, 0.60);
}

#style-overlay .style-btn .swatch[data-style="bubble"] .cell::after {
  height: calc(var(--tile-visual-base) * 0.22);
}

#style-overlay .style-btn .swatch[data-style="graffiti"] .cell::before {
  background:
    radial-gradient(
      calc(var(--tile-visual-base) * 0.40)
      calc(var(--tile-visual-base) * 0.40)
      at 20% 20%,
      rgba(255, 255, 255, 0.4),
      transparent 60%
    ),
    conic-gradient(
      from 45deg,
      color-mix(in srgb, var(--tile-color) 80%, #fff),
      color-mix(in srgb, var(--tile-color) 60%, #000)
    );
}

#style-overlay .style-btn .swatch[data-style="leather"] .cell::before {
  background:
    radial-gradient(
      calc(var(--tile-visual-base) * 0.012)
      calc(var(--tile-visual-base) * 0.012)
      at calc(var(--tile-visual-base) * 0.025)
      calc(var(--tile-visual-base) * 0.025),
      rgba(0, 0, 0, 0.08) 0 50%,
      transparent 51%
    )
    0 0 /
    calc(var(--tile-visual-base) * 0.07)
    calc(var(--tile-visual-base) * 0.07),
    color-mix(in srgb, var(--tile-color) 70%, #7c2d12);
}

#style-overlay .style-btn .swatch[data-style="fabric"] .cell::before {
  background:
    repeating-linear-gradient(
      0deg,
      color-mix(in srgb, var(--tile-color) 80%, #fff) 0
      calc(var(--tile-visual-base) * 0.024),
      color-mix(in srgb, var(--tile-color) 70%, #ddd)
      calc(var(--tile-visual-base) * 0.024)
      calc(var(--tile-visual-base) * 0.048)
    ),
    repeating-linear-gradient(
      90deg,
      transparent 0
      calc(var(--tile-visual-base) * 0.024),
      rgba(255, 255, 255, 0.2)
      calc(var(--tile-visual-base) * 0.024)
      calc(var(--tile-visual-base) * 0.048)
    );
}

.moves.is-solved:focus-visible {
  outline: calc(var(--game-text-base) * 0.006) solid #60a5fa;
  outline-offset: calc(var(--game-text-base) * 0.014);
  border-radius: calc(var(--game-text-base) * 0.018);
}

:root {
  --ui-press-nudge: calc(var(--ui-base) * 0.0023);

  --rotate-shadow-y: calc(var(--ui-base) * 0.018);
  --rotate-shadow-blur: calc(var(--ui-base) * 0.037);

  --rotate-hover-shadow-y: calc(var(--ui-base) * 0.028);
  --rotate-hover-shadow-blur: calc(var(--ui-base) * 0.055);

  --rotate-icon-shadow-y: calc(var(--ui-base) * 0.0023);
  --rotate-icon-shadow-blur: calc(var(--ui-base) * 0.0046);
}

.button:active,
.pattern-button:active,
.pattern-btn:active,
.style-btn:active,
.bottom-capsule-button:active {
  transform: translateY(var(--ui-press-nudge));
}

.rotate-btn {
  box-shadow:
    0 var(--rotate-shadow-y)
    var(--rotate-shadow-blur)
    rgba(37, 99, 235, 0.25),
    inset 0 var(--ui-focus-outline-width) 0
    rgba(255, 255, 255, 0.6),
    inset 0 calc(var(--ui-focus-outline-width) * -1) 0
    rgba(0, 0, 0, 0.12);
}

.rotate-btn:hover {
  transform: translateY(0) scale(1.02);

  box-shadow:
    0 var(--rotate-hover-shadow-y)
    var(--rotate-hover-shadow-blur)
    rgba(37, 99, 235, 0.3),
    inset 0 var(--ui-focus-outline-width) 0
    rgba(255, 255, 255, 0.7),
    inset 0 calc(var(--ui-focus-outline-width) * -1) 0
    rgba(0, 0, 0, 0.14);
}

.rotate-btn:active {
  transform: scale(0.98);
}

.rotate-btn i {
  filter:
    drop-shadow(
      0
      var(--rotate-icon-shadow-y)
      var(--rotate-icon-shadow-blur)
      rgba(0, 0, 0, 0.25)
    );
}

.grid .cell::after,
#style-overlay .style-btn .swatch .cell::after {
  --tile-highlight-x-ratio: 0.06;
  --tile-highlight-top-ratio: 0.03;
  --tile-highlight-height-ratio: 0.18;
  --tile-highlight-radius-ratio: 0.10;

  left: calc(var(--inset) + var(--tile-visual-base) * var(--tile-highlight-x-ratio));
  right: calc(var(--inset) + var(--tile-visual-base) * var(--tile-highlight-x-ratio));
  top: calc(var(--inset) + var(--tile-visual-base) * var(--tile-highlight-top-ratio));

  height: calc(var(--tile-visual-base) * var(--tile-highlight-height-ratio));
  border-radius: calc(var(--tile-visual-base) * var(--tile-highlight-radius-ratio));

  opacity: 0.7;
  transform: none;
}

.grid.grid[data-style="glass"] .cell::after,
#style-overlay .style-btn .swatch[data-style="glass"] .cell::after {
  left: 0;
  right: auto;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  opacity: 0.9;
}

.grid.grid[data-style="bubble"] .cell::after,
#style-overlay .style-btn .swatch[data-style="bubble"] .cell::after {
  height: calc(var(--tile-visual-base) * 0.22);
}
#feedback-overlay .feedback-body {
  display: flex;
  flex-direction: column;
  align-items: center;

  gap: calc(var(--how-base) * 0.04);
  padding:
    calc(var(--how-base) * 0.03)
    0
    calc(var(--how-base) * 0.025);
}

#feedback-overlay .feedback-text {
  margin: 0;

  font-size: calc(var(--how-base) * 0.042);
  line-height: 1.25;
  font-weight: 700;

  color: #334155;
  text-align: center;
}

#feedback-overlay .feedback-actions {
  --bottom-btn-height: calc(var(--how-base) * var(--bottom-btn-height-ratio));
  --bottom-icon-width: var(--bottom-btn-height);
  --bottom-text-width: 100%;
  --bottom-text-font-size: calc(var(--bottom-btn-height) * var(--bottom-text-font-ratio));
  --bottom-border-width: calc(var(--bottom-btn-height) * var(--bottom-border-ratio));
  --bottom-btn-radius: 999px;

  --bottom-new-color: var(--c2);
  --bottom-how-color: #ff9f1c;

  width: min(100%, calc(var(--how-base) * 0.72));

  display: flex;
  flex-direction: column;
  align-items: stretch;

  gap: calc(var(--how-base) * 0.03);
}

#feedback-overlay .feedback-action-button {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}
#feedback-overlay .feedback-action-button.bottom-capsule-text {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}
#share-overlay .feedback-share-body {
  display: flex;
  justify-content: center;
  align-items: center;

  padding:
    calc(var(--how-base) * 0.04)
    0
    calc(var(--how-base) * 0.03);
}

#share-overlay .feedback-share-buttons {
  width: min(100%, calc(var(--how-base) * 0.72));

  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: calc(var(--how-base) * 0.035);

  justify-items: center;
  align-items: center;
}

#share-overlay .share-buttons a {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: calc(var(--how-base) * 0.12);
  height: calc(var(--how-base) * 0.12);

  border-radius: 50%;

  color: #ffffff;
  text-decoration: none;

  font-size: calc(var(--how-base) * 0.055);

  transition: opacity 0.2s ease, transform 0.08s ease;
}

#share-overlay .share-buttons a:hover {
  opacity: 0.85;
}

#share-overlay .share-buttons a:active {
  transform: scale(0.97);
}

#share-overlay .share-buttons a:focus-visible {
  outline: 3px solid #93c5fd;
  outline-offset: 3px;
}

#share-overlay .share-buttons .facebook {
  background: #3b5998;
}

#share-overlay .share-buttons .twitter {
  background: #000000;
}

#share-overlay .share-buttons .linkedin {
  background: #0077b5;
}

#share-overlay .share-buttons .pinterest {
  background: #bd081c;
}

#share-overlay .share-buttons .reddit {
  background: #ff4500;
}

#share-overlay .share-buttons .whatsapp {
  background: #25d366;
}

#share-overlay .share-buttons .telegram {
  background: #0088cc;
}

#share-overlay .share-buttons .email {
  background: #666666;
}
#share-overlay .share-content {
  --share-copy-social-gap-ratio: 0.05;
  --share-copy-bottom-gap-ratio: 0.055;

  min-height: auto;
  padding-bottom: calc(var(--how-base) * var(--share-copy-bottom-gap-ratio));
}

#share-overlay .share-copy-link {
  position: static;
  align-self: center;

  margin-top: calc(var(--how-base) * var(--share-copy-social-gap-ratio));

  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: transparent;
  padding: 0;

  color: #0f172a;
  font-size: calc(var(--how-base) * 0.045);
  line-height: 1;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;

  cursor: pointer;

  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

#share-overlay .share-copy-link:hover {
  color: #0f172a;
}

#share-overlay .share-copy-link:active {
  transform: translateY(1px);
}

#share-overlay .share-copy-link:focus-visible {
  outline: 2px solid #60a5fa;
  outline-offset: 4px;
  border-radius: 6px;
}

#share-overlay .share-copy-link:hover {
  color: #0f172a;
}

#share-overlay .share-copy-link:active {
  transform: translateY(1px);
}

#share-overlay .share-copy-link:focus-visible {
  outline: 2px solid #60a5fa;
  outline-offset: 4px;
  border-radius: 6px;
}
#feedback-overlay #btn-feedback-mail {
  --bottom-btn-color: #22C55E;
}

#feedback-overlay #btn-feedback-share {
  --bottom-btn-color: #3B82F6;
}

#feedback-overlay #btn-feedback-privacy {
  --bottom-btn-color: #A855F7;
}

#feedback-overlay .feedback-close-button {
  margin-top: calc(var(--how-base) * 0.055);
  --bottom-btn-color: #FF9F1C;
}

.confetti-canvas {
  position: fixed;
  inset: 0;

  width: 100vw;
  height: 100dvh;

  pointer-events: none;
  z-index: 10050;

  display: block;
}

:root {
  
  --soft-press-scale: 0.98;

  --soft-press-y:
    clamp(
      1px,
      calc(var(--ui-base, 430px) * 0.0023),
      2px
    );

  --soft-press-duration: 85ms;

  --soft-press-saturation: 1.08;
  --soft-press-brightness: 0.97;
}

button:not(.overlay-back-button):not(.overlay-forward-button),
#share-overlay .share-buttons a {
  -webkit-tap-highlight-color: transparent;

  transform-origin: center;

  transition:
    transform var(--soft-press-duration) ease,
    filter var(--soft-press-duration) ease,
    background var(--soft-press-duration) ease,
    border-color var(--soft-press-duration) ease,
    box-shadow var(--soft-press-duration) ease;
}

button:not(.overlay-back-button):not(.overlay-forward-button):active,
#share-overlay .share-buttons a:active {
  transform:
    translateY(var(--soft-press-y))
    scale(var(--soft-press-scale));

  filter:
    saturate(var(--soft-press-saturation))
    brightness(var(--soft-press-brightness));
}

.bottom-capsule-button:active {
  background:
    color-mix(
      in oklab,
      var(--bottom-btn-color),
      white 78%
    );

  border-color:
    color-mix(
      in oklab,
      var(--bottom-btn-color),
      black 4%
    );

  box-shadow:
    0 1px 2px rgba(2, 6, 23, 0.05),
    inset 0 2px 4px rgba(2, 6, 23, 0.12);

  filter: none;
}

.rotate-btn:active {
  transform:
    translateY(var(--soft-press-y))
    scale(var(--soft-press-scale));

  filter:
    saturate(1.08)
    brightness(0.94);

  box-shadow:
    0 1px 3px rgba(37, 99, 235, 0.18),
    inset 0 2px 4px rgba(0, 0, 0, 0.20),
    inset 0 1px 0 rgba(255, 255, 255, 0.30);
}

.pattern-btn:active,
.style-btn:active {
  box-shadow:
    0 1px 2px rgba(2, 6, 23, 0.05),
    inset 0 2px 5px rgba(2, 6, 23, 0.13);
}

.button:not(.bottom-capsule-button):active,
.pattern-button:not(.bottom-capsule-button):active {
  box-shadow:
    0 1px 2px rgba(2, 6, 23, 0.05),
    inset 0 2px 4px rgba(2, 6, 23, 0.12);
}

#share-overlay .share-buttons a:active {
  opacity: 1;

  box-shadow:
    0 1px 2px rgba(2, 6, 23, 0.10),
    inset 0 2px 5px rgba(0, 0, 0, 0.22);
}

#share-overlay .share-copy-link {
  transition:
    transform var(--soft-press-duration) ease,
    filter var(--soft-press-duration) ease;
}

#share-overlay .share-copy-link:active {
  transform:
    translateY(var(--soft-press-y))
    scale(var(--soft-press-scale));

  filter: brightness(0.78);
}

@media (prefers-reduced-motion: reduce) {
  button:not(.overlay-back-button):not(.overlay-forward-button),
  #share-overlay .share-buttons a,
  #share-overlay .share-copy-link {
    transition: none;
  }
}

.board-wrap {
  
  --rotate-pastel-cyan: #22d3ee;

  --rotate-pastel-border-width:
    clamp(
      1px,
      calc(var(--rotate-btn-height) * 0.055),
      2px
    );

  --rotate-pastel-start:
    color-mix(
      in oklab,
      var(--rotate-pastel-cyan),
      white 90%
    );

  --rotate-pastel-end:
    color-mix(
      in oklab,
      var(--rotate-pastel-cyan),
      white 74%
    );

  --rotate-pastel-pressed-start:
    color-mix(
      in oklab,
      var(--rotate-pastel-cyan),
      white 82%
    );

  --rotate-pastel-pressed-end:
    color-mix(
      in oklab,
      var(--rotate-pastel-cyan),
      white 66%
    );
}

.rotate-btn {
  border:
    var(--rotate-pastel-border-width)
    solid
    color-mix(
      in oklab,
      var(--rotate-pastel-cyan),
      white 8%
    );

  border-radius: 999px;

  background:
    linear-gradient(
      145deg,
      var(--rotate-pastel-start),
      var(--rotate-pastel-end)
    );

  color: #334155;

  box-shadow:
    0
    calc(var(--rotate-btn-height) * 0.12)
    calc(var(--rotate-btn-height) * 0.27)
    rgba(2, 6, 23, 0.07),

    inset
    0
    var(--rotate-pastel-border-width)
    0
    rgba(255, 255, 255, 0.92);
}

.rotate-btn::before {
  display: none;
}

.rotate-btn:hover {
  transform: none;

  background:
    linear-gradient(
      145deg,
      var(--rotate-pastel-start),
      var(--rotate-pastel-end)
    );

  box-shadow:
    0
    calc(var(--rotate-btn-height) * 0.12)
    calc(var(--rotate-btn-height) * 0.27)
    rgba(2, 6, 23, 0.07),

    inset
    0
    var(--rotate-pastel-border-width)
    0
    rgba(255, 255, 255, 0.92);
}

.rotate-btn:active {
  transform:
    translateY(var(--soft-press-y))
    scale(var(--soft-press-scale));

  background:
    linear-gradient(
      145deg,
      var(--rotate-pastel-pressed-start),
      var(--rotate-pastel-pressed-end)
    );

  border-color:
    color-mix(
      in oklab,
      var(--rotate-pastel-cyan),
      black 4%
    );

  box-shadow:
    0 1px 2px rgba(2, 6, 23, 0.05),
    inset 0 2px 4px rgba(2, 6, 23, 0.12);

  filter: none;
}

.rotate-btn i {
  color: #334155;
  filter: none;
}

.rotate-btn:focus-visible {
  outline: none;

  box-shadow:
    0 0 0
    calc(var(--rotate-pastel-border-width) * 1.8)
    color-mix(
      in oklab,
      var(--rotate-pastel-cyan),
      white 68%
    ),

    0
    calc(var(--rotate-btn-height) * 0.12)
    calc(var(--rotate-btn-height) * 0.27)
    rgba(2, 6, 23, 0.07),

    inset
    0
    var(--rotate-pastel-border-width)
    0
    rgba(255, 255, 255, 0.92);
}

.rotate-btn:focus:not(:focus-visible) {
  outline: none;
}

#btn-rotate-left:hover,
#btn-rotate-right:hover {
  filter: none;

  background:
    linear-gradient(
      145deg,
      var(--rotate-pastel-start),
      var(--rotate-pastel-end)
    ) !important;

  border-color:
    color-mix(
      in oklab,
      var(--rotate-pastel-cyan),
      white 8%
    );
}

#btn-pattern .swatch {
  display: grid;

  grid-template-columns:
    repeat(var(--sw, 3), minmax(0, 1fr));

  grid-auto-rows: 1fr;

  gap:
    max(
      1px,
      calc(var(--bottom-swatch-size) * 0.055)
    );

  overflow: hidden;

  background-color: #e5e7eb;
}

#btn-pattern .swatch .sq {
  display: block;

  width: 100%;
  height: 100%;

  min-width: 0;
  min-height: 0;
}

#btn-pattern .swatch .pattern-swatch-image {
  display: none;
}

#style-overlay .style-btn .style-image-swatch {
  display: block;
  overflow: hidden;

  padding: 0;
  gap: 0;

  background: #e5e7eb;
}

#style-overlay .style-btn .style-preview-image {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center;
}

:root {
  
  --pattern-filter-base:
    var(
      --visible-board-width,
      var(--play-area-width)
    );
    
--pattern-filter-row-width-ratio: 0.9;

--pattern-filter-row-base:
  calc(
    var(--pattern-filter-base)
    * var(--pattern-filter-row-width-ratio)
  );

  --pattern-filter-height-ratio: 0.075;
  --pattern-filter-width-ratio: 0.126;
  --pattern-filter-font-ratio: 0.030;
  --pattern-filter-border-ratio: 0.003;

  --pattern-filter-side-padding-ratio: 0.023;
  --pattern-filter-horizontal-gap-ratio: 0.0396;

  --pattern-filter-title-gap-ratio: 0.060;
  
--pattern-filter-scroll-gap-ratio: 0.035;

--pattern-filter-preview-padding-ratio: 0.012;

  --pattern-filter-list-note-gap-ratio: 0.030;

  --pattern-filter-effect-unit-ratio: 0.0025;
}

#pattern-overlay .overlay-content {
  grid-template-rows:
    auto
    auto
    minmax(0, 1fr)
    auto;

  row-gap: 0;
}

#pattern-overlay .chooser-header {
  margin-bottom:
    calc(
      var(--pattern-filter-base)
      * var(--pattern-filter-title-gap-ratio)
    );
}

#pattern-overlay .pattern-size-filters {
  --bottom-btn-color: #3b82f6;

  --bottom-btn-height:
    calc(
      var(--pattern-filter-base)
      * var(--pattern-filter-height-ratio)
    );

  --bottom-border-width:
    calc(
      var(--pattern-filter-base)
      * var(--pattern-filter-border-ratio)
    );

  --bottom-btn-radius:
    calc(
      var(--bottom-btn-height)
      * 0.5
    );

--pattern-filter-button-width:
  calc(
    var(--pattern-filter-row-base)
    * var(--pattern-filter-width-ratio)
  );

  --pattern-filter-horizontal-gap:
  calc(
    var(--pattern-filter-row-base)
    * var(--pattern-filter-horizontal-gap-ratio)
  );
--pattern-filter-side-padding:
  calc(
    var(--pattern-filter-row-base)
    * var(--pattern-filter-side-padding-ratio)
  );
  --pattern-filter-effect-unit:
    calc(
      var(--pattern-filter-base)
      * var(--pattern-filter-effect-unit-ratio)
    );

width:
  var(--pattern-filter-row-base);

max-width:
  100%;

  margin: 0 auto;

padding-inline:
  var(--pattern-filter-side-padding);

padding-bottom:
  calc(
    var(--pattern-filter-base)
    * var(--pattern-filter-scroll-gap-ratio)
  );

  display: grid;

  grid-template-columns:
    repeat(
      6,
      var(--pattern-filter-button-width)
    );

  column-gap:
    var(--pattern-filter-horizontal-gap);

  align-items: center;
  justify-content: center;
}

#pattern-overlay .pattern-size-filter {
  width:
    var(--pattern-filter-button-width);

  min-width:
    var(--pattern-filter-button-width);

  max-width:
    var(--pattern-filter-button-width);

  height:
    var(--bottom-btn-height);

  min-height:
    var(--bottom-btn-height);

  max-height:
    var(--bottom-btn-height);

  padding: 0;

  font-size:
    calc(
      var(--pattern-filter-base)
      * var(--pattern-filter-font-ratio)
    );

  font-weight: 800;
  line-height: 1;

  box-shadow:
    0
    calc(var(--pattern-filter-effect-unit) * 3)
    calc(var(--pattern-filter-effect-unit) * 7)
    rgba(2, 6, 23, 0.06),

    inset
    0
    var(--pattern-filter-effect-unit)
    0
    rgba(255, 255, 255, 0.9);
}

#pattern-overlay .pattern-list {
  
  padding-top:
    calc(
      var(--pattern-filter-base)
      * var(--pattern-filter-preview-padding-ratio)
    );

  margin-bottom:
    calc(
      var(--pattern-filter-base)
      * var(--pattern-filter-list-note-gap-ratio)
    );
}

#pattern-overlay .pattern-size-filter:hover {
  background:
    color-mix(
      in oklab,
      var(--bottom-btn-color),
      white 86%
    );
}

#pattern-overlay .pattern-size-filter.is-active,
#pattern-overlay .pattern-size-filter[aria-pressed="true"],
#pattern-overlay .pattern-size-filter.is-active:hover,
#pattern-overlay
  .pattern-size-filter[aria-pressed="true"]:hover {
  background:
    color-mix(
      in oklab,
      var(--bottom-btn-color),
      white 62%
    );

  border-color:
    color-mix(
      in oklab,
      var(--bottom-btn-color),
      black 7%
    );

  color: #1e3a5f;

  box-shadow:
    0
    var(--pattern-filter-effect-unit)
    calc(var(--pattern-filter-effect-unit) * 2)
    rgba(2, 6, 23, 0.04),

    inset
    0
    calc(var(--pattern-filter-effect-unit) * 2)
    calc(var(--pattern-filter-effect-unit) * 5)
    rgba(2, 6, 23, 0.15);

  filter: none;
}

#pattern-overlay .pattern-size-filter.is-active:active,
#pattern-overlay
  .pattern-size-filter[aria-pressed="true"]:active {
  background:
    color-mix(
      in oklab,
      var(--bottom-btn-color),
      white 54%
    );

  box-shadow:
    0
    var(--pattern-filter-effect-unit)
    var(--pattern-filter-effect-unit)
    rgba(2, 6, 23, 0.03),

    inset
    0
    calc(var(--pattern-filter-effect-unit) * 3)
    calc(var(--pattern-filter-effect-unit) * 6)
    rgba(2, 6, 23, 0.18);
}

#pattern-overlay .pattern-size-filter:focus-visible {
  outline: none;

  box-shadow:
    0
    0
    0
    calc(var(--pattern-filter-effect-unit) * 2)
    color-mix(
      in oklab,
      var(--bottom-btn-color),
      white 72%
    ),

    inset
    0
    0
    0
    var(--bottom-border-width)
    var(--bottom-btn-color);
}

#pattern-overlay .pattern-size-filter.is-active:focus-visible,
#pattern-overlay
  .pattern-size-filter[aria-pressed="true"]:focus-visible {
  box-shadow:
    0
    0
    0
    calc(var(--pattern-filter-effect-unit) * 2)
    color-mix(
      in oklab,
      var(--bottom-btn-color),
      white 72%
    ),

    inset
    0
    calc(var(--pattern-filter-effect-unit) * 2)
    calc(var(--pattern-filter-effect-unit) * 5)
    rgba(2, 6, 23, 0.15);
}

body.app-loading {
  overflow: hidden;
}

body.app-loading > :not(#loading-splash) {
  visibility: hidden;
}

.loading-splash {
  position: fixed;
  inset: 0;

  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;

  display: grid;
  place-items: center;

  padding: 0;

  background: var(--app-bg);

  opacity: 1;
  visibility: visible;

  z-index: 20000;

  transition:
    opacity 260ms ease,
    visibility 260ms ease;
}

.loading-splash.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.loading-splash-content {
  width: 100%;
  max-width: none;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  gap: 0;

  transform:
    translateY(
      var(--loading-splash-offset-y)
    );

  text-align: center;
}
.loading-splash-logo {
  display: block;

  width: 80%;
  height: auto;
  max-width: none;

  margin: 0 auto;

  flex: 0 0 auto;

  object-fit: contain;
  object-position: center;

  user-select: none;
  pointer-events: none;

  -webkit-user-drag: none;
}

.loading-splash-spinner {
  width:
    var(--loading-spinner-size);

  height:
    var(--loading-spinner-size);

  margin-top:
    var(--loading-logo-spinner-gap);

  flex: 0 0 auto;

  border:
    var(--loading-spinner-border-width)
    solid
    rgba(37, 99, 235, 0.18);

  border-top-color: #2563eb;
  border-radius: 50%;

  animation:
    loading-splash-spin
    var(--loading-spinner-speed)
    linear
    infinite;
}

.loading-splash-message {
  min-height:
    calc(
      var(--loading-message-font-size) *
      var(--loading-message-line-height)
    );

  margin:
    var(--loading-spinner-message-gap)
    0
    0;

  color: #334155;

  font-size:
    var(--loading-message-font-size);

  line-height:
    var(--loading-message-line-height);

  font-weight: 700;

  text-align: center;
  white-space: nowrap;
}

.loading-splash-retry {
  appearance: none;
  -webkit-appearance: none;

  min-width: 110px;

  padding: 9px 18px;

  border: 1px solid #1d4ed8;
  border-radius: 10px;

  background: #2563eb;
  color: #ffffff;

  font: inherit;
  font-weight: 700;

  cursor: pointer;
}

.loading-splash-retry:hover {
  background: #1d4ed8;
}

.loading-splash-retry:focus-visible {
  outline: 3px solid #93c5fd;
  outline-offset: 3px;
}

.loading-splash.has-error
.loading-splash-spinner {
  display: none;
}

.loading-splash.has-error
.loading-splash-message {
  color: #b91c1c;
}

@keyframes loading-splash-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .loading-splash {
    transition: none;
  }

  .loading-splash-spinner {
    animation: none;
  }
}
.pattern-list-status {
  grid-column: 1 / -1;

  align-self: center;
  justify-self: center;

  margin: 30px 12px;
  padding: 0;

  color: #475569;

  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
}

.pattern-list-status.is-error {
  color: #b91c1c;
}

.pattern-list-content {
  display: contents;
}

:root {
  --app-safe-area-top:
    max(
      var(--safe-area-inset-top, 0px),
      env(safe-area-inset-top, 0px)
    );

  --app-safe-area-right:
    max(
      var(--safe-area-inset-right, 0px),
      env(safe-area-inset-right, 0px)
    );

  --app-safe-area-bottom:
    max(
      var(--safe-area-inset-bottom, 0px),
      env(safe-area-inset-bottom, 0px)
    );

  --app-safe-area-left:
    max(
      var(--safe-area-inset-left, 0px),
      env(safe-area-inset-left, 0px)
    );
}

body {
  padding-top: var(--app-safe-area-top);
}

.topbar.logo-only {
  padding-right:
    max(
      var(--topbar-pad-inline),
      var(--app-safe-area-right)
    );

  padding-left:
    max(
      var(--topbar-pad-inline),
      var(--app-safe-area-left)
    );
}

.overlay {
  padding-top:
    max(
      16px,
      var(--app-safe-area-top)
    );

  padding-right:
    max(
      16px,
      var(--app-safe-area-right)
    );

  padding-bottom:
    max(
      16px,
      var(--app-safe-area-bottom)
    );

  padding-left:
    max(
      16px,
      var(--app-safe-area-left)
    );
}

#pattern-overlay .overlay-content,
#style-overlay .overlay-content {
  padding-top:
    calc(
      clamp(14px, 3vw, 28px) +
      var(--app-safe-area-top)
    );

  padding-right:
    calc(
      clamp(14px, 3vw, 28px) +
      var(--app-safe-area-right)
    );

  padding-bottom:
    calc(
      clamp(14px, 3vw, 28px) +
      var(--app-safe-area-bottom)
    );

  padding-left:
    calc(
      clamp(14px, 3vw, 28px) +
      var(--app-safe-area-left)
    );
}

@media (hover: hover) and (pointer: fine) {

  .grid .cell:not(.selected):hover::before {
    --lift:
      calc(
        var(--tile-visual-base) * -0.02
      );

    box-shadow:
      0 calc(var(--tile-visual-base) * 0.18)
      calc(var(--tile-visual-base) * 0.34)
      rgba(2, 6, 23, 0.22),

      0 calc(var(--tile-visual-base) * 0.08)
      calc(var(--tile-visual-base) * 0.16)
      rgba(2, 6, 23, 0.18),

      inset 0
      calc(var(--tile-visual-base) * 0.01)
      0
      rgba(255, 255, 255, 0.5),

      inset 0
      calc(var(--tile-visual-base) * -0.01)
      0
      rgba(0, 0, 0, 0.08);
  }

  .grid.grid[data-style]
  .cell:not(.selected):hover::before {
    --lift:
      var(--theme-lift-medium);

    filter:
      saturate(105%);

    box-shadow:
      0
      var(--theme-shadow-y-large)
      var(--theme-shadow-blur-large)
      rgba(2, 6, 23, 0.22),

      0
      var(--theme-shadow-y-small)
      var(--theme-shadow-blur-small)
      rgba(2, 6, 23, 0.16),

      inset 0
      var(--theme-line-thin)
      0
      rgba(255, 255, 255, 0.62),

      inset 0
      calc(var(--theme-line-thin) * -1)
      0
      rgba(0, 0, 0, 0.10);
  }

  .grid.grid[data-style="flat"]
  .cell:not(.selected):hover::before {
    --lift:
      var(--theme-lift-small);

    box-shadow:
      0
      var(--theme-shadow-y-small)
      var(--theme-shadow-blur-small)
      rgba(2, 6, 23, 0.12),

      0 0 0
      var(--theme-line-thin)
      rgba(2, 6, 23, 0.18);
  }

  .grid
  .cell:not(.selected):hover::after {
    opacity: 0.85;
  }
}
#pattern-overlay .chooser-header .overlay-back-button,
#style-overlay .chooser-header .overlay-back-button {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* =========================================================
   SVG navigation arrows
   ========================================================= */

.panel-nav-icon {
  display: block;

  width: 52%;
  height: 52%;

  flex: 0 0 auto;

  overflow: visible;

  pointer-events: none;
}
/* Restore the original Neon hover behavior.
   Keep the Neon glow unchanged and only lift/saturate the tile. */

@media (hover: hover) and (pointer: fine) {
  .grid.grid[data-style="neonwire"]
  .cell:not(.selected):hover::before {
    --lift: var(--theme-lift-medium);

    filter: saturate(105%);

    box-shadow:
      0 0 calc(var(--tile-visual-base) * 0.30)
        color-mix(in srgb, var(--tile-color) 60%, transparent),

      0 0 calc(var(--tile-visual-base) * 0.14)
        color-mix(in srgb, var(--tile-color) 50%, transparent),

      inset 0 0 0 calc(var(--tile-visual-base) * 0.028)
        color-mix(in srgb, var(--tile-color) 70%, #fff);
  }
}