/* Native ImageGen raster plates supply all decorative panel/button artwork.
   CSS only lays out real controls and nine-slices those original PNG pixels. */
:root {
  --didga-menu-art: url('./art/ui-v26/menu-panel-v1.png');
  --didga-button-art: url('./art/ui-v26/button-plate-v1.png');
  --didga-dialogue-art: url('./art/ui-v26/dialogue-panel-v1.png');
  --didga-menu-slice: 270 330 270 330;
  --didga-button-slice: 280 430 280 430;
  --didga-dialogue-slice: 220 340 220 340;
  --didga-ink: #fff0ce;
  --didga-muted-ink: #d5c6a9;
  --didga-gold-ink: #f7d58d;
}

#game-window .veil { z-index: 40; }
#game-window #town-dialogue { z-index: 50; }
#game-window #atmosphere-panel { z-index: 60; }
/* Controller settings use a fixed viewport dialog inside the game's HUD.
   Keep it clear of the canvas clip when the page is scrolled to PNG controls. */
#game-window:has(.pad-backdrop:not([hidden])) { overflow: visible; z-index: 100; }

/* The conversation layout and portrait overlap are authored separately. This
   only supplies its native wide painted frame and opaque illustrated center. */
#game-window .town-dialogue-card {
  border: 24px solid transparent;
  border-image-source: var(--didga-dialogue-art);
  border-image-slice: var(--didga-dialogue-slice) fill;
  border-image-width: 24px;
  border-image-outset: 0;
  border-image-repeat: stretch;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--didga-ink);
}
#game-window .town-dialogue-card h2 {
  font-family: Georgia, 'Palatino Linotype', serif;
  color: var(--didga-gold-ink);
  text-shadow: 0 2px 2px #090f15;
}

#game-window .card:not(.town-dialogue-card),
#game-window .pad-widget .pad-panel,
body .game-recorder-dialog {
  border: 24px solid transparent;
  border-image-source: var(--didga-menu-art);
  border-image-slice: var(--didga-menu-slice) fill;
  border-image-width: 24px;
  border-image-outset: 0;
  border-image-repeat: stretch;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--didga-ink);
  padding: 18px 21px 22px;
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: #ba985c #1b252b;
  color-scheme: dark;
}

#game-window .card:not(.town-dialogue-card) h2,
#game-window .pad-widget .pad-panel h2,
body .game-recorder-dialog h2 {
  font-family: Georgia, 'Palatino Linotype', serif;
  font-weight: 700;
  letter-spacing: .015em;
  color: var(--didga-gold-ink);
  text-shadow: 0 2px 2px #090f15;
}

#game-window .card:not(.town-dialogue-card) p,
#game-window .pad-widget .pad-panel p,
#game-window .pad-widget .pad-panel small,
body .game-recorder-dialog p {
  color: var(--didga-muted-ink);
}

#game-window .identity,
#game-window .hint,
#game-window #objective,
#game-window .loading,
#game-window .lighting-test,
body .screenshot-tools {
  border: 12px solid transparent;
  border-image-source: var(--didga-menu-art);
  border-image-slice: var(--didga-menu-slice) fill;
  border-image-width: 12px;
  border-image-outset: 0;
  border-image-repeat: stretch;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--didga-ink);
}

#game-window .identity { padding: 9px 12px 12px; }
#game-window .identity h1 {
  font-family: Georgia, 'Palatino Linotype', serif;
  color: var(--didga-gold-ink);
  text-shadow: 0 2px 2px #090f15;
}
#game-window .hint, #game-window #objective { padding: 6px 9px; }
#game-window .loading { padding: 12px 16px; max-width: calc(100vw - 24px); }
#game-window .lighting-test { padding: 8px; }
body .screenshot-tools { padding: 10px 16px; }

/* Keep semantic button hit areas and text, replacing only old flat fills and
   decorative rectangles. Higher specificity covers the injected pad styles. */
#game-window button,
#game-window a.button,
#game-window .pad-widget button,
#game-window .game-recorder-control,
#game-window .game-recorder-mic-control,
body .game-recorder-dialog button,
body .screenshot-tools button {
  border: 8px solid transparent;
  border-image-source: var(--didga-button-art);
  border-image-slice: var(--didga-button-slice) fill;
  border-image-width: 8px;
  border-image-outset: 0;
  border-image-repeat: stretch;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--didga-ink);
  padding: 5px 10px;
  min-height: 40px;
  font-weight: 600;
  line-height: 1.3;
  text-shadow: 0 1px 2px #0b1119;
  transition: filter .12s ease;
}

