/* 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é, Black Flash…) gardent leur règle, car ils ajoutent une classe is-*. */ #dbrpg-app.st-capsule .dbrpg-arena:not([class*="is-"]){ 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} #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([class*="is-"]){ 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} }