:root {
  color-scheme: dark;
  --cream: #fae6bf;
  --muted-cream: #c7a37d;
  --cocoa: #4a3026;
  --panel: #5c3d30;
  --panel-raised: #6e4a3a;
  --accent: #e09e5c;
  --accent-soft: #a36e4f;
  --success: #c7d18c;
  font-family: "Avenir Next", Avenir, "Trebuchet MS", system-ui, sans-serif;
  background: var(--cocoa);
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

[hidden] {
  display: none !important;
}

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  background: #352219;
  touch-action: pan-x pan-y;
}

body {
  min-height: 100svh;
  overscroll-behavior: none;
}

button,
input {
  font: inherit;
}

input,
textarea {
  -webkit-user-select: text;
  user-select: text;
}

button {
  cursor: pointer;
  touch-action: manipulation;
}

body.intro-active {
  overflow: hidden;
}

body.intro-active .game-shell {
  opacity: 0;
  filter: blur(16px) brightness(0.55);
  transform: scale(1.035);
}

.game-shell {
  transition:
    opacity 720ms ease,
    filter 720ms ease,
    transform 900ms cubic-bezier(0.16, 0.84, 0.18, 1);
}

.intro-screen {
  position: fixed;
  z-index: 100;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding:
    calc(env(safe-area-inset-top) + 28px)
    18px
    calc(env(safe-area-inset-bottom) + 24px);
  color: var(--cream);
  background:
    radial-gradient(circle at 50% 40%, rgb(110 74 58 / 78%), transparent 38%),
    linear-gradient(160deg, #2b1b15 0%, var(--cocoa) 52%, #241711 100%);
  opacity: 1;
  transition:
    opacity 850ms cubic-bezier(0.7, 0, 0.84, 0),
    filter 850ms ease,
    transform 960ms cubic-bezier(0.7, 0, 0.84, 0);
}

.intro-screen::after {
  position: absolute;
  z-index: 2;
  inset: 0;
  background:
    radial-gradient(circle at 50% 49%, rgb(250 230 191 / 24%), transparent 27%),
    linear-gradient(90deg, transparent, rgb(199 209 140 / 11%), transparent);
  content: "";
  opacity: 0;
  pointer-events: none;
}

.intro-screen.intro-finishing {
  opacity: 0;
  filter: blur(12px) brightness(1.16);
  pointer-events: none;
  transform: scale(1.045);
}

.intro-aurora {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(120vw, 760px);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    conic-gradient(
      from 180deg,
      transparent,
      rgb(224 158 92 / 17%),
      transparent 34%,
      rgb(199 209 140 / 12%),
      transparent 72%
    );
  filter: blur(28px);
  animation: intro-aurora-turn 16s linear infinite;
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.intro-stage {
  position: relative;
  width: min(100%, 620px);
  height: min(690px, calc(100svh - 64px));
  min-height: 540px;
}

.intro-equations,
.intro-matrix {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(100%, 480px);
  transform: translate(-50%, -50%);
}

.intro-equations {
  min-height: 250px;
}

.intro-equation-set {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: center;
  gap: 23px;
  transition:
    opacity 390ms cubic-bezier(0.7, 0, 0.84, 0),
    filter 410ms ease,
    transform 520ms cubic-bezier(0.16, 1, 0.3, 1);
}

.intro-equation-set p {
  margin: 0;
  color: var(--cream);
  font-size: clamp(24px, 7.2vw, 38px);
  font-weight: 650;
  letter-spacing: -0.04em;
  line-height: 1;
  text-align: center;
  text-shadow: 0 4px 22px rgb(0 0 0 / 28%);
}

.intro-equation-set.original {
  opacity: 1;
}

.intro-screen.intro-running:not(.intro-expanded) .intro-equation-set.original p:nth-child(1) {
  animation: intro-equation-windup-left 340ms cubic-bezier(0.76, 0, 0.18, 1) both;
}

.intro-screen.intro-running:not(.intro-expanded) .intro-equation-set.original p:nth-child(2) {
  animation: intro-equation-windup-center 340ms cubic-bezier(0.76, 0, 0.18, 1) 24ms both;
}

.intro-screen.intro-running:not(.intro-expanded) .intro-equation-set.original p:nth-child(3) {
  animation: intro-equation-windup-right 340ms cubic-bezier(0.76, 0, 0.18, 1) 48ms both;
}

.intro-equation-set.expanded {
  opacity: 0;
  filter: blur(10px);
  transform: translateY(16px) scale(0.97);
}

.intro-screen.intro-expanded .intro-equation-set.original {
  opacity: 0;
  filter: blur(9px);
  transform: translateY(-16px) scale(1.025);
}

.intro-screen.intro-expanded .intro-equation-set.expanded {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0) scale(1);
}

.intro-equation-set .inserted {
  display: inline-block;
  color: var(--success);
  opacity: 0;
  transform: translateY(9px) scale(0.72);
}

.intro-screen.intro-expanded .intro-equation-set .inserted {
  animation: intro-insert-token 330ms cubic-bezier(0.08, 1.42, 0.18, 1) forwards;
}

.intro-screen.intro-expanded .intro-equation-set p:nth-child(2) .inserted {
  animation-delay: 55ms;
}

.intro-screen.intro-expanded .intro-equation-set p:nth-child(3) .inserted {
  animation-delay: 105ms;
}

.intro-coefficient,
.intro-variable,
.intro-operator,
.intro-rhs-source {
  display: inline-block;
}

.intro-variable {
  color: var(--accent);
  font-style: italic;
}

.intro-matrix {
  display: grid;
  justify-items: center;
  opacity: 0;
  filter: blur(13px);
  pointer-events: none;
  transform: translate(-50%, -46%) scale(0.92);
  transition:
    opacity 340ms ease,
    filter 390ms ease,
    transform 520ms cubic-bezier(0.08, 1.08, 0.18, 1);
}

.intro-screen.matrix-forming .intro-equations {
  opacity: 0;
  filter: blur(12px);
  transform: translate(-50%, -55%) scale(1.06);
  transition:
    opacity 330ms cubic-bezier(0.7, 0, 0.84, 0),
    filter 360ms ease,
    transform 480ms cubic-bezier(0.7, 0, 0.84, 0);
}

.intro-screen.matrix-forming .intro-matrix {
  opacity: 1;
  filter: blur(0);
  transform: translate(-50%, -50%) scale(1);
}

.intro-matrix-title {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 48px);
  justify-items: center;
  margin: 0 38px 15px 0;
  color: var(--accent);
  font-size: 23px;
  font-weight: 800;
  font-style: italic;
  letter-spacing: 0;
  line-height: 1;
  text-transform: lowercase;
}

.intro-title-letter {
  position: relative;
  min-width: 34px;
  text-align: center;
  opacity: 0;
  transform: translateY(12px);
  transition:
    color 420ms ease,
    opacity 420ms ease,
    transform 620ms cubic-bezier(0.16, 1.14, 0.24, 1);
}

.intro-title-letter.landed {
  opacity: 1;
  transform: translateY(0);
}

.intro-title-letter::before {
  position: absolute;
  bottom: calc(100% + 7px);
  left: 50%;
  color: var(--success);
  content: attr(data-solution-value);
  font-size: 12px;
  font-style: normal;
  opacity: 0;
  transform: translate(-50%, 7px) scale(0.65);
  transition:
    opacity 420ms ease,
    transform 560ms cubic-bezier(0.16, 1.14, 0.24, 1);
}

.intro-title-letter.solution-landed::before {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}

.intro-rref-prefix {
  position: absolute;
  top: 0;
  right: 100%;
  color: var(--success);
  font-style: normal;
  opacity: 0;
  transform: translateX(20px) rotate(-18deg) scale(0.2);
}

.intro-screen.rref-complete .intro-matrix-title {
  color: var(--cream);
  font-style: normal;
  text-transform: uppercase;
  text-shadow: 0 0 22px rgb(250 230 191 / 38%);
}

.intro-screen.rref-complete .intro-title-letter {
  animation: intro-title-pop 620ms cubic-bezier(0.12, 1.28, 0.24, 1) both;
}

.intro-screen.rref-complete .intro-rref-prefix {
  animation: intro-r-pop 720ms cubic-bezier(0.12, 1.34, 0.24, 1) forwards;
}

