/* ============================================================
   Kids Kingdom - Animal Sounds Soundboard
   LIGHT theme. CHESSBOARD grid: cards touch edge-to-edge (no
   gap), alternating checkerboard background colors, like a
   chess/checkers board. 37 unique personality animations.
   ============================================================ */

.asb-wrap {
    max-width: 1200px;
    margin: 30px auto;
    padding: 0 0px;
}

/* ================= CATEGORY TABS (each with its own colour) ================= */
.asb-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin-bottom: 20px;
}

.asb-tab-btn {
    background: #fff;
    color: var(--tab-color, #6366f1);
    border: 2px solid var(--tab-color, #6366f1);
    border-radius: 999px;
    padding: 8px 18px;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s;
}

.asb-tab-btn:hover { transform: translateY(-2px); }

.asb-tab-btn.active {
    background: var(--tab-color, #6366f1);
    color: #fff;
    box-shadow: 0 4px 14px rgba(0,0,0,0.15);
}

/* ================= SEARCH ================= */
.asb-search-wrap {
    max-width: 380px;
    margin: 0 auto 24px;
}

.asb-search-input {
    width: 100%;
    box-sizing: border-box;
    padding: 11px 18px;
    border: 2px solid var(--color-bg, #FFF9F0);
    border-radius: 999px;
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--color-dark, #2D3142);
    background: #fff;
}

.asb-search-input:focus {
    outline: none;
    border-color: var(--color-primary, #FF6B6B);
}

/* ================= CHESSBOARD GRID (edge-to-edge, no gap) ================= */
.asb-board {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 0;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 6px 24px rgba(0,0,0,0.10);
    border: 1px solid #eee;
}

.asb-card {
    background: #fdfdfb;
    padding: 16px 6px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    cursor: pointer;
    position: relative;
    -webkit-user-select: none;
    user-select: none;
    touch-action: manipulation;
    transition: background 0.15s ease;
    aspect-ratio: 1 / 0;
}

/* Checkerboard: 8 columns -> pattern repeats every 16 cells (2 rows) */
.asb-board .asb-card:nth-child(16n+1),
.asb-board .asb-card:nth-child(16n+3),
.asb-board .asb-card:nth-child(16n+5),
.asb-board .asb-card:nth-child(16n+7),
.asb-board .asb-card:nth-child(16n+10),
.asb-board .asb-card:nth-child(16n+12),
.asb-board .asb-card:nth-child(16n+14),
.asb-board .asb-card:nth-child(16n) {
    background: #f1f0eb;
}

.asb-card:hover {
    background: #ffe9d6 !important;
    z-index: 2;
}

.asb-card.is-playing {
    background: var(--card-color, #FF6B6B) !important;
    z-index: 3;
}

.asb-card.is-playing .asb-card-name,
.asb-card.is-playing .asb-card-sound {
    color: #fff;
}

.asb-card-emoji {
    font-size: 2.2rem;
    line-height: 1;
    display: inline-block;
}

.asb-card-name {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.78rem;
    color: var(--color-dark, #2D3142);
    text-align: center;
}

.asb-card-sound {
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--card-color, #FF6B6B);
    opacity: 0;
    transition: opacity 0.2s;
    min-height: 1em;
    text-align: center;
}

.asb-card.is-playing .asb-card-sound {
    opacity: 1;
}

/* ================= 37 PERSONALITY ANIMATIONS ================= */
.asb-card.is-playing .anim-sway      { animation: aSway 0.6s ease; }
.asb-card.is-playing .anim-wiggle    { animation: aWiggle 0.5s ease; }
.asb-card.is-playing .anim-peck      { animation: aPeck 0.4s ease; }
.asb-card.is-playing .anim-trot      { animation: aTrot 0.5s ease; }
.asb-card.is-playing .anim-bounce    { animation: aBounce 0.5s ease; }
.asb-card.is-playing .anim-headbutt  { animation: aHeadbutt 0.4s ease; }
.asb-card.is-playing .anim-waddle    { animation: aWaddle 0.6s ease; }
.asb-card.is-playing .anim-crow      { animation: aCrow 0.55s ease; }
.asb-card.is-playing .anim-strut     { animation: aStrut 0.6s ease; }
.asb-card.is-playing .anim-nod       { animation: aNod 0.5s ease; }
.asb-card.is-playing .anim-hop       { animation: aHop 0.45s ease; }
.asb-card.is-playing .anim-roar      { animation: aRoar 0.5s ease; }
.asb-card.is-playing .anim-shake     { animation: aShake 0.4s ease; }
.asb-card.is-playing .anim-howl      { animation: aHowl 0.6s ease; }
.asb-card.is-playing .anim-chest     { animation: aChest 0.45s ease; }
.asb-card.is-playing .anim-chomp     { animation: aChomp 0.4s ease; }
.asb-card.is-playing .anim-prowl     { animation: aProwl 0.55s ease; }
.asb-card.is-playing .anim-laugh     { animation: aLaugh 0.5s ease; }
.asb-card.is-playing .anim-swing     { animation: aSwing 0.55s ease; }
.asb-card.is-playing .anim-slither   { animation: aSlither 0.6s ease; }
.asb-card.is-playing .anim-dart      { animation: aDart 0.35s ease; }
.asb-card.is-playing .anim-waggle    { animation: aWaggle 0.4s ease; }
.asb-card.is-playing .anim-stretch   { animation: aStretch 0.5s ease; }
.asb-card.is-playing .anim-spin      { animation: aSpin 0.6s ease; }
.asb-card.is-playing .anim-scurry    { animation: aScurry 0.4s ease; }
.asb-card.is-playing .anim-tilt      { animation: aTilt 0.5s ease; }
.asb-card.is-playing .anim-sing      { animation: aSing 0.5s ease; }
.asb-card.is-playing .anim-swim      { animation: aSwim 0.6s ease; }
.asb-card.is-playing .anim-soar      { animation: aSoar 0.6s ease; }
.asb-card.is-playing .anim-circle    { animation: aCircle 0.7s ease; }
.asb-card.is-playing .anim-hover     { animation: aHover 0.5s ease; }
.asb-card.is-playing .anim-leap      { animation: aLeap 0.5s ease; }
.asb-card.is-playing .anim-clap      { animation: aClap 0.4s ease; }
.asb-card.is-playing .anim-roll      { animation: aRoll 0.6s ease; }
.asb-card.is-playing .anim-vibrate   { animation: aVibrate 0.3s ease; }
.asb-card.is-playing .anim-flutter   { animation: aFlutter 0.5s ease; }
.asb-card.is-playing .anim-sneak     { animation: aSneak 0.6s ease; }

@keyframes aSway     { 0%,100%{transform:rotate(0)} 25%{transform:rotate(-8deg)} 75%{transform:rotate(8deg)} }
@keyframes aWiggle   { 0%,100%{transform:rotate(0)} 25%{transform:rotate(-12deg)} 75%{transform:rotate(12deg)} }
@keyframes aPeck     { 0%,100%{transform:translateY(0)} 30%,70%{transform:translateY(6px) rotate(-8deg)} }
@keyframes aTrot     { 0%,100%{transform:translateY(0)} 25%{transform:translateY(-6px)} 50%{transform:translateY(0)} 75%{transform:translateY(-4px)} }
@keyframes aBounce   { 0%,100%{transform:translateY(0)} 30%{transform:translateY(-14px)} 60%{transform:translateY(-4px)} }
@keyframes aHeadbutt { 0%,100%{transform:translateX(0)} 40%{transform:translateX(-8px)} 60%{transform:translateX(4px)} }
@keyframes aWaddle   { 0%,100%{transform:rotate(0) translateX(0)} 25%{transform:rotate(-6deg) translateX(-3px)} 75%{transform:rotate(6deg) translateX(3px)} }
@keyframes aCrow     { 0%,100%{transform:scale(1)} 40%{transform:scale(1.2) translateY(-6px)} }
@keyframes aStrut    { 0%,100%{transform:translateX(0) rotate(0)} 25%{transform:translateX(-4px) rotate(-4deg)} 75%{transform:translateX(4px) rotate(4deg)} }
@keyframes aNod      { 0%,100%{transform:translateY(0)} 50%{transform:translateY(6px)} }
@keyframes aHop      { 0%,100%{transform:translateY(0)} 40%{transform:translateY(-10px)} }
@keyframes aRoar     { 0%,100%{transform:scale(1)} 30%{transform:scale(1.25)} 60%{transform:scale(1.1)} }
@keyframes aShake    { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-5px)} 75%{transform:translateX(5px)} }
@keyframes aHowl     { 0%,100%{transform:rotate(0) translateY(0)} 50%{transform:rotate(-10deg) translateY(-8px)} }
@keyframes aChest    { 0%,100%{transform:scale(1)} 25%{transform:scale(1.15,0.9)} 50%{transform:scale(0.95,1.1)} 75%{transform:scale(1.15,0.9)} }
@keyframes aChomp    { 0%,100%{transform:scaleY(1)} 40%{transform:scaleY(0.7)} 70%{transform:scaleY(1.1)} }
@keyframes aProwl    { 0%,100%{transform:translateX(0)} 30%{transform:translateX(-6px) scale(1.05,0.95)} 70%{transform:translateX(6px) scale(1.05,0.95)} }
@keyframes aLaugh    { 0%,100%{transform:rotate(0)} 20%,60%{transform:rotate(-6deg)} 40%,80%{transform:rotate(6deg)} }
@keyframes aSwing    { 0%,100%{transform:rotate(0)} 30%{transform:rotate(-18deg)} 70%{transform:rotate(14deg)} }
@keyframes aSlither  { 0%,100%{transform:translateX(0) rotate(0)} 25%{transform:translateX(-5px) rotate(-6deg)} 75%{transform:translateX(5px) rotate(6deg)} }
@keyframes aDart     { 0%{transform:translateX(0)} 50%{transform:translateX(10px)} 100%{transform:translateX(0)} }
@keyframes aWaggle   { 0%,100%{transform:rotate(0)} 20%,60%{transform:rotate(-15deg)} 40%,80%{transform:rotate(15deg)} }
@keyframes aStretch  { 0%,100%{transform:scale(1)} 50%{transform:scale(1.15,0.9) translateY(3px)} }
@keyframes aSpin     { 0%{transform:rotate(0) scale(1)} 50%{transform:rotate(180deg) scale(1.15)} 100%{transform:rotate(360deg) scale(1)} }
@keyframes aScurry   { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-6px)} 50%{transform:translateX(0)} 75%{transform:translateX(6px)} }
@keyframes aTilt     { 0%,100%{transform:rotate(0)} 50%{transform:rotate(15deg)} }
@keyframes aSing     { 0%,100%{transform:scale(1)} 30%,70%{transform:scale(1.12)} }
@keyframes aSwim     { 0%,100%{transform:translateX(0) rotate(0)} 25%{transform:translateX(-5px) rotate(-5deg)} 75%{transform:translateX(5px) rotate(5deg)} }
@keyframes aSoar     { 0%,100%{transform:translateY(0) scale(1)} 50%{transform:translateY(-12px) scale(1.1,0.95)} }
@keyframes aCircle   { 0%{transform:rotate(0) translateX(0)} 50%{transform:rotate(180deg) translateX(4px)} 100%{transform:rotate(360deg) translateX(0)} }
@keyframes aHover    { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }
@keyframes aLeap     { 0%,100%{transform:translateY(0) scale(1)} 40%{transform:translateY(-16px) scale(1.05,0.92)} }
@keyframes aClap     { 0%,100%{transform:scaleX(1)} 30%,70%{transform:scaleX(0.85)} }
@keyframes aRoll     { 0%{transform:rotate(0)} 100%{transform:rotate(360deg)} }
@keyframes aVibrate  { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-2px)} 40%{transform:translateX(2px)} 60%{transform:translateX(-2px)} 80%{transform:translateX(2px)} }
@keyframes aFlutter  { 0%,100%{transform:rotate(0) scale(1)} 25%{transform:rotate(-10deg) scale(1.08)} 75%{transform:rotate(10deg) scale(1.08)} }
@keyframes aSneak    { 0%,100%{transform:translateX(0) scale(1)} 50%{transform:translateX(6px) scale(0.95,1.05)} }

.asb-hint {
    text-align: center;
    margin-top: 22px;
    font-size: 0.9rem;
    color: #999;
    font-weight: 600;
}

.asb-empty-msg {
    text-align: center;
    padding: 40px 20px;
    color: #999;
    font-size: 0.95rem;
    grid-column: 1 / -1;
}

/* ================= RESPONSIVE ================= */
@media (max-width: 900px) {
    .asb-board { grid-template-columns: repeat(6, 1fr); }

    /* Checkerboard for 6 columns -> pattern repeats every 12 cells */
    .asb-board .asb-card:nth-child(16n+1),
    .asb-board .asb-card:nth-child(16n+3),
    .asb-board .asb-card:nth-child(16n+5),
    .asb-board .asb-card:nth-child(16n+7),
    .asb-board .asb-card:nth-child(16n+10),
    .asb-board .asb-card:nth-child(16n+12),
    .asb-board .asb-card:nth-child(16n+14),
    .asb-board .asb-card:nth-child(16n) {
        background: #fdfdfb;
    }
    .asb-board .asb-card:nth-child(12n+1),
    .asb-board .asb-card:nth-child(12n+3),
    .asb-board .asb-card:nth-child(12n+5),
    .asb-board .asb-card:nth-child(12n+8),
    .asb-board .asb-card:nth-child(12n+10),
    .asb-board .asb-card:nth-child(12n) {
        background: #f1f0eb;
    }

    .asb-card-emoji { font-size: 1.9rem; }
    .asb-card-name { font-size: 0.7rem; }
}

@media (max-width: 560px) {
    .asb-board { grid-template-columns: repeat(4, 1fr); }

    .asb-board .asb-card:nth-child(12n+1),
    .asb-board .asb-card:nth-child(12n+3),
    .asb-board .asb-card:nth-child(12n+5),
    .asb-board .asb-card:nth-child(12n+8),
    .asb-board .asb-card:nth-child(12n+10),
    .asb-board .asb-card:nth-child(12n) {
        background: #fdfdfb;
    }
    .asb-board .asb-card:nth-child(8n+1),
    .asb-board .asb-card:nth-child(8n+3),
    .asb-board .asb-card:nth-child(8n+6),
    .asb-board .asb-card:nth-child(8n) {
        background: #f1f0eb;
    }

    .asb-card { padding: 10px 4px 8px; }
    .asb-card-emoji { font-size: 1.6rem; }
    .asb-card-name { font-size: 0.62rem; }
    .asb-card-sound { font-size: 0.56rem; }
    .asb-tab-btn { padding: 6px 14px; font-size: 0.78rem; }
}