/* LILA_LOCAL_FONTS_V2_20260715 */
@import url("/css/lila-fonts.css?v=20260715-2");

/* === Lila game v2 scene: field, event cards, 3D dice === */

.game-page {
  min-height: 100vh;
  background:
    radial-gradient(circle at 18% 0%, rgba(255,255,255,.72), transparent 32rem),
    linear-gradient(180deg, #eee9e1 0%, #ece7df 100%);
}

.game-page .site-header .header-actions {
  visibility: hidden;
  pointer-events: none;
}

.game-page .site-header .desktop-nav {
  margin-left: auto;
}

.game-shell {
  position: relative;
  overflow: hidden;
}

.game-stage {
  position: relative;
  min-height: calc(100vh - var(--header-h, 92px));
  padding: 22px 0 42px;
  overflow: hidden;
}

.game-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .44;
  background: url("../assets/images/game-bg.webp") center top / cover no-repeat;
  filter: saturate(.94) contrast(.98);
  z-index: 0;
}

.game-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(238,233,225,.94) 0%, rgba(238,233,225,.76) 48%, rgba(238,233,225,.42) 100%),
    linear-gradient(180deg, rgba(238,233,225,.20), rgba(238,233,225,.78) 100%);
}

.game-layout {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(560px, min(52vw, 820px)) minmax(430px, 1fr);
  gap: clamp(20px, 2.2vw, 40px);
  align-items: stretch;
}

.game-eyebrow {
  margin: 0 0 7px;
  color: rgba(49, 45, 39, .62);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.game-board-card,
.side-card,
.history-drawer-panel,
.game-event-card {
  border: 1px solid rgba(36, 36, 36, .16);
  border-radius: 18px;
  background: rgba(246, 241, 233, .70);
  box-shadow: 0 22px 70px rgba(55, 46, 38, .085);
  backdrop-filter: blur(13px);
}

.game-board-card {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  min-width: 0;
  padding: clamp(12px, 1vw, 18px);
}

.game-board-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 18px;
  margin-bottom: 7px;
}

.game-board-head h1 {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
}

.game-question-inline {
  margin: 0 0 8px;
  padding: 7px 12px;
  border: 0;
  border-radius: 0;
  border-top: 1px solid rgba(36,36,36,.14);
  border-bottom: 1px solid rgba(36,36,36,.14);
  background: rgba(255,255,255,.16);
  box-shadow: none;
  backdrop-filter: none;
}

.game-question-inline .game-eyebrow { margin-bottom: 4px; }
.game-question-inline p:not(.game-eyebrow) {
  margin: 0;
  color: rgba(49,45,39,.84);
  font-size: 12px;
  line-height: 1.32;
}

.board-wrap {
  position: relative;
  align-self: center;
  justify-self: center;
  width: 100%;
  max-width: 820px;
  aspect-ratio: 9 / 8;
  overflow: hidden;
  border: 1px solid rgba(36, 36, 36, .30);
  border-radius: 17px;
  background: rgba(239, 234, 226, .46);
}

.board-wrap::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: 1;
  pointer-events: none;
  border-radius: inherit;
  background:
    radial-gradient(circle at var(--token-x, 50%) var(--token-y, 50%), rgba(248, 218, 162, .20), transparent 13%),
    linear-gradient(135deg, rgba(255,255,255,.12), transparent 42%);
}

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

.board-art {
  z-index: 1;
  pointer-events: none;
  overflow: visible;
}

.board-art-item {
  position: absolute;
  display: block;
  max-width: none;
  user-select: none;
  pointer-events: none;
  mix-blend-mode: multiply;
  opacity: .64;
  filter: saturate(.92) contrast(.96);
  transition: opacity 360ms ease, filter 360ms ease, transform 360ms ease;
}

.board-art-item.arrow { opacity: .68; }
.board-art-item.snake { opacity: .62; }
.board-art-item.is-active {
  opacity: .98;
  filter: saturate(1.2) contrast(1.05) drop-shadow(0 0 9px rgba(210, 160, 88, .35));
  transform: scale(1.006);
}

.arrow-17-69 { left: 16.787%; top: 8.410%; width: 19.420%; height: 72.825%; }
.arrow-54-68 { left: 6.230%; top: -1.717%; width: 42.078%; height: 43.413%; }
.arrow-28-50 { left: 52.297%; top: 18.369%; width: 40.545%; height: 51.647%; }
.arrow-27-41-line { left: 53.073%; top: 40.716%; width: 39.570%; height: 30.087%; }
.arrow-27-41-head { left: 52.420%; top: 39.780%; width: 2.463%; height: 3.112%; }
.arrow-10-23-line { left: 52.340%; top: 66.405%; width: 40.494%; height: 16.060%; }
.arrow-10-23-head { left: 51.982%; top: 65.385%; width: 2.015%; height: 2.811%; }
.arrow-45-67 { left: 61.849%; top: -3.164%; width: 32.053%; height: 54.108%; }
.arrow-46-62 { left: 82.316%; top: 17.424%; width: 9.528%; height: 17.070%; }
.arrow-20-32 { left: 16.323%; top: 45.812%; width: 32.200%; height: 33.497%; }
.arrow-22-60 { left: 38.945%; top: 18.818%; width: 22.170%; height: 52.286%; }
.arrow-37-66 { left: 7.158%; top: -6.843%; width: 65.060%; height: 66.094%; }
.snake-72-51 { left: 5.685%; top: 6.169%; width: 35.615%; height: 25.519%; }
.snake-55-3 { left: 5.501%; top: 16.978%; width: 98.805%; height: 80.685%; }
.snake-29-6 { left: 58.330%; top: 55.221%; width: 28.075%; height: 40.466%; }
.snake-61-13 { left: 39.468%; top: 17.367%; width: 57.170%; height: 66.837%; }
.snake-44-9 { left: 65.514%; top: 43.352%; width: 49.118%; height: 51.611%; }
.snake-24-7 { left: 53.431%; top: 71.937%; width: 23.131%; height: 21.893%; }
.snake-12-8 { left: 73.712%; top: 82.034%; width: 8.157%; height: 14.093%; }
.snake-16-4 { left: 25.031%; top: 79.648%; width: 18.792%; height: 18.226%; }
.snake-63-2 { left: -5.262%; top: 21.208%; width: 48.307%; height: 73.468%; }
.snake-52-35 { left: 11.532%; top: 31.697%; width: 16.543%; height: 23.879%; }

.board-grid {
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  grid-template-rows: repeat(8, 1fr);
}

.board-cell {
  appearance: none;
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  min-width: 0;
  padding: clamp(6px, .62vw, 10px);
  border: 0;
  border-right: 1px solid rgba(36,36,36,.31);
  border-bottom: 1px solid rgba(36,36,36,.31);
  background: transparent;
  color: rgba(20,20,20,.88);
  font-family: var(--font-title);
  font-size: clamp(16px, 1.04vw, 23px);
  line-height: 1;
  text-align: left;
  cursor: pointer;
  transition: background 280ms var(--ease-out), box-shadow 280ms var(--ease-out), color 280ms var(--ease-out);
}

.board-cell:nth-child(9n) { border-right: 0; }
.board-cell:nth-last-child(-n + 9) { border-bottom: 0; }

.board-cell[data-transition="arrow"]::after,
.board-cell[data-transition="snake"]::after {
  content: "";
  position: absolute;
  right: 7px;
  bottom: 7px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  opacity: .52;
}
.board-cell[data-transition="arrow"]::after { background: rgba(101,132,104,.82); }
.board-cell[data-transition="snake"]::after { background: rgba(190,122,138,.76); }

.board-cell.is-current {
  z-index: 4;
  background: rgba(255,255,255,.34);
  box-shadow: inset 0 0 0 2px rgba(15,15,15,.58), 0 0 0 6px rgba(244,218,178,.16);
  animation: currentCellGlow 1800ms ease-in-out infinite;
}

.board-cell.is-visited:not(.is-current) { background: rgba(255,255,255,.06); }
.board-cell.is-landed { background: rgba(255, 242, 208, .28); }

@keyframes currentCellGlow {
  0%, 100% { box-shadow: inset 0 0 0 2px rgba(15,15,15,.54), 0 0 0 4px rgba(244,218,178,.13); }
  50% { box-shadow: inset 0 0 0 2px rgba(15,15,15,.72), 0 0 0 9px rgba(244,218,178,.22); }
}

.player-token {
  position: absolute;
  left: 0;
  top: 0;
  width: clamp(22px, 1.78vw, 30px);
  height: clamp(22px, 1.78vw, 30px);
  z-index: 7;
  pointer-events: none;
  transform: translate(-999px, -999px);
  transition: transform 760ms cubic-bezier(.2,.82,.16,1);
}

.player-token::after {
  content: "";
  position: absolute;
  inset: -12px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(231,190,126,.30), transparent 64%);
  opacity: .58;
  animation: tokenAura 1900ms ease-in-out infinite;
}

.player-token span {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  border: 1px solid rgba(36, 36, 36, .24);
  border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, rgba(255,255,255,.98), rgba(235,226,211,.84) 43%, rgba(151,135,114,.78) 100%);
  box-shadow: 0 9px 22px rgba(36,32,28,.20), 0 0 26px rgba(244,218,178,.42);
}

.player-token.is-pulse span { animation: tokenPulse 820ms var(--ease-out); }

@keyframes tokenAura { 0%, 100% { transform: scale(.88); opacity: .38; } 50% { transform: scale(1.12); opacity: .70; } }
@keyframes tokenPulse { 0%, 100% { transform: scale(1); } 45% { transform: scale(1.16); } }

.board-spark {
  position: absolute;
  z-index: 8;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  pointer-events: none;
  background: rgba(214,171,103,.58);
  box-shadow: 0 0 18px rgba(214,171,103,.48);
  animation: boardSpark 960ms ease-out forwards;
}
@keyframes boardSpark {
  0% { transform: translate(-50%, -50%) scale(.25); opacity: 0; }
  18% { opacity: 1; }
  100% { transform: translate(calc(-50% + var(--dx, 0px)), calc(-50% + var(--dy, -18px))) scale(1.6); opacity: 0; }
}

.board-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 22px;
  margin-top: 8px;
  color: rgba(49,45,39,.72);
  font-size: 10px;
  line-height: 1.35;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.board-footer p { margin: 0; min-width: 0; }