.intro-solution-values {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.intro-matrix-frame {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: 12px;
  padding: 9px 4px;
}

.intro-bracket {
  width: 12px;
  border-top: 2px solid var(--cream);
  border-bottom: 2px solid var(--cream);
  opacity: 0;
  transform: scaleY(0.18);
}

.intro-bracket.left {
  border-left: 2px solid var(--cream);
  border-radius: 8px 0 0 8px;
  transform: translateX(86px) scaleY(0.12) scaleX(0.55);
}

.intro-bracket.right {
  border-right: 2px solid var(--cream);
  border-radius: 0 8px 8px 0;
  transform: translateX(-86px) scaleY(0.12) scaleX(0.55);
}

.intro-screen.matrix-forming .intro-bracket.left {
  animation: intro-bracket-enter-left 560ms cubic-bezier(0.08, 1.18, 0.18, 1) 40ms forwards;
}

.intro-screen.matrix-forming .intro-bracket.right {
  animation: intro-bracket-enter-right 560ms cubic-bezier(0.08, 1.18, 0.18, 1) 40ms forwards;
}

.intro-screen.matrix-ready .intro-bracket.left,
.intro-screen.matrix-ready .intro-bracket.right {
  opacity: 0.86;
  transform: translateX(0) scaleY(1) scaleX(1);
  animation: none;
}

.intro-screen.matrix-impact::after {
  animation: intro-impact-flash 310ms cubic-bezier(0.16, 1, 0.3, 1);
}

.intro-screen.matrix-impact .intro-bracket.left {
  animation: intro-bracket-impact-left 360ms cubic-bezier(0.16, 1.22, 0.24, 1);
}

.intro-screen.matrix-impact .intro-bracket.right {
  animation: intro-bracket-impact-right 360ms cubic-bezier(0.16, 1.22, 0.24, 1);
}

.intro-screen.matrix-impact .intro-matrix-grid {
  animation: intro-grid-impact 350ms cubic-bezier(0.12, 1.18, 0.24, 1);
}

.intro-matrix-grid {
  display: grid;
  gap: 13px;
  padding: 7px 0;
}

.intro-matrix-row {
  display: grid;
  grid-template-columns: repeat(3, 48px) 60px;
  align-items: center;
}

.intro-matrix-cell {
  display: grid;
  min-height: 34px;
  place-items: center;
  color: var(--cream);
  font-size: 24px;
  font-weight: 720;
  font-variant-numeric: tabular-nums;
  opacity: 0;
  transform: translateY(-16px) scale(0.7);
  transition:
    color 260ms ease,
    opacity 360ms ease,
    text-shadow 360ms ease,
    transform 500ms cubic-bezier(0.16, 1.12, 0.24, 1);
}

.intro-matrix-cell.rhs {
  border-left: 1px solid rgb(199 163 125 / 60%);
  color: var(--muted-cream);
}

.intro-matrix-cell.landed,
.intro-matrix-cell.value-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.intro-matrix-cell.changing {
  color: var(--success);
  text-shadow: 0 0 18px rgb(199 209 140 / 60%);
}

.intro-operation {
  min-height: 18px;
  margin: 22px 0 0;
  color: var(--muted-cream);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-align: center;
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 320ms ease,
    transform 420ms ease;
}

.intro-operation.visible {
  opacity: 1;
  transform: translateY(0);
}

.intro-screen.matrix-impact .intro-operation.visible {
  color: var(--success);
  letter-spacing: 0.16em;
  text-shadow: 0 0 16px rgb(199 209 140 / 40%);
}

.intro-screen.rref-complete .intro-bracket.left {
  animation: intro-bracket-lock-left 600ms cubic-bezier(0.12, 1.35, 0.22, 1) forwards;
}

.intro-screen.rref-complete .intro-bracket.right {
  animation: intro-bracket-lock-right 600ms cubic-bezier(0.12, 1.35, 0.22, 1) forwards;
}

.intro-screen.rref-complete .intro-matrix-grid {
  animation: intro-grid-lock 650ms cubic-bezier(0.12, 1.28, 0.24, 1);
}

.intro-screen.rref-complete::after {
  animation: intro-final-flash 720ms ease-out;
}

.intro-begin {
  position: absolute;
  bottom: 4%;
  left: 50%;
  display: grid;
  width: min(260px, 78vw);
  min-height: 54px;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgb(250 230 191 / 30%);
  border-radius: 18px;
  color: var(--cocoa);
  background: var(--accent);
  box-shadow:
    0 18px 36px rgb(0 0 0 / 30%),
    inset 0 -2px 0 rgb(74 48 38 / 22%);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.17em;
  opacity: 0;
  transform: translateX(-50%) translateY(14px);
  animation: intro-begin-in 760ms cubic-bezier(0.16, 1, 0.24, 1) 700ms forwards;
}

.intro-begin i {
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 25%, rgb(255 255 255 / 30%) 48%, transparent 70%);
  transform: translateX(-120%);
  animation: intro-button-sheen 2.8s ease 1.5s infinite;
}

.intro-begin:active {
  transform: translateX(-50%) translateY(2px) scale(0.985);
}

.intro-screen.intro-running .intro-begin {
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(18px) scale(0.96);
  animation: none;
  transition:
    opacity 260ms ease,
    transform 320ms ease;
}

.intro-skip {
  position: absolute;
  z-index: 3;
  top: calc(env(safe-area-inset-top) + 18px);
  right: 18px;
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid rgb(199 163 125 / 35%);
  border-radius: 10px;
  color: var(--muted-cream);
  background: rgb(74 48 38 / 52%);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.12em;
  opacity: 0;
  pointer-events: none;
  transition: opacity 320ms ease;
}

.intro-screen.intro-running .intro-skip {
  opacity: 1;
  pointer-events: auto;
}

.intro-flyer {
  position: fixed;
  z-index: 110;
  display: grid;
  place-items: center;
  margin: 0;
  color: var(--cream);
  font-size: 24px;
  font-weight: 760;
  line-height: 1;
  pointer-events: none;
  text-shadow: 0 6px 18px rgb(0 0 0 / 35%);
}

.intro-flyer.variable {
  color: var(--accent);
  font-style: italic;
}

.intro-flyer.solution {
  color: var(--success);
  font-size: 20px;
  text-shadow: 0 0 18px rgb(199 209 140 / 68%);
}

