/* ========================================================
   1. FONTS & ROOT VARIABLES
   ======================================================== */
@font-face {
    font-family: "monotyper";
    src: url("MonospaceTypewriter.ttf") format("truetype");
    font-style: normal;
    font-weight: normal;
}

:root {
    --font-scale: 1;
    --nothing: rgba(0, 0, 0, 0);
    --absolute-worst: rgb(0, 0, 0);
    --worst: rgb(18, 18, 18);
    --disgusting: rgb(45, 45, 45);
    --abominable: rgb(61, 61, 61);
    --repulsive: rgb(77, 77, 77);
    --dreadful: rgb(96, 96, 96);
    --appalling: rgb(119, 117, 117); /* Исправлено: 2 буквы 'l' */
    --horrible: rgb(132, 131, 131);
    --awful: rgb(152, 150, 150);
    --terrible: rgb(172, 169, 169);
    --poor: rgb(180, 180, 180);
    --unremarkable: rgb(200, 200, 200);
    --bad: rgb(216, 216, 216);
    --so-so: rgb(234, 234, 234);
    --common: rgb(255, 255, 255);
    --regular: rgb(228, 255, 227);   /* Исправлено: 256 -> 255 */
    --standard: rgb(204, 255, 202);  /* Исправлено: 256 -> 255 */
    --decent: rgb(190, 255, 174);    /* Исправлено: 256 -> 255 */
    --average: rgb(170, 255, 150);   /* Исправлено: 256 -> 255 */
    --usual: rgb(158, 255, 145);
    --moderate: rgb(165, 255, 140);
    --adequate: rgb(175, 255, 135);
    --fair: rgb(185, 255, 130);
    --fine: rgb(195, 255, 125);
    --solid: rgb(205, 255, 120);
    --worthy: rgb(215, 255, 115);
    --admirable: rgb(225, 255, 110);
    --unusual: rgb(235, 255, 105);
    --uncommon: rgb(245, 255, 100);
    --good: rgb(255, 255, 95);
    --valuable: rgb(255, 240, 80);
    --impressive: rgb(255, 230, 75);
    --significant: rgb(255, 220, 70);
    --important: rgb(255, 210, 65);
    --highquality: rgb(255, 200, 60);
    --remarkable: rgb(255, 190, 55);
    --great: rgb(255, 180, 50);
    --exceptional: rgb(255, 175, 45);
    --excellent: rgb(255, 170, 40);
    --refined: rgb(255, 160, 35);
    --exquisite: rgb(255, 150, 30);
    --elegant: rgb(255, 140, 25);
    --rare: rgb(255, 130, 20);
    --extraordinary: rgb(255, 120, 15);
    --outstanding: rgb(255, 110, 10);
    --satisfactory: rgb(255, 100, 5);
    --respectable: rgb(255, 90, 0);
    --well-made: rgb(255, 80, 0);
    --shining: rgb(255, 70, 0);
    --newbie: rgb(234, 202, 255);
    --unknown: rgb(255, 231, 200);
    --forgotten: rgb(255, 220, 174);
    --obscure: rgb(255, 205, 141);
    --unnoted: rgb(255, 195, 135);
    --noticed: rgb(255, 185, 130);
}

/* ========================================================
   2. RESET & BASE LAYOUT
   ======================================================== */
*, *::before, *::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    min-height: 100vh;
    font-family: "monotyper", monospace;
    background: linear-gradient(rgb(153, 153, 153), rgb(87, 87, 87));
    color: #000;
}

button, input, select, textarea {
    font-family: inherit;
}

span {
    user-select: none;
}

#game {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
}

#buttons, #statsButtons, #upgradesButtons, #prestigeButtons {
    width: 100%;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
    margin: 6px 0;
}

.whiteButton {
    border: 2px black solid;
    background-color: white;
    border-radius: 5px;
    font-size: calc(16px * var(--font-scale));
    padding: 6px 12px;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.1s;
}

