/* ——— Dad's Atlas Book: tokens, app shell, shared UI pieces (STYLE.md) ——— */
:root {
  --ink: #2a211c;
  --ink-soft: #5a4a40;
  --paper: #f6ecd4;
  --paper-deep: #ead9b0;
  --cream: #fff4d6;
  --white: #ffffff;
  --sea: #3a89d1;
  --sea-deep: #2a64ad;
  --sea-light: #69b2e4;
  --shallow: #8ad1d3;
  --foam: #e6f5f4;
  --sky-pale: #a6d4f7;
  --night: #1d2f6b;
  --red: #ef5b3c;
  --red-deep: #c8442a;
  --yellow: #f7c948;
  --ochre: #e0a030;
  --orange: #f28c38;
  --lilac: #c9a6d6;
  --pink: #f2a3c7;
  --purple: #8e6bbf;
  --magic: #e8f25a;
  --lime: #8cc63f;
  --meadow: #a8cf62;
  --forest: #3f9a5a;
  --olive: #8a9a3c;
  --sail: #fbf1d9;
  --stone: #e3d6bd;

  /* block/print Hebrew only (never a cursive script): Rubik reads, Secular One letters titles & ribbons */
  --font: 'Rubik', 'Arial Hebrew', 'Noto Sans Hebrew', system-ui, sans-serif;
  --font-title: 'Secular One', 'Rubik', 'Arial Hebrew', 'Noto Sans Hebrew', system-ui, sans-serif;

  --line: 3px;
  --flat: 3px 4px 0 rgba(42, 33, 28, 0.22);
  --flat-big: 6px 8px 0 rgba(42, 33, 28, 0.26);
  --wobble: 52% 48% 50% 50% / 50% 53% 47% 50%;
  --sat: env(safe-area-inset-top, 0px);
  --sar: env(safe-area-inset-right, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
  --gap: clamp(10px, 2.2vmin, 22px);
  --hud: clamp(64px, 8.4vmin, 80px);
  --spring: cubic-bezier(.2, 1.35, .4, 1);
  --grain: none;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  background: var(--sea);
  color: var(--ink);
  font-family: var(--font);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-font-smoothing: antialiased;
}
body { position: fixed; inset: 0; width: 100%; }

button { font: inherit; color: inherit; }
img { -webkit-user-drag: none; }
svg.ico { display: block; width: 100%; height: 100%; overflow: visible; }

#app {
  position: fixed;
  inset: 0;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  isolation: isolate;
}
#map {
  position: absolute;
  inset: 0;
  touch-action: none;
  -ms-touch-action: none;
  overflow: hidden;
  background: var(--sea);
}
#ui { position: absolute; inset: 0; pointer-events: none; z-index: 10; }


.scrollable { -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.text-select, .parents-panel input, .parents-panel textarea { -webkit-user-select: text; user-select: text; }

/* ——— paper ——— */
.paper {
  background-color: var(--cream);
  background-image: var(--grain);
  background-size: 192px 192px;
  border: var(--line) solid var(--ink);
  border-radius: 24px 28px 22px 26px / 26px 22px 28px 24px;
  box-shadow: var(--flat-big);
}

/* ——— layers ——— */
.layer { position: absolute; inset: 0; pointer-events: none; }
.layer.is-open { pointer-events: auto; }
.scrim {
  position: absolute; inset: 0;
  background: rgba(42, 33, 28, 0.42);
  opacity: 0;
  transition: opacity .35s ease;
}
.layer.is-open > .scrim { opacity: 1; }

/* ——— round buttons ——— */
.round-btn, .hud-btn {
  position: relative;
  display: grid;
  place-items: center;
  width: 60px; height: 60px;
  padding: 0;
  border: var(--line) solid var(--ink);
  border-radius: var(--wobble);
  background-color: var(--cream);
  background-image: var(--grain);
  box-shadow: var(--flat);
  cursor: pointer;
  touch-action: manipulation;
  transition: transform .09s ease-out, box-shadow .09s ease-out, opacity .2s;
  outline: none;
}
.round-btn > svg, .hud-btn > svg { width: 68%; height: 68%; pointer-events: none; }
.round-btn.small { width: 48px; height: 48px; }
.round-btn:focus-visible, .hud-btn:focus-visible, .btn:focus-visible, .end-btn:focus-visible, .menu-card:focus-visible, .play-btn:focus-visible, .card-play:focus-visible, .nav-btn:focus-visible {
  box-shadow: var(--flat), 0 0 0 4px var(--yellow), 0 0 0 7px var(--ink);
}
.is-pressed { transform: scale(1.09, .86) translateY(2px); box-shadow: 1px 1px 0 rgba(42, 33, 28, .22) !important; }
.boing { animation: boing .42s var(--spring); }
@keyframes boing {
  0% { transform: scale(1.09, .86); }
  35% { transform: scale(.93, 1.1); }
  60% { transform: scale(1.04, .97); }
  80% { transform: scale(.99, 1.01); }
  100% { transform: none; }
}
.shake { animation: shake .45s ease; }
@keyframes shake {
  0%, 100% { transform: none; }
  20% { transform: translateX(-6px) rotate(-4deg); }
  40% { transform: translateX(5px) rotate(3deg); }
  60% { transform: translateX(-4px) rotate(-2deg); }
  80% { transform: translateX(2px); }
}
.wiggle { animation: wiggle .6s ease; }
@keyframes wiggle {
  0%, 100% { rotate: 0deg; }
  20% { rotate: -2.5deg; }
  45% { rotate: 2deg; }
  70% { rotate: -1deg; }
}

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 48px;
  padding: 8px 18px;
  font-family: var(--font);
  font-size: 17px;
  font-weight: 600;
  border: 2.5px solid var(--ink);
  border-radius: 16px 18px 15px 17px;
  background: var(--cream);
  box-shadow: var(--flat);
  cursor: pointer;
  touch-action: manipulation;
}
.btn:active { transform: translateY(2px) scale(.98); box-shadow: 1px 1px 0 rgba(42, 33, 28, .22); }
.btn:disabled { opacity: .5; }
.btn svg { width: 26px; height: 26px; }