@keyframes intro-aurora-turn {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes intro-insert-token {
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes intro-equation-windup-left {
  0% { transform: translateX(0) scale(1); }
  45% { transform: translateX(-13px) scale(0.97); }
  100% { transform: translateX(5px) scale(1.025); }
}

@keyframes intro-equation-windup-center {
  0% { transform: scale(1); }
  45% { transform: scale(0.94); filter: brightness(0.9); }
  100% { transform: scale(1.04); filter: brightness(1.18); }
}

@keyframes intro-equation-windup-right {
  0% { transform: translateX(0) scale(1); }
  45% { transform: translateX(13px) scale(0.97); }
  100% { transform: translateX(-5px) scale(1.025); }
}

@keyframes intro-bracket-enter-left {
  0% { opacity: 0; transform: translateX(86px) scaleY(0.12) scaleX(0.55); }
  54% { opacity: 1; transform: translateX(-13px) scaleY(1.09) scaleX(1.08); }
  76% { transform: translateX(5px) scaleY(0.96) scaleX(0.97); }
  100% { opacity: 0.86; transform: translateX(0) scaleY(1) scaleX(1); }
}

@keyframes intro-bracket-enter-right {
  0% { opacity: 0; transform: translateX(-86px) scaleY(0.12) scaleX(0.55); }
  54% { opacity: 1; transform: translateX(13px) scaleY(1.09) scaleX(1.08); }
  76% { transform: translateX(-5px) scaleY(0.96) scaleX(0.97); }
  100% { opacity: 0.86; transform: translateX(0) scaleY(1) scaleX(1); }
}

@keyframes intro-bracket-impact-left {
  0% { opacity: 0.86; transform: translateX(0) scaleY(1); }
  22% { opacity: 1; transform: translateX(9px) scaleY(0.9); }
  55% { transform: translateX(-12px) scaleY(1.1); }
  100% { opacity: 0.86; transform: translateX(0) scaleY(1); }
}

@keyframes intro-bracket-impact-right {
  0% { opacity: 0.86; transform: translateX(0) scaleY(1); }
  22% { opacity: 1; transform: translateX(-9px) scaleY(0.9); }
  55% { transform: translateX(12px) scaleY(1.1); }
  100% { opacity: 0.86; transform: translateX(0) scaleY(1); }
}

@keyframes intro-grid-impact {
  0% { filter: brightness(1); transform: scale(1); }
  26% { filter: brightness(1.4); transform: scale(0.965) skewX(-1.5deg); }
  58% { filter: brightness(1.12); transform: scale(1.035) skewX(0.7deg); }
  100% { filter: brightness(1); transform: scale(1); }
}

@keyframes intro-impact-flash {
  0% { opacity: 0; transform: scaleX(0.2); }
  22% { opacity: 0.62; transform: scaleX(1); }
  100% { opacity: 0; transform: scaleX(1.1); }
}

@keyframes intro-bracket-lock-left {
  0% { opacity: 0.86; transform: translateX(0) scaleY(1); }
  34% { opacity: 1; transform: translateX(17px) scaleY(0.78); filter: brightness(1.8); }
  68% { transform: translateX(-16px) scaleY(1.15); }
  100% { opacity: 1; transform: translateX(-5px) scaleY(1.06); filter: brightness(1.2); }
}

@keyframes intro-bracket-lock-right {
  0% { opacity: 0.86; transform: translateX(0) scaleY(1); }
  34% { opacity: 1; transform: translateX(-17px) scaleY(0.78); filter: brightness(1.8); }
  68% { transform: translateX(16px) scaleY(1.15); }
  100% { opacity: 1; transform: translateX(5px) scaleY(1.06); filter: brightness(1.2); }
}

@keyframes intro-grid-lock {
  0% { transform: scale(1); }
  30% { transform: scale(0.91); filter: brightness(1.55); }
  58% { transform: scale(1.08); }
  100% { transform: scale(1); filter: brightness(1); }
}

@keyframes intro-final-flash {
  0% { opacity: 0; }
  18% { opacity: 0.9; }
  100% { opacity: 0; }
}

@keyframes intro-title-pop {
  0% { transform: translateY(0) scale(1); }
  45% { transform: translateY(-7px) scale(1.22); }
  100% { transform: translateY(0) scale(1); }
}

@keyframes intro-r-pop {
  0% { opacity: 0; transform: translateX(20px) rotate(-18deg) scale(0.2); }
  58% { opacity: 1; transform: translateX(-5px) rotate(4deg) scale(1.18); }
  100% { opacity: 1; transform: translateX(0) rotate(0) scale(1); }
}

@keyframes intro-begin-in {
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

@keyframes intro-button-sheen {
  0%, 42% { transform: translateX(-120%); }
  72%, 100% { transform: translateX(120%); }
}

@media (max-height: 660px) {
  .intro-stage {
    height: calc(100svh - 42px);
    min-height: 430px;
  }

  .intro-kicker {
    top: 0;
  }

  .intro-equations {
    min-height: 205px;
  }

  .intro-equation-set {
    gap: 16px;
  }

  .intro-equation-set p {
    font-size: clamp(21px, 6.6vw, 31px);
  }

  .intro-matrix-title {
    margin-bottom: 10px;
  }

  .intro-matrix-grid {
    gap: 8px;
  }

  .intro-matrix-cell {
    min-height: 28px;
    font-size: 21px;
  }

  .intro-operation {
    margin-top: 14px;
  }

  .intro-begin {
    min-height: 48px;
  }
}

.game-shell {
  isolation: isolate;
  position: relative;
  width: min(100%, 460px);
  min-height: 100svh;
  margin: 0 auto;
  overflow-x: hidden;
  overflow-y: auto;
  padding:
    calc(env(safe-area-inset-top) + 27px)
    max(20px, 6vw)
    calc(env(safe-area-inset-bottom) + 54px);
  color: var(--cream);
  background: var(--cocoa);
}

.account-gate {
  position: fixed;
  z-index: 10;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgb(53 34 25 / 86%);
  backdrop-filter: blur(10px);
}

.account-card {
  width: min(100%, 330px);
  padding: 20px;
  border: 1px solid rgb(163 110 79 / 78%);
  border-radius: 22px;
  color: var(--cream);
  background: rgb(92 61 48 / 98%);
  box-shadow: 0 26px 44px rgb(0 0 0 / 30%);
  animation: account-card-enter 680ms cubic-bezier(0.12, 1.14, 0.24, 1) both;
}

.account-card h2 {
  margin: 10px 0 0;
  font-size: 28px;
  letter-spacing: -0.04em;
}

.account-copy,
.account-message,
.offline-copy {
  margin: 8px 0 0;
  color: var(--muted-cream);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
}

.player-name-input,
.create-account-button,
.play-offline-button,
.tutorial-button {
  width: 100%;
  min-height: 42px;
  margin-top: 12px;
  border: 1px solid var(--accent-soft);
  border-radius: 12px;
  color: var(--cream);
  background: var(--panel-raised);
  font-weight: 800;
}

.player-name-input {
  padding: 0 12px;
  outline: none;
  text-align: center;
}

.player-name-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgb(224 158 92 / 22%);
}

.create-account-button {
  color: var(--cocoa);
  background: var(--accent);
}

.create-account-button:disabled {
  opacity: 0.58;
}

.account-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 13px 0 0;
  color: var(--muted-cream);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.14em;
}

.account-divider::before,
.account-divider::after {
  height: 1px;
  flex: 1;
  background: rgb(199 163 125 / 32%);
  content: "";
}

.play-offline-button {
  margin-top: 10px;
  border-color: rgb(199 163 125 / 58%);
  color: var(--cream);
  background: rgb(74 48 38 / 72%);
}

.play-offline-button:active {
  transform: translateY(1px) scale(0.99);
}

.tutorial-button {
  margin-top: 13px;
  border-color: rgb(199 209 140 / 55%);
  color: var(--success);
  background: rgb(74 48 38 / 58%);
  letter-spacing: 0.08em;
}

.tutorial-button:active {
  transform: translateY(1px) scale(0.99);
}

.offline-copy {
  text-align: center;
  font-size: 10px;
}

.offline-exit-dialog {
  position: fixed;
  z-index: 130;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgb(35 22 17 / 88%);
  backdrop-filter: blur(14px);
}

.offline-exit-card {
  width: min(100%, 350px);
  padding: 22px;
  border: 1px solid rgb(224 158 92 / 68%);
  border-radius: 24px;
  color: var(--cream);
  background: rgb(92 61 48 / 99%);
  box-shadow: 0 28px 58px rgb(0 0 0 / 42%);
  animation: account-card-enter 440ms cubic-bezier(0.12, 1.14, 0.24, 1) both;
}

.offline-exit-card h2 {
  margin: 9px 0 0;
  font-size: 27px;
  letter-spacing: -0.04em;
}

.offline-exit-copy {
  margin: 9px 0 2px;
  color: var(--muted-cream);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.45;
}

.offline-save-account,
.offline-discard-progress,
.offline-cancel-exit {
  width: 100%;
  min-height: 42px;
  margin-top: 10px;
  border: 1px solid var(--accent-soft);
  border-radius: 12px;
  font: inherit;
  font-size: 12px;
  font-weight: 900;
}

.offline-save-account {
  color: var(--cocoa);
  background: var(--accent);
}

.offline-discard-progress {
  border-color: rgb(220 126 104 / 65%);
  color: #ffd8ce;
  background: rgb(111 54 45 / 78%);
}

.offline-cancel-exit {
  color: var(--cream);
  background: rgb(74 48 38 / 70%);
}

.offline-exit-card button:disabled,
.offline-exit-card input:disabled {
  opacity: 0.52;
}

.tutorial-guide {
  position: fixed;
  z-index: 40;
  inset: 0;
  pointer-events: none;
}

.tutorial-card {
  position: absolute;
  left: 50%;
  width: min(calc(100vw - 32px), 390px);
  padding: 16px 17px 15px;
  border: 1px solid rgb(199 209 140 / 68%);
  border-radius: 19px;
  color: var(--cream);
  background:
    radial-gradient(circle at 88% 10%, rgb(199 209 140 / 13%), transparent 34%),
    rgb(74 48 38 / 97%);
  box-shadow:
    0 22px 48px rgb(20 12 9 / 42%),
    0 0 0 1px rgb(250 230 191 / 5%),
    inset 0 1px 0 rgb(250 230 191 / 8%);
  pointer-events: auto;
  transform: translateX(-50%);
}

.tutorial-guide[data-placement="top"] .tutorial-card {
  top: calc(env(safe-area-inset-top) + 52px);
  animation: tutorial-card-enter-top 480ms cubic-bezier(0.12, 1.18, 0.24, 1) both;
}

.tutorial-guide[data-placement="bottom"] .tutorial-card {
  bottom: calc(env(safe-area-inset-bottom) + 54px);
  animation: tutorial-card-enter-bottom 480ms cubic-bezier(0.12, 1.18, 0.24, 1) both;
}

.tutorial-card-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.tutorial-progress {
  margin: 0;
  color: var(--success);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.16em;
}

.tutorial-exit {
  min-width: 48px;
  min-height: 25px;
  padding: 0 9px;
  border: 1px solid rgb(199 163 125 / 42%);
  border-radius: 8px;
  color: var(--muted-cream);
  background: rgb(92 61 48 / 68%);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.1em;
}

.tutorial-card h2 {
  margin: 9px 0 0;
  font-size: 22px;
  letter-spacing: -0.035em;
}

.tutorial-copy {
  margin: 7px 0 0;
  color: var(--muted-cream);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.45;
}

.tutorial-action {
  margin: 10px 0 0;
  padding: 8px 10px;
  border: 1px solid rgb(224 158 92 / 38%);
  border-radius: 10px;
  color: var(--cream);
  background: rgb(110 74 58 / 66%);
  font-size: 11px;
  font-weight: 900;
  line-height: 1.35;
}

.tutorial-next {
  width: 100%;
  min-height: 38px;
  margin-top: 11px;
  border: 0;
  border-radius: 11px;
  color: var(--cocoa);
  background: var(--accent);
  box-shadow: inset 0 -3px 0 rgb(74 48 38 / 20%);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.tutorial-next:active,
.tutorial-exit:active {
  transform: translateY(1px) scale(0.98);
}

body.tutorial-active .settings-button,
body.tutorial-active .settings-menu,
body.tutorial-active .version-label,
body.tutorial-active .reset-button {
  opacity: 0.2;
  pointer-events: none;
}

body.tutorial-active .matrix-row {
  overflow: visible;
  padding-left: 23px;
}

body.tutorial-active .matrix-row::before {
  position: absolute;
  top: 5px;
  left: 6px;
  color: rgb(199 163 125 / 78%);
  content: attr(data-tutorial-label);
  font-size: 7px;
  font-weight: 900;
  letter-spacing: 0.08em;
}

body.tutorial-active .matrix-row:disabled,
body.tutorial-active .operation-button:disabled,
body.tutorial-active .factor-input:disabled {
  opacity: 0.38;
  filter: saturate(0.7);
}

body.tutorial-active .matrix-row.selected:disabled {
  opacity: 0.78;
  filter: none;
}

body.tutorial-active .tutorial-target {
  z-index: 42;
  opacity: 1 !important;
  filter: none !important;
  outline: 2px solid rgb(199 209 140 / 72%);
  outline-offset: 3px;
  box-shadow:
    0 0 0 6px rgb(199 209 140 / 9%),
    0 0 24px rgb(199 209 140 / 38%);
  animation: tutorial-target-pulse 1.25s ease-in-out infinite;
}

.tutorial-target.matrix-row::before {
  color: var(--success);
}

.top-glow {
  position: absolute;
  z-index: -1;
  top: 85px;
  left: 50%;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  background: rgb(102 69 54 / 42%);
  transform: translateX(-50%);
}

.play-view {
  transition:
    opacity 360ms ease,
    filter 360ms ease,
    transform 520ms cubic-bezier(0.18, 0.82, 0.22, 1);
}

.game-shell.leaderboard-visible .play-view {
  opacity: 0;
  filter: saturate(0.85) brightness(0.78);
  pointer-events: none;
  transform: translateX(-24%);
}

.game-shell.results-next .play-view {
  opacity: 0;
  transform: translateX(18%);
}

.game-shell.play-entering .play-view {
  opacity: 0;
  transform: translateX(24%);
}

.game-shell.leaderboard-visible .settings-button,
.game-shell.leaderboard-visible .settings-menu,
.game-shell.leaderboard-visible .version-label {
  opacity: 0;
  pointer-events: none;
}

.hud {
  display: flex;
  justify-content: space-between;
  color: var(--cream);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.hud span {
  display: inline-block;
  transform-origin: center;
}

.hud .hud-bump {
  animation: hud-number-bump 420ms cubic-bezier(0.12, 1.3, 0.22, 1);
}

.title-block {
  margin-top: 40px;
  text-align: center;
}

h1 {
  margin: 0;
  color: var(--cream);
  font-size: 29px;
  font-weight: 700;
  letter-spacing: -0.04em;
}

.title-block p {
  margin: 5px 0 0;
  color: var(--muted-cream);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.matrix-stage {
  isolation: isolate;
  position: relative;
  min-height: 232px;
  margin-top: 36px;
  padding: 23px 12px;
  border: 1px solid rgb(163 110 79 / 78%);
  border-radius: 22px;
  background: rgb(92 61 48 / 94%);
  box-shadow:
    0 5px 0 rgb(0 0 0 / 14%),
    0 28px 28px -30px rgb(224 158 92 / 60%);
  transition:
    width 900ms cubic-bezier(0.65, 0, 0.2, 1),
    min-height 820ms cubic-bezier(0.65, 0, 0.2, 1),
    padding 820ms cubic-bezier(0.65, 0, 0.2, 1),
    border-radius 620ms ease,
    border-color 260ms ease,
    box-shadow 300ms ease,
    transform 300ms cubic-bezier(0.12, 1.12, 0.24, 1);
}

.matrix-stage::after {
  position: absolute;
  z-index: -1;
  inset: -1px;
  border: 1px solid var(--accent);
  border-radius: inherit;
  box-shadow: 0 0 28px rgb(224 158 92 / 28%);
  content: "";
  opacity: 0;
  pointer-events: none;
  transform: scale(0.96);
}

.matrix-stage.operation-impact::after {
  animation: gameplay-stage-impact 560ms cubic-bezier(0.12, 1.1, 0.24, 1);
}

.matrix-stage.swap-impact {
  animation: gameplay-swap-stage 600ms cubic-bezier(0.12, 1.15, 0.24, 1);
}

.matrix-stage.reset-impact {
  animation: gameplay-reset-stage 680ms cubic-bezier(0.12, 1.12, 0.24, 1);
}

.matrix {
  display: grid;
  gap: 10px;
  transition:
    width 760ms cubic-bezier(0.65, 0, 0.2, 1),
    gap 560ms ease,
    opacity 300ms ease,
    filter 340ms ease,
    transform 420ms cubic-bezier(0.65, 0, 0.2, 1);
}

.matrix.solution-source-hidden {
  opacity: 0;
  filter: blur(5px);
  pointer-events: none;
  transform: scale(0.9);
}

.matrix-stage.solution-revealing {
  border-color: rgb(199 209 140 / 62%);
  box-shadow:
    0 5px 0 rgb(0 0 0 / 14%),
    0 24px 38px -28px rgb(199 209 140 / 58%);
}

.matrix-stage.direct-solution-final {
  margin-right: auto;
  margin-left: auto;
  padding: clamp(15px, 2vw, 20px);
  border-radius: 20px;
  background:
    radial-gradient(circle at 50% 42%, rgb(199 209 140 / 8%), transparent 60%),
    rgb(92 61 48 / 98%);
  box-shadow:
    0 5px 0 rgb(0 0 0 / 14%),
    0 26px 42px -28px rgb(199 209 140 / 62%),
    inset 0 0 28px rgb(199 209 140 / 6%);
  animation: direct-solution-stage-settle 760ms cubic-bezier(0.12, 1.26, 0.24, 1);
}

.matrix-stage.direct-variables-locked::after {
  animation: direct-variable-lock-flash 720ms cubic-bezier(0.12, 1.2, 0.24, 1);
}

.direct-solution-flyer {
  position: fixed;
  z-index: 120;
  display: grid;
  place-items: center;
  color: var(--success);
  font-size: clamp(18px, 5.4vw, 25px);
  font-weight: 880;
  line-height: 1;
  pointer-events: none;
  text-shadow: 0 0 18px rgb(199 209 140 / 55%);
}

.direct-solution-flyer::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 34px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgb(199 209 140 / 72%), transparent);
  box-shadow: 0 0 12px rgb(199 209 140 / 52%);
  content: "";
  opacity: 0.72;
  transform: translate(-50%, 13px);
}

.direct-landing-ring {
  position: fixed;
  z-index: 119;
  width: 14px;
  height: 14px;
  border: 1px solid rgb(199 209 140 / 78%);
  border-radius: 50%;
  box-shadow:
    0 0 12px rgb(199 209 140 / 62%),
    inset 0 0 8px rgb(250 230 191 / 48%);
  pointer-events: none;
  animation: direct-landing-ring 600ms cubic-bezier(0.12, 1.05, 0.24, 1) forwards;
  transform: translate(-50%, -50%);
}

.matrix.direct-solution-transforming,
.matrix.direct-solution-compacted {
  pointer-events: none;
}

.matrix-value.direct-variable-cell {
  color: var(--success);
  font-weight: 880;
  text-shadow: 0 0 18px rgb(199 209 140 / 48%);
  animation: solution-variable-land 500ms cubic-bezier(0.12, 1.3, 0.24, 1);
}

.direct-solution-equals {
  display: none;
  place-items: center;
  color: var(--accent);
  font-size: clamp(20px, 5.7vw, 27px);
  font-weight: 850;
  opacity: 0;
}

.matrix.direct-solution-compacted {
  gap: 8px;
}

.matrix.direct-solution-compacted .matrix-row {
  grid-template-columns: minmax(0, 1fr) 36px minmax(0, 1fr);
  grid-template-rows: 1fr;
  align-items: center;
  height: 56px;
  min-height: 56px;
  padding-inline: 12px;
  border-color: rgb(199 209 140 / 34%);
  background: linear-gradient(90deg, rgb(110 74 58 / 96%), rgb(102 68 54 / 96%));
  box-shadow: inset 0 0 18px rgb(199 209 140 / 4%);
  animation: direct-solution-row-settle 720ms cubic-bezier(0.12, 1.25, 0.24, 1) both;
}

.matrix.direct-solution-compacted .matrix-row:nth-child(2) { animation-delay: 70ms; }
.matrix.direct-solution-compacted .matrix-row:nth-child(3) { animation-delay: 140ms; }

.matrix.direct-solution-compacted .direct-zero-cell {
  display: none;
}

.matrix.direct-solution-compacted .direct-variable-cell {
  grid-column: 1;
  grid-row: 1;
  line-height: 1;
}

.matrix.direct-solution-compacted .direct-solution-equals {
  display: grid;
  grid-column: 2;
  grid-row: 1;
  align-self: stretch;
  line-height: 1;
  animation: solution-equals-enter 520ms cubic-bezier(0.12, 1.34, 0.24, 1) forwards;
}

.matrix.direct-solution-compacted .direct-value-cell {
  grid-column: 3;
  grid-row: 1;
  line-height: 1;
  color: var(--cream);
  font-weight: 850;
  text-shadow: 0 0 14px rgb(250 230 191 / 14%);
}

.matrix.direct-solution-compacted .matrix-row:nth-child(2) .direct-solution-equals { animation-delay: 70ms; }
.matrix.direct-solution-compacted .matrix-row:nth-child(3) .direct-solution-equals { animation-delay: 140ms; }

.solution-reveal {
  --solution-cell: clamp(45px, 13vw, 82px);
  --solution-rhs: clamp(62px, 18vw, 112px);
  position: absolute;
  z-index: 7;
  inset: 8px;
  display: grid;
  place-items: center;
  color: var(--cream);
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px) scale(0.9);
  transition:
    opacity 360ms ease,
    transform 530ms cubic-bezier(0.12, 1.2, 0.24, 1);
}

.solution-reveal.ready {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.solution-reveal-content {
  position: relative;
  display: grid;
  justify-items: center;
}

.solution-variable-bank {
  display: grid;
  grid-template-columns: repeat(3, var(--solution-cell)) var(--solution-rhs);
  width: calc(var(--solution-cell) * 3 + var(--solution-rhs));
  margin: 0 0 9px;
  opacity: 0;
  transform: translateY(-18px) scale(0.92);
  transition:
    opacity 310ms ease,
    transform 500ms cubic-bezier(0.12, 1.22, 0.24, 1);
}

.solution-reveal.variables-visible .solution-variable-bank {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.solution-reveal.variables-landed .solution-variable-bank {
  opacity: 0;
  transform: translateY(12px) scale(0.88);
}

.solution-variable-source {
  display: grid;
  min-height: 28px;
  place-items: center;
  color: var(--accent);
  font-size: clamp(18px, 5vw, 25px);
  font-weight: 850;
  letter-spacing: -0.04em;
  text-shadow: 0 0 18px rgb(224 158 92 / 42%);
}

.solution-reveal.variables-visible .solution-variable-source {
  animation: solution-variable-hover 760ms ease-in-out infinite alternate;
}

.solution-variable-source:nth-child(2) { animation-delay: 80ms !important; }
.solution-variable-source:nth-child(3) { animation-delay: 160ms !important; }

.solution-matrix-shell {
  display: flex;
  align-items: stretch;
  gap: 11px;
  transition:
    opacity 460ms ease,
    transform 700ms cubic-bezier(0.65, 0, 0.2, 1);
}

.solution-bracket {
  width: 13px;
  border-top: 2px solid var(--cream);
  border-bottom: 2px solid var(--cream);
  opacity: 0.94;
  filter: drop-shadow(0 0 8px rgb(250 230 191 / 18%));
  transform-origin: center;
}

.solution-bracket.left {
  border-left: 2px solid var(--cream);
  border-radius: 8px 0 0 8px;
}

.solution-bracket.right {
  border-right: 2px solid var(--cream);
  border-radius: 0 8px 8px 0;
}

.solution-matrix-grid {
  display: grid;
  gap: 6px;
  transform-origin: center;
}

.solution-matrix-row {
  display: grid;
  grid-template-columns: repeat(3, var(--solution-cell)) var(--solution-rhs);
  height: 46px;
}

.solution-matrix-cell {
  display: grid;
  place-items: center;
  font-size: clamp(18px, 5.4vw, 25px);
  font-weight: 720;
  line-height: 1;
  transform-origin: center;
}

.solution-matrix-cell.rhs {
  border-left: 1px solid rgb(199 163 125 / 65%);
  color: var(--muted-cream);
}

.solution-matrix-cell.diagonal {
  color: var(--success);
  font-weight: 880;
}

.solution-matrix-cell.variable-landed {
  animation: solution-variable-land 500ms cubic-bezier(0.12, 1.3, 0.24, 1);
  text-shadow: 0 0 18px rgb(199 209 140 / 54%);
}

.solution-diagonal-one {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
}

.solution-equations {
  position: absolute;
  top: 37px;
  left: 50%;
  display: grid;
  width: min(230px, 68vw);
  gap: 6px;
  opacity: 0;
  transform: translateX(-50%);
  transition: opacity 220ms ease;
}

.solution-reveal.equations-forming .solution-equations {
  opacity: 1;
}

.solution-equation {
  display: grid;
  grid-template-columns: 1fr 28px 1fr;
  height: 46px;
  align-items: center;
  font-size: clamp(21px, 6vw, 29px);
  font-weight: 820;
  text-align: center;
}

.solution-equation-token {
  opacity: 0;
}

.solution-equation-token.visible {
  opacity: 1;
  animation: solution-equation-token-land 430ms cubic-bezier(0.12, 1.3, 0.24, 1);
}

.solution-equation-token.variable {
  color: var(--success);
}

.solution-equation-token.value {
  color: var(--cream);
}

.solution-equation-equals {
  color: var(--accent);
  opacity: 0;
  transform: scale(0.2) rotate(-12deg);
}

.solution-reveal.equations-forming .solution-equation-equals {
  animation: solution-equals-enter 520ms cubic-bezier(0.12, 1.34, 0.24, 1) forwards;
}

.solution-equation:nth-child(2) .solution-equation-equals { animation-delay: 80ms !important; }
.solution-equation:nth-child(3) .solution-equation-equals { animation-delay: 160ms !important; }

.solution-reveal.solution-final .solution-matrix-shell {
  opacity: 0;
  transform: scale(0.58);
}

.solution-reveal.solution-final .solution-equations {
  animation: solution-equations-settle 750ms cubic-bezier(0.12, 1.26, 0.24, 1) both;
}

.solution-flyer {
  position: fixed;
  z-index: 120;
  display: grid;
  place-items: center;
  color: var(--cream);
  font-size: clamp(18px, 5.4vw, 25px);
  font-weight: 850;
  line-height: 1;
  pointer-events: none;
  text-shadow: 0 5px 16px rgb(0 0 0 / 34%);
}

.solution-flyer.variable {
  color: var(--success);
  text-shadow: 0 0 18px rgb(199 209 140 / 55%);
}

.solution-flyer.morphing {
  color: var(--cream);
}

.matrix-row {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  height: 54px;
  min-height: 54px;
  padding: 0 6px;
  overflow: hidden;
  border: 1px solid rgb(163 110 79 / 72%);
  border-radius: 14px;
  color: var(--cream);
  background: var(--panel-raised);
  transition:
    border-color 180ms ease,
    background-color 180ms ease,
    box-shadow 220ms ease,
    filter 220ms ease,
    transform 220ms cubic-bezier(0.12, 1.16, 0.24, 1);
}

.matrix-row.selected {
  border-color: var(--accent);
  background: rgb(224 158 92 / 42%);
  box-shadow:
    0 0 0 1px rgb(224 158 92 / 24%),
    0 10px 24px rgb(28 17 13 / 24%),
    inset 0 0 18px rgb(224 158 92 / 12%);
  animation: gameplay-row-selected 430ms cubic-bezier(0.12, 1.3, 0.22, 1);
  transform: scale(1.018);
}

.matrix-row.selected .matrix-value {
  animation: gameplay-selected-value 520ms cubic-bezier(0.12, 1.25, 0.24, 1) both;
}

.matrix-row.selected .matrix-value:nth-child(2) { animation-delay: 32ms; }
.matrix-row.selected .matrix-value:nth-child(3) { animation-delay: 64ms; }
.matrix-row.selected .matrix-value:nth-child(4) { animation-delay: 96ms; }

.matrix-row.operation-source {
  animation: gameplay-source-charge 520ms cubic-bezier(0.12, 1.2, 0.24, 1);
}

.matrix-row.operation-target {
  animation: gameplay-target-receive 580ms cubic-bezier(0.12, 1.24, 0.24, 1);
}

.matrix-row.operation-scale {
  animation: gameplay-row-scale 560ms cubic-bezier(0.12, 1.28, 0.22, 1);
}

.matrix-value {
  display: grid;
  min-width: 0;
  place-items: center;
  overflow: hidden;
  color: var(--cream);
  font-size: 17px;
  font-weight: 600;
  line-height: 1;
  transform-origin: center;
}

.matrix-value:last-child {
  border-left: 1px solid rgb(199 163 125 / 58%);
}

.sparkle-layer {
  position: absolute;
  z-index: 9;
  inset: 0;
  overflow: visible;
  pointer-events: none;
}

.gameplay-confetti-piece {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--game-confetti-width);
  height: var(--game-confetti-height);
  border-radius: 2px;
  opacity: 0;
  background: var(--game-confetti-color);
  box-shadow: 0 0 9px color-mix(in srgb, var(--game-confetti-color) 44%, transparent);
  animation: gameplay-confetti-burst 1.7s cubic-bezier(0.12, 0.72, 0.2, 1)
    var(--game-confetti-delay) forwards;
}

.row-transfer-tracer {
  position: absolute;
  z-index: 6;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--success);
  box-shadow:
    0 0 0 5px rgb(199 209 140 / 13%),
    0 0 18px 5px rgb(199 209 140 / 60%);
  pointer-events: none;
  transform: translateY(0);
}

.gameplay-entering .hud {
  animation: gameplay-hud-enter 520ms cubic-bezier(0.12, 1.12, 0.24, 1) both;
}

.gameplay-entering .title-block {
  animation: gameplay-title-enter 600ms cubic-bezier(0.12, 1.2, 0.24, 1) 45ms both;
}

.gameplay-entering .matrix-stage {
  animation: gameplay-matrix-enter 690ms cubic-bezier(0.08, 1.22, 0.2, 1) 90ms both;
}

.gameplay-entering .control-card {
  animation: gameplay-controls-enter 620ms cubic-bezier(0.12, 1.16, 0.24, 1) 145ms both;
}

.gameplay-entering[data-entry-kind="reset"] .hud,
.gameplay-entering[data-entry-kind="reset"] .title-block,
.gameplay-entering[data-entry-kind="reset"] .control-card {
  animation: none;
}

.gameplay-entering[data-entry-kind="reset"] .matrix-row {
  animation: gameplay-reset-row 520ms cubic-bezier(0.12, 1.25, 0.22, 1) both;
}

.gameplay-entering[data-entry-kind="reset"] .matrix-row:nth-child(2) { animation-delay: 55ms; }
.gameplay-entering[data-entry-kind="reset"] .matrix-row:nth-child(3) { animation-delay: 110ms; }

.control-card {
  margin-top: 42px;
  padding: 14px;
  border: 1px solid rgb(163 110 79 / 72%);
  border-radius: 18px;
  background: rgb(92 61 48 / 94%);
}

.results-screen {
  position: fixed;
  z-index: 30;
  inset: 0;
  display: grid;
  align-content: center;
  justify-items: center;
  padding:
    calc(env(safe-area-inset-top) + 24px)
    20px
    calc(env(safe-area-inset-bottom) + 92px);
  opacity: 0;
  background:
    radial-gradient(circle at 50% 42%, rgb(102 69 54 / 58%), transparent 42%),
    var(--cocoa);
  box-shadow: -110vw 0 0 var(--cocoa);
  pointer-events: none;
  transform: translateX(100%);
  transition:
    opacity 320ms ease,
    transform 560ms cubic-bezier(0.18, 0.82, 0.22, 1);
}

.results-screen.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
}

