.games-page {
  --game-bg: color-mix(in srgb, var(--panel) 90%, var(--paper));
  --game-soft: color-mix(in srgb, var(--field) 82%, var(--panel));
  --game-hover: color-mix(in srgb, var(--game-bg) 88%, var(--gold) 12%);
  --game-line: color-mix(in srgb, var(--line) 82%, var(--gold) 18%);
  --game-accent: var(--gold);
  --game-board: color-mix(in srgb, var(--moss) 74%, var(--paper));
  --game-water: #7cc4ff;
  --game-danger: #f97066;
  --game-warm: #d5a95c;
  --game-wood: #a97834;
  --game-success: #4f8d61;
  --game-piece-dark: #111723;
  --game-piece-dark-glint: #566272;
  --game-piece-light: #fffdf5;
  --game-piece-light-shade: #d9d2c2;
  --game-piece-red: #c7442f;
  --game-piece-yellow: #d8ad2d;
  --game-cell-light: #f1d3a0;
  --game-cell-dark: #6d4728;
  --game-card-shadow: rgb(var(--black-rgb) / 10%);

  display: grid;
  gap: 20px;
  width: min(1180px, calc(100% - 28px));
  margin: 0 auto 48px;
}

body[data-package="cosmogora"] .games-page,
body[data-theme="cosmogora-eclipse"] .games-page {
  --game-bg: color-mix(in srgb, #071126 72%, var(--panel) 28%);
  --game-soft: color-mix(in srgb, #101b2e 82%, var(--panel) 18%);
  --game-hover: color-mix(in srgb, var(--game-bg) 86%, #22314a 14%);
  --game-line: color-mix(in srgb, var(--line) 78%, #4f8fd9 22%);
  --game-board: color-mix(in srgb, #123929 76%, #071126 24%);
}

.games-page[data-game-skin="ludipedia"] {
  --game-bg: #fffaf0;
  --game-soft: #f1ead8;
  --game-hover: #efe2be;
  --game-line: #d8bd72;
  --game-accent: #b8892c;
  --game-board: #92a86e;
  --game-water: #8ac8db;
  --game-danger: #d85d55;
  --game-warm: #d8ad62;
  --game-wood: #9f7038;
  --game-success: #668c52;
  --game-piece-red: #c85d42;
  --game-piece-yellow: #cfa63a;
  --game-cell-light: #ead3a1;
  --game-cell-dark: #7b5630;
}

.games-page[data-game-skin="cosmogora"] {
  --game-bg: #101827;
  --game-soft: #172237;
  --game-hover: #22314a;
  --game-line: #4f8fd9;
  --game-accent: #8bbcff;
  --game-board: #123929;
  --game-water: #315f9c;
  --game-danger: #ff7b7b;
  --game-warm: #c79c58;
  --game-wood: #6e4f33;
  --game-success: #4ea36f;
  --game-piece-red: #e06b62;
  --game-piece-yellow: #d9b95a;
  --game-cell-light: #394a68;
  --game-cell-dark: #172237;
}

.games-page[data-game-skin="forest"] {
  --game-bg: #f4f8ed;
  --game-soft: #dfead0;
  --game-hover: #cfe1b6;
  --game-line: #91a875;
  --game-accent: #5d7f45;
  --game-board: #6f945a;
  --game-water: #83c6bc;
  --game-danger: #cf6b55;
  --game-warm: #c6a45c;
  --game-wood: #7a552f;
  --game-success: #4f8d61;
}

.games-page[data-game-skin="ocean"] {
  --game-bg: #eef9fb;
  --game-soft: #d4edf4;
  --game-hover: #bce0ef;
  --game-line: #73abc4;
  --game-accent: #2d7fa1;
  --game-board: #5ea6a0;
  --game-water: #55b6e0;
  --game-danger: #e0696f;
  --game-warm: #d7b16d;
  --game-wood: #907047;
  --game-success: #3f987d;
}

.games-page[data-game-skin="candy"] {
  --game-bg: #fff4fb;
  --game-soft: #ffe1ef;
  --game-hover: #ffd2e6;
  --game-line: #ef9bc7;
  --game-accent: #d9579e;
  --game-board: #90c9ff;
  --game-water: #9edcff;
  --game-danger: #ff6f8d;
  --game-warm: #ffd36b;
  --game-wood: #b67854;
  --game-success: #5dbf9a;
}

.games-page[data-game-skin="chalk"] {
  --game-bg: #23342f;
  --game-soft: #2f453f;
  --game-hover: #3b554f;
  --game-line: #8ab5a5;
  --game-accent: #f2e7b8;
  --game-board: #315145;
  --game-water: #6eb3bb;
  --game-danger: #ef8b7a;
  --game-warm: #d7c78a;
  --game-wood: #8d6d45;
  --game-success: #9bd18d;
}

.games-page[data-game-skin="space"] {
  --game-bg: #10162a;
  --game-soft: #1b2541;
  --game-hover: #26345a;
  --game-line: #777fdc;
  --game-accent: #c5d0ff;
  --game-board: #25386b;
  --game-water: #536fc7;
  --game-danger: #ff6b9a;
  --game-warm: #e8b86d;
  --game-wood: #735f8f;
  --game-success: #6bd7c8;
}

.games-page[data-game-skin="sunset"] {
  --game-bg: #fff3e6;
  --game-soft: #ffe0c7;
  --game-hover: #ffd0ad;
  --game-line: #df9a64;
  --game-accent: #c65f3d;
  --game-board: #a98259;
  --game-water: #75b9c8;
  --game-danger: #d84d4d;
  --game-warm: #e59b4b;
  --game-wood: #915431;
  --game-success: #658f5c;
}

.games-page[data-game-skin="mint"] {
  --game-bg: #f0fbf6;
  --game-soft: #d7f2e6;
  --game-hover: #c5eadb;
  --game-line: #82bba1;
  --game-accent: #3f9f78;
  --game-board: #75b88e;
  --game-water: #8fd3d6;
  --game-danger: #e27373;
  --game-warm: #d7bd70;
  --game-wood: #8a6b47;
  --game-success: #43a56e;
}

.games-page[data-game-skin="royal"] {
  --game-bg: #f7f1ff;
  --game-soft: #e8dcfa;
  --game-hover: #ddcff4;
  --game-line: #9a7cc2;
  --game-accent: #6545a4;
  --game-board: #8071b4;
  --game-water: #7da7da;
  --game-danger: #c85075;
  --game-warm: #d5aa54;
  --game-wood: #745a86;
  --game-success: #5d9c68;
}

.games-page[data-game-skin="volcano"] {
  --game-bg: #fff1e9;
  --game-soft: #f8d8c6;
  --game-hover: #f1c3aa;
  --game-line: #c57454;
  --game-accent: #b2412d;
  --game-board: #7d5c46;
  --game-water: #7398a8;
  --game-danger: #e54835;
  --game-warm: #df8f3e;
  --game-wood: #6e3d2f;
  --game-success: #6b8f55;
}

.games-page[data-game-skin="ice"] {
  --game-bg: #f2fbff;
  --game-soft: #dceff8;
  --game-hover: #cbe6f4;
  --game-line: #8bb7cc;
  --game-accent: #4388ad;
  --game-board: #a8c5c9;
  --game-water: #8ed7f2;
  --game-danger: #d86d80;
  --game-warm: #c8b06a;
  --game-wood: #7c7782;
  --game-success: #4fa995;
}

.games-page[data-game-skin="meadow"] {
  --game-bg: #f9f7e8;
  --game-soft: #e8edc9;
  --game-hover: #dce5b2;
  --game-line: #a9b56c;
  --game-accent: #77913d;
  --game-board: #8fb966;
  --game-water: #90c9c8;
  --game-danger: #d8675b;
  --game-warm: #d0b850;
  --game-wood: #806230;
  --game-success: #649c42;
}

.games-page[data-game-skin="storybook"] {
  --game-bg: #fff7ec;
  --game-soft: #f3e3c9;
  --game-hover: #ead5b7;
  --game-line: #c69c67;
  --game-accent: #9b6f3a;
  --game-board: #9aa86f;
  --game-water: #8bbbd0;
  --game-danger: #bd5f54;
  --game-warm: #d0a052;
  --game-wood: #765431;
  --game-success: #66884d;
}

.games-page[data-game-skin="arcade"] {
  --game-bg: #141421;
  --game-soft: #202035;
  --game-hover: #2d2d4a;
  --game-line: #00d4ff;
  --game-accent: #ffcf33;
  --game-board: #22285a;
  --game-water: #00a8ff;
  --game-danger: #ff4f78;
  --game-warm: #ffb52e;
  --game-wood: #704e9d;
  --game-success: #35f0a0;
}

.games-page[data-game-skin="desert"] {
  --game-bg: #fff6e5;
  --game-soft: #efd8ae;
  --game-hover: #e5c890;
  --game-line: #b68b4b;
  --game-accent: #9d6e2d;
  --game-board: #c89b56;
  --game-water: #74b9c0;
  --game-danger: #c9634f;
  --game-warm: #d19b3e;
  --game-wood: #805730;
  --game-success: #7d9445;
}

.games-page[data-game-skin="berry"] {
  --game-bg: #fff1f5;
  --game-soft: #f7d8e3;
  --game-hover: #eec5d5;
  --game-line: #bf7892;
  --game-accent: #9f3d64;
  --game-board: #8f879f;
  --game-water: #8abbd4;
  --game-danger: #bf3853;
  --game-warm: #d8a150;
  --game-wood: #704456;
  --game-success: #5f9a68;
}

.games-page[data-game-skin="paper"] {
  --game-bg: #fffdf6;
  --game-soft: #ede6d4;
  --game-hover: #e2d8bf;
  --game-line: #bcae8b;
  --game-accent: #8c7951;
  --game-board: #9b9b75;
  --game-water: #a9c7d4;
  --game-danger: #bd6a5d;
  --game-warm: #c7a45e;
  --game-wood: #795f3e;
  --game-success: #718c54;
}

.games-page[data-game-skin="night"] {
  --game-bg: #171b24;
  --game-soft: #232a36;
  --game-hover: #303848;
  --game-line: #78869b;
  --game-accent: #d8c78a;
  --game-board: #3f5d60;
  --game-water: #466f91;
  --game-danger: #e07878;
  --game-warm: #c89e57;
  --game-wood: #6f5947;
  --game-success: #75aa78;
}

.games-hero,
.game-stage,
.games-library,
.game-side-panel > section {
  border: 1px solid var(--game-line);
  border-radius: 24px;
  background: var(--game-bg);
  box-shadow: 0 18px 48px rgb(var(--black-rgb) / 10%);
}

.games-hero {
  display: grid;
  gap: 12px;
  padding: clamp(22px, 4vw, 42px);
  overflow: hidden;
  position: relative;
}

.games-hero h1,
.game-stage h2 {
  margin: 0;
  font-family: Fraunces, Georgia, serif;
}

.games-hero p {
  max-width: 760px;
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}

.games-hero-actions,
.game-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: end;
}

.game-admin-gear {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid color-mix(in srgb, var(--game-line) 78%, transparent);
  border-radius: 999px;
  background: var(--game-soft);
  color: var(--ink);
}

.game-admin-gear svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentcolor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.games-layout {
  display: grid;
  grid-template-columns: minmax(210px, 300px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.games-page.library-collapsed .games-layout {
  grid-template-columns: 58px minmax(0, 1fr);
}

.games-library {
  display: grid;
  gap: 10px;
  padding: 12px;
  position: sticky;
  top: 16px;
}

.games-library-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.games-library-head button {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--game-line);
  border-radius: 999px;
  background: var(--game-soft);
  color: var(--ink);
  cursor: pointer;
}

.games-library-head svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentcolor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.games-page.library-collapsed .games-library {
  justify-items: center;
}

.games-page.library-collapsed .games-library-head strong,
.games-page.library-collapsed .game-card span,
.games-page.library-collapsed .game-card small {
  display: none;
}

.games-page.library-collapsed .games-library-head button svg {
  transform: rotate(180deg);
}

.games-page.library-collapsed .game-card {
  width: 34px;
  min-height: 34px;
  padding: 0;
  place-items: center;
}

.games-page.library-collapsed .game-card strong {
  overflow: hidden;
  width: 2ch;
  white-space: nowrap;
}

.games-page.direct-game {
  width: min(980px, calc(100% - 28px));
}

.games-page.direct-game .games-hero,
.games-page.direct-game .games-library {
  display: none;
}

.games-page.direct-game .games-layout {
  grid-template-columns: minmax(0, 1fr);
}

.games-page.direct-game .game-stage {
  min-height: min(760px, calc(100vh - 120px));
}

.game-card {
  display: grid;
  gap: 5px;
  text-align: left;
  border: 1px solid color-mix(in srgb, var(--game-line) 72%, transparent);
  border-radius: 18px;
  background: color-mix(in srgb, var(--game-soft) 86%, transparent);
  color: var(--ink);
  padding: 13px;
  cursor: pointer;
}

.game-card:hover,
.game-card.active {
  background: var(--game-hover);
  border-color: var(--game-line);
  transform: translateY(-1px);
}

.game-card small {
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: 11px;
}

.game-stage {
  display: grid;
  gap: 16px;
  padding: clamp(14px, 2.4vw, 24px);
}

.game-stage-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: start;
}

.game-stage-head p {
  margin: 4px 0 0;
  color: var(--muted);
}

.game-scoreboard {
  display: flex;
  gap: 8px;
}

.game-scoreboard span {
  min-width: 72px;
  border: 1px solid var(--game-line);
  border-radius: 16px;
  background: var(--game-soft);
  padding: 8px 10px;
  text-align: center;
}

.game-scoreboard b {
  display: block;
  font-size: 24px;
}

.game-controls label {
  display: grid;
  gap: 4px;
  min-width: 180px;
  color: var(--muted);
  font-size: 13px;
}

.game-options {
  display: contents;
}


.games-transversal-panel {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--game-line) 78%, transparent);
  border-radius: 16px;
  background: color-mix(in srgb, var(--game-soft) 82%, var(--paper));
}

.games-path-head,
.games-path-controls,
.games-daily-strip,
.game-local-summary,
.game-matter-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.games-path-head {
  justify-content: space-between;
}

.games-path-head strong,
.game-parent-tools h3 {
  color: var(--ink);
  font-size: 1rem;
}

.games-path-head span {
  padding: 5px 9px;
  border: 1px solid var(--game-line);
  border-radius: 999px;
  color: var(--muted);
  font-size: .82rem;
  font-weight: 900;
}

.games-path-controls label {
  display: grid;
  gap: 4px;
  min-width: 120px;
  color: var(--muted);
  font-size: .82rem;
  font-weight: 800;
}

.games-path-controls button,
.games-daily-strip button,
.game-parent-tools button {
  border: 1px solid var(--game-line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--paper) 58%, var(--game-soft));
  color: var(--ink);
  font-weight: 900;
  cursor: pointer;
}

.games-path-controls button {
  min-height: 38px;
  padding: 8px 11px;
}

.games-path-controls button.active,
.games-daily-strip button:hover,
.game-parent-tools button:hover {
  background: color-mix(in srgb, var(--game-accent) 22%, var(--game-soft));
}

.games-daily-strip {
  align-items: stretch;
}

.games-daily-strip button {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 8px;
  align-items: center;
  min-width: min(180px, 100%);
  padding: 10px;
  text-align: left;
}

.games-daily-strip small {
  display: grid;
  grid-row: span 2;
  place-items: center;
  width: 28px;
  aspect-ratio: 1;
  border-radius: 999px;
  background: var(--game-accent);
  color: var(--paper);
  font-weight: 950;
}

.games-daily-strip span,
.games-pause-note,
.game-parent-tools p,
.game-matter-summary,
.game-discovery-book p {
  color: var(--muted);
  font-size: .9rem;
  font-weight: 750;
}

.games-pause-note {
  margin: 0;
  padding: 10px 12px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--game-success) 14%, var(--game-soft));
}

.game-parent-tools {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--game-line);
  border-radius: 16px;
  background: color-mix(in srgb, var(--game-bg) 88%, var(--paper));
}

.game-parent-tools h3,
.game-parent-tools p,
.game-discovery-book p {
  margin: 0;
}

.game-local-summary span {
  display: grid;
  min-width: 92px;
  padding: 9px 10px;
  border-radius: 12px;
  background: var(--game-soft);
}

.game-local-summary b {
  font-size: 1.25rem;
}

.game-local-summary small {
  color: var(--muted);
  font-weight: 800;
}

.game-matter-summary span {
  padding: 6px 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--game-accent) 12%, var(--game-soft));
}

.game-discovery-book summary {
  cursor: pointer;
  font-weight: 950;
}

.game-discovery-book div {
  display: grid;
  gap: 8px;
  margin-top: 8px;
}

.game-discovery-book p {
  padding: 8px 10px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--paper) 60%, var(--game-soft));
}

.game-parent-tools button {
  min-height: 38px;
  padding: 8px 12px;
}

.games-page.games-calm-mode * {
  animation-duration: .01ms !important;
  transition-duration: .01ms !important;
}

@media print {
  body * {
    visibility: hidden;
  }

  .games-page,
  .games-page * {
    visibility: visible;
  }

  .games-page {
    width: 100%;
    margin: 0;
  }

  .games-library,
  .games-hero,
  .game-controls,
  .game-chat-card {
    display: none !important;
  }
}

.game-arena {
  display: grid;
  grid-template-columns: minmax(280px, 560px) minmax(240px, 1fr);
  gap: 18px;
  align-items: start;
}

.game-board-wrap {
  display: grid;
  gap: 12px;
  justify-items: center;
}

.game-action-notice {
  margin: 0;
  max-width: 520px;
  padding: 8px 10px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--game-danger) 12%, var(--game-panel));
  color: var(--game-danger);
  text-align: center;
  font-weight: 850;
}

.game-replay-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  color: var(--muted);
  font-size: .92rem;
  font-weight: 800;
}

.game-replay-controls button {
  display: grid;
  place-items: center;
  min-width: 38px;
  height: 34px;
  border: 1px solid var(--game-line);
  border-radius: 10px;
  background: var(--game-soft);
  color: var(--ink);
  cursor: pointer;
}

.game-replay-controls button:disabled {
  opacity: .45;
  cursor: default;
}

.game-board {
  display: grid;
  width: min(560px, 100%);
  aspect-ratio: 1;
  padding: 10px;
  gap: 5px;
  border-radius: 26px;
  background: linear-gradient(135deg, var(--game-board), color-mix(in srgb, var(--game-board) 72%, var(--black)));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--white) 10%, transparent), 0 20px 44px rgb(var(--black-rgb) / 18%);
}

