/* Sleepy Pines — calm, nature-based, low contrast at night. One self-hosted font. */
@font-face { font-family: 'Nunito'; font-style: normal; font-weight: 300 900; font-display: swap; src: url(/fonts/nunito.woff2) format('woff2'); }

:root {
  --sky1: #1f3140; --sky2: #2f4a4f; --sky3: #55705f;
  --ridge3: #34504b; --ridge2: #23383a; --ridge1: #142426;
  --ink: #eef2e6; --muted: #b6c5b4; --card: rgba(18, 30, 30, 0.58); --card-line: rgba(220, 235, 210, 0.10);
  --accent: #9cc7a4; --accent-ink: #12221c; --warm: #e8c48a; --moon: #f3e6c4;
  --radius: 20px;
  --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px);
  color-scheme: dark;
}
body.sleepy {
  --sky1: #0b1215; --sky2: #121c1f; --sky3: #1d2a26;
  --ridge3: #172422; --ridge2: #101a1a; --ridge1: #0a1112;
  --ink: #e7dcc6; --muted: #a49a86; --card: rgba(12, 16, 16, 0.66); --card-line: rgba(230, 210, 170, 0.08);
  --accent: #c9a46a; --accent-ink: #1d1508; --moon: #e9d6a8;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; min-height: 100%; }
body { font-family: 'Nunito', system-ui, sans-serif; color: var(--ink); background: var(--sky1); overflow-x: hidden; transition: background .8s ease; }
button { font: inherit; color: inherit; cursor: pointer; }
[hidden] { display: none !important; }

/* ===== the scene ===== */
/* the scene is as tall as the screen with the browser's bars hidden (100lvh), so a phone's address bar sliding
   in and out just covers its bottom edge instead of resizing it */
.scene { position: fixed; top: 0; left: 0; right: 0; height: 100vh; height: 100lvh; z-index: 0; pointer-events: none; overflow: hidden; background: linear-gradient(180deg, var(--sky1) 0%, var(--sky2) 50%, var(--sky3) 64%, #0c1719 64.4%, #08100f 100%); transition: background .8s ease; }
.scene canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
html.no-webgl #sky { display: none; }
/* the opening screen: tonight's moon draws itself (a dotted outline of the whole disc, turning slightly; then the lit
   part as one pencil line), fills in while the lines go, and when the app is ready the night behind it fades while the
   moon glides up into the sky and becomes the moon over the lake (Max, Oct 14). --bt scales the timeline: 1 at
   start-up, about half (.quick) for the moon button's walk back to the list. */
.boot { position: fixed; inset: 0; z-index: 2147483000; display: flex; align-items: center; justify-content: center; --bt: 1; }
.boot.quick { --bt: .55; }
/* the moon button's quick walk back: the moon is there already, finished (no drawing) */
.boot.instant .bm-dots, .boot.instant .bm-reveal, .boot.instant .bm-line, .boot.instant .bm-lines-out,
.boot.instant .bm-lit, .boot.instant .bm-dark, .boot.instant .bm-halo { animation: none; }
.boot.instant .bm-line, .boot.instant .bm-lines-out { opacity: 0; }
.boot.instant .bm-lit, .boot.instant .bm-dark, .boot.instant .bm-halo { opacity: 1; }
.boot.instant .boot-mark { transition-duration: .25s; }
.boot-bg { position: absolute; inset: 0; background: radial-gradient(ellipse 90% 60% at 50% 55%, #121d24 0%, #0a1117 60%, #06090d 100%); transition: opacity 1.8s ease; }
.boot.out .boot-bg { opacity: 0; }
.boot.out { pointer-events: none; }
/* the page waits behind the opening screen and comes in after the camera has pulled back (Oct 14) */
body.intro .hero, body.intro .app, body.intro .top { opacity: 0; pointer-events: none; }
.hero, .app, .top { transition: opacity 1.2s ease; }
.boot-mark { position: relative; width: min(35.7vw, 139px); aspect-ratio: 1; transition: opacity .6s ease; will-change: transform, opacity; }
.boot.leaving .boot-mark { opacity: 0; }
.boot-mark svg { width: 100%; height: 100%; display: block; overflow: visible; }
.bm-dots { transform-box: view-box; transform-origin: 50% 50%; animation: bm-spin 40s linear infinite; }
.bm-dots circle { opacity: .5; }
.bm-reveal { stroke-dasharray: 1 2; stroke-dashoffset: 1.5; animation: bm-draw calc(var(--bt) * .9s) cubic-bezier(.45, .1, .3, 1) calc(var(--bt) * .15s) forwards; }
.bm-line { stroke-dasharray: 1 2; stroke-dashoffset: 1.5; animation: bm-draw calc(var(--bt) * .8s) cubic-bezier(.45, .1, .3, 1) calc(var(--bt) * .95s) forwards, bm-go calc(var(--bt) * .7s) ease calc(var(--bt) * 2.05s) forwards; }
.bm-lines-out { animation: bm-go calc(var(--bt) * .7s) ease calc(var(--bt) * 2.05s) forwards; }
.bm-lit, .bm-dark { opacity: 0; animation: bm-in calc(var(--bt) * .8s) ease calc(var(--bt) * 1.6s) forwards; }
.bm-halo { opacity: 0; animation: bm-in calc(var(--bt) * 1s) ease calc(var(--bt) * 1.8s) forwards; }
@keyframes bm-draw { to { stroke-dashoffset: 0; } }
@keyframes bm-go { to { opacity: 0; } }
@keyframes bm-in { to { opacity: 1; } }
@keyframes bm-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .bm-dots { animation: none; } .bm-reveal, .bm-line { stroke-dashoffset: 0; animation: none; opacity: 0; } .bm-lines-out { opacity: 0; animation: none; }
  .bm-lit, .bm-dark, .bm-halo { animation: bm-in .6s ease forwards; }
}


/* ===== hero ===== */
.hero { position: relative; z-index: 1; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; padding: calc(var(--safe-top) + 14px) 16px calc(var(--safe-bottom) + 18px); max-width: 1100px; margin: 0 auto; pointer-events: none; }
.hero > * { pointer-events: auto; }
.hero-copy { margin-top: clamp(16px, 9vh, 110px); max-width: 640px; pointer-events: none !important; }
.title { margin: 0; font-weight: 800; font-size: clamp(46px, 11vw, 104px); line-height: .95; letter-spacing: -.015em; color: #f4ecd6; text-shadow: 0 0 40px rgba(243, 230, 196, .25), 0 2px 18px rgba(0, 0, 0, .35); }
/* the wordmark (brand.js): lettering drawn in code */
.title.has-wordmark { width: min(780px, 92vw); margin-left: -1.2%; font-size: 0; text-shadow: none; pointer-events: auto; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.title svg { display: block; width: 100%; height: auto; overflow: visible; }
.wm-stack { position: relative; display: block; }
.wm-stack .wm-stars { position: absolute; inset: 0; }
/* the opening: stars scattered over the sky drift in, join, and the name is written over them */
.title .sg { transform-box: fill-box; transform-origin: center; animation: wm-gather 4.8s cubic-bezier(.45, 0, .2, 1) both; }
.title:not(.wm-done) .ln { stroke-dasharray: 1 1; stroke-dashoffset: 1; animation: wm-draw 1.1s ease forwards; }
.title:not(.wm-done) .ink { stroke-dasharray: 1 1; stroke-dashoffset: 1; animation: wm-draw 1.1s cubic-bezier(.4, 0, .2, 1) forwards; }
.title:not(.wm-done) .dot { opacity: 0; animation: fadein 1s ease 6.4s forwards; }
.wm-default:not(.wm-done) .wm-stars { animation: wm-out 1.6s ease 6.6s forwards; }
.wm-default:not(.wm-done) .wm-glow { opacity: 0; animation: wm-glow 2s ease 6.2s forwards; }
@keyframes wm-gather { 0% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(.75); } 14% { opacity: .85; transform: translate(var(--dx), var(--dy)) scale(.75); } 30% { transform: translate(var(--dx), var(--dy)) scale(.75); } 100% { opacity: 1; transform: none; } }
/* afterwards: a tapped letter turns into its stars for a while */
.wm-done .wm-stars .lt { opacity: 0; transition: opacity 1.1s ease; }
.wm-done .wm-stars .lt.lit { opacity: 1; }
.wm-done .wm-stars .lt.lit circle { animation: wm-twinkle 2.6s ease-in-out infinite; }
.wm-done .wm-calm .lt { transition: opacity 1.1s ease; }
.wm-done .wm-calm .lt.lit { opacity: 0; }
.wm-starlight.wm .s { animation: wm-star .7s ease-out forwards, wm-twinkle 5s ease-in-out 2.5s infinite; }
.title .s { opacity: 0; transform-box: fill-box; transform-origin: center; animation: wm-star .7s ease-out forwards; }
.title .ln { stroke-dasharray: 1 1; stroke-dashoffset: 1; animation: wm-draw .9s ease forwards; }
@keyframes wm-draw { to { stroke-dashoffset: 0; } }
@keyframes wm-star { 0% { opacity: 0; transform: scale(.2); } 60% { opacity: 1; transform: scale(1.5); } 100% { opacity: 1; transform: scale(1); } }
@keyframes wm-twinkle { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
@keyframes wm-glow { to { opacity: .28; } }
@keyframes wm-out { to { opacity: 0; } }
/* the No ads line: the tagline's second half is a soft leaf pill you can tap (Max, Oct 13) */
.tag-dot { font-style: normal; margin: 0 .7em; }
.tag-link { pointer-events: auto; font: inherit; letter-spacing: .12em; color: rgba(214, 236, 214, .82); background: rgba(156, 199, 164, .08); border: 1px solid rgba(156, 199, 164, .24); border-radius: 999px; padding: 4px 10px 4px 7px; display: inline-flex; align-items: center; gap: 7px; cursor: pointer; vertical-align: middle; transition: background .3s ease, border-color .3s ease, color .3s ease; -webkit-tap-highlight-color: transparent; }
.tag-link:hover, .tag-link:focus-visible { background: rgba(156, 199, 164, .16); border-color: rgba(156, 199, 164, .45); color: #e8f3e4; outline: none; }
.tag-link:active { transform: scale(.97); }
.tag-leaf { width: 12px; height: 12px; flex: none; background: radial-gradient(circle at 30% 30%, #c8ebc2, #6fa67a); border-radius: 0 50% 0 50%; box-shadow: 0 0 8px rgba(156, 199, 164, .35); }
.tag-more { font-size: 15px; line-height: 1; margin-left: -1px; opacity: .7; }
.tag { margin: 0 0 10px; font-size: 13px; line-height: 1.5; letter-spacing: .16em; color: rgba(238, 242, 230, .4); font-weight: 600; opacity: 0; animation: fadein 3s ease 7s forwards; pointer-events: none !important; }
@keyframes fadein { to { opacity: 1; } }
.hero-cta { margin-top: auto; margin-bottom: 5vh; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; opacity: 0; animation: fadein 1.6s ease 1.6s forwards; }
.wind { display: flex; align-items: center; gap: 14px; border: 1px solid rgba(250, 238, 205, .22); border-radius: 999px; padding: 12px 26px 12px 12px; background: rgba(14, 24, 26, .38); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); text-align: left; position: relative; box-shadow: 0 10px 40px rgba(0, 0, 0, .35); transition: transform .25s ease, background .3s; }
/* the breathing glow is a fixed halo whose OPACITY breathes (compositor) - an animated box-shadow repainted every frame */
.wind::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: 0 0 46px 4px rgba(243, 230, 196, .16); opacity: 0; animation: breathe-glow 7s ease-in-out infinite; will-change: opacity; }
.wind:hover { transform: translateY(-2px); background: rgba(20, 34, 36, .5); }
.wind:active { transform: scale(.98); }
@keyframes breathe-glow { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }
.wind-moon { width: 48px; height: 48px; border-radius: 50%; flex: none; background: radial-gradient(circle at 38% 36%, #fff8e4, #f0dfb4 60%, #d8c08a); box-shadow: inset -12px -5px 0 0 rgba(20, 32, 36, .82), 0 0 22px rgba(243, 230, 196, .35); }
.wind-text { display: flex; flex-direction: column; }
.wind-text b { font-size: 21px; font-weight: 800; letter-spacing: .01em; }
.wind-text small { font-size: 14px; color: var(--muted); font-weight: 700; }
.wind-adjust { border: 0; background: none; color: rgba(238, 242, 230, .7); font-weight: 800; font-size: 14px; padding: 10px 6px; text-decoration: underline; text-decoration-color: rgba(238, 242, 230, .3); text-underline-offset: 4px; }
.hint { margin: 0 0 6px; font-size: 13px; font-weight: 700; letter-spacing: .06em; color: rgba(238, 242, 230, .55); opacity: 0; animation: fadein 2s ease 3s forwards; transition: opacity 1.2s ease; pointer-events: none !important; }
.hint.gone { opacity: 0 !important; animation: none; }
.scroll-cue { align-self: center; display: flex; flex-direction: column; align-items: center; gap: 4px; color: rgba(238, 242, 230, .6); text-decoration: none; font-weight: 800; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; }
.scroll-cue i { width: 12px; height: 12px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); animation: bob 2.8s ease-in-out infinite; }
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(45deg); } 50% { transform: translateY(5px) rotate(45deg); } }
@media (min-width: 760px) { .hero { padding-left: 28px; padding-right: 28px; } .hero-cta { margin-bottom: 6vh; } }
@media (prefers-reduced-motion: reduce) { .tag, .hero-cta, .hint { animation-duration: .01s; animation-delay: 0s; } .wind::after, .scroll-cue i { animation: none; } }

/* ===== layout ===== */
.app { position: relative; z-index: 1; max-width: 1020px; margin: 0 auto; padding: 8px 16px calc(var(--safe-bottom) + 40px); }
.top { display: flex; align-items: center; justify-content: space-between; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font-weight: 800; font-size: 18px; letter-spacing: .02em; opacity: .9; }
.brand svg { width: 38px; height: 38px; filter: drop-shadow(0 0 10px rgba(169, 209, 176, .25)); }
.chip { display: flex; align-items: center; gap: 8px; border: 1px solid var(--card-line); background: var(--card); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-radius: 999px; padding: 7px 14px 7px 8px; font-weight: 700; }
.emblem { display: inline-block; width: 24px; height: 24px; }
.emblem svg { width: 100%; height: 100%; display: block; }
.emblem.big { width: 54px; height: 54px; flex: none; }
.emblem.pending { opacity: .55; }

/* ===== sleepy card ===== */
.sleepy-card { background: var(--card); border: 1px solid var(--card-line); border-radius: var(--radius); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); margin-bottom: 22px; overflow: hidden; }
.sleepy-toggle { display: flex; align-items: center; gap: 14px; width: 100%; border: 0; background: none; padding: 16px 18px; text-align: left; }
.moon-icon { width: 38px; height: 38px; border-radius: 50%; background: var(--moon); box-shadow: inset -9px -3px 0 0 var(--sky2), 0 0 18px rgba(243, 230, 196, .25); flex: none; transition: all .6s ease; }
body.sleepy .moon-icon { box-shadow: inset -12px -4px 0 0 var(--sky1), 0 0 26px rgba(233, 214, 168, .35); }
.sleepy-text { flex: 1; display: flex; flex-direction: column; }
.sleepy-text b { font-size: 20px; font-weight: 800; }
.sleepy-text small { color: var(--muted); font-size: 14px; }
.switch { width: 54px; height: 32px; border-radius: 16px; background: rgba(255, 255, 255, .14); position: relative; transition: background .3s; flex: none; }
.switch i { position: absolute; top: 4px; left: 4px; width: 24px; height: 24px; border-radius: 50%; background: var(--ink); transition: transform .3s cubic-bezier(.3, .9, .3, 1.2); }
.sleepy-toggle[aria-checked="true"] .switch { background: var(--accent); }
.sleepy-toggle[aria-checked="true"] .switch i { transform: translateX(22px); background: var(--accent-ink); }
.sleepy-tools { padding: 0 18px 16px; display: grid; gap: 12px; }
.tool-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.tool-label { width: 92px; color: var(--muted); font-size: 14px; font-weight: 700; }
.seg { display: inline-flex; background: rgba(255, 255, 255, .07); border-radius: 12px; padding: 3px; gap: 2px; flex-wrap: wrap; }
.seg button { border: 0; background: none; padding: 6px 11px; border-radius: 9px; font-weight: 700; font-size: 14px; color: var(--muted); }
.seg button.on { background: var(--accent); color: var(--accent-ink); }
.slider-row input { flex: 1; min-width: 140px; }
input[type="range"] { accent-color: var(--accent); height: 28px; }
.timer-left { color: var(--warm); font-weight: 700; font-size: 14px; }

/* ===== shelves ===== */
.shelf { margin-bottom: 26px; }
.shelf h2 { display: flex; align-items: center; gap: 12px; font-size: 14px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 0 0 14px 4px; }
.shelf h2::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, var(--card-line), transparent); }
.shelf { scroll-margin-top: 20px; }
.row { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x mandatory; }
.row .card { width: 150px; flex: none; scroll-snap-align: start; }
.empty { color: var(--muted); margin: 0 4px; font-size: 15px; }
.grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
@media (min-width: 640px) { .grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .grid { grid-template-columns: repeat(4, 1fr); } }
.card { --rx: 0deg; --ry: 0deg; --lift: 0px; position: relative; border-radius: var(--radius); background: var(--card); border: 1px solid var(--card-line); overflow: hidden; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transform: perspective(700px) translateY(var(--lift)) rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .5s cubic-bezier(.2, .8, .2, 1), box-shadow .5s ease, border-color .5s ease; animation: float 7s ease-in-out infinite; animation-delay: var(--float-delay, 0s); box-shadow: 0 10px 30px rgba(0, 0, 0, .28); }
html.scrolling .card, html.scrolling .scroll-cue i { animation-play-state: paused; }
.card:hover { --lift: -4px; border-color: color-mix(in srgb, var(--glow, #9cc7a4) 45%, transparent); box-shadow: 0 16px 40px rgba(0, 0, 0, .35), 0 0 34px -6px var(--glow, #9cc7a4); }
.card.tilting { transition: transform .12s linear, box-shadow .5s ease, border-color .5s ease; }
.card:active { --lift: 1px; }
.card .sheen { position: absolute; inset: 0; pointer-events: none; z-index: 1; background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 0%), rgba(255, 250, 230, .14), transparent 60%); opacity: 0; transition: opacity .4s ease; }
.card:hover .sheen { opacity: 1; }
@keyframes float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -3px; } }
@media (prefers-reduced-motion: reduce) { .card { animation: none; } }
.card .open { display: block; width: 100%; border: 0; background: none; padding: 0; text-align: left; }
.thumb { aspect-ratio: 3 / 4; width: 100%; background-size: cover; background-position: center top; position: relative; transition: transform .8s cubic-bezier(.2, .8, .2, 1); }
.card:hover .thumb { transform: scale(1.04); }
.thumb::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(10, 16, 16, .55)); }
body.sleepy .thumb { filter: saturate(.75) brightness(.8); }
.card .meta { padding: 10px 12px 12px; }
.card .meta b { display: block; font-size: 17px; font-weight: 800; }
.card .meta small { display: block; color: var(--muted); font-size: 13px; line-height: 1.3; margin-top: 2px; }
.card .acts { position: absolute; top: 8px; right: 8px; display: flex; flex-direction: column; gap: 6px; z-index: 2; }
.icon-btn { width: 36px; height: 36px; border-radius: 50%; border: 0; background: rgba(10, 18, 18, .55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; padding: 0; }
.icon-btn svg { width: 20px; height: 20px; }
.icon-btn.fav-on svg path { fill: #e89a8a; stroke: #e89a8a; }
.icon-btn.dl-on { background: rgba(156, 199, 164, .85); }
.icon-btn .ring { position: absolute; }

/* ===== link cards ===== */
.links { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 18px; }
@media (min-width: 640px) { .links { grid-template-columns: repeat(4, 1fr); } }
.link-card { display: flex; align-items: center; gap: 10px; padding: 16px; border-radius: var(--radius); background: var(--card); border: 1px solid var(--card-line); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); text-align: left; font-size: 16px; }
.link-card b { font-weight: 800; }
.link-card span { width: 26px; height: 26px; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 900; }
.leaf { background: radial-gradient(circle at 30% 30%, #b9e0b4, #6fa67a); border-radius: 0 50% 0 50% !important; }
.plus { background: var(--accent); color: var(--accent-ink); }
.dl, .box { background: rgba(255, 255, 255, .15); }
.noads { border-color: rgba(156, 199, 164, .35); }
/* the very bottom: the two promises, as pills you can tap (Max, Oct 13), and the version under them */
.foot { display: flex; flex-direction: column; align-items: center; gap: 12px; color: var(--muted); font-size: 13px; padding: 26px 4px 12px; }
.promises { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; font-size: 13px; letter-spacing: .12em; font-weight: 600; }
.foot .ver { font-size: 12px; opacity: .6; cursor: pointer; padding: 8px 12px; margin: -8px -12px; border-radius: 10px; -webkit-tap-highlight-color: transparent; }
.foot .ver:hover, .foot .ver:focus-visible { opacity: .9; }
.foot .ver.checking { opacity: .85; }
.tag-ember { width: 11px; height: 11px; flex: none; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: radial-gradient(circle at 35% 35%, #ffd9a0, #e8935a); box-shadow: 0 0 8px rgba(240, 163, 90, .45); }
.promise-list { margin: 0 0 14px; padding-left: 20px; line-height: 1.5; }
.promise-list li { margin-bottom: 6px; }

/* ===== play view ===== */
.play { position: fixed; inset: 0; z-index: 20; background: #000; }
.play iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.fade { position: absolute; inset: 0; pointer-events: none; transition: opacity 1.2s ease; }
.warm, .dimmer { position: fixed; inset: 0; z-index: 45; pointer-events: none; transition: opacity .35s ease; }
.play.resting { visibility: hidden; }
.warm { background: #ff9a3c; mix-blend-mode: multiply; opacity: 0; }
.dimmer { background: #000; opacity: 0; }
.fade { background: #000; opacity: 0; transition: opacity 30s linear; }
.play-bar { position: absolute; top: calc(var(--safe-top) + 8px); left: 8px; right: 8px; display: flex; align-items: center; justify-content: space-between; pointer-events: none; transition: opacity .6s ease; }
.play-bar.faded { opacity: .15; }
.pb { pointer-events: auto; width: 42px; height: 42px; border-radius: 50%; border: 0; background: rgba(10, 18, 18, .55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); color: #eef2e6; font-size: 30px; line-height: 1; display: flex; align-items: center; justify-content: center; padding: 0 0 4px; }
.pb-title { color: rgba(238, 242, 230, .7); font-weight: 800; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; text-shadow: 0 1px 4px rgba(0,0,0,.6); }

/* ===== goodnight ===== */
.goodnight { position: fixed; inset: 0; z-index: 40; background: radial-gradient(ellipse at 50% 40%, rgba(6, 9, 10, .35), rgba(3, 5, 5, .85)); display: flex; align-items: center; justify-content: center; text-align: center; color: #b7aa8e; opacity: 0; animation: fadein 3s ease forwards; }
.goodnight p { margin: -18px 0 26px; color: #8d8370; }
.gn-moon { width: 80px; height: 80px; margin: 0 auto 18px; border-radius: 50%; background: #d8c494; box-shadow: inset -18px -6px 0 0 #0b1113, 0 0 50px rgba(216, 196, 148, .18); animation: breathe-moon 9s ease-in-out infinite; }
@keyframes breathe-moon { 50% { box-shadow: inset -18px -6px 0 0 #0b1113, 0 0 80px rgba(216, 196, 148, .3); } }
.goodnight h2 { font-weight: 300; font-size: 34px; letter-spacing: .1em; margin: 0 0 28px; }

/* ===== sheets ===== */
.veil { position: fixed; inset: 0; z-index: 30; background: rgba(5, 10, 10, .55); }
.sheet { position: fixed; z-index: 31; left: 0; right: 0; bottom: 0; max-height: 88vh; overflow-y: auto; margin: 0 auto; max-width: 560px; background: #1a2828; color: var(--ink); border-radius: 26px 26px 0 0; padding: 10px 22px calc(var(--safe-bottom) + 18px); box-shadow: 0 -12px 40px rgba(0, 0, 0, .45); animation: up .32s cubic-bezier(.2, .9, .3, 1.05); }
body.sleepy .sheet { background: #141a19; }
@keyframes up { from { transform: translateY(100%); } to { transform: none; } }
.grab { position: sticky; top: -10px; z-index: 3; height: 30px; margin: -10px -22px 4px; touch-action: none; cursor: grab; background: inherit; border-radius: 26px 26px 0 0; }
.sheet:has(.grab) { overscroll-behavior: contain; }
.grab::before { content: ''; position: absolute; left: 50%; top: 12px; width: 44px; height: 5px; margin-left: -22px; border-radius: 3px; background: rgba(255, 255, 255, .2); }
.grab:active { cursor: grabbing; }
.sheet h2 { margin: 6px 0 10px; font-size: 26px; font-weight: 800; }
.sheet .fb-note { font-size: 13px; margin: -2px 0 14px; }
.sheet h3 { margin: 20px 0 8px; font-size: 15px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.sheet p { line-height: 1.5; font-size: 16px; margin: 0 0 12px; }
.muted { color: var(--muted); }
/* password fields: an eye to show or hide what you typed (Max, Oct 14) */
.pw { position: relative; display: block; }
.sheet .pw input:not([type="range"]) { width: 100%; padding-right: 48px; box-sizing: border-box; }
.pw-eye { position: absolute; right: 2px; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; display: grid; place-items: center; border: 0; background: none; color: inherit; opacity: .6; cursor: pointer; border-radius: 10px; }
.pw-eye:hover, .pw-eye:focus-visible { opacity: 1; }
.pw-eye svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pw-eye[aria-pressed="true"] .slash { display: none; }
.sheet label { display: flex; flex-direction: column; gap: 6px; font-weight: 700; font-size: 15px; margin-bottom: 12px; }
.opt { font-weight: 400; color: var(--muted); font-size: 13px; }
.sheet input:not([type="range"]), .sheet textarea { font: inherit; font-weight: 600; color: var(--ink); background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .12); border-radius: 12px; padding: 12px; outline: none; }
.sheet input:focus, .sheet textarea:focus { border-color: var(--accent); }
.primary { width: 100%; border: 0; border-radius: 14px; padding: 15px; background: var(--accent); color: var(--accent-ink); font-weight: 800; font-size: 17px; margin-top: 4px; }
.soft { display: block; width: 100%; border: 0; background: none; color: var(--muted); padding: 12px; font-weight: 700; margin-top: 6px; }
.form-msg { min-height: 1.2em; color: var(--warm); font-weight: 700; margin: 10px 0 0; }
.studies { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.studies li { border: 1px solid rgba(255, 255, 255, .08); border-radius: 14px; background: rgba(255, 255, 255, .03); overflow: hidden; }
.study { display: block; width: 100%; text-align: left; font: inherit; color: var(--ink); background: none; border: 0; padding: 12px 14px; cursor: pointer; line-height: 1.4; }
.study b { display: block; font-weight: 700; font-size: 15px; }
.study small { display: block; margin-top: 4px; color: var(--muted); font-size: 13px; font-weight: 700; }
.study[aria-expanded="true"] { background: rgba(255, 255, 255, .04); }
.study-more { padding: 0 14px 12px; font-size: 13.5px; line-height: 1.45; }
.study-more .study-title { margin: 0 0 6px; font-weight: 800; font-size: 14px; color: var(--ink); }
.study-more .study-ref { margin: 0 0 8px; color: var(--muted); font-size: 13px; }
.study-more a { color: var(--accent); font-weight: 800; text-decoration: none; }
.give { background: rgba(255, 255, 255, .05); border-radius: 16px; padding: 14px; margin-bottom: 16px; }
.interval { margin-bottom: 10px; }
.amount { font-size: 34px; font-weight: 900; text-align: center; margin: 4px 0; }
.give input[type="range"] { width: 100%; }
.custom-row { display: flex; align-items: center; gap: 6px; font-weight: 800; margin-top: 6px; }
.custom-row input { flex: 1; }
.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.tier-opt { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 6px 10px; border-radius: 16px; border: 1px solid rgba(240, 190, 140, .18); background: rgba(255, 255, 255, .03); color: inherit; font: inherit; cursor: pointer; transition: border-color .3s ease, background .3s ease, transform .3s ease; }
.tier-opt .emblem { width: 46px; height: 46px; }
.tier-opt b { font-size: 15px; font-weight: 800; }
.tier-opt small { font-size: 13px; color: #c4a888; }
.tier-opt.on { border-color: #f0a35a; background: rgba(240, 163, 90, .14); transform: translateY(-2px); }
.cloud-pitch { font-size: 15px; color: #c4a888; margin-top: -4px !important; }
.cloud-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; margin: 4px 0 14px; border-radius: 16px; background: rgba(240, 163, 90, .08); }
.cloud-row b { display: block; font-size: 16px; }
.cloud-row small { display: block; font-size: 13px; color: #c4a888; margin-top: 2px; }
.cloud-row .seg { flex: none; }
.pay-note { font-size: 14px !important; color: var(--warm); margin: 10px 0 0 !important; }
.me { display: flex; align-items: center; gap: 14px; margin: 8px 0 10px; }
.me h2 { margin: 0; }
.dl-list { list-style: none; padding: 0; margin: 0 0 10px; }
.dl-list li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid rgba(255, 255, 255, .06); }
.dl-list button { border: 0; background: rgba(255, 255, 255, .08); border-radius: 10px; padding: 7px 12px; font-weight: 700; }
.toast { position: fixed; left: 50%; bottom: calc(var(--safe-bottom) + 24px); transform: translateX(-50%); z-index: 50; background: rgba(10, 18, 18, .9); color: var(--ink); padding: 10px 18px; border-radius: 999px; font-weight: 700; }

/* ===== wind down ===== */
.breathe { position: fixed; inset: 0; z-index: 35; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; background: radial-gradient(ellipse at 50% 45%, rgba(4, 8, 9, .15), rgba(3, 6, 6, .7)); opacity: 0; animation: fadein 1.2s ease forwards; }
.breath-ring { width: min(62vw, 300px); aspect-ratio: 1; border-radius: 50%; border: 1.5px solid rgba(243, 230, 196, .35); display: flex; align-items: center; justify-content: center; transform: scale(.55); transition-property: transform, border-color, box-shadow; transition-timing-function: cubic-bezier(.45, 0, .55, 1); box-shadow: 0 0 60px rgba(243, 230, 196, .08), inset 0 0 50px rgba(243, 230, 196, .06); }
.breath-ring.in { transform: scale(1); border-color: rgba(243, 230, 196, .6); box-shadow: 0 0 90px rgba(243, 230, 196, .18), inset 0 0 70px rgba(243, 230, 196, .12); }
.breath-core { width: 26%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 40% 38%, #fff8e4, #e9d6a8); box-shadow: 0 0 40px rgba(243, 230, 196, .45); }
.breath-word { margin: 34px 0 6px; font-size: 28px; font-weight: 300; letter-spacing: .12em; color: #efe4c8; transition: opacity .8s ease; }
.breath-word.swap { opacity: 0; }
.breath-sub { margin: 0; color: rgba(239, 228, 200, .55); font-weight: 700; font-size: 14px; letter-spacing: .06em; }
.breath-skip { position: absolute; bottom: calc(var(--safe-bottom) + 22px); width: auto; padding: 12px 22px; }
.wd-games { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.wd-games button { border: 1px solid rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .06); border-radius: 999px; padding: 8px 14px; font-weight: 700; font-size: 14px; color: var(--muted); }
.wd-games button.on { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.sheet .tool-row { margin-bottom: 12px; }
body.breathing .hero, body.breathing .app, body.goodnight .hero, body.goodnight .app { opacity: 0; pointer-events: none; }
.hero, .app { transition: opacity 1.2s ease; }

/* ===== the campfire: the join button, and a sheet that feels like sitting round one together ===== */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.campfire-btn { contain: layout style; position: relative; width: 52px; height: 52px; border-radius: 50%; border: 1px solid rgba(240, 163, 90, .22); background: radial-gradient(circle at 50% 70%, rgba(240, 150, 70, .2), rgba(14, 20, 22, .45) 70%); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); padding: 0; display: flex; align-items: center; justify-content: center; transition: transform .3s ease, box-shadow .6s ease; box-shadow: 0 0 22px rgba(240, 150, 70, .12); }
.campfire-btn:hover { transform: translateY(-1px); box-shadow: 0 0 30px rgba(240, 150, 70, .28); }
/* the hero campfire as stacked HTML layers (one per moving part) so its animations run on the compositor; on SVG
   parts they cost a style + layout pass every frame (Oct 13 perf pass). Origins: each flame's fill-box bottom centre
   (getBBox, x 38/40); spark rise 2,-11 user units = 1.9px,-10.45px */
.campfire-btn .campfire { position: relative; display: block; width: 38px; height: 38px; }
.campfire-btn .campfire i { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; }
.campfire-btn .campfire svg { width: 100%; height: 100%; display: block; overflow: visible; }
.campfire-btn .emblem { position: absolute; right: -4px; bottom: -4px; width: 20px; height: 20px; }
.campfire-btn.joined { box-shadow: 0 0 30px rgba(240, 150, 70, .3); }
.campfire .cf-glow { opacity: .2; animation: cf-glow 2.4s ease-in-out infinite; will-change: opacity; }
.cf-flames path { transform-box: fill-box; transform-origin: 50% 100%; }
.cf-flames .f1 { animation: cf-flick 1.7s ease-in-out infinite; }
.cf-flames .f2 { animation: cf-flick 1.15s ease-in-out infinite reverse; }
.campfire i.f1 { transform-origin: 20.313px 28.5px; animation: cf-flick 1.7s ease-in-out infinite; will-change: transform; }
.campfire i.f2 { transform-origin: 19.785px 28.5px; animation: cf-flick 1.15s ease-in-out infinite reverse; will-change: transform; }
.spark { opacity: 0; animation: cf-spark 2.6s ease-out infinite; }
.campfire i.spark { animation-name: cf-spark-px; will-change: transform, opacity; }
.spark.s2 { animation-delay: .9s; } .spark.s3 { animation-delay: 1.7s; } .spark.s4 { animation-delay: .4s; } .spark.s5 { animation-delay: 2.1s; }
@keyframes cf-flick { 0%, 100% { transform: scale(1, 1) skewX(0); } 30% { transform: scale(.94, 1.06) skewX(2deg); } 60% { transform: scale(1.04, .95) skewX(-2deg); } }
@keyframes cf-glow { 0%, 100% { opacity: .16; } 50% { opacity: .28; } }
@keyframes cf-spark { 0% { opacity: 0; transform: translate(0, 0); } 15% { opacity: .9; } 100% { opacity: 0; transform: translate(2px, -11px); } }
@keyframes cf-spark-px { 0% { opacity: 0; transform: translate(0, 0); } 15% { opacity: .9; } 100% { opacity: 0; transform: translate(1.9px, -10.45px); } }
@media (prefers-reduced-motion: reduce) { .cf-flames path, .spark, .campfire .cf-glow, .campfire i.f1, .campfire i.f2 { animation: none; } }
.fireside-sheet { background: radial-gradient(ellipse 120% 60% at 50% 0%, #3b2517, #1b120c 55%, #130d09) !important; color: #f4e6d2; }
.fireside-sheet .muted, .fireside-sheet .opt { color: #c4a888; }
.fireside-sheet .primary { background: #f0a35a; color: #2a1608; }
.fireside-sheet .seg button.on { background: #f0a35a; color: #2a1608; }
.fireside-sheet .give { background: rgba(240, 163, 90, .08); }
.fireside-sheet input[type="range"] { accent-color: #f0a35a; }
.fireside-sheet .grab::before { background: rgba(240, 190, 140, .3); }
.fireside { margin: -6px -10px 4px; }
.fireside svg { display: block; width: 100%; height: auto; max-height: 200px; }
.fs-scale { transform: scale(var(--fire, 1)); transform-origin: 50% 100%; transition: transform .6s ease; transform-box: fill-box; }
.fireside .fs-ground { animation: cf-glow-big 2.6s ease-in-out infinite; }
@keyframes cf-glow-big { 0%, 100% { opacity: .85; } 50% { opacity: 1; } }
.fireside .you-ghost { animation: you-wait 2.8s ease-in-out infinite; }
.fireside .you-here { opacity: 0; transition: opacity 1.2s ease; }
.fireside.seated .you-ghost { display: none; }
.fireside.seated .you-here { opacity: 1; }
@keyframes you-wait { 0%, 100% { opacity: .35; } 50% { opacity: .8; } }

/* animations nobody can see are paused (main.js marks them) */
.card.offscreen, .card.offscreen *, .hero.offscreen *, body.playing .app *, body.playing .hero * { animation-play-state: paused !important; }
/* the title and the top bar icons get their own layers (no text in them, so antialiasing is unchanged),
   so the scene animating underneath never makes the browser redraw them (the title glow especially) */
.title svg, .top { will-change: transform; }

/* ===== rainy day ===== */
.rainy-card { margin-top: -12px; }
.cloud-icon { position: relative; width: 38px; height: 38px; flex: none; }
.cloud-icon::before { content: ''; position: absolute; left: 3px; top: 9px; width: 32px; height: 15px; border-radius: 10px; background: #dfe7ee; box-shadow: 9px -7px 0 -1px #dfe7ee, -1px -4px 0 -3px #dfe7ee; }
.cloud-icon i { position: absolute; top: 27px; width: 2px; height: 7px; border-radius: 2px; background: #9fc3dc; transform: rotate(18deg); opacity: .9; }
.cloud-icon i:nth-child(1) { left: 11px; } .cloud-icon i:nth-child(2) { left: 18px; top: 29px; } .cloud-icon i:nth-child(3) { left: 25px; }
body.rainy .cloud-icon i { animation: drip 1.1s linear infinite; }
body.rainy .cloud-icon i:nth-child(2) { animation-delay: .35s; } body.rainy .cloud-icon i:nth-child(3) { animation-delay: .7s; }
@keyframes drip { 0% { transform: translate(0, -4px) rotate(18deg); opacity: 0; } 30% { opacity: .9; } 100% { transform: translate(-2px, 5px) rotate(18deg); opacity: 0; } }
.pb-right { display: flex; gap: 8px; pointer-events: auto; }
/* the moon in the top-left corner: back to All games (Max, Oct 13), drawn in tonight's real phase */
.pb-home { pointer-events: auto; box-sizing: border-box; width: 42px; height: 42px; border-radius: 50%; border: 0; padding: 0; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; background: radial-gradient(circle at 50% 45%, rgba(243, 230, 196, .14), rgba(10, 18, 18, .6) 70%); box-shadow: 0 0 18px rgba(243, 230, 196, .12), inset 0 0 0 1px rgba(243, 230, 196, .2); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); -webkit-tap-highlight-color: transparent; }
.pb-home svg { width: 26px; height: 26px; display: block; }
.pb-home:active { transform: scale(.93); }
.pb-home:focus-visible { outline: 2px solid #e8c48a; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { body.rainy .cloud-icon i { animation: none; } }
/* rain on the glass (rainglass.js): each card and panel holds a canvas of drops above its content */
.rainglass { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; opacity: 0; transition: opacity 1.6s ease; }
body.rainy .rainglass { opacity: 1; }
.link-card { position: relative; overflow: hidden; }
.sleepy-card { position: relative; }