.whiteButton:active {
    transform: scale(0.97);
}

.half {
    width: 50%;
    min-height: 90vh;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
    padding: 10px;
}

.full-width {
    width: 100% !important;
}

/* ========================================================
   3. ROLLS PANEL
   ======================================================== */
#rollScreen {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
}

.roll {
    display: flex;
    flex-direction: column;
    margin: 10px;
    text-align: center;
    align-items: center;
}

#raritiesScreen {
    height: 73vh;
    justify-content: flex-start;
    text-align: center;
}

#rollButton, #rollButton2, #rollButton3 {
    height: 110px;
    width: 110px;
    border: 2px black solid;
    background-color: white;
    border-radius: 10px;
    font-size: 20px;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.1s;
}

#rollButton:active, #rollButton2:active, #rollButton3:active {
    transform: scale(0.95);
}

/* ========================================================
   1. КАРТОЧКИ УЛУЧШЕНИЙ И НАСТРОЕК
   ======================================================== */
.buyableUpgrade, 
.settingButton, 
.masteryBuyableUpgrade,
.template-upgrade {
    min-height: 110px;
    width: 100%;             /* Растягивается внутри ячейки CSS Grid */
    max-width: 220px;
    margin: 4px;
    background-color: #ffffff;
    color: black;
    border: 2px black solid;
    border-radius: 4px;
    font-size: 11px;
    cursor: pointer;
    display: block;
    justify-content: center;
    align-items: center;
    text-align: center;
    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
}

/* Ховер для активных обычных кнопок */
#rollButton:hover, 
#buttons button:hover, 
#statsButtons button:hover, 
.buyableUpgrade:hover:not(:disabled), 
.settingButton:hover:not(:disabled), 
.smallButton:hover:not(:disabled), 
.whiteButton:hover:not(:disabled) {
    background-color: rgb(220, 220, 220);
    cursor: pointer;
}

/* Состояния заблокированных обычных апгрейдов */
.buyableUpgrade:disabled {
    background-color: rgb(197, 197, 197) !important;
    color: rgb(56, 56, 56);
    cursor: not-allowed;
}

.buyableUpgrade:disabled:hover {
    background-color: rgb(189, 109, 109) !important;
}

.upgradesGrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    width: 100%;
    max-width: 680px;
    margin: 8px auto;
}

.prestigeGrid {
    grid-template-columns: repeat(4, 1fr);
    max-width: 720px;
}

.upgradeCurrency {
    color: rgb(180, 100, 100);
    text-shadow: 0.8px 0.8px #000, -0.8px -0.8px #000, 0.8px -0.8px #000, -0.8px 0.8px #000;
    font-weight: bold;
    pointer-events: none;
}

.upgradeCurrency.completed {
    color: rgb(141, 221, 141);
}

/* ========================================================
   2. МАСТЕРИ-СТИЛИЗАЦИЯ (ФИОЛЕТОВАЯ ТЕМА)
   ======================================================== */
#rollButton2, 
.masteryBuyableUpgrade, 
.masteryButton {
    color: #ffffff;
    background-color: #2b003b;
    border: 2px solid #490688;
    border-radius: 6px;
    cursor: pointer;
    box-shadow: 0 0 8px #490688, inset 0 0 8px #490688;
    transition: background-color 0.2s, box-shadow 0.2s;
}

.masteryButton {
    border-radius: 3px;
}

#rollButton2:hover:not(:disabled), 
.masteryBuyableUpgrade:hover:not(:disabled), 
.masteryButton:hover {
    background-color: #521888 !important;
}

.masteryBuyableUpgrade:disabled {
    background-color: #765880 !important;
    border-color: #444444;
    box-shadow: none;
    cursor: not-allowed;
}

.masteryBuyableUpgrade:disabled:hover {
    background-color: rgb(189, 109, 109) !important;
}

