:root{
    --neon:#4dff95; --neon-soft:#86ffbe; --gold:#ffcc3e;
    --txt:#eafff2; --muted:#90a39a; --muted2:#6f8279;
    --glass:rgba(14,26,21,.62); --glass-2:rgba(18,30,25,.55); --line:rgba(150,255,200,.15);
    --stage-w:804; --stage-h:1704;
    --num:'JetBrains Mono', ui-monospace, monospace;
    --ui:'Sora', ui-sans-serif, system-ui, sans-serif;
    /* rarity — muted, not neon */
    --r-common:#9aa7b2; --r-rare:#5fa3e6; --r-epic:#b083ec; --r-legend:#e6b653; --r-mythic:#3fd9a6;
    --aura:77,255,149;   /* equipped cosmetic aura color (RGB), drives all capsule glow */
  }
  *{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
  html,body{height:100%;overflow:hidden;font-family:var(--ui);color:var(--txt);
    user-select:none;-webkit-user-select:none;background:#030806;}
  body{background:radial-gradient(120% 90% at 50% 28%, #0a1a13, #050d09 55%, #03070500), #04100b;
    display:flex;align-items:center;justify-content:center;}
  #stage{position:relative;overflow:hidden;
    width:min(100vw, calc(100dvh * var(--stage-w)/var(--stage-h)));
    height:min(100dvh, calc(100vw * var(--stage-h)/var(--stage-w)));
    box-shadow:0 0 80px rgba(0,0,0,.85);}
  .screen{position:absolute;inset:0;}
  .screen.hidden{display:none!important;}

  /* ============ TAPPER SCREEN ============ */
  #bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;}
  .beam{position:absolute;left:50%;top:0;width:42%;height:62%;transform:translateX(-50%);
    background:radial-gradient(60% 80% at 50% 0%, rgba(var(--aura),.16), transparent 70%);
    filter:blur(6px);mix-blend-mode:screen;pointer-events:none;animation:beam 6.5s ease-in-out infinite;}
  @keyframes beam{0%,100%{opacity:.5}50%{opacity:.92}}
  .floor{position:absolute;left:50%;bottom:26.5%;width:62%;height:9%;transform:translateX(-50%);
    background:radial-gradient(50% 100% at 50% 50%, rgba(var(--aura),.5), transparent 72%);
    filter:blur(9px);mix-blend-mode:screen;pointer-events:none;animation:floor 3.6s ease-in-out infinite;}
  @keyframes floor{0%,100%{opacity:.45;transform:translateX(-50%) scaleX(1)}50%{opacity:.8;transform:translateX(-50%) scaleX(1.07)}}

  #top{position:absolute;left:0;right:0;top:0;z-index:6;padding:max(2.4%, env(safe-area-inset-top)) 4% 0;}
  .stats{display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center;
    background:var(--glass);border:1px solid var(--line);border-radius:4vmin;
    backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 6px 22px rgba(0,0,0,.45);padding:1.5vmin 1vmin;}
  .stat{display:flex;align-items:center;justify-content:center;gap:1.3vmin;position:relative;}
  .stat + .stat::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);height:48%;width:1px;background:rgba(150,255,200,.12);}
  .stat svg{width:3.1vmin;height:3.1vmin;flex:none;color:#cfe6da;}
  .stat .v{font-family:var(--num);font-weight:700;font-size:2.3vmin;letter-spacing:.2px;color:#f3fff8;}
  .stat.en .v.low{color:var(--gold)}
  .stat .mx{font-size:1.6vmin;color:var(--muted);font-weight:600;margin-left:-.5vmin;align-self:flex-end;margin-bottom:.3vmin}
  .en-line{grid-column:3;height:.6vmin;margin:1.3vmin 14% 0;border-radius:99px;background:rgba(4,18,12,.7);overflow:hidden;}
  .en-fill{height:100%;width:100%;border-radius:99px;background:linear-gradient(90deg,#1f8a52,#4dff95);box-shadow:0 0 8px rgba(77,255,149,.6);transition:width .25s linear;}
  .farm-pill{margin:1.5vmin auto 0;width:max-content;max-width:92%;display:flex;align-items:center;gap:1.2vmin;
    background:var(--glass);border:1px solid var(--line);border-radius:99px;padding:.8vmin 2.2vmin;
    backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);font-size:1.75vmin;font-weight:600;color:#cfe6da;}
  .farm-pill .rate{font-family:var(--num);font-weight:700;color:var(--neon);}
  .farm-pill .boost{font-family:var(--num);font-weight:700;color:var(--gold);}
  .farm-pill .dot{width:.7vmin;height:.7vmin;border-radius:50%;background:rgba(var(--aura),.9);box-shadow:0 0 6px rgba(var(--aura),.8);}

  .side{position:absolute;z-index:6;width:11vmin;height:11vmin;border-radius:50%;display:grid;place-items:center;cursor:pointer;
    background:radial-gradient(120% 120% at 35% 25%, rgba(40,70,58,.5), rgba(10,22,18,.45));
    border:1px solid rgba(160,255,205,.16);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.07), 0 5px 16px rgba(0,0,0,.38);transition:transform .12s ease;}
  .side:active{transform:scale(.92)}
  .side svg{width:4.8vmin;height:4.8vmin;color:#e6f7ee;}
  .side.left{left:5.5%;top:20.5%} .side.right{right:5.5%;top:20.5%}
  .side .lbl{position:absolute;bottom:-2.9vmin;left:50%;transform:translateX(-50%);font-size:1.5vmin;font-weight:600;color:var(--muted);white-space:nowrap;letter-spacing:.02em;}
  .side .tag{position:absolute;top:-.8vmin;right:-.8vmin;background:#0c1611;border:1px solid var(--line);border-radius:99px;font-family:var(--num);font-weight:700;font-size:1.5vmin;padding:.3vmin 1.2vmin;color:var(--gold);}

  #cap-zone{position:absolute;left:50%;bottom:33.5%;transform:translateX(-50%);width:54%;z-index:4;cursor:pointer;touch-action:manipulation;}
  .cap-shadow{position:absolute;left:50%;bottom:-7%;width:46%;height:6%;transform:translateX(-50%);border-radius:50%;pointer-events:none;will-change:opacity,transform;
    background:radial-gradient(50% 60% at 50% 50%, rgba(0,0,0,.55), rgba(0,0,0,.25) 55%, transparent 75%);filter:blur(3px);opacity:.35;}
  .halo{position:absolute;left:50%;top:46%;width:148%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;opacity:0;will-change:opacity,transform;mix-blend-mode:screen;
    background:radial-gradient(circle at 50% 50%, rgba(235,255,245,.6) 0%, rgba(var(--aura),.46) 32%, rgba(var(--aura),.16) 58%, transparent 74%);}
  .flare{position:absolute;left:50%;top:30%;width:62%;height:46%;transform:translate(-50%,-50%);border-radius:46% 46% 40% 40%;pointer-events:none;opacity:.4;will-change:opacity;mix-blend-mode:screen;
    background:radial-gradient(60% 70% at 50% 35%, rgba(235,255,245,.9), rgba(var(--aura),.5) 45%, transparent 75%);}
  .bubble{position:absolute;border-radius:50%;pointer-events:none;mix-blend-mode:screen;background:rgba(var(--aura),.7);will-change:transform,opacity;}
  .aura-glow{position:absolute;left:50%;top:41%;width:118%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;
    pointer-events:none;mix-blend-mode:screen;
    background:radial-gradient(circle at 50% 50%, rgba(var(--aura),.32) 0%, rgba(var(--aura),.12) 42%, transparent 64%);
    animation:aglow 4.2s ease-in-out infinite;}
  @keyframes aglow{0%,100%{opacity:.45}50%{opacity:.72}}
  #cap{width:100%;display:block;will-change:transform,filter;transform-origin:50% 100%;filter:drop-shadow(0 20px 26px rgba(0,0,0,.5));}
  .ring{position:absolute;left:50%;top:46%;width:80%;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%) scale(.6);border:2px solid rgba(120,255,180,.65);opacity:0;pointer-events:none;}
  .hint{position:absolute;left:50%;bottom:-5.5%;transform:translateX(-50%);white-space:nowrap;font-family:var(--ui);font-size:1.8vmin;letter-spacing:.26em;text-transform:uppercase;color:#bff7d6;animation:hint 2.8s ease-in-out infinite;}
  @keyframes hint{0%,100%{opacity:.2}50%{opacity:.6}}
  #combo{position:absolute;left:50%;top:24%;transform:translate(-50%,0) scale(.6);z-index:8;font-family:var(--num);font-weight:800;font-size:4vmin;color:#bdf6d4;opacity:0;pointer-events:none;text-shadow:0 0 14px rgba(77,255,149,.6);transition:opacity .2s;}

  .float{position:absolute;z-index:9;display:flex;align-items:center;gap:.6vmin;font-family:var(--num);font-weight:800;font-size:4.6vmin;pointer-events:none;color:#eafff2;text-shadow:0 0 14px rgba(77,255,149,.9);will-change:transform,opacity;}
  .float svg{width:4vmin;height:4vmin;}
  .float.crit{font-size:6vmin;color:#ffe08a;text-shadow:0 0 18px rgba(255,204,62,.9);}
  .spark{position:absolute;width:.7vmin;height:.7vmin;border-radius:50%;pointer-events:none;background:rgba(170,255,205,.95);box-shadow:0 0 6px rgba(77,255,149,.9);}

  /* ----- compact floating dock (macOS-dock inspired) ----- */
  #tabs{position:absolute;left:0;right:0;bottom:0;z-index:7;padding:0 5% calc(1.6vmin + env(safe-area-inset-bottom));
    display:flex;justify-content:center;pointer-events:none;
    background:linear-gradient(180deg, rgba(8,16,13,0), rgba(6,13,10,.75) 55%);}
  .tabbar{pointer-events:auto;display:flex;align-items:flex-end;justify-content:space-between;gap:1vmin;width:100%;max-width:520px;
    background:var(--glass-2);border:1px solid var(--line);border-radius:7vmin;padding:1vmin 2vmin .9vmin;
    backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 8px 28px rgba(0,0,0,.45);
    animation:dockfloat 7s ease-in-out infinite;}
  @keyframes dockfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.4%)}}
  .tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:.4vmin;cursor:pointer;color:#83978d;
    transition:color .2s ease;}
  .tico{position:relative;display:grid;place-items:center;width:7.4vmin;height:7.4vmin;border-radius:2.4vmin;
    transition:transform .22s cubic-bezier(.2,.8,.3,1.2), background .2s, box-shadow .2s;}
  .tico svg{width:4.3vmin;height:4.3vmin;transition:filter .2s;}
  .tab span{font-size:1.45vmin;font-weight:600;letter-spacing:.005em;line-height:1;}
  .tab .dot{width:.95vmin;height:.95vmin;border-radius:50%;background:var(--neon);margin-top:.2vmin;
    opacity:0;transform:scale(.3);transition:.22s;box-shadow:0 0 7px rgba(77,255,149,.8);}
  .tab:active .tico{transform:scale(.88);}
  .tab.active{color:var(--neon);}
  .tab.active .tico{transform:translateY(-1.5vmin) scale(1.14);background:rgba(77,255,149,.12);
    box-shadow:inset 0 0 0 1px rgba(77,255,149,.45), 0 0 18px rgba(77,255,149,.28);}
  .tab.active .tico svg{filter:drop-shadow(0 0 6px rgba(77,255,149,.6));}
  .tab.active .dot{opacity:1;transform:scale(1);}

  /* ============ CARDS SHOP (minimalist) ============ */
  #screen-cards{background:
    radial-gradient(120% 60% at 50% 0%, #0e1714, #080d0b 60%), #070b09;
    display:flex;flex-direction:column;}
  .sh-head{flex:none;padding:max(2.6%, env(safe-area-inset-top)) 4.5% 2.2vmin;
    display:flex;align-items:center;gap:2.4vmin;}
  .sh-back{width:9vmin;height:9vmin;border-radius:2.6vmin;flex:none;display:grid;place-items:center;cursor:pointer;
    background:#101714;border:1px solid var(--line);color:#cfe6da;transition:transform .12s;}
  .sh-back:active{transform:scale(.92)} .sh-back svg{width:4.4vmin;height:4.4vmin;}
  .sh-titles{flex:1;min-width:0;}
  .sh-titles h1{font-size:3.4vmin;font-weight:800;letter-spacing:.01em;line-height:1.1;}
  .sh-titles p{font-size:1.9vmin;color:var(--muted);font-weight:600;margin-top:.3vmin;}
  .sh-bal{display:flex;align-items:center;gap:1.3vmin;background:#101714;border:1px solid var(--line);border-radius:99px;padding:1.2vmin 2.4vmin;}
  .sh-bal svg{width:3.4vmin;height:3.4vmin;color:var(--neon);}
  .sh-bal b{font-family:var(--num);font-weight:700;font-size:2.6vmin;}

  .sh-seg{flex:none;display:flex;gap:1.4vmin;padding:0 4.5% 2.4vmin;}
  .seg-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:1.2vmin;cursor:pointer;
    padding:1.6vmin;border-radius:2.6vmin;background:#0e1512;border:1px solid rgba(150,255,200,.10);
    color:var(--muted);font-weight:700;font-size:2.1vmin;transition:.16s;}
  .seg-btn svg{width:3.4vmin;height:3.4vmin;}
  .seg-btn.on{background:#16241d;color:var(--neon);border-color:color-mix(in srgb,var(--neon) 40%,transparent);}
  .sh-filters{flex:none;display:flex;gap:1.6vmin;padding:0 4.5% 2.4vmin;overflow-x:auto;scrollbar-width:none;}
  .sh-filters::-webkit-scrollbar{display:none;}
  .chip{flex:none;font-size:2vmin;font-weight:700;color:var(--muted);padding:1.1vmin 2.8vmin;border-radius:99px;
    background:#0e1512;border:1px solid rgba(150,255,200,.10);cursor:pointer;transition:.16s;white-space:nowrap;}
  .chip[data-r="common"].on{color:#0a120e;background:var(--r-common);border-color:transparent}
  .chip[data-r="rare"].on{color:#0a120e;background:var(--r-rare);border-color:transparent}
  .chip[data-r="epic"].on{color:#0a120e;background:var(--r-epic);border-color:transparent}
  .chip[data-r="legendary"].on{color:#0a120e;background:var(--r-legend);border-color:transparent}
  .chip[data-r="mythic"].on{color:#0a120e;background:var(--r-mythic);border-color:transparent}
  .chip[data-r="all"].on{color:#06140d;background:var(--neon);border-color:transparent}

  .sh-list{flex:1;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
    padding:0 4.5% calc(3vmin + env(safe-area-inset-bottom));
    display:grid;grid-template-columns:1fr 1fr;gap:2.4vmin;align-content:start;}
  .sh-list::-webkit-scrollbar{width:0}

  .card{position:relative;background:#10100f00;border-radius:3.4vmin;padding:2.4vmin;cursor:default;
    background:linear-gradient(180deg, rgba(22,30,26,.9), rgba(13,19,16,.92));
    border:1px solid rgba(150,255,200,.08);box-shadow:0 4px 16px rgba(0,0,0,.35);
    display:flex;flex-direction:column;gap:1.6vmin;}
  .card::before{content:"";position:absolute;left:0;top:14%;width:.7vmin;height:30%;border-radius:0 99px 99px 0;background:var(--rc);} /* rarity accent bar */
  .card .ic-row{display:flex;align-items:flex-start;justify-content:space-between;}
  .card .ic{width:11vmin;height:11vmin;border-radius:2.8vmin;display:grid;place-items:center;
    background:radial-gradient(120% 120% at 30% 20%, color-mix(in srgb, var(--rc) 24%, #0e1512), #0c1210);
    border:1px solid color-mix(in srgb, var(--rc) 35%, transparent);color:#eef7f1;}
  .card .ic svg{width:6vmin;height:6vmin;}
  .card .rar{font-size:1.55vmin;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--rc);}
  .card .nm{font-size:2.45vmin;font-weight:700;line-height:1.15;}
  .card .inc{display:flex;align-items:center;gap:.8vmin;font-family:var(--num);font-weight:700;font-size:2.3vmin;color:var(--neon);}
  .card .inc svg{width:2.6vmin;height:2.6vmin;}
  .card .inc small{color:var(--muted);font-weight:600;font-size:1.7vmin;font-family:var(--ui);}
  .card .lvl{display:flex;align-items:center;gap:1.4vmin;}
  .card .segs{display:flex;gap:.7vmin;flex:1;}
  .card .seg{flex:1;height:.9vmin;border-radius:99px;background:rgba(255,255,255,.10);}
  .card .seg.on{background:var(--rc);}
  .card .lvtxt{font-family:var(--num);font-size:1.8vmin;color:var(--muted);font-weight:700;}
  .btn{margin-top:.3vmin;width:100%;border:none;border-radius:2.4vmin;padding:1.7vmin;cursor:pointer;
    font-family:var(--ui);font-weight:700;font-size:2.1vmin;display:flex;align-items:center;justify-content:center;gap:1vmin;transition:transform .1s,filter .15s;}
  .btn:active{transform:scale(.97)}
  .btn svg{width:2.5vmin;height:2.5vmin;}
  .btn .p{font-family:var(--num);font-weight:800;}
  .btn.buy{background:var(--neon);color:#06140d;}
  .btn.up{background:#16241d;color:var(--neon);border:1px solid color-mix(in srgb,var(--neon) 40%,transparent);}
  .btn.max{background:#141a17;color:var(--muted);}
  .btn.locked{background:#141a17;color:var(--muted2);}
  .btn[disabled]{opacity:.45;filter:grayscale(.3);cursor:not-allowed;}
  .card.owned{border-color:color-mix(in srgb,var(--rc) 26%,transparent);}
  .card.equipped{border-color:color-mix(in srgb,var(--rc) 55%,transparent);box-shadow:0 0 0 1px color-mix(in srgb,var(--rc) 30%,transparent), 0 4px 18px rgba(0,0,0,.4);}
  .card .ic.aura-sw{background:radial-gradient(circle at 38% 32%, rgba(var(--aurac),.95), rgba(var(--aurac),.25) 60%, #0c1210 100%);border-color:rgba(var(--aurac),.5);}
  .card .bonus{display:flex;flex-direction:column;gap:.5vmin;}
  .card .brow{display:flex;align-items:center;gap:.9vmin;font-family:var(--num);font-weight:700;font-size:2vmin;color:var(--neon);}
  .card .brow.gold{color:var(--gold);} .card .brow svg{width:2.3vmin;height:2.3vmin;}
  .card .bonus small{color:var(--muted);font-weight:600;font-size:1.6vmin;font-family:var(--ui);}
  .btn.equip{background:#16241d;color:var(--neon);border:1px solid color-mix(in srgb,var(--neon) 40%,transparent);}
  .btn.equipped{background:transparent;color:var(--muted);border:1px solid rgba(150,255,200,.12);}
  .toast{position:absolute;left:50%;bottom:11%;transform:translate(-50%,20px);z-index:20;
    background:#0c1611;border:1px solid var(--line);border-radius:2.4vmin;padding:1.6vmin 3vmin;
    font-size:2vmin;font-weight:600;color:#eafff2;opacity:0;transition:.25s;pointer-events:none;box-shadow:0 8px 28px rgba(0,0,0,.5);}
  .toast.show{opacity:1;transform:translate(-50%,0);}