:root{
  --bg:#0f0f12; --panel:#17181d; --ink:#e8eaf0; --muted:#a7adba;
  --brand:#6ee7ff; --accent:#ffd166;
  --round:18px; --shadow:0 10px 30px rgba(0,0,0,.35);
  --navH:64px; --safe-bottom: env(safe-area-inset-bottom, 0px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;margin:0;background:var(--bg);color:var(--ink);
  font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial}
#app{height:100%;display:flex;flex-direction:column}
.muted{color:var(--muted)} .small{font-size:12px}

/* Header */
.topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 16px calc(14px + env(safe-area-inset-top,0px));
  background:linear-gradient(180deg,#1a1b21,#14151a);
  position:relative;z-index:3;box-shadow:var(--shadow)
}
.brand{display:flex;gap:10px;align-items:center;font-weight:800;letter-spacing:.3px}
.brand svg{width:24px;height:24px}
.balance{display:flex;align-items:center;gap:8px;font-weight:700}
.pill{background:#23242b;border:1px solid #2e2f39;color:var(--ink);
  padding:6px 10px;border-radius:999px;display:flex;align-items:center;gap:6px}

/* Pages */
.pages{flex:1;position:relative;overflow:hidden}
.page{position:absolute;inset:0;overflow:auto;padding:16px;
  padding-bottom:calc(var(--navH) + 24px + var(--safe-bottom))}
.page.hidden{display:none}

/* Clicker — монета = PNG */
.center{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px}
.coin-wrap{position:relative}
.coin{
  width:min(62vh,72vw);aspect-ratio:1/1;border-radius:50%;
  background: center/contain no-repeat url("coin.png");
  cursor:pointer;user-select:none;touch-action:manipulation;position:relative
}
.coin::after{content:none}
.click-splash{position:absolute;inset:0;pointer-events:none}
.dot{position:absolute;width:10px;height:10px;border-radius:50%;background:#fff;opacity:.9;transform:translate(-50%,-50%);animation:pop .6s ease-out forwards}
@keyframes pop{0%{transform:translate(-50%,-50%) scale(.4);opacity:1}100%{transform:translate(-50%,-120%) scale(1.6);opacity:0}}

.limit{width:min(560px,92vw)}
.limit-row{display:flex;justify-content:space-between;align-items:center;margin:2px 0 6px}
.bar{height:12px;background:#22242b;border:1px solid #2b2d36;border-radius:999px;overflow:hidden}
.bar>div{height:100%;width:0;background:linear-gradient(90deg,#6ee7ff,#a7ff6a);transition:width .25s}

/* Stats */
.stats{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.stat{background:#1c1d23;border:1px solid #2b2d36;padding:8px 10px;border-radius:10px;color:var(--muted);font-size:13px}
.stat b{color:var(--ink)}

/* Packs */
.packs{display:grid;grid-template-columns:1fr;gap:14px;max-width:760px;margin:0 auto}
.pack{
  background:linear-gradient(180deg,#1c1d24,#15161b);
  border:1px solid #2b2d36;border-radius:16px;padding:14px;display:flex;gap:14px;align-items:center;box-shadow:var(--shadow)
}
.seal{
  width:68px;height:68px;border-radius:12px;
  background:#0000 center/contain no-repeat;
  color:transparent;text-indent:-9999px;border:none;box-shadow:none;flex:0 0 auto
}
.seal.bronze   { background-image:url("poor.PNG"); }
.seal.silver   { background-image:url("normal.PNG"); }
.seal.gold     { background-image:url("cool.PNG"); }
.seal.legend   { background-image:url("legendary.PNG"); }
.pack h3{margin:0 0 4px;font-size:16px}
.pack p{margin:0;color:var(--muted);font-size:13px}
.grow{flex:1}
.actions{display:flex;flex-direction:column;align-items:flex-end;gap:8px;min-width:180px}
.coin-cost{justify-content:flex-end}
.buy{border:0;border-radius:12px;padding:10px 14px;font-weight:800;cursor:pointer}
.buy-coins{width:100%;text-align:center}
.buy-star{
  border-radius:12px;padding:9px 14px;font-weight:700;cursor:pointer;
  border:1px solid #2e3c52;background:#1f2733;color:#cde7ff;
  display:flex;gap:6px;align-items:center;justify-content:center;
  transition:background .2s,border-color .2s,transform .1s;
}
.buy-star:hover{background:#243041}
.buy-star:active{transform:scale(.97)}
.buy-star:disabled{opacity:.55;cursor:not-allowed}
.buy-star .star-price{font-weight:800}
.buy.bronze{background:#3a2a20;color:#ffce98}
.buy.silver{background:#2a3240;color:#dfe7ff}
.buy.gold{background:#3a2e06;color:#ffe07d}
.buy.legend{background:#3a1b00;color:#ffd8a8}
.cost{display:flex;align-items:center;gap:6px;font-weight:800}
.cost svg{width:18px;height:18px}

/* Boosts */
.boosts{max-width:760px;margin:0 auto;display:grid;gap:14px}
.boosts h3{margin:8px 0 2px}
.boost{
  display:flex;gap:14px;align-items:center;justify-content:space-between;
  background:#1b1c22;border:1px solid #2b2d36;border-radius:14px;padding:14px
}
.info .title{font-weight:800;margin-bottom:4px}
.info .desc{color:var(--muted);font-size:13px;margin-bottom:6px}
.info .level{font-size:13px}
.u-btn{border:0;border-radius:12px;padding:10px 14px;font-weight:800;cursor:pointer;background:#243041;color:#cde7ff;border:1px solid #2e3c52}
.u-btn:disabled{opacity:.5;cursor:not-allowed}

.promo{margin-top:20px;padding:16px;background:#1b1c22;border:1px solid #2b2d36;border-radius:14px;display:grid;gap:10px}
.promo-title{font-weight:800;font-size:14px;letter-spacing:.3px;color:#cdd3e1}
.promo-row{display:flex;gap:10px;align-items:center}
.promo-input{flex:1;border:1px solid #2b2d36;border-radius:12px;background:#15161b;color:#e6ebf5;padding:10px 12px;font-size:14px;outline:none}
.promo-input:focus{border-color:#3b82f6;box-shadow:0 0 0 1px rgba(59,130,246,.35)}
.promo-apply{border:0;border-radius:12px;padding:10px 16px;font-weight:700;cursor:pointer;background:#243041;color:#cde7ff;border:1px solid #2e3c52;transition:background .2s ease, transform .1s ease}
.promo-apply:disabled{opacity:.55;cursor:not-allowed}
.promo-apply:active{transform:translateY(1px)}
.promo-note{font-size:12px;color:#8f96a8;min-height:16px}
.promo-note.success{color:#8ce6a0}
.promo-note.error{color:#ff9b9b}

/* ---------- Album (каталог + viewer) ---------- */
.album-wrap{max-width:980px;margin:0 auto}
.album{display:grid;gap:14px}
.section{background:#1b1c22;border:1px solid #2b2d36;border-radius:14px;padding:12px}
.section-title{margin:0 0 10px;font-size:14px;color:#cdd3e1}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.card-tile{position:relative;border-radius:10px;overflow:hidden;background:#111}
.card-tile img{width:100%;height:auto;display:block;transition:filter .2s, opacity .2s}
.card-tile.locked img{filter:grayscale(1) brightness(.6);opacity:.85}
.card-tile .badge{position:absolute;bottom:6px;right:6px;background:rgba(0,0,0,.55);color:#fff;font-size:11px;padding:2px 6px;border-radius:999px;border:1px solid rgba(255,255,255,.35)}

/* Viewer */
.viewer{position:fixed;left:0;right:0;bottom:0;top:0;background:rgba(0,0,0,.35);display:flex;align-items:flex-end;z-index:50}
.viewer.hidden{display:none}
.viewer-content{background:#13141a;border-top-left-radius:16px;border-top-right-radius:16px;width:100%;max-width:980px;margin:0 auto;padding:10px 14px 16px;box-shadow:0 -10px 30px rgba(0,0,0,.5)}
.viewer-bar{display:flex;align-items:center;justify-content:center;position:relative;margin-bottom:8px}
.viewer-drag{width:48px;height:4px;background:#2a2b31;border-radius:999px}
.viewer-close{position:absolute;right:0;top:-6px;background:#22242b;border:1px solid #2b2d36;color:#cbd5e1;border-radius:10px;padding:6px 10px}
.viewer-img-wrap{position:relative;display:grid;place-items:center;margin:6px 0}
.viewer-img-wrap img{width:min(520px,90vw);height:auto;border-radius:12px;display:block;transition:transform .25s ease, opacity .25s ease;}
.viewer.viewer-locked .viewer-img-wrap img{width:min(340px,70vw);transform:scale(.95);opacity:.85}
.lock-overlay{position:absolute;inset:auto;bottom:12px;left:12px;background:rgba(0,0,0,.6);padding:6px 10px;border-radius:8px;border:1px solid rgba(255,255,255,.35);font-size:12px;display:none}
.viewer-locked .lock-overlay{display:block}
.viewer-info{margin-top:8px}
.viewer-title{font-weight:800;margin-bottom:6px}
.viewer-packs{color:#cbd5e1}
.viewer-packs .tag{display:inline-block;background:#20222a;border:1px solid #2b2d36;padding:4px 8px;border-radius:999px;margin:2px 6px 2px 0;font-size:12px}
.viewer-back{margin-top:12px;padding:10px 16px;border-radius:12px;border:1px solid #2b2d36;background:#1f2129;color:#cbd5e1;font-weight:700;cursor:pointer;transition:background .2s ease, transform .1s ease;}
.viewer-back:hover{background:#252831}
.viewer-back:active{transform:translateY(1px)}

/* Empty state */
.empty{color:var(--muted);text-align:center;margin:14px 0}

/* Nav */
.nav{
  height:calc(var(--navH) + var(--safe-bottom));
  padding-bottom:var(--safe-bottom);
  background:#14151a;border-top:1px solid #24262f;
  display:grid;grid-template-columns:repeat(4,1fr);align-items:center;
  position:sticky;bottom:0;z-index:5
}
.nav button{appearance:none;background:none;border:0;color:var(--muted);font-weight:800;display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 0;cursor:pointer}
.nav button.active{color:var(--ink)}
.nav svg{width:22px;height:22px}

/* Toast */
.toast{
  position:fixed;left:50%;bottom:calc(var(--navH) + var(--safe-bottom) + 12px);
  transform:translateX(-50%);background:#1f2129;color:var(--ink);
  border:1px solid #2b2d36;border-radius:999px;padding:8px 12px;box-shadow:var(--shadow);
  opacity:0;pointer-events:none;transition:opacity .2s, transform .2s
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(-6px)}

/* ---------- Pack opening overlay ---------- */
.open-overlay{
  position:fixed;inset:0;background:rgba(6,7,10,.92);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:24px;z-index:200;transition:opacity .3s;opacity:0;pointer-events:none;
  --glow-primary: rgba(255, 230, 161, 0.6);
  --glow-secondary: rgba(255, 210, 92, 0.28);
  --glow-shadow: rgba(255, 190, 90, 0.45);
  --flash-color: rgba(255, 224, 138, 0.85);
}
.open-overlay.show{opacity:1;pointer-events:auto;animation:fadeIn .3s forwards;}
.open-overlay.hidden{display:none}
.open-overlay[data-rarity="r1"]{--glow-primary:rgba(92,200,255,.55);--glow-secondary:rgba(92,200,255,.22);--glow-shadow:rgba(40,140,220,.45);--flash-color:rgba(120,205,255,.9);}
.open-overlay[data-rarity="r2"]{--glow-primary:rgba(155,110,255,.6);--glow-secondary:rgba(155,110,255,.25);--glow-shadow:rgba(120,70,230,.5);--flash-color:rgba(185,140,255,.9);}
.open-overlay[data-rarity="r3"]{--glow-primary:rgba(255,134,213,.6);--glow-secondary:rgba(255,134,213,.24);--glow-shadow:rgba(240,90,190,.5);--flash-color:rgba(255,168,222,.9);}
.open-overlay[data-rarity="r4"]{--glow-primary:rgba(255,94,129,.62);--glow-secondary:rgba(255,94,129,.25);--glow-shadow:rgba(225,50,90,.55);--flash-color:rgba(255,130,150,.92);}
.open-overlay[data-rarity="r5"]{--glow-primary:rgba(255,214,102,.7);--glow-secondary:rgba(255,214,102,.3);--glow-shadow:rgba(235,170,60,.55);--flash-color:rgba(255,229,143,.95);}
.open-overlay[data-rarity="legend"]{--glow-primary:rgba(250,250,255,.8);--glow-secondary:rgba(250,250,255,.32);--glow-shadow:rgba(220,220,255,.55);--flash-color:rgba(255,255,255,.95);}
.open-pack{position:relative;width:min(300px,70vw);aspect-ratio:2/3;
  display:grid;place-items:center;cursor:pointer;animation:float 3s ease-in-out infinite;
}
.open-pack::before{
  content:"";position:absolute;inset:-18%;border-radius:50%;
  background:radial-gradient(circle,var(--glow-primary) 0%,rgba(0,0,0,0) 75%);
  filter:blur(24px);opacity:.25;transition:opacity .3s ease;
  pointer-events:none;z-index:0;
}
.open-pack::after{
  content:"";position:absolute;inset:-6%;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.15) 0%,rgba(255,255,255,0) 70%);
  opacity:.18;pointer-events:none;mix-blend-mode:screen;z-index:0;transition:opacity .3s ease;
}
.open-pack.fade-out{animation:packHide .32s forwards;}
.open-pack.hidden{display:none;}
.open-pack:active{transform:scale(.97);}
.open-pack.shake{animation:shake .45s ease-in-out 2;}
.pack-front{width:78%;aspect-ratio:2/3;border-radius:16px;box-shadow:0 20px 45px rgba(0,0,0,.55);
  background:center/cover no-repeat url("poor.PNG");transition:transform .35s ease, filter .3s ease;
}
.open-pack.revealing .pack-front{transform:translateY(18px) rotateX(22deg);filter:brightness(1.1)}
.open-pack .pack-front{position:relative;z-index:1;}
.pack-tap-hint{position:absolute;bottom:-46px;font-size:16px;color:#fbedc3;letter-spacing:.4px;
  animation:pulse 1.5s ease-in-out infinite;text-shadow:0 0 12px rgba(255,225,120,.9)}

.open-card{position:relative;display:flex;flex-direction:column;align-items:center;gap:16px;opacity:0;transform:translateY(40px);transition:opacity .3s ease, transform .3s ease;}
.open-card.show{opacity:1;transform:translateY(0);}
.open-card-glow{position:absolute;inset:-32%;background:radial-gradient(circle,var(--glow-primary),var(--glow-secondary) 60%,transparent 78%);filter:blur(14px);z-index:-1;opacity:.85;animation:glowPulse 2.2s ease-in-out infinite;}
.open-card img{width:min(320px,80vw);border-radius:18px;box-shadow:0 30px 55px rgba(0,0,0,.5),0 0 24px var(--glow-shadow);}
.open-card-info{text-align:center;color:#fbedc3;display:flex;flex-direction:column;gap:14px}
.open-card-title{font-size:18px;font-weight:700;letter-spacing:.5px;text-shadow:0 0 10px rgba(255,255,255,.55)}
.open-claim{border:0;border-radius:14px;padding:12px 28px;font-weight:800;cursor:pointer;font-size:16px;
  background:linear-gradient(135deg,#ffe08a,#ffb347);color:#3a1b00;box-shadow:0 12px 30px rgba(255,180,80,.45);
  transition:transform .15s ease;
}
.open-claim:active{transform:translateY(2px);}

.open-overlay.card-stage .open-card{margin-top:0;}

.open-flash{position:absolute;inset:0;background:radial-gradient(circle,var(--flash-color) 0%,rgba(255,255,255,.45) 35%,transparent 65%);opacity:0;pointer-events:none;mix-blend-mode:screen;}
.open-flash.hidden{display:none;}
.open-flash.flash{animation:flashBurst .45s ease-out forwards;}

@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes float{0%,100%{transform:translateY(-6px)}50%{transform:translateY(6px)}}
@keyframes pulse{0%,100%{opacity:.6}50%{opacity:1}}
@keyframes glowPulse{0%,100%{opacity:.7}50%{opacity:1}}
@keyframes shake{
  0%{transform:translate(0,0) rotate(0deg)}
  20%{transform:translate(-6px,2px) rotate(-2deg)}
  40%{transform:translate(6px,-2px) rotate(2deg)}
  60%{transform:translate(-4px,3px) rotate(-2deg)}
  80%{transform:translate(4px,-3px) rotate(1deg)}
  100%{transform:translate(0,0) rotate(0deg)}
}
@keyframes packHide{
  to{opacity:0;transform:scale(.85);}
}
@keyframes flashBurst{
  0%{opacity:0}
  10%{opacity:0.95}
  35%{opacity:0.45}
  60%{opacity:0.2}
  100%{opacity:0}
}