/*
 * Nuzlocke — Teambuilding Screen
 *
 * Two-column layout, party list, opponent list, box grid, detail panel,
 * moves grid, stat bars, move info strip, item description, battle footer.
 */

/* =============================================
   TEAMBUILDING SCREEN — TWO-COLUMN LAYOUT
   ============================================= */

.nz-tb-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0 16px;
  align-items: start;
  width: 100%;
}

/* Three independently-scrolling columns */
.nz-tb-columns {
  display: grid;
  grid-template-columns: var(--nz-tb-cols);
  gap: 0 16px;
  align-items: start;
  width: 100%;
  min-width: 0;
}

/* Scrollable content area within each column — height matches detail panel */
.nz-tb-col-scroll {
  overflow-y: auto;
  max-height: var(--nz-tb-scroll-max);
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.nz-section-title-danger::before {
  background: var(--nz-danger);
}

.nz-tb-hint {
  font-size: 11px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--nz-text-muted);
  margin-left: 6px;
  opacity: 0.75;
}

/* Up to 3 box cards filling a row cell */
.nz-box-row-cell {
  display: flex;
  gap: 3px;
}

/* Left column: detail panel */
.nz-tb-detail {
  background: var(--nz-surface);
  border: 1px solid var(--nz-border);
  border-left: 3px solid var(--nz-accent);
  clip-path: var(--nz-clip);
  padding: 18px 20px;
  position: sticky;
  top: 0;
  min-height: var(--nz-panel-h);
  overflow-y: auto;
  box-sizing: border-box;
}

.nz-tb-detail-empty {
  height: 100%;
  min-height: var(--nz-panel-detail-empty);
  display: flex;
  align-items: center;
  justify-content: center;
}


/* Pokemon info (1/3) beside side-by-side charts (2/3) */
.nz-tb-info-stats {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 16px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--nz-border-subtle);
  align-items: start;
}

.nz-tb-left-col {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.nz-tb-info-stats .nz-tb-detail-header {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.nz-tb-info-stats .nz-stat-view {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.nz-tb-detail-header {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--nz-border-subtle);
}

.nz-tb-detail-sprite {
  flex-shrink: 0;
}

.nz-tb-detail-info {
  flex: 1;
  min-width: 0;
  padding-top: 4px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.nz-tb-detail-info .nz-card-types {
  justify-content: flex-start;
}

.nz-tb-detail-sprite img {
  width: 96px;
  height: 96px;
  margin-bottom: -14px;
  object-fit: contain;
  image-rendering: auto;
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--nz-accent) 40%, transparent));
}

/* Player's selected Pokemon panel uses animated GIF */
.nz-tb-left-col .nz-tb-detail-sprite img {
  width: auto;
  max-width: 120px;
  height: 96px;
  padding: 0;
  margin-bottom: 0;
  object-fit: contain;
  image-rendering: auto;
}

.nz-tb-nature-ability {
  display: flex;
  flex-direction: row;
  gap: 16px;
}

.nz-tb-nature-col {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nz-tb-ability-col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nz-tb-detail-actions {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--nz-border-subtle);
}