.results-screen.exiting {
  opacity: 0;
  transform: translateX(-100%);
}

.results-card {
  position: relative;
  z-index: 2;
  width: min(100%, 430px);
  max-height: calc(100svh - 148px);
  padding: 16px;
  overflow: hidden auto;
  border: 1px solid rgb(163 110 79 / 72%);
  border-radius: 22px;
  background: rgb(92 61 48 / 96%);
  box-shadow: 0 24px 60px rgb(0 0 0 / 34%);
}

.result-view {
  width: 100%;
}

.score-view {
  min-height: 330px;
  display: grid;
  align-content: center;
}

.result-score-wrap {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 7px;
  margin-top: 15px;
  color: var(--success);
}

.result-score {
  font-size: clamp(46px, 15vw, 68px);
  font-weight: 800;
  letter-spacing: -0.08em;
  line-height: 0.9;
}

.result-score-label {
  color: var(--success);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
}

.result-stats {
  display: grid;
  gap: 8px;
  margin-top: 16px;
}

.result-stat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 36px;
  padding: 0 11px;
  border: 1px solid rgb(163 110 79 / 52%);
  border-radius: 12px;
  color: var(--muted-cream);
  background: rgb(110 74 58 / 72%);
  font-size: 10px;
  font-weight: 800;
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 260ms ease,
    transform 260ms cubic-bezier(0.18, 0.82, 0.22, 1);
}

