/* ════════════════════════════════════════════════════════════
   ORBIT v2 — Complete Stylesheet
   ════════════════════════════════════════════════════════════ */

:root {
  --space-deep:    #070B1A;
  --space-mid:     #0D1530;
  --space-light:   #101935;
  --glow-cyan:     #6EE7FF;
  --glow-cyan-dim: #2A8FA8;
  --energy-gold:   #FFD166;
  --pulse-lavender:#B794F4;
  --success-mint:  #8AFFC1;
  --void-red:      #FF6B6B;
  --text-primary:  #E8F4FF;
  --text-dim:      #4A6080;
  --text-ghost:    #1E3050;
  --sweet-gold:    #FFB347;

  --font-display: 'Syncopate', sans-serif;
  --font-serif:   'Cormorant Garamond', Georgia, serif;
  --font-mono:    'Space Mono', monospace;

  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-elastic: cubic-bezier(0.34, 1.56, 0.64, 1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

html, body {
  width: 100%; height: 100%; overflow: hidden;
  background: var(--space-deep);
  color: var(--text-primary);
  font-family: var(--font-serif);
  font-size: 16px; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  cursor: crosshair;
}

/* ── Screens ── */
.screen {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity 0.6s var(--ease-out);
  z-index: 10; overflow-y: auto;
}
.screen.active { opacity: 1; pointer-events: all; }
.screen.fade-out { opacity: 0; pointer-events: none; transition: opacity 0.4s ease; }

/* ── Stars & Nebula ── */
.stars-bg { position: absolute; inset: 0; overflow: hidden; z-index: 0; }
.star-dot {
  position: absolute; border-radius: 50%; background: white;
  animation: starTwinkle var(--dur) ease-in-out infinite alternate;
}
@keyframes starTwinkle {
  from { opacity: var(--min-op); transform: scale(1); }
  to   { opacity: var(--max-op); transform: scale(1.4); }
}
.nebula-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 40% at 20% 30%, rgba(113,63,240,0.08) 0%, transparent 70%),
    radial-gradient(ellipse 50% 60% at 80% 70%, rgba(16,100,160,0.07) 0%, transparent 70%),
    radial-gradient(ellipse 80% 50% at 50% 50%, rgba(7,11,26,0) 0%, var(--space-deep) 100%);
  z-index: 0; pointer-events: none;
}

/* ══════════════════════════════════ LANDING */
#screen-landing { flex-direction: column; background: var(--space-deep); }
.landing-content {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center;
  gap: 1.4rem; padding: 2rem; text-align: center;
}

