:root{
  --liad-purple:#6C2BD9;
  --liad-purple-2:#5A1EC7;
  --bg:#6C2BD9; /* agora o fundo roxo */
  --card-bg: rgba(255,255,255,0.95);
  --card-bg-soft: rgba(255,255,255,0.08);
  --text:#111;
  --muted: rgba(0,0,0,0.6);
  --white: #ffffff;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;font-family:Inter,system-ui,Segoe UI,Roboto,"Helvetica Neue",Arial;
  background: linear-gradient(180deg,var(--bg),var(--liad-purple-2));
  color:var(--white);-webkit-font-smoothing:antialiased;
  -webkit-font-smoothing:antialiased;
}

/* Header */
.site-header{
  padding:2rem 1rem;text-align:center;
  display:flex;align-items:center;gap:1rem;flex-direction:column;
}
.logo{height:72px;filter:drop-shadow(0 6px 18px rgba(0,0,0,0.25));}
.subtitle{color:rgba(255,255,255,0.9);margin-top:0.25rem}

/* Layout container */
.container{max-width:1100px;margin:0 auto;padding:1rem}

/* Categories grid */
.categories-grid{display:grid;gap:1rem;grid-template-columns:repeat(1,1fr)}
.card{
  display:block;background:var(--card-bg);border-radius:14px;padding:1.25rem;
  text-decoration:none;color:var(--text);box-shadow:0 10px 30px rgba(0,0,0,0.18);
  border:1px solid rgba(0,0,0,0.06);transition:transform .15s ease, box-shadow .15s ease;
  align-items:center;display:flex;gap:1rem;
}
.card h2{margin:0 0 .25rem;color:var(--liad-purple)}
.card p{margin:0;color:var(--muted)}
.card:focus, .card:hover{transform:translateY(-6px);box-shadow:0 30px 50px rgba(0,0,0,0.22);outline:none}

/* make cards look good on purple bg */
.card .emoji{font-size:2.2rem;margin-right:0.5rem}

/* Footer */
.site-footer{text-align:center;padding:1.25rem;color:rgba(255,255,255,0.8)}

/* Responsive grid */
@media(min-width:481px){
  .categories-grid{grid-template-columns:repeat(2,1fr)}
}
@media(min-width:1025px){
  .categories-grid{grid-template-columns:repeat(4,1fr)}
}

/* Controls bar for internal pages */
.controls{
  display:flex;gap:0.5rem;align-items:center;padding:0.6rem 1rem;background:var(--card-bg-soft);
  color:var(--white);border-radius:12px;margin-bottom:1rem;backdrop-filter: blur(6px);
}
.controls .logo-sm{height:34px;margin-right:0.5rem;/* removed color inversion filter to preserve original logo color */}
.controls .control-group{margin-left:auto;display:flex;gap:0.5rem;align-items:center}
.controls button{background:transparent;border:1px solid rgba(255,255,255,0.18);color:var(--white);padding:.4rem .6rem;border-radius:8px}

/* Sounds grid */
.sounds-grid{display:grid;grid-template-columns:repeat(1,1fr);gap:0.75rem}
.sound-btn{
  display:flex;align-items:center;gap:0.75rem;padding:.9rem;border-radius:10px;
  background:var(--card-bg);border:1px solid rgba(0,0,0,0.06);cursor:pointer;color:var(--text);
  transition:transform .12s ease, box-shadow .12s ease;
}
.sound-btn:hover{transform:translateY(-4px);box-shadow:0 12px 24px rgba(0,0,0,0.12)}
.sound-btn:focus{outline:3px solid rgba(108,43,217,0.14)}
.sound-btn .label{font-weight:700}
.sound-btn .desc{font-size:.86rem;color:var(--muted)}
.sound-btn .emoji{font-size:1.6rem;width:34px;text-align:center;padding:6px;border-radius:8px;background:linear-gradient(180deg,var(--liad-purple),var(--liad-purple-2));color:white;box-shadow:0 6px 18px rgba(108,43,217,0.18)}

/* layout for back button and headings */
.small{font-size:.9rem;color:rgba(255,255,255,0.9)}
.back-btn{display:inline-block;margin-bottom:1rem;color:rgba(255,255,255,0.9);text-decoration:none}

/* smaller screens adjustments */
@media (max-width:480px){
  .site-header{padding:1.25rem}
  .logo{height:56px}
  .card{padding:1rem}
  .controls{padding:0.5rem}
}

/* page content white boxes to keep readability */
.page-content{
  background:transparent;padding:0.25rem;border-radius:8px;
}

