/* KidChess - Шахматы для детей */

:root {
    /* Цветовые темы фона */
    --theme-green: #4a7c59;
    --theme-blue: #4a6c8c;
    --theme-red: #7c4a5a;

    /* Активная тема (меняется через JS) */
    --bg-color: var(--theme-green);

    /* Цвета доски - кремово-коричневая */
    --board-light: #f0d9b5;
    --board-dark: #b58863;

    /* Подсветка */
    --highlight-selected: rgba(255, 255, 0, 0.5);
    --highlight-move: rgba(0, 0, 0, 0.15);
    --highlight-correct: rgba(0, 255, 0, 0.4);
    --highlight-wrong: rgba(255, 0, 0, 0.4);
    --highlight-hint: rgba(255, 200, 0, 0.6);

    /* UI элементы */
    --btn-bg: rgba(255, 255, 255, 0.9);
    --text-primary: rgba(255, 255, 255, 0.95);
    --text-secondary: rgba(255, 255, 255, 0.6);

    /* Размеры - будет пересчитан в JS */
    --cell-size: 50px;
}

/* ========== SCREEN MANAGEMENT ========== */
.screen {
    display: none;
    width: 100%;
    height: 100%;
    flex-direction: column;
}

.screen.active {
    display: flex;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    user-select: none;
}

html, body {
    height: 100%;
    height: 100dvh; /* Dynamic viewport height - accounts for browser chrome */
    overflow: hidden;
}

body {
    background: var(--bg-color);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.5s ease;
}

/* Тема зеленая */
body.theme-green { --bg-color: #4a7c59; }
/* Тема синяя */
body.theme-blue { --bg-color: #4a6c8c; }
/* Тема красная/бордовая */
body.theme-red { --bg-color: #7c4a5a; }
/* Тема детская (розовая) */
body.theme-kids { --bg-color: #c06090; }

/* ========== APP LAYOUT ========== */
#app {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    height: 100dvh; /* Use dynamic viewport height */
    height: calc(var(--tg-viewport-height, 100dvh)); /* Telegram viewport height if available */
    width: 100%;
    max-width: 500px;
    padding: clamp(8px, 2vh, 20px); /* Responsive padding */
    padding-top: max(clamp(8px, 2vh, 20px), env(safe-area-inset-top, 0px));
    padding-bottom: max(clamp(8px, 2vh, 20px), env(safe-area-inset-bottom, 0px));
}

/* ========== PACK SELECTION SCREEN ========== */
#pack-select-screen {
    justify-content: flex-start;
    align-items: center;
    /* padding-top: 40px; */
}

.pack-header {
    text-align: center;
    margin-bottom: clamp(12px, 3vh, 30px);
    position: relative;
}

/* Theme toggle button - visible only in dark mode */
.theme-toggle {
    display: none;
    position: absolute;
    top: 16px;
    right: -50px;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background: transparent;
    font-size: 20px;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
}

.theme-toggle:hover {
    background: rgba(255, 255, 255, 0.15);
}

.theme-toggle:active {
    transform: scale(0.95);
}

/* Show toggle only in dark mode (system) */
@media (prefers-color-scheme: dark) {
    .theme-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

.pack-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    /* margin-bottom: 8px; */
}

.pack-logo-icon {
    font-size: clamp(32px, 6vh, 48px);
    font-weight: 900;
    filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.3));
    color: var(--text-primary);
}

.pack-logo-text {
    font-size: clamp(24px, 5vh, 36px);
    font-weight: 600;
    color: var(--text-primary);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.pack-subtitle {
    font-size: clamp(14px, 2.5vh, 18px);
    color: var(--text-secondary);
    margin-top: 4px;
}

#pack-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(8px, 2vh, 16px);
    padding: 0 clamp(8px, 2vw, 16px);
    width: 100%;
    max-width: 400px;
    flex: 1;
    overflow-y: auto;
    align-content: start;
}

.pack-card {
    background: rgba(255, 255, 255, 0.95);
    border-radius: clamp(10px, 2vh, 16px);
    padding: clamp(12px, 2vh, 20px) clamp(10px, 2vw, 16px);
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    position: relative;
    overflow: hidden;
}

.pack-card:active {
    transform: scale(0.97);
}

.pack-card:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

.pack-card-emoji {
    font-size: clamp(28px, 5vh, 40px);
    margin-bottom: clamp(4px, 1vh, 8px);
    display: block;
}

.pack-card-name {
    font-size: clamp(13px, 2vh, 16px);
    font-weight: 600;
    color: #333;
    margin-bottom: 4px;
}

.pack-card-count {
    font-size: clamp(10px, 1.5vh, 12px);
    color: #666;
}

.pack-card-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 4px;
    background: var(--theme-green);
    border-radius: 0 4px 0 0;
    transition: width 0.3s ease;
}

.pack-card.full-width {
    grid-column: span 2;
}

/* Disabled pack cards (premium/locked) - CLICKABLE for fake door */
.pack-card.disabled {
    opacity: 0.7;
    cursor: pointer;
    filter: grayscale(15%);
    position: relative;
}

.pack-card.disabled:active {
    transform: scale(0.98);
}

.pack-card.disabled::after {
    content: '🔒';
    position: absolute;
    top: 8px;
    right: 8px;
    font-size: 16px;
    opacity: 0.9;
}

.pack-footer {
    margin-top: auto;
    padding: clamp(10px, 2vh, 20px);
    padding-bottom: clamp(30px, 5vh, 50px); /* Extra space for skin indicator */
    text-align: center;
    flex-shrink: 0;
    position: relative;
}

.pack-footer p {
    font-size: 14px;
    color: var(--text-secondary);
}

.telegram-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    padding: 10px 20px;
    background: rgba(255, 255, 255, 0.15);
    color: var(--text-primary);
    text-decoration: none;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 500;
    transition: background 0.2s, transform 0.2s;
}

.telegram-link:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: scale(1.02);
}

.telegram-link:active {
    transform: scale(0.98);
}

/* Скрыть ссылку на TG внутри Telegram */
body.telegram-app .telegram-link {
    display: none;
}

