html {
  height: 100%;
  /* iOS Safari "text autosizing" inflates small text in LANDSCAPE by a
     per-cluster multiplier it recomputes on reflow — with the game's 10-11px
     UI text the mobile chat visibly hopped between sizes as messages arrived
     (NotiK, iPhone, 2026-08-28; portrait unaffected, Android unaffected).
     A game HUD must never be auto-inflated: pin the adjustment. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

.oogwrap {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100%;
}

/* Extra columns beside the game screen (PO 15/10/2026): Interface.__updateExtraColumns
   shows them (inline display) only when the gray around the game screen fits a whole
   column without shrinking it. Not .oogwrap: mobile.css forces every .oogwrap visible. */
.extra-column-wrap {
  flex-direction: column;
  overflow: hidden;
  height: 100%;
  flex: 0 0 auto;
}

body.m-ui .extra-column-wrap {
  display: none !important;
}

/* Divider between an extra column and the fixed column beside it (PO 15/10/2026):
   a sunken groove, a dark line with a light one inside. Drawn over the edge (and
   over the windows in the column) so the column stays 216 wide. */
.extra-column-wrap {
  position: relative;
}

.extra-column-wrap::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  z-index: 5;
  pointer-events: none;
}

#extra-column-left::before {
  left: 0;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.85) 0 1px, rgba(255, 255, 255, 0.14) 1px 2px);
}

#extra-column-right::before {
  right: 0;
  background: linear-gradient(to left, rgba(255, 255, 255, 0.14) 0 1px, rgba(0, 0, 0, 0.85) 1px 2px);
}

body {
  height: 100%;
  margin: 0px;
  /* The page itself must NEVER scroll in-game — any 1px overflow (browser
     zoom rounding, odd window heights) let a selection-drag autoscroll the
     whole UI incl. the HP/mana arcs (Evolone 2026-07-15). Mobile has had
     this since day one; body.force-desktop overrides with !important. */
  overflow: hidden;
  font-family: Verdana, "Sans-Serif";
  font-weight: bold;
  text-shadow: 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black;
  font-size: 12px;
  color: white;
  scrollbar-width: thin;
  scrollbar-color: rgba(24, 24, 24, 1) rgba(51, 51, 51, 1);
  background-image: url("/png/bg2.png");
}

#battle-window-target {
  display: none;
  align-items: center;
}

/* Desktop battle-window: default to 2 creature rows, let the user
   drag-resize vertically to show more. Each row is 40px + 1px margin;
   2 rows + 8px top padding ≈ 90px. `resize: vertical` adds a native
   drag grip at the bottom edge so players who want to see more of
   their battle list can pull it taller; the inline style that the
   drag writes persists until the next page load (fresh session goes
   back to the 90px default, which is the intended behavior for a
   "compact by default" window).
   Mobile keeps its own max-height via the mobile.css rule. */
/* Battle-list filter (owner 2026-08-25). Lives in #battle-filter-modal, a
   registered modal — the manager owns the panel chrome, centring, see-through
   and mobile sizing, so only the ROWS need styling here. */
.battle-filter-title {
  font-weight: bold;
  opacity: 0.75;
  margin-bottom: 5px;
  letter-spacing: 0.4px;
}
.battle-filter-row {
  display: flex;
  align-items: center;
  gap: 7px;
  /* Roomy enough to be a comfortable touch target without a media query. */
  padding: 5px 2px;
  cursor: pointer;
  white-space: nowrap;
}
.battle-filter-row input {
  margin: 0;
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
}
.battle-filter-sep {
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  margin: 6px 0 5px 0;
}

#battle-window > .body {
  height: 90px;
  resize: vertical;
  overflow: auto;
}

/* Desktop friend-window: same treatment as battle-window — don't
   stretch to show every friend by default. Start compact (~5 rows
   @ 16px) and let the user drag the bottom edge to expand. */
#friend-window > .body {
  height: 90px;
  resize: vertical;
  overflow: auto;
}

