@import url('https://fonts.googleapis.com/css2?family=Jersey+10&display=swap');
@import "tailwindcss";

@theme {
  --color-black: #000000;
  --color-orange: #FF5300;
  --color-white: #FFFFFF;
  --color-gray: #808080;
  --color-dark-gray: #333333;
  --color-light-gray: #CCCCCC;

  --color-success: #228B22;
  --color-error: #8B0000;
  --color-info: #4B0082;

  --color-online: #228B22;
  --color-away: #B8860B;
  --color-offline: #808080;

  --font-pixel: "Press Start 2P", "Courier New", monospace;
  --font-placeholder: "Jersey 10", sans-serif;
  --font-mono: "JetBrains Mono", "Fira Code", monospace;

  --shadow-pixel: 4px 4px 0 var(--color-orange);
  --shadow-pixel-sm: 2px 2px 0 var(--color-orange);
  --shadow-pixel-dark: 4px 4px 0 var(--color-dark-gray);
}

@font-face {
  font-family: "Press Start 2P";
  src: url("https://fonts.gstatic.com/s/pressstart2p/v15/e3t4euO8T-267oIAQAu6jDQyK3nVivM.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  border-radius: 0 !important;
}

html {
  background-color: var(--color-black);
  color: var(--color-white);
  font-family: var(--font-pixel);
  font-size: 10px;
  line-height: 1.8;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: unset;
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-overflow-scrolling: touch;
}

body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background-color: var(--color-black);
  overflow: hidden;
  overscroll-behavior: none;
  position: fixed;
  width: 100%;
  touch-action: pan-x pan-y;
}

#root {
  min-height: 100vh;
  min-height: 100dvh;
  overflow-y: auto;
  overscroll-behavior: none;
}

code,
pre {
  font-family: var(--font-mono);
}

.font-placeholder {
  font-family: var(--font-placeholder);
}

::selection {
  background-color: var(--color-orange);
  color: var(--color-black);
}

:focus-visible {
  outline: 2px solid var(--color-orange);
  outline-offset: 2px;
}

input,
textarea,
button,
select {
  font-family: inherit;
  font-size: inherit;
}

a {
  color: var(--color-orange);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.pixel-border {
  border: 2px solid var(--color-orange);
  box-shadow: var(--shadow-pixel);
}

.pixel-border-sm {
  border: 2px solid var(--color-orange);
  box-shadow: var(--shadow-pixel-sm);
}

.pixel-border-inset {
  border: 2px solid var(--color-orange);
  box-shadow:
    var(--shadow-pixel),
    inset -2px -2px 0 var(--color-dark-gray);
}

.pixel-button {
  border: 2px solid var(--color-orange);
  box-shadow: var(--shadow-pixel);
  transition: transform 0.05s steps(1), box-shadow 0.05s steps(1);
}

.pixel-button:hover {
  background-color: var(--color-orange);
  color: var(--color-black);
}

.pixel-button:active {
  transform: translate(4px, 4px);
  box-shadow: none;
}

.pixel-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: var(--shadow-pixel-dark);
  border-color: var(--color-gray);
}

.pixel-button:disabled:hover {
  background-color: transparent;
  color: inherit;
}

.pixel-input {
  background-color: var(--color-black);
  border: 2px solid var(--color-orange);
  color: var(--color-white);
  padding: 12px 16px;
}

.pixel-input::placeholder {
  font-family: var(--font-placeholder);
  font-size: 16px;
  color: var(--color-gray);
}

.pixel-input:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-orange);
}

.pixel-input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  border-color: var(--color-gray);
}

.pixel-card {
  background-color: var(--color-black);
  border: 2px solid var(--color-orange);
  box-shadow: var(--shadow-pixel);
}

.pixel-card-invert {
  background-color: var(--color-orange);
  color: var(--color-black);
  border: 2px solid var(--color-orange);
  box-shadow: var(--shadow-pixel-dark);
}

.text-pixel-xs { font-size: 8px; }
.text-pixel-sm { font-size: 10px; }
.text-pixel-base { font-size: 12px; }
.text-pixel-lg { font-size: 14px; }
.text-pixel-xl { font-size: 16px; }
.text-pixel-2xl { font-size: 20px; }
.text-pixel-3xl { font-size: 24px; }

.animate-blink {
  animation: blink 1s steps(1) infinite;
}

.animate-pulse-pixel {
  animation: pulse-pixel 1s steps(2) infinite;
}

.animate-bounce-pixel {
  animation: bounce-pixel 0.6s steps(3) infinite;
}

