@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;800&display=swap');

@font-face {
  font-family: 'Ames';
  src: url('../../assets/Font/Ames-Regular.otf') format('opentype');
}

:root {
  --font-family: 'Outfit', system-ui, -apple-system, sans-serif;
  --bg-gradient: radial-gradient(circle at center, #2e7d32 0%, #154228 100%);
  --bg-image: linear-gradient(rgba(12, 37, 24, 0.35), rgba(12, 37, 24, 0.55)), url('../../assets/background_tema.jpeg');
  --text-primary: #f5f7f4;
  --text-secondary: #a4beae;
  --card-width: min(13vw, 110px, 16vh);
  
  --color-gold: #cfa126;
  --color-gold-hover: #e0b63f;
  
  --card-bg: #faf5e6;
  --card-radius: 8px;
  --card-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  --card-border: 1px solid rgba(0, 0, 0, 0.15);
  
  --color-red: #d32f2f;
  --color-black: #1a1a1a;

  /* Feedback visual (match/erro) */
  --color-error: #ef5350;
  --color-success: #66bb6a;

  /* Axis Colors */
  --color-axis-teoria: #2f6fed;
  --color-axis-etica: #d6336c;
  --color-axis-tecnica: #0c8599;
  --color-axis-historia: #e8590c;
  --color-axis-politica_social: #5c40a8;
  --color-axis-sociojuridico: #2b8a3e;
  --color-axis-questao_social: #ae3ec9;
  --color-axis-marxismo: #c92a2a;

  --transition-speed: 0.2s;
  --focus-outline: 3px solid var(--color-gold);
}

/* Base Styles */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  /* Remove o flash cinza/branco padrão do navegador ao tocar/clicar em
     elementos clicáveis (cartas, slots, botões) — a seleção já tem seu
     próprio destaque visual (.word-card.selected), não precisa do
     highlight nativo por cima. */
  -webkit-tap-highlight-color: transparent;
}

body {
  font-family: var(--font-family);
  background: var(--bg-gradient);
  background-image: var(--bg-image);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  color: var(--text-primary);
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden; /* Evita rolagem vertical do body */
  touch-action: none;
  overscroll-behavior: none;
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 1.2rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(12, 37, 24, 0.85);
  backdrop-filter: blur(8px);
  z-index: 10;
  height: 48px;
  box-sizing: border-box;
}

h1 {
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  background: linear-gradient(135deg, #fff 30%, var(--color-gold) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.header-logo {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

button {
  font-family: var(--font-family);
  font-weight: 600;
  font-size: 0.85rem;
  padding: 0.35rem 0.8rem;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-primary);
  cursor: pointer;
  transition: all var(--transition-speed) ease;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

button:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.3);
}

button:focus-visible {
  outline: var(--focus-outline);
  outline-offset: 2px;
}

#new-game-btn {
  background: var(--color-gold);
  color: #0c2518;
  border-color: var(--color-gold);
}

#new-game-btn:hover {
  background: var(--color-gold-hover);
  box-shadow: 0 0 10px rgba(243, 198, 79, 0.4);
}

/* Botão flutuante "?" — selo dourado sobre a mesa de feltro, acesso ao
   conteúdo teórico das cartas. Fixo em relação à viewport (não ao header)
   para funcionar igual em mobile e desktop. Ancorado bem no canto, sem
   subir em direção às colunas do tableau, pra nunca sobrepor cartas. */
#inspect-btn {
  position: fixed;
  left: max(16px, env(safe-area-inset-left, 0px));
  bottom: max(16px, calc(env(safe-area-inset-bottom, 0px) + 16px));
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-family: 'Ames', var(--font-family);
  font-size: 1.7rem;
  font-weight: 800;
  color: #0c2518;
  background: var(--color-gold);
  border: 3px solid var(--color-gold-hover);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.55);
  z-index: 200;
  cursor: help;
  transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease;
}

#inspect-btn:hover {
  transform: scale(1.08);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.6), 0 0 14px rgba(207, 161, 38, 0.5);
}

#inspect-btn:active {
  transform: scale(0.94);
}

#inspect-btn.active {
  background: var(--color-gold-hover);
  color: #0c2518;
  box-shadow: 0 0 16px rgba(207, 161, 38, 0.7), inset 0 0 0 3px #0c2518;
}

@media (max-width: 600px) {
  #inspect-btn {
    width: 56px;
    height: 56px;
    font-size: 1.5rem;
    left: 10px;
    bottom: calc(44px + env(safe-area-inset-bottom, 0px) + 10px); /* acima da barra fixa #controls, no canto */
  }
}

body.inspect-mode-active .word-card {
  cursor: help !important;
}

body.inspect-mode-active .word-card:hover {
  box-shadow: 0 0 0 2px var(--color-gold), 0 8px 16px rgba(0, 0, 0, 0.5) !important;
}

.level-select {
  font-family: var(--font-family);
  font-weight: 600;
  font-size: 0.85rem;
  padding: 0.2rem 0.5rem;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-primary);
  cursor: pointer;
  height: 32px;
  outline: none;
  transition: all var(--transition-speed) ease;
  box-sizing: border-box;
}

.level-select:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.3);
}

.level-select:focus {
  border-color: var(--color-gold);
  box-shadow: 0 0 5px rgba(207, 161, 38, 0.5);
}