/* Hide the native resize grip (the little yellow/grey triangle the
   browser paints in the bottom-right of resizable elements) while
   keeping drag-resize functional. The hit area is still at the
   bottom-right corner — player drags there, window grows — they just
   don't see an ugly decoration in the corner. Applied globally so
   ANY element with `resize: vertical` / `resize: both` gets this. */
::-webkit-resizer {
  background-color: transparent;
  background-image: none;
  border: none;
}

/* Battle Window Bars */
.battle-window-bar-wrapper {
  display: flex;
  flex-direction: column;
}

.bar-holder {
  position: relative;
  height: 12px;
  background-color: #222;
  border: 1px solid black;
  margin: 1px 0;
}

.battle-window-target-stats-bar {
  height: 100%;
  /* Width is set by JS */
}

.health {
  background: rgb(0, 192, 0);
  /* Slightly darker green for readability? Or keep bright? Stick to Tibia green: 0, 192, 0 usually or 0, 255, 0 */
  background: #00C000;
}

.mana {
  background: #0000C0;
}

.bar-text {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  text-align: center;
  font-size: 9px;
  color: white;
  line-height: 11px;
  text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
  pointer-events: none;
}

.battle-window-target-wrapper:hover {
  border: 1px solid white;
  cursor: pointer;
}

.battle-window-target-wrapper {
  display: flex;
  width: 100%;
  background-image: url("/png/bg2.png");
  margin: 0px 0px 1px 0px;
  border: 1px solid black;
  height: 40px;
}

.battle-window-target-title {
  color: rgba(0, 255, 0);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.battle-window-target-sub {
  font-size: 10px;
  color: rgba(200, 200, 200, 0.8);
}

.battle-window-target-canvas {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
}

.battle-window-target-canvas>canvas {
  width: 32px;
  height: 32px;
  display: block;
}

.battle-window-target-stats {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  padding-left: 4px;
}

.visible {
  visibility: visible;
  opacity: 1;
}

.hidden {
  visibility: hidden;
  opacity: 0;
}

.zone-sub {
  font-size: 24px;
  color: white;
  font-family: Goudy Old Style;
}

.zone-title {
  font-variant: small-caps;
  font-family: Arno Pro;
  letter-spacing: 5px;
}

#zone-message hr {
  color: gold;
  padding: 0px;
  margin: 0px;
  background: gold;
}

#zone-message {
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  font-size: 36px;
  color: gold;
  top: 20%;
  text-align: center;
  position: absolute;
  z-index: 10000000;
  padding: 4px;
}

#server-message {
  display: none;
  /* RESTORED to the pre-2026-08-11 original (owner 2026-08-13: "change it back
     to exactly how it was"). Three August passes had drifted it: the backdrop
     went .5 -> removed -> .3 -> .4, the 1px border was dropped and never came
     back, and a four-direction black pixel outline was added to the text to
     compensate for the missing box. All of that is reverted — .5 backdrop,
     border back, no text-shadow. level-screenshot.js paints this box from
     getComputedStyle, so the screenshot pass follows automatically. */
  background-color: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(0, 0, 0, 0.5);
  border-radius: 8px;
  padding: 4px;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  max-width: 256px;
  top: 50%;
  text-align: center;
  position: absolute;
}

.checkboxes {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px 12px;
}

.checkboxes label {
  display: inline-block;
  white-space: nowrap;
  flex: 0 0 auto;
}

.checkboxes input {
  vertical-align: middle;
}

.checkboxes label span {
  vertical-align: middle;
}

.settings-section-label {
  font-size: 11px;
  font-weight: bold;
  color: #ccc;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: block;
  margin-bottom: 2px;
}

.close-button-transparent:hover {
  font-weight: bold;
  color: grey;
  border: none;
  box-shadow: none;
}

.close-button-transparent {
  position: absolute;
  right: 4px;
  top: 2px;
  border: 0px;
  background: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Unified chrome-button box (owner 2026-07-03: X/</◐ misalign + tiny on
     mobile): all three header buttons share one fixed box so they can never
     drift, and the slot offsets are multiples of the box width. */
  width: 24px;
  height: 24px;
  font-size: 16px;
  line-height: 1;
  z-index: 3;
}

