/* ==========================================================================
   Play It My Way — shared cross-page components
   Game pages link this AFTER their own styles:
     <link rel="stylesheet" href="../../components.css" />
   Deliberately self-sufficient: no tokens.css variables, so the older game
   pages (which don't link tokens.css yet) render it identically.
   ========================================================================== */

/* The candy button — the site's one press-me pattern. A pill sitting on a
   hard, un-blurred shadow in a darker sibling of its fill; :active sinks it
   onto that shadow. Colour variants only ever change the two custom props. */
.candy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  font-weight: 600;
  font-size: 18px;
  padding: 14px 28px;
  border-radius: 999px;
  text-decoration: none;
  background: var(--candy-fill, #ff6b57);
  color: var(--candy-ink, #2b2a5e);
  box-shadow: 0 5px 0 0 var(--candy, #9a3412);
  transition: transform 120ms ease, box-shadow 120ms ease;
}

.candy:active {
  transform: translateY(5px);
  box-shadow: 0 1px 0 0 var(--candy, #9a3412);
}

.candy-coral  { --candy-fill: #ff6b57; --candy-ink: #2b2a5e; --candy: #9a3412; }
.candy-violet { --candy-fill: #7c3aed; --candy-ink: #ffffff; --candy: #4c1d95; }
.candy-cream  { --candy-fill: #fff6ea; --candy-ink: #2b2a5e; --candy: #d9c8ae; }

/* Trust footer: the site's promise, visible on every game page.
   White card on its own hard candy shadow, so it belongs to the same
   physical world as the buttons. Reads on both the warm cream pages and the
   gradient-background legacy pages. */
.site-footer {
  max-width: 640px;
  margin: 32px auto 12px;
  padding: 14px 18px 16px;
  background: rgba(255, 255, 255, 0.94);
  color: #33302e;
  border: 2px solid #efe4d3;
  border-radius: 16px;
  box-shadow: 0 4px 0 0 rgba(51, 48, 46, 0.12);
  text-align: center;
  font-size: 15px;
  line-height: 1.6;
}

.site-footer-badges {
  margin: 0 0 6px;
  color: #5f5751;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.site-footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 4px 18px;
}

.site-footer-links a {
  color: #9a3412;
  font-weight: 600;
  text-decoration: none;
  /* comfortable touch target without inflating the card */
  padding: 8px 2px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.site-footer-links a:hover {
  text-decoration: underline;
}

/* ==========================================================================
   App shell — the bottom bar, shown ONLY when running as an installed app.

   In a browser tab this would be clutter: the browser already gives you back
   and an address bar. But an installed app on iOS has NO back button at all —
   only an edge-swipe most people never discover — so a child who opens a game
   is stranded. That makes this a navigation fix, not decoration.

   Selectors are `html body` / `html.pimw-installed` so they outrank the page's
   own `body` rule, which is defined later in each page's inline <style>.
   ========================================================================== */
.pimw-appbar {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 900;              /* under game modals (1000+), over everything else */
  background: #2b2a5e;
  border-top: 1px solid rgba(201, 199, 245, 0.22);
  padding-bottom: env(safe-area-inset-bottom);
  justify-content: space-around;
  align-items: stretch;
}

.pimw-appbar-btn {
  flex: 1 1 0;
  min-height: 56px;
  border: 0;
  background: none;
  cursor: pointer;
  font: inherit;
  font-family: inherit;
  color: #c9c7f5;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 6px 4px;
  -webkit-tap-highlight-color: transparent;
  transition: color 120ms ease, transform 120ms ease;
}

.pimw-appbar-btn:hover { color: #fff6ea; }
.pimw-appbar-btn:active { transform: scale(0.92); color: #fff6ea; }

.pimw-appbar-ic {
  font-size: 21px;
  line-height: 1;
}

.pimw-appbar-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* Show the bar, and keep page content clear of it. */
@media (display-mode: standalone) {
  .pimw-appbar { display: flex; }
  html body { padding-bottom: calc(62px + env(safe-area-inset-bottom)); }
  html .pimw-sound-btn { bottom: calc(74px + env(safe-area-inset-bottom)); }
  html .site-footer { margin-bottom: 20px; }
}

/* Fallback for iOS versions that report standalone only via navigator.standalone,
   and for any browser without display-mode support. Set by the inline script. */
html.pimw-installed .pimw-appbar { display: flex; }
html.pimw-installed body { padding-bottom: calc(62px + env(safe-area-inset-bottom)); }
html.pimw-installed .pimw-sound-btn { bottom: calc(74px + env(safe-area-inset-bottom)); }
html.pimw-installed .site-footer { margin-bottom: 20px; }

@media print {
  .pimw-appbar { display: none !important; }
}

/* Site-wide sound toggle (see components.js). Fixed bottom-right so it sits
   in the same place on every game regardless of that page's own layout —
   a classroom and a sensory-sensitive child both need it findable without
   hunting. Kept below modal overlays (z-index 1000+) on purpose. */
.pimw-sound-btn {
  position: fixed;
  right: max(12px, env(safe-area-inset-right));
  bottom: max(12px, env(safe-area-inset-bottom));
  z-index: 500;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 2px solid rgba(51, 48, 46, 0.15);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 4px 0 0 rgba(51, 48, 46, 0.18);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
  transition: transform 120ms ease, box-shadow 120ms ease;
}

.pimw-sound-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 0 0 rgba(51, 48, 46, 0.18);
}

.pimw-sound-btn:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 0 rgba(51, 48, 46, 0.18);
}

.pimw-sound-btn.is-off {
  background: rgba(240, 235, 228, 0.94);
  border-color: rgba(51, 48, 46, 0.3);
}

@media print {
  .pimw-sound-btn { display: none !important; }
}

/* Full-screen toggle (see components.js). Top-right so it never competes
   with the sound button (bottom-right) or the back link (top-left), and
   fixed so it's still reachable without scrolling back up mid-game. It
   reclaims the browser's own chrome on top of whatever the page already
   saves — a distinct win from the layout work, not a substitute for it. */
.pimw-fs-btn {
  position: fixed;
  top: max(12px, env(safe-area-inset-top));
  right: max(12px, env(safe-area-inset-right));
  z-index: 500;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 2px solid rgba(51, 48, 46, 0.15);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 4px 0 0 rgba(51, 48, 46, 0.18);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
  transition: transform 120ms ease, box-shadow 120ms ease;
}

.pimw-fs-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 0 0 rgba(51, 48, 46, 0.18);
}

.pimw-fs-btn:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 0 rgba(51, 48, 46, 0.18);
}

/* while actually in full screen: a filled, unmistakably "tap to leave" look */
.pimw-fs-btn.is-on {
  background: rgba(43, 42, 94, 0.94);
  color: #fff6ea;
  border-color: rgba(43, 42, 94, 0.55);
}

@media print {
  .pimw-fs-btn { display: none !important; }
}

/* ---- what "full screen" actually means here -----------------------------
   Entering full screen sets .pimw-fs on <html> (see components.js). The
   browser chrome is already gone by then; these rules clear the SITE's own
   furniture too, so what's left is the game and the controls needed to play
   and to leave.

   Hidden: the page title block, the "how to play" notes, and the trust
   footer — all page scaffolding rather than part of playing.

   Deliberately kept: the back link and the installed-app bar (navigation —
   removing every exit but one button is how people get stuck), the sound
   toggle, and this file's own full-screen button. Also untouched are the
   in-game legends and helper chips (.legend, .helper), which explain what
   the pieces on the board mean and are needed mid-play.

   Selectors carry html.pimw-fs so they outrank each page's own inline rules,
   which are defined later in the document than this stylesheet. */
html.pimw-fs .site-footer,
html.pimw-fs .header,
html.pimw-fs .game-head,
html.pimw-fs .how-to {
  display: none;
}