* { box-sizing: border-box; margin: 0; padding: 0; }
body {
    background: linear-gradient(180deg, #AEE2FF 0%, #DFFFD8 60%, #88D66C 100%);
    font-family: 'Quicksand', sans-serif;
    color: #3C2A21;
    min-height: 100vh;
    padding: 20px;
}

h1, .count-num, .btn, .home-btn { font-family: 'Fredoka One', cursive; }
.container { max-width: 900px; margin: 0 auto; }

header { text-align: center; margin-bottom: 25px; }
.home-btn {
    display: inline-block;
    background: #FFF;
    color: #3C2A21;
    border: 3px solid #3C2A21;
    border-radius: 12px;
    padding: 8px 16px;
    text-decoration: none;
    margin-bottom: 15px;
    box-shadow: 0 4px 0 #3C2A21;
}
.home-btn:hover { background: #3C2A21; color: #FFF; }

header h1 { font-size: 2.5rem; color: #FF597B; text-shadow: 2px 2px 0 #FFF; }
header p { font-weight: 700; color: #435B66; }

.magic-wood-board {
    background: #A0522D;
    border: 8px solid #5C3317;
    border-radius: 28px;
    padding: 20px;
    box-shadow: 0 10px 0 #3C2A21;
}

.board-frame { background: #4B2E1E; padding: 15px; border-radius: 18px; }
textarea {
    width: 100%;
    height: 180px;
    background-color: #FFFDF0;
    border: 4px dashed #FFB26B;
    border-radius: 14px;
    padding: 15px;
    font-family: 'Quicksand', sans-serif;
    font-size: 1.3rem;
    font-weight: 700;
    color: #3C2A21;
    resize: vertical;
    outline: none;
}

.controls { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 15px; }
.btn {
    padding: 12px 18px;
    font-size: 1.05rem;
    border: 3px solid #2C1B11;
    border-radius: 14px;
    cursor: pointer;
    box-shadow: 0 5px 0 #2C1B11;
}
.btn:active { transform: translateY(4px); box-shadow: 0 1px 0 #2C1B11; }
.btn-audio { background: #54B435; color: #FFF; }
.btn-yellow { background: #FFD93D; color: #3C2A21; }
.btn-blue { background: #4D96FF; color: #FFF; }
.btn-clear { background: #FF6B6B; color: #FFF; margin-left: auto; }

.counters-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    margin-top: 20px;
}

.wood-card {
    background: #FEE8B0;
    border: 4px solid #6F4E37;
    border-radius: 18px;
    padding: 15px;
    text-align: center;
    box-shadow: 0 6px 0 #6F4E37;
}

.animal-icon { font-size: 2.5rem; display: block; }
.count-num { font-size: 2.8rem; color: #FF597B; margin: -5px 0; display: block; }
.count-label { font-weight: 700; color: #5C3317; font-size: 1rem; }