/* Galaxica Puzzle Society — печатный клуб головоломок, без «нейросеточного стекла». */
:root {
  --game-paper: var(--bg);
  --game-paper-deep: var(--input-bg);
  --game-sheet: var(--v3-glass);
  --game-ink: var(--v3-ink);
  --game-muted: var(--v3-muted);
  --game-line: var(--v3-line);
  --game-brass: var(--v3-violet);
  --game-gold: var(--gx-cyan);
  --game-red: var(--v3-blue);
  --game-green: #23a36d;
  --game-blue: var(--v3-blue);
}

body.game-open { overflow: hidden; }
body.game-open .site-header { z-index: 2300; }
.game-stage[hidden], .game-view[hidden], .game-lobby[hidden], .game-play[hidden],
.race-panel[hidden], .game-celebration[hidden], .survival-meter[hidden] { display: none !important; }

.game-stage {
  position: fixed;
  z-index: 2200;
  inset: 0;
  overflow: auto;
  color: var(--game-ink);
  background-color: var(--game-paper);
  background-image:
    repeating-linear-gradient(91deg, rgba(63, 51, 32, .018) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(2deg, rgba(63, 51, 32, .014) 0 1px, transparent 1px 9px);
  overscroll-behavior: none;
  padding-top: calc(max(10px, env(safe-area-inset-top)) + 74px);
}

.game-stage::before {
  content: "";
  position: fixed;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  opacity: .24;
  background-image: radial-gradient(circle at 20% 30%, currentColor .45px, transparent .7px);
  background-size: 5px 5px;
  mix-blend-mode: multiply;
}

.game-stage-nav {
  display: flex;
  align-items: center;
  width: min(980px, calc(100% - 28px));
  min-height: 42px;
  margin: 0 auto;
}

.game-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: auto;
  min-height: 38px;
  padding: 0 12px 0 8px;
  border: 0;
  border-radius: 12px;
  color: var(--v3-blue);
  background: transparent;
  font: inherit;
  font-size: 13px;
  font-weight: 750;
  white-space: nowrap;
}
.game-back > span:first-child { font-size: 28px; font-weight: 400; line-height: 1; }
.game-back:active { transform: scale(.96); }

.game-stage-main { width: min(980px, calc(100% - 28px)); margin: 0 auto; padding: 12px 0 80px; }
.game-view { animation: pageUnfold .7s cubic-bezier(.2,.8,.2,1) both; transform-origin: 50% 0; }

