*{box-sizing:border-box;margin:0;padding:0}
:root{--acc:#e5192b;--bg:#0a0a0d;--panel:#14141a;--line:#ffffff1a;--fg:#eee}
html{scroll-behavior:smooth}
body{overflow-x:clip;background:var(--bg);color:var(--fg);font-family:"Segoe UI",system-ui,sans-serif;line-height:1.5}
a{color:inherit}
[hidden]{display:none!important}
b{color:var(--acc)}
.btn{display:inline-flex;align-items:center;gap:6px;font:800 13px inherit;font-family:inherit;letter-spacing:.08em;text-transform:uppercase;color:#fff;background:#ffffff10;border:1px solid var(--line);border-radius:999px;padding:11px 20px;cursor:pointer;text-decoration:none;transition:.15s}
.btn:hover{background:#ffffff22}
.btn.primary{background:var(--acc);border-color:transparent;box-shadow:0 8px 30px -8px var(--acc)}
.btn.primary:hover{filter:brightness(1.1)}
.btn.small{padding:7px 12px;font-size:11px}
.btn:disabled{opacity:.5;cursor:default}

.bar{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:24px;padding:14px 32px;background:#0a0a0dcc;backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.brand{font:italic 900 26px Impact,"Arial Black",sans-serif;letter-spacing:.03em;text-decoration:none}
.bar nav{display:flex;gap:20px;margin-right:auto}
.bar nav a{text-decoration:none;font-weight:700;font-size:13px;letter-spacing:.1em;text-transform:uppercase;opacity:.7}
.bar nav a:hover{opacity:1}

.hero{display:grid;grid-template-columns:1.05fr 1fr;align-items:center;gap:40px;padding:70px 32px 50px;max-width:1300px;margin:0 auto;min-height:78vh;position:relative}
.hero::before{content:"";position:absolute;inset:-10% -40%;background:radial-gradient(closest-side at 70% 50%,#e5192b30,transparent);pointer-events:none;z-index:-1}
.kicker{font-weight:800;font-size:12px;letter-spacing:.3em;text-transform:uppercase;opacity:.6}
.hero h1{font:italic 900 clamp(64px,10vw,140px)/.9 Impact,"Arial Black",sans-serif;letter-spacing:.02em;margin:12px 0 18px;text-shadow:0 8px 40px #000}
.tagline{font-size:18px;opacity:.85;max-width:520px}
.actions{display:flex;gap:10px;margin:28px 0 22px;flex-wrap:wrap}
.stats{display:flex;gap:28px;flex-wrap:wrap}
.stats div{font-size:11px;letter-spacing:.2em;text-transform:uppercase;opacity:.6}
.stats strong{display:block;font:900 28px Impact,sans-serif;letter-spacing:.04em;opacity:1;color:#fff}
.hero-cans{position:relative;height:520px}
.hero-cans img{position:absolute;width:56%;border-radius:22px;box-shadow:0 30px 80px -20px #000;transition:transform .4s}
.hero-cans img:nth-child(1){left:0;top:60px;transform:rotate(-8deg)}
.hero-cans img:nth-child(2){left:22%;top:0;z-index:2;transform:rotate(2deg)}
.hero-cans img:nth-child(3){right:0;top:90px;transform:rotate(9deg)}
.hero-cans img:hover{transform:rotate(0) scale(1.04);z-index:3}

.band{padding:70px 32px;max-width:1300px;margin:0 auto}
.band h2{font:italic 900 46px Impact,"Arial Black",sans-serif;letter-spacing:.03em;margin-bottom:18px}
.lead{opacity:.7;margin:-8px 0 22px}
.three{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.three>div{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:26px}
.three h3{font-size:20px;margin:10px 0 6px}
.three p{opacity:.75}
.num{display:inline-flex;width:36px;height:36px;align-items:center;justify-content:center;border-radius:50%;background:var(--acc);font:900 18px Impact,sans-serif}

.panel{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:24px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.panel p{opacity:.8}
.msg{font-size:14px;opacity:.8}
.msg.bad{color:#ff6b5a;opacity:1}
.msg.good{color:#7dff2b;opacity:1}

.cans{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px;margin-top:20px}
.can{background:var(--panel);border:1px solid var(--line);border-radius:18px;overflow:hidden;--c:#fff}
.can .pic{aspect-ratio:1;position:relative;background:#000}
.can .pic img{width:100%;height:100%;object-fit:cover;display:block}
.can .pic .wall{position:absolute;inset:0;opacity:0;transition:.3s}
.can .pic .wall.on{opacity:1}
.can .pic .tagw{position:absolute;left:12px;top:12px;font-size:10px;font-weight:900;letter-spacing:.15em;background:#000a;padding:4px 8px;border-radius:8px}
.can .info{padding:14px 16px 16px}
.can .who{font-weight:900;font-size:17px}
.can .who span{color:var(--c)}
.can .meta{font-size:12px;opacity:.6;margin:2px 0 12px}
.can .row{display:flex;gap:8px;flex-wrap:wrap}

.walls{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.walls a{display:block;border-radius:14px;overflow:hidden;position:relative;border:1px solid var(--line);aspect-ratio:5/4;background:#000}
.walls img{width:100%;height:100%;object-fit:cover;display:block;transition:.3s}
.walls a:hover img{transform:scale(1.05)}
.walls span{position:absolute;left:10px;bottom:10px;font-weight:900;font-size:12px;background:#000b;padding:4px 9px;border-radius:8px}

.gal-head{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:12px;margin-bottom:18px}
.gal-head h2{margin:0}
.filters{display:flex;gap:6px;flex-wrap:wrap}
.filters button{font:700 12px inherit;font-family:inherit;color:#eee;background:#ffffff0d;border:1px solid var(--line);border-radius:20px;padding:8px 16px;cursor:pointer;letter-spacing:.08em;text-transform:uppercase}
.filters button.on{background:#fff;color:#000}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:14px}
.card{display:block;background:var(--panel);border:1px solid var(--line);border-radius:14px;overflow:hidden;cursor:pointer;transition:.2s;--c:#fff}
.card:hover{transform:translateY(-4px);border-color:var(--c);box-shadow:0 12px 40px -12px var(--c)}
.card img{width:100%;aspect-ratio:1;display:block;background:#111}
.card .cm{padding:9px 11px;display:flex;justify-content:space-between;align-items:center;gap:6px;font-size:12px}
.card .cm b{color:#fff;font-weight:800}
.tag{font-size:9px;font-weight:900;letter-spacing:.12em;padding:3px 7px;border-radius:8px;background:#ffffff14;text-transform:uppercase}
.tag.Legendary{background:linear-gradient(90deg,#d4a63a,#fff2b8,#d4a63a);color:#000}
.tag.Rare{background:#ff0f7b;color:#fff}
.tag.Mythic{background:#000;color:#f4ff3a;border:1px solid #f4ff3a;box-shadow:0 0 8px #f4ff3a88}

.viewer{position:fixed;inset:0;z-index:50;background:#000d;display:none;align-items:center;justify-content:center;padding:20px}
.viewer.show{display:flex}
.vbox{position:relative;width:min(92vw,calc(92vh - 60px));display:flex;flex-direction:column;gap:10px}
.vbox iframe{width:100%;aspect-ratio:1;border:0;border-radius:14px;background:#000}
.vclose{position:absolute;right:-12px;top:-12px;z-index:2;width:36px;height:36px;border-radius:50%;border:0;background:#fff;color:#000;font-weight:900;cursor:pointer}
.vbar{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}

footer{display:flex;justify-content:space-between;padding:30px 32px;border-top:1px solid var(--line);font-size:13px;opacity:.6;flex-wrap:wrap;gap:10px}

@media (max-width:860px){
  .bar{padding:12px 16px;gap:12px}
  .bar nav{display:none}
  .brand{margin-right:auto}
  .hero{grid-template-columns:1fr;padding:40px 16px;min-height:0}
  .hero-cans{height:340px}
  .band{padding:50px 16px}
  .three{grid-template-columns:1fr}
}