/* ============================================================
   FENRIR OT — Modern Theme for MyAAC (kathrine template)
   Full override · Dark mode · Glassmorphism · Animations
   ============================================================ */

:root {
  --bg-deep:     #0a0d1a;
  --bg-mid:      #11162a;
  --bg-elev:     #1a2040;
  --surface:     rgba(20, 26, 50, 0.78);
  --surface-2:   rgba(15, 20, 38, 0.92);
  --accent:      #ffb547;
  --accent-2:    #ff6f3c;
  --accent-glow: rgba(255, 181, 71, 0.42);
  --gold:        #f0c674;
  --green:       #4ade80;
  --red:         #f87171;
  --text:        #e7eaf3;
  --text-mute:   #8b93a7;
  --border:      rgba(255, 181, 71, 0.20);
  --border-hi:   rgba(255, 181, 71, 0.50);
  --radius:      16px;
  --radius-sm:   10px;
  --shadow:      0 12px 36px rgba(0,0,0,0.55);
  --shadow-hi:   0 18px 48px rgba(255,111,60,0.22);
  --font-ui:     "Inter", "Segoe UI", system-ui, sans-serif;
  --font-title:  "Cinzel", "Inter", serif;
  --tx:          220ms cubic-bezier(.4,0,.2,1);
}

/* ================= GLOBAL RESET ================= */
html, body, #page, #content, #header, #tabs, #mainsubmenu, #content-bot, #copyrights {
  background-image: none !important;
}

html { scroll-behavior: smooth; }

body {
  background:
    radial-gradient(900px 600px at 15% -8%,  rgba(255,181,71,0.10), transparent 60%),
    radial-gradient(800px 500px at 85% 0%,   rgba(255,111,60,0.10), transparent 60%),
    radial-gradient(1200px 800px at 50% 110%, rgba(74,222,128,0.05), transparent 60%),
    radial-gradient(ellipse at top, #1a2040 0%, var(--bg-deep) 60%) !important;
  background-color: var(--bg-deep) !important;
  background-attachment: fixed !important;
  color: var(--text) !important;
  font-family: var(--font-ui) !important;
  font-size: 14px !important;
  line-height: 1.55;
  margin: 0 !important;
  padding: 0 !important;
  min-height: 100vh;
}

* { box-sizing: border-box; }

/* ================= LAYOUT WRAPPER ================= */
#page {
  width: min(96vw, 1240px) !important;
  margin: 24px auto !important;
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ================= HEADER (replace logo image) ================= */
#header {
  width: 100% !important;
  height: 180px !important;
  background:
    radial-gradient(600px 200px at 50% 100%, var(--accent-glow), transparent 60%),
    linear-gradient(135deg, rgba(255,181,71,0.12), rgba(255,111,60,0.06)) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  position: relative;
  overflow: hidden;
  float: none !important;
  box-shadow: var(--shadow);
}

#header::before {
  content: "⚔ FENRIR OT ⚔";
  font-family: var(--font-title);
  font-size: 56px;
  font-weight: 700;
  letter-spacing: 6px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  position: absolute;
  top: 38%; left: 50%;
  transform: translate(-50%, -50%);
  text-shadow: 0 0 60px var(--accent-glow);
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.6));
  animation: glow 3s ease-in-out infinite alternate;
}

#header::after {
  content: "ONLINE · BRASIL · TFS 1.x";
  position: absolute;
  bottom: 26px; left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 8px;
  color: var(--text-mute);
  text-transform: uppercase;
}

@keyframes glow {
  from { text-shadow: 0 0 30px var(--accent-glow); }
  to   { text-shadow: 0 0 60px var(--accent-glow), 0 0 100px rgba(255,111,60,0.3); }
}

/* ================= TABS (main menu) ================= */
#tabs {
  width: 100% !important;
  height: auto !important;
  padding: 8px !important;
  display: flex !important;
  flex-wrap: wrap;
  gap: 6px;
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow);
  position: static !important;
}

#tabs span, #tabs .tab, #tabs .tab-active {
  width: auto !important;
  height: auto !important;
  background: rgba(255,255,255,0.03) !important;
  background-image: none !important;
  color: var(--text) !important;
  font-family: var(--font-title) !important;
  font-weight: 700 !important;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 12px 22px !important;
  border-radius: var(--radius-sm) !important;
  border: 1px solid transparent !important;
  cursor: pointer;
  transition: var(--tx);
  float: none !important;
  display: inline-flex !important;
  align-items: center;
  font-size: 12px;
}

#tabs span:hover, #tabs .tab:hover {
  background: linear-gradient(135deg, rgba(255,181,71,0.15), rgba(255,111,60,0.08)) !important;
  color: var(--accent) !important;
  border-color: var(--border-hi) !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px var(--accent-glow);
  text-decoration: none !important;
}

#tabs .tab-active {
  background: linear-gradient(135deg, var(--accent), var(--accent-2)) !important;
  color: #1a1106 !important;
  border-color: transparent !important;
  box-shadow: 0 6px 20px var(--accent-glow);
}

/* ================= SUBMENU ================= */
#mainsubmenu {
  width: 100% !important;
  height: auto !important;
  min-height: 42px !important;
  padding: 10px 14px !important;
  background: rgba(255,255,255,0.02) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  float: none !important;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}

#mainsubmenu a {
  display: inline-flex !important;
  align-items: center;
  float: none !important;
  margin: 0 !important;
  padding: 6px 14px !important;
  color: var(--text) !important;
  font-weight: 500 !important;
  font-size: 12px;
  border-radius: 6px;
  transition: var(--tx);
  text-decoration: none !important;
}
#mainsubmenu a:hover {
  background: rgba(255,181,71,0.10) !important;
  color: var(--accent) !important;
  text-decoration: none !important;
}