/* Accessibility: focus styles for links */
a:focus{outline:3px solid rgba(255,255,255,0.12);outline-offset:2px}


/* SVG icons removed; using emoji emotes */
/* playing pulse animation */
@keyframes pulseGlow {
  0% { box-shadow: 0 0 0 0 rgba(108,43,217,0.35); transform:scale(1); }
  50% { box-shadow: 0 0 0 8px rgba(108,43,217,0.06); transform:scale(1.02); }
  100% { box-shadow: 0 0 0 0 rgba(108,43,217,0); transform:scale(1); }
}
.sound-btn.playing .icon {
  animation: pulseGlow 1.6s infinite;
  transform-origin:center;
}

/* Stop all button */
#stopAll {
  background:transparent;border:1px solid rgba(255,255,255,0.18);color:var(--white);padding:.4rem .6rem;border-radius:8px;
}

#stopAll:not(:disabled):hover {
  background: rgba(255, 255, 255, 0.18);
  transform: scale(1.1);
  box-shadow: 0 6px 18px rgba(255,255,255,0.25);
}

/* Accessibility: larger touch targets for mobile */
.sound-btn{
  min-height:56px; /* recommended touch target */
  padding:14px;
}

/* Larger label for readability on small screens */
.sound-btn .label{
  font-size:1rem;
}

/* Tablet landscape: use 2 columns for sound grid */
@media (min-width:768px) and (max-width:1024px) and (orientation: landscape){
  .sounds-grid{grid-template-columns:repeat(2,1fr)}
}

/* Slightly larger icons on bigger screens */
@media (min-width:1025px){
  .icon{width:44px;height:44px}
  .sound-btn .label{font-size:1.05rem}
}


/* Emoji emote styles */
.emoji{
  width:44px;
  height:44px;
  flex:0 0 44px;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:22px;
  background:linear-gradient(180deg,var(--liad-purple),var(--liad-purple-2));
  color: white;
  box-shadow:0 6px 18px rgba(108,43,217,0.18);
}

/* playing pulse for emoji */
.sound-btn.playing .emoji {
  animation: pulseGlow 1.6s infinite;
  transform-origin:center;
}


/* Mute state visual */
body.muted .sound-btn { opacity: 0.6; filter: grayscale(0.15); }
body.muted .sound-btn .label { opacity: 0.85; }

/* stronger playing visuals: glow + pulse + slight scale */
.sound-btn.playing {
  border: 2px solid rgba(255,255,255,0.85);
  background: rgba(255,255,255,0.12);
  transform: translateY(-3px) scale(1.01);
  box-shadow: 0 18px 40px rgba(108,43,217,0.18);
}
.sound-btn.playing .emoji {
  animation: pulseGlow 1.6s infinite;
  transform-origin: center;
  box-shadow: 0 10px 28px rgba(108,43,217,0.32);
}

/* Mute / mute-button base styles */
#muteBtn {
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  font-size: 20px;
  padding: 8px 10px;
  background: rgba(255,255,255,0.06);
  border-radius:8px;
  border: none;
  color: var(--white);
}

/* hover effect - small visual when hovering */
#muteBtn:hover {
  background: rgba(255, 255, 255, 0.12);
  transform: scale(1.06);
}

/* When muted (state after clicking) the button keeps a visible shadow (fixed until clicked again) */
#muteBtn.muted {
  background: rgba(255,255,255,0.18);
  box-shadow: 0 10px 30px rgba(255,255,255,0.18);
  transform: scale(1.08);
}

/* ensure stopAll spacing */
#stopAll { margin-left:8px; }

.botao-feedback {
    /* Cor de Fundo Roxa (ex: #673AB7 - Purple 700 do Material Design) */
    background-color: #673AB7;
    
    /* Cor do Texto Branco */
    color: white;
    
    /* Remove sublinhado padrão de links */
    text-decoration: none; 
    
    /* Espaçamento interno para dar volume ao botão */
    padding: 8px 15px; 
    
    /* Bordas arredondadas (opcional) */
    border-radius: 4px; 
    
    /* Transforma o link em um bloco inline para aceitar padding e width */
    display: inline-block; 
    
    /* Pequena margem superior para separação (opcional) */
    margin-top: 5px; 
    
    /* Faz o cursor parecer um dedo (opcional) */
    cursor: pointer;
}

/* Efeito ao passar o mouse (Hover) */
.botao-feedback:hover {
    background-color: #512DA8; /* Uma tonalidade de roxo um pouco mais escura */
}