/* ═══════════════════════════════════════════
   DESIGN TOKENS
═══════════════════════════════════════════ */
:root {
  --void:#050508;--deep:#0a0a12;--surface:#12121f;--surface2:#16162a;
  --border:rgba(255,255,255,.09);--border2:rgba(255,255,255,.15);
  --muted:rgba(255,255,255,.68);--text:rgba(255,255,255,.97);
  --gold:#c9a84c;--gold-dim:rgba(201,168,76,.35);--gold-faint:rgba(201,168,76,.08);
  --calm:#5b8fa8;--chaos:#c44b4b;--reflective:#7c6fa0;
  --anxious:#c47a3a;--joyful:#7aab6e;--empty:#4a4a5a;
  --font-display:'Cinzel Decorative',serif;
  --font-body:'Cormorant Garamond',serif;
  --font-mono:'DM Mono',monospace;
  --font-editorial:'Playfair Display',serif;
  --ease:cubic-bezier(.16,1,.3,1);
  --ease-in:cubic-bezier(.4,0,1,1);
  --ease-out:cubic-bezier(0,0,.6,1);
  --radius:8px;
  --breath-scale:1;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--void);color:var(--text);
  font-family:var(--font-body);font-size:16px;line-height:1.6;
  min-height:100vh;overflow-x:hidden;
  transition:background .8s,color .8s;
}
button{font-family:inherit;cursor:pointer}
textarea,input{font-family:inherit}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:2px}
::-webkit-scrollbar{width:3px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(201,168,76,.25);border-radius:2px}

/* ── CANVAS LAYERS ── */
#cosmos-canvas,#ripple-canvas,#connection-canvas{
  position:fixed;inset:0;z-index:0;pointer-events:none;
}
#ripple-canvas{z-index:1}
#connection-canvas{z-index:2}

/* ── BREATHING OVERLAY ── */
#breath-layer{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse at 50% 50%,rgba(201,168,76,.032) 0%,transparent 70%);
  transform:scale(var(--breath-scale));
  transition:transform 4s ease-in-out;
}

#ghost-layer{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
#silence-layer{position:fixed;inset:0;z-index:1;pointer-events:none;overflow:hidden}

#whip-canvas{
  position:fixed;inset:0;z-index:2;pointer-events:none;
  opacity:0;transition:opacity .3s;
}

/* ── LAYOUT ── */
.app-shell{position:relative;z-index:10;min-height:100vh}

/* ── NAV ── */
nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 28px;
  background:linear-gradient(to bottom,rgba(5,5,8,.98) 0%,transparent 100%);
  backdrop-filter:blur(0px);
}
.nav-logo{
  font-family:var(--font-display);font-size:13px;
  letter-spacing:.18em;color:var(--gold);text-decoration:none;
  position:relative;font-weight:400;
}
.nav-logo::after{
  content:'';position:absolute;bottom:-3px;left:0;right:0;height:1px;
  background:linear-gradient(to right,transparent,var(--gold-dim),transparent);
}
.nav-links{display:flex;gap:4px;list-style:none}
.nav-links button{
  background:none;border:none;color:var(--muted);
  font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;
  padding:6px 13px;border-radius:20px;
  transition:color .25s,background .25s,border-color .25s;
  text-transform:uppercase;border:1px solid transparent;
}
.nav-links button:hover{color:var(--text);background:rgba(255,255,255,.06)}
.nav-links button.active{color:var(--gold);border-color:var(--gold-dim);background:var(--gold-faint)}

/* ── VIEWS ── */
.view{display:none;min-height:100vh;padding:96px 28px 80px}
.view.active{display:block}

/* ── HOME ── */
#view-home{
  display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;min-height:100vh;padding:80px 24px;
}
#view-home.active{display:flex}

.hero-eyebrow{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.35em;
  color:var(--gold);text-transform:uppercase;margin-bottom:22px;
  opacity:0;animation:fadeUp 1s .3s var(--ease) forwards;
}
.hero-title{
  font-family:var(--font-display);font-size:clamp(32px,8vw,80px);
  font-weight:400;line-height:1.05;margin-bottom:22px;
  opacity:0;animation:fadeUp 1s .5s var(--ease) forwards;
}
.hero-title span{color:var(--gold)}
.hero-sub{
  font-size:clamp(16px,2.4vw,21px);font-weight:300;font-style:italic;
  color:var(--muted);max-width:500px;margin-bottom:48px;
  opacity:0;animation:fadeUp 1s .7s var(--ease) forwards;
  line-height:1.7;
}
.hero-actions{
  display:flex;gap:14px;flex-wrap:wrap;justify-content:center;
  opacity:0;animation:fadeUp 1s .9s var(--ease) forwards;
}

.btn-primary{
  background:var(--gold);color:var(--void);border:none;
  padding:14px 36px;font-family:var(--font-mono);font-size:11px;
  letter-spacing:.18em;text-transform:uppercase;border-radius:3px;
  transition:background .3s,transform .2s,box-shadow .3s;
  font-weight:400;
}
.btn-primary:hover{background:#d4b45a;transform:translateY(-2px);box-shadow:0 8px 28px rgba(201,168,76,.35)}
.btn-ghost{
  background:transparent;color:var(--text);
  border:1px solid var(--border2);padding:14px 36px;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;border-radius:3px;
  transition:color .3s,border-color .3s,background .3s;
}
.btn-ghost:hover{color:var(--gold);border-color:var(--gold-dim);background:var(--gold-faint)}

/* Weather Widget */
.weather-widget{
  margin-top:64px;display:flex;flex-direction:column;
  align-items:center;gap:8px;
  opacity:0;animation:fadeUp 1s 1.1s var(--ease) forwards;
}
.weather-label{font-family:var(--font-mono);font-size:9px;letter-spacing:.28em;color:var(--gold);text-transform:uppercase}
.weather-display{font-size:44px;line-height:1}
.weather-text{font-size:14px;font-style:italic;color:var(--muted)}

/* Identity Orb */
.identity-orb-container{
  margin-top:44px;display:flex;flex-direction:column;align-items:center;gap:10px;
  opacity:0;animation:fadeUp 1s 1.3s var(--ease) forwards;
}
#identity-orb{width:80px;height:80px;border-radius:50%;animation:orbPulse 4s ease-in-out infinite}
.orb-label{font-family:var(--font-mono);font-size:9px;letter-spacing:.2em;color:var(--muted);text-transform:uppercase}

/* ── IDENTITY CORE ── */
#identity-core-wrap{
  margin-top:40px;display:flex;flex-direction:column;align-items:center;gap:12px;
  opacity:0;animation:fadeUp 1s 1.5s var(--ease) forwards;
}
#identity-core-canvas{cursor:pointer;border-radius:50%}
.identity-core-label{font-family:var(--font-mono);font-size:9px;letter-spacing:.2em;color:rgba(201,168,76,.55);text-transform:uppercase}

