@font-face {
  font-family: "Inter Fallback";
  src: local("Arial");
  size-adjust: 107%;
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
}

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/inter-latin-400.woff2") format("woff2");
}

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/inter-latin-700.woff2") format("woff2");
}

*,
*::before,
*::after { box-sizing: border-box; }

html { scrollbar-width: none; }

html::-webkit-scrollbar { width: 0; height: 0; }

body {
  margin: 0;
  min-height: 100%;
  background-color: #8a7968;
  background-image: linear-gradient(180deg, #4d4e4e 0%, #716861 30%, #8a7968 55%, #a6865a 85%, #ac854e 100%);
  background-attachment: fixed;
  color: #1d2b36;
  font-family: Inter, "Inter Fallback", Arial, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.65;
}

@media (pointer: coarse), (max-width: 1099px) {
  body { background-attachment: scroll; }
}

img, svg { max-width: 100%; }

button, input { font: inherit; color: inherit; }

button { cursor: pointer; }

a { color: #173858; }

a:focus-visible,
button:focus-visible,
[tabindex="0"]:focus-visible {
  outline: 3px solid #2e5e3a;
  outline-offset: 2px;
}

.skip {
  position: absolute;
  left: 16px;
  top: -48px;
  z-index: 5;
  background: #fff;
  color: #173858;
  padding: 8px 12px;
  border-radius: 12px;
}

.skip:focus { top: 8px; }

.site-header { background: #fff; }

.header-bar {
  width: min(1180px, 100%);
  margin: 0 auto;
  height: 56px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  background: #fff;
  border-bottom: 1px solid #d7e0e4;
}

.header-bar:has(.site-nav.is-open) {
  height: auto;
  padding-bottom: 8px;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  color: #173858;
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 1;
  text-decoration: none;
}

.logo svg { width: 32px; height: 32px; display: block; }

.menu-btn {
  margin-left: auto;
  min-width: 48px;
  height: 48px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 12px;
  border: 1px solid #d7e0e4;
  background: #fff;
  color: #173858;
  font-weight: 700;
  font-size: 1rem;
}

.menu-btn svg { width: 24px; height: 24px; }

.site-nav { display: none; flex-basis: 100%; flex-wrap: wrap; gap: 4px 12px; padding-top: 8px; }

.site-nav.is-open { display: flex; }

.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 4px;
  color: #173858;
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
}

.site-nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 4px; }

.shell {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 8px 16px 0;
}

.game-title,
.page-title {
  margin: 0 0 8px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  min-height: 40px;
  background: #fff;
  color: #173858;
  border-radius: 12px;
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1.136;
}

.page-title { height: auto; padding: 8px 12px; }

.play-layout { display: block; }

.game-card {
  width: 100%;
  background: #2a1468;
  border: 1px solid #4c2d92;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: #f7f4ff;
}

.scorebar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-height: 48px;
}

.scoregroup { display: flex; flex-direction: column; justify-content: center; min-height: 48px; min-width: 0; }

.scoregroup .label {
  font-size: 1rem;
  line-height: 1.25rem;
  color: #d9cff5;
}

.scoregroup .num {
  font-size: 1.375rem;
  line-height: 1.75rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #fff;
}

.mode { display: flex; height: 48px; }

.mode a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  height: 48px;
  padding: 0 8px;
  border: 1px solid #d7e0e4;
  background: #fff;
  color: #173858;
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
}

.mode a:first-child { border-radius: 12px 0 0 12px; }

.mode a:last-child { border-radius: 0 12px 12px 0; margin-left: -1px; }

.mode a[aria-current="page"] { box-shadow: inset 0 0 0 2px #173858; }

.play-stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.control-stack { display: contents; }

.board-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 12px;
  overflow: hidden;
  background: #1a0b42;
  box-shadow: inset 0 0 0 1px rgba(190, 170, 255, 0.2);
}

.board,
.board-decor { position: absolute; inset: 0; }

.board { display: grid; }

.board[data-size="8"] { grid-template-rows: repeat(8, 1fr); }

.board[data-size="10"] { grid-template-rows: repeat(10, 1fr); }

.board [role="row"] { display: grid; min-height: 0; }

.board[data-size="8"] [role="row"] { grid-template-columns: repeat(8, 1fr); }

.board[data-size="10"] [role="row"] { grid-template-columns: repeat(10, 1fr); }