/* Window header controls (owner 2026-09-30 picked "back names its target").
   Right: one bar (.modal-chrome, ModalManager.__chromeInsert) with the
   see-through toggle and the X as boxed buttons; flexbox owns spacing, so a
   hidden button takes no room. Left: the back button, a pill naming the window
   it returns to ("< Hub"). The symbols are drawn SVG (CHROME_ICON), so the three
   match at every size, which the old text glyphs never did. The manager pads
   the header's sides to clear both (ModalManager.__fitHeader). */
.modal-chrome {
  position: absolute;
  top: 4px;
  right: 5px;
  display: flex;
  align-items: center;
  gap: 4px;
  z-index: 5;
}
.modal-chrome button {
  position: static;
  width: 24px;
  height: 24px;
  padding: 0;
  margin: 0;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.06);
  color: #ddd6c6;
  cursor: pointer;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.modal-chrome button:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
}
.modal-chrome .modal-x-btn:hover {
  background: #8a2b22;
  border-color: #c24a3f;
}
/* See-through on: the button stays lit gold. */
.modal-chrome .modal-seethrough-btn.active {
  background: rgba(229, 196, 106, 0.2);
  border-color: rgba(229, 196, 106, 0.75);
  color: #f4da8c;
}
.modal-chrome svg {
  display: block;
  width: 12px;
  height: 12px;
}

.modal-back-btn {
  position: absolute;
  top: 4px;
  left: 5px;
  z-index: 5;
  height: 24px;
  margin: 0;
  padding: 0 10px 0 6px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.07);
  color: #efe6cc;
  font-size: 12px;
  font-weight: bold;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
}
.modal-back-btn:hover {
  background: rgba(229, 196, 106, 0.18);
  border-color: rgba(229, 196, 106, 0.65);
  color: #fff4d0;
}
.modal-back-btn svg {
  display: block;
  width: 10px;
  height: 10px;
}

/* A header with controls is tall enough to hold them (4px + 24px + 4px). */
.modal.modal-chromed > .modal-header {
  min-height: 32px;
  box-sizing: border-box;
  padding-top: 8px;
  padding-bottom: 8px;
}

/* Touch devices: 34px tap targets. */
@media (pointer: coarse) {
  .modal-chrome { top: 3px; right: 3px; gap: 6px; }
  .modal-chrome button {
    width: 34px;
    height: 34px;
    border-radius: 7px;
  }
  .modal-chrome svg { width: 15px; height: 15px; }
  .modal-back-btn {
    top: 3px;
    left: 3px;
    height: 34px;
    padding: 0 13px 0 9px;
    border-radius: 17px;
    font-size: 14px;
  }
  .modal-back-btn svg { width: 12px; height: 12px; }
  .modal.modal-chromed > .modal-header { min-height: 40px; padding-top: 11px; padding-bottom: 11px; }
}

/* Styling for input */
input {
  background-image: url("/png/bg3.png");
  height: 14px;
  outline: none;
  padding: 4px;
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
  font-weight: bold;
  border: 0px;
}

hr {
  border: 0;
  height: 1px;
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0), grey, rgba(0, 0, 0, 0));
  margin: 8px;
}

/* Styling for buttons */
button {
  font-size: 10px;
  color: white;
  cursor: pointer;
  font-weight: bold;
  background-image: url("/png/bg3.png");
  border: 1px solid black;
  margin: 2px;
  padding: 4px;
  border-radius: 4px;
}

button:hover {
  border: 1px solid white;
  background-image: url("/png/bg2.png");
}

button:disabled {
  color: grey;
}

button:disabled:hover {
  border: 1px solid grey;
  box-shadow: 0 0 4px 1px grey;
}

/* Styling for custom buttons */
button.symbol-button.small {
  font-size: 8px;
}

button.symbol-button {
  padding: 0px;
  width: 18px;
  height: 18px;
  min-width: 18px;
  max-width: 18px;
}

