/* Painted raster menu furniture. Native labels and controls remain live HTML. */
:root {
  --pb-panel-art: url("../art/ui/presidential-menu-frame-v1.png");
  --pb-button-art: url("../art/ui/presidential-button-v1.png");
  /* Source pixels: panel1254sq, button2048x768. Preserve painted corners. */
  --pb-panel-slice: 235;
  --pb-button-slice: 220 230;
  --pb-menu-cream: #fff1d3;
  --pb-menu-gold: #e8c77f;
  --pb-menu-muted: #c9c1ad;
  --pb-menu-serif: Georgia, "Palatino Linotype", "Times New Roman", serif;
}

.page-header {
  background-color: #091421;
  border: 0 solid transparent;
  border-bottom-width: 7px;
  border-image-source: var(--pb-panel-art);
  border-image-slice: var(--pb-panel-slice) fill;
  border-image-width: 0 0 7px;
  border-image-repeat: stretch;
}
.page-header > a, .page-header nav, .arena-heading h1 {
  font-family: var(--pb-menu-serif);
  color: var(--pb-menu-cream);
}
.page-header > a { font-size: 20px; letter-spacing: .035em; }
.page-header nav a { text-decoration-color: #d2ac68; text-underline-offset: 4px; }

#game-window .game-panel[open],
#game-window #game-recorder-dialog,
#game-window #public-recorder-dialog {
  box-sizing: border-box;
  width: min(620px, calc(100% - 28px));
  max-width: calc(100% - 28px);
  max-height: calc(100% - 20px);
  border: 28px solid transparent;
  border-image-source: var(--pb-panel-art);
  border-image-slice: var(--pb-panel-slice) fill;
  border-image-width: 28px;
  border-image-outset: 0;
  border-image-repeat: stretch;
  border-radius: 0;
  padding: 12px 16px 16px;
  color: var(--pb-menu-cream);
  background-color: #0b1726;
  background-clip: padding-box;
  box-shadow: 0 14px 45px #000a;
  font: 13px/1.5 system-ui, sans-serif;
  scrollbar-color: #c2a36c #101b29;
  scrollbar-width: thin;
  overflow-x: hidden;
  overscroll-behavior: contain;
}
#game-window #pause-menu[open] { width: min(540px, calc(100% - 28px)); }
#game-window :is(#character-menu, #move-list, #animation-gallery, #original-art-gallery)[open] {
  width: min(820px, calc(100% - 28px));
}
#game-window .game-panel h2,
#game-window #game-recorder-dialog h2,
#game-window #public-recorder-dialog h2 {
  margin: 0 0 10px;
  color: var(--pb-menu-gold);
  font: 700 25px/1.15 var(--pb-menu-serif);
  font-variant: small-caps;
  letter-spacing: .035em;
  text-wrap: balance;
}
#game-window .game-panel h3,
#game-window #game-recorder-dialog h3 { color: var(--pb-menu-gold); font-family: var(--pb-menu-serif); }
#game-window .game-panel :is(p, small, span),
#game-window #game-recorder-dialog :is(p, small, span) { overflow-wrap: anywhere; }
#game-window .game-panel .menu-hint,
#game-window .game-panel :is(.move-facing, .move-context, .move-shortcut, .preview-tracker-note),
#game-window #game-recorder-dialog :is(p, .game-recorder-hints),
#game-window #public-recorder-dialog p {
  color: var(--pb-menu-muted);
  font-size: 12px;
  line-height: 1.5;
}

/* The painted plate supplies the ornament; the lettering stays selectable. */
#game-window .game-panel button,
#game-window #game-recorder-dialog button,
#game-window #public-recorder-dialog button,
#game-window .match-actions button,
#game-window .match-artwork-result button,
#game-window :is(#pause-button, #preview-stop-button, #game-recorder-button) {
  box-sizing: border-box;
  min-width: 0;
  min-height: 42px;
  max-width: 100%;
  border: 12px solid transparent;
  border-image-source: var(--pb-button-art);
  border-image-slice: var(--pb-button-slice) fill;
  border-image-width: 12px;
  border-image-repeat: stretch;
  border-radius: 0;
  padding: 4px 10px;
  color: var(--pb-menu-cream);
  background: #421b24;
  background-clip: padding-box;
  font: 700 14px/1.25 var(--pb-menu-serif);
  letter-spacing: .015em;
  white-space: normal;
  overflow-wrap: anywhere;
  text-shadow: 0 1px 2px #130a08;
  transition: filter 120ms ease, box-shadow 120ms ease;
}
#game-window .game-panel button:hover,
#game-window :is(#game-recorder-dialog, #public-recorder-dialog, .match-actions) button:hover,
#game-window :is(#pause-button, #preview-stop-button, #game-recorder-button):hover {
  background-color: #421b24;
  filter: brightness(1.16);
}
#game-window :is(.game-panel, #game-recorder-dialog, #public-recorder-dialog) :is(button, select, input, a):focus-visible,
#game-window :is(.game-panel, #game-recorder-dialog, #public-recorder-dialog) [data-gamepad-focus="true"],
#game-window :is(.match-actions, .match-artwork-result) button:focus-visible {
  outline: 3px solid #fff1ae !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 5px #101723, 0 0 18px #e4ba6a99;
}
#game-window .game-panel button[aria-pressed="true"] {
  box-shadow: 0 0 0 2px #e4c47b, 0 0 12px #b4873e66;
  color: #fffbe8;
}
#game-window :is(.game-panel, #game-recorder-dialog, #public-recorder-dialog) button:disabled {
  opacity: .48;
  filter: saturate(.5);
}
#game-window .game-panel label,
#game-window #game-recorder-dialog label {
  min-width: 0;
  font-size: 13px;
  line-height: 1.4;
  color: var(--pb-menu-cream);
}
#game-window .game-panel select,
#game-window #game-recorder-dialog input[type="text"] {
  min-height: 38px;
  max-width: 100%;
  border: 1px solid #b5965e;
  border-radius: 2px;
  background: #101d2e;
  color: var(--pb-menu-cream);
  padding: 7px 9px;
  font: 13px/1.4 system-ui, sans-serif;
}
#game-window .game-panel :is(input[type="checkbox"], input[type="radio"]) {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  accent-color: #d3ad63;
}
#game-window :is(.game-panel, #game-recorder-dialog) input[type="range"] { accent-color: #d3ad63; }
#game-window #pause-menu label:has(select) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); }
#game-window #pause-menu select { width: 100%; max-width: 100%; }

