/* v2.7.0 — guide du didacticiel compact et visuel, scènes de dialogue de la campagne, contraintes de deck. Chargé en dernier. */

/* ============ guide du didacticiel : bulle compacte (le placement / le déplacement restent gérés par js/features/ui-fixes.js) ============ */
#tuto{max-height:30vh;padding:8px 11px 7px;border-radius:16px;font-size:.84rem;line-height:1.3;background:linear-gradient(160deg,#0d3a22f5,#04140af5);box-shadow:0 6px 22px #000b,0 0 0 1px #c6ff3d55}
#tuto:not(.min){border-width:1.5px}
#tuto .v2-coh{gap:7px}
#tuto .v2-coh i{font-size:1.45rem;line-height:1}
#tuto .v2-coh b{font-size:.92rem;line-height:1.2;display:flex;align-items:center;gap:6px;min-width:0}
#tuto .tt-ic{display:inline-grid;place-items:center;width:1.65em;height:1.65em;border-radius:50%;background:#c6ff3d22;font-size:.95rem;flex:none}
#tuto p.tt-p{margin:.3em 0 0;color:#fff;font-size:.9rem;font-weight:700;line-height:1.3}
#tuto p.tt-more{margin:.4em 0 0;padding:6px 8px;border-radius:10px;background:#ffffff12;color:#d7e6dc;font-size:.8rem;font-weight:500;animation:ttin .2s ease-out}
#tuto .tt-ft{display:flex;align-items:center;gap:10px;margin-top:6px}
#tuto .tt-ft .v2-skip{margin-left:auto;font-size:.74rem}
#tuto .tt-ft .tt-dots+.v2-skip{margin-left:auto}
#tuto .tt-ft .v2-skip+.v2-skip{margin-left:0}
.tt-dots{display:flex;gap:4px;align-items:center}
.tt-dots s{width:7px;height:7px;border-radius:50%;background:#ffffff33;transition:.25s}
.tt-dots s.done{background:#c6ff3d99}
.tt-dots s.on{background:#c6ff3d;width:18px;border-radius:99px;box-shadow:0 0 8px #c6ff3d99}
#tuto.end{border-color:#facc15;box-shadow:0 6px 22px #000b,0 0 26px #facc1555}
@keyframes ttin{from{opacity:0;transform:translateY(-4px)}}
/* légende des pastilles d'attaque */
.tt-leg{display:flex;flex-wrap:wrap;gap:4px 10px;margin-top:5px;font-size:.74rem;color:#fff}
.tt-leg span{display:inline-flex;align-items:center;gap:4px}
.tt-leg i{display:inline-block;width:9px;height:9px;border-radius:50%;font-style:normal}
.tt-leg .lg-r{background:#ff5252}.tt-leg .lg-g{background:#4ade80}.tt-leg .lg-y{background:#facc15}
.tt-leg .lg-b{width:auto;height:auto;border-radius:0;color:#c6ff3d;letter-spacing:-1px;font-size:.7rem}

/* projecteur : assombrit tout sauf l'élément à toucher, sans bloquer le moindre toucher */
#tutoSpot{position:fixed;z-index:58;pointer-events:none;border-radius:14px;box-shadow:0 0 0 200vmax #000a;outline:2px solid #c6ff3dcc;outline-offset:-2px;transition:left .25s,top .25s,width .25s,height .25s;animation:ttspot 1.4s ease-in-out infinite}
@keyframes ttspot{50%{outline-color:#c6ff3d33}}
#tutoPt{z-index:59}
@media (prefers-reduced-motion:reduce){#tutoSpot,#tutoPt,#tuto{animation:none!important}}

/* proposition de bienvenue : carte compacte en bas d'écran, le jeu reste visible derrière */
.wn.tt-offer{place-items:end center;background:linear-gradient(to top,#000b,#0004 55%,transparent);backdrop-filter:none;padding:0 10px calc(12px + env(safe-area-inset-bottom,0px))}
.tt-offer .wb{width:min(100%,420px);padding:14px 14px 12px;text-align:left;animation:ttin .3s ease-out}
.tt-offer .tt-oh{display:flex;align-items:center;gap:12px}
.tt-offer .tt-oh .wl{font-size:2.6rem}
.tt-offer .tt-oh b{display:block;font-size:1.05rem}
.tt-offer .tt-oh small{color:var(--mu)}
.tt-offer .tt-os{display:flex;align-items:center;justify-content:center;gap:6px;margin:12px 0 4px}
.tt-offer .tt-os span{display:grid;justify-items:center;gap:2px;min-width:64px;padding:8px 6px;border-radius:14px;background:#ffffff12;font-size:.78rem;font-weight:800}
.tt-offer .tt-os span i{font-style:normal;font-size:1.6rem}
.tt-offer .tt-os em{font-style:normal;color:#c6ff3d;font-size:1.4rem}
.tt-offer p.tt-og{margin:6px 0 10px;text-align:center;font-weight:500;font-size:.82rem;color:var(--mu)}
.tt-offer p.tt-og b{color:#fff}
.tt-offer .wr{margin:0}.tt-offer .wr .btn{flex:1}

/* ============ scène de dialogue (campagne) ============ */
#story{position:fixed;inset:0;z-index:300;display:flex;align-items:flex-end;background:linear-gradient(to top,#000c 0,#0007 30%,#0002 55%,transparent 75%);cursor:pointer;-webkit-tap-highlight-color:transparent}
#story .st-box{position:relative;width:min(100%,560px);margin:0 auto;box-sizing:border-box;display:grid;grid-template-columns:auto 1fr;gap:6px 12px;align-items:start;padding:14px 16px calc(12px + env(safe-area-inset-bottom,0px));border-radius:22px 22px 0 0;background:linear-gradient(170deg,#0f3a22f7,#06180df7);border:1px solid color-mix(in srgb,var(--c) 60%,transparent);border-bottom:0;box-shadow:0 -10px 40px #000a,0 -2px 0 var(--c);max-height:36vh}
#story.pop .st-box{animation:stup .25s ease-out}
@keyframes stup{from{opacity:.4;transform:translateY(14px)}}
#story .st-av{display:grid;justify-items:center;gap:3px;width:68px}
#story .st-av i{display:grid;place-items:center;width:58px;height:58px;border-radius:50%;font-style:normal;font-size:2rem;background:radial-gradient(circle at 35% 30%,#ffffff22,#ffffff08);border:2px solid var(--c);box-shadow:0 0 18px color-mix(in srgb,var(--c) 45%,transparent)}
#story .st-av b{font-size:.68rem;line-height:1.1;text-align:center;color:var(--c);font-family:var(--disp,inherit);letter-spacing:.02em;max-width:68px}
#story .st-tx{min-height:4.6em;display:flex;align-items:center}
#story .st-tx p{margin:0;color:#fff;font-size:.98rem;line-height:1.45;font-weight:600}
#story .narr .st-tx p{font-style:italic;font-weight:500;color:#e6efe9}
#story .narr .st-av b{display:none}
#story .st-box.end .st-tx::after{content:'▼';align-self:flex-end;margin-left:8px;color:var(--c);font-size:.8rem;animation:stnx 1s ease-in-out infinite}
@keyframes stnx{50%{transform:translateY(3px);opacity:.5}}
#story .st-ft{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:10px}
#story .st-dots{display:flex;gap:5px}
#story .st-dots s{width:7px;height:7px;border-radius:50%;background:#ffffff33}
#story .st-dots s.done{background:color-mix(in srgb,var(--c) 60%,transparent)}
#story .st-dots s.on{background:var(--c);width:18px;border-radius:99px}
#story .st-sk{background:none;border:0;color:var(--mu);font-size:.78rem;font-weight:700;cursor:pointer;padding:4px 2px}
/* interlocuteur à droite : portrait de l'autre côté */
#story .st-box.r{grid-template-columns:1fr auto}
#story .st-box.r .st-av{grid-column:2;grid-row:1}
#story .st-box.r .st-tx{grid-column:1;grid-row:1}
@media (prefers-reduced-motion:reduce){#story .st-box,#story .st-box.end .st-tx::after{animation:none!important}}

/* ============ campagne : contraintes de deck et lien « Histoire » ============ */
.cp-rules{margin:8px 0 10px;padding:9px 12px;border-radius:14px;border:1px solid #38bdf866;background:linear-gradient(135deg,#38bdf81a,#0000)}
.cp-rules.ko{border-color:#ff5252aa;background:linear-gradient(135deg,#ff52521f,#0000)}
.cp-rules.ok{border-color:#4ade8088;background:linear-gradient(135deg,#4ade8018,#0000)}
.cp-rules>b{font-family:var(--disp,inherit);font-size:.85rem;letter-spacing:.03em}
.cp-rules ul{list-style:none;padding:0;margin:6px 0 0;display:grid;gap:5px}
.cp-rules li{display:flex;align-items:center;gap:8px;font-size:.88rem;font-weight:700}
.cp-rules li.ko{color:#ffb4b4}
.cp-rules li i{font-style:normal}
.cp-rules li span{flex:1}
.cp-rules li small{color:var(--mu);font-weight:500;font-size:.72rem;white-space:nowrap}
.cp-rules p{margin:7px 0 0;font-size:.8rem;color:#ffb4b4}
.cp-hist{color:var(--ac);font-weight:800;cursor:pointer;white-space:nowrap}

/* ---- v3.0.2 : didacticiel étendu (bannissement, fiche, guide d'attaque) ---- */
#tuto .tt-ft .tt-b{background:#c6ff3d;color:#04140a;font-weight:800;text-decoration:none;border-radius:99px;padding:4px 11px;font-size:.76rem;margin-left:auto}
#tuto .tt-ft .tt-b+.v2-skip{margin-left:0}
body:has(#sheet) #tuto,body:has(#ahelp) #tuto{z-index:950}
#tuto b .tt-ic+*{min-width:0}
.vz-c.tt-keep::before{content:"À GARDER";position:absolute;top:8px;left:50%;transform:translateX(-50%);z-index:6;font:900 .6rem/1 system-ui;letter-spacing:.14em;white-space:nowrap;background:#16a34a;color:#fff;padding:4px 9px;border-radius:20px;box-shadow:0 0 12px #22c55e;pointer-events:none}
.vz-c.v2-hl{transform:translateY(-8px) scale(1.03)}