/* BrowserOT website: the tibia.com layout, drawn from that site's own stylesheet tokens (dark blue page
   #051122, a 1024-1280px frame, a stone menu on the left whose current section is expanded, tan box
   frames with a green title bar over cream content, #505050 table headers, blue links and buttons).
   MyAAC's "tibiacom" template is the same design; its geometry and colours are what these follow.
   Every frame, edge, shadow and texture is CSS here: the original corner/edge/button GIFs and the
   background artwork are CipSoft's and are not part of this repository. */

:root {
  --page: #051122;
  --frame: #3a3738;
  --frame-tan: #debb9d;
  --cream: #fff2db;
  --box: #d4c0a1;
  --row-odd: #f1e0c6;
  --row-even: #d5c0a1;
  --caption: #5f4d41;
  --header: #505050;
  --brown: #5a2800;
  --link: #004294;
  --green-from: #5b8a2b;
  --green-to: #3c6414;
  --teal: #0d2e2b;
  --teal-line: #4b7874;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0;
  /* the official site puts its artwork here; this is a plain glow, since that artwork is CipSoft's */
  background: radial-gradient(1200px 360px at 50% -60px, #0e2438 0%, #051122 72%) fixed, var(--page);
  color: var(--brown);
  font: 12px/1.45 Helvetica, Arial, sans-serif;
}

img { border: none; }
a { color: var(--link); font-weight: bold; text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { margin: 0 0 6px; font-family: Helvetica, Arial, sans-serif; font-size: 12px; }
p { margin: 0 0 8px; }
ul { margin: 4px 0 8px; padding-left: 18px; }
code { font-family: Menlo, Consolas, monospace; font-size: 11px; }
table { border-collapse: collapse; }
input, select, textarea, button { font: 12px Helvetica, Arial, sans-serif; }

.bodycontainer { min-width: 1024px; max-width: 1280px; margin: 0 auto; padding: 0; }
.wrap { width: 100%; }

/* ---------------------------------------------------------------- header */

.site-head { padding: 12px 15px 0; }
.head-inner { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.logo { display: flex; align-items: center; gap: 14px; padding: 12px 0 8px; text-decoration: none; }
.logo-mark { width: 56px; height: 56px; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.6)); }
.logo-text { display: flex; flex-direction: column; gap: 2px; }
.logo-name { font-family: Georgia, "Times New Roman", serif; font-size: 36px; line-height: 1; font-weight: bold; letter-spacing: 1px; color: #e9dcc0; text-shadow: 0 1px 0 #000, 0 0 14px rgba(201, 176, 106, 0.25); }
.logo-name b { color: #e2b45a; }
.logo-tag { font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: #8ea3bb; font-weight: bold; }
.logo:hover { text-decoration: none; }

/* the login box that sits above the menu, as on the official site */
.loginbox { width: 190px; background: linear-gradient(#e4c8a5, #c9ad86); border: 2px solid var(--frame); box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.5); padding: 7px 8px 9px; }
.loginbox-line { margin: 2px 0; font-weight: bold; font-size: 11px; color: var(--brown); }
.loginbox-line.sub { color: #6b4a1a; font-size: 10px; font-weight: normal; }
.loginbox-actions { display: flex; flex-direction: column; gap: 4px; margin-top: 7px; }

/* ---------------------------------------------------------------- menu (current section expanded) */

.layout { display: grid; grid-template-columns: 180px minmax(0, 1fr) 180px; gap: 15px; padding: 10px 15px 20px; align-items: start; }
.menu-col { padding-top: 2px; }
.menu { display: flex; flex-direction: column; gap: 8px; }

.menu-cat { display: flex; flex-direction: column; }
/* the stone buttons of the official menu, drawn as a gradient */
.menu-link { display: block; padding: 7px 10px; background: linear-gradient(#cbb28c, #a98d63); border: 1px solid #5b4a33; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35); color: #3a2410; font: bold 12px Helvetica, Arial, sans-serif; text-align: center; cursor: pointer; }
.menu-link:hover { background: linear-gradient(#e0c69c, #bfa274); text-decoration: none; }
.menu-cat.active > .menu-link { background: linear-gradient(#f0dcae, #d3b57f); border-color: #3a2410; color: #241300; }

/* The submenu panel: dark teal, every section's entries visible (as asked: no collapsing), the current
   entry marked in green. It is flush with its button on every side, so the column reads as one block. */
.submenu { display: block; margin: 0; background: var(--teal); border: 1px solid #06201e; border-top: 0; }
.submenu li { display: block; }
.submenu a, .submenu .link { display: block; padding: 5px 10px; color: #d7d7d7; border-bottom: 1px solid var(--teal-line); font: bold 12px Helvetica, Arial, sans-serif; text-align: left; text-decoration: none; }
.submenu a:hover, .submenu .link:hover { color: #fff; background: rgba(255, 255, 255, 0.07); text-decoration: none; }
.submenu li.current > a { color: #fff; background: linear-gradient(var(--green-from), var(--green-to)); }
.submenu li:last-child a, .submenu li:last-child .link { border-bottom: 0; }

/* ---------------------------------------------------------------- themeboxes (right) */

.themebox-col { display: flex; flex-direction: column; gap: 14px; padding-top: 2px; }
.themebox { background: linear-gradient(#e4c8a5, #cfb389); border: 2px solid var(--frame); box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.45); padding: 0 0 9px; }
.themebox h3 { margin: 0 0 7px; padding: 4px 8px; background: linear-gradient(#6a5648, #4f3d31); color: #fff; font: bold 11px Helvetica, Arial, sans-serif; text-align: center; }
.themebox p { margin: 0 9px 7px; font-size: 11px; color: var(--brown); }
.themebox-online { font-weight: bold; display: flex; align-items: center; gap: 4px; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: #4fd14a; box-shadow: 0 0 6px #4fd14a; display: inline-block; }
.themebox .btn, .themebox form { margin-left: 9px; }
.top-list { margin: 0 9px 8px; padding-left: 20px; font-size: 11px; color: var(--brown); }
.top-list small { color: #6b4a1a; font-weight: normal; }
.facts.tiny { display: grid; grid-template-columns: max-content 1fr; gap: 1px 7px; margin: 0 9px 8px; font-size: 11px; color: var(--brown); }
.facts.tiny dt { font-weight: bold; }

/* ---------------------------------------------------------------- content: tan frame, green title bar, cream body */

.content { min-width: 0; display: flex; flex-direction: column; gap: 22px; padding-top: 6px; }

/* A box: the official frame is a tan bezel around a cream sheet with a green title bar. The bezel is a
   spread box-shadow, so the viewing code stays plain markup.
   The horizontal gutter is box padding, and the title and section bars escape it with negative margins:
   that way a table at width 100% fits exactly, which margins on each child would break. */
.box {
  --gutter: 14px;
  position: relative;
  background: var(--cream);
  border-left: 2px solid var(--frame);
  border-right: 2px solid var(--frame);
  border-bottom: 2px solid var(--frame);
  box-shadow: 0 0 0 6px var(--frame-tan), 4px 4px 9px rgba(0, 0, 0, 0.45);
  padding: 0 var(--gutter) 12px;
  /* the tan bezel is a 6px shadow: the margin keeps it inside the column instead of over the menus */
  margin: 0 6px;
}
.box > h1:first-child, .box > h2:first-child {
  margin: 0 calc(-1 * var(--gutter)) 10px;
  padding: 6px var(--gutter);
  background: linear-gradient(var(--green-from), var(--green-to));
  border-bottom: 2px solid #2c4a0d;
  color: #fff;
  font: bold 12px Helvetica, Arial, sans-serif;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.45);
}
.box > h1:first-child small, .box > h2:first-child small { color: #dbe8c4; font-weight: normal; font-size: 10px; text-transform: none; letter-spacing: 0; }
/* section bar inside a box: the same dark brown caption the official site uses */
.box > h2:not(:first-child), .box > h3:not(:first-child) {
  margin: 10px calc(-1 * var(--gutter)) 8px;
  padding: 4px var(--gutter);
  background: linear-gradient(#6a5648, #4f3d31);
  border-top: 1px solid #3a2c22;
  border-bottom: 1px solid #3a2c22;
  color: #fff;
  font-size: 11px;
}
.box > p, .box > .facts, .box > .form { padding: 4px 0; }
.box ul, .box ol { padding: 2px 0 2px 22px; margin: 4px 0 8px; }
.box > :last-child { margin-bottom: 0; }
.box.narrow { max-width: 480px; }
.hero-body { display: flex; align-items: center; gap: 20px; padding: 8px 6px 4px; }
.hero-mark { flex: none; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.35)); }
.hero-lead { font-family: Georgia, serif; font-size: 16px; line-height: 1.4; color: var(--brown); margin-bottom: 4px; }
.hero-sub { color: #6b4a1a; margin-bottom: 10px; }
.hero-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.boosted { display: flex; gap: 28px; flex-wrap: wrap; font-size: 12px; padding: 10px 0 0; }
.boosted .label { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px; color: #6b4a1a; }
/* a news item's head is the box's title bar: the title on the left, the date on the right */
.news > .news-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  margin: 0 calc(-1 * var(--gutter)) 10px; padding: 6px var(--gutter);
  background: linear-gradient(var(--green-from), var(--green-to)); border-bottom: 2px solid #2c4a0d;
}
.news > .news-head h2 { margin: 0; color: #fff; font-size: 12px; text-transform: uppercase; letter-spacing: 1px; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.45); }
.news > .news-head time { font-size: 11px; color: #dbe8c4; font-weight: normal; white-space: nowrap; }

/* ---------------------------------------------------------------- tables */

.table { width: 100%; font-size: 12px; }
.table th { background: var(--header); color: #fff; font: bold 12px Helvetica, Arial, sans-serif; text-align: left; padding: 4px 6px; }
.table td { padding: 4px 6px; border-bottom: 1px solid #b9a37e; vertical-align: top; }
.table tbody tr:nth-child(odd) { background: var(--row-odd); }
.table tbody tr:nth-child(even) { background: var(--row-even); }
.nowrap { white-space: nowrap; }
.facts { display: grid; grid-template-columns: max-content 1fr; gap: 3px 12px; margin: 0; font-size: 12px; }
.facts dt { font-weight: bold; color: var(--brown); }
.facts dd { margin: 0; }
.badge { display: inline-block; padding: 0 5px; border: 1px solid #2c6b2c; background: #3f8f3a; color: #fff; font-size: 10px; font-weight: bold; vertical-align: middle; }
.pager { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 8px; font-size: 11px; }
.code { background: var(--cream); border: 1px solid #b9a37e; padding: 6px; overflow-x: auto; }
details.danger summary { cursor: pointer; color: #8f2c22; font-size: 11px; font-weight: bold; }

/* ---------------------------------------------------------------- buttons: the official blue, with the tan variant for shop actions */

.btn, button.btn {
  display: inline-block;
  padding: 4px 12px;
  border: 1px solid #0b2b52;
  border-top-color: #4a7cb8;
  border-left-color: #4a7cb8;
  border-radius: 2px;
  background: linear-gradient(#2f6497, #123c68);
  color: #fff;
  font: bold 12px Helvetica, Arial, sans-serif;
  text-align: center;
  text-decoration: none;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
  cursor: pointer;
}
.btn:hover { background: linear-gradient(#3d78b0, #1a4a7c); color: #fff; text-decoration: none; }
.btn-play { background: linear-gradient(#e7bb62, #b8832f); border-color: #8a6120; border-top-color: #f6ddaa; border-left-color: #f6ddaa; color: #2b1a08; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35); }
.btn-play:hover { background: linear-gradient(#f0c973, #c78f36); color: #2b1a08; }
.btn-danger { background: linear-gradient(#b8453b, #7d2620); border-color: #5e1b16; border-top-color: #d98a80; border-left-color: #d98a80; color: #fff; }
.btn-small { padding: 2px 8px; font-size: 11px; }
.btn:disabled, button.btn:disabled { background: linear-gradient(#8d8d8d, #6a6a6a); border-color: #4f4f4f; color: #e4e4e4; text-shadow: none; cursor: default; opacity: 0.75; }
button.link, .link { background: none; border: 0; padding: 0; cursor: pointer; color: var(--link); font: bold 12px Helvetica, Arial, sans-serif; text-decoration: none; }
button.link:hover, .link:hover { text-decoration: underline; }
form.inline { display: inline; }

.form { display: flex; flex-direction: column; gap: 8px; font-size: 12px; }
.form > .btn, .form > button.btn { align-self: flex-start; }
.form label { display: flex; flex-direction: column; gap: 3px; font-weight: bold; color: var(--brown); }
.form label.check { flex-direction: row; align-items: center; gap: 5px; font-weight: normal; }
.form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], select, textarea {
  padding: 3px 5px;
  border: 1px solid #8a7a5c;
  border-radius: 2px;
  background: #fffdf7;
  color: #000;
  font: 12px Helvetica, Arial, sans-serif;
}
input:focus, select:focus, textarea:focus { outline: 1px solid var(--frame); }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
legend { font-weight: bold; color: var(--brown); padding: 0; margin-bottom: 4px; font-size: 12px; }
.choices { display: grid; gap: 6px; }
.choices.worlds { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.choices.sexes { grid-template-columns: repeat(2, minmax(0, 11rem)); }
.choices.coins { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
.choice { cursor: pointer; }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice-card { position: relative; display: flex; flex-direction: column; gap: 1px; height: 100%; padding: 6px 26px 6px 8px; border: 1px solid #b9a37e; background: var(--cream); font-weight: normal; }
.choice-card::after { content: ''; position: absolute; top: 7px; right: 8px; width: 9px; height: 9px; border: 1px solid #8a7a5c; border-radius: 50%; background: #fffdf7; box-sizing: border-box; }
.choice:hover .choice-card { border-color: var(--brown); }
.choice-card strong { font-size: 11px; }
.choice-card small { color: #6b4a1a; font-size: 10px; line-height: 1.35; font-weight: normal; }
.choice-card .status { font-size: 10px; }
.choice-card .status.up { color: #2f7d32; }
.choice-card .status.down { color: #9a3b2a; }
.choice input:checked + .choice-card { border-color: var(--brown); background: #f6e2b4; box-shadow: 0 0 0 1px var(--brown); }
.choice input:checked + .choice-card::after { background: radial-gradient(circle, var(--brown) 0 45%, #fffdf7 50%); }
.choice input:focus-visible + .choice-card { outline: 1px solid var(--frame); }
.sex-symbol { display: inline-block; width: 13px; color: var(--brown); }
input[type=checkbox] { width: 13px; height: 13px; margin: 0; }
.hint { font-size: 10px; color: #6b4a1a; margin: 0; }
.filters { display: flex; gap: 8px; align-items: end; flex-wrap: wrap; margin-bottom: 8px; font-size: 11px; }
.filters label { display: flex; flex-direction: column; font-size: 10px; font-weight: bold; gap: 2px; color: var(--brown); }
.inline-form { display: flex; gap: 5px; margin-top: 5px; flex-wrap: wrap; align-items: center; }
.inline-form input { width: 110px; }

/* ---------------------------------------------------------------- notices */

.notice { padding: 7px 9px; border: 1px solid; font-size: 11px; margin-bottom: 8px; font-weight: bold; }
.notice-success { background: #e2f3dc; border-color: #3f8f3a; color: #1f4d1b; }
.notice-warning { background: #fbf0cf; border-color: #c89a2a; color: #5c4508; }
.notice-error { background: #f8dcd8; border-color: #8f2c22; color: #5e1a14; }

/* ---------------------------------------------------------------- footer */

.site-foot { padding: 12px 15px 28px; text-align: center; color: #fff; font-size: 10px; }
.foot-inner { display: flex; flex-direction: column; gap: 6px; align-items: center; }
.foot-links { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; font-size: 10px; }
.foot-links a { color: #fff; font-weight: bold; }
.foot-links a:hover { color: #fff; text-decoration: underline; }
.foot-note { margin: 0; color: #90a0b4; font-size: 10px; font-weight: normal; }

@media (max-width: 1024px) {
  .bodycontainer { min-width: 0; }
  .layout { grid-template-columns: 1fr; }
  .form .row { grid-template-columns: 1fr; }
}
/* a choice card around a checkbox shows a square, not a radio circle */
.choice input[type=checkbox] + .choice-card::after { border-radius: 2px; }
.choice input[type=checkbox]:checked + .choice-card::after { background: var(--brown); box-shadow: inset 0 0 0 2px #fffdf7; }

/* guild pages (views/community/guild*.ejs), laid out like tibia.com's */
.guild-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.guild-head h1 { flex: 1; text-align: center; margin: 0; }
.guild-logo { width: 64px; height: 64px; object-fit: contain; image-rendering: pixelated; }
.guild-logo.small { width: 48px; height: 48px; }
.guild-logo-cell { width: 56px; }
.guild-top { display: grid; grid-template-columns: 1fr 160px; gap: 10px; }
.guild-nav { display: flex; flex-direction: column; gap: 5px; }
.guild-nav .btn { text-align: center; }
.guild-info h2, .guild-nav h2 { font-size: 12px; margin: 0 0 4px; }
.pre { white-space: pre-wrap; }
.online { color: #2c7a2c; font-weight: bold; }
@media (max-width: 640px) { .guild-top { grid-template-columns: 1fr; } }