/* ========== GAME SCREEN ========== */
#game-screen {
    justify-content: space-between;
    align-items: center;
    position: relative;
}

/* ========== HEADER ========== */
#header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    position: relative;
    margin-bottom: clamp(8px, 2vh, 20px);
    flex-shrink: 0;
}

#back-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#back-btn svg {
    width: 24px;
    height: 24px;
    fill: var(--text-primary);
}

#menu-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
    display: grid;
    grid-template-columns: repeat(3, 6px);
    grid-template-rows: repeat(3, 6px);
    gap: 4px;
}

#menu-btn .dot {
    width: 6px;
    height: 6px;
    background: var(--text-primary);
    border-radius: 50%;
}

#level-info {
    text-align: center;
}

#level-top {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-size: 12px;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 1px;
}

#level-number {
    font-weight: 500;
}

#progress {
    opacity: 0.7;
}

#puzzle-title {
    font-size: clamp(18px, 3vh, 24px);
    font-weight: 600;
    color: var(--text-primary);
    margin-top: 2px;
}

/* ========== BOARD CONTAINER ========== */
#board-container {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
}

/* ========== CHESS BOARD ========== */
#board {
    display: grid;
    border-radius: 4px;
    overflow: hidden;
    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.3),
        0 5px 15px rgba(0, 0, 0, 0.2);
    position: relative;
}

/* Координаты доски */
.coord {
    position: absolute;
    font-size: 10px;
    font-weight: 600;
    pointer-events: none;
    opacity: 0.7;
}

.coord-file {
    bottom: 2px;
    right: 3px;
}

.coord-rank {
    top: 2px;
    left: 3px;
}

.cell.light .coord { color: var(--board-dark); }
.cell.dark .coord { color: var(--board-light); }

/* Клетка доски */
.cell {
    width: var(--cell-size);
    height: var(--cell-size);
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    cursor: pointer;
    transition: background-color 0.15s ease;
    overflow: hidden;
}

.cell.light {
    background-color: var(--board-light);
}

.cell.dark {
    background-color: var(--board-dark);
}

/* Подсветка выбранной клетки */
.cell.selected {
    background-color: var(--highlight-selected) !important;
}

/* Подсветка последнего хода */
.cell.last-move {
    position: relative;
}

.cell.last-move::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 0, 0.3);
    pointer-events: none;
}

/* Индикатор возможного хода - точка */
.cell .move-hint {
    position: absolute;
    width: 30%;
    height: 30%;
    border-radius: 50%;
    background-color: var(--highlight-move);
    pointer-events: none;
}

/* Индикатор взятия - кольцо */
.cell .capture-hint {
    position: absolute;
    width: 85%;
    height: 85%;
    border-radius: 50%;
    border: 5px solid var(--highlight-move);
    pointer-events: none;
}

/* Правильный ход */
.cell.correct {
    animation: correctFlash 0.5s ease;
}

@keyframes correctFlash {
    0%, 100% { background-color: inherit; }
    50% { background-color: var(--highlight-correct); }
}

/* Неправильный ход */
.cell.wrong {
    animation: wrongShake 0.4s ease;
}

@keyframes wrongShake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-5px); background-color: var(--highlight-wrong); }
    40%, 80% { transform: translateX(5px); background-color: var(--highlight-wrong); }
}

/* Подсветка подсказки */
.cell.hint-highlight {
    position: relative;
}

.cell.hint-highlight::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--highlight-hint);
    animation: hintPulse 1s ease-in-out;
    pointer-events: none;
}

@keyframes hintPulse {
    0%, 100% { opacity: 0; }
    50% { opacity: 1; }
}

/* ========== CHESS PIECES ========== */
.piece {
    width: 85%;
    height: 85%;
    pointer-events: none;
    filter: drop-shadow(2px 4px 3px rgba(0, 0, 0, 0.4));
    transition: transform 0.15s ease;
    display: flex;
    justify-content: center;
    align-items: center;
}

.piece svg {
    width: 100%;
    height: 100%;
}

/* Фрукты/овощи для пешек противника в Kids Mode */
.fruit-piece {
    font-size: calc(var(--cell-size) * 0.7);
    filter: drop-shadow(2px 3px 2px rgba(0, 0, 0, 0.3));
    animation: fruitBounce 2s ease-in-out infinite;
}

@keyframes fruitBounce {
    0%, 100% { transform: scale(1) rotate(-3deg); }
    50% { transform: scale(1.05) rotate(3deg); }
}

.cell:active .piece {
    transform: scale(1.1);
}

/* Анимация хода фигуры */
.piece.moving {
    position: absolute;
    z-index: 100;
    transition: left 0.25s ease, top 0.25s ease;
}

/* Анимация взятия */
@keyframes pieceCapture {
    0% { transform: scale(1); opacity: 1; }
    100% { transform: scale(0); opacity: 0; }
}

.piece.captured {
    animation: pieceCapture 0.25s ease forwards;
}

/* Анимация победного удара по королю */
@keyframes checkmate-hit {
    0% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }
    30% {
        transform: scale(1.3) rotate(-10deg);
    }
    60% {
        transform: scale(0.8) rotate(15deg) translateY(-20px);
        opacity: 0.8;
    }
    100% {
        transform: scale(0) rotate(45deg) translateY(100px);
        opacity: 0;
    }
}

.piece.checkmate-king {
    animation: checkmate-hit 0.8s ease-out forwards;
    z-index: 50;
}

/* Анимация атакующей фигуры */
@keyframes attacker-strike {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

.piece.attacker {
    animation: attacker-strike 0.4s ease;
    z-index: 100;
}

/* Вспышка победы */
@keyframes victory-flash {
    0% { background: transparent; }
    50% { background: rgba(255, 215, 0, 0.5); }
    100% { background: transparent; }
}

.cell.victory-flash {
    animation: victory-flash 0.6s ease;
}

/* ========== CONTROLS ========== */
#controls {
    display: flex;
    gap: clamp(16px, 3vw, 24px);
    margin-top: clamp(12px, 2vh, 30px);
    flex-shrink: 0;
}

