@font-face {
  font-family: "OpenMoji";
  src: url("assets/fonts/OpenMoji-color-glyf_colr_0.woff2") format("woff2");
  unicode-range: U+23,U+2A,U+2D,U+30-39,U+A9,U+AE,U+200D,U+203C,U+2049,U+20E3,U+2117,U+2120,U+2122,U+2139,U+2194-2199,U+21A9,U+21AA,U+229C,U+231A,U+231B,U+2328,U+23CF,U+23E9-23F3,U+23F8-23FE,U+24C2,U+25A1,U+25AA-25AE,U+25B6,U+25C0,U+25C9,U+25D0,U+25D1,U+25E7-25EA,U+25ED,U+25EE,U+25FB-25FE,U+2600-2605,U+260E,U+2611,U+2614,U+2615,U+2618,U+261D,U+2620,U+2622,U+2623,U+2626,U+262A,U+262E,U+262F,U+2638-263A,U+2640,U+2642,U+2648-2653,U+265F,U+2660,U+2663,U+2665,U+2666,U+2668,U+267B,U+267E,U+267F,U+2691-2697,U+2699,U+269B,U+269C,U+26A0,U+26A1,U+26A7,U+26AA,U+26AB,U+26B0,U+26B1,U+26BD,U+26BE,U+26C4,U+26C5,U+26C8,U+26CE,U+26CF,U+26D1,U+26D3,U+26D4,U+26E9,U+26EA,U+26F0-26F5,U+26F7-26FA,U+26FD,U+2702,U+2705,U+2708-270D,U+270F,U+2712,U+2714,U+2716,U+271D,U+2721,U+2728,U+2733,U+2734,U+2744,U+2747,U+274C,U+274E,U+2753-2755,U+2757,U+2763,U+2764,U+2795-2797,U+27A1,U+27B0,U+27BF,U+2934,U+2935,U+2B05-2B07,U+2B0C,U+2B0D,U+2B1B,U+2B1C,U+2B1F-2B24,U+2B2E,U+2B2F,U+2B50,U+2B55,U+2B58,U+2B8F,U+2BBA-2BBC,U+2BC3,U+2BC4,U+2BEA,U+2BEB,U+3030,U+303D,U+3297,U+3299,U+E000-E009,U+E010,U+E011,U+E040-E06D,U+E080-E0B4,U+E0C0-E0CC,U+E0FF-E10D,U+E140-E14A,U+E150-E157,U+E181-E189,U+E1C0-E1C4,U+E1C6-E1D9,U+E200-E216,U+E240-E269,U+E280-E283,U+E2C0-E2C4,U+E2C6-E2DA,U+E300-E303,U+E305-E30F,U+E312-E316,U+E318-E322,U+E324-E329,U+E32B,U+E340-E348,U+E380,U+E381,U+F000,U+F77A,U+F8FF,U+FE0F,U+1F004,U+1F0CF,U+1F10D-1F10F,U+1F12F,U+1F16D-1F171,U+1F17E,U+1F17F,U+1F18E,U+1F191-1F19A,U+1F1E6-1F1FF,U+1F201,U+1F202,U+1F21A,U+1F22F,U+1F232-1F23A,U+1F250,U+1F251,U+1F260-1F265,U+1F300-1F321,U+1F324-1F393,U+1F396,U+1F397,U+1F399-1F39B,U+1F39E-1F3F0,U+1F3F3-1F3F5,U+1F3F7-1F4FD,U+1F4FF-1F53D,U+1F549-1F54E,U+1F550-1F567,U+1F56F,U+1F570,U+1F573-1F57A,U+1F587,U+1F58A-1F58D,U+1F590,U+1F595,U+1F596,U+1F5A4,U+1F5A5,U+1F5A8,U+1F5B1,U+1F5B2,U+1F5BC,U+1F5C2-1F5C4,U+1F5D1-1F5D3,U+1F5DC-1F5DE,U+1F5E1,U+1F5E3,U+1F5E8,U+1F5EF,U+1F5F3,U+1F5FA-1F64F,U+1F680-1F6C5,U+1F6CB-1F6D2,U+1F6D5-1F6D7,U+1F6DC-1F6E5,U+1F6E9,U+1F6EB,U+1F6EC,U+1F6F0,U+1F6F3-1F6FC,U+1F7E0-1F7EB,U+1F7F0,U+1F90C-1F93A,U+1F93C-1F945,U+1F947-1F9FF,U+1FA70-1FA7C,U+1FA80-1FA88,U+1FA90-1FABD,U+1FABF-1FAC5,U+1FACE-1FADB,U+1FAE0-1FAE8,U+1FAF0-1FAF8,U+1FBC5-1FBC9,U+E0061-E0067,U+E0069,U+E006C-E0079,U+E007F;
}