/* Logo */
.orbit-logo-wrap { position: relative; width: 110px; height: 110px; margin-bottom: 0.2rem; }
.orbit-logo-ring { position: absolute; border-radius: 50%; border: 1px solid transparent; top:50%; left:50%; transform:translate(-50%,-50%); }
.ring-outer { width:110px; height:110px; border-color:rgba(110,231,255,0.15); animation:logoRingRotate 12s linear infinite; }
.ring-mid   { width: 76px; height: 76px; border-color:rgba(183,148,244,0.2);  animation:logoRingRotate 8s linear infinite reverse; }
.ring-inner { width: 48px; height: 48px; border-color:rgba(110,231,255,0.1);  animation:logoRingRotate 5s linear infinite; }
@keyframes logoRingRotate {
  from { transform:translate(-50%,-50%) rotate(0deg); }
  to   { transform:translate(-50%,-50%) rotate(360deg); }
}
.orbit-logo-star {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:18px; height:18px; border-radius:50%;
  background: radial-gradient(circle, #fff 0%, var(--glow-cyan) 40%, transparent 70%);
  box-shadow: 0 0 20px 8px rgba(110,231,255,0.4), 0 0 60px 20px rgba(110,231,255,0.1);
  animation: starPulse 3s ease-in-out infinite;
}
.orbit-logo-orb {
  position:absolute; width:9px; height:9px; border-radius:50%;
  background: var(--energy-gold);
  box-shadow: 0 0 10px 3px rgba(255,209,102,0.6);
  top:0; left:0;
  offset-path: path('M 55 55 m -38 0 a 38 38 0 1 0 76 0 a 38 38 0 1 0 -76 0');
  offset-rotate: 0deg;
  animation: logoOrbMove 4s linear infinite;
}
@keyframes logoOrbMove { from{offset-distance:0%} to{offset-distance:100%} }
@keyframes starPulse {
  0%,100%{transform:translate(-50%,-50%) scale(1); opacity:1;}
  50%    {transform:translate(-50%,-50%) scale(1.3); opacity:0.8;}
}

/* Title */
.title-orbit {
  font-family: var(--font-display); font-size: clamp(2.2rem,8vw,3.5rem);
  font-weight: 700; letter-spacing: 0.4em; color: var(--text-primary);
  text-shadow: 0 0 30px rgba(110,231,255,0.5), 0 0 80px rgba(110,231,255,0.2);
  animation: titleGlow 4s ease-in-out infinite alternate;
}
@keyframes titleGlow {
  from { text-shadow: 0 0 20px rgba(110,231,255,0.3), 0 0 60px rgba(110,231,255,0.1); }
  to   { text-shadow: 0 0 40px rgba(110,231,255,0.6), 0 0 100px rgba(110,231,255,0.2); }
}
.title-sub    { font-family:var(--font-serif); font-size:1rem; font-weight:300; color:rgba(232,244,255,0.6); }
.title-tagline{ font-family:var(--font-mono); font-size:0.65rem; color:var(--glow-cyan-dim); letter-spacing:0.2em; text-transform:uppercase; }

/* Buttons */
.landing-actions { display:flex; flex-direction:column; align-items:center; gap:0.8rem; width:100%; max-width:340px; }
.btn-primary, .btn-secondary {
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:0.6rem;
  padding:0.85rem 2rem; border-radius:2px; cursor:pointer; overflow:hidden;
  transition: all 0.3s var(--ease-out); width:100%;
}
.btn-primary {
  background:transparent; border:1px solid rgba(110,231,255,0.4);
}
.btn-primary:hover {
  border-color:rgba(110,231,255,0.8);
  box-shadow: 0 0 30px rgba(110,231,255,0.2), inset 0 0 20px rgba(110,231,255,0.05);
  transform:translateY(-1px);
}
.btn-secondary {
  background:transparent; border:1px solid rgba(255,209,102,0.25);
}
.btn-secondary:hover {
  border-color:rgba(255,209,102,0.6);
  box-shadow: 0 0 20px rgba(255,209,102,0.15);
  transform:translateY(-1px);
}
.btn-secondary .btn-text { color: var(--energy-gold); }
.btn-text { font-family:var(--font-display); font-size:0.6rem; letter-spacing:0.2em; color:var(--glow-cyan); position:relative; z-index:1; }
.btn-icon { font-size:0.9rem; color:var(--glow-cyan); position:relative; z-index:1; }
.btn-glow {
  position:absolute; inset:-1px; border-radius:2px;
  background:radial-gradient(ellipse at center, rgba(110,231,255,0.12) 0%, transparent 70%);
  opacity:0; transition:opacity 0.3s;
}
.btn-primary:hover .btn-glow { opacity:1; }
.btn-ghost {
  background:transparent; border:none; cursor:pointer;
  font-family:var(--font-serif); font-size:0.85rem; font-style:italic;
  color:var(--text-dim); padding:0.4rem 1rem; transition:color 0.3s;
}
.btn-ghost:hover { color:var(--text-primary); }
.stats-link { font-size:0.75rem; letter-spacing:0.05em; }

/* Landing stats */
.landing-stats {
  display:flex; align-items:center; gap:1.2rem;
  padding:0.9rem 1.6rem; border:1px solid var(--text-ghost); border-radius:2px;
}
.stat-item { display:flex; flex-direction:column; align-items:center; gap:0.1rem; }
.stat-value { font-family:var(--font-mono); font-size:1rem; color:var(--glow-cyan); }
.stat-label { font-size:0.55rem; text-transform:uppercase; letter-spacing:0.15em; color:var(--text-dim); font-family:var(--font-display); }
.stat-divider { color:var(--text-ghost); font-size:1rem; }
.landing-footer { position:absolute; bottom:1.2rem; left:0; right:0; text-align:center; font-family:var(--font-mono); font-size:0.55rem; letter-spacing:0.2em; color:var(--text-ghost); z-index:1; }

/* ══════════════════════════════════ POMODORO SETUP */
#screen-pomo-setup { background:var(--space-deep); }
.setup-content {
  position:relative; z-index:1;
  display:flex; flex-direction:column; align-items:center;
  gap:1.6rem; padding:2.5rem 2rem; text-align:center;
  max-width:460px; width:100%;
}
.tutorial-eyebrow { font-family:var(--font-mono); font-size:0.6rem; letter-spacing:0.3em; text-transform:uppercase; color:var(--pulse-lavender); }
.tutorial-title { font-family:var(--font-serif); font-size:clamp(1.6rem,5vw,2.2rem); font-weight:300; color:var(--text-primary); }

.time-picker-wrap { display:flex; align-items:center; gap:1.5rem; flex-wrap:wrap; justify-content:center; }
.time-picker-group { display:flex; flex-direction:column; align-items:center; gap:0.5rem; }
.picker-label { font-family:var(--font-mono); font-size:0.6rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--text-dim); }
.picker-row { display:flex; align-items:center; gap:0.6rem; }
.picker-btn {
  width:32px; height:32px; border-radius:50%; border:1px solid var(--text-ghost);
  background:transparent; color:var(--text-primary); cursor:pointer;
  font-size:1.2rem; display:flex; align-items:center; justify-content:center;
  transition: all 0.2s;
}
.picker-btn:hover { border-color:var(--glow-cyan); color:var(--glow-cyan); }
.picker-val { font-family:var(--font-mono); font-size:2.5rem; color:var(--text-primary); min-width:3rem; text-align:center; }
.picker-unit { font-family:var(--font-mono); font-size:0.7rem; color:var(--text-dim); }
.picker-sep { font-family:var(--font-serif); font-size:1rem; font-style:italic; color:var(--text-dim); }