.control-btn {
    width: clamp(44px, 8vh, 56px);
    height: clamp(44px, 8vh, 56px);
    border: none;
    border-radius: 50%;
    background: var(--btn-bg);
    color: #333;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    transition: all 0.15s ease;
}

.control-btn:active {
    transform: scale(0.95);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.control-btn svg {
    width: 28px;
    height: 28px;
}

.control-btn .btn-emoji {
    font-size: 24px;
    line-height: 1;
}

/* Кнопка подсказки */
#hint-btn svg {
    stroke: #333;
    fill: none;
    stroke-width: 2;
}

/* Кнопка отмены */
#undo-btn svg {
    fill: #333;
}

/* Skip и Report кнопки */
#skip-btn svg,
#report-btn svg {
    fill: #333;
}

/* ========== HINT BLOCK (under board) ========== */
#hint-block {
    display: flex;
    align-items: center;
    gap: clamp(8px, 1.5vw, 12px);
    background: rgba(255, 255, 255, 0.95);
    border-radius: clamp(12px, 2vh, 16px);
    padding: clamp(8px, 1.5vh, 12px) clamp(12px, 2vw, 16px);
    margin-top: clamp(8px, 1.5vh, 16px);
    width: 100%;
    max-width: 400px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    flex-shrink: 0;
}

#hint-block:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

#hint-block:active {
    transform: scale(0.98);
}

#hint-block.expanded {
    background: rgba(255, 255, 255, 1);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.hint-avatar {
    font-size: clamp(24px, 4vh, 32px);
    line-height: 1;
    flex-shrink: 0;
}

#hint-text {
    font-size: clamp(12px, 2vh, 14px);
    color: #333;
    line-height: 1.4;
    margin: 0;
    flex: 1;
}

#hint-block.collapsed #hint-text {
    color: #666;
    font-style: italic;
}

/* ========== SPEECH BUBBLE HINTS (Kids Mode) ========== */
#hint-block.speech-mode {
    position: absolute;
    bottom: 100px;
    left: 20px;
    background: transparent;
    box-shadow: none;
    padding: 0;
    gap: 0;
    align-items: flex-end;
    justify-content: flex-start;
    width: auto;
    max-width: none;
    margin: 0;
    animation: floatDrift 3s ease-in-out infinite;
}

#hint-block.speech-mode .hint-avatar {
    font-size: 24px;
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #FF9966, #FF5E62);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 0;
    margin-bottom: 6px;
    align-self: flex-end;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

#hint-block.speech-mode #hint-text {
    position: relative;
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: flex-start;
    background: rgba(255, 255, 255, 0.85);
    padding: 10px 16px 0;
    border-radius: 18px;
    /* border-bottom-left-radius: 4px; */
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    margin-left: 16px;
    animation: speechBubbleIn 0.4s ease-out;
}

/* Хвостик бабла — простой треугольник */
#hint-block.speech-mode #hint-text::before {
    content: '';
    position: absolute;
    left: -9px;
    bottom: 17px;
    width: 0;
    height: 0;
    border-top: 9px solid transparent;
    border-bottom: 9px solid transparent;
    border-right: 9px solid rgba(255, 255, 255, 0.85);
}

.hint-symbol {
    font-family: 'Noto Sans Symbols 2', sans-serif;
    font-size: 42px;
    font-weight: 400;
    color: #333;
    line-height: 1;
}

/* Символ фигуры */
.hint-symbol.piece {
    font-size: 42px;
    filter: none;
}

/* Стрелки — легче */
.hint-symbol.direction {
    /* font-weight: 300; */
    font-size: 32px;
    line-height: 27px;
    color: #555;
}

/* Крестик */
.hint-symbol.action {
    color: #333;
}

@keyframes speechBubbleIn {
    0% {
        opacity: 0;
        transform: translateX(-20px) scale(0.8);
    }
    60% {
        transform: translateX(4px) scale(1.02);
    }
    100% {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

@keyframes floatDrift {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-6px);
    }
}

/* ========== WIN MODE (Kids Victory) ========== */
#hint-block.win-mode {
    position: absolute;
    bottom: 100px;
    left: 20px;
    background: transparent;
    box-shadow: none;
    padding: 0;
    margin: 0;
    width: auto;
    max-width: none;
    justify-content: flex-start;
    overflow: visible;
    animation: winPulse 0.6s ease-out, floatDrift 3s ease-in-out infinite 0.6s;
}

#hint-block.win-mode #hint-text {
    display: flex;
    gap: 8px;
    background: rgba(255, 255, 255, 0.85);
    padding: 12px 20px 0;
    border-radius: 14px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12);
}

.win-emoji {
    font-size: 44px;
    animation: winBounce 0.5s ease-out backwards;
}

.win-emoji:nth-child(1) { animation-delay: 0s; }
.win-emoji:nth-child(2) { animation-delay: 0.1s; }
.win-emoji:nth-child(3) { animation-delay: 0.2s; }

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

@keyframes winBounce {
    0% { transform: scale(0) rotate(-20deg); }
    60% { transform: scale(1.3) rotate(10deg); }
    100% { transform: scale(1) rotate(0); }
}

/* Confetti */
.confetti {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 2px;
    top: 50%;
    animation: confettiFall linear forwards;
    pointer-events: none;
}

@keyframes confettiFall {
    0% {
        transform: translateY(0) rotate(0deg) scale(1);
        opacity: 1;
    }
    100% {
        transform: translateY(-80px) rotate(720deg) scale(0);
        opacity: 0;
    }
}

/* ========== REPORT MODAL ========== */
.modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 1000;
    padding: 20px;
}

.modal.visible {
    opacity: 1;
    pointer-events: auto;
}

.modal-content {
    background: white;
    border-radius: 20px;
    padding: 24px;
    width: 100%;
    max-width: 340px;
    text-align: center;
}

.modal-icon {
    font-size: 48px;
    margin-bottom: 12px;
}

.modal-content h3 {
    font-size: 20px;
    color: #333;
    margin-bottom: 8px;
}

