.stacks-page .fullscreen-toggle-btn {
  letter-spacing: 0.12em;
}

.stacks-page .fullscreen-toggle-btn.is-active {
  color: #eef2f8;
  border-color: rgba(111, 152, 255, 0.5);
  background: rgba(111, 152, 255, 0.16);
}

body.stacks-app-mode {
  --stacks-fullscreen-board-width: min(calc((100dvh - 11rem) / 2), calc(100dvw - 22rem), 25rem);
}

body.stacks-app-mode .wrap {
  min-height: 100dvh;
  padding: 0;
}

body.stacks-app-mode .site-header {
  display: none;
}

body.stacks-app-mode .shell {
  max-width: none;
  min-height: 100dvh;
  margin: 0;
  padding-top: max(0.8rem, env(safe-area-inset-top, 0px));
  padding-right: max(6rem, calc(env(safe-area-inset-right, 0px) + 5.25rem));
  padding-bottom: max(0.85rem, env(safe-area-inset-bottom, 0px));
  padding-left: max(0.8rem, env(safe-area-inset-left, 0px));
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable both-edges;
}

body.stacks-app-mode .hero {
  grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
  gap: 0.7rem;
  margin-bottom: 0.75rem;
}

body.stacks-app-mode .hero-copy-wrap {
  gap: 0.7rem;
}

body.stacks-app-mode .eyebrow {
  margin-bottom: 0.18rem;
  font-size: 0.64rem;
}

body.stacks-app-mode .hero h1 {
  font-size: clamp(2rem, 3.2vw, 3.15rem);
}

body.stacks-app-mode .hero-status-grid {
  padding: 0.5rem;
}

body.stacks-app-mode .hero-status-grid .stat-value {
  white-space: normal;
}

body.stacks-app-mode .game-layout {
  grid-template-columns: minmax(0, 1fr);
  justify-content: center;
}

body.stacks-app-mode .game-surface-card {
  max-width: min(100%, 64rem);
  margin: 0 auto;
}

body.stacks-app-mode .canvas-stage {
  grid-template-columns: 4rem minmax(0, 1fr) 6.6rem;
  gap: 0.6rem;
}

body.stacks-app-mode .board-control-shell {
  gap: 0.55rem;
}

body.stacks-app-mode .stacks-board-frame {
  width: min(100%, var(--stacks-fullscreen-board-width));
}

body.stacks-app-mode .board-arrow {
  min-height: clamp(5.8rem, calc(var(--stacks-fullscreen-board-width) * 0.36), 8.8rem);
}

body.stacks-app-mode .board-preview-card {
  gap: 0.42rem;
}

body.stacks-app-mode .board-preview-frame {
  width: min(100%, 6.2rem);
}

body.stacks-app-mode #nextCanvas {
  width: min(100%, 6rem);
}

body.stacks-app-mode .floating-controls {
  right: max(0.85rem, env(safe-area-inset-right, 0px));
  bottom: max(0.85rem, env(safe-area-inset-bottom, 0px));
}

body.stacks-app-mode .help-panel {
  width: min(26rem, calc(100dvw - 7rem));
}

@media (max-width: 980px) {
  body.stacks-app-mode {
    --stacks-fullscreen-board-width: min(calc((100dvh - 15rem) / 2), calc(100dvw - 10rem), 23rem);
  }

  body.stacks-app-mode .shell {
    padding-right: max(0.8rem, env(safe-area-inset-right, 0px));
    min-height: auto;
  }

  body.stacks-app-mode .hero {
    grid-template-columns: 1fr;
  }

  body.stacks-app-mode .game-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  body.stacks-app-mode .floating-controls {
    position: static;
    margin: 0.9rem auto 0;
    width: min(100%, 30rem);
    align-items: stretch;
  }

  body.stacks-app-mode .floating-game-actions {
    width: 100%;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  body.stacks-app-mode .floating-action,
  body.stacks-app-mode .floating-game-actions,
  body.stacks-app-mode .help-panel {
    width: 100%;
    min-width: 0;
  }

  body.stacks-app-mode .floating-action {
    min-height: 3rem;
  }
}

@media (max-width: 720px) {
  body.stacks-app-mode {
    --stacks-fullscreen-board-width: min(calc((100dvh - 16rem) / 2), calc(100dvw - 7rem), 21rem);
  }

  body.stacks-app-mode .shell {
    padding-top: max(0.65rem, env(safe-area-inset-top, 0px));
    padding-right: max(0.65rem, env(safe-area-inset-right, 0px));
    padding-bottom: max(0.75rem, env(safe-area-inset-bottom, 0px));
    padding-left: max(0.65rem, env(safe-area-inset-left, 0px));
  }

  body.stacks-app-mode .hero {
    margin-bottom: 0.55rem;
  }

  body.stacks-app-mode .canvas-stage {
    grid-template-columns: 4rem minmax(0, 1fr);
  }

  body.stacks-app-mode .board-preview-card {
    width: 6.2rem;
  }

  body.stacks-app-mode .floating-controls {
    width: 100%;
  }

  body.stacks-app-mode .help-panel {
    width: 100%;
  }
}