/* A "+" or "−" drawn in whole pixels (window minimize buttons via
   InteractiveWindow.setMinimizeSymbol, the friends "+"). The 8px bold Arial
   "+" glyph rendered its vertical stroke across two pixels (blurred) and its
   bottom arm a pixel shorter than the top (owner report, measured
   2026-09-26). Bars sit at 50% plus or minus whole pixels, so they land on
   pixels in any even-sized button: a 5x5 plus with 1px strokes, arms of 2px
   each way. The text stays for screen readers and is hidden (!important:
   the mobile container header sets its own font-size). */
button.symbol-button.sym-drawn {
  position: relative;
  font-size: 0 !important;
}

button.symbol-button.sym-drawn::before,
button.symbol-button.sym-drawn.sym-plus::after {
  content: "";
  position: absolute;
  background: currentColor;
  pointer-events: none;
}

button.symbol-button.sym-drawn::before {
  left: calc(50% - 2px);
  top: 50%;
  width: 5px;
  height: 1px;
}

button.symbol-button.sym-drawn.sym-plus::after {
  left: 50%;
  top: calc(50% - 2px);
  width: 1px;
  height: 5px;
}

.symbol-button-long {
  padding: 0px;
  min-width: 24px;
}

.close-button {
  position: absolute;
  right: 6px;
}

#game-wrapper {
  display: none;
  height: 100%;
  /* Floor = the children's natural minimum: 180px (left column) + 480px (canvas
     min, .canvas-wrapper) + 180px (right column) = 840px. The old 992px forced
     ~152px MORE than the layout actually needs, so any viewport between 840 and
     992 effective CSS px (e.g. a 1366x768 laptop at 150% OS scaling ~= 911px)
     overflowed and clipped the right column off-screen — the cropped-backpack
     report. At 840 the columns always fit; the game canvas just renders a bit
     smaller (down to its 480px min) on those screens instead of being cut off.
     Below 840 it can still overflow (the canvas can't shrink past 480 without
     narrowing the world view further). */
  min-width: 840px;
  min-height: 508px;
}

#game-wrapper .column {
  display: flex;
  /* 180 by default; 216 behind the 'Wider containers' setting
     (owner 2026-08-18, found by inspecting live: "the
     backpacks look a lot better"). 180 came in with a cherry-pick and was
     never sized to its own contents. The number is arithmetic, not taste:

       MINIMAP: the block wants 216px — a 160px wrapper plus a 40px gutter
       for the button stack (which sits OUTSIDE the map at right:-30px)
       plus 8px margins. At 180 it got 124 and overflowed by 36px, silently
       clipped by the overflow:hidden below, eating the gutter.

       SLOTS: pitch is 34px (32 + 1px border each side) and a container
       body is the column minus 8+8 padding. What matters is not how MANY
       slots fit but whether the width DIVIDES the container — a 20-slot
       backpack 6-wide is three neat rows and a stranded pair (owner
       2026-08-18: "it leaves a lonely 2 container spots"). Counting the
       datapack by how many items each width lays out exactly:
         5-wide: 423 items — incl. 10 slots (x372, the commonest) and
                 20 (x36, the backpack), both EXACT
         4-wide: 303 items
         6-wide: 155 items
       So 5 per row, and 216 is the width that delivers it on EVERY
       platform: .window > .body is overflow-y:scroll, and Windows/Linux
       take ~12px of the content box for a thin scrollbar where macOS
       overlays it for free (216-16-12 = 188, still 5). This codebase has
       been bitten by that difference before — the Windows equipment-timer
       crop.

     216 therefore satisfies both constraints exactly: the minimap's 216
     and a 5-wide grid. Cost: both sidebars are .column, so 72px off the
     game canvas (1080 -> 1008 at a 1440 viewport).
     Mobile is unaffected: mobile.css overrides under its own queries.

     PO (07/10 e de novo 15/10/2026): 216 e' o PADRAO, como no Minibia, e nao
     opcao. O CSS da barra lateral (dbd0642c, 08/10) trouxe 180 de volta com o
     216 atras de body.wide-containers, classe que nenhum codigo liga: os
     containers voltaram a 4 por linha e battle/friends/stats estreitaram. */
  width: 216px;
  min-width: 216px;
  flex-direction: column;
  justify-content: flex-start;
  background-image: url("/png/bg2.png");
  max-height: 100%;
  min-height: 100%;
  flex: 0 1 auto;
  overflow: hidden;
}

