/* ------ Mobile layout -------
   Loaded by includes/header.php with media="screen and (max-width: 820px)", so the desktop
   layout never sees any of this. The 974px desktop frame is scaled to the screen width:
   header art: 1 desktop px = 100vw / 974. The parchment frame uses style/m-contwrapper-*.png,
   the desktop frame with the dark side-menu column cut out (784px wide, 1px = 100vw / 784).
   "html body" prefixes beat the page stylesheets that load later (gamemap.css etc.). */

html { overflow-x: hidden; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  background-size: 205.339vw auto;              /* body_bg.jpg is 2000px wide */
  background-position: center 44px;             /* below the top bar */
}

html body div.mainwrapper { width: auto; min-width: 0; max-width: none; }

/* ---- top bar ---- */

html body div.mob-bar {
  display: flex;
  align-items: center;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1001;
  height: 44px;
  padding: 0 8px 0 12px;
  background: linear-gradient(#3a2411, #24160a);
  border-bottom: 1px solid #b08a55;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .45);
  box-sizing: border-box;
  text-align: left;
}

div.mob-bar a.mob-name, div.mob-bar a.mob-name:link, div.mob-bar a.mob-name:visited {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: #ffd98a;
  font-family: Sylfaen, Trebuchet MS, Verdana;
  font-size: 17px;
  text-decoration: none;
  text-shadow: #000 1px 1px 0;
}

div.mob-bar a.mob-acct, div.mob-bar a.mob-acct:link, div.mob-bar a.mob-acct:visited {
  flex: none;
  margin: 0 10px 0 8px;
  color: #e8cf9c;
  font-size: 13px;
  text-decoration: underline;
}

div.mob-bar button.mob-toggle {
  flex: none;
  display: flex;
  align-items: center;
  height: 32px;
  padding: 0 12px 0 10px;
  border: 1px solid #b08a55;
  background: #5b3d21;
  color: #f0e4d2;
  font-family: Trebuchet MS, Verdana;
  font-size: 13px;
  font-weight: bold;
  cursor: pointer;
}

/* hamburger: middle line + ::before / ::after */
div.mob-bar button.mob-toggle span,
div.mob-bar button.mob-toggle span::before,
div.mob-bar button.mob-toggle span::after {
  display: block;
  width: 16px;
  height: 2px;
  background: #f0e4d2;
  transition: transform .15s, background .15s;
}
div.mob-bar button.mob-toggle span { position: relative; margin-right: 8px; }
div.mob-bar button.mob-toggle span::before,
div.mob-bar button.mob-toggle span::after { content: ""; position: absolute; left: 0; }
div.mob-bar button.mob-toggle span::before { top: -5px; }
div.mob-bar button.mob-toggle span::after { top: 5px; }
body.mob-open div.mob-bar button.mob-toggle span { background: transparent; }
body.mob-open div.mob-bar button.mob-toggle span::before { transform: translateY(5px) rotate(45deg); }
body.mob-open div.mob-bar button.mob-toggle span::after { transform: translateY(-5px) rotate(-45deg); }

/* ---- header art (scaled desktop frame) ---- */

html body a.logo_link, html body a.logo_link:link, html body a.logo_link:visited {
  left: 8.214vw;
  top: calc(44px + 6.674vw);
  width: 32.341vw;
  height: 18.480vw;
}

html body div.main_menu { display: none; }        /* its links are in the Menu drawer */

html body div.contwrapper-top {
  width: auto; min-width: 0; max-width: none;
  height: 39.528vw;
  background: url('m-contwrapper-top.png') no-repeat center bottom;
  background-size: 100% auto;
}

html body div.contwrapper {
  padding: 0 7.143vw 0 6.378vw;
  background: url('m-contwrapper-bg.png') repeat-y center top;
  background-size: 100% auto;
}

html body div.contwrapper-bottom {
  height: 5.102vw; min-height: 0; max-height: none;
  background: url('m-contwrapper-bottom.png') no-repeat center top;
  background-size: 100% auto;
}

html body div.footer {
  height: 8.214vw; min-height: 34px; max-height: none;
  background-size: 93.737vw auto;
  line-height: max(6.160vw, 26px);
  font-size: 11px;
}

/* ---- Menu drawer (the desktop side menu) ---- */

html body div.side_menu {
  display: none;
  float: none;
  position: fixed;
  z-index: 1000;
  top: 44px;
  right: 0;
  bottom: 0;
  width: 236px; min-width: 0; max-width: 86vw;
  margin: 0;
  padding: 12px 0 20px 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: #efe3cf url('contwrapper-bg.png') repeat-y 50% 0;
  border-left: 2px solid #3a2411;
  box-shadow: -4px 0 16px rgba(0, 0, 0, .5);
  box-sizing: border-box;
}
body.mob-open div.side_menu { display: block; }

/* dimmed page behind the open drawer; a tap on it closes the drawer (style/mobile.js) */
body.mob-open div.contwrapper::before {
  content: "";
  position: fixed;
  z-index: 999;
  left: 0; top: 44px; right: 0; bottom: 0;
  background: rgba(0, 0, 0, .45);
}

html body div.side_menu div.buttons a.mob-only { display: block; }

/* drawer order differs from the desktop menu; "How to connect" reads "Connect" */
html body div.side_menu div.buttons { display: flex; flex-direction: column; }
html body div.side_menu div.buttons a[href="connect.php"] { font-size: 0; line-height: 0; }
html body div.side_menu div.buttons a[href="connect.php"]::after { content: "Connect"; display: block; font-size: 12px; line-height: 34px; }
div.side_menu div.buttons a[href="index.php"]      { order: 1; }
div.side_menu div.buttons a[href="register.php"]   { order: 2; }
div.side_menu div.buttons a[href="connect.php"]    { order: 3; }
div.side_menu div.buttons a[href="serverinfo/"] { order: 4; }
div.side_menu div.buttons a[href="gamemap.php"]    { order: 5; }
div.side_menu div.buttons a[href="itemdb.php"]     { order: 6; }
div.side_menu div.buttons a[href="questdb.php"]    { order: 7; }
div.side_menu div.buttons a[href="npcdb.php"]      { order: 7; }   /* right after Quest DB (same order, DOM order wins) */
div.side_menu div.buttons a[href="classdb.php"]    { order: 7; }   /* right after NPC DB */
div.side_menu div.buttons a[href="vote.php"]       { order: 8; }
div.side_menu div.buttons a[href="shop.php"]       { order: 9; }
div.side_menu div.buttons a[href="toplist.php"]    { order: 10; }
div.side_menu div.buttons a[href="media.php"]      { order: 11; }
div.side_menu div.buttons a[href="fixes.php"]      { order: 9; }    /* after Vote & Reward (shop.php is gone) */
div.side_menu div.buttons a[href="botupdates.php"] { order: 9; }    /* right after Fixes (same order, DOM order wins) */
/* the drawer is 236px wide and the 198px button sprite sits centred in it -> keep the icon tile on the sprite */
html body div.side_menu div.buttons a.db::before { left: calc(50% - 87px); }

html body div.side_menu div.box-serverstatus,
html body div.side_menu div.box-login,
html body div.side_menu div.box-usercp { width: 177px; margin: 0 auto; }
html body div.side_menu div.box { width: 167px; margin: 0 auto 10px auto; }
html body div.side_menu div.box input[type=text],
html body div.side_menu div.box input[type=password] { width: 150px; font-size: 16px; }

/* ---- content column ---- */

html body div.content {
  float: none;
  width: auto; min-width: 0; max-width: none;
  text-align: left;
  overflow-x: auto;                 /* a wide admin table scrolls inside, never the page */
}

div.content h1 { font-size: 24px; }
div.content h2 { font-size: 18px; }

/* page-editor canvas: style/mobile.js zooms it to the column width */
html body div.pc-canvas { z-index: 0; }

/* every text field 16px: smaller makes iPhone zoom in on focus */
div.content input[type=text], div.content input[type=password], div.content input[type=email],
div.content input:not([type]), div.content select, div.content textarea { font-size: 16px; max-width: 100%; box-sizing: border-box; }

/* forms: label above field */
html body table.formgrid, html body table.formgrid tbody, html body table.formgrid tr,
html body table.formgrid th, html body table.formgrid td { display: block; width: auto; }
html body table.formgrid th { padding: 6px 0 2px 0; white-space: normal; }
html body table.formgrid td { padding: 0; }
html body table.formgrid td.msg { padding: 2px 0 0 0; }
html body table.formgrid input[type=text], html body table.formgrid input[type=password] { width: 100%; padding: 7px 8px; }
div.content input.btn { padding: 8px 22px; }
div.content input.btn.btn-s { padding: 6px 10px; font-size: 12px; }

/* register.php / login.php plain tables (<table cellpadding="4">) */
html body div.content form table[cellpadding], html body div.content form table[cellpadding] tbody,
html body div.content form table[cellpadding] tr, html body div.content form table[cellpadding] td { display: block; width: auto; }
html body div.content form table[cellpadding] td { padding: 2px 0; }
html body div.content form table[cellpadding] tr { margin-bottom: 6px; }
html body div.content form table[cellpadding] input[type=text],
html body div.content form table[cellpadding] input[type=password] { width: 100%; padding: 7px 8px; color: #e8dccb; }
html body div.content form table[cellpadding] input[type=submit] { padding: 8px 26px; color: #f0e4d2; background: #5b3d21; border: 1px solid #3a2411; font-weight: bold; }

/* data tables */
html body table.info th { width: 88px; white-space: normal; }
html body table.chars th, html body table.chars td { padding-right: 6px; }
html body table.chars td { word-break: break-word; }
html body table.itemedit td.ed, html body table.itemedit td.ac { width: auto; }

/* hover bubbles: wrap instead of running off the screen */
span.tip::after { white-space: normal; width: max-content; max-width: 200px; }
#itemtip { max-width: calc(100vw - 20px); box-sizing: border-box; }

/* account page */
html body div.acct { padding: 8px 8px 10px 8px; }

/* character page: the two stat tables stack */
html body div.cols table.info, html body div.cols table.info + table.info { float: none; width: 100%; }
html body div.cols table.info + table.info tr:first-child th,
html body div.cols table.info + table.info tr:first-child td { border-top: 1px solid #dacdb6; }
html body div.doll-slot { width: 66px; margin-right: 4px; }

/* top list tabs */
div.toplist .tl-tabs a, div.toplist .tl-tabs a:link, div.toplist .tl-tabs a:visited { padding: 6px 10px; }
html body table.toptable th.rk, html body table.toptable td.rk { width: 18px; }

/* vote */
html body table.votetable td.name { width: auto; }
html body table.votetable td.act { white-space: normal; }
html body table.votetable td.act input.btn { margin: 4px 0 0 0; }
a.btn-a, a.btn-a:link, a.btn-a:visited { padding: 6px 12px; }

/* shop */
html body form.shop-pick label { display: block; margin: 8px 0 4px 0; }
html body form.shop-pick select { display: block; width: 100%; margin: 4px 0 0 0; padding: 6px; }
html body table.shoptable td.name { width: auto; }
html body table.shoptable td.num { padding-right: 8px; }
html body table.shoptable td.det select { margin: 0 2px 4px 0; padding: 5px 3px; }
html body table.shoptable td.det input[type=text] { width: 100%; padding: 6px; }
html body table.shoptable td.det span.dim { display: block; margin: 3px 0 0 0; }
html body div.shop div.tier-box { padding: 4px 6px; }
h3.tier-head span.count { display: none; }

/* connect / download */
html body a.dl-btn, html body a.dl-btn:link, html body a.dl-btn:visited { min-width: 0; width: 100%; padding: 10px 12px; }
html body a.dl-btn span.dl-t1 { font-size: 17px; line-height: 21px; }
html body a.dl-btn span.dl-ico { width: 38px; height: 38px; margin-right: 12px; }
html body div.download div.dl-box { padding: 16px 10px; }
html body div.download div.dl-shots { flex-direction: column; }
html body div.download div.dl-shots a { height: auto; }

/* ---- GameMap ---- */
html body #gm .gm-bar { display: flex; flex-wrap: wrap; gap: 4px; height: auto; }
html body #gm .gm-tab, html body #gm .gm-dblink { float: none; margin: 0; padding: 0 12px; line-height: 32px; }
html body #gm .gm-search { float: none; flex: 1 1 100%; width: auto; padding: 7px 8px; font-size: 16px; box-sizing: border-box; }
html body #gm .gm-view { float: none; width: auto; height: 88vw; max-height: 480px; touch-action: none; }
html body #gm .gm-zoom a { width: 34px; line-height: 32px; font-size: 18px; }
html body #gm .gm-side { float: none; width: auto; height: auto; margin-top: 8px; }
html body #gm .gm-list { height: auto; max-height: 340px; }
html body #gm .gm-list a { padding: 8px; }
html body #gm .gm-tip { display: none !important; }       /* hover only; a tap selects the square */
html body #gm .gm-dialog { padding: 12px 12px 14px 12px; }
html body #gm table.gm-stats td.k, html body #gm table.gm-stats td.v { width: auto; }

/* ---- Item / Quest database ---- */
html body #idb .idb-q, html body #qdb .qdb-q { display: block; width: 100%; margin-bottom: 4px; font-size: 16px; box-sizing: border-box; }
html body #idb select, html body #qdb select { font-size: 16px; margin: 0 2px 4px 0; max-width: 100%; }
html body #qdb .qdb-town { max-width: 100%; }
html body #idb .idb-dialog, html body #qdb .qdb-dialog { padding: 12px; }
html body #qdb .qm-dialog { max-width: 96%; margin-top: 8px; }
html body #qdb .qm-view { height: 70vh; touch-action: none; }
html body #qdb .qm-zoom a { width: 34px; line-height: 32px; font-size: 18px; }
html body #qdb .rline { white-space: normal; }

/* ---- popups (GameMap monster, item card, quest): above the top bar; big X pinned top right ---- */
html body #gm .gm-modal, html body #idb .idb-modal, html body #qdb .qdb-modal { z-index: 1100; }
html body #qdb .qdb-map { z-index: 1110; }
html body #gm .gm-dialog, html body #idb .idb-dialog, html body #qdb .qdb-dialog {
  width: auto;
  max-width: none;
  max-height: calc(100% - 16px);
  margin: 8px 8px 0 8px;
  box-sizing: border-box;
}
html body #gm .gm-close, html body #gm .gm-close:link, html body #gm .gm-close:visited,
html body #idb .idb-close, html body #idb .idb-close:link, html body #idb .idb-close:visited,
html body #qdb .qdb-close, html body #qdb .qdb-close:link, html body #qdb .qdb-close:visited {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  float: right;
  z-index: 2;
  width: 44px;
  height: 44px;
  margin: -8px -8px 0 4px;
  border: 1px solid rgba(58, 36, 17, .35);
  border-radius: 50%;
  background: rgba(58, 36, 17, .18);                   /* shaded see-through circle */
  box-shadow: 0 1px 6px rgba(0, 0, 0, .35);
  color: #3a2411;
  font-size: 40px;
  font-weight: bold;
  line-height: 42px;
  text-align: center;
  text-shadow: 0 0 3px #efe3cf, 0 0 6px #efe3cf;     /* readable over the dark item-card header too */
}

/* home: test server info */
html body div.testsrv div.ts-steps { flex-direction: column; align-items: center; gap: 18px; }
html body div.testsrv div.ts-step { max-width: none; width: 100%; }
html body div.testsrv div.ts-step a.ts-shot { height: auto; }
html body div.testsrv div.ts-arrow { transform: rotate(90deg); margin: 0; }
html body div.testsrv div.ts-rates { flex-direction: column; gap: 14px; }
html body div.testsrv div.ts-rate { min-width: 0; }

/* ---- Server Info: bots section (2026-10-22) ---- */
html body div.srvinfo div.si-glance { grid-template-columns: repeat(2, 1fr); margin-top: -10px; }
html body div.srvinfo div.si-bots { grid-template-columns: 1fr; }
html body div.srvinfo div.si-daybots { grid-template-columns: repeat(2, 1fr); }
html body div.srvinfo div.si-mix div.n { grid-template-columns: repeat(2, 1fr); }
html body div.srvinfo div.si-live a:link, html body div.srvinfo div.si-live a:visited { margin-left: 0; }