:root {
  color-scheme: dark;
  --obsidian: #010503;
  --black-jade: #02120b;
  --emerald: #20d99a;
  --emerald-deep: #087653;
  --emerald-glow: rgba(32, 217, 154, 0.28);
  --emerald-bright: #55efb8;
  --gold: #d7b56d;
  --mint: #dcfff2;
  --bright-glow: rgba(85, 239, 184, 0.22);
  --ink: #eefbf6;
  --muted: #9cb8ae;
  --faint: #668178;
  --line: rgba(42, 211, 153, 0.2);
  --panel: rgba(1, 10, 6, 0.92);
  --safe-top: max(14px, env(safe-area-inset-top));
  --safe-right: max(14px, env(safe-area-inset-right));
  --safe-bottom: max(18px, env(safe-area-inset-bottom));
  --safe-left: max(14px, env(safe-area-inset-left));
  font-family: "DM Sans", system-ui, sans-serif;
  font-synthesis: none;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
  background: var(--obsidian);
  color: var(--ink);
}

button,
input,
textarea {
  font: inherit;
}

button {
  color: inherit;
}

button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--mint);
  outline-offset: 3px;
}

[hidden] {
  display: none !important;
}

.game {
  position: fixed;
  inset: 0;
  min-width: 280px;
  height: 100dvh;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(ellipse at 50% 24%, rgba(14, 104, 73, 0.3) 0%, rgba(3, 20, 14, 0.2) 34%, transparent 65%),
    linear-gradient(155deg, #010201 0%, #031009 42%, #010403 100%);
}

.game > :not(.auth-world) {
  position: fixed;
}

.game::before {
  content: "";
  position: absolute;
  inset: -20%;
  z-index: -2;
  background:
    linear-gradient(116deg, transparent 35%, rgba(24, 197, 139, 0.09) 48%, rgba(220, 255, 242, 0.1) 51%, rgba(24, 197, 139, 0.05) 55%, transparent 68%);
  filter: blur(18px);
  transform: translate3d(-12%, 0, 0);
  animation: cat-eye 14s ease-in-out infinite alternate;
}

.scene,
.scene canvas,
.scene-vignette {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.scene-transition {
  position: absolute;
  inset: 0;
  z-index: 7;
  display: grid;
  place-items: center;
  pointer-events: none;
  background: #010503;
  opacity: 0;
  transition: opacity 210ms ease;
}

.scene-transition.is-visible {
  opacity: 1;
}

.scene-transition span {
  width: 22px;
  aspect-ratio: 1;
  border: 1px solid rgba(85, 239, 184, 0.7);
  border-radius: 50% 0 50% 0;
  box-shadow: 0 0 24px rgba(32, 217, 154, 0.34);
  transform: rotate(45deg);
}

.auth-world {
  position: absolute;
  z-index: 100;
  top: 50%;
  left: 50%;
  display: grid;
  width: min(420px, calc(100% - 32px));
  max-height: calc(100dvh - var(--safe-top) - var(--safe-bottom) - 24px);
  overflow-y: auto;
  padding: 28px clamp(20px, 6vw, 32px) 24px;
  border: 1px solid rgba(42, 211, 153, 0.32);
  border-radius: 7px;
  background:
    linear-gradient(126deg, transparent 30%, rgba(24, 197, 139, 0.07) 48%, rgba(42, 211, 153, 0.06) 52%, transparent 69%),
    rgba(2, 9, 6, 0.95);
  box-shadow: 0 28px 72px rgba(0, 0, 0, 0.64), 0 0 44px rgba(24, 197, 139, 0.1);
  text-align: center;
  transform: translate(-50%, -50%);
  backdrop-filter: blur(18px);
}

.game:has(.auth-world:not([hidden])) .gate-intro {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

.auth-world::before,
.auth-world::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--mint);
  box-shadow: 82px 32px 9px var(--emerald), -112px 118px 8px var(--emerald-bright), 128px 196px 10px var(--emerald), -132px 244px 10px var(--mint), 72px 310px 9px var(--emerald);
  opacity: 0;
}

.auth-world.is-welcoming::before,
.auth-world.is-welcoming::after {
  opacity: 1;
  animation: auth-fireflies 2.6s ease-in-out infinite alternate;
}

.auth-world.is-welcoming::after {
  transform: rotate(145deg);
  animation-delay: -1.2s;
}

.auth-mark {
  position: relative;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  margin: 0 auto 16px;
  border: 1px solid rgba(42, 211, 153, 0.36);
  border-radius: 50%;
  box-shadow: 0 0 26px rgba(24, 197, 139, 0.15), inset 0 0 18px rgba(42, 211, 153, 0.06);
}

.auth-mark::before,
.auth-mark::after,
.auth-mark span {
  content: "";
  position: absolute;
  width: 2px;
  height: 25px;
  background: linear-gradient(var(--mint), var(--emerald));
  box-shadow: 0 0 9px var(--emerald-glow);
}

.auth-mark::before { transform: rotate(60deg); }
.auth-mark::after { transform: rotate(-60deg); }

.auth-world h1 {
  margin: 2px 0 0;
  color: var(--ink);
  font-size: clamp(24px, 7vw, 31px);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: 0;
}

.auth-reflection {
  margin: 8px auto 20px;
  color: var(--muted);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 16px;
  font-style: italic;
  line-height: 1.35;
}

.auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-bottom: 18px;
  border-bottom: 1px solid rgba(42, 211, 153, 0.16);
}

.auth-tabs button {
  position: relative;
  min-height: 44px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 10px;
  font-weight: 400;
  cursor: pointer;
}

.auth-tabs button[aria-selected="true"] {
  color: var(--mint);
}

.auth-tabs button[aria-selected="true"]::after {
  content: "";
  position: absolute;
  right: 24%;
  bottom: -1px;
  left: 24%;
  height: 1px;
  background: var(--emerald);
  box-shadow: 0 0 10px var(--emerald-glow);
}

.auth-form {
  display: grid;
  gap: 14px;
  text-align: left;
}

.auth-status {
  min-height: 18px;
  margin: -2px 0 0;
}

.auth-forgot,
.auth-guest {
  min-height: 44px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 10px;
  cursor: pointer;
}

.auth-guest {
  width: 100%;
  border-top: 1px solid rgba(42, 211, 153, 0.12);
  color: var(--emerald-bright);
}

.auth-local-note {
  margin: 12px 0 -2px;
  color: var(--faint);
  font-size: 9px;
  letter-spacing: 0.04em;
}

.auth-shake {
  animation: auth-shake 280ms ease-out;
}

.scene {
  z-index: 0;
  touch-action: none;
}

.scene canvas {
  display: block;
  outline: none;
}

.scene-vignette {
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.4), transparent 24%, transparent 62%, rgba(0, 0, 0, 0.7)),
    radial-gradient(ellipse at center, transparent 36%, rgba(0, 0, 0, 0.68) 100%);
}

.hud {
  position: absolute;
  z-index: 10;
  top: var(--safe-top);
  left: var(--safe-left);
  right: var(--safe-right);
  display: grid;
  grid-template-columns: minmax(84px, 1fr) auto minmax(84px, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 48px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px);
  transition: opacity 260ms ease-out, transform 260ms ease-out;
}

.game:not([data-phase="gate"]) .hud {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

.hud-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--mint);
  font-size: 12px;
  font-weight: 500;
}

.hud-mark {
  width: 9px;
  height: 9px;
  border: 1px solid var(--emerald-bright);
  transform: rotate(45deg);
  box-shadow: 0 0 12px var(--bright-glow);
}

.hud-progress {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 72px;
}

.progress-step {
  width: 8px;
  height: 8px;
  border: 1px solid rgba(220, 255, 242, 0.52);
  transform: rotate(45deg);
  transition: background 260ms ease-out, box-shadow 260ms ease-out;
}

.progress-step.is-complete {
  border-color: var(--emerald);
  background: var(--emerald);
  box-shadow: 0 0 14px var(--emerald-glow);
}

.hud-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
}

.icon-button,
.sheet-close {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(2, 10, 6, 0.48);
  color: var(--muted);
  cursor: pointer;
  backdrop-filter: blur(10px);
  transition: color 180ms ease-out, background 180ms ease-out;
}

.icon-button:hover,
.icon-button:active,
.sheet-close:hover,
.sheet-close:active {
  color: var(--mint);
  background: rgba(8, 30, 20, 0.7);
}

.icon {
  display: block;
}

.gate-intro {
  position: absolute;
  z-index: 5;
  left: 50%;
  bottom: calc(var(--safe-bottom) + 5vh);
  width: min(88vw, 430px);
  text-align: center;
  transform: translateX(-50%);
  transition: opacity 500ms ease-in, transform 500ms ease-in;
}

.game[data-phase="opening"] .gate-intro,
.game:not([data-phase="gate"]):not([data-phase="opening"]) .gate-intro {
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 14px);
}

.eyebrow,
.sheet-step,
.command-count {
  margin: 0 0 8px;
  color: var(--emerald-bright);
  font-size: 10px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.gate-intro h1 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(28px, 7vw, 38px);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: 0;
  text-shadow: 0 10px 34px rgba(0, 0, 0, 0.75);
}

.gate-verse,
.sheet-reflection {
  margin: 12px 0 22px;
  color: var(--mint);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 18px;
  font-style: italic;
  font-weight: 400;
  line-height: 1.35;
}

.primary-command,
.sheet-submit,
.object-command {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 50px;
  padding: 0 20px;
  border: 1px solid rgba(24, 197, 139, 0.68);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(24, 197, 139, 0.96), rgba(8, 122, 88, 0.96));
  color: #00170e;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.34), 0 0 32px rgba(24, 197, 139, 0.12);
  transition: filter 180ms ease-out, box-shadow 180ms ease-out, transform 120ms ease-out;
}

.primary-command:hover,
.sheet-submit:hover,
.object-command:hover {
  filter: brightness(1.08);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.38), 0 0 38px rgba(24, 197, 139, 0.2);
}

.primary-command:active,
.sheet-submit:active,
.object-command:active {
  transform: translateY(1px);
}

.sound-note {
  margin: 12px 0 0;
  color: var(--faint);
  font-size: 11px;
  line-height: 1.4;
}

.scene-command {
  position: absolute;
  z-index: 8;
  left: 0;
  right: 0;
  bottom: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 16px;
  padding: 38px var(--safe-right) var(--safe-bottom) var(--safe-left);
  border: 0;
  border-radius: 0;
  background: linear-gradient(180deg, transparent 0%, rgba(1, 5, 3, 0.82) 36%, rgba(1, 5, 3, 0.97) 100%);
  box-shadow: none;
  animation: command-in 320ms ease-out both;
}

.scene-command h2 {
  margin: 0;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.2;
}