.path-line { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.game-history-link,
.details-button,
.game-event-close,
.history-drawer-close {
  appearance: none;
  border: 0;
  background: transparent;
  color: rgba(24,24,25,.72);
  cursor: pointer;
}

.game-history-link,
.details-button {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  white-space: nowrap;
}

.game-sidebar {
  display: grid;
  grid-template-rows: minmax(160px, .88fr) minmax(150px, .78fr) auto auto;
  gap: clamp(8px, 1vh, 12px);
  min-width: 0;
  min-height: 0;
}

.side-card {
  min-width: 0;
  padding: clamp(13px, 1.12vw, 18px);
  background: rgba(255,255,255,.32);
}

.card-title-row,
.ornament-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.side-card h2,
.history-drawer-panel h2,
.game-event-card h2 {
  margin: 0;
  font-family: var(--font-title);
  font-weight: 400;
  color: var(--text);
  line-height: 1.04;
  letter-spacing: .17em;
  text-transform: uppercase;
}

.side-card h2 { font-size: clamp(25px, 1.7vw, 34px); }
.side-card p,
.cell-full {
  margin: 9px 0 0;
  color: #393631;
  font-size: 13.5px;
  line-height: 1.42;
}
.cell-subtitle { color: rgba(49,45,39,.68) !important; font-size: 12.5px !important; }
.cell-full {
  padding-top: 10px;
  border-top: 1px solid rgba(36,36,36,.12);
}
.cell-card.is-expanded { overflow: auto; }
.guide-card { overflow: auto; }

.action-card textarea {
  display: none;
  width: 100%;
  min-height: 92px;
  margin: 10px 0 10px;
  padding: 13px 14px;
  border: 1px solid rgba(36,36,36,.20);
  border-radius: 10px;
  background: rgba(255,255,255,.35);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  line-height: 1.42;
  resize: vertical;
  outline: none;
}

[data-phase="waiting_answer"] .action-card textarea { display: block; }
.answer-status { min-height: 38px; }
.answer-note { color: rgba(49,45,39,.62) !important; font-size: 11.5px !important; }
.answer-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 10px;
}
.answer-actions .save-answer {
  min-width: 210px;
  min-height: 44px;
  font-size: 11px;
  letter-spacing: .12em;
}

.dice-stage {
  width: 76px;
  height: 76px;
  flex: 0 0 auto;
  perspective: 720px;
  display: grid;
  place-items: center;
  filter: drop-shadow(0 15px 18px rgba(70,45,25,.18));
}

.dice-3d {
  position: relative;
  width: 58px;
  height: 58px;
  transform-style: preserve-3d;
  transform: rotateX(-18deg) rotateY(18deg);
  transition: transform 780ms cubic-bezier(.18,.82,.22,1);
}

.dice-stage.is-rolling .dice-3d {
  animation: dice3dRoll 1180ms cubic-bezier(.18,.82,.22,1) infinite;
}

@keyframes dice3dRoll {
  0% { transform: translateY(0) rotateX(18deg) rotateY(20deg) rotateZ(0); }
  28% { transform: translateY(-12px) rotateX(218deg) rotateY(126deg) rotateZ(34deg); }
  62% { transform: translateY(4px) rotateX(392deg) rotateY(258deg) rotateZ(-18deg); }
  100% { transform: translateY(0) rotateX(738deg) rotateY(380deg) rotateZ(0); }
}

.dice-stage[data-value="1"] .dice-3d { transform: rotateX(0deg) rotateY(0deg) rotateZ(-5deg); }
.dice-stage[data-value="2"] .dice-3d { transform: rotateX(0deg) rotateY(-90deg) rotateZ(4deg); }
.dice-stage[data-value="3"] .dice-3d { transform: rotateX(-90deg) rotateY(0deg) rotateZ(-4deg); }
.dice-stage[data-value="4"] .dice-3d { transform: rotateX(90deg) rotateY(0deg) rotateZ(5deg); }
.dice-stage[data-value="5"] .dice-3d { transform: rotateX(0deg) rotateY(90deg) rotateZ(-4deg); }
.dice-stage[data-value="6"] .dice-3d { transform: rotateX(0deg) rotateY(180deg) rotateZ(4deg); }

.dice-face {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(80,54,32,.18);
  border-radius: 12px;
  background:
    radial-gradient(circle at 26% 20%, rgba(255,255,255,.98), rgba(255,255,255,.36) 26%, transparent 45%),
    linear-gradient(145deg, rgba(246,221,181,.98), rgba(225,176,124,.96));
  box-shadow: inset 0 0 18px rgba(255,255,255,.30), inset -10px -12px 20px rgba(108,68,34,.12);
  backface-visibility: hidden;
}
.dice-face-1 { transform: translateZ(29px); }
.dice-face-2 { transform: rotateY(90deg) translateZ(29px); }
.dice-face-3 { transform: rotateX(90deg) translateZ(29px); }
.dice-face-4 { transform: rotateX(-90deg) translateZ(29px); }
.dice-face-5 { transform: rotateY(-90deg) translateZ(29px); }
.dice-face-6 { transform: rotateY(180deg) translateZ(29px); }

.dot {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(78, 52, 35, .82);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.18), 0 0 4px rgba(255,255,255,.18);
}
.dot.tl { left: 13px; top: 13px; }
.dot.tr { right: 13px; top: 13px; }
.dot.ml { left: 13px; top: 25px; }
.dot.mr { right: 13px; top: 25px; }
.dot.bl { left: 13px; bottom: 13px; }
.dot.br { right: 13px; bottom: 13px; }
.dot.c { left: 25px; top: 25px; }

.save-path-card {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
  padding-block: 10px !important;
  background: rgba(246,241,233,.58);
}
.save-path-card[hidden] { display: none !important; }
.save-path-card h2 { font-size: clamp(19px, 1.2vw, 25px); }
.save-path-card p:not(.game-eyebrow) { margin-top: 4px; font-size: 11px; line-height: 1.3; }
.save-path-card .btn { min-height: 34px; padding-inline: 16px; font-size: 10px; }