.gem-1 { --gem-mid: #ff8c1a; --gem-light: #ffd7a8; --gem-dark: #c45a00; }
.gem-2 { --gem-mid: #ff3b48; --gem-light: #ffb7bc; --gem-dark: #b41828; }
.gem-3 { --gem-mid: #b6f23c; --gem-light: #e8ffb0; --gem-dark: #5c9a10; }
.gem-4 { --gem-mid: #f23ad4; --gem-light: #ffb8f2; --gem-dark: #a01488; }
.gem-5 { --gem-mid: #3ec8ff; --gem-light: #c9f3ff; --gem-dark: #0e78c4; }
.gem-6 { --gem-mid: #ffe14a; --gem-light: #fff6b8; --gem-dark: #c9a000; }

.board [role="gridcell"] {
  position: relative;
  min-width: 0;
  min-height: 0;
  background: #241252;
  box-shadow: inset 0 0 0 1px rgba(190, 170, 255, 0.18);
}

.gem-face {
  position: absolute;
  inset: 1px;
  z-index: 1;
  border-radius: 4px;
  overflow: hidden;
  pointer-events: none;
}

.gem-face svg { display: block; width: 100%; height: 100%; }

.facet-top { fill: var(--gem-light); }
.facet-left { fill: color-mix(in srgb, var(--gem-mid) 55%, #2a1008); }
.facet-right { fill: var(--gem-dark); }
.facet-bottom { fill: color-mix(in srgb, var(--gem-dark) 72%, #1a0808); }
.facet-center { fill: var(--gem-mid); }

.board [role="gridcell"].is-filled,
.board [role="gridcell"].is-preview {
  background: transparent;
  border-radius: 3px;
  overflow: hidden;
}

.gem-code {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 5px;
  height: 5px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 2;
}

.gem-code[data-code="1"] { background: #0c1720; border-radius: 50%; }

.gem-code[data-code="2"] {
  background: transparent;
  box-shadow: -4px 0 0 #0c1720, 4px 0 0 #0c1720;
  border-radius: 50%;
}

.gem-code[data-code="3"] {
  width: 55%;
  height: 2px;
  background: #0c1720;
  transform: translate(-50%, -50%) rotate(-45deg);
}

.gem-code[data-code="4"] {
  width: 50%;
  height: 2px;
  background: transparent;
  box-shadow: 0 -3px 0 #0c1720, 0 3px 0 #0c1720;
}

.gem-code[data-code="5"] {
  width: 6px;
  height: 6px;
  background: #0c1720;
  transform: translate(-50%, -50%) rotate(45deg);
}

.board [role="gridcell"].is-preview { box-shadow: inset 0 0 0 2px #fff; }
.board [role="gridcell"].is-preview .gem-face { opacity: 0.72; }

.board [role="gridcell"].is-bad::after {
  content: "";
  position: absolute;
  z-index: 3;
  inset: 0;
  background: repeating-linear-gradient(-45deg, transparent, transparent 4px, rgba(255, 255, 255, 0.72) 4px, rgba(255, 255, 255, 0.72) 5px);
  pointer-events: none;
}

.board [role="gridcell"].is-anchor::before {
  content: "";
  position: absolute;
  z-index: 5;
  width: 8px;
  height: 8px;
  top: 3px;
  left: 3px;
  background: #fff;
  border: 2px solid #0c1720;
  border-radius: 1px;
}

.board [role="gridcell"]:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px #fff, inset 0 0 0 4px #0c1720;
}

.board-decor { pointer-events: none; overflow: hidden; }

.preview-svg { position: absolute; inset: 0; width: 100%; height: 100%; }

.preview-mark { position: absolute; width: 24px; height: 24px; }

.fx-cell {
  position: absolute;
  pointer-events: none;
}

.tray {
  width: 100%;
  height: 88px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.tray-slot {
  position: relative;
  width: 100%;
  height: 88px;
  padding: 0;
  border-radius: 12px;
  border: 1px solid #5a3d9e;
  background: #321c78;
  color: #fff;
  touch-action: manipulation;
}

.tray-slot.is-selected { box-shadow: inset 0 0 0 2px #173858, inset 0 0 0 5px #2e5e3a; }

.tray-slot.is-used { background: #fff; border-style: dashed; }

.tray-slot:disabled { cursor: default; }

.slot-id {
  position: absolute;
  top: 4px;
  left: 8px;
  font-size: 16px;
  line-height: 16px;
  font-weight: 700;
}

.slot-check { position: absolute; top: 2px; right: 4px; width: 24px; height: 24px; }

.slot-shape {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.shape-grid { display: grid; gap: 1px; }

.scell { display: block; width: 100%; height: 100%; border-radius: 2px; }

.scell { position: relative; overflow: hidden; }
.scell .gem-face { inset: 0; border-radius: 2px; }

.slot-code {
  position: absolute;
  top: 6px;
  left: 26px;
  width: 14px;
  height: 14px;
  pointer-events: none;
}

.slot-code[data-code="1"] { background: radial-gradient(circle at 50% 50%, #173858 3px, transparent 3.5px); }

.slot-code[data-code="2"] { background: radial-gradient(circle at 30% 50%, #173858 2.5px, transparent 3px), radial-gradient(circle at 70% 50%, #173858 2.5px, transparent 3px); }

.slot-code[data-code="3"] { background: linear-gradient(135deg, transparent 42%, #173858 42% 58%, transparent 58%); }

.slot-code[data-code="4"] { background: linear-gradient(#173858, #173858) 0 3px / 100% 2px no-repeat, linear-gradient(#173858, #173858) 0 9px / 100% 2px no-repeat; }

.slot-code[data-code="5"] { background: #173858; transform: rotate(45deg); width: 8px; height: 8px; top: 9px; left: 29px; }

.fx-shine { overflow: hidden; border-radius: 3px; }

.fx-shine-bar {
  position: absolute;
  top: -40%;
  left: -30%;
  width: 35%;
  height: 180%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.95), transparent);
  opacity: 0.3;
  transform: rotate(32deg);
}

.fx-burst { border-radius: 3px; background: var(--gem-light); }

.fx-particle {
  position: absolute;
  width: 3px;
  height: 3px;
  background: var(--gem-mid);
  transform: rotate(45deg);
}

.status {
  position: relative;
  min-height: 48px;
  padding-right: 48px;
}

.status-line {
  margin: 0;
  min-height: 24px;
  font-size: 1rem;
  line-height: 1.5rem;
  color: #f7f4ff;
}

.shape-indicator {
  position: absolute;
  right: 0;
  top: 4px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #321c78;
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px #5a3d9e;
}

.indicator-grid { display: grid; gap: 1px; }

.icell { display: block; border-radius: 1px; }

.icell.ok { background: var(--gem-mid, #ffb800); box-shadow: inset 1px 1px 0 var(--gem-light, #fff19a), inset -1px -1px 0 var(--gem-dark, #a95800); }

.icell.bad {
  background-color: #fff;
  background-image: repeating-linear-gradient(-45deg, transparent, transparent 2px, rgba(23, 56, 88, 0.6) 2px, rgba(23, 56, 88, 0.6) 3px);
}

.icell.out { background: transparent; box-shadow: inset 0 0 0 1px #173858; }

.end-icon { display: flex; opacity: 1; }

.arrows { display: flex; flex-wrap: wrap; gap: 8px; min-height: 48px; }

.icon-btn {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  min-width: 48px;
  min-height: 48px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  border: 1px solid #173858;
  background: #fff;
  color: #173858;
}

.icon-btn svg { width: 24px; height: 24px; }

.icon-btn:disabled { border-style: dashed; color: #5d6b75; }

.actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

.actions.is-single { grid-template-columns: 1fr; }

.btn {
  min-height: 48px;
  border-radius: 12px;
  padding: 0 12px;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
}

.btn-primary { background: #2e5e3a; color: #fff; border: 1px solid #2e5e3a; }

.btn-primary:disabled { background: #fff; color: #5d6b75; border: 1px solid #d7e0e4; }

.btn-secondary { background: #fff; color: #173858; border: 1px solid #173858; }

@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover:not(:disabled) { background: #234a2d; border-color: #234a2d; }
  .btn-secondary:hover:not(:disabled) { border-color: #2e5e3a; color: #234a2d; }
  .icon-btn:hover:not(:disabled) { border-color: #2e5e3a; }
}

.side-card { margin-top: 16px; }

.card,
.side-card {
  background: #fff;
  border: 1px solid #d7e0e4;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  padding: 20px;
}

.card h2,
.side-card h2,
.card h3 {
  color: #173858;
  font-weight: 700;
}

.card h2,
.side-card h2 { margin: 0 0 12px; font-size: 1.75rem; line-height: 1.1; }

.card h3 { margin: 16px 0 8px; font-size: 1.25rem; line-height: 1.2; }

.card p,
.side-card p,
.card li { font-size: 1.0625rem; line-height: 1.65; }

.card p { margin: 0 0 12px; max-width: 68ch; }

.card ol,
.card ul,
.side-card ol { margin: 0 0 12px; padding-left: 1.2rem; }

.support { margin-top: 56px; display: flex; flex-direction: column; gap: 56px; }

.sections { display: grid; gap: 16px; }

.placeholder-banner {
  margin: 0 0 16px;
  padding: 12px;
  background: #f6f2ee;
  border-left: 4px solid #2e5e3a;
  border-radius: 12px;
  color: #173858;
  font-size: 1rem;
  line-height: 1.5;
}

.mini { display: grid; width: max-content; max-width: 100%; gap: 2px; padding: 4px; background: #f6f2ee; border-radius: 12px; grid-template-columns: repeat(var(--cols, 8), 16px); }

.mini.dense { grid-template-columns: repeat(var(--cols, 10), 14px); }

.dcell { display: block; width: 16px; height: 16px; background: #fff; box-shadow: inset 0 0 0 1px #5d6b75; border-radius: 2px; }

.mini.dense .dcell { width: 14px; height: 14px; }

.crumb { margin: 0 0 8px; }

.crumb a { font-weight: 700; min-height: 48px; display: inline-flex; align-items: center; }

.dcell.on { background-color: #2e5e3a; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), inset 0 0 0 1px #173858; }

.dcell.mark { background: #e7f2e4; box-shadow: inset 0 0 0 2px #173858; }

.dcell.bad {
  background-color: #f6f2ee;
  background-image: repeating-linear-gradient(-45deg, transparent, transparent 3px, rgba(23, 56, 88, 0.45) 3px, rgba(23, 56, 88, 0.45) 4px);
}

.pair { display: grid; gap: 16px; }

figure { margin: 0; }

figcaption { margin: 0 0 8px; font-size: 1rem; line-height: 1.4; color: #5d6b75; }

.link-grid { display: grid; gap: 12px; }

.link-card {
  display: block;
  padding: 16px;
  border-radius: 12px;
  border: 1px solid #d7e0e4;
  background: #fff;
  color: #173858;
  text-decoration: none;
  min-height: 48px;
}

.link-card strong { display: block; font-size: 1.125rem; }

.link-card span { display: block; color: #1d2b36; font-size: 1rem; line-height: 1.5; }

table { width: 100%; border-collapse: collapse; margin: 0 0 12px; }

th,
td { border-bottom: 1px solid #d7e0e4; text-align: left; padding: 8px; font-size: 1rem; vertical-align: top; }

th { color: #173858; font-weight: 700; }

.cta { margin-top: 16px; }

a.btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }

.site-footer {
  margin-top: 56px;
  background: #fff;
  border-top: 1px solid #d7e0e4;
}

.footer-inner { width: min(1180px, 100%); margin: 0 auto; padding: 20px 16px 32px; }

.footer-contact { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 0 0 8px; }

.footer-contact a { font-weight: 700; min-height: 48px; display: inline-flex; align-items: center; }

.footer-nav { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 8px; }

.footer-nav a { min-height: 48px; display: inline-flex; align-items: center; font-weight: 700; text-decoration: none; }

.fine { margin: 0; color: #5d6b75; font-size: 1rem; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.overlay {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 40;
}

html.is-dragging { touch-action: none; }

.ghost,
.ghost-line,
.ghost-dot { position: absolute; left: 0; top: 0; }

.ghost-shadow { position: absolute; left: 3px; top: 6px; opacity: 0.35; }

.ghost-shadow .scell {
  background: #0c1720;
  box-shadow: none;
}

.ghost-line {
  height: 2px;
  background: #173858;
  transform-origin: 0 50%;
}

.ghost-dot {
  width: 10px;
  height: 10px;
  border: 2px solid #173858;
  border-radius: 50%;
  background: #fff;
}

.tray-slot,
.board,
.icon-btn,
.btn { user-select: none; }

@media (min-width: 800px) {
  .pair { grid-template-columns: 1fr 1fr; align-items: start; }
  .link-grid { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 1212px) {
  .shell,
  .header-bar,
  .footer-inner { width: 1180px; padding-left: 0; padding-right: 0; }

  .header-bar { flex-wrap: nowrap; height: 56px; }

  .menu-btn { display: none; }

  .site-nav {
    display: flex;
    flex-basis: auto;
    margin-left: auto;
    flex-wrap: nowrap;
    padding-top: 0;
    gap: 2px;
  }

  .play-layout {
    display: grid;
    grid-template-columns: 760px 396px;
    gap: 24px;
    align-items: start;
  }

  .game-card { padding: 20px 28px; align-items: stretch; }

  .scorebar { align-self: stretch; width: 100%; }

  .play-stack {
    width: 100%;
    display: grid;
    grid-template-columns: 400px minmax(0, 1fr);
    grid-template-areas:
      "board controls"
      "tray tray";
    gap: 12px 20px;
    align-items: center;
  }

  .board-frame { grid-area: board; width: 400px; }

  .tray { grid-area: tray; height: 88px; }

  .control-stack {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 12px;
    grid-area: controls;
    min-width: 0;
  }

  .side-card { margin-top: 0; padding: 28px; }

  .card { padding: 28px; }

  .support { margin-top: 88px; gap: 72px; }

  .sections.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }

  .sections.grid-2 { grid-template-columns: 1fr 1fr; align-items: start; }

  .site-footer { margin-top: 88px; }
}

@media (prefers-reduced-motion: reduce) {
  .slot-shape,
  .btn,
  .icon-btn,
  .end-icon { transform: none; }
}