/* ===== El Parche · estilo moderno: oscuro por defecto, claro opcional ===== */
:root,html[data-theme=dark]{--bg:#000;--sf:#1d1d1f;--sf2:#2a2a2d;--sf3:#3a3a3c;--tx:#f5f5f7;--mut:#86868b;--hl:#333336;--acc:#0071e3;--acc2:#0077ed;--lnk:#2997ff;--ink:var(--tx);--line:var(--hl);
  --g:#30d158;--g2:#30d158;--gl:rgba(48,209,88,.16);--bl:#0a84ff;--bl2:#2997ff;--bll:rgba(10,132,255,.18);--rd:#ff453a;--rd2:#ff6961;--y:#ffd60a;--y2:#ffd60a;--or:#ff9f0a;--pu:#bf5af2;--navy:var(--tx);--ok:#30d158;--bad:#ff453a;
  --sheetbg:rgba(0,0,0,.6);--glass:rgba(29,29,31,.72);--chipbg:rgba(66,66,69,.72);color-scheme:dark}
html[data-theme=light]{--bg:#f5f5f7;--sf:#fff;--sf2:#f0f0f2;--sf3:#e8e8ed;--tx:#1d1d1f;--mut:#6e6e73;--hl:#d2d2d7;--lnk:#0066cc;
  --g:#28a745;--g2:#1f8a3a;--gl:rgba(40,167,69,.12);--bl:#0071e3;--bl2:#0066cc;--bll:rgba(0,113,227,.1);--rd:#e5383b;--rd2:#d70015;--ok:#28a745;--bad:#e5383b;
  --sheetbg:rgba(0,0,0,.35);--glass:rgba(255,255,255,.72);--chipbg:rgba(0,0,0,.06);color-scheme:light}
