/* mylar — стиль BlockRips: небесно-голубой фон с лучами и точками, розовые кнопки с белой обводкой, Titan One + Barlow Semi Condensed */
:root{--sky:#5CC9F0;--sky2:#A6E7FB;--pink:#FF2E87;--pink2:#D40E64;--ink:#14161C;--yellow:#FFD23F;--white:#fff;--muted:#5B6472;
  --d:'Titan One',system-ui,sans-serif;--b:'Barlow Semi Condensed',system-ui,sans-serif}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}html{overflow-x:clip}
body{font:600 16px/1.4 var(--b);color:var(--ink);overflow-x:hidden;
  background:radial-gradient(circle,rgba(255,255,255,.35) 2px,transparent 2.5px) 0 0/26px 26px,repeating-conic-gradient(from 0deg at 50% 46%,rgba(255,255,255,.16) 0 9deg,transparent 9deg 18deg),radial-gradient(circle at 50% 46%,var(--sky2),var(--sky) 60%);background-attachment:fixed}
a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer;color:inherit}[hidden]{display:none!important}

.ribbon{background:var(--ink);color:#fff;font:600 13px var(--b);text-align:center;padding:8px 16px}.ribbon b{color:var(--yellow);margin-right:6px}

.top{display:flex;align-items:center;gap:14px;padding:14px 22px;position:relative;z-index:3;max-width:100vw}
.brand{flex:none;display:block;width:150px}
.live{flex:none;display:inline-flex;align-items:center;gap:6px;background:var(--pink);color:#fff;font:15px var(--d);padding:5px 14px;border-radius:99px;border:3px solid #fff;box-shadow:0 0 0 2px var(--ink)}
.live i{width:9px;height:9px;border-radius:50%;background:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.4);animation:pulse 1.4s infinite}
@keyframes pulse{50%{opacity:.35}}
.feed{flex:1;min-width:0;display:flex;gap:10px;overflow:hidden;mask-image:linear-gradient(90deg,#000 92%,transparent)}
.fi{flex:none;display:flex;align-items:center;gap:8px;background:#fff;border:3px solid var(--ink);border-radius:12px;padding:4px 12px 4px 4px;font:700 13px var(--b);white-space:nowrap}
.fi b{font:17px var(--d);color:var(--pink)}.fi .g{font:700 10px var(--b);border:2px solid var(--ink);border-radius:99px;padding:0 6px}.fi small{color:var(--muted);font-weight:600}
.fi.r-holo,.fi.r-grail{border-color:var(--pink);box-shadow:0 0 0 2px var(--yellow)}
.mini{display:grid;place-items:center;width:30px;height:40px;border-radius:5px;border:2px solid var(--ink);font:9px var(--d);color:#fff;-webkit-text-stroke:.5px var(--ink);background:#D8DCE2}
.mini.r-uncommon{background:#7FD996}.mini.r-rare{background:#58A8F5}.mini.r-holo{background:linear-gradient(135deg,#FF9AD5,#FFE48A,#9BF3D0,#8FC8FF)}.mini.r-grail{background:#1A1A1F;color:#E9C062}
.icon-btn{flex:none;display:grid;place-items:center;width:44px;height:44px;background:#fff;border:3px solid var(--ink);border-radius:12px}
.pink{background:linear-gradient(180deg,#FF5FA6,var(--pink) 55%,var(--pink2));color:#fff;border:4px solid #fff;box-shadow:0 0 0 3px var(--ink),0 5px 0 3px var(--ink);border-radius:99px;font:20px var(--d);padding:12px 28px;letter-spacing:.02em;text-shadow:0 2px 0 rgba(0,0,0,.18);transition:transform .08s}
.pink:active{transform:translateY(3px);box-shadow:0 0 0 3px var(--ink),0 2px 0 3px var(--ink)}.pink:disabled{filter:grayscale(.6);opacity:.7;cursor:default}
.pink.sm{font-size:16px;padding:8px 20px;flex:none}

.side{position:fixed;left:16px;top:120px;display:flex;flex-direction:column;gap:12px;z-index:2}
.side a{display:flex;align-items:center;gap:10px;font:19px var(--d);color:#fff;-webkit-text-stroke:1.2px var(--ink);paint-order:stroke;padding:10px 18px;border-radius:14px;min-width:150px}
.side a svg{width:20px;height:20px;fill:none;stroke:#fff;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 1px var(--ink)) drop-shadow(0 0 1px var(--ink))}
.side a[data-v=rip] svg{fill:#fff}
.side a.on{background:linear-gradient(180deg,#FF6FAF,var(--pink2));border:3px solid #fff;box-shadow:0 0 0 2px var(--ink)}

main{padding:0 22px 140px;max-width:1200px;margin:0 auto}
.view{position:relative}
#v-rip{display:flex;flex-direction:column;align-items:center;padding-top:8px}
.stage{position:relative;width:100%;max-width:820px;overflow-x:clip;height:440px;display:flex;align-items:center;justify-content:center}
.packs{position:relative;width:100%;height:100%}
.pk{position:absolute;left:50%;top:50%;width:230px;height:390px;transition:transform .45s cubic-bezier(.2,.8,.2,1.2),opacity .3s,filter .3s;cursor:pointer;filter:drop-shadow(0 18px 18px rgba(0,40,80,.28))}
.pk.c{animation:bob 3.2s ease-in-out infinite}
@keyframes bob{50%{translate:0 -8px}}
.arrow{position:absolute;top:50%;translate:0 -50%;z-index:2;width:48px;height:48px;border-radius:50%;background:#fff;border:3px solid var(--ink);font:30px/1 var(--d);display:grid;place-items:center;padding:0 0 4px}
.arrow.l{left:0}.arrow.r{right:0}
.pname{font:52px/1 var(--d);margin:6px 0 8px;color:var(--ink);-webkit-text-stroke:0;text-shadow:0 3px 0 #fff}
.dots{display:flex;gap:7px;margin-bottom:22px}.dots i{width:9px;height:9px;border-radius:99px;background:rgba(20,22,28,.25)}.dots i.on{width:26px;background:var(--pink)}
.pink.big{font-size:36px;padding:14px 56px;min-width:min(420px,90vw)}
.pills{display:flex;gap:12px;margin-top:22px;flex-wrap:wrap;justify-content:center}
.pill{border:3px solid var(--ink);border-radius:99px;padding:7px 18px;font:15px var(--d);display:inline-flex;align-items:center;gap:8px;background:#fff}
.pill.yellow{background:var(--yellow)}.pill.yellow b{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--ink);color:var(--yellow);font-size:13px}
.pill.dark{background:var(--ink);color:#fff}
.crate{position:fixed;right:22px;bottom:22px;display:flex;align-items:center;gap:10px;z-index:2}
.cart{width:150px;height:130px;filter:drop-shadow(0 10px 10px rgba(0,40,80,.3))}
.ctext{display:flex;flex-direction:column;align-items:flex-start}.ctext small{font:14px var(--d);color:#fff;-webkit-text-stroke:1px var(--ink);paint-order:stroke}
.ctext b{font:28px/1 var(--d);color:#fff;-webkit-text-stroke:2px var(--ink);paint-order:stroke}
.pips{display:flex;gap:4px;margin-top:6px}.pips i{width:16px;height:16px;border-radius:4px;border:2px solid var(--ink);background:#fff}.pips i.on{background:var(--yellow)}

.panel{background:#fff;border:4px solid var(--ink);border-radius:24px;padding:26px 28px;box-shadow:0 8px 0 var(--ink);margin:14px 0 0 160px}
.phead{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:18px}.phead h2{font:38px/1 var(--d);margin:0}
.tag{border:3px solid var(--ink);border-radius:99px;padding:3px 12px;font:14px var(--d);background:var(--yellow)}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:22px}
.stat{border:3px solid var(--ink);border-radius:14px;padding:10px 14px;background:#EEF7FC}.stat small{display:block;font:700 12px var(--b);color:var(--muted);letter-spacing:.05em}.stat b{font:26px var(--d)}
.slabs{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:18px}
.slabs.small{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}
.sl{display:flex;flex-direction:column;gap:6px}.sl .art{aspect-ratio:220/330}
.sl .meta{font:700 13px var(--b);color:var(--muted);display:flex;justify-content:space-between;gap:6px}.sl .meta b{color:var(--ink)}
.empty{color:var(--muted);font:600 16px var(--b)}
.sub{font:22px var(--d);margin:26px 0 12px}
.table .row{display:grid;grid-template-columns:44px 1fr 110px 90px 80px;gap:10px;align-items:center;padding:10px 4px;border-top:2px solid #E6EAF0;font:700 15px var(--b)}
.table .row.h{border-top:0;font:13px var(--d);color:var(--muted)}.table .n{font:18px var(--d);color:var(--pink)}.table .r{text-align:right}
.odds{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.od{border:3px solid var(--ink);border-radius:16px;padding:12px;text-align:center;background:#F4F8FB}.od .art{width:100px;margin:0 auto 8px;aspect-ratio:220/330}
.od b{display:block;font:20px var(--d)}.od span{display:block;font:700 14px var(--b);color:var(--muted)}.od em{font:18px var(--d);color:var(--pink);font-style:normal}
.cols{display:grid;grid-template-columns:1fr 1.3fr;gap:30px}.cols p{font:500 16px/1.5 var(--b);margin:0 0 12px}.cols b{font-weight:700}
.pr{display:flex;align-items:center;gap:12px;padding:8px 0;border-top:2px solid #E6EAF0}.pr .art{width:46px;flex:none;aspect-ratio:220/372}.pr b{font:18px var(--d)}.pr span{color:var(--muted);font-weight:600}
.basket{display:flex;flex-wrap:wrap;gap:8px}.basket span{border:2px solid var(--ink);border-radius:99px;padding:3px 10px;font:700 14px var(--b);background:#EEF7FC}

.overlay{position:fixed;inset:0;z-index:20;background:radial-gradient(circle at 50% 45%,rgba(30,40,70,.86),rgba(8,10,20,.96));display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;padding:20px}
.opack{width:240px;height:400px}.opack.shake{animation:shake .12s infinite}.opack.torn{animation:tear .6s forwards}
@keyframes shake{25%{transform:rotate(-2deg) translateX(-3px)}75%{transform:rotate(2deg) translateX(3px)}}
@keyframes tear{to{transform:translateY(120px) scale(.8);opacity:0}}
.reveal{display:flex;gap:22px;flex-wrap:wrap;justify-content:center;perspective:900px}
.card3d{width:220px;aspect-ratio:220/330;position:relative;transform-style:preserve-3d;animation:flip .8s cubic-bezier(.2,.8,.2,1.1) both}
@keyframes flip{from{transform:translateY(160px) rotateY(180deg) scale(.6);opacity:0}to{transform:none;opacity:1}}
.card3d.glow{filter:drop-shadow(0 0 22px #FFD23F) drop-shadow(0 0 40px #FF2E87)}
.cap{color:#fff;text-align:center;font:700 14px var(--b);margin-top:8px}.cap b{font:20px var(--d);display:block}.cap a{color:#9BE3FA;text-decoration:underline}
.ostatus{color:#fff;font:22px var(--d);margin:0;text-align:center}
.toast{position:fixed;left:50%;bottom:100px;translate:-50% 0;background:#fff;border:3px solid var(--ink);border-radius:14px;padding:10px 18px;font:700 15px var(--b);z-index:30;max-width:calc(100% - 32px);box-shadow:0 5px 0 var(--ink)}
.toast.err{border-color:var(--pink2);color:var(--pink2)}

.tabbar{display:none}
@media (max-width:1023px){
  .top{padding:12px 14px;gap:10px;flex-wrap:wrap}.brand{width:116px}.feed{order:5;flex-basis:100%}.live{order:4}
  .side{display:none}.panel{margin-left:0;padding:20px 16px}
  main{padding:0 14px 120px}
  .stage{height:380px}.pk{width:200px;height:340px}.arrow{width:42px;height:42px}
  .pname{font-size:42px}.pink.big{font-size:28px;padding:12px 30px}
  .crate{position:static;margin-top:26px}.cart{width:110px;height:96px}
  .stats{grid-template-columns:repeat(2,1fr)}.odds{grid-template-columns:repeat(2,1fr)}.cols{grid-template-columns:1fr}
  .table .row{grid-template-columns:34px 1fr 80px 64px}.table .row .hide{display:none}
  .tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:5;background:#fff;border-top:3px solid var(--ink);padding:8px 8px calc(8px + env(safe-area-inset-bottom));justify-content:space-around;align-items:center}
  .tabbar a{font:13px var(--d);padding:6px 8px}.tabbar a.on{color:var(--pink)}
  .tabbar .mid{width:58px;height:58px;margin-top:-30px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(180deg,#FF6FAF,var(--pink2));border:4px solid #fff;box-shadow:0 0 0 3px var(--ink)}
  .tabbar .mid svg{width:26px;height:26px;fill:#fff}
  .slabs{grid-template-columns:repeat(2,1fr);gap:12px}
  .card3d{width:150px}.opack{width:190px;height:320px}
}