@font-face {
  font-family: Fontatica4F;
  src: url("data/fonts/Fontatica4F.otf") format("opentype");
}

html,
body,
#approot {
  width: 100vw;
  height: 100vh;
  width: calc(var(--vw, 1vw) * 100);
  height: calc(var(--vh, 1vh) * 100);

  padding: 0;
  margin: 0;
}

:root {
  --min_ref_ratio: 1;
  --view_width: 100vw;
  --view_height: 100vh;
  --view_unit: calc(var(--view_height) / 100);
}

body {
  font-family: Fontatica4F;
  overflow: hidden;
  margin: 0;
  padding: 0;
  background-color: #333333;
}

#approot {
  display: flex;
  position: relative;
}

#app_view {
  width: var(--view_width);
  height: var(--view_height);
  /* height: min(100vh, calc(100vw * var(--min_ref_ratio))); */
  margin: auto;
}

btn,
.btn {
  all: unset;
  user-select: none;
  cursor: pointer;
  text-decoration: underline;
}

#approot .hidden {
  display: none;
}

#debug_frame {
  display: flex;
  position: absolute;
  color: white;
  margin: 16px;
  text-shadow: 2px 2px black;
  font-family: "Source Code Pro", "Lucida Console", "Courier New", monospace;
  right: 0;
  top: 0;
  max-height: 100%;

  transition-property: transform, max-height;
  transition-duration: 100ms;
}

#debug_frame.collapsed {
  transform: translateX(100%);
  max-height: 30px;
}

#btn_debug_frame_toggle {
  padding: 4px;
  background-color: #00000033;
  cursor: pointer;
}

#btn_debug_frame_toggle::after {
  content: "▶";
}

#debug_frame.collapsed #btn_debug_frame_toggle::after {
  content: "◀";
}

#aibot_debug_frame {
  background-color: #000000aa;
  padding: 8px 16px;
  min-width: 30ch;
  display: flex;
  flex-direction: column;

  overflow: scroll;
  max-height: 90vh;
}

#aibot_debug_frame t {
  display: flex;
  flex-direction: column;
  margin-left: 4px;
}

#aibot_debug_frame tu img {
  height: 2em;
}

#aibot_debug_frame hl {
  height: 1px;
  margin: 2px 0px;
  border-bottom: 2px solid white;
}

#aibot_debug_frame hl2 {
  height: 1px;
  margin: 2px 0px;
  border-bottom: 2px dashed white;
}

#error_page {
  font-size: 1.5rem;
  margin: auto;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  background-color: #000a;
  display: flex;
}

#error_page.hidden {
  display: none;
}

#error_popup {
  margin: auto;
  width: 450px;
  background-color: #54432e;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 15px;
  border: 2px solid #bc915a;
  color: #f5daa5;
  text-stroke: 1px black;
  -webkit-text-stroke: 1px black;
  border-radius: 8px;
  text-align: center;
  box-shadow: 0px 0px 8px #000;
  font-size: 1.65rem;
}
#error_popup p {
  margin: 10px 0;
}

.justbtn {
  all: unset;
  background-color: #ce984a;
  border-radius: 4px;
  user-select: none;
  font-size: 2rem;
  transition-duration: 70ms;
  border: 1px solid black;
  color: white;
  cursor: pointer;
  padding: 8px 50px;
  margin-top: 10px;
}

.justbtn:hover {
  transform: scale(1.05);
  box-shadow: 0px 0px 6px #0002;
}

.justbtn:active {
  transform: scale(0.95);
  box-shadow: 0px 0px 2px #0009;
}

@media (max-width: 1000px) {
  #error_popup {
    transform: scale(0.85);
  }
}

/* --- frames --- */

#app_pages {
  pointer-events: none;
  display: flex;
  position: absolute;
  width: var(--view_width);
  height: var(--view_height);
  font-size: calc(var(--view_unit) * 4);

  transition-duration: 300ms;
  transition-property: background-color;
}

#app_pages.active {
  pointer-events: all;
	background-color: #200f04aa;
}

