html, body {
    touch-action: manipulation;
    -ms-touch-action: manipulation;
}

* {
    touch-action: manipulation;
}

/* Extra Super 7 */

#app:has(#game-screen.active) .edge-panel { display: none !important; }

#game-screen { background: #000; position: relative; overflow: hidden; }
.game-video-area { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; }
.game-bg-video { width: 100%; height: 100%; object-fit: fill; position: absolute; top: 0; left: 0; z-index: 0; }
.game-overlay { position: absolute; z-index: 10; pointer-events: none; }
.reels-overlay { position: absolute; display: flex; pointer-events: none; gap: 0; }
.reel { flex: 1; overflow: hidden; display: flex; flex-direction: column; }
.reel-strip { display: flex; flex-direction: column; }
.symbol { display: flex; align-items: center; justify-content: center; padding: 1.5%; box-sizing: border-box; flex-shrink: 0; }
.symbol img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* ========== SLOT PANEL ========== */
.slot-panel {
    position: absolute;
    bottom: -25px; left: 0; right: 0;
    z-index: 20;
    height: 56%;
}

/* Фон — чистый PNG из Figma */
.slot-panel-bg {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: fill;
    z-index: 0;
}

/* === HTML значения поверх фона === */
.fi-v {
    position: absolute;
    z-index: 2;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 400;
}

/* Из Figma API: bg=2358x1807, фон=1228x968 (скриншот) */
/* Верхушка info: ~top 0-20% панели */
/* Позиции значений (% от всей панели) */

