@font-face {
    font-family: 'Coiny';
    src: url('/fonts/coiny.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

body {
    margin: 0;
    padding: 0;
    color: rgba(255, 255, 255, 0.87);
    background-color: #000000;
    overflow: hidden;
    /* Отключаем выделение текста */
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    /* Отключаем callout меню на iOS */
    -webkit-touch-callout: none;
    /* Фиксируем высоту для предотвращения скролла */
    position: fixed;
    width: 100%;
    height: 100%;
    touch-action: manipulation;
    overscroll-behavior: none;
}

/* Отключаем перетаскивание изображений */
img {
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    user-drag: none;
    pointer-events: auto;
}

/* Отключаем перетаскивание canvas */
canvas {
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    user-drag: none;
}

#app {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    touch-action: manipulation;
}

#pixi-container {
    /* Canvas будет масштабироваться через JS */
    position: relative;
    width: 100%;
    height: 100%;
    touch-action: manipulation;
}

#pixi-container canvas {
    display: block;
    image-rendering: auto;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
}

/* Preloader Styles */
#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #2a2a2a;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    transition: opacity 0.5s ease-out;
    /* Блокируем zoom, но разрешаем обычные взаимодействия */
    touch-action: manipulation;
    overscroll-behavior: none;
    overflow: hidden;
}

#preloader.hidden {
    opacity: 0;
    pointer-events: none;
}

.preloader-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    transform-origin: center center;
}

.preloader-title-img {
    width: auto;
    height: 250px;
    margin: 50px 0 40px 0;
    object-fit: contain;
    image-rendering: auto;
}

.preloader-birds {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 25px;
    height: 80px;
    margin-bottom: 40px;
}

.preloader-bird {
    width: 133px;
    height: 133px;
    object-fit: contain;
    image-rendering: pixelated;
}

.preloader-bar-container {
    width: 400px;
    height: 20px;
    background-color: rgba(0, 0, 0, 0.3);
    border: 3px solid white;
    border-radius: 20px;
    overflow: hidden;
    position: relative;
}

.preloader-bar {
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, #4a4a4a 0%, #6a6a6a 100%);
    border-radius: 20px;
    transform-origin: left center;
    transform: scaleX(0);
    animation: loading-bar 5s linear forwards;
    position: relative;
    will-change: transform;
}

.preloader-bar-circle {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%) translateX(0);
    width: 20px;
    height: 20px;
    background-color: white;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    animation: loading-circle 5s linear forwards;
    will-change: transform;
}

@keyframes loading-bar {
    0% {
        transform: scaleX(0);
    }
    100% {
        transform: scaleX(0.93);
    }
}

@keyframes loading-circle {
    0% {
        transform: translateY(-50%) translateX(0);
    }
    100% {
        transform: translateY(-50%) translateX(360px);
    }
}

.preloader-powered {
    margin-top: 10px;
}

.preloader-powered img {
    height: 10px;
    object-fit: contain;
}

.preloader-logo {
    margin-top: -5px;
}

.preloader-logo img {
    height: 27px;
    object-fit: contain;
}

/* Intro Screen Styles */
.intro-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #2a2a2a;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9998;
    transition: opacity 0.5s ease-out;
    overflow: hidden;
    /* Блокируем zoom, но разрешаем обычные взаимодействия */
    touch-action: manipulation;
    overscroll-behavior: none;
}

.intro-screen.hidden {
    opacity: 0;
    pointer-events: none;
}

/* Corner BGaming logo (upper-left). Sized to match the in-game logo:
   35px square with 20px margin (see ResizeManager.resizeLogo). */
.intro-corner-logo {
    position: absolute;
    top: 20px;
    left: 20px;
    width: 35px;
    height: 35px;
    object-fit: contain;
    z-index: 20;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
}

/* Mute / Unmute button (upper-right). */
.intro-corner-mute {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background-color: #f0f0f0;
    border: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    z-index: 20;
    transition: transform 0.2s ease, background-color 0.2s ease;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    touch-action: manipulation;
}

.intro-corner-mute:hover {
    background-color: #e0e0e0;
    transform: scale(1.05);
}

.intro-corner-mute:active {
    background-color: #d0d0d0;
    transform: scale(1.0);
}

