/* queue-mode-button.css: automatic queue buttons shared by the game and Stage creator.
   Stage settings supply colors and dimensions through --qm-*; this file defines structure. */
@font-face {
  font-family: 'Arcana';
  src: url('../assets/fonts/Arcana-Font/font%20files/WOFF2/Arcana-Regular.woff2') format('woff2'),
       url('../assets/fonts/Arcana-Font/font%20files/WOFF/Arcana-Regular.woff') format('woff'),
       url('../assets/fonts/Arcana-Font/font%20files/TTF/Arcana-Regular.ttf') format('truetype');
  font-display: swap;
}
@font-face {
  font-family: 'Pixeloid Sans';
  src: url('../assets/fonts/Pixeloid/PixeloidSans.ttf') format('truetype');
  font-weight: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Pixeloid Sans';
  src: url('../assets/fonts/Pixeloid/PixeloidSans-Bold.ttf') format('truetype');
  font-weight: bold;
  font-display: swap;
}
@font-face {
  font-family: 'DotGothic16';
  src: url('../assets/fonts/DotGothic16/DotGothic16-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  font-display: swap;
}

.queue-modes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
.queue-modes[hidden] { display: none; }
.queue-modes .queue-mode {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 4px;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 14px 10px;
  border: 2px solid var(--qm-border, #182029);
  border-radius: 0;
  background: var(--qm-background, #f16c3f);
  color: var(--qm-text, #182029);
  box-shadow: 4px 4px 0 var(--qm-border, #182029);
  font-family: 'Arcana', sans-serif;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
  overflow: hidden; /* Clip icons larger than their button so they cannot overlap neighboring buttons. */
}
.queue-modes .queue-mode:not(:disabled):hover { background: var(--qm-background, #f16c3f); filter: brightness(1.06); }
.queue-modes .queue-mode:disabled { opacity: .6; cursor: wait; }
/* Left-aligned icons use the full height, with text to the right. */
.queue-modes .queue-mode.layout-row { grid-template-columns: auto minmax(0, 1fr); justify-items: start; column-gap: 12px; text-align: left; }
.queue-modes .queue-mode.layout-row .queue-mode-icon { grid-row: 1 / span 3; align-self: center; }

/* Long titles wrap inside their button. */
.queue-mode > * { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.queue-mode .queue-mode-icon { display: grid; place-items: center; font-size: var(--qm-icon-size, 48px); line-height: 1; }
.queue-mode .queue-mode-icon.has-background { padding: 4px; }
/* Canvas pixel art uses integer scaling (queue-mode-button.js). */
.queue-mode .queue-mode-icon-image { display: block; image-rendering: pixelated; }
.queue-mode .queue-mode-title { color: inherit; font: 700 var(--qm-title-size, 15px) 'Arcana', sans-serif; }
.queue-mode .queue-mode-description { color: inherit; font: var(--qm-description-size, 12px)/1.3 var(--z-font-text, 'Pixeloid Sans', 'DotGothic16', monospace); text-transform: none; }
.queue-mode .queue-mode-count {
  margin-top: 2px;
  padding: 2px 8px;
  background: #0b0f1426;
  color: inherit;
  font: 18px var(--z-font-text, 'Pixeloid Sans', 'DotGothic16', monospace);
}
.queue-mode .queue-mode-count:empty, .queue-mode [hidden] { display: none; }