/* Обложки */
.game-lobby { display: grid; grid-template-columns: minmax(300px, .82fr) minmax(420px, 1.18fr); gap: clamp(24px, 5vw, 62px); align-items: start; }
.game-cover {
  position: sticky;
  top: 108px;
  min-height: 650px;
  overflow: hidden;
  padding: clamp(28px, 5vw, 50px);
  border: 1px solid var(--game-ink);
  border-radius: 2px;
  color: #f4ead7;
  background: #203f35;
  box-shadow: 12px 14px 0 rgba(25,25,20,.16), 20px 24px 44px rgba(52,43,28,.18);
}
.game-cover::before {
  content: "";
  position: absolute;
  inset: 11px;
  border: 1px solid rgba(228,191,103,.55);
  pointer-events: none;
}
.game-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(105deg, transparent 0 8px, rgba(255,255,255,.018) 8px 9px);
  pointer-events: none;
}
.game-cover-2048 { color: #f8eddb; background: #7a3028; }
.cover-edition { position: relative; z-index: 2; display: flex; justify-content: space-between; padding-bottom: 16px; border-bottom: 1px solid rgba(235,205,141,.55); color: #e2c784; font-size: 10px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.game-cover > p { position: relative; z-index: 2; margin: 0; color: #e2c784; font-size: 10px; font-weight: 800; letter-spacing: .16em; }
.game-cover h1 { position: relative; z-index: 2; margin: 9px 0 18px; font-family: "Playfair Display", Georgia, serif; font-size: clamp(64px, 8vw, 104px); font-weight: 500; line-height: .86; letter-spacing: -.07em; }
.game-cover .cover-lead { max-width: 390px; color: rgba(248,239,221,.8); font-family: "Playfair Display", Georgia, serif; font-size: 20px; font-weight: 400; line-height: 1.35; letter-spacing: 0; }
.cover-sudoku-art { position: relative; z-index: 1; display: grid; grid-template: repeat(3, 1fr) / repeat(3, 1fr); width: 82%; aspect-ratio: 1; margin: 50px auto 54px; border: 3px solid #ddbd75; background-image: linear-gradient(to bottom, transparent 32.8%, #ddbd75 33%, #ddbd75 33.6%, transparent 33.8%, transparent 66.1%, #ddbd75 66.3%, #ddbd75 66.9%, transparent 67.1%), linear-gradient(to right, transparent 32.8%, #ddbd75 33%, #ddbd75 33.6%, transparent 33.8%, transparent 66.1%, #ddbd75 66.3%, #ddbd75 66.9%, transparent 67.1%); transform: rotate(-3deg); box-shadow: 9px 10px 0 rgba(0,0,0,.18); }
.cover-sudoku-art span { display: grid; place-items: center; color: #f8eddb; font: 600 clamp(30px, 5vw, 54px)/1 "Playfair Display", Georgia, serif; }
.cover-sudoku-art span:nth-child(2) { grid-column: 3; }
.cover-sudoku-art span:nth-child(3) { grid-area: 2 / 2; }
.cover-sudoku-art span:nth-child(4) { grid-area: 3 / 1; }
.cover-sudoku-art span:nth-child(5) { grid-area: 3 / 3; }
.cover-2048-art { position: relative; z-index: 2; display: grid; grid-template: repeat(4, 1fr) / repeat(4, 1fr); width: 88%; aspect-ratio: 1; margin: 44px auto 52px; transform: rotate(2deg); }
.cover-2048-art span { display: grid; place-items: center; border: 1px solid #e2c784; color: #f8eddb; background: rgba(25,18,14,.17); font: 600 clamp(22px, 4vw, 45px)/1 "Playfair Display", Georgia, serif; box-shadow: 7px 7px 0 rgba(0,0,0,.15); }
.cover-2048-art span:nth-child(1) { grid-area: 4 / 1; }
.cover-2048-art span:nth-child(2) { grid-area: 3 / 2; }
.cover-2048-art span:nth-child(3) { grid-area: 2 / 3; font-size: clamp(17px, 3vw, 32px); }
.cover-2048-art span:nth-child(4) { grid-area: 1 / 4; color: #5b241f; background: #e2c784; font-size: clamp(14px, 2.4vw, 26px); }

/* Стол выбора режима */
.mode-desk { padding-top: 5px; }
.desk-label { margin: 0 0 18px; color: var(--game-muted); font-size: 11px; font-weight: 800; letter-spacing: .17em; text-transform: uppercase; }
.mode-grid { display: grid; gap: 14px; }
.mode-card {
  position: relative;
  display: grid;
  grid-template-columns: 45px 1fr 50px;
  grid-template-rows: auto auto;
  align-items: center;
  min-height: 130px;
  overflow: hidden;
  padding: 23px 22px;
  border: 1px solid var(--game-line);
  border-radius: 2px;
  color: var(--game-ink);
  background: var(--game-sheet);
  box-shadow: 5px 6px 0 var(--game-paper-deep);
  text-align: left;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.mode-card::after { content: ""; position: absolute; top: -140%; left: -40%; width: 38%; height: 380%; background: rgba(255,255,255,.48); transform: rotate(20deg); transition: left .65s ease; }
.mode-card:hover::after, .mode-card.selected::after { left: 125%; }
.mode-card:hover { transform: translateY(-3px); border-color: var(--game-brass); box-shadow: 7px 9px 0 var(--game-paper-deep); }
.mode-card.selected { border: 2px solid var(--game-ink); box-shadow: 6px 7px 0 var(--game-ink); transform: translate(-2px,-2px); }
.mode-index { grid-row: 1 / 3; align-self: stretch; padding-top: 4px; border-right: 1px solid var(--game-line); color: var(--game-brass); font: italic 17px/1 Georgia, serif; }
.mode-symbol { grid-column: 3; grid-row: 1 / 3; justify-self: center; color: var(--game-red); font: 31px/1 Georgia, serif; }
.mode-card strong { padding-left: 18px; font-family: "Playfair Display", Georgia, serif; font-size: 23px; font-weight: 600; }
.mode-card small { padding: 7px 12px 0 18px; color: var(--game-muted); font-size: 12px; line-height: 1.45; }
.mode-check { position: absolute; right: 13px; bottom: 9px; opacity: 0; color: var(--game-green); font-size: 8px; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; transform: rotate(-4deg); }
.mode-card.selected .mode-check { opacity: 1; animation: inkStamp .35s cubic-bezier(.2,1.4,.4,1) both; }
.mode-card-race .mode-symbol { color: var(--game-red); }
.mode-card-daily .mode-symbol { color: var(--game-brass); }
.difficulty-desk { margin-top: 28px; padding: 20px 0; border-top: 1px solid var(--game-line); border-bottom: 1px solid var(--game-line); }
.difficulty-desk > span { display: block; margin-bottom: 12px; color: var(--game-muted); font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.difficulty-pills { display: flex; gap: 8px; }
.difficulty-pills button { flex: 1; min-height: 44px; border: 1px solid var(--game-ink); border-radius: 0; color: var(--game-ink); background: transparent; font-weight: 750; transition: color .18s, background .18s, transform .18s; }
.difficulty-pills button.selected { color: var(--game-sheet); background: var(--game-ink); transform: translateY(-2px); }
.game-start { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 64px; margin-top: 24px; padding: 0 24px; border: 1px solid var(--game-ink); border-radius: 0; color: #f8f1e4; background: var(--game-ink); box-shadow: 7px 8px 0 var(--game-brass); font: 600 19px/1 "Playfair Display", Georgia, serif; transition: transform .18s, box-shadow .18s; }
.game-start b { color: var(--game-gold); font: 27px/1 Arial, sans-serif; }
.game-start:active { transform: translate(5px,5px); box-shadow: 2px 3px 0 var(--game-brass); }

/* Игровая партия */
.game-play { width: min(820px, 100%); margin: 0 auto; animation: tableReveal .65s cubic-bezier(.2,.8,.2,1) both; }
.play-masthead { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; margin-bottom: 22px; padding-bottom: 15px; border-bottom: 1px solid var(--game-ink); }
.play-exit, .play-restart { border: 0; color: var(--game-ink); background: transparent; }
.play-exit { justify-self: start; padding: 8px 0; font-weight: 750; }
.play-restart { justify-self: end; width: 39px; height: 39px; border: 1px solid var(--game-ink); border-radius: 50%; font-size: 21px; transition: transform .35s ease; }
.play-restart:active { transform: rotate(-150deg) scale(.92); }
.play-title { text-align: center; }
.play-title span { display: block; font-family: "Playfair Display", Georgia, serif; font-size: 22px; font-weight: 600; }
.play-title b { color: var(--game-muted); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; }
.game-toolbar { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-bottom: 15px; padding: 0; border: 1px solid var(--game-ink); border-radius: 0; background: var(--game-sheet); box-shadow: 5px 6px 0 var(--game-paper-deep); backdrop-filter: none; }
.game-stat { min-width: 0; padding: 12px 10px; border: 0; border-left: 1px solid var(--game-line); text-align: center; }
.game-stat:first-child { border-left: 0; }
.game-stat span, .game-score span { display: block; color: var(--game-muted); font-size: 8px; font-style: normal; font-weight: 850; letter-spacing: .14em; text-transform: uppercase; }
.game-stat strong { color: var(--game-ink); font: 600 19px/1.25 "Playfair Display", Georgia, serif; font-variant-numeric: tabular-nums; }
.game-stat strong i { color: var(--game-muted); font-size: 12px; font-style: normal; }

/* Гонка Судоку */
.race-panel { display: grid; grid-template-columns: 92px 1fr 112px; align-items: center; gap: 12px; margin-bottom: 14px; padding: 12px; border: 1px solid var(--game-ink); background: var(--game-sheet); box-shadow: 5px 6px 0 var(--game-red); }
.racer { display: flex; align-items: center; gap: 8px; }
.racer-seal { display: grid; place-items: center; width: 34px; height: 34px; border: 2px solid currentColor; border-radius: 50%; color: var(--game-green); font: 800 9px/1 Arial, sans-serif; transform: rotate(-6deg); }
.ai-racer .racer-seal { color: var(--game-red); transform: rotate(5deg); }
.racer strong, .racer small { display: block; white-space: nowrap; }
.racer strong { font-size: 10px; }
.racer small { color: var(--game-muted); font-size: 9px; }
.race-track { position: relative; height: 18px; border: 1px solid var(--game-ink); background: var(--game-paper-deep); }
.race-track i { position: absolute; left: 0; width: 0; height: 50%; transition: width .8s cubic-bezier(.2,.8,.2,1); }
#sudoku-you-bar { top: 0; background: var(--game-green); }
#sudoku-ai-bar { bottom: 0; background: var(--game-red); }
.race-finish { position: absolute; z-index: 2; top: 50%; right: -5px; color: var(--game-brass); font-size: 17px; transform: translateY(-50%); }

/* Судоку: 9 квадратов должны читаться мгновенно. */
.sudoku-layout { display: grid; grid-template-columns: minmax(0, 620px) 170px; align-items: start; gap: 20px; }
.sudoku-board-wrap { position: relative; }
.sudoku-board {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  overflow: hidden;
  aspect-ratio: 1;
  border: 4px solid var(--game-ink);
  border-radius: 0;
  background: var(--game-sheet);
  box-shadow: 9px 10px 0 var(--game-paper-deep), 20px 24px 50px rgba(54,43,27,.13);
  animation: boardOpen .65s cubic-bezier(.15,.85,.25,1) both;
}
.sudoku-cell {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  padding: 0;
  border: 0;
  border-right: 1px solid var(--game-line);
  border-bottom: 1px solid var(--game-line);
  border-radius: 0;
  color: var(--game-blue);
  background: var(--game-sheet);
  font: 700 clamp(19px, 4vw, 31px)/1 "Playfair Display", Georgia, serif;
  animation: cellArrive .35s both;
  animation-delay: calc(var(--cell-i, 0) * 4ms);
  transition: color .14s ease, background .14s ease, transform .14s ease;
}
.sudoku-cell:nth-child(9n) { border-right: 0; }
.sudoku-cell:nth-child(n+73) { border-bottom: 0; }
.sudoku-cell:nth-child(3n):not(:nth-child(9n)) { border-right: 4px solid var(--game-ink); }
.sudoku-cell:nth-child(n+19):nth-child(-n+27),
.sudoku-cell:nth-child(n+46):nth-child(-n+54) { border-bottom: 4px solid var(--game-ink); }
.sudoku-cell.given { color: var(--game-ink); font-weight: 700; }
.sudoku-cell.peer { background: var(--game-paper-deep); }
.sudoku-cell.same { color: var(--game-sheet); background: var(--game-green); }
.sudoku-cell.selected { z-index: 2; color: var(--game-sheet); background: var(--game-red); box-shadow: inset 0 0 0 3px var(--game-sheet), inset 0 0 0 5px var(--game-red); transform: scale(.93) rotate(-1deg); }
.sudoku-cell.wrong { color: var(--game-red); background: color-mix(in srgb, var(--game-red) 12%, var(--game-sheet)); }
.sudoku-cell.wrong.selected { color: #fff; background: var(--game-red); animation: wrongShake .35s ease both; }
.sudoku-cell.cell-stamp { animation: numberStamp .38s cubic-bezier(.15,1.5,.3,1) both; }
.sudoku-notes-grid { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; height: 100%; padding: 3px; }
.sudoku-notes-grid i { display: grid; place-items: center; color: var(--game-muted); font: 600 clamp(7px, 1.5vw, 10px)/1 Arial, sans-serif; }
.sudoku-controls { position: sticky; top: 95px; }
.sudoku-pad { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; }
.sudoku-pad button, .sudoku-tools button { border: 1px solid var(--game-ink); border-radius: 0; color: var(--game-ink); background: var(--game-sheet); box-shadow: 3px 4px 0 var(--game-paper-deep); }
.sudoku-pad button { flex: 0 0 46px; width: 46px; height: 46px; font: 600 24px/1 "Playfair Display", Georgia, serif; transition: transform .13s, color .13s, background .13s, box-shadow .13s; }
.sudoku-pad button:active { color: var(--game-sheet); background: var(--game-red); box-shadow: 0 0 0 transparent; transform: translate(3px,4px); }
.sudoku-tools { display: grid; gap: 7px; margin-top: 12px; }
.sudoku-tools button { display: grid; grid-template-columns: 28px 1fr; align-items: center; min-height: 48px; padding: 0 11px; text-align: left; }
.sudoku-tools button > span { color: var(--game-red); font: 600 20px/1 Georgia, serif; text-align: center; }
.sudoku-tools small { padding-left: 7px; font-size: 10px; font-weight: 750; }
.sudoku-tools button[aria-pressed="true"] { color: var(--game-sheet); background: var(--game-ink); transform: translate(2px,2px); box-shadow: 1px 2px 0 var(--game-paper-deep); }
.sudoku-tools button[disabled] { opacity: .38; filter: grayscale(1); }

/* 2048 */
.game-2048-heading { margin-bottom: 14px; }
.game-2048-scores { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.game-score { position: relative; overflow: visible; min-width: 0; padding: 12px 14px; border: 1px solid var(--game-ink); border-radius: 0; color: var(--game-ink); background: var(--game-sheet); box-shadow: 4px 5px 0 var(--game-paper-deep); text-align: center; }
.game-score strong { font: 600 24px/1.2 "Playfair Display", Georgia, serif; font-variant-numeric: tabular-nums; }
.game-score-best { color: #f7ecd8; background: var(--game-red); box-shadow: 4px 5px 0 #5d2822; }
.game-score-best span { color: rgba(255,245,225,.7); }
.game-mode-clock[hidden] { visibility: hidden; display: block !important; }
#score-burst-2048 { position: absolute; top: 50%; right: 12px; opacity: 0; color: var(--game-red); font: italic 700 16px/1 Georgia, serif; pointer-events: none; }
#score-burst-2048.burst { animation: scoreRise .75s ease-out both; }
.survival-meter { display: grid; grid-template-columns: auto 1fr 22px; align-items: center; gap: 10px; margin-bottom: 12px; color: var(--game-muted); font-size: 9px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.survival-meter > div { height: 5px; overflow: hidden; border: 1px solid var(--game-ink); }
.survival-meter i { display: block; width: 100%; height: 100%; background: var(--game-red); transform-origin: left; transition: width .2s linear; }
.survival-meter b { color: var(--game-red); font: 700 17px/1 Georgia, serif; }
.game-2048-shell { width: min(100%, 620px); margin: 0 auto; }
.board-2048 {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1;
  padding: clamp(9px, 2.2vw, 15px);
  border: 4px solid var(--game-ink);
  border-radius: 0;
  background: #b7aa93;
  box-shadow: 9px 10px 0 var(--game-paper-deep), 20px 24px 50px rgba(54,43,27,.15);
  touch-action: none;
  animation: boardOpen .65s cubic-bezier(.15,.85,.25,1) both;
}
html[data-theme="dark"] .board-2048 { background: #403a31; }
.board-2048-bg, .tiles-2048 { position: absolute; inset: clamp(9px, 2.2vw, 15px); display: grid; grid-template: repeat(4, 1fr) / repeat(4, 1fr); gap: clamp(7px, 1.8vw, 12px); }
.board-2048-bg span { border: 1px solid rgba(25,25,20,.2); border-radius: 0; background: rgba(251,248,240,.3); box-shadow: inset 2px 2px 0 rgba(25,25,20,.06); }
.tiles-2048.move-left { animation: thrustLeft .2s ease both; }
.tiles-2048.move-right { animation: thrustRight .2s ease both; }
.tiles-2048.move-up { animation: thrustUp .2s ease both; }
.tiles-2048.move-down { animation: thrustDown .2s ease both; }
.tile-2048 { position: relative; display: grid; place-items: center; border: 1px solid var(--game-ink); border-radius: 0; color: var(--game-ink); background: #f5f0e5; box-shadow: 4px 5px 0 rgba(25,25,20,.18); font: 650 clamp(25px, 8vw, 48px)/1 "Playfair Display", Georgia, serif; letter-spacing: -.04em; }
.tile-2048::after { content: ""; position: absolute; inset: 5px; border: 1px solid rgba(25,25,20,.12); }
.tile-2048.value-4 { background: #e8d8b8; }
.tile-2048.value-8 { color: #fff4dc; background: #b77b3e; }
.tile-2048.value-16 { color: #fff4dc; background: #a65337; }
.tile-2048.value-32 { color: #fff4dc; background: #9b3932; }
.tile-2048.value-64 { color: #fff4dc; background: #762c2b; }
.tile-2048.value-128 { color: #f9eed9; background: #526654; font-size: clamp(22px,7vw,41px); }
.tile-2048.value-256 { color: #f9eed9; background: #365b58; font-size: clamp(22px,7vw,41px); }
.tile-2048.value-512 { color: #f9eed9; background: #31566e; font-size: clamp(22px,7vw,41px); }
.tile-2048.value-1024 { color: #1c1a15; background: #d0ae62; font-size: clamp(18px,6vw,34px); }
.tile-2048.value-2048 { color: #1c1a15; background: #e1b94f; box-shadow: 0 0 0 4px #f7ecd0, 0 0 0 7px var(--game-brass), 7px 8px 0 rgba(72,47,15,.35); font-size: clamp(18px,6vw,34px); animation: goldenTile 1.4s ease-in-out infinite alternate; }
.tile-2048.value-4096 { color: #f9eed9; background: #1c1a15; font-size: clamp(18px,6vw,34px); }
.tile-2048.tile-pop { animation: tilePrint .38s cubic-bezier(.15,1.45,.35,1) both; }
.tile-2048.tile-merge { animation: tileMerge .48s cubic-bezier(.15,1.55,.35,1) both; }
.merge-flare { position: absolute; z-index: 4; top: 50%; left: 50%; width: 20px; height: 20px; opacity: 0; border: 2px solid var(--game-gold); border-radius: 50%; pointer-events: none; transform: translate(-50%,-50%); }
.merge-flare.active { animation: mergeFlare .62s ease-out both; }
.swipe-hint { display: flex; justify-content: center; gap: 10px; margin-top: 17px; color: var(--game-muted); font-size: 11px; font-weight: 700; }
.swipe-hint > span:first-child, .swipe-hint > span:last-child { color: var(--game-red); }

/* Результат и конфетти */
.game-celebration { position: absolute; z-index: 10; inset: 9%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 28px; border: 2px solid var(--game-ink); border-radius: 0; color: var(--game-ink); background: color-mix(in srgb, var(--game-sheet) 96%, transparent); box-shadow: 10px 11px 0 var(--game-red), 25px 30px 60px rgba(48,38,24,.2); backdrop-filter: blur(6px); text-align: center; animation: resultCard .55s cubic-bezier(.15,1.2,.25,1) both; }
.result-seal { display: grid; place-items: center; width: 72px; height: 72px; border: 3px double var(--game-red); border-radius: 50%; color: var(--game-red); font: italic 42px/1 "Playfair Display", Georgia, serif; transform: rotate(-8deg); animation: inkStamp .45s cubic-bezier(.15,1.5,.3,1) both; }
.game-celebration strong { font: 600 clamp(27px,6vw,42px)/1.05 "Playfair Display", Georgia, serif; }
.game-celebration > span:not(.result-seal) { max-width: 330px; color: var(--game-muted); line-height: 1.5; }
.game-celebration button { min-height: 48px; padding: 0 19px; border: 1px solid var(--game-ink); border-radius: 0; color: var(--game-sheet); background: var(--game-ink); box-shadow: 4px 5px 0 var(--game-brass); font-weight: 800; }
.game-celebration .result-secondary { color: var(--game-ink); background: transparent; box-shadow: none; }
.confetti-field { position: fixed; z-index: 2300; inset: 0; overflow: hidden; pointer-events: none; }
.paper-confetti { position: absolute; top: -8vh; width: 10px; height: 18px; background: var(--confetti-color, var(--game-gold)); animation: confettiFall var(--confetti-time, 2.8s) cubic-bezier(.1,.7,.2,1) forwards; animation-delay: var(--confetti-delay, 0s); transform: rotate(var(--confetti-rotation, 0deg)); }

@keyframes pageUnfold { from { opacity: 0; transform: perspective(1000px) rotateX(-7deg) translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes tableReveal { from { opacity: 0; transform: translateY(20px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes boardOpen { from { opacity: 0; clip-path: inset(0 100% 0 0); transform: translateX(-14px); } to { opacity: 1; clip-path: inset(0); transform: none; } }
@keyframes cellArrive { from { opacity: 0; } to { opacity: 1; } }
@keyframes inkStamp { from { opacity: 0; transform: scale(1.7) rotate(-15deg); } to { opacity: 1; transform: scale(1) rotate(-4deg); } }
@keyframes numberStamp { 0% { opacity: .2; transform: scale(1.65) rotate(7deg); } 65% { transform: scale(.88) rotate(-2deg); } 100% { opacity: 1; transform: scale(1); } }
@keyframes wrongShake { 25% { transform: translateX(-5px) rotate(-2deg); } 50% { transform: translateX(5px) rotate(2deg); } 75% { transform: translateX(-3px); } }
@keyframes thrustLeft { 50% { transform: translateX(-8px) skewX(-1deg); } }
@keyframes thrustRight { 50% { transform: translateX(8px) skewX(1deg); } }
@keyframes thrustUp { 50% { transform: translateY(-8px) skewY(-1deg); } }
@keyframes thrustDown { 50% { transform: translateY(8px) skewY(1deg); } }
@keyframes tilePrint { from { opacity: 0; transform: scale(.3) rotate(8deg); } 70% { transform: scale(1.08) rotate(-1deg); } to { opacity: 1; transform: none; } }
@keyframes tileMerge { 0% { transform: scale(.72); filter: brightness(1.8); } 55% { transform: scale(1.18) rotate(2deg); } 100% { transform: scale(1); filter: none; } }
@keyframes mergeFlare { from { opacity: 1; transform: translate(-50%,-50%) scale(.3); } to { opacity: 0; transform: translate(-50%,-50%) scale(16); } }
@keyframes scoreRise { from { opacity: 1; transform: translateY(4px) rotate(-3deg); } to { opacity: 0; transform: translateY(-35px) rotate(4deg); } }
@keyframes goldenTile { to { filter: brightness(1.15); transform: scale(1.025); } }
@keyframes resultCard { from { opacity: 0; transform: scale(.76) rotate(-2deg); } to { opacity: 1; transform: scale(1) rotate(0); } }
@keyframes confettiFall { to { top: 108vh; transform: translateX(var(--confetti-drift, 30px)) rotate(760deg); } }

@media (max-width: 760px) {
  .game-stage { padding-top: calc(max(8px, env(safe-area-inset-top)) + 66px); }
  .game-stage-nav { width: min(100% - 20px, 620px); }
  .game-stage-main { width: min(100% - 20px, 620px); padding-top: 8px; }
  .game-lobby { display: block; }
  .game-cover { position: relative; top: auto; min-height: 480px; margin-bottom: 30px; padding: 30px; }
  .game-cover h1 { font-size: clamp(70px,20vw,104px); }
  .game-cover .cover-lead { font-size: 17px; }
  .cover-sudoku-art, .cover-2048-art { width: min(69vw,300px); margin-block: 28px 34px; }
  .mode-card { min-height: 118px; }
  .sudoku-layout { display: block; }
  .sudoku-controls { position: static; margin-top: 16px; }
  .sudoku-pad { gap: 4px; }
  .sudoku-pad button { flex-basis: 38px; width: 38px; height: 38px; min-width: 0; font-size: clamp(17px,5vw,23px); }
  .sudoku-tools { grid-template-columns: repeat(3, 1fr); }
  .sudoku-tools button { display: flex; flex-direction: column; justify-content: center; min-height: 58px; padding: 4px; text-align: center; }
  .sudoku-tools small { padding: 2px 0 0; font-size: 9px; }
  .race-panel { grid-template-columns: 70px 1fr 88px; gap: 7px; padding: 9px; }
  .racer { gap: 4px; }
  .racer-seal { width: 28px; height: 28px; font-size: 7px; }
  .racer strong { font-size: 8px; }
  .play-masthead { margin-bottom: 14px; }
  .play-title span { font-size: 18px; }
  .board-2048 { border-width: 3px; }
}

@media (max-width: 430px) {
  .game-stage-header { width: calc(100% - 14px); }
  .game-cover { min-height: 445px; padding: 25px; }
  .cover-edition { font-size: 8px; }
  .game-cover > p { font-size: 8px; }
  .mode-card { grid-template-columns: 38px 1fr 42px; padding: 18px 15px; }
  .mode-card strong { padding-left: 13px; font-size: 20px; }
  .mode-card small { padding-left: 13px; }
  .difficulty-pills { gap: 5px; }
  .difficulty-pills button { font-size: 11px; }
  .play-exit span { display: none; }
  .race-panel { grid-template-columns: 62px 1fr 72px; }
  .racer-seal { display: none; }
  .sudoku-board { border-width: 3px; }
  .sudoku-cell:nth-child(3n):not(:nth-child(9n)) { border-right-width: 3px; }
  .sudoku-cell:nth-child(n+19):nth-child(-n+27), .sudoku-cell:nth-child(n+46):nth-child(-n+54) { border-bottom-width: 3px; }
  .game-2048-scores { gap: 5px; }
  .game-score { padding: 9px 7px; }
  .game-score strong { font-size: 19px; }
}

@media (prefers-reduced-motion: reduce) {
  .game-stage *, .game-stage *::before, .game-stage *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}

/* Игры продолжают общий интерфейс Galaxica; отдельными остаются только игровые движения. */
.game-stage { font-family: inherit; background: radial-gradient(circle at 88% 4%, rgba(93,86,201,.12), transparent 25rem), radial-gradient(circle at 8% 28%, rgba(90,184,255,.13), transparent 29rem), linear-gradient(155deg, #fbfcff, #f4f6fb 52%, #f8f8fb); }
html[data-theme="dark"] .game-stage { background: radial-gradient(circle at 16% 7%, rgba(48,142,255,.2), transparent 28rem), radial-gradient(circle at 86% 14%, rgba(131,78,255,.18), transparent 31rem), linear-gradient(155deg, #080d1c, #060a16 54%, #0b1124); }
.game-stage::before { opacity: .35; background-image: linear-gradient(rgba(23,92,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(23,92,255,.035) 1px, transparent 1px); background-size: 48px 48px; mix-blend-mode: normal; mask-image: linear-gradient(to bottom, #000, transparent 78%); }
.game-stage, .game-stage button, .game-stage :is(h1, strong, .cover-lead, .play-title span, .game-stat strong, .game-score strong, .sudoku-cell, .sudoku-pad button, .tile-2048, .result-seal, .game-celebration strong) { font-family: inherit; }

.game-cover { border-color: rgba(255,255,255,.94); border-radius: 32px; color: var(--v3-ink); background: linear-gradient(145deg, rgba(255,255,255,.95), rgba(225,239,255,.82) 52%, rgba(232,226,255,.88)); box-shadow: 0 24px 60px rgba(40,55,104,.12), inset 0 1px 0 #fff; }
.game-cover-2048 { color: var(--v3-ink); background: linear-gradient(145deg, rgba(255,255,255,.96), rgba(224,244,255,.84) 46%, rgba(222,228,255,.92)); }
html[data-theme="dark"] .game-cover { border-color: var(--v3-line); background: linear-gradient(145deg, rgba(20,35,69,.96), rgba(28,31,72,.92)); box-shadow: var(--v3-shadow); }
.game-cover::before { inset: 12px; border-color: rgba(23,92,255,.14); border-radius: 24px; }
.game-cover::after { background: radial-gradient(circle at 74% 18%, rgba(90,184,255,.18), transparent 32%), radial-gradient(circle at 18% 82%, rgba(93,86,201,.13), transparent 34%); }
.cover-edition { border-color: rgba(23,92,255,.16); color: var(--v3-blue); }
.game-cover > p { color: var(--v3-blue); }
.game-cover .cover-lead { color: var(--v3-muted); }
.cover-sudoku-art { border-color: rgba(23,92,255,.55); border-radius: 24px; background-image: linear-gradient(to bottom, transparent 32.8%, rgba(23,92,255,.35) 33%, rgba(23,92,255,.35) 33.6%, transparent 33.8%, transparent 66.1%, rgba(23,92,255,.35) 66.3%, rgba(23,92,255,.35) 66.9%, transparent 67.1%), linear-gradient(to right, transparent 32.8%, rgba(23,92,255,.35) 33%, rgba(23,92,255,.35) 33.6%, transparent 33.8%, transparent 66.1%, rgba(23,92,255,.35) 66.3%, rgba(23,92,255,.35) 66.9%, transparent 67.1%); transform: rotate(-2deg); box-shadow: 0 22px 50px rgba(23,92,255,.15); }
.cover-sudoku-art span { color: var(--v3-ink); }
.cover-2048-art { transform: rotate(1deg); }
.cover-2048-art span { border-color: rgba(23,92,255,.16); border-radius: 18px; color: var(--v3-ink); background: rgba(255,255,255,.72); box-shadow: 0 14px 30px rgba(35,51,104,.12), inset 0 1px 0 #fff; }
.cover-2048-art span:nth-child(4) { color: #fff; background: linear-gradient(135deg, var(--v3-blue), var(--v3-violet)); }

.mode-card { border-color: var(--v3-line); border-radius: 24px; background: var(--v3-glass); box-shadow: var(--v3-shadow); }
.mode-card:hover { border-color: rgba(23,92,255,.28); box-shadow: 0 20px 52px rgba(35,51,104,.13), inset 0 1px 0 #fff; }
.mode-card.selected { border: 2px solid rgba(23,92,255,.72); box-shadow: 0 18px 48px rgba(23,92,255,.16), inset 0 1px 0 #fff; transform: translateY(-2px); }
.mode-index { border-color: var(--v3-line); color: var(--v3-blue); }
.mode-symbol, .mode-card-race .mode-symbol, .mode-card-daily .mode-symbol { color: var(--v3-violet); }
.mode-check { color: var(--v3-blue); }
.difficulty-desk { border-color: var(--v3-line); }
.difficulty-pills { padding: 4px; border-radius: 18px; background: var(--input-bg); }
.difficulty-pills button { min-height: 42px; border: 0; border-radius: 14px; }
.difficulty-pills button.selected { color: #fff; background: linear-gradient(135deg, var(--v3-blue), var(--v3-violet)); box-shadow: 0 8px 20px rgba(23,92,255,.22); }
.game-start { border: 0; border-radius: 18px; color: #fff; background: linear-gradient(135deg, var(--v3-blue), var(--v3-violet)); box-shadow: 0 14px 30px rgba(23,92,255,.26); font-family: inherit; }
.game-start b { color: #fff; }
.game-start:active { transform: scale(.985); box-shadow: 0 8px 18px rgba(23,92,255,.2); }

.play-masthead { border-color: var(--v3-line); }
.play-exit, .play-restart { color: var(--v3-blue); }
.play-restart { border-color: var(--v3-line); background: var(--v3-glass); box-shadow: var(--v3-shadow); }
.game-toolbar { overflow: hidden; border-color: var(--v3-line); border-radius: 22px; background: var(--v3-glass); box-shadow: var(--v3-shadow); }
.game-stat { border-color: var(--v3-line); }
.race-panel { border-color: rgba(23,92,255,.18); border-radius: 22px; background: var(--v3-glass); box-shadow: 0 16px 42px rgba(23,92,255,.12), inset 0 1px 0 #fff; }
.race-track { overflow: hidden; border-color: var(--v3-line); border-radius: 999px; background: var(--input-bg); }
#sudoku-you-bar { background: var(--gx-cyan); }
#sudoku-ai-bar { background: var(--v3-violet); }

.sudoku-board { border-color: color-mix(in srgb, var(--v3-ink) 78%, transparent); border-radius: 24px; background: var(--v3-glass); box-shadow: 0 22px 60px rgba(36,49,98,.14), inset 0 1px 0 #fff; }
.sudoku-cell { color: var(--v3-blue); background: color-mix(in srgb, var(--v3-glass) 96%, transparent); }
.sudoku-cell.peer { background: rgba(23,92,255,.055); }
.sudoku-cell.same { color: var(--v3-blue); background: rgba(90,184,255,.18); }
.sudoku-cell.selected { color: #fff; background: linear-gradient(145deg, #5ab8ff, var(--v3-blue), var(--v3-violet)); box-shadow: inset 0 0 0 3px rgba(255,255,255,.9), 0 8px 24px rgba(23,92,255,.28); }
.sudoku-pad button, .sudoku-tools button { border-color: var(--v3-line); border-radius: 14px; background: var(--v3-glass); box-shadow: var(--v3-shadow); }
.sudoku-pad button:active, .sudoku-tools button[aria-pressed="true"] { color: #fff; background: linear-gradient(135deg, var(--v3-blue), var(--v3-violet)); box-shadow: 0 8px 18px rgba(23,92,255,.2); }
.sudoku-tools button > span { color: var(--v3-blue); }

.game-score { border-color: var(--v3-line); border-radius: 20px; background: var(--v3-glass); box-shadow: var(--v3-shadow); }
.game-score-best { color: #fff; background: linear-gradient(135deg, var(--v3-blue), var(--v3-violet)); box-shadow: 0 12px 28px rgba(23,92,255,.24); }
.board-2048 { border: 0; border-radius: 28px; background: linear-gradient(145deg, rgba(23,92,255,.15), rgba(93,86,201,.22)); box-shadow: 0 24px 64px rgba(36,49,98,.17), inset 0 1px 0 rgba(255,255,255,.8); }
html[data-theme="dark"] .board-2048 { background: linear-gradient(145deg, rgba(49,109,255,.2), rgba(104,80,220,.24)); }
.board-2048-bg span { border: 1px solid rgba(255,255,255,.48); border-radius: 17px; background: rgba(255,255,255,.28); box-shadow: inset 0 1px 0 rgba(255,255,255,.45); }
.tile-2048 { border-color: rgba(255,255,255,.72); border-radius: 17px; box-shadow: 0 12px 28px rgba(35,46,91,.16), inset 0 1px 0 rgba(255,255,255,.75); }
.tile-2048::after { border-color: rgba(23,92,255,.09); border-radius: 12px; }
.tile-2048.value-2048 { box-shadow: 0 0 0 4px rgba(255,255,255,.85), 0 0 38px rgba(90,184,255,.56); }
.swipe-hint > span:first-child, .swipe-hint > span:last-child { color: var(--v3-blue); }

.game-celebration { border-color: var(--v3-line); border-radius: 28px; background: var(--v3-glass); box-shadow: 0 28px 80px rgba(23,92,255,.2), inset 0 1px 0 #fff; }
.result-seal { border-color: var(--v3-blue); color: var(--v3-blue); }
.game-celebration button { border: 0; border-radius: 14px; color: #fff; background: linear-gradient(135deg, var(--v3-blue), var(--v3-violet)); box-shadow: 0 10px 24px rgba(23,92,255,.24); }
.game-celebration .result-secondary { color: var(--v3-blue); background: transparent; box-shadow: none; }

@media (max-width: 760px) {
  .game-cover { min-height: 420px; border-radius: 28px; }
  .mode-card { border-radius: 22px; }
  .sudoku-board { border-radius: 20px; }
}

/* Карточка перед запуском игры — одна цельная поверхность без серого подвала. */
.card-sheet.card-sheet-game { width: min(440px, calc(100% - 24px)); overflow: hidden; border-radius: 32px; background: linear-gradient(165deg, rgba(255,255,255,.98), rgba(244,248,255,.98)); box-shadow: 0 32px 100px rgba(18,32,78,.3), inset 0 1px 0 #fff; }
html[data-theme="dark"] .card-sheet.card-sheet-game { background: linear-gradient(165deg, rgba(22,32,61,.98), rgba(10,17,35,.98)); }
.card-sheet-game .card-sheet-cover { height: 190px; margin: 12px 12px 0; overflow: hidden; border: 1px solid rgba(255,255,255,.9); border-radius: 24px !important; background: linear-gradient(145deg, rgba(236,246,255,.96), rgba(241,236,255,.94)) !important; box-shadow: inset 0 1px 0 #fff, 0 14px 34px rgba(35,56,110,.1); }
.card-sheet-game .card-sheet-cover svg { width: 100%; height: 100%; transform: scale(1.14); animation: gameSheetArtIn .55s var(--ease) both; }
.card-sheet-game .card-sheet-close { top: 22px; right: 22px; width: 34px; height: 34px; border-color: rgba(23,92,255,.1); color: var(--v3-muted); background: rgba(255,255,255,.88); box-shadow: 0 8px 22px rgba(35,49,98,.12); }
.card-sheet-game .card-sheet-body { padding: 18px 22px 22px; background: transparent; }
.card-sheet-game .card-sheet-kicker { margin-bottom: 5px; color: var(--v3-muted); font-size: 10px; letter-spacing: .12em; }
.card-sheet-game .card-sheet-name { margin-bottom: 7px; color: var(--v3-ink); font-size: 30px; font-weight: 800; letter-spacing: -.035em; }
.card-sheet-game .card-sheet-meta { display: inline-flex; width: fit-content; margin-bottom: 12px; padding: 5px 10px; border-radius: 999px; color: var(--v3-blue); background: rgba(23,92,255,.08); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; }
.card-sheet-game .card-sheet-desc { margin-bottom: 18px; color: var(--v3-muted); font-size: 14px; line-height: 1.5; }
.card-sheet-game .card-sheet-actions { gap: 8px; }
.card-sheet-game .card-sheet-cta { min-height: 52px; border: 0; border-radius: 16px; color: #fff; background: var(--accent-cta); box-shadow: none; font-size: 16px; font-weight: 800; }
.card-sheet-game .card-sheet-cta:hover { background: #0077ed; }
.card-sheet-game .card-sheet-cta:active { transform: scale(.985); }
@keyframes gameSheetArtIn { from { opacity: 0; transform: scale(.96) translateY(8px); } to { opacity: 1; transform: scale(1.14); } }