/* ---------- Logo mark (ring icon shared by badges + splash) ---------- */
  .o-mark{display:inline-block; position:relative; width:0.6em; height:0.6em; margin:0 0.02em; transform:translateY(0.03em);}
  .o-mark svg{width:100%; height:100%; display:block; overflow:visible;}
  .side-badge svg, .brand-badge svg{width:60%; height:60%; display:block;}

  /* ---------- Splash / loading screen ----------
     Round 9 (UX polish): the ring fill, the pill fill, and the % text are now all set from real
     JS state (see setSplashProgress() in js/ui.js) instead of an infinitely-looping fixed-time
     CSS animation that used to fill/reset every 2.6s regardless of whether anything had actually
     loaded. `transition` here just smooths each real progress update visually — it never
     advances on its own the way the old `animation: ... infinite` rules did. The word/logo reveal
     below is pure ambient decoration (doesn't claim to represent load progress) and is the one
     animation still left looping. */
  #screen-splash{background:var(--black); display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:24px;}
  .splash-pct{font-size:var(--fs-sm); font-weight:600; color:#B7B2A4; letter-spacing:0.02em; height:18px; margin:0 0 12px;}
  .splash-ring-stage{width:clamp(92px,16vw,150px); height:clamp(92px,16vw,150px); position:relative;}
  .splash-ring-stage svg{width:100%; height:100%; transform:rotate(-90deg); overflow:visible; display:block;}
  .splash-ring-fg{ stroke:var(--yellow); transition: stroke-dashoffset 0.4s ease; }
  .splash-tick{ stroke:var(--yellow); opacity:.7; }
  .splash-word-stage{position:relative; overflow:visible; margin-top:22px;}
  .splash-word{
    color:#fff; font-weight:800; font-size:clamp(24px,4vw,32px); letter-spacing:-0.01em;
    display:flex; align-items:center; justify-content:center;
    animation: splashWordReveal 2.6s cubic-bezier(.4,0,.2,1) infinite;
  }
  .splash-word .o-mark{width:0.56em; height:0.56em;}
  @keyframes splashWordReveal{
    0%   { opacity:0; transform:scale(.85) translateY(6px); }
    60%  { opacity:0; transform:scale(.85) translateY(6px); }
    72%  { opacity:1; transform:scale(1.06) translateY(0); }
    80%  { opacity:1; transform:scale(1) translateY(0); }
    96%  { opacity:1; transform:scale(1) translateY(0); }
    100% { opacity:0; transform:scale(.85) translateY(6px); }
  }
  .splash-sub{color:#8B8A83; font-size:var(--fs-sm); margin-top:10px;}
  .splash-pill{
    margin-top:32px; position:relative; width:clamp(170px,26vw,220px); height:44px; border-radius:999px;
    border:2px solid var(--yellow); overflow:hidden; display:flex; align-items:center; justify-content:center;
  }
  .splash-pill-fill{
    position:absolute; inset:0; background:var(--yellow); border-radius:999px; transform-origin:left center;
    transform:scaleX(0); transition: transform 0.4s ease;
  }
  .splash-pill-label{ position:relative; font-size:var(--fs-sm); font-weight:700; }
  .splash-pill-label .txt-loading{ color:#fff; }
  .splash-pill-label .txt-ready{ color:var(--black); position:absolute; left:0; right:0; opacity:0; }
  /* Only swaps once setSplashProgress() actually reaches 100 — see the splash-pill-done class
     toggle in js/ui.js — not on a timer. */
  .splash-pill-label.splash-pill-done .txt-loading{ opacity:0; }
  .splash-pill-label.splash-pill-done .txt-ready{ opacity:1; }

  @media (min-width:860px){
    .splash-word{font-size:clamp(28px,2.6vw,38px);}
    .splash-sub{font-size:var(--fs-base);}
  }