#mainsubmenu .separator {
  width: 1px !important;
  height: 14px !important;
  background: var(--border) !important;
  background-image: none !important;
  margin: 0 4px !important;
  float: none !important;
  display: inline-block !important;
}

/* ================= CONTENT ================= */
#content {
  width: 100% !important;
  background: var(--surface-2) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  padding: 0 !important;
  float: none !important;
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
}

#margins {
  width: 100% !important;
  margin: 0 !important;
  padding: 24px 28px !important;
  text-align: left !important;
}

#margins > table:first-child {
  width: 100%;
  margin-bottom: 12px;
  font-size: 12px;
  color: var(--text-mute) !important;
}
#margins > table:first-child a { color: var(--accent) !important; }
#margins hr { border: none !important; height: 1px !important; background: var(--border) !important; margin: 12px 0 20px !important; }

#ContentHelper, .Content {
  background: transparent !important;
}

#content-bot {
  display: none !important;
}

/* ================= COPYRIGHTS / FOOTER ================= */
#copyrights {
  width: 100% !important;
  padding: 18px !important;
  float: none !important;
  text-align: center !important;
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  color: var(--text-mute) !important;
  font-size: 12px;
}
#copyrights a { color: var(--accent) !important; }

/* ================= TYPOGRAPHY ================= */
h1, h2, h3, h4 {
  font-family: var(--font-title) !important;
  color: var(--accent) !important;
  letter-spacing: 0.5px;
  text-shadow: 0 0 18px var(--accent-glow);
  margin-top: 0;
}
h1 { font-size: 26px; }
h2 { font-size: 21px; }
h3 { font-size: 17px; }

a { color: var(--accent) !important; text-decoration: none !important; transition: var(--tx); }
a:hover { color: var(--accent-2) !important; text-shadow: 0 0 8px var(--accent-glow); }

/* ================================================================
   TABLES — bulletproof override against kathrine's beige scheme
   Forces dark theme on every TableContainer/Odd/Even/Caption
   ================================================================ */

/* Wrapper: makes container fully dark */
.TableContainer, table.TableContainer, table.Table1, table.Table2, table.Table3, table.Table4, table.Table5 {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  overflow: hidden !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.25) !important;
  font-size: 13px !important;
  color: var(--text) !important;
}

.TableContentContainer, .TableContent, .InnerTableContainer {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  margin: 0 !important;
  border: none !important;
}

/* Kill beige row colors (kathrine: #e5e3d7 Odd, #d0cdb4 Even) */
.TableContainer .Odd, .TableContainer .Even,
.TableContainer tr.Odd, .TableContainer tr.Even,
tr.Odd, tr.Even, td.Odd, td.Even,
[class*="Odd"], [class*="Even"] {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  color: var(--text) !important;
}

/* Re-add subtle zebra striping in dark theme */
.TableContainer tr.Even, .TableContainer tr.Even > td,
.TableContainer tbody tr:nth-child(even),
.TableContainer tbody tr:nth-child(even) > td {
  background: rgba(255,255,255,0.025) !important;
  background-color: rgba(255,255,255,0.025) !important;
}

.TableContainer tr:hover, .TableContainer tr:hover > td,
table tr:hover { background: rgba(255,181,71,0.07) !important; background-color: rgba(255,181,71,0.07) !important; }

.TableContainer td, .TableContainer th,
.TableContent td, .TableContent th,
.InnerTableContainer td, .InnerTableContainer th {
  padding: 10px 14px !important;
  border: none !important;
  border-bottom: 1px solid rgba(255,255,255,0.04) !important;
  color: var(--text) !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  font-size: 13px !important;
}
.TableContainer tr:last-child > td { border-bottom: none !important; }

/* CAPTION header (the bege #afab89 bar with white text) */
.CaptionContainer, .CaptionInnerContainer,
.TableContainer .CaptionContainer, .TableContainer .CaptionInnerContainer {
  background: linear-gradient(135deg, rgba(255,181,71,0.18), rgba(255,111,60,0.10)) !important;
  background-color: transparent !important;
  background-image: linear-gradient(135deg, rgba(255,181,71,0.18), rgba(255,111,60,0.10)) !important;
  padding: 10px 14px !important;
  border: none !important;
  border-bottom: 1px solid var(--border-hi) !important;
  height: auto !important;
}
.CaptionContainer .Text,
.TableContainer .CaptionContainer .Text {
  color: var(--accent) !important;
  font-family: var(--font-title) !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  padding: 4px 0 !important;
}

/* Hide decorative bg-image corner sprites */
.CaptionEdgeLeftTop, .CaptionEdgeRightTop, .CaptionEdgeLeftBottom, .CaptionEdgeRightBottom,
.CaptionBorderTop, .CaptionBorderBottom, .CaptionVerticalLeft, .CaptionVerticalRight,
.TableShadowContainer, .TableShadowContainerRightTop, .TableShadowRightTop,
.TableBottomShadow, .TableBottomLeftShadow, .TableBottomRightShadow,
.BoxFrameEdgeLeftTop, .BoxFrameEdgeRightTop, .BoxFrameEdgeLeftBottom, .BoxFrameEdgeRightBottom,
.BoxFrameVerticalLeft, .BoxFrameVerticalRight, .BoxFrameHorizontal,
.TopButtonContainer, .TopButton {
  display: none !important;
  background-image: none !important;
}

/* LabelH (horizontal label bar — #afab89) */
.LabelH, .LabelH td, tr.LabelH, tr.LabelH td {
  background: linear-gradient(180deg, rgba(255,181,71,0.16), rgba(255,181,71,0.05)) !important;
  background-color: transparent !important;
  background-image: linear-gradient(180deg, rgba(255,181,71,0.16), rgba(255,181,71,0.05)) !important;
  color: var(--accent) !important;
  font-family: var(--font-title) !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  border-bottom: 1px solid var(--border-hi) !important;
  padding: 12px 14px !important;
}