.preset-row { display:flex; gap:0.6rem; flex-wrap:wrap; justify-content:center; }
.preset-btn {
  padding:0.4rem 0.9rem; border:1px solid var(--text-ghost); border-radius:2px;
  background:transparent; color:var(--text-dim); cursor:pointer;
  font-family:var(--font-mono); font-size:0.65rem; transition:all 0.2s;
}
.preset-btn:hover, .preset-btn.active {
  border-color:var(--glow-cyan); color:var(--glow-cyan);
  background:rgba(110,231,255,0.05);
}

.task-input-wrap { width:100%; display:flex; flex-direction:column; gap:0.5rem; text-align:left; }
.optional { color:var(--text-ghost); font-size:0.55rem; }
.task-input {
  width:100%; padding:0.7rem 1rem;
  background:rgba(16,25,53,0.6); border:1px solid var(--text-ghost);
  border-radius:2px; color:var(--text-primary);
  font-family:var(--font-serif); font-size:0.9rem;
  transition:border-color 0.2s; outline:none;
}
.task-input:focus { border-color:var(--glow-cyan); }
.task-input::placeholder { color:var(--text-ghost); font-style:italic; }

/* ══════════════════════════════════ STUDY TIMER */
#screen-study { background:var(--space-deep); flex-direction:column; justify-content:center; }
.study-bg-pulse {
  position:absolute; inset:0;
  background: radial-gradient(ellipse 60% 60% at 50% 50%, rgba(40,70,140,0.12) 0%, transparent 70%);
  animation: studyPulse 8s ease-in-out infinite;
}
@keyframes studyPulse {
  0%,100%{ opacity:0.4; transform:scale(1); }
  50%    { opacity:1;   transform:scale(1.1); }
}
.study-content {
  position:relative; z-index:1;
  display:flex; flex-direction:column; align-items:center;
  gap:1.5rem; padding:2rem; text-align:center;
}
.study-task-label { font-family:var(--font-serif); font-size:0.9rem; font-style:italic; color:var(--text-dim); min-height:1.4rem; }
.study-timer-wrap { display:flex; flex-direction:column; align-items:center; gap:0.3rem; }
.study-timer {
  font-family:var(--font-mono); font-size:clamp(4rem,18vw,7rem);
  color:var(--text-primary); letter-spacing:0.05em;
  text-shadow: 0 0 40px rgba(110,231,255,0.3);
  transition: color 0.5s;
}
.study-timer.last-min { color:var(--energy-gold); text-shadow:0 0 40px rgba(255,209,102,0.4); }
.study-timer-label { font-family:var(--font-display); font-size:0.55rem; letter-spacing:0.25em; text-transform:uppercase; color:var(--text-dim); }
.study-session-badge {
  font-family:var(--font-mono); font-size:0.65rem; letter-spacing:0.2em; text-transform:uppercase;
  color:var(--pulse-lavender); border:1px solid rgba(183,148,244,0.2);
  padding:0.3rem 0.8rem; border-radius:2px;
}
.study-breathe-hint {
  display:flex; align-items:center; gap:0.6rem;
  font-family:var(--font-serif); font-size:0.8rem; font-style:italic; color:var(--text-ghost);
}
.breathe-dot {
  width:6px; height:6px; border-radius:50%;
  background:var(--pulse-lavender); opacity:0.5;
  animation: breatheDotPulse 4s ease-in-out infinite;
}
@keyframes breatheDotPulse {
  0%,100%{ transform:scale(1); opacity:0.4; }
  50%    { transform:scale(1.6); opacity:0.9; }
}
.study-total-today { font-family:var(--font-mono); font-size:0.65rem; color:var(--text-dim); letter-spacing:0.1em; }
.btn-study-end {
  position:absolute; bottom:1.5rem; left:50%; transform:translateX(-50%);
  background:transparent; border:none; cursor:pointer;
  font-family:var(--font-mono); font-size:0.6rem; letter-spacing:0.15em;
  color:var(--text-ghost); padding:0.5rem 1rem; transition:color 0.3s;
}
.btn-study-end:hover { color:var(--text-dim); }