#app_pages .justframe {
  width: 60%;
  height: 50%;
  left: 50%;
  top: 50%;
  position: absolute;
  transform: translate(-50%, -50%);

  border-width: calc(var(--view_unit) * 2);
  border-style: solid;
  border-image: url("data/gui/gen2/frame_back.png");
  border-image-slice: 30 30 fill;
  border-image-repeat: stretch;

  pointer-events: all;
  user-select: none;
}

@keyframes slideout {
  from {
    top: 50%;
  }
  to {
    top: 60%;
  }
}

@keyframes slidein {
  from {
    top: 40%;
  }
  to {
    top: 50%;
  }
}

#app_pages .justframe.hide {
  animation: slideout 300ms;
	pointer-events: none;
	opacity: 0;
}

#app_pages .justframe {
	transition-duration: 120ms;
	transition-property: opacity;
	opacity: 1;

  animation: slidein 300ms;
}

#app_pages .justframe .fill-a {
  width: 100%;
  height: 100%;
}

#app_pages .justframe .v-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow: scroll;
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}
#app_pages .justframe .v-list::-webkit-scrollbar {
  display: none;
}

#app_pages .justframe .v-item {
  border-width: calc(var(--view_unit) * 1);
  border-style: solid;
  border-image-slice: 30 30 fill;
  border-image-repeat: stretch;
  height: 2em;
}

#app_pages .justframe .v-item.a0 {
  border-image-source: url("data/gui/gen2/list_item_a_0.png");
}

#app_pages .justframe .v-item.a1 {
  border-image-source: url("data/gui/gen2/list_item_a_1.png");
}

#app_pages .justframe btn.close {
  --fwidth: 8;
  --fheight: 8;
  position: absolute;
  transform: translate(50%, -50%);
  right: calc(var(--view_unit) * -2);
  top: calc(var(--view_unit) * -2);

  background-image: url("data/gui/gen2/btn_close.png");
  background-size: contain;
  background-repeat: no-repeat;
  width: calc(var(--view_unit) * var(--fwidth));
  height: calc(var(--view_unit) * var(--fheight));
  transition-duration: 100ms;
  transition-property: width, height;
}

#rating_frame #user_rating_item {
	position: absolute;
	width: 100%;
  bottom: -2em;
  left: -5px;
	transform: scale(1.1);
  border-width: calc(var(--view_unit) * 2);
}

#app_pages .justframe btn.close:hover {
  --fwidth: 9;
  --fheight: 9;
}

#app_pages .justframe btn.close:active {
  --fwidth: 8;
  --fheight: 8;
}

#rating_frame .v-item {
  display: flex;
}

#rating_frame .v-item .rating_place {
  height: 1em;
  width: 2em;
  font-size: 2em;
  text-align: center;
  text-stroke: 1px black;
  -webkit-text-stroke: 1px black;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: bottom;
  flex-shrink: 0;
}

#rating_frame .v-item .rating_icon {
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url("data/gui/gen2/missing-64px.png");
  height: 2.5em;
  width: 2.5em;
  transform: translateY(-10%);
  border-radius: 100%;
  flex-shrink: 0;
}

#rating_frame .v-item .rating_icon_frame {
  background-size: contain;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
  background-image: url("data/gui/gen2/rating_icon.png");
}

#rating_frame .v-item .rating_place.rating-gold {
  color: #d1c92d;
  background-image: url("data/gui/gen2/rating_decor_gold.png");
}

#rating_frame .v-item .rating_place.rating-silver {
  color: #e0e0e0;
  background-image: url("data/gui/gen2/rating_decor_silver.png");
}

#rating_frame .v-item .rating_place.rating-bronze {
  color: #f78e00;
  background-image: url("data/gui/gen2/rating_decor_bronze.png");
}

#rating_frame .v-item .rating_place.rating-any {
  color: #ffd99c;
}

#rating_frame .v-item .rating_name {
  color: #ffd99c;
  font-size: 2em;
  text-stroke: 1px black;
  -webkit-text-stroke: 1px black;
  padding: 0 7%;
  flex-shrink: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#rating_frame .v-item .rating_score {
  color: white;
  font-size: 2em;
  text-stroke: 1px black;
  -webkit-text-stroke: 1px black;
  margin-right: 1em;
  margin-left: auto;
}