/* Hening — calm, readable, mobile-first. */

:root {
  --bg: #f6f2eb;
  --surface: #ffffff;
  --surface-2: #f0ebe2;
  --line: #e6dfd3;
  --text: #26221d;
  --muted: #7b7166;
  --accent: #b8862b;
  --ok: #3f8f5a;
  --warn: #c98a2b;
  --danger: #c4513f;
  --radius: 20px;
  --shadow: 0 1px 2px rgba(60, 45, 25, 0.04), 0 8px 24px rgba(60, 45, 25, 0.07);
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Noto Sans SC", sans-serif;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Noto Serif", Georgia, serif;
  --tabbar-h: 66px;
  font-size: 16px;
  color-scheme: light;
}

:root[data-theme="dark"] {
  --bg: #12110f;
  --surface: #1c1a17;
  --surface-2: #26231f;
  --line: #312d28;
  --text: #efe9e0;
  --muted: #a69b8d;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 10px 30px rgba(0, 0, 0, 0.35);
  color-scheme: dark;
}

:root.large-text { font-size: 19px; }

:root.reduce-motion *,
:root.reduce-motion *::before,
:root.reduce-motion *::after {
  animation: none !important;
  transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

* { box-sizing: border-box; }

html, body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font); line-height: 1.6; }

body { padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); }
body.no-tabs { padding-bottom: 0; }