/* LabelV (vertical label column — "Account Name:", etc.) */
.LabelV, td.LabelV, .LabelV120, .LabelV150, .LabelV200,
td.LabelV120, td.LabelV150, td.LabelV200 {
  background: rgba(255,181,71,0.05) !important;
  background-color: rgba(255,181,71,0.05) !important;
  background-image: none !important;
  color: var(--accent) !important;
  font-weight: 600 !important;
  font-family: var(--font-ui) !important;
  font-size: 13px !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  border-right: 1px solid var(--border) !important;
  padding: 10px 14px !important;
  white-space: nowrap;
  vertical-align: top;
}
.LabelV span, .LabelV > span { color: var(--accent) !important; }
.LabelV120 { width: 120px; }
.LabelV150 { width: 150px; }
.LabelV200 { width: 200px; }

/* ================================================================
   NUCLEAR OPTION: catch any inline kathrine beige hex colors
   ================================================================ */
[style*="#e5e3d7"], [style*="#E5E3D7"],
[style*="#d0cdb4"], [style*="#D0CDB4"],
[style*="#afab89"], [style*="#AFAB89"],
[style*="#F1E0C6"], [style*="#f1e0c6"],
[style*="#D4C0A1"], [style*="#d4c0a1"],
[bgcolor="#e5e3d7"], [bgcolor="#d0cdb4"], [bgcolor="#afab89"] {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  color: var(--text) !important;
}

/* Specifically: kathrine inline styles that set bgcolor on cells/divs */
.TableContainer [style*="background"], .TableContent [style*="background"] {
  background-image: none !important;
}

/* Account/MyAccount sidebar (left list with "My Account", etc.) */
.SubmenuItem, .SubmenuitemActive, .ActiveSubmenuItem,
.AccountMenuBox, .AccountSidebar, .submenu, .Submenu,
table[width="100%"] td.LabelV200 {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

/* ----- Account/Manage page styles (vertical-menu sidebar + tables) ----- */
#account-manage { padding: 8px 0 !important; }
#account-manage #one { width: 220px !important; }
#account-manage #two { margin-left: 240px !important; padding-left: 0 !important; }

.vertical-menu {
  background: rgba(0,0,0,0.25) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  padding: 6px !important;
  overflow: hidden;
}
.vertical-menu a {
  background: transparent !important;
  background-color: transparent !important;
  color: var(--text) !important;
  display: block !important;
  padding: 11px 14px !important;
  margin: 2px 0 !important;
  border-radius: 6px !important;
  text-decoration: none !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  border-left: 3px solid transparent !important;
  transition: var(--tx);
}
.vertical-menu a:hover {
  background: linear-gradient(90deg, rgba(255,181,71,0.10), transparent) !important;
  background-color: transparent !important;
  color: var(--accent) !important;
  border-left-color: var(--accent) !important;
  transform: translateX(3px);
}

/* Make rows uniform on account page (twig sets inline bgcolor) */
#account-manage table tr,
#account-manage table tr td {
  background: transparent !important;
  background-color: transparent !important;
}
#account-manage table tr:nth-child(even) td {
  background: rgba(255,255,255,0.025) !important;
  background-color: rgba(255,255,255,0.025) !important;
}
#account-manage table tr:hover td {
  background: rgba(255,181,71,0.06) !important;
  background-color: rgba(255,181,71,0.06) !important;
}
#account-manage table td:first-child {
  color: var(--accent) !important;
  font-weight: 600;
  padding: 11px 14px !important;
}
#account-manage table td {
  padding: 11px 14px !important;
  border-bottom: 1px solid rgba(255,255,255,0.04) !important;
  vertical-align: top;
}
#account-manage table tr:last-child td { border-bottom: none !important; }
#account-manage table { width: 100% !important; border: 1px solid var(--border) !important; border-radius: var(--radius-sm) !important; overflow: hidden; background: rgba(0,0,0,0.22) !important; margin-bottom: 16px; }
#account-manage h1, #account-manage h2 { margin-top: 10px !important; }

/* Account logs table th (uses bgcolor=vdarkborder) */
#account-manage table tr.white th, #account-manage table tr[class*="white"] th,
#account-manage table th {
  background: linear-gradient(180deg, rgba(255,181,71,0.16), rgba(255,181,71,0.05)) !important;
  color: var(--accent) !important;
  font-family: var(--font-title) !important;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.6px;
  padding: 11px 14px !important;
  border-bottom: 1px solid var(--border-hi) !important;
}

/* ================= NEWS BOXES ================= */
.Content #News .BoxContent, .Content #FeaturedArticle .BoxContent,
.Content #NewsTicker .BoxContent, .Content #NewsArchive .BoxContent {
  background: rgba(0,0,0,0.20) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  padding: 16px !important;
  margin-bottom: 16px;
  color: var(--text) !important;
}

.NewsHeadlineBackground {
  background: linear-gradient(90deg, rgba(255,181,71,0.20), rgba(255,111,60,0.08)) !important;
  background-image: linear-gradient(90deg, rgba(255,181,71,0.20), rgba(255,111,60,0.08)) !important;
  background-repeat: no-repeat !important;
  border: 1px solid var(--border-hi) !important;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0 !important;
  height: 32px !important;
  margin-bottom: 8px !important;
  display: flex;
  align-items: center;
  padding: 0 14px;
}