.level-select option {
  background: #0c2518;
  color: var(--text-primary);
}

#controls {
  display: flex;
  gap: 0.8rem;
  align-items: center;
}

/* Bandeirola de movimentos — pendurada logo abaixo do header, no canto
   direito, como se estivesse saindo dele. Fica por cima do tabuleiro
   (não empurra o layout) porque não corre risco de sobrepor as
   fundações/estoque nessa posição. */
.moves-ribbon {
  position: fixed;
  top: 48px; /* cola no rodapé do header (48px de altura na maioria dos breakpoints) */
  right: max(16px, env(safe-area-inset-right, 0px));
  width: 156px;
  height: 144px;
  padding-top: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  background: linear-gradient(180deg, var(--color-gold) 0%, var(--color-gold-hover) 100%);
  /* corta a base em V invertido — duas pontas embaixo, estilo flâmula */
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 80%, 0 100%);
   z-index: 150;
  font-family: var(--font-family);
}

.moves-ribbon-label {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #0c2518;
  opacity: 0.85;
}

.moves-ribbon-value {
  font-size: 1.8rem;
  font-weight: 800;
  line-height: 1;
  color: #0c2518;
}

.moves-ribbon-value.bump {
  animation: moves-ribbon-bump 0.3s ease;
}

@keyframes moves-ribbon-bump {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.35); }
  100% { transform: scale(1); }
}

#review-mode-btn.active {
  background: rgba(255, 255, 255, 0.25);
  border-color: var(--color-gold);
}

#mute-btn {
  padding: 0.35rem 0.6rem;
  font-size: 0.85rem;
  min-width: 32px;
  min-height: 32px;
  height: 32px;
}

/* Board Layout */
#game-root {
  flex: 1;
  max-width: 1000px;
  margin: 0.6rem auto;
  padding: 0.5rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  width: 100%;
  position: relative;
  overflow: hidden;
  touch-action: none;
  scrollbar-width: thin;
  scrollbar-color: rgba(207, 161, 38, 0.3) transparent;
  justify-content: flex-start;
}

#game-root[hidden], #review-root[hidden] {
  display: none;
}

/* Moves Remaining Bar */
.moves-bar {
  text-align: center;
  font-weight: 600;
  font-size: 1.1rem;
  padding: 0.8rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: var(--text-primary);
  box-shadow: 0 4px 6px rgba(0,0,0,0.15);
  letter-spacing: 0.5px;
}

/* Top Board Row (Stock, Waste, and Category Slots) */
.top-board-row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  justify-items: center;
  gap: 1rem;
  width: 100%;
  margin-bottom: 0.6rem;
  /* Espaço reservado pra plaquinha de categoria (.category-slot-tab) despontar
     sem nunca encostar no header — independe da margem/padding do #game-root
     em cada breakpoint, que é frágil de calcular. A plaquinha nunca trunca o
     nome (cresce pra cima conforme precisar), então isso reserva o pior caso:
     o nome de categoria mais longo do jogo (+ contador "X/Y" inline),
     quebrado em ~5-6 linhas. */
  padding-top: 90px;
}

/* Stock & Waste */
/* Slots vazios no topo do tabuleiro (Stock, Waste e Categoria) */
.stock-slot, .waste-slot, .category-slot {
  background: #154228; /* Verde mais claro, próximo à cor de fundo */
  border: 1px solid rgba(255, 255, 255, 0.08); /* Borda sólida discreta */
  box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.3); /* Sombra interna mais suave */
  border-radius: var(--card-radius);
  width: var(--card-width);
  max-width: var(--card-width);
  aspect-ratio: 2.5 / 3.5;
  transition: all var(--transition-speed) ease;
  position: relative;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}

.stock-slot.has-cards {
  border: none;
  background: none;
  box-shadow: none;
  cursor: pointer;
}

/* Efeito escadinha do Monte: 1-2 cartas fantasma (decorativas) deslocadas
   atrás da carta interativa do topo, para parecer uma pilha física em vez
   de uma única carta achatada. */
.stock-pile {
  position: relative;
}

.stock-pile > .stock-slot {
  position: relative;
  z-index: 10;
}

.stock-pile-ghost.word-card {
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(calc(var(--layer-index) * -3px), calc(var(--layer-index) * -3px));
  z-index: var(--layer-index);
  pointer-events: none;
  opacity: 0.85;
}

.stock-slot.empty, .waste-slot.empty, .category-slot.closed {
  cursor: pointer;
}

.stock-slot.empty:hover, .waste-slot.empty:hover, .category-slot.closed:hover {
  background: #195232;
  border-color: rgba(255, 255, 255, 0.15);
}

.category-slot-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: var(--card-width);
  max-width: var(--card-width);
  position: relative; /* ancora a plaquinha, que despontará atrás da pilha */
}

/* Plaquinha de categoria: aba que desponta atrás da pilha (como uma aba de
   fichário). Fica parcialmente coberta pela carta do topo — a carta tem
   z-index maior (ver .category-slot, position:relative + stacking natural
   por ordem no DOM) e a plaquinha só aparece visível na parte que sobra
   acima da carta (controlado por "top" negativo menor que a altura da aba). */
