@import "@fontsource/vt323";

@tailwind base;
@tailwind components;
@tailwind utilities;

body,
input[type="text"] {
  font-family  : "VT323", monospace;
  font-weight  : 400;
  text-shadow  : rgb(39, 168, 115, 0.9) 1px 0 10px;
  animation    : textShadow 0.3s infinite;
  outline-color: rgba(74, 246, 38, 1);
}

input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin            : 0;
}

input[type='number'] {
  -moz-appearance: textfield;
}

input:focus {
  outline-style: solid;
}

::selection {
  @apply text-terminal-black bg-terminal-yellow;
}

.crt-frame {
  pointer-events: none;
  overflow      : hidden;
  z-index       : 9000;
  position      : fixed;
  top           : 0;
  right         : 0;
  bottom        : 0;
  left          : 0;
  width         : 100%;
  height        : 100%;
}

.ansi {
  text-shadow: none;
  font-size  : 6px;
}

h1 {
  @apply mt-6 text-2xl;
}

h2 {
  @apply my-3 text-3xl;
}

h3 {
  @apply my-0 text-2xl;
}

h4 {
  @apply my-1 text-xl;
}

h5 {
  @apply my-1 text-lg;
}

h6 {
  @apply my-1 text-base;
}

/* Responsive styles */
@media (min-width: 640px) {
  h1 {
    @apply mt-6 text-4xl;
  }

  h2 {
    @apply my-5 text-4xl;
  }

  h3 {
    @apply my-1 text-3xl;
  }

  h4 {
    @apply my-3 text-2xl;
  }

  h5 {
    @apply my-2 text-xl;
  }

  h6 {
    @apply my-1 text-lg;
  }
}

@media (min-width: 768px) {
  h1 {
    @apply mt-8 text-5xl;
  }

  h2 {
    @apply my-6 text-5xl;
  }

  h3 {
    @apply my-2 text-4xl;
  }

  h4 {
    @apply my-4 text-3xl;
  }

  h5 {
    @apply my-3 text-2xl;
  }

  h6 {
    @apply my-2 text-xl;
  }
}

@layer components {
  .loading-ellipsis::after {
    content  : "";
    animation: ellipsis 1s infinite;
  }
}

@keyframes ellipsis {
  0% {
    content: "";
  }

  25% {
    content: ".";
  }

  50% {
    content: "..";
  }

  75% {
    content: "...";
  }

  100% {
    content: "";
  }
}

body::-webkit-scrollbar,
.table-scroll::-webkit-scrollbar {
  width : 1em;
  height: 1em;
}

body::-webkit-scrollbar,
.default-scroll::-webkit-scrollbar {
  width : 0.5em;
  height: 0.5em;
}

@media (min-width: 400px) {

  body::-webkit-scrollbar,
  .table-scroll::-webkit-scrollbar {
    width : 1em;
    height: 1em;
  }
}

body::-webkit-scrollbar-track,
.table-scroll::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

body::-webkit-scrollbar-track,
.default-scroll::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

body::-webkit-scrollbar-thumb,
.table-scroll::-webkit-scrollbar-thumb {
  @apply bg-terminal-green;
}

body::-webkit-scrollbar-thumb,
.default-scroll::-webkit-scrollbar-thumb {
  @apply bg-terminal-green;
}

body::-webkit-scrollbar,
.default-scroll::-webkit-scrollbar {
  width : 0.5em;
  height: 0.5em;
}

body::-webkit-scrollbar-track,
.default-scroll::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

body::-webkit-scrollbar-thumb,
.default-scroll::-webkit-scrollbar-thumb {
  @apply bg-terminal-green;
}

body::-webkit-scrollbar,
.item-scroll::-webkit-scrollbar {
  width : 0.2em;
  height: 0.2em;
}

body::-webkit-scrollbar-track,
.item-scroll::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px rgba(74, 246, 38, 0.5);
}

body::-webkit-scrollbar-thumb,
.item-scroll::-webkit-scrollbar-thumb {
  @apply bg-black;
}

.notification-enter {
  opacity  : 0;
  transform: translateY(-1rem);
}

.notification-enter-active {
  opacity   : 1;
  transform : translateY(0);
  transition: opacity 500ms, transform 500ms;
}

.notification-exit {
  opacity  : 1;
  transform: translateY(0);
}

.notification-exit-active {
  opacity   : 0;
  transform : translateY(-1rem);
  transition: opacity 500ms, transform 500ms;
}

.notification-content-enter {
  opacity  : 0;
  transform: translateX(-100%);
}

.notification-content-enter-active {
  opacity   : 1;
  transform : translateX(0);
  transition: opacity 300ms, transform 300ms;
}

.notification-content-exit {
  opacity  : 1;
  transform: translateX(0);
}

.notification-content-exit-active {
  opacity   : 0;
  transform : translateX(-100%);
  transition: opacity 300ms, transform 300ms;
}


@keyframes flash {

  0%,
  100% {
    opacity: 0;
  }

  30% {
    opacity: 0.5;
  }

  50% {
    opacity: 1;
  }

  70% {
    opacity: 0.5;
  }
}

.flash {
  @apply bg-terminal-green bg-opacity-50;
  animation: flash 1s ease-in-out;
  position : fixed;
  top      : 0;
  left     : 0;
  width    : 100vw;
  height   : 100vh;
  z-index  : 100;
}

.notification-flash {
  @apply bg-terminal-green bg-opacity-50;
  animation: flash 1s ease-in-out;
  position : absolute;
  top      : 0;
  left     : 0;
  width    : 100%;
  height   : 100%;
  z-index  : 100;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.notification-sprite {
  background-image : url("/adventurer-sprites.png");
  display          : inline-block;
  background-repeat: no-repeat;
}

.coin-sprite {
  background-image : url("/coin-sprites.png");
  display          : inline-block;
  background-repeat: no-repeat;
}