/* ===========================================================================
   Chico Bola RO - FluxCP theme
   ===========================================================================
   Forked from the stock "default" theme, which is table-based markup from
   2008 with presentational bgcolor attributes and rounded-corner GIFs.
   Rather than restructure HTML that header.php and footer.php both depend
   on, this stylesheet overrides those attributes and hides the corner images.

   Layout choice: dark shell, LIGHT content panel. header.php carries inline
   JavaScript that recolours form fields to fixed light values on focus and
   blur; a dark content area would fight it on every input, so keeping the
   content light lets that script stay consistent.
   =========================================================================== */

:root{
  --shell:#0f1421;
  --band:#131a2b;
  --panel:#f7f5ef;        /* warm parchment - easier to read than pure white */
  --ink:#2b2b2b;
  --gold:#c9a227;
  --gold-lt:#e6c65c;
  --rule:#e2ddd0;
  --sidebar:#1a2233;
  --sidebar-ink:#c3ccdd;
}

body{
  margin:0; padding:0;
  background:var(--shell);
  background-image:linear-gradient(180deg,#0d1220 0%,#141b2b 55%,#0f1421 100%);
  background-attachment:fixed;
  color:var(--ink);
  font:14px/1.6 "Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
}
a{ color:#8a6a12; text-decoration:none; }
a:hover{ color:#b8891a; text-decoration:underline; }

/* --- Reset ---------------------------------------------------------------
   border-box everywhere: padding and borders stop inflating declared widths,
   which is what makes the grid below behave predictably. */
*, *::before, *::after{ box-sizing:border-box; }
img, svg{ max-width:100%; height:auto; }

/* --- Page shell ----------------------------------------------------------
   The stock theme laid the page out with a table and bgcolor attributes.
   This is a flex header over a two-column grid, so the sidebar and content
   are real boxes that can be reflowed at narrow widths. */
body{ min-height:100vh; display:flex; flex-direction:column; }

.cb-band{
  background-image:linear-gradient(180deg,#1b2540 0%,#121a2b 100%);
  border-bottom:3px solid var(--gold);
  box-shadow:0 2px 14px rgba(0,0,0,.45);
}
.cb-band-inner{
  max-width:1280px; margin:0 auto; padding:0 20px;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
}
.cb-brand{ display:flex; align-items:center; gap:16px; padding:14px 0; text-decoration:none !important; }
#logo{ width:64px; height:64px; flex:none; filter:drop-shadow(0 2px 6px rgba(0,0,0,.55)); }
.cb-brand-text{ display:flex; flex-direction:column; line-height:1.15; }
.cb-brand-text strong{ font-size:26px; letter-spacing:.5px; color:#f3ead2; text-shadow:0 2px 4px rgba(0,0,0,.6); }
.cb-brand-text em{ font-style:normal; font-size:11px; letter-spacing:3px; text-transform:uppercase; color:var(--gold-lt); }

/* Status sits at the right end of the bar.
   The dot is a ::before rather than its own element: Tidy (OutputCleanHTML)
   strips empty inline tags, so an empty <span> for it never reaches the
   browser. Driven off the container's state class instead. */
.cb-status{
  display:flex; align-items:center; gap:9px;
  font-size:12px; color:#c3ccdd; white-space:nowrap;
}
.cb-status-text{ letter-spacing:.4px; display:inline-flex; align-items:center; gap:8px; }
.cb-status-text::before{
  content:""; width:9px; height:9px; border-radius:50%; display:inline-block; flex:none;
  background:#8b93a7; box-shadow:0 0 0 3px rgba(139,147,167,.15);
}
.cb-status.is-up   .cb-status-text::before{ background:#3ddc84; box-shadow:0 0 0 3px rgba(61,220,132,.18); }
.cb-status.is-down .cb-status-text::before{ background:#e5484d; box-shadow:0 0 0 3px rgba(229,72,77,.18); }
.cb-players{
  padding-left:9px; margin-left:2px; border-left:1px solid rgba(255,255,255,.14);
  color:var(--gold-lt);
}
.cb-players strong{ color:#f3ead2; font-size:13px; }

.cb-shell{
  flex:1;
  max-width:1280px; width:100%; margin:0 auto; padding:22px 20px;
  display:grid; grid-template-columns:212px minmax(0,1fr); gap:22px;
  align-items:start;
}
.cb-main{ min-width:0; }   /* lets wide tables scroll instead of blowing out the grid */

#content{
  background:var(--panel);
  border-radius:10px;
  padding:6px 22px 22px;
  box-shadow:0 10px 34px rgba(0,0,0,.42);
  overflow-x:auto;
}

.cb-footer{
  max-width:1280px; width:100%; margin:0 auto; padding:16px 20px 30px;
  text-align:center;
}
.cb-foot-line{ margin:6px 0; font-size:12px; color:#8f9ab3; }
.cb-foot-line a{ color:var(--gold-lt); }
.cb-foot-meta{ opacity:.75; }
.cb-footer select{ padding:4px 8px; }

h1,h2,h3{ color:#1f2739; font-weight:600; letter-spacing:.2px; }
h2{ font-size:20px; margin:18px 0 12px; padding-bottom:8px; border-bottom:2px solid var(--rule); }

@media (max-width:860px){
  .cb-shell{ grid-template-columns:1fr; }
  .cb-band-inner{ flex-wrap:wrap; gap:10px; padding-bottom:10px; }
  .cb-brand-text strong{ font-size:20px; }
  #logo{ width:48px; height:48px; }
}

/* --- Sidebar ------------------------------------------------------------- */
#sidebar, #admin_sidebar{
  background:var(--sidebar); border:1px solid #232d42; border-radius:10px;
  box-shadow:0 8px 24px rgba(0,0,0,.4); overflow:hidden; color:var(--sidebar-ink);
}
#sidebar h3, #admin_sidebar h3{
  margin:0; padding:11px 14px;
  background:linear-gradient(180deg,#222d45,#1a2233);
  color:var(--gold-lt); font-size:11px; letter-spacing:2px; text-transform:uppercase;
  border-bottom:1px solid #2b3550;
}
/* The sidebar is a <table>, not a list: rows are
   td.menuitem > a > span, with th.menuitem as the category heading. */
#sidebar, #admin_sidebar{ border-collapse:collapse; width:100%; }
#sidebar img[src*="sidebar_"], #admin_sidebar img[src*="sidebar_"]{ display:none !important; }

#sidebar th.menuitem, #admin_sidebar th.menuitem{
  display:block; padding:11px 14px; text-align:center;
  background:linear-gradient(180deg,#222d45,#1a2233);
  color:var(--gold-lt); font-size:11px; letter-spacing:2px; text-transform:uppercase;
  border-bottom:1px solid #2b3550;
}

/* Padding lives on the <a>, not the cell, so the whole row is clickable. */
#sidebar td.menuitem, #admin_sidebar td.menuitem{
  padding:0; border-bottom:1px solid #26314a;
}
#sidebar tr:last-child td.menuitem, #admin_sidebar tr:last-child td.menuitem{ border-bottom:none; }

#sidebar td.menuitem a, #admin_sidebar td.menuitem a{
  position:relative; display:block; overflow:hidden;
  padding:10px 12px; text-align:center;
  color:var(--sidebar-ink); text-decoration:none;
  transition:color .3s ease;
}

/* Hover inverts the row: two panels grow inward from the top and bottom
   edges and meet in the middle, while the label flips to the dark blue.
   Both halves animate on the same easing and duration so they land
   together. */
#sidebar td.menuitem a::before, #sidebar td.menuitem a::after,
#admin_sidebar td.menuitem a::before, #admin_sidebar td.menuitem a::after{
  content:""; position:absolute; left:0; right:0; height:0;
  background:var(--gold-lt);
  transition:height .3s ease;
}
#sidebar td.menuitem a::before, #admin_sidebar td.menuitem a::before{ top:0; }
#sidebar td.menuitem a::after,  #admin_sidebar td.menuitem a::after{ bottom:0; }

/* The label sits above both panels. The markup already wraps it in a span,
   which avoids needing a negative z-index -- that would drop the panels
   behind the sidebar's own background and make them invisible. */
#sidebar td.menuitem a span, #admin_sidebar td.menuitem a span{ position:relative; z-index:1; }

#sidebar td.menuitem a:hover, #admin_sidebar td.menuitem a:hover{ color:#131a2b; }
#sidebar td.menuitem a:hover::before, #sidebar td.menuitem a:hover::after,
#admin_sidebar td.menuitem a:hover::before, #admin_sidebar td.menuitem a:hover::after{
  height:50%;
}

@media (prefers-reduced-motion:reduce){
  #sidebar td.menuitem a, #sidebar td.menuitem a::before, #sidebar td.menuitem a::after,
  #admin_sidebar td.menuitem a, #admin_sidebar td.menuitem a::before, #admin_sidebar td.menuitem a::after{
    transition:none;
  }
}

/* --- Login box ----------------------------------------------------------- */
#loginbox{
  background:#1a2233; color:var(--sidebar-ink); border:1px solid #232d42;
  border-radius:10px; padding:10px 14px; margin-bottom:14px;
  box-shadow:0 6px 18px rgba(0,0,0,.35);
}
#loginbox a{ color:var(--gold-lt); }

/* The stock template paints every cell #e1eaf3 with a bgcolor attribute and
   frames the box in four pale-blue corner GIFs, both of which sit on top of
   the rule above -- so the dark background never showed. Same treatment as
   the sidebar: neutralise the attributes, hide the corner images, and drop
   the two rows that exist only to hold them. Kept in CSS rather than edited
   into main/loginbox.php so the template stays a clean fork of default/. */
#loginbox tr:first-child, #loginbox tr:last-child{ display:none; }
#loginbox td{ background:transparent !important; width:auto !important; }
#loginbox img[src*="loginbox_"]{ display:none !important; }

/* --- Menus --------------------------------------------------------------- */
#submenu, #pagemenu{ border-bottom:1px solid var(--rule); padding:10px 0; margin-bottom:14px; }
#submenu a, #pagemenu a{ display:inline-block; padding:5px 12px; margin-right:4px; border-radius:999px; color:#4a4335; }
#submenu a:hover, #pagemenu a:hover{ background:#efe9d8; text-decoration:none; }
.current-sub-menu, .current-sub-menu a{ background:var(--gold) !important; color:#241d05 !important; font-weight:600; }

/* --- Tables -------------------------------------------------------------- */
.horizontal-table, .vertical-table, .shop-table, .woe-table, .install_table{
  width:100%; border-collapse:collapse; margin:12px 0 18px; background:#fff;
  border-radius:8px; overflow:hidden; box-shadow:0 6px 16px rgba(0,0,0,.06);
}
.horizontal-table th, .vertical-table th, .shop-table th, .woe-table th{
  background:linear-gradient(180deg,#243053,#1b2540); color:#e9e2cc;
  font-size:11px; letter-spacing:1.4px; text-transform:uppercase;
  padding:10px 12px; text-align:left; border:none;
}
.horizontal-table td, .vertical-table td, .shop-table td, .woe-table td{
  padding:9px 12px; border-top:1px solid #eee9dc; color:var(--ink);
}
.horizontal-table tr:nth-child(even) td{ background:#fbfaf5; }
.horizontal-table tr:hover td{ background:#f4efe0; }
.vertical-table th{ width:210px; }

/* --- Forms and buttons --------------------------------------------------- */
input[type=text], input[type=password], input[type=file], select, textarea{
  padding:7px 9px; border:1px solid #d7d0bd; border-radius:6px; background:#fff; color:#444; font-size:13px;
}
input[type=text]:focus, input[type=password]:focus, select:focus, textarea:focus{
  outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(201,162,39,.18);
}
input[type=submit], button, .submit_button, .button-action{
  padding:8px 18px; border:none; border-radius:6px; cursor:pointer;
  background:linear-gradient(180deg,var(--gold-lt),var(--gold));
  color:#2a2205; font-weight:600; letter-spacing:.3px; box-shadow:0 2px 6px rgba(0,0,0,.18);
}
input[type=submit]:hover, button:hover, .submit_button:hover, .button-action:hover{
  background:linear-gradient(180deg,#f0d576,#d4ae2c);
}

/* --- Status, messages, misc ---------------------------------------------- */
.message{ padding:11px 14px; border-radius:8px; margin:12px 0; border-left:4px solid var(--gold); background:#fdf6e0; color:#5a4a12; }
.notice{ padding:11px 14px; border-radius:8px; margin:12px 0; border-left:4px solid #c0392b; background:#fdecea; color:#7d2b21; }
.online{ color:#1e8449; font-weight:600; }
.offline{ color:#c0392b; font-weight:600; }
.red{ color:#c0392b; } .green{ color:#1e8449; }
.important{ color:#b8891a; font-weight:600; }
.pages a, .jump-to-page a{ display:inline-block; padding:4px 9px; margin:0 2px; border:1px solid var(--rule); border-radius:5px; background:#fff; }
.pages a:hover{ background:var(--gold); color:#241d05; border-color:var(--gold); text-decoration:none; }
.security-code img{ border:1px solid var(--rule); border-radius:6px; }
.search-form, .search-form2{ background:#fbfaf5; border:1px solid var(--rule); border-radius:8px; padding:12px; margin-bottom:14px; }

/* --- MVP badge ----------------------------------------------------------- */
/* FluxCP ships no MVP icon, so this is an inline SVG crown: it scales without
   an asset and picks up the theme's gold. */
.mvp{ display:inline-flex; align-items:center; gap:5px; vertical-align:middle; }
.mvp svg{ display:block; filter:drop-shadow(0 1px 1px rgba(0,0,0,.35)); }
.mvp-label{
  font-size:10px; font-weight:700; letter-spacing:1.2px; color:#8a6a12;
  text-transform:uppercase;
}

/* --- Elemental affinity table -------------------------------------------- */
.affinity-table{ border-collapse:collapse; margin:2px 0; box-shadow:none; background:none; width:auto; }
.affinity-table th{
  background:none; color:#6b6455; padding:2px 8px;
  font-size:10px; letter-spacing:.6px; text-transform:uppercase; text-align:center;
  border-bottom:1px solid var(--rule);
}
.affinity-table td{
  padding:5px 8px; text-align:center; font-weight:600; font-size:12px;
  border-top:none; border-right:1px solid #efe9db;
}
.affinity-table td:last-child{ border-right:none; }
.aff-immune { background:#e8eaed; color:#6a7280; }   /* takes nothing      */
.aff-resist { background:#e7f4ea; color:#1e7a42; }   /* reduced damage     */
.aff-neutral{ background:#faf8f2; color:#6b6455; }   /* normal             */
.aff-weak   { background:#fdeaea; color:#b3261e; }   /* extra damage       */

/* --- Footer -------------------------------------------------------------- */
#copyright p, #info p{ color:#7f8aa3; font-size:11px; text-align:center; margin:6px 0; }
#copyright a{ color:var(--gold-lt); }

@media (max-width:820px){
  .cb-brand-text strong{ font-size:20px; }
  #logo{ width:48px; height:48px; }
  #content td{ padding:0 10px; }
}

/* --- Item Database -------------------------------------------------------
   Search card + result table for modules/item/index.php, laid out after
   divine-pride.net's item search: a category pill row over a single line of
   fields, then a dense result table led by the item icon.

   The card carries its own dark title bar so it reads as a piece of the site
   chrome rather than a stray form. That bar is full-bleed, so the horizontal
   padding lives on the card's children instead of on the card itself. */
.idb-search{
  background:linear-gradient(180deg,#fdfcf8 0%,#f5f2e8 100%);
  border:1px solid var(--rule); border-radius:10px; padding:0;
  margin-bottom:16px; overflow:hidden;
  box-shadow:0 2px 10px rgba(15,20,33,.10);
}
.idb-head{
  display:flex; align-items:center; gap:8px; padding:9px 16px;
  background-image:linear-gradient(180deg,#1b2540 0%,#121a2b 100%);
  border-bottom:2px solid var(--gold);
  color:var(--gold-lt);
}
.idb-head-icon{ flex:none; opacity:.9; }
.idb-head-title{
  font-size:12px; font-weight:700; letter-spacing:1.6px; text-transform:uppercase;
}

.idb-row{ display:flex; flex-wrap:wrap; gap:12px; align-items:flex-end; padding:0 16px 14px; }
.idb-field{ display:flex; flex-direction:column; gap:5px; }
.idb-field-grow{ flex:1 1 220px; min-width:180px; }
.idb-field-narrow{ width:80px; }
.idb-field-wide{ padding:14px 16px 12px; }
.idb-label{
  font-size:10px; font-weight:700; letter-spacing:1.1px; text-transform:uppercase;
  color:#8a7f63;
}
.idb-search input[type=text], .idb-search select{
  padding:7px 9px; border:1px solid #d8d2c2; border-radius:6px;
  background:#fff; color:var(--ink); font:inherit; font-size:13px; width:100%;
  box-shadow:inset 0 1px 2px rgba(15,20,33,.06);
  transition:border-color .12s, box-shadow .12s;
}
.idb-search input[type=text]::placeholder{ color:#b2ab99; }
.idb-search input[type=text]:focus, .idb-search select:focus{
  outline:none; border-color:var(--gold);
  box-shadow:inset 0 1px 2px rgba(15,20,33,.06), 0 0 0 3px rgba(201,162,39,.22);
}

/* Pills are radio inputs so the filter survives without JavaScript; the input
   itself is hidden and its label carries the appearance. */
.idb-pills{ display:flex; flex-wrap:wrap; gap:6px; }
.idb-pills input[type=radio]{ position:absolute; opacity:0; width:0; height:0; }
.idb-pills label{
  display:inline-block; padding:5px 13px; border:1px solid #ded8c8;
  border-radius:999px; cursor:pointer; user-select:none;
  background-image:linear-gradient(180deg,#ffffff 0%,#f3efe3 100%);
  color:#6b6455; font-size:12px; font-weight:600;
  box-shadow:0 1px 1px rgba(15,20,33,.05);
  transition:border-color .12s, color .12s, transform .08s, box-shadow .12s;
}
.idb-pills label:hover{
  border-color:var(--gold); color:#8a6a12;
  box-shadow:0 2px 5px rgba(201,162,39,.22);
}
.idb-pills label:active{ transform:translateY(1px); }
.idb-pills input[type=radio]:checked + label{
  background-image:linear-gradient(180deg,var(--gold-lt) 0%,var(--gold) 100%);
  border-color:#a9861a; color:#2e2506;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45), 0 2px 6px rgba(201,162,39,.35);
}
.idb-pills input[type=radio]:focus-visible + label{ box-shadow:0 0 0 3px rgba(201,162,39,.35); }

.idb-actions{ flex-direction:row; gap:8px; }
.idb-search .idb-go, .idb-search .idb-clear{
  padding:8px 20px; border-radius:6px; border:1px solid #ded8c8;
  font:inherit; font-size:13px; font-weight:600; cursor:pointer;
  transition:border-color .12s, color .12s, transform .08s, box-shadow .12s;
}
.idb-search .idb-go{
  background-image:linear-gradient(180deg,var(--gold-lt) 0%,var(--gold) 100%);
  border-color:#a9861a; color:#2e2506;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45), 0 2px 6px rgba(201,162,39,.35);
}
.idb-search .idb-go:hover{ box-shadow:inset 0 1px 0 rgba(255,255,255,.55), 0 3px 9px rgba(201,162,39,.45); }
.idb-search .idb-go:active, .idb-search .idb-clear:active{ transform:translateY(1px); }
.idb-search .idb-clear{
  background-image:linear-gradient(180deg,#ffffff 0%,#f3efe3 100%); color:#6b6455;
}
.idb-search .idb-clear:hover{ border-color:var(--gold); color:#8a6a12; }

.idb-count{ color:#6b6455; font-size:12px; margin:0 0 8px; }

.idb-table td{ vertical-align:middle; }
/* The in-game inventory icon, shown inline with the name. 24px is its native
   size, so pixelated rendering keeps it from being blurred by any scaling. */
.idb-icon{
  display:inline-block; width:24px; height:24px; vertical-align:middle;
  margin-right:6px; image-rendering:pixelated;
}
.idb-icon-missing{ border:1px dashed var(--rule); border-radius:4px; }
.idb-id{ text-align:right; color:#8a8372; font-variant-numeric:tabular-nums; }
.idb-name{ font-weight:600; }
.idb-slots{ color:#8a8372; font-weight:400; }
.idb-shop{
  display:inline-block; margin-left:6px; padding:1px 6px; border-radius:4px;
  background:#e7f4ea; color:#1e7a42; font-size:10px; font-weight:700;
  letter-spacing:.5px; text-transform:uppercase;
}
.idb-shop:hover{ text-decoration:none; background:#d6ecdd; }
.idb-num{ text-align:right; font-variant-numeric:tabular-nums; }
.idb-job{
  display:inline-block; margin:1px 3px 1px 0; padding:1px 7px; border-radius:999px;
  background:#efe9db; color:#6b6455; font-size:11px; white-space:nowrap;
}

@media (max-width:820px){
  .idb-field-grow{ flex-basis:100%; }
  .idb-actions{ width:100%; }
  .idb-search .idb-go, .idb-search .idb-clear{ flex:1; }
}

/* --- Monster Database ----------------------------------------------------
   Shares the item search card (.idb-*); these are the pieces specific to the
   monster result table: the sprite cell, the element chip and the type badge. */
.mdb-sprite-col{ width:56px; text-align:center; }
.mdb-sprite{
  display:inline-block; max-height:46px; max-width:48px;
  image-rendering:pixelated;   /* client sprites; scaling must not blur them */
  filter:drop-shadow(0 1px 1px rgba(15,20,33,.25));
}
.mdb-sprite-missing{
  width:24px; height:24px; border:1px dashed var(--rule); border-radius:4px;
  filter:none;
}

.mdb-elem{
  display:inline-block; padding:1px 8px; border-radius:999px;
  font-size:11px; font-weight:600; white-space:nowrap;
  background:#efe9db; color:#6b6455;
}
.mdb-elem small{ font-size:9px; opacity:.75; margin-left:2px; }
/* Element colours follow the affinity table above, so a Fire monster reads the
   same here as it does on its own page. */
.mdb-elem-neutral{ background:#eceae4; color:#5f5a4e; }
.mdb-elem-water  { background:#e3f0fa; color:#1c5f8c; }
.mdb-elem-earth  { background:#eae6d6; color:#7a6320; }
.mdb-elem-fire   { background:#fdeae4; color:#b3441e; }
.mdb-elem-wind   { background:#e6f5f1; color:#1e7a66; }
.mdb-elem-poison { background:#f0e6f7; color:#6b3a94; }
.mdb-elem-holy   { background:#fdf6e0; color:#8a6a12; }
.mdb-elem-dark   { background:#e4e2ea; color:#40395c; }
.mdb-elem-ghost  { background:#eaeef7; color:#4a5a86; }
.mdb-elem-undead { background:#e8ece7; color:#4d6349; }

.mdb-type{
  display:inline-block; padding:1px 8px; border-radius:4px;
  font-size:10px; font-weight:700; letter-spacing:.6px; text-transform:uppercase;
  background:#efe9db; color:#7f7866;
}
.mdb-type-boss       { background:#fdeaea; color:#b3261e; }
.mdb-type-guardian   { background:#e7f4ea; color:#1e7a42; }
.mdb-type-event      { background:#e3f0fa; color:#1c5f8c; }
.mdb-type-battlefield{ background:#f0e6f7; color:#6b3a94; }

/* Habitat: map chips with their spawn count. The count is the total amount
   declared across every spawn line for that map, which is the population the
   map holds at once. */
.mdb-habitat{ max-width:320px; }
.mdb-map{
  display:inline-block; margin:1px 3px 1px 0; padding:1px 4px 1px 8px;
  border:1px solid var(--rule); border-radius:999px; background:#fff;
  font-size:11px; color:#6b6455; white-space:nowrap;
}
.mdb-map b{
  display:inline-block; margin-left:5px; padding:0 5px; border-radius:999px;
  background:#efe9db; color:#8a6a12; font-size:10px;
}
.mdb-map b::before{ content:"\00d7"; opacity:.6; margin-right:1px; }
.mdb-map-more{ padding-right:8px; background:#f6f3ea; color:#8a8372; cursor:help; }
.mdb-map{ display:inline-flex; align-items:center; gap:5px; }
.mdb-map-thumb{
  width:18px; height:18px; border-radius:3px; object-fit:cover;
  border:1px solid var(--rule); background:#fff; flex:none;
}
.mdb-map-col{ width:64px; text-align:center; }
.mdb-map-large{
  width:52px; height:52px; object-fit:cover; border-radius:4px;
  border:1px solid var(--rule); background:#fff;
}

/* Random option badge: a drop that rolls options when it drops. */
.rnd-opt{
  display:inline-block; margin-left:4px; cursor:help;
  color:var(--gold); font-size:13px; line-height:1;
  text-shadow:0 1px 1px rgba(15,20,33,.25);
}
.rnd-opt:hover{ color:#b8891a; }

/* --- Drop chance, adjusted for the renewal level penalty ------------------ */
.drop-level{
  background:#fbfaf5; border:1px solid var(--rule); border-radius:8px;
  padding:10px 14px; margin:0 0 12px; font-size:13px; color:#6b6455;
}
.drop-level input{
  width:70px; padding:4px 6px; border:1px solid var(--rule); border-radius:5px;
  font:inherit; font-size:13px; text-align:center;
}
.drop-level input:focus{ outline:none; border-color:var(--gold); }
.drop-level-note{ display:block; margin-top:6px; font-size:11px; color:#8a8372; }
.drop-chance .dc-base{ color:#8a8372; font-size:11px; }

/* --- MVP tracker ---------------------------------------------------------- */
.mvp-filters{ margin:0 0 14px; }
.mvp-summary{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px;
  margin:0 0 12px; font-size:12px; color:#6b6455;
}
.mvp-count{
  display:inline-block; padding:3px 10px; border-radius:999px;
  border:1px solid var(--rule); background:#fff;
}
.mvp-count strong{ font-size:13px; }
.mvp-count-alive { background:#e7f4ea; border-color:#bfe0c9; color:#1e7a42; }
.mvp-count-window{ background:#fdf6e0; border-color:#e8d79a; color:#8a6a12; }
.mvp-count-dead  { background:#f2f0ea; color:#7f7866; }
.mvp-asof{ color:#8a8372; font-size:11px; }

.mvp-note{
  background:#fbfaf5; border:1px solid var(--rule); border-left:3px solid var(--gold);
  border-radius:6px; padding:9px 12px; margin:12px 0;
  font-size:12px; color:#6b6455; line-height:1.5;
}
.mvp-note-warn{ border-left-color:#b3261e; background:#fdf3f2; }
.mvp-note code{
  background:#efe9db; border-radius:3px; padding:1px 5px; font-size:11px;
}

.mvp-state{
  display:inline-block; padding:2px 9px; border-radius:999px;
  font-size:11px; font-weight:700; white-space:nowrap;
}
.mvp-state-alive { background:#e7f4ea; color:#1e7a42; }
.mvp-state-window{ background:#fdf6e0; color:#8a6a12; }
.mvp-state-dead  { background:#f2f0ea; color:#7f7866; }

/* A boss that is up, or about to be, is the reason to open this page. */
.mvp-row-alive  .idb-name a{ font-weight:700; }
.mvp-row-window { background:#fefcf3; }
.mvp-row-dead   .idb-name a{ color:#8a8372; }
.mvp-timer{ font-size:11px; color:#8a8372; white-space:nowrap; }
.mvp-timer small{ display:block; opacity:.8; }

/* --- Server info: headline figures ---------------------------------------
   The stock page put five numbers in a two-column form table, which read as a
   settings screen rather than as a summary. These are stat cards instead:
   equal width, label above value, wrapping to fewer per row as space runs
   out. Zeny gets a double-width card because it is an order of magnitude
   longer than the other four and would otherwise force them all narrow. */
.si-hero{
  margin:0 0 18px;
  padding:16px 20px;
  background:linear-gradient(180deg,#fbfaf5 0%,#f4f1e6 100%);
  border:1px solid var(--rule);
  border-left:4px solid var(--gold);
  border-radius:8px;
}
.si-hero-eyebrow{
  margin:0 0 4px;
  font-size:11px; letter-spacing:3px; text-transform:uppercase;
  color:#8a6a12; font-weight:700;
}
.si-hero-lead{ margin:0; font-size:15px; color:#4a463c; }

.si-stats{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:12px;
  margin:0 0 26px;
}
.si-stat{
  background:#fff;
  border:1px solid var(--rule);
  border-top:3px solid var(--gold);
  border-radius:8px;
  padding:14px 16px;
  box-shadow:0 1px 3px rgba(0,0,0,.05);
  min-width:0;
}
.si-stat--wide{ grid-column:span 2; }
.si-stat-label{
  display:block;
  font-size:11px; letter-spacing:1.4px; text-transform:uppercase;
  color:#8a8372; margin-bottom:6px;
}
.si-stat-value{
  display:block;
  font-size:26px; line-height:1.1; font-weight:700; color:#1f2739;
  /* Zeny totals run to twelve digits; let them shrink rather than overflow. */
  overflow-wrap:anywhere;
}
.si-stat--wide .si-stat-value{ font-size:22px; }

/* --- Server info: job advancement tree -----------------------------------
   One grid for the whole tree, rather than a strip per line: Novice is a
   single cell spanning every row beneath it and the lines fan out from there.

   The tree runs left to right -- a tier is a column, a lane is one leaf of the
   tree, and the columns between the tiers hold the connectors. That is the way
   round it has to be: laid out top to bottom the width would be set by the
   twenty-odd leaves rather than by the five tiers, and no screen is wide
   enough to show that at a size anyone can read. This way it fits the content
   column and simply grows down the page.

   modules/server/info.php hands each node its tier and the lanes it covers,
   and each connector the geometry of the shape joining a class to the ones it
   advances into, so nothing here has to work out the layout. Lanes are a
   fixed height (set inline, and assumed by that arithmetic) so a cell spanning
   five lanes is exactly five lanes tall and the lines meet the boxes they
   point at. */
.si-tree-lead{ margin:0 0 18px; color:#6b6455; max-width:74ch; }

/* The wide layout is hidden outright below 768px -- see the narrow rules at
   the end of this file. This stays as a safety net for the band between the
   breakpoint and the width where the grid is comfortable. */
.si-tree-scroll{ overflow-x:auto; margin-bottom:24px; }
.si-tree{
  border:1px solid var(--rule);
  border-radius:8px;
  background:#fbfaf5;
  overflow:hidden;
}

/* Same navy-and-gold as the site header band, so the tier captions read as a
   header rather than as another row of parchment. */
.si-tiers{
  display:grid;
  background-image:linear-gradient(180deg,#1b2540 0%,#121a2b 100%);
  border-bottom:2px solid var(--gold);
}
.si-tier{
  padding:9px 6px;
  text-align:center;
  font-size:11px; font-weight:700; letter-spacing:1.6px; text-transform:uppercase;
  color:var(--gold-lt);
  text-shadow:0 1px 3px rgba(0,0,0,.55);
}

/* No row gaps: the connector arithmetic assumes a lane is exactly one lane
   height and a cell starts where the one above it ended. Breathing room comes
   from the nodes' own margins instead. */
.si-grid{ display:grid; padding:6px 0; }

.si-node{
  /* Centred rather than stretched: a cell spanning twenty lanes should be one
     card sitting halfway down its subtree, not a twenty-lane-tall box. */
  align-self:center;
  margin:0 6px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:9px 7px 10px;
  background:#fff;
  border:1px solid var(--rule);
  border-top:2px solid #ddd3b4;
  border-radius:6px;
  text-align:center;
  transition:border-top-color .15s, box-shadow .15s;
}
.si-node:hover{ border-top-color:var(--gold); box-shadow:0 2px 10px rgba(0,0,0,.1); }

/* The roots of the tree, and the classes a player actually ends on, are the
   two things worth picking out of seventy near-identical cards. */
.si-node--tier0{ border-top-color:var(--gold); background:#fffdf6; }
.si-node--tier4{ border-top-color:#c2b58c; }

.si-node-sprite{
  width:54px; height:54px;
  margin-bottom:6px;
  flex:none;
  background-repeat:no-repeat;
  background-position:center bottom;
  background-size:contain;
  /* Client sprites are small bitmaps; smooth scaling turns them to mush. */
  image-rendering:pixelated;
}
.si-node-sprite--none{
  display:flex; align-items:center; justify-content:center;
  color:#c9bf9e; font-size:24px;
}
.si-node-name{
  font-size:12px; font-weight:600; line-height:1.25;
  color:#4a463c;
  margin-bottom:4px;
  overflow-wrap:anywhere;
}
.si-node-count{ font-size:17px; font-weight:700; line-height:1; color:#8a6a12; }

.si-link{ position:relative; }
.si-link-svg{
  display:block;
  width:100%; height:100%;
  stroke:#d5cbae;
  stroke-width:1.5px;
  /* preserveAspectRatio is off on these, so the box is stretched to the cell
     and the renderer has to be told not to try to smooth the result. */
  shape-rendering:crispEdges;
}

@media (max-width:640px){
  .si-stat--wide{ grid-column:span 1; }
  .si-stat-value{ font-size:22px; }
}

/* --- Server info: the tree on a narrow screen ----------------------------
   The grid above needs 656px before its sprites stop being legible, which no
   phone has once the page padding is taken off. Scrolling it sideways is not
   an answer: a tree you have to drag in two directions to read is not one you
   can read. So below 768px it is replaced -- not squeezed -- by the same tree
   as an indented list, where depth carries the tier that a column carried
   before.

   Both layouts are rendered from the one nested structure the module builds,
   so they cannot drift apart. Only one is ever displayed; the images in the
   hidden one are lazy, so a phone never downloads the wide layout's sprites
   and a desktop never downloads the narrow one's. */
.si-narrow{ display:none; }

@media (max-width:767px){
  .si-tree-scroll{ display:none; }
  .si-narrow{ display:block; margin-bottom:24px; }
}

.si-narrow-root{
  display:flex; align-items:center; gap:12px;
  padding:12px 14px;
  background:linear-gradient(180deg,#1b2540 0%,#121a2b 100%);
  border:1px solid var(--rule);
  border-bottom:2px solid var(--gold);
  border-radius:8px 8px 0 0;
}
.si-narrow-root .si-nrow-name{ color:var(--gold-lt); }
.si-narrow-root .si-nrow-tier{ color:#9fb0cc; }
.si-narrow-root .si-nrow-count{ color:#f3ead2; }

.si-narrow-section{
  border:1px solid var(--rule);
  border-top:none;
  background:#fbfaf5;
}
.si-narrow-section:last-child{ border-radius:0 0 8px 8px; }
.si-narrow-section[open]{ background:#fff; }

.si-narrow-head{
  display:flex; align-items:center; gap:12px;
  padding:10px 14px;
  cursor:pointer;
  /* The default triangle sits oddly against a flex row; the caret below is
     drawn on the right instead, where a thumb expects it. */
  list-style:none;
  -webkit-tap-highlight-color:transparent;
}
.si-narrow-head::-webkit-details-marker{ display:none; }
.si-narrow-head::after{
  content:"";
  flex:none;
  width:8px; height:8px;
  margin-left:2px;
  border-right:2px solid #b3a982;
  border-bottom:2px solid #b3a982;
  transform:rotate(45deg) translate(-2px,-2px);
  transition:transform .15s;
}
.si-narrow-section[open] > .si-narrow-head::after{
  transform:rotate(-135deg) translate(-2px,-2px);
}
/* The header is built from spans and a pseudo-element (see the note in
   server/info.php), so they have to be told to behave as the boxes the rows
   use. The sprite arrives as --sprite on the summary itself. */
.si-narrow-head .si-nrow-text,
.si-narrow-head .si-nrow-name,
.si-narrow-head .si-nrow-tier,
.si-narrow-head .si-nrow-count{ display:block; }

.si-narrow-head::before{
  content:"";
  flex:none;
  width:44px; height:44px;
  background-image:var(--sprite, none);
  background-repeat:no-repeat;
  background-position:center bottom;
  background-size:contain;
  image-rendering:pixelated;
}

.si-narrow-head:hover{ background:#f4f1e6; }
.si-narrow-section[open] > .si-narrow-head{
  border-bottom:1px solid var(--rule);
  background:linear-gradient(180deg,#f4f1e6 0%,#ece7d8 100%);
}

/* One row of the list: sprite, then name over tier, then the count hard
   against the right edge so the numbers line up in a column of their own. */
.si-nrow{
  display:flex; align-items:center; gap:12px;
  padding:8px 0;
}
.si-nrow-sprite{
  width:44px; height:44px; flex:none;
  background-repeat:no-repeat;
  background-position:center bottom;
  background-size:contain;
  /* Client sprites are small bitmaps; smooth scaling turns them to mush. */
  image-rendering:pixelated;
}
.si-nrow-sprite--none{
  display:flex; align-items:center; justify-content:center;
  color:#c9bf9e; font-size:20px;
}
.si-nrow-text{ min-width:0; flex:1; }
.si-nrow-name{
  font-size:14px; font-weight:600; color:#2b2b2b; line-height:1.25;
}
.si-nrow-tier{
  font-size:10px; letter-spacing:1.2px; text-transform:uppercase;
  color:#8a8372; margin-top:2px;
}
.si-nrow-count{
  flex:none;
  font-size:18px; font-weight:700; color:#8a6a12;
  font-variant-numeric:tabular-nums;
}

/* The indent guides. Each level is inset, with an elbow into its row and a
   spine down to the next sibling -- the last child stops its spine at the
   elbow so the line does not run past the end of the branch. */
/* Kept deliberately tight. Four tiers of indent on a 375px screen is the
   whole budget: every pixel here comes straight off the name column, and at
   42px a step the fourth-class names were down to a 67px column and wrapping
   to two lines. At 24px they get roughly 120px and read on one. */
.si-nrow-kids{
  list-style:none;
  margin:0;
  padding:0 0 0 8px;
}
.si-nrow-kids--top{ padding:2px 12px 10px 14px; }

.si-nrow-item{
  position:relative;
  padding-left:16px;
}
.si-nrow-item::before{
  content:"";
  position:absolute;
  left:0; top:0; bottom:0;
  border-left:1px solid #ded5ba;
}
.si-nrow-item:last-child::before{ bottom:auto; height:30px; }
.si-nrow-item::after{
  content:"";
  position:absolute;
  left:0; top:30px;
  width:11px;
  border-top:1px solid #ded5ba;
}

/* Below about 360px -- the older small phones -- the name column drops under
   100px at the deepest tier and the longer class names start wrapping again.
   Buying the room back from the sprite and the indent keeps them on one line. */
@media (max-width:359px){
  .si-nrow-sprite,
  .si-narrow-head::before{ width:36px; height:36px; }
  .si-nrow{ gap:9px; padding:7px 0; }
  .si-narrow-head{ gap:9px; }
  .si-nrow-item{ padding-left:13px; }
  .si-nrow-item::after{ width:9px; }
  .si-nrow-kids{ padding-left:5px; }
  .si-nrow-kids--top{ padding:2px 8px 8px 10px; }
  .si-nrow-name{ font-size:13px; }
  .si-nrow-count{ font-size:16px; }
}

/* --- Mobile navigation drawer -------------------------------------------
   The sidebar is a real column on a wide screen. Below 860px the shell drops
   to one column, which used to leave the whole menu stacked on top of every
   page -- a screenful of links to scroll past before reaching the content.
   It is an off-canvas drawer there instead, opened from the band.

   All of it is gated on .cb-js, set on <html> by a script in the head. With
   no script the drawer could never be opened, so the rules simply do not
   apply and the menu keeps its old stacked behaviour. */
.cb-nav-btn,
.cb-nav-close{ display:none; }
.cb-nav-scrim{ display:none; }

@media (max-width:860px){
  .cb-js .cb-nav-btn{
    display:inline-flex; align-items:center; gap:8px;
    flex:none;
    /* 44px is the smallest comfortable touch target. */
    min-height:44px; padding:8px 13px;
    background:rgba(255,255,255,.07);
    border:1px solid rgba(255,255,255,.18);
    border-radius:8px;
    color:#f3ead2;
    font:inherit; font-size:13px; letter-spacing:.4px;
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
  }
  .cb-js .cb-nav-btn:hover{ background:rgba(255,255,255,.13); }
  .cb-js .cb-nav-btn:active{ background:rgba(255,255,255,.2); }
  .cb-nav-btn-icon{ font-size:17px; line-height:1; color:var(--gold-lt); }

  .cb-js .cb-sidebar{
    position:fixed; z-index:60;
    top:0; left:0; bottom:0;
    width:278px; max-width:84vw;
    padding:12px;
    background:var(--shell);
    background-image:linear-gradient(180deg,#0d1220 0%,#141b2b 100%);
    border-right:1px solid #26314a;
    box-shadow:6px 0 28px rgba(0,0,0,.55);
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    transform:translateX(-100%);
    transition:transform .22s ease;
  }
  .cb-js.cb-nav-open .cb-sidebar{ transform:none; }

  .cb-js .cb-nav-close{
    display:flex; align-items:center; gap:8px;
    width:100%;
    min-height:44px; margin:0 0 10px; padding:8px 12px;
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.14);
    border-radius:8px;
    color:var(--sidebar-ink);
    font:inherit; font-size:12px; letter-spacing:1.4px; text-transform:uppercase;
    cursor:pointer;
  }
  .cb-nav-close-icon{ font-size:19px; line-height:1; color:var(--gold-lt); }

  .cb-js .cb-nav-scrim{
    display:block;
    position:fixed; z-index:55;
    top:0; right:0; bottom:0; left:0;
    background:rgba(5,8,15,.62);
    opacity:0; visibility:hidden;
    transition:opacity .22s ease, visibility .22s;
  }
  .cb-js.cb-nav-open .cb-nav-scrim{ opacity:1; visibility:visible; }

  /* The page behind the drawer must not scroll with it. */
  .cb-js.cb-nav-open,
  .cb-js.cb-nav-open body{ overflow:hidden; }
}

@media (prefers-reduced-motion:reduce){
  .cb-js .cb-sidebar,
  .cb-js .cb-nav-scrim{ transition:none; }
}

/* Marker on a monster or item drop that rolls random options. The roll table
   is in its title, which uniTip turns into the tooltip. */
.mdb-opt{
  display:inline-block;
  margin-left:5px;
  color:#8a6a12;
  font-size:12px;
  line-height:1;
  cursor:help;
  vertical-align:middle;
}
.mdb-opt:hover{ color:var(--gold); }