﻿@font-face{font-family:Montserrat;src:url('/body.ttf');font-weight:400;font-display:swap}
@font-face{font-family:Montserrat;src:url('/headline.otf');font-weight:800 900;font-display:swap}
:root{font-family:Montserrat,Arial,sans-serif;color:#fff;background:#14104b;color-scheme:dark}*{box-sizing:border-box}body{margin:0;min-height:100svh;background:radial-gradient(ellipse at 90% 65%,#3d38b5 0,transparent 53%),linear-gradient(135deg,#090923,#1d1765 65%,#292481);display:flex;flex-direction:column}a{color:inherit;text-decoration:none}.hidden{display:none!important}
.site-header,.site-footer,.auth{width:min(1180px,calc(100% - 96px));margin-inline:auto}.site-header{display:flex;justify-content:space-between;align-items:center;padding:34px 0}.wordmark{font-size:23px;font-weight:900;letter-spacing:-1px;line-height:1}.wordmark span{display:block;font-size:9px;letter-spacing:5px;margin-top:7px}.header-label{font-size:10px;letter-spacing:2px;color:#c4bfe7}.auth{flex:1;padding:38px 0 55px}.hero{display:grid;grid-template-columns:1fr 1.2fr;align-items:center;gap:35px;min-height:430px}h1{font-size:clamp(38px,4.8vw,65px);font-weight:900;line-height:.98;letter-spacing:-2px;margin:0 0 25px}.hero-copy p{font-family:Arial,sans-serif;max-width:430px;font-size:18px;line-height:1.55;margin:0;color:#eae8ff}
.hero-art{position:relative;display:grid;place-items:center;min-width:0;padding:30px 0 35px;isolation:isolate}.hero-art img{position:relative;width:88%;max-width:460px;aspect-ratio:1;object-fit:cover;border-radius:50%;transform:rotate(-7deg);box-shadow:18px 22px 0 #0d0b36,20px 24px 0 #736ae1}.art-word{position:absolute;top:-30px;right:-10px;font-size:clamp(120px,20vw,270px);font-weight:900;font-style:italic;color:transparent;-webkit-text-stroke:1px #7770c9;opacity:.38;z-index:-1;letter-spacing:-18px}.art-caption{position:absolute;bottom:2px;right:28px;background:#ffcf42;color:#171126;font-size:10px;font-weight:800;letter-spacing:1.5px;padding:13px 18px;transform:rotate(-4deg)}
.access{text-align:center;margin-top:35px}.discord-button{display:inline-flex;justify-content:center;align-items:center;gap:14px;min-height:60px;padding:18px 32px;border-radius:9px;background:#fff;color:#201a47;font-size:16px;font-weight:800;transition:background .15s,transform .15s;box-shadow:0 5px 0 #0c092b33}.discord-button svg{width:26px;height:26px;fill:currentColor}.discord-button:hover{background:#ffcf42;transform:translateY(-2px)}a:focus-visible{outline:3px solid #ffcf42;outline-offset:6px}.discord-button.disabled{opacity:.65;cursor:not-allowed}.access-note{font-family:Arial,sans-serif;font-size:13px;color:#c6c2e6;margin:18px 0 0}.auth-notice{max-width:540px;margin:20px auto 0;padding:14px 18px;background:#171137;border-left:3px solid #ffcf42;text-align:left;font-size:14px;line-height:1.5}.profile-card{display:flex;align-items:center;justify-content:center;gap:14px;margin-bottom:22px;text-align:left}.user-avatar{width:50px;height:50px;border-radius:50%}.profile-card span,.profile-card small{display:block;font-size:12px;color:#c6c2e6;overflow-wrap:anywhere}.profile-card strong{display:block;margin:5px 0}.logout{display:block;width:fit-content;margin:18px auto 0;font-size:13px;text-decoration:underline;text-underline-offset:4px}.site-footer{display:flex;justify-content:space-between;gap:20px;padding:23px 0;border-top:1px solid #ffffff19;font-size:10px;letter-spacing:1px;color:#b4aedb}
@media(min-width:1500px){.auth{display:flex;flex-direction:column;justify-content:center}.hero{min-height:480px}}
@media(max-width:760px){.site-header,.site-footer,.auth{width:calc(100% - 40px)}.site-header{padding:26px 0}.header-label{font-size:8px;letter-spacing:1px}.hero{grid-template-columns:1fr;gap:18px}.auth{padding-top:28px}.hero-copy{max-width:520px}h1{font-size:clamp(39px,9vw,62px)}.hero-copy p{font-size:16px}.hero-art{width:min(100%,390px);justify-self:center;padding:10px 0 30px}.hero-art img{width:75%}.art-word{font-size:170px;top:0;right:15px}.art-caption{font-size:8px;right:5px}.access{margin-top:22px}.discord-button{width:100%;max-width:360px;font-size:14px}.site-footer{font-size:8px;letter-spacing:.5px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}
/* Entrada sem banner. */
.hero{grid-template-columns:1fr;min-height:0;text-align:center;padding:35px 0 10px}
.hero-copy{max-width:760px;margin-inline:auto}
.hero-copy p{max-width:510px;margin-inline:auto}
@media(max-width:760px){.hero{padding:20px 0 10px}}
/* Texto da entrada alinhado à esquerda. */
.hero{text-align:left}
.hero-copy{margin-inline:0}
.hero-copy p{margin-inline:0}
/* Nome da cidade como tipografia de fundo. */
.auth{position:relative;isolation:isolate}
.auth::before{content:"Periferia RP";position:absolute;z-index:-1;right:0;top:24%;max-width:100%;font-size:clamp(64px,12vw,170px);font-weight:900;line-height:1;letter-spacing:-.06em;white-space:nowrap;color:transparent;-webkit-text-stroke:1px rgba(190,181,255,.22);transform:rotate(-8deg);pointer-events:none;user-select:none}
@media(max-width:760px){.auth::before{top:45%;font-size:clamp(44px,12vw,90px);-webkit-text-stroke-color:rgba(190,181,255,.16)}}
/* Tipografia decorativa na lateral direita. */
.auth::before{left:auto;right:0;top:110px;width:46%;max-width:none;content:"Periferia\A RP";white-space:pre-line;text-align:right;font-size:clamp(60px,7.5vw,108px);line-height:1.05;letter-spacing:-.05em;transform:rotate(-8deg)}
@media(max-width:760px){.auth::before{top:auto;bottom:8px;width:58%;font-size:clamp(35px,9vw,64px);opacity:.6}}
