:root {
      color-scheme: dark;
      --board-shell-width: min(100%, 1080px);
      --board-shell-height: auto;
      --board-aspect-ratio: 1 / 1;
      --bg-1: #081a33;
      --bg-2: #132c57;
      --bg-3: #1e6f86;
      --glow-1: rgba(255, 224, 116, 0.22);
      --glow-2: rgba(100, 214, 255, 0.18);
      --glow-3: rgba(63, 255, 176, 0.18);
      --panel: rgba(8, 14, 28, 0.58);
      --panel-strong: rgba(7, 11, 22, 0.72);
      --surface-1: rgba(10, 17, 30, 0.72);
      --surface-2: rgba(20, 36, 62, 0.46);
      --canvas-bg-1: rgba(6, 11, 24, 0.48);
      --canvas-bg-2: rgba(7, 13, 27, 0.72);
      --button-1: rgba(91, 244, 255, 0.22);
      --button-2: rgba(146, 255, 188, 0.18);
      --button-secondary-1: rgba(255, 255, 255, 0.1);
      --button-secondary-2: rgba(255, 255, 255, 0.04);
      --button-danger-1: rgba(255, 123, 131, 0.26);
      --button-danger-2: rgba(255, 187, 120, 0.16);
      --overlay-backdrop: rgba(3, 8, 18, 0.58);
      --overlay-glow: rgba(255, 217, 122, 0.14);
      --overlay-bg-1: rgba(13, 20, 37, 0.9);
      --overlay-bg-2: rgba(7, 10, 22, 0.92);
      --line: rgba(255, 255, 255, 0.12);
      --text: #f8fbff;
      --muted: rgba(248, 251, 255, 0.72);
      --gold: #ffd97a;
      --accent: #8ef3ff;
      --accent-2: #8dffb8;
      --danger: #ff7b83;
      --shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
    }

    * {
      box-sizing: border-box;
      -webkit-tap-highlight-color: transparent;
    }

    html,
    body {
      margin: 0;
      min-height: 100%;
      background-color: var(--bg-1);
      background:
        radial-gradient(circle at 18% 18%, var(--glow-1), transparent 28%),
        radial-gradient(circle at 82% 20%, var(--glow-2), transparent 28%),
        radial-gradient(circle at 50% 100%, var(--glow-3), transparent 34%),
        linear-gradient(160deg, var(--bg-1) 0%, var(--bg-2) 42%, var(--bg-3) 100%);
      color: var(--text);
      font-family: "Trebuchet MS", "Segoe UI", "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
      overflow: hidden;
    }

    .app {
      --app-board-gap: 0px;
      position: relative;
      min-height: 100svh;
      padding: max(14px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
      display: grid;
      grid-template-rows: 1fr auto;
      gap: var(--app-board-gap);
      justify-items: center;
      isolation: isolate;
    }

    .overlay-card,
    .settings-panel {
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.04));
      border: 1px solid rgba(255, 255, 255, 0.08);
      box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2);
    }

    .footer {
      position: relative;
      left: auto;
      transform: none;
      bottom: auto;
      z-index: 16;
      width: auto;
      height: auto;
      padding: 0;
      display: flex;
      gap: 8px;
      justify-content: center;
      align-items: center;
      justify-self: center;
      background: transparent;
      border: 0;
      box-shadow: none;
      pointer-events: auto;
    }

    .settings-trigger,
    .fullscreen-trigger,
    .moves-trigger {
      width: 54px;
      height: 54px;
      border-radius: 26%;
      padding: 0;
      display: grid;
      place-items: center;
      background:
        radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.38), transparent 54%),
        linear-gradient(160deg, rgba(16, 34, 58, 0.86), rgba(10, 21, 39, 0.88));
      border: 0;
      box-shadow: 0 12px 26px rgba(0, 0, 0, 0.24);
      opacity: 0.5;
      pointer-events: auto;
    }

    .settings-trigger {
      font-size: 0;
      line-height: 0;
    }

    .settings-trigger-icon {
      display: block;
      font-family: "Segoe UI Symbol", "Segoe UI Emoji", "Apple Color Emoji", sans-serif;
      font-size: 1.52rem;
      line-height: 1;
      transform: translateY(-1px);
    }

    .fullscreen-trigger {
      font-family: "Trebuchet MS", "Segoe UI", sans-serif;
      font-size: 1.05rem;
      line-height: 1;
      font-weight: 800;
      letter-spacing: 0.03em;
      color: var(--text);
    }

    .moves-trigger {
      font-family: "Trebuchet MS", "Segoe UI", sans-serif;
      font-size: 1.08rem;
      line-height: 1;
      font-weight: 900;
      letter-spacing: 0.03em;
      color: var(--text);
      cursor: default;
    }

    .settings-menu {
      position: fixed;
      inset: 0;
      z-index: 18;
      display: grid;
      place-items: end center;
      padding: 16px max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
      background: rgba(3, 8, 18, 0.52);
      opacity: 0;
      pointer-events: none;
      transition: opacity 200ms ease;
    }

    .settings-menu.show {
      opacity: 1;
      pointer-events: auto;
    }

    .settings-panel {
      --settings-panel-size: min(360px, calc(100svh - 28px), calc(100vw - 32px));
      width: var(--settings-panel-size);
      height: var(--settings-panel-size);
      border-radius: 18px;
      padding: 10px;
      display: grid;
      background:
        radial-gradient(circle at 14% 0%, rgba(142, 243, 255, 0.14), transparent 46%),
        linear-gradient(180deg, rgba(14, 22, 40, 0.95), rgba(8, 14, 28, 0.94));
      transform: translateY(12px) scale(0.98);
      transition: transform 220ms ease;
    }

    .settings-menu.show .settings-panel {
      transform: translateY(0) scale(1);
    }

    .status-line {
      min-width: 0;
      min-height: 66px;
      padding: 10px 12px;
      border-radius: 12px;
      background:
        radial-gradient(circle at 12% 0%, rgba(255, 225, 126, 0.16), transparent 44%),
        linear-gradient(160deg, var(--surface-1), var(--surface-2));
      border: 1px solid rgba(255, 255, 255, 0.09);
      display: flex;
      align-items: center;
      gap: 10px;
      grid-column: 1 / -1;
    }

    .footer-line.settings-grid {
      height: 100%;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      grid-template-rows: repeat(2, minmax(0, 1fr));
      gap: 6px;
      align-items: stretch;
    }

    .settings-grid > * {
      min-height: 0;
    }

    .settings-grid .status-line {
      height: 100%;
      min-height: 0;
      justify-content: center;
      text-align: center;
      border-radius: 10px;
      padding: 8px 10px;
      gap: 8px;
    }

    .settings-grid .status-copy {
      justify-items: center;
    }

    .settings-grid .footer-action {
      height: 100%;
      min-height: 0;
      justify-content: center;
      text-align: center;
      border-radius: 12px;
      padding: 12px 10px;
      gap: 8px;
      display: grid;
      grid-template-columns: 1fr;
      grid-template-rows: auto auto;
      align-content: center;
      justify-items: center;
    }

    .settings-grid .action-copy {
      justify-items: center;
      align-content: center;
      width: 100%;
      height: auto;
      overflow: hidden;
      gap: 4px;
    }

    .settings-grid .action-sub {
      text-align: center;
      white-space: nowrap;
      text-wrap: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      letter-spacing: 0.045em;
      font-size: clamp(0.8rem, 2.4vw, 0.94rem);
      font-weight: 800;
      line-height: 1.02;
    }

    .settings-grid .action-title {
      white-space: nowrap;
      text-wrap: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      font-size: clamp(1.08rem, 3.8vw, 1.36rem);
      line-height: 0.98;
      font-weight: 900;
      letter-spacing: 0.015em;
    }

    .settings-grid .status-title {
      font-size: 0.62rem;
      letter-spacing: 0.11em;
    }

    .settings-grid .status-value {
      font-size: clamp(1rem, 1.8vw, 1.22rem);
    }

    .settings-grid .status-icon,
    .settings-grid .action-icon {
      width: 40px;
      height: 40px;
      font-size: 1.28rem;
    }

    .status-icon {
      width: 34px;
      height: 34px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      font-size: 1.1rem;
      background: rgba(255, 255, 255, 0.09);
      border: 1px solid rgba(255, 255, 255, 0.16);
      flex: 0 0 auto;
    }

    .status-copy {
      min-width: 0;
      display: grid;
      gap: 2px;
    }

    .status-title {
      font-size: 0.66rem;
      text-transform: uppercase;
      letter-spacing: 0.13em;
      color: var(--muted);
      line-height: 1.05;
      font-weight: 800;
    }

    .status-value {
      font-size: clamp(1.1rem, 2.2vw, 1.45rem);
      font-weight: 900;
      line-height: 1;
      letter-spacing: 0.01em;
      color: var(--text);
    }

    .label {
      font-size: 0.68rem;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: var(--muted);
    }

    .value {
      font-size: clamp(1rem, 2.1vw, 1.4rem);
      font-weight: 900;
      line-height: 1;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .shell {
      position: relative;
      width: min(var(--board-shell-width), 100%);
      display: grid;
      justify-items: stretch;
      align-content: start;
      gap: 10px;
    }

    .combo-status {
      position: absolute;
      left: 50%;
      top: 100%;
      z-index: 4;
      transform: translate(-50%, -58%);
      min-height: 1.35rem;
      max-width: min(92%, 520px);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0.28rem 0.75rem;
      border-radius: 999px;
      text-align: center;
      font-size: clamp(0.86rem, 1.8vw, 1rem);
      font-weight: 900;
      letter-spacing: 0.03em;
      line-height: 1.1;
      color: var(--accent);
      text-shadow: 0 0 10px rgba(142, 243, 255, 0.18);
      background: rgba(7, 11, 22, 0.82);
      border: 1px solid rgba(142, 243, 255, 0.24);
      box-shadow: 0 8px 18px rgba(0, 0, 0, 0.24);
      pointer-events: none;
      white-space: nowrap;
    }

    .combo-status:empty {
      display: none;
    }

    .level-progress {
      position: relative;
      z-index: 5;
      width: 100%;
      height: 10px;
      border-radius: 999px;
      overflow: visible;
      background: rgba(255, 255, 255, 0.14);
      border: 1px solid rgba(255, 255, 255, 0.12);
      box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25);
    }

    .level-progress-fill {
      border-radius: inherit;
    }

    .level-progress-fill {
      display: block;
      height: 100%;
      width: 100%;
      transform-origin: left center;
      transform: scaleX(0);
      transition: transform 220ms ease-out;
      background:
        linear-gradient(90deg, rgba(141, 255, 184, 0.9), rgba(142, 243, 255, 0.95));
      box-shadow: 0 0 12px rgba(142, 243, 255, 0.42);
    }

    .canvas-wrap {
      position: relative;
      width: 100%;
      height: var(--board-shell-height);
      aspect-ratio: var(--board-aspect-ratio);
      min-height: 0;
      border-radius: 20px;
      overflow: hidden;
      background: transparent;
      border: 0;
      box-shadow: none;
    }

    canvas {
      display: block;
      width: 100%;
      height: 100%;
      touch-action: none;
      cursor: pointer;
    }

    .footer-line {
      min-width: 0;
      padding: 0;
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
      align-items: stretch;
    }

    .footer-line > * {
      min-width: 0;
    }

    .footer-action {
      width: 100%;
      min-height: 66px;
      padding: 10px 12px;
      border-radius: 12px;
      display: flex;
      align-items: center;
      gap: 10px;
      text-align: left;
      white-space: normal;
      line-height: 1.2;
      text-wrap: balance;
    }

    .action-icon {
      width: 34px;
      height: 34px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      font-size: 1.05rem;
      background: rgba(255, 255, 255, 0.1);
      border: 1px solid rgba(255, 255, 255, 0.18);
      box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
      flex: 0 0 auto;
    }

    .action-copy {
      min-width: 0;
      display: grid;
      gap: 2px;
    }

    .action-title {
      font-size: clamp(0.72rem, 1.35vw, 0.88rem);
      font-weight: 800;
      letter-spacing: 0.02em;
      color: var(--text);
    }

    .action-sub {
      font-size: clamp(0.6rem, 1.1vw, 0.72rem);
      letter-spacing: 0.07em;
      text-transform: uppercase;
      color: var(--muted);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      line-height: 1.1;
    }

    .pill {
      padding: 10px 14px;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.08);
      border: 1px solid rgba(255, 255, 255, 0.08);
      color: var(--muted);
      font-size: 0.92rem;
    }

    button {
      border: 0;
      border-radius: 16px;
      padding: 12px 18px;
      font: inherit;
      color: var(--text);
      background: linear-gradient(135deg, var(--button-1), var(--button-2));
      border: 1px solid rgba(255, 255, 255, 0.1);
      box-shadow: 0 10px 26px rgba(0, 0, 0, 0.18);
      cursor: pointer;
      transition: transform 160ms ease, filter 160ms ease, background 160ms ease;
    }

    button:hover,
    button:focus-visible {
      transform: translateY(-1px);
      filter: brightness(1.06);
      outline: none;
    }

    button.secondary {
      background: linear-gradient(160deg, var(--surface-1), var(--surface-2));
    }

    button.danger {
      background: linear-gradient(160deg, var(--surface-1), var(--surface-2));
    }

    button.footer-action.secondary {
      background:
        radial-gradient(circle at 18% 0%, rgba(127, 246, 255, 0.2), transparent 52%),
        linear-gradient(160deg, var(--surface-1), var(--surface-2));
    }

    button.footer-action.danger {
      background:
        radial-gradient(circle at 18% 0%, rgba(255, 120, 131, 0.24), transparent 54%),
        linear-gradient(160deg, var(--surface-1), var(--surface-2));
    }

    .footer-action:disabled {
      opacity: 0.48;
      cursor: not-allowed;
      transform: none !important;
      filter: none !important;
    }

    .overlay {
      position: fixed;
      inset: 0;
      background: var(--overlay-backdrop);
      display: grid;
      place-items: center;
      padding: 18px;
      opacity: 0;
      pointer-events: none;
      transition: opacity 220ms ease;
      z-index: 20;
    }

    .overlay.show {
      opacity: 1;
      pointer-events: auto;
    }

    .confirm-modal {
      position: fixed;
      inset: 0;
      z-index: 24;
      display: grid;
      place-items: center;
      padding: 18px;
      background:
        radial-gradient(circle at 50% 24%, rgba(255, 217, 122, 0.08), transparent 34%),
        rgba(3, 8, 18, 0.68);
      opacity: 0;
      pointer-events: none;
      transition: opacity 180ms ease;
      backdrop-filter: blur(10px);
    }

    .confirm-modal.show {
      opacity: 1;
      pointer-events: auto;
    }

    .confirm-card {
      width: min(420px, 100%);
      border-radius: 26px;
      padding: 24px 22px 20px;
      display: grid;
      gap: 14px;
      text-align: center;
      background:
        radial-gradient(circle at 50% 0%, rgba(255, 224, 116, 0.16), transparent 46%),
        linear-gradient(180deg, rgba(15, 24, 44, 0.96), rgba(7, 12, 24, 0.96));
      border: 1px solid rgba(255, 255, 255, 0.1);
      box-shadow: 0 28px 72px rgba(0, 0, 0, 0.42), 0 0 0 1px rgba(255, 217, 122, 0.08) inset;
      transform: translateY(10px) scale(0.97);
      transition: transform 200ms ease;
    }

    .confirm-modal.show .confirm-card {
      transform: translateY(0) scale(1);
    }

    .confirm-kicker {
      justify-self: center;
      padding: 0.42rem 0.8rem;
      border-radius: 999px;
      color: var(--gold);
      font-size: 0.72rem;
      font-weight: 900;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      background: rgba(255, 217, 122, 0.09);
      border: 1px solid rgba(255, 217, 122, 0.18);
    }

    .confirm-title {
      margin: 0;
      font-size: clamp(1.45rem, 4vw, 2.2rem);
      line-height: 1.02;
      font-weight: 900;
      letter-spacing: 0.02em;
    }

    .confirm-message {
      margin: 0;
      color: var(--muted);
      font-size: 1rem;
      line-height: 1.5;
    }

    .confirm-actions {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
      width: 100%;
    }

    .confirm-actions button {
      min-width: 0;
      width: 100%;
      padding: 13px 18px;
      font-weight: 900;
      letter-spacing: 0.05em;
      text-transform: uppercase;
    }

    .confirm-actions #confirmAccept {
      background:
        radial-gradient(circle at top, rgba(255, 255, 255, 0.22), transparent 56%),
        linear-gradient(135deg, rgba(255, 217, 122, 0.34), rgba(142, 243, 255, 0.22));
      border-color: rgba(255, 236, 188, 0.28);
    }

    .overlay-card {
      width: min(520px, 100%);
      border-radius: 28px;
      padding: 24px;
      display: grid;
      gap: 14px;
      justify-items: center;
      text-align: center;
      background:
        radial-gradient(circle at top, var(--overlay-glow), transparent 50%),
        linear-gradient(180deg, var(--overlay-bg-1), var(--overlay-bg-2));
    }

    .splash {
      position: fixed;
      inset: 0;
      z-index: 30;
      display: grid;
      place-items: center;
      padding: 18px;
      background:
        radial-gradient(circle at 16% 16%, rgba(255, 110, 150, 0.36), transparent 34%),
        radial-gradient(circle at 84% 14%, rgba(75, 220, 255, 0.38), transparent 34%),
        radial-gradient(circle at 50% 90%, rgba(255, 225, 95, 0.33), transparent 38%),
        linear-gradient(135deg, #ffe989 0%, #ffd0f3 44%, #bff4ff 100%);
    }

    .splash.hidden {
      display: none !important;
    }

    .splash-card {
      width: min(660px, 100%);
      border-radius: 36px;
      padding: 32px 28px;
      display: grid;
      gap: 16px;
      justify-items: center;
      text-align: center;
      background:
        radial-gradient(circle at 18% 12%, var(--splash-accent-1, rgba(255, 92, 145, 0.34)), transparent 42%),
        radial-gradient(circle at 80% 84%, var(--splash-accent-2, rgba(89, 215, 255, 0.32)), transparent 46%),
        linear-gradient(155deg, var(--splash-card-1, rgba(255, 255, 255, 0.92)), var(--splash-card-2, rgba(255, 255, 255, 0.82)));
      border: 1px solid rgba(255, 255, 255, 0.72);
      box-shadow: 0 22px 54px rgba(255, 111, 154, 0.2), 0 16px 40px rgba(87, 187, 255, 0.18);
    }

    .splash-fruits {
      font-size: clamp(2.2rem, 7vw, 3.4rem);
      line-height: 1;
      letter-spacing: 0.04em;
      user-select: none;
    }

    .splash-title {
      margin: 0;
      font-size: clamp(2.8rem, 8vw, 5rem);
      line-height: 0.95;
      letter-spacing: 0.04em;
      font-weight: 900;
      text-transform: none;
      color: #ff2f7a;
      text-shadow: 0 4px 0 rgba(255, 255, 255, 0.9), 0 10px 24px rgba(255, 47, 122, 0.32);
    }

    .splash-copy {
      color: rgba(34, 19, 42, 0.82);
      font-size: clamp(1rem, 2.7vw, 1.2rem);
      line-height: 1.48;
      max-width: 36ch;
      margin: 0;
    }

    .splash-actions {
      display: flex;
      justify-content: center;
      width: 100%;
      margin-top: 2px;
    }

    .splash-actions #startBtn {
      min-width: 220px;
      padding: 14px 24px;
      font-weight: 900;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      color: #24102d;
      background:
        radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.7), transparent 54%),
        linear-gradient(135deg, rgba(255, 151, 199, 0.88), rgba(255, 238, 130, 0.94));
      border-color: rgba(255, 255, 255, 0.92);
      box-shadow: 0 12px 28px rgba(255, 111, 154, 0.34), 0 10px 24px rgba(98, 186, 255, 0.3);
    }

    .overlay-title {
      margin: 0;
      font-size: clamp(2rem, 5vw, 3rem);
      line-height: 1;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      font-weight: 900;
      width: 100%;
      text-align: center;
    }

    .overlay-sub {
      color: var(--muted);
      font-size: 1rem;
      line-height: 1.45;
      max-width: 42ch;
    }

    .overlay-sub.celebration {
      order: -1;
      color: var(--text);
      font-size: clamp(1.7rem, 5.4vw, 2.7rem);
      line-height: 1;
      letter-spacing: 0.12em;
      text-align: center;
    }

    .overlay-stats {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
      width: 100%;
    }

    .overlay-stats.compact {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      width: min(360px, 100%);
      justify-self: center;
    }

    .overlay-stat {
      border-radius: 18px;
      padding: 12px;
      background: rgba(255, 255, 255, 0.06);
      border: 1px solid rgba(255, 255, 255, 0.08);
      display: grid;
      gap: 4px;
      justify-items: center;
      text-align: center;
    }

    .overlay-stat .value {
      width: 100%;
      text-align: center;
    }

    .overlay-actions {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      justify-content: center;
      width: 100%;
    }

    .overlay-actions.single {
      width: auto;
      justify-self: center;
    }

    .overlay-actions.single #overlayPrimary {
      flex: 0 0 auto;
    }

    .overlay-actions #overlayPrimary {
      min-width: 220px;
      padding: 14px 24px;
      font-weight: 900;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      background:
        radial-gradient(circle at top, rgba(255, 255, 255, 0.22), transparent 55%),
        linear-gradient(135deg, rgba(255, 217, 122, 0.34), rgba(142, 243, 255, 0.24));
      border-color: rgba(255, 236, 188, 0.28);
      box-shadow: 0 14px 34px rgba(0, 0, 0, 0.24), 0 0 0 1px rgba(255, 228, 148, 0.1) inset;
    }

    .overlay-actions #overlayPrimary:hover,
    .overlay-actions #overlayPrimary:focus-visible {
      filter: brightness(1.1);
      transform: translateY(-2px) scale(1.01);
    }

    .hidden {
      display: none !important;
    }

    @media (max-width: 600px) {
      .app {
        --app-board-gap: 10px;
        grid-template-rows: auto auto;
        align-content: center;
        justify-content: center;
        padding-left: max(10px, env(safe-area-inset-left));
        padding-right: max(10px, env(safe-area-inset-right));
      }

      .shell {
        justify-items: stretch;
        align-content: start;
      }

      .overlay-card,
      .settings-panel,
      .confirm-card {
        border-radius: 20px;
      }

      .canvas-wrap {
        border-radius: 24px;
      }

      .footer-line,
      .confirm-actions,
      .overlay-actions,
      .splash-actions {
        width: 100%;
        justify-content: center;
      }

      .splash-card {
        padding: 28px 18px;
      }

      button {
        flex: 1 1 140px;
      }

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

      .footer-line {
        grid-template-columns: 1fr;
      }

      .footer-action {
        min-height: 60px;
        padding: 9px 10px;
      }

      .settings-trigger,
      .fullscreen-trigger,
      .moves-trigger {
        width: 50px;
        height: 50px;
      }

      .settings-trigger-icon {
        font-size: 1.44rem;
      }

      .footer {
        align-self: start;
      }

      .settings-menu {
        padding-bottom: max(12px, env(safe-area-inset-bottom));
      }
    }

    @media (orientation: landscape) and (max-height: 560px) {
      .app {
        grid-template-rows: 1fr auto;
        align-content: start;
        gap: 8px;
      }

      .shell {
        justify-items: stretch;
        align-content: start;
      }

      .label {
        font-size: 0.62rem;
      }

      .value {
        font-size: clamp(0.95rem, 1.8vw, 1.2rem);
      }

      .canvas-wrap {
        min-height: 0;
      }

    }