.modal-content p {
    font-size: 14px;
    color: #666;
    margin-bottom: 16px;
}

.modal-content textarea {
    width: 100%;
    height: 100px;
    border: 2px solid #e0e0e0;
    border-radius: 12px;
    padding: 12px;
    font-size: 14px;
    font-family: inherit;
    resize: none;
    margin-bottom: 16px;
}

.modal-content textarea:focus {
    outline: none;
    border-color: var(--theme-green);
}

.modal-buttons {
    display: flex;
    gap: 12px;
}

.btn-secondary,
.btn-primary {
    flex: 1;
    padding: 12px 20px;
    border: none;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-secondary {
    background: #e0e0e0;
    color: #666;
}

.btn-primary {
    background: var(--theme-green);
    color: white;
}

.btn-secondary:active,
.btn-primary:active {
    transform: scale(0.97);
}

/* ========== RESULT MODAL ========== */
.result-modal {
    padding: 32px 24px;
}

.result-icon {
    font-size: 64px;
    margin-bottom: 8px;
}

.result-modal h2 {
    font-size: 28px;
    color: #333;
    margin-bottom: 20px;
}

.result-stats {
    display: flex;
    justify-content: center;
    gap: 32px;
    margin-bottom: 24px;
}

.stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.stat-value {
    font-size: 32px;
    font-weight: 700;
    color: var(--bg-color);
}

.stat-label {
    font-size: 14px;
    color: #888;
    margin-top: 4px;
}

/* ========== PRO MODAL (Fake Door) ========== */
.pro-modal {
    padding: 28px 24px;
    max-width: 340px;
}

.pro-icon {
    font-size: 56px;
    margin-bottom: 8px;
}

.pro-modal h2 {
    font-size: 24px;
    color: #333;
    margin-bottom: 6px;
}

.pro-subtitle {
    font-size: 14px;
    color: #666;
    margin-bottom: 20px;
}

.pro-features {
    text-align: left;
    margin-bottom: 20px;
}

.pro-feature {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid #f0f0f0;
}

.pro-feature:last-child {
    border-bottom: none;
}

.pro-feature-icon {
    font-size: 20px;
    width: 28px;
    text-align: center;
}

.pro-feature-text {
    font-size: 14px;
    color: #444;
}

.pro-price {
    background: linear-gradient(135deg, #FFD93D, #FF6B6B);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 4px;
}

.pro-price-period {
    font-size: 13px;
    color: #888;
    margin-bottom: 20px;
}

.btn-pro {
    background: linear-gradient(135deg, #FFD93D, #FF6B6B);
    color: white;
    width: 100%;
    padding: 14px 24px;
    border: none;
    border-radius: 14px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(255, 107, 107, 0.3);
}

.btn-pro:active {
    transform: scale(0.98);
}

.pro-modal .btn-secondary {
    margin-top: 12px;
    background: transparent;
    color: #888;
    font-size: 13px;
    width: 100%;
}

.pro-coming-soon {
    display: none;
    text-align: center;
    padding: 20px 0;
}

.pro-coming-soon.visible {
    display: block;
}

.pro-coming-soon-icon {
    font-size: 48px;
    margin-bottom: 12px;
}

.pro-coming-soon h3 {
    font-size: 20px;
    color: #333;
    margin-bottom: 8px;
}

.pro-coming-soon p {
    font-size: 14px;
    color: #666;
    line-height: 1.5;
}

.pro-content {
    transition: opacity 0.2s ease;
}

.pro-content.hidden {
    display: none;
}

/* ========== STATUS MESSAGES ========== */
#status-message {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.85);
    color: white;
    padding: 20px 40px;
    border-radius: 16px;
    font-size: 24px;
    font-weight: 600;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 1000;
}

#status-message.visible {
    opacity: 1;
}

#status-message.success {
    background: rgba(76, 175, 80, 0.95);
}

#status-message.error {
    background: rgba(244, 67, 54, 0.95);
}

/* ========== MENU OVERLAY ========== */
#menu-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 1000;
}

#menu-overlay.visible {
    opacity: 1;
    pointer-events: auto;
}

.menu-item {
    background: white;
    color: #333;
    border: none;
    padding: 14px 24px;
    border-radius: 14px;
    font-size: 17px;
    font-weight: 500;
    cursor: pointer;
    transition: transform 0.15s ease;
    min-width: 220px;
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
}

.menu-item:active {
    transform: scale(0.98);
}

.menu-icon {
    font-size: 20px;
    width: 28px;
    text-align: center;
}

#close-menu {
    position: absolute;
    top: 40px;
    right: 40px;
    background: none;
    border: none;
    color: white;
    font-size: 32px;
    cursor: pointer;
    padding: 10px;
}

/* ========== RESPONSIVE ========== */

/* Small screens (iPhone SE, older iPhones) */
@media (max-height: 600px) {
    .pack-header {
        margin-bottom: 8px;
    }

    .pack-logo {
        gap: 8px;
    }

    #header {
        margin-bottom: 6px;
    }

    #level-top {
        font-size: 10px;
    }

    #controls {
        margin-top: 8px;
    }
}

/* Very small width */
@media (max-width: 350px) {
    #puzzle-title {
        font-size: 16px;
    }

    .control-btn svg {
        width: 20px;
        height: 20px;
    }
}

@media (max-width: 400px) {
    .control-btn svg {
        width: 24px;
        height: 24px;
    }
}

@media (min-width: 700px) {
    #puzzle-title {
        font-size: 28px;
    }
}

/* Для iPhone с notch - use safe area insets */
@supports (padding: max(0px)) {
    #app {
        padding-top: max(clamp(8px, 2vh, 20px), env(safe-area-inset-top));
        padding-bottom: max(clamp(8px, 2vh, 20px), env(safe-area-inset-bottom));
    }
}

/* ========== PIXEL SKIN (Minecraft-style "Bad Mode") ========== */