.scene-command p:not(.command-count) {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.object-command {
  min-width: 132px;
  min-height: 46px;
  padding-inline: 15px;
  font-size: 12px;
}

.room-map {
  position: absolute;
  z-index: 8;
  left: 50%;
  bottom: var(--safe-bottom);
  display: grid;
  grid-template-columns: repeat(4, minmax(62px, 1fr));
  gap: 8px;
  width: min(calc(100% - 28px), 430px);
  transform: translateX(-50%);
  animation: room-map-in 420ms ease-out both;
}

.room-map button {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 6px;
  min-height: 62px;
  padding: 7px 4px;
  border: 1px solid rgba(42, 211, 153, 0.2);
  border-radius: 8px;
  background: rgba(2, 10, 6, 0.8);
  color: var(--muted);
  font-size: 10px;
  cursor: pointer;
  backdrop-filter: blur(14px);
}

.room-map button:hover,
.room-map button:active {
  border-color: var(--emerald);
  color: var(--mint);
  background: rgba(6, 30, 20, 0.9);
}

.sheet-backdrop {
  position: absolute;
  inset: 0;
  z-index: 20;
  background: rgba(0, 0, 0, 0.64);
  backdrop-filter: blur(5px);
  animation: fade-in 200ms ease-out both;
}

.action-sheet {
  position: absolute;
  z-index: 21;
  left: max(10px, env(safe-area-inset-left));
  right: max(10px, env(safe-area-inset-right));
  bottom: max(10px, env(safe-area-inset-bottom));
  max-height: min(70dvh, 590px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 28px 20px 20px;
  border: 1px solid rgba(42, 211, 153, 0.28);
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 0%, rgba(24, 197, 139, 0.09), transparent 42%),
    rgba(2, 8, 5, 0.97);
  box-shadow: 0 -24px 70px rgba(0, 0, 0, 0.58);
  animation: sheet-in 300ms ease-out both;
}

.sheet-handle {
  position: absolute;
  top: 9px;
  left: 50%;
  width: 34px;
  height: 3px;
  border-radius: 2px;
  background: rgba(220, 255, 242, 0.34);
  transform: translateX(-50%);
}

.sheet-close {
  position: absolute;
  top: 14px;
  right: 12px;
}

.action-sheet h2 {
  max-width: calc(100% - 44px);
  margin: 0;
  font-size: 22px;
  font-weight: 300;
  line-height: 1.22;
}

.sheet-reflection {
  margin: 7px 0 20px;
  color: var(--muted);
  font-size: 16px;
}

.field-label {
  display: block;
  margin-bottom: 8px;
  color: var(--emerald-bright);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

input,
textarea {
  width: 100%;
  min-height: 50px;
  padding: 13px 0;
  resize: none;
  border: 0;
  border-bottom: 1px solid rgba(42, 211, 153, 0.34);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.5;
}

input::placeholder,
textarea::placeholder {
  color: #62665f;
}

input:focus,
textarea:focus {
  border-bottom-color: var(--emerald);
}

.field-error {
  min-height: 20px;
  margin: 7px 0 5px;
  color: var(--mint);
  font-size: 11px;
}

.sheet-submit {
  width: 100%;
  margin-top: 4px;
}

.mood-orbit {
  position: relative;
  display: grid;
  place-content: center;
  width: 142px;
  height: 142px;
  margin: 2px auto 18px;
  text-align: center;
}

.mood-orbit-ring {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(42, 211, 153, 0.26);
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(24, 197, 139, 0.1), transparent 64%),
    conic-gradient(from 210deg, rgba(42, 211, 153, 0.2), rgba(24, 197, 139, 0.72) var(--mood-angle, 0deg), rgba(255, 255, 255, 0.04) var(--mood-angle, 0deg));
  box-shadow: inset 0 0 34px rgba(24, 197, 139, 0.08), 0 0 28px rgba(24, 197, 139, 0.06);
  mask: radial-gradient(circle, transparent 63%, #000 65%);
}

.mood-value {
  font-size: 34px;
  font-weight: 300;
  line-height: 1;
}

.mood-word {
  margin-top: 7px;
  color: var(--emerald-bright);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 17px;
  font-style: italic;
}

.mood-options {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
}

.mood-options button {
  min-width: 0;
  min-height: 46px;
  padding: 5px 2px;
  border: 1px solid rgba(42, 211, 153, 0.17);
  border-radius: 8px;
  background: rgba(6, 18, 12, 0.78);
  color: var(--muted);
  font-size: clamp(9px, 2.5vw, 11px);
  cursor: pointer;
}

.mood-options button[aria-checked="true"] {
  border-color: var(--emerald);
  background: rgba(24, 197, 139, 0.14);
  color: var(--mint);
  box-shadow: 0 0 18px rgba(24, 197, 139, 0.12);
}

.reward-reveal {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: grid;
  place-content: center;
  justify-items: center;
  padding: max(24px, env(safe-area-inset-top)) 24px max(28px, env(safe-area-inset-bottom));
  text-align: center;
  background:
    radial-gradient(circle at center, rgba(24, 197, 139, 0.2), transparent 36%),
    rgba(1, 4, 3, 0.88);
  backdrop-filter: blur(10px);
  animation: fade-in 500ms ease-out both;
}

.sign-mark {
  position: relative;
  display: grid;
  place-items: center;
  width: 122px;
  height: 122px;
  margin: 8px 0 20px;
  border: 1px solid var(--emerald-bright);
  border-radius: 50%;
  box-shadow: 0 0 50px rgba(42, 211, 153, 0.2), inset 0 0 32px rgba(24, 197, 139, 0.14);
  animation: sign-arrive 900ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.sign-mark::before,
.sign-mark::after,
.sign-mark span::before,
.sign-mark span::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 58px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--mint), transparent);
  transform-origin: center;
}

.sign-mark::before { transform: translate(-50%, -50%) rotate(0deg); }
.sign-mark::after { transform: translate(-50%, -50%) rotate(90deg); }
.sign-mark span::before { transform: translate(-50%, -50%) rotate(45deg); }
.sign-mark span::after { transform: translate(-50%, -50%) rotate(-45deg); }

.sign-mark span {
  width: 26px;
  height: 26px;
  border: 1px solid var(--emerald);
  transform: rotate(45deg);
  box-shadow: 0 0 24px var(--emerald-glow);
}

.reward-reveal h2 {
  margin: 0;
  font-size: 36px;
  font-weight: 300;
}

.reward-copy {
  max-width: 330px;
  margin: 10px 0 24px;
  color: var(--muted);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 18px;
  font-style: italic;
  line-height: 1.45;
}

.reward-sparks {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.reward-sparks i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--mint);
  box-shadow: 0 0 12px var(--emerald-bright);
  animation: reward-spark 1600ms ease-out both;
}

.notification-region {
  position: absolute;
  z-index: 96;
  top: calc(var(--safe-top) + 62px);
  right: max(var(--safe-right), 14px);
  display: grid;
  gap: 9px;
  width: min(370px, calc(100% - 28px));
  pointer-events: none;
}

.sanctuary-notice {
  position: relative;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 44px;
  align-items: center;
  gap: 9px;
  min-height: 68px;
  padding: 9px 5px 9px 10px;
  overflow: hidden;
  border: 1px solid rgba(110, 231, 183, 0.28);
  border-radius: 14px;
  background:
    linear-gradient(145deg, rgba(236, 253, 245, 0.08), transparent 44%),
    rgba(2, 13, 8, 0.9);
  color: var(--mint);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.48), 0 0 30px rgba(16, 185, 129, 0.1);
  opacity: 0;
  pointer-events: auto;
  transform: translate3d(14px, -5px, 0) scale(0.985);
  transition: opacity 220ms ease-out, transform 260ms cubic-bezier(0.16, 1, 0.3, 1);
  backdrop-filter: blur(22px) saturate(126%);
  -webkit-backdrop-filter: blur(22px) saturate(126%);
}

.sanctuary-notice::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 2px;
  background: var(--emerald-bright);
  box-shadow: 0 0 14px var(--emerald-glow);
}

.sanctuary-notice.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

.sanctuary-notice.is-leaving {
  opacity: 0;
  transform: translate3d(12px, -4px, 0) scale(0.985);
}

.notice-mark {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(110, 231, 183, 0.22);
  border-radius: 50%;
  background: rgba(16, 185, 129, 0.09);
  color: var(--emerald-bright);
}

.notice-copy {
  min-width: 0;
  text-align: left;
}

.notice-copy strong,
.notice-copy p {
  display: block;
  margin: 0;
}

.notice-copy strong {
  color: var(--mint);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 15px;
  font-weight: 500;
}

.notice-copy p {
  margin-top: 2px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.42;
}

.notice-close,
.notice-action {
  min-height: 44px;
  border: 0;
  background: transparent;
  color: var(--faint);
  cursor: pointer;
}

.notice-close {
  display: grid;
  place-items: center;
  width: 44px;
  padding: 0;
}

.notice-action {
  padding: 0 9px;
  border-left: 1px solid rgba(110, 231, 183, 0.14);
  color: var(--emerald-bright);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.sanctuary-notice:has(.notice-action) {
  grid-template-columns: 34px minmax(0, 1fr) auto 44px;
}

.sanctuary-notice.is-warning::before,
.sanctuary-notice.is-reward::before {
  background: var(--gold);
  box-shadow: 0 0 14px rgba(215, 181, 109, 0.45);
}

.sanctuary-notice.is-warning .notice-mark,
.sanctuary-notice.is-reward .notice-mark {
  color: var(--gold);
  border-color: rgba(215, 181, 109, 0.24);
  background: rgba(215, 181, 109, 0.09);
}

.sanctuary-notice.is-error::before {
  background: #f09a8d;
  box-shadow: 0 0 14px rgba(240, 154, 141, 0.36);
}

.sanctuary-notice.is-error .notice-mark {
  color: #f4b1a7;
  border-color: rgba(240, 154, 141, 0.24);
  background: rgba(240, 154, 141, 0.08);
}

@media (max-width: 520px) {
  .notification-region {
    right: 14px;
    left: 14px;
    width: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sanctuary-notice {
    transition-duration: 1ms;
  }
}

@keyframes cat-eye {
  to { transform: translate3d(12%, 2%, 0); }
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes command-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes room-map-in {
  from { opacity: 0; transform: translate(-50%, 12px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

@keyframes sheet-in {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes sign-arrive {
  from { opacity: 0; transform: scale(0.72) rotate(-30deg); }
  to { opacity: 1; transform: scale(1) rotate(0); }
}

@keyframes reward-spark {
  0% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--angle)) translateX(12px) scale(0.3); }
  20% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--angle)) translateX(var(--distance)) scale(1); }
}

@media (max-width: 370px) {
  .hud {
    grid-template-columns: minmax(74px, 1fr) auto minmax(74px, 1fr);
  }

  .hud-brand {
    font-size: 11px;
  }

  .scene-command {
    grid-template-columns: 1fr;
    align-items: stretch;
    gap: 12px;
  }

  .object-command {
    width: 100%;
  }

  .mood-options {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 700px) {
  .hud {
    left: max(24px, env(safe-area-inset-left));
    right: max(24px, env(safe-area-inset-right));
  }

  .scene-command {
    left: 50%;
    right: auto;
    width: min(600px, calc(100% - 48px));
    bottom: max(18px, env(safe-area-inset-bottom));
    padding: 16px;
    border: 1px solid rgba(42, 211, 153, 0.2);
    border-radius: 8px;
    background: rgba(2, 8, 5, 0.82);
    backdrop-filter: blur(18px) saturate(120%);
    transform: translateX(-50%);
  }

  @keyframes command-in {
    from { opacity: 0; transform: translate(-50%, 12px); }
    to { opacity: 1; transform: translate(-50%, 0); }
  }

  .action-sheet {
    left: 50%;
    right: auto;
    width: min(520px, calc(100% - 32px));
    transform: translateX(-50%);
  }

  @keyframes sheet-in {
    from { opacity: 0; transform: translate(-50%, 24px); }
    to { opacity: 1; transform: translate(-50%, 0); }
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
}

/* Miracle Sanctuary */

.hud {
  grid-template-columns: 44px auto minmax(54px, 1fr) auto;
}

.hud-menu {
  background: rgba(2, 20, 12, 0.5);
  color: var(--mint);
}

.lantern-button,
#signs-button {
  position: relative;
  border: 1px solid rgba(24, 197, 139, 0.34);
}

.lantern-button::after,
#signs-button.has-signs::after {
  content: "";
  position: absolute;
  inset: -4px;
  border: 1px solid rgba(220, 255, 242, 0.58);
  border-radius: 50%;
  opacity: 0;
  animation: touch-halo 4.8s ease-in-out infinite;
}

#signs-button.has-signs::after {
  animation-delay: 2.4s;
}

.floating-nes-button {
  position: fixed;
  right: max(14px, var(--safe-right));
  bottom: calc(var(--safe-bottom) + 86px);
  z-index: 66;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 1px solid rgba(85, 239, 184, 0.58);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 38%, rgba(190, 255, 225, 0.22), transparent 34%),
    rgba(2, 14, 9, 0.94);
  color: var(--mint);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.54), 0 0 26px rgba(24, 197, 139, 0.2);
  cursor: pointer;
  backdrop-filter: blur(12px);
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.floating-nes-button::after {
  content: "";
  position: absolute;
  inset: -5px;
  border: 1px solid rgba(220, 255, 242, 0.5);
  border-radius: 50%;
  opacity: 0;
  animation: touch-halo 4.8s ease-in-out infinite;
}

.floating-nes-button:hover,
.floating-nes-button:focus-visible {
  border-color: var(--mint);
  background:
    radial-gradient(circle at 50% 38%, rgba(220, 255, 242, 0.3), transparent 36%),
    rgba(3, 24, 16, 0.96);
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.58), 0 0 34px rgba(42, 211, 153, 0.28);
  transform: translateY(-2px);
}