.animate-typing-dots {
  animation: typing-dots 1.2s steps(4) infinite;
}

.animate-spin-pixel {
  animation: spin-pixel 0.8s steps(8) infinite;
}

.animate-slide-in-right {
  animation: slide-in-right 0.3s steps(3) forwards;
}

.animate-slide-in-up {
  animation: slide-in-up 0.3s steps(3) forwards;
}

.animate-shake {
  animation: shake 0.3s steps(4);
}

.animate-pixel-spin {
  animation: spin-pixel 0.8s steps(8) infinite;
}

.animate-pixel-pulse {
  animation: pixel-pulse 1s steps(2) infinite;
}

.animate-fade-in {
  animation: fade-in 0.15s steps(2) forwards;
}

.animate-scale-in {
  animation: scale-in 0.15s steps(3) forwards;
}

@keyframes blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

@keyframes pulse-pixel {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

@keyframes bounce-pixel {
  0%, 100% { transform: translateY(0); }
  33% { transform: translateY(-4px); }
  66% { transform: translateY(-2px); }
}

@keyframes typing-dots {
  0% { content: ""; }
  25% { content: "."; }
  50% { content: ".."; }
  75% { content: "..."; }
}

@keyframes spin-pixel {
  0% { transform: rotate(0deg); }
  12.5% { transform: rotate(45deg); }
  25% { transform: rotate(90deg); }
  37.5% { transform: rotate(135deg); }
  50% { transform: rotate(180deg); }
  62.5% { transform: rotate(225deg); }
  75% { transform: rotate(270deg); }
  87.5% { transform: rotate(315deg); }
  100% { transform: rotate(360deg); }
}

@keyframes slide-in-right {
  0% { transform: translateX(100%); opacity: 0; }
  33% { transform: translateX(66%); opacity: 0.33; }
  66% { transform: translateX(33%); opacity: 0.66; }
  100% { transform: translateX(0); opacity: 1; }
}

@keyframes slide-in-up {
  0% { transform: translateY(100%); opacity: 0; }
  33% { transform: translateY(66%); opacity: 0.33; }
  66% { transform: translateY(33%); opacity: 0.66; }
  100% { transform: translateY(0); opacity: 1; }
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  50% { transform: translateX(4px); }
  75% { transform: translateX(-4px); }
}

@keyframes pixel-pulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.2; }
}

@keyframes fade-in {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes scale-in {
  0% { transform: scale(0.95); opacity: 0; }
  50% { transform: scale(0.98); opacity: 0.5; }
  100% { transform: scale(1); opacity: 1; }
}

.scrollbar-pixel::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

.scrollbar-pixel::-webkit-scrollbar-track {
  background: var(--color-black);
  border: 2px solid var(--color-dark-gray);
}

.scrollbar-pixel::-webkit-scrollbar-thumb {
  background: var(--color-orange);
  border: 2px solid var(--color-orange);
}

.scrollbar-pixel::-webkit-scrollbar-thumb:hover {
  background: var(--color-white);
}

.scrollbar-pixel::-webkit-scrollbar-corner {
  background: var(--color-black);
}

.status-online { color: var(--color-online); }
.status-away { color: var(--color-away); }
.status-offline { color: var(--color-offline); }
.status-error { color: var(--color-error); }
.status-success { color: var(--color-success); }
.status-info { color: var(--color-info); }

.bg-status-online { background-color: var(--color-online); }
.bg-status-away { background-color: var(--color-away); }
.bg-status-offline { background-color: var(--color-offline); }
.bg-status-error { background-color: var(--color-error); }
.bg-status-success { background-color: var(--color-success); }
.bg-status-info { background-color: var(--color-info); }

@media (min-width: 768px) {
  html {
    font-size: 12px;
  }

  .text-pixel-xs { font-size: 10px; }
  .text-pixel-sm { font-size: 12px; }
  .text-pixel-base { font-size: 14px; }
  .text-pixel-lg { font-size: 16px; }
  .text-pixel-xl { font-size: 18px; }
  .text-pixel-2xl { font-size: 22px; }
  .text-pixel-3xl { font-size: 28px; }
}

@media (min-width: 1024px) {
  html {
    font-size: 14px;
  }

  .text-pixel-xs { font-size: 11px; }
  .text-pixel-sm { font-size: 13px; }
  .text-pixel-base { font-size: 15px; }
  .text-pixel-lg { font-size: 18px; }
  .text-pixel-xl { font-size: 20px; }
  .text-pixel-2xl { font-size: 24px; }
  .text-pixel-3xl { font-size: 32px; }
}