/* ══════════════════════════════════ BREAK PROMPT */
#screen-break-prompt { background:var(--space-deep); flex-direction:column; }
.break-prompt-content {
  position:relative; z-index:1;
  display:flex; flex-direction:column; align-items:center;
  gap:1.4rem; padding:2.5rem 2rem; text-align:center; max-width:440px; width:100%;
}
.break-check {
  font-size:2.5rem; color:var(--success-mint);
  text-shadow:0 0 30px rgba(138,255,193,0.5);
  animation: checkPop 0.5s var(--ease-elastic);
}
@keyframes checkPop { from{transform:scale(0)} to{transform:scale(1)} }
.break-title { font-family:var(--font-serif); font-size:clamp(1.8rem,5vw,2.5rem); font-weight:300; color:var(--text-primary); }
.break-studied { font-family:var(--font-mono); font-size:0.8rem; color:var(--success-mint); letter-spacing:0.1em; }
.break-total { font-family:var(--font-mono); font-size:0.65rem; color:var(--text-dim); }
.break-actions { display:flex; flex-direction:column; gap:0.8rem; width:100%; max-width:340px; }
.break-tip { font-family:var(--font-serif); font-size:0.8rem; font-style:italic; color:var(--text-ghost); max-width:320px; line-height:1.6; }

/* ══════════════════════════════════ TUTORIAL */
#screen-tutorial { background:var(--space-deep); }
.tutorial-content {
  position:relative; z-index:1;
  display:flex; flex-direction:column; align-items:center;
  gap:1.5rem; padding:2.5rem 2rem; text-align:center; max-width:460px; width:100%;
}
.breath-guide { display:flex; flex-direction:column; align-items:center; gap:1rem; }
.breath-ring-wrap { position:relative; width:130px; height:130px; }
.breath-ring {
  position:absolute; inset:0; border-radius:50%;
  border:2px solid var(--pulse-lavender);
  box-shadow:0 0 20px rgba(183,148,244,0.3);
  transform:scale(0.5); transition:transform 0.5s ease, border-color 0.4s, box-shadow 0.4s;
}
.breath-ring.inhale { transform:scale(1); box-shadow:0 0 40px rgba(183,148,244,0.5); }
.breath-ring.hold   { transform:scale(1); box-shadow:0 0 60px rgba(110,231,255,0.4); border-color:var(--glow-cyan); }
.breath-ring.exhale { transform:scale(0.5); box-shadow:0 0 10px rgba(183,148,244,0.2); }
.breath-ring-inner {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:46px; height:46px; border-radius:50%;
  background:radial-gradient(circle,rgba(110,231,255,0.12) 0%,transparent 70%);
  border:1px solid rgba(110,231,255,0.2);
}
.breath-center-dot {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:7px; height:7px; border-radius:50%;
  background:var(--glow-cyan); box-shadow:0 0 10px rgba(110,231,255,0.8);
}
.breath-label-wrap { display:flex; flex-direction:column; align-items:center; gap:0.2rem; }
.breath-phase-label { font-family:var(--font-serif); font-size:1.1rem; font-style:italic; color:var(--pulse-lavender); transition:color 0.3s; }
.breath-timer-label { font-family:var(--font-mono); font-size:2rem; color:var(--text-primary); min-width:2rem; text-align:center; }

