/* Chronicles of History — un solo foglio di stile per tutto il gioco.
 *
 * Sostituisce i cinque fogli sovrapposti di prima (style, astra, duel,
 * ascendant, cards), che si correggevano l'un l'altro a colpi di !important.
 *
 * La carta e' un componente solo: la stessa struttura HTML si legge a 50 pixel
 * sul campo e a 320 nella scheda di dettaglio, perche' tutte le misure interne
 * sono in cqw, percentuali della larghezza della carta stessa.
 */
:root{
 --bg:#090c18;--bg2:#0f1426;--ink:#f8edd5;--muted:#c3bccf;--dim:#8f89a3;
 --gold:#f0ce89;--gold2:#c9a25a;--line:#3d3857;--line2:#5d5378;
 --teal:#8fe3de;--crimson:#ff9fb3;--green:#9ff0bf;--red:#ff8b8b;
 --spell:#2f8f86;--trap:#a4476f;--mon:#b0763a;
 --serif:'Cormorant Garamond',Georgia,serif;--caps:'Cinzel','Cormorant Garamond',Georgia,serif;--comic:'Bangers','Impact',system-ui,sans-serif;--round:'Fredoka','Inter',system-ui,sans-serif;
 --z:92px;--safe-b:env(safe-area-inset-bottom,0px);
 color-scheme:dark;font-family:Inter,system-ui,sans-serif;color:var(--ink);background:var(--bg)
}
*{box-sizing:border-box}
html{min-height:100%;background:var(--bg)}
body{margin:0;min-height:100vh;background:radial-gradient(ellipse at 76% 8%,#40357040,transparent 45%),radial-gradient(ellipse at 10% 70%,#16435626,transparent 50%),var(--bg);isolation:isolate}
body:before{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.5;background-image:radial-gradient(circle at 17px 31px,#e6e6ff 0 1px,transparent 1.6px),radial-gradient(circle at 63px 13px,#edcf91 0 1px,transparent 1.7px),radial-gradient(circle at 91px 83px,#c0baff 0 .7px,transparent 1.5px);background-size:173px 191px,287px 239px,359px 317px}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer;background:#171b2e;border:1px solid var(--line2);border-radius:7px;padding:10px 14px;font-size:13px;transition:background .15s,border-color .15s,transform .15s,box-shadow .15s;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
button:hover:not(:disabled){background:#262a44;border-color:#cdb6ea}
button:active:not(:disabled){transform:translateY(1px)}
button:disabled{opacity:.38;cursor:not-allowed}
:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
input,select{background:#111728;border:1px solid var(--line2);border-radius:6px;padding:10px 12px;font-size:13px;max-width:100%}
h1,h2,h3,p{margin-top:0}
h1,h2{font-family:var(--serif);font-weight:600;line-height:1.02}
h2{font-size:32px;margin-bottom:10px}
p{line-height:1.6}
[hidden]{display:none!important}
.primary{background:linear-gradient(180deg,#f7d995,#e2b866);border-color:#ffe6b6;color:#1b1322;font-weight:700;box-shadow:0 4px 20px #d6b47624}
.primary:hover:not(:disabled){background:linear-gradient(180deg,#ffe7b3,#efc67a);border-color:#fff1d5}
.outline{background:#141930;border-color:#9c85b0}
.text-button{background:none;border:0;color:var(--gold);padding:8px 0}
.eyebrow{font-size:10px;letter-spacing:2.6px;color:var(--gold);font-weight:600;margin-bottom:14px}
.fine{font-size:11px;color:var(--dim);line-height:1.7}

/* ------------------------------------------------------------ la testata */
.topbar{height:64px;display:flex;align-items:center;justify-content:space-between;gap:10px;max-width:1500px;margin:auto;padding:0 max(16px,3vw) 0 max(122px,3vw);border-bottom:1px solid #8171a833;background:#090c18c4;position:relative;z-index:20}
.wordmark{display:flex;gap:11px;align-items:center;background:none;border:0;padding:0;font-family:var(--caps);letter-spacing:2px;font-size:19px;line-height:1}
.wordmark:hover:not(:disabled){background:none}
.wordmark small{display:block;letter-spacing:5px;margin-top:6px;font:600 8px Inter;color:var(--muted)}
.sigil{display:grid;place-items:center;width:34px;height:40px;border:1px solid var(--gold);font:600 28px var(--serif);color:#ffe2a6;background:#241d38;clip-path:polygon(0 0,100% 0,100% 80%,50% 100%,0 80%);box-shadow:0 0 24px #bc91ea22}
nav{display:flex;gap:4px;align-items:center}
nav button{background:none;border:0;color:var(--muted);padding:8px 9px;font-size:12px}
nav button:hover:not(:disabled){background:#ffffff0c;color:var(--ink)}
nav button[aria-pressed="false"]{opacity:.6;text-decoration:line-through;text-decoration-color:#ffffff55}
#motionBtn[aria-pressed="true"]{opacity:.6;text-decoration:line-through}
#motionBtn[aria-pressed="false"]{opacity:1;text-decoration:none}
nav span{color:var(--gold);font-size:11px;margin-left:4px}
nav b{font-weight:inherit}
nav .short{display:none}
.screen{max-width:1500px;margin:auto;padding:0 max(16px,3vw)}

/* --------------------------------------------------------------- il menu */
.hero{min-height:560px;display:grid;grid-template-columns:1.05fr 1fr;align-items:center;gap:30px;position:relative;isolation:isolate;overflow-x:clip}
.hero:before{content:'';position:absolute;inset:0 calc(-1 * max(16px,3vw));z-index:-1;background:linear-gradient(90deg,#090c18 18%,#090c18cc 45%,#090c1866 75%,#090c18aa),linear-gradient(0deg,#090c18,transparent 30%),url(./assets/bg_lobby.webp) center/cover no-repeat;opacity:.95}
.hero h1{font-size:clamp(46px,6.2vw,92px);letter-spacing:-1.5px;margin-bottom:22px}
.hero h1 em{font-weight:500;color:#f5d394;text-shadow:0 0 60px #ceadf444}
.lead{color:#ddd3e6;font-size:16px;max-width:520px}
.hero-actions{display:flex;gap:12px;margin-top:26px;flex-wrap:wrap}
.hero-actions button{padding:14px 20px;font-size:14px}
.hero-art{height:460px;position:relative;perspective:1100px}
.hero-art .card{position:absolute;width:210px;top:60px;box-shadow:0 30px 60px #000c;animation:float 7s ease-in-out infinite;pointer-events:none}
.hero-art .card:nth-child(1){left:2%;transform:rotate(-13deg);top:100px;animation-delay:-2s}
.hero-art .card:nth-child(2){left:31%;z-index:2;transform:rotate(3deg)}
.hero-art .card:nth-child(3){left:58%;top:115px;transform:rotate(15deg);animation-delay:-4s}
@keyframes float{50%{translate:0 -12px}}
.campaign{border-top:1px solid #8171a84d;padding:30px 0 40px}
.section-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.segmented{display:flex;gap:4px;background:#0b0f20;border:1px solid var(--line);padding:4px;border-radius:9px}
.segmented button{background:none;border-color:transparent;color:var(--muted);padding:8px 13px}
.segmented button.active{background:#322943;color:#ffe4a9;border-color:#9881af}
.campaign-options{display:flex;align-items:center;gap:14px;margin:14px 0 24px;flex-wrap:wrap}
.campaign-options label{font-size:13px;color:var(--muted);display:flex;align-items:center;gap:10px}
.campaign-options p{font-size:13px;color:var(--muted);margin:0;flex:1 1 280px;text-align:right}
.chapters{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.chapter{padding:0;position:relative;overflow:hidden;text-align:left;min-height:280px;border-color:#76618b;border-radius:10px;background:#111525}
.chapter img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 18%;opacity:.7;transition:scale .5s,opacity .3s}
.chapter:hover:not(:disabled) img{scale:1.06;opacity:.85}
.chapter:after{content:'';position:absolute;inset:0;background:linear-gradient(transparent 25%,#0a0d1cf2 88%)}
.chapter .chapter-content{position:absolute;bottom:14px;left:14px;right:14px;z-index:1}
.chapter .chapter-number{position:absolute;top:12px;left:12px;z-index:1;border:1px solid #d9c08a88;width:28px;height:28px;display:grid;place-items:center;background:#17100999;color:var(--gold);font:600 16px var(--serif);border-radius:4px}
.chapter .chapter-done{position:absolute;top:12px;right:12px;z-index:1;font-size:18px;color:var(--gold);text-shadow:0 0 10px #000}
.chapter h3{font:600 23px/1.02 var(--serif);margin:6px 0;color:#fff0d5}
.chapter p{font-size:11px;letter-spacing:.3px;margin:0;color:#e5d9ec;line-height:1.45}
.chapter .era{font-size:9px;letter-spacing:2px;color:var(--gold);font-weight:600}
.chapter .chapter-status{font-size:12px;color:var(--gold);margin-top:9px;font-weight:600}
.chapter .chapter-lp{font-size:10px;color:#ffb2bd;margin-top:4px;letter-spacing:.3px}
.chapter:disabled{opacity:.62}
.chapter:disabled img{filter:grayscale(.8) brightness(.6)}
.chapter.secret:disabled img{filter:grayscale(1) brightness(.25) blur(2px)}
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding:0 0 34px}
.pillars div{border:1px solid var(--line);border-radius:10px;padding:18px;background:#0f1324a8}
.pillars b{font:600 22px var(--serif);color:var(--gold)}
.pillars p{font-size:13px;color:var(--muted);margin:8px 0 0}
footer{padding:18px 0 30px;border-top:1px solid #8171a84d;display:flex;justify-content:space-between;gap:16px;font-size:11px;color:var(--dim)}

/* =============================================================== la carta
   Le misure interne sono frazioni della larghezza: 1cqw = 1% della carta. */
.card{--frame:#b0763a;--frame2:#6d4520;--plate:#f1e3c4;position:relative;display:flex;flex-direction:column;width:100%;aspect-ratio:5/7;container-type:inline-size;padding:0;border-radius:5.5% / 4%;border:1px solid #0008;
 background:linear-gradient(160deg,var(--frame),var(--frame2));box-shadow:0 5px 14px #0008,inset 0 0 0 1px #ffffff1c;color:#1f160d;text-align:left;overflow:hidden;isolation:isolate;transition:transform .18s,box-shadow .18s,filter .2s}
button.card{cursor:pointer}
button.card:hover:not(:disabled){background:linear-gradient(160deg,var(--frame),var(--frame2));transform:translateY(-3px)}
.card .c-in{position:absolute;inset:3.2cqw;display:flex;flex-direction:column;gap:1.4cqw}
.card .c-name{display:flex;align-items:center;gap:2cqw;height:12.5cqw;padding:0 2.4cqw;border-radius:1.6cqw;background:linear-gradient(180deg,#fbf3df,#e4d2ad);box-shadow:inset 0 0 0 .6cqw #0000002e}
.card .c-name b{flex:1;font:700 7.3cqw/1 var(--caps);letter-spacing:.1cqw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#1a120a}
.card .c-attr{flex:0 0 auto;width:9cqw;height:9cqw;border-radius:50%;display:grid;place-items:center;font-size:5.4cqw;color:#fff;background:var(--gem,#6b5a3a);box-shadow:inset 0 -.8cqw 1.6cqw #0006,0 0 0 .5cqw #0005;text-shadow:0 .3cqw .6cqw #0009}
.card .c-sub{height:7cqw;display:flex;align-items:center;justify-content:flex-end;gap:.4cqw;padding:0 1cqw;font:700 5.2cqw/1 var(--caps);color:#fff4d4;text-shadow:0 .3cqw .6cqw #000c;letter-spacing:.3cqw}
.card .c-sub i{font-style:normal;color:#ffc13b;font-size:6.2cqw;text-shadow:0 0 1.5cqw #ff9d0080,0 .3cqw .5cqw #000}
.card .c-art{position:relative;flex:0 0 auto;aspect-ratio:1/0.9;border-radius:1cqw;overflow:hidden;box-shadow:0 0 0 .7cqw #00000055,0 0 0 1.2cqw #ffffff22;background:#1d1a24}
.card .c-art img{width:100%;height:100%;object-fit:cover;object-position:50% 20%;display:block}
.card .c-type{font:700 4.8cqw/1.1 var(--caps);color:#2b1c0e;padding:0 1.2cqw;letter-spacing:.2cqw;margin-top:.4cqw}
.card .c-text{flex:1;min-height:0;overflow:hidden;background:linear-gradient(180deg,#f7ecd4,#ead9b4);border-radius:1.2cqw;padding:1.8cqw 2.4cqw;font:500 4.35cqw/1.3 Inter,system-ui;color:#2a1d10;box-shadow:inset 0 0 0 .5cqw #00000026}
.card .c-text .c-type{padding:0 0 1cqw;margin:0;font-size:4.4cqw}
.card .c-stats{display:flex;justify-content:flex-end;gap:4cqw;font:700 5.4cqw/1 var(--caps);color:#1f160d;padding:1.2cqw 1.6cqw 0;border-top:.5cqw solid #0000003a}
.card .c-stats .up{color:#0b6b36}.card .c-stats .down{color:#a01a1a}
/* le tre famiglie */
.card.monster{--frame:#c08a4a;--frame2:#6e4521}
.card.monster.token{--frame:#8d8a86;--frame2:#4a4744}
.card.spell{--frame:#2fa596;--frame2:#10514b}
.card.trap{--frame:#b75b88;--frame2:#5a1f3e}
.card.spell .c-sub,.card.trap .c-sub{font-size:4.8cqw}
/* ere: il colore della gemma */
.card[data-era="Antiquity"]{--gem:radial-gradient(circle at 35% 30%,#ffe49a,#c3861d)}
.card[data-era="Middle Ages"]{--gem:radial-gradient(circle at 35% 30%,#ff9e9e,#9e1f2b)}
.card[data-era="Renaissance"]{--gem:radial-gradient(circle at 35% 30%,#b6ffc8,#1f8a45)}
.card[data-era="Revolution"]{--gem:radial-gradient(circle at 35% 30%,#ffd1a6,#b4541c)}
.card[data-era="Modern"]{--gem:radial-gradient(circle at 35% 30%,#bfe6ff,#1e61b5)}
.card[data-era="Legend"]{--gem:radial-gradient(circle at 35% 30%,#e8c2ff,#6a24a8)}
.card.spell{--gem:radial-gradient(circle at 35% 30%,#b8fff3,#16786d)}
.card.trap{--gem:radial-gradient(circle at 35% 30%,#ffc3e0,#8f2a5c)}
/* rarita': rara con il nome argentato, leggendaria d'oro e olografica */
.card.rare .c-name{background:linear-gradient(180deg,#f6f8fc,#c9d0dc)}
.card.legend .c-name{background:linear-gradient(180deg,#fff3c4,#e1b44f)}
.card.legend .c-name b{color:#3a2400;text-shadow:0 .2cqw 0 #fff6}
.card.legend:before{content:'';position:absolute;inset:0;z-index:3;pointer-events:none;mix-blend-mode:screen;opacity:.42;border-radius:inherit;
 background:linear-gradient(115deg,transparent 28%,#ffe9a84d 42%,#b9e8ff40 50%,#ffc9f040 58%,transparent 72%);background-size:280% 280%;animation:holo 6.5s linear infinite}
@keyframes holo{from{background-position:0% 50%}to{background-position:200% 50%}}
.card.legend{box-shadow:0 6px 18px #0009,0 0 0 1px #ffe3a255,0 0 18px #e7b85a33}
/* il retro */
.card.back{background:#2a1a12 url(./assets/card_back_sm.webp) center/cover no-repeat;border-color:#3a2414}
.card.back .c-in{display:none}
.card.back.rv:after{content:'SEEN';position:absolute;top:4cqw;right:4cqw;font:700 7cqw Inter;color:#ffe29b;text-shadow:0 0 2cqw #000}
/* il velo dei riflessi quando la si inclina col puntatore */
.card:after{content:'';position:absolute;inset:0;z-index:4;pointer-events:none;border-radius:inherit;background:radial-gradient(90% 70% at var(--glare-x,50%) var(--glare-y,50%),#fff4d633,transparent 60%);opacity:0;transition:opacity .2s}
.card.tilting:after{opacity:1}
.card.tilting{transform:perspective(700px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)) translateY(-4px) scale(1.02);transition:transform .08s linear}
/* le carte piccole: niente testo, il nome solo se c'e' posto */
.card.mini .c-text,.card.mini .c-type{display:none}
.card.mini .c-art{flex:1;aspect-ratio:auto}
@container (max-width:120px){
 .card .c-text,.card .c-type{display:none}
 .card .c-art{flex:1;aspect-ratio:auto}
 .card .c-name{height:15cqw}.card .c-name b{font-size:9.5cqw}
 .card .c-attr{width:11cqw;height:11cqw;font-size:6.5cqw}
 .card .c-sub{height:9cqw}.card .c-sub i{font-size:8cqw}.card .c-sub{font-size:7cqw}
 .card .c-stats{font-size:9cqw;gap:5cqw;padding-top:1.5cqw}
}
@container (max-width:72px){
 .card .c-name,.card .c-sub{display:none}
 .card .c-stats{font-size:12cqw}
 .card .c-in{inset:4cqw;gap:2cqw}
}
/* le tue carte coperte: le vedi tu, ma si capisce che sono coperte */
.card.set-own{filter:brightness(.62) saturate(.55)}
.card.set-own:before{content:'SET';position:absolute;left:50%;top:50%;translate:-50% -50%;rotate:-18deg;z-index:5;font:800 14cqw/1 Inter;letter-spacing:1cqw;color:#ffe9b3;text-shadow:0 0 3cqw #000,0 0 1cqw #000;opacity:.9;pointer-events:none;background:none;animation:none;mix-blend-mode:normal}
.card.locked{filter:grayscale(1) brightness(.4)}
.card.locked .c-art img{filter:blur(3px)}
.card.playable{box-shadow:0 0 0 2px #ffe3a4,0 0 18px #ffd27a88}
.card.selected{box-shadow:0 0 0 3px #a1f2ed,0 0 30px #64d7d466}
.card.target{box-shadow:0 0 0 3px #ff8fb0,0 0 24px #ff6f9a99;animation:pulse 1s infinite}
.card.chosen{box-shadow:0 0 0 3px #9ff0bf,0 0 26px #57e39a99}
@keyframes pulse{50%{filter:brightness(1.25)}}

/* =============================================================== il tavolo */
.arena{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:18px;padding-bottom:20px;align-items:start}
.board{touch-action:manipulation;--z:clamp(56px,min(calc((100dvh - 272px) / 5.62),calc((100vw - 430px) / 7.5)),104px);display:flex;flex-direction:column;gap:5px;position:relative;border:1px solid #76618b;border-radius:14px;padding:8px 14px 6px;overflow:hidden;isolation:isolate;
 background:radial-gradient(ellipse at 50% 50%,#49345d22,transparent 70%),#0d1122;box-shadow:inset 0 0 90px #00000080,0 18px 50px #0006}
.board:before{content:'';position:absolute;inset:0;z-index:-1;background:url(./assets/playmat.webp) center/cover no-repeat;opacity:.55}
.duel-top{display:flex;justify-content:space-between;align-items:center;gap:10px;min-height:30px}
@media(min-width:761px){.board>.duel-top{display:none}}
.side-top{display:flex;flex-direction:column;gap:8px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.side-top h2{font-size:24px;margin:0}
.side-top .eyebrow{margin:0}
.side-top .duel-options button{flex:1}
.duel-top>div:first-child{display:flex;align-items:baseline;gap:12px;min-width:0}
.duel-top h2{font-size:19px;margin:0;white-space:nowrap}
.duel-top .eyebrow{margin:0;font-size:9px;white-space:nowrap}
.duel-options{display:flex;gap:6px}
.duel-options button{padding:7px 10px;font-size:11px}

.hud{display:flex;align-items:center;gap:10px;min-height:44px;padding:0 2px}
.hud .face{flex:0 0 auto;width:42px;height:42px;border-radius:50%;overflow:hidden;border:1px solid var(--gold2);background:#241d38;display:grid;place-items:center;font:600 22px var(--serif);color:var(--gold)}
.hud .face img{width:100%;height:100%;object-fit:cover;object-position:50% 15%}
.hud .who{min-width:0;flex:0 1 auto}
.hud .who b{display:block;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hud .who small{display:block;color:var(--dim);font-size:11px;margin-top:2px}
.hud .life{margin-left:auto;display:flex;align-items:center;gap:8px}
.hud .life img{width:22px;height:auto;filter:drop-shadow(0 0 6px #ff5c8a55)}
.hud .life b{font:700 30px/1 var(--serif);color:var(--gold);font-variant-numeric:tabular-nums;min-width:78px;text-align:right}
.hud.opp .life b{color:#ffb2bd}
.hud .bar{width:110px;height:5px;border-radius:3px;background:#2a2440;overflow:hidden}
.hud .bar{position:relative}
.hud .bar i,.hud .bar s{position:absolute;left:0;top:0;bottom:0;display:block;height:100%}
.hud .bar i{z-index:1;background:linear-gradient(90deg,#f7d995,#e2b866);transition:width .6s cubic-bezier(.2,.8,.2,1)}
.hud .bar s{background:#ff5c7a;transition:width .9s ease-in .15s}
.hud.opp .bar i{background:linear-gradient(90deg,#ff9fb3,#c84d6a)}
.hud .chips{display:none;gap:4px}
.hud .chip{font-size:11px;padding:3px 7px;border-radius:999px;background:#ffffff10;border:1px solid #ffffff1c;color:var(--muted);white-space:nowrap}
.hud.turn .face{box-shadow:0 0 0 2px var(--gold),0 0 20px #f0ce8988}
.hud .ohand{display:flex;gap:3px;margin-left:auto}
.hud .ohand i{width:19px;height:27px;border-radius:2px;background:url(./assets/card_back_sm.webp) center/cover;box-shadow:0 2px 5px #0008}
.hud .ohand+.life{margin-left:14px}

.field{display:flex;flex-direction:column;gap:6px}
.row{display:grid;grid-template-columns:var(--z) 1fr var(--z);gap:8px;align-items:center}
.zones{display:grid;grid-template-columns:repeat(5,var(--z));gap:8px;justify-content:center}
.zone,.pile{position:relative;width:var(--z);height:var(--z);border-radius:8px;border:1px dashed #6d5f8a66;background:#0b0f1f99;display:grid;place-items:center}
.zone:before{content:attr(data-label);position:absolute;font:600 9px Inter;letter-spacing:1.5px;color:#8f86a866}
.row.st .zone{background:#0b0f1f66;border-color:#6d5f8a44}
.zone>.card{width:calc(var(--z) * .714);height:auto}
.zone.def>.card{rotate:-90deg}
.zone.clickable{cursor:pointer}
.zone.clickable:hover{border-color:#cdb6ea}
.zone .stat{position:absolute;left:50%;bottom:-7px;translate:-50% 0;z-index:5;display:flex;gap:4px;font:700 11px/1 Inter;background:#0a0d1cee;border:1px solid #6d5f8a;border-radius:6px;padding:3px 5px;white-space:nowrap;pointer-events:none;font-variant-numeric:tabular-nums}
.zone .stat .on{color:#fff}.zone .stat .off{color:#8f86a8}
.zone .stat .up{color:var(--green)}.zone .stat .down{color:var(--red)}
.zone .marks{position:absolute;top:-6px;right:-6px;z-index:6;display:flex;gap:2px}
.zone .marks i{font-style:normal;font-size:11px;background:#1b1530;border:1px solid #6d5f8a;border-radius:50%;width:19px;height:19px;display:grid;place-items:center}
.zone.can-attack>.card{box-shadow:0 0 0 2px #ffcf6e,0 0 16px #ffb13b88}
.zone.spent>.card{filter:saturate(.55) brightness(.8)}
.zone.negated>.card{filter:grayscale(.9) brightness(.8)}
.zone.armed>.card.back{box-shadow:0 0 0 1px #ffe3a4aa,0 0 10px #ffcf6e55}
.pile{border-style:solid;border-color:#6d5f8a55;cursor:pointer;background:#0b0f1fcc}
.pile .count{position:absolute;bottom:-7px;left:50%;translate:-50% 0;font:700 11px Inter;background:#0a0d1cee;border:1px solid #6d5f8a;border-radius:6px;padding:2px 6px;z-index:2}
.pile .lbl{font:600 9px Inter;letter-spacing:1.4px;color:#8f86a8}
.pile>.card{width:calc(var(--z) * .714)}
.pile.deck>.card{box-shadow:1px 1px 0 #2a1a12,2px 2px 0 #1e120c,3px 3px 6px #0009}
.pile.fieldzone{border-style:dashed}

.phasebar{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;margin:3px 0;padding:5px 8px;border-block:1px solid #8d729b66;background:linear-gradient(90deg,transparent,#171430cc 20%,#171430cc 80%,transparent)}
.phases{display:flex;gap:4px;align-items:center}
#phases{display:flex;gap:4px}
.turnno{font:700 12px Inter;color:var(--gold);letter-spacing:1px;margin-right:6px}
#phases span{font:700 10px Inter;letter-spacing:.5px;color:#7f7898;border:1px solid #3d3857;padding:4px 6px;border-radius:5px}
#phases span.on{color:#1b1322;background:var(--gold);border-color:var(--gold)}
#phases span.past{color:#b3abc8}
.phase-actions{display:flex;gap:6px;justify-content:flex-end}
.phase-actions button{padding:8px 12px;font-size:12px;min-height:36px}
.instruction{margin:0;font-size:12px;line-height:1.3;color:var(--muted);text-align:center;min-width:0}
.hand{display:flex;justify-content:center;gap:8px;padding:6px 4px 4px;min-height:calc(var(--z) * 1.62)}
.hand>.card{flex:0 0 calc(var(--z) * 1.12);width:calc(var(--z) * 1.12)}
.hand>.card:hover:not(:disabled){transform:translateY(-10px);z-index:3}
.hand>.card.arriving{animation:draw-in .65s cubic-bezier(.2,.8,.2,1) both}
@keyframes draw-in{from{opacity:0;transform:translateY(40px) scale(.8)}}

/* ------------------------------------------------------ la colonna destra */
.side{position:sticky;top:8px;display:flex;flex-direction:column;gap:12px;max-height:calc(100dvh - 24px);overflow:auto;border:1px solid #76618b;border-radius:14px;padding:16px;background:#13182bf2;scrollbar-width:thin}
#closeDetail,#detailScrim{display:none}
.inspect .card{width:min(250px,100%);margin:0 auto 12px}
.inspect h2{font-size:28px;margin:0 0 6px}
.inspect .meta{font-size:11px;letter-spacing:1.2px;color:var(--gold);font-weight:600;margin-bottom:8px}
.inspect .fx{font-size:14px;line-height:1.55;color:#f3e9df;margin-bottom:8px}
.inspect .lore{font-size:12px;color:var(--muted);border-top:1px solid var(--line);padding-top:8px;font-style:italic}
.inspect .now{font-size:12px;color:var(--teal);margin-bottom:8px}
.inspect .empty h2{font-size:26px}
.inspect .empty p{font-size:13px;color:var(--muted)}
.card-actions{display:grid;gap:7px}
.card-actions button{min-height:42px;font-size:13px;text-align:left;display:flex;justify-content:space-between;align-items:center;gap:8px}
.card-actions button small{color:#6d5a78;font-size:11px;font-weight:500}
.card-actions .primary small{color:#5c4520}
.card-actions .hint{font-size:12px;color:var(--muted);margin:2px 0}
.chain-panel h3,.battle-log h3{font-size:10px;letter-spacing:2px;color:var(--gold);margin:4px 0 8px}
.chain-panel ol{list-style:none;padding:0;margin:0;display:flex;flex-direction:column-reverse;gap:6px}
.chain-panel li{display:flex;align-items:center;gap:8px;font-size:12px;padding:6px;border:1px solid var(--line2);border-radius:8px;background:#1a1733}
.chain-panel li .card{width:34px;flex:0 0 34px}
.chain-panel li b{color:var(--gold);font:700 16px var(--serif);width:18px;text-align:center}
.chain-panel li.neg{opacity:.5;text-decoration:line-through}
.battle-log ol{list-style:none;padding:0;margin:0;max-height:240px;overflow:auto}
.battle-log li{font-size:12px;color:var(--muted);padding:6px 0;border-bottom:1px solid #2a2542;line-height:1.45}
.battle-log li:first-child{color:var(--ink)}

/* ------------------------------------------------- risposta e scelta ---- */
#respond{position:fixed;left:50%;bottom:max(14px,var(--safe-b));translate:-50% 0;z-index:90;width:min(700px,calc(100vw - 20px));padding:16px;border-radius:16px;
 background:linear-gradient(180deg,#1b1630f7,#0e0c1ef9);border:1px solid #f0ce8977;box-shadow:0 24px 70px -10px #000,0 0 0 1px #000a;animation:rise .3s cubic-bezier(.2,.9,.3,1) both}
@keyframes rise{from{opacity:0;translate:-50% 24px}}
@media(min-width:761px){
 /* sul computer la domanda si posa sopra la colonna destra: il tavolo resta tutto visibile */
 #respond{left:auto;right:max(16px,calc((100vw - 1500px) / 2 + 3vw));translate:none;width:330px;bottom:16px;animation:rise-side .3s cubic-bezier(.2,.9,.3,1) both}
 .resp-card{width:104px}
}
@keyframes rise-side{from{opacity:0;transform:translateY(24px)}}
.resp-head{text-align:center;margin-bottom:10px}
.resp-head .eyebrow{margin:0 0 5px;color:var(--crimson)}
.resp-head h3{margin:0;font:600 20px/1.25 var(--serif)}
.resp-cards{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:12px}
.resp-card{width:118px;display:flex;flex-direction:column;gap:6px;align-items:stretch}
.resp-card .card{cursor:pointer}
.resp-card button{padding:7px;font-size:12px}
.resp-foot{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.resp-clock{flex:1;height:5px;border-radius:3px;background:#ffffff1c;overflow:hidden;min-width:80px}
.resp-clock i{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--gold),#ff6f8a);transition:width .1s linear}
.resp-auto{font-size:11px;color:var(--muted);display:flex;gap:6px;align-items:center}
#chooser{position:fixed;left:50%;top:max(10px,env(safe-area-inset-top,0px));translate:-50% 0;z-index:95;display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;width:min(620px,calc(100vw - 20px));
 background:#182338f5;border:1px solid #a8e9ec;box-shadow:0 12px 40px #000b;font-size:13px}
#chooser span{flex:1}
#chooser button{min-height:38px}
body.choosing .board{box-shadow:inset 0 0 90px #00000080,0 0 0 2px #8fe3de55}
/* l'attacco diretto: il ritratto dell'avversario e' il bersaglio */
.hud.opp.target{cursor:pointer}
.hud.opp.target .face{box-shadow:0 0 0 3px #ff8fb0,0 0 26px #ff6f9a;animation:pulse 1s infinite}
.hud.opp.target .life b{color:#ff8fb0;text-shadow:0 0 14px #ff6f9a}

/* -------------------------------------------------------------- finestre */
dialog{border:1px solid #76618b;background:#13182bf7;color:var(--ink);border-radius:14px;padding:24px;max-width:min(1100px,95vw);max-height:90dvh;box-shadow:0 30px 100px #000c}
#library,#builder,#picker,#pileView{width:min(1100px,95vw)}
#help{width:min(900px,95vw)}
#picker{width:min(820px,95vw)}
dialog::backdrop{background:#05061398;backdrop-filter:blur(6px)}
.dialog-top{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px}
.dialog-top h2{margin:0}
.dialog-top .eyebrow{margin-bottom:6px}
.dialog-foot{display:flex;justify-content:flex-end;margin-top:14px}
.filters{display:flex;gap:10px;margin-bottom:16px;flex-wrap:wrap}
.filters input{flex:1 1 220px}
.library-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:14px}
.library-grid .pick{position:relative}
.picker-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
.copies{position:absolute;top:-7px;left:-7px;z-index:6;min-width:24px;height:24px;padding:0 6px;border-radius:12px;display:grid;place-items:center;font:700 12px/1 Inter;color:#1a130c;background:linear-gradient(180deg,#f3d79a,#cfa457);border:1px solid #7d6033;box-shadow:0 2px 6px #0008}
.copies.locked-tag{left:auto;right:-7px;background:linear-gradient(180deg,#5d5266,#3a3242);color:#cfc3d8;border-color:#6b5d78}
.card.maxed{opacity:.4;filter:saturate(.4)}
.limit-tag{position:absolute;bottom:6px;right:6px;z-index:6;font:700 10px Inter;background:#7a1f3a;color:#ffd9e2;border-radius:4px;padding:2px 5px;letter-spacing:.5px}
.rules-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.rules-grid b{font:600 22px var(--serif);color:var(--gold)}
.rules-grid p{font-size:13.5px;color:#ddd1e7;margin-top:6px}
.builder-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:10px}
.builder-bar input{flex:1 1 190px;min-width:0}
.deck-count{font:600 12px Inter;letter-spacing:.5px;color:#d7c6a2;border:1px solid #57452e;border-radius:999px;padding:7px 12px;white-space:nowrap}
.deck-count.full{color:#0f1a12;background:#8fd7a8;border-color:#8fd7a8}
#deckHint{margin:0 0 12px;min-height:16px}
.deck-strip{display:flex;gap:10px;overflow-x:auto;padding:8px 2px 12px;min-height:118px;margin-bottom:14px;border-bottom:1px solid var(--line)}
.deck-strip:empty:after{content:'The codex is empty. Pick cards below, or fill it at random.';color:var(--dim);font-size:12px;align-self:center}
.deck-strip .pick{flex:0 0 76px;position:relative}
#result{text-align:center;min-width:min(620px,92vw);padding:40px 26px}
#result h1{font-size:76px;color:var(--gold);margin:0 0 14px}
#result.lost h1{color:#ffb2bd}
#result p{font-size:14px;color:var(--muted)}
.reward-cards{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin:6px 0 18px;perspective:900px}
.reward-cards .card{width:120px;animation:reward-flip .8s cubic-bezier(.2,.8,.2,1) both}
.reward-cards .card:nth-child(2){animation-delay:.15s}.reward-cards .card:nth-child(3){animation-delay:.3s}.reward-cards .card:nth-child(4){animation-delay:.45s}.reward-cards .card:nth-child(5){animation-delay:.6s}.reward-cards .card:nth-child(6){animation-delay:.75s}
@keyframes reward-flip{from{transform:rotateY(180deg) scale(.7);opacity:0}60%{opacity:1}}
.result-actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
#waiting{text-align:center;max-width:600px;margin:60px auto 120px}
#waiting p{font-size:14px;color:var(--muted)}
.waiting-sigil{font:70px var(--serif);color:var(--gold);margin-bottom:18px}
.invite{display:flex;gap:10px;margin:20px 0}
.invite input{flex:1;min-width:0}
#toast{position:fixed;bottom:22px;left:50%;translate:-50% 12px;background:#27223e;color:#fff2df;border:1px solid #ad93c8;padding:12px 20px;border-radius:9px;z-index:200;opacity:0;pointer-events:none;transition:.2s;max-width:92vw;font-size:13px;box-shadow:0 8px 30px #000a}
#toast.show{opacity:1;translate:-50% 0}

/* ============================================================= la scena
   Dal 2026-10-21 quasi tutto si muove con le Web Animations (effects.js):
   qui ci sono solo le forme. Le poche animazioni CSS rimaste sono quelle che
   girano da sole (moneta, stelline, puntini del pensiero). */
#fx{position:fixed;inset:0;z-index:80;pointer-events:none;overflow:hidden}
#fx>*{position:absolute;pointer-events:none}
.fx-hold{opacity:0!important}
.zone.fx-pending>*{opacity:0!important}
.banner{left:50%;top:38%;transform:translate(-50%,-50%);width:min(580px,94vw);display:flex;align-items:center;justify-content:center;gap:16px;text-align:center;padding:18px 14px;border-block:1px solid #dfc5ed66;background:linear-gradient(90deg,transparent,#111026f2 20%,#111026f2 80%,transparent);z-index:27}
.banner img{width:58px;height:58px;border-radius:50%;object-fit:cover;object-position:50% 15%;border:2px solid var(--c,#f0ce89);box-shadow:0 0 24px var(--c,#f0ce89)}
.banner small{display:block;color:var(--c,#f0ce89);font:700 11px Inter;letter-spacing:4px;margin-bottom:6px}
.banner strong{display:block;font:600 30px/1.1 var(--serif);color:#fff0d8;text-shadow:0 0 24px var(--c,#f0ce89)}
.banner.turn strong{font-size:40px;letter-spacing:1px}
.banner.legend{top:78%;background:linear-gradient(90deg,transparent,#1a1206f2 20%,#1a1206f2 80%,transparent);border-color:#f4d39188}
.banner.battle strong{font-family:var(--comic);letter-spacing:3px;font-size:38px;color:#f0e4ff}
.projection{left:50%;top:44%;transform:translate(-50%,-50%);width:min(230px,52vw);filter:drop-shadow(0 0 40px var(--c,#e4b77366));z-index:26}
.flyer,.standin,.shard,.lift{transform:translate(-50%,-50%);z-index:3}
.flyer .rot,.standin .rot,.shard .rot{position:relative}
.rot.def{rotate:-90deg}
.flyer.mini{width:34px;z-index:4}
.lift{width:46px;z-index:6;filter:drop-shadow(0 0 12px #ff9fb3)}
.standin{z-index:2}
.shard{z-index:22}
.spark{width:4px;height:13px;border-radius:50%;background:var(--c,#ffe7a7);box-shadow:0 0 9px var(--c,#ffe7a7);z-index:23}
.ring{border:2px solid var(--c,#f6d491);border-radius:50%;box-shadow:0 0 22px var(--c,#f6d491),inset 0 0 14px var(--c,#f6d491);z-index:21}
.puff{border-radius:50%;background:var(--c,#e8dcc0);opacity:.85;z-index:20;filter:blur(.5px)}
.ico{z-index:24;transform:translate(-50%,-50%)}
.ico svg{width:100%;height:100%;display:block;overflow:visible;filter:drop-shadow(0 2px 3px #0008)}
.ico.big svg{filter:drop-shadow(0 0 18px #9fd0ff) drop-shadow(0 4px 6px #000a)}
.ico.pop{animation:ico-pop 1s cubic-bezier(.3,1.6,.5,1) both}
@keyframes ico-pop{0%{transform:translate(-50%,-50%) scale(.2);opacity:0}25%{transform:translate(-50%,-50%) scale(1.15);opacity:1}75%{opacity:1}100%{transform:translate(-50%,-50%) scale(1);opacity:0}}
.glyph{transform:translate(-50%,-50%);font:700 26px/1 var(--serif);color:var(--c,#fff);text-shadow:0 0 10px var(--g,#b99cff),0 0 22px var(--g,#b99cff),0 2px 0 #000;z-index:24;white-space:nowrap}
.glyph.warp{font-style:italic;letter-spacing:1px}
.slash{height:7px;border-radius:50%;background:linear-gradient(90deg,transparent,var(--c,#fff7d8) 30%,#fff 50%,var(--c,#fff7d8) 70%,transparent);box-shadow:0 0 14px var(--g,#fff0b5),0 0 34px var(--g,#cfafff);z-index:24}
.beam{height:14px;transform-origin:0 50%;z-index:23;border-radius:8px;background:linear-gradient(180deg,transparent,var(--c) 35%,#fff 50%,var(--c) 65%,transparent);box-shadow:0 0 18px var(--g),0 0 40px var(--g)}
.beam.bolt{border-radius:0;background:none;box-shadow:none;filter:drop-shadow(0 0 8px var(--g)) drop-shadow(0 0 18px var(--g));
 --zz:linear-gradient(135deg,transparent 40%,var(--c) 41% 59%,transparent 60%) 0 0/24px 100%,linear-gradient(45deg,transparent 40%,var(--c) 41% 59%,transparent 60%) 12px 0/24px 100%;background:var(--zz)}
.ray{width:10px;height:120px;transform-origin:50% 0;background:linear-gradient(180deg,var(--c,#ffd56a),transparent);z-index:21;border-radius:5px;filter:blur(1px)}
.pillar{width:110px;height:120vh;transform-origin:50% 100%;background:linear-gradient(0deg,#fffbe8,#ffe39a99 30%,#ffd98a33 70%,transparent);-webkit-mask:linear-gradient(90deg,transparent,#000 38%,#000 62%,transparent);mask:linear-gradient(90deg,transparent,#000 38%,#000 62%,transparent);filter:blur(3px);z-index:4;mix-blend-mode:screen}
.veil{inset:0;background:radial-gradient(ellipse at 50% 45%,#1a1206aa,#000c 70%);z-index:3}
.kapow{transform:translate(-50%,-50%);z-index:29;white-space:nowrap;font:400 40px/1 var(--comic);letter-spacing:1px;color:#fff;
 -webkit-text-stroke:2px #2b1c0e;paint-order:stroke fill;text-shadow:0 3px 0 #2b1c0e,0 0 0 var(--c),3px 3px 0 var(--c),5px 6px 0 #2b1c0e,0 0 30px var(--c)}
.kapow.t0{font-size:24px;color:#eef1f7}.kapow.t1{font-size:32px;color:#fff6c8}.kapow.t2{font-size:42px;color:#ffe6a0}
.kapow.t3{font-size:56px;color:#ffd08a}.kapow.t4{font-size:70px;color:#ffb3a0;letter-spacing:2px}.kapow.t5{font-size:84px;color:#f3d9ff;letter-spacing:3px}
.bubble{transform:translate(-50%,-100%);z-index:30;background:#fffdf6;color:#2b1c0e;border:2.5px solid #2b1c0e;border-radius:18px;padding:7px 13px 8px;font:600 14px/1.25 var(--round);box-shadow:3px 4px 0 #2b1c0e55,0 8px 24px #0007;text-align:center;width:max-content;max-width:240px}
.bubble:after{content:'';position:absolute;left:50%;bottom:-11px;width:16px;height:16px;background:#fffdf6;border:2.5px solid #2b1c0e;border-top:0;border-left:0;transform:translateX(-50%) rotate(45deg);border-bottom-right-radius:4px}
.bubble.big{font-size:17px;padding:9px 16px 10px;max-width:300px}
.bubble.small{font-size:12px;padding:5px 10px 6px}
.tag{transform:translate(-50%,-50%);font:700 13px Inter;letter-spacing:1px;color:#1b1322;background:var(--c,#9ff0bf);border-radius:6px;padding:4px 8px;box-shadow:0 4px 18px #000a;z-index:28;white-space:nowrap}
.tag.big{font:400 34px/1 var(--comic);letter-spacing:3px;padding:6px 16px 4px;border:3px solid #2b1c0e;box-shadow:4px 5px 0 #2b1c0e}
.tag.small{font-size:10px;padding:3px 6px}
.number{transform:translate(-50%,-50%);font:400 40px/1 var(--comic);letter-spacing:1px;color:var(--c,#ffd1c7);-webkit-text-stroke:2px #3a1410;paint-order:stroke fill;text-shadow:0 3px 0 #3a1410,0 0 24px var(--c,#f76e65);z-index:31;white-space:nowrap}
.number.heal{color:#bcffe5;-webkit-text-stroke-color:#0f4030;text-shadow:0 3px 0 #0f4030,0 0 22px #66e8b9}
.number.stage{z-index:30}
.flash{inset:0;background:radial-gradient(circle at var(--x,50%) var(--y,45%),#fff6dcee,#ffb06a66 25%,transparent 60%);z-index:25}
.impact-frame{inset:0;background:#fff;mix-blend-mode:difference;z-index:55}
.speedlines{width:200vmax;height:200vmax;z-index:24;border-radius:50%;
 background:repeating-conic-gradient(from 0deg,#fff 0deg 1.4deg,transparent 1.4deg 7deg);-webkit-mask:radial-gradient(circle,transparent 16%,#000 34%,transparent 60%);mask:radial-gradient(circle,transparent 16%,#000 34%,transparent 60%)}
.whiteout{inset:0;background:radial-gradient(circle at 50% 46%,#fff,#fff3c4 40%,#ffb86b99 70%,#0000);z-index:45}
.miasma{width:220px;height:140px;border-radius:50%;background:radial-gradient(closest-side,#7dbf5a99,#2f4a2066,transparent);filter:blur(6px);z-index:23;transform:translate(-50%,-50%)}
.meteor{width:26px;height:26px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff,#ffcf6e 40%,#ff6a2a);box-shadow:0 0 30px #ff8a3d,30px -30px 40px 6px #ff8a3d66;z-index:27}
.bullet{width:22px;height:5px;border-radius:3px;background:#ffe9a8;box-shadow:0 0 12px #ffd27a,-30px 0 20px 2px #ffd27a77;z-index:27}
.vortex{width:150px;height:150px;border-radius:50%;z-index:24;background:conic-gradient(from 0deg,#6fd3ff00,#6fd3ffcc,#b99cff00,#6fd3ffcc,#6fd3ff00);-webkit-mask:radial-gradient(circle,transparent 12%,#000 30%,#0000 70%);mask:radial-gradient(circle,transparent 12%,#000 30%,#0000 70%)}
.rune{left:50%;top:44%;width:min(340px,80vw);aspect-ratio:1;border-radius:50%;z-index:25;border:2px solid var(--c);box-shadow:0 0 30px var(--c),inset 0 0 30px var(--c);
 background:repeating-conic-gradient(from 0deg,transparent 0 10deg,color-mix(in srgb,var(--c) 40%,transparent) 10deg 11deg);-webkit-mask:radial-gradient(circle,transparent 58%,#000 60%,#000 70%,transparent 72%,transparent 84%,#000 86%);mask:radial-gradient(circle,transparent 58%,#000 60%,#000 70%,transparent 72%,transparent 84%,#000 86%)}
.cross{width:90px;height:90px;z-index:27;background:linear-gradient(45deg,transparent 44%,#ff5c7a 45% 55%,transparent 56%),linear-gradient(-45deg,transparent 44%,#ff5c7a 45% 55%,transparent 56%);filter:drop-shadow(0 0 10px #ff5c7a)}
.mote{width:8px;height:8px;border-radius:50%;background:#ffe9a8;box-shadow:0 0 10px #f4d391,0 0 20px #f4d391;z-index:24}
.exclaim{transform:translate(-50%,-100%);z-index:29;font:400 38px/1 var(--comic);color:#ffe14d;-webkit-text-stroke:2px #2b1c0e;paint-order:stroke fill;text-shadow:3px 3px 0 #2b1c0e}
.dizzy{width:64px;height:24px;transform:translate(-50%,-50%) scaleY(.5);z-index:27}
.dizzy svg{position:absolute;left:50%;top:50%;width:18px;height:18px;margin:-9px;animation:orbit 1s linear infinite}
.dizzy svg:nth-child(2){animation-delay:-.33s}.dizzy svg:nth-child(3){animation-delay:-.66s}
@keyframes orbit{from{transform:rotate(0) translateX(28px) rotate(0) scaleY(2)}to{transform:rotate(360deg) translateX(28px) rotate(-360deg) scaleY(2)}}
.soul{z-index:27}
.aim{height:40px;transform-origin:0 50%;z-index:22;filter:drop-shadow(0 0 8px var(--c))}
.aim svg{display:block;overflow:visible}
.aim .shaft{stroke:var(--c);stroke-width:6;stroke-linecap:round;stroke-dasharray:14 10;fill:none;animation:march .6s linear infinite}
.aim .head{fill:var(--c);stroke:#2b1c0e;stroke-width:2}
@keyframes march{to{stroke-dashoffset:-24}}
.reticle{width:70px;height:70px;z-index:22;border-radius:50%;border:3px dashed var(--c);box-shadow:0 0 16px var(--c);
 background:radial-gradient(circle,var(--c) 0 3px,transparent 4px),linear-gradient(var(--c),var(--c)) 50% 0/3px 14px no-repeat,linear-gradient(var(--c),var(--c)) 50% 100%/3px 14px no-repeat,linear-gradient(var(--c),var(--c)) 0 50%/14px 3px no-repeat,linear-gradient(var(--c),var(--c)) 100% 50%/14px 3px no-repeat}
.thinking{transform:translate(-50%,-100%);z-index:30;display:flex;gap:5px;padding:9px 12px;border-radius:16px;background:#fffdf6;border:2.5px solid #2b1c0e;box-shadow:3px 4px 0 #2b1c0e55}
.thinking:after{content:'';position:absolute;left:50%;bottom:-8px;width:10px;height:10px;background:#fffdf6;border:2.5px solid #2b1c0e;border-top:0;border-left:0;transform:translateX(-50%) rotate(45deg)}
.thinking i{width:8px;height:8px;border-radius:50%;background:#2b1c0e;animation:think 1s ease-in-out infinite}
.thinking i:nth-child(2){animation-delay:.15s}.thinking i:nth-child(3){animation-delay:.3s}
@keyframes think{0%,60%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-5px);opacity:1}}
.zone.marked>.card{animation:marked .45s ease-in-out 3 alternate}
@keyframes marked{to{box-shadow:0 0 0 3px #ff6f8a,0 0 26px #ff6f8acc;filter:brightness(1.25)}}
/* il palco dello scontro */
.stage{inset:0;z-index:5;display:grid;place-items:center}
.st-bg{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 50%,#2a1d4ad9,#07081aee 70%)}
.stage.theirs .st-bg{background:radial-gradient(ellipse at 50% 50%,#4a1d32d9,#12060cee 70%)}
.st-lines{position:absolute;left:50%;top:50%;width:160vmax;height:160vmax;transform:translate(-50%,-50%);border-radius:50%;
 background:repeating-conic-gradient(from 0deg,#ffffff1a 0deg 1deg,transparent 1deg 6deg);-webkit-mask:radial-gradient(circle,transparent 18%,#000 40%);mask:radial-gradient(circle,transparent 18%,#000 40%);animation:spin 18s linear infinite}
@keyframes spin{to{transform:translate(-50%,-50%) rotate(360deg)}}
.st-row{position:relative;display:flex;align-items:center;justify-content:center;gap:min(14vw,150px);width:100%;padding:0 4vw}
.fighter{position:relative;display:flex;flex-direction:column;align-items:center;gap:10px;width:min(210px,34vw)}
.fighter .fcard{width:100%}
.fighter .fcard .card{width:100%;box-shadow:0 20px 50px #000c,0 0 0 2px #ffffff22}
.fighter.left .fcard .card{box-shadow:0 20px 50px #000c,0 0 34px #f0ce8955}
.who-tag{font:700 10px Inter;letter-spacing:3px;color:var(--gold);text-shadow:0 2px 6px #000}
.plate{display:flex;align-items:baseline;gap:7px;padding:5px 14px;border-radius:999px;background:#0a0d1cee;border:1px solid #6d5f8a;box-shadow:0 6px 18px #000a;transition:transform .3s,box-shadow .3s,opacity .3s}
.plate small{font:700 11px Inter;letter-spacing:2px;color:var(--muted)}
.plate b{font:700 30px/1 var(--serif);color:#fff;font-variant-numeric:tabular-nums}
.plate.win{transform:scale(1.15);border-color:#9ff0bf;box-shadow:0 0 24px #57e39a99}
.plate.win b{color:#c9ffe0}
.plate.lose{opacity:.75;border-color:#ff8b8b;box-shadow:0 0 18px #ff6f8a88}
.plate.lose b{color:#ff9fb3;text-decoration:line-through;text-decoration-thickness:3px}
.portrait{width:100%;aspect-ratio:1;border-radius:50%;overflow:hidden;border:3px solid var(--gold);background:#241d38;display:grid;place-items:center;box-shadow:0 0 40px #f0ce8955}
.portrait img{width:100%;height:100%;object-fit:cover;object-position:50% 15%}
.portrait span{font:600 90px var(--serif);color:var(--gold)}
.vs{position:absolute;left:50%;top:44%;font:400 64px/1 var(--comic);color:#ffe14d;-webkit-text-stroke:3px #2b1c0e;paint-order:stroke fill;text-shadow:4px 5px 0 #2b1c0e,0 0 40px #ff8a3d;z-index:3}
.st-out{position:absolute;left:50%;top:84%;transform:translate(-50%,-50%);font:400 44px/1 var(--comic);letter-spacing:2px;white-space:nowrap;color:var(--c,#f0ce89);-webkit-text-stroke:2px #1a1020;paint-order:stroke fill;text-shadow:3px 4px 0 #1a1020,0 0 30px var(--c);z-index:4}
.st-out:empty{display:none}
/* la cronaca */
#ticker{position:fixed;z-index:85;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:3px;pointer-events:none;opacity:0;transition:opacity .4s}
#ticker.on{opacity:1}
.tk-line{max-width:100%;font:600 12.5px/1.3 Inter;color:#f8edd5;background:#0b0e1fe6;border:1px solid #6d5f8a;border-radius:999px;padding:5px 13px;box-shadow:0 6px 18px #0008;animation:tk-in .35s cubic-bezier(.2,.9,.3,1.2) both;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tk-line.mine{border-color:#f0ce8999;color:#ffe9b8}
.tk-line.theirs{border-color:#ff9fb399;color:#ffd6de}
.tk-line:not(:last-child){opacity:.5;transform:scale(.94);font-size:11px;padding:3px 11px}
@keyframes tk-in{from{opacity:0;transform:translateY(8px) scale(.9)}}
/* accelerare la scena e' una scelta: il pulsante compare solo mentre qualcosa va in scena */
#skipBtn{position:fixed;right:14px;bottom:calc(14px + var(--safe-b));z-index:86;font:600 12px Inter;letter-spacing:.4px;color:#e9dff7;background:#14102ae6;border:1px solid #8f7cb0;border-radius:999px;padding:8px 13px;opacity:0;pointer-events:none;transition:opacity .3s;box-shadow:0 6px 18px #0009}
body.animating:not(.hurrying) #skipBtn{opacity:.92;pointer-events:auto}
@media(max-width:760px){#skipBtn{right:8px;bottom:calc(10px + var(--safe-b));padding:7px 11px;font-size:11px}}
/* la moneta e le vecchie scosse */
.coin{left:50%;top:44%;translate:-50% -50%;width:130px;height:130px;border-radius:50%;display:grid;place-items:center;font:700 58px var(--serif);color:#3a2400;background:radial-gradient(circle at 35% 30%,#fff3c4,#d9a441 60%,#8d5f14);box-shadow:0 0 0 6px #7a5418,0 0 60px #f0ce89aa;animation:coin 1.4s cubic-bezier(.3,.7,.3,1) both}
@keyframes coin{0%{transform:rotateY(0) translateY(60px) scale(.5);opacity:0}15%{opacity:1}70%{transform:rotateY(1440deg) translateY(-20px) scale(1)}85%{transform:rotateY(1440deg) translateY(0) scale(1)}100%{opacity:0;transform:rotateY(1440deg) scale(1.1)}}
.shake{animation:shake .38s ease-in-out both}
@keyframes shake{15%{translate:-6px 3px}30%{translate:6px -3px}45%{translate:-4px -2px}60%{translate:3px 3px}80%{translate:-2px 1px}}
.zone.fresh>.card{animation:land .5s cubic-bezier(.18,.9,.28,1) both}
@keyframes land{0%{opacity:0;transform:translateY(-30px) scale(1.4);filter:brightness(2.2)}60%{opacity:1;filter:brightness(1.4)}100%{transform:none;filter:none}}
.zone.flipping>.card{animation:flipcard .55s both}
@keyframes flipcard{0%{transform:rotateY(90deg)}100%{transform:none}}
/* le figure in campo respirano: specificita' zero, cosi' ogni altra animazione vince */
:where(.zone:not(.def):not(.spent)>.card.monster){animation:breathe 3.8s ease-in-out infinite;animation-delay:var(--d,0s)}
@keyframes breathe{50%{translate:0 -2px;scale:1.015}}
/* l'anteprima dell'attacco */
.zone .preview{position:absolute;left:50%;top:-11px;translate:-50% 0;z-index:7;font:800 10px/1 Inter;letter-spacing:.4px;padding:4px 6px;border-radius:6px;white-space:nowrap;pointer-events:none;border:1px solid #0008;box-shadow:0 3px 10px #000a}
.preview.win{background:#9ff0bf;color:#0f2a1a}.preview.lose{background:#ff9fb3;color:#3a0f1a}.preview.even{background:#f0ce89;color:#2b1c0e}.preview.unk{background:#cfc3e4;color:#241d38}

/* ============================================================ il telefono */
@media(max-width:1100px){.arena{grid-template-columns:minmax(0,1fr) 270px}.chapters{grid-template-columns:repeat(3,1fr)}.board{--z:78px}}
@media(max-width:900px){.hero{grid-template-columns:1fr;min-height:0;padding:30px 0 10px}.hero-art{height:360px;max-width:520px;width:100%;margin:auto}.hero-art .card{width:170px}}
@media(max-width:760px){
 .topbar{height:54px;padding-left:116px}
 .wordmark{font-size:15px}.wordmark small{display:none}.sigil{width:28px;height:33px;font-size:22px}
 nav button{padding:7px 6px;font-size:12px}
 nav .full{display:none}nav .short{display:inline}
 #motionBtn{display:none}
 .board>.duel-top .eyebrow{display:none}
 .board>.duel-top h2{font-size:15px;overflow:hidden;text-overflow:ellipsis}
 .board>.duel-top>div:first-child{flex:1}
 .hud.opp .who{display:none}
 .hero h1{font-size:48px}.lead{font-size:14px}
 .hero-art{height:300px}.hero-art .card{width:140px;top:40px!important}
 .campaign-options p{text-align:left}
 .chapters{display:flex;overflow-x:auto;padding-bottom:10px;scroll-snap-type:x mandatory}
 .chapter{flex:0 0 200px;scroll-snap-align:start}
 .pillars{grid-template-columns:1fr}
 footer{display:block}footer span{display:block;margin:6px 0}
 body.in-duel{overflow:hidden}
 body.in-duel .topbar{height:46px}
 body.in-duel #collectionBtn,body.in-duel #helpBtn{display:none}
 #duel.screen{padding:0 6px}
 .arena{display:block}
 .board{--z:min(64px,calc((100vw - 60px) / 5.3));padding:6px 7px 4px;border-radius:10px;height:calc(100dvh - 52px);display:flex;flex-direction:column;overflow:hidden}
 .duel-top{margin-bottom:0}.duel-top h2{font-size:16px}.duel-top .eyebrow{font-size:7px;letter-spacing:1.2px;margin-bottom:2px}
 .duel-options button{padding:6px 8px;font-size:10px}
 .row{grid-template-columns:1fr}
 .row .pile{display:none}
 .zones{gap:5px}
 .field{gap:9px}
 .hud{min-height:38px;gap:8px;padding:2px 0}
 .hud .face{width:32px;height:32px;font-size:17px}
 .hud .who b{font-size:12px}.hud .who small{display:none}
 .hud .life b{font-size:22px;min-width:58px}.hud .life img{width:16px}
 .hud .bar{width:60px}
 .hud .chips{display:flex}
 .hud .chip{font-size:10px;padding:2px 6px}
 .hud .ohand i{width:12px;height:17px}.hud .ohand{gap:2px}.hud .ohand+.life{margin-left:6px}
 .phasebar{grid-template-columns:1fr auto;gap:6px;margin:4px 0;padding:4px 2px}
 #phases span{font-size:8px;padding:3px 4px}
 .turnno{font-size:10px;margin-right:2px}
 .phasebar .instruction{display:none}
 .phase-actions button{padding:6px 10px;font-size:11px;min-height:34px}
 .zone .stat{font-size:9px;padding:2px 3px;bottom:-6px}
 .hand{justify-content:flex-start;overflow-x:auto;overflow-y:hidden;flex:1 1 auto;min-height:110px;padding:8px 2px 6px;gap:6px;scroll-snap-type:x proximity}
 .hand>.card{flex:0 0 min(92px,23vw);width:min(92px,23vw);align-self:flex-start;scroll-snap-align:start}
 .field{gap:12px}
 .hand>.card:hover:not(:disabled){transform:none}
 .side{position:fixed;left:0;right:0;bottom:0;top:auto;max-height:84dvh;z-index:85;border-radius:18px 18px 0 0;border-bottom:0;padding:14px 16px calc(16px + var(--safe-b));display:none;box-shadow:0 -20px 70px #000c}
 body.details-open .side{display:flex;animation:sheet .22s ease-out}
 body.details-open #detailScrim{display:block;position:fixed;inset:0;z-index:84;border:0;border-radius:0;background:#050613a8;backdrop-filter:blur(3px)}
 #closeDetail{display:block;align-self:flex-end;padding:7px 14px}
 .side-top{display:none}
 .inspect .card{width:150px;float:left;margin:0 14px 8px 0}
 .inspect:after{content:'';display:block;clear:both}
 .inspect h2{font-size:24px}
 .side .battle-log{display:none}
 .card-actions button{min-height:48px;font-size:14px}
 #respond{padding:12px;bottom:max(8px,var(--safe-b))}
 .resp-card{width:92px}
 .resp-head h3{font-size:16px}
 .rules-grid{grid-template-columns:1fr}
 dialog{padding:16px;max-width:96vw}
 .library-grid{grid-template-columns:repeat(2,1fr);gap:10px}
 .picker-grid{grid-template-columns:repeat(3,1fr)}
 #result h1{font-size:54px}
 .reward-cards .card{width:92px}
 .banner strong{font-size:22px}.banner.turn strong{font-size:28px}
 .banner img{width:42px;height:42px}
 .kapow{zoom:.72}.st-out{font-size:30px;top:82%}.vs{font-size:44px}.plate b{font-size:22px}.plate{padding:4px 10px}
 .fighter{width:min(150px,38vw)}.st-row{gap:7vw}.bubble.big{font-size:14px;max-width:200px}
 .tk-line{font-size:11px;padding:4px 10px}.tk-line:not(:last-child){display:none}
 .duel-options .js-pace{max-width:92px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}
@keyframes sheet{from{translate:0 30px;opacity:0}}
/* telefoni alti: lo spazio in piu' va alla mano, che si legge meglio */
@media(max-width:760px) and (min-height:740px){.hand>.card{flex-basis:min(118px,29vw);width:min(118px,29vw)}.hud{min-height:44px}}
@media(max-width:760px) and (max-height:700px){.board{--z:min(56px,calc((100vw - 60px) / 5.3))}.duel-top{display:none}.hud .ohand{display:none}}

/* ------------------------------------------------ meno movimento, per chi lo chiede */
/* telefoni stretti: marchio, Cards, Rules e Audio devono stare in 375px accanto alla pillola di SS World */
@media(max-width:420px){.topbar{padding-right:10px;gap:6px}.wordmark{font-size:13px;letter-spacing:1.2px;gap:8px}nav{gap:0}nav button{padding:7px 5px}
 /* con le pergamene nella barra, sul telefono stretto il marchio resta il solo sigillo */
 .wordmark>span:last-child{display:none}}
/* la preferenza di sistema non spegne piu' tutto: ammorbidisce (effects.js toglie scosse e lampi),
   e il gioco ha il suo interruttore "Motion" (anche nel pannello Audio, sul telefono) */
@media(prefers-reduced-motion:reduce){:where(.zone>.card.monster){animation:none}}
body.reduced *,body.reduced *:before,body.reduced *:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
body.reduced #fx{display:none}


/* =========================================================== il terreno
   Una magia di terreno attiva trasforma il tavolo nel suo luogo (effects.js). */
#terrain{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden;border-radius:inherit}
#terrain .tr{position:absolute;left:0;right:0;background:center/cover no-repeat}
#terrain .tr.all{top:0;bottom:0}
#terrain .tr.top{top:0;height:58%;-webkit-mask:linear-gradient(#000 72%,transparent);mask:linear-gradient(#000 72%,transparent)}
#terrain .tr.bot{bottom:0;height:58%;-webkit-mask:linear-gradient(transparent,#000 28%);mask:linear-gradient(transparent,#000 28%)}
#terrain .tr.plain{background:linear-gradient(#0d1122a6,#0d1122a6),url(./assets/playmat.webp) center/cover,#0d1122}
#terrain .tr[data-f="s25"]{animation:lavaglow 3.4s ease-in-out infinite alternate}
@keyframes lavaglow{to{filter:brightness(1.25) saturate(1.25)}}
#terrain:after{content:'';position:absolute;inset:0;z-index:4;pointer-events:none;
 background:radial-gradient(ellipse at 50% 50%,#0b0e1c40,#0b0e1cc8 88%),linear-gradient(#0b0e1c99,transparent 16%,transparent 84%,#0b0e1c99)}
.terrain-shift{position:absolute;inset:0;z-index:3}
.board.terraformed:before{opacity:0;transition:opacity .6s}
.board.terraformed .zone{background:#0b0f1fb3}
.board.terraformed .row.st .zone{background:#0b0f1f88}
/* l'atmosfera di ogni luogo */
.amb{position:absolute;left:0;right:0;top:0;bottom:0;overflow:hidden;z-index:2}
.amb.top{bottom:45%}.amb.bot{top:45%}
.amb i{position:absolute;left:var(--x);top:var(--y);animation:var(--t) linear var(--d) infinite}
.amb.smoke i{width:calc(150px * var(--s));height:calc(95px * var(--s));border-radius:50%;background:radial-gradient(closest-side,#8a7a6a70,transparent);filter:blur(5px);animation-name:amb-smoke}
@keyframes amb-smoke{0%{transform:translate(-20px,60px) scale(.6);opacity:0}30%{opacity:.85}100%{transform:translate(90px,-170px) scale(1.8);opacity:0}}
.amb.mist i{width:75%;height:calc(80px * var(--s));border-radius:50%;background:radial-gradient(closest-side,#dbe4f04d,transparent);filter:blur(6px);animation-name:amb-mist;animation-timing-function:ease-in-out}
@keyframes amb-mist{0%,100%{transform:translateX(-40%);opacity:.25}50%{transform:translateX(25%);opacity:.85}}
.amb.rays i{top:-30%;width:calc(80px * var(--s));height:170%;background:linear-gradient(#fff2c066,transparent 80%);filter:blur(10px);rotate:22deg;animation-name:amb-rays;animation-timing-function:ease-in-out}
@keyframes amb-rays{0%,100%{opacity:.12}50%{opacity:.75}}
.amb.petals i{top:-6%;width:calc(10px * var(--s));height:calc(5px * var(--s));border-radius:50% 0;background:#d6ecaa;box-shadow:0 0 4px #fff8;animation-name:amb-fall}
@keyframes amb-fall{0%{transform:translate(0,0) rotate(0);opacity:0}10%{opacity:.95}100%{transform:translate(110px,900px) rotate(760deg);opacity:.2}}
.amb.embers i{top:auto;bottom:-4%;width:calc(5px * var(--s));height:calc(5px * var(--s));border-radius:50%;background:#ffb03a;box-shadow:0 0 8px #ff6a00,0 0 16px #ff3d00;animation-name:amb-rise}
@keyframes amb-rise{0%{transform:translate(0,0);opacity:0}10%{opacity:1}100%{transform:translate(50px,-820px);opacity:0}}
body.reduced .amb{display:none}
.banner.world strong{font-size:36px;letter-spacing:1px}

/* ============================================================ le epiche
   Una cornice di magma vivo: due strati della stessa lava (dipinta in client.js,
   si ripete senza cuciture) che scorrono in direzioni diverse e si sommano, un
   riflesso che gira tutto intorno, e braci che salgono. */
.card.epic{--frame:#4a1204;--frame2:#120302;border-color:#ff9d4a99}
.card .c-lava{position:absolute;inset:0;z-index:-1;border-radius:inherit;overflow:hidden;
 background:var(--lava,linear-gradient(135deg,#ff6a00,#5a0f02)) 0 0/70cqw 70cqw,var(--lava,linear-gradient(45deg,#ffb000,#3a0802)) 0 0/43cqw 43cqw,#3a0802;
 background-blend-mode:screen;animation:magma 11s linear infinite}
@keyframes magma{to{background-position:70cqw 140cqw,-86cqw 43cqw}}
.card .c-lava:after{content:'';position:absolute;inset:-40%;background:conic-gradient(from 0deg,transparent 0 60%,#fff3a866 72%,transparent 84%);animation:magma-spin 3.6s linear infinite;mix-blend-mode:overlay}
@keyframes magma-spin{to{rotate:360deg}}
.card .c-embers{position:absolute;inset:0;z-index:5;pointer-events:none;border-radius:inherit;mix-blend-mode:screen;opacity:.9;
 background-image:radial-gradient(circle,#ffe0a0 0 .7cqw,transparent 1.2cqw),radial-gradient(circle,#ff8a3d 0 .55cqw,transparent 1.05cqw),radial-gradient(circle,#fff1b0 0 .4cqw,transparent .85cqw);
 background-size:31cqw 43cqw,23cqw 37cqw,41cqw 29cqw;background-position:3cqw 5cqw,15cqw 20cqw,30cqw 2cqw;animation:embers-up 3.4s linear infinite;
 -webkit-mask:linear-gradient(to top,#000,#000 35%,transparent 92%);mask:linear-gradient(to top,#000,#000 35%,transparent 92%)}
@keyframes embers-up{to{background-position:3cqw calc(5cqw - 43cqw),15cqw calc(20cqw - 37cqw),30cqw calc(2cqw - 29cqw)}}
.card.epic .c-name{background:linear-gradient(180deg,#2e0d05,#120402);box-shadow:inset 0 0 0 .5cqw #ff8a3daa,0 0 2.4cqw #ff5a0099}
.card.epic .c-name b{color:#ffe2ac;text-shadow:0 0 1.6cqw #ff6a00,0 .2cqw 0 #000}
.card.epic .c-sub{color:#ffe7c2}
.card.epic .c-sub i{color:#ffe14d;text-shadow:0 0 2cqw #ff6a00,0 .3cqw .5cqw #000}
.card.epic .c-art{box-shadow:0 0 0 .7cqw #1a0502,0 0 0 1.4cqw #ff8a3dcc,0 0 3.5cqw #ff5a00cc}
.card.epic .c-text{background:linear-gradient(180deg,#f8e6c6,#ecc999);box-shadow:inset 0 0 0 .5cqw #8a2a0a55}
.card.epic .c-stats{color:#ffe7c2;background:linear-gradient(180deg,#2a0a04e6,#120402f0);border:0;border-radius:1.2cqw;padding:1.2cqw 1.8cqw;margin-top:.4cqw;text-shadow:0 0 1.2cqw #ff6a00}
.card.epic:not(.playable):not(.selected):not(.target):not(.chosen){box-shadow:0 0 0 1px #ffb05aaa,0 0 14px #ff5a00aa,0 0 36px #ff3d0040;animation:epic-glow 2.4s ease-in-out infinite}
@keyframes epic-glow{50%{box-shadow:0 0 0 1px #ffd27acc,0 0 22px #ff7a1acc,0 0 54px #ff3d0066}}
.limit-tag.epic{top:-8px;bottom:auto;right:auto;left:50%;translate:-50% 0;background:linear-gradient(90deg,#ff5a00,#ffb000);color:#2a0802;box-shadow:0 0 10px #ff6a00aa}
/* l'arrivo di un'epica */
.veil.epic{background:radial-gradient(ellipse at 50% 45%,#3a0a02cc,#000000ee 75%);z-index:21}
.cracks{left:0;top:0;width:100vw;height:100vh;z-index:22}
.cracks svg{display:block;overflow:visible}
.cracks path{fill:none;stroke:#ffb03a;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:100;stroke-dashoffset:100;filter:drop-shadow(0 0 6px #ff6a00) drop-shadow(0 0 18px #ff3d00)}
.projection.epic{z-index:26;filter:drop-shadow(0 0 50px #ff6a00aa) drop-shadow(0 0 20px #ffb03a88)}
.epic-title{left:50%;top:82%;transform:translate(-50%,-50%);z-index:28;text-align:center;white-space:nowrap}
.epic-title small{display:block;font:700 13px Inter;letter-spacing:6px;color:#ffcf8a;text-shadow:0 0 12px #ff6a00;margin-bottom:6px}
.epic-title strong{display:block;font:400 clamp(40px,7vw,72px)/1 var(--comic);letter-spacing:3px;color:#ffb03a;
 background:linear-gradient(100deg,#ffb03a 0%,#fff6c8 18%,#ffcf6e 34%,#ff8a3d 52%,#fff1b0 70%,#ff9d3a 86%,#ffb03a 100%) 0 0/220% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
 -webkit-text-stroke:1.5px #2b0a02;filter:drop-shadow(0 0 14px #ff6a00) drop-shadow(0 4px 0 #2b0a02);animation:molten-text 2.6s linear infinite}
@keyframes molten-text{to{background-position:-220% 0}}
@keyframes lava-text{to{background-position:140px 280px}}
.lava-drop{z-index:23}
.lava-drop svg{filter:drop-shadow(0 0 6px #ff6a00) drop-shadow(0 0 12px #ff3d00)}
.flash.lava{background:radial-gradient(circle at var(--x,50%) var(--y,30%),#ffcf6eee,#ff5a00aa 30%,transparent 70%);z-index:24}
.stage.epic .st-bg{background:radial-gradient(ellipse at 50% 50%,#3a0a02aa,#0a0201f2 72%),var(--lava,#3a0802) 0 0/240px 240px;animation:lava-bg 14s linear infinite}
@keyframes lava-bg{to{background-position:0 0,240px 480px}}

/* ========================================================= le pergamene */
.scroll-count{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;border-radius:9px;font:700 10px/1 Inter;background:#2a2440;color:var(--muted)}
.scroll-count.some{background:linear-gradient(180deg,#ffd98a,#d99a3a);color:#2b1606;box-shadow:0 0 10px #f0ce8988}
nav .short svg{vertical-align:-3px}
.scrolls-cta{background:linear-gradient(180deg,#3a2a12,#21170a);border-color:#d9a74a;color:#ffe2a6;font-weight:600;box-shadow:0 0 18px #f0ce8933,inset 0 0 12px #f0ce8922}
.scrolls-cta:hover:not(:disabled){background:linear-gradient(180deg,#4a3618,#2a1d0c);border-color:#ffe2a6}
.scrolls-panel{width:min(760px,95vw)}
.scroll-shelf{display:grid;gap:12px;margin-bottom:14px}
.scroll-item{display:grid;grid-template-columns:96px 1fr auto auto;align-items:center;gap:16px;padding:14px 16px;border:1px solid var(--line2);border-radius:12px;background:linear-gradient(90deg,#1b1630,#121527)}
.scroll-item.gilded{border-color:#c9a25a;background:linear-gradient(90deg,#2a2010,#121527);box-shadow:inset 0 0 30px #f0ce8914}
.scroll-txt b{display:block;font:600 22px var(--serif);color:#fff0d8}
.scroll-txt small{display:block;color:var(--muted);font-size:12.5px;line-height:1.45;margin-top:3px}
.scroll-item .qty{font:700 26px var(--serif);color:var(--gold)}
.scroll-art{position:relative;width:86px;height:96px;margin:auto}
.scroll-art .rod{position:absolute;left:2px;right:2px;height:13px;border-radius:7px;background:linear-gradient(#a06a35,#5a3414 55%,#2e1a08);box-shadow:0 3px 6px #000a;z-index:2}
.scroll-art .rod:first-child{top:4px}.scroll-art .rod:nth-child(3){bottom:4px}
.scroll-art .paper{position:absolute;left:10px;right:10px;top:12px;bottom:12px;background:linear-gradient(90deg,#c9a86c,#f4e2bc 25%,#f6e8c8 60%,#d6b47a);box-shadow:inset 0 0 10px #8a5a2244}
.scroll-art .seal{position:absolute;left:50%;top:52%;width:30px;height:30px;border-radius:50%;translate:-50% -50%;z-index:3;background:radial-gradient(circle at 35% 30%,#ef6a5c,#8e1d1a 70%);box-shadow:0 0 0 3px #6a141244,0 4px 8px #000a}
.scroll-art.gilded .rod{background:linear-gradient(#fff0b5,#d4a23a 55%,#7a5214)}
.scroll-art.gilded .paper{background:linear-gradient(90deg,#d4ac5a,#fff1c8 25%,#fff4d6 60%,#e2bc66);box-shadow:inset 0 0 0 3px #e3b34155,inset 0 0 14px #b8862a55}
.scroll-art.gilded .seal{background:radial-gradient(circle at 35% 30%,#fff3c4,#c38a1c 70%);box-shadow:0 0 14px #f0ce89aa,0 4px 8px #000a}
.ink-row{display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center;font-size:13px;color:var(--muted);padding:6px 2px 12px}
.ink-row .ink{font:700 18px var(--serif);color:#bfe3ff}
.ink-row b{color:var(--gold)}
.odds{border:1px solid var(--line);border-radius:10px;padding:10px 14px;margin-bottom:10px;background:#0f1324}
.odds summary{cursor:pointer;font-weight:600;color:var(--gold);font-size:13px}
.odds table{width:100%;border-collapse:collapse;margin:10px 0;font-size:12.5px}
.odds th,.odds td{padding:6px 8px;text-align:center;border-bottom:1px solid #ffffff12}
.odds th:first-child{text-align:left;color:var(--muted);font-weight:500}
.odds p{font-size:12px;color:var(--muted);line-height:1.6;margin:6px 0 0}
.r-common{color:#d9c49a}.r-rare{color:#9fd0ff}.r-legend{color:#f4d391}.r-epic{color:#ff9d4a;text-shadow:0 0 8px #ff5a0088}
.craft-tag{position:absolute;bottom:6px;left:6px;z-index:6;font:700 10px Inter;background:#1a2a3a;color:#bfe3ff;border:1px solid #4a7aa0;border-radius:4px;padding:2px 5px}
.lib-ink{align-self:center;font:700 14px var(--serif);color:#bfe3ff;margin-left:auto}
.result-scrolls{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;align-items:center;margin:4px 0 16px}
.result-scrolls .sc{font:600 13px Inter;padding:6px 12px;border-radius:999px;background:#2a2010;border:1px solid #c9a25a;color:#ffe2a6}
.result-scrolls .sc.gilded{background:linear-gradient(180deg,#ffe49a,#c9922c);color:#2b1606;border-color:#fff0c4;box-shadow:0 0 14px #f0ce8988}
.result-scrolls small{flex-basis:100%;color:var(--dim);font-size:11.5px}
.result-scrolls .none{font-size:12px;color:var(--dim)}
/* lo srotolamento */
dialog.unroll{width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;border-radius:0;background:radial-gradient(ellipse at 50% 38%,#2a1d3ef5,#05061af9 75%)}
dialog.unroll::backdrop{background:#000c}
.unroll-stage{position:relative;width:100%;min-height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:30px 12px;overflow:hidden}
.unroll-stage.best-epic{background:radial-gradient(ellipse at 50% 40%,#3a0a02cc,transparent 70%)}
.unroll-stage.best-legend{background:radial-gradient(ellipse at 50% 40%,#3a2a0a99,transparent 70%)}
.u-fx{position:fixed;inset:0;pointer-events:none;z-index:30}
.u-fx>*{position:absolute;pointer-events:none}
.u-eyebrow{margin:0;font:700 11px Inter;letter-spacing:5px;color:var(--gold)}
.u-scroll{position:relative;width:min(900px,96vw);display:flex;flex-direction:column}
.u-scroll .rod{position:relative;z-index:2;height:28px;border-radius:14px;background:linear-gradient(#b07a40,#6a3e18 55%,#331c08);box-shadow:0 6px 14px #000c,inset 0 2px 0 #ffffff33}
.u-scroll .rod:before,.u-scroll .rod:after{content:'';position:absolute;top:-6px;width:22px;height:40px;border-radius:10px;background:radial-gradient(circle at 40% 35%,#ffe49a,#a87420 70%,#5a3a0a);box-shadow:0 4px 8px #000a}
.u-scroll .rod:before{left:-14px}.u-scroll .rod:after{right:-14px}
.u-scroll.gilded .rod{background:linear-gradient(#fff0b5,#d4a23a 55%,#7a5214)}
.u-scroll .paper{max-height:0;overflow:hidden;margin:-8px 20px;transition:max-height 1.2s cubic-bezier(.3,.7,.2,1);
 background:radial-gradient(ellipse at 50% 50%,transparent 60%,#8a5a2233),linear-gradient(90deg,#c9a86c,#f4e2bc 12%,#f6e8c8 50%,#f2deb2 88%,#c9a86c);box-shadow:inset 0 10px 18px #6a3e1844,inset 0 -10px 18px #6a3e1844}
.u-scroll.gilded .paper{background:radial-gradient(ellipse at 50% 50%,transparent 60%,#b8862a33),linear-gradient(90deg,#d4ac5a,#fff1c8 12%,#fff4d6 50%,#fbe8b8 88%,#d4ac5a)}
.u-scroll.open .paper{max-height:720px}
.seal{position:absolute;left:50%;top:28px;translate:-50% -50%;z-index:4;width:84px;height:84px;padding:0;border-radius:50%;border:0;cursor:pointer;
 --w1:#ef6a5c;--w2:#8e1d1a;--glow:#ff6f6f55;--wax:radial-gradient(circle at 35% 30%,var(--w1),var(--w2) 72%);background:none;box-shadow:0 8px 18px #000c,0 0 30px var(--glow);animation:seal-pulse 1.3s ease-in-out infinite}
.seal:hover:not(:disabled){background:none}
/* la cera sta nelle due meta': spezzato il sigillo, volano via */
.seal span{position:absolute;inset:0;border-radius:50%;background:var(--wax);box-shadow:inset 0 0 0 5px #0002,inset 0 -6px 10px #0005;transition:transform .55s cubic-bezier(.3,.7,.3,1),opacity .55s}
.seal span:first-child{clip-path:polygon(0 0,58% 0,42% 100%,0 100%)}
.seal span:last-child{clip-path:polygon(58% 0,100% 0,100% 100%,42% 100%)}
.seal:after{content:'C';position:absolute;inset:0;display:grid;place-items:center;font:700 34px var(--serif);color:#0004;text-shadow:0 1px 0 #fff3}
.unroll-stage .seal.broken{animation:none;box-shadow:none;pointer-events:none}
.seal.broken:after{opacity:0}
.seal.broken span:first-child{transform:translate(-70px,40px) rotate(-50deg);opacity:0}
.seal.broken span:last-child{transform:translate(70px,40px) rotate(50deg);opacity:0}
@keyframes seal-pulse{50%{transform:scale(1.07);box-shadow:0 8px 18px #000c,0 0 50px var(--glow)}}
.best-rare .seal{--w1:#d8ecff;--w2:#4a78b0;--glow:#9fd0ffaa}
.best-legend .seal{--w1:#fff3c4;--w2:#c38a1c;--glow:#f4d391cc}
.best-epic .seal{--w1:#ffb03a;--w2:#7a1404;--glow:#ff6a00ee;--wax:var(--lava,radial-gradient(circle,#ffb03a,#7a1404)) 0 0/90px 90px;animation:seal-pulse .7s ease-in-out infinite}
.u-hint{margin:22px 0 0;min-height:20px;font-size:13px;color:#ddd1e7}
.u-cards{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;padding:30px 18px 26px}
.u-card{position:relative;width:min(150px,28vw);padding:0;border:0;background:none;cursor:pointer;perspective:900px;opacity:0;animation:u-rise .6s cubic-bezier(.2,.9,.3,1.2) both;animation-delay:calc(.45s + var(--i) * .14s)}
.u-card:hover:not(:disabled){background:none}
.u-card .card{width:100%}
@keyframes u-rise{from{opacity:0;transform:translateY(60px) scale(.6) rotate(-6deg)}to{opacity:1;transform:none}}
.u-card:not(.shown).aura-rare{filter:drop-shadow(0 0 10px #9fd0ff) drop-shadow(0 0 22px #4a90d0)}
.u-card:not(.shown).aura-legend{filter:drop-shadow(0 0 12px #f4d391) drop-shadow(0 0 28px #e7a53a)}
.u-card:not(.shown).aura-epic{filter:drop-shadow(0 0 12px #ffb03a) drop-shadow(0 0 30px #ff3d00);animation:u-rise .6s cubic-bezier(.2,.9,.3,1.2) both calc(.45s + var(--i) * .14s),u-quake .18s linear 1.2s infinite}
@keyframes u-quake{25%{translate:-1.5px .5px}75%{translate:1.5px -.5px}}
.u-card:not(.shown):hover{transform:translateY(-6px)}
.u-card.shown{cursor:default}
.u-card.shown.aura-legend:before,.u-card.shown.aura-epic:before{content:'';position:absolute;left:50%;top:50%;width:260%;aspect-ratio:1;translate:-50% -50%;z-index:-1;border-radius:50%;
 background:repeating-conic-gradient(from 0deg,#f4d39155 0 6deg,transparent 6deg 18deg);-webkit-mask:radial-gradient(circle,#000 20%,transparent 62%);mask:radial-gradient(circle,#000 20%,transparent 62%);animation:magma-spin 9s linear infinite}
.u-card.shown.aura-epic:before{background:repeating-conic-gradient(from 0deg,#ff8a3d77 0 6deg,transparent 6deg 16deg)}
.u-new,.u-ink,.u-rar{position:absolute;z-index:7;font:800 11px/1 Inter;letter-spacing:.6px;border-radius:5px;padding:4px 7px;box-shadow:0 3px 10px #000a;white-space:nowrap}
.u-new{top:-9px;right:-7px;background:linear-gradient(180deg,#9ff0bf,#43c27a);color:#0b2a17;animation:u-new .5s cubic-bezier(.3,1.6,.5,1) both}
@keyframes u-new{from{transform:scale(0) rotate(-20deg)}to{transform:none}}
.u-ink{top:-9px;right:-7px;background:#1a2a3a;color:#bfe3ff;border:1px solid #4a7aa0}
.u-rar{bottom:-10px;left:50%;translate:-50% 0;background:#14102a;border:1px solid currentColor}
.u-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
@media(max-width:760px){
 .scroll-item{grid-template-columns:70px 1fr auto;gap:10px;padding:12px}
 .scroll-item .scroll-art{width:64px;height:72px}
 .scroll-item button{grid-column:1/-1}
 .scroll-txt b{font-size:18px}
 .u-cards{gap:8px;padding:26px 6px 22px}
 .u-card{width:min(100px,26vw)}
 .u-scroll .paper{margin:-8px 12px}
 .seal{width:72px;height:72px}
 .lib-ink{margin-left:0}
}


/* ============================================================ l'account */
.acc-btn{position:relative;width:34px;height:34px;padding:0!important;border-radius:50%!important;display:grid;place-items:center;margin-left:4px;border:1px solid var(--line2)!important;background:#171b2e!important}
.acc-btn .av{font:700 15px var(--serif);color:var(--gold)}
.acc-btn:after{content:'';position:absolute;right:-1px;bottom:-1px;width:9px;height:9px;border-radius:50%;border:2px solid var(--bg);background:#6d6585}
.acc-btn[data-state="synced"]:after{background:#57e39a}.acc-btn[data-state="pending"]:after,.acc-btn[data-state="syncing"]:after,.acc-btn[data-state="idle"]:after{background:#f0ce89}
.acc-btn[data-state="offline"]:after,.acc-btn[data-state="lost"]:after{background:#ff8b8b}.acc-btn[data-state="guest"]:after{display:none}
.acc-btn[data-state="guest"] .av{font:600 14px Inter;color:#cfc3e4}
.hero-account{margin:10px 0 0;font-size:12.5px;color:var(--muted)}
.hero-account b{color:var(--ink)}
.hero-account .text-button{padding:0;font-size:12.5px;text-decoration:underline;text-underline-offset:3px}
.st-synced{color:#9ff0bf}.st-pending,.st-syncing,.st-idle{color:#f0ce89}.st-offline,.st-lost{color:#ff9fb3}
.account-panel{width:min(760px,95vw)}
.account-panel .dialog-top{margin-bottom:0}
.acc-lead{color:#ddd1e7;font-size:14px;max-width:620px}
.acc-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:16px 0 8px}
.acc-box{display:flex;flex-direction:column;gap:10px;padding:16px;border:1px solid var(--line2);border-radius:12px;background:#121527}
.acc-box b{font:600 21px var(--serif);color:var(--gold)}
.acc-box label{display:flex;flex-direction:column;gap:6px;font-size:12px;color:var(--muted)}
.acc-box input{font-size:15px}
.acc-box small{color:var(--dim);font-size:11.5px;line-height:1.5}
.code-input{font:700 18px/1 ui-monospace,Menlo,Consolas,monospace!important;letter-spacing:2px;text-transform:uppercase}
.acc-msg{min-height:18px;margin:8px 0 0;font-size:13px;color:#9be6e2}
.acc-msg.bad{color:#ff9fb3}
.code-big{display:flex;justify-content:center;flex-wrap:wrap;gap:6px;margin:18px 0;padding:18px 10px;border-radius:14px;background:radial-gradient(ellipse at 50% 0,#2a2010,#121527);border:1px solid #c9a25a;box-shadow:inset 0 0 30px #f0ce8918}
.code-big b{display:grid;place-items:center;width:clamp(26px,6.4vw,44px);height:clamp(36px,8vw,56px);border-radius:8px;background:#fbf3df;color:#2b1c0e;font:700 clamp(18px,4.6vw,30px)/1 ui-monospace,Menlo,Consolas,monospace;box-shadow:0 3px 0 #8a6a3a,0 6px 14px #000a}
.code-big .dash{display:grid;place-items:center;font-style:normal;color:var(--gold);font-size:22px;width:10px}
.acc-warn{font-size:13px;line-height:1.6;color:#ffd6c2;background:#3a1a12aa;border:1px solid #a4476f88;border-radius:10px;padding:12px 14px}
.acc-warn b{color:#ffb3a0}
.acc-check{display:flex;gap:10px;align-items:center;font-size:13.5px;margin:6px 0 12px}
.acc-check input{width:18px;height:18px}
.acc-actions{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
.acc-status{display:flex;align-items:center;gap:8px;font-size:13px;margin:-2px 0 14px}
.acc-status i{width:9px;height:9px;border-radius:50%;background:currentColor;box-shadow:0 0 8px currentColor}
.acc-code{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:12px 14px;border:1px solid var(--line2);border-radius:10px;background:#121527}
.acc-code span{flex:1;font:700 20px ui-monospace,Menlo,Consolas,monospace;letter-spacing:2px;color:#fbf3df}
.acc-stats{list-style:none;padding:0;margin:14px 0;display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.acc-stats small{font-size:13px;color:var(--dim)}
.acc-stats li{padding:10px;border-radius:10px;background:#121527;border:1px solid var(--line);font-size:12px;color:var(--muted);text-align:center}
.acc-stats b{display:block;font:700 22px var(--serif);color:var(--gold)}
button.danger{border-color:#a4476f;color:#ffc2d2}
button.danger:hover:not(:disabled){background:#3a1a28;border-color:#ff9fb3}
@media(max-width:760px){.acc-grid{grid-template-columns:1fr}.acc-stats{grid-template-columns:repeat(3,1fr)}}
@media(max-width:420px){.acc-btn{width:30px;height:30px;margin-left:2px}#helpBtn .short{font-size:0}#helpBtn .short:after{content:'?';font-size:14px;font-weight:700}}

/* ---------------------------------------------------------------- audio -- */
.audio-panel{width:min(440px,92vw)}
.mixer{margin:4px 0 8px}
.mix-row{display:grid;grid-template-columns:72px 48px 1fr;gap:14px;align-items:center;padding:14px 0;border-top:1px solid #ffffff14}
.mix-row:first-child{border-top:0}
.mix-name{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--muted);font-weight:600}
.switch{position:relative;width:46px;height:26px;border-radius:13px;padding:0;background:#0b0e1c;border-color:var(--line2)}
.switch i{position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:var(--dim);transition:transform .2s,background .2s}
.switch[aria-checked="true"]{background:#3a2f18;border-color:var(--gold2)}
.switch[aria-checked="true"] i{transform:translateX(20px);background:var(--gold)}
.switch:hover:not(:disabled){background:#1d2136}
.switch[aria-checked="true"]:hover:not(:disabled){background:#4a3b1d;border-color:var(--gold)}
.mix-row input[type=range]{width:100%;accent-color:var(--gold);margin:0;min-height:26px}
.mix-row input:disabled{opacity:.3}
.now-playing{color:var(--gold);font:italic 400 15px Georgia,serif;margin:6px 0 8px;min-height:1.3em}
.mix-note{color:var(--dim);font-size:12px;line-height:1.5;margin:0}

/* ======================================================= le strade del gioco
   L'atrio (carriera e sei modalita'), esibizione, tornei, Turning Points, la
   Sala del Cronista, lo scontro di presentazione e il racconto di fine partita
   (modes.js). */
:root{--t-scribe:#b9a98c;--t-chronicler:#e3cf9f;--t-historian:#9fd0ff;--t-scholar:#9ff0bf;--t-sage:#c8a4ff;--t-master:#ffb36b;--t-grand:#ff7a59}
.tier-scribe{--tc:var(--t-scribe)}.tier-chronicler{--tc:var(--t-chronicler)}.tier-historian{--tc:var(--t-historian)}.tier-scholar{--tc:var(--t-scholar)}.tier-sage{--tc:var(--t-sage)}.tier-master{--tc:var(--t-master)}.tier-grand{--tc:var(--t-grand)}
.stars{color:#ffd77a;letter-spacing:1px;font-size:11px;white-space:nowrap}.stars s{color:#ffffff26;text-decoration:none}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chips .chip{font-size:11px;padding:4px 9px;border-radius:999px;background:#ffffff10;border:1px solid #ffffff22;color:var(--muted);display:inline-flex;gap:6px;align-items:center}
.lv-badge{flex:0 0 auto;display:grid;place-items:center;width:40px;height:44px;font:700 17px var(--caps);color:#2a1a08;background:linear-gradient(180deg,#ffe7b0,#d6a54c);clip-path:polygon(50% 0,100% 22%,100% 78%,50% 100%,0 78%,0 22%);text-shadow:0 1px 0 #fff6}
.lv-badge.pop{animation:lvpop .6s cubic-bezier(.2,.9,.3,1.4)}
@keyframes lvpop{0%{transform:scale(1)}40%{transform:scale(1.5);filter:brightness(1.6)}100%{transform:scale(1)}}
.xpbar{height:8px;border-radius:5px;background:#231f38;overflow:hidden;box-shadow:inset 0 1px 3px #0009}
.xpbar i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#c9922c,#ffe49a);box-shadow:0 0 12px #f0ce8988}
.xpbar.big{height:12px}

/* ---------------------------------------------------------------- l'atrio */
.hub{border-top:1px solid #8171a84d;padding:26px 0 34px}
.career-strip{display:grid;grid-template-columns:auto 1fr auto 1.4fr;gap:12px;align-items:stretch;margin-bottom:26px}
.career-strip>*{border:1px solid var(--line);border-radius:12px;background:#0f1324d9;padding:10px 14px;display:flex;align-items:center;gap:12px;min-width:0;text-align:left}
.cs-me img{width:46px;height:46px;border-radius:50%;object-fit:cover;object-position:50% 15%;border:2px solid var(--gold2)}
.cs-me b{display:block;font:600 19px var(--serif);color:#fff0d5}.cs-me small{color:var(--gold);font-size:11px;letter-spacing:.5px}
.cs-level>div{flex:1;min-width:0}.cs-level small{display:block;margin-top:6px;font-size:11px;color:var(--dim)}
.cs-renown .tier-ico{width:40px;height:40px;display:grid;place-items:center;border-radius:50%;font-size:20px;color:#1b1322;background:var(--tc);box-shadow:0 0 18px color-mix(in srgb,var(--tc) 60%,transparent)}
.cs-renown b{display:block;font:700 22px var(--serif);color:var(--tc)}.cs-renown small{font-size:11px;color:var(--muted);letter-spacing:1px;text-transform:uppercase}
.cs-quests{flex-direction:column;align-items:stretch;gap:6px}
.cs-quests .eyebrow{margin:0}
.q-chip{display:grid;grid-template-columns:1fr 70px auto;gap:8px;align-items:center;font-size:11.5px;color:var(--muted)}
.q-chip .q-txt{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.q-chip .q-bar{height:5px;border-radius:3px;background:#231f38;overflow:hidden}.q-chip .q-bar i{display:block;height:100%;background:var(--teal)}
.q-chip small{font-size:10.5px;color:var(--dim);min-width:48px;text-align:right}
.q-chip.done .q-txt{color:var(--green)}.q-chip.done .q-bar i{background:var(--green)}.q-chip.done small{color:var(--green)}
.mode-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.mode-tile{position:relative;overflow:hidden;min-height:190px;padding:0;border-radius:14px;border-color:#76618b;background:#111525;text-align:left;display:flex;align-items:flex-end}
.mode-tile .mt-img{position:absolute;inset:0;background:center 22%/cover no-repeat;opacity:.62;transition:scale .6s,opacity .3s}
.mode-tile .mt-img.trophy{background-size:auto 84%;background-position:86% 50%;opacity:.95;filter:drop-shadow(0 10px 30px #f0ce8955)}
.mode-tile:after{content:'';position:absolute;inset:0;background:linear-gradient(100deg,#0a0d1cf5 25%,#0a0d1c99 60%,transparent)}
.mode-tile:hover:not(:disabled) .mt-img{scale:1.06;opacity:.8}
.mode-tile:hover:not(:disabled){border-color:var(--gold);box-shadow:0 10px 40px #000a,0 0 0 1px #f0ce8944}
.mode-tile .mt-body{position:relative;z-index:1;padding:18px 18px 16px;display:flex;flex-direction:column;gap:4px;max-width:78%}
.mode-tile .eyebrow{margin:0;font-size:9.5px}
.mode-tile b{font:600 30px/1 var(--serif);color:#fff0d5}
.mode-tile small{font-size:12px;color:#e5d9ec;line-height:1.4}
.mode-tile .mt-dot{position:absolute;top:14px;right:14px;z-index:2;width:11px;height:11px;border-radius:50%;background:#ff8a3d;box-shadow:0 0 0 3px #ff8a3d44,0 0 14px #ff8a3d;animation:pulse 1.6s infinite}
.mode-tile.mt-cups{border-color:#b08d4a}
@media(max-width:1100px){.career-strip{grid-template-columns:1fr 1fr}.cs-quests{grid-column:1/-1}}
@media(max-width:760px){.mode-tiles{grid-template-columns:1fr 1fr;gap:10px}.mode-tile{min-height:150px}.mode-tile b{font-size:23px}.mode-tile .mt-body{max-width:100%;padding:14px}.career-strip{grid-template-columns:1fr;gap:8px}}
@media(max-width:420px){.mode-tile{min-height:132px}.mode-tile b{font-size:20px}.mode-tile small{font-size:11px}}

/* ----------------------------------------------------- le finestre comuni */
.mode-dlg{width:min(1100px,96vw)}
.mode-dlg .dlg-body{min-height:200px}
.cups-lead{font-size:14px;color:var(--muted);max-width:760px;margin:-4px 0 18px}
.big-go{padding:14px 22px;font-size:15px}
.segmented.wrap{flex-wrap:wrap}
.pz{font:600 11.5px Inter;padding:3px 9px;border-radius:999px;background:#2a2010;border:1px solid #c9a25a;color:#ffe2a6;white-space:nowrap}
.pz.gilded{background:linear-gradient(180deg,#ffe49a,#c9922c);color:#2b1606;border-color:#fff0c4}
.pz.ink{background:#141a30;border-color:#7d86c9;color:#cdd3ff}.pz.xp{background:#14291f;border-color:#5dbb88;color:var(--green)}
.pz.back{background:#2a1408;border-color:#ff8a3d;color:#ffc79a}

/* ----------------------------------------------------------- l'esibizione */
.exh{display:grid;grid-template-columns:1.05fr 1fr;gap:18px;align-items:start}
.rival-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;max-height:64dvh;overflow:auto;padding:2px}
.rival-pick{display:flex;gap:9px;align-items:center;padding:7px;text-align:left;border-radius:10px;background:#111526}
.rival-pick img{width:44px;height:52px;object-fit:cover;object-position:50% 15%;border-radius:7px;flex:0 0 auto}
.rival-pick b{display:block;font-size:12px;line-height:1.2;color:#fff0d5}
.rival-pick small{display:block;font-size:10.5px;color:var(--dim);margin-top:2px}
.rival-pick.on{border-color:var(--gold);background:#2a2340;box-shadow:0 0 0 1px var(--gold),0 0 20px #f0ce8933}
.rival-pick:disabled img{filter:grayscale(1) brightness(.5)}
.rival-card{display:grid;grid-template-columns:120px 1fr;gap:14px;border:1px solid var(--line2);border-radius:12px;padding:12px;background:linear-gradient(135deg,#1c1830,#111526)}
.rival-card img{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:50% 15%;border-radius:8px;box-shadow:0 10px 30px #000a}
.rival-card h3{font:600 26px/1.05 var(--serif);margin:0 0 4px;color:#fff0d5}
.rival-card .eyebrow{margin-bottom:4px}
.rival-card .creed{font-size:12.5px;color:var(--muted);margin:8px 0 6px;line-height:1.45}
.rival-card .quote{font:italic 500 16px/1.3 var(--serif);color:#ffe2a6;margin:0 0 8px}
.rival-card .rc-meta{font-size:11px;color:var(--dim);margin:0}
.exh-row{display:flex;flex-direction:column;gap:6px;margin-top:14px;font-size:11px;letter-spacing:1.6px;text-transform:uppercase;color:var(--gold);font-weight:600}
.exh-row small{text-transform:none;letter-spacing:0;color:var(--dim);font-weight:400;font-size:11.5px;line-height:1.45}
.exh-row.two{flex-direction:row;gap:12px}.exh-row.two label{flex:1;display:flex;flex-direction:column;gap:6px}
.exh-row select{text-transform:none;letter-spacing:0;font-weight:400;color:var(--ink)}
.exh-row .segmented button{font-size:12px;padding:7px 10px;letter-spacing:0;text-transform:none}
.arena-pick{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.arena-pick button{height:54px;padding:0;position:relative;overflow:hidden;background:#14182b center/cover;border-radius:8px;text-transform:none;letter-spacing:0}
.arena-pick button span{position:absolute;inset:auto 0 0;padding:4px 6px;font-size:10.5px;background:linear-gradient(transparent,#000c);color:#fff;text-align:left;font-weight:500}
.arena-pick button.on{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold)}
.exh-side .big-go{width:100%;margin-top:16px}
@media(max-width:860px){.exh{grid-template-columns:1fr}.rival-grid{max-height:none;grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}.exh-side{order:-1}}
@media(max-width:480px){.rival-card{grid-template-columns:86px 1fr}.rival-card h3{font-size:21px}.exh-row.two{flex-direction:column}.rival-grid{grid-template-columns:1fr 1fr}}

/* ---------------------------------------------------------------- i tornei */
.cups{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:14px}
.cup{position:relative;display:grid;grid-template-columns:110px 1fr;gap:14px;padding:16px;border:1px solid var(--line2);border-radius:14px;background:linear-gradient(140deg,var(--cup-bg,#1a1830),#10131f 70%);overflow:hidden}
.cup:before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 12% 30%,var(--cup-glow,#f0ce8933),transparent 45%);pointer-events:none}
.cup-bronze{--cup-bg:#2a1c12;--cup-glow:#cd8b4a40}.cup-silver{--cup-bg:#1c2230;--cup-glow:#cfe0ff38}.cup-gold{--cup-bg:#2b2410;--cup-glow:#ffd76a44}.cup-magma{--cup-bg:#2a0f08;--cup-glow:#ff6a2a55;border-color:#ff8a3d88}.cup-weekly{--cup-bg:#16202a;--cup-glow:#8fe3de38;border-color:#8fe3de66;grid-column:1/-1}
.cup-trophy{width:110px;height:130px;object-fit:contain;filter:drop-shadow(0 10px 24px #000c);position:relative}
.cup.locked .cup-trophy{filter:grayscale(1) brightness(.35)}
.cup-body{position:relative;min-width:0}
.cup-body .eyebrow{margin-bottom:4px}.cup-body h3{font:600 24px var(--serif);margin:0 0 4px;color:#fff0d5}
.cup-body p{font-size:12.5px;color:var(--muted);margin:0 0 10px;line-height:1.45}
.cup-faces{display:flex;margin-bottom:10px}
.cup-faces img{width:30px;height:30px;border-radius:50%;object-fit:cover;object-position:50% 15%;border:2px solid #10131f;margin-right:-7px}
.cup-faces img.boss{width:36px;height:36px;margin-left:14px;border-color:#ff8a3d;box-shadow:0 0 12px #ff8a3d}
.cup-prize{display:flex;flex-wrap:wrap;gap:5px;align-items:center;font-size:11px;color:var(--dim);margin-bottom:12px}
.cup-foot{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.cup-foot .lock{font-size:12px;color:var(--dim)}.cup-foot .won{font:600 13px Inter;color:var(--gold)}
.br-head{display:flex;gap:16px;align-items:center;margin-bottom:16px}
.br-head img{width:74px;height:84px;object-fit:contain;filter:drop-shadow(0 8px 18px #000b)}
.br-head p{font-size:13px;color:var(--muted);margin:0 0 8px}
.bracket{display:grid;grid-template-columns:repeat(3,minmax(190px,1fr)) minmax(150px,.8fr);gap:16px;overflow-x:auto;padding:4px 2px 10px}
.br-col{display:grid;grid-template-rows:auto 1fr;gap:8px;min-width:0}
.br-list{display:flex;flex-direction:column;justify-content:space-around;gap:12px}
.br-col>.eyebrow{margin:0 0 2px;text-align:center}
.br-match{border:1px solid var(--line);border-radius:10px;background:#10142299;overflow:hidden;position:relative}
.br-match.mine{border-color:#c9a25a}
.br-match.live{border-color:var(--teal);box-shadow:0 0 0 1px var(--teal),0 0 20px #8fe3de44}
.br-match.live:after{content:'⚔︎';position:absolute;right:8px;top:50%;translate:0 -50%;font-size:20px;color:var(--teal);animation:pulse 1s infinite}
.br-slot{display:flex;align-items:center;gap:8px;padding:6px 8px;font-size:12.5px;min-width:0}
.br-slot+.br-slot{border-top:1px solid #ffffff10}
.br-slot img{width:26px;height:26px;border-radius:50%;object-fit:cover;object-position:50% 15%;flex:0 0 auto}
.br-slot i{width:26px;height:26px;border-radius:50%;background:#ffffff0d;flex:0 0 auto}
.br-slot span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.br-slot small{font-size:10px;color:var(--dim)}
.br-slot.you span{color:var(--gold);font-weight:700}
.br-slot.win{background:linear-gradient(90deg,#f0ce8922,transparent)}.br-slot.win span{font-weight:700;color:#fff3d6}
.br-slot.lose{opacity:.42}.br-slot.lose span{text-decoration:line-through;text-decoration-color:#fff5}
.br-match.tbd{opacity:.4}
.br-note{margin:0;padding:3px 8px 6px;font-size:10.5px;color:var(--dim);font-style:italic}
.br-champ{display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px 8px;border:1px dashed var(--line2);border-radius:12px;text-align:center}
.br-champ span{font:600 40px var(--serif);color:var(--line2)}
.br-champ.set{border:1px solid var(--gold);background:radial-gradient(circle,#f0ce8926,transparent 70%);box-shadow:0 0 30px #f0ce8933}
.br-champ img{width:64px;height:64px;border-radius:50%;object-fit:cover;object-position:50% 15%;border:2px solid var(--gold)}
.br-champ b{font:600 16px var(--serif);color:var(--gold)}
.br-foot{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:12px}
.br-status{color:var(--teal);font-size:13px;margin:10px 0 0}
.ceremony{position:relative;text-align:center;padding:20px 10px 10px;overflow:hidden;isolation:isolate}
.ceremony .rays{position:absolute;inset:-40%;z-index:-1;background:repeating-conic-gradient(from 0deg,#f0ce8914 0 10deg,transparent 10deg 20deg);animation:spin 40s linear infinite;-webkit-mask:radial-gradient(circle,#000 20%,transparent 60%);mask:radial-gradient(circle,#000 20%,transparent 60%)}
.ceremony:not(.champ) .rays{opacity:.4}
.cer-trophy{width:min(240px,50vw);height:auto;filter:drop-shadow(0 20px 40px #000c) drop-shadow(0 0 40px #f0ce8966);animation:cer-rise 1.1s cubic-bezier(.2,.9,.3,1.2) both}
.cer-ribbon{margin:0 auto 10px;width:90px;height:110px;display:grid;place-items:center;font:700 40px var(--serif);color:#2a1a08;background:linear-gradient(180deg,#ffe7b0,#c9922c);clip-path:polygon(0 0,100% 0,100% 100%,50% 82%,0 100%);animation:cer-rise .9s ease-out both}
.ceremony h2{font-size:56px;color:var(--gold);margin:6px 0}
.ceremony p{color:var(--muted)}
.cer-prize,.cer-ach{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:12px 0}
.cer-lv{color:var(--gold);font-weight:700}
.ach-pop{font-size:12.5px;padding:6px 12px;border-radius:999px;background:#2d2413;border:1px solid var(--gold);color:#ffe9b8;animation:ach-in .6s cubic-bezier(.2,.9,.3,1.3) both}
@keyframes cer-rise{0%{transform:translateY(60px) scale(.6);opacity:0}100%{transform:none;opacity:1}}
@keyframes ach-in{0%{transform:scale(.4);opacity:0}100%{transform:none;opacity:1}}
@keyframes spin{to{rotate:360deg}}
@media(max-width:760px){.cups{grid-template-columns:1fr}.cup{grid-template-columns:76px 1fr;padding:12px}.cup-trophy{width:76px;height:96px}.bracket{display:flex;flex-direction:column;gap:16px;overflow:visible}.br-col>.eyebrow{text-align:left}.br-list{display:grid;grid-template-columns:1fr 1fr;gap:8px}.br-col:nth-child(3) .br-list,.br-col.champ .br-list{grid-template-columns:minmax(0,260px);justify-content:center}.ceremony h2{font-size:42px}.br-head img{width:54px;height:64px}}

/* ------------------------------------------------------- i Turning Points */
.pz-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.pz-card{position:relative;padding:0;overflow:hidden;min-height:150px;border-radius:12px;text-align:left;display:flex;align-items:flex-end;background:#111525}
.pz-card .pz-img{position:absolute;inset:0;background:center 20%/cover;opacity:.6;transition:scale .5s}
.pz-card:hover:not(:disabled) .pz-img{scale:1.06}
.pz-card:after{content:'';position:absolute;inset:0;background:linear-gradient(transparent 20%,#0a0d1cf2 85%)}
.pz-card .pz-txt{position:relative;z-index:1;padding:12px;display:flex;flex-direction:column;gap:2px}
.pz-card small{font-size:10.5px;color:var(--gold);letter-spacing:1px}
.pz-card b{font:600 21px/1.05 var(--serif);color:#fff0d5}
.pz-card em{font-size:11px;color:#ffc79a;font-style:normal}
.pz-card.daily{border-color:#ff8a3d;box-shadow:0 0 0 1px #ff8a3d66,0 0 22px #ff8a3d33}
.pz-card .pz-ok{position:absolute;z-index:2;top:10px;right:10px;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--green);color:#10301f;font-style:normal;font-weight:800}
.pz-detail{display:grid;grid-template-columns:240px 1fr;gap:22px;align-items:start}
.pz-detail h3{font:600 34px/1.05 var(--serif);margin:0 0 10px;color:#fff0d5}
.pz-story{font:italic 500 17px/1.45 var(--serif);color:#efe2c6}
.pz-goal{font-size:13px;color:var(--muted);border-left:3px solid var(--gold);padding-left:12px}
.pz-hint{margin:12px 0;font-size:13px;color:var(--muted)}.pz-hint summary{cursor:pointer;color:var(--gold)}
body.puzzle-on .instruction:before{content:'⚑ WIN THIS TURN · ';color:#ffc79a;font-weight:700;letter-spacing:.5px}
@media(max-width:700px){.pz-detail{grid-template-columns:1fr}.pz-art{max-width:200px;margin:auto}.pz-grid{grid-template-columns:1fr 1fr}.pz-card b{font-size:17px}}

/* ------------------------------------------------- la Sala del Cronista */
.hall-tabs{display:flex;gap:4px;flex-wrap:wrap;border-bottom:1px solid var(--line);margin-bottom:16px;padding-bottom:8px}
.hall-tabs button{background:none;border-color:transparent;color:var(--muted);padding:8px 12px;font-size:12.5px}
.hall-tabs button.on{background:#322943;color:#ffe4a9;border-color:#9881af}
.hall-over{display:grid;grid-template-columns:220px 1fr;gap:24px;align-items:start}
.hall-main h3{font:600 34px var(--serif);margin:0 0 12px;color:#fff0d5}
.hall-main h3 .text-button{font:500 12px Inter;margin-left:8px}
.cs-level{display:flex;gap:12px;align-items:center}
.cs-level.big .lv-badge{width:52px;height:58px;font-size:26px}
.cs-level.big>div{flex:1}.cs-level.big small{display:block;margin-top:6px;font-size:12px;color:var(--dim)}
.tier-ladder{display:flex;gap:4px;margin:18px 0 8px;overflow-x:auto}
.tier-step{flex:1;min-width:64px;display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 4px;border-radius:10px;border:1px solid #ffffff10;opacity:.4}
.tier-step i{font-style:normal;font-size:20px;color:var(--tc)}.tier-step small{font-size:10px;color:var(--muted);text-align:center}
.tier-step.past{opacity:.75}
.tier-step.on{opacity:1;border-color:var(--tc);background:color-mix(in srgb,var(--tc) 14%,transparent);box-shadow:0 0 18px color-mix(in srgb,var(--tc) 35%,transparent)}
.renown-line{font-size:13px;color:var(--muted)}.renown-line b{color:var(--gold)}
.hall-stats{list-style:none;padding:0;margin:14px 0 0;display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.hall-stats li{padding:10px;border-radius:10px;background:#121527;border:1px solid var(--line);text-align:center}
.hall-stats b{display:block;font:700 24px var(--serif);color:var(--gold)}.hall-stats span{font-size:11px;color:var(--muted)}.hall-stats small{display:block;font-size:10.5px;color:var(--dim)}
.quest-list{display:flex;flex-direction:column;gap:10px}
.quest{display:grid;grid-template-columns:1fr auto auto;gap:14px;align-items:center;padding:14px;border-radius:12px;border:1px solid var(--line);background:#121527}
.quest .q-chip{font-size:13px;grid-template-columns:1fr 120px auto}
.quest .q-rew{font-size:11.5px;color:var(--gold)}
.quest.done{border-color:#5dbb88}
.road{display:flex;gap:8px;overflow-x:auto;padding:8px 2px 14px;scroll-snap-type:x proximity}
.road-node{flex:0 0 96px;scroll-snap-align:center;display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 6px;border-radius:12px;border:1px solid var(--line);background:#111526;opacity:.6;text-align:center}
.road-node b{font:700 18px var(--serif);color:var(--muted)}
.road-node img{width:44px;height:58px;object-fit:cover;border-radius:4px}
.road-node .rd{font-size:26px;color:#d9c49a;line-height:58px}.road-node .rd.gilded{color:#ffd76a;text-shadow:0 0 12px #ffd76a}
.road-node small{font-size:10px;color:var(--dim);min-height:2.4em}
.road-node.got{opacity:1;border-color:var(--gold2);background:linear-gradient(180deg,#2a2213,#111526)}.road-node.got b{color:var(--gold)}
.road-node.next{opacity:1;border-color:var(--teal);box-shadow:0 0 0 1px var(--teal),0 0 18px #8fe3de44}
.ach-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px}
.ach{display:grid;grid-template-columns:30px 1fr;gap:2px 10px;padding:10px;border-radius:10px;border:1px solid var(--line);background:#111526;opacity:.5}
.ach i{grid-row:span 3;font-style:normal;font-size:22px;align-self:center;text-align:center}
.ach b{font-size:13px;color:#fff0d5}.ach span{font-size:11.5px;color:var(--muted);line-height:1.35}.ach small{font-size:10.5px;color:var(--gold)}
.ach.got{opacity:1;border-color:#9b7d3f;background:linear-gradient(135deg,#2a2213,#111526)}
.rival-rows{display:flex;flex-direction:column;gap:6px}
.rival-row{display:grid;grid-template-columns:42px 1fr auto 60px auto;gap:12px;align-items:center;padding:6px 10px;border-radius:10px;background:#111526;border:1px solid var(--line)}
.rival-row img{width:42px;height:42px;border-radius:50%;object-fit:cover;object-position:50% 15%}
.rival-row b{display:block;font-size:13.5px;color:#fff0d5}.rival-row small{font-size:11px;color:var(--dim)}
.rr-rec{font:700 16px var(--serif);color:var(--muted);text-align:center}.rr-rec.up{color:var(--green)}.rr-rec.down{color:#ffb2bd}
.cabinet{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;padding:20px;border-radius:14px;background:linear-gradient(180deg,#1b1526,#0d0f19);border:1px solid #5d4a35;box-shadow:inset 0 -20px 40px #0008}
.shelf{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;padding-bottom:12px;border-bottom:6px solid #3b2a1a}
.shelf img{height:130px;width:auto;max-width:100%;object-fit:contain;filter:grayscale(1) brightness(.18) drop-shadow(0 0 1px #fff3);transition:filter .3s}
.shelf.got img{filter:drop-shadow(0 12px 20px #000c) drop-shadow(0 0 22px #f0ce8944)}
.shelf b{font:600 15px var(--serif);color:#fff0d5}.shelf small{font-size:11px;color:var(--dim)}
.hall-pane h4{font:600 13px Inter;letter-spacing:1.6px;text-transform:uppercase;color:var(--gold);margin:18px 0 10px}.hall-pane h4 small{text-transform:none;letter-spacing:0;color:var(--dim);font-weight:400;margin-left:8px}
.backs{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px}
.back-pick{display:flex;flex-direction:column;gap:6px;align-items:center;padding:10px;border-radius:12px;text-align:center}
.back-pick img{width:84px;aspect-ratio:3/4;object-fit:cover;border-radius:6px;box-shadow:0 8px 18px #000a}
.back-pick b{font-size:12px}.back-pick small{font-size:10.5px;color:var(--dim)}
.back-pick.on{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold)}
.back-pick:disabled img{filter:grayscale(1) brightness(.4)}
.back-pick.magma:not(:disabled) img{box-shadow:0 0 18px #ff6a2a88}
.titles{display:flex;flex-wrap:wrap;gap:6px}.titles button{font-size:12px;padding:6px 11px;border-radius:999px}.titles button.on{border-color:var(--gold);color:#ffe4a9;background:#322943}
.avatars{display:grid;grid-template-columns:repeat(auto-fill,minmax(54px,1fr));gap:6px;max-height:240px;overflow:auto}
.avatars button{padding:2px;border-radius:50%;aspect-ratio:1}.avatars img{width:100%;height:100%;border-radius:50%;object-fit:cover;object-position:50% 15%}
.avatars button.on{border-color:var(--gold);box-shadow:0 0 0 2px var(--gold)}
.hist{width:100%;border-collapse:collapse;font-size:12.5px}
.hist th{text-align:left;font-size:10px;letter-spacing:1.5px;color:var(--gold);text-transform:uppercase;padding:6px 8px;border-bottom:1px solid var(--line2)}
.hist td{padding:7px 8px;border-bottom:1px solid #ffffff0d;color:var(--muted)}
.hist tr.w td:nth-child(4){color:var(--green);font-weight:600}.hist tr.l td:nth-child(4){color:#ffb2bd}
@media(max-width:760px){.hall-over{grid-template-columns:1fr}.hall-av{width:170px;margin:auto}.hall-stats{grid-template-columns:repeat(2,1fr)}.cabinet{grid-template-columns:repeat(3,1fr);padding:12px}.shelf img{height:90px}.quest{grid-template-columns:1fr;gap:8px}.quest .q-chip{grid-template-columns:1fr 80px auto}.rival-row{grid-template-columns:38px 1fr auto}.rival-row .stars{display:none}.rival-row button{grid-column:2/-1;justify-self:start;padding:6px 10px}.hist{font-size:11px}.hist th:nth-child(5),.hist td:nth-child(5),.hist th:nth-child(6),.hist td:nth-child(6){display:none}.hall-main h3{font-size:27px}}

/* ------------------------------------------------ lo scontro di presentazione */
.vs{position:fixed;inset:0;z-index:190;display:grid;grid-template-columns:1fr 1fr;background:#05060ce8;overflow:hidden;cursor:pointer;transition:opacity .35s}
.vs.out{opacity:0}
.vs-side{position:relative;overflow:hidden;display:flex;align-items:flex-end}
.vs-side img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 20%}
.vs-me{clip-path:polygon(0 0,100% 0,88% 100%,0 100%);margin-right:-6vw}
.vs-opp{clip-path:polygon(12% 0,100% 0,100% 100%,0 100%);margin-left:-6vw}
.vs-me:after,.vs-opp:after{content:'';position:absolute;inset:0;background:linear-gradient(transparent 40%,#05060cf0)}
.vs-me:before{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,#2b6cff33,transparent 60%);mix-blend-mode:screen}
.vs-opp:before{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(270deg,#ff2b4a33,transparent 60%);mix-blend-mode:screen}
.vs-id{position:relative;z-index:2;padding:0 7vw 22vh 4vw;display:flex;flex-direction:column;gap:6px}
.vs-opp .vs-id{align-items:flex-end;text-align:right;margin-left:auto;padding:0 4vw 22vh 7vw}
.vs-id b{font:700 clamp(28px,4.4vw,60px)/1 var(--serif);color:#fff3d6;text-shadow:0 4px 20px #000}
.vs-id small{font-size:13px;color:var(--gold);letter-spacing:1px}
.vs-tier{font:700 14px Inter;color:var(--tc)}
.vs-id .stars{font-size:16px}
.vs-mid{position:absolute;left:50%;top:44%;translate:-50% -50%;z-index:3;pointer-events:none}
.vs-mid span{display:block;font:400 clamp(90px,15vw,190px)/1 var(--comic);color:#ffe9b0;-webkit-text-stroke:4px #2a1606;text-shadow:0 0 40px #ffb84a,0 8px 0 #2a1606}
.vs.boss .vs-mid span{color:#ffb070;text-shadow:0 0 50px #ff5a1a,0 8px 0 #2a0606}
.vs.boss .vs-opp:before{background:linear-gradient(270deg,#ff6a1a66,transparent 70%)}
.vs-foot{position:absolute;left:0;right:0;bottom:4vh;z-index:4;display:flex;flex-direction:column;align-items:center;gap:10px;padding:0 16px;text-align:center}
.vs-line{font:italic 600 clamp(17px,2.2vw,26px)/1.3 var(--serif);color:#fff3d6;max-width:760px;margin:0;text-shadow:0 2px 12px #000}
.vs-go{background:none;border:0;color:var(--gold);font-size:12px;letter-spacing:2px;text-transform:uppercase;animation:pulse 1.6s infinite}
@media(max-width:700px){.vs{grid-template-columns:1fr;grid-template-rows:1fr 1fr}.vs-me{clip-path:polygon(0 0,100% 0,100% 88%,0 100%);margin:0 0 -8vh}.vs-opp{clip-path:polygon(0 12%,100% 0,100% 100%,0 100%);margin:-8vh 0 0}.vs-id,.vs-opp .vs-id{padding:0 18px 12vh}.vs-me .vs-id{padding-bottom:14vh}.vs-opp .vs-id{padding-bottom:24vh}.vs-mid{top:50%}.vs-foot{bottom:2.5vh}}

/* ------------------------------------------------- il racconto di fine partita */
.result-career{display:flex;flex-direction:column;gap:12px;align-items:center;margin:0 0 18px}
.result-career:empty{display:none}
.res-quote{display:flex;gap:12px;align-items:center;max-width:520px;text-align:left}
.res-quote img{width:54px;height:54px;border-radius:50%;object-fit:cover;object-position:50% 15%;border:2px solid var(--gold2);flex:0 0 auto}
#result .res-quote p{font:italic 500 17px/1.35 var(--serif);color:#f3e3c2;margin:0}.res-quote small{display:block;font:500 11px Inter;color:var(--dim);font-style:normal;margin-top:4px}
.res-xp{display:flex;gap:12px;align-items:center;width:min(460px,100%);text-align:left}
.res-xp>div{flex:1}.res-xp small{display:block;margin-top:6px;font-size:12px;color:var(--muted)}.res-xp b{color:var(--gold)}.res-xp b.up{color:var(--green)}.res-xp b.down{color:#ffb2bd}.res-xp span[class^=tier]{color:var(--tc);font-weight:600}
.res-quests,.res-ach,.res-lv{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.res-lv:empty{display:none}
.res-q{font-size:12px;padding:5px 11px;border-radius:999px;background:#14291f;border:1px solid #5dbb88;color:var(--green);animation:ach-in .5s both}.res-q em{font-style:normal;color:#cfeedd;margin-left:4px}
.lv-up{display:flex;flex-wrap:wrap;gap:5px;align-items:center;justify-content:center;font:700 14px Inter;color:var(--gold);padding:6px 12px;border-radius:12px;background:#2a2213;border:1px solid var(--gold);animation:ach-in .5s both}

/* ------------------------------------------------------- il rivale parla */
#taunt{position:fixed;z-index:120;max-width:260px;padding:10px 14px;border-radius:14px;background:#fff6e2;color:#2a1a10;font:600 14px/1.3 var(--round);box-shadow:0 10px 30px #000a;opacity:0;transform:translateY(-6px) scale(.9);transform-origin:var(--tail,20px) 0;transition:opacity .25s,transform .3s cubic-bezier(.2,.9,.3,1.3);pointer-events:none}
#taunt:before{content:'';position:absolute;top:-8px;left:calc(var(--tail,20px) - 8px);border:8px solid transparent;border-top:0;border-bottom-color:#fff6e2}
#taunt.show{opacity:1;transform:none}

/* --------------------------------------------------------------- i dorsi --
   Il tuo dorso sulle tue carte, quello del rivale sulle sue (modes.js). */
.card.back{background-image:var(--back-me,url(./assets/card_back_sm.webp))}
.field.opp .card.back,#oppHud .card.back{background-image:var(--back-opp,url(./assets/card_back_sm.webp))}
.hud .ohand i{background-image:var(--back-opp,url(./assets/card_back_sm.webp))}
body.bkm-magma .card.back:before,body.bko-magma .field.opp .card.back:before{content:'';position:absolute;inset:0;border-radius:inherit;background:var(--lava,linear-gradient(#ff6a1a,#ffb347)) 0 0/80px 80px;mix-blend-mode:screen;opacity:.85;-webkit-mask:url(./assets/backs/magma_mask.webp) center/100% 100%;mask:url(./assets/backs/magma_mask.webp) center/100% 100%;animation:lava-back 9s linear infinite;pointer-events:none}
body.bkm-magma:not(.bko-magma) .field.opp .card.back:before{display:none}
@keyframes lava-back{to{background-position:80px 160px}}
body.reduced .card.back:before{animation:none}

/* La mano dell'avversario scoperta (Francis Walsingham): le carte vere al posto dei dorsi. */
.hud .ohand.spied i.rev{background-size:cover;background-position:50% 18%;outline:1px solid #ffd77a99;box-shadow:0 0 8px #ffd77a55,0 2px 5px #0008}
.hud .ohand.spied:before{content:'👁';font-size:12px;margin-right:2px;filter:drop-shadow(0 0 4px #ffd77a)}

/* ================================================ lo srotolamento, seconda versione
   Raggi del colore della carta piu' rara, il sigillo che si crepa, lo scoppio, le
   carte che volano fuori, le colonne di luce, l'epica al centro nella lava, le gocce
   d'inchiostro, il conto finale; e la pergamena d'ossidiana con la sua bottega. */
.unroll-stage{--rc:#e8dcc0;--ray:.14}
.unroll-stage.best-rare{--rc:#9fd0ff}
.unroll-stage.best-legend{--rc:#f4d391}
.unroll-stage.best-epic{--rc:#ff6a1a}
.u-rays{position:absolute;left:50%;top:44%;width:170vmax;aspect-ratio:1;translate:-50% -50%;z-index:0;pointer-events:none;border-radius:50%;
 background:repeating-conic-gradient(from 0deg,color-mix(in srgb,var(--rc) 55%,transparent) 0 7deg,transparent 7deg 18deg);
 -webkit-mask:radial-gradient(circle,#000 6%,transparent 58%);mask:radial-gradient(circle,#000 6%,transparent 58%);opacity:var(--ray);transition:opacity .6s;animation:spin 30s linear infinite}
.unroll-stage.burst .u-rays{--ray:.55;opacity:.55;animation-duration:14s}
.unroll-stage.best-epic.burst .u-rays{opacity:.75}
.u-dark{position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(ellipse at 50% 45%,#2a0500aa,#000 75%);opacity:0;transition:opacity .5s}
.unroll-stage.rumble .u-dark{opacity:.75}
.unroll-stage>*:not(.u-rays):not(.u-dark):not(.u-fx):not(.u-show){position:relative;z-index:2}
.u-ink-total{margin:-6px 0 0;font:600 13px Inter;color:#bfe3ff;letter-spacing:.5px}
.u-ink-total b{font:700 16px var(--serif);color:#e6f3ff}
.u-scroll{animation:u-float 3.4s ease-in-out infinite}
.unroll-stage.burst .u-scroll{animation:none}
@keyframes u-float{50%{translate:0 -8px}}
/* il sigillo che si crepa e lascia filtrare la luce */
.seal .crk{position:absolute;inset:8px;border-radius:50%;pointer-events:none;opacity:0;transition:opacity .25s;z-index:2;
 background:linear-gradient(115deg,transparent 46%,var(--rc,#fff) 48%,#fff 50%,var(--rc,#fff) 52%,transparent 54%)}
.seal .crk.k2{background:linear-gradient(35deg,transparent 46%,var(--rc,#fff) 48%,#fff 50%,var(--rc,#fff) 52%,transparent 54%),linear-gradient(160deg,transparent 47%,var(--rc,#fff) 49%,transparent 52%)}
.unroll-stage .seal{--rc:inherit}
.seal.cr1 .k1,.seal.cr2 .k1,.seal.cr2 .k2{opacity:1;filter:drop-shadow(0 0 6px var(--glow,#fff)) drop-shadow(0 0 14px var(--glow,#fff))}
.seal.cr2{box-shadow:0 0 0 4px #0003,0 0 40px var(--glow,#fff),0 0 90px var(--glow,#fff)}
.seal.broken .crk{opacity:0}
/* lo scoppio */
.u-flash{position:fixed;inset:0;z-index:40;pointer-events:none;background:radial-gradient(circle at 50% 40%,#fff,color-mix(in srgb,var(--rc) 70%,transparent) 35%,transparent 70%);animation:u-flash .8s ease-out forwards}
@keyframes u-flash{0%{opacity:0}12%{opacity:1}100%{opacity:0}}
/* le colonne di luce sopra la carta */
.u-pillar{position:absolute;top:0;bottom:0;width:150px;translate:-50% 0;pointer-events:none;opacity:0;animation:u-pillar 1.8s ease-out forwards;
 background:linear-gradient(90deg,transparent,#fff3c477 35%,#fffbe6cc 50%,#fff3c477 65%,transparent);-webkit-mask:linear-gradient(transparent,#000 15%,#000 70%,transparent);mask:linear-gradient(transparent,#000 15%,#000 70%,transparent)}
.u-pillar.epic{width:220px;background:linear-gradient(90deg,transparent,#ff6a1a88 30%,#ffd29acc 50%,#ff6a1a88 70%,transparent);animation-duration:2.2s}
@keyframes u-pillar{0%{opacity:0;transform:scaleX(.2)}20%{opacity:1;transform:scaleX(1)}70%{opacity:.85}100%{opacity:0;transform:scaleX(1.3)}}
/* le gocce d'inchiostro dei doppioni */
.u-drop{position:absolute;width:12px;height:12px;border-radius:50% 50% 50% 0;rotate:-45deg;background:radial-gradient(circle at 35% 35%,#bfe3ff,#2c5d8a 60%,#102a44);box-shadow:0 0 8px #6fb4ff99}
/* le carte: la nuova riceve il timbro */
.u-new{font-size:13px;padding:5px 9px;rotate:8deg}
.u-card.shown.aura-rare .card{box-shadow:0 0 0 2px #9fd0ff,0 0 26px #4a90d0}
.u-card.shown.aura-legend .card{box-shadow:0 0 0 2px #f4d391,0 0 34px #e7a53a}
.u-card.shown.aura-epic .card{box-shadow:0 0 0 2px #ffb03a,0 0 44px #ff3d00}
/* l'epica al centro dello schermo */
.u-show{position:fixed;inset:0;z-index:35;display:flex;align-items:center;justify-content:center;gap:clamp(18px,4vw,60px);padding:24px;cursor:pointer;
 background:radial-gradient(ellipse at 50% 50%,#2a0700fa,#080100fd 70%)}
.u-show:before{content:'';position:absolute;inset:0;pointer-events:none;opacity:.2;mix-blend-mode:screen;filter:blur(1.5px);background:var(--lava,linear-gradient(#ff6a1a,#000)) 0 0/420px 420px;animation:lava-back 9s linear infinite;
 -webkit-mask:radial-gradient(ellipse at 50% 50%,transparent 30%,#000 80%);mask:radial-gradient(ellipse at 50% 50%,transparent 30%,#000 80%)}
.u-show-card{position:relative;width:min(300px,62vw);filter:drop-shadow(0 0 30px #ff6a1a) drop-shadow(0 20px 40px #000)}
.u-show-card .card{width:100%}
.u-show-txt{position:relative;max-width:380px;text-align:left}
.u-show-txt h2{font:700 clamp(34px,5vw,56px)/1 var(--serif);color:#ffd6a8;margin:6px 0 12px;text-shadow:0 0 30px #ff6a1a}
.u-show-txt p{color:#f3dcc6;font-size:14px}.u-show-txt .eyebrow{color:#ffb070}
.u-show-txt small{color:#d9b89a;letter-spacing:2px;text-transform:uppercase;font-size:11px;animation:pulse 1.6s infinite}
@media(max-width:700px){.u-show{flex-direction:column;gap:14px}.u-show-txt{text-align:center}.u-show-card{width:min(220px,60vw)}}
/* il conto */
.u-summary{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.u-summary b{font:600 13px Inter;padding:6px 12px;border-radius:999px;background:#1a1530;border:1px solid var(--line2);color:var(--ink)}
.u-summary .chip-new{background:#14291f;border-color:#5dbb88;color:var(--green)}
.u-summary .chip-ink{background:#141a30;border-color:#7d86c9;color:#cdd3ff}
.u-summary .chip-best.r-legend{border-color:#f4d391;color:#ffe9b8}.u-summary .chip-best.r-epic{border-color:#ff8a3d;color:#ffc79a;box-shadow:0 0 16px #ff6a1a66}
/* la pergamena d'ossidiana */
.u-scroll.obsidian .rod{background:linear-gradient(#3a3036,#120c10 55%,#050304);box-shadow:0 6px 14px #000c,inset 0 2px 0 #ffffff22,0 0 18px #ff6a1a55}
.u-scroll.obsidian .rod:before,.u-scroll.obsidian .rod:after{background:radial-gradient(circle at 40% 35%,#ffcf7a,#ff6a1a 45%,#5a1004)}
.u-scroll.obsidian .paper{background:radial-gradient(ellipse at 50% 50%,transparent 55%,#1a0500aa),linear-gradient(90deg,#3a2418,#6a4630 12%,#7a5438 50%,#6a4630 88%,#3a2418);box-shadow:inset 0 0 40px #ff6a1a55}
.kind-obsidian .seal{--w1:#fff0b5;--w2:#a86a10;--glow:#ffb03aee}
.scroll-art.obsidian .rod{background:linear-gradient(#3a3036,#120c10 55%,#050304);box-shadow:0 3px 6px #000a,0 0 10px #ff6a1a66}
.scroll-art.obsidian .paper{background:linear-gradient(90deg,#3a2418,#7a5438 50%,#3a2418);box-shadow:inset 0 0 12px #ff6a1a88}
.scroll-art.obsidian .seal{background:radial-gradient(circle at 35% 30%,#fff3c4,#d4831c 55%,#5a1004);box-shadow:0 0 14px #ff8a3daa,0 4px 8px #000a}
.scroll-item.obsidian{border-color:#ff8a3d88;background:linear-gradient(90deg,#2a0f08,#121527);box-shadow:inset 0 0 30px #ff6a1a1a}
.pz.obsidian{background:linear-gradient(180deg,#3a3036,#120c10);border-color:#ff8a3d;color:#ffc79a}
.road-node .rd.obsidian{color:#ff8a3d;text-shadow:0 0 12px #ff6a1a}
/* la bottega */
.scroll-shop{margin:16px 0 4px;padding:14px;border:1px solid var(--line2);border-radius:12px;background:#101424}
.scroll-shop .eyebrow{margin-bottom:10px}
.shop-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.shop-item{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 8px;border-radius:10px;border:1px solid var(--line);background:#141830;text-align:center}
.shop-item .scroll-art{width:60px;height:68px}
.shop-item b{font:600 15px var(--serif);color:#fff0d5}
.shop-item .price{font:700 14px Inter;color:#cdd3ff}
.shop-item small{font-size:10.5px;color:var(--dim);min-height:1.2em}
.shop-item.obsidian{border-color:#ff8a3d88;background:linear-gradient(180deg,#2a0f08,#141830);box-shadow:inset 0 0 24px #ff6a1a22}
.shop-item button{width:100%;padding:8px}
@media(max-width:560px){.shop-row{grid-template-columns:1fr}.shop-item{flex-direction:row;flex-wrap:wrap;justify-content:space-between;text-align:left}.shop-item .scroll-art{width:44px;height:50px;margin:0}.shop-item button{width:auto}}
@media(prefers-reduced-motion:reduce){.u-rays,.u-scroll{animation:none}}
body.reduced .u-rays,body.reduced .u-scroll{animation:none}

/* ---------------------------------------------- il costruttore automatico */
.auto-btn{border-color:#c9a25a;color:#ffe2a6}
.auto-dlg{width:min(1100px,96vw)}
.auto-top{display:flex;align-items:center;gap:14px;margin:-6px 0 14px;flex-wrap:wrap}
.auto-top small{color:var(--dim)}
.auto-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
.auto-card{display:grid;grid-template-columns:86px 1fr;gap:12px;padding:12px;border:1px solid var(--line2);border-radius:12px;background:linear-gradient(135deg,#1a1630,#111526)}
.auto-card img{width:86px;height:115px;object-fit:cover;object-position:50% 18%;border-radius:8px;box-shadow:0 6px 16px #000a}
.auto-body .eyebrow{margin-bottom:2px;font-size:9.5px}.auto-body h3{font:600 20px var(--serif);margin:0 0 4px;color:#fff0d5}
.auto-body p{font-size:12px;color:var(--muted);margin:0 0 8px;line-height:1.4}
.auto-cov{display:flex;align-items:center;gap:8px;margin-bottom:4px}.auto-cov .bar{flex:1;height:6px;border-radius:3px;background:#231f38;overflow:hidden}.auto-cov .bar i{display:block;height:100%;background:linear-gradient(90deg,#c9922c,#ffe49a)}
.auto-cov small{font-size:10.5px;color:var(--dim);white-space:nowrap}
.auto-miss{display:block;font-size:11px;color:#ffc79a;margin-bottom:8px}.auto-miss.done{color:var(--green)}
.auto-body button{padding:7px 12px;font-size:12px}
.theme-row{display:flex;gap:6px;overflow-x:auto;padding:4px 2px 10px}
.theme-row button{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px;width:84px;border-radius:10px}
.theme-row img{width:52px;height:52px;border-radius:50%;object-fit:cover;object-position:50% 15%}
.theme-row b{font-size:10.5px;line-height:1.15;text-align:center}.theme-row small{font-size:10px;color:var(--dim)}
@media(max-width:560px){.auto-card{grid-template-columns:64px 1fr}.auto-card img{width:64px;height:86px}}

/* Skanderbeg entra: la bandiera d'Albania e l'aquila a due teste dietro la sua carta */
#fx .eagle-flag,.u-fx .eagle-flag{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 44%,#e41e20f0,#8a0c0cf0 62%,#2a0202f5)}
#fx .eagle-emblem,.u-fx .eagle-emblem{position:absolute;width:min(78vw,640px);aspect-ratio:389/420;background:url(./assets/eagle.webp) center/contain no-repeat;filter:drop-shadow(0 0 24px #000a)}

/* Le prestazioni: la sfocatura dietro le finestre si ricalcola a ogni fotogramma se
   sotto qualcosa si muove (le carte che galleggiano nel menu). Con una finestra
   aperta il menu si ferma; lo srotolamento, che copre tutto, non sfoca niente. */
body:has(dialog[open]) .hero-art .card,body:has(dialog[open]) .mode-tile .mt-dot{animation-play-state:paused}
dialog.unroll::backdrop{backdrop-filter:none;background:#000}

/* ================================================================ l'Agora
   La piazza: un cassetto a destra sul computer, a tutto schermo sul telefono. */
.agora-btn{position:relative}
.agora-dot{position:absolute;top:4px;right:4px;width:9px;height:9px;border-radius:50%;background:#ff7a59;box-shadow:0 0 0 2px var(--bg),0 0 10px #ff7a59}
dialog.agora-dlg{margin:0 0 0 auto;height:100dvh;max-height:none;width:min(440px,100vw);max-width:100vw;border-radius:16px 0 0 16px;padding:0;display:flex;flex-direction:column;border-right:0;background:linear-gradient(180deg,#151a30f9,#0d1122fb)}
dialog.agora-dlg:not([open]){display:none}
dialog.agora-dlg::backdrop{background:#05061370;backdrop-filter:none}
.ag-top{display:flex;justify-content:space-between;align-items:flex-start;padding:18px 18px 8px;gap:10px}
.ag-top h2{font-size:24px;margin:0;overflow-wrap:anywhere}
.ag-top .eyebrow{margin-bottom:6px}
.ag-x{font-size:20px;line-height:1;padding:6px 12px}
.ag-tabs{display:flex;gap:4px;padding:0 14px 10px;border-bottom:1px solid var(--line)}
.ag-tabs button{flex:1;padding:8px 6px;font-size:12px;font-weight:600;border-radius:8px;background:transparent;border-color:transparent;color:var(--muted);position:relative}
.ag-tabs button.on{background:#262b47;border-color:var(--line2);color:var(--ink)}
.ag-tabs button.dot:after{content:'';position:absolute;top:5px;right:6px;width:7px;height:7px;border-radius:50%;background:#ff7a59}
.ag-body{flex:1;min-height:0;display:flex;flex-direction:column;padding:12px 14px calc(12px + var(--safe-b));overflow-y:auto;gap:8px}
.ag-body h3{font:600 11px Inter;letter-spacing:2px;text-transform:uppercase;color:var(--gold);margin:12px 0 2px}
.ag-lead{font-size:12px;color:var(--dim);margin:0}
.ag-none,.ag-wait{font-size:12.5px;color:var(--dim);text-align:center;margin:18px 0}
.ag-empty{margin:auto;text-align:center;max-width:320px}
.ag-empty h3{font:600 24px var(--serif);color:var(--ink);letter-spacing:0;text-transform:none}
.ag-empty p{font-size:13px;color:var(--muted)}
.ag-feed{flex:1;min-height:180px;overflow-y:auto;display:flex;flex-direction:column;gap:10px;padding:4px 2px 8px;overscroll-behavior:contain}
.ag-msg{display:flex;gap:8px;align-items:flex-start}
.ag-msg.mine{flex-direction:row-reverse}
.ag-face{flex:none;width:34px;height:34px;border-radius:50%;overflow:hidden;border:1px solid var(--line2);background:#1d2238;display:grid;place-items:center}
.ag-face img{width:100%;height:100%;object-fit:cover;object-position:50% 22%}
.ag-face i{font-style:normal;color:var(--gold);font-size:13px}
.ag-face.crest{border-radius:10px;border-color:#c9a25a}
.ag-face.big{width:58px;height:58px}
.ag-bubble{min-width:0;max-width:82%;background:#1b2038;border:1px solid #2f3456;border-radius:4px 14px 14px 14px;padding:7px 10px 8px}
.ag-msg.mine .ag-bubble{background:#2a2440;border-color:#4f4470;border-radius:14px 4px 14px 14px}
.ag-meta{display:flex;align-items:baseline;gap:5px;font-size:11px;color:var(--dim);flex-wrap:wrap}
.ag-meta b{color:var(--ink);font-size:12px}
.ag-meta small{color:var(--dim)}
.ag-meta em{font-style:italic;color:var(--gold2)}
.ag-meta time{margin-left:auto}
.ag-more{padding:0 6px;font-size:13px;line-height:1.2;background:none;border:0;color:var(--dim)}
.ag-txt{margin:3px 0 0;font-size:13.5px;line-height:1.45;overflow-wrap:anywhere;white-space:pre-wrap}
.ag-sys{text-align:center;font-size:11.5px;color:var(--dim);font-style:italic;margin:2px 0}
.ag-deck{margin-top:6px}
.ag-deck-cards{display:flex;gap:4px}
.ag-deck-cards .card{width:44px;flex:none}
.ag-deck-act,.ag-chal{display:flex;gap:6px;margin-top:6px;flex-wrap:wrap}
.ag-deck-act button,.ag-chal button{padding:6px 10px;font-size:12px}
.ag-card{margin-top:6px}
.ag-card .card{width:110px}
.ag-compose{position:relative;display:flex;gap:6px;padding-top:6px;border-top:1px solid var(--line)}
.ag-compose input{flex:1;min-width:0;font-size:14px}
.ag-plus{padding:8px 13px;font-size:16px}
.ag-share{position:absolute;bottom:calc(100% + 6px);left:0;right:0;background:#151a30;border:1px solid var(--line2);border-radius:12px;padding:10px;display:flex;flex-wrap:wrap;gap:6px;box-shadow:0 14px 40px #000a;max-height:50dvh;overflow-y:auto}
.ag-share .eyebrow{flex-basis:100%;margin:4px 0 0}
.ag-share button{padding:6px 10px;font-size:12px}
.ag-share input{flex:1;min-width:150px}
.ag-row{display:flex;align-items:center;gap:8px;padding:6px 4px;border-radius:10px;text-align:left;width:100%;background:transparent;border:1px solid transparent}
button.ag-row:hover{background:#1d2340}
.ag-row.new{border-color:#ff7a5966;background:#2a1d2a}
.ag-row > button{padding:6px 10px;font-size:12px;flex:none}
.ag-who{flex:1;min-width:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px}
.ag-who b{font-size:13.5px}
.ag-who small{color:var(--dim);font-size:11px}
.ag-sub{flex-basis:100%;font-size:11px!important}
.ag-on{display:inline-block;width:8px;height:8px;border-radius:50%;background:#56506a;align-self:center}
.ag-on.on{background:#57e39a;box-shadow:0 0 8px #57e39a}
.ag-on.duel{background:#f0ce89;box-shadow:0 0 8px #f0ce89}
.ag-x2{padding:4px 9px!important;color:var(--dim)}
.ag-find{display:flex;gap:6px}
.ag-find input{flex:1;min-width:0}
.ag-mine{font-size:12px;color:var(--muted);margin:2px 0}
.ag-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ag-head .ag-who{min-width:120px}
.ag-head button{padding:6px 10px;font-size:12px}
.ag-house{display:flex;gap:12px;align-items:center;background:linear-gradient(135deg,#2a2010,#1b1a30);border:1px solid #6b5631;border-radius:14px;padding:12px}
.ag-house h3{font:600 20px var(--serif);color:var(--ink);text-transform:none;letter-spacing:0;margin:0}
.ag-house p{margin:2px 0;font-size:12.5px;color:var(--gold);font-style:italic}
.ag-house small{font-size:11px;color:var(--dim)}
.ag-house > div:nth-child(2){flex:1;min-width:0}
.ag-house-act{display:flex;flex-direction:column;gap:6px}
.ag-house-act button{padding:6px 10px;font-size:12px}
.ag-members summary{cursor:pointer;font-size:12px;color:var(--muted);padding:4px 0}
#agHouseFeed{display:flex;flex-direction:column;gap:8px;flex:1;min-height:260px}
.ag-form{display:flex;flex-direction:column;gap:8px}
.ag-form label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--muted)}
.ag-menu{position:fixed;z-index:20;background:#1b2038;border:1px solid var(--line2);border-radius:10px;padding:4px;display:flex;flex-direction:column;min-width:170px;box-shadow:0 14px 40px #000b}
.ag-menu button{background:none;border:0;text-align:left;padding:8px 10px;font-size:13px}
.ag-menu button:hover{background:#2a3050}
.invite-banner{position:fixed;z-index:80;top:12px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:10px;background:linear-gradient(180deg,#2c2240,#1a1630);border:1px solid #c9a25a;border-radius:14px;padding:10px 12px;box-shadow:0 18px 50px #000c;width:min(520px,calc(100vw - 24px))}
.invite-banner span{flex:1;font-size:13px}
.invite-banner button{padding:7px 12px;font-size:12px}
.invite-banner.show{animation:inviteIn .4s cubic-bezier(.2,.9,.25,1.2)}
@keyframes inviteIn{from{opacity:0;transform:translate(-50%,-30px)}}
@media (max-width:700px){
 dialog.agora-dlg{width:100vw;border-radius:0;border-left:0}
 .ag-bubble{max-width:86%}
}

/* le faccine del duello */
.duel-top{position:relative}
.emote-btn{font-size:15px;padding:6px 10px}
.emote-pop{position:fixed;z-index:60;display:grid;grid-template-columns:repeat(4,1fr);gap:6px;background:#151a30f7;border:1px solid var(--line2);border-radius:14px;padding:8px;box-shadow:0 16px 40px #000b;width:min(360px,calc(100vw - 24px))}
.emote-pop button{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:20px;padding:8px 4px}
.emote-pop small{font-size:10px;color:var(--muted);line-height:1.2;text-align:center}
.hud{position:relative}
.emote-bubble{position:absolute;z-index:25;left:50%;transform:translateX(-50%);white-space:nowrap;background:#f8edd5;color:#1b1322;font:600 13px Inter;padding:7px 12px;border-radius:14px;box-shadow:0 8px 24px #000a;display:flex;gap:6px;align-items:center;animation:emoteIn .35s cubic-bezier(.2,.9,.25,1.4);pointer-events:none}
.emote-bubble i{font-style:normal;font-size:18px}
.emote-bubble.opp{top:calc(100% + 4px)}
.emote-bubble.me{bottom:calc(100% + 4px)}
.emote-bubble.out{opacity:0;transition:opacity .45s}
@keyframes emoteIn{from{opacity:0;transform:translateX(-50%) scale(.6)}}

/* le copie in piu' e i premi verificati */
.copies.spare-tag{background:linear-gradient(180deg,#ffe49a,#c9922c);color:#2b1606;border-color:#fff0c4}
.u-new.spare{background:linear-gradient(180deg,#d9c3ff,#8d6bd8);color:#1b1035}
.chip-new.spare{background:#2a2040;border-color:#8d6bd8;color:#e3d4ff}
.result-scrolls .sc.obsidian{background:linear-gradient(180deg,#5a2a1a,#1b0d0a);color:#ffb27a;border-color:#ff8a3d;box-shadow:0 0 14px #ff8a3d66}
.result-scrolls .sc.ink{background:#141a2e;border-color:#6b7bbf;color:#cfd8ff}
.result-scrolls .sealing{animation:sealPulse 1.2s ease-in-out infinite}
@keyframes sealPulse{50%{opacity:.45}}
.cer-note{font-size:12px;color:var(--dim);max-width:420px;margin:8px auto 0}

/* gli scambi nell'Agora */
.ag-trade{margin-top:6px;display:flex;flex-direction:column;gap:6px}
.ag-trade small{display:block;font-size:10.5px;letter-spacing:1px;text-transform:uppercase;color:var(--dim);margin-bottom:3px}
.ag-chip{display:inline-block;margin:0 4px 4px 0;padding:3px 8px;border-radius:999px;font-size:11.5px;background:#232842;border:1px solid var(--line2)}
.ag-chip.r-legend{border-color:#c9a25a;color:#f4d391}
.ag-chip.r-epic{border-color:#ff8a3d;color:#ffb27a;background:#2a1710}
.ag-chip.none{color:var(--dim)}
.ag-tst{font-size:12px;color:var(--dim)}
.ag-tst.done{color:#57e39a}
.ag-trade-row{display:flex;align-items:center;gap:8px;padding:6px 4px;border:1px solid #4f4470;border-radius:10px;background:#1d1a33}
.ag-trade-row button{padding:6px 10px;font-size:12px}
.ag-gate{font-size:12.5px;color:#ffd39a;background:#2a2010;border:1px solid #6b5631;border-radius:10px;padding:8px 10px;margin:0}
.ag-picks{display:grid;grid-template-columns:repeat(auto-fill,minmax(86px,1fr));gap:8px}
.ag-pick{display:flex;flex-direction:column;gap:4px;align-items:center;border-radius:10px;padding:4px;border:1px solid transparent}
.ag-pick.on{border-color:#c9a25a;background:#2a2010}
.ag-pick .card{width:100%}
.ag-cnt{display:flex;align-items:center;gap:4px}
.ag-cnt button{padding:2px 9px;font-size:14px}
.ag-cnt b{font-size:11.5px;min-width:30px;text-align:center}

/* gli Annali */
.annals-btn{position:relative;font-size:12.5px;padding:8px 14px}
dialog.annals-dlg{width:min(860px,95vw)}
.an-tabs{display:flex;gap:4px;flex-wrap:wrap;margin:4px 0 12px}
.an-tabs button{padding:7px 12px;font-size:12.5px;background:transparent;border-color:transparent;color:var(--muted)}
.an-tabs button.on{background:#262b47;border-color:var(--line2);color:var(--ink)}
.an-body{min-height:300px}
.an-body h3{font:600 11px Inter;letter-spacing:2px;text-transform:uppercase;color:var(--gold);margin:16px 0 6px}
.an-lead{font-size:12.5px;color:var(--muted)}
.an-none{color:var(--dim);font-size:13px;text-align:center;margin:30px 0}
.an-patch{border:1px solid var(--line);border-radius:14px;padding:12px 16px;margin-bottom:12px;background:#151a2e}
.an-patch.latest{border-color:#c9a25a;background:linear-gradient(135deg,#2a2010,#151a2e 60%)}
.an-patch header{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.an-patch header b{font:600 20px var(--serif)}
.an-patch header small{color:var(--dim);font-size:11.5px}
.an-patch ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:7px}
.an-patch li{font-size:13.5px;line-height:1.5;display:flex;gap:10px;align-items:baseline}
.an-patch li span{flex:none;font:700 9.5px Inter;letter-spacing:1.4px;text-transform:uppercase;padding:3px 7px;border-radius:999px;background:#262b47;color:var(--muted);min-width:76px;text-align:center}
.an-patch li.k-new span{background:#16352b;color:#9ff0bf}
.an-patch li.k-buff span{background:#183044;color:#9fd0ff}
.an-patch li.k-nerf span{background:#3a1820;color:#ff9fb3}
.an-patch li.k-list span{background:#3a2a10;color:#f4d391}
.an-patch li.k-econ span{background:#2a2440;color:#d9c3ff}
.an-ref{display:inline;padding:0 4px;border:0;background:#262b47;border-radius:5px;font-size:inherit;color:var(--gold)}
.an-q{width:100%;margin:6px 0 10px}
.an-table{width:100%;border-collapse:collapse;font-size:13px}
.an-table th{text-align:left;font:600 10.5px Inter;letter-spacing:1px;text-transform:uppercase;color:var(--dim);padding:6px 6px;border-bottom:1px solid var(--line)}
.an-table th button{background:none;border:0;padding:0;font:inherit;color:inherit;letter-spacing:inherit;text-transform:inherit}
.an-table th button.on{color:var(--gold)}
.an-table td{padding:6px;border-bottom:1px solid #1f2440;vertical-align:middle;white-space:nowrap}
.an-table td small{display:inline-block;margin-left:6px;color:var(--dim);font-size:11px}
.an-name{display:flex;align-items:center;gap:8px;background:none;border:0;padding:0;font-size:13px;text-align:left;white-space:normal}
.an-name img{width:28px;height:28px;border-radius:6px;object-fit:cover;object-position:50% 20%;flex:none}
.an-name.r-legend{color:#f4d391}.an-name.r-epic{color:#ffb27a}.an-name.r-rare{color:#cfe6ff}
.an-bar{display:inline-block;width:70px;height:6px;border-radius:3px;background:#262b47;vertical-align:middle;margin-right:6px;overflow:hidden}
.an-bar b{display:block;height:100%;background:linear-gradient(90deg,#c9a25a,#f4d391)}
.an-bar.empty{opacity:.4}
.an-grid{display:flex;flex-wrap:wrap;gap:10px}
.an-li{width:90px;display:flex;flex-direction:column;gap:4px;font-size:11px;text-align:center}
.an-li .card{width:100%}
.limit-tag.ban{background:#5a1020;color:#ffc2cc;border-color:#ff8b8b}
.limit-tag.semi{background:#2a2a10;color:#f0e3a0}
@media (max-width:700px){.an-table.cards td:nth-child(2) small{display:none}.an-bar{width:40px}}

/* la Scala */
dialog.ranked-dlg{width:min(980px,95vw)}
.rk-badge{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:999px;font:700 11px Inter;letter-spacing:.6px;border:1px solid var(--line2);background:#1d2238;color:var(--muted);white-space:nowrap}
.rk-badge i{font-style:normal;font-size:13px}
.rk-badge.big{font-size:14px;padding:6px 14px}
.rk-badge.big i{font-size:20px}
.rk-badge.t-chronicler{color:#d9c49a;border-color:#7a6a4a}
.rk-badge.t-historian{color:#9fd0ff;border-color:#4d7a9f;background:#14223a}
.rk-badge.t-scholar{color:#9ff0bf;border-color:#3f8f63;background:#12281f}
.rk-badge.t-sage{color:#d9c3ff;border-color:#8d6bd8;background:#211a38}
.rk-badge.t-master{color:#ffe2a6;border-color:#c9a25a;background:linear-gradient(180deg,#3a2a10,#1d1a2a)}
.rk-badge.t-grand{color:#2b1606;border-color:#fff0c4;background:linear-gradient(180deg,#ffe49a,#c9922c);box-shadow:0 0 16px #f0ce8966}
.rk-top{display:grid;grid-template-columns:minmax(220px,1fr) 2fr;gap:16px;margin-bottom:14px}
.rk-me{display:flex;flex-direction:column;align-items:center;gap:6px;padding:16px;border:1px solid #6b5631;border-radius:16px;background:radial-gradient(ellipse at 50% 0,#3a2a1088,#151a2e 70%);text-align:center}
.rk-rating{font:600 46px var(--serif);line-height:1;color:var(--gold)}
.rk-me small{color:var(--muted);font-size:12px}
.rk-end{color:var(--dim)!important}
.rk-play{display:flex;flex-direction:column;gap:8px;justify-content:center}
.rk-play button{font-size:15px;padding:13px 18px}
.rk-last{border:1px solid #c9a25a;background:#2a2010;border-radius:12px;padding:10px 12px;font-size:13px;margin-bottom:12px;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.rk-last button{padding:5px 10px;font-size:12px;margin-left:auto}
.rk-shade{display:flex;align-items:center;gap:14px;flex-wrap:wrap;border:1px solid #8d6bd8;border-radius:14px;padding:12px 14px;background:linear-gradient(135deg,#211a38,#121628);margin-bottom:14px}
.rk-shade h3{margin:0;font:600 22px var(--serif)}
.rk-shade h3 small{font:400 12px Inter;color:var(--dim);margin-left:4px}
.rk-shade p{margin:4px 0 0;font-size:12.5px;color:var(--muted)}
.rk-shade-cards{display:flex;gap:5px;flex:1;min-width:200px}
.rk-shade-cards .card{width:56px;flex:none}
.rk-cols{display:grid;grid-template-columns:3fr 2fr;gap:18px}
.rk-cols h3{font:600 11px Inter;letter-spacing:2px;text-transform:uppercase;color:var(--gold);margin:4px 0 8px}
#rkLadder{max-height:46vh;overflow-y:auto;display:flex;flex-direction:column;gap:3px}
.rk-row{display:flex;align-items:center;gap:8px;padding:5px 8px;border-radius:9px;background:#151a2e;font-size:13px}
.rk-row.me{background:#2a2440;border:1px solid #8d6bd8}
.rk-row > b{width:26px;text-align:right;color:var(--dim)}
.rk-face{width:26px;height:26px;border-radius:50%;overflow:hidden;background:#1d2238;flex:none}
.rk-face img{width:100%;height:100%;object-fit:cover;object-position:50% 20%}
.rk-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rk-name small{color:var(--dim);margin-left:3px;font-size:11px}
.rk-row i{font-style:normal;font-weight:700;color:var(--gold);min-width:44px;text-align:right}
.rk-rewards{width:100%;border-collapse:collapse;font-size:12.5px}
.rk-rewards td{padding:5px 4px;border-bottom:1px solid #1f2440}
.rk-rewards td:nth-child(2){color:var(--dim);white-space:nowrap}
.result-scrolls .sc.rank{background:linear-gradient(180deg,#2a2440,#1b1830);border-color:#8d6bd8;color:#e3d4ff}
@media (max-width:760px){.rk-top,.rk-cols{grid-template-columns:1fr}.rk-rating{font-size:38px}}

/* le lezioni: il maestro e la luce su cosa toccare */
.coach{position:fixed;z-index:70;top:calc(10px + env(safe-area-inset-top,0px));left:50%;transform:translateX(-50%);width:min(560px,calc(100vw - 20px));
 background:linear-gradient(180deg,#2c2240f5,#1a1630f5);border:1px solid #c9a25a;border-radius:16px;padding:10px 14px 9px;box-shadow:0 18px 50px #000c;pointer-events:none;animation:coachIn .45s cubic-bezier(.2,.9,.25,1.2)}
.coach .eyebrow{margin:0 0 4px;font-size:9.5px}
.coach-say{margin:0;font-size:14px;line-height:1.45;color:var(--ink)}
.coach small{display:block;margin-top:4px;color:var(--dim);font-size:11.5px}
.coach-dots{display:flex;gap:5px;margin-top:7px}
.coach-dots i{width:22px;height:4px;border-radius:2px;background:#3d3857}
.coach-dots i.done{background:#c9a25a}
.coach-dots i.on{background:#f4d391;box-shadow:0 0 8px #f4d391}
@keyframes coachIn{from{opacity:0;transform:translate(-50%,-14px)}}
.coach-glow{position:relative;z-index:5;outline:3px solid #f4d391!important;outline-offset:3px;border-radius:10px;animation:coachGlow 1.1s ease-in-out infinite!important}
@keyframes coachGlow{0%,100%{box-shadow:0 0 0 0 #f4d39100,0 0 18px #f4d39188}50%{box-shadow:0 0 0 8px #f4d39133,0 0 34px #f4d391cc}}
body.in-duel .coach{top:calc(64px + env(safe-area-inset-top,0px))}
.lesson-btn{background:linear-gradient(180deg,#2c2240,#1a1630);border-color:#c9a25a;color:#f4d391}
.help-lessons{display:block;width:100%;margin:0 0 14px;font-size:14px}
.coach.docked{position:static;transform:none;width:auto;margin:0 0 12px;animation:none;box-shadow:0 10px 30px #0008}
@media (max-width:760px){.coach,body.in-duel .coach{top:calc(4px + env(safe-area-inset-top,0px));padding:7px 11px;border-radius:12px}.coach .eyebrow,.coach-dots{display:none}.coach-say{font-size:12.5px;line-height:1.35}.coach small{display:none}}