.NewsHeadlineText, .NewsHeadlineAuthor {
  position: static !important;
  top: auto !important; left: auto !important;
  color: var(--accent) !important;
  font-family: var(--font-title) !important;
  font-size: 13px !important;
  text-shadow: none !important;
  margin-right: 12px;
}
.NewsHeadlineAuthor { margin-left: auto; color: var(--text-mute) !important; font-family: var(--font-ui) !important; }
.NewsHeadlineDate {
  position: static !important;
  color: var(--text-mute) !important;
  font-family: monospace !important;
  font-size: 11px !important;
  margin-right: 12px;
}
.NewsHeadlineIcon { display: none !important; }

/* News body */
.Content #News .BoxContent ul, .Content #News .BoxContent ol { line-height: 1.8; }
.Content #News .BoxContent li { margin-bottom: 4px; }

/* ================= BUTTONS ================= */
input[type=submit], input[type=button], button, .Button, a.button, .BigButton, .ButtonText {
  background: linear-gradient(135deg, var(--accent), var(--accent-2)) !important;
  background-image: linear-gradient(135deg, var(--accent), var(--accent-2)) !important;
  color: #1a1106 !important;
  font-family: var(--font-ui) !important;
  font-weight: 700 !important;
  padding: 10px 22px !important;
  border-radius: var(--radius-sm) !important;
  border: 0 !important;
  cursor: pointer;
  letter-spacing: 0.3px;
  box-shadow: 0 6px 20px var(--accent-glow), inset 0 0 0 1px rgba(255,255,255,0.18);
  transition: var(--tx);
  text-shadow: none !important;
  position: static !important;
  width: auto !important;
  height: auto !important;
}

input[type=submit]:hover, input[type=button]:hover, button:hover, .Button:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hi), inset 0 0 0 1px rgba(255,255,255,0.28);
  filter: brightness(1.08);
}

/* ================= FORMS ================= */
input[type=text], input[type=email], input[type=password], input[type=number], select, textarea {
  background: rgba(0,0,0,0.4) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--text) !important;
  padding: 9px 12px !important;
  font-family: var(--font-ui) !important;
  font-size: 13px;
  transition: var(--tx);
}
input:focus, select:focus, textarea:focus {
  border-color: var(--accent) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px var(--accent-glow);
}

/* ================= MONSTER / OUTFIT IMAGES ================= */
img[src*="monster"], img[src*="outfit"], img[src*="creature"] {
  background: radial-gradient(circle at center, rgba(255,181,71,0.20), transparent 70%);
  border-radius: var(--radius-sm);
  padding: 6px;
  transition: var(--tx);
}
img[src*="monster"]:hover, img[src*="outfit"]:hover {
  transform: scale(1.08);
  filter: drop-shadow(0 0 16px var(--accent-glow));
}

/* ================= ICONS / STATUS ================= */
[style*="color: green"], [style*="color:green"] {
  color: var(--green) !important;
  text-shadow: 0 0 10px rgba(74,222,128,0.5);
}
[style*="color: red"], [style*="color:red"] {
  color: var(--red) !important;
}

/* ================= ANIMATIONS ================= */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

#content > *, .TableContainer, .BoxContent {
  animation: fadeUp 360ms ease-out both;
}

/* ================= SCROLLBAR ================= */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg-deep); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover { filter: brightness(1.15); }

::selection { background: var(--accent); color: #1a1106; }

/* ================= RESPONSIVE ================= */
/* Tablet & menor (1024px-) */
@media (max-width: 1024px) {
  /* Esconde os widgets flutuantes (ficam abaixo do conteudo via .fs-mobile-widgets se houver) */
  #fs-status, #fs-topplayers, #fs-houses, #fs-online24h { display: none !important; }

  /* Page totalmente fluida */
  #page { width: 100% !important; max-width: 100% !important; padding: 0 12px !important; }
  #content, #margins, #content-bot { max-width: 100% !important; }
}

/* Mobile (820px-) */
@media (max-width: 820px) {
  #page { padding: 0 6px !important; }
  #header { height: 130px !important; }
  #header::before {
    font-size: 38px !important;
    letter-spacing: 3px !important;
    white-space: nowrap !important;
    top: 40% !important;
  }
  #header::after {
    font-size: 9px !important;
    letter-spacing: 4px !important;
    bottom: 14px !important;
  }
  #margins { padding: 12px 8px !important; }

  /* JOGAR AGORA — desce pra rodape e nao corta mais */
  #fs-play {
    bottom: 14px !important;
    left: 14px !important;
    top: auto !important;
    padding: 10px 16px !important;
    font-size: 11px !important;
    z-index: 9000;
  }

  /* Discord widget — desce e diminui */
  #fs-discord {
    width: 46px !important;
    height: 46px !important;
    bottom: 14px !important;
    right: 14px !important;
  }
  #fs-discord svg { width: 22px !important; height: 22px !important; }
  /* Tooltip do discord some no mobile (estoura tela) */
  #fs-discord::after { display: none !important; }

  /* Status bar (Servidor Online > Players > Monsters > Uptime) — quebra em
     linha propria abaixo do breadcrumb pra nao sobrepor com "Latest News" */
  #content > #margins > table:first-of-type tr {
    display: flex !important;
    flex-direction: column !important;
  }
  #content > #margins > table:first-of-type td {
    width: 100% !important;
    text-align: left !important;
    padding: 4px 6px !important;
    font-size: 12px !important;
  }
  #content > #margins > table:first-of-type td:first-child {
    border-bottom: 1px solid var(--border) !important;
    padding-bottom: 8px !important;
    margin-bottom: 4px !important;
  }

  /* Menu tabs - scroll horizontal pra caber */
  #tabs {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    padding: 0 4px !important;
    gap: 4px;
    scrollbar-width: none;
  }
  #tabs::-webkit-scrollbar { display: none; }
  #tabs span, #tabs .tab, #tabs .tab-active {
    padding: 9px 12px !important;
    font-size: 11px !important;
    white-space: nowrap !important;
    flex-shrink: 0;
  }

  /* Submenu tambem scroll horizontal */
  #mainsubmenu, #mainsubmenu > div {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap !important;
    scrollbar-width: thin;
  }
  #mainsubmenu a {
    display: inline-block !important;
    padding: 8px 10px !important;
    font-size: 12px !important;
  }

  /* Tabelas com scroll horizontal (Top players, online, etc) */
  #content table, #margins table {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    max-width: 100% !important;
  }
  #content table.dataTable, #margins table.dataTable {
    display: table !important;  /* DataTables tem scroll proprio */
  }

  /* Status bar (Server Online > Players > Monsters > Uptime) — empilha */
  #content table tr td:first-child {
    display: block !important;
    margin-bottom: 4px;
  }

  /* News headlines */
  .NewsHeadline {
    font-size: 13px !important;
    padding: 8px !important;
  }

  /* Reduz padding de containers de news */
  td[style*="padding-left:10px"] { padding: 8px !important; }

  /* Inputs e botoes touch-friendly */
  input[type="text"], input[type="password"], input[type="email"],
  select, textarea, button, input[type="submit"], input[type="button"] {
    min-height: 40px !important;
    font-size: 14px !important;
  }

  /* DataTables responsive overrides */
  .dataTables_wrapper { font-size: 12px; }
  .dataTables_length, .dataTables_filter { float: none !important; text-align: left !important; margin-bottom: 8px; }
  .dataTables_filter input { width: 100% !important; box-sizing: border-box; }
}

