@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700&family=Exo+2:wght@300;400;500&display=swap');

html {
  background: radial-gradient(ellipse at center, #1a1f3a 0%, #0c111f 50%, #060a15 100%);
  min-height: 100vh;
}

body {
  background: 
    radial-gradient(circle at 20% 80%, rgba(120, 50, 200, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(200, 50, 120, 0.08) 0%, transparent 50%),
    radial-gradient(circle at 50% 50%, rgba(50, 150, 255, 0.05) 0%, transparent 70%);
  color: #e8f0ff;
  font: 12px 'Exo 2', sans-serif;
  font-weight: 400;
  letter-spacing: 0.3px;
  min-height: 100vh;
}

a,
a:visited {
  color: #7dd8ff;
  text-shadow: 0 0 3px rgba(125, 216, 255, 0.3);
  transition: all 0.2s ease;
}

a:hover {
  color: #b589ff;
  text-shadow: 0 0 5px rgba(181, 137, 255, 0.5);
}
#mods > header {
  font-size: 125%;
  font-weight: 500;
  font-family: 'Orbitron', sans-serif;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  border-bottom: 1px solid currentColor;
  color: #b589ff;
  text-shadow: 0 0 8px rgba(181, 137, 255, 0.2);
  letter-spacing: 1px;
}
#intro {
  padding-bottom: 0.5em;
}
#mods > section {
  display: flex;
  flex-wrap: wrap;
}
#mods > section.pad {
  margin: 0.5em 0;
}
#mods > section > section {
  z-index: 1;
  position: relative;
  margin: 4px;
}
section.branch {
  width: 84px;
  height: 120px;
}
.hex {
  z-index: -1;
  position: absolute;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  transition: all ease-in-out 0.3s;
  box-shadow: 0 0 8px rgba(181, 137, 255, 0.1);
}
.hex:hover {
  filter: brightness(125%) saturate(120%);
  box-shadow: 0 0 15px rgba(181, 137, 255, 0.3);
  transform: none !important;
}
section.branch .hex:nth-child(1) {
  left: 21px;
  top: 0;
}
section.branch .hex:nth-child(2) {
  left: 0px;
  top: 35px;
}
section.branch .hex:nth-child(3) {
  left: 42px;
  top: 35px;
}
section.branch .hex:nth-child(4) {
  left: 21px;
  top: 70px;
}
section.super,
section.super-text {
  width: 84px;
  height: 84px;
}
section.super .hex:nth-child(1) {
  left: 0px;
  top: 0px;
}
section.super .hex:nth-child(2) {
  left: 42px;
  top: 0px;
}
section.super .hex:nth-child(3),
section.super-text .hex {
  left: 21px;
  top: 35px;
}
section.super-text .text {
  display: flex;
  line-height: 1;
  width: 84px;
  height: 36px;
  text-align: center;
  flex-direction: column;
  justify-content: center;
}
#mods section.single {
  width: 42px;
  height: 48px;
}
.tippy-box {
  background-color: rgba(0, 0, 0, 0.8);
}
.tippy-arrow {
  color: rgba(0, 0, 0, 0.8);
}
.tippy-box ul {
  padding-left: 20px;
  margin: 0.5em 0;
  list-style-type: "◈ ";
}
.hextag,
input[type="button"] {
  display: inline-block;
  margin-right: 0.3em;
  padding: 0.4em 0.4em;
  background: rgba(181, 137, 255, 0.15);
  color: #e8f0ff;
  border: 1px solid rgba(181, 137, 255, 0.3);
  opacity: 1;
  transition: all ease-in-out 0.2s;
  cursor: default;
  font-family: 'Exo 2', sans-serif;
  font-weight: 400;
  border-radius: 3px;
  box-shadow: 0 0 5px rgba(181, 137, 255, 0.1);
}
.hextag:hover,
input[type="button"]:hover {
  background: rgba(181, 137, 255, 0.8);
  color: #0c111f;
  box-shadow: 0 0 15px rgba(181, 137, 255, 0.5);
}
input[type="button"] {
  cursor: pointer;
}
input[type="button"].clicked {
  background: rgba(125, 216, 255, 0.9);
  color: #0c111f;
  box-shadow: 0 0 15px rgba(125, 216, 255, 0.5);
}

#reset-selection:hover,
#copy-link:hover,
#copy-prefab:hover {
  background: rgba(181, 137, 255, 0.8);
  color: #0c111f;
  box-shadow: 0 0 15px rgba(181, 137, 255, 0.5);
  transform: none !important;
}
.hex {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.hex[checked]:before {
  content: "bok";
  width: 100%;
  height: 100%;
  background: white;
  clip-path: polygon(
    0% 0%,
    50% 0%,
    50% 10%,
    10% 30%,
    10% 70%,
    50% 90%,
    90% 70%,
    90% 30%,
    50% 10%,
    50% 0%,
    100% 0%,
    100% 100%,
    0% 100%
  );
}
input[type="text"] {
  background: rgba(12, 17, 31, 0.8);
  padding: 0.4em 0.4em;
  color: #e8f0ff;
  border: 1px solid rgba(181, 137, 255, 0.4);
  border-radius: 4px;
  width: 15em;
  font-family: 'Exo 2', sans-serif;
  transition: all 0.2s ease;
}

input[type="text"]:focus {
  border-color: rgba(125, 216, 255, 0.8);
  box-shadow: 0 0 8px rgba(125, 216, 255, 0.3);
  outline: none;
}
input[type="text"].search-input {
  width: 300px;
  padding: 4px;
  margin-left: 8px;
  margin-top: 0.2em;
  margin-bottom: 0.2em;
}
input[type="range"] {
  vertical-align: top;
  width: 250px;
}
span.langswitch {
  align-content: right;
  float: right;
}
.rcNum {
  pointer-events: none;
  font-family: "Orbitron", monospace;
  font-size: 200%;
  font-weight: 700;
  position: absolute;
  bottom: -15%;
  left: 50%;
  vertical-align: text-bottom;
  text-shadow: 0 0 8px rgba(181, 137, 255, 0.6), 
               1px 1px 0 #0c111f, -1px 1px 0 #0c111f, 
               1px -1px 0 #0c111f, -1px -1px 0 #0c111f;
  -webkit-transform: translate(-50%);
  transform: translate(-50%);
  color: #b589ff;
}

/* Multi-Lang switcher */
.content-ja {
  display: none;
}
.ja div.content-ja {
  display: block;
}
.ja span.content-ja {
  display: inline;
}
.ja .content-en {
  display: none;
}
#mods .content-ja {
  display: none;
}
.ja #mods .content-ja {
  display: flex;
}
.ja #mods .content-en {
  display: none;
}

input.content-ja {
  display: none;
}
.ja input.content-ja {
  display: inline-block;
}
.ja input.content-en {
  display: none;
}