/* ==========================================================================
   OLD MYSTERY — modern dark re-skin (reference: pg-example / Mythera74)
   Full takeover overlay, loaded AFTER basic_d.css. Re-skins the classic
   tibia-layout markup (artwork columns, gif-framed boxes, image buttons,
   themeboxes) into the reference's shadcn-dark language so all 221 views
   inherit the look without editing blades. Tokens match the reference.
   ========================================================================== */

:root {
  /* palette — extracted from the reference page's .dark theme */
  --background: #0d0f12;
  --card: #111317;
  --card-2: #16191e;          /* hover / inset */
  --border: #353941;
  --border-soft: #23262c;
  --primary: #b8862f;
  --primary-bright: #d9ab4a;
  --primary-dim: #6e5316;
  --foreground: #ebebeb;
  --muted-foreground: #999;
  --muted-dim: #6b6f76;

  --font-ui: 'Inter', 'Segoe UI', Arial, sans-serif;
  --font-data: 'Source Code Pro', ui-monospace, monospace;
  --font-display: 'Cinzel', 'Georgia', serif;

  --radius: 10px;
  --radius-sm: 6px;
  --shadow-card: 0 1px 0 rgba(255,255,255,.03) inset, 0 12px 32px -20px rgba(0,0,0,.9);
  --focus-ring: 0 0 0 2px var(--background), 0 0 0 4px var(--primary);
}

/* ==========================================================================
   1. Page shell — kill the artwork background, breathe dark
   ========================================================================== */

body {
  background: var(--background) !important;
  background-image: none !important;   /* beats the inline artwork url() */
  color: var(--foreground);
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
}

/* the reference's faint red nebula, safely behind everything */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(1000px 480px at 85% -5%, rgba(64,110,142,.13), transparent 60%),
    radial-gradient(800px 600px at -5% 110%, rgba(201,161,66,.06), transparent 55%);
}

/* classic side/header artwork strips: retire */
#LeftArtwork, #RightArtwork, #ArtworkHelper, #ArtworkHelper1, #ArtworkHelper2,
#HeaderArtworkDiv { background-image: none !important; background: transparent !important; }

::selection { background: var(--primary); color: #1a1206; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--background); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 6px; border: 2px solid var(--background); }
::-webkit-scrollbar-thumb:hover { background: var(--muted-dim); }

a { color: var(--primary-bright); transition: color .15s ease; }
a:hover { color: var(--foreground); }

:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }

/* ==========================================================================
   2. Content boxes — flatten gif frames into cards
   ========================================================================== */

.Content .Box, .Box {
  background: var(--card) !important;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  margin-bottom: 20px;
}

.Corner-tl, .Corner-tr, .Corner-bl, .Corner-br,
.CornerWrapper-b, .Border_1, .BorderTitleText {
  background-image: none !important;
  height: 0 !important;
  display: block;
}

.Border_2, .Border_3 { background: transparent !important; margin: 0 !important; }

.Content .BoxContent, .BoxContent {
  background-image: none !important;
  background-color: transparent !important;
  color: var(--foreground);
  padding: 18px 20px;
  font-family: var(--font-ui);
  font-size: 13.5px;
  line-height: 1.65;
}

/* legacy headline gifs: neutralize toward the theme (white-ish on dark) */
.Box img.Title {
  filter: grayscale(1) brightness(2.1);
  opacity: .9;
  margin: 14px 0 0 18px;
}

h1, h2, .BigBoldText, .NewsHeadlineText {
  font-family: var(--font-ui);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--foreground);
}

h1 { font-size: 28px; line-height: 1.2; }
h2 { font-size: 20px; }

/* identity: epigraphic display face for page + card headings */
h1, h2 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: .02em;
}

/* ==========================================================================
   3. Sidebar — reference-style: quiet card, uppercase section labels
   ========================================================================== */

#MenuColumn, #Menu {
  background: var(--card) !important;
  background-image: none !important;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
}

#MenuTop, #MenuBottom { background: transparent !important; background-image: none !important; height: auto !important; }

.MenuButton {
  background-image: none !important;
  background: transparent !important;
  border-bottom: 1px solid var(--border-soft);
}

.MenuButton .Label, .menuitem .Label {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}

.MenuButton:hover .Label { color: var(--foreground); }

/* decorative torches, chains, legacy icons and +/- extenders: retire */
.Lights, .light_ru, .light_lu, .light_ld,
.LeftChain, .RightChain,
.Icon, .Extend { display: none !important; }

.Submenu { background: transparent !important; }

.Submenuitem {
  background-image: none !important;
  background: transparent !important;
  border-left: 2px solid transparent;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  transition: background .15s ease, border-color .15s ease;
}

.Submenuitem:hover { background: var(--card-2) !important; border-left-color: var(--muted-dim); }

.SubmenuitemLabel {
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--foreground) !important;
  /* legacy layout indents labels to clear the (now hidden) icon gif */
  margin-left: 0 !important;
  padding-left: 12px !important;
}

.ActiveSubmenuItemIcon { background-image: none !important; }
.Submenuitem.active, .Submenuitem[data-active="1"] {
  background: linear-gradient(90deg, rgba(201,161,66,.20), transparent 70%) !important;
  border-left-color: var(--primary);
}

/* ==========================================================================
   4. Login box + Play Now / Download (classic gif buttons -> primary buttons)
   ========================================================================== */

#LoginTop, #LoginBottom, .Loginstatus, #LoginCreateAccountBox, #Loginbox, #LoginBox {
  background-image: none !important;
  background: var(--card) !important;
  border-radius: var(--radius);
}

.LoginBorder, #BorderLeft, #BorderRight { background-image: none !important; background: transparent !important; }

#PlayNowContainer, #StartDownloadContainer { cursor: pointer; }

.MediumButtonBackground {
  background-image: none !important;
  background: linear-gradient(180deg, var(--primary-bright), var(--primary)) !important;
  border: 1px solid var(--primary-dim);
  border-radius: var(--radius-sm);
  box-shadow: 0 1px 0 rgba(255,255,255,.14) inset, 0 8px 18px -10px rgba(201,161,66,.55);
  transition: filter .15s ease, transform .1s ease;
}
.MediumButtonBackground:hover { filter: brightness(1.12); }
.MediumButtonBackground:active { transform: translateY(1px); }
.MediumButtonOver { display: none !important; }        /* legacy hover gif */
input.MediumButtonText { filter: grayscale(1) brightness(.25); } /* gold png -> white */

.BigButton, .Button {
  background-image: none !important;
  background: linear-gradient(180deg, var(--primary-bright), var(--primary)) !important;
  border: 1px solid var(--primary-dim) !important;
  border-radius: var(--radius-sm);
  box-shadow: 0 1px 0 rgba(255,255,255,.14) inset;
  transition: filter .15s ease, transform .1s ease;
}
.BigButton:hover, .Button:hover { filter: brightness(1.12); }
.BigButtonText, .ButtonText {
  font-family: var(--font-ui);
  font-weight: 600;
  color: #1a1206 !important;
  text-shadow: none;
}

/* account overview action rail: one shared width, meaning-tiered buttons.
   primary = the daily action; store = gold outline (single-accent discipline,
   no imported green); quiet = staff utility; ghost = exit (hover hints red,
   inheriting the old sbutton_red signal without CTA weight). */
