/* Oblivion theme: matches the game client (crimson + gold frames, ruby gems, ember glow).
   Loaded after modern.css and only overrides it. */

:root {
  --stone: #0e0a09;
  --stone-2: #1a1210;
  --blood: #3a0a08;
  --crimson: #8e1812;
  --crimson-bright: #c42b1f;
  --gold: #d4a045;
  --gold-bright: #f3cf7a;
  --gold-dark: #8a6124;
  --ember: #ff6a1f;
  --ivory: #eadcc0;
  --muted: #b3a283;
  --line: rgba(212,160,69,.34);
  --font-display: "Cinzel", "Trajan Pro", Georgia, serif;
  --font-body: "Alegreya Sans", "Segoe UI", Arial, sans-serif;

  /* Gold L-shaped corner brackets, used as extra background layers on framed panels */
  --corners:
    linear-gradient(var(--gold), var(--gold)) top 7px left 7px / 26px 2px no-repeat,
    linear-gradient(var(--gold), var(--gold)) top 7px left 7px / 2px 26px no-repeat,
    linear-gradient(var(--gold), var(--gold)) top 7px right 7px / 26px 2px no-repeat,
    linear-gradient(var(--gold), var(--gold)) top 7px right 7px / 2px 26px no-repeat,
    linear-gradient(var(--gold), var(--gold)) bottom 7px left 7px / 26px 2px no-repeat,
    linear-gradient(var(--gold), var(--gold)) bottom 7px left 7px / 2px 26px no-repeat,
    linear-gradient(var(--gold), var(--gold)) bottom 7px right 7px / 26px 2px no-repeat,
    linear-gradient(var(--gold), var(--gold)) bottom 7px right 7px / 2px 26px no-repeat;
  --stone-fill:
    radial-gradient(ellipse at 50% 0%, rgba(196,43,31,.16), transparent 55%),
    radial-gradient(ellipse at 50% 100%, rgba(255,106,31,.08), transparent 60%),
    linear-gradient(160deg, rgba(28,19,16,.97), rgba(11,8,7,.97));
  /* Gold hairline, crimson band, gold outer rim, like the client's window frames */
  --frame-shadow:
    0 0 0 1px #140403,
    0 0 0 4px #5e0f0c,
    0 0 0 5px var(--gold-dark),
    0 0 0 6px rgba(0,0,0,.7),
    inset 0 0 0 1px rgba(0,0,0,.65),
    inset 0 0 0 2px rgba(243,207,122,.14),
    inset 0 0 50px rgba(120,15,10,.28),
    0 28px 60px rgba(0,0,0,.65);
  --btn-red: linear-gradient(180deg, #c7362a 0%, #9a1b14 45%, #5e0d0b 100%);
  --btn-red-hover: linear-gradient(180deg, #e04a33 0%, #b3231a 45%, #761410 100%);
}

::selection { background: var(--crimson-bright); color: #fff3d6; }

html {
  background-image:
    radial-gradient(ellipse at 50% 115%, rgba(210,50,20,.28), transparent 55%),
    linear-gradient(180deg, rgba(5,3,3,.15) 0%, rgba(8,4,4,.55) 55%, #0a0605 100%),
    url("images/oblivion-city-bg.png");
  scrollbar-color: var(--crimson) #0b0706;
}
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: #0b0706; }
::-webkit-scrollbar-thumb { background: linear-gradient(90deg, #5e0d0b, #9a1b14, #5e0d0b); border: 2px solid #0b0706; border-radius: 6px; box-shadow: inset 0 0 0 1px var(--gold-dark); }

body { font-family: var(--font-body); color: var(--ivory); }

.OblivionLogoImage {
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.85)) drop-shadow(0 0 22px rgba(255,106,31,.22));
}

/* ---------- Ruby gem ornament (shared) ---------- */
#MenuColumn::before, #MenuColumn::after,
.Content .BoxContent::before, .Content .BoxContent::after,
#Footer::before {
  content: "";
  position: absolute;
  left: 50%;
  width: 14px;
  height: 14px;
  transform: translateX(-50%) rotate(45deg);
  border: 2px solid var(--gold);
  background: radial-gradient(circle at 35% 35%, #ff8a73 0%, #d01e1e 35%, #6a0609 75%, #2a0204 100%);
  box-shadow: 0 0 0 1px #140403, 0 0 12px rgba(255,60,40,.55), inset 0 0 3px rgba(255,255,255,.35);
  z-index: 2;
  pointer-events: none;
}
#MenuColumn::before, .Content .BoxContent::before { top: -12px; }
#MenuColumn::after, .Content .BoxContent::after { bottom: -12px; }

/* ---------- Side menu ---------- */
#MenuColumn {
  border: 1px solid var(--gold);
  border-radius: 3px;
  background: var(--corners), var(--stone-fill);
  box-shadow: var(--frame-shadow);
  padding: 26px 18px;
}

#Loginbox { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
.AccountAction {
  height: 40px;
  min-width: 0;
  padding: 0 4px;
  font-family: var(--font-display);
  font-size: 9.5px;
  letter-spacing: .3px;
  color: var(--gold-bright) !important;
  border: 1px solid var(--gold-dark);
  background: linear-gradient(180deg, rgba(40,26,20,.9), rgba(14,9,8,.95));
  box-shadow: 0 0 0 1px #140403, inset 0 1px rgba(243,207,122,.12);
  text-shadow: 0 1px 2px #000;
}
.AccountAction:hover {
  border-color: var(--gold-bright);
  background: linear-gradient(180deg, rgba(90,20,17,.9), rgba(30,8,7,.95));
  box-shadow: 0 0 0 1px #140403, 0 0 14px rgba(255,90,40,.25);
}
.AccountActionPrimary, #Loginbox #LoginButton {
  color: #fff1d0 !important;
  border: 1px solid var(--gold) !important;
  background: var(--btn-red) !important;
  box-shadow: 0 0 0 1px #140403, inset 0 1px rgba(255,210,180,.25), 0 5px 14px rgba(0,0,0,.45);
}
.AccountActionPrimary:hover { background: var(--btn-red-hover) !important; box-shadow: 0 0 0 1px #140403, inset 0 1px rgba(255,210,180,.3), 0 0 16px rgba(255,80,40,.4); }
#Loginbox #LoginButton #ButtonText::after { font-family: var(--font-display); color: #fff1d0; text-shadow: 0 1px 2px #000; }
#LoginstatusText_2::after { font-family: var(--font-display); border-color: var(--gold-dark); letter-spacing: 1.4px; }

.DownloadClientAction {
  border-color: var(--gold) !important;
  background: linear-gradient(180deg, #4a100d, #1e0605) !important;
  color: var(--ivory) !important;
}
.DownloadClientAction:hover { background: linear-gradient(180deg, #6a1812, #2a0908) !important; }
.DownloadClientIcon { color: var(--gold-bright) !important; }

/* Category headings with a gold rule and a small ruby at its center */
.MenuButton {
  position: relative;
  margin-top: 16px;
  border-top: 0;
  background:
    linear-gradient(90deg, transparent, var(--gold-dark) 15%, var(--gold) 50%, var(--gold-dark) 85%, transparent) top / 100% 1px no-repeat !important;
}
.MenuButton::before {
  content: "";
  position: absolute;
  top: -4px;
  left: 50%;
  width: 7px;
  height: 7px;
  transform: translateX(-50%) rotate(45deg);
  background: #b3121a;
  border: 1px solid var(--gold);
  box-shadow: 0 0 6px rgba(255,60,40,.6);
}
.MenuButton .Label {
  font: 700 13px/1 var(--font-display);
  letter-spacing: 3px;
  color: var(--gold-bright);
  text-shadow: 0 1px 2px #000, 0 0 12px rgba(255,120,40,.25);
}
.SubmenuitemLabel {
  border-left: 1px solid rgba(179,38,30,.35);
  color: #c9b89a;
  font-family: var(--font-body);
  font-size: 14px;
}
.Submenuitem:hover {
  background: linear-gradient(90deg, rgba(179,38,30,.38), rgba(90,15,12,.08)) !important;
  box-shadow: inset 3px 0 var(--crimson-bright), 0 3px 10px rgba(0,0,0,.2);
}
.Submenuitem:hover .SubmenuitemLabel, .Submenuitem:hover .SubmenuitemLabel * { color: var(--gold-bright) !important; }

/* ---------- Content panel ---------- */
.Content .BoxContent {
  position: relative;
  overflow: visible;
  border: 1px solid var(--gold);
  border-radius: 3px;
  background: var(--corners), var(--stone-fill) !important;
  box-shadow: var(--frame-shadow);
  padding: 36px !important;
  font-family: var(--font-body);
  font-size: 15px;
}
.Content .BoxContent td { font-family: var(--font-body); font-size: 15px; }

.Content h1, .Content h2, .Content h3 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--gold-bright);
  text-shadow: 0 2px 3px #000, 0 0 18px rgba(255,120,40,.2);
}
.Content h4, .RuleItem h4, .DownloadDetails strong { font-family: var(--font-display); }

/* Small caps "eyebrow" labels above page headings */
.Content .BoxContent :is(.HousesHeader, .CreateAccountHeader, .AccountLoginHeader, .ExperienceHeader) > span,
.Content .BoxContent :is(.DownloadEyebrow, .RulesEyebrow) {
  font-family: var(--font-display);
  color: #d0392a !important;
  letter-spacing: 3px;
}

.Content a, .Content a:link, .Content a:visited { color: #e8b95c !important; transition: color .15s, text-shadow .15s; }
.Content a:hover { color: #ffd98a !important; text-shadow: 0 0 10px rgba(255,120,40,.45); }
.Content font[color="red"], .Content .red, .Content .BoxContent .ff_red, .Content .BoxContent .ff_pagetextred { color: #ff6b52 !important; }

/* Inner cards (login, create account, search, download) get a small client-style window:
   crimson title bar with a gold underline */
.AccountLoginPage, .CreateAccountPage, .CharacterSearch, .DownloadCard, .ExperiencePage > table, .HouseResults, .RulesSection {
  border: 1px solid var(--gold-dark) !important;
  border-radius: 3px !important;
  background: linear-gradient(160deg, rgba(24,15,13,.96), rgba(9,6,5,.97)) !important;
  box-shadow: 0 0 0 1px #140403, inset 0 0 0 1px rgba(243,207,122,.08), inset 0 0 40px rgba(120,15,10,.18), 0 16px 40px rgba(0,0,0,.5) !important;
}
.AccountLoginHeader, .CreateAccountHeader, .CharacterSearch h2, .RulesSectionHeading {
  border-bottom: 0 !important;
  background:
    linear-gradient(90deg, transparent, var(--gold) 25%, var(--gold) 75%, transparent) bottom / 100% 1px no-repeat,
    linear-gradient(180deg, rgba(122,26,20,.85), rgba(42,9,7,.9)) !important;
}
.Content .BoxContent .AccountLoginForm label > span,
.Content .BoxContent .CreateAccountPage > form td[width="150"] {
  font-family: var(--font-display);
  color: var(--gold) !important;
  letter-spacing: 1.2px;
}
.AccountLoginFooter { border-top-color: rgba(212,160,69,.2) !important; background: rgba(0,0,0,.25); }

/* ---------- Form controls ---------- */
.Content input:not([type="image"]):not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
.Content select, .Content textarea {
  color: var(--ivory) !important;
  background: linear-gradient(180deg, #0a0706, #150e0c) !important;
  border: 1px solid var(--gold-dark) !important;
  box-shadow: 0 0 0 1px #0a0303, inset 0 2px 6px rgba(0,0,0,.75);
  font-family: var(--font-body);
}
.Content input:focus, .Content select:focus, .Content textarea:focus {
  border-color: var(--gold-bright) !important;
  box-shadow: 0 0 0 1px #0a0303, inset 0 2px 6px rgba(0,0,0,.75), 0 0 0 3px rgba(196,43,31,.35) !important;
}
.Content input[type="checkbox"], .Content input[type="radio"] { accent-color: var(--crimson-bright); }

/* The opened dropdown list is drawn by the browser: color-scheme makes it dark,
   and option colors cover browsers that honor them (Chrome/Edge/Firefox on Windows) */
.Content select { color-scheme: dark; }
.Content select option, .Content select optgroup {
  color: var(--ivory);
  background-color: #150e0c;
}
.Content select option:checked { color: #fff1d0; background-color: #8e1812; }

/* Every button style on the site becomes the client's red-and-gold button */
.Content input[type="submit"], .Content button,
.BigButton, #accountmanagement .BigButton, #accountmanagement .AccountModernButton,
.Content input[type="image"]:not(.ButtonText),
.DownloadPageButton, .CreateAccountActions .CreateAccountSubmit {
  border: 1px solid var(--gold) !important;
  background: var(--btn-red) !important;
  box-shadow: 0 0 0 1px #140403, inset 0 1px rgba(255,210,180,.25), inset 0 -2px 4px rgba(0,0,0,.35), 0 5px 12px rgba(0,0,0,.45) !important;
  color: #fff1d0 !important;
  font-family: var(--font-display);
  letter-spacing: 1.4px;
  text-shadow: 0 1px 2px #000;
}
.Content input[type="submit"]:hover, .Content button:hover,
.BigButton:hover, #accountmanagement .BigButton:hover, #accountmanagement .AccountModernButton:hover,
.Content input[type="image"]:not(.ButtonText):hover,
.DownloadPageButton:hover, .CreateAccountActions .CreateAccountSubmit:hover {
  border-color: var(--gold-bright) !important;
  background: var(--btn-red-hover) !important;
  box-shadow: 0 0 0 1px #140403, inset 0 1px rgba(255,210,180,.3), 0 0 18px rgba(255,80,40,.4), 0 7px 16px rgba(0,0,0,.45) !important;
}
#accountmanagement .AccountModernButtonLabel { font-family: var(--font-display); letter-spacing: 1.2px; text-shadow: 0 1px 2px #000; }
.Content input[type="image"]:not(.ButtonText) { filter: sepia(.2) brightness(1.25); }

/* Secondary actions (Cancel, Back) stay dark with a gold rim, like the client's Cancel */
.CreateAccountActions .CreateAccountCancel {
  border: 1px solid var(--gold-dark) !important;
  background: linear-gradient(180deg, #2a1c17, #0e0908) !important;
  color: var(--gold-bright) !important;
  font-family: var(--font-display);
}

/* ---------- Tables ---------- */
.TableContainer {
  border: 1px solid var(--gold-dark) !important;
  box-shadow: 0 0 0 1px #140403, 0 10px 24px rgba(0,0,0,.4);
}
.TableContainer .CaptionContainer,
.TableContainer .CaptionInnerContainer {
  background:
    linear-gradient(90deg, transparent, var(--gold) 30%, var(--gold) 70%, transparent) bottom / 100% 1px no-repeat,
    linear-gradient(180deg, #7a1a14, #3a0a08) !important;
}
.TableContainer .CaptionContainer .Text {
  font: 700 14px/1.2 var(--font-display) !important;
  letter-spacing: 1.6px;
  color: var(--gold-bright) !important;
  text-shadow: 0 1px 2px #000;
}
.TableContainer .LabelH, .BoxContent tr.LabelH { background: linear-gradient(180deg, #4a100d, #240706) !important; }
.TableContainer .LabelV { font-family: var(--font-display); font-size: 13px; letter-spacing: .5px; }
.TableContainer .Odd, .TableContainer tr.Odd,
.BoxContent tr[bgcolor]:nth-child(odd), .BoxContent td[bgcolor]:nth-child(odd) { background: rgba(179,38,30,.08) !important; }
.TableContainer tr:hover > td, .BoxContent tr[bgcolor]:hover > td { background: rgba(196,43,31,.16) !important; }
.TableContainer td, .TableContainer th { border-color: rgba(212,160,69,.16) !important; }
.HouseResults th, #highscores .BoxContent tr[bgcolor]:first-child td {
  font-family: var(--font-display);
  color: var(--gold-bright) !important;
  letter-spacing: 1px;
}

#highscores .BoxContent a.size_xs {
  border: 1px solid var(--gold-dark) !important;
  background: linear-gradient(180deg, #2a1411, #120807) !important;
  font-family: var(--font-display);
}
#highscores .BoxContent a.size_xs:hover { border-color: var(--gold) !important; background: var(--btn-red) !important; color: #fff1d0 !important; }

/* ---------- Right sidebar widgets ---------- */
/* layout.php hardcodes width:1200px inline on #Bodycontainer, which broke narrower screens */
#Bodycontainer { width: min(1380px, 100%) !important; }
#ContentColumn { margin-right: 300px; max-width: none; }
#SideWidgets {
  position: absolute;
  top: 190px;
  right: 28px;
  width: 256px;
  display: grid;
  gap: 30px;
}
.SideWidget {
  position: relative;
  border: 1px solid var(--gold);
  border-radius: 3px;
  background: var(--stone-fill);
  box-shadow: var(--frame-shadow);
}
.SideWidget::before {
  content: "";
  position: absolute;
  top: -8px;
  left: 50%;
  width: 11px;
  height: 11px;
  transform: translateX(-50%) rotate(45deg);
  border: 2px solid var(--gold);
  background: radial-gradient(circle at 35% 35%, #ff8a73 0%, #d01e1e 35%, #6a0609 75%, #2a0204 100%);
  box-shadow: 0 0 0 1px #140403, 0 0 10px rgba(255,60,40,.55);
  z-index: 2;
}
.SideWidgetTitle {
  margin: 0;
  padding: 13px 14px 11px;
  text-align: center;
  font: 700 13px/1.2 var(--font-display);
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--gold-bright);
  text-shadow: 0 1px 2px #000;
  background:
    linear-gradient(90deg, transparent, var(--gold) 25%, var(--gold) 75%, transparent) bottom / 100% 1px no-repeat,
    linear-gradient(180deg, rgba(122,26,20,.85), rgba(42,9,7,.9));
}
.SideWidgetBody { margin: 0; padding: 16px; }
.SideWidgetLink {
  display: block;
  padding: 10px;
  border-top: 1px solid rgba(212,160,69,.2);
  text-align: center;
  font: 700 11px var(--font-display);
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--gold) !important;
  text-decoration: none;
}
.SideWidgetLink:hover { color: var(--gold-bright) !important; background: rgba(179,38,30,.18); }

/* Server status */
.StatusState {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font: 700 12px var(--font-display);
  letter-spacing: 2px;
  text-transform: uppercase;
}
.StatusDot { width: 10px; height: 10px; border-radius: 50%; }
.StatusState.IsOnline { color: #8fd07d; }
.StatusState.IsOnline .StatusDot { background: #5fcf4a; box-shadow: 0 0 10px #5fcf4a; animation: StatusPulse 2s ease-in-out infinite; }
.StatusState.IsOffline { color: #ff6b52; }
.StatusState.IsOffline .StatusDot { background: #d0281e; box-shadow: 0 0 8px #d0281e; }
@keyframes StatusPulse { 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .StatusState.IsOnline .StatusDot { animation: none; } }
.StatusPlayers {
  display: block;
  margin-top: 10px;
  text-align: center;
  text-decoration: none;
}
.StatusPlayers strong {
  display: block;
  font: 800 42px/1.1 var(--font-display);
  color: var(--gold-bright);
  text-shadow: 0 2px 4px #000, 0 0 20px rgba(255,120,40,.3);
}
.StatusPlayers span { color: var(--muted); font-size: 13px; }
.StatusPlayers:hover strong { color: #ffe3a0; }
.StatusUptime { margin-top: 8px; text-align: center; color: #8f8372; font-size: 12px; }

/* Top players */
.TopPlayersList { list-style: none; padding: 6px 0; }
.TopPlayersList li {
  display: grid;
  grid-template-columns: 22px 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
}
.TopPlayersList li + li { border-top: 1px solid rgba(212,160,69,.1); }
.TopPlayersList li:hover { background: rgba(179,38,30,.14); }
.TopRank {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 1px solid var(--gold-dark);
  border-radius: 50%;
  font: 700 11px var(--font-display);
  color: var(--gold);
}
.TopPlayersList li:first-child .TopRank { border-color: var(--gold-bright); background: var(--btn-red); color: #fff1d0; }
.TopOutfit { width: 36px; height: 36px; object-fit: contain; object-position: right bottom; }
.TopName {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ivory) !important;
  font-weight: 700;
  text-decoration: none;
}
.TopName small { display: block; color: #8f8372; font-weight: 400; font-size: 11px; }
.TopName:hover { color: var(--gold-bright) !important; }
.TopLevel { font: 700 15px var(--font-display); color: var(--gold-bright); text-align: right; }
.TopLevel small { display: block; color: #8f8372; font: 400 10px var(--font-body); text-transform: uppercase; letter-spacing: 1px; }
.TopEmpty { display: block !important; color: var(--muted); text-align: center; }

/* Discord */
.DiscordWidget p { margin: 0 0 14px; color: #c9b89a; font-size: 14px; line-height: 1.5; text-align: center; }
.DiscordButton {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 44px;
  border: 1px solid var(--gold);
  border-radius: 3px;
  background: linear-gradient(180deg, #6b74f2 0%, #5865f2 45%, #3c46b8 100%);
  box-shadow: 0 0 0 1px #140403, inset 0 1px rgba(255,255,255,.25), 0 5px 12px rgba(0,0,0,.45);
  color: #fff !important;
  font: 700 12px var(--font-display);
  letter-spacing: 1.4px;
  text-transform: uppercase;
  text-decoration: none;
  text-shadow: 0 1px 2px rgba(0,0,0,.6);
  transition: filter .15s, box-shadow .15s, transform .15s;
}
.DiscordButton svg { width: 22px; height: 22px; fill: currentColor; }
.DiscordButton:hover { filter: brightness(1.12); transform: translateY(-1px); box-shadow: 0 0 0 1px #140403, 0 0 18px rgba(88,101,242,.5); }

/* Narrower screens: widgets move under the content as a row, then stack */
@media (max-width: 1180px) {
  #ContentColumn { margin-right: 0; }
  #SideWidgets {
    position: static;
    width: auto;
    margin: 30px 0 0 278px;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  }
}
@media (max-width: 900px) {
  #SideWidgets { margin-left: 0; }
}

/* ---------- Footer ---------- */
#Footer {
  position: relative;
  margin-top: 40px;
  padding-top: 24px;
  border-top: 0;
  background: linear-gradient(90deg, transparent, var(--gold-dark) 20%, var(--gold) 50%, var(--gold-dark) 80%, transparent) top / 100% 1px no-repeat;
}
#Footer::before { top: -7px; width: 10px; height: 10px; }
.FooterCopyright { font-family: var(--font-display); color: var(--gold-bright); letter-spacing: 1.5px; }