:root {
    --bb-purple: #902FF2;
    --bb-pink: #FF0090;
    --bb-yellow: #FAD604;
    --bb-blue: #20C4F4;
    --bb-red: #D80000;
    --bb-dark: #1E0041;
    --bb-white: #FFFFFF;
}

@font-face {
    font-family: "Nunito";
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url("assets/fonts/nunito-800-cyrillic.woff2") format("woff2");
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
    font-family: "Nunito";
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url("assets/fonts/nunito-800-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Rubik";
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url("assets/fonts/rubik-800-latin.woff2") format("woff2");
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    touch-action: none;
}

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: var(--bb-dark);
    font-family: "Nunito", "Segoe UI", sans-serif;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    touch-action: none;
    overscroll-behavior: none;
}

#game-container {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: var(--bb-dark);
    touch-action: none;
}

#stage {
    position: relative;
    width: 1280px;
    height: 720px;
    flex-shrink: 0;
    overflow: hidden;
    transform-origin: center center;
    touch-action: none;
    visibility: hidden;
}

html.stage-fit #stage {
    visibility: visible;
}

#background {
    position: absolute;
    inset: 0;
    background-repeat: no-repeat;
    z-index: 0;
}

#score-panel {
    position: absolute;
    left: 88px;
    top: 20px;
    z-index: 1100;
    color: var(--bb-white);
    font-family: "Nunito", "Segoe UI", sans-serif;
    font-size: 28px;
    font-weight: 800;
    line-height: 1;
    pointer-events: none;
    padding: 18px 26px 14px 22px;
    border-radius: 56px 20px 20px 20px;
    background: linear-gradient(135deg, rgba(144, 47, 242, 0.88), rgba(255, 0, 144, 0.78));
    -webkit-font-smoothing: antialiased;
}

.score-row {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 44px;
}

.score-label {
    color: var(--bb-white);
    font-size: 26px;
    font-weight: 800;
    letter-spacing: 0.01em;
    min-width: 96px;
}

#stash-value,
#timer-value,
#high-score-value {
    color: var(--bb-white);
    font-family: "Rubik", "Nunito", sans-serif;
    font-size: 28px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.stash-track {
    width: 168px;
    height: 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.22);
    overflow: hidden;
    flex-shrink: 0;
}

#stash-fill {
    height: 100%;
    width: 0%;
    border-radius: inherit;
    background: var(--bb-yellow);
    transition: width 0.18s ease-out;
}

#timer-value.is-urgent {
    color: var(--bb-yellow);
}

#combo-banner {
    position: absolute;
    top: 28px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1100;
    pointer-events: none;
    padding: 12px 28px;
    border-radius: 999px;
    background: var(--bb-pink);
    color: var(--bb-white);
    font-size: 28px;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.hud-chip {
    position: absolute;
    top: 20px;
    z-index: 2100;
    appearance: none;
    border: 0;
    width: 56px;
    height: 56px;
    padding: 0;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--bb-purple), var(--bb-pink));
    box-shadow: 0 3px 0 rgba(30, 0, 65, 0.35);
    color: var(--bb-white);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
    touch-action: none;
}

#hud-lobby {
    left: 20px;
}

#hud-corner {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 2300;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
}

#hud-corner .hud-chip {
    position: relative;
    top: auto;
    right: auto;
}

.hud-chip svg {
    width: 28px;
    height: 28px;
}

#help-button svg {
    fill: currentColor;
}

#hud-mute svg {
    fill: currentColor;
}

#hud-mute .slash {
    display: none;
}

#hud-mute.is-muted .waves {
    display: none;
}

#hud-mute.is-muted .slash {
    display: block;
}

.hud-chip:active {
    filter: brightness(0.92);
    transform: translateY(1px);
    box-shadow: 0 2px 0 rgba(30, 0, 65, 0.35);
}

#holes-container {
    position: absolute;
    inset: 0;
    z-index: 10;
}

.hole {
    position: absolute;
    width: 300px;
    height: 300px;
}

.hole[data-index="0"] {
    left: 196.6px;
    top: 268.8px;
}