.intro-corner-mute img {
    width: 22px;
    height: 22px;
    object-fit: contain;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
}

.intro-corner-mute.muted img {
    opacity: 0.35;
}

.intro-corner-mute.muted::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 10%;
    width: 80%;
    height: 3px;
    background-color: #d33;
    border-radius: 2px;
    transform: translateY(-50%) rotate(-30deg);
    pointer-events: none;
}

@media (max-width: 700px), (max-height: 500px) {
    .intro-corner-logo {
        top: 14px;
        left: 14px;
    }
    .intro-corner-mute {
        top: 14px;
        right: 14px;
        width: 38px;
        height: 38px;
    }
    .intro-corner-mute img {
        width: 20px;
        height: 20px;
    }
}

/* Global background - hidden for simple gray background */
.intro-global-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    display: none;
}

.intro-global-bg .intro-sky {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #18c5ff;
    z-index: 1;
}

.intro-global-bg .intro-clouds {
    position: absolute;
    top: 5%;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: auto;
    opacity: 0.6;
    z-index: 2;
}

.intro-global-bg .intro-fields {
    position: absolute;
    bottom: 60px;
    left: 50%;
    transform: translateX(-50%);
    width: 105%;
    height: auto;
    z-index: 3;
}

.intro-global-bg .intro-road {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60px;
    z-index: 4;
    object-fit: cover;
}

.intro-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 28px;
    width: 95%;
    max-width: 1200px;
    padding: 10px;
    transform-origin: center center;
}

.intro-slides-container {
    position: relative;
    width: 100%;
    max-width: 100%;
}

.intro-slide {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 1;
    transition: opacity 0.5s ease-in-out;
    gap: 20px;
    width: 100%;
    max-width: 100%;
    pointer-events: auto;
}

.intro-slide.hidden {
    opacity: 0;
    pointer-events: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}

.intro-slide:not(.hidden) {
    position: relative;
}

/* Key elements container.
   BGPP-668 (review): fixed height across all slides so the START
   button and navigation row don't jump up/down when the user changes
   slides (different visual elements per slide → different content
   heights without this lock). */
.intro-key-elements {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 30px;
    height: 280px;
    min-height: 280px;
    max-height: 280px;
    width: 100%;
    padding: 15px 0;
}

/* Slide 1 - vertical layout */
#intro-slide-1 .intro-key-elements {
    gap: 0px;
}

/* BGPP-668 (review): Lucky Birds logo hidden on the intro screen.
   With the logo present, the slide content was too tall for landscape
   mobile viewports and the START button got clipped at the bottom.
   The brand is already shown on the preloader and in the gamefield. */
.intro-logo {
    display: none;
}

/* Key elements positioning */
.intro-win {
    width: 250px;
    max-width: 90%;
    height: auto;
    filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.3));
    animation: intro-pulse 2s ease-in-out infinite;
}

@keyframes intro-pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

.intro-multiplier {
    font-family: 'Coiny', cursive;
    font-size: 72px;
    font-weight: bold;
    color: #fbcb13;
    -webkit-text-stroke: 5px #000000;
    text-stroke: 5px #000000;
    paint-order: stroke fill;
    white-space: nowrap;
}

.intro-bird {
    width: 140px;
    height: 140px;
    filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.3));
    image-rendering: pixelated;
}

/* Slide 1 bird - centered */
#intro-slide-1 .intro-bird {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    width: 130px;
    height: 130px;
    margin-top: -10px;
}

/* Slide 2 & 3 - logo at top, birds absolute */
#intro-slide-2 .intro-key-elements,
#intro-slide-3 .intro-key-elements {
    position: relative;
    padding-top: 0;
    width: 100%;
    max-width: 700px;
}

#intro-slide-2 .intro-logo {
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 0;
}

#intro-slide-3 .intro-logo {
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 0;
}

/* Slide 2 & 3 birds - absolute positioning */
#intro-slide-2 .intro-bird,
#intro-slide-3 .intro-bird {
    position: absolute;
    width: 95px;
    height: 95px;
}

.intro-bird-center {
    left: 50%;
    top: 70%;
    transform: translateX(-50%);
}

/* Three birds layout - Slide 2 - fixed spacing */
.intro-bird-left {
    left: calc(50% - 130px);
    top: 45%;
    transform: translateX(-50%);
}