.floating-nes-button svg {
  width: 21px;
  height: 21px;
}

.room-map button {
  position: relative;
  overflow: hidden;
}

.room-map button i {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 4px;
  height: 1px;
  background: rgba(220, 255, 242, 0.14);
}

.room-map button i::after {
  content: "";
  display: block;
  width: var(--growth, 0%);
  height: 100%;
  background: var(--emerald);
  box-shadow: 0 0 8px var(--emerald-glow);
  transition: width 400ms ease;
}

.room-interface {
  position: absolute;
  inset: 0;
  z-index: 8;
  pointer-events: none;
}

.room-interface.is-travelling {
  opacity: 0;
  transition: opacity 220ms ease;
}

.room-heading {
  position: absolute;
  top: calc(var(--safe-top) + 62px);
  left: var(--safe-left);
  right: var(--safe-right);
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: 10px;
  pointer-events: auto;
  animation: room-heading-in 420ms ease-out both;
}

.room-heading .eyebrow {
  margin-bottom: 3px;
}

.room-heading h1 {
  margin: 0;
  font-size: 24px;
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: 0;
}

.growth-button {
  display: grid;
  gap: 6px;
  width: 76px;
  min-height: 44px;
  padding: 7px 8px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 9px;
  text-align: right;
  text-transform: uppercase;
  cursor: pointer;
}

.growth-button i {
  width: 100%;
  height: 2px;
  overflow: hidden;
  background: rgba(220, 255, 242, 0.14);
}

.growth-button b {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, var(--emerald-deep), var(--emerald-bright));
  transition: width 480ms ease;
}

.feature-stage {
  position: absolute;
  left: 50%;
  bottom: calc(var(--safe-bottom) + 28px);
  display: grid;
  grid-template-columns: 48px minmax(154px, 190px) 48px;
  align-items: center;
  gap: 8px;
  width: min(340px, calc(100vw - 24px));
  pointer-events: auto;
  transform: translateX(-50%);
}

.feature-arrow {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 50%;
  background: rgba(2, 9, 6, 0.58);
  color: var(--muted);
  backdrop-filter: blur(10px);
  cursor: pointer;
}

.feature-object {
  position: relative;
  display: grid;
  justify-items: center;
  min-height: 154px;
  padding: 18px 14px 13px;
  border: 0;
  background: transparent;
  color: var(--ink);
  text-align: center;
  cursor: pointer;
  transition: transform 220ms ease, opacity 220ms ease;
}

.feature-object.shift-left {
  animation: object-left 240ms ease;
}

.feature-object.shift-right {
  animation: object-right 240ms ease;
}

.feature-aura {
  position: absolute;
  top: 2px;
  left: 50%;
  width: 104px;
  height: 104px;
  border: 1px solid rgba(24, 197, 139, 0.62);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(24, 197, 139, 0.18), rgba(2, 8, 5, 0.08) 56%, transparent 70%);
  transform: translateX(-50%);
  box-shadow: 0 0 32px rgba(24, 197, 139, 0.18), inset 0 0 22px rgba(42, 211, 153, 0.08);
  animation: object-halo 3.8s ease-in-out infinite;
}

.feature-icon {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 88px;
  height: 88px;
  color: var(--mint);
}

.feature-object strong {
  margin-top: 5px;
  font-size: 15px;
  font-weight: 400;
}

.feature-object small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 300;
}

.feature-dots {
  position: absolute;
  bottom: var(--safe-bottom);
  left: 50%;
  display: flex;
  gap: 5px;
  transform: translateX(-50%);
}

.feature-dots i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(220, 255, 242, 0.25);
}

.feature-dots i.is-active {
  width: 14px;
  border-radius: 3px;
  background: var(--emerald-bright);
}

.directory,
.feature-panel,
.special-world {
  position: absolute;
  z-index: 52;
  inset: 0;
  color: var(--ink);
  background:
    linear-gradient(120deg, transparent 35%, rgba(24, 197, 139, 0.06) 49%, rgba(42, 211, 153, 0.05) 52%, transparent 66%),
    linear-gradient(160deg, rgba(2, 5, 3, 0.985), rgba(3, 18, 11, 0.985) 52%, rgba(1, 5, 3, 0.99));
  backdrop-filter: blur(18px);
  animation: overlay-in 240ms ease-out both;
}

.directory {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.overlay-head {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  align-items: center;
  gap: 10px;
  min-height: 68px;
  padding: var(--safe-top) var(--safe-right) 8px var(--safe-left);
  border-bottom: 1px solid rgba(42, 211, 153, 0.14);
}

.directory > .overlay-head {
  grid-template-columns: minmax(0, 1fr) 44px;
}

.overlay-head .eyebrow {
  margin-bottom: 3px;
}

.overlay-head h2 {
  margin: 0;
  overflow: hidden;
  font-size: 20px;
  font-weight: 300;
  line-height: 1.15;
  letter-spacing: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.directory-body {
  overflow-y: auto;
  padding: 12px var(--safe-right) 24px var(--safe-left);
}

.directory-room {
  border-bottom: 1px solid rgba(42, 211, 153, 0.12);
}

.directory-room-name {
  display: grid;
  grid-template-columns: 34px 1fr 22px;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 62px;
  padding: 8px 0;
  border: 0;
  background: transparent;
  color: var(--mint);
  text-align: left;
  cursor: pointer;
}

.directory-room-name > span:first-child {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(24, 197, 139, 0.3);
  border-radius: 50%;
  color: var(--emerald);
}

.directory-room-name strong,
.directory-room-name small {
  display: block;
}

.directory-room-name strong {
  color: var(--ink);
  font-size: 14px;
  font-weight: 400;
}

.directory-room-name small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 300;
}

.directory-features {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px 16px;
  padding: 0 0 10px 44px;
}

.directory-features button,
.directory-foot button {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 11px;
  text-align: left;
  cursor: pointer;
}

.directory-features button:hover,
.directory-features button:active {
  color: var(--mint);
}

.directory-foot {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 8px var(--safe-right) var(--safe-bottom) var(--safe-left);
  border-top: 1px solid rgba(42, 211, 153, 0.14);
}

.directory-foot button:last-child {
  justify-content: flex-end;
}

.directory-foot button:nth-child(2) {
  justify-content: center;
}

.feature-panel {
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
}

.panel-description {
  margin: 0;
  padding: 12px var(--safe-right) 8px var(--safe-left);
  color: var(--muted);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 16px;
  font-style: italic;
  font-weight: 400;
  line-height: 1.35;
}

.panel-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 0 var(--safe-right) 4px var(--safe-left);
  border-bottom: 1px solid rgba(42, 211, 153, 0.14);
}

.panel-tabs button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 44px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 11px;
  cursor: pointer;
}

.panel-tabs button[aria-selected="true"] {
  color: var(--mint);
}

.panel-tabs button[aria-selected="true"]::after {
  content: "";
  position: absolute;
  right: 22%;
  bottom: -1px;
  left: 22%;
  height: 1px;
  background: var(--emerald);
  box-shadow: 0 0 9px var(--emerald-glow);
}

.panel-content {
  min-height: 0;
  overflow-y: auto;
  padding: 12px var(--safe-right) 20px var(--safe-left);
}

.panel-actions {
  padding: 9px var(--safe-right) var(--safe-bottom) var(--safe-left);
  border-top: 1px solid rgba(42, 211, 153, 0.14);
  background: rgba(2, 7, 4, 0.84);
}

.panel-save {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 48px;
  padding: 0 18px;
  border: 1px solid var(--emerald-deep);
  border-radius: 6px;
  background: linear-gradient(110deg, rgba(8, 122, 88, 0.52), rgba(3, 24, 16, 0.8) 50%, rgba(42, 211, 153, 0.12));
  color: var(--mint);
  font-size: 12px;
  font-weight: 400;
  cursor: pointer;
}

.panel-save:disabled {
  opacity: 0.55;
}

.panel-save.is-saving span:first-child,
.sheet-submit.is-saving span:first-child {
  font-size: 0;
}

.panel-save.is-saving span:first-child::after,
.sheet-submit.is-saving span:first-child::after {
  content: "Saving...";
  font-size: 12px;
}

.feature-form {
  display: grid;
  gap: 14px;
}

.linked-focus-log {
  display: grid;
  gap: 0;
  margin-top: 3px;
  padding: 12px;
  border: 1px solid rgba(42, 211, 153, 0.16);
  border-radius: 7px;
  background: rgba(4, 28, 19, 0.34);
}

.linked-focus-log > div,
.linked-focus-log article {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.linked-focus-log > div {
  grid-template-columns: 1fr auto;
  padding-bottom: 9px;
}

.linked-focus-log > div span {
  color: var(--emerald-bright);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.linked-focus-log > div strong {
  color: var(--mint);
  font-size: 10px;
  font-weight: 500;
}

.linked-focus-log article {
  min-height: 52px;
  border-top: 1px solid rgba(42, 211, 153, 0.1);
}

.linked-focus-log article > span,
.linked-focus-log article small {
  color: var(--faint);
  font-size: 8px;
}

.linked-focus-log article div {
  min-width: 0;
}

.linked-focus-log article strong,
.linked-focus-log article small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.linked-focus-log article strong {
  color: var(--ink);
  font-size: 10px;
  font-weight: 400;
}

.linked-focus-log article b {
  color: var(--gold);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 15px;
  font-weight: 500;
}

.game-field,
.attachments-field,
.book-tools label {
  display: grid;
  gap: 6px;
}

.game-field > span,
.attachments-field > span,
.book-tools label > span,
.nes-compose label {
  color: var(--emerald-bright);
  font-size: 9px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.game-field input,
.game-field textarea,
.game-field select,
.book-tools input,
.search-field,
.nes-compose textarea,
.focus-chamber input {
  width: 100%;
  min-height: 46px;
  border: 1px solid rgba(24, 197, 139, 0.28);
  border-radius: 5px;
  background: rgba(1, 7, 4, 0.68);
  color: var(--ink);
  font-size: 13px;
  font-weight: 300;
}

.game-field input,
.game-field textarea,
.game-field select,
.book-tools input,
.nes-compose textarea,
.focus-chamber input {
  padding: 11px 12px;
}

.game-field textarea {
  min-height: 92px;
  resize: vertical;
  line-height: 1.5;
}

.game-field [aria-invalid="true"] {
  border-color: var(--emerald-bright);
  box-shadow: 0 0 0 2px rgba(42, 211, 153, 0.12);
}

.attach-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.attach-thumb,
.attach-add {
  position: relative;
  width: 68px;
  height: 68px;
  overflow: hidden;
  border: 1px solid rgba(42, 211, 153, 0.2);
  border-radius: 5px;
  background: rgba(2, 8, 5, 0.7);
}

.attach-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.attach-remove {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.72);
  color: var(--ink);
}

.attach-add {
  display: grid;
  place-items: center;
  color: var(--muted);
}

.attach-label {
  display: none;
}

.entry-path {
  display: grid;
}

.entry-stone {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 44px;
  align-items: center;
  min-height: 62px;
  border-bottom: 1px solid rgba(42, 211, 153, 0.12);
}

.entry-mark,
.entry-check {
  display: grid;
  place-items: center;
  width: 38px;
  height: 44px;
  border: 0;
  background: transparent;
  color: var(--emerald);
}

.entry-copy {
  min-width: 0;
  padding: 9px 8px;
  border: 0;
  background: transparent;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.entry-copy strong,
.entry-copy small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.entry-copy strong {
  font-size: 12px;
  font-weight: 400;
}

.entry-copy small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 300;
}

.entry-trash {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
  color: var(--faint);
  cursor: pointer;
}

.entry-stone.is-complete .entry-copy {
  opacity: 0.58;
}

.quiet-empty {
  margin: 0;
  padding: 42px 12px;
  color: var(--muted);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 17px;
  font-style: italic;
  text-align: center;
}

.loading-mark {
  width: 24px;
  height: 24px;
  margin: 50px auto;
  border: 1px solid rgba(24, 197, 139, 0.2);
  border-top-color: var(--emerald-bright);
  border-radius: 50%;
  animation: spin 800ms linear infinite;
}

.special-world {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
}

.focus-world {
  background:
    radial-gradient(circle at 23% 18%, rgba(29, 158, 105, 0.13), transparent 32%),
    radial-gradient(circle at 76% 30%, rgba(215, 181, 109, 0.08), transparent 34%),
    linear-gradient(160deg, #010403, #03120c 53%, #020806);
}

.focus-scroll {
  min-height: 0;
  overflow: hidden auto;
  padding: clamp(10px, 2.5vw, 24px) clamp(10px, 3vw, 36px) calc(var(--safe-bottom) + 30px);
  scrollbar-width: thin;
  scrollbar-color: rgba(42, 211, 153, 0.3) transparent;
}

.focus-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: min(1040px, 100%);
  margin: 0 auto 14px;
  border: 1px solid rgba(42, 211, 153, 0.16);
  border-radius: 10px;
  background: rgba(2, 14, 9, 0.54);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.035);
  backdrop-filter: blur(18px);
}

.focus-summary > div {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 12px clamp(10px, 2vw, 20px);
}

.focus-summary > div + div {
  border-left: 1px solid rgba(42, 211, 153, 0.12);
}

.focus-summary span,
.focus-summary small,
.focus-field .field-label,
.focus-link-grid label > span,
.focus-audio-station label > span,
.focus-custom-time > span,
.focus-duration legend,
.focus-completion label > span {
  color: var(--muted);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.focus-summary strong {
  color: var(--mint);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(20px, 3vw, 28px);
  font-weight: 500;
  line-height: 1;
}

.focus-summary small {
  color: var(--faint);
  font-size: 8px;
}

.focus-workbench {
  display: grid;
  grid-template-columns: minmax(300px, 0.92fr) minmax(340px, 1.08fr);
  gap: clamp(12px, 2.4vw, 26px);
  align-items: stretch;
  width: min(1040px, 100%);
  margin: 0 auto;
}

.focus-visual,
.focus-chamber,
.focus-completion,
.focus-reveal,
.focus-history-section {
  border: 1px solid rgba(42, 211, 153, 0.18);
  border-radius: 12px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.035), transparent 42%),
    rgba(1, 11, 7, 0.62);
  box-shadow: 0 20px 56px rgba(0, 0, 0, 0.24), inset 0 1px rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(24px) saturate(115%);
}

