/* Child-friendly theme for Slovko */

.child-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--touch-min);
    min-height: var(--touch-min);
    padding: var(--space-md) var(--space-xl);
    border-radius: var(--radius-lg);
    font-size: var(--font-lg);
    font-weight: 800;
    color: var(--color-text-white);
    background: var(--color-primary);
    /* 3-D press effect */
    box-shadow: 0 6px 0 #2563a8, 0 8px 16px rgba(0,0,0,0.18);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
    cursor: pointer;
    border: none;
    text-decoration: none;
    letter-spacing: 0.3px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
    transform: translateY(0);
}

.child-button:active {
    transform: translateY(4px);
    box-shadow: 0 2px 0 #2563a8, 0 2px 6px rgba(0,0,0,0.15);
}

.child-button--accent {
    background: var(--color-accent);
    box-shadow: 0 6px 0 #c0392b, 0 8px 16px rgba(0,0,0,0.18);
}
.child-button--accent:active {
    box-shadow: 0 2px 0 #c0392b, 0 2px 6px rgba(0,0,0,0.15);
}

.child-button--success {
    background: var(--color-success);
    box-shadow: 0 6px 0 #2e7d32, 0 8px 16px rgba(0,0,0,0.18);
}
.child-button--success:active {
    box-shadow: 0 2px 0 #2e7d32, 0 2px 6px rgba(0,0,0,0.15);
}

.child-button--large {
    min-height: 88px;
    font-size: var(--font-xl);
    padding: var(--space-lg) var(--space-xxl);
    border-radius: var(--radius-xl);
}

.child-button--round {
    width: 88px;
    height: 88px;
    border-radius: var(--radius-round);
    padding: 0;
}

.child-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Cards */
.card {
    background: #ffffff;
    border-radius: var(--radius-xl);
    padding: var(--space-lg);
    box-shadow: 0 4px 0 rgba(0,0,0,0.08), 0 6px 20px rgba(0,0,0,0.10);
    border-top: 4px solid var(--color-primary-light);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.card:active {
    transform: scale(0.97) translateY(2px);
    box-shadow: 0 2px 0 rgba(0,0,0,0.08), 0 2px 8px rgba(0,0,0,0.10);
}

.card--selected {
    outline: 4px solid var(--color-primary);
    outline-offset: 2px;
}

.card--correct {
    outline: 4px solid var(--color-success);
    outline-offset: 2px;
    background: var(--color-success-light);
}

.card--wrong {
    outline: 4px solid var(--color-error);
    outline-offset: 2px;
}

/* Letter display */
.letter-display {
    font-size: var(--font-display);
    font-weight: 900;
    background: linear-gradient(135deg, #4A90D9 0%, #9B59B6 60%, #FF6B6B 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-align: center;
    line-height: 1;
    filter: drop-shadow(0 2px 4px rgba(74, 144, 217, 0.3));
}

.letter-display--small {
    font-size: var(--font-xxl);
}

/* Stars */
.star-rating {
    display: flex;
    gap: var(--space-sm);
    justify-content: center;
}

.star {
    width: 40px;
    height: 40px;
    font-size: 36px;
    line-height: 1;
}

.star--filled {
    color: var(--color-star-filled);
}

.star--empty {
    color: var(--color-star-empty);
}

/* Progress */
.progress-bar {
    width: 100%;
    height: 16px;
    background: rgba(0,0,0,0.10);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.12);
}

.progress-bar__fill {
    height: 100%;
    background: linear-gradient(90deg, #4A90D9 0%, #9B59B6 60%, #FF6B6B 100%);
    border-radius: 8px;
    transition: width var(--transition-normal);
    box-shadow: 0 2px 6px rgba(74, 144, 217, 0.5);
}

/* Circles for sound counting */
.circle-group {
    display: flex;
    gap: var(--space-md);
    justify-content: center;
    flex-wrap: wrap;
}

.circle {
    width: 64px;
    height: 64px;
    border-radius: var(--radius-round);
    border: 3px solid var(--color-primary);
    background: transparent;
    cursor: pointer;
    transition: background var(--transition-fast), transform var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-lg);
    font-weight: 700;
}

.circle--filled {
    background: var(--color-primary);
    color: var(--color-text-white);
    transform: scale(1.1);
}

/* Balloon */
.balloon-container {
    position: relative;
    width: 100%;
    height: 60vh;
    overflow: hidden;
    border-radius: var(--radius-lg);
    background: linear-gradient(180deg, #87CEEB 0%, #E0F7FA 100%);
}

.balloon {
    position: absolute;
    width: 70px;
    height: 90px;
    cursor: pointer;
    transition: transform var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-xl);
    font-weight: 900;
    color: var(--color-text-white);
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}

.balloon:active {
    transform: scale(1.2);
}

.balloon__body {
    width: 70px;
    height: 85px;
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    position: absolute;
    top: 0;
}

.balloon__string {
    position: absolute;
    bottom: -20px;
    width: 2px;
    height: 20px;
    background: #999;
}

/* Drop zones */
.drop-zone {
    min-width: 120px;
    min-height: 120px;
    border: 3px dashed var(--color-primary-light);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: var(--space-md);
    transition: border-color var(--transition-fast), background var(--transition-fast);
}

.drop-zone--active {
    border-color: var(--color-primary);
    background: rgba(74, 144, 217, 0.1);
}

.drop-zone--correct {
    border-color: var(--color-success);
    background: rgba(76, 175, 80, 0.1);
}

/* Draggable items */
.draggable-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--touch-min);
    min-height: var(--touch-min);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-md);
    background: var(--color-bg-card);
    box-shadow: var(--shadow-md);
    font-size: var(--font-xl);
    font-weight: 700;
    cursor: grab;
    touch-action: none;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.draggable-item:active {
    cursor: grabbing;
    transform: scale(1.1);
    box-shadow: var(--shadow-lg);
}

