html {
  height: 100%;
  -webkit-tap-highlight-color: transparent;
}

.oogwrap {
  display: flex;
  flex-direction: column;
}

.oogwrap.side-drawer-host {
  flex-direction: row;
  align-items: stretch;
  height: 100%;
  min-height: 0;
}

.right-sidebar-content {
  display: flex;
  flex-direction: column;
  width: 180px;
  min-width: 180px;
  height: 100%;
  min-height: 0;
}

body {
  height: 100%;
  margin: 0px;
  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;
}

.battle-window-bar-wrapper span {
  flex: 1 1 auto;
  font-size: 10px;
}

/* The bar is drawn over a dark track, so the width of the green part reads as how much
   health the creature has left */
.battle-window-bar-wrapper {
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid black;
  margin: 2px 0px;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.18), inset 0 -1px 1px rgba(0, 0, 0, 0.55);
  overflow: hidden;
}

.battle-window-target-stats-bar {
  height: 7px;
}

.health {
  background:
    linear-gradient(to bottom, rgba(255, 255, 255, 0.66) 0%, rgba(164, 255, 164, 0.28) 28%, rgba(0, 232, 34, 0.9) 52%, rgba(0, 136, 14, 0.96) 100%);
  border: 1px solid black;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.7), inset 0 -1px 1px rgba(0, 44, 0, 0.65);
}


/* The body of the battle window is a plain column: the type buttons on top and the list
   under them, both spanning the window. The generic body centres its children and pads
   them in, which left the list floating in the middle of its own window. */
#battle-window > .body {
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: stretch;
  padding: 2px;
  /* The generic body always reserves room for a scrollbar, which ate ten pixels off the
     right of every row. Here it only shows up when there is something to scroll. */
  overflow-y: auto;
}

.battle-window-list {
  width: 100%;
}

/* The row of buttons that picks which kinds of creature the list shows. It sits at the
   top of the body, so minimising the window puts it away with the list. */
.battle-window-types {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  margin-bottom: 2px;
  background-image: url("../png/bg2.png");
}

.battle-window-types > button {
  width: 22px;
  height: 20px;
  font-size: 11px;
  color: white;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid black;
  cursor: pointer;
}

.battle-window-types > button:hover {
  border-color: white;
}

/* A kind that is switched off: the list is not showing it */
.battle-window-types > button.off {
  opacity: 0.35;
}

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

/* The border and the gap between rows have to fit inside the width, or the row hangs off
   the right edge and the two sides stop matching */
.battle-window-target-wrapper {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  width: 100%;
  background-image: url("../png/bg2.png");
  margin: 0px 0px 2px 0px;
  border: 1px solid black;
}

.battle-window-target-title {
  color: rgba(0, 255, 0);
}

/* The sprite sits at the left of the row and stays small: the name and the bar are what
   the row is for */
.battle-window-target-canvas {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

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

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

.battle-window-target-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.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;
}

/* What the game says over the screen sits straight on the world with nothing behind it.
   The outline around the letters is what keeps them readable over whatever they land on. */
#server-message {
  display: none;
  background-color: transparent;
  border: 0px;
  text-shadow: 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black;
  padding: 4px;
  left: 0; 
  right: 0; 
  margin-left: auto; 
  margin-right: auto; 
  max-width: 256px;
  top: 50%;
  text-align: center;
  position: absolute;
}

/* Level up/down: same centered spot as the loot drop announcement (#server-message) right
   above it, just low enough to clear one line of that text -- so killing something that both
   drops loot and levels you up at once shows both instead of one overwriting the other. */
#level-message {
  display: none;
  color: white;
  background-color: transparent;
  border: 0px;
  text-shadow: 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black;
  padding: 4px;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  max-width: 256px;
  top: calc(50% + 22px);
  text-align: center;
  position: absolute;
}

.checkboxes {
  display: flex;
  justify-content: center;
}

.checkboxes label {
  display: inline-block;
  padding-right: 10px;
  white-space: nowrap;
  flex: 1 1 auto;
}

.checkboxes input {
  vertical-align: middle;
}

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

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

.close-button-transparent {
  position: absolute;
  right: 6px;
  border: 0px;
  background: none;
}

/* 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 {
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  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;
  outline: none;
  transition: none;
}

button:active {
  filter: none;
}

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;
}

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

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

#game-wrapper {
  display: none;
  height: 100%;
  min-width: 992px;
  min-height: 508px;
  transform-origin: top left;
}

#game-wrapper .column {
  display: flex;
  width: 180px;
  min-width: 180px;
  flex-direction: column;
  justify-content: flex-start;
  background-image: url("../png/bg2.png");
  max-height: 100%;
  flex: 1 1 auto;
  /* A flex item refuses to shrink below its content unless it is told it may. Without
     this the column keeps the full height of the windows inside it and they run off the
     bottom of the screen, taking the last skills with them. */
  min-height: 0;
  overflow-y: auto;
}

