:root {
    --brand-0: #000000;
    --brand-50: #ffffff;
    --brand-100: #e6e7e8;
    --brand-200: #b4b9bb;
    --brand-300: #848c90;
    --brand-400: #525e64;
    --brand-500: #202e35;
    --brand-600: #07171f;

    --brand-blue-100: #e9f0f8;
    --brand-blue-200: #bdd2ed;
    --brand-blue-300: #92b4e1;
    --brand-blue-400: #6796d4;
    --brand-blue-500: #4078c8;
    --brand-blue-600: #1b69bf;

    --brand-red-100: #f9e7ea;
    --brand-red-200: #eeb9c0;
    --brand-red-300: #e68b98;
    --brand-red-400: #de5c6d;
    --brand-red-500: #d52a41;
    --brand-red-600: #d10f2b;

    --brand-orange-100: #fdf2ed;
    --brand-orange-200: #fad9c8;
    --brand-orange-300: #f8c0a5;
    --brand-orange-400: #f5a780;
    --brand-orange-500: #f38d59;
    --brand-orange-600: #f28145;

    --brand-green-100: #edf6f6;
    --brand-green-200: #cbe5e4;
    --brand-green-300: #aad5d3;
    --brand-green-400: #88c3c1;
    --brand-green-500: #66b1af;
    --brand-green-600: #57a9a6;

    --radius-xxs: 2px;
    --radius-xs: 4px;
    --radius-s: 8px;
    --radius-m: 12px;
    --radius-l: 16px;
    --radius-xl: 24px;
    --radius-xxl: 48px;

    --spacing-xxs: 2px;
    --spacing-xs: 4px;
    --spacing-s: 8px;
    --spacing-m: 12px;
    --spacing-l: 16px;
    --spacing-xl: 24px;
    --spacing-xxl: 48px;

    --transition-015: all 0.15s ease-in-out;
    --transition-03: all 0.3s ease-in-out;
    --transition-1: all 1s ease-in-out;

    --font-barlow: 'Barlow';
    --font-lora: 'Lora';
}
* { margin: 0; padding: 0;}
html { scroll-behavior: smooth;}
.noselect {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none;   /* Chrome, Safari, newer Edge */
    -moz-user-select: none;      /* Firefox */
    -ms-user-select: none;       /* Old IE / Edge */
    user-select: none;           /* Standard */
}

.grafika-obal {
    position: relative;
    box-sizing: border-box;
    padding: 0;
    font-family: Barlow, sans-serif;
    width: 100%;
    max-width: 576px;
    margin: 0 auto;
    overflow: hidden;
    border-radius: var(--radius-l);
}



.grafika-obal #game-wrapper {
    position: relative;
    padding: var(--spacing-m);
}
@media (max-width: 480px) {
    .grafika-obal #game-wrapper { padding: var(--spacing-s);}
}

/* Game intro styling */
.grafika-obal .game-infobox-wr {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: var(--transition-1);
}
.grafika-obal .game-infobox-wr.slide-hidden {
    top: 100%;
}
.grafika-obal .game-infobox-wr::before {
    content: "";
    position: absolute;
    top: var(--spacing-l);
    left: var(--spacing-l);
    width: var(--spacing-xl);
    height: var(--spacing-xl);
    padding: var(--spacing-s);
    aspect-ratio: 1/1;
    z-index: 10;
    background-image: url(../../infographics-lib/assets/logo-aktualne-a-bile.svg);
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: center center;
    border-radius: var(--radius-l);
    opacity: 0.75;
}