/* ========================================================
   3. КУЛДАУНЫ И ПРОГРЕСС-БАРЫ
   ======================================================== */
#rollCooldown, #rollCooldown2, #rollCooldown3 {
    position: relative;       /* Фиксирует абсолютную полосу внутри */
    height: 20px;
    width: 80px;
    border: 2px black solid;
    background-color: gray;
    margin: 10px auto;
    overflow: hidden;         /* Обрезает края полосы прогресса */
    display: flex;
    align-items: center;
    justify-content: center;
}

#rollCooldownProgress, #rollCooldownProgress2, #rollCooldownProgress3 {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0%;
    background-color: #AAAAAA;
    transition: width 0.05s linear;
}

#cdText, #cdText2, #cdText3, .prestige-bar-text {
    font-size: 13px;
    position: relative;
    z-index: 2;               /* Текст всегда поверх полосы заливки */
    color: #000000;
    font-weight: bold;
    /* text-shadow: 1px 1px 2px #000000; */
}

/* ========================================================
   4. ТЕНИ ТЕКСТА И СКРОЛЛБАР
   ======================================================== */
.rarityCount, .rarityText, .rarityTable, .optionList span, .masteryRarityCount, .masteryRarityColor, .masteryRarityTable {
    text-shadow: 0.5px 0.5px #000, -0.5px -0.5px #000, 0.5px -0.5px #000, -0.5px 0.5px #000;
}

.rarityCount.darkMode, .rarityText.darkMode, .rarityTable.darkMode, .optionList.darkMode span, .masteryRarityCount.darkMode, .masteryRarityColor.darkMode, .masteryRarityTable.darkMode {
    text-shadow: none;
    font-weight: bold;
    color: black !important;
}

.rarityCount, .masteryRarityCount {
    width: 300px;
}

#raritiesScreen::-webkit-scrollbar {
    width: 6px;
}
  
#raritiesScreen::-webkit-scrollbar-thumb {
    background-color: #555555;
    border-radius: 3px;
}
  
#raritiesScreen::-webkit-scrollbar-track {
    background: transparent;
}

/* ========================================================
   5. ЭКРАНЫ НАСТРОЕК И ЗАГРУЗКИ ФАЙЛА
   ======================================================== */
.settingButton {
    font-size: 16px;
    min-width: 220px;
}

.settingsRow {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 6px;
}

.loadfile {
    display: flex;
    justify-content: center;
    text-align: center;
    align-items: center;
    min-height: 110px;
    width: 100%;
    max-width: 220px;
}

/* ========================================================
   1. ЗАТЕМНЯЮЩИЙ ФОН (BACKDROP)
   ======================================================== */
.myPopupBackdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 9900;
    display: none;
    justify-content: center;
    align-items: center;
}

/* ========================================================
   2. БАЗОВЫЕ СТИЛИ МОДАЛЬНОГО ОКНА
   ======================================================== */
.gameWindow {
    position: fixed;
    padding-top: 10px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #a1a1a1;
    border: 2px solid #000000;
    border-radius: 6px;
    width: 750px;
    max-width: 92vw;
    height: 550px;
    max-height: 88vh;
    z-index: 9989;
    display: none;
    box-sizing: border-box;
    flex-direction: column;
}

.titleDivClass {
    width: 100%;
    text-align: center;
    margin-bottom: 6px;
}

.windowTitle {
    color: #000;
    font-size: 24px;
    font-weight: bold;
    margin: 0;
}

/* Кнопка закрытия окна */
.closeWindow {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 32px;
    height: 32px;
    border: 2px solid #000000;
    background-color: #a1a1a1;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.closeWindow::before {
    content: "";
    display: block;
    width: 18px;
    height: 18px;
    background-image: url("images/close.png");
    background-size: contain;
    background-repeat: no-repeat;
    filter: invert();
}

.closeWindow:hover {
    background-color: #b9b9b9;
}

.closeWindow:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

