/* Habillage de TEST « clean » (?skin=clean, js/skin.js) : plus de cadres « volés à Dofus ». Trois ingrédients : des fondus d'encre (#1a0d2e) vers le transparent (haut, côtés, bas), des icônes flottantes, et UNE demi-plaque sombre sous le dock dont le bord haut passe au milieu des cartes du marché. Fond de page = le décor du plateau (--skin-bd, posé par skin.js ; view.js laisse le canvas transparent). Tout est préfixé body.skin-clean ; la mise en place ordinateur par :not(.mobile), le téléphone par .mobile. */ body.skin-clean { --ink: 26,13,46; --plate: rgba(21,18,29,.88); --plate-line: rgba(236,230,214,.2); --gold2: #ffd21f; --pt: 93px; } /* ---------------------------------------------------------------- fond : le décor du plateau sur toute la scène + vignette plate */ body.skin-clean #game { background: radial-gradient(ellipse 72% 68% at 50% 46%, rgba(var(--ink),0) 55%, rgba(var(--ink),.55) 100%), var(--skin-bd, none) var(--skin-bd-pos, center) / var(--skin-bd-size, cover) no-repeat, var(--skin-bd-fog, #1a0d2e); } /* Sanctuaire : canvas plein écran par-dessus (skin.js, lobbyFull) */ /* ordinateur : les fondus des deux colonnes sont dans le fond de la scène (sous le canvas transparent) : un seul dégradé continu depuis le bord (.85 → .6 à 180 px → .25 à 260 px → 0 à 330 px), en miroir à droite */ body.skin-clean:not(.mobile) #game { background: linear-gradient(90deg, rgba(var(--ink),.85) 0, rgba(var(--ink),.62) 150px, rgba(var(--ink),.25) 210px, rgba(var(--ink),0) 250px), /* fondus resserrés : listes compactes (Scott) */ linear-gradient(270deg, rgba(var(--ink),.85) 0, rgba(var(--ink),.6) 70px, rgba(var(--ink),.25) 105px, rgba(var(--ink),0) 135px), radial-gradient(ellipse 72% 68% at 50% 46%, rgba(var(--ink),0) 55%, rgba(var(--ink),.55) 100%), var(--skin-bd, none) var(--skin-bd-pos, center) / var(--skin-bd-size, cover) no-repeat, var(--skin-bd-fog, #1a0d2e); } body.skin-clean:not(.mobile) .rail, body.skin-clean:not(.mobile) #players { background: none; } /* Sanctuaire plein écran : le canvas de skin.js sous toute l'interface ; à la fin, il s'efface avec le fondu du plateau */ /* cartes des dieux compactes (l'île, posée sous leur bas par skin.js, grandit d'autant) : grille de 3 rangées nom · thème · fidèles · difficulté / quête (2 lignes) / relique | « Choisir » ; bandeau et cartes collés sous la barre du haut */ /* téléphone : bandeau sur une ligne de 24 px, cartes plus serrées (nom de la relique sur sa ligne, effet sur 2 lignes à 11 px) */ body.skin-clean.mobile .lb-rec { top: -6px; right: 8px; padding: 1px 6px; font-size: 12px; } /* ---------------------------------------------------------------- briques : boutons, barres, titres */ body.skin-clean h3 { color: #ece6d6; letter-spacing: 1.2px; } body.skin-clean h3::after { display: none; } body.skin-clean .hint { color: #c9c2b0; } body.skin-clean .bar { height: 4px; background: rgba(255,255,255,.16); border: 0; border-radius: 2px; box-shadow: none; } body.skin-clean .bar i { background: var(--lime); } body.skin-clean .btn-grey { background: rgba(var(--ink),.5); border: 0; border-radius: 16px; box-shadow: none; } body.skin-clean .btn-grey:hover:not(:disabled) { background: rgba(var(--ink),.8); color: #fff; } body.skin-clean .btn-grey.on { background: var(--lime); color: #1c2300; } body.skin-clean .icon-btn { background: none; border: 0; border-radius: 50%; } body.skin-clean .icon-btn:hover { background: rgba(var(--ink),.5); } body.skin-clean .btn-green { border: 0; border-image: none; border-radius: 16px; background: var(--lime); color: #1c2300; text-shadow: none; padding: 0 12px; } body.skin-clean .btn-green:hover:not(:disabled) { border-image: none; background: #dcf53a; } body.skin-clean .btn-green:active:not(:disabled) { border-image: none; background: #a7bf00; } body.skin-clean .btn-green:disabled { border-image: none; background: rgba(200,226,10,.28); color: rgba(236,230,214,.75); opacity: 1; } body.skin-clean .badge { border-radius: 10px; } body.skin-clean .sell { border: 0; border-radius: 9px; background: #e5493b; } /* ---------------------------------------------------------------- barre du haut : fondu d'encre vers le bas */ body.skin-clean #topbar { background: none; border: 0; box-shadow: none; } body.skin-clean #topbar::before { content: ''; position: absolute; z-index: -1; left: 0; right: 0; top: 0; height: 88px; pointer-events: none; background: linear-gradient(180deg, rgba(var(--ink),.85) 0, rgba(var(--ink),.62) 46px, rgba(var(--ink),0) 100%); } /* Aide / Quitter : texte flottant, sans pastille */ body.skin-clean #topbar .btn-grey { background: none; } body.skin-clean #topbar .btn-grey:hover:not(:disabled) { background: none; color: var(--lime); } body.skin-clean .tb-round span { color: #d9d2bf; } body.skin-clean .tb-dmg { background: none; border: 0; padding: 0; gap: 4px; } /* PV perdus : texte seul */ body.skin-clean .tb-dmg b { font-size: 22px; color: #ff5a5f; } body.skin-clean .tb-dmg em { color: #b9b2a2; font-weight: 600; } /* manches : pastilles discrètes ; seule la manche en cours est pleine (lime), victoires / défaites en texte coloré */ /* frise des manches : des carrés (icône du type en haut, numéro en bas) ; la manche en cours en lime, gagnée verte, perdue rouge (la coche / croix remplace l'icône), passées atténuées ; « Phase N » en petite capitale devant */ body.skin-clean #tb-rounds { gap: 6px; align-items: center; } body.skin-clean #tb-rounds .tb-phase-name { margin-right: 6px; font-size: 10.5px; letter-spacing: 1px; text-transform: uppercase; color: #c9c2b0; } body.skin-clean #tb-rounds span { position: relative; width: 44px; height: 44px; padding: 0; gap: 0; border: 0; border-radius: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; background: rgba(var(--ink),.5); color: #e6dfcc; font-size: 10.5px; font-weight: 700; line-height: 1; box-shadow: inset 0 0 0 1.5px rgba(236,230,214,.14); } body.skin-clean #tb-rounds span > img { width: 20px; height: 20px; margin-bottom: 4px; } body.skin-clean #tb-rounds span .rt { display: none; } body.skin-clean #tb-rounds span.pve { color: #ffb36b; } body.skin-clean #tb-rounds span.duel:not(.now) { color: #ffd23f; box-shadow: inset 0 0 0 1.5px rgba(255,210,63,.55); } body.skin-clean #tb-rounds span.now { background: var(--lime); color: #1c2300; box-shadow: none; transform: scale(1.1); } body.skin-clean #tb-rounds span.now > img { filter: brightness(0); } body.skin-clean #tb-rounds span.win { background: rgba(70,190,60,.38); color: #c8ffb8; box-shadow: inset 0 0 0 1.5px rgba(120,230,100,.5); } body.skin-clean #tb-rounds span.lose { background: rgba(229,73,59,.38); color: #ffc2ba; box-shadow: inset 0 0 0 1.5px rgba(255,120,100,.5); } body.skin-clean #tb-rounds span.win > img, body.skin-clean #tb-rounds span.lose > img { display: none; } /* le résultat prend la place de l'icône */ body.skin-clean #tb-rounds span .res { position: static; width: 20px; height: 20px; margin: 0 0 4px; order: -1; filter: brightness(0) invert(1); opacity: .95; } body.skin-clean #tb-rounds span.past { opacity: .55; } body.skin-clean #tb-rounds span.past.win, body.skin-clean #tb-rounds span.past.lose { opacity: .8; } /* ---------------------------------------------------------------- colonnes : fondu d'encre depuis le bord de l'écran */ body.skin-clean .rail { background: linear-gradient(90deg, rgba(var(--ink),.85) 0, rgba(var(--ink),.72) 62%, rgba(var(--ink),0) 100%); border: 0 !important; } body.skin-clean #players { background: linear-gradient(270deg, rgba(var(--ink),.85) 0, rgba(var(--ink),.72) 62%, rgba(var(--ink),0) 100%); } /* synergies façon TFT (skin.js traitRows) : une ligne par synergie. Compact = tuile + nombre ; dès que la souris entre dans la zone (PC, classe skin-open posée par skin.js à l'entrée) les lignes s'étendent avec le nom et les paliers sur un panneau d'encre. [tuile 24 px du palier + icône] [compte] [nom] [seuils « 2 · 4 · 6 », atteints allumés]. Palier (data-tier) : 0 = tuile d'encre, icône grisée, nom gris ; 1 bronze ; 2 argent ; 3 / dernier = or. Tuiles pleines et plates, filet intérieur d'encre ; glyphes de classe en encre sur le métal ; portraits de famille cerclés d'encre (lisibles sur l'argent). */ body.skin-clean .trait { background: none; border: 0; border-radius: 6px; height: 28px; margin: 0; padding: 0 4px 0 2px; gap: 6px; flex: none; } body.skin-clean .trait.on { background: none; } body.skin-clean .trait:hover { background: rgba(255,255,255,.07); } body.skin-clean .trait .tn { flex: 1; min-width: 0; gap: 7px; font-size: 13px; font-weight: 600; color: #8f8a9c; } body.skin-clean .trait .tn > em, body.skin-clean .trait .steps { display: none; } body.skin-clean .trait.on .tn { color: #fff; } body.skin-clean .sk-tile { width: 24px; height: 24px; flex: none; overflow: hidden; display: flex; align-items: center; justify-content: center; border-radius: 6px; background: rgba(var(--ink),.6); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); } body.skin-clean .trait .sk-tile .rb { width: 100%; height: 100%; background: none; box-shadow: none; } body.skin-clean .trait .sk-tile .rb img { width: 72% !important; height: 72% !important; } body.skin-clean .trait .sk-tile canvas { width: 100%; height: 100%; transform: scale(1.18); } body.skin-clean .trait[data-tier="0"] .sk-tile .rb img, body.skin-clean .trait[data-tier="0"] .sk-tile canvas { filter: grayscale(1); opacity: .55; } body.skin-clean .trait[data-tier="0"] .sk-tile canvas { filter: grayscale(1) brightness(1.8); } /* monstres sombres : silhouette grise lisible */ body.skin-clean .trait[data-tier="1"] .sk-tile { background: #c0742e; box-shadow: inset 0 0 0 1.5px rgba(var(--ink),.35); } body.skin-clean .trait[data-tier="2"] .sk-tile { background: #cfd6de; box-shadow: inset 0 0 0 1.5px rgba(var(--ink),.3); } body.skin-clean .trait[data-tier="3"] .sk-tile { background: #ffd23f; box-shadow: inset 0 0 0 1.5px rgba(var(--ink),.3); } body.skin-clean .trait:not([data-tier="0"]) .sk-tile .rb img { filter: brightness(0); opacity: .82; } body.skin-clean .trait:not([data-tier="0"]) .sk-tile canvas { filter: drop-shadow(0 0 .6px rgb(var(--ink))) drop-shadow(0 0 .6px rgb(var(--ink))); } /* contour d'encre (sans décalage), pas une ombre */ body.skin-clean .sk-ct { flex: none; min-width: 14px; text-align: center; font-size: 13.5px; font-weight: 800; color: #8f8a9c; } body.skin-clean .trait.on .sk-ct { color: var(--lime); } body.skin-clean .sk-nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } body.skin-clean .sk-th { flex: none; display: flex; align-items: baseline; gap: 2px; padding: 1px 6px; border-radius: 8px; background: rgba(26,13,46,.55); font-size: 10.5px; font-weight: 700; color: #b9aee0; } /* pastille d'encre : les paliers restent lisibles sur un sol clair */ body.skin-clean .sk-th s { text-decoration: none; opacity: .6; } body.skin-clean .trait:not(.on) .sk-th { color: #a99dd6; } body.skin-clean .sk-th i { font-style: normal; } body.skin-clean .sk-th i.on { color: #fff; } /* « la suite est plus bas » : fondu court sur les 14 derniers px */ body.skin-clean:not(.mobile) #traits-list.more { -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 14px), transparent); mask-image: linear-gradient(180deg, #000 calc(100% - 14px), transparent); } /* ordinateur : hauteur FIXE (Scott : rien ne bouge à chaque nouvelle synergie) = 6 places de 28 px (+ 2 d'écart) = 178 px, que la liste en compte 0 ou 6 ; le bouton « +N » garde toujours sa place dessous (invisible tant qu'il n'y a pas de 2e page) */ body.skin-clean:not(.mobile) #traits { height: 244px; padding: 10px 8px 6px; } body.skin-clean:not(.mobile) #traits-title { margin-bottom: 5px; } body.skin-clean:not(.mobile) #traits-list { height: 178px; max-height: none; flex: none; display: flex; flex-direction: column; gap: 2px; overflow: hidden; scrollbar-width: none; } body.skin-clean:not(.mobile) #traits .empty-note { font-size: 11px; line-height: 1.3; } /* compact : nom et paliers cachés, la ligne se résume à la tuile et au nombre */ body.skin-clean:not(.mobile) #traits:not(.skin-open) .sk-nm, body.skin-clean:not(.mobile) #traits:not(.skin-open) .sk-th { display: none; } body.skin-clean:not(.mobile) #traits:not(.skin-open) .trait { width: max-content; padding-right: 8px; } /* étendu : panneau d'encre par-dessus les objets, lignes complètes */ body.skin-clean:not(.mobile) #traits.skin-open { z-index: 8; overflow: visible; } body.skin-clean:not(.mobile) #traits.skin-open::before { content: ''; position: absolute; z-index: -1; left: 0; top: 0; right: -6px; bottom: -10px; pointer-events: none; border-radius: 0 12px 12px 0; background: rgba(var(--ink),.94); animation: skTrBg .16s ease-out; } @keyframes skTrBg { from { opacity: 0; } } body.skin-clean:not(.mobile) #traits.skin-open .trait { animation: skTrRow .16s ease-out; } @keyframes skTrRow { from { opacity: .4; } } /* fondu seul : la ligne est déjà à sa place quand sa bulle la mesure */ body.noanim #traits.skin-open::before, body.noanim #traits.skin-open .trait { animation: none; } /* 6 synergies au plus à la fois (skin.js traitRows) : les autres pages en display none ; bouton lime sous la 6e ligne : compact = rond « +N » (sous les tuiles), étendu = ligne entière « Voir les N autres » ; dernière page : « ‹ » / retour */ body.skin-clean:not(.mobile) #traits-list > .trait.sk-off { display: none; } body.skin-clean .sk-trmore { display: none; } body.skin-clean:not(.mobile) .sk-trmore { position: relative; display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; margin: 4px 0 0 1px; padding: 0; border: 0; border-radius: 50%; background: var(--lime); color: #15121d; font: 800 11.5px/1 Lexend, sans-serif; letter-spacing: -.3px; cursor: pointer; } body.skin-clean:not(.mobile) .sk-trmore[hidden] { display: flex !important; visibility: hidden; pointer-events: none; } /* 6 synergies au plus : la place reste réservée */ body.skin-clean:not(.mobile) .sk-trmore:hover { background: #f4ff9a; } body.skin-clean:not(.mobile) .sk-trmore .x { display: none; } body.skin-clean:not(.mobile) .sk-trmore.back .c { font-size: 16px; } body.skin-clean:not(.mobile) #traits.skin-open .sk-trmore:not([hidden]) { width: 100%; height: 26px; margin-left: 0; border-radius: 7px; font-size: 12px; letter-spacing: .2px; } body.skin-clean:not(.mobile) #traits.skin-open .sk-trmore .c { display: none; } body.skin-clean:not(.mobile) #traits.skin-open .sk-trmore .x { display: inline; } /* objets : UNE colonne calme. « OBJETS n/6 » (skin.js écrit n/6) ; relique = une icône + une ligne + un trait ; équipement = une rangée d'icônes de 34 px ; inventaire = icônes de 30 px qui s'enchaînent ; les cases vides se résument à UN rond pointillé (les vides sont toujours en fin de grille) ; 12 px entre les groupes, ni cadre ni séparateur */ body.skin-clean:not(.mobile) #items { top: 304px; height: 406px; padding: 8px 8px 10px; } /* position FIXE : sous les 6 places + le bouton des synergies */ body.skin-clean:not(.mobile) #items > h3:first-child { display: none; } /* « OBJETS n/6 » : l'équipement est dans la plaque ; le bloc quête porte son titre */ body.skin-clean #items h3 { margin: 0 0 6px; gap: 6px; align-items: baseline; } body.skin-clean #items h3 .hint { font-size: 10.5px; color: #a39c8c; } body.skin-clean #items h3:first-child .hint { font-size: 11px; font-weight: 700; color: #d9d2bf; } body.skin-clean #items h3 .sell { align-self: center; } body.skin-clean:not(.mobile) #sell-item { display: none !important; } /* PC : un objet porté se vend en le glissant sur le marché, juste à côté (Scott) ; le bouton « Vendre » n'a plus de sens dans le rail */ body.skin-clean #items .h-res { margin-top: 12px; } /* quête / relique (place gagnée : les objets portés sont dans la plaque du perso) : icône de 40 px, titre de la quête en gras sur une ligne, barre « n/N », puis l'effet de la relique promise sur 3 lignes au plus (.sk-rl-text, skin.js relicText) ; gagnée : « Relique · Nom » et son effet. .rl-info s'efface (display: contents) : ses enfants se rangent dans la grille. */ body.skin-clean .relic-slot, body.skin-clean .relic-slot.done { height: auto; min-height: 0; margin: 0 0 14px; padding: 0; background: none; border: 0; display: grid; grid-template-columns: 40px minmax(0, 1fr); grid-template-areas: "ic q" "ic prog" "txt txt"; column-gap: 9px; row-gap: 4px; align-items: center; } body.skin-clean .relic-slot.done { grid-template-areas: "ic q" "ic txt"; } /* ordinateur : bloc QUÊTE de hauteur FIXE (118 px, même vide : « Relique : pas encore de quête ») mis en avant : panneau indigo → encre, liseré d'or à gauche, titre or « QUÊTE » (gagnée : « RELIQUE »). Grille : [tuile 40 | quête 2 lignes] [tuile | barre n/N] [relique : nom or + effet, 2 lignes]. Tuile de la relique (plus de rond pointillé) : pas gagnée = tuile indigo teintée d'or, icône désaturée à 50 %, anneau pointillé OR autour et pastille « ? » ; gagnée = tuile d'or pleine, filet d'encre intérieur, anneau d'or de 2 px + halo ambre opaque de 6 px (plat, sans flou, pas de gris), pastille lime cochée. */ body.skin-clean:not(.mobile) .relic-slot, body.skin-clean:not(.mobile) .relic-slot.done { position: relative; height: 118px; min-height: 0; margin: 0 0 12px -8px; padding: 26px 10px 6px 14px; overflow: hidden; background: linear-gradient(90deg, #2a1d6b 0, #170f3a 58%, rgba(23,15,58,.9) 100%); border: 0; border-left: 3px solid #ffd23f; border-radius: 0 10px 10px 0; display: grid; grid-template-columns: 40px minmax(0, 1fr); grid-template-rows: 30px 16px 30px; grid-template-areas: "ic q" "ic prog" "txt txt"; column-gap: 11px; row-gap: 5px; align-items: center; } body.skin-clean:not(.mobile) .relic-slot.done { grid-template-areas: "ic q" "ic q" "txt txt"; } body.skin-clean:not(.mobile) .relic-slot::before { content: 'Quête'; position: absolute; left: 14px; top: 9px; font: 800 11px/1 Lexend, sans-serif; letter-spacing: 1.6px; text-transform: uppercase; color: #ffd23f; } body.skin-clean:not(.mobile) .relic-slot.done::before { content: 'Relique'; } /* ordinateur : inventaire FIXE, les 12 places toujours dessinées (4 × 3 de 32 px) : les icônes ne glissent plus d'une case à l'autre */ body.skin-clean:not(.mobile) #items .h-res { margin-top: 0; } body.skin-clean:not(.mobile) #bag-grid { display: grid; grid-template-columns: repeat(4, 32px); grid-template-rows: repeat(3, 32px); grid-auto-rows: 32px; gap: 6px 10px; height: 108px; } body.skin-clean:not(.mobile) #bag-grid .res.empty ~ .res.empty, body.skin-clean:not(.mobile) #bag-grid:not(:has(.res:not(.empty))) > * { display: flex; } body.skin-clean:not(.mobile) #bag-grid:not(:has(.res:not(.empty)))::before { content: none; } /* équipement : une rangée de 6 ; pas de chiffres sous l'icône (ils sont dans la bulle) */ body.skin-clean #equip-grid { display: flex; flex-wrap: wrap; gap: 2px; } body.skin-clean .slot { flex: none; width: 34px; height: 34px; background: none; border: 1.5px solid transparent; border-radius: 50%; overflow: visible; } body.skin-clean #equip-grid .slot > img { width: 32px; height: 32px; margin: 0; } body.skin-clean .slot .st { display: none; } body.skin-clean .slot:not(.full) ~ .slot:not(.full) { display: none; } body.skin-clean .slot:not(.full)::after { content: ''; width: 30px; height: 30px; box-sizing: border-box; border-radius: 50%; border: 1.5px dashed rgba(236,230,214,.3); } body.skin-clean .slot.full:hover, body.skin-clean .slot.sel { box-shadow: none; border: 1.5px solid var(--lime); } body.skin-clean .slot.full.drop { box-shadow: none; border: 2px solid var(--lime); background: rgba(200,226,10,.15); } body.skin-clean .slot.drop:not(.full) { box-shadow: none; } body.skin-clean .slot.drop:not(.full)::after { border: 2px solid var(--lime); background: rgba(200,226,10,.18); } /* inventaire : icônes de 30 px à la suite, pastille de caractéristique petite en coin */ body.skin-clean #bag-grid { display: flex; flex-wrap: wrap; gap: 4px 3px; } body.skin-clean .res { flex: none; width: 32px; height: 32px; background: none; border: 1.5px solid transparent; border-radius: 50%; overflow: visible; } body.skin-clean .res img, body.skin-clean .res.cons img { width: 28px; height: 28px; } body.skin-clean .res.empty { background: none; } body.skin-clean .res.empty ~ .res.empty { display: none; } body.skin-clean .res.empty::after { content: ''; width: 26px; height: 26px; box-sizing: border-box; border-radius: 50%; border: 1.5px dashed rgba(236,230,214,.3); } body.skin-clean .res:hover, body.skin-clean .res.sel { box-shadow: none; border: 1.5px solid var(--lime); } body.skin-clean .res.drop { box-shadow: none; border: 2px solid var(--lime); background: rgba(200,226,10,.15); } body.skin-clean .res.cons { box-shadow: none; border: 2px solid var(--cc); } body.skin-clean .res.cons .cs-badge { right: -4px; bottom: -4px; min-width: 14px; height: 14px; font-size: 9px; border: 0; } body.skin-clean #bag-grid:not(:has(.res:not(.empty))) > * { display: none; } /* inventaire vide : une seule phrase */ body.skin-clean #bag-grid:not(:has(.res:not(.empty)))::before { content: 'Vide : le butin des combats arrive ici'; font-size: 11px; color: #a39c8c; } /* panoplies : texte flottant (famille + compte), lime si active, sans pastille */ body.skin-clean #sets-list { margin-top: 12px; gap: 2px 10px; } body.skin-clean #sets-list .empty-note { font-size: 11px; color: #a39c8c; } body.skin-clean .set-chip, body.skin-clean .set-chip.on, body.skin-clean .set-chip.more { background: none; border: 0; border-radius: 0; padding: 0; color: #d9d2bf; font-weight: 600; } body.skin-clean .set-chip.on { color: var(--lime); } body.skin-clean .set-chip.more { color: #c9c2b0; } body.skin-clean .sets-label { color: #c9c2b0; text-transform: uppercase; letter-spacing: 1px; font-weight: 700; font-size: 10px; } /* ordinateur : lignes de panoplie du panneau du bouton « PANOPLIES » (skin.js setsRail) : [Coiffe, liseré de la famille] nom n/2 · n/4 · max, lime si active ; dessous en petit le bonus actif (lime) et le suivant. #sets-list part dans un support caché */ body.skin-clean:not(.mobile) #sk-sets-hold { display: none; } body.skin-clean:not(.mobile) .sk-set { display: flex; align-items: center; gap: 8px; padding: 1px 4px 1px 0; border-radius: 8px; cursor: default; } body.skin-clean:not(.mobile) .sk-set:hover { background: rgba(255,255,255,.07); } body.skin-clean:not(.mobile) .sk-set-ic { flex: none; width: 28px; height: 28px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(var(--ink),.8); border: 1.5px solid var(--fc, #c9bcef); } /* la Coiffe de la panoplie, liseré couleur de la famille */ body.skin-clean:not(.mobile) .sk-set-ic img { width: 21px; height: 21px; object-fit: contain; } body.skin-clean:not(.mobile) .sk-set.on .sk-set-ic { box-shadow: 0 0 0 2px rgb(var(--ink)), 0 0 0 3.5px var(--lime); } body.skin-clean:not(.mobile) .sk-set-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; } body.skin-clean:not(.mobile) .sk-set-t > span { display: flex; align-items: baseline; gap: 6px; white-space: nowrap; } body.skin-clean:not(.mobile) .sk-set-t b { overflow: hidden; text-overflow: ellipsis; font: 700 12.5px/1.15 Lexend, sans-serif; color: #ece6d6; } body.skin-clean:not(.mobile) .sk-set-t em { flex: none; font: 700 11px/1 Lexend, sans-serif; font-style: normal; color: #c9bcef; } body.skin-clean:not(.mobile) .sk-set.on .sk-set-t b, body.skin-clean:not(.mobile) .sk-set.on .sk-set-t em { color: var(--lime); } body.skin-clean:not(.mobile) .sk-set-t small { font: 500 10.5px/1.25 Lexend, sans-serif; color: #b3aacb; } body.skin-clean:not(.mobile) .sk-set-t small i { font-style: normal; font-weight: 700; color: #e6f58a; } body.skin-clean:not(.mobile) .sk-set-t small s { text-decoration: none; } body.skin-clean:not(.mobile) .sk-set-t small i, body.skin-clean:not(.mobile) .sk-set-t small s { display: block; } /* bonus actif, puis « à 4 : … » sur sa ligne */ body.skin-clean #drag-ghost { background: rgba(var(--ink),.6); border: 2px solid var(--lime); border-radius: 50%; } /* joueurs : portrait flottant, nom, PV, trait fin ; toi = lime, prochain adversaire = rouge, danger = anneau rouge */ body.skin-clean .score { background: none; border: 0; border-radius: 12px; box-shadow: none; } body.skin-clean .score:not(.me):hover { background: rgba(255,255,255,.07); } /* portrait rond ; l'état se lit à l'anneau du portrait (toi lime, danger rouge qui pulse, prochain adversaire rouge), plus de liseré à gauche */ body.skin-clean .score .shead { background: rgba(var(--ink),.45); border: 0; border-radius: 50%; overflow: visible; } /* la pastille « défié » dépasse */ body.skin-clean .score .shead img { border-radius: 50%; } body.skin-clean .score .sname { color: #fff; } body.skin-clean .score .scls { color: #c9c2b0; } body.skin-clean .score .sbar { height: 3px; background: rgba(255,255,255,.1); border: 0; border-radius: 2px; } body.skin-clean .score .sbar i { background: rgba(236,230,214,.5); } /* PV neutres : texte à .5 ; lime = toi, rouge = danger / prochain */ body.skin-clean .score .shp { font-size: 18px; } body.skin-clean .score.me, body.skin-clean .score.next, body.skin-clean .score.viewing { box-shadow: none; } body.skin-clean .score.me { background: none; } body.skin-clean .score.me .shead { box-shadow: 0 0 0 2px var(--lime); } body.skin-clean .score.me .sname, body.skin-clean .score.me .shp { color: var(--lime); } body.skin-clean .score.me .sbar i { background: var(--lime); } body.skin-clean .score.next .shead { box-shadow: 0 0 0 2px #ff4d4d; } body.skin-clean .score.next .sname { color: #ff8a8a; } body.skin-clean .score.next .sbar i, body.skin-clean .score.danger .sbar i { background: #ff5a5f; } body.skin-clean .score.danger .shp { color: #ff6a6a; } body.skin-clean .score.danger::after { display: none; } body.skin-clean .score.danger .shead { box-shadow: 0 0 0 2px #ff3d2e; animation: skinDanger 1.1s ease-in-out infinite; } @keyframes skinDanger { 50% { box-shadow: 0 0 0 2px #ff9a4a; } } body.skin-clean .score.viewing { background: none; } /* sélection = anneau lime + nom lime, sans fond */ body.skin-clean .score.viewing .sname { color: var(--lime); } body.skin-clean .score.viewing .shead { box-shadow: 0 0 0 2px var(--lime); } body.skin-clean .score .sst { border: 0; } body.skin-clean .tag { border-radius: 8px; padding: 0 6px; } body.skin-clean .duel-btn { border: 0; background: rgba(var(--ink),.8); } /* joueurs façon TFT (skin.js playersRail) : compact = une colonne de portraits ronds au bord droit, les PV en ANNEAU autour (conic-gradient sur --hp 0..1 posé par skin.js ; data-hpb : lime >= 50 %, orange >= 25 %, rouge dessous ; vide = mort) ; rang en pastille. Ordinateur : toujours compact (la bulle de chaque joueur donne niveau, pods, PV, plateau) ; préparation du Défi (classe sk-duel) : une épée ronde de 28 px à gauche de chaque portrait, colonne élargie à 100 px, cible lime. L'état reste à l'extérieur de l'anneau, séparé par un filet d'encre : toi lime, prochain rouge, danger rouge qui pulse. */ body.skin-clean #players .score .sbar { display: none; } /* l'anneau remplace la barre */ body.skin-clean #players .score .shead { --rc: var(--lime); box-sizing: border-box; padding: 3px; background: conic-gradient(var(--rc) calc(var(--hp, 1) * 360deg), #3d2c5c 0); } body.skin-clean #players .score[data-hpb="mid"] .shead { --rc: #ff9f1c; } body.skin-clean #players .score[data-hpb="low"] .shead { --rc: #ff3d2e; } body.skin-clean #players .score .shead img { box-sizing: border-box; border: 1.5px solid rgb(var(--ink)); border-radius: 50%; background: rgb(var(--ink)); } body.skin-clean #players .score.dead { opacity: .55; } body.skin-clean #players .score.me .shead, body.skin-clean #players .score.viewing .shead { box-shadow: 0 0 0 1.5px rgb(var(--ink)), 0 0 0 3.5px var(--lime); } body.skin-clean #players .score.next .shead { box-shadow: 0 0 0 1.5px rgb(var(--ink)), 0 0 0 3.5px #ff4d4d; } body.skin-clean #players .score.danger .shead { box-shadow: 0 0 0 1.5px rgb(var(--ink)), 0 0 0 3.5px #ff3d2e; animation: skPlDanger 1.1s ease-in-out infinite; } @keyframes skPlDanger { 50% { box-shadow: 0 0 0 1.5px rgb(var(--ink)), 0 0 0 3.5px #ff9a4a; } } body.skin-clean.noanim #players .score.danger .shead { animation: none; } body.skin-clean #players .sk-rk { position: absolute; z-index: 2; right: -5px; top: -4px; min-width: 18px; height: 18px; padding: 0 4px; box-sizing: border-box; border-radius: 9px; background: rgb(var(--ink)); box-shadow: inset 0 0 0 1.5px rgba(236,230,214,.28); color: #fff; font: 800 10.5px/18px Lexend, "Segoe UI", sans-serif; text-align: center; pointer-events: none; } body.skin-clean #players .score.me .sk-rk { background: var(--lime); box-shadow: none; color: rgb(var(--ink)); } body.skin-clean #players .sk-rk:empty { display: none; } body.skin-clean.mobile #players .sk-pl { display: none; } /* téléphone : niveau et pods sont dans .smob (volet ouvert) */ /* ordinateur : colonne de 70 px collée au bord droit ; hauteur = son contenu (la zone de survol = les portraits) */ body.skin-clean:not(.mobile) #players { left: 1530px; width: 70px; height: auto; max-height: 654px; padding: 10px 6px 4px; overflow: visible; } body.skin-clean:not(.mobile) #players h3 { direction: rtl; text-align: right; white-space: nowrap; margin-bottom: 6px; } body.skin-clean:not(.mobile) #players .score { flex-direction: row-reverse; height: 58px; margin: 0 0 4px; padding: 2px 4px 2px 6px; gap: 8px; } body.skin-clean:not(.mobile) #players .score .shead { width: 50px; height: 50px; } body.skin-clean:not(.mobile) #players .score .sst { left: auto; top: auto; right: 1px; bottom: 1px; width: 19px; height: 19px; } body.skin-clean:not(.mobile) #players .score .sst img { width: 11px; height: 11px; } body.skin-clean:not(.mobile) #players .score { padding-left: 2px; cursor: pointer; } body.skin-clean:not(.mobile) #players .score .si { display: none; } /* PV cachés mais en place sur le portrait (le « −N » des dégâts y saute toujours) */ body.skin-clean:not(.mobile) #players .score .shp { position: absolute; right: 4px; top: 2px; width: 50px; height: 50px; visibility: hidden; } /* Défi : épée ronde à gauche du portrait (cible franche), colonne de 100 px tant qu'il y en a */ body.skin-clean:not(.mobile) #players.sk-duel { left: 1500px; width: 100px; } body.skin-clean:not(.mobile) #players .duel-btn { left: 4px; right: auto; top: 15px; width: 28px; height: 28px; z-index: 2; border: 0; } body.skin-clean:not(.mobile) #players .duel-btn img { width: 16px; height: 16px; } /* bulle d'un joueur pendant le Défi : la prime estimée */ body.skin-clean .sk-tt-duel { display: flex; align-items: center; gap: 5px; font-size: 12px; color: #ece6d6; } body.skin-clean .sk-tt-duel img { width: 16px; height: 16px; } body.skin-clean .sk-tt-duel b { color: var(--gold2); font-size: 14px; } body.skin-clean .sk-tt-duel em { font-style: normal; font-weight: 700; color: var(--lime); } body.skin-clean #players .duel-btn { background: #4b3477; } body.skin-clean #players .duel-btn:hover { background: #6c4bab; } body.skin-clean #players .duel-btn.on, body.skin-clean #players .duel-btn.on:hover { background: var(--lime); } /* la cible choisie (style.css : lime, que la règle d'encre masquait) */ /* ---------------------------------------------------------------- dock : fondu puis la demi-plaque (bord haut = milieu des cartes) */ body.skin-clean #dock { background: linear-gradient(180deg, rgba(var(--ink),0) 0, rgba(var(--ink),.6) 30px, rgba(var(--ink),.8) 70px); border: 0; box-shadow: none; } body.skin-clean #dock::before { content: ''; position: absolute; left: 0; right: 0; top: var(--pt); bottom: 0; background: var(--plate); border-top: 1px solid var(--plate-line); pointer-events: none; } body.skin-clean .dock-block { background: none; border: 0; border-radius: 0; box-shadow: none; } /* marché fermé (combat) : plaque pleine sous perso + kamas et sous le chrono seulement, effacée entre les deux (symétrique, pas de dalle vide) */ body.skin-clean:not(.mobile) #dock:has(#mk-cards:empty)::before { -webkit-mask-image: linear-gradient(90deg, #000 560px, transparent 690px, transparent 1296px, #000 1426px); mask-image: linear-gradient(90deg, #000 560px, transparent 690px, transparent 1296px, #000 1426px); } body.skin-clean:not(.mobile) .dock-block { top: 0; height: 190px; } body.skin-clean .hp-col b { color: #ff8a98; text-shadow: none; } body.skin-clean .hp-vbar { width: 6px; background: rgba(255,255,255,.16); border: 0; border-radius: 3px; box-shadow: none; } body.skin-clean .hp-vbar i { background: linear-gradient(0deg, #ff4d5a, #ffd21f 55%, var(--lime) 90%) bottom / 100% 122px no-repeat, #ff4d5a; } /* jauge : le haut de la barre vire au rouge quand les PV baissent */ body.skin-clean .hp-vbar i::after { display: none; } body.skin-clean .hp-col img { filter: none; } body.skin-clean .portrait-wrap { background: none; border: 0; box-shadow: none; border-radius: 14px; } body.skin-clean .char-name { font-size: 15px; color: #fff; } body.skin-clean .char-lvl b::before { color: #d9d2bf; } body.skin-clean .char-cls { color: #d9d2bf; } body.skin-clean #d-char.has-points #stats-list { box-shadow: none; } body.skin-clean .stat-row { background: none; border: 0; border-radius: 0; padding: 0; } body.skin-clean .stat-row .sg { position: static; background: none; padding: 0; font-size: 11px; line-height: 1; color: var(--lime); align-self: center; } /* « + » : glyphe lime nu de 18 px quand un point peut se placer (prépa comme combat), rien sinon */ body.skin-clean .btn-plus, body.skin-clean .btn-plus:disabled { width: 18px; height: 20px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; color: var(--lime); font: 800 20px/20px Lexend, sans-serif; } body.skin-clean .btn-plus:hover:not(:disabled) { color: #f4ff9a; } body.skin-clean .btn-plus:disabled { visibility: hidden; } /* un point à placer (Scott : trop discret) : les « + » deviennent des ronds lime pleins qui pulsent, et une pastille « 1 point à placer » lime, au-dessus des caractéristiques, pointe vers eux */ body.skin-clean #d-char.has-points .btn-plus:not(:disabled) { width: 22px; height: 22px; border-radius: 50%; background: var(--lime); color: #1c2300; font-size: 18px; line-height: 22px; box-shadow: 0 0 0 0 rgba(200,226,10,.7); animation: skinPlus 1.1s ease-out infinite; animation-delay: calc(var(--i, 0) * 90ms); } body.skin-clean #d-char.has-points .btn-plus:not(:disabled):hover { background: #f4ff9a; color: #1c2300; } @keyframes skinPlus { 0% { box-shadow: 0 0 0 0 rgba(200,226,10,.75); } 70% { box-shadow: 0 0 0 8px rgba(200,226,10,0); } 100% { box-shadow: 0 0 0 0 rgba(200,226,10,0); } } body.skin-clean #stat-points { background: none; padding: 0; border-radius: 0; color: var(--lime); font-weight: 700; animation: none; } body.skin-clean #d-char.has-points #stat-points { padding: 2px 10px 2px 8px; border-radius: 11px; background: var(--lime); color: #1c2300; font-size: 11.5px; letter-spacing: .3px; white-space: nowrap; animation: skinPts 1.1s ease-out infinite; } body.skin-clean #d-char.has-points #stat-points::before { content: '▼ '; font-size: 8px; vertical-align: 1px; } @keyframes skinPts { 0% { box-shadow: 0 0 0 0 rgba(200,226,10,.6); } 70% { box-shadow: 0 0 0 7px rgba(200,226,10,0); } 100% { box-shadow: 0 0 0 0 rgba(200,226,10,0); } } body.skin-clean.noanim #d-char.has-points .btn-plus, body.skin-clean.noanim #d-char.has-points #stat-points { animation: none; } /* kamas, revenus, pods : grands nombres flottants */ body.skin-clean .eco-kamas b { font-size: 36px; color: var(--gold2); } /* série : flamme (ou crâne) et nombre flottants, en couleur, sans pastille */ body.skin-clean .eco-streak, body.skin-clean.mobile #d-eco .eco-streak { background: none; border: 0; box-shadow: none; padding: 0; gap: 3px; } body.skin-clean .eco-streak.win img { filter: brightness(0) saturate(100%) invert(62%) sepia(86%) saturate(1800%) hue-rotate(345deg) brightness(102%); } body.skin-clean .eco-streak.lose img { filter: brightness(0) saturate(100%) invert(55%) sepia(60%) saturate(2400%) hue-rotate(215deg); } body.skin-clean .eco-streak b { font-size: 22px; } body.skin-clean .eco-streak.win b { color: #ff8a2a; } body.skin-clean .eco-streak.lose b { color: #8f9aff; } body.skin-clean .eco-pods span { color: #d9d2bf; } body.skin-clean .bar.pods.full i { background: #f08a24; } /* ---------------------------------------------------------------- perso, variante B (ordinateur ; maquette mockups/perso_v2.html?m=B) UNE plaque d'encre de 8 à 554 px (la place de l'ancien perso + kamas : le marché ne bouge pas) : PV | portrait carré, XP fine dessous (« 16/17 » au bout, « +19/manche » sous elle), achat d'XP | 5 caractéristiques en lignes (filet de couleur, icône, nom, bonus des objets, valeur ; « +1 » lime au bout SEULEMENT s'il reste un point : le .btn-plus lui-même) | les 6 objets portés en 3×2 + panoplies (#equip-grid et #sets-list déplacés dans #sk-gear par skin.js). Kamas, pods, revenu = onglets accrochés au bord haut (#d-eco). Hauteurs fixes : la plaque ne bouge pas avec ou sans « +1 ». Médaillon de niveau (Scott 2026-10-20, maquette B) : plaque 196 px (16 de plus, vers le haut : top -10, #d-eco -48), colonne de gauche 112 px, haut des blocs à 24 px. */ body.skin-clean:not(.mobile) #d-char { left: 8px; top: -10px; width: 546px; height: 196px; display: block; padding: 0; background: #15121d; border: 2px solid #000; border-top: 4px solid var(--lime); border-radius: 12px; } body.skin-clean:not(.mobile) .hp-col { display: none; } /* PV : sur le commandant du plateau et dans la liste des joueurs */ body.skin-clean:not(.mobile) .char-info { position: absolute; left: 10px; top: 24px; width: 112px; display: flex; flex-direction: column; align-items: center; gap: 0; } /* plus de portrait, de nom ni de classe (liste des joueurs) : le niveau est un médaillon */ body.skin-clean:not(.mobile) .char-top { display: block; height: auto; } body.skin-clean:not(.mobile) .portrait-wrap { display: none; } body.skin-clean:not(.mobile) .char-id { display: block; padding: 0; text-align: left; } body.skin-clean:not(.mobile) .char-name, body.skin-clean:not(.mobile) .char-cls { display: none; } body.skin-clean:not(.mobile) .char-name span, body.skin-clean:not(.mobile) .char-name.scroll span { display: inline; animation: none; transform: none; } /* médaillon : cercle de 88 px, anneau d'XP de 8 px (lime sur #2a2236 depuis 12 h, sens horaire, --xp posé par renderChar), bouts ronds par deux disques (::before = départ, ::after = bout, tourné de --xp × 3,6°), disque d'encre au centre : « NIV. » au-dessus du chiffre (Rowdies 34 px) ; point or de 12 px posé sur l'anneau à 12 h quand le prochain niveau donne un pod (d-char.xp-pod) */ body.skin-clean:not(.mobile) .char-lvl { position: relative; box-sizing: border-box; width: 88px; height: 88px; margin: 0; padding: 8px; display: block; border-radius: 50%; clip-path: none; background: conic-gradient(var(--lime) calc(var(--xp, 0) * 1%), rgba(255,255,255,.88) 0 calc(var(--xpp, 0) * 1%), #2a2236 0); cursor: help; } body.skin-clean:not(.mobile) #d-char { --xpp: var(--xpn, 0); } /* aperçu blanc : l'XP de fin de manche ; au survol du bouton : celle d'un achat */ body.skin-clean:not(.mobile) #d-char.xp-hover { --xpp: var(--xpb, 0); } body.skin-clean:not(.mobile) .char-lvl::before, body.skin-clean:not(.mobile) .char-lvl::after { content: ''; position: absolute; z-index: 1; inset: 0; pointer-events: none; background: radial-gradient(circle at 50% 4px, var(--lime) 3.6px, transparent 4.2px); opacity: min(1, calc(var(--xp, 0) * 10)); } body.skin-clean:not(.mobile) .char-lvl::after { transform: rotate(calc(var(--xp, 0) * 3.6deg)); } body.skin-clean:not(.mobile) .char-lvl b { width: 72px; height: 72px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border-radius: 50%; background: #15121d; font: 400 34px/34px Rowdies, Lexend, sans-serif; color: var(--lime); } body.skin-clean:not(.mobile) .char-lvl b::before { content: 'Niv.'; font: 700 10px/10px Lexend, sans-serif; letter-spacing: .6px; text-transform: uppercase; color: #b8b0d0; } /* (point or retiré, Scott 2026-10-20 : le pod du prochain niveau se lit dans la bulle du médaillon) */ body.skin-clean:not(.mobile) .char-xptext, body.skin-clean:not(.mobile) #stat-points { display: none; } /* XP : .sk-xprow ; points : les « +1 » */ /* « XP 5 / 11 · 1 achat » centré sous le médaillon (la barre fine est cachée : l'anneau la remplace) */ body.skin-clean:not(.mobile) .sk-xprow { display: flex; align-items: baseline; justify-content: center; gap: 5px; width: 100%; height: 12px; margin-top: 5px; white-space: nowrap; } body.skin-clean:not(.mobile) .sk-xprow .bar.xp { display: none; } body.skin-clean:not(.mobile) .sk-xpn { display: block; font: 700 12px/12px Lexend, sans-serif; color: var(--lime); } body.skin-clean:not(.mobile) .sk-xpn::before { content: 'XP '; color: #b8b0d0; } body.skin-clean:not(.mobile) .sk-xpb { font: 600 10px/12px Lexend, sans-serif; color: #b8b0d0; } /* « Monter · niv. 9 » : bouton lime pleine colonne, 2 lignes (texte posé par renderChar : .xb-main / .xb-sub) ; .poor = il manque des kamas ; .lvl1 = un seul achat fait passer le niveau : pulsation douce */ body.skin-clean:not(.mobile) #xp-btn { position: static; width: 112px; height: 46px; margin-top: 7px; padding: 0 4px; gap: 3px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; border: 0; border-radius: 8px; box-shadow: none; text-shadow: none; background: var(--lime); color: #15121d; overflow: hidden; clip-path: none; } body.skin-clean:not(.mobile) #xp-btn span { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } body.skin-clean:not(.mobile) #xp-btn .xb-main { font: 800 17px/19px Lexend, sans-serif; display: inline-flex; align-items: center; gap: 3px; } /* « +4 [XP] » */ body.skin-clean:not(.mobile) #xp-btn .xb-main img, body.skin-clean:not(.mobile) #xp-btn .xb-sub img { width: auto; height: 16px; max-width: 26px; object-fit: contain; vertical-align: middle; } body.skin-clean:not(.mobile) #xp-btn .xb-sub { display: inline-flex; align-items: center; gap: 3px; font: 800 14px/16px Lexend, sans-serif; } /* .xb-sub : voir la règle « +4 [XP] » ci-dessus */ body.skin-clean:not(.mobile) #xp-btn:hover:not(:disabled) { background: #f4ff9a; } body.skin-clean:not(.mobile) #xp-btn:disabled { background: #3a3150; color: #b8b0d0; } body.skin-clean:not(.mobile) #xp-btn.lvl1:not(:disabled) { animation: xpPulse 1.4s ease-in-out infinite; } @keyframes xpPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(200,226,10,.7); } 50% { box-shadow: 0 0 0 5px rgba(200,226,10,0); background: #e9ff5c; } } body.skin-clean.noanim:not(.mobile) #xp-btn { animation: none; } /* caractéristiques : lignes de 25 px, même haut (24 px) que le médaillon */ body.skin-clean:not(.mobile) #stats-list { position: absolute; left: 132px; top: 24px; width: 180px; display: flex; flex-direction: column; gap: 4px; } body.skin-clean:not(.mobile) .stat-row { height: 25px; display: flex; align-items: center; gap: 5px; padding: 0 0 0 5px; overflow: hidden; background: #1d1729; border: 0; border-left: 4px solid var(--sc, var(--lime)); border-radius: 0; } body.skin-clean:not(.mobile) .stat-row:nth-child(1) { --sc: #79d62a; } body.skin-clean:not(.mobile) .stat-row:nth-child(2) { --sc: #c457ff; } body.skin-clean:not(.mobile) .stat-row:nth-child(3) { --sc: #ff7a1a; } body.skin-clean:not(.mobile) .stat-row:nth-child(4) { --sc: #26a9ff; } body.skin-clean:not(.mobile) .stat-row:nth-child(5) { --sc: #b98bff; } body.skin-clean:not(.mobile) .stat-row > img { width: 18px; height: 18px; object-fit: contain; margin: 0; flex: none; } body.skin-clean:not(.mobile) .stat-row .sn { flex: 1; min-width: 0; width: auto; overflow: hidden; text-overflow: ellipsis; font: 600 12px/1 Lexend, sans-serif; color: #e8e4f4; } body.skin-clean:not(.mobile) .stat-row .sg { position: static; flex: none; margin: 0; padding: 0; background: none; font: 700 10.5px/1 Lexend, sans-serif; color: #b8b0d0; } body.skin-clean:not(.mobile) .stat-row .sv { flex: none; width: auto; min-width: 20px; margin-right: 7px; text-align: right; font: 700 17px/1 Lexend, sans-serif; color: #fff; } /* « +1 » : le bouton « + » de la ligne devient une pastille lime de 40 × 25 en bout de ligne, seulement s'il reste un point */ body.skin-clean:not(.mobile) .stat-row .btn-plus { display: none; } body.skin-clean:not(.mobile) #d-char.has-points .stat-row .btn-plus:not(:disabled) { display: flex; align-items: center; justify-content: center; align-self: stretch; flex: none; width: 40px; height: auto; margin: 0 0 0 -2px; padding: 0 0 0 4px; border: 0; border-radius: 0; box-shadow: none; background: var(--lime); color: #15121d; font: 700 14px/1 Lexend, sans-serif; clip-path: polygon(7px 0, 100% 0, 100% 100%, 0 100%); animation: skPill 1.1s ease-in-out infinite; animation-delay: calc(var(--i, 0) * 90ms); } body.skin-clean:not(.mobile) #d-char.has-points .stat-row .btn-plus:not(:disabled)::after { content: '1'; } body.skin-clean:not(.mobile) #d-char.has-points .stat-row .btn-plus:not(:disabled):hover { background: #fff; animation: none; } @keyframes skPill { 50% { background: #e9ff5c; } } body.skin-clean.noanim:not(.mobile) #d-char.has-points .stat-row .btn-plus { animation: none; } /* un point à placer (Scott : pas assez mis en avant) : contour lime qui respire autour de toute la colonne, valeurs lime, lignes teintées, et un onglet lime « N POINT(S) À PLACER » sur le bord haut de la plaque (#stat-points déplacé dans #d-char par skin.js) qui sautille ; noanim : contour et onglet fixes */ body.skin-clean:not(.mobile) #d-char.has-points #stats-list { box-shadow: 0 0 0 2px var(--lime); animation: skPtsCol 1s ease-in-out infinite alternate; } @keyframes skPtsCol { to { box-shadow: 0 0 0 4px var(--lime); } } body.skin-clean:not(.mobile) #d-char.has-points .stat-row { background: #262e10; } body.skin-clean:not(.mobile) #d-char.has-points .stat-row .sv { color: var(--lime); animation: skPtsVal 1s ease-in-out infinite alternate; } @keyframes skPtsVal { to { color: #f4ff9a; } } body.skin-clean:not(.mobile) #d-char.has-points > #stat-points { position: absolute; z-index: 4; left: 132px; top: 0; width: 180px; height: 19px; display: flex; align-items: center; justify-content: center; gap: 6px; margin: 0; padding: 0 8px; box-sizing: border-box; border: 0; border-radius: 0 0 8px 8px; background: var(--lime); box-shadow: none; color: #15121d; font: 800 11.5px/1 Lexend, sans-serif; letter-spacing: .8px; text-transform: uppercase; white-space: nowrap; transform-origin: 50% 0; animation: skPtsTab 1.6s ease-in-out infinite; } body.skin-clean:not(.mobile) #d-char.has-points > #stat-points::before, body.skin-clean:not(.mobile) #d-char.has-points > #stat-points::after { content: '▼'; font-size: 8px; vertical-align: 0; } @keyframes skPtsTab { 0%, 55%, 100% { transform: none; } 18% { transform: translateY(3px); } 34% { transform: translateY(0); } 44% { transform: translateY(1px); } } body.skin-clean.noanim:not(.mobile) #d-char.has-points #stats-list, body.skin-clean.noanim:not(.mobile) #d-char.has-points .stat-row .sv, body.skin-clean.noanim:not(.mobile) #d-char.has-points > #stat-points { animation: none; } /* objets portés : 3 × 2 tuiles, puis le bouton « PANOPLIES » (skin.js setsRail) */ body.skin-clean:not(.mobile) #sk-gear { position: absolute; left: 322px; top: 6px; width: 206px; display: flex; flex-direction: column; gap: 4px; } body.skin-clean:not(.mobile) .sk-gear-h { height: 16px; font: 700 10.5px/16px Lexend, sans-serif; letter-spacing: 1.4px; text-transform: uppercase; color: #ece6d6; } /* « ÉQUIPEMENT » : la grille reste à 26 px */ body.skin-clean .sk-tt-free { padding: 9px 12px; border: 0; font: 600 12.5px/1.35 Lexend, sans-serif; color: #ece6d6; } body.skin-clean:not(.mobile) #sk-gear #equip-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 52px); gap: 4px; } body.skin-clean:not(.mobile) #sk-gear .slot, body.skin-clean:not(.mobile) #sk-gear .slot:not(.full) ~ .slot:not(.full) { width: auto; height: 52px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; background: #241d38; border: 0; border-bottom: 4px solid #4b3477; border-radius: 0; box-shadow: none; overflow: hidden; } body.skin-clean:not(.mobile) #sk-gear .slot > img { width: 28px; height: 28px; margin: 0; object-fit: contain; } body.skin-clean:not(.mobile) #sk-gear .slot .st { position: static; display: flex; flex-wrap: wrap; justify-content: center; gap: 0 3px; max-width: 100%; font: 700 10px/1 Lexend, sans-serif; color: #fff; text-shadow: none; } body.skin-clean:not(.mobile) #sk-gear .slot .st img { width: 10px; height: 10px; } body.skin-clean:not(.mobile) #sk-gear .slot.full:hover, body.skin-clean:not(.mobile) #sk-gear .slot.sel { border: 0; border-bottom: 4px solid var(--lime); background: #2e2548; } body.skin-clean:not(.mobile) #sk-gear .slot.drop { border: 0; border-bottom: 4px solid var(--lime); background: #3b4410; } body.skin-clean:not(.mobile) #sk-gear .slot:not(.full), body.skin-clean:not(.mobile) #sk-gear .slot:not(.full) ~ .slot:not(.full) { background: #17131f; border: 2px dashed #3a3150; } body.skin-clean:not(.mobile) #sk-gear .slot:not(.full)::after { content: 'libre'; width: auto; height: auto; border: 0; border-radius: 0; background: none; font: 600 10.5px/1 Lexend, sans-serif; color: #7a7194; } body.skin-clean:not(.mobile) #sk-gear .slot.drop:not(.full), body.skin-clean:not(.mobile) #sk-gear .slot:not(.full) ~ .slot.drop:not(.full) { background: #3b4410; border: 2px solid var(--lime); } /* kamas, pods, revenu : onglets posés SUR le bord haut de la plaque (ils en sortent vers le haut, bas collé au filet lime). Kamas d'abord : onglet or, nombre de 27 px, série à côté ; pods et « Prochaine manche » plus petits. Sursaut à chaque changement (skin.js kamasTab : .sk-bump en hausse, .sk-down en baisse). */ body.skin-clean:not(.mobile) #d-eco { left: 22px; top: -48px; width: auto; height: 38px; z-index: 3; display: flex; flex-direction: row; align-items: flex-end; gap: 4px; padding: 0; overflow: visible; } body.skin-clean:not(.mobile) #d-eco > .eco-kamas, body.skin-clean:not(.mobile) #d-eco > .eco-pods, body.skin-clean:not(.mobile) #d-eco > .eco-line { position: static; flex: none; height: 25px; margin: 0; display: inline-flex; align-items: center; gap: 4px; padding: 0 9px 0 7px; white-space: nowrap; line-height: 1; background: #170f3a; border: 2px solid #000; border-bottom: 0; border-top: 3px solid var(--tc); border-radius: 8px 8px 0 0; text-decoration: none; } body.skin-clean:not(.mobile) #d-eco > .eco-kamas { --tc: var(--gold2); order: 0; height: 38px; gap: 6px; padding: 0 12px 0 8px; border: 2px solid var(--gold2); border-bottom: 0; transform-origin: 50% 100%; } body.skin-clean:not(.mobile) #d-eco > .eco-pods { --tc: #8f9aff; order: 2; } /* Scott 2026-10-20 : Prochaine manche à côté des kamas, Pods ensuite */ body.skin-clean:not(.mobile) #d-eco > .eco-line { --tc: var(--lime); order: 1; font: 600 11px/1 Lexend, sans-serif; color: #e0dbff; } body.skin-clean:not(.mobile) #d-eco > .bar.pods { display: none; } body.skin-clean:not(.mobile) .eco-kamas img { width: 25px; height: 25px; } body.skin-clean:not(.mobile) .eco-kamas b { font: 800 27px/1 Lexend, sans-serif; color: var(--gold2); } body.skin-clean:not(.mobile) #d-eco .eco-streak { margin-left: 2px; height: auto; gap: 2px; } body.skin-clean:not(.mobile) #d-eco .eco-streak img { width: 16px; height: 16px; } body.skin-clean:not(.mobile) #d-eco .eco-streak b { font: 800 16px/1 Lexend, sans-serif; } body.skin-clean:not(.mobile) .eco-pods img { width: 14px; height: 14px; } body.skin-clean:not(.mobile) .eco-pods span { font: 600 11px/1 Lexend, sans-serif; color: #c9c3dc; } body.skin-clean:not(.mobile) .eco-pods b { margin: 0; font: 700 14px/1 Lexend, sans-serif; color: #c3caff; } body.skin-clean:not(.mobile) #d-eco:has(.bar.pods.full) > .eco-pods { --tc: #f08a24; } body.skin-clean:not(.mobile) #d-eco:has(.bar.pods.full) .eco-pods b { color: #ffb35a; } body.skin-clean:not(.mobile) .eco-line b { display: inline-flex; align-items: center; gap: 2px; font: 700 13px/1 Lexend, sans-serif; color: var(--lime); } body.skin-clean:not(.mobile) .eco-line img { width: 13px; height: 13px; object-fit: contain; } /* icône kama à la taille du texte (Scott 2026-10-20) */ body.skin-clean .eco-kamas.sk-bump { animation: skKUp .4s cubic-bezier(.2,.9,.3,1.4); } body.skin-clean .eco-kamas.sk-down { animation: skKDown .34s ease-out; } @keyframes skKUp { 0% { transform: none; } 35% { transform: translateY(-4px) scale(1.12); } 100% { transform: none; } } @keyframes skKDown { 0% { transform: none; } 30% { transform: scale(.93); } 100% { transform: none; } } body.skin-clean.noanim .eco-kamas.sk-bump, body.skin-clean.noanim .eco-kamas.sk-down { animation: none; } /* marché : cartes posées à cheval sur la plaque ; au-dessus, « MARCHÉ » en petite capitale (comme SYNERGIES / JOUEURS) sur une pastille d'encre, les cotes du niveau à sa droite (le raccourci clavier reste dans la bulle des cartes) */ body.skin-clean:not(.mobile) #d-market { padding: 0; } body.skin-clean.mobile .mk-head { display: none; } body.skin-clean:not(.mobile) .mk-head { position: absolute; z-index: 2; left: 10px; top: calc(var(--pt) - 59px - 28px); height: 22px; display: flex; align-items: center; gap: 12px; padding: 0 12px 0 10px; border-radius: 11px; background: rgba(var(--ink),.78); } body.skin-clean:not(.mobile) .mk-head b { font: 700 12px/1 Lexend, sans-serif; letter-spacing: 1.4px; text-transform: uppercase; color: #ece6d6; } body.skin-clean:not(.mobile) #mk-odds { gap: 10px; } body.skin-clean:not(.mobile) #mk-odds span { padding: 0; gap: 4px; background: none; border: 0; border-radius: 0; font: 600 10.5px/1 Lexend, sans-serif; color: #d9d2bf; } body.skin-clean:not(.mobile) #mk-odds span i { width: 8px; height: 8px; border-radius: 50%; } body.skin-clean:not(.mobile) #mk-odds span.zero { opacity: .4; } body.skin-clean:not(.mobile) #mk-hint { display: none; } body.skin-clean:not(.mobile) #d-market:has(#mk-cards:empty) .mk-head { display: none; } /* marché fermé (combat) : pas de titre sur le vide */ body.skin-clean:not(.mobile) #mk-cards { position: absolute; left: 12px; top: calc(var(--pt) - 59px); margin: 0; gap: 8px; } body.skin-clean:not(.mobile) .mslot { width: 112px; gap: 4px; } body.skin-clean:not(.mobile) .mcard { width: 112px; height: 118px; } /* carte : plus d'aplat ; teinte de la rareté en haut (.33) qui s'efface dans l'encre violette, le filet de 1 px porte la rareté. Commune (gris #9aa2ad) : encre violette pure + filet lavande (jamais de gris neutre) */ body.skin-clean .mcard { border-width: 1px; border-style: solid; border-radius: 12px; background: linear-gradient(180deg, var(--rc-soft, transparent) 0, transparent 72%), linear-gradient(180deg, rgba(42,31,61,.94), rgba(26,13,46,.95)); } body.skin-clean .mcard[style*="#9aa2ad"] { border-color: rgba(176,182,196,.6) !important; background: linear-gradient(180deg, rgba(104,108,124,.92), rgba(66,70,86,.94)); } /* 1 pod : gris ardoise, pas noir (Scott) */ body.skin-clean .mcard .pods[style*="#9aa2ad"] { color: #d9dde6; } body.skin-clean .mcard.preview:not([style]) { background: none; border: 1.5px dashed rgba(236,230,214,.22); } body.skin-clean .mcard.locked::before { border-radius: 11px; } /* déjà à toi (fusion possible) : un seul anneau lime de 2 px qui respire, plus de filet blanc */ body.skin-clean .mcard.owned { box-shadow: 0 0 0 2px var(--lime); animation: skinOwned 1.3s ease-in-out infinite; } @keyframes skinOwned { 50% { box-shadow: 0 0 0 2px rgba(200,226,10,.35); } } /* portrait plein cadre (skin.js marketCards le repeint à sa taille d'affichage) ; types en petites pastilles en haut, nom sur une bande d'encre en bas par-dessus le portrait, pods et prix aux deux coins du bas */ body.skin-clean:not(.mobile) .mcard canvas { left: 0; top: 0; width: 100%; height: 104px; } /* test ?market=v2 : 5 cartes de 160 px sur la largeur des 7 (7 × 112 + 6 × 8 = 5 × 160 + 4 × 8), portrait centré un peu plus grand */ body.skin-clean.mk-v2:not(.mobile) .mslot, body.skin-clean.mk-v2:not(.mobile) .mcard { width: 160px; } body.skin-clean.mk-v2:not(.mobile) .mcard canvas { left: 0; right: auto; top: 0; width: 100%; height: 104px; } body.skin-clean:not(.mobile) .mbottom { padding: 14px 6px 3px; background: linear-gradient(180deg, rgba(var(--ink),0), rgba(var(--ink),.8) 14px); } body.skin-clean:not(.mobile) .mcard .cn { font-size: 11.5px; line-height: 13px; font-weight: 700; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; } body.skin-clean:not(.mobile) .mcard .mrow { justify-content: space-between; margin-top: 1px; } /* 7 cartes de 112 px : le nom passe sur 2 lignes équilibrées (10,5 px) au lieu d'être coupé ; la pastille de famille serre un peu */ body.skin-clean:not(.mobile):not(.mk-v2) .mcard .cn { font-size: 10.5px; line-height: 11.5px; white-space: normal; overflow-wrap: normal; text-wrap: balance; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; } body.skin-clean .mtags { flex-direction: row; align-items: center; gap: 3px; } body.skin-clean .mtag { background: none; padding: 0; border-radius: 0; color: #fff; } body.skin-clean.mobile .mtag:first-child { font-size: 10px; gap: 2px; color: #ece6d6; } /* téléphone : le type (icône + nom : Tireur, Tank…) sous la famille */ body.skin-clean .mtag .rb { width: 16px; height: 16px; } body.skin-clean .mtag.fam { padding: 0; color: #ece6d6; font-size: 10px; } /* ordinateur : les DEUX traits nommés, l'un sous l'autre en haut à gauche : type (icône + nom) puis famille (portrait + nom), pastilles d'encre de 16 px, texte 10,5 px (skin.js marketCards : portrait de la famille, textes en ) ; cadenas en haut à droite */ body.skin-clean:not(.mobile) .mtags { left: 4px; top: 4px; right: 4px; flex-direction: column; align-items: flex-start; gap: 2px; } body.skin-clean:not(.mobile) .mtag, body.skin-clean:not(.mobile) .mtag.fam { height: 16px; max-width: 100%; min-width: 0; display: flex; align-items: center; gap: 3px; padding: 0 6px 0 1px; border-radius: 8px; background: rgba(var(--ink),.82); color: #fff; font: 700 10.5px/16px Lexend, sans-serif; letter-spacing: 0; overflow: hidden; } body.skin-clean:not(.mobile) .mtag:first-child { max-width: calc(100% - 28px); } body.skin-clean:not(.mobile) .mtag.fam { color: #ece6d6; } body.skin-clean:not(.mobile) .mtag .rb { flex: none; width: 14px; height: 14px; } body.skin-clean:not(.mobile) .mcard .mtags .mtag > canvas { position: static; left: auto; right: auto; top: auto; flex: none; width: 14px; height: 14px; border-radius: 50%; background: rgba(236,230,214,.16); } body.skin-clean:not(.mobile) .mtag > span:not(.rb) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* nom SOUS le portrait (11 px, 2 lignes avant les points de suspension) sur un fondu d'encre ; pods = icône + nombre couleur de rareté */ body.skin-clean .mbottom { left: 0; right: 0; bottom: 0; padding: 6px 6px 4px; border-radius: 0 0 11px 11px; background: linear-gradient(180deg, rgba(var(--ink),0), rgba(var(--ink),.7) 10px); } body.skin-clean .mcard .cn { text-shadow: none; color: #fff; font-size: 11px; line-height: 12px; white-space: normal; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; } body.skin-clean .mcard .mrow { gap: 4px; } body.skin-clean .mcard .pods { background: none; padding: 0; gap: 2px; color: var(--rc); font-size: 12px; } body.skin-clean .mcard .pods img { filter: none; opacity: 1; width: 13px; } body.skin-clean .mcard .mprice { margin-left: auto; background: none; padding: 0; font-size: 13px; color: var(--gold2); } body.skin-clean .mcard.poor .mprice { color: #ff7a6b; } body.skin-clean .lockbtn { background: none; border: 0; border-radius: 50%; } body.skin-clean .lockbtn:hover:not(:disabled) { background: rgba(255,255,255,.12); } body.skin-clean .lockbtn.on { background: var(--lime); } body.skin-clean .skipbtn { background: none; border: 0; box-shadow: none; border-radius: 10px; color: #d9d2bf; font-weight: 600; } body.skin-clean .skipbtn:hover:not(:disabled) { background: rgba(255,255,255,.08); box-shadow: none; color: #fff; } body.skin-clean .skipbtn > img { opacity: .6; } body.skin-clean .skipbtn b { color: var(--gold2); } body.skin-clean .skip-space { color: #b9b2a2; } body.skin-clean #sell-zone { border-radius: 12px; } /* chrono : grands chiffres flottants */ body.skin-clean:not(.mobile) #d-timer { justify-content: flex-start; padding: 56px 8px 0; gap: 3px; } body.skin-clean .tm-label { color: #d9d2bf; } body.skin-clean .tm-sec span { color: #d9d2bf; } body.skin-clean .tm-sub { color: #c9c2b0; } body.skin-clean #d-timer.sudden { box-shadow: none; } /* mort subite : plus de contour de flammes ; RIEN par-dessus le plateau : les fondus déjà là (côtés de #game sur PC, colonnes du téléphone), le bord haut de la demi-plaque et le cadre de la plaque du perso passent de l'encre violette à une encre rouge profonde qui respire lentement (--sk-side, couleur animée et héritée) */ @property --sk-side { syntax: ''; inherits: true; initial-value: rgb(26,13,46); } body.skin-clean #ev-frame.on { display: none; } body.skin-clean #game.sudden { --sk-side: rgb(110,10,30); animation: skSide 1.8s ease-in-out infinite alternate; } @keyframes skSide { from { --sk-side: rgb(84,8,30); } to { --sk-side: rgb(138,14,38); } } body.skin-clean.noanim #game.sudden { animation: none; } body.skin-clean:not(.mobile) #game.sudden { background: linear-gradient(90deg, color-mix(in srgb, var(--sk-side) 88%, transparent) 0, color-mix(in srgb, var(--sk-side) 64%, transparent) 150px, color-mix(in srgb, var(--sk-side) 28%, transparent) 210px, transparent 250px), linear-gradient(270deg, color-mix(in srgb, var(--sk-side) 88%, transparent) 0, color-mix(in srgb, var(--sk-side) 64%, transparent) 70px, color-mix(in srgb, var(--sk-side) 28%, transparent) 105px, transparent 135px), radial-gradient(ellipse 72% 68% at 50% 46%, rgba(var(--ink),0) 55%, rgba(var(--ink),.55) 100%), var(--skin-bd, none) var(--skin-bd-pos, center) / var(--skin-bd-size, cover) no-repeat, var(--skin-bd-fog, #1a0d2e); } body.skin-clean #game.sudden #dock::before { border-top: 2px solid color-mix(in srgb, var(--sk-side), #ff3a52 45%); } body.skin-clean:not(.mobile) #game.sudden #d-char { border-color: color-mix(in srgb, var(--sk-side), #ff3a52 25%); border-top-color: var(--lime); } body.skin-clean.mobile #game.sudden #m-left { background: linear-gradient(90deg, color-mix(in srgb, var(--sk-side) 90%, transparent) 0, color-mix(in srgb, var(--sk-side) 80%, transparent) 76%, transparent 100%); } body.skin-clean.mobile #game.sudden:not(.pl-open):not(.pl-duel) #players { background: linear-gradient(270deg, color-mix(in srgb, var(--sk-side) 88%, transparent) 0, color-mix(in srgb, var(--sk-side) 72%, transparent) 70%, transparent 100%); } /* ---------------------------------------------------------------- surcouches plein écran : plus de rectangle du plateau (--skw / --skh = taille de la scène, posées sur #stage par skin.js ; téléphone : --bx / --by / --bk de main.js) */ /* éliminé : rayures + voile sur toute la scène (colonnes, barre du haut, dock compris), titre centré sur la scène ; téléphone : plus de mise à l'échelle --bk, donc unités ramenées aux tailles d'écran d'avant (.66 px, 13 px, boutons 42 px) */ body.skin-clean #elim, body.skin-clean.mobile #elim { left: 0; top: 0; width: 100%; height: 100%; transform: none; } body.skin-clean.mobile .el-box { --u: .66px; --fmin: 13px; } body.skin-clean.mobile #elim .el-btns button { min-height: 42px; font-size: 14px; padding: 0 14px; } body.skin-clean #elim .sct.haz .ev-rb, body.skin-clean #elim .sct.haz .ev-rbl { -webkit-mask-image: linear-gradient(90deg, transparent, #000 120px, #000 calc(100% - 120px), transparent); mask-image: linear-gradient(90deg, transparent, #000 120px, #000 calc(100% - 120px), transparent); } body.skin-clean.mobile #elim .sct.haz .ev-rb, body.skin-clean.mobile #elim .sct.haz .ev-rbl { -webkit-mask-image: linear-gradient(90deg, transparent, #000 60px, #000 calc(100% - 60px), transparent); mask-image: linear-gradient(90deg, transparent, #000 60px, #000 calc(100% - 60px), transparent); } /* Top 4 : l'île couvre la scène (skin.js top4Full : s, tx, ty) ; les plaques suivent les pieds par une seule transformation */ body.skin-clean #top4, body.skin-clean.mobile #top4 { left: 0; top: 0; width: 100%; height: 100%; transform: none; } body.skin-clean .t4-plates { left: 0; right: auto; top: 0; width: 1140px; transform-origin: 0 0; transform: translate(var(--t4x, 230px), calc(var(--t4y, 56px) + 476px * var(--t4s, 1))) scale(var(--t4s, 1)); } body.skin-clean.mobile .t4-plates { top: 0; --pu: calc(1.12px * var(--bk, 1) / var(--t4s, 1)); transform: translate(var(--t4x, 0px), calc(var(--t4y, 0px) + 472px * var(--t4s, 1))) scale(var(--t4s, 1)); } /* téléphone : plaques à la même taille d'écran qu'avant (--pu ramené de l'échelle de l'île à celle du plateau réduit) */ body.skin-clean.mobile .t4-head { --u: .66px; --fmin: 13px; } body.skin-clean.mobile #top4 .t4-head { top: 14px; } body.skin-clean.mobile #top4 .t4-foot { top: 8px; right: 8px; padding: 0 8px; border-radius: 9px; font-size: 10px; line-height: 18px; } /* bannières : la boîte reste sur le plateau (plaque, titre, portraits) ; le ruban, son filet et les deux moitiés du Défi vont d'un bord de la scène à l'autre et s'effacent aux deux bouts */ body.skin-clean #banner > .ev-rb, body.skin-clean #banner > .ev-rbl { left: calc(-1 * var(--bx, 230px)); right: auto; width: var(--skw, 1600px); -webkit-mask-image: linear-gradient(90deg, transparent, #000 140px, #000 calc(100% - 140px), transparent); mask-image: linear-gradient(90deg, transparent, #000 140px, #000 calc(100% - 140px), transparent); } body.skin-clean.mobile #banner > .ev-rb, body.skin-clean.mobile #banner > .ev-rbl { -webkit-mask-image: linear-gradient(90deg, transparent, #000 70px, #000 calc(100% - 70px), transparent); mask-image: linear-gradient(90deg, transparent, #000 70px, #000 calc(100% - 70px), transparent); } body.skin-clean #banner .ev-big.duel .ev-band { clip-path: inset(-80px -4000px); } body.skin-clean #banner .ev-big.duel .ev-half.L { left: calc(-1 * var(--bx, 230px)); -webkit-mask-image: linear-gradient(90deg, transparent 0 18px, #000 158px); mask-image: linear-gradient(90deg, transparent 0 18px, #000 158px); } body.skin-clean #banner .ev-big.duel .ev-half.R { right: auto; width: calc(var(--skw, 1600px) - var(--bx, 230px) - 49.6%); -webkit-mask-image: linear-gradient(270deg, transparent 0 18px, #000 158px); mask-image: linear-gradient(270deg, transparent 0 18px, #000 158px); } body.skin-clean.mobile #banner .ev-big.duel .ev-half.L { -webkit-mask-image: linear-gradient(90deg, transparent 0 10px, #000 80px); mask-image: linear-gradient(90deg, transparent 0 10px, #000 80px); } body.skin-clean.mobile #banner .ev-big.duel .ev-half.R { -webkit-mask-image: linear-gradient(270deg, transparent 0 10px, #000 80px); mask-image: linear-gradient(270deg, transparent 0 10px, #000 80px); } /* combat : UN seul fondu d'encre depuis le bord haut (barre du haut + timeline, toute la largeur, sous le plateau) ; le fondu propre de la barre du haut se tait pendant ce temps (Scott : deux dégradés empilés) ; préparation : le fondu de la barre seul. #game::after reste à la mort subite */ body.skin-clean #game.sk-tl::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 160px; pointer-events: none; background: linear-gradient(180deg, rgba(var(--ink),.85) 0, rgba(var(--ink),.72) 56px, rgba(var(--ink),.5) 118px, rgba(var(--ink),0) 160px); } body.skin-clean #game.sk-tl #topbar::before { display: none; } body.skin-clean.mobile #game.sk-tl::before { top: 0; height: calc(var(--by, 44px) + 104px * var(--bk, 1)); background: linear-gradient(180deg, rgba(var(--ink),.72) 0, rgba(var(--ink),.6) var(--by, 44px), rgba(var(--ink),.42) calc(var(--by, 44px) + 62px * var(--bk, 1)), rgba(var(--ink),0) 100%); } /* pause : voile plat sur toute la scène (skin.js #sk-pause ; le canvas ne la dessine plus) */ body.skin-clean #sk-pause { position: absolute; inset: 0; z-index: 33; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; pointer-events: none; background: rgba(var(--ink),.62); color: #fff; font: 44px/1 Rowdies, Lexend, sans-serif; } body.skin-clean #sk-pause[hidden] { display: none; } body.skin-clean #sk-pause small { font: 600 16px/1.2 Lexend, sans-serif; color: var(--lime); background: rgba(var(--ink),.88); padding: 6px 14px; border-radius: 999px; } body.skin-clean.mobile #sk-pause { font-size: 28px; gap: 6px; } body.skin-clean.mobile #sk-pause small { font-size: 13px; padding: 4px 11px; } /* fondu de fin du Sanctuaire : l'encre est déjà sur toute la scène (skin.js lobbyFull) : plus de rectangle du plateau */ body.skin-clean #board-fade { visibility: hidden; } /* intro du Sanctuaire : on la passe d'un clic n'importe où sur la scène (.lb-skip garde le plateau ; skin.js relaie les clics hors des commandes : barre du haut, joueurs, boutons restent utilisables pendant l'intro) */ /* téléphone : le bandeau du Sanctuaire glisse sous la barre du haut en apparaissant (translateY -26px) : il ne prend plus les clics (Aide, Quitter restent cliquables), seul « Comment jouer ? » reste actif */ /* hors de la scène 16:9 (fenêtre d'un autre format) : bandes à l'encre du décor, pas gris-noir */ body.skin-clean, body.skin-clean #viewport { background: #1a0d2e; } /* fond de la page autour de la scène (skin.js pageFill) : le décor en cours, couvrant la fenêtre, flouté et assombri ; partie : teinté de l'encre violette des bords de la scène */ #page-bg { position: absolute; inset: -60px; z-index: 0; pointer-events: none; background: #1a0d2e center / cover no-repeat; filter: blur(22px) brightness(.5) saturate(1.2); } #page-bg.in-game { filter: blur(26px) brightness(.8) saturate(1.1); } #page-amb { position: absolute; display: none; transform-origin: 50% 50%; } #page-halo { position: absolute; display: none; box-shadow: 0 0 150px 40px rgba(26,13,46,.9); } #page-bg.in-game #page-amb, #page-bg.in-game #page-halo { display: block; } #page-bg.in-game::after { background: radial-gradient(ellipse at center, rgba(26,13,46,0) 55%, rgba(26,13,46,.35) 100%); } #page-bg::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(26,13,46,0) 40%, rgba(26,13,46,.55) 100%); } body.mobile #page-bg { display: none; } /* ---------------------------------------------------------------- par-dessus le plateau : panneau de combat, bulles, aide */ /* panneau de combat : plus de panneau ; un fondu d'encre doux derrière le texte seulement (.75, effacé sur 40 px à gauche et en bas, 16 px en haut et à droite), onglets en texte (actif lime souligné), barres sans rail, lien « Comparer › » lime, « − » nu */ body.skin-clean #fight-hud { background: none; border: 0; border-radius: 0; box-shadow: none; } body.skin-clean #fight-hud::before { content: ''; position: absolute; z-index: -1; inset: -30px -30px -44px -48px; pointer-events: none; background: rgba(var(--ink),.75); -webkit-mask-image: linear-gradient(90deg, transparent, #000 52px, #000 calc(100% - 34px), transparent), linear-gradient(180deg, transparent, #000 34px, #000 calc(100% - 48px), transparent); -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent, #000 52px, #000 calc(100% - 34px), transparent), linear-gradient(180deg, transparent, #000 34px, #000 calc(100% - 48px), transparent); mask-composite: intersect; } body.skin-clean #fight-hud .hud-min, body.skin-clean #fight-hud .hud-min:hover:not(:disabled) { background: none; border: 0; box-shadow: none; color: #ece6d6; font-size: 20px; } body.skin-clean #fight-hud .hud-min:hover:not(:disabled) { color: var(--lime); } body.skin-clean .hud-tabs { gap: 16px; } body.skin-clean .hud-tabs button { flex: none; padding: 2px 0 4px; background: none; border: 0; border-radius: 0; box-shadow: none; color: rgba(236,230,214,.6); } body.skin-clean .hud-tabs button:hover { background: none; box-shadow: none; color: #fff; } body.skin-clean .hud-tabs button.on, body.skin-clean .hud-tabs button.on:hover { background: none; color: var(--lime); box-shadow: inset 0 -2px 0 var(--lime); } body.skin-clean .hud-compare { width: auto; display: block; padding: 2px 0; border: 0; border-radius: 0; background: none; color: var(--lime); text-align: left; } body.skin-clean .hud-compare::after { content: ' ›'; font-size: 14px; } body.skin-clean .hud-compare:hover { background: none; text-decoration: underline; } body.skin-clean .micon, body.skin-clean .micon.cmd { background: none; border: 0; border-radius: 0; box-shadow: none; } body.skin-clean .micon b { text-shadow: none; } body.skin-clean .mrow .mb { height: 5px; background: none; border: 0; border-radius: 3px; } body.skin-clean .mrow .mb i { border-radius: 3px; } body.skin-clean .mrow .mb i.dmg { background: #ff7a45; } body.skin-clean .mrow .mb i.heal { background: #5fd85a; } body.skin-clean .mrow .mb i.taken { background: #6f95ff; } body.skin-clean #tooltip, body.skin-clean #tooltip2, body.skin-clean .tt-box { background: rgba(21,18,29,.96); border: 0; border-radius: 14px; box-shadow: none; } body.skin-clean #tooltip2 { box-shadow: inset 0 0 0 1px var(--lime); } body.skin-clean .tt-head { background: none; border-bottom: 1px solid rgba(255,255,255,.08); } body.skin-clean .tt-head canvas, body.skin-clean .tt-head .tt-img { background: rgba(255,255,255,.05); border-width: 1px; border-radius: 10px; } body.skin-clean .tt-sec { border-bottom: 1px solid rgba(255,255,255,.06); } body.skin-clean .tt-foot { background: rgba(0,0,0,.18); } /* guide : voile d'encre sur toute la scène, feuille sans bord noir ni anneau */ body.skin-clean #help.guide { background: rgba(var(--ink),.72); border: 0; border-radius: 0; box-shadow: none; } body.skin-clean #help .gd-box { background: rgba(33,18,52,.96); border: 0; border-radius: 16px; box-shadow: none; } body.skin-clean.mobile #help .gd-box { border-radius: 0; } /* ================================================================ téléphone (body.mobile, mobile.css reste la base de place) */ /* le dock couvre toute la scène au téléphone : ni fondu ni plaque sur lui ; la plaque est sous le volet du marché */ body.skin-clean.mobile #dock { background: none; } body.skin-clean.mobile #dock::before { display: none; } body.skin-clean.mobile #topbar::before { height: 64px; } /* colonne de gauche : fondu depuis le bord, blocs sans fond */ body.skin-clean.mobile #m-left { background: linear-gradient(90deg, rgba(var(--ink),.88) 0, rgba(var(--ink),.78) 76%, rgba(var(--ink),0) 100%); border: 0; } body.skin-clean.mobile #traits { background: none; padding: 2px 0; overflow: hidden; } /* rien ne déborde derrière la pastille « Objets » */ /* synergies : les mêmes lignes que l'ordinateur, en 30 px (tuile 26), nom coupé en « … » ; défilement au doigt (dragScroll) */ body.skin-clean.mobile #traits-list { overflow-y: auto; display: flex; flex-direction: column; flex-wrap: nowrap; gap: 1px; } body.skin-clean.mobile .trait, body.skin-clean.mobile .trait.on { width: auto; height: 30px; padding: 0 3px 0 2px; margin: 0; gap: 4px; justify-content: flex-start; border: 0; border-radius: 6px; background: none; } body.skin-clean.mobile .trait .tn { flex: 1; justify-content: flex-start; gap: 5px; font-size: 12px; } body.skin-clean.mobile .sk-tile { width: 26px; height: 26px; } body.skin-clean.mobile .sk-ct { font-size: 13px; min-width: 12px; } body.skin-clean.mobile .sk-th, body.skin-clean.mobile .sk-nm { display: none; } /* téléphone : tuile + nombre, le nom et les paliers dans la bulle au toucher */ body.skin-clean.mobile .trait, body.skin-clean.mobile .trait.on { width: max-content; padding-right: 8px; } body.skin-clean.mobile .portrait-wrap { width: 44px; height: 44px; } /* XP sur 2 lignes à côté du portrait (plus de « +12/… » coupé) */ body.skin-clean.mobile .char-xptext { margin: -22px 0 2px 50px; color: #d9d2bf; white-space: normal; line-height: 1.15; } body.skin-clean.mobile #xp-btn { height: 30px; border-radius: 15px; } body.skin-clean.mobile #stats-list { column-gap: 12px; row-gap: 0; } /* « icône valeur +bonus + » : bonus en petit lime après la valeur, « + » lime nu de 16 px (plus de disques) */ body.skin-clean.mobile .stat-row { height: 24px; justify-content: flex-start; gap: 4px; } body.skin-clean.mobile .stat-row .sv { flex: none; min-width: 12px; order: 1; } body.skin-clean.mobile .stat-row .sg { order: 2; margin-left: -1px; font-size: 10.5px; } body.skin-clean.mobile .stat-row .btn-plus { order: 3; } body.skin-clean.mobile .btn-plus, body.skin-clean.mobile .btn-plus:disabled { width: 16px; height: 22px; font-size: 18px; line-height: 22px; } /* « 1 point à placer » : petit texte lime dans la 6e case (sous la 2e colonne des caractéristiques), sans pastille */ body.skin-clean.mobile #stat-points { justify-content: flex-start; text-align: left; height: 24px; font-size: 10.5px; line-height: 1.1; } body.skin-clean.mobile .eco-kamas b { font-size: 26px; } /* « Objets » : icône + libellé flottants ; fond lime seulement tiroir ouvert */ body.skin-clean.mobile .m-tool { border: 0; background: none; border-radius: 18px; box-shadow: none; } body.skin-clean.mobile .m-tool img { border-radius: 50%; } body.skin-clean.mobile .m-tool i { border: 0; } body.skin-clean.mobile #game[data-drawer="items"] #m-items { background: var(--lime); color: #1c2300; } body.skin-clean.mobile #m-items.warm { box-shadow: none; color: var(--lime); } body.skin-clean.mobile #m-items.hot { background: none; color: var(--lime); animation: skinHot 1.1s ease-in-out infinite; } @keyframes skinHot { 50% { color: #f4ff9a; } } /* barre du haut : fondu plus léger (les pastilles .4 se lisent translucides) ; Aide / Quitter en texte */ body.skin-clean.mobile #topbar::before { background: linear-gradient(180deg, rgba(var(--ink),.72) 0, rgba(var(--ink),.45) 30px, rgba(var(--ink),0) 100%); } body.skin-clean.mobile #d-timer { background: none; } /* tiroir des objets : plaque d'encre qui s'efface vers le plateau */ /* il s'arrête au-dessus du volet du marché (les 7 cartes restent entières et cliquables ; le tiroir défile) ; bord droit fondu sur 30 px, bas fondu sur 16 px */ /* haut fondu sur 24 px aussi (plus d'arête dure) ; la ligne « Prochain adversaire » du canvas se tait tiroir ouvert (skin.js) */ body.skin-clean.mobile #items { background: linear-gradient(90deg, rgba(var(--ink),.94) 0, rgba(var(--ink),.9) calc(100% - 30px), rgba(var(--ink),0) 100%); border: 0 !important; border-radius: 0; box-shadow: none; padding-top: 18px; padding-right: 30px; width: 280px; top: 44px; bottom: 132px; -webkit-mask-image: linear-gradient(180deg, transparent, #000 24px, #000 calc(100% - 16px), transparent); mask-image: linear-gradient(180deg, transparent, #000 24px, #000 calc(100% - 16px), transparent); } body.skin-clean.mobile #game.mk-closed:not(.mk-peek) #items { bottom: 8px; } /* téléphone : mêmes icônes à la suite, plus grandes pour le doigt (38 px : les 6 objets sur UNE rangée, 6×38 + 5×2 = 238 px) */ body.skin-clean.mobile #equip-grid, body.skin-clean.mobile #bag-grid { gap: 4px 2px; } body.skin-clean.mobile .slot, body.skin-clean.mobile .res { width: 38px; height: 38px; } body.skin-clean.mobile #equip-grid .slot > img { width: 34px; height: 34px; } body.skin-clean.mobile .res img, body.skin-clean.mobile .res.cons img { width: 34px; height: 34px; } body.skin-clean.mobile .slot:not(.full)::after, body.skin-clean.mobile .res.empty::after { width: 30px; height: 30px; } body.skin-clean.mobile .res.cons .cs-badge { min-width: 16px; height: 16px; font-size: 10px; } body.skin-clean.mobile .relic-slot, body.skin-clean.mobile .relic-slot.done { margin-bottom: 8px; } body.skin-clean.mobile #items .h-res, body.skin-clean.mobile #sets-list { margin-top: 8px; } /* joueurs : fondu depuis le bord droit ; portraits flottants, PV en petit chiffre */ body.skin-clean.mobile #players { background: linear-gradient(270deg, rgba(var(--ink),.85) 0, rgba(var(--ink),.7) 70%, rgba(var(--ink),0) 100%); } body.skin-clean.mobile #game.pl-open #players, body.skin-clean.mobile #game.pl-duel #players { background: linear-gradient(270deg, rgba(var(--ink),.94), rgba(var(--ink),.88) 80%, rgba(var(--ink),.6)); box-shadow: none; } body.skin-clean.mobile #m-pl { border: 0; border-radius: 0; background: none; } /* flèche flottante */ /* portraits ronds de 34 px ; l'état = anneau de 2 px (toi lime, danger / prochain rouge), plus de liseré */ body.skin-clean.mobile #players { padding: 4px 2px 0; } body.skin-clean.mobile .score .shead { width: 34px; height: 34px; border-radius: 50%; } body.skin-clean.mobile .score .shead img { border-radius: 50%; } body.skin-clean.mobile .score, body.skin-clean.mobile .score.me, body.skin-clean.mobile .score.next, body.skin-clean.mobile .score.viewing { box-shadow: none; } /* colonne repliée : PV en texte flottant à GAUCHE du portrait (lime toi, rouge danger), portrait centré à droite, sans pastille */ body.skin-clean.mobile #game:not(.pl-open):not(.pl-duel) .score { justify-content: flex-end; padding: 2px 2px 2px 0; } body.skin-clean.mobile #game:not(.pl-open):not(.pl-duel) .score .shp { left: -2px; right: auto; top: 50%; bottom: auto; transform: translateY(-50%); min-width: 0; padding: 0; background: none; border-radius: 0; font-size: 10px; letter-spacing: -.6px; text-align: left; } body.skin-clean.mobile #game:not(.pl-open):not(.pl-duel) .score .sst { left: auto; right: 0; top: -1px; } body.skin-clean.mobile .score.danger .shp, body.skin-clean.mobile .score.next .shp { color: #ff6a6a; } /* téléphone : l'anneau des PV autour des portraits (42 px, colonne de 58 px gardée), rang en pastille en bas à gauche */ body.skin-clean.mobile #players .score .shead { width: 42px; height: 42px; } body.skin-clean.mobile #players .sk-rk { right: auto; top: auto; left: -4px; bottom: -3px; min-width: 15px; height: 15px; padding: 0 3px; border-radius: 8px; font-size: 9px; line-height: 15px; } /* colonne repliée : l'anneau suffit (le nombre chevauchait l'anneau dans 58 px) ; portrait centré, PV cachés mais en place pour le « −N » */ body.skin-clean.mobile #game:not(.pl-open):not(.pl-duel) #players .score { justify-content: center; padding: 1px 0; } body.skin-clean.mobile #game:not(.pl-open):not(.pl-duel) #players .score .shp { left: 50%; top: 50%; transform: translate(-50%, -50%); visibility: hidden; } body.skin-clean.mobile #players .score:not(.duel-row) .shp { width: 32px; flex: none; font-size: 15px; text-align: right; } /* volet ouvert : « 100 » entier (18 px débordaient du bord) */ /* volet du marché = la demi-plaque : transparent au-dessus du milieu des cartes, plaque en dessous */ body.skin-clean.mobile #d-market { border: 0; border-radius: 0; box-shadow: none; padding: 0 6px 3px; background: linear-gradient(180deg, transparent var(--mk-mid, 46px), var(--plate-line) var(--mk-mid, 46px), var(--plate-line) calc(var(--mk-mid, 46px) + 1px), var(--plate) calc(var(--mk-mid, 46px) + 1px)); } body.skin-clean.mobile #mk-handle { border: 0; border-radius: 0; height: 24px; top: -28px; background: radial-gradient(closest-side, rgba(var(--ink),.6), rgba(var(--ink),0)); color: #ece6d6; } /* « MARCHÉ ▼ » flottant (fondu doux, pas de pastille) */ body.skin-clean.mobile .mcard { border-width: 1px; border-radius: 11px; } /* en-tête de carte : 22 px réservés à droite pour le cadenas (la famille ne passe plus dessous) */ body.skin-clean.mobile .mtags { right: 22px; flex-direction: column-reverse; align-items: flex-start; gap: 0; } body.skin-clean.mobile .mtag.fam { min-width: 0; overflow: hidden; text-overflow: ellipsis; } body.skin-clean.mobile .mbottom { padding: 6px 4px 3px; } body.skin-clean.mobile .mcard .cn { display: none; } /* téléphone : le nom est dans la bulle (toucher) */ body.skin-clean.mobile .mcard .mprice { font-size: 12px; } body.skin-clean.mobile .skipbtn, body.skin-clean.mobile .skip-space { height: 22px; } /* téléphone : frise en carrés de 34 px (les textes « Monstres / JcJ » restent cachés par mobile.css) */ body.skin-clean.mobile #tb-rounds span { width: 34px; height: 34px; border-radius: 8px; font-size: 9.5px; } body.skin-clean.mobile #tb-rounds span > img, body.skin-clean.mobile #tb-rounds span .res { width: 15px; height: 15px; margin-bottom: 2px; } body.skin-clean.mobile #tb-rounds span.now { transform: scale(1.06); } body.skin-clean.mobile #d-char.has-points #stat-points { height: auto; padding: 3px 6px; font-size: 10px; line-height: 1.1; white-space: normal; } /* ---------------------------------------------------------------- panoplies, round 4 (ordinateur ; skin.js setsRail) Bouton large sous la grille des objets portés (liseré lime, petites capitales, pastille = panoplies actives) ; survol = panneau d'encre de 260 px au-dessus du bouton, sur le dock (pont de survol sous le panneau : on y passe sans qu'il se ferme). */ body.skin-clean:not(.mobile) #sk-pano { position: relative; } body.skin-clean:not(.mobile) .sk-pano-btn { width: 100%; height: 24px; display: flex; align-items: center; justify-content: center; gap: 7px; margin: 0; padding: 0 8px; background: #170f3a; border: 2px solid var(--lime); border-radius: 0; box-shadow: none; color: var(--lime); font: 800 11px/1 Lexend, sans-serif; letter-spacing: 1.8px; text-transform: uppercase; cursor: pointer; } body.skin-clean:not(.mobile) .sk-pano-btn:hover, body.skin-clean:not(.mobile) .sk-pano-btn.on { background: var(--lime); color: #15121d; } body.skin-clean:not(.mobile) .sk-pano-n { min-width: 16px; height: 16px; padding: 0 4px; box-sizing: border-box; border-radius: 8px; background: var(--lime); color: #15121d; font: 800 10.5px/16px Lexend, sans-serif; letter-spacing: 0; text-align: center; } body.skin-clean:not(.mobile) .sk-pano-n[hidden] { display: none; } body.skin-clean:not(.mobile) .sk-pano-btn:hover .sk-pano-n, body.skin-clean:not(.mobile) .sk-pano-btn.on .sk-pano-n { background: #15121d; color: var(--lime); } body.skin-clean:not(.mobile) .sk-pano-pop { position: absolute; z-index: 40; left: 50%; bottom: calc(100% + 8px); width: 260px; margin-left: -130px; box-sizing: border-box; padding: 9px 12px 12px; display: flex; flex-direction: column; gap: 8px; background: #15121d; border: 2px solid #000; border-top: 4px solid var(--lime); border-radius: 12px; } body.skin-clean:not(.mobile) .sk-pano-pop[hidden] { display: none; } body.skin-clean:not(.mobile) .sk-pano-pop::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 14px; } body.skin-clean:not(.mobile) .sk-pano-h { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 0; padding: 0; border: 0; font: 800 11px/16px Lexend, sans-serif; letter-spacing: 1.6px; text-transform: uppercase; color: var(--lime); } body.skin-clean:not(.mobile) .sk-pano-h small { font: 600 10px/1 Lexend, sans-serif; letter-spacing: 0; text-transform: none; color: #b3aacb; } body.skin-clean:not(.mobile) .sk-pano-list { display: flex; flex-direction: column; gap: 7px; } body.skin-clean:not(.mobile) .sk-pano-list .sk-set { padding: 2px 4px 2px 2px; } body.skin-clean:not(.mobile) .sk-pano-list .empty-note { font: 500 11.5px/1.35 Lexend, sans-serif; color: #b3aacb; } /* liste des joueurs, round 5 (Scott 2026-10-21 : « le contour vert de notre profil n'est pas suffisant et trompe sur les PV ») : TON portrait reste plus grand (54 px) mais SANS sur-cercle (l'anneau ne dit que les PV) ; à la place une étiquette « TOI » bleue (la couleur de ton camp sur le plateau) à cheval sur le bas du portrait (.sk-me, posée par skin.js playersRail) et le rang en pastille bleue ; danger : le même filet rouge qui pulse que les autres joueurs ; éliminé : étiquette grise */ body.skin-clean:not(.mobile) #players .score.me { height: 68px; } body.skin-clean:not(.mobile) #players .score.me .shead { width: 54px; height: 54px; } body.skin-clean:not(.mobile) #players .score.me .shp { width: 54px; height: 54px; } body.skin-clean #players .score.me .shead, body.skin-clean #players .score.me.viewing .shead, body.skin-clean #players .score.me.next .shead { box-shadow: 0 0 0 2px rgb(var(--ink)); } body.skin-clean #players .score.me.danger .shead { box-shadow: 0 0 0 1.5px rgb(var(--ink)), 0 0 0 3.5px #ff3d2e; animation: skPlDanger 1.1s ease-in-out infinite; } body.skin-clean.noanim #players .score.me.danger .shead { animation: none; } body.skin-clean #players .score.me.dead .shead { box-shadow: none; } /* round 7 (Scott 2026-10-22 : « un truc qui dépasse sur la gauche… une illustration », variante « I · vert » retenue) : l'ornement de titre de Waven teint en lime (assets/ui/me_ornament.webp, waven/me_mark.py) à gauche du portrait, la pointe vers la gauche ; ses bouts passent DERRIÈRE le portrait (z-index -1 : .shead ne crée pas de contexte d'empilement) ; tailles en % du portrait (54 px ordinateur, 42 px téléphone) ; éliminé : ornement éteint */ body.skin-clean #players .score.me .shead::after { content: ''; position: absolute; left: -48.4%; top: -6.5%; width: 76.9%; height: 113%; z-index: -1; pointer-events: none; background: url(assets/ui/me_ornament.webp) center / 100% 100% no-repeat; } body.skin-clean:not(.mobile) #players { isolation: isolate; } /* sinon l'ornement (z-index -1) passe sous le fondu de #game */ /* téléphone : la colonne de 58 px coupe ce qui dépasse (overflow-y auto) : ornement réduit, 8 px visibles à gauche du portrait */ body.skin-clean.mobile #players .score.me .shead::after { left: -19%; top: 15%; width: 47%; height: 70%; } body.skin-clean #players .score.me.dead .shead::after { filter: grayscale(1) brightness(.7); } body.skin-clean #players .score.me .sk-rk { background: var(--blue); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.35); color: #fff; } body.skin-clean:not(.mobile) #players .score.me .sk-rk { right: -7px; top: -6px; } body.skin-clean.mobile .score.me .shp { color: #8fbaff; } /* version Waven (agent items) : 4 caractéristiques (plus de Sagesse) sur la hauteur des 5 anciennes ; AFFINITÉS */ body.skin-clean:not(.mobile) #stats-list { gap: 5px; } body.skin-clean:not(.mobile) .stat-row { height: 31px; } body.skin-clean:not(.mobile) .sk-aff-pop { width: 286px; margin-left: -143px; } body.skin-clean:not(.mobile) #sk-gear .slot .st { gap: 0 2px; } body.skin-clean .res .rs-pts { bottom: 0; } /* RÈGLES v3 (?v3=1, js/rules_v3.js ; body.rules-v3 posée par main.js) : objets sur les unités (plus de grille d'équipement ni de bouton Affinités), plus de caractéristiques ; éléments en tête du rail des synergies (lignes .el-row) ; palier prismatique (4). */ body.rules-v3 #equip-grid, body.rules-v3 #items > h3:first-of-type, body.rules-v3 #sk-gear, body.rules-v3 #sk-pano { display: none !important; } body.skin-clean .trait[data-tier="4"] .sk-tile { background: conic-gradient(from 200deg, #ff5f6d, #ffd23f, #79d62a, #26a9ff, #c457ff, #ff5f6d); box-shadow: inset 0 0 0 1.5px rgba(var(--ink),.3); } body.skin-clean .trait.el-row .sk-tile img { width: 76%; height: 76%; object-fit: contain; } body.skin-clean .trait.el-row[data-tier="0"] .sk-tile img { filter: grayscale(1); opacity: .55; } body.skin-clean .trait.el-row .sk-nm { color: var(--ec); } body.skin-clean .trait.el-row[data-tier="0"] .sk-nm { color: #8f8a9c; } /* v3, ordinateur : le sac d'anneaux dans la plaque du perso (#sk-bag, skin.js charPlate), 6 × 2 places */ body.rules-v3:not(.mobile) #items .h-res, body.rules-v3 #sets-list { display: none !important; } body.skin-clean.rules-v3:not(.mobile) #sk-bag { position: absolute; left: 360px; top: 6px; width: 176px; display: flex; flex-direction: column; gap: 6px; } /* à la place de l'équipement, à droite des caractéristiques */ body.skin-clean.rules-v3:not(.mobile) #sk-bag .sk-gear-h { display: flex; align-items: center; gap: 10px; } body.skin-clean.rules-v3:not(.mobile) #sk-bag .sk-gear-h .hint { flex: 1; min-width: 0; font: 500 10px/16px Lexend, sans-serif; letter-spacing: 0; text-transform: none; color: #a39c8c; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } body.skin-clean.rules-v3:not(.mobile) #sk-bag .sk-gear-h .sell { margin-left: auto; } body.skin-clean.rules-v3:not(.mobile) #sk-bag #bag-grid { grid-template-columns: repeat(4, 36px); grid-template-rows: repeat(3, 36px); grid-auto-rows: 36px; gap: 6px 10px; height: auto; } body.skin-clean.rules-v3:not(.mobile) #sk-bag .res { width: 36px; height: 36px; } body.skin-clean.rules-v3:not(.mobile) #sk-bag .res img { width: 32px; height: 32px; } body.skin-clean.rules-v3:not(.mobile) #sk-bag .res.empty::after { width: 30px; height: 30px; } /* VARIANTE « PILLS » (&ui=pills, skin.js) : plus de colonnes d'encre sur les côtés de la scène ; chaque ligne des rails porte sa petite plaque d'encre (lisible sur le décor), sans en-têtes « SYNERGIES » / « JOUEURS » (comme TFT : l'icône suffit). */ body.ui-pills #players > h3 { display: none !important; } /* le titre SYNERGIES reste (Scott 2026-10-20) */ body.skin-clean.ui-pills .trait, body.skin-clean.ui-pills .trait.on { background: rgba(var(--ink),.8); box-shadow: inset 0 0 0 1px rgba(255,255,255,.09); border-radius: 9px; padding: 0 9px 0 3px; } body.skin-clean.ui-pills .trait:hover { background: rgba(var(--ink),.92); } body.skin-clean.ui-pills .trait.el-row { padding-left: 3px; } body.skin-clean.ui-pills #traits-list { gap: 4px; } body.skin-clean.ui-pills .score, body.skin-clean.ui-pills .score.me { background: rgba(var(--ink),.8); box-shadow: inset 0 0 0 1px rgba(255,255,255,.09); border-radius: 22px; } body.skin-clean.ui-pills .score:not(.me):hover { background: rgba(var(--ink),.92); } body.skin-clean.ui-pills .score .shead { background: rgba(var(--ink),.6); } body.skin-clean.ui-pills .relic-slot { background: rgba(var(--ink),.8); box-shadow: inset 0 0 0 1px rgba(255,255,255,.09); } /* &ui=pills : les fondus sont dans le FOND de #game (colonnes gauche / droite + vignette elliptique), pas dans un canvas : fond = le décor seul, en préparation comme en mort subite (le dock et la plaque du perso signalent déjà la mort subite) */ body.skin-clean.ui-pills #game, body.skin-clean.ui-pills:not(.mobile) #game, body.skin-clean.ui-pills:not(.mobile) #game.sudden { background: var(--skin-bd, none) var(--skin-bd-pos, center) / var(--skin-bd-size, cover) no-repeat, var(--skin-bd-fog, #1a0d2e); } /* anneaux du sac : badge = glyphe de l'élément, chiffre blanc centré (plus de pastille) ; 2 badges pour un anneau double */ body.skin-clean .res .rs-pts { left: 0; right: 0; bottom: -5px; gap: 0; } body.skin-clean .res .rs-el { position: relative; width: 17px; height: 17px; display: inline-flex; flex: none; } body.skin-clean .res .rs-el img { width: 17px; height: 17px; margin: 0; filter: drop-shadow(0 0 1px rgba(0,0,0,.9)) drop-shadow(0 0 1px rgba(0,0,0,.6)); } body.skin-clean .res .rs-el b { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding-top: 1px; color: #fff; font: 800 10px/1 Lexend, sans-serif; text-shadow: 0 0 2px #000, 0 0 2px #000, 0 1px 1px #000; } /* v3 (plaque du perso) : anneaux de 46 px, 4 × 3 ; caractéristiques resserrées pour leur faire place */ body.skin-clean.rules-v3:not(.mobile) #stats-list { width: 200px; } body.skin-clean.rules-v3:not(.mobile) #d-char.has-points > #stat-points { width: 200px; } body.skin-clean.rules-v3:not(.mobile) #sk-bag { left: 322px; width: 222px; } body.skin-clean.rules-v3:not(.mobile) #sk-bag #bag-grid { grid-template-columns: repeat(4, 46px); grid-template-rows: repeat(3, 46px); grid-auto-rows: 46px; gap: 8px 12px; } body.skin-clean.rules-v3:not(.mobile) #sk-bag .res { width: 46px; height: 46px; } body.skin-clean.rules-v3:not(.mobile) #sk-bag .res img { width: 42px; height: 42px; } body.skin-clean.rules-v3:not(.mobile) #sk-bag .res.empty::after { width: 38px; height: 38px; } body.skin-clean.rules-v3:not(.mobile) #sk-bag .res .rs-el, body.skin-clean.rules-v3:not(.mobile) #sk-bag .res .rs-el img { width: 21px; height: 21px; } body.skin-clean.rules-v3:not(.mobile) #sk-bag .res .rs-el b { font-size: 12px; } body.skin-clean.rules-v3:not(.mobile) #sk-bag .res .rs-pts { bottom: -7px; } /* v3 : la 4e colonne d'anneaux touchait le bord de la plaque : cases de 44 px, sac décalé à gauche */ /* médaillon : caractéristiques 180 px (132 → 312), inventaire 4 × 3 de 322 à 528 (titre à 2 px : la grille démarre à 24 px comme le médaillon) */ body.skin-clean.rules-v3:not(.mobile) #stats-list, body.skin-clean.rules-v3:not(.mobile) #d-char.has-points > #stat-points { width: 180px; } body.skin-clean.rules-v3:not(.mobile) #sk-bag { left: 322px; top: 2px; width: 206px; } body.skin-clean.rules-v3:not(.mobile) #sk-bag #bag-grid { grid-template-columns: repeat(4, 44px); grid-template-rows: repeat(3, 44px); grid-auto-rows: 44px; gap: 12px 10px; } body.skin-clean.rules-v3:not(.mobile) #sk-bag .res { width: 44px; height: 44px; } body.skin-clean.rules-v3:not(.mobile) #sk-bag .res img { width: 40px; height: 40px; } body.skin-clean.rules-v3:not(.mobile) #sk-bag .res.empty::after { width: 36px; height: 36px; } /* v3 : brassard fusionné dans le sac : liseré or (à donner à une unité) */ body.skin-clean .res.brac { box-shadow: inset 0 0 0 2px #ffd23f; border-radius: 50%; } body.skin-clean .res.brac:hover, body.skin-clean .res.brac.sel { border-color: var(--lime); } /* intérêts : petits losanges au-dessus de l'onglet des kamas (N acquis en or sur M au plafond), largeur totale constante */ body.skin-clean .eco-kamas { position: relative; } body.skin-clean .eco-int { position: absolute; left: 0; right: 0; top: -10px; display: flex; justify-content: center; align-items: center; gap: 2px; pointer-events: auto; } body.skin-clean .eco-int i { display: block; width: var(--isz, 5px); height: var(--isz, 5px); transform: rotate(45deg); background: #2b2536; box-shadow: 0 0 0 1px rgba(var(--ink),.9); border-radius: 1px; } body.skin-clean .eco-int i.on { background: var(--gold2); } body.skin-clean.mobile .eco-int { display: none; } /* les losanges d'intérêts se posent sur l'onglet des kamas lui-même (il doit être le contexte de position) */ body.skin-clean:not(.mobile) #d-eco > .eco-kamas { position: relative; } body.skin-clean:not(.mobile) #d-eco > .eco-kamas .eco-int { left: 6px; right: 6px; top: -9px; } /* v3 PC (Scott 2026-10-20) : les affinités en grille 2×2 sous le bloc ARTEFACTS — une case par élément : glyphe, nom, points / palier suivant, jauge vers ce palier ; le cadre prend la couleur du palier atteint (bronze, argent, or) comme les tuiles du rail */ body.skin-clean:not(.mobile) .aff-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 0 0 12px -8px; } body.skin-clean:not(.mobile) .aff-tile { position: relative; display: grid; grid-template-columns: 22px 1fr auto; grid-template-areas: "ic nm v" "bar bar bar"; align-items: center; column-gap: 6px; row-gap: 4px; padding: 6px 8px 6px 7px; border-radius: 9px; background: rgba(var(--ink),.72); box-shadow: inset 0 0 0 1px rgba(255,255,255,.09); cursor: default; } body.skin-clean:not(.mobile) .aff-tile:hover { background: rgba(var(--ink),.9); } body.skin-clean:not(.mobile) .aff-tile img { grid-area: ic; width: 22px; height: 22px; object-fit: contain; } body.skin-clean:not(.mobile) .aff-tile[data-tier="0"] img { filter: grayscale(1); opacity: .55; } body.skin-clean:not(.mobile) .aff-tile .aff-nm { grid-area: nm; font: 700 11px/1 Lexend, sans-serif; color: var(--ec); letter-spacing: .2px; } body.skin-clean:not(.mobile) .aff-tile[data-tier="0"] .aff-nm { color: #8f8a9c; } body.skin-clean:not(.mobile) .aff-tile .aff-v { grid-area: v; font: 700 13px/1 Lexend, sans-serif; color: #ece6d6; font-variant-numeric: tabular-nums; } body.skin-clean:not(.mobile) .aff-tile .aff-v small { font: 600 10px/1 Lexend, sans-serif; color: #8f8a9c; } body.skin-clean:not(.mobile) .aff-tile .aff-bar { grid-area: bar; display: block; height: 4px; border-radius: 2px; background: rgba(255,255,255,.1); overflow: hidden; } body.skin-clean:not(.mobile) .aff-tile .aff-bar i { display: block; height: 100%; background: var(--ec); border-radius: 2px; } body.skin-clean:not(.mobile) .aff-tile[data-tier="1"] { box-shadow: inset 0 0 0 1.5px #c0742e; } body.skin-clean:not(.mobile) .aff-tile[data-tier="2"] { box-shadow: inset 0 0 0 1.5px #c9d3e0; } body.skin-clean:not(.mobile) .aff-tile[data-tier="3"] { box-shadow: inset 0 0 0 1.5px #ffd23f; } body.skin-clean:not(.mobile) .aff-tile[data-tier="3"] .aff-bar i { background: #ffd23f; } body.skin-clean:not(.mobile) .aff-title { margin: 0 0 6px -8px; font: 800 11px/1 Lexend, sans-serif; letter-spacing: 1.6px; text-transform: uppercase; color: #b8b0d0; } /* titre « Affinités » au-dessus des 4 cases (Scott 2026-10-20) */