/* Poke Universe brand layer */
body{background:linear-gradient(rgba(2,7,19,.78),rgba(2,7,19,.96)),url('../img/poke-universe-hero.jpg') center top/cover fixed}

/* "You need to be logged in" / restricted-access notice (protected.php) */
.protected-notice{max-width:520px;margin:20px auto;padding:44px 32px;text-align:center;border:1px solid var(--line);border-radius:18px;background:rgba(19,36,59,.55)}
.protected-notice i{display:grid;place-items:center;width:64px;height:64px;margin:0 auto 18px;border-radius:50%;color:var(--cyan);background:rgba(84,207,255,.1);font-size:26px}
.protected-notice h1{margin:0 0 10px;font:700 26px Rajdhani,sans-serif;text-transform:uppercase;color:#fff}
.protected-notice p{margin:0 0 22px;color:var(--muted)}
.protected-notice-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}

/* Center the main nav links in the bar regardless of how wide the brand logo or the
   right-side actions are - position:absolute + translateX keeps it centered either way. */
.nav-inner{position:relative}
.nav-links{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);margin:0}
@media(max-width:1100px){.nav-links{position:static;transform:none;left:auto;top:auto}}
.site-nav{border-color:rgba(84,207,255,.35);background:rgba(2,7,19,.9);box-shadow:0 12px 35px rgba(0,20,70,.45),0 0 28px rgba(8,125,255,.08)}
.brand-logo{filter:drop-shadow(0 0 14px rgba(84,207,255,.34))}
.button-primary,.submitButton,input[type=submit]{color:#fff!important;background:linear-gradient(135deg,var(--cyan),var(--blue));box-shadow:0 8px 26px rgba(8,125,255,.35)}
.hero{border-color:rgba(84,207,255,.34);background:#020713 url('../img/poke-universe-hero.jpg') 85% center/cover no-repeat;box-shadow:var(--shadow),inset 0 0 80px rgba(8,125,255,.08)}
.hero-inner{background-position:85% center}
.hero-overlay{background:linear-gradient(90deg,rgba(2,7,19,.98) 0%,rgba(2,7,19,.9) 38%,rgba(2,7,19,.25) 66%,rgba(2,7,19,.08) 100%),linear-gradient(0deg,rgba(2,7,19,.76),transparent 55%)}

/* Homepage hero: the new banner is a finished poster (logo + tagline baked in), so it is
   shown whole instead of cropped with our own text laid over it — that combination always
   collided with the art. Image sits full-width/contain up top; CTA buttons live in the
   quiet solid-color strip below it instead of on top of the artwork. */
.hero-home{min-height:clamp(380px,calc(40vw + 130px),730px);background:#05010f url('../img/poke-universe-hero.jpg') center top/contain no-repeat}
.hero-home .hero-overlay{background:linear-gradient(0deg,rgba(5,1,15,.96) 0%,rgba(5,1,15,0) 22%)}
.hero-home .eyebrow,.hero-home h1,.hero-home p{display:none}
.hero-home .hero-content{position:absolute;left:0;right:0;bottom:26px;width:100%;max-width:none;padding:0}
.hero-home .hero-actions{justify-content:center;max-width:none}
.hero-home .hero-badge{top:22px;right:22px;bottom:auto}
.hero h1 span{color:var(--cyan);text-shadow:0 0 30px rgba(84,207,255,.38)}
.feature-grid i{color:var(--cyan);background:rgba(84,207,255,.1)}
.feedContainer,.site-footer{background:rgba(2,7,19,.9)}
/* Small "3x4"-style portrait thumbnail — previously unconstrained, which let it render
   at the source image's full natural size (huge, near full-width). */
.account-avatar{width:78px;height:104px;flex:none;overflow:hidden;border-radius:10px;border-width:2px;border-color:var(--cyan);background:radial-gradient(circle at 50% 35%,#174e83,#071329 68%);box-shadow:0 0 0 6px rgba(84,207,255,.05),0 0 24px rgba(8,125,255,.3)}
.account-avatar:after{background:var(--cyan)}
.account-avatar img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 12%;transform:scale(1.08);transform-origin:center top}

/* Dark cohesion layer — reference-theme.css keeps its layout/sizing rules (logo size,
   column widths, spacing), this block only neutralizes the light colors it introduces
   so every surface matches the dark Poke Universe theme instead of mixing light + dark. */
body{color:var(--text)}
.nav-links a{color:var(--muted)}
.nav-links a:hover,.page_index .nav-links a:first-child{color:#fff}
.nav-actions .button-ghost{color:#eaf3ff;border-color:var(--line);background:rgba(255,255,255,.06)}
.section-heading h2,.news-heading h2{color:#fff}
.section-heading span{color:var(--cyan)}
.section-heading p{color:var(--muted)}
.quick-links a{border-color:var(--line);color:var(--text);background:linear-gradient(145deg,rgba(19,36,59,.95),rgba(10,23,40,.95));box-shadow:0 10px 25px rgba(0,0,0,.18)}
.quick-links a:hover{border-color:var(--cyan);color:var(--text);box-shadow:0 16px 34px rgba(0,0,0,.28)}
.quick-links small{color:var(--muted)}
.feature-grid article{border-color:var(--line);background:rgba(19,36,59,.65);box-shadow:none}
.feature-grid article:hover{border-color:rgba(84,207,255,.7)}
.feature-grid h3{color:#fff}
.feature-grid p{color:var(--muted)}
.leftPane>.well,.rightPane>.well,.postHolder>.well,.widget,.search_widget,table{border-color:var(--line);background:linear-gradient(145deg,rgba(19,36,59,.88),rgba(10,23,40,.92));box-shadow:none}
.header,.zheadline{color:#fff!important;background:linear-gradient(90deg,rgba(84,207,255,.16),transparent);border-bottom-color:var(--line)}
.header a,.zheadline a{color:var(--cyan)}
.body,.postHolder .body{color:var(--muted)}
table{color:var(--text)}
td,th{border-color:rgba(23,78,131,.4)}
tr:nth-child(even){background:rgba(255,255,255,.02)}
input,select,textarea{color:#fff;background:#081425;border-color:var(--line)}
input:focus,select:focus,textarea:focus{border-color:var(--cyan)}
label{color:#aebfd2}
.widget ul li{border-color:rgba(23,78,131,.4)}
.player-profile,.account-characters{border-color:var(--line);background:rgba(7,16,31,.9);box-shadow:none}
.profile-identity{border-color:var(--line);background:radial-gradient(circle at 12% 50%,rgba(84,207,255,.14),transparent 28%),rgba(10,23,40,.6)}
.profile-avatar{background:#081425}
.profile-name h1,.profile-details>li>b,.profile-details>.header-ok{color:#fff}
.profile-name>span{color:var(--cyan)}
.profile-summary{background:var(--line)}
.profile-summary>li{background:rgba(10,23,40,.85);color:var(--text)}
.profile-details>li{border-color:var(--line);background:rgba(10,23,40,.6)}
.profile-details li li{border-color:rgba(23,78,131,.4);color:var(--muted)}
.page_myaccount .feedContainer,.page_characterprofile .feedContainer{background:rgba(7,16,31,.9)}
.account-strip{border-color:var(--line);background:rgba(10,23,40,.6)}
.account-stat{color:#fff;border-color:var(--line)}
.account-stat:first-child{background:rgba(10,23,40,.85)}
.account-stat>i{color:var(--cyan)}
.account-stat small{color:var(--muted)}
.account-actions a{color:var(--cyan);border-color:var(--line);background:rgba(10,23,40,.6)}
.account-characters>h1{color:#fff}
.account-characters>h2,.empty-characters{color:var(--muted)}
.empty-characters{border-color:var(--line)}
.empty-characters strong{color:#fff}

/* Recovery key one-time reveal box */
.recovery-key-box{display:flex;flex-direction:column;gap:8px}
.recovery-key-code{display:block;padding:14px 16px;border:1px dashed rgba(255,214,92,.5);border-radius:10px;background:rgba(0,0,0,.25);color:#ffd65c;font:700 20px/1.3 'Courier New',monospace;letter-spacing:2px;text-align:center;user-select:all}
.recovery-key-hint{margin:0;font-size:12px;opacity:.85}

/* Professional multi-column footer (replaces the old single-row .site-footer layout). */
.site-footer{display:block;margin:0 0 24px;padding:34px 30px 20px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(180deg,rgba(9,20,38,.92),rgba(2,7,19,.96));box-shadow:0 -20px 50px rgba(0,0,0,.2) inset}
.footer-top{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:28px}
.footer-brand p{margin:10px 0 14px;max-width:260px;color:var(--muted);font-size:13px;line-height:1.6}
.footer-logo{display:flex;align-items:center;gap:10px;color:#fff;font-family:Rajdhani,sans-serif;font-weight:700;font-size:19px;text-transform:uppercase}
.footer-logo:hover{color:#fff}
.footer-logo .brand-ball{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:linear-gradient(#ee4054 0 44%,#18273b 44% 56%,#f4f8ff 56%);border:3px solid #07101f;box-shadow:0 0 14px rgba(84,207,255,.3)}
.footer-logo .brand-ball i{font-size:8px;color:#fff}
.footer-social{display:flex;gap:8px}
.footer-social a{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;color:var(--cyan);background:rgba(84,207,255,.08);border:1px solid var(--line);font-size:15px}
.footer-social a:hover{color:#fff;border-color:var(--cyan);background:rgba(84,207,255,.18)}
.footer-col h4{margin:0 0 14px;color:#fff;font:700 13px Rajdhani,sans-serif;letter-spacing:1px;text-transform:uppercase}
.footer-col{display:flex;flex-direction:column;gap:10px}
.footer-col a{color:var(--muted);font-size:13px}
.footer-col a:hover{color:var(--cyan)}
.footer-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;margin-top:28px;padding-top:16px;border-top:1px solid var(--line);color:var(--muted);font-size:11px}
.footer-meta{opacity:.7}
@media(max-width:900px){.footer-top{grid-template-columns:1fr 1fr;row-gap:26px}.footer-brand{grid-column:1/-1}}
@media(max-width:520px){.footer-top{grid-template-columns:1fr;text-align:center}.footer-brand{align-items:center;display:flex;flex-direction:column}.footer-social{justify-content:center}.footer-bottom{justify-content:center;text-align:center}}


/* Mobile fix: hero-home reserves height for the desktop-sized poster, but on narrow
   screens the "contain" image itself only fills ~40% of the viewport width in height,
   leaving a big empty dark gap below it. Shrink the reserved box to hug the image's
   real rendered size at each width instead (40vw matches the artwork's own 0.4 ratio). */
@media(max-width:700px){
  .hero-home{min-height:clamp(150px,40vw,380px)}
}


/* Mobile fix: the -36px negative top margin (reference-theme.css) pulls the content card
   up so far that it overlaps the hero's rounded corner / "SERVIDOR ONLINE" badge, cutting
   into it visually. A small positive gap avoids that collision. */
@media(max-width:700px){
  .feedContainer{margin-top:14px}
}