/* Le jeu (4 nov. 2026) : cartes de héros, combats, transition, fiches, invocation ×10, récompenses du jour, version ordinateur.
   Chargé seulement par les pages du jeu (/, /cartes/, /donjons/, /profil/), après la feuille commune. */

/* ---------- la carte : portrait, cadre selon la rareté, niveau, élément, étoiles, nom, attaque et PV ---------- */
.kc { position: relative; aspect-ratio: 2 / 3; container-type: inline-size; --fr: linear-gradient(150deg, #bfe6ff, #3a8bdc 35%, #13305a 62%, #7fc4ff); --rg: rgba(79,180,255,.45); --sc: #9fd4ff; user-select: none; -webkit-user-select: none; }
.kc.r4 { --fr: linear-gradient(150deg, #f3d6ff, #a64cff 35%, #34105e 62%, #d9a0ff); --rg: rgba(192,112,255,.55); --sc: #e3b0ff; }
.kc.r5 { --fr: linear-gradient(150deg, #fff3b0, #ffcb3d 32%, #8a5a0a 60%, #ffe27a); --rg: rgba(255,200,60,.6); --sc: #ffd23f; }
.kc.r6 { --fr: conic-gradient(from 30deg, #ff5ad1, #ffd23f, #5dffb0, #3ac8ff, #c070ff, #ff5ad1); --rg: rgba(255,90,209,.6); --sc: #ffc2f0; }
.kc.foe { --fr: linear-gradient(150deg, #ffb3b3, #e0283c 32%, #4a0610 62%, #ff6b6b); --rg: rgba(255,50,70,.45); }
.kc.foe.boss { --fr: linear-gradient(150deg, #ffe27a, #b0182c 30%, #2a0408 60%, #ffcb3d); --rg: rgba(255,80,40,.6); }
.kc-f { position: absolute; inset: 0; padding: 3.4cqw; border-radius: 8cqw; background: var(--fr); box-shadow: 0 2cqw 6cqw rgba(0,0,0,.55); overflow: hidden; }
.kc.r5 .kc-f, .kc.r6 .kc-f, .kc.boss .kc-f { box-shadow: 0 2cqw 6cqw rgba(0,0,0,.55), 0 0 7cqw var(--rg); }
.kc-f img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 5.5cqw; background: #120c26; }
/* (le dégradé sombre qui rend le nom lisible est intégré aux images des cartes : un calque par-dessus le portrait était mal dessiné par Chrome, zones sombres) */
.kc-g { display: none; }
.kc.r5 .kc-g::after, .kc.r6 .kc-g::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.22) 50%, transparent 60%); background-size: 280% 100%; animation: kcshine 4.5s ease-in-out infinite; }
@keyframes kcshine { 0%, 55% { background-position: 120% 0; } 100% { background-position: -60% 0; } }
.kc-n { position: absolute; left: 5cqw; right: 5cqw; bottom: 5cqw; display: block; text-align: center; font: 400 12.5cqw/1 var(--f); color: #fff; text-shadow: 0 1cqw 0 #000, 0 0 3cqw rgba(0,0,0,.8); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kc-n small { display: block; margin-top: 1.5cqw; font: 800 7.5cqw/1.1 "Figtree", system-ui, sans-serif; color: var(--sc); text-shadow: 0 1px 2px #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kc.foe .kc-n small { color: #ffb3bb; }
.kc-f:has(.kc-s) .kc-n { bottom: 17cqw; }
.kc-s { position: absolute; left: 5cqw; right: 5cqw; bottom: 4.5cqw; display: flex; justify-content: space-between; gap: 2cqw; }
.kc-s i { flex: 1; padding: 1.6cqw 0; border-radius: 4cqw; background: rgba(0,0,0,.55); box-shadow: inset 0 0 0 .6cqw rgba(255,255,255,.14); font: 900 8.6cqw/1 "Figtree", system-ui, sans-serif; font-style: normal; text-align: center; color: #fff; letter-spacing: -.02em; }
.kc-lv { position: absolute; z-index: 3; left: -3cqw; top: -3cqw; width: 23cqw; height: 23cqw; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff3b0, #ffcb3d 55%, #a8700f); color: #2a1d00; font: 400 12cqw/1 var(--f); font-style: normal; box-shadow: 0 1cqw 2cqw rgba(0,0,0,.6); }
.kc-el { position: absolute; z-index: 3; right: -3cqw; top: -3cqw; width: 22cqw; height: 22cqw; display: grid; place-items: center; border-radius: 50%; font-style: normal; font-size: 11cqw; background: #120c26; box-shadow: 0 0 0 1.4cqw var(--ec), 0 0 5cqw var(--ec); }
.el-f { --ec: #ff5a3c; } .el-e { --ec: #3aa6ff; } .el-o { --ec: #ffc531; }
.kc-st { position: absolute; z-index: 2; left: 18cqw; right: 18cqw; top: 6cqw; text-align: center; font-style: normal; font-size: 8.5cqw; letter-spacing: .3cqw; color: var(--sc); text-shadow: 0 .8cqw 1.5cqw #000, 0 0 4cqw var(--rg); white-space: nowrap; }
.kc.lock .kc-f img { filter: grayscale(1) brightness(.3); } .kc.lock .kc-n { color: #b9b3e6; }
.kc.unk .kc-f img { filter: brightness(0); } .kc.unk .kc-n { color: #6b6596; }
.kc.inteam .kc-f { box-shadow: 0 0 0 1.2cqw #4fd18b, 0 0 6cqw rgba(79,209,139,.6); }
.kc.inteam::after { content: '⚔ ÉQUIPE'; position: absolute; z-index: 3; left: 50%; top: -4cqw; transform: translateX(-50%); padding: 1.5cqw 4cqw; border-radius: 9cqw; background: #1f9d5a; color: #fff; font: 900 7cqw/1 "Figtree", system-ui, sans-serif; white-space: nowrap; }
.kc.inteam .kc-st { top: 9cqw; }

/* ---------- collection (onglet Héros) ---------- */
.cv .kc, .dg .kc { cursor: pointer; transition: transform .15s; } .cv .kc:active, .dg .kc:active { transform: scale(.95); }
.cv-grid, .cv-row { gap: 12px 9px; } .cv h2 { display: flex; align-items: baseline; justify-content: space-between; }
.cv .jx-res, .dg .jx-res { margin-bottom: 12px; }
.gz-btns { display: flex; gap: 7px; margin-top: 6px; } .gz-btns .tbtn { flex: 1; margin: 0; padding: 11px 4px; font: 400 15px/1 var(--f); max-width: none; } .gz-btns .tbtn[disabled] { opacity: .45; filter: grayscale(.5); }

/* ---------- fiche d'un héros ou d'un ennemi ---------- */
.cv-sheet .fqp-box { background: radial-gradient(120% 50% at 30% 0%, color-mix(in srgb, var(--rc, #7a3cff) 35%, #1b1640), #140f30 65%); }
.sh-top { display: grid; grid-template-columns: 42% 1fr; gap: 14px; align-items: start; margin-bottom: 12px; }
.sh-card.up { animation: shup .6s cubic-bezier(.3,1.6,.5,1); } @keyframes shup { 40% { transform: scale(1.08); filter: brightness(1.5); } }
.sh-id small { font: 900 11px/1 system-ui, sans-serif; letter-spacing: .05em; } .sh-id .sh-foe { color: #ff6a78; }
.sh-id h3 { margin: 4px 0 4px; font: 400 26px/1 var(--f); color: #fff; }
.sh-id p { margin: 0 0 6px; font-size: 12.5px; font-weight: 800; line-height: 1.35; color: #d8d4f5; } .sh-cls { color: #ffd23f !important; }
.sh-lv b { color: #ffd23f; font-size: 15px; } .sh-lv small { display: block; margin-top: 3px; font-size: 11px; color: #9a94c8; } .sh-tip { color: #bff0d0 !important; }
.sh-bar { display: block; height: 7px; margin-top: 5px; border-radius: 4px; background: rgba(255,255,255,.12); overflow: hidden; } .sh-bar u { display: block; height: 100%; border-radius: 4px; }
.sh-bar.xp u { background: linear-gradient(90deg, #7fd0ff, #c070ff); } .sh-bar.atk u { background: linear-gradient(90deg, #ff9a3c, #ff4d5e); } .sh-bar.hp u { background: linear-gradient(90deg, #4fd18b, #a6f07a); }
.sh-stats { display: grid; gap: 8px; margin-bottom: 10px; padding: 12px; border-radius: 16px; background: rgba(0,0,0,.25); }
.sh-stats div { display: grid; grid-template-columns: 24px 1fr auto; align-items: center; column-gap: 8px; } .sh-stats i { font-style: normal; font-size: 17px; } .sh-stats span { font-size: 13px; font-weight: 800; color: #cfc8ff; } .sh-stats b { font: 400 19px/1 var(--f); color: #fff; } .sh-stats .sh-bar { grid-column: 2 / 4; margin-top: 3px; }
.sh-sk { display: flex; gap: 10px; margin-bottom: 10px; padding: 12px; border-radius: 16px; background: linear-gradient(90deg, rgba(255,210,63,.16), rgba(255,210,63,.03)); box-shadow: inset 0 0 0 1.5px rgba(255,210,63,.4); }
.sh-sk > i { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; background: rgba(0,0,0,.35); font-style: normal; font-size: 22px; }
.sh-sk b { display: block; font: 400 17px/1.1 var(--f); color: #ffd23f; } .sh-sk small { display: block; margin-top: 3px; font-size: 13px; font-weight: 700; line-height: 1.35; color: #f3e6c0; } .sh-sk em { display: block; margin-top: 5px; font-style: normal; font-size: 11.5px; font-weight: 800; color: #b9b3e6; }
.sh-lore { margin: 0 0 12px; font-size: 13px; font-style: italic; line-height: 1.45; color: #b9b3e6; text-align: center; }
.cv-rep { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; } .cv-rep .tbtn { margin: 0; padding: 10px 2px; font-size: 13px; max-width: none; }

/* ---------- campagne ---------- */
.jx-res { display: flex; gap: 16px; } .jx-res span { display: flex; align-items: center; gap: 4px; }
.jx-tm { width: 84px; height: 66px; } .jx-tm .jx-tc { width: 42px; height: 60px; } .jx-tm .jx-tc img { border-radius: 6px; }
.jx-pw { position: absolute; z-index: 5; left: 50%; bottom: -8px; transform: translateX(-50%); padding: 3px 7px; border-radius: 99px; font: 900 11.5px/1 system-ui, sans-serif; font-style: normal; white-space: nowrap; background: #1f9d5a; color: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.6); }
.jx-pw.lo { background: #b0283c; }

/* ---------- transition avant le combat (chargement des questions et des images) ---------- */
.bt-intro { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 20px; background: radial-gradient(90% 60% at 50% 35%, color-mix(in srgb, var(--sky) 40%, #1a0f40), #05030c 75%); animation: ryfade .3s; transition: opacity .35s; }
.bt-intro.out { opacity: 0; pointer-events: none; }
.bti-in { width: min(400px, 100%); display: grid; justify-items: center; gap: 10px; text-align: center; }
.bti-in > small { font: 800 13px/1 system-ui, sans-serif; letter-spacing: .06em; color: #cfc8ff; } .bti-in > b { font: 400 34px/1 var(--f); color: #ffd23f; text-shadow: 0 3px 0 #3a1500; animation: fqeban .5s cubic-bezier(.3,1.6,.5,1); }
.bti-vs { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin: 8px 0; }
.bti-team { display: flex; gap: 4px; } .bti-team span { width: min(17vw, 76px); animation: btin .5s cubic-bezier(.3,1.4,.5,1) both; animation-delay: calc(.1s + var(--i) * .1s); }
.bti-vs > i { font: 400 30px/1 var(--f); font-style: normal; color: #ff5a6a; text-shadow: 0 0 16px rgba(255,60,80,.8), 0 3px 0 #3a0010; animation: btvs .6s .35s cubic-bezier(.3,1.8,.5,1) both; }
.bti-foe { flex: none; width: min(25vw, 108px); animation: btinr .5s .25s cubic-bezier(.3,1.4,.5,1) both; }
@keyframes btin { from { opacity: 0; transform: translateX(-40px); } } @keyframes btinr { from { opacity: 0; transform: translateX(40px); } } @keyframes btvs { from { opacity: 0; transform: scale(3); } }
.bti-p { display: flex; gap: 8px; margin: 0; } .bti-p span { padding: 6px 10px; border-radius: 12px; background: rgba(255,255,255,.08); font-size: 12.5px; font-weight: 800; color: #e6e3ff; } .bti-p b { color: #fff; } .bti-p .ok b { color: #6bf0a0; } .bti-p .lo b { color: #ff7a88; }
.bti-l { display: flex; align-items: center; gap: 8px; margin: 4px 0 0; font-size: 12.5px; color: #9a94c8; } .bti-l i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(255,255,255,.2); border-top-color: #ffd23f; animation: ryspin .8s linear infinite; }

/* ---------- le combat ---------- */
body.bt-on { overflow: hidden; }
.bt { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; background: #07051a; opacity: 0; transition: opacity .3s; }
.bt.on { opacity: 1; }
.bt-top { flex: none; display: flex; align-items: center; gap: 8px; padding: calc(6px + env(safe-area-inset-top)) 10px 6px; background: #07051a; }
.bt-x { flex: none; width: 34px; height: 34px; border: 0; border-radius: 50%; background: rgba(255,255,255,.1); color: #fff; font-size: 16px; cursor: pointer; }
.bt-top > span:not(.bt-wv) { flex: 1; min-width: 0; text-align: center; } .bt-top b { display: block; font: 400 17px/1.05 var(--f); color: #ffd23f; } .bt-top small { display: block; font: 800 11px/1.2 system-ui, sans-serif; color: #b9b3e6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bt-wv { flex: none; min-width: 34px; padding: 6px 9px; border-radius: 99px; background: rgba(255,255,255,.1); font: 900 11px/1 system-ui, sans-serif; color: #fff; }
.bt-stage { position: relative; flex: none; height: clamp(190px, 42vh, 380px); overflow: hidden; isolation: isolate; container-type: size; }
.bt-bg { position: absolute; inset: 0; width: 100%; height: 100%; transform: translateZ(0); }
.bt-fog { position: absolute; left: -20%; right: -20%; top: 38%; height: 26%; background: radial-gradient(50% 50% at 50% 50%, rgba(216,220,255,.12), transparent 70%); animation: btfog 11s ease-in-out infinite alternate; pointer-events: none; }
@keyframes btfog { to { transform: translateX(12%); } }
.bt-floor { position: absolute; left: 0; right: 0; bottom: 0; height: 30%; background: linear-gradient(transparent, rgba(0,0,0,.55)); pointer-events: none; }
.bt-pfx { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; } .bt-pfx i { position: absolute; left: var(--x); top: var(--y); width: calc(3px * var(--z)); height: calc(3px * var(--z)); border-radius: 50%; opacity: 0; animation: var(--a, fqbfly) var(--t) linear var(--d) infinite; }
.bt-units { position: absolute; inset: 0; z-index: 2; }
.bt-u { position: absolute; }
.bt-units { --hw: min(18.5%, calc((86cqh - 34px) / 1.5)); } .bt-units.two { --hw: min(16%, calc((80cqh - 34px) / 1.5)); }
.bt-h { width: var(--hw); bottom: 6%; cursor: pointer; transition: transform .3s, filter .3s, opacity .3s; } .bt-h.s0 { left: 2%; bottom: 9%; } .bt-h.s1 { left: calc(2% + var(--hw) + 1.5%); bottom: 3%; } .bt-h.s2 { left: calc(2% + 2 * var(--hw) + 3%); bottom: 9%; }
.bt-h .kc-s, .bt-f .kc-s { display: none; }
.bt-h .kc-n { font-size: 13.5cqw; bottom: 4cqw; }
.bt-pips { display: flex; align-items: center; justify-content: center; gap: 3px; height: 13px; margin-bottom: 3px; }
.bt-pips i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.18); box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); }
.bt-pips i.on { background: #ffd23f; box-shadow: 0 0 6px #ffb400; } .bt-pips b { margin-left: 2px; font-size: 11px; line-height: 1; }
.bt-hp { position: relative; height: 8px; margin-top: 4px; border-radius: 4px; background: rgba(0,0,0,.65); box-shadow: 0 0 0 1px rgba(255,255,255,.25); overflow: hidden; }
.bt-hp i { position: absolute; inset: 0; transform-origin: 0 50%; background: linear-gradient(90deg, #2fbf6a, #8af07a); transition: transform .35s ease-out; } .bt-hp.lo i { background: linear-gradient(90deg, #d81e3c, #ff7a3c); }
.bt-hp b { position: absolute; right: 3px; top: 50%; transform: translateY(-50%); font: 900 8px/1 system-ui, sans-serif; color: #fff; text-shadow: 0 1px 1px #000; }
.bt-hp.foe { height: 11px; margin: 0 0 6px; } .bt-hp.foe i { background: linear-gradient(90deg, #d81e3c, #ff6a3c); } .bt-hp.foe b { left: 0; right: 0; text-align: center; font-size: 9.5px; }
.bt-rdy { position: absolute; left: 50%; top: 4px; z-index: 4; transform: translateX(-50%) scale(0); padding: 3px 6px; border-radius: 99px; background: #ffd23f; color: #3a1500; font: 900 8.5px/1 system-ui, sans-serif; font-style: normal; white-space: nowrap; transition: transform .25s cubic-bezier(.3,1.8,.5,1); pointer-events: none; }
.bt-h.ready .bt-rdy { transform: translateX(-50%) scale(1); animation: btrdy 1s ease-in-out infinite; }
.bt-h.ready .kc-f { box-shadow: 0 0 0 1.5cqw #ffd23f, 0 0 14cqw #ffb400; animation: btglow 1s ease-in-out infinite; }
@keyframes btglow { 50% { box-shadow: 0 0 0 1.5cqw #fff3b0, 0 0 22cqw #ffd23f; } } @keyframes btrdy { 50% { transform: translateX(-50%) translateY(-3px) scale(1.06); } }
.bt-h.ko { filter: grayscale(1) brightness(.45); transform: translateY(8%) rotate(-7deg); cursor: default; } .bt-h.ko .bt-pips { visibility: hidden; }
.bt-h.hurt .kc-f { animation: bthurt .45s; } @keyframes bthurt { 20% { transform: translateX(-5px) rotate(-2deg); filter: brightness(1.8) sepia(1) hue-rotate(-40deg) saturate(4); } 60% { transform: translateX(3px); } }
.bt-h.cast { animation: btcast .6s; } @keyframes btcast { 40% { transform: translateY(-10%) scale(1.12); filter: brightness(1.6); } }
.bt-h.cheer { animation: btcheer .7s ease-in-out 2; } @keyframes btcheer { 40% { transform: translateY(-12%); } }
.bt-f { width: min(31%, calc((84cqh - 34px) / 1.5)); right: 4%; bottom: 5%; transition: transform .55s cubic-bezier(.3,1.3,.5,1), opacity .4s; }
.bt-f.in { transform: translateX(130%); opacity: 0; }
.bt-f.boss { width: min(35%, calc((88cqh - 34px) / 1.5)); right: 2%; }
.bt-f.hit .kc-f { animation: bthit .4s; } @keyframes bthit { 25% { transform: translateX(8px) rotate(3deg) scale(.96); filter: brightness(2.2) saturate(.3); } 60% { transform: translateX(-4px); } }
.bt-f.dead { animation: btdead .8s ease-in forwards; } @keyframes btdead { 30% { transform: scale(1.06); filter: brightness(2.5); } 100% { transform: translateY(14%) scale(.8) rotate(6deg); opacity: 0; filter: brightness(3) blur(3px); } }
.bt-f.rage .kc-f { animation: btrage .65s ease-in-out; } @keyframes btrage { 40% { transform: scale(1.12) rotate(-2deg); box-shadow: 0 0 0 1.5cqw #ff4d5e, 0 0 24cqw #ff2a3c; filter: brightness(1.3); } }
.bt-crown { position: absolute; z-index: 5; left: 50%; top: -26px; transform: translateX(-50%); font-size: 20px; font-style: normal; filter: drop-shadow(0 2px 2px rgba(0,0,0,.6)); }
.bt-cd { position: absolute; z-index: 5; right: -8px; top: 6px; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; font: 400 18px/1 var(--f); font-style: normal; color: #fff; background: radial-gradient(circle at 40% 35%, #b0182c, #3a0610); box-shadow: 0 0 0 2px #ff6a78, 0 0 12px rgba(255,60,80,.7); text-shadow: 0 2px 0 #3a0610; }
.bt-cd::after { content: 'ATK'; position: absolute; bottom: -11px; font: 900 8px/1 system-ui, sans-serif; letter-spacing: .08em; color: #ffb3bb; text-shadow: 0 1px 2px #000; }
.bt-cd.tick { animation: bttick .45s; } .bt-cd.lo { background: radial-gradient(circle at 40% 35%, #ff4d5e, #8a0a1c); animation: btcdlo .7s ease-in-out infinite; }
@keyframes bttick { 30% { transform: scale(1.45); } } @keyframes btcdlo { 50% { transform: scale(1.18); box-shadow: 0 0 0 3px #ffd0d5, 0 0 20px #ff2a3c; } }
.bt-stun { position: absolute; z-index: 5; left: 50%; top: 40%; transform: translate(-50%, -50%) scale(0); font-size: 30px; font-style: normal; transition: transform .3s; filter: drop-shadow(0 0 8px #5dff8a); } .bt-f.stun .bt-stun { transform: translate(-50%, -50%) scale(1); animation: btstun 1.4s ease-in-out infinite; }
@keyframes btstun { 50% { transform: translate(-50%, -56%) scale(1.1) rotate(8deg); } }
.bt-wave { position: absolute; z-index: 6; left: 50%; top: 42%; transform: translate(-50%, -50%) scale(.6); opacity: 0; pointer-events: none; text-align: center; white-space: nowrap; font: 400 24px/1.1 var(--f); color: #fff; text-shadow: 0 3px 0 #000, 0 0 18px rgba(0,0,0,.8); transition: opacity .2s, transform .3s cubic-bezier(.3,1.8,.5,1); }
.bt-wave small { display: block; font-size: 15px; color: #ffd23f; } .bt-wave.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.bt-wave.boss, .bt-wave.chief { color: #ffd23f; font-size: 26px; } .bt-wave.boss small, .bt-wave.chief small { color: #fff; }
.bt-wave.sp { color: #ff6a78; font-size: 26px; } .bt-wave.skill { color: #ffe27a; font-size: 24px; } .bt-wave.big { font-size: 40px; } .bt-wave.win { color: #ffd23f; } .bt-wave.lose { color: #ff6a78; }
.bt-combo { position: absolute; z-index: 5; right: 8px; top: 8px; padding: 4px 9px; border-radius: 99px; background: rgba(0,0,0,.55); font: 900 11px/1 system-ui, sans-serif; color: #ffd23f; opacity: 0; transform: scale(.6); transition: all .25s cubic-bezier(.3,1.8,.5,1); }
.bt-combo b { font: 400 17px/1 var(--f); } .bt-combo small { color: #fff; } .bt-combo.show { opacity: 1; transform: scale(1); }
.bt-buffs { position: absolute; z-index: 5; left: 8px; top: 8px; display: flex; gap: 5px; } .bt-buffs i { padding: 4px 7px; border-radius: 99px; background: rgba(0,0,0,.55); font: 900 11px/1 system-ui, sans-serif; font-style: normal; color: #fff; }
.bt-pop { position: absolute; z-index: 8; transform: translate(-50%, -50%); pointer-events: none; white-space: nowrap; font: 400 24px/1 var(--f); color: #fff; text-shadow: 0 2px 0 #1a0d22, 0 0 8px rgba(0,0,0,.6); animation: btpop 1.05s ease-out forwards; }
@keyframes btpop { 0% { opacity: 0; transform: translate(-50%, -30%) scale(.5); } 15% { opacity: 1; transform: translate(-50%, -70%) scale(1.2); } 100% { opacity: 0; transform: translate(-50%, -190%) scale(1); } }
.bt-pop.el-f { color: #ffb08a; } .bt-pop.el-e { color: #9fd8ff; } .bt-pop.el-o { color: #ffe27a; } .bt-pop.big { font-size: 30px; } .bt-pop.crit { font-size: 38px; }
.bt-pop.bad { color: #ff7a88; } .bt-pop.bad.sh { color: #b0d8ff; } .bt-pop.heal { color: #8af0a0; font-size: 20px; }
.bt-pop.eff { font-size: 16px; color: #ffe27a; letter-spacing: .04em; } .bt-pop.res { font-size: 14px; color: #b9b3e6; } .bt-pop.info { font: 900 12px/1 system-ui, sans-serif; padding: 5px 9px; border-radius: 99px; background: rgba(0,0,0,.7); color: #fff; }
.bt-spk { position: absolute; z-index: 7; width: 7px; height: 7px; border-radius: 50%; pointer-events: none; }
.bt-fx { position: absolute; z-index: 7; width: 0; height: 0; pointer-events: none; }
.bt-fx::before { content: ''; position: absolute; left: -45px; top: -45px; width: 90px; height: 90px; border-radius: 50%; }
.bt-fx.slash::before { left: -50px; top: -4px; width: 100px; height: 8px; border-radius: 8px; background: linear-gradient(90deg, transparent, #fff 45%, var(--ec, #ffd23f) 60%, transparent); transform: rotate(-35deg) scaleX(0); animation: btslash .32s ease-out forwards; }
@keyframes btslash { 60% { transform: rotate(-35deg) scaleX(1); opacity: 1; } 100% { transform: rotate(-35deg) scaleX(1.1); opacity: 0; } }
.bt-fx.boom::before { background: radial-gradient(circle, #fff 0, var(--ec, #ffd23f) 35%, transparent 70%); animation: btboom .55s ease-out forwards; } @keyframes btboom { from { transform: scale(.2); opacity: 1; } to { transform: scale(2.2); opacity: 0; } }
.bt-fx.ring::before { border: 4px solid var(--ec, #22e3ff); animation: btboom .6s ease-out forwards; }
.bt-fx.heal::before { background: radial-gradient(circle, rgba(140,255,170,.7), transparent 65%); animation: btboom .7s ease-out forwards; }
.bt-fx.shield::before { border: 3px solid #7fd0ff; box-shadow: 0 0 18px #3aa6ff, inset 0 0 18px #3aa6ff; animation: btboom .7s ease-out forwards; }
.bt-fx.buff::before { background: radial-gradient(circle, rgba(255,170,60,.7), transparent 65%); animation: btboom .7s ease-out forwards; }
.bt-fx.roots::before { background: radial-gradient(circle, rgba(93,255,138,.6), transparent 65%); animation: btboom .8s ease-out forwards; }
.bt-stage.shake { animation: btshake .32s; } .bt-stage.shake2 { animation: btshake2 .5s; }
@keyframes btshake { 25% { transform: translate(-4px, 2px); } 50% { transform: translate(4px, -2px); } 75% { transform: translate(-2px, 1px); } }
@keyframes btshake2 { 15% { transform: translate(-8px, 4px); } 35% { transform: translate(7px, -4px); } 55% { transform: translate(-5px, 3px); } 75% { transform: translate(3px, -2px); } }
.bt-q { position: relative; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 8px; padding: 8px 12px calc(10px + env(safe-area-inset-bottom)); background: linear-gradient(#0b0820, #07051a); }
.bt-tm { flex: none; height: 6px; border-radius: 3px; background: rgba(255,255,255,.1); overflow: hidden; } .bt-tm i { display: block; height: 100%; transform-origin: 0 50%; background: linear-gradient(90deg, #22e3ff, #ffd23f); }
.bt.hurry .bt-tm i { background: #ff4d5e; animation: bthurry .5s ease-in-out infinite; } @keyframes bthurry { 50% { opacity: .5; } }
.bt-card { flex: 0 1 auto; margin: auto 0; min-height: 92px; overflow-y: auto; display: flex; flex-direction: column; justify-content: center; padding: 10px 14px; border-radius: 18px; background: #fff; color: #1a1430; text-align: left; }
.bt-card.in { animation: btcard .35s cubic-bezier(.3,1.3,.5,1); } @keyframes btcard { from { opacity: 0; transform: translateY(12px) scale(.97); } }
.bt-card small { font: 800 12px/1.2 system-ui, sans-serif; color: #7a3cff; } .bt-card p { margin: 4px 0 0; font: 800 17px/1.3 "Figtree", system-ui, sans-serif; }
.bt-card img { display: block; max-width: 100%; max-height: 16vh; margin: 6px auto 0; border-radius: 8px; object-fit: contain; }
.bt-e { display: none; font-size: 13.5px !important; font-weight: 700 !important; } .bt-e.show { display: block; } .bt-e.ok { color: #138a4a; } .bt-e.ko { color: #c2263c; }
.bt-a { flex: none; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.bt-a button { min-height: 52px; padding: 8px 10px; border: 0; border-radius: 14px; cursor: pointer; text-align: center; font: 800 15px/1.2 "Figtree", system-ui, sans-serif; color: #fff; background: linear-gradient(#2e2668, #1f1a4c); box-shadow: inset 0 0 0 1.5px rgba(255,210,63,.35), 0 4px 0 #120e30; transition: transform .1s; }
.bt-a button:active { transform: translateY(2px); box-shadow: inset 0 0 0 1.5px rgba(255,210,63,.35), 0 2px 0 #120e30; }
.bt-a button.ok { background: linear-gradient(#2fd27a, #1a9a52); box-shadow: 0 0 0 2px #b8ffd0, 0 4px 0 #0c5a30; } .bt-a button.ko { background: linear-gradient(#ff5a6a, #c2263c); box-shadow: 0 4px 0 #6a0a1a; }
.bt-a button.dim { opacity: .35; } .bt-a button.gone { opacity: .12; pointer-events: none; }
.bt-coach { position: absolute; z-index: 9; left: 10px; right: 10px; top: 8px; padding: 9px 12px; border-radius: 14px; background: #fff7d6; color: #2a1d00; font-size: 14px; font-weight: 700; line-height: 1.35; box-shadow: 0 8px 24px rgba(0,0,0,.5), 0 0 0 2px #ffd23f; cursor: pointer; }
.bt-coach small { display: block; margin-top: 4px; font-size: 10.5px; color: #8a7a40; } .bt-coach.in { animation: btcoach .35s cubic-bezier(.3,1.6,.5,1); } @keyframes btcoach { from { opacity: 0; transform: translateY(10px) scale(.9); } }
@media (max-height: 640px) { .bt-card p { font-size: 15.5px; } .bt-a button { min-height: 46px; font-size: 14px; } .bt-card img { max-height: 12vh; } }

/* ---------- écran de fin : conditions des étoiles, XP des héros ---------- */
.fqe-cond { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px 10px; margin: -4px 0 0; padding: 0; list-style: none; font: 800 12px/1.2 system-ui, sans-serif; color: #7a7398; } .fqe-cond li.on { color: #ffd23f; }
.fqe-team { gap: 10px; } .fqe-h { width: 28%; max-width: 100px; display: grid; gap: 5px; justify-items: center; animation: btin .5s cubic-bezier(.3,1.4,.5,1) both; animation-delay: calc(.2s + var(--i) * .12s); } .fqe-h .kc { width: 100%; }
.fqe-xp { display: block; width: 100%; height: 6px; border-radius: 3px; background: rgba(255,255,255,.12); overflow: hidden; } .fqe-xp i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #7fd0ff, #c070ff); transition: width 1s ease-out; } .fqe.xp .fqe-xp i { width: var(--p); }
.fqe-h small { font: 800 11px/1 system-ui, sans-serif; color: #b9b3e6; } .fqe-h small b { color: #ffd23f; animation: rypulse 1s ease-in-out infinite; }
.fqe.lose .fqe-h { filter: grayscale(.6) brightness(.7); }
.fqe-tip { margin: 0; padding: 8px 12px; border-radius: 12px; background: rgba(255,255,255,.07); font-size: 12.5px; font-weight: 700; color: #e6e3ff; }

/* ---------- invocation : une carte, ou dix qui se retournent une à une ---------- */
.gz-cards { position: absolute; inset: 0; }
.gz-card .kc { width: 100%; } .gz.flip .gz-front .kc-f { box-shadow: 0 0 40px 8px color-mix(in srgb, var(--rc, var(--gc)) 70%, transparent); }
.gz.multi .gz-cards { inset: auto; left: 50%; top: 42%; transform: translate(-50%, -50%); display: grid; grid-template-columns: repeat(5, min(17vw, 78px)); gap: 14px 8px; }
.gz.multi .gz-card { position: relative; left: auto; top: auto; width: 100%; height: auto; aspect-ratio: 2 / 3; margin: 0; }
.gz.multi.boom .gz-card { transition-delay: calc(var(--i) * .05s); }
.gz.multi .gz-flip { transition-delay: calc(var(--i) * .14s); } .gz.multi .gz-back span { font-size: 30px; }
.gz.multi .gz-back { box-shadow: 0 0 0 2px var(--rc), 0 0 18px var(--rc); }
.gz-tag { position: absolute; left: 50%; bottom: -12px; transform: translateX(-50%); padding: 2px 5px; border-radius: 99px; font: 900 8px/1.2 system-ui, sans-serif; font-style: normal; white-space: nowrap; background: #1f9d5a; color: #fff; opacity: 0; transition: opacity .3s 1.6s; } .gz.flip .gz-tag { opacity: 1; } .gz-tag.up { background: #7a3cff; } .gz-tag.sh { background: #444070; }
.gz.multi .gz-txt { bottom: calc(8% + env(safe-area-inset-bottom)); }

/* ---------- récompense du jour ---------- */
.lg { position: fixed; inset: 0; z-index: 75; display: grid; place-items: center; padding: 18px; background: rgba(6,4,18,.88); animation: ryfade .3s; }
.lg-b { width: min(380px, 100%); display: grid; justify-items: center; gap: 10px; padding: 18px 14px; border-radius: 24px; text-align: center; background: radial-gradient(120% 70% at 50% 0%, #4a2a8a, #1b1640 70%); box-shadow: inset 0 0 0 1.5px rgba(255,210,63,.55), 0 20px 50px rgba(0,0,0,.6); animation: fqeban .5s cubic-bezier(.3,1.6,.5,1); }
.lg-b > small { font: 400 13px/1 var(--f); letter-spacing: .1em; color: #22e3ff; } .lg-b > b { font: 400 30px/1 var(--f); color: #ffd23f; text-shadow: 0 3px 0 #3a1500; } .lg-b p { margin: 0; font-size: 13px; font-weight: 700; color: #e6e3ff; } .lg-b .ry-go { width: 100%; max-width: none; margin: 4px 0 0; }
.lg-g { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; width: 100%; }
.lg-g span { position: relative; display: grid; justify-items: center; gap: 2px; padding: 7px 2px; border-radius: 12px; background: rgba(255,255,255,.07); } .lg-g span.big { grid-column: span 2; background: linear-gradient(135deg, rgba(192,112,255,.35), rgba(255,210,63,.2)); }
.lg-g em { font: 900 10px/1 system-ui, sans-serif; font-style: normal; color: #9a94c8; } .lg-g i { font-style: normal; font-size: 22px; line-height: 1.1; } .lg-g b { font: 800 11.5px/1.1 system-ui, sans-serif; color: #fff; }
.lg-g span.got { opacity: .45; } .lg-g span.got::after { content: '✓'; position: absolute; right: 5px; top: 3px; color: #6bf0a0; font-weight: 900; }
.lg-g span.now { background: rgba(255,210,63,.22); box-shadow: 0 0 0 2px #ffd23f, 0 0 16px rgba(255,210,63,.5); animation: rypulse 1.2s ease-in-out infinite; }

/* ---------- ordinateur : le jeu garde sa forme de téléphone, au centre de l'écran ---------- */
@media (min-width: 620px) {
  :root { --gw: 460px; }
  html, body { background: radial-gradient(70% 90% at 50% 30%, #241a52, #07051a 70%) fixed, #07051a; }
  body::before { content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(40% 50% at 15% 80%, rgba(122,60,255,.18), transparent 70%), radial-gradient(40% 50% at 85% 20%, rgba(255,170,60,.12), transparent 70%); }
  .top, #feed, .tabs, .bt, .bt-intro, .fqe, .fqp-sheet, .gz, .ry-big, .jx-intro, .lg, .ry-cons { left: calc(50% - var(--gw) / 2) !important; right: auto !important; width: var(--gw) !important; max-width: none !important; }
  #feed, .bt, .tabs { box-shadow: 0 0 0 1px rgba(255,255,255,.06), 0 0 80px rgba(0,0,0,.6); }
  #feed { background: #0b0820; } .tabs { margin: 0; }
  .fqp-box { width: 100%; }
}

/* ===================== 5 nov. 2026 : finitions « vrai jeu » ===================== */
/* icônes 3D (Fluent, licence MIT) et orbes d'évolution dessinées */
.ic { display: inline-block; width: 1.25em; height: 1.25em; vertical-align: -.28em; object-fit: contain; pointer-events: none; }
.orb { display: inline-block; width: 1.05em; height: 1.05em; vertical-align: -.16em; border-radius: 50%; box-shadow: inset -2px -3px 4px rgba(0,0,0,.45), inset 2px 2px 3px rgba(255,255,255,.55), 0 0 8px var(--oc); background: radial-gradient(circle at 35% 30%, #fff, var(--oc) 40%, color-mix(in srgb, var(--oc) 50%, #000) 100%); }
.orb-f { --oc: #ff5a3c; } .orb-e { --oc: #3aa6ff; } .orb-o { --oc: #ffc531; }
.jx-res span { gap: 5px; } .jx-res .ic, .jx-res .orb { width: 22px; height: 22px; vertical-align: middle; }
.kc-s i { display: flex; align-items: center; justify-content: center; gap: 1.5cqw; } .kc-s .ic { width: 10cqw; height: 10cqw; vertical-align: 0; }
.kc-el .ic { width: 15cqw; height: 15cqw; vertical-align: 0; }
.kc-fac { position: absolute; z-index: 3; left: -3cqw; bottom: 30cqw; width: 19cqw; height: 19cqw; display: grid; place-items: center; border-radius: 50%; background: rgba(10,6,24,.85); box-shadow: 0 0 0 1cqw rgba(255,255,255,.25); font-style: normal; }
.kc-fac .ic { width: 13cqw; height: 13cqw; vertical-align: 0; }
.kc-f:not(:has(.kc-s)) ~ .kc-fac { bottom: 18cqw; }
.kc-fr { position: absolute; z-index: 3; left: 12cqw; right: 12cqw; bottom: -4.5cqw; height: 4cqw; border-radius: 3cqw; background: rgba(0,0,0,.7); overflow: hidden; box-shadow: 0 0 0 .6cqw rgba(255,255,255,.2); } .kc-fr u { display: block; height: 100%; background: linear-gradient(90deg, #ff9ad5, #c070ff); }
/* cadre orné : filet doré intérieur, coins sertis pour les Épiques et mieux */
.kc-f::after { content: ''; position: absolute; inset: 2.2cqw; border-radius: 6.5cqw; box-shadow: inset 0 0 0 .5cqw rgba(255,255,255,.35); pointer-events: none; }
.kc.r4 .kc-f::before, .kc.r5 .kc-f::before, .kc.r6 .kc-f::before { content: ''; position: absolute; z-index: 2; left: 50%; bottom: 1cqw; width: 7cqw; height: 7cqw; transform: translateX(-50%) rotate(45deg); background: radial-gradient(circle at 35% 30%, #fff, var(--sc) 55%, #3a1460); box-shadow: 0 0 3cqw var(--rg); }
/* aura animée et portrait qui respire (grandes cartes seulement : vedette, fiche, invocation, MVP, écran titre) */
.kc-aura { position: absolute; inset: -9%; z-index: -1; border-radius: 16cqw; background: radial-gradient(closest-side, var(--rg), transparent 75%); animation: kcaura 2.6s ease-in-out infinite; pointer-events: none; }
.kc-aura::before { display: none; content: ''; position: absolute; inset: 4%; border-radius: inherit; background: conic-gradient(from 0deg, transparent 0 20deg, var(--sc) 24deg, transparent 30deg 110deg, var(--sc) 116deg, transparent 122deg 200deg, var(--sc) 206deg, transparent 212deg 290deg, var(--sc) 296deg, transparent 302deg); -webkit-mask: radial-gradient(closest-side, transparent 78%, #000 80%, transparent 96%); mask: radial-gradient(closest-side, transparent 78%, #000 80%, transparent 96%); animation: ryspin 7s linear infinite; opacity: .8; }
.kc.r3 .kc-aura::before { display: none; }
.kc.r5 .kc-aura { background: radial-gradient(closest-side, rgba(255,180,40,.75), rgba(255,90,20,.25) 60%, transparent 80%); }
.kc.r6 .kc-aura { background: radial-gradient(closest-side, rgba(255,90,209,.6), rgba(90,200,255,.25) 60%, transparent 80%); }
@keyframes kcaura { 50% { transform: scale(1.06); opacity: .75; } }
/* (pas d'animation sur le portrait lui-même : Chrome le redessinait par morceaux, des zones restaient sombres) */
.kc.fx { isolation: isolate; }
/* transitions entre les onglets */
.pg-in { animation: pgin .28s ease-out; } @keyframes pgin { from { opacity: 0; transform: translateY(8px); } }
.tabs a .tdot { position: absolute; top: 3px; right: 22%; width: 9px; height: 9px; border-radius: 50%; background: #ff4d5e; box-shadow: 0 0 0 2px #120e2c; }

/* ---------- campagne : héros vedette ---------- */
.jx-hero { position: relative; display: flex; gap: 12px; align-items: center; margin: 0 0 10px; padding: 10px 12px; border-radius: 20px; background: radial-gradient(120% 140% at 15% 50%, rgba(122,60,255,.35), rgba(20,14,48,.9) 70%); box-shadow: inset 0 0 0 1.5px rgba(255,210,63,.35); overflow: hidden; }
.jx-fav { flex: none; width: 92px; padding: 0; border: 0; background: none; cursor: pointer; } .jx-fav .kc { width: 100%; }
.jx-hr { flex: 1; min-width: 0; display: grid; gap: 5px; } .jx-hr > small { font: 900 10.5px/1 system-ui, sans-serif; letter-spacing: .06em; } .jx-hr > b { font: 400 24px/1 var(--f); color: #fff; text-shadow: 0 2px 0 #000; }
.jx-hr > span { font: 800 12px/1.2 system-ui, sans-serif; color: #cfc8ff; } .jx-hr > span b.ok { color: #6bf0a0; } .jx-hr > span b.lo { color: #ff7a88; }
.jx-chip { display: flex; align-items: center; gap: 6px; padding: 7px 10px; border: 0; border-radius: 12px; font: inherit; text-decoration: none; color: #fff; cursor: pointer; background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1.5px rgba(127,200,255,.4); }
.jx-chip b { flex: 1; text-align: left; font: 400 14px/1 var(--f); } .jx-chip em { font-style: normal; font: 900 12px/1 system-ui, sans-serif; padding: 3px 7px; border-radius: 99px; background: rgba(255,255,255,.14); } .jx-chip .ic { width: 20px; height: 20px; }
.jx-chip.gold { background: linear-gradient(90deg, rgba(255,210,63,.28), rgba(255,210,63,.06)); box-shadow: inset 0 0 0 1.5px #ffd23f; animation: rypulse2 1.6s ease-in-out infinite; } .jx-chip.gold b { color: #ffd23f; } .jx-chip.ok { opacity: .7; }
.jx-next { font: 800 11px/1.2 system-ui, sans-serif !important; color: #ffd98a !important; } .jx-next .ic { width: 16px; height: 16px; }
.lv-mile { position: absolute; right: -10px; top: -10px; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: #1b1640; box-shadow: 0 0 0 2px #ffd23f, 0 0 10px rgba(255,210,63,.6); font-style: normal; animation: rytw 2s ease-in-out infinite; } .lv-mile .ic { width: 18px; height: 18px; vertical-align: 0; }

/* ---------- portail : héros à l'honneur, tickets ---------- */
.gz-ban { gap: 14px; padding: 14px 12px; background: radial-gradient(120% 120% at 20% 50%, #5a2a10, #1b1640 70%); box-shadow: inset 0 0 0 1.5px #ffd23f, 0 10px 26px rgba(0,0,0,.4); }
.gz-feat { flex: none; width: 104px; margin: 4px 2px; } .gz-feat .kc { width: 100%; }
.gz-ban-t span .ic { width: 16px; height: 16px; } .gz-pity { color: #b9b3e6 !important; font-weight: 700 !important; } .gz-pity b { color: #ffd23f; }
.gz-btns .tbtn { display: flex; align-items: center; justify-content: center; gap: 5px; } .gz-btns .ic { width: 18px; height: 18px; }
.gz-tok { display: grid; gap: 6px; margin-top: 8px; } .gz-tk { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 0; border-radius: 14px; cursor: pointer; text-align: left; color: #fff; font: inherit; background: linear-gradient(90deg, rgba(255,210,63,.24), rgba(255,210,63,.05)); box-shadow: inset 0 0 0 1.5px #ffd23f; animation: rypulse2 1.6s ease-in-out infinite; }
.gz-tk .ic { width: 30px; height: 30px; } .gz-tk b { display: block; font: 400 15px/1.1 var(--f); color: #ffd23f; } .gz-tk small { display: block; font-size: 11.5px; font-weight: 800; color: #e6e3ff; }
.gz-rates { margin: 6px 0 0; text-align: center; font: 800 10.5px/1.3 system-ui, sans-serif; color: #7a7398; }
/* invocation à suspense : le portail change de couleur, entrée plein écran des Légendaires, « Passer » */
.gz .gz-orb, .gz .gz-circle, .gz .gz-bg { transition: background .5s, box-shadow .5s, transform 1.4s cubic-bezier(.5,0,.8,.5); }
.gz.r5:not(.boom) .gz-circle { animation-duration: .6s; } .gz.r5:not(.boom) { animation: gzshake .3s 1.6s 3; } @keyframes gzshake { 50% { transform: translate(3px, -2px); } }
.gz-skip { position: absolute; z-index: 5; right: 14px; top: calc(14px + env(safe-area-inset-top)); padding: 8px 14px; border: 0; border-radius: 99px; background: rgba(255,255,255,.14); color: #fff; font: 800 13px/1 system-ui, sans-serif; cursor: pointer; }
.gz.all .gz-flip { transition-delay: 0s !important; } .gz.all .gz-tag { transition-delay: 0s; }
.gz-cut { position: absolute; inset: 0; z-index: 6; display: grid; place-items: center; overflow: hidden; background: rgba(10,4,0,.6); animation: ryfade .2s; }
.gz-cut-band { position: absolute; left: -20%; right: -20%; top: 38%; height: 26%; transform: rotate(-10deg); background: linear-gradient(90deg, transparent, rgba(255,190,40,.85) 20%, #ffe27a 50%, rgba(255,190,40,.85) 80%, transparent); box-shadow: 0 0 60px rgba(255,180,40,.8); animation: gzband 1.85s ease-out both; }
.gz-cut img { position: absolute; height: 78%; max-width: 72%; object-fit: cover; border-radius: 16px; box-shadow: 0 0 0 4px #ffd23f, 0 0 60px rgba(255,200,60,.9); animation: gzcutimg 1.85s cubic-bezier(.2,.9,.3,1) both; }
.gz-cut span { position: absolute; left: 0; right: 0; bottom: 10%; text-align: center; animation: gzcuttxt 1.85s ease-out both; } .gz-cut small { display: block; font: 900 12px/1 system-ui, sans-serif; letter-spacing: .12em; color: #ffd23f; } .gz-cut b { display: block; margin-top: 4px; font: 400 46px/1 var(--f); color: #fff; text-shadow: 0 4px 0 #3a1500, 0 0 30px #ffb400; } .gz-cut em { font-style: normal; font-weight: 800; color: #ffe8b0; }
@keyframes gzband { 0% { transform: rotate(-10deg) scaleX(0); } 20% { transform: rotate(-10deg) scaleX(1); } 85% { opacity: 1; } 100% { opacity: 0; } }
@keyframes gzcutimg { 0% { transform: translateX(80%) scale(1.15); opacity: 0; } 25% { transform: translateX(0) scale(1); opacity: 1; } 80% { transform: translateX(-4%) scale(1.02); opacity: 1; } 100% { transform: translateX(-60%) scale(.95); opacity: 0; } }
@keyframes gzcuttxt { 0%, 20% { opacity: 0; transform: translateY(20px); } 35%, 85% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.gz-txt p .ic { width: 18px; height: 18px; } .gz-tag.dup { background: #7a3cff; } .gz-tag.evo { background: #ff5ad1; }

/* ---------- onglet Héros : bonus de faction, filtre, index ---------- */
.cv-syn { display: grid; gap: 5px; margin-top: 10px; } .cv-syn span { display: flex; align-items: center; gap: 6px; padding: 7px 10px; border-radius: 12px; font-size: 12.5px; font-weight: 800; color: #fff; background: color-mix(in srgb, var(--fc, #7a3cff) 18%, transparent); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--fc, #7a3cff) 55%, transparent); }
.cv-syn span b { margin-left: auto; color: var(--fc); } .cv-syn span.dim { color: #9a94c8; font-weight: 700; background: rgba(255,255,255,.04); box-shadow: none; } .cv-syn .ic { width: 20px; height: 20px; }
.cv-f { display: flex; gap: 6px; margin: -2px 0 10px; } .cv-f button { flex: 1; padding: 7px 0; border: 0; border-radius: 12px; cursor: pointer; background: rgba(255,255,255,.07); color: #cfc8ff; font: 800 12.5px/1 system-ui, sans-serif; } .cv-f button.on { background: rgba(255,210,63,.2); color: #ffd23f; box-shadow: inset 0 0 0 1.5px #ffd23f; } .cv-f .ic { width: 22px; height: 22px; vertical-align: middle; }
.cv-ixs { display: grid; gap: 7px; } .cv-ix { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 16px; background: linear-gradient(90deg, color-mix(in srgb, var(--fc) 16%, transparent), rgba(255,255,255,.03)); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--fc) 40%, transparent); }
.cv-ix > .ic { width: 32px; height: 32px; } .cv-ix span { flex: 1; min-width: 0; } .cv-ix b { display: block; font: 400 15px/1.1 var(--f); color: #fff; } .cv-ix em { display: block; height: 6px; margin: 5px 0 4px; border-radius: 3px; background: rgba(255,255,255,.12); overflow: hidden; } .cv-ix u { display: block; height: 100%; background: var(--fc); }
.cv-ix small { display: block; font-size: 11.5px; font-weight: 800; color: #cfc8ff; } .cv-ix .tbtn { flex: none; width: auto; margin: 0; padding: 8px 10px; font-size: 13px; max-width: none; display: flex; align-items: center; gap: 4px; } .cv-ix .tbtn .ic { width: 18px; height: 18px; } .cv-ixr .ic { width: 26px; height: 26px; opacity: .5; }
.sh-fac { color: var(--fc) !important; } .sh-id .ic, .sh-stats .ic { width: 18px; height: 18px; } .sh-bar.fr u { background: linear-gradient(90deg, #ff9ad5, #c070ff); } .cv-hint .ic, .cv-hint .orb { width: 15px; height: 15px; }
.pick-sheet .cv-grid { margin-top: 10px; } .pick-sheet .kc { cursor: pointer; }

/* ---------- combat : le pouvoir d'un héros, plein écran ---------- */
.bt-cut { position: absolute; inset: 0; z-index: 9; pointer-events: none; overflow: hidden; }
.bt-cut-band { position: absolute; left: -20%; right: -20%; top: 30%; height: 40%; transform: rotate(-8deg); background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--ec) 75%, #000) 25%, var(--ec) 50%, color-mix(in srgb, var(--ec) 75%, #000) 75%, transparent); opacity: .9; animation: gzband 1s ease-out both; }
.bt-cut img { position: absolute; left: 50%; top: 50%; height: 92%; width: auto; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 12px; box-shadow: 0 0 0 3px #fff, 0 0 40px var(--ec); animation: btcutimg 1s cubic-bezier(.2,.9,.3,1) both; }
.bt-cut span { position: absolute; left: 0; right: 0; bottom: 8%; text-align: center; animation: gzcuttxt 1s ease-out both; } .bt-cut small { display: block; font: 900 11px/1 system-ui, sans-serif; letter-spacing: .1em; color: #fff; text-shadow: 0 1px 3px #000; } .bt-cut b { display: block; font: 400 26px/1 var(--f); color: #ffe27a; text-shadow: 0 3px 0 #000, 0 0 18px var(--ec); }
.bt-cut.r5 b, .bt-cut.r6 b { font-size: 32px; } .bt-cut.r5 img, .bt-cut.r6 img { box-shadow: 0 0 0 3px #ffd23f, 0 0 60px #ffb400; }
@keyframes btcutimg { 0% { transform: translate(40%, -50%) scale(1.1); opacity: 0; } 25% { transform: translate(-50%, -50%) scale(1); opacity: 1; } 80% { transform: translate(-56%, -50%); opacity: 1; } 100% { transform: translate(-130%, -50%); opacity: 0; } }

/* ---------- écran de fin : MVP, ticket gagné ---------- */
.fqe-h { position: relative; } .fqe-h.mvp { transform: scale(1.1); z-index: 2; } .fqe-mvp { position: absolute; z-index: 5; left: 50%; top: -12px; transform: translateX(-50%); padding: 3px 8px; border-radius: 99px; background: linear-gradient(#ffe27a, #e09a10); color: #3a1500; font: 900 10px/1 system-ui, sans-serif; font-style: normal; white-space: nowrap; box-shadow: 0 2px 8px rgba(0,0,0,.5); } .fqe-mvp .ic { width: 13px; height: 13px; }
.fqe-tk { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 16px; background: linear-gradient(90deg, rgba(255,210,63,.3), rgba(255,210,63,.05)); box-shadow: inset 0 0 0 1.5px #ffd23f, 0 0 24px rgba(255,210,63,.35); animation: fqeban .6s 1.6s cubic-bezier(.3,1.6,.5,1) both; text-align: left; } .fqe-tk > .ic { width: 38px; height: 38px; } .fqe-tk small { display: block; font: 900 10px/1 system-ui, sans-serif; letter-spacing: .06em; color: #ffd98a; } .fqe-tk b { font: 400 18px/1.1 var(--f); color: #ffd23f; }
.fqe-loot span .ic, .fqe-loot span .orb { width: 22px; height: 22px; } .fqe-ms .ic { width: 16px; height: 16px; } .fqe-b .tbtn { display: flex; align-items: center; justify-content: center; gap: 6px; } .fqe-b .tbtn .ic { width: 20px; height: 20px; }
.lg-g .ic { width: 26px; height: 26px; } .lg-b .ry-go .ic { width: 26px; height: 26px; } .lg-g { grid-template-columns: repeat(5, 1fr); } .lg-g span.big { grid-column: span 2; } .lg-g span { padding: 6px 1px; } .lg-g b { font-size: 10.5px; }

/* ---------- écran titre ---------- */
.ttl-scr { position: fixed; inset: 0; z-index: 95; display: grid; place-items: center; overflow: hidden; cursor: pointer; transition: opacity .45s; }
.ttl-scr.out { opacity: 0; pointer-events: none; }
.ttl-bg { position: absolute; inset: 0; background: radial-gradient(70% 50% at 50% 35%, #5a2a9a, #1a0f3a 55%, #05030c 100%); }
.ttl-bg::after { content: ''; position: absolute; inset: 0; background: repeating-conic-gradient(from 0deg at 50% 36%, rgba(255,210,63,.07) 0 6deg, transparent 6deg 18deg); animation: ryspin 40s linear infinite; }
.ttl-cards { position: absolute; left: 50%; top: 34%; width: 0; height: 0; } .ttl-cards span { position: absolute; width: min(34vw, 165px); transform: translate(-50%, -50%); }
.ttl-cards .c0 { margin-left: -21vw; transform: translate(-50%, -46%) rotate(-12deg) scale(.82); } .ttl-cards .c2 { margin-left: 21vw; transform: translate(-50%, -46%) rotate(12deg) scale(.82); } .ttl-cards .c1 { z-index: 2; animation: ttlfloat 4s ease-in-out infinite; }
@keyframes ttlfloat { 50% { transform: translate(-50%, -53%); } }
.ttl-t { position: absolute; left: 0; right: 0; top: 63%; display: grid; justify-items: center; gap: 4px; text-align: center; } .ttl-t img { border-radius: 16px; box-shadow: 0 6px 20px rgba(0,0,0,.6); }
.ttl-t b { font: 400 54px/1 var(--f); color: #ffd23f; text-shadow: 0 5px 0 #3a1500, 0 0 30px rgba(255,180,40,.5); letter-spacing: .02em; } .ttl-t small { font: 900 13px/1 system-ui, sans-serif; letter-spacing: .3em; color: #e3b0ff; }
.ttl-tap { position: absolute; left: 0; right: 0; bottom: calc(9% + env(safe-area-inset-bottom)); margin: 0; text-align: center; font: 400 22px/1 var(--f); color: #fff; text-shadow: 0 2px 0 #000; animation: ttltap 1.4s ease-in-out infinite; } @keyframes ttltap { 50% { opacity: .35; } }
@media (min-width: 620px) { .ttl-scr { left: calc(50% - var(--gw) / 2) !important; right: auto !important; width: var(--gw) !important; } .ttl-cards .c0 { margin-left: -110px; } .ttl-cards .c2 { margin-left: 110px; } .ttl-cards span { width: 160px; } }

.tk-list { display: grid; gap: 6px; width: 100%; } .tk-list span { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 14px; background: linear-gradient(90deg, rgba(255,210,63,.24), rgba(255,210,63,.05)); box-shadow: inset 0 0 0 1.5px #ffd23f; } .tk-list .ic { width: 28px; height: 28px; } .tk-list b { font: 400 15px/1.1 var(--f); color: #ffd23f; text-align: left; }

/* ===================== 5 nov. 2026 (2) : onglet Défis, événements, équipement, partage ===================== */
.dg h2 .orb { width: 18px; height: 18px; }
.df-card { position: relative; display: flex; gap: 12px; align-items: flex-start; margin: 0 0 12px; padding: 12px; border-radius: 20px; background: radial-gradient(120% 120% at 15% 20%, rgba(122,60,255,.28), #1b1640 70%); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.12); }
.df-boss { background: radial-gradient(120% 120% at 15% 20%, rgba(255,60,80,.3), #1b1640 70%); box-shadow: inset 0 0 0 1.5px rgba(255,90,100,.45); }
.df-tower { background: radial-gradient(120% 120% at 15% 20%, rgba(90,120,255,.3), #1b1640 70%); box-shadow: inset 0 0 0 1.5px rgba(127,170,255,.45); }
.df-arena { background: radial-gradient(120% 120% at 15% 20%, rgba(255,170,60,.28), #1b1640 70%); box-shadow: inset 0 0 0 1.5px rgba(255,200,90,.45); }
.df-art { flex: none; width: 92px; } .df-art .kc { width: 100%; } .df-big { flex: none; width: 56px; font-size: 44px; font-style: normal; text-align: center; line-height: 1.2; }
.df-t { flex: 1; min-width: 0; display: grid; gap: 5px; } .df-t > small { font: 900 10.5px/1.2 system-ui, sans-serif; letter-spacing: .06em; color: #ffb3bb; } .df-tower .df-t > small { color: #b8ccff; } .df-arena .df-t > small { color: #ffd98a; }
.df-t > b { font: 400 21px/1.05 var(--f); color: #fff; } .df-t > span { font: 700 12px/1.35 system-ui, sans-serif; color: #d8d4f5; } .df-t > em { font-style: normal; font: 800 11.5px/1.35 system-ui, sans-serif; color: #ffd98a; } .df-t .ic { width: 16px; height: 16px; }
.df-t .tbtn { margin: 2px 0 0; padding: 11px; max-width: none; } .df-t .tbtn[disabled] { opacity: .45; }
.df-lock { align-items: center; opacity: .55; background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.08); } .df-lock > i .ic { width: 34px; height: 34px; filter: grayscale(1); } .df-lock b { display: block; font: 400 16px/1.1 var(--f); color: #fff; } .df-lock small { font-size: 12px; font-weight: 800; color: #9a94c8; }
.df-new { position: absolute; z-index: 3; right: 10px; top: -8px; padding: 3px 8px; border-radius: 99px; background: #ff4d5e; color: #fff; font: 900 10px/1 system-ui, sans-serif; font-style: normal; letter-spacing: .05em; box-shadow: 0 2px 8px rgba(0,0,0,.4); animation: rypulse 1.2s ease-in-out infinite; }
.df-prog { display: grid; gap: 6px; } .df-prog > small { font-size: 11.5px; font-weight: 800; color: #e6e3ff; } .df-prog b { color: #ffd23f; }
.df-bar { position: relative; display: block; height: 10px; border-radius: 5px; background: rgba(0,0,0,.45); overflow: hidden; box-shadow: inset 0 0 0 1px rgba(255,255,255,.15); } .df-bar u { display: block; height: 100%; background: linear-gradient(90deg, #ff4d5e, #ffd23f); } .df-bar i { position: absolute; top: 0; bottom: 0; width: 2px; background: rgba(255,255,255,.6); }
.df-tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; } .df-tiers span { position: relative; display: grid; justify-items: center; gap: 2px; padding: 6px 2px; border-radius: 10px; background: rgba(0,0,0,.25); text-align: center; opacity: .6; }
.df-tiers span.ok { opacity: 1; box-shadow: inset 0 0 0 1.5px #ffd23f; } .df-tiers span.got { opacity: .8; } .df-tiers .ic { width: 22px; height: 22px; } .df-tiers b { font: 400 12px/1 var(--f); color: #fff; } .df-tiers small { font: 800 9.5px/1.15 system-ui, sans-serif; color: #cfc8ff; }
.df-tiers .tbtn { margin: 3px 0 0; padding: 5px 8px; font-size: 11px; } .df-tiers span > i { font-style: normal; color: #6bf0a0; font-weight: 900; }
.df-top { margin: 4px 0 0; padding: 0; list-style: none; display: grid; gap: 2px; } .df-top li { display: flex; justify-content: space-between; padding: 4px 8px; border-radius: 8px; font-size: 11.5px; font-weight: 800; color: #cfc8ff; background: rgba(0,0,0,.18); } .df-top li.me { color: #ffd23f; background: rgba(255,210,63,.12); } .df-top b { color: #fff; }
.df-me { margin: 2px 0; font-size: 12px; font-weight: 800; color: #fff3cf; } .df-me.dim { color: #9a94c8; font-weight: 700; } .df-me b { color: #ffd23f; }
.df-opp { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 12px; background: rgba(0,0,0,.25); } .df-oth { display: flex; } .df-oth img { width: 30px; height: 44px; object-fit: cover; border-radius: 5px; margin-right: -8px; box-shadow: 0 0 0 1.5px #ffd98a, 0 2px 6px rgba(0,0,0,.5); }
.df-on { flex: 1; min-width: 0; margin-left: 10px; } .df-on b { display: block; font-size: 13px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .df-on small { font-size: 11.5px; font-weight: 800; color: #ffd98a; }
.df-opp .tbtn { flex: none; width: auto; margin: 0; padding: 9px 14px; max-width: none; } .df-arw { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 12px; background: rgba(255,210,63,.16); box-shadow: inset 0 0 0 1.5px #ffd23f; } .df-arw > .ic { width: 30px; height: 30px; } .df-arw span { flex: 1; } .df-arw b { display: block; color: #ffd23f; } .df-arw small { font-size: 11px; color: #e6e3ff; } .df-arw .tbtn { margin: 0; padding: 8px 10px; max-width: none; }
/* événement */
.ev-ban { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 12px; padding: 12px; border-radius: 20px; background: radial-gradient(120% 140% at 10% 50%, color-mix(in srgb, var(--ec) 40%, transparent), #1b1640 70%); box-shadow: inset 0 0 0 1.5px var(--ec), 0 0 22px color-mix(in srgb, var(--ec) 30%, transparent); }
.ev-ban .ev-ic { flex: none; width: 54px; height: 54px; animation: rytw 3s ease-in-out infinite; } .ev-ban > span { flex: 1; min-width: 0; display: grid; gap: 3px; } .ev-ban small { font: 900 10.5px/1 system-ui, sans-serif; letter-spacing: .05em; color: var(--ec); } .ev-ban b { font: 400 20px/1.05 var(--f); color: #fff; }
.ev-ban em { font-style: normal; font-size: 11.5px; font-weight: 700; line-height: 1.3; color: #d8d4f5; } .ev-ban u { text-decoration: none; font-size: 12.5px; font-weight: 900; color: #fff; } .ev-ban u .ic { width: 18px; height: 18px; } .ev-ban .tbtn { flex: 1 1 100%; justify-content: center; margin: 0; padding: 10px; max-width: none; display: flex; align-items: center; gap: 4px; font-size: 13px; } .ev-ban .tbtn .ic { width: 18px; height: 18px; }
.ev-sheet .fqp-box { background: radial-gradient(120% 50% at 50% 0%, color-mix(in srgb, var(--ec) 35%, #1b1640), #140f30 65%); } .ev-sheet h2 .ic { width: 28px; height: 28px; } .ev-sheet .hl-sub b { color: #ffd23f; }
.ev-row { display: flex; align-items: center; gap: 10px; margin-bottom: 7px; padding: 9px 10px; border-radius: 14px; background: rgba(255,255,255,.06); } .ev-row > .ic { width: 32px; height: 32px; } .ev-row span { flex: 1; } .ev-row b { display: block; font-size: 13.5px; color: #fff; } .ev-row small { font-size: 11px; font-weight: 800; color: #9a94c8; }
.ev-row .tbtn { margin: 0; padding: 8px 10px; max-width: none; display: flex; align-items: center; gap: 4px; font-size: 13px; } .ev-row .tbtn .ic { width: 16px; height: 16px; } .ev-row .tbtn[disabled] { opacity: .4; } .ev-row.out { opacity: .5; }
/* équipement */
.eqi { position: relative; flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; font-style: normal; background: radial-gradient(circle at 40% 30%, color-mix(in srgb, var(--qc) 55%, #1b1640), #120c26); box-shadow: inset 0 0 0 2px var(--qc), 0 0 8px color-mix(in srgb, var(--qc) 50%, transparent); --qc: #4fb4ff; }
.eqi.r4 { --qc: #c070ff; } .eqi.r5 { --qc: #ffc531; } .eqi.empty { --qc: rgba(255,255,255,.2); opacity: .7; } .eqi.big { width: 44px; height: 44px; } .eqi .ic { width: 70%; height: 70%; vertical-align: 0; } .eqi b { position: absolute; right: -4px; bottom: -4px; padding: 1px 4px; border-radius: 6px; background: #1f9d5a; color: #fff; font: 900 9.5px/1.2 system-ui, sans-serif; }
.sh-eq { display: grid; gap: 6px; margin-bottom: 10px; } .sh-slot { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 0; border-radius: 14px; cursor: pointer; text-align: left; color: #fff; font: inherit; background: rgba(0,0,0,.25); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.1); }
.sh-slot span, .eq-row > span { flex: 1; min-width: 0; } .sh-slot b, .eq-row > span b { display: block; font-size: 13.5px; } .sh-slot small, .eq-row > span small { display: block; font-size: 11.5px; font-weight: 800; color: #cfc8ff; }
.eq-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 7px; padding: 9px 10px; border-radius: 14px; background: rgba(255,255,255,.06); } .eq-row.on { box-shadow: inset 0 0 0 1.5px #4fd18b; background: rgba(79,209,139,.1); }
.eq-b { display: flex; gap: 5px; } .eq-b .tbtn { margin: 0; padding: 7px 9px; font-size: 12px; max-width: none; display: flex; align-items: center; gap: 3px; } .eq-b .tbtn .ic { width: 14px; height: 14px; } .eq-b small { font-size: 11px; color: #9a94c8; } .eq-on { width: 100%; font-size: 11px; font-weight: 800; color: #ffd98a; }
.fqe-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 12px; border-radius: 14px; background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 1.5px rgba(255,210,63,.4); text-align: left; animation: fqeban .6s 1.4s cubic-bezier(.3,1.6,.5,1) both; } .fqe-item > span { flex: 1; } .fqe-item b { display: block; font-size: 13.5px; } .fqe-item small { font-size: 11px; font-weight: 800; color: #cfc8ff; } .fqe-item em { font-style: normal; font: 900 9.5px/1 system-ui, sans-serif; color: #3a1500; background: #ffd23f; padding: 3px 6px; border-radius: 99px; }
.fqe-x { margin: 0; font-size: 13px; font-weight: 800; color: #e6e3ff; } .fqe-x.big { font-size: 15px; } .fqe-x b { color: #ffd23f; font-size: 18px; } .fqe-x .ic { width: 18px; height: 18px; }
/* partage et parrainage */
.gz-share { display: block; margin: 10px auto 0; padding: 10px 18px; border: 0; border-radius: 99px; background: rgba(255,255,255,.16); color: #fff; font: 800 14px/1 system-ui, sans-serif; cursor: pointer; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.3); pointer-events: auto; }
.pf-inv { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; padding: 12px; border-radius: 16px; background: linear-gradient(90deg, rgba(255,210,63,.2), rgba(255,210,63,.04)); box-shadow: inset 0 0 0 1.5px rgba(255,210,63,.5); flex-wrap: wrap; }
.pf-inv > .ic { width: 36px; height: 36px; } .pf-inv > span { flex: 1; min-width: 180px; } .pf-inv b { display: block; font: 400 17px/1.1 var(--f); color: #ffd23f; } .pf-inv small { display: block; margin-top: 3px; font-size: 12px; font-weight: 700; color: #f3e6c0; line-height: 1.35; } .pf-inv em { display: block; margin-top: 4px; font-style: normal; font-weight: 900; color: #6bf0a0; }
.pf-inv .tbtn { width: 100%; max-width: none; margin: 0; }

.fqe-team { padding-top: 10px; } /* le badge MVP ne chevauche plus les conditions des étoiles */


/* ===================== 6 nov. 2026 : façon quiz RPG japonais (genres, 2 ennemis, compteurs, Minuit) et « juice » ===================== */
/* deux ennemis : celui de devant et celui de derrière ; la cible a un viseur */
.bt-f.n2 { width: min(21%, calc((74cqh - 34px) / 1.5)); } .bt-f.n2.p0 { right: 2%; bottom: 4%; z-index: 2; } .bt-f.n2.p1 { right: 25%; bottom: 17%; width: min(19%, calc((66cqh - 34px) / 1.5)); z-index: 1; }
.bt-f { cursor: pointer; } .bt-tgt { position: absolute; z-index: 6; left: 50%; top: 46%; width: 70%; aspect-ratio: 1; transform: translate(-50%, -50%) scale(.6); border-radius: 50%; border: 3px dashed #ffd23f; opacity: 0; pointer-events: none; box-shadow: 0 0 14px rgba(255,210,63,.6); }
.bt-f.tg .bt-tgt { opacity: .9; transform: translate(-50%, -50%) scale(1); animation: bttgt 4s linear infinite; transition: opacity .2s, transform .25s cubic-bezier(.3,1.6,.5,1); }
@keyframes bttgt { to { transform: translate(-50%, -50%) rotate(360deg); } } .bt-f.tgin .kc-f { animation: bthit .3s; }
.bt-f.windup .kc-f { animation: btwind .26s ease-in; } @keyframes btwind { 60% { transform: scale(1.08) translateX(6px); filter: brightness(1.4) drop-shadow(0 0 10px #ff2a3c); } }
.bt-f .bt-cd { width: 28px; height: 28px; font-size: 16px; }
/* genre : la question, le badge de spécialité des héros ; les spécialistes brillent */
.bt-gen { display: inline-flex; align-items: center; gap: 3px; margin-right: 4px; padding: 2px 7px 2px 4px; border-radius: 99px; background: color-mix(in srgb, var(--gc) 22%, #fff); color: #1a1430; font-weight: 900; box-shadow: inset 0 0 0 1.5px var(--gc); } .bt-gen .ic { width: 15px; height: 15px; }
.bt-gn { position: absolute; z-index: 3; left: -3cqw; bottom: 22cqw; width: 22cqw; height: 22cqw; display: grid; place-items: center; border-radius: 50%; background: rgba(10,6,24,.85); font-style: normal; box-shadow: 0 0 0 1cqw rgba(255,255,255,.25); } .bt-gn .ic { width: 15cqw; height: 15cqw; vertical-align: 0; }
.bt-x2 { position: absolute; z-index: 5; right: -6px; top: 16px; padding: 2px 6px; border-radius: 99px; background: linear-gradient(#ff7ad9, #c0207a); color: #fff; font: 900 11px/1 system-ui, sans-serif; font-style: normal; transform: scale(0); transition: transform .25s cubic-bezier(.3,1.8,.5,1); box-shadow: 0 0 10px rgba(255,90,209,.7); pointer-events: none; }
.bt-h.spec .bt-x2 { transform: scale(1); animation: rypulse 1s ease-in-out infinite; } .bt-h.spec .kc-f { box-shadow: 0 0 0 1.2cqw #ff7ad9, 0 0 12cqw rgba(255,90,209,.7); }
.bt-h.spx .kc-f { animation: btspx .5s; } @keyframes btspx { 40% { transform: scale(1.12); filter: brightness(1.6) saturate(1.4); } }
.bt-pop.spec { font-size: 15px; color: #ff9ad5; letter-spacing: .04em; }
/* bonne réponse / erreur : le grand ○ ou ✕ sur la question, les rayons sur le bouton, l'écran qui rougit */
.bt-card { position: relative; } .bt-stamp { position: absolute; right: 8px; top: 8px; width: 46px; height: 46px; opacity: 0; pointer-events: none; font-style: normal; }
.bt-stamp.show { animation: btstamp .45s cubic-bezier(.3,1.8,.5,1) forwards; } @keyframes btstamp { from { opacity: 0; transform: scale(2.2) rotate(-20deg); } to { opacity: 1; transform: scale(1) rotate(-8deg); } }
.bt-stamp b { position: absolute; inset: 0; border-radius: 50%; } .bt-stamp.ok b { border: 6px solid #2fd27a; box-shadow: 0 0 18px rgba(47,210,122,.6), inset 0 0 12px rgba(47,210,122,.4); }
.bt-stamp.ko b::before, .bt-stamp.ko b::after { content: ''; position: absolute; left: 4px; right: 4px; top: 50%; height: 7px; margin-top: -3.5px; border-radius: 4px; background: #ff4d5e; box-shadow: 0 0 14px rgba(255,77,94,.6); transform: rotate(45deg); } .bt-stamp.ko b::after { transform: rotate(-45deg); }
.bt-stamp small { position: absolute; left: 50%; bottom: -13px; transform: translateX(-50%); white-space: nowrap; font: 900 10px/1 system-ui, sans-serif; letter-spacing: .05em; color: #138a4a; } .bt-stamp.ko small { color: #c2263c; }
.bt-a button { position: relative; overflow: hidden; } .bt-rays { position: absolute; inset: -40%; background: repeating-conic-gradient(from 0deg, rgba(255,255,255,.35) 0 8deg, transparent 8deg 24deg); animation: btrays .6s ease-out forwards; pointer-events: none; } @keyframes btrays { from { transform: scale(.2) rotate(0); opacity: 1; } to { transform: scale(1.4) rotate(40deg); opacity: 0; } }
.bt.wrong .bt-vig { animation: btred .5s ease-out; } .bt-vig { position: absolute; inset: 0; pointer-events: none; z-index: 20; opacity: 0; box-shadow: inset 0 0 90px 30px rgba(255,30,60,.55); } @keyframes btred { 30% { opacity: 1; } }
.bt.danger .bt-vig { opacity: 1; animation: btdanger 1.1s ease-in-out infinite; } @keyframes btdanger { 50% { opacity: .35; } }
.bt.hurry .bt-card { animation: bthurryc .5s ease-in-out infinite; } @keyframes bthurryc { 25% { transform: translateX(-1.5px); } 75% { transform: translateX(1.5px); } }
/* les orbes qui volent de la réponse vers les héros */
.bt-orb { position: fixed; z-index: 80; width: 18px; height: 18px; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, #fff 0, var(--ec) 45%, transparent 72%); box-shadow: 0 0 14px 4px var(--ec); }
.bt-orb.x2 { width: 26px; height: 26px; box-shadow: 0 0 20px 6px #ff7ad9; }
.bt-h.charge .kc-f { animation: btchg .35s; } @keyframes btchg { 40% { filter: brightness(1.8); transform: scale(1.05); } }
.bt-h.readyin { animation: btrdyin .6s cubic-bezier(.3,1.8,.5,1); } @keyframes btrdyin { 40% { transform: translateY(-10%) scale(1.1); } }
/* arrêt sur image à l'impact, total des dégâts du tour, paliers de combo, vague terminée */
.bt-stage.hs .bt-units { animation: bths .12s steps(1); } @keyframes bths { 0% { transform: scale(1.018); filter: brightness(1.25) contrast(1.1); } 100% { transform: none; } }
.bt-total { position: absolute; z-index: 7; right: 6%; top: 10%; text-align: center; font: 400 30px/1 var(--f); color: #fff; text-shadow: 0 3px 0 #000, 0 0 16px rgba(255,210,63,.7); opacity: 0; pointer-events: none; }
.bt-total small { display: block; font: 900 10px/1 system-ui, sans-serif; letter-spacing: .1em; color: #ffd23f; } .bt-total.show { animation: bttot 1s ease-out forwards; } @keyframes bttot { 0% { opacity: 0; transform: scale(.4); } 20% { opacity: 1; transform: scale(1.25); } 35% { transform: scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(-14px); } }
.bt-wave.combo { color: #ff9a3c; font-size: 34px; text-shadow: 0 3px 0 #3a1500, 0 0 20px rgba(255,120,40,.8); } .bt-wave.clear { color: #6bf0a0; font-size: 26px; }
.bt-f.dead { animation: btdead2 .8s ease-in forwards; } @keyframes btdead2 { 15% { transform: scale(1.12); filter: brightness(3) saturate(0); } 100% { transform: translateY(18%) scale(.6) rotate(10deg); opacity: 0; filter: brightness(3) blur(4px); } }
.bt-conf { position: absolute; z-index: 9; top: -10px; width: 8px; height: 12px; border-radius: 2px; pointer-events: none; animation: btconf 1.8s cubic-bezier(.3,.6,.5,1) forwards; } @keyframes btconf { to { transform: translateY(330px) rotate(var(--r)); opacity: 0; } }
/* Minuit, le chat guide : dans les conseils de combat, les annonces, l'histoire */
.bt-coach { display: flex; gap: 10px; align-items: flex-start; } .bt-cat { flex: none; width: 46px; height: 46px; margin-top: -2px; } .bt-cat svg, .big-cat svg, .vn-cat svg { display: block; width: 100%; height: 100%; }
.bt-coach > span { flex: 1; } .bt-coach > span > b:first-child { display: block; font: 400 14px/1 var(--f); color: #7a3cff; margin-bottom: 2px; }
.big-cat { display: block; width: 72px; height: 72px; margin: 0 auto -4px; filter: drop-shadow(0 6px 16px rgba(122,60,255,.6)); animation: ttlfloat2 3s ease-in-out infinite; } @keyframes ttlfloat2 { 50% { transform: translateY(-5px); } }
.vn { position: fixed; inset: 0; z-index: 92; display: flex; flex-direction: column; justify-content: flex-end; cursor: pointer; animation: ryfade .3s; transition: opacity .3s; } .vn.out { opacity: 0; }
.vn-bg { position: absolute; inset: 0; background: radial-gradient(80% 60% at 50% 35%, rgba(60,30,120,.75), rgba(5,3,12,.94) 70%); } .vn.boss .vn-bg { background: radial-gradient(80% 60% at 50% 35%, rgba(120,20,40,.75), rgba(5,3,12,.95) 70%); }
.vn-pic { position: relative; z-index: 1; align-self: center; width: min(62vw, 270px); margin-bottom: -18px; } .vn-pic.in { animation: vnin .45s cubic-bezier(.3,1.4,.5,1); } @keyframes vnin { from { opacity: 0; transform: translateY(30px) scale(.94); } }
.vn-pic img { display: block; width: 100%; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 16px; box-shadow: 0 0 0 3px #ffd23f, 0 18px 50px rgba(0,0,0,.7); -webkit-mask: linear-gradient(#000 70%, transparent); mask: linear-gradient(#000 70%, transparent); }
.vn-pic .vn-boss { box-shadow: 0 0 0 3px #ff4d5e, 0 0 40px rgba(255,40,60,.6); } .vn-cat { display: block; width: 70%; margin: 0 auto 30px; aspect-ratio: 1; filter: drop-shadow(0 10px 30px rgba(122,60,255,.7)); animation: ttlfloat2 3s ease-in-out infinite; }
.vn-box { position: relative; z-index: 2; margin: 0 12px calc(16px + env(safe-area-inset-bottom)); padding: 14px 16px 12px; border-radius: 18px; background: rgba(14,10,34,.95); box-shadow: inset 0 0 0 2px rgba(255,210,63,.5), 0 10px 30px rgba(0,0,0,.6); min-height: 112px; }
.vn.boss .vn-box { box-shadow: inset 0 0 0 2px rgba(255,77,94,.6), 0 10px 30px rgba(0,0,0,.6); }
.vn-who { display: inline-block; margin: -26px 0 6px; padding: 5px 12px; border-radius: 10px; background: linear-gradient(#ffe27a, #e09a10); color: #3a1500; font: 400 16px/1 var(--f); } .vn.boss .vn-who { background: linear-gradient(#ff7a88, #b0182c); color: #fff; } .vn.cat .vn-who { background: linear-gradient(#b48cff, #6a3ad0); color: #fff; }
.vn-txt { margin: 0; min-height: 3.6em; font-size: 16px; font-weight: 700; line-height: 1.45; color: #fff; } .vn-box em { display: block; margin-top: 4px; text-align: right; font-style: normal; font-size: 11px; font-weight: 800; color: #9a94c8; animation: ttltap 1.4s ease-in-out infinite; }
.vn-skip { position: absolute; z-index: 3; right: 12px; top: calc(12px + env(safe-area-inset-top)); padding: 8px 14px; border: 0; border-radius: 99px; background: rgba(255,255,255,.14); color: #fff; font: 800 13px/1 system-ui, sans-serif; cursor: pointer; }
@media (min-width: 620px) { .vn { left: calc(50% - var(--gw) / 2) !important; right: auto !important; width: var(--gw) !important; } }
/* fiche du héros : spécialité et compétence de réponse */
.sh-gen { color: var(--gc) !important; } .sh-gen b { color: #fff; } .sh-as { margin-bottom: 10px; padding: 10px 12px; border-radius: 14px; background: rgba(255,255,255,.06); } .sh-as b { display: block; font-size: 12px; font-weight: 900; color: #cfc8ff; } .sh-as span { font-size: 12.5px; font-weight: 700; line-height: 1.35; color: #fff; }
/* « juice » partout : boutons qui s'écrasent sous le doigt, messages qui rebondissent */
.tbtn, .play, .ry-go, .jx-chip, .lv-node, .gz-tk, .sh-slot, .cv-f button, .bt-a button { transition: transform .12s cubic-bezier(.3,1.6,.5,1), filter .12s; }
.tbtn:active, .play:active, .ry-go:active, .jx-chip:active, .gz-tk:active, .sh-slot:active, .cv-f button:active { transform: scale(.93); filter: brightness(1.15); }
.lv-node:active { transform: scale(.9); } .lv-node.l:active { transform: translateX(-70px) scale(.9); } .lv-node.r:active { transform: translateX(70px) scale(.9); }
.toast { animation: toastin .4s cubic-bezier(.3,1.7,.5,1); } @keyframes toastin { from { opacity: 0; transform: translate(-50%, 20px) scale(.85); } }
#jxgo { animation: gobtn 2.2s ease-in-out infinite; } @keyframes gobtn { 50% { filter: brightness(1.12); box-shadow: 0 0 26px rgba(255,190,60,.55); } }
.jx-res b.up { display: inline-block; animation: resup .6s cubic-bezier(.3,1.8,.5,1); color: #6bf0a0; } @keyframes resup { 40% { transform: scale(1.5); } }
.fqe-loot span { position: relative; } .fqe-loot span::after { content: ''; position: absolute; inset: -6px; border-radius: 18px; box-shadow: 0 0 0 2px rgba(255,210,63,.8); opacity: 0; animation: lootring .7s ease-out both; animation-delay: calc(1.5s + var(--i) * .12s); } @keyframes lootring { from { opacity: 1; transform: scale(.8); } to { opacity: 0; transform: scale(1.3); } }

/* ---------- confort : animations réduites, texte plus grand (Profil) ---------- */
html.calme .bt-pfx, html.calme .kc-aura, html.calme .bt-fog, html.calme .bt-rays, html.calme .bt-conf { display: none !important; }
html.calme .ttl-bg::after, html.calme .gz-rays, html.calme .fqe-rays, html.calme .gz.boom .gz-rays, html.calme .lv-ff, html.calme #jxgo, html.calme .jx-chip.gold, html.calme .gz-tk, html.calme .df-new,
html.calme .bt-h.ready .kc-f, html.calme .bt-h.ready .bt-rdy, html.calme .bt-f.tg .bt-tgt, html.calme .bt-h.spec .bt-x2, html.calme .big-cat, html.calme .vn-cat, html.calme .ttl-cards .c1, html.calme .lg-g span.now, html.calme .bt.danger .bt-vig { animation: none !important; }
html.calme .bt-stage.shake, html.calme .bt-stage.shake2 { animation: none !important; }
html.grand .bt-card p { font-size: 19.5px; } html.grand .bt-a button { font-size: 17px; min-height: 58px; } html.grand .bt-e { font-size: 15px !important; }
html.grand .vn-txt { font-size: 18.5px; } html.grand .bt-coach { font-size: 15.5px; } html.grand .ry-unlp, html.grand .sh-sk small, html.grand .sh-as span { font-size: 15px; }

/* bénédiction de Minuit (après une défaite) */
.bti-bless, .fqe-bless { display: flex; align-items: center; gap: 10px; margin: 0; padding: 8px 12px; border-radius: 14px; text-align: left; background: linear-gradient(90deg, rgba(122,60,255,.35), rgba(122,60,255,.08)); box-shadow: inset 0 0 0 1.5px #b48cff, 0 0 18px rgba(122,60,255,.35); animation: fqeban .5s .3s cubic-bezier(.3,1.6,.5,1) both; }
.bti-bless i, .fqe-bless i { flex: none; width: 40px; height: 40px; } .bti-bless svg, .fqe-bless svg { display: block; width: 100%; height: 100%; }
.bti-bless b, .fqe-bless b { display: block; font: 400 15px/1.1 var(--f); color: #e3b0ff; } .bti-bless span, .fqe-bless span { font-size: 12px; font-weight: 700; color: #f0e6ff; line-height: 1.3; }
/* 3 nov. 2026 : objectif, demain, boss du jour, invitation */
.bt-x0 { flex: none; width: 34px; height: 34px; }
.jx-goal { display: block; padding: 6px 8px 7px; border-radius: 10px; background: rgba(255,210,63,.08); box-shadow: inset 0 0 0 1px rgba(255,210,63,.35); }
.jx-goal small { display: block; font: 900 9.5px/1 system-ui, sans-serif; letter-spacing: .04em; color: #ffd98a; }
.jx-goal b { display: flex; align-items: center; gap: 5px; margin: 4px 0 5px; font: 400 13px/1.1 var(--f); color: #fff; } .jx-goal .ic { width: 18px; height: 18px; }
.jx-goal i { display: block; height: 6px; border-radius: 99px; background: rgba(0,0,0,.4); overflow: hidden; } .jx-goal em { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #ffb31f, #ffe46b); }
.jx-chip.tmr { box-shadow: inset 0 0 0 1.5px rgba(180,140,255,.55); background: linear-gradient(90deg, rgba(122,60,255,.25), rgba(122,60,255,.05)); } .jx-chip.tmr b { color: #e3b0ff; }
.jx-chip.tmr em { display: inline-flex; align-items: center; gap: 3px; } .jx-chip.tmr em .ic { width: 14px; height: 14px; }
.fqe-goal { margin: 0; padding: 7px 12px; border-radius: 12px; background: rgba(255,210,63,.1); box-shadow: inset 0 0 0 1px rgba(255,210,63,.4); font-size: 13px; font-weight: 800; color: #ffe9a8; animation: fqeban .5s .4s cubic-bezier(.3,1.6,.5,1) both; }
.fqe-goal .ic { width: 18px; height: 18px; vertical-align: -4px; }
.fqe-tmr { display: flex; align-items: center; gap: 10px; margin: 0; padding: 8px 12px; border-radius: 14px; text-align: left; background: linear-gradient(90deg, rgba(122,60,255,.35), rgba(122,60,255,.08)); box-shadow: inset 0 0 0 1.5px #b48cff; animation: fqeban .5s .5s cubic-bezier(.3,1.6,.5,1) both; }
.fqe-tmr i { flex: none; width: 40px; height: 40px; } .fqe-tmr i svg { display: block; width: 100%; height: 100%; }
.fqe-tmr b.t { display: block; font: 400 15px/1.1 var(--f); color: #e3b0ff; } .fqe-tmr span { font-size: 12px; font-weight: 700; color: #f0e6ff; line-height: 1.35; } .fqe-tmr span .ic { width: 15px; height: 15px; vertical-align: -3px; } .fqe-tmr span b { display: inline; font: 900 12px/1 system-ui, sans-serif; color: #fff; }
.gz-share.gold { background: linear-gradient(180deg, #ffe46b, #ffb31f); color: #2a1660; box-shadow: 0 4px 0 #b77a10, 0 0 24px rgba(255,210,63,.5); }
.gz-txt .gz-ref { display: block; max-width: 300px; margin: 8px auto 0; font: 700 12px/1.3 system-ui, sans-serif; letter-spacing: 0; text-transform: none; color: #e6deff; opacity: .9; }
/* quête « Sauve Solène » */
.jx-resq { display: flex; align-items: center; gap: 8px; width: 100%; padding: 5px 8px 5px 5px; border: 0; border-radius: 12px; font: inherit; text-align: left; color: #fff; cursor: pointer; background: linear-gradient(90deg, rgba(255,70,90,.32), rgba(255,70,90,.06)); box-shadow: inset 0 0 0 1.5px #ff6b7d; animation: resqpulse 1.4s ease-in-out infinite; }
.jx-resq img { flex: none; width: 38px; height: 46px; object-fit: cover; object-position: top; border-radius: 8px; filter: saturate(.55) brightness(.85); box-shadow: 0 0 0 1.5px #ff6b7d, 0 0 12px rgba(255,70,90,.7); }
.jx-resq small { display: block; font: 900 9.5px/1 system-ui, sans-serif; letter-spacing: .04em; color: #ffb3bd; } .jx-resq b { display: block; margin-top: 4px; font: 400 19px/1 var(--f); color: #fff; font-variant-numeric: tabular-nums; }
.jx-resq.late { background: linear-gradient(90deg, rgba(122,60,255,.3), rgba(122,60,255,.06)); box-shadow: inset 0 0 0 1.5px #b48cff; animation: none; } .jx-resq.late small { color: #e3b0ff; } .jx-resq.late img { box-shadow: 0 0 0 1.5px #b48cff; }
@keyframes resqpulse { 50% { box-shadow: inset 0 0 0 1.5px #ff6b7d, 0 0 16px rgba(255,70,90,.45); } }
html.calme .jx-resq { animation: none; }
.fqe-resq { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 14px; text-align: left; background: linear-gradient(90deg, rgba(255,210,63,.3), rgba(255,210,63,.06)); box-shadow: inset 0 0 0 1.5px #ffd23f, 0 0 20px rgba(255,210,63,.35); animation: fqeban .5s .3s cubic-bezier(.3,1.6,.5,1) both; }
.fqe-resq img { flex: none; width: 44px; height: 54px; object-fit: cover; object-position: top; border-radius: 9px; box-shadow: 0 0 0 2px #ffd23f; }
.fqe-resq b { display: block; font: 400 16px/1.1 var(--f); color: #ffd23f; } .fqe-resq span { font-size: 12px; font-weight: 700; color: #fff4d6; line-height: 1.3; }
/* quêtes de Minuit */
.jx-q { width: 100%; border: 0; font: inherit; text-align: left; color: #fff; cursor: pointer; position: relative; }
.jx-q b { justify-content: space-between; } .jx-q b em { flex: none; display: inline-flex; align-items: center; gap: 2px; font: 900 11px/1 system-ui, sans-serif; font-style: normal; color: #ffd23f; padding: 2px 6px; border-radius: 99px; background: rgba(0,0,0,.35); } .jx-q b em .ic { width: 15px; height: 15px; }
.jx-q .jx-qn { margin-top: 3px; text-align: right; color: #cfc8ff; letter-spacing: 0; }
.fqe-quest { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 14px; text-align: left; background: linear-gradient(90deg, rgba(255,210,63,.3), rgba(255,210,63,.06)); box-shadow: inset 0 0 0 1.5px #ffd23f, 0 0 20px rgba(255,210,63,.3); animation: fqeban .5s .35s cubic-bezier(.3,1.6,.5,1) both; }
.fqe-quest > i { flex: none; width: 40px; height: 40px; } .fqe-quest > i svg { display: block; width: 100%; height: 100%; }
.fqe-quest small { display: block; font: 900 10px/1 system-ui, sans-serif; letter-spacing: .05em; color: #ffd98a; } .fqe-quest b { display: block; margin: 3px 0; font: 400 16px/1.1 var(--f); color: #ffd23f; }
.fqe-quest em { display: block; font-style: normal; font-size: 12.5px; font-weight: 800; color: #fff; } .fqe-quest em .ic { width: 16px; height: 16px; vertical-align: -3px; }
.fqe-quest u { display: block; margin-top: 4px; text-decoration: none; font-size: 11.5px; font-weight: 700; color: #e6deff; }
/* scènes : alerte (enlèvement) et délivrance */
.vn-ban { position: absolute; z-index: 2; left: 0; right: 0; top: calc(64px + env(safe-area-inset-top)); text-align: center; font: 400 26px/1.1 var(--f); color: #fff; text-shadow: 0 3px 0 #000, 0 0 20px #ff3b55; pointer-events: none; animation: vnban .7s cubic-bezier(.3,1.6,.5,1) both; }
@keyframes vnban { from { opacity: 0; transform: scale(1.6); } }
.vn.alarm .vn-bg { background: radial-gradient(80% 60% at 50% 35%, rgba(150,20,40,.8), rgba(5,3,12,.95) 70%); animation: vnalarm 1.3s ease-in-out infinite; } @keyframes vnalarm { 50% { filter: brightness(1.4); } }
.vn.alarm .vn-pic img { box-shadow: 0 0 0 2px #ff4d5e, 0 0 30px rgba(255,60,80,.6); }
.vn.saved .vn-bg { background: radial-gradient(80% 60% at 50% 35%, rgba(255,190,70,.6), rgba(5,3,12,.94) 70%); } .vn.saved .vn-ban { color: #ffe46b; text-shadow: 0 3px 0 #000, 0 0 20px #ffd23f; }
.vn.saved .vn-pic img { box-shadow: 0 0 0 2px #ffd23f, 0 0 34px rgba(255,210,63,.65); }
html.calme .vn.alarm .vn-bg { animation: none; }
/* fin de combat : nouveautés débloquées → retour au menu */
.fqe-unl { display: grid; gap: 4px; padding: 9px 12px; border-radius: 14px; text-align: center; background: linear-gradient(90deg, rgba(127,200,255,.08), rgba(127,200,255,.2), rgba(127,200,255,.08)); box-shadow: inset 0 0 0 1.5px #7fc8ff, 0 0 20px rgba(127,200,255,.3); animation: fqeban .5s .45s cubic-bezier(.3,1.6,.5,1) both; }
.fqe-unl small { font: 900 10.5px/1 system-ui, sans-serif; letter-spacing: .08em; color: #9fd8ff; } .fqe-unl b { font: 400 16px/1.15 var(--f); color: #fff; } .fqe-unl .ic { width: 18px; height: 18px; vertical-align: -3px; }
.ry-push { display: block; width: 100%; margin: 4px 0 6px; }