/* Mobile pequeno (480px-) */
@media (max-width: 480px) {
  #header { height: 100px !important; }
  #header::before {
    font-size: 26px !important;
    letter-spacing: 2px !important;
    white-space: nowrap !important;
  }
  #header::after {
    font-size: 8px !important;
    letter-spacing: 3px !important;
    bottom: 10px !important;
  }
  #margins { padding: 8px 4px !important; }
  body { font-size: 13px; }
  #fs-play { padding: 8px 14px !important; font-size: 10px !important; }
}

/* ================= DATATABLES (spells, monsters, etc.) ================= */
table.dataTable, table.dataTable thead, table.dataTable tbody, table.dataTable tfoot {
  background: transparent !important;
  background-color: transparent !important;
  color: var(--text) !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border: none !important;
}
table.dataTable thead th, table.dataTable thead td {
  background: linear-gradient(180deg, rgba(255,181,71,0.18), rgba(255,181,71,0.05)) !important;
  background-color: transparent !important;
  color: var(--accent) !important;
  font-family: var(--font-title) !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  font-size: 12px !important;
  padding: 12px 14px !important;
  border-bottom: 1px solid var(--border-hi) !important;
  border-top: none !important;
}
table.dataTable tbody tr, table.dataTable tbody tr.odd, table.dataTable tbody tr.even {
  background: transparent !important;
  background-color: transparent !important;
  color: var(--text) !important;
}
table.dataTable tbody tr.even, table.dataTable tbody tr:nth-child(even) {
  background: rgba(255,255,255,0.025) !important;
  background-color: rgba(255,255,255,0.025) !important;
}
table.dataTable tbody tr:hover, table.dataTable tbody tr.odd:hover, table.dataTable tbody tr.even:hover {
  background: rgba(255,181,71,0.07) !important;
  background-color: rgba(255,181,71,0.07) !important;
}
table.dataTable tbody td {
  background: transparent !important;
  background-color: transparent !important;
  color: var(--text) !important;
  padding: 10px 14px !important;
  border-bottom: 1px solid rgba(255,255,255,0.05) !important;
  border-top: none !important;
  font-size: 13px !important;
}
table.dataTable tbody tr:last-child td { border-bottom: none !important; }
table.dataTable a { color: var(--accent) !important; }

/* DataTables wrapper / controls */
.dataTables_wrapper, .dataTables_wrapper * { color: var(--text) !important; }
.dataTables_length label, .dataTables_filter label, .dataTables_info {
  color: var(--text-mute) !important;
  font-size: 12px !important;
  font-family: var(--font-ui) !important;
}
.dataTables_length select, .dataTables_filter input {
  background: rgba(0,0,0,0.4) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  border-radius: 6px !important;
  padding: 5px 10px !important;
}
.dataTables_filter input:focus { border-color: var(--accent) !important; outline: none !important; box-shadow: 0 0 0 3px var(--accent-glow) !important; }

/* Pagination */
.dataTables_paginate { padding: 12px 0 !important; }
.dataTables_paginate .paginate_button {
  background: rgba(255,255,255,0.04) !important;
  background-color: rgba(255,255,255,0.04) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  border-radius: 6px !important;
  padding: 6px 12px !important;
  margin: 0 2px !important;
  font-family: var(--font-ui) !important;
  font-size: 12px !important;
  text-decoration: none !important;
  cursor: pointer;
  transition: var(--tx);
}
.dataTables_paginate .paginate_button:hover {
  background: linear-gradient(135deg, rgba(255,181,71,0.20), rgba(255,111,60,0.12)) !important;
  background-color: rgba(255,181,71,0.20) !important;
  color: var(--accent) !important;
  border-color: var(--accent) !important;
}
.dataTables_paginate .paginate_button.current, .dataTables_paginate .paginate_button.current:hover {
  background: linear-gradient(135deg, var(--accent), var(--accent-2)) !important;
  background-color: var(--accent) !important;
  color: #1a1106 !important;
  border-color: transparent !important;
}
.dataTables_paginate .paginate_button.disabled {
  background: transparent !important;
  background-color: transparent !important;
  color: var(--text-mute) !important;
  border-color: transparent !important;
  cursor: not-allowed;
}