.intro-bird-center-2 {
    left: 50%;
    top: 45%;
    transform: translateX(-50%);
}

.intro-bird-right {
    left: calc(50% + 130px);
    top: 45%;
    transform: translateX(-50%);
}

/* Three birds layout - Slide 3 (lower position) */
#intro-slide-3 .intro-bird-left {
    top: 70%;
}

#intro-slide-3 .intro-bird-center-2 {
    top: 70%;
}

#intro-slide-3 .intro-bird-right {
    top: 70%;
}

/* Slide content container - no frame, just flex layout */
.intro-slide-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
    /* min-height sized for the WORST case (slide 3 in long locales like
       Spanish/German — up to ~6 wrapped lines). Short-text slides centre
       inside the same min-height, so the navigation row and START never
       jump when the user switches between slides. */
    min-height: 580px;
}


/* Finger pointing animation */
.intro-finger {
    position: absolute;
    width: 50px;
    height: auto;
    left: 50%;
    top: 80%;
    transform: translateX(-50%);
    z-index: 8;
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.3));
    animation: intro-finger-bounce 1.5s ease-in-out infinite;
}

@keyframes intro-finger-bounce {
    0%, 100% {
        transform: translateX(-50%) translateY(0);
    }
    50% {
        transform: translateX(-50%) translateY(-10px);
    }
}

/* Risk labels for slide 3 */
.intro-risk-label {
    position: absolute;
    font-family: 'Coiny', cursive;
    font-size: 22px;
    font-weight: bold;
    -webkit-text-stroke: 3px #FFFFFF;
    text-stroke: 3px #FFFFFF;
    paint-order: stroke fill;
    z-index: 6;
    white-space: nowrap;
    top: 45%;
    transform: translateX(-50%);
}

.intro-risk-risky {
    color: #FF4444;
    left: calc(50% - 130px);
}

.intro-risk-mid {
    color: #FFA500;
    left: 50%;
}

.intro-risk-safe {
    color: #0b24f5;
    left: calc(50% + 130px);
}

/* Risk percentages for slide 3 */
.intro-risk-percent {
    position: absolute;
    font-family: 'Coiny', cursive;
    font-size: 28px;
    font-weight: bold;
    -webkit-text-stroke: 3.5px #FFFFFF;
    text-stroke: 3.5px #FFFFFF;
    paint-order: stroke fill;
    z-index: 6;
    white-space: nowrap;
    top: 60%;
    transform: translateX(-50%);
}

.intro-risk-risky-percent {
    color: #FF4444;
    left: calc(50% - 130px);
}

.intro-risk-mid-percent {
    color: #FFA500;
    left: 50%;
}

.intro-risk-safe-percent {
    color: #0b24f5;
    left: calc(50% + 130px);
}

.intro-text {
    font-family: 'Coiny', cursive;
    font-size: 24px;
    color: white;
    text-align: center;
    line-height: 1.3;
    width: 100%;
    padding: 10px 20px;
    margin-top: 10px;
    word-wrap: break-word;
    overflow-wrap: break-word;
    box-sizing: border-box;
    /* No fixed height — long translations (Spanish, German, etc.) wrap to
       6+ lines and used to overflow the container, ending up on top of the
       arrow circles. Natural height = the navigation row is always pushed
       below the text. Slight per-slide reflow is acceptable; the
       scaleIntroContent function re-measures after each slide change. */
    height: auto;
    min-height: 0;
}

.intro-text .highlight {
    color: #FFCC00;
}

/* Slide 2 & 3 - adjust text width */
#intro-slide-2 .intro-text,
#intro-slide-3 .intro-text {
    margin-top: 10px;
    width: 100%;
}

/* Navigation */
.intro-navigation {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 25px;
    position: relative;
    margin-bottom: 15px;
    /* Generous gap below the slide content so the side-arrows can never
       overlap the bottom line of text. Slide 3 wraps to 4 lines and on
       some Android devices the rendered font is slightly taller than the
       fixed 130px text block, which used to clip into the arrow circles. */
    margin-top: 56px;
}

.intro-dots {
    display: flex;
    gap: 12px;
}

