@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --bg:#070405;
  --shell:#0a0607;
  --panel:#13090b;
  --panel2:#1a0d10;
  --line:#4c361a;
  --line-soft:#2b2114;
  --gold:#c79a4a;
  --gold-light:#e4bf6d;
  --gold-pale:#f1d696;
  --red:#7f1f26;
  --red-light:#b6383d;
  --text:#d8d4ca;
  --muted:#8f8580;
}

*{box-sizing:border-box}
html{background:var(--bg)}
body{
  margin:0;
  min-height:100vh;
  color:var(--text);
  font:13px/1.55 Inter,Arial,sans-serif;
  background:
    radial-gradient(circle at 50% -8%,rgba(72,35,19,.32),transparent 34%),
    linear-gradient(#080506,#050304);
}
body:before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.10;
  background-image:linear-gradient(135deg,rgba(255,255,255,.025) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.025) 50%,rgba(255,255,255,.025) 75%,transparent 75%);
  background-size:16px 16px;
}

a{color:var(--gold);text-decoration:none;transition:.18s ease}
a:hover{color:var(--gold-pale)}

.site-shell{
  width:min(1460px,calc(100% - 34px));
  margin:18px auto;
  position:relative;
  background:#080506;
  border:1px solid #6b5126;
  box-shadow:0 0 0 1px #17100b inset,0 24px 80px rgba(0,0,0,.62);
}
.site-shell:before,.site-shell:after{
  content:"";
  position:absolute;
  z-index:20;
  top:-5px;
  width:51px;height:51px;
  opacity:.8;
}
.site-shell:before{left:-5px;border-left:1px solid var(--gold);border-top:1px solid var(--gold)}
.site-shell:after{right:-5px;border-right:1px solid var(--gold);border-top:1px solid var(--gold)}

