@font-face {
      font-family: "Fredoka One";
      src: url("../vendor/fonts/fredoka-one/fredoka-one.ttf") format("truetype");
      font-style: normal;
      font-weight: 400;
      font-display: swap;
    }
:root {
      --app-bg: #f6dd9f;
      --app-bg-overlay: linear-gradient(180deg, rgba(255, 255, 255, 0.22), transparent 38%);
      --app-texture: none;
      --app-pattern-opacity: 1;
      --system-bar-color: #f6dd9f;
      --bg: var(--app-bg);
      --ink: #392f2b;
      --panel: #fffaf0;
      --line: transparent;
      --soft-line: rgba(86, 65, 50, 0.28);
      --theme-surface: #fffaf0;
      --theme-surface-strong: #f6dd9f;
      --theme-accent: #2f8f83;
      --theme-accent-contrast: #ffffff;
      --theme-title: var(--theme-accent);
      --muted: #7a665b;
      --accent: #2f8f83;
      --danger: #d73838;
      --shadow: 0 14px 34px rgba(48, 37, 28, 0.18);
      --app-bg-size: auto, auto, auto;
      --app-bg-position: center, center, center;
      --cell-gap: clamp(3px, 1vw, 5px);
      --board-grid-size: 7;
      --viewport-height: 100dvh;
      --app-top: 0px;
      --app-height: 100dvh;
      --board-size: max(0px, min(calc(100vw - 28px), calc(var(--app-height) - 190px), 430px));
    }

    * {
      box-sizing: border-box;
    }

    html,
    body {
      min-height: 100%;
      margin: 0;
      background: var(--system-bar-color);
    }

    body {
      min-height: var(--viewport-height);
      overflow: hidden;
      background: var(--system-bar-color);
      color: var(--ink);
      font-family: "Fredoka One", Arial, Helvetica, sans-serif;
      -webkit-font-smoothing: antialiased;
      touch-action: auto;
    }

    button {
      font: inherit;
      color: inherit;
    }

    .app-shell {
      height: var(--app-height);
      min-height: 0;
      width: 100%;
      position: relative;
      z-index: 1;
      container-name: app-shell;
      container-type: size;
      background:
        var(--app-texture),
        var(--app-bg-overlay),
        var(--bg);
      background-position: var(--app-bg-position);
      background-size: var(--app-bg-size);
    }

    .screen {
      height: var(--app-height);
      min-height: 0;
      width: 100%;
      position: relative;
      z-index: 1;
      display: none;
      padding: max(12px, env(safe-area-inset-top)) 14px max(14px, env(safe-area-inset-bottom));
    }

    .screen.is-active {
      display: grid;
    }

    .loading-screen {
      z-index: 20;
      place-items: center;
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.22), transparent 38%),
        #f6dd9f;
      color: #392f2b;
    }

    .loading-content {
      width: min(100%, 260px);
      display: grid;
      place-items: center;
      gap: 22px;
    }

    .loading-logo {
      width: clamp(180px, 50vw, 260px);
      height: clamp(180px, 50vw, 260px);
      object-fit: contain;
      filter: drop-shadow(0 14px 18px rgba(42, 32, 24, 0.24));
    }

    .loading-bar {
      width: min(100%, 210px);
      height: 16px;
      overflow: hidden;
      border-radius: 8px;
      background: rgba(255, 250, 240, 0.58);
      box-shadow:
        inset 0 2px 5px rgba(57, 47, 43, 0.16),
        0 8px 18px rgba(42, 32, 24, 0.16);
    }

    .loading-bar-fill {
      width: 100%;
      height: 100%;
      border-radius: inherit;
      background: #2f8f83;
      transform: scaleX(0);
      transform-origin: left center;
      transition: transform 0.22s ease-out;
    }

    .home-screen {
      position: relative;
      display: none;
      align-items: center;
      justify-content: center;
      gap: clamp(32px, calc(var(--app-height) * 0.06), 56px);
    }

    .home-screen.is-active {
      display: flex;
      flex-direction: column;
    }

    .home-menu-actions {
      position: absolute;
      top: max(16px, env(safe-area-inset-top));
      right: max(14px, env(safe-area-inset-right));
      display: flex;
      align-items: flex-start;
      gap: 8px;
      margin: 0;
    }

    .home-menu-item {
      width: 58px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
      text-align: center;
    }

    .home-menu-button {
      width: 46px;
      min-width: 46px;
      min-height: 50px;
    }

    .home-menu-button i {
      font-size: 23px;
    }

    .home-menu-label {
      display: block;
      max-width: 100%;
      overflow-wrap: anywhere;
      color: var(--theme-accent);
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0;
      line-height: 1;
      text-align: center;
      text-transform: uppercase;
    }

    .difficulty-grid {
      width: min(100%, 430px);
      display: grid;
      gap: 12px;
    }

    .difficulty-card {
      min-height: 92px;
      display: grid;
      grid-template-columns: 62px minmax(0, 1fr) auto;
      align-items: center;
      gap: 14px;
      border: 3px solid var(--difficulty-card-border, transparent);
      border-radius: 8px;
      background: var(--difficulty-card-bg, rgba(255, 250, 240, 0.92));
      color: var(--ink);
      box-shadow: var(--difficulty-card-shadow, 0 12px 26px rgba(42, 32, 24, 0.18));
      padding: 14px;
      text-align: left;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
    }

    .difficulty-card.is-locked {
      opacity: 0.62;
      cursor: pointer;
    }

    .difficulty-card.is-locked .difficulty-play {
      background: transparent;
      color: rgba(86, 65, 50, 0.58);
      padding: 0;
      gap: 4px;
      font-size: 22px;
    }

    .difficulty-card.is-locked .difficulty-play small {
      display: block;
      color: inherit;
      font-size: 13px;
      font-weight: 900;
      line-height: 1;
    }

    .difficulty-card.is-featured {
      background: var(--difficulty-featured-bg, var(--theme-surface-strong));
      border-color: var(--difficulty-featured-border, var(--theme-accent));
      box-shadow:
        inset 0 0 0 2px rgba(255, 255, 255, 0.34),
        0 12px 26px rgba(42, 32, 24, 0.18);
    }

    .difficulty-icon {
      width: 62px;
      height: 62px;
      display: grid;
      place-items: center;
      border-radius: 8px;
      background: var(--difficulty-icon-bg, rgba(255, 255, 255, 0.48));
      color: var(--theme-accent);
      box-shadow: inset 0 0 0 2px var(--difficulty-icon-border, rgba(57, 47, 43, 0.12));
      font-size: 29px;
    }

    .difficulty-stars {
      grid-template-columns: repeat(2, 1fr);
      grid-template-rows: repeat(2, 1fr);
      padding: 6px;
      font-size: 20px;
      line-height: 1;
      justify-items: center;
      align-items: center;
    }

    .difficulty-stars i:first-child {
      grid-column: 1 / -1;
      justify-self: center;
    }

    .difficulty-stars i:nth-child(2) {
      justify-self: center;
    }

    .difficulty-stars i:nth-child(3) {
      justify-self: center;
    }

    .easy-stars {
      color: #77b88a;
      background: rgba(225, 246, 225, 0.72);
    }

    .medium-stars {
      color: #d1a941;
      background: rgba(255, 241, 190, 0.72);
    }

    .hard-stars {
      color: #cf7777;
      background: rgba(255, 220, 220, 0.72);
    }

    .difficulty-copy {
      min-width: 0;
      display: grid;
      gap: 4px;
    }

    .difficulty-copy strong {
      font-size: clamp(24px, 7vw, 34px);
      line-height: 1;
      font-weight: 900;
    }

    .difficulty-copy span {
      justify-self: start;
      color: var(--muted);
      font-size: clamp(17px, 5vw, 23px);
      font-weight: 900;
      line-height: 1;
    }

    .difficulty-play {
      min-width: 82px;
      min-height: 46px;
      display: inline-grid;
      place-items: center;
      border-radius: 8px;
      background: var(--theme-accent);
      color: var(--theme-accent-contrast);
      padding: 0 18px;
      font-size: 20px;
      font-weight: 900;
      line-height: 1;
    }

    .home-brand {
      display: grid;
      place-items: center;
      gap: 10px;
    }

    .home-capybara {
      width: clamp(92px, 23vw, 128px);
      height: clamp(92px, 23vw, 128px);
      object-fit: contain;
      filter: drop-shadow(0 10px 12px rgba(42, 32, 24, 0.22));
    }

    .home-brand h1 {
      margin: 0;
      color: var(--theme-title);
      font-size: clamp(42px, 12vw, 68px);
      font-weight: 900;
      font-family: "Fredoka One", Arial, Helvetica, sans-serif;
      line-height: 0.92;
      letter-spacing: 0;
      text-align: center;
    }

    .home-actions {
      width: min(100%, 430px);
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 28px;
      justify-items: start;
    }

    .home-actions .home-action-button:last-child {
      justify-self: end;
    }

    .home-action-button {
      width: min(100%, 200px);
      min-height: 58px;
      border: 0;
      border-radius: 8px;
      background: var(--theme-accent);
      color: var(--theme-accent-contrast);
      box-shadow: 0 12px 24px rgba(42, 32, 24, 0.2);
      font-size: 22px;
      font-weight: 900;
      cursor: pointer;
    }

    .home-action-button.secondary {
      background: var(--home-secondary-bg, rgba(255, 250, 240, 0.92));
      color: var(--home-secondary-color, var(--theme-accent));
    }

    .game-screen {
      place-items: center;
    }

    .game {
      width: min(100%, 470px);
      position: relative;
      z-index: 2;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 12px;
    }

    .game-topbar {
      width: min(100%, calc(var(--board-size) + 22px));
      min-height: 48px;
      display: grid;
      grid-template-columns: 48px minmax(0, 1fr) 48px;
      align-items: center;
      gap: 8px;
      margin-bottom: 50px;
    }

    .game-progress-summary {
      min-width: 0;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      justify-self: center;
      border-radius: 18px;
      background: var(--panel);
      box-shadow: inset 0 0 0 2px rgba(57, 47, 43, 0.08);
      padding: 7px 16px;
    }

    .game-progress-summary strong {
      color: var(--theme-title);
      font-size: 22px;
      font-weight: 900;
      line-height: 1;
      text-align: center;
    }

    .game-coin-balance {
      min-height: 28px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 5px;
      border-radius: 14px;
      background: rgba(246, 189, 78, 0.32);
      padding: 4px 9px 5px 5px;
      color: var(--ink);
      font-size: 15px;
      font-weight: 900;
      line-height: 1;
    }

    .game-progress-summary.is-tutorial .game-coin-balance {
      display: none;
    }

    .game-coin-balance img {
      width: 22px;
      height: 22px;
      object-fit: contain;
      filter: drop-shadow(0 2px 1px rgba(57, 47, 43, 0.18));
    }

    .game-top-button {
      width: 48px;
      height: 48px;
      display: grid;
      place-items: center;
      border: 0;
      border-radius: 8px;
      background: var(--panel);
      color: var(--ink);
      box-shadow: 0 6px 0 rgba(57, 47, 43, 0.16);
      font-size: 22px;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
    }

    .hud {
      width: min(100%, calc(var(--board-size) + 22px));
      display: grid;
      grid-template-columns: minmax(0, 0.9fr) minmax(0, 0.9fr) 46px 46px;
      gap: 6px;
      align-items: stretch;
    }

    .shop-onboarding-overlay {
      position: absolute;
      inset: -120vmax;
      z-index: 18;
      display: none;
      pointer-events: auto;
    }

    .shop-onboarding-overlay::before {
      content: "";
      position: absolute;
      inset: 0;
      background: rgba(24, 19, 16, 0.62);
      pointer-events: auto;
    }

    .shop-onboarding-overlay.show {
      display: block;
    }

    .game:has(.shop-onboarding-overlay.show) #capybaraButton,
    .game:has(.shop-onboarding-overlay.show) #themeButton {
      position: relative;
      z-index: 19;
      box-shadow:
        0 0 0 4px rgba(255, 255, 255, 0.84),
        0 8px 0 rgba(57, 47, 43, 0.16),
        0 0 24px rgba(255, 255, 255, 0.7);
      animation: shopOnboardingPulse 1.15s ease-in-out infinite alternate;
    }

    .shop-onboarding-hint {
      width: min(220px, calc(100vw - 154px));
      position: absolute;
      left: var(--shop-onboarding-left, 16px);
      top: var(--shop-onboarding-top, 96px);
      z-index: 20;
      display: block;
      border: 2px solid rgba(86, 65, 50, 0.12);
      border-radius: 18px;
      background: rgba(255, 250, 240, 0.96);
      box-shadow:
        inset 0 0 0 2px rgba(255, 255, 255, 0.32),
        0 12px 24px rgba(24, 19, 16, 0.28);
      padding: 10px 12px;
      color: var(--ink);
      font-size: 14px;
      font-weight: 800;
      line-height: 1.18;
      text-align: left;
      pointer-events: none;
    }

    .shop-onboarding-hint::after {
      content: "";
      width: 12px;
      height: 12px;
      position: absolute;
      right: -7px;
      top: var(--shop-onboarding-arrow-top, calc(50% - 6px));
      background: rgba(255, 250, 240, 0.96);
      border-right: 2px solid rgba(86, 65, 50, 0.12);
      border-top: 2px solid rgba(86, 65, 50, 0.12);
      transform: rotate(45deg);
    }

    .hud-card,
    .icon-button,
    .modal-button {
      border: 2px solid var(--line);
      background: var(--panel);
      box-shadow: 0 6px 0 rgba(57, 47, 43, 0.16);
    }

    .hud-card {
      min-height: 50px;
      border-radius: 8px;
      display: grid;
      place-items: center;
      padding: 6px;
      text-align: center;
    }

    .hud-card small {
      display: block;
      color: var(--muted);
      font-size: 10px;
      font-weight: 800;
      letter-spacing: 0;
      text-transform: uppercase;
      line-height: 1;
      margin-bottom: 4px;
    }

    .hud-card strong {
      min-height: 24px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 5px;
      font-size: 23px;
      line-height: 1;
    }

    #lives {
      position: relative;
    }

    .life-heart {
      color: #ff1f3d;
      font-size: 34px;
      line-height: 1;
      margin: 0 1px;
    }

    .life-heart.is-empty {
      color: #1f1f1f;
    }

    .life-heart.is-lost {
      animation: lifeLostShake 0.34s ease;
    }

    .tutorial-life-hint {
      width: max-content;
      max-width: min(198px, calc(100vw - 36px));
      position: absolute;
      left: 50%;
      top: calc(100% + 13px);
      z-index: 9;
      display: block;
      border: 2px solid rgba(86, 65, 50, 0.12);
      border-radius: 18px;
      background: rgba(255, 250, 240, 0.96);
      box-shadow:
        inset 0 0 0 2px rgba(255, 255, 255, 0.32),
        0 8px 18px rgba(42, 32, 24, 0.2);
      padding: 9px 12px;
      color: var(--ink);
      font-size: clamp(12px, 3vw, 14px);
      line-height: 1.18;
      text-align: center;
      transform: translateX(-50%);
      pointer-events: none;
      animation: tutorialLifeHintPop 0.2s ease;
    }

    .tutorial-life-hint::after {
      content: "";
      width: 12px;
      height: 12px;
      position: absolute;
      left: calc(50% - 6px);
      top: -7px;
      background: rgba(255, 250, 240, 0.96);
      border-left: 2px solid rgba(86, 65, 50, 0.12);
      border-top: 2px solid rgba(86, 65, 50, 0.12);
      transform: rotate(45deg);
    }

    .icon-button {
      min-width: 46px;
      min-height: 50px;
      border-radius: 8px;
      display: grid;
      place-items: center;
      padding: 0;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
    }

    .icon-button svg {
      width: 24px;
      height: 24px;
      stroke-width: 2.4;
    }

    .icon-button i {
      font-size: 25px;
      line-height: 1;
    }

    .icon-button img {
      width: 31px;
      height: 31px;
      object-fit: contain;
      pointer-events: none;
      filter: drop-shadow(0 2px 1px rgba(0, 0, 0, 0.18));
    }

    .board-frame {
      width: min(100%, calc(var(--board-size) + 22px));
      padding: 9px;
      background: var(--panel);
      border: 2px solid var(--line);
      border-radius: 12px;
      box-shadow: var(--shadow);
    }

    .board {
      width: 100%;
      display: grid;
      grid-template-columns: repeat(var(--board-grid-size), minmax(0, 1fr));
      gap: var(--cell-gap);
      user-select: none;
    }

    .cell {
      aspect-ratio: 1 / 1;
      min-width: 0;
      border: 0;
      border-radius: 8px;
      position: relative;
      display: grid;
      place-items: center;
      padding: 0;
      cursor: pointer;
      outline: none;
      transition: transform 0.12s ease, filter 0.12s ease, box-shadow 0.12s ease;
      -webkit-tap-highlight-color: transparent;
    }

    .cell.tutorial-target {
      z-index: 3;
      box-shadow:
        inset 0 0 0 4px rgba(255, 255, 255, 0.82),
        0 8px 18px rgba(42, 32, 24, 0.22);
      animation: tutorialTargetPulse 1.15s ease-in-out infinite alternate;
    }

    .cell.tutorial-nudge {
      animation: tutorialNudge 0.34s ease;
    }

    .tutorial-hint {
      position: absolute;
      inset: 0;
      z-index: 8;
      pointer-events: none;
    }

    .tutorial-hint i {
      position: absolute;
      left: 50%;
      top: 50%;
      color: var(--theme-accent);
      font-size: clamp(22px, calc(var(--board-size) / 12), 32px);
      transform: translate(-40%, -36%) rotate(-14deg);
      filter:
        drop-shadow(0 2px 0 rgba(255, 255, 255, 0.78))
        drop-shadow(0 4px 3px rgba(57, 47, 43, 0.28));
    }

    .tutorial-hint span {
      width: max-content;
      max-width: min(188px, calc(100vw - 36px));
      position: absolute;
      left: calc(100% + 12px);
      top: 50%;
      display: block;
      border: 2px solid rgba(86, 65, 50, 0.12);
      border-radius: 18px;
      background: rgba(255, 250, 240, 0.96);
      box-shadow:
        inset 0 0 0 2px rgba(255, 255, 255, 0.32),
        0 8px 18px rgba(42, 32, 24, 0.2);
      padding: 9px 12px;
      color: var(--ink);
      font-size: clamp(12px, 3vw, 14px);
      line-height: 1.18;
      text-align: left;
      transform: translateY(-50%);
      white-space: normal;
    }

    .tutorial-hint span::after {
      content: "";
      width: 12px;
      height: 12px;
      position: absolute;
      left: -7px;
      top: calc(50% - 6px);
      background: rgba(255, 250, 240, 0.96);
      border-left: 2px solid rgba(86, 65, 50, 0.12);
      border-bottom: 2px solid rgba(86, 65, 50, 0.12);
      transform: rotate(45deg);
    }

    .cell.tutorial-hint-left .tutorial-hint span {
      right: calc(100% + 12px);
      left: auto;
      text-align: right;
    }

    .cell.tutorial-hint-left .tutorial-hint span::after {
      right: -7px;
      left: auto;
      border: 0;
      border-right: 2px solid rgba(86, 65, 50, 0.12);
      border-top: 2px solid rgba(86, 65, 50, 0.12);
    }

    .cell.tutorial-hint-above .tutorial-hint span {
      top: auto;
      bottom: calc(100% + 12px);
      transform: none;
    }

    .cell.tutorial-hint-above .tutorial-hint span::after {
      left: calc(50% - 6px);
      right: auto;
      top: auto;
      bottom: -7px;
      border: 0;
      border-right: 2px solid rgba(86, 65, 50, 0.12);
      border-bottom: 2px solid rgba(86, 65, 50, 0.12);
    }

    .cell.tutorial-hint-below .tutorial-hint span {
      left: 50%;
      right: auto;
      top: calc(100% + 12px);
      bottom: auto;
      text-align: center;
      transform: translateX(-50%);
    }

    .cell.tutorial-hint-below .tutorial-hint span::after {
      left: calc(50% - 6px);
      right: auto;
      top: -7px;
      bottom: auto;
      border: 0;
      border-left: 2px solid rgba(86, 65, 50, 0.12);
      border-top: 2px solid rgba(86, 65, 50, 0.12);
    }

    @media (max-width: 560px) {
      .cell.tutorial-hint-right .tutorial-hint span {
        width: min(138px, calc(100vw - 36px));
        max-width: min(138px, calc(100vw - 36px));
        left: auto;
        right: 0;
        top: calc(100% + 12px);
        text-align: left;
        transform: none;
      }

      .cell.tutorial-hint-right .tutorial-hint span::after {
        left: calc(50% - 6px);
        right: auto;
        top: -7px;
        border: 0;
        border-left: 2px solid rgba(86, 65, 50, 0.12);
        border-top: 2px solid rgba(86, 65, 50, 0.12);
      }

      .cell.tutorial-hint-left.tutorial-hint-below .tutorial-hint span {
        width: min(142px, calc(100vw - 36px));
        max-width: min(142px, calc(100vw - 36px));
        left: auto;
        right: 0;
        text-align: center;
        transform: none;
      }

      .cell.tutorial-hint-left.tutorial-hint-below .tutorial-hint span::after {
        left: auto;
        right: 20px;
      }
    }

    .cell:active {
      transform: scale(0.96);
    }

    .cell.marked::after,
    .cell.wrong-locked::after {
      content: "\00d7";
      color: rgba(255, 255, 255, 0.96);
      font-size: clamp(30px, calc(var(--board-size) / 10), 48px);
      line-height: 1;
      font-weight: 900;
    }

    .cell.wrong-locked::after {
      color: #ff2020;
      text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45);
    }

    .board-size-9 .cell.marked::after,
    .board-size-9 .cell.wrong-locked::after {
      font-size: clamp(22px, calc(var(--board-size) / 14), 34px);
    }

    .cell.revealed {
      cursor: default;
      box-shadow:
        inset 0 0 0 4px rgba(255, 255, 255, 0.74),
        0 5px 12px rgba(42, 32, 24, 0.18);
    }

    .cell.just-revealed {
      animation: capybaraReveal 0.55s ease;
    }

    .cell.error {
      animation: shake 0.3s ease;
      box-shadow: inset 0 0 0 4px #ff2020;
    }

    .region-0 { background: #48a9bb; }
    .region-1 { background: #8acb63; }
    .region-2 { background: #3f9067; }
    .region-3 { background: #d985ad; }
    .region-4 { background: #ee914f; }
    .region-5 { background: #c8aa3f; }
    .region-6 { background: #6f8fd4; }
    .region-7 { background: #b77ed4; }
    .region-8 { background: #df6f6f; }

    .capybara {
      width: 78%;
      height: 78%;
      display: block;
      object-fit: contain;
      pointer-events: none;
      filter: drop-shadow(0 3px 2px rgba(0, 0, 0, 0.18));
    }

    .rules {
      width: min(100%, calc(var(--board-size) + 22px));
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 6px;
      padding: 8px;
      border: 2px solid var(--line);
      border-radius: 12px;
      background: var(--panel);
      box-shadow: 0 6px 0 rgba(57, 47, 43, 0.12);
      font-size: 16px;
      font-weight: 500;
      line-height: 1.15;
      text-align: center;
    }

    .rule {
      min-height: 38px;
      display: grid;
      place-items: center;
      padding: 6px 5px;
      border: 1px solid var(--soft-line);
      border-radius: 8px;
      background: rgba(255, 255, 255, 0.42);
    }

    .modal {
      position: absolute;
      inset: 0;
      height: 100%;
      z-index: 10;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 18px;
      background: rgba(24, 19, 16, 0.42);
    }

    .modal.show {
      display: flex;
    }

    .modal-card {
      width: min(100%, 390px);
      max-height: max(0px, calc(var(--app-height) - 36px));
      overflow: auto;
      background: var(--theme-surface-strong);
      border: 2px solid var(--line);
      border-radius: 12px;
      color: var(--ink);
      box-shadow: 0 22px 60px rgba(24, 19, 16, 0.34);
      padding: 16px;
      text-align: center;
      animation: pop 0.22s ease;
    }

    .modal-card h2 {
      margin: 8px 0 8px;
      font-size: 26px;
      line-height: 1.1;
    }

    .modal-card p {
      margin: 0 auto 26px;
      max-width: 310px;
      color: var(--muted);
      font-size: 14px;
      font-weight: 800;
      line-height: 1.35;
    }

    .purchase-card {
      width: min(100%, 330px);
      border-radius: 18px;
      background:
        radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.62), transparent 48%),
        var(--theme-surface-strong);
      padding: 20px;
    }

    .purchase-card .modal-actions {
      margin-top: 18px;
    }

    .purchase-icon {
      width: 72px;
      height: 72px;
      display: grid;
      place-items: center;
      margin: 0 auto 10px;
      border: 2px solid rgba(221, 139, 45, 0.28);
      border-radius: 50%;
      background: rgba(255, 250, 240, 0.68);
      box-shadow:
        inset 0 0 0 3px rgba(255, 255, 255, 0.34),
        0 7px 0 rgba(57, 47, 43, 0.1);
    }

    .purchase-icon img {
      width: 52px;
      height: 52px;
      object-fit: contain;
      filter: drop-shadow(0 3px 2px rgba(57, 47, 43, 0.2));
    }

    .purchase-icon i {
      color: var(--theme-accent);
      font-size: 34px;
      filter: drop-shadow(0 3px 2px rgba(57, 47, 43, 0.16));
    }

    .purchase-card h2 {
      margin-top: 22px;
      margin-bottom: 26px;
    }

    .purchase-card #purchaseText {
      border: 2px solid rgba(86, 65, 50, 0.12);
      border-radius: 14px;
      background: rgba(255, 250, 240, 0.6);
      padding: 12px;
      font-size: 13px;
    }

    .locked-difficulty-card #lockedDifficultyText {
      color: inherit;
      font-size: 18px;
      font-weight: 100;
    }

    .purchase-card .modal-button {
      min-height: 48px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      border-radius: 14px;
      box-shadow: 0 6px 0 rgba(57, 47, 43, 0.14);
    }

    .modal-capybara {
      width: 86px;
      height: 86px;
      object-fit: contain;
      margin: 4px auto 0;
    }

    .modal-capybara .capybara {
      width: 100%;
      height: 100%;
    }

    .result-card {
      width: min(100%, 430px);
      position: relative;
      isolation: isolate;
      overflow-x: hidden;
      border: 2px solid var(--line);
      border-radius: 12px;
      background:
        radial-gradient(circle at 50% 12%, rgba(255, 255, 255, 0.66), transparent 34%),
        linear-gradient(180deg, rgba(255, 250, 240, 0.38), transparent 42%),
        var(--theme-surface-strong);
      box-shadow:
        0 24px 70px rgba(24, 19, 16, 0.38);
      padding: 18px;
    }

    .result-card .modal-capybara {
      width: 112px;
      height: 112px;
      position: relative;
      z-index: 2;
      display: grid;
      place-items: center;
      margin: 6px auto 12px;
    }

    .result-card .modal-capybara .capybara {
      width: 92%;
      height: 92%;
    }

    .result-title-banner {
      min-height: 62px;
      position: relative;
      z-index: 3;
      display: grid;
      place-items: center;
      border: 2px solid rgba(86, 65, 50, 0.14);
      border-radius: 18px;
      background: rgba(255, 250, 240, 0.62);
      box-shadow:
        inset 0 0 0 3px rgba(255, 255, 255, 0.3),
        0 7px 0 rgba(57, 47, 43, 0.1),
        0 12px 22px rgba(57, 47, 43, 0.08);
      padding: 9px 18px;
      margin-bottom: 18px;
    }

    .result-card .result-title-banner h2 {
      margin: 0;
      color: var(--ink);
      font-size: clamp(28px, 8vw, 36px);
      line-height: 1;
      text-shadow: 0 2px 0 rgba(255, 255, 255, 0.5);
    }

    .result-card > p {
      max-width: 340px;
      margin: 16px auto 12px;
      color: var(--muted);
      font-size: 16px;
      line-height: 1.3;
    }

    .result-confetti {
      position: absolute;
      inset: 25px 26px auto;
      z-index: 1;
      display: flex;
      justify-content: space-between;
      color: #f2ad37;
      pointer-events: none;
    }

    .result-confetti i:nth-child(1) { transform: translate(-16px, -13px) rotate(-12deg); }
    .result-confetti i:nth-child(2) { color: #77b88a; transform: translate(-10px, 47px) rotate(18deg); }
    .result-confetti i:nth-child(3) { color: #d985ad; transform: translate(-4px, -20px) rotate(-12deg); }
    .result-confetti i:nth-child(4) { color: #ee914f; transform: translateY(51px) rotate(22deg); }
    .result-confetti i:nth-child(5) { color: #48a9bb; transform: translateY(-18px) rotate(14deg); }
    .result-confetti i:nth-child(6) { color: #d985ad; transform: translate(4px, 48px) rotate(-18deg); }
    .result-confetti i:nth-child(7) { color: #8acb63; transform: translate(10px, -14px) rotate(20deg); }
    .result-confetti i:nth-child(8) { color: #ee914f; transform: translate(16px, 43px) rotate(-16deg); }

    .result-modal[data-kind="game-over"] .result-confetti,
    .result-modal[data-kind="status"] .result-confetti {
      display: none;
    }

    .result-game-over-icon {
      color: #df5f64;
      font-size: 58px;
      opacity: 0.94;
      filter: drop-shadow(0 4px 0 rgba(57, 47, 43, 0.08));
    }

    .stats {
      display: grid;
      gap: 8px;
      margin: 14px 0;
    }

    .stat {
      min-height: 44px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      border: 2px solid var(--line);
      border-radius: 8px;
      background: var(--panel);
      padding: 9px 11px;
      font-weight: 900;
    }

    .result-card .stats {
      gap: 0;
      overflow: hidden;
      border: 2px solid rgba(86, 65, 50, 0.14);
      border-radius: 18px;
      background: rgba(255, 250, 240, 0.54);
      box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.24);
      padding: 7px 14px;
    }

    .result-modal[data-kind="tutorial"] .result-card .stats {
      display: none;
    }

    .result-card .stat {
      min-height: 50px;
      border: 0;
      border-radius: 0;
      background: transparent;
      padding: 7px 4px;
    }

    .result-card .stat + .stat {
      border-top: 2px solid rgba(221, 139, 45, 0.18);
    }

    .stat-label {
      display: inline-flex;
      align-items: center;
      gap: 11px;
      color: var(--muted);
      font-size: 14px;
      text-transform: uppercase;
    }

    .stat-label > i,
    .stat-label > img {
      width: 27px;
      height: 27px;
      display: grid;
      place-items: center;
      object-fit: contain;
      font-size: 23px;
      text-align: center;
    }

    .stat-label .fa-stopwatch { color: #8b6bc3; }
    .stat-label .fa-heart { color: #df5f64; }
    .stat-label .fa-leaf { color: #70a950; }

    .result-card .stat > strong {
      min-width: 78px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 5px;
      border-radius: 13px;
      background: rgba(246, 189, 78, 0.28);
      padding: 7px 10px;
      color: var(--ink);
      font-size: 18px;
      line-height: 1;
    }

    .coin-breakdown-base {
      font-size: 18px;
      font-weight: 700;
      line-height: 1;
    }

    .coin-breakdown-plus {
      color: var(--muted);
      font-size: 15px;
    }

    .coin-breakdown-bonus {
      color: var(--muted);
      font-size: 15px;
    }

    .stat span:first-child {
      color: var(--muted);
      font-size: 12px;
      text-transform: uppercase;
    }

    .result-card .stat > strong .coin-breakdown-base {
      color: var(--ink);
      font-size: 18px;
      font-weight: 700;
      text-transform: none;
    }

    .result-card .stat .stat-label {
      font-size: 14px;
    }

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

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

    .result-card .modal-actions {
      gap: 12px;
      margin-top: 14px;
    }

    .result-card .modal-button {
      min-height: 54px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      border: 2px solid rgba(57, 47, 43, 0.08);
      border-radius: 16px;
      box-shadow: 0 7px 0 rgba(57, 47, 43, 0.16);
      font-size: 17px;
    }

    .result-card .result-next-button {
      justify-content: space-between;
      padding-inline: 20px;
    }

    .result-card .result-menu-button i {
      color: #9b602f;
    }

    @media (max-width: 420px), (max-height: 700px) {
      .result-card {
        padding: 13px;
      }

      .result-card .modal-capybara {
        width: 88px;
        height: 88px;
        margin: 13px auto 14px;
      }

      .result-title-banner {
        min-height: 52px;
        padding-block: 7px;
      }

      .result-card .result-title-banner h2 {
        font-size: 27px;
      }

      .result-card > p {
        margin-block: 12px 9px;
        font-size: 14px;
      }

      .result-card .stats {
        margin-block: 10px;
        padding-block: 5px;
      }

      .result-card .stat {
        min-height: 43px;
        padding-block: 5px;
      }

      .result-card .modal-button {
        min-height: 48px;
        font-size: 15px;
      }
    }

    @container app-shell (max-height: 700px) {
      .result-card {
        padding: 13px;
      }

      .result-card .modal-capybara {
        width: 88px;
        height: 88px;
        margin: 13px auto 14px;
      }

      .result-title-banner {
        min-height: 52px;
        padding-block: 7px;
      }

      .result-card .result-title-banner h2 {
        font-size: 27px;
      }

      .result-card > p {
        margin-block: 12px 9px;
        font-size: 14px;
      }

      .result-card .stats {
        margin-block: 10px;
        padding-block: 5px;
      }

      .result-card .stat {
        min-height: 43px;
        padding-block: 5px;
      }

      .result-card .modal-button {
        min-height: 48px;
        font-size: 15px;
      }
    }

    .modal-button {
      min-height: 44px;
      border-radius: 8px;
      font-weight: 900;
      cursor: pointer;
    }

    .modal-button.primary {
      background: var(--theme-accent);
      color: var(--theme-accent-contrast);
    }

    .help-list {
      margin: 8px 0 16px;
      padding-left: 20px;
      text-align: left;
      font-size: 14px;
      font-weight: 800;
      line-height: 1.45;
    }

    .help-list li + li {
      margin-top: 8px;
    }

    .shop-wallet {
      min-height: 46px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin: 10px 0 12px;
      padding: 8px 12px;
      border: 2px solid var(--line);
      border-radius: 8px;
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.62), rgba(255, 250, 240, 0.86)),
        var(--panel);
      box-shadow:
        inset 0 0 0 2px rgba(57, 47, 43, 0.08),
        0 5px 0 rgba(57, 47, 43, 0.14);
      font-weight: 900;
    }

    .shop-wallet > span,
    .shop-wallet strong {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      line-height: 1;
    }

    .shop-wallet > span {
      color: var(--muted);
      font-size: 12px;
      text-transform: uppercase;
    }

    .shop-wallet strong {
      color: var(--ink);
      font-size: 16px;
    }

    .coin-icon {
      width: 19px;
      height: 19px;
      display: inline-block;
      object-fit: contain;
      flex: 0 0 auto;
      filter: drop-shadow(0 2px 1px rgba(57, 47, 43, 0.18));
      vertical-align: middle;
    }

    .shop-list {
      display: grid;
      gap: 9px;
      margin: 12px 0;
    }

    .shop-option {
      min-height: 76px;
      display: grid;
      grid-template-columns: 66px minmax(0, 1fr);
      align-items: center;
      gap: 11px;
      border: 2px solid var(--line);
      border-radius: 8px;
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.68), rgba(255, 250, 240, 0.92)),
        var(--panel);
      color: var(--ink);
      box-shadow: 0 6px 0 rgba(57, 47, 43, 0.12);
      padding: 8px 10px 10px 8px;
      text-align: left;
      font: inherit;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
      transition: transform 0.12s ease, box-shadow 0.12s ease, opacity 0.12s ease;
    }

    .shop-option:active {
      transform: translateY(2px);
      box-shadow: 0 4px 0 rgba(57, 47, 43, 0.14);
    }

    .shop-option.is-unowned {
      grid-template-columns: 66px minmax(0, 1fr) 24px;
    }

    .shop-option.is-selected {
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.74), rgba(255, 250, 240, 0.96)),
        var(--panel);
      box-shadow:
        inset 0 0 0 3px var(--theme-accent),
        0 6px 0 rgba(57, 47, 43, 0.12);
    }

    .shop-option.is-locked {
      opacity: 0.62;
    }

    .shop-lock {
      justify-self: center;
      color: rgba(86, 65, 50, 0.58);
      font-size: 18px;
      line-height: 1;
    }

    .theme-preview {
      width: 64px;
      height: 54px;
      border: 2px solid var(--line);
      border-radius: 8px;
      background:
        var(--app-texture),
        var(--app-bg-overlay),
        var(--app-bg);
      background-position: var(--app-bg-position);
      background-size: var(--app-bg-size);
    }

    .capybara-preview {
      width: 64px;
      height: 58px;
      display: grid;
      place-items: center;
      border: 2px solid var(--line);
      border-radius: 8px;
      background: rgba(255, 255, 255, 0.58);
      box-shadow: inset 0 0 0 2px rgba(57, 47, 43, 0.06);
    }

    .capybara-preview img {
      width: 86%;
      height: 86%;
      object-fit: contain;
      filter: drop-shadow(0 3px 2px rgba(0, 0, 0, 0.18));
    }

    .shop-copy {
      min-width: 0;
      display: grid;
      gap: 7px;
    }

    .shop-copy strong,
    .shop-copy small {
      display: block;
    }

    .shop-copy strong {
      font-size: 16px;
      line-height: 1.1;
    }

    .shop-copy small {
      color: var(--ink);
      font-size: 10px;
      font-weight: 900;
      text-transform: uppercase;
    }

    .shop-status {
      width: max-content;
      max-width: 100%;
      min-height: 22px;
      display: inline-flex;
      align-items: center;
      gap: 5px;
      border-radius: 8px;
      background: rgba(255, 255, 255, 0.58);
      padding: 5px 8px;
      box-shadow: inset 0 0 0 1px rgba(57, 47, 43, 0.08);
    }

    .shop-status.is-equipped {
      background: var(--theme-accent);
      color: var(--theme-accent-contrast);
    }

    .shop-status.is-unlocked {
      color: var(--muted);
    }

    .coin-price,
    .video-price {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      color: var(--ink);
      line-height: 1;
    }

    .video-price {
      color: var(--theme-accent);
      font-size: 18px;
    }

    .theme-shop-card,
    .capybara-shop-card {
      width: min(100%, 410px);
      border: 2px solid var(--line);
      border-radius: 12px;
      background:
        radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.58), transparent 34%),
        linear-gradient(180deg, rgba(255, 250, 240, 0.3), transparent 44%),
        var(--theme-surface-strong);
      padding: 18px;
    }

    .theme-shop-heading {
      min-height: 76px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      border: 2px solid rgba(86, 65, 50, 0.14);
      border-radius: 18px;
      background: rgba(255, 250, 240, 0.62);
      box-shadow:
        inset 0 0 0 3px rgba(255, 255, 255, 0.3),
        0 7px 0 rgba(57, 47, 43, 0.1);
      padding: 11px 14px;
      text-align: left;
    }

    .theme-shop-heading-copy {
      min-width: 0;
      display: grid;
      gap: 5px;
    }

    .theme-shop-card .theme-shop-heading h2,
    .capybara-shop-card .theme-shop-heading h2 {
      margin: 0;
      color: var(--ink);
      font-size: 27px;
      line-height: 1;
    }

    .theme-shop-balance {
      min-width: 100px;
      min-height: 50px;
      flex: 0 0 auto;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
      border-radius: 22px;
      background: rgba(246, 189, 78, 0.32);
      padding: 7px 13px 8px 8px;
      color: var(--ink);
      font-size: 20px;
      line-height: 1;
    }

    .theme-shop-balance img {
      width: 36px;
      height: 36px;
      object-fit: contain;
      filter: drop-shadow(0 3px 2px rgba(57, 47, 43, 0.2));
    }

    .theme-shop-card .shop-list,
    .capybara-shop-card .shop-list {
      gap: 9px;
      margin-block: 14px 16px;
      max-height: calc((92px * 4.5) + (9px * 3.5) + 16px);
      overflow-x: hidden;
      overflow-y: auto;
      scrollbar-width: thin;
      scrollbar-color: color-mix(in srgb, var(--theme-accent) 58%, rgba(57, 47, 43, 0.2)) rgba(255, 250, 240, 0.34);
      border: 2px solid rgba(86, 65, 50, 0.14);
      border-radius: 18px;
      background: rgba(255, 250, 240, 0.54);
      box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.24);
      padding: 8px 12px;
    }

    .theme-shop-card .shop-list::-webkit-scrollbar,
    .capybara-shop-card .shop-list::-webkit-scrollbar {
      width: 10px;
    }

    .theme-shop-card .shop-list::-webkit-scrollbar-track,
    .capybara-shop-card .shop-list::-webkit-scrollbar-track {
      border-radius: 999px;
      background: rgba(255, 250, 240, 0.34);
    }

    .theme-shop-card .shop-list::-webkit-scrollbar-thumb,
    .capybara-shop-card .shop-list::-webkit-scrollbar-thumb {
      border: 2px solid rgba(255, 250, 240, 0.54);
      border-radius: 999px;
      background: color-mix(in srgb, var(--theme-accent) 58%, rgba(57, 47, 43, 0.2));
    }

    .theme-shop-card .shop-option,
    .theme-shop-card .shop-option.is-unowned,
    .capybara-shop-card .shop-option,
    .capybara-shop-card .shop-option.is-unowned {
      min-height: 92px;
      position: relative;
      grid-template-columns: 76px minmax(0, 1fr) 28px;
      gap: 13px;
      border: 0;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
      padding: 10px 5px;
    }

    .theme-shop-card .shop-option.is-selected,
    .capybara-shop-card .shop-option.is-selected {
      border-radius: 13px;
      background: rgba(255, 250, 240, 0.7);
      box-shadow: inset 0 0 0 3px var(--theme-accent);
    }

    .theme-shop-card .shop-option:not(.is-selected),
    .capybara-shop-card .shop-option:not(.is-selected) {
      border-radius: 13px;
      background: rgba(255, 250, 240, 0.42);
      box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--theme-accent) 34%, transparent);
      opacity: 0.76;
    }

    .theme-shop-card .shop-option.is-selected:not(:last-child),
    .capybara-shop-card .shop-option.is-selected:not(:last-child) {
      margin-bottom: 0;
    }

    .theme-shop-card .shop-option + .shop-option.is-selected,
    .capybara-shop-card .shop-option + .shop-option.is-selected {
      margin-top: 0;
    }

    .theme-shop-card .shop-option:active,
    .capybara-shop-card .shop-option:active {
      transform: none;
      background: rgba(255, 250, 240, 0.5);
      box-shadow: inset 0 0 0 2px rgba(57, 47, 43, 0.08);
    }

    .theme-shop-card .theme-preview {
      width: 74px;
      height: 64px;
      position: relative;
      overflow: hidden;
      margin-left: 4px;
      border: 2px solid rgba(86, 65, 50, 0.18);
      border-radius: 13px;
      box-shadow:
        inset 0 0 0 2px rgba(255, 255, 255, 0.24),
        0 4px 8px rgba(57, 47, 43, 0.14);
    }

    .capybara-shop-card .capybara-preview {
      width: 74px;
      height: 64px;
      margin-left: 4px;
      border: 2px solid rgba(86, 65, 50, 0.18);
      border-radius: 13px;
      background: rgba(255, 250, 240, 0.56);
      box-shadow:
        inset 0 0 0 2px rgba(255, 255, 255, 0.24),
        0 4px 8px rgba(57, 47, 43, 0.14);
    }

    .theme-shop-card .shop-copy strong,
    .capybara-shop-card .shop-copy strong {
      font-size: 18px;
    }

    .theme-shop-card .shop-state-icon,
    .theme-shop-card .shop-lock,
    .capybara-shop-card .shop-state-icon,
    .capybara-shop-card .shop-lock {
      justify-self: center;
      color: var(--muted);
      font-size: 19px;
    }

    .theme-shop-card .shop-state-icon.is-equipped,
    .capybara-shop-card .shop-state-icon.is-equipped {
      color: var(--theme-accent);
      font-size: 22px;
    }

    .theme-shop-card .theme-shop-close,
    .capybara-shop-card .theme-shop-close {
      min-height: 52px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      border: 2px solid rgba(57, 47, 43, 0.08);
      border-radius: 16px;
      box-shadow: 0 7px 0 rgba(57, 47, 43, 0.16);
      font-size: 17px;
    }

    @media (max-width: 420px), (max-height: 700px) {
      .theme-shop-card,
      .capybara-shop-card {
        padding: 13px;
      }

      .theme-shop-heading {
        min-height: 66px;
        padding: 9px 11px;
      }

      .theme-shop-balance {
        min-width: 84px;
        min-height: 44px;
        font-size: 18px;
      }

      .theme-shop-balance img {
        width: 31px;
        height: 31px;
      }

      .theme-shop-card .shop-option,
      .theme-shop-card .shop-option.is-unowned,
      .capybara-shop-card .shop-option,
      .capybara-shop-card .shop-option.is-unowned {
        min-height: 80px;
        grid-template-columns: 64px minmax(0, 1fr) 24px;
      }

      .theme-shop-card .shop-list,
      .capybara-shop-card .shop-list {
        max-height: calc((80px * 4.35) + (9px * 3.35) + 16px);
        padding-inline: 8px;
      }

      .theme-shop-card .theme-preview,
      .capybara-shop-card .capybara-preview {
        width: 62px;
        height: 54px;
      }
    }

    @container app-shell (max-height: 700px) {
      .theme-shop-card,
      .capybara-shop-card {
        padding: 13px;
      }

      .theme-shop-heading {
        min-height: 66px;
        padding: 9px 11px;
      }

      .theme-shop-balance {
        min-width: 84px;
        min-height: 44px;
        font-size: 18px;
      }

      .theme-shop-balance img {
        width: 31px;
        height: 31px;
      }

      .theme-shop-card .shop-option,
      .theme-shop-card .shop-option.is-unowned,
      .capybara-shop-card .shop-option,
      .capybara-shop-card .shop-option.is-unowned {
        min-height: 80px;
        grid-template-columns: 64px minmax(0, 1fr) 24px;
      }

      .theme-shop-card .shop-list,
      .capybara-shop-card .shop-list {
        max-height: calc((80px * 4.35) + (9px * 3.35) + 16px);
        padding-inline: 8px;
      }

      .theme-shop-card .theme-preview,
      .capybara-shop-card .capybara-preview {
        width: 62px;
        height: 54px;
      }
    }

    .settings-card {
      width: min(100%, 354px);
      padding: 18px;
    }

    .settings-section {
      display: grid;
      gap: 10px;
      margin: 12px 0;
      padding: 12px;
      border-radius: 10px;
      background: rgba(255, 250, 240, 0.52);
      box-shadow: inset 0 0 0 2px rgba(57, 47, 43, 0.08);
    }

    .settings-section > span {
      color: var(--muted);
      font-size: 12px;
      font-weight: 900;
      text-transform: uppercase;
      line-height: 1;
      text-align: left;
    }

    .settings-sound-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
    }

    .language-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px;
    }

    .language-button {
      min-width: 0;
      min-height: 78px;
      display: grid;
      grid-template-rows: 34px 17px;
      place-items: center;
      align-content: center;
      gap: 5px;
      border: 0;
      border-radius: 8px;
      background: var(--panel);
      color: var(--ink);
      box-shadow: 0 6px 0 rgba(57, 47, 43, 0.16);
      padding: 8px 6px;
      font-weight: 900;
      line-height: 1;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
    }

    .language-button.is-selected {
      background: var(--theme-accent);
      color: var(--theme-accent-contrast);
      transform: translateY(2px);
      box-shadow: 0 4px 0 rgba(57, 47, 43, 0.18);
    }

    .language-flag {
      width: 46px;
      height: 32px;
      display: grid;
      place-items: center;
      border-radius: 6px;
      background: rgba(255, 255, 255, 0.76);
      box-shadow: inset 0 0 0 1px rgba(57, 47, 43, 0.12);
      overflow: hidden;
    }

    .language-flag img {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;
    }

    .language-code {
      font-size: 15px;
    }

    .sound-toggle {
      width: 100%;
      min-height: 78px;
      position: relative;
      display: grid;
      grid-template-rows: 35px 16px;
      place-items: center;
      align-content: center;
      gap: 4px;
      border: 0;
      border-radius: 8px;
      background: var(--panel);
      color: var(--theme-accent);
      box-shadow: 0 8px 0 rgba(57, 47, 43, 0.16);
      font-size: 33px;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
    }

    .sound-toggle span {
      color: var(--ink);
      font-size: 11px;
      font-weight: 900;
      line-height: 1;
      text-transform: uppercase;
    }

    .sound-toggle::after {
      content: "";
      width: 54px;
      height: 5px;
      position: absolute;
      left: calc(50% - 27px);
      top: 33px;
      border-radius: 8px;
      background: var(--danger);
      opacity: 0;
      transform: rotate(-38deg) scaleX(0);
      transform-origin: center;
      transition: opacity 0.16s ease, transform 0.16s ease;
    }

    .sound-toggle.is-muted {
      color: rgba(86, 65, 50, 0.58);
    }

    .sound-toggle.is-muted::after {
      opacity: 1;
      transform: rotate(-38deg) scaleX(1);
    }

    @keyframes capybaraReveal {
      0% { transform: scale(0.72); filter: brightness(1); }
      45% { transform: scale(1.16); filter: brightness(1.22); }
      70% { transform: scale(0.96); }
      100% { transform: scale(1); filter: brightness(1); }
    }

    @keyframes shake {
      0%, 100% { transform: translateX(0); }
      25% { transform: translateX(-6px); }
      75% { transform: translateX(6px); }
    }

    @keyframes lifeLostShake {
      0%, 100% { transform: translateX(0); }
      25% { transform: translateX(4px); }
      50% { transform: translateX(-4px); }
      75% { transform: translateX(2px); }
    }

    @keyframes tutorialTargetPulse {
      from {
        filter: brightness(1);
        transform: scale(1);
      }

      to {
        filter: brightness(1.12);
        transform: scale(1.04);
      }
    }

    @keyframes tutorialNudge {
      0%, 100% { transform: translateX(0); }
      35% { transform: translateX(-5px); }
      70% { transform: translateX(5px); }
    }

    @keyframes tutorialLifeHintPop {
      from {
        opacity: 0;
        transform: translateX(-50%) translateY(-4px) scale(0.96);
      }

      to {
        opacity: 1;
        transform: translateX(-50%) translateY(0) scale(1);
      }
    }

    @keyframes shopOnboardingPulse {
      from { transform: translateY(0); }
      to { transform: translateY(-2px); }
    }

    @keyframes pop {
      from { transform: scale(0.9); }
      to { transform: scale(1); }
    }

    /* Keep the complete interface visible on short laptop viewports (for
       example, a 13-inch MacBook with the browser chrome and Dock visible). */
    @container app-shell (min-width: 561px) and (max-height: 820px) {
      :root {
        --board-size: max(0px, min(calc(100vw - 28px), calc(var(--app-height) - 300px), 390px));
      }

      .home-screen {
        gap: clamp(16px, calc(var(--app-height) * 0.03), 24px);
      }

      .home-brand {
        gap: 6px;
      }

      .home-capybara {
        width: clamp(78px, calc(var(--app-height) * 0.13), 104px);
        height: clamp(78px, calc(var(--app-height) * 0.13), 104px);
      }

      .home-brand h1 {
        font-size: clamp(42px, calc(var(--app-height) * 0.08), 56px);
      }

      .difficulty-grid {
        gap: 8px;
      }

      .difficulty-card {
        min-height: 72px;
        grid-template-columns: 52px minmax(0, 1fr) auto;
        gap: 12px;
        padding: 8px 12px;
      }

      .difficulty-icon {
        width: 52px;
        height: 52px;
      }

      .difficulty-stars {
        padding: 4px;
        font-size: 16px;
      }

      .difficulty-copy strong {
        font-size: 28px;
      }

      .difficulty-copy span {
        font-size: 18px;
      }

      .difficulty-play {
        min-height: 42px;
      }

      .home-action-button {
        min-height: 50px;
      }

      .game {
        gap: 8px;
      }

      .game-topbar {
        margin-bottom: 16px;
      }

      .rules {
        padding: 6px;
      }

      .rule {
        min-height: 34px;
        padding-block: 4px;
      }
    }

    @container app-shell (max-height: 680px) {
      :root {
        --board-size: max(0px, min(calc(100vw - 28px), calc(var(--app-height) - 178px), 390px));
      }

      .game {
        gap: 8px;
      }

      .hud {
        grid-template-columns: minmax(0, 0.9fr) minmax(0, 0.9fr) 42px 42px;
        gap: 4px;
      }

      .rules {
        display: none;
      }

      .hud-card,
      .icon-button {
        min-height: 46px;
      }

      .hud-card {
        padding: 4px 2px;
      }

      .hud-card small {
        font-size: 9px;
        margin-bottom: 2px;
      }

      .hud-card strong {
        min-height: 20px;
        gap: 2px;
        font-size: 20px;
      }

      .hud .life-heart {
        font-size: 20px;
        margin: 0;
      }
    }

    @media (max-width: 560px) {
      .screen {
        padding-top: max(2px, env(safe-area-inset-top));
      }

      .home-menu-actions {
        left: auto;
        right: max(14px, env(safe-area-inset-right));
      }

      .home-menu-item:not(:last-child) {
        display: none;
      }

      .home-menu-item:last-child {
        margin-left: 0;
      }

      .home-menu-label {
        color: var(--theme-accent);
      }

      .game {
        justify-content: flex-start;
        gap: 12px;
        transform: translateY(-18px);
      }

      .game-topbar {
        margin-bottom: 34px;
      }

      .life-heart {
        font-size: 26px;
      }

      .rules {
        font-size: 14px;
        font-weight: 500;
      }
    }