/* Background: sky on top, grass on bottom */
body.skin-pixel {
    background: linear-gradient(to bottom,
        #7BA4FF 0%,
        #7BA4FF 45%,
        #5D8C3E 45%,
        #5D8C3E 100%) !important;
    position: relative;
    overflow: hidden;
}

/* Minecraft clouds - pack select screen */
body.skin-pixel #pack-select-screen::before {
    content: '';
    position: fixed;
    top: calc(5vh + 40px);
    left: 8%;
    width: 10px;
    height: 10px;
    background: rgba(255, 255, 255, 0.95);
    box-shadow:
        /* Cloud 1 - fluffy irregular shape */
        10px 0 0 rgba(255, 255, 255, 0.95),
        20px 0 0 rgba(255, 255, 255, 0.95),
        30px 0 0 rgba(255, 255, 255, 0.95),
        40px 0 0 rgba(255, 255, 255, 0.95),
        50px 0 0 rgba(255, 255, 255, 0.95),
        -10px 10px 0 rgba(255, 255, 255, 0.95),
        0 10px 0 rgba(255, 255, 255, 0.95),
        10px 10px 0 rgba(255, 255, 255, 0.95),
        20px 10px 0 rgba(255, 255, 255, 0.95),
        30px 10px 0 rgba(255, 255, 255, 0.95),
        40px 10px 0 rgba(255, 255, 255, 0.95),
        50px 10px 0 rgba(255, 255, 255, 0.95),
        60px 10px 0 rgba(255, 255, 255, 0.95),
        -10px 20px 0 rgba(255, 255, 255, 0.92),
        0 20px 0 rgba(255, 255, 255, 0.92),
        10px 20px 0 rgba(255, 255, 255, 0.92),
        20px 20px 0 rgba(255, 255, 255, 0.92),
        30px 20px 0 rgba(255, 255, 255, 0.92),
        40px 20px 0 rgba(255, 255, 255, 0.92),
        50px 20px 0 rgba(255, 255, 255, 0.92),
        10px -10px 0 rgba(255, 255, 255, 0.93),
        20px -10px 0 rgba(255, 255, 255, 0.93),
        30px -10px 0 rgba(255, 255, 255, 0.93),
        /* Cloud 2 - bumpy top */
        calc(42vw) calc(8vh) rgba(255, 255, 255, 0.9),
        calc(42vw + 10px) calc(8vh) rgba(255, 255, 255, 0.9),
        calc(42vw + 20px) calc(8vh) rgba(255, 255, 255, 0.9),
        calc(42vw + 30px) calc(8vh) rgba(255, 255, 255, 0.9),
        calc(42vw - 10px) calc(8vh + 10px) rgba(255, 255, 255, 0.9),
        calc(42vw) calc(8vh + 10px) rgba(255, 255, 255, 0.9),
        calc(42vw + 10px) calc(8vh + 10px) rgba(255, 255, 255, 0.9),
        calc(42vw + 20px) calc(8vh + 10px) rgba(255, 255, 255, 0.9),
        calc(42vw + 30px) calc(8vh + 10px) rgba(255, 255, 255, 0.9),
        calc(42vw + 40px) calc(8vh + 10px) rgba(255, 255, 255, 0.9),
        calc(42vw) calc(8vh + 20px) rgba(255, 255, 255, 0.88),
        calc(42vw + 10px) calc(8vh + 20px) rgba(255, 255, 255, 0.88),
        calc(42vw + 20px) calc(8vh + 20px) rgba(255, 255, 255, 0.88),
        calc(42vw + 30px) calc(8vh + 20px) rgba(255, 255, 255, 0.88),
        calc(42vw + 10px) calc(8vh - 10px) rgba(255, 255, 255, 0.88),
        calc(42vw + 20px) calc(8vh - 10px) rgba(255, 255, 255, 0.88),
        /* Cloud 3 - small fluffy */
        calc(72vw) calc(12vh) rgba(255, 255, 255, 0.85),
        calc(72vw + 10px) calc(12vh) rgba(255, 255, 255, 0.85),
        calc(72vw + 20px) calc(12vh) rgba(255, 255, 255, 0.85),
        calc(72vw - 10px) calc(12vh + 10px) rgba(255, 255, 255, 0.85),
        calc(72vw) calc(12vh + 10px) rgba(255, 255, 255, 0.85),
        calc(72vw + 10px) calc(12vh + 10px) rgba(255, 255, 255, 0.85),
        calc(72vw + 20px) calc(12vh + 10px) rgba(255, 255, 255, 0.85),
        calc(72vw + 30px) calc(12vh + 10px) rgba(255, 255, 255, 0.85),
        calc(72vw) calc(12vh + 20px) rgba(255, 255, 255, 0.82),
        calc(72vw + 10px) calc(12vh + 20px) rgba(255, 255, 255, 0.82),
        calc(72vw + 20px) calc(12vh + 20px) rgba(255, 255, 255, 0.82),
        calc(72vw + 10px) calc(12vh - 10px) rgba(255, 255, 255, 0.83),
        /* Cloud 4 - tiny puff */
        calc(88vw) calc(6vh) rgba(255, 255, 255, 0.8),
        calc(88vw + 10px) calc(6vh) rgba(255, 255, 255, 0.8),
        calc(88vw) calc(6vh + 10px) rgba(255, 255, 255, 0.8),
        calc(88vw + 10px) calc(6vh + 10px) rgba(255, 255, 255, 0.8),
        calc(88vw + 20px) calc(6vh + 10px) rgba(255, 255, 255, 0.8);
    pointer-events: none;
    z-index: 0;
    animation: mc-clouds 80s linear infinite;
}

@keyframes mc-clouds {
    0% { transform: translateX(0); }
    100% { transform: translateX(-120px); }
}