/* Разделительные линии */
.horizontalLine {
    background-color: #000000;
    width: 100%;
    height: 2px;
}

.line {
    background-color: #000000;
    width: 2px;
    min-height: 100%;
}

#changelogInside, #helpInside {
    height: -webkit-fill-available;
    height: inherit;
}

/* ========================================================
   3. СПРАВКА И ЧЕЙНДЖЛОГ (HELP & CHANGELOG)
   ======================================================== */
#gameHelpWindow, #changelogWindow {
    display: none;
    flex-direction: column;
}

/* Контейнер для двух колонок (меню слева + контент справа) */
#gameHelpWindow > div:not(.titleDivClass):not(#horizontalLine),
#changelogWindow > div:not(.titleDivClass):not(#horizontalLine) {
    display: flex;
    overflow: hidden;
}

#helpPageChooser, #changelogPageChooser {
    display: flex;
    flex-direction: column;
    width: 130px;
    overflow-y: auto;
    flex-shrink: 0;
}

.versionButton {
    border: 1px solid #000000;
    border-left: none;
    border-right: none;
    border-top: none;
    background-color: transparent;
    color: #000000;
    font-size: 13px;
    padding: 8px 4px;
    cursor: pointer;
    text-align: center;
    transition: background-color 0.2s;
}

.versionButton:hover {
    background-color: #bebebe;
}

#helpDiv, #changelogDiv {
    flex: 1;
    overflow-y: auto;
    padding: 10px 15px;
    box-sizing: border-box;
}

#helpPageTitle, #changelogTitle2 {
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    margin: 0 0 10px 0;
}

#helpDescription, #changelogDescription {
    margin: 0;
    font-size: 14px;
    line-height: 1.4;
}

/* ========================================================
   4. ОКНА СБРОСА И ОФФЛАЙН-ПРОИЗВОДСТВА
   ======================================================== */
.confirmationWindow {
    width: 420px;
    height: 220px;
    justify-content: space-between;
    align-items: center;
    text-align: center;
    padding: 20px;
}

#windowTitleDiv {
    width: 100%;
    margin-top: 15px;
}

#confirmationButtons {
    display: flex;
    justify-content: center;
    gap: 15px;
    width: 100%;
    margin-bottom: 10px;
}

#offlineWindow {
    width: 420px;
    height: 320px;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
}

#offlineDiv {
    width: 100%;
    text-align: center;
    font-size: 16px;
    margin: auto 0;
}

#offlineButtons {
    display: flex;
    justify-content: center;
    gap: 12px;
    width: 100%;
}

.smallButton {
    font-size: 16px;
    width: 110px;
    height: 38px;
    cursor: pointer;
}

.smallButton:disabled {
    background-color: #dadada;
    cursor: not-allowed;
}

/* ========================================================
   1. БЕГУЩАЯ СТРОКА (MARQUEE)
   ======================================================== */
.marquee-container {
    width: 100%;
    height: 22px;
    background-color: #3b3b3b;
    overflow: hidden;
    display: flex;
    align-items: center;
    color: #ffffff;
    font-size: 13px;
    position: relative;
    z-index: 100;
}

.marquee-text {
    position: relative;
    white-space: nowrap;
    will-change: transform;
    display: inline-block;
}

/* ========================================================
   2. ЭКРАН ВЫПАДЕНИЯ ДРОПА (CENTER RARITY TEXT)
   ======================================================== */
#center {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    min-height: 40px;
    text-align: center;
    font-size: 16px;
    margin: 8px 0;
    gap: 15px;
}

#center .rarity_text {
    margin: 0;
    flex: 1;
    max-width: 30%;
    transition: opacity 0.2s linear;
}

/* Градиентная стрелка в Крафтере/Декрафтере */
.gradient-text {
    background: -webkit-linear-gradient(
        0deg, 
        var(--gradient-start) 0%,
        var(--gradient-start) 40%, 
        var(--gradient-end) 60%,
        var(--gradient-end) 100%
    );
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 30px;
    font-weight: bold;
    -webkit-text-stroke: 1px #000000;
}

