:root{
  --bg:#07090f; --bg2:#0b0e18; --card:#10141f; --card2:#141927;
  --gold:#f5b52e; --gold2:#ffd873; --cyan:#38e1ff; --violet:#a678ff;
  --bronze:#c47b4a; --silver:#cfd6dd; --diamond:#6ff3ff;
  --text:#eef1f6; --muted:#9aa5b5; --line:#232a3d; --green:#3ddc84; --red:#ff5d6c;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:'Segoe UI',system-ui,-apple-system,Roboto,Arial,sans-serif;line-height:1.55}
a{color:var(--gold2);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:1140px;margin:0 auto;padding:0 20px}
header{position:sticky;top:0;z-index:50;background:rgba(7,9,15,.88);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;gap:18px;padding:12px 0}
.nav .brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:20px;color:var(--text)}
.nav .brand img{width:38px;height:38px;border-radius:50%;border:2px solid var(--gold)}
.nav nav{display:flex;gap:16px;margin-left:auto;flex-wrap:wrap}
.nav nav a{color:var(--muted);font-size:14.5px;font-weight:600}
.nav nav a:hover{color:var(--gold2);text-decoration:none}
.btn{display:inline-block;background:linear-gradient(135deg,var(--gold),#e08e12);color:#191104;font-weight:800;padding:11px 22px;border-radius:12px;border:0;cursor:pointer;font-size:15px}
.btn:hover{filter:brightness(1.08);text-decoration:none}
.btn.ghost{background:transparent;color:var(--gold2);border:1px solid var(--gold)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.small{padding:8px 14px;font-size:13.5px}
.hero{background:linear-gradient(180deg,rgba(7,9,15,.25),var(--bg) 92%),url('assets/cover.png') center/cover no-repeat;padding:110px 0 70px;text-align:center}
.hero .badge{display:inline-block;background:rgba(245,181,46,.14);border:1px solid var(--gold);color:var(--gold2);padding:5px 14px;border-radius:99px;font-size:13px;font-weight:700;letter-spacing:.4px}
.hero h1{font-size:52px;line-height:1.12;margin:20px 0 14px;font-weight:900}
.hero h1 .g{background:linear-gradient(90deg,var(--gold2),var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{max-width:720px;margin:0 auto;color:#d5dbe6;font-size:18px}
.stats{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:34px}
.stat{background:rgba(16,20,31,.85);border:1px solid var(--line);border-radius:14px;padding:14px 22px;min-width:150px}
.stat b{display:block;font-size:24px;color:var(--gold2)}
.stat span{color:var(--muted);font-size:13px}
section{padding:70px 0}
section.alt{background:var(--bg2)}
h2{font-size:34px;font-weight:900;margin-bottom:8px}
.sub{color:var(--muted);max-width:760px;margin-bottom:30px}
.grid{display:grid;gap:16px}
.grid.c2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.grid.c3{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.grid.c5{grid-template-columns:repeat(auto-fit,minmax(195px,1fr))}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:22px}
.card h3{font-size:19px;margin-bottom:8px}
.card p,.card li{color:var(--muted);font-size:14.5px}
.card ul{padding-left:18px}
.pill{display:inline-block;font-size:12px;font-weight:800;padding:3px 10px;border-radius:99px;border:1px solid var(--line);color:var(--muted)}
.progress{height:14px;background:#1a2030;border-radius:99px;overflow:hidden;border:1px solid var(--line)}
.progress i{display:block;height:100%;width:0%;background:linear-gradient(90deg,var(--gold),var(--gold2))}
label{display:block;font-size:13px;font-weight:700;color:var(--muted);margin:14px 0 6px}
select,input[type=text]{width:100%;background:var(--card2);border:1px solid var(--line);color:var(--text);border-radius:10px;padding:12px;font-size:15px}
code,.mono{font-family:ui-monospace,Menlo,Consolas,monospace}
.copybox{display:flex;gap:10px;align-items:stretch;margin-top:10px}
.copybox code{flex:1;background:#0a0d16;border:1px solid var(--line);border-radius:10px;padding:12px;font-size:13.5px;overflow-x:auto;white-space:nowrap;display:flex;align-items:center}
table{width:100%;border-collapse:collapse;font-size:14.5px}
th,td{padding:9px 10px;border-bottom:1px solid var(--line);text-align:left}
th{color:var(--gold2)}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
.rolecard{border-top:4px solid var(--gold)}
.rolecard ul{list-style:none;padding:0}
.rolecard li{padding:5px 0;border-bottom:1px dashed #222a3f;color:var(--text);font-size:15px}
.rolecard li:last-child{border-bottom:0}
.rarity-bronze{border-top:5px solid var(--bronze)} .rarity-silver{border-top:5px solid var(--silver)}
.rarity-gold{border-top:5px solid var(--gold)} .rarity-diamond{border-top:5px solid var(--diamond)}
.bigpct{font-size:32px;font-weight:900}
.notice{border:1px solid var(--gold);background:rgba(245,181,46,.08);border-radius:14px;padding:16px 20px;color:#f3e2b3;font-size:14.5px}
.warn{border-color:var(--red);background:rgba(255,93,108,.07);color:#f2c1c6}
footer{border-top:1px solid var(--line);padding:34px 0;color:var(--muted);font-size:14px}
.kv{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px dashed #222a3f;font-size:14.5px}
.kv b{color:var(--text)}
#refBanner{display:none}
.cardpreview{text-align:center}
.cardpreview .frame{border:3px solid #3a4358;border-radius:16px;padding:26px 14px;background:radial-gradient(ellipse at 50% 30%,#182036,#0a0d16)}
.cardpreview .frame.bronze{border-color:var(--bronze)} .cardpreview .frame.silver{border-color:var(--silver)}
.cardpreview .frame.gold{border-color:var(--gold);box-shadow:0 0 26px rgba(245,181,46,.35)}
.cardpreview .frame.diamond{border-color:var(--diamond);box-shadow:0 0 30px rgba(111,243,255,.45)}
.small{font-size:13px;color:var(--muted)}
@media(max-width:640px){.hero h1{font-size:36px}.hero{padding:70px 0 50px}}

.pagehero{padding:54px 0 6px;text-align:center}
.pagehero h1{font-size:40px;font-weight:900;line-height:1.15}
.pagehero p{color:var(--muted);max-width:700px;margin:10px auto 0}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0}
.chip{padding:7px 15px;border:1px solid var(--line);border-radius:99px;background:var(--card2);color:var(--muted);cursor:pointer;font-weight:700;font-size:13.5px;font-family:inherit}
.chip.active{border-color:var(--gold);color:var(--gold2)}
textarea.prompt{width:100%;background:#0a0d16;border:1px solid var(--line);border-radius:10px;color:var(--text);padding:14px;font-size:13.5px;min-height:160px;font-family:ui-monospace,Menlo,Consolas,monospace;line-height:1.5}
.empty{border:1px dashed var(--line);border-radius:16px;padding:36px;text-align:center;color:var(--muted)}
.listing img{width:100%;border-radius:10px;margin-bottom:10px}
.nav nav a.active{color:var(--gold2)}

/* ============ GAMING PACK (user choice, 2026-11-04) ============ */
body{font-family:'Rajdhani','Segoe UI',system-ui,-apple-system,Roboto,Arial,sans-serif;font-size:17.5px;font-weight:500}
h1,h2,.brand,.stat b,.bigpct,.btn,.card h3,.pagehero h1,.hero h1{font-family:'Orbitron','Rajdhani',sans-serif;letter-spacing:.5px}
.card h3{font-size:17px;text-transform:uppercase}
.btn{letter-spacing:.8px;text-transform:uppercase;position:relative;overflow:hidden}
.btn::after{content:'';position:absolute;top:0;left:-80%;width:50%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);transition:left .55s ease}
.btn:hover::after{left:130%}
.card{transition:transform .35s ease,border-color .35s ease,box-shadow .35s ease}
.card:hover{transform:translateY(-6px);border-color:rgba(245,181,46,.55);box-shadow:0 14px 34px rgba(0,0,0,.45),0 0 22px rgba(245,181,46,.12)}
.nav nav a{position:relative;padding-bottom:3px}
.nav nav a::after{content:'';position:absolute;left:0;bottom:0;width:0;height:2px;background:var(--gold);transition:width .3s ease}
.nav nav a:hover::after{width:100%}
.hero{position:relative;overflow:hidden}
.hero::before{content:'';position:absolute;inset:-40%;background:radial-gradient(circle at 30% 40%,rgba(245,181,46,.16),transparent 42%),radial-gradient(circle at 72% 60%,rgba(56,225,255,.13),transparent 45%);animation:heroGlow 11s ease-in-out infinite alternate;pointer-events:none}
@keyframes heroGlow{from{transform:translate(-3%,-2%) rotate(0deg)}to{transform:translate(3%,3%) rotate(4deg)}}
.floatcard{position:absolute;width:118px;border-radius:12px;border:2px solid rgba(245,181,46,.5);box-shadow:0 16px 40px rgba(0,0,0,.55);animation:floaty 6.5s ease-in-out infinite;z-index:1}
.floatcard.f1{left:6%;top:24%;animation-delay:0s}
.floatcard.f2{right:6%;top:20%;width:104px;animation-delay:1.6s;border-color:rgba(111,243,255,.55)}
.floatcard.f3{right:10%;bottom:12%;width:92px;animation-delay:3.1s;border-color:rgba(207,214,221,.5)}
@keyframes floaty{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-16px) rotate(2deg)}}
@media(max-width:900px){.floatcard{display:none}}
.progress i{position:relative;overflow:hidden}
.progress i::after{content:'';position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.5) 50%,transparent 70%);animation:shimmer 2.2s linear infinite}
@keyframes shimmer{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
.marquee{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#0a0d16;padding:11px 0;white-space:nowrap}
.marquee .track{display:inline-block;font-family:'Orbitron',sans-serif;font-size:13.5px;font-weight:700;letter-spacing:2px;color:var(--gold2);animation:marq 30s linear infinite}
.marquee .track span{margin:0 26px}
.marquee .track i{color:var(--cyan);font-style:normal}
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:translateY(0)}
.rarity-diamond{animation:diamondPulse 3.2s ease-in-out infinite}
@keyframes diamondPulse{0%,100%{box-shadow:0 0 0 rgba(111,243,255,0)}50%{box-shadow:0 0 30px rgba(111,243,255,.28)}}
.hero .badge{animation:badgeGlow 2.6s ease-in-out infinite}
@keyframes badgeGlow{0%,100%{box-shadow:0 0 0 rgba(245,181,46,0)}50%{box-shadow:0 0 18px rgba(245,181,46,.45)}}
@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}

/* ---- Pro animation pack v2: blinking accent words, click ripple, scroll progress, heading shimmer */
.blink{color:var(--gold2);animation:wordBlink 1.6s ease-in-out infinite}
@keyframes wordBlink{0%,100%{opacity:1;text-shadow:0 0 14px rgba(245,181,46,.55)}50%{opacity:.3;text-shadow:0 0 2px rgba(245,181,46,0)}}
.cursorblink{display:inline-block;width:10px;height:1.02em;background:var(--gold2);vertical-align:text-bottom;margin-left:5px;animation:cursorBlink 1s steps(1) infinite}
@keyframes cursorBlink{0%,55%{opacity:1}56%,100%{opacity:0}}
.statusblink{animation:wordBlink 1.8s ease-in-out infinite;color:var(--gold2)}
.livedot{display:inline-block;width:9px;height:9px;border-radius:50%;background:#ffb020;margin-right:7px;vertical-align:middle;animation:dotPulse 1.6s ease-in-out infinite}
@keyframes dotPulse{0%,100%{box-shadow:0 0 0 0 rgba(255,176,32,.55)}50%{box-shadow:0 0 0 7px rgba(255,176,32,0)}}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .pagehero h1{background:linear-gradient(100deg,#f5f5f5 30%,var(--gold2) 50%,#f5f5f5 70%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:hShine 5.5s linear infinite}
}
@keyframes hShine{from{background-position:120% 0}to{background-position:-120% 0}}
.btn,button{position:relative;overflow:hidden}
.btn:active,button:active{transform:scale(.965)}
header nav a{position:relative;overflow:hidden;border-radius:6px}
.ripple{position:absolute;border-radius:50%;background:rgba(255,220,130,.55);transform:scale(0);animation:rip .55s ease-out forwards;pointer-events:none;z-index:2}
@keyframes rip{to{transform:scale(3.2);opacity:0}}
#scrollProgress{position:fixed;top:0;left:0;height:3px;width:0;background:linear-gradient(90deg,var(--gold),#6ff3ff);z-index:999;transition:width .08s linear}
.card{position:relative}
.card::after{content:'';position:absolute;top:0;left:6%;right:6%;height:2px;background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:0;transition:opacity .35s;pointer-events:none}
.card:hover::after{opacity:1}
input,select,textarea{transition:border-color .2s,box-shadow .2s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(245,181,46,.22)}

/* ---- Honor-system task ticks + prompt gate (Mint page) */
.taskrow{display:flex;gap:14px;align-items:center;padding:14px 0;border-top:1px solid rgba(255,255,255,.08)}
.tick{width:34px;height:34px;flex:0 0 34px;border-radius:50%;border:2px solid rgba(245,181,46,.5);display:flex;align-items:center;justify-content:center;font-size:17px;font-weight:900;color:transparent;cursor:pointer;transition:all .3s;user-select:none}
.tick.done{background:var(--gold);border-color:var(--gold);color:#141414;box-shadow:0 0 16px rgba(245,181,46,.5);animation:tickPop .35s ease}
@keyframes tickPop{0%{transform:scale(.6)}60%{transform:scale(1.25)}100%{transform:scale(1)}}
.lockedv{opacity:.45;pointer-events:none;filter:saturate(.6)}
#promptBody{transition:opacity .4s,filter .4s}