/* Minecraft trees - pack select screen (bigger, raised up ~15vh) */
body.skin-pixel #pack-select-screen::after {
    content: '';
    position: fixed;
    bottom: calc(15vh + 10px);
    left: 3%;
    width: 12px;
    height: 12px;
    background: #5D4037;
    box-shadow:
        /* Tree 1 - left, tall */
        0 -12px 0 #5D4037,
        0 -24px 0 #5D4037,
        0 -36px 0 #5D4037,
        -24px -48px 0 #2E7D32,
        -12px -48px 0 #2E7D32,
        0 -48px 0 #2E7D32,
        12px -48px 0 #2E7D32,
        24px -48px 0 #2E7D32,
        -24px -60px 0 #43A047,
        -12px -60px 0 #43A047,
        0 -60px 0 #43A047,
        12px -60px 0 #43A047,
        24px -60px 0 #43A047,
        -12px -72px 0 #4CAF50,
        0 -72px 0 #4CAF50,
        12px -72px 0 #4CAF50,
        0 -84px 0 #66BB6A,
        /* Tree 2 - left-center, short, slightly lower */
        calc(18vw) calc(5vh) #4A3728,
        calc(18vw) calc(5vh - 12px) #4A3728,
        calc(18vw) calc(5vh - 24px) #4A3728,
        calc(18vw - 12px) calc(5vh - 36px) #3B7D2A,
        calc(18vw) calc(5vh - 36px) #3B7D2A,
        calc(18vw + 12px) calc(5vh - 36px) #3B7D2A,
        calc(18vw - 12px) calc(5vh - 48px) #4CAF50,
        calc(18vw) calc(5vh - 48px) #4CAF50,
        calc(18vw + 12px) calc(5vh - 48px) #4CAF50,
        calc(18vw) calc(5vh - 60px) #5DC55D,
        /* Tree 3 - center-right, medium */
        calc(72vw) calc(3vh) #5D4037,
        calc(72vw) calc(3vh - 12px) #5D4037,
        calc(72vw) calc(3vh - 24px) #5D4037,
        calc(72vw - 24px) calc(3vh - 36px) #2E7D32,
        calc(72vw - 12px) calc(3vh - 36px) #2E7D32,
        calc(72vw) calc(3vh - 36px) #2E7D32,
        calc(72vw + 12px) calc(3vh - 36px) #2E7D32,
        calc(72vw + 24px) calc(3vh - 36px) #2E7D32,
        calc(72vw - 12px) calc(3vh - 48px) #43A047,
        calc(72vw) calc(3vh - 48px) #43A047,
        calc(72vw + 12px) calc(3vh - 48px) #43A047,
        calc(72vw) calc(3vh - 60px) #66BB6A,
        /* Tree 4 - right edge, tall, slightly higher */
        calc(90vw) calc(-2vh) #4A3728,
        calc(90vw) calc(-2vh - 12px) #4A3728,
        calc(90vw) calc(-2vh - 24px) #4A3728,
        calc(90vw) calc(-2vh - 36px) #4A3728,
        calc(90vw - 24px) calc(-2vh - 48px) #2E7D32,
        calc(90vw - 12px) calc(-2vh - 48px) #2E7D32,
        calc(90vw) calc(-2vh - 48px) #2E7D32,
        calc(90vw + 12px) calc(-2vh - 48px) #2E7D32,
        calc(90vw + 24px) calc(-2vh - 48px) #2E7D32,
        calc(90vw - 24px) calc(-2vh - 60px) #43A047,
        calc(90vw - 12px) calc(-2vh - 60px) #43A047,
        calc(90vw) calc(-2vh - 60px) #43A047,
        calc(90vw + 12px) calc(-2vh - 60px) #43A047,
        calc(90vw + 24px) calc(-2vh - 60px) #43A047,
        calc(90vw - 12px) calc(-2vh - 72px) #4CAF50,
        calc(90vw) calc(-2vh - 72px) #4CAF50,
        calc(90vw + 12px) calc(-2vh - 72px) #4CAF50,
        calc(90vw) calc(-2vh - 84px) #66BB6A;
    pointer-events: none;
    z-index: 0;
}

/* Minecraft clouds - game screen (lowered ~15vh, detailed) */
body.skin-pixel #game-screen::before {
    content: '';
    position: fixed;
    top: calc(8vh + 30px);
    left: 3%;
    width: 10px;
    height: 10px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow:
        /* Cloud 1 - fluffy left */
        10px 0 0 rgba(255, 255, 255, 0.92),
        20px 0 0 rgba(255, 255, 255, 0.92),
        30px 0 0 rgba(255, 255, 255, 0.92),
        -10px 10px 0 rgba(255, 255, 255, 0.92),
        0 10px 0 rgba(255, 255, 255, 0.92),
        10px 10px 0 rgba(255, 255, 255, 0.92),
        20px 10px 0 rgba(255, 255, 255, 0.92),
        30px 10px 0 rgba(255, 255, 255, 0.92),
        40px 10px 0 rgba(255, 255, 255, 0.92),
        0 20px 0 rgba(255, 255, 255, 0.9),
        10px 20px 0 rgba(255, 255, 255, 0.9),
        20px 20px 0 rgba(255, 255, 255, 0.9),
        30px 20px 0 rgba(255, 255, 255, 0.9),
        10px -10px 0 rgba(255, 255, 255, 0.9),
        20px -10px 0 rgba(255, 255, 255, 0.9),
        /* Cloud 2 - right side bumpy */
        calc(78vw) calc(5vh) rgba(255, 255, 255, 0.88),
        calc(78vw + 10px) calc(5vh) rgba(255, 255, 255, 0.88),
        calc(78vw + 20px) calc(5vh) rgba(255, 255, 255, 0.88),
        calc(78vw + 30px) calc(5vh) rgba(255, 255, 255, 0.88),
        calc(78vw - 10px) calc(5vh + 10px) rgba(255, 255, 255, 0.88),
        calc(78vw) calc(5vh + 10px) rgba(255, 255, 255, 0.88),
        calc(78vw + 10px) calc(5vh + 10px) rgba(255, 255, 255, 0.88),
        calc(78vw + 20px) calc(5vh + 10px) rgba(255, 255, 255, 0.88),
        calc(78vw + 30px) calc(5vh + 10px) rgba(255, 255, 255, 0.88),
        calc(78vw + 40px) calc(5vh + 10px) rgba(255, 255, 255, 0.88),
        calc(78vw) calc(5vh + 20px) rgba(255, 255, 255, 0.85),
        calc(78vw + 10px) calc(5vh + 20px) rgba(255, 255, 255, 0.85),
        calc(78vw + 20px) calc(5vh + 20px) rgba(255, 255, 255, 0.85),
        calc(78vw + 30px) calc(5vh + 20px) rgba(255, 255, 255, 0.85),
        calc(78vw + 10px) calc(5vh - 10px) rgba(255, 255, 255, 0.86),
        calc(78vw + 20px) calc(5vh - 10px) rgba(255, 255, 255, 0.86);
    pointer-events: none;
    z-index: 0;
    animation: mc-clouds-game 70s linear infinite;
}