@font-face {
  font-family: "Xanh Mono";
  src: url("assets/fonts/XanhMono-Regular.ttf");
  font-style: normal;
}

@font-face {
  font-family: "Xanh Mono";
  src: url("assets/fonts/XanhMono-Italic.ttf");
  font-style: italic;
}

:root, body {
  font-size: 16px;
  font-family: "Xanh Mono", monospace;
}

@media screen and (min-width: 750px) {
  :root, body {
    font-size: 18px;
  }
}

@media screen and (min-width: 1920px) {
  :root, body {
    font-size: 20px;
  }
}

@media screen and (min-width: 2440px) {
  :root, body {
    font-size: 30px;
  }
}

* {
  --highlight: #bd385e;
  --highlight-light: color-mix(in oklch, var(--highlight) 40%, transparent 60%);
  --sec-highlight: #e2ab3f;
  --background: beige;
  --text-light: #383838;
  --text-button: var(--highlight);
  --message-background: linear-gradient(to bottom, var(--highlight-light), transparent);
  --light-reflection: #ffeff2;
  --border-color: #93968dd5;
  /* --background: color-mix(in oklch, darkblue 70%, beige 30%); */
  --button-color: color-mix(in oklch, var(--background) 30%, transparent 70%);
  --backdrop-filter-transparent: blur(.5rem) brightness(105%);
  --border-radius: .3rem;
  --gutter: 10px;
  --button-box-shadow: -3px -3px 3px inset var(--border-color), 3px 3px 3px inset var(--light-reflection);
  box-sizing: border-box;
  /* touch-action: none; */
}

a {
  color: var(--highlight);
}

body {
  display: grid;
  margin: 0;
  grid-template-columns: 1fr;
  padding: 0;
  gap: 0;
  height: 100dvh;
  width: 100dvw;
  overflow: hidden;
  background-color: var(--background);
}

.emoji {
  font-family: "OpenMoji";
  /* font-size: 20px; */
}

#map {
  font-family: "OpenMoji";
  font-size: 1.2rem;
  line-height: 1.2;
  padding: 0;
  margin: 0;
  float: left;
  grid-row: span 2;
  white-space: nowrap;
  overflow: auto;
  height: 100dvh;
  max-width: 100%;
  min-width: unset;
  
  user-select: none; /* standard */
  -moz-user-select: none; /* firefox specific */
  -webkit-user-select: none; /* Chrome, Opera and Safari*/
  -ms-user-select: none; /* IE, ms-edge */
  /* scrollbar */
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

#map::webkit-scrollbar {
  display: none;
}

/* #map::after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: color-mix(in oklch, darkblue 20%, transparent 80%);
  backdrop-filter: brightness(120%);
} */

#map span {
  display: inline-block;
  width: 1.3em;
  border-radius: var(--border-radius);
}

#about {
  display: block;
}

#about-button {
  position: absolute;
  right: var(--gutter);
  bottom: var(--gutter);
}

#portal {
  display: none;
}
span[data-player-id] {
  z-index: 2;
  outline: 1px solid var(--sec-highlight);
  border-radius: var(--border-radius);
  box-shadow: 0 0 .5em var(--sec-highlight), 0 0 .2em var(--sec-highlight) inset;
}

span[data-editable="false"] {
  animation: portal 5s ease infinite;
  background: linear-gradient(to bottom, transparent 0%, var(--sec-highlight) 50%, transparent 100%);
  background-size: 100% 200%;
}

@keyframes portal {
  0%, 100% {
    background-position: 0 0;
  }
  50% {
    background-position: 0 100%;
  }
}


span.character-highlighted {
  position: relative;
  z-index: 2;
  outline: 1px solid var(--highlight);
  border-radius: var(--border-radius);
  box-shadow: 0 0 .5em var(--highlight), 0 0 .2em var(--highlight) inset;
}

#map:has(~ #chat #chat-message-input:focus) span.character-highlighted::before, #map:has(~ #chat.visible) span.character-highlighted::before {
  content: '';
  width: 1100%;
  height: 1100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: var(--border-radius);
  /* background-color: color-mix(in oklch, var(--highlight) 10%, transparent 90%); */
  box-shadow:  0 0 2em color-mix(in oklch, var(--highlight) 60%, transparent 40%) inset;
  z-index: -1;
  display: block;
}

#chat {
  /* background-color: var(--background); */
  padding-inline: var(--gutter);
  position: absolute;
  bottom: var(--gutter);
  left: 0;
  height: 50vh;
  width: 25vw;
  min-width: 400px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--gutter);
}

