/* Beyond2Day — styles */
:root {
  --ink: #2A2366;
  --ink-2: #5E5698;
  --ink-3: #8E86BD;
  --cream: #FFF9F2;
  --card: rgba(255, 250, 245, 0.88);
  --card-line: rgba(255, 255, 255, 0.7);
  --gold: #F4B142;
  --gold-2: #FFD27A;
  --gold-soft: #FFF0CC;
  --lav: #B7A7F2;
  --lav-soft: #ECE6FF;
  --rose: #EE8A86;
  --mint: #8FDDB8;
  --shadow: 0 10px 30px rgba(42, 35, 102, 0.18);
  --serif: 'Fraunces', 'Georgia', serif;
  --sans: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --hand: 'Caveat', 'Segoe Print', cursive;
  --ts: 1;
  --sky: #A9A6E6;
  /* phone notch / home-indicator room (the claude.ai viewer already pads for them and sets these to 0) */
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  color-scheme: light;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--sans);
  font-size: calc(16px * var(--ts));
  color: var(--ink);
  background: radial-gradient(120% 80% at 50% 10%, var(--sky), #2A2366);
  overflow: hidden;
  overscroll-behavior: none;
  transition: background 2s;
}
button { font: inherit; color: inherit; cursor: pointer; touch-action: manipulation; }
textarea, input { font: inherit; color: var(--ink); }

#app {
  position: relative;
  width: 100%; max-width: 440px; height: 100%; margin: 0 auto;
  overflow: hidden;
  box-shadow: 0 0 80px rgba(20, 10, 60, 0.35);
  -webkit-user-select: none; user-select: none;
}
#app textarea, #app input { -webkit-user-select: text; user-select: text; }
@media (min-width: 520px) {
  #app { height: min(100%, 920px); top: 50%; transform: translateY(-50%); border-radius: 36px; }
}
#world, #universe { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#universe { z-index: 3; touch-action: none; }