.othello-board,
.chess-board,
.checkers-board,
.go-board,
.tafl-board,
.ultimate_tictactoe-board,
.tictactoe-board,
.cat_mouse-board {
  grid-auto-rows: 1fr;
}

.othello-board,
.chess-board,
.checkers-board {
  grid-template-columns: repeat(8, 1fr);
}

.othello-cell:disabled {
  cursor: default;
}

.othello-cell.blocked:not(.black, .white) {
  opacity: .62;
}

.othello-cell.legal:not(:disabled) {
  box-shadow:
    inset 0 0 0 3px color-mix(in srgb, var(--game-accent) 52%, transparent),
    inset 0 0 0 999px color-mix(in srgb, var(--game-accent) 10%, transparent);
}

.connect4-board {
  grid-template-columns: repeat(7, 1fr);
  aspect-ratio: 7 / 6;
  background: linear-gradient(135deg, color-mix(in srgb, var(--game-accent) 70%, var(--game-water)), color-mix(in srgb, var(--game-board) 64%, var(--ink)));
}

.ultimate_tictactoe-board {
  grid-template-columns: repeat(9, 1fr);
}

.tictactoe-board {
  grid-template-columns: repeat(3, 1fr);
  max-width: min(420px, 100%);
}

.go-board {
  display: block;
  aspect-ratio: auto;
}

.go-wrap {
  display: grid;
  gap: 12px;
}

.go-grid {
  display: grid;
  aspect-ratio: 1;
  grid-template-columns: repeat(var(--go-size, 9), 1fr);
  padding: 0;
  overflow: hidden;
  border-radius: 18px;
  background:
    linear-gradient(color-mix(in srgb, var(--black) 28%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--black) 28%, transparent) 1px, transparent 1px),
    linear-gradient(135deg, var(--game-warm), var(--game-wood));
  background-size: var(--go-step, 11.1111%) var(--go-step, 11.1111%), var(--go-step, 11.1111%) var(--go-step, 11.1111%), auto;
  background-position: var(--go-offset, 5.5556%) var(--go-offset, 5.5556%), var(--go-offset, 5.5556%) var(--go-offset, 5.5556%), 0 0;
  gap: 0;
}

.go-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.go-meta {
  margin: 0;
  color: color-mix(in srgb, var(--ink) 78%, transparent);
  font-size: .9rem;
}


.xiangqi-board,
.shogi-board {
  aspect-ratio: auto;
  min-height: 560px;
  align-content: center;
  justify-items: center;
}

.oriental-wrap {
  display: grid;
  gap: 12px;
  justify-items: center;
  width: min(560px, 100%);
}

.oriental-grid {
  display: grid;
  grid-template-columns: repeat(var(--oriental-cols, 9), 1fr);
  gap: 3px;
  width: min(540px, 94vw);
  padding: 10px;
  border: 2px solid color-mix(in srgb, var(--game-wood) 70%, var(--ink));
  border-radius: 16px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--game-warm) 86%, var(--paper)), var(--game-wood));
}

.xiangqi-grid {
  aspect-ratio: 9 / 10;
}

.shogi-grid {
  aspect-ratio: 1;
}

.oriental-cell {
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 0;
  border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--paper) 26%, transparent);
  cursor: pointer;
}

.oriental-cell.river {
  background: color-mix(in srgb, var(--game-water) 20%, var(--paper));
}

.oriental-cell:disabled {
  cursor: default;
}

.oriental-cell.legal {
  background: color-mix(in srgb, var(--game-accent) 26%, var(--paper));
}

.oriental-cell.piece-choice:not(:disabled) {
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--game-accent) 32%, transparent);
}

.oriental-cell.target:not(:disabled) {
  box-shadow:
    inset 0 0 0 4px color-mix(in srgb, var(--game-accent) 60%, transparent),
    0 8px 18px rgb(var(--black-rgb) / 12%);
}

.oriental-cell.selected {
  outline: 3px solid var(--game-accent);
  outline-offset: -3px;
}

.oriental-piece {
  display: grid;
  place-items: center;
  width: 82%;
  aspect-ratio: 1;
  border: 2px solid color-mix(in srgb, var(--ink) 22%, transparent);
  border-radius: 999px;
  background: radial-gradient(circle at 34% 25%, var(--game-card-face), color-mix(in srgb, var(--game-warm) 42%, var(--paper)) 72%);
  color: var(--ink);
  font-size: clamp(16px, 4vw, 26px);
  font-weight: 950;
  box-shadow: 0 5px 10px rgb(var(--black-rgb) / 14%);
}

.oriental-cell.white .oriental-piece {
  color: var(--game-piece-red);
}

.oriental-meta {
  margin: 0;
  color: var(--muted);
  font-weight: 850;
  text-align: center;
}

.tafl-board {
  grid-template-columns: repeat(9, 1fr);
  background: linear-gradient(135deg, var(--game-warm), var(--game-wood));
}

.cat_mouse-board {
  grid-template-columns: repeat(7, 1fr);
  background: linear-gradient(135deg, color-mix(in srgb, var(--game-success) 62%, var(--game-soft)), var(--game-board));
}

.conquest-board {
  aspect-ratio: auto;
  min-height: 520px;
  align-content: center;
  justify-items: center;
}

.mancala-board {
  grid-template-columns: 72px minmax(0, 1fr) 72px;
  aspect-ratio: 2 / 1;
  align-items: stretch;
}

.nim-board {
  aspect-ratio: auto;
  min-height: 360px;
  align-content: center;
  justify-items: center;
  gap: 18px;
}

.blackjack-board,
.battle-board,
.seven_families-board {
  aspect-ratio: auto;
  min-height: 420px;
  align-content: center;
  justify-items: center;
}

.battleship-board {
  aspect-ratio: auto;
  min-height: 420px;
  align-content: center;
  justify-items: center;
}

.memory-board {
  aspect-ratio: auto;
  min-height: 420px;
  align-content: center;
  justify-items: center;
  gap: 14px;
}

.maze-board {
  aspect-ratio: auto;
  min-height: 420px;
  align-content: center;
  justify-items: center;
}

.puzzle-board {
  aspect-ratio: auto;
  min-height: 460px;
  align-content: center;
  justify-items: center;
}

.simon-board {
  aspect-ratio: auto;
  min-height: 420px;
  align-content: center;
  justify-items: center;
}


.treasure_mines-board {
  aspect-ratio: auto;
  min-height: 480px;
  align-content: center;
  justify-items: center;
}

.treasure-mines-wrap {
  display: grid;
  gap: 12px;
  justify-items: center;
  width: min(520px, 100%);
}

.treasure-mines-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.treasure-mines-tools button,
.treasure-cell {
  border: 1px solid var(--game-line);
  border-radius: 10px;
  background: var(--game-soft);
  color: var(--ink);
  font-weight: 950;
  cursor: pointer;
}

.treasure-mines-tools button {
  min-height: 38px;
  padding: 8px 12px;
}

.treasure-mines-tools button.active {
  background: color-mix(in srgb, var(--game-accent) 28%, var(--game-soft));
}

.treasure-mines-tools p {
  margin: 0;
  color: var(--muted);
  font-weight: 850;
}

.treasure-mines-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 5px;
  width: min(480px, 94vw);
  padding: 10px;
  border-radius: 18px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--game-board) 78%, var(--game-water)), var(--game-wood));
}

.treasure-cell {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  min-width: 0;
  font-size: clamp(14px, 3vw, 22px);
}

.treasure-cell.revealed {
  background: color-mix(in srgb, var(--paper) 72%, var(--game-soft));
}

.treasure-cell.flagged {
  background: color-mix(in srgb, var(--game-accent) 22%, var(--game-soft));
}

.taquin-board {
  aspect-ratio: auto;
  min-height: 420px;
  align-content: center;
  justify-items: center;
  gap: 14px;
}

.diamonds-board {
  aspect-ratio: auto;
  min-height: 480px;
  align-content: center;
  justify-items: center;
  gap: 12px;
}

.sudoku4-board {
  aspect-ratio: auto;
  min-height: 420px;
  align-content: center;
  justify-items: center;
}

.tangram-board {
  aspect-ratio: auto;
  min-height: 460px;
  align-content: center;
  justify-items: center;
}

.sequence_logic-board {
  aspect-ratio: auto;
  min-height: 420px;
  align-content: center;
  justify-items: center;
}

.odd_one_out-board {
  aspect-ratio: auto;
  min-height: 420px;
  align-content: center;
  justify-items: center;
}

.mental_math-board {
  aspect-ratio: auto;
  min-height: 420px;
  align-content: center;
  justify-items: center;
}

.coloring_logic-board {
  aspect-ratio: auto;
  min-height: 440px;
  align-content: center;
  justify-items: center;
}


.logic_lanterns-board {
  aspect-ratio: auto;
  min-height: 440px;
  align-content: center;
  justify-items: center;
}

.logic-lanterns-wrap {
  display: grid;
  gap: 12px;
  justify-items: center;
  width: min(460px, 100%);
}

.logic-lanterns-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 9px;
  width: min(390px, 90vw);
  padding: 14px;
  border: 1px solid var(--game-line);
  border-radius: 18px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--game-soft) 75%, var(--ink)), var(--game-board));
}

.lantern-cell {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border: 1px solid var(--game-line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 16%, var(--game-soft));
  cursor: pointer;
}

.lantern-cell::after {
  content: "";
  width: 58%;
  aspect-ratio: 1;
  border-radius: 999px;
  background: color-mix(in srgb, var(--muted) 42%, transparent);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ink) 18%, transparent);
}

.lantern-cell.on::after {
  background: radial-gradient(circle, #fff7bc 0 30%, var(--game-accent) 64%, #d47c2c 100%);
  box-shadow: 0 0 18px color-mix(in srgb, var(--game-accent) 68%, transparent);
}

.logic-lanterns-meta {
  margin: 0;
  color: var(--muted);
  font-weight: 850;
  text-align: center;
}

.magic_sort-board {
  aspect-ratio: auto;
  min-height: 430px;
  align-content: center;
  justify-items: center;
}

.junior_word_search-board {
  aspect-ratio: auto;
  min-height: 460px;
  align-content: center;
  justify-items: center;
}

.dice_adventure-board {
  aspect-ratio: auto;
  min-height: 440px;
  align-content: center;
  justify-items: center;
}

.snail_race-board {
  aspect-ratio: auto;
  min-height: 440px;
  align-content: center;
  justify-items: center;
}

.bee_garden-board {
  aspect-ratio: auto;
  min-height: 440px;
  align-content: center;
  justify-items: center;
}

.culture_quiz-board {
  aspect-ratio: auto;
  min-height: 520px;
  align-content: center;
  justify-items: center;
}

.word_guess-board {
  aspect-ratio: auto;
  min-height: 420px;
  align-content: center;
  justify-items: center;
}

.orbital_defense-board {
  aspect-ratio: auto;
  min-height: 460px;
  align-content: center;
  justify-items: center;
}

.mastermind-board {
  aspect-ratio: auto;
  min-height: 420px;
  align-content: center;
  justify-items: center;
}

.solitaire-board,
.solitaire_duel-board {
  aspect-ratio: auto;
  min-height: 520px;
  align-content: start;
  gap: 18px;
}

.tarot-board,
.belote-board,
.bridge-board {
  aspect-ratio: auto;
  min-height: 560px;
  align-content: start;
}

.game-cell {
  position: relative;
  min-width: 0;
  min-height: 0;
  aspect-ratio: 1;
  border: 0;
  border-radius: 12px;
  background: color-mix(in srgb, var(--white) 8%, transparent);
  cursor: pointer;
}

.game-cell:hover,
.game-cell.legal {
  background: color-mix(in srgb, var(--game-accent) 20%, transparent);
}

.game-cell::after {
  content: "";
  position: absolute;
  inset: 13%;
  border-radius: 999px;
  transform: scale(.86);
  opacity: 0;
  transition: transform .16s ease, opacity .16s ease;
}

.game-cell.black::after,
.game-cell.white::after,
.game-cell.black_king::after,
.game-cell.white_king::after {
  opacity: 1;
  transform: scale(1);
}

.game-cell.black::after,
.game-cell.black_king::after {
  background: radial-gradient(circle at 32% 28%, var(--game-piece-dark-glint), var(--game-piece-dark) 64%);
}

.game-cell.white::after,
.game-cell.white_king::after {
  background: radial-gradient(circle at 30% 25%, var(--game-piece-light), var(--game-piece-light-shade) 72%);
}

.connect4-cell {
  border-radius: 999px;
  background: color-mix(in srgb, var(--white) 84%, transparent);
}

.connect4-cell.blocked:disabled {
  cursor: default;
  opacity: .76;
}

.connect4-cell.legal:not(:disabled) {
  box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--game-accent) 46%, transparent);
}

.connect4-cell.black::after {
  background: radial-gradient(circle at 35% 25%, color-mix(in srgb, var(--game-piece-red) 55%, var(--white)), var(--game-piece-red) 70%);
}

.connect4-cell.white::after {
  background: radial-gradient(circle at 35% 25%, color-mix(in srgb, var(--game-piece-yellow) 45%, var(--white)), var(--game-piece-yellow) 70%);
}

.connect4-cell.falling::after {
  animation: connect4-drop .48s cubic-bezier(.18, .82, .22, 1.02);
}

@keyframes connect4-drop {
  0% {
    opacity: .9;
    transform: translateY(calc(-1 * var(--drop-rows, 6) * 112%)) scale(.86);
  }

  74% {
    transform: translateY(5%) scale(1.02);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.go-cell {
  border-radius: 0;
  background: transparent;
}

.go-cell::before {
  content: "";
  position: absolute;
  inset: 18%;
  border: 2px solid transparent;
  border-radius: 999px;
  opacity: 0;
  transition: opacity .12s ease, border-color .12s ease, background .12s ease;
}

.go-cell::after {
  inset: 18%;
}

.go-cell:hover {
  background: transparent;
}

.go-cell:disabled {
  cursor: default;
}

.go-cell.legal:not(:disabled)::before {
  border-color: color-mix(in srgb, var(--game-accent) 42%, transparent);
  opacity: .55;
}

.go-cell:hover::before {
  border-color: color-mix(in srgb, var(--game-accent) 78%, var(--ink));
  background: color-mix(in srgb, var(--white) 18%, transparent);
  opacity: 1;
}

.go-cell.last::before {
  border-color: color-mix(in srgb, var(--game-accent) 82%, var(--ink));
  opacity: 1;
}

.tafl-cell.light {
  background: color-mix(in srgb, var(--game-cell-light) 38%, transparent);
}

.tafl-cell.dark {
  background: color-mix(in srgb, var(--game-cell-dark) 42%, transparent);
}

.tafl-cell.royal-square {
  box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--game-accent) 66%, transparent);
}

.tafl-cell:disabled {
  cursor: default;
}

.tafl-cell.piece-choice:not(:disabled) {
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--game-accent) 34%, transparent);
}

.tafl-cell.target:not(:disabled) {
  box-shadow:
    inset 0 0 0 4px color-mix(in srgb, var(--game-accent) 60%, transparent),
    0 8px 18px rgb(var(--black-rgb) / 12%);
}

.tafl-cell.attacker::after,
.tafl-cell.defender::after,
.tafl-cell.king::after {
  opacity: 1;
  transform: scale(1);
}

.tafl-cell.attacker::after {
  background: radial-gradient(circle at 32% 26%, var(--game-piece-dark-glint), var(--game-piece-dark) 68%);
}

.tafl-cell.defender::after {
  background: radial-gradient(circle at 32% 26%, var(--game-piece-light), var(--game-warm) 70%);
}

.tafl-cell.king::after {
  background: radial-gradient(circle at 32% 26%, var(--game-piece-light), var(--game-piece-yellow) 72%);
}

.tafl-cell.king::before {
  content: "\2605";
  position: absolute;
  z-index: 1;
  inset: 0;
  display: grid;
  place-items: center;
  color: color-mix(in srgb, var(--game-wood) 72%, var(--ink));
  font-size: clamp(14px, 2vw, 22px);
}

.catmouse-cell.light {
  background: color-mix(in srgb, var(--game-cell-light) 34%, transparent);
}

.catmouse-cell.dark {
  background: color-mix(in srgb, var(--game-success) 38%, transparent);
}

.catmouse-cell.refuge {
  box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--game-accent) 62%, transparent);
}

.catmouse-cell:disabled {
  cursor: default;
  opacity: .64;
}

.catmouse-cell.piece-choice:not(:disabled) {
  box-shadow:
    inset 0 0 0 2px color-mix(in srgb, var(--game-accent) 34%, transparent),
    0 6px 14px rgb(var(--black-rgb) / 8%);
}

.catmouse-cell.target:not(:disabled) {
  box-shadow:
    inset 0 0 0 4px color-mix(in srgb, var(--game-accent) 62%, transparent),
    0 8px 18px rgb(var(--black-rgb) / 12%);
}

.catmouse-cell.cat::after,
.catmouse-cell.mouse::after {
  opacity: 1;
  transform: scale(1);
}

.catmouse-cell.cat::after {
  background: radial-gradient(circle at 35% 25%, var(--game-piece-dark-glint), var(--game-piece-dark) 68%);
}

.catmouse-cell.mouse::after {
  background: radial-gradient(circle at 35% 25%, var(--game-piece-light), var(--game-warm) 70%);
}

.catmouse-cell.mouse::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 30% 26% 48%;
  border-radius: 999px 999px 40% 40%;
  background: color-mix(in srgb, var(--game-wood) 80%, transparent);
}

.conquest-wrap {
  display: grid;
  gap: 14px;
  width: min(760px, 100%);
}

