/*
 * Chrome for the WILDERKEEP overlay.
 *
 * The game itself is a separate, self-contained application served from
 * wilderkeep/ and hosted here in an iframe — see wilderkeep-launcher.js for
 * why. Everything in this file styles the *frame around* it: the backdrop, the
 * title bar, and the exit control. Nothing here can affect the game's own
 * rendering, which is exactly the point.
 */

#wilderkeep-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: none;
  flex-direction: column;
  background: #05060a;
}

#wilderkeep-overlay.active {
  display: flex;
}

.wilderkeep-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 16px;
  background: linear-gradient(180deg, #0d1620 0%, #070b11 100%);
  border-bottom: 1px solid rgba(79, 208, 224, 0.35);
  flex: 0 0 auto;
}

.wilderkeep-title {
  font-family: var(--font-arcade, monospace);
  font-size: 0.72rem;
  letter-spacing: 2px;
  color: #4fd0e0;
  text-shadow: 0 0 10px rgba(79, 208, 224, 0.6);
  white-space: nowrap;
  flex: 0 0 auto;
}

.wilderkeep-hint {
  font-family: monospace;
  font-size: 0.7rem;
  color: #6f8299;
  /* The controls line is the only thing here that may be sacrificed when the
     window is narrow: the title identifies the game and the exit button is the
     way out, but the controls are also printed inside the game itself. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1 1 auto;
  text-align: center;
}

/* The frame fills whatever is left below the bar. The game does its own
   integer scaling and letterboxing inside it, so this must not impose an
   aspect ratio of its own. */
#wilderkeep-frame {
  flex: 1 1 auto;
  width: 100%;
  border: 0;
  display: block;
  background: #05060a;
}

.wilderkeep-exit-btn {
  flex: 0 0 auto;
  white-space: nowrap;
  font-family: var(--font-arcade, monospace);
  font-size: 0.62rem;
  letter-spacing: 1px;
  padding: 8px 14px;
  cursor: pointer;
  color: #ffb3bd;
  background: rgba(255, 0, 85, 0.12);
  border: 1px solid rgba(255, 0, 85, 0.55);
  border-radius: 4px;
  transition:
    background 0.15s ease,
    box-shadow 0.15s ease;
}

.wilderkeep-exit-btn:hover,
.wilderkeep-exit-btn:focus-visible {
  background: rgba(255, 0, 85, 0.25);
  box-shadow: 0 0 12px rgba(255, 0, 85, 0.5);
  outline: none;
}

@media (max-width: 640px) {
  .wilderkeep-hint {
    display: none;
  }
}