:root{--bg:#0b0a0d;--panel:#15131a;--line:#2c2833;--text:#ece7df;--muted:#a8a299;--gold:#e8b93a;--red:#e0484f;--blue:#5aa0e6}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--text);font-family:'EB Garamond',Garamond,serif;-webkit-tap-highlight-color:transparent}
button{font-family:'Cinzel',serif;font-weight:700;letter-spacing:1px;cursor:pointer}
#app{max-width:520px;margin:0 auto;min-height:100vh;display:flex;flex-direction:column}
.screen{padding:28px 20px;display:flex;flex-direction:column;gap:18px;align-items:center;text-align:center}
.saga{font-family:'Cinzel';font-weight:500;letter-spacing:5px;font-size:12px;color:#cfc8bd}
.title{font-family:'Cinzel';font-weight:700;font-size:26px;letter-spacing:3px}
.big{width:100%;max-width:340px;min-height:56px;border-radius:10px;border:1px solid var(--line);background:var(--panel);color:var(--text);font-size:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:10px}
.big small{font-family:'EB Garamond';font-weight:400;letter-spacing:0;font-size:14px;color:var(--muted)}
.big.luz{border-color:#c9a24a}.big.osc{border-color:#c2242c}
.rules{max-width:360px;text-align:left;font-size:15px;line-height:1.35;color:#d9d3c9;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:12px 14px}
.rules p{margin:0 0 6px}
/* board */
.top{display:flex;align-items:center;justify-content:space-between;padding:8px 10px;gap:8px;border-bottom:1px solid var(--line);font-size:14px}
.who{font-family:'Cinzel';font-weight:700;font-size:12px;letter-spacing:1.5px}
.vida{display:flex;gap:6px;align-items:center;background:none;border:1px solid transparent;border-radius:6px;padding:2px 6px;color:var(--text);font-family:'Cinzel';font-size:14px}
.vida .hpbar{display:block;width:70px;height:8px;border-radius:4px;background:#2a2630;overflow:hidden}.vida .hpbar span{display:block;height:100%;background:linear-gradient(90deg,#b8322a,#e8b93a)}
.vida.target{border-color:var(--red);box-shadow:0 0 10px var(--red);animation:pulse 1s infinite}
.card.drag{opacity:.45}.ghost{position:fixed;width:56px;height:84px;pointer-events:none;z-index:50;transform:translate(-50%,-60%) rotate(-4deg);border-radius:7px;overflow:hidden;box-shadow:0 6px 18px #000a;border:2px solid var(--gold)}
.ghost img{width:100%;height:100%;object-fit:cover}
.card.mine{touch-action:none}
.bast{display:flex;gap:4px;align-items:center}
.bast i{display:block;width:14px;height:16px;border:1.5px solid var(--gold);border-radius:3px 3px 1px 1px}
.bast i.off{border-color:#4a4550;background:transparent;opacity:.5}
.bast i.on{background:linear-gradient(#e8b93a55,#e8b93a22)}
.bast.target i.on{border-color:var(--red);box-shadow:0 0 8px var(--red)}
.btnmini{min-height:36px;padding:0 12px;border-radius:8px;border:1px solid var(--line);background:var(--panel);color:var(--text);font-size:12px}
.row{display:flex;justify-content:center;gap:5px;padding:4px 6px}
.zone{font-family:'Cinzel';font-size:9px;letter-spacing:2px;color:#6f6976;text-align:center;margin-top:2px}
.card .bd{position:absolute;left:2px;top:19px;font-weight:700;font-size:9px;font-family:'Cinzel';background:rgba(120,40,140,.85);color:#f4d9ff;border:1px solid #d79cf0;border-radius:4px;padding:0 3px;z-index:3}
.slot{width:calc((100% - 37px)/6);max-width:78px;aspect-ratio:7/10;border:1px dashed #2f2b36;border-radius:7px;position:relative}
.card{position:absolute;inset:0;border-radius:7px;overflow:hidden;border:2px solid #8e9299;background:#1a1720;padding:0;color:var(--text);text-align:left}
.card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.card .ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:'Cinzel';font-weight:900;font-size:22px;color:#ffffff22}
.card .shade{position:absolute;left:0;right:0;bottom:0;height:62%;background:linear-gradient(0deg,rgba(8,7,10,.95),rgba(8,7,10,0))}
.card .pw{position:absolute;left:3px;bottom:16px;font-family:'Cinzel';font-weight:900;font-size:15px;line-height:1;text-shadow:0 1px 3px #000}
.card .nm{position:absolute;left:3px;right:3px;bottom:3px;font-family:'Cinzel';font-weight:700;font-size:8px;letter-spacing:.3px;line-height:1.05;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card .rk{position:absolute;right:2px;top:2px;font-family:'Cinzel';font-weight:900;font-size:9px;padding:1px 4px;border-radius:4px;background:#0b0a0dcc}
.card .rk.gen{color:#f7d978;border:1px solid #e8b93a}.card .rk.cap{color:#e6e9ee;border:1px solid #c9ced6}
.card .pw s{display:block;font-size:9px;line-height:1;color:#c9c2b8;text-decoration:line-through;font-family:'EB Garamond';margin-top:1px}
.card .pw.boost{animation:boost 1.2s ease-out}
.card .pw{transform-origin:left bottom}
.card .pw:has(s){bottom:13px}
@keyframes boost{0%{transform:scale(1.6);text-shadow:0 0 12px #e8b93a}100%{transform:none}}
.card .eg.gen{border-color:#e8b93a;color:#f7d978}.card .eg.cap{border-color:#c9ced6;color:#e6e9ee}
.card .fm{position:absolute;left:2px;top:19px;font-family:'Cinzel';font-weight:700;font-size:9px;padding:1px 4px;border-radius:4px;background:#0b0a0dcc;border:1px solid #7fd18e;color:#a8f0b8}
.card .blk{position:absolute;right:2px;top:18px;font-family:'Cinzel';font-weight:900;font-size:10px;padding:1px 4px;border-radius:4px;background:#0b0a0de6;border:1px solid}
.card .blk em{font-style:normal;font-size:8px;margin-left:2px;opacity:.75}
.card .blk.gen{color:#f7d978;border-color:#e8b93a;box-shadow:0 0 6px #e8b93a66}.card .blk.cap{color:#e6e9ee;border-color:#c9ced6}
.card .eg{position:absolute;left:2px;top:2px;font-family:'Cinzel';font-weight:700;font-size:9px;padding:1px 4px;border-radius:4px;background:#0b0a0dcc;border:1px solid #bfe9ff;color:#bfe9ff}
.card .st{position:absolute;right:2px;bottom:16px;font-size:9px;font-family:'Cinzel';color:var(--muted)}
.card.used{filter:grayscale(.7) brightness(.6)}
.card.sel{box-shadow:0 0 0 2px #fff,0 0 14px #fff8}
.card.tgt{box-shadow:0 0 0 2px var(--red),0 0 14px var(--red);animation:pulse 1s infinite}
.card.ok{box-shadow:0 0 0 2px #7fd18e,0 0 10px #7fd18e88}
.card.enter{animation:enter .45s ease-out}
@keyframes pulse{50%{box-shadow:0 0 0 2px var(--red),0 0 4px var(--red)}}
@keyframes enter{from{transform:translateY(-14px) scale(.9);opacity:0}to{transform:none;opacity:1}}
.mid{display:flex;align-items:center;justify-content:center;gap:10px;padding:6px 10px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:4px 0;font-family:'Cinzel';font-size:12px;letter-spacing:1px}
.sello{display:flex;gap:2px}.sello i{width:9px;height:9px;border-radius:50%;background:#e8b93a}.sello i.off{background:#3a3540}
.rupt{color:var(--red);font-weight:900}
.hand{display:flex;gap:6px;overflow-x:auto;padding:6px 8px 4px;border-top:1px solid var(--line);min-height:118px}
.hand .slot{flex:none;width:76px;max-width:none;border:none}
.bar{display:flex;gap:8px;padding:6px 8px 10px;align-items:center}
.bar .info{flex:1;font-size:14px;line-height:1.2;color:#d9d3c9}
.end{min-height:44px;padding:0 14px;border-radius:9px;border:1px solid var(--gold);background:#2a210c;color:#f7d978;font-size:13px}
.end:disabled{opacity:.4}
.log{padding:6px 10px;font-size:14px;min-height:22px;color:#cfc8bd;border-bottom:1px solid var(--line);text-align:center}
.log b{color:var(--text)}
/* sheet */
.veil{position:fixed;inset:0;background:#000a;display:flex;align-items:flex-end;justify-content:center;z-index:10}
.sheet{width:100%;max-width:520px;max-height:88vh;overflow-y:auto;background:var(--panel);border-top:1px solid var(--line);border-radius:16px 16px 0 0;padding:14px 16px 18px;display:flex;flex-direction:column;gap:10px}
.sheet .art{position:relative;height:230px;border-radius:10px;overflow:hidden;border:2px solid #8e9299;background:#1a1720}
.sheet .art img{width:100%;height:100%;object-fit:cover}
.sheet h2{margin:0;font-family:'Cinzel';font-size:20px;letter-spacing:2px}
.sheet .sub{font-style:italic;color:#cfc8bd;margin-top:-6px}
.sheet .meta{font-size:15px;color:#cfc8bd}
.sheet .ab{background:#e6dfd0;color:#17141a;border-radius:6px;padding:8px 10px;font-size:15px;line-height:1.25}
.sheet .ab b{font-family:'Cinzel';font-size:12px;letter-spacing:1.5px;display:block}
.sheet .lore{font-size:15px;line-height:1.3;color:#d9d3c9}
.acts{display:flex;flex-direction:column;gap:8px}
.act{min-height:48px;border-radius:10px;border:1px solid var(--line);background:#221f29;color:var(--text);font-size:14px;padding:6px 12px}
.act.main{border-color:var(--gold);background:#2a210c;color:#f7d978}
.act small{display:block;font-family:'EB Garamond';font-weight:400;letter-spacing:0;font-size:13px;color:var(--muted)}
.close{align-self:center;min-height:40px;padding:0 20px;border-radius:9px;border:1px solid var(--line);background:transparent;color:var(--muted);font-size:12px}
.loglist{font-size:14px;line-height:1.35;color:#d9d3c9;display:flex;flex-direction:column;gap:4px}
.banner{position:fixed;left:50%;top:40%;transform:translate(-50%,-50%);background:#0b0a0df0;border:1px solid var(--gold);border-radius:12px;padding:14px 22px;font-family:'Cinzel';font-weight:900;letter-spacing:2px;font-size:20px;color:#f7d978;z-index:20;text-align:center;pointer-events:none;animation:fadeb 1.6s forwards}
.banner.red{border-color:var(--red);color:#ff8a8a}
@keyframes fadeb{0%{opacity:0;transform:translate(-50%,-40%)}15%{opacity:1;transform:translate(-50%,-50%)}80%{opacity:1}100%{opacity:0}}
.hint{font-size:13px;color:var(--muted);text-align:center;padding:0 10px 6px}


.afx{position:absolute;inset:-7px;pointer-events:none;z-index:5;border-radius:12px}
.afx.velo{inset:-14px;border-radius:50%;background:conic-gradient(from 0deg,#fff6c8,#e8b93a55 12%,#fff6c8 25%,#e8b93a55 37%,#fff6c8 50%,#e8b93a55 62%,#fff6c8 75%,#e8b93a55 87%,#fff6c8);-webkit-mask:radial-gradient(circle,transparent 60%,#000 62%,#000 70%,transparent 72%);mask:radial-gradient(circle,transparent 60%,#000 62%,#000 70%,transparent 72%);filter:drop-shadow(0 0 8px #e8b93a);animation:velo 1.7s ease-out forwards}
.afx.velo2{inset:-2px;border-radius:9px;clip-path:polygon(50% 0,100% 18%,100% 82%,50% 100%,0 82%,0 18%);background:linear-gradient(135deg,#fff6c855,#e8b93a1a 35%,#fff6c866 55%,#e8b93a11 80%);box-shadow:inset 0 0 18px #fff6c8;animation:shard 1.7s ease-out forwards}
.afx.shield{inset:-7px -8px;border-radius:50%;z-index:4;background:linear-gradient(115deg,transparent 38%,#fff6c859 47%,transparent 56%) 0 0/300% 100% no-repeat,url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='24.2'><path d='M7 0L14 4v8.1L7 16.1 0 12.1V4zM7 16.1v8.1' fill='none' stroke='%23f7d978' stroke-opacity='.38' stroke-width='.7'/></svg>"),radial-gradient(ellipse,#fff6c80d 35%,#e8b93a30 64%,#fff6c826 70%);border:1.5px solid #f7d978cc;box-shadow:0 0 12px #e8b93a99,inset 0 0 16px #fff6c866,inset 0 7px 9px -5px #fff;animation:shpulse 2.4s ease-in-out infinite,shsheen 3.6s linear infinite}
@keyframes shsheen{0%{background-position:130% 0,0 0,0 0}55%,100%{background-position:-70% 0,0 0,0 0}}
#fxl{position:fixed;inset:0;pointer-events:none;z-index:56}
#fxc{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:57}
.fxlab{font-family:Cinzel,serif;font-weight:900;font-size:11px;letter-spacing:1.5px;padding:3px 9px;border-radius:6px;background:#0b0a0df2;white-space:nowrap;text-shadow:0 0 8px currentColor;box-shadow:0 0 14px -3px currentColor,0 3px 10px #000c;opacity:0}
.fxnum{font-family:Cinzel,serif;font-weight:900;font-size:20px;white-space:nowrap;text-shadow:0 0 3px #000,0 2px 4px #000,0 0 12px currentColor;opacity:0}
.afx.cupula{inset:-10px;border-radius:50%;border:3px solid #fff6c8;box-shadow:0 0 26px #e8b93a,inset 0 0 22px #fff6c8;background:radial-gradient(circle,#fff6c833,transparent 70%);animation:velo 1.4s ease-out forwards}
@keyframes shpulse{50%{box-shadow:0 0 20px #e8b93acc,inset 0 0 20px #fff6c888;border-color:#fff6c8}}
.clipfx{position:fixed;inset:0;z-index:60;background:#000;display:flex;flex-direction:column;align-items:center;justify-content:center;animation:clipin .2s ease-out}
.clipfx.tall video{width:auto;height:min(72vh,760px);aspect-ratio:3/4}
.clipfx video{opacity:0;transition:opacity .16s;will-change:opacity;transform:translateZ(0)}.clipfx video.on{opacity:1}
.clipfx video::-webkit-media-controls,.clipfx video::-webkit-media-controls-start-playback-button,.clipfx video::-webkit-media-controls-overlay-play-button{display:none!important;-webkit-appearance:none}
.clipfx.out{opacity:0;transition:opacity .2s}
.clipfx video{width:100%;max-width:900px;aspect-ratio:16/9;object-fit:cover;box-shadow:0 0 40px #000;border-top:1px solid #e8b93a55;border-bottom:1px solid #e8b93a55}
.clipname{margin-top:10px;font-family:'Cinzel';font-weight:700;letter-spacing:4px;color:#f3e6c0;font-size:18px;text-shadow:0 0 12px #e8b93a}
@keyframes clipin{from{opacity:0}to{opacity:1}}
.afx.festin{box-shadow:0 0 0 3px #c22,0 0 24px #a00;background:radial-gradient(circle,#ff303033,transparent 70%);animation:ring 1.5s ease-out forwards}
.afx.dama{box-shadow:0 0 0 3px #7fd18e,0 0 24px #3fae5a;background:radial-gradient(circle,#7fd18e33,transparent 70%);animation:ring 1.5s ease-out forwards}
.afx.prem{box-shadow:0 0 0 3px #bfe9ff,0 0 26px #5aa0e6;background:radial-gradient(circle,#bfe9ff44,transparent 70%);animation:ring 1.4s ease-out forwards}
.afx.hielo{box-shadow:0 0 0 3px #dff6ff,0 0 26px #7fc8ff;background:linear-gradient(160deg,#dff6ffaa,#7fc8ff33 40%,transparent 70%);animation:ring 1.6s ease-out forwards}
.afx.vinculo{box-shadow:0 0 0 3px #c98548,0 0 22px #7fd18e;background:radial-gradient(circle,#c9854844,transparent 70%);animation:ring 1.4s ease-out forwards}
.afx.fuego{box-shadow:0 0 0 3px #ff8a3a,0 0 30px #e0484f;background:radial-gradient(circle at 50% 100%,#ff8a3a88,#e0484f33 50%,transparent 75%);animation:ring 1.4s ease-out forwards}
.afx.miedo,.afx.sombra{box-shadow:0 0 0 3px #6b2a8a,0 0 30px #2a0d3a;background:radial-gradient(circle,#2a0d3aaa,transparent 75%);animation:ring 1.5s ease-out forwards}
.afx.lagrima{box-shadow:0 0 0 3px #bfe9ff,0 0 22px #ffffff;animation:ring 1.3s ease-out forwards}
.afx.herida{box-shadow:0 0 0 2px #e0484f,0 0 16px #e0484f;animation:ring 1s ease-out forwards}
.afl{position:absolute;left:50%;top:-8px;transform:translateX(-50%);z-index:6;pointer-events:none;white-space:nowrap;font-family:Cinzel;font-weight:900;font-size:10px;letter-spacing:1px;padding:2px 6px;border-radius:6px;background:#0b0a0de6;animation:afl 1.6s ease-out forwards}
.afl.num{font-size:17px;background:none;color:#ff8a8a;text-shadow:0 1px 3px #000}
@keyframes velo{0%{transform:scale(.4) rotate(-60deg);opacity:0}25%{transform:scale(1.06) rotate(0);opacity:1}45%{transform:scale(1)}75%{opacity:1}100%{opacity:0;transform:scale(1.12) rotate(25deg)}}
@keyframes shard{0%{opacity:0;transform:scale(.7)}30%{opacity:1;transform:scale(1)}75%{opacity:.85}100%{opacity:0}}
@keyframes ring{0%{opacity:0;transform:scale(.85)}20%{opacity:1;transform:scale(1.04)}70%{opacity:1;transform:scale(1)}100%{opacity:0}}
@keyframes afl{0%{opacity:0;transform:translate(-50%,6px)}15%{opacity:1;transform:translate(-50%,-10px)}80%{opacity:1}100%{opacity:0;transform:translate(-50%,-22px)}}
/* muro de espinas */
.thorns{position:fixed;height:64px;z-index:57;pointer-events:none;background:linear-gradient(0deg,#1d4a2a,#17332299 55%,transparent);border-bottom:3px solid #7fd18e;box-shadow:0 0 18px #3fae5a;filter:drop-shadow(0 0 10px #3fae5acc);animation:thIn 2.8s ease-out forwards}
.thorns.down{transform:scaleY(-1)}
.thorns i{position:absolute;bottom:0;width:9%;height:var(--h);clip-path:polygon(50% 0,62% 40%,100% 100%,0 100%,38% 40%);background:linear-gradient(0deg,#1d4a2a,#4fa060 55%,#d8ffe0);transform-origin:bottom;transform:scaleY(0);animation:thorn .45s var(--d) cubic-bezier(.3,1.6,.5,1) forwards}
@keyframes thorn{to{transform:scaleY(1)}}
@keyframes thIn{0%{opacity:0}8%{opacity:1}80%{opacity:1}100%{opacity:0}}
/* vista previa del combate */
.pv{position:absolute;left:1px;right:1px;top:36%;z-index:7;pointer-events:none;text-align:center;font-family:Cinzel;font-weight:900;font-size:8px;line-height:1.15;letter-spacing:.3px;padding:2px 1px;border-radius:5px;background:#0b0a0df0;border:1px solid}
.pv small{display:block;font-family:'EB Garamond';font-weight:600;font-size:10px;letter-spacing:0}
.pv.win{color:#8cf0a0;border-color:#3fae5a}.pv.lose{color:#ff8a8a;border-color:#e0484f}.pv.tie{color:#f7d978;border-color:#e8b93a}.pv.hold{color:#c9c2b8;border-color:#7a7480}
.pv.big{left:50%;right:auto;transform:translateX(-50%);white-space:nowrap;font-size:13px;padding:5px 10px;top:-46px;z-index:60;box-shadow:0 4px 14px #000c}
.pv.big small{font-size:13px;display:inline;margin-left:5px}
.afx.muro{box-shadow:0 0 0 3px #3fae5a,0 0 26px #173322;background:repeating-linear-gradient(45deg,#17332288 0 6px,transparent 6px 12px);animation:ring 1.5s ease-out forwards}
/* la Ruptura */
.rup{position:fixed;inset:0;z-index:70;background:radial-gradient(circle at 50% 42%,#2a0a0e,#000 70%);display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;animation:fxIn .3s ease-out}
.rup .seal{position:absolute;left:50%;top:40%;width:56vmin;height:56vmin;transform:translate(-50%,-50%);animation:sealShake 1.4s ease-in}
.rup .ring{position:absolute;inset:0;border-radius:50%;border:3px solid #f7d978;box-shadow:0 0 30px #e8b93a,inset 0 0 30px #e8b93a88;background:repeating-conic-gradient(#f7d97833 0 3deg,transparent 3deg 36deg);animation:sealBreak 1.6s ease-in forwards}
.rup .ring.r2{inset:14%;border-width:2px;animation-delay:.1s}
.rup .core{position:absolute;inset:36%;border-radius:50%;background:radial-gradient(circle,#fff,#f7d978 40%,transparent 70%);animation:coreBurst 1.8s ease-in forwards}
.rup .seal i{position:absolute;left:50%;top:50%;width:var(--l);height:3px;transform-origin:0 50%;transform:rotate(var(--a)) scaleX(0);background:linear-gradient(90deg,#fff,#ff5a3a 40%,transparent);box-shadow:0 0 10px #ff3a2a;animation:crack .5s var(--d) ease-out forwards;animation-delay:calc(.9s + var(--d))}
.rup .shards b{position:absolute;left:50%;top:40%;width:calc(16px*var(--s));height:calc(26px*var(--s));clip-path:polygon(50% 0,100% 60%,40% 100%,0 40%);background:linear-gradient(135deg,#fff6c8,#e8b93a 50%,#8a2a1a);opacity:0;animation:shard2 1.6s 1.35s cubic-bezier(.2,.7,.3,1) forwards}
.rup .flash{position:absolute;inset:0;background:#fff;opacity:0;animation:flash 1s 1.3s ease-out forwards;pointer-events:none}
.rup .rt{position:relative;margin-top:52vmin;font-family:Cinzel;font-weight:900;font-size:clamp(24px,8vw,48px);letter-spacing:.25em;padding-left:.25em;text-align:center;background:linear-gradient(180deg,#ffd0c8,#e0484f 50%,#6a0c12);-webkit-background-clip:text;background-clip:text;color:transparent;opacity:0;animation:nmIn 3s 1.4s ease-out forwards;text-shadow:none;filter:drop-shadow(0 0 14px #e0484f88)}
.rup .rs{position:relative;font-style:italic;font-size:17px;color:#ece7dfcc;opacity:0;text-align:center;padding:0 24px;animation:ttIn 3s 1.6s ease-out forwards}
.rup .skip{position:absolute;bottom:18px;font-size:13px;color:#a8a29988}
.rup.out{animation:fxOut .45s ease-in forwards}
@keyframes sealShake{0%,60%{transform:translate(-50%,-50%)}62%{transform:translate(-52%,-49%)}66%{transform:translate(-48%,-51%)}70%{transform:translate(-51%,-50%)}74%{transform:translate(-49%,-50%)}100%{transform:translate(-50%,-50%)}}
@keyframes sealBreak{0%{opacity:0;transform:scale(.6) rotate(-30deg)}30%{opacity:1;transform:scale(1) rotate(0)}80%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.35)}}
@keyframes coreBurst{0%{opacity:.2;transform:scale(.5)}70%{opacity:1;transform:scale(1)}85%{transform:scale(2.5);opacity:1}100%{transform:scale(4);opacity:0}}
@keyframes crack{to{transform:rotate(var(--a)) scaleX(1)}}
@keyframes shard2{0%{opacity:1;transform:translate(-50%,-50%)}100%{opacity:0;transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y))) rotate(var(--r))}}
@keyframes flash{0%{opacity:0}10%{opacity:.85}100%{opacity:0}}
/* mesa tras la Ruptura */
body.ruptura{background:radial-gradient(ellipse at 50% 50%,#2a0a0e 0%,#120607 45%,#0b0a0d 80%)}
body.ruptura #app{background:linear-gradient(115deg,transparent 30%,#e0484f14 31%,transparent 32%),linear-gradient(65deg,transparent 60%,#e0484f12 61%,transparent 62%),linear-gradient(160deg,transparent 45%,#e8b93a10 46%,transparent 47%)}
body.ruptura .mid{color:#ff8a8a;text-shadow:0 0 10px #e0484f}

/* ===== estética de la mesa (10 nov) ===== */
html,body{background:#07060a}
#app{position:relative;background:#09080c}
.half{position:relative;isolation:isolate;overflow:hidden;padding:2px 0 4px}
.half::before{content:"";position:absolute;inset:-12px;z-index:-3;background-size:cover;background-position:center 22%;filter:blur(5px) brightness(.26) saturate(.85);transform:scale(1.05)}
.half.luz::before{background-image:url(../img/Drauthos.jpg)}
.half.osc::before{background-image:url(../img/Astharot.jpg)}
.half::after{content:"";position:absolute;inset:0;z-index:-2;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' seed='7'/><feColorMatrix values='0 0 0 0 .5  0 0 0 0 .48  0 0 0 0 .46  0 0 0 .9 0'/></filter><rect width='240' height='240' filter='url(%23n)'/></svg>"),url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='600' height='600'><filter id='v'><feTurbulence type='turbulence' baseFrequency='.012 .02' numOctaves='2' seed='3'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 -14 3.2'/></filter><rect width='600' height='600' filter='url(%23v)'/></svg>");background-size:240px 240px,600px 600px;mix-blend-mode:overlay;opacity:.55;pointer-events:none}
.half.luz{background:linear-gradient(180deg,#3a2c0c55,#0b0a0d00 45%,#3a2c0c40);box-shadow:inset 0 0 0 1px #e8b93a22,inset 0 0 40px #000c}
.half.osc{background:linear-gradient(180deg,#3d0b1066,#0b0a0d00 45%,#3d0b1050);box-shadow:inset 0 0 0 1px #e0484f22,inset 0 0 40px #000c}
.half.mine.luz{background:linear-gradient(0deg,#3a2c0c66,#0b0a0d00 50%,#3a2c0c30)}
.half.mine.osc{background:linear-gradient(0deg,#3d0b1077,#0b0a0d00 50%,#3d0b1035)}
.fog{position:absolute;inset:-10% -60%;z-index:-1;pointer-events:none;opacity:.35;background:radial-gradient(ellipse 30% 40% at 25% 60%,#9a95a826,transparent 70%),radial-gradient(ellipse 25% 30% at 70% 35%,#9a95a81f,transparent 70%),radial-gradient(ellipse 35% 25% at 50% 90%,#9a95a81a,transparent 70%);animation:fog 38s linear infinite alternate}
.half.osc .fog{background:radial-gradient(ellipse 30% 40% at 25% 60%,#5a1a3a2e,transparent 70%),radial-gradient(ellipse 25% 30% at 70% 35%,#2a0d3a33,transparent 70%),radial-gradient(ellipse 35% 25% at 50% 90%,#3d0b1026,transparent 70%)}
.half.mine .fog{animation-duration:46s;animation-direction:alternate-reverse}
@keyframes fog{from{transform:translateX(-12%)}to{transform:translateX(12%)}}
.zone{position:relative;font-size:9px;letter-spacing:4px;color:#b8b0a0aa;text-shadow:0 1px 2px #000;margin:3px 0}
.zone::before,.zone::after{content:"";display:inline-block;vertical-align:middle;width:22%;height:1px;margin:0 8px;background:linear-gradient(90deg,transparent,#b8b0a055)}
.zone::after{background:linear-gradient(270deg,transparent,#b8b0a055)}
.half.luz .zone{color:#e8d49aaa}.half.osc .zone{color:#e8a0a0aa}
/* casillas talladas */
.half .slot{border:1px solid #00000099;border-radius:8px;background:radial-gradient(ellipse at 50% 40%,#2a262e99,#0d0c10cc 75%);box-shadow:inset 0 2px 5px #000d,inset 0 -1px 0 #ffffff12,0 1px 0 #ffffff10}
.half.luz .slot{box-shadow:inset 0 2px 5px #000d,inset 0 0 0 1px #e8b93a1c,0 1px 0 #ffffff10}
.half.osc .slot{box-shadow:inset 0 2px 5px #000d,inset 0 0 0 1px #e0484f1c,0 1px 0 #ffffff10}
.gl{position:absolute;inset:26%;background:center/contain no-repeat;opacity:.16}
.half.luz .gl{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'><g fill='none' stroke='%23e8b93a' stroke-width='1.4'><circle cx='20' cy='20' r='6'/><path d='M20 4v7M20 29v7M4 20h7M29 20h7M8.7 8.7l5 5M26.3 26.3l5 5M8.7 31.3l5-5M26.3 13.7l5-5'/></g></svg>")}.half.osc .gl{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'><path d='M25 6a14 14 0 1 0 0 28a11 11 0 1 1 0-28z' fill='none' stroke='%23e0484f' stroke-width='1.4'/><circle cx='26' cy='14' r='1.2' fill='%23e0484f'/></svg>")}
.row{position:relative;z-index:2}
/* sello divino */
.mid{position:relative;z-index:4;height:58px;margin:-6px 0;padding:0 10px;border:none;background:linear-gradient(90deg,transparent,#0b0a0dd9 18%,#0b0a0dd9 82%,transparent);display:flex;align-items:center;justify-content:center;gap:10px}
.mid::before,.mid::after{content:"";position:absolute;left:6%;right:6%;height:1px;background:linear-gradient(90deg,transparent,#e8b93a66,transparent)}
.mid::before{top:4px}.mid::after{bottom:4px}
.seal{width:58px;height:58px;flex:none;filter:drop-shadow(0 0 6px #e8b93a66)}
.seal .o{fill:#120f08;stroke:#e8b93a;stroke-width:2.5}.seal .o2{fill:none;stroke:#e8b93a77;stroke-width:1}
.seal .rn text{font-size:13px;text-anchor:middle;font-family:serif}
.seal .rn .on{fill:#f7d978;filter:drop-shadow(0 0 2px #e8b93a)}.seal .rn .off{fill:#3d3628}
.seal .st{fill:#e8b93a22;stroke:#e8b93a99;stroke-width:1}
.seal .num{font-family:Cinzel;font-weight:900;font-size:20px;text-anchor:middle;fill:#fff3c8}
.seal.broken{filter:drop-shadow(0 0 8px #e0484f)}
.seal.broken .o{stroke:#7a2a20;fill:#140707}.seal.broken .o2,.seal.broken .st{stroke:#5a1e18;fill:none}
.seal .ck{fill:none;stroke:#ff5a3a;stroke-width:2.2;filter:drop-shadow(0 0 3px #ff3a2a);animation:ckpulse 2.2s ease-in-out infinite}
@keyframes ckpulse{50%{stroke:#ffb08a;opacity:.7}}
.sl-l,.sl-r{font-family:Cinzel;font-size:10px;letter-spacing:2px;color:#d9c79a;width:34%;text-shadow:0 1px 2px #000}
.sl-l{text-align:right}.sl-r{font-family:'EB Garamond';font-style:italic;letter-spacing:0;font-size:13px;color:#a8a299}
.sl-l.rupt{color:#ff8a8a;font-weight:900}
.muro-tag{position:absolute;bottom:-2px;font-size:11px;color:#7fd18e}
/* ---------- marcos por rareza: cada metal se reconoce en la mesa (13/11/2026) ----------
   El borde es un degradado metálico fijo. Encima, solo con transform y opacity (no cargan el teléfono):
   .fr = luz que recorre el borde · .fz = rayos (Mítica) o facetas y destellos (UR) · ::after = reflejo que cruza la carta.
   --ph (lo pone cardHTML) mantiene el compás de la animación aunque la mesa se vuelva a dibujar. */
.card::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:5px}
.card[class*="r-"]{border-color:transparent!important;background:linear-gradient(#1a1720,#1a1720) padding-box,var(--metal,#8e9299) border-box}
.card.r-c{--metal:linear-gradient(160deg,#a3a6ac,#4a4d54 32%,#84878e 54%,#2e3036 80%,#6b6e75)}
.card.r-r{--metal:linear-gradient(160deg,#f0b884,#8a4f22 32%,#d89252 54%,#5e3212 80%,#b87a44)}
.card.r-sr{--metal:linear-gradient(160deg,#ffffff,#8e97a6 30%,#eef2f8 52%,#6d7584 78%,#cfd6e0)}
.card.r-ssr{--metal:linear-gradient(160deg,#fff6c8,#b8860b 28%,#ffe08a 50%,#8a5f0a 76%,#f7d978)}
.card.r-ur{--metal:linear-gradient(160deg,#ffffff,#9fdcff 22%,#e9d8ff 44%,#ffffff 56%,#8fd0f5 78%,#ffe6f7)}
.card.r-mit{--metal:linear-gradient(160deg,#ff8a8a,#8a0e16 28%,#f0303c 50%,#4a0509 76%,#e0484f)}
.card.r-c::after{box-shadow:inset 0 0 0 1px #00000066}
.card.r-r::after{box-shadow:inset 0 0 0 1px #2a140666,inset 0 1px 0 1px #f0b88433}
.card.r-sr::after{box-shadow:inset 0 0 0 1px #ffffff2e,inset 0 0 6px #dfe6f01f}
.card.r-ssr{box-shadow:0 0 7px #e8b93a59}.card.r-ur{box-shadow:0 0 8px #bfe9ff66}.card.r-mit{box-shadow:0 0 9px #f0303c80}
.card .fr{position:absolute;inset:0;border-radius:5px;padding:2px;pointer-events:none;overflow:hidden;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.card .fr::before{content:"";position:absolute;left:50%;top:50%;width:230%;aspect-ratio:1;transform:translate(-50%,-50%);animation:frSpin 4.2s linear infinite;animation-delay:var(--ph,0s);will-change:transform}
.card.r-sr .fr{padding:1px}.card.r-sr .fr::before{background:conic-gradient(transparent 0 84%,#ffffffcc 92%,transparent 100%);animation-duration:7s}
.card.r-ssr .fr::before{background:conic-gradient(transparent 0 28%,#e8b93a 38%,#fffbe0 44%,#e8b93a 50%,transparent 60% 78%,#e8b93a 88%,#fffbe0 94%,#e8b93a 100%);animation-duration:4.6s}
.card.r-ur .fr::before{background:conic-gradient(#ffffff,#7fd4ff,#e3c8ff,#ffffff,#a8f3ff,#ffc9ee,#ffffff,#7fd4ff,#ffffff);animation-duration:6s}
.card.r-mit .fr::before{background:conic-gradient(transparent 0 20%,#7a0e14 30%,#ff2a36 40%,#fff 45%,#ff2a36 50%,transparent 60% 70%,#7a0e14 80%,#ff2a36 90%,#fff 95%,#ff2a36 100%);animation-duration:2.6s}
@keyframes frSpin{to{transform:translate(-50%,-50%) rotate(360deg)}}
.card .fz{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.card .fz *{vector-effect:non-scaling-stroke}
/* Mítica: rayos rojos que saltan por el borde, uno tras otro */
.card.r-mit .fz path{fill:none;stroke-linecap:round;stroke-linejoin:round;opacity:0;animation:zap 2.6s linear infinite;animation-delay:var(--ph,0s)}
.card.r-mit .fz .g{stroke:#ff2a36;stroke-width:3px}.card.r-mit .fz .w{stroke:#fff0f0;stroke-width:1px}
.card.r-mit .fz .b{animation-delay:calc(var(--ph,0s) + .62s)}.card.r-mit .fz .c{animation-delay:calc(var(--ph,0s) + 1.28s)}.card.r-mit .fz .d{animation-delay:calc(var(--ph,0s) + 1.92s)}
@keyframes zap{0%{opacity:0}2%{opacity:1}5%{opacity:.15}8%{opacity:.95}12%{opacity:.3}15%{opacity:.8}20%,100%{opacity:0}}
.card.r-mit::after{box-shadow:inset 0 0 9px #f0303c73;background:linear-gradient(115deg,transparent 42%,#ff6a7240 50%,transparent 58%);transform:translateX(-130%);animation:glint 5.2s ease-in-out infinite;animation-delay:var(--ph,0s)}
/* UR: cristal tallado, con facetas que atrapan la luz y destellos */
.card.r-ur .fz polygon{fill:#fff;opacity:.05;animation:facet 4.4s ease-in-out infinite;animation-delay:var(--ph,0s)}
.card.r-ur .fz .f2{animation-delay:calc(var(--ph,0s) + .9s)}.card.r-ur .fz .f3{animation-delay:calc(var(--ph,0s) + 1.8s)}.card.r-ur .fz .f4{animation-delay:calc(var(--ph,0s) + 2.7s)}
.card.r-ur .fz line{stroke:#fff;stroke-width:.6px;opacity:.28}
.card.r-ur .fz .st{fill:#fff;opacity:0;transform-box:fill-box;transform-origin:center;animation:star 3.3s ease-in-out infinite;animation-delay:var(--ph,0s)}
.card.r-ur .fz .s2{animation-delay:calc(var(--ph,0s) + 1.1s)}.card.r-ur .fz .s3{animation-delay:calc(var(--ph,0s) + 2.2s)}
@keyframes facet{0%,100%{opacity:.04}18%{opacity:.34}36%{opacity:.07}}
@keyframes star{0%,100%{opacity:0;transform:scale(.2) rotate(0deg)}12%{opacity:1;transform:scale(1) rotate(45deg)}26%{opacity:0;transform:scale(.3) rotate(90deg)}}
.card.r-ur::after{background:linear-gradient(105deg,transparent 40%,#ffffffa6 48%,#bfe9ff73 52%,transparent 60%);transform:translateX(-130%);animation:glint 3.8s ease-in-out infinite;animation-delay:var(--ph,0s)}
/* SSR: oro vivo */
.card.r-ssr::after{box-shadow:inset 0 0 7px #e8b93a66;background:linear-gradient(112deg,transparent 36%,#fff3c459 46%,#ffe9a0a6 50%,#fff3c459 54%,transparent 64%);transform:translateX(-130%);animation:glint 4.4s ease-in-out infinite;animation-delay:var(--ph,0s)}
@keyframes glint{0%,52%{transform:translateX(-130%)}100%{transform:translateX(130%)}}
.card.used .fr,.card.used .fz{opacity:.45}
body.cine .card .fr::before,body.cine .card .fz *,body.cine .card::after{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.card .fr::before,.card .fz *,.card::after{animation:none!important}.card.r-mit .fz .a{opacity:.7}.card.r-ur .fz polygon{opacity:.14}}
@keyframes twinkle{0%,100%{opacity:.15}50%{opacity:.95}}
.card.tgt,.card.sel,.card.ok{animation-name:pulse}
.card.sel,.card.ok{animation:none}
/* barras superior e inferior */
.top{position:relative;background:linear-gradient(180deg,#1d1a22,#100e14);border-bottom:1px solid #00000099;box-shadow:inset 0 1px 0 #ffffff14,0 2px 6px #0008}
.top .who{color:#e6dccb}
.vida{background:linear-gradient(180deg,#2a2630,#16141a);border:1px solid #4a4450;border-radius:7px;padding:3px 8px;box-shadow:inset 0 1px 0 #ffffff1a,inset 0 -1px 2px #000a}
.vida b{font-family:Cinzel;font-weight:900;color:#f3e6c0;text-shadow:0 1px 2px #000}
.vida .hpbar{width:82px;height:10px;border-radius:3px;background:#0a080b;box-shadow:inset 0 1px 3px #000,0 0 0 1px #6a5a3a;position:relative}
.vida .hpbar span{background:linear-gradient(180deg,#ff6a5a,#b8221a 55%,#6a0c0a);box-shadow:inset 0 1px 0 #ffb0a066;transition:width .6s ease}
.vida .hpbar::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 9px,#00000066 9px 10px);pointer-events:none}
.log{background:#0b0a0dcc;border-bottom:1px solid #00000099}
.hand{background:linear-gradient(180deg,#14111a,#0b0a0d);border-top:1px solid #e8b93a33;box-shadow:inset 0 6px 10px #0009}
.bar{background:#0b0a0d}
/* botón de sello de cera */
.end{position:relative;min-height:46px;padding:0 16px 0 40px;border:none;border-radius:23px 19px 24px 18px / 20px 25px 19px 24px;background:radial-gradient(circle at 35% 30%,#d8484a,#9a1a1e 55%,#5a0a0e);color:#ffe2cf;font-size:12px;letter-spacing:1.5px;text-shadow:0 -1px 0 #3a0508,0 1px 0 #ff9a8a55;box-shadow:inset 0 2px 3px #ff9a8a66,inset 0 -3px 5px #3a0508,0 3px 8px #000c}
.end::before{content:"";position:absolute;left:8px;top:50%;width:26px;height:26px;margin-top:-13px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#c8383c,#7a1014);box-shadow:inset 0 1px 2px #ff9a8a88,inset 0 -2px 3px #3a0508}
.end::after{content:"✦";position:absolute;left:8px;top:50%;width:26px;margin-top:-9px;text-align:center;font-size:14px;color:#ffcab0;text-shadow:0 1px 0 #3a0508}
.end:disabled{filter:grayscale(.8) brightness(.6);opacity:1}
body.ruptura .half{box-shadow:inset 0 0 60px #e0484f40,inset 0 0 0 1px #e0484f44}
body.ruptura .mid::before,body.ruptura .mid::after{background:linear-gradient(90deg,transparent,#e0484f88,transparent)}
/* ---------- etapa 2: golpes con peso, heridas visibles y el Sello que oscurece la mesa ---------- */
.card .wd{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.card .wd path{fill:none;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.card .wd .k0{stroke:#040203;stroke-width:2.6px;opacity:.92}
.card .wd .k1{stroke:#ff5a4a;stroke-width:.9px;opacity:.9}
.card.w3 img{filter:saturate(.55) brightness(.8)}
.card.w3 .wd .k1{animation:ckpulse 2.2s ease-in-out infinite}
.card.wnew .wd{animation:wdIn .55s ease-out}
@keyframes wdIn{0%{opacity:0;transform:scale(1.1)}35%{opacity:1}100%{transform:none}}
.flashw{position:fixed;inset:0;z-index:53;pointer-events:none;background:#fff;opacity:0}
.afl.num.big{font-size:24px;color:#ffb8a8;text-shadow:0 0 10px #e0484f,0 1px 3px #000}
.card .pw.hitn,.vida b.hitn{animation:pwHit .7s ease-out}
.vida b{display:inline-block}
@keyframes pwHit{0%{transform:scale(1.75);color:#fff;text-shadow:0 0 10px #e0484f}100%{transform:none}}
.shaking.hard{animation:shakeH .42s}
@keyframes shakeH{0%,100%{transform:none}15%{transform:translate(-7px,3px) rotate(-1.5deg)}35%{transform:translate(7px,-3px) rotate(1.5deg)}55%{transform:translate(-5px,-2px)}75%{transform:translate(3px,2px)}}
.half::before{filter:blur(5px) brightness(calc(.26 - .1*var(--dread,0))) saturate(calc(.85 - .4*var(--dread,0)));transition:filter 1.4s ease}
.drd{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:var(--dread,0);transition:opacity 1.4s ease}
.half.foe .drd{background:radial-gradient(ellipse 80% 90% at 50% 100%,#b3151c70,#5a0a1038 45%,transparent 74%),linear-gradient(0deg,transparent 30%,#000000a8)}
.half.mine .drd{background:radial-gradient(ellipse 80% 90% at 50% 0%,#b3151c70,#5a0a1038 45%,transparent 74%),linear-gradient(180deg,transparent 30%,#000000a8)}
.mid::after{content:"";position:absolute;left:6%;right:6%;top:50%;height:1px;z-index:-1;pointer-events:none;opacity:var(--dread,0);box-shadow:0 0 26px 9px #e0484f;transition:opacity 1.4s ease}
.seal{transform-origin:50% 50%}
.seal.low{filter:drop-shadow(0 0 8px #e8763aaa)}.seal.low .o{stroke:#e09a3a}
.seal.crit{filter:drop-shadow(0 0 11px #e0484fdd);animation:sealBeat 1.3s ease-in-out infinite}.seal.crit .o{stroke:#e0603a}.seal.crit .num{fill:#ffd2c2}
.seal.hit{animation:sealHit .7s ease-out}
.seal.crit.hit{animation:sealHit .7s ease-out,sealBeat 1.3s ease-in-out .7s infinite}
@keyframes sealBeat{0%,100%{transform:none}12%{transform:scale(1.08)}24%{transform:none}36%{transform:scale(1.04)}48%{transform:none}}
@keyframes sealHit{0%{transform:scale(1.3);filter:drop-shadow(0 0 16px #ff5a3a) brightness(1.9)}100%{transform:none}}
.seal .pk{fill:none;stroke:#ff8a5a;stroke-width:1.1;opacity:.85;filter:drop-shadow(0 0 2px #ff3a2a)}
@media (prefers-reduced-motion:reduce){.seal.crit,.seal.hit,.card.wnew .wd,.card.w3 .wd .k1{animation:none}}
/* ---------- la Ruptura, cinemática nueva ---------- */
.rp2{background:radial-gradient(circle at 50% 40%,#1a0709,#000 72%);display:block}
.rp2 canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.rp2 .rp-beam{position:absolute;left:0;right:0;height:50%;opacity:0;pointer-events:none}
.rp2 .rp-beam.l{top:0;background:radial-gradient(ellipse 95% 100% at 50% 0%,#f7d97860,#e8b93a26 45%,transparent 76%)}
.rp2 .rp-beam.o{bottom:0;background:radial-gradient(ellipse 95% 100% at 50% 100%,#e0484f70,#6a0c1238 45%,transparent 76%)}
.rp2 .rp-cr{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.rp2 path.c0,.rp2 path.c1{fill:none;stroke-linecap:round;stroke-linejoin:round}
.rp2 path.c0{stroke:#ff3a2a;opacity:.8}.rp2 path.c1{stroke:#fff3e8}
.rp2 .rp-cr path.c0{stroke-width:7;opacity:.5}.rp2 .rp-cr path.c1{stroke-width:1.5}
.rp2 .rp-pos{position:absolute;left:50%;top:40%;width:58vmin;height:58vmin;margin:-29vmin 0 0 -29vmin}
.rp2 .rp-core{position:absolute;inset:-28%;border-radius:50%;background:radial-gradient(circle,#ff5a3acc,#e0484f55 35%,transparent 68%);opacity:0}
.rp2 .rp-sh,.rp2 .rp-sc,.rp2 .rp-fr,.rp2 .rp-fr i{position:absolute;inset:0;display:block}
.rp2 svg.sl{width:100%;height:100%;display:block;overflow:visible}
.rp2 svg.sl .o{fill:#120f08;stroke:#e8b93a;stroke-width:2.5}.rp2 svg.sl .o2{fill:none;stroke:#e8b93a77;stroke-width:1}
.rp2 svg.sl text{font-size:13px;text-anchor:middle;font-family:serif;fill:#f7d978}
.rp2 svg.sl .st{fill:#e8b93a22;stroke:#e8b93a99;stroke-width:1}
.rp2 svg.sl path.c0{stroke-width:2.8}.rp2 svg.sl path.c1{stroke-width:.9}
.rp2 .rp-fr{opacity:0}
.rp2 .rp-ring{position:absolute;left:50%;top:40%;width:40vmin;height:40vmin;margin:-20vmin 0 0 -20vmin;border-radius:50%;border:3px solid #ffd9a8;box-shadow:0 0 30px #ff5a3a,inset 0 0 24px #ff5a3a;opacity:0;pointer-events:none}
.rp2 .rp-flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none}
.rp2 .rp-tt{position:absolute;left:0;right:0;top:40%;transform:translateY(-50%);text-align:center;pointer-events:none}
.rp2 .rp-rt{font-family:Cinzel;font-weight:900;font-size:clamp(28px,10vw,58px);letter-spacing:.22em;padding-left:.22em;background:linear-gradient(180deg,#fff0e8,#ff6a5a 38%,#c0242c 62%,#4a070c);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 16px #e0484faa) drop-shadow(0 3px 2px #000);opacity:0}
.rp2 .rp-ln{height:1px;width:min(70vw,360px);margin:10px auto 12px;background:linear-gradient(90deg,transparent,#e8b93a,#e0484f,transparent);opacity:0}
.rp2 .rp-rs{font-style:italic;font-size:17px;line-height:1.3;color:#ece7dfdd;padding:0 28px;opacity:0;text-shadow:0 1px 3px #000}
.rp2 .skip{position:absolute;left:0;right:0;bottom:18px;text-align:center;font-size:13px;color:#a8a29988}
.rp2.still .rp-rt,.rp2.still .rp-ln,.rp2.still .rp-rs{opacity:1}
/* ---------- portada y pantallas de victoria y derrota ---------- */
.cover{padding:26px 14px 30px;gap:16px;min-height:100vh;box-sizing:border-box;background:radial-gradient(ellipse 90% 50% at 50% 0%,#2a1f0c66,transparent 70%),radial-gradient(ellipse 90% 50% at 50% 100%,#3d0b1066,transparent 70%)}
.cover .saga{letter-spacing:8px;font-size:13px;color:#d9c79a}
.cv-title{font-size:clamp(30px,9.5vw,46px);font-weight:900;letter-spacing:.12em;line-height:1.08;background:linear-gradient(100deg,#fff6c8 0%,#f7d978 26%,#e8b93a 44%,#e0484f 62%,#8a1a22 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 2px 2px #000) drop-shadow(0 0 18px #e8b93a33)}
.cv-title i{font-style:normal;font-size:.55em;letter-spacing:.3em;vertical-align:.25em;color:#cfc8bd;-webkit-text-fill-color:#cfc8bd;margin:0 .2em}
.cv-sub{font-family:Cinzel;font-size:11px;letter-spacing:4px;color:#a8a299;margin-top:10px}
.cv-doors{position:relative;display:flex;gap:10px;width:100%;max-width:460px;height:clamp(300px,54vh,470px)}
.cv-door{position:relative;flex:1;min-width:0;padding:0;border-radius:12px;overflow:hidden;border:1px solid;background:#0d0b10;color:var(--text);display:flex;flex-direction:column;align-items:center;justify-content:flex-end;text-align:center;transition:flex .45s ease,opacity .4s ease,transform .2s ease;animation:cvIn .8s cubic-bezier(.2,.8,.3,1) both}
.cv-door.luz{border-color:#c9a24a;box-shadow:0 0 22px #e8b93a33,inset 0 0 0 1px #f7d97822;--dx:-26px}
.cv-door.osc{border-color:#c2242c;box-shadow:0 0 22px #e0484f33,inset 0 0 0 1px #e0484f22;--dx:26px;animation-delay:.12s}
.cv-door:active{transform:scale(.98)}
.cv-door img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 18%;animation:cvArt 14s ease-in-out infinite alternate}
.cv-door.luz img{filter:brightness(.9) saturate(1.05)}.cv-door.osc img{filter:brightness(.82) saturate(1.05)}
.cv-door .sh{position:absolute;inset:0;background:linear-gradient(180deg,#0b0a0d55 0%,transparent 28%,#0b0a0dcc 68%,#0b0a0d 100%)}
.cv-door.luz .sh{box-shadow:inset 0 0 50px #e8b93a30}.cv-door.osc .sh{box-shadow:inset 0 0 50px #e0484f38}
.cv-door .gl{position:absolute;top:-20%;left:-60%;width:50%;height:140%;background:linear-gradient(100deg,transparent,#fff6c81f 50%,transparent);transform:skewX(-16deg);animation:cvGl 6.5s ease-in-out infinite}
.cv-door.osc .gl{background:linear-gradient(100deg,transparent,#ff8a8a1a 50%,transparent);animation-delay:3s}
.cv-door b{position:relative;font-family:Cinzel;font-weight:900;font-size:clamp(15px,4.6vw,20px);letter-spacing:.16em;padding:0 6px}
.cv-door.luz b{color:#f7d978;text-shadow:0 0 12px #e8b93a88,0 2px 3px #000}.cv-door.osc b{color:#ff8a8a;text-shadow:0 0 12px #e0484f88,0 2px 3px #000}
.cv-door small{position:relative;font-size:13px;line-height:1.25;color:#d9d3c9;padding:4px 8px 6px;text-shadow:0 1px 2px #000}
.cv-door em{position:relative;font-style:normal;font-family:Cinzel;font-size:10px;letter-spacing:3px;margin:0 0 14px;padding:5px 12px;border-radius:14px;border:1px solid currentColor;background:#0b0a0dcc}
.cv-door.luz em{color:#f7d978}.cv-door.osc em{color:#ff8a8a}
.cv-seam{position:absolute;left:50%;top:6%;bottom:6%;width:1px;background:linear-gradient(180deg,transparent,#f7d978,#fff,#e0484f,transparent);box-shadow:0 0 12px #fff8;pointer-events:none;z-index:2;animation:fxIn 1.2s .5s both}
.cv-seam::after{content:"";position:absolute;left:50%;top:50%;width:34px;height:34px;margin:-17px;border-radius:50%;border:1.5px solid #e8b93a;background:radial-gradient(circle,#2a1f0c,#0b0a0d 70%);box-shadow:0 0 14px #e8b93a88,inset 0 0 8px #e8b93a55}
.cv-seam::before{content:"✦";position:absolute;left:50%;top:50%;transform:translate(-50%,-52%);z-index:1;color:#f7d978;font-size:15px;text-shadow:0 0 6px #e8b93a}
.cover.go .cv-door{opacity:0;flex:.0001}.cover.go .cv-door.pick{opacity:1;flex:1;transform:scale(1.03)}.cover.go .cv-seam{opacity:0;animation:none}
.cv-meta{font-size:14px;color:var(--muted)}
.cv-rules{width:100%;box-sizing:border-box}
.cv-rules summary{font-family:Cinzel;font-size:12px;letter-spacing:2px;text-align:center;cursor:pointer;padding:4px 0;list-style:none}
.cv-rules summary::-webkit-details-marker{display:none}
.cv-rules summary::after{content:"  ▾";color:var(--muted)}.cv-rules[open] summary::after{content:"  ▴"}
.cv-rules[open] summary{margin-bottom:8px}
.cv-foot{font-size:13px;color:#a8a29999}
@keyframes cvIn{from{opacity:0;transform:translateX(var(--dx))}to{opacity:1;transform:none}}
@keyframes cvArt{from{transform:scale(1.02)}to{transform:scale(1.1) translateY(-1.5%)}}
@keyframes cvGl{0%,55%{left:-60%}100%{left:130%}}
.fin{position:fixed;inset:0;z-index:80;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;box-sizing:border-box;padding:0 22px 30px;text-align:center;background:#050406;overflow:hidden;animation:fxIn .8s .7s both}
.fin .art{position:absolute;inset:0;background-size:cover;background-position:50% 16%;animation:finArt 12s ease-out both}
.fin.win .art{filter:brightness(.92) saturate(1.1)}.fin.lose .art{filter:grayscale(.6) brightness(.48) contrast(1.15)}.fin.tie .art{filter:grayscale(1) brightness(.35)}
.fin .rays{position:absolute;left:50%;top:22%;width:220vmax;height:220vmax;margin:-110vmax 0 0 -110vmax;background:repeating-conic-gradient(#f7d97814 0 4deg,transparent 4deg 14deg);-webkit-mask:radial-gradient(circle,#000 0,transparent 42%);mask:radial-gradient(circle,#000 0,transparent 42%)}
.fin .sh{position:absolute;inset:0;background:linear-gradient(180deg,#05040677 0%,transparent 26%,#050406bb 56%,#050406 84%)}
.fin.lose .sh{box-shadow:inset 0 0 120px #7a0f14aa}.fin.win .sh{box-shadow:inset 0 0 120px #e8b93a33}
.fin .kk{position:relative;font-family:Cinzel;font-size:12px;letter-spacing:5px;color:#d9c79a;animation:ttIn 1.6s 1.1s both}
.fin.lose .kk{color:#e8a0a0}.fin.tie .kk{color:#a8a299}
.fin h2{position:relative;margin:6px 0 0;font-family:Cinzel;font-weight:900;font-size:clamp(36px,12.5vw,66px);letter-spacing:.18em;padding-left:.18em;line-height:1.1;-webkit-background-clip:text;background-clip:text;color:transparent;animation:finT .7s 1.3s cubic-bezier(.3,.9,.3,1) both}
.fin.win h2{background-image:linear-gradient(180deg,#fffbe6,#f7d978 40%,#e8b93a 60%,#7a5a14);filter:drop-shadow(0 0 18px #e8b93a99) drop-shadow(0 3px 2px #000)}
.fin.lose h2{background-image:linear-gradient(180deg,#ffd0c8,#e0484f 45%,#8a1a22 70%,#3a070c);filter:drop-shadow(0 0 18px #e0484f88) drop-shadow(0 3px 2px #000)}
.fin.tie h2{background-image:linear-gradient(180deg,#f0f0f4,#9aa0aa 55%,#4a4e56);filter:drop-shadow(0 3px 2px #000)}
.fin .ln{position:relative;height:1px;width:min(70vw,340px);margin:12px 0;background:linear-gradient(90deg,transparent,currentColor,transparent);opacity:.8;animation:fxIn 1s 1.8s both}
.fin.win .ln{color:#e8b93a}.fin.lose .ln{color:#e0484f}.fin.tie .ln{color:#9aa0aa}
.fin .why{position:relative;font-style:italic;font-size:17px;line-height:1.3;color:#ece7dfdd;text-shadow:0 1px 3px #000;animation:ttIn 1.6s 1.5s both}
.fin .st{position:relative;display:flex;gap:8px;justify-content:center;margin:16px 0 18px;animation:ttIn 1.6s 1.8s both}
.fin .st div{min-width:86px;padding:8px 8px 7px;border:1px solid #ffffff22;border-radius:8px;background:#0b0a0dcc;font-family:Cinzel}
.fin .st b{display:block;font-size:20px;font-weight:900;color:#f3e6c0}.fin .st span{font-size:9px;letter-spacing:1.5px;color:var(--muted)}
.fin .acts{position:relative;width:100%;max-width:360px;animation:ttIn 1.6s 2.1s both}
@keyframes finArt{from{transform:scale(1.14)}to{transform:scale(1.02)}}
@keyframes finRays{to{transform:rotate(360deg)}}
@keyframes finT{0%{opacity:0;transform:scale(1.9)}100%{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.cv-door,.cv-door img,.cv-door .gl,.fin .art,.fin .rays,.fin h2{animation:none}}
/* ---------- la carta del Primigéneo, antes de su cinemática ---------- */
.pc{position:fixed;inset:0;z-index:61;background:#000;display:flex;align-items:center;justify-content:center;overflow:hidden;perspective:900px;animation:fxIn .3s ease-out;--ac:#e8b93a}
.pc.osc{--ac:#e0303c}
.pc.out{animation:fxOut .35s ease-in forwards}
.pc .au{position:absolute;inset:0;opacity:0}
.pc.luz .au{background:radial-gradient(ellipse 90% 70% at 50% 50%,#ffe9a077,#e8b93a30 40%,transparent 75%)}
.pc.osc .au{background:radial-gradient(ellipse 90% 70% at 50% 50%,#c2182088,#5a0a2a44 40%,transparent 75%)}
.pc .gw{position:absolute;inset:-14%;border-radius:30px;background:radial-gradient(ellipse at 50% 50%,var(--ac),transparent 68%);opacity:.0;pointer-events:none}
.pc .cd{position:relative;width:min(72vw,42vh,340px);aspect-ratio:1/2;opacity:0;will-change:transform}
.pc .fr{position:absolute;inset:0;border-radius:16px;padding:5px;box-sizing:border-box;background:linear-gradient(145deg,#ffc0b8,#f0303c 20%,#5a070c 46%,#f0303c 68%,#ffd8d0 84%,#7a0e14);box-shadow:0 0 0 1px #000,0 14px 30px #000c}
.pc .in{position:relative;width:100%;height:100%;border-radius:11px;overflow:hidden;background:#0b0a0d;box-shadow:inset 0 0 0 1px #f7d978aa}
.pc .in>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pc .in::after{content:"";position:absolute;inset:4px;border-radius:8px;border:1px solid #f7d97855;pointer-events:none}
.pc .tp{position:absolute;left:0;right:0;top:0;padding:13px 12px 30px;text-align:center;background:linear-gradient(180deg,#050406ee,#05040699 58%,transparent)}
.pc .sr{color:#f0303c;font-size:11px;letter-spacing:5px;padding-left:5px;text-shadow:0 0 7px #e0484f}
.pc .nm{font-family:Cinzel;font-weight:900;font-size:clamp(19px,6.2vw,29px);letter-spacing:.13em;padding-left:.13em;line-height:1.15;margin-top:3px;background:linear-gradient(180deg,#fffbe6,#f7d978 45%,#b8862a);-webkit-background-clip:text;background-clip:text;color:transparent}
.pc .ti{font-style:italic;font-size:15px;color:#ece7dfdd;text-shadow:0 1px 2px #000}
.pc .bt{position:absolute;left:0;right:0;bottom:0;padding:54px 13px 13px;background:linear-gradient(0deg,#050406f5 0%,#050406e0 58%,transparent)}
.pc .rw{display:flex;align-items:center;gap:11px}
.pc .md{flex:none;will-change:transform;width:76px;height:76px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#4a0c12,#0b0304 72%);border:3px solid #f0303c;box-shadow:0 0 0 2px #0b0a0d,0 0 0 3px #f7d978aa,0 0 22px #e0484f;display:flex;flex-direction:column;align-items:center;justify-content:center}
.pc .md b{font-family:Cinzel;font-weight:900;font-size:27px;line-height:1;color:#fff3c8;text-shadow:0 0 10px #e0484f,0 2px 2px #000}
.pc .md span{font-family:Cinzel;font-size:8px;letter-spacing:2.5px;color:#e8a0a0;margin-top:2px}
.pc .rl{min-width:0;text-align:left}
.pc .rl b{display:block;font-family:Cinzel;font-weight:900;font-size:16px;letter-spacing:.32em;background:linear-gradient(180deg,#ffd0c8,#f0303c 45%,#7a0e14);-webkit-background-clip:text;background-clip:text;color:transparent}
.pc .rl span{display:block;font-family:Cinzel;font-size:10px;letter-spacing:1.5px;color:#d9c79a;margin-top:2px}
.pc .rl em{display:inline-block;font-style:normal;font-family:Cinzel;font-weight:700;font-size:9.5px;letter-spacing:1.5px;margin-top:4px;padding:2px 7px;border-radius:4px;border:1px solid #e8b93a;color:#f7d978;background:#0b0a0dcc}
.pc .ab{margin-top:8px;font-size:12.5px;line-height:1.2;color:#e6dfd0;text-align:left}
.pc .ab b{display:block;font-family:Cinzel;font-size:10px;letter-spacing:1.5px;color:#f7d978}
.pc .fo{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.pc .fo i{position:absolute;top:-20%;left:0;width:55%;height:140%;background:linear-gradient(100deg,transparent,#ffffff22 38%,#ffffff77 50%,#ffffff22 62%,transparent);transform:translateX(-150%) skewX(-18deg);will-change:transform}
.pc .rg{position:absolute;left:50%;top:50%;width:60vmin;height:60vmin;margin:-30vmin 0 0 -30vmin;border-radius:50%;border:3px solid var(--ac);opacity:0;pointer-events:none;will-change:transform,opacity}
body.cine #app{visibility:hidden}body.cine #embers,body.cine #fxc{display:none}
.pc .wh{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none}
.pc .skip{position:absolute;left:0;right:0;bottom:14px;text-align:center;font-size:13px;color:#a8a29988}
/* partículas */
#embers{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:3}
/* ---------- cinemáticas ---------- */
.fx{position:fixed;inset:0;z-index:60;overflow:hidden;display:flex;align-items:center;justify-content:center;flex-direction:column;background:#000;animation:fxIn .35s ease-out}
.fx .rays{position:absolute;left:50%;top:42%;width:220vmax;height:220vmax;margin:-110vmax 0 0 -110vmax;opacity:.0;animation:rays 2.6s ease-out forwards}
.fx.luz .rays{background:repeating-conic-gradient(from 0deg,#f7d97855 0 4deg,transparent 4deg 14deg)}
.fx.osc .rays{background:repeating-conic-gradient(from 0deg,#9b1c2a55 0 3deg,transparent 3deg 17deg)}
.fx .glow{position:absolute;left:50%;top:42%;width:120vmin;height:120vmin;margin:-60vmin 0 0 -60vmin;border-radius:50%;animation:glow 2.6s ease-out forwards}
.fx.luz .glow{background:radial-gradient(circle,#ffe9a0aa,#e8b93a33 35%,transparent 65%)}
.fx.osc .glow{background:radial-gradient(circle,#7a1a8a99,#3d0b1066 35%,transparent 65%)}
.fx .mist{position:absolute;inset:-20%;background:radial-gradient(ellipse at 20% 70%,#2a0d3a99,transparent 45%),radial-gradient(ellipse at 80% 30%,#3d0b1088,transparent 40%),radial-gradient(ellipse at 50% 100%,#000,transparent 60%);animation:mist 2.6s ease-in-out forwards}
.fx .art{position:relative;width:min(58vw,300px);aspect-ratio:7/10;border-radius:12px;overflow:hidden;border:2px solid var(--rc);box-shadow:0 0 40px var(--rc);animation:artIn 2.6s cubic-bezier(.2,.7,.2,1) forwards}
.fx .art img{width:100%;height:100%;object-fit:cover}
.fx .art::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 35%,#ffffffaa 50%,transparent 65%);transform:translateX(-120%);animation:shine 1.2s .9s ease-out forwards}
.fx .nm{position:relative;margin-top:16px;text-align:center;max-width:94vw;line-height:1.15;font-family:Cinzel;font-weight:900;font-size:clamp(26px,8vw,44px);letter-spacing:.5em;padding-left:.5em;background:var(--tg);-webkit-background-clip:text;background-clip:text;color:transparent;opacity:0;animation:nmIn 2.6s ease-out forwards}
.fx .tt{position:relative;font-family:'EB Garamond';font-style:italic;font-size:18px;color:#ece7dfcc;opacity:0;animation:ttIn 2.6s ease-out forwards}
.fx .kind{position:relative;font-family:Cinzel;font-size:11px;letter-spacing:4px;color:var(--rc);margin-top:6px;opacity:0;animation:ttIn 2.6s ease-out forwards}
.fx .skip{position:absolute;bottom:18px;font-size:13px;color:#a8a29988}
.fx.short{background:#000c}
.fx.short .art{width:min(44vw,220px);animation:artUp 1.5s cubic-bezier(.2,.7,.2,1) forwards}
.fx.short .nm{font-size:clamp(20px,6vw,30px);letter-spacing:.35em;animation:nmIn 1.5s ease-out forwards}
.fx.short .tt,.fx.short .kind{animation:ttIn 1.5s ease-out forwards}
.fx.short .art::after{animation:shine .9s .35s ease-out forwards}
.fx.out{animation:fxOut .4s ease-in forwards}
@keyframes fxIn{from{opacity:0}to{opacity:1}}
@keyframes fxOut{to{opacity:0}}
@keyframes rays{0%{opacity:0;transform:rotate(0)}30%{opacity:1}100%{opacity:.6;transform:rotate(40deg)}}
@keyframes glow{0%{transform:scale(.2);opacity:0}35%{transform:scale(1.1);opacity:1}100%{transform:scale(1);opacity:.7}}
@keyframes mist{0%{transform:scale(1.3);opacity:0}40%{opacity:1}100%{transform:scale(1) translateY(-3%);opacity:.8}}
@keyframes artIn{0%{transform:scale(1.5);filter:blur(14px) brightness(0);opacity:0}30%{filter:blur(6px) brightness(.4);opacity:1}55%{transform:scale(1);filter:none}62%{transform:scale(1.03)}70%{transform:scale(1)}100%{transform:scale(1)}}
@keyframes artUp{0%{transform:translateY(40px) scale(.9);opacity:0}35%{transform:none;opacity:1}100%{transform:none}}
@keyframes shine{to{transform:translateX(120%)}}
@keyframes nmIn{0%,45%{opacity:0;letter-spacing:1em}70%{opacity:1;letter-spacing:.5em}100%{opacity:1}}
@keyframes ttIn{0%,60%{opacity:0;transform:translateY(6px)}80%,100%{opacity:1;transform:none}}
@keyframes shake{0%,100%{transform:none}20%{transform:translate(-4px,2px)}40%{transform:translate(4px,-2px)}60%{transform:translate(-3px,-1px)}80%{transform:translate(2px,1px)}}
.shaking{animation:shake .35s}
.hit{position:fixed;pointer-events:none;z-index:59;border-radius:50%;transform:translate(-50%,-50%)}
.slash{position:fixed;pointer-events:none;z-index:59;height:4px;border-radius:2px;transform-origin:center}
.strike{position:fixed;left:0;right:0;top:44%;z-index:57;pointer-events:none;text-align:center;font-family:Cinzel;font-weight:900;font-size:clamp(22px,7vw,36px);letter-spacing:.3em;color:#fff;text-shadow:0 0 18px var(--rc),0 0 4px #000}
.dim{position:fixed;inset:0;background:#000;z-index:54;pointer-events:none}
@media (prefers-reduced-motion:reduce){.fx *,.fx{animation-duration:.01s!important}}
.exitask{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;background:rgba(5,4,6,.78);backdrop-filter:blur(3px)}
.exitask .box{width:min(86vw,360px);padding:22px 20px 18px;border-radius:14px;border:1px solid #8a6a2a;background:radial-gradient(circle at 50% 0%,#2a1f10,#0d0b08 70%);box-shadow:0 10px 40px rgba(0,0,0,.7);text-align:center;font-family:'EB Garamond',Garamond,serif;color:#ece7df}
.defask .dl{display:flex;flex-direction:column;gap:8px;margin:14px 0 10px}.defask .dopt{text-align:left;padding:10px 12px;border-radius:10px;border:1px solid #c9a24a;background:#1d150a;color:#f3e3b5;font-family:'EB Garamond',serif;font-size:16px}.defask .dopt span{color:#b9a679;font-size:14px}.defask .dopt small{display:block;color:#d8cba4;font-size:13px;margin-top:3px}.defask .dno{width:100%}
.exitask .t{font-family:'Cinzel',serif;font-weight:700;font-size:19px;letter-spacing:1px;color:#f3e3b5}
.exitask .s{margin-top:8px;font-size:16px;color:#cfc8bd}
.exitask .row{display:flex;gap:10px;margin-top:18px}
.exitask button{flex:1;padding:12px 8px;border-radius:10px;font-family:'Cinzel',serif;font-size:14px;letter-spacing:1px;cursor:pointer}
.exitask .stay{background:linear-gradient(180deg,#e8c56a,#a87c22);color:#1a1206;border:0;font-weight:700}
.exitask .go{background:transparent;color:#e7b0b0;border:1px solid #7a2a2a}
.act[disabled]{opacity:.5;cursor:default}

/* ---------- vista horizontal (teléfono de lado) ---------- */
@media (orientation:landscape) and (max-height:560px){
  body:has(#app .half){height:100%;overflow:hidden}
  .cover{padding:14px 14px 20px;gap:10px}
  .cv-doors{height:clamp(220px,64vh,340px);max-width:560px}
  #app:has(.half){max-width:none;height:100vh;height:100dvh;min-height:0;display:grid;
    grid-template-columns:minmax(150px,19vw) 1fr minmax(176px,23vw);
    grid-template-rows:auto 1fr auto 1fr auto;
    grid-template-areas:"tfoe hf hand" "log hf hand" "log md hand" "tme hm hand" "bar hm hand";
    padding:0 env(safe-area-inset-right) 0 env(safe-area-inset-left)}
  #app .tfoe{grid-area:tfoe} #app .log{grid-area:log} #app .half.foe{grid-area:hf} #app .mid{grid-area:md}
  #app .half.mine{grid-area:hm} #app .tme{grid-area:tme} #app .hand{grid-area:hand} #app .bar{grid-area:bar}
  #app .tfoe,#app .tme{flex-direction:column;align-items:flex-start;gap:3px;padding:6px 8px;border:none!important;font-size:12px}
  #app .tfoe span[style],#app .tme span[style]{font-size:11px!important}
  #app .tme{flex-direction:row;flex-wrap:wrap;align-items:center}
  #app .tme .who{width:100%}
  #app .log{overflow-y:auto;font-size:12.5px;line-height:1.25;text-align:left;padding:6px 8px;border-bottom:none;border-top:1px solid var(--line);align-self:stretch;min-height:0}
  #app .bar{flex-direction:column;align-items:stretch;gap:6px;padding:6px 8px 8px}
  #app .bar .info{font-size:12px}
  #app .bar .end{min-height:40px}
  #app .half{display:flex;flex-direction:column;justify-content:center;min-height:0;padding:0}
  #app .half .zone{display:none}
  #app .row{padding:2px 6px;gap:6px}
  #app .half .slot{width:auto;max-width:none;height:calc((100dvh - 34px) / 4 - 8px);aspect-ratio:7/10}
  #app .mid{height:34px;margin:0;border:none}
  #app .mid .seal{width:34px;height:34px}
  #app .hand{flex-wrap:wrap;align-content:flex-start;overflow-y:auto;overflow-x:hidden;min-height:0;border-top:none;border-left:1px solid #e8b93a33;padding:6px;gap:6px;justify-content:center}
  #app .hand .slot{width:calc(50% - 3px);height:auto;aspect-ratio:7/10}
  .veil{align-items:center}
  .sheet{max-width:760px;max-height:94vh;border-radius:14px;display:grid;grid-template-columns:240px 1fr;align-items:start;column-gap:14px}
  .sheet .art{grid-row:1/span 30;height:auto;aspect-ratio:7/10}
  .sheet>*:not(.art){grid-column:2}
}

/* ---------- portada: dificultad de la máquina ---------- */
.cv-lv{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;max-width:460px;font-family:Cinzel;font-size:11px;letter-spacing:3px;color:#a8a299}
.cv-lv span{margin-right:4px}
.cv-lv button{flex:0 1 120px;min-height:44px;border-radius:22px;border:1px solid var(--line);background:#0d0b10;color:#cfc8bd;font-family:Cinzel;font-weight:700;font-size:13px;letter-spacing:2px}
.cv-lv button.on{border-color:#e8c56a;color:#f7d978;background:linear-gradient(180deg,#2a1f0c,#120d05);box-shadow:0 0 12px #e8b93a33}

/* reliquias (14/11/2026) */
.card .rlb{position:absolute;right:3px;top:44%;width:22px;height:22px;border-radius:50%;overflow:hidden;border:1.5px solid var(--rc);box-shadow:0 0 6px var(--rc),0 1px 2px #000;z-index:4;background:#000}
.card .rlb img{width:100%;height:100%;object-fit:cover;object-position:50% 45%;position:static}
.card .rlb.own{box-shadow:0 0 0 1px #fff6c8,0 0 10px var(--rc),0 1px 2px #000;animation:rlbPulse 2.4s ease-in-out infinite}
@keyframes rlbPulse{50%{box-shadow:0 0 0 1px #fff6c8,0 0 16px var(--rc),0 1px 2px #000}}
@media (prefers-reduced-motion:reduce){.card .rlb.own{animation:none}}
.card.relic .rl-pw{font-size:14px;color:#f7d978}
.relchip{display:inline-flex;align-items:center;gap:5px;max-width:34%;padding:2px 7px 2px 2px;border-radius:14px;border:1px solid var(--rc);background:linear-gradient(180deg,#221e28,#121016);color:#e6dccb;font-family:Cinzel;font-size:10px;line-height:1.1;letter-spacing:.5px;box-shadow:0 0 8px color-mix(in srgb,var(--rc) 45%,transparent);cursor:pointer;text-align:left}
.relchip img{width:24px;height:24px;border-radius:50%;object-fit:cover;flex:none}
.relchip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.relchip small{display:block;font-family:'EB Garamond';font-size:10px;color:var(--muted);letter-spacing:0}
.relchip.off{display:inline-flex;justify-content:center;width:26px;height:26px;padding:0;border:1px dashed #4a4450;color:#4a4450;font-size:12px;box-shadow:none;cursor:default}
@media (max-width:560px){.relchip span{display:none}.relchip{padding:2px;max-width:none}}
/* casilla de Reliquia aparte, al final de la Retaguardia */
.half .row .slot.relslot{margin-left:16px;border:1px solid color-mix(in srgb,var(--rc) 55%,#000);background:radial-gradient(ellipse at 50% 85%,color-mix(in srgb,var(--rc) 22%,transparent),#0d0c10cc 70%);box-shadow:inset 0 2px 6px #000d,0 0 10px color-mix(in srgb,var(--rc) 25%,transparent)}
.half .row .slot.relslot::before{content:'';position:absolute;left:-10px;top:8%;bottom:8%;width:1px;background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--rc) 70%,#fff),transparent)}
.relslot .rs-g{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-style:normal;font-size:20px;color:#6a5a3a99}
.relslot .rs-l{position:absolute;left:0;right:0;bottom:-13px;text-align:center;font-family:Cinzel;font-size:7.5px;letter-spacing:1px;color:#c8b98aaa;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;z-index:3;text-shadow:0 1px 2px #000}
.relslot .card{height:100%}
@media (orientation:landscape) and (max-height:560px){#app .relslot .rs-l{display:none}}
/* colección y constructor de mazos (14/11/2026) */
.colrow{display:flex;gap:8px;width:100%;max-width:460px}
.colbig{border-color:#e8c56a;background:linear-gradient(180deg,#2a1f0c,#120d05);font-family:Cinzel;font-weight:700;letter-spacing:1px}
.colbig:disabled{opacity:.55}
.colrow .colbig{flex:1.5}.colrow .colbig.sm{flex:1;border-color:var(--line);background:var(--panel)}
.colscr{gap:12px;padding:14px 12px 28px;min-height:100vh;box-sizing:border-box;align-items:stretch;text-align:left;max-width:640px;margin:0 auto}
.colscr .cv-sub,.colscr .colp{text-align:center}
.colp{font-size:14px;color:var(--muted);margin:0}
.colhead{display:flex;align-items:center;justify-content:space-between;gap:8px;font-family:Cinzel;letter-spacing:2px;font-size:14px;color:#e6dccb}
.colhead input{flex:1;min-width:0;min-height:36px;border-radius:8px;border:1px solid var(--line);background:#0d0b10;color:var(--text);font-family:Cinzel;font-size:14px;padding:0 10px}
.purse{display:flex;justify-content:center;gap:14px;font-size:13px;color:var(--muted);flex-wrap:wrap}.purse b{color:#f7d978;font-family:Cinzel}
.coltabs{display:flex;gap:6px;justify-content:center}
.coltabs button{flex:1;max-width:200px;min-height:40px;border-radius:20px;border:1px solid var(--line);background:#0d0b10;color:#cfc8bd;font-family:Cinzel;font-weight:700;font-size:12px;letter-spacing:2px}
.coltabs button.on{border-color:#e8c56a;color:#f7d978;background:linear-gradient(180deg,#2a1f0c,#120d05)}
.coltabs.sm button{min-height:34px;font-size:11px}
.deckrow{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--panel)}
.deckrow.on{border-color:#e8c56a;box-shadow:0 0 10px #e8b93a22}
.deckrow b{font-family:Cinzel;font-size:14px;display:block}.deckrow small{font-size:13px;color:var(--muted)}
.deckrow .bad,.bstat.bad{color:#ff9a8a}
.dk-acts{display:flex;gap:6px;align-items:center;flex:none}.tag{font-family:Cinzel;font-size:10px;letter-spacing:1.5px;color:#f7d978}
.dk-new{display:flex;gap:6px;justify-content:center;flex-wrap:wrap}
.cgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:8px}
.card.mini{position:relative;inset:auto;width:100%;aspect-ratio:7/10;display:block}
.card.mini img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.card.mini.none{filter:grayscale(1) brightness(.45)}
.card.mini .cnt{position:absolute;top:3px;right:4px;z-index:3;font-family:Cinzel;font-weight:900;font-size:12px;color:#f7d978;text-shadow:0 1px 2px #000}
.bstat{text-align:center;font-family:Cinzel;font-size:13px;letter-spacing:1px;padding:6px;border-radius:8px;background:#0d0b10;border:1px solid var(--line)}
.bstat.ok{color:#8cf0a0}
.blist{display:flex;flex-direction:column;gap:6px}
.brow{display:flex;align-items:center;gap:8px;padding:5px;border:1px solid var(--line);border-radius:9px;background:#141218}
.brow.in{border-color:#6a5a3a;background:#1d1912}
.brow img{width:40px;height:56px;object-fit:cover;border-radius:5px;flex:none}
.brow .bi{flex:1;min-width:0;cursor:pointer}.brow .bi b{display:block;font-family:Cinzel;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.brow .bi small{font-size:12px;color:var(--muted)}
.brow .bq{display:flex;align-items:center;gap:6px;flex:none}.brow .bq b{min-width:18px;text-align:center;font-family:Cinzel}.brow .bq .btnmini{min-width:36px;padding:0}.brow .bq small{font-size:11px;color:var(--muted);width:30px}
/* tienda y sobres (paso 2, 14/11/2026) */
.coltabs .badge{font-style:normal;display:inline-block;min-width:16px;padding:0 4px;margin-left:4px;border-radius:8px;background:#e0484f;color:#fff;font-size:10px;letter-spacing:0}
.shopbox{display:flex;gap:10px;align-items:center;padding:8px;border:1px solid var(--line);border-radius:12px;background:var(--panel)}
.shopbox img{width:64px;height:90px;object-fit:cover;border-radius:7px;flex:none}
.shopbox.luz{border-color:#6a5a2a}.shopbox.osc{border-color:#6a2a2e}
.shopbox b{font-family:Cinzel;font-size:13px;letter-spacing:1px;display:block}.shopbox small{font-size:13px;color:var(--muted)}
.shopbtns{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}.shopbtns .act{min-height:38px;padding:4px 10px;font-size:13px}
.pity{display:flex;flex-wrap:wrap;gap:4px 12px;justify-content:center;font-size:13px;color:var(--muted);text-align:center}.pity b{color:#f7d978}.pity small{flex-basis:100%;font-size:12px}
.shoph{font-family:Cinzel;font-size:11px;letter-spacing:3px;color:#c8b98a;text-align:center;margin-top:6px}
.ofrs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.ofr{display:flex;flex-direction:column;gap:5px}.ofr .act{min-height:34px;font-size:12px;padding:2px 4px}
.ctoast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:40;padding:10px 16px;border-radius:10px;background:#221f29;border:1px solid #e8c56a;color:#f3e6c0;font-size:14px;box-shadow:0 6px 20px #000c}
.veil.pack{align-items:center;z-index:30;background:#000d}
.packbox{width:100%;max-width:560px;padding:16px 12px;display:flex;flex-direction:column;gap:14px;align-items:center}
.packrow{display:grid;grid-template-columns:repeat(5,1fr);gap:7px;width:100%}
.pcard{perspective:700px;aspect-ratio:7/10;cursor:pointer;position:relative}
.pin{position:absolute;inset:0;transition:transform .55s cubic-bezier(.3,.7,.3,1);transform-style:preserve-3d}
.pcard.up .pin{transform:rotateY(180deg)}
.pback,.pfront{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:8px}
.pback{background:radial-gradient(circle at 50% 45%,#3a2a10,#0d0905 75%);border:2px solid #8a6a2a;box-shadow:inset 0 0 18px #000}
.pback::after{content:'✦';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#e8c56a;font-size:22px;text-shadow:0 0 10px #e8b93a}
.pfront{transform:rotateY(180deg)}
.pfront .card.mini{height:100%}
.pcard.up.r-ssr .pfront{box-shadow:0 0 18px 3px #e8b93a}.pcard.up.r-ur .pfront{box-shadow:0 0 20px 4px #bfe9ff}.pcard.up.r-mit .pfront{box-shadow:0 0 24px 6px #f0303c}
.ptag{position:absolute;left:0;right:0;bottom:-18px;text-align:center;font-family:Cinzel;font-size:9px;letter-spacing:1px;color:#8cf0a0;white-space:nowrap}
.reward{font-family:Cinzel;font-weight:900;font-size:18px;color:#f7d978;text-shadow:0 0 12px #e8b93a;margin:6px 0}
@media (prefers-reduced-motion:reduce){.pin{transition:none}}
.sheet textarea{width:100%;box-sizing:border-box;border-radius:8px;border:1px solid var(--line);background:#0d0b10;color:#cfc8bd;font-family:monospace;font-size:11px;padding:8px;resize:vertical;word-break:break-all}
/* fondos de mesa por capítulo de campaña */
body[data-mesa="c1"] .half::before{background-image:url(../img/mesa-c1.jpg);filter:blur(.5px) brightness(.85) saturate(.95)}
body[data-mesa="c2"] .half::before{background-image:url(../img/mesa-c2.jpg);filter:blur(.5px) brightness(.85) saturate(.95)}
body[data-mesa="c3"] .half::before{background-image:url(../img/mesa-c3.jpg);filter:blur(.5px) brightness(.85) saturate(.95)}
body[data-mesa="c4"] .half::before{background-image:url(../img/mesa-c4.jpg);filter:blur(.5px) brightness(.85) saturate(.95)}
body[data-mesa="c5"] .half::before{background-image:url(../img/mesa-c5.jpg);filter:blur(.5px) brightness(.85) saturate(.95)}
body[data-mesa="c6"] .half::before{background-image:url(../img/mesa-c6.jpg);filter:blur(.5px) brightness(.85) saturate(.95)}
body[data-mesa="c7"] .half::before{background-image:url(../img/mesa-c7.jpg);filter:blur(.5px) brightness(.85) saturate(.95)}
body[data-mesa="c8"] .half::before{background-image:url(../img/mesa-c8.jpg);filter:blur(.5px) brightness(.85) saturate(.95)}
body[data-mesa="c9"] .half::before{background-image:url(../img/mesa-c9.jpg);filter:blur(.5px) brightness(.85) saturate(.95)}
body[data-mesa] .half.foe::before{background-position:center 30%}
body[data-mesa] .half.mine::before{background-position:center 85%}
body[data-mesa] .half::after{opacity:.18}
/* campaña (14/11/2026) */
.coltabs button{padding:0 4px}
.chap{display:flex;flex-direction:column;gap:8px;padding:10px;border:1px solid #6a5a3a;border-radius:12px;background:linear-gradient(180deg,#1d1912,#100e0a)}
.chap-h{display:flex;justify-content:space-between;align-items:baseline;font-family:Cinzel;font-size:13px;letter-spacing:1.5px;color:#f3e6c0}.chap-h small{font-size:12px;color:var(--muted)}
.stage{display:flex;align-items:center;gap:10px;text-align:left;padding:8px 10px;border-radius:10px;border:1px solid var(--line);background:#16141a;color:var(--text);min-height:56px;font-family:inherit;letter-spacing:0}
.stage:disabled{opacity:.45}
.stage .sn{flex:none;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:Cinzel;font-weight:900;border:1px solid #6a5a3a;color:#e8c56a}
.stage.done .sn{background:#3a2f12;color:#f7d978}
.stage.jefe{border-color:#a0302e;background:linear-gradient(90deg,#2a0e10,#16141a)}.stage.jefe .sn{border-color:#e0484f;color:#ff8a8a;font-size:15px}
.stage .si{flex:1;min-width:0;display:block}.stage .si b{display:block;font-family:Cinzel;font-size:13px;letter-spacing:.5px}.stage .si small{display:block;font-family:'EB Garamond';font-size:13px;color:var(--muted);letter-spacing:0;font-weight:400}
.stage .si .pr{color:#c8b98a;font-size:12px}.stage .lock{flex:none;font-size:14px}
/* pantalla de inicio (14/11/2026) */
.home{position:relative;min-height:100vh;min-height:100dvh;overflow:hidden;isolation:isolate}
.hbg{position:absolute;inset:0;z-index:-1;overflow:hidden;background:#07060a}
.hbg img{position:absolute;top:0;height:100%;width:62%;object-fit:cover;object-position:50% 15%;filter:brightness(.55) saturate(.95);animation:cvArt 18s ease-in-out infinite alternate}
.hbg img.l{left:0;-webkit-mask:linear-gradient(90deg,#000 55%,transparent);mask:linear-gradient(90deg,#000 55%,transparent)}
.hbg img.r{right:0;-webkit-mask:linear-gradient(270deg,#000 55%,transparent);mask:linear-gradient(270deg,#000 55%,transparent);animation-direction:alternate-reverse}
.hbg::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 70% 40% at 50% 0%,#e8b93a22,transparent 70%),radial-gradient(ellipse 70% 40% at 50% 100%,#e0484f26,transparent 70%),linear-gradient(180deg,#07060acc 0%,#07060a40 22%,#07060a99 55%,#07060af2 100%)}
.hbg .seam{position:absolute;left:50%;top:0;bottom:0;width:2px;transform:translateX(-50%);background:linear-gradient(180deg,transparent,#f7d97899 30%,#e0484f99 70%,transparent);box-shadow:0 0 18px #f7d97866;z-index:1;animation:seamPulse 4s ease-in-out infinite}
@keyframes seamPulse{50%{opacity:.45}}
.hbg .glow{position:absolute;left:50%;top:34%;width:340px;height:340px;margin-left:-170px;border-radius:50%;background:radial-gradient(circle,#fff6c826,transparent 65%);z-index:1}
.hin{position:relative;display:flex;flex-direction:column;align-items:center;gap:12px;padding:12px 14px 26px;max-width:520px;margin:0 auto;min-height:100vh;min-height:100dvh;box-sizing:border-box}
.htop{display:flex;justify-content:space-between;width:100%}
.htitle{text-align:center;margin:clamp(10px,6vh,60px) 0 clamp(6px,3vh,30px)}
.htitle .saga{letter-spacing:8px;font-size:13px;color:#d9c79a;font-family:Cinzel}
.hsub{font-family:Cinzel;font-size:10px;letter-spacing:4px;color:#c8b98acc;margin-top:6px}
.hpurse{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;font-size:13px;color:#cfc8bdcc;padding:5px 14px;border-radius:16px;background:#0d0b10aa;border:1px solid #ffffff14}.hpurse b{color:#f7d978;font-family:Cinzel}
.hgrid{display:grid;grid-template-columns:1fr 1fr;gap:9px;width:100%}
.htile{position:relative;display:flex;flex-direction:column;justify-content:flex-end;gap:3px;min-height:84px;padding:12px;border-radius:12px;border:1px solid #6a5a3a99;background:linear-gradient(180deg,#1d191288,#0d0b10ee);color:var(--text);text-align:left;box-shadow:0 6px 18px #0008,inset 0 1px 0 #ffffff12;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);width:100%}
.htile b{font-family:Cinzel;font-weight:900;font-size:15px;letter-spacing:2px;color:#f3e6c0}
.htile small{font-family:'EB Garamond';font-size:13px;color:#cfc8bdaa;line-height:1.2}
.htile.big{grid-column:1/-1;min-height:120px;border-color:#e8c56a;background:linear-gradient(180deg,#3a2a0c66,#120d05ee),radial-gradient(ellipse at 80% 0%,#e8b93a33,transparent 60%)}
.htile.big b{font-size:22px;letter-spacing:4px;color:#f7d978;text-shadow:0 0 14px #e8b93a66}
.htile.camp::before{content:"⚔";position:absolute;right:14px;top:10px;font-size:34px;color:#e8c56a55}
.htile.arena{border-color:#4a445099}.htile.arena:disabled{opacity:.6}
.htile.arena::after{content:"PRONTO";position:absolute;right:10px;top:10px;font-family:Cinzel;font-size:9px;letter-spacing:2px;padding:2px 6px;border-radius:8px;border:1px solid #6a6470;color:#a8a299}
.htile.hot{border-color:#e0484f;box-shadow:0 0 14px #e0484f44,0 6px 18px #0008}
.htile.resume{border-color:#e8c56a;min-height:60px}
.home .cv-lv{margin-top:auto}
.cv-back{align-self:flex-start}
@media (orientation:landscape) and (max-height:560px){.hgrid{grid-template-columns:repeat(3,1fr)}.htile.big{grid-column:1/-1;min-height:84px}.htitle{margin:4px 0}.hin{max-width:820px}}
.hgrid>.htile:last-child:nth-child(even){grid-column:1/-1}
@media (orientation:landscape) and (max-height:560px){.hgrid>.htile:last-child:nth-child(even){grid-column:auto}}
.hbg{position:fixed}

/* ---------- 14/11 (Fable) · clips fluidos: la mesa se detiene mientras se ve un clip ---------- */
#vpool{position:fixed;left:0;top:0;width:2px;height:2px;overflow:hidden;opacity:0;pointer-events:none;z-index:-1}
#vpool video{width:2px;height:2px}
body.clip .card .fr::before,body.clip .card .fz *,body.clip .card::after,body.clip #app *{animation-play-state:paused!important}
body.clip #embers,body.clip #fxc,body.clip #fxl{display:none}
/* ---------- 14/11 (Fable) · pantalla de inicio: fondo vivo, botones con presencia y entrada animada ---------- */
.hbg img{filter:brightness(.62) saturate(1.05) contrast(1.05)}
.hbg img.l{-webkit-mask:linear-gradient(90deg,#000 62%,transparent 98%);mask:linear-gradient(90deg,#000 62%,transparent 98%)}
.hbg img.r{-webkit-mask:linear-gradient(270deg,#000 62%,transparent 98%);mask:linear-gradient(270deg,#000 62%,transparent 98%)}
.hbg::after{background:linear-gradient(180deg,#07060ab8 0%,#07060a26 20%,#07060a66 50%,#07060af5 96%);z-index:3}
.hbg>i,.hbg>canvas{position:absolute;pointer-events:none}
.hray{left:-30%;top:-35%;width:110%;height:110%;z-index:1;mix-blend-mode:screen;background:conic-gradient(from 100deg at 40% 30%,transparent 0deg,#f7d97826 8deg,transparent 17deg,#fff6c81c 27deg,transparent 38deg,#f7d97820 50deg,transparent 62deg,transparent 360deg);-webkit-mask:radial-gradient(circle at 40% 30%,#000 0,transparent 68%);mask:radial-gradient(circle at 40% 30%,#000 0,transparent 68%);transform-origin:40% 30%;animation:hRay 16s ease-in-out infinite alternate}
@keyframes hRay{from{transform:rotate(-5deg);opacity:.55}to{transform:rotate(7deg);opacity:1}}
.hred{right:-20%;bottom:-25%;width:95%;height:80%;z-index:1;mix-blend-mode:screen;background:radial-gradient(ellipse at 60% 75%,#e0484f55,#7a0e1433 40%,transparent 68%);animation:hRed 5.5s ease-in-out infinite}
@keyframes hRed{50%{opacity:.5;transform:scale(1.06)}}
.hfog{left:-60%;width:220%;height:46%;z-index:2;opacity:.55;background:radial-gradient(ellipse 22% 46% at 20% 55%,#b9b3c62e,transparent 70%),radial-gradient(ellipse 26% 40% at 52% 40%,#8a84982a,transparent 70%),radial-gradient(ellipse 20% 50% at 82% 60%,#b9b3c626,transparent 70%)}
.hfog.a{bottom:14%;animation:hFog 44s linear infinite alternate}
.hfog.b{bottom:-8%;height:40%;opacity:.7;animation:hFog 60s linear infinite alternate-reverse}
@keyframes hFog{from{transform:translateX(-14%)}to{transform:translateX(14%)}}
#hfx{inset:0;width:100%;height:100%;z-index:4}
.hbg .seam{z-index:4;width:2px;background:linear-gradient(180deg,transparent,#fff6c8cc 22%,#ffffff 46%,#ff8a8acc 66%,transparent);box-shadow:0 0 22px 2px #f7d97888,0 0 60px 8px #e0484f33;overflow:visible}
.hbg .seam i{position:absolute;left:-3px;width:8px;height:90px;border-radius:50%;background:radial-gradient(ellipse,#fff,#fff6c8aa 40%,transparent 70%);animation:hRun 5.2s cubic-bezier(.5,0,.5,1) infinite}
@keyframes hRun{0%{transform:translateY(-12vh);opacity:0}15%{opacity:1}85%{opacity:1}100%{transform:translateY(100vh);opacity:0}}
.hbg .glow{z-index:4;top:30%;width:420px;height:420px;margin-left:-210px;background:radial-gradient(circle,#fff6c838,#f7d97814 38%,transparent 66%);animation:hGlow 4.6s ease-in-out infinite}
@keyframes hGlow{50%{transform:scale(1.14);opacity:.6}}
.hclash{left:50%;top:38%;width:6px;height:6px;margin:-3px;border-radius:50%;z-index:4;background:#fff;box-shadow:0 0 30px 14px #fff6c8aa,-40px 0 70px 30px #f7d97844,40px 0 70px 30px #e0484f44;animation:hClash 7s ease-in-out infinite}
@keyframes hClash{0%,100%{opacity:.35;transform:scale(.8)}46%{opacity:.5;transform:scale(1)}50%{opacity:1;transform:scale(1.9)}54%{opacity:.5;transform:scale(1)}}
.hvig{inset:0;z-index:5;background:radial-gradient(ellipse 85% 75% at 50% 42%,transparent 40%,#07060ad9 100%)}
.htitle{position:relative}
.htitle .saga{letter-spacing:10px;text-shadow:0 0 14px #000,0 0 10px #e8b93a55}
.home .cv-title{font-size:clamp(32px,10.4vw,54px);position:relative;filter:drop-shadow(0 3px 3px #000) drop-shadow(0 0 26px #e8b93a55)}
.hrule{display:flex;align-items:center;justify-content:center;gap:10px;margin:8px auto 0;max-width:300px;color:#e8c56a}
.hrule i{flex:1;height:1px;background:linear-gradient(90deg,transparent,#e8c56a)}.hrule i:last-child{background:linear-gradient(270deg,transparent,#e0484f)}
.hrule em{font-style:normal;font-size:11px;text-shadow:0 0 8px #f7d978}
.hsub{text-shadow:0 1px 6px #000}
.hpurse{background:#0b090dd9;border-color:#e8c56a40;box-shadow:0 4px 14px #000a}
.htile{overflow:hidden;isolation:isolate;min-height:92px;border:1px solid #8a743a;background:linear-gradient(180deg,#221b0fcc,#0b090df5);box-shadow:0 8px 22px #000b,inset 0 1px 0 #fff6c822,inset 0 0 0 1px #00000080;backdrop-filter:none;-webkit-backdrop-filter:none;transition:transform .14s ease,box-shadow .2s ease,border-color .2s ease}
.htile::after{content:"";position:absolute;inset:3px;border-radius:9px;border:1px solid #e8c56a26;pointer-events:none;z-index:1}
.htile .ha{position:absolute;inset:0;z-index:-1;background-size:cover;opacity:.5;filter:saturate(.8) brightness(.8);-webkit-mask:linear-gradient(200deg,#000 10%,transparent 78%);mask:linear-gradient(200deg,#000 10%,transparent 78%);transition:opacity .25s ease,transform .5s ease}
.htile .hi{position:absolute;right:10px;top:9px;width:26px;height:26px;color:#f7d978;filter:drop-shadow(0 0 6px #000) drop-shadow(0 0 5px #e8b93a88);z-index:1}
.htile b{text-shadow:0 1px 4px #000,0 0 10px #000;position:relative;z-index:1}.htile small{color:#ddd5c6;text-shadow:0 1px 3px #000;position:relative;z-index:1}
.htile:not(:disabled):active{transform:scale(.97);border-color:#f7d978;box-shadow:0 0 22px #e8b93a66,0 8px 22px #000b}
@media (hover:hover){.htile:not(:disabled):hover{border-color:#f7d978;box-shadow:0 0 20px #e8b93a55,0 8px 22px #000b}.htile:not(:disabled):hover .ha{opacity:.72;transform:scale(1.05)}}
.htile:focus-visible{outline:2px solid #f7d978;outline-offset:2px}
.htile.big{min-height:132px;border:1px solid #f0cf7a;background:linear-gradient(180deg,#3a2a0c55,#0b0905f2 82%);box-shadow:0 0 0 1px #00000099,0 0 26px #e8b93a3d,0 10px 26px #000c,inset 0 1px 0 #fff6c844}
.htile.big .ha{opacity:.78;filter:saturate(.95) brightness(.9);-webkit-mask:linear-gradient(180deg,#000 35%,transparent 96%);mask:linear-gradient(180deg,#000 35%,transparent 96%)}
.htile.big .hi{width:38px;height:38px;right:14px;top:12px}
.htile.big b{font-size:24px;letter-spacing:5px;background:linear-gradient(180deg,#fff6c8,#f7d978 50%,#c9952a);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 2px 2px #000)}
.htile.big::before{content:"";position:absolute;top:-20%;left:0;width:34%;height:140%;z-index:1;pointer-events:none;background:linear-gradient(100deg,transparent,#fff6c82e 45%,#ffffff40 50%,#fff6c82e 55%,transparent);transform:translateX(-160%) skewX(-18deg);animation:hSheen 6.5s ease-in-out infinite 1.6s}
.htile.camp::before{font-size:0}
@keyframes hSheen{0%,62%{transform:translateX(-160%) skewX(-18deg)}100%{transform:translateX(420%) skewX(-18deg)}}
.htile.arena{border-color:#4a445099;filter:saturate(.5)}.htile.arena .hi{right:auto;left:11px;top:10px;color:#a8a299}
.htile.hot{border-color:#ff6a70;animation:hHot 2.2s ease-in-out infinite}
@keyframes hHot{50%{box-shadow:0 0 26px #e0484f88,0 8px 22px #000b}}
.htile.hot .hi{color:#ffb0a8}
.htile.resume{min-height:62px;border-color:#f0cf7a}
.home .cv-lv button{background:#0b090de6}
/* entrada: los dos señores llegan desde los lados, chocan, cae el título y suben los botones */
.home.intro .hbg img.l{animation:hInL 1.5s cubic-bezier(.2,.8,.2,1) both,cvArt 18s ease-in-out 1.5s infinite alternate}
.home.intro .hbg img.r{animation:hInR 1.5s cubic-bezier(.2,.8,.2,1) both,cvArt 18s ease-in-out 1.5s infinite alternate-reverse}
@keyframes hInL{from{transform:translateX(-22%) scale(1.14);opacity:0}to{transform:scale(1.02);opacity:1}}
@keyframes hInR{from{transform:translateX(22%) scale(1.14);opacity:0}to{transform:scale(1.02);opacity:1}}
.home.intro .hbg .seam{animation:hSeamIn .9s ease-out .75s both,seamPulse 4s ease-in-out 1.7s infinite}
@keyframes hSeamIn{0%{transform:translateX(-50%) scaleY(0);opacity:0}45%{transform:translateX(-50%) scaleY(1) scaleX(7);opacity:1}100%{transform:translateX(-50%);opacity:1}}
.home.intro .hbg::before{content:"";position:absolute;inset:0;z-index:6;pointer-events:none;background:radial-gradient(circle at 50% 38%,#ffffff,#fff6c8aa 18%,transparent 55%);opacity:0;animation:hFlash 1s ease-out .95s both}
@keyframes hFlash{0%{opacity:0}16%{opacity:.85}100%{opacity:0}}
.home.intro .hray,.home.intro .hred,.home.intro #hfx,.home.intro .hfog{animation-delay:1s;opacity:0;animation-fill-mode:both}
.home.intro #hfx{animation:hFade 1.2s ease-out 1s both}.home.intro .hfog.a,.home.intro .hfog.b{opacity:1;animation-fill-mode:none}
@keyframes hFade{from{opacity:0}to{opacity:1}}
.home.intro .htitle .saga{animation:hUp .7s ease-out 1.05s both}
.home.intro .cv-title{animation:hTitle .85s cubic-bezier(.2,.9,.25,1) 1.1s both}
@keyframes hTitle{0%{opacity:0;transform:scale(1.7);letter-spacing:.5em}70%{opacity:1;transform:scale(.98)}100%{opacity:1;transform:none}}
.home.intro .hrule,.home.intro .hsub{animation:hUp .7s ease-out 1.55s both}
.home.intro .htop,.home.intro .hpurse,.home.intro .cv-lv,.home.intro .cv-foot{animation:hFade .8s ease-out 1.9s both}
.home.intro .htile{animation:hUp .6s cubic-bezier(.2,.8,.3,1) calc(1.75s + var(--i,0)*.09s) both}
.home.intro .htile.hot{animation:hUp .6s cubic-bezier(.2,.8,.3,1) calc(1.75s + var(--i,0)*.09s) both,hHot 2.2s ease-in-out 3s infinite}
.home.soft .htile{animation:hUp .34s ease-out calc(var(--i,0)*.04s) both}
.home.soft .htile.hot{animation:hUp .34s ease-out calc(var(--i,0)*.04s) both,hHot 2.2s ease-in-out 1s infinite}
.home.soft .htitle{animation:hFade .4s ease-out both}
@keyframes hUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@media (orientation:landscape) and (max-height:560px){.htile{min-height:72px}.htile.big{min-height:84px}.htile.big b{font-size:20px}.home .cv-title{font-size:clamp(26px,5.4vw,40px)}.hrule{margin-top:4px}.hclash{top:30%}.hbg img{width:56%}}
@media (prefers-reduced-motion:reduce){.home *,.home .hbg::before{animation:none!important}.home.intro .hray,.home.intro .hred,.home.intro #hfx{opacity:1}}
.hbg .seam{box-shadow:none;top:6%;bottom:auto;height:58%;background:linear-gradient(180deg,transparent,#fff6c8cc 25%,#ffffff 52%,#ff8a8acc 78%,transparent)}
.hbg .seam::after{content:"";position:absolute;left:-40px;right:-40px;top:0;bottom:0;background:radial-gradient(ellipse 50% 50% at 50% 50%,#f7d9784d,#e0484f1f 50%,transparent 72%);pointer-events:none}
.hbg .seam i{animation-name:hRun2}
@keyframes hRun2{0%{transform:translateY(-6vh);opacity:0}20%{opacity:1}75%{opacity:1}100%{transform:translateY(52vh);opacity:0}}
.htile small{font-weight:400;letter-spacing:.2px}
.htile.arena::after{inset:auto;right:10px;top:10px;border-radius:8px;border:1px solid #6a6470;z-index:1}
.htile.big{max-width:none}.htile.arena .hi{display:none}
/* ---------- 14/11 (Fable) · abrir un sobre ---------- */
.veil.pack{align-items:center;z-index:30;background:radial-gradient(ellipse at 50% 40%,#1a1420f5,#050407fc 70%);overflow:hidden;transition:opacity .2s}
.veil.pack.out{opacity:0}
.pk-rays{position:absolute;left:50%;top:44%;width:170vmax;height:170vmax;margin:-85vmax 0 0 -85vmax;pointer-events:none;background:repeating-conic-gradient(from 0deg,transparent 0 9deg,color-mix(in srgb,var(--sc) 16%,transparent) 12deg,transparent 15deg);-webkit-mask:radial-gradient(circle,#000 0,transparent 58%);mask:radial-gradient(circle,#000 0,transparent 58%);opacity:.25;transition:opacity .9s;animation:pkSpin 70s linear infinite}
.veil.pack.lit .pk-rays{opacity:.85}
@keyframes pkSpin{to{transform:rotate(360deg)}}
.packbox{position:relative;max-width:600px;gap:12px}
.pk-h{font-size:13px;color:var(--sc);text-shadow:0 0 12px color-mix(in srgb,var(--sc) 60%,transparent)}
.pk-stage{position:relative;width:100%;display:flex;align-items:center;justify-content:center;min-height:min(60vh,420px)}
.packrow{display:flex;flex-wrap:wrap;justify-content:center;gap:26px 10px;width:100%}
.pcard{width:clamp(84px,27vw,128px);flex:none;visibility:hidden;outline:none;-webkit-tap-highlight-color:transparent}
.pcard.in{visibility:visible}
.pcard:focus-visible .pback{outline:2px solid #f7d978;outline-offset:2px}
.pcard.now .pin{transition:none}
.pback{background:radial-gradient(circle at 50% 45%,#3a2a10,#0d0905 75%),#0d0905;border:2px solid #8a6a2a;overflow:hidden}
.pback::before{content:"";position:absolute;inset:5px;border-radius:5px;border:1px solid #e8c56a55;background:repeating-linear-gradient(45deg,#e8c56a0d 0 6px,transparent 6px 12px),repeating-linear-gradient(-45deg,#e8c56a0d 0 6px,transparent 6px 12px)}
.pback i{position:absolute;left:-60%;top:0;width:50%;height:100%;background:linear-gradient(100deg,transparent,#fff6c833 50%,transparent);transform:skewX(-18deg);animation:pkGlint 3.4s ease-in-out infinite}
@keyframes pkGlint{0%,55%{transform:translateX(0) skewX(-18deg)}100%{transform:translateX(420%) skewX(-18deg)}}
.pcard.hint .pback{animation:pkHint 1.5s ease-in-out infinite}
.pcard.hint.r-ssr{--hc:#e8b93a}.pcard.hint.r-ur{--hc:#bfe9ff}.pcard.hint.r-mit{--hc:#f0303c}
.pcard.hint .pback{border-color:var(--hc);box-shadow:inset 0 0 18px #000,0 0 14px var(--hc)}
.pcard.hint .pback::after{color:var(--hc);text-shadow:0 0 12px var(--hc)}
@keyframes pkHint{50%{box-shadow:inset 0 0 18px #000,0 0 26px 4px var(--hc)}}
.pcard.charge{animation:pkCharge .76s ease-in}
@keyframes pkCharge{0%{transform:none}20%{transform:translate(-2px,1px) rotate(-1.5deg) scale(1.03)}40%{transform:translate(2px,-1px) rotate(1.5deg) scale(1.06)}60%{transform:translate(-3px,0) rotate(-2deg) scale(1.09)}80%{transform:translate(3px,-1px) rotate(2deg) scale(1.12)}100%{transform:scale(1.16)}}
.psw{position:absolute;inset:0;border-radius:8px;overflow:hidden;pointer-events:none;z-index:2}
.psw::before{content:"";position:absolute;top:-20%;left:0;width:55%;height:140%;background:linear-gradient(100deg,transparent,#ffffff66 40%,#ffffffcc 50%,#ffffff66 60%,transparent);transform:translateX(-160%) skewX(-18deg)}
.pcard.sweep .psw::before{animation:pkSweep .8s ease-in-out .3s}
@keyframes pkSweep{to{transform:translateX(330%) skewX(-18deg)}}
.pnew{position:absolute;left:-6px;top:-9px;z-index:3;padding:2px 7px;border-radius:4px;font-family:Cinzel;font-weight:900;font-size:9px;letter-spacing:1.5px;color:#06210f;background:linear-gradient(180deg,#d8ffe0,#8cf0a0 45%,#3fae5a);box-shadow:0 0 12px #8cf0a0aa,0 2px 4px #000;transform:rotate(-8deg) scale(0);pointer-events:none}
.pcard.up .pnew{animation:pkNew .5s cubic-bezier(.2,1.6,.4,1) .5s both,pkNewGlow 1.8s ease-in-out 1s infinite}
.pcard.up.now .pnew{animation-delay:0s,.5s}
@keyframes pkNew{from{transform:rotate(-8deg) scale(0)}to{transform:rotate(-8deg) scale(1)}}
@keyframes pkNewGlow{50%{box-shadow:0 0 20px 3px #8cf0a0,0 2px 4px #000}}
.ptag{opacity:0;transition:opacity .3s .45s;font-size:9.5px;color:#a8a299;bottom:-17px}
.pcard.up .ptag{opacity:1}
.pcard.r-ssr .ptag{color:#f7d978}.pcard.r-ur .ptag{color:#bfe9ff}.pcard.r-mit .ptag{color:#ff6a70}.pcard.r-sr .ptag{color:#e6e9ee}.pcard.r-r .ptag{color:#e0a878}
.pcard.up.r-sr .pfront{box-shadow:0 0 12px 1px #c9ced6aa}
.pcard.up.r-mit .pfront{animation:pkMit 2.2s ease-in-out infinite}
@keyframes pkMit{50%{box-shadow:0 0 34px 9px #f0303c}}
.pk-hint{min-height:22px;font-size:15px;color:#cfc8bd;text-align:center;font-style:italic}
.pk-hint.sum{font-style:normal;font-family:Cinzel;font-size:13px;letter-spacing:1.5px;color:#8cf0a0}
.pk-btns{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;min-height:48px}.pk-btns .act{min-width:130px}
/* el sobre */
.pk{position:absolute;left:50%;top:50%;width:min(52vw,210px,34vh);aspect-ratio:7/10.4;transform:translate(-50%,-50%);background:none;border:0;padding:0;z-index:3;color:#1a1206;animation:pkFloat 3.2s ease-in-out infinite;filter:drop-shadow(0 0 20px color-mix(in srgb,var(--sc) 60%,transparent)) drop-shadow(0 16px 16px #000)}
@keyframes pkFloat{0%,100%{transform:translate(-50%,-50%) rotate(-1.5deg)}50%{transform:translate(-50%,-54%) rotate(1.5deg)}}
.pk-luz{--foil:linear-gradient(125deg,#5a3c0c,#c9952a 18%,#fff6c8 38%,#f7d978 50%,#a87a1e 68%,#fff0b0 84%,#5a3c0c)}
.pk-osc{--foil:linear-gradient(125deg,#160305,#6a0a12 18%,#e0484f 38%,#8a0e16 52%,#2a0508 68%,#c2242c 84%,#160305)}
.pk-osc .pk{color:#ffd9d4}
.pk-top,.pk-body{position:absolute;left:0;right:0;background:var(--foil);display:block}
.pk-top{top:0;height:13%;border-radius:6px 6px 0 0;transform-origin:100% 100%;z-index:2;-webkit-mask:repeating-linear-gradient(90deg,#000 0 4px,#000c 4px 8px);mask:repeating-linear-gradient(90deg,#000 0 4px,#000c 4px 8px)}
.pk-top i{position:absolute;left:0;right:0;bottom:0;height:2px;background:#0007}
.pk-body{top:13%;bottom:0;border-radius:0 0 8px 8px;overflow:hidden;box-shadow:inset 0 0 0 1px #ffffff33,inset 0 -18px 30px #0006;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:2px;padding:0 6px 9%}
.pk-body::after{content:"";position:absolute;left:0;right:0;bottom:0;height:5%;background:repeating-linear-gradient(90deg,#0004 0 4px,transparent 4px 8px)}
.pk-art{position:absolute;left:11%;right:11%;top:19%;height:50%;border-radius:50% 50% 8px 8px/38% 38% 8px 8px;background-size:cover;background-position:50% 12%;box-shadow:0 0 0 2px #0009,0 0 0 3px #ffffff55,inset 0 0 22px #000}
.pk-body b{position:absolute;top:4.5%;left:0;right:0;font-family:Cinzel;font-weight:900;font-size:clamp(8px,2.5vw,10.5px);letter-spacing:1.5px;line-height:1.25;text-align:center;text-shadow:0 1px 0 #ffffff40}
.pk-body em{position:relative;font-style:normal;font-family:Cinzel;font-weight:900;font-size:clamp(12px,4vw,17px);letter-spacing:2.5px;text-shadow:0 1px 0 #ffffff40}
.pk-body small{position:relative;font-family:Cinzel;font-size:8.5px;letter-spacing:3px;opacity:.8}
.pk-sheen{position:absolute;top:-20%;left:0;width:45%;height:140%;z-index:1;background:linear-gradient(100deg,transparent,#ffffff59 50%,transparent);transform:translateX(-170%) skewX(-18deg);animation:pkSheen 3.2s ease-in-out infinite}
@keyframes pkSheen{0%,40%{transform:translateX(-170%) skewX(-18deg)}100%{transform:translateX(400%) skewX(-18deg)}}
.pk-slit{position:absolute;left:-18%;right:-18%;top:13%;height:4px;margin-top:-2px;border-radius:50%;background:#fff;box-shadow:0 0 18px 6px #fff,0 0 60px 18px var(--sc);opacity:0;z-index:3;pointer-events:none}
.pk.charge{animation:pkShake .76s ease-in forwards}
@keyframes pkShake{0%{transform:translate(-50%,-50%)}15%{transform:translate(-51%,-50%) rotate(-2deg)}30%{transform:translate(-49%,-50.5%) rotate(2deg) scale(1.03)}45%{transform:translate(-51.5%,-50%) rotate(-3deg) scale(1.05)}60%{transform:translate(-48.5%,-50.5%) rotate(3deg) scale(1.07)}80%{transform:translate(-51%,-50%) rotate(-2deg) scale(1.1)}100%{transform:translate(-50%,-50%) scale(1.12)}}
.pk.open{animation:none;transform:translate(-50%,-50%) scale(1.12);pointer-events:none}
.pk.open .pk-top{animation:pkTear .85s cubic-bezier(.3,.6,.4,1) forwards}
@keyframes pkTear{30%{transform:rotate(14deg) translate(4%,-40%);opacity:1}100%{transform:rotate(70deg) translate(90%,-320%);opacity:0}}
.pk.open .pk-slit{animation:pkSlit 1s ease-out forwards}
@keyframes pkSlit{0%{opacity:0;transform:scaleX(.1)}18%{opacity:1;transform:scaleX(1)}55%{opacity:1;transform:scaleX(1.1) scaleY(5)}100%{opacity:0;transform:scaleX(1.3) scaleY(1)}}
.pk.open .pk-body{animation:pkDrop 1.1s ease-in .45s forwards}
@keyframes pkDrop{to{transform:translateY(46%) scale(.92);opacity:0}}
/* el momento de una SSR, UR o Mítica */
.pshow{position:fixed;inset:0;z-index:45;overflow:hidden;transition:opacity .24s;cursor:pointer}
.pshow.out{opacity:0}
.ps-dim{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 42%,color-mix(in srgb,var(--rc) 24%,#000) 0,#020203f7 64%);opacity:0}
.ps-rays{position:absolute;left:50%;top:42%;width:170vmax;height:170vmax;margin:-85vmax 0 0 -85vmax;background:repeating-conic-gradient(from 0deg,transparent 0 7deg,color-mix(in srgb,var(--rc) 34%,transparent) 10deg,transparent 13deg);-webkit-mask:radial-gradient(circle,#000 4%,transparent 50%);mask:radial-gradient(circle,#000 4%,transparent 50%);opacity:0;transition:opacity .6s;animation:pkSpin 44s linear infinite}
.pshow.lit .ps-rays{opacity:1}
.ps-ring{position:absolute;left:50%;top:42%;width:62vmin;height:62vmin;border-radius:50%;border:3px solid var(--rc);box-shadow:0 0 30px var(--rc),inset 0 0 22px var(--rc);opacity:0;transform:translate(-50%,-50%) scale(.2)}
.ps-card{position:absolute;perspective:900px;z-index:2;transition:filter .4s}
.pshow.lit .ps-card{filter:drop-shadow(0 0 22px var(--rc))}
.ps-in{position:absolute;inset:0;transform-style:preserve-3d}
.ps-in .pback,.ps-in .pfront{border-radius:12px}
.ps-in .pback{border-color:var(--rc);box-shadow:inset 0 0 26px #000,0 0 26px var(--rc)}.ps-in .pback::after{font-size:54px;color:var(--rc);text-shadow:0 0 22px var(--rc)}
.card.mini.xl{border-width:3px;border-radius:12px}
.card.mini.xl .fr{border-radius:9px;padding:3px}
.card.mini.xl .nm{left:9px;right:9px;bottom:9px;font-size:clamp(13px,4.4vw,19px);white-space:normal;line-height:1.1;text-shadow:0 2px 4px #000}
.card.mini.xl .pw{left:9px;bottom:auto;top:8px;font-size:clamp(22px,7vw,34px);text-shadow:0 2px 6px #000,0 0 12px #000}
.ps-prism{position:absolute;inset:0;border-radius:12px;overflow:hidden;z-index:3;pointer-events:none;opacity:0;transition:opacity .4s;mix-blend-mode:screen}
.ps-prism::before{content:"";position:absolute;top:-20%;left:0;width:80%;height:140%;background:linear-gradient(105deg,transparent 20%,#ff9ad566 36%,#9ad5ff80 50%,#b8ffd066 64%,transparent 80%);transform:translateX(-140%) skewX(-16deg);animation:psPrism 2.6s ease-in-out infinite}
@keyframes psPrism{to{transform:translateX(260%) skewX(-16deg)}}
.pshow.lit .ps-prism{opacity:1}
.ps-bolt{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
.ps-bolt .bz{opacity:0}.ps-bolt path{fill:none;stroke-linejoin:bevel;stroke-linecap:round}
.ps-bolt .g{stroke:#f0303c;stroke-width:9;opacity:.75;filter:blur(3px)}.ps-bolt .w{stroke:#ffe9e4;stroke-width:2.4}
.ps-flash{position:absolute;inset:0;z-index:4;pointer-events:none;opacity:0;background:radial-gradient(circle at 50% 42%,#fff,color-mix(in srgb,var(--rc) 70%,#fff) 30%,transparent 72%)}
.ps-txt{position:absolute;left:0;right:0;z-index:3;text-align:center;padding:0 14px;pointer-events:none}
.ps-txt>*{opacity:0}
.ps-rar{font-family:Cinzel;font-weight:900;font-size:clamp(22px,8vw,40px);letter-spacing:.32em;margin-right:-.32em;color:var(--rc);text-shadow:0 0 18px var(--rc),0 2px 3px #000;line-height:1.05}
.r-mit .ps-rar{font-size:clamp(30px,11.5vw,60px);color:#ff5a62;text-shadow:0 0 26px #f0303c,0 0 4px #fff,0 3px 4px #000}
.r-ur .ps-rar{color:#eaf8ff;text-shadow:0 0 18px #7fc8ff,0 0 34px #e8d9ff,0 2px 3px #000}
.ps-nm{font-family:Cinzel;font-weight:700;font-size:clamp(17px,5.6vw,26px);letter-spacing:2px;color:#f3e6c0;text-shadow:0 2px 4px #000;margin-top:4px}
.ps-ti{font-size:15px;font-style:italic;color:#cfc8bd;text-shadow:0 1px 3px #000}
.ps-new{display:inline-block;margin-top:8px;padding:3px 12px;border-radius:5px;font-family:Cinzel;font-weight:900;font-size:13px;letter-spacing:2px;color:#06210f;background:linear-gradient(180deg,#d8ffe0,#8cf0a0 45%,#3fae5a);box-shadow:0 0 16px #8cf0a0aa}
.ps-fr{margin-top:8px;font-size:14px;color:#a8a299}
.pshow.txt .ps-rar{animation:psSlam .5s cubic-bezier(.3,.9,.3,1) both}
@keyframes psSlam{0%{opacity:0;transform:scale(2.5)}75%{opacity:1;transform:scale(.96)}100%{opacity:1;transform:none}}
.pshow.txt .ps-nm{animation:hUp .5s ease-out .3s both}.pshow.txt .ps-ti{animation:hUp .5s ease-out .45s both}
.pshow.txt .ps-new{animation:psPop .5s cubic-bezier(.2,1.6,.4,1) .75s both}.pshow.txt .ps-fr{animation:hUp .5s ease-out .7s both}
@keyframes psPop{from{opacity:0;transform:scale(0)}to{opacity:1;transform:none}}
.pshow .skip{position:absolute;left:0;right:0;bottom:14px;text-align:center;font-size:13px;color:#a8a29988;z-index:3}
@media (orientation:landscape) and (max-height:560px){.pcard{width:min(15.5vw,calc((100vh - 190px)*.7))}.pk-stage{min-height:calc(100vh - 150px)}.packbox{gap:6px;padding:8px 12px;max-width:none}.packrow{flex-wrap:nowrap}.ps-ti{display:none}.ps-rar{font-size:22px}.r-mit .ps-rar{font-size:30px}}
@media (prefers-reduced-motion:reduce){.veil.pack *,.pshow *{animation:none!important}.pnew{transform:rotate(-8deg)}}
/* ---------- 14/11 (Fable) · reliquias: círculo del portador y casilla ---------- */
.card .rlb{width:24px;height:24px;right:2px;border:0;padding:2px;overflow:visible;background:conic-gradient(from 0deg,var(--rc),#fff 20%,var(--rc) 40%,#0008 60%,var(--rc) 80%,#fff 92%,var(--rc));box-shadow:0 0 7px var(--rc),0 1px 3px #000}
.card .rlb img{border-radius:50%;display:block;box-shadow:inset 0 0 0 1px #000}
.card .rlb::after{content:"";position:absolute;inset:-3px;border-radius:50%;border:1px solid transparent;border-top-color:#fff;border-right-color:var(--rc);opacity:0}
.card .rlb.own{animation:rlbPulse 2.4s ease-in-out infinite}
.card .rlb.own::after{opacity:.9;animation:pkSpin 2.8s linear infinite}
.card .rlb.own::before{content:"★";position:absolute;right:-4px;top:-6px;font-size:9px;line-height:1;color:#fff6c8;text-shadow:0 0 5px var(--rc),0 1px 2px #000;z-index:1}
.half .row .slot.relslot{overflow:visible}
.relslot .rs-g{color:color-mix(in srgb,var(--rc) 55%,#6a5a3a);text-shadow:0 0 8px var(--rc)}
.relslot .rs-g::before{content:"";position:absolute;left:50%;top:50%;width:62%;aspect-ratio:1;margin:-31% 0 0 -31%;border-radius:50%;border:1px dashed color-mix(in srgb,var(--rc) 60%,transparent);animation:pkSpin 22s linear infinite}
.relslot .rs-g::after{content:"";position:absolute;left:50%;top:50%;width:40%;aspect-ratio:1;margin:-20% 0 0 -20%;border-radius:50%;border:1px solid color-mix(in srgb,var(--rc) 35%,transparent);animation:pkSpin 16s linear infinite reverse;border-left-color:transparent;border-right-color:transparent}
.relslot:has(.card)::after{content:"";position:absolute;left:-12%;right:-12%;bottom:-5px;height:14px;border-radius:50%;background:radial-gradient(ellipse,color-mix(in srgb,var(--rc) 70%,transparent),transparent 70%);animation:hGlow 3.2s ease-in-out infinite;pointer-events:none;z-index:0}
body.cine .rlb,body.cine .rlb::after,body.cine .relslot *,body.cine .relslot::after{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.card .rlb.own::after,.relslot .rs-g::before,.relslot .rs-g::after,.relslot::after{animation:none}}
/* ---------- 14/11 (Fable) · colección, mazos, tienda y campaña a la altura del resto ---------- */
.colscr{position:relative;isolation:isolate;gap:12px}
.colscr::before{content:"";position:fixed;inset:0;z-index:-2;background:url(../img/Tres-Aguilas.jpg) center 20%/cover;opacity:.16;filter:saturate(.6)}
.colscr::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse 90% 60% at 50% 0,#e8b93a14,transparent 60%),linear-gradient(180deg,#07060ae6,#07060ab8 30%,#07060af2)}
.colhead{position:sticky;top:0;z-index:6;margin:-14px -12px 0;padding:10px 12px;background:linear-gradient(180deg,#07060afa 70%,#07060a00);font-size:15px}
.colhead>b{background:linear-gradient(180deg,#fff6c8,#f7d978 50%,#c9952a);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:900;letter-spacing:3px;filter:drop-shadow(0 1px 2px #000)}
.chip{display:inline-flex;align-items:center;gap:5px;padding:2px 9px 2px 5px;border-radius:12px;border:1px solid #6a5a3a;background:#0b090dcc;font-size:13px;color:#e6dccb;line-height:1.3;white-space:nowrap}
.chip>i{flex:none;width:13px;height:13px;border-radius:50%;display:inline-block}
.chip.oro>i{background:radial-gradient(circle at 35% 30%,#fff6c8,#f7d978 40%,#a87a1e);box-shadow:0 0 5px #e8b93a88,inset 0 0 0 1px #5a3c0c}
.chip.pie>i{background:radial-gradient(circle at 35% 30%,#ffffff,#cfe3ff 40%,#5a78b0);box-shadow:0 0 6px #9fb6e0aa}
.chip.fra>i{border-radius:2px;transform:rotate(45deg) scale(.8);background:linear-gradient(135deg,#e8d9ff,#9a7ad0 60%,#4a3a78);box-shadow:0 0 5px #b89aff88}
.chip.sob>i{border-radius:2px;width:10px;height:14px;background:linear-gradient(125deg,#c9952a,#fff6c8 45%,#a87a1e);box-shadow:0 0 5px #e8b93a66}
.chip.car{padding-left:2px;border-color:var(--rc);box-shadow:0 0 8px color-mix(in srgb,var(--rc) 45%,transparent);font-family:Cinzel;font-size:10.5px;letter-spacing:.5px;color:#fff}
.chip.car img{width:20px;height:20px;border-radius:50%;object-fit:cover;object-position:50% 15%}
.chip.ok{padding-left:9px;border-color:#3fae5a;color:#8cf0a0}
.purse{gap:8px}.purse .chip{padding:4px 12px 4px 7px;border-radius:16px;box-shadow:0 3px 10px #0008}.purse .chip b{font-size:14px}.purse .chip small{font-size:12px;color:var(--muted)}
.coltabs.main{gap:5px;padding:4px;border-radius:14px;background:#0b090dcc;border:1px solid #2a2530}
.coltabs.main button{position:relative;max-width:none;min-height:50px;border-radius:10px;border-color:transparent;background:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:10px;letter-spacing:1.2px;color:#a8a299;transition:color .2s,background .2s}
.coltabs.main .hi{width:19px;height:19px}
.coltabs.main button.on{border-color:#e8c56a;color:#f7d978;background:linear-gradient(180deg,#3a2a0c,#120d05);box-shadow:0 0 14px #e8b93a33,inset 0 1px 0 #fff6c833}
.coltabs.main .badge{position:absolute;top:3px;right:6px;margin:0;box-shadow:0 0 8px #e0484f}
.colbody{display:flex;flex-direction:column;gap:12px;animation:hFade .28s ease-out}
/* colección */
.cprog{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--muted)}.cprog b{color:#f7d978;font-family:Cinzel}
.cbar,.bbar,.pbar>div{flex:1;height:7px;border-radius:4px;background:#0b090d;border:1px solid #3a3440;overflow:hidden;position:relative}
.cbar i,.bbar i,.pbar i{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,#a87a1e,#f7d978,#fff6c8);box-shadow:0 0 8px #e8b93a}
.rarh{display:flex;align-items:center;gap:10px;margin-top:6px;font-family:Cinzel;color:var(--rc)}
.rarh i{flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--rc))}.rarh i:last-child{background:linear-gradient(270deg,transparent,var(--rc))}
.rarh b{font-size:13px;letter-spacing:4px;text-shadow:0 0 10px var(--rc)}.rarh small{font-size:11px;color:var(--muted);letter-spacing:1px}
.cgrid{gap:10px}
.cgrid .card.mini{border-width:2px;border-radius:8px;transition:transform .14s ease;box-shadow:0 4px 10px #000a}
.cgrid .card.mini:active{transform:scale(.95)}
.cgrid .card.mini.r-ssr:not(.none){box-shadow:0 0 12px #e8b93a66,0 4px 10px #000a}.cgrid .card.mini.r-ur:not(.none){box-shadow:0 0 12px #bfe9ff77,0 4px 10px #000a}.cgrid .card.mini.r-mit:not(.none){box-shadow:0 0 14px #f0303c88,0 4px 10px #000a}
.card.mini.none{filter:grayscale(1) brightness(.34) contrast(1.1)}
.card.mini .lk{position:absolute;left:50%;top:42%;width:18px;height:14px;margin:-7px 0 0 -9px;border-radius:3px;background:#cfc8bd;z-index:3;box-shadow:0 0 0 1px #000}
.card.mini .lk::before{content:"";position:absolute;left:3px;right:3px;top:-9px;height:10px;border:2.5px solid #cfc8bd;border-bottom:0;border-radius:7px 7px 0 0}
/* mazos */
.deckrow{position:relative;overflow:hidden;gap:10px;padding:10px 12px 10px 8px;background:linear-gradient(90deg,#1a1620,#100e14);box-shadow:0 4px 12px #0008}
.deckrow::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:#f7d978}.deckrow.osc::before{background:#e0484f}
.deckrow.on{border-color:#e8c56a;background:linear-gradient(90deg,#2a1f0c,#120d05);box-shadow:0 0 16px #e8b93a33,0 4px 12px #0008}
.dfan{flex:none;position:relative;width:74px;height:62px}
.dfan img{position:absolute;left:50%;top:4px;width:38px;height:54px;margin-left:-19px;object-fit:cover;border-radius:4px;border:1.5px solid #8e9299;box-shadow:0 2px 6px #000;transform:translateX(calc(var(--k)*15px)) rotate(calc(var(--k)*9deg));transform-origin:50% 100%}
.dfan img:nth-child(2){z-index:1;transform:translateY(-3px)}
.dinfo{flex:1;min-width:0}
.tag{padding:3px 8px;border-radius:10px;border:1px solid #e8c56a;background:#3a2a0c;box-shadow:0 0 8px #e8b93a44}
.colbig{position:relative;overflow:hidden;box-shadow:0 0 18px #e8b93a33,0 6px 16px #000a}
/* constructor */
.bstat{position:sticky;top:54px;z-index:5;display:flex;flex-direction:column;gap:6px;padding:8px 10px;box-shadow:0 6px 14px #000a}
.bbar em{position:absolute;top:-1px;bottom:-1px;width:2px;background:#8cf0a0;box-shadow:0 0 5px #8cf0a0}
.bstat.bad .bbar i{background:linear-gradient(90deg,#7a2a22,#ff9a8a)}
.brow{position:relative;overflow:hidden;padding:5px 6px 5px 9px;background:linear-gradient(90deg,#17141c,#111015)}
.brow::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--rc);box-shadow:0 0 8px var(--rc)}
.brow.in{border-color:#8a743a;background:linear-gradient(90deg,#2a1f0c,#15110a)}
.brow img{border:1px solid var(--rc)}
.brow .bq b{min-width:22px;height:22px;line-height:22px;border-radius:50%;background:#0b090d;border:1px solid #3a3440;font-size:12px}.brow.in .bq b{border-color:#e8c56a;color:#f7d978}
/* tienda */
.shopbox{position:relative;overflow:hidden;gap:14px;padding:12px;background:linear-gradient(135deg,#1a1620,#0d0b10);box-shadow:0 6px 16px #000a}
.shopbox.luz{border-color:#8a743a;background:linear-gradient(135deg,#2a200c,#0d0b10 60%)}.shopbox.osc{border-color:#7a2a2e;background:linear-gradient(135deg,#2a0c10,#0d0b10 60%)}
.pkm{position:relative;flex:none;width:66px;height:98px;display:block;transform:rotate(-4deg);filter:drop-shadow(0 6px 8px #000) drop-shadow(0 0 10px color-mix(in srgb,var(--pc,#f7d978) 45%,transparent))}
.pk-osc .pkm{--pc:#e0484f}
.pkm .pk-top{height:13%;border-radius:4px 4px 0 0}.pkm .pk-body{top:13%;border-radius:0 0 5px 5px;padding:0}
.pkm .pk-art{left:10%;right:10%;top:12%;height:66%}
.pkm>em{position:absolute;right:-8px;top:-6px;z-index:3;min-width:20px;height:20px;line-height:20px;text-align:center;border-radius:10px;background:#e0484f;color:#fff;font-style:normal;font-family:Cinzel;font-weight:900;font-size:11px;box-shadow:0 0 10px #e0484f;transform:rotate(4deg)}
.shopbtns .act.main{box-shadow:0 0 14px #e8b93a55}
.pity{flex-direction:column;gap:6px;align-items:stretch;padding:10px 12px;border-radius:12px;border:1px solid #2a2530;background:#0b090dcc}
.pbar{display:flex;align-items:center;gap:8px;font-size:12px}.pbar>span{width:52px;font-family:Cinzel;font-weight:900;font-size:11px;letter-spacing:1px;text-align:left}.pbar small{width:118px;text-align:right;flex-basis:auto;font-size:12px}
.pbar.r-ssr>span{color:#f7d978}.pbar.r-ur>span{color:#bfe9ff}.pbar.r-ur i{background:linear-gradient(90deg,#5a8ab0,#bfe9ff,#fff);box-shadow:0 0 8px #bfe9ff}.pbar.r-mit>span{color:#ff6a70}.pbar.r-mit i{background:linear-gradient(90deg,#8a0e16,#f0303c,#ffb0a8);box-shadow:0 0 8px #f0303c}
.shoph{display:flex;align-items:center;gap:10px;margin-top:10px;font-size:12px;color:#e8c56a}.shoph::before,.shoph::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,transparent,#8a743a)}.shoph::after{background:linear-gradient(270deg,transparent,#8a743a)}
.pk-h::before,.pk-h::after{display:none}
.ofr{padding:6px;border-radius:10px;border:1px solid #2a2530;background:#0b090dcc}
/* campaña */
.chap{padding:0;overflow:hidden;gap:10px;border-color:#8a743a;box-shadow:0 8px 22px #000a}
.chap-b{position:relative;min-height:128px;display:flex;flex-direction:column;justify-content:flex-end;gap:2px;padding:12px 14px;background-size:cover;background-position:50% 24%;isolation:isolate}
.chap-b::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,#07060a55,#07060a22 35%,#100e0af7)}
.chap-b small{font-family:Cinzel;font-size:10px;letter-spacing:4px;color:#e8c56a;text-shadow:0 1px 3px #000}
.chap-b b{font-family:Cinzel;font-weight:900;font-size:22px;letter-spacing:3px;color:#fff6c8;text-shadow:0 2px 6px #000,0 0 18px #e8b93a66}
.pips{display:flex;gap:5px;margin-top:4px}.pips i{width:22px;height:5px;border-radius:3px;background:#ffffff26;box-shadow:inset 0 0 0 1px #0006}.pips i.on{background:#f7d978;box-shadow:0 0 8px #e8b93a}.pips i.j{width:30px}.pips i.j.on{background:#ff6a70;box-shadow:0 0 8px #e0484f}
.chap-i{padding:0 14px;text-align:left!important;font-style:italic}
.chap>.colp:last-child{padding:0 14px 12px}
.path{position:relative;display:flex;flex-direction:column;gap:8px;padding:0 10px}
.path::before{content:"";position:absolute;left:34px;top:26px;bottom:26px;width:2px;background:linear-gradient(180deg,#8a743a,#8a743a55 60%,#e0484f)}
.stage{position:relative;overflow:hidden;background:linear-gradient(90deg,#1a1620,#121016);box-shadow:0 3px 10px #0007;transition:transform .14s ease}
.stage:not(:disabled):active{transform:scale(.985)}
.stage .sn{position:relative;z-index:1;width:32px;height:32px;background:#0b090d;box-shadow:0 0 0 3px #121016}
.stage.done .sn{background:linear-gradient(180deg,#f7d978,#a87a1e);color:#1a1206;border-color:#fff6c8}
.stage.next{border-color:#e8c56a;box-shadow:0 0 16px #e8b93a33,0 3px 10px #0007}
.stage.next .sn{animation:stNext 1.8s ease-in-out infinite}
@keyframes stNext{50%{box-shadow:0 0 0 3px #121016,0 0 14px 3px #e8b93a}}
.stage .go{flex:none;padding:5px 10px;border-radius:8px;border:1px solid #e8c56a;background:linear-gradient(180deg,#3a2a0c,#120d05);font-family:Cinzel;font-weight:900;font-size:10px;letter-spacing:1.5px;color:#f7d978}
.stage .pr{display:flex;flex-wrap:wrap;gap:4px;margin-top:5px}.stage .pr .chip{font-size:12px;padding-top:1px;padding-bottom:1px}
.stage.jefe{min-height:84px;border-color:#c2383c;background:linear-gradient(90deg,#2a0e10,#16141a 70%)}
.stage.jefe .sj{position:absolute;right:0;top:0;bottom:0;width:46%;background-size:cover;background-position:50% 18%;opacity:.5;-webkit-mask:linear-gradient(270deg,#000 30%,transparent);mask:linear-gradient(270deg,#000 30%,transparent);pointer-events:none}
.stage.jefe .si,.stage.jefe .go{position:relative;z-index:1}.stage.jefe .si b{font-size:14.5px;color:#ffd0c8;text-shadow:0 1px 3px #000}
.stage.jefe.next{box-shadow:0 0 18px #e0484f55}.stage.jefe.next .sn{animation-name:stBoss}
@keyframes stBoss{50%{box-shadow:0 0 0 3px #121016,0 0 14px 3px #e0484f}}
.stage .lock{position:relative;width:16px;height:12px;border-radius:3px;background:#8a8478;margin-right:4px}
.stage .lock::before{content:"";position:absolute;left:3px;right:3px;top:-8px;height:9px;border:2px solid #8a8478;border-bottom:0;border-radius:6px 6px 0 0}
.ctoast{animation:hUp .25s ease-out}
/* mesa de campaña: el fondo del capítulo se funde con la mesa */
body[data-mesa] .half::before{filter:brightness(.8) saturate(.95);-webkit-mask:radial-gradient(ellipse 120% 100% at 50% 50%,#000 55%,#000a 100%);mask:radial-gradient(ellipse 120% 100% at 50% 50%,#000 55%,#000a 100%)}
body[data-mesa] .half.foe::after,body[data-mesa] .half.mine::after{opacity:.3}
body[data-mesa] .half .slot{background-color:#07060a8c}
@media (prefers-reduced-motion:reduce){.colbody,.stage.next .sn,.ctoast{animation:none}}
.colscr{width:100%}.colhead input{width:0}
/* ---------- 14/11 · campaña de 8 capítulos: capítulos plegados y bloqueados ---------- */
.chap.fold{display:block;width:100%;padding:0;text-align:left;font:inherit;color:inherit;cursor:pointer}
.chap.fold .chap-b{min-height:84px;display:flex}
.chap.fold .chap-b b{font-size:17px}
.chap.shut{border-color:#2a2530;box-shadow:none;opacity:.75}
.chap.shut .chap-b{min-height:70px;background:linear-gradient(135deg,#16141a,#0d0b10)}
.chap.shut .chap-b b{font-size:16px;color:#8a8478;text-shadow:none}
.chap.shut .chap-b small{color:#6a6470}
.chap.shut .chap-b em{font-size:12.5px;color:#6a6470;font-style:italic}
.chap.shut .lock{position:absolute;right:16px;top:50%;width:16px;height:12px;border-radius:3px;background:#6a6470;margin-top:-2px}
.chap.shut .lock::before{content:"";position:absolute;left:3px;right:3px;top:-8px;height:9px;border:2px solid #6a6470;border-bottom:0;border-radius:6px 6px 0 0}
/* ---------- 14/11 · la carta completa (colección): frente y reverso ---------- */
.fullbtn{width:100%;margin:2px 0 4px}
/* ---------- LA CARTA COMPLETA (15/11): frente con el arte entero y el marco de su rareza; reverso con habilidades y lore ---------- */
.fcveil{position:fixed;inset:0;z-index:60;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:14px;background:radial-gradient(ellipse at 50% 45%,#1a1420f2,#050407fc 70%);animation:hFade .25s ease-out;transition:opacity .2s}
.fcveil.out{opacity:0}
.fc-stage{perspective:1600px;width:min(90vw,calc((100vh - 170px)*5/7),460px);aspect-ratio:5/7;cursor:pointer;outline:none;-webkit-tap-highlight-color:transparent}
.fc-card{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .7s cubic-bezier(.3,.7,.25,1);animation:fcIn .55s cubic-bezier(.2,.8,.3,1)}
@keyframes fcIn{from{transform:translateY(30px) scale(.85) rotateY(-25deg);opacity:0}to{transform:none;opacity:1}}
.fc-card.flip{transform:rotateY(180deg)}
.fc-card{--metal:linear-gradient(160deg,#a3a6ac,#4a4d54 32%,#84878e 54%,#2e3036 80%,#6b6e75)}
.fc-card.r-r{--metal:linear-gradient(160deg,#f0b884,#8a4f22 32%,#d89252 54%,#5e3212 80%,#b87a44)}
.fc-card.r-sr{--metal:linear-gradient(160deg,#ffffff,#8e97a6 30%,#eef2f8 52%,#6d7584 78%,#cfd6e0)}
.fc-card.r-ssr{--metal:linear-gradient(160deg,#fff6c8,#b8860b 28%,#ffe08a 50%,#8a5f0a 76%,#f7d978)}
.fc-card.r-ur{--metal:linear-gradient(160deg,#ffffff,#9fdcff 22%,#e9d8ff 44%,#ffffff 56%,#8fd0f5 78%,#ffe6f7)}
.fc-card.r-mit{--metal:linear-gradient(160deg,#ff8a8a,#8a0e16 28%,#f0303c 50%,#4a0509 76%,#e0484f)}
.fc-face{position:absolute;inset:0;border-radius:4.5% / 3.2%;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:var(--fbg);box-shadow:0 20px 50px #000,0 0 26px color-mix(in srgb,var(--rc) 45%,transparent);container-type:inline-size}
.fc-frame{position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:4;border:2.6cqw solid transparent;background:var(--metal) border-box;-webkit-mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.fc-frame::after{content:"";position:absolute;inset:1.4cqw;border-radius:3%;border:1px solid color-mix(in srgb,var(--rc) 60%,#0008)}
/* frente */
.fc-full{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fc-shade{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,#000b 0%,#0000 17%,#0000 58%,#000c 80%,#000e 100%)}
.fc-glint{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0}
.fc-fx{position:absolute;inset:0;z-index:5;pointer-events:none;border-radius:inherit}
.fc-fx .fr{position:absolute;inset:0;border-radius:inherit;padding:2.6cqw;overflow:hidden;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.fc-fx .fr::before{content:"";position:absolute;left:50%;top:50%;width:230%;aspect-ratio:1;transform:translate(-50%,-50%);animation:frSpin 4.2s linear infinite}
.fc-card.r-sr .fc-fx .fr::before{background:conic-gradient(transparent 0 84%,#ffffffcc 92%,transparent 100%);animation-duration:7s}
.fc-card.r-ssr .fc-fx .fr::before{background:conic-gradient(transparent 0 28%,#e8b93a 38%,#fffbe0 44%,#e8b93a 50%,transparent 60% 78%,#e8b93a 88%,#fffbe0 94%,#e8b93a 100%);animation-duration:4.6s}
.fc-card.r-ur .fc-fx .fr::before{background:conic-gradient(#ffffff,#7fd4ff,#e3c8ff,#ffffff,#a8f3ff,#ffc9ee,#ffffff,#7fd4ff,#ffffff);animation-duration:6s}
.fc-card.r-mit .fc-fx .fr::before{background:conic-gradient(transparent 0 20%,#7a0e14 30%,#ff2a36 40%,#fff 45%,#ff2a36 50%,transparent 60% 70%,#7a0e14 80%,#ff2a36 90%,#fff 95%,#ff2a36 100%);animation-duration:2.6s}
.fc-fx .fz{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.fc-fx .fz *{vector-effect:non-scaling-stroke}
/* Mítica: los rayos rojos saltan por todo el borde */
.fc-card.r-mit .fz path{fill:none;stroke-linecap:round;stroke-linejoin:round;opacity:0;animation:zap 2.6s linear infinite}
.fc-card.r-mit .fz .g{stroke:#ff2a36;stroke-width:5px;filter:drop-shadow(0 0 4px #ff2a36)}.fc-card.r-mit .fz .w{stroke:#fff0f0;stroke-width:1.6px}
.fc-card.r-mit .fz .b{animation-delay:.62s}.fc-card.r-mit .fz .c{animation-delay:1.28s}.fc-card.r-mit .fz .d{animation-delay:1.92s}
.fc-card.r-mit .fc-front{animation:fcMitG 2.6s ease-in-out infinite}
@keyframes fcMitG{0%,100%{box-shadow:0 20px 50px #000,0 0 26px #f0303c88}50%{box-shadow:0 20px 50px #000,0 0 46px #ff2a36,0 0 90px #f0303c66}}
.fc-card.r-mit .fc-glint{opacity:1;background:linear-gradient(115deg,transparent 42%,#ff6a7244 50%,transparent 58%);transform:translateX(-130%);animation:glint 5.2s ease-in-out infinite}
.fc-card.r-mit .fc-shade{box-shadow:inset 0 0 6cqw #f0303c77}
/* UR: cristal tallado */
.fc-card.r-ur .fz polygon{fill:#fff;opacity:.05;animation:facet 4.4s ease-in-out infinite}
.fc-card.r-ur .fz .f2{animation-delay:.9s}.fc-card.r-ur .fz .f3{animation-delay:1.8s}.fc-card.r-ur .fz .f4{animation-delay:2.7s}
.fc-card.r-ur .fz line{stroke:#fff;stroke-width:.8px;opacity:.3}
.fc-card.r-ur .fz .st{fill:#fff;opacity:0;transform-box:fill-box;transform-origin:center;animation:star 3.3s ease-in-out infinite}
.fc-card.r-ur .fz .s2{animation-delay:1.1s}.fc-card.r-ur .fz .s3{animation-delay:2.2s}
.fc-card.r-ur .fc-glint{opacity:1;background:linear-gradient(105deg,transparent 40%,#ffffff99 48%,#bfe9ff66 52%,transparent 60%);transform:translateX(-130%);animation:glint 3.8s ease-in-out infinite}
/* SSR: oro vivo */
.fc-card.r-ssr .fc-glint{opacity:1;background:linear-gradient(112deg,transparent 36%,#fff3c450 46%,#ffe9a099 50%,#fff3c450 54%,transparent 64%);transform:translateX(-130%);animation:glint 4.4s ease-in-out infinite}
.fc-card.r-ssr .fc-shade{box-shadow:inset 0 0 5cqw #e8b93a55}
.fc-top{position:absolute;left:0;right:0;top:0;z-index:6;display:flex;justify-content:space-between;align-items:center;padding:5cqw 6cqw 0}
.fc-stars{color:var(--rc);font-size:4.6cqw;letter-spacing:.6cqw;text-shadow:0 0 2cqw var(--rc),0 1px 2px #000}
.fc-rar{font-family:Cinzel;font-weight:900;font-size:4cqw;letter-spacing:1cqw;padding:.8cqw 2.6cqw;border-radius:2cqw;color:var(--rc);background:#0b090dcc;border:1px solid color-mix(in srgb,var(--rc) 70%,transparent);text-shadow:0 0 2cqw var(--rc)}
.fc-card.r-mit .fc-rar{color:#ff6a70;box-shadow:0 0 3cqw #f0303c88}
.fc-rank{position:absolute;left:6cqw;top:13cqw;z-index:6;padding:.8cqw 2.4cqw;border-radius:2cqw;background:#0b090dd9;border:1px solid var(--rc);font-family:Cinzel;font-weight:700;font-size:3cqw;letter-spacing:.6cqw;color:#f3e6c0}
.fc-femb{position:absolute;left:4.5cqw;bottom:6.5cqw;z-index:6;width:15cqw;height:15cqw;border-radius:50%;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 40% 30%,#2a2230,#08060a);border:1.2cqw solid var(--rc);box-shadow:0 0 3cqw color-mix(in srgb,var(--rc) 70%,transparent),0 3px 6px #000}
.fc-femb .fc-emb{width:8.5cqw;height:8.5cqw;color:var(--rc)}
.fc-name{position:absolute;left:20cqw;right:20cqw;bottom:6.5cqw;z-index:6;text-align:center}
.fc-name b{display:block;font-family:Cinzel;font-weight:900;font-size:6cqw;letter-spacing:.5cqw;line-height:1.05;color:#fff6e0;text-shadow:0 2px 4px #000,0 0 3cqw #000}
.fc-name small{display:block;margin-top:.6cqw;font-style:italic;font-size:3.4cqw;line-height:1.15;color:#e6dccb;text-shadow:0 1px 3px #000}
.fc-tl{display:block;margin-top:1cqw;font-family:Cinzel;font-size:2.6cqw;letter-spacing:.3cqw;color:#e8c56a;text-shadow:0 1px 2px #000}
.fc-pw{position:absolute;right:4.5cqw;bottom:6.5cqw;z-index:6;min-width:15cqw;height:15cqw;padding:0 2cqw;border-radius:8cqw;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 40% 30%,#3a2a10,#0b0805);border:1.2cqw solid var(--rc);box-shadow:0 0 3cqw var(--rc),0 3px 6px #000;font-family:Cinzel;font-weight:900;font-size:5.6cqw;color:#fff6e0;text-shadow:0 1px 2px #000}
.fc-pw.rel{font-size:7cqw;color:var(--rc)}
/* reverso */
.fc-back{transform:rotateY(180deg);display:flex;flex-direction:column;padding:8cqw 7.5cqw 15cqw;text-align:left}
.fc-back::before{content:"";position:absolute;inset:0;background:repeating-conic-gradient(from 0deg at 50% 40%,transparent 0 8deg,color-mix(in srgb,var(--rc) 9%,transparent) 10deg,transparent 12deg);-webkit-mask:radial-gradient(circle at 50% 40%,#000,transparent 72%);mask:radial-gradient(circle at 50% 40%,#000,transparent 72%)}
.fc-back::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#0006,#000a);pointer-events:none}
.fc-back>:not(.fc-frame){position:relative;z-index:1}
.fc-bk-hd{display:flex;align-items:center;gap:3cqw}
.fc-bk-hd .fc-emb{width:12cqw;height:12cqw;flex:none;color:var(--rc);filter:drop-shadow(0 0 2.5cqw var(--rc))}
.fc-bk-hd b{display:block;font-family:Cinzel;font-weight:900;font-size:5.6cqw;letter-spacing:.5cqw;line-height:1.05;color:#fff6e0;text-shadow:0 2px 4px #000}
.fc-bk-hd small{display:block;margin-top:.6cqw;font-family:Cinzel;font-size:2.8cqw;letter-spacing:.4cqw;color:#c8b98a}.fc-rr{color:var(--rc)}
.fc-type{display:flex;flex-wrap:wrap;align-items:center;gap:1cqw 2.4cqw;margin-top:3cqw;padding:1.4cqw 0;border-top:1px solid color-mix(in srgb,var(--rc) 45%,transparent);border-bottom:1px solid color-mix(in srgb,var(--rc) 45%,transparent);font-family:Cinzel;font-size:2.9cqw;letter-spacing:.3cqw;color:#e8c56a}
.fc-type span{flex:1;min-width:0}.fc-type em{font-style:normal;color:#f3e6c0}.fc-type strong{color:#fff6e0;font-weight:900}
.fc-abil{margin-top:2.6cqw;font-size:3.5cqw;line-height:1.3;color:#ece3d2}
.fc-abil p{margin:0 0 1.6cqw}.fc-abil b{font-family:Cinzel;font-size:3.1cqw;letter-spacing:.2cqw;color:#f7d978}.fc-abil .none{font-style:italic;color:#a8a299}
.fc-rule{display:flex;align-items:center;gap:2cqw;width:70%;margin:1.6cqw auto 2cqw;color:var(--rc);font-size:3cqw}.fc-rule i{flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--rc))}.fc-rule i:last-child{background:linear-gradient(270deg,transparent,var(--rc))}
.fc-lore{flex:1;min-height:0;overflow:hidden;font-style:italic;font-size:3.4cqw;line-height:1.38;color:#d9d0bf;text-align:center}
.fc-back.dense .fc-abil{font-size:3cqw;line-height:1.24}.fc-back.dense .fc-abil b{font-size:2.7cqw}.fc-back.dense .fc-lore{font-size:2.95cqw;line-height:1.3}
.fc-bk-foot{position:absolute!important;left:0;right:0;bottom:6cqw;display:flex;flex-direction:column;align-items:center;gap:.6cqw;text-align:center}
.fc-bk-foot b{font-family:Cinzel;font-size:2.8cqw;letter-spacing:1cqw;color:#c8b98a}.fc-bk-foot small{font-family:Cinzel;font-size:2.4cqw;letter-spacing:1cqw;color:#8a8478}
/* debajo de la carta */
.fc-side{display:flex;flex-direction:column;align-items:center;gap:10px}
.fc-hint{font-size:14px;font-style:italic;color:#a8a299;text-align:center}
.fc-bar{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px;font-size:14px;color:#d9d3c9}.fc-bar b{color:#f7d978}
.fc-bar .act{min-height:40px}
.fc-close{min-width:140px}
@media (orientation:landscape) and (max-height:560px){.fcveil{flex-direction:row;gap:20px}.fc-stage{width:calc((100vh - 30px)*5/7)}.fc-side{max-width:220px}}
@media (prefers-reduced-motion:reduce){.fc-card{transition:none;animation:none}.fc-fx .fr::before,.fc-fx .fz *,.fc-glint,.fc-card.r-mit .fc-front{animation:none!important}.fc-card.r-mit .fz .a{opacity:.8}}
/* ---------- CAMPAÑA (15/11): primero se elige Luz u Oscuridad, en grande ---------- */
.camp-pick{display:flex;flex-direction:column;align-items:center;gap:12px;padding-top:4px}
.camp-doors{height:clamp(360px,62vh,560px);max-width:560px}
.camp-door b{font-size:clamp(17px,5vw,30px)!important;letter-spacing:.1em!important;white-space:nowrap;margin-bottom:2px}
.camp-door .cd-prog{position:relative;font-family:Cinzel;font-size:12px;letter-spacing:1px;color:#f3e6c0;padding:0 8px;text-shadow:0 1px 2px #000}
.camp-door .cd-bar{position:relative;width:70%;height:5px;margin:8px 0 4px;border-radius:3px;background:#0008;border:1px solid #fff2;overflow:hidden}
.camp-door .cd-bar i{position:absolute;left:0;top:0;bottom:0;border-radius:3px}
.camp-door.luz .cd-bar i{background:linear-gradient(90deg,#8a5f0a,#f7d978,#fff6c8);box-shadow:0 0 8px #e8b93a}
.camp-door.osc .cd-bar i{background:linear-gradient(90deg,#4a0509,#e0484f,#ffb0a8);box-shadow:0 0 8px #e0484f}
.camp-door .cd-n{position:relative;font-size:12px;color:#bdb5a8;margin-bottom:10px}
.camp-door em{font-size:12px!important;padding:7px 18px!important}
.camp-hd{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;border:1px solid}
.camp-hd b{flex:1;text-align:right;white-space:nowrap;font-family:Cinzel;font-weight:900;font-size:clamp(16px,4.8vw,26px);letter-spacing:.12em}
.camp-hd.luz{border-color:#c9a24a88;background:linear-gradient(90deg,#0b0a0d,#2a200c);box-shadow:0 0 18px #e8b93a22}.camp-hd.luz b{color:#f7d978;text-shadow:0 0 12px #e8b93a88}
.camp-hd.osc{border-color:#c2242c88;background:linear-gradient(90deg,#0b0a0d,#2a0a0e);box-shadow:0 0 18px #e0484f22}.camp-hd.osc b{color:#ff8a8a;text-shadow:0 0 12px #e0484f88}

.fc-bk-wm{position:absolute!important;left:50%;bottom:16cqw;width:40cqw;height:40cqw;transform:translateX(-50%);z-index:0!important;opacity:.13;pointer-events:none}.fc-bk-wm .fc-emb{width:100%;height:100%;color:var(--rc)}
.fc-back.dense .fc-bk-wm,.fc-back.long .fc-bk-wm{display:none}
/* ---------- ARENA (15/11) ---------- */
.arena{max-width:640px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.ar-hd{display:flex;align-items:center;justify-content:space-between;padding:6px 0}
.ar-hd b{font-family:Cinzel;font-weight:900;letter-spacing:.3em;font-size:22px;color:#e8c56a;text-shadow:0 0 14px #e8b93a66}
.ar-hd span{width:80px}
.ar-box{background:linear-gradient(180deg,#14111a,#0b0a0e);border:1px solid #3a3242;border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:10px}
.ar-box h3{margin:0;font-family:Cinzel;letter-spacing:.12em;font-size:15px;color:#f3e6c0}
.ar-box p{margin:0;color:#bdb5a8;font-size:15px;line-height:1.35}
.ar-box input{font:inherit;font-size:16px;padding:12px;border-radius:10px;border:1px solid #4a4052;background:#07060a;color:#f3eee4}
.ar-err{color:#ff9a9a;background:#2a0a0e;border:1px solid #c2242c66;padding:10px;border-radius:10px;margin:0}
.ar-ok{color:#d8f0c0;background:#0e1a0a;border:1px solid #6a9a4a66;padding:10px;border-radius:10px;margin:0}
.ar-me{display:flex;flex-direction:column;align-items:center;gap:2px}.ar-me b{font-family:Cinzel;font-size:20px;color:#fff6e0}.ar-rec{font-size:13px;color:#a8a299}
.ar-deck{padding:10px;border-radius:10px;border:1px solid #5a4a2a}.ar-deck.osc{border-color:#6a2228}.ar-deck b{display:block;color:#fff6e0}.ar-deck small{color:#a8a299}
.ar-riv{display:flex;align-items:center;gap:10px;justify-content:space-between;padding:10px;border-radius:10px;background:#0e0c12;border-left:3px solid #c9a24a}
.ar-riv.osc{border-left-color:#c2242c}.ar-riv b{display:block;color:#fff6e0}.ar-riv small{color:#a8a299;font-size:13px}.ar-riv .act{flex:none}
.ar-tab{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:4px}
.ar-tab li{display:flex;gap:10px;align-items:center;padding:6px 8px;border-radius:8px;background:#0e0c12}.ar-tab li.yo{outline:1px solid #e8b93a}
.ar-tab span{width:22px;color:#e8c56a;font-family:Cinzel}.ar-tab b{flex:1;color:#f3eee4}.ar-tab em{font-style:normal;color:#a8a299}
.ar-row{display:flex;gap:10px;flex-wrap:wrap}
.ar-foot{display:flex;justify-content:space-between;align-items:center;color:#6e6860;font-size:12px;padding-bottom:20px}
.ar-envio{font-size:13px;color:#bdb5a8;margin-top:4px}