/* ============================================================
   Wispel — Bilderbuch über den Wolken
   Palette: Himmel #8CC9F5/#A6C8F4 · Papiercreme #FFF9EF ·
   Bernstein #FFC46B · Gras #8FD98A · Koralle #FF8D7E · Tinte #4A4258
   ============================================================ */

@font-face { font-family:'Baloo 2'; font-style:normal; font-weight:600; font-display:swap; src:url(/wispel/fonts/baloo-2-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family:'Baloo 2'; font-style:normal; font-weight:700; font-display:swap; src:url(/wispel/fonts/baloo-2-latin-700-normal.woff2) format('woff2'); }
@font-face { font-family:'Baloo 2'; font-style:normal; font-weight:800; font-display:swap; src:url(/wispel/fonts/baloo-2-latin-800-normal.woff2) format('woff2'); }
@font-face { font-family:'Nunito'; font-style:normal; font-weight:400; font-display:swap; src:url(/wispel/fonts/nunito-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family:'Nunito'; font-style:normal; font-weight:600; font-display:swap; src:url(/wispel/fonts/nunito-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family:'Nunito'; font-style:normal; font-weight:700; font-display:swap; src:url(/wispel/fonts/nunito-latin-700-normal.woff2) format('woff2'); }
@font-face { font-family:'Nunito'; font-style:normal; font-weight:800; font-display:swap; src:url(/wispel/fonts/nunito-latin-800-normal.woff2) format('woff2'); }

:root {
  --ink: #4a4258;
  --ink-soft: #6f6584;
  --ink-faint: #9b91ad;
  --paper: #fff9ef;
  --paper-deep: #f7ecd8;
  --paper-line: #eddfc4;
  --sky-hi: #8cc9f5;
  --sky-mid: #b9dcf8;
  --sky-warm: #fdebd2;
  --blue: #a6c8f4;
  --amber: #ffc46b;
  --amber-deep: #f0a83f;
  --grass: #8fd98a;
  --grass-deep: #5cb96a;
  --coral: #ff8d7e;
  --coral-deep: #ef6d5e;
  --gold: #ffd98a;
  --shadow-sky: 0 10px 30px -8px rgba(94, 143, 197, .35), 0 2px 6px rgba(94, 143, 197, .18);
  --shadow-pop: 0 16px 44px -12px rgba(74, 66, 88, .35);
  --blob-r: 22px 26px 24px 28px;
  --font-disp: 'Baloo 2', 'Nunito', sans-serif;
  --font-body: 'Nunito', 'Segoe UI', sans-serif;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
}

* { margin:0; padding:0; box-sizing:border-box; }
[hidden] { display: none !important; }
html, body { height:100%; }
body {
  font-family: var(--font-body);
  color: var(--ink);
  background: linear-gradient(180deg, var(--sky-hi) 0%, var(--sky-mid) 52%, var(--sky-warm) 100%);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
button { font-family: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
input { font-family: inherit; color: inherit; }
#app { height: 100dvh; position: relative; }
.view { position: absolute; inset: 0; }

/* ============ buttons ============ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4em;
  font-family: var(--font-disp); font-weight: 700; font-size: 1rem;
  padding: .62em 1.35em; border-radius: 999px;
  transition: transform .15s var(--ease-out), box-shadow .15s var(--ease-out), background .15s;
  user-select: none; -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: scale(.94); }
.btn-primary {
  background: linear-gradient(180deg, var(--amber) 0%, var(--amber-deep) 100%);
  color: #5d431a;
  box-shadow: 0 4px 0 #d18f2e, 0 8px 18px -6px rgba(209, 143, 46, .5);
}
.btn-primary:hover { filter: brightness(1.05); }
.btn-primary:active { box-shadow: 0 1px 0 #d18f2e; transform: translateY(3px) scale(.98); }
.btn-primary:disabled { filter: saturate(.25) brightness(1.05); cursor: not-allowed; box-shadow: 0 3px 0 #cbbfa4; }
.btn-ghost {
  background: rgba(255, 249, 239, .75);
  border: 2px solid var(--paper-line);
  color: var(--ink-soft); font-size: .9rem; padding: .45em 1em;
}
.btn-ghost:hover { background: var(--paper); color: var(--ink); }
.btn-danger { background: #ffe3de; border-color: #ffc9c0; color: var(--coral-deep); }
.btn-x { border-radius: 50%; width: 2.2rem; height: 2.2rem; padding: 0; font-size: 1rem; }

/* ============================================================
   AUTH / LANDING
   ============================================================ */
#view-auth { overflow-y: auto; overflow-x: hidden; }
.sky-deco { position: fixed; inset: 0; pointer-events: none; }
.cds {
  position: absolute; background: rgba(255,255,255,.85); border-radius: 50%;
  filter: blur(1px);
  box-shadow: 38px 12px 0 -6px rgba(255,255,255,.8), -34px 14px 0 -10px rgba(255,255,255,.75), 4px -16px 0 -8px rgba(255,255,255,.9);
  animation: drift linear infinite;
}
.cds-a { width:110px; height:52px; top:12%; left:-10%; animation-duration:75s; }
.cds-b { width:70px;  height:36px; top:26%; left:-14%; animation-duration:95s; animation-delay:-40s; opacity:.8; }
.cds-c { width:140px; height:60px; top:58%; left:-12%; animation-duration:110s; animation-delay:-70s; opacity:.65; }
.cds-d { width:90px;  height:42px; top:76%; left:-10%; animation-duration:85s; animation-delay:-20s; opacity:.75; }
.cds-e { width:56px;  height:30px; top:40%; left:-8%;  animation-duration:65s; animation-delay:-55s; opacity:.9; }
@keyframes drift { to { transform: translateX(130vw); } }

.auth-wrap {
  min-height: 100dvh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .4rem; padding: clamp(1rem, 4vw, 2.5rem); position: relative;
}

/* mascot: css nebelgeist */
.mascot { position: relative; height: 118px; width: 120px; }
.mascot-body {
  position: absolute; left: 50%; top: 0; translate: -50% 0;
  width: 92px; height: 98px;
  background: linear-gradient(180deg, #ffffff 0%, #eaf4ff 70%, #d9eafc 100%);
  border-radius: 48% 52% 46% 54% / 58% 56% 44% 42%;
  box-shadow: inset 0 -10px 18px rgba(150, 190, 235, .35), 0 6px 18px -4px rgba(94,143,197,.35);
  animation: bob 3.4s ease-in-out infinite;
}
.mascot-core {
  position: absolute; left: 50%; top: 54%; translate: -50% -50%;
  width: 34px; height: 34px; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #fff3d6, var(--gold) 60%, #f5b95a);
  box-shadow: 0 0 22px 6px rgba(255, 217, 138, .75);
  animation: corepulse 3.4s ease-in-out infinite;
}
.mascot-eye {
  position: absolute; top: 32%; width: 11px; height: 13px; border-radius: 50%;
  background: var(--ink);
  animation: blink 5.2s infinite;
}
.mascot-eye::after {
  content:''; position:absolute; top:2px; left:2.5px; width:4px; height:4px;
  border-radius:50%; background:#fff;
}
.mascot-eye.l { left: 26%; } .mascot-eye.r { right: 26%; }
.mascot-cheek {
  position: absolute; top: 46%; width: 12px; height: 7px; border-radius: 50%;
  background: #ffb3a8; opacity: .8;
}
.mascot-cheek.l { left: 14%; } .mascot-cheek.r { right: 14%; }
.mascot-shadow {
  position: absolute; bottom: 0; left: 50%; translate: -50% 0;
  width: 62px; height: 12px; border-radius: 50%;
  background: rgba(94, 143, 197, .28); filter: blur(3px);
  animation: shadowpulse 3.4s ease-in-out infinite;
}
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes corepulse { 0%,100% { box-shadow: 0 0 18px 4px rgba(255,217,138,.6); } 50% { box-shadow: 0 0 28px 9px rgba(255,217,138,.85); } }
@keyframes shadowpulse { 0%,100% { transform: scaleX(1); opacity:.9; } 50% { transform: scaleX(.72); opacity:.55; } }
@keyframes blink { 0%, 91%, 100% { transform: scaleY(1); } 94%, 97% { transform: scaleY(.08); } }

.logo {
  font-family: var(--font-disp); font-weight: 800;
  font-size: clamp(3rem, 9vw, 4.6rem); line-height: 1.05;
  color: #fff;
  text-shadow: 0 3px 0 rgba(109, 158, 209, .55), 0 10px 24px rgba(94, 143, 197, .4);
  letter-spacing: .01em;
}
.tagline {
  max-width: 34ch; text-align: center; font-weight: 600;
  color: #3f5f80; text-wrap: balance; margin-bottom: 1.4rem;
}

.auth-card {
  width: min(94vw, 26rem);
  background: var(--paper);
  border-radius: var(--blob-r);
  box-shadow: var(--shadow-sky), inset 0 2px 0 #fffdf8;
  padding: 1.5rem 1.6rem 1.7rem;
  animation: cardin .6s var(--ease-out) backwards .1s;
}
@keyframes cardin { from { opacity: 0; transform: translateY(22px) scale(.97); } }

.tabs {
  display: flex; gap: .35rem; background: var(--paper-deep);
  padding: .3rem; border-radius: 999px; margin-bottom: 1.2rem;
}
.tab {
  flex: 1; font-family: var(--font-disp); font-weight: 700; font-size: .95rem;
  padding: .5em 0; border-radius: 999px; color: var(--ink-faint);
  transition: background .2s, color .2s, box-shadow .2s;
}
.tab.active { background: #fff; color: var(--ink); box-shadow: 0 2px 8px rgba(94,143,197,.22); }

form label {
  display: block; font-weight: 800; font-size: .82rem; color: var(--ink-soft);
  margin: .9rem 0 .3rem; letter-spacing: .02em;
}
form input[type="text"] {
  width: 100%; padding: .7em .95em;
  border: 2px solid var(--paper-line); border-radius: 14px 16px 15px 17px;
  background: #fffdf8; font-size: 1.05rem; font-weight: 700;
  transition: border-color .2s, box-shadow .2s;
}
form input[type="text"]:focus {
  outline: none; border-color: var(--amber);
  box-shadow: 0 0 0 4px rgba(255, 196, 107, .28);
}
form .btn-primary { width: 100%; margin-top: 1.3rem; font-size: 1.08rem; }

.form-error {
  margin-top: .9rem; padding: .6em .9em; border-radius: 12px;
  background: #ffe9e5; color: var(--coral-deep); font-weight: 700; font-size: .9rem;
}

/* code reveal */
.reveal-hi { font-family: var(--font-disp); font-weight: 800; font-size: 1.3rem; text-align: center; }
.reveal-warn {
  margin: .8rem 0 1rem; padding: .7em .9em; border-radius: 14px;
  background: #fff4dc; border: 2px dashed var(--amber);
  font-size: .88rem; font-weight: 700; color: #7d5a1e;
}
.code-box {
  display: flex; align-items: center; gap: .6rem;
  background: var(--ink); color: var(--gold);
  border-radius: 14px; padding: .8em .5em .8em 1em;
}
.code-box code {
  flex: 1; font-family: ui-monospace, 'Cascadia Mono', monospace;
  font-size: clamp(.95rem, 3.4vw, 1.15rem); font-weight: 700; letter-spacing: .04em;
  user-select: all;
}
.btn-copy { border-color: rgba(255,255,255,.25); background: rgba(255,255,255,.08); color: var(--gold); flex-shrink: 0; }
.btn-copy:hover { background: rgba(255,255,255,.16); color: #fff; }
.check-row {
  display: flex; gap: .6rem; align-items: flex-start;
  margin: 1.1rem 0 .4rem; font-weight: 700; font-size: .92rem; cursor: pointer;
}
.check-row input { width: 1.25rem; height: 1.25rem; accent-color: var(--amber-deep); flex-shrink: 0; margin-top: .1rem; }
#btn-reveal-continue { width: 100%; margin-top: .8rem; }

.lang-pill {
  position: absolute; top: max(1rem, env(safe-area-inset-top)); right: 1.2rem;
  font-family: var(--font-disp); font-weight: 800; font-size: .85rem;
  background: rgba(255,255,255,.7); color: #3f5f80;
  border-radius: 999px; padding: .35em .9em;
  box-shadow: 0 2px 8px rgba(94,143,197,.25);
}

/* ============================================================
   GAME HUD
   ============================================================ */
#stage { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
.hud { position: absolute; z-index: 5; }

.hud-tl {
  top: max(.9rem, env(safe-area-inset-top)); left: .9rem;
  display: flex; flex-direction: column; gap: .55rem;
  width: min(19rem, 62vw); /* fixed width: abs-pos flex would shrink-to-fit and crush the stat tracks */
  align-items: flex-start;
}
.pet-plate { max-width: 100%; }
.stats-panel { width: 100%; }
.pet-plate {
  background: var(--paper); border-radius: 18px 22px 20px 24px;
  box-shadow: var(--shadow-sky); padding: .6rem .95rem .55rem;
  animation: hudin .5s var(--ease-out) backwards;
}
.pet-plate-row { display: flex; align-items: center; gap: .5rem; }
.pet-name {
  font-family: var(--font-disp); font-weight: 800; font-size: 1.25rem; line-height: 1.15;
  overflow-wrap: anywhere;
}
.zustand-chip { font-size: 1.15rem; line-height: 1; cursor: help; }
.pet-plate-sub { display: flex; gap: .45rem; margin-top: .15rem; flex-wrap: wrap; }
.stage-chip, .fp-chip {
  font-size: .72rem; font-weight: 800; border-radius: 999px; padding: .18em .7em;
  letter-spacing: .02em; white-space: nowrap;
}
.stage-chip { background: #e4f0ff; color: #3c6ba8; }
.fp-chip { background: #fff1d3; color: #9a6b17; }

.stats-panel {
  position: relative;
  background: var(--paper); border-radius: 20px 24px 26px 22px;
  box-shadow: var(--shadow-sky); padding: .75rem .9rem .8rem;
  display: flex; flex-direction: column; gap: .55rem;
  animation: hudin .5s var(--ease-out) backwards .06s;
}
@keyframes hudin { from { opacity: 0; transform: translateY(-14px); } }
.stats-toggle {
  position: absolute; top: .35rem; right: .5rem; color: var(--ink-faint);
  font-size: .8rem; display: none; padding: .2rem .4rem;
}
.stat { display: grid; grid-template-columns: 1.35rem 4.9rem 1fr 2rem; align-items: center; gap: .45rem; }
.stat-ico { font-size: .95rem; text-align: center; }
.stat-label { font-size: .78rem; font-weight: 800; color: var(--ink-soft); }
.stat-track {
  height: .72rem; border-radius: 999px; background: var(--paper-deep);
  box-shadow: inset 0 1.5px 3px rgba(74,66,88,.14); overflow: hidden;
}
.stat-fill {
  display: block; height: 100%; width: 0%;
  border-radius: 999px;
  background: linear-gradient(180deg, #a7e39c, var(--grass-deep));
  transition: width .8s var(--ease-out), background .4s;
  box-shadow: inset 0 1.5px 0 rgba(255,255,255,.5);
}
.stat-fill.mid { background: linear-gradient(180deg, #ffd98a, var(--amber-deep)); }
.stat-fill.low { background: linear-gradient(180deg, #ffab9e, var(--coral-deep)); }
.stat-num { font-size: .74rem; font-weight: 800; color: var(--ink-faint); text-align: right; font-variant-numeric: tabular-nums; }

/* nav */
.hud-tr {
  top: max(.9rem, env(safe-area-inset-top)); right: .9rem;
  display: flex; flex-direction: column; gap: .5rem;
}
.nav-btn {
  position: relative; width: 2.9rem; height: 2.9rem; border-radius: 46% 54% 52% 48%;
  background: var(--paper); box-shadow: var(--shadow-sky);
  font-size: 1.25rem; display: grid; place-items: center;
  transition: transform .18s var(--ease-out), box-shadow .18s;
  animation: hudin .5s var(--ease-out) backwards;
}
.nav-btn:nth-child(2) { animation-delay: .05s; }
.nav-btn:nth-child(3) { animation-delay: .1s; }
.nav-btn:nth-child(4) { animation-delay: .15s; }
.nav-btn:nth-child(5) { animation-delay: .2s; }
.nav-btn:hover { transform: scale(1.1) rotate(-4deg); }
.nav-btn:active { transform: scale(.92); }
.badge {
  position: absolute; top: -4px; right: -4px; min-width: 1.25rem; height: 1.25rem;
  border-radius: 999px; background: var(--coral); color: #fff;
  font-size: .68rem; font-weight: 800; display: grid; place-items: center;
  padding: 0 .3em; box-shadow: 0 2px 6px rgba(239,109,94,.5);
  animation: badgepop .4s var(--ease-out);
}
@keyframes badgepop { from { transform: scale(0); } }

/* action bar */
.action-bar {
  bottom: max(1rem, env(safe-area-inset-bottom)); left: 50%; translate: -50% 0;
  display: flex; gap: .55rem; align-items: flex-end;
  background: rgba(255, 249, 239, .82);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border-radius: 26px 30px 28px 32px;
  box-shadow: var(--shadow-sky);
  padding: .6rem .75rem;
  max-width: calc(100vw - 1.2rem);
  animation: barin .55s var(--ease-out) backwards .15s;
}
@keyframes barin { from { opacity: 0; transform: translateY(30px); } }
.act-btn {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: .18rem;
  width: 4.1rem; padding: .5rem .15rem .4rem; border-radius: 18px;
  transition: transform .16s var(--ease-out), background .16s;
}
.act-btn:hover { background: rgba(255, 217, 138, .3); }
.act-btn:active { transform: scale(.9); }
.act-ico {
  font-size: 1.55rem; line-height: 1;
  filter: drop-shadow(0 2px 2px rgba(74,66,88,.18));
  transition: transform .16s var(--ease-out);
}
.act-btn:hover .act-ico { transform: translateY(-3px) rotate(-6deg); }
.act-label { font-size: .68rem; font-weight: 800; color: var(--ink-soft); white-space: nowrap; }
.act-ring {
  position: absolute; inset: 2px; border-radius: 16px; pointer-events: none;
  background: conic-gradient(rgba(74,66,88,.16) calc(var(--cd, 0) * 360deg), transparent 0);
  opacity: 0; transition: opacity .3s;
}
.act-btn.cooling { pointer-events: none; }
.act-btn.cooling .act-ico { filter: grayscale(.9) opacity(.55); }
.act-btn.cooling .act-ring { opacity: 1; }
.act-btn.blocked .act-ico { filter: grayscale(.9) opacity(.4); }
.act-cd {
  position: absolute; top: .1rem; right: .15rem;
  font-size: .6rem; font-weight: 800; color: var(--ink-faint);
  background: var(--paper); border-radius: 999px; padding: .1em .45em;
  box-shadow: 0 1px 4px rgba(74,66,88,.2);
  font-variant-numeric: tabular-nums;
}
.guest-quota {
  align-self: center; margin-left: .3rem; padding: 0 .5rem;
  font-size: .72rem; font-weight: 800; color: var(--ink-soft); max-width: 9rem; text-align: center;
}

/* visit banner */
.visit-banner {
  top: max(.9rem, env(safe-area-inset-top)); left: 50%; translate: -50% 0;
  display: flex; align-items: center; gap: .7rem;
  background: var(--paper); border-radius: 999px;
  box-shadow: var(--shadow-sky); padding: .4rem .95rem .4rem .45rem;
  max-width: calc(100vw - 1.6rem);
  animation: hudin .45s var(--ease-out);
  z-index: 6;
}
.visit-title { font-family: var(--font-disp); font-weight: 800; font-size: .98rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.btn-back { flex-shrink: 0; }

/* placement + sleep hints */
.place-hint, .sleep-hint {
  bottom: max(6.4rem, calc(env(safe-area-inset-bottom) + 6rem)); left: 50%; translate: -50% 0;
  display: flex; align-items: center; gap: .7rem;
  background: var(--ink); color: var(--paper);
  border-radius: 999px; padding: .55rem .6rem .55rem 1.1rem;
  font-weight: 700; font-size: .88rem;
  box-shadow: var(--shadow-pop);
  animation: hudin .4s var(--ease-out);
  max-width: calc(100vw - 1.6rem); flex-wrap: wrap; justify-content: center;
}
.place-hint .btn-ghost { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.22); color: var(--paper); }
.sleep-hint { background: #3d3a55; padding-right: 1.1rem; pointer-events: none; }

/* ============================================================
   DRAWER
   ============================================================ */
#drawer-backdrop {
  position: absolute; inset: 0; z-index: 18;
  background: rgba(74, 66, 88, .16);
  opacity: 0; transition: opacity .3s;
}
#drawer-backdrop.show { opacity: 1; }
.drawer {
  position: absolute; top: 0; right: 0; bottom: 0; z-index: 20;
  width: min(24rem, 100vw);
  background: var(--paper);
  box-shadow: -14px 0 44px -14px rgba(74, 66, 88, .4);
  border-radius: 26px 0 0 26px;
  display: flex; flex-direction: column;
  transform: translateX(105%);
  transition: transform .38s var(--ease-out);
}
.drawer.open { transform: translateX(0); }
.drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.1rem 1.2rem .8rem 1.4rem;
}
.drawer-head h2 { font-family: var(--font-disp); font-weight: 800; font-size: 1.35rem; }
.drawer-body { flex: 1; overflow-y: auto; padding: .2rem 1.4rem 1.6rem; overscroll-behavior: contain; }

.drawer-section-label {
  font-size: .74rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-faint); margin: 1.3rem 0 .55rem;
}
.drawer-body > .drawer-section-label:first-child { margin-top: .3rem; }

/* friend code share box */
.share-box {
  display: flex; align-items: center; gap: .6rem;
  background: #eef6ff; border: 2px dashed var(--blue);
  border-radius: 16px; padding: .65rem .65rem .65rem 1rem;
}
.share-box code { flex: 1; font-family: ui-monospace, monospace; font-weight: 700; font-size: 1.05rem; color: #33619c; user-select: all; }
.share-box .btn-ghost { flex-shrink: 0; }

.row-input { display: flex; gap: .5rem; }
.row-input input[type="text"] {
  flex: 1; min-width: 0; padding: .55em .8em;
  border: 2px solid var(--paper-line); border-radius: 13px;
  background: #fffdf8; font-size: .95rem; font-weight: 700;
}
.row-input input[type="text"]:focus { outline: none; border-color: var(--amber); box-shadow: 0 0 0 3px rgba(255,196,107,.28); }

/* cards in drawer */
.card-row {
  display: flex; align-items: center; gap: .8rem;
  background: #fffdf8; border: 2px solid var(--paper-line);
  border-radius: 16px 18px 17px 19px; padding: .7rem .8rem;
  margin-bottom: .6rem;
  animation: rowin .35s var(--ease-out) backwards;
}
@keyframes rowin { from { opacity: 0; transform: translateX(18px); } }
.card-emoji { font-size: 1.6rem; flex-shrink: 0; width: 2.2rem; text-align: center; }
.card-main { flex: 1; min-width: 0; }
.card-title { font-family: var(--font-disp); font-weight: 700; font-size: 1rem; line-height: 1.2; overflow-wrap: anywhere; }
.card-sub { font-size: .78rem; font-weight: 700; color: var(--ink-faint); margin-top: .1rem; }
.card-actions { display: flex; flex-direction: column; gap: .3rem; align-items: stretch; flex-shrink: 0; }
.card-actions .btn { font-size: .8rem; padding: .4em .9em; }

.empty-note {
  text-align: center; color: var(--ink-faint); font-weight: 700; font-size: .9rem;
  padding: 1.6rem 1rem; line-height: 1.5;
}
.empty-note .big { font-size: 2rem; display: block; margin-bottom: .4rem; }

/* deco catalog */
.deco-card { position: relative; }
.deco-card.locked { opacity: .78; }
.deco-lock {
  font-size: .72rem; font-weight: 800; color: #9a6b17;
  background: #fff1d3; border-radius: 999px; padding: .15em .6em; white-space: nowrap;
}
.deco-progress {
  height: .4rem; margin-top: .35rem; border-radius: 999px; background: var(--paper-deep); overflow: hidden;
}
.deco-progress span { display: block; height: 100%; background: linear-gradient(90deg, var(--gold), var(--amber-deep)); border-radius: 999px; }

/* settings */
.settings-block { margin-bottom: .4rem; }
.hint-soft { font-size: .78rem; font-weight: 700; color: var(--ink-faint); line-height: 1.45; margin-top: .45rem; }

/* ============================================================
   TOASTS + FX + BOOT
   ============================================================ */
#toast-root {
  position: fixed; top: max(.9rem, env(safe-area-inset-top)); left: 50%; translate: -50% 0;
  z-index: 60; display: flex; flex-direction: column; gap: .5rem; align-items: center;
  pointer-events: none; width: max-content; max-width: 92vw;
}
.toast {
  background: var(--ink); color: var(--paper);
  font-weight: 700; font-size: .92rem;
  border-radius: 999px; padding: .6em 1.3em;
  box-shadow: var(--shadow-pop);
  animation: toastin .4s var(--ease-out), toastout .3s ease-in forwards var(--toast-life, 3.2s);
  max-width: 92vw; text-align: center;
}
.toast.good { background: #3e7d4c; }
.toast.bad { background: #b3503f; }
@keyframes toastin { from { opacity: 0; transform: translateY(-16px) scale(.92); } }
@keyframes toastout { to { opacity: 0; transform: translateY(-10px) scale(.95); } }

#fx-root { position: fixed; inset: 0; pointer-events: none; z-index: 55; overflow: hidden; }
.fx-emoji {
  position: absolute; font-size: 1.5rem; will-change: transform, opacity;
  animation: fxfloat 1.1s ease-out forwards;
}
@keyframes fxfloat {
  from { opacity: 1; transform: translate(0, 0) scale(.6) rotate(0deg); }
  to { opacity: 0; transform: translate(var(--fx-dx, 0px), var(--fx-dy, -90px)) scale(1.25) rotate(var(--fx-rot, 0deg)); }
}

.boot {
  position: fixed; inset: 0; z-index: 100;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.1rem;
  background: linear-gradient(180deg, var(--sky-hi), var(--sky-mid) 60%, var(--sky-warm));
  font-family: var(--font-disp); font-weight: 700; color: #3f5f80;
  transition: opacity .5s ease, visibility .5s;
}
.boot.gone { opacity: 0; visibility: hidden; }
.boot-blob {
  width: 74px; height: 78px; position: relative;
  background: linear-gradient(180deg, #fff, #eaf4ff 75%);
  border-radius: 48% 52% 46% 54% / 58% 56% 44% 42%;
  box-shadow: 0 8px 22px -6px rgba(94,143,197,.4);
  animation: bob 2.6s ease-in-out infinite;
}
.boot-core {
  position: absolute; inset: 0; margin: auto; width: 26px; height: 26px; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #fff3d6, var(--gold) 60%, #f5b95a);
  box-shadow: 0 0 20px 6px rgba(255,217,138,.75);
  animation: corepulse 2.6s ease-in-out infinite;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 680px) {
  .hud-tl { width: min(17rem, 68vw); }
  .stats-toggle { display: block; }
  .stats-panel { padding-right: 1.7rem; } /* room for the collapse toggle */
  .stats-panel.collapsed .stat .stat-label, .stats-panel.collapsed .stat .stat-num { display: none; }
  .stats-panel.collapsed .stat { grid-template-columns: 1.3rem 1fr; }
  .stats-panel.collapsed { padding: .55rem .7rem; gap: .4rem; }
  .stat { grid-template-columns: 1.3rem 4.2rem 1fr 1.8rem; gap: .35rem; }
  .stat-label { font-size: .7rem; }
  .act-btn { width: 3.4rem; }
  .act-label { font-size: .6rem; }
  .act-ico { font-size: 1.35rem; }
  .drawer { width: 100vw; border-radius: 26px 26px 0 0; top: auto; max-height: 78dvh; height: auto; min-height: 46dvh;
    transform: translateY(105%); }
  .drawer.open { transform: translateY(0); }
  .nav-btn { width: 2.6rem; height: 2.6rem; font-size: 1.1rem; }
  .guest-quota { max-width: 6.5rem; font-size: .64rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01s !important; animation-iteration-count: 1 !important; transition-duration: .01s !important; }
  .cds { display: none; }
}