/* Wspólne zachowanie przycisków gry (2026-11-11, wzór: przyciski na górze /wyniki).
 *
 * Spoczynek: przycisk stoi w swoim ułożeniu z kompozycji ekranu (--tilt).
 * Najechanie albo fokus z klawiatury: dochyla się o --lean (w tę samą stronę co --tilt) i unosi o 1 px.
 * Kliknięcie: wciska się w stronę cienia, a cień maleje – cień zostaje w miejscu, przesuwa się sam przycisk.
 * Kolory się NIE zmieniają (decyzja Dominika 11.11; zmianę koloru przy wciskaniu ewentualnie później).
 *
 * ZASADA CIENIA – nie wracać do box-shadow ani filter: drop-shadow:
 * tło z obrysem (::after) i twardy cień (::before) to osobne warstwy pod treścią. box-shadow nie maluje się
 * pod przyciskiem i na zaokrąglonym, obróconym rogu zostawia szparę między obrysem a cieniem (łapane kilka razy),
 * a drop-shadow cieniuje też obwódkę fokusu. Przycisk ma przezroczystą ramkę tej samej grubości, żeby zachować wymiary.
 *
 * Użycie: selektor przycisku na liście niżej, a w jego własnej regule tylko zmienne:
 *   --press-bg (tło), --press-line (obrys), --bw (grubość obrysu), --sh (przesunięcie cienia),
 *   --tilt (ułożenie w spoczynku), --lean (dochylenie po najechaniu).
 * Reguły są w :where() (zerowa specyficzność), więc zmienne z reguł przycisków zawsze wygrywają.
 */
:where(.btn, .mode, .topicBtn, #mapBtn, #congrats .thanks) {
  --bw: 4px; --sh: 4px; --tilt: 0deg; --lean: -1.5deg; --press-bg: var(--cream); --press-line: var(--ink);
  position: relative; isolation: isolate; background: none; border: var(--bw) solid transparent; filter: none;
  transform: rotate(var(--tilt)); transition: transform .12s ease-out;
}
:where(.btn, .mode, .topicBtn, #mapBtn, #congrats .thanks)::before,
:where(.btn, .mode, .topicBtn, #mapBtn, #congrats .thanks)::after {
  content: ""; position: absolute; inset: calc(-1 * var(--bw)); border-radius: inherit; pointer-events: none;
}
:where(.btn, .mode, .topicBtn, #mapBtn, #congrats .thanks)::before {
  background: var(--ink); transform: translate(var(--sh), var(--sh)); z-index: -2; transition: transform .12s ease-out;
}
:where(.btn, .mode, .topicBtn, #mapBtn, #congrats .thanks)::after {
  background: var(--press-bg); border: var(--bw) solid var(--press-line); z-index: -1;
}
:where(.btn, .mode, .topicBtn, #mapBtn, #congrats .thanks):is(:hover, :focus-visible):not(:disabled) {
  transform: rotate(calc(var(--tilt) + var(--lean))) translate(-1px, -1px);
}
:where(.btn, .mode, .topicBtn, #mapBtn, #congrats .thanks):active:not(:disabled) {
  transform: rotate(var(--tilt)) translate(calc(var(--sh) - 1px), calc(var(--sh) - 1px));
}
:where(.btn, .mode, .topicBtn, #mapBtn, #congrats .thanks):active:not(:disabled)::before { transform: translate(1px, 1px); }
@media (prefers-reduced-motion: reduce) {
  :where(.btn, .mode, .topicBtn, #mapBtn, #congrats .thanks),
  :where(.btn, .mode, .topicBtn, #mapBtn, #congrats .thanks)::before { transition: none; }
}