:root{--sai-top:var(--safe-area-inset-top,env(safe-area-inset-top,0px));--sai-right:var(--safe-area-inset-right,env(safe-area-inset-right,0px));--sai-bottom:var(--safe-area-inset-bottom,env(safe-area-inset-bottom,0px));--sai-left:var(--safe-area-inset-left,env(safe-area-inset-left,0px));--adh:0px;--tbh:3.6rem;--bg:#F3F4FA;--sf:#FFFFFF;--ink:#0E1230;--mut:#5B6188;--ac:#1F55E8;--on:#FFFFFF;--bd:#D3D7E8;--wn:#D3103A;--ok:#0B7D63;--warn:#9A5B00;--y:#FFC400;--live:#E0173F;--nv:#0E1B6B;--r:8px;--r2:12px;--s1:.25rem;--s2:.5rem;--s3:.75rem;--s4:1rem;--s5:1.5rem}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#0E1020;--sf:#161931;--ink:#F2F4FF;--mut:#A3ABD6;--ac:#7FA0FF;--on:#0E1020;--bd:#2A2F55;--wn:#FF6F8A;--ok:#2FD2A3;--warn:#FFB84D;--y:#FFD21F;--live:#FF2D55;--nv:#171B4A}}
:root[data-theme=dark]{--bg:#0E1020;--sf:#161931;--ink:#F2F4FF;--mut:#A3ABD6;--ac:#7FA0FF;--on:#0E1020;--bd:#2A2F55;--wn:#FF6F8A;--ok:#2FD2A3;--warn:#FFB84D;--y:#FFD21F;--live:#FF2D55;--nv:#171B4A}
@supports (color:light-dark(#000,#fff)){:root{color-scheme:light dark;--bg:light-dark(#F3F4FA,#0E1020);--sf:light-dark(#FFFFFF,#161931);--ink:light-dark(#0E1230,#F2F4FF);--mut:light-dark(#5B6188,#A3ABD6);--ac:light-dark(#1F55E8,#7FA0FF);--on:light-dark(#FFFFFF,#0E1020);--bd:light-dark(#D3D7E8,#2A2F55);--wn:light-dark(#D3103A,#FF6F8A);--ok:light-dark(#0B7D63,#2FD2A3);--warn:light-dark(#9A5B00,#FFB84D);--y:light-dark(#FFC400,#FFD21F);--live:light-dark(#E0173F,#FF2D55);--nv:light-dark(#0E1B6B,#171B4A)}:root[data-theme=light]{color-scheme:light}:root[data-theme=dark]{color-scheme:dark}}
*{box-sizing:border-box}body{margin:0;padding:var(--sai-top) var(--sai-right) var(--sai-bottom) var(--sai-left);background:var(--bg);color:var(--ink);font:16px/1.5 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased}
h1,h2{margin:0}h1,h2,h3,h4{font-weight:500;letter-spacing:-.01em}h2{font-size:1.15rem}
header,.bar,nav,main{max-width:1100px;margin:auto;padding:.6rem 1rem}
header{display:flex;flex-wrap:wrap;gap:.5rem 1rem;align-items:center}header p{margin:0;color:var(--mut);flex:1}
.bar,.row{display:flex;flex-wrap:wrap;gap:.5rem;align-items:flex-end}
button,.btn,select,input{font:inherit;color:var(--ink);background:var(--sf);border:1px solid var(--bd);border-radius:8px;padding:.5rem .75rem;min-height:44px}
button,.btn{cursor:pointer;display:inline-flex;align-items:center}.pri{background:var(--ac);color:var(--on);border-color:var(--ac);font-weight:500}
button:focus-visible,input:focus-visible,select:focus-visible,.btn:focus-within{outline:3px solid var(--ac);outline-offset:2px}
nav{display:flex;gap:.25rem;border-bottom:1px solid var(--bd)}nav .tl button,nav #pmb{border:0;border-bottom:3px solid transparent;border-radius:0;background:none}nav .on{border-color:var(--ac);font-weight:500}
label{display:flex;flex-direction:column;gap:.2rem;font-size:.9rem;color:var(--mut)}label input,label select{color:var(--ink)}
.hint{color:var(--mut);font-size:.9rem;max-width:70ch}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:.75rem}
.card,.ev{background:var(--sf);border:1px solid var(--bd);border-radius:12px;padding:.75rem;display:flex;flex-direction:column;gap:.5rem}.ev{margin:.6rem 0}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:.4rem}.stats input,.card>input{width:100%}
.av{position:relative;width:56px;height:56px;border-radius:50%;background:var(--ac);color:var(--on);display:inline-grid;place-items:center;font-weight:500;overflow:hidden;flex:none}
.av.s{width:36px;height:36px}.av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ev label input[data-f$=".t"]{width:100%}
.top{display:flex;gap:1.2rem;align-items:center;margin:.8rem 0}#info{font-size:1.1rem;margin:0 0 .6rem}
#zone{position:relative;width:130px;height:130px;border-radius:50%;border:2px solid var(--bd);flex:none}
#zone i{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%;border:3px solid var(--ac);background:color-mix(in srgb,var(--ac) 14%,transparent);transition:width .6s,height .6s}
.chip{display:flex;gap:.6rem;align-items:center;background:var(--sf);border:1px solid var(--bd);border-radius:10px;padding:.4rem .6rem}.chip small{display:block;color:var(--mut)}.out{background:var(--bg)}.out .av,.lo .av{filter:grayscale(1);opacity:.6}.out>span{color:var(--mut)}
.fb{display:inline-block;margin-right:.2rem;padding:0 .45rem;border:1px solid var(--bd);border-radius:999px;background:var(--sf);color:var(--mut);font-size:.7rem;line-height:1.5;text-transform:uppercase;letter-spacing:.05em}
#win{display:flex;gap:1rem;align-items:center;background:var(--sf);border:2px solid var(--ac);border-radius:12px;padding:.8rem;margin-bottom:.8rem}#win[hidden]{display:none}#win p{margin:0;color:var(--mut)}
#log{margin-top:1rem}#log h3{margin:1rem 0 .3rem;font-size:1rem}#log ul{margin:0;padding-left:1.2rem}#log li{margin:.15rem 0}
#toast{position:fixed;left:50%;bottom:calc(1rem + var(--sai-bottom));transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:.6rem 1rem;border-radius:8px;opacity:0;pointer-events:none;transition:opacity .2s;max-width:90vw}#toast.on{opacity:1}
[hidden]{display:none!important}@media(prefers-reduced-motion:reduce){*{transition:none!important}}
header{padding-right:4.75rem}header h1{font-size:1.3rem}
.fl{position:fixed;top:calc(.6rem + var(--sai-top));right:calc(.6rem + var(--sai-right));z-index:5;width:44px;padding:0;justify-content:center}
#home{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.1rem;padding:4rem 1rem 2rem;text-align:center}
#home h1{font-size:clamp(2.4rem,10vw,4.2rem);letter-spacing:-.02em}#home p{margin:0;color:var(--mut)}
.preset{display:flex;flex-direction:column;width:min(92vw,420px);padding:0;overflow:hidden;border:2px solid var(--bd);border-radius:var(--r2);background:var(--sf);text-align:left;transition:border-color .2s,transform .2s}
.preset:hover,.preset:focus-visible{border-color:var(--ac);transform:translateY(-3px)}
.preset img{width:100%;display:block;aspect-ratio:4/3;object-fit:cover}
.preset span{display:block;padding:.8rem 1rem}.preset b{display:block;font-weight:500;font-size:1.15rem;line-height:1.3}.preset small{color:var(--mut);font-size:.95rem}
.cards{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center}
.bk{display:flex;gap:.6rem;overflow-x:auto;padding-bottom:.6rem;align-items:stretch}
.bk .col{display:flex;flex-direction:column;min-width:150px}.bk h4{margin:0 0 .3rem;font-size:.8rem;color:var(--mut);text-align:center}
.ms{flex:1;display:flex;flex-direction:column;justify-content:space-around;gap:.4rem}
.mt{border:1px solid var(--bd);border-radius:8px;background:var(--sf);overflow:hidden}.mt.cur{border-color:var(--ac);box-shadow:0 0 0 2px var(--ac)}
.sl{display:flex;gap:.35rem;align-items:center;padding:.2rem .4rem;font-size:.85rem;min-height:30px}.sl+.sl{border-top:1px solid var(--bd)}.sl.lo{color:var(--mut)}.sl.wn{font-weight:500}
.bk .av{width:22px;height:22px;font-size:.7rem}#log details{margin-top:1rem}
#bar{margin:0 0 .6rem;max-width:420px}#bar .bl{display:flex;justify-content:space-between;gap:.5rem;font-size:.78rem;color:var(--mut);margin-bottom:.25rem}
#bar .bl b{color:var(--ink)}
#bar #bv{flex:1;text-align:center;color:var(--ink);font-weight:600}
#bar .bt{position:relative;height:14px;border-radius:7px;background:linear-gradient(90deg,var(--wn),var(--bd) 50%,var(--ac));}
#bar .bt i{position:absolute;left:50%;top:-3px;bottom:-3px;width:2px;margin-left:-1px;background:var(--ink);opacity:.45;height:auto}
#bar .bt u{position:absolute;top:50%;width:20px;height:20px;margin:-10px 0 0 -10px;border-radius:50%;background:var(--sf);border:3px solid var(--ink);box-sizing:border-box;transition:left .6s}
@media (prefers-reduced-motion:reduce){#bar .bt u{transition:none}}
.pv .tm{border-top:3px solid var(--bd);padding-top:.4rem}
.pv .t-pol{border-top-color:var(--ac)}
.pv .t-rec{border-top-color:var(--wn)}
.pv{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.pv .tm{display:flex;flex-direction:column;gap:.5rem}.pv h4{margin:0;font-size:.9rem;color:var(--mut)}.pv .av{width:22px;height:22px;font-size:.7rem}
.pv .tm .mt .sl b{font-size:.9rem}
.mans{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.6rem}.mans .full{grid-column:1/-1;margin:.3rem 0 0}.mans h4{margin:0;padding:.3rem .5rem;font-size:.85rem;border-bottom:1px solid var(--bd)}.mans .mt{min-height:70px}
.wc{display:flex;gap:.35rem;align-items:center;padding:.2rem .4rem;font-size:.85rem}.wc small,.mans h4 small{display:block;color:var(--mut);font-weight:400}.mans .av{width:22px;height:22px;font-size:.7rem}
.dc{display:contents}.plusbox{aspect-ratio:4/3;display:grid;place-items:center;font-weight:200;font-size:6rem;line-height:1;color:var(--ac);background:var(--bg)}
.preset.cust{cursor:default}.cust .open{display:flex;flex-direction:column;width:100%;padding:0;border:0;background:none;text-align:left;min-height:0;cursor:pointer}.cust .row{padding:.5rem .75rem;border-top:1px solid var(--bd)}
#maker{max-width:720px;margin:auto;padding:4.5rem 1rem 2rem;display:flex;flex-direction:column;gap:.8rem}#maker[hidden]{display:none}#mkp{width:160px;aspect-ratio:4/3;object-fit:cover;border-radius:10px;border:1px solid var(--bd);background:var(--sf)}

.hbar{width:min(92vw,880px);display:flex;flex-direction:column;gap:.6rem}#q{width:100%}
#chips{display:flex;gap:.4rem;overflow-x:auto;padding-bottom:.2rem;scrollbar-width:none}#chips::-webkit-scrollbar{display:none}
#chips button{white-space:nowrap;min-height:36px;border-radius:999px;padding:.2rem .85rem;font-size:.9rem;color:var(--mut)}
#chips button[aria-pressed=true]{color:var(--ac);border-color:var(--ac);background:color-mix(in srgb,var(--ac) 12%,var(--sf))}
.cards{max-width:1000px}.preset .tags{display:flex;flex-wrap:wrap;gap:.3rem;padding:0;margin-top:.55rem}
.tags em{font-style:normal;font-size:.75rem;color:var(--mut);border:1px solid var(--bd);border-radius:999px;padding:.05rem .5rem}.tags em.rc{color:var(--ac);border-color:var(--ac)}
@media(max-width:700px){
.abar{position:fixed;left:0;right:0;bottom:calc(var(--tbh) + .25rem + var(--sai-bottom) + var(--adh));z-index:6;flex-wrap:nowrap;align-items:stretch;gap:.4rem;margin:0;padding:.6rem calc(.75rem + var(--sai-right)) .6rem calc(.75rem + var(--sai-left));background:var(--sf);border-top:1px solid var(--bd)}
.abar button{flex:1 1 0;min-width:0;justify-content:center;text-align:center;padding:.45rem .3rem;font-size:.9rem;line-height:1.2}.abar #step{flex:2 1 0}
main{padding-bottom:calc(10rem + var(--sai-bottom) + var(--adh))}#toast{bottom:calc(9.5rem + var(--sai-bottom) + var(--adh))}
header h1{display:none}
nav#tabs{position:fixed;left:0;right:0;bottom:var(--adh);z-index:7;max-width:none;margin:0;padding:.25rem var(--sai-right) var(--sai-bottom) var(--sai-left);display:grid;grid-template-columns:repeat(5,1fr);gap:0;background:var(--sf);border-top:1px solid var(--bd);border-bottom:0}
nav#tabs .tl button,nav#tabs #pmb{flex-direction:column;justify-content:center;gap:.1rem;min-height:var(--tbh);padding:.3rem .1rem;font-size:.72rem;line-height:1.15;border:0;border-top:3px solid transparent;border-radius:0;color:var(--mut);text-align:center}
nav#tabs .on{border-top-color:var(--ac);color:var(--ac);font-weight:500}
nav .lf{display:none}nav .ls{display:inline}}

/* diálogos propios */
.dlg{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;padding:calc(1rem + var(--sai-top)) calc(1rem + var(--sai-right)) calc(1rem + var(--sai-bottom)) calc(1rem + var(--sai-left));background:rgba(0,0,0,.55)}
.dbox{width:100%;max-width:26rem;background:var(--sf);color:var(--ink);border:1px solid var(--bd);border-radius:var(--r2);padding:1.1rem;box-shadow:0 12px 40px rgba(0,0,0,.35)}
.dbox h2{margin:0 0 .35rem;font-size:1.1rem}.dbox p{margin:0 0 .9rem;color:var(--mut)}.dbox input{width:100%;margin:0 0 .9rem}
.dbtn{display:flex;gap:.5rem;justify-content:flex-end;flex-wrap:wrap}
.dbtn .danger{background:var(--wn);color:var(--on);border-color:var(--wn);font-weight:500}
body.dlgopen{overflow:hidden}

/* pestañas con icono (escritorio) */
nav .tl button,nav #pmb{gap:.45rem}nav .ic{width:20px;height:20px;flex:none}nav .ls{display:none}
/* menú Partida */
.pm{position:relative;margin-left:auto}
.pmp{position:absolute;right:0;top:calc(100% + .4rem);z-index:30;width:min(92vw,22rem);display:flex;flex-direction:column;gap:.5rem;padding:.7rem;background:var(--sf);border:1px solid var(--bd);border-radius:var(--r2);box-shadow:0 12px 32px rgba(0,0,0,.28)}
.pmp[hidden]{display:none}.pmp>button{width:100%;justify-content:flex-start}
.pmh{margin:.3rem 0 0;font-size:.75rem;font-weight:500;color:var(--mut);text-transform:uppercase;letter-spacing:.06em}
.pmg{display:flex;flex-direction:column;gap:.4rem}.pmg select{width:100%}.pmg .row{gap:.4rem;align-items:stretch}.pmg .row>*{flex:1 1 0;justify-content:center;text-align:center}.pmg>button{width:100%;justify-content:flex-start}
.pmp .dng{color:var(--wn);border-color:var(--wn);margin-top:.3rem}
.fl .ic{width:22px;height:22px}
#shint{margin:.2rem 0 .6rem}

/* registro por rondas */
#log{margin-top:.4rem}
.lgbar{display:flex;gap:.5rem;justify-content:flex-end;margin:.2rem 0 .5rem}.lgbar button{min-height:40px;font-size:.85rem;padding:.2rem .75rem}
.rd{border:1px solid var(--bd);border-radius:var(--r2);background:var(--sf);margin:0 0 .6rem}
.rd>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:.5rem;padding:.55rem .85rem;min-height:44px;font-weight:500;border-radius:var(--r2)}
.rd>summary::-webkit-details-marker{display:none}
.rd>summary::before{content:"";flex:none;width:.45rem;height:.45rem;border-right:2px solid var(--mut);border-bottom:2px solid var(--mut);transform:rotate(-45deg);transition:transform .15s}
.rd[open]>summary::before{transform:rotate(45deg)}
.rd>summary:focus-visible{outline:3px solid var(--ac);outline-offset:-3px}
.rt{flex:1;min-width:0}.rt small{color:var(--mut);font-weight:400}
.bd{display:inline-flex;align-items:center;gap:.25rem;font-size:.85rem;color:var(--wn);font-weight:500}.bd svg{width:15px;height:15px}
.rd ul{list-style:none;margin:0;padding:0 .85rem .5rem}
.rd li{display:flex;gap:.55rem;align-items:flex-start;padding:.4rem 0;border-top:1px solid var(--bd)}.rd li:first-child{border-top:0}
.lt{flex:1;min-width:0}
.li{flex:none;width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;margin-top:.12rem}.li svg{width:18px;height:18px}
.li.k-out{color:var(--wn)}.li.k-hurt,.li.k-split{color:var(--warn)}.li.k-heal,.li.k-ally{color:var(--ok)}.li.k-loot,.li.k-love{color:var(--ac)}.li.k-zone,.li.k-dir,.li.k-info{color:var(--mut)}
.nm{display:inline-flex;align-items:center;gap:.25rem;white-space:nowrap;vertical-align:baseline}
.lav{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;background:var(--ac) center/cover no-repeat;color:var(--on);font:600 .62rem/1 inherit;font-style:normal;flex:none}
.lav[class*=" a"]{color:transparent}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* resultado final */
.res{margin:0 0 1rem;padding:1rem;border:1px solid var(--bd);border-radius:var(--r2);background:var(--sf)}.res[hidden]{display:none}
.res h2{margin:0 0 .8rem}.rh{margin:0 0 .5rem;font-size:1rem;color:var(--mut)}
.pod{list-style:none;margin:0 0 1rem;padding:0;display:flex;justify-content:center;align-items:flex-end;gap:.5rem}
.pod .pl{position:relative;flex:1 1 0;max-width:11.5rem;min-width:0;display:flex;flex-direction:column;align-items:center;text-align:center;gap:.2rem;padding:1.1rem .3rem .7rem;border:1px solid var(--bd);border-radius:var(--r2);background:var(--bg)}
.pod .pl b{max-width:100%;overflow-wrap:anywhere;line-height:1.2}.pod .pl small{color:var(--mut);line-height:1.25}
.pod .p1{order:2;padding-bottom:1.1rem;padding-top:1.5rem;border:2px solid var(--ac)}.pod .p2{order:1}.pod .p3{order:3}
.pod .pl .av{width:60px;height:60px}.pod .p1 .av{width:84px;height:84px;font-size:1.5rem}.pod .p1 b{font-size:1.1rem}
.pod .pl .av+.av{margin-top:-.4rem}
.mk{position:absolute;top:-.7rem;left:50%;transform:translateX(-50%);width:1.6rem;height:1.6rem;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:.85rem;color:#141418;background:#C9CCD6;border:2px solid var(--sf)}
.p1 .mk{background:#F0B45A}.p3 .mk{background:#C98B5B}
.dst{list-style:none;margin:0 0 1rem;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(11rem,1fr));gap:.5rem}
.dst li{display:flex;gap:.6rem;align-items:center;padding:.5rem;border:1px solid var(--bd);border-radius:var(--r);background:var(--bg)}.dst li span{display:flex;flex-direction:column;min-width:0}.dst small{color:var(--mut)}
.rs{list-style:none;margin:0 0 1rem;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}.rs li{background:var(--bg);border:1px solid var(--bd);border-radius:var(--r);padding:.35rem .7rem;font-size:.9rem}.rs b{font-size:1.1rem}
.rsb{display:flex;flex-wrap:wrap;gap:.5rem;align-items:flex-end}.rsb label{display:flex;flex-direction:column;gap:.2rem;font-size:.85rem;color:var(--mut)}

.trophy{display:block;width:min(70%,220px);height:auto;aspect-ratio:4/3;object-fit:cover;margin:0 auto .8rem;border-radius:var(--r2);border:1px solid var(--bd)}

/* cuadro de torneo (Apocalypse Ring) */
.bk{gap:0;--ln:var(--mut);padding:.2rem .2rem .8rem;scroll-snap-type:x proximity}
.bk .col{min-width:0;flex:0 0 auto;width:calc(10.5rem + 2rem);padding:0 1rem;scroll-snap-align:center}
.bk .col.f{width:calc(11.5rem + 2rem)}
.bk .ms{flex:1;display:flex;flex-direction:column}
.bk .mw{position:relative;flex:1 1 0;display:flex;align-items:center;justify-content:center;padding:.3rem 0;min-height:5.2rem}
.bk.dense .mw{min-height:4.1rem;padding:.2rem 0}.bk.dense .sl{min-height:26px;padding:.1rem .4rem}.bk.dense .av{width:18px;height:18px;font-size:.6rem}
.bk .mt{position:relative;width:100%;min-height:0}
.bk .mn{position:absolute;top:1px;right:5px;font-size:.62rem;line-height:1;color:var(--mut);opacity:.8}
.bk .sl.tbd{color:var(--mut);font-style:italic}
.bk .sl.wn{background:color-mix(in srgb,var(--ac) 16%,transparent);font-weight:500}
.bk .mw::before,.bk .mw::after{content:"";position:absolute;top:50%;width:1rem;margin-top:-1px;border-top:2px solid var(--ln);opacity:.4;pointer-events:none}
.bk .mw.dn::after{border-color:var(--ac);opacity:1}
.bk .mw.rdy::before{border-color:var(--ac);opacity:1}
.bk .mw.r0::before{display:none}
.bk .jn{position:absolute;width:0;border-right:2px solid var(--ln);opacity:.4;pointer-events:none}
.bk .jd .jn{top:50%;bottom:0}.bk .ju .jn{top:0;bottom:50%}
.bk .dn .jn{border-color:var(--ac);opacity:1}
.bk .l::before{left:-1rem}.bk .l::after{right:-1rem}.bk .l .jn{right:-1rem}
.bk .rt::before{right:-1rem}.bk .rt::after{left:-1rem}.bk .rt .jn{left:-1rem;border-right:0;border-left:2px solid var(--ln)}
.bk .rt.dn .jn{border-left-color:var(--ac)}
.bk .f::before{left:-1rem}.bk .f::after{right:-1rem}
.bk .f.ra::before,.bk .f.rb::after{border-color:var(--ac);opacity:1}
.bk .f.dn::after{border-color:var(--ln);opacity:.4}.bk .f.dn.rb::after{border-color:var(--ac);opacity:1}
.bk .champ{position:absolute;left:0;right:0;top:50%;transform:translateY(calc(-100% - 2.9rem));display:flex;flex-direction:column;align-items:center;gap:.1rem;text-align:center}
.bk .champ small{color:var(--mut);text-transform:uppercase;letter-spacing:.08em;font-size:.68rem}
.bk .champ .av{width:44px;height:44px;border:2px solid #F0B45A}

/* plano de la mansión (Whodunit Night) */
.mans.wp{display:block}
.plan{display:grid;gap:.5rem;padding:.6rem;margin:0 0 .9rem;border:2px solid var(--bd);border-radius:var(--r2);background:var(--bg)}
.plan>h4.full{grid-area:t;margin:0;padding:0 .1rem .1rem;border:0;font-size:.8rem;color:var(--mut);text-transform:uppercase;letter-spacing:.06em}
.plan.house{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-areas:"t t t t" ". atico atico ." "dorm dorm bib estu" "salon comedor cocina billar" ". vest vest ." "sot sot sot sot"}
.plan.yard{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-areas:"t t t" "jardin jardin fuente" "laberinto laberinto inver" "cochera cobertizo cobertizo"}
.a-vest{grid-area:vest}.a-salon{grid-area:salon}.a-comedor{grid-area:comedor}.a-cocina{grid-area:cocina}.a-bib{grid-area:bib}.a-estu{grid-area:estu}.a-billar{grid-area:billar}.a-dorm{grid-area:dorm}.a-sot{grid-area:sot}.a-atico{grid-area:atico}.a-jardin{grid-area:jardin}.a-laberinto{grid-area:laberinto}.a-inver{grid-area:inver}.a-cochera{grid-area:cochera}.a-cobertizo{grid-area:cobertizo}.a-fuente{grid-area:fuente}
.rm{min-width:0;min-height:4.6rem;border:1px solid var(--bd);border-radius:8px;background:var(--sf);overflow:hidden}
.rm h4{display:flex;justify-content:space-between;align-items:center;gap:.4rem;margin:0;padding:.3rem .5rem;font-size:.82rem;border-bottom:1px solid var(--bd)}
.rm .cnt{min-width:1.3rem;padding:0 .35rem;border-radius:999px;background:var(--ac);color:var(--on);font-size:.72rem;line-height:1.35rem;text-align:center}
.rm .cnt:empty{display:none}
.rm.occ{border-color:var(--ac)}
.rm.body{box-shadow:inset 3px 0 0 var(--wn)}
.rm.trap{outline:2px dashed var(--warn);outline-offset:-2px}
.rm .tg{display:block;padding:.1rem .5rem 0;color:var(--warn);font-size:.72rem}
.a-sot{background:color-mix(in srgb,var(--sf) 82%,#000)}
.a-vest h4 span::after{content:" · entrada";color:var(--mut);font-weight:400}
.wc.dead{color:var(--mut)}.wc.dead .av{filter:grayscale(1);opacity:.6}
.rm .wc{padding:.2rem .5rem}
@media(max-width:700px){
.plan.house{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:"t t" "atico atico" "dorm bib" "estu salon" "comedor cocina" "billar vest" "sot sot"}
.plan.yard{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:"t t" "jardin jardin" "fuente laberinto" "inver cochera" "cobertizo cobertizo"}
}

/* Finish Line: pista de puntos de control */
#trk{flex:1;min-width:0}
.tk{list-style:none;margin:0;padding:0;display:flex;align-items:center;overflow-x:auto;scrollbar-width:none}
.tk li{flex:1 0 1.9rem;display:flex;align-items:center;justify-content:center;position:relative;height:2rem}
.tk li::before{content:"";position:absolute;left:-50%;right:50%;top:50%;height:3px;margin-top:-1.5px;background:var(--bd)}
.tk li:first-child::before{display:none}
.tk li.d::before,.tk li.c::before{background:var(--ac)}
.tk b{position:relative;z-index:1;width:1.5rem;height:1.5rem;border-radius:50%;border:2px solid var(--bd);background:var(--sf);color:var(--mut);font-size:.72rem;display:inline-flex;align-items:center;justify-content:center;transition:background .4s,border-color .4s}
.tk li.d b{background:var(--ac);border-color:var(--ac);color:var(--on)}
.tk li.c b{border-color:var(--ac);color:var(--ink);box-shadow:0 0 0 3px color-mix(in srgb,var(--ac) 25%,transparent)}
.tk li.fl b{border-radius:6px}
.tkm{display:flex;flex-wrap:wrap;gap:.3rem .9rem;align-items:center;margin:.4rem 0 0;font-size:.82rem;color:var(--mut)}
.wbar{flex:1 1 6rem;height:6px;border-radius:3px;background:var(--bd);overflow:hidden}
.wbar i{display:block;height:100%;background:var(--ac);transition:width .5s}
.wr{display:flex;gap:3px;margin-top:.3rem}
.wr i{flex:1;max-width:1.6rem;height:5px;border-radius:2px;background:var(--bd)}
.wr i.on{background:var(--ac)}
.wr.x i{opacity:.45}
@media (prefers-reduced-motion:reduce){.tk b,.wbar i{transition:none}}

/* Battle Royale y Over the top: zona, ring, cola y animaciones */
#zone{display:flex;align-items:center;justify-content:center}
#zone b{position:relative;z-index:1;font-size:.82rem;font-weight:600;color:var(--ink);text-align:center}
.otv{display:flex;flex-direction:column;gap:1rem}
.og h4{margin:0 0 .4rem;font-size:.9rem;color:var(--mut);display:flex;gap:.5rem;align-items:baseline}
.og h4 span{font-weight:400}
.og.q .chip{border-style:dashed}
@keyframes nw{0%{background:color-mix(in srgb,var(--wn) 35%,var(--sf));transform:translateX(0)}15%{transform:translateX(-5px)}30%{transform:translateX(5px)}45%{transform:translateX(-3px)}60%{transform:translateX(0)}100%{background:var(--sf)}}
@keyframes ne{0%{transform:translateY(-12px) scale(.96);opacity:0;border-color:var(--ac)}100%{transform:none;opacity:1}}
@keyframes zc{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--wn) 55%,transparent)}100%{box-shadow:0 0 0 18px transparent}}
@keyframes tick{0%{background:color-mix(in srgb,var(--ac) 22%,transparent)}100%{background:transparent}}
.chip.nw{animation:nw .9s ease-out}
.chip.ne{animation:ne .6s ease-out}
#zone.zc{animation:zc .9s ease-out}
#info.tick{animation:tick .9s ease-out}
@media (prefers-reduced-motion:reduce){.chip.nw,.chip.ne,#zone.zc,#info.tick{animation:none}}

/* Extreme Money y Shipping War */
.fb.ok{border-color:var(--ok);color:var(--ok)}
.fb.wn{border-color:var(--wn);color:var(--wn)}
.pv .mt.pair{border-left:3px solid var(--ac)}
.pv .mt.pair .sl.pn b::before{content:"♥ ";color:var(--wn)}

/* Bloque 5: modo grabación (9:16, interfaz oculta, texto grande) */
html.rec{background:#000;font-size:calc(100% * var(--rz,1.3))}
body.rec{font-size:calc(16px * var(--rz,1.3));background:var(--bg);box-shadow:none}
body.rec #set,body.rec header,body.rec nav#tabs,body.rec #shint,body.rec .abar,body.rec .lgbar,body.rec #res .rsb,body.rec #log details.rd:not(:first-of-type){display:none}
body.rec #app{width:min(100vw,calc(100dvh * 9 / 16));height:100dvh;margin:0 auto;overflow-y:auto;scrollbar-width:none;background:var(--bg)}
body.rec #app::-webkit-scrollbar{display:none}
body.rec main{max-width:none;padding:.8rem .9rem calc(5rem + var(--sai-bottom))}
body.rec #log summary{pointer-events:none;list-style:none}
body.rec #log summary::-webkit-details-marker{display:none}
body.rec .chip{font-size:1em}
#recbar{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(.6rem + var(--sai-bottom));z-index:30;display:flex;flex-wrap:wrap;gap:.4rem;justify-content:center;width:min(100vw,calc(100dvh * 9 / 16));box-sizing:border-box;padding:.6rem;background:color-mix(in srgb,var(--sf) 94%,transparent);border:1px solid var(--bd);border-radius:14px;font-size:16px;transition:opacity .35s}
#recbar[hidden]{display:none}
#recbar.hid{opacity:0;pointer-events:none}
#recbar button{font-size:.9rem}
@media (prefers-reduced-motion:reduce){#recbar{transition:none}}

/* Crear configuración: formulario ampliado */
#maker .chk{display:flex;gap:.5rem;align-items:center;flex-direction:row}
#maker label .hint{font-weight:400}
.cfgio{justify-content:center;border-top:0}

/* App de Android: sin selección de texto accidental ni zoom de doble toque */
html.cap-native,html.cap-native body{-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;overscroll-behavior:none}
html.cap-native input,html.cap-native textarea{-webkit-user-select:text;user-select:text}
body.rec #app{padding-bottom:0}

/* ===== Tema TV · Your Show Lab (transmisión en directo) ===== */
:root{--hd:"Arial Black","Inter Display",Impact,Inter,ui-sans-serif,system-ui,sans-serif}
html,body{overflow-x:clip}
.wm,#pname,h2,.pri,.preset b,#log h3,.sub span{font-family:var(--hd);font-style:italic;font-weight:900;text-transform:uppercase}
.wm{margin:0;line-height:1;letter-spacing:-.01em;display:flex;align-items:center;gap:.35em;flex-wrap:wrap;justify-content:center}
.wm b{display:inline-block;background:var(--y);color:#0B0D1F;padding:.02em .22em;transform:skewX(-10deg);font-weight:900}
.wm .logo{width:1.9em;height:1.9em;border-radius:22%;flex:none}
h2{font-size:1rem;letter-spacing:.02em}
/* portada */
#home{justify-content:flex-start;gap:1.2rem;padding:0 1rem 2.5rem}
.hero{align-self:stretch;margin:0 -1rem;padding:4rem 1rem 3.6rem;background:var(--nv);color:#fff;position:relative;overflow:hidden;clip-path:polygon(0 0,100% 0,100% calc(100% - 30px),0 100%);display:flex;flex-direction:column;align-items:center;gap:.9rem;border-bottom:0}
.hero::before,.hero::after{content:"";position:absolute;top:0;bottom:0;right:0;pointer-events:none}
.hero::before{width:44%;background:#2D6BFF;opacity:.5;clip-path:polygon(38% 0,100% 0,100% 100%,0 100%)}
.hero::after{width:15%;background:var(--live);clip-path:polygon(42% 0,100% 0,100% 100%,0 100%)}
.hero>*{position:relative;z-index:1}
.brand{display:flex;align-items:center;gap:.9rem;flex-wrap:wrap;justify-content:center}
.brand .logo{width:clamp(64px,18vw,96px);height:clamp(64px,18vw,96px);border-radius:22%;box-shadow:0 6px 0 rgba(0,0,0,.28)}
.hero .wm{font-size:clamp(1.8rem,8.4vw,3.3rem);color:#fff}
#home .sub{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin:0;color:#fff}
.sub span{display:inline-block;font-size:clamp(.7rem,3vw,.9rem);letter-spacing:.04em;padding:.4rem 1.1rem;clip-path:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%)}
.sub .c1{background:var(--y);color:#0B0D1F}.sub .c2{background:var(--live);color:#fff}.sub .c3{background:#2D6BFF;color:#fff}
#home .hero .lead{color:#D7DCFF;max-width:46ch;font-size:.95rem}
/* tarjetas */
.preset{border-radius:6px;position:relative}
.preset:hover,.preset:focus-visible{border-color:var(--y)}
.preset span{border-top:4px solid var(--y)}
.preset b{font-size:1.02rem;letter-spacing:.01em;line-height:1.25}
.preset[data-n]::after{content:attr(data-n);position:absolute;top:.15rem;right:.7rem;font:italic 900 2.8rem/1 var(--hd);color:transparent;-webkit-text-stroke:2px #fff;text-shadow:0 2px 10px rgba(0,0,0,.45);pointer-events:none}
/* cabecera de partida */
#app header{position:relative;isolation:isolate;color:#fff}
#app header::before{content:"";position:absolute;inset:0 -100vmax;background:var(--nv);border-bottom:4px solid var(--y);z-index:-1}
header .wm{font-size:1.05rem;justify-content:flex-start}#back .logo{width:2.1em;height:2.1em;border-radius:22%;flex:none}
header p,#pname{color:#D7DCFF}
#pname::before{content:"";display:inline-block;width:.6em;height:.6em;border-radius:50%;background:var(--live);margin-right:.5em;vertical-align:baseline}
/* pestañas */
nav{background:var(--sf)}.tl{display:contents}
nav .tl button,nav #pmb{font-family:inherit;font-style:normal;font-weight:700;font-size:.98rem;line-height:1.2;text-transform:none;letter-spacing:0;color:var(--mut);min-height:52px;padding:.5rem 1.1rem}
nav .tl button:hover,nav #pmb:hover{color:var(--ink)}
nav .tl .on,nav #pmb[aria-expanded=true]{color:var(--ink);border-bottom-color:var(--y)}
nav .tl button span{white-space:nowrap}
@media(max-width:700px){nav .lf{display:none}nav .ls{display:inline}
nav#tabs .tl button,nav#tabs #pmb{font-size:.68rem;font-weight:600;min-height:var(--tbh);padding:.3rem .1rem;min-width:0;overflow:hidden;border-bottom:0;border-top:3px solid transparent}
nav#tabs .tl .on,nav#tabs #pmb[aria-expanded=true]{border-top-color:var(--y);border-bottom-color:transparent}
nav#tabs .pm{margin:0;display:flex}nav#tabs #pmb{width:100%}
nav#tabs .pmp{top:auto;bottom:calc(100% + .4rem);max-height:calc(100dvh - 11rem);overflow:auto}}
@media(max-width:380px){nav#tabs .tl button,nav#tabs #pmb{font-size:.6rem}}
header .wm{margin:0}
#back{display:inline-flex;align-items:center;gap:.4em;background:none;border:0;padding:0 .3rem;min-height:44px;color:inherit;font:inherit;text-transform:inherit;letter-spacing:inherit;cursor:pointer;border-radius:8px}
#back:hover{filter:brightness(1.12)}#back:focus-visible{outline:3px solid var(--y);outline-offset:2px}
#pname{font-size:1rem}
/* botones */
.pri{background:var(--y);color:#0B0D1F;border-color:var(--y);border-radius:0;clip-path:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%);padding:.5rem 1.5rem;letter-spacing:.02em}
.pri:focus-visible{clip-path:none;border-radius:6px}
.card,.ev,.chip{border-radius:6px}
#win{background:var(--nv);color:#fff;border:0;border-left:8px solid var(--y);border-radius:6px}#win p{color:#D7DCFF}#win h2,#win b{color:#fff}
#log h3{border-left:4px solid var(--live);padding-left:.5rem;font-size:.85rem}
#bar .bt{background:linear-gradient(90deg,var(--wn),var(--bd) 50%,var(--y))}

/* ===== Ajustes ===== */
#set{background:var(--sf)}
.sbox{max-width:30rem;max-height:100%;overflow:auto;-webkit-overflow-scrolling:touch}
.sbox .sv{display:grid;gap:.85rem}
.sbox h2{margin:0}.sbox h3{margin:.4rem 0 -.4rem;font-size:1rem}
.sbox p{margin:0;color:var(--ink)}.sbox .hint{color:var(--mut);font-size:.9rem}
.sbox a{color:var(--ac);word-break:break-word}
.sbox fieldset,.sbox .sg.lg{border:1px solid var(--bd);border-radius:var(--r);margin:0;padding:.6rem .8rem .8rem;display:grid;gap:.6rem;min-width:0}
.sbox legend{font-weight:600;padding:0 .35rem}
.sbox .lg>label{font-weight:600;color:var(--ink)}
.sbox .vl{color:var(--ink)}.sbox h2:focus{outline:none}
.sbox .seg{display:flex;gap:.5rem;flex-wrap:wrap}
.sbox .rdo{display:inline-flex;flex-direction:row;align-items:center;gap:.45rem;color:var(--ink);min-height:44px;padding:0 .8rem;border:1px solid var(--bd);border-radius:8px;background:var(--sf);cursor:pointer}
.sbox .rdo input{width:1.1rem;height:1.1rem;min-height:0;padding:0;margin:0;accent-color:var(--ac)}
.sbox .rdo:has(input:checked){border-color:var(--ac);box-shadow:inset 0 0 0 1px var(--ac);font-weight:500}
.sbox .rdo:has(input:focus-visible){outline:3px solid var(--ac);outline-offset:2px}
.sbox .vl{display:grid;grid-template-columns:auto 1fr 3.2rem;gap:.6rem;align-items:center}
.sbox .vl input{width:100%;min-height:44px;padding:0;border:0;background:none;accent-color:var(--ac)}
.sbox .vl output{text-align:right;color:var(--mut);font-variant-numeric:tabular-nums}
.sbox select{width:100%}
.sbox .ab{display:flex;align-items:center;gap:.8rem}.sbox .ab img{width:64px;height:64px}
.sbox .kofi{justify-content:center;text-decoration:none;font-weight:500;color:var(--ink)}
.sbox .pol{display:grid;gap:.5rem}.sbox .pol h3{margin:.7rem 0 0}.sbox .pol .pd{color:var(--mut);font-size:.9rem}

/* ===== Avatares más grandes ===== */
.av{width:72px;height:72px;font-size:1.5rem}.av.s{width:44px;height:44px;font-size:1rem}
.card>.av{width:96px;height:96px;font-size:2rem;align-self:center}
.chip .av{width:64px;height:64px;font-size:1.3rem}
#win .av{width:88px;height:88px;font-size:1.8rem}
/* ===== Editor de encuadre ===== */
.cbox{max-width:24rem;max-height:100%;overflow:auto}
.cst{position:relative;overflow:hidden;margin:0 auto .8rem;touch-action:none;cursor:grab;background:#1B1F40;border-radius:10px;user-select:none;-webkit-user-select:none;max-width:100%}
.cst:active{cursor:grabbing}
.cst img{position:absolute;max-width:none;pointer-events:none;-webkit-user-drag:none;user-select:none}
.cm{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);box-shadow:0 0 0 999px rgba(10,12,28,.66);border:2px solid #fff;pointer-events:none}
.cm.r{border-radius:50%}.cm.q{border-radius:10px}
.czl{display:grid;grid-template-columns:auto 1fr;gap:.6rem;align-items:center;margin:0 0 .6rem;color:var(--ink)}
.czl input{width:100%;min-height:44px;padding:0;border:0;background:none;accent-color:var(--ac);margin:0}
.cpv{display:flex;gap:.7rem;align-items:center;margin:0 0 .9rem;color:var(--mut);font-size:.9rem}
.cpv canvas{border-radius:50%;background:#1B1F40;border:1px solid var(--bd)}.cpv.q{display:none}
.seo{margin:2rem 0 1rem;padding:1rem 1.1rem;border:1px solid var(--bd);border-radius:12px;background:var(--sf)}
.seo h2{margin:0 0 .4rem;font-size:1.1rem}.seo p{margin:.4rem 0;color:var(--mut);font-size:.95rem}
body.rec .seo{display:none}

/* ===== Tarjetas: proporción, alineación y orden ===== */
.preset img{height:auto}
.preset,.cust .open{align-items:stretch}
.preset>span,.cust .open>span{width:100%;box-sizing:border-box;text-align:left}
.preset span.tags{border-top:0;padding:0;width:auto}
.preset.newcfg[data-n]::after{-webkit-text-stroke-width:2px}
/* ===== Efectos al pasar el cursor (solo con ratón/trackpad) ===== */
button,.btn,select,input[type=range],.card,.av,#set .ic,.logo{transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease,background-color .16s ease,filter .16s ease,color .16s ease}
button:disabled,.btn:has(input:disabled){cursor:not-allowed}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
 button:not(:disabled):not(.pri):not(.preset):not(.open):hover,.btn:hover,select:hover{border-color:var(--ac);background-color:color-mix(in srgb,var(--ac) 9%,var(--sf));transform:translateY(-1px);box-shadow:0 3px 10px color-mix(in srgb,var(--ac) 25%,transparent)}
 button:not(:disabled):not(.pri):not(.preset):not(.open):active,.btn:active{transform:translateY(1px) scale(.98);box-shadow:none}
 .pri:not(:disabled):hover{filter:brightness(1.1) saturate(1.1);transform:translateY(-2px)}
 .pri:not(:disabled):active{filter:brightness(.95);transform:translateY(1px) scale(.98)}
 .dbtn .danger:not(:disabled):hover{filter:brightness(1.1);transform:translateY(-1px)}
 nav .tl button:hover,nav #pmb:hover{background:color-mix(in srgb,var(--ac) 10%,transparent);border-bottom-color:color-mix(in srgb,var(--y) 70%,transparent);transform:none;box-shadow:none}
 nav .tl button.on:hover{border-bottom-color:var(--y)}
 #chips button:hover{transform:translateY(-1px)}
 .preset{transition:border-color .2s,transform .2s,box-shadow .2s}
 .preset:hover{box-shadow:0 12px 26px rgba(8,10,40,.28)}
 .preset img{transition:transform .4s ease}.preset:hover img,.preset:focus-visible img{transform:scale(1.05)}
 .preset[data-n]:hover::after{-webkit-text-stroke-color:var(--y);color:rgba(255,196,0,.18)}
 .cust .open:hover b{color:var(--ac)}
 .card:hover{border-color:color-mix(in srgb,var(--ac) 55%,var(--bd));box-shadow:0 4px 14px rgba(8,10,40,.12)}
 .card:hover>.av{transform:scale(1.06)}
 #set:hover .ic{transform:rotate(60deg)}
 #back:hover .logo{transform:rotate(-6deg) scale(1.06)}
 .sbox .rdo:hover{border-color:var(--ac);background:color-mix(in srgb,var(--ac) 9%,var(--sf))}
 a:hover{text-decoration:underline}
 input[type=range]:hover{filter:brightness(1.15)}
}