.nz-tb-detail-evos {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

/* Styled select for the detail panel (wider than old card selects) */
.nz-tb-select {
  display: block;
  width: 100%;
  background: var(--nz-bg);
  border: 1px solid var(--nz-border);
  color: var(--nz-text);
  font-family: var(--nz-font-ui);
  font-size: 14px;
  padding: 5px 8px;
  border-radius: var(--nz-radius);
  outline: none;
  cursor: pointer;
  margin-bottom: 4px;
  box-sizing: border-box;
}

.nz-tb-select:focus {
  border-color: var(--nz-accent);
}

/* Each column: title + scrollable body */
.nz-tb-party-col,
.nz-tb-box-col,
.nz-tb-opponent-col {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* =============================================
   PARTY LIST
   ============================================= */

.nz-party-list {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-bottom: 4px;
}

.nz-party-slot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  box-sizing: border-box;
  min-height: 66px;
  user-select: none;
  background: var(--nz-elevated);
  border: 1px solid var(--nz-border);
  border-left: 2px solid transparent;
  clip-path: var(--nz-clip-sm);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.nz-party-slot:hover {
  background: color-mix(in srgb, var(--nz-accent) 5%, var(--nz-elevated));
  border-color: var(--nz-accent);
}

.nz-party-slot-selected {
  border-left-color: var(--nz-accent);
  border-color: var(--nz-accent);
  background: color-mix(in srgb, var(--nz-accent) 8%, var(--nz-elevated));
}

.nz-party-slot-error {
  border-left-color: var(--nz-danger) !important;
}

.nz-party-slot-empty {
  border-style: dashed;
  background: transparent;
  cursor: default;
  opacity: 0.25;
  justify-content: center;
  min-height: 70px;
  font-size: 12px;
  font-family: var(--nz-font-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--nz-text-dim);
}

.nz-party-slot-empty:hover {
  background: transparent;
  border-color: var(--nz-border);
}

/* Opponent slot — mirror of party slot but danger-accented */
.nz-opponent-slot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  background: var(--nz-elevated);
  border: 1px solid var(--nz-border);
  border-left: 2px solid transparent;
  clip-path: var(--nz-clip-sm);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.nz-opponent-slot:hover {
  background: color-mix(in srgb, var(--nz-danger) 5%, var(--nz-elevated));
  border-color: var(--nz-danger);
}

.nz-opponent-slot-selected {
  border-left-color: var(--nz-danger);
  border-color: var(--nz-danger);
  background: color-mix(in srgb, var(--nz-danger) 8%, var(--nz-elevated));
}

.nz-opponent-slot img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  image-rendering: auto;
  flex-shrink: 0;
}

.nz-party-slot img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  image-rendering: auto;
  flex-shrink: 0;
}

.nz-party-slot-info {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.nz-party-slot-name {
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--nz-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nz-party-slot-sub {
  font-family: var(--nz-font-mono);
  font-size: 12px;
  color: var(--nz-text-muted);
  margin-top: 1px;
}

.nz-party-slot-types {
  display: flex;
  gap: 3px;
  margin-top: 3px;
  flex-wrap: wrap;
}

.nz-party-slot:not(.nz-party-slot-empty) {
  cursor: grab;
  touch-action: none;
}

.nz-party-slot:not(.nz-party-slot-empty):active {
  cursor: grabbing;
}

.nz-party-slot-dragging {
  opacity: 0.35;
  border-style: dashed !important;
  pointer-events: none;
}

/* Drop indicators use border + padding compensation so total height never changes */
.nz-party-slot-drop-before {
  border-top: 3px solid var(--nz-accent) !important;
  padding-top: 5px; /* 7px default - 2px extra border = 5px */
}

.nz-party-slot-drop-after {
  border-bottom: 3px solid var(--nz-accent) !important;
  padding-bottom: 5px;
}

.nz-box-drop-target {
  outline: 2px dashed var(--nz-text-muted);
  outline-offset: 4px;
  border-radius: 2px;
}

.nz-tb-box-card-dragging {
  opacity: 0.35;
  border-style: dashed !important;
}

.nz-drag-ghost {
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: var(--nz-surface);
  border: 1px solid var(--nz-accent);
  clip-path: var(--nz-clip-sm);
  box-shadow: 0 4px 16px rgba(0,0,0,0.5);
  opacity: 0.92;
  min-width: 100px;
  transform: rotate(2deg);
}

.nz-drag-ghost-remove {
  border-color: var(--nz-text-muted);
  transform: rotate(-2deg);
}

.nz-drag-ghost img {
  width: 32px;
  height: 32px;
  object-fit: contain;
  flex-shrink: 0;
}

.nz-drag-ghost-name {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--nz-text);
  white-space: nowrap;
}

/* =============================================
   BOX (fourth column)
   ============================================= */

.nz-tb-box-col {
  min-width: 0;
  align-self: stretch;
}

.nz-tb-box-col .nz-tb-col-scroll {
  flex: 1;
}

.nz-tb-box-grid {
  display: grid;
  grid-template-columns: repeat(3, var(--nz-tb-box-size));
  gap: 3px;
}

.nz-tb-box-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  user-select: none;
  touch-action: none;
  width: var(--nz-tb-box-size);
  height: var(--nz-tb-box-size);
  flex-shrink: 0;
  padding: 4px;
  background: var(--nz-elevated);
  border: 1px solid var(--nz-border);
  border-left: 2px solid transparent;
  clip-path: var(--nz-clip-sm);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  overflow: hidden;
  box-sizing: border-box;
}

.nz-tb-box-card:hover:not(.nz-tb-box-card-disabled) {
  border-color: var(--nz-accent);
  background: color-mix(in srgb, var(--nz-accent) 5%, var(--nz-elevated));
}

