/* Dragon Ball RPG V10 — direction artistique « Capsule Corp » (feuille chargée en dernier). Identité : interface de laboratoire Capsule Corporation (panneaux blanc cassé et gris métal, cadre anthracite, données comme sur un scouter), traits du manga (titres francs, aplats, cadres asymétriques pour les illustrations), prestige divin réservé aux contenus rares (or, violet profond, motifs géométriques). Portée : les règles de l’interface commencent par #dbrpg-app.st-capsule (spécificité d’identifiant : elles priment sur le socle sans !important) ; celles des fenêtres posées hors de l’application par body.dbrpg-st-capsule. Règles du système : · Couleurs : uniquement via les jetons --c-* ci-dessous (les jetons --m-* et --x-* du socle en dérivent). · Formes : angles coupés (chanfreins) pour ce qui agit, filets fins pour ce qui informe, jamais d’ombre portée BD. · Orange = action. Bleu tech / glacier = donnée, Ki, sélection. Or + violet profond = rare, divin, endgame. · Une seule ombre (--c-lift), réservée à ce qui flotte (fenêtres, menus, notifications). · Les effets et animations de combat (couche fx, techniques, ultimes, transformations) ne sont jamais ciblés ici : on ne change que les cadres, fonds et textes de l’interface, sans toucher aux tailles ni aux positions de l’arène. */ /* Chakra Petch (SIL OFL 1.1, voir assets/fonts/OFL-ChakraPetch.txt), sous-ensemble latin, hébergée localement. */ @font-face{font-family:"DBRPG Tech";src:url("../fonts/chakra-petch-500.woff2") format("woff2");font-weight:400 500;font-style:normal;font-display:swap} @font-face{font-family:"DBRPG Tech";src:url("../fonts/chakra-petch-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap} @font-face{font-family:"DBRPG Tech";src:url("../fonts/chakra-petch-700.woff2") format("woff2");font-weight:700 900;font-style:normal;font-display:swap} /* ===================================================================== 1 · JETONS */ .dbrpg-app.st-capsule,body.dbrpg-st-capsule,.dbrpg-st-capsule .dbrpg-tech-drop{ /* Surfaces de laboratoire */ --c-ground:#e3e6e8; /* fond général */ --c-grid:#cfd6dc; /* trame de plan technique */ --c-grid-major:#bcc6ce; --c-paper:#f5f4f0; /* panneaux */ --c-paper-2:#ecebe6; /* champs, zones secondaires */ --c-paper-3:#dde0e3; /* pistes de jauge, survol */ --c-line:#bcc3ca; /* filets */ --c-line-2:#8e98a2; /* filets marqués */ /* Cadre anthracite */ --c-char:#1a1e23; --c-char-2:#242a31; --c-char-3:#333b44; --c-char-line:#454f5a; --c-on-char:#eef1f4; --c-on-char-2:#a9b3bd; /* Encre */ --c-ink:#14181d; --c-ink-2:#47525d; --c-ink-3:#6c7782; /* Couleurs fonctionnelles */ --c-orange:#ff7a00; /* action */ --c-orange-deep:#c95500; /* action sur fond clair (texte) */ --c-orange-soft:#ffe6cc; --c-blue:#1768d1; /* donnée, sélection */ --c-blue-deep:#0d4c9c; --c-ice:#7fd0f3; /* Ki, scouter */ --c-ice-soft:#e2f4fc; --c-gold:#b8871c; /* prestige */ --c-gold-hi:#f1cf6d; --c-divine:#3b1a6b; /* divin, endgame */ --c-divine-2:#5b2fa0; --c-red:#d0313f; --c-green:#259b51; /* Formes */ --c-cut:10px; /* chanfrein des éléments d’action */ --c-cut-sm:6px; --c-lift:0 18px 40px -18px rgba(20,24,29,.55),0 2px 6px rgba(20,24,29,.12); /* Jetons d’état (redéfinis en mode sombre) */ --c-hi:#ffffff; /* surface éclairée (survol, champs) */ --c-orange-hi:#ff8f26; --c-red-soft:#fff4f5; --c-gold-soft:#fff8ec; --c-strong:var(--c-char); /* filet marqué, contour d’accent */ --c-on-accent:#14181d; /* encre sur orange, glacier, or */ --c-font-tech:"DBRPG Tech","Chakra Petch","Bahnschrift","Arial Narrow",system-ui,sans-serif; --c-font-manga:"DBRPG Display","Bangers",Impact,sans-serif; /* Jetons du socle (manga) */ --m-paper-bg:var(--c-ground);--m-dot:transparent; --m-paper:var(--c-paper);--m-paper-2:var(--c-paper-2);--m-paper-3:var(--c-paper-3); --m-ink:var(--c-ink);--m-ink-2:var(--c-ink-2);--m-ink-3:var(--c-ink-3);--m-blank:#ffffff; --m-violet:var(--c-blue);--m-violet-deep:var(--c-blue-deep);--m-violet-soft:#d7e6f8; --m-pop:var(--c-orange);--m-pop-deep:var(--c-orange-deep);--m-hot:var(--c-red); --m-hp:#33b763;--m-hp-deep:#1f8443;--m-ki:#2b97e6;--m-ki-deep:var(--c-blue);--m-ult:var(--c-orange); --m-danger:var(--c-red);--m-success:var(--c-green);--m-warning:#e08a00; --m-r-commun:#8d969f;--m-r-rare:#1f7ae0;--m-r-super:#7a45d1;--m-r-legend:#d4a017;--m-r-myth:#e2452f; --m-r-divin:linear-gradient(135deg,#3b1a6b,#b8871c 40%,#f1cf6d 55%,#5b2fa0); --m-stroke:1.5px;--m-stroke-thin:1px; --m-shadow:0 1px 0 rgba(20,24,29,.10);--m-shadow-sm:0 1px 0 rgba(20,24,29,.10);--m-shadow-lg:var(--c-lift);--m-shadow-press:none; --m-radius:4px;--m-radius-sm:3px;--m-radius-lg:6px; --m-font-display:var(--c-font-tech); /* Jetons V6.3 (--x-*) */ --x-ink:var(--c-ink);--x-ink-2:var(--c-ink-2);--x-card:var(--c-paper);--x-card-2:var(--c-paper-2);--x-line:var(--c-line-2); --x-shadow:0 1px 0 rgba(20,24,29,.10);--x-display:var(--c-font-tech);--x-radius:4px;--x-stroke:1px; /* Compatibilité V5 */ --dbrpg-accent:var(--c-orange);--dbrpg-accent-strong:var(--c-orange-deep);--dbrpg-text:var(--c-ink);--dbrpg-border:var(--c-line); } .dbrpg-app.st-capsule{color:var(--c-ink)} /* ===================================================================== 2 · FOND ET TEXTURES */ /* Plan d’ingénieur : trame fine tous les 24 px, trait majeur tous les 120 px. */ body.dbrpg-st-capsule,.dbrpg-app.st-capsule{ background-color:var(--c-ground); background-image: linear-gradient(var(--c-grid-major) 1px,transparent 1px),linear-gradient(90deg,var(--c-grid-major) 1px,transparent 1px), linear-gradient(var(--c-grid) 1px,transparent 1px),linear-gradient(90deg,var(--c-grid) 1px,transparent 1px); background-size:120px 120px,120px 120px,24px 24px,24px 24px; background-position:-1px -1px; } #dbrpg-app.st-capsule .dbrpg-hud-content{background:transparent} /* ===================================================================== 3 · TYPOGRAPHIE */ #dbrpg-app.st-capsule{font-family:var(--m-font-body)} /* La couleur des titres n’est pas imposée : le socle met déjà l’encre sur papier et le clair sur les illustrations. */ #dbrpg-app.st-capsule main :is(h1,h2){font-family:var(--c-font-tech);font-weight:700;letter-spacing:.01em;text-transform:uppercase;text-shadow:none;-webkit-text-stroke:0;transform:none} #dbrpg-app.st-capsule main h1{font-size:clamp(1.6rem,3.4vw,2.3rem);line-height:1.05} #dbrpg-app.st-capsule main h2{font-size:clamp(1.25rem,2.6vw,1.65rem);line-height:1.1} #dbrpg-app.st-capsule main h3{font-family:var(--c-font-tech);font-weight:700;letter-spacing:.02em} /* Étiquette technique : repère orange + texte bleu, comme une référence de pièce. */ #dbrpg-app.st-capsule .dbrpg-kicker{display:inline-flex;align-items:center;gap:7px;padding:0;border:0;background:none;color:var(--c-blue-deep);font:600 .7rem/1.2 var(--c-font-tech);letter-spacing:.16em;text-transform:uppercase;transform:none;box-shadow:none} #dbrpg-app.st-capsule .dbrpg-kicker::before{content:"";flex:none;width:12px;height:4px;background:var(--c-orange);clip-path:polygon(0 0,100% 0,calc(100% - 3px) 100%,0 100%)} /* Chiffres : police technique à chasse fixe partout où le jeu affiche des valeurs. */ #dbrpg-app.st-capsule :is(.dbrpg-hud-meter>em,.dbrpg-hud-wallet,.dbrpg-bar-row>b,.dbrpg-stat-chip b,.dbrpg-fz-level,.dbrpg-level){font-family:var(--c-font-tech);font-variant-numeric:tabular-nums} #dbrpg-app.st-capsule .dbrpg-muted{color:var(--c-ink-3)} /* ===================================================================== 4 · BOUTONS */ /* Action principale : orange, angle coupé en haut à droite et en bas à gauche. Au survol, un reflet balaie l’aplat et le bouton se soulève d’un pixel ; à l’appui, il s’enfonce (le mouvement est coupé si le joueur réduit les animations). */ #dbrpg-app.st-capsule .dbrpg-primary,.dbrpg-st-capsule .dbrpg-primary{ border:0;border-radius:0;background-color:var(--c-orange);color:var(--c-on-accent);box-shadow:none; background-image:linear-gradient(110deg,transparent 38%,rgba(255,255,255,.5) 50%,transparent 62%); background-size:260% 100%;background-position:135% 0;background-repeat:no-repeat; clip-path:polygon(0 0,calc(100% - var(--c-cut)) 0,100% var(--c-cut),100% 100%,var(--c-cut) 100%,0 calc(100% - var(--c-cut))); font-family:var(--c-font-tech);font-weight:700;letter-spacing:.06em;text-transform:uppercase;-webkit-text-stroke:0;text-shadow:none; transition:background-color .15s,background-position .6s cubic-bezier(.2,.7,.2,1),transform .16s cubic-bezier(.2,.8,.3,1.4); } #dbrpg-app.st-capsule .dbrpg-primary:hover:not(:disabled),.dbrpg-st-capsule .dbrpg-primary:hover:not(:disabled){background-color:var(--c-orange-hi);background-position:-35% 0;transform:translateY(-1px)} #dbrpg-app.st-capsule .dbrpg-primary:active:not(:disabled),.dbrpg-st-capsule .dbrpg-primary:active:not(:disabled){background-color:var(--c-orange-deep);color:#fff;transform:translateY(1px) scale(.98);box-shadow:none;transition-duration:.06s} #dbrpg-app.st-capsule .dbrpg-primary:disabled,.dbrpg-st-capsule .dbrpg-primary:disabled{background-color:var(--c-paper-3);background-image:none;color:var(--c-ink-3)} /* Action secondaire : contour, remplissage qui glisse de gauche à droite au survol. */ #dbrpg-app.st-capsule .dbrpg-secondary,.dbrpg-st-capsule .dbrpg-secondary{ border:1.5px solid var(--c-strong);border-radius:0;background-color:transparent;color:var(--c-ink);box-shadow:none; background-image:linear-gradient(var(--c-char),var(--c-char));background-size:0 100%;background-position:0 0;background-repeat:no-repeat; font-family:var(--c-font-tech);font-weight:600;letter-spacing:.05em;text-transform:uppercase; transition:background-size .28s cubic-bezier(.2,.8,.2,1),color .2s,transform .16s cubic-bezier(.2,.8,.3,1.4); } #dbrpg-app.st-capsule .dbrpg-secondary:hover:not(:disabled),.dbrpg-st-capsule .dbrpg-secondary:hover:not(:disabled){background-size:100% 100%;color:var(--c-on-char);transform:none} #dbrpg-app.st-capsule .dbrpg-secondary:active:not(:disabled),.dbrpg-st-capsule .dbrpg-secondary:active:not(:disabled){transform:scale(.98);transition-duration:.06s} #dbrpg-app.st-capsule .dbrpg-link,.dbrpg-st-capsule .dbrpg-link{color:var(--c-blue);font-weight:700;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px;transition:text-underline-offset .15s,color .15s} #dbrpg-app.st-capsule .dbrpg-link:hover,.dbrpg-st-capsule .dbrpg-link:hover{text-underline-offset:5px;color:var(--c-orange-deep)} #dbrpg-app.st-capsule :is(.dbrpg-primary,.dbrpg-secondary):focus-visible,.dbrpg-st-capsule :is(.dbrpg-primary,.dbrpg-secondary):focus-visible{outline:2px solid var(--c-blue);outline-offset:2px} /* ===================================================================== 5 · COQUE : BARRE DU HAUT */ #dbrpg-app.st-capsule .dbrpg-hud{ background:var(--c-char);color:var(--c-on-char);border-bottom:0; box-shadow:inset 0 -3px 0 var(--c-orange); /* Règle graduée du scouter le long du bas de la barre */ background-image:repeating-linear-gradient(90deg,var(--c-char-line) 0 1px,transparent 1px 12px); background-size:100% 6px;background-repeat:no-repeat;background-position:0 calc(100% - 3px); } #dbrpg-app.st-capsule .dbrpg-hud-avatar{border-radius:0;padding:3px;background:conic-gradient(var(--c-ice) var(--xp,0%),var(--c-char-3) 0);box-shadow:none;clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,0 100%)} #dbrpg-app.st-capsule .dbrpg-hud-avatar img{border-radius:0;border:0;background:var(--c-char-2)} #dbrpg-app.st-capsule .dbrpg-hud-avatar span{border:0;border-radius:0;background:var(--c-orange);color:var(--c-on-accent);font-family:var(--c-font-tech);font-weight:700} #dbrpg-app.st-capsule .dbrpg-hud-id b{font-family:var(--c-font-tech);font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--c-on-char)} #dbrpg-app.st-capsule .dbrpg-hud-id small{color:var(--c-on-char-2)} #dbrpg-app.st-capsule .dbrpg-hud-xp{border:0;border-radius:0;background:var(--c-char-3);height:4px} #dbrpg-app.st-capsule .dbrpg-hud-xp i{background:var(--c-ice)} #dbrpg-app.st-capsule .dbrpg-hud-meter{color:var(--c-on-char);font-family:var(--c-font-tech);font-weight:600} #dbrpg-app.st-capsule .dbrpg-hud-meter>em{color:var(--c-on-char-2)} #dbrpg-app.st-capsule .dbrpg-hud-meter>i{height:8px;border:0;border-radius:0;background:var(--c-char-3);position:relative} /* Jauges segmentées : un cran tous les 10 %. */ #dbrpg-app.st-capsule .dbrpg-hud-meter>i::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 calc(10% - 1px),var(--c-char) calc(10% - 1px) 10%);pointer-events:none} #dbrpg-app.st-capsule .dbrpg-hud-meter.hp>i>b{background:var(--m-hp)} #dbrpg-app.st-capsule .dbrpg-hud-meter.ki>i>b{background:linear-gradient(90deg,var(--m-ki),var(--c-ice))} #dbrpg-app.st-capsule .dbrpg-hud-quest{border:1px solid var(--c-char-line);border-radius:0;background:var(--c-char-2);color:var(--c-on-char)} #dbrpg-app.st-capsule .dbrpg-hud-quest-text small{color:var(--c-ice)} #dbrpg-app.st-capsule .dbrpg-hud-quest-text b{font-family:var(--c-font-tech);font-weight:700;color:var(--c-on-char)} #dbrpg-app.st-capsule .dbrpg-hud-quest-text em{color:var(--c-on-char-2)} #dbrpg-app.st-capsule .dbrpg-hud-quest-action{border:0;border-radius:0;background:var(--c-orange);color:var(--c-on-accent);box-shadow:none;font-family:var(--c-font-tech);font-weight:700;text-transform:uppercase;letter-spacing:.05em;clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,8px 100%,0 calc(100% - 8px))} #dbrpg-app.st-capsule .dbrpg-hud-wallet{border:1px solid var(--c-char-line);border-radius:0;background:var(--c-char-2);color:var(--c-on-char)} #dbrpg-app.st-capsule .dbrpg-hud-wallet i{border:0;border-radius:0;background:var(--c-gold-hi);color:var(--c-on-accent);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)} #dbrpg-app.st-capsule :is(.dbrpg-hud-points,.dbrpg-hud-help,.dbrpg-hud-menu,.dbrpg-hud-logout,.dbrpg-hud-mail){border:1px solid var(--c-char-line);border-radius:0;background:var(--c-char-2);color:var(--c-on-char);box-shadow:none} #dbrpg-app.st-capsule :is(.dbrpg-hud-help,.dbrpg-hud-menu,.dbrpg-hud-mail):hover{background:var(--c-char-3);border-color:var(--c-ice)} #dbrpg-app.st-capsule .dbrpg-hud-points{background:var(--c-orange);border-color:var(--c-orange);color:var(--c-on-accent)} #dbrpg-app.st-capsule .dbrpg-hud-points.is-talent{background:var(--c-blue);border-color:var(--c-blue);color:#fff} #dbrpg-app.st-capsule .dbrpg-hud-menu{background:var(--c-char-3)} /* Pastilles : losange rouge net, sans contour BD. */ #dbrpg-app.st-capsule .dbrpg-hud-badge,.dbrpg-st-capsule .dbrpg-hud-badge{border:0;border-radius:2px;background:var(--c-red);color:#fff;font-family:var(--c-font-tech);font-weight:700;box-shadow:0 0 0 2px var(--c-char)} #dbrpg-app.st-capsule .dbrpg-hud-badge.is-live{background:var(--c-green);color:#fff} /* ===================================================================== 6 · COQUE : BARRE LATÉRALE (ORDINATEUR) */ #dbrpg-app.st-capsule .dbrpg-rail{background:var(--c-char);border-right:0;color:var(--c-on-char);box-shadow:inset -1px 0 0 var(--c-char-line);scrollbar-color:var(--c-char-3) transparent} #dbrpg-app.st-capsule .dbrpg-nav-item{border:0;border-radius:0;color:var(--c-on-char);transition:background .15s} #dbrpg-app.st-capsule .dbrpg-nav-item:hover{background:var(--c-char-2);transform:none} #dbrpg-app.st-capsule .dbrpg-nav-item>i{border-radius:0;background:transparent;color:var(--c-on-char-2);clip-path:none} #dbrpg-app.st-capsule .dbrpg-nav-item b{font-family:var(--c-font-tech);font-weight:600;letter-spacing:.05em;text-transform:uppercase;font-size:.84rem} #dbrpg-app.st-capsule .dbrpg-nav-item small{color:var(--c-on-char-2)} /* Onglet actif : barre orange à gauche, fond légèrement éclairci, icône orange. */ #dbrpg-app.st-capsule .dbrpg-nav-item.active{background:var(--c-char-2);color:#fff;box-shadow:inset 4px 0 0 var(--c-orange)} #dbrpg-app.st-capsule .dbrpg-nav-item.active>i{background:transparent;color:var(--c-orange)} #dbrpg-app.st-capsule .dbrpg-nav-item.active small{color:var(--c-on-char-2)} #dbrpg-app.st-capsule .dbrpg-nav-section+.dbrpg-nav-section{border-top:1px solid var(--c-char-2)} #dbrpg-app.st-capsule :is(.dbrpg-nav-collapse,.dbrpg-nav-more){border:1px solid var(--c-char-line);border-radius:0;background:transparent;color:var(--c-on-char-2);box-shadow:none} #dbrpg-app.st-capsule :is(.dbrpg-nav-collapse,.dbrpg-nav-more):hover{color:#fff;border-color:var(--c-ice)} /* ===================================================================== 7 · COQUE : BARRE DU BAS (TÉLÉPHONE) */ @media (max-width:820px){ #dbrpg-app.st-capsule .dbrpg-dock{left:0;right:0;bottom:0;border:0;border-radius:0;background:var(--c-char);box-shadow:inset 0 3px 0 var(--c-char-2);padding-top:6px;padding-bottom:calc(6px + env(safe-area-inset-bottom))} #dbrpg-app.st-capsule .dbrpg-dock>button{position:relative;border:0;border-radius:0;background:none;color:var(--c-on-char-2);font-family:var(--c-font-tech);font-weight:600;letter-spacing:.04em;text-transform:uppercase;box-shadow:none} #dbrpg-app.st-capsule .dbrpg-dock>button>i{border:0;border-radius:0;background:none;color:inherit;box-shadow:none} #dbrpg-app.st-capsule .dbrpg-dock>button.active{color:#fff;background:linear-gradient(var(--c-orange),var(--c-orange)) top center/60% 3px no-repeat} #dbrpg-app.st-capsule .dbrpg-dock>button.active>i{color:var(--c-orange)} } /* ===================================================================== 8 · PANNEAUX ET CARTES */ /* Panneau de données : papier, filet fin, coins repérés (équerres) comme sur un écran d’appareil. */ #dbrpg-app.st-capsule :is(.dbrpg-panel,.dbrpg-set-card,.dbrpg-home-todo,.dbrpg-today,.dbrpg-home-summary,.dbrpg-rewards-center,.dbrpg-pg-block){ --tick:var(--c-strong); border:1px solid var(--c-line);border-radius:0;box-shadow:none;background-color:var(--c-paper); /* 1re couche transparente : la lisibilité automatique (contrastPass) lit ainsi la couleur du panneau, pas celle des équerres. */ background-image:linear-gradient(transparent,transparent), linear-gradient(var(--tick),var(--tick)),linear-gradient(var(--tick),var(--tick)), linear-gradient(var(--tick),var(--tick)),linear-gradient(var(--tick),var(--tick)); background-repeat:no-repeat; background-size:0 0,14px 2px,2px 14px,14px 2px,2px 14px; background-position:0 0,left top,left top,right bottom,right bottom; } #dbrpg-app.st-capsule .dbrpg-panel-title{font-family:var(--c-font-tech);font-weight:700;text-transform:uppercase;letter-spacing:.04em} #dbrpg-app.st-capsule .dbrpg-empty{border:1px dashed var(--c-line-2);border-radius:0;background:repeating-linear-gradient(135deg,transparent 0 8px,rgba(20,24,29,.035) 8px 16px);color:var(--c-ink-2)} /* ===================================================================== 9 · JAUGES (PV, KI, XP, RUPTURE) */ #dbrpg-app.st-capsule .dbrpg-bar{border:0;border-radius:0;background:var(--c-char-3);box-shadow:inset 0 0 0 1px var(--c-char-2);position:relative} #dbrpg-app.st-capsule .dbrpg-bar::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 calc(10% - 1px),rgba(26,30,35,.85) calc(10% - 1px) 10%);pointer-events:none} #dbrpg-app.st-capsule .dbrpg-bar>i{border-radius:0} #dbrpg-app.st-capsule .dbrpg-bar-row>span{font-family:var(--c-font-tech);font-weight:600;letter-spacing:.06em;text-transform:uppercase} /* ===================================================================== 10 · RARETÉS */ #dbrpg-app.st-capsule .dbrpg-rarity,.dbrpg-st-capsule .dbrpg-rarity{border-radius:0;font-family:var(--c-font-tech);font-weight:700;letter-spacing:.08em;text-transform:uppercase;clip-path:polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%);padding-left:10px;padding-right:10px} /* ===================================================================== 11 · FENÊTRES ET NOTIFICATIONS */ .dbrpg-st-capsule :is(.dbrpg-confirm-backdrop,.dbrpg-modal-backdrop,.dbrpg-menu-backdrop,.dbrpg-help-backdrop){background:rgba(20,24,29,.72);backdrop-filter:none} .dbrpg-st-capsule :is(.dbrpg-confirm-card,.dbrpg-menu-panel){border:0;border-radius:0;background:var(--c-paper);box-shadow:var(--c-lift);border-top:4px solid var(--c-orange)} .dbrpg-st-capsule .dbrpg-confirm-kicker{color:var(--c-blue-deep);font-family:var(--c-font-tech);font-weight:600;letter-spacing:.16em;text-transform:uppercase} .dbrpg-st-capsule :is(.dbrpg-menu-close){border:1px solid var(--c-line-2);border-radius:0;background:var(--c-paper);box-shadow:none} .dbrpg-st-capsule .dbrpg-menu-head h2{transform:none} .dbrpg-st-capsule .dbrpg-toast{border:0;border-radius:0;background:var(--c-char);color:var(--c-on-char);box-shadow:var(--c-lift),inset 4px 0 0 var(--c-ice);font-weight:700} /* ===================================================================== 12 · COQUE : AJUSTEMENTS */ /* Quête rapide de la barre du haut : le texte s’efface quand la place manque, le bouton reste. */ #dbrpg-app.st-capsule .dbrpg-hud-quest{min-width:0;overflow:hidden} @media (max-width:1440px){#dbrpg-app.st-capsule .dbrpg-hud-quest{flex:none;padding:4px}#dbrpg-app.st-capsule .dbrpg-hud-quest-text{display:none}} /* Prochaine étape (barre latérale) : bloc anthracite à repère orange, sans reflet animé. */ #dbrpg-app.st-capsule .dbrpg-nav-next{border:1px solid var(--c-char-line);border-radius:0;background:var(--c-char-2);color:var(--c-on-char);box-shadow:inset 4px 0 0 var(--c-orange);transform:none} #dbrpg-app.st-capsule .dbrpg-nav-next::after{display:none} #dbrpg-app.st-capsule .dbrpg-nav-next:hover{background:var(--c-char-3);transform:none} #dbrpg-app.st-capsule .dbrpg-nav-next :is(small,em){color:var(--c-ice)} #dbrpg-app.st-capsule .dbrpg-nav-next b{font-family:var(--c-font-tech);font-weight:700;color:#fff} /* ===================================================================== 13 · ACCUEIL — CENTRE DE CONTRÔLE */ /* Fiche du guerrier : portrait dans un cadre coupé, bande orange en biais derrière (touche manga). */ #dbrpg-app.st-capsule .dbrpg-home-summary{position:relative;overflow:hidden} #dbrpg-app.st-capsule .dbrpg-home-character{position:relative} #dbrpg-app.st-capsule .dbrpg-home-character>img{width:92px;height:92px;border:0;border-radius:0;background:var(--c-char-2); clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,16px 100%,0 calc(100% - 16px)); box-shadow:none;outline:0} #dbrpg-app.st-capsule .dbrpg-home-character h1{font-size:clamp(1.8rem,4vw,2.6rem)} #dbrpg-app.st-capsule .dbrpg-home-xp{color:var(--c-ink-2);font-family:var(--c-font-tech);font-weight:600} #dbrpg-app.st-capsule .dbrpg-home-xp>i{height:6px;border:0;border-radius:0;background:var(--c-paper-3)} #dbrpg-app.st-capsule .dbrpg-home-xp>i>b{background:var(--c-blue)} /* Écran de mesure (PV / Ki) : surface anthracite, lecture glacier, comme le cadran d’un scouter. */ #dbrpg-app.st-capsule .dbrpg-home-vitals{padding:12px 14px;background:var(--c-char);color:var(--c-on-char);border:0;border-radius:0;clip-path:polygon(0 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%)} #dbrpg-app.st-capsule .dbrpg-home-vitals .dbrpg-hud-meter{color:var(--c-on-char)} #dbrpg-app.st-capsule .dbrpg-home-vitals .dbrpg-hud-meter>em{color:var(--c-ice)} #dbrpg-app.st-capsule .dbrpg-home-objective{border-color:var(--c-line)} #dbrpg-app.st-capsule .dbrpg-home-objective small{color:var(--c-blue-deep);font-family:var(--c-font-tech);font-weight:600;letter-spacing:.14em;text-transform:uppercase} #dbrpg-app.st-capsule .dbrpg-home-objective>b{font-family:var(--c-font-tech);font-weight:600} /* Plan du jour : bandeau de données, compteur carré. */ #dbrpg-app.st-capsule .dbrpg-plan-card{border:1px solid var(--c-line);border-left:4px solid var(--c-blue);border-radius:0;background:var(--c-paper);box-shadow:none} #dbrpg-app.st-capsule .dbrpg-plan-card.is-done{border-left-color:var(--c-green);background:var(--c-paper)} #dbrpg-app.st-capsule .dbrpg-plan-card small{color:var(--c-blue-deep);font-family:var(--c-font-tech);letter-spacing:.12em;text-transform:uppercase} #dbrpg-app.st-capsule .dbrpg-plan-ring{border:0;border-radius:0;background:conic-gradient(var(--c-green) calc(var(--p)*1%),var(--c-paper-3) 0)} #dbrpg-app.st-capsule .dbrpg-plan-ring b{border-radius:0;background:var(--c-paper);font-family:var(--c-font-tech)} /* Aujourd’hui : modules alignés, filet de statut à gauche. */ #dbrpg-app.st-capsule .dbrpg-today>header h2{display:block;padding:0;background:none;transform:none} #dbrpg-app.st-capsule .dbrpg-today>header>i{height:4px;border:0;border-radius:0;background:var(--c-paper-3)} #dbrpg-app.st-capsule .dbrpg-today>header>i>u{background:var(--c-green)} #dbrpg-app.st-capsule .dbrpg-today-tile{border:1px solid var(--c-line);border-radius:0;background:var(--c-paper-2);color:var(--c-ink);box-shadow:inset 3px 0 0 var(--c-blue);transform:none} #dbrpg-app.st-capsule .dbrpg-today-tile:hover{background:var(--c-hi)} #dbrpg-app.st-capsule .dbrpg-today-tile.is-done{box-shadow:inset 3px 0 0 var(--c-green);opacity:.75} #dbrpg-app.st-capsule .dbrpg-today-tile>span:first-child{border:0;border-radius:0;background:transparent} #dbrpg-app.st-capsule .dbrpg-today-tile b{font-family:var(--c-font-tech);font-weight:700;letter-spacing:.03em} /* À faire maintenant : liste d’instructions, lignes séparées par des filets. */ #dbrpg-app.st-capsule .dbrpg-home-todo>div{gap:0} #dbrpg-app.st-capsule .dbrpg-home-todo-row{border:0;border-bottom:1px solid var(--c-line);border-radius:0;background:transparent;box-shadow:none} #dbrpg-app.st-capsule .dbrpg-home-todo-row:last-child{border-bottom:0} #dbrpg-app.st-capsule .dbrpg-home-todo-row.is-claim{background:var(--c-orange-soft);box-shadow:inset 4px 0 0 var(--c-orange)} #dbrpg-app.st-capsule .dbrpg-home-todo-main:hover{background:rgba(23,104,209,.06)} #dbrpg-app.st-capsule .dbrpg-home-todo-main>span:first-child{border:1px solid var(--c-line-2);border-radius:0;background:var(--c-paper)} #dbrpg-app.st-capsule .dbrpg-home-todo-main b{font-family:var(--c-font-tech);font-weight:700} #dbrpg-app.st-capsule .dbrpg-home-todo-main>i{color:var(--c-orange-deep)} /* Objectifs : modules anthracite à icône glacier (contraste clair / sombre). */ #dbrpg-app.st-capsule .dbrpg-home-goals h2{font-size:1.15rem} #dbrpg-app.st-capsule .dbrpg-home-goals button{border:0;border-radius:0;background:var(--c-char);color:var(--c-on-char);box-shadow:none;clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,0 100%)} #dbrpg-app.st-capsule .dbrpg-home-goals button:hover{background:var(--c-char-3)} #dbrpg-app.st-capsule .dbrpg-home-goals button>i{color:var(--c-ice)} #dbrpg-app.st-capsule .dbrpg-home-goals button b{font-family:var(--c-font-tech);font-weight:600;letter-spacing:.04em;text-transform:uppercase;font-size:.7rem} #dbrpg-app.st-capsule .dbrpg-home-goals .dbrpg-hud-badge{top:4px;right:4px} /* Centre de récompenses */ #dbrpg-app.st-capsule .dbrpg-rewards-center li{border:0;border-bottom:1px solid var(--c-line);border-radius:0;background:transparent;opacity:.6} #dbrpg-app.st-capsule .dbrpg-rewards-center li.is-ready{opacity:1;background:var(--c-hi);box-shadow:inset 4px 0 0 var(--c-orange)} #dbrpg-app.st-capsule .dbrpg-rewards-center li em{font-family:var(--c-font-tech);color:var(--c-orange-deep)} /* ===================================================================== 14 · FENÊTRES HORS APPLICATION */ /* Popups posées directement dans (demandes d’ami, nouveautés…) : même police que le jeu. */ /* Liste fermée : les écrans d’effets posés dans (révélation de technique, territoire, ultimes…) ne sont pas touchés. */ body.dbrpg-st-capsule>:is(.dbrpg-friend-pop,.dbrpg-update-pop,.dbrpg-toasts,.dbrpg-notices,.dbrpg-install-sheet,.dbrpg-install-tab,.dbrpg-guide,.dbrpg-search,.dbrpg-crop-modal,.dbrpg-confirm,.dbrpg-pn,.dbrpg-reward-pop),body.dbrpg-st-capsule #dbrpg-fullscreen-mount>:is(.dbrpg-friend-pop,.dbrpg-update-pop,.dbrpg-toasts,.dbrpg-notices,.dbrpg-install-sheet,.dbrpg-install-tab,.dbrpg-guide,.dbrpg-search,.dbrpg-crop-modal,.dbrpg-confirm,.dbrpg-pn,.dbrpg-reward-pop){font-family:"DBRPG Body","Nunito",system-ui,sans-serif;color:var(--c-ink)} body.dbrpg-st-capsule :is(#dbrpg-fullscreen-mount,body)>:is(.dbrpg-friend-pop,.dbrpg-update-pop){border:0;border-radius:0;background:var(--c-paper);box-shadow:var(--c-lift),inset 0 4px 0 var(--c-orange)} /* ===================================================================== 15 · COMBAT — INTERFACE TACTIQUE */ /* Barre de combat : boutons anthracite carrés. */ #dbrpg-app.st-capsule .dbrpg-combat-focusbar{background:var(--c-char);box-shadow:inset 0 -3px 0 var(--c-orange)} #dbrpg-app.st-capsule .dbrpg-combat-focusbar :is(button,.dbrpg-combat-back,.dbrpg-combat-menu-button,.dbrpg-sfx-toggle){border:1px solid var(--c-char-line);border-radius:0;background:var(--c-char-2);color:var(--c-on-char);box-shadow:none;font-family:var(--c-font-tech);font-weight:600;letter-spacing:.04em} #dbrpg-app.st-capsule .dbrpg-combat-focusbar :is(button,.dbrpg-combat-back,.dbrpg-combat-menu-button):hover{border-color:var(--c-ice)} #dbrpg-app.st-capsule .dbrpg-combat-focusbar span{font-family:var(--c-font-tech);font-weight:600;letter-spacing:.04em;color:var(--c-on-char)} /* Arène : papier technique quadrillé, mire de visée centrée. Seulement à l’état normal : les fonds propres aux effets (ultime, territoire, temps figé, berceuse, Black Flash) gardent leur règle ; is-waiting et is-animating (attente du serveur, coup en cours) gardent le fond Capsule. */ #dbrpg-app.st-capsule .dbrpg-arena:not(:is(.is-domain,.is-domain-opening,.is-lullaby,.is-time-stopped,.is-ultimate-cinematic,.is-ultimate-impact,.is-blackflash)){ border:0;border-radius:0;box-shadow:inset 0 0 0 1px var(--c-line-2); background: radial-gradient(circle at 50% 62%,transparent 0 21%,rgba(23,104,209,.16) 21.2% 21.6%,transparent 21.8% 37%,rgba(23,104,209,.11) 37.2% 37.6%,transparent 37.8%), linear-gradient(90deg,transparent calc(50% - .5px),rgba(23,104,209,.14) calc(50% - .5px) calc(50% + .5px),transparent calc(50% + .5px)), linear-gradient(rgba(23,104,209,.07) 1px,transparent 1px) 0 0/28px 28px, linear-gradient(90deg,rgba(23,104,209,.07) 1px,transparent 1px) 0 0/28px 28px, linear-gradient(180deg,#f8f7f3 0%,#eceff1 64%,#dfe4e8 64.3%,#e9edf0 100%); } #dbrpg-app.st-capsule .dbrpg-arena-caption{border:0;border-radius:0;background:var(--c-paper);box-shadow:var(--c-lift),inset 4px 0 0 var(--c-blue);font-family:var(--c-font-tech);font-weight:600} #dbrpg-app.st-capsule .dbrpg-arena-caption.tone-enemy{box-shadow:var(--c-lift),inset 4px 0 0 var(--c-red);background:var(--c-red-soft)} #dbrpg-app.st-capsule .dbrpg-arena-caption.tone-companion{box-shadow:var(--c-lift),inset 4px 0 0 var(--c-ice);background:var(--c-ice-soft)} #dbrpg-app.st-capsule .dbrpg-arena-caption.tone-ultimate{box-shadow:var(--c-lift),inset 4px 0 0 var(--c-orange);background:var(--c-orange-soft)} #dbrpg-app.st-capsule .dbrpg-arena-tools>button{border:1px solid var(--c-char);border-radius:0;background:var(--c-char);color:var(--c-on-char);box-shadow:none;font-family:var(--c-font-tech);font-weight:600;letter-spacing:.03em} #dbrpg-app.st-capsule .dbrpg-arena-tools>button.active{background:var(--c-orange);border-color:var(--c-orange);color:var(--c-on-accent)} /* Combattants : cadre carré au filet anthracite (les halos d’état — transformation, bouclier… — restent ceux du jeu). */ #dbrpg-app.st-capsule .dbrpg-fighter-img{border-radius:0;border-color:var(--c-strong)} #dbrpg-app.st-capsule .dbrpg-fighter h3{font-family:var(--c-font-tech);font-weight:700;letter-spacing:.02em} #dbrpg-app.st-capsule .dbrpg-versus{font-family:var(--c-font-manga);color:var(--c-orange);-webkit-text-stroke:1.5px var(--c-ink);text-shadow:3px 3px 0 var(--c-ink)} #dbrpg-app.st-capsule .dbrpg-versus small{font-family:var(--c-font-tech);-webkit-text-stroke:0;text-shadow:none;color:var(--c-ink-2)} #dbrpg-app.st-capsule .dbrpg-intent{border:0;border-radius:0;box-shadow:0 0 0 1.5px var(--c-ink);font-family:var(--c-font-tech);font-weight:700;letter-spacing:.03em;clip-path:none} /* Centrage sans transform : l’animation de rebond du socle remplace le transform et décalait la bulle à droite. */ #dbrpg-app.st-capsule .dbrpg-fighter.enemy>.dbrpg-intent{left:0;right:0;width:max-content;max-width:100%;margin:0 auto;overflow:hidden;text-overflow:ellipsis} #dbrpg-app.st-capsule .dbrpg-type-chip{border-radius:0} /* Console d’actions : touches carrées, icône bleue, intitulé technique. */ #dbrpg-app.st-capsule .dbrpg-combat-actions>button{border:1px solid var(--c-line-2);border-radius:0;background:var(--c-paper);color:var(--c-ink);box-shadow:inset 0 -3px 0 var(--c-paper-3);transform:none} #dbrpg-app.st-capsule .dbrpg-combat-actions>button:hover:not(:disabled){background:var(--c-hi);border-color:var(--c-strong);box-shadow:inset 0 -3px 0 var(--c-blue);transform:none} #dbrpg-app.st-capsule .dbrpg-combat-actions>button:active:not(:disabled){box-shadow:inset 0 2px 0 var(--c-paper-3);transform:none} #dbrpg-app.st-capsule .dbrpg-combat-actions>button .dbrpg-icon{color:var(--c-blue)} #dbrpg-app.st-capsule .dbrpg-combat-actions>button b{font-family:var(--c-font-tech);font-weight:700;letter-spacing:.03em;text-transform:uppercase;font-size:.95rem} #dbrpg-app.st-capsule .dbrpg-combat-actions>button[data-action="attack"],#dbrpg-app.st-capsule .dbrpg-combat-actions>button.dbrpg-ultimate-trigger.is-ready{background:var(--c-orange);border-color:var(--c-orange-deep);box-shadow:inset 0 -3px 0 var(--c-orange-deep)} #dbrpg-app.st-capsule .dbrpg-combat-actions>button[data-action="attack"],#dbrpg-app.st-capsule .dbrpg-combat-actions>button.dbrpg-ultimate-trigger.is-ready, #dbrpg-app.st-capsule .dbrpg-combat-actions>button[data-action="attack"] :is(.dbrpg-icon,small,b),#dbrpg-app.st-capsule .dbrpg-combat-actions>button.dbrpg-ultimate-trigger.is-ready :is(.dbrpg-icon,small,b){color:var(--c-on-accent)} #dbrpg-app.st-capsule .dbrpg-combat-actions>button:disabled{background:var(--c-paper-2);border-color:var(--c-line);box-shadow:none;opacity:.6} /* Journal du combat : relevé chronologique. */ #dbrpg-app.st-capsule .dbrpg-combat-log{border:1px solid var(--c-line);border-radius:0;background:var(--c-paper);box-shadow:none} #dbrpg-app.st-capsule .dbrpg-log-entry{border:0;border-left:3px solid var(--c-line-2);border-bottom:1px solid var(--c-line);border-radius:0;background:transparent;box-shadow:none} #dbrpg-app.st-capsule .dbrpg-log-entry b{font-family:var(--c-font-tech);font-weight:700} #dbrpg-app.st-capsule .dbrpg-log-entry em{border-radius:0} @media (min-width:821px){#dbrpg-app.st-capsule .dbrpg-arena-tools{left:12px;right:auto}} /* l’intention de l’ennemi (en haut à droite) reste visible */ /* ===================================================================== 16 · ONGLETS, FILTRES ET CHAMPS */ /* Sélecteurs segmentés : touches carrées ; l’onglet actif passe en anthracite souligné d’orange. */ #dbrpg-app.st-capsule :is(.dbrpg-st-tabs,.dbrpg-tw3-tabs,.dbrpg-rf-tabs,.dbrpg-ally-filter,.dbrpg-ap-tabs,.dbrpg-inv-tabs,.dbrpg-cx-filters,.dbrpg-quest-tabs,.dbrpg-tl-tabs,.dbrpg-shop-filters,.dbrpg-inv-filters,.dbrpg-ms-chips,.dbrpg-pg-chips,.dbrpg-ld-pills,.dbrpg-story-tabs,.dbrpg-dungeon-tabs)>button, #dbrpg-app.st-capsule :is([data-story-tab],[data-dungeon-filter]){ border:1px solid var(--c-line-2);border-radius:0;background:var(--c-paper);color:var(--c-ink);box-shadow:none;transform:none; font-family:var(--c-font-tech);font-weight:600;letter-spacing:.03em} #dbrpg-app.st-capsule :is(.dbrpg-st-tabs,.dbrpg-tw3-tabs,.dbrpg-rf-tabs,.dbrpg-ally-filter,.dbrpg-ap-tabs,.dbrpg-inv-tabs,.dbrpg-cx-filters,.dbrpg-quest-tabs,.dbrpg-tl-tabs,.dbrpg-shop-filters,.dbrpg-inv-filters,.dbrpg-ms-chips,.dbrpg-pg-chips,.dbrpg-ld-pills,.dbrpg-story-tabs,.dbrpg-dungeon-tabs)>button:hover, #dbrpg-app.st-capsule :is([data-story-tab],[data-dungeon-filter]):hover{border-color:var(--c-strong);background:var(--c-hi)} #dbrpg-app.st-capsule :is(.dbrpg-st-tabs,.dbrpg-tw3-tabs,.dbrpg-rf-tabs,.dbrpg-ally-filter,.dbrpg-ap-tabs,.dbrpg-inv-tabs,.dbrpg-cx-filters,.dbrpg-quest-tabs,.dbrpg-tl-tabs,.dbrpg-shop-filters,.dbrpg-inv-filters,.dbrpg-ms-chips,.dbrpg-pg-chips,.dbrpg-ld-pills,.dbrpg-story-tabs,.dbrpg-dungeon-tabs)>button:is(.is-active,.active,[aria-pressed="true"]), #dbrpg-app.st-capsule :is([data-story-tab],[data-dungeon-filter]).is-active{ border-color:var(--c-strong);background:var(--c-char);color:#fff;box-shadow:inset 0 -3px 0 var(--c-orange)} #dbrpg-app.st-capsule :is(.dbrpg-st-tabs,.dbrpg-tw3-tabs,.dbrpg-rf-tabs,.dbrpg-ally-filter,.dbrpg-ap-tabs,.dbrpg-inv-tabs,.dbrpg-cx-filters,.dbrpg-quest-tabs,.dbrpg-tl-tabs,.dbrpg-shop-filters,.dbrpg-inv-filters,.dbrpg-story-tabs,.dbrpg-dungeon-tabs)>button b:last-child:not(:only-child), #dbrpg-app.st-capsule :is([data-story-tab],[data-dungeon-filter]) b:last-child:not(:only-child){border:0;border-radius:0;background:var(--c-paper-3);color:var(--c-ink);font-family:var(--c-font-tech)} #dbrpg-app.st-capsule :is(.dbrpg-st-tabs,.dbrpg-tw3-tabs,.dbrpg-rf-tabs,.dbrpg-ally-filter,.dbrpg-ap-tabs,.dbrpg-inv-tabs,.dbrpg-cx-filters,.dbrpg-quest-tabs,.dbrpg-tl-tabs,.dbrpg-shop-filters,.dbrpg-inv-filters,.dbrpg-story-tabs,.dbrpg-dungeon-tabs)>button:is(.is-active,.active,[aria-pressed="true"]) b:last-child:not(:only-child), #dbrpg-app.st-capsule :is([data-story-tab],[data-dungeon-filter]).is-active b:last-child:not(:only-child){background:var(--c-orange);color:var(--c-on-accent)} /* Champs : fond blanc, filet net, focus bleu. */ #dbrpg-app.st-capsule :is(input[type="search"],input[type="text"],input[type="number"],input[type="email"],input[type="password"],select,textarea), body.dbrpg-st-capsule .dbrpg-confirm :is(input,select,textarea){ border:1px solid var(--c-line-2);border-radius:0;background:var(--c-hi);color:var(--c-ink);box-shadow:none;font-family:inherit} #dbrpg-app.st-capsule :is(input,select,textarea):focus-visible{outline:2px solid var(--c-blue);outline-offset:0;border-color:var(--c-blue)} #dbrpg-app.st-capsule input[type="range"]{accent-color:var(--c-orange)} #dbrpg-app.st-capsule input[type="checkbox"]{accent-color:var(--c-blue)} /* Pastilles d’information (« chips ») : étiquettes rectangulaires. */ #dbrpg-app.st-capsule :is(.dbrpg-stat-chip,.dbrpg-hero-chips>*,.dbrpg-status-chips>*,.dbrpg-confirm-chips>*,.dbrpg-tw2-chips>*,.dbrpg-echo-skill-chips>*){border-radius:0} #dbrpg-app.st-capsule .dbrpg-stat-chip{border:1px solid var(--c-line);background:var(--c-paper-2);box-shadow:none} /* ===================================================================== 17 · PALETTE DES RARETÉS */ /* Commun acier, rare bleu tech, épique violet, légendaire or, mythique rouge orangé, divin violet profond et or. */ .dbrpg-st-capsule .rarity-commun{--r:#8d969f;--r-2:#d5dade} .dbrpg-st-capsule .rarity-rare{--r:#1f7ae0;--r-2:#a9cdf5} .dbrpg-st-capsule :is(.rarity-epique,.rarity-super-rare){--r:#7a45d1;--r-2:#cdb5f2} .dbrpg-st-capsule .rarity-legendaire{--r:#d4a017;--r-2:#f3dc8a} .dbrpg-st-capsule .rarity-mythique{--r:#e2452f;--r-2:#f7b3a6} .dbrpg-st-capsule .rarity-divin{--r:#5b2fa0;--r-2:#f1cf6d} /* ===================================================================== 18 · FENÊTRES : CONTENU */ .dbrpg-st-capsule .dbrpg-confirm :is(h1,h2,h3){font-family:var(--c-font-tech);font-weight:700;font-style:normal;letter-spacing:.01em;text-transform:uppercase;color:var(--c-ink);transform:none;text-shadow:none;-webkit-text-stroke:0} .dbrpg-st-capsule .dbrpg-aff-pick{border:1px solid var(--c-line-2);border-top:4px solid var(--aff,var(--c-line-2));border-radius:0;background:var(--c-paper);box-shadow:none} .dbrpg-st-capsule .dbrpg-aff-pick:hover{background:var(--c-hi);border-color:var(--c-strong)} .dbrpg-st-capsule .dbrpg-aff-icon{border-radius:0} /* ===================================================================== 19 · BANDEAUX DE MODE ET GUIDES */ #dbrpg-app.st-capsule .dbrpg-mode-banner{border:0;border-radius:0;box-shadow:none;clip-path:polygon(0 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%)} #dbrpg-app.st-capsule .dbrpg-guide-chip{border:1px solid var(--c-line-2);border-radius:0;background:var(--c-paper);color:var(--c-ink);box-shadow:none;font-family:var(--c-font-tech);font-weight:600} #dbrpg-app.st-capsule .dbrpg-guide-chip:hover{border-color:var(--c-strong);background:var(--c-hi)} #dbrpg-app.st-capsule .dbrpg-modehead{border:0;border-bottom:1px solid var(--c-line);border-radius:0;background:transparent;box-shadow:none} #dbrpg-app.st-capsule .dbrpg-modehead-back{border:1px solid var(--c-line-2);border-radius:0;background:var(--c-paper);color:var(--c-ink);box-shadow:none;font-family:var(--c-font-tech);font-weight:600} #dbrpg-app.st-capsule .dbrpg-modehead>b{font-family:var(--c-font-tech);font-weight:700;text-transform:uppercase;letter-spacing:.03em} #dbrpg-app.st-capsule .dbrpg-mhub-head>i{border:0;border-radius:0;background:var(--c-char);color:var(--c-orange);box-shadow:none;clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,0 100%)} #dbrpg-app.st-capsule .dbrpg-mcard{border:1px solid var(--c-line-2);border-radius:0;box-shadow:none;clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,0 100%)} #dbrpg-app.st-capsule .dbrpg-mcard:hover{border-color:var(--c-strong);transform:none;box-shadow:inset 4px 0 0 var(--c-orange)} #dbrpg-app.st-capsule .dbrpg-mcard-text b{font-family:var(--c-font-tech);font-weight:700;text-transform:uppercase;letter-spacing:.02em} /* ===================================================================== 20 · QUÊTES — JOURNAL D’AVENTURE */ #dbrpg-app.st-capsule .dbrpg-st-saga div{height:6px;border:0;border-radius:0;background:var(--c-paper-3)} #dbrpg-app.st-capsule .dbrpg-st-saga i{background:var(--c-orange)} #dbrpg-app.st-capsule .dbrpg-st-saga small{font-family:var(--c-font-tech);color:var(--c-blue-deep)} /* Quête en cours : ordre de mission (anthracite, illustration coupée en biais, titre manga). */ #dbrpg-app.st-capsule .dbrpg-st-feature{border:0;border-radius:0;box-shadow:none;color:var(--c-on-char); background:linear-gradient(transparent,transparent),linear-gradient(90deg,var(--c-orange) 0 6px,transparent 6px), linear-gradient(rgba(127,208,243,.06) 1px,transparent 1px) 0 0/22px 22px,linear-gradient(90deg,rgba(127,208,243,.06) 1px,transparent 1px) 0 0/22px 22px,var(--c-char)} #dbrpg-app.st-capsule .dbrpg-st-feature-art{border-right:0;background:var(--c-char-2);clip-path:polygon(0 0,100% 0,82% 100%,0 100%)} #dbrpg-app.st-capsule .dbrpg-st-feature-body h3{font-family:var(--c-font-manga);font-weight:400;font-size:clamp(2rem,4.4vw,2.9rem);letter-spacing:.03em;color:var(--c-orange);text-shadow:none;text-transform:none} #dbrpg-app.st-capsule .dbrpg-st-feature-body p{color:var(--c-on-char-2)} #dbrpg-app.st-capsule .dbrpg-st-chip{border-radius:0;background:var(--c-ice);color:var(--c-on-accent);font-family:var(--c-font-tech);font-weight:700;letter-spacing:.1em;text-transform:uppercase} #dbrpg-app.st-capsule .dbrpg-st-objective{border-radius:0;background:var(--c-char-2);border-left:3px solid var(--c-ice);color:var(--c-on-char)} #dbrpg-app.st-capsule .dbrpg-st-go{border:0;border-radius:0;background:var(--c-orange);color:var(--c-on-accent);box-shadow:none;font-family:var(--c-font-tech);font-weight:700;font-size:1.05rem;letter-spacing:.05em;text-transform:uppercase; clip-path:polygon(0 0,calc(100% - var(--c-cut)) 0,100% var(--c-cut),100% 100%,var(--c-cut) 100%,0 calc(100% - var(--c-cut)))} #dbrpg-app.st-capsule .dbrpg-st-go:hover{background:var(--c-orange-hi)} #dbrpg-app.st-capsule .dbrpg-st-go:active{transform:none;box-shadow:none;background:var(--c-orange-deep);color:#fff} /* Arcs : intercalaires du journal. */ #dbrpg-app.st-capsule .dbrpg-st-arc{border:1px solid var(--c-line);border-radius:0;background:var(--c-paper);box-shadow:none} #dbrpg-app.st-capsule .dbrpg-st-arc :is(b,strong,em){font-family:var(--c-font-tech)} #dbrpg-app.st-capsule .dbrpg-st-arc-icon{border-radius:0} #dbrpg-app.st-capsule .dbrpg-st-arc-group>header,#dbrpg-app.st-capsule .dbrpg-st-arc-group>h3,#dbrpg-app.st-capsule .dbrpg-st-arc-group>button{border:0;border-radius:0;background:var(--c-char);color:var(--c-on-char);box-shadow:inset 4px 0 0 var(--c-orange)} /* Entrées du journal : page réglée, vignette carrée. */ #dbrpg-app.st-capsule .dbrpg-st-card{border:1px solid var(--c-line);border-radius:0;box-shadow:none; background:repeating-linear-gradient(transparent 0 23px,rgba(23,104,209,.07) 23px 24px),var(--c-paper)} #dbrpg-app.st-capsule .dbrpg-st-card:hover{border-color:var(--c-strong)} #dbrpg-app.st-capsule .dbrpg-st-card-art{border:0;border-radius:0;clip-path:polygon(0 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%)} #dbrpg-app.st-capsule .dbrpg-st-card-body h4{font-family:var(--c-font-manga);font-weight:400;letter-spacing:.03em} #dbrpg-app.st-capsule .dbrpg-st-card-body small{font-family:var(--c-font-tech);color:var(--c-blue-deep)} #dbrpg-app.st-capsule .dbrpg-st-lock{border:1px dashed var(--c-line-2);border-radius:0;background:transparent;color:var(--c-ink-3);box-shadow:none} /* Règle générale : un fond décoré par des dégradés commence par une couche transparente, sinon la lisibilité automatique (contrastPass) lit la couleur du premier dégradé au lieu de celle du fond. */ #dbrpg-app.st-capsule .dbrpg-st-arc-group>header b{font-family:var(--c-font-tech);font-weight:700;text-transform:uppercase;letter-spacing:.05em} #dbrpg-app.st-capsule .dbrpg-st-arc-group>header em{border-radius:0;background:var(--c-orange);color:var(--c-on-accent);font-family:var(--c-font-tech)} #dbrpg-app.st-capsule .dbrpg-st-arc-group>header i{border-radius:0;background:var(--c-char-3)} #dbrpg-app.st-capsule .dbrpg-st-arc-group>header i u{background:var(--c-orange)} /* ===================================================================== 21 · TOUR DU TEMPS — INTERFACE DIMENSIONNELLE */ /* Anneaux concentriques fins sur anthracite : la salle de l’Esprit et du Temps vue comme un instrument. */ #dbrpg-app.st-capsule .dbrpg-tw3-hero{border:0;border-radius:0;box-shadow:none;color:var(--c-on-char); background:linear-gradient(transparent,transparent), repeating-radial-gradient(circle at 88% 10%,transparent 0 26px,rgba(127,208,243,.10) 26px 27px), linear-gradient(135deg,var(--c-char) 0%,#20283a 100%);background-color:var(--c-char)} #dbrpg-app.st-capsule .dbrpg-tw3-badge{border-radius:0;background:var(--c-ice);color:var(--c-on-accent);font-family:var(--c-font-tech);letter-spacing:.1em} #dbrpg-app.st-capsule .dbrpg-tw3-ring{border-radius:50%;background:radial-gradient(var(--c-char) 58%,transparent 59%),conic-gradient(var(--c-ice) calc(var(--p)*1%),rgba(255,255,255,.12) 0);box-shadow:none} #dbrpg-app.st-capsule .dbrpg-tw3-cta{border:0;border-radius:0;background:var(--c-orange);color:var(--c-on-accent);box-shadow:none;font-family:var(--c-font-tech);font-weight:700;text-transform:uppercase;letter-spacing:.05em; clip-path:polygon(0 0,calc(100% - var(--c-cut)) 0,100% var(--c-cut),100% 100%,var(--c-cut) 100%,0 calc(100% - var(--c-cut)))} #dbrpg-app.st-capsule .dbrpg-tw3-cta.is-alt{background:var(--c-paper);color:var(--c-ink);box-shadow:inset 0 0 0 1.5px var(--c-strong)} #dbrpg-app.st-capsule .dbrpg-tw3-card{border:1px solid var(--c-line);border-radius:0;box-shadow:none} #dbrpg-app.st-capsule .dbrpg-tw-reset{border:1px solid var(--c-line-2);border-radius:0;background:var(--c-paper);box-shadow:inset 4px 0 0 var(--c-ice)} /* ===================================================================== 22 · TALENTS, MAÎTRISE, PROGRESSION */ #dbrpg-app.st-capsule .dbrpg-tl-points{border:0;border-radius:0;background:var(--c-char);color:var(--c-on-char);box-shadow:none;transform:none;clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,0 100%)} #dbrpg-app.st-capsule .dbrpg-tl-points :is(b,strong){font-family:var(--c-font-tech);color:var(--c-orange)} #dbrpg-app.st-capsule .dbrpg-tl-notice{border-radius:0;background:var(--c-orange-soft);box-shadow:inset 4px 0 0 var(--c-orange)} #dbrpg-app.st-capsule .dbrpg-tl-plus{border-radius:0;background:var(--c-orange);color:var(--c-on-accent);box-shadow:none} /* Maîtrise : archives et distinctions (médaille dorée = prestige). */ #dbrpg-app.st-capsule .dbrpg-ms-hero{border:0;border-radius:0;box-shadow:none;color:var(--c-on-char);background:linear-gradient(transparent,transparent),linear-gradient(135deg,var(--c-char),#2b2a33);background-color:var(--c-char)} #dbrpg-app.st-capsule .dbrpg-ms-rank{border:0;border-radius:0;box-shadow:none;color:var(--c-on-accent);background:linear-gradient(135deg,var(--c-gold-hi),var(--c-gold));clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%)} #dbrpg-app.st-capsule .dbrpg-ms-card{border:1px solid var(--c-line);border-left:4px solid var(--tier);border-radius:0;background:var(--c-paper);box-shadow:none} #dbrpg-app.st-capsule .dbrpg-ms-card.is-ready{border-color:var(--c-green);border-left-color:var(--c-green);box-shadow:inset 0 0 0 1px var(--c-green)} #dbrpg-app.st-capsule .dbrpg-pg-hero{border:1px solid var(--c-line);border-radius:0;box-shadow:none;background:linear-gradient(transparent,transparent),linear-gradient(90deg,var(--c-blue) 0 5px,transparent 5px),var(--c-paper)} #dbrpg-app.st-capsule .dbrpg-cx-head{border:1px solid var(--c-line);border-radius:0;box-shadow:none;background:linear-gradient(transparent,transparent),linear-gradient(90deg,var(--c-blue) 0 5px,transparent 5px),var(--c-paper)} #dbrpg-app.st-capsule .dbrpg-ap-banner{border-bottom:0} /* ===================================================================== 23 · BOUTIQUES — CENTRE D’ÉCHANGES */ #dbrpg-app.st-capsule .dbrpg-echo2-hero{border:0;border-radius:0;box-shadow:none;color:var(--c-on-char); background:linear-gradient(transparent,transparent),linear-gradient(rgba(127,208,243,.07) 1px,transparent 1px) 0 0/20px 20px,linear-gradient(90deg,rgba(127,208,243,.07) 1px,transparent 1px) 0 0/20px 20px,var(--c-char)} #dbrpg-app.st-capsule .dbrpg-echo-buy{border:0;border-radius:0;background:var(--c-orange);color:var(--c-on-accent);box-shadow:none;font-family:var(--c-font-tech);font-weight:700;text-transform:uppercase; clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,8px 100%,0 calc(100% - 8px))} #dbrpg-app.st-capsule .dbrpg-echo-buy:disabled{background:var(--c-paper-3);color:var(--c-ink-3)} /* ===================================================================== 24 · DIVERS SIGNALÉS PAR LE BANC */ #dbrpg-app.st-capsule .dbrpg-ally-mini-pts{border:0;border-radius:0;background:var(--c-orange);color:var(--c-on-accent);font-family:var(--c-font-tech)} #dbrpg-app.st-capsule .dbrpg-coop-mode{border:1px solid var(--c-line-2);border-radius:0;box-shadow:none} #dbrpg-app.st-capsule .dbrpg-coop-mode.is-active{background:var(--c-char);color:var(--c-on-char);box-shadow:inset 0 -3px 0 var(--c-orange)} #dbrpg-app.st-capsule .dbrpg-coop-target.is-selected{background:var(--c-ice-soft);box-shadow:inset 0 0 0 2px var(--c-blue)} #dbrpg-app.st-capsule .dbrpg-form-mbar{border:1px solid var(--c-line);border-radius:0;background:var(--c-paper-2)} #dbrpg-app.st-capsule .dbrpg-aff-card{border:1px solid var(--c-line-2);border-top:6px solid var(--aff);border-radius:0;box-shadow:none} #dbrpg-app.st-capsule .dbrpg-aff-card.is-current{box-shadow:inset 0 0 0 2px var(--aff)} /* Titres de joueur : le doré reste réservé au prestige, sans contour BD. */ .dbrpg-st-capsule .dbrpg-cos-title{border:0;border-radius:0;background:linear-gradient(135deg,var(--c-gold-hi),var(--c-gold));color:var(--c-on-accent);box-shadow:none;clip-path:polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%);padding-left:10px;padding-right:10px} #dbrpg-app.st-capsule .dbrpg-where{border:1px solid var(--c-line-2);border-radius:0;background:var(--c-ice-soft);color:var(--c-ink);box-shadow:none} #dbrpg-app.st-capsule .dbrpg-where:hover{background:var(--c-ice);border-color:var(--c-strong)} #dbrpg-app.st-capsule .dbrpg-fz-cta{border-radius:0;box-shadow:none} #dbrpg-app.st-capsule :is(.dbrpg-dg-card,.dbrpg-duo-card,.dbrpg-duo-mate,.dbrpg-ob-card,.dbrpg-ob-chest,.dbrpg-gain,.dbrpg-nav-tile,.dbrpg-training-source-icon){border-radius:0;box-shadow:none} /* Cartes à cadre de rareté : on garde leur anneau coloré (box-shadow), on retire seulement l’arrondi. */ #dbrpg-app.st-capsule :is(.dbrpg-cx-album,.dbrpg-tw3-ally,.dbrpg-ally-mini,.dbrpg-cos-portrait,.dbrpg-technique-card,.dbrpg-item-icon,.dbrpg-technique-icon){border-radius:0} /* ===================================================================== 25 · RELIQUATS SIGNALÉS PAR LE BANC */ /* Pastille « récompense » : le socle la force en jaune avec !important ; seul !important peut la reprendre. */ .dbrpg-st-capsule .dbrpg-hud-badge.kind-reward{background:var(--c-orange)!important;color:var(--c-on-accent)!important;border-color:transparent!important} .dbrpg-st-capsule .dbrpg-badge-legend i.kind-reward{background:var(--c-orange)} #dbrpg-app.st-capsule .dbrpg-tl-hero h2{color:var(--c-orange);font-family:var(--c-font-manga);font-weight:400;text-shadow:none;text-transform:none} #dbrpg-app.st-capsule .dbrpg-auto-transform button.is-on{background:var(--c-orange);color:var(--c-on-accent)} #dbrpg-app.st-capsule .dbrpg-pg-list li.is-best{background:var(--c-gold-soft);border-color:var(--c-gold);box-shadow:inset 4px 0 0 var(--c-gold)} #dbrpg-app.st-capsule .dbrpg-pg-list.is-issues li.is-high{border-color:var(--c-red);box-shadow:inset 4px 0 0 var(--c-red)} #dbrpg-app.st-capsule .dbrpg-pg-chips u.is-xp{background:var(--c-blue)} #dbrpg-app.st-capsule .dbrpg-form-pips em.is-on{background:var(--c-blue)} #dbrpg-app.st-capsule .dbrpg-form-mbar.is-max .dbrpg-form-pips em.is-on{background:var(--c-gold-hi);color:var(--c-on-accent)} #dbrpg-app.st-capsule .dbrpg-tl-pips i.is-on{background:var(--c-blue)} #dbrpg-app.st-capsule .dbrpg-boss-mech .is-ult{background:var(--c-orange);color:var(--c-on-accent)} #dbrpg-app.st-capsule .dbrpg-aff-chart{border-radius:0;box-shadow:none} #dbrpg-app.st-capsule .dbrpg-pg-hero{box-shadow:none} /* ===================================================================== 26 · INVOCATIONS — PORTAIL DIMENSIONNEL */ /* Bandeaux illustrés des modes : titres clairs sur l’image, coin coupé. */ #dbrpg-app.st-capsule .dbrpg-mode-hero{border:0;border-radius:0;box-shadow:none;background-color:var(--c-char);clip-path:polygon(0 0,100% 0,100% calc(100% - 20px),calc(100% - 20px) 100%,0 100%)} #dbrpg-app.st-capsule .dbrpg-mode-hero :is(h1,h2,p){color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.65)} /* Sanctuaires d’invocation : anneaux du portail (violet profond et glacier) sur anthracite. */ #dbrpg-app.st-capsule .dbrpg-mentor-hero{border:0;border-radius:0;box-shadow:none;color:var(--c-on-char); background:linear-gradient(transparent,transparent), repeating-radial-gradient(circle at 92% 50%,transparent 0 18px,rgba(127,208,243,.12) 18px 19px,transparent 19px 34px,rgba(91,47,160,.35) 34px 36px), radial-gradient(circle at 92% 50%,rgba(91,47,160,.55),transparent 55%), var(--c-char)} #dbrpg-app.st-capsule .dbrpg-mentor-hero :is(h1,h2,h3){color:#fff} #dbrpg-app.st-capsule .dbrpg-mentor-hero p{color:var(--c-on-char-2)} #dbrpg-app.st-capsule .dbrpg-mentor-hero .dbrpg-kicker{color:var(--c-ice)} /* ===================================================================== 27 · PERSONNAGES — FICHES DE COMBATTANTS */ /* Fiche du guerrier : planche anthracite quadrillée, trait orange en biais (touche manga), portrait détouré en angle. */ #dbrpg-app.st-capsule .dbrpg-hero-sheet{border:0;border-radius:0;box-shadow:none;color:var(--c-on-char);background-color:var(--c-char); background-image:linear-gradient(transparent,transparent), linear-gradient(112deg,transparent 0 71%,var(--c-orange) 71% 72.2%,transparent 72.2% 74%,rgba(255,122,0,.35) 74% 74.6%,transparent 74.6%), linear-gradient(rgba(127,208,243,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(127,208,243,.06) 1px,transparent 1px); background-size:auto,auto,24px 24px,24px 24px; clip-path:polygon(0 0,calc(100% - 22px) 0,100% 22px,100% 100%,0 100%)} #dbrpg-app.st-capsule .dbrpg-hero-sheet :is(img,.dbrpg-hero-portrait){border-radius:0} #dbrpg-app.st-capsule .dbrpg-hero-sheet :is(h1,h2){color:#fff} #dbrpg-app.st-capsule .dbrpg-hero-sheet .dbrpg-kicker{color:var(--c-ice)} #dbrpg-app.st-capsule .dbrpg-hero-portrait{border:0;border-radius:0;padding:4px;box-shadow:none;background:linear-gradient(135deg,var(--c-orange),var(--c-orange-deep));clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,18px 100%,0 calc(100% - 18px))} #dbrpg-app.st-capsule .dbrpg-hero-portrait img{border:0;border-radius:0;clip-path:polygon(0 0,calc(100% - 15px) 0,100% 15px,100% 100%,15px 100%,0 calc(100% - 15px))} #dbrpg-app.st-capsule .dbrpg-hero-info h1{color:#fff;-webkit-text-stroke:0;text-shadow:none;font-size:clamp(2.2rem,5vw,3.2rem)} /* ===================================================================== 28 · TÉLÉPHONE */ @media (max-width:820px){ /* Barre du bas : six onglets égaux dans l’ordre (le socle mettait le 2ᵉ au centre dans un rond). */ #dbrpg-app.st-capsule .dbrpg-dock>button{order:0} #dbrpg-app.st-capsule .dbrpg-dock>button:nth-child(2)>i{width:auto;height:auto;margin-top:0;border:0;border-radius:0;background:none;color:inherit;box-shadow:none} #dbrpg-app.st-capsule .dbrpg-dock>button:nth-child(2)>i .dbrpg-icon{width:22px;height:22px} #dbrpg-app.st-capsule .dbrpg-dock>button:nth-child(2).active>i{background:none;color:var(--c-orange)} #dbrpg-app.st-capsule .dbrpg-dock>button span{font-size:.62rem;letter-spacing:.02em} /* Console de combat : intitulés en casse normale, plus serrés. */ #dbrpg-app.st-capsule .dbrpg-combat-actions>button b{text-transform:none;letter-spacing:0;font-size:.82rem;line-height:1.05;overflow-wrap:normal;word-break:normal;hyphens:auto} #dbrpg-app.st-capsule .dbrpg-combat-focusbar span{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:.85rem} #dbrpg-app.st-capsule .dbrpg-home-character>img{width:72px;height:72px} } /* Barre du haut : montants et compteurs sur une seule ligne. */ #dbrpg-app.st-capsule :is(.dbrpg-hud-wallet,.dbrpg-hud-points){white-space:nowrap} /* ===================================================================== 29 · MODE SOMBRE « CAPSULE DE NUIT » */ /* Mêmes règles, autres jetons : laboratoire de nuit (anthracite et acier), cadre presque noir, filets acier clair. Les écrans du socle sans jeton sont repris par manga/dark.css et la détection de contraste d’app.js. */ .dbrpg-app.st-capsule.is-dark,body.dbrpg-st-capsule.dbrpg-dark,body.dbrpg-st-capsule.dbrpg-dark .dbrpg-tech-drop{ --c-ground:#111418;--c-grid:#181d22;--c-grid-major:#1f252c; --c-paper:#1a1f25;--c-paper-2:#21272e;--c-paper-3:#2c333b; --c-line:#323a43;--c-line-2:#4b5662; --c-char:#0b0d10;--c-char-2:#15191e;--c-char-3:#222930;--c-char-line:#2e363e; --c-on-char:#eef1f4;--c-on-char-2:#9aa5b0; --c-ink:#e8ecf0;--c-ink-2:#aeb8c2;--c-ink-3:#808b96; --c-orange-deep:#ffa24d;--c-orange-soft:#33220f; --c-blue:#4fa3ff;--c-blue-deep:#8cc2ff; --c-ice-soft:#10303e;--c-gold:#d9a93a; --c-hi:#262d35;--c-red-soft:#3a1a1e;--c-gold-soft:#33290f;--c-strong:#93a0ad; --c-lift:0 18px 40px -16px rgba(0,0,0,.85),0 2px 6px rgba(0,0,0,.5); --m-blank:#14181d;--m-violet-soft:#183152;--m-hp-deep:#4fd387;--m-ki-deep:#7fc8ff; --m-shadow:0 1px 0 rgba(0,0,0,.45);--m-shadow-sm:0 1px 0 rgba(0,0,0,.45); --x-shadow:0 1px 0 rgba(0,0,0,.45); color-scheme:dark; } /* Arène de nuit : écran tactique sombre, mire et quadrillage glacier. */ #dbrpg-app.st-capsule.is-dark .dbrpg-arena:not(:is(.is-domain,.is-domain-opening,.is-lullaby,.is-time-stopped,.is-ultimate-cinematic,.is-ultimate-impact,.is-blackflash)){ box-shadow:inset 0 0 0 1px var(--c-line-2); background: radial-gradient(circle at 50% 62%,transparent 0 21%,rgba(127,208,243,.18) 21.2% 21.6%,transparent 21.8% 37%,rgba(127,208,243,.12) 37.2% 37.6%,transparent 37.8%), linear-gradient(90deg,transparent calc(50% - .5px),rgba(127,208,243,.16) calc(50% - .5px) calc(50% + .5px),transparent calc(50% + .5px)), linear-gradient(rgba(127,208,243,.06) 1px,transparent 1px) 0 0/28px 28px, linear-gradient(90deg,rgba(127,208,243,.06) 1px,transparent 1px) 0 0/28px 28px, linear-gradient(180deg,#1c232b 0%,#151a20 64%,#0f1317 64.3%,#161b21 100%); } #dbrpg-app.st-capsule.is-dark .dbrpg-st-card{background:repeating-linear-gradient(transparent 0 23px,rgba(127,208,243,.05) 23px 24px),var(--c-paper)} #dbrpg-app.st-capsule.is-dark .dbrpg-versus{-webkit-text-stroke-color:#000;text-shadow:3px 3px 0 #000} .dbrpg-st-capsule.dbrpg-dark .dbrpg-confirm-card{background:var(--c-paper);color:var(--c-ink)} /* Bouton 🌙 / ☀️ de la barre du haut et de la barre de combat. */ #dbrpg-app.st-capsule .dbrpg-theme-toggle{width:40px;height:40px;border:1px solid var(--c-char-line);border-radius:0;background:var(--c-char-2);color:var(--c-on-char);box-shadow:none;transition:border-color .15s,transform .2s} #dbrpg-app.st-capsule .dbrpg-theme-toggle:hover{border-color:var(--c-ice);transform:rotate(-12deg)} /* ===================================================================== 30 · MOUVEMENT DE L’INTERFACE */ /* Uniquement l’interface (menus, onglets, cartes, fenêtres) : rien ici ne touche l’arène ni les effets de combat. Les retours au survol et à l’appui sont des transitions ; les entrées (écran, menu, fenêtre) des animations courtes qui ne rejouent qu’à l’ouverture. Tout est coupé si le joueur demande de réduire les animations. */ @keyframes dbrpg-cc-rise{from{opacity:0;transform:translateY(10px)}} @keyframes dbrpg-cc-mark{from{box-shadow:inset 0 0 0 var(--c-orange)}} @keyframes dbrpg-cc-sheet{from{opacity:0;transform:translateY(18px) scale(.985)}} @keyframes dbrpg-cc-pop{from{opacity:0;transform:scale(.94)}} @keyframes dbrpg-cc-dock{from{background-size:0 3px}} @media (prefers-reduced-motion:no-preference){ /* Barre latérale : l’icône avance au survol, le repère orange de l’onglet actif se déploie. */ #dbrpg-app.st-capsule .dbrpg-nav-item{transition:background .18s,box-shadow .22s cubic-bezier(.2,.8,.2,1)} #dbrpg-app.st-capsule .dbrpg-nav-item>i{transition:transform .22s cubic-bezier(.2,.8,.3,1.5),color .18s} #dbrpg-app.st-capsule .dbrpg-nav-item:hover{box-shadow:inset 2px 0 0 var(--c-on-char-2)} #dbrpg-app.st-capsule .dbrpg-nav-item:hover>i{transform:translateX(3px);color:var(--c-ice)} #dbrpg-app.st-capsule .dbrpg-nav-item.active{animation:dbrpg-cc-mark .3s cubic-bezier(.2,.8,.2,1)} #dbrpg-app.st-capsule .dbrpg-nav-item.active:hover{box-shadow:inset 4px 0 0 var(--c-orange)} #dbrpg-app.st-capsule .dbrpg-nav-item:active{background:var(--c-char-3)} /* Barre du bas : appui écrasé, repère actif qui s’étire. */ #dbrpg-app.st-capsule .dbrpg-dock>button{transition:color .2s,transform .14s cubic-bezier(.2,.8,.3,1.4)} #dbrpg-app.st-capsule .dbrpg-dock>button:active{transform:scale(.9)} #dbrpg-app.st-capsule .dbrpg-dock>button.active{animation:dbrpg-cc-dock .3s cubic-bezier(.2,.8,.2,1)} #dbrpg-app.st-capsule .dbrpg-dock>button>i{transition:transform .22s cubic-bezier(.2,.8,.3,1.6)} #dbrpg-app.st-capsule .dbrpg-dock>button.active>i{transform:translateY(-2px)} /* Barre du haut : boutons qui se soulèvent. */ #dbrpg-app.st-capsule :is(.dbrpg-hud-help,.dbrpg-hud-menu,.dbrpg-hud-mail,.dbrpg-hud-points,.dbrpg-hud-wallet,.dbrpg-hud-quest-action){transition:transform .16s cubic-bezier(.2,.8,.3,1.4),border-color .15s,background-color .15s} #dbrpg-app.st-capsule :is(.dbrpg-hud-help,.dbrpg-hud-menu,.dbrpg-hud-mail,.dbrpg-hud-points,.dbrpg-hud-quest-action):hover{transform:translateY(-2px)} #dbrpg-app.st-capsule :is(.dbrpg-hud-help,.dbrpg-hud-menu,.dbrpg-hud-mail,.dbrpg-hud-points,.dbrpg-hud-quest-action):active{transform:translateY(1px) scale(.95)} /* Cartes et tuiles cliquables : soulèvement net + repère orange qui apparaît. */ #dbrpg-app.st-capsule :is(.dbrpg-mcard,.dbrpg-today-tile,.dbrpg-home-goals button,.dbrpg-st-card,.dbrpg-enemy-card,.dbrpg-nav-tile,.dbrpg-ob-card,.dbrpg-aff-card,.dbrpg-ms-card){transition:transform .18s cubic-bezier(.2,.8,.3,1.3),border-color .15s,box-shadow .2s,background-color .15s} #dbrpg-app.st-capsule :is(.dbrpg-mcard,.dbrpg-today-tile,.dbrpg-home-goals button,.dbrpg-st-card,.dbrpg-enemy-card,.dbrpg-nav-tile):hover{transform:translateY(-3px)} #dbrpg-app.st-capsule :is(.dbrpg-mcard,.dbrpg-today-tile,.dbrpg-home-goals button,.dbrpg-st-card,.dbrpg-enemy-card,.dbrpg-nav-tile):active{transform:translateY(0) scale(.985);transition-duration:.06s} #dbrpg-app.st-capsule .dbrpg-home-todo-main{transition:background-color .15s,padding-left .2s cubic-bezier(.2,.8,.2,1)} #dbrpg-app.st-capsule .dbrpg-home-todo-main:hover{padding-left:18px} /* Console de combat (boutons seulement) : appui écrasé. */ #dbrpg-app.st-capsule .dbrpg-combat-actions>button{transition:background-color .15s,border-color .15s,box-shadow .15s,transform .14s cubic-bezier(.2,.8,.3,1.4)} #dbrpg-app.st-capsule .dbrpg-combat-actions>button:hover:not(:disabled){transform:translateY(-2px)} #dbrpg-app.st-capsule .dbrpg-combat-actions>button:active:not(:disabled){transform:translateY(1px) scale(.97);transition-duration:.05s} /* Onglets segmentés : le soulignement orange et le fond glissent. */ #dbrpg-app.st-capsule :is(.dbrpg-st-tabs,.dbrpg-tw3-tabs,.dbrpg-rf-tabs,.dbrpg-ally-filter,.dbrpg-ap-tabs,.dbrpg-inv-tabs,.dbrpg-cx-filters,.dbrpg-quest-tabs,.dbrpg-tl-tabs,.dbrpg-shop-filters,.dbrpg-inv-filters,.dbrpg-ms-chips,.dbrpg-pg-chips,.dbrpg-ld-pills,.dbrpg-story-tabs,.dbrpg-dungeon-tabs)>button, #dbrpg-app.st-capsule :is([data-story-tab],[data-dungeon-filter],.dbrpg-guide-chip,.dbrpg-modehead-back,.dbrpg-orders button){transition:background-color .18s,color .18s,border-color .18s,box-shadow .22s cubic-bezier(.2,.8,.2,1),transform .14s} #dbrpg-app.st-capsule :is([data-story-tab],[data-dungeon-filter],.dbrpg-guide-chip,.dbrpg-modehead-back):active{transform:scale(.96)} /* Entrée d’un écran : les cartes arrivent en cascade (seulement au changement d’écran, pas à chaque mise à jour). */ #dbrpg-app.st-capsule .dbrpg-view-enter :is(.dbrpg-mcards>*,.dbrpg-today-tile,.dbrpg-home-goals button,.dbrpg-home-todo-row,.dbrpg-st-card,.dbrpg-rewards-center li,.dbrpg-enemy-card){animation:dbrpg-cc-rise .38s cubic-bezier(.2,.8,.2,1) both} #dbrpg-app.st-capsule .dbrpg-view-enter :is(.dbrpg-mcards>*,.dbrpg-home-goals button,.dbrpg-today-tile,.dbrpg-home-todo-row,.dbrpg-st-card,.dbrpg-rewards-center li,.dbrpg-enemy-card):nth-child(2){animation-delay:.04s} #dbrpg-app.st-capsule .dbrpg-view-enter :is(.dbrpg-mcards>*,.dbrpg-home-goals button,.dbrpg-today-tile,.dbrpg-home-todo-row,.dbrpg-st-card,.dbrpg-rewards-center li,.dbrpg-enemy-card):nth-child(3){animation-delay:.08s} #dbrpg-app.st-capsule .dbrpg-view-enter :is(.dbrpg-mcards>*,.dbrpg-home-goals button,.dbrpg-today-tile,.dbrpg-home-todo-row,.dbrpg-st-card,.dbrpg-rewards-center li,.dbrpg-enemy-card):nth-child(4){animation-delay:.12s} #dbrpg-app.st-capsule .dbrpg-view-enter :is(.dbrpg-mcards>*,.dbrpg-home-goals button,.dbrpg-today-tile,.dbrpg-home-todo-row,.dbrpg-st-card,.dbrpg-rewards-center li,.dbrpg-enemy-card):nth-child(5){animation-delay:.16s} #dbrpg-app.st-capsule .dbrpg-view-enter :is(.dbrpg-mcards>*,.dbrpg-home-goals button,.dbrpg-today-tile,.dbrpg-home-todo-row,.dbrpg-st-card,.dbrpg-rewards-center li,.dbrpg-enemy-card):nth-child(n+6){animation-delay:.2s} /* Menus et fenêtres : le panneau monte, la carte de confirmation s’ouvre. */ .dbrpg-st-capsule .dbrpg-menu-panel{animation:dbrpg-cc-sheet .28s cubic-bezier(.2,.8,.2,1)} .dbrpg-st-capsule .dbrpg-confirm-card{animation:dbrpg-cc-pop .22s cubic-bezier(.2,.8,.3,1.3)} .dbrpg-st-capsule .dbrpg-nav-tile{transition:transform .18s cubic-bezier(.2,.8,.3,1.3),background-color .15s} } @media (prefers-reduced-motion:reduce){ #dbrpg-app.st-capsule :is(.dbrpg-primary,.dbrpg-secondary,.dbrpg-link),.dbrpg-st-capsule :is(.dbrpg-primary,.dbrpg-secondary,.dbrpg-link){transition:none;transform:none!important} } /* ===================================================================== 31 · COMBAT SUR TÉLÉPHONE : TOUT SUR UNE LIGNE */ /* Joueur, compagnon, VS et ennemi côte à côte, images réduites : l’arène tient au-dessus de la console d’actions, sans défiler. Seules la taille et la place des cartes changent ; les animations se calent sur leur position réelle. (Les !important répondent à ceux du socle V6.55, qui empilait les combattants sous 650 px.) */ @media (max-width:820px){ #dbrpg-app.st-capsule.st-capsule .is-combat-focus main>.dbrpg-section-head, #dbrpg-app.st-capsule .is-combat-focus .dbrpg-auto-status{display:none} #dbrpg-app.st-capsule .is-combat-focus .dbrpg-main{padding-top:6px} #dbrpg-app.st-capsule .is-combat-focus .dbrpg-arena, #dbrpg-app.st-capsule .is-combat-focus .dbrpg-arena.has-companion{grid-template-columns:minmax(0,1fr) 20px minmax(0,1fr)!important;align-items:start;gap:4px!important;min-height:0;padding:40px 6px 8px!important} #dbrpg-app.st-capsule .is-combat-focus .dbrpg-arena.has-companion{grid-template-columns:minmax(0,2fr) 20px minmax(0,1fr)!important} #dbrpg-app.st-capsule .is-combat-focus .dbrpg-arena>:is(.dbrpg-team,.dbrpg-versus,.dbrpg-fighter.enemy){grid-column:auto!important;grid-row:1!important} #dbrpg-app.st-capsule .is-combat-focus .dbrpg-team{display:grid!important;grid-template-columns:minmax(0,1fr);gap:4px!important;align-items:start} #dbrpg-app.st-capsule .is-combat-focus .dbrpg-team.has-companion{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} #dbrpg-app.st-capsule .is-combat-focus .dbrpg-fighter, #dbrpg-app.st-capsule .is-combat-focus .dbrpg-arena.has-companion .dbrpg-fighter.enemy{width:100%!important;min-width:0!important;max-width:none!important;justify-self:stretch!important;gap:3px} #dbrpg-app.st-capsule .is-combat-focus .dbrpg-fighter .dbrpg-fighter-img, #dbrpg-app.st-capsule .is-combat-focus .dbrpg-arena.has-companion .dbrpg-fighter.enemy .dbrpg-fighter-img, #dbrpg-app.st-capsule .is-combat-focus .dbrpg-team.has-companion .dbrpg-fighter .dbrpg-fighter-img{width:100%!important;max-width:none!important;height:auto!important;min-height:0!important;aspect-ratio:3/4;margin:0!important} #dbrpg-app.st-capsule .is-combat-focus .dbrpg-versus, #dbrpg-app.st-capsule .is-combat-focus .dbrpg-arena.has-companion .dbrpg-versus{display:flex;flex-direction:column;align-items:center;align-self:start;margin-top:14vw;gap:0;font-size:1.25rem!important;line-height:1} #dbrpg-app.st-capsule .is-combat-focus .dbrpg-versus small{display:none} /* Infos sous les images : nom sur une ligne, jauges fines, détails secondaires masqués (ils restent dans le journal et le tableau d’affinités). */ #dbrpg-app.st-capsule .is-combat-focus .dbrpg-fighter h3{margin:0;max-width:100%;overflow:hidden;font-size:.7rem;line-height:1.15;white-space:nowrap;text-overflow:ellipsis;text-align:center} #dbrpg-app.st-capsule .is-combat-focus .dbrpg-fighter h3 :is(small,.dbrpg-type-chip){display:none} #dbrpg-app.st-capsule .is-combat-focus .dbrpg-fighter :is(.dbrpg-enemy-hint,.dbrpg-combat-mentor,.dbrpg-companion-meta,.dbrpg-ally-meta,.dbrpg-enemy-aff>small,.dbrpg-aff-eff,.dbrpg-enemy-def){display:none} #dbrpg-app.st-capsule .is-combat-focus .dbrpg-fighter>.dbrpg-type-chip,#dbrpg-app.st-capsule .is-combat-focus .dbrpg-enemy-aff{font-size:.58rem} #dbrpg-app.st-capsule .is-combat-focus .dbrpg-fighter .dbrpg-bar-row{width:100%;gap:1px;font-size:.6rem} #dbrpg-app.st-capsule .is-combat-focus .dbrpg-fighter .dbrpg-bar-row>span{display:none} #dbrpg-app.st-capsule .is-combat-focus .dbrpg-fighter .dbrpg-bar{height:7px} #dbrpg-app.st-capsule .is-combat-focus .dbrpg-arena-tools{top:6px!important;left:6px!important;right:auto!important;justify-content:flex-start} #dbrpg-app.st-capsule .is-combat-focus .dbrpg-arena-tools>button{padding:3px 7px;font-size:.66rem;min-height:0} #dbrpg-app.st-capsule .is-combat-focus .dbrpg-intent{top:-14px;padding:1px 6px;font-size:.62rem!important} } /* ===================================================================== 32 · SCANNER BLEU (interface) */ /* Balayage glacier façon scouter : chargement (radar autour de la boule), squelettes, écran de mesure de l’accueil, fiche du guerrier et sanctuaires (passage lent), cartes de mode au survol, menu et fenêtres à l’ouverture, repère sur la règle de la barre du haut. Uniquement transform / opacity sur des pseudo-éléments libres ; coupé si le joueur réduit les animations. */ @keyframes dbrpg-cc-scan{from{transform:translateY(-100%)}to{transform:translateY(100%)}} @keyframes dbrpg-cc-sweep{to{transform:rotate(360deg)}} @keyframes dbrpg-cc-blip{from{background-position:-160px 0}to{background-position:calc(100% + 160px) 0}} @keyframes dbrpg-cc-scan-once{from{transform:translateY(-100%);opacity:1}85%{opacity:1}to{transform:translateY(0);opacity:0}} @keyframes dbrpg-cc-skel{from{background-position:120% 0}to{background-position:-20% 0}} @keyframes dbrpg-cc-blink{50%{opacity:.35}} #dbrpg-app.st-capsule .dbrpg-loading{position:relative;overflow:hidden;background:var(--c-char);color:var(--c-on-char)} #dbrpg-app.st-capsule .dbrpg-loading strong{font-family:var(--c-font-tech);font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--c-ice)} #dbrpg-app.st-capsule .dbrpg-loading .dbrpg-orb{z-index:1;box-shadow:0 0 0 6px rgba(127,208,243,.12),0 0 0 7px rgba(127,208,243,.5)} /* Radar : anneaux fixes + secteur qui tourne autour de la boule. */ #dbrpg-app.st-capsule .dbrpg-loading::before{content:"";position:absolute;left:50%;top:50%;width:220px;height:220px;margin:-140px 0 0 -110px;border-radius:50%;pointer-events:none; background:conic-gradient(from 0deg,rgba(127,208,243,.55),rgba(127,208,243,0) 22%),repeating-radial-gradient(circle,transparent 0 34px,rgba(127,208,243,.22) 34px 35px)} #dbrpg-app.st-capsule .dbrpg-skel i{border-radius:0;background:linear-gradient(100deg,var(--c-paper-2) 30%,rgba(127,208,243,.35) 50%,var(--c-paper-2) 70%);background-size:220% 100%;box-shadow:inset 3px 0 0 var(--c-ice)} /* Bande de balayage commune. */ #dbrpg-app.st-capsule :is(.dbrpg-home-vitals,.dbrpg-hero-sheet,.dbrpg-mentor-hero,.dbrpg-mcard){position:relative;overflow:hidden} .dbrpg-st-capsule .dbrpg-confirm-card{position:relative} /* le menu et les fenêtres défilent : pas d’overflow:hidden */ #dbrpg-app.st-capsule :is(.dbrpg-home-vitals,.dbrpg-hero-sheet,.dbrpg-mentor-hero,.dbrpg-mcard)::after,.dbrpg-st-capsule :is(.dbrpg-menu-panel,.dbrpg-confirm-card)::after{ content:"";position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0; background:linear-gradient(180deg,transparent 0 88%,rgba(127,208,243,.08) 88%,rgba(127,208,243,.55) 99%,rgba(220,245,255,.9) 100%)} /* Repère qui court le long de la règle graduée de la barre du haut. */ #dbrpg-app.st-capsule .dbrpg-hud::after{content:"";position:absolute;left:0;right:0;bottom:3px;height:2px;pointer-events:none;opacity:0;background:linear-gradient(90deg,transparent,var(--c-ice),transparent) no-repeat;background-size:140px 2px} @media (prefers-reduced-motion:no-preference){ #dbrpg-app.st-capsule .dbrpg-loading::before{animation:dbrpg-cc-sweep 2.2s linear infinite} #dbrpg-app.st-capsule .dbrpg-loading strong{animation:dbrpg-cc-blink 1.2s steps(2) infinite} #dbrpg-app.st-capsule .dbrpg-skel i{animation:dbrpg-cc-skel 1.3s linear infinite} #dbrpg-app.st-capsule .dbrpg-home-vitals::after{opacity:1;animation:dbrpg-cc-scan 3.8s cubic-bezier(.4,0,.6,1) infinite} #dbrpg-app.st-capsule :is(.dbrpg-hero-sheet,.dbrpg-mentor-hero)::after{opacity:.7;animation:dbrpg-cc-scan 6s cubic-bezier(.4,0,.6,1) infinite} #dbrpg-app.st-capsule .dbrpg-mcard:hover::after{opacity:1;animation:dbrpg-cc-scan .7s cubic-bezier(.3,0,.3,1) 1 both} .dbrpg-st-capsule :is(.dbrpg-menu-panel,.dbrpg-confirm-card)::after{animation:dbrpg-cc-scan-once .75s cubic-bezier(.3,0,.3,1) .1s 1 both} #dbrpg-app.st-capsule .dbrpg-hud::after{opacity:1;animation:dbrpg-cc-blip 7s linear infinite} } /* ===================================================================== 33 · INVOCATIONS : COULEURS DU THÈME */ /* Mêmes animations (rayons, cartes qui se retournent, flash), recolorées : anthracite et glacier pour la scène, acier / bleu / violet / or / or et violet pour les paliers, comme les raretés du jeu. */ .dbrpg-st-capsule .dbrpg-summon-stage{background:radial-gradient(circle at 50% 38%,#24303c 0,#151a20 45%,#0b0d10 100%)!important;--ray:rgba(127,208,243,.09)} .dbrpg-st-capsule :is(.dbrpg-summon-stage,.dbrpg-summon-reveal){border:0;border-radius:0;box-shadow:inset 0 0 0 1px rgba(127,208,243,.35);clip-path:polygon(0 0,calc(100% - 22px) 0,100% 22px,100% 100%,22px 100%,0 calc(100% - 22px))} .dbrpg-st-capsule .dbrpg-summon-stage h2{color:#fff;-webkit-text-stroke:0;text-shadow:0 0 18px rgba(127,208,243,.6)} .dbrpg-st-capsule .dbrpg-summon-stage .dbrpg-kicker{color:var(--c-ice)} .dbrpg-st-capsule .dbrpg-summon-tier-common{background:#3f4852;--ray:rgba(255,255,255,.10)} .dbrpg-st-capsule .dbrpg-summon-tier-rare{background:#1768d1;--ray:rgba(127,208,243,.30)} .dbrpg-st-capsule .dbrpg-summon-tier-super{background:#5b2fa0;--ray:rgba(205,181,242,.30)} .dbrpg-st-capsule .dbrpg-summon-tier-legendary{background:linear-gradient(160deg,#f1cf6d,#b8871c 60%,#6e4f0c);--ray:rgba(255,243,200,.40)} .dbrpg-st-capsule .dbrpg-summon-tier-divine{background:linear-gradient(135deg,#3b1a6b,#5b2fa0 30%,#b8871c 60%,#f1cf6d 75%,#3b1a6b);--ray:rgba(241,207,109,.40)} .dbrpg-st-capsule .dbrpg-summon-tier-empty{background:#1a1e23;--ray:rgba(127,208,243,.06)} .dbrpg-st-capsule .dbrpg-summon-flash>b{color:#fff;-webkit-text-stroke:2px var(--c-char);text-shadow:0 0 24px rgba(127,208,243,.85),4px 4px 0 var(--c-char)} .dbrpg-st-capsule .dbrpg-summon-flash>span{border:0;border-radius:0;background:var(--c-char);color:var(--c-ice);font-family:var(--c-font-tech);font-weight:700;letter-spacing:.08em;text-transform:uppercase} .dbrpg-st-capsule .dbrpg-summon-progress{height:6px;border:0;border-radius:0;background:var(--c-char-3)} .dbrpg-st-capsule .dbrpg-summon-progress>i{background:linear-gradient(90deg,var(--c-blue),var(--c-ice))} /* Dos des cartes : plaque Capsule Corp (anthracite, trame glacier, anneaux), la boule reste au centre. */ .dbrpg-st-capsule .dbrpg-summon-card-face{border:1px solid rgba(127,208,243,.45);border-radius:0;box-shadow:var(--c-lift)} .dbrpg-st-capsule .dbrpg-summon-card-back{color:var(--c-ice); background:repeating-radial-gradient(circle at 50% 45%,transparent 0 22px,rgba(127,208,243,.16) 22px 23px), linear-gradient(rgba(127,208,243,.07) 1px,transparent 1px) 0 0/14px 14px,linear-gradient(90deg,rgba(127,208,243,.07) 1px,transparent 1px) 0 0/14px 14px,#14181d} .dbrpg-st-capsule .dbrpg-summon-card-back>b{color:var(--c-ice);-webkit-text-stroke:0;font-family:var(--c-font-tech);font-weight:700;letter-spacing:.1em;text-transform:uppercase} .dbrpg-st-capsule .dbrpg-summon-card-front h3{text-shadow:none} /* Boutons d’invocation : plaques coupées (bleu tech pour 1, orange pour ×10), reflets et rayons conservés. */ .dbrpg-st-capsule .dbrpg-summon-cta{border:0;border-radius:0;box-shadow:none;clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,16px 100%,0 calc(100% - 16px))} .dbrpg-st-capsule .dbrpg-summon-cta.is-single{background:linear-gradient(180deg,#4fa3ff,#1768d1 55%,#0d4c9c);color:#fff} .dbrpg-st-capsule .dbrpg-summon-cta.is-multi{background:linear-gradient(180deg,#ffb066,#ff7a00 50%,#c95500);color:#14181d} .dbrpg-st-capsule .dbrpg-summon-cta b{font-family:var(--c-font-tech);font-weight:700;color:#fff;-webkit-text-stroke:0;text-shadow:0 2px 0 rgba(0,0,0,.35)} .dbrpg-st-capsule .dbrpg-summon-cta small{border:0;border-radius:0;background:rgba(20,24,29,.85);color:#fff;font-family:var(--c-font-tech)} .dbrpg-st-capsule .dbrpg-summon-cta em{border:0;border-radius:0;background:var(--c-red)} .dbrpg-st-capsule .dbrpg-summon-cta:hover:not(:disabled){transform:translateY(-3px);box-shadow:none} .dbrpg-st-capsule .dbrpg-summon-new{border:0;border-radius:0;background:var(--c-red)} /* Flash plein écran : glacier, et or + violet pour le divin. */ .dbrpg-st-capsule .dbrpg-summon-screenflash{background:radial-gradient(circle at 50% 50%,rgba(220,245,255,.8),rgba(127,208,243,.3) 45%,transparent 75%)} .dbrpg-st-capsule .dbrpg-summon-screenflash.tier-divin{background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.85),rgba(241,207,109,.4) 30%,rgba(91,47,160,.3) 55%,transparent 80%)} /* Cinématique « briser la boule » : fond anthracite et halo divin violet + or (les teintes de fissure par palier viennent de DB_CRACK_COLORS dans app.js). */ .dbrpg-st-capsule .dbrpg-dbcrack{background:radial-gradient(circle at 50% 48%,#1f2a35 0,#0d1116 62%,#05070a 100%)} .dbrpg-st-capsule .dbrpg-dbcrack.is-divine-on .dbc-halo{background:conic-gradient(from 0deg,#5b2fa0,#f1cf6d,#3b1a6b,#f1cf6d,#c8a6ff,#5b2fa0)} .dbrpg-st-capsule .dbrpg-dbcrack.tier-divin.is-shatter .dbc-flash{background:radial-gradient(circle at 50% 48%,#fff 0,#f1cf6d 18%,#9b6ff0 34%,#5b2fa0 48%,transparent 72%)} /* ===================================================================== 34 · TOUR DU TEMPS V10.5 : LIGNE TEMPORELLE, ÈRES, PALIERS, AFFIXES */ #dbrpg-app.st-capsule .dbrpg-tw2-map>header{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px} #dbrpg-app.st-capsule .dbrpg-tw4-tier{margin-left:auto;padding:2px 8px;border:1px solid var(--c-line);background:var(--c-paper);color:var(--c-blue-deep);font-size:.7rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase} #dbrpg-app.st-capsule .dbrpg-tw4-era{display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 8px;align-items:center;margin:0 0 10px;padding:8px 10px;background:var(--c-ice-soft);border-left:3px solid var(--c-blue);color:var(--c-ink)} #dbrpg-app.st-capsule .dbrpg-tw4-era>i{grid-row:span 2;font-style:normal;font-size:1.4rem} #dbrpg-app.st-capsule .dbrpg-tw4-era>b{font-size:.85rem} #dbrpg-app.st-capsule .dbrpg-tw4-era>small{font-size:.74rem;color:var(--c-ink-2,var(--c-ink));line-height:1.35} #dbrpg-app.st-capsule .dbrpg-tw2-node>.dbrpg-tw4-affix{position:absolute;z-index:2;top:-9px;right:-10px;padding:1px 3px;border:1px solid var(--c-strong);background:var(--c-paper);font-size:.62rem;line-height:1.1;letter-spacing:-.05em;pointer-events:none;white-space:nowrap} #dbrpg-app.st-capsule .dbrpg-tw4-runinfo{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px} #dbrpg-app.st-capsule .dbrpg-tw4-line,#dbrpg-app.st-capsule .dbrpg-tw4-eratag{display:inline-grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:0 6px;min-width:0;max-width:100%;padding:4px 8px;border:1px solid var(--c-line);background:var(--c-paper);color:var(--c-ink);font-size:.78rem} #dbrpg-app.st-capsule .dbrpg-tw4-line>i,#dbrpg-app.st-capsule .dbrpg-tw4-eratag>i{grid-row:span 2;font-style:normal;font-size:1.1rem} #dbrpg-app.st-capsule .dbrpg-tw4-line>small{font-size:.7rem;color:var(--c-ink-2,var(--c-ink));overflow-wrap:anywhere} #dbrpg-app.st-capsule .dbrpg-tw4-line{border-left:3px solid var(--c-orange)} #dbrpg-app.st-capsule .dbrpg-tw4-lines{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))} #dbrpg-app.st-capsule .dbrpg-tw4-lines>button{display:grid;align-content:start;gap:4px;text-align:left} #dbrpg-app.st-capsule .dbrpg-tw4-lines>button>i{font-style:normal;font-size:1.6rem} #dbrpg-app.st-capsule .dbrpg-tw4-lines .is-gain{color:var(--c-green)} #dbrpg-app.st-capsule .dbrpg-tw4-lines .is-cost{color:var(--c-red)} #dbrpg-app.st-capsule .dbrpg-tw4-tiers{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;margin:10px 0;padding:0;list-style:none} #dbrpg-app.st-capsule .dbrpg-tw4-tiers>li{display:grid;gap:2px;padding:6px 4px;border:1px solid var(--c-line);background:var(--c-paper);text-align:center} #dbrpg-app.st-capsule .dbrpg-tw4-tiers em{font-style:normal;font-weight:700;color:var(--c-orange-deep)} #dbrpg-app.st-capsule .dbrpg-tw4-tiers b{font-size:.78rem} #dbrpg-app.st-capsule .dbrpg-tw4-tiers small{font-size:.66rem;color:var(--c-ink-2,var(--c-ink))} #dbrpg-app.st-capsule .dbrpg-tw4-eras{display:flex;flex-wrap:wrap;gap:6px} #dbrpg-app.st-capsule .dbrpg-tw4-eras>span{display:inline-flex;gap:4px;align-items:center;padding:3px 8px;border:1px solid var(--c-line);background:var(--c-paper);font-size:.75rem} #dbrpg-app.st-capsule .dbrpg-tw4-eras i{font-style:normal} @media (max-width:600px){ #dbrpg-app.st-capsule .dbrpg-tw4-tiers{grid-template-columns:repeat(3,minmax(0,1fr))} #dbrpg-app.st-capsule .dbrpg-tw4-line>small{display:none} } /* V10.6 : résonance éveillée, reliques maudites */ #dbrpg-app.st-capsule .dbrpg-tw4-eratag.is-on{border-color:var(--c-gold);background:var(--c-gold-soft);box-shadow:inset 3px 0 0 var(--c-gold)} #dbrpg-app.st-capsule .dbrpg-tw2-relic.is-cursed{box-shadow:inset 0 0 0 1px var(--c-red)} #dbrpg-app.st-capsule .dbrpg-tw2-relic.is-cursed .dbrpg-tw3-rar{color:var(--c-red)} /* ===================================================================== 35 · UNIFORMISATION DES MENUS ET SOUS-MENUS (V10.7) */ /* Une seule famille d’en-têtes : la plaque anthracite (comme Tour, Maîtrise, Échos). Le premier calque reste transparent (piège contrastPass) et la vraie couleur est en background-color. */ #dbrpg-app.st-capsule :is(.dbrpg-shop-hero,.dbrpg-wb-hero,.sa-hero,.gd-hero,.dbrpg-tl-hero,.dbrpg-talent-hero,.dbrpg-companion-hero,.dbrpg-ultimate-hero,.dbrpg-echo2-hero,.dbrpg-ms-hero,.dbrpg-tw3-hero){ position:relative;border:0;border-radius:0;color:var(--c-on-char); box-shadow:var(--c-lift),inset 4px 0 0 var(--c-orange); background:linear-gradient(transparent,transparent), repeating-linear-gradient(0deg,transparent 0 23px,rgba(127,208,243,.07) 23px 24px), repeating-linear-gradient(90deg,transparent 0 23px,rgba(127,208,243,.07) 23px 24px), linear-gradient(135deg,var(--c-char) 0%,#20283a 100%); background-color:var(--c-char)} #dbrpg-app.st-capsule :is(.dbrpg-shop-hero,.dbrpg-wb-hero,.sa-hero,.gd-hero,.dbrpg-tl-hero,.dbrpg-talent-hero,.dbrpg-companion-hero,.dbrpg-ultimate-hero,.dbrpg-echo2-hero,.dbrpg-ms-hero,.dbrpg-tw3-hero) :is(h1,h2){color:#fff;font-family:var(--c-font-tech);font-weight:700;text-transform:uppercase;letter-spacing:.01em;text-shadow:none;-webkit-text-stroke:0} #dbrpg-app.st-capsule :is(.dbrpg-shop-hero,.dbrpg-wb-hero,.sa-hero,.gd-hero,.dbrpg-tl-hero,.dbrpg-talent-hero,.dbrpg-companion-hero,.dbrpg-ultimate-hero,.dbrpg-echo2-hero) :is(.dbrpg-kicker,.gd-kicker){color:var(--c-ice);text-shadow:none} #dbrpg-app.st-capsule :is(.dbrpg-shop-hero,.dbrpg-wb-hero,.sa-hero,.gd-hero,.dbrpg-tl-hero,.dbrpg-talent-hero,.dbrpg-companion-hero,.dbrpg-ultimate-hero,.dbrpg-echo2-hero)>div>p:not([class]), #dbrpg-app.st-capsule :is(.dbrpg-shop-hero,.sa-hero,.gd-hero,.dbrpg-tl-hero,.dbrpg-talent-hero,.dbrpg-companion-hero,.dbrpg-ultimate-hero)>p, #dbrpg-app.st-capsule .dbrpg-wb-info>p:not(.dbrpg-wb-outfit){color:var(--c-on-char-2,var(--c-on-char))} #dbrpg-app.st-capsule .dbrpg-tl-hero h2{font-family:var(--c-font-tech);font-weight:700} #dbrpg-app.st-capsule .gd-rays{display:none} #dbrpg-app.st-capsule .gd-hero-ico{border-radius:0;background:var(--c-char-2,#15191e);box-shadow:inset 0 0 0 1px var(--c-ice)} #dbrpg-app.st-capsule .dbrpg-wb-hero{box-shadow:var(--c-lift),inset 4px 0 0 var(--c-red)} #dbrpg-app.st-capsule .sa-hero{box-shadow:var(--c-lift),inset 4px 0 0 var(--c-gold)} #dbrpg-app.st-capsule .dbrpg-wb-hero img{border-radius:0} #dbrpg-app.st-capsule .dbrpg-wb-outfit{border-radius:0;border-color:var(--c-gold);background:rgba(184,135,28,.14);color:var(--c-on-char)} #dbrpg-app.st-capsule .dbrpg-wb-stats>span{border-radius:0} #dbrpg-app.st-capsule .dbrpg-shop-wallet{border:0;border-radius:0;background:var(--c-orange);color:var(--c-on-accent);box-shadow:none;clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%)} #dbrpg-app.st-capsule .dbrpg-shop-wallet :is(small,b){color:var(--c-on-accent)} #dbrpg-app.st-capsule .dbrpg-tl-points{border-radius:0;border:1px solid var(--c-ice);background:rgba(127,208,243,.08);color:var(--c-on-char)} #dbrpg-app.st-capsule .dbrpg-tl-points strong{color:var(--c-orange);font-family:var(--c-font-tech)} #dbrpg-app.st-capsule .dbrpg-tl-notice{border-radius:0;border:0;border-left:3px solid var(--c-orange);background:var(--c-orange-soft);color:var(--c-ink)} /* Barres d’onglets : la Tour et les Portails reprennent la bande commune (pas de cadre marine arrondi). */ #dbrpg-app.st-capsule .dbrpg-tw3-tabs{border:0;border-radius:0;background:transparent;box-shadow:none;padding:0} /* Cartes : coins droits partout (objets, boutique, courrier, guilde, invocation). */ #dbrpg-app.st-capsule :is(.dbrpg-item,.dbrpg-equipment-card,.dbrpg-shop-item,.dbrpg-mail,.gd-card,.gd-invite,.gd-found,.dbrpg-ally-summon-link){border-radius:0} /* Pastilles et compteurs : orange d’action, rouge d’alerte (plus de rose manga). */ #dbrpg-app.st-capsule :is(.dbrpg-hud-mail>i,.dbrpg-conv>i){border-radius:2px;background:var(--c-red);color:#fff;box-shadow:0 0 0 2px var(--c-char)} #dbrpg-app.st-capsule .dbrpg-conv>b{color:var(--c-red)} #dbrpg-app.st-capsule .dbrpg-friend-requests{border-color:var(--c-orange)} #dbrpg-app.st-capsule .dbrpg-wb-dots>i{background:var(--c-red)} #dbrpg-app.st-capsule :is(.dbrpg-st-tabs,.dbrpg-quest-tabs,.dbrpg-story-tabs,.dbrpg-dungeon-tabs)>button>b:last-child{border:0;border-radius:0;background:var(--c-paper-3,#d5dade);color:var(--c-ink);font-family:var(--c-font-tech)} #dbrpg-app.st-capsule :is(.dbrpg-st-tabs,.dbrpg-quest-tabs,.dbrpg-story-tabs,.dbrpg-dungeon-tabs)>button:is(.is-active,.active,[aria-pressed="true"])>b:last-child{background:var(--c-orange);color:var(--c-on-accent)} #dbrpg-app.st-capsule .dbrpg-pg-hero li>em,#dbrpg-app.st-capsule .dbrpg-plan-card>em{border-radius:0} /* Jaune manga → or Capsule (texte foncé sur fond clair, or clair sur plaque). */ #dbrpg-app.st-capsule :is(.dbrpg-tl-or,.dbrpg-coop-rewards>b,.dbrpg-form-chosen,.dbrpg-pg-power,.dbrpg-pg-power>b,.dbrpg-gain>b,.dbrpg-form-mbar-head>span){color:var(--c-gold)} #dbrpg-app.st-capsule .gd-found-cost>b{color:var(--c-gold-hi)} #dbrpg-app.st-capsule :is(.dbrpg-tw3-ring>b,.dbrpg-tw3-wallet>b,.dbrpg-echo2-hero>div>h2){color:var(--c-gold-hi)} #dbrpg-app.st-capsule .gd-kicker{color:var(--c-orange)} #dbrpg-app.st-capsule :is(.gd-form-fields>label,.gd-row>label){color:var(--c-gold-hi)} #dbrpg-app.st-capsule .dbrpg-dg-first{border-color:var(--c-gold)} #dbrpg-app.st-capsule :is(.gd-card-crest,.gd-emblem-pick){background:linear-gradient(transparent,transparent),linear-gradient(135deg,var(--c-gold-hi),var(--c-gold));background-color:var(--c-gold)} /* Jauges : orange (progression), bleu (données), vert (terminé). */ #dbrpg-app.st-capsule :is(.dbrpg-ob-bar>i,.dbrpg-st-mini>i,.dbrpg-tw3-bar>i,.dbrpg-form-mbar-track>u,.dbrpg-st-arc>u){background:linear-gradient(90deg,var(--c-orange-deep),var(--c-orange));border-radius:0} #dbrpg-app.st-capsule .dbrpg-item-mastery>i{background:linear-gradient(90deg,var(--c-gold),var(--c-gold-hi));border-radius:0} #dbrpg-app.st-capsule :is(.dbrpg-cx-bar>u,.gd-cap>i){background:var(--c-green);border-radius:0} /* Butins, effets, tendances : puces Capsule et couleurs de données. */ #dbrpg-app.st-capsule .dbrpg-fz-loot span{border-radius:0;border:1px solid var(--c-line);background:var(--c-paper);color:var(--c-ink);font-family:var(--c-font-tech);font-weight:600} #dbrpg-app.st-capsule .dbrpg-fz-loot span.is-skill{border-color:var(--c-blue);background:var(--c-ice-soft);color:var(--c-blue-deep)} #dbrpg-app.st-capsule .dbrpg-fx.fx-speed{color:var(--c-blue-deep)} #dbrpg-app.st-capsule span.down{color:var(--c-red)} #dbrpg-app.st-capsule .threat-easy{color:var(--c-green)} #dbrpg-app.st-capsule .dbrpg-plan-card>em{color:var(--c-red)} /* Boutons hérités : même apparence que les actions principales. */ #dbrpg-app.st-capsule :is(.dbrpg-fz-cta,.dbrpg-fz-quest){border:0;border-radius:0;box-shadow:none;background:var(--c-orange);background-image:none;color:var(--c-on-accent);font-family:var(--c-font-tech);font-weight:700;letter-spacing:.06em;text-transform:uppercase;clip-path:polygon(0 0,calc(100% - var(--c-cut)) 0,100% var(--c-cut),100% 100%,var(--c-cut) 100%,0 calc(100% - var(--c-cut)))} #dbrpg-app.st-capsule :is(.dbrpg-fz-cta,.dbrpg-fz-quest):hover{background:var(--c-orange-hi)} #dbrpg-app.st-capsule :is(.dbrpg-cx-album,.dbrpg-ld-podium li,li.rank-3,li.rank-2,li.rank-1){box-shadow:none} /* Guilde : ancien thème violet « jeu mobile » → plaques anthracite ; les couleurs de sens restent en liseré. */ #dbrpg-app.st-capsule .gd-screen{--gd-ink:var(--c-char);--gd-gold:var(--c-gold-hi);--gd-gold2:var(--c-gold);--gd-violet:var(--c-blue);--gd-card:var(--c-char);--gd-card2:#20283a} #dbrpg-app.st-capsule :is(.gd-banner,.gd-card,.gd-invite,.gd-found,.gd-panel,.gd-member,.gd-tile,.gd-nav){border:1px solid var(--c-char-line);border-radius:0;box-shadow:var(--c-lift);color:var(--c-on-char); background:linear-gradient(transparent,transparent),linear-gradient(160deg,var(--c-char) 0%,#20283a 100%);background-color:var(--c-char)} #dbrpg-app.st-capsule .gd-panel .gd-found{border:0;box-shadow:none;background:none} #dbrpg-app.st-capsule :is(.gd-banner,.gd-card.is-invite,.gd-invite){box-shadow:var(--c-lift),inset 4px 0 0 var(--c-orange)} #dbrpg-app.st-capsule .gd-banner.rank-empereur,#dbrpg-app.st-capsule .gd-member.rank-empereur,#dbrpg-app.st-capsule .gd-tile.is-shop{box-shadow:var(--c-lift),inset 4px 0 0 var(--c-gold-hi)} #dbrpg-app.st-capsule :is(.gd-member.rank-capitaine,.gd-tile.is-requests,.gd-tile.is-boss,.gd-tile.is-war){box-shadow:var(--c-lift),inset 4px 0 0 var(--c-red)} #dbrpg-app.st-capsule :is(.gd-member.rank-sergent,.gd-tile.is-members,.gd-tile.is-missions,.gd-tile.is-manage){box-shadow:var(--c-lift),inset 4px 0 0 var(--c-blue)} #dbrpg-app.st-capsule .gd-tile:active{box-shadow:none;transform:translateY(1px)} #dbrpg-app.st-capsule .gd-nav button{border-radius:0;color:var(--c-on-char-2,#aeb8c2);font-family:var(--c-font-tech);font-weight:600} #dbrpg-app.st-capsule .gd-nav button.is-on{background:var(--c-orange);color:var(--c-on-accent);box-shadow:none} #dbrpg-app.st-capsule :is(.gd-nav em,.gd-tile em){border:0;border-radius:2px;background:var(--c-red);color:#fff;box-shadow:0 0 0 2px var(--c-char)} #dbrpg-app.st-capsule .gd-title{color:var(--c-ink)!important} #dbrpg-app.st-capsule :is(.gd-help,.gd-lock,.gd-empty,.gd-found-cost span){color:var(--c-ink-2,#454f5a)} #dbrpg-app.st-capsule :is(.gd-card,.gd-member,.gd-found,.gd-panel,.gd-invite) :is(.gd-help,.gd-lock,.gd-found-cost span),#dbrpg-app.st-capsule .gd-screen .dbrpg-link{color:var(--c-on-char-2,#aeb8c2)} #dbrpg-app.st-capsule .gd-empty{border:1px dashed var(--c-line);border-radius:0} #dbrpg-app.st-capsule .gd-sent{color:var(--c-green)} #dbrpg-app.st-capsule :is(.gd-crest .gd-crest-img,.gd-card-crest .gd-card-img,.gd-leader img,.gd-avatar,.gd-faces>span){border-radius:0;background:var(--c-char-2,#15191e)} #dbrpg-app.st-capsule .gd-faces .gd-more{background:var(--c-blue)} #dbrpg-app.st-capsule :is(.gd-ribbon,.gd-pills .gd-glvl,.gd-crest){background:var(--c-gold-hi);color:var(--c-on-accent)} #dbrpg-app.st-capsule .gd-lvl{border:0;border-radius:0;background:var(--c-green);color:#fff} #dbrpg-app.st-capsule :is(.gd-pills span,.gd-tag,.gd-cap){border-radius:0} #dbrpg-app.st-capsule :is(.gd-search input,.gd-form-fields :is(input,textarea,select),.gd-member-actions select){border:1px solid var(--c-line);border-radius:0;background:var(--c-hi);color:var(--c-ink)} /* ===== 36. V10.8 : cadres de joueur redessinés ===== Un cadre = enveloppe .dbrpg-pf (anneau à motif dans le padding, équerres aux coins, cimier .pf-crest au-dessus). Le même composant sert partout : HUD, accueil, fiche, apparence, guilde, boss de guilde, boss de la semaine, classements, amis, profils, coop. --pf-s = taille extérieure, --pf-r = épaisseur de l’anneau, --pf-c = taille du cimier. */ .dbrpg-pf{--pf-s:52px;--pf-r:4px;--pf-c:18px;--pf-p:0px;--pf-ink:#14181d;position:relative;display:inline-block;flex:none;box-sizing:border-box;width:var(--pf-w,var(--pf-s));height:var(--pf-h,var(--pf-s));padding:0;vertical-align:middle;line-height:0;isolation:isolate} .dbrpg-pf.pf-xs{--pf-s:14px;--pf-r:2px;--pf-c:0px} .dbrpg-pf.pf-tiny{--pf-s:26px;--pf-r:2px;--pf-c:0px} .dbrpg-pf.pf-sm{--pf-s:40px;--pf-r:3px;--pf-c:14px} .dbrpg-pf.pf-md{--pf-s:52px;--pf-r:4px;--pf-c:18px} .dbrpg-pf.pf-lg{--pf-s:100px;--pf-r:6px;--pf-c:28px} .dbrpg-pf.pf-profile{--pf-w:104px;--pf-h:128px;--pf-r:5px;--pf-c:26px} .dbrpg-pf.pf-hero{--pf-w:100%;--pf-h:auto;--pf-r:7px;--pf-c:34px;display:block} :is(#dbrpg-app,#dbrpg-fullscreen-mount,body) .dbrpg-pf>img.pf-img{display:block;box-sizing:border-box;width:calc(var(--pf-w,var(--pf-s)) - 2 * var(--pf-p));height:calc(var(--pf-h,var(--pf-s)) - 2 * var(--pf-p));max-width:none;margin:0;border:0;border-radius:0;clip-path:none;outline:0;box-shadow:none;object-fit:cover;object-position:50% 15%;background:var(--c-char-2,#15191e);image-rendering:pixelated} :is(#dbrpg-app,#dbrpg-fullscreen-mount,body) .dbrpg-pf.pf-hero>img.pf-img{width:100%;height:auto;aspect-ratio:360/460} .dbrpg-pf>.dbrpg-cos-portrait{display:block;width:calc(var(--pf-s) - 2 * var(--pf-p))!important;height:calc(var(--pf-s) - 2 * var(--pf-p))!important;border-radius:0!important;background:var(--c-paper-2,#e3e6e8)!important} .dbrpg-pf>.pf-crest{display:none} /* Anneau : padding coloré + liseré encre, intérieur souligné. */ .dbrpg-pf.has-frame{--pf-p:var(--pf-r);padding:var(--pf-p);background-color:var(--cf2);background-image:linear-gradient(transparent,transparent),linear-gradient(135deg,var(--cf1),var(--cf2));box-shadow:0 0 0 1px var(--pf-ink)} :is(#dbrpg-app,#dbrpg-fullscreen-mount,body) .dbrpg-pf.has-frame>img.pf-img{box-shadow:0 0 0 1px var(--pf-ink)} .dbrpg-pf.pf-ring-double{background-image:linear-gradient(transparent,transparent),linear-gradient(var(--cf1),var(--cf1));box-shadow:0 0 0 1px var(--pf-ink),0 0 0 3px var(--cf2),0 0 0 4px var(--pf-ink)} .dbrpg-pf.pf-ring-electric{background-image:linear-gradient(transparent,transparent),repeating-linear-gradient(45deg,var(--cf1) 0 4px,var(--cf2) 4px 7px)} .dbrpg-pf.pf-ring-flame{background-image:linear-gradient(transparent,transparent),linear-gradient(0deg,var(--cf1),var(--cf2) 62%,#fff1c2)} .dbrpg-pf.pf-ring-shine{background-image:linear-gradient(transparent,transparent),linear-gradient(115deg,var(--cf2) 15%,#fff 38%,var(--cf1) 52%,var(--cf2) 85%);background-size:auto,300% 100%;background-position:0 0,0 0} .dbrpg-pf.pf-ring-scales{background-image:linear-gradient(transparent,transparent),radial-gradient(circle at 50% 100%,var(--cf2) 0 2px,transparent 2.6px),linear-gradient(var(--cf1),var(--cf1));background-size:auto,6px 5px,auto} .dbrpg-pf.pf-ring-divine{background-image:linear-gradient(transparent,transparent),linear-gradient(180deg,#fff 0,var(--cf1) 50%,var(--cf2));box-shadow:0 0 0 1px var(--pf-ink),0 0 10px 1px color-mix(in srgb,var(--cf1) 70%,transparent)} .dbrpg-pf.pf-ring-cursed{background-image:linear-gradient(transparent,transparent),repeating-linear-gradient(-55deg,var(--cf2) 0 3px,var(--cf1) 3px 5px,var(--cf2) 5px 9px)} .dbrpg-pf.pf-ring-rainbow{background-image:linear-gradient(transparent,transparent),conic-gradient(#ff4f8b,#ffd166,#06d6a0,#4cc9f0,#b388ff,#ff4f8b)} /* Équerres aux quatre coins (md et plus). */ .dbrpg-pf.has-frame:is(.pf-md,.pf-lg,.pf-profile,.pf-hero)::before{content:"";position:absolute;inset:calc(var(--pf-r) * -1 - 3px);z-index:-1;pointer-events:none;--k:max(8px,22%);--t:2px;background: linear-gradient(var(--cf1),var(--cf1)) 0 0/var(--k) var(--t),linear-gradient(var(--cf1),var(--cf1)) 0 0/var(--t) var(--k), linear-gradient(var(--cf1),var(--cf1)) 100% 0/var(--k) var(--t),linear-gradient(var(--cf1),var(--cf1)) 100% 0/var(--t) var(--k), linear-gradient(var(--cf1),var(--cf1)) 0 100%/var(--k) var(--t),linear-gradient(var(--cf1),var(--cf1)) 0 100%/var(--t) var(--k), linear-gradient(var(--cf1),var(--cf1)) 100% 100%/var(--k) var(--t),linear-gradient(var(--cf1),var(--cf1)) 100% 100%/var(--t) var(--k);background-repeat:no-repeat} /* Cimier : silhouette encre + remplissage (pseudo-élément, même découpe). */ .dbrpg-pf.has-frame>.pf-crest{display:block;position:absolute;left:50%;top:calc(var(--pf-c) * -.55);z-index:2;width:var(--pf-c);height:calc(var(--pf-c) * .8);transform:translateX(-50%);background:var(--pf-ink);clip-path:var(--pf-shape);pointer-events:none} .dbrpg-pf.has-frame>.pf-crest::before{content:"";position:absolute;inset:1.5px;background:linear-gradient(180deg,#fff 0,var(--cf1) 38%,var(--cf2));clip-path:var(--pf-shape)} .dbrpg-pf:is(.pf-xs,.pf-tiny,.pf-crest-none)>.pf-crest{display:none} .pf-crest-star{--pf-shape:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 100%,50% 75%,21% 100%,32% 57%,2% 35%,39% 35%)} .pf-crest-crown{--pf-shape:polygon(0 100%,0 25%,25% 60%,50% 0,75% 60%,100% 25%,100% 100%)} .pf-crest-flame{--pf-shape:polygon(50% 0,68% 32%,84% 14%,100% 66%,78% 100%,22% 100%,0 66%,16% 14%,32% 32%)} .pf-crest-bolt{--pf-shape:polygon(58% 0,14% 58%,44% 58%,34% 100%,86% 40%,56% 40%,72% 0)} .pf-crest-gem{--pf-shape:polygon(50% 0,100% 38%,50% 100%,0 38%)} .pf-crest-chevron{--pf-shape:polygon(0 0,50% 42%,100% 0,100% 55%,50% 100%,0 55%)} .pf-crest-wings{--pf-shape:polygon(0 10%,38% 55%,50% 25%,62% 55%,100% 10%,86% 100%,50% 78%,14% 100%)} .pf-crest-burst{--pf-shape:polygon(50% 0,60% 28%,90% 10%,74% 42%,100% 55%,70% 64%,78% 100%,50% 76%,22% 100%,30% 64%,0 55%,26% 42%,10% 10%,40% 28%)} .pf-crest-cross{--pf-shape:polygon(0 12%,12% 0,50% 38%,88% 0,100% 12%,62% 50%,100% 88%,88% 100%,50% 62%,12% 100%,0 88%,38% 50%)} .pf-crest-horns{--pf-shape:polygon(0 0,22% 62%,40% 100%,60% 100%,78% 62%,100% 0,70% 50%,50% 64%,30% 50%)} .pf-crest-fang{--pf-shape:polygon(0 0,100% 0,86% 30%,66% 100%,50% 42%,34% 100%,14% 30%)} .dbrpg-pf.pf-crest-orb>.pf-crest{height:var(--pf-c);clip-path:none;border-radius:50%} .dbrpg-pf.pf-crest-orb>.pf-crest::before{clip-path:none;border-radius:50%;background:radial-gradient(circle at 50% 52%,#d0313f 0 14%,transparent 16%),radial-gradient(circle at 34% 30%,#fff 0 12%,#ffc56b 26%,#f08a1a 62%,#b85400)} .dbrpg-pf.pf-crest-halo>.pf-crest{width:calc(var(--pf-c) * 1.5);height:calc(var(--pf-c) * .5);top:calc(var(--pf-c) * -.42);clip-path:none;border-radius:50%;background:transparent;box-shadow:0 0 0 1px var(--pf-ink),inset 0 0 0 1px var(--pf-ink),0 0 8px var(--cf1)} .dbrpg-pf.pf-crest-halo>.pf-crest::before{inset:0;clip-path:none;border-radius:50%;background:transparent;border:max(2px,calc(var(--pf-c) * .12)) solid var(--cf1)} /* Grands portraits : reflet qui balaie l’anneau (shine, electric). */ @keyframes dbrpg-cc-pf-sweep{to{background-position:0 0,300% 0}} @keyframes dbrpg-cc-pf-march{to{background-position:0 0,19.8px 0}} .dbrpg-pf.pf-ring-shine:is(.pf-lg,.pf-hero,.pf-profile){animation:dbrpg-cc-pf-sweep 3.2s linear infinite} .dbrpg-pf.pf-ring-electric:is(.pf-lg,.pf-hero,.pf-profile){animation:dbrpg-cc-pf-march 1.4s linear infinite} @media (prefers-reduced-motion:reduce){.dbrpg-pf.has-frame{animation:none!important}} /* Mises en page : chaque emplacement garde sa taille. */ #dbrpg-app .dbrpg-hud-avatar .dbrpg-pf{--pf-s:42px;--pf-c:13px} #dbrpg-app.st-capsule .dbrpg-hud-avatar:has(.has-frame){clip-path:none;overflow:visible} #dbrpg-app .dbrpg-home-character>.dbrpg-pf{--pf-s:96px} #dbrpg-app .dbrpg-home-character>.dbrpg-pf.has-frame{margin-top:10px} #dbrpg-app .dbrpg-hero-portrait>.dbrpg-pf.has-frame{margin-top:16px} #dbrpg-app .dbrpg-ap-preview>.dbrpg-pf{--pf-s:136px;--pf-r:7px;--pf-c:36px;margin-top:22px} #dbrpg-app .dbrpg-lb-list .dbrpg-pf{--pf-s:48px} #dbrpg-app .gd-avatar>.dbrpg-pf{--pf-s:78px;--pf-c:20px} #dbrpg-app.st-capsule .gd-avatar:has(>.dbrpg-pf.has-frame){border-color:transparent;background:none;box-shadow:none} #dbrpg-app .gd-leader .dbrpg-pf{margin-right:6px} #dbrpg-app .dbrpg-coop-slot .dbrpg-pf.has-frame{margin-top:8px} #dbrpg-app :is(.dbrpg-wb-top,.gb-list,.dbrpg-friend-list,.dbrpg-lb-list) li{overflow:visible} #dbrpg-app :is(.dbrpg-wb-top,.gb-list,.dbrpg-friend-list,.dbrpg-lb-list) li .dbrpg-pf.has-frame{margin-top:5px} .dbrpg-cos-mini.is-frame{width:18px;height:18px} @media (max-width:640px){ #dbrpg-app .dbrpg-home-character>.dbrpg-pf{--pf-s:76px;--pf-r:5px;--pf-c:22px} #dbrpg-app .dbrpg-lb-list .dbrpg-pf{--pf-s:40px;--pf-r:3px;--pf-c:14px} } /* L’aura suit le portrait encadré. */ .dbrpg-shell.cos-aura :is(.dbrpg-hud-avatar,.dbrpg-home-character,.dbrpg-hero-portrait) .dbrpg-pf,.dbrpg-cos-scope.cos-aura .dbrpg-pf{filter:var(--cos-afilter)} .dbrpg-shell.cos-aura :is(.dbrpg-hud-avatar,.dbrpg-home-character) img{filter:none} #dbrpg-app.st-capsule .gb-list li{border-radius:0} #dbrpg-app.st-capsule .gb-list li.is-me{background:var(--c-char-2,#15191e);box-shadow:inset 4px 0 0 var(--c-orange)} #dbrpg-app.st-capsule .dbrpg-adapt-strip{border-radius:0;background:var(--c-char-2,#15191e);border-color:var(--c-gold,#c8a65a)} #dbrpg-app.st-capsule .dbrpg-adapt-strip span{background:var(--c-gold,#c8a65a);color:var(--c-on-accent,#111)} #dbrpg-app.st-capsule .dbrpg-adapt-strip span.is-next{background:transparent;color:inherit;outline-color:var(--c-gold,#c8a65a)} #dbrpg-app.st-capsule .da-hero,#dbrpg-app.st-capsule .da-wish,#dbrpg-app.st-capsule .da-picker,#dbrpg-app.st-capsule .da-receipt{border-radius:0} #dbrpg-app.st-capsule .da-wish,#dbrpg-app.st-capsule .da-picker,#dbrpg-app.st-capsule .da-history li{background:var(--c-paper);color:var(--c-ink)} /* ===================================================================== V10.14 · ÉCRAN DE CONNEXION */ #dbrpg-app.st-capsule.dbrpg-login-app{min-height:100vh;min-height:100dvh;color:var(--c-ink);font-family:var(--m-font-body)} #dbrpg-app.st-capsule .dbrpg-auth-shell{position:relative;width:min(480px,100%);gap:14px;padding:0 22px 22px;border:1px solid var(--c-line-2);border-radius:0;background:var(--c-paper);box-shadow:var(--c-lift);color:var(--c-ink);clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,18px 100%,0 calc(100% - 18px))} #dbrpg-app.st-capsule .dbrpg-auth-shell>header{margin:0 -22px;padding:16px 22px;gap:12px;background:var(--c-char);color:var(--c-on-char);box-shadow:inset 0 -3px 0 var(--c-orange)} #dbrpg-app.st-capsule .dbrpg-auth-shell>header .dbrpg-brand-orb{flex:none;border:1px solid var(--c-char-line);box-shadow:none} #dbrpg-app.st-capsule .dbrpg-auth-shell>header .dbrpg-kicker{color:var(--c-on-char-2)} #dbrpg-app.st-capsule .dbrpg-auth-shell h1{margin:2px 0;color:var(--c-on-char);font:700 1.6rem/1.1 var(--c-font-tech);letter-spacing:.02em;text-transform:uppercase;text-shadow:none;-webkit-text-stroke:0;transform:none} #dbrpg-app.st-capsule .dbrpg-auth-shell header p{margin:0;color:var(--c-on-char-2);font-size:.8rem;font-weight:500} #dbrpg-app.st-capsule .dbrpg-auth-shell h2{margin:6px 0 0;color:var(--c-ink);font:700 1rem/1.25 var(--c-font-tech)} #dbrpg-app.st-capsule .dbrpg-auth-tabs{gap:0;border-bottom:1px solid var(--c-line-2)} #dbrpg-app.st-capsule .dbrpg-auth-tabs a{padding:10px 6px;border:0;border-bottom:3px solid transparent;border-radius:0;background:transparent;color:var(--c-ink-2);font:600 .82rem/1.2 var(--c-font-tech);text-align:center;text-decoration:none;box-shadow:none} #dbrpg-app.st-capsule .dbrpg-auth-tabs a:hover{color:var(--c-ink);background:var(--c-paper-2)} #dbrpg-app.st-capsule .dbrpg-auth-tabs a.active{border-bottom-color:var(--c-orange);background:transparent;color:var(--c-ink)} #dbrpg-app.st-capsule .dbrpg-auth-form label>span{color:var(--c-ink-2);font:600 .78rem/1.2 var(--c-font-tech)} #dbrpg-app.st-capsule .dbrpg-auth-form :is(input[type="text"],input:not([type]),input[type="email"],input[type="password"]){width:100%;min-height:44px;padding:8px 10px;border:1px solid var(--c-line-2);border-radius:0;background:var(--c-paper-2);color:var(--c-ink);box-shadow:none} #dbrpg-app.st-capsule .dbrpg-auth-form input:focus-visible{outline:2px solid var(--c-blue);outline-offset:0;border-color:var(--c-blue)} #dbrpg-app.st-capsule .dbrpg-auth-check{color:var(--c-ink-2);font-size:.82rem;font-weight:600} #dbrpg-app.st-capsule .dbrpg-auth-help{margin:0;color:var(--c-ink-3);font-size:.78rem;font-weight:500} #dbrpg-app.st-capsule .dbrpg-auth-form .dbrpg-primary{min-height:48px;font:700 1rem/1.2 var(--c-font-tech);letter-spacing:.03em} #dbrpg-app.st-capsule .dbrpg-auth-form .dbrpg-primary.dbrpg-discord-btn{background-image:none} #dbrpg-app.st-capsule .dbrpg-auth-discord+.dbrpg-auth-form{padding-top:12px;border-top:1px solid var(--c-line)} #dbrpg-app.st-capsule .dbrpg-auth-notice{border:1px solid var(--c-line-2);border-left-width:4px;border-radius:0;background:var(--c-paper-2);color:var(--c-ink);font-size:.86rem;font-weight:600} #dbrpg-app.st-capsule .dbrpg-auth-notice.error{border-left-color:var(--c-red)} #dbrpg-app.st-capsule .dbrpg-auth-notice.success{border-left-color:var(--c-green,#1fb86a)} #dbrpg-app.st-capsule .dbrpg-auth-disabled p,#dbrpg-app.st-capsule .dbrpg-auth-fallback{color:var(--c-ink-2)} @media (max-width:420px){#dbrpg-app.st-capsule .dbrpg-auth-shell{padding:0 14px 16px}#dbrpg-app.st-capsule .dbrpg-auth-shell>header{margin:0 -14px;padding:14px}#dbrpg-app.st-capsule .dbrpg-auth-tabs a{font-size:.74rem}} /* V10.16.3 : grands écrans. Le combat quitte sa limite de 1440 px, les portraits suivent la hauteur de la fenêtre (les actions restent à portée) sans dépasser leur colonne. :has() : les Duos gardent leur propre mise en page. */ @media (min-width:1500px) and (min-height:900px){ #dbrpg-app.st-capsule .is-combat-focus{--c-portrait:clamp(230px,25vh,440px)} #dbrpg-app.st-capsule .is-combat-focus .dbrpg-main:has(.dbrpg-arena){max-width:min(2200px,calc(100vw - 48px))} #dbrpg-app.st-capsule .is-combat-focus .dbrpg-combat-layout:has(.dbrpg-arena){grid-template-columns:minmax(0,1fr) 360px} #dbrpg-app.st-capsule .is-combat-focus .dbrpg-arena .dbrpg-fighter{max-width:calc(var(--c-portrait) + 70px)!important;justify-self:center!important} #dbrpg-app.st-capsule .is-combat-focus .dbrpg-arena .dbrpg-fighter .dbrpg-fighter-img{width:min(100%,var(--c-portrait))!important;max-width:none!important;height:auto!important;min-height:0!important;aspect-ratio:22/26} } /* La roue des affinités occupe la marge gauche à partir de 1900 px : le combat lui laisse sa place. */ @media (min-width:1900px) and (min-height:900px){ #dbrpg-app.st-capsule .is-combat-focus .dbrpg-main:has(.dbrpg-arena){max-width:min(2200px,calc(100vw - 260px));margin-left:max(230px,calc((100vw - 2200px)/2));margin-right:auto} } /* V10.17 : fiche d’une technique, effets par palier de Ki. */ .dbrpg-tech-pop .dbrpg-tiers{display:grid;gap:6px;margin:8px 0;padding:8px;border:1px solid var(--c-line-2);background:var(--c-paper-2)} .dbrpg-tech-pop .dbrpg-tiers h4{margin:0;font:600 .72rem/1.2 var(--c-font-tech);letter-spacing:.06em;text-transform:uppercase;color:var(--c-ink-2)} .dbrpg-tech-pop .dbrpg-tiers>small{font-size:.7rem;color:var(--c-ink-2)} .dbrpg-tech-pop .dbrpg-tier-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:6px} .dbrpg-tech-pop .dbrpg-tier{min-width:0;padding:6px;border-left:3px solid var(--c-blue);background:var(--c-paper)} .dbrpg-tech-pop .dbrpg-tier.t2{border-left-color:var(--c-orange)} .dbrpg-tech-pop .dbrpg-tier.t3{border-left-color:var(--c-red)} .dbrpg-tech-pop .dbrpg-tier>header{display:flex;justify-content:space-between;gap:6px;margin-bottom:4px;font-size:.74rem} .dbrpg-tech-pop .dbrpg-tier>header i{font-style:normal;font-weight:700} .dbrpg-tech-pop .dbrpg-tier ul{display:grid;gap:4px;margin:0;padding:0;list-style:none} .dbrpg-tech-pop .dbrpg-tier li{display:grid;gap:1px;font-size:.72rem;line-height:1.25} .dbrpg-tech-pop .dbrpg-tier li b{font-weight:700} .dbrpg-tech-pop .dbrpg-tier li em{font-style:normal;font-weight:700;color:var(--c-orange)} .dbrpg-tech-pop .dbrpg-tier li span{color:var(--c-ink-2)} .dbrpg-tech-pop .dbrpg-tier-prep{margin:0;padding:6px;border-left:3px solid var(--c-orange);background:var(--c-orange-soft);font-size:.74rem;line-height:1.3} /* V10.17.1 : carte courte, détail dans une fenêtre. */ .dbrpg-tech-pop .dbrpg-confirm-card{width:min(880px,calc(100vw - 24px));text-align:left} .dbrpg-tech-pop-head{display:grid;grid-template-columns:76px minmax(0,1fr);gap:12px;align-items:center} .dbrpg-tech-pop-head h2{margin:2px 0} .dbrpg-tech-pop-head p{margin:0;font-size:.84rem} .dbrpg-tech-pop .dbrpg-effects{display:flex;flex-wrap:wrap;gap:4px} .dbrpg-tech-pop-foot{display:grid;gap:6px} .dbrpg-tech-pop .dbrpg-tier-grid{grid-template-columns:repeat(3,minmax(0,1fr))} #dbrpg-app.st-capsule .dbrpg-technique-card p{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden} #dbrpg-app.st-capsule .dbrpg-tier-peek{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px;width:100%;min-height:0;margin:6px 0 0;padding:6px 8px;border:1px solid var(--c-line-2);border-radius:0;background:var(--c-paper-2);color:var(--c-ink);text-align:left;cursor:pointer;box-shadow:none} #dbrpg-app.st-capsule .dbrpg-tier-peek:hover{border-color:var(--c-blue)} #dbrpg-app.st-capsule .dbrpg-tier-peek>span{display:flex;flex-wrap:wrap;gap:3px;min-width:0} #dbrpg-app.st-capsule .dbrpg-tier-peek i{padding:1px 6px;background:var(--c-paper);font-style:normal;font-size:.68rem;font-weight:700;white-space:nowrap} #dbrpg-app.st-capsule .dbrpg-tier-peek>b{margin-left:auto;font-size:.72rem;color:var(--c-blue)} #dbrpg-app.st-capsule .dbrpg-technique-foot{display:block;margin-top:4px;font-size:.72rem;color:var(--c-ink-2)} @media (max-width:700px){.dbrpg-tech-pop .dbrpg-tier-grid{grid-template-columns:minmax(0,1fr)}.dbrpg-tech-pop-head{grid-template-columns:56px minmax(0,1fr)}} #dbrpg-app.st-capsule .dbrpg-technique-card>button:not(.dbrpg-tier-peek){align-self:end;min-height:0;padding:8px 10px} /* V10.17.2 : thème clair acier. L’orange cède la place à un gris futuriste ; le thème de nuit ne change pas. */ .dbrpg-app.st-capsule:not(.is-dark),body.dbrpg-st-capsule:not(.dbrpg-dark),body.dbrpg-st-capsule:not(.dbrpg-dark) .dbrpg-tech-drop{ --c-orange:#a9b6c2;--c-orange-hi:#bdc8d2;--c-orange-deep:#3d4a57;--c-orange-soft:#e3e8ed; --c-ink:#1e2730;--c-ink-2:#55616d;--c-ink-3:#76828e; } /* Fenêtres : plaque d’acier, filet glacier. */ body.dbrpg-st-capsule:not(.dbrpg-dark) :is(.dbrpg-confirm-card,.dbrpg-menu-panel){background:linear-gradient(165deg,#fbfcfd,#e6ebf0);border-top:3px solid transparent;border-image:linear-gradient(90deg,var(--c-char-3),var(--c-ice),var(--c-char-3)) 1} body.dbrpg-st-capsule:not(.dbrpg-dark) .dbrpg-confirm-yes{background:linear-gradient(135deg,#2c3641,#46545f);color:#eaf6fb} body.dbrpg-st-capsule:not(.dbrpg-dark) .dbrpg-confirm-yes:hover:not(:disabled){background:linear-gradient(135deg,#384552,#566672);color:#fff} body.dbrpg-st-capsule:not(.dbrpg-dark) .dbrpg-confirm .dbrpg-primary{background-color:#2c3641;color:#eaf6fb} body.dbrpg-st-capsule:not(.dbrpg-dark) .dbrpg-confirm .dbrpg-primary:hover:not(:disabled){background-color:#46545f;color:#fff} body.dbrpg-st-capsule:not(.dbrpg-dark) .dbrpg-confirm-no{background:transparent;border:1px solid var(--c-line-2);color:var(--c-ink)} body.dbrpg-st-capsule:not(.dbrpg-dark) .dbrpg-confirm-backdrop{background:rgba(30,39,48,.55)} body.dbrpg-st-capsule:not(.dbrpg-dark) .dbrpg-qty-max{background:var(--c-orange-soft);border:1px solid var(--c-line-2);border-radius:0;color:var(--c-ink)} /* Page Techniques. */ #dbrpg-app.st-capsule:not(.is-dark) .dbrpg-skill-loadout-summary{background:linear-gradient(135deg,#2c3641,#46545f);border-color:var(--c-char-3);color:#eaf6fb} #dbrpg-app.st-capsule:not(.is-dark) .dbrpg-skill-loadout-summary :is(strong,span,p){color:inherit} #dbrpg-app.st-capsule:not(.is-dark) .dbrpg-technique-card.equipped{background:linear-gradient(165deg,#f4f7f9,#e2e8ee);box-shadow:0 0 0 2px var(--c-char-3),inset 0 3px 0 var(--c-ice)} #dbrpg-app.st-capsule:not(.is-dark) .dbrpg-technique-card.equipped::after{background:var(--c-char-3);border-color:var(--c-char-3);color:#eaf6fb} /* V10.17.2 : actifs des mentors et des compagnons — une couleur par pouvoir, dans les deux thèmes. */ #dbrpg-app.st-capsule .dbrpg-combat-actions>button.mentor-power{--p1:#4c1d95;--p2:#8b5cf6;--pt:#fff;background:linear-gradient(135deg,var(--p1),var(--p2))!important;border-color:var(--p2)!important;color:var(--pt)!important;box-shadow:0 0 14px color-mix(in srgb,var(--p2) 55%,transparent),inset 0 -3px 0 rgba(0,0,0,.25)} #dbrpg-app.st-capsule .dbrpg-combat-actions>button.mentor-power :is(b,small){color:var(--pt)!important;opacity:1!important} #dbrpg-app.st-capsule .dbrpg-combat-actions>button.mentor-power:hover:not(:disabled){filter:brightness(1.12)} #dbrpg-app.st-capsule .dbrpg-combat-actions>button.mentor-power:disabled{filter:grayscale(.75);opacity:.6;box-shadow:none} #dbrpg-app.st-capsule .dbrpg-combat-actions>button.mentor-power.is-armed{outline:3px solid #3ee59a;outline-offset:2px} #dbrpg-app.st-capsule .dbrpg-combat-actions>button.companion-active{--p1:#0f766e;--p2:#14b8a6} #dbrpg-app.st-capsule .dbrpg-combat-actions>button.mentor-power.is-world{--p1:#b8871c;--p2:#f1cf6d;--pt:#201500} #dbrpg-app.st-capsule .dbrpg-combat-actions>button.mentor-power.is-askeladd{--p1:#2a1d10;--p2:#9a6424;--pt:#ffe7b3} #dbrpg-app.st-capsule .dbrpg-combat-actions>button.mentor-power.is-askeladd.is-shiny{--p1:#3a0b0b;--p2:#a51c1c;--pt:#ffe0e0} #dbrpg-app.st-capsule .dbrpg-combat-actions>button.mentor-power.is-miku{--p1:#137a74;--p2:#39c5bb} #dbrpg-app.st-capsule .dbrpg-combat-actions>button.mentor-power.is-miku.is-shiny{--p1:#8a0016;--p2:#ff2340} #dbrpg-app.st-capsule .dbrpg-combat-actions>button.mentor-power.is-juuzou{--p1:#2a0810;--p2:#a3143a;--pt:#ffe6e6} #dbrpg-app.st-capsule .dbrpg-combat-actions>button.mentor-power.is-rem{--p1:#7fd3ff;--p2:#ffd9a8;--pt:#17324f} #dbrpg-app.st-capsule .dbrpg-combat-actions>button.mentor-power.is-goku{--p1:#ffe46b;--p2:#ff9a1f;--pt:#2a1600} #dbrpg-app.st-capsule .dbrpg-combat-actions>button.mentor-power.is-sonic{--p1:#1d4ed8;--p2:#2f6bff} #dbrpg-app.st-capsule .dbrpg-combat-actions>button.mentor-power.is-sonic.is-surge{--p1:#7f1d1d;--p2:#ff2a4a} #dbrpg-app.st-capsule .dbrpg-combat-actions>button.mentor-power.is-gojo{--p1:#141a4d;--p2:#7f3dff;--pt:#e8f3ff} .dbrpg-echo-detail{justify-self:center;font-size:.76rem}