.result-stat.revealed {
  opacity: 1;
  transform: translateY(0);
}

.result-stat strong {
  color: var(--cream);
}

.result-message {
  min-height: 16px;
  margin: 14px 0 0;
  color: var(--success);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-align: center;
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 260ms ease,
    transform 260ms cubic-bezier(0.18, 0.82, 0.22, 1);
}

.result-message.revealed {
  opacity: 1;
  transform: translateY(0);
}

.rank-summary {
  min-height: 18px;
  margin: 13px 0 0;
  color: var(--success);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-align: center;
}

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

.player-label,
.leaderboard-date {
  color: var(--muted-cream);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.1em;
}

.leaderboard-date {
  margin: 0;
  white-space: nowrap;
}

.leaderboard-title {
  margin: 0;
  color: var(--success);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-align: left;
}

.leaderboard-list {
  display: grid;
  gap: 7px;
  margin: 18px 0 0;
  padding: 0;
  perspective: 620px;
  list-style: none;
}

.leaderboard-row,
.leaderboard-empty,
.leaderboard-gap {
  min-height: 34px;
  border: 1px solid rgb(163 110 79 / 52%);
  border-radius: 11px;
  color: var(--cream);
  background: rgb(110 74 58 / 72%);
}

.leaderboard-row {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 72px 70px;
  align-items: center;
  gap: 6px;
  padding: 0 9px;
  font-size: 10px;
  font-weight: 800;
}

