:root{
  --bg0:#05070a;
  --bg1:#0b0f15;
  --line2:rgba(255,180,70,.12);
  --text:#cdd6e2;
  --muted:#93a1b5;
  --gold:#d6a24a;
  --ember:#ff7a18;
  --success:#36d399;
  --shadow: 0 14px 40px rgba(0,0,0,.55);
  --radius: 14px;
  --font: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family:var(--font);
  color:var(--text);
  background:
    url("../images/embers.png") repeat,
    url("../images/bg.jpg") center top / cover no-repeat,
    radial-gradient(1200px 600px at 50% 10%, rgba(255,122,24,.12), transparent 60%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
}
a{ color:var(--gold); text-decoration:none; }
a:hover{ color:#ffd08a; }
.container{ max-width:1420px; margin:0 auto; padding:18px 18px 40px; }
.topbar{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:14px 16px; border:1px solid var(--line2); border-radius:var(--radius);
  background: linear-gradient(180deg, rgba(12,16,22,.88), rgba(8,10,14,.70));
  box-shadow: var(--shadow); position: sticky; top: 10px; backdrop-filter: blur(8px); z-index: 20;
}
.brand{ display:flex; align-items:center; gap:12px; min-width:260px; }
.brand img{ height:44px; width:auto; filter: drop-shadow(0 10px 18px rgba(0,0,0,.6)); }
.brand .subtitle{ display:flex; flex-direction:column; line-height:1.1; }
.brand .subtitle b{ font-size:14px; letter-spacing:.18em; color:#f5e6c9; text-transform:uppercase; }
.brand .subtitle span{ font-size:12px; color:var(--muted); }
.status-pill{
  display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:999px;
  border:1px solid var(--line2); background: rgba(0,0,0,.25);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.02); white-space:nowrap;
}
.dot{ width:10px; height:10px; border-radius:999px; background: var(--success); box-shadow: 0 0 0 4px rgba(54,211,153,.12); }
.dot.off{ background:#888; box-shadow:none; }
.status-pill strong{ color:#eaf1ff; font-size:13px; }
.status-pill small{ color:var(--muted); font-size:12px; }
.nav{ display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end; }
.nav a{ padding:10px 12px; border-radius:999px; border:1px solid transparent; color:#e9edf7; font-size:13px; }
.nav a:hover{ border-color: var(--line2); background: rgba(255,122,24,.07); }
.grid{ display:grid; grid-template-columns: 300px 1fr 300px; gap:18px; margin-top:16px; }
@media (max-width:1200px){ .grid{ grid-template-columns:290px 1fr; } .right{ display:none; } }
@media (max-width:820px){ .topbar{ flex-wrap:wrap; position:relative; top:auto; } .grid{ grid-template-columns:1fr; } }
.panel{
  border:1px solid var(--line2); border-radius:var(--radius);
  background: linear-gradient(180deg, rgba(13,18,26,.82), rgba(8,10,14,.70));
  box-shadow: var(--shadow); overflow:hidden;
}
.panel + .panel{ margin-top:16px; }
.panel-h{ display:flex; align-items:center; justify-content:space-between; padding:12px 14px;
  border-bottom:1px solid rgba(255,180,70,.10);
  background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,0));
}
.panel-h h3{ margin:0; font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:#f1e3c8; display:flex; align-items:center; gap:10px; }
.panel-h h3:before{ content:""; width:8px; height:8px; border-radius:999px; background: var(--ember); box-shadow: 0 0 0 4px rgba(255,122,24,.10); }
.panel-b{ padding:14px; }
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 12px; border-radius:10px; border:1px solid rgba(255,180,70,.18);
  background: linear-gradient(180deg, rgba(255,122,24,.14), rgba(0,0,0,.20));
  color:#fff; cursor:pointer; font-weight:600;
}
.btn:hover{ background: linear-gradient(180deg, rgba(255,122,24,.20), rgba(0,0,0,.20)); }
.btn.full{ width:100%; }
.input{ width:100%; padding:10px 12px; border-radius:10px; border:1px solid rgba(255,180,70,.16); background: rgba(0,0,0,.28); color:#fff; outline:none; }
.input:focus{ border-color: rgba(255,180,70,.35); box-shadow: 0 0 0 4px rgba(255,122,24,.10); }
.field{ margin-bottom:10px; }
.muted{ color:var(--muted); font-size:12px; }
.content{ min-height:560px; }
.footer{ margin-top:28px; text-align:center; color: rgba(210,220,235,.55); font-size:12px; padding:14px 0; border-top:1px solid rgba(255,180,70,.08); }
table{ width:100%; border-collapse:collapse; }
th,td{ padding:10px 8px; border-bottom:1px solid rgba(255,180,70,.10); }
th{ text-align:left; color:#f1e3c8; font-size:12px; letter-spacing:.12em; text-transform:uppercase; }
tr:hover td{ background: rgba(255,122,24,.06); }
.embed{ border:1px solid rgba(255,180,70,.14); border-radius:12px; overflow:hidden; background: rgba(0,0,0,.18); }
.embed iframe{ width:100%; height:280px; border:0; display:block; }

/* ===== Launch Bar (like Rethoria) ===== */
.launchbar{
  margin-top: 14px;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.20));
  box-shadow: 0 18px 45px rgba(0,0,0,.55);
  overflow:hidden;
}
.launchbar-inner{
  position: relative;
  min-height: 74px;
  display:flex;
  align-items:center;
  padding: 12px 16px;
}
.launchbar-inner:after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(900px 220px at 50% 20%, rgba(255,122,24,.12), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.03), transparent 60%);
  pointer-events:none;
}

/* Small Players Online badge */
.players-mini{
  position: relative;
  z-index: 1;
  width: 200px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.14);
  background: linear-gradient(180deg, rgba(0,0,0,.72), rgba(0,0,0,.35));
  box-shadow:
    0 10px 25px rgba(0,0,0,.55),
    inset 0 0 0 1px rgba(255,255,255,.04);
}
.players-mini-top{
  display:flex;
  align-items:center;
  gap:10px;
  color:#eaf1ff;
  font-weight:700;
  font-size: 13px;
  letter-spacing:.02em;
}
.players-mini-ico{
  width: 18px;
  height: 18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size: 14px;
  opacity:.95;
}
.players-mini-bar{
  margin-top: 8px;
  height: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  overflow:hidden;
  border: 1px solid rgba(0,0,0,.60);
  box-shadow: inset 0 2px 6px rgba(0,0,0,.70);
}
.players-mini-bar > span{
  display:block;
  height:100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #36d399, #ffb446, #ff5018);
  box-shadow: 0 0 10px rgba(54,211,153,.18);
}

/* ===== V4 layout fixes (center logo + straight nav) ===== */
.topbar{
  position: relative;
  top: auto;
  padding: 0;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(12,16,22,.80), rgba(8,10,14,.55));
  box-shadow: 0 18px 45px rgba(0,0,0,.55);
  backdrop-filter: blur(10px);
  margin-top: 10px;
}

.topbar-inner{
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  align-items:center;
  gap: 10px;
  padding: 14px 16px;
}

.brand-center{
  justify-self:center;
  min-width: 0;
  gap: 12px;
}
.brand-center img{
  height: 52px;
  width: auto;
  image-rendering: auto;
  filter: drop-shadow(0 12px 22px rgba(0,0,0,.65));
}
.brand-center .subtitle b{
  font-size: 13px;
  letter-spacing: .22em;
}
.brand-center .subtitle span{
  font-size: 11px;
  opacity: .9;
}

.nav-right{
  justify-self:end;
  gap: 12px;
}
.nav-right a{
  padding: 10px 12px;
  font-size: 12px;
  border-radius: 10px;
  color: rgba(234,241,255,.92);
}
.nav-right a:hover{
  background: rgba(255,122,24,.10);
  border-color: rgba(255,180,70,.16);
}

/* Launchbar centered like reference */
.launchbar{
  margin-top: 14px;
  border-radius: 16px;
}
.launchbar-inner{
  min-height: 72px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 18px;
  padding: 12px 16px;
}
.players-mini{
  width: 210px;
}
.launchbar-title{
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.25);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.03);
}
.launchbar-wordmark{
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(245,230,201,.92);
  font-size: 12px;
}

/* Prevent weird wrap on small screens */
@media (max-width: 820px){
  .topbar-inner{ grid-template-columns: 1fr; justify-items:center; }
  .nav-right{ justify-self:center; flex-wrap:wrap; justify-content:center; }
  .launchbar-inner{ flex-direction:column; }
}

/* ===== V5: players left + bigger logo in launchbar ===== */
.launchbar-inner{
  justify-content: space-between;
}

.players-mini{
  margin-left: 6px;
}

.launchbar-logo{
  display:flex;
  align-items:center;
  justify-content:center;
  flex: 1;
}

.launchbar-logo img{
  height: 64px;         /* bigger visibility */
  width: auto;
  max-width: 520px;
  filter: drop-shadow(0 14px 26px rgba(0,0,0,.75)) drop-shadow(0 0 18px rgba(255,122,24,.10));
  opacity: .98;
}

.launchbar-right{
  width: 210px; /* same as players-mini width to keep logo centered */
}

/* On small screens stack nicely */
@media (max-width: 820px){
  .launchbar-inner{
    flex-direction: column;
    gap: 12px;
    justify-content: center;
  }
  .launchbar-right{ display:none; }
  .launchbar-logo img{ height: 72px; max-width: 90%; }
}

/* ===== V6: big centered logo (no right text) ===== */
.launchbar-inner{
  justify-content: space-between;
  gap: 14px;
}

.launchbar-logo{
  flex: 1;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 6px 0;
}

.launchbar-logo img{
  height: 86px; /* bigger */
  width: auto;
  max-width: 780px;
  filter:
    drop-shadow(0 18px 30px rgba(0,0,0,.80))
    drop-shadow(0 0 24px rgba(255,122,24,.16));
}

.launchbar-spacer{
  width: 210px; /* match players-mini width to keep logo perfectly centered */
}

/* Just in case old pill exists somewhere */
.launchbar-title, .launchbar-wordmark { display:none !important; }

@media (max-width: 820px){
  .launchbar-logo img{ height: 96px; max-width: 95%; }
  .launchbar-spacer{ display:none; }
}

/* ===== V7: Big centered logo + side menu ===== */

.topbar.logo-only{
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 28px 10px;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(12,16,22,.85), rgba(8,10,14,.65));
  box-shadow: 0 25px 60px rgba(0,0,0,.65);
  margin-top: 10px;
}

.logo-big-wrapper{
  display:flex;
  align-items:center;
  justify-content:center;
}

.logo-big-wrapper img{
  height: 140px;  /* MUCH bigger */
  width: auto;
  max-width: 1000px;
  filter:
    drop-shadow(0 25px 45px rgba(0,0,0,.9))
    drop-shadow(0 0 35px rgba(255,122,24,.25));
}

/* Move navigation to left panel style */
.left .panel:first-child{
  display:block;
}

/* Remove any leftover nav spacing */
.nav, .nav-right{
  display:none !important;
}

@media (max-width: 820px){
  .logo-big-wrapper img{
    height: 110px;
    max-width: 95%;
  }
}

/* ===== V8 CLEAN HERO LOGO (NO BOX) ===== */

.topbar.logo-only{
  display:none !important;
}

.hero-logo{
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 60px 20px 40px 20px;
}

.hero-logo-wrapper{
  display:flex;
  align-items:center;
  justify-content:center;
}

.hero-logo-wrapper img{
  height: 190px;  /* MUCH BIGGER */
  width: auto;
  max-width: 1200px;
  filter:
    drop-shadow(0 40px 80px rgba(0,0,0,.85))
    drop-shadow(0 0 50px rgba(255,122,24,.35));
}