.conquest-map {
  position: relative;
  min-height: 430px;
  border: 1px solid color-mix(in srgb, var(--game-line) 72%, transparent);
  border-radius: 16px;
  background:
    linear-gradient(135deg, color-mix(in srgb, #7cc4ff 24%, transparent), transparent),
    color-mix(in srgb, var(--game-soft) 88%, var(--ink));
  overflow: hidden;
}

.conquest-link {
  position: absolute;
  z-index: 1;
  height: 3px;
  transform-origin: left center;
  background: color-mix(in srgb, var(--game-line) 70%, transparent);
}

.conquest-node {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  gap: 2px;
  width: clamp(60px, 20%, 80px);
  min-height: 56px;
  border: 2px solid color-mix(in srgb, var(--game-line) 72%, transparent);
  border-radius: 12px;
  color: var(--ink);
  font-weight: 900;
  transform: translate(-50%, -50%);
  cursor: pointer;
  box-shadow: 0 10px 20px rgb(var(--black-rgb) / 16%);
}

.conquest-node strong {
  font-size: clamp(.66rem, 2.7vw, .8rem);
}

.conquest-node span {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: rgb(var(--white-rgb) / 64%);
}

.conquest-node small {
  display: flex;
  gap: 3px;
  align-items: center;
  min-height: 16px;
  font-size: .66rem;
  line-height: 1;
}

.conquest-node i {
  display: inline-grid;
  place-items: center;
  min-width: 15px;
  height: 15px;
  border-radius: 999px;
  background: rgb(var(--black-rgb) / 22%);
  color: var(--white);
  font-style: normal;
  font-size: .58rem;
}

.conquest-node.black {
  background: linear-gradient(145deg, #f59f6b, #b6402b);
}

.conquest-node.white {
  background: linear-gradient(145deg, #fff5c8, #d2a33a);
}

.conquest-node.neutral {
  background: linear-gradient(145deg, #d8ded0, #8fa08f);
}

.conquest-node.factory {
  box-shadow: 0 10px 20px rgb(var(--black-rgb) / 16%), inset 0 -7px 0 rgb(var(--black-rgb) / 18%);
}

.conquest-node.fortified {
  border-color: color-mix(in srgb, var(--ink) 82%, var(--game-accent));
}

.conquest-node.fortified::before {
  content: "";
  position: absolute;
  inset: -7px;
  border: 2px dashed color-mix(in srgb, var(--ink) 65%, transparent);
  border-radius: 18px;
  pointer-events: none;
}

.conquest-node.selected {
  outline: 3px solid var(--game-accent);
  outline-offset: 3px;
}

.conquest-node:disabled {
  cursor: default;
  filter: saturate(.72);
  opacity: .68;
}

.conquest-node.target:not(:disabled) {
  border-color: var(--danger);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--danger) 22%, transparent), 0 10px 20px rgb(var(--black-rgb) / 16%);
}

.conquest-panel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--game-line) 72%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--paper) 22%, transparent);
  color: var(--ink);
  font-weight: 800;
}

.domino-wrap,
.domino-solo-wrap,
.horses-wrap {
  display: grid;
  gap: 14px;
  width: min(820px, 100%);
}

.domino-status,
.horses-status,
.domino-opponents,
.domino-controls,
.horses-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--game-line) 72%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--paper) 22%, transparent);
  color: var(--ink);
  font-weight: 800;
}

.domino-chain,
.domino-hand,
.domino-solo-chain,
.domino-solo-hand {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 86px;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--game-line) 70%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--game-soft) 82%, transparent);
}

.domino-tile {
  display: inline-grid;
  grid-template-columns: 1fr 1px 1fr;
  place-items: center;
  min-width: 72px;
  min-height: 38px;
  border: 2px solid color-mix(in srgb, var(--ink) 72%, transparent);
  border-radius: 8px;
  background: #fff8e6;
  color: #1f252c;
  font-weight: 950;
  box-shadow: 0 8px 16px rgb(var(--black-rgb) / 14%);
}

.domino-tile i {
  width: 1px;
  height: 80%;
  background: color-mix(in srgb, var(--ink) 46%, transparent);
}

.domino-tile.double {
  background: #fff0bd;
}

.domino-choice {
  display: grid;
  justify-items: center;
  gap: 6px;
}

.domino-choice.disabled {
  opacity: .48;
}

.domino-choice-actions {
  display: flex;
  gap: 4px;
}

.domino-choice-actions button,
.domino-solo-choice,
.horse-stable button {
  border: 1px solid color-mix(in srgb, var(--game-line) 72%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--paper) 70%, white);
  color: var(--ink);
  font-weight: 850;
  cursor: pointer;
}

.domino-solo-chain {
  min-height: 104px;
  background:
    linear-gradient(90deg, transparent 0 18px, color-mix(in srgb, var(--game-line) 38%, transparent) 18px 20px, transparent 20px),
    color-mix(in srgb, #f7e7bc 70%, var(--game-soft));
  background-size: 42px 100%;
}

.domino-solo-open {
  display: inline-grid;
  place-items: center;
  min-width: 78px;
  min-height: 40px;
  padding: 0 12px;
  border: 2px dashed color-mix(in srgb, var(--ink) 58%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--paper) 78%, white);
  color: var(--ink);
  font-weight: 950;
}

.domino-solo-choice {
  display: inline-grid;
  place-items: center;
  min-width: 92px;
  min-height: 62px;
  padding: 10px;
  border-radius: 12px;
}

.domino-solo-choice:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgb(var(--black-rgb) / 16%);
}

.domino-solo-choice.disabled,
.domino-solo-choice:disabled {
  cursor: not-allowed;
  opacity: .42;
  transform: none;
}

.domino-solo-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  color: var(--ink-soft);
  font-weight: 850;
}

.domino-choice-actions button:disabled,
.horse-stable button:disabled {
  cursor: not-allowed;
  opacity: .42;
}

.horses-track {
  display: grid;
  grid-template-columns: repeat(10, minmax(34px, 1fr));
  gap: 6px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--game-line) 70%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--game-soft) 82%, transparent);
}

.horse-cell {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 42px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--paper) 54%, transparent);
  color: color-mix(in srgb, var(--ink) 62%, transparent);
  font-size: .72rem;
  font-weight: 850;
}

.horse-dot {
  position: absolute;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 2px solid rgb(var(--white-rgb) / 78%);
  border-radius: 999px;
  color: white;
  font-size: .7rem;
  font-style: normal;
  box-shadow: 0 4px 10px rgb(var(--black-rgb) / 18%);
}

.horse-dot.red,
.horse-stable.red strong {
  background: #cf3d3d;
}

.horse-dot.blue,
.horse-stable.blue strong {
  background: #3271d4;
}

.horse-dot.green,
.horse-stable.green strong {
  background: #348c54;
}

.horse-dot.yellow,
.horse-stable.yellow strong {
  background: #d69b22;
}

.horses-stables {
  display: grid;
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  gap: 10px;
}

.horse-stable {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--game-line) 72%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--paper) 20%, transparent);
}

.horse-stable strong {
  padding: 5px 8px;
  border-radius: 999px;
  color: white;
  text-align: center;
}

.checkers-cell.light {
  background: color-mix(in srgb, var(--white) 24%, transparent);
}

.checkers-cell.dark {
  background: color-mix(in srgb, var(--black) 18%, var(--game-board));
}

.chess-cell.light {
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--paper) 62%, var(--game-board));
  color: inherit;
  font-size: clamp(26px, 5vw, 46px);
  line-height: 1;
  text-shadow: none;
}

.chess-cell.dark {
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--moss) 58%, var(--black));
  font-size: clamp(26px, 5vw, 46px);
  line-height: 1;
}

.chess-cell.chess-piece-white {
  color: #fff7df;
  -webkit-text-stroke: 1px #27313c;
  text-shadow: 0 2px 4px rgb(var(--black-rgb) / 42%);
}

.chess-cell.chess-piece-black {
  color: #111723;
  -webkit-text-stroke: .5px rgb(var(--white-rgb) / 38%);
  text-shadow: 0 1px 0 rgb(var(--white-rgb) / 32%), 0 2px 5px rgb(var(--black-rgb) / 22%);
}

.chess-cell::after {
  display: none;
}

.chess-cell:disabled {
  cursor: default;
}

.chess-cell.piece-choice:not(:disabled) {
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--game-accent) 34%, transparent);
}

.chess-cell.target:not(:disabled) {
  box-shadow:
    inset 0 0 0 4px color-mix(in srgb, var(--game-accent) 60%, transparent),
    0 8px 18px rgb(var(--black-rgb) / 12%);
}

.chess-cell.selected {
  outline: 3px solid var(--game-accent);
  outline-offset: -3px;
}

.chess-cell.legal::before {
  content: "";
  position: absolute;
  inset: 34%;
  border-radius: 999px;
  background: color-mix(in srgb, var(--game-accent) 58%, transparent);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--game-accent) 16%, transparent);
}

.checkers-cell:disabled {
  cursor: default;
}

.checkers-cell.piece-choice:not(:disabled) {
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--game-accent) 34%, transparent);
}

.checkers-cell.target:not(:disabled) {
  box-shadow:
    inset 0 0 0 4px color-mix(in srgb, var(--game-accent) 60%, transparent),
    0 8px 18px rgb(var(--black-rgb) / 12%);
}

.checkers-cell.selected {
  outline: 3px solid var(--game-accent);
}

.checkers-cell.black_king::before,
.checkers-cell.white_king::before {
  content: "\2605";
  position: absolute;
  z-index: 1;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--game-accent);
  font-size: clamp(14px, 2vw, 22px);
}

.tictactoe-cell,
.ultimate-cell {
  border-radius: 8px;
}

.tictactoe-cell {
  background: color-mix(in srgb, var(--paper) 14%, transparent);
  border: 2px solid color-mix(in srgb, var(--game-accent) 36%, transparent);
}

.tictactoe-cell.blocked:disabled,
.ultimate-cell.blocked:disabled {
  cursor: default;
  opacity: .62;
}

.tictactoe-cell.legal:not(:disabled),
.ultimate-cell.legal:not(:disabled) {
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--game-accent) 36%, transparent);
}

.ultimate-cell:nth-child(3n) {
  border-right: 2px solid color-mix(in srgb, var(--game-accent) 45%, transparent);
}

.ultimate-cell:nth-child(n+19):nth-child(-n+27),
.ultimate-cell:nth-child(n+46):nth-child(-n+54) {
  border-bottom: 2px solid color-mix(in srgb, var(--game-accent) 45%, transparent);
}

.tictactoe-cell.black::before,
.tictactoe-cell.white::before,
.ultimate-cell.black::before,
.ultimate-cell.white::before {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: clamp(18px, 3vw, 32px);
  font-weight: 900;
  color: var(--ink);
}

.tictactoe-cell.black::before,
.ultimate-cell.black::before {
  content: "";
  width: 68%;
  aspect-ratio: 1;
  background: #111723;
  clip-path: polygon(16% 0, 50% 34%, 84% 0, 100% 16%, 66% 50%, 100% 84%, 84% 100%, 50% 66%, 16% 100%, 0 84%, 34% 50%, 0 16%);
  filter: drop-shadow(0 2px 1px rgb(var(--white-rgb) / 28%));
}

.tictactoe-cell.white::before,
.ultimate-cell.white::before {
  content: "";
  width: 68%;
  aspect-ratio: 1;
  border: clamp(5px, 1.1vw, 9px) solid #fff7df;
  border-radius: 999px;
  box-shadow: 0 2px 4px rgb(var(--black-rgb) / 36%), inset 0 2px 4px rgb(var(--black-rgb) / 22%);
}

.tictactoe-cell.black::after,
.tictactoe-cell.white::after,
.ultimate-cell.black::after,
.ultimate-cell.white::after {
  display: none;
}

.tictactoe-cell.black::before,
.tictactoe-cell.white::before {
  font-size: clamp(42px, 10vw, 78px);
}

.mancala-lane {
  display: grid;
  grid-column: 2;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 8px;
}

.mancala-pit,
.mancala-store {
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--game-line) 78%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--paper) 16%, transparent);
  color: var(--ink);
  font-size: clamp(18px, 3vw, 30px);
  font-weight: 900;
}

.mancala-pit::after {
  display: none;
}

.mancala-store {
  border-radius: 28px;
  min-height: 100%;
}

.mancala-store.white {
  grid-column: 1;
}

.mancala-store.black {
  grid-column: 3;
}

.mancala-pit:disabled {
  cursor: default;
  opacity: .52;
}

.mancala-pit.legal:not(:disabled) {
  box-shadow:
    inset 0 0 0 3px color-mix(in srgb, var(--game-accent) 48%, transparent),
    0 10px 20px rgb(var(--black-rgb) / 12%);
}

.nim-count {
  color: var(--ink);
  font-size: clamp(28px, 5vw, 54px);
}

.nim-pile {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  max-width: 460px;
}

.nim-stick {
  width: 12px;
  height: clamp(72px, 12vw, 116px);
  border-radius: 999px;
  background: linear-gradient(180deg, #f6d58c, #9f6530);
  box-shadow: inset 0 0 0 1px rgb(var(--white-rgb) / 28%), 0 8px 16px rgb(var(--black-rgb) / 18%);
}

.nim-controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.memory-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(64px, 1fr));
  gap: 10px;
  width: min(460px, 100%);
}

.memory-card {
  display: grid;
  place-items: center;
  min-height: 88px;
  border: 1px solid color-mix(in srgb, var(--game-line) 72%, transparent);
  border-radius: 12px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--game-accent) 28%, transparent), transparent),
    var(--game-soft);
  color: var(--ink);
  font-weight: 900;
  cursor: pointer;
}

.memory-card.open,
.memory-card.matched {
  background: color-mix(in srgb, var(--paper) 84%, var(--game-accent));
}

.memory-card.matched {
  box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--game-accent) 58%, transparent);
}

.memory-moves {
  margin: 0;
  color: var(--muted);
  font-weight: 800;
}

.blackjack-wrap,
.battle-wrap {
  display: grid;
  justify-items: center;
  gap: 14px;
  width: min(560px, 100%);
}

.blackjack-hand,
.battle-pile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 104px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--game-line) 72%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--paper) 24%, transparent);
}

.blackjack-hand strong,
.battle-pile strong {
  flex-basis: 100%;
  color: var(--ink);
  text-align: center;
}

.mini-card {
  display: grid;
  place-items: center;
  width: calc(54px * var(--game-card-scale, 1));
  height: calc(76px * var(--game-card-scale, 1));
  border: 1px solid color-mix(in srgb, var(--game-line) 78%, transparent);
  border-radius: var(--game-card-radius, 8px);
  background: linear-gradient(160deg, var(--game-card-face, #fffdf6), color-mix(in srgb, var(--game-card-face, #fffdf6) 72%, var(--game-card-accent, #d2a33a)));
  box-shadow: 0 8px 18px rgb(var(--black-rgb) / 12%);
  color: #111723;
  font-weight: 900;
}

.mini-card.red {
  color: #b42318;
}

.mini-card.hidden {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--game-card-accent, var(--game-accent)) 36%, transparent), transparent),
    var(--game-card-back, color-mix(in srgb, var(--ink) 72%, var(--game-board)));
  color: var(--paper);
}

.blackjack-controls,
.battle-controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.battle-arena {
  display: grid;
  grid-template-columns: repeat(2, minmax(120px, 1fr));
  gap: 12px;
  width: 100%;
}

.battle-count {
  flex-basis: 100%;
  color: var(--muted);
  text-align: center;
  font-size: .9rem;
  font-weight: 800;
}

.blackjack-message,
.battle-message,
.battle-pot {
  margin: 0;
  color: var(--muted);
  text-align: center;
  font-weight: 800;
}

.families-wrap {
  display: grid;
  justify-items: center;
  gap: 14px;
  width: min(680px, 100%);
}

.families-status,
.families-hand,
.families-requests,
.families-books {
  width: 100%;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--game-line) 72%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--paper) 22%, transparent);
}

.families-status {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  color: var(--ink);
}

.families-hand {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.family-card {
  display: grid;
  place-items: center;
  width: 92px;
  min-height: 112px;
  padding: 8px;
  border: 1px solid color-mix(in srgb, var(--game-line) 78%, transparent);
  border-radius: 9px;
  background: linear-gradient(160deg, #fffdf6, #ecd9ad);
  box-shadow: 0 8px 18px rgb(var(--black-rgb) / 12%);
  color: #111723;
  text-align: center;
  font-size: .82rem;
  font-weight: 900;
}

.family-card.forest { border-color: #2f7d4f; }
.family-card.ocean { border-color: #2f6fb3; }
.family-card.sky { border-color: #72b7d8; }
.family-card.mountain { border-color: #8f7458; }
.family-card.garden { border-color: #d95e27; }
.family-card.library { border-color: #6741a7; }
.family-card.stars { border-color: #d8ad2d; }

.families-requests {
  display: grid;
  gap: 10px;
}

.families-request-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.families-request-group strong {
  min-width: 110px;
  color: var(--ink);
}

.families-request-group button,
.families-deal {
  border: 1px solid color-mix(in srgb, var(--game-line) 78%, transparent);
  border-radius: 999px;
  padding: 8px 12px;
  background: var(--paper);
  color: var(--ink);
  font-weight: 800;
  cursor: pointer;
}

.families-deal {
  justify-self: center;
  min-width: min(240px, 100%);
  background: color-mix(in srgb, var(--game-accent) 28%, var(--paper));
}

.families-books {
  display: grid;
  grid-template-columns: repeat(2, minmax(120px, 1fr));
  gap: 10px;
}

.families-book-pile {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.families-book-pile strong {
  width: 100%;
  color: var(--ink);
}

.families-book-pile span {
  border-radius: 999px;
  padding: 5px 9px;
  background: color-mix(in srgb, var(--game-accent) 18%, var(--paper));
  color: var(--ink);
  font-size: .82rem;
  font-weight: 800;
}

.families-message {
  margin: 0;
  color: var(--muted);
  text-align: center;
  font-weight: 800;
}

.battleship-wrap {
  display: grid;
  justify-items: center;
  gap: 14px;
  width: min(420px, 100%);
}

.battleship-grid {
  display: grid;
  grid-template-columns: repeat(var(--sea-size), minmax(44px, 1fr));
  gap: 6px;
  width: min(360px, 100%);
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--game-line) 78%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--game-water) 22%, var(--game-soft));
}

.battleship-cell {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border: 1px solid color-mix(in srgb, var(--game-water) 48%, var(--ink));
  border-radius: 10px;
  background:
    radial-gradient(circle at 30% 25%, rgb(var(--white-rgb) / 34%), transparent 28%),
    color-mix(in srgb, var(--game-water) 68%, var(--paper));
  color: #102017;
  font-weight: 900;
  cursor: pointer;
}

.battleship-cell:hover:not(:disabled) {
  box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--game-accent) 68%, transparent);
}

.battleship-cell.hit {
  background:
    radial-gradient(circle, var(--game-card-face) 0 18%, transparent 20%),
    radial-gradient(circle at 58% 42%, var(--game-warm) 0 22%, transparent 24%),
    var(--game-danger);
}

.battleship-cell.miss {
  background:
    radial-gradient(circle at 50% 45%, transparent 0 28%, rgb(var(--white-rgb) / 88%) 30% 36%, transparent 38%),
    color-mix(in srgb, var(--white) 74%, var(--game-water));
  color: color-mix(in srgb, var(--ink) 70%, var(--game-water));
}

.battleship-cell:disabled {
  cursor: default;
}

.battleship-meta {
  margin: 0;
  color: var(--muted);
  font-weight: 800;
}

.maze-wrap {
  display: grid;
  justify-items: center;
  gap: 14px;
  width: min(430px, 100%);
}

.maze-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(34px, 1fr));
  gap: 4px;
  width: min(360px, 100%);
  padding: 8px;
  border: 1px solid color-mix(in srgb, var(--game-line) 78%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--game-line) 18%, transparent);
}

.maze-cell {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border-radius: 8px;
  background: var(--paper);
  color: var(--ink);
  font-weight: 900;
}

.maze-cell.wall {
  background: color-mix(in srgb, var(--ink) 74%, var(--game-line));
}

.maze-cell.start {
  background: color-mix(in srgb, #7cc4ff 36%, var(--paper));
}

.maze-cell.exit {
  background: color-mix(in srgb, #65d88c 42%, var(--paper));
}

.maze-cell.player {
  background: #fdd663;
  box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--ink) 48%, transparent);
}

.maze-controls {
  display: grid;
  grid-template-areas:
    ". up ."
    "left center right"
    ". down .";
  grid-template-columns: repeat(3, minmax(74px, 1fr));
  gap: 8px;
  width: min(300px, 100%);
}

.maze-controls button {
  min-height: 44px;
  border: 1px solid color-mix(in srgb, var(--game-line) 78%, transparent);
  border-radius: 10px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--game-soft) 88%, white), var(--game-soft));
  color: var(--ink);
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 8px 18px rgb(var(--black-rgb) / 10%);
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}

