@font-face {
    font-family: 'Roboto Variable';
    src: url('../assets/fonts/Roboto-VariableFont.woff2') format('woff2-variations');
    font-weight: 100 900;
    font-stretch: 50% 200%;
    font-display: swap;
}

:root{
    //--bg-color: #F5F8F9;
    --bg-color: linear-gradient(#CFDEE3,#F5F8F9);
    --placeholder-empty: #52707A;
    --placeholder-filled: #52707A;
    --header-bg:#EAEFF2;
    --header-text:#3D4A52;
    --header-icons-stroke: #5D829B;
    --header-icons-active: #a78e36;
    --header-icons-inactive: #c9c8c8;
    --footer-text:#D5DEE2;
    --footer-bg: #364754;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.header{
    background-color: var(--header-bg);
    color: var(--header-text);
    position: fixed;
    height: 60px;
    width: 100vw;
    z-index: 1000;
}

.header-logo{
    cursor:pointer;
}

button.header-btn{
    stroke: var(--header-icons-stroke);
}

button.header-btn.active{
    stroke: var(--header-icons-active);
}

button.header-btn.inactive{
    stroke: var(--header-icons-inactive);
}

.footer{
    background-color: var(--footer-bg);
    color: var(--footer-text);
}

html{
    //background: var(--bg-color);
    user-select: none;
}



body.dark-theme {
    --bg-color: #A9A9A9;
    --placeholder-empty: #E7E7E7; /* Светло-серый для темной темы */
}

body{
    background: var(--bg-color);
    background-attachment: fixed;
    transition: background-color 0.6s ease, color 0.6s ease;
    font-family: 'Inter', sans-serif; /* Установка шрифта Inter */
    display: flex; /* Активация Flexbox */
    flex-direction: column; /* Элементы располагаются в колонку */
    min-height: calc(var(--vh, 1vh) * 100);
}

main{
    //background: var(--bg-color);
    flex-grow: 1;
    transition: background-color 0.6s ease, color 0.6s ease;
}


.field-container{
    //background: var(--bg-color);
    display: grid;
    justify-content: center;
}
.svg-container{
    display: grid;
    justify-content: center;
    margin-top: 5px;
    position: relative;
    width: 100vw;
    height: 30vh;
    overflow: hidden;
    user-select: none;
}

.svg-container svg {
    position: absolute; /* Абсолютное позиционирование */
    top: 0; /* Привязка к верхнему краю */
    left: 0; /* Привязка к левому краю */
    width: 100%; /* Занимает 100% ширины родителя */
    height: 100%; /* Занимает 100% высоты родителя */
}

.svg-pane{
    //background: var(--bg-color);
}

.letters-pane-container{
    //background: var(--bg-color);
}

#path {
    /*stroke: #d5d0c7b3;*/
   /* stroke: #C2B067;*/
    stroke:#a78e366b;
    stroke-width: 0.3rem;
    visibility: hidden;
    /* dasharray: 5px, 5px; Optional: adds a dashed line effect */
}

.pearl, .pearl-h{
    fill: url(#pearlGradient);
    filter: url(#pearlDropShadow);
}

.pearl-glow, .pearl-glow-h{
    fill:url(#iridescentGlow);
    opacity: 0.7;
}

.pearl-highlight, .pearl-highlight-h{
    fill: white;
    filter: url(#highlightGlow);
    opacity: 0.8;
}

/* PLACEHOLDERS !*/

.kw-placeholders-group{
    background-color:gold;
}

.last-placeholder {
    display: inline-block;  /* или block, flex, grid — зависит от контекста */
    /**transform-origin: center;**/

}

.dynamic-placeholder{
    text-anchor: middle;
    dominant-baseline: middle;
    font-size: 40px;
}

.placeholder-empty{
    fill: var(--placeholder-empty);
}

.placeholder-filled{
    fill: var(--placeholder-filled);
}



/* LETTERS !*/
.letter-button {
    font-family: 'Roboto Variable', sans-serif;
    width: 3.5rem;
    height: 3.5rem;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.1rem;
    font-weight: 700;
    color: #3D4A52;
    background-color: #A8DADC75;
    border: 2px solid #86B1b3ED;
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    cursor: pointer;
    user-select: none;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2),
                inset 0 0 8px rgba(255, 255, 255, 0.5);
}

.letter-button span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

@media (hover: hover) and (pointer: fine) {
    .letter-button:hover:not(.disabled):not(.active) {
        background-color: #8ecbd9;
        border-color: #5aa1b8;
        transform: translateY(-1px);
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3),
                    inset 0 0 10px rgba(255, 255, 255, 0.6);
    }
}


/* Состояние active (нажатие) */
.letter-button:active:not(.disabled) {
    background-color: #FFD180; /* Еще более темный голубой при нажатии */
    border-color: #4c8a9e; /* Темная рамка */
    transform: translateY(0); /* Возврат на место */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), /* Уменьшение внешней тени */
                inset 0 0 15px rgba(0, 0, 0, 0.3); /* Сильная внутренняя тень для эффекта вдавливания */
}

/* Состояние disabled (неактивность) */
.letter-button.disabled {
    background-color: #e0e6eb; /* Очень светлый серый фон */
    color: #b0c0ce; /* Светло-серый текст */
    border-color: #cdd5dc; /* Очень светлая рамка */
    opacity: 0.35;
    box-shadow: none; /* Убираем тени */
    transform: none; /* Убираем трансформации */
}

/* Состояние active (выбранная кнопка) */
.letter-button.active {
    background-color: #FDF0DE;
    color: #3f3737f3;
    font-weight:600;
    border-color: #F9DDB5;
    box-shadow: 0 6px 12px  #FDF0DEB8, /* Оранжевая тень */
                inset 0 0 8px rgba(255, 255, 255, 0.7); /* Светлая внутренняя тень */
}

.fade-out{-webkit-animation:fade-out 1s ease-out both;animation:fade-out 1s ease-out both}
.fade-in-fwd{-webkit-animation:fade-in-fwd 4s cubic-bezier(.39,.575,.565,1.000) both;animation:fade-in-fwd 4s cubic-bezier(.39,.575,.565,1.000) both}
/* ----------------------------------------------
 * Generated by Animista on 2025-5-29 15:35:29
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info.
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

@-webkit-keyframes fade-out{0%{opacity:1}100%{opacity:0}}@keyframes fade-out{0%{opacity:1}100%{opacity:0}}
@-webkit-keyframes fade-in-fwd{0%{-webkit-transform:translateZ(-80px);transform:translateZ(-80px);opacity:0}100%{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}@keyframes fade-in-fwd{0%{-webkit-transform:translateZ(-80px);transform:translateZ(-80px);opacity:0}100%{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}

 /* Styles for the used cross symbol */
.clear-cross-instance {
    stroke:#A02727;
    width: 25px;
    height: 25px;
    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.3)); /* Shadow for volume */
    cursor: pointer; /* To simulate an interactive button */

}