.hero{
  height:410px;
  position:relative;
  overflow:hidden;
  border-bottom:1px solid #654a22;
  background:#120b07 url('realm-header.png') center 46%/cover no-repeat;
}
.hero:after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg,rgba(0,0,0,.16) 0%,rgba(0,0,0,.02) 48%,rgba(6,3,4,.88) 100%),
    radial-gradient(circle at 50% 40%,transparent 0%,rgba(0,0,0,.06) 42%,rgba(0,0,0,.44) 100%);
  pointer-events:none;
}
.hero-shade{
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(7,3,4,.68) 0%,rgba(7,3,4,.22) 24%,rgba(8,5,3,.02) 50%,rgba(7,3,4,.22) 76%,rgba(7,3,4,.68) 100%);
}
.hero-inner{
  position:relative;
  z-index:2;
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:24px 40px 28px;
}
.hero-crest{
  width:122px;
  height:122px;
  flex:0 0 auto;
  object-fit:contain;
  margin:0 0 6px;
  filter:drop-shadow(0 10px 16px #000) drop-shadow(0 0 13px rgba(153,18,25,.48));
}
.brand{width:100%;max-width:1080px}
.brand a{display:block}
.brand-kicker{
  display:block;
  margin-bottom:5px;
  color:#c8aa67;
  font:700 10px Cinzel,serif;
  letter-spacing:.42em;
}
.brand-title{
  display:block;
  color:#e7c675;
  font:700 clamp(46px,5vw,72px)/.98 Cinzel,Georgia,serif;
  letter-spacing:.045em;
  text-transform:uppercase;
  white-space:nowrap;
  text-shadow:0 2px 0 #4b2d0c,0 0 28px rgba(225,177,79,.18),0 5px 18px rgba(0,0,0,.7);
}
.brand-subtitle{
  margin-top:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  color:#d7ae5d;
  font:600 11px Cinzel,serif;
  letter-spacing:.17em;
}
.brand-subtitle i{width:66px;height:1px;background:linear-gradient(90deg,transparent,#b58232)}
.brand-subtitle i:last-child{transform:scaleX(-1)}
.hero-badge{
  margin-top:18px;
  display:grid;
  grid-template-columns:10px auto;
  align-items:start;
  justify-content:center;
  gap:0 10px;
  min-width:390px;
  max-width:min(520px,90vw);
  padding:13px 20px;
  border:1px solid #76562a;
  background:rgba(23,9,10,.88);
  box-shadow:0 0 0 2px rgba(74,34,21,.33) inset,0 10px 25px rgba(0,0,0,.36);
}
.hero-badge .pulse{width:8px;height:8px;margin-top:5px;border-radius:50%;background:#db3844;box-shadow:0 0 10px #d62e3c}
.hero-badge div{display:flex;align-items:baseline;justify-content:center;gap:7px;flex-wrap:wrap}
.hero-badge strong{display:block;color:#d66564;font:600 11px Cinzel,serif;white-space:nowrap}
.hero-badge small{display:block;margin-top:0;color:#a6958a;font-size:10px}

.nav{
  min-height:64px;
  display:grid;
  grid-template-columns:repeat(6,1fr);
  background:linear-gradient(#170b0d,#0c0708);
  border-bottom:1px solid #493719;
}
.nav a{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  min-width:0;
  padding:0 14px;
  color:#c9c5ba;
  border-right:1px solid #341a1c;
  font:600 10px Cinzel,serif;
  letter-spacing:.045em;
  text-transform:uppercase;
  white-space:nowrap;
}
.nav a:last-child{border-right:0}
.nav a:hover{color:#f1d58b;background:linear-gradient(rgba(102,34,34,.3),rgba(38,12,14,.15));box-shadow:inset 0 -2px #8f3437}
.nav-icon{color:#d6aa57;font-size:15px;line-height:1}

.ornament{height:30px;display:flex;align-items:center;gap:10px;color:#8f692e;font-size:8px}
.ornament:before,.ornament:after{content:"";height:1px;flex:1;background:linear-gradient(90deg,transparent,#4a361b)}
.ornament:after{transform:scaleX(-1)}

.main-layout{
  display:grid;
  grid-template-columns:236px minmax(0,1fr) 236px;
  gap:18px;
  align-items:start;
  padding:0 24px 24px;
}
.left-rail,.right-rail,.content-column{min-width:0}
.left-rail{display:flex;flex-direction:column;gap:16px}

.rail-card,.subnav,.content{
  position:relative;
  border:1px solid #4a381b;
  background:linear-gradient(145deg,#160b0d,#0b0708 72%);
  box-shadow:inset 0 0 0 4px #090607,0 10px 25px rgba(0,0,0,.28);
}
.rail-card:before,.subnav:before,.content:before{
  content:"";
  position:absolute;
  inset:5px;
  pointer-events:none;
  border:1px solid rgba(205,159,72,.12);
}
.rail-card{padding:17px 16px 15px}
.rail-card h2,.subnav h1{
  position:relative;
  z-index:1;
  margin:0 0 13px;
  padding:0 0 10px;
  border-bottom:1px solid #4a371d;
  color:#d9b463;
  font:600 13px Cinzel,serif;
  text-transform:uppercase;
}
.side-form{position:relative;z-index:1;margin:0 0 8px}
.side-form label{display:block;margin:0 0 9px;color:#a79790;font-size:10px}
input,select,textarea{
  width:100%;
  margin-top:4px;
  padding:8px 9px;
  color:#ddd4ca;
  border:1px solid #5b4420;
  border-radius:0;
  outline:none;
  background:#090607;
  font:12px Inter,Arial,sans-serif;
}
input:focus,select:focus,textarea:focus{border-color:#a47d37;box-shadow:0 0 0 1px rgba(211,166,74,.14)}
.side-actions{display:flex;gap:7px;margin:10px 0 2px}
input[type=submit],input[type=reset],input[type=button],button{
  width:auto;
  margin:0;
  padding:8px 12px;
  cursor:pointer;
  border:1px solid #85602c;
  color:#edd89e;
  background:linear-gradient(#7d272d,#3b1014);
  font:600 9px Cinzel,serif;
  text-transform:uppercase;
}
input[type=submit]:hover,input[type=reset]:hover,button:hover{background:linear-gradient(#9b343a,#4d171b);border-color:#b8873e}
.rail-card>a{
  position:relative;
  z-index:1;
  display:block;
  padding:8px 2px;
  border-bottom:1px solid #30191b;
  color:#aaa09a;
  font-size:10px;
}
.rail-card>a:before{content:"›";margin-right:7px;color:#c49a4d}
.rail-card>a:hover{color:#e0bd71}
.rail-action{text-align:center!important;border:1px solid #755326!important;margin:8px 0!important;background:#351014!important;color:#e8d49c!important}
.rail-action:before{display:none}

.content{min-height:690px;padding:30px 34px}
.content h1,.content h2,.content h3{font-family:Cinzel,Georgia,serif;font-weight:600;color:#dcb864}
.content h1{margin:0 0 6px;padding:0;font-size:18px;border:0}
.content h2{font-size:16px}
.content h3{font-size:13px}
.descr{padding-bottom:13px;margin-bottom:20px;border-bottom:1px solid #4a371d;color:#746a66;font-size:9px;letter-spacing:.07em;text-transform:uppercase}
.descr:before{content:"◆";margin-right:8px;color:#8d682d}

.news-feed{display:flex;flex-direction:column;gap:18px}
.news-card,.list-card,.character-card,.notice{
  position:relative;
  border:1px solid #68441f;
  background:linear-gradient(130deg,#231013,#130a0b);
  padding:19px 20px;
  box-shadow:0 9px 22px rgba(0,0,0,.14);
}
.news-meta{margin-bottom:6px;color:#ad8844;font:600 9px Cinzel,serif;letter-spacing:.08em;text-transform:uppercase}
.news-card h2{margin:0 0 9px;color:#e2bd67;font-size:15px;text-transform:uppercase}
.news-body{color:#d0ccc2;font-size:12px}

.subnav{padding:17px 15px 15px}
.subnav h1{font-size:13px}
.server-status{
  position:relative;
  z-index:1;
  margin-top:7px;
  padding:14px 12px;
  border:1px solid #493116;
  background:#0b0708;
}
.server-status strong{display:block;margin-bottom:9px;font:600 9px Cinzel,serif;text-transform:uppercase}
.server-status.online strong{color:#9fcf57}.server-status.offline strong{color:#cf5757}
.server-status span{display:block;margin:4px 0;color:#beb6ac;font-size:10px}.server-status b{font-weight:500;color:#efe5d8}
.subnav ul{position:relative;z-index:1;list-style:none;margin:10px 0 0;padding:0}
.subnav li{padding:9px 1px;border-bottom:1px solid #30191b}
.subnav li a{color:#aaa09a;font-size:10px}.subnav li a:before{content:"›";margin-right:8px;color:#bd9044}
.subnav li a:hover{color:#e1bf75}

.content p{color:#cbc6bc}
.content table{width:100%;border-collapse:collapse;background:#0c0708;font-size:11px}
.content th{background:#211013;color:#e1bd68;font-family:Cinzel,serif}
.content td,.content th{padding:10px;border:1px solid #342a1a;text-align:left}
.content tr:nth-child(even) td{background:#140a0c}
.rank-tabs{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 16px}
.rank-tabs a{padding:7px 9px;border:1px solid #4a371d;background:#0d0809;color:#aa9c92;font-size:10px}
.rank-tabs a.active,.rank-tabs a:hover{border-color:#8c692e;color:#e5c270;background:#251114}
.account-form button{justify-self:start}
.card-list{display:grid;gap:10px}.list-card h2{margin:0 0 5px}.character-card{margin-bottom:18px}
.notice{margin:0 0 18px;color:#d9d0c6}

.footer{border-top:1px solid #4b391c;background:#080506}
.bottom{
  min-height:68px;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:20px;
  padding:0 27px;
  color:#746a66;
  font-size:9px;
}
.bottom span:last-child{text-align:right}
.footer-mark{
  width:42px;height:42px;
  display:grid;place-items:center;
  border:1px solid #694e23;
  border-radius:50%;
  color:#a77a34;
  font-size:9px;
}

@media(max-width:1180px){
  .site-shell{width:calc(100% - 20px);margin:10px}
  .hero{height:390px}
  .hero-inner{padding-left:24px;padding-right:24px}
  .hero-crest{width:112px;height:112px}
  .brand-title{font-size:clamp(42px,6vw,62px)}
  .main-layout{grid-template-columns:220px minmax(0,1fr)}
  .right-rail{grid-column:1/-1}
  .right-rail .subnav{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
  .right-rail .subnav h1{grid-column:1/-1}
}

@media(max-width:820px){
  .hero{height:330px}
  .hero-inner{padding:18px 16px 22px}
  .hero-crest{position:static;transform:none;opacity:1;width:92px;height:92px;margin-bottom:4px}
  .brand{z-index:2}
  .brand-kicker{font-size:8px;letter-spacing:.30em}
  .brand-title{font-size:clamp(32px,8vw,46px);white-space:normal;line-height:1.02}
  .brand-subtitle{justify-content:center;font-size:8px;letter-spacing:.08em;margin-top:9px}
  .brand-subtitle i{width:35px}
  .hero-badge{display:grid;min-width:0;width:min(390px,92%);margin-top:13px;padding:10px 12px}
  .hero-badge div{gap:4px}
  .hero-badge strong{font-size:9px}.hero-badge small{font-size:8px}
  .nav{display:flex;overflow-x:auto}.nav a{flex:0 0 auto;min-height:56px;padding:0 18px}.nav-icon{display:none}
  .main-layout{grid-template-columns:1fr;padding:0 14px 18px}
  .left-rail{display:grid;grid-template-columns:1fr 1fr}.right-rail{grid-column:auto}.right-rail .subnav{display:block}
  .content{min-height:0}
}

@media(max-width:560px){
  .site-shell{width:100%;margin:0;border-left:0;border-right:0}
  .hero{height:305px}.hero-crest{width:82px;height:82px}.brand-title{font-size:31px}.brand-subtitle i{width:20px}.brand-subtitle{font-size:7px;letter-spacing:.04em}.hero-badge{width:94%;margin-top:11px}
  .left-rail{display:block}.left-rail .rail-card+ .rail-card{margin-top:12px}
  .content{padding:22px 17px}.main-layout{padding:0 8px 12px;gap:12px}
  .bottom{grid-template-columns:1fr;gap:7px;padding:16px;text-align:center}.bottom span:last-child{text-align:center}.footer-mark{display:none}
  .content table{display:block;overflow-x:auto;white-space:nowrap}
}

/* Account - formularios internos */
.account-form{display:grid;gap:18px;max-width:540px}
.account-form label{display:block;color:#a99b94;font-size:12px}
.account-form input:not([type=radio]):not([type=checkbox]),.account-form select{margin-top:7px;min-height:42px;padding:10px 12px}
.account-form .form-group{display:grid;gap:7px}
.account-form .gender-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:7px}
.account-form .gender-option{position:relative;display:flex;align-items:center;gap:10px;min-height:46px;padding:0 14px;border:1px solid #4a371d;background:#0d0809;color:#b8ada5;cursor:pointer;transition:.18s ease}
.account-form .gender-option:hover{border-color:#7d5d29;color:#e0bd71;background:#160b0d}
.account-form .gender-option:has(input:checked){border-color:#a47d37;background:linear-gradient(135deg,#251114,#12090a);color:#e5c270;box-shadow:inset 0 0 0 1px rgba(211,166,74,.08)}
.account-form .gender-option input[type=radio]{width:14px;height:14px;margin:0;accent-color:#c79a4a}
.account-form .form-actions{display:flex;align-items:center;gap:14px;margin-top:2px}
.account-form .form-actions button{min-height:38px;padding:9px 16px}
.account-back{display:inline-flex;align-items:center;gap:7px;margin-top:18px;color:#c79a4a;font-size:11px}
.account-back:before{content:'\2039';font-size:18px;line-height:1}
@media(max-width:560px){.account-form .gender-options{grid-template-columns:1fr}.account-form .form-actions{align-items:stretch;flex-direction:column}.account-form .form-actions button{width:100%}}

/* Minha Conta - gerenciamento */
.account-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0 0 20px}
.account-option{display:flex;align-items:center;justify-content:center;min-height:46px;padding:10px 14px;border:1px solid #5d4420;background:linear-gradient(135deg,#1c0d0f,#0d0809);color:#d7b76d;font:600 11px Cinzel,serif;text-transform:uppercase;text-align:center}
.account-option:hover{border-color:#956d2f;background:linear-gradient(135deg,#2b1216,#12090a);color:#f0d58e}
.recovery-card{overflow:hidden}
.recovery-key-row{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:12px}
.account-kicker{display:block;margin-bottom:4px;color:#8f8580;font-size:9px;letter-spacing:.09em;text-transform:uppercase}
.recovery-key-value{display:block;color:#eed18a;font:600 16px Cinzel,serif;letter-spacing:.08em;word-break:break-all}
.muted-key{color:#a69a91}
.status-pill{display:inline-flex;align-items:center;justify-content:center;min-width:72px;padding:5px 9px;border:1px solid #503d22;color:#a99d91;background:#0d0809;font-size:9px;text-transform:uppercase}
.status-pill.active{border-color:#4d6c34;color:#acd078;background:#0d120a}
.inline-action-form{display:inline;margin:0;padding:0}
.inline-action-form button{width:auto}
.text-action,.toggle-link{padding:0!important;border:0!important;background:none!important;box-shadow:none!important;font:600 11px Inter,Arial,sans-serif!important;text-transform:none!important}
.text-action{color:var(--gold)!important}
.text-action:hover{color:var(--gold-pale)!important}
.danger-text,.danger-link{color:#cf5b60!important}
.danger-text:hover,.danger-link:hover{color:#ef7b80!important}
.toggle-link.is-on{color:#d26467!important}
.toggle-link.is-off{color:#86b365!important}
.account-info-table th{width:220px}
.account-character-table td,.account-character-table th{vertical-align:middle}
.danger-notice{border-color:#743238;background:linear-gradient(130deg,#281013,#13090a)}
.danger-button{border-color:#9a3e43!important;background:linear-gradient(#8c282f,#471216)!important}
.danger-button:hover{border-color:#c55b60!important;background:linear-gradient(#a9343b,#5a181d)!important}
.account-form textarea{resize:vertical;min-height:130px}

@media(max-width:700px){
  .account-options{grid-template-columns:1fr}
  .recovery-key-row{align-items:flex-start;flex-direction:column}
  .account-info-table th{width:auto}
}

/* Recovery Key */
.recovery-warning{
  margin:13px 0;
  padding:11px 13px;
  border-left:2px solid #a96b32;
  background:rgba(104,68,31,.14);
  color:#c7b9aa;
  font-size:11px;
  line-height:1.55;
}

.character-online-dot{
  display:inline-block;
  width:9px;
  height:9px;
  margin-left:6px;
  border-radius:50%;
  background:#18c76f;
  box-shadow:0 0 6px rgba(24,199,111,.45);
  vertical-align:middle;
}

/* Guild logos */
.guild-profile-card {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.guild-profile-copy {
  min-width: 0;
  flex: 1;
}

.guild-logo {
  display: block;
  width: 64px;
  height: 64px;
  object-fit: contain;
  flex: 0 0 auto;
  border: 1px solid rgba(201, 154, 61, .45);
  background: rgba(0, 0, 0, .28);
  padding: 3px;
}

.guild-logo-small {
  width: 48px;
  height: 48px;
  margin: 0 auto;
}

.guild-logo-manager-row {
  display: flex;
  align-items: flex-start;
  gap: 18px;
}

.guild-logo-manager-row > div {
  flex: 1;
  min-width: 0;
}

.guild-logo-manager .search-form {
  margin-top: 0;
}

.guild-logo-manager input[type="file"] {
  width: 100%;
  box-sizing: border-box;
}

@media (max-width: 640px) {
  .guild-profile-card,
  .guild-logo-manager-row {
    flex-direction: column;
  }
}

/* Logged account actions */
.account-logged-actions{
  position:relative;
  z-index:1;
  display:grid;
  gap:9px;
  width:100%;
  margin-top:8px;
}
.account-logout-form{
  display:block;
  width:100%;
  margin:0;
  padding:0;
}
.rail-card .account-session-button{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:100%!important;
  min-height:41px!important;
  box-sizing:border-box!important;
  margin:0!important;
  padding:9px 12px!important;
  border-radius:0!important;
  text-decoration:none!important;
  font:600 10px Cinzel,Georgia,serif!important;
  letter-spacing:.02em!important;
  text-transform:uppercase!important;
  cursor:pointer;
  transition:background .15s ease,border-color .15s ease,color .15s ease;
}
.rail-card .account-session-button:before{
  display:none!important;
  content:none!important;
}
.rail-card .account-session-primary{
  border:1px solid #8b642c!important;
  background:linear-gradient(180deg,#671c23 0%,#3a0e13 100%)!important;
  color:#efd99d!important;
}
.rail-card .account-session-primary:hover,
.rail-card .account-session-primary:focus-visible{
  border-color:#b8873e!important;
  background:linear-gradient(180deg,#84303a 0%,#4a1218 100%)!important;
  color:#fff0bd!important;
  outline:none;
}
.rail-card .account-session-logout{
  border:1px solid #4a3026!important;
  background:#10090a!important;
  color:#a99b94!important;
}
.rail-card .account-session-logout:hover,
.rail-card .account-session-logout:focus-visible{
  border-color:#7b4038!important;
  background:#211013!important;
  color:#e5c5bd!important;
  outline:none;
}
.rail-card .account-session-primary:focus-visible,
.rail-card .account-session-logout:focus-visible{
  box-shadow:0 0 0 2px rgba(196,154,77,.18);
}