@keyframes mc-clouds-game {
    0% { transform: translateX(0); }
    100% { transform: translateX(-80px); }
}

/* Minecraft trees - game screen (raised up ~15vh) */
body.skin-pixel #game-screen::after {
    content: '';
    position: fixed;
    bottom: calc(15vh + 5px);
    left: 2%;
    width: 10px;
    height: 10px;
    background: #5D4037;
    box-shadow:
        /* Tree 1 - far left */
        0 -10px 0 #5D4037,
        0 -20px 0 #5D4037,
        -20px -30px 0 #2E7D32,
        -10px -30px 0 #2E7D32,
        0 -30px 0 #2E7D32,
        10px -30px 0 #2E7D32,
        20px -30px 0 #2E7D32,
        -10px -40px 0 #43A047,
        0 -40px 0 #43A047,
        10px -40px 0 #43A047,
        0 -50px 0 #66BB6A,
        /* Tree 2 - right side, taller */
        calc(92vw) calc(3vh) #4A3728,
        calc(92vw) calc(3vh - 10px) #4A3728,
        calc(92vw) calc(3vh - 20px) #4A3728,
        calc(92vw) calc(3vh - 30px) #4A3728,
        calc(92vw - 20px) calc(3vh - 40px) #2E7D32,
        calc(92vw - 10px) calc(3vh - 40px) #2E7D32,
        calc(92vw) calc(3vh - 40px) #2E7D32,
        calc(92vw + 10px) calc(3vh - 40px) #2E7D32,
        calc(92vw + 20px) calc(3vh - 40px) #2E7D32,
        calc(92vw - 20px) calc(3vh - 50px) #43A047,
        calc(92vw - 10px) calc(3vh - 50px) #43A047,
        calc(92vw) calc(3vh - 50px) #43A047,
        calc(92vw + 10px) calc(3vh - 50px) #43A047,
        calc(92vw + 20px) calc(3vh - 50px) #43A047,
        calc(92vw - 10px) calc(3vh - 60px) #4CAF50,
        calc(92vw) calc(3vh - 60px) #4CAF50,
        calc(92vw + 10px) calc(3vh - 60px) #4CAF50,
        calc(92vw) calc(3vh - 70px) #66BB6A,
        /* Tree 3 - center-left, small shrub */
        calc(15vw) calc(5vh) #5D4037,
        calc(15vw) calc(5vh - 10px) #5D4037,
        calc(15vw - 10px) calc(5vh - 20px) #3B7D2A,
        calc(15vw) calc(5vh - 20px) #3B7D2A,
        calc(15vw + 10px) calc(5vh - 20px) #3B7D2A,
        calc(15vw) calc(5vh - 30px) #4CAF50;
    pointer-events: none;
    z-index: 0;
}

body.skin-pixel #app {
    background: transparent;
    position: relative;
    z-index: 1;
}

/* Minecraft-style 3D button mixin */
body.skin-pixel .pack-card,
body.skin-pixel .control-btn,
body.skin-pixel .menu-item,
body.skin-pixel #hint-block,
body.skin-pixel .modal-content,
body.skin-pixel .btn-primary,
body.skin-pixel .btn-secondary {
    background: #C6C6C6 !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow:
        inset -2px -4px 0 #555555,
        inset 2px 2px 0 #FFFFFF !important;
    color: #3F3F3F !important;
}

body.skin-pixel .pack-card:active,
body.skin-pixel .control-btn:active,
body.skin-pixel .menu-item:active,
body.skin-pixel .btn-primary:active,
body.skin-pixel .btn-secondary:active {
    box-shadow:
        inset 2px 4px 0 #555555,
        inset -2px -2px 0 #FFFFFF !important;
    transform: none !important;
}

/* Pack cards text */
body.skin-pixel .pack-card-name {
    color: #3F3F3F !important;
    font-family: monospace;
}

body.skin-pixel .pack-card-count {
    color: #555555 !important;
}

/* Board: wood + dirt */
body.skin-pixel #board {
    border-radius: 0 !important;
    box-shadow: none !important;
    border: 4px solid #373737;
    image-rendering: pixelated;
}

body.skin-pixel .cell {
    border-radius: 0 !important;
}

body.skin-pixel .cell.light {
    background-color: #BC9862; /* Wood planks */
}

body.skin-pixel .cell.dark {
    background-color: #8B5E3C; /* Dirt */
}

/* Pieces */
body.skin-pixel .piece {
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    filter: none !important;
}

body.skin-pixel .piece svg {
    image-rendering: pixelated;
}