.maze-controls button[data-maze-dir="up"] { grid-area: up; }
.maze-controls button[data-maze-dir="left"] { grid-area: left; }
.maze-controls button[data-maze-dir="right"] { grid-area: right; }
.maze-controls button[data-maze-dir="down"] { grid-area: down; }

.maze-controls button:hover,
.maze-controls button:focus-visible {
  transform: translateY(-2px);
  border-color: var(--game-accent);
  box-shadow: 0 12px 22px rgb(var(--black-rgb) / 14%);
  outline: none;
}

.maze-controls button:active:not(:disabled) {
  transform: translateY(0);
}

.maze-controls button:disabled {
  cursor: default;
  opacity: .48;
  box-shadow: none;
}

.maze-meta {
  margin: 0;
  color: var(--muted);
  font-weight: 800;
}

.sokoban-wrap {
  display: grid;
  gap: 12px;
  width: min(520px, 100%);
}

.sokoban-grid {
  display: grid;
  grid-template-columns: repeat(var(--sokoban-size, 7), 1fr);
  gap: 4px;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--game-line) 72%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--game-soft) 84%, var(--ink));
}

.sokoban-cell {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border-radius: 7px;
  background: color-mix(in srgb, var(--paper) 35%, transparent);
}

.sokoban-cell.wall {
  background: linear-gradient(145deg, #6b7280, #26303a);
}

.sokoban-cell.target::before {
  content: "";
  width: 42%;
  height: 42%;
  border-radius: 999px;
  background: var(--game-accent);
  opacity: .8;
}

.sokoban-cell.box::after {
  content: "";
  position: absolute;
  inset: 18%;
  border: 2px solid rgb(var(--black-rgb) / 22%);
  border-radius: 6px;
  background: linear-gradient(145deg, #f4ba66, #9b5d2a);
  box-shadow: 0 6px 12px rgb(var(--black-rgb) / 16%);
}

.sokoban-cell.player {
  box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--game-accent) 70%, transparent);
}

.sokoban-cell.player::after {
  content: "";
  position: absolute;
  inset: 22%;
  border-radius: 999px 999px 45% 45%;
  background: linear-gradient(145deg, #9ee6cf, #3271d4);
}

.sokoban-controls {
  display: grid;
  grid-template-areas:
    ". up ."
    "left center right"
    ". down .";
  grid-template-columns: repeat(3, minmax(86px, 1fr));
  gap: 8px;
  justify-self: center;
  width: min(340px, 100%);
}

.sokoban-controls button {
  min-height: 44px;
  border-radius: 10px;
  box-shadow: 0 8px 18px rgb(var(--black-rgb) / 10%);
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}

.sokoban-controls button[data-sokoban-dir="up"] { grid-area: up; }
.sokoban-controls button[data-sokoban-dir="left"] { grid-area: left; }
.sokoban-controls button[data-sokoban-dir="right"] { grid-area: right; }
.sokoban-controls button[data-sokoban-dir="down"] { grid-area: down; }

.sokoban-controls button:hover:not(:disabled),
.sokoban-controls button:focus-visible {
  transform: translateY(-2px);
  border-color: var(--game-accent);
  box-shadow: 0 12px 22px rgb(var(--black-rgb) / 14%);
  outline: none;
}

.sokoban-controls button:active:not(:disabled) {
  transform: translateY(0);
}

.sokoban-controls button:disabled {
  cursor: default;
  opacity: .48;
  box-shadow: none;
}

.sokoban-meta {
  margin: 0;
  color: var(--ink);
  font-weight: 850;
  text-align: center;
}

.puzzle-wrap {
  display: grid;
  justify-items: center;
  gap: 14px;
  width: min(560px, 100%);
}

.puzzle-meta,
.puzzle-players {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  color: var(--muted);
  font-weight: 800;
  text-align: center;
}

.puzzle-meta strong {
  color: var(--ink);
}

.puzzle-grid {
  display: grid;
  grid-template-columns: repeat(var(--puzzle-size), minmax(42px, 1fr));
  gap: 4px;
  width: min(420px, 100%);
  padding: 8px;
  border: 1px solid color-mix(in srgb, var(--game-line) 78%, transparent);
  border-radius: 12px;
  background: var(--game-soft);
}

.puzzle-piece {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border: 1px solid color-mix(in srgb, var(--game-line) 82%, transparent);
  border-radius: 8px;
  background-image: var(--puzzle-image);
  background-size: calc(var(--puzzle-size) * 100%) calc(var(--puzzle-size) * 100%);
  color: #102017;
  font-weight: 900;
  cursor: pointer;
  box-shadow: inset 0 0 0 999px color-mix(in srgb, var(--paper) 18%, transparent);
}

.puzzle-piece.placed {
  box-shadow: none;
}

.puzzle-piece.selected {
  outline: 4px solid #fdd663;
  outline-offset: -4px;
}

.puzzle-players span {
  border: 1px solid color-mix(in srgb, var(--game-line) 74%, transparent);
  border-radius: 999px;
  padding: 5px 9px;
  background: var(--paper);
}

.puzzle-players span.active {
  background: #fdd663;
  color: #102017;
}

.simon-wrap {
  display: grid;
  justify-items: center;
  gap: 16px;
  width: min(520px, 100%);
}

.simon-meta,
.simon-message {
  margin: 0;
  color: var(--muted);
  font-weight: 800;
  text-align: center;
}

.simon-message.missed {
  color: color-mix(in srgb, #b42318 82%, var(--ink));
}

.simon-restart {
  min-width: 150px;
}

.simon-sequence {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
}

.simon-dot {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 2px solid color-mix(in srgb, var(--paper) 74%, var(--game-line));
  border-radius: 50%;
  color: #102017;
  font-size: 0.86rem;
  font-weight: 900;
  box-shadow: 0 5px 14px color-mix(in srgb, #15251d 14%, transparent);
}

.simon-pads {
  display: grid;
  grid-template-columns: repeat(2, minmax(118px, 1fr));
  gap: 12px;
  width: min(360px, 100%);
}

.simon-pad {
  min-height: 92px;
  border: 2px solid color-mix(in srgb, var(--paper) 70%, var(--game-line));
  border-radius: 16px;
  color: #102017;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 12px 24px color-mix(in srgb, #15251d 15%, transparent);
}

.simon-pad:hover {
  transform: translateY(-1px);
}

.simon-red {
  background: #f97066;
}

.simon-yellow {
  background: #fdd663;
}

.simon-green {
  background: #65d88c;
}

.simon-blue {
  background: #7cc4ff;
}

.taquin-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(72px, 1fr));
  gap: 10px;
  width: min(330px, 100%);
}

.taquin-tile {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border: 1px solid color-mix(in srgb, var(--game-line) 76%, transparent);
  border-radius: 12px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--game-accent) 22%, transparent), transparent),
    var(--paper);
  color: var(--ink);
  font-size: 1.5rem;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 10px 20px color-mix(in srgb, #15251d 12%, transparent);
}

.taquin-tile.movable {
  box-shadow:
    inset 0 0 0 3px color-mix(in srgb, var(--game-accent) 48%, transparent),
    0 10px 20px color-mix(in srgb, #15251d 12%, transparent);
}

.taquin-tile:disabled:not(.blank) {
  cursor: default;
  opacity: .58;
  box-shadow: none;
}

.taquin-tile.blank {
  background:
    repeating-linear-gradient(45deg, color-mix(in srgb, var(--game-line) 36%, transparent) 0 6px, transparent 6px 12px),
    var(--game-soft);
  cursor: default;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--game-line) 48%, transparent);
}

.taquin-moves {
  margin: 0;
  color: var(--muted);
  font-weight: 800;
}

.orbital-wrap {
  display: grid;
  gap: 14px;
  justify-items: center;
  width: min(520px, 100%);
}

.orbital-grid {
  display: grid;
  grid-template-columns: repeat(var(--orbital-width, 9), minmax(28px, 1fr));
  gap: 5px;
  width: min(480px, 100%);
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--game-line) 72%, transparent);
  border-radius: 16px;
  background:
    radial-gradient(circle at 22% 18%, rgb(var(--white-rgb) / 24%) 0 1px, transparent 2px),
    radial-gradient(circle at 78% 42%, rgb(var(--white-rgb) / 18%) 0 1px, transparent 2px),
    linear-gradient(180deg, #101827, #1d2a3b 62%, #233348);
  box-shadow: inset 0 -18px 0 rgb(var(--white-rgb) / 5%), 0 16px 32px rgb(var(--black-rgb) / 18%);
}

.orbital-cell {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border-radius: 8px;
  background: rgb(var(--white-rgb) / 4%);
}

.orbital-cell.invader::before {
  content: "";
  width: 68%;
  aspect-ratio: 1;
  border-radius: 42% 42% 18% 18%;
  background: linear-gradient(145deg, #9ee6cf, #3271d4);
  box-shadow: inset 0 -6px 0 rgb(var(--black-rgb) / 18%), 0 0 12px rgb(124 196 255 / 35%);
}

.orbital-cell.guard::before {
  background: linear-gradient(145deg, #fdd663, #d95e27);
}

.orbital-cell.drone::before {
  border-radius: 50% 50% 18% 18%;
  background: linear-gradient(145deg, #c9a4ff, #6741a7);
}

.orbital-cell.bolt::after {
  content: "";
  position: absolute;
  width: 18%;
  height: 72%;
  border-radius: 999px;
  background: #fff7a8;
  box-shadow: 0 0 12px #fff7a8;
}

.orbital-cell.ship::before {
  content: "";
  width: 78%;
  aspect-ratio: 1;
  clip-path: polygon(50% 0, 92% 100%, 50% 76%, 8% 100%);
  background: linear-gradient(145deg, #fff7df, #f47a32);
  filter: drop-shadow(0 0 10px rgb(253 214 99 / 54%));
}

.orbital-controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.orbital-meta {
  margin: 0;
  color: var(--muted);
  text-align: center;
  font-weight: 800;
}

.tangram-wrap {
  display: grid;
  justify-items: center;
  gap: 14px;
  width: min(620px, 100%);
}

.tangram-shape {
  position: relative;
  width: min(380px, 100%);
  aspect-ratio: 1;
  border: 1px solid color-mix(in srgb, var(--game-line) 78%, transparent);
  border-radius: 16px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--game-accent) 16%, transparent), transparent),
    color-mix(in srgb, var(--game-soft) 84%, var(--paper));
  box-shadow: inset 0 0 0 1px rgb(var(--white-rgb) / 16%);
}

.tangram-slot {
  position: absolute;
  display: grid;
  place-items: center;
  border: 2px dashed color-mix(in srgb, var(--ink) 34%, transparent);
  background: color-mix(in srgb, var(--paper) 30%, transparent);
  cursor: pointer;
}

.tangram-slot:disabled:not(.filled) {
  cursor: default;
  opacity: .55;
}

.tangram-slot.target:not(:disabled) {
  border-color: color-mix(in srgb, var(--game-accent) 68%, transparent);
  background: color-mix(in srgb, var(--game-accent) 16%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--game-accent) 18%, transparent);
}

.tangram-slot.filled {
  border-style: solid;
  border-color: rgb(var(--white-rgb) / 62%);
  background: var(--piece-color);
  cursor: default;
  box-shadow: inset 0 -8px 12px rgb(var(--black-rgb) / 14%), 0 8px 16px rgb(var(--black-rgb) / 12%);
}

.tangram-slot.triangle,
.tangram-piece.triangle {
  clip-path: polygon(50% 4%, 96% 96%, 4% 96%);
}

.tangram-slot.diamond,
.tangram-piece.diamond {
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

.tangram-slot.square,
.tangram-piece.square {
  border-radius: 8px;
}

.tangram-slot.slot-0 {
  top: 7%;
  left: 12%;
  width: 36%;
  height: 36%;
  transform: rotate(-45deg);
}

.tangram-slot.slot-1 {
  top: 7%;
  right: 12%;
  width: 36%;
  height: 36%;
  transform: rotate(45deg);
}

.tangram-slot.slot-2 {
  top: 37%;
  left: 37%;
  width: 26%;
  height: 26%;
  transform: rotate(45deg);
}

.tangram-slot.slot-3 {
  top: 44%;
  left: 12%;
  width: 30%;
  height: 30%;
  transform: rotate(135deg);
}

.tangram-slot.slot-4 {
  top: 45%;
  right: 16%;
  width: 22%;
  height: 22%;
  transform: rotate(45deg);
}

.tangram-slot.slot-5 {
  bottom: 10%;
  left: 25%;
  width: 22%;
  height: 22%;
  transform: rotate(225deg);
}

.tangram-slot.slot-6 {
  right: 22%;
  bottom: 12%;
  width: 25%;
  height: 20%;
  transform: skew(-18deg);
}

.tangram-tray {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.tangram-piece {
  min-width: 84px;
  min-height: 54px;
  border: 2px solid rgb(var(--white-rgb) / 62%);
  background: var(--piece-color);
  color: #102017;
  font-size: .72rem;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 8px 16px rgb(var(--black-rgb) / 12%);
}

.tangram-piece.selected {
  outline: 4px solid var(--game-accent);
  outline-offset: 2px;
}

.tangram-piece:disabled {
  cursor: default;
  opacity: .42;
}

.tangram-meta {
  margin: 0;
  color: var(--muted);
  text-align: center;
  font-weight: 800;
}

.diamonds-grid {
  display: grid;
  grid-template-columns: repeat(8, minmax(30px, 1fr));
  gap: 6px;
  width: min(460px, 100%);
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--game-line) 78%, transparent);
  border-radius: 14px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--game-accent) 20%, transparent), transparent),
    color-mix(in srgb, var(--game-soft) 86%, var(--ink));
}

.diamond-gem {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border: 1px solid rgb(var(--white-rgb) / 34%);
  border-radius: 14px;
  box-shadow: inset 0 -8px 12px rgb(var(--black-rgb) / 18%), 0 6px 12px rgb(var(--black-rgb) / 14%);
  cursor: pointer;
}

.diamond-gem::before {
  content: "";
  width: 62%;
  aspect-ratio: 1;
  clip-path: polygon(50% 0, 92% 28%, 72% 100%, 28% 100%, 8% 28%);
  background:
    linear-gradient(135deg, rgb(var(--white-rgb) / 58%), transparent 42%),
    rgb(var(--white-rgb) / 28%);
  transform: none;
}

.diamond-gem::after {
  content: "";
  position: absolute;
  width: 34%;
  aspect-ratio: 1;
  clip-path: polygon(50% 0, 100% 45%, 50% 100%, 0 45%);
  background: rgb(var(--white-rgb) / 34%);
  opacity: .78;
}

.diamond-gem.selected {
  outline: 3px solid var(--game-accent);
  outline-offset: 2px;
}

