*, *::before, *::after { box-sizing: border-box; }
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, b, u, i, center,
dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0; padding: 0; border: 0;
  font-size: 100%; font: inherit; vertical-align: baseline;
}
ol, ul { list-style: none; }


/* Game screen stays locked at 16x9, no matter the browser dimensions, or if fullscreen/normal.
 * Font size always in proportion to game screen size. */
:root {
  --fontScale: 1.0;  /* Modifiable by GUI */
  --leftPaneWidth: 56.25%;  /* Modifiable by GUI */

  --gameWidthVw: calc(min(100vw, 70vh * 16 / 9));
  --gameHeightVw: calc(var(--gameWidthVw) * 9 / 16);
  --rootFontSize: calc(var(--gameWidthVw) / 40 * var(--fontScale));
  --borderSize: calc(var(--gameWidthVw) / 120);  /* this should NOT scale with font size */
  --mainPaddingSize: calc(var(--gameWidthVw) / 120);  /* this should NOT scale with font size */
  --rightPaneWidth: calc(100% - var(--leftPaneWidth));
}
/* Minimal full screen changes */
@media all and (display-mode: fullscreen) {
  :root {
    --gameWidthVw: calc(min(100vw, 100vh * 16 / 9));
  }
}

@font-face {
  font-family: "Rosarivo";
  src: url("Rosarivo-Edited.woff");
}


html {
  font-family: 'Rosarivo', serif;
  font-size: var(--rootFontSize);
}

body {
  height: 100vh;
  background-color: #333333;
  xkbackground radial-gradient(#000000, #5f401b);
  xkbackground: radial-gradient(90deg,rgba(95, 64, 27, 1) 0%, rgba(15, 15, 15, 1) 50%);
  background: radial-gradient(ellipse closest-side, rgba(95, 64, 27, 1) 0%, rgba(15, 15, 15, 1) 90%);

  display: flex;
  align-items: center;
}

#game {
  width: var(--gameWidthVw);
  height: var(--gameHeightVw);

  margin:auto;

  background-color: black;
  color: white;
  display: flex;
}

#pane_left {
  width: var(--leftPaneWidth);
  height: 100%;
  border-right: var(--borderSize) solid #462600;
  xbackground-color: red;
  xoverflow: scroll;
}

#pane_right {
  width: var(--rightPaneWidth);
  height: 100%;
  display: flex;
  flex-direction: column;
  xoverflow: scroll;
}

#pane_right_text2 {
  height: 100%;
}

#pane_right_map {
  height: calc(var(--gameHeightVw) * 7 / 9);
}

#pane_right_map_legend {
  height: calc(var(--gameHeightVw) * 2 / 9);
  xoverflow: scroll;
}


.text_scroller {
  width: 100%;
  max-height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-color: #462600 #000;
  xxborder: 2px solid orange;
}

.text_hcenter {
  text-align: center;
}

.text_vcenter {
  height: 100%;
  display: flex;
  align-items: center;
  xborder: 2px solid green;
}


#map_canvas {
  display: block;
  width: 100%;
  height: 100%;
  xxaspect-ratio: 1 / 1;
  background-color: #118888;  /* fog of war?? */
  border: var(--borderSize) solid #462600;
  border-left: none;
}

.text {
  width: 100%;
  padding: 0 var(--mainPaddingSize);
  word-wrap: break-word;
  line-height: 1.6;
  xbackground-color: gray;

  p {
    xborder: 1px solid gray;
  }
  p.centered {
    text-align: center;
    margin-bottom: 1rem;  /* If we are over a menu */
  }
  p:not(.menu_choice) + p:not(.menu_choice) {
    margin-top: 1rem;
    xborder: 1px solid green;
  }

  p.menu_choice {
    border: .05rem solid #462600;
    xpadding-left: var(--mainPaddingSize);
  }
  p.menu_selected {
    background-color: #462600;
  }
  p.menu_choice span.thumb {
    min-width: calc(var(--gameWidthVw) * 0.04);
    margin-right: var(--mainPaddingSize);
    xbackground-color: red;
    display: inline-block;
  }
  p.menu_selected span.thumb:before {
    font-family: "Rosarivo" !important;
    content: "\00fd";
  }
}


/* Costmetics, colors */

a {
  color: #e28743;
  text-decoration-color: #462600;
  text-underline-offset: .2rem;
}

.dmg {
  color: #e28743;
}
.crit {
  color: #e10529;
}
.heal {
  color: #96e48c;
}

.equipped:before {
    content: "[X]";
    display: block;
    float: right;
}
.not_equipped:before {
    content: "[ ]";
    display: block;
    float: right;
}


.enemybio {
  float: right;
  margin-left: auto;
  width: 20%;
  aspect-ratio: 1/1;
}

.gp {
  display: inline-block;
  line-height: normal;
  border: .1rem solid #6b3413;
  border-radius: .5rem;
  padding: 0 .2rem;
}