/* ============================================================
   Rogue Sidebar (6-slot) - v0
   ============================================================ */

#control-rail .control-buttons[data-rogue-sidebar-active="1"] {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.rogue-sidebar-btn {
  width: 100%;
  min-height: 56px;
  border-radius: 14px;
  border: 1px solid var(--theme-panel-border);
  background: rgba(0,0,0,0.28);
  color: var(--theme-primary-bright);
  cursor: pointer;
  font-family: var(--theme-font-data, 'Courier New', monospace);
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 12px;
  box-sizing: border-box;
}

.rogue-sidebar-btn:hover {
  border-color: var(--theme-primary-bright);
  background: var(--theme-primary-glow);
}

.rogue-sidebar-btn.disabled {
  opacity: 0.35;
  cursor: default;
}

.rogue-sidebar-btn.empty {
  opacity: 0.45;
}

/* Empty-slot framing (prime for discovery) */
.rogue-sidebar-btn.empty {
  border-style: dashed;
  border-color: var(--theme-panel-border);
  background: rgba(0, 0, 0, 0.18);
}

@keyframes rsFlash {
  0% { box-shadow: 0 0 0 rgba(0,0,0,0); background: rgba(0,0,0,0.18); }
  45% { box-shadow: 0 0 16px var(--theme-primary-glow); background: var(--theme-primary-glow); }
  100% { box-shadow: 0 0 0 rgba(0,0,0,0); background: rgba(0,0,0,0.18); }
}

#control-rail .control-buttons.rs-flash {
  animation: rsFlash 420ms ease-out;
}


.rogue-sidebar-btn .rs-emoji {
  font-size: 22px;
  line-height: 1;
}

@media (max-width: 600px) and (orientation: portrait) {
  /* Restore 2×3 grid: override the flex-column rule (which has higher specificity
     from the ID selector) back to a 2-column CSS grid in portrait mode. */
  #control-rail .control-buttons[data-rogue-sidebar-active="1"] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: minmax(24px, auto);
    align-content: start;
    gap: 2px;
  }

  /* Compact rogue sidebar buttons for the narrow 2-column portrait layout */
  .rogue-sidebar-btn {
    min-height: 24px;
    width: auto;
    padding: 1px 3px;
    font-size: 0.75em;
    min-width: 0;
    max-width: none;
    gap: 3px;
  }

  /* Very slightly smaller emoji in portrait */
  .rogue-sidebar-btn .rs-emoji {
    font-size: 11px;
  }

  /* Slightly larger font for better readability */
  .rogue-sidebar-btn .rs-label {
    font-size: 0.8em;
    overflow: hidden;
    white-space: nowrap;
    min-width: 0;
    /* Override uppercase from .control-buttons button to preserve abbreviation case */
    text-transform: none;
  }
}

/* Landscape small-screen: moderate emoji shrink */
@media (max-width: 767px) and (orientation: landscape) {
  .rogue-sidebar-btn .rs-emoji {
    font-size: 16px;
  }

  .rogue-sidebar-btn {
    min-height: 32px;
    padding: 4px 6px;
    font-size: 0.8em;
    gap: 6px;
  }
}

.rogue-sidebar-btn .rs-label {
  flex: 1;
  text-align: left;
  overflow: hidden;
  /* No text-overflow:ellipsis — vowel-dropped names clip naturally at container edge */
  white-space: nowrap;
  min-width: 0;
  /* Override uppercase from .control-buttons button to preserve abbreviation case */
  text-transform: none;
}

/* Legacy qty span (hidden — replaced by rs-qty-overlay) */
.rogue-sidebar-btn .rs-qty {
  display: none;
}

/* Qty overlay: floats over the label text when qty > 1.
   Only rendered when qty > 1 so single cards have full label space. */
.rogue-sidebar-btn .rs-qty-overlay {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.7em;
  font-weight: bold;
  color: var(--theme-primary);
  background: rgba(0, 0, 0, 0.7);
  padding: 0 3px;
  border-radius: 3px;
  pointer-events: none;
  z-index: 2;
  line-height: 1.3;
}

/* 3D printer eligible glow */
.rogue-sidebar-btn.card-button.printer-eligible {
  box-shadow: 0 0 10px rgba(255, 107, 0, 0.12);
}

.rogue-sidebar-toggle {
  letter-spacing: 1px;
}

.rogue-sidebar-cycle {
  letter-spacing: 1px;
}

/* Equippable indicator (matches requested spec) */
.card-button.equippable {
  box-shadow: 0 0 0 1px var(--glow-drag-target);
}

.card-button.equippable.selected {
  box-shadow: 0 0 8px var(--glow-drag-target);
  border-color: var(--frame-card-drag-target);
}

/* STR draw feedback: ghost joker cursor.
   Note: we intentionally keep the real cursor visible for precision.
*/
.rs-ghost-joker {
  position: fixed;
  z-index: 99998;
  pointer-events: none;
  font-size: 22px;
  opacity: 0.55;
  transform: rotate(-8deg) scale(0.9);
  transition: opacity 0.12s, transform 0.12s;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.6));
  user-select: none;
  -webkit-user-select: none;
}