:root {
  --ink: #20124d;
  --ink-soft: #493983;
  --paper: #fffdf6;
  --paper-2: rgba(255, 253, 246, 0.94);
  --sun: #ffd74a;
  --pink: #ff5d8f;
  --blue: #3a86ff;
  --green: #4cc986;
  --mint: #c6f7df;
  --violet: #8d5cf6;
  --danger: #d9485a;
  --success: #218f68;
  --shadow: rgba(31, 18, 77, 0.22);
  --line: #20124d;
  --radius: 28px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: ui-rounded, "Nunito", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background:
    radial-gradient(circle at 8% 12%, rgba(255, 215, 74, 0.85) 0 70px, transparent 72px),
    radial-gradient(circle at 92% 16%, rgba(255, 93, 143, 0.42) 0 92px, transparent 94px),
    radial-gradient(circle at 16% 88%, rgba(76, 201, 134, 0.5) 0 115px, transparent 118px),
    linear-gradient(135deg, #fff4c8 0%, #eafaff 45%, #efe7ff 100%);
  overflow-x: hidden;
}

a { color: inherit; }

.page {
  width: min(1180px, calc(100% - 28px));
  margin: 0 auto;
}

.topbar {
  position: sticky;
  top: 12px;
  z-index: 50;
  margin: 14px auto 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 14px;
  border: 4px solid var(--line);
  border-radius: 22px;
  background: rgba(255, 253, 246, 0.9);
  backdrop-filter: blur(12px);
  box-shadow: 0 8px 0 var(--shadow);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-weight: 950;
  letter-spacing: -0.7px;
  font-size: clamp(1.05rem, 2.6vw, 1.5rem);
}

.brand-mark {
  width: 48px;
  height: 48px;
  border: 4px solid var(--line);
  border-radius: 16px;
  background:
    radial-gradient(circle at 35% 31%, #fff 0 7px, transparent 8px),
    radial-gradient(circle at 64% 31%, #fff 0 7px, transparent 8px),
    linear-gradient(135deg, var(--green) 0 48%, var(--sun) 49% 100%);
  box-shadow: 0 4px 0 var(--shadow);
  position: relative;
  flex: 0 0 auto;
  overflow: hidden;
}

.brand-mark::before,
.brand-mark::after {
  content: "";
  position: absolute;
  top: 12px;
  width: 6px;
  height: 6px;
  background: var(--line);
  border-radius: 50%;
  z-index: 2;
}
.brand-mark::before { left: 14px; }
.brand-mark::after { right: 11px; }

.brand-mark i {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 24px;
  width: 14px;
  height: 12px;
  border: 3px solid var(--line);
  background: var(--sun);
  clip-path: polygon(50% 100%, 0 0, 100% 0);
}

.nav, .footer-links, .actions, .cookie-actions, .card-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.nav { justify-content: flex-end; }

.nav a, .footer-links a {
  text-decoration: none;
  font-weight: 850;
  padding: 9px 12px;
  border-radius: 999px;
}

.nav a:hover { background: #fff0b7; }

.nav .pill {
  background: var(--sun);
  border: 3px solid var(--line);
  box-shadow: 0 4px 0 var(--shadow);
}

main { padding-bottom: 10px; }

.hero {
  position: relative;
  padding: clamp(34px, 6vw, 68px) 0 28px;
}

.game-hero {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(22px, 5vw, 54px);
  align-items: start;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--mint);
  border: 3px solid var(--line);
  border-radius: 999px;
  padding: 8px 13px;
  font-weight: 950;
  box-shadow: 0 5px 0 var(--shadow);
  margin-bottom: 18px;
}

.spark {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  background: var(--sun);
  border: 3px solid var(--line);
  border-radius: 50%;
  font-size: 0.8rem;
}

h1 {
  margin: 0;
  font-size: clamp(3rem, 8vw, 6rem);
  line-height: 0.88;
  letter-spacing: -4px;
  text-wrap: balance;
}

.page-hero h1 {
  max-width: 940px;
}

.joy {
  color: var(--pink);
  text-shadow: 5px 5px 0 var(--sun);
}

.hero-text, .intro-text {
  margin: 22px 0 0;
  max-width: 720px;
  font-size: clamp(1.05rem, 2vw, 1.22rem);
  line-height: 1.6;
  color: var(--ink-soft);
  font-weight: 650;
}

.btn, .main-button, .mini-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 12px 18px;
  border: 4px solid var(--line);
  border-radius: 16px;
  text-decoration: none;
  font: inherit;
  font-weight: 950;
  color: var(--ink);
  box-shadow: 0 7px 0 var(--shadow);
  background: var(--sun);
  cursor: pointer;
  transition: transform 0.1s ease, box-shadow 0.1s ease, filter 0.1s ease;
}

.btn.secondary, .mini-btn.ghost { background: var(--paper); }

.btn:hover, .main-button:hover, .mini-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 9px 0 var(--shadow);
}

.btn:active, .main-button:active, .mini-btn:active {
  transform: translateY(5px);
  box-shadow: 0 2px 0 var(--shadow);
}

.actions { margin-top: 22px; }

.game-panel,
.content-card,
.feature,
.notice-box,
.games-note {
  position: relative;
  border: 5px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper-2);
  box-shadow: 0 11px 0 var(--shadow);
  padding: clamp(18px, 3vw, 30px);
  overflow: hidden;
}

