/* The way back to the hub: one look, one place, every page of every game ({{hub .Lang}}, docs:
   games/README.md step 6). A fixed button in the bottom-left corner with safe-area insets, at
   z-index var(--mp-hub-z). Games write no .mp-hub CSS; a layout keeps that corner clear of its
   controls. */
.mp-hub {
  position: fixed; z-index: var(--mp-hub-z, 8);
  left: calc(14px + env(safe-area-inset-left)); bottom: calc(14px + env(safe-area-inset-bottom));
  display: inline-grid; place-items: center;
  width: 48px; height: 48px; border-radius: 50%;
  background: #fff; color: #1d1b2b; text-decoration: none;
  box-shadow: 0 3px 0 rgba(0, 0, 0, .28);
}
/* It steps aside while a modal covers the page: any visible `[aria-modal="true"]` (a card or sheet is
   `role="dialog" aria-modal="true"` and closed with `hidden`), or an element marked `data-hides-hub`.
   The hub sits outside the stage root, which is its own stacking context, so z-order alone never covers it. */
body:has([aria-modal="true"]:not([hidden]), [data-hides-hub]:not([hidden])) .mp-hub { visibility: hidden; }
.mp-hub svg { width: 24px; height: 24px; }
.mp-hub:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }

/* Touch hardening (ADR 0015): a child's hands must not zoom, select, highlight or open a menu. */
html { touch-action: manipulation; }
* { -webkit-tap-highlight-color: transparent; }
body { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
input, textarea, [contenteditable], .selectable {
  -webkit-touch-callout: default; -webkit-user-select: text; user-select: text;
}
img, svg { -webkit-user-drag: none; }

/* Focus rings are for the keyboard: base.js marks <html data-input="touch|mouse|key"> from the last
   input. Before any input there is no mark and rings show. */
html[data-input="touch"] :focus-visible, html[data-input="mouse"] :focus-visible {
  outline: none !important;
}
html[data-input="touch"] input:focus-visible, html[data-input="mouse"] input:focus-visible,
html[data-input="touch"] textarea:focus-visible, html[data-input="mouse"] textarea:focus-visible {
  outline: revert !important;
}

/* The sticker moment (app/stickers, ADR 0016): a new sticker pops up in the middle of the page on a burst of rays,
   with sparkles round it, and goes. It takes no taps and says nothing. */
.mp-sticker-moment {
  position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center;
  pointer-events: none; overflow: hidden;
  background: radial-gradient(circle at 50% 50%, rgb(20 16 40 / 55%), rgb(20 16 40 / 0%) 70%);
  animation: mp-sticker-veil 2.2s ease-out both;
}
.mp-sticker-moment > * { grid-area: 1 / 1; }
.mp-sticker-rays {
  width: min(120vw, 120vh); aspect-ratio: 1; border-radius: 50%;
  background: repeating-conic-gradient(rgb(255 226 120 / 55%) 0 9deg, rgb(255 226 120 / 0%) 9deg 22.5deg);
  -webkit-mask-image: radial-gradient(circle, #000 0 18%, transparent 62%); mask-image: radial-gradient(circle, #000 0 18%, transparent 62%);
  animation: mp-sticker-rays 2.2s linear both;
}
.mp-sticker-pic {
  width: min(52vmin, 360px); height: min(52vmin, 360px); object-fit: contain;
  filter: drop-shadow(4px 0 0 #fff) drop-shadow(-4px 0 0 #fff) drop-shadow(0 4px 0 #fff) drop-shadow(0 -4px 0 #fff) drop-shadow(0 12px 14px rgb(0 0 0 / 40%));
  animation: mp-sticker-pop 2.2s cubic-bezier(.3, 1.5, .5, 1) both;
}
.mp-sticker-spark {
  width: 18px; height: 18px; background: #fff3b0; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  transform: rotate(var(--a)) translateY(0) scale(0);
  animation: mp-sticker-spark 1.4s ease-out var(--d) both;
}
@keyframes mp-sticker-veil { 0% { opacity: 0; } 12% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; } }
@keyframes mp-sticker-rays { from { transform: rotate(0) scale(.6); } to { transform: rotate(50deg) scale(1); } }
@keyframes mp-sticker-pop {
  0% { transform: scale(0) rotate(-24deg); opacity: 0; }
  28% { transform: scale(1.12) rotate(5deg); opacity: 1; }
  40% { transform: scale(1) rotate(-3deg); }
  85% { transform: scale(1) rotate(0); opacity: 1; }
  100% { transform: scale(.7) translateY(-8%); opacity: 0; }
}
@keyframes mp-sticker-spark {
  0% { transform: rotate(var(--a)) translateY(0) scale(0); opacity: 1; }
  40% { opacity: 1; }
  100% { transform: rotate(var(--a)) translateY(min(34vmin, 250px)) scale(1.2); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .mp-sticker-rays, .mp-sticker-spark { display: none; }
  .mp-sticker-pic { animation: mp-sticker-fade 2.2s ease-out both; }
  @keyframes mp-sticker-fade { 0%, 100% { opacity: 0; } 15%, 80% { opacity: 1; } }
}

/* Installed on a tablet, miniplay is landscape (ADR 0018). base.js adds the .mp-turn cover on an
   installed tablet and marks <html data-turn> while its screen is upright, where the browser could not
   lock it: a tablet on the night green turns sideways, over everything, until the child turns theirs. */
.mp-turn { display: none; }
html[data-turn] .mp-turn {
  position: fixed; inset: 0; z-index: 3000; display: grid; place-items: center;
  background: #1d3a2c; touch-action: none;
}
html[data-turn] body { overflow: hidden; }
.mp-turn svg { width: min(62vmin, 420px); height: auto; overflow: visible; }
.mp-turn-tablet { fill: #fff4dc; stroke: #3a1e0c; transform-origin: 60px 60px; animation: mp-turn 2.4s ease-in-out infinite; }
.mp-turn-tablet circle { stroke: none; fill: #3a1e0c; }
.mp-turn-arrow { stroke: #ffd54a; animation: mp-turn-arrow 2.4s ease-in-out infinite; }
@keyframes mp-turn { 0%, 15% { transform: rotate(0); } 45%, 80% { transform: rotate(90deg); } 100% { transform: rotate(0); } }
@keyframes mp-turn-arrow { 0%, 15% { opacity: 1; } 40%, 85% { opacity: 0; } 100% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .mp-turn-tablet { animation: none; }
  .mp-turn-arrow { animation: none; }
}