.controls-hint { display:flex; flex-direction:column; gap:0.5rem; padding:1rem 1.5rem; border:1px solid var(--text-ghost); border-radius:2px; width:100%; max-width:320px; }
.control-row { display:flex; align-items:center; gap:0.8rem; }
.control-icon { font-size:0.9rem; color:var(--glow-cyan); width:18px; text-align:center; flex-shrink:0; }
.control-desc { font-family:var(--font-serif); font-size:0.82rem; color:rgba(232,244,255,0.55); text-align:left; }
.control-desc em { color:var(--text-primary); font-style:italic; }

/* ══════════════════════════════════ GAME */
#screen-game { background:var(--space-deep); cursor:crosshair; }
#game-canvas { position:absolute; inset:0; width:100%; height:100%; display:block; }

.hud {
  position:absolute; top:0; left:0; right:0;
  display:grid; grid-template-columns:1fr auto 1fr;
  align-items:start; padding:1.2rem 1.5rem 0.8rem;
  z-index:20; pointer-events:none;
  background:linear-gradient(to bottom,rgba(7,11,26,0.7) 0%,transparent 100%);
}
.hud-left  { display:flex; flex-direction:column; align-items:flex-start; }
.hud-right { display:flex; flex-direction:column; align-items:flex-end; }
.hud-center{ display:flex; justify-content:center; }
.hud-timer   { font-family:var(--font-mono); font-size:1.4rem; color:var(--text-primary); letter-spacing:0.05em; }
.hud-harmony { font-family:var(--font-mono); font-size:1.4rem; color:var(--energy-gold); letter-spacing:0.05em; transition:transform 0.2s var(--ease-elastic); }
.hud-label   { font-family:var(--font-display); font-size:0.5rem; letter-spacing:0.2em; color:var(--text-dim); text-transform:uppercase; }

.breath-indicator { display:flex; flex-direction:column; align-items:center; gap:0.3rem; }
.breath-ring-mini {
  width:34px; height:34px; border-radius:50%; border:1.5px solid var(--pulse-lavender);
  transition:transform 0.5s ease, border-color 0.3s, box-shadow 0.3s;
}
.breath-ring-mini.inhale { transform:scale(1.3); border-color:var(--pulse-lavender); box-shadow:0 0 16px rgba(183,148,244,0.5); }
.breath-ring-mini.hold   { transform:scale(1.3); border-color:var(--glow-cyan);     box-shadow:0 0 16px rgba(110,231,255,0.5); }
.breath-ring-mini.exhale { transform:scale(0.8); border-color:var(--success-mint);  box-shadow:0 0 8px  rgba(138,255,193,0.3); }
.breath-phase-mini { font-family:var(--font-mono); font-size:0.48rem; letter-spacing:0.15em; text-transform:uppercase; color:var(--text-dim); }

.sweet-spot-hint {
  position:absolute; top:70px; left:50%; transform:translateX(-50%);
  font-family:var(--font-mono); font-size:0.55rem; letter-spacing:0.15em; text-transform:uppercase;
  color:var(--energy-gold); opacity:0;
  animation: hintFadeIn 1s ease 1.5s forwards;
  pointer-events:none; z-index:20;
}
@keyframes hintFadeIn { to{ opacity:0.6; } }