.results-screen .leaderboard-row,
.results-screen .leaderboard-empty,
.results-screen .leaderboard-gap {
  opacity: 0;
  transform: perspective(620px) rotateX(76deg) translateY(-12px) scale(0.97);
  transform-origin: center top;
  backface-visibility: hidden;
}

.results-screen .leaderboard-row.revealed,
.results-screen .leaderboard-empty.revealed,
.results-screen .leaderboard-gap.revealed {
  animation: casino-row-flip 560ms cubic-bezier(0.16, 0.9, 0.18, 1) both;
}

.results-screen .leaderboard-row.revealed.settled,
.results-screen .leaderboard-empty.revealed.settled,
.results-screen .leaderboard-gap.revealed.settled {
  opacity: 1;
  animation: none;
  transform: none;
}

.leaderboard-row.current-player {
  position: relative;
  z-index: 1;
  border-color: var(--accent);
  background: rgb(224 158 92 / 26%);
}

.leaderboard-row.score-climbing .leaderboard-score {
  color: var(--success);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 14px rgb(199 209 140 / 36%);
}

.leaderboard-row.rank-passing {
  z-index: 2;
  border-color: var(--success);
  background: rgb(199 209 140 / 24%);
  box-shadow: 0 8px 20px rgb(0 0 0 / 24%);
}

.leaderboard-row.rank-passed {
  filter: brightness(0.82);
}

.leaderboard-rank {
  color: var(--accent);
}

.leaderboard-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.leaderboard-solved,
.leaderboard-score {
  color: var(--muted-cream);
  text-align: right;
}

.leaderboard-empty,
.leaderboard-gap {
  display: grid;
  place-items: center;
  color: var(--muted-cream);
  font-size: 10px;
  font-weight: 800;
}

.leaderboard-message {
  min-height: 13px;
  margin: 9px 0 0;
  color: var(--success);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-align: center;
}

.leaderboard-confetti {
  position: fixed;
  z-index: 3;
  inset: 0;
  pointer-events: none;
}

.leaderboard-confetti-piece {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 12px;
  border-radius: 2px;
  opacity: 0;
  background: var(--confetti-color);
  animation: leaderboard-confetti 1.25s ease-out var(--confetti-delay) forwards;
}

.next-level-button {
  position: fixed;
  z-index: 4;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom) + 20px);
  width: min(340px, calc(100vw - 48px));
  min-height: 48px;
  border: 1px solid rgb(250 230 191 / 22%);
  border-radius: 16px;
  color: var(--cocoa);
  background: var(--accent);
  box-shadow:
    0 10px 22px rgb(0 0 0 / 24%),
    inset 0 -2px 0 rgb(74 48 38 / 24%);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.1em;
  transform: translateX(-50%);
}

.next-level-button:active {
  transform: translateX(-50%) translateY(2px);
}

.eyebrow {
  margin: 0;
  color: var(--muted-cream);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.operation-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
  margin-top: 9px;
}

.operation-button,
.factor-input {
  border: 1px solid transparent;
  border-radius: 10px;
  color: var(--cream);
  background: var(--panel-raised);
  font-weight: 700;
}