body[data-faith="khonghucu"] { --accent: #d4423a; }
body[data-faith="buddha"] { --accent: #e0902c; }
body[data-faith="hindu"] { --accent: #e3b341; }
body[data-faith="islam"] { --accent: #3fa36b; }
body[data-faith="protestan"] { --accent: #6c8fe0; }
body[data-faith="katolik"] { --accent: #9b7fd1; }
body[data-faith="alam"] { --accent: #6aa36f; }

a { color: var(--accent); }
a:hover { text-decoration-thickness: 2px; }

.skip-link { position: absolute; left: -999px; top: 0; background: var(--accent); color: #000; padding: 8px 12px; z-index: 100; }
.skip-link:focus { left: 8px; }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px; background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(8px); border-bottom: 1px solid var(--line);
}
.brand { font-family: var(--serif); font-size: 1.3rem; color: var(--text); text-decoration: none; letter-spacing: 0.04em; }
.top-link { color: var(--text); text-decoration: none; font-size: 1.4rem; padding: 0 6px; }

.main { outline: none; min-height: 70vh; }

.tabbar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 30;
  display: flex; justify-content: space-around;
  height: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--surface); border-top: 1px solid var(--line);
}
.tabbar:empty { display: none; }
.tabbar a {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: var(--muted); text-decoration: none; font-size: 0.75rem; gap: 2px;
}
.tabbar a.active { color: var(--accent); }
.tab-icon { font-size: 1.25rem; line-height: 1; }

.boot { display: grid; place-items: center; min-height: 70vh; color: var(--muted); }
.boot-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--accent); animation: breathe 3s ease-in-out infinite; }

.stack { display: flex; flex-direction: column; gap: 14px; padding: 18px 16px 28px; max-width: 1080px; margin: 0 auto; }
.narrow { max-width: 720px; }
.row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

h1, h2, h3, h4 { line-height: 1.25; margin: 0; font-weight: 600; }
.h2 { font-size: 1.6rem; font-family: var(--serif); }
.h3 { font-size: 1.15rem; }
.h4 { font-size: 1rem; }
p { margin: 0; }
.lead { font-size: 1.1rem; }
.muted { color: var(--muted); }
.small { font-size: 0.875rem; }
.pre { white-space: pre-wrap; }
.crumbs { font-size: 0.85rem; color: var(--muted); }
.crumbs a { color: var(--muted); }

.prose p + p { margin-top: 0.4em; }
.prose ul, .prose ol { margin: 0; padding-left: 1.3em; }
.prose li + li { margin-top: 0.3em; }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.mini-card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; }

.btn, .btn-ghost, .chip {
  font: inherit; cursor: pointer; border-radius: 999px; text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 44px; padding: 8px 18px;
}
.btn { background: var(--accent); color: #1a120a; border: none; font-weight: 600; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-big { font-size: 1.1rem; padding: 14px 28px; min-height: 54px; }
.btn-ghost { background: transparent; color: var(--text); border: 1px solid var(--line); }
.btn-ghost:hover { border-color: var(--accent); }
.btn-ghost:disabled { opacity: 0.45; }
.btn-ghost.danger, .danger { color: var(--danger); }
.btn-ghost.small, .chip { min-height: 36px; padding: 4px 14px; font-size: 0.875rem; }
.chip { background: var(--surface-2); color: var(--text); border: 1px solid var(--line); }
.chip.active { border-color: var(--accent); color: var(--accent); }
.file-label { position: relative; }

.badge { display: inline-block; font-size: 0.72rem; padding: 1px 8px; border-radius: 999px; background: #5a4520; color: #ffd98a; vertical-align: middle; }
.badge-ok { background: #1f4a2a; color: #a8e6b0; }
.badge-dim { background: var(--surface-2); color: var(--muted); }

.draft-banner, .notice { border: 1px dashed var(--warn); background: color-mix(in srgb, var(--warn) 10%, transparent); padding: 10px 12px; border-radius: 10px; font-size: 0.9rem; }
.note { border-left: 3px solid var(--accent); padding-left: 10px; }

.field { display: flex; flex-direction: column; gap: 4px; font-size: 0.9rem; }
.field.inline { flex-direction: row; align-items: center; gap: 8px; }
input, textarea, select {
  font: inherit; color: var(--text); background: var(--surface-2);
  border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; min-height: 44px;
}
textarea { resize: vertical; }
.toggle { display: flex; align-items: center; gap: 10px; min-height: 40px; }
.toggle input { width: 20px; height: 20px; min-height: 0; }

/* Landing */
.landing { display: grid; min-height: calc(100vh - 56px); }
.landing-scene { grid-area: 1 / 1; }
.landing-scene .scene { width: 100%; height: 100%; display: block; min-height: calc(100vh - 56px); }
.landing-text {
  grid-area: 1 / 1; align-self: end; padding: 28px 20px 48px; max-width: 640px; margin: 0 auto;
  display: flex; flex-direction: column; gap: 14px; text-align: center; align-items: center;
  background: linear-gradient(transparent, color-mix(in srgb, var(--bg) 80%, transparent) 30%);
}
.landing-text h1 { font-family: var(--serif); font-size: 3rem; letter-spacing: 0.08em; }

/* Home */
.hero-scene { display: block; position: relative; height: 38vh; min-height: 220px; overflow: hidden; }
.hero-scene .scene { width: 100%; height: 100%; display: block; }
.hero-cta { position: absolute; bottom: 14px; right: 16px; background: rgba(0,0,0,0.55); color: #fff; padding: 8px 14px; border-radius: 999px; font-weight: 600; }
.today-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px; }
.quick-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.quick { display: flex; flex-direction: column; gap: 2px; padding: 14px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); color: var(--text); text-decoration: none; }
.quick span { color: var(--muted); font-size: 0.85rem; }
.quick:hover { border-color: var(--accent); }
.holy-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.holy-list li { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }

/* Choose */
.step-label { color: var(--accent); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.08em; }
.faith-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.faith-card {
  font: inherit; color: var(--text); text-decoration: none; cursor: pointer; text-align: left;
  display: flex; flex-direction: column; gap: 4px; padding: 14px; min-height: 120px;
  background: var(--surface); border: 1px solid var(--line); border-top: 4px solid var(--accent); border-radius: var(--radius);
}
.faith-card.selected, .faith-card:hover { border-color: var(--accent); }
.faith-icon { font-size: 1.8rem; }
.check-list { display: flex; flex-direction: column; gap: 8px; }
.check-card { display: flex; gap: 12px; align-items: flex-start; padding: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; cursor: pointer; }
.check-card input { width: 20px; height: 20px; min-height: 0; margin-top: 3px; }

/* Spaces */
.space-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.space-card { position: relative; display: block; border-radius: var(--radius); overflow: hidden; aspect-ratio: 5 / 3; border: 1px solid var(--line); }
.space-card .scene { width: 100%; height: 100%; display: block; }
.space-card-label { position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 12px; display: flex; flex-direction: column; background: linear-gradient(transparent, rgba(0,0,0,0.75)); color: #fff; }
.space-hero { position: relative; height: 46vh; min-height: 260px; overflow: hidden; }
.space-hero .scene { width: 100%; height: 100%; display: block; }
.space-hero-text { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 16px; color: #fff; background: linear-gradient(transparent, rgba(0,0,0,0.7)); max-width: 1080px; margin: 0 auto; }
.space-hero-text h1 { font-family: var(--serif); font-size: 2.2rem; }
.ritual-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; align-items: start; }
.ritual header { display: flex; flex-direction: column; gap: 2px; }
.ritual-body { display: flex; flex-direction: column; gap: 10px; }
.ritual-svg { width: 100%; max-height: 200px; }
.ritual-status { min-height: 1.4em; font-size: 0.92rem; color: var(--muted); }
.about summary, .mine summary { cursor: pointer; color: var(--accent); font-size: 0.9rem; }
.observe-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 8px 10px; border-radius: 10px; background: var(--surface-2); }
.visit-tips ul { margin: 0; padding-left: 1.2em; }

/* Scene animation */
.twinkle { animation: twinkle 4s ease-in-out infinite; }
.flicker { animation: flicker 1.6s ease-in-out infinite; }
.sway { animation: sway 5s ease-in-out infinite; transform-origin: top center; transform-box: fill-box; }
.mist { animation: mist 12s ease-in-out infinite; }

/* Incense */
.incense-stage .stick { transition: transform 1.2s ease; transform: translateY(-30px); }
.incense-stage.placed .stick { transform: translateY(6px); }
.incense-stage .smoke { opacity: 0; }
.incense-stage.lit .tip { fill: #ff6a2a; filter: drop-shadow(0 0 3px #ff8a3d); }
.incense-stage.lit .smoke { opacity: 0.6; animation: smoke 3.5s ease-in-out infinite; animation-delay: calc(var(--i) * 0.4s); }

/* Candle */
.candle-svg { max-height: 170px; }
.candle-stage .flame { opacity: 0; transition: opacity 0.8s; transform-origin: 60px 56px; }
.candle-stage.lit .flame { opacity: 1; animation: flame 1.8s ease-in-out infinite; }
.mine-list ul.plain { list-style: none; padding: 0; margin: 6px 0; }

/* Counter */
.counter { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.counter-visual { position: relative; width: 220px; height: 220px; }
.counter-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.counter-ring .track { fill: none; stroke: var(--surface-2); stroke-width: 6; }
.counter-ring .progress { fill: none; stroke: var(--accent); stroke-width: 6; stroke-linecap: round; transition: stroke-dashoffset 0.3s; }
.counter-center { position: absolute; inset: 22px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.counter-script { font-size: 1.4rem; font-family: "Amiri", "Scheherazade New", "Noto Naskh Arabic", serif; }
.counter-num { font-size: 2.6rem; font-weight: 700; line-height: 1.1; }
.counter-context { max-width: 170px; line-height: 1.3; }
.bow-figure { position: absolute; inset: 40px; width: calc(100% - 80px); height: calc(100% - 80px); color: var(--muted); opacity: 0.25; }
.bow-figure .bower { transform-origin: 60px 100px; transform-box: view-box; }
.bow-figure.bowing .bower { animation: bow 0.9s ease; }

/* Poe & ciam si */
.poe-pair { display: flex; gap: 12px; justify-content: center; }
.poe-block { width: 70px; height: 48px; }
.poe-pair.tossed .poe-block { animation: toss 0.7s ease; }
.ciamsi-stage .cylinder { transform-origin: 100px 140px; transform-box: view-box; }
.ciamsi-stage.shaking .cylinder { animation: shake 0.25s ease-in-out infinite; }
.ciamsi-stage .fallen { opacity: 0; transition: opacity 0.6s; }
.ciamsi-stage.dropped .fallen { opacity: 1; }
.poem { margin: 0; padding: 10px 14px; border-left: 3px solid var(--accent); background: var(--surface-2); border-radius: 8px; }

/* Burning */
.burn-stage .fire { transform-origin: 110px 128px; transform-box: view-box; transform: scale(0.3); opacity: 0.4; transition: transform 1s, opacity 1s; }
.burn-stage .smoke { opacity: 0; }
.burn-stage.burning .fire { animation: fire 4.2s ease forwards; }
.burn-stage.burning .papers { animation: papers 1.6s ease forwards; }
.burn-stage.burning .smoke { animation: smoke 3s ease-in-out 3; }

/* Ancestor tablets */
.ancestor-form input { flex: 1 1 150px; }
.tablets { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.tablet { background: linear-gradient(#5b1a14, #3a100c); color: #f6e3b4; border: 2px solid #b8902a; border-radius: 10px 10px 4px 4px; padding: 12px; display: flex; flex-direction: column; gap: 6px; align-items: center; text-align: center; }
.tablet-name { font-family: var(--serif); font-size: 1.2rem; writing-mode: horizontal-tb; }
.tablet .muted { color: #e2c98f; }
.tablet-offered { min-height: 1.6em; font-size: 1.2rem; }

/* Canang */
.canang-stage .slot { cursor: pointer; }
.canang-stage .smoke { opacity: 0; }
.canang-stage.offered .smoke { opacity: 0.7; animation: smoke 3s ease-in-out infinite; }
.swatch { width: 14px; height: 14px; border-radius: 50%; display: inline-block; border: 1px solid rgba(0,0,0,0.3); }

/* Timer, times, breath */
.timer { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.timer-display { font-size: 2.8rem; font-variant-numeric: tabular-nums; font-weight: 300; letter-spacing: 0.05em; }
.times { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.times li { display: flex; justify-content: space-between; padding: 8px 10px; border-radius: 8px; }
.times li.next { background: color-mix(in srgb, var(--accent) 18%, transparent); font-weight: 600; }
.breath { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 10px; }
.breath-circle { width: 90px; height: 90px; border-radius: 50%; background: radial-gradient(var(--accent), transparent 70%); transition-property: transform; transition-timing-function: ease-in-out; }
.breath-circle.in, .breath-circle.hold { transform: scale(1.7); }
.breath-circle.out { transform: scale(1); }
.breath-label { font-size: 1.1rem; }

/* Pustaka */
.search-form { display: flex; gap: 8px; }
.search-form input { flex: 1; }
.section-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.section-card, .entry-card {
  display: flex; flex-direction: column; gap: 4px; padding: 14px; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--line); color: var(--text); text-decoration: none;
}
.section-card:hover, .entry-card:hover { border-color: var(--accent); }
.section-icon { font-size: 1.4rem; }
.list { display: flex; flex-direction: column; gap: 8px; }
.entry-meta { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.entry .steps { padding-left: 1.4em; }
.entry .steps li, .planner .steps li { margin-bottom: 8px; }
.why { display: block; color: var(--muted); font-size: 0.9rem; }
.checklist li::marker { content: "☐  "; }
.variations { display: flex; flex-direction: column; gap: 8px; }
.variation { padding: 10px 12px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); }
.variation.mine { border-color: var(--accent); }
.sources { font-size: 0.9rem; color: var(--muted); }
.meta { border-top: 1px solid var(--line); padding-top: 10px; }

/* Tanya */
.chat { display: flex; flex-direction: column; gap: 10px; min-height: 120px; }
.bubble { padding: 10px 14px; border-radius: 14px; max-width: 92%; display: flex; flex-direction: column; gap: 6px; }
.bubble.user { align-self: flex-end; background: color-mix(in srgb, var(--accent) 25%, var(--surface)); }
.bubble.bot { align-self: flex-start; background: var(--surface); border: 1px solid var(--line); }
.bubble ol, .bubble ul { margin: 0; padding-left: 1.2em; }
.chat-form { display: flex; gap: 8px; }
.chat-form input { flex: 1; }

/* Tools */
.check-items { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.check-items label { display: flex; gap: 10px; align-items: flex-start; padding: 6px 0; }
.check-items input { width: 20px; height: 20px; min-height: 0; margin-top: 3px; }
.place-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.place { border-top: 4px solid var(--accent); }
.donation { background: var(--surface-2); padding: 10px; border-radius: 10px; }
.support-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.support-card { display: flex; flex-direction: column; padding: 14px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); color: var(--text); text-decoration: none; }
.support-card.disabled { opacity: 0.55; }
.menu-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.menu-list a { display: flex; flex-direction: column; padding: 12px 14px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); color: var(--text); text-decoration: none; }
.archive-list { display: flex; flex-direction: column; gap: 10px; }
.archive-list audio, .rec-preview { width: 100%; }

.toast {
  position: fixed; left: 50%; bottom: calc(var(--tabbar-h) + 16px); transform: translateX(-50%) translateY(20px);
  background: var(--surface-2); color: var(--text); border: 1px solid var(--line); padding: 10px 16px; border-radius: 999px;
  opacity: 0; pointer-events: none; transition: opacity 0.3s, transform 0.3s; z-index: 50;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }


/* Jeda brand + pause */
.brand { display: inline-flex; align-items: center; gap: 8px; }
.brand-mark { color: var(--accent); font-weight: 700; letter-spacing: -0.1em; }
.top-actions { display: inline-flex; align-items: center; gap: 6px; }
.pause-button {
  font: inherit; font-size: 0.85rem; cursor: pointer; color: var(--text);
  background: transparent; border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; min-height: 36px;
}
.pause-button:hover { border-color: var(--accent); color: var(--accent); }
.row.center { justify-content: center; }
.pause-card {
  font: inherit; color: var(--text); cursor: pointer; text-align: left;
  display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: var(--radius);
  background: linear-gradient(120deg, color-mix(in srgb, var(--accent) 22%, var(--surface)), var(--surface));
  border: 1px solid var(--line);
}
.pause-card-icon { font-size: 1.6rem; color: var(--accent); font-weight: 700; letter-spacing: -0.1em; }
.pause-overlay {
  position: fixed; inset: 0; z-index: 100; display: grid; place-items: center;
  background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(10px);
  animation: fadein 0.4s ease;
}
.pause-overlay.closing { opacity: 0; transition: opacity 0.3s; }
.pause-inner { display: flex; flex-direction: column; align-items: center; gap: 22px; padding: 24px; text-align: center; }
.pause-title { font-family: var(--serif); font-size: 1.4rem; }
.pause-circle { width: 120px; height: 120px; }
.pause-label { font-size: 1.2rem; min-height: 1.6em; }
.pause-progress { width: 220px; height: 4px; border-radius: 4px; background: var(--surface-2); overflow: hidden; }
.pause-progress span { display: block; height: 100%; width: 0; background: var(--accent); transition: width 0.25s linear; }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }

/* Guest presence */
.guest-figure { position: absolute; left: 84%; bottom: 7%; width: 34px; height: 34px; transform: translateX(-50%); opacity: 0.85; animation: breathe-figure 6s ease-in-out infinite; }
.guest-name { opacity: 0.9; }
@keyframes breathe-figure { 0%, 100% { transform: translateX(-50%) scale(1); } 50% { transform: translateX(-50%) scale(1.04); } }

/* Festive */
.festive-banner { padding: 10px 14px; border-radius: 12px; background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 35%, var(--surface)), var(--surface)); font-weight: 600; }

/* Glossary & friends */
.glossary-list { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.glossary-item { padding: 10px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; }
.glossary-item dt { font-weight: 600; }
.glossary-item dd { margin: 4px 0 0; color: var(--muted); }
.glossary-letter { margin-top: 8px; color: var(--accent); }
.friend-card { border-left: 4px solid var(--accent); }

/* Keyframes */
@keyframes breathe { 0%, 100% { transform: scale(1); opacity: 0.6; } 50% { transform: scale(1.8); opacity: 1; } }
@keyframes twinkle { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } }
@keyframes flicker { 0%, 100% { opacity: 0.9; } 40% { opacity: 0.6; } 60% { opacity: 1; } }
@keyframes sway { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
@keyframes mist { 0%, 100% { transform: translateX(-10px); } 50% { transform: translateX(10px); } }
@keyframes smoke { 0% { transform: translateY(0) scaleX(1); opacity: 0.6; } 100% { transform: translateY(-14px) scaleX(1.4); opacity: 0; } }
@keyframes flame { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(0.94, 1.06); } }
@keyframes bow { 0% { transform: rotate(0); } 45% { transform: rotate(60deg) translateY(10px); } 100% { transform: rotate(0); } }
@keyframes toss { 0% { transform: translateY(-40px) rotate(0); } 60% { transform: translateY(4px) rotate(540deg); } 100% { transform: translateY(0) rotate(720deg); } }
@keyframes shake { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(8deg); } }
@keyframes fire { 0% { transform: scale(0.3); opacity: 0.4; } 30% { transform: scale(1.4); opacity: 1; } 80% { transform: scale(1.1); opacity: 1; } 100% { transform: scale(0.35); opacity: 0.5; } }
@keyframes papers { 0% { transform: translate(0, 0); opacity: 1; } 100% { transform: translate(78px, 70px) scale(0.4); opacity: 0; } }

@media (min-width: 800px) {
  .tabbar { left: 50%; transform: translateX(-50%); max-width: 560px; border-radius: 18px 18px 0 0; border: 1px solid var(--line); }
}

@media print {
  .topbar, .tabbar, .no-print, .toast { display: none !important; }
  body { background: #fff; color: #000; padding: 0; }
  .card, .variation { border-color: #999; }
  a { color: #000; }
}

/* v0.6: gratitude journal and greeting cards */
.journal-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.journal-text { margin: 0; white-space: pre-wrap; line-height: 1.6; }
.card-canvas { width: 100%; max-width: 420px; aspect-ratio: 4 / 5; border-radius: var(--radius); border: 1px solid var(--line); align-self: center; background: var(--surface); }
textarea, select { width: 100%; }

/* v1.1: registries */
.table-wrap { overflow-x: auto; }
.table-wrap table { width: 100%; border-collapse: collapse; }
.table-wrap th, .table-wrap td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
select { min-height: 40px; }


/* ================================================================
   Jeda v2 design: calm paper, soft cards, serif titles, 3D stage
   ================================================================ */

html, body { -webkit-font-smoothing: antialiased; }
h1, .h2 { font-family: var(--serif); font-weight: 600; letter-spacing: -0.01em; }
.h2 { font-size: 1.75rem; }
.h3 { font-size: 1.08rem; font-weight: 650; }
.eyebrow { display: block; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.eyebrow.pad { padding: 0 2px 8px; }
.muted { color: var(--muted); }
a { color: color-mix(in srgb, var(--accent) 80%, var(--text)); text-underline-offset: 3px; }

.card, .soft-card, .section-card, .entry-card, .quick, .variation, .mini-card, .check-card, .faith-card {
  border: none; box-shadow: var(--shadow); border-radius: var(--radius);
}
.card { padding: 18px; }
.card.soft, .soft-card { background: var(--surface); border-radius: var(--radius); padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; box-shadow: var(--shadow); }
.btn { background: var(--text); color: var(--bg); font-weight: 600; letter-spacing: 0.01em; box-shadow: 0 6px 18px rgba(40, 30, 15, 0.16); transition: transform 0.15s ease, box-shadow 0.15s ease; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(0.98); }
.btn-ghost { background: var(--surface); border: 1px solid var(--line); }
.chip { background: var(--surface); border: 1px solid var(--line); }
.chip.active { background: var(--text); color: var(--bg); border-color: var(--text); }
input, textarea, select { background: var(--surface); border-color: var(--line); border-radius: 14px; }
.draft-banner { border: none; background: color-mix(in srgb, var(--warn) 12%, var(--surface)); border-radius: 14px; }
.notice { border: none; background: var(--surface-2); border-radius: 14px; }
.badge { background: color-mix(in srgb, var(--warn) 22%, var(--surface)); color: color-mix(in srgb, var(--warn) 70%, var(--text)); }
.badge-ok { background: color-mix(in srgb, var(--ok) 18%, var(--surface)); color: var(--ok); }
.holy-list li, .clean-list li { border-bottom: 1px solid var(--line); }
.clean-list { list-style: none; margin: 0; padding: 0; }
.clean-list li { display: flex; justify-content: space-between; gap: 10px; padding: 9px 0; flex-wrap: wrap; }
.clean-list li:last-child, .holy-list li:last-child { border-bottom: none; }
.stack { gap: 16px; padding: 20px 18px 32px; }
.section-title { margin-top: 8px; }

/* Top bar & floating tab bar */
.topbar { background: color-mix(in srgb, var(--bg) 82%, transparent); border-bottom: none; padding: 12px 18px; }
.brand { font-size: 1.35rem; letter-spacing: 0.02em; }
.tabbar {
  left: 50%; right: auto; transform: translateX(-50%); bottom: calc(10px + env(safe-area-inset-bottom));
  width: min(440px, calc(100% - 24px)); height: 60px; padding: 0 6px;
  background: color-mix(in srgb, var(--surface) 86%, transparent); backdrop-filter: blur(16px);
  border: 1px solid var(--line); border-radius: 22px; box-shadow: 0 10px 30px rgba(40, 30, 15, 0.16);
}
.tabbar a { font-size: 0.7rem; border-radius: 16px; margin: 6px 0; }
.tabbar a.active { color: var(--text); background: var(--surface-2); font-weight: 650; }
body { padding-bottom: calc(var(--tabbar-h) + 22px + env(safe-area-inset-bottom)); }

/* ---------------- Onboarding deck ---------------- */
body.onboarding-mode .topbar, body.onboarding-mode .tabbar { display: none; }
body.onboarding-mode { padding-bottom: 0; }
.ob { position: relative; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; overflow: hidden; padding: 18px 18px 28px; }
.ob-glow {
  position: absolute; inset: -30% -20% auto; height: 70%; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 28%, transparent), transparent);
  filter: blur(10px); transition: background 0.6s ease;
}
.ob-head { position: relative; display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; min-height: 44px; }
.ob-back { width: 44px; height: 44px; border-radius: 50%; border: none; background: var(--surface); box-shadow: var(--shadow); font-size: 1.1rem; color: var(--text); cursor: pointer; }
.ob-dots { display: flex; gap: 6px; justify-content: center; }
.ob-dots span { width: 18px; height: 4px; border-radius: 4px; background: var(--line); transition: background 0.3s, width 0.3s; }
.ob-dots span.on { background: var(--text); width: 26px; }
.ob-deck { position: relative; flex: 1; display: grid; place-items: center; padding: 18px 0; }
.ob-card {
  grid-area: 1 / 1; width: min(420px, 100%); min-height: 460px; padding: 30px 24px 26px;
  background: var(--surface); border-radius: 30px; box-shadow: 0 2px 4px rgba(40, 30, 15, 0.05), 0 24px 60px rgba(40, 30, 15, 0.14);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; text-align: center; touch-action: pan-y;
}
.ob-card-ghost { display: none !important; }
.ob-deck::before {
  content: ""; grid-area: 1 / 1; width: min(420px, 100%); min-height: 440px; position: relative; z-index: 0;
  background: var(--surface); border-radius: 30px; box-shadow: var(--shadow); pointer-events: none;
  transform: translateY(14px) scale(0.94) rotate(-2deg); opacity: 0.55;
}
/* The real card must stay above the decorative ghost (transform/opacity lift the ghost into a higher paint layer, which swallowed taps). */
.ob-card[data-step] { position: relative; z-index: 1; }
.ob-card.enter-right { animation: obInRight 0.38s cubic-bezier(.2,.8,.2,1); }
.ob-card.enter-left { animation: obInLeft 0.38s cubic-bezier(.2,.8,.2,1); }
.ob-card.leave-left { animation: obOutLeft 0.22s ease forwards; }
.ob-card.leave-right { animation: obOutRight 0.22s ease forwards; }
@keyframes obInRight { from { opacity: 0; transform: translateX(40px) rotate(3deg) scale(0.97); } to { opacity: 1; transform: none; } }
@keyframes obInLeft { from { opacity: 0; transform: translateX(-40px) rotate(-3deg) scale(0.97); } to { opacity: 1; transform: none; } }
@keyframes obOutLeft { to { opacity: 0; transform: translateX(-70px) rotate(-5deg); } }
@keyframes obOutRight { to { opacity: 0; transform: translateX(70px) rotate(5deg); } }
.ob-mark { font-family: var(--serif); font-size: 3.4rem; font-weight: 700; letter-spacing: -0.2em; color: var(--accent); line-height: 1; }
.ob-title { font-family: var(--serif); font-size: 3rem; letter-spacing: 0.04em; }
.ob-title.small { font-size: 1.7rem; letter-spacing: 0; }
.ob-lead { color: var(--muted); font-size: 1.05rem; line-height: 1.6; max-width: 30ch; }
.ob-q { font-family: var(--serif); font-size: 1.55rem; line-height: 1.3; max-width: 18ch; }
.ob-foot { color: var(--muted); font-size: 0.82rem; max-width: 34ch; }
.ob-link { border: none; background: none; color: var(--muted); font: inherit; font-size: 0.9rem; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.ob-emoji { font-size: 1.6rem; line-height: 1; }
.ob-options { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.ob-options.two { flex-wrap: nowrap; width: 100%; }
.ob-option {
  font: inherit; color: var(--text); cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 6px;
  min-width: 92px; padding: 14px 12px; border-radius: 20px; border: 1.5px solid var(--line); background: var(--bg);
  transition: transform 0.15s, border-color 0.15s, background 0.15s;
}
.ob-option.tall { flex: 1; padding: 18px 12px; }
.ob-option.tall span:last-child { color: var(--muted); font-size: 0.8rem; line-height: 1.35; }
.ob-option:hover, .ob-faith:hover, .ob-row:hover { transform: translateY(-2px); }
.ob-option.on, .ob-faith.on, .ob-row.on { border-color: var(--text); background: var(--surface); box-shadow: var(--shadow); }
.ob-faiths { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; width: 100%; }
.ob-faith {
  font: inherit; color: var(--text); cursor: pointer; display: flex; align-items: center; gap: 10px; text-align: left;
  padding: 12px 14px; border-radius: 18px; border: 1.5px solid var(--line); background: var(--bg); transition: transform 0.15s;
  position: relative; overflow: hidden;
}
.ob-faith::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--c); }
.ob-faith:last-child:nth-child(odd) { grid-column: 1 / -1; justify-content: center; }
.ob-list { display: flex; flex-direction: column; gap: 8px; width: 100%; max-height: 330px; overflow-y: auto; }
.ob-row {
  font: inherit; color: var(--text); cursor: pointer; text-align: left; display: flex; flex-direction: column; gap: 2px;
  padding: 12px 14px; border-radius: 16px; border: 1.5px solid var(--line); background: var(--bg); transition: transform 0.15s;
}
.ob-row span { color: var(--muted); font-size: 0.82rem; }
.ob-avatar { width: 84px; height: 84px; border-radius: 50%; background: radial-gradient(circle at 50% 35%, #f1d9bf 0 22%, transparent 23%), var(--c); box-shadow: inset 0 -10px 20px rgba(0,0,0,0.12), var(--shadow); }
.ob-avatar.big { width: 108px; height: 108px; }
.ob-name { display: flex; gap: 8px; width: 100%; }
.ob-name input { flex: 1; text-align: center; font-size: 1.15rem; font-family: var(--serif); }
.ob-reroll { width: 48px; border-radius: 14px; border: 1px solid var(--line); background: var(--bg); font-size: 1.2rem; cursor: pointer; color: var(--text); }
.ob-colors { display: flex; gap: 10px; }
.ob-color { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--surface); background: var(--c); box-shadow: 0 0 0 1px var(--line); cursor: pointer; }
.ob-color.on { box-shadow: 0 0 0 2px var(--text); }

/* ---------------- Home ---------------- */
.home { display: flex; flex-direction: column; gap: 16px; padding: 18px 18px 30px; max-width: 640px; margin: 0 auto; }
.home-head { padding: 6px 2px 0; }
.home-title { font-family: var(--serif); font-size: 2.1rem; line-height: 1.15; margin-top: 4px; }
.home-title span { color: color-mix(in srgb, var(--accent) 75%, var(--text)); }
.mood { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px 16px; }
.mood-q { font-size: 0.95rem; margin-bottom: 10px; }
.mood-row { display: flex; justify-content: space-between; gap: 6px; }
.mood-chip { flex: 1; font-size: 1.5rem; padding: 8px 0; border-radius: 14px; border: 1px solid var(--line); background: var(--bg); cursor: pointer; transition: transform 0.15s; }
.mood-chip:hover { transform: translateY(-2px); }
.mood-tip { display: flex; align-items: center; gap: 12px; }
.mood-tip p { flex: 1; font-size: 0.95rem; }
.mood-icon { font-size: 1.6rem; }
.space-tile { position: relative; display: block; border-radius: 26px; overflow: hidden; aspect-ratio: 16 / 10; box-shadow: 0 14px 40px rgba(40, 30, 15, 0.18); text-decoration: none; }
.space-tile-art, .space-tile-art .scene { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.space-tile-text { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px; display: flex; flex-direction: column; gap: 2px; color: #fff; background: linear-gradient(transparent, rgba(10, 8, 6, 0.65)); }
.space-tile-text .eyebrow { color: rgba(255, 255, 255, 0.78); }
.space-tile-text strong { font-family: var(--serif); font-size: 1.7rem; font-weight: 600; }
.space-tile-cta { position: absolute; right: 16px; bottom: 18px; background: rgba(255, 255, 255, 0.92); color: #1d1a16; padding: 8px 16px; border-radius: 999px; font-weight: 650; font-size: 0.9rem; }
.today-strip { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.today-strip span { flex: 1 0 auto; display: flex; flex-direction: column; background: var(--surface); border-radius: 16px; padding: 10px 14px; box-shadow: var(--shadow); font-size: 0.85rem; white-space: nowrap; }
.today-strip small { color: var(--muted); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; }
.quick4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.quick4 a, .quick4 button {
  font: inherit; font-size: 0.78rem; color: var(--text); text-decoration: none; cursor: pointer; border: none;
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 4px; border-radius: 18px; background: var(--surface); box-shadow: var(--shadow);
}
.quick4 span { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 16%, var(--surface)); font-size: 1.1rem; font-weight: 700; }
.visit-strip { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.visit-strip a { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 999px; background: var(--surface); box-shadow: var(--shadow); color: var(--text); text-decoration: none; font-size: 0.9rem; border-left: 4px solid var(--c); }

/* ---------------- 3D stage ---------------- */
body.in-space .topbar { position: absolute; left: 0; right: 0; background: transparent; backdrop-filter: none; }
body.in-space .topbar .brand, body.in-space .topbar .top-link { color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,0.35); }
.stage { position: relative; height: calc(100vh - 0px); height: 100dvh; min-height: 480px; overflow: hidden; background: #1d2030; }
.stage-world { position: absolute; inset: 0; }
.stage-world .world-canvas { width: 100%; height: 100%; display: block; touch-action: none; outline: none; }
.stage.flat .stage-world .scene { width: 100%; height: 100%; display: block; }
.stage-top { position: absolute; top: calc(58px + env(safe-area-inset-top)); left: 16px; right: 16px; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; pointer-events: none; }
.stage-title { color: #fff; text-shadow: 0 1px 10px rgba(0,0,0,0.35); }
.stage-title .eyebrow { color: rgba(255,255,255,0.8); }
.stage-title h1 { font-size: 2rem; }
.pill {
  pointer-events: auto; display: inline-flex; align-items: center; gap: 8px; font: inherit; font-size: 0.85rem; font-weight: 600;
  padding: 8px 14px; border-radius: 999px; border: none; cursor: pointer; color: #1d1a16;
  background: rgba(255,255,255,0.88); backdrop-filter: blur(10px); box-shadow: 0 6px 18px rgba(0,0,0,0.18);
}
.pill .dot { width: 8px; height: 8px; border-radius: 50%; background: #b9b2a6; }
.pill.on .dot { background: #46b36b; box-shadow: 0 0 0 4px rgba(70,179,107,0.2); }
.stage-banner { position: absolute; top: calc(130px + env(safe-area-inset-top)); left: 16px; padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,0.85); font-size: 0.82rem; font-weight: 600; color: #3a2a10; }
.stage-hint { position: absolute; left: 50%; top: 46%; transform: translateX(-50%); padding: 8px 14px; border-radius: 999px; background: rgba(15,12,10,0.5); color: #fff; font-size: 0.82rem; pointer-events: none; transition: opacity 1s; white-space: nowrap; }
.stage-hint.fade { opacity: 0; }
.stage-bottom { position: absolute; left: 12px; right: 12px; bottom: calc(var(--tabbar-h) + 22px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 10px; align-items: center; pointer-events: none; }
.action-card {
  pointer-events: auto; width: min(440px, 100%); display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 12px 12px 18px; border-radius: 22px; background: rgba(255,255,255,0.94); backdrop-filter: blur(14px); color: #1d1a16;
  box-shadow: 0 12px 34px rgba(0,0,0,0.22); animation: rise 0.28s ease;
}
.action-card[hidden] { display: none; }
.action-card strong { display: block; font-size: 1rem; }
.action-card .eyebrow { color: #7b7166; }
.action-card .btn { background: #1d1a16; color: #fff; min-width: 96px; }
.emotes { pointer-events: auto; display: flex; gap: 6px; padding: 6px; border-radius: 999px; background: rgba(255,255,255,0.7); backdrop-filter: blur(10px); }
.emote { width: 40px; height: 40px; border-radius: 50%; border: none; background: transparent; font-size: 1.25rem; cursor: pointer; transition: transform 0.15s; }
.emote:hover { transform: scale(1.15); }
.sit-sheet {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(320px, calc(100% - 40px));
  padding: 22px 20px 18px; border-radius: 28px; background: rgba(255,255,255,0.92); backdrop-filter: blur(16px); color: #1d1a16;
  display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,0.3); animation: rise 0.3s ease;
}
.sit-sheet[hidden] { display: none; }
.sit-sheet .btn-ghost { background: transparent; color: #1d1a16; border-color: #d9d2c6; }
.sit-title { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: #7b7166; font-weight: 600; }
.sit-phrase { font-family: var(--serif); font-size: 1.35rem; }
.sit-tap { width: 120px; height: 120px; border-radius: 50%; border: none; cursor: pointer; font-size: 2.2rem; font-weight: 300; color: #1d1a16; background: radial-gradient(circle at 50% 40%, #fff, #efe7da); box-shadow: inset 0 -6px 14px rgba(0,0,0,0.08), 0 8px 22px rgba(0,0,0,0.12); transition: transform 0.1s; }
.sit-tap:active { transform: scale(0.95); }
.sit-breath { width: 70px; height: 70px; border-radius: 50%; background: radial-gradient(color-mix(in srgb, var(--accent) 70%, #fff), transparent 70%); transition: transform 4s ease-in-out; }
.sit-breath.in { transform: scale(1.8); }
.sit-timer { font-size: 2.2rem; font-weight: 300; font-variant-numeric: tabular-nums; }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.sit-sheet { animation: none; }
.space-below { max-width: 1080px; }
.space-intro { padding: 4px 2px; }
.ritual.flash { box-shadow: 0 0 0 3px var(--accent), var(--shadow); transition: box-shadow 0.3s; }

@media (min-width: 900px) {
  .stage { height: 82vh; }
  .ob-card { min-height: 500px; }
}

/* v1.2 — spot chips: one-tap "go to" for people who don't play 3D games */
.spot-chips { pointer-events: auto; display: flex; gap: 6px; max-width: 100%; overflow-x: auto; scrollbar-width: none; padding: 2px 2px 4px; -webkit-overflow-scrolling: touch; }
.spot-chips::-webkit-scrollbar { display: none; }
.spot-chips:empty { display: none; }
.spot-chips .chip { flex: 0 0 auto; background: rgba(255,255,255,0.78); color: #1d1a16; border: 1px solid rgba(255,255,255,0.6); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 2px 10px rgba(0,0,0,0.12); }
.spot-chips .chip.on { background: #1d1a16; color: #fff; border-color: #1d1a16; }

/* v1.2 — chrome over the 3D stage: dark glass so it reads on any sky */
body.in-space .tabbar { background: rgba(18, 14, 10, 0.78); border-color: rgba(255,255,255,0.12); box-shadow: 0 10px 30px rgba(0,0,0,0.3); }
body.in-space .tabbar a { color: rgba(255,255,255,0.72); }
body.in-space .tabbar a.active { color: #fff; background: rgba(255,255,255,0.14); }
body.in-space .topbar .pause-button { color: #fff; border-color: rgba(255,255,255,0.45); background: rgba(0,0,0,0.18); }

.stage-hint { top: calc(150px + env(safe-area-inset-top)); bottom: auto; }

/* ---------------- v1.3: faith greetings, Ruang Live ---------------- */
.stage-pills { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; pointer-events: auto; }
.pill.live-pill { background: #c62f2f; color: #fff; border-color: #c62f2f; font-weight: 700; letter-spacing: 0.02em; }
.pill.live-pill .rec { width: 8px; height: 8px; border-radius: 50%; background: #fff; display: inline-block; margin-right: 6px; animation: rec 1.4s ease-in-out infinite; }
@keyframes rec { 50% { opacity: 0.3; } }
.pill.count-pill { background: rgba(20,16,12,0.55); color: #fff; border-color: transparent; }

.greetings { pointer-events: auto; display: flex; gap: 6px; max-width: 100%; overflow-x: auto; scrollbar-width: none; padding: 6px; border-radius: 999px; background: rgba(255,255,255,0.72); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 4px 16px rgba(0,0,0,0.15); }
.greetings::-webkit-scrollbar { display: none; }
.greet { flex: 0 0 auto; border: 0; border-radius: 999px; padding: 8px 14px; min-height: 38px; font: 600 0.85rem/1.1 inherit; color: #2a2016; background: #fff8e8; box-shadow: inset 0 0 0 1px rgba(120,90,40,0.18); cursor: pointer; white-space: nowrap; }
.greet:active { transform: scale(0.96); background: var(--accent); color: #fff; }

.live-bar { pointer-events: auto; display: flex; gap: 6px; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.live-bar::-webkit-scrollbar { display: none; }
.live-bar button { flex: 0 0 auto; border: 0; border-radius: 12px; padding: 8px 12px; font: 600 0.8rem inherit; color: #fff; background: rgba(20,16,12,0.72); backdrop-filter: blur(8px); cursor: pointer; }
.live-bar button.on { background: #c62f2f; }
.live-bar button[data-host="end"] { background: rgba(120,30,30,0.8); }
.spot-chips .chip.invite { animation: invite 1.2s ease-in-out 4; box-shadow: 0 0 0 3px #f3c84b; }
@keyframes invite { 50% { transform: scale(1.06); } }

.silence-overlay { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; gap: 6px; background: rgba(10,8,6,0.45); color: #fff; pointer-events: none; z-index: 4; }
.silence-overlay[hidden] { display: none; }
.silence-overlay .eyebrow { color: rgba(255,255,255,0.8); }
.silence-time { font: 600 4rem/1 var(--serif, Georgia, serif); }

.broadcast-card { position: absolute; left: 12px; top: calc(118px + env(safe-area-inset-top)); display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 18px; background: rgba(255,250,240,0.95); color: #1d1a16; box-shadow: 0 10px 30px rgba(0,0,0,0.25); z-index: 3; max-width: calc(100% - 24px); }
.broadcast-card[hidden] { display: none; }
.broadcast-qr { width: 108px; height: 108px; flex: 0 0 auto; background: #fff; border-radius: 10px; overflow: hidden; }
.broadcast-qr svg, .share-qr svg { width: 100%; height: 100%; display: block; }
.broadcast-code { font: 700 2rem/1.1 ui-monospace, "SFMono-Regular", Consolas, monospace; letter-spacing: 0.12em; margin: 2px 0; }
.stage.broadcasting .stage-hint { display: none; }

.share-sheet, .live-ended { position: fixed; inset: 0; display: grid; place-items: end center; background: rgba(10,8,6,0.45); z-index: 80; padding: 12px 12px calc(12px + env(safe-area-inset-bottom)); }
.live-ended { place-items: center; }
.share-sheet[hidden], .live-ended[hidden] { display: none; }
.share-body { width: min(440px, 100%); background: var(--surface, #fff); color: var(--text); border-radius: 22px 22px 18px 18px; padding: 18px; display: grid; gap: 10px; box-shadow: 0 -10px 40px rgba(0,0,0,0.25); max-height: 90%; overflow: auto; }
.share-code { font: 700 2.4rem/1 ui-monospace, "SFMono-Regular", Consolas, monospace; letter-spacing: 0.14em; text-align: center; margin: 4px 0; }
.share-qr { width: 168px; height: 168px; margin: 0 auto; background: #fff; border-radius: 12px; overflow: hidden; }
.share-link { width: 100%; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface-2); color: var(--text); font-size: 0.85rem; }

.flat-note { position: absolute; left: 12px; right: 12px; top: calc(130px + env(safe-area-inset-top)); display: grid; gap: 4px; padding: 12px 14px; border-radius: 14px; background: rgba(255,250,240,0.92); color: #2a2016; font-size: 0.85rem; }
.stage-world.context-lost::after { content: 'Memulihkan 3D…'; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; background: rgba(0,0,0,0.35); }

.live-join-row { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); color: var(--text); text-decoration: none; box-shadow: var(--shadow, none); }
.live-join-row span:nth-child(2) { flex: 1; display: grid; }
.live-join-row small { color: var(--muted); }
.live-dot { width: 12px; height: 12px; border-radius: 50%; background: #c62f2f; box-shadow: 0 0 0 4px rgba(198,47,47,0.18); }

.code-form { display: grid; gap: 10px; width: 100%; }
.code-input { width: 100%; text-align: center; font: 700 1.8rem/1 ui-monospace, "SFMono-Regular", Consolas, monospace; letter-spacing: 0.18em; padding: 14px 10px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface-2); color: var(--text); text-transform: uppercase; }
.code-error { color: #b3261e; margin: 0; }
.role-pick .ob-option { text-align: left; }
.role-pick .ob-option span { font-size: 0.8rem; color: var(--muted); }
.select-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 0; }
.select-row select { padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface-2); color: var(--text); }

/* v1.3.1: in-page confirm (native confirm() is blocked in TikTok/IG browsers), one-tap join */
.ask-layer { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 18px; background: rgba(10,8,6,0.5); }
.ask-card { width: min(380px, 100%); background: var(--surface, #fff); color: var(--text); border-radius: 20px; padding: 20px; display: grid; gap: 10px; box-shadow: 0 20px 50px rgba(0,0,0,0.3); }
.ask-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 6px; }
.btn.danger { background: #b3261e; color: #fff; }
.role-q { margin: 6px 0 0; font-weight: 600; font-size: 0.9rem; color: var(--muted); }
.role-enter { display: grid; gap: 8px; width: 100%; }
.role-enter .btn { display: grid; gap: 2px; justify-items: center; width: 100%; min-height: 64px; }
.role-enter .btn small { font-weight: 500; font-size: 0.78rem; opacity: 0.8; }
.btn.btn-soft { background: var(--surface-2); color: var(--text); box-shadow: inset 0 0 0 1px var(--line); }

/* ---------- v1.4.1: phone-friendly 3D controls ---------- */
.greet-toggle { display: none; }
.icon-pill { padding: 8px 11px; font-size: 1rem; line-height: 1; }
.immersive-exit { display: none; position: absolute; right: 12px; top: calc(12px + env(safe-area-inset-top)); z-index: 5; background: rgba(20,16,12,0.55); color: #fff; }
body.immersive .immersive-exit { display: inline-flex; }
body.immersive .stage-top,
body.immersive .stage-hint,
body.immersive .stage-banner,
body.immersive .spot-chips,
body.immersive .greetings,
body.immersive .greet-toggle,
body.immersive .live-bar,
body.immersive .topbar,
body.immersive .tabbar { display: none !important; }
body.immersive .stage-bottom { bottom: calc(14px + env(safe-area-inset-bottom)); }

@media (max-width: 600px) {
  body.in-space .topbar { padding: 6px 12px; }
  body.in-space .topbar .brand { font-size: 1.05rem; }
  body.in-space .topbar .pause-button { padding: 4px 10px; font-size: 0.75rem; min-height: 30px; }
  .stage-top { top: calc(44px + env(safe-area-inset-top)); left: 12px; right: 12px; gap: 8px; }
  .stage-title .eyebrow { display: none; }
  .stage-title h1 { font-size: 1.25rem; line-height: 1.2; }
  .stage-pills { gap: 5px; }
  .stage-pills .pill { padding: 5px 10px; font-size: 0.72rem; gap: 6px; box-shadow: 0 3px 10px rgba(0,0,0,0.15); }
  .stage-pills .icon-pill { padding: 5px 9px; font-size: 0.9rem; }
  .stage-banner { top: calc(84px + env(safe-area-inset-top)); left: 12px; font-size: 0.72rem; padding: 4px 10px; }
  .stage-hint { top: calc(86px + env(safe-area-inset-top)); font-size: 0.7rem; padding: 4px 10px; white-space: normal; text-align: center; max-width: 82%; }
  .stage-bottom { left: 8px; right: 8px; gap: 6px; bottom: calc(56px + 14px + env(safe-area-inset-bottom)); }
  .spot-chips { gap: 5px; padding: 0 2px 2px; }
  .spot-chips .chip { min-height: 30px; padding: 3px 10px; font-size: 0.74rem; box-shadow: 0 2px 6px rgba(0,0,0,0.12); }
  .action-card { padding: 6px 6px 6px 14px; gap: 8px; border-radius: 16px; width: min(420px, 100%); box-shadow: 0 6px 18px rgba(0,0,0,0.2); }
  .action-card .eyebrow { font-size: 0.6rem; letter-spacing: 0.1em; }
  .action-card strong { font-size: 0.86rem; line-height: 1.25; }
  .action-card .btn { min-height: 36px; min-width: 74px; padding: 6px 14px; font-size: 0.85rem; }
  .greet-toggle { display: inline-flex; align-self: flex-start; padding: 5px 12px; font-size: 0.74rem; }
  .greetings { display: none; padding: 4px; }
  .greetings.open { display: flex; }
  .greet { min-height: 30px; padding: 5px 10px; font-size: 0.74rem; }
  .live-bar button { padding: 6px 10px; font-size: 0.72rem; }
  body.in-space .tabbar { height: 52px; bottom: calc(8px + env(safe-area-inset-bottom)); }
  body.in-space .tabbar a { font-size: 0.62rem; margin: 4px 0; }
  body.in-space .tabbar .tab-icon { font-size: 0.95rem; }
  .sit-sheet { padding: 16px 16px 14px; gap: 8px; width: min(290px, calc(100% - 40px)); }
  .sit-tap { width: 96px; height: 96px; }
}

/* In the 3D space on phones, show toasts near the top so they never cover the action card. */
@media (max-width: 600px) {
  body.in-space .toast {
    top: calc(env(safe-area-inset-top, 0px) + 92px); bottom: auto;
    max-width: calc(100vw - 32px); font-size: 0.85rem; padding: 7px 14px; text-align: center;
    transform: translateX(-50%) translateY(-12px);
  }
  body.in-space .toast.show { transform: translateX(-50%) translateY(0); }
  body.in-space.immersive .toast { top: calc(env(safe-area-inset-top, 0px) + 56px); }
}

/* v1.5.0: first person, time of day, sacred objects held in your hands */
.stage-side {
  position: absolute; right: 10px; top: 38%; z-index: 6;
  display: flex; flex-direction: column; gap: 8px;
}
.side-btn {
  width: 48px; min-height: 48px; border-radius: 14px; border: 1px solid rgba(255,255,255,0.35);
  background: rgba(20,18,16,0.5); color: #fff; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  font-size: 1.15rem; line-height: 1; cursor: pointer; padding: 4px 2px;
}
.side-btn small { font-size: 0.62rem; letter-spacing: 0.02em; opacity: 0.9; }
.side-btn[aria-pressed="true"] { background: rgba(255,231,168,0.85); color: #2a2016; }
.side-btn[hidden] { display: none; }
body.immersive .stage-side, body.holding .stage-side { display: none; }

.hold-hud {
  position: absolute; inset: 0; z-index: 8; pointer-events: none;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: calc(env(safe-area-inset-top, 0px) + 10px) 10px calc(env(safe-area-inset-bottom, 0px) + 12px);
}
.hold-hud[hidden] { display: none; }
.hold-card {
  pointer-events: auto; align-self: center; width: min(440px, 100%);
  background: rgba(20,18,16,0.62); color: #fff; border-radius: 16px; padding: 10px 14px 12px;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); text-align: center;
}
.hold-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.hold-head .eyebrow { color: #ffe7a8; }
.hold-voice {
  border: 1px solid rgba(255,255,255,0.35); background: transparent; color: #fff;
  border-radius: 999px; padding: 4px 10px; font-size: 0.78rem; cursor: pointer;
}
.hold-voice[hidden] { display: none; }
.hold-context { margin: 6px 0 0; font-size: 0.8rem; opacity: 0.85; }
.hold-context:empty, .hold-script:empty, .hold-note:empty, .hold-count:empty, .hold-label:empty { display: none; }
.hold-script { margin: 6px 0 0; font-size: 1.6rem; line-height: 1.4; font-family: 'Amiri', 'Scheherazade New', 'Noto Naskh Arabic', serif; }
.hold-label { margin: 4px 0 0; font-size: 1.15rem; font-weight: 600; }
.hold-count { margin: 2px 0 0; font-size: 0.9rem; font-variant-numeric: tabular-nums; color: #ffe7a8; }
.hold-note { margin: 6px 0 0; font-size: 0.8rem; opacity: 0.85; line-height: 1.4; }
.hold-link { display: inline-block; margin-top: 6px; font-size: 0.8rem; color: #ffe7a8; }
.hold-link[hidden] { display: none; }
.hold-actions { pointer-events: auto; display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.hold-actions .btn, .hold-actions .btn-ghost { min-height: 46px; padding: 0 18px; }
.hold-actions .btn-ghost { background: rgba(20,18,16,0.55); color: #fff; border-color: rgba(255,255,255,0.35); }
.hold-actions [hidden] { display: none; }
body.holding .stage-top, body.holding .stage-hint, body.holding .stage-banner, body.holding .stage-bottom,
body.holding .sit-sheet, body.holding .immersive-exit { display: none !important; }
.sit-hold { margin-top: 8px; }
@media (max-width: 600px) {
  body.holding .topbar, body.holding .tabbar { display: none !important; }
  .stage-side { right: 8px; top: 34%; gap: 6px; }
  .side-btn { width: 44px; min-height: 44px; font-size: 1.05rem; border-radius: 12px; }
  .hold-card { padding: 8px 12px 10px; }
  .hold-script { font-size: 1.35rem; }
  .hold-label { font-size: 1.02rem; }
}
/* While holding a sacred object, toasts sit just above the action buttons instead of over the card. */
body.holding .toast { top: auto !important; bottom: calc(env(safe-area-inset-bottom, 0px) + 78px) !important; }