.insight-toast {
  position:absolute; bottom:12%; left:50%; transform:translateX(-50%) translateY(20px);
  background:rgba(7,11,26,0.88); border:1px solid rgba(110,231,255,0.2); border-radius:2px;
  padding:0.55rem 1.1rem; font-family:var(--font-serif); font-size:0.82rem; font-style:italic;
  color:var(--glow-cyan); opacity:0; transition:opacity 0.4s, transform 0.4s var(--ease-out);
  z-index:30; pointer-events:none; backdrop-filter:blur(8px);
  max-width:88vw; text-align:center;
}
.insight-toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

.pulse-wave-text {
  position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);
  font-family:var(--font-display); font-size:0.7rem; letter-spacing:0.3em; color:var(--energy-gold);
  text-shadow:0 0 20px rgba(255,209,102,0.8);
  opacity:0; pointer-events:none; z-index:25;
  transition:opacity 0.3s;
}
.pulse-wave-text.show { opacity:1; animation:pulseTextAnim 1.2s var(--ease-out) forwards; }
@keyframes pulseTextAnim {
  0%  { opacity:1; transform:translate(-50%,-50%) scale(0.8); }
  40% { opacity:1; transform:translate(-50%,-50%) scale(1.1); }
  100%{ opacity:0; transform:translate(-50%,-50%) scale(1.4); }
}

/* ══════════════════════════════════ END SCREEN */
#screen-end { background:var(--space-deep); flex-direction:column; }
.end-content {
  position:relative; z-index:1;
  display:flex; flex-direction:column; align-items:center;
  gap:1.4rem; padding:2.5rem 2rem; text-align:center; max-width:480px; width:100%;
}
.end-rank-badge { position:relative; width:76px; height:76px; display:flex; align-items:center; justify-content:center; }
.rank-ring {
  position:absolute; inset:0; border-radius:50%; border:1px solid var(--glow-cyan);
  box-shadow:0 0 20px rgba(110,231,255,0.4);
  animation:rankRingPulse 2s ease-in-out infinite;
}
@keyframes rankRingPulse {
  0%,100%{ box-shadow:0 0 20px rgba(110,231,255,0.3); }
  50%    { box-shadow:0 0 40px rgba(110,231,255,0.6); }
}
.rank-icon { font-size:1.6rem; color:var(--glow-cyan); position:relative; z-index:1; }
.end-eyebrow { font-family:var(--font-mono); font-size:0.6rem; letter-spacing:0.3em; text-transform:uppercase; color:var(--text-dim); }
.end-rank-title { font-family:var(--font-serif); font-size:clamp(1.5rem,5vw,2rem); font-weight:300; color:var(--glow-cyan); letter-spacing:0.1em; text-shadow:0 0 30px rgba(110,231,255,0.4); }
.end-stats-row { display:flex; gap:2rem; align-items:center; }
.end-stat { display:flex; flex-direction:column; align-items:center; gap:0.15rem; }
.end-stat-val { font-family:var(--font-mono); font-size:1.3rem; color:var(--energy-gold); }
.end-stat-label { font-family:var(--font-display); font-size:0.48rem; letter-spacing:0.15em; text-transform:uppercase; color:var(--text-dim); }
.reflection-card {
  border:1px solid rgba(110,231,255,0.15); border-radius:2px;
  padding:1.6rem 1.8rem; width:100%;
  background:rgba(16,25,53,0.4); backdrop-filter:blur(12px);
  animation:cardReveal 0.8s var(--ease-out) forwards; opacity:0; transform:translateY(16px);
  position:relative;
}
@keyframes cardReveal { to{ opacity:1; transform:translateY(0); } }
.reflection-card::before {
  content:''; position:absolute; top:0; left:10%; right:10%; height:1px;
  background:linear-gradient(to right,transparent,var(--glow-cyan),transparent); opacity:0.4;
}
.reflection-type { font-family:var(--font-mono); font-size:0.58rem; letter-spacing:0.25em; text-transform:uppercase; color:var(--text-dim); margin-bottom:0.7rem; }
.reflection-text { font-family:var(--font-serif); font-size:clamp(0.95rem,2.8vw,1.15rem); font-weight:300; line-height:1.7; color:var(--text-primary); font-style:italic; }
.reflection-author { font-family:var(--font-mono); font-size:0.65rem; color:var(--text-dim); margin-top:0.7rem; }
.achievement-pop {
  display:flex; align-items:center; gap:0.6rem;
  padding:0.55rem 1.1rem; border:1px solid var(--energy-gold); border-radius:2px;
  background:rgba(255,209,102,0.05);
  animation:achPop 0.5s var(--ease-elastic);
}
@keyframes achPop { from{transform:scale(0.8);opacity:0} to{transform:scale(1);opacity:1} }
.ach-icon { color:var(--energy-gold); font-size:0.9rem; }
.ach-text { font-family:var(--font-serif); font-size:0.82rem; color:var(--energy-gold); font-style:italic; }
.end-actions { display:flex; flex-direction:column; align-items:center; gap:0.7rem; width:100%; }