.side-drawer {
  --drawer-closed-width: 20px;
  --drawer-open-width: 202px;
  display: flex;
  position: relative;
  align-items: stretch;
  box-sizing: border-box;
  flex: 0 0 var(--drawer-closed-width);
  max-width: var(--drawer-closed-width);
  min-width: var(--drawer-closed-width);
  overflow: hidden;
  height: 100%;
  background-image: url("../png/bg3.png");
  transition: flex-basis 120ms ease, max-width 120ms ease, min-width 120ms ease;
}

.side-drawer.open {
  flex: 0 0 var(--drawer-open-width);
  max-width: var(--drawer-open-width);
  min-width: var(--drawer-open-width);
  background-image: url("../png/bg2.png");
}

.side-drawer-left.open { padding-right: 20px; }
.side-drawer-right.open { padding-left: 20px; }

/* The grip stays on the game/chat edge of its own drawer, including while collapsed. */
.side-drawer-toggle {
  position: absolute;
  top: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 16px;
  min-width: 16px;
  height: 24px;
  margin: 0;
  padding: 0;
  background: url("../png/button_gray.png") no-repeat left center / 200% 100%;
  image-rendering: pixelated;
  border: 1px solid #595b58;
  border-radius: 2px;
  cursor: pointer;
  z-index: 20;
}

.side-drawer-toggle::after {
  content: "";
  width: 12px;
  height: 12px;
  background: url("../png/window/scrollbar_arrow_left.png") center / 12px 12px no-repeat;
  pointer-events: none;
}

.side-drawer-left .side-drawer-toggle { right: 2px; }
.side-drawer-right .side-drawer-toggle { left: 2px; }
.side-drawer-left:not(.open) .side-drawer-toggle::after,
.side-drawer-right.open .side-drawer-toggle::after {
  background-image: url("../png/window/scrollbar_arrow_right.png");
}

.side-drawer-toggle:hover {
  border-color: #b1b5ab;
  background-image: url("../png/button_gray.png");
}
.side-drawer-toggle:focus-visible { outline: 1px solid #d8c77c; outline-offset: -2px; }
.side-drawer-toggle:active { background-position: right center; filter: none; }
.side-drawer-toggle:active::after { background-image: url("../png/window/scrollbar_arrow_left_pressed.png"); }
.side-drawer-left:not(.open) .side-drawer-toggle:active::after,
.side-drawer-right.open .side-drawer-toggle:active::after {
  background-image: url("../png/window/scrollbar_arrow_right_pressed.png");
}

.side-drawer::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #595c57;
  box-shadow: inset 1px 0 #0c0d0c;
  pointer-events: none;
}

.side-drawer-left::after { right: 0; }
.side-drawer-right::after { left: 0; }
.side-drawer-right .side-drawer-column { order: 1; }
.side-drawer-right .side-drawer-divider { order: 2; }

.side-drawer-divider {
  display: none;
  flex: 0 0 2px;
  width: 2px;
  background: #595c57;
  box-shadow: inset 1px 0 #0c0d0c;
}

.side-drawer.open .side-drawer-divider {
  display: block;
}

/* Keep closed columns measurable so allocation can distinguish empty and full drawers. */
#game-wrapper .side-drawer-column {
  display: flex;
  box-sizing: border-box;
  width: 180px;
  min-width: 180px;
  max-width: 180px;
  flex: 0 0 180px;
  height: 100%;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
}

.side-drawer:not(.open) .side-drawer-column {
  visibility: hidden;
  pointer-events: none;
}

body:not(.mobile-layout) #game-wrapper > .oogwrap { flex-shrink: 0; }
body:not(.mobile-layout) #game-wrapper .canvas-wrapper { min-width: 0; min-height: 0; }

#game-wrapper .side-drawer.open .side-drawer-column > .window {
  width: 100%;
  flex: 0 0 auto;
}

#game-wrapper .main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1 1 auto;
  min-width: 0;
}

#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;
  background-image: url("../png/bg.png");
}

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

.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;
}

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

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

#layout-restore-overlay {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  z-index: 999999;
  cursor: wait;
  background: transparent;
}

#debug-statistics {
  z-index: 1000;
  margin: 8px;
  position: absolute;
  font-size: 10px;
  left: 0px;
  top: 0px;
}

#hunting-analyser-overlay {
  z-index: 1000;
  margin: 8px;
  position: absolute;
  font-size: 10px;
  right: 0px;
  top: 0px;
  color: #00ff00;
  text-align: right;
  pointer-events: none;
}