/* ── ENTRY VIEW ── */
.entry-container{max-width:640px;margin:0 auto}
.view-title{
  font-family:var(--font-display);font-size:clamp(28px,5vw,50px);
  font-weight:400;margin-bottom:10px;color:var(--gold);
  letter-spacing:.05em;text-shadow:0 0 40px rgba(201,168,76,.18);
}
.view-subtitle{font-size:17px;font-style:italic;color:var(--muted);margin-bottom:48px;line-height:1.68;letter-spacing:.01em}
.form-section{margin-bottom:36px}
.form-label{
  font-family:var(--font-mono);font-size:10px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--gold);margin-bottom:14px;display:block;
  font-weight:400;opacity:.95;
}

/* Mood Grid */
.mood-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.mood-btn{
  background:var(--surface);border:1px solid var(--border);color:var(--muted);
  padding:18px 10px;border-radius:var(--radius);
  transition:border-color .3s,color .25s,transform .2s,background .3s,box-shadow .3s;
  display:flex;flex-direction:column;align-items:center;gap:6px;font-size:13px;
}
.mood-btn .mood-icon{font-size:22px}
.mood-btn:hover{border-color:rgba(255,255,255,.25);color:var(--text);transform:translateY(-2px)}
.mood-btn.selected{color:#fff}
.mood-btn[data-mood="calm"].selected{background:var(--calm);border-color:var(--calm);box-shadow:0 0 24px rgba(91,143,168,.35)}
.mood-btn[data-mood="chaos"].selected{background:var(--chaos);border-color:var(--chaos);box-shadow:0 0 24px rgba(196,75,75,.35)}
.mood-btn[data-mood="reflective"].selected{background:var(--reflective);border-color:var(--reflective);box-shadow:0 0 24px rgba(124,111,160,.35)}
.mood-btn[data-mood="anxious"].selected{background:var(--anxious);border-color:var(--anxious);box-shadow:0 0 24px rgba(196,122,58,.35)}
.mood-btn[data-mood="joyful"].selected{background:var(--joyful);border-color:var(--joyful);box-shadow:0 0 24px rgba(122,171,110,.35)}
.mood-btn[data-mood="empty"].selected{background:var(--empty);border-color:var(--empty);box-shadow:0 0 24px rgba(74,74,90,.35)}

/* Sliders */
.intensity-row,.silence-row{display:flex;align-items:center;gap:14px}
.intensity-slider{
  -webkit-appearance:none;appearance:none;flex:1;height:3px;
  background:var(--border);outline:none;border-radius:3px;cursor:pointer;
}
.intensity-slider::-webkit-slider-thumb{
  -webkit-appearance:none;width:16px;height:16px;
  background:var(--gold);border-radius:50%;transition:transform .2s,box-shadow .2s;
}
.intensity-slider::-webkit-slider-thumb:hover{transform:scale(1.4);box-shadow:0 0 10px var(--gold)}
.intensity-value{font-family:var(--font-mono);font-size:24px;font-weight:300;color:var(--gold);min-width:28px;text-align:right}
.silence-labels{display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:9px;color:var(--muted);text-transform:uppercase;letter-spacing:.1em;margin-top:7px}

/* Textarea */
.thought-area{
  width:100%;background:var(--surface);border:1px solid var(--border);
  color:var(--text);font-size:16px;font-style:italic;line-height:1.8;
  padding:18px;border-radius:var(--radius);resize:none;min-height:110px;
  outline:none;transition:border-color .3s,box-shadow .3s;
}
.thought-area::placeholder{color:rgba(255,255,255,.22)}
.thought-area:focus{border-color:var(--gold-dim);box-shadow:0 0 28px rgba(201,168,76,.07)}

/* Void toggle */
.void-toggle{display:flex;align-items:center;gap:10px;margin-top:10px;cursor:pointer;width:fit-content}
.toggle-box{
  width:18px;height:18px;border:1px solid var(--border);border-radius:3px;
  display:flex;align-items:center;justify-content:center;font-size:11px;transition:all .3s;
}
.void-toggle.active .toggle-box{background:var(--gold);border-color:var(--gold);color:var(--void)}
.toggle-label{font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}

/* Submit */
.submit-entry-btn{
  width:100%;background:transparent;border:1px solid var(--gold-dim);
  color:var(--gold);padding:18px;font-family:var(--font-display);
  font-size:13px;letter-spacing:.22em;border-radius:3px;
  transition:background .4s,box-shadow .4s,transform .2s;margin-top:14px;text-transform:uppercase;
}
.submit-entry-btn:hover{background:var(--gold-dim);box-shadow:0 0 48px rgba(201,168,76,.1);transform:translateY(-1px)}

/* Confirm state */
.echo-confirm{display:none;text-align:center;padding:60px 20px;animation:fadeUp .8s var(--ease) forwards}
.echo-confirm.show{display:block}
.confirm-orb{width:100px;height:100px;border-radius:50%;margin:0 auto 24px}
.confirm-title{font-family:var(--font-display);font-size:28px;color:var(--gold);margin-bottom:10px;letter-spacing:.05em}
.confirm-sub{font-size:17px;font-style:italic;color:var(--muted)}

/* Export/Import row */
.vault-actions{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap;justify-content:center}
.vault-btn{
  background:rgba(255,255,255,.03);border:1px solid var(--border);
  color:var(--muted);padding:9px 20px;border-radius:var(--radius);
  font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;transition:all .3s;
}
.vault-btn:hover{color:var(--text);border-color:rgba(255,255,255,.22);background:rgba(255,255,255,.05)}

/* ── TIMELINE ── */
#view-timeline{max-width:980px;margin:0 auto}
.timeline-header{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:44px;flex-wrap:wrap;gap:14px;
}
.empty-state{text-align:center;padding:80px 20px}
.empty-icon{font-size:48px;margin-bottom:16px;opacity:.4}
.empty-title{font-family:var(--font-display);font-size:24px;color:var(--muted);margin-bottom:8px;letter-spacing:.05em}
.empty-sub{font-size:14px;font-style:italic;color:rgba(255,255,255,.22)}

/* Memory Bubble Field */
#bubble-field{position:relative;width:100%;min-height:520px}

/* Interactive orbs */
.bubble-wrap{
  position:absolute;cursor:grab;
  touch-action:none;user-select:none;
  transition:none;
  will-change:transform;
}
.bubble-wrap:active{cursor:grabbing}
.echo-bubble{
  border-radius:50%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  position:relative;z-index:2;
  transition:filter .4s,opacity .6s;
  will-change:transform,box-shadow;
}
.bubble-shadow{
  position:absolute;border-radius:50%;
  top:0;left:0;width:100%;height:100%;
  opacity:0;filter:blur(12px);z-index:1;
  transition:opacity .4s;pointer-events:none;
}
.bubble-wrap.focused .bubble-shadow{opacity:.9}
.bubble-wrap.faded{opacity:.08;pointer-events:none;transition:opacity .6s}
.bubble-wrap.focused{z-index:5}

/* Orb collapse/dissolve */
.bubble-wrap.collapsing .echo-bubble{
  animation:orbCollapse .9s var(--ease-in) forwards;
}
@keyframes orbCollapse{
  0%{transform:scale(1);filter:blur(0px);opacity:1}
  40%{transform:scale(0.85);filter:blur(2px);opacity:.7}
  80%{transform:scale(0.3);filter:blur(8px);opacity:.2}
  100%{transform:scale(0);filter:blur(14px);opacity:0}
}

.echo-bubble .node-int{font-size:19px;font-family:var(--font-editorial);color:rgba(255,255,255,.98);font-weight:400;line-height:1}
.echo-bubble .node-mood{font-size:9px;font-family:var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.8)}
.echo-bubble .node-date{font-size:8px;font-family:var(--font-mono);color:rgba(255,255,255,.5)}

