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

body, html {
  margin: 0;
  padding: 0;
  background-color: black;
  font-family: 'Tiny5', monospace;
  overflow: hidden;
}

#game-container {
  position: relative;
  width: 100vw;
  height: 100vh;
}

#start-screen, #death-screen, #settings-screen, #history-screen, #enemies-screen, #warp-screen {
  z-index: 101;
  position: relative;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  background-image: url('/assets/img/startgame.gif');
  background-size: cover;
  background-position: center;
}
#death-screen, #settings-screen, #history-screen, #enemies-screen, #warp-screen {
  display: none;
}

/* Sound prompt modal */
#sound-prompt {
  z-index: 200;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.8);
  display: none; /* Hidden by default, shown on initial load if needed */
}

#warp-screen {
  background-image: url('/assets/img/warpspeed.gif');
}

/* Console container */
#console-container {
  position: relative;
  width: 100vw;
  height: 100vh;
  display: none; /* Hidden by default, shown when game starts */
  align-items: center;
  justify-content: center;
  z-index: 50;
  /* Ensure console container covers everything */
  overflow: hidden;
  background-color: #000;
}

#console-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  image-rendering: auto;
  /* Ensure image doesn't cause overflow */
  max-width: 100%;
  max-height: 100%;
}

/* Game screen area - positioned over the console's screen */
/* Position will be calculated dynamically via JavaScript */
#game-screen-area {
  position: absolute;
  display: none;
  overflow: hidden;
  z-index: 51;
  /* Initial values - will be overridden by JavaScript */
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  /* Ensure display is fully covered - no gaps, completely opaque */
  background-color: #000;
  /* Rounded corners to match console display - adjust radius as needed */
  border-radius: 8px;
  /* Ensure nothing protrudes beyond the display area */
  clip-path: inset(0);
  /* Prevent any content from showing outside */
  contain: layout style paint;
  /* Ensure complete coverage - add slight expansion to cover edges */
  box-shadow: 0 0 0 2px #000;
  /* Make absolutely sure nothing shows through */
  isolation: isolate;
}

/* Make canvas fill the entire game screen area */
#game-screen-area canvas {
  background-image: url('/assets/img/default.gif');
  background-size: cover;
  background-position: center;
  background-color: #000; /* Solid black fallback to ensure coverage */
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  transform: none;
  font-family: 'Tiny5', monospace;
  /* Ensure canvas doesn't overflow */
  max-width: 100%;
  max-height: 100%;
  /* Prevent any rendering outside bounds */
  image-rendering: pixelated;
  /* Ensure canvas is fully contained within parent */
  box-sizing: border-box;
  /* Prevent sub-pixel rendering issues */
  will-change: contents;
  /* Ensure canvas is above console image */
  z-index: 1;
}


/* Console buttons overlay */
#console-buttons {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 52;
  pointer-events: none; /* Allow clicks to pass through to buttons */
}

.console-btn {
  position: absolute;
  background: transparent;
  border: none;
  cursor: pointer;
  pointer-events: auto;
  /* Make buttons invisible but clickable */
  opacity: 0;
  /* Add slight visual feedback on hover (optional, for debugging) */
  transition: opacity 0.1s;
}

.console-btn:hover {
  /* Optional: show button area on hover for debugging */
  /* opacity: 0.1; */
}

/* D-pad container */
.dpad-container {
  position: absolute;
  /* Position over the D-pad on the left side */
  top: 45%;
  left: 8%;
  width: 12%;
  height: 20%;
  transform: translateY(-50%);
}

.dpad-up {
  position: absolute;
  top: 0;
  left: 33%;
  width: 34%;
  height: 33%;
}

.dpad-down {
  position: absolute;
  bottom: 0;
  left: 33%;
  width: 34%;
  height: 33%;
}

.dpad-left {
  position: absolute;
  left: 0;
  top: 33%;
  width: 33%;
  height: 34%;
}