/* CREDIT value */
.fi-credit-val { left: 18%; top: 7%; width: 18%; height: 6%; color: #fff; font-size: min(22px, 5vw); justify-content: flex-end; padding-right: 2%; }
/* CREDIT AZN */
.fi-credit-azn { left: 18%; top: 12.5%; width: 18%; height: 3%; color: #dfdb37; font-size: min(11px, 2.5vw); justify-content: flex-end; padding-right: 2%; }
/* INSURANCE value */
.fi-insurance { left: 14%; top: 16.5%; width: 22%; height: 5%; color: #fff; font-size: min(14px, 3vw); justify-content: flex-end; padding-right: 2%; }
/* WIN value */
.fi-win-val { left: 44.0%; top: 8.9%; width: 22%; height: 11%; color: #71fe03; font-size: min(28px, 5.5vw); }
/* WIN AZN */
.fi-win-azn { left: 44.0%; top: 18%; width: 22%; height: 3.5%; color: #dfdb37; font-size: min(11px, 2.5vw); }
/* BET value */
.fi-bet-val { left: 68.2%; top: 8.9%; width: 30%; height: 11%; color: #6eadeb; font-size: min(28px, 5.5vw); }
/* BET AZN */
.fi-bet-azn { left: 68.2%; top: 18%; width: 30%; height: 3.5%; color: #dfdb37; font-size: min(11px, 2.5vw); }
/* LINES value (over LINES button) */
.fi-lines-val { left: 64.7%; top: 44%; width: 16.2%; height: 12%; color: #ffffff; font-size: min(26px, 5vw); font-weight: 700; }
/* BET/LINE value (over BET/LINE button) */
.fi-betline-val { left: 81.3%; top: 44%; width: 16.2%; height: 12%; color: #ffffff; font-size: min(26px, 5vw); font-weight: 700; }

/* === Кнопки PNG поверх фона === */
.sp-btn {
    position: absolute;
    z-index: 3;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}

/* кнопки — прозрачные зоны поверх фона */

.sp-btn:active { transform: scale(0.95); }

/* Позиции кнопок — точно из Figma API */
.sp-gamble   { left: 2.5%; top: 38.1%; width: 18.2%; height: 15.7%; }
.sp-auto     { left: 24.1%; top: 37.1%; width: 11%; height: 14%; border-radius: 50%; backdrop-filter: grayscale(0.5) brightness(0.75); -webkit-backdrop-filter: grayscale(0.5) brightness(0.75); transition: backdrop-filter 0.2s; }
.sp-auto.auto-active { backdrop-filter: none; -webkit-backdrop-filter: none; }
.sp-start    { left: 38.4%; top: 30.9%; width: 23.3%; height: 30.4%; border-radius: 50%; }
.sp-lines    { left: 64.7%; top: 37.2%; width: 16.2%; height: 17.0%; }
.sp-betline  { left: 81.3%; top: 37.2%; width: 16.2%; height: 17.0%; }
.sp-home     { left: 4.6%; top: 79.0%; width: 9.1%; height: 14.2%; }
.sp-denom    { left: 18.7%; top: 79.0%; width: 9.1%; height: 14.2%; }
.sp-settings { left: 45.4%; top: 78.9%; width: 9.1%; height: 14.2%; }
.sp-info     { left: 68.5%; top: 81.2%; width: 7.8%; height: 10.1%; border-radius: 50%; }
.sp-sound    { left: 85.2%; top: 77.8%; width: 8%; height: 10.4%; border-radius: 50%; transition: backdrop-filter 0.2s; }
.sp-sound.muted { backdrop-filter: grayscale(1) brightness(0.5); -webkit-backdrop-filter: grayscale(1) brightness(0.5); }

/* ═══ WIN ANIMATIONS ═══ */
.symbol.win-highlight {
    animation: winPulse 0.5s ease-in-out infinite alternate;
    filter: brightness(1.5) drop-shadow(0 0 10px rgba(255, 215, 0, 0.8));
    z-index: 5;
    position: relative;
}
@keyframes winPulse {
    0% { transform: scale(1); filter: brightness(1.3) drop-shadow(0 0 8px rgba(255, 215, 0, 0.6)); }
    100% { transform: scale(1.1); filter: brightness(1.6) drop-shadow(0 0 15px rgba(255, 215, 0, 1)); }
}

/* Big win overlay */
.big-win-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 100;
    animation: bigWinFadeIn 0.3s ease-out;
}
@keyframes bigWinFadeIn {
    from { opacity: 0; transform: scale(0.5); }
    to { opacity: 1; transform: scale(1); }
}
.big-win-label {
    font: 900 48px Arial, sans-serif;
    color: #FFD700;
    text-shadow: 0 0 20px rgba(255, 215, 0, 0.8), 0 0 40px rgba(255, 165, 0, 0.5);
    animation: bigWinPulse 0.8s ease-in-out infinite alternate;
}
.big-win-amount {
    font: 700 32px Arial, sans-serif;
    color: #fff;
    margin-top: 10px;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}
@keyframes bigWinPulse {
    0% { transform: scale(1); }
    100% { transform: scale(1.15); }
}

/* Gamble ready state */
.sp-gamble.gamble-ready {
    animation: gambleGlow 1s ease-in-out infinite alternate;
}
@keyframes gambleGlow {
    0% { box-shadow: 0 0 5px rgba(255, 215, 0, 0.3); }
    100% { box-shadow: 0 0 20px rgba(255, 215, 0, 0.8); }
}

/* Gamble card colors */
.gamble-card.red { color: #ff3333; font-size: 64px; }
.gamble-card.black { color: #333; font-size: 64px; }

/* ═══ SELECT LINE / SELECT BET overlays ═══ */
.select-overlay {
    display: none;
    position: absolute;
    bottom: 52%;
    left: 0; right: 0;
    z-index: 25;
}
.select-overlay.active { display: block; }

.select-panel {
    width: 100%;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
}

.select-line-panel {
    background-image: url('../assets/ui/slot-menu/select-line-bg.png');
    aspect-ratio: 2164 / 1166;
}

.select-bet-panel {
    background-image: url('../assets/ui/slot-menu/select-bet-bg.png');
    aspect-ratio: 4324 / 1692;
}

.select-grid {
    position: absolute;
    top: 12%;
    left: -4.5%;
    right: 10.5%;
    bottom: 5%;
    display: flex;
    flex-direction: column;
    gap: 3%;
}

.select-line-grid,
.select-bet-grid {
    /* rows handled by .sel-row children */
}

.sel-row {
    display: flex;
    gap: 3%;
    flex: 1 1 0;
}

.sel-row .sel-btn {
    flex: 1 1 0;
}

/* Shift rows 1-2 right by 7% of grid width */
.sel-row-shifted {
    margin-left: 1.4%;
    gap: 1.5%;
    transform: scaleY(0.99);
    transform-origin: left center;
}

.sel-row-shifted .sel-btn {
    flex: 0 0 13%;
}

/* Last row: offset by ~1 column (~14.7% of grid) */
.sel-row-last {
    margin-left: 14.7%;
}

.sel-btn {
    background: transparent;
    border: none;
    color: transparent;
    font-size: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    border-radius: 8px;
}
.sel-btn:active {
    background: rgba(100, 180, 255, 0.3);
}

/* ═══ PAYLINE SVG OVERLAY ═══ */
.payline-svg {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    z-index: 12;
    overflow: visible;
}
.payline-line {
    fill: none;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.85;
    transition: opacity 0.3s;
}
.payline-line.win-line {
    stroke-width: 4;
    opacity: 1;
    filter: drop-shadow(0 0 6px currentColor);
}
.payline-line.dim {
    opacity: 0.15;
}
@keyframes paylineWin {
    0%   { opacity: 1; stroke-width: 4; }
    50%  { opacity: 0.5; stroke-width: 6; }
    100% { opacity: 1; stroke-width: 4; }
}
.payline-line.animating {
    animation: paylineWin 0.6s ease-in-out infinite;
}

/* ═══ BONUS OVERLAY ANIMATIONS ═══ */
@keyframes bonusTitlePulse {
    0%   { text-shadow: 0 0 20px #FFD700, 0 0 40px #FF8C00; transform: scale(1); }
    50%  { text-shadow: 0 0 40px #FFD700, 0 0 80px #FF8C00, 0 0 120px #FF4500; transform: scale(1.05); }
    100% { text-shadow: 0 0 20px #FFD700, 0 0 40px #FF8C00; transform: scale(1); }
}
@keyframes bonusMultGlow {
    0%   { text-shadow: 0 0 10px #FFD700; }
    50%  { text-shadow: 0 0 30px #FFD700, 0 0 60px #FF8C00; }
    100% { text-shadow: 0 0 10px #FFD700; }
}
@keyframes bonusSlideIn {
    from { opacity: 0; transform: translateY(-30px) scale(0.85); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes bonusCounterBounce {
    0%   { transform: scale(1); }
    30%  { transform: scale(1.25); }
    60%  { transform: scale(0.95); }
    100% { transform: scale(1); }
}
@keyframes retriggerFlash {
    0%   { opacity: 0; transform: scale(0.5) rotate(-5deg); }
    30%  { opacity: 1; transform: scale(1.15) rotate(2deg); }
    70%  { opacity: 1; transform: scale(1.05) rotate(0deg); }
    100% { opacity: 0; transform: scale(0.9); }
}