/* Quiet inset leather surfaces repeat the same raster frame at a smaller size. */
#game-window .game-panel :is(.move-card, .controller-slot, .preview-tracker-metric, .preview-tracker-item),
#game-window #game-recorder-dialog :is(fieldset, .game-recorder-hints, .game-recorder-upload-progress, #game-recorder-title-keyboard, .game-recorder-destination),
#game-window #public-recorder-dialog label {
  border: 9px solid transparent;
  border-image-source: var(--pb-panel-art);
  border-image-slice: var(--pb-panel-slice) fill;
  border-image-width: 9px;
  border-image-repeat: stretch;
  border-radius: 0;
  background-color: #101c2b;
  padding: 7px;
}
#game-window .controller-slot strong { color: var(--pb-menu-gold); font-family: var(--pb-menu-serif); font-size: 19px; }
#game-window .controller-slot span { color: var(--pb-menu-muted); font-size: 12px; }
#game-window .mapping-instruction { color: var(--pb-menu-gold); font-size: 22px; }

#game-window #character-menu[open] { display: flex; flex-direction: column; height: calc(100% - 20px); overflow: hidden; }
#game-window #character-menu > :is(h2, p, button) { flex: none; }
#game-window #character-options { flex: 1; min-height: 0; overflow: auto; padding: 5px; align-content: start; }
#game-window .character-options { gap: 10px; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: max-content; }
#game-window #character-options { grid-template-columns: repeat(4, minmax(0, 1fr)); }
#game-window .character-options button { margin: 0; text-align: center; padding: 6px; line-height: 1.3; height: max-content; }
#game-window #character-options .president-thumb { width: 64px !important; height: 64px !important; }
#game-window .character-options small { font: 11px/1.4 system-ui, sans-serif; color: #e7cfac; margin-top: 5px; }

#game-window #move-list .move-guide-header { gap: 8px; }
#game-window #move-list .move-legend { color: #f2d795; font-size: 12px; }
#game-window #move-list .move-facing { font-size: 11px; }
#game-window #move-list .move-group h3 { font-size: 17px; letter-spacing: .03em; margin: 12px 0 8px; }
#game-window #move-list .move-card h4 { font: 700 17px/1.2 var(--pb-menu-serif); color: var(--pb-menu-cream); }
#game-window #move-list :is(.motion-tile, .attack-tile) { border-color: #c6ab70; background: #182a3a; }
#game-window #move-list .attack-tile { background: #612b34; }
#game-window #move-list .kick-tile { background: #1d4b5a; }
#game-window #move-list .attack-tile small { color: var(--pb-menu-cream); font-size: 9px; }
#game-window #move-list .move-preview { min-height: 38px; font-size: 12px; }
#game-window #move-list-content p { font-size: 12px; }
#game-window #animation-gallery #animation-preview { height: 32%; max-height: 180px; border-color: #b5965e; background: #0d1b2b; }
#game-window #animation-gallery[data-move-preview="true"] #animation-preview { flex: 1; height: 0; max-height: none; }
#game-window #animation-preview-name { font-size: 12px; color: var(--pb-menu-gold); }
#game-window #world-options { gap: 10px; padding: 6px; grid-auto-rows: max-content; }
#game-window #world-options button { text-align: left; min-height: 50px; height: max-content; }
#game-window #world-options p { font-size: 12px; }
#game-window .preview-tracker-header .menu-hint { font-size: 12px; }
#game-window .preview-tracker-tabs { flex-wrap: wrap; }
#game-window .preview-tracker-tabs button { flex-basis: 20%; }
#game-window .preview-tracker-metric strong { color: var(--pb-menu-gold); font: 700 22px var(--pb-menu-serif); }
#game-window .preview-tracker-metric span,
#game-window .preview-tracker-item p { font-size: 12px; }
#game-window .preview-tracker-item strong { font-size: 14px; }
#game-window .preview-tracker-pagination span { color: var(--pb-menu-gold); font-size: 12px; }
#game-window .original-art-header :is(p, #original-art-count),
#game-window .original-art-selection,
#game-window .original-art-view-hint { color: var(--pb-menu-muted); font-size: 11px; }
#game-window .original-art-card strong,
#game-window .original-art-card span { font-size: 11px; }
#game-window .original-art-view-details h3 { font-size: 18px; }
#game-window .original-art-view-details p { font-size: 11px; }
#game-window .original-art-image-stage { background: #0b1624; border-color: #b5965e; }
#game-window #game-recorder-dialog a { color: var(--pb-menu-gold); }
#game-window .game-recorder-actions button { flex: 1 1 150px; }
#game-window #game-recorder-dialog .game-recorder-key-grid button {
  min-height: 36px;
  border-width: 5px;
  border-image-width: 5px;
  padding: 4px 2px;
  font-size: 12px;
}
#game-window .match-actions button { font-size: 14px; }
#game-window :is(#pause-button, #preview-stop-button, #game-recorder-button) { min-height: 30px; border-width: 6px; border-image-width: 6px; padding: 1px 6px; font-size: 11px; }