.hole[data-index="1"] {
    left: 490px;
    top: 400.7px;
}

.hole[data-index="2"] {
    left: 744.02px;
    top: 210px;
}

.hole-image {
    position: absolute;
    inset: 0;
    background: url('assets/textures/HitTheSquirrelMiniGame_Hole.webp') center center / contain no-repeat;
    z-index: 1;
    pointer-events: none;
}

.squirrel-mask {
    position: absolute;
    left: 0;
    top: -85.2px;
    width: 300px;
    height: 300px;
    z-index: 3;
    overflow: hidden;
    -webkit-mask-image: url('assets/textures/MaskHoleShir.png');
    mask-image: url('assets/textures/MaskHoleShir.png');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-mode: alpha;
    mask-mode: alpha;
}

.squirrel-img {
    position: absolute;
    left: 63.03px;
    top: 79.5px;
    width: 181.5px;
    height: 214.5px;
    transform: translate3d(0, 230px, 0);
    pointer-events: auto;
    background-repeat: no-repeat;
    will-change: transform;
}

.squirrel-img.is-hidden {
    pointer-events: none;
}

#fx-layer,
#particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 999;
    overflow: hidden;
}

#particles-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.fx-coin {
    position: absolute;
    left: 0;
    top: 0;
    width: 72px;
    height: 72px;
    background: url("assets/textures/brand-coin.webp?v=bb") center / contain no-repeat;
    opacity: 0;
    will-change: transform, opacity;
}

.fx-float {
    position: absolute;
    left: 0;
    top: 0;
    color: var(--bb-yellow);
    font-family: "Nunito", "Segoe UI", sans-serif;
    font-size: 42px;
    font-weight: 800;
    text-shadow: 0 2px 0 rgba(30, 0, 65, 0.35);
    pointer-events: none;
    will-change: transform, opacity;
}

#countdown {
    position: absolute;
    inset: 0;
    z-index: 1500;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

#countdown[hidden] {
    display: none;
}

#countdown-value {
    color: var(--bb-yellow);
    font-family: "Nunito", "Segoe UI", sans-serif;
    font-size: 220px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.04em;
    text-shadow:
        0 8px 0 rgba(30, 0, 65, 0.45),
        0 18px 32px rgba(30, 0, 65, 0.4);
}

#countdown-value.is-pop {
    animation: countdown-pop 0.55s cubic-bezier(0.2, 1.4, 0.3, 1);
}

@keyframes countdown-pop {
    0% {
        transform: scale(0.45);
        opacity: 0;
    }
    35% {
        transform: scale(1.12);
        opacity: 1;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

#overlay {
    position: absolute;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(30, 0, 65, 0.42);
}

#overlay.is-hidden {
    display: none;
}

.overlay-card {
    width: min(560px, 86%);
    max-height: 92%;
    overflow: auto;
    padding: 44px 42px 36px;
    border-radius: 72px 24px 24px 24px;
    background: linear-gradient(135deg, rgba(144, 47, 242, 0.94), rgba(255, 0, 144, 0.88));
    color: var(--bb-white);
}

#overlay-title {
    font-size: 48px;
    font-weight: 800;
    line-height: 1.05;
    margin-bottom: 12px;
}

#overlay-text {
    font-size: 24px;
    font-weight: 800;
    line-height: 1.25;
    opacity: 0.95;
}

#overlay-stats {
    margin-top: 22px;
    font-size: 22px;
    font-weight: 800;
    line-height: 1.45;
}

#overlay-stats[hidden] {
    display: none;
}

#overlay-record {
    margin-top: 18px;
    font-size: 22px;
    font-weight: 800;
}

#mode-hint {
    margin-top: 12px;
    font-size: 20px;
    font-weight: 800;
    color: var(--bb-yellow);
}

#mode-row {
    display: flex;
    gap: 10px;
    margin-top: 16px;
}