/* DataTables sort icons */
table.dataTable thead .sorting:after, table.dataTable thead .sorting_asc:after, table.dataTable thead .sorting_desc:after {
  color: var(--accent) !important;
  opacity: 0.7 !important;
}

/* Tab buttons above spells (Instant/Conjure/Rune) */
.nav-tabs, .tab-buttons { border: none !important; }
.nav-tabs > li > a, .tab-buttons button, button[onclick*="show"] {
  background: rgba(0,0,0,0.3) !important;
  background-color: rgba(0,0,0,0.3) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  border-radius: 6px !important;
  padding: 8px 16px !important;
  margin: 0 4px 0 0 !important;
  font-family: var(--font-ui) !important;
  font-weight: 600 !important;
  cursor: pointer;
  transition: var(--tx);
}
.nav-tabs > li > a:hover, .tab-buttons button:hover {
  background: rgba(255,181,71,0.10) !important;
  color: var(--accent) !important;
  border-color: var(--accent) !important;
}
.nav-tabs > li.active > a {
  background: linear-gradient(135deg, var(--accent), var(--accent-2)) !important;
  color: #1a1106 !important;
  border-color: transparent !important;
}

/* ================= MYAAC-TABLE OVERRIDE (account, etc.) ================= */
.myaac-table {
  background: transparent !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--border) !important;
  width: 100% !important;
}
.myaac-table > tbody > tr:nth-child(even),
.myaac-table > tbody > tr:nth-child(odd) {
  background: transparent !important;
}
.myaac-table > tbody > tr:nth-child(even) > td {
  background: rgba(255,255,255,0.02) !important;
}
.myaac-table > tbody > tr:hover > td {
  background: rgba(255,181,71,0.06) !important;
}
.myaac-table > tbody > tr > td {
  padding: 10px 14px !important;
  color: var(--text) !important;
  border-bottom: 1px solid rgba(255,255,255,0.04) !important;
  background: transparent !important;
}
.myaac-table > tbody > tr:last-child > td { border-bottom: none !important; }
.myaac-table > thead > tr > td,
.myaac-table > thead > tr > th,
.myaac-table > tfoot > tr > td {
  background: linear-gradient(180deg, rgba(255,181,71,0.18), rgba(255,181,71,0.05)) !important;
  color: var(--accent) !important;
  font-family: var(--font-title) !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  font-size: 11px !important;
  padding: 12px 14px !important;
  border-bottom: 1px solid var(--border-hi) !important;
}

/* LabelV cells (label column) — used on account/login forms */
.LabelV, td.LabelV {
  background: rgba(255,181,71,0.06) !important;
  color: var(--accent) !important;
  font-weight: 600 !important;
  font-family: var(--font-ui) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-size: 13px !important;
  border-right: 1px solid var(--border) !important;
  padding: 10px 14px !important;
  width: 200px;
  white-space: nowrap;
}
.LabelV span { color: var(--accent) !important; }
.LabelV120 { width: 120px; }
.LabelV150 { width: 150px; }
.LabelV200 { width: 200px; }

/* ================= ADMIN BAR (myaac top bar) ================= */
.myaac-admin-bar, [id*="myaac"][class*="bar"] {
  background: var(--surface-2) !important;
  border-bottom: 1px solid var(--border) !important;
  backdrop-filter: blur(14px);
}

/* ============================================================
   FLOATING WIDGETS — Server Status · Top Players · Discord
   ============================================================ */

/* ----- SERVER STATUS BADGE (floating top-right) ----- */
#fs-status {
  position: fixed;
  top: 20px; right: 20px;
  z-index: 9000;
  background: var(--surface-2);
  border: 1px solid var(--border-hi);
  border-radius: 999px;
  padding: 10px 18px 10px 14px;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow);
  transition: var(--tx);
}
#fs-status:hover { transform: translateY(-2px); box-shadow: var(--shadow-hi); }

#fs-status .dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 0 rgba(74,222,128,0.55);
  animation: fsPulse 1.8s infinite;
}
#fs-status.offline .dot {
  background: var(--red);
  animation: none;
  box-shadow: 0 0 12px rgba(248,113,113,0.6);
}
#fs-status .label { color: var(--text); }
#fs-status .count {
  color: var(--accent);
  font-family: var(--font-title);
  font-weight: 700;
  letter-spacing: 0.5px;
  background: rgba(255,181,71,0.10);
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11px;
  border: 1px solid var(--border);
}

@keyframes fsPulse {
  0%   { box-shadow: 0 0 0 0    rgba(74,222,128,0.6); }
  70%  { box-shadow: 0 0 0 14px rgba(74,222,128,0); }
  100% { box-shadow: 0 0 0 0    rgba(74,222,128,0); }
}

/* ----- TOP PLAYERS CARD (floating right side) ----- */
#fs-topplayers {
  position: fixed;
  top: 80px; right: 20px;
  z-index: 8900;
  width: 260px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0;
  overflow: hidden;
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow);
  animation: fadeUp 480ms ease-out both;
  font-family: var(--font-ui);
}

#fs-topplayers .head {
  padding: 12px 16px;
  background: linear-gradient(135deg, rgba(255,181,71,0.18), rgba(255,111,60,0.08));
  border-bottom: 1px solid var(--border-hi);
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--accent);
  display: flex;
  align-items: center;
  gap: 8px;
}
#fs-topplayers .head::before { content: "🏆"; font-size: 16px; }