.history-drawer,
.game-event {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 22px;
}
.history-drawer[hidden], .game-event[hidden] { display: none !important; }
.history-drawer-backdrop,
.game-event-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(35,32,28,.34);
  backdrop-filter: blur(8px);
}
.history-drawer-panel {
  position: relative;
  width: min(720px, 100%);
  max-height: min(78vh, 660px);
  overflow: auto;
  padding: 26px 30px 30px;
}
.history-drawer-panel h2 { font-size: clamp(30px, 2.3vw, 44px); }
.history-drawer-close,
.game-event-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(36,36,36,.16);
  border-radius: 50%;
  background: rgba(246,241,233,.72);
  font-size: 23px;
  line-height: 1;
}
.history-list { display: grid; gap: 0; margin-top: 16px; }
.history-item { display: grid; grid-template-columns: 88px 1fr; gap: 14px; padding: 13px 0; border-top: 1px solid rgba(36,36,36,.12); }
.history-number { color: rgba(49,45,39,.58); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.history-copy strong { display: block; color: var(--text); font-size: 13px; }
.history-copy p { margin: 4px 0 0; color: rgba(49,45,39,.75); font-size: 12px; line-height: 1.4; }
.empty-history { margin: 0; color: rgba(49,45,39,.66); }

.game-event-card {
  position: relative;
  width: min(540px, 100%);
  padding: 25px 28px 27px;
  background:
    radial-gradient(circle at 86% 16%, rgba(236,180,140,.19), transparent 13rem),
    rgba(246,241,233,.95);
  animation: eventCardIn 420ms cubic-bezier(.2,.8,.2,1) both;
}
.game-event-card h2 { max-width: 92%; font-size: clamp(30px, 2.4vw, 44px); }
.game-event-card p[data-event-text] { margin: 13px 0 0; color: #393631; font-size: 15px; line-height: 1.5; }
.game-event-details {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(36,36,36,.12);
  color: rgba(49,45,39,.78);
  font-size: 13px;
  line-height: 1.45;
}
.game-event-action { width: 100%; min-height: 44px; margin-top: 20px; }
@keyframes eventCardIn { from { transform: translateY(12px) scale(.98); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } }

@media (min-width: 1061px) {
  :root { --game-footer-h: 74px; }
  body.game-page { height: 100vh; overflow: hidden; }
  .game-page .site-footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 20;
    height: var(--game-footer-h);
    min-height: 0;
    border-top: 1px solid rgba(36,36,36,.12);
    background: rgba(238,233,225,.86);
    backdrop-filter: blur(14px);
  }
  .game-page .site-footer .footer-inner { min-height: var(--game-footer-h); padding-block: 8px; }
  .game-page .site-footer .footer-brand { transform: scale(.84); transform-origin: left center; }
  .game-page .site-footer .footer-links { transform: scale(.88); transform-origin: right center; }
  .game-page .site-footer .telegram { width: 32px; height: 32px; }
  .game-shell { height: calc(100vh - var(--header-h, 92px) - var(--game-footer-h)); overflow: hidden; }
  .game-stage { height: 100%; min-height: 0; padding: clamp(8px, 1.1vh, 14px) 0; }
  .game-stage > .container { width: min(100% - 54px, 1500px); height: 100%; }
  .game-layout { height: 100%; }
  .game-board-card { height: 100%; min-height: 0; }
  .board-wrap { height: auto; max-height: calc(100vh - var(--header-h, 92px) - var(--game-footer-h) - 94px); width: min(100%, calc((100vh - var(--header-h, 92px) - var(--game-footer-h) - 94px) * 1.125)); }
  .game-sidebar { height: 100%; overflow: hidden; }
  .cell-card { min-height: 0; overflow: auto; }
  .guide-card { min-height: 0; }
  .action-card { align-self: end; }
}

@media (min-width: 1560px) and (min-height: 900px) {
  .game-layout { grid-template-columns: minmax(700px, 820px) minmax(520px, 620px); }
}

@media (min-width: 1061px) and (max-height: 820px) {
  :root { --game-footer-h: 62px; }
  .game-stage > .container { width: min(100% - 40px, 1400px); }
  .game-layout { grid-template-columns: minmax(500px, min(47vw, 720px)) minmax(400px, 1fr); gap: 18px; }
  .side-card { padding: 10px 14px; }
  .side-card h2 { font-size: clamp(21px, 1.42vw, 27px); }
  .side-card p, .cell-full, .action-card textarea { font-size: 11.5px; line-height: 1.32; }
  .game-question-inline p:not(.game-eyebrow) { max-height: 24px; overflow: hidden; font-size: 10.5px; }
  .board-wrap { max-height: calc(100vh - var(--header-h, 92px) - var(--game-footer-h) - 86px); width: min(100%, calc((100vh - var(--header-h, 92px) - var(--game-footer-h) - 86px) * 1.125)); }
  .dice-stage { width: 64px; height: 64px; }
  .dice-3d { width: 50px; height: 50px; }
  .dice-face-1 { transform: translateZ(25px); }
  .dice-face-2 { transform: rotateY(90deg) translateZ(25px); }
  .dice-face-3 { transform: rotateX(90deg) translateZ(25px); }
  .dice-face-4 { transform: rotateX(-90deg) translateZ(25px); }
  .dice-face-5 { transform: rotateY(-90deg) translateZ(25px); }
  .dice-face-6 { transform: rotateY(180deg) translateZ(25px); }
  .dot.tl { left: 11px; top: 11px; } .dot.tr { right: 11px; top: 11px; } .dot.ml { left: 11px; top: 21px; } .dot.mr { right: 11px; top: 21px; } .dot.bl { left: 11px; bottom: 11px; } .dot.br { right: 11px; bottom: 11px; } .dot.c { left: 21px; top: 21px; }
}

@media (max-width: 1060px) {
  body.game-page { height: auto; overflow-x: hidden; }
  .game-shell, .game-stage { height: auto; min-height: 0; overflow: visible; }
  .game-layout { grid-template-columns: 1fr; gap: 14px; }
  .game-sidebar { grid-template-rows: none; }
  .game-page .site-header .header-actions { visibility: visible; pointer-events: auto; }
}

@media (max-width: 680px) {
  .game-stage { padding: 12px 0 26px; }
  .game-stage > .container { width: min(100% - 20px, 420px); }
  .game-board-card { padding: 10px; border-radius: 14px; }
  .game-question-inline { padding: 7px 9px; margin-bottom: 8px; }
  .game-question-inline p:not(.game-eyebrow) { max-height: 35px; overflow: hidden; font-size: 10px; line-height: 1.22; }
  .board-wrap { width: 100%; max-width: none; border-radius: 12px; }
  .board-cell { font-size: clamp(10px, 3.15vw, 13px); padding: 4px; }
  .board-cell[data-transition="arrow"]::after,
  .board-cell[data-transition="snake"]::after { right: 4px; bottom: 4px; width: 3px; height: 3px; }
  .player-token { width: clamp(16px, 5.4vw, 22px); height: clamp(16px, 5.4vw, 22px); }
  .player-token::after { inset: -7px; }
  .board-footer { gap: 10px; margin-top: 7px; font-size: 8.5px; line-height: 1.25; }
  .side-card { padding: 13px; border-radius: 14px; }
  .side-card h2 { font-size: clamp(22px, 7vw, 29px); letter-spacing: .145em; }
  .side-card p, .cell-full { font-size: 12.5px; }
  .answer-actions { display: grid; grid-template-columns: 1fr auto; gap: 12px; }
  .answer-actions .save-answer { min-width: 0; width: 100%; min-height: 44px; }
  .dice-stage { width: 62px; height: 62px; }
  .dice-3d { width: 46px; height: 46px; }
  .dice-face { border-radius: 10px; }
  .dice-face-1 { transform: translateZ(23px); }
  .dice-face-2 { transform: rotateY(90deg) translateZ(23px); }
  .dice-face-3 { transform: rotateX(90deg) translateZ(23px); }
  .dice-face-4 { transform: rotateX(-90deg) translateZ(23px); }
  .dice-face-5 { transform: rotateY(-90deg) translateZ(23px); }
  .dice-face-6 { transform: rotateY(180deg) translateZ(23px); }
  .dot { width: 6px; height: 6px; }
  .dot.tl { left: 10px; top: 10px; } .dot.tr { right: 10px; top: 10px; } .dot.ml { left: 10px; top: 20px; } .dot.mr { right: 10px; top: 20px; } .dot.bl { left: 10px; bottom: 10px; } .dot.br { right: 10px; bottom: 10px; } .dot.c { left: 20px; top: 20px; }
  .save-path-card { grid-template-columns: 1fr; align-items: stretch; }
  .history-drawer, .game-event { padding: 14px; }
  .history-drawer-panel, .game-event-card { border-radius: 15px; padding: 22px 18px; }
  .history-item { grid-template-columns: 1fr; gap: 5px; }
}

/* === fix18: cleaner page flow, no inner card scrollbars, calmer typography, stable dice === */

.game-page,
.game-page * {
  scrollbar-width: auto;
}

.game-eyebrow,
.game-history-link,
.details-button,
.history-number,
.answer-actions .save-answer,
.game-event-action {
  font-family: var(--font-body, Arial, sans-serif);
}

.side-card,
.cell-card,
.guide-card,
.action-card {
  overflow: visible !important;
}

.side-card h2,
.history-drawer-panel h2,
.game-event-card h2 {
  letter-spacing: .145em;
}

.side-card h2 {
  font-size: clamp(21px, 1.38vw, 30px) !important;
  line-height: 1.08;
}

.cell-card h2 {
  font-size: clamp(24px, 1.55vw, 32px) !important;
}

.guide-card h2,
.action-card h2 {
  font-size: clamp(22px, 1.42vw, 30px) !important;
}

.side-card p,
.cell-full {
  font-size: 13px;
  line-height: 1.46;
}

.guide-card {
  border-color: rgba(114, 99, 76, .24);
  background:
    radial-gradient(circle at 88% 18%, rgba(244, 218, 178, .18), transparent 14rem),
    rgba(255, 255, 255, .38);
}

.guide-card .game-eyebrow,
.action-card .game-eyebrow {
  color: rgba(35, 31, 27, .84);
}

.action-card {
  border-color: rgba(36, 36, 36, .22);
  background:
    radial-gradient(circle at 86% 78%, rgba(236, 177, 117, .12), transparent 12rem),
    rgba(255, 255, 255, .45);
  box-shadow: 0 18px 50px rgba(55, 46, 38, .09);
}

.action-card.is-answer-required {
  box-shadow:
    0 18px 58px rgba(55, 46, 38, .105),
    inset 0 0 0 1px rgba(36,36,36,.04);
}

.action-card textarea {
  min-height: 84px;
  background: rgba(255,255,255,.48);
}

.card-title-row.ornament-row {
  margin-bottom: 6px;
}

.board-wrap.is-moving .player-token span {
  box-shadow: 0 12px 28px rgba(36,32,28,.25), 0 0 34px rgba(226,177,103,.62);
}

.board-wrap.is-moving .board-cell.is-current {
  animation: currentCellGlow 1100ms ease-in-out infinite;
}

.board-cell.is-landed::before {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 9px;
  border: 1px solid rgba(214, 171, 103, .28);
  pointer-events: none;
  animation: cellArrivalRing 850ms ease-out forwards;
}

@keyframes cellArrivalRing {
  0% { transform: scale(.86); opacity: 0; }
  24% { opacity: 1; }
  100% { transform: scale(1.08); opacity: 0; }
}

.board-art-item.is-active {
  opacity: 1 !important;
  filter: saturate(1.24) contrast(1.04) drop-shadow(0 0 14px rgba(210, 160, 88, .42));
}

/* Resting dice: show one clean face only, no side strips/artifacts. Rolling keeps 3D cube. */
.dice-stage:not(.is-rolling) .dice-3d {
  width: 56px !important;
  height: 56px !important;
  transform: translateZ(0) rotate(-2deg) !important;
  transform-style: flat !important;
  transition: transform 260ms ease, filter 260ms ease;
}

.dice-stage:not(.is-rolling) .dice-face {
  display: none !important;
  transform: none !important;
  border: 0 !important;
  border-radius: 13px;
  backface-visibility: visible;
  box-shadow:
    inset 0 0 18px rgba(255,255,255,.35),
    inset -12px -14px 20px rgba(108,68,34,.13),
    0 13px 24px rgba(70,45,25,.20);
}
.dice-stage:not(.is-rolling)[data-value="1"] .dice-face-1,
.dice-stage:not(.is-rolling)[data-value="2"] .dice-face-2,
.dice-stage:not(.is-rolling)[data-value="3"] .dice-face-3,
.dice-stage:not(.is-rolling)[data-value="4"] .dice-face-4,
.dice-stage:not(.is-rolling)[data-value="5"] .dice-face-5,
.dice-stage:not(.is-rolling)[data-value="6"] .dice-face-6 {
  display: block !important;
}

.dice-stage:not(.is-rolling):hover .dice-3d {
  transform: translateY(-1px) rotate(1deg) !important;
}

.dice-stage.is-rolling .dice-face {
  display: block !important;
  box-sizing: border-box;
  border: 0 !important;
  outline: 1px solid rgba(80,54,32,.10);
}

.dice-stage.is-rolling .dice-3d {
  transform-style: preserve-3d !important;
}

/* Return normal page scroll on desktop. The scene stays compact, but the page is no longer locked. */
@media (min-width: 1061px) {
  body.game-page {
    height: auto !important;
    min-height: 100vh;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  .game-page .site-footer {
    position: static !important;
    height: auto !important;
    min-height: var(--footer-h, 112px) !important;
    border-top: 1px solid rgba(36,36,36,.12);
    background: rgba(238,233,225,.82);
    backdrop-filter: blur(14px);
  }

  .game-page .site-footer .footer-inner {
    min-height: var(--footer-h, 112px) !important;
    padding-block: 14px !important;
  }

  .game-shell,
  .game-stage {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  .game-stage {
    padding: 22px 0 28px !important;
  }

  .game-stage > .container {
    width: min(100% - 64px, 1480px) !important;
    height: auto !important;
  }

  .game-layout {
    height: auto !important;
    grid-template-columns: minmax(560px, 760px) minmax(430px, 560px) !important;
    justify-content: center;
    align-items: start !important;
    gap: clamp(20px, 2vw, 34px);
  }

  .game-board-card {
    height: auto !important;
    min-height: 0 !important;
  }

  .board-wrap {
    width: min(100%, 720px) !important;
    max-width: 720px !important;
    max-height: none !important;
  }

  .game-sidebar {
    display: grid;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    grid-template-rows: auto auto auto auto !important;
    align-self: start !important;
    gap: 12px;
  }

  .cell-card,
  .guide-card,
  .action-card {
    min-height: 0 !important;
    max-height: none !important;
  }

  .action-card {
    align-self: auto !important;
  }
}

@media (min-width: 1061px) and (max-height: 820px) {
  .game-stage > .container { width: min(100% - 44px, 1380px) !important; }
  .game-layout { grid-template-columns: minmax(520px, 690px) minmax(400px, 520px) !important; gap: 16px; }
  .board-wrap { width: min(100%, 650px) !important; max-width: 650px !important; }
  .side-card { padding: 11px 14px; }
  .side-card h2 { font-size: clamp(20px, 1.28vw, 26px) !important; }
  .cell-card h2 { font-size: clamp(22px, 1.42vw, 29px) !important; }
  .side-card p, .cell-full { font-size: 11.8px; line-height: 1.36; }
}

@media (max-width: 680px) {
  .side-card h2 { font-size: clamp(20px, 6.1vw, 27px) !important; letter-spacing: .13em; }
  .cell-card h2 { font-size: clamp(22px, 6.5vw, 29px) !important; }
  .guide-card h2,
  .action-card h2 { font-size: clamp(21px, 6.1vw, 27px) !important; }
  .dice-stage:not(.is-rolling) .dice-3d { width: 46px !important; height: 46px !important; }
  .dice-stage:not(.is-rolling) .dice-face { border-radius: 11px; }
}

.guide-card,
.action-card { position: relative; }
.guide-card::before,
.action-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 18px;
  bottom: 18px;
  width: 2px;
  border-radius: 999px;
  background: rgba(42, 38, 32, .20);
}
.action-card::before { background: rgba(42, 38, 32, .32); }

/* === fix19 scene polish: stable right rail, header save action, no inner scrolls === */
.game-page .site-header .desktop-nav {
  display: grid !important;
  grid-template-columns: 142px 172px 142px;
  align-items: stretch;
  margin-left: auto;
}

.game-page .site-header .desktop-nav a,
.game-page .site-header .desktop-nav button {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--header-h, 72px);
  padding: 0 18px;
  border: 0;
  border-left: 1px solid rgba(36,36,36,.16);
  background: transparent;
  color: var(--text, #171717);
  font: inherit;
  font-size: 12px;
  line-height: 1;
  letter-spacing: .02em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
}

.game-page .site-header .desktop-nav a::after,
.game-page .site-header .desktop-nav button::after {
  content: "→";
  margin-left: 10px;
  opacity: .65;
}

.game-page .site-header .desktop-nav [hidden] { display: none !important; }
.game-page .site-header .desktop-nav:has([data-game-save][hidden]) {
  grid-template-columns: 142px 142px;
}

.game-header-save {
  white-space: nowrap;
}

.save-path-card { display: none !important; }

@media (min-width: 1061px) {
  .game-stage > .container {
    width: min(100% - 72px, 1440px) !important;
  }

  .game-layout {
    grid-template-columns: minmax(600px, 720px) minmax(450px, 520px) !important;
    gap: clamp(22px, 2.4vw, 38px) !important;
    align-items: start !important;
  }

  .board-wrap {
    width: min(100%, 690px) !important;
    max-width: 690px !important;
  }

  .game-sidebar {
    display: grid !important;
    grid-template-rows: auto auto auto !important;
    gap: 14px !important;
    align-content: start;
    overflow: visible !important;
  }

  .cell-card {
    min-height: 128px !important;
  }

  .guide-card {
    min-height: 162px !important;
  }

  .action-card {
    min-height: 244px !important;
  }
}

.cell-card,
.guide-card,
.action-card {
  overflow: visible !important;
}

.cell-full { display: none !important; }

.cell-card .details-button,
.guide-more-button {
  position: relative;
  border: 0;
  background: transparent;
  color: rgba(36,36,36,.68);
  font-family: var(--font-body, Arial, sans-serif);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
}

.guide-more-button {
  justify-self: start;
  margin-top: 10px;
  padding: 0;
}

.guide-more-button::after { content: " →"; }
.guide-more-button[hidden] { display: none !important; }

.guide-card [data-guide-text] {
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 0;
}

.guide-card.is-long [data-guide-text] {
  max-height: none;
}

.action-card textarea {
  min-height: 88px !important;
  max-height: 110px;
}

.answer-actions {
  display: grid !important;
  grid-template-columns: minmax(180px, 1fr) 68px;
  align-items: center;
  gap: 18px !important;
}

.answer-actions .save-answer {
  width: 100%;
  min-width: 0 !important;
}

.dice-stage {
  width: 68px !important;
  height: 68px !important;
  overflow: visible;
}

.dice-stage:not(.is-rolling) {
  filter: drop-shadow(0 14px 18px rgba(70,45,25,.16));
}

.dice-stage:not(.is-rolling) .dice-3d {
  width: 54px !important;
  height: 54px !important;
  transform: none !important;
  transform-style: flat !important;
}

.dice-stage:not(.is-rolling) .dice-face {
  width: 54px !important;
  height: 54px !important;
  inset: auto !important;
  overflow: hidden;
  border: 0 !important;
  outline: 0 !important;
  border-radius: 13px !important;
  background:
    radial-gradient(circle at 24% 20%, rgba(255,255,255,.96), rgba(255,255,255,.35) 27%, transparent 47%),
    linear-gradient(145deg, #f7ddb2 0%, #e7b878 100%) !important;
  box-shadow:
    inset 0 0 18px rgba(255,255,255,.34),
    inset -13px -14px 22px rgba(99,61,28,.15),
    0 13px 24px rgba(70,45,25,.18) !important;
}

.dice-stage:not(.is-rolling) .dot {
  width: 7px;
  height: 7px;
  background: rgba(75, 50, 34, .78);
}

.dice-stage:not(.is-rolling) .dot.tl { left: 13px; top: 13px; }
.dice-stage:not(.is-rolling) .dot.tr { right: 13px; top: 13px; }
.dice-stage:not(.is-rolling) .dot.ml { left: 13px; top: 24px; }
.dice-stage:not(.is-rolling) .dot.mr { right: 13px; top: 24px; }
.dice-stage:not(.is-rolling) .dot.bl { left: 13px; bottom: 13px; }
.dice-stage:not(.is-rolling) .dot.br { right: 13px; bottom: 13px; }
.dice-stage:not(.is-rolling) .dot.c { left: 23.5px; top: 23.5px; }

.side-card {
  transition:
    transform 340ms cubic-bezier(.2,.8,.2,1),
    box-shadow 340ms cubic-bezier(.2,.8,.2,1),
    border-color 340ms cubic-bezier(.2,.8,.2,1);
}

.cell-card { background: rgba(246,241,233,.64) !important; }
.guide-card {
  background:
    radial-gradient(circle at 90% 12%, rgba(229, 198, 151, .24), transparent 12rem),
    rgba(250, 246, 239, .78) !important;
  border-color: rgba(92, 74, 52, .28) !important;
}
.action-card {
  background:
    radial-gradient(circle at 84% 73%, rgba(233, 176, 105, .18), transparent 12rem),
    rgba(252, 247, 239, .86) !important;
  border-color: rgba(36,36,36,.26) !important;
}

.board-art-item.is-active {
  animation: boardPathAwake 1650ms cubic-bezier(.2,.8,.2,1) both;
}

@keyframes boardPathAwake {
  0% { opacity: .45; filter: saturate(.85) contrast(.92) drop-shadow(0 0 0 rgba(210,160,88,0)); }
  45% { opacity: 1; filter: saturate(1.32) contrast(1.06) drop-shadow(0 0 20px rgba(210,160,88,.48)); }
  100% { opacity: .92; filter: saturate(1.08) contrast(1.02) drop-shadow(0 0 10px rgba(210,160,88,.24)); }
}

.player-token span {
  transition: box-shadow 320ms ease, transform 320ms ease;
}

.board-wrap.is-moving .player-token span {
  transform: scale(1.08);
}

@media (min-width: 1061px) and (max-height: 820px) {
  .game-layout { grid-template-columns: minmax(560px, 670px) minmax(420px, 500px) !important; }
  .board-wrap { width: min(100%, 640px) !important; max-width: 640px !important; }
  .cell-card { min-height: 112px !important; }
  .guide-card { min-height: 142px !important; }
  .action-card { min-height: 214px !important; }
  .guide-card [data-guide-text] { -webkit-line-clamp: 4; }
}

@media (max-width: 1060px) {
  .game-page .site-header .desktop-nav { display: none !important; }
  .game-page .mobile-panel [data-game-save][hidden] { display: none !important; }
  .game-page .mobile-panel .game-header-save {
    width: 100%;
    padding: 12px 0;
    border: 0;
    background: transparent;
    text-align: left;
    font: inherit;
    text-transform: uppercase;
  }
  .guide-card [data-guide-text] { -webkit-line-clamp: 6; }
}

@media (max-width: 680px) {
  .answer-actions {
    grid-template-columns: minmax(0, 1fr) 58px;
    gap: 12px !important;
  }
  .dice-stage { width: 56px !important; height: 56px !important; }
  .dice-stage:not(.is-rolling) .dice-3d,
  .dice-stage:not(.is-rolling) .dice-face {
    width: 46px !important;
    height: 46px !important;
  }
}

.game-header-save[disabled] {
  opacity: .34;
  cursor: not-allowed !important;
}
.game-header-save.is-ready {
  opacity: 1;
}
.game-page .site-header .desktop-nav {
  grid-template-columns: 142px 172px 142px !important;
}


/* lila-guide-answer-validation-v1 */
.answer-counter {
  display: none;
  margin: -4px 0 8px !important;
  color: rgba(49, 45, 39, 0.52) !important;
  font-size: 10.5px !important;
  line-height: 1 !important;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

[data-phase="waiting_answer"] .answer-counter {
  display: block;
}

.answer-counter[data-state="near"] {
  color: rgba(91, 65, 36, 0.78) !important;
}

.answer-counter[data-state="over"] {
  color: #8d3f3f !important;
}

/* === FINAL GUIDE REPORT === */
.final-report-modal[hidden] { display: none !important; }
.final-report-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  padding: clamp(14px, 3vw, 34px);
}
.final-report-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(28, 24, 22, .70);
  backdrop-filter: blur(10px);
}
.final-report-card {
  position: relative;
  z-index: 1;
  width: min(980px, 100%);
  max-height: min(88vh, 920px);
  overflow: auto;
  padding: clamp(24px, 4vw, 54px);
  border: 1px solid rgba(93, 65, 48, .22);
  border-radius: 24px;
  background:
    radial-gradient(circle at 50% 0%, rgba(222, 174, 110, .16), transparent 38%),
    linear-gradient(155deg, rgba(252, 248, 242, .98), rgba(239, 231, 220, .98));
  box-shadow: 0 34px 110px rgba(14, 10, 9, .34);
  color: #302c28;
}
.final-report-close {
  position: absolute;
  top: 16px;
  right: 18px;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.48);
  color: rgba(36,31,28,.72);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}
.final-report-ornament {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 260px;
  margin: 10px 0 18px;
  color: rgba(158, 111, 66, .82);
}
.final-report-ornament span {
  flex: 1;
  height: 1px;
  background: currentColor;
  opacity: .42;
}
.final-report-card h2 {
  margin: 0;
  max-width: 820px;
  font-family: var(--font-title);
  font-size: clamp(34px, 5vw, 68px);
  font-weight: 400;
  line-height: .98;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.final-report-lead {
  max-width: 820px;
  margin: 22px 0 0;
  color: rgba(48,44,40,.90);
  font-size: clamp(16px, 1.8vw, 21px);
  line-height: 1.58;
}
.final-report-section {
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid rgba(71,58,47,.15);
}
.final-report-section h3 {
  margin: 0 0 12px;
  color: rgba(86,61,43,.76);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.final-report-section p,
.final-report-section li {
  color: rgba(48,44,40,.88);
  font-size: 15px;
  line-height: 1.62;
}
.final-report-section p { margin: 0; }
.final-report-section ul,
.final-report-section ol {
  display: grid;
  gap: 9px;
  margin: 0;
  padding-left: 20px;
}
.final-report-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 34px;
}
.final-report-questions {
  margin-top: 32px;
  padding: 24px;
  border: 1px solid rgba(129,88,52,.16);
  border-radius: 16px;
  background: rgba(255,255,255,.34);
}
.final-report-questions li {
  font-family: var(--font-title);
  font-size: clamp(19px, 2vw, 25px);
  line-height: 1.35;
}
.final-report-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 28px;
}

@media (max-width: 720px) {
  .final-report-modal { padding: 8px; align-items: end; }
  .final-report-card {
    max-height: 94vh;
    padding: 26px 18px 24px;
    border-radius: 22px 22px 0 0;
  }
  .final-report-card h2 { padding-right: 38px; font-size: clamp(32px, 10vw, 48px); }
  .final-report-grid { grid-template-columns: 1fr; }
  .final-report-actions .btn { width: 100%; }
}



/* LILA_GAME_WELCOME_STYLES_V1_2 */
body.game-welcome-open {
  overflow: hidden;
}

.game-welcome[hidden] {
  display: none !important;
}

.game-welcome {
  position: fixed;
  inset: 0;
  z-index: 1500;
  display: grid;
  place-items: center;
  padding: clamp(14px, 3vw, 34px);
}

.game-welcome-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(31, 28, 25, .64);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
  animation: lila-welcome-backdrop-in .55s ease both;
}

