mainbody {
  -webkit-touch-callout: none;
  /* iOS Safari */
  -webkit-user-select: none;
  /* Safari */
  -khtml-user-select: none;
  /* Konqueror HTML */
  -moz-user-select: none;
  /* Old versions of Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  user-select: none;
  /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}

/*for ios*/
@namespace svg url(http://www.w3.org/2000/svg);

svg|a {
  -webkit-touch-callout: none;
}

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  font-size: 1vh;
}

details,
main {
  display: block;
}

hr {
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
  height: 0;
  overflow: visible;
}

code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}

a {
  background-color: rgba(0, 0, 0, 0);
}

abbr[title] {
  border-bottom: none;
  text-decoration: underline;
  -webkit-text-decoration: underline dotted;
  text-decoration: underline dotted;
}

b,
strong {
  font-weight: bolder;
}

small {
  font-size: 80%;
}

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

img {
  border-style: none;
}

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
}

button,
input {
  overflow: visible;
}

button,
select {
  text-transform: none;
}

[type="button"],
[type="reset"],
[type="submit"],
button {
  -webkit-appearance: button;
}

[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner,
button::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring,
button:-moz-focusring {
  outline: ButtonText dotted 1px;
}

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

legend {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  color: inherit;
  display: table;
  max-width: 100%;
  padding: 0;
  white-space: normal;
}

progress {
  vertical-align: baseline;
}

textarea {
  overflow: auto;
}

[type="checkbox"],
[type="radio"] {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0;
}

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

[type="search"] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}

summary {
  display: list-item;
}

[hidden],
template {
  display: none;
}


@font-face {
  font-family: Rune;
  font-weight: 700;
  src: url(./FutharkGothic-MpvB.otf);
}


/*============================*/

html {
  font-size: 1svh;
  font-family: Georgia, 'Times New Roman', Times, serif;
  overflow: hidden;
}

.bench {
  display: flex;
  flex-direction: row;
  align-items: start;
  min-height: 35rem;
  position: relative;
  gap:0;
}

.words {
  font-family: Rune;
  font-size: 1.5rem;
  text-align: center;
  color: #000;
  padding: 1rem;
  display: inline-block;
  display: flex;
  flex-wrap: wrap;
  max-height: 40rem;
  overflow: hidden;
  margin: 0;
  margin-bottom: -10rem;
}

.word{
  display: inline-block;
  background: #00000010;
}

.word:nth-child(even){
  background: #00000004;
}

.rune {
  font-family: Rune;
  color: #004;
}

.bench .rune {
  width: 4.5rem;
  height: 4.5rem;
  font-size: 4.5rem;
  border: none;
  text-align: center;
  cursor: pointer;
}

.bench .rune:hover {
  background-color: #0042;
}

.bench .rune.current {
  background-color: #0044;
}


.runeButtons{
  position: absolute;
  left: 0;
  bottom: 0;
}

.runeButtons button {
  font-size: 3rem;
  font-family: Rune;
  width: 3.2rem;  
  margin-top: 2rem;
}

.runeButtons button.active {
  background-color: #0044;
  transform: scale(1.1);
}

.runeButtons .tip {
  font-size: 1.5rem;
  font-family: Georgia, 'Times New Roman', Times, serif;
}

#routes {
  position: absolute;
  pointer-events: none;
  z-index: 5;
}

.word.active {
  color: #f0f;
}

.current-rune {
  margin-bottom: -1em;
  position: relative;
  transform: translateX(-2rem) translateY(-2rem) scale(0.5);
  opacity: 50%;
}

.project-rune {
  position: relative;
  color: #404;
  /*text-shadow: 0px 0px 4px #f8f;*/
}

.project-rune.changing {
  color: #fff;
  text-shadow: 0px 0px 4px #000;
}

.main {
  margin: 0;
  gap: 0;
  border-collapse: collapse;  
}

.main>tbody>tr>td {
  border: solid 1px #000;
  height: 21.5vh;
  padding: 1rem;
  vertical-align: top;
}

.main>tbody>tr>td:first-child {
  width: 15rem;
}

.main>thead>tr>td {
  text-align: right;
}

#gtable{
  position: relative;
}

.gtablediv{
  min-width: 36rem;
}

.item-stats{
  text-align: center;
  width: 100%;
  border-bottom: solid 1px #0004;
  padding-bottom: 1rem;
}

.hero-card{
  font-size: 1.8rem;
}

.hero-card button{
  padding: .2rem;  
  font-size: 1.5rem;
  margin-bottom: .5rem;
  margin-right: .2rem;
  border: none;  
  cursor: pointer;
}

.hero-card button:hover{
  background: #888;
  color: #fff;
}

.storage .current{
  background-color: #0044;
  transform: scaleY(1.05);
}

.storage{
  overflow-y: auto;
  max-height: 42rem;
}

.can-beat{
  font-size: 1.5rem;
}

.hastip:hover .istip {
  display: block;
}

.istip {
  display: none;
  background: #C8C8C8;
  margin-left: 28px;
  padding: 10px;
  position: absolute;
  z-index: 1000;
  width: 200px;
  height: 100px;
  font-family: Georgia, 'Times New Roman', Times, serif;
}

.tip{
  color: #0008;
  font-family: Georgia, 'Times New Roman', Times, serif;
  font-size: 1.5rem;
}

.hero-ui{
  display: flex;
}

.combat-log{
  min-width: 30rem;
  overflow: auto;
  max-height: 40rem;
}

.take{
  min-width: 2rem;
}