.nz-tb-box-card-disabled {
  opacity: 0.35;
  cursor: default;
  filter: grayscale(0.6);
}

.nz-party-slot-evolve {
  animation: nz-card-evolve-glow 1.6s ease-in-out infinite;
}

.nz-tb-box-card-evolve {
  animation: nz-card-evolve-glow 1.6s ease-in-out infinite;
}

@keyframes nz-card-evolve-glow {
  0%, 100% { border-color: rgba(255, 200, 68, 0.35); box-shadow: 0 0 4px rgba(255, 200, 68, 0.1); }
  50%       { border-color: rgba(255, 200, 68, 0.85); box-shadow: 0 0 14px rgba(255, 200, 68, 0.55), 0 0 4px rgba(255, 200, 68, 0.3) inset; }
}

.nz-tb-box-card-selected {
  border-left-color: var(--nz-accent);
  border-color: var(--nz-accent);
  background: color-mix(in srgb, var(--nz-accent) 10%, var(--nz-elevated));
}

.nz-tb-box-card img {
  width: 36px;
  height: 36px;
  object-fit: contain;
  image-rendering: auto;
  flex-shrink: 0;
}

.nz-tb-box-card-name {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--nz-text-muted);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  text-align: center;
}

/* =============================================
   BATTLE AREA (bottom of sidebar)
   ============================================= */

/* Battle button footer — below the 3-column layout */
.nz-tb-battle-footer {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--nz-border-subtle);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

/* Footer action row — holds Evolve All + Battle side by side */
.nz-tb-footer-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Opponent detail panel — danger accent instead of blue */
.nz-tb-detail-opponent {
  border-left-color: var(--nz-danger);
}

/* Static move name display (opponent detail — no dropdown) */
.nz-tb-move-name {
  font-family: var(--nz-font-ui);
  font-size: 14px;
  font-weight: 600;
  color: var(--nz-text);
  padding: 5px 0;
  background: none;
  border: 1px solid transparent;
  box-sizing: border-box;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* =============================================
   MOVES GRID (shared grid across all 4 move rows)
   ============================================= */

/* All 4 move rows share one grid — fixed column widths prevent layout
   shifts when moves change. Type/Cat: fit badge min-width (5.5em at ~13px).
   BP/Acc: fits 3-digit numbers and "100%". */
.nz-moves-grid {
  display: grid;
  grid-template-columns: 150px 100px 100px 36px 44px 52px minmax(0, 1fr);
  align-items: center;
  justify-items: start;
  column-gap: 8px;
  row-gap: 6px;
  margin-bottom: 14px;
}

/* Select and move-name fill their column */
.nz-moves-grid .nz-tb-select,
.nz-moves-grid .nz-tb-move-name {
  margin-bottom: 0;
  width: 100%;
  min-width: 0;
  justify-self: stretch;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Combobox move picker — fills first column, dropdown overlays content below */
.nz-moves-grid .nz-move-select {
  justify-self: stretch;
  min-width: 0;
}

.nz-move-select {
  position: relative;
  width: 100%;
  margin-bottom: 4px;
}

.nz-move-select-input {
  display: block;
  width: 100%;
  background: var(--nz-bg);
  border: 1px solid var(--nz-border);
  color: var(--nz-text);
  font-family: var(--nz-font-ui);
  font-size: 14px;
  padding: 5px 8px;
  border-radius: var(--nz-radius);
  outline: none;
  cursor: pointer;
  box-sizing: border-box;
  margin: 0;
}

.nz-move-select-input:focus {
  border-color: var(--nz-accent);
  cursor: text;
}

.nz-move-select-dropdown {
  position: fixed;
  z-index: 9999;
  background: var(--nz-elevated);
  border: 1px solid var(--nz-accent);
  max-width: 420px;
  max-height: 240px;
  overflow-y: auto;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
}

/* Option rows: grid matching the moves table — name fills, then Type (68px), Cat (50px).
   340px dropdown gives name column exactly 190px, matching the select's grid column. */
.nz-move-select-option {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 68px 50px;
  align-items: center;
  column-gap: 8px;
  padding: 5px 8px;
  cursor: pointer;
  font-size: 13px;
}

.nz-move-select-option:hover:not(.is-disabled) {
  background: var(--nz-surface);
}

.nz-move-select-option.is-selected {
  background: rgba(74, 158, 255, 0.1);
}

.nz-move-select-option.is-disabled {
  opacity: 0.35;
  cursor: default;
}

/* Name + TM/HM suffix share the first grid column */
.nz-move-select-name {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  overflow: hidden;
}

.nz-move-select-name > span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.nz-move-select-suffix {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--nz-text-dim);
  flex-shrink: 0;
}

.nz-move-select-empty {
  padding: 8px;
  font-size: 13px;
  color: var(--nz-text-dim);
  font-style: italic;
}

/* Item select options: flex with icon instead of type/cat grid */
.nz-move-select-option.nz-item-option {
  display: flex;
  align-items: center;
  gap: 8px;
}

.nz-item-option .itemicon {
  flex-shrink: 0;
}

/* Type and cat badges fill their grid column and center — matches moves grid above */
.nz-move-select-dropdown .nz-type,
.nz-move-select-dropdown .nz-move-cat {
  display: block;
  text-align: center;
  font-size: 10px;
  padding: 1px 4px;
}

/* Type badge and category label in the moves grid: fill column, center text */
.nz-moves-grid .nz-type,
.nz-moves-grid .nz-move-cat {
  display: block;
  justify-self: center;
  text-align: center;
  white-space: nowrap;
}

/* Column header labels */
.nz-moves-col-header {
  font-family: var(--nz-font-mono);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--nz-text-dim);
  padding-bottom: 4px;
  border-bottom: 1px solid var(--nz-border);
  justify-self: stretch;
}