/* A plaquinha NUNCA trunca o nome: cresce pra cima (bottom fixo, height
   automática) o quanto for preciso pra caber o texto inteiro. O "bottom"
   fica ancorado um pouco abaixo do topo do wrapper (margin-bottom negativa)
   pra sempre sobrar uma tira por trás da carta, dando o efeito de aba presa
   — independente de quantas linhas o nome ocupar. O .top-board-row reserva
   espaço de sobra (padding-top) pro pior caso (nomes bem longos). */
.category-slot-tab {
  position: absolute;
  bottom: 100%;
  margin-bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 92%;
  height: auto;
  min-height: 20px;
  z-index: 1;
  box-sizing: border-box;
  padding: 4px 6px 10px;
  border-radius: 6px 6px 0 0;
  background: var(--color-gold);
  color: #0c2518;
  font-family: var(--font-family);
  font-weight: 700;
  font-size: 0.66rem;
  line-height: 1.15;
  text-align: center;
  word-break: normal;
  overflow-wrap: break-word;
  hyphens: auto;
  -webkit-hyphens: auto;
  box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.15);
  pointer-events: none;
}

.category-slot-tab.complete {
  background: var(--color-gold-hover);
  box-shadow: 0 0 10px rgba(207, 161, 38, 0.4);
}

.category-slot {
  position: relative;
  z-index: 2; /* fica acima da plaquinha, cobrindo a parte inferior dela */
}

/* Contador "empilhadas/total": inline junto ao nome da categoria, dentro da
   própria plaquinha — mantém a carta do topo da pilha limpa, sem poluir. */
.category-slot-tab-count {
  font-weight: 600;
  opacity: 0.75;
  font-size: 0.9em;
}

/* Evita interferência de cliques/drops nos elementos internos da pilha */
.category-slot * {
  pointer-events: none;
}

.category-slot:focus-visible {
  outline: var(--focus-outline);
  outline-offset: 2px;
}

.category-slot.valid-target {
  border-color: var(--color-gold) !important;
  background: rgba(243, 198, 79, 0.05) !important;
  box-shadow: 0 0 12px rgba(243, 198, 79, 0.2), inset 0 4px 10px rgba(0, 0, 0, 0.5) !important;
  transform: scale(1.02);
}

.category-slot.complete {
  background: rgba(12, 37, 24, 0.4);
  border: 2px solid var(--color-gold);
  box-shadow: 0 4px 15px rgba(243, 198, 79, 0.15);
}

/* Estilos para o ícone de placeholder SVG do Monte vazio (reciclar descarte) */
.slot-placeholder-icon {
  width: 28px;
  height: 28px;
  color: var(--color-gold);
  opacity: 0.45; /* Opacidade elevada para melhor visibilidade */
  transition: opacity var(--transition-speed) ease, transform var(--transition-speed) ease;
}

.stock-slot.empty:hover .slot-placeholder-icon {
  opacity: 0.45;
  transform: scale(1.06);
}

/* Ícone de formiga: div recortado pela silhueta da imagem (assets/ant.webp)
   via mask, preenchido com background-color pra herdar a cor do tema
   (substitui o antigo SVG desenhado à mão). Tamanho grande e compartilhado
   entre a marca d'água da carta-título e o placeholder do spot fechado, pra
   ficarem do mesmo tamanho (ambos usam --card-width como base). */
