/* === 11. ZUNIFIKOWANE PRZYCISKI =========================================== */

/* Piec rodzin assetow przyciskow oraz wspolny system czasteczek. */
/* Etykiety zachowują naturalną pisownię ze źródła, także w przyciskach złożonych. */
button,
[role="button"],
input[type="button"],
input[type="submit"],
button .reward-run-card__name,
[role="button"] .reward-run-card__name {
    text-transform: none;
}

@keyframes gameButtonParticleStream {
    0% { opacity: 0; transform: translate3d(0, 4px, 0) scale(.7); }
    22% { opacity: var(--particle-opacity); }
    100% { opacity: 0; transform: translate3d(var(--particle-drift-x), var(--particle-drift-y), 0) scale(.95); }
}

.game-button {
    border: 0 !important;
    background-color: transparent !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-image: var(--game-button-image) !important;
    background-size: var(--game-button-width) var(--game-button-height) !important;
    width: var(--game-button-width) !important;
    min-width: var(--game-button-width) !important;
    max-width: var(--game-button-width) !important;
    height: var(--game-button-height) !important;
    min-height: var(--game-button-height) !important;
    max-height: var(--game-button-height) !important;
    box-shadow: none !important;
    overflow: visible !important;
    image-rendering: pixelated;
}

.game-button--0 {
    --game-button-image: url("../image/ui/button_0.png");
    --game-button-press-image: url("../image/ui/button_0_press.png");
    --game-button-width: 320px;
    --game-button-height: 80px;
    /* Jeden kontrakt tekstu dla tej grafiki. Tak jak wymiary wyżej,
       ma pierwszeństwo przed dawnymi regułami ekranów, również z ID. */
    font: 700 17px/1 var(--font-title) !important;
    font-variant: normal !important;
    font-kerning: normal !important;
    color: #d5c096 !important;
    letter-spacing: normal !important;
    word-spacing: normal !important;
    text-shadow: 0 2px 1px #000 !important;
    text-transform: none !important;
    text-align: center !important;
    text-decoration: none !important;
    text-indent: 0 !important;
    -webkit-text-stroke: 0 !important;
    box-sizing: border-box !important;
    padding: 0 24px !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: normal !important;
}

/* Nie nadpisujemy display:none ustawianego przez [hidden] ani przez kod UI. */
.game-button--0:not([hidden]) {
    display: inline-flex;
}

.game-button--1 {
    --game-button-image: url("../image/ui/button_1.png");
    --game-button-press-image: url("../image/ui/button_1_press.png");
    --game-button-width: 256px;
    --game-button-height: 72px;
}

.game-button--2 {
    --game-button-image: url("../image/ui/button_2.png");
    --game-button-press-image: url("../image/ui/button_2_press.png");
    --game-button-width: 360px;
    --game-button-height: 144px;
}

.game-button--3 {
    --game-button-image: url("../image/ui/button_3.png");
    --game-button-press-image: url("../image/ui/button_3_press.png");
    --game-button-width: 160px;
    --game-button-height: 128px;
}

.game-button:not(:disabled):active {
    background-image: var(--game-button-press-image) !important;
}

.shell-button.game-button,
.auth-tab.game-button {
    position: relative;
}

.game-button:not(:disabled):hover,
.game-button:not(:disabled):focus-visible {
    filter: brightness(1.05) !important;
}

#game-button-particle-layer {
    position: absolute;
    inset: 0;
    z-index: 2147483646;
    overflow: hidden;
    pointer-events: none;
}

#run-progress-particle-layer {
    position: absolute;
    inset: 0;
    z-index: 24;
    overflow: hidden;
    pointer-events: none;
}

#abyss-particle-canvas {
    pointer-events: none;
}

.game-button-particle {
    position: absolute;
    left: 0;
    top: 0;
    width: var(--particle-size);
    height: var(--particle-size);
    border-radius: 50%;
    pointer-events: none;
    opacity: 0;
    background: radial-gradient(circle, rgba(255,242,194,.98) 0 28%, rgba(225,174,91,.9) 42%, rgba(126,69,34,.56) 70%, transparent 76%);
    box-shadow: 0 0 var(--particle-glow) rgba(239,191,102,.76);
    will-change: transform, opacity;
}

.game-button-particle--dice-card {
    background: radial-gradient(circle, rgba(255,244,203,.98) 0 26%, rgba(230,197,128,.92) 43%, rgba(177,132,67,.46) 69%, transparent 78%);
    box-shadow: 0 0 var(--particle-glow) rgba(235,199,126,.70);
}

.game-button-particle--burst,
.game-button-particle--stream,
.game-button-particle--run-progress {
    animation: gameButtonParticleStream var(--particle-duration) ease-out forwards;
}