/* Gameklik — styles.css */

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
:root{
  --bg:#07070d;--s1:#0e0e1a;--s2:#151523;--s3:#1c1c2e;--s4:#252535;
  --a1:#c8f135;--a2:#7c3aed;--a3:#ff6b35;--a4:#00e5ff;--a5:#ff3da6;
  --t1:#f0f0ff;--t2:#8888aa;--t3:#3a3a55;
  --font:'Syne',sans-serif;--body:'DM Sans',sans-serif;--game:'Press Start 2P',monospace;
  --nav-h:56px;--bottom-nav-h:64px;--safe-bottom:env(safe-area-inset-bottom,0px);
}
html,body{height:100%;background:var(--bg);color:var(--t1);font-family:var(--body);overflow-x:hidden;-webkit-tap-highlight-color:transparent;-webkit-font-smoothing:antialiased;}
body::before{content:'';position:fixed;inset:0;background:repeating-linear-gradient(0deg,transparent,transparent 3px,rgba(255,255,255,.006) 3px,rgba(255,255,255,.006) 4px);pointer-events:none;z-index:0;}

/* AUTH */
#auth-screen{position:fixed;inset:0;z-index:300;background:var(--bg);display:flex;align-items:center;justify-content:center;padding:1rem;}
.auth-wrap{width:100%;max-width:420px;}
.auth-logo{font-family:var(--font);font-size:clamp(1.6rem,5vw,2.2rem);font-weight:800;letter-spacing:5px;color:var(--a1);text-align:center;margin-bottom:.2rem;}
.auth-sub{text-align:center;color:var(--t2);font-size:.78rem;letter-spacing:3px;text-transform:uppercase;margin-bottom:2rem;}
.auth-box{background:var(--s2);border:1px solid var(--t3);border-radius:18px;padding:clamp(1.2rem,4vw,2rem);}
.atabs{display:flex;gap:0;margin-bottom:1.5rem;background:var(--s3);border-radius:10px;padding:4px;}
.atab{flex:1;padding:8px;border:none;background:none;color:var(--t2);font-family:var(--body);font-size:.82rem;font-weight:600;letter-spacing:1px;text-transform:uppercase;cursor:pointer;border-radius:7px;transition:.2s;}
.atab.on{background:var(--s4);color:var(--t1);}
.aform{display:none;}.aform.on{display:block;}
.aform label{font-size:.72rem;letter-spacing:1px;color:var(--t2);text-transform:uppercase;display:block;margin-bottom:5px;margin-top:14px;}
.aform input{width:100%;background:var(--s3);border:1px solid var(--t3);border-radius:10px;color:var(--t1);font-family:var(--body);font-size:1rem;padding:11px 14px;outline:none;transition:.2s;}
.aform input:focus{border-color:var(--a1);}
.auth-error{display:none;background:rgba(255,61,61,.1);border:1px solid rgba(255,61,61,.3);color:#ff9999;font-size:.8rem;padding:9px 12px;border-radius:8px;margin-top:12px;}
.btn-auth{width:100%;margin-top:1.4rem;padding:13px;border:none;border-radius:10px;background:var(--a1);color:#000;font-family:var(--font);font-size:.82rem;font-weight:800;letter-spacing:2px;text-transform:uppercase;cursor:pointer;transition:.2s;touch-action:manipulation;}
.btn-auth:active{transform:scale(.98);}
.btn-google{width:100%;margin-top:.8rem;padding:11px;border:1px solid var(--t3);border-radius:10px;background:none;color:var(--t1);font-family:var(--body);font-size:.88rem;font-weight:500;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;transition:.2s;touch-action:manipulation;}
.btn-google:active{background:var(--s3);}
.google-icon{width:18px;height:18px;flex-shrink:0;}

/* APP */
#app-screen{display:none;flex-direction:column;min-height:100vh;min-height:100dvh;}
#top-header{position:sticky;top:0;z-index:100;background:rgba(7,7,13,.95);backdrop-filter:blur(16px);border-bottom:1px solid rgba(200,241,53,.1);display:flex;align-items:center;justify-content:space-between;padding:0 1.5rem;height:var(--nav-h);}
.logo{font-family:var(--font);font-weight:800;font-size:1.05rem;letter-spacing:4px;color:var(--a1);}
.logo span{color:var(--t2);font-weight:400;font-size:.85rem;}
.top-nav{display:flex;gap:4px;}
.top-nav .nav-btn{background:none;border:none;color:var(--t2);font-family:var(--body);font-size:.78rem;font-weight:600;letter-spacing:1px;text-transform:uppercase;padding:6px 12px;border-radius:8px;cursor:pointer;transition:.2s;}
.top-nav .nav-btn:hover{color:var(--t1);background:var(--s3);}
.top-nav .nav-btn.on{color:var(--a1);border-bottom:2px solid var(--a1);}
.header-right{display:flex;align-items:center;gap:10px;position:relative;}
.coins-badge{display:flex;align-items:center;gap:5px;padding:5px 12px;background:var(--s2);border:1px solid rgba(245,158,11,.3);border-radius:20px;cursor:pointer;transition:.2s;}
.coins-badge:hover{border-color:rgba(245,158,11,.6);background:var(--s3);}
.coins-icon{font-size:.95rem;}
.coins-amount{font-family:var(--font);font-size:.72rem;font-weight:800;color:#f59e0b;letter-spacing:1px;min-width:16px;}
.hav{width:34px;height:34px;border-radius:50%;background:var(--my-av-bg,var(--s3));border:2px solid var(--my-av-frame,var(--a1));display:flex;align-items:center;justify-content:center;font-size:1.1rem;flex-shrink:0;}
.user-menu-trigger{display:flex;align-items:center;gap:8px;cursor:pointer;padding:4px 10px 4px 4px;border-radius:20px;border:1px solid transparent;transition:.2s;}
.user-menu-trigger:hover{background:var(--s3);border-color:var(--t3);}
.hav-name{font-family:var(--font);font-size:.7rem;font-weight:700;letter-spacing:1px;color:var(--t1);max-width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.hav-chevron{font-size:.65rem;color:var(--t2);transition:transform .2s;}
.user-menu-trigger.open .hav-chevron{transform:rotate(180deg);}
.user-dropdown{display:none;position:absolute;top:calc(100% + 10px);right:0;width:220px;background:var(--s2);border:1px solid var(--t3);border-radius:12px;overflow:hidden;box-shadow:0 8px 32px rgba(0,0,0,.5);z-index:200;}
.user-dropdown.open{display:block;animation:dropIn .18s ease;}
@keyframes dropIn{from{opacity:0;transform:translateY(-8px);}to{opacity:1;transform:translateY(0);}}
.udrop-header{display:flex;align-items:center;gap:10px;padding:12px 14px;}
.udrop-av{width:38px;height:38px;border-radius:50%;background:var(--my-av-bg,var(--s3));border:2px solid var(--my-av-frame,var(--a1));display:flex;align-items:center;justify-content:center;font-size:1.2rem;flex-shrink:0;}
.udrop-name{font-family:var(--font);font-size:.75rem;font-weight:800;letter-spacing:1px;color:var(--t1);}
.udrop-coins{font-size:.68rem;color:#f59e0b;margin-top:2px;}
.udrop-lvl{font-size:.65rem;color:var(--a1);letter-spacing:1.5px;margin-top:2px;}
.udrop-divider{height:1px;background:var(--t3);margin:2px 0;}
.udrop-item{width:100%;display:flex;align-items:center;gap:10px;padding:10px 14px;background:none;border:none;color:var(--t2);font-family:var(--body);font-size:.85rem;font-weight:500;cursor:pointer;text-align:left;transition:.15s;}
.udrop-item:hover{background:var(--s3);color:var(--t1);}
.udrop-icon{font-size:1rem;width:20px;text-align:center;}
.udrop-logout{color:var(--a3);}
.udrop-logout:hover{background:rgba(255,107,53,.1);color:var(--a3);}
#main-content{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;}
#bottom-nav{display:none;position:sticky;bottom:0;background:rgba(10,10,18,.97);backdrop-filter:blur(20px);border-top:1px solid rgba(200,241,53,.1);padding-bottom:var(--safe-bottom);z-index:100;}
.bnav-inner{display:grid;grid-template-columns:repeat(5,1fr);height:var(--bottom-nav-h);}
/* Social badge en nav */
.bnav-social-badge{
  position:absolute;top:6px;right:calc(50% - 20px);
  min-width:16px;height:16px;background:var(--a5);color:#fff;
  font-size:.5rem;font-weight:800;border-radius:8px;
  display:none;align-items:center;justify-content:center;padding:0 3px;
  pointer-events:none;line-height:1;
}
.bnav-social-badge.show{display:flex;}
.bnav-btn{position:relative;}
.bnav-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;background:none;border:none;color:var(--t2);font-family:var(--body);font-size:.6rem;font-weight:600;letter-spacing:1px;text-transform:uppercase;cursor:pointer;transition:.2s;padding:0 4px;touch-action:manipulation;}
.bnav-btn .bicon{font-size:1.3rem;transition:transform .2s;}
.bnav-btn:active .bicon{transform:scale(.88);}
.bnav-btn.on{color:var(--a1);}
.bnav-btn.on .bicon{filter:drop-shadow(0 0 6px rgba(200,241,53,.5));}

/* PAGES */
.pg{display:none;padding:1.2rem;max-width:1100px;margin:0 auto;width:100%;}
.pg.on{display:block;}
.slabel{font-family:var(--font);font-size:.65rem;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--t2);margin-bottom:1rem;display:flex;align-items:center;gap:8px;}
.slabel::after{content:'';flex:1;height:1px;background:var(--t3);}

/* HOME */
.home-hero{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1.5rem;padding-top:.5rem;}
.home-top-card{display:grid;grid-template-columns:200px 1fr;gap:0;background:var(--s2);border:1px solid var(--t3);border-radius:14px;overflow:hidden;margin-bottom:0;}
.home-top-left{padding:1.4rem;border-right:1px solid var(--t3);text-align:center;transition:.2s;}
.home-top-left:hover .hmp-av{box-shadow:0 0 16px rgba(200,241,53,.3);}
.home-top-right{padding:1.4rem;}
.hmp-av{width:64px;height:64px;border-radius:50%;background:var(--my-av-bg,var(--s3));border:3px solid var(--my-av-frame,var(--a1));display:flex;align-items:center;justify-content:center;font-size:1.8rem;margin:0 auto .7rem;}
.hmp-name{font-family:var(--font);font-size:.85rem;font-weight:800;letter-spacing:2px;margin-bottom:3px;text-align:center;}
.hmp-lvl{display:inline-block;padding:2px 10px;background:rgba(200,241,53,.1);border:1px solid rgba(200,241,53,.25);border-radius:20px;font-size:.65rem;font-weight:700;letter-spacing:2px;color:var(--a1);margin-bottom:.3rem;}
.hmp-emb{width:40px;height:40px;background:var(--s3);border:2px solid var(--a3);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:1.3rem;margin:.4rem auto .3rem;}
.hmp-stat{display:flex;justify-content:space-between;align-items:center;padding:4px 0;border-bottom:1px solid var(--t3);}
.hmp-stat:last-child{border-bottom:none;}
.hmp-stat-v{font-family:var(--font);font-size:.9rem;font-weight:800;}
.hmp-stat-l{font-size:.68rem;color:var(--t2);letter-spacing:1px;text-transform:uppercase;}
.pcard:hover .hmp-av{box-shadow:0 0 16px rgba(200,241,53,.3);}
.home-greeting{font-family:var(--font);font-size:clamp(1rem,3vw,1.4rem);font-weight:800;letter-spacing:2px;}
.home-sub{color:var(--t2);font-size:.82rem;margin-top:3px;}
.home-emblem{width:52px;height:52px;background:var(--s3);border:2px solid var(--a3);border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1.7rem;flex-shrink:0;}
.qstats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:1.5rem;}
.qs{background:var(--s2);border:1px solid var(--t3);border-radius:12px;padding:.9rem .5rem;text-align:center;transition:.2s;}
.qs:hover{border-color:var(--a1);transform:translateY(-2px);}
.qs .v{font-family:var(--font);font-size:clamp(1.2rem,3vw,1.7rem);font-weight:800;}
.qs .l{font-size:.65rem;letter-spacing:1.5px;text-transform:uppercase;color:var(--t2);margin-top:3px;}
.c1{color:var(--a1)}.c2{color:var(--a4)}.c3{color:var(--a3)}.c4{color:var(--a2)}

/* GAME CARDS */
.games-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;}
.gcard{background:var(--s2);border:1px solid var(--t3);border-radius:14px;overflow:hidden;cursor:pointer;transition:.25s;position:relative;}
.gcard.locked{opacity:.55;cursor:not-allowed;}
.gcard.locked:hover{transform:none;border-color:var(--t3);box-shadow:none;}
.gcard.playable{border-color:rgba(200,241,53,.2);}
.gcard.playable:hover{border-color:var(--a1);transform:translateY(-3px);box-shadow:0 12px 40px rgba(200,241,53,.1);}
.gthumb{height:110px;display:flex;align-items:center;justify-content:center;font-size:2.8rem;position:relative;}
.play-badge{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);background:var(--a1);color:#000;font-family:var(--font);font-size:.55rem;font-weight:800;padding:3px 10px;border-radius:20px;letter-spacing:1px;white-space:nowrap;}
.gbg1{background:linear-gradient(135deg,#0d0d2b,#1e1040);}
.gbg2{background:linear-gradient(135deg,#0d1f0d,#0a3020);}
.gbg4{background:linear-gradient(135deg,#1a0d1f,#2d0f3a);}
.gbg5{background:linear-gradient(135deg,#1a1200,#3a2800);}
.gbg6{background:linear-gradient(135deg,#001a1f,#003040);}
.ginfo{padding:.85rem 1rem;}
.gtag{display:inline-block;padding:2px 8px;border-radius:20px;font-size:.62rem;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:.4rem;}
.tag-p{background:rgba(108,60,225,.2);color:#a78bfa;border:1px solid rgba(108,60,225,.3);}
.tag-a{background:rgba(0,229,255,.12);color:var(--a4);border:1px solid rgba(0,229,255,.25);}
.tag-s{background:rgba(255,107,53,.15);color:var(--a3);border:1px solid rgba(255,107,53,.25);}
.tag-w{background:rgba(200,241,53,.1);color:var(--a1);border:1px solid rgba(200,241,53,.2);}
.tag-t{background:rgba(255,61,166,.12);color:var(--a5);border:1px solid rgba(255,61,166,.25);}
.gname{font-family:var(--font);font-size:.84rem;font-weight:700;letter-spacing:1px;margin-bottom:3px;}
.gdesc{font-size:.75rem;color:var(--t2);line-height:1.4;}
.gcoming{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(7,7,13,.65);}
.gcoming span{font-family:var(--font);font-size:.65rem;font-weight:700;letter-spacing:3px;color:var(--t2);border:1px solid var(--t3);padding:4px 12px;border-radius:20px;}

/* PROFILE */
.prof-wrap{display:grid;grid-template-columns:240px 1fr;gap:1.2rem;}
.pcard{background:var(--s2);border:1px solid var(--t3);border-radius:14px;padding:1.4rem;text-align:center;}
.av-wrap{position:relative;width:84px;height:84px;margin:0 auto 1rem;}
.av{width:84px;height:84px;border-radius:50%;background:var(--my-av-bg,var(--s3));border:3px solid var(--my-av-frame,var(--a1));display:flex;align-items:center;justify-content:center;font-size:2.3rem;cursor:pointer;transition:.2s;}
.av:hover{box-shadow:0 0 20px rgba(200,241,53,.3);}
.av-btn{position:absolute;bottom:0;right:0;width:24px;height:24px;background:var(--a1);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.65rem;cursor:pointer;color:#000;font-weight:700;}
.pname{font-family:var(--font);font-size:1rem;font-weight:800;letter-spacing:2px;margin-bottom:4px;}
.ptitle{display:inline-block;padding:2px 10px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:20px;font-size:.62rem;font-weight:700;letter-spacing:1.5px;color:var(--t2);margin-bottom:.4rem;text-transform:uppercase;}
.plvl{display:inline-block;padding:3px 12px;background:rgba(200,241,53,.1);border:1px solid rgba(200,241,53,.25);border-radius:20px;font-size:.68rem;font-weight:700;letter-spacing:2px;color:var(--a1);margin-bottom:.4rem;}
.sp-titles-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:.5rem;margin-top:.5rem;}
.sp-title-card{background:var(--s3);border:1px solid var(--t3);border-radius:10px;padding:.6rem .5rem;text-align:center;cursor:pointer;transition:.2s;}
.sp-title-card:hover{border-color:var(--a1);background:var(--s2);}
.sp-title-card.sp-active{border-color:var(--a1);background:rgba(200,241,53,.08);}
.sp-tname{font-family:var(--font);font-size:.72rem;font-weight:700;letter-spacing:1px;color:var(--t1);margin-bottom:4px;}
.emblbl{font-size:.62rem;letter-spacing:2px;text-transform:uppercase;color:var(--t2);margin-bottom:6px;}
.emb{width:56px;height:56px;margin:0 auto;background:var(--s3);border:2px solid var(--a3);border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1.8rem;cursor:pointer;transition:.2s;}
.emb:hover{box-shadow:0 0 16px rgba(255,107,53,.3);}
.xpbar{background:var(--s4);border-radius:20px;height:5px;margin:.8rem 0 4px;overflow:hidden;}
.xpfill{height:100%;background:linear-gradient(90deg,var(--a1),var(--a4));border-radius:20px;transition:width .6s;}
.xptxt{font-size:.68rem;color:var(--t2);}
.pbtns{display:flex;gap:8px;justify-content:center;margin-top:1rem;}
.icard{background:var(--s2);border:1px solid var(--t3);border-radius:12px;padding:1.2rem;margin-bottom:1rem;}
.icard h3{font-family:var(--font);font-size:.65rem;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--t2);margin-bottom:1rem;}
.slist{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.si{background:var(--s3);border-radius:8px;padding:.7rem .8rem;}
.si .v{font-family:var(--font);font-size:1.05rem;font-weight:800;}
.si .l{font-size:.66rem;letter-spacing:1px;color:var(--t2);text-transform:uppercase;margin-top:2px;}
.hgicon{font-size:1.1rem;line-height:1;flex-shrink:0;}
.best-rank-badge{display:inline-block;font-size:.68rem;font-weight:700;padding:3px 10px;border-radius:20px;letter-spacing:.5px;background:var(--s3);color:var(--t2);border:1px solid var(--t3);}
.best-rank-badge.gold{background:rgba(240,208,96,.12);color:#f0d060;border-color:rgba(240,208,96,.3);}
.best-rank-badge.silver{background:rgba(192,200,216,.1);color:#c0c8d8;border-color:rgba(192,200,216,.25);}
.best-rank-badge.bronze{background:rgba(205,136,85,.12);color:#cd8855;border-color:rgba(205,136,85,.3);}
.hrow{display:flex;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid var(--t3);}
.hgname{flex:1;font-size:.78rem;color:var(--t2);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.hrecord-wrap{display:flex;align-items:center;gap:6px;flex-shrink:0;}
.rank-badge{font-size:.62rem;font-weight:700;padding:2px 7px;border-radius:20px;letter-spacing:.5px;background:var(--s3);color:var(--t2);border:1px solid var(--t3);}
.rank-badge.gold{background:rgba(240,208,96,.12);color:#f0d060;border-color:rgba(240,208,96,.3);}
.rank-badge.silver{background:rgba(192,200,216,.1);color:#c0c8d8;border-color:rgba(192,200,216,.25);}
.rank-badge.bronze{background:rgba(205,136,85,.12);color:#cd8855;border-color:rgba(205,136,85,.3);}
.hrow:last-child{border-bottom:none;}
.htag{padding:3px 8px;border-radius:4px;font-size:.62rem;font-weight:700;letter-spacing:1px;}
.hscore{font-family:var(--font);font-size:.82rem;color:var(--a1);font-weight:800;}
.hdate{font-size:.7rem;color:var(--t2);}
.empty-msg{color:var(--t2);font-size:.82rem;}

/* ACHIEVEMENTS */
/* ── Achievement sections ── */
.ach-section{background:var(--s2);border:1px solid var(--t3);border-radius:12px;overflow:hidden;margin-bottom:10px;transition:border-color .2s;}
.ach-section.open{border-color:rgba(200,241,53,.2);}
.ach-sec-header{display:flex;align-items:center;justify-content:space-between;padding:.9rem 1.1rem;cursor:pointer;gap:1rem;user-select:none;transition:background .15s;}
.ach-sec-header:hover{background:var(--s3);}
.ach-sec-left{display:flex;align-items:center;gap:10px;min-width:0;}
.ach-sec-title{font-family:var(--font);font-size:.78rem;font-weight:700;letter-spacing:1px;color:var(--t1);white-space:nowrap;}
.ach-sec-count{font-size:.7rem;color:var(--t2);white-space:nowrap;}
.ach-sec-right{display:flex;align-items:center;gap:8px;flex-shrink:0;}
.ach-sec-bar-wrap{width:80px;height:4px;background:var(--s4);border-radius:20px;overflow:hidden;}
.ach-sec-bar{height:100%;background:linear-gradient(90deg,var(--a1),var(--a4));border-radius:20px;transition:width .4s;}
.ach-sec-pct{font-size:.68rem;color:var(--a1);font-weight:700;min-width:28px;text-align:right;}
.ach-sec-chevron{font-size:.65rem;color:var(--t2);transition:transform .25s;}
.ach-section.open .ach-sec-chevron{transform:rotate(180deg);}
.ach-sec-body{display:none;padding:0 1rem 1rem;}
.ach-section.open .ach-sec-body{display:block;}
.ach-grid-inner{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px;padding-top:.8rem;}
/* ── Achievement cards ── */
.ach{background:var(--s3);border:1px solid var(--t3);border-radius:10px;padding:.85rem .7rem;text-align:center;transition:.2s;position:relative;overflow:hidden;}
.ach.got{border-color:rgba(200,241,53,.3);background:var(--s3);}
.ach.got:hover{transform:translateY(-2px);box-shadow:0 4px 16px rgba(200,241,53,.08);}
.ach.got::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--a1),var(--a4));}
.aicon{font-size:1.6rem;margin-bottom:.4rem;}
.ach:not(.got) .aicon{filter:grayscale(1);opacity:.3;}
.aname{font-size:.72rem;font-weight:700;color:var(--t2);}
.ach.got .aname{color:var(--t1);}
.adesc{font-size:.64rem;color:var(--t3);margin-top:3px;line-height:1.4;}
.ach.got .adesc{color:var(--t2);}
.alock{font-size:.75rem;color:var(--t3);margin-top:4px;}

/* RANKING */
.lb-tabs{display:flex;gap:6px;margin-bottom:1rem;flex-wrap:wrap;}
.lb-tab{padding:6px 12px;border-radius:20px;border:1px solid var(--t3);background:none;color:var(--t2);font-family:var(--body);font-size:.75rem;font-weight:600;letter-spacing:.5px;cursor:pointer;transition:.2s;touch-action:manipulation;}
.lb-tab:hover{border-color:var(--a1);color:var(--t1);}
.lb-tab.on{background:rgba(200,241,53,.1);border-color:var(--a1);color:var(--a1);}
.lb-wrap{background:var(--s2);border:1px solid var(--t3);border-radius:12px;overflow:hidden;}
.lbrow{display:flex;align-items:center;gap:12px;padding:.75rem 1rem;transition:.15s;}
.lbrow:hover{background:var(--s3);}
.lbrow.me{background:rgba(200,241,53,.04);border-left:2px solid var(--a1);}
.lbrow+.lbrow{border-top:1px solid var(--t3);}
.lrank{font-family:var(--font);font-size:.85rem;font-weight:800;min-width:26px;text-align:center;}
.lrank.g{color:#f0d060;}.lrank.s{color:#c0c8d8;}.lrank.b{color:#cd8855;}
.lname{flex:1;font-size:.88rem;font-weight:600;}
.lscore{font-family:var(--font);font-size:.82rem;color:var(--a1);}
.lbadge{font-size:.6rem;padding:2px 6px;border-radius:20px;background:rgba(200,241,53,.1);color:var(--a1);border:1px solid rgba(200,241,53,.2);margin-left:6px;}
.lb-empty{padding:2rem;text-align:center;color:var(--t2);font-size:.85rem;}

/* BUTTONS */
.btn{padding:8px 18px;border-radius:8px;font-family:var(--body);font-size:.76rem;font-weight:700;letter-spacing:1px;text-transform:uppercase;cursor:pointer;transition:.2s;border:none;touch-action:manipulation;}
.btn-p{background:var(--a1);color:#000;}
.btn-p:active{opacity:.9;transform:scale(.98);}
.btn-s{background:none;border:1px solid var(--t3);color:var(--t2);}
.btn-s:hover{border-color:var(--a1);color:var(--t1);}

/* MODALS */
.moverlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.8);z-index:200;align-items:center;justify-content:center;padding:1rem;}
.moverlay.on{display:flex;}
.mbox{background:var(--s2);border:1px solid rgba(200,241,53,.2);border-radius:16px;padding:1.5rem;width:100%;max-width:380px;max-height:90vh;overflow-y:auto;}
.mbox h3{font-family:var(--font);font-size:.82rem;font-weight:800;letter-spacing:3px;text-transform:uppercase;margin-bottom:1.2rem;color:var(--a1);}
.picker{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-bottom:1rem;}
.picker.em{grid-template-columns:repeat(4,1fr);}
.popt{font-size:1.7rem;padding:.45rem;border-radius:8px;border:2px solid transparent;cursor:pointer;text-align:center;background:var(--s3);transition:.15s;touch-action:manipulation;}
.popt:hover,.popt.on{border-color:var(--a1);}
.popt.em-opt:hover,.popt.em-opt.on{border-color:var(--a3);}
.mbox label{font-size:.72rem;color:var(--t2);display:block;margin-bottom:5px;letter-spacing:1px;}
.mbox input{width:100%;background:var(--s3);border:1px solid var(--t3);border-radius:8px;color:var(--t1);font-family:var(--body);font-size:.95rem;padding:10px 12px;margin-bottom:1rem;outline:none;transition:.2s;}
.mbox input:focus{border-color:var(--a1);}
.mbtns{display:flex;gap:8px;justify-content:flex-end;}

/* ══ TRETIS FEKA ══ */
#pg-tretis{padding:.8rem;max-width:100%;}
.tretis-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.8rem;gap:.5rem;flex-wrap:wrap;}
.tretis-header h2{font-family:var(--font);font-size:.85rem;font-weight:800;letter-spacing:3px;color:var(--a1);}
.tretis-back{background:none;border:1px solid var(--t3);color:var(--t2);font-family:var(--body);font-size:.72rem;font-weight:600;padding:5px 12px;border-radius:8px;cursor:pointer;letter-spacing:1px;transition:.2s;touch-action:manipulation;}
.tretis-back:hover{border-color:var(--a1);color:var(--t1);}
.tretis-wrap{display:flex;gap:12px;align-items:flex-start;justify-content:center;}
.tretis-side{display:flex;flex-direction:column;gap:10px;width:90px;flex-shrink:0;}
.tretis-side.right{width:90px;}
.t-panel{background:var(--s2);border:1px solid var(--t3);border-radius:10px;padding:10px;}
.t-plabel{font-family:var(--game);font-size:6px;color:var(--t2);letter-spacing:2px;margin-bottom:8px;text-transform:uppercase;}
.t-pval{font-family:var(--game);font-size:13px;color:var(--t1);text-shadow:0 0 10px rgba(200,241,53,.4);}
#t-level{font-family:var(--game);font-size:18px;color:var(--a3);text-shadow:0 0 10px var(--a3);text-align:center;font-weight:bold;}
#t-canvas-wrap{position:relative;flex-shrink:0;}
#t-canvas{display:block;border:2px solid rgba(200,241,53,.2);border-radius:4px;image-rendering:pixelated;box-shadow:0 0 40px rgba(200,241,53,.08),inset 0 0 40px rgba(0,0,20,.8);}
#t-flash{position:absolute;left:0;right:0;background:rgba(255,255,100,.25);pointer-events:none;transition:opacity .3s;opacity:0;border-radius:2px;}
#t-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:rgba(0,0,10,.88);border-radius:4px;}
.t-ov-box{display:flex;flex-direction:column;align-items:center;gap:12px;padding:1.5rem;}
.t-ov-title{font-family:var(--game);font-size:clamp(10px,2.5vw,16px);color:var(--a1);text-shadow:0 0 20px var(--a1);letter-spacing:3px;text-align:center;line-height:1.8;}
.t-ov-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%;}
.t-ov-stat{background:var(--s3);border-radius:8px;padding:.6rem;text-align:center;}
.t-ov-val{font-family:var(--game);font-size:clamp(10px,2vw,14px);color:var(--a1);display:block;margin-bottom:3px;}
.t-ov-lbl{font-family:var(--game);font-size:6px;color:var(--t2);letter-spacing:1px;text-transform:uppercase;}
.t-ov-intro{font-family:var(--game);font-size:6px;color:var(--t2);text-align:center;line-height:2.2;max-width:220px;}
.t-btn{background:rgba(200,241,53,.15);border:1px solid rgba(200,241,53,.4);color:var(--a1);font-family:var(--game);font-size:9px;padding:10px 20px;border-radius:6px;cursor:pointer;letter-spacing:2px;transition:.2s;touch-action:manipulation;}
.t-btn:active{transform:scale(.97);}
.t-btn-sec{background:rgba(255,255,255,.05);border-color:var(--t3);color:var(--t2);}
#t-hold{display:block;width:70px;height:70px;image-rendering:pixelated;}
.q-canvas{display:block;width:70px;height:44px;image-rendering:pixelated;}
.t-ctrl-row{display:flex;justify-content:space-between;font-family:var(--game);font-size:5px;color:var(--t2);margin-bottom:5px;gap:4px;}
.t-ctrl-key{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);border-radius:3px;padding:2px 4px;color:rgba(255,255,255,.65);font-size:5px;}
.t-leg-row{display:flex;align-items:center;gap:6px;font-family:var(--game);font-size:5px;color:var(--t2);margin-bottom:4px;}
.t-leg-dot{width:10px;height:10px;border-radius:2px;flex-shrink:0;}

/* Touch controls (móvil) */
.t-touch-btns{display:none;gap:8px;justify-content:center;margin-top:10px;flex-wrap:wrap;}
.t-touch-row{display:flex;gap:8px;justify-content:center;}
.t-tch{width:52px;height:52px;background:rgba(200,241,53,.08);border:1px solid rgba(200,241,53,.25);border-radius:10px;color:var(--a1);font-size:1.3rem;display:flex;align-items:center;justify-content:center;cursor:pointer;touch-action:manipulation;user-select:none;}
.t-tch:active{background:rgba(200,241,53,.2);}

/* TOAST */
#toast{
  position:fixed;top:calc(var(--nav-h) + 10px);right:1rem;
  background:var(--s3);border:1px solid var(--a1);color:var(--a1);
  padding:10px 16px 10px 12px;border-radius:10px;
  font-size:.78rem;font-weight:700;letter-spacing:1px;
  z-index:400;pointer-events:none;
  display:flex;align-items:center;gap:8px;
  max-width:280px;
  opacity:0;transform:translateX(110%);
  transition:opacity .3s ease, transform .3s ease;
}
#toast.on{opacity:1;transform:translateX(0);}
#toast.hiding{opacity:0;transform:translateX(110%);}
#toast-bar{
  position:absolute;bottom:0;left:0;height:3px;
  background:var(--a1);border-radius:0 0 10px 10px;
  width:100%;transform-origin:left;
}

/* ══ RESPONSIVE ══ */
@media(max-width:639px){
  #top-header{display:none;}
  #bottom-nav{display:block;}
  .pg{padding:1rem .9rem;}
  .home-hero{margin-bottom:1rem;}
  .home-top-card{grid-template-columns:1fr;}
  .home-top-left{border-right:none;border-bottom:1px solid var(--t3);}
  .qstats{grid-template-columns:repeat(2,1fr);gap:8px;}
  .games-grid{grid-template-columns:1fr 1fr;gap:8px;}
  .gthumb{height:80px;font-size:2rem;}
  .prof-wrap{grid-template-columns:1fr;}
  .slist{grid-template-columns:repeat(3,1fr);}
  .ach-grid-inner{grid-template-columns:repeat(2,1fr);}
  .lb-tabs{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px;-webkit-overflow-scrolling:touch;}
  .lb-tabs::-webkit-scrollbar{display:none;}
  .lb-tab{white-space:nowrap;flex-shrink:0;}
  /* Tretis móvil */
  #pg-tretis{padding:.5rem;}
  .tretis-side{width:70px;}
  .tretis-side.right{width:70px;}
  .t-panel{padding:6px;}
  .t-plabel{font-size:5px;}
  .t-pval{font-size:11px;}
  #t-level{font-size:14px;}
  #t-hold{width:56px;height:56px;}
  .q-canvas{width:56px;height:34px;}
  .t-ctrl-row{display:none;}
  .t-touch-btns{display:flex;}
}
@media(min-width:640px) and (max-width:1023px){
  #top-header{display:flex;}
  #bottom-nav{display:none;}
  .pg{padding:1.3rem;}
  .hav-name{display:none;}
  .home-top-card{grid-template-columns:180px 1fr;}
  .qstats{grid-template-columns:repeat(4,1fr);}
  .games-grid{grid-template-columns:repeat(2,1fr);}
  .prof-wrap{grid-template-columns:220px 1fr;}
  .ach-grid-inner{grid-template-columns:repeat(3,1fr);}
}
@media(min-width:1024px){
  #top-header{display:flex;}
  #bottom-nav{display:none;}
  .pg{padding:1.5rem 2rem;}
  .hav-name{display:block;}
  .games-grid{grid-template-columns:repeat(3,1fr);}
  .ach-grid-inner{grid-template-columns:repeat(4,1fr);}
  .prof-wrap{grid-template-columns:260px 1fr;}
  .gthumb{height:120px;font-size:3rem;}
}
@media(min-width:1400px){
  .games-grid{grid-template-columns:repeat(4,1fr);}
}

/* ── Modales anchos ── */
.mbox-wide{max-width:560px;}

/* ── Configuración ── */
.cfg-section{padding:.5rem 0;}
.cfg-label{font-family:var(--font);font-size:.72rem;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:var(--t1);margin-bottom:.3rem;}
.cfg-desc{font-size:.8rem;color:var(--t2);line-height:1.5;margin-bottom:.6rem;}
.cfg-note{font-size:.72rem;color:var(--t3);line-height:1.5;margin-top:.5rem;font-style:italic;}
.cfg-lang-btns{display:flex;gap:8px;flex-wrap:wrap;}
.cfg-lang-btn{padding:7px 18px;border-radius:20px;border:1px solid var(--t3);background:none;color:var(--t2);font-family:var(--body);font-size:.8rem;font-weight:600;cursor:pointer;transition:.2s;touch-action:manipulation;}
.cfg-lang-btn:hover{border-color:var(--a1);color:var(--t1);}
.cfg-lang-btn.on{background:rgba(200,241,53,.12);border-color:var(--a1);color:var(--a1);}
.cfg-divider{height:1px;background:var(--t3);margin:.6rem 0;}
.cfg-row{display:flex;align-items:center;gap:1rem;justify-content:space-between;}
.cfg-row-left{flex:1;}
.cfg-row-left .cfg-desc{margin-bottom:0;}
/* Toggle switch */
.cfg-toggle{
  flex-shrink:0;
  width:44px;height:24px;border-radius:12px;
  background:var(--t3);border:none;cursor:pointer;
  position:relative;transition:background .2s;
  touch-action:manipulation;
}
.cfg-toggle.active{background:var(--a1);}
.cfg-toggle-knob{
  position:absolute;top:3px;left:3px;
  width:18px;height:18px;border-radius:50%;
  background:#fff;transition:transform .2s, background .2s;
  display:block;pointer-events:none;
}
.cfg-toggle.active .cfg-toggle-knob{transform:translateX(20px);background:#000;}

/* ── Ayuda — acordeón ── */
.help-section{border:1px solid var(--t3);border-radius:10px;margin-bottom:6px;overflow:hidden;}
.help-section.open{border-color:rgba(200,241,53,.22);}
.help-header{display:flex;align-items:center;gap:10px;padding:.8rem 1rem;cursor:pointer;user-select:none;transition:.15s;}
.help-header:hover{background:var(--s3);}
.help-section.open .help-header{background:var(--s3);}
.help-icon{font-size:1.05rem;flex-shrink:0;}
.help-title{font-family:var(--font);font-size:.7rem;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:var(--t1);flex:1;}
.help-chevron{font-size:.65rem;color:var(--t2);transition:transform .25s;flex-shrink:0;}
.help-section.open .help-chevron{transform:rotate(180deg);}
.help-body{display:none;padding:.4rem 1rem 1rem;font-size:.82rem;color:var(--t2);line-height:1.65;}
.help-section.open .help-body{display:block;}
.help-body strong{color:var(--t1);}
.help-game-entry{margin-bottom:.9rem;padding-bottom:.9rem;border-bottom:1px solid var(--t3);}
.help-game-entry:last-child{margin-bottom:0;padding-bottom:0;border-bottom:none;}
.help-game-title{font-family:var(--font);font-size:.67rem;font-weight:800;letter-spacing:2px;color:var(--a1);margin-bottom:.35rem;}
.faq-entry{margin-bottom:.75rem;padding-bottom:.75rem;border-bottom:1px solid var(--t3);}
.faq-entry:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0;}
.faq-q{font-weight:700;color:var(--t1);font-size:.82rem;margin-bottom:.22rem;}
.faq-a{color:var(--t2);font-size:.8rem;}
.help-contact-link{display:inline-block;margin-top:.55rem;color:var(--a1);font-weight:600;font-size:.85rem;text-decoration:none;border-bottom:1px solid rgba(200,241,53,.3);padding-bottom:2px;transition:.15s;}
.help-contact-link:hover{border-bottom-color:var(--a1);}

/* ── SHOP ── */
.mbox-shop{max-width:540px;}
.shop-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem;}
.shop-hdr h3{margin-bottom:0;}
.mclose{background:none;border:none;color:var(--t2);font-size:1.15rem;cursor:pointer;padding:4px 8px;border-radius:6px;transition:.15s;line-height:1;}
.mclose:hover{color:var(--t1);background:var(--s3);}
.shop-tabs{display:flex;background:var(--s3);border-radius:10px;padding:3px;margin-bottom:1.2rem;}
.shop-tab{flex:1;padding:7px;border:none;background:none;color:var(--t2);font-family:var(--body);font-size:.8rem;font-weight:600;letter-spacing:.5px;cursor:pointer;border-radius:7px;transition:.2s;touch-action:manipulation;}
.shop-tab.on{background:var(--s4);color:var(--t1);}
.shop-panel{display:none;}
.shop-panel.on{display:block;}
.shop-bal-row{display:flex;align-items:center;justify-content:space-between;background:var(--s3);border-radius:10px;padding:.6rem 1rem;margin-bottom:1rem;}
.shop-bal-lbl{font-size:.72rem;color:var(--t2);}
.shop-bal-val{font-family:var(--font);font-size:.88rem;font-weight:800;color:#f59e0b;}
/* Coin packs grid */
.sp-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-bottom:.8rem;}
@media(min-width:460px){.sp-grid{grid-template-columns:repeat(3,1fr);}}
.sp-card{background:var(--s3);border:1.5px solid var(--t3);border-radius:12px;padding:.8rem .6rem;text-align:center;position:relative;overflow:hidden;transition:.2s;}
.sp-card:hover{border-color:rgba(200,241,53,.25);transform:translateY(-1px);}
.sp-card.sp-pop{border-color:rgba(200,241,53,.35);background:rgba(200,241,53,.03);}
.sp-card.sp-deal{border-color:rgba(255,107,53,.45);background:rgba(255,107,53,.04);}
.sp-card.sp-best{border-color:rgba(245,158,11,.45);background:rgba(245,158,11,.04);}
.sp-bdg{display:inline-block;font-size:.52rem;font-weight:800;letter-spacing:.8px;padding:2px 7px;border-radius:20px;margin-bottom:.35rem;}
.sp-bdg-pop{background:rgba(200,241,53,.12);color:var(--a1);border:1px solid rgba(200,241,53,.25);}
.sp-bdg-deal{background:rgba(255,107,53,.15);color:var(--a3);border:1px solid rgba(255,107,53,.3);}
.sp-bdg-best{background:rgba(245,158,11,.15);color:#f59e0b;border:1px solid rgba(245,158,11,.3);}
.sp-bdg-x2{background:rgba(255,107,53,.2);color:var(--a3);border:1px solid rgba(255,107,53,.35);}
.sp-amt{font-family:var(--font);font-size:.95rem;font-weight:800;color:#f59e0b;margin-bottom:.15rem;}
.sp-x2-hint{font-size:.58rem;color:var(--t3);text-decoration:line-through;margin-bottom:.1rem;}
.sp-lbl{font-size:.62rem;letter-spacing:1.5px;text-transform:uppercase;color:var(--t2);margin-bottom:.2rem;}
.sp-bonus{font-size:.6rem;color:var(--a1);font-weight:700;margin-bottom:.2rem;letter-spacing:.5px;}
.sp-price{font-family:var(--font);font-size:.88rem;font-weight:800;color:var(--t1);margin-bottom:.1rem;}
.sp-btn{width:100%;font-size:.62rem;padding:6px 0;margin-top:.2rem;}
.offer-banner{display:flex;align-items:center;justify-content:space-between;background:linear-gradient(135deg,rgba(255,107,53,.18),rgba(255,61,166,.1));border:1px solid rgba(255,107,53,.5);border-radius:10px;padding:.65rem 1rem;margin-bottom:.75rem;gap:.5rem;flex-wrap:wrap;}
.offer-banner-txt{font-family:var(--font);font-size:.75rem;font-weight:800;letter-spacing:1px;color:var(--a3);}
.offer-banner-cd{font-size:.7rem;color:var(--a3);font-weight:700;font-variant-numeric:tabular-nums;}
.next-offer-bar{display:flex;align-items:center;justify-content:space-between;background:var(--s3);border:1px solid var(--t3);border-radius:10px;padding:.5rem 1rem;margin-bottom:.75rem;gap:.5rem;font-size:.72rem;color:var(--t2);}
.next-offer-cd{font-weight:700;color:var(--t1);font-variant-numeric:tabular-nums;}
.shop-note{font-size:.7rem;color:var(--t3);text-align:center;line-height:1.5;padding:.4rem 0;}
/* Cosmetics */
.shop-cosm-title{font-family:var(--font);font-size:.65rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--t2);margin-bottom:.8rem;}
.shop-prev-wrap{display:flex;flex-direction:column;align-items:center;gap:.4rem;margin-bottom:1rem;}
.shop-prev{width:76px;height:76px;border-radius:50%;border:3px solid var(--my-av-frame,var(--a1));display:flex;align-items:center;justify-content:center;font-size:2.1rem;transition:background .3s;}
.shop-prev-hint{font-size:.64rem;color:var(--t3);letter-spacing:.5px;}
.sp-bg-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-bottom:.8rem;}
@media(min-width:380px){.sp-bg-grid{grid-template-columns:repeat(4,1fr);}}
@media(min-width:480px){.sp-bg-grid{grid-template-columns:repeat(5,1fr);}}
.sp-color{border-radius:10px;padding:.55rem .35rem;text-align:center;cursor:pointer;border:2px solid transparent;transition:.2s;min-height:66px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;}
.sp-color:hover{border-color:rgba(255,255,255,.25);transform:translateY(-1px);}
.sp-color.sp-active{border-color:var(--a1);}
.sp-cname{font-size:.58rem;font-weight:700;color:rgba(255,255,255,.75);letter-spacing:.3px;}
.sp-ccheck{font-size:.8rem;color:var(--a1);}
.sp-cprice{font-size:.56rem;color:rgba(255,255,255,.55);background:rgba(0,0,0,.35);padding:1px 5px;border-radius:6px;}
.sp-cowned{font-size:.56rem;color:rgba(255,255,255,.45);}
/* Avatar modal bg section */
.av-bg-section{margin-top:.9rem;padding-top:.8rem;border-top:1px solid var(--t3);}
.av-bg-lbl{font-size:.65rem;letter-spacing:2px;text-transform:uppercase;color:var(--t2);margin-bottom:.55rem;}
.av-bg-swatches{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:.55rem;}
.av-bg-swatch{width:34px;height:34px;border-radius:50%;border:2px solid transparent;cursor:pointer;transition:.2s;flex-shrink:0;}
.av-bg-swatch:hover,.av-bg-swatch.active{border-color:var(--a1);transform:scale(1.1);}
.av-frame-swatch{width:34px;height:34px;border-radius:50%;background:var(--s3);border:3px solid #c8f135;cursor:pointer;transition:.2s;flex-shrink:0;}
.av-frame-swatch:hover{opacity:.8;transform:scale(1.1);}
.av-frame-swatch.active{box-shadow:0 0 0 2px var(--t1);transform:scale(1.1);}
.sp-frame-swatch{border-width:3px;}

#cookie-banner {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 9999;
  background: rgba(14,14,26,.97); border-top: 1px solid rgba(200,241,53,.2);
  backdrop-filter: blur(16px);
  padding: 1rem 1.5rem;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  transform: translateY(100%);
  transition: transform .35s cubic-bezier(.4,0,.2,1);
}
#cookie-banner.visible { transform: translateY(0); }
.cookie-text { font-family:"DM Sans",sans-serif; font-size:.82rem; color:#8888aa; line-height:1.6; flex:1; min-width:200px; }
.cookie-text a { color:#c8f135; text-decoration:none; }
.cookie-text a:hover { text-decoration:underline; }
.cookie-text strong { color:#f0f0ff; }
.cookie-btns { display:flex; gap:.6rem; flex-shrink:0; flex-wrap:wrap; }
.cookie-btn-accept { background:#c8f135; color:#000; font-family:"Syne",sans-serif; font-size:.72rem; font-weight:800; letter-spacing:2px; padding:8px 20px; border-radius:8px; border:none; cursor:pointer; transition:.2s; white-space:nowrap; }
.cookie-btn-accept:hover { opacity:.88; transform:scale(1.02); }
.cookie-btn-reject { background:transparent; color:#8888aa; font-family:"Syne",sans-serif; font-size:.72rem; font-weight:700; letter-spacing:1px; padding:8px 16px; border-radius:8px; border:1px solid #3a3a55; cursor:pointer; transition:.2s; white-space:nowrap; }
.cookie-btn-reject:hover { border-color:#8888aa; color:#f0f0ff; }
@media(max-width:500px){ #cookie-banner{flex-direction:column;align-items:flex-start;} .cookie-btns{width:100%;} .cookie-btn-accept,.cookie-btn-reject{flex:1;text-align:center;} }