.ms-account-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  min-width: 176px;
}
.ms-act {
  display: block;
  text-align: center;
  padding: 9px 18px;
  border-radius: var(--radius-sm);
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 13.5px;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: filter .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
}
.ms-act:focus-visible { outline: 2px solid var(--primary-bright); outline-offset: 2px; }
.ms-act-primary {
  background: linear-gradient(180deg, var(--primary-bright), var(--primary));
  border: 1px solid var(--primary-dim);
  color: #1a1206;
  box-shadow: 0 1px 0 rgba(255,255,255,.14) inset;
}
.ms-act-primary:hover { filter: brightness(1.12); color: #1a1206; }
.ms-act-store {
  background: transparent;
  border: 1px solid var(--primary-dim);
  color: var(--primary-bright);
}
.ms-act-store:hover { background: rgba(217, 171, 74, .12); color: var(--primary-bright); }
.ms-act-quiet {
  background: var(--background);
  border: 1px solid var(--border-soft);
  color: var(--foreground);
}
.ms-act-quiet:hover { background: var(--card-2); color: var(--foreground); }
/* Logout: outline discreto SEMPRE visível (não some no fundo do card como o
   ghost puro), texto legível mas sem peso de CTA; hover vira o sinal vermelho. */
.ms-act-ghost {
  background: transparent;
  border: 1px solid var(--border-soft);
  color: var(--foreground);
}
.ms-act-ghost:hover {
  color: #e05252;
  border-color: rgba(224, 82, 82, .5);
  background: rgba(224, 82, 82, .08);
}
/* danger tier: destructive actions (delete a character). Quiet outline at
   rest so it never looks like a CTA; the red only fills in on intent. */
.ms-act-danger {
  background: transparent;
  border: 1px solid rgba(224, 82, 82, .4);
  color: #e05252;
}
.ms-act-danger:hover {
  background: rgba(224, 82, 82, .12);
  border-color: rgba(224, 82, 82, .7);
  color: #e05252;
}

/* modifiers — same tiers, different footprints so every button on the page
   shares one vocabulary instead of four ad-hoc styles. */
.ms-act-inline { display: inline-block; }        /* sits at the end of a row, not full-width */
.ms-act-sm { padding: 5px 12px; font-size: 12.5px; }   /* compact, for in-table row actions */
.ms-act-icon {                                   /* leading icon (Download) */
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.ms-act-icon svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ==========================================================================
   5. Right column themeboxes (server save / streamers / newcomer / socials)
   The framed art PNGs are inline styles -> !important, then card-ify.
   ========================================================================== */

#ThemeboxesColumn, #Themeboxes { background: transparent !important; }

.Themebox {
  background-image: none !important;
  background: var(--card) !important;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  margin-bottom: 14px;
  padding: 12px;
  height: auto !important;              /* inline heights sized the old art */
  color: var(--foreground);
}

.Themebox .Bottom { background-image: none !important; height: 0 !important; }

.ThemeboxButton {
  background-image: none !important;
  background: linear-gradient(180deg, var(--primary-bright), var(--primary)) !important;
  border: 1px solid var(--primary-dim);
  border-radius: var(--radius-sm);
  text-align: center;
  padding: 7px 10px;
  transition: filter .15s ease;
}
.ThemeboxButton:hover { filter: brightness(1.12); }
.ThemeboxButton, .ThemeboxButton a, .ThemeboxButton img ~ * {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 12.5px;
  color: #1a1206 !important;
  text-decoration: none;
}

/* countdown digits keep their sprite look but sit on a data strip */
.number-grp-wrp {
  font-family: var(--font-data);
  background: var(--background);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  padding: 4px 6px;
}

/* ==========================================================================
   6. Tables, forms
   ========================================================================== */

.Content table, .TableContent { border-collapse: collapse; width: 100%; }

.Content .BoxContent td, .TableContent td {
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--foreground);
  border-bottom: 1px solid var(--border-soft);
  padding: 8px 10px;
  background: transparent;
}

.Content .BoxContent tr:hover > td { background: var(--card-2); }

.Content .BoxContent th, .TableContent th {
  font-family: var(--font-data);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted-foreground);
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
}

input[type="text"], input[type="password"], input[type="email"],
input[type="number"], input[type="search"], input:not([type]), select, textarea {
  box-sizing: border-box;   /* text inputs are content-box by UA default — heights would overshoot */
  background: var(--background) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-sm);
  color: var(--foreground) !important;
  font-family: var(--font-ui);
  padding: 8px 10px;
  transition: border-color .15s ease;
}

input:focus, select:focus, textarea:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(201,161,66,.18);
  outline: none;
}

input::placeholder, textarea::placeholder { color: var(--muted-dim); }

/* ==========================================================================
   7. Top infobar pills + SIGNATURE server pulse (players online HP bar)
   ========================================================================== */

.InfoBarLinks {
  font-family: var(--font-ui);
  font-size: 12.5px;
  color: var(--muted-foreground) !important;
  text-decoration: none;
}
.InfoBarLinks:hover, .InfoBarLinks:hover .InfoBarSmallElement { color: var(--foreground) !important; }
.InfoBarSmallElement { color: inherit !important; }

#statusBar {
  border-collapse: separate;
  border-spacing: 3px;
  background: var(--card);
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  padding: 3px 6px;
}

#statusBar td {
  width: 16px; height: 7px;
  border-radius: 3px;
  background: var(--border-soft);
  box-shadow: 0 1px 2px rgba(0,0,0,.6) inset;
  transition: background .4s ease;
  animation: mythera-pulse 2.6s ease-in-out infinite;
}

@keyframes mythera-pulse {
  0%, 100% { filter: brightness(1); }
  50%      { filter: brightness(1.3); }
}

#playersOnlineInfo .InfoBarLinks {
  font-family: var(--font-data);
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--primary-bright) !important;
}

/* ==========================================================================
   8. Footer — stop painting a bar across the page
   ========================================================================== */

#Footer {
  background: transparent !important;
  background-image: none !important;
  border-top: 1px solid var(--border-soft);
  color: var(--muted-foreground);
  padding: 14px 0;
}
#Footer a { color: var(--muted-foreground); }
#Footer a:hover { color: var(--foreground); }

/* ==========================================================================
   9. News teaser niceties + quality floor
   ========================================================================== */

/* News post header: flatten the legacy banner strip (inline gif background)
   into a reference-style post heading — title strong, date in mono, icon gone. */
.NewsHeadline { margin: 6px 0 12px; }

.NewsHeadlineBackground {
  background-image: none !important;
  background: transparent !important;
  height: auto !important;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 0 10px;
  border-bottom: 1px solid var(--border-soft, #2a2e35);
}

.NewsHeadlineIcon { display: none !important; }

.NewsHeadlineText {
  font-family: var(--font-ui);
  font-size: 20px;
  font-weight: 700;
  color: var(--foreground);
  position: static !important;
  float: none !important;
  margin: 0 !important;
}

.NewsHeadlineDate, .news-date {
  font-family: var(--font-data);
  font-size: 11px;
  letter-spacing: .08em;
  color: var(--muted-dim);
  position: static !important;
  float: none !important;
  margin: 0 !important;
  order: 1;
}

#TeaserText, .TeaserText { color: var(--foreground); line-height: 1.7; }
#TeaserText img[src*="letter_martel"] { display: none; }

/* ==========================================================================
   10. Legacy tibia.com TableContainer system (used by ~140 content views:
   highscores, store, characters, houses, ...). basic_d paints it beige
   (#f1e0c6/#d5c0a1 zebra, #5f4d41 caption, gif frames both as classes and
   as INLINE styles in the blades) — flatten everything into reference cards.
   ========================================================================== */

/* outer frame -> card */
.TableContainer {
  border: 1px solid var(--border-soft) !important;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--card);
  box-shadow: var(--shadow-card);
  margin-bottom: 16px;
  /* basic_d shrinks everything inside to 1px (gif spacing hack); with the
     gifs flattened, restore readable type for all descendants */
  font-size: 13.5px !important;
  line-height: 1.6;
  color: var(--foreground);
}