/* Description column: inline, wraps within its 1fr cell */
.nz-move-grid-desc {
  font-style: italic;
  font-size: 13px;
  color: var(--nz-text-muted);
  overflow-wrap: break-word;
  min-width: 0;
  justify-self: stretch;
  line-height: 1.4;
}

/* =============================================
   MOVE SLOT (item select — keeps the 2-col layout)
   ============================================= */

.nz-move-slot {
  display: grid;
  grid-template-columns: 190px 1fr;
  align-items: start;
  gap: 10px;
  margin-bottom: 8px;
}

.nz-move-slot:last-child {
  margin-bottom: 0;
}

/* Cancel the bottom margin the select uses for vertical stacking */
.nz-move-slot .nz-tb-select {
  margin-bottom: 0;
}

/* =============================================
   STAT BARS (detail panel)
   ============================================= */

.nz-stat-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 20px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--nz-border-subtle);
}

.nz-stat-split .nz-stat-bars {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.nz-stat-no-ivs {
  font-size: 13px;
  font-style: italic;
  color: var(--nz-text-dim);
  padding-top: 4px;
}

.nz-stat-bars {
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--nz-border-subtle);
}

.nz-stat-row {
  display: grid;
  grid-template-columns: 30px 1fr 28px;
  align-items: center;
  gap: 6px;
  margin-bottom: 5px;
}

.nz-stat-row:last-child {
  margin-bottom: 0;
}

.nz-stat-label {
  font-family: var(--nz-font-mono);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--nz-text-dim);
  text-align: right;
}

.nz-stat-bar-track {
  height: 6px;
  background: var(--nz-bg);
  border: 1px solid var(--nz-border);
  border-radius: 1px;
  overflow: hidden;
}

.nz-stat-bar-fill {
  height: 100%;
  transition: width 0.3s ease;
}

.nz-stat-high { background: hsl(120, 70%, 40%); box-shadow: 0 0 4px hsla(120, 70%, 40%, 0.4); }
.nz-stat-mid  { background: hsl(80,  70%, 40%); box-shadow: 0 0 4px hsla(80,  70%, 40%, 0.4); }
.nz-stat-low  { background: hsl(40,  80%, 45%); box-shadow: 0 0 4px hsla(40,  80%, 45%, 0.4); }
.nz-stat-poor { background: hsl(10,  75%, 45%); box-shadow: 0 0 4px hsla(10,  75%, 45%, 0.4); }


.nz-stat-value {
  font-family: var(--nz-font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--nz-text-muted);
  text-align: right;
}

/* =============================================
   STAT VIEW TOGGLE + RADAR
   ============================================= */

/* Wrapper that holds either bars or radar */
.nz-stat-view {
  min-height: 175px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--nz-border-subtle);
}

/* Both .nz-stat-bars and .nz-stat-split inside .nz-stat-view inherit the
   outer border/spacing, so remove their own to avoid double decoration */
