/*
 * Press feedback: every button visibly sinks + lights up while pressed, then springs back to its
 * normal bright look on release. Works on touch (Android app WebView, iOS Safari) through :active
 * plus the .sw-pressed class that /js/press-feedback.js adds on pointerdown and always clears on
 * pointerup / pointercancel / scroll. Only transform-like `scale`, box-shadow and border-color change
 * for ~0.1–0.3 s; nothing animates forever and no backdrop-filter is added.
 * Loaded after every other stylesheet. Disabled controls never get the press look.
 * `:not(#sw-press-none)` matches every element; it only lifts specificity above the app's many
 * class-chained `!important` glass/CTA shadows (e.g. `.btn:not(.secondary):not(.ghost):not(.danger)`)
 * so the press light is visible on every button for the ~0.1 s it is shown.
 */
:root {
  --sw-press-scale: .95;
  --sw-press-glow:
    inset 0 0 0 1px rgba(255, 255, 255, .42),
    inset 0 1px 14px rgba(255, 255, 255, .26),
    0 0 0 3px rgba(189, 87, 255, .26),
    0 4px 18px rgba(189, 87, 255, .5);
  --sw-press-in: 90ms cubic-bezier(.2, .7, .3, 1);
  --sw-press-spring: 320ms cubic-bezier(.3, 1.6, .5, 1);
}

/* Tier A: glass / CTA buttons and button-like controls — sink + inner light + soft violet glow. */
:where(button, .btn, [role="button"], [role="tab"], .settings-row, .chat-tool, .icon-btn):where(:not(:disabled, [aria-disabled="true"], .home-mode-tab, .feature-banner-slide, .gm-c4col, .gm-b3, .gm-bj-step, .gm-pick, .gm-tile, .gm-bt, .gm-iconbtn, .gm-bubble, .gm-lob-btn, .gm-lg-row, .gm-lg-watch, .profile-tile, .home-group-card, .id-selfie-pick, [data-no-press], button *)):active:not(#sw-press-none),
.sw-pressed:not(:disabled, [aria-disabled="true"], .sw-press-soft, .sw-press-card):not(#sw-press-none) {
  scale: var(--sw-press-scale);
  border-color: rgba(255, 240, 255, .78) !important;
  box-shadow: var(--sw-press-glow) !important;
  transition: scale var(--sw-press-in), box-shadow var(--sw-press-in), border-color var(--sw-press-in);
}
.sw-pressed.sw-press-wide:not(:disabled, [aria-disabled="true"]) { --sw-press-scale: .975; }

/* Tier B: game controls that already draw their own 3D press — only a gentle extra sink + brighten,
   keeping their own shadows. filter is safe here: these controls have no backdrop-filter children. */
.sw-pressed.sw-press-soft:not(:disabled, [aria-disabled="true"]) {
  scale: .96;
  filter: brightness(1.2);
  transition: scale var(--sw-press-in), filter var(--sw-press-in);
}

/* Tier C: big cards / tabs with glass (backdrop-filter) children — scale only, so the child blur never flashes. */
.sw-pressed.sw-press-card:not(:disabled, [aria-disabled="true"]) {
  scale: .975;
  transition: scale var(--sw-press-in);
}

/* Home People/Group tabs are small: a clearer sink (still scale only — the ::before glass frame keeps its blur). */
.sw-pressed.sw-press-card.home-mode-tab:not(:disabled, [aria-disabled="true"]) { scale: .95; }

/* Release: spring back (tiny overshoot) and fade the light out. The class is removed by JS after ~0.36 s. */
.sw-press-out {
  transition: scale var(--sw-press-spring), box-shadow .28s ease-out, border-color .28s ease-out, filter .28s ease-out;
}

/* In-flight Vote requests keep the button fully lit (no dim while waiting for the server). */
.vote-btn[aria-busy="true"]:disabled { opacity: 1; }

/* Vote accepted: gold flash on the button, an expanding gold ring, and a floating +1 / +N. */
.sw-vote-ok:not(#sw-press-none) {
  border-color: rgba(255, 214, 120, .95) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 226, 150, .55), inset 0 1px 12px rgba(255, 214, 120, .3), 0 0 16px rgba(255, 196, 70, .55) !important;
  transition: box-shadow .45s ease-out, border-color .45s ease-out;
}
.sw-vote-ring,
.sw-vote-plus {
  position: fixed;
  z-index: 2147483000;
  pointer-events: none;
  will-change: transform, opacity;
}
.sw-vote-ring {
  box-sizing: border-box;
  border: 2px solid rgba(255, 214, 110, .95);
  box-shadow: 0 0 14px rgba(255, 196, 70, .65), inset 0 0 10px rgba(255, 214, 110, .35);
  animation: sw-vote-ring 640ms cubic-bezier(.2, .7, .3, 1) forwards;
}
/* The ring grows ~14px on each side whatever the button size (JS sets --sw-ring-sx / --sw-ring-sy). */
.sw-vote-plus {
  transform: translate(-50%, -100%);
  padding: 2px 9px;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffe7a3, #f4b63c);
  color: #3a2300;
  font: 900 .82rem/1.3 Nunito, "Noto Sans Myanmar", system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .35), 0 0 12px rgba(255, 200, 80, .55);
  animation: sw-vote-plus 900ms cubic-bezier(.2, .7, .3, 1) forwards;
}
.sw-count-bump { color: #ffe08a !important; transition: color .5s ease-out; }
@keyframes sw-vote-ring {
  0% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(var(--sw-ring-sx, 1.25), var(--sw-ring-sy, 1.6)); }
}
@keyframes sw-vote-plus {
  0% { opacity: 0; transform: translate(-50%, -60%) scale(.7); }
  18% { opacity: 1; transform: translate(-50%, -110%) scale(1.08); }
  70% { opacity: 1; transform: translate(-50%, -190%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -240%) scale(.96); }
}

/* Reduced motion: no sinking, springing or flying — the light-up and gold flash still show the press. */
@media (prefers-reduced-motion: reduce) {
  :root { --sw-press-scale: 1; }
  .sw-pressed.sw-press-wide:not(:disabled, [aria-disabled="true"]),
  .sw-pressed.sw-press-soft:not(:disabled, [aria-disabled="true"]),
  .sw-pressed.sw-press-card:not(:disabled, [aria-disabled="true"]),
  .sw-pressed.sw-press-card.home-mode-tab:not(:disabled, [aria-disabled="true"]) { scale: 1; }
  .sw-press-out { transition: box-shadow .2s linear, border-color .2s linear, filter .2s linear; }
  .sw-vote-ring { animation: sw-vote-fade 600ms linear forwards; }
  .sw-vote-plus { animation: sw-vote-fade-plus 900ms linear forwards; transform: translate(-50%, -150%); }
}
@keyframes sw-vote-fade { 0%, 40% { opacity: 1; } 100% { opacity: 0; } }
@keyframes sw-vote-fade-plus { 0%, 60% { opacity: 1; } 100% { opacity: 0; } }