/* caption bar (brown headline) -> quiet card header */
.TableContainer .CaptionContainer,
.CaptionContainer .CaptionInnerContainer {
  background: var(--card-2) !important;
  background-image: none !important;
}
.CaptionContainer .Text {
  font-family: var(--font-ui) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--foreground) !important;
  padding: 9px 14px !important;
}
/* the 8 gif corner/edge spans around the caption: retire */
.CaptionEdgeLeftTop, .CaptionEdgeRightTop, .CaptionEdgeLeftBottom, .CaptionEdgeRightBottom,
.CaptionBorderTop, .CaptionBorderBottom, .CaptionVerticalLeft, .CaptionVerticalRight {
  display: none !important;
}

/* inner wrappers: drop beige fills, gif shadows and stone borders;
   several of them also carry their own font-size:1px hack — restore */
.InnerTableContainer, .TableContentContainer,
.TableContentAndRightShadow, .TableShadowContainer,
.TableShadowContainerRightTop, .TableShadowContainerRightBottom,
.TableScrollbarWrapper, .TableScrollbarContainer,
.NewsTableContainer,
.Table1, .Table2, .Table3, .Table4, .Table5 {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  font-size: 13.5px !important;
  /* basic_d: `.InnerTableContainer .TableContentContainer { box-shadow: 3px
     3px 2px #875f3e }` — THE amber strip on the right/bottom of every table */
  box-shadow: none !important;
}

/* gif frames referenced INLINE in the blades (asset() and absolute urls) */
[style*="box-frame-edge.gif"], [style*="box-frame-vertical.gif"],
[style*="box-frame-horizontal.gif"], [style*="table-headline-border.gif"],
[style*="stonebar-center.gif"], [style*="border-1.gif"] {
  background-image: none !important;
}

/* beige inline frame `border:1px solid #faf0d7` (~199 uses across 94 views):
   the card already provides the frame — drop it on tables, re-tint elsewhere */
table.TableContent { border: 0 !important; }
[style*="faf0d7"] { border-color: var(--border-soft) !important; }

/* basic_d paints a full beige CELL GRID inside the inner layouts (Table2/3,
   RowInnerTableDataBorders) — the grid's outer edge is the amber line seen on
   the right/bottom of tables. Keep only the horizontal row separator. */
.TableContainer .Table2 .InnerTableContainer td,
.TableContainer .Table3 .TableContentAndRightShadow td,
.TableContainer .Table3 .TableContent td,
.TableContainer .RowInnerTableDataBorders td,
#PremiumFeaturesBox .TableContent th {
  border: 0 !important;
  border-bottom: 1px solid var(--border-soft) !important;
}
#PremiumFeaturesBox .TableContent th {
  color: var(--muted-foreground) !important;
  background-color: var(--card-2) !important;
}
/* reward/selection highlight: brown 6px frame -> primary ring */
.TAF_ActiveSelection {
  border: 2px solid var(--primary) !important;
  background-color: rgba(201,161,66,.12) !important;
}

/* legacy SmallBox notice panels (beige .Message/.ErrorMessage + BoxFrame gif
   edges; used by 14 views: streamers notice, form errors, ...) -> dark cards */
.SmallBox { font-size: 13.5px !important; margin-bottom: 16px; }
.SmallBox .Message, .SmallBox .ErrorMessage {
  background-color: var(--card-2) !important;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 14px 16px !important;
  color: var(--foreground);
  font-size: 13.5px !important;
  line-height: 1.6;
}
.SmallBox .ErrorMessage { border-color: rgba(192,57,43,.5); }
.BoxFrameHorizontal, .BoxFrameEdgeLeftTop, .BoxFrameEdgeRightTop,
.BoxFrameEdgeLeftBottom, .BoxFrameEdgeRightBottom,
.BoxFrameVerticalLeft, .BoxFrameVerticalRight {
  display: none !important;
}

/* zebra rows: class-based and bgcolor-attribute-based (60+ views hardcode it) */
.TableContainer .Odd, .Odd,
[bgcolor="#F1E0C6" i] { background-color: rgba(255,255,255,.015) !important; }
.TableContainer .Even, .Even,
[bgcolor="#D4C0A1" i], [bgcolor="#D5C0A1" i] { background-color: rgba(255,255,255,.045) !important; }
[bgcolor="#505050" i] { background-color: var(--card-2) !important; }

/* header rows */
tr.LabelH, .LabelH td {
  background: var(--card-2) !important;
  font-family: var(--font-data);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted-foreground) !important;
}
.LabelV, .LabelV50, .LabelV75, .LabelV100, .LabelV125, .LabelV150, .LabelV175, .LabelV200 {
  color: var(--muted-foreground) !important;
  font-weight: 600;
}

/* image-button hover gifs would still flash on mouseover: retire */
.BigButtonOver, .ButtonOver { display: none !important; }

.PageNavigation { font-family: var(--font-data); font-size: 12px; }

/* ==========================================================================
   11. Page parity with the reference captures (guilds/highscores/houses/login)
   ========================================================================== */

/* kill the beige #faf0d7 lattice: inline table borders + basic_d cell grids */
table.TableContent, .TableContent { border: 0 !important; }
.TableContainer .Table1 .TableContent td,
.TableContainer .Table3 .TableContent td,
.TableContainer .TableContentAndRightShadow td,
.TableContainer .RowInnerTableDataBorders td {
  border: 0 !important;
  border-bottom: 1px solid var(--border-soft) !important;
}
.TableContent > tbody > tr:last-child > td { border-bottom: 0 !important; }

/* image-button era leftovers: no 1px hover jump */
.BigButtonText:hover { top: 0 !important; left: 0 !important; }
.BigButton, .Button { border-radius: var(--radius-sm); }

/* row-action buttons inside tables: quiet outline, not a red slab */
.TableContent .BigButton {
  width: auto !important; height: auto !important;
  display: inline-flex; align-items: center;
  background: var(--background) !important;
  border: 1px solid var(--border) !important;
  box-shadow: none;
}
.TableContent .BigButton:hover { background: var(--card-2) !important; filter: none; }
.TableContent .BigButton .BigButtonText {
  position: static !important; width: auto !important; height: auto !important;
  padding: 7px 12px; color: var(--foreground) !important;
  font-family: var(--font-ui); font-size: 13px; font-weight: 500; text-shadow: none;
}

/* filter forms: primary radios, breathing room, hoverable labels */
input[type="radio"], input[type="checkbox"] { accent-color: var(--primary); }
.TableContent td[valign="top"] { padding: 12px 16px; }
.TableContent td[valign="top"] label {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 3px 0; font-size: 13px; color: var(--foreground); cursor: pointer;
}
.TableContent td[valign="top"] label:hover { color: var(--primary-bright); }