/* Pixel sprite pieces - 600x200px sprite, 6 cols x 2 rows */
body.skin-pixel .piece-sprite {
    background-image: url('../assets/pieces-pixel.png');
    background-repeat: no-repeat;
    background-size: 600% 200%;
    width: 100% !important;
    height: 100% !important;
    transform: scale(1.05);
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

body.skin-pixel .piece-sprite svg {
    display: none;
}

/* Sprite layout: King(0), Queen(1), Bishop(2), Knight(3), Rook(4), Pawn(5)
   With bg-size 600%: position = col * 20% (since 100%/5 gaps = 20% per step) */
/* White pieces (top row) */
body.skin-pixel .piece-sprite.sprite-wk { background-position: 0% 0%; }
body.skin-pixel .piece-sprite.sprite-wq { background-position: 20% 0%; }
body.skin-pixel .piece-sprite.sprite-wb { background-position: 40% 0%; }
body.skin-pixel .piece-sprite.sprite-wn { background-position: 60% 0%; }
body.skin-pixel .piece-sprite.sprite-wr { background-position: 80% 0%; }
body.skin-pixel .piece-sprite.sprite-wp { background-position: 100% 10%; }

/* Black pieces (bottom row) */
body.skin-pixel .piece-sprite.sprite-bk { background-position: 0% 100%; }
body.skin-pixel .piece-sprite.sprite-bq { background-position: 20% 100%; }
body.skin-pixel .piece-sprite.sprite-bb { background-position: 40% 100%; }
body.skin-pixel .piece-sprite.sprite-bn { background-position: 60% 100%; }
body.skin-pixel .piece-sprite.sprite-br { background-position: 80% 100%; }
body.skin-pixel .piece-sprite.sprite-bp { background-position: 100% 110%; }

/* Minecraft pixel font */
body.skin-pixel {
    --mc-font: 'Press Start 2P', monospace;
}

/* Header text with shadow */
body.skin-pixel #puzzle-title {
    color: #FFFFFF !important;
    text-shadow: 2px 2px 0 #3F3F3F;
    font-family: var(--mc-font);
    font-size: clamp(12px, 2.5vh, 18px);
}

body.skin-pixel #level-number,
body.skin-pixel #progress {
    color: #FFFFFF !important;
    text-shadow: 1px 1px 0 #3F3F3F;
    font-family: var(--mc-font);
    font-size: 8px;
    letter-spacing: 0;
}

body.skin-pixel .pack-subtitle {
    color: #FFFFFF !important;
    text-shadow: 2px 2px 0 #3F3F3F;
    font-family: var(--mc-font);
    font-size: 10px;
}

/* Logo */
body.skin-pixel .pack-logo-icon {
    text-shadow: 3px 3px 0 #3F3F3F;
    color: #FFFFFF !important;
}

body.skin-pixel .pack-logo-text {
    font-family: var(--mc-font);
    letter-spacing: 0;
    text-shadow: 3px 3px 0 #3F3F3F;
    color: #FFFFFF !important;
    font-size: clamp(14px, 3vh, 20px);
}

/* Footer text */
body.skin-pixel .pack-footer p {
    color: #FFFFFF !important;
    text-shadow: 1px 1px 0 #3F3F3F;
}

/* Telegram link as MC button */
body.skin-pixel .telegram-link {
    background: #C6C6C6 !important;
    color: #3F3F3F !important;
    border-radius: 0 !important;
    box-shadow:
        inset -2px -4px 0 #555555,
        inset 2px 2px 0 #FFFFFF !important;
}

/* Back/Menu buttons */
body.skin-pixel #back-btn svg,
body.skin-pixel #menu-btn .dot {
    fill: #FFFFFF;
}

body.skin-pixel #menu-btn .dot {
    background: #FFFFFF;
}

/* Control buttons icons */
body.skin-pixel .control-btn svg {
    fill: #3F3F3F;
}

body.skin-pixel .control-btn .btn-emoji {
    filter: none;
}

/* Hint block */
body.skin-pixel #hint-text {
    color: #3F3F3F !important;
    font-family: monospace;
}

body.skin-pixel .hint-avatar {
    filter: none;
}

/* Modals */
body.skin-pixel .modal-content h2,
body.skin-pixel .modal-content h3 {
    color: #3F3F3F !important;
    font-family: monospace;
}

body.skin-pixel .modal-content p {
    color: #555555 !important;
}

/* Coordinates */
body.skin-pixel .coord {
    font-family: monospace;
    font-weight: bold;
}

/* Menu overlay */
body.skin-pixel #menu-overlay {
    background: rgba(0, 0, 0, 0.85);
}

body.skin-pixel #close-menu {
    color: #FFFFFF;
    text-shadow: 2px 2px 0 #3F3F3F;
}

/* Game screen in Minecraft mode - override theme background */
body.skin-pixel.theme-green,
body.skin-pixel.theme-blue,
body.skin-pixel.theme-red,
body.skin-pixel.theme-kids {
    background: linear-gradient(to bottom,
        #7BA4FF 0%,
        #7BA4FF 40%,
        #5D8C3E 40%,
        #5D8C3E 100%) !important;
}

/* Speech bubble hint in MC style */
body.skin-pixel #hint-block.speech-mode {
    background: transparent !important;
    box-shadow: none !important;
}

body.skin-pixel #hint-block.speech-mode #hint-text {
    background: #C6C6C6 !important;
    border-radius: 0 !important;
    box-shadow:
        inset -2px -4px 0 #555555,
        inset 2px 2px 0 #FFFFFF !important;
}

body.skin-pixel #hint-block.speech-mode #hint-text::before {
    border-right-color: #C6C6C6;
}

body.skin-pixel #hint-block.speech-mode .hint-avatar {
    background: #C6C6C6 !important;
    border-radius: 0 !important;
    box-shadow:
        inset -1px -2px 0 #555555,
        inset 1px 1px 0 #FFFFFF !important;
}

/* Win mode in MC style */
body.skin-pixel #hint-block.win-mode #hint-text {
    background: #C6C6C6 !important;
    border-radius: 0 !important;
    box-shadow:
        inset -2px -4px 0 #555555,
        inset 2px 2px 0 #FFFFFF !important;
}

/* Skin indicator (shows current skin) - clickable */
.skin-indicator {
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 12px;
}

.skin-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transition: all 0.2s;
    cursor: pointer;
}

.skin-dot:hover {
    background: rgba(255, 255, 255, 0.6);
    transform: scale(1.1);
}

.skin-dot.active {
    background: rgba(255, 255, 255, 0.95);
    transform: scale(1.2);
}

body.skin-pixel .skin-dot {
    border-radius: 0;
}

/* ========== DARK MODE (blue light filter) ========== */

/* Telegram dark mode */
html:has(body.telegram-dark):not(.light-override) {
    filter: sepia(20%) saturate(90%) brightness(85%);
}

/* Browser dark mode */
@media (prefers-color-scheme: dark) {
    html:not(.light-override) {
        filter: sepia(20%) saturate(90%) brightness(85%);
    }
}