/* Reusable fantasy windows. Load after style.css; layout stays with each screen. */
.game-window {
  --window-border: #b78b47;
  --window-title: #f0cb80;
  --window-ink: #f3e7cf;
  --window-muted: #c3b294;
  position: relative;
  min-width: 0;
  color: var(--window-ink);
  border: 1px solid var(--window-border);
  border-radius: 14px;
  padding: clamp(16px, 3vw, 24px);
  background:
    radial-gradient(ellipse at top, rgba(176, 124, 54, 0.14), transparent 70%),
    repeating-linear-gradient(0deg, rgba(255, 228, 177, 0.025) 0 1px, transparent 1px 5px),
    linear-gradient(145deg, #33291e, #1d1812 75%);
  box-shadow:
    0 24px 70px rgba(0, 0, 0, 0.65),
    0 0 0 3px #211a12,
    0 0 0 4px rgba(183, 139, 71, 0.5),
    inset 0 0 0 5px rgba(183, 139, 71, 0.08),
    inset 0 1px rgba(255, 231, 178, 0.24);
  color-scheme: dark;
}

.game-window :is(h1, h2, h3) {
  color: var(--window-title);
  text-shadow: 0 2px 3px rgba(0, 0, 0, 0.35);
}

.game-window__header {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--window-border);
  box-shadow: 0 1px rgba(255, 230, 180, 0.08);
  background: #2d241a;
}
.modal.game-window { overflow-y: auto; }
.game-window__header :is(h1, h2, h3) { margin: 0; min-width: 0; overflow-wrap: anywhere; }

.game-window .game-window__close {
  flex-shrink: 0;
  margin-left: auto;
  width: 28px;
  height: 28px;
  min-height: 28px;
  padding: 0;
  font-size: 14px;
  line-height: 1;
  border: 1px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--window-title);
  box-shadow: none;
}
.game-window .game-window__close:is(:hover, :active, :focus-visible) {
  border-color: var(--window-border);
  background: #694327;
  color: #fff3d5;
}
.game-window :is(button, input, textarea, select, a):focus-visible {
  outline: 2px solid var(--window-title);
  outline-offset: 3px;
}
.game-window :is(input:not([type=checkbox]), textarea, select) {
  color: var(--window-ink);
  background: #18130e;
  border: 1px solid var(--window-border);
  border-radius: 6px;
}
.game-window :is(input, textarea)::placeholder { color: var(--window-muted); opacity: 1; }

/* Light parchment variant, useful for tips, notices and story windows. */
.game-window--parchment {
  --window-border: #957039;
  --window-title: #593714;
  --window-ink: #392a1a;
  --window-muted: #665139;
  --ink: var(--window-ink);
  --muted: var(--window-muted);
  --gold: #78501e;
  --panel-2: #e5d0a5;
  background:
    radial-gradient(ellipse at center, #f5e7c9, transparent),
    repeating-linear-gradient(0deg, rgba(115, 78, 33, 0.035) 0 1px, transparent 1px 4px),
    #debf86;
  color-scheme: light;
}
.game-window--parchment :is(h1, h2, h3) { text-shadow: none; }
.game-window--parchment .game-window__header { background: #eedbb5; }
.game-window--parchment :is(input:not([type=checkbox]), textarea, select) { background: #fff5de; }

.game-backdrop {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 16px;
  background-color: rgba(9, 7, 5, 0.76);
}
.game-backdrop[hidden] { display: none; }

@media (prefers-contrast: more) {
  .game-window { --window-muted: var(--window-ink); border-width: 2px; }
}