.game-welcome-card {
  position: relative;
  z-index: 1;
  width: min(760px, 100%);
  max-height: min(92vh, 880px);
  overflow: auto;
  padding: clamp(30px, 5vw, 58px) clamp(24px, 5.5vw, 64px) clamp(26px, 4.5vw, 50px);
  border: 1px solid rgba(83, 74, 66, .24);
  border-radius: 22px;
  background:
    radial-gradient(circle at 84% 5%, rgba(255, 255, 255, .72), transparent 36%),
    #efe9e2;
  box-shadow:
    0 42px 120px rgba(22, 17, 14, .32),
    inset 0 1px 0 rgba(255, 255, 255, .70);
  color: #252321;
  animation: lila-welcome-card-in .85s cubic-bezier(.22, .61, .36, 1) both;
}

.game-welcome-eyebrow {
  margin: 0 0 14px;
  color: rgba(37, 35, 33, .60);
  font-family: var(--font-text);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.game-welcome-card h2 {
  max-width: 630px;
  margin: 0;
  font-family: var(--font-title);
  font-size: clamp(39px, 5vw, 66px);
  font-weight: 400;
  line-height: .98;
  letter-spacing: .055em;
  text-transform: uppercase;
}

.game-welcome-intro {
  max-width: 590px;
  margin: 22px 0 0;
  color: rgba(37, 35, 33, .72);
  font-family: var(--font-text);
  font-size: clamp(15px, 1.4vw, 18px);
  line-height: 1.55;
}

.game-welcome-steps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 22px;
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
}