.intro-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.3);
    border: 2px solid rgba(255, 255, 255, 0.6);
    cursor: pointer;
    transition: all 0.3s ease;
}

.intro-dot.active {
    background-color: #fbcb13;
    transform: scale(1.3);
}

.intro-arrow {
    position: absolute;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-color: #f0f0f0;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Coiny', cursive;
    font-size: 38px;
    color: #333333;
    font-weight: normal;
    border: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    padding: 0;
    line-height: 1;
    /* Mobile browsers show a translucent blue/grey square on tap by
       default. Suppress it — the button has its own :active style. */
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
}

.intro-arrow:hover {
    background-color: #e0e0e0;
    transform: scale(1.1);
}

.intro-arrow:active {
    background-color: #d0d0d0;
    transform: scale(1.05);
}

/* Disabled state — first slide hides BACK, last slide hides FORWARD. */
.intro-arrow:disabled,
.intro-arrow[disabled] {
    opacity: 0.35;
    cursor: default;
    pointer-events: none;
    background-color: #f0f0f0;
    transform: none;
}

.intro-arrow:disabled::before,
.intro-arrow[disabled]::before {
    opacity: 0.5;
}

/* BGPP-668: arrows are pure CSS triangles (border-trick) — never rendered
   as Unicode chars and therefore never replaced by colour emoji on iOS /
   Android / Samsung browsers. Geometric centering inside the circle is
   guaranteed by the parent's flex centering. */
.intro-arrow-left {
    left: -85px;
}

.intro-arrow-left::before {
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-top: 9px solid transparent;
    border-bottom: 9px solid transparent;
    border-right: 14px solid #333333;
    /* Optical centering: shift left by ~1/4 of the triangle's width so the
       visual centre of the shape (not the bounding box) sits on the centre. */
    margin-left: -3px;
}

.intro-arrow-right {
    right: -85px;
}

.intro-arrow-right::before {
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-top: 9px solid transparent;
    border-bottom: 9px solid transparent;
    border-left: 14px solid #333333;
    margin-right: -3px;
}

/* Start button */
.intro-start-button {
    font-family: 'Coiny', cursive;
    font-size: 30px;
    padding: 14px 60px;
    background-color: #fbcb13;
    color: #000000;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: bold;
    box-shadow: 0 4px 0 #ff7200;
    margin-bottom: 15px;
    /* Suppress the translucent grey/blue mobile tap-highlight rectangle —
       the button has its own :active style. */
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
}

/* Landscape phones: the content area is scaled down (~0.75) and the
   START button ends up flush against the viewport bottom. Lift it
   higher with a meaningfully bigger bottom margin so there's clear
   breathing room. */
@media (orientation: landscape) and (max-height: 500px) {
    .intro-start-button {
        margin-bottom: 40px;
    }
}

/* Landscape (height-constrained viewports — phones in landscape, narrow
   desktop windows). Trim slide-content/text heights and re-anchor the
   absolutely-positioned birds, labels and percents so each row gets its
   own vertical slot inside the smaller key-elements container — birds
   stay at full size (95px) and don't bleed into the text below. */