.operation-button {
  min-height: 34px;
  font-size: 12px;
  transition:
    background-color 180ms ease,
    box-shadow 220ms ease,
    color 180ms ease,
    transform 220ms cubic-bezier(0.12, 1.2, 0.24, 1);
}

.operation-button.active {
  color: var(--cocoa);
  background: var(--accent);
  box-shadow:
    0 5px 14px rgb(28 17 13 / 18%),
    inset 0 -2px 0 rgb(74 48 38 / 18%);
  transform: translateY(-1px);
}

.operation-button.mode-activated {
  animation: gameplay-mode-activated 420ms cubic-bezier(0.12, 1.3, 0.22, 1);
}

.operation-button:active {
  transform: translateY(1px) scale(0.96);
}

.factor-line {
  display: grid;
  grid-template-columns: 62px 1fr;
  align-items: center;
  gap: 0;
  margin-top: 10px;
}

.factor-input {
  width: 100%;
  min-height: 32px;
  border-color: var(--accent-soft);
  outline: none;
  font-size: 15px;
  text-align: center;
}

.factor-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgb(224 158 92 / 22%);
}

.factor-input.factor-accepted {
  animation: gameplay-factor-accepted 400ms cubic-bezier(0.12, 1.26, 0.22, 1);
}

.factor-input.invalid {
  border-color: var(--success);
}

.level-cleared {
  min-height: 14px;
  margin: 15px 0 0;
  color: var(--success);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-align: center;
}

.reset-button {
  position: absolute;
  right: max(20px, 6vw);
  bottom: calc(env(safe-area-inset-bottom) + 18px);
  width: 48px;
  height: 22px;
  border: 1px solid rgb(163 110 79 / 55%);
  border-radius: 7px;
  color: var(--muted-cream);
  background: rgb(92 61 48 / 76%);
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.08em;
  transition:
    border-color 180ms ease,
    color 180ms ease,
    transform 180ms ease;
}

.reset-button:active {
  border-color: var(--accent);
  color: var(--cream);
  transform: rotate(-7deg) scale(0.9);
}

.settings-button {
  position: absolute;
  z-index: 15;
  left: max(20px, 6vw);
  bottom: calc(env(safe-area-inset-bottom) + 16px);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid rgb(163 110 79 / 55%);
  border-radius: 7px;
  color: var(--muted-cream);
  background: rgb(92 61 48 / 76%);
}

.settings-button:hover,
.settings-button:focus-visible,
.settings-button.active {
  border-color: var(--accent);
  color: var(--cream);
  outline: none;
}

.settings-button:active {
  transform: translateY(1px) scale(0.98);
}

.settings-button span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 14px;
  line-height: 1;
  transform: translateY(-0.5px);
}

.settings-menu {
  position: absolute;
  z-index: 15;
  left: max(20px, 6vw);
  bottom: calc(env(safe-area-inset-bottom) + 54px);
  width: 148px;
  padding: 8px;
  border: 1px solid rgb(163 110 79 / 66%);
  border-radius: 13px;
  background: rgb(74 48 38 / 94%);
  box-shadow: 0 18px 38px rgb(0 0 0 / 30%);
}

.settings-menu:not([hidden]) {
  animation: gameplay-menu-enter 320ms cubic-bezier(0.12, 1.2, 0.24, 1) both;
  transform-origin: bottom left;
}

