/* Sunup — "Sunup Paper" design system: layered paper cut-outs, soft shadows, rounded everything,
 * a sky that brightens from indigo to daylight as your morning progresses (--wake: 0 → 1). */

/* ---------- type: one family on every platform (self-hosted, so iPhone, Android and desktop match) ----------
 * Nunito (variable 200–1000) for everything; Caveat only for Pip's handwriting on postcards. */
@font-face { font-family: "Nunito"; font-style: normal; font-display: swap; font-weight: 200 1000; src: url("/fonts/nunito-latin-wght-normal.woff2") format("woff2-variations"), url("/fonts/nunito-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Nunito"; font-style: normal; font-display: swap; font-weight: 200 1000; src: url("/fonts/nunito-latin-ext-wght-normal.woff2") format("woff2-variations"), url("/fonts/nunito-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Caveat"; font-style: normal; font-display: swap; font-weight: 700; src: url("/fonts/caveat-latin-700-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  /* Type scale: every font-size in the app uses one of these nine steps.
   * 2xs badges · xs captions, kickers, tab labels · sm secondary text · md body · lg card titles, lead
   * xl section headings · 2xl page headings · 3xl big numbers · 4xl the walk timer */
  --fs-2xs: .6875rem; --fs-xs: .78rem; --fs-sm: .875rem; --fs-md: 1rem; --fs-lg: 1.125rem; --fs-xl: 1.375rem; --fs-2xl: 1.75rem; --fs-3xl: 2.375rem; --fs-4xl: 3.25rem;
  /* Weights: body 500 · emphasis 700 · labels and buttons 800 · headings 800 · display numbers 900 */
  --fw-body: 500; --fw-strong: 700; --fw-label: 800; --fw-head: 800; --fw-display: 900;
  --font: "Nunito", ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-hand: "Caveat", "Bradley Hand", "Segoe Print", cursive;
  --indigo: #5B5B9E; --lav: #B7A6D9; --peach: #F6B38E; --gold: #F7C948; --sage: #8DB36B; --terra: #D9825B;
  --cream: #FBF3E8; --blush: #F29E9E; --ink: #3A3350; --muted: #685C74; --paper: #FFF9F1; --line: #EADFCF;
  --wake: 0; --r: 22px;
  --btn-top: #FFDB6E; --btn-bot: #F7B733; --btn-edge: #D98E1F; --btn-ink: #4A2E22; --tab-on: #FFF1C9; --scene-bg: #2B2A5C;
  --shadow: 0 1px 0 rgba(90, 60, 40, .06), 0 6px 16px rgba(70, 45, 90, .11);
  --shadow-lg: 0 2px 0 rgba(90, 60, 40, .08), 0 14px 32px rgba(40, 30, 80, .22);
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .4 0 0 0 0 .3 0 0 0 0 .2 0 0 0 .07 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  font-family: var(--font); font-weight: var(--fw-body);
  color: var(--ink);
  -webkit-text-size-adjust: 100%;
}
* { box-sizing: border-box; }
/* ---------- icons (js/icons.js, Phosphor): sit on the text baseline and take the text colour ---------- */
.ico { display: inline-block; vertical-align: -.16em; flex: none; }
.btn .ico, .chip .ico, .link .ico, .tag .ico, summary .ico, h3 .ico, .kicker .ico { margin-right: .1em; }
.tabs a span .ico { width: 1.5rem; height: 1.5rem; vertical-align: 0; }
.tabs a.on .ico { color: var(--btn-edge); }
.chip .ico-sun, .ico-sun.ico { color: #F2A33A; }
.chip .ico-fire, .stats3 .ico-fire, .huge .ico-fire { color: #E8743B; }
.ico-heart { color: #E07F86; }
.ico-snowflake { color: #6AA7C9; }
.ico-sparkle { color: #F2A33A; }
.icon-row { display: flex; gap: 10px; justify-content: center; margin: 6px 0 10px; }
.icon-row .ico { width: 26px; height: 26px; }
.icon-row .played { color: #E08A1C; }
.icon-row .unplayed { color: var(--line); }
.icon-list { list-style: none; padding: 0; display: grid; gap: 8px; }
.icon-list .ico { width: 1.3em; height: 1.3em; color: #E08A1C; margin-right: 6px; }
.sl-fx.fx-sparkle, .sl-fx.fx-sun { color: #F2A33A; } .sl-fx.fx-heart { color: #E07F86; } .sl-fx.fx-confetti { color: #B7A6D9; }
/* evidence levels: a coloured dot instead of an emoji circle */
.evid summary::before { content: ''; display: inline-block; width: .62em; height: .62em; border-radius: 50%; background: var(--dot, #B8AFCB); margin-right: 7px; vertical-align: .05em; }
.evid.strong { --dot: #5E8C4A; } .evid.moderate { --dot: #E0A21C; } .evid.fun { --dot: #B8AFCB; }
html, body { margin: 0; min-height: 100%; }
body { background: #2B2A5C; -webkit-tap-highlight-color: transparent; line-height: 1.45; overscroll-behavior-y: none; }
a { color: var(--indigo); }
:focus-visible { outline: 3px solid #F2A33A; outline-offset: 2px; }
.sr { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------- the sky ---------- */
.sky { position: fixed; inset: 0; z-index: -1; background: linear-gradient(180deg, #232150 0%, #3E3470 55%, #5A4A84 100%); }
.sky::before, .sky::after { content: ''; position: absolute; inset: 0; transition: opacity 1.4s ease; }
.sky::before { background: linear-gradient(180deg, #6E6AB8 0%, #C99BC0 50%, #F6B38E 100%); opacity: clamp(0, calc(var(--wake) * 2), 1); }
.sky::after { background: linear-gradient(180deg, #8CCBF0 0%, #CFE8F4 40%, #FFF1DE 100%); opacity: clamp(0, calc(var(--wake) * 2 - 1), 1); }

/* ---------- time of day (root[data-phase]); morning keeps the wake-up sky above ---------- */
:root[data-phase="afternoon"] { --paper: #FFFDF6; --btn-top: #FFE47A; --btn-bot: #FFC23D; --btn-edge: #E09A1C; --tab-on: #FFF3B8; --scene-bg: #5FB2EA; }
:root[data-phase="afternoon"] .sky { background: linear-gradient(180deg, #4FA6E4 0%, #A9DAF4 45%, #FFF6E2 100%); }
:root[data-phase="afternoon"] .sky::before { background: radial-gradient(circle at 18% 6%, rgba(255, 244, 190, .85), transparent 38%); opacity: 1; animation: glare 8s ease-in-out infinite alternate; }
:root[data-phase="afternoon"] .sky::after { opacity: 0; }
:root[data-phase="evening"] { --paper: #FFF5EF; --btn-top: #FFB892; --btn-bot: #F2825F; --btn-edge: #C9603F; --btn-ink: #4A1F14; --tab-on: #FFE0D2; --muted: #6C5467; --scene-bg: #4B3C85; }
:root[data-phase="evening"] .sky { background: linear-gradient(180deg, #33296A 0%, #7E4F8E 38%, #D9788A 70%, #F7A46B 100%); }
:root[data-phase="evening"] .sky::before { background: radial-gradient(ellipse at 78% 100%, rgba(255, 190, 120, .7), transparent 55%); opacity: 1; animation: glare 6s ease-in-out infinite alternate; }
:root[data-phase="evening"] .sky::after { opacity: 0; }
:root[data-phase="night"] { --paper: #F6F3FC; --btn-top: #CFC9FB; --btn-bot: #A69EF0; --btn-edge: #6E66C8; --btn-ink: #221D52; --tab-on: #E6E1FB; --scene-bg: #12113A; }
:root[data-phase="night"] .sky { background: linear-gradient(180deg, #0B0A28 0%, #18164A 55%, #2A245E 100%); }
:root[data-phase="night"] .sky::before { opacity: .85; animation: glare 5s ease-in-out infinite alternate;
  background-image: radial-gradient(1.6px 1.6px at 12% 8%, #fff 50%, transparent 52%), radial-gradient(1.2px 1.2px at 32% 18%, #fff 50%, transparent 52%), radial-gradient(1.8px 1.8px at 58% 6%, #fff 50%, transparent 52%), radial-gradient(1.2px 1.2px at 78% 14%, #fff 50%, transparent 52%), radial-gradient(1.4px 1.4px at 90% 30%, #fff 50%, transparent 52%), radial-gradient(1.2px 1.2px at 8% 36%, #fff 50%, transparent 52%), radial-gradient(1.6px 1.6px at 44% 30%, #fff 50%, transparent 52%), radial-gradient(1.2px 1.2px at 68% 42%, #fff 50%, transparent 52%), radial-gradient(1.4px 1.4px at 22% 54%, #fff 50%, transparent 52%), radial-gradient(1.2px 1.2px at 86% 58%, #fff 50%, transparent 52%); }
:root[data-phase="night"] .sky::after { opacity: 0; }
:root.phase-change .sky { animation: fadein 1.2s ease; }

#app { max-width: 480px; margin: 0 auto; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
#view { flex: 1; display: flex; flex-direction: column; }
.top { display: flex; justify-content: space-between; align-items: center; padding: calc(10px + env(safe-area-inset-top)) 16px 10px; position: relative; z-index: 10; }
.brand { display: flex; gap: 6px; align-items: center; font-weight: 900; font-size: var(--fs-xl); color: #fff; text-decoration: none; transition: color 1s; letter-spacing: -.01em; }
:root.day .brand { color: var(--ink); }
.chips { display: flex; gap: 8px; }
.chip { background: rgba(255, 249, 241, .93); border-radius: 999px; padding: 6px 12px; font-weight: 800; font-size: var(--fs-sm); box-shadow: var(--shadow); border: 0; font-family: inherit; color: var(--ink); white-space: nowrap; }
.chip.gold { background: #FFE9A8; }
.chip.pb { background: #EDE6FA; }
.btnchip { cursor: pointer; }
.btnchip.light { display: block; margin: 10px auto 0; }
.chips-row { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin: 8px 0; }
.chips-row.wrap { justify-content: flex-start; }

/* ---------- scene + panel ---------- */
/* The room is a full-screen layer under everything (js: layoutRoom). Its wall and floor keep going past the art
 * (art.js bleed), so there is no frame; the content is a sheet (.panel) resting on its floor. */
.scene { position: fixed; inset: 0; z-index: 0; overflow: hidden; background: var(--wall, var(--scene-bg)); animation: fadein .5s ease; }
#view.settled .scene { animation: none; }
.scene > svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.scene > .room-base { display: none; }
.scene.soft > .room-base { display: block; }
.scene.aside { display: none; }
.room-dim { position: absolute; inset: 0; background: #2B2550; opacity: calc(var(--cover, 0) * .22); pointer-events: none; }
body.roomy { background: var(--floor, #2B2A5C); }
body.roomy .sky { display: none; }
.roomy .top { position: sticky; top: 0; transition: background-color .2s, box-shadow .2s; }
.roomy .top.solid { background: var(--wall); box-shadow: 0 4px 16px rgba(40, 30, 80, .14); }
.roomy .brand { color: var(--ink); }
.roomy #view > .panel { position: relative; z-index: 2; margin: 0; border-radius: 28px 28px 0 0; min-height: calc(100vh - 60px); min-height: calc(100dvh - 60px); box-shadow: 0 -6px 24px rgba(40, 30, 80, .16); }
.roomy .tabs { border-radius: 0; background: var(--paper); box-shadow: none; border-top: 1px solid var(--line); backdrop-filter: none; -webkit-backdrop-filter: none; }
.drift { animation: drift 28s linear infinite alternate; }
/* living room details — all switched off by prefers-reduced-motion below */
.room .tw, .room .halo { transform-box: fill-box; transform-origin: center; }
.room .tw { animation: twinkle 2.6s ease-in-out infinite alternate; }
.room .halo { animation: halo 4.5s ease-in-out infinite alternate; }
.room .bob { animation: bob 4s ease-in-out infinite; }
.room .birds { animation: fly 18s linear infinite; }
.room .shoot { opacity: 0; animation: shoot 11s ease-in infinite 3s; }
.room .flicker { animation: flicker 7s ease-in-out infinite; }
.room .beam { animation: beam 9s ease-in-out infinite alternate; }
.room.night .drift { animation-duration: 60s; }
.room .ff { animation: firefly 3.4s ease-in-out infinite alternate; }
.room .flutter { transform-box: fill-box; transform-origin: center; animation: flutter 6s ease-in-out infinite; }

/* ---------- the Sunling ---------- */
/* ---------- Sunling life: every Sunling (room, sheets, result screens, intro, walk) breathes, blinks, sways and waves.
 * art.js names the parts (.sl-nubs, .sl-arm, .sl-eyes, .sl-gaze, .sl-mouth, .sl-zz); app.js adds one-off reactions
 * (react-hop / spin / wiggle / giggle / cheer) and moves .sl-gaze toward your finger. Reduce Motion stops all of it. */
.sunling { cursor: pointer; outline: none; }
.sunling .sl-body, .sunling-solo .sl-body { transform-box: fill-box; transform-origin: 50% 100%; animation: slbreathe 3.2s ease-in-out infinite; }
.sunling.sleep .sl-body { animation-duration: 5s; }
.sunling.happy .sl-body, .sunling-solo.happy .sl-body { animation: slidle 7s ease-in-out infinite; }
.room.afternoon .sunling.happy .sl-body, .sunling-solo.cheer .sl-body { animation: slbounce 1.6s ease-in-out infinite; }
.sl-glow { transform-box: fill-box; transform-origin: center; animation: slglow 3s ease-in-out infinite alternate; }
.sl-nubs { transform-box: fill-box; transform-origin: center; animation: slsway 6s ease-in-out infinite alternate; }
.sl-eyes.open { transform-box: fill-box; transform-origin: center; animation: slblink 5.3s infinite; }
.sl-gaze { transition: transform .35s ease-out; }
.sl-arm { transform-box: fill-box; }
.sl-arm-r.up { transform-origin: 20% 90%; animation: slwave 3.4s ease-in-out infinite; }
.sl-arm-l.up { transform-origin: 80% 90%; animation: slwave-l 3.4s ease-in-out infinite; }
.sl-mouth { transform-box: fill-box; transform-origin: 50% 20%; }
.sl-zz text { transform-box: fill-box; animation: slzz 3.2s ease-in-out infinite; }
.sl-zz text:nth-child(2) { animation-delay: 1.6s; }
.sunling.react-hop .sl-body { animation: slhop .7s ease; }
.sunling.react-spin .sl-body { transform-origin: 50% 55%; animation: slspin .9s cubic-bezier(.3, 1.3, .5, 1); }
.sunling.react-wiggle .sl-body { transform-origin: 50% 80%; animation: slwiggle .8s ease; }
.sunling.react-giggle .sl-body { animation: slgiggle .9s ease; }
.sunling.react-giggle .sl-mouth, .sunling.react-cheer .sl-mouth { animation: slmouth .9s ease; }
.sunling.react-cheer .sl-body { animation: slcheer 1.1s ease; }
.room .slwrap.dragging .sl-body { transform-origin: 50% 0; animation: sldangle .5s ease-in-out infinite alternate; }
.sl-fx { position: absolute; z-index: 5; pointer-events: none; font-size: 18px; animation: slfx 1.1s ease-out forwards; }
.room.night .sunling .sl-glow { opacity: .85; }
.sunling:focus-visible .sl-glow { opacity: .9; }
.sl-bubble { position: absolute; z-index: 3; transform: translate(-50%, calc(-100% - 6px)) scale(.85); background: #fff; color: var(--ink); padding: 8px 12px; border-radius: 16px; font-weight: 800; font-size: var(--fs-sm); line-height: 1.3; box-shadow: var(--shadow-lg); width: max-content; max-width: 70%; text-align: center; opacity: 0; transition: opacity .25s, transform .25s; pointer-events: none; }
.sl-bubble.show { opacity: 1; transform: translate(-50%, calc(-100% - 6px)) scale(1); }
.sl-bubble::after { content: ''; position: absolute; left: calc(50% + var(--tail, 0px)); bottom: -5px; width: 12px; height: 12px; background: #fff; border-radius: 2px; transform: translateX(-50%) rotate(45deg); }
.sunling-card .sl-row { display: flex; gap: 12px; align-items: center; }
.sunling-card small { display: block; color: var(--muted); font-size: var(--fs-xs); }
.sl-avatar { border: 0; background: none; padding: 0; cursor: pointer; flex: none; }
.acc-row { display: flex; gap: 8px; overflow-x: auto; padding: 12px 2px 4px; scrollbar-width: none; }
.acc { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-width: 62px; height: 68px; border: 2px solid var(--line); border-radius: 16px; background: #fff; font: inherit; font-weight: 800; font-size: var(--fs-xs); color: var(--ink); cursor: pointer; }
.acc.on { border-color: var(--btn-edge); background: var(--tab-on); }
.acc small { font-size: var(--fs-2xs); color: var(--muted); }
.acc.locked { cursor: default; background: transparent; border-style: dashed; }
.acc.locked svg { filter: grayscale(1); opacity: .4; }
.tint-row { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 2px; padding: 8px 0 2px; }
.tint { min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 3px; border: 0; background: none; padding: 4px 2px; font: inherit; cursor: pointer; border-radius: 12px; }
.tint span { width: 30px; height: 30px; border-radius: 50%; background: var(--sw); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .08); }
.tint.on span { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--btn-edge); }
.tint small { font-size: var(--fs-2xs); font-weight: 800; color: var(--muted); }
.sunling-card .replay { display: block; margin: 6px auto 0; font-size: var(--fs-sm); }
.name-form { display: flex; gap: 8px; margin: 12px 0; }
.name-form input { flex: 1; min-width: 0; font: inherit; font-size: var(--fs-md); padding: 12px 14px; border-radius: 14px; border: 2px solid var(--line); background: #fff; color: var(--ink); }
.panel { margin: 14px 12px 0; padding: 18px 16px calc(100px + env(safe-area-inset-bottom)); background: var(--paper) var(--grain); border-radius: 28px 28px 0 0; flex: 1; box-shadow: 0 -2px 20px rgba(40, 30, 80, .12); transition: background-color 1.2s ease; }
.panel.top-pad { margin-top: 4px; }
h1, h2, h3, h4 { font-weight: var(--fw-head); line-height: 1.2; text-wrap: balance; }
h1 { font-size: var(--fs-xl); margin: 6px 0; letter-spacing: -.01em; }
h2 { font-size: var(--fs-lg); margin: 4px 0; }
h3 { margin: 18px 0 8px; font-size: var(--fs-md); }
h3 small { color: var(--muted); font-weight: 600; }
.kicker { text-transform: uppercase; letter-spacing: .07em; font-size: var(--fs-xs); font-weight: var(--fw-label); color: var(--muted); margin: 0; }
.hello { font-size: var(--fs-2xl); margin: 2px 0 4px; }
.small { font-size: var(--fs-sm); color: var(--muted); }
.center { text-align: center; }
.paper { background: #fff; border-radius: var(--r); box-shadow: 0 3px 0 var(--line), var(--shadow); padding: 16px; margin: 14px 0; }
.row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.row.between { justify-content: space-between; align-items: baseline; }
.notice { background: #E7F3DD; padding: 10px 14px; border-radius: 14px; font-weight: 700; }
.notice.bad { background: #FBE3E1; color: #8A2E32; }

/* ---------- buttons ---------- */
.btn { font: inherit; font-weight: 800; border: 0; border-radius: 999px; padding: 14px 22px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; transition: transform .08s, box-shadow .08s; color: var(--ink); }
.btn.primary { background: linear-gradient(180deg, var(--btn-top), var(--btn-bot)); color: var(--btn-ink); box-shadow: 0 4px 0 var(--btn-edge), 0 10px 22px rgba(90, 60, 110, .24); }
.btn.primary:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--btn-edge); }
.btn.soft { background: #fff; box-shadow: 0 3px 0 var(--line), var(--shadow); }
.btn.soft:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--line); }
.btn:disabled { opacity: .55; cursor: default; }
.btn.big { width: 100%; font-size: var(--fs-lg); padding: 17px; margin: 14px 0 6px; }
.btn.sm { padding: 8px 14px; font-size: var(--fs-sm); }
.btn.google { background: #fff; color: #1f1f1f; border: 1px solid #747775; box-shadow: 0 2px 0 #dadce0; margin-top: 6px; font-weight: 700; padding: 11px 18px; }
.btn.google:active { transform: translateY(2px); box-shadow: none; }
/* Sign in with Apple (iOS app only): Apple's black style, system font, same size as the Google button. */
.btn.apple { background: #000; color: #fff; border: 1px solid #000; box-shadow: 0 2px 0 #444; margin-top: 6px; margin-right: 6px; font-weight: 600; padding: 11px 18px; font-family: -apple-system, system-ui, sans-serif; }
.btn.apple span { font-size: 1.15em; line-height: 1; }
.btn.apple:active { transform: translateY(2px); box-shadow: none; }
.save-card { display: flex; gap: 12px; align-items: flex-start; background: linear-gradient(180deg, #fff, #FFF8E8); }
.save-card h3 { margin: 0 0 4px; }
.save-card p { margin: 0 0 6px; }
.save-ic { font-size: 26px; width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 14px; background: #FFF1C9; }
.tiny { font-size: var(--fs-xs); color: var(--muted); margin-top: 6px !important; }
.link { background: none; border: 0; color: var(--indigo); font: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; padding: 6px; }
.link.bad { color: #B5474B; }
.ghost { border: 0; background: rgba(255, 255, 255, .9); border-radius: 999px; padding: 10px 14px; font: inherit; font-weight: 700; color: var(--ink); box-shadow: var(--shadow); cursor: pointer; }
.ghost:disabled { opacity: .5; }
.stack { display: grid; gap: 10px; width: 100%; max-width: 340px; margin-top: 10px; }

/* ---------- today ---------- */
.dots { display: flex; gap: 6px; margin: 8px 0 4px; }
.dots i { flex: 1; height: 8px; border-radius: 99px; background: #EFE4D4; }
.dots i.on { background: linear-gradient(90deg, #F7C948, #F6B38E); }
.cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 14px 0; }
.card { position: relative; background: #fff; border: 0; border-radius: 20px; padding: 14px 12px 12px; text-align: left; box-shadow: 0 3px 0 var(--line), var(--shadow); display: flex; flex-direction: column; gap: 1px; font: inherit; color: var(--ink); cursor: pointer; transition: transform .12s; min-height: 112px; }
.card:active { transform: scale(.97); }
.card .ic { font-size: 26px; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 15px; background: var(--cream); margin-bottom: 6px; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .04); }
.card[data-card="speed"] .ic { background: #FFF1C9; }
.card[data-card="memory"] .ic { background: #FDE2D6; }
.card[data-card="math"] .ic { background: #DCEBF6; }
.card[data-card="words"] .ic { background: #E7F3DD; }
.card[data-card="logic"] .ic, .card[data-card="calm"] .ic { background: #EDE6FA; }
.card[data-card="riddle"] .ic { background: #FFF1C9; }
.card small { color: var(--muted); font-weight: 600; }
.card .secs { position: absolute; top: 12px; right: 12px; font-size: var(--fs-xs); color: var(--muted); font-weight: 700; }
.card.done { background: #F6FAF1; }
.card .sticker { position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; border-radius: 50%; background: var(--sage); color: #fff; display: grid; place-items: center; font-weight: 900; transform: rotate(-8deg); box-shadow: 0 2px 0 #6E9A4F; animation: pop .4s; }

.quote { position: relative; padding: 16px 44px 14px 18px; }
.quote blockquote { margin: 8px 0 6px; font-size: var(--fs-lg); line-height: 1.4; font-weight: 700; }
.quote.compact blockquote { font-size: var(--fs-md); }
.quote figcaption { color: var(--muted); font-size: var(--fs-sm); }
.quote cite { font-style: normal; }
.qnote { margin: 8px 0 0; font-size: var(--fs-sm); background: #F4F0FB; padding: 8px 10px; border-radius: 10px; }
.tag { font-size: var(--fs-2xs); font-weight: 800; padding: 3px 10px; border-radius: 999px; background: #FFF1C9; }
.tag.honest { background: #EDE6FA; }
.tag.funny { background: #E7F3DD; }
.heart { position: absolute; top: 8px; right: 8px; border: 0; background: none; font-size: 24px; color: #D9695B; cursor: pointer; width: 40px; height: 40px; }
.heart.on { animation: pop .35s; }

.gift-banner { width: 100%; display: flex; align-items: center; gap: 14px; border: 0; padding: 8px 16px; border-radius: 20px; background: linear-gradient(90deg, #FFF1C9, #FDE2D6); box-shadow: 0 3px 0 #F0D29A, var(--shadow); font: inherit; color: var(--ink); text-align: left; cursor: pointer; margin: 12px 0 4px; }
.gift-banner small { color: var(--muted); }
.wiggle { display: inline-block; animation: wiggle 1.8s ease-in-out infinite; }

.result { text-align: center; margin-top: 52px; }
.big-sun { margin: -64px auto 0; width: 84px; }
.emoji-row { font-size: var(--fs-xl); letter-spacing: .08em; margin: 10px 0; }
.stats3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 12px 0; text-align: center; }
.stats3 div { background: var(--cream); border-radius: 14px; padding: 10px 6px; }
.stats3 b { display: block; font-size: var(--fs-md); }
.stats3 small { color: var(--muted); font-size: var(--fs-xs); }
.phone-down ul { list-style: none; padding: 0; margin: 8px 0; display: grid; gap: 6px; }
.phone-down li { background: var(--cream); padding: 10px 12px; border-radius: 12px; font-weight: 700; }
.phone-down h3 { margin-top: 0; }
.word-card h3 { font-size: var(--fs-xl); margin: 2px 0; }
.word-card h3 small { font-size: var(--fs-sm); color: var(--muted); font-weight: 600; }
.word-card p { margin: 6px 0; }
.ex { font-style: italic; }
details.more summary { cursor: pointer; font-weight: 800; }

/* ---------- overlay / game shell ---------- */
#overlay { position: fixed; inset: 0; z-index: 50; background: rgba(30, 26, 66, .5); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); display: flex; align-items: stretch; justify-content: center; }
#overlay[hidden] { display: none; }
.sheet { background: var(--paper) var(--grain); width: 100%; max-width: 480px; min-height: 100%; overflow: auto; animation: rise .28s ease-out; }
#overlay.bottom { align-items: flex-end; }
#overlay.bottom .sheet { min-height: auto; max-height: 78vh; border-radius: 26px 26px 0 0; padding: 14px 16px calc(24px + env(safe-area-inset-bottom)); }
.sheet-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.sheet-head h3 { margin: 0; }
.play { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
.play-top { display: flex; align-items: center; gap: 10px; padding: calc(12px + env(safe-area-inset-top)) 16px 10px; }
.pill { background: #fff; border-radius: 999px; padding: 5px 12px; font-weight: 800; font-size: var(--fs-sm); box-shadow: var(--shadow); white-space: nowrap; }
.play-top b { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.x { border: 0; background: #fff; width: 40px; height: 40px; border-radius: 50%; box-shadow: var(--shadow); font-size: 16px; cursor: pointer; color: var(--ink); flex: none; }
.play-body { flex: 1; padding: 8px 18px calc(28px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; }
.intro { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; margin: auto 0; padding: 10px 0; }
.intro-ic { font-size: 50px; width: 96px; height: 96px; border-radius: 30px; background: #fff; display: grid; place-items: center; box-shadow: 0 4px 0 var(--line), var(--shadow); }
.intro h2 { margin: 10px 0 0; font-size: var(--fs-2xl); }
.intro p { margin: 4px 0; max-width: 36ch; }
.intro .btn.big { max-width: 360px; }
.evid { margin: 10px auto; max-width: 38ch; text-align: left; font-size: var(--fs-sm); background: #fff; border-radius: 14px; padding: 8px 12px; box-shadow: var(--shadow); }
.evid summary { cursor: pointer; font-weight: 800; }
.evid p { margin: 6px 0 2px; color: var(--ink); }
.evid.strong summary { color: #3E7B3A; }
.evid.moderate summary { color: #946600; }
.evid.fun summary { color: var(--muted); }
.tracks { display: grid; gap: 8px; width: 100%; max-width: 360px; margin: 8px 0; text-align: left; }
.track { display: flex; gap: 10px; align-items: flex-start; background: #fff; padding: 10px 12px; border-radius: 14px; box-shadow: var(--shadow); cursor: pointer; }
.track input { margin-top: 4px; accent-color: #F2A33A; }
.track small { display: block; color: var(--muted); }

/* ---------- games ---------- */
.g-top { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.g-timer { flex: 1; display: flex; align-items: center; gap: 8px; }
.tbar { flex: 1; height: 10px; border-radius: 999px; background: #EFE4D4; overflow: hidden; }
.tbar i { display: block; height: 100%; background: linear-gradient(90deg, #F7C948, #F6B38E); transform-origin: left; }
.tnum { font-weight: 800; font-variant-numeric: tabular-nums; min-width: 3ch; text-align: right; }
.g-stat { font-weight: 700; color: var(--muted); white-space: nowrap; }
.g-stat b { color: var(--ink); }
.hint { text-align: center; color: var(--muted); font-weight: 700; margin: 12px 0; }
.grid { display: grid; gap: 8px; margin: 0 auto; width: 100%; max-width: 380px; touch-action: manipulation; }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g4 { grid-template-columns: repeat(4, 1fr); }
.g5 { grid-template-columns: repeat(5, 1fr); gap: 6px; }
.tile, .cell { aspect-ratio: 1; border: 0; border-radius: 16px; background: #fff; box-shadow: 0 3px 0 var(--line); font: inherit; font-size: var(--fs-xl); font-weight: 800; color: var(--ink); cursor: pointer; user-select: none; -webkit-user-select: none; touch-action: manipulation; transition: transform .1s, background .15s; }
.g5 .tile { font-size: var(--fs-lg); border-radius: 12px; }
.tile.ok { background: #E7F3DD; color: #9CBF7E; transform: scale(.92); box-shadow: none; }
.cell.lit { background: var(--gold); box-shadow: 0 3px 0 #D98E1F; transform: scale(1.04); }
.cell.ok { background: #A9C98F; box-shadow: 0 3px 0 #7FA864; }
.cell.bad { background: #F29E9E; }
.cell.reveal { background: #FFF1C9; outline: 3px dashed var(--gold); outline-offset: -4px; }
.pad3 { aspect-ratio: 1; border: 0; border-radius: 22px; background: var(--c); opacity: .5; box-shadow: 0 4px 0 rgba(0, 0, 0, .08); transition: opacity .1s, transform .1s, box-shadow .1s; cursor: pointer; touch-action: manipulation; }
.pad3.lit { opacity: 1; transform: scale(1.06); box-shadow: 0 0 24px var(--c), 0 4px 0 rgba(0, 0, 0, .08); }
.pad-big, .pvt-pad { display: grid; place-items: center; width: min(76vw, 300px); aspect-ratio: 1; border-radius: 50%; border: 0; margin: 12px auto; background: radial-gradient(circle at 40% 35%, #fff, #F1E6D6); box-shadow: 0 6px 0 var(--line), var(--shadow-lg); cursor: pointer; touch-action: manipulation; position: relative; user-select: none; -webkit-user-select: none; }
.pvt-pad.go { background: radial-gradient(circle at 40% 35%, #FFF7D6, #FFE08A); }
.pvt-sun svg, .stim svg { animation: pop .18s ease-out; }
.pvt-ms { position: absolute; bottom: 14%; font-weight: 800; font-size: var(--fs-md); color: var(--muted); font-variant-numeric: tabular-nums; }
.f-ok { animation: okflash .4s; }
.f-bad { animation: badflash .4s; }
.shake { animation: shake .35s; }
.q.big { font-size: var(--fs-3xl); font-weight: 900; text-align: center; margin: 18px 0 24px; font-variant-numeric: tabular-nums; border-radius: 18px; padding: 10px; }
.opts { display: grid; gap: 12px; }
.opts.three { grid-template-columns: repeat(3, 1fr); }
.opts.two, .opts.four { grid-template-columns: 1fr 1fr; }
.opt { border: 0; background: #fff; border-radius: 18px; padding: 18px 8px; font: inherit; font-size: var(--fs-xl); font-weight: 800; color: var(--ink); box-shadow: 0 4px 0 var(--line), var(--shadow); cursor: pointer; touch-action: manipulation; font-variant-numeric: tabular-nums; }
.opt:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--line); }
.opt.tall { padding: 36px 8px; font-size: var(--fs-xl); }
.opt.sw { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: var(--fs-md); }
.opt.sw i { width: 26px; height: 26px; border-radius: 50%; display: inline-block; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .15); }
.word { font-size: var(--fs-4xl); font-weight: 900; text-align: center; margin: 14px 0 26px; letter-spacing: .04em; border-radius: 18px; padding: 6px; }
.cue { text-align: center; font-weight: 700; margin: 4px 0; }
.cue.alt { color: #B5474B; }
.seq { display: flex; justify-content: center; gap: 8px; margin: 22px 0 28px; flex-wrap: wrap; border-radius: 18px; padding: 6px; }
.seq span { min-width: 58px; padding: 12px 8px; background: #fff; border-radius: 14px; box-shadow: 0 3px 0 var(--line); font-weight: 900; font-size: var(--fs-xl); text-align: center; font-variant-numeric: tabular-nums; }
.seq .q { background: #FFF1C9; }
.clue { text-align: center; min-height: 1.4em; color: var(--muted); font-weight: 700; margin: 0 0 6px; }
.slots { display: flex; justify-content: center; gap: 6px; margin: 10px 0 18px; flex-wrap: wrap; }
.slot { width: 40px; height: 48px; border-radius: 12px; background: #F1E6D6; display: grid; place-items: center; font-weight: 900; font-size: var(--fs-xl); }
.slots.long .slot { width: 27px; height: 40px; font-size: var(--fs-md); border-radius: 9px; }
.slot.on { background: #fff; box-shadow: 0 3px 0 var(--line); }
.slot.lock { background: #FFF1C9; }
.slots.win .slot { background: #A9C98F; color: #fff; box-shadow: 0 3px 0 #7FA864; }
.letters { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.letter { width: 50px; height: 56px; border: 0; border-radius: 14px; background: var(--gold); color: #4A2E22; font: inherit; font-weight: 900; font-size: var(--fs-xl); box-shadow: 0 4px 0 #D98E1F; cursor: pointer; touch-action: manipulation; }
.letter:active { transform: translateY(3px); box-shadow: 0 1px 0 #D98E1F; }
.letter:disabled { opacity: .22; box-shadow: none; }
.riddle-card { text-align: center; }
.rq { font-size: var(--fs-xl); font-weight: 800; line-height: 1.35; margin: 6px 0; }
.hints { text-align: left; color: var(--muted); margin: 8px 0 0; }
.answer { display: flex; gap: 8px; margin: 14px 0; }
.answer input { flex: 1; min-width: 0; font: inherit; font-size: var(--fs-lg); padding: 14px 16px; border-radius: 16px; border: 2px solid var(--line); background: #fff; color: var(--ink); }
.answer input:focus { outline: none; border-color: var(--gold); }
.msg { text-align: center; min-height: 1.4em; color: var(--muted); font-weight: 600; }
.breath { position: relative; width: min(70vw, 280px); aspect-ratio: 1; margin: 18px auto; display: grid; place-items: center; cursor: pointer; }
.orb { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #FFEBB0, #F6B38E 60%, #F29E9E); transform: scale(.42); transition: transform 2s ease-in-out; box-shadow: 0 10px 40px rgba(246, 179, 142, .55); }
.orb.pulse { transform: scale(.5); animation: pulse 5s ease-in-out infinite; }
.orb-core { width: 20%; aspect-ratio: 1; border-radius: 50%; background: rgba(255, 255, 255, .75); position: relative; }
.count { position: absolute; font-size: var(--fs-4xl); font-weight: 900; color: #fff; text-shadow: 0 2px 8px rgba(0, 0, 0, .18); }
.phase { text-align: center; font-size: var(--fs-xl); font-weight: 800; min-height: 2.8em; margin: 6px 0 0; }
.sub { margin-top: 4px; }
.grat { display: grid; gap: 10px; }
.grat textarea { width: 100%; font: inherit; border-radius: 16px; border: 2px solid var(--line); padding: 12px; resize: none; }
.done-view { text-align: center; margin: auto 0; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.done-view .word-card { text-align: left; width: 100%; }
.burst { animation: pop .5s cubic-bezier(.2, 1.6, .4, 1); }
.sum { font-weight: 700; margin: 2px 0; }
.reveal { font-size: var(--fs-lg); margin: 2px 0; }
.unlock { background: #FFF1C9; padding: 8px 14px; border-radius: 14px; margin: 4px 0; }

/* ---------- sunbeam rewards ---------- */
.reward { display: flex; flex-direction: column; align-items: center; margin: 10px 0 4px; }
.reward-main { position: relative; display: flex; align-items: center; gap: 6px; background: linear-gradient(180deg, #FFF3C4, #FFDE7A); border-radius: 999px; padding: 4px 20px 4px 6px; box-shadow: 0 3px 0 #E4B03E, 0 10px 26px rgba(247, 185, 51, .45); animation: rewardpop .7s cubic-bezier(.2, 1.6, .4, 1) both; }
.reward-sun svg { display: block; animation: spin 8s linear infinite; }
.reward-num { font-size: var(--fs-2xl); font-weight: 900; color: #7A4A10; font-variant-numeric: tabular-nums; min-width: 2.4ch; line-height: 1.1; }
.reward-lbl { font-weight: 800; color: #9A6B1F; font-size: var(--fs-sm); }
.reward-parts { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; margin: 10px 0 0; font-size: var(--fs-xs); }
.reward-parts span { background: #fff; border-radius: 999px; padding: 3px 10px; box-shadow: var(--shadow); font-weight: 800; color: #9A6B1F; animation: fadeup .4s both; }
.reward-parts span:nth-child(2) { animation-delay: .15s; }
.reward-parts span:nth-child(3) { animation-delay: .3s; }
.reward-parts span:nth-child(4) { animation-delay: .45s; }
.spark { position: absolute; left: 28px; top: 50%; width: 13px; height: 13px; margin: -6.5px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #FFF7CC, #F7C948 55%, #F2A33A); box-shadow: 0 0 10px rgba(247, 201, 72, .9); pointer-events: none; opacity: 0; animation: burstout 1.1s cubic-bezier(.15, .8, .3, 1) forwards; }
.spark.star { border-radius: 0; box-shadow: none; background: #F7C948; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); width: 16px; height: 16px; margin: -8px; }
.chip { position: relative; }
.chip.bump { animation: bump .6s cubic-bezier(.2, 1.8, .4, 1); }
.float-plus { position: absolute; left: 50%; top: 100%; transform: translateX(-50%); font-weight: 900; font-size: var(--fs-sm); color: #7A4A10; background: linear-gradient(180deg, #FFF3C4, #FFDE7A); padding: 3px 10px; border-radius: 999px; box-shadow: 0 2px 0 #E4B03E, 0 6px 16px rgba(247, 185, 51, .5); white-space: nowrap; pointer-events: none; animation: floatdown 1.4s ease-out forwards; }
.float-plus.minus { color: #5B4A86; background: #EDE6FA; box-shadow: 0 2px 0 #CFC2F0; }
@keyframes rewardpop { 0% { transform: scale(.3); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@keyframes burstout { 0% { transform: translate(0, 0) scale(.3); opacity: 0; } 15% { opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) scale(1); opacity: 0; } }
@keyframes fadeup { from { opacity: 0; transform: translateY(6px); } }
@keyframes bump { 40% { transform: scale(1.28); background: #FFE08A; box-shadow: 0 0 0 6px rgba(247, 201, 72, .35); } }
@keyframes floatdown { 0% { opacity: 0; transform: translate(-50%, 0) scale(.7); } 20% { opacity: 1; transform: translate(-50%, 6px) scale(1.1); } 100% { opacity: 0; transform: translate(-50%, 30px) scale(1); } }
.fact-q { font-size: var(--fs-xl); font-weight: 800; margin: 6px 0 16px; max-width: 30ch; }
.intro .opts.two { width: 100%; max-width: 340px; }
.verdict { font-size: var(--fs-xl); margin: 0; }
.verdict.ok { color: #3E7B3A; }
.verdict.bad { color: #B5474B; }
.giftbtn { border: 0; background: none; cursor: pointer; padding: 0; }
.gift-stage { min-height: 60vh; justify-content: center; }
.gift-stage.opening .giftbtn { animation: openbox .65s ease-in forwards; }
.gift-reveal { position: relative; display: grid; place-items: center; width: 220px; height: 220px; animation: pop .6s cubic-bezier(.2, 1.6, .4, 1); }
.rays { position: absolute; inset: 0; border-radius: 50%; background: repeating-conic-gradient(from 0deg, rgba(247, 201, 72, .38) 0 12deg, transparent 12deg 24deg); animation: spin 14s linear infinite; -webkit-mask: radial-gradient(circle, #000 35%, transparent 70%); mask: radial-gradient(circle, #000 35%, transparent 70%); }
.gift-reveal svg { position: relative; }
.rarity { font-size: var(--fs-2xs); font-weight: 900; text-transform: uppercase; letter-spacing: .08em; padding: 3px 10px; border-radius: 999px; background: #F1E6D6; }
.rarity.rare { background: #EDE6FA; color: #6B5BB0; }
.rarity.sparkly { background: linear-gradient(90deg, #FFE9A8, #FDE2D6, #EDE6FA); color: #946600; }

/* ---------- nook ---------- */
.seg { display: flex; background: #F1E6D6; border-radius: 999px; padding: 4px; gap: 4px; margin-bottom: 12px; }
.seg a { flex: 1; text-align: center; padding: 9px 6px; border-radius: 999px; text-decoration: none; color: var(--ink); font-weight: 800; font-size: var(--fs-sm); }
.seg a.on { background: #fff; box-shadow: var(--shadow); }
.seg label { flex: 1; position: relative; cursor: pointer; }
.seg label input { position: absolute; opacity: 0; pointer-events: none; }
.seg label span { display: block; text-align: center; padding: 8px 4px; border-radius: 999px; font-weight: 800; font-size: var(--fs-xs); }
.seg label input:checked + span { background: #fff; box-shadow: var(--shadow); }
.seg label input:focus-visible + span { outline: 3px solid #F2A33A; }
.hot { cursor: pointer; }
.hot .dot { fill: rgba(255, 255, 255, .9); stroke: #F2A33A; stroke-width: 2; stroke-dasharray: 3 3; }
.hot.full .dot { stroke-dasharray: none; stroke-width: 1.5; }
.hot path { stroke: #F2A33A; stroke-width: 2.4; stroke-linecap: round; }
.hot:hover .dot, .hot:focus .dot { fill: #FFF1C9; stroke-width: 3; }
.hot:focus { outline: none; }
/* sign-in gate before a guest's second morning */
.gate-card { text-align: center; }
.gate-card h3 { margin: 2px 0 6px; font-size: var(--fs-lg); }
.gate-card .stats3 { margin: 14px 0; }
.gate-card .btn.google, .gate-card .btn.apple { width: 100%; justify-content: center; margin-top: 4px; margin-right: 0; }
.gate-card + .small a { color: var(--ink); font-weight: 800; }
/* ---------- decorate tray (categories → options, locked ones included) ---------- */
.decor { margin-top: 4px; }
.dcats, .ditems { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 4px 2px 10px; scroll-snap-type: x proximity; }
.dcats::-webkit-scrollbar, .ditems::-webkit-scrollbar { display: none; }
.dcat { flex: none; display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 70px; padding: 8px 8px 7px; border: 0; border-radius: 16px; background: #fff; box-shadow: 0 3px 0 var(--line); font: inherit; font-size: var(--fs-2xs); font-weight: 800; color: var(--muted); cursor: pointer; scroll-snap-align: start; }
.dcat span { font-size: var(--fs-xl); line-height: 1.1; }
.dcat.on { background: var(--tab-on); color: var(--ink); box-shadow: 0 3px 0 var(--btn-edge); }
.dspots { display: flex; gap: 6px; margin: 0 0 6px; }
.dspots .chip.on { background: var(--tab-on); }
.ditems { gap: 10px; padding-bottom: 12px; }
.dcard { position: relative; flex: none; width: 92px; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px 8px; border: 2px solid transparent; border-radius: 18px; background: #fff; box-shadow: 0 3px 0 var(--line); font: inherit; color: var(--ink); cursor: pointer; scroll-snap-align: center; }
.dcard small { font-size: var(--fs-2xs); font-weight: 800; line-height: 1.15; text-align: center; min-height: 2.3em; }
.dcard.rare { background: linear-gradient(180deg, #fff, #F6F2FD); }
.dcard.sparkly { background: linear-gradient(180deg, #fff, #FFF6DA); }
.dcard.on { border-color: #8DB36B; box-shadow: 0 3px 0 #6E9A4F; }
.dcard.trying { border-color: #F2A33A; }
.dcard.new { animation: bump .9s ease 2; }
.dcard.locked svg { filter: saturate(.55) brightness(.97); opacity: .75; }
.dcard .dnone { display: grid; place-items: center; width: 64px; height: 64px; font-size: var(--fs-2xl); border-radius: 14px; background: var(--cream); }
.dbadge { position: absolute; top: 4px; right: 4px; font-style: normal; font-size: var(--fs-2xs); font-weight: 900; padding: 2px 6px; border-radius: 999px; background: rgba(58, 51, 80, .82); color: #fff; }
.dbadge.using { background: #6E9A4F; }
.dunlock { margin: 4px 0 10px; }
.dunlock p { margin: 6px 0; }
.dunlock .row { margin-top: 6px; }
.dprog { height: 8px; border-radius: 999px; background: #F1E6D6; overflow: hidden; }
.dprog i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #F7C948, #F2A33A); }
.scene.trying { outline: 3px dashed #F2A33A; outline-offset: -3px; }
.try-tag { position: absolute; z-index: 4; left: 50%; top: calc(var(--head, 0px) + 46px); transform: translateX(-50%); padding: 6px 12px; border-radius: 999px; background: rgba(58, 51, 80, .85); color: #fff; font-size: var(--fs-xs); font-weight: 800; white-space: nowrap; pointer-events: none; }
/* things you can drag around the room */
.room .mov { cursor: grab; touch-action: none; outline: none; }
.room .it.mov:focus-visible, .room .slwrap.mov:has(.sunling:focus-visible) { filter: drop-shadow(0 0 2.5px #F2A33A); }
.room .mov.dragging { cursor: grabbing; filter: drop-shadow(0 6px 5px rgba(74, 46, 34, .35)); }
.picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
.pick { border: 0; background: #fff; border-radius: 16px; padding: 8px 4px; box-shadow: 0 3px 0 var(--line); display: flex; flex-direction: column; align-items: center; gap: 4px; font: inherit; color: var(--ink); cursor: pointer; }
.pick small { font-size: var(--fs-xs); font-weight: 700; text-align: center; }
.pick.on { outline: 3px solid var(--gold); }
.pick.new { outline: 3px dashed #F2A33A; animation: pop .5s; }
.empty { font-size: var(--fs-2xl); width: 64px; height: 64px; display: grid; place-items: center; color: var(--muted); }
.shop { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.shop-item { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; margin: 0; }
.shop-item small { color: var(--muted); font-size: var(--fs-xs); }
.miles { list-style: none; padding: 0; display: grid; gap: 8px; margin: 0; }
.miles li { display: flex; align-items: center; gap: 10px; background: #fff; border-radius: 14px; padding: 6px 10px; box-shadow: var(--shadow); opacity: .72; }
.miles li.got { opacity: 1; background: #F6FAF1; }
.miles small { display: block; color: var(--muted); }
.jar { display: flex; flex-wrap: wrap; gap: 6px; }
.jar details { background: #fff; border-radius: 12px; padding: 6px 10px; box-shadow: var(--shadow); }
.jar summary { font-weight: 800; cursor: pointer; }
.jar p { margin: 4px 0 0; font-size: var(--fs-sm); max-width: 24ch; }
blockquote.saved { background: #fff; margin: 8px 0; padding: 10px 14px; border-radius: 14px; box-shadow: var(--shadow); font-weight: 700; }
blockquote.saved small { display: block; color: var(--muted); font-weight: 600; }

/* ---------- stats + me ---------- */
.streak-card { display: grid; grid-template-columns: 1.4fr 1fr 1fr; text-align: center; align-items: end; }
.streak-card small { display: block; color: var(--muted); font-size: var(--fs-xs); }
.huge { font-size: var(--fs-2xl); }
.calendar { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal, .dow { text-align: center; font-size: var(--fs-xs); font-weight: 700; }
.dow { color: var(--muted); }
.cal { aspect-ratio: 1; display: grid; place-items: center; border-radius: 10px; background: #F4EDE2; color: var(--muted); }
.cal.part { background: #FFF1C9; color: var(--ink); }
.cal.gift { background: #FFE9A8; font-size: var(--fs-md); }
.cal.today { outline: 2px solid #F2A33A; }
.chart { width: 100%; height: auto; }
.legend { font-size: var(--fs-xs); color: var(--muted); margin: 4px 0; }
.lg { display: inline-block; width: 14px; height: 4px; border-radius: 2px; vertical-align: middle; }
.lg.pre { background: #B7A6D9; }
.lg.post { background: #F2A33A; }
.bests { list-style: none; padding: 0; margin: 0; }
.bests li { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px dashed var(--line); }
.acct { display: flex; gap: 12px; align-items: center; }
.acct.col { flex-direction: column; align-items: stretch; }
.acct.col h3 { margin: 0; }
.acct small { display: block; color: var(--muted); }
.toggle { display: flex; align-items: flex-start; gap: 12px; background: #fff; padding: 12px 14px; border-radius: 16px; box-shadow: var(--shadow); margin: 8px 0; cursor: pointer; }
.toggle input { width: 22px; height: 22px; accent-color: #F2A33A; margin-top: 2px; flex: none; }
.toggle small { display: block; color: var(--muted); font-weight: 500; }
.field { margin: 12px 0; }
.field > b { display: block; margin-bottom: 6px; }
.howto summary { font-weight: 800; cursor: pointer; }
.howto ol { padding-left: 20px; }
.howto ul { padding-left: 20px; margin: 8px 0 0; }
.howto li { margin: 4px 0; font-size: var(--fs-sm); }
.morning-auto h3 { margin-top: 0; }
.morning-auto .toggle { box-shadow: none; padding: 6px 0; margin: 4px 0; }
.morning-auto .rem-time { display: flex; align-items: center; gap: 8px; margin: 0 0 6px 34px; font-weight: 700; }
.morning-auto .rem-time[hidden] { display: none; }
.morning-auto .rem-time input { font: inherit; padding: 8px 12px; border-radius: 12px; border: 2px solid var(--line); background: #fff; color: var(--ink); }
.morning-auto .btn { margin: 6px 0; }
.morning-auto details { margin-top: 10px; }
.morning-auto details p { margin: 8px 0; font-size: var(--fs-sm); }
code { background: var(--cream); padding: 1px 6px; border-radius: 6px; font-size: .85em; word-break: break-all; }
.links { text-align: center; margin: 18px 0 6px; }
.danger { text-align: center; margin: 12px 0 6px; }
.signout-row { text-align: center; margin: 18px 0 4px; }
.policy-links { text-align: center; margin: 20px 0 8px; font-size: var(--fs-sm); line-height: 1.7; }
.room-nav { position: absolute; z-index: 4; top: calc(var(--head, 0px) + 6px); left: calc(var(--x0, 0px) + 12px); right: calc(var(--x0, 0px) + 12px); display: flex; align-items: center; gap: 8px; pointer-events: none; opacity: calc(1 - var(--cover, 0) * 2.5); }
.room-nav b { margin-right: auto; padding: 6px 10px; border-radius: 999px; background: rgba(255, 250, 242, .82); color: var(--ink); font-size: var(--fs-sm); box-shadow: 0 2px 8px rgba(74, 46, 34, .12); }
.room-dots { display: inline-flex; gap: 4px; align-items: center; padding: 6px 8px; border-radius: 999px; background: rgba(255, 250, 242, .72); }
.room-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); opacity: .45; }
.room-dots i.on { background: var(--accent); opacity: 1; }
.room-arrow { position: absolute; z-index: 4; top: var(--room-mid, 45%); margin-top: -22px; opacity: calc(1 - var(--cover, 0) * 2.5); pointer-events: auto; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(255, 250, 242, .92); color: var(--ink); font-size: var(--fs-2xl); line-height: 1; box-shadow: 0 3px 12px rgba(74, 46, 34, .18); cursor: pointer; }
.room-arrow:hover, .room-arrow:focus-visible { background: #fff; }
.room-arrow.prev { left: calc(var(--x0, 0px) + 10px); }
.room-arrow.next { right: calc(var(--x0, 0px) + 10px); }
.scene.covered .room-arrow { pointer-events: none; }

/* ---------- tabs, toast, confetti ---------- */
.tabs { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: min(480px, 100%); display: grid; grid-template-columns: repeat(4, 1fr); background: rgba(255, 249, 241, .96); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-radius: 22px 22px 0 0; box-shadow: 0 -4px 20px rgba(40, 30, 80, .16); padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); z-index: 20; }
.tabs a { display: flex; flex-direction: column; align-items: center; gap: 1px; text-decoration: none; color: var(--muted); font-size: var(--fs-2xs); font-weight: 800; padding: 6px 0; border-radius: 14px; }
.tabs a span { font-size: var(--fs-xl); }
.tabs a.on { color: var(--ink); background: var(--tab-on); }
body.modal .tabs { display: none; }
body.modal { overflow: hidden; }
#toast { position: fixed; left: 50%; bottom: calc(88px + env(safe-area-inset-bottom)); transform: translate(-50%, 20px); background: #3A3350; color: #fff; padding: 10px 16px; border-radius: 14px; font-weight: 700; font-size: var(--fs-sm); opacity: 0; transition: opacity .25s, transform .25s; pointer-events: none; z-index: 60; max-width: 90vw; text-align: center; white-space: pre-line; }
#toast.show { opacity: 1; transform: translate(-50%, 0); }
.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 70; overflow: hidden; }
.confetti i { position: absolute; top: -14px; width: 9px; height: 13px; border-radius: 3px; animation: fall 1.9s ease-in forwards; }
.static-intro { color: #fff; padding: 20px; text-align: center; }
.static-intro a { color: #FFE9A8; }
.static-intro h1 { font-size: var(--fs-xl); }
/* What Sunup is, in plain HTML: read by search engines and AI assistants, shown under the Today screen. */
.about-sunup { margin: 12px 12px 0; padding: 20px 18px calc(100px + env(safe-area-inset-bottom)); background: var(--paper) var(--grain); border-radius: 28px 28px 0 0; color: var(--ink); font-size: var(--fs-sm); }
.about-sunup h2 { font-size: var(--fs-lg); margin: 18px 0 8px; }
.about-sunup h2:first-child { margin-top: 0; }
.about-sunup ol, .about-sunup ul { padding-left: 20px; margin: 8px 0; }
.about-sunup li { margin: 5px 0; }
.about-sunup details { background: #fff; border-radius: 14px; padding: 10px 14px; margin: 8px 0; box-shadow: var(--shadow); }
.about-sunup summary { font-weight: 800; cursor: pointer; }
.about-sunup details p { margin: 8px 0 2px; }
.about-sunup a { color: var(--ink); font-weight: 700; }
.with-about #view > .panel:last-child { padding-bottom: 24px; }

/* ---------- static pages (why, privacy) ---------- */
.doc-page { --wake: 1; }
.doc { max-width: 680px; margin: 0 auto; padding: calc(18px + env(safe-area-inset-top)) 18px 48px; }
.doc h1 { font-size: var(--fs-2xl); }
.doc h1 small { font-size: var(--fs-lg); color: var(--muted); font-weight: 700; }
.doc h2 { font-size: var(--fs-lg); display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin-top: 0; }
.doc .lead { font-size: var(--fs-lg); font-weight: 600; }
.doc .paper p, .doc .paper li { line-height: 1.55; }
.legend-box { background: rgba(255, 255, 255, .7); border-radius: 16px; padding: 6px 14px; }
.legend-box p { margin: 6px 0; }
.lbl { font-size: var(--fs-xs); font-weight: 800; padding: 3px 10px; border-radius: 999px; background: #F1E6D6; }
.lbl.strong { background: #E7F3DD; color: #3E7B3A; }
.lbl.moderate { background: #FFF1C9; color: #946600; }
.lbl.fun { background: #F1E6D6; color: var(--muted); }
.lbl.small { background: #E3F0F7; color: #3F6F8C; }
.refs li { font-size: var(--fs-sm); margin: 6px 0; }

/* ---------- membership ---------- */
.trial-chip { margin: 0 0 4px; }
.trial-chip .link { font-size: var(--fs-sm); text-decoration: none; background: #FFF1C9; border-radius: 999px; padding: 4px 12px; color: #7A4A10; }
.paywall { text-align: center; }
.paywall h3 { margin: 4px 0; }
.pw-sun { display: flex; justify-content: center; }
.plans { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 12px 0 6px; }
.plan { position: relative; border: 2px solid var(--line); background: #fff; border-radius: 18px; padding: 16px 8px 12px; font: inherit; color: var(--ink); cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 2px; box-shadow: 0 3px 0 var(--line); }
.plan b { font-size: var(--fs-2xl); line-height: 1.1; }
.plan small { color: var(--muted); font-weight: 700; }
.plan-name { font-size: var(--fs-xs); font-weight: 900; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: 2px; }
.plan-sub { font-size: var(--fs-xs); font-weight: 700; color: var(--ink); margin-top: 6px; background: #F4EDE2; padding: 2px 10px; border-radius: 999px; }
.plan.best .plan-sub { background: #fff; }
.plan-ticks { color: var(--muted); font-weight: 700; }
.plan.best { border-color: #F2A33A; background: linear-gradient(180deg, #FFFDF5, #FFF1C9); box-shadow: 0 3px 0 #E4B03E; }
.plan:active { transform: translateY(2px); }
.plan .badge { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); background: #F2A33A; color: #fff; font-size: var(--fs-2xs); font-weight: 900; padding: 2px 10px; border-radius: 999px; white-space: nowrap; }
.membership h3 { margin-top: 0; }

/* ---------- admin traffic page ---------- */
.stats-page { max-width: 860px; }
.stats-page .range { margin: 0; min-width: 260px; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
.kpis .paper { margin: 0; text-align: center; padding: 14px 8px; }
.kpis b { display: block; font-size: var(--fs-2xl); }
.kpis small { color: var(--muted); font-weight: 700; }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0 14px; }
.hbars { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.hbars li { display: grid; grid-template-columns: minmax(90px, 38%) 1fr auto auto; gap: 8px; align-items: center; font-size: var(--fs-sm); }
.hbars .lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hbars .bar { height: 10px; background: #F4EDE2; border-radius: 99px; overflow: hidden; }
.hbars .bar i { display: block; height: 100%; background: linear-gradient(90deg, #F7C948, #F6B38E); border-radius: 99px; }
.hbars small { color: var(--muted); min-width: 3ch; text-align: right; }
.tablewrap { overflow-x: auto; }
.tablewrap table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.tablewrap th, .tablewrap td { text-align: left; padding: 6px 8px; border-bottom: 1px dashed var(--line); white-space: nowrap; }

@keyframes pop { 0% { transform: scale(.4); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@keyframes rise { from { transform: translateY(24px); opacity: 0; } }
@keyframes fadein { from { opacity: .4; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes drift { to { transform: translateX(-26px); } }
@keyframes pulse { 50% { transform: scale(.82); } }
@keyframes wiggle { 0%, 60%, 100% { transform: rotate(0); } 70% { transform: rotate(-8deg); } 80% { transform: rotate(8deg); } 90% { transform: rotate(-4deg); } }
@keyframes openbox { 40% { transform: scale(1.15) rotate(-6deg); } 100% { transform: scale(0) rotate(20deg); opacity: 0; } }
@keyframes shake { 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(4px); } }
@keyframes okflash { 0% { box-shadow: 0 0 0 0 rgba(141, 179, 107, .75); background: #EEF6E6; } 100% { box-shadow: 0 0 0 18px rgba(141, 179, 107, 0); } }
@keyframes badflash { 0% { box-shadow: 0 0 0 0 rgba(229, 108, 100, .7); background: #FBE3E1; } 100% { box-shadow: 0 0 0 18px rgba(229, 108, 100, 0); } }
@keyframes fall { to { transform: translateY(105vh) rotate(540deg); } }
@keyframes twinkle { 0% { opacity: .35; transform: scale(.7); } 100% { opacity: 1; transform: scale(1.1); } }
@keyframes halo { from { opacity: .35; transform: scale(.9); } to { opacity: .7; transform: scale(1.15); } }
@keyframes bob { 50% { transform: translateY(-4px); } }
@keyframes fly { from { transform: translateX(0); } to { transform: translateX(-190px); } }
@keyframes shoot { 0%, 90% { opacity: 0; transform: translate(0, 0); } 92% { opacity: 1; } 100% { opacity: 0; transform: translate(-90px, 50px); } }
@keyframes firefly { 0% { opacity: .15; transform: translate(0, 0); } 100% { opacity: 1; transform: translate(6px, -8px); } }
@keyframes flutter { 0%, 100% { transform: translate(0, 0) scaleX(1); } 20% { transform: translate(8px, -6px) scaleX(.4); } 45% { transform: translate(16px, 2px) scaleX(1); } 70% { transform: translate(6px, -10px) scaleX(.5); } }
@keyframes flicker { 0%, 100% { opacity: 1; } 45% { opacity: .82; } 50% { opacity: .95; } 55% { opacity: .86; } }
@keyframes beam { from { opacity: .75; } to { opacity: 1; } }
@keyframes glare { from { opacity: .7; } to { opacity: 1; } }
@keyframes slbreathe { 50% { transform: scale(1.04, .96); } }
@keyframes slbounce { 0%, 100% { transform: translateY(0); } 45% { transform: translateY(-6px) scale(.97, 1.03); } 60% { transform: translateY(0) scale(1.05, .95); } }
@keyframes slhop { 30% { transform: translateY(-14px) scale(.95, 1.06); } 60% { transform: translateY(0) scale(1.08, .92); } 100% { transform: none; } }
@keyframes slglow { from { transform: scale(.9); } to { transform: scale(1.12); } }
@keyframes slidle { 0%, 70%, 100% { transform: none; } 35% { transform: scale(1.04, .96); } 80% { transform: translateY(-7px) scale(.97, 1.03); } 86% { transform: translateY(0) scale(1.05, .95); } 92% { transform: none; } }
@keyframes slsway { from { transform: rotate(-5deg); } to { transform: rotate(5deg); } }
@keyframes slblink { 0%, 90%, 100% { transform: scaleY(1); } 92% { transform: scaleY(.1); } 94% { transform: scaleY(1); } }
@keyframes slwave { 0%, 55%, 100% { transform: rotate(0); } 10% { transform: rotate(-24deg); } 22% { transform: rotate(10deg); } 34% { transform: rotate(-20deg); } 46% { transform: rotate(6deg); } }
@keyframes slwave-l { 0%, 55%, 100% { transform: rotate(0); } 10% { transform: rotate(24deg); } 22% { transform: rotate(-10deg); } 34% { transform: rotate(20deg); } 46% { transform: rotate(-6deg); } }
@keyframes slzz { 0% { opacity: 0; transform: translate(0, 4px); } 30% { opacity: 1; } 100% { opacity: 0; transform: translate(5px, -9px); } }
@keyframes slspin { 0% { transform: none; } 45% { transform: translateY(-14px) rotate(200deg) scale(.95); } 100% { transform: rotate(360deg); } }
@keyframes slwiggle { 20% { transform: rotate(-12deg); } 40% { transform: rotate(10deg); } 60% { transform: rotate(-7deg); } 80% { transform: rotate(4deg); } }
@keyframes slgiggle { 0%, 100% { transform: none; } 20%, 60% { transform: scale(1.07, .93); } 40%, 80% { transform: scale(.95, 1.06); } }
@keyframes slmouth { 0%, 100% { transform: none; } 30%, 70% { transform: scaleY(1.6); } }
@keyframes slcheer { 25% { transform: translateY(-18px) scale(.94, 1.08) rotate(-6deg); } 50% { transform: translateY(0) scale(1.08, .92); } 70% { transform: translateY(-8px) rotate(6deg); } 100% { transform: none; } }
@keyframes sldangle { from { transform: rotate(-7deg); } to { transform: rotate(7deg); } }
@keyframes slfx { 0% { opacity: 0; transform: translate(0, 0) scale(.5); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx, 0px), -54px) scale(1.15); } }

@media (min-width: 700px) {
  .cards { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- laptops and desktops: a full-screen layout ----------
 * Tabs move into the header, the room gets a big sticky scene on the left, the cards / decorating tray sit on the right. */
@media (min-width: 960px) {
  #app { max-width: 1320px; padding: 0 28px; }
  .top { padding: 16px 4px 14px; min-height: 72px; }
  .tabs { top: 14px; bottom: auto; width: auto; grid-template-columns: repeat(4, auto); gap: 4px; padding: 5px; border-radius: 999px; box-shadow: 0 4px 18px rgba(40, 30, 80, .16); }
  .tabs a { flex-direction: row; gap: 7px; padding: 8px 16px; font-size: var(--fs-sm); border-radius: 999px; }
  .tabs a span { font-size: var(--fs-lg); }
  #view { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(400px, 1fr); gap: 26px; align-items: start; padding-bottom: 36px; }
  #view > .scene { grid-column: 1; position: sticky; top: 84px; margin: 0; height: calc(100vh - 110px); height: calc(100dvh - 110px); min-height: 460px; max-height: 860px; border-radius: 34px; }
  #view > .panel { grid-column: 2; margin: 0; padding: 24px 24px 36px; border-radius: 30px; min-height: calc(100vh - 110px); }
  #view > .panel:only-child, #view > .static-intro:only-child { grid-column: 1 / -1; justify-self: center; width: min(100%, 880px); }
  .with-about #view > .panel:last-child { padding-bottom: 36px; }
  .about-sunup { max-width: 880px; margin: 28px auto 36px; padding: 28px 30px; border-radius: 30px; }
  #toast { bottom: 32px; }
  .cards { grid-template-columns: repeat(3, 1fr); }
  /* Sheets and games: centred cards instead of full-height phone sheets. */
  #overlay, #overlay.bottom { align-items: center; padding: 24px; }
  .sheet { max-width: 620px; min-height: 0; max-height: calc(100vh - 48px); border-radius: 30px; box-shadow: var(--shadow-lg); }
  #overlay.bottom .sheet { max-height: calc(100vh - 48px); border-radius: 30px; padding: 20px 22px 24px; }
  .play { min-height: min(780px, calc(100vh - 48px)); }
  /* Decorating tray: everything in view at once, no sideways scrolling. */
  .dcats, .ditems { flex-wrap: wrap; overflow: visible; }
  .dcat { min-width: 84px; }
  .dcard { width: 104px; }
  .calendar { max-width: 520px; margin: 0 auto; }
}
@media (min-width: 1280px) {
  #view { grid-template-columns: minmax(0, 1.45fr) minmax(440px, 1fr); }
  body.roomy { --panel-w: 480px; }
}
/* Laptops and desktops with a room: the dashboard is a panel on the right (header at its top, tabs at its bottom)
 * and the room fills the rest of the window at full height. */
@media (min-width: 960px) {
  body.roomy { --panel-w: 440px; }
  .roomy #app { max-width: none; padding: 0; }
  .roomy .top { position: fixed; top: 0; right: 0; width: var(--panel-w); z-index: 21; padding: 14px 22px 10px; min-height: 0; background: var(--paper); }
  .roomy .top.solid { box-shadow: none; }
  .roomy #view { display: block; padding: 0; }
  .roomy #view > .scene { display: block; position: fixed; inset: 0 var(--panel-w) 0 0; height: auto; min-height: 0; max-height: none; margin: 0; border-radius: 0; box-shadow: none; }
  .roomy #view > .panel { margin: 0 0 0 auto !important; width: var(--panel-w); min-height: 100vh; min-height: 100dvh; border-radius: 0; padding: 76px 24px 104px; box-shadow: -10px 0 40px rgba(40, 30, 80, .18); }
  .roomy .tabs { top: auto; bottom: 0; left: auto; right: 0; transform: none; width: var(--panel-w); grid-template-columns: repeat(4, 1fr); gap: 0; padding: 6px 8px 8px; border-radius: 0; box-shadow: none; border-top: 1px solid var(--line); background: var(--paper); }
  .roomy .tabs a { flex-direction: column; gap: 1px; padding: 6px 0; font-size: var(--fs-xs); border-radius: 14px; }
  .roomy .tabs a span { font-size: var(--fs-lg); }
  .roomy #toast { left: calc(100% - var(--panel-w) / 2); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; }
}

/* Sign-out page (/signout): your room and progress first, "stay" as the main button, sign out plainly available below. */
.so { max-width: 460px; margin: 0 auto; padding: calc(16px + env(safe-area-inset-top)) 16px 40px; }
.so-back { display: inline-block; margin: 0 0 12px; font-weight: 800; color: var(--ink); text-decoration: none; padding: 6px 12px; border-radius: 999px; background: rgba(255, 250, 242, .8); }
.so-card { background: var(--paper) var(--grain); border-radius: 28px; box-shadow: var(--shadow-lg); overflow: hidden; }
.so-card > .small { padding: 28px; margin: 0; }
.so-scene { aspect-ratio: 360 / 290; overflow: hidden; background: var(--scene-bg); }
.so-scene svg { display: block; width: 100%; height: 100%; }
.so-body { padding: 20px 22px 22px; }
.so-body h1 { font-size: var(--fs-2xl); line-height: 1.15; letter-spacing: -.02em; margin: 0 0 6px; }
.so-lead { margin: 0 0 16px; color: var(--muted); font-weight: 600; line-height: 1.45; }
.so-stats { list-style: none; padding: 0; margin: 0 0 4px; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; }
.so-stats li { display: grid; justify-items: center; gap: 1px; padding: 9px 2px; min-width: 0; background: #fff; border-radius: 16px; box-shadow: 0 2px 0 var(--line); text-align: center; }
.so-stats span { font-size: var(--fs-lg); }
.so-stats b { font-size: var(--fs-xl); line-height: 1.1; }
.so-stats small { font-size: var(--fs-2xs); line-height: 1.2; font-weight: 700; color: var(--muted); }
.so-keep { margin-top: 16px; }
.so-alts { display: grid; gap: 8px; margin: 12px 0 0; }
.so-alt { font: inherit; color: var(--ink); text-decoration: none; text-align: left; display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 10px; width: 100%; padding: 11px 14px; background: #fff; border: 0; border-radius: 16px; box-shadow: 0 2px 0 var(--line); cursor: pointer; }
.so-alt:hover { background: var(--cream); }
.so-alt > span:first-child { font-size: var(--fs-lg); text-align: center; }
.so-alt b { display: block; font-size: var(--fs-md); }
.so-alt small { color: var(--muted); font-size: var(--fs-xs); font-weight: 600; }
.so-alt i { font-style: normal; font-size: var(--fs-xl); color: var(--muted); }
.so-out { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 20px 0 0; padding-top: 16px; border-top: 2px dashed var(--line); }
.so-who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.so-who > span:last-child { min-width: 0; }
.so-who b, .so-who small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.so-who b { font-size: var(--fs-sm); }
.so-who small { color: var(--muted); font-size: var(--fs-xs); }
.so-avatar { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-weight: 900; color: #fff; background: linear-gradient(160deg, var(--lav), var(--indigo)); }
.so-signout { flex: none; font: inherit; font-weight: 800; font-size: var(--fs-sm); color: #A23B3B; background: transparent; border: 2px solid #EFC9C4; border-radius: 999px; padding: 8px 16px; cursor: pointer; }
.so-signout:hover, .so-signout:focus-visible { background: #FBE3E1; border-color: #E3A9A2; }
.so-signout:disabled { opacity: .6; cursor: default; }
.so-note { margin: 10px 0 0; font-size: var(--fs-xs); color: var(--muted); line-height: 1.45; }
.so-body .notice { margin: 12px 0 0; }
.so-actions { display: grid; gap: 10px; margin-top: 4px; }
.so-actions .btn { width: 100%; }
.so-actions .btn.google.big { margin: 0; font-size: var(--fs-md); padding: 14px; }
.so-foot { text-align: center; font-size: var(--fs-xs); color: var(--ink); opacity: .8; margin: 14px 8px 0; }
.so-foot a { color: var(--ink); }