/* ============================================================
   animal-soundboard.css
   Chess board tight grid — no gaps between cards
   Click = pressed switch feel (translateY + shadow collapse)
   Per-animal emoji animations while sound plays
   tools.dotiam.com
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

/* ═══════ PAGE HEADER (matches site style) ═══════ */
.tool-header {
    background: linear-gradient(135deg, #7c3aed 0%, #4f46e5 50%, #0ea5e9 100%);
    color: white;
    padding: 60px 20px;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.tool-header::before {
    content: '🦁🐘🐬🦜🐸';
    position: absolute;
    font-size: 180px;
    opacity: .06;
    top: -30px; right: -40px;
    line-height: 1;
    animation: floatEmoji 8s ease-in-out infinite;
}
@keyframes floatEmoji {
    0%,100% { transform: translateY(0) rotate(-5deg); }
    50%      { transform: translateY(-20px) rotate(5deg); }
}
.tool-header h1         { font-size: 42px; font-weight: 900; margin-bottom: 10px; }
.tool-subtitle          { font-size: 18px; opacity: .9; margin-bottom: 18px; }
.tool-meta              { display:flex; justify-content:center; gap:12px; flex-wrap:wrap; font-size:14px; }
.tool-icon-large        { font-size: 68px; margin-bottom: 16px; animation: bounce 2s ease-in-out infinite; }
@keyframes bounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
.meta-separator         { opacity: .4; }

/* ═══════ TOOL CONTENT AREA ═══════ */
.tool-content { background: #0f0f14; padding: 30px 0 60px; }

/* ═══════ SOUNDBOARD WRAP ═══════ */
.asb-wrap {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0;
}

/* ═══════ CONTROLS BAR ═══════ */
.asb-controls-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    background: #16161e;
    border-bottom: 1px solid #2a2a3e;
    flex-wrap: wrap;
}

/* Category tabs */
.asb-cat-tabs {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    flex: 1;
}
.asb-cat-btn {
    padding: 6px 14px;
    border-radius: 20px;
    border: 1.5px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.05);
    color: rgba(255,255,255,.6);
    font-size: .72rem;
    font-weight: 700;
    cursor: pointer;
    transition: all .15s;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
}
.asb-cat-btn:hover {
    border-color: var(--cat-c, #6366f1);
    color: var(--cat-c, #6366f1);
    background: rgba(255,255,255,.08);
}
.asb-cat-btn.active {
    background: var(--cat-c, #6366f1);
    border-color: var(--cat-c, #6366f1);
    color: #fff;
    box-shadow: 0 0 12px rgba(99,102,241,.4);
}

/* Search */
.asb-search-wrap {
    position: relative;
    flex-shrink: 0;
}
.asb-search {
    background: #1e1e2e;
    border: 1.5px solid #2a2a3e;
    border-radius: 20px;
    color: #e0e0ff;
    padding: 7px 14px 7px 34px;
    font-size: .78rem;
    outline: none;
    width: 160px;
    transition: border-color .2s;
}
.asb-search:focus { border-color: #6366f1; }
.asb-search::placeholder { color: rgba(255,255,255,.25); }
.asb-search-icon {
    position: absolute;
    left: 10px; top: 50%;
    transform: translateY(-50%);
    font-size: .8rem;
    pointer-events: none;
    opacity: .4;
}
.asb-count {
    font-size: .7rem;
    color: rgba(255,255,255,.3);
    flex-shrink: 0;
}

/* ═══════════════════════════════════════
   CHESS GRID — NO GAPS, TIGHT LIKE A BOARD
   Each cell = exactly same size
   Border makes the "board" lines
═══════════════════════════════════════ */
.asb-grid {
    display: grid;
    /* Responsive: fills width exactly */
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 0;          /* ZERO gap — chess board style */
    border-left: 1px solid #2a2a3e;
    border-top:  1px solid #2a2a3e;
}

.asb-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 60px;
    color: rgba(255,255,255,.3);
    font-size: 1.1rem;
    border: none;
}

/* ═══════════════════════════════════════
   INDIVIDUAL CARD — Switch press effect
═══════════════════════════════════════ */
.asb-card {
    position: relative;
    border-right:  1px solid #2a2a3e;
    border-bottom: 1px solid #2a2a3e;
    aspect-ratio: 1;                  /* Perfect square — chess cell */
    cursor: pointer;
    overflow: hidden;
    background: #13131a;
    transition: background .12s;
    /* No border-radius — chess board = sharp corners */
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    user-select: none;
}

/* Alternating chess-board tint — very subtle */
.asb-card:nth-child(even) { background: #151520; }

/* ── SWITCH PRESS EFFECT ──
   When clicked: card dips down = translateY(3px) + shadow shrinks
   Like a mechanical keyboard key or physical switch */
.asb-card:active,
.asb-card.pressed {
    transform: translateY(3px);
    box-shadow: inset 0 3px 8px rgba(0,0,0,.6) !important;
    background: #0f0f18 !important;
    transition: transform .05s, box-shadow .05s, background .05s;
}

/* Playing state — glows with category color */
.asb-card.playing {
    z-index: 2;
    /* background + box-shadow handled by JS rainbow cycler */
}
.asb-card.playing::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center,
        rgba(99,102,241,.12) 0%,
        transparent 70%
    );
    pointer-events: none;
    animation: cardPulse 1.2s ease-in-out infinite;
}
@keyframes cardPulse {
    0%,100% { opacity: .6; }
    50%      { opacity: 1; }
}

/* Paused state */
.asb-card.paused {
    /* background frozen by JS at last hue — only add amber border */
    box-shadow: inset 0 0 0 2px #f59e0b, 0 0 0 1px #f59e0b !important;
}

/* Active (last played) */
.asb-card.active .asb-name { color: var(--cat-color, #a5b4fc) !important; }

/* ═══════ CARD INNER ═══════ */
.asb-card-inner {
    width: 100%; height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px 4px 8px;
    gap: 4px;
    position: relative;
}

/* ═══════ EMOJI — big, animated ═══════ */
.asb-emoji {
    font-size: clamp(2.6rem, 5vw, 3.8rem);
    line-height: 1;
    display: block;
    /* transform-origin for animations */
    transform-origin: center bottom;
    will-change: transform;
}

/* ═══════ NAME + SOUND WORD ═══════ */
.asb-name {
    font-size: clamp(.58rem, 1.3vw, .8rem);
    font-weight: 700;
    color: rgba(255,255,255,.65);
    text-align: center;
    line-height: 1.1;
    transition: color .2s;
}
.asb-sound-word {
    font-size: clamp(.5rem, 1.1vw, .7rem);
    color: rgba(255,255,255,.25);
    font-style: italic;
    text-align: center;
    min-height: .7em;
}

/* ═══════ PLAY/PAUSE/STOP BUTTONS ═══════ */
.asb-controls {
    display: flex;
    gap: 2px;
    margin-top: 2px;
}
.asb-btn {
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 4px;
    color: rgba(255,255,255,.7);
    font-size: clamp(.62rem, 1.4vw, .82rem);
    padding: 1px 5px;
    cursor: pointer;
    line-height: 1.5;
    transition: all .12s;
    -webkit-tap-highlight-color: transparent;
}
.asb-btn:hover   { background: rgba(255,255,255,.18); color: #fff; }
.asb-play:hover  { background: rgba(99,102,241,.5); border-color: #6366f1; }
.asb-pause:hover { background: rgba(245,158,11,.4); border-color: #f59e0b; }
.asb-stop:hover  { background: rgba(239,68,68,.4);  border-color: #ef4444; }

/* ═══════ SOUND BURST (floating text) ═══════ */
.asb-burst {
    position: absolute;
    top: 10%;
    left: 50%;
    transform: translateX(-50%);
    font-size: clamp(.6rem, 1.5vw, .85rem);
    font-weight: 900;
    color: #fff;
    text-shadow: 0 0 8px rgba(255,255,255,.8);
    pointer-events: none;
    z-index: 20;
    white-space: nowrap;
    animation: burstFloat 1.1s ease-out forwards;
}
@keyframes burstFloat {
    0%   { opacity: 1; transform: translateX(-50%) translateY(0)   scale(1.2); }
    60%  { opacity: 1; transform: translateX(-50%) translateY(-18px) scale(1);   }
    100% { opacity: 0; transform: translateX(-50%) translateY(-32px) scale(.8);  }
}

/* ═══════════════════════════════════════
   EMOJI ANIMATIONS
   Every animal has its own personality!
═══════════════════════════════════════ */

/* idle — subtle breath */
.anim-idle {
    animation: idle 3s ease-in-out infinite;
}
@keyframes idle {
    0%,100% { transform: scale(1); }
    50%      { transform: scale(1.04); }
}

/* sway — left right slow (elephant, whale, camel, flamingo) */
.anim-sway {
    animation: sway .7s ease-in-out infinite;
}
@keyframes sway {
    0%,100% { transform: rotate(-8deg); }
    50%      { transform: rotate(8deg); }
}

/* wiggle — fast left-right (pig) */
.anim-wiggle {
    animation: wiggle .3s ease-in-out infinite;
}
@keyframes wiggle {
    0%,100% { transform: rotate(-12deg); }
    50%      { transform: rotate(12deg); }
}

/* bounce / hop — up down (sheep, rabbit, bunny, frog, grasshopper, guinea pig, sparrow) */
.anim-bounce, .anim-hop {
    animation: hop .4s ease-in-out infinite;
}
@keyframes hop {
    0%,100% { transform: translateY(0)    scaleY(1); }
    40%      { transform: translateY(-14px) scaleY(.9); }
    60%      { transform: translateY(-16px) scaleY(.95); }
}

/* peck — forward dip (chicken, crow, woodpecker) */
.anim-peck {
    animation: peck .35s ease-in-out infinite;
    transform-origin: center top;
}
@keyframes peck {
    0%,100% { transform: rotate(0deg) translateY(0); }
    50%      { transform: rotate(20deg) translateY(4px); }
}

/* trot — slight bounce + lean (horse, moose) */
.anim-trot {
    animation: trot .45s ease-in-out infinite;
}
@keyframes trot {
    0%,100% { transform: translateY(0) rotate(-3deg); }
    25%      { transform: translateY(-8px) rotate(3deg); }
    50%      { transform: translateY(0) rotate(-3deg); }
    75%      { transform: translateY(-5px) rotate(3deg); }
}

/* headbutt — forward lunge (goat) */
.anim-headbutt {
    animation: headbutt .5s ease-in-out infinite;
    transform-origin: center center;
}
@keyframes headbutt {
    0%,100% { transform: translateX(0); }
    40%      { transform: translateX(10px) scale(1.05); }
}

/* waddle — side to side drop (duck, penguin) */
.anim-waddle {
    animation: waddle .5s ease-in-out infinite;
}
@keyframes waddle {
    0%,100% { transform: rotate(-10deg) translateY(2px); }
    50%      { transform: rotate(10deg) translateY(2px); }
}

/* crow/strut — rise up tall (rooster, peacock, turkey) */
.anim-crow, .anim-strut {
    animation: strut .6s ease-in-out infinite;
}
@keyframes strut {
    0%,100% { transform: scaleY(1) translateY(0); }
    50%      { transform: scaleY(1.15) translateY(-4px); }
}

/* nod — up down head (llama, cuckoo, pigeon, camel) */
.anim-nod {
    animation: nod .5s ease-in-out infinite;
    transform-origin: center top;
}
@keyframes nod {
    0%,100% { transform: rotate(0deg); }
    50%      { transform: rotate(15deg); }
}

/* roar — big zoom pulse (lion, tiger) */
.anim-roar {
    animation: roar .5s ease-in-out infinite;
}
@keyframes roar {
    0%,100% { transform: scale(1); }
    30%      { transform: scale(1.25) rotate(-5deg); }
    60%      { transform: scale(1.2) rotate(5deg); }
}

/* shake — tremble (bear, walrus, badger) */
.anim-shake {
    animation: shake .15s linear infinite;
}
@keyframes shake {
    0%,100% { transform: translateX(0); }
    25%      { transform: translateX(-5px); }
    75%      { transform: translateX(5px); }
}

/* howl — stretch tall (wolf) */
.anim-howl {
    animation: howl .8s ease-in-out infinite;
    transform-origin: center bottom;
}
@keyframes howl {
    0%,100% { transform: scaleY(1) rotate(0deg); }
    50%      { transform: scaleY(1.2) rotate(-8deg); }
}

/* chest — beat chest (gorilla) */
.anim-chest {
    animation: chest .35s ease-in-out infinite;
}
@keyframes chest {
    0%,100% { transform: scale(1); }
    25%      { transform: scale(1.15) rotate(-5deg); }
    75%      { transform: scale(1.15) rotate(5deg); }
}

/* chomp — open close (hippo, crocodile, alligator) */
.anim-chomp {
    animation: chomp .4s ease-in-out infinite;
    transform-origin: center top;
}
@keyframes chomp {
    0%,100% { transform: scaleY(1); }
    50%      { transform: scaleY(.75) translateY(4px); }
}

/* prowl — slow creep left-right (leopard) */
.anim-prowl {
    animation: prowl .8s ease-in-out infinite;
}
@keyframes prowl {
    0%,100% { transform: translateX(-6px) rotate(-3deg); }
    50%      { transform: translateX(6px) rotate(3deg); }
}

/* laugh — shake + scale (hyena) */
.anim-laugh {
    animation: laugh .25s ease-in-out infinite;
}
@keyframes laugh {
    0%,100% { transform: translateY(0) rotate(-5deg); }
    50%      { transform: translateY(-6px) rotate(5deg); }
}

/* swing — rotate around (monkey) */
.anim-swing {
    animation: swing .6s ease-in-out infinite;
    transform-origin: center top;
}
@keyframes swing {
    0%,100% { transform: rotate(-20deg); }
    50%      { transform: rotate(20deg); }
}

/* slither — left-right wave (snake) */
.anim-slither {
    animation: slither .5s linear infinite;
}
@keyframes slither {
    0%   { transform: translateX(-6px) rotate(-5deg); }
    25%  { transform: translateX(0) rotate(5deg); }
    50%  { transform: translateX(6px) rotate(-5deg); }
    75%  { transform: translateX(0) rotate(5deg); }
    100% { transform: translateX(-6px) rotate(-5deg); }
}

/* dart — fast stab (lizard, fox, lobster) */
.anim-dart {
    animation: dart .3s ease-in-out infinite;
}
@keyframes dart {
    0%,100% { transform: translateX(0); }
    50%      { transform: translateX(8px); }
}

/* waggle — tail wag feel (dog) */
.anim-waggle {
    animation: waggle .25s ease-in-out infinite;
}
@keyframes waggle {
    0%,100% { transform: rotate(-15deg); }
    50%      { transform: rotate(15deg); }
}

/* stretch — long pull (cat) */
.anim-stretch {
    animation: stretch .9s ease-in-out infinite;
    transform-origin: center bottom;
}
@keyframes stretch {
    0%,100% { transform: scaleX(1) scaleY(1); }
    40%      { transform: scaleX(1.2) scaleY(.85); }
    70%      { transform: scaleX(.9) scaleY(1.15); }
}

/* spin — rotate (hamster, octopus, ladybug) */
.anim-spin {
    animation: spin .6s linear infinite;
}
@keyframes spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* scurry — fast tiny back-forth (mouse, squirrel, chipmunk) */
.anim-scurry {
    animation: scurry .18s linear infinite;
}
@keyframes scurry {
    0%,100% { transform: translateX(-4px); }
    50%      { transform: translateX(4px); }
}

/* tilt — head tilt (parrot, owl) */
.anim-tilt {
    animation: tilt .7s ease-in-out infinite;
    transform-origin: center center;
}
@keyframes tilt {
    0%,100% { transform: rotate(-20deg); }
    50%      { transform: rotate(20deg); }
}

/* sing — pulse + sway (canary) */
.anim-sing {
    animation: sing .4s ease-in-out infinite;
}
@keyframes sing {
    0%,100% { transform: scale(1) rotate(-5deg); }
    50%      { transform: scale(1.1) rotate(5deg); }
}

/* soar — gentle float (eagle, seagull, hawk) */
.anim-soar {
    animation: soar 1s ease-in-out infinite;
}
@keyframes soar {
    0%,100% { transform: translateY(0) rotate(-5deg) scaleX(1.05); }
    50%      { transform: translateY(-10px) rotate(5deg) scaleX(1); }
}

/* swim — horizontal sine (fish) */
.anim-swim {
    animation: swim .6s ease-in-out infinite;
}
@keyframes swim {
    0%,100% { transform: translateX(-6px) rotate(-5deg); }
    50%      { transform: translateX(6px) rotate(5deg); }
}

/* circle — rotate around (vulture, fly, shark) */
.anim-circle {
    animation: circle 1.2s linear infinite;
    transform-origin: 60% 50%;
}
@keyframes circle {
    from { transform: rotate(0deg) translateX(5px) rotate(0deg); }
    to   { transform: rotate(360deg) translateX(5px) rotate(-360deg); }
}

/* leap — big jump (dolphin, deer) */
.anim-leap {
    animation: leap .7s ease-in-out infinite;
}
@keyframes leap {
    0%,100% { transform: translateY(0) rotate(-10deg); }
    50%      { transform: translateY(-18px) rotate(10deg); }
}

/* clap — arms out (seal) */
.anim-clap {
    animation: clap .35s ease-in-out infinite;
}
@keyframes clap {
    0%,100% { transform: scaleX(1.15) scaleY(.9); }
    50%      { transform: scaleX(.9) scaleY(1.1); }
}

/* roll — tumble (otter) */
.anim-roll {
    animation: roll .6s linear infinite;
}
@keyframes roll {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* sneak — slow creep (raccoon) */
.anim-sneak {
    animation: sneak .9s ease-in-out infinite;
}
@keyframes sneak {
    0%,100% { transform: translateX(0) scaleY(.9); }
    50%      { transform: translateX(8px) scaleY(1); }
}

/* hover — float in place (bee, mosquito, hummingbird) */
.anim-hover {
    animation: hover .3s ease-in-out infinite;
}
@keyframes hover {
    0%,100% { transform: translateY(-3px); }
    50%      { transform: translateY(3px); }
}

/* vibrate — fast tremble (cricket, cicada) */
.anim-vibrate {
    animation: vibrate .1s linear infinite;
}
@keyframes vibrate {
    0%,100% { transform: translateX(0) translateY(0); }
    25%      { transform: translateX(-3px) translateY(-2px); }
    75%      { transform: translateX(3px) translateY(2px); }
}

/* flutter — wing flap (butterfly) */
.anim-flutter {
    animation: flutter .25s ease-in-out infinite;
}
@keyframes flutter {
    0%,100% { transform: scaleX(1); }
    50%      { transform: scaleX(.5); }
}

section.tool-content {
    margin-top: 0px;
}
/* ═══════ RESPONSIVE ═══════ */
/* Tablet: side margins */
@media (min-width: 600px) and (max-width: 1023px) {
    .asb-wrap { margin: 0 12px; }
    .asb-controls-bar { padding: 12px 14px; }
}

/* Mobile — fixed 3 column grid */
@media (max-width: 599px) {
    .asb-grid { grid-template-columns: repeat(3, 1fr); }
    .asb-emoji { font-size: 2.2rem; }
    .asb-search { width: 120px; }
    .tool-header h1 { font-size: 26px; }
	.asb-controls-bar {
		display: flex;
		align-items: center;
		gap: 12px;
		padding: 16px 20px;
		background: #16161e;
		border-bottom: 1px solid #2a2a3e;
		flex-direction: column;
		flex-wrap: nowrap;
	}
}

/* Tablet */
@media (min-width: 600px) and (max-width: 768px) {
    .asb-grid { grid-template-columns: repeat(auto-fill, minmax(115px, 1fr)); }
}

/* Desktop large */
@media (min-width: 1200px) {
    .asb-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}

/* ═══════ PARTICLE CANVAS ═══════ */
.asb-card { overflow: visible; }
.asb-particles-canvas {
    position: absolute;
    inset: -20px;
    pointer-events: none;
    z-index: 15;
    border-radius: 0;
}