#fs-topplayers ol {
  list-style: none;
  margin: 0;
  padding: 6px 0;
}
#fs-topplayers li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  font-size: 12px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  transition: var(--tx);
}
#fs-topplayers li:last-child { border-bottom: none; }
#fs-topplayers li:hover {
  background: rgba(255,181,71,0.06);
  transform: translateX(3px);
}
#fs-topplayers .rank {
  width: 22px; height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 11px;
  background: rgba(255,255,255,0.06);
  color: var(--text-mute);
  flex-shrink: 0;
}
#fs-topplayers li:nth-child(1) .rank {
  background: linear-gradient(135deg, #ffd700, #ffaa00);
  color: #1a1106;
  box-shadow: 0 0 12px rgba(255,215,0,0.5);
}
#fs-topplayers li:nth-child(2) .rank {
  background: linear-gradient(135deg, #c0c0c0, #909090);
  color: #1a1106;
}
#fs-topplayers li:nth-child(3) .rank {
  background: linear-gradient(135deg, #cd7f32, #8b5a2b);
  color: #fff;
}
#fs-topplayers .name {
  flex: 1;
  color: var(--text);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#fs-topplayers .name a { color: var(--text) !important; text-decoration: none !important; }
#fs-topplayers .name a:hover { color: var(--accent) !important; }
#fs-topplayers .lvl {
  font-size: 10px;
  color: var(--accent);
  background: rgba(255,181,71,0.10);
  padding: 2px 7px;
  border-radius: 999px;
  font-weight: 700;
  flex-shrink: 0;
}
#fs-topplayers .voc {
  font-size: 10px;
  color: var(--text-mute);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  flex-shrink: 0;
}
#fs-topplayers .empty {
  padding: 20px;
  text-align: center;
  color: var(--text-mute);
  font-size: 12px;
}

/* ----- DISCORD FLOATING BUTTON ----- */
#fs-discord {
  position: fixed;
  bottom: 22px; right: 22px;
  z-index: 9000;
  width: 60px; height: 60px;
  border-radius: 50%;
  background: linear-gradient(135deg, #5865f2, #4752c4);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  text-decoration: none !important;
  box-shadow: 0 8px 28px rgba(88,101,242,0.5), inset 0 0 0 1px rgba(255,255,255,0.2);
  transition: var(--tx);
  animation: fsFloat 3s ease-in-out infinite;
}
#fs-discord:hover {
  transform: scale(1.12) translateY(-2px);
  box-shadow: 0 14px 38px rgba(88,101,242,0.65);
}
#fs-discord svg { width: 30px; height: 30px; fill: white; }

#fs-discord::after {
  content: "Discord";
  position: absolute;
  right: 70px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  opacity: 0;
  transform: translateX(8px);
  pointer-events: none;
  transition: var(--tx);
  backdrop-filter: blur(14px);
}
#fs-discord:hover::after {
  opacity: 1;
  transform: translateX(0);
}

@keyframes fsFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

/* ----- HOUSES WIDGET ----- */
#fs-houses {
  position: fixed;
  right: 20px;
  z-index: 8900;
  width: 260px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0;
  overflow: hidden;
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow);
  animation: fadeUp 540ms ease-out both;
  font-family: var(--font-ui);
}
#fs-houses .head {
  padding: 12px 16px;
  background: linear-gradient(135deg, rgba(74,222,128,0.18), rgba(255,181,71,0.08));
  border-bottom: 1px solid rgba(74,222,128,0.4);
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--green);
  display: flex;
  align-items: center;
  gap: 8px;
}
#fs-houses .head::before { content: "🏠"; font-size: 15px; }
#fs-houses .head .badge {
  margin-left: auto;
  font-size: 10px;
  background: rgba(74,222,128,0.15);
  border: 1px solid rgba(74,222,128,0.4);
  padding: 2px 8px;
  border-radius: 999px;
  color: var(--green);
}
#fs-houses ul {
  list-style: none;
  margin: 0;
  padding: 6px 0;
}
#fs-houses li {
  display: flex;
  flex-direction: column;
  padding: 9px 14px;
  font-size: 12px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  transition: var(--tx);
}
#fs-houses li:last-child { border-bottom: none; }
#fs-houses li:hover { background: rgba(74,222,128,0.05); }
#fs-houses .h-name {
  color: var(--text);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#fs-houses .h-meta {
  display: flex;
  justify-content: space-between;
  margin-top: 3px;
  color: var(--text-mute);
  font-size: 10px;
}
#fs-houses .h-meta .h-price { color: var(--gold); font-weight: 700; }
#fs-houses .empty {
  padding: 16px;
  text-align: center;
  color: var(--text-mute);
  font-size: 12px;
}

/* ----- ONLINE HISTORY CHART (24h sparkline) ----- */
#fs-chart {
  position: fixed;
  right: 20px;
  z-index: 8900;
  width: 260px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow);
  animation: fadeUp 600ms ease-out both;
  font-family: var(--font-ui);
}
#fs-chart .head {
  padding: 10px 14px;
  background: linear-gradient(135deg, rgba(99,102,241,0.18), rgba(255,181,71,0.06));
  border-bottom: 1px solid rgba(99,102,241,0.35);
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #a5b4fc;
  display: flex;
  align-items: center;
  gap: 6px;
}
#fs-chart .head::before { content: "📊"; font-size: 14px; }
#fs-chart .head .stats {
  margin-left: auto;
  font-size: 10px;
  color: var(--text-mute);
  font-family: monospace;
  letter-spacing: 0;
  text-transform: none;
}
#fs-chart svg { display: block; width: 100%; height: 70px; }
#fs-chart .empty {
  padding: 24px 14px;
  text-align: center;
  color: var(--text-mute);
  font-size: 11px;
}

/* ----- Stacked positions for right-side widgets ----- */
#fs-topplayers { top: 80px; }
#fs-houses { top: 380px; }
#fs-chart  { top: 680px; }

/* ============================================================
   LOADING SCREEN (fades out after page ready)
   ============================================================ */