.ant-icon-mask {
  background-color: var(--color-gold);
  -webkit-mask-image: url('../../assets/ant.webp');
  mask-image: url('../../assets/ant.webp');
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

.card-ant-icon,
.category-slot-ant-icon {
  width: 82%;
  height: 82%;
}

/* Placeholder grande no spot de categoria fechado */
.category-slot-ant-icon {
  opacity: 0.55;
  transition: opacity var(--transition-speed) ease, transform var(--transition-speed) ease;
}

.category-slot.closed:hover .category-slot-ant-icon {
  opacity: 0.65;
  transform: scale(1.06);
}

/* Sobrescritas para cartas estáticas depositadas nos slots */
.word-card.static-card {
  cursor: default;
  transition: none;
}

.word-card.static-card:hover {
  transform: none;
  box-shadow: var(--card-shadow);
}

/* Tableau empilhado por coluna — cada coluna é uma pilha (carta-título
   enterrada na profundidade configurada; só o topo é jogável). */
.tableau-columns {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  justify-items: center;
  gap: 1rem;
  width: 100%;
  /* A pilha de uma categoria (título + até 7 cartas de palavra, ver
     cardsPerCategory em levels.json) empilha em escadinha vertical com 8px
     por carta (.category-slot .stack-card-wrapper), transbordando pra baixo
     do próprio .category-slot conforme cresce (até 7*8px=56px cheia). Essa
     margem garante que a fileira do tableau não fique coberta por baixo. */
  margin-top: 64px;
}

.tableau-column {
  position: relative;
  width: var(--card-width);
  max-width: var(--card-width);
  /* altura da pilha responsiva proporcionalmente */
  min-height: calc(var(--card-width) * 1.4 + 80px);
  border-radius: var(--card-radius);
  transition: box-shadow var(--transition-speed) ease;
}

.tableau-column.valid-target {
  box-shadow: 0 0 0 3px var(--color-gold), 0 0 12px rgba(243, 198, 79, 0.3);
}

/* Fanning padrão (vertical) */
:root {
  --fanning-x: 0px;
  --fanning-y: 42px;
}

@media (max-width: 600px) {
  :root {
    --fanning-x: 0px;
    --fanning-y: 30px;
  }
}

/* Fanning horizontal na orientação paisagem com pouca altura vertical */
@media (max-height: 520px) and (orientation: landscape) {
  :root {
    --fanning-x: 18px;
    --fanning-y: 0px;
  }
}

.stack-card-wrapper {
  position: absolute;
  left: calc(var(--card-index) * var(--fanning-x));
  top: calc(var(--card-index) * var(--fanning-y));
  width: 100%;
}

/* Os slots de categoria sempre usam fanning vertical de 8px */
.category-slot .stack-card-wrapper {
  left: 0 !important;
  top: calc(var(--card-index) * 8px) !important;
}

.stack-card-wrapper .word-card {
  width: 100%;
}

/* Carta virada para baixo: mostra o verso, não é jogável nem focável */
.word-card.face-down {
  background-image: url('../../assets/verso_v2.webp');
  background-size: cover;
  background-position: center;
  cursor: default;
}

.word-card.face-down:hover {
  transform: none;
  box-shadow: var(--card-shadow);
}

/* Carta-título: precisa ser desenterrada e jogada para abrir a categoria */
.word-card.title-card {
  border: 3.5px solid var(--color-gold);
}

/* Formiga grande atrás do texto, como marca d'água */
.word-card.title-card .card-ant-icon {
  position: absolute;
  inset: 0;
  margin: auto;
  opacity: 0.35;
  z-index: 0;
  pointer-events: none;
}

/* z-index só é necessário pra ficar acima da marca d'água (que só existe
   quando exposta, não-coberta) — em .covered-under isso vazaria por cima da
   carta empilhada acima dela, que depende só da ordem no DOM pra cobrir a
   carta de baixo. */
.word-card.title-card:not(.covered-under) .word-card-text {
  position: relative;
  z-index: 1;
}

/* Word Cards — proporção de carta de baralho real (2.5:3.5) */
.word-card {
  position: relative;
  background: var(--card-bg);
  color: var(--color-black);
  border: var(--card-border);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  cursor: grab;
  user-select: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease, outline 0.1s ease;
  width: var(--card-width);
  max-width: var(--card-width);
  aspect-ratio: 2.5 / 3.5;
  justify-content: center;
}

/* Oculta a carta em sua posição original durante o arraste */
.word-card.dragging-placeholder {
  opacity: 0 !important;
}

/* Garante arraste fluído por toque sem atraso de transição */
.dragging-clone {
  transition: none !important;
  pointer-events: none !important;
  transform: scale(1.05) !important;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.5) !important;
  z-index: 9999 !important;
}

/* Quando a carta está sob outra na pilha, mostra apenas o texto no topo exposto */
.word-card.covered-under {
  justify-content: flex-start !important;
  align-items: stretch !important;
}

.word-card.covered-under img.card-photo-thumb,
.word-card.covered-under .card-ant-icon {
  display: none !important;
}

.word-card.covered-under .word-card-text {
  display: block !important;
  padding: 3px 8px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  text-align: left !important;
  width: 100% !important;
  line-height: 1.1 !important;
  margin-top: 1px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  box-sizing: border-box !important;
  color: #000000 !important;
}

/* Animação de "virar" no primeiro carregamento do nível: mostra o verso
   (assets/verso.webp) e vira para revelar a palavra. Só toca uma vez por
   nível novo (playDealAnimation em level-board.js) — não replay a cada
   clique, já que o tableau inteiro é re-renderizado a cada interação. */
.word-card.dealing {
  animation: card-deal-flip 0.5s ease-out both;
}

