@font-face{font-family:"Archivo Black";src:url(assets/archivo-black.ttf) format("truetype")}
:root{
  --pink:#ff2d95;--orange:#ff8a1f;--cyan:#00e5ff;--green:#3dff8a;
  --violet:#b366ff;--red:#ff2d55;--gold:#ffcf40;--ink:#0b0610;
  /* Open cork from corkboard.png (1080x1920) */
  --cork-x:90px;--cork-y:199px;--cork-w:900px;--cork-h:1444px;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{background:#000;overflow:hidden;font-family:"Archivo Black","Arial Black","Helvetica Neue",Arial,sans-serif;color:#fff}
#stage{position:relative;width:1080px;height:1920px;transform-origin:0 0;overflow:hidden}
.bg{position:absolute;inset:0;background:url(assets/corkboard_bg.png) center/cover no-repeat}
.vig{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(11,6,16,.55) 0%,transparent 12%,transparent 88%,rgba(11,6,16,.7) 100%)}

.topbar{position:absolute;left:0;right:0;top:0;z-index:5;height:150px;padding:36px 34px 0;display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.back-btn{display:flex;align-items:center;gap:6px;height:64px;padding:0 22px 0 14px;border-radius:999px;background:rgba(14,8,22,.88);border:3px solid #57406a;color:#e8dcf2;text-decoration:none;font-family:Arial,sans-serif;font-weight:800;font-size:26px;letter-spacing:2px}
.back-btn:active{border-color:var(--pink);box-shadow:0 0 16px rgba(255,45,149,.5)}
.brand{text-align:center;flex:1;padding-top:2px}
.brand-main{font-size:42px;letter-spacing:3px;line-height:1}
.brand-main .p{color:var(--pink);text-shadow:0 0 16px rgba(255,45,149,.7)}
.brand-main .w{color:#fff}
.brand-sub{margin-top:4px;font-family:Arial,sans-serif;font-weight:800;font-size:20px;letter-spacing:8px;color:var(--orange);text-shadow:0 0 12px rgba(255,138,31,.6)}
.cash-pill{display:flex;align-items:center;gap:10px;height:64px;padding:0 22px;border-radius:999px;background:rgba(14,8,22,.9);border:3px solid #3a2a48;color:var(--green);font-family:"DejaVu Sans Mono",Menlo,Consolas,monospace;font-weight:700;font-size:28px;font-variant-numeric:tabular-nums;box-shadow:0 0 14px rgba(61,255,138,.25)}

/* 2x2 grid inside open cork */
.cork{
  position:absolute;z-index:3;
  left:var(--cork-x);top:var(--cork-y);width:var(--cork-w);height:var(--cork-h);
  display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;
  gap:36px;padding:28px;
}
.flyer{
  position:relative;border-radius:22px;overflow:hidden;cursor:pointer;
  background:linear-gradient(165deg,rgba(22,12,32,.94),rgba(10,6,16,.96));
  border:3px solid #3a2a48;
  box-shadow:0 18px 36px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.04) inset;
  display:flex;flex-direction:column;transform:rotate(var(--tilt, -1.2deg));
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.f-rivals{--tilt:-1.6deg;--accent:var(--pink)}
.f-betting{--tilt:1.4deg;--accent:var(--gold)}
.f-events{--tilt:1.1deg;--accent:var(--cyan)}
.f-underground{--tilt:-1.3deg;--accent:var(--red)}
.flyer:active,.flyer:focus{outline:none;transform:rotate(0deg) scale(.985);border-color:var(--accent);box-shadow:0 0 28px color-mix(in srgb,var(--accent) 55%,transparent),0 18px 36px rgba(0,0,0,.55)}
.flyer::before{content:"";position:absolute;inset:0;pointer-events:none;border:2px solid color-mix(in srgb,var(--accent) 35%,transparent);border-radius:20px;margin:4px;opacity:.7}

.pin{position:absolute;z-index:4;width:28px;height:28px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#fff 0 12%,var(--accent) 18% 70%,#4a0018 100%);
  box-shadow:0 4px 10px rgba(0,0,0,.55),0 0 14px color-mix(in srgb,var(--accent) 70%,transparent)}
.pin-tl{top:10px;left:16px}.pin-tr{top:12px;right:18px}
.f-betting .pin{background:radial-gradient(circle at 35% 30%,#fff 0 12%,var(--gold) 18% 70%,#5a3a00 100%)}
.f-events .pin{background:radial-gradient(circle at 35% 30%,#fff 0 12%,var(--cyan) 18% 70%,#003848 100%)}
.f-underground .pin{background:radial-gradient(circle at 35% 30%,#fff 0 12%,var(--red) 18% 70%,#4a0010 100%)}

.flyer-banner{height:210px;background-size:cover;background-position:center 40%;filter:saturate(1.15) brightness(.72)}
.flyer-banner.dark{filter:saturate(1.05) brightness(.45) contrast(1.1)}
.flyer-banner::after{content:"";position:absolute;left:0;right:0;top:0;height:210px;background:linear-gradient(180deg,transparent 40%,rgba(10,6,16,.95))}
.flyer-body{position:relative;z-index:2;flex:1;padding:8px 26px 26px;display:flex;flex-direction:column;gap:10px}
.flyer-tag{align-self:flex-start;font-family:Arial,sans-serif;font-weight:800;font-size:18px;letter-spacing:3px;padding:6px 12px;border-radius:8px;color:#12010a}
.flyer-tag.pink{background:linear-gradient(90deg,var(--pink),var(--orange));color:#1a0010}
.flyer-tag.gold{background:linear-gradient(90deg,var(--gold),var(--orange));color:#1a1000}
.flyer-tag.cyan{background:linear-gradient(90deg,var(--cyan),#4d7cff);color:#001018}
.flyer-tag.red{background:linear-gradient(90deg,var(--red),var(--violet));color:#fff}
.flyer h2{font-size:50px;letter-spacing:2px;line-height:1;text-shadow:0 0 18px color-mix(in srgb,var(--accent) 55%,transparent)}
.f-underground h2{font-size:39px;letter-spacing:1.5px}
.flyer p{font-family:Arial,sans-serif;font-weight:700;font-size:22px;line-height:1.35;color:#d5c6e4}
.faces{display:flex;gap:8px;margin-top:4px}
.faces img{width:72px;height:72px;border-radius:12px;object-fit:cover;object-position:center 18%;border:2px solid #4a3558;background:#1a0d24}
.faces img.lock{filter:grayscale(1) brightness(.4);opacity:.85}
.odds-row{display:flex;align-items:center;gap:10px;margin-top:4px;font-family:Arial,sans-serif;font-weight:800}
.odds-row span{color:var(--green);letter-spacing:2px;font-size:18px}
.odds-row b{font-size:26px;color:#fff;background:rgba(255,207,64,.12);border:2px solid rgba(255,207,64,.35);padding:6px 12px;border-radius:10px}
.crate-row{display:flex;align-items:center;gap:12px;margin-top:2px}
.crate-row img{width:64px;height:64px;object-fit:contain;filter:drop-shadow(0 0 8px rgba(61,255,138,.35))}
.timer{margin-left:auto;font-family:"DejaVu Sans Mono",Menlo,Consolas,monospace;font-size:24px;color:var(--cyan);text-shadow:0 0 10px rgba(0,229,255,.5)}
.heat{display:flex;align-items:center;gap:8px;margin-top:4px;font-family:Arial,sans-serif;font-weight:800;font-size:18px;letter-spacing:2px;color:#c9b4da}
.heat i{width:28px;height:14px;border-radius:4px;background:#2a1c36;border:1px solid #57406a;display:inline-block}
.heat i.on{background:var(--red);border-color:var(--red);box-shadow:0 0 10px var(--red)}
.flyer-cta{margin-top:auto;align-self:stretch;text-align:center;padding:16px 12px;border-radius:14px;font-size:28px;letter-spacing:3px;color:#fff;background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 40%,var(--orange)));box-shadow:0 0 18px color-mix(in srgb,var(--accent) 45%,transparent)}

.foot{position:absolute;left:0;right:0;bottom:28px;z-index:5;text-align:center;font-family:Arial,sans-serif;font-size:22px;color:#9c87b0}
.foot a{color:#c9b4da}.sep{margin:0 10px;opacity:.5}

.hidden{display:none!important}
.modal{position:absolute;inset:0;z-index:20;background:rgba(5,2,8,.82);display:flex;align-items:center;justify-content:center;padding:40px}
.sheet{width:920px;max-height:1600px;overflow:auto;border-radius:32px;background:linear-gradient(165deg,#1a1024,#0d0814);border:4px solid var(--pink);box-shadow:0 0 60px rgba(255,45,149,.45);padding:40px 44px 48px}
.sheet h3{font-size:64px;letter-spacing:3px;text-shadow:0 0 18px rgba(255,45,149,.55)}
.sheet .sub{font-family:Arial,sans-serif;font-weight:800;font-size:24px;color:var(--orange);letter-spacing:4px;margin-top:4px}
.sheet .body{font-family:Arial,sans-serif;font-weight:700;font-size:28px;color:#d9cfe4;line-height:1.4;margin:22px 0 28px}
.sheet .row{display:flex;gap:16px;flex-wrap:wrap;margin:12px 0}
.sheet .chip{font-family:Arial,sans-serif;font-weight:800;font-size:22px;padding:10px 16px;border-radius:12px;background:rgba(255,255,255,.06);border:2px solid #57406a;color:#e8dcf2}
.sheet .chip.on{border-color:var(--gold);color:var(--gold);box-shadow:0 0 12px rgba(255,207,64,.35)}
.sheet .portrait{width:100%;max-height:420px;object-fit:cover;object-position:center 20%;border-radius:22px;border:3px solid #3a2a48;margin:10px 0 18px}
.sheet .car{display:block;width:100%;max-height:180px;object-fit:contain;margin:8px 0 18px;filter:drop-shadow(0 8px 16px rgba(0,0,0,.5))}
.sheet .btns{display:flex;gap:18px;margin-top:18px}
.sheet .btn{flex:1;font-family:inherit;font-size:34px;letter-spacing:2px;border:none;border-radius:18px;padding:22px 18px;color:#fff;cursor:pointer}
.sheet .btn.pri{background:linear-gradient(135deg,var(--pink),var(--orange));box-shadow:0 0 22px rgba(255,45,149,.55)}
.sheet .btn.sec{background:#22162e;border:3px solid #6b5480}
.sheet .btn.win{background:linear-gradient(135deg,var(--green),#1aa85a);color:#06140a}
.sheet .btn.lose{background:#2a1c36;border:3px solid var(--red);color:#ffb3c0}
.sheet .btn.ghost{background:transparent;border:3px solid var(--orange);color:var(--orange)}
.sheet .list{display:flex;flex-direction:column;gap:14px;margin:8px 0 18px}
.sheet .card{display:flex;gap:16px;align-items:center;padding:16px;border-radius:18px;background:rgba(255,255,255,.04);border:2px solid #3a2a48}
.sheet .card img.face{width:88px;height:88px;border-radius:14px;object-fit:cover;object-position:center 18%}
.sheet .card img.crate{width:72px;height:72px;object-fit:contain}
.sheet .card .meta{flex:1;min-width:0}
.sheet .card .name{font-size:32px;letter-spacing:2px}
.sheet .card .desc{font-family:Arial,sans-serif;font-weight:700;font-size:20px;color:#bba7cc;margin-top:4px}
.sheet .locked{opacity:.55;filter:grayscale(.4)}
.sheet .stamp{display:inline-block;margin-left:10px;font-size:18px;letter-spacing:2px;padding:4px 10px;border-radius:8px;background:var(--orange);color:#1a0d00;transform:rotate(-6deg)}

.banner{position:absolute;left:0;right:0;top:820px;z-index:30;pointer-events:none}
.b-inner{background:linear-gradient(90deg,transparent,rgba(255,45,149,.95) 15%,rgba(255,138,31,.95) 85%,transparent);padding:36px 0;text-align:center;animation:slide 2.6s ease forwards}
.b-small{font-size:28px;letter-spacing:8px;color:#1a0010}
.b-big{font-size:72px;letter-spacing:4px}
@keyframes slide{0%{transform:translateX(-110%) skewX(-12deg)}12%{transform:translateX(0) skewX(-12deg)}78%{transform:translateX(0) skewX(-12deg);opacity:1}100%{transform:translateX(110%) skewX(-12deg);opacity:0}}
.toast{position:absolute;left:50%;bottom:120px;transform:translateX(-50%);z-index:40;background:rgba(14,8,22,.95);border:3px solid var(--green);color:var(--green);padding:18px 28px;border-radius:18px;font-family:Arial,sans-serif;font-weight:800;font-size:26px;box-shadow:0 0 24px rgba(61,255,138,.35)}