/* Reforço em CSS da dissuasão contra cópia de imagem (ver protect.js): navegadores que
   suportam -webkit-user-drag também bloqueiam o arraste nativo de <img>, e user-select evita
   que a imagem seja "selecionada" junto de um texto ao arrastar o mouse. Não se aplica a
   admin.html (arquivo não incluído lá). */
img{-webkit-user-drag:none;user-drag:none;user-select:none;-webkit-user-select:none}
/* Fundo de cada card dos Sistemas Divine: 1 a 3 fotos do jogo em assets/systems/cards/<slug>-1.jpg (…-2, …-3).
   Cada card alterna sozinho entre elas, com um leve zoom e deslocamento lateral contínuo (efeito Ken Burns),
   e reforça o movimento quando o mouse passa por cima. Faltando os arquivos, o card usa o fundo padrão sem quebrar nada. */
.system-card-media{position:absolute;inset:0;z-index:0;overflow:hidden;background:linear-gradient(150deg,rgba(211,165,79,.07),rgba(10,11,14,.2))}
.system-card-frame{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;filter:saturate(.65) brightness(.5) contrast(1.08);transform:scale(1.02)}
.system-card[data-frame-total="1"] .system-card-frame{opacity:1;animation:cardFrameSolo 26s ease-in-out infinite alternate}
.system-card[data-frame-total="2"] .system-card-frame{animation:cardFrameDuo 15s ease-in-out infinite}
.system-card[data-frame-total="2"] .system-card-frame:nth-of-type(2){animation-delay:7.5s}
.system-card[data-frame-total="3"] .system-card-frame{animation:cardFrameTrio 21s ease-in-out infinite}
.system-card[data-frame-total="3"] .system-card-frame:nth-of-type(2){animation-delay:7s}
.system-card[data-frame-total="3"] .system-card-frame:nth-of-type(3){animation-delay:14s}
@keyframes cardFrameSolo{0%{opacity:1;transform:scale(1.02) translateX(0)}100%{opacity:1;transform:scale(1.14) translateX(-2.4%)}}
@keyframes cardFrameDuo{0%,4%{opacity:0;transform:scale(1.02) translateX(0)}11%,42%{opacity:1;transform:scale(1.1) translateX(-1.8%)}48%,100%{opacity:0}}
@keyframes cardFrameTrio{0%,3%{opacity:0;transform:scale(1.02) translateX(0)}9%,28%{opacity:1;transform:scale(1.1) translateX(-2.2%)}34%,100%{opacity:0}}
.system-card:hover .system-card-frame{filter:saturate(.85) brightness(.68) contrast(1.1);animation-duration:9s!important}
.system-card-veil{position:absolute;inset:0;z-index:1;background:linear-gradient(0deg,rgba(9,10,13,.94) 0%,rgba(9,10,13,.72) 32%,rgba(9,10,13,.22) 62%,rgba(9,10,13,.35) 100%);transition:background .4s}
.system-card:not([data-has-media="true"]) .system-card-veil{background:rgba(15,17,21,.4)}
.system-card:hover .system-card-veil{background:linear-gradient(0deg,rgba(9,10,13,.9) 0%,rgba(9,10,13,.55) 40%,rgba(9,10,13,.08) 68%,rgba(9,10,13,.2) 100%)}
@media(prefers-reduced-motion:reduce){html:not(.force-motion) .system-card-frame{animation:none!important;opacity:1;transform:scale(1.03)}html:not(.force-motion) .system-card-frame:not(:first-of-type){display:none}}.guide-section{background:#0a0c10}.guide-shell{display:grid;grid-template-columns:280px minmax(0,1fr);border:1px solid var(--line);background:#101216;min-height:505px}.guide-sidebar{padding:24px 0;border-right:1px solid var(--line);background:rgba(0,0,0,.12)}.guide-sidebar-title{display:block;padding:0 22px 17px;color:#8d8f92;text-transform:uppercase;letter-spacing:.14em;font:600 10px "Barlow Condensed",sans-serif}.guide-nav{display:grid;max-height:385px;overflow-y:auto}.guide-nav button{appearance:none;border:0;border-left:2px solid transparent;background:transparent;padding:11px 20px;text-align:left;color:#aaa9a5;cursor:pointer;font:500 13px Manrope,sans-serif;transition:.2s}.guide-nav button{display:flex;align-items:center;gap:10px}.guide-nav button .guide-nav-icon{width:24px;height:24px;flex:none;display:flex;align-items:center;justify-content:center}.guide-nav button .guide-nav-icon img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 2px 5px rgba(0,0,0,.55));transition:transform .3s ease}.guide-nav button:hover .guide-nav-icon img,.guide-nav button.is-active .guide-nav-icon img{transform:scale(1.18)}.guide-nav button:hover,.guide-nav button.is-active{background:rgba(211,165,79,.075);color:var(--gold-pale);border-left-color:var(--gold)}.guide-legacy{display:block;margin:20px 22px 0;color:var(--gold-pale);text-transform:uppercase;text-decoration:none;font:600 10px "Barlow Condensed",sans-serif;letter-spacing:.12em}.guide-content{position:relative;overflow:hidden;padding:47px 50px;background:linear-gradient(135deg,rgba(211,165,79,.05),transparent 36%);background-size:cover;background-position:right center;transition:background-image .5s ease}
/* Banner completo por invasão (assets/guide/<slug>.jpg): mostra só a parte direita da arte, com um degradê pra manter o texto legível à esquerda */
.guide-content.has-banner{background-image:linear-gradient(100deg,#101216 0%,rgba(16,18,22,.95) 34%,rgba(16,18,22,.62) 58%,rgba(16,18,22,.18) 82%,transparent 100%),var(--guide-banner)}
.guide-banner-mob{position:absolute;right:28px;bottom:22px;width:120px;height:120px;--mob-accent:var(--gold);pointer-events:none;z-index:2;transition:width .4s ease,height .4s ease,top .4s ease,right .4s ease,bottom .4s ease,background .4s ease}
.guide-banner-mob img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 10px 22px rgba(0,0,0,.55)) drop-shadow(0 0 18px var(--mob-accent));opacity:.9;transition:opacity .4s ease,filter .4s ease}
/* Quando existe um banner completo, o ícone do mob vira um selo circular no canto superior direito
   em vez de ocupar o canto inferior. Assim os dois convivem sem brigar pela mesma área da arte. */
.guide-content.has-banner .guide-banner-mob{top:26px;right:26px;bottom:auto;width:60px;height:60px;padding:9px;border-radius:50%;background:radial-gradient(circle at 50% 42%,rgba(10,11,14,.82),rgba(10,11,14,.28) 72%,transparent);border:1px solid rgba(227,189,111,.28);box-shadow:0 6px 18px rgba(0,0,0,.4)}
.guide-content.has-banner .guide-banner-mob img{opacity:1;filter:drop-shadow(0 3px 8px rgba(0,0,0,.6)) drop-shadow(0 0 12px var(--mob-accent))}
@media(max-width:820px){.guide-content.has-banner{background-position:75% center}}
@media(max-width:540px){.guide-banner-mob{width:80px;height:80px;right:18px;bottom:16px}.guide-content.has-banner .guide-banner-mob{width:48px;height:48px;top:18px;right:18px}}.guide-tier{color:var(--gold);font:600 11px "Barlow Condensed",sans-serif;letter-spacing:.16em;text-transform:uppercase}.guide-content h3{font:600 38px/1.15 Cinzel,serif;margin:13px 0}.guide-rule{width:52px;height:1px;background:var(--gold);margin:22px 0 34px}.guide-meta{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:29px}.guide-meta div{padding:17px 10px 17px 0;display:grid;gap:5px}.guide-meta div+div{border-left:1px solid var(--line);padding-left:21px}.guide-meta span{color:#7f8186;text-transform:uppercase;font:600 10px "Barlow Condensed",sans-serif;letter-spacing:.12em}.guide-meta b{color:#dfd9cd;font-size:13px}.guide-tip{display:flex;gap:15px;max-width:580px;padding:18px 20px;background:rgba(211,165,79,.06);border-left:1px solid var(--gold)}.guide-tip>span{color:var(--gold);font-size:19px}.guide-tip strong{color:var(--gold-pale);font:600 12px "Barlow Condensed",sans-serif;text-transform:uppercase;letter-spacing:.1em}.guide-tip p{color:#a2a3a7;line-height:1.6;margin:7px 0 0;font-size:12px}@media(max-width:820px){.guide-shell{grid-template-columns:1fr}.guide-sidebar{border-right:0;border-bottom:1px solid var(--line)}.guide-nav{grid-template-columns:repeat(2,1fr);max-height:270px}.guide-nav button{border-left:0;border-bottom:1px solid transparent}.guide-nav button.is-active{border-left:0;border-bottom-color:var(--gold)}.guide-legacy{margin-bottom:20px}.guide-content{padding:35px 28px}}@media(max-width:540px){.guide-nav{grid-template-columns:1fr}.guide-content{padding:28px 20px}.guide-content h3{font-size:30px}.guide-meta{grid-template-columns:1fr}.guide-meta div+div{border-left:0;border-top:1px solid var(--line);padding-left:0}}
/* Galial conta: o Totem de Lorencia narra cada invasao no guia */
.galial-conta{display:grid;grid-template-columns:156px minmax(0,1fr);gap:20px;align-items:end;max-width:640px;margin-top:26px;position:relative;z-index:3}
.galial-retrato{position:relative;width:156px;height:156px;align-self:end}
.galial-pose{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 10px 16px rgba(0,0,0,.6)) drop-shadow(0 0 14px rgba(211,165,79,.18));animation:galial-respira 4.6s ease-in-out infinite;transform-origin:50% 90%}
.galial-emote{position:absolute;width:58px;height:58px;right:-6px;top:-10px;animation:galial-emote-pop .6s cubic-bezier(.3,1.7,.5,1) both,galial-emote-bob 2.6s ease-in-out .7s infinite}
.galial-balao{position:relative;background:linear-gradient(160deg,rgba(24,22,19,.94),rgba(14,15,19,.9));border:1px solid rgba(227,189,111,.26);border-radius:14px;padding:16px 20px 18px;box-shadow:0 12px 30px rgba(0,0,0,.35)}
.galial-balao:before{content:'';position:absolute;left:-8px;bottom:30px;width:14px;height:14px;background:#17161a;border-left:1px solid rgba(227,189,111,.26);border-bottom:1px solid rgba(227,189,111,.26);transform:rotate(45deg)}
.galial-nome{display:block;color:var(--gold);font:600 11px "Barlow Condensed",sans-serif;letter-spacing:.16em;text-transform:uppercase}
.galial-balao p{color:#cdc8bc;font-size:13px;line-height:1.7;margin:9px 0 0;animation:galial-fala .55s ease both;animation-delay:calc(.25s + var(--i,0) * .35s)}
@keyframes galial-respira{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-4px) rotate(-.8deg)}}
@keyframes galial-emote-pop{0%{opacity:0;transform:scale(.2) translateY(12px)}100%{opacity:1;transform:scale(1) translateY(0)}}
@keyframes galial-emote-bob{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-5px) rotate(6deg)}}
@keyframes galial-fala{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media(max-width:540px){.galial-conta{grid-template-columns:84px minmax(0,1fr);gap:14px}.galial-retrato{width:84px;height:84px}.galial-emote{width:36px;height:36px;right:-6px;top:-8px}.galial-balao{padding:14px 16px}.galial-balao p{font-size:12.5px}}
@media(prefers-reduced-motion:reduce){html:not(.force-motion) .galial-pose,html:not(.force-motion) .galial-emote,html:not(.force-motion) .galial-balao p{animation:none}}
/* Guia: no computador a lista de invasões acompanha a altura do painel (ele cresceu com o Galial) */
@media(min-width:821px){.guide-sidebar{display:flex;flex-direction:column}.guide-nav{max-height:none;flex:1 1 0;min-height:0}}

/* Guia: invasão desligada no AdminCP (cinza + aviso do Beta) */
.guide-nav button.is-off{color:#6f7176}.guide-nav button.is-off .guide-nav-icon img{filter:grayscale(1) brightness(.7)}
.guide-content.is-off.has-banner{background-color:#101216;background-blend-mode:normal,luminosity}
.guide-content.is-off>:not(.guide-off){filter:grayscale(1);opacity:.6}
.guide-off{position:relative;z-index:3;max-width:580px;margin:0 0 26px;padding:14px 18px;border:1px solid rgba(211,165,79,.55);border-left-width:3px;background:linear-gradient(100deg,rgba(211,165,79,.16),rgba(16,18,22,.9));box-shadow:0 0 22px rgba(211,165,79,.12)}
.guide-off strong{display:block;color:var(--gold);font:600 12px "Barlow Condensed",sans-serif;letter-spacing:.12em;text-transform:uppercase}
.guide-off p{margin:6px 0 0;color:var(--gold-pale);font-size:13px;line-height:1.55}