.focus-visual {
  position: relative;
  min-height: 520px;
  overflow: hidden;
  isolation: isolate;
}

.focus-visual::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 20% 8% 8%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(42, 211, 153, 0.13), transparent 67%);
  filter: blur(10px);
}

#focus-growth-canvas {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 520px;
}

.focus-seed-copy {
  position: absolute;
  top: 18px;
  left: 18px;
  display: grid;
  gap: 4px;
  max-width: calc(100% - 36px);
  padding: 10px 12px;
  border: 1px solid rgba(42, 211, 153, 0.14);
  border-radius: 7px;
  background: rgba(1, 8, 5, 0.55);
  backdrop-filter: blur(14px);
}

.focus-seed-copy span {
  color: var(--emerald-bright);
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.focus-seed-copy strong {
  overflow: hidden;
  color: var(--ink);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 17px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.focus-ring {
  --focus-angle: 360deg;
  position: absolute;
  right: 18px;
  bottom: 18px;
  display: grid;
  place-content: center;
  justify-items: center;
  width: 118px;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(2, 14, 9, 0.92) 59%, transparent 60%),
    conic-gradient(var(--emerald) var(--focus-angle), rgba(42, 211, 153, 0.12) 0);
  box-shadow: 0 0 42px rgba(24, 197, 139, 0.14), inset 0 0 28px rgba(42, 211, 153, 0.07);
  backdrop-filter: blur(12px);
}

.focus-ring::after {
  content: "";
  position: absolute;
  inset: 9%;
  border: 1px solid rgba(220, 255, 242, 0.15);
  border-radius: 50%;
}

.focus-ring span {
  font-size: 25px;
  font-weight: 300;
  line-height: 1;
}

.focus-ring small {
  margin-top: 7px;
  color: var(--emerald-bright);
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: 0.11em;
}

.focus-chamber,
.focus-completion,
.focus-reveal {
  align-content: start;
  gap: 15px;
  min-width: 0;
  padding: clamp(18px, 3vw, 30px);
}

.focus-chamber {
  display: grid;
}

.focus-field,
.focus-link-grid label,
.focus-audio-station label,
.focus-custom-time,
.focus-completion label {
  display: grid;
  gap: 7px;
}

.focus-chamber input,
.focus-chamber select,
.focus-completion input:not([type="checkbox"]):not([type="range"]),
.focus-completion textarea {
  width: 100%;
  min-height: 46px;
  padding: 10px 12px;
  border: 1px solid rgba(42, 211, 153, 0.25);
  border-radius: 6px;
  outline: none;
  background: rgba(1, 7, 4, 0.7);
  color: var(--ink);
  font: inherit;
  font-size: 12px;
}

.focus-chamber input:focus,
.focus-chamber select:focus,
.focus-completion input:focus,
.focus-completion textarea:focus {
  border-color: var(--emerald-bright);
  box-shadow: 0 0 0 3px rgba(42, 211, 153, 0.1);
}

.focus-chamber input:disabled,
.focus-chamber select:disabled,
.focus-presets button:disabled {
  cursor: not-allowed;
  opacity: 0.52;
}

.focus-link-grid {
  display: grid;
  grid-template-columns: 0.86fr 1.14fr;
  gap: 10px;
}

.focus-duration {
  display: grid;
  gap: 10px;
  min-width: 0;
  margin: 0;
  padding: 13px;
  border: 1px solid rgba(42, 211, 153, 0.13);
  border-radius: 8px;
}

.focus-duration legend {
  padding: 0 6px;
}

.focus-presets {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
}

.focus-presets button {
  min-width: 0;
  min-height: 42px;
  padding: 0 4px;
  border: 1px solid rgba(42, 211, 153, 0.16);
  border-radius: 5px;
  background: rgba(1, 8, 5, 0.4);
  color: var(--muted);
  font-size: 10px;
  cursor: pointer;
}

.focus-presets button.is-active {
  border-color: var(--emerald);
  background: rgba(8, 122, 88, 0.2);
  color: var(--mint);
}

.focus-custom-time {
  grid-template-columns: 1fr 100px;
  align-items: center;
}

.focus-audio-station {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 9px;
  align-items: end;
}

#focus-rain-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 46px;
  padding: 0 12px;
  border: 1px solid rgba(42, 211, 153, 0.18);
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font-size: 10px;
  cursor: pointer;
}

#focus-rain-toggle.is-active,
#focus-sound.is-active {
  border-color: rgba(42, 211, 153, 0.52);
  color: var(--mint);
  box-shadow: inset 0 0 18px rgba(42, 211, 153, 0.08);
}

.focus-player {
  overflow: hidden;
  border: 1px solid rgba(42, 211, 153, 0.15);
  border-radius: 7px;
  background: #010503;
}

.focus-player iframe {
  display: block;
  width: 100%;
  min-height: 138px;
  border: 0;
}

.focus-player p {
  margin: 0;
  padding: 7px 10px;
  color: var(--faint);
  font-size: 8px;
  text-align: center;
}

.focus-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  margin-top: auto;
  padding-top: 4px;
}

.focus-primary {
  display: grid;
  place-items: center;
  width: 70px;
  height: 70px;
  border: 1px solid var(--emerald-bright);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, rgba(74, 232, 177, 0.34), rgba(8, 122, 88, 0.32));
  color: var(--mint);
  box-shadow: 0 0 32px rgba(24, 197, 139, 0.18), inset 0 1px rgba(255, 255, 255, 0.12);
  cursor: pointer;
}

.focus-completion {
  display: grid;
}

.focus-completion h3,
.focus-reveal h3,
.focus-history-section h3 {
  margin: 0;
  color: var(--mint);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 500;
  line-height: 1.05;
}

.focus-completion textarea {
  min-height: 92px;
  resize: vertical;
  line-height: 1.5;
}

.focus-completion label:has(input[type="range"]) {
  grid-template-columns: 1fr auto;
}

.focus-completion input[type="range"] {
  grid-column: 1;
  width: 100%;
  accent-color: var(--emerald-bright);
}

.focus-completion output {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  color: var(--mint);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 24px;
}

.focus-kept {
  grid-template-columns: 22px 1fr;
  align-items: center;
  padding: 11px 12px;
  border: 1px solid rgba(215, 181, 109, 0.2);
  border-radius: 7px;
  background: rgba(215, 181, 109, 0.04);
}

.focus-kept input {
  width: 18px;
  height: 18px;
  accent-color: var(--emerald-bright);
}

.focus-kept span {
  color: var(--ink);
  font-size: 11px;
}

.focus-completion-actions {
  display: grid;
  grid-template-columns: auto minmax(180px, 1fr);
  gap: 10px;
  align-items: center;
}

.focus-reveal {
  display: grid;
}

.focus-reveal .focus-scientific {
  margin: -6px 0 0;
  color: var(--emerald-bright);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 17px;
  font-style: italic;
}

.focus-reveal dl {
  display: grid;
  gap: 8px;
  margin: 0;
}

.focus-reveal dl > div {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(42, 211, 153, 0.12);
}

.focus-reveal dt {
  color: var(--faint);
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.focus-reveal dd,
.focus-reveal > p:not(.eyebrow) {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.55;
}

.focus-reveal blockquote {
  margin: 0;
  padding: 14px 16px;
  border-left: 2px solid var(--gold);
  background: rgba(215, 181, 109, 0.05);
  color: var(--ink);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 17px;
  font-style: italic;
  line-height: 1.35;
}

.focus-history-section {
  width: min(1040px, 100%);
  margin: 14px auto 0;
  padding: clamp(14px, 2vw, 20px);
}

.focus-history-section .section-line {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 10px;
}

.focus-history-section h3 {
  font-size: 21px;
}

#focus-completion-rate {
  color: var(--emerald-bright);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.focus-history {
  display: grid;
}

.focus-history-row {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) minmax(70px, auto);
  gap: 10px;
  align-items: center;
  min-height: 62px;
  border-top: 1px solid rgba(42, 211, 153, 0.1);
}

.focus-history-mark {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(42, 211, 153, 0.18);
  border-radius: 50%;
  color: var(--muted);
}

.focus-history-row.is-complete .focus-history-mark {
  border-color: rgba(42, 211, 153, 0.42);
  background: rgba(8, 122, 88, 0.15);
  color: var(--mint);
}

.focus-history-row strong,
.focus-history-row small,
.focus-history-row p {
  display: block;
  margin: 0;
}

.focus-history-row strong {
  color: var(--ink);
  font-size: 11px;
  font-weight: 500;
}

.focus-history-row small,
.focus-history-row p,
.focus-history-reward {
  margin-top: 3px;
  color: var(--faint);
  font-size: 9px;
}

.focus-history-row p {
  overflow: hidden;
  max-width: 620px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.focus-history-reward {
  max-width: 130px;
  color: var(--emerald-bright);
  text-align: right;
}

@media (max-width: 780px) {
  .focus-workbench {
    grid-template-columns: 1fr;
  }

  .focus-visual,
  #focus-growth-canvas {
    min-height: 390px;
  }

  .focus-link-grid,
  .focus-audio-station {
    grid-template-columns: 1fr;
  }

  #focus-rain-toggle {
    justify-self: stretch;
  }
}

@media (max-width: 520px) {
  .focus-scroll {
    padding-inline: 7px;
  }

  .focus-summary > div {
    padding-inline: 8px;
  }

  .focus-summary small {
    display: none;
  }

  .focus-presets {
    grid-template-columns: repeat(5, minmax(48px, 1fr));
    overflow-x: auto;
  }

  .focus-custom-time {
    grid-template-columns: 1fr 88px;
  }

  .focus-completion-actions {
    grid-template-columns: 1fr;
  }

  .focus-history-row {
    grid-template-columns: 34px minmax(0, 1fr);
  }

  .focus-history-reward {
    display: none;
  }
}

.book-world {
  grid-template-rows: auto auto minmax(0, 1fr);
  overflow: hidden;
}

.book-date-nav {
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
  width: min(740px, 100%);
  margin: 0 auto;
  padding: 5px 10px;
}

.book-date-nav time {
  color: var(--mint);
  font-size: 10px;
  text-align: center;
}