.settings-action,
.logout-button {
  width: 100%;
  min-height: 34px;
  border: 1px solid rgb(224 158 92 / 60%);
  border-radius: 10px;
  color: var(--cream);
  background: rgb(110 74 58 / 92%);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.settings-action {
  margin-bottom: 6px;
}

.settings-action:hover,
.settings-action:focus-visible,
.logout-button:hover,
.logout-button:focus-visible {
  border-color: var(--accent);
  background: var(--panel-raised);
  outline: none;
}

.logout-button:disabled {
  opacity: 0.45;
}

.settings-message {
  margin: 6px 2px 0;
  color: var(--muted-cream);
  font-size: 8px;
  font-weight: 700;
  line-height: 1.35;
}

.version-label {
  position: absolute;
  left: calc(max(20px, 6vw) + 40px);
  bottom: calc(env(safe-area-inset-bottom) + 23px);
  color: rgb(199 163 125 / 72%);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.game-shell.celebrating .play-view button,
.game-shell.celebrating .play-view input {
  pointer-events: none;
}

@keyframes account-card-enter {
  0% { opacity: 0; filter: blur(8px); transform: translateY(22px) scale(0.92); }
  66% { opacity: 1; filter: blur(0); transform: translateY(-4px) scale(1.025); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes gameplay-hud-enter {
  0% { opacity: 0; transform: translateY(-14px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes gameplay-title-enter {
  0% { opacity: 0; filter: blur(6px); transform: translateY(-8px) scale(0.94); }
  70% { opacity: 1; filter: blur(0); transform: translateY(2px) scale(1.025); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes gameplay-matrix-enter {
  0% { opacity: 0; filter: blur(10px); transform: translateY(22px) scale(0.88); }
  62% { opacity: 1; filter: blur(0); transform: translateY(-5px) scale(1.035); }
  82% { transform: translateY(2px) scale(0.99); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes gameplay-controls-enter {
  0% { opacity: 0; transform: translateY(24px) scale(0.96); }
  72% { opacity: 1; transform: translateY(-3px) scale(1.015); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes gameplay-reset-row {
  0% { opacity: 0; filter: blur(6px); transform: translateX(28px) rotateY(-18deg) scale(0.94); }
  68% { opacity: 1; filter: blur(0); transform: translateX(-5px) rotateY(3deg) scale(1.02); }
  100% { opacity: 1; transform: translateX(0) rotateY(0) scale(1); }
}

@keyframes gameplay-stage-impact {
  0% { opacity: 0; transform: scale(0.96); }
  26% { opacity: 0.75; transform: scale(1.025); }
  100% { opacity: 0; transform: scale(1.055); }
}

@keyframes gameplay-swap-stage {
  0% { border-color: rgb(163 110 79 / 78%); transform: scale(1); }
  30% { border-color: var(--success); transform: scale(0.985) rotate(-0.35deg); }
  62% { border-color: var(--accent); transform: scale(1.015) rotate(0.25deg); }
  100% { border-color: rgb(163 110 79 / 78%); transform: scale(1); }
}

@keyframes gameplay-reset-stage {
  0% { filter: saturate(0.5); transform: scale(0.98); }
  35% { filter: saturate(1.4) brightness(1.15); transform: scale(1.018); }
  100% { filter: saturate(1) brightness(1); transform: scale(1); }
}

@keyframes gameplay-row-selected {
  0% { box-shadow: 0 0 0 0 rgb(224 158 92 / 0%); transform: scale(1); }
  48% { box-shadow: 0 0 0 6px rgb(224 158 92 / 16%); transform: scale(1.03); }
  100% { transform: scale(1.018); }
}

@keyframes gameplay-selected-value {
  0% { color: var(--cream); transform: translateY(0) scale(1); }
  42% { color: white; transform: translateY(-3px) scale(1.16); }
  100% { color: var(--cream); transform: translateY(0) scale(1); }
}

@keyframes gameplay-source-charge {
  0% { border-color: rgb(163 110 79 / 72%); filter: brightness(1); transform: scale(1); }
  28% { border-color: var(--success); filter: brightness(1.3); transform: scale(1.035); }
  62% { filter: brightness(0.92); transform: scale(0.985); }
  100% { border-color: rgb(163 110 79 / 72%); filter: brightness(1); transform: scale(1); }
}

@keyframes gameplay-target-receive {
  0%, 28% { box-shadow: 0 0 0 0 rgb(199 209 140 / 0%); transform: scale(1); }
  54% { border-color: var(--success); box-shadow: 0 0 0 7px rgb(199 209 140 / 15%); transform: scale(1.045); }
  76% { transform: scale(0.985); }
  100% { box-shadow: 0 0 0 12px rgb(199 209 140 / 0%); transform: scale(1); }
}

@keyframes gameplay-row-scale {
  0% { filter: brightness(1); transform: scaleX(1); }
  24% { border-color: var(--success); filter: brightness(1.32); transform: scaleX(0.92) scaleY(1.06); }
  58% { transform: scaleX(1.045) scaleY(0.98); }
  100% { filter: brightness(1); transform: scale(1); }
}

@keyframes hud-number-bump {
  0% { color: var(--cream); transform: translateY(0) scale(1); }
  42% { color: var(--success); text-shadow: 0 0 14px rgb(199 209 140 / 48%); transform: translateY(-4px) scale(1.18); }
  100% { color: var(--cream); text-shadow: none; transform: translateY(0) scale(1); }
}

@keyframes gameplay-mode-activated {
  0% { transform: scale(0.9); }
  48% { box-shadow: 0 0 0 5px rgb(224 158 92 / 16%); transform: translateY(-2px) scale(1.08); }
  100% { transform: translateY(-1px) scale(1); }
}

@keyframes gameplay-factor-accepted {
  0% { transform: scale(1); }
  45% { border-color: var(--success); box-shadow: 0 0 0 4px rgb(199 209 140 / 15%); color: var(--success); transform: scale(1.055); }
  100% { transform: scale(1); }
}

@keyframes gameplay-menu-enter {
  0% { opacity: 0; filter: blur(5px); transform: translateY(9px) scale(0.88); }
  70% { opacity: 1; filter: blur(0); transform: translateY(-2px) scale(1.025); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes solution-variable-hover {
  0% { transform: translateY(0) scale(1); }
  100% { transform: translateY(-4px) scale(1.04); }
}

@keyframes solution-variable-land {
  0% { filter: brightness(1.8); transform: translateY(-8px) scale(1.35); }
  58% { transform: translateY(2px) scale(0.94); }
  100% { filter: brightness(1); transform: translateY(0) scale(1); }
}

@keyframes solution-equals-enter {
  0% { opacity: 0; transform: scale(0.2) rotate(-12deg); }
  70% { opacity: 1; transform: scale(1.18) rotate(3deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}

@keyframes solution-equation-token-land {
  0% { opacity: 0; filter: blur(3px); transform: scale(0.68); }
  68% { opacity: 1; filter: blur(0); transform: scale(1.12); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes solution-equations-settle {
  0% { filter: blur(2px); transform: translateX(-50%) scale(0.78); }
  64% { filter: blur(0); transform: translateX(-50%) scale(1.07); }
  100% { transform: translateX(-50%) scale(1); }
}

@keyframes gameplay-confetti-burst {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.2) rotate(0);
  }
  12% {
    opacity: 1;
  }
  70% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform:
      translate(
        calc(-50% + var(--game-confetti-x)),
        calc(-50% + var(--game-confetti-y))
      )
      scale(0.95)
      rotate(var(--game-confetti-rotate));
  }
}

@keyframes casino-row-flip {
  0% {
    opacity: 0;
    filter: brightness(1.35);
    transform: perspective(620px) rotateX(78deg) translateY(-13px) scale(0.96);
  }
  45% {
    opacity: 1;
    transform: perspective(620px) rotateX(-15deg) translateY(2px) scale(1.015);
  }
  72% {
    transform: perspective(620px) rotateX(6deg) translateY(0) scale(1);
  }
  100% {
    opacity: 1;
    filter: brightness(1);
    transform: perspective(620px) rotateX(0) translateY(0) scale(1);
  }
}

@keyframes direct-solution-stage-settle {
  0% {
    filter: brightness(1.12);
    transform: scale(0.985);
  }
  55% {
    border-color: var(--success);
    filter: brightness(1.2);
    transform: scale(1.012);
  }
  100% {
    filter: brightness(1);
    transform: scale(1);
  }
}

@keyframes direct-variable-lock-flash {
  0% { opacity: 0; transform: scale(0.94); }
  48% { opacity: 1; box-shadow: 0 0 36px rgb(199 209 140 / 44%); transform: scale(1.015); }
  100% { opacity: 0; transform: scale(1.04); }
}

@keyframes direct-landing-ring {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.25); }
  22% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(3.8); }
}

@keyframes direct-solution-row-settle {
  0% { filter: blur(2px); opacity: 0.45; transform: scaleX(1.16); }
  64% { filter: blur(0); opacity: 1; transform: scaleX(0.97); }
  100% { opacity: 1; transform: scaleX(1); }
}

@keyframes leaderboard-confetti {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.4) rotate(0);
  }
  16% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform:
      translate(
        calc(-50% + var(--confetti-x)),
        calc(-50% + var(--confetti-y))
      )
      scale(1)
      rotate(var(--confetti-rotate));
  }
}

@keyframes tutorial-card-enter-top {
  0% {
    opacity: 0;
    filter: blur(7px);
    transform: translate(-50%, -16px) scale(0.94);
  }
  68% {
    opacity: 1;
    filter: blur(0);
    transform: translate(-50%, 3px) scale(1.012);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
  }
}

@keyframes tutorial-card-enter-bottom {
  0% {
    opacity: 0;
    filter: blur(7px);
    transform: translate(-50%, 18px) scale(0.94);
  }
  68% {
    opacity: 1;
    filter: blur(0);
    transform: translate(-50%, -3px) scale(1.012);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
  }
}

@keyframes tutorial-target-pulse {
  0%,
  100% {
    outline-color: rgb(199 209 140 / 54%);
    box-shadow:
      0 0 0 5px rgb(199 209 140 / 7%),
      0 0 18px rgb(199 209 140 / 28%);
  }
  50% {
    outline-color: rgb(199 209 140 / 92%);
    box-shadow:
      0 0 0 8px rgb(199 209 140 / 13%),
      0 0 30px rgb(199 209 140 / 52%);
  }
}

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

@media (min-height: 900px) {
  .game-shell {
    padding-top: calc(env(safe-area-inset-top) + 34px);
  }

  .title-block {
    margin-top: 48px;
  }

  .matrix-stage {
    margin-top: 42px;
  }

  .control-card {
    margin-top: 48px;
  }

  .results-card {
    width: min(100%, 450px);
  }
}

@media (min-width: 800px) {
  .game-shell {
    width: 100%;
    min-height: 100svh;
    padding:
      38px
      clamp(42px, 7vw, 82px)
      44px;
  }

  .top-glow {
    top: 142px;
    left: 50%;
    width: min(70vw, 760px);
    height: min(70vw, 760px);
  }

  .hud {
    font-size: 12px;
  }

  .title-block {
    margin-top: 55px;
  }

  h1 {
    font-size: 42px;
  }

  .title-block p {
    margin-top: 8px;
    font-size: 12px;
  }

  .matrix-stage {
    width: min(78vw, 940px);
    min-height: 314px;
    margin-top: 48px;
    margin-right: auto;
    margin-left: auto;
    padding: 31px 22px;
    border-radius: 25px;
  }

  .matrix {
    gap: 15px;
  }

  .matrix-row {
    height: 74px;
    min-height: 74px;
    border-radius: 15px;
  }

  .matrix-value {
    font-size: 23px;
  }

  .control-card {
    width: min(56vw, 620px);
    margin: 30px auto 0;
    padding: 19px;
    border-radius: 20px;
  }

  .results-card {
    width: min(78vw, 940px);
    padding: 31px 22px;
    border-radius: 25px;
  }

  .results-screen {
    padding-bottom: calc(env(safe-area-inset-bottom) + 106px);
  }

  .score-view {
    min-height: 420px;
  }

  .results-card .eyebrow,
  .player-label {
    font-size: 14px;
  }

  .result-score-wrap {
    gap: 12px;
    margin-top: 30px;
  }

  .result-score {
    font-size: clamp(78px, 11vw, 126px);
  }

  .result-score-label {
    font-size: 18px;
  }

  .result-stats {
    gap: 15px;
    margin-top: 34px;
  }

  .result-stat {
    min-height: 74px;
    padding: 0 22px;
    border-radius: 15px;
    font-size: 18px;
  }

  .result-stat strong {
    font-size: 20px;
  }

  .result-message {
    min-height: 28px;
    margin-top: 26px;
    font-size: 22px;
  }

  .leaderboard-title {
    font-size: 18px;
  }

  .leaderboard-list {
    gap: 15px;
    margin-top: 28px;
  }

  .leaderboard-row,
  .leaderboard-empty,
  .leaderboard-gap {
    min-height: 74px;
    border-radius: 15px;
  }

  .leaderboard-row {
    grid-template-columns: 78px minmax(0, 1fr) 130px 130px;
    gap: 12px;
    padding: 0 22px;
    font-size: 18px;
  }

  .leaderboard-empty,
  .leaderboard-gap {
    font-size: 18px;
  }

  .next-level-button {
    width: min(420px, 36vw);
  }

  .eyebrow {
    font-size: 10px;
  }

  .operation-grid {
    gap: 9px;
    margin-top: 12px;
  }

  .operation-button {
    min-height: 43px;
    font-size: 13px;
  }

  .factor-line {
    grid-template-columns: 68px 1fr;
    margin-top: 14px;
  }

  .factor-input {
    min-height: 41px;
    font-size: 17px;
  }

  .level-cleared {
    min-height: 18px;
    margin-top: 24px;
    font-size: 12px;
  }

  .reset-button {
    right: clamp(42px, 7vw, 82px);
    bottom: 24px;
  }

  .settings-button {
    left: clamp(42px, 7vw, 82px);
    bottom: 22px;
  }

  .settings-menu {
    left: clamp(42px, 7vw, 82px);
    bottom: 62px;
  }

  .version-label {
    left: calc(clamp(42px, 7vw, 82px) + 42px);
    bottom: 29px;
  }
}