:root {
  --main-dark-color: black;
  --button-face: #808080;
  --button-shadow: #404040;
  --window-frame: #0a0a0a;
  --button-highlight: #ffffff;
  --active-menu: #803f41;
  --menu: #a18982;
  --border-sunken-outer: inset -1px -1px var(--button-highlight),
    inset 1px 1px var(--window-frame);
  --border-sunken-inner: inset -2px -2px var(--button-face),
    inset 2px 2px var(--button-shadow);
}
#bar,
#HUD,
.title-bar,
#hud-buttons {
  background-image: url("assets/paper.png") !important;
  background-size: 100px 100px !important;
}
.ultima {
  filter: drop-shadow(1px 3px 3px black);
  border-image-source: url("assets/ultima.png");
  border-image-slice: 32;
  border-image-width: 28px;
  border-width: 28px;
  border-style: solid;
  border-color: transparent;
  border-radius: 30px;
  background: url("assets/ultima_tile.png");
}
/* 
@font-face {
  font-family: "Alkhemikal";
  src: url("assets/Alkhemikal.ttf") format("embedded-opentype"),
    url("assets/Alkhemikal.ttf") format("woff2"),
    url("assets/Alkhemikal.ttf") format("woff"),
    url("assets/Alkhemikal.ttf") format("truetype"),
    url("assets/Alkhemikal.ttf") format("svg");
} */
@font-face {
  font-family: "OfenbacherSchwabCAT";
  src: url("assets/OfenbacherSchwabCAT.ttf") format("embedded-opentype"),
    url("assets/OfenbacherSchwabCAT.ttf") format("woff2"),
    url("assets/OfenbacherSchwabCAT.ttf") format("woff"),
    url("assets/OfenbacherSchwabCAT.ttf") format("truetype"),
    url("assets/OfenbacherSchwabCAT.ttf") format("svg");
}

@font-face {
  font-family: "NotoSansSymbols";
  src: url("assets/NotoSansSymbols.subset.ttf") format("embedded-opentype"),
    url("assets/NotoSansSymbols.subset.ttf") format("woff2"),
    url("assets/NotoSansSymbols.subset.ttf") format("woff"),
    url("assets/NotoSansSymbols.subset.ttf") format("truetype"),
    url("assets/NotoSansSymbols.subset.ttf") format("svg");
}

/* @font-face {
  font-family: "pixelmixregular";
  src: url("assets/pixelmix-webfont.woff2") format("woff2"),
    url("assets/pixelmix-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
} */

/* @font-face {
  font-family: "times16";
  src: url("assets/times-16-regular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
} */

* {
  margin: 0;
  font-family: "OfenbacherSchwabCAT", NotoSansSymbols, serif;

  /* font-family: "pixelmixregular", monospace; */
  /* font-family: "times16" !important; */
  font-smooth: never;
  -webkit-font-smoothing: none;
  color: var(--main-dark-color);
}
svg {
  font-family: NotoSansSymbols, serif;
}
html,
body {
  /* overscroll-behavior-x: none; */
  /* overscroll-behavior-y: none; */
  /* overflow-x: hidden; */
  /* overflow: hidden; */
}
* {
  /* cursor: url("assets/White_sword.cur"), auto !important; */

  cursor: url("assets/default32x32.cur"), auto !important;
  /* cursor: url("assets/SKELETON_04.gif"), auto !important; */
  /* cursor: url("assets/skell.cur"), auto !important; */
}

body {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  width: 100%;
  font-size: 30px;
  height: 100%;

  background: url("assets/paper.png");

  background-repeat: repeat;
  background-color: rgb(77, 88, 79);
  background-size: 120px 120px;
  /* backdrop-filter: sepia(100%) contrast(0.9) hue-rotate(-20deg) brightness(0.15); */
}

#scene {
  display: flex;
  width: 100%;
}

canvas {
  position: absolute;
  top: 0px;
  bottom: 70px;
  right: 0px;
  left: 0px;
  margin: 20px;
  height: 100vh;
  z-index: 1;
  line-height: 0.6;
  margin: auto;
  margin-bottom: 0px;
}

#sand-canvas {
  z-index: 2;
  margin: auto;
  /* filter: drop-shadow(2px 4px 6px gray); */
}

canvas,
img {
  image-rendering: crisp-edges;
  -ms-interpolation-mode: nearest-neighbor;
  image-rendering: -webkit-crisp-edges;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: -moz-crisp-edges;
  image-rendering: -o-crisp-edges;
  image-rendering: pixelated;
  margin: 0;
}

button {
  cursor: url("assets/default32x32.cur"), auto !important;

  text-shadow: 0px 1px 2px rgb(190, 178, 178);

  z-index: 3;
  position: relative;

  fill: var(--main-dark-color);
  /* cursor: grab !important; */
  user-select: none; /* Standard */

  box-sizing: border-box;
  border-color: white;
  dominant-baseline: middle;
  text-anchor: middle;
  background-color: var(--menu);
  border: none;
  font-family: NotoSansSymbols, serif;
  box-shadow: none !important;
  border: 2px outset gainsboro;
}
button.selected {
  box-shadow: none !important;
  border: 2px inset gainsboro;
}
.active button {
  background-color: gainsboro;
}
button:disabled {
  background-color: gainsboro;
  color: gray;
}