.open-book {
  position: relative;
  align-self: center;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 10px minmax(0, 1fr);
  width: min(760px, calc(100% - 12px));
  height: min(68vh, 530px);
  min-height: 330px;
  margin: 0 auto max(8px, var(--safe-bottom));
  perspective: 1200px;
  filter: drop-shadow(0 24px 35px rgba(0, 0, 0, 0.55));
}

.book-leaf {
  position: relative;
  min-width: 0;
  overflow: hidden auto;
  padding: clamp(14px, 3vw, 30px);
  border: 1px solid rgba(42, 211, 153, 0.32);
  background:
    linear-gradient(100deg, rgba(42, 211, 153, 0.05), transparent 22%),
    linear-gradient(150deg, #07110c, #020704 72%);
  color: var(--ink);
  scrollbar-width: none;
}

.book-leaf-left {
  border-radius: 6px 1px 1px 6px;
  box-shadow: inset -16px 0 28px rgba(0, 0, 0, 0.42);
}

.book-leaf-right {
  border-radius: 1px 6px 6px 1px;
  box-shadow: inset 16px 0 28px rgba(0, 0, 0, 0.42);
}

.book-binding {
  position: relative;
  z-index: 2;
  background: linear-gradient(90deg, #02140c, var(--emerald-bright), #052016);
  box-shadow: 0 0 16px rgba(0, 0, 0, 0.8);
}

.book-binding i {
  position: absolute;
  inset: 4px 3px;
  border-left: 1px solid rgba(220, 255, 242, 0.25);
  border-right: 1px solid rgba(0, 0, 0, 0.7);
}

.book-kicker {
  margin: 0 0 10px;
  color: var(--emerald-bright);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.book-leaf h3 {
  margin: 0 0 18px;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(16px, 3vw, 25px);
  font-style: italic;
  font-weight: 400;
  line-height: 1.15;
}

.book-mood,
.book-gratitude {
  margin: 0 0 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(42, 211, 153, 0.13);
}

.book-mood span,
.book-gratitude > span {
  display: block;
  margin-bottom: 5px;
  color: var(--muted);
  font-size: 9px;
  text-transform: uppercase;
}

.book-mood strong {
  color: var(--emerald);
  font-size: 11px;
  font-weight: 400;
}

.book-gratitude p,
.book-events p {
  margin: 4px 0;
  font-size: 9px;
  line-height: 1.35;
}

.book-leaf mark {
  display: block;
  margin: 9px 0;
  padding: 4px 6px;
  background: linear-gradient(90deg, rgba(42, 211, 153, 0.25), rgba(24, 197, 139, 0.08));
  color: var(--mint);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 12px;
  font-style: italic;
}

.book-events {
  display: grid;
  gap: 4px;
}

.book-events > div {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  min-height: 34px;
  border-bottom: 1px solid rgba(42, 211, 153, 0.1);
}

.book-events > div > span {
  color: var(--emerald);
}

.book-events strong,
.book-events small {
  display: block;
  overflow: hidden;
  font-size: 9px;
  font-weight: 400;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.book-events small {
  color: var(--muted);
  font-size: 9px;
}

.book-leaf blockquote,
.margin-note {
  margin: 14px 0;
  color: var(--mint);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 11px;
  font-style: italic;
  line-height: 1.35;
}

.margin-note {
  padding-left: 7px;
  border-left: 1px solid var(--emerald);
}

.page-sticker {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin: 5px;
  border: 1px solid rgba(42, 211, 153, 0.28);
  border-radius: 50%;
  color: var(--emerald-bright);
  transform: rotate(-8deg);
}

.book-write {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  margin-top: 12px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--emerald);
  font-size: 9px;
}

.book-tools {
  position: absolute;
  z-index: 4;
  right: 10px;
  bottom: calc(var(--safe-bottom) + 4px);
  left: 10px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  max-height: 42vh;
  overflow-y: auto;
  padding: 14px;
  border: 1px solid rgba(42, 211, 153, 0.28);
  border-radius: 6px;
  background: rgba(2, 9, 6, 0.97);
  box-shadow: 0 -18px 34px rgba(0, 0, 0, 0.5);
}

.book-tools .sticker-palette {
  display: flex;
  gap: 6px;
  grid-column: 1 / -1;
}

.sticker-palette button {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(42, 211, 153, 0.2);
  border-radius: 50%;
  background: transparent;
  color: var(--emerald-bright);
}

.sticker-palette button.is-active {
  border-color: var(--emerald);
  background: rgba(24, 197, 139, 0.12);
}

.book-tools .panel-save {
  grid-column: 1 / -1;
}

.open-book.turn-forward .book-leaf-right {
  animation: page-forward 560ms ease both;
  transform-origin: left center;
}

.open-book.turn-back .book-leaf-left {
  animation: page-back 560ms ease both;
  transform-origin: right center;
}

.search-world,
.trash-world,
.signs-world,
.nes-world {
  grid-template-rows: auto auto minmax(0, 1fr);
}

.signs-world {
  grid-template-rows: auto auto auto minmax(0, 1fr);
}

.search-field {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: 4px;
  width: min(700px, calc(100% - 28px));
  margin: 14px auto 4px;
  padding: 0 10px;
  color: var(--emerald);
}

.search-field input {
  min-width: 0;
  min-height: 44px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-size: 13px;
  outline: 0;
}

.search-results,
.trash-list,
.signs-path,
.nes-messages {
  width: min(700px, 100%);
  min-height: 0;
  margin: 0 auto;
  overflow-y: auto;
  padding: 8px 14px var(--safe-bottom);
}

.search-result {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 22px;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 58px;
  padding: 6px 0;
  border: 0;
  border-bottom: 1px solid rgba(42, 211, 153, 0.12);
  background: transparent;
  color: var(--ink);
  text-align: left;
}

.search-result > span:first-child {
  color: var(--emerald);
}

.search-result strong,
.search-result small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.search-result strong {
  font-size: 11px;
  font-weight: 400;
}

.search-result small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 9px;
}

.trash-entry {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto 44px;
  align-items: center;
  gap: 7px;
  min-height: 64px;
  border-bottom: 1px solid rgba(42, 211, 153, 0.12);
}

.trash-entry > span {
  color: var(--faint);
}

.trash-entry strong,
.trash-entry small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.trash-entry strong {
  font-size: 11px;
  font-weight: 400;
}

.trash-entry small {
  color: var(--muted);
  font-size: 9px;
}

.trash-entry button {
  min-height: 44px;
  border: 0;
  background: transparent;
  color: var(--emerald);
  font-size: 10px;
}

.trash-entry button:last-child {
  display: grid;
  place-items: center;
  width: 44px;
  color: var(--faint);
}

.signs-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: min(700px, calc(100% - 28px));
  margin: 14px auto 4px;
  border-top: 1px solid rgba(42, 211, 153, 0.16);
  border-bottom: 1px solid rgba(42, 211, 153, 0.16);
}

.signs-summary > div {
  display: grid;
  justify-items: center;
  padding: 12px 4px;
}

.signs-summary strong {
  color: var(--mint);
  font-size: 18px;
  font-weight: 300;
}

.signs-summary span {
  color: var(--muted);
  font-size: 9px;
}

.signs-earned {
  display: flex;
  gap: 8px;
  width: min(700px, 100%);
  min-height: 0;
  margin: 0 auto;
  overflow-x: auto;
  padding: 10px 14px 4px;
  scrollbar-width: none;
}

.signs-earned::-webkit-scrollbar {
  display: none;
}

.signs-earned article {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  flex: 0 0 min(250px, 78vw);
  min-height: 64px;
  padding: 8px 10px;
  border: 1px solid rgba(42, 211, 153, 0.18);
  border-radius: 5px;
  background: rgba(42, 211, 153, 0.035);
}

.signs-earned article > span {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(24, 197, 139, 0.36);
  border-radius: 50%;
  color: var(--mint);
}

.signs-earned strong,
.signs-earned small {
  display: block;
}

.signs-earned strong {
  font-size: 10px;
  font-weight: 400;
}

.signs-earned small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 300;
  line-height: 1.4;
}

.signs-earned .quiet-empty {
  width: 100%;
  padding: 12px;
}

.sign-event {
  position: relative;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: center;
  min-height: 58px;
  padding: 5px 0;
}

.sign-event::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 19px;
  width: 1px;
  background: rgba(24, 197, 139, 0.22);
}

.sign-event > span {
  z-index: 1;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #04100a;
  color: var(--emerald);
}

.sign-event.is-sign > span {
  border: 1px solid var(--emerald-bright);
  color: var(--mint);
  box-shadow: 0 0 20px rgba(42, 211, 153, 0.17);
}

.sign-event strong,
.sign-event small {
  display: block;
  padding-left: 10px;
}

.achievement-reveal {
  position: absolute;
  inset: 0;
  z-index: 78;
  display: grid;
  align-content: center;
  justify-items: center;
  padding: max(24px, var(--safe-top)) 24px max(24px, var(--safe-bottom));
  background:
    radial-gradient(circle at 50% 45%, rgba(24, 197, 139, 0.2), transparent 30%),
    rgba(1, 5, 3, 0.97);
  text-align: center;
}

.achievement-reveal::before {
  content: "";
  position: absolute;
  inset: 18px;
  border: 1px solid rgba(42, 211, 153, 0.28);
  border-radius: 7px;
  box-shadow: inset 0 0 30px rgba(24, 197, 139, 0.06), 0 0 26px rgba(42, 211, 153, 0.08);
  animation: achievement-border 3.4s ease-in-out infinite;
  pointer-events: none;
}

.achievement-fireflies,
.achievement-fireflies::before,
.achievement-fireflies::after {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--mint);
  box-shadow: 88px 44px 8px var(--emerald), -106px 86px 9px var(--emerald-bright), 126px -70px 10px var(--emerald), -128px -112px 10px var(--mint), 34px 152px 8px var(--emerald);
  animation: tour-fireflies 4.6s ease-in-out infinite alternate;
  pointer-events: none;
}

.achievement-reveal > :not(.achievement-fireflies) {
  position: relative;
  z-index: 1;
}

.achievement-fireflies::before,
.achievement-fireflies::after {
  content: "";
}

.achievement-fireflies::before { transform: rotate(118deg); }
.achievement-fireflies::after { transform: rotate(232deg) scale(0.8); }

.achievement-mark {
  display: grid;
  place-items: center;
  width: 104px;
  height: 104px;
  margin: 12px 0 22px;
  border: 1px solid var(--emerald-bright);
  border-radius: 50%;
  color: var(--mint);
  box-shadow: 0 0 46px rgba(24, 197, 139, 0.18), inset 0 0 28px rgba(42, 211, 153, 0.08);
}

.achievement-mark svg {
  width: 40px;
  height: 40px;
}

.achievement-reveal h2 {
  max-width: 360px;
  margin: 0;
  font-size: 29px;
  font-weight: 300;
}

.achievement-reveal > p:not(.eyebrow) {
  max-width: 390px;
  margin: 12px 0 24px;
  color: var(--muted);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 17px;
  font-style: italic;
  line-height: 1.45;
}

.achievement-reveal .primary-command {
  width: min(230px, 100%);
}

.sign-event strong {
  font-size: 11px;
  font-weight: 400;
}

.sign-event small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 9px;
}

.nes-world {
  grid-template-rows: auto minmax(0, 1fr) auto auto;
}

.nes-messages {
  padding-top: 18px;
}

.nes-empty {
  display: grid;
  justify-items: center;
  gap: 16px;
  padding: 14vh 22px 0;
  color: var(--muted);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 17px;
  font-style: italic;
  line-height: 1.45;
  text-align: center;
}

.lantern-core {
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  border: 1px solid var(--emerald);
  border-radius: 50%;
  color: var(--mint);
  box-shadow: 0 0 42px rgba(24, 197, 139, 0.2);
  animation: lantern-breathe 4s ease-in-out infinite;
}

.settings-world {
  grid-template-rows: auto minmax(0, 1fr);
}

.rhythm-world {
  grid-template-rows: auto minmax(0, 1fr);
}

.rhythm-scroll {
  width: min(680px, 100%);
  margin: 0 auto;
  overflow-y: auto;
  padding: 12px var(--safe-right) calc(var(--safe-bottom) + 26px) var(--safe-left);
}

.rhythm-scroll > section {
  padding: 14px 2px 16px;
  border-bottom: 1px solid rgba(42, 211, 153, 0.14);
}

.daily-offering {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  align-items: center;
  gap: 18px;
}

