@font-face {
  font-family: 'Martel';
  src: url('martel.ttf') format('truetype');
}
@font-face {
  font-family: 'Verdana';
  src: url('verdana.ttf') format('truetype');
}
@font-face {
  font-family: 'Arial Black';
  src: url('ariblk.ttf') format('truetype');
}

.gamefont {
  font-family: Verdana, Tahoma;
  font-weight: bold;
  font-size: 8pt;

  font-smooth: never;
  -webkit-font-smoothing: none;
  text-rendering: optimizeSpeed;

  /*
  Inner stroke :(
  -webkit-text-stroke-width: -1px;
  -webkit-text-stroke-color: black;
  */

  /* Outer stroke */
  text-shadow:
    -1px -1px 0 #000,  
     1px -1px 0 #000,
    -1px  1px 0 #000,
     1px  1px 0 #000;
  letter-spacing: 0.60px;
  font-kerning: none;
  
}
.panelfont, input[type=text], input[type=password], label, .titlebar, .window > .content > p {
  font-family: Verdana;
  font-weight: bold;
  font-size: 8pt;
  font-kerning: none;
  color: white;
}

label {
  line-height: 15pt;
}

input[type=text], input[type=password] {
  background-color: rgb(30%, 30%, 30%);
  border: 1px solid rgb(20%, 20%, 20%);
  border-top: 1px solid rgb(70%, 70%, 70%);
  border-left: 1px solid rgb(70%, 70%, 70%);
  min-height: 20px;

  border-image-source: url(/pic/4?x=308&y=96&w=12&h=12);
  border-image-source: image(/pic/4#xywh=308,96,12,12);
  border-image-slice: 1 fill;
  border-image-width: 1px;
  border-image-repeat: round;

  transform: translateY(1px);
  padding-left: 3px;
  padding-right: 3px;
}
input[type=text]:focus, input[type=password] {
  outline: 0;
  
}

.minifont, button {
  color: rgb(75%, 75%, 75%);
  font-family: 'Arial Black';
  font-weight: bolder;
  font-size: 6pt;
  font-kerning: none;

}
button {
  background-color: rgb(40%, 40%, 40%);
  border: 1px solid rgb(20%, 20%, 20%);
  border-top: 1px solid rgb(70%, 70%, 70%);
  border-left: 1px solid rgb(70%, 70%, 70%);
  height: 20px;

  border-image-source: url(/pic/4?x=174&y=138&w=34&h=20);
  border-image-source: image(/pic/4#xywh=174,138,34,20);
  border-image-slice: 1 fill;
  border-image-width: 1px;
  border-image-repeat: round;

  margin-top: 4px;
  margin-bottom: 4px;
  margin-left: 2px;
  margin-right: 2px;
}
button div {
  margin: 1px;
  user-select: none;
}
label {
  user-select: none;

  margin-left: 4px;
  margin-right: 4px;
}
button:active {
  /*
  border: 1px solid rgb(70%, 70%, 70%);
  border-top: 1px solid rgb(20%, 20%, 20%);
  border-left: 1px solid rgb(20%, 20%, 20%);
  */
  border-image-source: url(/pic/4?x=174&y=158&w=34&h=20);
  border-image-source: image(/pic/4#xywh=174,158,34,20); 
}
button:active div {
  text-offset: 1px;
  transform: translateY(1px) translateX(1px);
}
button:focus {
  outline: 0;
}
button:focus div {
  margin: 0px;
  border: 1px solid rgb(40%, 40%, 40%);
}
h1 {
  font-family: Martel;
  font-size: 100pt;
  font-weight: normal;


  background: linear-gradient(to bottom, yellow, orange, red); /* or -webkit-linear-gradient */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;


  -webkit-text-stroke-width: 2px;
  -webkit-text-stroke-color: black;
}
body {
  background-color: rgb(40%, 40%, 40%);
  /* background-image: url(/pic/4?x=0&y=0&w=96&h=96); */
  background-image: url(/pic/1);
  background-size: 100% 100%;
}
.panelfont::selection, .gamefont::selection, .minifont::selection, input[type=text]::selection, input[type=password]::selection {
  background-color: rgb(40%, 40%, 40%);
  color: inherit;
}
h1::selection {
  text-shadow: 0px 0px 2px rgb(255,0,0);
  -webkit-text-fill-color: opaque;
  -webkit-background-clip: none;
  font-weight: bolder;
  /*background: rgb(0,0,0);*/
}
/*
.titleshadow {
  filter: drop-shadow(
      -12px -12px 0px yellow
       12px -12px 0px yellow,
      -12px  12px 0px orange,
       12px  12px 0px orange);
}
*/

.window > .titlebar, .window-controls-overlay > .titlebar {
    border-image-source: url(/pic/4?x=106&y=183&w=8&h=17);
    border-image-source: image(/pic/4#xywh=106,183,8,17);
    border-image-slice: 2 4 4 3; /* not using fill, that's in the background image */
    border-image-width: 2px 4px 4px 3px; /* match the above with top, right, bottom, left; the fill is what remains */
    border-image-repeat: round;

    background-image: url(/pic/4?x=114&y=186&w=96&h=13); /* options: y 183, h 17 or y 186 height 13 */
    border-style: solid;

    text-align: center;
    color: rgb(60%, 60%, 60%);

    user-select: none;
    border-width: 2px 4px 4px 3px;
    min-width: 8px;
    height: 11px; /* 17px total - 6px for border image */
    line-height: 17px;
}
.window {
    border-image-source: url(/pic/4?x=256&y=0&w=8&h=96);
    border-image-source: image(/pic/4#xywh=256,0,8,96);
    border-image-slice: 0 4 0 4 fill;
    border-image-width: 0px 4px 0px 4px;
    border-image-repeat: round;

    background-image: url(/pic/4?x=0&y=0&w=96&h=96);

    min-width: 100px;

    position: relative;
}
.window > .content {
    margin: 10px;
    overflow: hidden;
}
.window > .bottombar {
    border-image-source: url(/pic/4?x=98&y=193&w=8&h=4);
    border-image-source: image(/pic/4#xywh=98,193,8,4);
    border-image-slice: 4 fill;
    border-image-width: 4px 4px 4px 4px;
    border-image-repeat: round;

    background-image: url(/pic/4?x=2&y=193&w=96&h=4);

    width: 100%;
    height: 4px;

    position: absolute;
    bottom: 0;
}

.background {
    border-image-source: url(/pic/4?x=0&y=0&w=96&h=96);
    border-image-source: image(/pic/4#xywh=0,0,96,96);
    border-image-slice: 1 fill;
    border-image-width: 1px;
    border-image-repeat: round;
}
.button {
    border-image-source: url(/pic/4?x=174&y=138&w=34&h=20);
    border-image-source: image(/pic/4#xywh=174,138,34,20);
    border-image-slice: 1 fill;
    border-image-width: 1px;
    border-image-repeat: round;
}

#map.isometric {
    transform: scaley(0.7) rotate(45deg);
}

.window-controls-overlay {
    /* titlebar per: https://web.dev/window-controls-overlay/ */

    position: fixed;
    color: #aaa;
    background-color: #444444; /* match theme-color in index.html */
    left: env(titlebar-area-x, 0);
    top: env(titlebar-area-y, 0);
    width: env(titlebar-area-width, 100%);
    height: env(titlebar-area-height, 17px);

    /* Zooming the page zooms in the overlay content as well. We should keep the font size smaller. */
    /* However this seems tricky to do: manipulating 'zoom' or 'font-size' from just CSS might be infeasible. */
    /* Some starting points: https://stackoverflow.com/questions/5063489/how-can-you-get-the-css-pixel-device-pixel-ratio */
    /* However: We can allow titlebar to grow instead using min-height. */

    -webkit-app-region: drag;
    app-region: drag;
}

.window-controls-overlay > button, .window-controls-overlay > .titlebar > button, .window-controls-overlay > .titlebar > .button-area, .window-controls-overlay > .button-area {
    -webkit-app-region: no-drag;
    app-region: no-drag;
}

.window-controls-overlay > .titlebar {
    height: calc(env(titlebar-area-height, 17px) - 6px); /* 6px = titlebar margins derived from image size */
    line-height: calc(env(titlebar-area-height, 17px) - 6px); /* 6px = titlebar margins derived from image size */
    min-height: 17px;
    border-image-width: 2px 4px 4px 3px;
}

.window-controls-overlay > .button-area, .window-controls-overlay > .titlebar > .button-area {
    position: absolute;
    top: 0px;
    left: calc(100% - 100px);
    width: 100px;
    display: inline-block;
}

/* For macOS: */
.window-controls-overlay > .titlebar.window-controls-left {
    /*background-image: linear-gradient(90deg, #36c, 45%, #131313, 90%, #36c);*/
    text-align: center;
}

/* For Windows: */
.window-controls-overlay > .titlebar.window-controls-right {
    /*background-image: linear-gradient(90deg, #36c, #131313, 33%, #36c);*/
    text-align: left;
}

@media (display-mode: window-controls-overlay) {
    .window-controls-overlay {
        background-color: #000;
        /* max-height: env(titlebar-area-height, inherit);
        overflow-y: hidden; */
        /* Due to font size giving us trouble, let's not limit the height. */
    }
    .window-controls-overlay > .titlebar {
        /* Due to font size giving us trouble, let's not limit the height.
        max-height: env(titlebar-area-height, 9px);
        overflow-y: hidden; */
        line-height: calc(env(titlebar-area-height, 17px) - 6px); /* 6px = titlebar margins derived from image size */
        padding-left: 4px;
    }
    .window-controls-overlay-content-spacing {
        display: block;
        width: 100%;
        height: env(titlebar-area-height, 40px);
    }
    .window-controls-overlay > .button-area, .window-controls-overlay > .titlebar > .button-area {
        left: calc(env(titlebar-area-width, 0px) - 100px);
    }
}


/* Tell browser to mess with fonts less */
/* https://github.com/DavidBuchanan314/bitmap-font-css */
@media
  (resolution: 1dppx),
  (resolution: 2dppx),
  (resolution: 3dppx),
  (resolution: 4dppx)
{
    /* Only do this when scaling ratio is integer. */
    body {
        text-size-adjust: none;
        -webkit-text-size-adjust: none;
    }
    body {
        -webkit-font-smoothing: none;
        -moz-osx-font-smoothing: grayscale;
        font-smooth: never;
    }
    /* Disable subpixel antialiasing. However, doing this makes the titlebar with position:fixed offset from top left. */
    /* body {
        filter: contrast(100.00001%);
    } */
}