button:focus {
  outline: none;
}

button.selected {
  box-shadow: var(--border-sunken-outer), var(--border-sunken-inner);
  /* border-style: inset; */
}

#HUD {
  position: absolute;
  right: 0px;
  /* display: flex; */
  /* flex-wrap: wrap; */
  z-index: 3;
  /* padding: 4px; */
}
.hud-body {
  margin: 1px 0px;
  /* display: flex; */
  /* flex-wrap: wrap; */
  /* zoom: 1.5; */
}

#hud-buttons {
  display: flex;
  flex-wrap: wrap;
  padding: 2px;
  padding-top: 3px;
}
#hud-buttons button {
  margin: 1.5px;
  height: 48px;
  width: 48px;

  min-width: 0px;
  font-size: 30px;
  line-height: 25px;
  padding: 0;
  line-height: 0 !important;
  border-width: 3px !important;
}
#HUD a {
  /* flex-grow: 1; */
  height: 100%;
  /* line-height: 0; */
}

.fade {
  opacity: 1;
  transition: opacity 1s linear;
  -moz-transition: opacity 1s linear;
  -webkit-transition: opacity 1s linear;
}

.faded .fade {
  transition: opacity 1s linear;
  -moz-transition: opacity 1s linear;
  -webkit-transition: opacity 1s linear;
  opacity: 0;
}

#controls {
  display: flex;
}

.menu {
  position: absolute;
  left: 10px;
  right: 10px;
  top: 10px;
  bottom: 10px;
  z-index: 5;
  background-color: #f3f3f4;
  border: 1px solid gray;
  box-shadow: 0px 0px 3px 3px rgba(0, 0, 0, 0.2);
  padding: 5px;
  max-width: 900px;
  margin: auto;
  overflow-y: auto;
}

.menu-scrim {
  position: absolute;
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
  z-index: 4;
  background-color: #55555555;
}
.x {
  position: absolute;
  right: 4px;
  top: 5px;
  line-height: 0px;
}
.window {
  background-color: var(--menu) !important;
  /* background: url("assets/ultima_tile.png"); */
}
.title-bar {
  background-color: var(--active-menu) !important;
  background: none;
  height: 25px;
  padding: 1px;
  text-shadow: 1px 1px 1px var(--window-frame);
}
.title-bar-controls button {
  height: 25px;
  width: 25px;
  font-size: 20px;
  line-height: 0;
  padding-bottom: 3px;
  padding-left: 1px;
  margin-left: 2px;
  font-weight: bold;
}
.title-bar .title-bar-text {
  line-height: 0;
  font-size: 24px !important;
  margin-right: 10px;
}
.hint {
  font-size: 19px !important;
  margin: auto;
  text-align: center;
  /* text-shadow: 0px 0.5px 0.5px gainsboro; */
}
.hud-body button#clear-button {
  margin: 2px 2px 2px auto;
  float: right;
  width: auto;
  height: 30px;
  font-size: 18px;
  padding: 5px;
  background-color: var(--menu);
  text-shadow: 0px 0px 1px gainsboro;
  align-items: center !important;
  padding-bottom: 10px;
}
.hud-body button.clear-button:active {
  /* border: 3px inset gainsboro !important; */
}

button:not(:disabled):active {
  /* padding: 1px 5px !important; */
  border-style: inset !important;
}
.mat-box {
  fill: rgba(255, 255, 255, 0.9);
  transition: fill 0.25s;
  background: inherit;
  min-width: 0px;
  padding: 0 !important;
  /* background: url("assets/ultima_tile.png"); */
}

.mat-box:hover {
  stroke: rgb(231, 243, 246) !important;
  stroke-width: 4px;
}

svg {
  user-select: none;
}
.bsvg {
  fill: transparent;
  stroke: black;
  stroke-width: 20px;
  height: 100%;
  /* stroke-linejoin:; */
}
svg text {
  text-shadow: 0px 1px 1px rgb(190, 178, 178);

  dominant-baseline: middle;
  text-anchor: middle;
  stroke-width: 0 !important;
}
.MatrixMenu {
  width: 100%;
}
.MatrixMenu.fake {
  transform: scale(0.94);
  transform-origin: top left;
}
.MatrixMenu svg {
  stroke: #5a5a5a;
  /* opacity: 0.8; */
}
.tch {
  position: absolute;
  z-index: 15;
  /* filter: drop-shadow(1px 1px 2px #500); */
}

img {
  user-select: none;
  /* filter: drop-shadow(1px 1px 1px #500); */
}

.disabled button {
  opacity: 0.5;
  filter: brightness(0.7);
}
.symmetry.disabled > text {
  opacity: 0.2;
}

#bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 6;
  height: 40px;
  background-color: var(--active-menu) !important;
  border: 2px outset var(--active-menu);

  font-size: 20px;
  box-shadow: 0px 0px 5px #000000;
  display: flex;
  padding-left: 80px;
  padding-right: 80px;
}
#bar img {
  display: inline-block;
  /* max-width: 33%; */
  /* height: auto; */
  /* background-image: url("assets/pentagramanimation.gif"); */
  /* background-size: 30px 30px; */
}
#start img {
  /* filter: saturate(20); */
  height: 100%;
  margin: auto;
}
#start {
  user-select: none;
  display: flex;
  position: absolute;
  bottom: 0;
  left: 2px;
  z-index: 1;
  /* width: 60px; */
  padding-right: 1px;
  background-color: var(--menu) !important;
  height: calc(100% - 3px);
  margin: 1px;
  box-sizing: border-box;
  /* line-height: 0; */
  text-align: center;
  border: 3px outset var(--menu);
}
#start:hover {
  /* filter: drop-shadow(0px 0px 3px gold); */
}
#start img {
  filter: drop-shadow(0px -1px 3px gold);
}
#fps {
  position: absolute;
  bottom: 0;
  z-index: 1;

  right: 0;
  width: 100px;
  background-color: var(--menu);
  height: calc(100% - 4px);
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 2px;
  padding: 4px;
  box-sizing: border-box;
  text-align: right;
  font-family: monospace;
  color: var(--window-frame);
  border: 3px inset var(--menu);
}
#quote {
  display: none;
  position: absolute;
  z-index: 3;
  left: 30px;
  top: 30px;
  width: 400px;
  /* background: url("assets/paper.png"); */
  /* background-size: 100px 100px; */
}
#quote p {
  font-size: 40px;
}

#start-content {
  position: absolute;
  /* height: 500px; */
  width: 300px;
  left: 2px;
  bottom: 37px;
  z-index: 4;
  padding: 5px;
  zoom: 1.1;
}

#start-content p {
  text-align: justify;
  font-size: 16px;
  line-height: 19px;
  margin-bottom: 3px;
  font-family: NotoSansSymbols, serif;
}

details[open] > summary #start {
  border: 3px inset gainsboro;
}
details > summary {
  list-style: none;
}
details > summary::-webkit-details-marker {
  display: none;
}
a {
  color: rgb(151, 34, 34);
  font-size: 18px;
  text-decoration: none;
  font-family: NotoSansSymbols, serif;
}
a:hover {
  text-decoration: underline 1px black;
}

.credit {
  text-align: right !important;

  /* font-size: 18px; */
}
blockquote {
  font-family: NotoSansSymbols, serif;
  padding-right: 4px;
  text-align: right;
  font-size: 18px;
  line-height: 20px;
}
h3 {
  font-size: 1.6rem;
}
bigger {
  font-family: NotoSansSymbols, serif;
  font-size: 1.6rem;
  line-height: 0;
  vertical-align: middle;
}

.chain-hr {
  border: 0;
  width: 100%;
  height: 5px;
  margin-top: 3px;
  background-color: transparent;
  /* background-image: url(assets/chain02..png); */
  background-image: url(assets/hr1.png);
  background-repeat: repeat-x;
  overflow: hidden;
  background-size: 32px;
}
.chain-hr2 {
  border: 0;
  width: calc(100% + 6px);
  height: 16px;
  margin: 0px -3px;
  background-color: transparent;
  background-image: url(assets/hr4.png);
  background-repeat: repeat-x;
  overflow: hidden;
  background-size: 32px;
}
.chain-hr3 {
  border: 0;
  width: calc(100% + 6px);
  height: 8px;
  margin: 0px -3px;
  background-color: transparent;
  background-image: url(assets/hr5.png);
  background-repeat: repeat-x;
  overflow: hidden;
  background-size: 32px;
}

.TileGrid {
  display: grid;
  grid-template-columns: 3fr 1fr 3fr;
  grid-template-rows: repeat(3, 50px);
  margin: 0px 0px 8px;
  gap: 1px;
}

.matrix-grid {
  display: grid;
  grid-area: span 3;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 50px);
  gap: 1px;
  grid-auto-flow: column;
}
.center {
  display: flex;
  justify-content: center;
  align-items: center;
}

#hud-buttons button.swap {
  margin: auto;
  margin-top: -58px;
  border: none;
  background: transparent;
  font-size: 25px;
}
/* 
#playback {
  position: absolute;
  right: 110px;
  bottom: 0px;
  height: calc(40px);
  z-index: 9;
  display: flex;
  background: none;
  background-image: none !important;
}
#playback button {
  font-family: "NotoSansSymbols";
  height: 34px;
  font-size: 19px;
  line-height: 0;
  width: 40px !important;
  padding: 3px;
  margin: 1px;
  min-width: 0;
  color: var(--window-frame);
  border-color: var(--menu);
}
*/
.playbutton svg {
  fill: black;
  width: 100%;
  height: 100%;
}

.playbutton {
  font-family: "NotoSansSymbols";
  height: 16px;
  font-size: 19px;
  line-height: 0;
  width: 16px !important;
  padding: 0px !important;
  /* margin: 1px; */
  min-width: 0;
  color: var(--window-frame);
  border-color: var(--menu);
}
#playback svg {
  fill: black;
}