#chat-window {
  overflow-y: auto;
  height: 100%;
  display: flex;
  flex-direction: column-reverse;
  gap: .5rem;
}

#chat-input {
  font-size: 1rem;
  display: flex;
  gap: var(--gutter);
  width: 100%;
}

#chat-amount-indicator {
  background-color: var(--highlight);
  color: white;
  border-radius: var(--border-radius);
  position: absolute;
  font-size: .7rem;
  top: -.5em;
  right: -.5em;
  padding: .2em .4em .4em .4em;
}

#show-chat-window {
  display: none;
}

.chat-message {
  max-width: 80%;
  background: var(--message-background);
  backdrop-filter: var(--backdrop-filter-transparent);
  border-radius: var(--border-radius);
  margin: 0;
  padding: .5em;
}

.chat-message-text {
  margin: 0;
}

.chat-message-name {
  margin-right: var(--gutter);
  font-style: italic;
}

.chat-message-name::after {
  content: ":";
}

.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100dvh;
  overflow-y: auto;
  backdrop-filter: var(--backdrop-filter-transparent);
  background: linear-gradient(to bottom, var(--background) 50%, transparent);
  z-index: 30;
  scroll-behavior: smooth;
}

.modal button {
  margin-right: 0.5em;
}

h1, h2, h3 {
  font-weight: normal;
  margin-bottom: 0;
}

h2 {
  font-size: 2em;
}


.introduction {
  font-size: .8rem;
  font-style: normal;
  margin: 0 0 4rem 0;
}

#about-text-wrapper .introduction {
  margin: 0 0 1rem 0;
}

pre {
  font-family: "Xanh Mono", monospace;
  font-size: .8rem;
}

#intro-container a {
  text-decoration: none;
  font-size: 2rem;
  display: none;
}

.introduction i {
  color: var(--highlight);
}


fieldset {
  border-radius: var(--border-radius);
  border: none;
  margin: 1em 0;
  padding: .2em 0;
}

legend {
  /* color: var(--text-light); */
  font-style: italic;
  font-size: .8rem;
  padding: 0;
}

textarea {
  font-family: inherit;
  font-size: 1rem;
}

input[type="text"], textarea {
  border: none;
  background-color: var(--button-color);
  backdrop-filter: var(--backdrop-filter-transparent);
  border-radius: var(--border-radius);
  font-size: 1rem;
  font-family: inherit;
  padding-inline: .4em;
  box-shadow: 3px 3px 3px inset var(--border-color), -3px -3px 3px inset var(--light-reflection);
  width: 100%;
}

input[type="text"] {
  height: 2em;
}
input:focus, input:focus-visible, button:focus, textarea:focus, textarea:focus-visible, .message-text:focus, .message-text:focus-visible {
  outline: none;
  border-color: none;
  box-shadow: 6px 6px 6px inset var(--border-color), -6px -6px 6px inset var(--light-reflection);
}

.form-wrapper {
  min-height: 100%;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 600px;
  padding: var(--gutter);
}
/* character selection ------------------------------------------------------------------------------*/
.character-selection {
  display: flexbox;
  justify-content: space-between;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
}

.emoji-select-wrapper {
  position: relative;
  display: inline-block;
  /* margin: 2.5px 0; */
  width: 1.5em;
  height: 1.5em;
  padding: .05px;
  font-size: 30px;
}

.radio-emoji-select {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}

.radio-emoji-select:hover + .label-emoji-select {
  /* border-color: var(--highlight); */
  filter: none;
  background-color: var(--highlight);
}

.radio-emoji-select:checked + .label-emoji-select {
  background-color: var(--highlight);
  filter: none;
}

.label-emoji-select {
  pointer-events: none;
  font-family: "OpenMoji";
  width: 100%;
  line-height: 1;
  border-radius: var(--border-radius);
  /* border: 1px solid var(--border-color); */
  filter: grayscale();
}

button {
  font-family: inherit;
  line-height: 1;
  font-size: 1rem;
  font-weight: normal !important;
  /* background: #bd385e33; */
  background: var(--button-color);
  backdrop-filter: var(--backdrop-filter-transparent);
  box-shadow: var(--button-box-shadow);
  color: var(--text-button);
  padding: .4em .6em .6em .6em;
  border-radius: var(--border-radius);
  cursor: pointer;
  /* border: 1px solid var(--border-color); */
  border: none;

  
  touch-action: none;
  user-select: none; /* standard */
  -moz-user-select: none; /* firefox specific */
  -webkit-user-select: none; /* Chrome, Opera and Safari*/
  -ms-user-select: none; /* IE, ms-edge */
  transition: all .2s ease;
}