@keyframes card-deal-flip {
  0% {
    transform: rotateY(-90deg);
    background-image: url('../../assets/verso_v2.webp');
    background-size: cover;
    background-position: center;
  }
  49.9% {
    background-image: url('../../assets/verso_v2.webp');
    background-size: cover;
    background-position: center;
  }
  50% {
    transform: rotateY(0deg);
    background-image: none;
  }
  100% {
    transform: rotateY(0deg);
    background-image: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .word-card.dealing {
    animation: none;
  }
}

.word-card:active {
  cursor: grabbing;
}

@media (hover: hover) {
  .word-card:hover {
    transform: translateY(-4px) scale(1.01);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
  }
}

.word-card:focus-visible {
  outline: var(--focus-outline);
  outline-offset: 1px;
}

.word-card.selected {
  transform: translateY(-8px);
  box-shadow: 0 10px 20px rgba(243, 198, 79, 0.4);
  outline: var(--focus-outline);
  border-color: var(--color-gold);
}

.word-card-text {
  font-weight: 700;
  font-size: clamp(0.75rem, 2.5vw, 0.95rem);
  text-align: center;
  padding: 0.35rem 0.2rem !important; /* Reduzido para evitar corte de texto */
  word-break: normal;
  overflow-wrap: break-word;
  hyphens: auto;
  -webkit-hyphens: auto;
  line-height: 1.15;
  /* grid (não flex) para centralizar: um filho de flex-container encolhe até
     seu max-content por padrão (min-width:auto), o que faz palavras longas
     vazarem da carta em vez de quebrar linha. grid não tem esse problema. */
  display: grid;
  place-items: center;
  flex: 1;
  width: 100%;
  box-sizing: border-box;
}

.word-card img.card-photo-thumb {
  width: 100%;
  height: 45% !important; /* Altura responsiva baseada em porcentagem, não fixa em 90px! */
  min-height: 45% !important;
  object-fit: cover;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

/* Modal Popup Styles */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(5px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-speed) ease;
}

.modal-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

.modal-container {
  background: var(--card-bg);
  color: var(--color-black);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  width: 90%;
  max-width: 500px;
  padding: 2.2rem;
  position: relative;
  transform: scale(0.9);
  transition: transform var(--transition-speed) ease;
  border: 4px solid var(--color-gold);
}

.modal-overlay.open .modal-container {
  transform: scale(1);
}

.modal-close-btn {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: transparent;
  border: none;
  font-size: 1.8rem;
  color: #888;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}

.modal-close-btn:hover {
  color: #333;
}

.modal-title {
  font-size: 1.6rem;
  font-weight: 800;
  margin-bottom: 0.6rem;
  color: #0c2518;
  border-bottom: 2px solid rgba(12, 37, 24, 0.1);
  padding-bottom: 0.5rem;
}

.modal-subtitle {
  font-size: 0.85rem;
  color: #d6336c;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 1rem;
}

.modal-body {
  font-size: 1.1rem;
  line-height: 1.6;
  color: #333;
  margin-bottom: 1.8rem;
}

.modal-photo {
  width: 100%;
  max-height: 250px;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 0.5rem;
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

.modal-photo-credit {
  font-size: 0.75rem;
  color: #888;
  margin-bottom: 1.2rem;
  line-height: 1.2;
}

.modal-action-btn {
  width: 100%;
  background: #0c2518;
  color: var(--text-primary);
  border: none;
  padding: 0.9rem;
  font-size: 1.05rem;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition-speed) ease;
}

.modal-action-btn:hover {
  background: #17422c;
}

/* Victory / Defeat Overlays (as beautiful centered modals) */
.game-status-overlay {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1001;
  text-align: center;
  padding: 1.5rem;
  background: rgba(12, 37, 24, 0.98);
  border: 4px solid var(--color-gold);
  border-radius: 12px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8);
  max-width: 450px;
  width: 90%;
  width: min(90%, 450px);
  display: none;
  animation: fadeIn var(--transition-speed) ease forwards;
}

@media (max-height: 740px) {
  .game-status-overlay {
    transform: translate(-50%, -50%) scale(0.85);
  }
}
@media (max-height: 600px) {
  .game-status-overlay {
    transform: translate(-50%, -50%) scale(0.75);
  }
}
@media (max-height: 500px) {
  .game-status-overlay {
    transform: translate(-50%, -50%) scale(0.65);
  }
}

.game-status-overlay.show {
  display: block;
}

.game-status-title {
  font-size: 2.2rem;
  font-weight: 800;
  margin-bottom: 1.2rem;
  color: var(--color-gold);
  letter-spacing: 0.5px;
}

.game-status-message {
  font-size: 1.1rem;
  line-height: 1.6;
  margin-bottom: 1.8rem;
  color: var(--text-primary);
}

#overlay-action-btn {
  width: 100%;
  background: var(--color-gold);
  color: #0c2518;
  border: 1px solid var(--color-gold);
  padding: 0.9rem;
  font-size: 1.1rem;
  border-radius: 6px;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--transition-speed) ease;
}

#overlay-action-btn:hover {
  background: var(--color-gold-hover);
  box-shadow: 0 0 15px rgba(243, 198, 79, 0.5);
}

.game-status-actions {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

#overlay-secondary-btn {
  width: 100%;
  background: transparent;
  color: var(--text-primary);
  border: 1px solid rgba(255, 255, 255, 0.25);
  padding: 0.8rem;
  font-size: 1rem;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-speed) ease;
}

#overlay-secondary-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.4);
}

@keyframes fadeIn {
  from { opacity: 0; transform: translate(-50%, -45%); }
  to { opacity: 1; transform: translate(-50%, -50%); }
}

/* Ranking (dentro do game-status-overlay, tema escuro) */
.overlay-ranking {
  text-align: left;
  margin-bottom: 1.4rem;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 0.9rem 1rem;
}

.overlay-ranking-title {
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-gold);
  margin-bottom: 0.6rem;
}

.ranking-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  max-height: 220px;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.ranking-list::-webkit-scrollbar {
  display: none;
}

.ranking-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.9rem;
  color: var(--text-primary);
  padding: 0.25rem 0.4rem;
  border-radius: 4px;
}

.ranking-row--you {
  background: rgba(243, 198, 79, 0.15);
  font-weight: 700;
}

.ranking-row--empty {
  color: rgba(255, 255, 255, 0.5);
  font-style: italic;
}

.ranking-pos {
  width: 2rem;
  flex-shrink: 0;
  color: var(--color-gold);
  font-weight: 800;
}

.ranking-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ranking-time {
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

.overlay-ranking-you {
  margin-top: 0.7rem;
  padding-top: 0.6rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 0.9rem;
  color: var(--text-primary);
}

/* Input de nome no modal (tema claro do .modal-container) */
.leaderboard-name-input {
  width: 100%;
  box-sizing: border-box;
  padding: 0.65rem 0.8rem;
  margin-top: 0.75rem;
  margin-bottom: 1rem;
  border-radius: 6px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  background: #fff;
  color: #1a1a1a;
  font-size: 1rem;
  font-family: inherit;
}

.leaderboard-name-input:focus {
  outline: var(--focus-outline);
  outline-offset: 1px;
}

/* Review Mode */
#review-root {
  max-width: 1000px;
  margin: 1.5rem auto;
  padding: 0 1rem;
  width: 100%;
}