.mode-button {
    flex: 1;
    min-width: 0;
    border: 0;
    border-radius: 999px;
    padding: 12px 8px;
    background: rgba(255, 255, 255, 0.18);
    color: var(--bb-white);
    font-family: "Nunito", "Segoe UI", sans-serif;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0.04em;
    cursor: pointer;
    pointer-events: auto;
    touch-action: none;
}

.mode-button.is-selected {
    background: var(--bb-pink);
}

#menu-actions {
    display: flex;
    gap: 12px;
    margin-top: 28px;
}

#play-button,
#lobby-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-width: 0;
    border: 0;
    border-radius: 999px;
    padding: 16px 22px;
    background: var(--bb-pink);
    color: var(--bb-white);
    font-family: "Nunito", "Segoe UI", sans-serif;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: 0.08em;
    cursor: pointer;
    pointer-events: auto;
    touch-action: none;
}

#lobby-button {
    background: rgba(255, 255, 255, 0.18);
}

#play-button:active,
#lobby-button:active,
#help-close:active,
.mode-button:active {
    background: #e00080;
}

#menu-card[hidden] {
    display: none;
}

#help.is-hidden {
    display: none;
}

#help {
    position: absolute;
    inset: 0;
    z-index: 2200;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(30, 0, 65, 0.62);
    pointer-events: auto;
    touch-action: pan-y;
}

#help-card {
    max-height: min(86%, 720px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#help-title {
    flex: 0 0 auto;
    font-size: 40px;
    font-weight: 800;
    line-height: 1.05;
    margin-bottom: 12px;
}

#help-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    font-size: 22px;
    font-weight: 800;
    line-height: 1.35;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    padding-right: 4px;
}

#help-body h2 {
    margin: 16px 0 6px;
    font-size: 16px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.78;
}

#help-body h2:first-child {
    margin-top: 0;
}

#help-body p {
    margin: 0 0 8px;
}

#help-actions {
    display: flex;
    flex: 0 0 auto;
    gap: 12px;
    margin-top: 22px;
}

#help-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-width: 0;
    border: 0;
    border-radius: 999px;
    padding: 16px 22px;
    background: var(--bb-pink);
    color: var(--bb-white);
    font-family: "Nunito", "Segoe UI", sans-serif;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: 0.08em;
    cursor: pointer;
    pointer-events: auto;
    touch-action: none;
}

body.portrait #stage {
    width: 720px;
    height: 1280px;
}

body.portrait #score-panel {
    left: 128px;
    top: 24px;
    padding: 22px 28px 18px 24px;
    transform: scale(0.74);
    transform-origin: top left;
}

body.portrait .hud-chip {
    top: 22px;
    width: 88px;
    height: 88px;
}

body.portrait #hud-lobby {
    left: 24px;
}

body.portrait #hud-corner {
    top: 22px;
    right: 24px;
    gap: 16px;
}

body.portrait .hud-chip svg {
    width: 44px;
    height: 44px;
}

body.portrait .score-row {
    height: 56px;
}

body.portrait .score-label,
body.portrait #stash-value,
body.portrait #timer-value,
body.portrait #high-score-value,
body.portrait #combo-banner {
    font-size: 32px;
}

body.portrait .score-label {
    min-width: 118px;
}

body.portrait .stash-track {
    width: 180px;
    height: 16px;
}

body.portrait #countdown-value {
    font-size: 260px;
}

body.portrait #overlay-title {
    font-size: 56px;
}

body.portrait #overlay-text,
body.portrait #overlay-stats,
body.portrait #overlay-record,
body.portrait #mode-hint {
    font-size: 26px;
}

body.portrait .mode-button {
    font-size: 18px;
    padding: 16px 10px;
}

body.portrait #play-button,
body.portrait #lobby-button,
body.portrait #help-close {
    font-size: 20px;
}

body.portrait #help-title {
    font-size: 48px;
}

body.portrait #help-body {
    font-size: 24px;
}

body.portrait .hole[data-index="0"] {
    left: 2%;
    top: 34%;
}

body.portrait .hole[data-index="1"] {
    left: 29%;
    top: 54%;
}

body.portrait .hole[data-index="2"] {
    left: 56%;
    top: 30%;
}