button:hover {
  box-shadow: 3px 3px 3px inset var(--border-color), -3px -3px 3px inset var(--light-reflection);
  background: var(--message-background);
}

.modal button {
  /* border-radius: 5px; */
  /* padding: 5px; */
  margin: 8px 2px;
}

/* messages ------------------------------------------------------------------------------------------ */
#messages {
  display: none;
  height: 100%;
  width: 100%;
  padding: 2rem .5em .5em .5em;
  overflow-y: auto;
  backdrop-filter: var(--backdrop-filter-transparent);
  background: linear-gradient(to bottom, var(--background) 50%, transparent);
  
}
#messages.visible {
  display: block;
}

#message-modal {
  display: none;
}

#messages-container {
  /* display: none; */
  position: absolute;
  top: 0;
  left: 0;
  /* height: 100%; */
  width: 100%;
  margin: 0;
}

#messages-button-wrapper {
  position: absolute;
  top: var(--gutter);
  left: var(--gutter);
  gap: var(--gutter);
  /* width: calc(100% - 2 * var(--gutter)); */
  display: flex;
  justify-content: flex-start;
}

.message {
  background: var(--message-background);
  /* box-shadow: .2em .2em .2em inset var(--border-color); */
  backdrop-filter: var(--backdrop-filter-transparent);
  padding: 0.5em;
  border-radius: var(--border-radius);
  width: min-content;
  min-width: 20em;
}

.message-text {
  padding: 0.5em 0;
  display: block;
  border-radius: var(--border-radius);
}

#messages-container:has(#messages.visible) {
  z-index: 20;
  height: 100%;
}

.edit-button, .save-button {
  text-decoration: underline;
  cursor: pointer;
  color: blue;
}

#mobile-control {
  display: none;
  position: absolute;
  right: var(--gutter);
  bottom: var(--gutter);
  /* width: 100px;
  height: 100px; */
  gap: 2px;
  grid-template-columns: repeat(3, minmax(1fr,1fr));
  grid-template-rows: repeat(2, minmax(1fr,1fr));
  touch-action: none;
}

#mobile-control > button {
  /* font-family: "OpenMoji"; */
  font-family: "Xanh Mono", monospace;
  font-size: 2rem;
  width: 3rem;
  height: 3rem;
  background: #ffffff33;
  backdrop-filter: var(--backdrop-filter-transparent);
  /* outline: 2px solid gray; */
  text-align: center;
  vertical-align: center;
  margin: 0;
  padding: 0;
}

#control-left {
  grid-area: 2 / 1 / 3 / 2;
}

#control-down {
  grid-area: 2 / 2 / 3 / 3;
}

#control-right {
  grid-area: 2 / 3 / 3 / 4;
}

#control-up {
  grid-area: 1 / 2 / 2 / 3;
}

#mobile-chat-toggle {
  display: none;
}

#mobile-chat-close {
  display: none;
}

.undisplayed {
  display: none !important;
}

@media screen and (max-width: 1000px) {
  #mobile-control {
    display: grid;
  }
  
  h1 {
    width: 100%;
  }

  #about-button {
    bottom: unset;
    top: var(--gutter);
    z-index: 100;
  }

  #intro-container {
    height: 100dvh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  #intro-container a {
    display: block;
    margin-inline: auto;
  }

  #character-select-fields {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  #read-messages-button {
    display: block;
  }

  #messages-button-wrapper {
    justify-content: flex-start;
    gap: var(--gutter);
  }

  #chat {
    display: none;
    left: var(--gutter);
    margin: 0;
    padding: 0;
    height: calc(100% - 2 * var(--gutter));
    width: calc(100% - 2 * var(--gutter));
    min-width: unset;
  }

  #chat.visible {
    display: block;
    z-index: 20;
  }

  #chat-window {
    height: calc(100% - (5rem + 2 * var(--gutter)));
    position: absolute;
    bottom: 2.5rem;
  }

  #mobile-chat-toggle {
    display: block;
    width: min-content;
    position: absolute;
    bottom: var(--gutter);
    left: var(--gutter);
  }

  
  #chat-input {
    position: absolute;
    bottom: 0;
  }
  #desktop-chat-toggle {
    display: none;
  }
  #chat.visible ~ #mobile-chat-toggle {
    z-index: 21;
  }
  #chat.visible #mobile-chat-close {
    display: block;
  }
  #chat.visible ~ .input, #chat.visible ~ * .input {
    display: none !important;
  }
}