/* Stage 4: balanced bottom navigation for mobile. */

.app {
  padding-bottom: calc(92px + env(safe-area-inset-bottom));
}

.bottom-action-nav {
  bottom: calc(10px + env(safe-area-inset-bottom));
  width: min(380px, calc(100vw - 24px));
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 6px;
  border-radius: 18px;
  background: rgba(11, 15, 25, 0.94);
  box-shadow: 0 14px 38px rgba(0,0,0,0.34), inset 0 1px 0 rgba(255,255,255,0.035);
}

.bottom-action-btn,
.bottom-action-btn.primary,
.bottom-action-btn.support {
  min-height: 48px;
  width: 100%;
  align-self: stretch;
  border-radius: 13px;
  padding: 10px 12px;
  font-size: 10px;
  letter-spacing: 1.25px;
  opacity: 1;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.045);
}

.bottom-action-btn.primary {
  border-color: rgba(14,165,233,0.42);
  color: #dff8ff;
  background: linear-gradient(135deg, rgba(14,165,233,0.24), rgba(59,130,246,0.14));
}

.bottom-action-btn.support {
  border-color: rgba(240,192,64,0.26);
  color: #f6dda0;
  background: linear-gradient(135deg, rgba(240,192,64,0.13), rgba(19,27,44,0.92));
}

.bottom-action-btn.primary::before,
.bottom-action-btn.support::before {
  width: 22px;
  height: 22px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  line-height: 1;
}

.bottom-action-btn.primary::before {
  content: '▥';
  background: rgba(14,165,233,0.16);
  color: var(--accent2);
}

.bottom-action-btn.support::before {
  content: '?';
  background: rgba(240,192,64,0.12);
  color: var(--gold);
  font-weight: 900;
}

.bottom-action-btn:focus-visible {
  outline: 2px solid var(--accent2);
  outline-offset: 2px;
}

@media (max-width: 339px) {
  .bottom-action-nav {
    width: calc(100vw - 16px);
  }

  .bottom-action-btn,
  .bottom-action-btn.primary,
  .bottom-action-btn.support {
    padding-inline: 8px;
    font-size: 9px;
    letter-spacing: 0.8px;
    gap: 5px;
  }
}