.rhythm-meter {
  --rhythm-progress: 0deg;
  display: grid;
  place-content: center;
  justify-items: center;
  width: 80px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, #03110b 62%, transparent 63%), conic-gradient(var(--emerald) var(--rhythm-progress), rgba(42, 211, 153, 0.12) 0);
  box-shadow: inset 0 0 20px rgba(42, 211, 153, 0.08), 0 0 24px rgba(32, 217, 154, 0.1);
}

.rhythm-meter strong {
  font-size: 17px;
  font-weight: 400;
}

.rhythm-meter span,
.section-line span {
  color: var(--muted);
  font-size: 9px;
}

.daily-offering h3,
.wisdom-stone h3,
.daily-assignment h3,
.section-line h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 400;
}

#offering-scripture {
  display: grid;
  gap: 6px;
  margin: 8px 0 0;
}

#offering-scripture q {
  color: var(--ink);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 15px;
  font-style: italic;
  line-height: 1.35;
}

#offering-scripture cite,
#offering-scripture span {
  color: var(--muted);
  font-size: 9px;
  font-style: normal;
  line-height: 1.45;
}

.wisdom-stone p:not(.settings-kicker),
.daily-assignment p:not(.settings-kicker) {
  margin: 7px 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 300;
  line-height: 1.55;
}

.wisdom-stone a {
  color: var(--emerald-bright);
  font-size: 9px;
  text-decoration: none;
}

.daily-assignment {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.daily-assignment > span {
  display: grid;
  place-items: center;
  width: 38px;
  aspect-ratio: 1;
  border: 1px solid rgba(42, 211, 153, 0.22);
  border-radius: 50%;
  color: var(--emerald-bright);
}

.section-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 2px 9px;
}

.practice-path,
.open-loop-path {
  border-top: 1px solid rgba(42, 211, 153, 0.1);
}

.practice-step,
.open-loop {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 44px;
  align-items: center;
  min-height: 58px;
  border-bottom: 1px solid rgba(42, 211, 153, 0.1);
}

.practice-mark {
  display: grid;
  place-items: center;
  width: 30px;
  aspect-ratio: 1;
  border: 1px solid rgba(42, 211, 153, 0.2);
  border-radius: 50%;
  color: var(--emerald-bright);
}

.practice-step[data-state="complete"] .practice-mark {
  border-color: var(--emerald);
  background: rgba(32, 217, 154, 0.12);
  box-shadow: 0 0 18px rgba(32, 217, 154, 0.14);
}

.practice-step > button,
.practice-resolve,
.open-loop button {
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.practice-step > button:first-of-type {
  min-height: 52px;
  padding: 7px 0;
}

.practice-step strong,
.practice-step small,
.open-loop strong,
.open-loop small {
  display: block;
}

.practice-step strong,
.open-loop strong {
  color: var(--ink);
  font-size: 11px;
  font-weight: 400;
}

.practice-step small,
.open-loop small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 300;
}

.practice-resolve {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  color: var(--muted);
}

.open-loop {
  grid-template-columns: 40px minmax(0, 1fr);
}

.open-loop button {
  display: grid;
  place-items: center;
  width: 40px;
  height: 44px;
  color: var(--emerald-bright);
}

.year-light {
  display: grid;
  grid-template-columns: repeat(31, 1fr);
  gap: 3px;
  width: 100%;
}

.year-light i {
  aspect-ratio: 1;
  border: 1px solid rgba(42, 211, 153, 0.08);
  border-radius: 1px;
  background: rgba(42, 211, 153, 0.035);
}

.year-light i[data-state="partial"] {
  background: color-mix(in srgb, var(--emerald) var(--day-light), rgba(42, 211, 153, 0.05));
}

.year-light i[data-state="complete"] {
  background: var(--emerald-bright);
  box-shadow: 0 0 5px rgba(85, 239, 184, 0.42);
}

.year-light i[data-state="future"] {
  opacity: 0.25;
}

.rule-editor,
.bible-library {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  overflow: hidden;
  padding-bottom: var(--safe-bottom);
  background: linear-gradient(160deg, #010503, #03120c 58%, #010503);
}

.rule-editor > .panel-description,
.rule-editor > .panel-save,
.bible-library > .panel-save {
  margin: 12px var(--safe-right) 0 var(--safe-left);
}

.rule-options {
  overflow-y: auto;
  padding: 8px var(--safe-right) 16px var(--safe-left);
}

.rule-option {
  display: block;
  border-bottom: 1px solid rgba(42, 211, 153, 0.1);
}

.rule-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.rule-option span {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  min-height: 54px;
  color: var(--muted);
  cursor: pointer;
}

.rule-option strong {
  font-size: 11px;
  font-weight: 400;
}

.rule-option input:checked + span {
  color: var(--mint);
}

.rule-option input:checked + span svg {
  color: var(--emerald);
  filter: drop-shadow(0 0 6px rgba(32, 217, 154, 0.4));
}

.bible-world {
  grid-template-rows: auto auto auto auto minmax(0, 1fr) auto;
}

.bible-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 76px 76px;
  gap: 8px;
  width: min(760px, 100%);
  margin: 0 auto;
  padding: 10px var(--safe-right) 8px var(--safe-left);
  border-bottom: 1px solid rgba(42, 211, 153, 0.12);
}

.bible-toolbar label {
  display: grid;
  gap: 4px;
}

.bible-toolbar label span {
  color: var(--emerald-bright);
  font-size: 8px;
  text-transform: uppercase;
}

.bible-toolbar select {
  min-width: 0;
  height: 44px;
  border: 1px solid rgba(42, 211, 153, 0.2);
  border-radius: 4px;
  background: #03100a;
  color: var(--ink);
  padding: 0 9px;
  font: inherit;
  font-size: 11px;
}

.bible-plan {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 10px;
  width: min(760px, 100%);
  margin: 0 auto;
  padding: 8px var(--safe-right) 9px var(--safe-left);
  border-bottom: 1px solid rgba(42, 211, 153, 0.1);
}

.bible-plan span,
.bible-plan small {
  color: var(--muted);
  font-size: 8px;
}

.bible-plan strong {
  font-size: 10px;
  font-weight: 400;
}

.bible-plan button {
  grid-row: 1 / 3;
  grid-column: 2;
  min-height: 38px;
  border: 1px solid rgba(42, 211, 153, 0.22);
  border-radius: 4px;
  background: rgba(32, 217, 154, 0.08);
  color: var(--emerald-bright);
  font-size: 9px;
  cursor: pointer;
}

.bible-mode-switch {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  width: min(760px, 100%);
  margin: 0 auto;
  padding: 7px var(--safe-right) 8px var(--safe-left);
  border-bottom: 1px solid rgba(42, 211, 153, 0.12);
  background: rgba(1, 8, 5, 0.52);
}

.bible-mode-switch button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 0;
  min-height: 44px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: color 180ms ease, border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.bible-mode-switch button:hover {
  color: var(--mint);
  background: rgba(32, 217, 154, 0.055);
}

.bible-mode-switch button.is-active {
  border-color: rgba(42, 211, 153, 0.3);
  background: linear-gradient(135deg, rgba(32, 217, 154, 0.16), rgba(32, 217, 154, 0.055));
  color: var(--mint);
  box-shadow: inset 0 0 18px rgba(32, 217, 154, 0.055);
}

.bible-mode-switch svg {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
}

.bible-study-desk {
  grid-row: 5;
  min-height: 0;
  width: min(760px, 100%);
  margin: 0 auto;
  overflow-y: auto;
  padding: 16px max(16px, var(--safe-right)) 28px max(16px, var(--safe-left));
  background: linear-gradient(180deg, rgba(2, 12, 8, 0.64), rgba(1, 7, 4, 0.36));
  scrollbar-width: thin;
  scrollbar-color: rgba(110, 231, 183, 0.3) rgba(255, 255, 255, 0.02);
}

.bible-study-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.bible-study-head strong {
  display: block;
  margin-top: 2px;
  color: var(--mint);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 17px;
  font-weight: 400;
}

.bible-highlight-tools {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.bible-highlight-tools button {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(42, 211, 153, 0.18);
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.045);
  color: var(--muted);
  cursor: pointer;
}

.bible-highlight-tools button.is-active {
  border-color: var(--emerald);
  color: var(--mint);
  box-shadow: 0 0 16px rgba(32, 217, 154, 0.18);
}

.bible-highlight-tools i {
  width: 16px;
  height: 16px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28);
}

.tone-gold { background: #e8c96d; }
.tone-emerald { background: #20d99a; }
.tone-rose { background: #ff8fa3; }
.tone-sapphire { background: #7db4ff; }

.bible-selection-builder {
  display: grid;
  gap: 10px;
  margin-top: 14px;
  padding: 12px;
  border: 1px solid rgba(42, 211, 153, 0.16);
  border-radius: 7px;
  background:
    linear-gradient(145deg, rgba(32, 217, 154, 0.08), transparent 48%),
    rgba(1, 8, 5, 0.66);
}

.bible-selection-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.bible-selection-head strong {
  display: block;
  margin-top: 3px;
  color: var(--mint);
  font-size: 11px;
  font-weight: 600;
}

.bible-selection-head .text-command {
  min-height: 44px;
  padding-inline: 12px;
}

.bible-selection-list {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  min-height: 44px;
}

.bible-selection-list > p {
  align-self: center;
  margin: 0;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.45;
}

.bible-selection-list button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  max-width: 100%;
  border: 1px solid rgba(42, 211, 153, 0.24);
  border-radius: 999px;
  background: rgba(32, 217, 154, 0.09);
  color: #dff7ef;
  padding: 8px 10px 8px 12px;
  font: inherit;
  font-size: 10px;
  cursor: pointer;
  transition: color 180ms ease, border-color 180ms ease, background 180ms ease;
}

.bible-selection-list button:hover {
  border-color: rgba(110, 231, 183, 0.48);
  background: rgba(32, 217, 154, 0.15);
  color: var(--mint);
}

.bible-selection-list button span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bible-selection-list button svg {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
}

.bible-range-picker {
  display: grid;
  grid-template-columns: 82px 82px minmax(116px, 1fr);
  align-items: end;
  gap: 8px;
}

.bible-range-picker label {
  display: grid;
  gap: 4px;
}

.bible-range-picker label span {
  color: var(--emerald-bright);
  font-size: 8px;
  text-transform: uppercase;
}

.bible-range-picker select {
  width: 100%;
  min-width: 0;
  height: 44px;
  border: 1px solid rgba(42, 211, 153, 0.2);
  border-radius: 5px;
  background: #03100a;
  color: var(--ink);
  padding-inline: 9px;
  font: inherit;
  font-size: 11px;
}

.bible-range-picker .panel-save {
  min-height: 44px;
}

.bible-selection-help {
  margin: 0;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.5;
}

.bible-note-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 132px;
  gap: 8px;
  margin-top: 10px;
}

.bible-note-row textarea,
.bible-devotional-grid textarea {
  width: 100%;
  min-width: 0;
  resize: vertical;
  border: 1px solid rgba(42, 211, 153, 0.18);
  border-radius: 5px;
  background: rgba(1, 8, 5, 0.74);
  color: var(--ink);
  padding: 9px 10px;
  font: inherit;
  font-size: 11px;
}

.bible-note-row .panel-save,
.bible-devotional-card .panel-save {
  min-height: 42px;
}

.bible-devotional-card {
  display: grid;
  gap: 9px;
  margin-top: 10px;
  padding: 11px;
  border: 1px solid rgba(42, 211, 153, 0.13);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.035);
}

.bible-devotional-card h3 {
  margin: 2px 0 0;
  color: #dff7ef;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 17px;
  font-weight: 400;
}

.bible-devotional-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.bible-note-feed {
  display: grid;
  gap: 6px;
  max-height: 96px;
  margin-top: 9px;
  overflow-y: auto;
}

.bible-note-feed article {
  display: grid;
  gap: 2px;
  padding: 8px 9px;
  border-left: 2px solid var(--emerald);
  background: rgba(32, 217, 154, 0.055);
}

.bible-note-feed strong {
  color: var(--emerald-bright);
  font-size: 9px;
  font-weight: 500;
}

.bible-note-feed p {
  margin: 0;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.4;
}

.scripture-reader {
  grid-row: 5;
  min-height: 0;
  width: min(720px, 100%);
  margin: 0 auto;
  overflow-y: auto;
  padding: 18px max(20px, var(--safe-right)) 30px max(20px, var(--safe-left));
  scroll-behavior: smooth;
}

.scripture-reader header {
  margin-bottom: 24px;
  text-align: center;
}

.bible-reader-hint {
  width: min(420px, 100%);
  margin: 10px auto 0;
  color: var(--muted);
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 10px;
  font-style: normal;
  line-height: 1.5;
}

.scripture-reader header p,
.scripture-reader footer {
  color: var(--muted);
  font-size: 8px;
}

.scripture-reader h3 {
  margin: 5px 0 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 24px;
  font-style: italic;
  font-weight: 400;
}

.scripture-verse {
  margin: 0;
  padding: 6px 5px;
  color: #d8eee6;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.62;
  border-radius: 4px;
  cursor: pointer;
  transition: background 160ms ease, box-shadow 160ms ease, color 160ms ease;
}

.scripture-verse:hover,
.scripture-verse.is-selected {
  background: rgba(32, 217, 154, 0.075);
  box-shadow: inset 2px 0 rgba(32, 217, 154, 0.58);
}

.scripture-verse.is-selected {
  color: #effff8;
  background: linear-gradient(90deg, rgba(32, 217, 154, 0.18), rgba(32, 217, 154, 0.045));
  box-shadow: inset 3px 0 var(--emerald), 0 0 18px rgba(32, 217, 154, 0.055);
}

.scripture-verse.is-active:not(.is-selected) {
  box-shadow: inset 2px 0 rgba(232, 201, 109, 0.72);
}

.scripture-verse sup {
  margin-right: 5px;
  color: var(--emerald-bright);
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 7px;
  font-style: normal;
}

.scripture-verse.is-due {
  background: linear-gradient(90deg, rgba(32, 217, 154, 0.14), rgba(32, 217, 154, 0.025));
  box-shadow: inset 2px 0 var(--emerald);
}

.scripture-verse.mark-gold {
  background: linear-gradient(90deg, rgba(232, 201, 109, 0.28), rgba(232, 201, 109, 0.035));
  box-shadow: inset 2px 0 #e8c96d;
}

.scripture-verse.mark-emerald {
  background: linear-gradient(90deg, rgba(32, 217, 154, 0.24), rgba(32, 217, 154, 0.035));
  box-shadow: inset 2px 0 var(--emerald);
}

.scripture-verse.mark-rose {
  background: linear-gradient(90deg, rgba(255, 143, 163, 0.22), rgba(255, 143, 163, 0.035));
  box-shadow: inset 2px 0 #ff8fa3;
}

.scripture-verse.mark-sapphire {
  background: linear-gradient(90deg, rgba(125, 180, 255, 0.22), rgba(125, 180, 255, 0.035));
  box-shadow: inset 2px 0 #7db4ff;
}

.scripture-verse.is-selected {
  outline: 1px solid rgba(32, 217, 154, 0.46);
  outline-offset: -1px;
}

.scripture-verse.has-note::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 7px;
  border-radius: 999px;
  background: var(--mint);
  box-shadow: 0 0 8px rgba(190, 255, 225, 0.44);
  vertical-align: middle;
}

