/* ─── Panel (flat, no blur) ─── */
.panel {
  background: var(--nebula-color-panel);
  border: 1px solid var(--nebula-color-border);
  border-radius: var(--nebula-radius-md);
  padding: var(--nebula-spacing-lg);
}

/* ─── Focusable — flat neon border, no glow/blur ─── */
.focusable {
  border: 2px solid transparent;
  border-radius: var(--nebula-radius-md);
  outline: none;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  will-change: transform, border-color;
  transform: translateZ(0);
  transition:
    transform var(--nebula-duration-nav) var(--nebula-ease-console),
    border-color var(--nebula-duration-nav) var(--nebula-ease-console),
    background-color var(--nebula-duration-nav) var(--nebula-ease-standard);
}

.focusable.is-focused {
  border-color: var(--nebula-color-accent);
  transform: scale(1.03) translateZ(0);
}

.sidebar-nav-item.focusable.is-focused,
.guide-rail-item.focusable.is-focused,
.guide-nav-item.focusable.is-focused {
  border-top-color: transparent;
  border-bottom-color: transparent;
  border-left-color: var(--nebula-color-accent);
  border-right-color: var(--nebula-color-purple);
  transform: none;
}

.focusable.is-pressed {
  animation: uiPressPulse var(--nebula-duration-fast) var(--nebula-ease-snap);
}

/* ─── Tile ─── */
.tile {
  min-height: 160px;
  min-width: 280px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--nebula-spacing-xs);
  background: var(--nebula-color-panel-alt);
  color: var(--nebula-color-text);
  border-radius: var(--nebula-radius-md);
  padding: var(--nebula-spacing-lg);
  transform-origin: center;
  position: relative;
  overflow: hidden;
  border: 2px solid var(--nebula-color-border);
}

.tile.is-focused {
  border-color: var(--nebula-color-accent);
  transform: scale(1.04) translateZ(0);
}

.tile-icon {
  font-size: 38px;
  line-height: 1;
  opacity: 0.9;
  transition: transform var(--nebula-duration-nav) var(--nebula-ease-console);
}

.tile.is-focused .tile-icon {
  transform: scale(1.06) translateY(-2px);
}

.tile-label {
  margin: 0;
  font-size: clamp(20px, 2vw, 26px);
  font-weight: 700;
  letter-spacing: -0.01em;
  z-index: 1;
}

.tile-meta {
  margin: 0;
  font-size: 14px;
  color: var(--nebula-color-muted);
  z-index: 1;
}

.tile-accent-bar {
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  height: 3px;
  background: var(--nebula-color-accent);
  opacity: 0;
  transform: scaleX(0);
  transform-origin: left center;
  transition:
    opacity var(--nebula-duration-nav) var(--nebula-ease-console),
    transform var(--nebula-duration-nav) var(--nebula-ease-console);
}

.dashboard-tile.is-focused .tile-accent-bar {
  opacity: 1;
  transform: scaleX(1);
}

/* ─── Controller button prompts ─── */
.btn-prompt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 800;
  flex-shrink: 0;
  line-height: 1;
}

.btn-a { background: var(--btn-a); color: #fff; }
.btn-b { background: var(--btn-b); color: #fff; }
.btn-x { background: var(--btn-x); color: #fff; }
.btn-y { background: var(--btn-y); color: #fff; }

.btn-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
  height: 18px;
  border-radius: var(--nebula-radius-sm);
  font-size: 11px;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: var(--nebula-color-muted);
}

/* ─── Button-like ─── */
.button-like {
  background: var(--nebula-color-panel-alt);
  color: var(--nebula-color-text);
  padding: var(--nebula-spacing-md) var(--nebula-spacing-lg);
  border-radius: var(--nebula-radius-sm);
}

/* ─── Animations ─── */
@keyframes uiPressPulse {
  0%   { transform: scale(1); }
  40%  { transform: scale(0.97); }
  100% { transform: scale(1); }
}
