/* ==========================================================================
   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; }
}