/*
 * NyteTale styles.
 *
 * The game itself renders to a single letterboxed canvas; the only DOM
 * overlays are the story dialogue box and the high-score name entry. Both are
 * positioned in JS against `scale.canvasBounds` so they track the canvas
 * exactly instead of guessing with viewport units.
 */

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  background: #04020a;
  height: 100%;
  width: 100%;
  overflow: hidden;
  font-family: "Press Start 2P", "Courier New", monospace;
  color: #f4eeff;
}

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

#game-container canvas {
  display: block;
}

/* --------------------------------------------------------------------------
 * Dialogue
 * ------------------------------------------------------------------------ */

#dialogue-box {
  position: fixed;
  /* left/top/width/height/font-size are set by DialogSystem. */
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: linear-gradient(180deg, rgba(18, 10, 38, 0.96), rgba(8, 4, 20, 0.96));
  border: 3px solid #6a4bb0;
  border-radius: 10px;
  padding: 1.6em 1.8em 1.4em;
  z-index: 30;
  box-shadow: 0 0 40px rgba(120, 70, 220, 0.35), inset 0 0 24px rgba(90, 50, 170, 0.25);
  line-height: 1.85;
  pointer-events: none;
}

#dialogue-speaker {
  position: absolute;
  top: -0.85em;
  left: 1.2em;
  padding: 0.35em 0.9em;
  font-size: 0.78em;
  background: #1a0f34;
  border: 2px solid #6a4bb0;
  border-radius: 6px;
  color: #c7b5ff;
  letter-spacing: 0.06em;
}

#dialogue-speaker:empty {
  display: none;
}

/* Speaker-specific accents - class is derived from the name in DialogSystem. */
#dialogue-speaker.bunnyte {
  color: #8be9ff;
  border-color: #35d7ff;
}

#dialogue-speaker.mastervoid {
  color: #ff9ab8;
  border-color: #ff3d7f;
}

#dialogue-text {
  margin: 0;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.6);
}

#dialogue-hint {
  position: absolute;
  bottom: 0.5em;
  left: 1.4em;
  font-size: 0.62em;
  color: #6f5f96;
}

#dialogue-next {
  position: absolute;
  bottom: 0.5em;
  right: 1.2em;
  color: #c7b5ff;
  animation: bounce 0.85s infinite;
}

/* --------------------------------------------------------------------------
 * High-score name entry
 * ------------------------------------------------------------------------ */

#name-entry {
  position: fixed;
  transform: translate(-50%, -50%);
  width: 22ch;
  padding: 0.8em 1em;
  text-align: center;
  background: rgba(10, 5, 24, 0.95);
  border: 3px solid #ffd24d;
  border-radius: 8px;
  color: #ffe9a8;
  font-family: inherit;
  z-index: 40;
  outline: none;
  box-shadow: 0 0 30px rgba(255, 200, 70, 0.3);
}

#name-entry::placeholder {
  color: #7a6a44;
}

/* --------------------------------------------------------------------------
 * Utilities
 * ------------------------------------------------------------------------ */

.hidden {
  display: none !important;
}

.noscript {
  position: fixed;
  inset: 0;
  display: grid;
  place-content: center;
  text-align: center;
  padding: 2rem;
  font-size: 1rem;
}

@keyframes bounce {
  0%,
  100% {
    transform: translateY(0);
    opacity: 0.85;
  }
  50% {
    transform: translateY(-0.35em);
    opacity: 1;
  }
}

/* Players who prefer reduced motion still get the game, minus the flourishes
   we control from CSS. */
@media (prefers-reduced-motion: reduce) {
  #dialogue-next {
    animation: none;
  }
}