/* ========================================================
   3. КРАФТЕР И ДЕКРАФТЕР (CRAFTER & DECRAFTER)
   ======================================================== */
#craftScreen, #decraftScreen {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

#craftContainer, #decraftContainer {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    gap: 20px;
    margin-top: 10px;
}

#selectContainer, #selectContainer2 {
    position: relative;
    display: flex;
    flex-direction: column;
}

#craftBlock, #decraftBlock {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 280px;
    text-align: center;
}

#craftRarities, #decraftRarities {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    font-size: 16px;
    margin-bottom: 8px;
}

.craftButton, .decraftButton {
    border: 2px solid #000000;
    background-color: #ffffff;
    border-radius: 4px;
    padding: 8px;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.1s;
}

.craftButton:hover, .decraftButton:hover {
    background-color: #e0e0e0;
}

.craftButton:active, .decraftButton:active {
    transform: scale(0.98);
}

/* ========================================================
   4. ЭКРАНЫ И КОНТЕЙНЕРЫ (SCREENS LAYOUT)
   ======================================================== */
#statsScreen, #upgradesScreen, #prestigeScreen {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    height: 100%;
    text-align: center;
}

.statsScreens, .prestigeScreens {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin-top: 10px;
}

/* Таблицы статистики */
td {
    border: 1px solid #000000;
    padding: 6px 12px;
    text-align: center;
}

/* ========================================================
   5. ПОДВАЛ (FOOTER)
   ======================================================== */
#footerAutosaveText {
    background-color: #3b3b3b;
    color: #ffffff;
    text-align: center;
    padding: 4px 10px;
    font-size: 12px;
    bottom: 0;
    left: 0;
    position: fixed;
    border-top-right-radius: 6px;
    z-index: 90;
}

.hotkeys {
    text-align: center;
    bottom: 0;
    position: fixed;
    padding: 25px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 20px;
    width: 100%;
}

@keyframes scrollText {
    0% {
        transform: translateX(1000%)
    }
    100% {
        transform: translateX(-200%);
    }
}

/* ========================================================
   1. ВСПЛЫВАЮЩИЕ УВЕДОМЛЕНИЯ (NOTIFICATIONS)
   ======================================================== */
.custom-notification {
    position: fixed;
    top: 20px;
    right: -500px;
    color: #000000;
    padding: 10px 20px;
    border-radius: 5px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    z-index: 10000;
    transition: right 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    font-weight: bold;
}

/* ========================================================
   2. ТАБЛИЦА СТАТИСТИКИ И ЭКРАНЫ
   ======================================================== */
#raritiesStatsScreen {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-height: 70vh;
    overflow-y: auto;
}

#raritiesTable {
    position: relative;
    table-layout: fixed;
    width: 80%;
    text-align: center;
    border-collapse: separate; /* Обязательно для правильной работы sticky */
    border-spacing: 0;
}

#raritiesTable thead th {
    width: 80%;
    position: sticky;
    top: 0;
    z-index: 9999; /* Чтобы шапка всегда перекрывала пролетающий под ней текст */
    background-color: rgb(139, 139, 139);
    padding: 10px 10px;
    border-bottom: 2px solid #000;
}

tbody::before {
    content: '';
    display: block;
    height: 20px; /* Высота пустого пространства сверху */
}

#gameStatsScreen, 
#aboutStatsScreen, 
#prestigeScreen {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* ========================================================
   3. ВЫПАДАЮЩИЕ СПИСКИ КРАФТА (CRAFT DROPDOWNS)
   ======================================================== */
#selectContainer, 
#selectContainer2 {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#toggleButton, 
#toggleButton2 {
    width: 200px;
}