.scripture-reader footer {
  margin-top: 24px;
  padding-top: 12px;
  border-top: 1px solid rgba(42, 211, 153, 0.12);
  text-align: center;
}

.bible-controls {
  grid-row: 6;
  display: grid;
  grid-template-columns: 44px 44px minmax(120px, 220px) 44px;
  justify-content: center;
  align-items: center;
  gap: 7px;
  padding: 8px var(--safe-right) var(--safe-bottom) var(--safe-left);
  border-top: 1px solid rgba(42, 211, 153, 0.14);
  background: rgba(1, 7, 4, 0.88);
}

@media (max-width: 520px) {
  .bible-toolbar {
    grid-template-columns: minmax(0, 1fr) 68px 68px;
    gap: 6px;
  }

  .bible-study-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .bible-highlight-tools {
    width: 100%;
    justify-content: flex-start;
  }

  .bible-range-picker {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .bible-range-picker .panel-save {
    grid-column: 1 / -1;
  }

  .bible-note-row {
    grid-template-columns: 1fr;
  }

  .bible-devotional-grid {
    grid-template-columns: 1fr;
  }
}

.bible-complete {
  min-height: 44px;
  border: 1px solid var(--emerald-deep);
  border-radius: 5px;
  background: rgba(8, 118, 83, 0.34);
  color: var(--mint);
  font-size: 10px;
  cursor: pointer;
}

.bible-complete:disabled {
  opacity: 0.46;
}

.bible-audio.is-active {
  border-color: var(--emerald);
  color: var(--mint);
  box-shadow: 0 0 18px rgba(32, 217, 154, 0.18);
}

.bible-library {
  grid-template-rows: auto auto minmax(0, 1fr) auto;
}

.bible-progress-summary {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 14px var(--safe-right) 10px var(--safe-left);
}

.bible-progress-summary strong {
  color: var(--mint);
  font-size: 22px;
  font-weight: 300;
}

.bible-progress-summary span {
  color: var(--muted);
  font-size: 9px;
}

.bible-book-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  overflow-y: auto;
  padding: 0 var(--safe-right) 12px var(--safe-left);
}

.bible-book-grid button {
  position: relative;
  display: grid;
  align-content: center;
  min-height: 62px;
  padding: 8px;
  overflow: hidden;
  border: 1px solid rgba(42, 211, 153, 0.1);
  background: rgba(2, 10, 6, 0.42);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.bible-book-grid strong {
  position: relative;
  z-index: 1;
  overflow: hidden;
  font-size: 9px;
  font-weight: 400;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bible-book-grid small {
  position: relative;
  z-index: 1;
  margin-top: 4px;
  color: var(--muted);
  font-size: 8px;
}

.bible-book-grid i {
  position: absolute;
  inset: auto 0 0;
  height: var(--book-progress);
  max-height: 100%;
  background: linear-gradient(0deg, rgba(32, 217, 154, 0.28), rgba(32, 217, 154, 0.04));
}

.bible-goal-builder {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, 0.7fr) auto;
  align-items: end;
  gap: 8px;
  padding: 10px var(--safe-right) calc(var(--safe-bottom) + 10px) var(--safe-left);
  border-top: 1px solid rgba(42, 211, 153, 0.14);
  background: rgba(1, 8, 5, 0.94);
}

.bible-goal-builder > div {
  align-self: center;
}

.bible-goal-builder > div strong {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  font-weight: 400;
}

.bible-goal-builder label {
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: 8px;
}

.bible-goal-builder select {
  min-width: 0;
  height: 38px;
  padding: 0 8px;
  border: 1px solid rgba(42, 211, 153, 0.2);
  border-radius: 4px;
  background: #020b07;
  color: var(--ink);
  font: inherit;
  font-size: 9px;
}

.bible-goal-builder .panel-save {
  min-width: 112px;
  min-height: 38px;
  margin: 0;
}

.bible-goal-builder .text-command {
  grid-column: 1 / -1;
  justify-self: start;
  min-height: 26px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--emerald-bright);
  font-size: 8px;
  cursor: pointer;
}

@media (max-width: 620px) {
  .bible-goal-builder {
    grid-template-columns: minmax(0, 1fr) minmax(90px, 0.72fr);
  }

  .bible-goal-builder > div,
  .bible-goal-builder .panel-save,
  .bible-goal-builder .text-command {
    grid-column: 1 / -1;
  }

  .bible-goal-builder .panel-save {
    width: 100%;
  }
}

.settings-scroll {
  width: min(620px, 100%);
  margin: 0 auto;
  overflow-y: auto;
  padding: 18px var(--safe-right) calc(var(--safe-bottom) + 20px) var(--safe-left);
}

.settings-section {
  margin-bottom: 24px;
  border-top: 1px solid rgba(42, 211, 153, 0.16);
}

.settings-kicker {
  margin: 0;
  padding: 12px 2px 6px;
  color: var(--emerald-bright);
  font-size: 9px;
  font-weight: 500;
  text-transform: uppercase;
}

.reminder-times {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 8px 2px 12px;
}

.reminder-times label {
  display: grid;
  gap: 6px;
}

.reminder-times label span {
  color: var(--muted);
  font-size: 9px;
}

.reminder-times input {
  min-width: 0;
  height: 42px;
  border: 1px solid rgba(42, 211, 153, 0.2);
  border-radius: 4px;
  background: #03100a;
  color: var(--ink);
  padding: 0 10px;
  font-size: 11px;
  color-scheme: dark;
}

#reminder-toggle.is-active {
  color: var(--mint);
  box-shadow: inset 2px 0 var(--emerald);
}

.setting-row {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 46px;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 68px;
  padding: 8px 2px;
  border: 0;
  border-bottom: 1px solid rgba(42, 211, 153, 0.1);
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.setting-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(24, 197, 139, 0.24);
  border-radius: 50%;
  color: var(--emerald);
}

.setting-row strong,
.setting-row small,
.account-plaque strong,
.account-plaque small {
  display: block;
}

.setting-row strong,
.account-plaque strong {
  font-size: 12px;
  font-weight: 400;
}

.setting-row small,
.account-plaque small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 300;
  line-height: 1.4;
}

.setting-row > i {
  position: relative;
  width: 44px;
  height: 24px;
  border: 1px solid rgba(42, 211, 153, 0.25);
  border-radius: 12px;
  background: #020705;
  transition: border-color 180ms ease-out, background 180ms ease-out;
}

.setting-row > i b {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--faint);
  transition: transform 180ms ease-out, background 180ms ease-out, box-shadow 180ms ease-out;
}

.setting-row[aria-checked="true"] > i {
  border-color: var(--emerald);
  background: rgba(8, 122, 88, 0.32);
}

.setting-row[aria-checked="true"] > i b {
  background: var(--mint);
  box-shadow: 0 0 9px var(--emerald-glow);
  transform: translateX(20px);
}

.account-plaque {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-height: 70px;
  padding: 10px 2px;
  border-bottom: 1px solid rgba(42, 211, 153, 0.1);
}

.account-initials {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--emerald-bright);
  border-radius: 50%;
  background: rgba(42, 211, 153, 0.08);
  color: var(--mint);
  font-size: 12px;
  font-weight: 400;
}

.settings-command {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 48px;
  padding: 0 2px;
  border: 0;
  border-bottom: 1px solid rgba(42, 211, 153, 0.1);
  background: transparent;
  color: var(--muted);
  font-size: 10px;
  text-align: left;
  cursor: pointer;
}

.settings-command svg {
  color: var(--emerald-bright);
}

.settings-command:disabled {
  opacity: 0.5;
}

.settings-status {
  min-height: 18px;
  margin: 8px 2px 0;
  color: var(--mint);
  font-size: 9px;
  line-height: 1.45;
}

.build-stamp {
  margin: 18px 0 0;
  color: var(--faint);
  font-size: 9px;
  text-align: center;
}

.game-update {
  position: absolute;
  z-index: 95;
  right: var(--safe-right);
  bottom: var(--safe-bottom);
  left: var(--safe-left);
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto 44px;
  align-items: center;
  gap: 8px;
  width: min(520px, calc(100% - var(--safe-left) - var(--safe-right)));
  min-height: 64px;
  margin: 0 auto;
  padding: 8px 6px 8px 12px;
  border: 1px solid rgba(24, 197, 139, 0.5);
  border-radius: 6px;
  background: rgba(2, 10, 6, 0.97);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.58), 0 0 28px rgba(24, 197, 139, 0.16);
}

.game-update > svg {
  color: var(--emerald);
}

.game-update p,
.game-update strong,
.game-update small {
  display: block;
  margin: 0;
}

.game-update strong {
  font-size: 11px;
  font-weight: 400;
}

.game-update small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 9px;
}

.game-update button {
  min-height: 44px;
  border: 0;
  background: transparent;
  color: var(--mint);
  font-size: 10px;
  cursor: pointer;
}

#game-update-reload {
  padding: 0 14px;
  border: 1px solid var(--emerald);
  border-radius: 5px;
  background: rgba(8, 122, 88, 0.34);
}

#game-update-later {
  display: grid;
  place-items: center;
  width: 44px;
  padding: 0;
  color: var(--faint);
}

.nes-message {
  max-width: 86%;
  margin-bottom: 14px;
}

