/* =========================================================
   LAYOUT — the three-world pager and its chrome
   Order: Friends World (left) — Your Room (center, default) — Comic World (right)
   ========================================================= */

.top-bar { position: fixed; top: 1.1rem; right: 1.1rem; z-index: 50; }

.pager-viewport { position: fixed; inset: 0; overflow: hidden; }

.pager { display: flex; height: 100%; width: 300%; will-change: transform; }
.pager.is-dragging { transition: none; }
.pager.is-settling { transition: transform .48s var(--spring); }

.world {
  flex: 0 0 33.3333%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 2rem 1.5rem;
  text-align: center;
  overflow: hidden;
}
/* Cream everywhere, with a whisper of per-world paper tone (see
   variables.css) — the bold color lives in .world-scene, not the
   full canvas. This is the fix for the "ocean of deep color" note. */
#world-room    { background: var(--room-bg); }
#world-comic   { background: var(--comic-bg); }
#world-friends { background: var(--friends-bg); }

.world__inner { position: relative; z-index: 2; max-width: 480px; width: 100%; }

/* Bold patterned shape, anchored per world, sized in vmin so it holds
   up at any monitor size/aspect ratio */
#world-room .world-scene {
  background-color: var(--room-accent);
  background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M12%201.5c.7%204.8%201.6%207.6%203%209%201.4%201.4%204.2%202.3%209%203-4.8.7-7.6%201.6-9%203-1.4%201.4-2.3%204.2-3%209-.7-4.8-1.6-7.6-3-9-1.4-1.4-4.2-2.3-9-3%204.8-.7%207.6-1.6%209-3%201.4-1.4%202.3-4.2%203-9Z%22%20fill%3D%22white%22%20fill-opacity%3D%220.32%22/%3E%3C/svg%3E');
  top: -30vmin; right: -25vmin;
}
#world-comic .world-scene {
  background-color: var(--comic-accent);
  background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M4%205.2C4%204%205%203%206.2%203c2%200%204%20.8%205.4%202.1.2.2.6.2.8%200C13.8%203.8%2015.8%203%2017.8%203%2019%203%2020%204%2020%205.2v12.6c0%201.2-1%202.1-2.2%202-2-.1-4%20.5-5.4%201.8-.2.2-.6.2-.8%200-1.4-1.3-3.4-1.9-5.4-1.8-1.2.1-2.2-.8-2.2-2Z%22%20fill%3D%22white%22%20fill-opacity%3D%220.32%22/%3E%3C/svg%3E');
  bottom: -32vmin; left: -25vmin;
}
#world-friends .world-scene {
  background-color: var(--friends-accent);
  background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2022%22%3E%3Cpath%20d%3D%22M12%2021S1.5%2014.3%201.5%207.6C1.5%204%204.3%201.5%207.6%201.5c2%200%203.7%201%204.4%202.5.7-1.5%202.4-2.5%204.4-2.5%203.3%200%206.1%202.5%206.1%206.1C22.5%2014.3%2012%2021%2012%2021Z%22%20fill%3D%22white%22%20fill-opacity%3D%220.32%22/%3E%3C/svg%3E');
  top: -28vmin; left: -25vmin;
}

/* ---------- Your Room ---------- */
#world-room .logo-plate { margin: 0 auto 1.2rem; }
.room-logo { width: min(46vw, 190px); display: block; }
#world-room h1 {
  color: var(--ink);
  font-size: clamp(1.6rem, 2.4vw + 1rem, 2.5rem);
}
#world-room .world__subtitle {
  color: var(--ink-soft);
  font-size: 1.05rem;
  margin-bottom: 1.1rem;
}
#world-room .room-note {
  margin-top: 1.4rem;
  font-family: var(--font-mono);
  font-size: .82rem;
  letter-spacing: .02em;
  color: var(--ink-soft);
  line-height: 1.6;
}

/* Room footer: visually separated from the intro copy above it (was
   previously read as a run-on continuation), pushed lower, with a
   quiet divider and a slow twinkle on the sparkle so it feels like a
   deliberate closing note rather than more body text. */
.room-footer {
  margin-top: 2.2rem;
  padding-top: 1.1rem;
  border-top: 2px dashed color-mix(in srgb, var(--ink) 22%, transparent);
  font-family: var(--font-mono);
  font-size: .76rem;
  letter-spacing: .02em;
  color: var(--ink-soft);
  line-height: 1.7;
}
.room-footer .twinkle {
  display: inline-block;
  animation: twinkle 2.6s ease-in-out infinite;
}
@keyframes twinkle {
  0%, 100% { opacity: .55; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.25); }
}
@media (prefers-reduced-motion: reduce) {
  .room-footer .twinkle { animation: none; }
}

/* ---------- Comic World ---------- */
.comic-card { padding: 1.7rem 1.6rem; position: relative; }
.comic-ribbon {
  position: absolute;
  top: -16px;
  left: 50%;
  transform: translateX(-50%) rotate(-3deg);
  background: var(--reward);
  border: 3px solid var(--border);
  border-radius: 999px;
  padding: .35em 1.1em;
  font-family: var(--font-mono);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink);
  box-shadow: var(--shadow-hard-sm);
  white-space: nowrap;
}
.comic-cover {
  aspect-ratio: 16 / 9;
  max-width: 320px;
  margin: 1.3rem auto 1.1rem;
  border-radius: var(--radius-md);
  background: var(--cream);
  border: 3px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.comic-cover img { width: 100%; height: 100%; object-fit: cover; }
.comic-cover-placeholder {
  font-family: var(--font-mono);
  font-size: .74rem;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding: 1rem;
}
.comic-cover-placeholder svg { width: 30px; height: 30px; margin: 0 auto .5rem; fill: var(--secondary-strong); }
.comic-eyebrow {
  font-family: var(--font-mono);
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--secondary-strong);
  margin-bottom: .3rem;
}
#world-comic h2 { font-size: clamp(1.25rem, 1.4vw + 1rem, 1.7rem); margin-bottom: .5rem; color: var(--ink); }
.comic-line { color: var(--ink-soft); font-size: 1rem; margin-bottom: .9rem; }

/* ---------- Friends World ---------- */
#world-friends .card { padding: 1.9rem 1.7rem; }
#world-friends h2 { font-size: clamp(1.4rem, 1.6vw + 1rem, 1.95rem); color: var(--ink); }
#world-friends .world__subtitle { color: var(--ink-soft); font-size: 1.02rem; margin-bottom: .9rem; }

/* ---------- Entrance beat ---------- */
.pager-viewport.entrance .world__inner { animation: rise-in .8s var(--spring) both; }
@keyframes rise-in {
  from { opacity: 0; transform: translateY(18px) scale(.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .pager-viewport.entrance .world__inner { animation: none; }
}

/* ---------- Edge swipe catch-zones (mobile) ---------- */
.edge-catch { position: fixed; top: 0; bottom: 0; width: 40px; z-index: 30; touch-action: pan-y; }
.edge-catch--left { left: 0; }
.edge-catch--right { right: 0; }

/* ---------- Responsive ---------- */
@media (max-width: 640px) {
  .edge-nav { display: none; }
  .world { padding: 1.5rem 1.2rem; }
  .comic-card { padding: 1.4rem 1.2rem; }
  .world-tabbar { bottom: .8rem; }
  .world-scene { width: min(110vmin, 520px); height: min(110vmin, 520px); }
}
@media (min-width: 641px) {
  .edge-catch { display: none; }
}
@media (max-height: 560px) {
  .room-logo { width: 90px; }
}