/* =====================================================================
   design2.css (2.13.0): premium dark pass. Loads after theme.css.
   Ambient backdrop, warm tea-gold highlights on the cool accent, glowing
   primary actions, a clear type scale, arcade-style game surfaces and a
   calmer settings layout. Everything is additive: no markup changes.
   ===================================================================== */
:root{
  --ft-gold:#E8C48A;
  --ft-gold-soft:rgba(232,196,138,.18);
  --ft-indigo:#7C8CC4;
  --ft-glow-accent:0 0 0 1px rgba(160,189,210,.25),0 18px 46px -14px rgba(160,189,210,.55);
  --ft-glow-gold:0 0 0 1px rgba(232,196,138,.28),0 18px 46px -16px rgba(232,196,138,.45);
  --ft-type-display:clamp(44px,6.4vw,76px);
}
/* ---------- 1. Ambient backdrop: layered nebula glow ---------- */
body::before{
  content:'';position:fixed;inset:-10%;z-index:-2;pointer-events:none;
  background:
    radial-gradient(40% 35% at 18% 12%,rgba(124,140,196,.16),transparent 70%),
    radial-gradient(35% 30% at 85% 88%,rgba(232,196,138,.10),transparent 70%),
    radial-gradient(50% 40% at 60% 40%,rgba(160,189,210,.07),transparent 75%);
}
/* ---------- 1b. Glass: premium borders and a deeper blur ---------- */
.st-card,.panel,.stat,.gstage,.hero,.hm-side,.wx-panel,.pc-card,.focus-map,.week-weather{
  border:1px solid rgba(255,255,255,.10)!important;
  -webkit-backdrop-filter:blur(22px) saturate(150%)!important;
  backdrop-filter:blur(22px) saturate(150%)!important;
}
/* ---------- 2. Home: hero, primary CTA, bento widgets ---------- */
.hero .eyebrow,.hero p.eyebrow,.hero small{color:var(--ft-gold)!important}
.hero{background:radial-gradient(70% 90% at 0% 0%,rgba(160,189,210,.10),transparent 65%),linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.01))!important}
.hero button,.cta{
  position:relative;border:0!important;border-radius:18px!important;
  background:linear-gradient(135deg,#d6e6f2 0%,#A0BDD2 55%,#c9a46a 130%)!important;
  color:#0d1318!important;font-weight:800!important;letter-spacing:.01em;
  box-shadow:0 12px 34px -10px rgba(160,189,210,.65),0 0 0 1px rgba(255,255,255,.18) inset!important;
  transition:transform .25s var(--ft-ease),box-shadow .35s var(--ft-ease),filter .25s!important;
}
.hero button:hover,.cta:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 18px 44px -10px rgba(160,189,210,.8),0 0 0 1px rgba(255,255,255,.25) inset!important;filter:brightness(1.05)}
.stat .bar,.stat .progress i,.stat .fill{background:linear-gradient(90deg,#A0BDD2,#E8C48A)!important;box-shadow:0 0 14px rgba(232,196,138,.45)}
.stat{transition:transform .3s var(--ft-ease),box-shadow .3s var(--ft-ease)!important}
.stat:hover{transform:translateY(-3px)}
.panel-head h2,.st-card h2{letter-spacing:.02em}
/* status badges (streak, goal) */
.stat small{display:inline-block;padding:3px 9px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08)}
/* ---------- 4. Games: arcade cabinet surfaces ---------- */
.gstage{background:radial-gradient(80% 60% at 50% 0%,rgba(124,140,196,.14),transparent 70%),radial-gradient(60% 50% at 50% 100%,rgba(232,196,138,.07),transparent 70%),rgba(10,14,20,.55)!important}
.gm-big{letter-spacing:-.02em;text-shadow:0 0 28px rgba(160,189,210,.25)}
.gm-hud b{font-variant-numeric:tabular-nums;color:var(--ft-gold)}
.gm-hud{letter-spacing:.04em;text-transform:uppercase;font-size:12px}
.gm-value{background:linear-gradient(180deg,#fff,#A0BDD2 55%,#E8C48A);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 22px rgba(160,189,210,.35))}
.gm-badge.new{background:linear-gradient(135deg,#f3d9a4,#E8C48A)!important;color:#2b1d00!important;box-shadow:0 0 22px rgba(232,196,138,.55)}
.gm-badge.first{background:linear-gradient(135deg,rgba(160,189,210,.35),rgba(124,140,196,.25))!important;color:#e6f0f7!important}
.gm-target{box-shadow:0 0 0 6px rgba(160,189,210,.12),0 0 34px rgba(160,189,210,.7)!important}
.gm-pad.lit{box-shadow:0 0 0 2px rgba(255,255,255,.2),0 0 36px rgba(160,189,210,.75)!important}
.gm-pad.bad,.gm-tile.bad,.gm-chip.bad{box-shadow:0 0 30px rgba(239,127,127,.6)!important}
.gm-tile.ok,.gm-chip.ok{box-shadow:0 0 18px rgba(232,196,138,.35)}
.gm-tile.lit{box-shadow:0 0 26px rgba(160,189,210,.8)!important}
.gm-btn,.wx-go,.gm-btn.ghost:hover{transition:transform .25s var(--ft-ease),box-shadow .3s!important}
.gm-btn{background:linear-gradient(135deg,#d6e6f2,#A0BDD2 60%,#c9a46a)!important;color:#0d1318!important;box-shadow:0 12px 30px -10px rgba(160,189,210,.6)}
.gm-btn:hover{box-shadow:0 18px 40px -10px rgba(160,189,210,.85)!important}
.gm-bar{height:8px;background:rgba(255,255,255,.07)}
.gm-bar i{background:linear-gradient(90deg,#A0BDD2,#E8C48A);box-shadow:0 0 14px rgba(232,196,138,.5)}
.gm-intro .gm-btn{min-width:200px}
/* ---------- 5. Settings: organized cards, polished controls ---------- */
#view-settings .st-card{padding:22px 24px!important}
#view-settings .st-card h2{font-size:12px!important;color:var(--ft-gold)!important;letter-spacing:.14em;margin-bottom:6px!important}
#view-settings .st-row{padding:14px 0!important}
#view-settings .st-switch{width:50px;height:28px;background:rgba(255,255,255,.12)!important}
#view-settings .st-switch::after{width:22px;height:22px;top:3px;left:3px}
#view-settings .st-switch:checked{background:linear-gradient(135deg,#A0BDD2,#E8C48A)!important;box-shadow:0 0 16px rgba(232,196,138,.35)}
#view-settings .st-switch:checked::after{transform:translateX(22px)}
#view-settings input[type=range]{-webkit-appearance:none;appearance:none;height:6px;border-radius:99px;background:linear-gradient(90deg,#A0BDD2 var(--p,50%),rgba(255,255,255,.12) var(--p,50%));outline:none}
#view-settings input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 0 0 4px rgba(160,189,210,.25),0 4px 12px rgba(0,0,0,.4);cursor:pointer}
#view-settings select,#view-settings input[type=number]{border-radius:14px!important;border-color:rgba(255,255,255,.12)!important;background:rgba(255,255,255,.04)!important}
#view-settings select:focus,#view-settings input:focus{border-color:rgba(160,189,210,.6)!important;box-shadow:0 0 0 3px rgba(160,189,210,.18)!important}
#view-settings .st-btn{border-radius:14px!important;transition:transform .2s var(--ft-ease),box-shadow .25s,border-color .2s!important}
#view-settings .st-btn:hover{transform:translateY(-1px);box-shadow:0 10px 24px -12px rgba(160,189,210,.6)}
#view-settings .st-foot{letter-spacing:.04em}
/* ---------- micro-interactions everywhere ---------- */
.navbtn{transition:background-color .25s var(--ft-ease),transform .25s var(--ft-ease),color .25s!important}
.navbtn:hover{transform:translateX(3px)}

/* While the welcome screen is open, the page behind it does not scroll */
html:has(body.welcome-open),body.welcome-open{overflow:hidden!important;height:100%!important}

/* ---------- Breathe: Start/Stop button, clean layout with the Enter hint ---------- */
#bzGo{display:flex;gap:6px;align-items:center;justify-content:center;min-width:170px;cursor:pointer;pointer-events:auto}
#bzGo kbd{margin:0;padding:2px 7px;font-size:11px;opacity:.75;flex:none}
#bzGo *{pointer-events:none}

/* ---------- Zen garden: glass container, tabs and canvas stage ---------- */
.zen-box{margin-top:14px;padding:22px!important}
.zen-box h2{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ft-gold);margin-bottom:12px}
.zen-tabs{display:inline-flex;gap:4px;padding:4px;border-radius:999px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);margin-bottom:14px;flex-wrap:wrap}
.zen-tabs button{padding:8px 16px;border-radius:999px;border:0;background:transparent;color:var(--muted);font:inherit;font-size:13px;font-weight:700;cursor:pointer;transition:background .3s var(--ft-ease),color .3s var(--ft-ease),box-shadow .3s var(--ft-ease)}
.zen-tabs button:hover{color:var(--text)}
.zen-stage{position:relative;border-radius:24px;overflow:hidden;border:1px solid rgba(255,255,255,.10);background:radial-gradient(90% 70% at 50% 0%,rgba(124,140,196,.16),transparent 70%),rgba(6,10,16,.7);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 30px 60px -36px rgba(0,0,0,.8)}
.zen-cv{display:block;width:100%;height:340px;cursor:crosshair;touch-action:none}
.zen-hint{margin:12px 2px 0;font-size:13px;color:var(--muted);line-height:1.5}
@media (max-width:640px){.zen-cv{height:280px}}

/* ---------- Sidebar: no horizontal scrollbar (only vertical scrolling) ---------- */
#navList{overflow-x:hidden!important;overflow-y:auto!important}
#navList li,#navList .navbtn,#navList .grp-toggle{max-width:100%;box-sizing:border-box}
#navList .navbtn span{min-width:0}

/* ---------- Hertz control bar: centred under the canvas ---------- */
.hz-bar{justify-content:center}
.hz-vol{flex:1 1 300px;min-width:0;max-width:460px}
.hz-play{flex:0 0 auto}
@media (max-width:640px){.hz-bar{justify-content:center;padding:14px 16px}.hz-vol{flex-basis:100%;max-width:none}.hz-play{width:100%;justify-content:center}}

/* ---------- Tea steam: three waves that rise, sway and fade (steamRise) ---------- */
.cup{overflow:visible}
.cup .steam,.w-logo .steam{
  stroke-dasharray:none;                 /* show the full wave line */
  transform-box:fill-box;transform-origin:50% 100%;
  animation-name:steamRise;
  animation-duration:3.6s;
  animation-timing-function:ease-in-out;
  animation-iteration-count:infinite;
  opacity:0;will-change:transform,opacity;
}
/* the second and third lines start later through their inline animation-delay (.9s, 1.8s) */
@keyframes steamRise{
  0%   {transform:translate(0,9px) scaleY(.8);opacity:0}
  20%  {transform:translate(-1.5px,4px) scaleY(.95);opacity:.9}
  45%  {transform:translate(2px,-1px) rotate(2deg) scaleY(1);opacity:.75}
  70%  {transform:translate(-2px,-7px) rotate(-2deg) scaleY(1.06);opacity:.4}
  100% {transform:translate(0,-13px) scaleY(1.12);opacity:0}
}
/* "Reduce motion" is on: keep a calm opacity-only breathing (no movement) so the steam is never frozen */
@keyframes steamFade{0%,100%{opacity:.12}50%{opacity:.85}}
@media (prefers-reduced-motion:reduce){
  .cup .steam,.w-logo .steam{
    animation-name:steamFade!important;animation-duration:4.5s!important;
    animation-timing-function:ease-in-out!important;animation-iteration-count:infinite!important;
    transform:none!important;
  }
  .cup .steam + .steam,.w-logo .steam + .steam{animation-delay:1.5s!important}
  .cup .steam + .steam + .steam,.w-logo .steam + .steam + .steam{animation-delay:3s!important}
}