.nes-message.is-user {
  margin-left: auto;
}

.nes-message span {
  display: block;
  margin-bottom: 4px;
  color: var(--emerald-bright);
  font-size: 9px;
  text-transform: uppercase;
}

.nes-message p {
  margin: 0;
  padding: 10px 12px;
  border-left: 1px solid var(--emerald);
  background: rgba(3, 18, 11, 0.5);
  color: var(--ink);
  font-size: 12px;
  font-weight: 300;
  line-height: 1.55;
  white-space: pre-wrap;
}

.nes-message.is-user p {
  border-right: 1px solid var(--emerald-bright);
  border-left: 0;
  background: rgba(42, 211, 153, 0.08);
}

.nes-compose {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 48px;
  gap: 8px;
  width: min(700px, calc(100% - 24px));
  margin: 0 auto;
  padding-top: 16px;
}

.nes-compose label {
  position: absolute;
  top: 0;
  left: 0;
}

.nes-compose textarea {
  min-height: 54px;
  max-height: 120px;
  resize: none;
}

.nes-compose button {
  display: grid;
  place-items: center;
  width: 48px;
  min-height: 54px;
  border: 1px solid var(--emerald);
  border-radius: 5px;
  background: rgba(8, 122, 88, 0.35);
  color: var(--mint);
}

.nes-note {
  width: min(700px, calc(100% - 24px));
  margin: 6px auto var(--safe-bottom);
  color: var(--faint);
  font-size: 9px;
  text-align: center;
}

.welcome-tour {
  position: absolute;
  inset: 0;
  z-index: 80;
  display: grid;
  align-content: center;
  justify-items: center;
  padding: max(24px, var(--safe-top)) 24px max(24px, var(--safe-bottom));
  background:
    radial-gradient(circle at 50% 38%, rgba(24, 197, 139, 0.2), transparent 30%),
    rgba(1, 5, 3, 0.96);
  text-align: center;
}

.welcome-tour::before,
.welcome-tour::after {
  content: "";
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--mint);
  box-shadow: 72px 88px 8px var(--emerald), -84px 120px 10px var(--emerald-bright), 116px -52px 8px var(--emerald), -108px -76px 9px var(--mint), 36px -130px 9px var(--emerald);
  animation: tour-fireflies 5s ease-in-out infinite alternate;
}

.welcome-tour::after {
  transform: rotate(120deg) scale(0.8);
  animation-delay: -2.5s;
}

.tour-visual {
  display: grid;
  place-items: center;
  width: 110px;
  height: 110px;
  margin-bottom: 22px;
  border: 1px solid rgba(42, 211, 153, 0.48);
  border-radius: 50%;
  color: var(--mint);
  box-shadow: 0 0 50px rgba(24, 197, 139, 0.18), inset 0 0 24px rgba(42, 211, 153, 0.08);
}

.welcome-tour h2 {
  max-width: 360px;
  margin: 0;
  font-size: 25px;
  font-weight: 300;
  line-height: 1.15;
}

.welcome-tour > p:not(.eyebrow) {
  max-width: 390px;
  margin: 12px 0 24px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 300;
  line-height: 1.55;
}

.tour-actions {
  display: grid;
  grid-template-columns: 82px minmax(150px, 190px);
  gap: 10px;
}

.tour-actions > button:first-child {
  min-height: 48px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 10px;
}

.tour-actions .primary-command {
  width: auto;
  min-width: 0;
}

.moji-cameo {
  position: absolute;
  z-index: 64;
  right: var(--safe-right);
  bottom: calc(var(--safe-bottom) + 12px);
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr) 32px;
  align-items: center;
  width: min(390px, calc(100% - 28px));
  min-height: 108px;
  padding: 7px;
  border: 1px solid rgba(42, 211, 153, 0.32);
  border-radius: 6px;
  background: rgba(2, 9, 6, 0.95);
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.55), 0 0 24px rgba(24, 197, 139, 0.12);
  animation: moji-arrive 520ms ease-out both;
}

.moji-character {
  height: 96px;
  overflow: hidden;
}

.moji-character svg {
  width: 100%;
  height: 112px;
  transform: translateY(-6px);
}

.moji-character .moji-firefly {
  filter: drop-shadow(0 0 6px currentColor);
  animation: moji-firefly 3.8s ease-in-out infinite;
}

.moji-character .moji-firefly.f2 { animation-delay: 0.8s; }
.moji-character .moji-firefly.f3 { animation-delay: 1.4s; }
.moji-character .moji-firefly.f4 { animation-delay: 2.1s; }

.moji-character .bm-action-wave .moji-wave-arm {
  animation: moji-wave-arm 1.15s ease-in-out infinite;
  transform-origin: 62px 158px;
}

.moji-character .bm-action-sip .moji-sip-arm,
.moji-character .bm-action-sip .moji-tea-cup {
  animation: moji-sip-prop 2.4s ease-in-out infinite;
  transform-origin: 122px 130px;
}

.moji-character .bm-action-read .moji-book-prop {
  animation: moji-book-bob 3.2s ease-in-out infinite;
  transform-origin: 100px 202px;
}

.moji-character .bm-action-pray .moji-pray-hands {
  animation: moji-prayer-bow 4.2s ease-in-out infinite;
  transform-origin: 100px 170px;
}

.moji-character .bm-action-banner .moji-legs {
  animation: moji-walk-legs 0.72s ease-in-out infinite;
  transform-origin: 100px 225px;
}

.moji-character .bm-action-banner .moji-body-shape {
  animation: moji-walk-body 0.72s ease-in-out infinite;
  transform-origin: 100px 170px;
}

.moji-character .bm-action-banner .moji-banner-ribbon {
  animation: moji-banner-float 2.8s ease-in-out infinite;
  transform-origin: 100px 206px;
}

.moji-cameo[data-action="banner"] {
  width: min(440px, calc(100% - 28px));
}

.moji-cameo[data-action="banner"] blockquote {
  padding: 10px 12px;
  border: 1px solid rgba(42, 211, 153, 0.3);
  background: rgba(42, 211, 153, 0.05);
  box-shadow: inset 0 0 18px rgba(24, 197, 139, 0.05);
}

.moji-cameo blockquote {
  margin: 0;
  color: var(--mint);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 14px;
  font-style: italic;
  line-height: 1.35;
}

.moji-cameo > button {
  align-self: start;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
  color: var(--faint);
}

@keyframes touch-halo {
  0%, 58%, 100% { opacity: 0; transform: scale(0.9); }
  68% { opacity: 0.75; }
  82% { opacity: 0; transform: scale(1.18); }
}

@keyframes object-halo {
  0%, 100% { opacity: 0.55; transform: translateX(-50%) scale(0.94); }
  50% { opacity: 1; transform: translateX(-50%) scale(1.06); }
}

@keyframes lantern-breathe {
  0%, 58%, 100% { box-shadow: 0 0 20px rgba(24, 197, 139, 0.1); transform: scale(0.97); }
  72% { box-shadow: 0 0 48px rgba(24, 197, 139, 0.28), 0 0 14px rgba(42, 211, 153, 0.18); transform: scale(1.04); }
}

@keyframes auth-shake {
  0%, 100% { transform: translate(-50%, -50%); }
  30% { transform: translate(calc(-50% - 5px), -50%); }
  65% { transform: translate(calc(-50% + 5px), -50%); }
}

@keyframes auth-fireflies {
  to { margin-top: -30px; transform: translateX(18px); }
}

@keyframes achievement-border {
  0%, 100% { border-color: rgba(42, 211, 153, 0.22); box-shadow: inset 0 0 28px rgba(24, 197, 139, 0.04), 0 0 18px rgba(42, 211, 153, 0.06); }
  50% { border-color: rgba(24, 197, 139, 0.58); box-shadow: inset 0 0 40px rgba(24, 197, 139, 0.1), 0 0 34px rgba(24, 197, 139, 0.14); }
}

@keyframes room-heading-in {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes object-left {
  from { opacity: 0; transform: translateX(14px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes object-right {
  from { opacity: 0; transform: translateX(-14px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes overlay-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes spin { to { transform: rotate(360deg); } }

@keyframes page-forward {
  0% { transform: rotateY(0); }
  48% { opacity: 0.5; }
  100% { transform: rotateY(-8deg); opacity: 1; }
}

@keyframes page-back {
  0% { transform: rotateY(0); }
  48% { opacity: 0.5; }
  100% { transform: rotateY(8deg); opacity: 1; }
}

@keyframes tour-fireflies {
  to { transform: translate(18px, -24px) rotate(22deg); }
}

@keyframes moji-arrive {
  from { opacity: 0; transform: translateX(30px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes moji-firefly {
  0%, 100% { opacity: 0.25; transform: translateY(0); }
  45% { opacity: 1; transform: translateY(-6px); }
}

@keyframes moji-wave-arm {
  0%, 100% { transform: rotate(-8deg); }
  50% { transform: rotate(12deg); }
}

@keyframes moji-sip-prop {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  42%, 58% { transform: translate(-6px, -13px) rotate(-7deg); }
}

@keyframes moji-book-bob {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-2px) rotate(1deg); }
}

@keyframes moji-prayer-bow {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(4px); }
}

@keyframes moji-walk-legs {
  0%, 100% { transform: skewX(-3deg); }
  50% { transform: skewX(4deg); }
}

@keyframes moji-walk-body {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}

@keyframes moji-banner-float {
  0%, 100% { transform: translateY(0) rotate(-0.5deg); }
  50% { transform: translateY(-3px) rotate(0.7deg); }
}

@media (max-width: 430px) {
  .hud {
    gap: 4px;
  }

  .hud-brand {
    font-size: 10px;
  }

  .hud-actions {
    gap: 2px;
  }

  .hud-actions .icon-button {
    width: 44px;
  }

  .hud-progress {
    min-width: 48px;
    gap: 5px;
  }

  .room-heading {
    top: calc(var(--safe-top) + 56px);
  }

  .book-tools {
    grid-template-columns: 1fr;
  }

  .book-tools .sticker-palette,
  .book-tools .panel-save {
    grid-column: 1;
  }

  .open-book {
    height: min(65vh, 500px);
  }

  .directory-foot button {
    justify-content: center !important;
    font-size: 0;
  }

  .directory-foot button svg {
    width: 20px;
    height: 20px;
  }
}

@media (min-width: 760px) {
  .directory {
    right: auto;
    width: min(430px, 42vw);
    border-right: 1px solid rgba(42, 211, 153, 0.2);
    box-shadow: 24px 0 60px rgba(0, 0, 0, 0.5);
  }

  .feature-panel {
    left: auto;
    width: min(540px, 48vw);
    border-left: 1px solid rgba(42, 211, 153, 0.2);
    box-shadow: -24px 0 60px rgba(0, 0, 0, 0.5);
  }

  .feature-stage {
    bottom: calc(var(--safe-bottom) + 30px);
  }

  .book-tools {
    right: 50%;
    left: auto;
    width: min(560px, calc(100% - 40px));
    transform: translateX(50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .lantern-button::after,
  .floating-nes-button::after,
  #signs-button.has-signs::after,
  .feature-aura,
  .lantern-core {
    animation: none !important;
  }
}

.game[data-quiet-motion="true"]::before,
.game[data-quiet-motion="true"] .lantern-button::after,
.game[data-quiet-motion="true"] .floating-nes-button::after,
.game[data-quiet-motion="true"] #signs-button.has-signs::after,
.game[data-quiet-motion="true"] .feature-aura,
.game[data-quiet-motion="true"] .lantern-core,
.game[data-quiet-motion="true"] .welcome-tour::before,
.game[data-quiet-motion="true"] .welcome-tour::after {
  animation: none !important;
}

.game[data-quiet-motion="true"] .moji-character * {
  animation: none !important;
}

.game[data-quiet-motion="true"] .achievement-reveal::before,
.game[data-quiet-motion="true"] .achievement-fireflies,
.game[data-quiet-motion="true"] .achievement-fireflies::before,
.game[data-quiet-motion="true"] .achievement-fireflies::after {
  animation: none !important;
}

@media (max-height: 650px) {
  .auth-world {
    align-content: start;
    padding-top: 18px;
    padding-bottom: 16px;
  }

  .auth-mark {
    width: 44px;
    height: 44px;
    margin-bottom: 10px;
  }

  .auth-reflection {
    margin-bottom: 12px;
  }
}