#fs-loader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: radial-gradient(ellipse at center, #1a2040 0%, #050810 70%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  transition: opacity 600ms ease-out, visibility 600ms ease-out;
}
#fs-loader.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
#fs-loader .crest {
  font-family: "Cinzel", serif;
  font-size: 64px;
  font-weight: 700;
  letter-spacing: 8px;
  background: linear-gradient(135deg, #ffb547, #ff6f3c);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: 0 0 80px rgba(255,181,71,0.5);
  animation: fsLoaderPulse 2s ease-in-out infinite;
}
@keyframes fsLoaderPulse {
  0%, 100% { transform: scale(1); filter: brightness(1); }
  50%      { transform: scale(1.04); filter: brightness(1.2); }
}
#fs-loader .sub {
  font-family: "Inter", sans-serif;
  font-size: 12px;
  letter-spacing: 8px;
  text-transform: uppercase;
  color: rgba(255,181,71,0.6);
}
#fs-loader .spinner {
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 3px solid rgba(255,181,71,0.15);
  border-top-color: #ffb547;
  animation: fsLoaderSpin 0.9s linear infinite;
}
@keyframes fsLoaderSpin {
  to { transform: rotate(360deg); }
}
#fs-loader .progress {
  width: 200px;
  height: 3px;
  background: rgba(255,181,71,0.1);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}
#fs-loader .progress::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, #ffb547, transparent);
  animation: fsLoaderProg 1.4s ease-in-out infinite;
}
@keyframes fsLoaderProg {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* ============================================================
   "JOGAR AGORA" BUTTON + MODAL
   ============================================================ */
#fs-play {
  position: fixed;
  bottom: 22px;
  left: 22px;
  z-index: 9000;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #1a1106 !important;
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  border-radius: 999px;
  text-decoration: none !important;
  cursor: pointer;
  border: 0;
  box-shadow: 0 10px 32px var(--accent-glow), inset 0 0 0 1px rgba(255,255,255,0.25);
  transition: var(--tx);
  animation: fsFloat 3s ease-in-out infinite;
}
#fs-play::before { content: "▶"; font-size: 14px; }
#fs-play:hover {
  transform: scale(1.05) translateY(-2px);
  box-shadow: 0 16px 42px var(--accent-glow);
  filter: brightness(1.1);
}

#fs-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(5, 8, 18, 0.78);
  backdrop-filter: blur(6px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: fsFadeIn 240ms ease-out;
}
#fs-modal.open { display: flex; }

#fs-modal .box {
  background: var(--surface-2);
  border: 1px solid var(--border-hi);
  border-radius: var(--radius);
  padding: 0;
  max-width: 540px;
  width: 100%;
  overflow: hidden;
  box-shadow: 0 40px 90px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,181,71,0.1);
  animation: fsModalIn 280ms cubic-bezier(.4,0,.2,1);
}

#fs-modal .head {
  padding: 18px 24px;
  background: linear-gradient(135deg, rgba(255,181,71,0.20), rgba(255,111,60,0.10));
  border-bottom: 1px solid var(--border-hi);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#fs-modal .head h2 {
  margin: 0;
  font-family: var(--font-title);
  color: var(--accent);
  font-size: 20px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
#fs-modal .close {
  background: none;
  border: 0;
  color: var(--text-mute);
  font-size: 24px;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
  transition: var(--tx);
  box-shadow: none !important;
  filter: none !important;
}
#fs-modal .close:hover { color: var(--accent); transform: rotate(90deg); background: none !important; }

#fs-modal .body { padding: 24px; }

#fs-modal .step {
  display: flex;
  gap: 14px;
  margin-bottom: 18px;
  align-items: flex-start;
}
#fs-modal .step:last-child { margin-bottom: 0; }

#fs-modal .num {
  flex-shrink: 0;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #1a1106;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 16px;
  box-shadow: 0 4px 12px var(--accent-glow);
}

#fs-modal .step-content { flex: 1; }
#fs-modal .step-title {
  font-weight: 600;
  font-size: 14px;
  color: var(--text);
  margin-bottom: 4px;
}
#fs-modal .step-desc {
  font-size: 13px;
  color: var(--text-mute);
  line-height: 1.55;
}

#fs-modal .copyable {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(0,0,0,0.4);
  border: 1px solid var(--border);
  padding: 6px 12px;
  border-radius: 6px;
  font-family: monospace;
  font-size: 13px;
  color: var(--accent);
  cursor: pointer;
  margin: 4px 4px 0 0;
  transition: var(--tx);
}
#fs-modal .copyable:hover {
  border-color: var(--accent);
  background: rgba(255,181,71,0.08);
}
#fs-modal .copyable.copied { color: var(--green); border-color: var(--green); }
#fs-modal .copyable::after { content: "📋"; font-size: 12px; opacity: 0.7; }
#fs-modal .copyable.copied::after { content: "✓"; opacity: 1; }

#fs-modal .download-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}
#fs-modal .dl-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none !important;
  transition: var(--tx);
}
#fs-modal .dl-btn:hover {
  background: rgba(255,181,71,0.08);
  border-color: var(--accent);
  color: var(--accent) !important;
}

@keyframes fsFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes fsModalIn {
  from { opacity: 0; transform: translateY(20px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 600px) {
  #fs-play { padding: 12px 18px; font-size: 12px; bottom: 14px; left: 14px; }
  #fs-modal .head h2 { font-size: 16px; }
  #fs-modal .body { padding: 18px; }
}

/* ----- RESPONSIVE ----- */
@media (max-width: 1100px) {
  #fs-topplayers, #fs-houses, #fs-chart { display: none; }
}
@media (max-width: 600px) {
  #fs-status { top: 10px; right: 10px; padding: 7px 12px 7px 10px; font-size: 11px; }
  #fs-discord { width: 52px; height: 52px; bottom: 14px; right: 14px; }
  #fs-discord svg { width: 24px; height: 24px; }
}