@media (orientation: landscape) and (max-height: 600px) {
    .intro-slide-content {
        /* Sized for the longest landscape translation — keeps slide
           heights stable across slides so the nav row doesn't jump. */
        min-height: 420px;
        height: auto;
        max-height: none;
        padding: 4px 6px 6px;
    }
    .intro-key-elements {
        height: 240px;
        min-height: 240px;
        max-height: 240px;
        gap: 6px;
        padding: 0;
    }
    .intro-text {
        height: auto;
        min-height: 0;
        font-size: 20px;
        line-height: 1.2;
        padding: 2px 16px;
        margin-top: 2px;
    }
    .intro-multiplier {
        font-size: 60px;
        -webkit-text-stroke: 4px #000000;
    }
    .intro-bird {
        width: 95px;
        height: 95px;
    }
    #intro-slide-1 .intro-bird {
        width: 95px;
        height: 95px;
        margin-top: -2px;
    }
    /* Slide 2: birds sit a bit above middle; finger goes BELOW the centre
       bird (pointing up at it), matching the portrait composition. */
    #intro-slide-2 .intro-bird-left,
    #intro-slide-2 .intro-bird-center-2,
    #intro-slide-2 .intro-bird-right {
        top: 30%;
    }
    #intro-slide-2 .intro-finger {
        top: 72%;
    }
    /* Slide 3: three rows packed top-to-bottom — labels, percents, birds —
       fitting birds (95px) at top: 60% inside a 240px container without
       spilling past the bottom edge. */
    #intro-slide-3 .intro-risk-label {
        top: 20%;
    }
    #intro-slide-3 .intro-risk-percent {
        top: 40%;
    }
    #intro-slide-3 .intro-bird-left,
    #intro-slide-3 .intro-bird-center-2,
    #intro-slide-3 .intro-bird-right {
        top: 60%;
    }
    .intro-content {
        gap: 12px;
    }
    .intro-navigation {
        /* Lift the arrow/dot row up toward the slide text and push the
           START button further down for visual separation. */
        margin-top: -10px;
        margin-bottom: 34px;
    }
    .intro-start-button {
        font-size: 30px;
        padding: 12px 60px;
        margin-bottom: 6px;
    }
    /* Bigger arrow buttons on landscape — easier to tap and visually match
       the larger START button. Side-offsets bumped so the arrows still
       sit outside the slide content. */
    .intro-arrow {
        width: 76px;
        height: 76px;
        font-size: 50px;
    }
    .intro-arrow-left { left: -110px; }
    .intro-arrow-right { right: -110px; }
    .intro-arrow-left::before {
        border-top: 12px solid transparent;
        border-bottom: 12px solid transparent;
        border-right: 18px solid #333333;
        margin-left: -4px;
    }
    .intro-arrow-right::before {
        border-top: 12px solid transparent;
        border-bottom: 12px solid transparent;
        border-left: 18px solid #333333;
        margin-right: -4px;
    }
}

.intro-start-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 0 #ff7200;
}

.intro-start-button:active {
    transform: translateY(2px);
    box-shadow: 0 2px 0 #ff7200;
}

/* ============================================
   ERROR POPUP STYLES
   ============================================ */

.error-popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    transition: opacity 0.3s ease;
    /* Блокируем zoom, но разрешаем обычные взаимодействия */
    touch-action: manipulation;
    overscroll-behavior: none;
    overflow: hidden;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
}

.error-popup.hidden {
    opacity: 0;
    pointer-events: none;
}

.error-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
}

.error-modal {
    position: relative;
    background: linear-gradient(145deg, #303030, #252525);
    border-radius: 20px;
    padding: 30px 40px;
    min-width: 320px;
    max-width: 500px;
    box-shadow:
        0 30px 90px rgba(0, 0, 0, 0.8),
        0 15px 40px rgba(0, 0, 0, 0.6),
        0 5px 15px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        inset 0 -1px 0 rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.08);
    text-align: center;
    animation: errorPopIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    touch-action: manipulation;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
}

@keyframes errorPopIn {
    0% {
        transform: scale(0.8);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.error-icon {
    width: 60px;
    height: 60px;
    display: block;
    margin: 0 auto 15px auto;
    animation: errorShake 0.5s ease;
}

@keyframes errorShake {
    0%, 100% {
        transform: translateX(0);
    }
    25% {
        transform: translateX(-10px);
    }
    75% {
        transform: translateX(10px);
    }
}

.error-title {
    font-family: 'Coiny', cursive;
    font-size: 40px;
    color: #ffffff;
    margin: 0 0 15px 0;
    font-weight: bold;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    text-align: center;
}

.error-message {
    font-family: 'Coiny', cursive;
    font-size: 20px;
    color: #ffffff;
    margin-bottom: 25px;
    line-height: 1.5;
    text-align: center;
}

.error-buttons {
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap;
}

.error-btn {
    font-family: 'Coiny', cursive;
    font-size: 18px;
    padding: 12px 30px;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-weight: bold;
    min-width: 120px;
}

.error-btn-primary {
    background-color: #fbcb13;
    color: #000000;
    box-shadow: 0 4px 0 #ff7200;
}

.error-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 0 #ff7200;
}

.error-btn-primary:active {
    transform: translateY(2px);
    box-shadow: 0 2px 0 #ff7200;
}

.error-btn-secondary {
    background-color: #4CAF50;
    color: #ffffff;
    box-shadow: 0 4px 0 #2e7d32;
}

.error-btn-secondary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 0 #2e7d32;
}