@media (max-width: 600px) {
  .page-header > a { font-size: 16px; }
  .page-header nav { gap: 9px; }
  #game-window .game-panel[open],
  #game-window #game-recorder-dialog,
  #game-window #public-recorder-dialog {
    position: fixed;
    inset: 12px;
    transform: none;
    margin: auto;
    width: calc(100vw - 24px);
    max-width: calc(100vw - 24px);
    max-height: calc(100dvh - 24px);
    height: fit-content;
    border-width: 20px;
    border-image-width: 20px;
    padding: 10px;
    font-size: 13px;
  }
  #game-window :is(#character-menu, #move-list, #animation-gallery, #original-art-gallery, #world-environment-menu, #preview-tracker-menu)[open] { width: calc(100vw - 24px); height: calc(100dvh - 24px); }
  #game-window .menu-veil:not([hidden]),
  #game-window .game-recorder-shade:not([hidden]),
  #game-window #public-recorder-shade:not([hidden]) { position: fixed; inset: 0; background: #030a14df; }
  #game-window .game-panel h2,
  #game-window #game-recorder-dialog h2,
  #game-window #public-recorder-dialog h2 { font-size: 23px; }
  #game-window .game-panel button,
  #game-window :is(#game-recorder-dialog, #public-recorder-dialog) button { min-height: 44px; font-size: 14px; }
  #game-window #pause-menu label:has(select) { grid-template-columns: 1fr; gap: 5px; }
  #game-window .game-panel select { min-height: 44px; }
  #game-window .game-panel :is(label, .menu-hint) { font-size: 12px; }
  #game-window :is(#character-options, .character-options) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  #game-window #character-options .president-thumb { width: 60px !important; height: 60px !important; }
  #game-window .character-options small { font-size: 10px; }
  #game-window #move-list .move-guide-header { display: block; }
  #game-window #move-list .move-guide-header > button { margin: 6px 0; font-size: 13px; }
  #game-window #move-list .move-legend { font-size: 11px; }
  #game-window #move-list .move-facing { font-size: 10px; }
  #game-window #move-list .move-cards { grid-template-columns: 1fr; }
  #game-window #move-list .move-context,
  #game-window #move-list .move-shortcut { font-size: 11px; }
  #game-window #animation-gallery #animation-preview { height: 140px; max-height: 25dvh; }
  #game-window #animation-gallery .animation-guide-header { flex-direction: column; align-items: stretch; }
  #game-window #animation-gallery .animation-guide-header h2 { flex: none; width: 100%; }
  #game-window #animation-gallery .animation-guide-header > button { align-self: flex-start; }
  #game-window #world-options { grid-template-columns: 1fr; }
  #game-window .world-menu-header .menu-hint { font-size: 11px; }
  #game-window .preview-tracker-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #game-window .preview-tracker-tabs button { flex-basis: 40%; }
  #game-window .preview-tracker-actions { flex-wrap: wrap; }
  #game-window .preview-tracker-actions button { flex-basis: 40%; }
  #game-window .original-art-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #game-window .original-art-card { min-height: 125px; }
  #game-window .original-art-card img { height: 76px; }
  #game-window .original-art-header { display: block; }
  #game-window .original-art-view-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #game-window .match-actions button { font-size: 11px; min-height: 34px; }
  #game-window :is(#pause-button, #preview-stop-button, #game-recorder-button) { font-size: 9px; min-height: 25px; }
}
@media (prefers-reduced-motion: reduce) {
  #game-window button { transition: none; }
}
@media (forced-colors: active) {
  #game-window .game-panel[open], #game-window dialog button { border-image: none; border-color: ButtonText; }
}