/* ——— loader ——— */
#loader {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-items: center; align-content: center; gap: 18px;
  background-color: var(--paper);
  background-image: var(--grain);
  transition: opacity .5s ease, visibility .5s;
  direction: rtl;
}
#loader.is-done { opacity: 0; visibility: hidden; pointer-events: none; }
.ld-porthole {
  position: relative;
  width: min(300px, 62vmin); aspect-ratio: 1;
  border: 5px solid var(--ink);
  border-radius: 50%;
  overflow: hidden;
  background: var(--sky-pale);
  box-shadow: 0 0 0 10px var(--ochre), 0 0 0 13px var(--ink), 8px 12px 0 13px rgba(42, 33, 28, .2);
}
.ld-sun { position: absolute; width: 22%; aspect-ratio: 1; top: 14%; left: 18%; border-radius: 50%; background: var(--yellow); border: 3px solid var(--ink); }
.ld-cloud { position: absolute; top: 22%; width: 34%; height: 11%; border-radius: 40px; background: var(--white); border: 3px solid var(--ink); animation: ld-cloud 9s linear infinite; }
.ld-sea { position: absolute; left: 0; right: 0; bottom: 0; }
.ld-sea::before {
  content: ''; position: absolute; left: -60px; right: -60px; top: -15px; height: 16px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='16'%3E%3Cpath d='M0 16V9Q15 1 30 9T60 9V16Z' fill='%233a89d1'/%3E%3Cpath d='M0 9Q15 1 30 9T60 9' fill='none' stroke='%232a211c' stroke-width='2.6'/%3E%3C/svg%3E") 0 0 / 60px 16px repeat-x;
  animation: ld-waves 2.2s linear infinite;
}
.ld-sea.back { height: 46%; background: var(--sea-light); }
.ld-sea.back::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='16'%3E%3Cpath d='M0 16V9Q15 1 30 9T60 9V16Z' fill='%2369b2e4'/%3E%3Cpath d='M0 9Q15 1 30 9T60 9' fill='none' stroke='%232a211c' stroke-width='2.2' opacity='.6'/%3E%3C/svg%3E"); animation-duration: 3.4s; animation-direction: reverse; }
.ld-sea.front { height: 31%; background: var(--sea); }
.ld-sea.front::after { content: ''; position: absolute; left: 18%; right: 30%; top: 26%; height: 0; border-top: 3px dashed rgba(230, 245, 244, .7); border-radius: 4px; }
.ld-ship { position: absolute; left: 20%; width: 60%; bottom: 20%; animation: ld-bob 2.6s ease-in-out infinite; transform-origin: 50% 90%; }
.ld-text { font-family: var(--font-title); font-size: clamp(22px, 3.4vmin, 30px); font-weight: 400; color: var(--ink); margin: 0; }
.ld-dots span { display: inline-block; animation: ld-dot 1.2s ease-in-out infinite; }
.ld-dots span:nth-child(2) { animation-delay: .15s; }
.ld-dots span:nth-child(3) { animation-delay: .3s; }
.ld-error { display: none; text-align: center; max-width: 80vw; }
#loader.is-error .ld-error { display: grid; gap: 12px; justify-items: center; }
#loader.is-error .ld-text { display: none; }
#loader.is-error .ld-ship { animation-play-state: paused; }
@keyframes ld-bob { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-7%) rotate(3deg); } }
@keyframes ld-waves { from { transform: translateX(0); } to { transform: translateX(60px); } }
@keyframes ld-cloud { from { left: 100%; } to { left: -40%; } }
@keyframes ld-dot { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

/* ——— toast ——— */
.toast {
  position: absolute; left: 50%; bottom: calc(24px + var(--sab));
  transform: translate(-50%, 20px); opacity: 0;
  padding: 10px 18px; font-size: 17px;
  pointer-events: none; transition: .3s;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

.reduce-motion *, .reduce-motion *::before, .reduce-motion *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .12s !important; }
@media (prefers-reduced-motion: reduce) {
  .ill-kb, .ld-ship, .ld-sea::before, .ld-cloud, .hud-stories-glow { animation: none !important; }
}