.nz-stat-view .nz-stat-bars,
.nz-stat-view .nz-stat-split {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.nz-stat-view-toggle {
  display: block;
  width: fit-content;
  margin-left: auto;
  margin-bottom: 5px;
  padding: 1px 7px;
  font-family: var(--nz-font-mono);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: transparent;
  border: 1px solid var(--nz-border);
  color: var(--nz-text-dim);
  cursor: pointer;
  border-radius: 2px;
  transition: border-color 0.15s, color 0.15s;
}
.nz-stat-view-toggle:hover {
  border-color: var(--nz-accent);
  color: var(--nz-accent);
}

/* Two-column grid matching .nz-stat-split so Base/IVs labels stay in the same position */
.nz-stat-radar-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 20px;
}

.nz-stat-radar-col {
  min-width: 0;
}

/* Radar SVG — fills its flex column but capped so radar view matches bars height */
.nz-stat-radar {
  display: block;
  width: 100%;
  max-height: 120px;
  margin: 0 0 4px;
}

/* Grid background rings */
.nz-radar-grid {
  fill: none;
  stroke: var(--nz-border);
  stroke-width: 0.75;
}

/* Axis spokes */
.nz-radar-axis {
  stroke: var(--nz-border);
  stroke-width: 0.75;
}

/* Stat polygon — filled area */
.nz-radar-fill {
  fill: var(--nz-accent);
  fill-opacity: 0.15;
  transition: d 0.3s ease;
}

/* Stat polygon — filled area */
.nz-radar-fill {
  fill: var(--nz-accent);
  fill-opacity: 0.15;
  transition: d 0.3s ease;
}

/* Stat polygon — outline */
.nz-radar-stroke {
  fill: none;
  stroke: var(--nz-accent);
  stroke-width: 1.5;
  stroke-linejoin: round;
  transition: d 0.3s ease;
}

/* Vertex dots */
.nz-radar-dot {
  fill: var(--nz-accent);
}

/* Axis labels */
.nz-radar-label {
  font-family: var(--nz-font-mono);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  fill: var(--nz-text-dim);
}

/* Nature modifiers on radar labels use fill, not color */
.nz-radar-label.nz-stat-nature-up  { fill: var(--nz-success) !important; }
.nz-radar-label.nz-stat-nature-down { fill: var(--nz-danger)  !important; }

/* =============================================
   MOVE INFO STRIP (below each move dropdown)
   ============================================= */

.nz-move-info {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 2px 2px 6px;
  min-height: 20px;
}

.nz-move-cat {
  display: inline-block;
  padding: 1px 7px;
  min-width: 5.5em;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-radius: var(--nz-radius);
  border: 1px solid transparent;
}

.nz-move-cat-physical {
  background: rgba(255, 128, 0, 0.12);
  color: #e07020;
  border-color: rgba(255, 128, 0, 0.25);
}

.nz-move-cat-special {
  background: rgba(80, 96, 225, 0.12);
  color: #8090e0;
  border-color: rgba(80, 96, 225, 0.25);
}

.nz-move-cat-status {
  background: rgba(120, 120, 120, 0.12);
  color: var(--nz-text-dim);
  border-color: rgba(120, 120, 120, 0.2);
}

.nz-move-stat {
  font-family: var(--nz-font-mono);
  font-size: 12px;
  color: var(--nz-text-muted);
}

/* =============================================
   ITEM DESCRIPTION (below item dropdown)
   ============================================= */

.nz-item-desc {
  font-size: 12px;
  color: var(--nz-text-muted);
  font-style: italic;
  padding: 3px 2px 0;
  line-height: 1.4;
}

/* =============================================
   PERCENTILE BADGES (next to pokemon name)
   ============================================= */

.nz-card-nickname {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.nz-tb-percentile-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 2px;
  white-space: nowrap;
}

.nz-tb-percentile-top {
  background: var(--nz-success-dim);
  color: var(--nz-success);
  border: 1px solid var(--nz-success);
  animation: nz-border-rotate-success 2s linear infinite;
}

.nz-tb-percentile-worse {
  background: var(--nz-danger-dim);
  color: var(--nz-danger);
  border: 1px solid var(--nz-danger);
}

/* =============================================
   MOVES / ITEMS TAB BAR
   ============================================= */

.nz-tb-tabs {
  display: flex;
  border-bottom: 1px solid var(--nz-border);
  margin-bottom: 12px;
  margin-top: 4px;
}