.dpad-right {
  position: absolute;
  right: 0;
  top: 33%;
  width: 33%;
  height: 34%;
}

.dpad-center {
  position: absolute;
  top: 33%;
  left: 33%;
  width: 34%;
  height: 34%;
  pointer-events: none;
  /* Center area of D-pad - blocks pointer events to prevent accidental clicks */
}

/* Action buttons (A and B) - positioned on the right */
.action-btn {
  width: 6%;
  height: 6%;
  border-radius: 50%;
}

.action-a {
  /* Top action button */
  top: 42%;
  right: 12%;
}

.action-b {
  /* Bottom action button */
  top: 50%;
  right: 12%;
}

/* Start and Select buttons */
.start-btn,
.select-btn {
  width: 8%;
  height: 3%;
  border-radius: 20px;
}

.start-btn {
  /* Start button - below D-pad */
  top: 58%;
  left: 10%;
}

.select-btn {
  /* Select button - below Start */
  top: 63%;
  left: 10%;
}

/* Legacy canvas styling (for when console is not shown) */
canvas {
  background-image: url('/assets/img/default.gif');
  background-size: cover;
  background-position: center;
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1080px;
  height: 100vh;
  font-family: 'Tiny5', monospace;
  z-index: 50;
}

/* Zappy assistant overlay */
#zappy-assistant {
  position: fixed;
  right: 80px;
  bottom: 80px;
  width: 180px;
  height: 180px;
  z-index: 250; /* Higher than warp-screen (101) and sound-prompt (200) to ensure visibility */
  pointer-events: none;
  display: none; /* Hidden by default */
  align-items: flex-end;
  justify-content: flex-end;
  transform: translateY(130%); /* Start off-screen below */
  opacity: 0;
  transition: transform 0.3s ease-out, opacity 0.3s ease-out;
}

/* Show Zappy when talking - slide up */
#zappy-assistant.show-talking {
  display: flex !important; /* Force display even when warp screen is visible */
  transform: translateY(0) !important;
  opacity: 1 !important;
  z-index: 250 !important; /* Ensure it's above warp screen */
  visibility: visible !important;
}

/* When console is visible, adjust zappy position */
#console-container:not([style*="display: none"]) ~ #zappy-assistant {
  right: 5%;
  bottom: 5%;
}

#zappy-assistant.hidden-by-player {
  transform: translateY(130%);
  opacity: 0;
}

/* Ensure show-talking overrides hidden-by-player */
#zappy-assistant.show-talking.hidden-by-player {
  transform: translateY(0) !important;
  opacity: 1 !important;
  display: flex !important;
}

/* Hide assistant on start screen */
#start-screen:not([style*="display: none"]) ~ #zappy-assistant {
  display: none !important;
}

#zappy-assistant img {
  width: 100%;
  height: auto;
  image-rendering: pixelated;
}

* {
  font-family: 'Tiny5', monospace !important;
}

button, h1, h2, h3, h4, h5, h6, p, span, div, td, th, label, input, table {
  font-family: 'Tiny5', monospace !important;
}

.start-opt {
  color: white;
  vertical-align: bottom;
}
.start-opt img {
  display: inline-block;
  opacity: 0;
}
.start-opt:hover {
  cursor: pointer;
}
.start-opt:hover img {
  opacity: 1;
}
.start-left {
  transform: rotate(90deg);
}
.start-right {
  transform: rotate(-90deg);
}
.opt {
  margin: 0 60px;
}

/* Enemy sprite styling - maintain pixel art quality */
.enemy-sprite {
  width: 32px;
  height: 32px;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
}

.enemy-sprite.flood {
  width: 128px;
}

/* Custom scrollbar styling */
#enemies-content::-webkit-scrollbar {
  width: 12px;
}

#enemies-content::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

#enemies-content::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 0;
}

#enemies-content::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.5);
}

/* Firefox scrollbar */
#enemies-content {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.3) rgba(0, 0, 0, 0.5);
}