/* Reusable pixel UI pieces: panels, buttons, bars, tabs, chips, toasts, modals. */

.panel {
  background: var(--panel);
  border: 4px solid var(--border);
  box-shadow: inset 0 0 0 2px var(--c-dark), var(--shadow);
  padding: 16px;
}

.stage-frame {
  position: relative;
  border: 4px solid var(--border);
  box-shadow: inset 0 0 0 2px var(--c-dark), var(--shadow);
  background: var(--panel-inset);
  line-height: 0;
}

/* Buttons */
.btn {
  font-family: var(--font-pixel);
  font-size: 11px;
  line-height: 1.3;
  text-transform: uppercase;
  padding: 12px 14px;
  color: var(--c-ink);
  background: var(--c-yellow);
  border: 3px solid var(--border);
  box-shadow: inset -3px -3px 0 rgba(0, 0, 0, 0.25), inset 3px 3px 0 rgba(255, 255, 255, 0.4);
  cursor: pointer;
  user-select: none;
}
@media (hover: hover) { .btn:hover:not(:disabled) { filter: brightness(1.08); } }
.btn:active:not(:disabled) { transform: translateY(2px); box-shadow: inset 3px 3px 0 rgba(0, 0, 0, 0.25); }
.btn:disabled { filter: grayscale(0.9) brightness(0.6); cursor: not-allowed; }
.btn-primary { background: var(--c-lime); }
.btn-danger { background: var(--c-orange); }
.btn-danger.is-armed { background: var(--c-red); color: var(--c-white); }
.btn-ghost { background: var(--c-dark); color: var(--c-white); }
.btn-small { font-size: 9px; padding: 8px 10px; }
.btn-big { font-size: 13px; padding: 14px 18px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

/* Inputs */
.field-label { display: block; font-family: var(--font-pixel); font-size: 10px; color: var(--accent); margin-bottom: 10px; }
.input-row { display: flex; gap: 10px; flex-wrap: wrap; }
.input {
  flex: 1 1 200px;
  min-width: 0;
  font-size: 26px;
  padding: 6px 12px;
  background: var(--panel-inset);
  border: 3px solid var(--border);
  box-shadow: inset 3px 3px 0 rgba(0, 0, 0, 0.35);
  color: var(--text);
}
.input::placeholder { color: var(--c-slate); }

/* Bars */
.bar-row { margin-bottom: 10px; }
.bar-row--compact { margin: 4px 0 2px; }
.bar-head { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 3px; }
.bar-label { color: var(--muted); }
.bar-row--compact .bar-head { font-size: 18px; }
.bar {
  position: relative;
  height: 16px;
  background: var(--c-ink);
  border: 3px solid var(--border);
}
.bar-row--compact .bar { height: 10px; border-width: 2px; }
.bar__fill {
  height: 100%;
  width: 0;
  background: var(--fill, var(--c-green));
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.25), inset 0 2px 0 rgba(255, 255, 255, 0.3);
  transition: width 0.3s steps(6);
}
.bar::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(90deg, transparent 0 10px, rgba(11, 12, 20, 0.45) 10px 12px);
  pointer-events: none;
}
.is-low .bar__fill { animation: low-blink 1s steps(2) infinite; }
.is-low .bar-label { color: var(--c-orange); }
@keyframes low-blink { 50% { opacity: 0.45; } }

/* Tabs + segmented control */
.tabs, .seg-group { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.tab, .seg {
  font-family: var(--font-pixel);
  font-size: 10px;
  padding: 10px 12px;
  background: var(--panel-inset);
  border: 3px solid var(--border);
  color: var(--muted);
  cursor: pointer;
}
@media (hover: hover) { .tab:hover, .seg:hover { color: var(--text); } }
.tab.is-active, .seg.is-active { background: var(--c-blue); color: var(--c-white); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.3); }

/* Chips + tags */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  display: inline-block;
  font-family: var(--font-pixel);
  font-size: 8px;
  line-height: 1.4;
  padding: 5px 7px;
  border: 2px solid var(--border);
  background: var(--chip, var(--c-slate));
  color: var(--c-ink);
  white-space: nowrap;
}
.chip--buff { --chip: var(--c-cyan); }
.chip--debuff { --chip: var(--c-orange); }
.tag {
  display: inline-block;
  font-size: 17px;
  padding: 0 6px;
  margin-left: 8px;
  background: var(--c-dark);
  color: var(--muted);
  vertical-align: middle;
}
.tag--favorite { background: var(--c-teal); color: var(--c-lime); }
.tag--disliked { background: var(--c-plum); color: var(--c-orange); }

/* Toasts */
.toast-host {
  position: fixed;
  left: 50%;
  bottom: calc(16px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: min(460px, calc(100vw - 32px));
  z-index: 50;
  pointer-events: none;
}
.toast {
  padding: 10px 14px;
  background: var(--panel);
  border: 3px solid var(--border);
  border-left: 8px solid var(--c-sky);
  box-shadow: var(--shadow);
  animation: toast-in 0.2s steps(3);
}
.toast--good { border-left-color: var(--c-lime); }
.toast--warn { border-left-color: var(--c-orange); }
.toast--bad { border-left-color: var(--c-red); }
.toast.is-leaving { opacity: 0; transition: opacity 0.25s steps(3); }
@keyframes toast-in { from { transform: translateY(12px); opacity: 0; } }

/* Modal */
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  padding: 16px;
  padding-top: max(16px, env(safe-area-inset-top));
  padding-bottom: max(16px, env(safe-area-inset-bottom));
  background: rgba(11, 12, 20, 0.75);
}
.modal { width: min(520px, 100%); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); overflow: auto; overscroll-behavior: contain; }

/* Lists */
.plain-list, .ability-list, .result-list, .feature-list { list-style: none; margin: 0 0 12px; padding: 0; }
.plain-list li, .feature-list li { margin-bottom: 8px; }
.ability-list li { padding: 8px 0; border-bottom: 2px dashed var(--c-dark); }
.ability-list li:last-child { border-bottom: 0; }
.ability-name { color: var(--accent); }
.move-row { display: flex; align-items: center; gap: 12px; }
.move-info { flex: 1; min-width: 0; }
.move-row > .btn, .move-row > .tag { flex-shrink: 0; }
.move-row.is-locked { opacity: 0.5; }
.result-list li::before { content: '▸ '; color: var(--accent); }

/* Touch devices: comfortable tap targets (≥44px) */
@media (pointer: coarse) {
  .btn { min-height: 44px; }
  .btn-small { min-height: 40px; padding: 8px 12px; }
  .tab, .seg { min-height: 44px; }
  .input { min-height: 48px; }
}

/* Music / SFX toggles */
.sound-toggles { display: flex; gap: 6px; }
.sound-toggle.is-off { opacity: 0.55; text-decoration: line-through; }

/* Arena tiers locked behind trophies */
.seg.is-locked { opacity: 0.6; cursor: not-allowed; }
.trophy-note { margin: 0 0 6px; }