.review-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.8rem;
}

.review-title {
  font-size: 1.8rem;
  font-weight: 800;
  background: linear-gradient(135deg, #fff 30%, var(--color-gold) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.back-btn {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
}

/* Review Tabs */
.tabs {
  display: flex;
  gap: 0.6rem;
  margin-bottom: 2rem;
  overflow-x: auto;
  padding-bottom: 0.5rem;
  scrollbar-width: none; /* Firefox */
}

.tabs::-webkit-scrollbar {
  display: none; /* Safari and Chrome */
}

.tab-btn {
  white-space: nowrap;
  font-weight: 600;
  border-left-width: 4px !important;
}

.tab-btn.axis-teoria { border-left-color: var(--color-axis-teoria); }
.tab-btn.axis-etica { border-left-color: var(--color-axis-etica); }
.tab-btn.axis-tecnica { border-left-color: var(--color-axis-tecnica); }
.tab-btn.axis-historia { border-left-color: var(--color-axis-historia); }
.tab-btn.axis-politica_social { border-left-color: var(--color-axis-politica_social); }
.tab-btn.axis-sociojuridico { border-left-color: var(--color-axis-sociojuridico); }
.tab-btn.axis-questao_social { border-left-color: var(--color-axis-questao_social); }
.tab-btn.axis-marxismo { border-left-color: var(--color-axis-marxismo); }

.tab-btn.active {
  background: var(--text-primary);
  color: #0c2518;
  border-color: var(--text-primary);
}

.tab-btn.active.axis-teoria { background: var(--color-axis-teoria); color: #fff; border-color: var(--color-axis-teoria); }
.tab-btn.active.axis-etica { background: var(--color-axis-etica); color: #fff; border-color: var(--color-axis-etica); }
.tab-btn.active.axis-tecnica { background: var(--color-axis-tecnica); color: #fff; border-color: var(--color-axis-tecnica); }
.tab-btn.active.axis-historia { background: var(--color-axis-historia); color: #fff; border-color: var(--color-axis-historia); }
.tab-btn.active.axis-politica_social { background: var(--color-axis-politica_social); color: #fff; border-color: var(--color-axis-politica_social); }
.tab-btn.active.axis-sociojuridico { background: var(--color-axis-sociojuridico); color: #fff; border-color: var(--color-axis-sociojuridico); }
.tab-btn.active.axis-questao_social { background: var(--color-axis-questao_social); color: #fff; border-color: var(--color-axis-questao_social); }
.tab-btn.active.axis-marxismo { background: var(--color-axis-marxismo); color: #fff; border-color: var(--color-axis-marxismo); }

/* Category Cards Grid */
.review-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1.5rem;
  margin-bottom: 3rem;
}

/* Category Card */
.category-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  transition: all var(--transition-speed) ease;
  border-top-width: 5px;
}

.category-card:hover {
  background: rgba(255, 255, 255, 0.06);
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0,0,0,0.2);
}

/* Axis-specific top borders */
.category-card.axis-teoria { border-top-color: var(--color-axis-teoria); }
.category-card.axis-etica { border-top-color: var(--color-axis-etica); }
.category-card.axis-tecnica { border-top-color: var(--color-axis-tecnica); }
.category-card.axis-historia { border-top-color: var(--color-axis-historia); }
.category-card.axis-politica_social { border-top-color: var(--color-axis-politica_social); }
.category-card.axis-sociojuridico { border-top-color: var(--color-axis-sociojuridico); }
.category-card.axis-questao_social { border-top-color: var(--color-axis-questao_social); }
.category-card.axis-marxismo { border-top-color: var(--color-axis-marxismo); }

.category-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.category-card-id {
  font-weight: 800;
  letter-spacing: 0.5px;
  background: rgba(255, 255, 255, 0.1);
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
}

.category-card-axis-badge {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 0.2rem 0.6rem;
  border-radius: 20px;
  font-size: 0.75rem;
}

.category-card.axis-teoria .category-card-axis-badge { background: rgba(47, 111, 237, 0.2); color: #74a2ff; }
.category-card.axis-etica .category-card-axis-badge { background: rgba(214, 51, 108, 0.2); color: #ffa3c4; }
.category-card.axis-tecnica .category-card-axis-badge { background: rgba(12, 133, 153, 0.2); color: #66d9e8; }
.category-card.axis-historia .category-card-axis-badge { background: rgba(232, 89, 12, 0.2); color: #ffd8a8; }
.category-card.axis-politica_social .category-card-axis-badge { background: rgba(134, 46, 156, 0.2); color: #eebefa; }
.category-card.axis-sociojuridico .category-card-axis-badge { background: rgba(43, 138, 62, 0.2); color: #8ce99a; }
.category-card.axis-questao_social .category-card-axis-badge { background: rgba(174, 62, 201, 0.2); color: #eebefa; }
.category-card.axis-marxismo .category-card-axis-badge { background: rgba(201, 42, 42, 0.2); color: #ffa8a8; }

.category-card-axis-badge.locked {
  background: rgba(255,255,255,0.08);
  color: #888;
}

.category-card-title {
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1.3;
  color: var(--text-primary);
}

.category-card-microtext {
  font-size: 0.95rem;
  line-height: 1.5;
  color: #c1d3c8;
}

.category-card-words-title {
  font-size: 0.8rem;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 0.5rem;
  letter-spacing: 0.5px;
}

.word-pills-container {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.word-pill {
  font-size: 0.85rem;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-primary);
  padding: 0.3rem 0.7rem;
  border-radius: 20px;
  font-weight: 600;
  border: 1px solid rgba(255, 255, 255, 0.05);
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s ease, transform 0.1s ease;
}

.word-pill:hover {
  background: rgba(255, 255, 255, 0.18);
  transform: translateY(-1px);
}

.word-pill:focus-visible {
  outline: var(--focus-outline);
  outline-offset: 2px;
}

.word-pill.locked {
  background: rgba(0,0,0,0.15);
  color: rgba(255,255,255,0.15);
  border: 1px dashed rgba(255,255,255,0.1);
  cursor: default;
}

/* Category Card Locked State */
.category-card.locked {
  opacity: 0.55;
  background: rgba(0, 0, 0, 0.25);
  border-top-color: #555 !important;
}

.category-card.locked .category-card-title {
  color: #777;
}

.category-card-microtext.locked {
  font-size: 0.9rem;
  font-style: italic;
  color: #888;
  line-height: 1.4;
}

/* Gallery of Authors */
.category-card-gallery-title {
  font-size: 0.8rem;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 0.6rem;
  letter-spacing: 0.5px;
}

.category-card-gallery {
  display: flex;
  gap: 0.8rem;
  flex-wrap: wrap;
}

.gallery-item {
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.05);
  padding: 0.25rem 0.6rem 0.25rem 0.25rem;
  border-radius: 30px;
  border: 1px solid rgba(255,255,255,0.05);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-primary);
}

.gallery-item img {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
  margin-right: 0.4rem;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  header {
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
    text-align: center;
  }

  .top-board-row {
    grid-template-columns: repeat(3, 1fr);
    row-gap: 90px; /* linha 2 pode ter plaquinha de categoria (grid quebra em 2 linhas com 3 colunas) — pior caso de nome longo */
  }

  .review-grid {
    grid-template-columns: 1fr;
  }
}

/* Abaixo de 600px o offset de fanning das cartas empilhadas cai para
   22px (ver level-board.js) — reduzir min-height junto */
@media (max-width: 600px) {
  :root {
    --card-width: min(23vw, calc((100vw - 30px) / 4), 14.5vh);
  }

  header {
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 0 1rem !important;
    height: 48px !important;
    gap: 0 !important;
  }

  #game-root {
    padding: 0.4rem 0.5rem;
    margin: 0;
    gap: 0.5rem;
    height: calc(100vh - 48px - 44px);
    box-sizing: border-box;
  }

  .moves-ribbon {
    width: 80px;
    height: 90px;
    padding-top: 9px;
    gap: 3px;
  }

  .moves-ribbon-label {
    font-size: 0.7rem;
  }

  .moves-ribbon-value {
    font-size: 1.6rem;
  }

  #controls {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(12, 37, 24, 0.95);
    backdrop-filter: blur(8px);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding: 0.4rem 0.6rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 100;
    height: 44px;
    box-sizing: border-box;
    gap: 0.4rem;
  }

  #controls button, #controls select {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    height: 28px;
    border-radius: 4px;
  }

  .top-board-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: auto auto;
    row-gap: 68px; /* folga extra pra plaquinha das categorias (linha 2) não encostar no Monte/Descarte (linha 1) — pior caso de nome longo, quebrado em várias linhas */
    column-gap: 0.5rem;
    margin-bottom: 0.6rem;
    padding-top: 0; /* linha 1 (Monte/Descarte) não tem plaquinha, não precisa de folga do header aqui */
  }

  .top-board-row > :nth-child(1) { grid-column: 1 / 2; grid-row: 1; } /* Stock */
  .top-board-row > :nth-child(2) { grid-column: 2 / 3; grid-row: 1; } /* Waste */

  .top-board-row > :nth-child(3) { grid-column: 1 / 2; grid-row: 2; } /* Cat 1 */
  .top-board-row > :nth-child(4) { grid-column: 2 / 3; grid-row: 2; } /* Cat 2 */
  .top-board-row > :nth-child(5) { grid-column: 3 / 4; grid-row: 2; } /* Cat 3 */
  .top-board-row > :nth-child(6) { grid-column: 4 / 5; grid-row: 2; } /* Cat 4 */

  .category-slot-tab {
    font-size: 0.56rem;
    padding: 3px 5px 8px;
  }

  .tableau-columns {
    gap: 0.5rem;
    margin-top: 60px; /* mesma folga da escadinha de categoria cheia (ver regra base) */
  }

  .tableau-column {
    min-height: calc(var(--card-width) * 1.4 + 90px); /* 3 offsets de 30px no mobile */
  }

  .word-card-text {
    font-size: clamp(0.68rem, 2.8vw, 0.85rem) !important;
    padding: 0.2rem 0.15rem !important;
  }

  .word-card.title-card .word-card-text {
    font-size: clamp(0.62rem, 2.4vw, 0.75rem) !important;
    line-height: 1.1;
    padding: 0.15rem 0.1rem !important;
  }
}

/* Orientação Paisagem ou telas com pouca altura vertical: muda a escadinha para horizontal */
@media (max-height: 520px) and (orientation: landscape) {
  .tableau-columns {
    align-items: flex-start !important;
  }

  .tableau-column {
    min-height: calc(var(--card-width) * 1.4 + 20px) !important;
    min-width: calc(var(--card-width) + 90px) !important;
    max-width: none !important;
  }

  /* Ajusta o posicionamento do texto sob fanning horizontal */
  .word-card.covered-under {
    justify-content: center !important;
    align-items: flex-start !important;
  }

  .word-card.covered-under .word-card-text {
    text-align: left !important;
    padding-left: 6px !important;
    margin-top: 0 !important;
  }
}

/* Media query para telas PC com altura vertical reduzida (ex: laptops) */
@media (min-width: 601px) and (max-height: 850px) {
  :root {
    --card-width: min(13vw, 95px, 14vh);
    --fanning-y: clamp(24px, 3.8vh, 32px);
  }
  
  header {
    height: 40px !important;
    padding: 0.3rem 1.2rem !important;
  }

  header h1 {
    font-size: 1.05rem !important;
  }

  .moves-ribbon {
    top: 40px;
  }

  header button, header .level-select {
    height: 28px !important;
    font-size: 0.8rem !important;
    padding: 0.25rem 0.6rem !important;
  }
  
  .category-slot-tab {
    font-size: 0.62rem;
  }

  #game-root {
    margin: 0.2rem auto !important;
    padding: 0.2rem 1rem !important;
    gap: 0.4rem !important;
  }

  .top-board-row {
    margin-bottom: 0.6rem !important;
    gap: 0.5rem !important;
    padding-top: 72px !important; /* espaço reservado pro pior caso: nome de categoria longo quebrado em várias linhas, independe da margem do header */
  }
  
  .tableau-columns {
    margin-top: 60px !important; /* mesma folga da escadinha de categoria cheia (ver regra base) */
    gap: 0.5rem !important;
  }
  
  .tableau-column {
    min-height: calc(var(--card-width) * 1.4 + 90px) !important;
  }
}

/* ===== FEEDBACK VISUAL: ERRO (movimento inválido) ===== */
@keyframes card-shake {
  0%, 100% { transform: translateX(0); }
  15% { transform: translateX(-6px) rotate(-1deg); }
  30% { transform: translateX(5px) rotate(1deg); }
  45% { transform: translateX(-4px); }
  60% { transform: translateX(3px); }
  75% { transform: translateX(-2px); }
}

.word-card.move-rejected {
  animation: card-shake 0.45s ease-out;
  box-shadow: 0 0 0 3px var(--color-error), 0 4px 12px rgba(239, 83, 80, 0.35) !important;
}

/* Glow vermelho sutil no slot-alvo errado */
.category-slot.reject-flash {
  animation: slot-reject-pulse 0.5s ease-out;
}

@keyframes slot-reject-pulse {
  0% { box-shadow: 0 0 0 0 rgba(239, 83, 80, 0.5); }
  50% { box-shadow: 0 0 14px 4px rgba(239, 83, 80, 0.3); }
  100% { box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.3); }
}

/* ===== FEEDBACK VISUAL: ACERTO (movimento válido) ===== */
@keyframes card-place-glow {
  0% { box-shadow: 0 0 0 0 rgba(102, 187, 106, 0.6); }
  50% { box-shadow: 0 0 18px 6px rgba(102, 187, 106, 0.3); }
  100% { box-shadow: var(--card-shadow); }
}

.word-card.move-accepted {
  animation: card-place-glow 0.5s ease-out;
}

/* Pulso verde no slot ao receber carta correta */
.category-slot.accept-flash {
  animation: slot-accept-pulse 0.5s ease-out;
}

@keyframes slot-accept-pulse {
  0% { box-shadow: 0 0 0 0 rgba(102, 187, 106, 0.6); }
  50% { box-shadow: 0 0 16px 5px rgba(102, 187, 106, 0.25); }
  100% { box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.3); }
}

@media (prefers-reduced-motion: reduce) {
  .word-card.move-rejected,
  .word-card.move-accepted,
  .category-slot.reject-flash,
  .category-slot.accept-flash {
    animation: none;
  }
}

/* Speech Bubble para o mascote (Formiga) */
.mascot-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 0.5rem;
}

.speech-bubble {
  position: relative;
  background: #f5f7f4;
  color: #123821;
  padding: 1.2rem 1.5rem;
  border-radius: 16px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.3);
  margin-bottom: 0.8rem;
  text-align: center;
  font-family: 'Ames', cursive;
}

.speech-bubble::after {
  content: '';
  position: absolute;
  bottom: -12px;
  left: 50%;
  transform: translateX(-50%);
  border-width: 12px 12px 0;
  border-style: solid;
  border-color: #f5f7f4 transparent transparent transparent;
}

.speech-bubble h2 {
  margin: 0 0 0.5rem 0;
  font-size: 1.35rem;
  color: #123821;
  background: none;
  -webkit-text-fill-color: initial;
}

.speech-bubble p {
  margin: 0;
  font-size: 1.15rem;
  font-weight: normal;
  line-height: 1.4;
}

.mascot-img {
  width: 200px;
  display: block;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,0.4));
  margin: -45px auto -35px;
  position: relative;
  z-index: 5;
}