/* The block at night. Only opacity, transform and fill animate (cheap on slow phones). */
:root {
  color-scheme: dark;
  --bg: #03040c;
  --text: #efe7d2;
  --muted: #9aa0b4;
  --lamp: #ffcf6b;
  --line: #262b3d;
  --card: #0e1020;
}

/* Light colors by status (windows and the status picker share them). */
.st-sitting { --c: #ffc96b; }
.st-studying { --c: #fff0c4; }
.st-deadline { --c: #a8c6ff; }
.st-reading { --c: #ffe2a6; }
.st-music { --c: #d7b8ff; }
.st-instrument { --c: #ffc38a; }
.st-thinking { --c: #e3cfa2; }
.st-beauty { --c: #ffd7e3; }
.st-gaming { --c: #97f0b8; }
.st-cantsleep { --c: #c4995a; }
.st-homesick { --c: #ffa64d; }
.st-love { --c: #ff9fb8; }

/* Curtain fabrics (one per home, chosen once and the same on every phone). */
.fab-0 { --fab: #7d2a37; }
.fab-1 { --fab: #2b6468; }
.fab-2 { --fab: #a27424; }
.fab-3 { --fab: #5a6b40; }
.fab-4 { --fab: #5f3560; }
.fab-5 { --fab: #2b3c66; }

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); }
body {
  font: 16px/1.5 'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  overflow: hidden;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}
button { font: inherit; }
.hidden { display: none !important; }
.muted { color: var(--muted); }
.small { font-size: .78rem; }
.offscreen { position: fixed; left: -9999px; top: 0; }

/* ---------------------------------------------------------------- scene */
.scene { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100svh; display: block; }
/* Seasons dress the whole scene for everyone (scene.setSeason). Christmas: snow on roofs, awnings, the tree and
   the yard, a string of lights on a wire, and falling snow (snow.js) over the scene, under the buttons. */
.snowcap, .xlights, .snowground { display: none; }
.season-christmas .snowcap, .season-christmas .xlights, .season-christmas .snowground { display: inline; }
.snowcap { fill: #e8edf6; }
.snowcap.soft { fill: #dbe3ef; opacity: .8; }
.snowground { fill: #c7d1e4; opacity: .2; }
.xbulb.c1 { fill: #ff5d52; }
.xbulb.c2 { fill: #63d68d; }
.xbulb.c3 { fill: #ffd45c; }
.xbulb.c4 { fill: #7cb6ff; }
@media (prefers-reduced-motion: no-preference) {
  .season-christmas .xbulb.tw { animation: xtwinkle 2.6s ease-in-out infinite; }
}
@keyframes xtwinkle { 50% { opacity: .3; } }
.snowfall { position: fixed; inset: 0; pointer-events: none; }
.star { fill: #f3ecd6; }
.star.tw { animation: twinkle 6s ease-in-out infinite; }
@keyframes twinkle { 50% { opacity: .12; } }
.moon { transform: translateY(16px); transition: transform 3s ease; }
.moon.up { transform: translateY(0); }
.moon .halo { fill: #f1e6c4; opacity: .06; }
.moon .disc { fill: #17152a; }
.moon .lit { fill: #f3e9c9; }
.far rect { fill: #0b0b18; }
.wall { fill: #2b241c; }
.parapet { fill: #221c16; }
.slab { fill: #3a3026; }
.plinth { fill: #1d1813; }
.stairlight { fill: #ffcf6b; opacity: .06; }
.door { fill: #0b0907; }
.roofthing { fill: #14131b; }
.antenna { stroke: #14131b; stroke-width: 1.2; fill: none; }
/* The block's name on a small lit sign on the roof ("Quận 3", "Sài Gòn"). */
.signboard { fill: #1a2433; stroke: #3b5068; stroke-width: 1; }
.signpost { stroke: #23222c; stroke-width: 2; fill: none; }
.bno { fill: #ffd98a; font: 15px 'Patrick Hand', cursive; text-anchor: middle; }
.stain { fill: #1d1813; opacity: .85; }

.win .glow { fill: url(#glow-sitting); opacity: 0; transition: opacity .9s; pointer-events: none; }
.win.st-studying .glow { fill: url(#glow-studying); }
.win.st-deadline .glow { fill: url(#glow-deadline); }
.win.st-gaming .glow { fill: url(#glow-gaming); }
.win.st-cantsleep .glow { fill: url(#glow-cantsleep); }
.win.st-homesick .glow { fill: url(#glow-homesick); }
.win.st-reading .glow { fill: url(#glow-reading); }
.win.st-music .glow { fill: url(#glow-music); }
.win.st-instrument .glow { fill: url(#glow-instrument); }
.win.st-thinking .glow { fill: url(#glow-thinking); }
.win.st-beauty .glow { fill: url(#glow-beauty); }
.win.st-love .glow { fill: url(#glow-love); }
.win .glass { fill: #0b0a12; transition: fill .9s, opacity .9s; }
.win .curt { opacity: .3; transition: opacity .9s; }
.win.L .curt { opacity: .95; }
.win.A .curt { opacity: .7; }
.win .cloth { fill: var(--fab); }
.win .trim { fill: #c9a75a; }
.win .fold { fill: #000; opacity: .28; }
.win .bars { stroke: #241c15; stroke-width: 1.1; fill: none; }
.win .bars.thin { stroke-width: .7; }
.win .shutter { fill: #2e5a46; }
.win .slat { fill: #1f3f31; }
.win .stone { fill: #6e604c; }
.win .stone.dark { fill: #5a4e3e; }
.win .stoneline { stroke: #4f4434; stroke-width: .7; fill: none; }
.win .iron { stroke: #1b1611; stroke-width: .7; fill: none; }
.win .balslab { fill: #5e5444; }
.win .rail { stroke: #241c15; stroke-width: .8; fill: none; }
.win .pot { fill: #8a4b2c; }
.win .leaf { fill: #3f6b3a; }
.win .bloom { fill: #e86f8a; }
.win .lightwire { stroke: #1a1510; stroke-width: .4; fill: none; }
.win .bulb { fill: #ffd98a; opacity: .35; transition: opacity .9s; }
.win.L .bulb { opacity: 1; }
.win.A .bulb { opacity: .7; }
@media (prefers-reduced-motion: no-preference) {
  .win.L .bulb.b2 { animation: bulb 3.2s ease-in-out infinite; }
}
@keyframes bulb { 50% { opacity: .45; } }
.win .who { fill: #1e140a; opacity: 0; transition: opacity .9s; }
.win.L .who { opacity: .8; }
.win .pet { fill: #1e140a; transition: fill .9s; }
.win.A .pet { fill: #1a120a; }
.win.M .pet, .win.D .pet { fill: #343049; }
.win .frame { fill: none; stroke: #1b1712; stroke-width: 1.3; }
.win .cage { stroke: #4a3f34; stroke-width: .8; fill: none; }
.win .ledge { fill: #2f2720; }
.win .awning { fill: #3b332a; }
.win .awning.rust { fill: #4a3324; }
/* Eastern balcony: tiled roof, wooden posts and railing, red lanterns lit with the room. */
.win .roof { fill: #5b2f24; }
.win .roof.ridge { fill: #43221a; }
.win .tiles { stroke: #3c1f17; stroke-width: .45; fill: none; }
.win .wood { fill: #4f2e20; }
.win .woodrail { stroke: #4f2e20; stroke-width: .7; fill: none; }
.win .lantstring { stroke: #1a1510; stroke-width: .3; fill: none; }
.win .lant { fill: #6e2a22; transition: fill .9s; }
.win.L .lant { fill: #e8452e; }
.win.A .lant { fill: #b33c2a; }
.win .lantrib { stroke: #000; stroke-opacity: .25; stroke-width: .3; fill: none; }
.win .lantcap { fill: #b8923a; }
.win .tassel { stroke: #c9a24a; stroke-width: .35; fill: none; }
.win .lanthalo { fill: #ff6a3a; opacity: 0; transition: opacity .9s; pointer-events: none; }
.win.L .lanthalo { opacity: .22; }
.win.A .lanthalo { opacity: .12; }
/* Event decor: some parts keep a color of their own, and flames (candles, the jack-o'-lantern, the star
   lantern) go on burning after lights out. The decor's shapes read these through the <use> element. */
/* Decor uploaded from the dashboard (a PNG on the sill): dimmed after lights out unless it has a night picture. */
.win .objimg { opacity: 0; transition: opacity .9s, filter .9s; pointer-events: none; }
.win.has-img .objimg { opacity: 1; }
.win.A.has-img .objimg { opacity: .7; }
.win.img-dim .objimg { filter: brightness(.38) saturate(.6); }
/* Classes on the parts inside the decor symbols; the variables come down from the <use> element below. */
.dk-red, .dk-gold, .dk-flame { stroke: var(--dk-rim); stroke-width: .5; stroke-linejoin: round; paint-order: stroke; }
.dk-red { fill: var(--dk-red); }
.dk-gold { fill: var(--dk-gold); }
.dk-flame { fill: var(--dk-flame); }
.dk-halo { fill: var(--dk-flame); opacity: .3; }
.win .obj { --dk-red: #24180c; --dk-gold: #24180c; --dk-flame: #24180c; --dk-rim: #24180c; }
.win.L .obj { --dk-red: #d63a2c; --dk-gold: #f2c230; --dk-flame: #fff3c4; }
.win.A .obj { --dk-red: #8c2c22; --dk-gold: #a07e22; --dk-flame: #ffe2a0; --dk-rim: #1a120a; }
.win.M .obj { --dk-red: #4c2c3c; --dk-gold: #57503c; --dk-flame: #ffc861; --dk-rim: none; }
.win.D .obj { --dk-red: #3a2c40; --dk-gold: #403a44; --dk-flame: #4a4258; --dk-rim: none; }
.win .obj { fill: #24180c; opacity: 0; transition: fill .9s; }
.win.has-obj .obj { opacity: 1; }
.win .moonmark { fill: #eee4c2; opacity: 0; transition: opacity 1.2s .6s; }
.win.L .glass { fill: var(--c); }
.win.L .glow { opacity: 1; }
.win.A .glow { opacity: .25; }
.win.A .glass { fill: var(--c); opacity: .28; }
.win.A .obj { fill: #1a120a; }
.win.M .glass { fill: #12101f; }
.win.M .moonmark { opacity: .9; }
.win.M .obj, .win.D .obj { fill: #2e2a40; }
.win.D .glass { fill: #0d0c16; }

.memark .mering { fill: none; stroke: #ffcf6b; stroke-width: 1.2; stroke-dasharray: 3 3; opacity: .8; }
.memark .youlabel { fill: #ffe2a3; font: 13px 'Patrick Hand', cursive; text-anchor: middle; }
.front .wire { stroke: #050508; stroke-width: 1.1; fill: none; }
/* The tree's gradients are fill attributes in scene.js (06/11: some browsers dropped them as CSS url()). */
.branch { stroke: #24170f; stroke-width: 3; stroke-linecap: round; fill: none; }
.leaves2 { fill: #20391f; opacity: .55; }
.leaflit { fill: #a6bd5c; opacity: .42; }
.uplamp { fill: #1c1915; }
.uplens { fill: #fff0c8; }
.post { fill: #09080d; }
.lampbulb { fill: #ffe0a0; }
.bench { stroke: #0b0a0f; stroke-width: 3; fill: none; }
.yardwall { fill: #110e0b; }

/* ---------------------------------------------------------------- top bar */
.top {
  position: fixed; top: 0; left: 0; right: 0; z-index: 3;
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  padding: calc(10px + env(safe-area-inset-top)) 16px 14px;
  background: linear-gradient(rgba(3, 4, 12, .8), rgba(3, 4, 12, 0));
  transition: opacity 1.2s;
}
.brand { font: 22px/1 'Patrick Hand', cursive; color: var(--lamp); letter-spacing: .3px; white-space: nowrap; }
.top-links { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.chip {
  font-size: .8rem; color: var(--text); background: rgba(20, 22, 40, .65);
  border: 1px solid var(--line); border-radius: 999px; padding: 6px 11px; min-height: 34px;
  text-decoration: none; cursor: pointer; display: inline-flex; align-items: center;
}
.chip.support { color: #ffd9c9; }
.chip.sel { background: var(--lamp); color: #1a1406; border-color: var(--lamp); }

/* ---------------------------------------------------------------- bottom panel */
.panel {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 3;
  padding: 34px 16px calc(12px + env(safe-area-inset-bottom));
  background: linear-gradient(rgba(3, 4, 12, 0), rgba(3, 4, 12, .9) 32%, rgba(3, 4, 12, .97));
  text-align: center; transition: opacity 1.2s;
}
.tagline { font: 18px/1.2 'Patrick Hand', cursive; color: #cfc6ad; margin: 0 0 2px; }
.home {
  font-weight: 600; font-size: 1.05rem; color: var(--lamp); background: none; border: 0;
  padding: 4px 8px; min-height: 30px; cursor: pointer;
}
.home:empty { display: none; }
.counts { margin: 2px auto 12px; color: var(--muted); font-size: .86rem; min-height: 1.3em; max-width: 520px; }
/* "Sài Gòn: 214 homes awake · Bến Lức: 12 · change": opens the city sheet. */
.place {
  display: block; margin: -10px auto 10px; max-width: 520px; padding: 4px 8px; min-height: 30px;
  color: var(--muted); background: none; border: 0; font-size: .82rem; cursor: pointer;
}
.place .chg { color: var(--lamp); }

/* ---------------------------------------------------------------- the tower views (city, world) */
.towers {
  position: fixed; inset: 0; z-index: 7; overflow-y: auto; background: #05060f;
  display: flex; justify-content: center; align-items: flex-start;
}
.towers-card { width: 100%; max-width: 560px; padding: calc(12px + env(safe-area-inset-top)) 16px calc(18px + env(safe-area-inset-bottom)); }
.towers-head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; }
.towers-head h2 { font: 24px/1.2 'Patrick Hand', cursive; color: var(--lamp); margin: 0; font-weight: 400; text-align: center; }
.towers-head .chip { justify-self: start; }
.towers-head .x { justify-self: end; }
.towers-card .sub { text-align: center; margin: 2px 0 10px; }
.towers-body { margin: 6px 0; }
.towers-top { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 6px; }
.towers-body .tower-svg { display: block; width: 100%; max-width: 440px; height: auto; margin: 0 auto; }
.skyline { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
.skyline .tower-svg { width: auto; max-width: none; }
.tw-wall { fill: #2a241c; }
.tw-slab, .tw-parapet { fill: #1d1813; }
.tw-roof { fill: #14131b; }
.tw-antenna { stroke: #3a3946; stroke-width: 1.2; fill: none; }
.tw-beacon { fill: #ff6b5a; }
/* Lit windows take their mood's color from a fill attribute (CSS would override it, so unlit ones only here). */
.tw-win:not(.on) { fill: #0f0e14; }

.tw-sec.few .tw-win:not(.on) { fill: #4a3a22; }   /* someone is up, fewer than 5: a glow, no count */
.tw-mine { fill: none; stroke: var(--lamp); stroke-width: 2; stroke-dasharray: 6 4; }
.tw-you { fill: var(--lamp); font: 600 12px 'Be Vietnam Pro', sans-serif; }
.tw-you.mid { text-anchor: middle; }
.tw-name { fill: #e8e0cc; font: 600 12px 'Be Vietnam Pro', sans-serif; }
.tw-count { fill: #a59f93; font: 11px 'Be Vietnam Pro', sans-serif; }
.skyline .tw-name { font-size: 10.5px; }
.tw-name.mid, .tw-count.mid { text-anchor: middle; }
.tw-ground { fill: #0b0a10; }
.tw-sec, .tw-city { cursor: pointer; }
.tw-sec:focus, .tw-city:focus { outline: none; }
.tw-sec:focus-visible .tw-wall, .tw-city:focus-visible .tw-wall { stroke: var(--lamp); stroke-width: 1.5; }
.gps { min-height: 1.3em; }
.same { margin: -8px auto 12px; color: #d6c49a; font-size: .84rem; max-width: 520px; }
.same:empty { display: none; }
.actions {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px;
  max-width: 520px; margin: 0 auto;
}
.act {
  color: var(--text); background: rgba(24, 26, 44, .88); border: 1px solid var(--line);
  border-radius: 14px; padding: 10px 4px; min-height: 48px; font-size: .88rem; cursor: pointer;
}
.act.on { border-color: var(--lamp); color: var(--lamp); }
.act.primary { background: var(--lamp); color: #1a1406; border-color: var(--lamp); font-weight: 600; }
.act:disabled { opacity: .45; cursor: default; }
.foot { display: flex; justify-content: center; gap: 18px; margin-top: 8px; }
.link {
  color: var(--muted); background: none; border: 0; padding: 6px; font-size: .82rem;
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
body.dim .panel, body.dim .top { opacity: 0; pointer-events: none; }

/* ---------------------------------------------------------------- banner, buttons */
.banner {
  position: fixed; top: calc(60px + env(safe-area-inset-top)); left: 16px; right: 16px; z-index: 4;
  max-width: 480px; margin: 0 auto; padding: 10px 14px; text-align: center; font-size: .9rem;
  background: rgba(14, 16, 32, .92); border: 1px solid var(--line); border-radius: 14px;
}
.banner.soft { background: rgba(14, 16, 32, .72); }
.banner strong { display: block; color: var(--lamp); font: 20px/1.3 'Patrick Hand', cursive; }
.banner p { margin: 4px 0; }
.btn {
  color: #1a1406; background: var(--lamp); border: 0; border-radius: 12px; padding: 10px 16px;
  min-height: 44px; font-weight: 600; cursor: pointer;
}
.btn.small { min-height: 36px; padding: 6px 14px; margin-top: 6px; }
.btn.secondary { background: transparent; color: var(--text); border: 1px solid var(--line); font-weight: 400; }
.btn.wide { width: 100%; margin-top: 16px; }

/* ---------------------------------------------------------------- sheets */
.sheet {
  position: fixed; inset: 0; z-index: 6; background: rgba(0, 0, 0, .45);
  display: flex; align-items: flex-end; justify-content: center;
}
.sheet-card {
  width: 100%; max-width: 520px; max-height: 86vh; max-height: 86svh; overflow-y: auto;
  background: var(--card); border: 1px solid var(--line); border-bottom: 0; border-radius: 20px 20px 0 0;
  padding: 14px 16px calc(18px + env(safe-area-inset-bottom));
  animation: sheet-up .25s ease;
}
@keyframes sheet-up { from { transform: translateY(30px); opacity: 0; } }
.sheet-head { display: flex; justify-content: space-between; align-items: center; }
.sheet-head h2 { font: 23px/1.2 'Patrick Hand', cursive; color: var(--lamp); margin: 0; font-weight: 400; }
.x { font-size: 28px; line-height: 1; color: var(--muted); background: none; border: 0; width: 44px; height: 44px; cursor: pointer; }
.sheet-card p { margin: 6px 0; }
/* "Your window": preview, three tabs, a grid of little windows */
.preview { display: flex; align-items: center; gap: 14px; margin-top: 6px; }
.preview > svg { width: 84px; height: 105px; flex: none; }
.previewname { color: var(--lamp); font-weight: 600; margin: 0 0 4px !important; }
.tabs {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin: 12px 0 10px;
  background: #15172a; padding: 4px; border-radius: 12px;
}
.tabbtn {
  min-height: 40px; border: 0; border-radius: 9px; background: transparent; color: var(--muted);
  font-weight: 600; font-size: .88rem; cursor: pointer;
}
.tabbtn.sel { background: var(--lamp); color: #1a1406; }
.thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.thumb {
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 4px 8px;
  background: #15172a; border: 1px solid var(--line); border-radius: 14px;
  color: var(--text); font-size: .74rem; line-height: 1.25; text-align: center; cursor: pointer;
}
.thumb > svg { width: 100%; max-width: 76px; height: auto; aspect-ratio: 4 / 5; }
.thumb.sel { border-color: var(--lamp); background: #221f2a; box-shadow: 0 0 0 1px var(--lamp) inset; }
.thumb .tag { font-style: normal; font-size: .66rem; color: #1b1405; background: var(--lamp); border-radius: 999px; padding: 1px 7px; }
.pic-wall { fill: #2b241c; }
@media (min-width: 480px) { .thumbs { grid-template-columns: repeat(4, 1fr); } }
.pick {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  color: var(--text); background: #15172a; border: 1px solid var(--line); border-radius: 14px;
  padding: 10px 4px; min-height: 86px; font-size: .74rem; line-height: 1.25; cursor: pointer;
}
.pick .ico { width: 34px; height: 34px; fill: var(--lamp); }
.pick.sel, .row.sel { border-color: var(--lamp); background: #221f2a; }
.list { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.row {
  display: flex; align-items: center; gap: 12px; text-align: left;
  color: var(--text); background: #15172a; border: 1px solid var(--line); border-radius: 12px;
  padding: 11px 14px; min-height: 48px; cursor: pointer;
}
.row > span:last-child:not(:first-child) { margin-left: auto; }
.row:disabled { opacity: .5; cursor: default; }
.swatch { width: 16px; height: 22px; border-radius: 3px; background: var(--c); box-shadow: 0 0 10px var(--c); flex: none; }
.row .swatch + span { margin-left: 0 !important; }
.label { margin: 16px 0 6px !important; color: var(--muted); font-size: .85rem; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips.themes { margin-bottom: 4px; }
/* The theme that is playing carries a small light, also when another theme is being looked at. */
.chip.on:not(.sel)::after { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--lamp); margin-left: 6px; }
.tip { font-size: .82rem; color: var(--muted); line-height: 1.45; margin-top: 14px !important; }
.tag {
  font-style: normal; font-size: .7rem; color: #1a1406; background: var(--lamp);
  border-radius: 999px; padding: 1px 8px; margin-left: 8px; white-space: nowrap;
}
.credits { font-size: .72rem; color: var(--muted); line-height: 1.45; margin-top: 16px !important; }
.playlist { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; }
.tracks { list-style: none; margin: 2px 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.track {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; color: var(--text);
  background: transparent; border: 1px solid transparent; border-radius: 10px; padding: 6px 12px; min-height: 44px;
  font: inherit; font-size: .9rem; line-height: 1.3; cursor: pointer;
}
.track:hover { background: #15172a; }
.track.sel { border-color: var(--lamp); background: #221f2a; }
.track .tnum { width: 1.4em; text-align: right; color: var(--muted); flex: none; }
.track .tname { flex: 1; display: flex; flex-direction: column; }
/* Staging only: which build this page runs (so testers know whether they have the newest one). */
.verlabel { position: fixed; left: 8px; bottom: calc(4px + env(safe-area-inset-bottom)); z-index: 3; font-size: 10px; color: var(--muted); opacity: .7; pointer-events: none; }

/* ---------------------------------------------------------------- breathing */
.breath {
  position: fixed; inset: 0; z-index: 7; background: rgba(2, 3, 10, .93);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px;
  padding: 24px; text-align: center;
}
.breath-title { font: 23px/1.2 'Patrick Hand', cursive; color: #cfc6ad; margin: 0; }
.ring {
  width: 150px; height: 150px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 207, 107, .55), rgba(255, 207, 107, .08) 70%);
  transform: scale(.6); opacity: .6; transition: transform 4s ease-in-out, opacity 4s ease-in-out;
}
.ring.in { transform: scale(1); opacity: 1; transition-duration: 4s; }
.ring.out { transform: scale(.6); opacity: .55; transition-duration: 6s; }
.breath-text { font-size: 1.1rem; min-height: 1.6em; margin: 0; }

/* ---------------------------------------------------------------- lights out */
.goodnight {
  position: fixed; left: 16px; right: 16px; top: 36%; z-index: 5; margin: 0; text-align: center;
  font: 32px/1.2 'Patrick Hand', cursive; color: #f3e9c9; opacity: 0; transition: opacity 1.4s;
  pointer-events: none;
}
.goodnight.show { opacity: 1; }
.night {
  position: fixed; inset: 0; z-index: 8; background: #000;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  padding: 0 16px calc(28px + env(safe-area-inset-bottom)); opacity: 0; transition: opacity 2.4s;
}
.night.show { opacity: 1; }
.night-line { color: #4c4a58; font-size: .85rem; margin: 0 0 4px; text-align: center; }
.dimlink { color: #3f3d4a; }

.toast {
  position: fixed; left: 50%; top: calc(64px + env(safe-area-inset-top)); transform: translateX(-50%);
  z-index: 9; margin: 0; padding: 8px 14px; border-radius: 999px; background: #1d2135; color: var(--text); font-size: .88rem;
}
.noscript { position: fixed; left: 16px; right: 16px; top: 40%; text-align: center; z-index: 9; }

@media (min-width: 700px) {
  .panel { padding-bottom: 20px; }
}

/* ---------------------------------------------------------------- design sheet (/windows, staging only) */
body.sheetpage { overflow: auto; height: auto; }
.sheetsvg { display: block; width: 100%; max-width: 1100px; height: auto; margin: 0 auto; }
.sheet-title { fill: #ffcf6b; font: 7px 'Patrick Hand', cursive; }
.sheet-label { fill: #d8cfb8; font: 4.4px 'Be Vietnam Pro', sans-serif; text-anchor: middle; }
.sheet-wall { fill: #2b241c; stroke: #1d1813; stroke-width: .6; }

@media (prefers-reduced-motion: reduce) {
  .star.tw { animation: none; }
  .moon, .win .glass, .win .glow, .ring, .night, .goodnight, .panel, .top { transition: none; }
  .sheet-card { animation: none; }
}

/* ---------------------------------------------------------------- wallpaper: the block full screen (06/11) */
.iconchip { padding: 6px 9px; }
.ic { width: 18px; height: 18px; display: block; }
.ic.stroke path { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ic.fill path { fill: currentColor; }
body.wall .panel, body.wall .top, body.wall #banner, body.wall .verlabel { opacity: 0; pointer-events: none; }
body.wall:not(.wall-awake), body.wall:not(.wall-awake) .scene { cursor: none; }
.wall-bar {
  position: fixed; top: calc(12px + env(safe-area-inset-top)); right: calc(12px + env(safe-area-inset-right)); z-index: 8;
  display: none; gap: 8px; align-items: center; opacity: 0; transition: opacity .6s;
}
body.wall .wall-bar { display: flex; }
body.wall.wall-awake .wall-bar { opacity: 1; }
.wallbtn {
  width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  color: var(--text); background: rgba(20, 22, 40, .72); border: 1px solid var(--line); cursor: pointer; padding: 0;
}
.wallbtn.on { color: var(--lamp); border-color: var(--lamp); }
.wallnow {
  order: -1; max-width: 40vw; font-size: .8rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: rgba(20, 22, 40, .6); border-radius: 999px; padding: 5px 12px;
}
@media (prefers-reduced-motion: reduce) { .wall-bar { transition: none; } }

/* ---------------------------------------------------------------- live weather in full screen (06/11) */
.wxlayer { position: fixed; inset: 0; pointer-events: none; }
.scene.wx-dim .stars { opacity: .5; }
.scene.wx-dark .stars { opacity: .12; }
.scene.wx-dark .moon { opacity: .45; }
.scene .stars { transition: opacity 2s; }
.scene .moon { transition: transform 3s ease, opacity 2s; }
.wall-info {
  position: fixed; top: calc(14px + env(safe-area-inset-top)); left: calc(16px + env(safe-area-inset-left)); z-index: 8;
  display: none; opacity: 0; transition: opacity .6s; max-width: 60vw;
  font-size: .86rem; color: #e8e0cc; text-shadow: 0 1px 3px rgba(0, 0, 0, .8);
}
.wall-info p { margin: 0 0 3px; }
.wall-info .src { font-size: .72rem; color: var(--muted); }
body.wall .wall-info { display: block; }
body.wall.wall-awake .wall-info { opacity: 1; }

/* ---------------------------------------------------------------- the city's other blocks in the distance (06/11) */
.nbwin:not(.on) { fill: #12111c; }
.nb.few .nbwin:not(.on) { fill: #2e2619; }   /* someone is up, fewer than 5: a glow, no count */
.nb { cursor: pointer; }