.diamond-gem.ruby { background: linear-gradient(145deg, #ff8d7c, #b42318); }
.diamond-gem.sun { background: linear-gradient(145deg, #ffe37a, #d98b1d); }
.diamond-gem.leaf { background: linear-gradient(145deg, #8ee6a3, #2f7d4f); }
.diamond-gem.sky { background: linear-gradient(145deg, #8fd8ff, #2f6fb3); }
.diamond-gem.violet { background: linear-gradient(145deg, #c9a4ff, #6741a7); }
.diamond-gem.pearl { background: linear-gradient(145deg, #fff7d6, #c9b47a); }

.diamonds-meta,
.diamonds-message {
  margin: 0;
  color: var(--muted);
  text-align: center;
  font-weight: 800;
}

.sudoku-wrap {
  display: grid;
  justify-items: center;
  gap: 16px;
  width: min(420px, 100%);
}

.sudoku-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(58px, 1fr));
  width: min(320px, 100%);
  border: 3px solid color-mix(in srgb, var(--ink) 74%, var(--game-line));
  border-radius: 10px;
  overflow: hidden;
  background: var(--paper);
}

.sudoku-cell {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border: 1px solid color-mix(in srgb, var(--game-line) 82%, transparent);
  background: var(--paper);
  color: var(--ink);
  font-size: 1.35rem;
  font-weight: 900;
  cursor: pointer;
}

.sudoku-cell:nth-child(2),
.sudoku-cell:nth-child(6),
.sudoku-cell:nth-child(10),
.sudoku-cell:nth-child(14) {
  border-right-width: 3px;
}

.sudoku-cell:nth-child(n + 5):nth-child(-n + 8) {
  border-bottom-width: 3px;
}

.sudoku-cell.fixed {
  background: color-mix(in srgb, var(--game-accent) 20%, var(--paper));
  cursor: default;
}

.sudoku-cell.selected {
  box-shadow: inset 0 0 0 4px color-mix(in srgb, var(--game-accent) 58%, transparent);
}

.sudoku-cell.wrong {
  color: #b42318;
  background: color-mix(in srgb, #f97066 18%, var(--paper));
}

.sudoku-controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.sudoku-controls button {
  min-width: 48px;
  min-height: 44px;
  border: 1px solid color-mix(in srgb, var(--game-line) 82%, transparent);
  border-radius: 10px;
  background: var(--game-soft);
  color: var(--ink);
  font-weight: 900;
  cursor: pointer;
}

.sudoku-meta {
  margin: 0;
  color: var(--muted);
  font-weight: 800;
}

.word-guess-wrap {
  display: grid;
  justify-items: center;
  gap: 18px;
  width: min(680px, 100%);
}

.word-guess-board {
  display: grid;
  justify-items: center;
  gap: 14px;
  width: min(620px, 100%);
  padding: 16px;
  border: 10px solid #8b5a2b;
  border-radius: 8px;
  background:
    radial-gradient(circle at 18% 22%, rgb(255 255 255 / 6%), transparent 24%),
    linear-gradient(135deg, #203b31, #152c26 62%, #10231f);
  color: #f4f0db;
  box-shadow: inset 0 0 32px rgb(0 0 0 / 34%), 0 14px 30px rgb(var(--black-rgb) / 20%);
}

.word-guess-board-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  color: #f4f0db;
  font-weight: 900;
}

.word-guess-board-head span {
  color: #d9ead8;
}

.word-guess-drawing {
  width: min(320px, 100%);
  height: auto;
  fill: none;
  stroke: #f4f0db;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 7;
  filter: drop-shadow(0 1px 0 rgb(255 255 255 / 16%));
}

.word-guess-word {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.word-guess-word span {
  display: grid;
  place-items: center;
  width: 46px;
  height: 54px;
  border-bottom: 4px solid #f4f0db;
  background: transparent;
  border-radius: 2px;
  color: #f4f0db;
  font-size: 1.4rem;
  font-weight: 900;
  text-shadow: 0 1px 0 rgb(255 255 255 / 18%);
}

.word-guess-word span.revealed {
  color: #ffd4ce;
  border-color: #ffd4ce;
}

.word-guess-keyboard {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(36px, 1fr));
  justify-content: center;
  gap: 6px;
  width: min(560px, 100%);
}

.word-guess-keyboard button {
  width: 100%;
  min-width: 0;
  height: 38px;
  border: 1px solid color-mix(in srgb, var(--game-line) 78%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--paper) 84%, white);
  color: #18221f;
  font-weight: 900;
  cursor: pointer;
}

.word-guess-keyboard button.good {
  background: #9ee6cf;
}

.word-guess-keyboard button.bad {
  background: #ffb3aa;
}

.word-guess-keyboard button:hover:not(:disabled),
.word-guess-keyboard button:focus-visible {
  transform: translateY(-2px);
  border-color: #ffd4ce;
  box-shadow: 0 10px 18px rgb(0 0 0 / 18%);
  outline: none;
}

.word-guess-keyboard button:disabled {
  cursor: default;
  opacity: 0.72;
}

.word-guess-meta {
  margin: 0;
  color: var(--muted);
  font-weight: 800;
  text-align: center;
}

.sequence-wrap {
  display: grid;
  gap: 18px;
  justify-items: center;
  width: min(520px, 100%);
}

.sequence-row,
.sequence-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.sequence-row span {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border: 1px solid var(--game-line);
  border-radius: 12px;
  background: var(--game-soft);
  color: var(--ink);
  font-size: 1.35rem;
  font-weight: 900;
}

.sequence-row .unknown {
  background: color-mix(in srgb, var(--game-accent) 28%, var(--game-soft));
}

.sequence-meta {
  margin: 0;
  color: var(--muted);
  font-weight: 800;
  text-align: center;
}

.odd-wrap {
  display: grid;
  gap: 16px;
  justify-items: center;
  width: min(560px, 100%);
}

.odd-prompt,
.odd-meta {
  margin: 0;
  color: var(--muted);
  font-weight: 800;
  text-align: center;
}

.odd-choices {
  display: grid;
  grid-template-columns: repeat(2, minmax(120px, 1fr));
  gap: 10px;
  width: min(420px, 100%);
}

.odd-choices button {
  min-height: 72px;
  border: 1px solid var(--game-line);
  border-radius: 12px;
  background: var(--game-soft);
  color: var(--ink);
  font-size: 1rem;
  font-weight: 900;
  cursor: pointer;
}

.odd-choices button:hover {
  background: var(--game-hover);
}

.mental-math-wrap {
  display: grid;
  gap: 18px;
  justify-items: center;
  width: min(540px, 100%);
}

.mental-math-prompt {
  display: grid;
  place-items: center;
  min-width: min(320px, 100%);
  min-height: 120px;
  border: 1px solid var(--game-line);
  border-radius: 18px;
  background:
    linear-gradient(135deg, color-mix(in srgb, #f7d86b 42%, transparent), transparent 62%),
    var(--game-soft);
  color: var(--ink);
  font-size: 3rem;
  font-weight: 950;
}

.mental-math-choices {
  display: grid;
  grid-template-columns: repeat(3, minmax(76px, 1fr));
  gap: 12px;
  width: min(420px, 100%);
}

.mental-math-choices button {
  min-height: 64px;
  border: 1px solid var(--game-line);
  border-radius: 14px;
  background: var(--paper);
  color: var(--ink);
  font-size: 1.35rem;
  font-weight: 950;
  cursor: pointer;
}

.mental-math-choices button:hover {
  background: var(--game-hover);
}

.mental-math-meta {
  margin: 0;
  color: var(--muted);
  font-weight: 800;
  text-align: center;
}

.number-garden-wrap {
  display: grid;
  gap: 14px;
  justify-items: center;
  width: min(640px, 100%);
}

.number-garden-scene {
  position: relative;
  display: grid;
  place-items: end center;
  width: min(420px, 100%);
  min-height: 190px;
  overflow: hidden;
  border: 1px solid var(--game-line);
  border-radius: 24px;
  background:
    radial-gradient(circle at 78% 22%, color-mix(in srgb, var(--game-piece-yellow) 80%, var(--white)) 0 34px, transparent 36px),
    linear-gradient(180deg, color-mix(in srgb, var(--game-water) 38%, var(--paper)), color-mix(in srgb, var(--game-success) 18%, var(--paper)));
}

.number-garden-sky {
  position: absolute;
  inset: 18px 20px auto;
  display: flex;
  justify-content: space-between;
}

.number-garden-sky span {
  width: 48px;
  height: 18px;
  border-radius: 999px;
  background: rgb(var(--white-rgb) / 62%);
}

.number-garden-ground {
  width: 100%;
  height: 42px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--game-success) 72%, var(--game-wood)), var(--game-wood));
}

.number-garden-plant {
  position: absolute;
  bottom: 30px;
  display: grid;
  justify-items: center;
  width: 120px;
  height: 140px;
}

.number-garden-plant b {
  align-self: end;
  width: 12px;
  height: calc(28px + var(--garden-growth, 0) * 15px);
  border-radius: 999px;
  background: var(--game-success);
}

.number-garden-scene.growth-0 { --garden-growth: 0; }
.number-garden-scene.growth-1 { --garden-growth: 1; }
.number-garden-scene.growth-2 { --garden-growth: 2; }
.number-garden-scene.growth-3 { --garden-growth: 3; }
.number-garden-scene.growth-4 { --garden-growth: 4; }
.number-garden-scene.growth-5 { --garden-growth: 5; }
.number-garden-scene.growth-6 { --garden-growth: 6; }

.number-garden-plant i,
.number-garden-plant em {
  position: absolute;
  bottom: calc(46px + var(--garden-growth, 0) * 11px);
  width: 42px;
  height: 24px;
  border-radius: 70% 30%;
  background: color-mix(in srgb, var(--game-success) 82%, var(--white));
}

.number-garden-plant i:first-child {
  left: 20px;
  transform: rotate(-26deg);
}

.number-garden-plant i:nth-child(2) {
  right: 20px;
  transform: rotate(26deg) scaleX(-1);
}

.number-garden-plant em {
  bottom: calc(74px + var(--garden-growth, 0) * 12px);
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: radial-gradient(circle at 50% 50%, var(--game-piece-yellow) 0 32%, var(--game-danger) 34% 100%);
  opacity: calc(var(--garden-growth, 0) / 6);
}

.number-garden-card {
  display: grid;
  gap: 12px;
  justify-items: center;
  width: min(520px, 100%);
  padding: 16px;
  border: 1px solid var(--game-line);
  border-radius: 18px;
  background: var(--game-soft);
  text-align: center;
}

.number-garden-card h3 {
  margin: 0;
  font-size: clamp(1.1rem, 3vw, 1.45rem);
}

.number-garden-visual {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.number-garden-group {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  max-width: 220px;
}

.garden-item {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--game-warm);
  box-shadow: inset 0 -3px 0 rgb(var(--black-rgb) / 14%);
}

.garden-item.drops {
  border-radius: 70% 30%;
  background: var(--game-water);
  transform: rotate(45deg);
}

.garden-item.leaf,
.garden-item.sprout {
  border-radius: 70% 30%;
  background: var(--game-success);
}

.garden-item.sun,
.garden-item.flower {
  background: var(--game-piece-yellow);
}

.number-garden-sequence {
  display: flex;
  gap: 8px;
}

.number-garden-sequence span {
  display: grid;
  place-items: center;
  min-width: 42px;
  height: 42px;
  border: 1px solid var(--game-line);
  border-radius: 14px;
  background: var(--paper);
  color: var(--ink);
  font-weight: 950;
}

.number-garden-sequence .mystery {
  background: color-mix(in srgb, var(--game-accent) 24%, var(--paper));
}

.number-garden-options {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.number-garden-options button {
  min-width: 76px;
  min-height: 56px;
  border: 1px solid var(--game-line);
  border-radius: 16px;
  background: var(--paper);
  color: var(--ink);
  font-size: 1.35rem;
  font-weight: 950;
  cursor: pointer;
}

.number-garden-options button:hover {
  background: var(--game-hover);
}

.number-garden-meta {
  margin: 0;
  color: var(--muted);
  font-weight: 850;
  text-align: center;
}

.number-garden-meta.hint {
  color: color-mix(in srgb, var(--game-wood) 70%, var(--ink));
}

.bestiary-wrap {
  display: grid;
  gap: 14px;
  align-content: start;
}

.bestiary-header {
  display: grid;
  gap: 6px;
  border: 1px solid color-mix(in srgb, var(--game-line) 70%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--paper) 70%, var(--game-soft));
  padding: 14px;
}

.bestiary-header h3 {
  margin: 0;
  font-size: clamp(1.05rem, 2vw, 1.35rem);
}

.bestiary-header span,
.bestiary-meta {
  color: var(--muted);
  font-weight: 800;
}

.bestiary-creatures {
  display: grid;
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  gap: 10px;
}

.bestiary-creature {
  display: grid;
  gap: 10px;
  justify-items: center;
  min-height: 220px;
  border: 1px solid color-mix(in srgb, var(--game-line) 74%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--paper) 82%, var(--game-soft));
  color: var(--ink);
  padding: 12px;
  cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.bestiary-creature:hover {
  transform: translateY(-3px);
  border-color: var(--game-accent);
  box-shadow: 0 14px 26px rgb(var(--black-rgb) / 16%);
}

.bestiary-name {
  font-size: .98rem;
  font-weight: 1000;
}

.bestiary-beast {
  --beast-color: var(--game-success);

  position: relative;
  display: grid;
  place-items: center;
  width: 94px;
  height: 90px;
  overflow: hidden;
}

.bestiary-creature.color-sky .bestiary-beast {
  --beast-color: color-mix(in srgb, var(--game-water) 82%, white);
}

.bestiary-creature.color-berry .bestiary-beast {
  --beast-color: color-mix(in srgb, var(--game-danger) 82%, white);
}

.bestiary-creature.color-sun .bestiary-beast {
  --beast-color: color-mix(in srgb, var(--game-warm) 86%, white);
}

.bestiary-body {
  position: relative;
  z-index: 2;
  display: block;
  width: 56px;
  height: 56px;
  border: 2px solid rgb(var(--black-rgb) / 22%);
  border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, white 0 10%, transparent 11%), var(--beast-color);
  box-shadow: inset 0 -10px 0 rgb(var(--black-rgb) / 10%);
}

.body-tall .bestiary-body {
  width: 46px;
  height: 68px;
  border-radius: 24px 24px 18px 18px;
}

.body-diamond .bestiary-body {
  width: 54px;
  height: 54px;
  border-radius: 12px;
  transform: rotate(45deg);
}

.bestiary-body::before,
.bestiary-body::after {
  content: "";
  position: absolute;
  top: 18px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ink);
}

.bestiary-body::before {
  left: 16px;
}

.bestiary-body::after {
  right: 16px;
}

.body-diamond .bestiary-body::before,
.body-diamond .bestiary-body::after {
  transform: rotate(-45deg);
}

.bestiary-wings,
.bestiary-horns {
  position: absolute;
  inset: 0;
  display: none;
  contain: layout paint;
  overflow: hidden;
}

.bestiary-wings.show,
.bestiary-horns.show {
  display: block;
}


.bestiary-wings::before,
.bestiary-wings::after {
  box-sizing: border-box;
  content: "";
  position: absolute;
  top: 26px;
  width: 22px;
  height: 32px;
  border: 2px solid color-mix(in srgb, var(--game-water) 70%, var(--game-line));
  border-radius: 50% 50% 40% 40%;
  background: color-mix(in srgb, var(--game-water) 28%, white);
}

.bestiary-wings::before {
  left: 8px;
  transform: rotate(-18deg);
}

.bestiary-wings::after {
  right: 8px;
  transform: rotate(18deg);
}

.bestiary-horns::before,
.bestiary-horns::after {
  content: "";
  position: absolute;
  top: 4px;
  width: 14px;
  height: 22px;
  border-radius: 50% 50% 0 0;
  background: color-mix(in srgb, var(--game-warm) 80%, white);
}

.bestiary-horns::before {
  left: 27px;
  transform: rotate(-20deg);
}

.bestiary-horns::after {
  right: 27px;
  transform: rotate(20deg);
}

.bestiary-legs {
  position: absolute;
  z-index: 1;
  right: 8px;
  bottom: 6px;
  left: 8px;
  display: flex;
  justify-content: center;
  gap: 4px;
}

.bestiary-legs i {
  width: 4px;
  height: 24px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--beast-color) 68%, var(--ink));
}

.bestiary-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 5px;
}

.bestiary-tags small {
  border: 1px solid color-mix(in srgb, var(--game-line) 70%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--game-soft) 76%, white);
  padding: 3px 7px;
  color: var(--muted);
  font-weight: 900;
}

.bestiary-meta {
  margin: 0;
  text-align: center;
}

.bestiary-meta.hint {
  color: color-mix(in srgb, var(--game-wood) 70%, var(--ink));
}

.shape-workshop-wrap {
  display: grid;
  gap: 14px;
  justify-items: center;
  width: min(620px, 100%);
}

.shape-workshop-panel {
  display: grid;
  gap: 6px;
  width: 100%;
  border: 1px solid color-mix(in srgb, var(--game-line) 70%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--paper) 72%, var(--game-soft));
  padding: 14px;
}

.shape-workshop-panel h3 {
  margin: 0;
  font-size: clamp(1.05rem, 2vw, 1.35rem);
}

.shape-workshop-panel span,
.shape-workshop-meta {
  color: var(--muted);
  font-weight: 850;
}

.shape-workshop-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(92px, 1fr));
  gap: 8px;
  width: min(360px, 100%);
  border: 6px solid color-mix(in srgb, var(--game-wood) 64%, var(--game-line));
  border-radius: 12px;
  background: color-mix(in srgb, var(--game-line) 42%, transparent);
  padding: 8px;
  box-shadow: inset 0 0 0 2px rgb(var(--black-rgb) / 12%);
}

.shape-workshop-cell {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border: 2px solid color-mix(in srgb, var(--paper) 48%, var(--game-line));
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgb(var(--white-rgb) / 24%), transparent 48%),
    color-mix(in srgb, var(--game-soft) 84%, white);
}

.shape-workshop-cell.missing {
  outline: 3px dashed color-mix(in srgb, var(--game-accent) 72%, transparent);
  outline-offset: -9px;
}

.shape-piece {
  --piece-color: var(--game-water);
  --shape-rotation: 0deg;

  position: relative;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  transform: rotate(var(--shape-rotation));
}

.shape-piece i {
  display: block;
  width: 44px;
  height: 44px;
  border: 2px solid rgb(var(--black-rgb) / 18%);
  background: var(--piece-color);
  box-shadow: inset 0 -8px 0 rgb(var(--black-rgb) / 9%);
}

.shape-piece.color-sun {
  --piece-color: color-mix(in srgb, var(--game-warm) 86%, white);
}

.shape-piece.color-leaf {
  --piece-color: color-mix(in srgb, var(--game-success) 80%, white);
}

.shape-piece.color-berry {
  --piece-color: color-mix(in srgb, var(--game-danger) 76%, white);
}

.shape-piece.color-sky {
  --piece-color: color-mix(in srgb, var(--game-water) 82%, white);
}

.shape-circle i {
  border-radius: 50%;
}

.shape-square i {
  border-radius: 8px;
}

.shape-diamond i {
  border-radius: 8px;
  transform: rotate(45deg);
}

.shape-triangle i {
  width: 0;
  height: 0;
  border: 0;
  border-right: 25px solid transparent;
  border-bottom: 46px solid var(--piece-color);
  border-left: 25px solid transparent;
  background: transparent;
  box-shadow: none;
}

.shape-star i {
  width: 48px;
  height: 48px;
  border: 0;
  background: var(--piece-color);
  clip-path: polygon(50% 0, 61% 34%, 97% 34%, 68% 55%, 79% 90%, 50% 68%, 21% 90%, 32% 55%, 3% 34%, 39% 34%);
}

.shape-missing {
  color: color-mix(in srgb, var(--game-accent) 80%, var(--ink));
  font-size: 2rem;
  font-weight: 1000;
}

.shape-workshop-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
}

.shape-workshop-options button {
  display: grid;
  gap: 6px;
  place-items: center;
  min-height: 116px;
  border: 1px solid color-mix(in srgb, var(--game-line) 74%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--paper) 84%, var(--game-soft));
  color: var(--ink);
  font-weight: 950;
  cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.shape-workshop-options button:hover {
  transform: translateY(-3px);
  border-color: var(--game-accent);
  box-shadow: 0 14px 26px rgb(var(--black-rgb) / 16%);
}

.shape-workshop-meta {
  margin: 0;
  text-align: center;
}

.shape-workshop-meta.hint {
  color: color-mix(in srgb, var(--game-wood) 70%, var(--ink));
}

.fraction-forge-wrap {
  display: grid;
  gap: 14px;
  justify-items: center;
  width: min(620px, 100%);
}

.fraction-forge-furnace {
  position: relative;
  display: grid;
  place-items: center;
  width: min(310px, 80vw);
  aspect-ratio: 1.08;
  border: 8px solid color-mix(in srgb, var(--game-wood) 70%, var(--game-line));
  border-radius: 24px 24px 38px 38px;
  background:
    radial-gradient(circle at 50% 78%, color-mix(in srgb, var(--game-warm) calc(20% + var(--forge-heat, 0) * 9%), transparent) 0 34%, transparent 55%),
    linear-gradient(180deg, color-mix(in srgb, var(--game-board) 72%, var(--paper)), color-mix(in srgb, var(--game-line) 66%, var(--ink)));
  box-shadow: inset 0 -20px 34px rgb(var(--black-rgb) / 22%);
}