.clear-cross-instance:hover {
    opacity: 0.6;
    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.7)); /* More prominent shadow */
}

.hidden{
    visibility = 'hidden';
}

.pearl-letter{
    text-anchor: middle;
    dominant-baseline: middle;
    fill: url("#grad");
}

#prg-m-1{
    font-size: 2.25rem;
}
#prg-m-2{
    font-size: 2.5rem;
}
#prg-m-3{
    font-size: 2.75rem;
}
#prg-m-4{
    font-size: 2.5rem;
}
#prg-m-5{
    font-size: 2.25rem;
}

/* Theme control styles */
/* Динамическое изменение цвета иконки SVG через фильтр */
.light-icon svg {
    filter: invert(0%); /* Для светлой темы иконка остается темной */
    transition: background-color 0.6s ease, color 0.6s ease;
}

.dark-icon svg {
    filter: invert(100%); /* Для темной темы иконка становится светлой */
    transition: background-color 0.6s ease, color 0.6s ease;
}


.icon-hidden {
    display: none;
}

.message-container {
    position: fixed;
    width: 100vw;
    top: 35vh;
    font-family: 'Roboto Variable', sans-serif;
    opacity: 0;
    max-width: 95vw;
    transition: opacity 1.2s ease-in-out, visibility 1.2s ease-in-out;
}

.message-container.visible {
    opacity: 1;
}

.message{
    font-size: 1.75rem;
}

.message-details{
    font-size: 1.5rem;
}

@media (max-width: 768px) {
    .letter-button {
        width: 3.5rem;
        height: 3.5rem;
    }
    #title.text-3xl{
        font-size: 1.5rem;
    }
}

/* ----------------------------------------------
 * Generated by Animista on 2025-6-22 18:26:58
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info.
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

@-webkit-keyframes fade-in-2{0%{opacity:0}100%{opacity:1}}@keyframes fade-in-2{0%{opacity:0}100%{opacity:1}}
.fade-in-2{-webkit-animation:fade-in 2s cubic-bezier(.55,.055,.675,.19) both;animation:fade-in 2s cubic-bezier(.55,.055,.675,.19) both}

#gratz-container{
    font-family: 'Roboto Variable', sans-serif;
    row-gap: 2rem;
}

/*Share*/
.share-score-icon{
    width: 26px;
    color:red;
}

.round-btn{
    background-color: #f3f3f3;
    /*color: #1DA1F2;*/
    color: #3D4A52;
    border-radius: 50%;
    border-width: 1px;
    border-color: #bebebe;
    width: 3rem;
    height: 3rem;
    padding: 5px;
    box-shadow: #e5e1e1 0px 1px 4px 2px;
}

.reload-btn{
    display: inline-block;
    transition: transform 0.5s ease;
    transform: rotate(0deg);
}

.round-btn:hover {
    padding: 3px;
    background-color: #ededed;
    color: #313c43;
}

.reload-btn:hover {
  transform: rotate(45deg);
}

/*About*/
.howto-container,.about-container{
    font-family: 'Roboto Variable', sans-serif;
}

.scroll-div {
    opacity: 0;
    transition: opacity 0.7s ease-in-out;
}

.scroll-div.visible {
    opacity: 1;
}

.outer-link{
    color: #a78e36;
    text-decoration: underline;
}

@media (max-width: 768px) and (orientation: portrait) {
  #h-logo {
    display: none;
  }
  .about-container{
    max-width: 28rem;
  }
}