@media (max-width: 820px){
  .hero-logo-wrapper img{
    height: 140px;
    max-width: 95%;
  }
}

/* ===== V9: Single BIG logo + clean launch bar (no duplicated logos) ===== */
.hero-logo{
  padding: 85px 20px 40px 20px;
}
.hero-logo-wrapper img{
  height: 260px;
  max-width: 1400px;
}

@media (max-width: 820px){
  .hero-logo{ padding: 60px 14px 30px 14px; }
  .hero-logo-wrapper img{ height: 170px; max-width: 95%; }
}

/* Launchbar: keep it subtle */
.launchbar{
  margin-top: 12px;
}
.launchbar-inner{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  min-height: 64px;
  gap: 14px;
}

/* Explicitly hide any old logo containers if present */
.launchbar-logo, .launchbar-title, .launchbar-wordmark, .launchbar-right{
  display:none !important;
}

/* Spacer just to keep layout consistent */
.launchbar-spacer{
  flex: 1;
}

/* ===== V10: center everything (container/grid/launchbar/hero) ===== */
.container{
  max-width: 1280px;
  margin: 0 auto;
  padding: 18px 18px 50px;
}

.grid{
  width: 100%;
  margin-top: 18px;
  grid-template-columns: 300px 1fr 300px;
}

@media (max-width: 1200px){
  .grid{ grid-template-columns: 280px 1fr; }
}
@media (max-width: 820px){
  .grid{ grid-template-columns: 1fr; }
}

/* Hero logo aligns with content width now */
.hero-logo{
  width: 100%;
  margin: 0 auto;
  padding: 55px 10px 26px;
}
.hero-logo-wrapper{
  width: 100%;
}

/* Launchbar should match container width and sit centered */
.launchbar{
  width: 100%;
  max-width: 1280px;
  margin: 10px auto 0;
}
.launchbar-inner{
  padding: 12px 14px;
}

/* Slightly reduce background "oval" effect */
body{
  background-attachment: fixed;
}

/* ===== V11: Fixed centered page width (like reference) ===== */
:root{
  --pageMax: 1280px;
  --sidePad: 18px;
}

.container{
  max-width: var(--pageMax) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--sidePad) !important;
  padding-right: var(--sidePad) !important;
}

/* Make the 3-column layout narrower */
.grid{
  grid-template-columns: 300px 1fr 300px !important;
  gap: 16px !important;
}

/* Give more "air" around content, like tibia.com style */
.content{ min-height: 520px; }