.fraction-forge-furnace.heat-0 { --forge-heat: 0; }
.fraction-forge-furnace.heat-1 { --forge-heat: 1; }
.fraction-forge-furnace.heat-2 { --forge-heat: 2; }
.fraction-forge-furnace.heat-3 { --forge-heat: 3; }
.fraction-forge-furnace.heat-4 { --forge-heat: 4; }
.fraction-forge-furnace.heat-5 { --forge-heat: 5; }
.fraction-forge-furnace.heat-6 { --forge-heat: 6; }

.fraction-medal {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 156px;
  height: 156px;
  border: 8px solid color-mix(in srgb, var(--game-warm) 74%, var(--ink));
  border-radius: 50%;
  background: color-mix(in srgb, var(--paper) 72%, var(--game-soft));
  box-shadow: 0 18px 34px rgb(var(--black-rgb) / 22%), inset 0 0 0 6px rgb(var(--white-rgb) / 28%);
  overflow: hidden;
}

.fraction-medal span {
  --angle: calc(360deg / var(--fraction-total));

  position: absolute;
  inset: 0;
  transform: rotate(calc(var(--part-index) * var(--angle)));
  transform-origin: 50% 50%;
}

.fraction-medal span::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 50%;
  height: 50%;
  border: 1px solid rgb(var(--black-rgb) / 12%);
  background: color-mix(in srgb, var(--game-soft) 84%, white);
  transform-origin: 0 100%;
  clip-path: polygon(0 100%, 0 0, 100% 0);
}

.fraction-medal span.filled::before {
  background: linear-gradient(135deg, rgb(var(--white-rgb) / 32%), transparent 48%), color-mix(in srgb, var(--game-warm) 88%, white);
}

.fraction-forge-glow {
  position: absolute;
  right: 22%;
  bottom: 8%;
  left: 22%;
  height: 32px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--game-warm) 58%, transparent);
  filter: blur(10px);
}

.fraction-forge-panel {
  display: grid;
  gap: 6px;
  width: 100%;
  border: 1px solid color-mix(in srgb, var(--game-line) 70%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--paper) 72%, var(--game-soft));
  padding: 14px;
}

.fraction-forge-panel h3 {
  margin: 0;
  font-size: clamp(1.05rem, 2vw, 1.35rem);
}

.fraction-forge-panel span,
.fraction-forge-meta {
  color: var(--muted);
  font-weight: 850;
}

.fraction-forge-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(92px, 1fr));
  gap: 10px;
  width: 100%;
}

.fraction-forge-options button {
  min-height: 70px;
  border: 1px solid color-mix(in srgb, var(--game-line) 74%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--paper) 84%, var(--game-soft));
  color: var(--ink);
  font-size: 1.35rem;
  font-weight: 1000;
  cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.fraction-forge-options button:hover {
  transform: translateY(-3px);
  border-color: var(--game-accent);
  box-shadow: 0 14px 26px rgb(var(--black-rgb) / 16%);
}

.fraction-forge-meta {
  margin: 0;
  text-align: center;
}

.fraction-forge-meta.hint {
  color: color-mix(in srgb, var(--game-wood) 70%, var(--ink));
}

.sound-runes-wrap {
  display: grid;
  gap: 14px;
  justify-items: center;
  width: min(620px, 100%);
}

.sound-rune-stone {
  position: relative;
  display: grid;
  place-items: center;
  width: min(220px, 62vw);
  aspect-ratio: .78;
  border: 5px solid color-mix(in srgb, var(--game-line) 72%, var(--ink));
  border-radius: 48% 52% 44% 56% / 42% 48% 52% 58%;
  background:
    radial-gradient(circle at 32% 20%, rgb(var(--white-rgb) / 28%), transparent 22%),
    linear-gradient(150deg, color-mix(in srgb, var(--game-board) 74%, white), color-mix(in srgb, var(--game-line) 70%, var(--game-soft)));
  box-shadow: inset -12px -18px 28px rgb(var(--black-rgb) / 18%), 0 18px 34px rgb(var(--black-rgb) / 16%);
}

.sound-rune-stone.glow {
  box-shadow: inset -12px -18px 28px rgb(var(--black-rgb) / 18%), 0 0 34px color-mix(in srgb, var(--game-accent) 58%, transparent);
}

.sound-rune-stone span {
  z-index: 2;
  color: color-mix(in srgb, var(--game-accent) 82%, var(--ink));
  font-size: clamp(2.4rem, 9vw, 4rem);
  font-weight: 1000;
  letter-spacing: 0;
}

.sound-rune-stone i,
.sound-rune-stone b {
  position: absolute;
  display: block;
  border-radius: 999px;
  background: rgb(var(--black-rgb) / 16%);
}

.sound-rune-stone i {
  top: 24%;
  left: 20%;
  width: 28px;
  height: 6px;
  transform: rotate(-22deg);
}

.sound-rune-stone b {
  right: 20%;
  bottom: 22%;
  width: 36px;
  height: 7px;
  transform: rotate(18deg);
}

.sound-runes-panel {
  display: grid;
  gap: 6px;
  width: 100%;
  border: 1px solid color-mix(in srgb, var(--game-line) 70%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--paper) 72%, var(--game-soft));
  padding: 14px;
}

.sound-runes-panel h3 {
  margin: 0;
  font-size: clamp(1.05rem, 2vw, 1.35rem);
}

.sound-runes-panel span,
.sound-runes-meta {
  color: var(--muted);
  font-weight: 850;
}

.sound-runes-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(92px, 1fr));
  gap: 10px;
  width: 100%;
}

.sound-runes-options button {
  display: grid;
  gap: 4px;
  place-items: center;
  min-height: 82px;
  border: 1px solid color-mix(in srgb, var(--game-line) 74%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--paper) 84%, var(--game-soft));
  color: var(--ink);
  cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.sound-runes-options button span {
  font-size: 1.2rem;
  font-weight: 1000;
}

.sound-runes-options button small {
  color: var(--muted);
  font-weight: 950;
}

.sound-runes-options button:hover {
  transform: translateY(-3px);
  border-color: var(--game-accent);
  box-shadow: 0 14px 26px rgb(var(--black-rgb) / 16%);
}

.sound-runes-meta {
  margin: 0;
  text-align: center;
}

.sound-runes-meta.hint {
  color: color-mix(in srgb, var(--game-wood) 70%, var(--ink));
}

.world-cartographer-wrap {
  display: grid;
  gap: 14px;
  justify-items: center;
  width: min(680px, 100%);
}

.world-cartographer-panel {
  display: grid;
  gap: 6px;
  width: 100%;
  border: 1px solid color-mix(in srgb, var(--game-line) 70%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--paper) 74%, var(--game-soft));
  padding: 14px;
}

.world-cartographer-panel h3 {
  margin: 0;
  font-size: clamp(1.05rem, 2vw, 1.35rem);
}

.world-cartographer-panel span,
.world-cartographer-meta {
  color: var(--muted);
  font-weight: 850;
}

.world-map-grid {
  display: grid;
  grid-template-columns: 28px repeat(5, minmax(44px, 1fr));
  gap: 5px;
  width: min(470px, 100%);
  border: 6px solid color-mix(in srgb, var(--game-wood) 68%, var(--game-line));
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgb(var(--white-rgb) / 18%), transparent 46%),
    color-mix(in srgb, var(--game-soft) 82%, white);
  padding: 8px;
}

.world-map-axis {
  display: grid;
  place-items: center;
  color: var(--muted);
  font-size: .82rem;
  font-weight: 1000;
}

.world-map-tile {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border: 1px solid color-mix(in srgb, var(--game-line) 70%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--paper) 82%, var(--game-soft));
  overflow: hidden;
}

.world-map-tile b {
  font-size: clamp(1.15rem, 4vw, 1.75rem);
  line-height: 1;
}

.world-map-tile small {
  position: absolute;
  right: 4px;
  bottom: 3px;
  color: rgb(var(--black-rgb) / 56%);
  font-size: .62rem;
  font-weight: 950;
}

.world-map-tile.path {
  outline: 3px solid color-mix(in srgb, var(--game-accent) 70%, transparent);
  outline-offset: -4px;
}

.tile-forest {
  background: color-mix(in srgb, var(--game-success) 28%, var(--paper));
}

.tile-mountain {
  background: color-mix(in srgb, var(--game-line) 44%, var(--paper));
}

.tile-river {
  background: color-mix(in srgb, var(--game-water) 38%, var(--paper));
}

.tile-village {
  background: color-mix(in srgb, var(--game-warm) 36%, var(--paper));
}

.world-map-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}

.world-map-legend span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid color-mix(in srgb, var(--game-line) 70%, transparent);
  border-radius: 999px;
  padding: 4px 8px;
  color: var(--muted);
  font-size: .82rem;
  font-weight: 900;
}

.world-cartographer-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(92px, 1fr));
  gap: 10px;
  width: 100%;
}

.world-cartographer-options button {
  min-height: 66px;
  border: 1px solid color-mix(in srgb, var(--game-line) 74%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--paper) 84%, var(--game-soft));
  color: var(--ink);
  font-size: 1.18rem;
  font-weight: 1000;
  cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.world-cartographer-options button:hover {
  transform: translateY(-3px);
  border-color: var(--game-accent);
  box-shadow: 0 14px 26px rgb(var(--black-rgb) / 16%);
}

.world-cartographer-meta {
  margin: 0;
  text-align: center;
}

.world-cartographer-meta.hint {
  color: color-mix(in srgb, var(--game-wood) 70%, var(--ink));
}

.season-clock-wrap {
  display: grid;
  gap: 14px;
  justify-items: center;
  width: min(640px, 100%);
}

.season-clock-face {
  position: relative;
  display: grid;
  place-items: center;
  width: min(320px, 82vw);
  aspect-ratio: 1;
  border: 8px solid color-mix(in srgb, var(--game-wood) 70%, var(--game-line));
  border-radius: 50%;
  background:
    conic-gradient(
      color-mix(in srgb, var(--game-success) 34%, var(--paper)) 0 25%,
      color-mix(in srgb, var(--game-warm) 36%, var(--paper)) 0 50%,
      color-mix(in srgb, var(--game-danger) 22%, var(--paper)) 0 75%,
      color-mix(in srgb, var(--game-water) 30%, var(--paper)) 0 100%
    );
  box-shadow: inset 0 0 0 10px rgb(var(--white-rgb) / 24%), 0 18px 34px rgb(var(--black-rgb) / 16%);
}

.season-clock-face::before {
  content: "";
  position: absolute;
  inset: 22%;
  border: 2px solid color-mix(in srgb, var(--game-line) 70%, transparent);
  border-radius: 50%;
  background: color-mix(in srgb, var(--paper) 70%, transparent);
}

.season-label {
  position: absolute;
  color: var(--ink);
  font-size: .76rem;
  font-weight: 1000;
}

.season-label.spring {
  top: 16%;
  right: 26%;
}

.season-label.summer {
  right: 8%;
  bottom: 45%;
}

.season-label.autumn {
  bottom: 16%;
  left: 24%;
}

.season-label.winter {
  top: 45%;
  left: 8%;
}

.season-hand {
  position: absolute;
  z-index: 3;
  bottom: 50%;
  left: calc(50% - 4px);
  width: 8px;
  height: 33%;
  border-radius: 999px;
  background: color-mix(in srgb, var(--game-accent) 78%, var(--ink));
  transform: rotate(var(--season-hand));
  transform-origin: 50% 100%;
}

.season-hub {
  position: relative;
  z-index: 4;
  width: 34px;
  height: 34px;
  border: 4px solid color-mix(in srgb, var(--game-warm) 72%, var(--ink));
  border-radius: 50%;
  background: var(--paper);
}

.season-gear {
  position: absolute;
  z-index: 2;
  width: 46px;
  height: 46px;
  border: 6px dotted color-mix(in srgb, var(--game-line) 70%, var(--ink));
  border-radius: 50%;
  background: rgb(var(--white-rgb) / 24%);
}

.season-gear.gear-a {
  top: 20%;
  left: 28%;
}

.season-gear.gear-b {
  right: 24%;
  bottom: 22%;
}

.season-clock-panel {
  display: grid;
  gap: 6px;
  width: 100%;
  border: 1px solid color-mix(in srgb, var(--game-line) 70%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--paper) 74%, var(--game-soft));
  padding: 14px;
}

.season-clock-panel h3 {
  margin: 0;
  font-size: clamp(1.05rem, 2vw, 1.35rem);
}

.season-clock-panel span,
.season-clock-meta {
  color: var(--muted);
  font-weight: 850;
}

.season-clock-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(92px, 1fr));
  gap: 10px;
  width: 100%;
}

.season-clock-options button {
  min-height: 66px;
  border: 1px solid color-mix(in srgb, var(--game-line) 74%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--paper) 84%, var(--game-soft));
  color: var(--ink);
  font-size: 1.05rem;
  font-weight: 1000;
  cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.season-clock-options button:hover {
  transform: translateY(-3px);
  border-color: var(--game-accent);
  box-shadow: 0 14px 26px rgb(var(--black-rgb) / 16%);
}

.season-clock-meta {
  margin: 0;
  text-align: center;
}

.season-clock-meta.hint {
  color: color-mix(in srgb, var(--game-wood) 70%, var(--ink));
}

.cause-lab-wrap {
  display: grid;
  gap: 16px;
  justify-items: center;
  width: min(680px, 100%);
}

.cause-lab-bench {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: end;
  gap: 12px;
  width: min(520px, 100%);
  min-height: 170px;
  padding: 28px 22px 22px;
  border: 1px solid color-mix(in srgb, var(--game-line) 70%, transparent);
  border-radius: 16px;
  background:
    radial-gradient(circle at 24% 20%, color-mix(in srgb, #fff7bc 58%, transparent) 0 9%, transparent 10%),
    linear-gradient(180deg, color-mix(in srgb, #dff7ff 70%, var(--paper)), color-mix(in srgb, #c0a07a 34%, var(--game-soft)) 72%);
  overflow: hidden;
  box-shadow: inset 0 -28px 0 color-mix(in srgb, #8b5e3c 42%, var(--game-line));
}

.cause-lab-bench::after {
  content: "";
  position: absolute;
  right: 18px;
  bottom: 40px;
  left: 18px;
  height: 3px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 18%, transparent);
}

.lab-flask,
.lab-fan,
.lab-observation {
  position: relative;
  z-index: 1;
  display: block;
  margin: 0 auto;
}

.lab-flask {
  width: 48px;
  height: 70px;
  border: 3px solid color-mix(in srgb, var(--ink) 28%, transparent);
  border-radius: 10px 10px 22px 22px;
  background: linear-gradient(180deg, transparent 36%, #69c7f2 37%);
}

.lab-flask::before {
  content: "";
  position: absolute;
  top: -22px;
  left: 14px;
  width: 16px;
  height: 24px;
  border: 3px solid color-mix(in srgb, var(--ink) 28%, transparent);
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
}

.lab-flask.light {
  background: linear-gradient(180deg, transparent 38%, #f7d86b 39%);
}

.lab-fan {
  width: 62px;
  height: 62px;
  border: 3px solid color-mix(in srgb, var(--ink) 24%, transparent);
  border-radius: 999px;
  background: conic-gradient(from 20deg, #9bd5ff 0 22%, transparent 23% 35%, #9bd5ff 36% 58%, transparent 59% 72%, #9bd5ff 73% 95%, transparent 96%);
}

.lab-fan::after {
  content: "";
  position: absolute;
  inset: 22px;
  border-radius: 999px;
  background: var(--paper);
}

.lab-observation {
  width: 54px;
  height: 76px;
  border-radius: 999px 999px 12px 12px;
  background: linear-gradient(180deg, #8ed1a7 0 44%, #8b5e3c 45%);
  box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--ink) 18%, transparent);
}

.cause-lab-panel {
  display: grid;
  gap: 8px;
  width: min(560px, 100%);
  text-align: center;
}

.cause-lab-panel h3 {
  margin: 0;
  font-size: 1.08rem;
}

.cause-lab-panel span,
.cause-lab-meta {
  color: var(--muted);
  font-weight: 800;
}

.cause-lab-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(120px, 1fr));
  gap: 10px;
  width: min(640px, 100%);
}

.cause-lab-options button {
  min-height: 62px;
  border: 1px solid var(--game-line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--game-soft) 84%, #dff7ff);
  color: var(--ink);
  font-weight: 900;
  cursor: pointer;
}

.cause-lab-options button:hover {
  background: color-mix(in srgb, var(--game-hover) 70%, #fff7bc);
  transform: translateY(-1px);
}

.cause-lab-meta {
  margin: 0;
  text-align: center;
}

.cause-lab-meta.hint {
  color: var(--game-danger);
}

.constellation-memory-wrap {
  display: grid;
  gap: 14px;
  justify-items: center;
  width: min(640px, 100%);
}

.constellation-sky {
  width: min(420px, 92vw);
  aspect-ratio: 1.35;
  border: 1px solid color-mix(in srgb, var(--game-line) 75%, transparent);
  border-radius: 14px;
  background:
    radial-gradient(circle at 18% 24%, rgb(var(--white-rgb) / 32%) 0 1px, transparent 2px),
    radial-gradient(circle at 76% 18%, rgb(var(--white-rgb) / 28%) 0 1px, transparent 2px),
    radial-gradient(circle at 62% 78%, rgb(var(--white-rgb) / 24%) 0 1px, transparent 2px),
    linear-gradient(160deg, color-mix(in srgb, var(--game-board) 70%, var(--ink)), color-mix(in srgb, var(--game-water) 34%, var(--ink)));
  padding: 10px;
  box-shadow: inset 0 0 32px rgb(var(--black-rgb) / 24%), 0 16px 28px rgb(var(--black-rgb) / 14%);
}

.constellation-sky svg {
  width: 100%;
  height: 100%;
}

.constellation-sky line {
  stroke: color-mix(in srgb, var(--game-accent) 66%, white);
  stroke-width: 1.1;
  stroke-linecap: round;
  opacity: .82;
}

.constellation-sky circle {
  fill: color-mix(in srgb, var(--game-warm) 76%, white);
  stroke: rgb(var(--white-rgb) / 72%);
  stroke-width: .7;
}

.constellation-memory-panel {
  display: grid;
  gap: 6px;
  width: 100%;
  border: 1px solid color-mix(in srgb, var(--game-line) 70%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--paper) 74%, var(--game-soft));
  padding: 14px;
}

.constellation-memory-panel h3 {
  margin: 0;
  font-size: clamp(1.05rem, 2vw, 1.35rem);
}

.constellation-memory-panel span,
.constellation-memory-meta {
  color: var(--muted);
  font-weight: 850;
}

.constellation-memory-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(92px, 1fr));
  gap: 10px;
  width: 100%;
}

.constellation-memory-options button {
  min-height: 66px;
  border: 1px solid color-mix(in srgb, var(--game-line) 74%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--paper) 84%, var(--game-soft));
  color: var(--ink);
  font-size: 1.05rem;
  font-weight: 1000;
  cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.constellation-memory-options button:hover {
  transform: translateY(-3px);
  border-color: var(--game-accent);
  box-shadow: 0 14px 26px rgb(var(--black-rgb) / 16%);
}

.constellation-memory-meta {
  margin: 0;
  text-align: center;
}

.constellation-memory-meta.hint {
  color: color-mix(in srgb, var(--game-wood) 70%, var(--ink));
}

.measure-market-wrap {
  display: grid;
  grid-template-columns: minmax(230px, .9fr) minmax(250px, 1fr);
  gap: 14px;
  place-items: stretch center;
  width: min(680px, 100%);
}

.measure-market-stall {
  display: grid;
  gap: 10px;
  align-self: stretch;
  width: min(440px, 100%);
  border: 6px solid color-mix(in srgb, var(--game-wood) 70%, var(--game-line));
  border-radius: 14px;
  background: color-mix(in srgb, var(--paper) 76%, var(--game-soft));
  padding: 10px;
  box-shadow: 0 16px 28px rgb(var(--black-rgb) / 14%);
}

.measure-market-awning {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  overflow: hidden;
  border-radius: 8px 8px 3px 3px;
}

.measure-market-awning span {
  min-height: 28px;
  background: color-mix(in srgb, var(--game-warm) 76%, white);
}

.measure-market-awning span:nth-child(even) {
  background: color-mix(in srgb, var(--game-water) 54%, white);
}

.measure-market-shelf {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: center;
  gap: 10px;
  min-height: 112px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--game-wood) 18%, var(--paper));
  padding: 12px;
}