/* Sparkle trail */
.sparkle{
  position:fixed;pointer-events:none;z-index:9;border-radius:50%;
  animation:sparkleFade .7s var(--ease-out) forwards;
}
@keyframes sparkleFade{
  0%{opacity:.8;transform:scale(1)}
  100%{opacity:0;transform:scale(0)}
}

/* Merge flash */
.merge-flash{
  position:fixed;pointer-events:none;z-index:8;border-radius:50%;
  animation:mergeFlash .6s var(--ease) forwards;
}
@keyframes mergeFlash{
  0%{opacity:.9;transform:scale(.5)}
  50%{opacity:.6;transform:scale(1.4)}
  100%{opacity:0;transform:scale(2)}
}

/* Connection overlay */
#connection-canvas{z-index:3;pointer-events:none}

/* Gravity ring */
.gravity-ring{
  position:absolute;border-radius:50%;border:1px solid rgba(201,168,76,.1);
  pointer-events:none;z-index:0;
  animation:gravityPulse 3s ease-in-out infinite;
}

/* ── WRAPPED ── */
#view-wrapped{max-width:700px;margin:0 auto}
.period-toggle{
  display:flex;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);padding:3px;width:fit-content;margin-bottom:36px;
}
.period-btn{
  background:none;border:none;color:var(--muted);
  font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;padding:8px 20px;border-radius:5px;transition:all .3s;
}
.period-btn.active{background:var(--gold);color:var(--void)}
.wrapped-card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);padding:30px;margin-bottom:18px;
  transition:border-color .3s;
}
.wrapped-card:hover{border-color:var(--border2)}
.wrapped-card-title{
  font-family:var(--font-mono);font-size:10px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--gold);margin-bottom:18px;
}

.stat-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
.stat-item{background:rgba(255,255,255,.03);border-radius:6px;padding:16px}
.stat-value{font-family:var(--font-editorial);font-size:34px;font-weight:400;color:var(--gold)}
.stat-label{font-family:var(--font-mono);font-size:9px;color:var(--muted);text-transform:uppercase;letter-spacing:.1em;margin-top:4px}
.balance-bar{height:5px;background:var(--border);border-radius:4px;overflow:hidden;margin:10px 0}
.balance-fill{height:100%;border-radius:4px;background:linear-gradient(to right,var(--calm),var(--chaos));transition:width 1.2s var(--ease)}
.balance-labels{display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:9px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.pattern-list{list-style:none;display:flex;flex-direction:column;gap:8px}
.pattern-item{display:flex;align-items:center;gap:10px;padding:11px;background:rgba(255,255,255,.02);border-radius:5px}
.pattern-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.pattern-name{font-family:var(--font-body);font-size:15px;color:var(--text);flex:1}
.pattern-count{font-family:var(--font-mono);font-size:10px;color:var(--muted)}
.palette-wrap{display:flex;gap:8px;padding-bottom:24px;flex-wrap:wrap}
.palette-swatch{width:42px;height:42px;border-radius:5px;position:relative;flex-shrink:0}
.palette-swatch::after{
  content:attr(data-mood);position:absolute;bottom:-18px;left:50%;
  transform:translateX(-50%);font-family:var(--font-mono);font-size:8px;
  color:var(--muted);white-space:nowrap;text-transform:uppercase;
}

/* ── FUN VIEW ── */
#view-fun{max-width:700px;margin:0 auto}
.fun-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;margin-top:28px}
.fun-card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:28px;cursor:pointer;transition:border-color .3s,transform .25s,box-shadow .3s;
  position:relative;overflow:hidden;
}
.fun-card::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(circle at 30% 30%,var(--card-glow,rgba(201,168,76,.05)) 0%,transparent 60%);
  opacity:0;transition:opacity .35s;
}
.fun-card:hover::before{opacity:1}
.fun-card:hover{border-color:rgba(255,255,255,.18);transform:translateY(-4px);box-shadow:0 16px 48px rgba(0,0,0,.35)}
.fun-card-icon{font-size:28px;margin-bottom:12px}
.fun-card-title{font-family:var(--font-editorial);font-size:18px;color:var(--gold);margin-bottom:6px}
.fun-card-desc{font-size:13px;font-style:italic;color:var(--muted)}

/* ── NODE DETAIL PANEL ── */
.node-detail{
  display:none;position:fixed;inset:0;z-index:200;
  background:rgba(5,5,8,.93);backdrop-filter:blur(28px);
  align-items:center;justify-content:center;padding:24px;
}
.node-detail.open{display:flex}
.detail-card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:12px;padding:40px;max-width:480px;width:100%;position:relative;
  animation:scaleIn .35s var(--ease) forwards;
}
.detail-close{
  position:absolute;top:14px;right:18px;background:none;border:none;
  color:var(--muted);font-size:22px;transition:color .2s;line-height:1;
}
.detail-close:hover{color:var(--text)}
.detail-mood-badge{
  display:inline-block;padding:4px 14px;border-radius:20px;
  font-family:var(--font-mono);font-size:9px;letter-spacing:.18em;
  text-transform:uppercase;margin-bottom:18px;color:#fff;
}
.detail-intensity{font-family:var(--font-editorial);font-size:48px;font-weight:400;color:var(--gold);margin-bottom:3px}
.detail-int-label{font-family:var(--font-mono);font-size:9px;color:var(--muted);text-transform:uppercase;letter-spacing:.18em;margin-bottom:18px}
.detail-thought{font-size:18px;font-style:italic;line-height:1.8;color:var(--text);margin-bottom:18px}
.detail-void-note{font-family:var(--font-mono);font-size:10px;color:var(--muted);font-style:normal}
.detail-meta{font-family:var(--font-mono);font-size:9px;color:rgba(255,255,255,.35);margin-top:22px;padding-top:18px;border-top:1px solid var(--border)}

