.jut-body .jut-page { max-width:1400px; margin:24px auto 36px; padding:24px 48px 36px; color:#24313a; font-family:Georgia,serif; background:transparent; border:0; }
.jut-body .jut-page-header { margin:0 0 14px; padding:16px 23px; border:3px double #b9934c; background:linear-gradient(110deg,#15374e,#091f31); }
.jut-body .jut-titulo { color:#efd7a0; text-transform:none; font:700 30px Georgia,serif; margin:0; }.jut-body .jut-subtitulo { color:#ddc899; font:italic 13px Georgia,serif; }
.jut-body .jut-abas { border:0; gap:8px; margin:0 0 12px; }.jut-body .jut-aba { background:#ead7ae; color:#243846; border:2px solid #b49550; font:700 14px Georgia,serif; padding:9px 20px; border-radius:3px; }.jut-body .jut-aba.active { background:#16394e; color:#ffe1a0; border-color:#b49550; }
.jut-body .jut-sub-abas { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
.jp-element { flex:1 1 140px; display:flex; align-items:center; justify-content:center; gap:10px; padding:9px 12px; min-height:56px; border:3px double #b69b5d; border-radius:3px; background:#263c49; color:#f6e6c6; cursor:pointer; font:700 15px Georgia,serif; }
.jp-element b { font-size:29px; }.jp-element small { display:block; font:10px Georgia,serif; margin-top:3px; }.jp-element.active { background:linear-gradient(115deg,#67301f,#9e4b27); border-color:#e3b95c; box-shadow:0 0 0 1px #9c741e; }
.jp-training { border:3px double #b79857; background:#fff1d1b8; margin-bottom:15px; }
.jut-body .jp-training .jut-elem-header { background:transparent; border:0; padding:10px 15px; display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.jut-body .jp-training .jut-elem-img { width:52px; height:52px; object-fit:contain; border-radius:0; }
.jut-body .jp-training .jut-elem-nome { color:#213e51 !important; font:bold 20px Georgia,serif; }.jut-body .jp-training .jut-elem-desc,.jut-body .jp-training .jut-elem-stat { color:#4a4234; font:12px Georgia,serif; }
.jp-training .jut-elem-info { flex:1; }.jp-training .jut-elem-stats { display:flex; gap:12px; margin-top:6px; }.jp-training .jut-elem-acoes { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.jut-body .jp-training .jut-locked-msg,.jp-combination { color:#624623; background:transparent; border:0; margin:0; padding:7px 15px; font:12px/1.4 Georgia,serif; }
.jp-layout { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(300px,1fr); gap:20px; align-items:start; }
.jp-library,.jp-detail { min-width:0; }
.jp-library>h2,.jp-detail>h2 { font:bold 16px Georgia,serif; color:#eddaad; background:#133247; padding:10px 13px; border:3px double #ad8d49; margin:0 0 12px; }
.jp-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.jp-technique { min-width:0; padding:7px; border:3px double #b99c59; border-radius:3px; background:#fff1d5d9; color:#243746; text-align:center; cursor:pointer; font-family:Georgia,serif; }
.jp-technique.selected { border-color:#a8651c; background:#fae4b2; box-shadow:0 0 0 2px #d9ac4c; }.jp-technique:hover { background:#fff4db; }
.jp-thumb { display:flex; align-items:center; justify-content:center; height:105px; background:#ddcaa3; border:1px solid #a98a4a; margin-bottom:8px; }.jp-thumb img { width:100%; height:100%; object-fit:contain; }.jp-thumb.no-art::after { content:'Imagem em breve'; font-size:12px; color:#61523d; }
.jp-technique strong { display:block; font-size:13px; min-height:32px; }.jp-technique small { display:block; font-size:10px; margin:6px 0 2px; color:#64503a; }
.jp-detail { border:3px double #ae8a42; background:#fff0d1e0; padding:0 12px 12px; }.jp-detail>h2 { margin:0 -12px 10px; border-left:0; border-right:0; border-top:0; }
.jut-body .jp-detail .jut-card { margin:0; padding:0; display:block; background:transparent; border:0; border-radius:0; box-shadow:none; clip-path:none; opacity:1; filter:none; transform:none; }
.jp-detail .jut-card::before,.jp-detail .jut-card::after { display:none; }
.jut-body .jp-detail .jut-card-img-wrap { height:260px; background:#102b3c; border:1px solid #a18244; border-radius:0; }.jut-body .jp-detail .jut-card-img { width:100%; height:100%; object-fit:contain; }.jp-detail .jut-card-img-overlay { display:none; }
.jut-body .jp-detail .jut-card-body { padding:12px 0; }.jut-body .jp-detail .jut-card-nome { display:none; }.jut-body .jp-detail .jut-card-desc { color:#302d25; font:13px/1.5 Georgia,serif; }.jut-body .jp-detail .jut-card-stat { color:#24435a; background:#e9d6ad; font-size:13px; }
.jut-body .jp-detail .jut-card-footer { padding:10px 0; background:transparent; border:0; }
.jut-body .jp-detail button,.jut-body .jp-training button { color:#ffe4ad; background:linear-gradient(#1c4157,#0c263a); border:3px double #b28e45; border-radius:4px; padding:10px 15px; font:700 13px Georgia,serif; cursor:pointer; }
.jut-body .jp-detail button:disabled { opacity:.65; cursor:not-allowed; }.jp-detail .jut-card-qtd-input { color:#203444; background:#fff5e3; border:1px solid #a7894b; }
.jp-requirements { border-top:1px solid #b7a06b; padding-top:8px; }.jp-requirements h3 { color:#19394e; font:bold 14px Georgia,serif; margin:0 0 5px; }.jp-requirements p { font:12px/1.5 Georgia,serif; margin:4px 0; }
.jp-detail .pvpf-ficha,.jp-detail .pvpf-resumo { color:#243b4b; }.jp-detail [data-pvpf-slot] { color:#243b4b; font-size:13px; }
.jut-page button:focus-visible { outline:3px solid #3f85b6; outline-offset:3px; }
.jut-body .jp-detail { --text:#223a4b; --text-dim:#4b4a40; --text-faint:#665941; --ember:#913d21; --ink-line:#b09b6b; }
.jut-body .jp-detail .jut-card { max-width:none; width:100%; text-align:left; }
.jut-body .jp-detail .jut-card-img-wrap { width:100%; margin:0; }
.jut-body .jp-training .jut-elem-stat { background:#ead8b2; border:1px solid #b69a61; }
.jut-body .jp-training .jut-elem-nivel-badge { color:#733c1f !important; filter:none; }
.jut-body .jut-page { box-sizing:border-box; width:calc(100% - 32px); padding:48px 100px 64px; }
@media(max-width:1000px) { .jut-body .jut-page { width:calc(100% - 20px); padding:40px 60px 48px; margin:18px 10px; }.jp-layout { grid-template-columns:minmax(0,1fr) 280px; gap:12px; }.jp-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:760px) { .jut-body .jut-page { padding:16px 20px; margin:12px 4px; }.jp-layout { grid-template-columns:1fr; }.jp-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }.jp-element { flex-basis:100px; padding:7px; }.jp-thumb { height:80px; }.jp-technique strong { font-size:11px; }.jp-training .jut-elem-acoes { width:100%; }.jut-body .jut-titulo { font-size:24px; }.jut-body .jp-detail .jut-card-img-wrap { height:240px; } }
/* Composição compacta do pergaminho. */
.jut-body .jut-page { max-width:1280px; padding:34px 84px 54px; }
.jut-body .jut-page-header { padding:10px 18px; margin-bottom:10px; }
.jut-body .jut-titulo { font-size:26px; }
.jut-body .jut-abas { margin-bottom:8px; }
.jut-body .jut-aba { padding:6px 18px; font-size:12px; }
.jut-body .jut-sub-abas { gap:5px; margin-bottom:12px; }
.jp-element { min-height:43px; padding:5px 10px; font-size:13px; }.jp-element b { font-size:24px; }
#jutsuContent,#kgContent { display:grid; grid-template-columns:166px minmax(0,1fr); gap:14px; align-items:start; }
.jp-layout { grid-template-columns:minmax(0,1.2fr) minmax(265px,1fr); gap:14px; }
.jp-training { margin:0; background:#fff0d4ba; }
.jut-body .jp-training .jut-elem-header { flex-direction:column; padding:12px 9px; gap:10px; text-align:center; }
.jut-body .jp-training .jut-elem-img { width:112px; height:112px; order:1; }
.jp-training .jut-elem-info { order:0; }.jut-body .jp-training .jut-elem-nome { font-size:17px; }
.jp-training .jut-elem-stats { flex-direction:column; gap:4px; }.jp-training .jut-elem-acoes { order:2; justify-content:center; }
.jut-body .jp-training button { font-size:11px; padding:8px; }.jp-training .jut-elem-nivel-badge { font-size:10px; }
.jp-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
.jp-technique { padding:7px 5px; background:#fff5dfb5; border:1px solid #ad8c49; }
.jp-thumb { height:76px; width:76px; margin:0 auto 7px; background:#e7d6b4; }
.jp-technique strong { font-size:12px; line-height:1.3; min-height:31px; }.jp-technique small { font-size:10px; margin-top:3px; }
.jp-library>h2,.jp-detail>h2 { font-size:13px; padding:8px; margin-bottom:9px; }
.jut-body .jp-detail .jut-card-img-wrap { height:190px; background:#e2d2b3; }
.jut-body .jp-detail .jut-card-desc { font-size:12px; text-align:left; }
.jp-detail .pvpf-bloco-titulo { font-size:10px; line-height:1.6; }.jp-detail .pvpf-linha { font-size:12px; text-align:left; }
@media(max-width:1100px) { #jutsuContent,#kgContent { grid-template-columns:140px minmax(0,1fr); gap:10px; }.jp-layout { grid-template-columns:minmax(0,1fr) 240px; gap:10px; }.jp-thumb { width:64px; height:64px; } }
@media(max-width:900px) { #jutsuContent,#kgContent { display:block; }.jp-training { margin-bottom:12px; }.jut-body .jp-training .jut-elem-header { flex-direction:row; text-align:left; }.jp-training .jut-elem-stats { flex-direction:row; flex-wrap:wrap; }.jut-body .jp-training .jut-elem-img { width:60px; height:60px; order:0; }.jp-layout { grid-template-columns:minmax(0,1fr) 250px; } }
@media(max-width:760px) { .jut-body .jut-page { padding:16px 20px; }.jp-layout { grid-template-columns:1fr; }.jp-thumb { width:64px; height:64px; }.jut-body .jp-detail .jut-card-img-wrap { height:200px; } }
.jp-training .jut-elem-info,.jp-training .jut-elem-acoes,.jp-training .jut-elem-stats { min-width:0; max-width:100%; width:100%; }
.jut-body .jp-training .jut-elem-desc { white-space:normal; line-height:1.4; }
.jut-body .jp-training .jut-elem-stat { min-width:0; padding:5px; }
.jut-body .jp-training button,.jut-body .jp-training .jut-elem-nivel-badge { min-width:0; max-width:100%; white-space:normal; overflow-wrap:anywhere; }
.jp-training .jut-elem-acoes { margin-left:0; }
/* Duas camadas independentes: cenário no body, papel somente no card. */
.jut-body .jut-page { position:relative; background:#f4e6c6 url('../img/jutsus/card-jutsus-2026.png') center/100% 100% no-repeat; border:3px double #96702d; box-shadow:0 10px 28px #281c1266; }
.jut-body .jut-page::before,.jut-body .jut-page::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); }
.jut-body .jut-page::before { left:-13px; }.jut-body .jut-page::after { right:-13px; }
@media(max-width:760px) { .jut-body .jut-page { margin-left:14px; margin-right:14px; width:calc(100% - 28px); }.jut-body .jut-page::before,.jut-body .jut-page::after { width:14px; }.jut-body .jut-page::before { left:-9px; }.jut-body .jut-page::after { right:-9px; } }
/* A moldura acompanha a arte quadrada; os indicadores ficam sobre ela. */
.jut-body .jp-detail .jut-card-img-wrap {
  width:min(190px,100%);
  height:auto;
  aspect-ratio:1;
  margin:0 auto;
}
.jut-body .jp-detail .jut-card-img,
.jut-body .jp-detail .jut-card-img-fallback {
  width:100%; height:100%;
}