.measure-good {
  display: grid;
  place-items: center;
  width: calc(48px + var(--good-size, 1) * 12px);
  min-height: calc(44px + var(--good-size, 1) * 8px);
  border: 2px solid color-mix(in srgb, var(--game-line) 70%, transparent);
  border-radius: 14px 14px 10px 10px;
  background: color-mix(in srgb, var(--game-success) 28%, var(--paper));
  padding: 6px;
  text-align: center;
}

.measure-good.size-1 { --good-size: 1; }
.measure-good.size-2 { --good-size: 2; }
.measure-good.size-3 { --good-size: 3; }
.measure-good.size-4 { --good-size: 4; }
.measure-good.size-5 { --good-size: 5; }

.measure-good b {
  font-size: .78rem;
  font-weight: 1000;
}

.measure-good small {
  color: var(--muted);
  font-weight: 900;
}

.measure-market-tokens {
  display: flex;
  justify-content: center;
  gap: 6px;
}

.measure-market-tokens i {
  width: 22px;
  height: 22px;
  border: 2px solid color-mix(in srgb, var(--game-warm) 70%, var(--ink));
  border-radius: 50%;
  background: color-mix(in srgb, var(--game-warm) 72%, white);
}

.measure-market-panel {
  display: grid;
  gap: 8px;
  align-self: stretch;
  width: 100%;
  border: 1px solid color-mix(in srgb, var(--game-line) 70%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--paper) 74%, var(--game-soft));
  padding: 14px;
}

.measure-market-panel h3 {
  margin: 0;
  font-size: clamp(1.05rem, 2vw, 1.35rem);
}

.measure-market-panel strong {
  display: inline-flex;
  width: fit-content;
  padding: 4px 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--game-warm) 24%, transparent);
  color: color-mix(in srgb, var(--game-wood) 72%, var(--ink));
  font-size: .86rem;
  font-weight: 1000;
}

.measure-market-panel span,
.measure-market-meta {
  color: var(--muted);
  font-weight: 850;
}

.measure-market-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
}

.measure-market-options button {
  min-width: 0;
  min-height: 66px;
  border: 1px solid color-mix(in srgb, var(--game-line) 74%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--paper) 84%, var(--game-soft));
  color: var(--ink);
  font-size: 1.05rem;
  font-weight: 1000;
  cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.measure-market-options button:hover {
  transform: translateY(-3px);
  border-color: var(--game-accent);
  box-shadow: 0 14px 26px rgb(var(--black-rgb) / 16%);
}

.measure-market-meta {
  grid-column: 1 / -1;
  margin: 0;
  text-align: center;
}

.measure-market-meta.hint {
  color: color-mix(in srgb, var(--game-wood) 70%, var(--ink));
}

.coloring-wrap {
  display: grid;
  gap: 16px;
  justify-items: center;
  width: min(560px, 100%);
}

.coloring-palette {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.coloring-palette button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  border: 1px solid var(--game-line);
  border-radius: 12px;
  background: var(--paper);
  color: var(--ink);
  font-weight: 900;
  cursor: pointer;
}

.coloring-palette button span {
  width: 18px;
  height: 18px;
  border: 1px solid color-mix(in srgb, var(--ink) 20%, transparent);
  border-radius: 999px;
  background: var(--swatch);
}

.coloring-palette button.selected {
  border-color: var(--game-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--game-accent) 22%, transparent);
  cursor: default;
}

.coloring-grid {
  display: grid;
  grid-template-columns: repeat(5, 54px);
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--game-line);
  border-radius: 18px;
  background: var(--game-soft);
}

.coloring-grid button {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border: 1px solid var(--game-line);
  border-radius: 12px;
  background: var(--paper);
  color: var(--ink);
  font-size: 1.1rem;
  font-weight: 950;
  cursor: pointer;
}

.coloring-grid button.filled {
  background: var(--cell-color);
  cursor: default;
}

.coloring-grid button.target:not(:disabled) {
  border-color: rgb(65 121 178 / 78%);
  box-shadow: 0 0 0 3px rgb(65 121 178 / 16%);
}

.coloring-grid button:not(:disabled):hover {
  background: color-mix(in srgb, var(--game-accent) 18%, var(--paper));
}

.coloring-meta {
  margin: 0;
  color: var(--muted);
  font-weight: 800;
  text-align: center;
}

.magic-sort-wrap {
  display: grid;
  gap: 16px;
  justify-items: center;
  width: min(620px, 100%);
}

.magic-sort-object {
  display: grid;
  gap: 10px;
  justify-items: center;
  width: min(260px, 100%);
  padding: 18px;
  border: 1px solid var(--game-line);
  border-radius: 18px;
  background: var(--game-soft);
  color: var(--ink);
}

.magic-sort-object span {
  width: 72px;
  height: 72px;
  border: 2px solid var(--game-line);
  border-radius: 20px 28px 18px 30px;
  background:
    radial-gradient(circle at 35% 35%, color-mix(in srgb, #fff 48%, transparent), transparent 28px),
    linear-gradient(135deg, #f7d86b, #7cc4ff);
}

.magic-sort-object b {
  font-size: 1.25rem;
  font-weight: 950;
}

.magic-sort-choices {
  display: grid;
  grid-template-columns: repeat(2, minmax(130px, 1fr));
  gap: 10px;
  width: min(480px, 100%);
}

.magic-sort-choices button {
  display: grid;
  gap: 4px;
  min-height: 72px;
  border: 1px solid var(--game-line);
  border-radius: 14px;
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
}

.magic-sort-choices button:hover {
  background: var(--game-hover);
}

.magic-sort-choices strong {
  font-size: 1rem;
  font-weight: 950;
}

.magic-sort-choices small {
  color: var(--muted);
  font-weight: 800;
}

.magic-sort-meta {
  margin: 0;
  color: var(--muted);
  font-weight: 800;
  text-align: center;
}

.word-search-wrap {
  display: grid;
  gap: 16px;
  justify-items: center;
  width: min(620px, 100%);
}

.word-search-grid {
  display: grid;
  grid-template-columns: repeat(7, 44px);
  gap: 6px;
  padding: 12px;
  border: 1px solid var(--game-line);
  border-radius: 18px;
  background: var(--game-soft);
}

.word-search-grid button {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--game-line);
  border-radius: 10px;
  background: var(--paper);
  color: var(--ink);
  font-size: 1rem;
  font-weight: 950;
  cursor: pointer;
}

.word-search-grid button.selected {
  border-color: var(--game-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--game-accent) 22%, transparent);
}

.word-search-grid button.found {
  background: color-mix(in srgb, #65c987 46%, var(--paper));
}

.word-search-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.word-search-list span {
  padding: 7px 10px;
  border: 1px solid var(--game-line);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  font-weight: 900;
}

.word-search-list span.found {
  background: color-mix(in srgb, #65c987 42%, var(--paper));
  text-decoration: line-through;
}

.word-search-meta {
  margin: 0;
  color: var(--muted);
  font-weight: 800;
  text-align: center;
}

.dice-adventure-wrap {
  display: grid;
  gap: 16px;
  justify-items: center;
  width: min(640px, 100%);
}

.dice-adventure-path {
  display: grid;
  grid-template-columns: repeat(6, minmax(64px, 1fr));
  gap: 8px;
  width: 100%;
}

.dice-adventure-path span {
  display: grid;
  gap: 4px;
  place-items: center;
  min-height: 68px;
  border: 1px solid var(--game-line);
  border-radius: 14px;
  background: var(--paper);
  color: var(--ink);
  text-align: center;
}

.dice-adventure-path span.bonus {
  background: color-mix(in srgb, #65c987 34%, var(--paper));
}

.dice-adventure-path span.slow {
  background: color-mix(in srgb, #f97066 24%, var(--paper));
}

.dice-adventure-path span.finish {
  background: color-mix(in srgb, #f7d86b 42%, var(--paper));
}

.dice-adventure-path span.current {
  border-color: var(--game-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--game-accent) 22%, transparent);
}

.dice-adventure-path b {
  font-size: 1rem;
  font-weight: 950;
}

.dice-adventure-path small {
  color: var(--muted);
  font-weight: 800;
}

.dice-adventure-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: center;
}

.dice-adventure-die {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border: 2px solid var(--game-line);
  border-radius: 14px;
  background: var(--game-soft);
  color: var(--ink);
  font-size: 1.6rem;
  font-weight: 950;
}

.dice-adventure-meta {
  margin: 0;
  color: var(--muted);
  font-weight: 800;
  text-align: center;
}

.snail-race-wrap {
  display: grid;
  gap: 16px;
  justify-items: center;
  width: min(640px, 100%);
}

.snail-race-lanes {
  display: grid;
  gap: 10px;
  width: 100%;
}

.snail-race-lane {
  display: grid;
  grid-template-columns: 74px 1fr 48px;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--game-line);
  border-radius: 16px;
  background: var(--paper);
  color: var(--ink);
}

.snail-race-lane.active {
  border-color: var(--game-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--game-accent) 18%, transparent);
}

.snail-race-lane strong,
.snail-race-lane em {
  font-style: normal;
  font-weight: 950;
}

.snail-race-lane span {
  position: relative;
  height: 18px;
  border: 1px solid var(--game-line);
  border-radius: 999px;
  background: var(--game-soft);
}

.snail-race-lane i {
  position: absolute;
  top: 50%;
  left: clamp(0px, var(--snail-progress), calc(100% - 26px));
  width: 26px;
  height: 26px;
  border: 2px solid color-mix(in srgb, var(--ink) 22%, transparent);
  border-radius: 999px 999px 999px 4px;
  background: var(--snail-color);
  transform: translateY(-50%);
}

.snail-race-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: center;
}

.snail-race-controls strong {
  display: grid;
  place-items: center;
  min-width: 52px;
  height: 52px;
  border: 2px solid var(--game-line);
  border-radius: 14px;
  background: var(--game-soft);
  color: var(--ink);
  font-size: 1.25rem;
  font-weight: 950;
}

.snail-race-meta {
  margin: 0;
  color: var(--muted);
  font-weight: 800;
  text-align: center;
}

.bee-garden-wrap {
  display: grid;
  gap: 16px;
  justify-items: center;
  width: min(520px, 100%);
}

.bee-garden-grid {
  display: grid;
  grid-template-columns: repeat(var(--bee-size), 54px);
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--game-line);
  border-radius: 18px;
  background: color-mix(in srgb, #65c987 18%, var(--game-soft));
}

.bee-garden-cell {
  position: relative;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border: 1px solid var(--game-line);
  border-radius: 12px;
  background: var(--paper);
}

.bee-garden-cell.flower::before,
.bee-garden-cell.collected::before {
  content: "";
  width: 26px;
  height: 26px;
  border-radius: 50% 50% 50% 8px;
  background: #f97066;
  transform: rotate(45deg);
}

.bee-garden-cell.collected::before {
  background: color-mix(in srgb, #65c987 52%, #f97066);
  opacity: 0.5;
}

.bee-garden-cell.hive::after {
  content: "";
  width: 30px;
  height: 24px;
  border: 2px solid color-mix(in srgb, var(--ink) 20%, transparent);
  border-radius: 999px 999px 10px 10px;
  background: #f7d86b;
}

.bee-garden-cell.bee {
  box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--game-accent) 34%, transparent);
}

.bee-garden-cell.bee::before {
  content: "";
  z-index: 2;
  width: 28px;
  height: 22px;
  border: 2px solid color-mix(in srgb, var(--ink) 24%, transparent);
  border-radius: 999px;
  background:
    linear-gradient(90deg, transparent 30%, color-mix(in srgb, var(--ink) 28%, transparent) 30% 42%, transparent 42% 58%, color-mix(in srgb, var(--ink) 28%, transparent) 58% 70%, transparent 70%),
    #f7d86b;
}

.bee-garden-controls {
  display: grid;
  grid-template-columns: repeat(3, minmax(74px, 1fr));
  gap: 8px;
  width: min(320px, 100%);
}

.bee-garden-controls button:first-child {
  grid-column: 2;
}

.bee-garden-controls button:nth-child(4) {
  grid-column: 2;
}

.bee-garden-meta {
  margin: 0;
  color: var(--muted);
  font-weight: 800;
  text-align: center;
}

.quiz-wrap {
  display: grid;
  gap: 16px;
  justify-items: center;
  width: min(620px, 100%);
}

.quiz-wheel {
  position: relative;
  width: 190px;
  aspect-ratio: 1;
  border: 2px solid var(--game-line);
  border-radius: 999px;
  background: conic-gradient(#f7d86b, #8ed1a7, #8fb7ff, #f5a3a3, #f7d86b);
  transform: rotate(var(--quiz-rotation));
  transition: transform .3s ease;
}

.quiz-wheel::after {
  content: "";
  position: absolute;
  inset: 38%;
  border-radius: 999px;
  background: var(--paper);
  border: 1px solid var(--game-line);
}

.quiz-arrow {
  position: absolute;
  z-index: 2;
  top: -14px;
  left: calc(50% - 10px);
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 20px solid var(--ink);
  transform: rotate(calc(-1 * var(--quiz-rotation)));
}

.quiz-wheel i {
  position: absolute;
  inset: 14px;
  display: grid;
  place-items: start center;
  color: #102017;
  font-size: .68rem;
  font-style: normal;
  font-weight: 900;
  text-align: center;
  transform: rotate(calc((360deg / var(--total)) * var(--slice)));
}

.quiz-card {
  display: grid;
  gap: 12px;
  width: min(520px, 100%);
  text-align: center;
}

.quiz-card p,
.quiz-meta {
  margin: 0;
  color: var(--muted);
  font-weight: 800;
}

.quiz-choices {
  display: grid;
  grid-template-columns: repeat(2, minmax(120px, 1fr));
  gap: 10px;
}

.quiz-choices button {
  min-height: 58px;
  border: 1px solid var(--game-line);
  border-radius: 12px;
  background: var(--game-soft);
  color: var(--ink);
  font-weight: 900;
  cursor: pointer;
}

.quiz-choices button:hover {
  background: var(--game-hover);
}

.junior2048-wrap {
  display: grid;
  gap: 14px;
  width: min(440px, 100%);
}

.junior2048-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--game-line) 72%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--game-soft) 86%, var(--ink));
}

.junior2048-tile {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border-radius: 8px;
  background: color-mix(in srgb, var(--paper) 38%, transparent);
  color: var(--ink);
  font-size: clamp(20px, 6vw, 38px);
  font-weight: 950;
}

.junior2048-tile:not(.v0) {
  background: linear-gradient(145deg, #fff2b8, #f47a32);
  color: #222;
  box-shadow: 0 8px 18px rgb(var(--black-rgb) / 14%);
}

.junior2048-tile.v32,
.junior2048-tile.v64,
.junior2048-tile.v128,
.junior2048-tile.v256,
.junior2048-tile.v512,
.junior2048-tile.v1024,
.junior2048-tile.v2048 {
  background: linear-gradient(145deg, #9ee6cf, #3271d4);
  color: white;
}

.junior2048-controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(110px, 1fr));
  gap: 8px;
}

.junior2048-info {
  margin: 0;
  color: var(--ink);
  font-weight: 850;
  text-align: center;
}

.mastermind-wrap {
  display: grid;
  gap: 16px;
  justify-items: center;
  width: min(460px, 100%);
}

.mastermind-history {
  display: grid;
  gap: 8px;
  width: 100%;
}

.mastermind-row,
.mastermind-current,
.mastermind-palette {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.mastermind-row {
  justify-content: space-between;
  border: 1px solid color-mix(in srgb, var(--game-line) 72%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--paper) 12%, transparent);
  padding: 8px;
}

.mastermind-current {
  min-width: min(300px, 100%);
  border: 1px solid color-mix(in srgb, var(--game-line) 68%, transparent);
  border-radius: 18px;
  background: color-mix(in srgb, var(--black) 10%, transparent);
  padding: 12px;
}