.game-panel::before,
.content-card.decorated::before,
.games-note::before {
  content: "";
  position: absolute;
  inset: auto -20px -58px -20px;
  height: 144px;
  opacity: 0.38;
  background:
    radial-gradient(circle at 18% 40%, var(--green) 0 36px, transparent 38px),
    radial-gradient(circle at 46% 60%, var(--blue) 0 42px, transparent 44px),
    radial-gradient(circle at 78% 50%, var(--sun) 0 34px, transparent 36px);
}

.game-panel > *, .content-card.decorated > *, .games-note > * {
  position: relative;
  z-index: 2;
}

.game-panel {
  background:
    radial-gradient(circle at 18% 86%, rgba(76, 201, 134, 0.42) 0 54px, transparent 56px),
    radial-gradient(circle at 78% 90%, rgba(255, 215, 74, 0.35) 0 64px, transparent 66px),
    linear-gradient(to bottom, #bdefff 0 50%, #95de99 51% 100%);
}

.scoreboard {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 0 16px;
}

.score-card {
  min-width: 112px;
  background: rgba(255,253,246,0.94);
  border: 4px solid var(--line);
  border-radius: 18px;
  text-align: center;
  padding: 10px 14px;
  box-shadow: 0 6px 0 var(--shadow);
  font-weight: 950;
}

.score-card span {
  display: block;
  font-size: 0.78rem;
  text-transform: uppercase;
  color: var(--ink-soft);
  letter-spacing: 0.03em;
}

.score-card strong { font-size: 1.3rem; }

.message {
  min-height: 54px;
  margin: 0 auto 16px;
  padding: 13px 16px;
  background: rgba(255,253,246,0.96);
  border: 4px solid var(--line);
  border-radius: 18px;
  font-weight: 950;
  text-align: center;
  box-shadow: 0 5px 0 var(--shadow);
}

.message.success { color: var(--success); }
.message.error { color: var(--danger); }

.parrot-stage {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.parrot-button {
  appearance: none;
  border: 4px solid var(--line);
  border-radius: 24px;
  background: rgba(255,253,246,0.94);
  min-height: 258px;
  cursor: pointer;
  box-shadow: 0 8px 0 var(--shadow);
  padding: 12px 8px 10px;
  position: relative;
  overflow: hidden;
  transition: transform 0.08s ease, box-shadow 0.08s ease, filter 0.08s ease;
}

.parrot-button::before {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 58px;
  background: rgba(255, 215, 74, 0.35);
  border-top: 4px solid rgba(32, 18, 77, 0.18);
}

.parrot-button:hover { transform: translateY(-2px); }

.parrot-button.active,
.parrot-button:active {
  transform: translateY(7px);
  box-shadow: 0 1px 0 var(--shadow);
  filter: brightness(1.06) saturate(1.14);
}

.parrot-button.disabled { opacity: 0.9; cursor: default; }

.key-label, .arrow-label {
  position: absolute;
  top: 10px;
  font-weight: 950;
  z-index: 5;
  border-radius: 999px;
  border: 3px solid var(--line);
  line-height: 1;
}

.key-label {
  left: 10px;
  color: #fff;
  background: var(--line);
  padding: 6px 10px;
}

.arrow-label {
  right: 10px;
  color: var(--ink);
  background: var(--sun);
  padding: 5px 10px;
}

.parrot-canvas {
  display: block;
  width: min(100%, 220px);
  height: auto;
  margin: 12px auto 0;
  image-rendering: auto;
  position: relative;
  z-index: 2;
}

.controls {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.mini-note {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
  background: rgba(255,253,246,0.84);
  border-radius: 18px;
  border: 3px solid rgba(32, 18, 77, 0.16);
  padding: 12px 16px;
  font-weight: 700;
  color: var(--ink-soft);
}

.family-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  border: 3px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  box-shadow: 0 5px 0 var(--shadow);
  padding: 8px 12px;
  font-weight: 950;
  text-decoration: none;
}

.section { margin: 38px 0; }

.section-title {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}

.section-title h2,
.content-card h2,
.games-note h2 {
  margin: 0;
  font-size: clamp(2rem, 5vw, 3.8rem);
  letter-spacing: -2px;
  line-height: 0.98;
}

.section-title p {
  margin: 0;
  max-width: 580px;
  color: var(--ink-soft);
  font-weight: 650;
  line-height: 1.55;
}

.features,
.about-grid {
  display: grid;
  gap: 18px;
}

.features { grid-template-columns: repeat(4, 1fr); }
.about-grid { grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr); align-items: start; }
.side-stack { display: grid; gap: 18px; }

.feature {
  min-height: 190px;
  border-width: 4px;
  border-radius: 22px;
}

.feature-icon {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border: 3px solid var(--line);
  border-radius: 16px;
  background: var(--sun);
  box-shadow: 0 4px 0 var(--shadow);
  font-size: 1.6rem;
  margin-bottom: 14px;
}

.feature h3 { margin: 0 0 8px; font-size: 1.25rem; }
.feature p,
.content-card p,
.content-card li,
.games-note p {
  color: var(--ink-soft);
  line-height: 1.68;
  font-weight: 640;
}

.content-card h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); margin: 28px 0 10px; }
.content-card h2:first-child { margin-top: 0; }