.expandable-list {
    position: absolute;
    top: 100%;
    left: 0;
    width: 200px;
    max-height: 0;
    overflow-y: auto;
    transition: max-height 0.3s ease-in-out;
    display: flex;
    flex-direction: column;
    background-color: #ffffff;
    border-radius: 4px;
    z-index: 50;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.expandable-list.open {
    max-height: 250px;
    border: 1px solid #3b3b3b;
}

.optionList {
    width: 100%;
    min-height: 28px;
    border: none;
    border-bottom: 1px solid #ddd;
    background-color: #ffffff;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    box-sizing: border-box;
    transition: background-color 0.15s;
}

.optionList:hover {
    background-color: #f0f0f0;
}

/* ========================================================
   4. ПРЕСТИЖ: ШКАЛЫ И УЛУЧШЕНИЯ
   ======================================================== */
.prestige-class {
    border: 2px solid rgb(235, 182, 113) !important;
    color: #000000;
    background-color: #ffffff;
    transition: background-color 0.2s, box-shadow 0.2s;
}

.prestige-class:hover:not(:disabled) {
    background-color: rgb(247, 189, 113) !important;
    color: #000000;
}

.prestige-bar-base {
    position: relative;
    width: 240px;
    height: 22px;
    margin: 4px auto;
    border: 2px solid rgb(235, 182, 113) !important;
    background-color: #8a8888;
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.prestige-bar {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0%;
    background-color: rgb(207, 163, 106);
    transition: width 0.1s linear;
}

.prestigeSingleUpgrade:disabled {
    border-color: rgb(180, 100, 100) !important;
    background-color: #bebebe !important;
    color: #333333 !important;
    cursor: not-allowed;
}

.prestigeSingleUpgrade:not(.bought):disabled:hover {
    background-color: rgb(255, 104, 104) !important;
}

/* Синхронизировано с JS (bought) */
.prestigeSingleUpgrade.bought {
    background-color: rgb(247, 189, 113) !important;
    border-color: rgb(200, 140, 60) !important;
    cursor: default;
}

/* ========================================================
   5. СПИСКИ РЕДКОСТЕЙ В ИНВЕНТАРЕ
   ======================================================== */

.list-of-rarities {
    position: relative
}

.list-of-rarities, 
.raritiesList {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    height: 55vh;
    width: 100%;
    align-items: center;
}

/* ========================================================
   6. КНОПКА DISCORD
   ======================================================== */
#discordServer {
    margin: 20px auto;
    height: 46px;
    width: 250px;
    background-color: #b1b6eb;
    border: 2px solid #4752c2;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    font-weight: bold;
    color: #000000;
    transition: background-color 0.2s, color 0.2s;
}

#discordServer:hover {
    background-color: #5865F2;
    color: #ffffff;
}

#discordServer img {
    height: 26px;
    width: 26px;
    margin-right: 8px;
}

ut {
    font-weight: bold;
}

.floating-text {
    position: fixed;
    pointer-events: none;
    user-select: none;
    z-index: 999999;
    font-weight: bold;
    text-shadow: 0 0 4px rgba(0, 0, 0, 0.8);
    animation: floatUp 1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes floatUp {
    0% {
        opacity: 1;
        transform: translate(-50%, -50%);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, calc(-50% - 40px));
    }
}

.mobile-only-tab {
    display: none;
}

/* ==========================================
   АДАПТИВНОСТЬ ДЛЯ МОБИЛЬНЫХ УСТРОЙСТВ (<= 768px)
   ========================================== */

/* ========================================================
   АДАПТИВНОСТЬ ДЛЯ МОБИЛЬНЫХ УСТРОЙСТВ (<= 768px)
   ======================================================== */
