:root{--bg0:#0a080c;--bg1:#110e14;--panel:rgba(20,16,24,.82);--panel2:rgba(30,24,34,.9);--line:#3a2e22;--line2:#5a4630;--gold:#c9a45c;--gold2:#ecd29a;--gold3:#8a6d3a;--ember:#e8743b;--ember2:#ffb15a;--arcane:#9b6bff;--arcane2:#c9b0ff;--text:#ebe3d4;--muted:#9a8f82;--dim:#6c635a;--ok:#6bcf7f;--bad:#e0574f;--head:'Cinzel',Georgia,serif;--font:'Inter','Segoe UI',system-ui,sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;min-height:100vh;color:var(--text);font-family:var(--font);font-size:15px;background:radial-gradient(1200px 600px at 75% -10%,rgba(155,107,255,.14),transparent 60%),radial-gradient(900px 500px at 10% 110%,rgba(232,116,59,.14),transparent 60%),radial-gradient(circle at 50% 30%,#15111a,#0a080c 80%) fixed}
#embers{position:fixed;inset:0;pointer-events:none;z-index:0}
.wrap{max-width:1200px;margin:0 auto;padding:0 24px;position:relative;z-index:1}
.row{display:flex;align-items:center;gap:14px}.grow{flex:1}.muted{color:var(--muted)}.dim{color:var(--dim)}
a{color:var(--gold2);text-decoration:none}
.top{position:sticky;top:0;z-index:20;background:rgba(10,8,12,.85);backdrop-filter:blur(10px);border-bottom:1px solid rgba(201,164,92,.15)}
.top .wrap{height:68px}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--head);font-weight:900;letter-spacing:.28em;font-size:18px;color:var(--gold2)}.brand img{width:26px}.brand small{font-family:var(--font);font-size:10px;letter-spacing:.12em;color:var(--muted);font-weight:600}
.menu{display:flex;gap:6px;margin-left:24px}.menu a{padding:8px 14px;border-radius:8px;color:var(--muted);font-weight:600}.menu a:hover,.menu a.on{color:var(--gold2);background:rgba(201,164,92,.1)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 18px;border-radius:9px;font-weight:600;color:var(--text);background:linear-gradient(180deg,#2a2230,#1a151e);border:1px solid var(--line2);cursor:pointer;transition:.2s;font-size:14px;font-family:inherit}
.btn:hover{border-color:var(--gold);color:var(--gold2);box-shadow:0 0 16px rgba(201,164,92,.2)}
.btn.gold{color:#1b1206;border-color:#f4dfa8;background:linear-gradient(180deg,#f1d48e,#c9a45c 55%,#9c7a3c);box-shadow:0 4px 18px rgba(201,164,92,.3)}.btn.gold:hover{box-shadow:0 0 26px rgba(236,210,154,.55);color:#120b02}
.btn.big{padding:16px 30px;font-size:17px;font-family:var(--head);letter-spacing:.08em}.btn.sm{padding:6px 12px;font-size:13px}.btn.danger:hover{border-color:var(--bad);color:#ffb3ad}
.chip{padding:7px 14px;border-radius:30px;background:rgba(201,164,92,.08);border:1px solid rgba(201,164,92,.25);color:var(--gold2);font-weight:600}
.coins{display:inline-flex;align-items:center;gap:6px;font-weight:800;color:var(--gold2)}.coins i{width:15px;height:15px;display:inline-block;background:linear-gradient(135deg,#fff1c4,#e8a33c 55%,#8a4a12);clip-path:polygon(50% 0,100% 35%,80% 100%,20% 100%,0 35%)}
.hero{padding:90px 0 70px;display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
.kicker{font-family:var(--head);letter-spacing:.32em;color:var(--ember2);font-weight:700;font-size:13px}
h1.big{font-family:var(--head);font-size:58px;line-height:1.05;margin:12px 0 18px;color:#fff4dc;text-shadow:0 6px 40px rgba(232,184,74,.25)}
h1.big span{background:linear-gradient(180deg,#fff1c4,#e8b84a 60%,#a8641a);-webkit-background-clip:text;background-clip:text;color:transparent}
.lead{font-size:17px;color:#cfc4b2;line-height:1.6;max-width:560px}
.showcase{height:520px;border-radius:18px;overflow:hidden;border:1px solid var(--line2);position:relative;background:radial-gradient(circle at 50% 70%,rgba(155,107,255,.2),transparent 60%),radial-gradient(circle at 50% 100%,rgba(232,116,59,.2),transparent 50%),linear-gradient(180deg,#17121c,#0b090d);box-shadow:0 30px 80px rgba(0,0,0,.5)}
.showcase .label{position:absolute;bottom:16px;left:0;right:0;text-align:center;font-family:var(--head);color:var(--gold2);letter-spacing:.1em;pointer-events:none}
h2.sec{font-family:var(--head);font-size:26px;letter-spacing:.1em;color:var(--gold2);margin:70px 0 24px;display:flex;align-items:center;gap:16px}h2.sec::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,var(--gold3),transparent)}
.grid{display:grid;gap:18px}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.card{background:var(--panel2);border:1px solid var(--line);border-radius:14px;overflow:hidden;transition:.3s;position:relative}.card:hover{transform:translateY(-4px);border-color:var(--gold3);box-shadow:0 16px 40px rgba(0,0,0,.45)}
.card .body{padding:16px 18px}.card h3{font-family:var(--head);margin:0 0 6px;font-size:18px}.card p{margin:0;color:var(--muted);line-height:1.55}
.feat .ic{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;background:rgba(201,164,92,.12);color:var(--gold2);font-size:22px;margin-bottom:12px}
.frame{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:22px;backdrop-filter:blur(6px)}
.flash{margin:18px 0;padding:12px 16px;border-radius:10px;border-left:3px solid var(--ok);background:var(--panel2)}.flash.bad{border-left-color:var(--bad)}
.input,select,textarea{width:100%;padding:11px 13px;border-radius:9px;color:var(--text);background:rgba(8,6,10,.7);border:1px solid var(--line);font-family:inherit;font-size:14px;outline:none}.input:focus,textarea:focus,select:focus{border-color:var(--gold)}
label.lbl{display:block;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:12px 0 6px}
.rar{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}.rar.common{color:#b8b0a4}.rar.rare{color:#5fb0ff}.rar.epic{color:#c08bff}.rar.legendary{color:#ffb347}.rar.mythic{color:#ff5a6a}
.thumb{aspect-ratio:1;background:radial-gradient(circle at 50% 60%,rgba(155,107,255,.25),transparent 65%),linear-gradient(180deg,#1d1724,#0f0c12);display:grid;place-items:center}.thumb img{width:100%;height:100%;object-fit:cover}
.owned{position:absolute;top:10px;right:10px;padding:3px 9px;border-radius:12px;font-size:11px;font-weight:800;background:rgba(107,207,127,.2);color:var(--ok);border:1px solid rgba(107,207,127,.5)}
.pkg{text-align:center;padding:24px 16px}.pkg .n{font-family:var(--head);font-size:34px;font-weight:900;color:var(--gold2)}.pkg .b{color:var(--ember2);font-weight:700;height:18px;font-size:13px}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}.chips a{padding:7px 14px;border-radius:20px;border:1px solid var(--line2);color:var(--muted);font-weight:600;font-size:13px}.chips a.on{color:#1b1206;background:linear-gradient(180deg,#f1d48e,#c9a45c);border-color:#f1d48e}
.modal{position:fixed;inset:0;z-index:50;background:rgba(5,3,7,.75);backdrop-filter:blur(6px);display:none;place-items:center}.modal.show{display:grid}
.modal .box{width:min(900px,94vw);background:var(--panel2);border:1px solid var(--line2);border-radius:16px;padding:24px;display:flex;gap:24px}
.viewer{width:400px;height:480px;border-radius:14px;overflow:hidden;border:1px solid var(--line2);background:radial-gradient(circle at 50% 70%,rgba(155,107,255,.18),transparent 60%),linear-gradient(180deg,#17121c,#0b090d);flex:none}
table{width:100%;border-collapse:collapse}th,td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line)}th{color:var(--muted);font-size:12px;letter-spacing:.06em;text-transform:uppercase}
.tabs{display:flex;gap:6px;margin-bottom:20px;flex-wrap:wrap}.tabs a{padding:9px 16px;border-radius:9px;border:1px solid var(--line);color:var(--muted);font-weight:600}.tabs a.on{color:var(--gold2);border-color:var(--gold);background:rgba(201,164,92,.1)}
.foot{border-top:1px solid rgba(201,164,92,.12);margin-top:80px;padding:26px 0;color:var(--dim);font-size:13px}.foot a{color:var(--muted);margin-left:16px}
.steps{counter-reset:s}.steps li{list-style:none;margin:10px 0;padding-left:44px;position:relative;color:#cfc4b2}.steps li::before{counter-increment:s;content:counter(s);position:absolute;left:0;top:-3px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-family:var(--head);font-weight:900;color:#1b1206;background:linear-gradient(180deg,#f1d48e,#c9a45c)}
@media(max-width:900px){.hero{grid-template-columns:1fr}.g3{grid-template-columns:1fr}.modal .box{flex-direction:column}.viewer{width:100%}h1.big{font-size:40px}.menu{display:none}}