/* ── FUN MODAL ── */
.fun-modal{
  display:none;position:fixed;inset:0;z-index:300;
  background:rgba(5,5,8,.97);backdrop-filter:blur(32px);
  align-items:center;justify-content:center;padding:24px;overflow-y:auto;
}
.fun-modal.open{display:flex}
.fun-modal-card{max-width:540px;width:100%;position:relative;animation:scaleIn .35s var(--ease) forwards}
.modal-close-btn{
  position:absolute;top:-12px;right:-12px;z-index:10;
  width:32px;height:32px;background:var(--surface);border:1px solid var(--border);
  border-radius:50%;color:var(--muted);display:flex;align-items:center;justify-content:center;
  font-size:16px;transition:all .2s;
}
.modal-close-btn:hover{color:var(--text);border-color:rgba(255,255,255,.25)}

/* ── RECEIPT (THEMED) ── */
.receipt{border-radius:3px;position:relative;overflow:hidden}
.receipt-paper{padding:32px 28px;font-family:var(--font-mono)}
.receipt::before,.receipt::after{
  content:'';position:absolute;left:0;right:0;height:14px;z-index:2;
}
.receipt-header{text-align:center;margin-bottom:20px;position:relative}
.receipt-char{font-size:44px;margin-bottom:8px}
.receipt-store{font-size:17px;font-weight:400;letter-spacing:.12em}
.receipt-tagline{font-size:9px;margin-top:4px}
.receipt-divider{border:none;border-top:1px dashed;margin:14px 0;opacity:.4}
.receipt-line{display:flex;justify-content:space-between;font-size:10px;margin-bottom:8px;line-height:1.5}
.receipt-line.bold{font-weight:600;font-size:12px}
.receipt-footer{text-align:center;margin-top:16px;font-size:9px;opacity:.65}
.receipt-barcode{font-size:28px;letter-spacing:-2px;text-align:center;margin:12px 0;opacity:.5}
.receipt-actions{display:flex;gap:8px;margin-top:14px}
.receipt-action-btn{
  flex:1;padding:9px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);
  color:var(--muted);font-family:var(--font-mono);font-size:9px;letter-spacing:.1em;
  text-transform:uppercase;border-radius:4px;transition:all .25s;cursor:pointer;
}
.receipt-action-btn:hover{color:var(--gold);border-color:var(--gold-dim)}

