/* Nooricot's world: one storybook night-and-apricot palette for every page (deliberately single-theme). */
:root {
  --night: #0c1640;
  --dusk: #24357a;
  --ink: #0a1030;
  --cream: #fff4dc;
  --apricot: #f2a65a;
  --apricot-deep: #d9823a;
  --sage: #8fb59a;
  --rose: #f3a9b2;
  --line: rgba(255, 244, 220, .22);
  --display: "Grandstander", "Comic Sans MS", "Chalkboard SE", system-ui, sans-serif;
  --body: "Nunito", "Segoe UI", system-ui, sans-serif;
  color-scheme: dark;
}
html, body { height: 100%; }
body { margin: 0; background: var(--night); color: var(--cream); font-family: var(--body); -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
[hidden] { display: none !important; }
.round-btn {
  width: 52px; height: 52px; border-radius: 50%; border: 2px solid var(--line); background: rgba(10, 16, 48, .55);
  color: var(--cream); display: grid; place-items: center; cursor: pointer; text-decoration: none;
}
.round-btn svg { width: 26px; height: 26px; }
.round-btn:focus-visible, .play:focus-visible, a:focus-visible { outline: 3px solid var(--apricot); outline-offset: 3px; }
.hud-left { position: fixed; top: calc(12px + env(safe-area-inset-top, 0px)); left: calc(12px + env(safe-area-inset-left, 0px)); z-index: 5; }
.hud-right { position: fixed; top: calc(12px + env(safe-area-inset-top, 0px)); right: calc(12px + env(safe-area-inset-right, 0px)); z-index: 5; }
.game { overflow: hidden; touch-action: manipulation; user-select: none; }
.game canvas { touch-action: none; }   /* a finger drag steers the game instead of scrolling or cancelling */
.game canvas { position: fixed; inset: 0; width: 100%; height: 100%; display: block; cursor: pointer; }
.start {
  position: fixed; inset: 0; display: grid; place-items: center; z-index: 4;
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
  background: radial-gradient(ellipse at 50% 40%, rgba(36, 53, 122, .35), rgba(10, 16, 48, .84));
}
.card { display: grid; justify-items: center; gap: 14px; text-align: center; max-width: 30rem; }
.card h1 {
  font-family: var(--display); font-weight: 800; font-size: clamp(2.4rem, 9vw, 4.2rem); line-height: .95; margin: 0;
  text-wrap: balance; text-shadow: 0 3px 0 rgba(10, 16, 48, .6), 0 0 30px rgba(255, 228, 160, .35);
}
.card p { margin: 0; font-size: 1.15rem; font-weight: 600; opacity: .9; }
.play {
  margin-top: 10px; width: 112px; height: 112px; border-radius: 50%; border: 0; cursor: pointer; color: var(--ink);
  background: radial-gradient(circle at 38% 32%, #fff8e6, #f6cf86 55%, #e79a4f);
  box-shadow: 0 0 0 10px rgba(255, 228, 160, .15), 0 0 50px rgba(255, 220, 140, .55);
  display: grid; place-items: center; animation: glow 2.4s ease-in-out infinite;
}
.play svg { width: 46px; height: 46px; margin-left: 8px; }
.brand { font-family: var(--display); font-weight: 600; letter-spacing: 2px; font-size: .85rem; opacity: .6; text-transform: uppercase; }
@keyframes glow { 50% { box-shadow: 0 0 0 16px rgba(255, 228, 160, .08), 0 0 70px rgba(255, 220, 140, .75); } }
@media (prefers-reduced-motion: reduce) { .play { animation: none; } }
.rotate { position: fixed; inset: 0; z-index: 9; display: grid; place-content: center; justify-items: center; gap: 12px; text-align: center;
  background: var(--night); color: var(--cream); font-family: var(--display); font-weight: 800; font-size: 1.6rem;
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.rotate img { width: 160px; height: auto; animation: tip 2.4s ease-in-out infinite; }
.rotate p { margin: 0; max-width: 16ch; }
@keyframes tip { 0%, 30% { transform: rotate(0); } 50%, 80% { transform: rotate(-90deg); } 100% { transform: rotate(0); } }
@media (prefers-reduced-motion: reduce) { .rotate img { animation: none; } }
.play:disabled { cursor: wait; animation: none; }