.mastermind-hint {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.mastermind-peg {
  width: 34px;
  aspect-ratio: 1;
  border: 2px solid color-mix(in srgb, var(--white) 34%, transparent);
  border-radius: 999px;
  box-shadow: inset 0 0 0 2px rgb(var(--black-rgb) / 12%), 0 5px 12px rgb(var(--black-rgb) / 18%);
}

.mastermind-slot {
  width: 48px;
  cursor: pointer;
}

.mastermind-color {
  cursor: pointer;
}

.mastermind-slot,
.mastermind-color {
  transition: transform .14s ease, box-shadow .14s ease, outline-color .14s ease;
}

.mastermind-slot:hover,
.mastermind-slot:focus-visible,
.mastermind-color:hover,
.mastermind-color:focus-visible {
  transform: translateY(-2px) scale(1.04);
  outline: 3px solid color-mix(in srgb, var(--game-accent) 46%, transparent);
  outline-offset: 2px;
}

.mastermind-peg.red { background: #d94747; }
.mastermind-peg.yellow { background: #f0c747; }
.mastermind-peg.green { background: #5aa469; }
.mastermind-peg.blue { background: #4e80d9; }
.mastermind-peg.purple { background: #8d62c9; }
.mastermind-peg.orange { background: #e38a3f; }

.solitaire-topbar {
  display: grid;
  grid-template-columns: repeat(7, minmax(54px, 1fr));
  gap: 10px;
  align-items: center;
}

.solitaire-tableau {
  display: grid;
  grid-template-columns: repeat(7, minmax(54px, 1fr));
  gap: 10px;
  align-items: start;
}

.solitaire-column {
  display: grid;
  gap: 5px;
  min-height: 260px;
  border: 1px dashed color-mix(in srgb, var(--game-line) 58%, transparent);
  border-radius: 14px;
  padding: 6px;
}

.solitaire-card,
.solitaire-stack {
  display: grid;
  place-items: center;
  min-height: 72px;
  border: 1px solid color-mix(in srgb, var(--game-line) 74%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--paper) 88%, var(--game-soft));
  color: var(--ink);
  font-weight: 900;
  cursor: pointer;
}

.solitaire-card.red {
  color: #b53232;
}

.solitaire-card.face-down,
.solitaire-stock {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--game-accent) 44%, transparent) 25%, transparent 25%) 0 0 / 14px 14px,
    linear-gradient(135deg, transparent 75%, color-mix(in srgb, var(--game-accent) 38%, transparent) 75%) 0 0 / 14px 14px,
    var(--game-soft);
  color: var(--muted);
}

.solitaire-foundation {
  background: color-mix(in srgb, var(--white) 12%, transparent);
}

.solitaire-small-action,
.solitaire-column-actions .button {
  min-height: 36px;
  padding: 7px 9px;
  font-size: 12px;
}

.solitaire-column-actions {
  display: grid;
  margin-top: auto;
}

.solitaire-duel-wrap {
  display: grid;
  grid-template-columns: repeat(2, minmax(240px, 1fr));
  gap: 10px;
  width: 100%;
}

.solitaire-duel-player {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--game-line) 72%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--paper) 16%, transparent);
}

.solitaire-duel-player.active {
  box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--game-accent) 42%, transparent);
}

.solitaire-duel-title {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: var(--ink);
  font-weight: 800;
}

.solitaire-topbar.compact {
  grid-template-columns: repeat(3, minmax(54px, 1fr));
}

.solitaire-duel-foundations,
.solitaire-duel-columns {
  display: grid;
  gap: 5px;
}

.solitaire-duel-foundations {
  grid-template-columns: repeat(4, minmax(42px, 1fr));
}

.solitaire-duel-columns {
  grid-template-columns: repeat(7, minmax(28px, 1fr));
}

.solitaire-duel-column {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.solitaire-duel-column .solitaire-card,
.solitaire-duel-column .button {
  min-width: 0;
  width: 100%;
  padding-inline: 2px;
  overflow: hidden;
  font-size: .78rem;
}

.solitaire-duel-column .button {
  padding-block: 6px;
}

@media (width <= 520px) {
  .solitaire-topbar,
  .solitaire-tableau {
    grid-template-columns: repeat(7, minmax(36px, 1fr));
    gap: 5px;
  }

  .solitaire-column {
    min-width: 0;
    padding: 3px;
  }

  .solitaire-small-action,
  .solitaire-column-actions .button {
    min-width: 0;
    padding: 5px 2px;
    overflow: hidden;
    font-size: 0;
    white-space: nowrap;
  }

  .solitaire-small-action::after,
  .solitaire-column-actions .button::after {
    content: "F";
    font-size: 10px;
  }

  .solitaire-card,
  .solitaire-stack {
    min-height: 58px;
    border-radius: 8px;
    font-size: .82rem;
  }

  .solitaire-duel-wrap {
    grid-template-columns: 1fr;
  }

  .solitaire-duel-foundations {
    grid-template-columns: repeat(4, minmax(34px, 1fr));
  }

  .solitaire-duel-columns {
    grid-template-columns: repeat(7, minmax(28px, 1fr));
  }
}

.tarot-wrap {
  display: grid;
  gap: 14px;
}

.tarot-dog,
.tarot-trick,
.tarot-hand {
  border: 1px solid color-mix(in srgb, var(--game-line) 70%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--paper) 12%, transparent);
  padding: 10px;
}

.tarot-dog {
  display: flex;
  justify-content: space-between;
  color: var(--muted);
}

.tarot-trick,
.tarot-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.tarot-hands {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.tarot-hand {
  display: grid;
  gap: 8px;
}

.tarot-hand.active {
  outline: 3px solid color-mix(in srgb, var(--game-accent) 56%, transparent);
}

.tarot-card {
  display: grid;
  place-items: center;
  min-width: 38px;
  min-height: 58px;
  border: 1px solid color-mix(in srgb, var(--game-line) 72%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--paper) 90%, var(--game-soft));
  color: var(--ink);
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.tarot-card:hover,
.mini-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 24px rgb(var(--black-rgb) / 18%);
}

.tarot-draw-wrap {
  align-content: center;
}

.tarot-question {
  text-align: center;
}

.tarot-draw-spread {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}

.tarot-draw-spread .tarot-card {
  position: relative;
  width: min(120px, 28vw);
  min-height: 168px;
  font-size: 1.2rem;
}

.tarot-draw-spread .tarot-card::after {
  content: attr(data-tarot-role);
  position: absolute;
  right: 8px;
  bottom: 8px;
  left: 8px;
  color: color-mix(in srgb, var(--ink) 66%, transparent);
  font-size: .72rem;
}

.card-game-deal,
.tarot-redraw {
  justify-self: center;
  min-width: min(240px, 100%);
  background: color-mix(in srgb, var(--game-accent) 28%, var(--paper));
}

.tarot-card[data-tarot-playable="1"] {
  outline: 2px solid color-mix(in srgb, var(--game-accent) 62%, transparent);
  outline-offset: 2px;
}

.tarot-card.red {
  color: var(--game-danger);
}

.tarot-card.trump {
  background: color-mix(in srgb, var(--game-accent) 24%, var(--paper));
}

.tarot-card.excuse {
  background: color-mix(in srgb, var(--game-accent) 18%, var(--paper));
}

.game-turn {
  margin: 0;
  color: var(--muted);
  font-weight: 700;
}

.game-side-panel {
  display: grid;
  gap: 12px;
}

.game-side-panel > section {
  padding: 14px;
}

.game-side-panel h3 {
  margin: 0 0 8px;
}

.game-rules-card ul {
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
  line-height: 1.5;
}

.game-chat-log {
  display: grid;
  align-content: start;
  gap: 8px;
  min-height: 120px;
  max-height: 230px;
  overflow: auto;
  border-radius: 14px;
  background: var(--game-soft);
  padding: 10px;
}

.game-chat-log p {
  margin: 0;
}

.game-chat-log b {
  color: var(--ink);
}

.game-chat-card form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  margin-top: 10px;
}

.games-ai-admin-list,
.games-ai-admin-row,
.games-per-game-admin {
  display: grid;
  gap: 10px;
}

.games-per-game-admin {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.games-per-game-admin .wide {
  grid-column: 1 / -1;
}

.games-ai-admin-row {
  grid-template-columns: 1fr 160px 90px 1.6fr;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 10px;
}

@media (width <= 860px) {
  .games-layout,
  .game-arena,
  .game-stage-head,
  .games-ai-admin-row,
  .games-per-game-admin {
    grid-template-columns: 1fr;
  }

  .games-library {
    position: static;
  }

  .games-page.library-collapsed .games-layout {
    grid-template-columns: 1fr;
  }

  .games-page.library-collapsed .games-library {
    display: flex;
    align-items: center;
    overflow-x: auto;
  }

  .games-page.library-collapsed .games-library-head {
    flex: 0 0 auto;
  }

  .game-scoreboard {
    width: 100%;
  }

  .game-scoreboard span {
    flex: 1;
  }

  .bestiary-creatures {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .shape-workshop-options {
    grid-template-columns: 1fr;
  }

  .fraction-forge-options {
    grid-template-columns: 1fr;
  }

  .sound-runes-options {
    grid-template-columns: 1fr;
  }

  .world-cartographer-options {
    grid-template-columns: 1fr;
  }

  .season-clock-options {
    grid-template-columns: 1fr;
  }

  .measure-market-wrap {
    grid-template-columns: 1fr;
  }

  .measure-market-options {
    grid-template-columns: 1fr;
  }

  .constellation-memory-options {
    grid-template-columns: 1fr;
  }

  .color-pairs-options,
  .shadow-match-options,
  .size-spot-options {
    grid-template-columns: 1fr;
  }
}

.mirror_patterns-board {
  aspect-ratio: auto;
  min-height: 430px;
  align-content: center;
}

.mirror-patterns-wrap {
  display: grid;
  gap: 14px;
  justify-items: center;
  color: var(--game-ink);
}

.mirror-patterns-wrap > strong {
  font-size: 1.05rem;
}

.mirror-patterns-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(44px, 64px));
  gap: 7px;
  padding: 14px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--game-panel) 72%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--game-ink) 12%, transparent);
}

.mirror-cell {
  aspect-ratio: 1;
  border: 1px solid color-mix(in srgb, var(--game-ink) 18%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--game-cell-light) 62%, var(--game-panel));
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 38%, transparent);
}

.mirror-cell.filled {
  background: radial-gradient(circle at 35% 28%, var(--game-piece-light), var(--game-accent) 72%);
}

.mirror-cell.unknown {
  background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--game-cell-dark) 24%, transparent), color-mix(in srgb, var(--game-cell-dark) 24%, transparent) 8px, color-mix(in srgb, var(--game-panel) 70%, transparent) 8px, color-mix(in srgb, var(--game-panel) 70%, transparent) 16px);
}

.mirror-cell.axis {
  box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--game-accent) 55%, transparent);
}

.mirror-cell.editable:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px color-mix(in srgb, var(--game-ink) 14%, transparent);
}

.mirror-patterns-meta {
  margin: 0;
  max-width: 520px;
  text-align: center;
}

.color_pairs-board,
.size_spot-board,
.shadow_match-board {
  aspect-ratio: auto;
  min-height: 430px;
  align-content: center;
}

.size-spot-wrap {
  display: grid;
  gap: 14px;
  justify-items: center;
  color: var(--game-ink);
}

.size-spot-wrap > strong {
  font-size: 1.1rem;
  text-align: center;
}

.size-spot-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(98px, 140px));
  gap: 10px;
  align-items: end;
}

.size-spot-options button {
  display: grid;
  gap: 8px;
  justify-items: center;
  align-content: end;
  min-height: 136px;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--game-ink) 14%, transparent);
  border-radius: 8px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--game-cell-light) 72%, white), color-mix(in srgb, var(--game-cell-light) 58%, var(--game-panel)));
  color: var(--game-ink);
  cursor: pointer;
  box-shadow: 0 10px 18px rgb(var(--black-rgb) / 10%);
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}

.size-spot-object {
  display: block;
  width: var(--spot-size);
  height: var(--spot-size);
  border-radius: 28% 42% 30% 46%;
  background: var(--game-accent);
  box-shadow: inset 0 8px 0 color-mix(in srgb, #fff 28%, transparent), 0 8px 16px color-mix(in srgb, var(--game-ink) 14%, transparent);
}

.size-spot-object.tone-blue { background: #4f7fcf; }
.size-spot-object.tone-green { background: #5aa66a; }
.size-spot-object.tone-yellow { background: #e4bd4f; }
.size-spot-object.tone-orange { background: #df8a42; }
.size-spot-object.tone-purple { background: #8b6ed1; }

.size-spot-meta {
  margin: 0;
  max-width: 520px;
  text-align: center;
}

.size-spot-meta.hint {
  color: var(--game-danger);
}

.color-pairs-wrap {
  display: grid;
  gap: 14px;
  justify-items: center;
  color: var(--game-ink);
}

.color-pairs-model {
  display: grid;
  gap: 10px;
  justify-items: center;
  padding: 16px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--game-panel) 78%, transparent);
}

.color-pairs-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(92px, 130px));
  gap: 10px;
}

.color-pairs-options button {
  display: grid;
  gap: 8px;
  justify-items: center;
  min-height: 118px;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--game-ink) 14%, transparent);
  border-radius: 8px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--game-cell-light) 72%, white), color-mix(in srgb, var(--game-cell-light) 58%, var(--game-panel)));
  color: var(--game-ink);
  cursor: pointer;
  box-shadow: 0 10px 18px rgb(var(--black-rgb) / 10%);
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}

.color-pairs-meta {
  margin: 0;
  max-width: 520px;
  text-align: center;
}

.color-pairs-meta.hint {
  color: var(--game-danger);
}

.color-pair-tile {
  position: relative;
  display: grid;
  place-items: center;
  width: 70px;
  height: 70px;
  border-radius: 8px;
  border: 2px solid color-mix(in srgb, var(--game-ink) 18%, transparent);
  overflow: hidden;
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 34%, transparent);
}

.color-pair-tile.model {
  width: 88px;
  height: 88px;
}

.color-pair-tile.color-red { background-color: #d95c55; }
.color-pair-tile.color-blue { background-color: #4f7fcf; }
.color-pair-tile.color-green { background-color: #5aa66a; }
.color-pair-tile.color-yellow { background-color: #e4bd4f; }
.color-pair-tile.color-purple { background-color: #8b6ed1; }
.color-pair-tile.color-orange { background-color: #df8a42; }

.color-pair-tile.pattern-stripes {
  background-image: repeating-linear-gradient(45deg, transparent 0 10px, color-mix(in srgb, #fff 34%, transparent) 10px 17px);
}

.color-pair-tile.pattern-dots {
  background-image: radial-gradient(circle, color-mix(in srgb, #fff 58%, transparent) 0 6px, transparent 7px);
  background-size: 22px 22px;
}

.color-pair-tile.pattern-star i {
  width: 44px;
  height: 44px;
  background: color-mix(in srgb, #fff 72%, transparent);
  clip-path: polygon(50% 0, 62% 35%, 100% 35%, 69% 56%, 82% 100%, 50% 72%, 18% 100%, 31% 56%, 0 35%, 38% 35%);
}

.color-pair-tile.pattern-waves {
  background-image: radial-gradient(ellipse at 50% 0, transparent 0 12px, color-mix(in srgb, #fff 38%, transparent) 13px 18px, transparent 19px);
  background-size: 34px 24px;
}

.color-pair-tile.pattern-cross i {
  width: 42px;
  height: 42px;
  background: color-mix(in srgb, #fff 68%, transparent);
  clip-path: polygon(38% 0, 62% 0, 62% 38%, 100% 38%, 100% 62%, 62% 62%, 62% 100%, 38% 100%, 38% 62%, 0 62%, 0 38%, 38% 38%);
}

.color-pair-tile.pattern-diamond i {
  width: 42px;
  height: 42px;
  background: color-mix(in srgb, #fff 70%, transparent);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}


.shadow-match-wrap {
  display: grid;
  gap: 14px;
  justify-items: center;
  color: var(--game-ink);
}

.shadow-match-stage {
  display: grid;
  gap: 10px;
  justify-items: center;
  padding: 16px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--game-panel) 78%, transparent);
}

.shadow-match-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(92px, 130px));
  gap: 10px;
}

.shadow-match-options button {
  display: grid;
  gap: 8px;
  justify-items: center;
  min-height: 112px;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--game-ink) 14%, transparent);
  border-radius: 8px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--game-cell-light) 72%, white), color-mix(in srgb, var(--game-cell-light) 58%, var(--game-panel)));
  color: var(--game-ink);
  cursor: pointer;
  box-shadow: 0 10px 18px rgb(var(--black-rgb) / 10%);
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}

.shadow-match-meta {
  margin: 0;
  max-width: 520px;
  text-align: center;
}

.shadow-match-meta.hint {
  color: var(--game-danger);
}

.size-spot-options button:hover:not(:disabled),
.size-spot-options button:focus-visible,
.color-pairs-options button:hover:not(:disabled),
.color-pairs-options button:focus-visible,
.shadow-match-options button:hover:not(:disabled),
.shadow-match-options button:focus-visible {
  transform: translateY(-3px);
  border-color: var(--game-accent);
  box-shadow: 0 16px 28px rgb(var(--black-rgb) / 14%);
  outline: none;
}

.size-spot-options button:active:not(:disabled),
.color-pairs-options button:active:not(:disabled),
.shadow-match-options button:active:not(:disabled) {
  transform: translateY(0);
}

.shadow-token {
  display: block;
  width: 68px;
  height: 68px;
  background: var(--game-ink);
  opacity: .82;
}

.shadow-token.color {
  background: linear-gradient(135deg, var(--game-accent), var(--game-piece-light));
  opacity: 1;
}

.shadow-token-diamond {
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

.shadow-token-house {
  clip-path: polygon(50% 0, 100% 38%, 88% 38%, 88% 100%, 12% 100%, 12% 38%, 0 38%);
}

.shadow-token-boat {
  clip-path: polygon(10% 55%, 90% 55%, 72% 88%, 28% 88%, 0 55%, 48% 8%, 56% 55%);
}

.shadow-token-tree {
  clip-path: polygon(50% 0, 86% 36%, 70% 36%, 94% 68%, 62% 68%, 62% 100%, 38% 100%, 38% 68%, 6% 68%, 30% 36%, 14% 36%);
}

.shadow-token-star {
  clip-path: polygon(50% 0, 62% 35%, 100% 35%, 69% 56%, 82% 100%, 50% 72%, 18% 100%, 31% 56%, 0 35%, 38% 35%);
}

.shadow-token-moon {
  border-radius: 50%;
  clip-path: circle(50% at 50% 50%);
  box-shadow: inset -20px 0 0 color-mix(in srgb, var(--game-panel) 80%, transparent);
}

.mirror-patterns-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.mirror-patterns-actions button {
  min-height: 36px;
  padding: 8px 12px;
  border: 1px solid color-mix(in srgb, var(--game-ink) 15%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--game-accent) 18%, var(--game-panel));
  color: var(--game-ink);
}

@media (width <= 640px) {
  .measure_market-board,
  .sokoban-board {
    width: min(100%, calc(100vw - 32px));
    padding: 8px;
  }

  .measure-market-wrap {
    grid-template-columns: 1fr;
    width: 100%;
    max-width: 100%;
  }

  .sokoban-wrap,
  .sokoban-grid {
    width: 100%;
    max-width: calc(100vw - 64px);
  }

  .sokoban-controls {
    width: 100%;
  }

  .color-pairs-options,
  .shadow-match-options,
  .size-spot-options {
    grid-template-columns: 1fr;
  }
}