.error-btn-secondary:active {
    transform: translateY(2px);
    box-shadow: 0 2px 0 #2e7d32;
}

.error-btn.hidden {
    display: none;
}

/* Mobile responsiveness */
@media (max-width: 600px) {
    .error-modal {
        min-width: 260px;
        max-width: 85%;
        padding: 20px 15px;
    }

    .error-icon {
        width: 40px;
        height: 40px;
        margin: 0 auto 10px auto;
    }

    .error-title {
        font-size: 20px;
        margin-bottom: 10px;
    }

    .error-message {
        font-size: 16px;
        margin-bottom: 20px;
    }

    .error-btn {
        font-size: 14px;
        padding: 10px 15px;
        min-width: 90px;
        max-width: 150px;
    }

    .error-buttons {
        gap: 10px;
        justify-content: center;
    }
}

/* ============================================
   RESTORATION POPUP (Game State Restored)
   ============================================ */

.restoration-popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10001; /* Above error popup */
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    transition: opacity 0.3s ease;
    /* Блокируем zoom, но разрешаем обычные взаимодействия */
    touch-action: manipulation;
    overscroll-behavior: none;
    overflow: hidden;
}

.restoration-popup.hidden {
    opacity: 0;
    pointer-events: none;
}

.restoration-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
}

.restoration-modal {
    position: relative;
    background: linear-gradient(145deg, #1a4d2e, #2d5f3f);
    border-radius: 20px;
    padding: 30px 40px;
    min-width: 320px;
    max-width: 500px;
    box-shadow:
        0 30px 90px rgba(0, 0, 0, 0.8),
        0 15px 40px rgba(0, 0, 0, 0.6),
        0 5px 15px rgba(0, 0, 0, 0.4),
        inset 0 2px 0 rgba(255, 255, 255, 0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    animation: slideIn 0.3s ease;
}

.restoration-icon {
    width: 80px;
    height: 80px;
    margin-bottom: 15px;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
}

.restoration-title {
    font-family: 'Coiny', cursive;
    font-size: 36px;
    color: #4ade80;
    margin: 0 0 15px 0;
    font-weight: bold;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    text-align: center;
}

.restoration-message {
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    color: #e0e0e0;
    text-align: center;
    line-height: 1.5;
    margin: 0 0 25px 0;
    max-width: 400px;
}

.restoration-buttons {
    display: flex;
    gap: 15px;
    justify-content: center;
    width: 100%;
}

.restoration-btn {
    font-family: 'Coiny', cursive;
    font-size: 18px;
    padding: 12px 30px;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-weight: bold;
    min-width: 120px;
}

.restoration-btn-primary {
    background-color: #4ade80;
    color: #000000;
    box-shadow: 0 4px 0 #22c55e;
}

.restoration-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 0 #22c55e;
}

.restoration-btn-primary:active {
    transform: translateY(2px);
    box-shadow: 0 2px 0 #22c55e;
}

.restoration-btn.hidden {
    display: none;
}

/* Mobile responsiveness */
@media (max-width: 600px) {
    .restoration-modal {
        min-width: 280px;
        max-width: 90%;
        padding: 25px 20px;
    }

    .restoration-title {
        font-size: 24px;
    }

    .restoration-message {
        font-size: 14px;
    }

    .restoration-btn {
        font-size: 16px;
        padding: 10px 20px;
        min-width: 100px;
        width: 100%;
    }
}

/* ============================================
   MAX WIN POPUP (BGPP-1240)
   ============================================ */

.maxwin-popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10002; /* Above error popup */
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    transition: opacity 0.3s ease;
    touch-action: manipulation;
    overscroll-behavior: none;
    overflow: hidden;
    -webkit-user-select: none;
    user-select: none;
}

.maxwin-popup.hidden {
    opacity: 0;
    pointer-events: none;
}

.maxwin-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(4px);
}