/* Reduce the big oval/vignette feeling (keeps embers but less spotlight) */
body{
  background:
    url("../images/embers.png") repeat,
    url("../images/bg.jpg") center top / cover no-repeat,
    linear-gradient(180deg, #05070a, #0b0f15) !important;
}

/* Center the launchbar with the same fixed width */
.launchbar{
  max-width: var(--pageMax) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Center hero logo and keep within fixed page width */
.hero-logo{
  max-width: var(--pageMax) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Responsive */
@media (max-width: 1200px){
  :root{ --pageMax: 1280px; }
}
@media (max-width: 1020px){
  .grid{ grid-template-columns: 1fr !important; }
  .left, .right{ display:block !important; }
}

/* ===== V12: Hard clamp centered layout (no full-width stretch) ===== */
:root{
  --pageMax: 1280px;
}

body{
  overflow-x: hidden;
}

.page-wrap{
  width: 100%;
  max-width: var(--pageMax);
  margin: 0 auto;
  padding: 18px 18px 50px;
}

/* Remove influence of old .container rules if any */
.container{
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Everything inside must obey page width */
.hero-logo, .launchbar, .grid, .footer{
  width: 100%;
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
}

/* Grid columns like tibia.com */
.grid{
  display:grid;
  grid-template-columns: 300px 1fr 300px;
  gap: 16px;
  align-items:start;
}

@media (max-width: 1020px){
  .grid{ grid-template-columns: 1fr; }
}

/* Make sidebars not stick to viewport edges */
.left, .right, .content{
  min-width: 0;
}

/* Panels keep within column */
.panel{ width: 100%; }

/* ===== V14: Centered narrow layout aligned with launchbar (NO extra dark overlay) ===== */
:root{
  --pageMax: 1280px;
}

/* Make sure wrapper is the only width reference */
.page-wrap{
  max-width: var(--pageMax) !important;
  margin: 0 auto !important;
  padding: 18px 18px 50px !important;
}

/* Launchbar + hero + grid share the same width */
.hero-logo, .launchbar, .grid{
  width: 100% !important;
  max-width: 100% !important;
}

/* Ensure columns never "float" to viewport edges */
.grid{
  display: grid !important;
  grid-template-columns: 300px 1fr 300px !important;
  gap: 18px !important;
  align-items: start !important;
}

.left, .right, .content{
  position: relative !important;
  float: none !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

/* Panels match column width */
.panel{ width: 100% !important; }

/* Responsive */
@media (max-width: 1020px){
  .grid{ grid-template-columns: 1fr !important; }
}

/* ===== V16: Rethoria-style centered WITHOUT body flex (fix 'torto') ===== */
:root{ --pageMax: 1280px; }

/* Reset any flex centering that breaks positioning */
body, .arkhan-body{
  display: block !important;
  margin: 0 !important;
}

/* Fixed centered column */
.page-wrap{
  width: 100% !important;
  max-width: var(--pageMax) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 18px 20px 60px !important;
  box-sizing: border-box !important;
}

/* Everything aligns to the same column width */
.hero-logo, .launchbar, .grid, footer{
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
}

/* Force center logo */
.hero-logo-wrapper{
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
}

/* Grid like reference */
.grid{
  display: grid !important;
  grid-template-columns: 300px 1fr 300px !important;
  gap: 18px !important;
  align-items: start !important;
}

/* Prevent any floats pushing columns */
.left, .right, .content{
  float: none !important;
  min-width: 0 !important;
}

@media (max-width: 1020px){
  .grid{ grid-template-columns: 1fr !important; }
}

/* ===== V17: Rethoria-like centered column + safe content overflow ===== */
:root{ --pageMax: 1280px; }

.page-wrap{
  width: 100% !important;
  max-width: var(--pageMax) !important;
  margin: 0 auto !important;
  padding: 16px 18px 60px !important;
}

/* Keep everything aligned within the same column */
.hero-logo, .launchbar, .grid, .footer{
  width: 100% !important;
  max-width: 100% !important;
}

/* Grid like Rethoria */
.grid{
  display: grid !important;
  grid-template-columns: 300px 1fr 300px !important;
  gap: 18px !important;
  align-items: start !important;
}

/* Prevent pages like highscores from stretching layout */
.content-body{
  overflow-x: auto;
}
.content-body table{
  width: 100%;
  max-width: 100%;
}

/* Responsive */
@media (max-width: 1020px){
  .grid{ grid-template-columns: 1fr !important; }
}

/* ===== V18: Wider layout + more spacing (less cramped) ===== */
:root{
  --pageMax: 1280px; /* wider than v17 */
}

/* Wider columns and more gap */
.grid{
  grid-template-columns: 300px 1fr 300px !important;
  gap: 24px !important;
}

/* Give panels more padding and slightly larger text */
.panel-b{
  padding: 16px 16px !important;
}
.panel-h h3{
  letter-spacing: .12em;
}
.content-body{
  font-size: 14px;
  line-height: 1.55;
}

/* Make tables readable and not squeezed */
.content-body table{
  min-width: 760px;          /* enables scroll only if needed */
}
.content-body th, .content-body td{
  padding: 10px 12px !important;
}

/* Keep nice on smaller screens */
@media (max-width: 1320px){
  :root{ --pageMax: 1280px; }
  .grid{ grid-template-columns: 300px 1fr 300px !important; }
}
@media (max-width: 1180px){
  .grid{ grid-template-columns: 1fr !important; }
  .content-body table{ min-width: 0; }
}

/* ===== V19: Even wider + more breathing room (fix "too tight") ===== */
:root{
  --pageMax: 1280px;
}

/* Bigger sidebars + wider middle + more gap */
.grid{
  grid-template-columns: 300px 1fr 300px !important;
  gap: 32px !important;
}

/* Give panels real space */
.panel-b{
  padding: 18px 18px !important;
}
.panel{
  border-radius: 14px;
}

/* Content: avoid forcing horizontal scroll; only scroll if absolutely needed */
.content-body{
  overflow-x: auto;
  padding-bottom: 6px;
}
.content-body table{
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;   /* remove the forced 760px from v18 */
  table-layout: auto;
}
.content-body th, .content-body td{
  padding: 10px 14px !important;
  white-space: nowrap;
}
.content-body td:nth-child(3), .content-body th:nth-child(3){
  white-space: normal; /* Name column can wrap */
}

/* Slightly larger headings */
.panel-h h3{
  font-size: 12px;
  letter-spacing: .14em;
}

/* Responsive: step down gracefully */
@media (max-width: 1500px){
  :root{ --pageMax: 1280px; }
  .grid{ grid-template-columns: 300px 1fr 300px !important; gap: 26px !important; }
}
@media (max-width: 1320px){
  :root{ --pageMax: 1280px; }
  .grid{ grid-template-columns: 300px 1fr 300px !important; gap: 22px !important; }
}
@media (max-width: 1180px){
  .grid{ grid-template-columns: 1fr !important; }
}

/* ===== V20: Match reference layout (logo top, players centered, rest same) ===== */

/* Keep site centered and readable */
:root{
  --pageMax: 1280px; /* reference-like width */
}

/* Logo top centered */
.hero-logo{
  text-align: center !important;
  margin: 18px 0 8px !important;
}
.hero-logo-wrapper img{
  display: inline-block;
  max-width: 520px;   /* visible but not huge */
  width: 100%;
  height: auto;
}

/* Players Online centered under logo */
.launchbar{
  margin: 0 0 16px !important;
}
.launchbar-inner{
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}
.players-mini{
  margin: 0 auto !important;
}

/* Grid like your reference screenshot */
.grid{
  grid-template-columns: 300px 1fr 300px !important;
  gap: 18px !important;
}

/* Give content a bit more breathing room */
.panel-b{ padding: 16px 16px !important; }

/* Tables: don't break the layout */
.content-body{ overflow-x: auto; }
.content-body table{
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

/* ===== Downloads page (Rethoria-like) ===== */
.downloads-page{
  padding: 6px 2px 18px;
}
.downloads-title{
  margin: 6px 0 14px;
  text-align: center;
  font-family: "Trajan Pro", "Cinzel", Georgia, serif;
  letter-spacing: .14em;
  font-size: 28px;
  color: rgba(255,255,255,.88);
  text-transform: uppercase;
}
.downloads-intro{
  margin: 0 auto 18px;
  max-width: 860px;
  text-align: center;
  color: rgba(255,255,255,.70);
}
.downloads-card{
  margin: 16px auto;
  max-width: 860px;
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  padding: 18px 18px 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.downloads-card-title{
  margin: 0 0 12px;
  text-align: center;
  font-family: "Trajan Pro", "Cinzel", Georgia, serif;
  letter-spacing: .12em;
  font-size: 18px;
  color: rgba(255,255,255,.80);
}
.downloads-subtitle{
  text-align: center;
  margin-top: -2px;
  margin-bottom: 12px;
  color: rgba(255,255,255,.60);
  letter-spacing: .08em;
  font-size: 12px;
  text-transform: uppercase;
}
.downloads-conn{
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  padding-top: 6px;
}
.downloads-conn-row{
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}
.downloads-conn-label{
  color: rgba(255,255,255,.55);
  text-transform: uppercase;
  letter-spacing: .10em;
  font-size: 12px;
}
.downloads-conn-value{
  color: rgba(255,255,255,.88);
  font-weight: 600;
}
.downloads-actions{
  display: flex;
  justify-content: center;
  padding: 6px 0 2px;
}
.downloads-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 340px;
  padding: 14px 18px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.16);
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.02));
  color: rgba(255,255,255,.82);
  text-decoration: none;
  font-family: "Trajan Pro", "Cinzel", Georgia, serif;
  letter-spacing: .10em;
  text-transform: uppercase;
  box-shadow: 0 10px 20px rgba(0,0,0,.35);
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
}
.downloads-btn:hover{
  transform: translateY(-1px);
  border-color: rgba(255,200,120,.45);
  background: linear-gradient(180deg, rgba(255,200,120,.16), rgba(255,255,255,.03));
}
.downloads-btn.disabled{
  opacity: .55;
  cursor: not-allowed;
}
.downloads-hint{
  margin-top: 10px;
  text-align: center;
  color: rgba(255,255,255,.55);
  font-size: 12px;
}
.downloads-hint code{
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 8px;
  padding: 2px 8px;
}
.downloads-note{
  margin: 18px auto 0;
  max-width: 860px;
  background: rgba(160,0,0,.75);
  border: 1px solid rgba(255,255,255,.20);
  border-radius: 10px;
  padding: 12px 14px;
  color: rgba(255,255,255,.92);
  text-align: center;
}

/* =========================================================
   CENTRALIZAÇÃO (Rethoria-like) — override final
   ========================================================= */
:root{
  --pageMax: 1280px !important;
}

body{
  overflow-x: hidden;
}

/* wrapper central */
.page-wrap{
  width: 100% !important;
  max-width: var(--pageMax) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 18px 18px 60px !important;
  box-sizing: border-box !important;
}

/* nada deve “esticar” fora do wrapper */
.hero-logo, .launchbar, .grid, .footer{
  width: 100% !important;
  max-width: 100% !important;
}

/* grid central */
.grid{
  display: grid !important;
  grid-template-columns: 300px 1fr 300px !important;
  gap: 18px !important;
  align-items: start !important;
}

/* responsivo */
@media (max-width: 1020px){
  .grid{ grid-template-columns: 1fr !important; }
}



/* ==== 1500px WIDE FIX ==== */
:root{ --pageMax: 1500px; }
html, body{ overflow-x: hidden; }
.page-wrap{ max-width: 1500px !important; }
.grid{ grid-template-columns: 330px 1fr 330px !important; }


/* ==== 1620px WIDE FIX (v2) ==== */
:root{ --pageMax: 1620px; }
html, body{ overflow-x: hidden; }
.page-wrap{ max-width: 1620px !important; }
.grid{ grid-template-columns: 340px 1fr 340px !important; }

/* evita tabela estourar layout (highscores / lastnews) */
.content-body, .panel-b{ max-width: 100%; }
.content-body{ overflow-x: auto; }
table{ max-width: 100%; }
.TableContent{ width: 100% !important; max-width: 100% !important; }



/* ==== Highscores layout fix ==== */
.hs-wrap{max-width:100%;}
.hs-title{margin:10px 0 16px;text-align:center;letter-spacing:2px}
.hs-filters{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin:0 0 14px}
.hs-filter{display:flex;gap:10px;align-items:center}
.hs-filter label{opacity:.85}
.hs-filter select{min-width:220px;max-width:100%}
.hs-tablewrap{overflow-x:auto}
.hs-table{width:100%;border-collapse:separate;border-spacing:0 10px}
.hs-table thead th{padding:10px 12px;text-align:left;font-weight:700;letter-spacing:1px}
.hs-table tbody td{padding:12px 12px;vertical-align:middle}
.hs-flag{width:34px;text-align:center}
.hs-rank{width:80px}
.hs-outfit{width:80px;text-align:center}
.hs-value,.hs-points{width:140px;text-align:center;white-space:nowrap}
.hs-name{min-width:320px}
.hs-pagination{display:flex;gap:14px;justify-content:flex-end;margin-top:10px}
.hs-pagination a{text-decoration:none}


/* ==== Highscores contrast + readability (v2) ==== */
.hs-table{border-spacing:0 12px}
.hs-table thead th{opacity:.95}
.hs-table tbody tr{border-radius:14px}
.hs-table tbody tr td{background: rgba(0,0,0,.55); border-top:1px solid rgba(255,255,255,.06); border-bottom:1px solid rgba(0,0,0,.35)}
.hs-table tbody tr td:first-child{border-left:1px solid rgba(255,255,255,.06); border-top-left-radius:14px; border-bottom-left-radius:14px}
.hs-table tbody tr td:last-child{border-right:1px solid rgba(255,255,255,.06); border-top-right-radius:14px; border-bottom-right-radius:14px}
.hs-table tbody tr.hs-odd td{background: rgba(0,0,0,.62)}
.hs-table tbody tr:hover td{background: rgba(0,0,0,.72)}
.hs-name a{color:#d7b46a; font-weight:700}
.hs-name small{display:inline-block; margin-top:4px; opacity:.9; color: rgba(255,255,255,.78)}
.hs-rank,.hs-value,.hs-points{color: rgba(255,255,255,.92); font-weight:700}
.hs-outfit{text-align:center}
.hs-flag img{filter: drop-shadow(0 0 2px rgba(0,0,0,.6))}


/* ==== Highscores readability (dark text) ==== */
.hs-table thead th{color: rgba(255,255,255,.9);}
.hs-table tbody td{color:#0b0b0b !important;}
.hs-name a{color:#000 !important; font-weight:800;}
.hs-name small{color:#111 !important; opacity:.85;}
.hs-rank,.hs-value,.hs-points{color:#000 !important; font-weight:800;}


/* ==== Highscores readability FORCE (v2) ==== */

/* força texto escuro mesmo com estilos antigos do AAC */
.hs-wrap .hs-table tbody td,
.hs-wrap .hs-table tbody td *{
  color: #0a0a0a !important;
}

/* nome do player */
.hs-wrap .hs-table tbody td.hs-name a,
.hs-wrap .hs-table tbody td.hs-name a span{
  color: #000 !important;
  font-weight: 900 !important;
}

/* vocação (small) */
.hs-wrap .hs-table tbody td.hs-name small{
  color: #121212 !important;
  font-weight: 700 !important;
  opacity: .95 !important;
}

/* rank / level / points */
.hs-wrap .hs-table tbody td.hs-rank,
.hs-wrap .hs-table tbody td.hs-value,
.hs-wrap .hs-table tbody td.hs-points{
  color: #000 !important;
  font-weight: 900 !important;
}

/* melhora leitura em fundo claro */
.hs-wrap .hs-table tbody td{
  text-shadow: 0 1px 0 rgba(255,255,255,.35) !important;
}

/* garante que o header continua legível */
.hs-wrap .hs-table thead th{
  color: rgba(255,255,255,.92) !important;
}

/* outfit centralizado */
.hs-wrap .hs-table tbody td.hs-outfit{ text-align:center; }


/* ==== Highscores readability FIX (v3 - light text) ==== */

/* desfaz o "dark text force" e define paleta para fundo escuro */
.hs-wrap .hs-table tbody td,
.hs-wrap .hs-table tbody td *{
  color: rgba(255,255,255,.86) !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.8) !important;
}

/* nome do player em dourado claro */
.hs-wrap .hs-table tbody td.hs-name a,
.hs-wrap .hs-table tbody td.hs-name a span{
  color: #e7c27a !important;
  font-weight: 900 !important;
}

/* vocação (small) */
.hs-wrap .hs-table tbody td.hs-name small{
  color: rgba(255,255,255,.72) !important;
  font-weight: 700 !important;
}

/* rank / level / points */
.hs-wrap .hs-table tbody td.hs-rank,
.hs-wrap .hs-table tbody td.hs-value,
.hs-wrap .hs-table tbody td.hs-points{
  color: rgba(255,255,255,.92) !important;
  font-weight: 900 !important;
}

/* header */
.hs-wrap .hs-table thead th{
  color: rgba(255,255,255,.92) !important;
}

/* se existir algum filtro/links dentro */
.hs-wrap a{ color:#e7c27a !important; }


/* ==== Highscores modern layout (hs2) ==== */
.hs2{width:100%;}
.hs2-head{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border:1px solid rgba(255,255,255,.08);border-radius:14px;background:rgba(0,0,0,.35);backdrop-filter: blur(6px);}
.hs2-title{display:flex;align-items:center;gap:10px;}
.hs2-dot{width:8px;height:8px;border-radius:50%;background:#33d17a;display:inline-block;box-shadow:0 0 10px rgba(51,209,122,.5);}
.hs2-title-text{letter-spacing:2px;font-weight:800;opacity:.9;}
.hs2-meta{display:flex;align-items:center;gap:12px;}
.hs2-mode{display:flex;align-items:center;gap:10px;opacity:.95;}
.hs2-mode-text{letter-spacing:2px;font-weight:800;}
.hs2-badge{padding:6px 12px;border-radius:999px;border:1px solid rgba(231,194,122,.35);color:#e7c27a;font-weight:900;letter-spacing:1px;background:rgba(0,0,0,.25);}

.hs2-body{display:grid;grid-template-columns:260px 1fr;gap:16px;margin-top:14px;}
.hs2-side{display:flex;flex-direction:column;gap:14px;}
.hs2-box{border:1px solid rgba(255,255,255,.08);border-radius:14px;background:rgba(0,0,0,.30);overflow:hidden;}
.hs2-box-title{padding:12px 14px;font-weight:900;letter-spacing:2px;opacity:.85;border-bottom:1px solid rgba(255,255,255,.07);}
.hs2-list{padding:8px;}
.hs2-link{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;color:rgba(255,255,255,.78);text-decoration:none;transition:transform .08s ease, background .08s ease;}
.hs2-link:hover{background:rgba(255,255,255,.06);transform:translateY(-1px);}
.hs2-link.is-active{background:rgba(0,255,170,.08);color:#e7c27a;border-left:3px solid rgba(0,255,170,.55);border-top-left-radius:6px;border-bottom-left-radius:6px;}

.hs2-main{border:1px solid rgba(255,255,255,.08);border-radius:14px;background:rgba(0,0,0,.28);overflow:hidden;}
.hs2-main-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-end;padding:14px 14px;border-bottom:1px solid rgba(255,255,255,.07);}
.hs2-main-head-left{display:flex;gap:10px;align-items:flex-end;}
.hs2-main-skill{font-weight:1000;letter-spacing:2px;opacity:.95;}
.hs2-main-voc{opacity:.7;}
.hs2-main-head-right{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;justify-content:flex-end;}
.hs2-select-label{display:flex;flex-direction:column;gap:6px;font-size:12px;opacity:.85;}
.hs2-select{min-width:190px;max-width:100%;padding:8px 10px;border-radius:10px;border:1px solid rgba(255,255,255,.10);background:rgba(0,0,0,.35);color:rgba(255,255,255,.85);}

.hs2-cards{padding:12px;display:flex;flex-direction:column;gap:10px;}
.hs2-card{display:grid;grid-template-columns:52px 36px 74px 1fr 240px;align-items:center;gap:10px;padding:12px 12px;border-radius:14px;background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.06);}
.hs2-card.is-top1{border-left:4px solid #e7c27a;background:linear-gradient(90deg, rgba(231,194,122,.14), rgba(0,0,0,.42));}
.hs2-rank{font-weight:1000;font-size:18px;opacity:.9;text-align:center;}
.hs2-flag{display:flex;align-items:center;justify-content:center;}
.hs2-outfit{display:flex;align-items:center;justify-content:center;filter: drop-shadow(0 2px 6px rgba(0,0,0,.6));}
.hs2-info{display:flex;flex-direction:column;gap:4px;min-width:0;}
.hs2-name{color:#e7c27a;text-decoration:none;font-weight:1000;letter-spacing:.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.hs2-crown{margin-right:6px;}
.hs2-voc{color:rgba(255,255,255,.70);font-size:12px;letter-spacing:.5px;}
.hs2-stats{display:flex;gap:14px;justify-content:flex-end;}
.hs2-stat{min-width:110px;text-align:right;}
.hs2-stat-val{font-weight:1000;color:rgba(255,255,255,.92);}
.hs2-stat-label{font-size:11px;opacity:.70;letter-spacing:1px;margin-top:2px;}

.hs2-pagination{display:flex;gap:12px;justify-content:flex-end;padding:12px 14px;border-top:1px solid rgba(255,255,255,.07);}
.hs2-page{color:#e7c27a;text-decoration:none;font-weight:800;}
.hs2-page:hover{text-decoration:underline;}

@media (max-width: 980px){
  .hs2-body{grid-template-columns:1fr;}
  .hs2-card{grid-template-columns:52px 36px 74px 1fr; }
  .hs2-stats{grid-column:1 / -1; justify-content:flex-start; padding-left:52px;}
  .hs2-main-head{flex-direction:column;align-items:flex-start;}
  .hs2-main-head-right{justify-content:flex-start;}
}


/* ==== Highscores modern layout widen + names (v2) ==== */
.hs2-body{grid-template-columns:230px 1fr !important;}
.hs2-card{grid-template-columns:52px 30px 64px minmax(260px,1fr) 210px !important;}
.hs2-name{white-space:normal !important; overflow:visible !important; text-overflow:clip !important; line-height:1.15;}
.hs2-name-text{display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
.hs2-voc{font-size:12px;}
.hs2-stat{min-width:96px;}
.hs2-main-head-right .hs2-select{min-width:170px;}
@media (max-width: 980px){
  .hs2-card{grid-template-columns:52px 30px 64px 1fr !important;}
  .hs2-stats{padding-left:52px;}
}


/* ==== Top Level (Top 3) widget ==== */
.top3-box{display:flex;flex-direction:column;gap:10px}
.top3-item{display:flex;align-items:center;gap:10px;padding:10px 10px;border-radius:12px;text-decoration:none;background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.06);transition:transform .08s ease, background .08s ease}
.top3-item:hover{background:rgba(0,0,0,.55);transform:translateY(-1px)}
.top3-rank{width:22px;text-align:center;font-weight:1000;opacity:.9}
.top3-outfit{width:54px;height:54px;display:flex;align-items:center;justify-content:center;filter:drop-shadow(0 2px 6px rgba(0,0,0,.7))}
.top3-outfit img{max-width:54px;max-height:54px}
.top3-info{min-width:0;flex:1}
.top3-name{font-weight:1000;letter-spacing:.3px;color:#e7c27a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top3-voc{font-size:12px;opacity:.75;color:rgba(255,255,255,.85)}
.top3-lvl{display:flex;align-items:center;justify-content:flex-end}
.top3-lvl-badge{width:46px;height:46px;border-radius:14px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:11px;letter-spacing:1px;border:1px solid rgba(255,255,255,.12);background:rgba(0,0,0,.35);color:rgba(255,255,255,.9)}
.top3-lvl-badge b{font-size:16px;line-height:16px;margin-top:2px}
.top3-footer{margin-top:2px}

/* medal colors */
.top3-item.gold{border-left:4px solid rgba(231,194,122,.95);background:linear-gradient(90deg, rgba(231,194,122,.16), rgba(0,0,0,.42));}
.top3-item.silver{border-left:4px solid rgba(200,206,214,.90);background:linear-gradient(90deg, rgba(200,206,214,.12), rgba(0,0,0,.42));}
.top3-item.bronze{border-left:4px solid rgba(205,127,50,.85);background:linear-gradient(90deg, rgba(205,127,50,.12), rgba(0,0,0,.42));}


/* =============================================================
   Account / Login / Forms (modern panels)
   ============================================================= */

.ae-panel{background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.08);border-radius:14px;box-shadow:0 10px 30px rgba(0,0,0,.45);overflow:hidden}
.ae-panel + .ae-panel{margin-top:18px}
.ae-panel-head{display:flex;align-items:center;gap:10px;padding:14px 16px;background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,0));border-bottom:1px solid rgba(255,255,255,.07)}
.ae-dot{width:8px;height:8px;border-radius:99px;background:#19d98b;box-shadow:0 0 0 4px rgba(25,217,139,.10)}
.ae-title{font-family:Trajan Pro, "Cinzel", serif;letter-spacing:2px;font-size:15px;text-transform:uppercase;color:rgba(255,255,255,.9)}
.ae-panel-body{padding:18px}

.ae-cards{display:grid;grid-template-columns:repeat(4, minmax(0,1fr));gap:14px;margin-bottom:16px}
.ae-card{background:rgba(0,0,0,.40);border:1px solid rgba(255,255,255,.07);border-radius:12px;padding:14px;min-height:88px}
.ae-card small{display:block;opacity:.65;letter-spacing:1px;text-transform:uppercase;font-size:11px;margin-bottom:8px}
.ae-card b{display:block;font-size:18px;color:#e7c27a;letter-spacing:.4px}
.ae-card .ae-muted{margin-top:6px;font-size:12px;opacity:.75}
.ae-card .ae-warn{color:#ff5a5a;font-weight:700}
.ae-card .ae-ok{color:#19d98b;font-weight:700}

.ae-split{display:grid;grid-template-columns:280px 1fr;gap:18px}
.ae-sidebar{background:rgba(0,0,0,.40);border:1px solid rgba(255,255,255,.07);border-radius:12px;overflow:hidden}
.ae-sidebar h3{margin:0;padding:14px 14px;border-bottom:1px solid rgba(255,255,255,.06);font-family:Trajan Pro,"Cinzel",serif;letter-spacing:2px;text-transform:uppercase;font-size:13px;opacity:.85}
.ae-nav{display:flex;flex-direction:column;padding:10px}
.ae-nav a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;color:rgba(255,255,255,.85);text-decoration:none;border:1px solid transparent}
.ae-nav a:hover{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.06)}
.ae-nav a.active{background:rgba(25,217,139,.14);border-color:rgba(25,217,139,.25);color:#e7c27a}

.ae-section{margin-top:18px}
.ae-section h2{margin:0 0 12px 0;font-family:Trajan Pro,"Cinzel",serif;letter-spacing:2px;text-transform:uppercase;font-size:16px;color:rgba(255,255,255,.9)}

.ae-table{width:100%;border-collapse:collapse;overflow:hidden;border-radius:12px}
.ae-table th{background:rgba(255,255,255,.04);text-transform:uppercase;letter-spacing:1.5px;font-size:12px;padding:12px;border-bottom:1px solid rgba(255,255,255,.08);text-align:left}
.ae-table td{padding:12px;border-bottom:1px solid rgba(255,255,255,.06);color:rgba(255,255,255,.88)}
.ae-table tr:hover td{background:rgba(255,255,255,.03)}
.ae-table td strong{color:#e7c27a}

.ae-form{display:flex;flex-direction:column;gap:12px}
.ae-row{display:grid;grid-template-columns:220px 1fr;gap:14px;align-items:center}
.ae-row label{opacity:.85;letter-spacing:.2px}
.ae-input, .ae-select, .ae-textarea{width:100%;background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.10);border-radius:10px;padding:10px 12px;color:rgba(255,255,255,.92);outline:none}
.ae-input:focus, .ae-select:focus, .ae-textarea:focus{border-color:rgba(231,194,122,.55);box-shadow:0 0 0 4px rgba(231,194,122,.12)}
.ae-textarea{min-height:90px;resize:vertical}

.ae-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}
.ae-btn{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:10px;border:1px solid rgba(255,255,255,.12);background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.35));color:rgba(255,255,255,.92);text-decoration:none;cursor:pointer}
.ae-btn:hover{background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(0,0,0,.45));border-color:rgba(255,255,255,.16)}
.ae-btn.primary{border-color:rgba(231,194,122,.35);background:linear-gradient(180deg, rgba(231,194,122,.20), rgba(0,0,0,.42));color:#e7c27a}
.ae-btn.danger{border-color:rgba(255,90,90,.35);background:linear-gradient(180deg, rgba(255,90,90,.18), rgba(0,0,0,.42));color:#ffb2b2}
.ae-help{font-size:12px;opacity:.75;line-height:1.5}

@media (max-width: 1150px){
  .ae-cards{grid-template-columns:repeat(2, minmax(0,1fr))}
  .ae-split{grid-template-columns:1fr}
}
@media (max-width: 560px){
  .ae-cards{grid-template-columns:1fr}
  .ae-row{grid-template-columns:1fr}
}


/* Flash messages */
.arkhan-alert{
  margin: 0 0 14px 0;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.45);
  color: rgba(255,255,255,0.92);
  line-height: 1.35;
}
.arkhan-alert-success{ border-color: rgba(46, 204, 113, 0.35); box-shadow: 0 0 0 1px rgba(46,204,113,0.10) inset; }
.arkhan-alert-warning{ border-color: rgba(241, 196, 15, 0.35); box-shadow: 0 0 0 1px rgba(241,196,15,0.10) inset; }
.arkhan-alert-error{   border-color: rgba(231, 76, 60, 0.35);  box-shadow: 0 0 0 1px rgba(231,76,60,0.10) inset; }
/* ===== CREATE ACCOUNT POLISH ===== */

.arkhan-create-wrap{
  max-width: 900px;
  margin: 0 auto;
}

.arkhan-form{
  margin-top: 20px;
  padding: 25px;
  border-radius: 16px;
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.08);
}

.arkhan-section-title{
  margin-top: 20px;
  padding-top: 15px;
  border-top: 1px solid rgba(255,255,255,.08);
  font-weight: bold;
}

.arkhan-row{
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 12px 18px;
  margin: 14px 0;
  align-items: center;
}

@media (max-width: 800px){
  .arkhan-row{
    grid-template-columns: 1fr;
  }
}

.arkhan-row input,
.arkhan-row select{
  height: 44px;
  border-radius: 12px;
  padding: 0 14px;
  background: rgba(0,0,0,.45);
  border: 1px solid rgba(255,255,255,.10);
  color: #fff;
}

.arkhan-inline{
  display: flex;
  gap: 15px;
}

.arkhan-pill{
  padding: 8px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.25);
  cursor: pointer;
}

.arkhan-rules{
  display: flex;
  gap: 10px;
  margin-top: 18px;
  padding: 12px;
  border-radius: 14px;
  background: rgba(0,0,0,.25);
  border: 1px solid rgba(255,255,255,.08);
}

.arkhan-actions{
  margin-top: 20px;
  display: flex;
  gap: 12px;
}

.btn{
  padding: 10px 18px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.4);
  color: #fff;
  cursor: pointer;
}

.btn-primary{
  border-color: rgba(255,180,90,.4);
}
/* ===== ARKHAN SOLID BUTTON STYLE ===== */

button,
.btn,
input[type="submit"],
input[type="button"],
a.btn {

  background: linear-gradient(180deg, #ff9a2f 0%, #c86a14 100%);
  border: 1px solid #ffb347;
  color: #111;
  font-weight: 700;
  padding: 12px 22px;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: 0 4px 14px rgba(255,140,0,0.35);
  text-decoration: none;
  display: inline-block;
}

/* Hover */
button:hover,
.btn:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
a.btn:hover {

  background: linear-gradient(180deg, #ffb347 0%, #e07b18 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(255,160,0,0.45);
}

/* Active click */
button:active,
.btn:active {
  transform: translateY(0px);
  box-shadow: 0 3px 8px rgba(255,140,0,0.4);
}

/* Download Client específico */
.download-client,
.download-btn {
  background: linear-gradient(180deg, #ff6a00 0%, #a64500 100%);
  border: 1px solid #ff8c42;
  color: #fff;
}

.download-client:hover,
.download-btn:hover {
  background: linear-gradient(180deg, #ff8c42 0%, #c45a00 100%);
}

/* ===== Latest News (Rethoria style) ===== */
.reth-content-head h3{
  position: relative;
  padding-left: 18px;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.reth-dot{
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #29ff78;
  box-shadow: 0 0 10px rgba(41,255,120,0.35);
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

.reth-news{
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.35);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.03);
  margin: 14px 0;
}

.reth-news-inner{
  padding: 14px 14px 16px;
}

.reth-news-meta{
  display:flex;
  align-items:center;
  gap:10px;
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(220,220,220,0.65);
}

.reth-news-badge{
  padding: 4px 8px;
  border: 1px solid rgba(230,214,175,0.45);
  color: rgba(230,214,175,0.9);
  border-radius: 4px;
  font-size: 11px;
}

.reth-news-date{ opacity: 0.85; }

.reth-news-author{
  margin-left: auto;
  opacity: 0.75;
}

.reth-news-title{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,0.10);
}

.reth-news-icon{
  width: 18px;
  height: 18px;
  display:inline-block;
  border: 1px solid rgba(230,214,175,0.35);
  border-radius: 4px;
  opacity: 0.85;
}

.reth-news-link{
  font-size: 18px;
  letter-spacing: 1px;
  font-weight: 700;
  text-transform: uppercase;
  color: rgba(235,235,235,0.92);
  text-decoration: none;
}

.reth-news-link:hover{ color: rgba(255,255,255,1); }

.reth-news-body{
  margin-top: 10px;
  color: rgba(220,220,220,0.86);
  line-height: 1.6;
}

.reth-news-comments{
  margin-top: 10px;
}

.reth-news-comments a{
  color: rgba(230,214,175,0.9);
  text-decoration: none;
}

.reth-news-comments a:hover{
  text-decoration: underline;
}


/* =========================
   RETHORIA PATCH (merged)
   ========================= */
/* ===== Rethoria Patch (Arkhan) ===== */
/* Keep this file loaded AFTER arkhan.css */

/* Sidebar accordion boxes */
.side-acc{display:flex;flex-direction:column;gap:18px;}
.side-card{border:1px solid rgba(255,255,255,.10);background:rgba(0,0,0,.35);box-shadow:inset 0 0 0 1px rgba(255,255,255,.03);overflow:hidden;border-radius:8px;}
.side-head{width:100%;display:flex;align-items:center;gap:10px;padding:16px 14px;border:0;cursor:pointer;background:linear-gradient(to bottom, rgba(255,255,255,.06), rgba(255,255,255,.02));color:#cfcfcf;border-bottom:1px solid rgba(255,255,255,.10);}
.side-dot{width:8px;height:8px;border-radius:50%;background:#29ff78;box-shadow:0 0 10px rgba(41,255,120,.35);flex:0 0 auto;}
.side-title{letter-spacing:3px;font-size:13px;text-transform:uppercase;flex:1 1 auto;}
.side-caret{width:10px;height:10px;border-right:2px solid rgba(230,214,175,.90);border-bottom:2px solid rgba(230,214,175,.90);transform:rotate(-135deg);transition:transform 180ms ease;flex:0 0 auto;}
.side-card.is-closed .side-caret{transform:rotate(45deg);}
.side-body{max-height:1200px;transition:max-height 220ms ease;}
.side-card.is-closed .side-body{max-height:0;}
.side-list{list-style:none;margin:0;padding:10px 12px 14px;display:flex;flex-direction:column;}
.side-list li{margin:0;padding:0;}
.side-list a{display:block;padding:12px 10px;text-decoration:none;text-transform:uppercase;letter-spacing:1px;font-size:13px;color:rgba(210,210,210,.75);border-left:2px solid rgba(255,255,255,.06);}
.side-list a:hover{color:rgba(235,235,235,.95);background:rgba(255,255,255,.03);border-left-color:rgba(255,255,255,.14);}
.side-list a.is-green{color:#29ff78;}
.side-list a.is-green:hover{color:#29ff78;}

/* Content title dot */
.content .panel-h h1,
.content .panel-h h2,
.content .panel-h h3{position:relative;padding-left:18px;}
.content .panel-h h1:before,
.content .panel-h h2:before,
.content .panel-h h3:before{
  content:"";
  width:8px;height:8px;border-radius:50%;
  background:#29ff78;
  box-shadow:0 0 10px rgba(41,255,120,.35);
  position:absolute;left:0;top:50%;transform:translateY(-50%);
}

/* Latest News card (news.html.twig) */
.reth-news{margin:0;}
.reth-news-inner{
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.30);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.03);
  padding:16px 16px 18px;
  border-radius:6px;
}
.reth-news-meta{display:flex;align-items:center;gap:12px;font-size:12px;color:rgba(220,220,220,.65);margin-bottom:10px;}
.reth-news-badge{display:inline-block;padding:3px 8px;border:1px solid rgba(230,214,175,.35);border-radius:4px;font-size:11px;letter-spacing:1px;color:rgba(230,214,175,.90);}
.reth-news-author{margin-left:auto;letter-spacing:1px;text-transform:uppercase;font-size:11px;opacity:.8;}
.reth-news-title{display:flex;align-items:center;gap:10px;padding-bottom:10px;margin-bottom:10px;border-bottom:1px solid rgba(255,255,255,.10);}
.reth-news-title h4{margin:0;font-size:18px;letter-spacing:1px;text-transform:uppercase;color:rgba(235,235,235,.95);}
.reth-news-content{color:rgba(235,235,235,.85);line-height:1.6;}

/* Latest Bans */
.reth-lastbans{padding:6px 0 0;}
.reth-lastbans .reth-table-wrap{
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.28);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.03);
  padding:0;border-radius:6px;
}
.reth-lastbans table{width:100%;border-collapse:collapse;font-size:13px;text-transform:uppercase;letter-spacing:1px;}
.reth-lastbans thead th{text-align:left;padding:16px 14px;color:rgba(230,214,175,.95);background:linear-gradient(to bottom, rgba(255,255,255,.05), rgba(255,255,255,.015));border-bottom:1px solid rgba(255,255,255,.08);}
.reth-lastbans tbody td{padding:16px 14px;color:rgba(210,210,210,.78);border-bottom:1px solid rgba(255,255,255,.06);}
.reth-lastbans tbody tr:last-child td{border-bottom:0;}
.reth-lastbans .reth-empty{padding:22px 14px;text-align:center;color:rgba(190,190,190,.55);}
.reth-lastbans a{color:rgba(235,235,235,.85);text-decoration:none;}
.reth-lastbans a:hover{color:#fff;}

/* Latest Deaths (table layout helper) */
.reth-deaths img{display:block; width:48px; height:48px; image-rendering: pixelated;}
.reth-deaths .col-time{text-align:right;}

/* Characters page card (replaces beige headline table) */
.reth-form-card{
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.28);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.03);
  border-radius:10px;
  overflow:hidden;
}
.reth-form-head{
  display:flex;align-items:center;gap:10px;
  padding:14px 14px;
  border-bottom:1px solid rgba(255,255,255,.10);
  background:linear-gradient(to bottom, rgba(255,255,255,.06), rgba(255,255,255,.02));
}
.reth-form-title{letter-spacing:3px;font-size:13px;text-transform:uppercase;color:rgba(235,235,235,.90);}
.reth-form-body{padding:16px 16px 18px;}
.reth-form-desc{margin:0 0 16px;color:rgba(235,235,235,.78);line-height:1.6;}
.reth-form-subtitle{margin:0 0 10px;color:rgba(235,235,235,.90);font-size:14px;letter-spacing:1px;text-transform:uppercase;}
.reth-form{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.reth-label{color:rgba(230,214,175,.92);font-weight:600;letter-spacing:1px;text-transform:uppercase;font-size:12px;}
.reth-input{
  height:38px;min-width:260px;flex:1 1 260px;
  padding:8px 12px;border-radius:10px;border:1px solid rgba(255,255,255,.16);
  background:rgba(0,0,0,.35);color:rgba(255,255,255,.92);outline:none;
}
.reth-input::placeholder{color:rgba(255,255,255,.45);}
.reth-btn{
  height:40px;min-width:140px;padding:0 18px;border-radius:12px;border:0;cursor:pointer;
  font-weight:700;letter-spacing:.5px;color:rgba(20,12,6,.95);
  background:linear-gradient(to bottom, rgba(255,164,37,.95), rgba(209,111,0,.95));
  box-shadow:0 8px 18px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.18);
}
.reth-btn:hover{filter:brightness(1.05);}




/* ===============================
   CHARACTERS - Search box (v2)
   Fixes:
   - no extra green dot (page already has one)
   - centered form
   - better input + button
   =============================== */

.reth-charsearch2{
  padding: 10px 0 6px;
}

.reth-charsearch2-inner{
  width: min(760px, 100%);
  margin: 0 auto;
}

.reth-charsearch2-title{
  margin: 4px 0 14px;
  font-size: 13px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(230,214,175,0.92);
  font-weight: 700;
}

.reth-charsearch2-form{
  display:flex;
  justify-content:center;
  align-items:center;
  gap: 14px;
  flex-wrap: wrap;
}

.reth-charsearch2-input{
  width: min(520px, 100%);
  height: 46px;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(0,0,0,0.28);
  color: rgba(255,255,255,0.92);
  outline: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 10px 22px rgba(0,0,0,0.18);
}

.reth-charsearch2-input::placeholder{
  color: rgba(255,255,255,0.42);
}

.reth-charsearch2-input:focus{
  border-color: rgba(255,164,37,0.55);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 0 0 3px rgba(255,164,37,0.12);
}

.reth-charsearch2-btn{
  height: 46px;
  min-width: 140px;
  padding: 0 18px;
  border-radius: 12px;
  border: 0;
  cursor: pointer;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: rgba(20,12,6,0.95);
  background: linear-gradient(to bottom, rgba(255,164,37,0.95), rgba(209,111,0,0.95));
  box-shadow: 0 10px 22px rgba(0,0,0,0.30), inset 0 1px 0 rgba(255,255,255,0.18);
}

.reth-charsearch2-btn:hover{ filter: brightness(1.06); }

@media (max-width: 640px){
  .reth-charsearch2-title{ text-align:center; }
  .reth-charsearch2-input{ width: 100%; }
  .reth-charsearch2-btn{ width: 100%; }
}




/* ===============================
   ONLINE (Who is online) - V2 polish + outfit + sorting links
   Cole NO FINAL do rethoria_patch.css
   =============================== */

.reth-mt{ margin-top: 16px; }

.reth-note{
  display:block;
  margin: 8px 0 10px;
  color: rgba(210,210,210,0.65);
}

.reth-center{ text-align:center; }
.reth-skulls{ margin: 6px 0 14px; }
.reth-skulls div{ margin: 4px 0; color: rgba(235,235,235,0.80); }
.reth-skulls img{ vertical-align: middle; margin-right: 6px; }

.reth-muted{ color: rgba(210,210,210,0.65); }

.reth-table{
  width: 100%;
  border-collapse: collapse;
}

.reth-table thead th{
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 12px;
  color: rgba(230,214,175,0.92);
  padding: 14px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.10);
  background: linear-gradient(to bottom, rgba(255,255,255,0.06), rgba(255,255,255,0.01));
}

.reth-table tbody td,
.reth-table tbody th{
  padding: 14px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  color: rgba(235,235,235,0.90);
  vertical-align: middle;
  text-align: left;
}

.reth-table tbody tr:last-child td,
.reth-table tbody tr:last-child th{ border-bottom: 0; }

.reth-table-kv th{
  width: 32%;
  white-space: nowrap;
  color: rgba(230,214,175,0.92);
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-size: 12px;
}

.reth-sort{
  font-weight: normal;
  letter-spacing: 0;
  text-transform: none;
  font-size: 12px;
  margin-left: 6px;
  opacity: .85;
}

.reth-table a{ color: rgba(235,235,235,0.92); text-decoration: none; }
.reth-table a:hover{ color:#fff; text-decoration: underline; }

.reth-empty{
  text-align:center !important;
  color: rgba(210,210,210,0.65) !important;
  padding: 18px 12px !important;
}

.reth-col-country{ width: 34px; text-align:center !important; }
.reth-col-outfit{ width: 64px; text-align:center !important; }
.reth-col-level{ width: 90px; text-align:center !important; }
.reth-col-voc{ width: 190px; }
.reth-col-name{ width: auto; }

.reth-table-online .reth-row:hover td{
  background: rgba(255,255,255,0.03);
}

.reth-outfit{
  width: 48px;
  height: 48px;
  image-rendering: pixelated;
  display:block;
  margin: 0 auto;
}

/* If outfit comes as <img> already, normalize it */
.reth-col-outfit img{
  width: 48px !important;
  height: 48px !important;
  image-rendering: pixelated;
}

/* Mobile */
@media (max-width: 820px){
  .reth-box-body{ overflow-x:auto; }
  .reth-col-voc{ width: auto; }
}


/* ===== Character View (Rethoria) ===== */
/* Rethoria-style Character page */
.reth-charpage{margin-top:6px}
.reth-charpage-top{margin-bottom:14px}
.reth-chargrid{display:grid;grid-template-columns:360px 1fr;gap:18px;align-items:start}
@media(max-width:1000px){.reth-chargrid{grid-template-columns:1fr}}

.reth-card{background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.08);border-radius:14px;box-shadow:0 10px 30px rgba(0,0,0,.25);padding:14px;margin-bottom:14px}
.reth-card-title{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#cbbfa6;border-bottom:1px solid rgba(255,255,255,.07);padding-bottom:10px;margin-bottom:12px}
.reth-ic{opacity:.8}

.reth-avatarcard{display:flex;gap:14px;align-items:center}
.reth-avatar{width:120px;height:120px;border-radius:18px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);display:flex;align-items:center;justify-content:center;overflow:hidden}
.reth-avatar-img{width:128px;height:128px;image-rendering:pixelated}
.reth-avatar-meta{flex:1;min-width:0}
.reth-avatar-name{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.reth-name{font-size:20px;font-weight:800;color:#ffb35a;letter-spacing:.02em}
.reth-online{font-size:12px;padding:4px 8px;border-radius:999px;border:1px solid rgba(255,255,255,.12);text-transform:uppercase;letter-spacing:.08em}
.reth-online.is-online{color:#65ff9a;border-color:rgba(101,255,154,.35)}
.reth-online.is-offline{color:#ff6a6a;border-color:rgba(255,106,106,.35)}
.reth-avatar-sub{margin-top:6px;color:rgba(255,255,255,.65);display:flex;align-items:center;gap:10px}
.reth-dot{opacity:.4}

.reth-info-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:700px){.reth-info-grid{grid-template-columns:1fr}}
.reth-info{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);border-radius:10px;padding:10px 12px;display:flex;justify-content:space-between;gap:14px}
.reth-info-wide{grid-column:1/-1}
.reth-info .k{opacity:.65;text-transform:uppercase;letter-spacing:.1em;font-size:11px}
.reth-info .v{font-weight:700;color:#e8e1d2}

.reth-eq{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
.reth-eq-col{display:grid;gap:10px}
.reth-eq-slot{height:56px;border-radius:10px;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.06);display:flex;align-items:center;justify-content:center;overflow:hidden}
.reth-eq-slot img{image-rendering:pixelated}

.reth-skills{display:grid;gap:10px}
.reth-skill{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center}
.reth-skill-name{opacity:.8}
.reth-skill-val{font-weight:800}
.reth-skill-bar{grid-column:1/-1;height:8px;border-radius:999px;background:rgba(255,255,255,.06);overflow:hidden}
.reth-skill-bar span{display:block;height:100%;background:linear-gradient(90deg, rgba(255,180,90,.9), rgba(255,120,40,.9))}

.reth-quests{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
@media(max-width:900px){.reth-quests{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.reth-quests{grid-template-columns:1fr}}
.reth-quest{border-radius:10px;padding:10px 12px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.02);display:flex;justify-content:space-between;gap:10px;align-items:center}
.reth-quest.is-done{border-left:3px solid rgba(101,255,154,.7)}
.reth-quest.is-missing{border-left:3px solid rgba(255,106,106,.7)}
.reth-quest-name{font-weight:700;color:#e8e1d2}
.reth-quest-x{font-weight:900;opacity:.8}

.reth-deaths{display:grid;gap:10px}
.reth-death{border-radius:10px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.02);padding:10px 12px;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.reth-death-date{opacity:.65;font-size:12px}
.reth-death-text{opacity:.92}

.reth-table{display:grid;gap:8px}
.reth-thead,.reth-trow{display:grid;grid-template-columns:1.4fr 1fr .8fr 120px;gap:10px;align-items:center}
.reth-thead{opacity:.75;text-transform:uppercase;letter-spacing:.12em;font-size:11px;padding:8px 10px;border-bottom:1px solid rgba(255,255,255,.08)}
.reth-trow{padding:10px;border:1px solid rgba(255,255,255,.06);border-radius:12px;background:rgba(255,255,255,.02)}
.reth-tname{font-weight:800;color:#e8e1d2}
.reth-del{margin-left:8px;color:#ff6a6a;font-weight:800}
.reth-tbtn{display:flex;justify-content:flex-end}
.reth-btn{height:38px;padding:0 16px;border-radius:10px;border:1px solid rgba(255,255,255,.12);background:rgba(0,0,0,.35);color:#e8e1d2;font-weight:800;letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
.reth-btn:hover{filter:brightness(1.08)}

/* ===== Rethoria - Characters (safe add-on) ===== */
.reth-characters{width:100%;}
.reth-head{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 18px 10px;border-bottom:1px solid rgba(255,255,255,.06)}
.reth-title{letter-spacing:3px;font-weight:600;color:#d8c7a6;display:flex;align-items:center;gap:10px}
.reth-dot{width:8px;height:8px;border-radius:50%;background:#2ecc71;display:inline-block;box-shadow:0 0 10px rgba(46,204,113,.6)}
.reth-head-right{flex:1;display:flex;justify-content:center}
.reth-char-search{width:min(760px,100%);}
.reth-char-search__inner{display:flex;gap:16px;align-items:center;justify-content:center}
.reth-char-search__input{flex:1;min-width:280px;height:44px;padding:0 16px;border-radius:10px;border:1px solid rgba(255,255,255,.12);background:rgba(0,0,0,.25);color:#e8e8e8;outline:none;box-shadow:0 10px 24px rgba(0,0,0,.25)}
.reth-char-search__input::placeholder{color:rgba(255,255,255,.55)}
.reth-char-search__btn{height:44px;min-width:140px;padding:0 18px;border-radius:12px;border:0;background:linear-gradient(180deg,#f6b34a,#d88713);color:#111;font-weight:800;letter-spacing:2px;cursor:pointer;box-shadow:0 12px 24px rgba(0,0,0,.35)}
.reth-char-search__btn:hover{filter:brightness(1.05)}

.reth-card{background:rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.08);border-radius:12px;box-shadow:0 16px 40px rgba(0,0,0,.35)}
.reth-card--pad{padding:16px}
.reth-card-title{color:#d8c7a6;font-weight:700;letter-spacing:2px;margin-bottom:12px}
.reth-muted{color:rgba(255,255,255,.65)}

.reth-char-grid{display:grid;grid-template-columns:340px 1fr;gap:18px;padding:18px}
@media (max-width: 980px){.reth-char-grid{grid-template-columns:1fr}.reth-head{flex-direction:column;align-items:flex-start}.reth-head-right{width:100%}}

.reth-char-portrait{display:flex;gap:14px;align-items:center}
.reth-portrait-wrap{width:88px;height:88px;border-radius:16px;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.08)}
.reth-portrait{width:64px;height:64px;image-rendering:pixelated}
.reth-name{font-weight:900;color:#f0f0f0;letter-spacing:1px}
.reth-sub{color:rgba(255,255,255,.7);margin-top:4px}
.reth-online{color:#3ddc84;font-weight:700}
.reth-offline{color:#e06666;font-weight:700}

.reth-eq-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.reth-eq-slot{height:54px;border-radius:10px;background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center}
.reth-eq-slot img{width:32px;height:32px;image-rendering:pixelated}
.reth-eq-empty{width:26px;height:26px;border-radius:6px;border:1px dashed rgba(255,255,255,.12)}

.reth-skill-list{display:flex;flex-direction:column;gap:8px}
.reth-skill-row{display:flex;justify-content:space-between;align-items:center;padding:8px 10px;border-radius:10px;background:rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.06)}
.reth-skill-name{color:rgba(255,255,255,.75);text-transform:uppercase;font-size:12px;letter-spacing:1px}
.reth-skill-val{color:#f0f0f0;font-weight:800}

.reth-info-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (max-width: 700px){.reth-info-grid{grid-template-columns:1fr}}
.reth-info-item{display:flex;justify-content:space-between;gap:10px;padding:10px 12px;border-radius:10px;background:rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.06)}
.reth-info-label{color:rgba(255,255,255,.62);text-transform:uppercase;font-size:12px;letter-spacing:1px}
.reth-info-value{color:#f0f0f0;font-weight:800;text-align:right}

.reth-deaths{display:flex;flex-direction:column;gap:8px}
.reth-death-row{display:flex;gap:12px;align-items:center;padding:10px 12px;border-radius:10px;background:rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.06)}
.reth-death-time{color:rgba(255,255,255,.7);white-space:nowrap}
.reth-death-desc{color:#f0f0f0}

/* Characters: link style used in Recent Deaths when killer is a player */
.reth-link{color:inherit;text-decoration:none;border-bottom:1px dashed rgba(255,200,120,.35)}
.reth-link:hover{border-bottom-color:rgba(255,200,120,.9)}

/* ===== Characters: avatar header layout fixes (Arkhan -> Rethoria) ===== */
.reth-avatarcard{display:grid;grid-template-columns:280px 1fr;gap:18px;align-items:center;}
@media (max-width:900px){.reth-avatarcard{grid-template-columns:1fr;}}
.reth-avatar{width:280px;height:280px;border-radius:22px;display:flex;align-items:center;justify-content:center;overflow:hidden;background:radial-gradient(ellipse at 50% 35%, rgba(255,255,255,.10), rgba(0,0,0,.55));border:1px solid rgba(255,255,255,.08);box-shadow:inset 0 0 40px rgba(0,0,0,.55);} 
.reth-avatar-img{width:230px;height:230px;object-fit:contain;image-rendering:pixelated;}
.reth-avatar-meta{text-align:left;min-width:0;}
.reth-avatar-name{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.reth-charname{font-size:38px;font-weight:800;letter-spacing:.8px;line-height:1.05;color:#fff;}
.reth-online{padding:6px 12px;border-radius:999px;font-size:12px;font-weight:800;letter-spacing:1px;}
.reth-avatar-sub{display:flex;align-items:center;gap:14px;margin-top:10px;flex-wrap:wrap;opacity:.95;}
.reth-badges{display:flex;gap:14px;margin-top:16px;flex-wrap:wrap;}
.reth-badge{width:44px;height:44px;}
.reth-badge::after{min-width:200px;}

/* ===== Characters: Active Tasks progress bar (Rethoria style) ===== */
.reth-task-summary{display:flex;justify-content:space-between;gap:12px;margin:10px 0 14px;opacity:.9;font-size:13px}
.reth-tasks{display:flex;flex-direction:column;gap:12px}
.reth-task{padding:12px 14px;border:1px solid rgba(255,255,255,.06);border-radius:14px;background:rgba(0,0,0,.22);backdrop-filter:blur(2px)}
.reth-task-name{font-weight:800;letter-spacing:.2px;margin-bottom:4px}
.reth-task-meta{font-size:12px;opacity:.85;margin-bottom:8px;line-height:1.3}
.reth-task-bar{height:8px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden;box-shadow:inset 0 0 0 1px rgba(0,0,0,.35)}
.reth-task-bar>span{display:block;height:100%;width:0%;border-radius:999px;background:linear-gradient(90deg,#f6c45a,#f0a326,#e88c12)}

/* ===== Characters: Guild row inside General Information ===== */
.reth-info-guild .v{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.reth-guild-emblem{width:22px;height:22px;border-radius:6px;object-fit:contain;image-rendering:auto;filter:drop-shadow(0 2px 6px rgba(0,0,0,.45))}
.reth-info-guild a{color:inherit;text-decoration:none;border-bottom:1px dashed rgba(255,200,120,.35)}
.reth-info-guild a:hover{border-bottom-color:rgba(255,200,120,.9)}


.topkills-box {
    background: #0f1418;
    padding: 20px;
    border-radius: 6px;
}

.topkills-table {
    width: 100%;
    border-collapse: collapse;
    color: #cfd8dc;
}

.topkills-table th {
    background: #1b2228;
    padding: 10px;
    text-align: left;
    font-weight: bold;
}

.topkills-table td {
    padding: 10px;
    border-bottom: 1px solid #222;
}

.topkills-table tr:nth-child(even) {
    background: #141a1f;
}

.topkills-table tr:hover {
    background: #1e262c;
}

.topkills-table a {
    color: #4fc3f7;
    text-decoration: none;
}

.topkills-table a:hover {
    color: #81d4fa;
}




.bazaar-buttons {
    display: flex;
    gap: 15px;
    margin-top: 25px;
}

.btn-bazaar {
    padding: 12px 28px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    text-align: center;
    transition: 0.2s ease-in-out;
    min-width: 120px;
}

.btn-back {
    background: linear-gradient(180deg, #f4a742, #e58e1a);
    color: #111;
}

.btn-buy {
    background: linear-gradient(180deg, #ffd76a, #e2a400);
    color: #111;
}

.btn-bazaar:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 12px rgba(255, 170, 0, 0.5);
}



/* ===============================
   FORUM (Arkhan-like)
================================= */
.forum-page{ display:flex; flex-direction:column; gap:18px; }
.forum-block{
  background: rgba(17,17,17,.90);
  border:1px solid rgba(198,168,94,.35);
  box-shadow: 0 10px 30px rgba(0,0,0,.45);
  padding:16px 16px 18px;
}
.forum-block-title{
  display:flex; align-items:center; gap:10px;
  color: var(--gold);
  text-transform:uppercase;
  letter-spacing:1.6px;
  font-weight:800;
  font-size:13px;
}
.forum-dot{
  width:8px; height:8px; border-radius:50%;
  background:#2df58f;
  box-shadow:0 0 10px rgba(45,245,143,.45);
}
.forum-block-subtitle{
  margin:10px 0 14px;
  text-align:center;
  font-size:11px;
  letter-spacing:1px;
  color: rgba(232,230,227,.55);
}

.forum-boards{ display:flex; flex-direction:column; gap:12px; }
.forum-board{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:14px 14px;
  border-radius:10px;
  background: linear-gradient(180deg, rgba(10,10,10,.9), rgba(14,14,14,.9));
  border:1px solid rgba(111, 255, 255, .18);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.35);
  text-decoration:none !important;
}
.forum-board:hover{
  border-color: rgba(45,245,143,.32);
  box-shadow: 0 0 24px rgba(45,245,143,.08), inset 0 0 0 1px rgba(0,0,0,.35);
}
.forum-board-left{ display:flex; align-items:center; gap:14px; min-width: 320px; }
.forum-icon{
  width:44px; height:44px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background: radial-gradient(circle at 35% 30%, rgba(111,255,255,.22), rgba(0,0,0,.0) 58%),
              linear-gradient(180deg, rgba(18,18,18,.9), rgba(10,10,10,.9));
  border:1px solid rgba(111,255,255,.22);
  color: rgba(111,255,255,.95);
  box-shadow: 0 0 20px rgba(111,255,255,.08);
}
.forum-icon svg{ width:22px; height:22px; }
.forum-board-name{ font-weight:800; color: rgba(232,230,227,.95); letter-spacing:.3px; }
.forum-board-desc{ margin-top:2px; font-size:11px; color: rgba(232,230,227,.55); }

.forum-board-metrics{ width: 110px; display:flex; justify-content:center; }
.forum-metric{ text-align:center; }
.forum-metric-num{ font-weight:900; font-size:16px; color: rgba(232,230,227,.95); }
.forum-metric-label{ margin-top:2px; font-size:10px; letter-spacing:1px; color: rgba(232,230,227,.45); }

.forum-board-last{
  min-width: 220px;
  text-align:right;
  border-left:1px solid rgba(232,230,227,.08);
  padding-left:14px;
}
.forum-last-ago{ color: rgba(111,255,255,.95); font-weight:800; font-size:11px; letter-spacing:.8px; text-transform:uppercase; }
.forum-last-by{ margin-top:4px; font-size:11px; color: rgba(232,230,227,.55); text-transform:uppercase; letter-spacing:.6px; }
.forum-last-empty{ color: rgba(232,230,227,.28); font-size:11px; letter-spacing:1px; text-transform:uppercase; }

.forum-stats{
  margin-top:14px;
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap:12px;
}
.forum-stat{
  background: linear-gradient(180deg, rgba(10,10,10,.9), rgba(14,14,14,.9));
  border:1px solid rgba(111,255,255,.14);
  border-radius:10px;
  padding:14px;
  text-align:center;
}
.forum-stat-icon{
  width:40px; height:40px; border-radius:50%;
  margin:0 auto 10px;
  display:flex; align-items:center; justify-content:center;
  background: radial-gradient(circle at 35% 30%, rgba(45,245,143,.18), rgba(0,0,0,0) 58%),
              linear-gradient(180deg, rgba(18,18,18,.9), rgba(10,10,10,.9));
  border:1px solid rgba(45,245,143,.22);
  color:#2df58f;
  box-shadow: 0 0 20px rgba(45,245,143,.08);
}
.forum-stat-icon svg{ width:20px; height:20px; }
.forum-stat-num{ font-weight:900; font-size:16px; color: rgba(232,230,227,.95); }
.forum-stat-label{ margin-top:4px; font-size:10px; letter-spacing:1px; color: rgba(232,230,227,.45); text-transform:uppercase; }

.forum-online{ margin-top:14px; }
.forum-online-total{ font-size:12px; color: rgba(232,230,227,.55); letter-spacing:.4px; }
.forum-online-users{ margin-top:8px; font-size:12px; color: rgba(232,230,227,.75); }
.forum-online-empty{ margin-top:8px; font-size:12px; color: rgba(232,230,227,.28); letter-spacing:1px; text-transform:uppercase; }

@media (max-width: 980px){
  .forum-board{ flex-direction:column; align-items:stretch; }
  .forum-board-left{ min-width: auto; }
  .forum-board-metrics{ width:auto; justify-content:flex-start; }
  .forum-board-last{ min-width:auto; text-align:left; border-left:0; padding-left:0; border-top:1px solid rgba(232,230,227,.08); padding-top:12px; }
  .forum-stats{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* ===== Forum Board (Topic List) - clean & aligned ===== */
.forum-board-wrap { padding: 16px; }
.forum-board-header{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; margin: 10px 0 6px;
}
.forum-board-crumb{
  font-size:12px; color: rgba(232,230,227,.55);
  display:flex; align-items:center; gap:8px;
}
.forum-board-crumb a{ color: rgba(111,255,255,.92); text-decoration:none; }
.forum-board-crumb span{ color: rgba(232,230,227,.22); }
.forum-board-subtitle{
  font-size:12px; color: rgba(232,230,227,.55);
  margin-bottom: 10px;
}

.fbtn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 14px; border-radius:12px;
  font-weight:900; letter-spacing:.3px;
  text-decoration:none !important;
}
.fbtn-primary{
  color: rgba(232,230,227,.97);
  border:1px solid rgba(45,245,143,.35);
  background: linear-gradient(180deg, rgba(45,245,143,.22), rgba(10,10,10,.85));
  box-shadow: 0 0 18px rgba(45,245,143,.08);
}
.fbtn-primary:hover{
  border-color: rgba(111,255,255,.30);
  box-shadow: 0 0 26px rgba(111,255,255,.10), 0 0 16px rgba(45,245,143,.06);
}
.fbtn-ghost{
  color: rgba(232,230,227,.92);
  border:1px solid rgba(111,255,255,.18);
  background: rgba(0,0,0,.18);
}

.forum-board-pager{
  display:flex; align-items:center; gap:10px;
  padding: 10px 0 0;
}
.forum-board-pager.bottom{
  margin-top: 12px;
  padding-top: 14px;
  border-top:1px solid rgba(232,230,227,.08);
  justify-content:space-between;
}
.forum-board-pager .label{
  font-size:11px; text-transform:uppercase;
  letter-spacing:1px; color: rgba(232,230,227,.45);
}
.forum-board-pager .links a{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:34px; height:34px; padding:0 10px;
  border-radius:12px; margin-right:8px;
  color: rgba(111,255,255,.92);
  border:1px solid rgba(111,255,255,.14);
  background: rgba(0,0,0,.18);
  text-decoration:none;
}
.forum-board-pager .links a:hover{
  border-color: rgba(45,245,143,.25);
  box-shadow: 0 0 18px rgba(45,245,143,.06);
}
.forum-board-pager .links b{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:34px; height:34px; padding:0 10px;
  border-radius:12px; margin-right:8px;
  color: rgba(232,230,227,.95);
  border:1px solid rgba(45,245,143,.25);
  background: rgba(0,0,0,.28);
}

.forum-empty-box{
  margin-top:12px;
  padding:18px;
  border-radius:14px;
  border:1px dashed rgba(232,230,227,.18);
  background: rgba(0,0,0,.16);
}
.forum-empty-box .t1{ font-weight:950; color:rgba(232,230,227,.92); font-size:16px; }
.forum-empty-box .t2{ margin-top:6px; color:rgba(232,230,227,.55); font-size:12px; }

.topic-list{ display:flex; flex-direction:column; gap:12px; margin-top:12px; }
.topic-card{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px;
  padding:14px 14px;
  border-radius:14px;
  background: linear-gradient(180deg, rgba(10,10,10,.86), rgba(14,14,14,.90));
  border:1px solid rgba(111,255,255,.14);
  text-decoration:none !important;
}
.topic-card:hover{
  border-color: rgba(45,245,143,.28);
  box-shadow: 0 0 26px rgba(45,245,143,.07);
}

.topic-left{ min-width:0; flex:1; }
.topic-title{ font-weight:950; font-size:14px; color:rgba(232,230,227,.96); }
.topic-preview{ margin-top:6px; font-size:12px; color:rgba(232,230,227,.55); }
.topic-meta{ margin-top:10px; font-size:11px; color:rgba(232,230,227,.55); display:flex; gap:10px; flex-wrap:wrap; }
.topic-meta .dot{ color: rgba(232,230,227,.22); }
.topic-meta .by a{ color: rgba(111,255,255,.92); text-decoration:none; }

.topic-right{
  display:flex; align-items:center; gap:14px;
  border-left:1px solid rgba(232,230,227,.08);
  padding-left:14px;
}
.kpi{ width:86px; text-align:center; }
.kpi .num{ font-weight:950; font-size:16px; color:rgba(232,230,227,.95); }
.kpi .lbl{ margin-top:2px; font-size:10px; letter-spacing:1px; color:rgba(232,230,227,.45); }
.go{
  width:36px; height:36px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(232,230,227,.10);
  background: rgba(0,0,0,.18);
  color: rgba(232,230,227,.70);
  font-size:22px; line-height:1;
}

@media (max-width: 980px){
  .forum-board-header{ flex-direction:column; align-items:flex-start; }
  .topic-card{ flex-direction:column; align-items:flex-start; }
  .topic-right{ border-left:0; padding-left:0; }
  .kpi{ width:auto; text-align:left; }
  .go{ display:none; }
  .forum-board-pager.bottom{ align-items:flex-start; }
}
/* ===== Forum Thread (posts) - match board style ===== */
.forum-thread-wrap{ padding:16px; }

.thread-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin: 10px 0 10px;
}
.thread-crumb{
  font-size:12px;
  color: rgba(232,230,227,.55);
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
}
.thread-crumb a{ color: rgba(111,255,255,.92); text-decoration:none; }
.thread-crumb span{ color: rgba(232,230,227,.22); }
.thread-crumb b{ color: rgba(232,230,227,.92); }

.thread-pager{
  display:flex;
  align-items:center;
  gap:10px;
  padding-top: 10px;
  margin-bottom: 12px;
}
.thread-pager.bottom{
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(232,230,227,.08);
}
.thread-pager .label{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:1px;
  color: rgba(232,230,227,.45);
}
.thread-pager .links a{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:34px; height:34px; padding:0 10px;
  border-radius:12px; margin-right:8px;
  color: rgba(111,255,255,.92);
  border:1px solid rgba(111,255,255,.14);
  background: rgba(0,0,0,.18);
  text-decoration:none;
}
.thread-pager .links a:hover{
  border-color: rgba(45,245,143,.25);
  box-shadow: 0 0 18px rgba(45,245,143,.06);
}
.thread-pager .links b{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:34px; height:34px; padding:0 10px;
  border-radius:12px; margin-right:8px;
  color: rgba(232,230,227,.95);
  border:1px solid rgba(45,245,143,.25);
  background: rgba(0,0,0,.28);
}

.post-list{ display:flex; flex-direction:column; gap:12px; }
.post-card{
  border-radius:14px;
  background: linear-gradient(180deg, rgba(10,10,10,.86), rgba(14,14,14,.90));
  border:1px solid rgba(111,255,255,.14);
  overflow:hidden;
}
.post-card:hover{
  border-color: rgba(45,245,143,.22);
  box-shadow: 0 0 24px rgba(45,245,143,.06);
}

.post-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(232,230,227,.08);
  background: rgba(0,0,0,.20);
}
.post-date{
  font-size:12px;
  font-weight:800;
  color: rgba(232,230,227,.75);
  letter-spacing:.2px;
}

.post-tools{ display:flex; gap:8px; }
.post-tools .tool{
  width:34px; height:34px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:12px;
  border:1px solid rgba(232,230,227,.10);
  background: rgba(0,0,0,.22);
  color: rgba(232,230,227,.75);
  text-decoration:none;
  font-size:14px;
}
.post-tools .tool:hover{
  border-color: rgba(45,245,143,.25);
  box-shadow: 0 0 18px rgba(45,245,143,.06);
  color: rgba(232,230,227,.95);
}

.post-body{
  display:flex;
  gap:14px;
  padding: 14px;
}
.post-left{
  width: 190px;
  border-right: 1px solid rgba(232,230,227,.08);
  padding-right: 14px;
}
.post-author{
  font-weight:950;
  color: rgba(232,230,227,.95);
  font-size:14px;
}
.post-meta{
  margin-top:6px;
  font-size:12px;
  color: rgba(232,230,227,.55);
}

.post-right{ flex:1; min-width:0; }
.post-text{
  font-size:13px;
  color: rgba(232,230,227,.80);
  line-height: 1.55;
}
.post-text a{ color: rgba(111,255,255,.92); }
.post-text img{ max-width: 100%; height:auto; }

.thread-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

@media (max-width: 980px){
  .thread-head{ flex-direction:column; align-items:flex-start; }
  .thread-footer{ flex-direction:column; align-items:flex-start; }
  .post-body{ flex-direction:column; }
  .post-left{ width:100%; border-right:0; padding-right:0; border-bottom:1px solid rgba(232,230,227,.08); padding-bottom:12px; }
}



/* Forum last post collapsible (index boards) */
.forum-last-details { width: 100%; }
.forum-last-details summary { list-style: none; cursor: pointer; }
.forum-last-details summary::-webkit-details-marker { display: none; }

.forum-last-summary{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
}

.forum-last-chip{
  display:inline-flex;
  align-items:center;
  padding:6px 10px;
  border-radius:999px;
  font-size:11px;
  font-weight:900;
  letter-spacing:.6px;
  text-transform:uppercase;
  color: rgba(111,255,255,.95);
  border:1px solid rgba(111,255,255,.18);
  background: rgba(0,0,0,.18);
}

.forum-last-more{
  font-size:11px;
  color: rgba(232,230,227,.55);
  text-transform:uppercase;
  letter-spacing:1px;
}

.forum-last-body{
  margin-top:10px;
  padding-top:10px;
  border-top:1px solid rgba(232,230,227,.08);
}
/* Remove qualquer "Saiba mais" / setinha do details */
.forum-last-details summary {
  display: none !important;
}
.forum-last-details[open] .forum-last-body{
  display:block;
}
.forum-last-details:not([open]) .forum-last-body{
  display:none;
}

/* ===== Fix: last post as floating tooltip (no empty bar) ===== */
.forum-board-last{ position: relative; }

/* tooltip escondido sem ocupar espaço */
.forum-last-tooltip{
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%) translateX(6px);
  opacity: 0;
  pointer-events: none;
  transition: .18s ease;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(111,255,255,.18);
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(6px);
  min-width: 180px;
  text-align: right;
  box-shadow: 0 0 24px rgba(45,245,143,.06);
  z-index: 3;
}

/* aparece só no hover do card */
.forum-board:hover .forum-last-tooltip{
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

/* tipinho setinha */
.forum-last-tooltip::before{
  content:"";
  position:absolute;
  right:-6px;
  top:50%;
  transform: translateY(-50%);
  width:10px; height:10px;
  background: rgba(0,0,0,.55);
  border-right:1px solid rgba(111,255,255,.18);
  border-top:1px solid rgba(111,255,255,.18);
  transform: translateY(-50%) rotate(45deg);
}

.forum-last-ago{
  font-size:11px;
  font-weight:900;
  letter-spacing:.6px;
  text-transform:uppercase;
  color: rgba(111,255,255,.95);
}

.forum-last-by{
  margin-top:4px;
  font-size:11px;
  color: rgba(232,230,227,.55);
}
.forum-last-by a{
  color: rgba(111,255,255,.92);
  text-decoration:none;
}

/* ===== Fix definitivo: sem coluna vazia quando existe last_post ===== */
.forum-board{ position: relative; }

/* Tooltip flutuante (não ocupa espaço) */
.forum-last-tooltip{
  position:absolute;
  right:14px;
  top:50%;
  transform: translateY(-50%) translateX(8px);
  opacity:0;
  pointer-events:none;
  transition: .18s ease;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(111,255,255,.18);
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(6px);
  min-width: 190px;
  text-align:right;
  z-index: 5;
  box-shadow: 0 0 24px rgba(45,245,143,.06);
}

/* aparece só no hover do card */
.forum-board:hover .forum-last-tooltip{
  opacity:1;
  transform: translateY(-50%) translateX(0);
}

/* setinha do tooltip */
.forum-last-tooltip::before{
  content:"";
  position:absolute;
  right:-6px;
  top:50%;
  width:10px; height:10px;
  background: rgba(0,0,0,.55);
  border-right:1px solid rgba(111,255,255,.18);
  border-top:1px solid rgba(111,255,255,.18);
  transform: translateY(-50%) rotate(45deg);
}



/* ===== Support Team (Rethoria-like) ===== */
.support-wrap {
  margin-top: 6px;
}

.support-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.35);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.03);
}

.support-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #18d26b;
  box-shadow: 0 0 10px rgba(24,210,107,.55);
}

.support-header-title {
  letter-spacing: 2px;
  font-weight: 600;
  text-transform: uppercase;
}

.support-intro {
  padding: 12px 14px 6px 14px;
  opacity: .75;
  font-size: 12px;
  text-transform: uppercase;
}

.support-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  padding: 14px;
}

.support-card {
  width: 260px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.30);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.03);
  position: relative;
}

.support-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px 0 12px;
}

.support-card-name {
  text-transform: uppercase;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 1px;
}

.support-card-name a {
  color: #d7d7d7;
  text-decoration: none;
}

.support-card-name a:hover {
  color: #ffffff;
}

.support-card-pill {
  font-size: 10px;
  opacity: .65;
  border: 1px solid rgba(255,255,255,.10);
  padding: 3px 8px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.support-card-body {
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 12px;
}

.support-outfit {
  max-height: 140px;
  image-rendering: pixelated;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.6));
}

.support-outfit-placeholder {
  width: 60px;
  height: 60px;
  border-radius: 8px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
}

.support-card-bottom {
  height: 3px;
  background: linear-gradient(90deg, #ff2a2a, #ff2aa1);
  opacity: .85;
}


/* ===== Rules Page ===== */

.rules-wrap {
  margin-top: 6px;
}

.rules-topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.35);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.03);
}

.rules-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #18d26b;
  box-shadow: 0 0 10px rgba(24,210,107,.55);
}

.rules-title {
  letter-spacing: 2px;
  font-weight: 600;
  text-transform: uppercase;
}

.rules-box {
  padding: 18px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.28);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.03);
}

.rules-intro {
  font-size: 12px;
  text-transform: uppercase;
  opacity: .7;
  margin-bottom: 18px;
}

.rules-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.rule-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 12px;
  border: 1px solid rgba(255,255,255,.06);
  background: rgba(0,0,0,.35);
  transition: all .2s ease;
}

.rule-item:hover {
  border-color: rgba(255,255,255,.15);
  background: rgba(0,0,0,.45);
}

.rule-number {
  font-size: 18px;
  font-weight: 700;
  color: #18d26b;
  letter-spacing: 2px;
}

.rule-text {
  font-size: 13px;
  line-height: 1.5;
}


/* ===== Rules extras ===== */
.rule-head{
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 8px;
}
.rule-subhead{
  margin-top: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  opacity: .85;
}
.rule-par{
  margin-top: 8px;
  line-height: 1.55;
  font-size: 13px;
}
.rule-ul{
  margin: 8px 0 0 18px;
}
.rule-ul li{
  margin: 6px 0;
  line-height: 1.55;
}
.rule-inactive{
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.22);
}
.rule-strike{
  text-decoration: line-through;
  opacity: .7;
}
.rules-foot{
  margin-top: 16px;
  font-size: 12px;
  text-transform: uppercase;
  opacity: .7;
}