/* Luckyscope app styles — ported from the original web app; iOS Theme.swift is the palette source of truth. */
  :root{
    --cream:#FFF6EC;
    --ink:#4B2F6B;
    --ink-soft:#7A6394;
    --gold:#FFC857;
    --accent:#FF9ECD;
    --glass:rgba(255,255,255,.62);
    --glass-line:rgba(255,255,255,.85);
    --shadow:30px 40px 80px -30px rgba(120,80,170,.45);
    --deep:#3A2358;
    --tile-top:rgba(255,255,255,.92);
    --tile-bottom:rgba(255,255,255,.5);
    --tile-line:rgba(255,255,255,.7);
    --sign-top:rgba(255,255,255,.9);
    --sign-bottom:rgba(255,255,255,.55);
    --check-off:rgba(255,255,255,.6);
    --star:#4B2F6B;
    --bg-a:#FFF4EC; --bg-b:#F4ECFF; --bg-c:#EAFBF3;
    --bg-r1:#FFE7D7; --bg-r2:#ECDDFF; --bg-r3:#D4F6E9;
    --tile-power-a:#EFE7FF; --tile-power-b:#E4F4FF; --tile-cta-power:#7B5AFF;
    --tile-lucky-a:#FFF3D6; --tile-lucky-b:#E7FBE4; --tile-cta-lucky:#39A065;
    --r:30px;
    font-size:16px;
    color-scheme:light dark;
  }

  @media (prefers-color-scheme: dark) {
    :root {
      --cream: #120E1C;
      --ink: #EFE7FF;
      --ink-soft: #AE9CD0;
      --glass: rgba(42, 34, 64, .5);        /* 2A2240 @ 50% */
      --glass-line: rgba(255, 255, 255, .14);
      --shadow: 30px 40px 80px -30px rgba(0, 0, 0, .45);
      --tile-top: #3A3158;
      --tile-bottom: #2A2444;
      --tile-line: rgba(255, 255, 255, .14);
      --sign-top: #3A3158;
      --sign-bottom: #2A2444;
      --check-off: rgba(255, 255, 255, .14);
      --star: #FFFFFF;
      --bg-a: #181122; --bg-b: #1B1430; --bg-c: #0F1A1C;
      --bg-r1: #3E2840; --bg-r2: #2C2358; --bg-r3: #123A36;
      --tile-power-a: #2E2A50; --tile-power-b: #21304C; --tile-cta-power: #B7A6FF;
      --tile-lucky-a: #37331C; --tile-lucky-b: #21351F; --tile-cta-lucky: #7FD89B;
    }
  }

  *{box-sizing:border-box;margin:0;padding:0}
  html,body{height:100%}
  html{background:var(--cream)}
  body{
    font-family:"Nunito",system-ui,sans-serif;
    color:var(--ink);
    min-height:100dvh;
    overflow-x:hidden;
  }
  body::before{
    content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
    background:
      radial-gradient(120% 90% at 18% 8%, var(--bg-r1) 0%, transparent 55%),
      radial-gradient(120% 90% at 85% 6%, var(--bg-r2) 0%, transparent 52%),
      radial-gradient(140% 100% at 50% 108%, var(--bg-r3) 0%, transparent 58%),
      linear-gradient(160deg,var(--bg-a) 0%,var(--bg-b) 52%,var(--bg-c) 100%);
  }

  /* ambient drifting sparkles */
  .sky{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
  .twinkle{position:absolute;font-size:18px;opacity:0;color:var(--star);animation:drift linear infinite;filter:saturate(1.2)}
  @keyframes drift{
    0%{transform:translateY(20px) rotate(0deg) scale(.7);opacity:0}
    12%{opacity:.85}
    88%{opacity:.85}
    100%{transform:translateY(-115vh) rotate(220deg) scale(1.05);opacity:0}
  }

  #confetti{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:60}

  .wrap{position:relative;z-index:2;max-width:480px;margin:0 auto;padding:26px 18px 48px;min-height:100dvh;display:flex;flex-direction:column}

  /* ---------- shared header ---------- */
  .brand{text-align:center;margin-bottom:18px}
  .logo{
    font-family:"Fredoka",sans-serif;font-weight:700;font-size:clamp(38px,11vw,52px);
    line-height:.95;letter-spacing:-1.5px;
    background:linear-gradient(105deg,#FF8FC4,#FFB23E 38%,#9B7BFF 78%,#5FD3E6);
    -webkit-background-clip:text;background-clip:text;color:transparent;
    filter:drop-shadow(0 6px 18px rgba(155,123,255,.25));
    user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;
  }
  .logo .star{-webkit-text-fill-color:initial;color:var(--star);background:none;display:inline-block;font-size:.7em;animation:cloverspin 9s linear infinite;transform-origin:center}
  @keyframes cloverspin{to{transform:rotate(360deg)}}
  .tag{font-weight:700;color:var(--ink-soft);font-size:.95rem;margin-top:6px;letter-spacing:.2px}

  /* ---------- pick screen ---------- */
  .panel{
    background:var(--glass);
    border:1.5px solid var(--glass-line);
    border-radius:var(--r);
    box-shadow:var(--shadow);
    backdrop-filter:blur(18px) saturate(1.3);
    -webkit-backdrop-filter:blur(18px) saturate(1.3);
    padding:22px 18px;
  }
  .panel-title{font-family:"Fredoka",sans-serif;font-weight:600;font-size:1.18rem;text-align:center;margin-bottom:4px}
  .panel-sub{text-align:center;color:var(--ink-soft);font-weight:700;font-size:.85rem;margin-bottom:18px}

  .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
  .sign{
    cursor:pointer;border:none;font-family:inherit;color:var(--ink);
    background:linear-gradient(160deg,var(--sign-top),var(--sign-bottom));
    border-radius:22px;padding:14px 8px 12px;text-align:center;
    box-shadow:0 10px 22px -12px rgba(120,80,170,.4),inset 0 0 0 1.5px rgba(255,255,255,.7);
    transition:transform .18s cubic-bezier(.34,1.56,.64,1),box-shadow .2s;
    position:relative;overflow:hidden;animation:pop .5s both;
  }
  .sign::before{content:"";position:absolute;inset:0;background:var(--c);opacity:.16;transition:opacity .2s}
  .sign:hover::before,.sign:focus-visible::before{opacity:.30}
  .sign:hover,.sign:focus-visible{transform:translateY(-4px) scale(1.05) rotate(-1.5deg);box-shadow:0 18px 30px -12px rgba(120,80,170,.55),inset 0 0 0 2px #fff;outline:none}
  .sign:active{transform:scale(.93) rotate(0)}
  .sign .em{font-size:2rem;display:block;position:relative;filter:drop-shadow(0 4px 6px rgba(120,80,170,.25))}
  .sign .nm{font-family:"Fredoka",sans-serif;font-weight:600;font-size:.86rem;margin-top:5px;position:relative;display:block}
  .sign .dt{font-size:.62rem;font-weight:800;color:var(--ink-soft);position:relative;letter-spacing:.3px;display:block}
  @keyframes pop{from{opacity:0;transform:translateY(14px) scale(.85)}to{opacity:1;transform:none}}

  /* ---------- read screen ---------- */
  #read{display:none;flex:1;flex-direction:column}
  #read.on{display:flex;animation:fadein .45s both}
  @keyframes fadein{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

  .topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
  .back{
    border:none;cursor:pointer;font-family:"Fredoka",sans-serif;font-weight:600;font-size:.92rem;color:var(--ink);
    background:var(--glass);border:1.5px solid var(--glass-line);border-radius:999px;padding:9px 16px;
    box-shadow:0 8px 18px -10px rgba(120,80,170,.5);transition:transform .15s;
  }
  .back:hover{transform:translateX(-3px)}
  .back:active{transform:scale(.94)}
  .mini-logo{font-family:"Fredoka",sans-serif;font-weight:700;color:var(--ink-soft);font-size:.95rem}

  .orb-area{display:flex;flex-direction:column;align-items:center;text-align:center;margin:6px 0 18px}
  .orb{
    --o:148px;width:var(--o);height:var(--o);border-radius:50%;display:grid;place-items:center;position:relative;
    background:radial-gradient(circle at 32% 28%,#fff 0%,color-mix(in srgb,var(--accent),#fff 42%) 30%,var(--accent) 78%,color-mix(in srgb,var(--accent),var(--deep) 28%) 100%);
    box-shadow:0 26px 50px -16px color-mix(in srgb,var(--accent),var(--deep) 10%),inset 0 6px 14px rgba(255,255,255,.65),inset 0 -10px 22px rgba(80,40,120,.25);
    animation:breathe 5s ease-in-out infinite;
  }
  @keyframes breathe{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-7px) scale(1.025)}}
  .orb.spin{animation:wiggle .6s ease both,breathe 5s ease-in-out infinite .6s}
  @keyframes wiggle{0%{transform:rotate(0) scale(1)}25%{transform:rotate(-12deg) scale(1.08)}55%{transform:rotate(10deg) scale(1.08)}80%{transform:rotate(-4deg) scale(1.02)}100%{transform:rotate(0) scale(1)}}
  .orb .glyph{font-size:4.4rem;filter:drop-shadow(0 8px 10px rgba(70,30,110,.3));animation:floaty 4s ease-in-out infinite}
  @keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
  .orb .ring{position:absolute;inset:-13px;border-radius:50%;border:2.5px dashed rgba(255,255,255,.7);animation:rot 16s linear infinite}
  @keyframes rot{to{transform:rotate(360deg)}}

  .sname{font-family:"Fredoka",sans-serif;font-weight:600;font-size:1.7rem;margin-top:16px;line-height:1}
  .meta{display:flex;gap:8px;justify-content:center;margin-top:8px;flex-wrap:wrap}
  .pill{font-weight:800;font-size:.72rem;letter-spacing:.4px;text-transform:uppercase;padding:5px 12px;border-radius:999px;
    background:color-mix(in srgb,var(--accent),#fff 70%);color:color-mix(in srgb,var(--accent),var(--deep) 30%)}

  .reading{
    background:var(--glass);border:1.5px solid var(--glass-line);border-radius:var(--r);
    box-shadow:var(--shadow);backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);
    padding:22px 20px;
  }
  .headline{font-family:"Fredoka",sans-serif;font-weight:500;font-size:1.32rem;line-height:1.32;text-align:center}
  .note{margin-top:12px;text-align:center;color:var(--ink-soft);font-weight:700;font-size:.92rem;font-style:italic}

  /* vibe meter */
  .vibe{margin-top:20px}
  .vibe-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:7px;font-weight:800}
  .vibe-top .lab{font-family:"Fredoka",sans-serif;font-weight:600;font-size:.95rem}
  .vibe-top .val{font-family:"Fredoka",sans-serif;font-size:1.1rem;color:color-mix(in srgb,var(--accent),var(--deep) 22%)}
  .track{height:16px;border-radius:999px;background:rgba(120,80,170,.13);overflow:hidden;position:relative}
  .fill{height:100%;width:0;border-radius:999px;background:linear-gradient(90deg,#FFB23E,#FF8FC4 50%,#9B7BFF);transition:width 1.1s cubic-bezier(.22,1.2,.4,1);position:relative}
  .fill::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);background-size:60% 100%;animation:shine 2.4s linear infinite}
  @keyframes shine{to{background-position:200% 0}}

  /* goodies */
  .goodies{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-top:18px}
  .tile{background:linear-gradient(160deg,var(--tile-top),var(--tile-bottom));border-radius:20px;padding:14px;
    box-shadow:inset 0 0 0 1.5px var(--tile-line),0 10px 20px -14px rgba(120,80,170,.5)}
  .tile .k{font-weight:900;font-size:.64rem;letter-spacing:.7px;text-transform:uppercase;color:var(--ink-soft)}
  .tile .v{font-family:"Fredoka",sans-serif;font-weight:600;font-size:1.12rem;margin-top:5px;display:flex;align-items:center;gap:8px;line-height:1.1}
  .swatch{width:18px;height:18px;border-radius:7px;box-shadow:inset 0 0 0 2px rgba(255,255,255,.85),0 3px 6px rgba(0,0,0,.12);flex:none}
  .tile .big{font-size:1.7rem}

  .mission{margin-top:11px;background:color-mix(in srgb,var(--accent),#fff 78%);border-radius:20px;padding:15px 16px;
    display:flex;gap:13px;align-items:center;box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--accent),#fff 55%)}
  .check{flex:none;width:30px;height:30px;border-radius:10px;border:2.5px solid color-mix(in srgb,var(--accent),var(--deep) 18%);
    background:var(--check-off);cursor:pointer;display:grid;place-items:center;transition:transform .15s;position:relative}
  .check:active{transform:scale(.85)}
  .check svg{width:18px;height:18px;stroke:#fff;stroke-width:3.5;fill:none;stroke-linecap:round;stroke-linejoin:round;
    stroke-dasharray:24;stroke-dashoffset:24;transition:stroke-dashoffset .3s ease .05s}
  .check.done{background:color-mix(in srgb,var(--accent),var(--deep) 8%);border-color:transparent;animation:pophard .35s}
  .check.done svg{stroke-dashoffset:0}
  @keyframes pophard{0%{transform:scale(1)}40%{transform:scale(1.3)}100%{transform:scale(1)}}
  .mission .mt{font-weight:800;font-size:.95rem;line-height:1.3}
  .mission .mk{font-weight:900;font-size:.62rem;letter-spacing:.7px;text-transform:uppercase;color:color-mix(in srgb,var(--accent),var(--deep) 30%);display:block;margin-bottom:2px}
  .mission.done .mt{opacity:.5;text-decoration:line-through}

  .affirm{margin-top:11px;text-align:center;font-family:"Fredoka",sans-serif;font-weight:500;font-size:1.05rem;
    padding:14px 16px;border-radius:20px;line-height:1.35;
    background:linear-gradient(120deg,color-mix(in srgb,var(--accent),#fff 80%),rgba(255,255,255,.4));
    box-shadow:inset 0 0 0 1.5px var(--tile-line)}
  .affirm .qm{color:var(--accent);font-size:1.3em;font-weight:700}

  /* dark-mode overrides that can't be expressed as :root variable swaps alone
     (color-mix() targets need the full declaration re-stated after the base
     rule so source order lets them win the cascade) — mirrors iOS softPanel's
     dark branch: mix(accent, #1B1430, 0.74), see Theme.swift softPanel(). */
  @media (prefers-color-scheme: dark) {
    .mission{background:color-mix(in srgb,var(--accent),#1B1430 74%);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--accent),#1B1430 74%)}
    .affirm{background:linear-gradient(120deg,color-mix(in srgb,var(--accent),#1B1430 74%),rgba(42,34,64,.4))}
  }

  /* day toggle */
  .daytoggle{display:flex;gap:10px;justify-content:center;margin:2px 0 8px}
  .day{flex:1;max-width:172px;cursor:pointer;border:none;font-family:"Fredoka",sans-serif;font-weight:600;color:var(--ink);
    background:var(--glass);border:1.5px solid var(--glass-line);border-radius:20px;padding:11px 10px;
    display:flex;flex-direction:column;align-items:center;gap:2px;line-height:1.05;
    box-shadow:0 10px 20px -12px rgba(120,80,170,.45);
    transition:transform .15s cubic-bezier(.34,1.56,.64,1),box-shadow .2s,background .2s,opacity .2s}
  .day .dlab{font-size:1.05rem}
  .day .dsub{font-size:.66rem;font-weight:800;color:var(--ink-soft);letter-spacing:.3px}
  .day:hover:not(.active):not(:disabled){transform:translateY(-2px)}
  .day:active:not(:disabled){transform:scale(.95)}
  .day.active{color:#fff;border-color:transparent;transform:translateY(1px) scale(.985);
    background:linear-gradient(160deg,var(--accent),color-mix(in srgb,var(--accent),#9B7BFF 42%));
    box-shadow:inset 0 5px 11px rgba(70,30,110,.4),inset 0 -2px 4px rgba(255,255,255,.25),0 5px 12px -8px color-mix(in srgb,var(--accent),var(--deep) 5%)}
  .day.active .dsub{color:rgba(255,255,255,.88)}
  .day:disabled{cursor:not-allowed;opacity:.48;filter:grayscale(.45);box-shadow:none}
  .dayhint{text-align:center;color:var(--ink-soft);font-weight:700;font-size:.74rem;margin:0 0 14px;letter-spacing:.2px}

  footer{margin-top:auto;padding-top:24px;text-align:center;color:var(--ink-soft);font-weight:700;font-size:.78rem;opacity:.8}
  footer a{color:var(--ink-soft);text-decoration:underline;text-underline-offset:2px}
  footer a:hover,footer a:focus-visible{color:var(--ink)}
  /* separator lives in ::before (not a static text node) so a hidden
     #installLink leaves no dangling "· " before it */
  footer a#installLink::before{content:" · ";text-decoration:none}

  /* charm featured buttons (in reading) */
  .charmrow{display:flex;gap:11px;margin-top:18px}
  .charmtile{flex:1;cursor:pointer;border:none;font-family:"Fredoka",sans-serif;color:var(--ink);
    border-radius:22px;padding:14px 10px 12px;display:flex;flex-direction:column;align-items:center;gap:3px;
    position:relative;overflow:hidden;transition:transform .16s cubic-bezier(.34,1.56,.64,1),box-shadow .2s}
  .charmtile.power{background:linear-gradient(160deg,var(--tile-power-a),var(--tile-power-b));box-shadow:0 12px 26px -14px rgba(123,90,255,.6),inset 0 0 0 1.5px var(--glass-line)}
  .charmtile.lucky{background:linear-gradient(160deg,var(--tile-lucky-a),var(--tile-lucky-b));box-shadow:0 12px 26px -14px rgba(110,180,90,.55),inset 0 0 0 1.5px var(--glass-line)}
  .charmtile:hover{transform:translateY(-4px) scale(1.035)}
  .charmtile:active{transform:scale(.93)}
  .charmtile .ct-k{font-weight:900;font-size:.6rem;letter-spacing:.7px;text-transform:uppercase;color:var(--ink-soft)}
  .charmtile .ct-em{font-size:2.5rem;line-height:1;filter:drop-shadow(0 5px 9px rgba(120,80,170,.32));animation:floaty 3.4s ease-in-out infinite}
  .charmtile .ct-go{font-family:"Fredoka",sans-serif;font-weight:600;font-size:.76rem}
  .charmtile.power .ct-go{color:var(--tile-cta-power)}
  .charmtile.lucky .ct-go{color:var(--tile-cta-lucky)}
  /* standing-level mini meter (iOS parity — ReadView.swift CharmTile) */
  .tile-meter{width:100%;height:5px;border-radius:999px;background:rgba(120,80,170,.15);overflow:hidden;margin:1px 0}
  .tile-meter i{display:block;height:100%;border-radius:999px;transition:width .3s ease}
  .charmtile.power .tile-meter i{background:linear-gradient(90deg,#5FD3E6,#9B7BFF)}
  .charmtile.lucky .tile-meter i{background:linear-gradient(90deg,#FFD56B,#7FCB9B)}
  .charmtile::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 25%,rgba(255,255,255,.65),transparent 62%);opacity:0;transition:opacity .3s;pointer-events:none}
  .charmtile:hover::after{opacity:1}
  .tile.wide{grid-column:1 / -1}

  /* charm chamber screen */
  #charm{display:none;flex:1;flex-direction:column;
    user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
  #charm.on{display:flex;animation:fadein .4s both}
  #charm.power{--cg1:#C9B6FF;--cg2:#9B7BFF;--cg3:#6B4FB0;--mfill:linear-gradient(90deg,#5FD3E6,#9B7BFF)}
  #charm.lucky{--cg1:#FFE39A;--cg2:#FFC857;--cg3:#B0851C;--mfill:linear-gradient(90deg,#FFD56B,#7FCB9B)}
  .charm-title{font-family:"Fredoka",sans-serif;font-weight:600;font-size:1.95rem;text-align:center;margin-top:4px;line-height:1}
  .charm-sub{text-align:center;color:var(--ink-soft);font-weight:700;font-size:.9rem;margin-top:5px}
  .charm-stage{position:relative;height:300px;display:grid;place-items:center;margin:8px 0 4px}
  .charm-stage::before{content:"";position:absolute;width:320px;height:320px;border-radius:50%;
    background:radial-gradient(circle,var(--cg1) 0%,transparent 65%);opacity:.4;filter:blur(20px);pointer-events:none}
  .aura{position:absolute;width:250px;height:250px;border-radius:50%;pointer-events:none;
    background:radial-gradient(circle,var(--cg1) 0%,transparent 66%);filter:blur(4px);transform:scale(.7);opacity:.3}
  .halo{position:absolute;width:220px;height:220px;border-radius:50%;pointer-events:none;border:3px dashed var(--cg2);opacity:.55}
  .halo.two{width:272px;height:272px;border-style:dotted;border-width:2.5px;opacity:.35}
  .charm-orb{position:relative;width:172px;height:172px;border-radius:50%;border:none;cursor:pointer;z-index:1;
    display:grid;place-items:center;touch-action:none;-webkit-tap-highlight-color:transparent;
    background:radial-gradient(circle at 34% 28%,#fff 0%,var(--cg1) 60%,var(--cg3) 100%);
    box-shadow:0 24px 46px -16px var(--cg3),inset 0 6px 14px rgba(255,255,255,.6),inset 0 -10px 22px rgba(80,40,120,.22)}
  .charm-orb:active{box-shadow:0 16px 30px -16px var(--cg3),inset 0 6px 14px rgba(255,255,255,.5),inset 0 -8px 18px rgba(80,40,120,.28)}
  .charm-glyph{font-size:5rem;filter:drop-shadow(0 8px 10px rgba(70,30,110,.32));animation:floaty 3.4s ease-in-out infinite;pointer-events:none;user-select:none}
  .charm-glyph.pop{animation:charmpop .42s}
  @keyframes charmpop{0%{transform:scale(1)}35%{transform:scale(1.32) rotate(-7deg)}70%{transform:scale(.94) rotate(5deg)}100%{transform:scale(1)}}
  .charm-glyph.spin{animation:charmspin .95s cubic-bezier(.3,1.4,.5,1)}
  @keyframes charmspin{0%{transform:scale(1) rotate(0)}55%{transform:scale(1.4) rotate(220deg)}100%{transform:scale(1) rotate(360deg)}}

  .emeter{margin-top:8px}
  .emeter-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:7px;font-family:"Fredoka",sans-serif;font-weight:600}
  .emeter-top .ev{font-size:1.25rem;color:var(--cg3)}
  .etrack{height:22px;border-radius:999px;background:rgba(120,80,170,.13);overflow:hidden;position:relative;box-shadow:inset 0 2px 6px rgba(80,40,120,.18)}
  .efill{height:100%;width:0;border-radius:999px;position:relative;background:var(--mfill)}
  .efill::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent);background-size:55% 100%;animation:shine 1.6s linear infinite}
  .charm-hint{text-align:center;color:var(--ink-soft);font-weight:700;font-size:.8rem;margin-top:12px;letter-spacing:.2px}
  .sound{border:none;cursor:pointer;background:var(--glass);border:1.5px solid var(--glass-line);border-radius:999px;
    width:44px;height:44px;font-size:1.15rem;box-shadow:0 8px 18px -10px rgba(120,80,170,.5);transition:transform .15s}
  .sound:active{transform:scale(.9)}

  /* ---------- install helper: pill + sheet ---------- */
  .install-pill{
    position:fixed;left:50%;bottom:calc(16px + env(safe-area-inset-bottom));z-index:75;
    transform:translateX(-50%);display:flex;align-items:center;gap:2px;
    background:var(--glass);border:1.5px solid var(--glass-line);border-radius:999px;
    box-shadow:0 14px 30px -14px rgba(120,80,170,.55);
    backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);
    padding:4px 4px 4px 18px;animation:pillup .5s cubic-bezier(.34,1.56,.64,1) both;
  }
  @keyframes pillup{from{opacity:0;transform:translate(-50%,18px) scale(.92)}to{opacity:1;transform:translate(-50%,0) scale(1)}}
  .install-pill-body{border:none;background:none;cursor:pointer;font-family:"Fredoka",sans-serif;font-weight:600;
    font-size:.92rem;color:var(--ink);padding:9px 8px 9px 0}
  .install-pill-x{border:none;cursor:pointer;background:rgba(120,80,170,.14);color:var(--ink-soft);
    width:26px;height:26px;border-radius:50%;font-size:1rem;line-height:1;display:grid;place-items:center;
    margin-left:2px;transition:transform .15s}
  .install-pill-x:active{transform:scale(.86)}

  .install-overlay{position:fixed;inset:0;z-index:90;background:rgba(20,10,30,.45);
    display:flex;align-items:flex-end;justify-content:center;animation:overlayfade .2s ease both}
  @keyframes overlayfade{from{opacity:0}to{opacity:1}}
  .install-sheet{
    position:relative;width:100%;max-width:480px;
    background:var(--glass);border:1.5px solid var(--glass-line);
    border-top-left-radius:28px;border-top-right-radius:28px;
    box-shadow:var(--shadow);backdrop-filter:blur(22px) saturate(1.3);-webkit-backdrop-filter:blur(22px) saturate(1.3);
    padding:24px 22px calc(26px + env(safe-area-inset-bottom));
    animation:sheetup .32s cubic-bezier(.22,1.2,.4,1) both;
  }
  @keyframes sheetup{from{transform:translateY(100%)}to{transform:translateY(0)}}
  .install-sheet-close{position:absolute;top:14px;right:14px;border:none;cursor:pointer;
    background:rgba(120,80,170,.14);color:var(--ink-soft);width:30px;height:30px;border-radius:50%;
    font-size:1.1rem;line-height:1;display:grid;place-items:center;transition:transform .15s}
  .install-sheet-close:active{transform:scale(.88)}
  .install-sheet-title{font-family:"Fredoka",sans-serif;font-weight:600;font-size:1.15rem;margin-bottom:12px;padding-right:26px}
  .install-steps{padding-left:22px;font-weight:700;font-size:.95rem;line-height:1.7}
  .install-glyph{font-size:1rem}
  .install-note{margin-top:10px;color:var(--ink-soft);font-weight:700;font-size:.82rem}
  .install-routes{list-style:none;font-weight:700;font-size:.92rem;line-height:1.8}
  .install-routes b,.install-steps b{font-family:"Fredoka",sans-serif;font-weight:600}

  /* floating text + banner effects */
  .pop-fx{position:fixed;z-index:70;pointer-events:none;font-family:"Fredoka",sans-serif;font-weight:600;font-size:1.3rem;
    text-shadow:0 2px 10px rgba(255,255,255,.7);animation:popfx 1s ease-out forwards;white-space:nowrap;transform:translate(-50%,0)}
  @keyframes popfx{0%{opacity:0;transform:translate(-50%,0) scale(.5)}22%{opacity:1;transform:translate(-50%,-16px) scale(1.12)}100%{opacity:0;transform:translate(-50%,-78px) scale(1)}}
  .banner{position:fixed;left:50%;top:40%;z-index:80;pointer-events:none;font-family:"Fredoka",sans-serif;font-weight:700;
    font-size:1.9rem;text-align:center;color:#fff;padding:18px 28px;border-radius:26px;
    background:linear-gradient(120deg,var(--cg2),var(--cg3));box-shadow:0 24px 56px -12px rgba(80,40,120,.55);
    animation:bannerpop 4s ease-out forwards}
  @keyframes bannerpop{0%{opacity:0;transform:translate(-50%,-50%) scale(.5)}7%{opacity:1;transform:translate(-50%,-50%) scale(1.1)}14%{transform:translate(-50%,-50%) scale(1)}88%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(1.02)}}

  *:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:14px}

  @media (max-width:360px){.grid{gap:9px}.sign .em{font-size:1.7rem}}

  @media (prefers-reduced-motion:reduce){
    *{animation:none !important;transition:none !important}
    .fill{transition:width .01s !important}
  }

/* self-hosted fonts (see /fonts) */
@font-face{
  font-family:"Fredoka";
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url("/fonts/fredoka-v17-latin-regular.woff2") format("woff2");
}
@font-face{
  font-family:"Fredoka";
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url("/fonts/fredoka-v17-latin-500.woff2") format("woff2");
}
@font-face{
  font-family:"Fredoka";
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url("/fonts/fredoka-v17-latin-600.woff2") format("woff2");
}
@font-face{
  font-family:"Fredoka";
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url("/fonts/fredoka-v17-latin-700.woff2") format("woff2");
}
@font-face{
  font-family:"Nunito";
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url("/fonts/nunito-v32-latin-regular.woff2") format("woff2");
}
@font-face{
  font-family:"Nunito";
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url("/fonts/nunito-v32-latin-600.woff2") format("woff2");
}
@font-face{
  font-family:"Nunito";
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url("/fonts/nunito-v32-latin-700.woff2") format("woff2");
}
@font-face{
  font-family:"Nunito";
  font-style:normal;
  font-weight:800;
  font-display:swap;
  src:url("/fonts/nunito-v32-latin-800.woff2") format("woff2");
}
@font-face{
  font-family:"Nunito";
  font-style:normal;
  font-weight:900;
  font-display:swap;
  src:url("/fonts/nunito-v32-latin-900.woff2") format("woff2");
}