/* ============================================================ tap feedback ==
   Smooth on low-end phones: the glow and second colour live on a small layer
   (.rr-ink) that is drawn once and then only fades/scales. Opacity and transform
   run on the GPU, so nothing is repainted while the finger is down. */
.btn, button, .rr-pill-btn, .rr-vip-buy, .rr-chips a, .chip, .wallet-tab, .rr-seg button, .nav-item, .admin-nav a, .admin-nav-item,
.rr-tabbar a, .rr-tab-ic, .rr-tab-fab, .theme-toggle, [role="button"] { -webkit-tap-highlight-color: transparent; }

.rr-ink-host { position: relative; isolation: isolate; }
.rr-ink { position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; opacity: 0;
    background: linear-gradient(135deg, #8B5CF6, #EC4899);
    box-shadow: 0 0 0 3px rgba(139,92,246,.28), 0 0 22px rgba(168,85,247,.55);
    will-change: opacity, transform; }
/* Lighter tint for outline / ghost / secondary buttons and chips */
.rr-ink.soft { background: linear-gradient(135deg, rgba(139,92,246,.22), rgba(236,72,153,.18)); box-shadow: 0 0 0 2px rgba(139,92,246,.45), 0 0 18px rgba(168,85,247,.35); }
/* Side / admin menu rows: a colour band with a glowing left edge */
.rr-ink.row { background: linear-gradient(90deg, rgba(139,92,246,.32), rgba(236,72,153,.12) 70%, transparent); box-shadow: inset 3px 0 0 #A78BFA, 0 0 16px rgba(139,92,246,.25); }
/* Icon tiles (bottom + side menu) and the Rate button: a coloured halo */
.rr-ink.halo { inset: -1px; background: transparent; box-shadow: 0 0 0 3px rgba(255,255,255,.28), 0 0 22px rgba(var(--cg, 168,85,247), .95); }
.rr-ink.fab { background: linear-gradient(145deg, #A78BFA, #EC4899); box-shadow: 0 0 0 4px rgba(236,72,153,.3), 0 0 30px rgba(236,72,153,.75); }

/* Press scale: transform only (GPU), quick in, springy out */
.rr-pressing { transform: scale(.965) !important; transition: transform .09s ease-out !important; }
.rr-tab-ic.rr-pressing, .rr-nav-tile.rr-pressing { transform: scale(1.12) !important; opacity: 1 !important; }
.rr-released { transition: transform .32s cubic-bezier(.3,1.5,.5,1) !important; }

/* Text stays readable on the coloured layer */
.btn.rr-pressing, .btn-primary.rr-pressing { color: #fff; }

@media (prefers-reduced-motion: reduce) { .rr-pressing { transform: none !important; } }