/* Classic tibia.com (2004, 7.4 era) look: dark stone page, grey-brown menu boxes, parchment content,
   #505050 table heads with #F1E0C6 / #D4C0A1 rows. No external fonts or images. */
body { margin: 0; color: #000; font: 12px/1.45 Verdana, Tahoma, Arial, sans-serif;
  background: #0b0906 radial-gradient(ellipse at top, #2a2116 0%, #0b0906 70%) fixed; }
a { color: #004294; text-decoration: none; } a:hover { text-decoration: underline; }
#page { max-width: 980px; margin: 0 auto; padding: 0 6px; }
#header { position: relative; height: 110px; border: 1px solid #000; border-top: 0; overflow: hidden;
  background: linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.75)),
    repeating-linear-gradient(90deg, #3b2f22 0 2px, #33281d 2px 5px), #2e241a;
  box-shadow: inset 0 0 60px #000; }
#header .logo { position: absolute; left: 28px; top: 18px; font: bold 46px 'Times New Roman', Georgia, serif; letter-spacing: 3px;
  color: #e9c060; text-shadow: 0 0 2px #000, 2px 2px 0 #3a1a00, 0 0 18px rgba(255,170,40,.35); text-decoration: none; }
#header .slogan { position: absolute; left: 32px; bottom: 14px; color: #c8b48a; font: italic 13px Georgia, serif; letter-spacing: 1px; }
#ticker { background: #1e1912; border: 1px solid #000; border-top: 1px solid #5a4a36; color: #c8b48a; padding: 3px 10px; font-size: 11px; }
#ticker b { color: #e9c060; }
#columns { display: flex; gap: 8px; margin-top: 8px; }
#menu { width: 170px; flex-shrink: 0; }
#content { flex: 1; min-width: 0; }
.menubox { background: #2b241b; border: 1px solid #000; outline: 1px solid #5a4a36; outline-offset: -2px; margin-bottom: 8px; }
.menutitle { background: linear-gradient(#6b5a43, #3e3224); color: #f0dca8; font: bold 12px Verdana, sans-serif; padding: 4px 8px;
  border-bottom: 1px solid #000; text-shadow: 1px 1px 0 #000; }
.menulink { display: block; padding: 3px 10px 3px 18px; color: #e6d7b5; background: none; border: 0; border-bottom: 1px solid #3a3025;
  width: 100%; text-align: left; font: inherit; cursor: pointer; box-sizing: border-box; position: relative; }
.menulink::before { content: '\25B8'; position: absolute; left: 7px; color: #8a7350; }
.menulink:hover, .menulink.active { background: #4a3d2c; color: #fff3cf; text-decoration: none; }
.menulink.active::before { color: #e9c060; }
.menuform { margin: 0; }
.status div { padding: 3px 10px; color: #e6d7b5; } .status a { color: #e6d7b5; }
.online { color: #5fd35f !important; font-weight: bold; } .offline { color: #e05050 !important; font-weight: bold; }
.box { background: #fef5dd; border: 1px solid #000; outline: 1px solid #8a7350; outline-offset: -3px; margin-bottom: 8px; padding: 0 12px 10px; }
.box h2 { margin: 0 -12px 10px; background: linear-gradient(#6b5a43, #3e3224); color: #f0dca8; padding: 5px 12px;
  font: bold 13px Verdana, sans-serif; letter-spacing: 1px; text-transform: uppercase; border-bottom: 1px solid #000; text-shadow: 1px 1px 0 #000; }
.box h3 { color: #5a3a10; font: bold 14px Georgia, serif; border-bottom: 1px solid #c8b088; margin: 14px 0 6px; }
.intro { font-style: italic; color: #5a4a36; }
.center { text-align: center; } .right { text-align: right; }
.welcome p { font-size: 13px; }
table.list { width: 100%; border-collapse: collapse; margin: 6px 0; border: 1px solid #000; }
table.list th { background: #505050; color: #fff; text-align: left; padding: 3px 6px; font-weight: bold; }
table.list td { padding: 3px 6px; background: #f1e0c6; border-bottom: 1px solid #fef5dd; }
table.list tr:nth-child(even) td { background: #d4c0a1; }
table.form td { padding: 3px 6px; vertical-align: top; }
input[type=text], input[type=password], input[type=email], input[type=number], select, textarea { font: inherit; padding: 2px 4px; border: 1px solid #5a4a36; background: #fffbef; }
textarea { width: 100%; box-sizing: border-box; }
button, input[type=submit] { font: bold 11px Verdana, sans-serif; background: linear-gradient(#7a6548, #4a3b28); color: #f0dca8; border: 1px solid #000;
  padding: 3px 12px; cursor: pointer; text-shadow: 1px 1px 0 #000; }
button:hover, input[type=submit]:hover { background: linear-gradient(#8f7755, #5a4a33); }
button[disabled] { opacity: .5; cursor: default; }
button.link { background: none; border: 0; color: #004294; padding: 0; font: inherit; text-shadow: none; }
.menulink { text-shadow: none; } button.menulink:hover { background: #4a3d2c; }
.bigbtn { display: inline-block; margin: 4px; padding: 7px 18px; background: linear-gradient(#8a2a12, #4a1206); color: #f6e2a8 !important;
  border: 1px solid #000; outline: 1px solid #b0703a; outline-offset: -3px; font: bold 13px Georgia, serif; letter-spacing: 1px; text-decoration: none !important; }
.bigbtn:hover { background: linear-gradient(#a8381a, #5a1808); }
.bigbtn.side { display: block; text-align: center; margin: 0 0 8px; }
.newsitem { margin-bottom: 12px; }
.newshead { background: #d4c0a1; border-left: 4px solid #6b5a43; padding: 3px 8px; font-weight: bold; color: #3a2a10; }
.newsdate { color: #6b5030; }
.ver { color: #7a6a50; font-weight: normal; font-size: 11px; }
.newsbody { padding: 2px 8px; }
.flash { padding: 6px 10px; margin-bottom: 8px; border: 1px solid #000; }
.flash.error { background: #f3c9bf; } .flash.ok { background: #d2e8c4; }
.news-date { color: #6b5a43; font-size: 11px; font-style: italic; }
.small { font-size: 11px; color: #5a4a36; }
.pager { margin-top: 6px; } .pager a, .pager b { margin-right: 6px; }
code { background: #ead9b6; padding: 0 3px; }
form.inline { display: inline; }
#footer { color: #8a7a60; text-align: center; font-size: 11px; padding: 12px 0 20px; border-top: 1px solid #3a3025; margin-top: 4px; }
@media (max-width: 700px) {
  #columns { flex-direction: column; } #menu { width: auto; }
  #header { height: 84px; } #header .logo { font-size: 32px; left: 14px; top: 10px; } #header .slogan { left: 16px; bottom: 8px; }
}

/* ---- Lorehaven (1.0.11): cozy look from the client's login art */
body { background: #120d08 url(lh-bg.jpg) center top / cover fixed; }
#header { height: 294px; background: #2e241a url(lh-header.jpg) center / cover no-repeat; box-shadow: inset 0 -40px 50px rgba(0,0,0,.55); border-radius: 0 0 6px 6px; }
#header .logo { left: 0; right: 0; top: 0; bottom: 40px; }
#header .logo span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
#header .slogan { left: 0; right: 0; text-align: center; bottom: 12px; color: #f6deb0; font-size: 15px; text-shadow: 0 0 6px #000, 1px 1px 0 #000; }
#ticker { background: linear-gradient(#2a1f14, #1a130c); color: #e8cf9c; border-radius: 4px; margin-top: 4px; }
.menubox { border-radius: 4px; box-shadow: 0 2px 8px rgba(0,0,0,.5); background: linear-gradient(#33281c, #261d14); }
.menutitle { background: linear-gradient(#8a5e2c, #5a3a1c); color: #ffe6b0; border-radius: 3px 3px 0 0; }
.box { border-radius: 4px; box-shadow: 0 3px 12px rgba(0,0,0,.45); background: #fcf1d6; }
#footer { color: #d8c49a; text-shadow: 1px 1px 0 #000; }
/* 1.0.14 library */
.libtabs { margin: 0 0 8px; display: flex; flex-wrap: wrap; gap: 4px; }
.libtabs a { padding: 3px 10px; background: #d4c0a1; border: 1px solid #8a7350; color: #3a2a10; font-weight: bold; border-radius: 3px 3px 0 0; }
.libtabs a.on, .libtabs a:hover { background: #6b5a43; color: #f0dca8; text-decoration: none; }
.libsearch { margin: 6px 0; } .libsearch input[type=text] { width: 220px; }
table.lib td.ico { width: 66px; text-align: center; background: #e8d6b4; } table.lib td.ico img { image-rendering: auto; vertical-align: middle; }
h3.libcat { margin-top: 18px; }
.cregrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 6px; }
.cre { display: flex; flex-direction: column; align-items: center; padding: 6px 4px; background: #f1e0c6; border: 1px solid #c8b088; border-radius: 4px; color: #3a2a10; text-align: center; }
.cre:hover { background: #e3cc9f; text-decoration: none; } .cre img { width: 64px; height: 64px; } .cre span { font-size: 11px; font-weight: bold; margin-top: 3px; }
.credetail { display: flex; gap: 16px; align-items: center; } .credetail img { background: #e8d6b4; border: 1px solid #c8b088; padding: 4px; }
ul.feat li { margin: 4px 0; }
.census .bar { height: 10px; background: linear-gradient(#a8381a, #5a1808); border-radius: 2px; }
/* 1.0.14 web: login box + top navigation */
#topnav { display: flex; flex-wrap: wrap; gap: 2px; margin-top: 4px; }
#topnav a { flex: 1; text-align: center; padding: 5px 8px; background: linear-gradient(#6b5a43, #3e3224); color: #f0dca8; font-weight: bold; border: 1px solid #000; border-radius: 3px; }
#topnav a:hover { background: linear-gradient(#8f7755, #5a4a33); text-decoration: none; }
.loginbox .lb { padding: 6px 10px; color: #e6d7b5; }
.lbform { padding: 6px 10px 2px; } .lbform label { display: block; color: #e6d7b5; font-size: 11px; margin-bottom: 4px; }
.lbform input { width: 100%; box-sizing: border-box; } .lbform button { width: 100%; margin: 2px 0 6px; }
.loginbox .bigbtn.side { margin: 4px 10px 8px; }
.itemdetail { display: flex; gap: 14px; align-items: flex-start; } .itemdetail img { background: #e8d6b4; border: 1px solid #c8b088; padding: 4px; }
h3.shopsec { margin: 14px 0 4px; border-bottom: 1px solid #b89a6a; color: #5a3d1c; font-variant: small-caps; }
table.shop td.pv { white-space: nowrap; text-align: center; background: radial-gradient(#efe0bf, #d9c39a); }
table.shop td.pv img { image-rendering: pixelated; } table.shop td.pts { font-weight: bold; text-align: center; }

/* ---- 1.0.33 responsive: header art always shows the whole "Lorehaven" title; phones get content first */
img { max-width: 100%; height: auto; }
#content .box { overflow-x: auto; }
#content table { max-width: 100%; }
@media (max-width: 980px) {
  #header { height: auto; aspect-ratio: 1960 / 588; background-size: cover; background-position: center; }
  #header .slogan { font-size: 13px; bottom: 6px; }
}
@media (max-width: 700px) {
  #page { padding: 0 4px; }
  #header { height: auto; aspect-ratio: 1960 / 640; background-size: 100% auto; background-position: center top; background-color: #1d160e; border-radius: 0 0 4px 4px; }
  #header .logo { left: 0; top: 0; right: 0; bottom: 22px; font-size: 0; }
  #header .slogan { left: 4px; right: 4px; bottom: 3px; font-size: 11px; letter-spacing: 0; }
  #topnav { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; }
  #topnav a { padding: 8px 2px; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #ticker { font-size: 11px; }
  #columns { flex-direction: column; }
  #content { order: -1; }
  #menu { width: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; align-items: start; }
  #menu .menubox { margin-bottom: 0; }
  #menu .menubox.status, #menu .menubox.loginbox { grid-column: 1 / -1; }
  #menu .menubox a, #menu .menulink { padding-top: 7px; padding-bottom: 7px; }
  input, select, textarea, button { font-size: 16px; }   /* no iOS zoom on focus */
  .box { margin-left: 0; margin-right: 0; }
}
@media (max-width: 360px) { #topnav { grid-template-columns: repeat(3, 1fr); } #menu { grid-template-columns: 1fr; } }