/* ═══════════════════════════════════════════════════════════════
   careiti-gameshell.css — styling for the shared game frame
   Pairs with careiti-gameshell.js. Album register throughout.
   ═══════════════════════════════════════════════════════════════ */

/* ── Exit ───────────────────────────────────────────────────────
   Top-left, fixed, always on screen. Fixed rather than in-flow because
   the games scroll their play area, and an exit that scrolls away is the
   problem being fixed. */
.cgs-back {
  position: fixed;
  top: max(10px, env(safe-area-inset-top));
  left: max(10px, env(safe-area-inset-left));
  z-index: 120;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 8px 14px 8px 10px;
  border: 1px solid var(--rule, #DFD3BE);
  border-radius: var(--r-ui, 8px);
  background: var(--print, #FFFDF8);
  color: var(--ink-2, #5B5147);
  font-family: var(--f-album, system-ui, sans-serif);
  font-size: max(calc(13px * var(--ct-k2, 1)), var(--ct-min, 0px));
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(58, 42, 20, .10);
}
.cgs-back svg { width: 18px; height: 18px; flex: none; }
.cgs-back:active { background: var(--paper-2, #EFE7D8); }

@media (min-width: 700px) {
  .cgs-back { min-height: var(--ct-tap, 56px); padding: 10px 18px 10px 14px; }
  .cgs-back svg { width: 22px; height: 22px; }
}

/* Very small screens: the label goes, the target stays. */
@media (max-width: 380px) {
  .cgs-back span { display: none; }
  .cgs-back { min-width: 44px; justify-content: center; padding: 8px; }
}

/* ── Sticky start ───────────────────────────────────────────────
   The level picker is a scrolling grid; its start button sat underneath
   it, so on a tablet you chose a level and then had to scroll to commit.
   Pinning it to the bottom of the viewport keeps choice and confirmation
   in the same view.
   `position:sticky` with `bottom` keeps the button in normal flow — it
   only pins once it would leave the screen, so short pages are unchanged
   and no space needs reserving. */
body[data-ct="app"] #startBtn {
  position: sticky;
  bottom: calc(max(12px, env(safe-area-inset-bottom)) + 84px);
  z-index: 60;
  box-shadow: 0 6px 20px rgba(58, 42, 20, .18);
}

/* ── Result actions ─────────────────────────────────────────────
   Next level leads; retry stays available but stops being the only exit
   from a screen that just told you that you had won. */
.cgs-next {
  display: block;
  width: 100%;
  margin-bottom: 10px;
  padding: 16px;
  border: 1px solid var(--teal-deep, #095A52);
  border-radius: var(--r-ui, 8px);
  background: var(--teal-ink, #0B6E64);
  color: #fff;
  font-family: var(--f-album, system-ui, sans-serif);
  font-size: max(calc(16px * var(--ct-k3, 1)), var(--ct-min, 0px));
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.cgs-next:active { background: var(--teal-deep, #095A52); transform: scale(.985); }

@media (min-width: 700px) {
  .cgs-next { min-height: var(--ct-tap, 56px); }
}

/* Demoted retry: still a full-size target, visibly the secondary choice. */
.cgs-retry-secondary {
  background: transparent !important;
  background-image: none !important;
  border: 1px solid var(--rule, #DFD3BE) !important;
  color: var(--ink-2, #5B5147) !important;
  box-shadow: none !important;
  font-weight: 600 !important;
}

@media (prefers-reduced-motion: reduce) {
  .cgs-next:active { transform: none; }
}