.grafika-obal .infobox-img {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    flex-grow: 1;
    border-radius: var(--radius-l) var(--radius-l) 0 0;
    background-color: var(--brand-blue-100);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.grafika-obal .infobox-content {
    position: relative;
    width: calc(100% - var(--spacing-l));
    margin: 0 auto;
    margin-bottom: var(--spacing-s);
    z-index: 10;
}
.grafika-obal .infobox-content .infobox-content-bx {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    border-radius: var(--radius-s);
    padding: var(--spacing-l);
}

.grafika-obal .infobox-content::before {
    content: '';
    width: calc(100% + var(--spacing-l));
    height: calc(100% + var(--spacing-s));
    position: absolute;
    bottom: -8px;
    left: -8px;
}

.grafika-obal .infobox-content::after {
    content: '';
    width: calc(100% + var(--spacing-l));
    position: absolute;
    top: -30%;
    left: -8px;
    height: 30%;
}

.grafika-obal .game-infobox-name {
    position: absolute;
    top: var(--spacing-l);
    right: var(--spacing-l);
    padding: var(--spacing-xs) var(--spacing-s);
    border-radius: var(--radius-s);
    font-size: 1rem;
    font-weight: 500;
    color: var(--brand-50);
    z-index: 10;
}

.grafika-obal .infobox-content .infobox-title {
    position: relative;
    margin-bottom: var(--spacing-xl);
    font-size: 1.5rem;
    letter-spacing: 0.02em;
    font-weight: 700;
}
@media (max-width: 480px) {
    .grafika-obal .infobox-content .infobox-title { font-size: 1.25rem;}
}

.grafika-obal .infobox-content .infobox-button {
    position: relative;
    border: none;
    width: 100%;
    color: var(--brand-50);
    padding: var(--spacing-m);
    border-radius: var(--radius-s);
    cursor: pointer;
    transition: var(--transition-015);
    font-size: 1rem;
    line-height: 1.7;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 600;
}

.grafika-obal .infobox-content .infobox-button .infobox-button-icon {
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    margin-right: var(--spacing-m);
    height: 20px;
    width: auto;
}
.grafika-obal .infobox-content .infobox-button .rotate-arrow-icon {
    transition: var(--transition-03);
}
.grafika-obal .infobox-content .infobox-button:hover .rotate-arrow-icon {
    transform: rotate(360deg);
}

.grafika-obal .infobox-content .infobox-credit {
    position: relative;
    display: flex;
    justify-content: center;
    margin-top: var(--spacing-l);
    font-size: 0.875rem;
}


/* Special Efx */
.snow, .rain {
    height: 100%;
    position: absolute;
    width: 100%;
}
/* Game intro styling */





/* Game header styling */
.grafika-obal #game-header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-s);
    margin-bottom: var(--spacing-m);
}
.grafika-obal #game-header .header-name {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-s);
    padding: 0 var(--spacing-s);
}
.grafika-obal #game-header .header-icon {
    position: relative;
    height: var(--spacing-xl);
    width: auto;
}
.grafika-obal #game-header .header-value {
    font-size: 1.5rem;
    font-weight: 600;
    display: inline-block;
    min-width: var(--spacing-xl);
    text-align: left;
}
.grafika-obal #game-header .timer .header-value,
.grafika-obal #game-header .stopwatch .header-value {
    min-width: 50px;
}

/* Shake animation for value changes */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20%, 60%  { transform: translateX(-4px); }
    40%, 80% { transform: translateX(4px); }
}

.grafika-obal #game-header .moves.shake,
.grafika-obal #game-header .high-score.shake,
.grafika-obal #game-header .score.shake,
.grafika-obal #game-header .counter.shake {
    animation: shake 0.5s ease-in-out;
}

/* Progress bar styling */
.progress-container {
    width: 150px;
}
.progress-bar {
    background: #ddd;
    height: 12px;
    border-radius: var(--radius-m);
    overflow: hidden;
}
.progress-fill {
    height: 100%;
    background: var(--brand-blue-600);
    width: 0%;
    transition: 0.3s ease;
}
/* Progress bar styling */
/* Game header styling */


.grafika-obal .blue-theme,
.grafika-obal .blue-theme .infobox-content .infobox-content-bx { background: var(--brand-blue-100);}
.grafika-obal .red-theme,
.grafika-obal .red-theme .infobox-content .infobox-content-bx { background: var(--brand-red-100);}
.grafika-obal .orange-theme,
.grafika-obal .orange-theme .infobox-content .infobox-content-bx { background: var(--brand-orange-100);}
.grafika-obal .green-theme,
.grafika-obal .green-theme .infobox-content .infobox-content-bx { background: var(--brand-green-100);}
.grafika-obal .default-theme,
.grafika-obal .default-theme .infobox-content .infobox-content-bx { background: var(--brand-100);}

.grafika-obal .blue-theme .infobox-content::before { background: var(--brand-blue-400);}
.grafika-obal .red-theme .infobox-content::before { background: var(--brand-red-400);}
.grafika-obal .orange-theme .infobox-content::before { background: var(--brand-orange-400);}
.grafika-obal .green-theme .infobox-content::before { background: var(--brand-green-400);}
.grafika-obal .default-theme .infobox-content::before { background: var(--brand-400);}

