body.dou-scroll-page { background-image:url('../img/dou-scroll/fundo.png') !important; background-color:#ddbd71 !important; }
.dou-scroll-page .dou-page { max-width:1380px; margin:auto; padding:20px 28px 40px; }
.ds-title { text-align:center; padding:0 0 16px; color:#171e20; }.ds-title h1 { font:54px/1 Bangers,Georgia,serif; letter-spacing:3px; margin:0; }.ds-title p { font:12px Georgia,serif; letter-spacing:2px; margin:6px 0; }
.ds-tabs { display:flex; flex-wrap:wrap; border:5px double #b08b39; padding:4px; gap:4px; background:#112639; border-radius:5px; }.ds-tab { display:flex; flex:1 1 160px; align-items:center; justify-content:center; gap:8px; background:linear-gradient(#1e3546,#0b1b29); border:2px solid #8c713a; padding:7px; color:#eedbae; cursor:pointer; font:13px Georgia,serif; }.ds-tab img { width:40px; height:30px; object-fit:contain; }.ds-tab.active { background:linear-gradient(#7b241e,#290c13); border-color:#e7c667; }
.ds-controls { display:flex; justify-content:flex-end; padding:8px; font-size:12px; color:#493e2c; }.ds-controls input { width:64px; padding:5px; margin-left:6px; background:#fff2d4; color:#1e2a39; border:1px solid #ac8a42; }
.ds-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:10px; align-items:start; }
.ds-tree,.ds-detail { border:5px double #9c762d; border-radius:5px; background:#f7e6c0; box-shadow:inset 0 0 0 2px #efdba4,0 3px 7px #49311d77; color:#293649; min-width:0; overflow:hidden; }
.ds-tree { background:#fff1d1b8; min-height:650px; }.ds-detail { background:#fff1d1b8; }
.ds-panel-title { margin:0; padding:11px; text-align:center; font:19px Georgia,serif; font-variant:small-caps; color:#f7e6bd; background:linear-gradient(#213c50,#0c202f); border-bottom:3px double #c39f4c; }.ds-hint { text-align:center; color:#68573a; font:11px Georgia,serif; padding:0 12px; }
.ds-trail { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:36px 20px; padding:28px 22px 50px; align-items:start; }
.ds-stage { position:relative; border:0; background:transparent; color:#24313b; display:flex; flex-direction:column; align-items:center; gap:8px; padding:8px 4px; cursor:pointer; font:13px Georgia,serif; min-width:0; }.ds-stage span { overflow-wrap:anywhere; }.ds-stage small { font:10px Nunito,sans-serif; color:#796139; }.ds-eye { width:88px; height:88px; object-fit:contain; filter:drop-shadow(0 3px 2px #0005); }.ds-stage.active .ds-eye { filter:drop-shadow(0 0 7px #9a731e); }.ds-stage.active { background:#d6b05733; outline:1px solid #ab8a48; border-radius:6px; }.ds-stage:not(:last-child)::after { content:'→'; position:absolute; right:-19px; top:38px; color:#876b37; font:24px Georgia,serif; }.ds-stage:nth-child(3n)::after { content:'↓'; right:45%; top:auto; bottom:-31px; }
.ds-detail-hero { height:120px; padding:12px; background:linear-gradient(90deg,#122538ee,#344551bb,#112334ee); display:flex; justify-content:center; }.ds-detail-hero img { max-width:100%; height:100%; object-fit:contain; }
.ds-content { padding:12px; }.ds-content .dou-node { background:transparent !important; border:0 !important; padding:0; box-shadow:none; clip-path:none; opacity:1; }.ds-content .dou-node-icon { display:none; }.ds-content .dou-node-nome { color:#2b3541; font:17px Georgia,serif; }.ds-content :is(.dou-node-req,.dou-node-desc,.dou-opcao-req,.dou-node-bonus) { color:#65502e; font-size:12px; }.ds-content .dou-node-bonus { padding-left:20px; }.ds-content .dou-opcoes-grid { display:block; }.ds-content .dou-opcao { padding:10px 0; background:transparent; border:0; opacity:1; }.ds-content .dou-opcao[hidden] { display:none !important; }.ds-content .dou-opcao-icon { width:45px; height:45px; }.ds-content .dou-opcao-nome { color:#2b3541; }.ds-content .dou-opcao-header { justify-content:center; }
.ds-options { display:flex; flex-wrap:wrap; gap:5px; margin-bottom:12px; }.ds-options button { background:#eddbaf; border:1px solid #aa8845; padding:6px 9px; color:#40372a; cursor:pointer; }.ds-options button[aria-pressed=true] { background:#17364e; color:#f4dfac; }
.ds-content .dou-golpes-grid { display:grid; grid-template-columns:1fr; gap:10px; }.ds-content .jut-card { display:grid; grid-template-columns:100px minmax(0,1fr); background:#fcf1d6d9; border:1px solid #b89a59; clip-path:none; opacity:1; border-radius:3px; }.ds-content .jut-card-img-wrap { height:105px; width:100px; }.ds-content .jut-card-img { width:100%; height:100%; object-fit:cover; }.ds-content .jut-card-body { padding:8px; min-width:0; }.ds-content .jut-card-nome { color:#28374a; font:700 14px Georgia,serif; }.ds-content .jut-card-desc { color:#5a4c35; font-size:11px; }.ds-content .jut-card-footer { grid-column:1/-1; padding:6px; }.ds-content .jut-card-stats { flex-wrap:wrap; }.ds-content .jut-card-stat { color:#664a27; }.ds-content .dou-node-btn { margin-top:10px; background:linear-gradient(#274e69,#102a3e); border:3px double #c49d4b; color:#fbe6ac; padding:9px 12px; }.ds-content .dou-node-btn.locked { background:#d0bea0; color:#554b38; }.ds-content .dou-node-btn.max { background:#dbccaa; color:#544521; }.ds-content .dou-maestria { margin-top:14px; background:#efdfb7; padding:12px; }
.dou-scroll-page button:focus-visible { outline:3px solid #3187ae; outline-offset:3px; }
@media(max-width:950px) { .ds-trail { gap:25px 12px; padding:20px 10px; }.ds-eye { width:65px; height:65px; }.ds-stage:not(:last-child)::after { right:-13px; }.ds-stage:nth-child(3n)::after { right:45%; }.ds-stage { font-size:11px; } }
@media(max-width:700px) { .ds-layout { grid-template-columns:1fr; }.ds-tree { min-height:0; }.dou-scroll-page .dou-page { padding:16px 10px; }.ds-title h1 { font-size:42px; }.ds-tab { flex-basis:130px; font-size:11px; }.ds-trail { padding:20px 12px 30px; }.ds-eye { width:75px; height:75px; }.dou-scroll-page .np-topbar { height:auto; flex-wrap:wrap; padding:8px; gap:8px; }.dou-scroll-page .np-topbar-right { flex-wrap:wrap; min-width:0; }.dou-scroll-page .np-nav { flex:1 0 100%; order:3; }.dou-scroll-page .np-logo-img { height:60px; transform:none; } }

.ds-content .jut-card { max-width:none; width:100%; }
.ds-content .jut-card-body { text-align:left; }
.ds-content .jut-card-img-wrap { margin:8px 0 0 8px; width:92px; height:92px; }
.ds-content .dou-opcao-header { background:#17344b; padding:8px; border:2px double #be994c; }
.ds-content .dou-opcao-header .dou-opcao-nome { color:#f7e4b5 !important; }
.ds-stage:last-child::after { display:none; }
.ds-content .pvpf-bloco { color:#28384b; background:#f4e7c6; }
.ds-content .pvpf-bloco-titulo,.ds-content .pvpf-linha-txt { color:#28384b; }

/* Olhos circulares; técnicas conservam suas ilustrações retangulares. */
.ds-eye,.ds-tab img,.ds-detail-hero img,.ds-content .dou-opcao-icon,.ds-content .dou-opcao-icon img { border-radius:50%; aspect-ratio:1; object-fit:cover; object-position:center; }
.ds-tab img { width:34px; height:34px; }
.ds-detail-hero img { width:96px; height:96px; }
.ds-content .dou-opcao-icon { overflow:hidden; }

/* Catálogo compacto: evolução, seleção e ficha da técnica. */
.dou-scroll-page #douGrid { position:relative; padding:24px; border:3px double #96702d; border-radius:3px; background:#f4e6c6 url('../img/jutsus/card-jutsus-2026.png') center/100% 100% no-repeat; box-shadow:0 8px 24px #281a1366; }
.dou-scroll-page #douGrid::before,.dou-scroll-page #douGrid::after { content:''; position:absolute; top:-15px; bottom:-15px; width:22px; pointer-events:none; border:2px solid #47351d; border-radius:9px; background:linear-gradient(to bottom,#171b1c 0 10px,#b58c42 10px 14px,#30312b 14px 22px,transparent 22px calc(100% - 22px),#30312b calc(100% - 22px) calc(100% - 14px),#b58c42 calc(100% - 14px) calc(100% - 10px),#171b1c calc(100% - 10px)),linear-gradient(90deg,#775126,#e0bd72 38%,#ac803c 72%,#59401e); }
.dou-scroll-page #douGrid::before { left:-13px; }.dou-scroll-page #douGrid::after { right:-13px; }
.dou-scroll-page .ds-layout { grid-template-columns:190px minmax(260px,1fr) minmax(300px,1fr); gap:14px; }
.dou-scroll-page .ds-tree { min-height:0; }
.dou-scroll-page .ds-trail { display:flex; flex-direction:column; gap:6px; padding:10px; }
.dou-scroll-page .ds-stage { width:100%; flex-direction:row; text-align:left; gap:9px; padding:8px 5px; font-size:12px; flex-wrap:wrap; }
.dou-scroll-page .ds-stage::after { display:none; }
.dou-scroll-page .ds-eye { width:42px; height:42px; flex-shrink:0; }
.dou-scroll-page .ds-stage span { flex:1; }
.dou-scroll-page .ds-stage small { width:100%; }
.dou-scroll-page .ds-panel-title { font-size:16px; padding:10px; }
.dou-scroll-page .ds-detail-hero { height:58px; padding:7px; }
.dou-scroll-page .ds-detail-hero img { width:44px; height:44px; }
.ds-preview { min-width:0; padding:0 12px 12px; border:4px double #a38341; border-radius:4px; background:#fbefd5ed; color:#263b4d; }
.ds-preview>.ds-panel-title { margin:0 -12px 12px; }
.ds-library { padding:0 10px 12px; }
.ds-library>.ds-panel-title { margin:0 -10px 10px; }
.ds-techniques { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
.ds-technique { min-width:0; border:3px double #b29450; border-radius:4px; padding:7px; background:#f7e8c8; color:#203e52; cursor:pointer; }
.ds-technique[aria-pressed=true] { background:#f8df9c; border-color:#925e17; box-shadow:0 0 0 1px #c49634; }
.ds-technique:hover { background:#fff2d8; }
.ds-tech-art { display:block; width:100%; height:94px; object-fit:contain; margin-bottom:7px; }
.ds-technique strong { display:block; font:700 12px/1.4 Georgia,serif; overflow-wrap:anywhere; }
.ds-technique small { display:block; font-size:11px; margin-top:5px; color:#665031; }
.dou-scroll-page .ds-preview .jut-card { display:block; border:0; background:transparent; margin:0; box-shadow:none; filter:none; transform:none; }
.dou-scroll-page .ds-preview .jut-card-img-wrap { width:min(100%,230px); height:auto; aspect-ratio:1; margin:0 auto; background:#e6d7b1; overflow:hidden; }
.dou-scroll-page .ds-preview .jut-card-img { width:100%; height:100%; object-fit:contain; }
.dou-scroll-page .ds-preview .jut-card-img-overlay { display:none; }
.dou-scroll-page .ds-preview .jut-card-body { padding:12px 0; }
.dou-scroll-page .ds-preview .jut-card-desc { font-size:13px; line-height:1.5; }
.dou-scroll-page .ds-preview .jut-card-footer { padding:8px 0; }
.ds-empty { padding:12px; font-size:13px; line-height:1.6; }
@media(max-width:1100px) { .dou-scroll-page .dou-page { padding:15px 10px; }.dou-scroll-page #douGrid { padding:12px; }.dou-scroll-page .ds-layout { grid-template-columns:150px minmax(220px,1fr) minmax(250px,1fr); gap:9px; } }
@media(max-width:850px) { .dou-scroll-page .ds-layout { grid-template-columns:150px minmax(0,1fr); }.ds-preview { grid-column:2; }.ds-tree { grid-row:1 / span 2; } }
@media(max-width:760px) { .dou-scroll-page .ds-layout { display:flex; flex-direction:column; }.ds-tree,.ds-detail,.ds-preview { width:100%; box-sizing:border-box; }.dou-scroll-page .ds-trail { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }.ds-techniques { grid-template-columns:repeat(3,minmax(0,1fr)); }.ds-title h1 { font-size:36px; }.ds-tech-art { height:75px; } }

@media(max-width:760px) { .dou-scroll-page .dou-page { padding:24px 16px; }.dou-scroll-page #douGrid::before,.dou-scroll-page #douGrid::after { width:14px; }.dou-scroll-page #douGrid::before { left:-9px; }.dou-scroll-page #douGrid::after { right:-9px; } }