.game-welcome-steps li {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 16px 15px;
  border: 1px solid rgba(72, 65, 59, .13);
  border-radius: 14px;
  background: rgba(255, 255, 255, .25);
}

.game-welcome-steps li > span {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(50, 46, 42, .35);
  border-radius: 50%;
  font-family: var(--font-title);
  font-size: 17px;
}

.game-welcome-steps p {
  margin: 0;
  color: rgba(37, 35, 33, .68);
  font-family: var(--font-text);
  font-size: 13px;
  line-height: 1.48;
}

.game-welcome-steps strong {
  display: block;
  margin-bottom: 3px;
  color: #252321;
  font-size: 13px;
  font-weight: 600;
}

.game-welcome-start {
  min-width: 220px;
  margin-top: 28px;
  white-space: nowrap;
}

.game-page .desktop-nav a,
.game-page .desktop-nav button,
.game-page .mobile-panel a,
.game-page .mobile-panel button,
.game-page .answer-actions .btn,
.game-page .save-path-card .btn {
  white-space: nowrap;
}

@keyframes lila-welcome-backdrop-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes lila-welcome-card-in {
  from {
    opacity: 0;
    transform: translate3d(0, 18px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@media (max-width: 680px) {
  .game-welcome {
    align-items: end;
    padding: 0;
  }

  .game-welcome-card {
    width: 100%;
    max-height: 94svh;
    padding: 30px 20px 24px;
    border-radius: 22px 22px 0 0;
  }

  .game-welcome-card h2 {
    font-size: clamp(36px, 11vw, 52px);
  }

  .game-welcome-intro {
    margin-top: 17px;
    font-size: 14px;
  }

  .game-welcome-steps {
    grid-template-columns: 1fr;
    gap: 9px;
    margin-top: 22px;
  }

  .game-welcome-steps li {
    padding: 12px;
  }

  .game-welcome-start {
    width: 100%;
    margin-top: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .game-welcome-backdrop,
  .game-welcome-card {
    animation: none !important;
  }
}


/* === LILA_GAME_STABLE_SCENE_GUIDE_PAYMENT_R2 === */

body.game-overlay-open {
  overflow: hidden !important;
}

.game-page .path-line {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.game-page .path-line [data-path-line] {
  display: inline;
}

.game-page .cell-card [data-cell-description],
.game-page .guide-status,
.game-page .answer-status,
.game-page .answer-note {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}

.game-page .cell-card [data-cell-description] {
  -webkit-line-clamp: 3;
}

.game-page .guide-status {
  margin: 0;
  -webkit-line-clamp: 3;
}

.game-page .answer-status {
  -webkit-line-clamp: 3;
}

.game-page .answer-note {
  -webkit-line-clamp: 2;
}

.guide-question,
.game-event-question {
  border: 1px solid rgba(87, 66, 45, .20);
  border-radius: 14px;
  background: rgba(255, 255, 255, .38);
}

.guide-question {
  margin-top: 12px;
  padding: 12px 14px;
}

.guide-question[hidden],
.game-event-question[hidden] {
  display: none !important;
}

.guide-question > span,
.game-event-question > span {
  display: block;
  margin-bottom: 7px;
  color: rgba(71, 55, 40, .62);
  font-family: var(--font-text, "Manrope", Arial, sans-serif);
  font-size: 9px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.guide-question p,
.game-event-question p {
  margin: 0;
  color: #27231f;
  font-family: var(--font-title, "Oranienbaum", serif);
  font-size: clamp(18px, 1.45vw, 23px);
  line-height: 1.28;
  letter-spacing: .015em;
}

.guide-more-button {
  display: inline-flex;
  align-items: center;
  margin-top: 10px;
  padding: 0;
}

.guide-more-button[hidden] {
  display: none !important;
}

.game-event-card {
  max-height: min(88svh, 780px);
  overflow: auto;
  overscroll-behavior: contain;
}

.game-event-details {
  display: grid;
  gap: 12px;
}

.game-event-details[hidden] {
  display: none !important;
}

.game-event-details p {
  margin: 0;
}

.game-event-question {
  margin-top: 18px;
  padding: 17px 18px;
  background: rgba(244, 228, 204, .48);
}

.game-event-card[data-variant="guide"] {
  width: min(680px, 100%);
}

.game-event-card[data-variant="guide"] .game-event-details {
  font-size: 15px;
  line-height: 1.62;
}

.history-drawer {
  position: fixed !important;
  inset: 0 !important;
  z-index: 1300 !important;
  overflow: hidden !important;
}

.history-drawer-panel {
  display: grid !important;
  grid-template-rows: auto auto minmax(0, 1fr) !important;
  width: min(760px, calc(100% - 28px)) !important;
  height: min(82svh, 760px) !important;
  max-height: min(82svh, 760px) !important;
  overflow: hidden !important;
}

.history-list {
  min-height: 0 !important;
  overflow: auto !important;
  overscroll-behavior: contain;
  padding-right: 10px;
}

@media (min-width: 1061px) {
  :root {
    --game-footer-h: 58px;
  }

  html,
  body.game-page {
    height: 100%;
  }

  body.game-page {
    min-height: 100svh !important;
    overflow: hidden !important;
  }

  .game-page .site-footer {
    position: fixed !important;
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--game-footer-h) !important;
    min-height: var(--game-footer-h) !important;
    overflow: hidden;
  }

  .game-page .site-footer .footer-inner {
    min-height: var(--game-footer-h) !important;
    padding-block: 6px !important;
  }

  .game-shell {
    height: calc(100svh - var(--header-h, 68px) - var(--game-footer-h)) !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .game-stage {
    height: 100% !important;
    min-height: 0 !important;
    padding: 14px 0 !important;
    overflow: hidden !important;
  }

  .game-stage > .container {
    width: min(100% - 48px, 1440px) !important;
    height: 100% !important;
    min-height: 0 !important;
  }

  .game-layout {
    height: 100% !important;
    min-height: 0 !important;
    grid-template-columns: minmax(560px, 1.42fr) minmax(420px, 1fr) !important;
    gap: clamp(18px, 2vw, 34px) !important;
    align-items: stretch !important;
  }

  .game-board-card,
  .game-sidebar {
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    align-self: stretch !important;
  }

  .game-board-card {
    overflow: hidden !important;
  }

  .board-wrap {
    width: auto !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    aspect-ratio: 9 / 8 !important;
  }

  .game-sidebar {
    display: grid !important;
    grid-template-rows: minmax(0, .25fr) minmax(0, .32fr) minmax(0, .43fr) !important;
    gap: 14px !important;
    overflow: hidden !important;
    align-content: stretch !important;
  }

  .game-sidebar > .side-card {
    min-height: 0 !important;
    max-height: 100% !important;
    overflow: hidden !important;
    padding: clamp(14px, 1.15vw, 20px) !important;
  }

  .cell-card,
  .guide-card,
  .action-card {
    display: flex !important;
    flex-direction: column;
  }

  .cell-card .card-title-row,
  .guide-card .card-title-row,
  .action-card .card-title-row {
    flex: 0 0 auto;
  }

  .guide-card .guide-more-button {
    flex: 0 0 auto;
  }

  .action-card textarea {
    min-height: 68px !important;
    max-height: 96px !important;
    resize: none;
  }

  .side-card h2 {
    margin-bottom: 8px !important;
    font-size: clamp(25px, 1.75vw, 32px) !important;
    line-height: 1.02 !important;
  }

  .side-card p,
  .side-card textarea,
  .cell-full {
    font-size: clamp(12.5px, .9vw, 14px) !important;
    line-height: 1.5 !important;
  }

  .guide-question {
    padding: 11px 13px;
  }

  .guide-question p {
    font-size: clamp(17px, 1.22vw, 21px);
    line-height: 1.24;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .answer-actions {
    margin-top: auto;
  }
}

@media (min-width: 1061px) and (max-height: 780px) {
  :root {
    --game-footer-h: 48px;
  }

  .game-stage {
    padding: 9px 0 !important;
  }

  .game-sidebar {
    gap: 9px !important;
  }

  .game-sidebar > .side-card {
    padding: 11px 14px !important;
  }

  .side-card h2 {
    font-size: clamp(22px, 1.45vw, 27px) !important;
    margin-bottom: 5px !important;
  }

  .side-card p,
  .side-card textarea {
    font-size: 12px !important;
    line-height: 1.38 !important;
  }

  .guide-question {
    margin-top: 8px;
    padding: 8px 10px;
  }

  .guide-question p {
    font-size: 17px;
    -webkit-line-clamp: 2;
  }

  .action-card textarea {
    min-height: 58px !important;
    max-height: 68px !important;
  }

  .answer-note {
    display: none !important;
  }
}

@media (max-width: 1060px) {
  body.game-page {
    overflow-x: hidden !important;
  }

  .game-shell,
  .game-stage,
  .game-layout,
  .game-board-card,
  .game-sidebar {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .game-sidebar {
    grid-template-rows: none !important;
  }

  .game-sidebar > .side-card {
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
  }

  .guide-question p {
    font-size: clamp(18px, 5vw, 22px);
  }
}

@media (max-width: 680px) {
  .game-event-card {
    max-height: 92svh;
  }

  .history-drawer-panel {
    width: 100% !important;
    height: 92svh !important;
    max-height: 92svh !important;
    border-radius: 20px 20px 0 0 !important;
  }
}


/* === LILA_GAME_R2_1_SCROLL_GUIDE_ANSWER_FIX === */

.game-page .action-card.has-answer-error .answer-status,
.game-page .action-card.has-answer-error .answer-note {
  color: #8b3f35 !important;
}

.game-page .action-card.has-answer-error textarea {
  border-color: rgba(139, 63, 53, .58) !important;
  box-shadow: 0 0 0 3px rgba(139, 63, 53, .08);
}

@media (min-width: 1061px) {
  html {
    height: auto !important;
  }

  body.game-page {
    height: auto !important;
    min-height: 100svh !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  body.game-page.game-overlay-open {
    overflow: hidden !important;
  }

  .game-page .site-footer {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  .game-shell {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  .game-stage {
    height: auto !important;
    min-height: 0 !important;
    padding: 16px 0 22px !important;
    overflow: visible !important;
  }

  .game-stage > .container {
    width: min(100% - 48px, 1440px) !important;
    height: clamp(720px, calc(100svh - var(--header-h, 68px) - 34px), 900px) !important;
    min-height: 720px !important;
  }

  .game-layout,
  .game-board-card,
  .game-sidebar {
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
  }

  .game-layout {
    align-items: stretch !important;
  }

  .game-sidebar {
    grid-template-rows: minmax(0, .24fr) minmax(0, .36fr) minmax(0, .40fr) !important;
  }

  .game-sidebar > .side-card {
    min-height: 0 !important;
    overflow: hidden !important;
    padding: clamp(14px, 1vw, 18px) !important;
  }

  .side-card h2 {
    margin-bottom: 7px !important;
    font-size: clamp(22px, 1.45vw, 28px) !important;
    line-height: 1.04 !important;
  }

  .game-page .cell-card [data-cell-description] {
    -webkit-line-clamp: 2 !important;
  }

  .game-page .guide-status {
    flex: 0 0 auto;
    -webkit-line-clamp: 3 !important;
    font-size: clamp(13px, .9vw, 14.5px) !important;
    line-height: 1.48 !important;
  }

  .guide-question {
    margin-top: 9px !important;
    padding: 10px 12px !important;
  }

  .guide-question > span {
    margin-bottom: 5px !important;
  }

  .guide-question p {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    font-size: clamp(15.5px, 1.05vw, 18.5px) !important;
    line-height: 1.3 !important;
  }

  .guide-more-button {
    margin-top: 8px !important;
    flex: 0 0 auto;
  }

  .answer-status {
    -webkit-line-clamp: 2 !important;
  }

  .answer-note {
    display: -webkit-box !important;
    min-height: 30px;
    margin-top: 8px !important;
    -webkit-line-clamp: 2 !important;
    font-size: 12.5px !important;
    line-height: 1.35 !important;
  }
}

@media (min-width: 1061px) and (max-height: 780px) {
  .game-stage > .container {
    height: 720px !important;
  }

  .answer-note {
    display: -webkit-box !important;
  }
}


/* LILA_GUIDE_BUTTON_R2_2_V1
   Кнопка полного разбора всегда остаётся видимой внутри фиксированной карточки.
   Начало разбора прокручивается только в собственном блоке и не раздувает сцену. */

@media (min-width: 1061px) {
  .game-page .guide-card {
    display: grid !important;
    grid-template-rows: auto auto minmax(0, 1fr) auto auto !important;
    align-content: stretch !important;
    overflow: hidden !important;
  }

  .game-page .guide-card > .card-title-row,
  .game-page .guide-card > h2,
  .game-page .guide-card > .guide-question,
  .game-page .guide-card > .guide-more-button {
    min-width: 0;
    flex: none !important;
  }

  .game-page .guide-card > .guide-status {
    display: block !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding-right: 5px;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    -webkit-line-clamp: unset !important;
    -webkit-box-orient: initial !important;
  }

  .game-page .guide-card > .guide-question {
    min-height: 0 !important;
    max-height: 104px;
    margin-top: 9px !important;
    overflow: hidden !important;
  }

  .game-page .guide-card > .guide-question p {
    display: -webkit-box !important;
    overflow: hidden !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 3 !important;
  }

  .game-page .guide-card > .guide-more-button {
    position: relative;
    z-index: 2;
    align-self: start;
    margin-top: 8px !important;
    white-space: nowrap;
  }
}

@media (min-width: 1061px) and (max-height: 780px) {
  .game-page .guide-card > .guide-question {
    max-height: 78px;
  }

  .game-page .guide-card > .guide-question p {
    -webkit-line-clamp: 2 !important;
  }
}

/* LILA_GUIDE_CARD_COMPACT_R23 */
.game-page .guide-status[hidden] {
  display: none !important;
}

@media (min-width: 1061px) {
  .game-page .guide-card,
  .game-page .action-card {
    padding: 14px 18px !important;
  }

  .game-page .guide-card .card-title-row,
  .game-page .action-card .card-title-row {
    margin-bottom: 6px !important;
  }

  .game-page .guide-card h2,
  .game-page .action-card h2 {
    font-size: clamp(18px, 1.45vw, 28px) !important;
    line-height: 1.06 !important;
    letter-spacing: .11em !important;
    margin: 0 0 8px !important;
  }

  .game-page .guide-card .guide-question {
    margin-top: 6px !important;
    padding: 10px 12px !important;
  }

  .game-page .guide-card .guide-question > span {
    margin-bottom: 5px !important;
    font-size: 8.5px !important;
  }

  .game-page .guide-card .guide-question p {
    font-size: clamp(16px, 1.18vw, 21px) !important;
    line-height: 1.2 !important;
    -webkit-line-clamp: 4 !important;
  }

  .game-page .guide-card > .guide-more-button {
    margin-top: 6px !important;
  }

  .game-page .action-card .answer-status {
    min-height: 0 !important;
    margin-bottom: 8px !important;
    -webkit-line-clamp: 4 !important;
  }

  .game-page .action-card textarea {
    min-height: 92px !important;
  }

  .game-page .action-card .answer-note {
    margin-top: 6px !important;
  }
}

/* LILA_GUIDE_MODAL_NO_DUPLICATE_R24 */
.game-event-card p[data-event-text]:empty {
  display: none !important;
}

.game-event-card[data-variant="guide"] .game-event-details {
  margin-top: 14px;
  padding-top: 0;
  border-top: 0;
}

/* LILA_GAME_STATIC_BRAND_R25C */

/* Внешний вид и расположение остаются исходными.
   Бренд в шапке и футере только не является ссылкой. */
.game-page .game-brand-static {
  cursor: default !important;
  text-decoration: none !important;
  user-select: none;
}

/* LILA_GAME_HEADER_MATCH_SIDEBAR_R25D */
@media (min-width: 1061px) {
  /*
   * Шапка использует ту же ширину, колонки и промежуток,
   * что игровое поле. Поэтому навигация совпадает
   * с правой колонкой карточек.
   */
  .game-page .site-header .header-inner {
    width: min(100% - 48px, 1440px) !important;
    margin-inline: auto !important;
    padding-inline: 0 !important;

    display: grid !important;
    grid-template-columns:
      minmax(560px, 1.42fr)
      minmax(420px, 1fr) !important;

    column-gap: clamp(18px, 2vw, 34px) !important;
    align-items: stretch !important;
  }

  .game-page .site-header .brand {
    grid-column: 1 !important;
    min-width: 0 !important;
  }

  .game-page .site-header .desktop-nav {
    grid-column: 2 !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;

    margin: 0 !important;

    display: grid !important;
    grid-template-columns:
      repeat(3, minmax(0, 1fr)) !important;
  }

  .game-page .site-header .desktop-nav:has(
    [data-game-save][hidden]
  ) {
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;
  }

  .game-page .site-header .desktop-nav a,
  .game-page .site-header .desktop-nav button {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;

    padding-inline: 14px !important;
    justify-content: space-between !important;
    white-space: nowrap !important;
  }

  .game-page .site-header .header-actions,
  .game-page .site-header .burger {
    display: none !important;
  }
}

/* LILA_MOBILE_DICE_FACE_R26 */
@media (max-width: 680px) {
  .game-page .answer-actions {
    grid-template-columns: minmax(0, 1fr) 64px !important;
    align-items: center !important;
    gap: 12px !important;
  }

  .game-page .dice-stage {
    width: 64px !important;
    height: 64px !important;
    min-width: 64px !important;
    overflow: visible !important;
    place-self: center !important;
  }

  /*
   * После окончания броска показываем только одну ровную грань.
   * Никаких боковых сторон и перспективного искажения.
   */
  .game-page .dice-stage:not(.is-rolling) {
    perspective: none !important;
    filter: drop-shadow(
      0 10px 14px rgba(70, 45, 25, .16)
    ) !important;
  }

  .game-page .dice-stage:not(.is-rolling) .dice-3d {
    position: relative !important;
    width: 52px !important;
    height: 52px !important;
    transform: none !important;
    transform-style: flat !important;
    transition: none !important;
  }

  .game-page .dice-stage:not(.is-rolling) .dice-face {
    position: absolute !important;
    inset: 0 !important;

    display: none !important;

    width: 52px !important;
    height: 52px !important;

    box-sizing: border-box !important;
    transform: none !important;
    backface-visibility: visible !important;
    overflow: hidden !important;

    border: 1px solid rgba(105, 72, 42, .10) !important;
    border-radius: 12px !important;

    background:
      radial-gradient(
        circle at 24% 20%,
        rgba(255, 255, 255, .98),
        rgba(255, 255, 255, .35) 28%,
        transparent 48%
      ),
      linear-gradient(
        145deg,
        #f8deb1 0%,
        #e8b978 100%
      ) !important;

    box-shadow:
      inset 0 0 16px rgba(255, 255, 255, .34),
      inset -11px -12px 18px rgba(99, 61, 28, .13),
      0 9px 18px rgba(70, 45, 25, .14) !important;
  }

  .game-page
  .dice-stage:not(.is-rolling)[data-value="1"]
  .dice-face-1,

  .game-page
  .dice-stage:not(.is-rolling)[data-value="2"]
  .dice-face-2,

  .game-page
  .dice-stage:not(.is-rolling)[data-value="3"]
  .dice-face-3,

  .game-page
  .dice-stage:not(.is-rolling)[data-value="4"]
  .dice-face-4,

  .game-page
  .dice-stage:not(.is-rolling)[data-value="5"]
  .dice-face-5,

  .game-page
  .dice-stage:not(.is-rolling)[data-value="6"]
  .dice-face-6 {
    display: block !important;
  }

  .game-page .dice-stage:not(.is-rolling) .dot {
    width: 7px !important;
    height: 7px !important;
  }

  .game-page .dice-stage:not(.is-rolling) .dot.tl {
    left: 11px !important;
    top: 11px !important;
  }

  .game-page .dice-stage:not(.is-rolling) .dot.tr {
    right: 11px !important;
    top: 11px !important;
  }

  .game-page .dice-stage:not(.is-rolling) .dot.ml {
    left: 11px !important;
    top: 22px !important;
  }

  .game-page .dice-stage:not(.is-rolling) .dot.mr {
    right: 11px !important;
    top: 22px !important;
  }

  .game-page .dice-stage:not(.is-rolling) .dot.bl {
    left: 11px !important;
    bottom: 11px !important;
  }

  .game-page .dice-stage:not(.is-rolling) .dot.br {
    right: 11px !important;
    bottom: 11px !important;
  }

  .game-page .dice-stage:not(.is-rolling) .dot.c {
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
  }
}

/* LILA_SHARED_PLAY_GUIDE_R27 */

.lila-play-guide-modal[hidden] {
  display: none !important;
}

.lila-play-guide-modal {
  position: fixed;
  inset: 0;
  z-index: 12000;

  display: grid;
  place-items: center;

  padding: 16px;
}

.lila-play-guide-modal__backdrop {
  position: absolute;
  inset: 0;

  background: rgba(35, 31, 27, .58);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.lila-play-guide {
  position: relative;
  z-index: 1;

  width: min(820px, 100%);
  max-height: calc(100dvh - 32px);

  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;

  box-sizing: border-box;

  border: 1px solid #d9cdbe;
  border-radius: 28px;

  padding: 38px;

  background: #fcfaf5;

  box-shadow:
    0 28px 80px rgba(35, 29, 24, .24);

  color: #1e1a16;

  font-family:
    var(
      --paths-text,
      var(--font-text, "Manrope", Arial, sans-serif)
    );
}

.lila-play-guide__close {
  position: absolute;
  top: 18px;
  right: 18px;

  width: 44px;
  height: 44px;

  border: 1px solid #d9cdbe;
  border-radius: 50%;

  display: grid;
  place-items: center;

  padding: 0;

  background: #fcfaf5;
  color: #1e1a16;

  font: inherit;
  font-size: 25px;
  font-weight: 300;
  line-height: 1;

  cursor: pointer;
}

.lila-play-guide__kicker {
  margin: 0;

  color: #b38b45;

  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.lila-play-guide h2 {
  max-width: 650px;

  margin: 17px 64px 0 0;

  color: #1e1a16;

  font-family:
    var(
      --paths-title,
      var(
        --font-title,
        "Cormorant Garamond",
        Georgia,
        serif
      )
    );

  font-size: clamp(42px, 5vw, 58px);
  font-weight: 500;
  line-height: .98;
  letter-spacing: .005em;
}

.lila-play-guide__intro {
  max-width: 700px;

  margin: 20px 0 0;

  color: #756d64;

  font-size: 15px;
  line-height: 1.65;
}

.lila-play-guide__intro strong {
  color: #1e1a16;
  font-weight: 600;
}

.lila-play-guide__formula {
  margin-top: 24px;

  border: 1px solid #d9cdbe;
  border-radius: 18px;

  padding: 13px 18px;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;

  background: #f7f1e8;

  color: #1e1a16;

  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.lila-play-guide__formula b {
  color: #b38b45;
  font-size: 16px;
  font-weight: 400;
}

.lila-play-guide__steps {
  margin: 18px 0 0;
  padding: 0;

  list-style: none;

  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.lila-play-guide__steps li {
  min-width: 0;

  border: 1px solid #ded3c5;
  border-radius: 20px;

  padding: 18px;

  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: start;
  gap: 12px;

  background: rgba(247, 241, 232, .62);
}

.lila-play-guide__steps li:last-child {
  grid-column: 1 / -1;
}

.lila-play-guide__number {
  color: #b38b45;

  font-family:
    var(
      --paths-title,
      var(
        --font-title,
        "Cormorant Garamond",
        Georgia,
        serif
      )
    );

  font-size: 27px;
  font-weight: 500;
  line-height: 1;
}

.lila-play-guide__steps strong {
  display: block;

  color: #1e1a16;

  font-size: 14px;
  font-weight: 650;
  line-height: 1.4;
}

.lila-play-guide__steps p {
  margin: 8px 0 0;

  color: #756d64;

  font-size: 13px;
  line-height: 1.55;
}

.lila-play-guide__steps b {
  color: #1e1a16;
  font-weight: 600;
}

.lila-play-guide__note {
  margin-top: 14px;

  border: 1px solid rgba(179, 139, 69, .35);
  border-radius: 18px;

  padding: 16px 18px;

  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;

  background: rgba(233, 217, 178, .25);
}

.lila-play-guide__note strong {
  color: #1e1a16;

  font-size: 13px;
  line-height: 1.5;
}

.lila-play-guide__note span {
  color: #756d64;

  font-size: 13px;
  line-height: 1.55;
}

.lila-play-guide__action {
  width: 100%;
  min-height: 48px;

  margin-top: 16px;

  border: 0;
  border-radius: 24px;

  background: #1e1a16;
  color: #fff;

  font-family:
    var(
      --paths-text,
      var(--font-text, "Manrope", Arial, sans-serif)
    );

  font-size: 12px;
  font-weight: 650;
  letter-spacing: .06em;
  text-transform: uppercase;

  cursor: pointer;
}

@media (max-width: 680px) {
  .lila-play-guide-modal {
    align-items: end;

    padding:
      10px
      10px
      max(10px, env(safe-area-inset-bottom));
  }

  .lila-play-guide {
    width: 100%;
    max-height: calc(
      100dvh
      - 20px
      - env(safe-area-inset-bottom)
    );

    border-radius: 24px;

    padding:
      28px
      17px
      calc(20px + env(safe-area-inset-bottom));
  }

  .lila-play-guide__close {
    position: sticky;
    top: 0;
    z-index: 3;

    float: right;

    width: 42px;
    height: 42px;

    margin:
      -10px
      -2px
      -32px
      12px;

    background: rgba(252, 250, 245, .98);
  }

  .lila-play-guide h2 {
    margin-top: 14px;
    margin-right: 42px;

    font-size: 38px;
    line-height: 1;
  }

  .lila-play-guide__intro {
    margin-top: 15px;

    font-size: 14px;
    line-height: 1.55;
  }

  .lila-play-guide__formula {
    justify-content: flex-start;
    flex-wrap: wrap;

    gap: 8px;

    padding: 12px 14px;

    font-size: 10px;
  }

  .lila-play-guide__steps {
    grid-template-columns: 1fr;
    gap: 9px;
  }

  .lila-play-guide__steps li,
  .lila-play-guide__steps li:last-child {
    grid-column: auto;

    padding: 15px;

    grid-template-columns: 34px minmax(0, 1fr);
    gap: 10px;
  }

  .lila-play-guide__number {
    font-size: 24px;
  }

  .lila-play-guide__steps strong {
    font-size: 14px;
  }

  .lila-play-guide__steps p {
    margin-top: 6px;

    font-size: 13px;
    line-height: 1.5;
  }

  .lila-play-guide__note {
    grid-template-columns: 1fr;
    gap: 5px;

    padding: 14px;
  }

  .lila-play-guide__action {
    position: sticky;
    bottom: 0;

    box-shadow:
      0 -10px 20px rgba(252, 250, 245, .95);
  }
}

/* LILA_GUIDE_ELLIPSIS_R29 */
.game-page .guide-card .guide-question p {
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  word-break: break-word;
}

@media (min-width: 1061px) {
  .game-page .guide-card .guide-question p {
    -webkit-line-clamp: 4 !important;
    line-clamp: 4 !important;
  }
}

@media (max-width: 1060px) {
  .game-page .guide-card .guide-question p {
    -webkit-line-clamp: 3 !important;
    line-clamp: 3 !important;
  }
}

/* LILA_GUIDE_OVERFLOW_ELLIPSIS_R29B */
.game-page .guide-card .guide-question p {
  position: relative !important;
}

.game-page .guide-card .guide-question p.is-truncated {
  padding-right: 18px !important;
}

.game-page .guide-card .guide-question p.is-truncated::after {
  content: "…" !important;

  position: absolute;
  right: 2px;
  bottom: 0;

  display: block;

  padding-left: 5px;

  background: linear-gradient(
    90deg,
    rgba(252, 249, 244, 0),
    #fcf9f4 35%
  );

  color: inherit;
  font: inherit;
  line-height: inherit;
}

/* LILA_CELL_MODAL_READABILITY_R30 */

/* Пустое краткое описание в карточке клетки не занимает место. */
.game-page
.game-event-card[data-variant="cell"]
p[data-event-text]:empty {
  display: none !important;
}

/* Основной текст клетки становится главным содержанием карточки. */
.game-page
.game-event-card[data-variant="cell"]
.game-event-details {
  margin-top: 18px !important;
  padding-top: 0 !important;

  border-top: 0 !important;

  color: rgba(49, 45, 39, .86) !important;

  font-size: 15.5px !important;
  line-height: 1.58 !important;
}

.game-page
.game-event-card[data-variant="cell"]
.game-event-details p {
  margin: 0 !important;
}

.game-page
.game-event-card[data-variant="cell"]
.game-event-details p + p {
  margin-top: 13px !important;
}

@media (max-width: 680px) {
  .game-page
  .game-event-card[data-variant="cell"]
  .game-event-details {
    margin-top: 15px !important;

    font-size: 15px !important;
    line-height: 1.55 !important;
  }
}

/* LILA_MOBILE_BOARD_WIDTH_R31 */

/* Длинный маршрут никогда не задаёт ширину игровому полю. */
.game-page .board-footer {
  min-width: 0;
  max-width: 100%;
}

.game-page .path-line {
  flex: 1 1 0;
  min-width: 0 !important;
  max-width: 100%;
  overflow: hidden !important;
}

.game-page .path-line [data-path-line] {
  display: block !important;
  width: 100%;
  min-width: 0;
  max-width: 100%;

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

.game-page .game-history-link {
  flex: 0 0 auto;
  white-space: nowrap;
}

@media (max-width: 1060px) {
  html,
  body.game-page {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden !important;
  }

  .game-page .game-shell,
  .game-page .game-stage,
  .game-page .game-stage > .container,
  .game-page .game-layout,
  .game-page .game-board-card,
  .game-page .game-sidebar,
  .game-page .board-wrap {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .game-page .game-layout {
    width: 100% !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .game-page .game-board-card,
  .game-page .game-sidebar {
    width: 100% !important;
  }

  .game-page .board-wrap {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 9 / 8 !important;
    overflow: hidden !important;
  }

  .game-page .board-footer {
    width: 100% !important;

    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 10px !important;

    overflow: hidden !important;
  }

  .game-page .path-line {
    width: 100% !important;
  }
}

@supports (overflow: clip) {
  @media (max-width: 1060px) {
    html,
    body.game-page {
      overflow-x: clip !important;
    }
  }
}

.game-page .auth-legal-note {
  margin: 0;
  color: #766f67;
  font-size: 11.5px;
  line-height: 1.5;
}

.game-page .auth-legal-note a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* LILA_COMPACT_SCREEN_ADAPTIVE_R32
   На узких ноутбуках и экранах небольшой высоты возвращаем потоковую
   компоновку: игровая область не обрезается и прокручивается страницей. */
@media (min-width: 1061px) and (max-width: 1280px),
       (min-width: 1061px) and (max-height: 820px) {
  body.game-page {
    height: auto !important;
    min-height: 100vh !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  .game-page .game-shell,
  .game-page .game-stage,
  .game-page .game-layout,
  .game-page .game-board-card,
  .game-page .game-sidebar {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  .game-page .game-shell,
  .game-page .game-stage,
  .game-page .game-board-card,
  .game-page .game-sidebar {
    overflow: visible !important;
  }

  .game-page .game-stage {
    padding: 14px 0 28px !important;
  }

  .game-page .game-stage > .container {
    width: min(100% - 40px, 940px) !important;
    height: auto !important;
    min-height: 0 !important;
  }

  .game-page .game-layout {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 16px !important;
  }

  .game-page .game-board-card,
  .game-page .game-sidebar {
    width: 100% !important;
  }

  .game-page .board-wrap {
    width: min(100%, 760px) !important;
    height: auto !important;
    max-width: 760px !important;
    max-height: none !important;
    aspect-ratio: 9 / 8 !important;
  }

  .game-page .game-sidebar {
    grid-template-rows: none !important;
    gap: 14px !important;
  }

  .game-page .game-sidebar > .side-card {
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .game-page .action-card textarea {
    min-height: 112px !important;
    max-height: none !important;
    resize: vertical;
  }
}

/* LILA_GAME_HEADER_MATCH_CABINET_R33 */
@media (min-width: 1441px) {
  .game-page .site-header .header-inner {
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: 0 !important;
    padding-inline: 34px !important;
    grid-template-columns: minmax(250px, .82fr) minmax(0, 1.9fr) auto auto !important;
    column-gap: 0 !important;
  }
}

@media (min-width: 1081px) and (max-width: 1440px) {
  .game-page .site-header .header-inner {
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: 0 !important;
    padding-inline: 20px !important;
    grid-template-columns: minmax(224px, .68fr) minmax(0, 1.55fr) auto auto !important;
    column-gap: 0 !important;
  }
}

@media (min-width: 1081px) {
  .game-page .site-header .brand,
  .game-page .site-header .desktop-nav {
    grid-column: auto !important;
  }

  .game-page .site-header .desktop-nav {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    border-left: 1px solid rgba(36, 36, 36, .22) !important;
    border-right: 1px solid rgba(36, 36, 36, .22) !important;
  }

  .game-page .site-header .desktop-nav:has([data-game-save][hidden]) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .game-page .site-header .desktop-nav a,
  .game-page .site-header .desktop-nav button {
    position: relative;
    z-index: 1;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: var(--header-h) !important;
    padding-inline: clamp(18px, 1.65vw, 42px) !important;
    overflow: hidden;
    border: 0 !important;
    border-right: 1px solid rgba(36, 36, 36, .22) !important;
    justify-content: space-between !important;
    color: #2a2927;
    font-family: var(--font-text);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0;
    white-space: nowrap !important;
  }

  .game-page .site-header .desktop-nav > :last-child {
    border-right: 0 !important;
  }

  .game-page .site-header .desktop-nav a::after,
  .game-page .site-header .desktop-nav button::after {
    margin-left: 14px;
    color: #77716a;
    font-size: 22px;
    opacity: 1;
  }
}

@media (min-width: 1081px) and (max-width: 1440px) {
  .game-page .site-header .desktop-nav a,
  .game-page .site-header .desktop-nav button {
    padding-inline: 17px !important;
    font-size: 10.8px !important;
  }

  .game-page .site-header .desktop-nav a::after,
  .game-page .site-header .desktop-nav button::after {
    font-size: 18px !important;
  }
}

@media (max-width: 1080px) {
  .game-page .site-header .desktop-nav,
  .game-page .site-header .header-actions {
    display: none !important;
  }

  .game-page .site-header .burger {
    display: block !important;
  }
}

/* LILA_ACTION_PRIMARY_ALWAYS_VISIBLE_R34
   The action button owns a non-shrinking row. While an answer is required the
   inactive die is removed, leaving the full row to the primary action. */
.game-page .action-card .answer-actions {
  position: relative;
  z-index: 3;
  flex: 0 0 auto !important;
}

.game-page .action-card .save-answer {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  visibility: visible !important;
}

.game-page [data-phase="waiting_answer"] .action-card .answer-actions {
  grid-template-columns: minmax(0, 1fr) !important;
  min-height: 44px;
  margin-top: 8px !important;
}

.game-page [data-phase="waiting_answer"] .action-card .dice-stage {
  display: none !important;
}

@media (min-width: 1281px) and (min-height: 821px) {
  .game-page .game-sidebar {
    grid-template-rows:
      minmax(122px, .19fr)
      minmax(172px, .30fr)
      minmax(310px, .51fr) !important;
  }

  .game-page .action-card {
    overflow: hidden !important;
  }

  .game-page .action-card .answer-counter {
    flex: 0 0 auto;
  }
}

/* LILA_GAME_TEXT_NO_CLIP_STRICT_R37 */
.game-page [data-game] .guide-card .guide-question p,
.game-page [data-game] .action-card .answer-status,
.game-page [data-game] .action-card .answer-note {
  display: block !important;
  max-height: none !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: normal !important;
  -webkit-line-clamp: unset !important;
  line-clamp: unset !important;
  -webkit-box-orient: initial !important;
}

.game-page [data-game] .guide-card .guide-question p.is-truncated {
  padding-right: 0 !important;
}

.game-page [data-game] .guide-card .guide-question p.is-truncated::after {
  content: none !important;
  display: none !important;
}

/* LILA_GAME_TEXT_NO_CLIP_R36 */
.game-page .game-question-inline p:not(.game-eyebrow),
.game-page .cell-card [data-cell-description],
.game-page .guide-status,
.game-page .answer-status,
.game-page .answer-note,
.game-page .guide-question p {
  max-height: none !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: normal !important;
  -webkit-line-clamp: unset !important;
  line-clamp: unset !important;
  -webkit-box-orient: initial !important;
}

.game-page .game-question-inline p:not(.game-eyebrow),
.game-page .cell-card [data-cell-description],
.game-page .guide-status,
.game-page .answer-status,
.game-page .answer-note,
.game-page .guide-question p {
  display: block !important;
}

@media (min-width: 1281px) and (min-height: 821px) and (max-height: 950px) {
  .game-page [data-phase="waiting_answer"] .action-card textarea {
    min-height: 58px !important;
    max-height: 72px !important;
  }

  .game-page [data-phase="waiting_answer"] .action-card .answer-status {
    -webkit-line-clamp: 2 !important;
  }

  .game-page [data-phase="waiting_answer"] .action-card .answer-note {
    display: -webkit-box !important;
    min-height: 0 !important;
    margin-top: 5px !important;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1 !important;
  }
}

/* LILA_GAME_READABLE_FLOW_R35
   Game copy must never be sacrificed to a fixed viewport. Compact screens keep
   the stacked layout; wide screens keep two columns and let the document flow. */
.game-page .cell-card [data-cell-description],
.game-page .guide-status,
.game-page .answer-status,
.game-page .answer-note,
.game-page .guide-question p {
  max-height: none !important;
  overflow: visible !important;
  -webkit-line-clamp: unset !important;
  -webkit-box-orient: initial !important;
}

.game-page .cell-card [data-cell-description],
.game-page .guide-status,
.game-page .answer-status,
.game-page .answer-note {
  display: block !important;
}

.game-page .guide-question {
  max-height: none !important;
  overflow: visible !important;
}

.game-page .guide-question p {
  display: block !important;
}

@media (min-width: 1281px) and (min-height: 821px) {
  html,
  body.game-page {
    height: auto !important;
  }

  body.game-page {
    min-height: 100svh !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  .game-page .game-shell,
  .game-page .game-stage,
  .game-page .game-stage > .container,
  .game-page .game-layout,
  .game-page .game-board-card,
  .game-page .game-sidebar {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  .game-page .game-shell,
  .game-page .game-stage,
  .game-page .game-layout,
  .game-page .game-board-card,
  .game-page .game-sidebar {
    overflow: visible !important;
  }

  .game-page .game-shell {
    min-height: calc(100svh - var(--header-h, 68px)) !important;
  }

  .game-page .game-stage {
    padding: 14px 0 28px !important;
  }

  .game-page .game-stage > .container {
    width: min(100% - 48px, 1440px) !important;
  }

  .game-page .game-layout {
    grid-template-columns: minmax(560px, 1.42fr) minmax(420px, 1fr) !important;
    align-items: start !important;
  }

  .game-page .game-board-card {
    position: sticky;
    top: calc(var(--header-h, 68px) + 14px);
  }

  .game-page .board-wrap {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: none !important;
    aspect-ratio: 9 / 8 !important;
  }

  .game-page .game-sidebar {
    grid-template-rows: none !important;
    grid-auto-rows: auto !important;
    align-content: start !important;
  }

  .game-page .game-sidebar > .side-card {
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .game-page .guide-card {
    grid-template-rows: auto auto auto auto auto !important;
    align-content: start !important;
  }

  .game-page .guide-card > .guide-status {
    padding-right: 0 !important;
    overflow: visible !important;
  }

  .game-page .action-card textarea {
    min-height: 112px !important;
    max-height: none !important;
    resize: vertical;
  }

  .game-page .site-footer {
    position: static !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  .game-page .site-footer .footer-inner {
    min-height: 0 !important;
    padding-block: 34px !important;
  }
}

/* LILA_GAME_TEXT_NO_CLIP_FINAL_R38 */
.game-page [data-game][data-phase] .guide-card .guide-question p,
.game-page [data-game][data-phase] .action-card .answer-status,
.game-page [data-game][data-phase] .action-card .answer-note {
  display: block !important;
  max-height: none !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: normal !important;
  -webkit-line-clamp: unset !important;
  line-clamp: unset !important;
  -webkit-box-orient: initial !important;
}

.game-page [data-game][data-phase] .guide-card .guide-question p.is-truncated {
  padding-right: 0 !important;
}

.game-page [data-game][data-phase] .guide-card .guide-question p.is-truncated::after {
  content: none !important;
  display: none !important;
}

/* LILA_FOOTER_META_UNDER_LINKS_R40 */

/*
 * В игре футер состоит из двух смысловых колонок:
 * бренд слева и юридический блок справа.
 * ИНН размещён последней строкой внутри блока документов.
 */
.game-page .site-footer .footer-inner {
  grid-template-columns: minmax(0, 1fr) auto !important;
  grid-template-areas: "brand links" !important;
}

.game-page .site-footer .footer-brand {
  grid-area: brand;
}

.game-page .site-footer .footer-links {
  grid-area: links;
  justify-self: end;
}

.game-page .site-footer .footer-links .footer-meta {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;

  margin-top: 2px;

  color: #3c3935;
  font-family: inherit;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}

@media (min-width: 1441px) {
  .game-page .site-footer .footer-links .footer-meta {
    font-size: 11px !important;
  }
}

/* LILA_GAME_MOBILE_READABILITY_R40 */
.game-page .guide-question p,
.game-page .game-event-question p {
  font-family: var(--font-text, "Manrope", Arial, sans-serif) !important;
  font-size: clamp(14px, 1.05vw, 16px) !important;
  font-weight: 500;
  line-height: 1.55 !important;
  letter-spacing: 0 !important;
  overflow-wrap: anywhere;
}

@media (max-width: 680px) {
  .game-page .game-event-card {
    width: 100%;
    max-height: calc(100dvh - 20px);
    padding: 22px 18px calc(18px + env(safe-area-inset-bottom));
  }

  .game-page .game-event-close {
    position: sticky;
    top: 0;
    z-index: 4;
    float: right;
    margin: -8px -2px -32px 12px;
    background: rgba(246, 241, 233, .98);
  }

  .game-page .game-event-action {
    position: sticky;
    bottom: 0;
    z-index: 3;
    box-shadow: 0 -10px 20px rgba(246, 241, 233, .94);
  }
}

@media (min-width: 1081px) and (max-width: 1440px) {
  .game-page .site-footer .footer-links .footer-meta {
    font-size: 10px !important;
  }
}

@media (min-width: 681px) and (max-width: 1080px) {
  .game-page .site-footer .footer-inner {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas:
      "brand"
      "links" !important;
  }

  .game-page .site-footer .footer-links {
    justify-self: start;
  }
}

@media (max-width: 680px) {
  .game-page .site-footer .footer-inner {
    grid-template-columns: auto minmax(0, 1fr) !important;
    grid-template-areas: "brand links" !important;
  }

  .game-page .site-footer .footer-links {
    justify-self: stretch;
    min-width: 0;
  }

  .game-page .site-footer .footer-links .footer-meta {
    gap: 5px;
    margin-top: 0;

    font-size: 6.55px !important;
    line-height: 1.45 !important;
    letter-spacing: 0 !important;
  }
}