:root{--gold:#FFC83D;--deep:#B8791A;--ink:#070605;--cream:#FFF4D6;--ember:#FF4D6D;
--disp:Anton,"Bebas Neue","Arial Narrow Bold","Haettenschweiler",Impact,sans-serif;
--body:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
*{box-sizing:border-box;margin:0}
html{background:var(--ink);scroll-behavior:smooth}
body{min-height:100vh;color:var(--cream);font-family:var(--body);line-height:1.6;display:flex;flex-direction:column;
padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}
.bg{position:fixed;inset:-6%;z-index:-2;background:url(img/fondo.jpg) center/cover;animation:drift 38s ease-in-out infinite alternate}
.bg::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(5,5,5,.15),rgba(5,5,5,.7))}
@keyframes drift{from{transform:scale(1.02) translate(0,0)}to{transform:scale(1.14) translate(-2.5%,-2%)}}
#dust{position:fixed;inset:0;z-index:-1;width:100%;height:100%;pointer-events:none}
header,footer{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px clamp(16px,4vw,48px);flex-wrap:wrap}
header img{height:52px;width:auto;display:block}
.social{display:flex;gap:10px}
.social a{width:46px;height:46px;border-radius:50%;border:2px solid var(--gold);color:var(--gold);display:grid;place-items:center;transition:background .15s,color .15s}
.social a:hover{background:var(--gold);color:var(--ink)}
.social svg{width:22px;height:22px}
.social .t{background:var(--gold);color:var(--ink)}.social .t:hover{background:var(--cream);border-color:var(--cream)}
main{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;padding:24px 16px;text-align:center}
.hero{width:auto;max-width:86vw;max-height:42vh;height:auto;filter:drop-shadow(0 10px 40px rgba(255,200,61,.25))}
.cta{font-family:var(--disp);font-size:clamp(1.6rem,5vw,2.4rem);letter-spacing:.06em;color:var(--ink);background:linear-gradient(#FFE08A,var(--gold) 55%,var(--deep));
border:0;border-radius:999px;padding:16px 56px;cursor:pointer;box-shadow:0 6px 0 #6b4410,0 0 40px rgba(255,200,61,.35);transition:transform .08s,box-shadow .08s}
.cta:active{transform:translateY(5px);box-shadow:0 1px 0 #6b4410}
.sub{opacity:.8;max-width:34ch}
footer{font-size:.9rem;border-top:1px solid rgba(255,200,61,.25);background:rgba(5,5,5,.55)}
footer a{color:var(--gold)}footer nav{display:flex;gap:16px;flex-wrap:wrap}
:focus-visible{outline:3px solid var(--cream);outline-offset:3px}
/* juego */
.game{position:fixed;inset:0;z-index:20;background:#050505;touch-action:none}
.game[hidden]{display:none}
.game canvas{display:block;width:100%;height:100%}
.hud{position:absolute;top:calc(max(10px,env(safe-area-inset-top)) + 46px);left:18px;right:18px;display:flex;justify-content:space-between;align-items:center;font-family:var(--disp);font-size:1.5rem;color:var(--gold);letter-spacing:.05em;pointer-events:none}
.x{z-index:5;position:absolute;top:max(10px,env(safe-area-inset-top));left:50%;transform:translateX(-50%);background:none;border:2px solid var(--gold);color:var(--gold);border-radius:999px;padding:4px 16px;cursor:pointer;font:inherit;font-size:.9rem}
.panel{z-index:2;position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;padding:24px;background:#050505}
.panel[hidden]{display:none}.panel h2{font-family:var(--disp);font-weight:400;font-size:2.4rem;color:var(--gold);letter-spacing:.05em}
.panel .n{font-family:var(--disp);font-size:4.5rem;color:var(--gold);line-height:1}
/* cookies y legal */
.ck{position:fixed;left:12px;bottom:max(12px,env(safe-area-inset-bottom));z-index:10;max-width:420px;background:#14100a;border:1px solid var(--gold);border-radius:14px;padding:10px 14px;font-size:.8rem;display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.ck[hidden]{display:none}.ck a{color:var(--gold)}.ck button{margin-left:auto;background:var(--gold);color:var(--ink);border:0;border-radius:999px;padding:8px 20px;font-weight:700;cursor:pointer}
.doc{max-width:760px;margin:0 auto;padding:24px 20px 64px;background:rgba(5,5,5,.72);border-radius:16px}
.doc h1{font-family:var(--disp);font-weight:400;color:var(--gold);font-size:2.6rem;letter-spacing:.04em;margin:16px 0}
.doc h2{font-family:var(--disp);font-weight:400;color:var(--gold);font-size:1.7rem;letter-spacing:.04em;margin:40px 0 8px}
.doc p,.doc li{margin-bottom:10px}.doc ul{padding-left:22px}.doc a{color:var(--gold)}
.doc table{width:100%;border-collapse:collapse;font-size:.9rem;margin:10px 0}.doc td,.doc th{border:1px solid rgba(255,200,61,.35);padding:8px;text-align:left}
@media(prefers-reduced-motion:reduce){.bg{animation:none}html{scroll-behavior:auto}}

/* ranking */
.panel{overflow-y:auto}.panel.top{justify-content:flex-start;padding-top:max(64px,env(safe-area-inset-top))}.panel{padding-top:max(64px,env(safe-area-inset-top))}
.field{width:min(100%,320px);font:inherit;font-size:1.1rem;text-align:center;color:var(--cream);background:rgba(255,255,255,.06);border:2px solid var(--gold);border-radius:12px;padding:12px}
.field::placeholder{color:rgba(255,244,214,.5)}
.chk{display:flex;gap:10px;max-width:340px;text-align:left;font-size:.8rem;opacity:.9}.chk input{accent-color:var(--gold);width:20px;height:20px;flex:none;margin-top:2px}.chk a{color:var(--gold)}
.er{color:var(--ember);min-height:1.4em;font-size:.9rem}.how{font-size:.85rem;opacity:.7;max-width:36ch}
.ghost{background:none;border:2px solid var(--gold);color:var(--gold);border-radius:999px;padding:8px 24px;font:inherit;font-weight:700;cursor:pointer}.ghost:hover{background:var(--gold);color:var(--ink)}
.pod{display:flex;align-items:flex-end;justify-content:center;gap:8px;width:min(100%,420px);margin-top:8px}
.pd{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 4px 0;border-radius:12px 12px 0 0;position:relative;color:var(--ink);min-width:0}
.pd b{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.95rem}.pd span{font-family:var(--disp);font-size:1.5rem;letter-spacing:.04em}
.pd i{font-family:var(--disp);font-style:normal;font-size:2.6rem;opacity:.35;line-height:1;margin-top:auto}
.p1{height:170px;background:linear-gradient(#FFE08A,var(--gold) 50%,var(--deep));box-shadow:0 0 40px rgba(255,200,61,.45)}
.p2{height:140px;background:linear-gradient(#f2f2f2,#b9b9b9)}.p3{height:124px;background:linear-gradient(#e6a36b,#9a5a2b)}
.crw{width:46px;margin-top:-34px;filter:drop-shadow(0 4px 10px rgba(255,200,61,.6))}
.pd.me{outline:3px solid var(--cream)}
.lst{list-style:none;padding:0;width:min(100%,420px);display:grid;gap:6px;margin:6px 0}
.row{display:grid;grid-template-columns:36px 1fr auto;align-items:center;gap:10px;padding:9px 14px;border:1px solid rgba(255,200,61,.3);border-radius:10px;background:rgba(255,200,61,.06);text-align:left}
.row i{font-family:var(--disp);font-style:normal;color:var(--gold);font-size:1.2rem}.row b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row span{font-family:var(--disp);color:var(--gold);font-size:1.3rem}.row.me{background:var(--gold);color:var(--ink)}.row.me i,.row.me span{color:var(--ink)}