/* highscores filter: flex rows + comfy selects (scoped by form action) */
form[action*="highscores"] .InnerTableContainer { padding: 18px 22px !important; }
form[action*="highscores"] .InnerTableContainer table tbody { display: flex; flex-direction: column; gap: 14px; }
form[action*="highscores"] .InnerTableContainer tr { display: flex; align-items: center; gap: 14px; }
form[action*="highscores"] .InnerTableContainer td { border: 0 !important; padding: 0 !important; font-size: 14px; font-weight: 500; color: var(--foreground); }
form[action*="highscores"] select { min-width: 200px; height: 40px; }

/* highscores: gold/silver/bronze top-3 (nth-child 2/3/4 skips the header row) */
#HighscoresTable .TableContent td:first-child { width: 64px; text-align: center; }
#HighscoresTable .TableContent tr:nth-child(2) td:first-child { color: #fbbf24 !important; font-weight: 800; text-shadow: 0 0 12px rgba(251,191,36,.55); }
#HighscoresTable .TableContent tr:nth-child(3) td:first-child { color: #94a3b8 !important; font-weight: 800; text-shadow: 0 0 12px rgba(148,163,184,.55); }
#HighscoresTable .TableContent tr:nth-child(4) td:first-child { color: #d97706 !important; font-weight: 800; text-shadow: 0 0 12px rgba(217,119,6,.55); }

/* pagination -> outline chips (all paginated views) */
.PageNavigation { padding: 12px 4px; font-family: var(--font-ui); }
.PageNavigation small { display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: 13px; color: var(--muted-foreground); }
.PageNavigation small > div { float: none !important; }
.PageLink { display: inline-block; margin: 0 2px; }
.PageLink a, .CurrentPageLink {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 30px; height: 30px; padding: 0 9px;
  border: 1px solid var(--border-soft); border-radius: var(--radius-sm);
  background: var(--card); color: var(--foreground);
  font: 500 13px var(--font-ui); text-decoration: none;
  transition: background .15s ease;
}
.PageLink a:hover { background: var(--card-2); }
.CurrentPageLink { border-color: var(--primary); color: var(--primary-bright); background: rgba(201,161,66,.12); }

/* guilds: card list instead of zebra grid */
table.GuildsTable > tbody > tr:first-child { display: none; } /* Logo/Description header */
table.GuildsTable .Odd, table.GuildsTable .Even { background: transparent !important; }
.Content .BoxContent table.GuildsTable tr:hover > td { background: transparent; }
table.GuildsTable td { border-bottom: 1px solid var(--border-soft) !important; padding: 16px 10px; vertical-align: middle; }
table.GuildsTable > tbody > tr:last-child td { border-bottom: 0 !important; }
.GuildName, .GuildName b { color: var(--primary-bright); font-size: 16px; font-weight: 600; text-decoration: none; }
.GuildName:hover, .GuildName:hover b { text-decoration: underline; }
.GuildSearchBar { margin: 0 0 16px; }
.GuildSearchBar input { width: 100%; max-width: 576px; height: 40px; }

/* guild logo tile */
.TableContent td img[width="64"][height="64"] {
  display: block; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--card-2); object-fit: contain; padding: 2px;
}

/* houses: numeric columns right-aligned; colored status; stacked world field */
.TableContent td[width="10%"] { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.TableContent .LabelH td[style*="width: 10%"] { text-align: right; }
.HouseStatus { font-size: 12px; font-weight: 500; }
.HouseStatus.is-auctioned { color: rgba(0,199,88,.9); }
.HouseStatus.is-rented { color: rgba(237,178,0,.9); }
.HousesWorldSelection, .StoreWorldSelection { flex-direction: column; align-items: flex-start; gap: 6px; max-width: 260px; }
.HousesWorldSelection .WorldSelectionLabel, .StoreWorldSelection .WorldSelectionLabel { margin-right: 0 !important; font-size: 12px; font-weight: 500; color: var(--muted-foreground); }

/* shared page furniture */
.ms-page-intro { max-width: 760px; margin: 0 auto 20px; text-align: center; font-size: 13.5px; color: var(--muted-foreground); }
.ms-table-foot { margin: -6px 0 16px; padding-top: 12px; border-top: 1px solid var(--border-soft); font-size: 13px; color: var(--muted-foreground); }
center > h1 { font-size: 20px; font-weight: 600; margin: 22px 0 12px; }

/* login: centered narrow auth panel (scoped via :has, zero blade rewrite) */
.TableContainer:has(input[name="password"]) { max-width: 480px; margin: 0 auto 16px; }
.TableContainer:has(input[name="password"]) .TableContent td { border: 0 !important; }
.TableContainer:has(input[name="password"]) .TableContent table[style*="float"] { float: none !important; width: 100% !important; }
.TableContainer:has(input[name="password"]) td.LabelV120 { display: block; width: auto; padding: 6px 0 4px !important; font-size: 13px; font-weight: 500; }
.TableContainer:has(input[name="password"]) td.LabelV120 + td { display: block; padding: 0 0 12px !important; }
.TableContainer:has(input[name="password"]) td.LabelV120 + td input { width: 100%; box-sizing: border-box; height: 40px; }
.TableContainer:has(input[name="password"]) div[style*="float: right"] {
  float: none !important; font-size: 14px !important;
  display: flex; flex-direction: column; gap: 10px; margin-top: 4px;
}
.TableContainer:has(input[name="password"]) .BigButton {
  width: 100% !important; height: 44px !important;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, var(--primary-bright), var(--primary)) !important;
  border: 1px solid var(--primary-dim) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.14) inset, 0 10px 15px -3px rgba(201,161,66,.25);
}
.TableContainer:has(input[name="password"]) .BigButtonText {
  position: static !important; width: 100% !important; height: 44px !important;
  font-size: 14px; padding: 0;
}
/* "Account Lost?" demoted to a quiet ghost next to the primary Login CTA */
.TableContainer:has(input[name="password"]) .BigButton[onclick] {
  background: transparent !important;
  border: 1px solid var(--border) !important;
  box-shadow: none !important;
}
.TableContainer:has(input[name="password"]) .BigButton[onclick] .BigButtonText { color: var(--muted-foreground) !important; font-weight: 500; }
.TableContainer:has(input[name="password"]) .BigButton[onclick]:hover .BigButtonText { color: var(--foreground) !important; }

/* login promo box: panel-within-panel, muted copy, primary create CTA */
#LoginCreateAccountBox {
  background: rgba(37,39,45,.3) !important;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
}
#LoginCreateAccountBox p { font-size: 14px; color: var(--muted-foreground); line-height: 1.6; }
#LoginCreateAccountBox p b { color: var(--foreground); }
.CreateAccountButton { margin: 14px 0 0; }
.CreateAccountButton .BigButton {
  width: 100% !important; height: 44px !important;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, var(--primary-bright), var(--primary)) !important;
  border: 1px solid var(--primary-dim) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.14) inset, 0 10px 15px -3px rgba(201,161,66,.25);
}
.CreateAccountButton .BigButtonText {
  position: static !important; width: 100% !important; height: 44px !important;
  color: #fafafa !important; font-size: 14px; font-weight: 600; padding: 0;
}