.values-list {
  display: grid;
  gap: 12px;
  padding: 0;
  margin: 18px 0 0;
  list-style: none;
}

.values-list li {
  border: 3px solid var(--line);
  border-radius: 18px;
  background: #fff4c8;
  box-shadow: 0 5px 0 var(--shadow);
  padding: 13px 15px;
}

.about-avatar, .creator-avatar {
  width: 116px;
  height: 116px;
  border: 5px solid var(--line);
  border-radius: 34px;
  background:
    radial-gradient(circle at 35% 34%, #fff 0 11px, transparent 12px),
    radial-gradient(circle at 65% 34%, #fff 0 11px, transparent 12px),
    linear-gradient(135deg, var(--green) 0 50%, var(--sun) 51% 100%);
  box-shadow: 0 8px 0 var(--shadow);
  margin-bottom: 18px;
  position: relative;
  overflow: hidden;
}

.about-avatar::before,
.about-avatar::after,
.creator-avatar::before,
.creator-avatar::after {
  content: "";
  position: absolute;
  top: 34px;
  width: 9px;
  height: 9px;
  background: var(--line);
  border-radius: 50%;
}
.about-avatar::before, .creator-avatar::before { left: 36px; }
.about-avatar::after, .creator-avatar::after { right: 31px; }

.about-avatar i {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 58px;
  width: 26px;
  height: 18px;
  border: 4px solid var(--line);
  background: var(--sun);
  clip-path: polygon(50% 100%, 0 0, 100% 0);
}

.creator-avatar {
  background:
    radial-gradient(circle at 35% 34%, #fff 0 11px, transparent 12px),
    radial-gradient(circle at 65% 34%, #fff 0 11px, transparent 12px),
    linear-gradient(135deg, var(--blue) 0 50%, var(--violet) 51% 100%);
}

.notice-box {
  background: #fff4c8;
  border-width: 4px;
  margin: 20px 0;
}

.legal-card {
  max-width: 920px;
  margin: 0 auto;
}

.studio-footer {
  margin: 36px 0 18px;
  border: 4px solid var(--line);
  border-radius: 26px;
  background: rgba(32, 18, 77, 0.92);
  color: #fffdf6;
  padding: 24px;
  box-shadow: 0 9px 0 var(--shadow);
  display: flex;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  align-items: center;
}

.studio-footer strong { font-size: 1.35rem; }
.studio-footer p { margin: 5px 0 0; color: rgba(255,253,246,0.78); font-weight: 650; }
.footer-links a { color: #fffdf6; opacity: 0.9; padding: 4px 0; }
.footer-links a:hover { opacity: 1; text-decoration: underline; }

.cookie-notice {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 1000;
  max-width: 980px;
  margin: 0 auto;
  border: 4px solid var(--line);
  border-radius: 24px;
  background: rgba(255, 253, 246, 0.96);
  box-shadow: 0 10px 0 var(--shadow);
  padding: 16px;
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  backdrop-filter: blur(10px);
}

.cookie-notice.is-visible { display: flex; }
.cookie-notice p { margin: 0; color: var(--ink-soft); font-weight: 700; line-height: 1.45; }
.cookie-btn {
  cursor: pointer;
  border: 3px solid var(--line);
  border-radius: 13px;
  background: var(--sun);
  color: var(--ink);
  padding: 10px 14px;
  font: inherit;
  font-weight: 950;
  box-shadow: 0 4px 0 var(--shadow);
}
.cookie-btn.secondary { background: #fff; }

@media (max-width: 1040px) {
  .game-hero { grid-template-columns: 1fr; }
  .features { grid-template-columns: repeat(2, 1fr); }
  .about-grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .topbar { position: static; border-width: 3px; }
  .nav { width: 100%; justify-content: flex-start; }
  .nav a { font-size: 0.88rem; padding: 8px 9px; }
  h1 { letter-spacing: -3px; }
  .section-title { align-items: start; flex-direction: column; }
  .parrot-stage { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .parrot-button { min-height: 216px; border-width: 3px; border-radius: 20px; padding-top: 14px; }
  .parrot-canvas { margin-top: 16px; width: 100%; max-width: 178px; }
  .key-label, .arrow-label { font-size: 0.82rem; padding: 5px 8px; border-width: 2px; }
  .features { grid-template-columns: 1fr; }
  .studio-footer { align-items: flex-start; }
  .cookie-notice { align-items: flex-start; flex-direction: column; }
  .cookie-actions { width: 100%; }
  .cookie-btn { flex: 1 1 auto; }
}

@media (max-width: 420px) {
  .page { width: min(100% - 18px, 1180px); }
  .parrot-button { min-height: 196px; }
  .parrot-canvas { max-width: 150px; }
  .score-card { min-width: 96px; padding: 8px 10px; }
}

/* Ajuste solicitado: área do jogo com proporções próximas ao index original */
.game-hero-original {
  display: block;
  max-width: 980px;
  margin: 0 auto;
  padding: clamp(28px, 5vw, 48px) 0 28px;
}

.game-hero-original .hero-copy {
  max-width: 860px;
  margin: 0 auto 18px;
  text-align: center;
}

.game-hero-original h1 {
  font-size: clamp(2.4rem, 5vw, 4.2rem);
  line-height: 1;
  letter-spacing: -1.8px;
}

.game-hero-original .hero-text {
  max-width: 760px;
  margin: 14px auto 0;
}

.game-hero-original .actions {
  justify-content: center;
}

.game-hero-original .family-badge {
  margin-left: auto;
  margin-right: auto;
}

.game-hero-original .game-panel {
  max-width: 980px;
  margin: 0 auto;
  padding: 22px 22px 26px;
  border-width: 4px;
  border-radius: 24px;
  box-shadow: 0 7px 0 var(--shadow);
}

.game-hero-original .scoreboard {
  gap: 14px;
  margin: 18px 0;
}

.game-hero-original .score-card {
  min-width: 118px;
  padding: 10px 16px;
  border-radius: 14px;
}

.game-hero-original .message {
  min-height: 52px;
  max-width: 760px;
  margin: 0 auto 18px;
  padding: 13px 16px;
}

.game-hero-original .parrot-stage {
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-bottom: 18px;
}

.game-hero-original .parrot-button {
  min-height: 248px;
  border-width: 4px;
  border-radius: 20px;
  padding: 12px 8px 0;
  box-shadow: 0 7px 0 var(--shadow);
}

.game-hero-original .parrot-button::before {
  height: 64px;
}

.game-hero-original .parrot {
  width: 160px;
  height: 194px;
  margin: 24px auto 0;
  position: relative;
  z-index: 2;
  transition: transform 0.12s ease;
  transform-origin: 50% 92%;
}

.game-hero-original .parrot-canvas {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  display: block;
  pointer-events: none;
  filter: drop-shadow(0 9px 0 rgba(32,18,77,.16));
}

.game-hero-original .parrot-button.active .parrot,
.game-hero-original .parrot-button:active .parrot {
  transform: translateY(18px) scaleY(.88);
}

@media (max-width: 860px) {
  .game-hero-original .parrot-stage {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 620px) {
  .game-hero-original .game-panel {
    padding: 16px 14px 24px;
    border-width: 3px;
  }

  .game-hero-original .parrot-button {
    min-height: 205px;
    border-width: 3px;
    padding-top: 8px;
  }

  .game-hero-original .parrot {
    transform: scale(.82);
    margin-top: 10px;
  }

  .game-hero-original .parrot-button.active .parrot,
  .game-hero-original .parrot-button:active .parrot {
    transform: translateY(18px) scale(.82, .72);
  }
}

@media (max-width: 420px) {
  .game-hero-original .parrot-button {
    min-height: 196px;
  }

  .game-hero-original .parrot {
    transform: scale(.74);
    margin-top: 4px;
  }

  .game-hero-original .parrot-button.active .parrot,
  .game-hero-original .parrot-button:active .parrot {
    transform: translateY(18px) scale(.74, .65);
  }
}



/* Versão mobile inspirada diretamente na mockup aprovada */
.mobile-nav-toggle {
  display: none;
  width: 58px;
  height: 58px;
  border: 4px solid var(--line);
  border-radius: 18px;
  background: var(--paper);
  box-shadow: 0 5px 0 var(--shadow);
  color: var(--ink);
  font: inherit;
  font-size: 1.7rem;
  font-weight: 950;
  cursor: pointer;
}

.controls-note {
  max-width: 760px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 12px;
  align-items: center;
  border: 3px solid rgba(32,18,77,.22);
  border-radius: 18px;
  background: rgba(255,253,246,.95);
  padding: 12px 14px;
  box-shadow: 0 4px 0 rgba(32,18,77,.12);
}

.controls-note-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 3px solid var(--line);
  border-radius: 14px;
  background: var(--paper);
  color: var(--ink);
  font-size: 1.45rem;
  box-shadow: 0 3px 0 rgba(32,18,77,.12);
}

.controls-note .mini-note {
  max-width: none;
  margin: 0;
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  color: var(--ink);
}

.game-hero-original .hero-copy {
  margin-bottom: 22px;
}

.game-hero-original .game-panel {
  position: relative;
}

@media (max-width: 760px) {
  .topbar {
    position: static;
    padding: 12px 14px;
    gap: 12px;
    align-items: center;
  }

  .brand {
    font-size: 1.9rem;
    gap: 12px;
    flex: 1 1 auto;
    min-width: 0;
  }

  .brand-mark {
    width: 56px;
    height: 56px;
    border-radius: 18px;
    flex: 0 0 56px;
  }

  .brand-mark::before,
  .brand-mark::after {
    top: 16px;
    width: 7px;
    height: 7px;
  }

  .brand-mark::before { left: 17px; }
  .brand-mark::after { right: 14px; }

  .brand-mark i {
    top: 28px;
    width: 16px;
    height: 13px;
  }

  .mobile-nav-toggle {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
  }

  .nav {
    display: none;
    width: 100%;
    justify-content: flex-start;
    gap: 8px;
    padding-top: 8px;
  }

  .nav.is-open {
    display: flex;
  }

  .nav a {
    font-size: .92rem;
    padding: 8px 10px;
  }

  .game-hero-original {
    padding-top: 20px;
  }

  .game-hero-original .hero-copy {
    margin-bottom: 16px;
  }

  .game-hero-original h1 {
    font-size: clamp(3rem, 12vw, 4.2rem);
    letter-spacing: -2.5px;
    text-wrap: balance;
  }

  .game-hero-original .hero-text {
    max-width: 680px;
    font-size: 1.1rem;
    line-height: 1.45;
  }

  .game-hero-original .actions,
  .game-hero-original .family-badge {
    display: none;
  }

  .game-hero-original .game-panel {
    padding: 18px 14px 16px;
    border-radius: 26px;
    background: rgba(255,253,246,.92);
  }

  .game-hero-original .scoreboard {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin: 0 0 14px;
  }

  .game-hero-original .score-card {
    min-width: 0;
    padding: 10px 8px;
    border-width: 3px;
    border-radius: 16px;
    box-shadow: 0 5px 0 rgba(32,18,77,.14);
  }

  .game-hero-original .score-card span {
    font-size: .78rem;
  }

  .game-hero-original .score-card strong {
    font-size: 1.65rem;
  }

  .game-hero-original .message {
    max-width: none;
    margin-bottom: 14px;
    border: 2px dashed #efc55b;
    border-radius: 18px;
    box-shadow: none;
    background: #fff8de;
    color: var(--ink);
    font-size: 1rem;
    min-height: auto;
  }

  .game-hero-original .parrot-stage {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 14px;
  }

  .game-hero-original .parrot-button {
    min-height: 0;
    height: 212px;
    padding: 10px 8px 8px;
    border-width: 3px;
    border-radius: 22px;
    background: rgba(255,253,246,.98);
    box-shadow: 0 5px 0 rgba(32,18,77,.14);
  }

  .game-hero-original .parrot-button::before {
    height: 0;
    display: none;
  }

  .game-hero-original .parrot-button::after {
    display: none;
  }

  .game-hero-original .key-label,
  .game-hero-original .arrow-label {
    border-radius: 14px;
    border-width: 0;
    padding: 8px 11px;
    font-size: 1.05rem;
    color: #fff;
    box-shadow: none;
  }

  .game-hero-original .key-label {
    left: 0;
    top: 0;
    min-width: 42px;
    text-align: center;
    border-top-left-radius: 18px;
    border-bottom-right-radius: 18px;
    border-top-right-radius: 0;
    border-bottom-left-radius: 0;
  }

  .game-hero-original .arrow-label {
    display: none;
  }

  .game-hero-original .p1 {
    border-color: #2dae46;
    box-shadow: 0 5px 0 rgba(45,174,70,.15);
  }
  .game-hero-original .p2 {
    border-color: #efb500;
    box-shadow: 0 5px 0 rgba(239,181,0,.16);
  }
  .game-hero-original .p3 {
    border-color: #3585df;
    box-shadow: 0 5px 0 rgba(53,133,223,.16);
  }
  .game-hero-original .p4 {
    border-color: #f25b57;
    box-shadow: 0 5px 0 rgba(242,91,87,.16);
  }

  .game-hero-original .p1 .key-label { background: #43c44b; }
  .game-hero-original .p2 .key-label { background: #ffcc18; color: #20124d; }
  .game-hero-original .p3 .key-label { background: #3a86ff; }
  .game-hero-original .p4 .key-label { background: #ff655e; }

  .game-hero-original .parrot {
    width: 146px;
    height: 176px;
    margin-top: 18px;
  }

  .controls {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 14px;
  }

  .main-button {
    min-height: 86px;
    padding: 14px 16px;
    border-width: 3px;
    border-radius: 22px;
    box-shadow: 0 5px 0 rgba(32,18,77,.14);
    font-size: 1rem;
    line-height: 1.15;
  }

  #start-btn {
    background: var(--sun);
  }

  #repeat-btn {
    background: #f0edff;
  }

  .controls-note {
    grid-template-columns: 46px 1fr;
    gap: 10px;
    padding: 12px;
    border-radius: 18px;
  }

  .controls-note-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    font-size: 1.2rem;
  }
}

@media (max-width: 430px) {
  .brand {
    font-size: 1.7rem;
  }

  .game-hero-original h1 {
    font-size: clamp(2.75rem, 11.4vw, 3.6rem);
  }

  .game-hero-original .hero-text {
    font-size: 1rem;
  }

  .game-hero-original .score-card strong {
    font-size: 1.45rem;
  }

  .game-hero-original .parrot-button {
    height: 196px;
  }

  .game-hero-original .parrot {
    width: 132px;
    height: 160px;
    margin-top: 16px;
  }

  .main-button {
    min-height: 78px;
    font-size: .98rem;
  }
}


/* Ajuste mobile: priorizar os 4 papagaios visíveis sem rolagem inicial */
@media (max-width: 760px) {
  .game-hero-original {
    padding-top: 10px;
  }

  .game-hero-original .hero-copy {
    display: none !important;
  }

  .game-hero-original .game-panel {
    padding: 12px 12px 14px;
  }

  .game-hero-original .scoreboard {
    gap: 8px;
    margin: 0 0 10px;
  }

  .game-hero-original .score-card {
    padding: 7px 6px;
    border-radius: 14px;
  }

  .game-hero-original .score-card span {
    font-size: .7rem;
  }

  .game-hero-original .score-card strong {
    font-size: 1.25rem;
  }

  .game-hero-original .message {
    margin-bottom: 10px;
    padding: 9px 10px;
    font-size: .92rem;
    line-height: 1.25;
  }

  .game-hero-original .parrot-stage {
    gap: 10px;
    margin-bottom: 10px;
  }

  .game-hero-original .parrot-button {
    height: clamp(148px, 23dvh, 184px);
    padding: 8px 6px 6px;
    border-radius: 18px;
  }

  .game-hero-original .key-label {
    min-width: 36px;
    padding: 6px 9px;
    font-size: .95rem;
  }

  .game-hero-original .parrot {
    width: clamp(104px, 31vw, 132px);
    height: clamp(126px, 37vw, 160px);
    margin-top: 12px;
  }

  .controls {
    gap: 10px;
    margin-bottom: 0;
  }

  .main-button {
    min-height: clamp(58px, 8.8dvh, 72px);
    padding: 10px 12px;
    border-radius: 18px;
    font-size: .95rem;
  }

  .controls-note {
    display: none !important;
  }
}

@media (max-width: 430px) {
  .game-hero-original .game-panel {
    padding: 10px 10px 12px;
  }

  .game-hero-original .score-card strong {
    font-size: 1.15rem;
  }

  .game-hero-original .message {
    padding: 8px 9px;
    font-size: .88rem;
  }

  .game-hero-original .parrot-stage {
    gap: 8px;
  }

  .game-hero-original .parrot-button {
    height: clamp(138px, 22.5dvh, 172px);
  }

  .game-hero-original .parrot {
    width: clamp(96px, 30vw, 120px);
    height: clamp(116px, 36vw, 146px);
    margin-top: 10px;
  }

  .main-button {
    min-height: clamp(54px, 8.2dvh, 66px);
    font-size: .9rem;
  }
}

@media (max-width: 370px) {
  .brand {
    font-size: 1.38rem;
  }

  .brand-mark {
    width: 48px;
    height: 48px;
    flex-basis: 48px;
  }

  .mobile-nav-toggle {
    width: 50px;
    height: 50px;
  }

  .game-hero-original .parrot-button {
    height: clamp(126px, 21.5dvh, 158px);
  }

  .game-hero-original .parrot {
    width: clamp(88px, 29vw, 108px);
    height: clamp(106px, 35vw, 132px);
  }
}


/* Correção do menu mobile: dropdown flutuante sem deformar o cabeçalho */
@media (max-width: 760px) {
  .topbar {
    position: relative;
    flex-wrap: nowrap;
    overflow: visible;
  }

  .brand {
    overflow: hidden;
  }

  .brand > span:last-child {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .nav {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 10px);
    width: auto;
    display: none;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 12px;
    border: 4px solid var(--line);
    border-radius: 22px;
    background: rgba(255, 253, 246, 0.98);
    box-shadow: 0 8px 0 var(--shadow);
    z-index: 200;
  }

  .nav.is-open {
    display: grid;
  }

  .nav a {
    display: grid;
    place-items: center;
    min-height: 42px;
    text-align: center;
    background: var(--paper);
    border: 3px solid rgba(32, 18, 77, 0.18);
    border-radius: 14px;
    box-shadow: 0 3px 0 rgba(32, 18, 77, 0.10);
    line-height: 1.15;
  }

  .nav a.pill {
    background: var(--sun);
    border-color: var(--line);
  }
}

@media (max-width: 370px) {
  .nav {
    grid-template-columns: 1fr;
  }
}


/* Correção mobile: nome do jogo sempre visível no cabeçalho */
@media (max-width: 760px) {
  .brand {
    flex: 1 1 auto;
    min-width: 0;
    gap: 10px;
    font-size: clamp(1.15rem, 4.65vw, 1.6rem);
    line-height: 1.05;
  }

  .brand > span:last-child {
    white-space: nowrap;
    overflow: visible;
    text-overflow: clip;
    flex: 0 1 auto;
  }

  .brand-mark {
    width: clamp(46px, 13vw, 56px);
    height: clamp(46px, 13vw, 56px);
    flex-basis: clamp(46px, 13vw, 56px);
  }

  .mobile-nav-toggle {
    width: clamp(50px, 13.5vw, 58px);
    height: clamp(50px, 13.5vw, 58px);
    flex-basis: clamp(50px, 13.5vw, 58px);
  }
}

@media (max-width: 390px) {
  .topbar {
    padding-left: 10px;
    padding-right: 10px;
    gap: 8px;
  }

  .brand {
    font-size: clamp(1.04rem, 4.45vw, 1.22rem);
    gap: 8px;
  }

  .brand-mark {
    width: 48px;
    height: 48px;
    flex-basis: 48px;
  }

  .mobile-nav-toggle {
    width: 50px;
    height: 50px;
    flex-basis: 50px;
  }
}

@media (max-width: 350px) {
  .brand {
    font-size: .98rem;
    gap: 7px;
  }

  .brand-mark {
    width: 44px;
    height: 44px;
    flex-basis: 44px;
  }

  .mobile-nav-toggle {
    width: 46px;
    height: 46px;
    flex-basis: 46px;
  }
}


/* Correção mobile do logo: olhos e bico proporcionais ao tamanho do ícone */
@media (max-width: 760px) {
  .brand-mark {
    background:
      radial-gradient(circle at 34% 34%, var(--line) 0 3px, transparent 3.4px),
      radial-gradient(circle at 66% 34%, var(--line) 0 3px, transparent 3.4px),
      radial-gradient(circle at 34% 31%, #fff 0 8px, transparent 8.5px),
      radial-gradient(circle at 66% 31%, #fff 0 8px, transparent 8.5px),
      linear-gradient(135deg, var(--green) 0 50%, var(--sun) 51% 100%);
  }

  .brand-mark::before,
  .brand-mark::after {
    display: none !important;
  }

  .brand-mark i {
    display: block;
    left: 50%;
    top: 58%;
    width: 32%;
    height: 24%;
    transform: translate(-50%, -50%);
    border: 3px solid var(--line);
    background: var(--sun);
    clip-path: polygon(50% 100%, 0 0, 100% 0);
  }
}

@media (max-width: 390px) {
  .brand-mark {
    background:
      radial-gradient(circle at 34% 34%, var(--line) 0 2.7px, transparent 3.1px),
      radial-gradient(circle at 66% 34%, var(--line) 0 2.7px, transparent 3.1px),
      radial-gradient(circle at 34% 31%, #fff 0 7.2px, transparent 7.7px),
      radial-gradient(circle at 66% 31%, #fff 0 7.2px, transparent 7.7px),
      linear-gradient(135deg, var(--green) 0 50%, var(--sun) 51% 100%);
  }

  .brand-mark i {
    border-width: 3px;
  }
}

@media (max-width: 350px) {
  .brand-mark {
    background:
      radial-gradient(circle at 34% 34%, var(--line) 0 2.4px, transparent 2.8px),
      radial-gradient(circle at 66% 34%, var(--line) 0 2.4px, transparent 2.8px),
      radial-gradient(circle at 34% 31%, #fff 0 6.5px, transparent 7px),
      radial-gradient(circle at 66% 31%, #fff 0 6.5px, transparent 7px),
      linear-gradient(135deg, var(--green) 0 50%, var(--sun) 51% 100%);
  }

  .brand-mark i {
    border-width: 2px;
  }
}

/* Garante a mesma barra superior mobile em todas as páginas */
@media (max-width: 760px) {
  .topbar {
    position: relative;
    flex-wrap: nowrap;
    overflow: visible;
  }

  .mobile-nav-toggle {
    display: grid;
    place-items: center;
  }

  .nav {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 10px);
    width: auto;
    display: none;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 12px;
    border: 4px solid var(--line);
    border-radius: 22px;
    background: rgba(255, 253, 246, 0.98);
    box-shadow: 0 8px 0 var(--shadow);
    z-index: 200;
  }

  .nav.is-open {
    display: grid;
  }
}