/* =========================================================
   COMPONENTS
   ========================================================= */

.tag {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  font-family: var(--font-mono);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--white);
  background: var(--anchor-strong);
  border: 2px solid var(--border);
  padding: .45em 1.05em;
  border-radius: 999px;
}
.tag--reward { color: var(--ink); background: var(--reward); }
.tag--sleep  { color: var(--white); background: var(--ink-soft); }

.btn {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.02rem;
  padding: .85em 1.6em;
  border-radius: 999px;
  text-decoration: none;
  border: 2px solid var(--border);
  cursor: pointer;
  background: var(--anchor);
  color: var(--white);
  box-shadow: var(--shadow-hard-sm);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease);
}
.btn:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--ink); }
.btn:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--ink); }

/* ---------- Mode toggle ---------- */
.mode-toggle {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: 999px;
  padding: .5em .95em .5em .6em;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink);
  box-shadow: var(--shadow-hard-sm);
  transition: transform .18s var(--spring);
}
.mode-toggle:hover { transform: translate(-2px, -2px); }
.mode-toggle:active { transform: translate(1px, 1px); }
.mode-toggle__icon { width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; }
.mode-toggle__icon svg { width: 100%; height: 100%; fill: var(--anchor); }

/* ---------- Logo backing plate ---------- */
.logo-plate {
  display: inline-block;
  background: var(--cream);
  border: 3px solid var(--border);
  border-radius: var(--radius-lg);
  padding: .9rem 1.1rem .6rem;
  box-shadow: var(--shadow-hard);
}
[data-theme="dark"] .logo-plate { background: #EFE9FF; }

/* ---------- Edge nav: compact, bouncy, shows the neighbor world's icon ---------- */
.edge-nav {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  z-index: 40;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 3px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow-hard-sm);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .3s var(--spring), box-shadow .2s var(--ease);
}
.edge-nav svg { width: 20px; height: 20px; }
.edge-nav--left { left: 1.1rem; }
.edge-nav--right { right: 1.1rem; }
.edge-nav:hover { transform: translateY(-50%) scale(1.14) rotate(-6deg); box-shadow: 5px 5px 0 var(--ink); }
.edge-nav:active { transform: translateY(-50%) scale(.92); box-shadow: 1px 1px 0 var(--ink); }
.edge-nav[disabled] { opacity: 0; pointer-events: none; }

@keyframes pop-in {
  0% { transform: translateY(-50%) scale(1); }
  40% { transform: translateY(-50%) scale(1.18); }
  100% { transform: translateY(-50%) scale(1); }
}
.edge-nav.just-popped { animation: pop-in .5s var(--spring); }

/* ---------- Bottom glass tab bar ----------
   Shorter, wider (elongated pill), elliptical active-state, and a
   real frosted-glass read: blur + saturation boost + a faint top
   inner highlight (the highlight is a tiny, deliberate material
   detail on a UI control — not a page-background gradient wash, so
   it doesn't fall under the AI-tell rule in §8.6). It also now has
   real content behind it to blur — the world-scene pattern — instead
   of a single flat color, which is what makes glass read as glass. */
.world-tabbar {
  position: fixed;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 45;
  display: flex;
  gap: .3rem;
  padding: .3rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 62%, transparent);
  backdrop-filter: blur(22px) saturate(1.7);
  -webkit-backdrop-filter: blur(22px) saturate(1.7);
  border: 1.5px solid color-mix(in srgb, var(--white) 50%, transparent);
  box-shadow: var(--shadow-hard-sm), inset 0 1px 0 color-mix(in srgb, var(--white) 70%, transparent);
}
/* Sliding highlight pill — a real object that moves and settles
   between positions, rather than each icon toggling its own
   background independently. This is what makes a smooth "slide and
   settle" possible at all. */
.world-tab-highlight {
  position: absolute;
  border-radius: 999px;
  background: var(--tab-accent, var(--anchor));
  z-index: 0;
  transition: transform .42s var(--spring), background .3s var(--ease);
}
.world-tab {
  position: relative;
  z-index: 1;
  width: 42px;
  height: 32px;
  border-radius: 999px;
  border: none;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform .25s var(--spring);
}
.world-tab svg { width: 18px; height: 18px; fill: var(--ink-soft); transition: fill .2s var(--ease); }
.world-tab:hover { transform: translateY(-2px) scale(1.06); }
.world-tab[aria-current="true"] svg { fill: var(--white); }

/* ---------- Cards ---------- */
.card {
  background: var(--surface);
  border: 3px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-hard);
}

/* ---------- Comic cover: Netflix-style hover expand ----------
   Scales and lifts on hover, with a caption that fades in over a
   dark scrim. Note on the scrim: this IS a gradient, but a small,
   functional one behind hover text on a media tile — the same
   pattern every video/streaming UI uses for legibility — not the
   atmospheric page-background wash the no-gradient rule (§8.6)
   targets. Flagged here deliberately rather than added quietly. */
.comic-cover {
  position: relative;
  cursor: pointer;
  transition: transform .4s var(--spring), box-shadow .3s var(--ease), z-index 0s;
  transform-origin: center;
}
.comic-cover:hover,
.comic-cover:focus-visible {
  transform: scale(1.07);
  box-shadow: var(--shadow-hard);
  z-index: 6;
}
.comic-cover__caption {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  padding: .8rem;
  background: linear-gradient(to top, rgba(0,0,0,.72), rgba(0,0,0,0) 60%);
  opacity: 0;
  transition: opacity .3s var(--ease);
  border-radius: inherit;
}
.comic-cover:hover .comic-cover__caption,
.comic-cover:focus-visible .comic-cover__caption { opacity: 1; }
.comic-cover__caption span {
  color: #fff;
  font-family: var(--font-mono);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
}

/* ---------- World scene: the bold patterned shape ----------
   Sized in vmin (tracks the SMALLER of viewport width/height) so it
   can never balloon or vanish at extreme aspect ratios like an
   ultrawide monitor — the bug with the old %-based positioning.
   drop-shadow gives it real dimensionality against the flat cream
   base — the same hard-offset "sticker" language already used on
   cards and buttons, reused here for consistency rather than
   inventing a new effect. */
.world-scene {
  position: absolute;
  z-index: 0;
  width: min(85vmin, 720px);
  height: min(85vmin, 720px);
  border-radius: 40%;
  pointer-events: none;
  background-repeat: repeat;
  background-size: 46px 46px;
  filter: drop-shadow(14px 14px 0 color-mix(in srgb, var(--ink) 14%, transparent));
}

@media (prefers-reduced-motion: reduce) {
  .edge-nav.just-popped { animation: none; }
}