.grafika-obal .blue-theme .infobox-content::after { background: linear-gradient(0deg, var(--brand-blue-400), transparent);}
.grafika-obal .red-theme .infobox-content::after { background: linear-gradient(0deg, var(--brand-red-400), transparent);}
.grafika-obal .orange-theme .infobox-content::after { background: linear-gradient(0deg, var(--brand-orange-400), transparent);}
.grafika-obal .green-theme .infobox-content::after { background: linear-gradient(0deg, var(--brand-green-400), transparent);}
.grafika-obal .default-theme .infobox-content::after { background: linear-gradient(0deg, var(--brand-400), transparent);}

.grafika-obal .blue-theme .infobox-content .infobox-title { color: var(--brand-blue-600);}
.grafika-obal .red-theme .infobox-content .infobox-title { color: var(--brand-red-600);}
.grafika-obal .orange-theme .infobox-content .infobox-title { color: var(--brand-orange-600);}
.grafika-obal .green-theme .infobox-content .infobox-title { color: var(--brand-green-600);}
.grafika-obal .default-theme .infobox-content .infobox-title { color: var(--brand-600);}

.grafika-obal .blue-theme .infobox-content .infobox-button,
.grafika-obal .blue-theme .game-infobox-name { background: var(--brand-blue-600);}
.grafika-obal .red-theme .infobox-content .infobox-button,
.grafika-obal .red-theme .game-infobox-name { background: var(--brand-red-600);}
.grafika-obal .orange-theme .infobox-content .infobox-button,
.grafika-obal .orange-theme .game-infobox-name { background: var(--brand-orange-600);}
.grafika-obal .green-theme .infobox-content .infobox-button,
.grafika-obal .green-theme .game-infobox-name { background: var(--brand-green-600);}
.grafika-obal .default-theme .infobox-content .infobox-button,
.grafika-obal .default-theme .game-infobox-name { background: var(--brand-600);}

.grafika-obal .blue-theme .infobox-content .infobox-button:hover,
.grafika-obal .blue-theme .infobox-content .infobox-button:active { background: var(--brand-blue-500);}
.grafika-obal .red-theme .infobox-content .infobox-button:hover,
.grafika-obal .red-theme .infobox-content .infobox-button:active { background: var(--brand-red-500);}
.grafika-obal .orange-theme .infobox-content .infobox-button:hover,
.grafika-obal .orange-theme .infobox-content .infobox-button:active { background: var(--brand-orange-500);}
.grafika-obal .green-theme .infobox-content .infobox-button:hover,
.grafika-obal .green-theme .infobox-content .infobox-button:active { background: var(--brand-green-500);}
.grafika-obal .default-theme .infobox-content .infobox-button:hover,
.grafika-obal .default-theme .infobox-content .infobox-button:active { background: var(--brand-500);}

.grafika-obal .blue-theme .infobox-content .infobox-credit,
.grafika-obal .blue-theme #game-header .header-value { color: var(--brand-blue-300);}
.grafika-obal .red-theme .infobox-content .infobox-credit,
.grafika-obal .red-theme #game-header .header-value { color: var(--brand-red-300);}
.grafika-obal .orange-theme .infobox-content .infobox-credit,
.grafika-obal .orange-theme #game-header .header-value { color: var(--brand-orange-300);}
.grafika-obal .green-theme .infobox-content .infobox-credit,
.grafika-obal .green-theme #game-header .header-value { color: var(--brand-green-300);}
.grafika-obal .default-theme .infobox-content .infobox-credit,
.grafika-obal .default-theme #game-header .header-value { color: var(--brand-300);}

.grafika-obal .blue-theme #game-header .header-icon,
.grafika-obal .blue-theme .infobox-content .infobox-button .infobox-button-icon { fill: var(--brand-blue-300);}
.grafika-obal .red-theme #game-header .header-icon,
.grafika-obal .red-theme .infobox-content .infobox-button .infobox-button-icon { fill: var(--brand-red-300);}
.grafika-obal .orange-theme #game-header .header-icon,
.grafika-obal .orange-theme .infobox-content .infobox-button .infobox-button-icon { fill: var(--brand-orange-300);}
.grafika-obal .green-theme #game-header .header-icon,
.grafika-obal .green-theme .infobox-content .infobox-button .infobox-button-icon { fill: var(--brand-green-300);}
.grafika-obal .default-theme #game-header .header-icon,
.grafika-obal .default-theme .infobox-content .infobox-button .infobox-button-icon { fill: var(--brand-300);}