/* Receipt theme: classic */
.receipt.classic .receipt-paper{background:#faf8f0;color:#1a1a1a}
.receipt.classic::before{top:-7px;background:repeating-linear-gradient(90deg,#faf8f0 0,#faf8f0 8px,#e8e5d8 8px,#e8e5d8 16px)}
.receipt.classic::after{bottom:-7px;background:repeating-linear-gradient(90deg,#faf8f0 0,#faf8f0 8px,#e8e5d8 8px,#e8e5d8 16px)}
/* Receipt theme: dreamy */
.receipt.dreamy .receipt-paper{background:linear-gradient(135deg,#1a0828,#0e0a2a);color:rgba(230,200,255,.9);border:1px solid rgba(200,150,255,.2)}
.receipt.dreamy .receipt-store{background:linear-gradient(135deg,#ff8fe7,#a78bfa);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
/* Receipt theme: dark */
.receipt.dark-minimal .receipt-paper{background:#080808;color:#999;border:1px solid #1a1a1a}
.receipt.dark-minimal .receipt-store{color:#fff}
/* Receipt theme: romantic */
.receipt.romantic .receipt-paper{background:linear-gradient(135deg,#1a0810,#0d0018);color:rgba(255,200,220,.9);border:1px solid rgba(255,100,150,.2)}
.receipt.romantic .receipt-store{background:linear-gradient(135deg,#ff6b9d,#c44dff);-webkit-background-clip:text;-webkit-text-fill-color:transparent}

/* Receipt character images */
.receipt-chars{
  position:absolute;pointer-events:none;z-index:3;
}
.receipt-char-img{
  position:absolute;
  width:56px;height:56px;
  border-radius:12px;
  opacity:.92;
  object-fit:cover;
  box-shadow:0 0 14px rgba(201,168,76,.35),0 2px 10px rgba(0,0,0,.4);
}
.receipt-char-img.pos-tr{top:10px;right:10px}
.receipt-char-img.pos-br{bottom:10px;right:10px}
.receipt-char-img.pos-bl{bottom:10px;left:10px}
.receipt-char-img.small{width:40px;height:40px;border-radius:50%}

/* Receipt theme selector */
.receipt-themes{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap}
.theme-btn{
  background:none;border:1px solid var(--border);color:var(--muted);
  padding:5px 12px;border-radius:20px;font-family:var(--font-mono);font-size:9px;
  letter-spacing:.08em;text-transform:uppercase;transition:all .2s;
}
.theme-btn:hover,.theme-btn.active{border-color:var(--gold);color:var(--gold)}

/* ── DNA CARD ── */
.dna-card{
  background:linear-gradient(135deg,#0a0a18,#12102a);
  border:1px solid rgba(201,168,76,.3);border-radius:14px;
  padding:32px;text-align:center;position:relative;overflow:hidden;
}
.dna-card::before{
  content:'';position:absolute;top:-80px;left:-80px;
  width:240px;height:240px;
  background:radial-gradient(circle,rgba(201,168,76,.08) 0%,transparent 70%);
}
.dna-title{font-family:var(--font-display);font-size:10px;letter-spacing:.3em;color:var(--gold);text-transform:uppercase;margin-bottom:22px}
.dna-emoji-row{font-size:34px;margin-bottom:16px}
.dna-archetype{font-family:var(--font-editorial);font-size:26px;color:var(--text);margin-bottom:8px}
.dna-archetype-sub{font-size:14px;font-style:italic;color:var(--muted);margin-bottom:26px;line-height:1.6}
.dna-traits{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-bottom:24px}
.dna-trait{
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);
  border-radius:20px;padding:5px 14px;font-family:var(--font-mono);
  font-size:9px;letter-spacing:.1em;color:var(--muted);
}
.dna-bars{text-align:left;margin-bottom:18px}
.dna-bar-row{display:flex;align-items:center;gap:10px;margin-bottom:9px}
.dna-bar-name{font-family:var(--font-mono);font-size:9px;color:var(--muted);width:80px;text-transform:uppercase}
.dna-bar-track{flex:1;height:3px;background:rgba(255,255,255,.08);border-radius:3px;overflow:hidden}
.dna-bar-fill{height:100%;border-radius:3px}
.dna-bar-pct{font-family:var(--font-mono);font-size:9px;color:var(--gold);width:30px;text-align:right}
.dna-footer{font-family:var(--font-mono);font-size:8px;color:rgba(255,255,255,.2);text-transform:uppercase;letter-spacing:.2em}

/* ── CRASH REPORT ── */
.crash-report{
  background:#0a0a0a;border:1px solid #2a2a2a;border-radius:5px;
  padding:24px;font-family:var(--font-mono);font-size:11px;color:#999;
}
.crash-header{color:#ff4444;font-size:14px;margin-bottom:16px}
.crash-line{margin-bottom:6px}
.crash-key{color:#66aaff}
.crash-val{color:#88ff88}
.crash-stack{color:#555;font-size:10px;margin-top:16px;line-height:2}
.crash-btn{
  margin-top:16px;background:none;border:1px solid #333;color:#888;
  padding:8px 20px;font-family:var(--font-mono);font-size:10px;border-radius:3px;
  transition:all .2s;cursor:pointer;
}
.crash-btn:hover{border-color:#555;color:#bbb}

/* ── SOUNDPRINT (enhanced) ── */
.soundprint-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:32px}
.soundprint-title{font-family:var(--font-editorial);font-size:26px;color:var(--gold);margin-bottom:6px;font-weight:700;letter-spacing:.02em}
.soundprint-sub{font-size:15px;font-style:italic;color:var(--muted);margin-bottom:28px}
.track-list{display:flex;flex-direction:column;gap:20px}
.track-item{
  display:flex;gap:0;align-items:stretch;
  background:rgba(255,255,255,.03);border:1px solid var(--border);
  border-radius:12px;overflow:hidden;
  transition:border-color .3s,background .3s,transform .25s,box-shadow .3s;
}
.track-item:hover{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.18);transform:translateX(4px);box-shadow:0 8px 32px rgba(0,0,0,.35)}

/* Big album cover */
.track-cover{
  width:100px;height:100px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:36px;position:relative;overflow:hidden;
}
.track-cover-bg{
  position:absolute;inset:0;opacity:.85;
  display:flex;align-items:center;justify-content:center;
  font-size:52px;filter:blur(0px);
  transition:transform .4s var(--ease);
}
.track-item:hover .track-cover-bg{transform:scale(1.08)}
.track-cover-glow{
  position:absolute;inset:0;
  filter:blur(16px);opacity:.5;z-index:0;
}
.track-cover-emoji{position:relative;z-index:2;font-size:40px;line-height:1;filter:drop-shadow(0 2px 8px rgba(0,0,0,.5))}

.track-body{flex:1;padding:16px 18px;min-width:0;display:flex;flex-direction:column;justify-content:space-between}
.track-num{font-family:var(--font-mono);font-size:10px;color:var(--gold);margin-bottom:4px;opacity:.8}
.track-song{font-size:17px;color:var(--text);margin-bottom:3px;font-weight:600;letter-spacing:.01em}
.track-artist{font-family:var(--font-mono);font-size:10px;color:var(--muted);margin-bottom:8px;text-transform:uppercase;letter-spacing:.12em}
.track-reason{font-size:13px;font-style:italic;color:rgba(255,255,255,.55);line-height:1.55;margin-bottom:12px}
.track-links{display:flex;gap:8px;flex-wrap:wrap}
.track-link{
  display:inline-flex;align-items:center;gap:6px;
  padding:7px 16px;border-radius:20px;font-family:var(--font-mono);font-size:10px;
  text-decoration:none;letter-spacing:.08em;transition:all .25s;
  border:1px solid;font-weight:500;cursor:pointer;
}
.track-link:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,.3)}
.track-link.spotify{color:#1db954;border-color:rgba(29,185,84,.45);background:rgba(29,185,84,.1)}
.track-link.spotify:hover{background:rgba(29,185,84,.22);border-color:rgba(29,185,84,.7);color:#25e066}
.track-link.youtube{color:#ff5555;border-color:rgba(255,68,68,.4);background:rgba(255,68,68,.08)}
.track-link.youtube:hover{background:rgba(255,68,68,.2);border-color:rgba(255,85,85,.7);color:#ff7070}
.track-link.spotify::before{content:'▶';font-size:9px}
.track-link.youtube::before{content:'▶';font-size:9px}

/* Reliever layer under soundprint */
.soundprint-reliever{
  margin-top:24px;padding:20px;
  background:rgba(255,255,255,.025);border:1px solid var(--border);
  border-radius:10px;text-align:center;
  animation:fadeUp .8s .3s var(--ease) both;
}
.reliever-label{font-family:var(--font-mono);font-size:9px;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);margin-bottom:12px;opacity:.8}
.reliever-text{font-size:14px;font-style:italic;color:var(--muted);margin-bottom:16px;line-height:1.7}
.reliever-breath{
  width:56px;height:56px;border-radius:50%;margin:0 auto;cursor:pointer;
  display:flex;align-items:center;justify-content:center;font-size:22px;
  border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.03);
  transition:transform .3s var(--ease),box-shadow .3s;
  animation:relievBreath 4s ease-in-out infinite;
  position:relative;
}
.reliever-breath:hover{transform:scale(1.12);box-shadow:0 0 24px rgba(201,168,76,.25)}
@keyframes relievBreath{
  0%,100%{transform:scale(1);opacity:.8}
  50%{transform:scale(1.14);opacity:1}
}
.reliever-breath-ring{
  position:absolute;inset:-6px;border-radius:50%;
  border:1px solid rgba(201,168,76,.2);
  animation:relievRingPulse 4s ease-in-out infinite;
}
@keyframes relievRingPulse{
  0%,100%{transform:scale(1);opacity:.5}
  50%{transform:scale(1.2);opacity:.1}
}
.reliever-breath-hint{margin-top:10px;font-family:var(--font-mono);font-size:9px;letter-spacing:.15em;text-transform:uppercase;color:rgba(255,255,255,.3)}

/* ── YOU vs YOU (inner conflict) ── */
.conflict-arena{
  background:var(--surface);border:1px solid var(--border);border-radius:12px;
  overflow:hidden;position:relative;
}
.conflict-canvas-wrap{position:relative;width:100%;height:270px;overflow:hidden}
#conflict-canvas{width:100%;height:100%;display:block}
.conflict-instruction{
  font-family:var(--font-mono);font-size:9px;letter-spacing:.18em;
  color:rgba(255,255,255,.22);text-align:center;padding:12px;text-transform:uppercase;
}
.conflict-labels{display:flex;justify-content:space-between;padding:14px 22px 20px}
.conflict-label{font-family:var(--font-display);font-size:13px}
.conflict-label.past{color:var(--reflective)}
.conflict-label.present{color:var(--chaos)}

/* ── INNER CONFLICT MODE ── */
body.conflict-mode{--void:#030308}

/* ── MIDNIGHT HINT ── */
.midnight-hint{
  position:fixed;bottom:20px;left:50%;transform:translateX(-50%);
  font-family:var(--font-mono);font-size:9px;letter-spacing:.15em;
  text-transform:uppercase;color:rgba(255,255,255,.1);z-index:50;
  pointer-events:none;transition:color .5s;
}
body.midnight .midnight-hint{color:rgba(100,130,200,.38)}

/* ── TOAST ── */
.toast{
  position:fixed;bottom:40px;left:50%;transform:translateX(-50%) translateY(20px);
  background:var(--surface2);border:1px solid var(--border2);
  color:var(--text);font-family:var(--font-mono);font-size:10px;
  letter-spacing:.1em;padding:10px 24px;border-radius:20px;
  z-index:500;opacity:0;pointer-events:none;
  transition:opacity .3s,transform .3s;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ── WHIP PULSE ── */
.whip-idle-label{
  position:fixed;bottom:60px;left:50%;transform:translateX(-50%);
  font-family:var(--font-mono);font-size:9px;letter-spacing:.22em;
  text-transform:uppercase;color:rgba(201,168,76,.0);z-index:50;
  pointer-events:none;transition:color 1s;
}
.whip-idle-label.visible{color:rgba(201,168,76,.38)}

/* ── MIDNIGHT MODE ── */
body.midnight{
  --void:#03030f;--deep:#060614;--surface:#0c0c22;--surface2:#0f0f28;
  --text:rgba(180,200,255,.85);--gold:#8899dd;--gold-dim:rgba(136,153,221,.35);
  --gold-faint:rgba(136,153,221,.07);
}

/* ── GHOST MEMORIES ── */
.ghost-memory{
  position:absolute;border-radius:50%;opacity:0;pointer-events:none;
  animation:tideFloat linear infinite;
}
@keyframes tideFloat{
  0%{transform:translateY(100%);opacity:0}
  10%{opacity:.05}90%{opacity:.05}
  100%{transform:translateY(-20vh);opacity:0}
}

/* ── SILENCE PARTICLE ── */
.sil-particle{
  position:absolute;border-radius:50%;opacity:0;
  pointer-events:none;animation:silFloat linear forwards;
}
@keyframes silFloat{
  0%{opacity:0;transform:translateY(0) scale(1)}
  30%{opacity:.5}
  100%{opacity:0;transform:translateY(-190px) scale(.4)}
}

/* ── EMOTION RESIDUE ── */
.residue{
  position:fixed;border-radius:50%;pointer-events:none;z-index:3;
  opacity:0;transform:scale(1);
  animation:residueFade 1.4s var(--ease-out) forwards;
}
@keyframes residueFade{
  0%{opacity:.45;transform:scale(1)}
  100%{opacity:0;transform:scale(1.9)}
}

/* ── VOID PULSE ── */
.void-pulse{
  position:fixed;border-radius:50%;pointer-events:none;z-index:3;
  border:2px solid rgba(74,74,90,.65);
  animation:voidExpand 2s var(--ease-out) forwards;
}
@keyframes voidExpand{
  0%{transform:scale(.2);opacity:.9}
  100%{transform:scale(4.5);opacity:0}
}

/* ── PARTICLE DISSOLVE ── */
.dissolve-particle{
  position:fixed;pointer-events:none;z-index:9;border-radius:50%;
  animation:dissolveAway 1.2s var(--ease-out) forwards;
}
@keyframes dissolveAway{
  0%{opacity:.75;transform:translate(0,0) scale(1)}
  100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(0)}
}

/* ── RANDOM REFLECTION ── */
.reflection-drop{
  position:fixed;bottom:80px;right:28px;z-index:50;
  background:var(--surface);border:1px solid var(--border);border-radius:12px;
  padding:18px 22px;max-width:290px;
  animation:slideInRight .5s var(--ease) forwards;
  cursor:pointer;transition:border-color .3s;
}
.reflection-drop:hover{border-color:var(--gold-dim)}
.reflection-drop-label{font-family:var(--font-mono);font-size:8px;letter-spacing:.22em;color:var(--gold);text-transform:uppercase;margin-bottom:8px}
.reflection-drop-text{font-size:13px;font-style:italic;color:var(--muted);line-height:1.6}
.reflection-drop-close{position:absolute;top:8px;right:12px;background:none;border:none;color:var(--muted);font-size:16px;cursor:pointer}
@keyframes slideInRight{
  from{opacity:0;transform:translateX(22px)}
  to{opacity:1;transform:translateX(0)}
}

/* ─────────────────────────────────────
   LOGIN / RITUAL SCREEN
───────────────────────────────────── */
#login-screen{
  position:fixed;inset:0;z-index:1000;
  background:var(--void);
  display:flex;align-items:center;justify-content:center;
  flex-direction:column;gap:0;
  padding:40px 24px;
  transition:opacity .9s var(--ease),transform .9s var(--ease);
}
#login-screen.hidden{
  opacity:0;pointer-events:none;transform:scale(1.04);
}

/* Step containers */
.login-step{
  display:flex;flex-direction:column;align-items:center;
  text-align:center;gap:0;
  opacity:0;
  position:absolute;
  transition:opacity .6s var(--ease),transform .6s var(--ease);
  transform:translateY(16px);
  pointer-events:none;
  width:100%;max-width:480px;padding:24px;
}
.login-step.active{
  opacity:1;transform:translateY(0);pointer-events:all;position:relative;
}

/* Stress orb */
#stress-orb-wrap{
  display:flex;flex-direction:column;align-items:center;gap:16px;
  cursor:pointer;user-select:none;
  -webkit-tap-highlight-color:transparent;
}
#stress-orb{
  width:130px;height:130px;border-radius:50%;
  background:radial-gradient(circle at 38% 32%, rgba(201,168,76,.7), rgba(201,168,76,.2) 60%, transparent);
  box-shadow:0 0 60px rgba(201,168,76,.25),0 0 120px rgba(201,168,76,.1);
  transition:transform .15s var(--ease),box-shadow .15s;
  animation:orbBreath 5s ease-in-out infinite;
  position:relative;
}
#stress-orb::after{
  content:'';position:absolute;inset:-2px;border-radius:50%;
  border:1px solid rgba(201,168,76,.35);
  animation:orbRingPulse 5s ease-in-out infinite;
}
@keyframes orbBreath{
  0%,100%{transform:scale(1);box-shadow:0 0 60px rgba(201,168,76,.25),0 0 120px rgba(201,168,76,.1)}
  50%{transform:scale(1.04);box-shadow:0 0 80px rgba(201,168,76,.35),0 0 160px rgba(201,168,76,.15)}
}
@keyframes orbRingPulse{
  0%,100%{transform:scale(1);opacity:.5}
  50%{transform:scale(1.08);opacity:.2}
}
#stress-orb.pressed{
  transform:scale(.88)!important;
  box-shadow:0 0 30px rgba(201,168,76,.4),0 0 60px rgba(201,168,76,.2)!important;
  transition:transform .08s,box-shadow .08s;
}
.stress-hint{
  font-family:var(--font-mono);font-size:10px;letter-spacing:.22em;
  color:rgba(255,255,255,.38);text-transform:uppercase;
  animation:stressHintPulse 2.5s ease-in-out infinite;
}
@keyframes stressHintPulse{
  0%,100%{opacity:.38}50%{opacity:.65}
}
.stress-title{
  font-family:var(--font-display);font-size:clamp(22px,5vw,36px);
  color:var(--gold);margin-bottom:10px;letter-spacing:.05em;
  margin-top:28px;
}
.stress-sub{font-size:16px;font-style:italic;color:var(--muted);line-height:1.7}

/* Breathing animation step */
#breath-anim-canvas{
  width:200px;height:200px;
  margin:0 auto;
}
.breath-instruction{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--gold);
  margin-top:24px;animation:breathTextFade 4s ease-in-out infinite;
}
@keyframes breathTextFade{
  0%,100%{opacity:.5}50%{opacity:1}
}

/* Name input step */
.name-step-title{
  font-family:var(--font-display);font-size:clamp(20px,4vw,32px);
  color:var(--gold);margin-bottom:8px;letter-spacing:.05em;
}
.name-step-sub{font-size:16px;font-style:italic;color:var(--muted);margin-bottom:32px;line-height:1.7}
.name-input{
  background:transparent;border:none;border-bottom:1px solid var(--gold-dim);
  color:var(--text);font-family:var(--font-editorial);font-size:28px;
  text-align:center;outline:none;padding:12px 24px;width:100%;max-width:320px;
  transition:border-color .3s;
  font-style:italic;
}
.name-input::placeholder{color:rgba(255,255,255,.2)}
.name-input:focus{border-color:var(--gold)}
.name-enter-btn{
  margin-top:28px;background:var(--gold);color:var(--void);border:none;
  padding:14px 40px;font-family:var(--font-mono);font-size:11px;
  letter-spacing:.18em;text-transform:uppercase;border-radius:3px;
  transition:background .3s,transform .2s;opacity:0;pointer-events:none;
  transition:background .3s,transform .2s,opacity .4s;
}
.name-enter-btn.visible{opacity:1;pointer-events:all}
.name-enter-btn:hover{background:#d4b45a;transform:translateY(-2px)}

/* Returning user */
.return-greeting{
  font-family:var(--font-editorial);font-size:22px;font-style:italic;
  color:var(--muted);margin-bottom:6px;
}
.return-name{
  font-family:var(--font-display);font-size:clamp(28px,6vw,48px);
  color:var(--gold);letter-spacing:.06em;margin-bottom:16px;
}
.return-sub{font-size:16px;font-style:italic;color:rgba(255,255,255,.45);line-height:1.7}
.return-enter-btn{margin-top:32px}

/* ─────────────────────────────────────
   ONBOARDING OVERLAY
───────────────────────────────────── */
#onboarding{
  position:fixed;inset:0;z-index:900;
  background:rgba(5,5,8,.95);backdrop-filter:blur(20px);
  display:none;align-items:center;justify-content:center;
  padding:24px;
}
#onboarding.open{display:flex}

.ob-card{
  max-width:520px;width:100%;background:var(--surface);
  border:1px solid var(--border2);border-radius:16px;
  padding:44px 40px;position:relative;
  animation:scaleIn .4s var(--ease) forwards;
}
.ob-step-dots{
  display:flex;gap:7px;justify-content:center;margin-bottom:32px;
}
.ob-dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--border);transition:background .3s,transform .3s;
}
.ob-dot.active{background:var(--gold);transform:scale(1.3)}
.ob-dot.done{background:rgba(201,168,76,.4)}

.ob-icon{font-size:52px;margin-bottom:20px;text-align:center;display:block}
.ob-title{
  font-family:var(--font-display);font-size:clamp(20px,4vw,28px);
  color:var(--gold);margin-bottom:12px;text-align:center;letter-spacing:.05em;
}
.ob-body{
  font-size:16px;line-height:1.85;color:var(--muted);
  text-align:center;font-style:italic;margin-bottom:36px;
}
.ob-body strong{color:var(--text);font-style:normal}
.ob-actions{display:flex;gap:10px;justify-content:center;align-items:center}
.ob-next{
  background:var(--gold);color:var(--void);border:none;
  padding:13px 32px;font-family:var(--font-mono);font-size:11px;
  letter-spacing:.15em;text-transform:uppercase;border-radius:3px;
  transition:background .3s,transform .2s;
}
.ob-next:hover{background:#d4b45a;transform:translateY(-1px)}
.ob-back{
  background:none;border:1px solid var(--border);color:var(--muted);
  padding:13px 22px;font-family:var(--font-mono);font-size:11px;
  letter-spacing:.1em;text-transform:uppercase;border-radius:3px;
  transition:all .25s;
}
.ob-back:hover{color:var(--text);border-color:var(--border2)}
.ob-skip{
  background:none;border:none;color:rgba(255,255,255,.25);
  font-family:var(--font-mono);font-size:9px;letter-spacing:.15em;
  text-transform:uppercase;padding:8px 14px;
  transition:color .3s;
}
.ob-skip:hover{color:var(--muted)}

/* Highlight pulse for onboarding */
.ob-highlight{
  position:relative;z-index:901;
  box-shadow:0 0 0 4px var(--gold),0 0 40px rgba(201,168,76,.4)!important;
  border-radius:var(--radius);
  animation:obHighlightPulse 1.5s ease-in-out infinite;
}
@keyframes obHighlightPulse{
  0%,100%{box-shadow:0 0 0 3px var(--gold),0 0 32px rgba(201,168,76,.3)}
  50%{box-shadow:0 0 0 5px var(--gold),0 0 56px rgba(201,168,76,.5)}
}

/* ─────────────────────────────────────
   DIGITAL STRESS BALL (Anxiety Game)
───────────────────────────────────── */
#stress-ball-section{
  max-width:480px;margin:0 auto;text-align:center;
  padding-top:40px;
}
.stress-ball-title{
  font-family:var(--font-display);font-size:clamp(22px,4vw,34px);
  color:var(--gold);margin-bottom:8px;letter-spacing:.05em;
}
.stress-ball-sub{font-size:15px;font-style:italic;color:var(--muted);margin-bottom:40px;line-height:1.7}

#squeeze-orb{
  width:180px;height:180px;border-radius:50%;
  background:radial-gradient(circle at 38% 32%,rgba(91,143,168,.9),rgba(91,143,168,.3) 60%,transparent);
  box-shadow:0 0 80px rgba(91,143,168,.35),0 0 160px rgba(91,143,168,.15);
  margin:0 auto;cursor:pointer;
  transition:transform .12s var(--ease),border-radius .12s var(--ease),box-shadow .12s;
  user-select:none;-webkit-tap-highlight-color:transparent;
  position:relative;
  animation:squeezeBreath 6s ease-in-out infinite;
}
#squeeze-orb::after{
  content:'';position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle at 62% 68%,rgba(255,255,255,.12),transparent 60%);
  pointer-events:none;
}
@keyframes squeezeBreath{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.04)}
}
#squeeze-orb.squeezed{
  transform:scaleX(1.22) scaleY(.82)!important;
  border-radius:50% 50% 44% 44%;
  box-shadow:0 0 40px rgba(91,143,168,.5),0 0 80px rgba(91,143,168,.25)!important;
  transition:transform .08s,border-radius .08s,box-shadow .08s;
}
.squeeze-count{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.22em;
  text-transform:uppercase;color:rgba(255,255,255,.32);
  margin-top:24px;transition:color .4s;
}
.squeeze-count.glowing{color:var(--gold)}

/* Breathing ring */
.squeeze-breath-ring{
  width:240px;height:240px;border-radius:50%;
  border:1px solid rgba(91,143,168,.0);
  position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%) scale(1);
  pointer-events:none;
  transition:border-color .8s,transform 4s ease-in-out;
}
.squeeze-breath-ring.breathing{
  border-color:rgba(91,143,168,.25);
  animation:breathRingExpand 4s ease-in-out infinite;
}
@keyframes breathRingExpand{
  0%,100%{transform:translate(-50%,-50%) scale(1);opacity:.4}
  50%{transform:translate(-50%,-50%) scale(1.22);opacity:.08}
}
.squeeze-wrap{position:relative;width:240px;height:240px;margin:0 auto 8px}

.stress-ball-back{
  margin-top:32px;background:none;border:1px solid var(--border);
  color:var(--muted);padding:10px 24px;border-radius:var(--radius);
  font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;transition:all .25s;
}
.stress-ball-back:hover{color:var(--text);border-color:var(--border2)}

/* ── SHATTER SOFTLY ── */
.shatter-stage{
  max-width:480px;margin:0 auto;text-align:center;padding:28px 20px 24px;
}
.shatter-title{
  font-family:var(--font-display);font-size:clamp(22px,4vw,32px);
  color:var(--gold);margin-bottom:8px;letter-spacing:.06em;
}
.shatter-sub{font-size:15px;font-style:italic;color:var(--muted);margin-bottom:36px;line-height:1.75}
.shatter-canvas-wrap{position:relative;width:240px;height:240px;margin:0 auto 28px}
#shatter-canvas{display:block;border-radius:4px}
.shatter-hint{
  font-family:var(--font-mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.3);margin-bottom:0;
  animation:shatterHintPulse 2.5s ease-in-out infinite;
}
@keyframes shatterHintPulse{0%,100%{opacity:.3}50%{opacity:.6}}
.shatter-aftermath{
  display:none;padding:32px 20px;text-align:center;
  animation:fadeUp .9s var(--ease) forwards;
}
.shatter-aftermath.show{display:block}
.shatter-release-line{
  font-family:var(--font-editorial);font-size:22px;font-style:italic;
  color:rgba(255,255,255,.88);margin-bottom:28px;line-height:1.55;
  letter-spacing:.02em;
}
.shatter-song-suggestion{margin-top:24px}
.shatter-back{
  margin-top:28px;background:none;border:1px solid var(--border);
  color:var(--muted);padding:10px 24px;border-radius:var(--radius);
  font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;transition:all .25s;
}
.shatter-back:hover{color:var(--text);border-color:var(--border2)}

/* ── RITUAL ONBOARDING OVERLAY ── */
.ritual-ob-overlay{
  position:fixed;inset:0;z-index:400;
  background:rgba(5,5,8,.94);backdrop-filter:blur(24px);
  display:flex;align-items:center;justify-content:center;padding:24px;
}
.ritual-ob-card{
  max-width:460px;width:100%;background:var(--surface);
  border:1px solid var(--border2);border-radius:16px;
  padding:40px 36px;text-align:center;
  animation:scaleIn .35s var(--ease) forwards;position:relative;
}
.ritual-ob-icon{font-size:48px;margin-bottom:18px;display:block}
.ritual-ob-title{
  font-family:var(--font-display);font-size:clamp(18px,3.5vw,26px);
  color:var(--gold);margin-bottom:12px;letter-spacing:.05em;
}
.ritual-ob-body{
  font-size:15px;line-height:1.85;color:var(--muted);
  margin-bottom:30px;font-style:italic;
}
.ritual-ob-body strong{color:var(--text);font-style:normal}
.ritual-ob-start{
  background:var(--gold);color:var(--void);border:none;
  padding:13px 36px;font-family:var(--font-mono);font-size:11px;
  letter-spacing:.15em;text-transform:uppercase;border-radius:3px;
  transition:background .3s,transform .2s;
}
.ritual-ob-start:hover{background:#d4b45a;transform:translateY(-1px)}
.ritual-ob-replay{
  display:inline-flex;align-items:center;gap:5px;
  background:none;border:none;color:rgba(255,255,255,.28);
  font-family:var(--font-mono);font-size:9px;letter-spacing:.14em;
  text-transform:uppercase;padding:8px 12px;transition:color .25s;cursor:pointer;
  margin-top:14px;
}
.ritual-ob-replay:hover{color:var(--muted)}

/* ── FOCUS SCROLL BEHAVIOR ── */
.view.active{scroll-margin-top:0}

/* ── ANIMATIONS ── */
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes scaleIn{from{opacity:0;transform:scale(.93)}to{opacity:1;transform:scale(1)}}
@keyframes orbPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
@keyframes gravityPulse{0%,100%{opacity:.06;transform:scale(1)}50%{opacity:.12;transform:scale(1.04)}}
@keyframes bubbleFloat0{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes bubbleFloat1{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes bubbleFloat2{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

/* ── RESPONSIVE ── */
@media(max-width:768px){
  nav{padding:12px 16px}
  .nav-links{gap:2px}
  .nav-links button{padding:5px 9px;font-size:9px;letter-spacing:.06em}
  .view{padding:80px 16px 60px}
  .mood-grid{grid-template-columns:repeat(2,1fr)}
  .stat-row{grid-template-columns:1fr}
  .fun-grid{grid-template-columns:1fr}
  .detail-card{padding:28px 20px}
  .wrapped-card{padding:24px 18px}
  #bubble-field{min-height:400px}
  .reflection-drop{right:14px;max-width:250px}
  .ob-card{padding:32px 24px}
  .hero-title{font-size:clamp(28px,10vw,56px)}
  .track-cover{width:70px;height:70px}
  .track-cover-emoji{font-size:28px}
}
@media(max-width:400px){
  .nav-links button{padding:4px 6px;font-size:8px}
  .mood-grid{gap:7px}
  .hero-actions{flex-direction:column;width:100%;max-width:280px}
  .btn-primary,.btn-ghost{width:100%;text-align:center}
}