@media (max-width: 768px) {
    span {
        --font-scale: 0.1;
    }

    /* 1. Показываем кнопку вкладки Rolls только на смартфонах */
    .mobile-only-tab {
        display: inline-block !important;
    }

    /* 2. Базовые контейнеры и сброс деления экрана пополам */
    body, #game, #center {
        width: 100%;
        box-sizing: border-box;
        flex-direction: column;
    }

    #game {
        align-items: stretch;
    }

    /* Убираем фиксированную минимальную высоту, вызывавшую пустоту */
    .half {
        width: 100% !important;
        float: none !important;
        min-height: auto !important;
        padding: 5px;
        margin-bottom: 12px;
    }

    /* 3. Таблицы и экраны редкостей */
    table, #raritiesScreen {
        width: 100% !important;
        font-size: 13px;
    }

    #raritiesScreen {
        height: auto;
        min-height: calc(100vh - 120px);
    }

    .rarityCount, .masteryRarityCount {
        width: 100%;
        max-width: 280px;
        font-size: 12px;
        padding: 4px 6px;
    }

    /* 4. Кнопки действий и навигации */
    .whiteButton, .settingButton {
        padding: 8px 12px;
        font-size: 14px;
    }

    #buttons, #statsButtons, #upgradesButtons, #prestigeButtons {
        gap: 4px;
        margin: 4px 0;
    }

    /* 5. Кнопки бросков (Roll Buttons) и кулдауны */
    #rollScreen {
        gap: 8px;
    }

    #rollButton, #rollButton2, #rollButton3 {
        width: 100%;
        max-width: 280px;
        height: 90px;
        padding: 8px;
        font-size: 16px;
    }

    #rollCooldown, #rollCooldown2, #rollCooldown3 {
        width: 120px;
        height: 14px;
        margin: 6px auto;
    }

    #cdText, #cdText2, #cdText3 {
        font-size: 12px;
    }

    #rollsCount, #rollsCount2, #rollsCount3 {
        font-size: 14px;
    }

    /* 6. Сетка карточек улучшений (в 2 колонки на телефоне) */
    .upgradesGrid {
        grid-template-columns: repeat(2, 1fr);
        max-width: 100%;
        gap: 6px;
        margin: 6px auto;
    }

    .prestigeGrid {
        grid-template-columns: repeat(2, 1fr);
        max-width: 100%;
    }

    .buyableUpgrade, .masteryBuyableUpgrade, .settingButton, .loadfile {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        margin: 2px 0;
        font-size: 10px;
        min-height: 90px;
        box-sizing: border-box;
    }

    .settingsRow {
        flex-direction: column;
        align-items: center;
        width: 100%;
        gap: 6px;
    }

    /* 7. Экраны и выпадающие списки Крафтера/Декрафтера */
    #craftScreen, #decraftScreen, #craftBlock, #decraftBlock {
        width: 100%;
        padding: 6px;
        box-sizing: border-box;
    }

    #craftContainer, #decraftContainer {
        flex-direction: column;
        align-items: center;
        width: 100%;
        gap: 12px;
    }

    #selectContainer, #selectContainer2 {
        width: 100%;
        max-width: 280px;
    }

    #toggleButton, #toggleButton2 {
        width: 100%;
        padding: 8px;
    }

    .expandable-list {
        width: 100%;
        max-height: 0;
        z-index: 100;
        box-sizing: border-box;
    }

    .expandable-list.open {
        max-height: 200px;
    }

    .optionList {
        width: 100%;
        box-sizing: border-box;
    }

    .craftButton, .decraftButton {
        width: 100%;
        margin: 4px 0;
        padding: 8px;
        font-size: 14px;
    }

    /* 8. Полосы престижа и текст уведомлений по центру */
    .prestige-bar-base {
        width: 100%;
        max-width: 280px;
    }

    .prestige-bar {
        height: 100%;
    }

    #center {
        min-height: 30px;
        font-size: 12px;
        gap: 6px;
    }

    #center .rarity_text {
        max-width: 90%;
    }

    /* 9. Бегущая строка и подвал */
    .marquee-container {
        font-size: 12px;
        height: 20px;
    }

    footer {
        font-size: 11px;
        padding: 6px 0;
    }
}