/* Optimization > "Wider containers" (desktop only). 216 is not a taste
   number: it is exactly what the minimap block needs (160px wrapper + a
   40px gutter for the button stack + 8px margins — at 180 that overflows
   by 36px and is clipped by the overflow:hidden above), and it is the
   width that fits 5 slots per row on EVERY platform, including Windows
   where a thin scrollbar eats ~12px that macOS overlays for free.
   5-wide is the right grid for this datapack: it divides 423 containers
   exactly, including the 10-slot (the commonest) and the 20-slot
   backpack; 6-wide strands a lonely pair on a backpack. */
body.wide-containers #game-wrapper .column {
  width: 216px;
  min-width: 216px;
}

#game-wrapper .main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* flex-basis MUST be 0, never auto: with basis:auto the basis is the
     content's max-content width, which includes the chat's longest line
     UNWRAPPED (the .chat-message max-width cap contains a percentage, and
     percentages don't resolve during intrinsic sizing — so it doesn't cap
     here). One long console line (e.g. the security warning with a full
     IPv6) then inflates .main's basis past the free space and the flex
     shrink phase crushes BOTH sidebars (.oogwrap 180→139 / 245→168 at
     1440px), clipping the backpack column and the right panel until
     reload. Basis 0 makes the width distribution depend on the viewport
     only — chat content can never move the layout, and the resolved
     widths in the normal case are identical to what auto produced.
     Mobile is unaffected: mobile.css overrides this rule under its own
     media queries. */
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
}

#clock-time {
  font-size: 10px;
  position: absolute;
  top: 4px;
  left: 4px;
}

.main .middle {
  display: flex;
  flex: 1 1 auto;
  justify-content: center;
  align-items: flex-end;
  background-image: url("/png/bg.png");
}

.main .upper {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
  position: relative;
  background-image: url("/png/bg.png");
  overflow: hidden;
}

.main .lower {
  height: 100%;
  background-image: url("/png/bg2.png");
  overflow-x: hidden;
  max-height: 140px;
  flex: 1 1 auto;
  min-width: 0;
}

.no-select {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.canvas-notification {
  text-align: center;
  color: white;
  position: absolute;
  bottom: 2px;
  width: 100%;
  z-index: 8000;
  /* Display-only, but it layers ABOVE the mobile action bar (10002 vs
     10001) and spans the full width — without this, a visible cancel
     message steals taps from the bottom hotkeys (player report
     2026-08-18, iOS PWA: "not recognizing my finger"; surfaced when
     0b705e48e lifted the strip onto the action bar). */
  pointer-events: none;
}

.stack-wrapper {
  width: 100%;
  height: 100%;
  max-height: 100%;
}

.stack-top {
  flex: 0 0 auto;
  height: 256px;
  overflow: auto;
}

#debug-statistics {
  z-index: 1000;
  margin: 8px;
  position: absolute;
  font-size: 10px;
  left: 0px;
  top: 0px;
  /* Read-only overlay: it floats over the game screen, so without this it
     swallows clicks/taps and monsters beneath it can't be attacked
     (owner 2026-08-11). */
  pointer-events: none;
}

/* ---- regras so do TibiaOT (nao existem no Minibia) ---- */
/* Battle List Filter modal (Minibia parity) */
#battle-list-filter-modal {
  width: 220px;
  max-width: 90vw;
}
#battle-list-filter-modal .modal-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
}
#battle-list-filter-modal .modal-body label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
}
#battle-list-filter-modal .modal-body input[type="checkbox"] {
  width: 14px;
  height: 14px;
  accent-color: #00C000;
}