body{background:var(--bg)!important;color:var(--tx);font-family:Inter,-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",system-ui,sans-serif;font-weight:500;letter-spacing:-.01em;-webkit-font-smoothing:antialiased}
#bgfx{background:radial-gradient(700px 420px at 50% -120px,rgba(10,132,255,.22),transparent 70%)!important;opacity:1}
html[data-theme=light] #bgfx{background:radial-gradient(700px 420px at 50% -120px,rgba(0,113,227,.10),transparent 70%)!important}
h2,.card h2{color:var(--tx);font-weight:700;letter-spacing:-.02em}
b{font-weight:700}
.mut,.wh{color:var(--mut)!important;font-weight:500}.log{color:var(--mut)}
/* superficies */
.card{background:var(--sf);border:1px solid var(--hl);border-radius:28px;box-shadow:none;padding:20px;color:var(--tx)}
.sheet{background:var(--sheetbg);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.sheet>div{background:var(--sf);color:var(--tx);border:1px solid var(--hl);border-bottom:0;border-radius:28px 28px 0 0}
/* botones tipo píldora */
.btn{background:var(--chipbg);color:var(--tx);border:0;border-radius:999px;box-shadow:none;font-weight:600;letter-spacing:-.01em;text-transform:none!important;min-height:50px;transition:transform .12s,background .15s,opacity .15s}
.btn:active{transform:scale(.97);border:0}
.btn.pri{background:var(--acc);color:#fff}.btn.pri:hover{background:var(--acc2)}
.btn.tl,.btn.blu{background:var(--sf3);color:var(--tx)}
.btn.red{background:var(--rd);color:#fff}.btn.pk{background:var(--pu);color:#fff}
.btn.s{border-bottom-width:0;min-height:38px}
.btn.big{font-weight:700}
.tag{background:var(--chipbg);border:0;color:var(--mut);font-weight:600}.tag.on{background:var(--acc);color:#fff}
.inp{background:var(--sf2);border:1px solid var(--hl);color:var(--tx);border-radius:14px;font-weight:500}
.inp:focus{border-color:var(--lnk);background:var(--sf2);box-shadow:0 0 0 3px rgba(41,151,255,.25)}
.inp::placeholder{color:var(--mut)}
.seg button{background:var(--sf2);border:1px solid var(--hl);color:var(--tx);font-weight:600;border-radius:999px}
.seg button.on{background:var(--acc);border-color:var(--acc);color:#fff}
/* logo */
.logo{color:var(--tx);padding:8px 0 4px}
.logo b{color:var(--tx)!important;font-weight:800;letter-spacing:-.04em;font-size:52px}
.logo b small{color:var(--mut);font-weight:600;font-size:28px}
.logo span{color:var(--mut);font-weight:500}
.famlogo{filter:drop-shadow(0 18px 30px rgba(10,132,255,.25))}
html[data-theme=light] .famlogo{filter:drop-shadow(0 14px 24px rgba(0,0,0,.15))}
.thbtn{position:absolute;right:14px;top:calc(12px + env(safe-area-inset-top));width:42px;height:42px;border-radius:50%;border:1px solid var(--hl);background:var(--glass);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);font-size:19px;display:grid;place-items:center;cursor:pointer;z-index:5}
#app{position:relative}
/* barra superior */
.top,.ghead{color:var(--tx)}.ghead{font-weight:700}
.top .code{background:var(--sf);border:1px solid var(--hl);color:var(--tx);border-radius:999px}
.bar,.tbar{background:var(--sf3);height:8px;border-radius:99px}.bar b{background:var(--lnk);box-shadow:none}
.tbar{height:26px}.tbar span{color:var(--tx)}
.bigcode{color:var(--tx)!important;font-weight:800;letter-spacing:.18em}
/* jugadores */
.chip{background:var(--sf2);border:1px solid var(--hl);border-left:4px solid var(--tc,var(--hl));color:var(--tx);font-weight:600}.chip.me{background:var(--bll)}.chip b{color:var(--g)}
.pl{border-bottom:1px solid var(--hl)}.pl .av{background:var(--sf2);border:2px solid var(--tc,var(--hl))}
.pl .n{font-weight:600}.pl .pts{color:var(--tx);font-weight:700}
.avbtn{box-shadow:0 0 0 1px var(--hl),0 10px 24px rgba(0,0,0,.35)}
.avbtn em{background:var(--acc);border:2px solid var(--sf);font-size:14px}
.avp{box-shadow:0 0 0 2px var(--sf),0 0 0 3px var(--lnk)}
.avw{background:var(--sf2)}
.avbig{box-shadow:0 0 0 1px var(--hl),0 16px 34px rgba(0,0,0,.35)}
.avtabs button{background:var(--sf2);border:1px solid var(--hl);color:var(--mut);border-radius:999px;font-weight:600}
.avtabs button.on{background:var(--acc);border-color:var(--acc);color:#fff}
.avgrid button{background:var(--sf2);border:1px solid var(--hl);border-radius:18px}
.avgrid button.on{border-color:var(--lnk);background:var(--bll);box-shadow:0 0 0 2px var(--lnk)}
.kbd{background:var(--sf2);border:1px solid var(--hl)}
/* menú de juegos */
.gc{background:var(--sf);border:1px solid var(--hl);border-radius:24px;box-shadow:none;transition:transform .15s}
.gc:active{transform:scale(.97);border-bottom-width:1px}
.gc .cov{background:linear-gradient(160deg,var(--c1),color-mix(in srgb,var(--c1) 55%,#000))}
.gc .cov i{filter:drop-shadow(0 8px 12px rgba(0,0,0,.35))}
.gc b{color:var(--tx);font-weight:700}.gc span{color:var(--mut);font-weight:500}
/* preguntas y juegos */
.opt{background:var(--sf2);border:1px solid var(--hl);color:var(--tx);border-radius:18px;font-weight:600}
.opt:active{transform:scale(.98);border-bottom-width:1px}
.opt.sel{background:var(--bll);border-color:var(--lnk);color:var(--tx)}
.opt.ok{background:var(--gl);border-color:var(--g);color:var(--tx)}
.opt.bad{background:rgba(255,69,58,.16);border-color:var(--rd);color:var(--tx)}
.res.ok{color:var(--g)}.res.bad{color:var(--rd)}
.flag{box-shadow:0 0 0 1px var(--hl),0 10px 24px rgba(0,0,0,.3)}
.tiles span{background:var(--sf2);border:1px solid var(--hl);color:var(--tx)}
.tiles span.on{background:var(--y);border-color:var(--y);color:#1d1d1f}
.letter{background:linear-gradient(160deg,#ff6961,#d70015);border:0;box-shadow:0 14px 30px rgba(255,69,58,.35)}
.kb button{background:var(--sf2);border:1px solid var(--hl);color:var(--tx)}
.kb button.y{background:var(--g);border-color:var(--g);color:#fff}
.kb button.n{background:transparent;border-color:var(--hl);color:var(--sf3)}
.sky,#cv{border:1px solid var(--hl)}
.toast{background:var(--glass);color:var(--tx);border:1px solid var(--hl);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);font-weight:600;border-radius:999px}
.ans{border-bottom:1px solid var(--hl)}.ans .v{background:var(--sf2);color:var(--tx)}
.fld label{color:var(--tx)}
input[type=range]{background:var(--sf3)}
.bcard{background:linear-gradient(160deg,#0a84ff,#0040dd);border:0;border-radius:24px}
.bcard button{background:var(--sf);color:var(--tx)}
.frhow span{background:var(--sf2);border:1px solid var(--hl)}
.frcard{background:linear-gradient(160deg,#ff9f0a,#ff6b00);border:0;border-radius:28px;box-shadow:0 20px 40px rgba(255,140,0,.25)}
.frcard.ok{background:linear-gradient(160deg,#30d158,#1f9d42)}.frcard.no{background:linear-gradient(160deg,#ff453a,#c4001a)}
.frcard em{color:#ff6b00}
.frlist span{border:1px solid var(--hl)}.frlist .ok{background:var(--gl);border-color:var(--g);color:var(--g)}.frlist .no{background:var(--sf2);color:var(--mut)}
.pad.rx{border:1px solid var(--hl);border-radius:28px}
.rxr,.rxrule .bigtx{color:var(--tx)}
.mem button.up{background:var(--sf)}
.podium div em{border-radius:14px 14px 0 0}
/* respeto a quien prefiere menos movimiento */
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important}}
/* logo de la familia */
.famimg{display:block;width:min(78vw,300px);aspect-ratio:1;margin:0 auto 2px;border-radius:36px;animation:famf 5s ease-in-out infinite;filter:drop-shadow(0 20px 40px rgba(10,132,255,.3))}
.famimg.sm{width:150px;margin-bottom:8px;animation:none}
@keyframes famf{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.avgrid.fam{grid-template-columns:repeat(3,1fr)}
.avgrid.fam button{display:flex;flex-direction:column;gap:4px;aspect-ratio:auto;padding:8px}
.avgrid.fam img{width:100%;aspect-ratio:1;border-radius:50%;object-fit:cover}
.avgrid.fam small{font-weight:600;color:var(--tx);font-size:13px}
.avp.avf{animation:none}
.gemg{margin-top:14px;padding:14px;border:1px solid var(--hl);border-radius:22px;background:var(--sf2)}
.gemg ol{margin:8px 0 10px;padding-left:22px;color:var(--mut);font-size:15px;line-height:1.45}
.gemg a.btn{text-decoration:none;display:flex;align-items:center;justify-content:center}
/* En la frente: palabra horizontal a pantalla completa */
.frland{position:fixed;inset:0;z-index:30;background:#000;--L:100vw;--S:100vh}
.frin{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(160deg,#ff9f0a,#ff6b00);color:#fff;text-align:center;padding:4vmin;transition:background .2s}
.frland.ok .frin{background:linear-gradient(160deg,#30d158,#1f9d42)}.frland.no .frin{background:linear-gradient(160deg,#ff453a,#c4001a)}
.frin b{font-weight:900;line-height:1.02;text-transform:uppercase;letter-spacing:-.01em;word-break:break-word;animation:popin .3s;max-width:100%}
.frtop{position:absolute;top:3vmin;left:4vmin;right:4vmin;display:flex;justify-content:space-between;align-items:center;gap:10px;font-weight:700}
.frtop small{font-size:clamp(14px,3.4vmin,22px);background:rgba(0,0,0,.18);border-radius:99px;padding:4px 14px}
.frtop .cd{font-size:clamp(16px,4vmin,26px)}
.frtop em{font-style:normal;background:#fff;color:#ff6b00;border-radius:99px;padding:3px 14px;font-size:clamp(16px,4vmin,24px)}
.frside{position:absolute;bottom:3vmin;left:4vmin;right:4vmin;display:flex;justify-content:space-between;gap:12px}
.frb{border:0;border-radius:99px;padding:10px 22px;font:inherit;font-weight:700;font-size:clamp(15px,3.6vmin,22px);color:#fff;background:rgba(0,0,0,.25)}
.frb.ok{background:rgba(255,255,255,.95);color:#1f9d42}
@media (orientation:portrait){.frland{--L:100vh;--S:100vw}.frin{width:100vh;height:100vw;inset:auto;top:0;left:100vw;transform-origin:top left;transform:rotate(90deg)}}
/* escalera: ficha casilla por casilla */
.tok.step{transition:left .26s ease-out,top .26s ease-out}.tok.step b{animation:sthop .34s ease-in-out infinite}
.tok.jump{transition:left 1.1s ease-in-out,top 1.1s ease-in-out;z-index:5}
@keyframes sthop{0%,100%{transform:translateY(0)}50%{transform:translateY(-35%)}}
.dicebox .cube{transition:transform 1.4s cubic-bezier(.15,.7,.2,1)}
/* Parqués */
.pqb{--pqc:#f2efe6;--pqbg:#2a2a2d;border-radius:24px;overflow:hidden;border:1px solid var(--hl);margin:6px 0}
html[data-theme=light] .pqb{--pqbg:#e9e4d8;--pqc:#fff}
.pqb svg{display:block;width:100%}
.pqt.cur circle{animation:pqp 1s ease-in-out infinite}@keyframes pqp{50%{stroke-width:1.4}}
.pqdot{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;color:#fff;font-weight:700;font-size:13px;flex:none;box-shadow:0 0 0 2px rgba(255,255,255,.5)}
.pqdot.big{width:18px;height:18px;vertical-align:middle}
.pqopts{display:grid;gap:8px;margin:8px 0}
.pqrow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:var(--sf2);border:1px solid var(--hl);border-radius:18px;padding:8px 10px}
.pqrow small{flex:1;color:var(--mut);text-align:left}
.pqrow .btn.s{min-height:38px;padding:6px 14px}
/* Magnate */
.mgb{display:grid;grid-template-columns:repeat(7,1fr);grid-template-rows:repeat(7,1fr);gap:2px;aspect-ratio:1;background:var(--hl);border-radius:20px;overflow:hidden;border:1px solid var(--hl);margin:6px 0}
.mgc{position:relative;background:var(--sf);display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:2px 1px;font-size:8.5px;line-height:1.05;text-align:center;overflow:hidden;min-width:0}
.mgc i{display:block;width:100%;height:5px;border-radius:2px;margin-bottom:1px;flex:none}
.mgc .mgn{font-weight:700;color:var(--tx);word-break:break-word}
.mgc small{color:var(--mut);font-size:8px}
.mgc em{font-style:normal;font-size:7px;line-height:1}
.mgc.own{box-shadow:inset 0 0 0 2px var(--oc)}
.mgc.tgo{background:linear-gradient(160deg,#30d158,#1f9d42)}.mgc.tgo .mgn{color:#fff}
.mgc.tgj,.mgc.tj{background:var(--sf2)}
.mgt{position:absolute;bottom:1px;left:0;right:0;display:flex;justify-content:center;flex-wrap:wrap}
.mgt b{width:19px;height:19px;border-radius:50%;display:grid;place-items:center;font-size:13px;background:var(--sf2);box-shadow:0 0 0 2px var(--tc);margin:0 -3px;overflow:hidden;animation:sthop .9s ease-in-out infinite}
.mgt b .avs,.mgt b .avp{width:100%;height:100%}
.mgmid{grid-row:2/7;grid-column:2/7;background:radial-gradient(circle at 50% 30%,rgba(10,132,255,.25),var(--sf) 70%);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:8px;text-align:center;gap:4px}
.mgmid>b{font-size:20px;letter-spacing:-.02em}
.mgmid p{font-size:13px;color:var(--tx);margin:0;line-height:1.3}
.mgmid .dicebox{min-height:70px;transform:scale(.8)}
.mgsw{display:inline-block;width:12px;height:12px;border-radius:4px;margin:1px;vertical-align:middle}