#game-window button:hover:not(:disabled),
#game-window a.button:hover,
#game-window .pad-widget button:hover:not(:disabled),
#game-window .game-recorder-control:hover:not(:disabled),
#game-window .game-recorder-mic-control:hover:not(:disabled),
body .game-recorder-dialog button:hover:not(:disabled),
body .screenshot-tools button:hover:not(:disabled) {
  background: transparent;
  filter: brightness(1.16) saturate(1.08);
}

#game-window button:active:not(:disabled),
body .game-recorder-dialog button:active:not(:disabled),
body .screenshot-tools button:active:not(:disabled) { filter: brightness(.91); }

#game-window button.primary,
#game-window button[aria-pressed='true'],
#game-window .game-recorder-active,
#game-window .game-recorder-mic-active,
body .game-recorder-dialog .primary {
  background: transparent;
  color: #ffe29d;
  filter: brightness(1.1) saturate(1.13);
  box-shadow: none;
}

#game-window button:disabled,
body .game-recorder-dialog button:disabled,
body .screenshot-tools button:disabled {
  opacity: .48;
  cursor: default;
  filter: none;
}

#game-window .nav button,
#game-window .nav a.button {
  border-width: 6px;
  border-image-width: 6px;
  padding: 5px 8px;
  min-height: 34px;
}

#game-window .pad-widget .pad-row button {
  border-width: 5px;
  border-image-width: 5px;
  padding: 3px 7px;
  min-height: 34px;
}

#game-window .touch button {
  border-width: 6px;
  border-image-width: 6px;
  width: 43px;
  height: 43px;
  min-height: 43px;
  padding: 0;
}

/* Native selects, ranges and checkboxes retain browser keyboard/controller
   semantics. The closed select gets the same original painted plate. */
#game-window .atmosphere-card select,
#game-window .pad-widget select,
body .game-recorder-dialog select,
body .game-recorder-dialog input[type='text'],
body .game-recorder-dialog input[type='number'] {
  border: 7px solid transparent;
  border-image-source: var(--didga-button-art);
  border-image-slice: var(--didga-button-slice) fill;
  border-image-width: 7px;
  border-image-repeat: stretch;
  border-radius: 0;
  background: transparent;
  color: var(--didga-ink);
  color-scheme: dark;
  padding: 5px 7px;
  min-height: 39px;
  font: inherit;
  max-width: 100%;
}

#game-window select option,
body .game-recorder-dialog select option { background: #1b252b; color: #fff0ce; }
#game-window input[type='range'],
#game-window input[type='checkbox'],
body .game-recorder-dialog input[type='range'],
body .game-recorder-dialog input[type='checkbox'] { accent-color: #dfb85e; }

#game-window button:focus-visible,
#game-window a.button:focus-visible,
#game-window select:focus-visible,
#game-window input:focus-visible,
body .game-recorder-dialog button:focus-visible,
body .game-recorder-dialog [data-gamepad-focus],
body .screenshot-tools button:focus-visible {
  outline: 3px solid #ffe29d;
  outline-offset: 2px;
}

#game-window .pad-widget .pad-value { overflow-wrap: anywhere; }
#game-window .pad-widget .pad-message,
#game-window .lighting-test-heading,
#game-window .atmosphere-card label,
body #game-recorder-message { color: var(--didga-ink); }
#game-window .kicker,
#game-window .pad-widget .pad-status,
body #game-recorder-format,
body #game-recorder-mic-message { color: var(--didga-muted-ink); }

@media (max-width: 720px) {
  #game-window .town-dialogue-card {
    border-width: 16px;
    border-image-width: 16px;
  }
  #game-window .card:not(.town-dialogue-card),
  #game-window .pad-widget .pad-panel,
  body .game-recorder-dialog {
    border-width: 17px;
    border-image-width: 17px;
    padding: 12px 13px 16px;
    max-height: calc(100dvh - 24px);
  }
  #game-window .identity,
  #game-window .hint,
  #game-window #objective {
    border-width: 9px;
    border-image-width: 9px;
  }
  #game-window .identity { padding: 7px 8px 9px; }
  #game-window .hint, #game-window #objective { padding: 5px 6px; }
  #game-window .nav button, #game-window .nav a.button {
    border-width: 5px;
    border-image-width: 5px;
    padding: 5px 6px;
    min-height: 32px;
  }
  body .screenshot-tools { padding: 8px; gap: 8px; }
}

@media (max-width: 420px) {
  #game-window .atmosphere-grid { grid-template-columns: 1fr; gap: 10px; }
  #game-window .pad-widget .pad-panel { width: 100%; }
  #game-window .card:not(.town-dialogue-card) h2,
  body .game-recorder-dialog h2 { font-size: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  #game-window button, #game-window a.button,
  body .game-recorder-dialog button, body .screenshot-tools button { transition: none; }
}