/* ==========================================================================
   12. Reference components: filter card, tips disclosure, houses columns
   ========================================================================== */

.ms-filter-card {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px;
  background: var(--card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 18px 20px;
  margin-bottom: 16px;
}
.ms-field { display: flex; flex-direction: column; gap: 6px; }
.ms-field label { font-size: 12px; font-weight: 500; color: var(--muted-foreground); }
.ms-field select { min-width: 170px; height: 40px; }
.ms-filter-submit {
  height: 40px; padding: 0 22px;
  background: linear-gradient(180deg, var(--primary-bright), var(--primary));
  border: 1px solid var(--primary-dim);
  border-radius: var(--radius-sm);
  color: #1a1206; font: 600 14px var(--font-ui); cursor: pointer;
  box-shadow: 0 1px 0 rgba(255,255,255,.14) inset, 0 10px 15px -3px rgba(201,161,66,.25);
  transition: filter .15s ease;
}
.ms-filter-submit:hover { filter: brightness(1.12); }

.ms-tips {
  background: var(--card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  margin-bottom: 16px;
}
.ms-tips summary {
  cursor: pointer; padding: 13px 18px; list-style: none;
  color: var(--primary-bright); font-size: 13.5px; font-weight: 600;
  display: flex; align-items: center; gap: 8px;
}
.ms-tips summary::-webkit-details-marker { display: none; }
.ms-tips summary::before { content: '\24D8'; font-size: 15px; }   /* circled i */
.ms-tips summary::after { content: '\25BE'; margin-left: auto; color: var(--muted-dim); transition: transform .18s ease; }
.ms-tips[open] summary::after { transform: rotate(180deg); }
.ms-tips p { padding: 0 18px 14px; margin: 0; font-size: 13.5px; color: var(--muted-foreground); line-height: 1.65; }
.ms-tips p b { color: var(--foreground); }

.HouseCity { color: var(--muted-foreground); }
.HouseAuction { font-size: 12.5px; }
.HouseAuction small { display: block; color: var(--muted-dim); font-size: 11px; }
.muted-dash { color: var(--muted-dim); }

/* ==========================================================================
   14. Store checkout — payment/service cards, category tab, account strip.
   Legacy PMCID system: 150x147 sprite tiles whose hover/selected feedback is
   inline background-image urls written by JS (ChangePMC/MouseOverPMCID). The
   inline url string is kept as a STATE HOOK ([style*="pmcid_icon_selected"]);
   the sprites themselves are retired. Applies to select_payment (coins +
   packages) and extra-service views.
   ========================================================================== */

.OptionsContainer {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  padding: 14px;
}
.OptionsContainer > div { flex: 0 0 190px; }

/* single-category store: the "X Coins" tab row is inert decoration — retire */
.ProductCategoryTabRow { display: none !important; }

.PMCID_Icon_Container, .ServiceID_Icon_Container {
  width: auto !important;
  height: auto !important;
  float: none !important;
  margin: 0 !important;
}

.PMCID_Icon {
  background-image: none !important;   /* pmcid_icon_normal.png (inline) */
  position: relative;
  float: none !important;
  top: 0 !important; left: 0 !important;
  width: 100% !important;
  height: auto !important;
  min-height: 150px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 18px 12px 14px;
  background-color: var(--card-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color .15s ease, transform .1s ease, box-shadow .15s ease;
}
.PMCID_Icon:hover {
  border-color: var(--primary-dim);
  transform: translateY(-1px);
  box-shadow: 0 10px 22px -14px rgba(201,161,66,.55);
}

/* legacy hover overlay sprite: retired (pure :hover above) */
.PMCID_Icon .PMCID_Icon_Over { display: none !important; }

/* selected: red ring + check badge driven by the JS-written inline url */
.PMCID_Icon .PMCID_Icon_Selected {
  background-image: none !important;
  position: absolute;
  top: -1px !important; left: -1px !important;
  right: -1px; bottom: -1px;
  width: auto !important; height: auto !important;
  border-radius: var(--radius-sm);
  pointer-events: none;
  z-index: 2;
}
.PMCID_Icon .PMCID_Icon_Selected[style*="pmcid_icon_selected"] {
  border: 2px solid var(--primary);
  background-color: rgba(201,161,66,.07);
  box-shadow: 0 0 0 3px rgba(201,161,66,.18);
}
.PMCID_Icon .PMCID_Icon_Selected[style*="pmcid_icon_selected"]::after {
  content: '\2713';
  position: absolute;
  top: -9px; right: -9px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--primary);
  color: #1a1206;
  font-size: 12px;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
  box-shadow: 0 2px 6px rgba(0,0,0,.5);
}

/* deactivated overlay: dark veil instead of sprite */
.PMCID_Icon .PMCID_Deactivated {
  background-image: none !important;
  width: auto !important; height: auto !important;
  position: absolute; top: 0 !important; left: 0 !important; right: 0; bottom: 0;
  background-color: rgba(10,11,13,.6);
  border-radius: var(--radius-sm);
}

/* card content: logo -> name -> process time (flex order beats DOM order) */
.PMCID_Icon .PMCID_CP_Icon {
  order: 1;
  margin: 0 !important;
  position: static !important;
  max-width: 100%;
  border-radius: 4px;
}
.PMCID_Icon .PMCID_CP_Label {
  order: 2;
  position: static !important;
  top: 0 !important;
  margin: 0 !important;
  z-index: 1 !important;
}
.PMCID_Icon .PMCID_CP_Label label, .PMCID_Icon_Container label {
  font-family: var(--font-ui);
  font-size: 13.5px !important;
  font-weight: 600;
  color: var(--foreground);
  cursor: pointer;
}
.PMCID_Icon .PMCID_QuicknessIndicator {
  order: 3;
  position: static !important;
  width: auto !important;
  background: none !important;
  background-image: none !important;
}
.PMCID_QuicknessIndicatorLabelContainer {
  position: static !important;
  width: auto !important;
  background: none !important;
  background-image: none !important;
  border: 0 !important;
}
.PMCID_QuicknessIndicatorLabel {
  font-family: var(--font-ui);
  font-size: 11px !important;
  line-height: 1.45;
  color: var(--muted-dim);
}

/* product tiles (ServiceID system, store step 3) — same treatment as PMCID.
   DOM: Container > Container_Background (sprite layer) > ServiceID_Icon (the
   REAL 150x150 card with the click handlers and all children). The card
   styling therefore lives on .ServiceID_Icon so the selection ring — an
   absolute child — anchors to the full card box. ChangeService() checks the
   radio + writes serviceid_icon_selected.png inline -> [style*=...] hook. */
.ServiceID_Icon_Container_Background {
  background-image: none !important;    /* serviceid_icon_normal.png (inline) */
  position: static !important;
  width: auto !important;
  height: auto !important;
  top: 0 !important; left: 0 !important;
}
.ServiceID_Icon {
  position: relative !important;
  float: none !important;
  width: auto !important;
  height: auto !important;
  min-height: 170px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  padding: 16px 12px 14px;
  background-color: var(--card-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--foreground);
  transition: border-color .15s ease, transform .1s ease, box-shadow .15s ease;
}
.ServiceID_Icon:hover {
  border-color: var(--primary-dim);
  transform: translateY(-1px);
  box-shadow: 0 10px 22px -14px rgba(201,161,66,.55);
}
.ServiceID_Icon .ServiceID_Icon_Over { display: none !important; }
.ServiceID_Icon .ServiceID_Icon_Selected {
  background-image: none !important;
  position: absolute;
  top: -1px !important; left: -1px !important; right: -1px; bottom: -1px;
  width: auto !important; height: auto !important;
  border-radius: var(--radius-sm);
  pointer-events: none;
  z-index: 2;
}
.ServiceID_Icon_Selected[style*="serviceid_icon_selected"] {
  border: 2px solid var(--primary);
  background-color: rgba(201,161,66,.07);
  box-shadow: 0 0 0 3px rgba(201,161,66,.18);
}
.ServiceID_Icon_Selected[style*="serviceid_icon_selected"]::after {
  content: '\2713';
  position: absolute;
  top: -9px; right: -9px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--primary);
  color: #1a1206;
  font-size: 12px;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
  box-shadow: 0 2px 6px rgba(0,0,0,.5);
}
/* product image (inline bg, 128x64 sprite box + inline left:-12px): reflow
   into the card bottom instead of absolute positioning. The coin art is drawn
   right-biased inside the PNG canvas — measured opaque-pixel center sits at
   x~93 of 128 across all 5 sprites, so shift ~29px left to optically center. */
.ServiceID_Icon_New {
  position: static !important;
  left: 0 !important; top: 0 !important;
  width: 128px !important;
  height: 64px !important;
  background-position: center bottom !important;
  background-repeat: no-repeat !important;
  order: 3;
  margin-top: auto;
  transform: translateX(-29px);
}
.ServiceID_Icon label { cursor: pointer; text-align: center; }
.ServiceID_Icon .ServiceIDLabelContainer, .ServiceID_Icon .ServiceIDPriceContainer {
  position: static !important;
  width: auto !important;
  height: auto !important;
  display: block !important;
  top: 0 !important; left: 0 !important; bottom: auto !important;
  margin: 0 !important;
}
.ServiceID_Icon .ServiceIDLabel {
  display: block !important;
  font-family: var(--font-ui);
  font-size: 15px !important;
  font-weight: 700;
  color: var(--foreground);
}
.ServiceIDPriceContainer, .ServiceIDPrice {
  font-family: var(--font-data);
  font-size: 12px !important;
  color: var(--muted-foreground);
}
/* transparent hover hit-layer (z-index 399, 150x150): cover the card, no box */
.ServiceID_Icon .ServiceID_HelperDiv {
  position: absolute !important;
  top: 0 !important; left: 0 !important; right: 0; bottom: 0;
  width: auto !important;
  height: auto !important;
}

/* category tab (beige sprite) -> segmented pill */
.ProductCategoryTabRow td { padding: 14px 14px 4px !important; border-bottom: 0 !important; }
.InnerTableTab {
  background: none !important;
  background-image: none !important;
  display: inline-block;
  width: auto !important;
  height: auto !important;
  float: none !important;
  top: 0 !important;
  margin: 0 !important;
}
.InnerTableTab img { display: none !important; }   /* tab_wide_active.png */
.InnerTableTab a { text-decoration: none; }
.InnerTableTabLabel {
  position: static !important;
  display: inline-block;
  width: auto !important;
  padding: 8px 18px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-family: var(--font-ui);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted-foreground);
  background: var(--background);
}
.ActiveInnerTableTab .InnerTableTabLabel {
  color: #1a1206;
  border-color: var(--primary-dim);
  background: linear-gradient(180deg, var(--primary-bright), var(--primary));
}

