/**
 * Character customization ("Your look"): the pack's parchment panel, buttons and pixel font, as the "?" dialog and
 * the play HUD are (static/css/character-portrait.css .help-dialog), in either site theme: it is the game's UI.
 * Titles, tabs and buttons are in the pixel font; the card names stay in a plain face, which reads at that size.
 */

/* Modal Container */
.customization-modal {
  --ink: #3b2415;
  --accent: #e57052;
  --pixel: 'Wayfarer\'s Toy Box', monospace;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.3s ease, visibility 0s linear 0s;
}

/* Closed means out of the tab order and the accessibility tree, not just transparent. Visibility
   flips after the fade-out so the close still animates; open() also clears `inert`/aria-hidden.
   The controls inside name what they animate, never `all`: `visibility` is inherited and animatable, so a
   `transition: all` would give each button its own hidden-to-visible transition when the dialog opens, and a
   button still `hidden` on that frame refuses focus (the Tab trap then lands on nothing). */
.customization-modal.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}

/* Overlay */
.customization-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(20, 12, 8, 0.55);
}

/* The panel: the pack's frame, wide enough for three columns of cards beside the preview (the game runs from
   1024 px, where this is 992 px: 612 px for the cards) */
.customization-container {
  position: relative;
  width: min(1000px, calc(100vw - 32px));
  max-height: 90vh;
  box-sizing: border-box;
  border: solid transparent;
  border-width: 24px 24px 36px;
  border-image: url('/game-assets/ui/parts/frame-panel.png') 12 12 18 12 fill / 24px 24px 36px 24px stretch;
  background: #e4a672 padding-box; /* the frame's own parchment under it: a seam where its stretched middle meets an edge shows parchment, not the world */
  image-rendering: pixelated;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Header */
.customization-header {
  padding: 4px 12px 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.customization-header h2 {
  margin: 0;
  font: 1.35rem/1.2 var(--pixel);
  color: var(--ink);
}

.close-btn {
  border: 0;
  background: none;
  color: var(--ink);
  font: 1.6rem/1 system-ui, sans-serif;
  cursor: pointer;
  padding: 2px 6px;
}

.close-btn:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

/* Content Area */
.customization-content {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 1.5rem;
  padding: 0.5rem 12px 1rem;
  overflow-y: auto;
  flex: 1;
}

/* Preview Section */
.preview-section {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.preview-label {
  font: 1.1rem/1.2 var(--pixel);
  text-align: center;
}

.preview-frame {
  align-self: center; /* hug the canvas instead of stretching across the column, which left it a third of the box */
  background: rgba(59, 36, 21, 0.1);
  border: 3px solid var(--ink);
  border-radius: 4px;
  padding: 1.25rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

#character-preview {
  image-rendering: pixelated;
  width: 192px; /* the figure's 32 px square at 6x (updatePreview draws at the canvas's own size) */
  height: 192px;
  background: #e8d4b8; /* the sprite's own backdrop; the character is drawn over it (updatePreview) */
}

.preview-info {
  text-align: center;
  font-size: 0.9rem;
}

/* Options Section */
.options-section {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* Category Tabs: the pack's button, pressed for the open tab */
.category-tabs {
  display: flex;
  gap: 0.5rem;
}

.tab-btn,
.action-btn {
  border: 12px solid transparent;
  border-image: url('/game-assets/ui/parts/button.png') 5 fill / 12px stretch;
  image-rendering: pixelated;
  background: none;
  color: var(--ink);
  font: 1rem/1 var(--pixel);
  cursor: pointer;
}

.tab-btn {
  flex: 1;
  padding: 0.3rem 0.5rem;
  position: relative;
  z-index: 0; /* its own stacking context: the marks below paint over the button's art, under its label */
}

/* the open tab: the pressed button, and (since that art differs only in its corners) the selected card's tint over
   its face and an accent rule under its label */
.tab-btn.active {
  border-image-source: url('/game-assets/ui/parts/button-pressed.png');
}
.tab-btn.active::before,
.tab-btn.active::after {
  content: '';
  position: absolute;
  z-index: -1;
  pointer-events: none;
}
.tab-btn.active::before { inset: 0; background: rgba(229, 112, 82, 0.2); }
.tab-btn.active::after { left: 6px; right: 6px; bottom: -2px; height: 3px; background: var(--accent); }

.tab-btn:focus-visible,
.action-btn:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

/* Options Grid */
/* The grid shows whole rows only: every row is one fixed height and the viewport is exactly three of them, so a
   card is never sliced in half at the edge. When more rows sit below, the bottom fades (JS sets .has-more) —
   macOS hides scrollbars until you scroll, so the fade is what says "more below". */
.options-grid {
  --option-row: 8.5rem;
  --option-gap: 1rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: var(--option-row);
  gap: var(--option-gap);
  padding: var(--option-gap) 4px;
  box-sizing: content-box;
  max-height: calc(3 * var(--option-row) + 2 * var(--option-gap));
  overflow-y: auto;
}

/* The dialog is at most 90vh tall: below 900 px of height three rows would not fit beside the header, tabs and
   footer, and the dialog itself would cut the third row, so show two whole rows there. */
@media (max-height: 900px) {
  .options-grid {
    max-height: calc(2 * var(--option-row) + var(--option-gap));
  }
}

.options-grid.has-more {
  mask-image: linear-gradient(to bottom, #000 calc(100% - 3rem), transparent);
}

.option-btn {
  position: relative; /* anchors the selected card's check badge */
  background: rgba(59, 36, 21, 0.08);
  color: var(--ink);
  border: 3px solid var(--ink);
  border-radius: 4px;
  padding: 0.75rem 0.5rem;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.option-btn:hover {
  background: rgba(59, 36, 21, 0.16);
  transform: translateY(-2px);
}

.option-btn:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 2px;
}

.option-btn.selected {
  border-color: var(--accent);
  background: rgba(229, 112, 82, 0.16);
}

.option-btn.selected::after {
  content: '✓';
  position: absolute;
  top: 6px;
  right: 6px;
  background: var(--accent);
  color: #fff;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}

.option-preview {
  width: 68px; /* the 64 px sprite inside a 2 px border */
  height: 68px;
  background: #e8d4b8;
  border: 2px solid var(--ink);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.option-sprite {
  width: 64px;
  height: 64px;
  image-rendering: pixelated;
}

.option-name {
  font-size: 0.85rem;
  text-align: center;
  color: inherit;
  font-weight: 600;
}

/* Footer */
.customization-footer {
  display: flex;
  gap: 1rem;
  padding: 0.5rem 12px;
  justify-content: flex-end;
}

.action-btn {
  min-width: 110px;
  padding: 0.3rem 0.75rem;
}

/* Keyboard Hint */
.keyboard-hint {
  text-align: center;
  padding: 0.25rem 12px 0;
  font-size: 0.8rem;
}
/* the keys it names are a keyboard's; on a touch screen (the pad is under this dialog) it says how touch works */
.keyboard-hint__touch { display: none; }
@media (pointer: coarse) {
  .keyboard-hint__keys { display: none; }
  .keyboard-hint__touch { display: inline; }
}

/* Scrollbar Styling */
.options-grid::-webkit-scrollbar,
.customization-content::-webkit-scrollbar {
  width: 10px;
}

.options-grid::-webkit-scrollbar-track,
.customization-content::-webkit-scrollbar-track {
  background: rgba(59, 36, 21, 0.1);
  border-radius: 5px;
}

.options-grid::-webkit-scrollbar-thumb,
.customization-content::-webkit-scrollbar-thumb {
  background: var(--ink);
  border-radius: 5px;
}

/* Narrow screens (the game itself runs from 1024 px; kept so the dialog never breaks) */
@media (max-width: 768px) {
  .customization-content {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .preview-section {
    order: -1;
  }

  .options-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-height: 300px;
  }

  .customization-footer {
    flex-direction: column;
  }

  .action-btn {
    width: 100%;
  }
}