.maxwin-modal {
    position: relative;
    background: linear-gradient(145deg, #5a3700, #b87a00);
    border-radius: 22px;
    padding: 32px 40px;
    min-width: 320px;
    max-width: 520px;
    /* Guarantee the popup always fits inside the visible viewport. We use
       100dvh (dynamic viewport height) so that mobile browser chrome
       (URL bar etc.) is excluded — 100vh on iOS/Android Safari reports
       the layout viewport including hidden chrome and the popup ended up
       taller than the visible area. JS-side scale-to-fit (showMaxWinPopup
       in src/index.js) is the belt-and-braces backstop on top of this. */
    max-height: calc(100dvh - 32px);
    box-shadow:
        0 30px 90px rgba(0, 0, 0, 0.8),
        0 15px 40px rgba(0, 0, 0, 0.6),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
    border: 2px solid #fbcb13;
    text-align: center;
    animation: errorPopIn 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Landscape / short viewports: compact paddings + font-sizes so the
   modal contents fit without scrolling and the action button is always
   visible above the fold. */
@media (max-height: 600px) {
    .maxwin-modal {
        padding: 14px 24px;
        border-radius: 16px;
    }
    .maxwin-icon {
        width: 56px;
        height: 56px;
        margin-bottom: 6px;
    }
    .maxwin-title {
        font-size: 24px;
        margin: 0 0 6px 0;
    }
    .maxwin-message {
        font-size: 16px;
        margin-bottom: 14px;
        line-height: 1.3;
    }
    .maxwin-btn {
        font-size: 16px;
        padding: 8px 22px;
        min-width: 110px;
    }
}

/* BGPP-1241 (review): auto-loss variant (user did NOT cash out, hit the
   cap as a loss). Red palette so the popup doesn't read as a celebratory
   win — gold is reserved for the actual MAX WIN cashout case. */
.maxwin-modal.maxwin-modal--autoloss {
    background: linear-gradient(145deg, #5a0e0e, #b22828);
    border-color: #ff5252;
}

.maxwin-modal.maxwin-modal--autoloss .maxwin-title {
    color: #ffffff;
}

.maxwin-icon {
    width: 90px;
    height: 90px;
    display: block;
    margin: 0 auto 12px auto;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.5));
}

.maxwin-title {
    font-family: 'Coiny', cursive;
    font-size: 36px;
    color: #fbcb13;
    margin: 0 0 12px 0;
    font-weight: bold;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);
    letter-spacing: 0.5px;
}

.maxwin-message {
    font-family: 'Coiny', cursive;
    font-size: 20px;
    color: #ffffff;
    margin-bottom: 26px;
    line-height: 1.45;
}

.maxwin-buttons {
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap;
}

.maxwin-btn {
    font-family: 'Coiny', cursive;
    font-size: 18px;
    padding: 12px 30px;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-weight: bold;
    min-width: 140px;
}

.maxwin-btn-primary {
    background-color: #fbcb13;
    color: #000000;
    box-shadow: 0 4px 0 #ff7200;
}

.maxwin-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 0 #ff7200;
}

.maxwin-btn-primary:active {
    transform: translateY(2px);
    box-shadow: 0 2px 0 #ff7200;
}

@media (max-width: 600px) {
    .maxwin-modal {
        min-width: 260px;
        max-width: 88%;
        padding: 22px 18px;
    }
    .maxwin-icon {
        width: 60px;
        height: 60px;
    }
    .maxwin-title {
        font-size: 22px;
    }
    .maxwin-message {
        font-size: 15px;
        margin-bottom: 18px;
    }
    .maxwin-btn {
        font-size: 14px;
        padding: 10px 18px;
        min-width: 110px;
    }
}

/* ============================================
   GAME LOADER (BGPP-213: shown while waiting for play response between pipes)
   ============================================ */

.game-loader {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9990; /* Above canvas, below popups */
    pointer-events: none;
    transition: opacity 0.2s ease;
    opacity: 1;
}

.game-loader.hidden {
    opacity: 0;
    visibility: hidden;
}

.game-loader-spinner {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 6px solid rgba(255, 255, 255, 0.25);
    border-top-color: #fbcb13;
    animation: gameLoaderSpin 0.9s linear infinite;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
    background: rgba(0, 0, 0, 0.35);
}

@keyframes gameLoaderSpin {
    to { transform: rotate(360deg); }
}

@media (max-width: 600px) {
    .game-loader-spinner {
        width: 44px;
        height: 44px;
        border-width: 5px;
    }
}