/* "Order for Account Number" strip -> quiet mono data line */
.CustomerIdentification {
  font-family: var(--font-data);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: .04em;
  color: var(--muted-foreground);
  text-align: center;
  margin: 10px 0 14px;
}
.CustomerIdentification #MaskedAccountNumber,
.CustomerIdentification #ReadableAccountNumber,
.CustomerIdentification #DisplayAccountNumber { color: var(--foreground); }
#ButtonAccountNumber { vertical-align: middle; cursor: pointer; }

/* stone/tube step bar: tone down into the dark theme */
#ProgressBar { filter: grayscale(.35) brightness(.85) contrast(1.05); }
#ProgressBar .StepText {
  font-family: var(--font-ui);
  color: var(--muted-foreground) !important;
}

/* character search card: heading + wide input + primary Search button */
.ms-search-card {
  background: var(--card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 20px;
  margin-bottom: 16px;
}
.ms-search-card-title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .03em;
  margin: 0 0 14px;
  color: var(--foreground);
}
.ms-search-row { display: flex; gap: 10px; }
.ms-search-row input { flex: 1; height: 42px; }
.ms-search-submit {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 42px;
}
.ms-search-submit svg {
  width: 15px; height: 15px;
  stroke: #1a1206; fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

/* guild list rows (reference: logo 64 / red name + date / desc / stats) */
.ms-guild-row {
  display: flex;
  gap: 14px;
  padding: 14px 2px;
  border-bottom: 1px solid var(--border-soft);
}
.ms-guild-list .ms-guild-row:last-of-type { border-bottom: 0; }
.ms-guild-logo {
  width: 64px; height: 64px;
  flex-shrink: 0;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  background: var(--background);
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.ms-guild-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.ms-guild-info { min-width: 0; flex: 1; }
.ms-guild-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.ms-guild-head a {
  font-size: 16.5px;
  font-weight: 600;
  color: var(--primary-bright);
  text-decoration: none;
}
.ms-guild-head a:hover { text-decoration: underline; }
.ms-guild-date { font-size: 12.5px; color: var(--muted-foreground); }
.ms-guild-desc {
  margin: 4px 0 0;
  font-size: 13px;
  color: rgba(235,235,235,.9);
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ms-guild-stats { margin: 4px 0 0; font-size: 13px; color: var(--muted-foreground); }
.ms-guild-empty { color: var(--muted-foreground); text-align: center; padding: 18px 0; margin: 0; }
.ms-guild-actions { display: flex; justify-content: center; margin-bottom: 16px; }
a.ms-filter-submit { display: inline-flex; align-items: center; text-decoration: none; }

/* ==========================================================================
   15. Account forms (create / lost / management): tame the legacy table form.
   Labels stay calm (errors speak via message + indicator, not label color),
   the password meter becomes a pill, ok/nok icons flow inline.
   ========================================================================== */

.TableContent td.LabelV150, .TableContent td.LabelV120, .TableContent td.LabelV200 {
  font-weight: 600;
  color: var(--muted-foreground) !important;   /* beats the JS red label */
  vertical-align: middle;
}

.FormFieldError {
  font-size: 12px !important;
  color: #e05f52 !important;
  line-height: 1.5;
}

/* password strength: legacy full-width band -> compact pill meter */
.PWStrengthIndicator {
  display: inline-block !important;
  width: auto !important;
  margin-top: 6px;
  padding: 2px 12px !important;
  border-radius: 999px;
  font-size: 11px !important;
  font-weight: 600;
  color: #14100a !important;
  text-align: center;
}
.PWStrengthLevel1 { background: #c0392b !important; color: #fff !important; }
.PWStrengthLevel2 { background: #d35400 !important; color: #fff !important; }
.PWStrengthLevel3 { background: #d4a017 !important; }
.PWStrengthLevel4 { background: #7dab4a !important; }
.PWStrengthLevel5 { background: #37ae63 !important; }

/* ok/nok input indicators: ignore legacy absolute offsets, sit beside input */
.InputIndicator {
  position: static !important;
  display: inline-block;
  margin-left: 8px;
  vertical-align: middle;
}

/* [suggest number] / [suggest name] helper links */
.TableContent small, .TableContent small a {
  font-size: 12px;
  color: var(--primary-bright);
  text-decoration: none;
  cursor: pointer;
}
.TableContent small a:hover { text-decoration: underline; }

/* country flag shortcuts + radio options */
.flag-icon { cursor: pointer; opacity: .75; transition: opacity .15s ease; margin: 0 2px; vertical-align: middle; }
.flag-icon:hover { opacity: 1; }
.OptionContainer {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  margin-right: 20px !important;
}
.OptionContainer input[type="radio"] { accent-color: var(--primary); }

/* --- create-account: flat 2-column grid form (markup rewritten to .ms-fld) --- */
.ms-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 28px;
  padding: 20px;
}
.ms-fld { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ms-fld.ms-fld-wide { grid-column: 1 / -1; }
.ms-fld > label, .ms-fld-label {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--muted-foreground);
}
.ms-fld-input { display: flex; align-items: center; gap: 8px; }
.ms-fld-input input,
.ms-fld-input select,
.ms-form-grid input[type="text"],
.ms-form-grid input[type="password"],
.ms-form-grid input:not([type]),
.ms-form-grid select {
  width: 100% !important;
  min-width: 0;
  box-sizing: border-box;
  margin: 0 !important;
  float: none !important;
}
.ms-fld .InputIndicator { flex: 0 0 auto; }
.ms-fld small { font-size: 12px; }
.ms-fld .FormFieldError { min-height: 0 !important; }
.ms-fld .PWStrengthIndicator { align-self: flex-start; }

.ms-fld-sex { flex-direction: row; align-items: center; gap: 24px; }
.ms-fld-sex .ms-fld-label { margin-right: 4px; }
.ms-fld-check { flex-direction: row; align-items: flex-start; gap: 8px; }
.ms-fld-check input { flex: 0 0 auto; margin-top: 3px; }
.ms-form-check-title { grid-column: 1 / -1; font-weight: 600; margin: 6px 0 -4px; }

.ms-form-submit { grid-column: 1 / -1; display: flex; justify-content: center; margin-top: 8px; }

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

/* character profile: skills panel (Primary / Profession) — inset card that
   sits to the right of the info table, reference-style two columns */
.ms-skills-panel {
  display: flex;
  gap: 40px;
  flex-wrap: wrap;
  margin: 14px 8px 8px;
  padding: 16px 20px;
  background: var(--card-2);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
}
.ms-skills-col { flex: 1; min-width: 180px; }
.ms-skills-title {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 700;
  color: var(--foreground);
}
.ms-skill-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 5px 0;
  font-size: 13.5px;
  border-bottom: 1px solid rgba(255,255,255,.03);
}
.ms-skill-row:last-child { border-bottom: 0; }
.ms-skill-row span { color: var(--muted-foreground); }
.ms-skill-row b { font-weight: 700; color: var(--foreground); font-family: var(--font-data); }

/* who-is-online stats: css pie chart + legend + big online counter */
.ms-online-stats { display: flex; flex-wrap: wrap; gap: 28px; }
.ms-online-left { flex: 1.4; min-width: 300px; }
.ms-online-right {
  flex: 1; min-width: 240px;
  border-left: 1px solid var(--border-soft);
  padding-left: 28px;
  display: flex; flex-direction: column;
}
.ms-pie-row { display: flex; align-items: center; gap: 24px; }
.ms-pie {
  width: 124px; height: 124px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 0 1px var(--border-soft), 0 8px 20px -12px rgba(0,0,0,.8);
}
.ms-voc-legend { list-style: none; margin: 0; padding: 0; flex: 1; display: grid; gap: 9px; align-content: center; }
.ms-voc-legend li { display: flex; align-items: center; gap: 9px; font-size: 13.5px; }
.ms-voc-legend .dot { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.ms-voc-legend .voc { flex: 1; color: var(--foreground); }
.ms-voc-legend b { font-weight: 700; }
.ms-voc-legend .pct { color: var(--muted-foreground); font-size: 12.5px; }
.ms-online-big { font-size: 36px; font-weight: 800; line-height: 1.1; margin: 0 0 14px; }
.ms-online-big span { font-size: 13.5px; font-weight: 400; color: var(--muted-foreground); margin-left: 6px; }
.ms-online-updated { margin: 14px 0 0; font-size: 12.5px; color: var(--muted-dim); text-align: right; margin-top: auto; }
@media (max-width: 900px) {
  .ms-online-right { border-left: 0; padding-left: 0; }
}

/* who-is-online table: #, sortable headers, red name links */
.ms-online-table { width: 100%; border-collapse: collapse; }
.ms-online-table th {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  color: var(--muted-foreground);
  text-align: left;
  padding: 8px 10px 12px;
  border-bottom: 1px solid var(--border);
}
.ms-online-table th a {
  color: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.ms-online-table th a:hover { color: var(--foreground); }
.ms-sort-ico {
  width: 13px; height: 13px;
  stroke: currentColor; fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  opacity: .6;
}
.ms-online-table td {
  padding: 11px 10px;
  border-bottom: 1px solid var(--border-soft);
  font-size: 13.5px;
  color: var(--foreground);
}
.ms-online-table tbody tr:last-child td { border-bottom: 0; }
.ms-online-table .num { width: 46px; color: var(--muted-foreground); }
.ms-online-table .lvl { width: 110px; }
.ms-char-link { color: var(--primary-bright); font-weight: 500; text-decoration: none; }
.ms-char-link:hover { text-decoration: underline; }
.ms-online-empty { text-align: center; color: var(--muted-foreground); }

/* account "Download Client" strip: text left, primary button right */
.ms-download-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  padding: 4px 0;
}

/* name search: wide input + square icon button (reference filter row) */
.ms-field-grow { flex: 1; min-width: 220px; }
.ms-search-wrap { display: flex; gap: 8px; }
.ms-search-wrap input { flex: 1; height: 40px; }
.ms-search-btn {
  width: 40px; height: 40px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color .15s ease;
}
.ms-search-btn:hover { border-color: var(--muted-dim); }
.ms-search-btn svg {
  width: 16px; height: 16px;
  stroke: var(--muted-foreground); fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

/* ==========================================================================
   13. Native selects -> reference (shadcn) trigger.
   Reference: h-10 rounded-md border-input bg-background px-3 text-sm with a
   lucide chevron-down in primary/60. appearance:none kills the OS arrow; the
   chevron is an inline SVG. Must sit AFTER section 6, whose shorthand
   `background: ... !important` would otherwise erase the background-image.
   ========================================================================== */

select {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  background-color: var(--background) !important;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23b8862f' stroke-opacity='.6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 10px center !important;
  background-size: 16px 16px !important;
  height: 40px;
  padding: 8px 36px 8px 12px !important;
  font-size: 14px;
  line-height: 1.4;
  cursor: pointer;
}
select:hover { border-color: var(--muted-dim) !important; }
select option { background: var(--card); color: var(--foreground); }
/* multi-row selects keep native list rendering, just themed */
select[multiple], select[size]:not([size="1"]) {
  background-image: none !important;
  height: auto;
  padding: 8px 12px !important;
}

@media (max-width: 900px) {
  .BoxContent { padding: 14px; }
  h1 { font-size: 23px; }
  .ms-field, .ms-field select { width: 100%; min-width: 0; }
  .ms-filter-card { align-items: stretch; }
}

/* ==========================================================================
   16. Char Bazaar auction cards (currentAuctions). The AuctionBodyBlock panels
   (outfit carousel, equipment grid, dates, bid box) sit in a legacy TableContent
   table whose cells paint the beige parchment look. Re-skin the blocks into
   dark cards matching the rest of the site.
   ========================================================================== */

.Auction {
  padding: 4px 0;
}
.AuctionHeader {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  padding: 4px 2px 10px;
  border-bottom: 1px solid var(--border-soft);
  margin-bottom: 10px;
}
.AuctionCharacterName, .AuctionCharacterName a {
  font-size: 16px;
  font-weight: 700;
  color: var(--primary-bright) !important;
  text-decoration: none;
  cursor: pointer;
}
.AuctionCharacterName a:hover { text-decoration: underline; }
.AuctionLinks { font-size: 12.5px; color: var(--muted-foreground); }

.AuctionBody {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: stretch;
}
/* each panel: dark inset card instead of the beige TableContent cell */
.AuctionBodyBlock {
  background: var(--card-2) !important;
  border: 1px solid var(--border-soft) !important;
  border-radius: var(--radius-sm);
  color: var(--foreground);
  box-sizing: border-box;
}
/* the parent table cells that hold the blocks: kill beige bg + faf0d7 grid */
.Auction td, .AuctionBody td,
[class*="Auction"] table.TableContent td {
  background: transparent !important;
  border-color: var(--border-soft) !important;
}

/* equipment paperdoll: force a clean 3x3 grid.
   The blade markup sizes this block inline (width:119px; height:113px) and
   fakes rows with `margin-left:4%` on slots 1/4/7 — at that width the 9 slots
   collide and overflow. Override to a real grid so the inline hacks are inert. */
.AuctionDisplay-equipment {
  display: grid !important;
  grid-template-columns: repeat(3, 40px);
  grid-auto-rows: 40px;
  gap: 6px;
  width: auto !important;
  height: auto !important;
  padding: 10px !important;
  place-content: center;
}
/* 10th slot = boots: sit in the centre column of a 4th row, under legs,
   matching the real Tibia paperdoll (not alone at the left). */
.AuctionDisplay-equipment .CVIconObject:nth-child(10) {
  grid-column: 2;
}
/* dark slot chrome; neutralise the per-slot margin-left:4% row hack */
.CVIcon, .CVIconObject {
  background: var(--background) !important;
  border: 1px solid var(--border-soft);
  border-radius: 4px;
  width: 40px;
  height: 40px;
  margin: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
}
.CVIcon img, .CVIconObject img {
  image-rendering: pixelated;
  opacity: .9;
  display: block;
  width: 32px;
  height: 32px;
}

/* outfit carousel frame */
.AuctionDisplay { padding: 8px; min-width: 130px; display: flex; align-items: center; justify-content: center; }
.AuctionOutfitImage { image-rendering: pixelated; }

/* dates / short data: two-column grid — labels sized by the longest one,
   values baseline-aligned beside them. The blade's stray <br>s are hidden
   so they can't push values out of line. */
.ShortAuctionData {
  padding: 12px 14px !important;
  flex: 1;
  min-width: 200px;
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 12px;
  row-gap: 8px;
  align-items: baseline;
  align-content: start;
}
.ShortAuctionData br { display: none; }
.ShortAuctionDataLabel {
  font-family: var(--font-data);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}
.ShortAuctionData div:not(.ShortAuctionDataLabel):not(.ShortAuctionDataBidRow) {
  color: var(--foreground); font-size: 13.5px;
}
/* promotes its label/value into the parent grid, same columns as the rest */
.ShortAuctionDataBidRow { display: contents; }

/* current bid box */
.CurrentBid { padding: 12px 14px !important; display: flex; flex-direction: column; gap: 8px; min-width: 160px; }
.CurrentBid input[type="text"], .CurrentBid input[type="number"] { width: 100%; }

/* ==========================================================================
   17. Wiki (/wiki): árvore lateral + artigo
   ========================================================================== */
.ms-wiki { display: flex; gap: 20px; align-items: flex-start; }
.ms-wiki-tree {
  flex: 0 0 240px;
  background: var(--card-2);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  padding: 12px;
}
.ms-wiki-search input {
  width: 100%;
  box-sizing: border-box;
  background: var(--background);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  color: var(--foreground);
  font-family: var(--font-ui);
  font-size: 13px;
  padding: 8px 10px;
  margin-bottom: 10px;
}
.ms-wiki-tree-list { list-style: none; margin: 0; padding: 0; }
.ms-wiki-tree-list .ms-wiki-tree-list { padding-left: 14px; border-left: 1px solid var(--border-soft); margin-left: 6px; }
.ms-wiki-tree-link {
  display: block;
  padding: 6px 8px;
  border-radius: 4px;
  color: var(--foreground);
  text-decoration: none;
  font-size: 13.5px;
}
.ms-wiki-tree-link:hover { background: var(--background); color: var(--primary-bright); }
.ms-wiki-tree-link.active { background: var(--background); color: var(--primary-bright); font-weight: 600; }
.ms-wiki-article { flex: 1; min-width: 0; }
.ms-wiki-article h2 { font-family: var(--font-display); color: var(--foreground); margin-top: 0; }
.ms-wiki-breadcrumb { font-family: var(--font-data); font-size: 12px; color: var(--muted-foreground); margin-bottom: 10px; }
.ms-wiki-breadcrumb a { color: var(--muted-foreground); text-decoration: none; }
.ms-wiki-breadcrumb a:hover { color: var(--primary-bright); }
.ms-wiki-breadcrumb span { margin: 0 6px; }
.ms-wiki-body { line-height: 1.65; }
.ms-wiki-body img { max-width: 100%; height: auto; border-radius: var(--radius-sm); }
.ms-wiki-body a { color: var(--primary-bright); }
.ms-wiki-body table { border-collapse: collapse; }
.ms-wiki-body td, .ms-wiki-body th { border: 1px solid var(--border-soft); padding: 6px 10px; }
/* header row created by the editor's TH button: same caption language as the
   site's data headers (uppercase data font on the inset card tone) */
.ms-wiki-body th {
  background: var(--card-2);
  color: var(--primary-bright);
  font-family: var(--font-data);
  font-size: 12px;
  letter-spacing: .05em;
  text-transform: uppercase;
  text-align: left;
}
.ms-wiki-empty { color: var(--muted-foreground); }
.ms-wiki-results { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.ms-wiki-results a { color: var(--primary-bright); font-weight: 600; text-decoration: none; }
.ms-wiki-results a:hover { text-decoration: underline; }
.ms-wiki-results p { margin: 4px 0 0; color: var(--muted-foreground); font-size: 13px; }
@media (max-width: 900px) {
  .ms-wiki { flex-direction: column; }
  .ms-wiki-tree { flex-basis: auto; width: 100%; box-sizing: border-box; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}