/* ---------- top bar ---------- */
.topbar {
  /* below the Companion (z 4) so its speech bubble is never hidden behind the logo */
  position: absolute; z-index: 3; top: 0; left: 0; right: 0;
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: calc(14px + var(--sat)) 20px 0;
  pointer-events: none;
}
.topbar > * { pointer-events: auto; }
.logo { font-family: var(--serif); font-weight: 600; font-size: 30px; letter-spacing: -0.5px; color: var(--ink); line-height: 1; transition: color 1.5s; }
.logo span { color: var(--gold); font-size: 1.12em; }
.tagline { margin-top: 6px; font-size: 10.5px; letter-spacing: 3.2px; text-transform: uppercase; color: var(--ink-2); transition: color 1.5s; padding-left: 2px; }
.is-dark .logo, .is-dark .tagline { color: #FFF6E8; }
.avatar-btn {
  width: 46px; height: 46px; border-radius: 50%; border: 0;
  background: rgba(255, 252, 248, 0.85); color: var(--ink-2);
  display: grid; place-items: center; box-shadow: var(--shadow);
  backdrop-filter: blur(6px);
}

/* ---------- handwritten notes & sign ---------- */
.hand-note {
  position: absolute; z-index: 2; top: 92px; right: 18px; width: 140px;
  font-family: var(--hand); font-size: calc(23px * var(--ts)); line-height: 1.05; color: var(--ink-2);
  text-align: left; transform: rotate(-4deg); transition: opacity .8s, color 1.5s;
  pointer-events: none;
}
.hand-note::after { content: ' ♡'; color: var(--rose); }
.is-dark .hand-note { color: #F5E9FF; }
.sign {
  position: absolute; z-index: 2; left: 14px; bottom: 50%; width: 88px; padding: 9px 7px 11px;
  background: linear-gradient(160deg, #8B6A4E, #6B4E38); border-radius: 6px;
  box-shadow: inset 0 0 0 2px rgba(60, 38, 22, 0.45), 0 6px 14px rgba(40, 20, 10, 0.3);
  transform: rotate(-3deg); transition: opacity .6s;
  pointer-events: none;
}
.sign::before, .sign::after { content: ''; position: absolute; bottom: -26px; width: 6px; height: 28px; background: #5A3F2C; border-radius: 2px; }
.sign::before { left: 22px; } .sign::after { right: 22px; }
.sign span { display: block; font-family: var(--hand); font-size: 17px; line-height: 1.02; color: #FBEBD2; text-align: center; }
.sign span::after { content: ' ♡'; }

/* ---------- companion stage ---------- */
#stage {
  position: absolute; z-index: 4;
  left: 50%; bottom: 48.5%;
  /* never taller than the space between the top bar and the ground line */
  width: min(62vw, 250px, calc((51.5vh - 96px) * 0.82));
  transform: translateX(-50%);
  transition: left .9s cubic-bezier(.5,0,.2,1), bottom .9s cubic-bezier(.5,0,.2,1), width .9s cubic-bezier(.5,0,.2,1), transform .9s cubic-bezier(.5,0,.2,1), opacity .6s;
}
.companion { position: relative; width: 100%; }
.companion-canvas { width: 100%; height: auto; display: block; touch-action: manipulation; }
.c-bubble {
  position: absolute; z-index: 5;
  min-width: 120px; max-width: 250px;
  padding: 12px 15px; border-radius: 20px;
  background: rgba(255, 252, 247, 0.97); color: var(--ink);
  font-size: calc(15px * var(--ts)); line-height: 1.35; font-weight: 600;
  box-shadow: 0 8px 26px rgba(42, 35, 102, 0.22);
  opacity: 0; transform: translateY(6px) scale(.96); transition: opacity .25s, transform .25s;
  pointer-events: none;
}
.c-bubble.show { opacity: 1; transform: none; }
.c-bubble::after { content: ''; position: absolute; width: 16px; height: 16px; background: inherit; transform: rotate(45deg); border-radius: 3px; }
/* bubble placements */
.bubble-top .c-bubble { left: 50%; bottom: 100%; margin-bottom: -4px; transform-origin: bottom center; translate: -50% 0; width: max-content; max-width: min(290px, 86vw); }
.bubble-top .c-bubble::after { left: calc(50% - 8px); bottom: -6px; }
.bubble-right .c-bubble { left: 92%; top: 6%; width: calc(min(440px, 100vw) - 190px); max-width: none; }
.bubble-right .c-bubble::after { left: -6px; top: 22px; }
.bubble-left .c-bubble { right: 96%; top: 10%; width: calc(min(440px, 100vw) - 160px); max-width: none; }
.bubble-left .c-bubble::after { right: -6px; top: 22px; }

#zzz { position: absolute; z-index: 5; pointer-events: none; opacity: 0; transition: opacity 1s; left: 58%; bottom: 62%; }
#zzz.on { opacity: 1; }
#zzz i { position: absolute; font-family: var(--hand); font-style: normal; color: #FFF0C8; font-size: 22px; animation: zz 3.6s infinite; opacity: 0; text-shadow: 0 0 8px rgba(255, 220, 140, .8); }
#zzz i:nth-child(2) { animation-delay: 1.2s; font-size: 28px; }
#zzz i:nth-child(3) { animation-delay: 2.4s; font-size: 34px; }
@keyframes zz { 0% { transform: translate(0, 0); opacity: 0; } 20% { opacity: 1; } 100% { transform: translate(34px, -70px); opacity: 0; } }

/* modes move the Companion around the world */
.mode-ritual #stage { left: 6px; bottom: auto; top: 92px; width: 156px; transform: none; }
.mode-ritual .sign, .mode-ritual .hand-note { opacity: 0; }
.mode-page #stage { left: auto; right: -6px; bottom: auto; top: 70px; width: 118px; transform: none; pointer-events: none; }
.mode-page .sign, .mode-page .hand-note { opacity: 0; }
.mode-universe #stage { left: -4px; bottom: 88px; width: 128px; transform: none; }
.mode-universe .sign, .mode-universe .hand-note { opacity: 0; }
.mode-ceremony #stage { width: min(68vw, 280px); bottom: 40%; }
.mode-ceremony .sign, .mode-ceremony .hand-note { opacity: 0; }
.mode-onboard .sign, .mode-onboard .hand-note, .mode-onboard .tabbar { opacity: 0; pointer-events: none; }
.mode-onboard #stage { bottom: 44%; width: min(66vw, 270px); }

/* ---------- view layer ---------- */
#view { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
#view > * { pointer-events: auto; }
#fx { position: absolute; inset: 0; z-index: 7; pointer-events: none; overflow: hidden; }

/* home */
.home { position: absolute; left: 0; right: 0; bottom: calc(94px + var(--sab)); padding: 0 18px; pointer-events: none; }
.home > * { pointer-events: auto; }
.greeting { text-align: center; color: #fff; text-shadow: 0 2px 18px rgba(42, 35, 102, .45); margin-bottom: 14px; }
.greeting h1 { font-family: var(--serif); font-weight: 600; font-size: calc(44px * var(--ts)); margin: 0; letter-spacing: -1px; line-height: 1.05; }
.greeting h1 .heart { color: var(--gold-2); font-size: .7em; vertical-align: .12em; margin-left: 4px; }
.greeting p { margin: 8px 0 0; font-size: calc(15.5px * var(--ts)); letter-spacing: .6px; line-height: 1.4; }
.card {
  background: var(--card); border: 1px solid var(--card-line);
  border-radius: 28px; padding: 16px 18px; box-shadow: var(--shadow);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.card-head { display: flex; justify-content: space-between; font-size: 11.5px; letter-spacing: 2.2px; text-transform: uppercase; color: var(--ink-3); font-weight: 700; }
.card-main { display: flex; align-items: center; gap: 14px; margin-top: 12px; width: 100%; background: none; border: 0; padding: 0; text-align: left; }
.icon-tile { flex: none; width: 58px; height: 58px; border-radius: 18px; display: grid; place-items: center; background: var(--gold-soft); font-size: 28px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.6); }
.icon-tile.lav { background: var(--lav-soft); }
.icon-tile.sunset { background: linear-gradient(180deg, #FFD9A0, #C9A2E0); }
.icon-tile.night { background: linear-gradient(160deg, #B9A8F0, #8D7BD6); }
.card-main h3 { margin: 0; font-family: var(--serif); font-weight: 600; font-size: calc(21px * var(--ts)); color: var(--ink); }
.card-main p { margin: 3px 0 0; color: var(--ink-2); font-size: calc(14.5px * var(--ts)); }
.chev { margin-left: auto; flex: none; width: 38px; height: 38px; border-radius: 50%; background: #F4EFFA; display: grid; place-items: center; color: var(--ink); box-shadow: 0 2px 6px rgba(42,35,102,.1); }
.card-quote { margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(42,35,102,.08); font-family: var(--hand); font-size: calc(21px * var(--ts)); line-height: 1.15; color: var(--ink-2); display: flex; gap: 10px; align-items: flex-end; }
.card-quote small { display: block; font-family: var(--sans); font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--ink-3); margin-top: 4px; }
.leaf { flex: none; opacity: .55; }
.quick { display: flex; gap: 8px; justify-content: center; margin-top: 10px; }
.chip { border: 0; background: rgba(255,250,245,.75); padding: 7px 12px; border-radius: 999px; font-size: 13px; font-weight: 700; color: var(--ink-2); box-shadow: 0 2px 8px rgba(42,35,102,.12); }

/* ---------- tab bar ---------- */
.tabbar {
  position: absolute; z-index: 8; left: 14px; right: 14px; bottom: calc(12px + var(--sab));
  display: flex; justify-content: space-around; padding: 7px; border-radius: 30px;
  background: rgba(255, 250, 245, .9); box-shadow: var(--shadow); backdrop-filter: blur(12px);
  transition: opacity .5s, transform .5s;
}
.tabbar button { flex: 1; border: 0; background: none; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 0; border-radius: 22px; color: var(--ink-3); font-size: 12.5px; font-weight: 700; }
.tabbar svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; stroke-linecap: round; }
.tabbar button.active { color: var(--ink); }
.tabbar button.active svg { stroke: #fff; fill: none; }
.tabbar button.active .ico-wrap, .tabbar button.active svg { background: var(--gold); border-radius: 14px; padding: 3px 14px; width: 54px; height: 31px; box-shadow: 0 4px 10px rgba(244,177,66,.45); }
.mode-ritual .tabbar, .mode-ceremony .tabbar { opacity: 0; transform: translateY(30px); pointer-events: none; }

/* ---------- ritual sheet ---------- */
.sheet {
  position: absolute; left: 0; right: 0; bottom: 0; top: 300px;
  background: linear-gradient(180deg, rgba(255, 251, 246, .96), rgba(255, 248, 240, .98));
  border-radius: 30px 30px 0 0; box-shadow: 0 -10px 40px rgba(42, 35, 102, .2);
  display: flex; flex-direction: column;
  animation: sheetIn .6s cubic-bezier(.2,.8,.2,1);
}
.sheet.out { animation: sheetOut .45s ease-in forwards; }
@keyframes sheetIn { from { transform: translateY(100%); } }
@keyframes sheetOut { to { transform: translateY(105%); } }
.sheet-head { display: flex; align-items: center; gap: 10px; padding: 16px 18px 6px; }
.sheet-head .label { font-size: 11.5px; letter-spacing: 2.2px; text-transform: uppercase; color: var(--ink-3); font-weight: 800; }
.dots { display: flex; gap: 5px; margin-left: auto; }
.dots i { width: 7px; height: 7px; border-radius: 50%; background: #E5DFF5; }
.dots i.on { background: var(--gold); width: 18px; border-radius: 4px; }
.x-btn { border: 0; background: #F2EDFA; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: var(--ink-2); font-size: 18px; }
.sheet-body { flex: 1; overflow-y: auto; padding: 8px 20px 20px; }
.sheet-foot { padding: 10px 20px calc(18px + var(--sab)); display: flex; gap: 10px; }
.step-in { animation: stepIn .45s ease; }
@keyframes stepIn { from { opacity: 0; transform: translateX(18px); } }
.h2 { font-family: var(--serif); font-weight: 600; font-size: calc(24px * var(--ts)); line-height: 1.2; margin: 6px 0 10px; color: var(--ink); }
.prompt { font-family: var(--hand); font-size: calc(25px * var(--ts)); line-height: 1.12; color: var(--ink-2); margin: 6px 0 12px; }
.muted { color: var(--ink-3); font-size: calc(14px * var(--ts)); }
.emotions { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 14px; }
.emotion { padding: 9px 15px; border-radius: 999px; font-weight: 800; font-size: calc(15px * var(--ts)); color: #5A3E00; background: linear-gradient(180deg, #FFE7A6, #FFCF6E); box-shadow: 0 3px 10px rgba(244,177,66,.35); }
.emotion:nth-child(2) { background: linear-gradient(180deg, #E8DFFF, #C9B8FA); color: #3B2C82; box-shadow: 0 3px 10px rgba(150,120,240,.3); }
.emotion:nth-child(3) { background: linear-gradient(180deg, #FFE0DC, #FBB6AE); color: #7A2E28; box-shadow: 0 3px 10px rgba(238,138,134,.3); }
.field { width: 100%; min-height: 120px; resize: vertical; border: 1.5px solid #E6DFF4; background: #fff; border-radius: 20px; padding: 14px 16px; font-size: calc(16px * var(--ts)); line-height: 1.45; outline: none; transition: border-color .2s, box-shadow .2s; }
.field:focus { border-color: var(--lav); box-shadow: 0 0 0 4px rgba(183,167,242,.25); }
.field.small { min-height: 56px; }
.count { text-align: right; font-size: 12px; color: var(--ink-3); margin-top: 4px; }
.btn { flex: 1; border: 0; border-radius: 999px; padding: 15px 18px; font-weight: 800; font-size: calc(16px * var(--ts)); background: linear-gradient(180deg, #FFD98A, #F4B142); color: #4A3300; box-shadow: 0 6px 16px rgba(244,177,66,.4); display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.btn.lav { background: linear-gradient(180deg, #D3C8FB, #AE9CF0); color: #fff; box-shadow: 0 6px 16px rgba(150,120,240,.35); }
.btn.ghost { background: #F2EDFA; color: var(--ink-2); box-shadow: none; flex: 0 0 auto; }
.btn:disabled { opacity: .45; filter: grayscale(.4); }
.task-card { border-radius: 22px; padding: 18px; background: linear-gradient(160deg, #FFF3D6, #FFE6B8); box-shadow: inset 0 0 0 1px rgba(255,255,255,.7); font-size: calc(17px * var(--ts)); line-height: 1.45; font-weight: 600; }
.task-card .tag { display: inline-block; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: #A26A00; font-weight: 800; margin-bottom: 6px; }
.accepted { margin-top: 12px; display: flex; align-items: center; gap: 8px; color: #3C8A5F; font-weight: 800; }

/* hold-to-affirm cards */
.aff { position: relative; overflow: hidden; display: flex; gap: 14px; align-items: center; width: 100%; text-align: left; border: 0; margin-bottom: 10px; padding: 14px 16px; border-radius: 22px; background: #fff; box-shadow: 0 3px 12px rgba(42,35,102,.08); user-select: none; -webkit-user-select: none; touch-action: none; font-size: calc(15.5px * var(--ts)); line-height: 1.4; font-weight: 600; }
.aff .fill { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(255,215,130,.55), rgba(255,236,190,.35)); transform-origin: left; transform: scaleX(var(--p, 0)); pointer-events: none; }
.aff .ico { position: relative; flex: none; width: 46px; height: 46px; border-radius: 15px; display: grid; place-items: center; font-size: 22px; background: var(--gold-soft); }
.aff:nth-of-type(2) .ico { background: #FFF1D6; }
.aff:nth-of-type(3) .ico { background: #E4F5E8; }
.aff span.t { position: relative; }
.aff.done { box-shadow: 0 0 0 2px var(--gold-2), 0 6px 22px rgba(244,177,66,.35); }
.aff.done .fill { transform: scaleX(1); }
.aff.done .ico::after { content: '✓'; position: absolute; right: -4px; top: -4px; width: 20px; height: 20px; border-radius: 50%; background: var(--gold); color: #fff; font-size: 12px; display: grid; place-items: center; font-weight: 900; }

.quote-card { border-radius: 24px; padding: 22px 20px; background: linear-gradient(160deg, #EFE9FF, #E2D9FB); text-align: center; }
.quote-card q { quotes: '“' '”'; font-family: var(--hand); font-size: calc(27px * var(--ts)); line-height: 1.15; color: #4A3D96; display: block; }
.quote-card .author { margin-top: 10px; font-size: 12px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--ink-3); font-weight: 800; }
.closing { text-align: center; margin-top: 16px; font-weight: 700; color: var(--ink-2); line-height: 1.5; }
.closing b { display: block; font-family: var(--serif); font-size: calc(22px * var(--ts)); color: var(--ink); margin-top: 4px; }

/* mood stars */
.moods { display: flex; justify-content: space-between; gap: 4px; margin: 10px 0 12px; }
.mood { flex: 1; border: 0; background: none; display: flex; flex-direction: column; align-items: center; gap: 4px; font-weight: 700; font-size: calc(13px * var(--ts)); color: var(--ink-2); }
.mood { min-width: 0; text-align: center; line-height: 1.1; }
.mood .bubble { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; transition: transform .2s, box-shadow .2s; }
.mood svg { width: 42px; height: 42px; overflow: visible; }
.mood:active .bubble, .mood.sel .bubble { transform: scale(1.12); box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--gold-2); }
.note-line { display: flex; gap: 12px; align-items: center; padding: 14px 16px; border-radius: 22px; background: rgba(240,234,255,.7); font-family: var(--hand); font-size: calc(21px * var(--ts)); color: var(--ink-2); line-height: 1.1; }

/* gratitudes */
.grat-list { list-style: none; margin: 12px 0 0; padding: 0; }
.grat-list li { display: flex; gap: 10px; align-items: center; padding: 10px 4px; border-bottom: 1px dashed #E6DFF4; font-weight: 600; animation: stepIn .4s ease; }
.grat-list li::before { content: '★'; color: var(--gold); font-size: 18px; }
.grat-row { display: flex; gap: 8px; }
.grat-row .field { min-height: 52px; height: 52px; resize: none; border-radius: 26px; padding: 13px 18px; }
.grat-row .btn { flex: 0 0 auto; padding: 0 18px; }
.soft-warn { margin-top: 10px; padding: 12px 14px; border-radius: 16px; background: #FFF4DF; color: #8A5A00; font-size: 14px; line-height: 1.4; }

/* orbs that become stars */
.orb {
  position: absolute; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, #FFFBEA 0%, #FFE59A 35%, rgba(255,205,110,.55) 60%, rgba(255,200,100,0) 72%);
  display: grid; place-items: center; color: #F59E2A; font-size: 17px;
  filter: drop-shadow(0 0 12px rgba(255, 210, 120, .9));
  will-change: transform;
}
.orb::after { content: '♥'; }
.orb.star::after { content: ''; }
.orb.star { background: radial-gradient(circle, #fff 0%, #FFF0B8 18%, rgba(255,214,120,.5) 40%, rgba(255,214,120,0) 70%); }
.trail { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: #FFF0B8; box-shadow: 0 0 8px #FFD27A; pointer-events: none; }
.falling-star { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: #fff; box-shadow: 0 0 20px 8px rgba(255, 230, 160, .9); }
.flash { position: absolute; inset: 0; background: radial-gradient(circle at 50% 55%, rgba(255,246,220,.95), rgba(255,246,220,0) 60%); opacity: 0; pointer-events: none; }

/* well-done card */
.done-card { position: absolute; left: 16px; right: 16px; bottom: calc(24px + var(--sab)); border-radius: 28px; padding: 18px; background: rgba(60, 50, 120, .55); border: 1px solid rgba(255,255,255,.25); backdrop-filter: blur(14px); color: #FFF7EA; animation: sheetIn .6s cubic-bezier(.2,.8,.2,1); box-shadow: 0 10px 40px rgba(10,5,40,.35); }
.done-card h2 { margin: 0 0 4px; font-family: var(--serif); font-size: calc(34px * var(--ts)); text-align: center; color: #fff; }
.done-card .caps { text-align: center; letter-spacing: 2.5px; font-size: 12px; text-transform: uppercase; opacity: .9; }
.done-card ul { list-style: none; padding: 12px 6px 4px; margin: 0; }
.done-card li { padding: 4px 0; font-size: calc(16px * var(--ts)); }
.done-card li::before { content: '★ '; color: var(--gold-2); }
.done-card .card-quote { color: #F3EAFF; border-color: rgba(255,255,255,.18); justify-content: center; text-align: center; }
.done-card .row { display: flex; gap: 10px; margin-top: 12px; }

/* ---------- pages ---------- */
.page { position: absolute; inset: 0; padding: calc(84px + var(--sat)) 16px calc(100px + var(--sab)); overflow-y: auto; animation: fadeIn .45s ease; }
@keyframes fadeIn { from { opacity: 0; } }
.page-title { font-family: var(--serif); font-weight: 600; font-size: calc(32px * var(--ts)); color: #fff; text-shadow: 0 2px 14px rgba(42,35,102,.4); margin: 70px 120px 6px 4px; line-height: 1.05; }
.page-sub { color: #fff; margin: 0 120px 14px 4px; text-shadow: 0 1px 10px rgba(42,35,102,.5); font-size: 14.5px; }
.page .card { margin-bottom: 12px; }
.seg { display: flex; background: rgba(255,250,245,.85); border-radius: 999px; padding: 4px; margin-bottom: 12px; box-shadow: var(--shadow); }
.seg button { flex: 1; border: 0; background: none; padding: 9px 4px; border-radius: 999px; font-weight: 800; font-size: 13.5px; color: var(--ink-3); }
.seg button.on { background: var(--gold); color: #fff; box-shadow: 0 3px 10px rgba(244,177,66,.4); }
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.cal-head b { font-family: var(--serif); font-size: 19px; text-transform: capitalize; }
.cal-head button { border: 0; background: #F2EDFA; width: 34px; height: 34px; border-radius: 50%; }
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; }
.cal .wd { font-size: 11px; font-weight: 800; color: var(--ink-3); padding: 4px 0; }
.cal button { border: 0; background: none; aspect-ratio: 1; border-radius: 12px; font-weight: 700; font-size: 14px; color: var(--ink-2); position: relative; }
.cal button.has { background: #FFF3D6; color: var(--ink); }
.cal button.has.night { background: linear-gradient(160deg, #FFF3D6, #E7DEFF); }
.cal button.today { box-shadow: inset 0 0 0 2px var(--gold); }
.cal button.sel { background: var(--ink); color: #fff; }
.cal button .mk { position: absolute; bottom: 2px; left: 0; right: 0; font-size: 9px; line-height: 1; }
.entry h4 { margin: 14px 0 4px; font-size: 11.5px; letter-spacing: 2px; text-transform: uppercase; color: var(--ink-3); }
.entry p { margin: 0; line-height: 1.45; }
.entry .q { font-family: var(--hand); font-size: 20px; color: var(--ink-2); }
.notes-list .note { padding: 12px 0; border-bottom: 1px dashed #E6DFF4; }
.notes-list .note small { color: var(--ink-3); font-weight: 700; }
.notes-list .note p { margin: 4px 0 0; white-space: pre-wrap; line-height: 1.45; }
.opts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0; }
.opts button { border: 1.5px solid #E6DFF4; background: #fff; border-radius: 16px; padding: 11px 8px; font-weight: 700; color: var(--ink-2); }
.opts button.on { border-color: var(--gold); background: var(--gold-soft); color: var(--ink); }
.capsule-item { display: flex; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px dashed #E6DFF4; }
.capsule-item .jar { font-size: 28px; }

/* you page */
.week { display: flex; justify-content: space-between; margin: 12px 0 6px; }
.week div { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 11px; font-weight: 800; color: var(--ink-3); }
.week .st { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: #EEEAF6; color: #C9C2DE; font-size: 17px; }
.week .st.on { background: radial-gradient(circle at 40% 35%, #FFE7A6, #F4B142); color: #fff; box-shadow: 0 3px 10px rgba(244,177,66,.45); }
.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 8px; }
.stat { background: #fff; border-radius: 18px; padding: 12px 14px; }
.stat b { font-family: var(--serif); font-size: 28px; display: block; }
.stat span { color: var(--ink-3); font-weight: 700; font-size: 13px; }
.bars .bar { display: flex; align-items: center; gap: 8px; margin: 6px 0; font-size: 13.5px; font-weight: 700; color: var(--ink-2); }
.bars .bar i { height: 10px; border-radius: 6px; background: linear-gradient(90deg, var(--gold-2), var(--gold)); display: block; }
.bars .bar span { width: 86px; }
.setting { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid #F0EBF8; font-weight: 700; color: var(--ink-2); }
.setting:last-child { border-bottom: 0; }
.toggle { position: relative; width: 50px; height: 30px; border-radius: 15px; border: 0; background: #E2DCF0; flex: none; transition: background .2s; }
.toggle::after { content: ''; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 2px 5px rgba(0,0,0,.15); transition: transform .2s; }
.toggle.on { background: var(--gold); }
.toggle.on::after { transform: translateX(20px); }
.select-row { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.select-row button { border: 1.5px solid #E6DFF4; background: #fff; border-radius: 999px; padding: 6px 11px; font-weight: 700; font-size: 13px; color: var(--ink-2); }
.select-row button.on { border-color: var(--gold); background: var(--gold-soft); color: var(--ink); }
input[type=range] { width: 100%; accent-color: var(--gold); }
.linkish { border: 0; background: #F2EDFA; border-radius: 14px; padding: 11px 14px; font-weight: 700; color: var(--ink-2); width: 100%; text-align: left; margin-top: 8px; }
.linkish.danger { color: #B04545; background: #FCEDEC; }
.credit { text-align: center; color: #fff; font-size: 12.5px; opacity: .85; margin: 14px 0; text-shadow: 0 1px 8px rgba(42,35,102,.6); }

/* painted moments of the Companion */
.tile-art { width: 54px; height: 54px; object-fit: contain; filter: drop-shadow(0 2px 4px rgba(42,35,102,.25)); }
.done-art { display: block; width: 92px; height: 104px; object-fit: contain; margin: -64px auto 2px; filter: drop-shadow(0 6px 16px rgba(255,214,140,.55)); }
.art-head { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.art-head img { flex: none; width: 64px; height: 76px; object-fit: contain; filter: drop-shadow(0 4px 8px rgba(42,35,102,.2)); }
.art-head .h2 { margin: 0; }
.uni-empty img { display: block; width: 110px; height: 150px; object-fit: contain; margin-bottom: 8px; filter: drop-shadow(0 6px 16px rgba(255,214,140,.4)); }

/* weekly summary */
.week-page .page-title, .week-page .page-sub { margin-right: 0; }
.wk-nav { display: flex; align-items: center; gap: 10px; margin: 64px 112px 12px 0; }
.wk-nav > div { flex: 1; min-width: 0; text-align: center; }
.wk-nav button { flex: none; width: 38px; height: 38px; border-radius: 50%; border: 0; background: rgba(255,250,245,.85); color: var(--ink); font-size: 20px; box-shadow: var(--shadow); }
.wk-nav button:disabled { opacity: .35; }
.wk-hero { display: flex; align-items: center; gap: 14px; }
.wk-art { flex: none; width: 96px; height: 110px; object-fit: contain; filter: drop-shadow(0 6px 12px rgba(42,35,102,.25)); }
.wk-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin: 12px 0 4px; }
.wk-day { display: flex; flex-direction: column; align-items: center; gap: 2px; color: var(--ink-3); font-size: 11px; }
.wk-day b { font-size: 12px; } .wk-day small { font-size: 10px; }
.wk-mood { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: #EEEAF6; color: #C9C2DE; font-size: 16px; }
.wk-mood svg { width: 30px; height: 30px; overflow: visible; }
.wk-day.on .wk-mood { box-shadow: 0 0 0 2px var(--gold-2); color: var(--gold); }
.wk-day.future { opacity: .4; }
.wk-tiles { grid-template-columns: repeat(2, 1fr); }
.wk-tiles .stat { background: #F7F3FC; }
.wk-sky { width: 100%; display: block; border-radius: 18px; margin-top: 10px; }

/* universe overlay */
.uni-head { position: absolute; top: calc(78px + var(--sat)); left: 18px; right: 18px; color: #fff; pointer-events: none; }
.uni-head h2 { font-family: var(--serif); font-weight: 600; font-size: calc(28px * var(--ts)); margin: 0; }
.uni-head p { margin: 4px 0 0; opacity: .85; font-size: 14px; }
.uni-tools { position: absolute; right: 16px; bottom: calc(96px + var(--sab)); display: flex; flex-direction: column; gap: 8px; }
.uni-tools button { width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255,255,255,.16); color: #fff; font-size: 18px; backdrop-filter: blur(6px); }
.star-card { position: absolute; left: 140px; right: 16px; bottom: calc(96px + var(--sab)); border-radius: 22px; padding: 14px 16px; background: rgba(255,250,245,.94); animation: stepIn .35s ease; }
.star-card .when { font-size: 11.5px; letter-spacing: 2px; text-transform: uppercase; color: var(--ink-3); font-weight: 800; }
.star-card p { margin: 6px 0 0; font-family: var(--hand); font-size: calc(24px * var(--ts)); line-height: 1.1; color: var(--ink); }
.uni-empty { position: absolute; left: 150px; right: 18px; bottom: calc(110px + var(--sab)); color: #F3EEFF; font-family: var(--hand); font-size: 22px; line-height: 1.15; }

/* overlay modal */
#overlay { position: absolute; inset: 0; z-index: 9; background: rgba(30, 22, 80, .35); display: flex; align-items: flex-end; padding: 16px; padding-bottom: calc(16px + var(--sab)); animation: fadeIn .3s; }
#overlay[hidden] { display: none; }
#overlay .card { width: 100%; animation: sheetIn .5s cubic-bezier(.2,.8,.2,1); max-height: 70%; overflow-y: auto; }
.onb { position: absolute; left: 16px; right: 16px; bottom: calc(26px + var(--sab)); }
.onb .card { animation: sheetIn .55s cubic-bezier(.2,.8,.2,1); }
.lang-pick { display: flex; gap: 12px; }
.lang-pick button { flex: 1; border: 0; border-radius: 22px; padding: 18px 10px; background: #fff; font-family: var(--serif); font-size: 22px; font-weight: 600; color: var(--ink); box-shadow: 0 6px 18px rgba(42,35,102,.15); position: relative; }
.lang-pick button::after { content: '★'; display: block; color: var(--gold); font-size: 18px; }
.lang-pick button.on { box-shadow: 0 0 0 3px var(--gold), 0 6px 18px rgba(244,177,66,.3); }

#toast { position: absolute; z-index: 10; left: 50%; top: 18px; transform: translate(-50%, -80px); background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 999px; font-weight: 700; font-size: 14px; transition: transform .35s; white-space: nowrap; }
#toast.show { transform: translate(-50%, 0); }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* shorter phone screens and in-app viewers */
@media (max-height: 800px) {
  .sign { bottom: 56%; transform: rotate(-3deg) scale(.8); transform-origin: bottom left; }
  .hand-note { width: 112px; font-size: calc(19px * var(--ts)); right: 12px; top: 84px; }
}
@media (max-height: 700px) {
  .greeting h1 { font-size: calc(36px * var(--ts)); }
  #stage { width: min(48vw, 190px); }
  .sheet { top: 250px; }
  .mode-ritual #stage { width: 128px; top: 84px; }
  .hand-note { font-size: 19px; top: 84px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .2s !important; }
}
.rm *, .rm *::before, .rm *::after { animation-duration: .01ms !important; }
.rm #zzz i { animation: none; opacity: 1; position: static; }

/* ---------- account: sign in with a code ---------- */
#overlay .card.login { max-height: 86%; }
.login .art-head { margin-bottom: 12px; }
.login .field.code { min-height: 64px; text-align: center; font-size: 28px; font-weight: 800; letter-spacing: .35em; padding-left: .35em; }
.login .btn.google { background: #fff; color: var(--ink-2); border: 1.5px solid #E2DAF2; }
.login .linkish { flex: 1; text-align: center; }
.login button[disabled] { opacity: .6; }