:root{
  --bg:#04060c; --bg2:#0a1020; --panel:#0c1426cc; --line:#1c2b4a;
  --ice:#5ec8ff; --ice2:#a9e4ff; --gold:#e8b84a; --gold2:#ffd77a;
  --text:#cfe3f5; --muted:#7f97b3; --ok:#4ade80; --bad:#f87171; --warn:#fbbf24;
  --serif:'Cinzel',Georgia,'Times New Roman',serif;
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--text); font:16px/1.65 var(--sans);
  background-image:
    radial-gradient(1100px 600px at 50% -10%, #12306066, transparent 70%),
    radial-gradient(900px 500px at 90% 40%, #0b1c3a55, transparent 70%);
  background-attachment:fixed;
}
#snow{position:fixed; inset:0; width:100%; height:100%; pointer-events:none; z-index:-1}
main,footer{position:relative}
a{color:var(--ice); text-decoration:none}
a:hover{color:var(--ice2)}
code{font-family:ui-monospace,Consolas,monospace; background:#0b1730; border:1px solid var(--line); border-radius:6px; padding:.1em .45em; color:var(--gold2); font-size:.92em}
h1,h2,h3{font-family:var(--serif); line-height:1.2; margin:0 0 .6em}
h2{font-size:clamp(1.7rem,3.4vw,2.4rem); color:var(--gold2); letter-spacing:.04em; text-align:center}
h2::after{content:""; display:block; width:90px; height:2px; margin:.5em auto 0; background:linear-gradient(90deg,transparent,var(--ice),transparent)}
h3{font-size:1.2rem; color:var(--ice2); letter-spacing:.03em}
.muted{color:var(--muted)}

/* navegación */
.nav{position:sticky; top:0; z-index:5; display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.8rem clamp(1rem,4vw,3rem); background:#04060ccc; backdrop-filter:blur(10px); border-bottom:1px solid var(--line)}
.brand{font-family:var(--serif); font-weight:900; font-size:1.4rem; color:var(--gold2); letter-spacing:.06em}
.brand span{color:var(--ice)}
.nav nav{display:flex; align-items:center; gap:clamp(.7rem,2vw,1.6rem); flex-wrap:wrap}
.nav nav a:not(.btn){color:var(--text); font-weight:500; font-size:.95rem}
.nav nav a:not(.btn):hover{color:var(--gold2)}

/* botones */
.btn{display:inline-block; font:600 1rem var(--sans); padding:.85em 1.7em; border-radius:10px; border:1px solid transparent; cursor:pointer; transition:transform .15s, box-shadow .15s, background .15s}
.btn:focus-visible,.copy:focus-visible,a:focus-visible{outline:2px solid var(--gold2); outline-offset:3px}
.btn-primary{background:linear-gradient(180deg,#f6cf6a,#c9962a); color:#2a1c02; box-shadow:0 6px 24px #e8b84a40}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 10px 30px #e8b84a66; color:#2a1c02}
.btn-ghost{border-color:var(--ice); color:var(--ice2); background:#5ec8ff14}
.btn-ghost:hover{background:#5ec8ff2a}
.btn-small{padding:.5em 1.1em; font-size:.9rem; background:#5ec8ff22; border-color:var(--ice); color:var(--ice2)}

/* hero */
.hero{min-height:calc(100vh - 62px); display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:2rem 1rem 3rem}
.logo-wrap{position:relative; width:min(860px,94vw)}
.logo-wrap::before{content:""; position:absolute; inset:-8% -6%; background:radial-gradient(closest-side,#2a6ccf55,transparent 72%); pointer-events:none}
.logo{position:relative; display:block; width:100%; height:auto; mix-blend-mode:screen}
.tagline{font-size:clamp(1.05rem,2.2vw,1.35rem); margin:.5rem 0 1.4rem; color:var(--text)}
.tagline strong{color:var(--gold2)}
.status{display:inline-flex; align-items:center; gap:.6em; padding:.45em 1.1em; border:1px solid var(--line); border-radius:999px; background:var(--panel); font-weight:500; margin-bottom:1.6rem}
.dot{width:.7em; height:.7em; border-radius:50%; background:var(--warn); box-shadow:0 0 10px var(--warn)}
.status.on .dot{background:var(--ok); box-shadow:0 0 12px var(--ok)}
.status.off .dot{background:var(--bad); box-shadow:0 0 12px var(--bad)}
.cta{display:flex; gap:1rem; flex-wrap:wrap; justify-content:center}
.realm{margin-top:1.5rem; color:var(--muted); font-size:.95rem}
.copy{font:500 .8rem var(--sans); margin-left:.5rem; padding:.3em .8em; border-radius:6px; border:1px solid var(--line); background:#0b1730; color:var(--ice2); cursor:pointer}
.copy:hover{border-color:var(--ice)}

/* bloques */
.block{padding:clamp(3rem,7vw,5.5rem) clamp(1rem,5vw,3rem)}
.block.alt{background:linear-gradient(180deg,transparent,#0a1226aa 20%,#0a1226aa 80%,transparent)}
.lead{max-width:760px; margin:1.4rem auto 2.4rem; text-align:center; color:var(--text)}
.cards{max-width:1100px; margin:0 auto; display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1.4rem}
.card{background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:1.6rem; transition:transform .2s, border-color .2s}
.card:hover{transform:translateY(-4px); border-color:var(--ice)}
.card p{margin:.2em 0 .8em}
.meta{font-size:.88rem; color:var(--muted)}
.emblem{width:64px; height:64px; display:grid; place-items:center; border-radius:50%; font:900 1.7rem var(--serif); margin-bottom:1rem; color:#fff;
  border:2px solid var(--gold); box-shadow:0 0 22px #e8b84a33 inset}
.emblem-panda{background:radial-gradient(circle at 30% 30%,#e9edf3,#6b7a90)}
.emblem-worgen{background:radial-gradient(circle at 30% 30%,#6f86c9,#1f2a52)}
.emblem-goblin{background:radial-gradient(circle at 30% 30%,#6fd37a,#1c5a27)}

/* pasos */
.steps{max-width:820px; margin:2.4rem auto 0; padding:0; list-style:none; display:grid; gap:1.1rem}
.steps li{display:flex; gap:1.1rem; align-items:flex-start; background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:1.1rem 1.3rem}
.steps h3{margin:0 0 .2em}
.steps p{margin:0}
.n{flex:0 0 2.4rem; height:2.4rem; display:grid; place-items:center; border-radius:50%; background:linear-gradient(180deg,#f6cf6a,#c9962a); color:#2a1c02; font:900 1.1rem var(--serif)}

/* noticias */
.news{max-width:820px; margin:2.4rem auto 0; display:grid; gap:1.3rem}
.post{background:var(--panel); border:1px solid var(--line); border-left:3px solid var(--gold); border-radius:12px; padding:1.3rem 1.5rem}
.post h3{margin:0 0 .15em; color:var(--gold2)}
.post time{font-size:.85rem; color:var(--muted); display:block; margin-bottom:.7rem}
.post p{margin:.4em 0}
.post ul{margin:.4em 0; padding-left:1.3em}
.post li{margin:.2em 0}

.account{max-width:640px; margin:2.2rem auto 0; text-align:center; background:var(--panel); border:1px dashed var(--line); border-radius:14px; padding:1.6rem}
.account p{margin:.3em 0}

footer{padding:2.5rem 1rem 3rem; text-align:center; border-top:1px solid var(--line); background:#03050a}
footer p{margin:.3em auto; max-width:760px; font-size:.9rem}

@media (max-width:640px){
  .nav nav a:not(.btn){display:none}
  .hero{min-height:auto; padding-top:1.5rem}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important}
  #snow{display:none}
}

/* ---------- cuentas, tienda y teclado de PIN ---------- */
.page{max-width:560px; margin:0 auto; padding:clamp(2.5rem,6vw,4.5rem) 1rem}
.page.wide{max-width:1100px}
.panel{background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:1.6rem}
.panel h1{font-size:1.8rem; color:var(--gold2); text-align:center; margin-bottom:1.2rem}
.field{display:grid; gap:.35rem; margin-bottom:1rem}
.field label{font-weight:500; font-size:.92rem; color:var(--ice2)}
.field input,.field select{width:100%; padding:.75em .9em; border-radius:10px; border:1px solid var(--line); background:#070d1b; color:var(--text); font:1rem var(--sans)}
.field input:focus,.field select:focus{outline:2px solid var(--ice); outline-offset:1px}
.pin-row{display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; margin:.4rem 0 1.2rem}
.pin-label{font-weight:500; color:var(--ice2)}
.pin-show{letter-spacing:.2em}
.form-msg{padding:.7em 1em; border-radius:10px; margin:.8rem 0; font-size:.95rem}
.form-msg.err{background:#3b0d12; border:1px solid #7f1d1d; color:#fecaca}
.form-msg.ok{background:#0a2e1a; border:1px solid #166534; color:#bbf7d0}
.links{text-align:center; margin-top:1.1rem; font-size:.92rem}
.links a{margin:0 .5rem}
.btn-block{width:100%; text-align:center}
button.btn:disabled{opacity:.5; cursor:not-allowed}

.pin-overlay{position:fixed; inset:0; z-index:50; background:#000000cc; display:grid; place-items:center; padding:1rem}
.pin-box{width:min(340px,100%); background:#0a1226; border:1px solid var(--ice); border-radius:18px; padding:1.4rem; box-shadow:0 20px 60px #000}
.pin-box h3{text-align:center; margin-bottom:.6rem}
.pin-dots{height:2.2rem; text-align:center; font-size:1.6rem; letter-spacing:.4em; color:var(--gold2)}
.pin-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:.6rem; margin-top:.4rem}
.pin-key{height:3.4rem; border-radius:12px; border:1px solid var(--line); background:#101b36; color:var(--text); font:600 1.4rem var(--sans); cursor:pointer}
.pin-key:hover:not(:disabled){border-color:var(--ice); background:#16264a}
.pin-key:focus-visible{outline:2px solid var(--gold2)}
.pin-ok{background:linear-gradient(180deg,#f6cf6a,#c9962a); color:#2a1c02; border-color:transparent}
.pin-key:disabled{opacity:.4; cursor:not-allowed}
.pin-hint{margin:.9rem 0 0; font-size:.8rem; color:var(--muted); text-align:center}

.shop-top{display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; margin-bottom:1.6rem}
.points{font:700 1.1rem var(--serif); color:var(--gold2)}
.shop-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:1.2rem}
.item{background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:1.2rem; display:flex; flex-direction:column; gap:.5rem; transition:border-color .2s, transform .2s}
.item:hover{border-color:var(--gold); transform:translateY(-3px)}
.item img{width:64px; height:64px; align-self:center; margin-bottom:.3rem; border-radius:10px; border:2px solid var(--gold); box-shadow:0 0 14px #e8b84a40; image-rendering:auto}
.item h3{margin:0; font-size:1.05rem; text-align:center}
.item p{margin:0; font-size:.9rem; color:var(--muted); text-align:center; flex:1}
.price{text-align:center; font-weight:700; color:var(--gold2)}
.credits{margin-top:2rem; font-size:.82rem; color:var(--muted); text-align:center}
.data-list{display:grid; grid-template-columns:auto 1fr; gap:.5rem 1rem; margin:0 0 1.2rem}
.data-list dt{color:var(--muted)}
.data-list dd{margin:0}