/* ══════════════════════════════════ STATS */
#screen-stats { background:var(--space-deep); align-items:flex-start; }
.stats-content {
  position:relative; z-index:1;
  display:flex; flex-direction:column; align-items:center;
  gap:1.8rem; padding:2.5rem 2rem; max-width:560px; width:100%;
  text-align:center;
}
.stats-title { font-family:var(--font-serif); font-size:2rem; font-weight:300; color:var(--text-primary); }
.stats-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:0.8rem; width:100%; }
.stats-card {
  display:flex; flex-direction:column; align-items:center; gap:0.3rem;
  padding:1rem 0.5rem; border:1px solid var(--text-ghost); border-radius:2px;
  background:rgba(16,25,53,0.3);
}
.stats-card-val { font-family:var(--font-mono); font-size:1.4rem; color:var(--glow-cyan); }
.stats-card-label { font-family:var(--font-display); font-size:0.42rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--text-dim); text-align:center; }

.achievements-section { width:100%; text-align:left; }
.ach-section-title { font-family:var(--font-display); font-size:0.6rem; letter-spacing:0.25em; text-transform:uppercase; color:var(--text-dim); margin-bottom:1rem; }
.ach-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:0.6rem; }
.ach-item {
  display:flex; align-items:center; gap:0.5rem;
  padding:0.6rem 0.8rem; border-radius:2px; border:1px solid var(--text-ghost);
  background:rgba(16,25,53,0.3);
}
.ach-item.earned { border-color:rgba(255,209,102,0.3); background:rgba(255,209,102,0.05); }
.ach-item-icon { font-size:0.9rem; color:var(--text-ghost); }
.ach-item.earned .ach-item-icon { color:var(--energy-gold); }
.ach-item-name { font-family:var(--font-serif); font-size:0.78rem; color:var(--text-dim); }
.ach-item.earned .ach-item-name { color:var(--text-primary); }

.export-section { width:100%; display:flex; flex-direction:column; align-items:center; gap:1rem; text-align:center; }
.export-style-row { display:flex; gap:0.6rem; }
.export-style-btn {
  padding:0.4rem 1rem; border:1px solid var(--text-ghost); border-radius:2px;
  background:transparent; color:var(--text-dim); cursor:pointer;
  font-family:var(--font-mono); font-size:0.6rem; transition:all 0.2s;
}
.export-style-btn.active, .export-style-btn:hover {
  border-color:var(--glow-cyan); color:var(--glow-cyan); background:rgba(110,231,255,0.05);
}
.export-preview {
  width:100%; max-width:360px; border:1px solid var(--text-ghost); border-radius:2px;
  overflow:hidden; min-height:80px; display:flex; align-items:center; justify-content:center;
  background:rgba(16,25,53,0.3);
}
.export-preview img { width:100%; height:auto; display:block; }

/* Scrollbar */
::-webkit-scrollbar { width:3px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--text-ghost); border-radius:2px; }

/* Responsive */
@media(max-height:600px){
  .tutorial-content,.setup-content,.stats-content{ gap:1rem; padding:1rem; }
  .breath-ring-wrap{ width:90px; height:90px; }
}
@media(max-width:360px){
  .stats-grid{ grid-template-columns:repeat(2,1fr); }
  .landing-stats{ gap:0.7rem; padding:0.7rem 1rem; }
}

::selection { background:rgba(110,231,255,0.2); color:var(--text-primary); }