/* ── Floating action buttons (rules, reset) ───────────────────────────── */

.action-btn {
  position: relative;
  width: 44px;
  height: 44px;
  padding: 10px;
  border: none;
  border-radius: var(--radius-round);
  background: var(--surface-panel-card);
  color: var(--color-brown-strong);
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  transition: all 0.2s ease;
  z-index: 140;
  touch-action: manipulation;
}

.action-btn:active:not(:disabled) {
  background: rgba(255, 253, 246, 1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.action-btn:disabled,
.action-btn--disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.action-btn svg {
  width: 100%;
  height: 100%;
  display: block;
}

.rules-tooltip {
  position: fixed;
  top: calc(env(safe-area-inset-top, 12px) + 60px);
  right: calc(env(safe-area-inset-right, 12px) + 8px);
  max-width: 300px;
  padding: var(--space-5);
  background: var(--surface-panel-card-bright);
  color: var(--color-brown-strong);
  border-radius: var(--radius-sm);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-loose);
  z-index: 150;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  white-space: pre-line;
}

.rules-tooltip--hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.rules-modal-content {
  white-space: pre-line;
}

.reset-icon:active:not(:disabled) {
  transform: rotate(180deg);
}

/* ── Mobile overrides for action buttons ─────────────────────────────── */

@media (max-width: 640px) {
  .action-btn {
    width: 40px;
    height: 40px;
    padding: 8px;
  }
}