.nz-tb-tab {
  padding: 5px 16px;
  font-family: var(--nz-font-mono);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--nz-text-dim);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}

.nz-tb-tab:hover:not(.nz-tb-tab--active) {
  color: var(--nz-text);
}

.nz-tb-tab--active {
  color: var(--nz-accent);
  border-bottom-color: var(--nz-accent);
}

/* =============================================
   RESPONSIVE — Tablet (≤1300px)
   Stack detail panel above columns so both get
   full width; the 3 party/box/opponent columns
   each get ~400px instead of ~210px.
   ============================================= */

@media (max-width: 1300px) {
  /* Detail panel spans full width above the column list */
  .nz-tb-layout {
    grid-template-columns: 1fr;
  }

  /* Remove sticky + fixed height — panel sizes to its content */
  .nz-tb-detail {
    position: static;
    min-height: auto;
  }

  .nz-tb-detail-empty {
    min-height: auto;
  }

  /* Breathing room between the detail panel and the columns below */
  .nz-tb-columns {
    margin-top: 16px;
  }
}

/* =============================================
   RESPONSIVE — Mobile (≤800px)
   ============================================= */

@media (max-width: 800px) {
  /* Stack detail panel and column lists vertically */
  .nz-tb-layout {
    grid-template-columns: 1fr;
  }

  /* On mobile the detail panel comes after the lists in DOM, so sticky
     positioning is still useful — it sticks to the top as you scroll
     the lists below it. Remove the fixed min-height so it shrinks to fit. */
  .nz-tb-detail {
    position: static;
  }

  /* Stacked columns get vertical breathing room between sections.
     margin-top covers the gap above the first item (party), which
     grid gap alone cannot provide. */
  .nz-tb-columns {
    gap: 20px 0;
    margin-top: 20px;
  }

  /* Box: always reserve at least one card row so the drop zone exists when empty */
  .nz-tb-box-col .nz-tb-col-scroll {
    min-height: var(--nz-tb-box-size);
  }

  /* Box: fill available width with as many cards as fit */
  .nz-tb-box-grid {
    grid-template-columns: repeat(auto-fill, minmax(var(--nz-tb-box-size), 1fr));
  }

  .nz-tb-box-card {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
  }

  /* Moves grid: two-line layout per move.
     Move name spans the full width; Type/Cat/BP/Acc/Target fill the row below.
     "Move" header (item 1) and Effect column (items 7,14,21,28,35) are hidden. */
  .nz-moves-grid {
    grid-template-columns: repeat(5, 1fr);
    column-gap: 6px;
    row-gap: 4px;
  }

  .nz-moves-grid > :first-child,
  .nz-moves-grid > :nth-child(7n) {
    display: none;
  }

  .nz-moves-grid .nz-tb-move-name {
    grid-column: 1 / -1;
    margin-top: 6px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--nz-border-subtle);
  }

  /* Type and category badges: fill their 1fr column */
  .nz-moves-grid .nz-type,
  .nz-moves-grid .nz-move-cat {
    min-width: 0;
    width: 100%;
    font-size: 10px;
    padding: 1px 2px;
    justify-self: stretch;
    text-align: center;
  }

  /* Stat values and column headers: center in their 1fr cells */
  .nz-moves-grid .nz-move-stat,
  .nz-moves-grid .nz-moves-col-header {
    width: 100%;
    text-align: center;
    justify-self: center;
  }

  /* Stat split — stack the two stat panels vertically with a row gap */
  .nz-stat-split,
  .nz-stat-radar-row {
    grid-template-columns: 1fr;
    gap: 14px 0;
  }

  /* Info + stats row — stack sprite/info above stats bars */
  .nz-tb-info-stats {
    grid-template-columns: 1fr;
  }

  /* Nature / ability — stack vertically instead of side-by-side */
  .nz-tb-nature-ability {
    flex-direction: column;
    gap: 8px;
  }

  /* Action bar — allow evolve buttons to wrap onto a second line */
  .nz-tb-detail-actions {
    flex-wrap: wrap;
  }

  /* Item slot — single column so the description isn't squeezed */
  .nz-move-slot {
    grid-template-columns: 1fr;
  }

  /* Tighten detail panel padding */
  .nz-tb-detail {
    padding: 14px 14px;
  }

  .nz-tb-tab {
    padding: 5px 12px;
  }
}