/* Audio button */
.audio-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    border-radius: var(--radius-round);
    background: var(--color-primary);
    color: var(--color-text-white);
    font-size: 36px;
    box-shadow: var(--shadow-md);
    cursor: pointer;
    transition: transform var(--transition-fast);
    border: none;
}

.audio-button:active {
    transform: scale(0.9);
}

.audio-button--playing {
    animation: pulse 1s infinite;
}

/* Picture card */
.picture-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md);
    border-radius: var(--radius-lg);
    background: var(--color-bg-card);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    transition: transform var(--transition-fast), outline var(--transition-fast);
    min-width: var(--touch-min);
    min-height: var(--touch-min);
}

.picture-card__image {
    width: 80px;
    height: 80px;
    object-fit: contain;
}

.picture-card__emoji {
    font-size: 4rem;
    line-height: 1;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.picture-card__label {
    font-size: var(--font-sm);
    font-weight: 600;
    text-align: center;
}

.picture-card--selected {
    outline: 3px solid var(--color-primary);
    background: rgba(74, 144, 217, 0.1);
}

/* Reward overlay */
.reward-overlay {
    position: fixed;
    inset: 0;
    background: rgba(20, 20, 60, 0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-xl);
    z-index: 100;
    padding: var(--space-xl);
}

.reward-overlay__content {
    background: linear-gradient(160deg, #ffffff 0%, #f0f8ff 100%);
    border-radius: var(--radius-xl);
    padding: var(--space-xxl);
    text-align: center;
    max-width: 420px;
    width: 100%;
    box-shadow: 0 8px 0 rgba(0,0,0,0.15), 0 16px 40px rgba(0,0,0,0.25);
    border-top: 5px solid #FFD700;
}

/* Game header */
.game-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: var(--space-md);
    gap: var(--space-md);
    background: rgba(255,255,255,0.65);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: var(--radius-xl);
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}

.game-header__title {
    font-size: var(--font-lg);
    font-weight: 800;
    flex: 1;
    text-align: center;
    background: linear-gradient(135deg, #2E6CB5, #9B59B6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.game-header__back {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-round);
    background: #ffffff;
    box-shadow: 0 3px 0 rgba(0,0,0,0.12), 0 4px 10px rgba(0,0,0,0.10);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: var(--color-text);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.game-header__back:active {
    transform: translateY(2px);
    box-shadow: 0 1px 0 rgba(0,0,0,0.12), 0 2px 4px rgba(0,0,0,0.10);
}

/* Letter map */
.letter-map {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: var(--space-md);
    padding: var(--space-lg);
}

.letter-map__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-md);
    border-radius: var(--radius-xl);
    background: #ffffff;
    box-shadow: 0 4px 0 rgba(0,0,0,0.10), 0 6px 16px rgba(0,0,0,0.08);
    border-bottom: 4px solid rgba(0,0,0,0.10);
    text-align: center;
    cursor: pointer;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.letter-map__item:not(.letter-map__item--locked):active {
    transform: translateY(3px);
    box-shadow: 0 1px 0 rgba(0,0,0,0.10), 0 2px 6px rgba(0,0,0,0.08);
}

/* Cycle through cheerful pastel tints */
.letter-map__item:nth-child(6n+1) { border-top: 3px solid #4A90D9; }
.letter-map__item:nth-child(6n+2) { border-top: 3px solid #FF6B6B; }
.letter-map__item:nth-child(6n+3) { border-top: 3px solid #4CAF50; }
.letter-map__item:nth-child(6n+4) { border-top: 3px solid #FFB74D; }
.letter-map__item:nth-child(6n+5) { border-top: 3px solid #9B59B6; }
.letter-map__item:nth-child(6n+6) { border-top: 3px solid #FF8C42; }

.letter-map__item--locked {
    opacity: 0.45;
    cursor: not-allowed;
    filter: grayscale(0.4);
}

.letter-map__item--current {
    outline: 3px solid var(--color-primary);
    background: rgba(74, 144, 217, 0.08);
}

.letter-map__letter {
    font-size: var(--font-xxl);
    font-weight: 900;
    background: linear-gradient(135deg, #4A90D9, #9B59B6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Profile selection */
.profile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: var(--space-lg);
    padding: var(--space-lg);
}

.profile-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-lg);
    border-radius: var(--radius-xl);
    background: var(--color-bg-card);
    box-shadow: var(--shadow-md);
    cursor: pointer;
    transition: transform var(--transition-fast);
}

.profile-card:active {
    transform: scale(0.95);
}

.profile-card__avatar {
    width: 80px;
    height: 80px;
    border-radius: var(--radius-round);
    object-fit: cover;
    background: var(--color-primary-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
}

.profile-card__name {
    font-size: var(--font-lg);
    font-weight: 700;
}

/* Home page */
.home-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xl);
    padding: var(--space-xxl) var(--space-lg);
    text-align: center;
}

.home-hero__title {
    font-size: var(--font-display);
    font-weight: 900;
    letter-spacing: 3px;
    background: linear-gradient(135deg, #2E6CB5 0%, #9B59B6 50%, #FF6B6B 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 3px 6px rgba(74, 144, 217, 0.35));
}

.home-menu {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    width: 100%;
    max-width: 400px;
}

/* Canvas for letter drawing */
.drawing-canvas {
    border: 3px solid var(--color-primary-light);
    border-radius: var(--radius-lg);
    background: var(--color-bg-card);
    touch-action: none;
    cursor: crosshair;
}

/* Room organization game */
.room-container {
    position: relative;
    width: 100%;
    min-height: 50vh;
    background: linear-gradient(180deg, #FFF8E1 0%, #FFECB3 100%);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
}

.bins-container {
    display: flex;
    justify-content: space-around;
    gap: var(--space-lg);
    margin-top: var(--space-lg);
}

.scattered-letters {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-md);
    padding: var(--space-lg);
}

/* Sticker collection */
.sticker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: var(--space-lg);
    padding: var(--space-lg);
}

.sticker-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-lg);
    border-radius: var(--radius-xl);
    text-align: center;
    transition: transform var(--transition-fast);
}

.sticker-card--earned {
    background: linear-gradient(135deg, #FFF8E1, #FFD54F);
    box-shadow: 0 4px 16px rgba(255, 193, 7, 0.3);
}

.sticker-card--locked {
    background: var(--color-bg-card);
    box-shadow: var(--shadow-sm);
    opacity: 0.6;
}

.sticker-card__icon {
    font-size: 48px;
    line-height: 1;
}

.sticker-card__icon--locked {
    filter: grayscale(1);
}

.sticker-card__name {
    font-size: var(--font-md);
    font-weight: 700;
}

.sticker-card__requirement {
    font-size: var(--font-sm);
    color: var(--color-text-light);
}

/* Responsive */
@media (max-width: 480px) {
    :root {
        --font-display: 48px;
        --font-xxl: 36px;
    }

    .grid-4 { grid-template-columns: repeat(3, 1fr); }
    .grid-5 { grid-template-columns: repeat(3, 1fr); }
    .grid-6 { grid-template-columns: repeat(3, 1fr); }
}