@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Oswald:wght@400;600;700&display=swap');
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;user-select:none;}
html,body{height:100%;background:#070d14;overflow:hidden;font-family:'Oswald',system-ui,sans-serif;color:#f2e9d8;}
body{display:flex;align-items:center;justify-content:center;}
#wrap{position:relative;width:min(100vw,177.78vh);height:min(56.25vw,100vh);
  box-shadow:0 0 0 2px #2a4a5c,0 20px 60px rgba(0,0,0,.6);overflow:hidden;
  container-type:size;container-name:stage;}
canvas{display:block;width:100%;height:100%;background:#0e2233;touch-action:none;}
.screen{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:3%;gap:1.6cqh;background:linear-gradient(180deg,rgba(9,18,26,.82),rgba(9,18,26,.9));}
.hidden{display:none!important;}
h1{font-family:'Bebas Neue',sans-serif;font-size:clamp(34px,8cqw,110px);line-height:.85;letter-spacing:2px;
  text-shadow:0 4px 0 #e23b3b,0 0 34px rgba(240,184,64,.3);transform:rotate(-2deg);}
h1 span{color:#f0b840;}
.tag{font-size:clamp(10px,1.9cqw,20px);letter-spacing:3px;text-transform:uppercase;color:#f0b840;font-weight:700;}
.rot-tag{font-size:clamp(11px,2.1cqw,22px);color:#9fc0d0;font-style:italic;min-height:1.4em;}
.btn{font-family:'Bebas Neue',sans-serif;font-size:clamp(20px,3.4cqw,40px);letter-spacing:2px;
  background:#f0b840;color:#20140a;border:none;cursor:pointer;padding:10px 34px;border-radius:5px;
  box-shadow:0 5px 0 #a97c20;transition:transform .05s,box-shadow .05s;}
.btn:active{transform:translateY(4px);box-shadow:0 1px 0 #a97c20;}
.btn.alt{background:transparent;color:#f2e9d8;box-shadow:0 0 0 2px #2a4a5c;}
.chars{display:flex;gap:2cqw;margin:1cqh 0;flex-wrap:wrap;justify-content:center;}
.char{cursor:pointer;background:#10202c;border:2px solid #2a4a5c;border-radius:9px;padding:10px 12px;width:clamp(94px,13cqw,160px);transition:.12s;}
.char.sel{border-color:#f0b840;transform:translateY(-5px) rotate(-1deg);}
.swatch{width:44px;height:44px;border-radius:50%;margin:0 auto 6px;box-shadow:inset 0 -6px 0 rgba(0,0,0,.22);}
.char .name{font-family:'Bebas Neue';font-size:20px;letter-spacing:1px;}
.stats{font-size:11px;line-height:1.5;color:#9fc0d0;text-align:left;margin-top:5px;}
.stats b{color:#f2e9d8;float:right;font-weight:700;}
.hint{font-size:clamp(9px,1.6cqw,17px);color:#7f9aa8;max-width:min(420px,90%);line-height:1.5;}
.big{font-family:'Bebas Neue';font-size:clamp(48px,9cqw,112px);color:#f0b840;line-height:.85;}
.lbl{font-size:11px;letter-spacing:3px;text-transform:uppercase;color:#8fb0c0;}
.row{display:flex;gap:6cqw;align-items:flex-end;justify-content:center;}
.coin-row{display:flex;align-items:center;gap:8px;font-family:'Bebas Neue';font-size:clamp(20px,4cqw,28px);color:#f0b840;}
.coin-icon{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,#f0b840,#d4a020);
  border:2px solid #a97c20;display:flex;align-items:center;justify-content:center;font-size:14px;color:#5a3800;font-weight:700;}
#touch{position:absolute;inset:0;pointer-events:none;display:none;}
body.touch #touch{display:block;}
.tbtn{position:absolute;bottom:3%;width:26%;height:34%;border-radius:16px;pointer-events:auto;
  display:flex;align-items:center;justify-content:center;flex-direction:column;
  font-family:'Bebas Neue';letter-spacing:1px;color:#fff;opacity:.9;
  border:3px solid rgba(255,255,255,.35);backdrop-filter:blur(2px);}
.tbtn small{font-family:'Oswald';font-size:11px;opacity:.8;letter-spacing:2px;}
.tbtn:active{transform:scale(.95);opacity:1;}
#bLong{left:3%;background:rgba(226,59,59,.28);font-size:clamp(19px,3.4cqw,38px);}
#bShort{right:3%;background:rgba(72,149,239,.28);font-size:clamp(19px,3.4cqw,38px);}
#pauseBtn{position:absolute;top:8px;right:12px;pointer-events:auto;background:rgba(16,32,44,.7);
  border:2px solid #2a4a5c;color:#f2e9d8;font-family:'Bebas Neue';font-size:22px;letter-spacing:2px;
  padding:6px 16px;border-radius:6px;cursor:pointer;z-index:10;}
#pauseBtn:active{background:rgba(16,32,44,.95);}
#pauseScreen{z-index:9;}
#rotate{position:fixed;inset:0;background:#0b1622;z-index:50;display:none;flex-direction:column;
  align-items:center;justify-content:center;gap:16px;text-align:center;padding:24px;}
#rotate.show{display:flex;}
#rotate .ph{font-size:64px;animation:spin 2.2s ease-in-out infinite;}
@keyframes spin{0%,100%{transform:rotate(0)}50%{transform:rotate(-90deg)}}

/* ═══════ MARCA ═══════ */
.brand-logo{max-width:min(70%,420px);max-height:28cqh;object-fit:contain;}
.brand-sublogo{max-width:min(50%,300px);max-height:12cqh;object-fit:contain;}
#menu.has-bg{background:var(--menu-bg) center/cover no-repeat,linear-gradient(180deg,rgba(9,18,26,.82),rgba(9,18,26,.92));
  background-blend-mode:overlay;}

/* ═══════ MENÚ: enlaces ═══════ */
.menu-links{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;}
.btn.sm2{font-size:clamp(15px,2.6cqw,19px);padding:6px 18px;}

/* ═══════ VESTUARIO ═══════ */
#customize,#codeScreen{justify-content:flex-start;padding:2% 3%;gap:1cqh;}
.cust-head{display:flex;align-items:center;justify-content:space-between;width:100%;gap:10px;}
.cust-title{font-family:'Bebas Neue',sans-serif;font-size:clamp(24px,4.2cqw,50px);letter-spacing:3px;color:#f0b840;}
.ctabs{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;width:100%;}
.ctab{font-family:'Oswald';font-weight:600;font-size:clamp(11px,1.7cqw,17px);background:transparent;
  border:1px solid #2a4a5c;color:#9fc0d0;padding:5px 13px;border-radius:20px;cursor:pointer;transition:.12s;}
.ctab.active{background:#f0b840;color:#0b1622;border-color:#f0b840;}
.cust-scroll{width:100%;flex:1;overflow-y:auto;padding:6px 2px 10px;}
.cust-entity{margin-bottom:14px;}
.cust-entity-name{font-family:'Bebas Neue';font-size:clamp(16px,3cqw,21px);letter-spacing:1px;
  color:#e8e0cf;margin-bottom:6px;text-align:left;}
.lock-tag{font-family:'Oswald';font-size:10px;letter-spacing:1px;background:#4a5560;color:#c8d4dc;
  padding:1px 7px;border-radius:8px;margin-left:6px;vertical-align:middle;}
.cust-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:8px;}
.cust-card{background:#10202c;border:2px solid #2a4a5c;border-radius:9px;padding:6px;cursor:pointer;
  transition:.12s;position:relative;text-align:center;}
.cust-card:hover{border-color:#4fc4e8;transform:translateY(-2px);}
.cust-card.on{border-color:#f0b840;}
.cust-card.locked{opacity:.45;cursor:not-allowed;}
.cust-card.locked:hover{border-color:#2a4a5c;transform:none;}
.cust-prev{height:58px;display:flex;align-items:center;justify-content:center;
  background:repeating-conic-gradient(#16293a 0 25%,#0e1d29 0 50%) 50%/10px 10px;border-radius:5px;overflow:hidden;}
.cust-prev.bg{height:44px;}
.cust-prev img{max-width:100%;max-height:100%;object-fit:contain;}
.cust-prev.bg img{width:100%;height:100%;object-fit:cover;}
.noimg{color:#2a4a5c;font-size:20px;}
.cust-name{font-size:10px;color:#9fc0d0;margin-top:4px;word-break:break-word;line-height:1.2;}
.cust-card.on .cust-name{color:#f0b840;font-weight:700;}
.cust-eq{position:absolute;top:3px;left:3px;background:#f0b840;color:#0b1622;font-size:7px;
  font-weight:700;letter-spacing:1px;padding:1px 5px;border-radius:6px;}
.cust-lock{position:absolute;top:4px;right:5px;font-size:13px;}
.cust-empty{color:#7f9aa8;font-size:13px;text-align:center;padding:26px 10px;line-height:1.8;}
.cust-empty span{font-size:11px;opacity:.75;}

/* ═══════ CÓDIGOS ═══════ */
.code-input{font-family:'Bebas Neue';font-size:clamp(20px,3.4cqw,40px);letter-spacing:4px;text-align:center;
  text-transform:uppercase;background:#10202c;border:2px solid #2a4a5c;color:#f0b840;
  border-radius:8px;padding:8px 16px;width:min(300px,80%);}
.code-input:focus{outline:none;border-color:#f0b840;}
.code-result{font-size:13px;min-height:1.4em;font-weight:600;}

/* ═══════ TOAST DEL JUEGO ═══════ */
.game-toast{position:absolute;bottom:14px;left:50%;transform:translateX(-50%) translateY(10px);
  background:rgba(16,32,44,.95);border:1px solid #2a4a5c;color:#e8e0cf;font-size:12px;
  padding:8px 16px;border-radius:20px;opacity:0;transition:.25s;pointer-events:none;z-index:30;white-space:nowrap;}
.game-toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
.char.locked-char{opacity:.45;}
.char.locked-char:hover{transform:none;border-color:#2a4a5c;}
.swatch img{border-radius:50%;}

/* ═══════ SELECTOR DE MODO ═══════ */
.mode-picker{display:flex;gap:7px;flex-wrap:wrap;justify-content:center;}
.mode-btn{font-family:'Oswald';font-weight:600;font-size:clamp(11px,1.7cqw,17px);background:transparent;
  border:1px solid #2a4a5c;color:#9fc0d0;padding:5px 15px;border-radius:20px;cursor:pointer;transition:.12s;}
.mode-btn.active{background:#f0b840;color:#0b1622;border-color:#f0b840;}

/* ═══════ VESTUARIO: parry y música ═══════ */
.cust-hint{font-size:11px;color:#7f9aa8;line-height:1.6;margin-bottom:9px;text-align:left;}
.cust-hint b{color:#f0b840;}
.cust-kind{font-size:8px;letter-spacing:1px;text-transform:uppercase;color:#7f9aa8;margin-top:1px;}
.cust-card.on .cust-kind{color:#f0b840;}
canvas.pfx{width:100%;height:100%;border-radius:4px;}
.cust-grid.music .cust-prev{height:44px;font-size:20px;}
.cust-vol{display:flex;align-items:center;gap:10px;background:#10202c;border:1px solid #2a4a5c;
  border-radius:8px;padding:8px 12px;margin-bottom:10px;font-size:12px;color:#9fc0d0;}
.cust-vol input[type=range]{flex:1;accent-color:#f0b840;}
.cust-rar{font-size:8px;letter-spacing:1px;text-transform:uppercase;font-weight:700;margin-top:1px;}
.skin-tag{font-size:9px;letter-spacing:.5px;margin-top:2px;line-height:1.2;word-break:break-word;}

/* ═══════════════════════════════════════════
   HUB PRINCIPAL
   ═══════════════════════════════════════════ */
.screen.hub{justify-content:space-between;padding:2% 3% 2.5%;gap:0;}
.hub-top{display:flex;align-items:flex-start;justify-content:space-between;width:100%;gap:10px;}
.hub-brand{display:flex;flex-direction:column;align-items:center;flex:1;gap:2px;}
.hub-brand h1{font-size:clamp(28px,6cqw,86px);}
.hub-wallet{display:flex;align-items:center;gap:6px;background:rgba(16,32,44,.85);
  border:1px solid #2a4a5c;border-radius:20px;padding:5px 13px;font-family:'Bebas Neue';
  font-size:clamp(14px,2.2cqw,28px);color:#f0b840;letter-spacing:1px;flex-shrink:0;}
.coin-s{width:15px;height:15px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffe089,#f0b840 55%,#a97c20);
  box-shadow:inset 0 -2px 0 rgba(0,0,0,.25);display:inline-block;flex-shrink:0;}

/* ── Carrusel de personajes ── */
.carousel{display:flex;align-items:center;justify-content:center;gap:1%;width:100%;flex:1;min-height:0;}
.car-arrow{background:rgba(16,32,44,.7);border:1px solid #2a4a5c;color:#f0b840;
  font-family:'Bebas Neue';font-size:clamp(22px,3.4cqw,46px);line-height:1;
  width:clamp(30px,4.4cqw,56px);height:clamp(44px,7cqh,84px);border-radius:9px;cursor:pointer;
  transition:.12s;flex-shrink:0;}
.car-arrow:hover{background:#f0b840;color:#0b1622;}
.car-arrow:active{transform:scale(.93);}
.car-track{display:flex;align-items:center;justify-content:center;gap:1.5%;flex:1;min-width:0;height:100%;}

.card{position:relative;background:linear-gradient(165deg,#16293a,#0d1a26);
  border:2px solid #2a4a5c;border-radius:13px;padding:2% 1.5%;cursor:pointer;
  transition:transform .22s cubic-bezier(.34,1.4,.64,1),opacity .22s,border-color .2s;
  display:flex;flex-direction:column;align-items:center;gap:2px;overflow:hidden;--rc:#2a4a5c;}
.card.c{width:clamp(118px,20cqw,250px);transform:scale(1);opacity:1;border-color:var(--rc);z-index:3;
  box-shadow:0 8px 26px rgba(0,0,0,.5),0 0 22px -6px var(--rc);}
.card.l,.card.r{width:clamp(80px,13cqw,168px);transform:scale(.82);opacity:.5;z-index:1;}
.card.l{transform:scale(.82) rotate(-4deg);}
.card.r{transform:scale(.82) rotate(4deg);}
.card.h{display:none;}
.card.locked{filter:grayscale(.75);}
.card-glow{position:absolute;inset:0;background:radial-gradient(circle at 50% 22%,var(--rc),transparent 62%);
  opacity:.13;pointer-events:none;}
.card-art{width:100%;aspect-ratio:1;display:flex;align-items:center;justify-content:center;position:relative;}
.card-art img{max-width:88%;max-height:88%;object-fit:contain;filter:drop-shadow(0 4px 8px rgba(0,0,0,.5));}
.card-ph{width:72%;aspect-ratio:1;border-radius:50%;box-shadow:inset 0 -8px 0 rgba(0,0,0,.22);}
.card-lock{position:absolute;font-size:clamp(20px,4cqw,32px);}
.card-name{font-family:'Bebas Neue';font-size:clamp(14px,2.6cqw,34px);letter-spacing:1.5px;line-height:1;}
.card.l .card-name,.card.r .card-name{font-size:clamp(11px,1.9cqw,24px);}
.card-skin{font-size:clamp(8px,1.3cqw,15px);line-height:1.2;text-align:center;word-break:break-word;}
.card-rar{font-size:7px;font-weight:700;letter-spacing:1px;text-transform:uppercase;
  color:#0b1622;padding:1px 7px;border-radius:8px;}
.card-stats{width:100%;margin-top:3px;display:flex;flex-direction:column;gap:1px;}
.card.l .card-stats,.card.r .card-stats{display:none;}
.card-stats>div{display:flex;align-items:center;gap:4px;font-size:7px;}
.card-stats i{color:#7f9aa8;font-style:normal;letter-spacing:1px;width:20px;flex-shrink:0;}
.card-stats .sb{color:#f0b840;letter-spacing:-1px;}
.card-stats .sb.off{color:#2a4a5c;}
.card-stats.even{font-size:9px;color:#7f9aa8;text-align:center;}
.car-dots{display:flex;gap:6px;justify-content:center;}
.dot{width:7px;height:7px;border-radius:50%;background:#2a4a5c;cursor:pointer;transition:.15s;}
.dot.on{background:#f0b840;transform:scale(1.3);}

.btn-play{font-size:clamp(22px,3.8cqw,46px);padding:9px 46px;}

/* ── Navegación del hub ── */
.hub-nav{display:flex;gap:1.5%;flex-wrap:wrap;justify-content:center;width:100%;}
.hub-nav button{position:relative;background:rgba(16,32,44,.8);border:1px solid #2a4a5c;
  border-radius:10px;color:#9fc0d0;cursor:pointer;transition:.13s;
  padding:5px 10px;display:flex;flex-direction:column;align-items:center;gap:1px;min-width:60px;}
.hub-nav button:hover{border-color:#f0b840;color:#f2e9d8;transform:translateY(-2px);}
.hub-nav button i{font-style:normal;font-size:clamp(14px,2.2cqw,24px);}
.hub-nav button span{font-family:'Oswald';font-weight:600;font-size:clamp(9px,1.3cqw,14px);letter-spacing:.5px;}
.badge{position:absolute;top:-3px;right:-3px;width:9px;height:9px;border-radius:50%;
  background:#e23b3b;border:2px solid #0b1622;}

/* ═══════════════════════════════════════════
   PANTALLAS SECUNDARIAS
   ═══════════════════════════════════════════ */
.screen.sub{justify-content:flex-start;padding:0;gap:0;}
.sub-head{display:flex;align-items:center;justify-content:space-between;width:100%;
  padding:2% 3%;gap:10px;border-bottom:1px solid #2a4a5c;background:rgba(11,22,34,.6);flex-shrink:0;}
.sub-head .back{background:transparent;border:1px solid #2a4a5c;color:#9fc0d0;
  font-family:'Oswald';font-weight:600;font-size:clamp(11px,1.7cqw,17px);
  padding:5px 12px;border-radius:8px;cursor:pointer;transition:.12s;}
.sub-head .back:hover{border-color:#f0b840;color:#f0b840;}
.sub-title{font-family:'Bebas Neue';font-size:clamp(17px,3cqw,36px);letter-spacing:3px;color:#f0b840;}
.sub-right{display:flex;align-items:center;gap:6px;font-family:'Bebas Neue';
  font-size:clamp(13px,2.2cqw,25px);color:#f0b840;min-width:60px;justify-content:flex-end;}
.sub-scroll{width:100%;flex:1;overflow-y:auto;padding:2.5% 3% 3%;}
.ctabs{padding:1.5% 3% 0;}

/* ── Tienda ── */
.shop-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px;}
.shop-card{position:relative;background:linear-gradient(165deg,#16293a,#0d1a26);
  border:2px solid var(--rc,#2a4a5c);border-radius:11px;padding:8px;text-align:center;
  display:flex;flex-direction:column;gap:4px;}
.shop-card.owned{opacity:.6;}
.shop-prev{height:66px;display:flex;align-items:center;justify-content:center;
  background:repeating-conic-gradient(#16293a 0 25%,#0e1d29 0 50%) 50%/10px 10px;border-radius:6px;overflow:hidden;}
.shop-prev img{max-width:90%;max-height:90%;object-fit:contain;}
.shop-rar{position:absolute;top:5px;left:5px;font-size:7px;font-weight:700;letter-spacing:1px;
  text-transform:uppercase;color:#0b1622;padding:1px 6px;border-radius:7px;}
.shop-name{font-family:'Bebas Neue';font-size:15px;letter-spacing:.5px;line-height:1.1;}
.shop-sub{font-size:9px;color:#7f9aa8;line-height:1.2;}
.shop-buy{display:flex;align-items:center;justify-content:center;gap:5px;
  background:#f0b840;color:#20140a;border:none;border-radius:7px;cursor:pointer;
  font-family:'Bebas Neue';font-size:16px;letter-spacing:1px;padding:5px;
  box-shadow:0 3px 0 #a97c20;transition:.05s;}
.shop-buy:active{transform:translateY(2px);box-shadow:0 1px 0 #a97c20;}
.shop-buy.poor{background:#4a5560;color:#c8d4dc;box-shadow:0 3px 0 #2a3540;}
.shop-owned{font-size:10px;color:#2dcc70;font-weight:700;letter-spacing:1px;padding:5px;}

/* ── Rankings ── */
.rank-list{display:flex;flex-direction:column;gap:6px;}
.rank-row{display:flex;align-items:center;gap:10px;background:#10202c;border:1px solid #2a4a5c;
  border-radius:9px;padding:8px 11px;}
.rank-row.top1{border-color:#f0b840;background:linear-gradient(90deg,rgba(240,184,64,.14),#10202c);}
.rank-row.top2{border-color:#c8d4dc;}
.rank-row.top3{border-color:#c98a4f;}
.rank-row.me{box-shadow:inset 0 0 0 1px #4fc4e8;}
.rank-pos{font-family:'Bebas Neue';font-size:20px;color:#f0b840;width:26px;text-align:center;flex-shrink:0;}
.rank-row.top1 .rank-pos{font-size:25px;}
.rank-info{flex:1;min-width:0;}
.rank-name{font-size:13px;font-weight:600;color:#f2e9d8;}
.rank-name em{color:#4fc4e8;font-style:normal;font-size:11px;}
.rank-meta{font-size:10px;color:#7f9aa8;}
.rank-score{font-family:'Bebas Neue';font-size:22px;color:#f0b840;}
.rank-date{font-size:10px;color:#5a6b78;}

/* ── Novedades ── */
.news-item{background:#10202c;border:1px solid #2a4a5c;border-radius:10px;padding:12px;margin-bottom:10px;}
.news-item.latest{border-color:#f0b840;}
.news-head{display:flex;align-items:center;gap:8px;margin-bottom:5px;}
.news-ver{font-family:'Bebas Neue';font-size:17px;letter-spacing:1px;color:#f0b840;}
.news-date{font-size:10px;color:#7f9aa8;}
.news-new{font-size:8px;font-weight:700;letter-spacing:1px;background:#e23b3b;color:#fff;
  padding:1px 6px;border-radius:7px;}
.news-title{font-size:14px;font-weight:600;color:#f2e9d8;margin-bottom:5px;}
.news-list{list-style:none;display:flex;flex-direction:column;gap:3px;}
.news-list li{font-size:12px;color:#9fc0d0;padding-left:13px;position:relative;line-height:1.5;}
.news-list li:before{content:'▸';position:absolute;left:0;color:#f0b840;}

/* ── Opciones ── */
.opt-sec{background:#10202c;border:1px solid #2a4a5c;border-radius:10px;padding:13px;margin-bottom:11px;}
.opt-sec h3{font-family:'Bebas Neue';font-size:19px;letter-spacing:1.5px;color:#f0b840;margin-bottom:3px;}
.opt-hint{font-size:11px;color:#7f9aa8;margin-bottom:9px;line-height:1.5;}
.opt-row{display:flex;align-items:center;gap:9px;padding:8px 0;border-top:1px solid rgba(42,74,92,.5);flex-wrap:wrap;}
.opt-row:first-of-type{border-top:none;}
.opt-lab{flex:1;min-width:130px;}
.opt-lab b{display:block;font-size:13px;color:#f2e9d8;font-weight:600;}
.opt-lab span{font-size:10px;color:#7f9aa8;}
.bind{background:#0b1622;border:1px solid #2a4a5c;color:#f0b840;font-family:'Oswald';
  font-weight:600;font-size:12px;padding:6px 11px;border-radius:7px;cursor:pointer;
  min-width:88px;transition:.12s;}
.bind:hover{border-color:#f0b840;}
.bind.listening{background:#f0b840;color:#0b1622;animation:blink .8s infinite;}
@keyframes blink{50%{opacity:.55}}
.sw{position:relative;width:42px;height:22px;flex-shrink:0;cursor:pointer;}
.sw input{opacity:0;width:0;height:0;}
.sw span{position:absolute;inset:0;background:#2a4a5c;border-radius:11px;transition:.15s;}
.sw span:before{content:'';position:absolute;width:16px;height:16px;left:3px;top:3px;
  background:#9fc0d0;border-radius:50%;transition:.15s;}
.sw input:checked+span{background:#f0b840;}
.sw input:checked+span:before{transform:translateX(20px);background:#0b1622;}
.slider{width:130px;accent-color:#f0b840;}
.txt{background:#0b1622;border:1px solid #2a4a5c;color:#f2e9d8;font-family:'Oswald';
  font-size:13px;padding:6px 10px;border-radius:7px;width:150px;}
.txt:focus{outline:none;border-color:#f0b840;}
.pid{font-size:9px;color:#5a6b78;font-family:monospace;word-break:break-all;max-width:160px;}

.code-body{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:14px;flex:1;padding:6% 3%;}

/* ═══════════════════════════════════════════
   PERFIL Y XP EN EL HUB
   ═══════════════════════════════════════════ */
.hub-side{display:flex;flex-direction:column;gap:5px;align-items:flex-end;flex-shrink:0;}
.hub-lvl{background:rgba(16,32,44,.85);border:1px solid #2a4a5c;border-radius:10px;
  padding:5px 10px;cursor:pointer;transition:.13s;min-width:104px;}
.hub-lvl:hover{border-color:#f0b840;}
.lvl-num{font-family:'Oswald';font-size:8px;letter-spacing:1.5px;color:#7f9aa8;}
.lvl-num b{font-family:'Bebas Neue';font-size:16px;color:#f0b840;letter-spacing:1px;}
.lvl-bar{height:5px;background:rgba(255,255,255,.1);border-radius:3px;overflow:hidden;margin:2px 0;}
.lvl-bar i{display:block;height:100%;background:linear-gradient(90deg,#f0b840,#ffd980);border-radius:3px;transition:width .4s;}
.lvl-xp{font-size:7px;color:#7f9aa8;letter-spacing:.5px;}
.hub-profile{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;}
.hub-profile span{font-family:'Oswald';font-weight:600;font-size:clamp(11px,1.7cqw,18px);color:#e8e0cf;}
.hub-profile em{font-style:italic;font-size:clamp(9px,1.5cqw,16px);}

/* ═══════════════════════════════════════════
   PASE DE BATALLA
   ═══════════════════════════════════════════ */
.pass-top{display:flex;align-items:center;gap:14px;padding:2.5% 3%;width:100%;flex-wrap:wrap;flex-shrink:0;}
.pass-lvl{text-align:center;flex-shrink:0;}
.pl-cur{font-family:'Bebas Neue';font-size:clamp(32px,5.4cqw,68px);line-height:.9;color:#f0b840;
  text-shadow:0 0 22px rgba(240,184,64,.4);}
.pl-lab{font-size:8px;letter-spacing:2.5px;color:#7f9aa8;}
.pass-prog{flex:1;min-width:170px;}
.pp-bar{height:11px;background:rgba(255,255,255,.09);border:1px solid #2a4a5c;border-radius:7px;overflow:hidden;}
.pp-bar i{display:block;height:100%;background:linear-gradient(90deg,#f0b840,#ffd980);
  box-shadow:0 0 12px rgba(240,184,64,.5);transition:width .5s;}
.pp-info{display:flex;justify-content:space-between;font-size:10px;color:#7f9aa8;margin-top:4px;gap:8px;}
.pass-free{font-family:'Bebas Neue';font-size:12px;letter-spacing:2px;color:#0b1622;
  background:#2dcc70;padding:3px 11px;border-radius:11px;flex-shrink:0;}

.pass-track{display:flex;gap:10px;overflow-x:auto;overflow-y:hidden;width:100%;flex:1;
  padding:1.5% 3% 3%;align-items:center;scroll-snap-type:x proximity;}
.pnode{position:relative;flex-shrink:0;display:flex;flex-direction:column;align-items:center;gap:5px;
  scroll-snap-align:center;--rc:#2a4a5c;}
.pn-lvl{font-family:'Bebas Neue';font-size:15px;letter-spacing:1px;color:#7f9aa8;
  width:24px;height:24px;line-height:24px;text-align:center;border-radius:50%;
  border:1px solid #2a4a5c;background:#0b1622;}
.pnode.done .pn-lvl{color:#0b1622;background:#f0b840;border-color:#f0b840;}
.pnode.cur .pn-lvl{color:#fff;background:#4fc4e8;border-color:#4fc4e8;
  box-shadow:0 0 12px rgba(79,196,232,.6);}
.pn-box{position:relative;width:clamp(76px,11cqw,132px);aspect-ratio:.85;
  background:linear-gradient(165deg,#16293a,#0d1a26);border:2px solid #2a4a5c;border-radius:11px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:6px;
  transition:.15s;}
.pnode.big .pn-box{border-color:var(--rc);box-shadow:0 0 18px -5px var(--rc);}
.pnode.done .pn-box{border-color:#f0b840;}
.pnode.cur .pn-box{transform:scale(1.07);border-color:#4fc4e8;}
.pnode.empty .pn-box{border-style:dashed;opacity:.5;}
.pn-icon{font-size:clamp(17px,3cqw,34px);line-height:1;}
.pn-name{font-size:9px;color:#e8e0cf;text-align:center;line-height:1.2;word-break:break-word;font-weight:600;}
.pnode.empty .pn-name{color:#5a6b78;font-weight:400;}
.pn-sub{font-size:7px;color:#7f9aa8;letter-spacing:.5px;text-transform:uppercase;}
.pn-check{position:absolute;top:3px;right:4px;font-size:11px;color:#2dcc70;font-weight:700;}
.pn-tag{position:absolute;top:-5px;left:50%;transform:translateX(-50%);font-size:6px;
  font-weight:700;letter-spacing:1px;color:#0b1622;padding:1px 6px;border-radius:6px;z-index:2;}

/* ═══════════════════════════════════════════
   TÍTULOS
   ═══════════════════════════════════════════ */
.title-list{display:flex;flex-direction:column;gap:6px;}
.title-row{position:relative;display:flex;align-items:center;gap:10px;background:#10202c;
  border:2px solid #2a4a5c;border-radius:9px;padding:9px 12px;cursor:pointer;transition:.12s;}
.title-row:hover{border-color:#4fc4e8;}
.title-row.on{background:#16293a;}
.title-row.locked{opacity:.45;cursor:not-allowed;}
.title-row.locked:hover{border-color:#2a4a5c;}
.tr-txt{flex:1;font-family:'Oswald';font-weight:600;font-size:clamp(12px,1.9cqw,19px);font-style:italic;}
.tr-rar{font-size:8px;letter-spacing:1px;text-transform:uppercase;font-weight:700;}
.tr-eq{font-size:7px;font-weight:700;letter-spacing:1px;background:#f0b840;color:#0b1622;
  padding:2px 7px;border-radius:7px;}
.tr-lock{font-size:13px;}

/* ═══════════════════════════════════════════
   XP EN EL GAME OVER
   ═══════════════════════════════════════════ */
.over-xp{background:rgba(16,32,44,.9);border:1px solid #2a4a5c;border-radius:10px;
  padding:9px 14px;min-width:min(260px,80%);}
.oxp-head{display:flex;justify-content:space-between;align-items:baseline;
  font-family:'Bebas Neue';font-size:14px;letter-spacing:1.5px;color:#9fc0d0;}
.oxp-gain{color:#2dcc70;font-size:17px;}
.oxp-bar{height:8px;background:rgba(255,255,255,.1);border-radius:5px;overflow:hidden;margin:5px 0 3px;}
.oxp-bar i{display:block;height:100%;background:linear-gradient(90deg,#f0b840,#ffd980);border-radius:5px;}
.oxp-sub{font-size:9px;color:#7f9aa8;letter-spacing:.5px;}
.lvlup{font-family:'Bebas Neue';font-size:20px;letter-spacing:2px;color:#f0b840;margin-top:6px;
  text-shadow:0 0 16px rgba(240,184,64,.6);}
.lvlup-rw{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:3px;}
.lvlup-rw span{font-size:10px;background:rgba(240,184,64,.16);border:1px solid rgba(240,184,64,.4);
  color:#f0b840;padding:2px 8px;border-radius:8px;}

/* ═══════════════════════════════════════════
   TIENDA (secciones, ofertas, omega)
   ═══════════════════════════════════════════ */
.shop-sec{margin-bottom:18px;}
.shop-sec-head{display:flex;align-items:center;gap:9px;margin-bottom:8px;flex-wrap:wrap;}
.shop-sec-head h3{font-family:'Bebas Neue';font-size:clamp(15px,2.6cqw,28px);letter-spacing:2px;color:#f0b840;}
.ss-note{font-size:10px;color:#7f9aa8;font-style:italic;}
.ss-timer{font-size:10px;color:#e23b3b;background:rgba(226,59,59,.14);
  border:1px solid rgba(226,59,59,.35);padding:2px 8px;border-radius:9px;margin-left:auto;}
.sc-offer{position:absolute;top:5px;right:5px;background:#e23b3b;color:#fff;
  font-family:'Bebas Neue';font-size:12px;letter-spacing:1px;padding:1px 7px;border-radius:7px;z-index:2;}
.sc-left{font-size:9px;color:#7f9aa8;}
.shop-buy s{opacity:.55;font-size:12px;margin-right:2px;}
.shop-card.omega{border-width:2px;animation:omegaGlow 2.4s ease-in-out infinite;}
@keyframes omegaGlow{0%,100%{box-shadow:0 0 0 var(--rc)}50%{box-shadow:0 0 16px -2px var(--rc)}}
.sp-title{font-family:'Oswald';font-weight:600;font-style:italic;font-size:11px;
  text-align:center;padding:4px;line-height:1.3;}

/* ═══════════════════════════════════════════════════════════
   ██ DIRECCIÓN DE ARTE: PARED DE INSTITUTO + BAR DE BARRIO ██
   Pegatinas torcidas, cinta adhesiva, polaroids y rotulador.
   ═══════════════════════════════════════════════════════════ */

/* ── La pared ── */
.screen.hub{
  background:
    radial-gradient(ellipse at 50% 0%, rgba(240,184,64,.10), transparent 55%),
    radial-gradient(ellipse at 50% 100%, rgba(226,59,59,.09), transparent 50%),
    repeating-linear-gradient(92deg, rgba(255,255,255,.014) 0 2px, transparent 2px 5px),
    repeating-linear-gradient(0deg, rgba(0,0,0,.16) 0 1px, transparent 1px 4px),
    linear-gradient(175deg,rgba(19,36,51,.80) 0%,rgba(12,24,37,.86) 55%,rgba(8,15,24,.92) 100%);
  padding:1.8% 3% 2.2%;
}
/* Manchurrones tipo gotelé/humedad */
.screen.hub::before{
  content:'';position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:
    radial-gradient(circle at 12% 22%, rgba(255,255,255,.035) 0 3%, transparent 3.5%),
    radial-gradient(circle at 82% 14%, rgba(255,255,255,.03) 0 2%, transparent 2.5%),
    radial-gradient(circle at 68% 78%, rgba(0,0,0,.22) 0 6%, transparent 7%),
    radial-gradient(circle at 22% 84%, rgba(0,0,0,.18) 0 5%, transparent 6%);
}
/* Viñeta de esquinas para dar profundidad */
.screen.hub::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 120px 30px rgba(0,0,0,.55);
}
.screen.hub > *{position:relative;z-index:1;}

/* ── Logo: graffiti torcido con capas de color ── */
.hub-brand h1{
  font-family:'Bebas Neue',sans-serif;
  transform:rotate(-3deg) skewX(-5deg);
  letter-spacing:1px;
  text-shadow:
    3px 0 0 #e23b3b, -3px 0 0 #4fa3d1,
    0 5px 0 rgba(0,0,0,.55),
    0 0 42px rgba(240,184,64,.35);
  filter:drop-shadow(0 6px 10px rgba(0,0,0,.6));
}
.hub-brand h1 span{
  color:#f0b840;
  text-shadow:3px 0 0 #a8261f, -3px 0 0 #2a6090, 0 5px 0 rgba(0,0,0,.55);
}
/* Subtítulo como sello estampado */
.hub-brand .tag{
  background:rgba(226,59,59,.14);
  border:2px solid rgba(226,59,59,.55);
  color:#ffb9b9;
  padding:2px 12px;border-radius:3px;
  transform:rotate(1.4deg);
  box-shadow:0 2px 0 rgba(0,0,0,.35);
}

/* ── Cinta adhesiva decorativa ── */
.wall-tape{
  width:min(58%,300px);height:16px;margin:-2px auto 0;
  background:linear-gradient(180deg,rgba(240,224,150,.30),rgba(220,200,120,.16));
  border-left:1px dashed rgba(0,0,0,.25);border-right:1px dashed rgba(0,0,0,.25);
  transform:rotate(-1.2deg);box-shadow:0 1px 3px rgba(0,0,0,.35);
  clip-path:polygon(0 8%,4% 0,96% 6%,100% 0,100% 92%,95% 100%,5% 94%,0 100%);
}

/* ── Cartera y nivel: posavasos de bar ── */
.hub-wallet{
  background:linear-gradient(160deg,#1d3448,#12222f);
  border:2px solid rgba(240,184,64,.5);border-radius:4px;
  transform:rotate(1.6deg);
  box-shadow:3px 3px 0 rgba(0,0,0,.45);
}
.hub-lvl{
  background:linear-gradient(160deg,#1d3448,#12222f);
  border:2px solid #2f5670;border-radius:4px;
  transform:rotate(-1.4deg);
  box-shadow:3px 3px 0 rgba(0,0,0,.45);
}
.hub-lvl:hover{border-color:#f0b840;transform:rotate(-1.4deg) translateY(-2px);}
.lvl-bar{border:1px solid rgba(0,0,0,.4);}

/* ── Nombre y título: escrito a rotulador ── */
.hub-profile{gap:10px;}
.hub-profile span{
  font-family:'Permanent Marker',cursive;font-weight:400;
  color:#e8e0cf;letter-spacing:.5px;transform:rotate(-.8deg);
}
.hub-profile em{font-family:'Permanent Marker',cursive;transform:rotate(.6deg);}

/* ── Selector de modo: chapas de botellín ── */
.mode-btn{
  font-family:'Bebas Neue',sans-serif;letter-spacing:2px;
  background:linear-gradient(160deg,#22384b,#152634);
  border:2px solid #3a5f79;border-radius:3px;color:#a9c6d6;
  padding:4px 16px;transform:rotate(-.6deg);
  box-shadow:2px 2px 0 rgba(0,0,0,.4);
}
.mode-btn:nth-child(even){transform:rotate(.7deg);}
.mode-btn.active{
  background:linear-gradient(160deg,#f0b840,#d99a1e);color:#20140a;border-color:#a97c20;
  box-shadow:2px 2px 0 rgba(0,0,0,.5),0 0 18px -4px #f0b840;
}

/* ── Cartas de personaje: polaroids pegadas con celo ── */
.card{
  background:linear-gradient(170deg,#f2ece0 0%,#ddd4c4 100%);
  border:none;border-radius:2px;
  padding:5% 4% 4%;
  box-shadow:0 10px 22px rgba(0,0,0,.55), inset 0 0 0 1px rgba(0,0,0,.08);
}
.card.c{transform:rotate(-1.5deg) scale(1);}
.card.l{transform:rotate(-6deg) scale(.8) translateY(6px);}
.card.r{transform:rotate(6deg) scale(.8) translateY(6px);}
/* Celo en la esquina superior */
.card::before{
  content:'';position:absolute;top:-9px;left:50%;transform:translateX(-50%) rotate(-3deg);
  width:46%;height:17px;z-index:4;
  background:linear-gradient(180deg,rgba(240,228,170,.55),rgba(210,195,130,.32));
  border-left:1px dashed rgba(0,0,0,.2);border-right:1px dashed rgba(0,0,0,.2);
  box-shadow:0 1px 3px rgba(0,0,0,.3);
}
.card-glow{background:radial-gradient(circle at 50% 30%,var(--rc),transparent 65%);opacity:.16;}
.card-art{
  background:#101c26;border-radius:1px;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.35), inset 0 4px 14px rgba(0,0,0,.5);
  padding:6%;
}
.card-name{
  font-family:'Permanent Marker',cursive;color:#1a1410;letter-spacing:0;
  text-shadow:none;transform:rotate(-1deg);margin-top:4px;
}
.card-skin{color:#5a4d3e !important;font-family:'Oswald';font-weight:600;}
.card-rar{
  transform:rotate(-2deg);border-radius:2px;
  box-shadow:1px 1px 0 rgba(0,0,0,.35);
}
.card-stats i{color:#6b5c4a;}
.card-stats .sb.off{color:#c4b9a6;}
.card-stats.even{color:#6b5c4a;}
.card.locked{filter:grayscale(.9) contrast(.9);}
.card.locked::after{
  content:'';position:absolute;inset:0;z-index:3;
  background:repeating-linear-gradient(45deg,rgba(0,0,0,.14) 0 8px,transparent 8px 16px);
}

/* Flechas: brochazos */
.car-arrow{
  background:linear-gradient(160deg,#22384b,#152634);
  border:2px solid #3a5f79;border-radius:3px;color:#f0b840;
  box-shadow:2px 2px 0 rgba(0,0,0,.4);
}
.car-arrow:hover{background:#f0b840;color:#132433;border-color:#a97c20;}
.dot{border:1px solid rgba(0,0,0,.4);}

/* ── Botón de jugar: sello estampado ── */
.btn-play{
  font-family:'Bebas Neue',sans-serif;
  background:linear-gradient(165deg,#ffd166,#e8a417 60%,#d18f10);
  color:#241706;border-radius:4px;
  border:3px solid #8a6412;
  transform:rotate(-1.2deg);
  box-shadow:5px 5px 0 rgba(0,0,0,.5), inset 0 2px 0 rgba(255,255,255,.45);
  text-shadow:0 2px 0 rgba(255,255,255,.35);
}
.btn-play:active{transform:rotate(-1.2deg) translate(3px,3px);box-shadow:2px 2px 0 rgba(0,0,0,.5);}

/* ── Navegación: pegatinas troqueladas ── */
.hub-nav{gap:8px;}
.hub-nav button.stk{
  background:linear-gradient(165deg,#20364a,#14232f);
  border:2px solid #f2ece0;border-radius:7px;
  padding:6px 10px 5px;min-width:0;gap:2px;
  box-shadow:2px 3px 0 rgba(0,0,0,.5);
  color:#e8e0cf;
}
.hub-nav button.stk svg{
  width:clamp(15px,2.1cqw,24px);height:clamp(15px,2.1cqw,24px);
  fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;
}
.hub-nav button.stk svg .f{fill:currentColor;stroke:none;}
.hub-nav button.stk span{
  font-family:'Permanent Marker',cursive;font-weight:400;
  font-size:clamp(8px,1.15cqw,13px);letter-spacing:.3px;
}
/* Cada pegatina con su ángulo y su color */
.stk.s1{transform:rotate(-2.4deg);border-color:#f0b840;color:#f0b840;}
.stk.s2{transform:rotate(1.8deg); border-color:#2dcc70;color:#2dcc70;}
.stk.s3{transform:rotate(-1.2deg);border-color:#4fc4e8;color:#4fc4e8;}
.stk.s4{transform:rotate(2.2deg); border-color:#ff9f1c;color:#ff9f1c;}
.stk.s5{transform:rotate(-1.8deg);border-color:#c94f8a;color:#c94f8a;}
.stk.s6{transform:rotate(1.4deg); border-color:#9fc0d0;color:#9fc0d0;}
.stk.s7{transform:rotate(-2.6deg);border-color:#e23b3b;color:#e23b3b;}
.hub-nav button.stk:hover{
  background:currentColor;
  box-shadow:2px 3px 0 rgba(0,0,0,.6),0 0 20px -4px currentColor;
  transform:translateY(-3px) rotate(0deg) scale(1.06);
}
.hub-nav button.stk:hover svg{stroke:#12202c;}
.hub-nav button.stk:hover span{color:#12202c;}
.badge{border-color:#12202c;}

/* ── Pistas: escritas en la pared ── */
#menuHint{color:#8fa9b8;}
.rot-tag{
  font-family:'Permanent Marker',cursive;font-style:normal;
  color:#7f9aa8;transform:rotate(-1deg);opacity:.85;
}

/* ── Pantallas secundarias: misma pared ── */
.screen.sub{
  background:
    repeating-linear-gradient(92deg, rgba(255,255,255,.012) 0 2px, transparent 2px 5px),
    linear-gradient(175deg,rgba(19,36,51,.90) 0%,rgba(12,24,37,.94) 60%,rgba(8,15,24,.96) 100%);
}
.sub-head{
  background:linear-gradient(180deg,rgba(19,36,51,.95),rgba(12,24,37,.8));
  border-bottom:2px solid rgba(240,184,64,.35);
}
.sub-title{
  font-family:'Bebas Neue',sans-serif;
  transform:rotate(-1deg);
  text-shadow:2px 0 0 rgba(226,59,59,.5),0 3px 0 rgba(0,0,0,.5);
}
.sub-head .back{
  font-family:'Permanent Marker',cursive;border-radius:5px;
  border:2px solid #3a5f79;transform:rotate(-1deg);
  box-shadow:2px 2px 0 rgba(0,0,0,.4);
}
.sub-head .back:hover{background:#f0b840;color:#132433;border-color:#a97c20;}

/* Pestañas del vestuario: fichas de bar */
.ctab{
  font-family:'Bebas Neue',sans-serif;font-size:clamp(11px,1.6cqw,16px);letter-spacing:1.5px;
  border:2px solid #3a5f79;border-radius:3px;
  box-shadow:2px 2px 0 rgba(0,0,0,.35);
}
.ctab.active{box-shadow:2px 2px 0 rgba(0,0,0,.5),0 0 16px -4px #f0b840;}

/* ═══════════════════════════════════════════════════════════
   ██ CORRECCIONES DE PROPORCIÓN Y LAYOUT ██
   ═══════════════════════════════════════════════════════════ */

/* ── El escenario deja de estirarse sin control en monitores grandes ── */
#wrap{
  width:min(100vw,177.78vh,1700px);
  height:min(56.25vw,100vh,956px);
  border-radius:6px;
}

/* ── Cartas: el retrato ya no se aplasta ── */
.card-art{flex-shrink:0;}
/* En las cartas laterales solo nombre: lo demás sobra y las descuadraba */
.card.l .card-skin,.card.r .card-skin,
.card.l .card-rar, .card.r .card-rar{display:none;}
.card.l .card-name,.card.r .card-name{margin-top:6px;}
.card-skin{
  min-height:1.2em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  max-width:100%;
}

/* ── Hub: repartir mejor el espacio vertical ── */
.screen.hub{gap:.6cqh;}
.carousel{flex:1;max-height:52cqh;}
.hub-brand{gap:4px;}
.hub-profile{
  margin-top:2px;padding:3px 16px;
  background:linear-gradient(180deg,rgba(240,224,150,.16),rgba(220,200,120,.06));
  border-left:1px dashed rgba(255,255,255,.15);border-right:1px dashed rgba(255,255,255,.15);
  transform:rotate(-.6deg);
}

/* ── Pantallas secundarias: contenido centrado y legible ── */
.sub-scroll{max-width:1180px;margin:0 auto;}
.ctabs{max-width:1180px;margin:0 auto;width:100%;}

/* Vestuario: fichas más grandes, no perdidas en la esquina */
.cust-grid{grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:11px;}
.cust-grid.music{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));}
.cust-prev{height:84px;}
.cust-prev.bg{height:62px;}
.cust-name{font-size:12px;}
.cust-rar{font-size:9px;}
.cust-entity{
  background:rgba(16,32,44,.5);border:1px solid rgba(42,74,92,.7);
  border-radius:10px;padding:11px 12px 13px;margin-bottom:13px;
}
.cust-entity-name{
  font-family:'Permanent Marker',cursive;font-size:clamp(14px,1.9cqw,22px);
  color:#f0b840;transform:rotate(-.7deg);margin-bottom:9px;
}
.cust-hint{background:rgba(16,32,44,.55);border-left:3px solid #f0b840;
  padding:8px 11px;border-radius:0 7px 7px 0;margin-bottom:12px;}

/* Tienda: tarjetas más grandes */
.shop-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;}
.shop-prev{height:88px;}
.shop-name{font-size:17px;}
.shop-sub{font-size:10px;}

/* Pase: nodos algo mayores */
.pn-box{width:clamp(84px,9cqw,142px);}

/* Vacíos: que no queden desamparados en la esquina */
.cust-empty{
  background:rgba(16,32,44,.5);border:2px dashed rgba(42,74,92,.8);
  border-radius:12px;padding:34px 18px;max-width:520px;margin:12px auto;
  font-family:'Permanent Marker',cursive;font-size:14px;color:#8fa9b8;
}
.cust-empty span{font-family:'Oswald';font-size:12px;}

/* El retrato debe ocupar todo el ancho de la polaroid */
.card-art{align-self:stretch;width:100%;flex:0 0 auto;}
.card.l,.card.r{opacity:.62;}
.card.l .card-art,.card.r .card-art{filter:saturate(.7);}
/* Polaroid: más foto y menos papel muerto abajo */
.card{padding:6% 5% 5%;}
.card-name{margin-top:7px;}

/* ═══════════════════════════════════════════════════════════
   ██ OPCIONES: tarjetas compactas, teclas físicas ██
   ═══════════════════════════════════════════════════════════ */
.opt-cols{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:13px;align-items:start;max-width:1000px;margin:0 auto;
}
.opt-card{
  background:linear-gradient(168deg,rgba(29,52,72,.92),rgba(16,32,44,.92));
  border:2px solid #2f5670;border-radius:10px;padding:13px 15px 15px;
  box-shadow:4px 5px 0 rgba(0,0,0,.42);
}
.opt-card.wide{grid-column:1/-1;}
.opt-card h3{
  font-family:'Permanent Marker',cursive;font-size:clamp(15px,1.8cqw,21px);
  color:#f0b840;transform:rotate(-.8deg);margin-bottom:3px;
  display:flex;align-items:center;gap:8px;
}
.oh-i{
  font-style:normal;width:26px;height:26px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:rgba(240,184,64,.14);border:1.5px solid rgba(240,184,64,.45);
  border-radius:6px;font-size:14px;transform:rotate(2deg);
}
.opt-note{
  font-size:11px;color:#8fa9b8;line-height:1.5;margin-bottom:9px;
  padding-left:9px;border-left:2px solid rgba(240,184,64,.4);
}
/* Fila de ajuste */
.oi{
  display:flex;align-items:center;gap:12px;justify-content:space-between;
  padding:8px 0;border-top:1px dashed rgba(90,130,155,.28);flex-wrap:wrap;
}
.oi:first-of-type{border-top:none;}
.oi-l{flex:1;min-width:120px;}
.oi-l b{display:block;font-size:13px;color:#f2e9d8;font-weight:600;line-height:1.2;}
.oi-l span{font-size:10px;color:#7f9aa8;}
.oi-r{display:flex;align-items:center;gap:7px;flex-shrink:0;}
/* Teclas con aspecto de tecla real */
.keycap{
  font-family:'Oswald';font-weight:700;font-size:12px;letter-spacing:.5px;
  min-width:74px;padding:7px 11px 8px;cursor:pointer;
  color:#e8e0cf;background:linear-gradient(180deg,#33506a,#1d3446);
  border:1px solid #4a7a99;border-radius:6px;
  box-shadow:0 3px 0 #14232f, inset 0 1px 0 rgba(255,255,255,.18);
  transition:.07s;
}
.keycap:hover{border-color:#f0b840;color:#f0b840;}
.keycap:active{transform:translateY(2px);box-shadow:0 1px 0 #14232f;}
.keycap.mouse{background:linear-gradient(180deg,#3a3050,#241d33);border-color:#6a5a8a;}
.keycap.listening{
  background:linear-gradient(180deg,#ffd166,#e8a417);color:#241706;border-color:#8a6412;
  animation:blink .75s infinite;
}
.ow{margin-top:10px;width:100%;}
.ptitle{font-family:'Permanent Marker',cursive;font-style:normal;font-size:12px;}
.pbig{font-family:'Bebas Neue';font-size:26px;color:#f0b840;}
.opt-card .pid{font-size:9px;color:#5f7686;max-width:150px;}

/* ═══════════════════════════════════════════════════════════
   ██ PASE: recompensas colgadas de una cuerda con pinzas ██
   ═══════════════════════════════════════════════════════════ */
.pass-top{
  background:linear-gradient(180deg,rgba(19,36,51,.75),transparent);
  padding:2% 3% 1.5%;
}
.pl-cur{text-shadow:0 0 26px rgba(240,184,64,.5),0 4px 0 rgba(0,0,0,.5);}
.pass-free{
  font-family:'Permanent Marker',cursive;letter-spacing:0;font-size:12px;
  transform:rotate(-2.5deg);border-radius:4px;box-shadow:2px 2px 0 rgba(0,0,0,.4);
}
.pp-info b{color:#f0b840;}

/* La cuerda */
.pass-track{
  position:relative;align-items:flex-start;padding:0 3% 3%;
  gap:14px;
}
.pass-track::before{
  content:'';position:absolute;left:0;right:0;top:34px;height:3px;
  background:linear-gradient(180deg,#6b5a45,#3d3226);
  box-shadow:0 2px 5px rgba(0,0,0,.5);
  border-radius:2px;z-index:0;
}
.pnode{gap:0;padding-top:12px;z-index:1;}
/* Pinza de tender */
.pn-pin{
  width:13px;height:26px;margin-bottom:-6px;z-index:3;
  background:linear-gradient(180deg,#e8dcc0,#b9a882);
  border:1px solid rgba(0,0,0,.35);border-radius:3px 3px 2px 2px;
  box-shadow:1px 2px 3px rgba(0,0,0,.45);
  position:relative;
}
.pn-pin::after{
  content:'';position:absolute;left:2px;right:2px;top:9px;height:2px;
  background:rgba(0,0,0,.28);
}
.pnode.done .pn-pin{background:linear-gradient(180deg,#ffd98a,#c99a2e);}
.pnode.cur .pn-pin{background:linear-gradient(180deg,#a8e6f8,#4fc4e8);}

/* La tarjeta colgando */
.pn-card{
  position:relative;width:clamp(86px,9.5cqw,148px);
  background:linear-gradient(168deg,#f2ece0,#ddd4c4);
  border-radius:3px;padding:11px 8px 9px;
  display:flex;flex-direction:column;align-items:center;gap:2px;
  box-shadow:0 8px 16px rgba(0,0,0,.5);
  transform-origin:top center;
  transform:rotate(-1.2deg);
  transition:transform .18s;
}
.pnode:nth-child(even) .pn-card{transform:rotate(1.4deg);}
.pnode:hover .pn-card{transform:rotate(0deg) translateY(3px);}
.pnode.cur .pn-card{
  transform:rotate(0deg) scale(1.06);
  box-shadow:0 10px 22px rgba(0,0,0,.6),0 0 22px -4px #4fc4e8;
}
.pnode.big .pn-card{box-shadow:0 9px 20px rgba(0,0,0,.55),0 0 20px -6px var(--rc);}
.pnode.empty .pn-card{
  background:repeating-linear-gradient(45deg,rgba(200,192,175,.5) 0 7px,rgba(178,170,153,.5) 7px 14px);
  box-shadow:0 6px 12px rgba(0,0,0,.4);
}
.pn-icon{
  font-size:clamp(19px,2.6cqw,30px);line-height:1;
  width:100%;aspect-ratio:1.35;display:flex;align-items:center;justify-content:center;
  background:#141f29;border-radius:2px;color:#e8e0cf;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.4),inset 0 3px 10px rgba(0,0,0,.5);
}
.pnode.empty .pn-icon{background:#2c3239;color:#5f6b78;}
.pn-name{
  font-family:'Permanent Marker',cursive;font-size:clamp(9px,1.15cqw,13px);
  color:#1a1410;line-height:1.15;text-align:center;margin-top:5px;
  word-break:break-word;
}
.pnode.empty .pn-name{color:#6b6353;}
.pn-sub{font-size:7px;letter-spacing:1px;text-transform:uppercase;color:#6b5c4a;}
.pn-ribbon{
  position:absolute;top:-7px;left:50%;transform:translateX(-50%) rotate(-2deg);
  font-family:'Bebas Neue';font-size:8px;letter-spacing:1.5px;color:#20140a;
  padding:1px 9px;border-radius:3px;z-index:4;box-shadow:1px 1px 0 rgba(0,0,0,.35);
}
.pn-excl{
  font-size:6px;letter-spacing:1px;background:#e23b3b;color:#fff;
  padding:1px 6px;border-radius:5px;margin-top:2px;
}
.pn-check{
  position:absolute;top:5px;right:6px;font-size:13px;color:#1f9c52;font-weight:700;
  text-shadow:0 1px 0 rgba(255,255,255,.6);
}
/* Número del nivel bajo la tarjeta */
.pn-lvl{
  margin-top:7px;width:26px;height:26px;line-height:24px;
  font-family:'Bebas Neue';font-size:15px;letter-spacing:1px;
  border:2px solid #3a5f79;background:#12222f;color:#8fa9b8;
  border-radius:50%;text-align:center;
  box-shadow:0 2px 0 rgba(0,0,0,.4);
}
.pnode.done .pn-lvl{background:#f0b840;color:#20140a;border-color:#a97c20;}
.pnode.cur .pn-lvl{background:#4fc4e8;color:#0b1622;border-color:#2f8fae;
  box-shadow:0 2px 0 rgba(0,0,0,.4),0 0 14px rgba(79,196,232,.6);}

/* ═══════════════════════════════════════════════════════════
   ██ AJUSTES FINALES: perfil, cartas, pase en 2 filas ██
   ═══════════════════════════════════════════════════════════ */

/* ── Perfil arriba a la izquierda ── */
.hub-top{align-items:flex-start;}
.hub-player{
  display:flex;align-items:center;gap:9px;flex-shrink:0;
  background:linear-gradient(160deg,rgba(29,52,72,.9),rgba(16,32,44,.9));
  border:2px solid #2f5670;border-radius:5px;padding:6px 12px 6px 7px;
  transform:rotate(-1.2deg);box-shadow:3px 3px 0 rgba(0,0,0,.45);
  max-width:42%;
}
.hp-av{
  width:clamp(30px,3.4cqw,44px);height:clamp(30px,3.4cqw,44px);flex-shrink:0;
  border-radius:50%;border:2px solid rgba(240,184,64,.6);overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  box-shadow:inset 0 -4px 8px rgba(0,0,0,.35);
}
.hp-av img{width:100%;height:100%;object-fit:contain;}
.hp-txt{display:flex;flex-direction:column;align-items:flex-start;gap:0;min-width:0;}
.hp-txt span{
  font-family:'Permanent Marker',cursive;
  font-size:clamp(11px,1.35cqw,17px);color:#f2e9d8;line-height:1.15;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;
}
.hp-txt em{
  font-family:'Permanent Marker',cursive;font-style:italic;
  font-size:clamp(8px,1cqw,12px);line-height:1.2;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;
}
.hub-profile{display:none;}

/* ── Cartas: la cabeza mucho más grande ── */
.card{padding:5% 4% 4%;}
.card-art{
  aspect-ratio:1.02;padding:2%;
  margin-bottom:2px;
}
.card-art img{max-width:100%;max-height:100%;}
.card-ph{width:88%;}
.card.c{width:clamp(132px,22cqw,272px);}
.card.l,.card.r{width:clamp(88px,14cqw,180px);}
.card-name{font-size:clamp(16px,2.8cqw,32px);margin-top:5px;}
.card.l .card-name,.card.r .card-name{font-size:clamp(12px,2cqw,22px);}
.card-stats{margin-top:5px;}
.card-stats>div{font-size:clamp(6px,.75cqw,9px);}
.carousel{max-height:56cqh;}

/* ── Pase: dos filas, todo a la vista ── */
.pass-track{
  display:flex;flex-direction:column;justify-content:center;gap:3cqh;
  overflow:visible;padding:1cqh 2% 2cqh;
}
.pass-track::before{display:none;}
.pass-row{
  position:relative;display:flex;justify-content:center;align-items:flex-start;
  gap:clamp(4px,.7cqw,14px);width:100%;
}
/* Cuerda por fila */
.pass-row::before{
  content:'';position:absolute;left:1%;right:1%;top:9px;height:3px;
  background:linear-gradient(180deg,#6b5a45,#3d3226);
  box-shadow:0 2px 5px rgba(0,0,0,.5);border-radius:2px;z-index:0;
}
.pnode{flex:1 1 0;min-width:0;max-width:150px;}
.pn-card{width:100%;padding:9px 6px 8px;}
.pn-icon{aspect-ratio:1.25;}
.pn-name{font-size:clamp(8px,.85cqw,12px);}
.pn-sub{font-size:clamp(5px,.55cqw,7px);}
.pn-lvl{width:23px;height:23px;line-height:21px;font-size:13px;margin-top:5px;}
.pn-pin{width:11px;height:22px;}

/* ── Vestuario: fichas con más presencia ── */
.cust-grid{grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:12px;}
.cust-card{padding:8px;border-radius:11px;}
.cust-prev{height:100px;border-radius:7px;}
.cust-prev.bg{height:70px;}
.cust-prev img{max-width:92%;max-height:92%;}
.cust-name{font-size:13px;font-weight:600;margin-top:6px;}
.cust-card.on{
  box-shadow:0 0 0 1px rgba(240,184,64,.5),0 6px 16px rgba(0,0,0,.5);
  transform:translateY(-3px);
}
.cust-eq{font-size:8px;padding:2px 7px;top:5px;left:5px;}
.cust-entity{
  background:linear-gradient(168deg,rgba(29,52,72,.6),rgba(16,32,44,.6));
  border:2px solid #2f5670;border-radius:12px;
  box-shadow:3px 4px 0 rgba(0,0,0,.35);
}
.cust-entity-name{
  display:flex;align-items:center;gap:8px;
  padding-bottom:7px;border-bottom:1px dashed rgba(90,130,155,.35);
}
.cust-entity-name::before{
  content:'';width:7px;height:20px;background:#f0b840;border-radius:2px;
  transform:rotate(-4deg);flex-shrink:0;
}
.ctabs{gap:7px;}

/* ═══════════════════════════════════════════════════════════
   ██ Las imágenes deben LLENAR su hueco, no solo caber ██
   Con max-width/max-height una imagen pequeña no se amplía.
   Con width/height 100% + object-fit:contain sí.
   ═══════════════════════════════════════════════════════════ */
.card-art img{width:100%;height:100%;object-fit:contain;max-width:none;max-height:none;}
.card-art{padding:4%;}
.cust-prev img{width:100%;height:100%;object-fit:contain;max-width:none;max-height:none;padding:4%;}
.cust-prev.bg img{object-fit:cover;padding:0;}
.shop-prev img{width:100%;height:100%;object-fit:contain;max-width:none;max-height:none;padding:5%;}
.hp-av img{width:100%;height:100%;object-fit:contain;}
.pn-icon img{width:100%;height:100%;object-fit:contain;}
/* Retrato algo más alto para que la cara respire */
.card-art{aspect-ratio:1;}

/* ═══════════════════════════════════════════════════════════
   ██ SELECTOR DE MODOS ██
   ═══════════════════════════════════════════════════════════ */
.mode-shelf{display:flex;flex-direction:column;align-items:center;gap:3px;width:100%;}
.ms-label{
  font-family:'Oswald';font-weight:700;font-size:clamp(7px,.85cqw,10px);
  letter-spacing:3px;color:#6d8496;
}
.ms-desc{
  font-size:clamp(9px,1.1cqw,13px);color:#8fa9b8;font-style:italic;
  min-height:1.2em;text-align:center;
}
.mode-btn{
  display:flex;flex-direction:column;align-items:center;gap:0;
  padding:5px 18px 6px;line-height:1.05;
}
.mb-name{font-family:'Bebas Neue';font-size:clamp(13px,1.6cqw,20px);letter-spacing:2px;}
.mb-soon{font-family:'Oswald';font-size:6px;letter-spacing:1.5px;opacity:.75;}
.mode-btn.off{opacity:.42;cursor:not-allowed;}
.mode-btn.off:hover{transform:rotate(-.6deg);}

/* ═══════════════════════════════════════════════════════════
   ██ PASE: reclamar recompensas ██
   ═══════════════════════════════════════════════════════════ */
.claim-all{
  background:linear-gradient(165deg,#5ce089,#2dcc70);color:#0b1622;
  border:2px solid #1f9c52;box-shadow:0 4px 0 #14713a;
  font-family:'Bebas Neue';letter-spacing:1.5px;
  animation:claimPulse 1.5s ease-in-out infinite;flex-shrink:0;
}
.claim-all:active{transform:translateY(3px);box-shadow:0 1px 0 #14713a;}
@keyframes claimPulse{50%{box-shadow:0 4px 0 #14713a,0 0 22px -2px #2dcc70;}}

/* Estados de los nodos */
.pnode.locked .pn-card{filter:grayscale(.85) brightness(.6);}
.pnode.locked .pn-pin{background:linear-gradient(180deg,#8d8677,#5d5849);}
.pn-locked{position:absolute;top:6px;right:7px;font-size:13px;opacity:.9;}

.pnode.claimable{cursor:pointer;}
.pnode.claimable .pn-card{
  animation:claimGlow 1.4s ease-in-out infinite;
  box-shadow:0 9px 20px rgba(0,0,0,.5),0 0 24px -3px #2dcc70;
}
.pnode.claimable .pn-pin{background:linear-gradient(180deg,#9cf5be,#2dcc70);}
.pnode.claimable:hover .pn-card{transform:rotate(0deg) translateY(4px) scale(1.05);}
@keyframes claimGlow{50%{box-shadow:0 9px 20px rgba(0,0,0,.5),0 0 34px 0 #2dcc70;}}
.pn-claim{
  position:absolute;bottom:-9px;left:50%;transform:translateX(-50%);
  font-family:'Bebas Neue';font-size:9px;letter-spacing:1.5px;
  background:#2dcc70;color:#0b1622;padding:2px 10px;border-radius:9px;
  box-shadow:0 2px 0 rgba(0,0,0,.4);white-space:nowrap;z-index:5;
}
.pnode.claimed .pn-card{opacity:.72;}
.pnode.claimed .pn-pin{background:linear-gradient(180deg,#ffd98a,#c99a2e);}

/* Aviso con número en el botón del pase */
.badge.count{
  width:auto;min-width:14px;height:14px;border-radius:8px;padding:0 4px;
  font-family:'Bebas Neue';font-size:9px;line-height:14px;color:#0b1622;
  background:#2dcc70;text-align:center;font-style:normal;
}

/* Previsualización de efectos en la tienda */
canvas.pfx-shop{width:100%;height:100%;border-radius:6px;}

/* ═══════════════════════════════════════════════════════════
   ██ PANTALLA DE ACCESO ██
   ═══════════════════════════════════════════════════════════ */
.screen.auth{
  z-index:60;justify-content:center;gap:3cqh;
  background:
    radial-gradient(ellipse at 50% 20%, rgba(240,184,64,.12), transparent 55%),
    repeating-linear-gradient(92deg, rgba(255,255,255,.014) 0 2px, transparent 2px 5px),
    linear-gradient(175deg,rgba(19,36,51,.96) 0%,rgba(8,15,24,.98) 100%);
}
.auth-brand{display:flex;flex-direction:column;align-items:center;gap:4px;}
.auth-brand h1{
  font-family:'Bebas Neue',sans-serif;font-size:clamp(34px,7cqw,86px);line-height:.85;
  transform:rotate(-3deg) skewX(-5deg);
  text-shadow:3px 0 0 #e23b3b,-3px 0 0 #4fa3d1,0 5px 0 rgba(0,0,0,.55),0 0 42px rgba(240,184,64,.3);
}
.auth-brand h1 span{color:#f0b840;text-shadow:3px 0 0 #a8261f,-3px 0 0 #2a6090,0 5px 0 rgba(0,0,0,.55);}
.auth-box{
  width:min(370px,86%);
  background:linear-gradient(168deg,rgba(29,52,72,.95),rgba(16,32,44,.95));
  border:2px solid #2f5670;border-radius:12px;padding:0 0 16px;
  box-shadow:5px 6px 0 rgba(0,0,0,.45);overflow:hidden;
}
.auth-tabs{display:flex;border-bottom:2px solid #2f5670;}
.auth-tabs button{
  flex:1;background:transparent;border:none;cursor:pointer;
  font-family:'Bebas Neue';font-size:clamp(14px,1.9cqw,20px);letter-spacing:2px;
  color:#7f9aa8;padding:11px 6px;transition:.13s;
}
.auth-tabs button.active{background:#f0b840;color:#20140a;}
.auth-tabs button:not(.active):hover{color:#f0b840;}
.auth-form{display:flex;flex-direction:column;gap:5px;padding:14px 18px 0;text-align:left;}
.auth-form label{
  font-family:'Oswald';font-weight:600;font-size:10px;letter-spacing:1.5px;
  text-transform:uppercase;color:#7f9aa8;margin-top:5px;
}
.auth-form input{
  font-family:'Oswald';font-size:15px;padding:9px 12px;
  background:#0b1622;border:1.5px solid #2f5670;color:#f2e9d8;border-radius:7px;
  width:100%;
}
.auth-form input:focus{outline:none;border-color:#f0b840;}
.auth-msg{font-size:11px;min-height:1.3em;font-weight:600;margin-top:4px;}
.auth-form .btn{margin-top:8px;width:100%;font-size:clamp(17px,2.2cqw,23px);}
.auth-form .btn:disabled{opacity:.6;cursor:wait;}
.auth-note{font-size:10px;color:#7f9aa8;line-height:1.5;margin-top:9px;text-align:center;}
.acc-name{font-family:'Permanent Marker',cursive;font-size:13px;color:#f0b840;}

/* ═══════════════════════════════════════════════════════════
   ██ BARAJA DE PERSONAJES (apilada, aguanta muchas cartas) ██
   ═══════════════════════════════════════════════════════════ */
.car-track{position:relative;display:block;height:100%;min-height:38cqh;}
.card{
  position:absolute;left:50%;top:50%;
  margin-top:-19cqh;
  transform-origin:center center;
  transition:transform .3s cubic-bezier(.34,1.3,.64,1), opacity .25s;
  width:clamp(118px,19cqw,236px);
}
.card.c{width:clamp(132px,21cqw,258px);}
.card.side{width:clamp(104px,16cqw,196px);}
.card.side .card-skin,.card.side .card-rar,.card.side .card-stats,.card.side .card-weird{display:none;}
.card.side .card-name{font-size:clamp(12px,1.9cqw,22px);margin-top:6px;}
.card.side:hover{filter:brightness(1.15);}
.card-weird{
  font-family:'Bebas Neue';font-size:8px;letter-spacing:2px;
  background:#9b5de5;color:#fff;padding:1px 8px;border-radius:3px;
  transform:rotate(-2deg);margin-top:3px;
}
.dot-count{
  font-family:'Bebas Neue';font-size:clamp(11px,1.4cqw,16px);letter-spacing:2px;
  color:#f0b840;background:rgba(16,32,44,.8);border:1px solid #2f5670;
  padding:1px 12px;border-radius:11px;
}

/* ═══════════════════════════════════════════════════════════
   ██ CÓDIGOS: feedback de verdad ██
   ═══════════════════════════════════════════════════════════ */
.code-body{justify-content:flex-start;gap:16px;padding:4% 3%;}
.code-panel{
  display:flex;flex-direction:column;align-items:center;gap:10px;
  background:linear-gradient(168deg,rgba(29,52,72,.9),rgba(16,32,44,.9));
  border:2px solid #2f5670;border-radius:12px;padding:18px 20px;
  box-shadow:4px 5px 0 rgba(0,0,0,.42);width:min(400px,92%);
}
.code-input{width:100%;}
.code-input.shake{animation:shakeX .4s;}
@keyframes shakeX{
  0%,100%{transform:translateX(0)}
  15%{transform:translateX(-9px)}35%{transform:translateX(8px)}
  55%{transform:translateX(-6px)}75%{transform:translateX(4px)}
}
.code-panel .btn{width:100%;}
.code-panel .btn:disabled{opacity:.6;cursor:wait;}

/* Tarjetón del premio */
.code-prize{
  position:relative;width:min(340px,90%);text-align:center;--rc:#f0b840;
  background:linear-gradient(168deg,#f2ece0,#ddd4c4);
  border:3px solid var(--rc);border-radius:12px;padding:16px 18px 14px;
  box-shadow:0 12px 28px rgba(0,0,0,.55),0 0 34px -6px var(--rc);
  overflow:hidden;
}
.code-prize.pop{animation:prizePop .55s cubic-bezier(.34,1.5,.64,1);}
@keyframes prizePop{
  0%{transform:scale(.6) rotate(-6deg);opacity:0}
  60%{transform:scale(1.06) rotate(2deg);opacity:1}
  100%{transform:scale(1) rotate(0);opacity:1}
}
.cp-burst{
  position:absolute;inset:-40%;pointer-events:none;
  background:conic-gradient(from 0deg, transparent 0 8deg, rgba(255,255,255,.28) 8deg 12deg, transparent 12deg 30deg);
  animation:spinBurst 9s linear infinite;
}
@keyframes spinBurst{to{transform:rotate(360deg)}}
.cp-head{
  position:relative;font-family:'Bebas Neue';font-size:13px;letter-spacing:2.5px;
  color:#8a6412;margin-bottom:4px;
}
.cp-icon{position:relative;font-size:44px;line-height:1.1;}
.cp-name{
  position:relative;font-family:'Permanent Marker',cursive;
  font-size:clamp(15px,2.2cqw,22px);color:#1a1410;line-height:1.2;margin-top:2px;
}
.cp-rar{
  position:relative;display:inline-block;margin-top:6px;
  font-family:'Bebas Neue';font-size:10px;letter-spacing:2px;color:#0b1622;
  padding:2px 12px;border-radius:10px;
}
.cp-hint{position:relative;font-size:10px;color:#6b5c4a;margin-top:7px;}

/* Historial */
.code-history{width:min(400px,92%);}
.ch-title{
  font-family:'Bebas Neue';font-size:14px;letter-spacing:2px;color:#7f9aa8;
  margin-bottom:6px;text-align:left;
}
.ch-list{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-start;}
.ch-tag{
  font-family:'Oswald';font-weight:600;font-size:10px;letter-spacing:1px;
  background:rgba(45,204,112,.14);border:1px solid rgba(45,204,112,.4);
  color:#2dcc70;padding:3px 10px;border-radius:9px;
}
.ch-empty{font-size:11px;color:#5f7686;font-style:italic;}

/* ═══════════════════════════════════════════════════════════
   ██ MODOS: preparado para muchos ██
   ═══════════════════════════════════════════════════════════ */
.ms-strip{display:flex;align-items:center;gap:6px;width:100%;justify-content:center;}
.ms-arrow{
  display:none;flex-shrink:0;background:rgba(16,32,44,.8);border:1px solid #2f5670;
  color:#f0b840;font-family:'Bebas Neue';font-size:18px;line-height:1;
  width:22px;height:30px;border-radius:5px;cursor:pointer;transition:.12s;
}
.ms-arrow:hover{background:#f0b840;color:#132433;}
.mode-shelf.many .ms-arrow{display:block;}
.mode-picker{
  display:flex;gap:7px;flex-wrap:wrap;justify-content:center;
  max-width:100%;
}
.mode-shelf.many .mode-picker{
  flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x proximity;
  padding:3px 2px;max-width:min(76cqw,780px);
  scrollbar-width:thin;scrollbar-color:#2f5670 transparent;
}
.mode-shelf.many .mode-picker::-webkit-scrollbar{height:5px;}
.mode-shelf.many .mode-picker::-webkit-scrollbar-thumb{background:#2f5670;border-radius:3px;}
.mode-shelf.many .mode-btn{flex-shrink:0;scroll-snap-align:center;}

/* ═══════════════════════════════════════════════════════════
   ██ BOTÓN DE JUGAR CON CONTEXTO ██
   ═══════════════════════════════════════════════════════════ */
.play-wrap{display:flex;flex-direction:column;align-items:center;gap:3px;}
.play-with{
  font-family:'Permanent Marker',cursive;
  font-size:clamp(9px,1.15cqw,14px);color:#8fa9b8;
  transform:rotate(-.8deg);
}
.play-with b{color:#f0b840;font-weight:400;}

/* ═══════════════════════════════════════════════════════════
   ██ SOCIAL: amigos, búsqueda y perfiles ██
   ═══════════════════════════════════════════════════════════ */
.stk.s8{transform:rotate(1.9deg);border-color:#2dcc70;color:#2dcc70;}
.search-bar{display:flex;gap:8px;margin-bottom:12px;}
.search-bar input{
  flex:1;font-family:'Oswald';font-size:14px;padding:9px 13px;
  background:#0b1622;border:2px solid #2f5670;color:#f2e9d8;border-radius:8px;
}
.search-bar input:focus{outline:none;border-color:#f0b840;}

.player-list{display:flex;flex-direction:column;gap:7px;}
.player-row{
  position:relative;display:flex;align-items:center;gap:11px;cursor:pointer;
  background:linear-gradient(168deg,rgba(29,52,72,.75),rgba(16,32,44,.75));
  border:2px solid #2f5670;border-radius:10px;padding:9px 12px;transition:.13s;
}
.player-row:hover{border-color:#f0b840;transform:translateX(3px);}
.pr-av{
  width:42px;height:42px;flex-shrink:0;border-radius:50%;overflow:hidden;
  border:2px solid rgba(240,184,64,.5);background:#101c26;
  display:flex;align-items:center;justify-content:center;
}
.pr-av img{width:100%;height:100%;object-fit:contain;}
.pr-info{flex:1;min-width:0;}
.pr-name{font-family:'Permanent Marker',cursive;font-size:15px;color:#f2e9d8;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pr-title{font-family:'Permanent Marker',cursive;font-size:11px;font-style:italic;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pr-stats{display:flex;flex-direction:column;align-items:flex-end;gap:1px;flex-shrink:0;}
.pr-lvl{font-family:'Bebas Neue';font-size:12px;letter-spacing:1.5px;color:#f0b840;}
.pr-best{font-size:10px;color:#7f9aa8;}
.pr-del{
  background:transparent;border:1px solid #4a5560;color:#8fa9b8;
  width:24px;height:24px;border-radius:50%;cursor:pointer;font-size:11px;flex-shrink:0;transition:.12s;
}
.pr-del:hover{background:#e23b3b;border-color:#e23b3b;color:#fff;}

/* Ficha de jugador */
.sub-back{margin-bottom:11px;}
.profile-card{
  background:linear-gradient(168deg,rgba(29,52,72,.92),rgba(16,32,44,.92));
  border:2px solid #2f5670;border-radius:13px;padding:18px;
  box-shadow:5px 6px 0 rgba(0,0,0,.42);max-width:520px;margin:0 auto;
}
.pc-top{display:flex;align-items:center;gap:14px;margin-bottom:14px;}
.pc-av{
  width:68px;height:68px;flex-shrink:0;border-radius:50%;overflow:hidden;
  border:3px solid rgba(240,184,64,.6);background:#101c26;
  display:flex;align-items:center;justify-content:center;
}
.pc-av img{width:100%;height:100%;object-fit:contain;}
.pc-name{font-family:'Permanent Marker',cursive;font-size:clamp(18px,2.4cqw,26px);color:#f2e9d8;}
.pc-title{font-family:'Permanent Marker',cursive;font-style:italic;font-size:13px;}
.pc-title.none{color:#5f7686;}
.pc-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:12px;}
.pc-stats>div{
  background:#0b1622;border:1px solid #2a4a5c;border-radius:8px;
  padding:8px 4px;text-align:center;
}
.pc-stats b{display:block;font-family:'Bebas Neue';font-size:22px;color:#f0b840;line-height:1;}
.pc-stats span{font-size:9px;letter-spacing:1px;text-transform:uppercase;color:#7f9aa8;}
.pc-sec{
  font-family:'Bebas Neue';font-size:14px;letter-spacing:2px;color:#8fa9b8;
  margin:10px 0 6px;padding-bottom:4px;border-bottom:1px dashed rgba(90,130,155,.3);
}
.pc-titles{display:flex;flex-wrap:wrap;gap:6px;}
.pc-tag{
  font-family:'Permanent Marker',cursive;font-size:11px;font-style:italic;
  border:1px solid;border-radius:9px;padding:3px 10px;background:rgba(0,0,0,.25);
}
.pc-btn{width:100%;margin-top:14px;}
.pc-me{
  text-align:center;font-size:11px;color:#7f9aa8;margin-top:14px;
  padding:8px;background:rgba(255,255,255,.04);border-radius:8px;
}

/* ═══════════════════════════════════════════════════════════
   ██ RECOMPENSAS: presentación con todas las de la ley ██
   ═══════════════════════════════════════════════════════════ */
.reward-overlay{
  position:absolute;inset:0;z-index:80;--rc:#f0b840;
  display:flex;align-items:center;justify-content:center;
  background:radial-gradient(ellipse at center, rgba(0,0,0,.72), rgba(0,0,0,.92));
  opacity:0;transition:opacity .28s;pointer-events:none;
}
.reward-overlay.show{opacity:1;pointer-events:auto;}
/* Rayos girando detrás */
.rw-rays{
  position:absolute;width:200%;aspect-ratio:1;pointer-events:none;
  background:conic-gradient(from 0deg,
    transparent 0 6deg, rgba(255,255,255,.05) 6deg 9deg,
    transparent 9deg 24deg);
  animation:rwSpin 22s linear infinite;
}
@keyframes rwSpin{to{transform:rotate(360deg)}}
.reward-overlay.rar-legendaria .rw-rays,
.reward-overlay.rar-omega .rw-rays{
  background:conic-gradient(from 0deg,
    transparent 0 5deg, var(--rc) 5deg 6.5deg,
    transparent 6.5deg 18deg);
  opacity:.22;animation-duration:14s;
}

.rw-card{
  position:relative;text-align:center;
  width:min(320px,84%);
  background:linear-gradient(168deg,#f4efe4,#ddd4c4);
  border:4px solid var(--rc);border-radius:16px;
  padding:20px 22px 18px;
  box-shadow:0 18px 44px rgba(0,0,0,.7), 0 0 60px -10px var(--rc);
  transform:scale(.55) rotate(-8deg);opacity:0;
  transition:transform .45s cubic-bezier(.22,1.5,.5,1), opacity .3s;
  overflow:hidden;
}
.reward-overlay.show .rw-card{transform:scale(1) rotate(-1deg);opacity:1;}
/* Barrido de brillo */
.rw-shine{
  position:absolute;top:0;bottom:0;width:55%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
  animation:rwShine 2.6s ease-in-out infinite;pointer-events:none;
}
@keyframes rwShine{0%{left:-60%}55%,100%{left:110%}}

.rw-top{
  position:relative;font-family:'Bebas Neue';font-size:15px;letter-spacing:3px;
  color:#8a6412;margin-bottom:8px;
}
.rw-icon{
  position:relative;font-size:62px;line-height:1;
  animation:rwPop .6s cubic-bezier(.22,1.6,.5,1) .15s both;
  filter:drop-shadow(0 5px 10px rgba(0,0,0,.32));
}
@keyframes rwPop{0%{transform:scale(0) rotate(-40deg)}100%{transform:scale(1) rotate(0)}}
.rw-name{
  position:relative;font-family:'Permanent Marker',cursive;
  font-size:clamp(17px,2.6cqw,25px);color:#1a1410;line-height:1.2;margin-top:6px;
}
.rw-sub{position:relative;font-size:11px;color:#6b5c4a;letter-spacing:1px;text-transform:uppercase;margin-top:2px;}
.rw-rar{
  position:relative;display:inline-block;margin-top:9px;
  font-family:'Bebas Neue';font-size:11px;letter-spacing:2.5px;color:#0b1622;
  padding:2px 14px;border-radius:11px;box-shadow:0 2px 0 rgba(0,0,0,.28);
}
.rw-btn{position:relative;width:100%;margin-top:14px;font-size:20px;}

/* Confeti */
.rw-confetti{position:absolute;inset:0;overflow:hidden;pointer-events:none;}
.rw-confetti i{
  position:absolute;top:-30px;border-radius:1px;
  animation:rwFall linear forwards;
}
@keyframes rwFall{
  0%{transform:translateY(0) rotate(0);opacity:1}
  100%{transform:translateY(140%) rotate(680deg);opacity:0}
}

/* Un aro extra para las omega */
.reward-overlay.rar-omega .rw-card{
  animation:omegaShake 2.2s ease-in-out infinite;
}
@keyframes omegaShake{
  0%,100%{box-shadow:0 18px 44px rgba(0,0,0,.7),0 0 60px -10px var(--rc)}
  50%{box-shadow:0 18px 44px rgba(0,0,0,.7),0 0 92px -4px var(--rc)}
}

/* ═══════════════════════════════════════════════════════════
   ██ TIENDA: filtros ██
   ═══════════════════════════════════════════════════════════ */
.shop-filters{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:13px;}
.sf{
  font-family:'Oswald';font-weight:600;font-size:11px;letter-spacing:.5px;
  background:rgba(16,32,44,.7);border:1px solid #2f5670;color:#9fc0d0;
  padding:6px 13px;border-radius:18px;cursor:pointer;transition:.13s;
  display:flex;align-items:center;gap:6px;
}
.sf b{font-family:'Bebas Neue';font-size:14px;color:#f0b840;}
.sf:hover{border-color:#f0b840;}
.sf.on{background:#f0b840;color:#20140a;border-color:#f0b840;}
.sf.on b{color:#20140a;}

/* ═══════════════════════════════════════════════════════════
   ██ VESTUARIO: progreso por categoría ██
   ═══════════════════════════════════════════════════════════ */
.cust-head-bar{
  display:flex;align-items:center;gap:12px;margin-bottom:12px;flex-wrap:wrap;
  background:rgba(16,32,44,.5);border:1px solid #2a4a5c;border-radius:10px;padding:9px 13px;
}
.chb-left{flex:1;min-width:140px;}
.chb-num{font-size:11px;color:#8fa9b8;margin-bottom:4px;}
.chb-num b{font-family:'Bebas Neue';font-size:18px;color:#f0b840;}
.chb-bar{height:6px;background:rgba(255,255,255,.1);border-radius:4px;overflow:hidden;}
.chb-bar i{display:block;height:100%;background:linear-gradient(90deg,#f0b840,#ffd980);
  border-radius:4px;transition:width .45s;}
.chb-filter{
  font-family:'Oswald';font-weight:600;font-size:11px;
  background:transparent;border:1px solid #2f5670;color:#9fc0d0;
  padding:6px 13px;border-radius:18px;cursor:pointer;transition:.13s;flex-shrink:0;
}
.chb-filter:hover{border-color:#f0b840;color:#f0b840;}
.chb-filter.on{background:#2dcc70;border-color:#2dcc70;color:#0b1622;}
.ctab em{
  font-style:normal;font-size:9px;opacity:.75;margin-left:4px;
  font-family:'Oswald';font-weight:600;
}
.ctab.full{border-color:#2dcc70;}
.ctab.full em{color:#2dcc70;opacity:1;}
.ctab.active.full em{color:#0b1622;}

/* Resumen del pase y desglose de XP */
.pass-summary{flex-shrink:0;min-width:130px;}
.ps-num{font-size:10px;color:#8fa9b8;margin-bottom:3px;}
.ps-num b{font-family:'Bebas Neue';font-size:17px;color:#2dcc70;}
.ps-bar{height:5px;background:rgba(255,255,255,.1);border-radius:3px;overflow:hidden;}
.ps-bar i{display:block;height:100%;background:linear-gradient(90deg,#2dcc70,#7ceda3);border-radius:3px;transition:width .5s;}
.oxp-break{display:flex;flex-wrap:wrap;gap:5px;justify-content:center;margin-top:6px;}
.oxp-break span{
  font-size:9px;color:#8fa9b8;background:rgba(255,255,255,.06);
  padding:2px 8px;border-radius:8px;
}
.oxp-break b{color:#2dcc70;font-family:'Bebas Neue';font-size:12px;}
.oxp-claim{
  width:100%;margin-top:9px;font-size:14px;
  background:linear-gradient(165deg,#5ce089,#2dcc70);color:#0b1622;
  border:2px solid #1f9c52;box-shadow:0 3px 0 #14713a;
  animation:claimPulse 1.5s ease-in-out infinite;
}

/* ═══════════════════════════════════════════════════════════
   ██ TERMINAL DE TRUCOS ██
   ═══════════════════════════════════════════════════════════ */
.cheat-box{
  position:absolute;left:12px;bottom:12px;z-index:95;
  width:min(360px,72%);
  background:rgba(6,12,18,.94);
  border:1px solid #2dcc70;border-radius:8px;
  font-family:'Courier New',monospace;
  box-shadow:0 8px 26px rgba(0,0,0,.7),0 0 22px -8px #2dcc70;
  overflow:hidden;
  animation:chOpen .18s ease-out;
}
@keyframes chOpen{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}
.cheat-head{
  display:flex;align-items:center;gap:7px;
  background:rgba(45,204,112,.12);border-bottom:1px solid rgba(45,204,112,.3);
  padding:5px 9px;
}
.ch-dot{width:7px;height:7px;border-radius:50%;background:#2dcc70;flex-shrink:0;
  animation:chBlink 1.6s infinite;}
@keyframes chBlink{50%{opacity:.3}}
.ch-title{font-size:10px;letter-spacing:2px;color:#2dcc70;font-weight:700;}
.ch-tip{font-size:8px;color:#5f7686;margin-left:auto;}
.ch-x{background:transparent;border:none;color:#5f7686;cursor:pointer;font-size:11px;padding:0 2px;}
.ch-x:hover{color:#e23b3b;}

.cheat-out{
  max-height:170px;overflow-y:auto;padding:7px 9px;
  font-size:11px;line-height:1.55;color:#9fc0d0;
  scrollbar-width:thin;scrollbar-color:#2dcc70 transparent;
}
.cheat-out::-webkit-scrollbar{width:5px;}
.cheat-out::-webkit-scrollbar-thumb{background:#2a4a5c;border-radius:3px;}
.ch-line{margin-bottom:3px;word-break:break-word;}
.ch-line b{color:#f0b840;font-weight:700;}
.ch-in{color:#7fdcff;}
.ch-ok{color:#2dcc70;}
.ch-err{color:#e23b3b;}
.ch-hint{color:#5f7686;font-style:italic;}

.cheat-in{
  display:flex;align-items:center;gap:6px;
  border-top:1px solid rgba(45,204,112,.25);padding:5px 9px;
  background:rgba(45,204,112,.05);
}
.ch-prompt{color:#2dcc70;font-weight:700;font-size:12px;}
.cheat-in input{
  flex:1;background:transparent;border:none;outline:none;
  font-family:'Courier New',monospace;font-size:12px;color:#e8e0cf;
}
.cheat-in input::placeholder{color:#3d5666;}

@media(max-width:600px){
  .cheat-box{width:88%;left:6%;}
  .cheat-out{max-height:130px;}
}

/* ═══════════════════════════════════════════════════════════
   ██ EL MENÚ CAMBIA CON EL MODO ██
   ═══════════════════════════════════════════════════════════ */
#wrap{--accent:#f0b840;--accent2:#e23b3b;--sky1:#0e2233;--sky2:#1b4250;}

/* Todo lo dorado pasa a usar el color del modo */
.screen.hub{
  background:
    radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 55%),
    radial-gradient(ellipse at 50% 100%, color-mix(in srgb, var(--accent2) 10%, transparent), transparent 50%),
    repeating-linear-gradient(92deg, rgba(255,255,255,.014) 0 2px, transparent 2px 5px),
    repeating-linear-gradient(0deg, rgba(0,0,0,.16) 0 1px, transparent 1px 4px),
    linear-gradient(175deg, color-mix(in srgb, var(--sky1) 82%, transparent) 0%,
                            color-mix(in srgb, var(--sky2) 26%, #0b1622) 60%,
                            rgba(8,15,24,.92) 100%);
  transition:background .55s ease;
}
.hub-brand h1{
  text-shadow:3px 0 0 var(--accent2), -3px 0 0 #4fa3d1,
    0 5px 0 rgba(0,0,0,.55), 0 0 42px color-mix(in srgb, var(--accent) 35%, transparent);
  transition:text-shadow .45s;
}
.hub-brand h1 span{color:var(--accent);transition:color .45s;}
.hub-brand .tag{
  background:color-mix(in srgb, var(--accent2) 16%, transparent);
  border-color:color-mix(in srgb, var(--accent2) 55%, transparent);
  color:color-mix(in srgb, var(--accent2) 70%, white);
  transition:.45s;
}
.hub-wallet{border-color:color-mix(in srgb, var(--accent) 50%, transparent);transition:border-color .45s;}
.mode-btn.active{
  background:linear-gradient(160deg, var(--accent), color-mix(in srgb, var(--accent) 75%, black));
  border-color:color-mix(in srgb, var(--accent) 70%, black);
  box-shadow:2px 2px 0 rgba(0,0,0,.5),0 0 18px -4px var(--accent);
}
.btn-play{
  background:linear-gradient(165deg,
    color-mix(in srgb, var(--accent) 78%, white),
    var(--accent) 60%,
    color-mix(in srgb, var(--accent) 82%, black));
  border-color:color-mix(in srgb, var(--accent) 55%, black);
  transition:background .45s, border-color .45s;
}
.car-arrow{color:var(--accent);}
.car-arrow:hover{background:var(--accent);}
.dot.on{background:var(--accent);}
.hp-av{border-color:color-mix(in srgb, var(--accent) 60%, transparent);}
.hub-lvl:hover{border-color:var(--accent);}
.lvl-num b{color:var(--accent);}
.lvl-bar i{background:linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 55%, white));}
.ms-arrow{color:var(--accent);}
.ms-arrow:hover{background:var(--accent);}
.play-with b{color:var(--accent);}

/* Destello al cambiar de modo */
.mode-flash::after{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:5;
  background:radial-gradient(ellipse at center, color-mix(in srgb, var(--accent) 30%, transparent), transparent 65%);
  animation:modeFlash .6s ease-out forwards;
}
@keyframes modeFlash{0%{opacity:0}22%{opacity:1}100%{opacity:0}}

/* La descripción entra deslizando al cambiar */
.ms-desc.swap{animation:descSwap .38s ease-out;}
@keyframes descSwap{
  0%{opacity:0;transform:translateY(7px)}
  100%{opacity:1;transform:none}
}

/* ── Ambientes concretos ── */
.vibe-danger .hub-brand h1{animation:dangerShake 4.5s ease-in-out infinite;}
@keyframes dangerShake{
  0%,88%,100%{transform:rotate(-3deg) skewX(-5deg)}
  91%{transform:rotate(-4.5deg) skewX(-6deg) translateX(-3px)}
  94%{transform:rotate(-1.5deg) skewX(-4deg) translateX(3px)}
}
.vibe-speed .hub-brand h1{letter-spacing:-1px;transform:rotate(-3deg) skewX(-13deg);}
.vibe-chaos .hub-brand h1 span{animation:chaosHue 3.5s linear infinite;}
@keyframes chaosHue{to{filter:hue-rotate(360deg)}}
.vibe-spooky .screen.hub::after{
  box-shadow:inset 0 0 150px 45px rgba(0,0,0,.72);
}
.vibe-boss .btn-play{animation:bossPulse 2.2s ease-in-out infinite;}
@keyframes bossPulse{
  0%,100%{box-shadow:5px 5px 0 rgba(0,0,0,.5), inset 0 2px 0 rgba(255,255,255,.45)}
  50%{box-shadow:5px 5px 0 rgba(0,0,0,.5), inset 0 2px 0 rgba(255,255,255,.45), 0 0 30px -4px var(--accent)}
}
.vibe-arena .card.c{box-shadow:0 8px 26px rgba(0,0,0,.5),0 0 30px -6px var(--accent);}