/* Companhia: direção visual vibrante para baixa visão e pouca mobilidade. */
:root {
  --brand-pink: #e6007e;
  --brand-gold: #ffb800;
  --brand-indigo: #3b2063;
  --brand-blue: #0055ff;
  --brand-white: #ffffff;
  --brand-ink: #1c1230;
  --brand-muted: #3b2063;
  --brand-line: #3b2063;
  --brand-bg: #ffffff;
}

html {
  background: var(--brand-bg);
  font-size: 20px;
}

body {
  background: var(--brand-bg);
  color: var(--brand-ink);
  font-size: 20px;
  line-height: 1.55;
}

.app {
  max-width: 980px;
  padding: 0 28px;
  background: var(--brand-bg);
}

/* Cabeçalho em duas linhas: navegação segura acima, atalhos alinhados abaixo. */
.app-header {
  position: sticky;
  top: 0;
  z-index: 30;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  grid-template-areas:
    "back brand family"
    "home listen listen";
  gap: 12px 16px;
  min-height: 0;
  height: auto;
  padding: 14px 0 16px;
  background: var(--brand-bg);
  border-bottom: 4px solid var(--brand-indigo);
}

.accessibility-nav {
  display: contents;
}

.accessibility-nav .back-access-button {
  grid-area: back;
}

.accessibility-nav .home-access-button {
  grid-area: home;
}

.accessibility-nav .listen-screen-button {
  grid-area: listen;
}

.accessibility-nav button {
  min-width: 0;
  min-height: 60px;
  padding: 12px 18px;
  border: 3px solid var(--brand-blue);
  border-radius: 14px;
  background: var(--brand-blue);
  color: var(--brand-white);
  font-size: 20px;
  font-weight: 800;
  line-height: 1.15;
  white-space: nowrap;
}

.accessibility-nav .back-access-button {
  min-width: 170px;
}

.accessibility-nav .home-access-button {
  background: var(--brand-indigo);
  border-color: var(--brand-indigo);
}

.accessibility-nav .listen-screen-button {
  background: var(--brand-pink);
  border-color: var(--brand-pink);
}

.accessibility-nav button:disabled {
  background: #6e6e6e;
  border-color: #333333;
  color: #ffffff;
  opacity: 1;
}

.brand-button {
  grid-area: brand;
  justify-self: center;
  min-height: 60px;
  padding: 8px 14px;
  color: var(--brand-indigo);
  font-size: 28px;
  font-weight: 800;
}

/* Retira o quadrado escuro que parecia flutuar sobre o cabeçalho. */
.brand-mark {
  display: none;
}

.header-actions {
  grid-area: family;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  min-width: 0;
}

.header-action {
  min-height: 60px;
  padding: 12px 16px;
  border: 3px solid var(--brand-indigo);
  border-radius: 14px;
  background: var(--brand-white);
  color: var(--brand-indigo);
  font-size: 18px;
  font-weight: 800;
  line-height: 1.15;
  white-space: nowrap;
}

.family-header-action {
  border-color: var(--brand-pink);
  color: var(--brand-indigo);
}

.blue-dot {
  background: var(--brand-blue);
}

.green-dot {
  background: var(--brand-pink);
}

.yellow-dot {
  background: var(--brand-gold);
}

.contrast-dot {
  background: var(--brand-indigo);
  border-color: var(--brand-gold);
}

.screen {
  padding: 52px 0 48px;
}

.welcome-row h1,
.page-heading h1 {
  color: var(--brand-indigo);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 1.08;
}

.greeting,
.page-heading p:not(.eyebrow),
.game-help,
.card-result,
.dialog-intro,
.note-box p,
.coming-soon p,
.comfort-note,
.section-heading span,
.message-copy span,
.tile-subtitle,
.game-card span:last-child,
.app-footer,
.family-help,
.auth-status,
.feedback-note {
  color: var(--brand-muted);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.55;
}

.eyebrow {
  color: var(--brand-pink);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.1em;
}

.section-heading h2,
.dialog h2,
.contact-details strong,
.family-contacts > strong,
.protection-settings > strong {
  color: var(--brand-indigo);
  font-weight: 800;
}

.date-card,
.message-card,
.game-area,
.contact-card,
.coming-soon,
.note-box {
  border: 3px solid var(--brand-indigo);
  box-shadow: none;
}

.date-card strong,
.date-card span {
  color: var(--brand-indigo);
}

.message-card {
  min-height: 84px;
  padding: 16px 18px;
  background: var(--brand-white);
}

.message-copy strong {
  color: var(--brand-indigo);
  font-size: 20px;
  font-weight: 800;
}

.avatar {
  width: 56px;
  height: 56px;
  background: var(--brand-gold);
  color: var(--brand-indigo);
  font-size: 19px;
  border: 3px solid var(--brand-indigo);
}

.home-grid,
.game-grid {
  gap: 18px;
}

.home-tile,
.game-card,
.video-categories button,
.youtube-button,
.big-call-button,
.emergency-contact-action,
.primary-button,
.save-button,
.outline-button,
.danger-button,
.samu-button,
.bottom-back-button {
  min-height: 60px;
  font-size: 20px;
  font-weight: 800;
}

.home-tile {
  min-height: 230px;
  padding: 22px;
  border: 4px solid var(--brand-indigo);
  box-shadow: 0 7px 0 var(--brand-indigo);
}

.home-tile .tile-title {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.home-tile .tile-subtitle {
  margin-top: 6px;
  opacity: 1;
}

.games-tile {
  background: var(--brand-indigo);
  color: var(--brand-white);
}

.videos-tile {
  background: var(--brand-gold);
  color: var(--brand-ink);
}

.family-tile {
  background: var(--brand-indigo);
  border-color: var(--brand-pink);
  color: var(--brand-white);
}

.emergency-tile {
  background: var(--brand-blue);
  color: var(--brand-white);
}

.games-tile .tile-subtitle,
.family-tile .tile-subtitle,
.emergency-tile .tile-subtitle {
  color: var(--brand-white);
}

.videos-tile .tile-subtitle {
  color: var(--brand-ink);
}

.internet-quick-button {
  min-height: 84px;
  margin: 0 0 20px;
  padding: 18px 22px;
  border: 4px solid var(--brand-indigo);
  border-radius: 22px;
  background: var(--brand-blue);
  color: var(--brand-white);
  box-shadow: 0 7px 0 var(--brand-indigo);
}

.internet-quick-button strong {
  font-size: 26px;
  font-weight: 800;
}

.internet-quick-button small {
  color: var(--brand-white);
  font-size: 18px;
  font-weight: 600;
}

.emergency-contact-panel {
  gap: 16px;
  margin-top: 24px;
  padding: 20px;
  border: 4px solid var(--brand-pink);
  border-radius: 20px;
  background: #fff0f8;
  color: var(--brand-indigo);
}

.emergency-contact-copy strong,
.emergency-contact-copy span,
.emergency-contact-copy small {
  color: var(--brand-indigo);
  font-weight: 800;
  font-size: 18px;
}

.emergency-contact-copy small {
  font-size: 16px;
  font-weight: 600;
}

.emergency-contact-action {
  padding: 14px 18px;
  border-radius: 14px;
  background: var(--brand-pink);
  color: var(--brand-white);
}

.game-card {
  min-height: 240px;
  padding: 22px;
  border: 4px solid var(--brand-indigo);
  box-shadow: 0 7px 0 var(--brand-indigo);
}

#games-screen .game-card strong,
#games-screen .game-card span:last-child {
  color: var(--brand-white);
  font-weight: 800;
  opacity: 1;
}

#games-screen .sky {
  background: var(--brand-blue);
}

#games-screen .sun {
  background: var(--brand-gold);
}

#games-screen .coral {
  background: var(--brand-pink);
}

#games-screen .mint {
  background: var(--brand-indigo);
}

#games-screen .sun strong,
#games-screen .sun span:last-child {
  color: var(--brand-ink);
}

#games-screen .game-card .game-emoji {
  border: 3px solid var(--brand-indigo);
  background: var(--brand-white);
}

.page-heading > .back-button {
  display: none;
}

.bottom-back-button {
  min-height: 60px;
  margin: 34px 0 6px;
  border: 0;
  border-radius: 16px;
  background: var(--brand-blue);
  color: var(--brand-white);
  box-shadow: 0 6px 0 var(--brand-indigo);
}

.bottom-back-button:active {
  box-shadow: 0 2px 0 var(--brand-indigo);
}

#game-screen .game-area {
  padding: 28px;
  border-color: var(--brand-indigo);
}

#game-screen .game-tools .outline-button,
#game-screen .primary-button,
#game-screen .card-actions button {
  min-height: 68px;
  padding: 16px 24px;
  border-radius: 16px;
  background: var(--brand-blue);
  color: var(--brand-white);
  font-size: 22px;
}

#game-screen .game-score {
  color: var(--brand-indigo);
  font-size: 22px;
  font-weight: 800;
}

#game-screen .memory-grid {
  gap: 16px;
  max-width: 600px;
}

#game-screen .memory-card {
  min-height: 112px;
  border: 4px solid var(--brand-indigo);
  border-radius: 18px;
  background: var(--brand-white);
  color: var(--brand-indigo);
  font-size: 54px;
  font-weight: 800;
  box-shadow: 0 4px 0 var(--brand-indigo);
}

#game-screen .memory-card.revealed,
#game-screen .memory-card.matched {
  background: var(--brand-gold);
  color: var(--brand-indigo);
}

#game-screen .bingo-cell,
#game-screen .quiz-option {
  min-height: 72px;
  border: 3px solid var(--brand-indigo);
  color: var(--brand-indigo);
  font-size: 22px;
  font-weight: 800;
}

#game-screen .bingo-cell.marked,
#game-screen .quiz-option.correct {
  background: var(--brand-pink);
  border-color: var(--brand-indigo);
  color: var(--brand-white);
}

#game-screen .quiz-question {
  font-size: 30px;
  line-height: 1.4;
}

#game-screen .playing-card {
  border: 5px solid var(--brand-indigo);
  color: var(--brand-indigo);
}

.video-categories button {
  min-height: 124px;
  border: 3px solid var(--brand-indigo);
  color: var(--brand-indigo);
}

.youtube-button {
  min-height: 76px;
  background: var(--brand-pink);
  box-shadow: 0 6px 0 var(--brand-indigo);
}

.contact-card {
  background: var(--brand-white);
}

.contact-details span,
.contact-details small,
.empty-emergency,
.family-contacts label,
.family-help,
.auth-status,
.feedback-note {
  color: var(--brand-indigo);
  font-size: 18px;
  font-weight: 600;
}

.contact-avatar {
  background: var(--brand-gold);
  border: 3px solid var(--brand-indigo);
  color: var(--brand-indigo);
}

.big-call-button {
  background: var(--brand-pink);
  color: var(--brand-white);
  box-shadow: 0 5px 0 var(--brand-indigo);
}

.outline-button {
  min-height: 60px;
  border: 3px solid var(--brand-blue);
  background: var(--brand-white);
  color: var(--brand-indigo);
}

.dialog-card {
  border: 4px solid var(--brand-indigo);
  border-top-width: 10px;
  border-radius: 22px;
}

.close-button {
  width: 56px;
  height: 56px;
  right: 14px;
  top: 12px;
  border: 3px solid var(--brand-indigo);
  background: var(--brand-white);
  color: var(--brand-indigo);
  font-size: 34px;
  font-weight: 800;
}

.theme-choice,
.font-options button,
.auth-button,
.family-contacts input,
.protection-settings select,
.feedback-label textarea,
.feedback-label select,
.search-label input {
  min-height: 60px;
  border: 3px solid var(--brand-indigo);
  color: var(--brand-indigo);
  font-size: 18px;
  font-weight: 600;
}

.save-button,
.primary-button {
  background: var(--brand-blue);
  color: var(--brand-white);
}

.danger-button {
  min-height: 60px;
  background: var(--brand-pink);
  color: var(--brand-white);
}

.samu-button {
  min-height: 60px;
  background: #fff0f8;
  border: 3px solid var(--brand-pink);
  color: var(--brand-indigo);
}

.empty-emergency {
  padding: 18px;
  border: 3px solid var(--brand-pink);
  border-radius: 14px;
  background: #fff0f8;
}

.toast {
  max-width: min(90vw, 720px);
  padding: 16px 20px;
  border: 3px solid var(--brand-gold);
  background: var(--brand-indigo);
  color: var(--brand-white);
  font-size: 18px;
  font-weight: 700;
}

button,
a,
input,
select,
textarea {
  -webkit-tap-highlight-color: transparent;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 5px solid var(--brand-gold);
  outline-offset: 4px;
}

@media (max-width: 760px) {
  .app {
    padding: 0 16px;
  }

  .app-header {
    margin: 0 -16px;
    padding: 10px 16px 14px;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      "back brand"
      "family family"
      "home listen";
  }

  .brand-button {
    justify-self: end;
    font-size: 25px;
  }

  .header-actions {
    justify-content: stretch;
  }

  .header-action {
    flex: 1 1 0;
    min-width: 0;
    padding: 12px 8px;
    font-size: 16px;
    white-space: normal;
  }

  .accessibility-nav .back-access-button,
  .accessibility-nav .home-access-button,
  .accessibility-nav .listen-screen-button {
    min-width: 0;
    width: 100%;
    padding: 11px 8px;
    font-size: 17px;
  }

  .accessibility-nav .back-access-button {
    justify-self: start;
  }

  .home-grid,
  .game-grid {
    gap: 14px;
  }

  .home-tile {
    min-height: 230px;
    padding: 18px;
  }

  .home-tile .tile-title {
    font-size: 24px;
  }

  .home-tile .tile-subtitle,
  #games-screen .game-card span:last-child {
    font-size: 17px;
  }

  #game-screen .game-area {
    padding: 18px 14px;
  }

  #game-screen .memory-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  #game-screen .memory-card {
    min-height: 120px;
  }

  .emergency-contact-panel {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .emergency-contact-copy {
    min-width: calc(100% - 60px);
  }

  .emergency-contact-action {
    width: 100%;
  }
}

@media (max-width: 430px) {
  .accessibility-nav .back-access-button,
  .accessibility-nav .home-access-button,
  .accessibility-nav .listen-screen-button,
  .header-action {
    font-size: 15px;
  }

  .welcome-row h1,
  .page-heading h1 {
    font-size: 2.5rem;
  }

  .home-grid,
  .game-grid {
    grid-template-columns: 1fr;
  }

  .home-tile,
  .game-card {
    min-height: 190px;
  }

  #game-screen .memory-card {
    min-height: 126px;
  }

  .dialog-actions {
    grid-template-columns: 1fr;
  }
}

/* Telas internas: primeira dobra, sem rolagem e com o retorno sempre visível. */
#games-screen,
#videos-screen,
#game-screen {
  position: relative;
  height: calc(100dvh - 72px);
  min-height: 0;
  overflow: hidden;
  padding: 12px 0 76px;
}

#games-screen.active,
#videos-screen.active,
#game-screen.active {
  display: flex;
  flex-direction: column;
}

#games-screen .page-heading,
#videos-screen .page-heading,
#game-screen .page-heading {
  flex: 0 0 auto;
  margin: 0 0 10px;
  padding-left: 12px;
  border-left: 8px solid #00c2ff;
}

#games-screen .page-heading h1,
#videos-screen .page-heading h1,
#game-screen .page-heading h1 {
  font-size: clamp(2rem, 6vw, 3rem);
  line-height: 1.05;
}

#games-screen .page-heading p:not(.eyebrow),
#videos-screen .page-heading p:not(.eyebrow),
#game-screen .page-heading p:not(.eyebrow) {
  margin-top: 5px;
  font-size: 16px;
  line-height: 1.25;
}

#games-screen .game-grid {
  flex: 1 1 auto;
  min-height: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

#games-screen .game-card {
  min-height: 0;
  height: 100%;
  padding: 12px;
  border-width: 3px;
  border-radius: 16px;
  box-shadow: 0 4px 0 var(--brand-indigo);
}

#games-screen .game-card .game-emoji {
  width: 56px;
  height: 56px;
  border-radius: 15px;
  font-size: 34px;
}

#games-screen .game-card strong {
  font-size: 20px;
  line-height: 1.05;
}

#games-screen .game-card span:last-child {
  font-size: 15px;
  line-height: 1.1;
}

#games-screen .sky {
  background: #00c2ff;
  color: var(--brand-ink);
}

#games-screen .sky strong,
#games-screen .sky span:last-child {
  color: var(--brand-ink);
}

#games-screen .coming-soon {
  display: none;
}

#videos-screen .video-categories {
  flex: 0 0 auto;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin: 0 0 9px;
}

#videos-screen .video-categories button {
  min-height: 70px;
  padding: 8px 10px;
  gap: 8px;
  border: 3px solid var(--brand-indigo);
  border-radius: 14px;
  font-size: 17px;
  line-height: 1.05;
}

#videos-screen .video-categories span {
  font-size: 30px;
}

#videos-screen .youtube-button {
  flex: 0 0 auto;
  min-height: 62px;
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 18px;
}

#videos-screen .youtube-button strong {
  font-size: 18px;
}

#videos-screen .youtube-button small {
  font-size: 15px;
}

#videos-screen .note-box {
  display: none;
}

#game-screen .game-area {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  padding: 12px;
  border: 3px solid #00c2ff;
  border-radius: 16px;
}

#game-screen .game-tools {
  flex: 0 0 auto;
  margin-bottom: 8px;
  gap: 8px;
}

#game-screen .game-tools .outline-button,
#game-screen .primary-button,
#game-screen .card-actions button {
  min-height: 52px;
  padding: 10px 14px;
  border-radius: 13px;
  background: #00c2ff;
  color: var(--brand-ink);
  font-size: 17px;
}

#game-screen .game-score {
  font-size: 18px;
}

#game-screen .memory-grid {
  flex: 1 1 auto;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: 7px;
  width: 100%;
  max-width: none;
  min-height: 0;
}

#game-screen .memory-card {
  min-height: 0;
  height: 100%;
  border-width: 3px;
  border-radius: 12px;
  box-shadow: 0 3px 0 var(--brand-indigo);
  font-size: clamp(28px, 8vw, 42px);
}

#game-screen .game-help {
  flex: 0 0 auto;
  margin: 8px 0 0;
  font-size: 16px;
  line-height: 1.2;
}

#game-screen .draw-number {
  flex: 0 0 auto;
  gap: 4px;
  margin: 4px 0;
}

#game-screen .draw-number strong {
  font-size: 42px;
}

#game-screen .bingo-board {
  flex: 1 1 auto;
  gap: 6px;
  width: min(100%, 330px);
  max-width: none;
  min-height: 0;
  margin: 6px auto;
}

#game-screen .bingo-cell {
  min-height: 0;
  font-size: 24px;
}

#game-screen .quiz-question {
  flex: 0 0 auto;
  margin: 6px 0 10px;
  font-size: 23px;
  line-height: 1.15;
}

#game-screen .quiz-options {
  flex: 1 1 auto;
  min-height: 0;
  gap: 6px;
}

#game-screen .quiz-option {
  min-height: 48px;
  padding: 8px 12px;
  font-size: 17px;
}

#game-screen .playing-card {
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  max-height: 250px;
  max-width: 150px;
  margin: 6px auto;
  font-size: 62px;
}

#game-screen .card-result {
  flex: 0 0 auto;
  min-height: 0;
  margin: 4px 0 8px;
  font-size: 16px;
}

#game-screen .card-actions {
  flex: 0 0 auto;
  gap: 8px;
}

#games-screen .bottom-back-button,
#videos-screen .bottom-back-button,
#game-screen .bottom-back-button {
  position: absolute;
  right: 0;
  bottom: 8px;
  left: 0;
  width: 100%;
  min-height: 56px;
  margin: 0;
  border-radius: 14px;
  background: var(--brand-blue);
  color: var(--brand-white);
  box-shadow: 0 4px 0 var(--brand-indigo);
}

/* Paleta oficial do Companhia. */
:root {
  --brand-cyan: #3cbdee;
  --brand-blue: #0055ff;
  --brand-raspberry: #e50055;
  --brand-gold: #ffcc00;
  --brand-pink: #e6007e;
  --brand-indigo: #3b2063;
}

/* Grade principal. */
#home-screen .internet-tile {
  background: var(--brand-cyan);
  color: #ffffff;
}

#home-screen .games-tile {
  background: var(--brand-gold);
  color: var(--brand-ink);
}

#home-screen .videos-tile {
  background: var(--brand-raspberry);
  color: #ffffff;
}

#home-screen .family-tile {
  background: var(--brand-pink);
  color: #ffffff;
}

#home-screen .internet-tile .tile-title,
#home-screen .internet-tile .tile-subtitle,
#home-screen .videos-tile .tile-title,
#home-screen .videos-tile .tile-subtitle,
#home-screen .family-tile .tile-title,
#home-screen .family-tile .tile-subtitle {
  color: #ffffff;
}

#home-screen .games-tile .tile-title,
#home-screen .games-tile .tile-subtitle {
  color: var(--brand-ink);
}

#home-screen .internet-tile .tile-image,
#home-screen .videos-tile .tile-image,
#home-screen .family-tile .tile-image {
  filter: grayscale(1) brightness(0) invert(1);
}

#home-screen .games-tile .tile-image {
  filter: grayscale(1) brightness(0.22);
}

#home-screen > .emergency-tile {
  background: var(--brand-raspberry);
  border-color: var(--brand-pink);
  color: #ffffff;
}

#home-screen > .emergency-tile .tile-subtitle,
#home-screen > .emergency-tile .tile-title {
  color: #ffffff;
}

#home-screen > .emergency-tile .tile-image {
  filter: grayscale(1) brightness(0) invert(1);
}

/* Mesma linguagem visual nas telas internas. */
#games-screen .sky {
  background: var(--brand-cyan);
  color: var(--brand-ink);
}

#games-screen .sky strong,
#games-screen .sky span:last-child {
  color: var(--brand-ink);
}

#games-screen .sun {
  background: var(--brand-gold);
  color: var(--brand-ink);
}

#games-screen .sun strong,
#games-screen .sun span:last-child {
  color: var(--brand-ink);
}

#games-screen .coral {
  background: var(--brand-raspberry);
}

#games-screen .mint {
  background: var(--brand-pink);
}

#videos-screen .video-categories button:nth-child(1) {
  background: var(--brand-cyan);
  color: var(--brand-ink);
}

#videos-screen .video-categories button:nth-child(2) {
  background: var(--brand-gold);
  color: var(--brand-ink);
}

#videos-screen .video-categories button:nth-child(3) {
  background: var(--brand-raspberry);
  color: #ffffff;
}

#videos-screen .video-categories button:nth-child(4) {
  background: var(--brand-pink);
  color: #ffffff;
}

#videos-screen .youtube-button {
  background: var(--brand-raspberry);
}

#game-screen .game-area {
  border-color: var(--brand-cyan);
}

#game-screen .game-tools .outline-button,
#game-screen .primary-button,
#game-screen .card-actions button {
  background: var(--brand-cyan);
  color: var(--brand-ink);
}

/* Nova composição da tela inicial: quatro cartões altos em 2x2. */
#home-screen,
#home-screen.active {
  display: flex;
  flex-direction: column;
  height: calc(100dvh - 72px - 46px);
  min-height: 0;
  padding: 10px 0 5px;
}

#home-screen .welcome-row,
#home-screen .message-card,
#home-screen .section-heading,
#home-screen .comfort-note {
  flex: 0 0 auto;
}

#home-screen .welcome-row {
  margin-bottom: 5px;
}

#home-screen .message-card {
  margin-bottom: 7px;
}

#home-screen .section-heading {
  margin-bottom: 7px;
}

#home-screen .home-grid {
  display: grid;
  flex: 1 1 auto;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 12px;
  min-height: 0;
}

#home-screen .home-tile {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: space-between;
  min-height: 0;
  height: 100%;
  padding: 16px 15px;
  border-width: 3px;
  border-radius: 28px;
  box-shadow: 0 6px 0 var(--brand-indigo);
}

#home-screen .home-tile .tile-image {
  align-self: center;
  margin: 0;
  font-size: clamp(38px, 10vw, 58px);
  line-height: 1;
}

#home-screen .home-tile .tile-title {
  width: 100%;
  text-align: center;
  font-size: clamp(19px, 5vw, 27px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

#home-screen .home-tile .tile-subtitle {
  display: block;
  width: 100%;
  margin-top: 4px;
  font-size: clamp(15px, 3.8vw, 18px);
  font-weight: 700;
  line-height: 1.15;
  text-align: center;
}

#home-screen .games-tile {
  background: #ffcc00;
  color: var(--brand-ink);
}

#home-screen .games-tile .tile-title,
#home-screen .games-tile .tile-subtitle {
  color: var(--brand-ink);
}

#home-screen .videos-tile {
  background: #e50055;
  color: #ffffff;
}

#home-screen .family-tile {
  background: #3cbdee;
  color: #ffffff;
}

#home-screen .emergency-tile {
  background: #e6007e;
  color: #ffffff;
}

#home-screen .videos-tile .tile-title,
#home-screen .videos-tile .tile-subtitle,
#home-screen .family-tile .tile-title,
#home-screen .family-tile .tile-subtitle,
#home-screen .emergency-tile .tile-title,
#home-screen .emergency-tile .tile-subtitle {
  color: #ffffff;
}

#home-screen .emergency-tile .tile-subtitle {
  margin-top: 4px;
}

#home-screen .comfort-note {
  display: flex;
  justify-content: center;
  margin: 6px 0 0;
  color: var(--brand-indigo);
  font-size: 16px;
  font-weight: 700;
}

/* Rodapé fixo, compacto e ainda acessível na primeira dobra. */
.app-footer {
  position: fixed;
  right: 50%;
  bottom: 0;
  z-index: 35;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  align-items: center;
  width: min(calc(100% - 32px), 980px);
  min-height: 46px;
  transform: translateX(50%);
  gap: 7px;
  padding: 4px 0;
  border-top: 2px solid var(--brand-indigo);
  background: #ffffff;
  color: var(--brand-indigo);
}

.footer-brand {
  min-width: 0;
  overflow: hidden;
  color: var(--brand-indigo);
  font-size: 13px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.footer-quick-button,
.footer-feedback {
  min-height: 38px;
  padding: 5px 9px;
  border: 2px solid var(--brand-indigo);
  border-radius: 10px;
  background: #ffffff;
  color: var(--brand-indigo);
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}

@media (max-width: 430px) {
  #home-screen,
  #home-screen.active {
    height: calc(100dvh - 68px - 46px);
    padding-top: 7px;
  }

  #home-screen .home-grid {
    gap: 8px;
  }

  #home-screen .home-tile {
    padding: 11px 9px;
    border-radius: 22px;
    box-shadow: 0 4px 0 var(--brand-indigo);
  }

  #home-screen .home-tile .tile-image {
    font-size: 36px;
  }

  #home-screen .home-tile .tile-title {
    font-size: 17px;
  }

  #home-screen .home-tile .tile-subtitle {
    font-size: 14px;
  }

  .app-footer {
    width: calc(100% - 20px);
    gap: 4px;
  }

  .footer-brand {
    font-size: 10px;
  }

  .footer-quick-button,
  .footer-feedback {
    min-height: 36px;
    padding: 4px 6px;
    font-size: 11px;
  }
}

@media (max-width: 430px) {
  #games-screen,
  #videos-screen,
  #game-screen {
    height: calc(100dvh - 68px);
    padding-top: 8px;
  }

  #games-screen .page-heading,
  #videos-screen .page-heading,
  #game-screen .page-heading {
    margin-bottom: 7px;
    padding-left: 9px;
    border-left-width: 6px;
  }

  #games-screen .page-heading h1,
  #videos-screen .page-heading h1,
  #game-screen .page-heading h1 {
    font-size: 1.8rem;
  }

  #games-screen .page-heading p:not(.eyebrow),
  #videos-screen .page-heading p:not(.eyebrow),
  #game-screen .page-heading p:not(.eyebrow) {
    font-size: 15px;
  }

  #games-screen .game-card {
    padding: 9px;
  }

  #games-screen .game-card .game-emoji {
    width: 45px;
    height: 45px;
    font-size: 28px;
  }

  #games-screen .game-card strong {
    font-size: 17px;
  }

  #games-screen .game-card span:last-child {
    font-size: 14px;
  }

  #videos-screen .video-categories button {
    min-height: 62px;
    font-size: 16px;
  }

  #videos-screen .video-categories span {
    font-size: 26px;
  }

  #game-screen .game-area {
    padding: 8px;
  }

  #game-screen .memory-grid {
    gap: 5px;
  }

  #game-screen .memory-card {
    border-radius: 9px;
    font-size: 30px;
  }

  #game-screen .game-help {
    font-size: 15px;
  }
}

/* Tela inicial compacta: tudo que é essencial cabe na primeira dobra. */
.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 72px;
  height: 72px;
  padding: 8px 0;
  border-bottom-width: 3px;
}

.accessibility-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 14px;
}

.accessibility-nav .home-access-button,
.brand-button,
.header-actions {
  display: none !important;
}

.accessibility-nav .back-access-button,
.accessibility-nav .listen-screen-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  width: auto;
  padding: 10px 16px;
  border-radius: 14px;
  font-size: 18px;
}

.accessibility-nav .back-access-button {
  margin-right: auto;
}

.accessibility-nav .listen-screen-button {
  margin-left: auto;
}

#home-screen {
  height: calc(100dvh - 72px);
  min-height: 0;
  overflow: hidden;
  padding: 10px 0 8px;
}

#home-screen .welcome-row {
  align-items: center;
  margin: 0 0 6px;
}

#home-screen .date-card {
  display: none;
}

#home-screen .greeting {
  margin: 0;
  color: var(--brand-indigo);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.25;
}

#home-screen .welcome-row h1 {
  margin: 0;
  font-size: clamp(1.45rem, 6vw, 2rem);
  line-height: 1.1;
}

#home-screen .message-card {
  min-height: 48px;
  margin-bottom: 7px;
  padding: 6px 10px;
  gap: 8px;
  border-width: 2px;
  border-radius: 12px;
}

#home-screen .message-card .avatar {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-width: 2px;
  font-size: 13px;
}

#home-screen .message-copy strong {
  font-size: 15px;
  line-height: 1.1;
}

#home-screen .message-copy span {
  margin-top: 0;
  font-size: 14px;
  line-height: 1.1;
}

#home-screen .listen-icon {
  font-size: 18px;
}

#home-screen .section-heading {
  margin: 0 2px 6px;
}

#home-screen .section-heading h2 {
  font-size: 18px;
}

#home-screen .section-heading span {
  font-size: 15px;
}

#home-screen .home-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

#home-screen .home-tile,
#home-screen .search-tile {
  grid-column: auto;
  min-height: 116px;
  padding: 10px 12px;
  border-width: 3px;
  border-radius: 15px;
  box-shadow: 0 4px 0 var(--brand-indigo);
}

#home-screen .home-tile .tile-image,
#home-screen .search-tile .tile-image {
  align-self: center;
  margin: 0;
  font-size: 36px;
  line-height: 1;
}

#home-screen .home-tile .tile-title,
#home-screen .search-tile .tile-title {
  width: 100%;
  text-align: center;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: 0;
  text-transform: uppercase;
}

#home-screen .home-tile .tile-subtitle,
#home-screen .search-tile .tile-subtitle {
  display: none;
}

#home-screen .internet-tile {
  background: var(--brand-blue);
  color: var(--brand-white);
}

#home-screen .internet-tile .tile-title {
  color: var(--brand-white);
}

#home-screen > .emergency-tile {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  min-height: 58px;
  margin-top: 9px;
  padding: 8px 14px;
  border: 3px solid var(--brand-pink);
  border-radius: 15px;
  background: var(--brand-pink);
  color: var(--brand-white);
  box-shadow: 0 4px 0 var(--brand-indigo);
}

#home-screen > .emergency-tile .tile-image {
  align-self: center;
  margin: 0 10px 0 0;
  font-size: 30px;
}

#home-screen > .emergency-tile .tile-title {
  width: auto;
  font-size: 20px;
  line-height: 1.1;
}

#home-screen > .emergency-tile .tile-subtitle {
  display: block;
  margin: 0 0 0 auto;
  color: var(--brand-white);
  font-size: 15px;
  line-height: 1.1;
  text-align: right;
}

#home-screen .emergency-contact-panel,
#home-screen .comfort-note {
  display: none;
}

.compact-settings-button {
  display: block;
  min-height: 52px;
  width: 100%;
  margin: 9px 0 0;
  padding: 8px 14px;
  border: 3px solid var(--brand-indigo);
  border-radius: 14px;
  background: var(--brand-white);
  color: var(--brand-indigo);
  font-size: 16px;
  font-weight: 800;
}

.quick-settings-card h2 {
  margin-bottom: 20px;
}

.quick-settings-actions {
  display: grid;
  gap: 12px;
}

.quick-settings-action {
  min-height: 64px;
  padding: 14px 16px;
  border: 3px solid var(--brand-indigo);
  border-radius: 14px;
  background: var(--brand-white);
  color: var(--brand-indigo);
  font-size: 19px;
  font-weight: 800;
}

.quick-settings-action.family-header-action {
  border-color: var(--brand-pink);
}

.app-footer {
  display: none;
}

body:has(#home-screen.active),
body:has(#home-screen.active) main {
  overflow: hidden;
}

#home-screen .videos-tile {
  background: #b00020;
  border-color: var(--brand-indigo);
  color: var(--brand-white);
}

#home-screen .videos-tile .tile-title,
#home-screen .videos-tile .tile-subtitle {
  color: var(--brand-white);
}

@media (max-width: 430px) {
  .app-header {
    min-height: 68px;
    height: 68px;
  }

  #home-screen {
    height: calc(100dvh - 68px);
    padding-top: 7px;
  }

  .accessibility-nav .back-access-button,
  .accessibility-nav .listen-screen-button {
    min-height: 52px;
    padding: 8px 12px;
    font-size: 16px;
  }

  #home-screen .home-tile,
  #home-screen .search-tile {
    min-height: 108px;
  }

  #home-screen .home-tile .tile-image,
  #home-screen .search-tile .tile-image {
    font-size: 32px;
  }

  #home-screen .home-tile .tile-title,
  #home-screen .search-tile .tile-title {
    font-size: 16px;
  }

  #home-screen > .emergency-tile {
    min-height: 54px;
    margin-top: 8px;
  }

  #home-screen > .emergency-tile .tile-title {
    font-size: 18px;
  }

  #home-screen > .emergency-tile .tile-subtitle {
    font-size: 14px;
  }

  .compact-settings-button {
    min-height: 48px;
    margin-top: 8px;
    font-size: 15px;
  }
}

/* Última camada: garante que a referência visual prevaleça sobre estilos antigos. */
#home-screen,
#home-screen.active {
  height: calc(100dvh - 72px - 46px);
  padding: 10px 0 5px;
}

#home-screen .home-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 12px;
  flex: 1 1 auto;
  min-height: 0;
}

#home-screen .home-tile {
  min-height: 0;
  height: 100%;
  padding: 16px 15px;
  border-radius: 28px;
}

#home-screen .home-tile .tile-image {
  font-size: clamp(38px, 10vw, 58px);
}

#home-screen .home-tile .tile-title {
  font-size: clamp(19px, 5vw, 27px);
}

#home-screen .home-tile .tile-subtitle {
  display: block;
  font-size: clamp(15px, 3.8vw, 18px);
}

#home-screen .comfort-note {
  display: flex;
  margin: 6px 0 0;
}

@media (max-width: 430px) {
  #home-screen,
  #home-screen.active {
    height: calc(100dvh - 68px - 46px);
    padding-top: 7px;
  }

  #home-screen .home-grid {
    gap: 8px;
  }

  #home-screen .home-tile {
    padding: 11px 9px;
    border-radius: 22px;
  }

  #home-screen .home-tile .tile-image {
    font-size: 36px;
  }

  #home-screen .home-tile .tile-title {
    font-size: 17px;
  }

  #home-screen .home-tile .tile-subtitle {
    font-size: 14px;
  }
}

/* Jogos acessíveis: quatro escolhas grandes, sem rolagem. */
#games-screen .accessible-game-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  flex: 1 1 auto;
  min-height: 0;
  gap: 12px;
}

#games-screen .accessible-game-grid .game-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 0;
  height: 100%;
  padding: 16px 14px;
  border: 3px solid var(--brand-indigo);
  border-radius: 24px;
  box-shadow: 0 5px 0 var(--brand-indigo);
  text-align: left;
}

#games-screen .accessible-game-grid .game-emoji {
  width: 64px;
  height: 64px;
  flex: 0 0 auto;
  border-radius: 18px;
  font-size: 38px;
}

#games-screen .accessible-game-grid .game-card strong {
  font-size: clamp(19px, 5vw, 27px);
  line-height: 1.06;
}

#games-screen .accessible-game-grid .game-card span:last-child {
  display: block;
  font-size: clamp(15px, 3.4vw, 18px);
  line-height: 1.15;
  font-weight: 700;
}

#games-screen .word-card { background: var(--brand-gold); color: #151515; }
#games-screen .groups-card { background: var(--brand-cyan); color: #ffffff; }
#games-screen .strands-card { background: var(--brand-raspberry); color: #ffffff; }
#games-screen .domino-card { background: var(--brand-pink); color: #ffffff; }
#games-screen .word-card strong,
#games-screen .word-card span:last-child { color: #151515; }

#game-screen .word-board,
#game-screen .groups-board,
#game-screen .strands-board,
#game-screen .domino-board {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  gap: 10px;
}

.game-instruction,
.game-feedback {
  flex: 0 0 auto;
  margin: 0;
  color: var(--brand-indigo);
  font-size: clamp(17px, 4.2vw, 22px);
  font-weight: 700;
  line-height: 1.2;
}

.word-slots {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex: 0 0 auto;
}

.word-slot {
  display: grid;
  width: clamp(52px, 14vw, 76px);
  height: clamp(58px, 15vw, 82px);
  place-items: center;
  border: 4px solid var(--brand-indigo);
  border-radius: 14px;
  background: #ffffff;
  color: var(--brand-indigo);
  font-size: clamp(30px, 9vw, 50px);
  font-weight: 900;
}

.word-slot.correct { background: #187a3d; color: #ffffff; }
.word-slot.present { background: var(--brand-gold); color: #151515; }
.word-slot.absent { background: var(--brand-indigo); color: #ffffff; }

.word-letters,
.groups-words,
.strands-words {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  min-height: 0;
}

.word-letter,
.group-word,
.strand-word {
  min-height: 56px;
  padding: 8px;
  border: 3px solid var(--brand-indigo);
  border-radius: 13px;
  background: #ffffff;
  color: var(--brand-indigo);
  font-size: clamp(18px, 4.5vw, 25px);
  font-weight: 900;
}

.word-letter:disabled { opacity: .38; }
.word-letter.chosen,
.group-word.selected,
.strand-word.found {
  background: var(--brand-gold);
  color: #151515;
}

.word-check,
.groups-check {
  flex: 0 0 auto;
  min-height: 58px;
  margin-top: auto;
  background: var(--brand-blue) !important;
  color: #ffffff !important;
  font-size: 19px !important;
}

.groups-words { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.strands-words { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.strand-word { min-height: 60px; }

.domino-status {
  flex: 0 0 auto;
  padding: 9px 12px;
  border-radius: 12px;
  background: var(--brand-cyan);
  color: #151515;
  font-size: clamp(17px, 4vw, 21px);
  font-weight: 800;
  line-height: 1.15;
}

.domino-chain {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 74px;
  max-height: 116px;
  gap: 5px;
  overflow: hidden;
  padding: 8px;
  border: 3px solid var(--brand-indigo);
  border-radius: 14px;
  background: #f5f0e6;
}

.domino-empty {
  color: var(--brand-indigo);
  font-size: 17px;
  font-weight: 800;
  text-align: center;
}

.domino-piece {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 74px;
  flex: 0 0 auto;
  gap: 4px;
  padding: 4px;
  border: 3px solid #151515;
  border-radius: 8px;
  background: #ffffff;
  color: #151515;
}

.domino-piece.played { width: 38px; height: 58px; }
.domino-pips { display: grid; grid-template-columns: repeat(3, 6px); grid-template-rows: repeat(3, 6px); place-items: center; width: 21px; height: 27px; }
.domino-pips i { width: 5px; height: 5px; border-radius: 50%; background: #151515; }
.domino-divider { width: 2px; height: 80%; background: #151515; }
.domino-hand-label { flex: 0 0 auto; color: var(--brand-indigo); font-size: 18px; font-weight: 900; }

.domino-hand {
  display: flex;
  justify-content: center;
  min-height: 0;
  gap: 5px;
  overflow: hidden;
}

.domino-hand-button {
  display: grid;
  min-width: 48px;
  min-height: 74px;
  padding: 0;
  place-items: center;
  border: 3px solid transparent;
  border-radius: 10px;
  background: transparent;
}

.domino-hand-button .domino-piece { opacity: .45; }
.domino-hand-button.playable .domino-piece { opacity: 1; border-color: var(--brand-blue); }
.domino-hand-button.selected .domino-piece { border-color: var(--brand-pink); box-shadow: 0 0 0 4px var(--brand-gold); transform: translateY(-5px); }
.domino-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; flex: 0 0 auto; }
.domino-actions button { min-height: 56px; padding: 8px; font-size: 17px; }

@media (max-width: 430px) {
  #games-screen .accessible-game-grid { gap: 8px; }
  #games-screen .accessible-game-grid .game-card { padding: 10px 9px; border-radius: 19px; }
  #games-screen .accessible-game-grid .game-emoji { width: 48px; height: 48px; font-size: 29px; border-radius: 13px; }
  #games-screen .accessible-game-grid .game-card strong { font-size: 17px; }
  #games-screen .accessible-game-grid .game-card span:last-child { font-size: 14px; }
  #game-screen .game-area { padding: 8px; gap: 7px; }
  .word-letters, .groups-words, .strands-words { gap: 5px; }
  .word-letter, .group-word, .strand-word { min-height: 50px; padding: 5px; font-size: 17px; }
  .domino-piece { width: 40px; height: 62px; }
  .domino-hand-button { min-width: 40px; min-height: 62px; }
  .domino-piece.played { width: 31px; height: 48px; }
  .domino-pips { transform: scale(.8); }
  .domino-actions button { font-size: 15px; }
}

/* Tela inicial final: quatro categorias e SOS separado no rodapé. */
#home-screen,
#home-screen.active {
  display: flex;
  flex-direction: column;
  height: calc(100dvh - 72px - 46px);
  min-height: 0;
  overflow: hidden;
  padding: 8px 0 4px;
}

#home-screen .welcome-row { flex: 0 0 auto; }
#home-screen .message-card { flex: 0 0 auto; }
#home-screen .section-heading { flex: 0 0 auto; }
#home-screen .home-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  flex: 1 1 auto;
  min-height: 0;
  gap: 9px;
}

#home-screen .home-tile {
  min-height: 0;
  height: 100%;
  padding: 12px 10px;
  border-radius: 22px;
}

#home-screen .home-tile .tile-image { font-size: clamp(34px, 9vw, 52px); }
#home-screen .home-tile .tile-title { font-size: clamp(17px, 4.6vw, 24px); }
#home-screen .home-tile .tile-subtitle { display: block; font-size: clamp(14px, 3.4vw, 17px); line-height: 1.12; }

#home-screen .internet-tile { background: var(--brand-cyan); color: #ffffff; }
#home-screen .internet-tile .tile-title,
#home-screen .internet-tile .tile-subtitle { color: #ffffff; }
#home-screen .games-tile { background: var(--brand-gold); color: #151515; }
#home-screen .games-tile .tile-title,
#home-screen .games-tile .tile-subtitle { color: #151515; }
#home-screen .videos-tile { background: var(--brand-raspberry); color: #ffffff; }
#home-screen .videos-tile .tile-title,
#home-screen .videos-tile .tile-subtitle { color: #ffffff; }
#home-screen .family-tile { background: var(--brand-pink); color: #ffffff; }
#home-screen .family-tile .tile-title,
#home-screen .family-tile .tile-subtitle { color: #ffffff; }

#home-screen .home-emergency-bar {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  min-height: 64px;
  margin-top: 8px;
  padding: 8px 14px;
  gap: 12px;
  border: 3px solid var(--brand-indigo);
  border-radius: 18px;
  background: var(--brand-pink);
  color: #ffffff;
  box-shadow: 0 4px 0 var(--brand-indigo);
  text-align: left;
}

#home-screen .home-emergency-bar .tile-image { font-size: 34px; line-height: 1; }
#home-screen .home-emergency-bar strong { display: block; font-size: clamp(19px, 5vw, 25px); line-height: 1.05; }
#home-screen .home-emergency-bar small { display: block; margin-top: 3px; color: #ffffff; font-size: 15px; font-weight: 700; }
#home-screen .comfort-note { display: flex; flex: 0 0 auto; margin: 5px 0 0; font-size: 15px; }
#home-screen .emergency-contact-panel { display: none; }

@media (max-width: 430px) {
  #home-screen,
  #home-screen.active { height: calc(100dvh - 68px - 46px); padding-top: 6px; }
  #home-screen .home-grid { gap: 7px; }
  #home-screen .home-tile { padding: 9px 8px; border-radius: 18px; }
  #home-screen .home-tile .tile-image { font-size: 32px; }
  #home-screen .home-tile .tile-title { font-size: 16px; }
  #home-screen .home-tile .tile-subtitle { font-size: 13px; }
  #home-screen .home-emergency-bar { min-height: 58px; margin-top: 7px; padding: 6px 10px; }
  #home-screen .home-emergency-bar .tile-image { font-size: 29px; }
  #home-screen .home-emergency-bar strong { font-size: 18px; }
  #home-screen .home-emergency-bar small { font-size: 13px; }
}

/* Correção estrutural final: fluxo normal, sem sobreposição. */
.app-header {
  position: static;
  flex: 0 0 68px;
  height: 68px;
  min-height: 68px;
}

.app-header > .brand-button,
.app-header > .header-actions { display: none !important; }

main {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  flex-direction: column;
}

#home-screen,
#home-screen.active {
  position: static;
  display: flex;
  flex: 1 1 auto;
  height: auto;
  min-height: 0;
  flex-direction: column;
  overflow: hidden;
  padding: 8px 0 6px;
  gap: 0;
}

#home-screen .home-grid {
  position: static;
  display: grid;
  flex: 1 1 auto;
  min-height: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

#home-screen .home-tile,
#home-screen .home-emergency-bar {
  position: static;
  transform: none;
}

#home-screen .home-tile {
  min-height: 0;
  height: 100%;
  border: 0;
  box-shadow: 0 4px 0 rgba(16, 43, 64, .14);
}

#home-screen .tile-icon-svg {
  display: grid;
  width: clamp(42px, 12vw, 64px);
  height: clamp(42px, 12vw, 64px);
  place-items: center;
  filter: none;
}

#home-screen .tile-icon-svg svg {
  display: block;
  width: 100%;
  height: 100%;
}

#home-screen .home-emergency-bar {
  position: static !important;
  inset: auto !important;
  display: flex;
  flex: 0 0 auto;
  min-height: 62px;
  width: 100%;
  margin: 9px 0 0;
  border: 0;
  border-radius: 18px;
  box-shadow: 0 4px 0 rgba(16, 43, 64, .16);
}

#home-screen .comfort-note {
  position: static;
  display: flex;
  flex: 0 0 auto;
  margin: 5px 0 0;
  min-height: 22px;
}

.app-footer {
  position: static !important;
  right: auto;
  bottom: auto;
  left: auto;
  z-index: auto;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  width: 100%;
  min-height: 46px;
  margin: 0;
  padding: 6px 0;
  transform: none !important;
}

body:not(:has(#home-screen.active)) .app-footer { display: none !important; }

@media (max-width: 430px) {
  .app-header { flex-basis: 62px; height: 62px; min-height: 62px; }
  #home-screen,
  #home-screen.active { padding-top: 5px; }
  #home-screen .home-grid { gap: 7px; }
  #home-screen .home-emergency-bar { min-height: 56px; margin-top: 7px; }
  .app-footer { min-height: 42px; padding: 4px 0; }
}

/* Roteamento visual exclusivo: somente a tela ativa participa do layout. */
main > .screen:not(.active),
main > .screen[hidden] {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

main > .screen.active:not([hidden]) {
  visibility: visible;
  pointer-events: auto;
}

#games-screen .game-icon-svg {
  display: grid;
  width: 64px;
  height: 64px;
  place-items: center;
  filter: none;
}

#games-screen .game-icon-svg svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Navegação SPA rigorosa: apenas uma tela participa do layout por vez. */
main > .screen {
  display: none !important;
  visibility: hidden;
  pointer-events: none;
}

main > .screen.active {
  display: block !important;
  visibility: visible;
  pointer-events: auto;
}

/* As telas de conteúdo continuam em coluna para preservar o layout responsivo. */
main > #home-screen.active,
main > #games-screen.active,
main > #game-screen.active,
main > #videos-screen.active,
main > #family-screen.active {
  display: flex !important;
  flex-direction: column;
}

main > .screen[hidden] {
  display: none !important;
}

.tile-icon-svg,
.game-icon-svg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
}

.tile-icon-svg svg,
.game-icon-svg svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
}

#game-screen .game-hint {
  flex: 0 0 auto;
  margin: 0;
  padding: 12px 16px;
  border: 2px solid currentColor;
  border-radius: 14px;
  font-size: clamp(18px, 4.8vw, 24px);
  font-weight: 800;
  line-height: 1.35;
}

/* Experiência diária: uma atividade clara, leve e fácil de iniciar. */
#home-screen .daily-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "badge copy action"
    "badge path path";
  align-items: center;
  flex: 0 0 auto;
  width: 100%;
  min-height: 94px;
  margin: 6px 0 7px;
  padding: 10px 14px;
  gap: 2px 12px;
  border: 3px solid var(--brand-gold);
  border-radius: 22px;
  background: #fffaf0;
  color: var(--brand-indigo);
  box-shadow: 0 4px 0 rgba(59, 32, 99, .14);
  text-align: left;
  cursor: pointer;
}

#home-screen .daily-card:hover,
#home-screen .daily-card:focus-visible {
  border-color: var(--brand-pink);
  outline: 4px solid rgba(230, 0, 126, .22);
  outline-offset: 2px;
}

#home-screen .daily-card:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 rgba(59, 32, 99, .14);
}

#home-screen .daily-badge {
  grid-area: badge;
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  border-radius: 18px;
  background: var(--brand-pink);
  font-size: 32px;
}

#home-screen .daily-copy {
  grid-area: copy;
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 1px;
}

#home-screen .daily-eyebrow {
  color: var(--brand-raspberry);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  line-height: 1.1;
}

#home-screen .daily-copy strong {
  overflow: hidden;
  color: var(--brand-indigo);
  font-size: clamp(18px, 4.4vw, 23px);
  font-weight: 800;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#home-screen .daily-copy small {
  color: #263746;
  font-size: clamp(14px, 3.5vw, 17px);
  font-weight: 700;
  line-height: 1.15;
}

#home-screen .daily-action {
  grid-area: action;
  align-self: center;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--brand-blue);
  color: #ffffff;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .03em;
  white-space: nowrap;
}

#home-screen .progress-path {
  grid-area: path;
  display: flex;
  align-items: center;
  width: 100%;
  margin-top: 5px;
}

#home-screen .progress-step {
  display: grid;
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  place-items: center;
  border: 2px solid #8b7aa8;
  border-radius: 50%;
  background: #ffffff;
  color: var(--brand-indigo);
  font-size: 11px;
  font-weight: 800;
}

#home-screen .progress-step.done,
#home-screen .progress-step.current {
  border-color: var(--brand-pink);
  background: var(--brand-pink);
  color: #ffffff;
}

#home-screen .progress-step.current {
  box-shadow: 0 0 0 4px rgba(230, 0, 126, .18);
}

#home-screen .progress-line {
  flex: 1 1 auto;
  height: 4px;
  min-width: 10px;
  background: #c8bdd8;
}

#home-screen .progress-line.done {
  background: var(--brand-pink);
}

#home-screen .section-heading h2 {
  font-size: clamp(17px, 4vw, 21px);
}

@media (max-width: 430px) {
  #home-screen .daily-card {
    min-height: 84px;
    margin: 4px 0 6px;
    padding: 8px 10px;
    gap: 1px 8px;
    border-radius: 18px;
  }

  #home-screen .daily-badge {
    width: 48px;
    height: 48px;
    border-radius: 15px;
    font-size: 26px;
  }

  #home-screen .daily-eyebrow { font-size: 10px; }
  #home-screen .daily-copy strong { font-size: 17px; }
  #home-screen .daily-copy small { font-size: 13px; }
  #home-screen .daily-action { padding: 8px 9px; font-size: 12px; }
  #home-screen .progress-step { flex-basis: 17px; width: 17px; height: 17px; font-size: 10px; }
  #home-screen .progress-line { height: 3px; }
}

/* O jogo da memória também aparece no catálogo, sem retirar os quatro jogos principais. */
#games-screen .accessible-game-grid {
  grid-template-rows: repeat(2, minmax(0, 1fr)) auto;
}

#games-screen .memory-card-game {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 86px;
  padding: 10px 14px;
  background: var(--brand-blue);
  color: #ffffff;
}

#games-screen .memory-card-game .game-emoji {
  align-self: center;
  width: 56px;
  height: 56px;
  font-size: 32px;
}

#games-screen .memory-card-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 3px;
}

#games-screen .memory-card-game .memory-card-copy strong,
#games-screen .memory-card-game .memory-card-copy span {
  color: #ffffff;
}

#games-screen .memory-card-game .memory-card-copy strong {
  font-size: clamp(18px, 4.6vw, 24px);
}

#games-screen .memory-card-game .memory-card-copy span {
  font-size: clamp(14px, 3.5vw, 17px);
  line-height: 1.15;
}

#games-screen .memory-card-action {
  display: grid;
  min-height: 50px;
  place-items: center;
  padding: 8px 12px;
  border-radius: 12px;
  background: #ffffff;
  color: var(--brand-blue);
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
}

@media (max-width: 430px) {
  #games-screen .accessible-game-grid { gap: 8px; }
  #games-screen .memory-card-game { min-height: 74px; padding: 8px 10px; gap: 8px; }
  #games-screen .memory-card-game .game-emoji { width: 44px; height: 44px; font-size: 26px; }
  #games-screen .memory-card-game .memory-card-copy strong { font-size: 17px; }
  #games-screen .memory-card-game .memory-card-copy span { font-size: 13px; }
  #games-screen .memory-card-action { min-height: 44px; padding: 7px 9px; font-size: 12px; }
}

/* Reforço visual da atividade diária, inclusive quando o celular mantém CSS antigo em cache. */
#home-screen .daily-card {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  grid-template-areas: "badge copy action" "badge path path" !important;
  align-items: center !important;
  overflow: hidden !important;
  background: #fffaf0 !important;
  color: var(--brand-indigo) !important;
}

#home-screen .daily-card .daily-badge { grid-area: badge !important; }
#home-screen .daily-card .daily-copy { grid-area: copy !important; }
#home-screen .daily-card .daily-action { grid-area: action !important; }
#home-screen .daily-card .progress-path { grid-area: path !important; }

/* Controle direto para o idoso silenciar a voz sem entrar nas configurações. */
.accessibility-nav .voice-toggle-button {
  min-width: 126px;
  background: var(--brand-indigo);
  border-color: var(--brand-indigo);
}

.accessibility-nav .voice-toggle-button[aria-pressed="true"] {
  background: #5a1118;
  border-color: #5a1118;
}

.voice-setting-block {
  padding-top: 4px;
  border-top: 2px solid var(--brand-line);
}

.voice-setting-button {
  width: 100%;
  min-height: 58px;
  padding: 12px 14px;
  border: 3px solid var(--brand-indigo);
  border-radius: 14px;
  background: var(--brand-indigo);
  color: #ffffff;
  font-size: 18px;
  font-weight: 800;
  cursor: pointer;
}

.voice-setting-button[aria-pressed="true"] {
  border-color: #5a1118;
  background: #5a1118;
}

.voice-setting-help {
  margin: 8px 0 0;
  color: var(--brand-ink);
  font-size: 16px;
  line-height: 1.35;
}

@media (max-width: 430px) {
  .accessibility-nav .voice-toggle-button {
    min-width: 104px;
    padding: 10px 8px;
    font-size: 14px;
  }

  .accessibility-nav .listen-screen-button {
    padding-right: 10px;
    padding-left: 10px;
    font-size: 15px;
  }
}

/* Acabamento visual: cartões limpos, feedback claro e menos aparência de moldura pesada. */
#games-screen .accessible-game-grid .game-card {
  border: 0 !important;
  box-shadow: 0 5px 0 rgba(59, 32, 99, .18), 0 10px 18px rgba(28, 18, 48, .08) !important;
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}

#games-screen .accessible-game-grid .game-card:hover,
#games-screen .accessible-game-grid .game-card:focus-visible {
  filter: saturate(1.08);
  transform: translateY(-3px);
  box-shadow: 0 8px 0 rgba(59, 32, 99, .18), 0 14px 22px rgba(28, 18, 48, .12) !important;
}

#games-screen .accessible-game-grid .game-card:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 rgba(59, 32, 99, .18), 0 5px 10px rgba(28, 18, 48, .1) !important;
}

#games-screen .accessible-game-grid .game-emoji {
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, .88);
  box-shadow: 0 3px 0 rgba(59, 32, 99, .16);
}

#games-screen .domino-card .game-icon-svg {
  color: var(--brand-pink);
}

#games-screen .domino-card .game-icon-svg svg circle {
  fill: currentColor !important;
  stroke: none;
}

#games-screen .domino-card .game-icon-svg svg rect,
#games-screen .domino-card .game-icon-svg svg path {
  stroke: currentColor;
}

#home-screen .home-tile,
#home-screen .home-emergency-bar {
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}

#home-screen .home-tile:hover,
#home-screen .home-tile:focus-visible,
#home-screen .home-emergency-bar:hover,
#home-screen .home-emergency-bar:focus-visible {
  filter: saturate(1.07);
  transform: translateY(-2px);
  box-shadow: 0 7px 0 rgba(16, 43, 64, .16), 0 12px 18px rgba(16, 43, 64, .08);
}

#home-screen .home-tile:active,
#home-screen .home-emergency-bar:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 rgba(16, 43, 64, .16);
}

#home-screen .tile-image {
  filter: drop-shadow(0 3px 0 rgba(16, 43, 64, .14));
}

@media (prefers-reduced-motion: reduce) {
  #home-screen .home-tile,
  #home-screen .home-emergency-bar,
  #games-screen .accessible-game-grid .game-card {
    transition: none;
  }
}

/* Companhia | acabamento iOS: vidro, squircles, pílulas e transições. */
html,
body {
  background:
    radial-gradient(circle at 10% 4%, rgba(79, 195, 247, .18), transparent 32%),
    radial-gradient(circle at 92% 16%, rgba(233, 30, 99, .10), transparent 30%),
    linear-gradient(145deg, #f5f7fa 0%, #e4e8f0 100%) !important;
}

.app,
main {
  background: transparent !important;
}

.app-header {
  position: sticky !important;
  top: 0;
  z-index: 20;
  background: rgba(255, 255, 255, .72) !important;
  border-bottom: 1px solid rgba(255, 255, 255, .82) !important;
  box-shadow: 0 8px 24px rgba(28, 28, 30, .06) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
}

.accessibility-nav {
  padding: 4px !important;
  border: 1px solid rgba(255, 255, 255, .72) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, .42) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .72) !important;
  backdrop-filter: blur(16px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(160%) !important;
}

.dialog-card,
.game-area,
.video-categories button,
.contact-card,
.contact-row {
  background: rgba(255, 255, 255, .82) !important;
  border-color: rgba(255, 255, 255, .88) !important;
  backdrop-filter: blur(20px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(150%) !important;
}

.dialog::backdrop {
  background: rgba(18, 31, 47, .42) !important;
  backdrop-filter: blur(7px) !important;
  -webkit-backdrop-filter: blur(7px) !important;
}

/* Recipientes de ícone com formato squircle, sem reduzir a leitura do texto. */
#home-screen .home-tile .tile-image,
#games-screen .game-card .game-emoji {
  display: grid !important;
  width: clamp(56px, 13vw, 72px) !important;
  height: clamp(56px, 13vw, 72px) !important;
  place-items: center !important;
  border: 1px solid rgba(255, 255, 255, .72) !important;
  border-radius: 20px !important;
  background: rgba(255, 255, 255, .48) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 6px 16px rgba(28, 28, 30, .08) !important;
  backdrop-filter: blur(12px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(150%) !important;
}

#home-screen .tile-icon-svg,
#games-screen .game-icon-svg {
  overflow: hidden;
}

#home-screen .tile-icon-svg svg,
#games-screen .game-icon-svg svg {
  width: 70% !important;
  height: 70% !important;
}

/* Voltar no rodapé como uma pílula flutuante, sem fixar sobre o conteúdo. */
.bottom-back-button {
  width: min(90%, 680px) !important;
  min-height: 56px !important;
  margin: 24px auto 10px !important;
  border: 1px solid rgba(255, 255, 255, .82) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, .72) !important;
  color: #1c1c1e !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, .12), inset 0 1px 0 rgba(255, 255, 255, .86) !important;
  backdrop-filter: blur(18px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(160%) !important;
}

.bottom-back-button:hover,
.bottom-back-button:focus-visible {
  transform: translateY(-2px) !important;
  box-shadow: 0 14px 28px rgba(0, 0, 0, .14), inset 0 1px 0 rgba(255, 255, 255, .86) !important;
}

/* Troca de telas mais próxima da física do iOS, mantendo a animação curta. */
.screen.active {
  animation: companhia-ios-screen-in .26s cubic-bezier(.22, 1, .36, 1) both !important;
}

@keyframes companhia-ios-screen-in {
  from { opacity: 0; transform: translateY(8px) scale(.995); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 650px) {
  .accessibility-nav { padding: 3px !important; }
  #home-screen .home-tile .tile-image,
  #games-screen .game-card .game-emoji {
    width: 54px !important;
    height: 54px !important;
    border-radius: 17px !important;
  }
  .bottom-back-button { width: 92% !important; }
}

@media (prefers-reduced-motion: reduce) {
  .screen.active { animation: none !important; }
  .bottom-back-button:hover,
  .bottom-back-button:focus-visible { transform: none !important; }
}
/* PRD Companhia: superfície neutra, cartões sinalizadores e controles suaves. */
:root {
  --prd-bg: #F8F9FA;
  --prd-surface: #FFFFFF;
  --prd-line: #DDE3EA;
  --prd-ink: #1A1A1A;
  --prd-information: #29B6F6;
  --prd-active: #2ECC71;
  --prd-attention: #FFC107;
  /* Tons escurecidos mantêm a intenção magenta/vermelha e alcançam contraste AAA com branco. */
  --prd-entertainment: #9C1650;
  --prd-alert: #9B1C1C;
}

html,
body,
.app {
  background: var(--prd-bg) !important;
  color: var(--prd-ink) !important;
}

body {
  min-height: 100vh;
}

.app-header {
  flex: 0 0 60px !important;
  height: 60px !important;
  min-height: 60px !important;
  padding: 4px 0 !important;
  border-bottom: 1px solid var(--prd-line) !important;
  background: var(--prd-bg) !important;
}

.accessibility-nav {
  display: flex !important;
  align-items: center;
  width: 100%;
  gap: 6px;
}

.accessibility-nav button {
  min-height: 52px !important;
  padding: 8px 10px !important;
  border: 1px solid rgba(26, 26, 26, .16) !important;
  border-radius: 16px !important;
  font-size: 15px !important;
  box-shadow: 0 3px 8px rgba(0, 0, 0, .08) !important;
}

.accessibility-nav .back-access-button {
  min-width: 94px !important;
  background: var(--prd-information) !important;
  color: var(--prd-ink) !important;
}

.accessibility-nav .voice-toggle-button {
  min-width: 108px !important;
  background: var(--prd-active) !important;
  color: var(--prd-ink) !important;
}

.accessibility-nav .voice-toggle-button[aria-pressed="true"] {
  background: var(--prd-alert) !important;
  border-color: var(--prd-alert) !important;
  color: #FFFFFF !important;
}

.accessibility-nav .listen-screen-button {
  min-width: 112px !important;
  margin-left: 0 !important;
  background: var(--prd-information) !important;
  border-color: rgba(26, 26, 26, .16) !important;
  color: var(--prd-ink) !important;
}

.header-action,
#settings-button,
#compact-settings-button,
.quick-settings-action:not(.family-header-action),
.voice-setting-button,
.save-button {
  border: 1px solid rgba(26, 26, 26, .16) !important;
  border-radius: 16px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .08) !important;
}

.screen.active {
  animation: companhia-screen-in 200ms ease both;
}

@keyframes companhia-screen-in {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}

.home-tile,
#home-screen .daily-card,
#home-screen .home-emergency-bar,
#games-screen .accessible-game-grid .game-card,
.video-categories button,
.youtube-button,
.contact-card,
.contact-row,
.game-area,
.dialog-card {
  border: 1px solid var(--prd-line) !important;
  border-radius: 18px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .08) !important;
}

#home-screen .internet-tile {
  background: var(--prd-information) !important;
  color: var(--prd-ink) !important;
}

#home-screen .games-tile,
#home-screen .daily-action,
#home-screen .daily-badge {
  background: var(--prd-active) !important;
  color: var(--prd-ink) !important;
}

#home-screen .videos-tile,
#videos-screen .youtube-button {
  background: var(--prd-entertainment) !important;
  color: #FFFFFF !important;
}

#home-screen .family-tile,
#home-screen .family-header-action,
#quick-family-button,
#family-screen .big-call-button {
  background: var(--prd-attention) !important;
  color: var(--prd-ink) !important;
}

#home-screen .home-emergency-bar,
.danger-button,
.samu-button {
  background: var(--prd-alert) !important;
  border-color: var(--prd-alert) !important;
  color: #FFFFFF !important;
}

#home-screen .home-tile .tile-image,
#home-screen .home-tile .tile-title,
#home-screen .home-tile .tile-subtitle,
#home-screen .daily-card,
#home-screen .daily-card .daily-copy strong,
#home-screen .daily-card .daily-copy small {
  color: var(--prd-ink) !important;
}

#home-screen .videos-tile .tile-image,
#home-screen .videos-tile .tile-title,
#home-screen .videos-tile .tile-subtitle,
#home-screen .home-emergency-bar .tile-image,
#home-screen .home-emergency-bar strong,
#home-screen .home-emergency-bar small,
#videos-screen .youtube-button strong,
#videos-screen .youtube-button small {
  color: #FFFFFF !important;
}

#home-screen .daily-card {
  background: var(--prd-surface) !important;
  border-color: var(--prd-active) !important;
}

#games-screen .accessible-game-grid .game-card {
  background: var(--prd-active) !important;
  color: var(--prd-ink) !important;
}

#games-screen .accessible-game-grid .game-card strong,
#games-screen .accessible-game-grid .game-card span:last-child,
#games-screen .accessible-game-grid .game-card .game-icon-svg {
  color: var(--prd-ink) !important;
}

#games-screen .accessible-game-grid .game-emoji {
  border-radius: 14px;
  box-shadow: 0 3px 8px rgba(0, 0, 0, .08);
}

#game-screen .game-area {
  border-color: var(--prd-line) !important;
  background: var(--prd-surface) !important;
}

#game-screen .primary-button,
#game-screen .card-actions button,
#game-screen .game-tools .diff-btn.active {
  background: var(--prd-active) !important;
  border-color: var(--prd-active) !important;
  color: var(--prd-ink) !important;
}

#game-screen .game-tools .outline-button,
#game-screen .word-level-button,
.outline-button {
  border: 1px solid var(--prd-line) !important;
  background: var(--prd-surface) !important;
  color: var(--prd-ink) !important;
  box-shadow: 0 3px 8px rgba(0, 0, 0, .06) !important;
}

#game-screen .word-slot.correct,
#game-screen .memory-card.matched,
#game-screen .bingo-cell.marked {
  background: var(--prd-active) !important;
  border-color: var(--prd-active) !important;
  color: var(--prd-ink) !important;
}

#game-screen .word-slot.present {
  background: var(--prd-attention) !important;
  border-color: var(--prd-attention) !important;
  color: var(--prd-ink) !important;
}

#game-screen .word-slot.absent {
  background: var(--prd-alert) !important;
  border-color: var(--prd-alert) !important;
  color: #FFFFFF !important;
}

input,
select,
textarea {
  border: 1px solid var(--prd-line) !important;
  border-radius: 12px !important;
  background: var(--prd-surface) !important;
  color: var(--prd-ink) !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .04) !important;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

button:active,
a:active {
  transform: scale(.98);
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--prd-ink) !important;
  outline-offset: 3px;
}

@media (max-width: 430px) {
  .accessibility-nav { gap: 4px; }
  .accessibility-nav button { font-size: 13px !important; padding: 8px 7px !important; }
  .accessibility-nav .back-access-button { min-width: 82px !important; }
  .accessibility-nav .voice-toggle-button { min-width: 96px !important; }
  .accessibility-nav .listen-screen-button { min-width: 100px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .screen.active { animation: none; }
  button:active,
  a:active { transform: none; }
}

/* Companhia | acabamento Glass inspirado no Apple HIG.
   Fundo calmo, cartões com profundidade e cores de intenção acessíveis. */
html,
body,
.app,
main {
  background: linear-gradient(145deg, #eef2f5 0%, #e0e6ed 100%) !important;
  color: #1c1c1e !important;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, sans-serif !important;
}

.app-header {
  height: 64px !important;
  min-height: 64px !important;
  padding: 6px 0 !important;
  background: rgba(255, 255, 255, .78) !important;
  border-bottom: 1px solid rgba(255, 255, 255, .75) !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .05) !important;
  backdrop-filter: blur(20px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(150%) !important;
}

.header-action,
.accessibility-nav button,
#settings-button,
#compact-settings-button,
.quick-settings-action:not(.family-header-action) {
  min-height: 48px !important;
  border-radius: 16px !important;
  background: rgba(255, 255, 255, .82) !important;
  border-color: rgba(28, 28, 30, .14) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .07) !important;
}

.home-tile,
#home-screen .daily-card,
#home-screen .home-emergency-bar,
#games-screen .game-card,
#games-screen .accessible-game-grid .game-card,
.game-area,
.video-categories button,
.contact-card,
.contact-row,
.dialog-card {
  border: 1px solid rgba(28, 28, 30, .12) !important;
  border-radius: 24px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .06), 0 1px 3px rgba(0, 0, 0, .04) !important;
  backdrop-filter: blur(25px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(25px) saturate(140%) !important;
  transition: transform .2s cubic-bezier(.25, 1, .5, 1), box-shadow .2s ease, filter .2s ease !important;
}

.home-tile:active,
#home-screen .daily-card:active,
#home-screen .home-emergency-bar:active,
#games-screen .game-card:active,
#games-screen .accessible-game-grid .game-card:active,
.video-categories button:active {
  transform: scale(.97) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .05) !important;
}

/* Família: ponto focal quente e acolhedor. */
#home-screen .family-tile,
#home-screen .family-header-action,
#quick-family-button,
#family-screen .big-call-button {
  background: linear-gradient(135deg, rgba(255, 248, 225, .98) 0%, rgba(255, 236, 179, .94) 100%) !important;
  border-color: rgba(255, 193, 7, .55) !important;
  color: #1a1a1a !important;
}

#home-screen .family-tile .tile-image,
#home-screen .family-tile .tile-title,
#home-screen .family-tile .tile-subtitle {
  color: #1a1a1a !important;
}

/* Jogos: atividade em verde suave, sem tela verde neon. */
#games-screen,
.games-container {
  background: transparent !important;
}

#home-screen .games-tile,
#home-screen .daily-card,
#home-screen .daily-action,
#home-screen .daily-badge,
#games-screen .game-card,
#games-screen .accessible-game-grid .game-card {
  background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%) !important;
  border-color: rgba(46, 125, 50, .28) !important;
  color: #173b20 !important;
}

#home-screen .games-tile .tile-image,
#home-screen .games-tile .tile-title,
#home-screen .games-tile .tile-subtitle,
#home-screen .daily-card,
#home-screen .daily-card .daily-copy strong,
#home-screen .daily-card .daily-copy small,
#games-screen .game-card strong,
#games-screen .game-card span:last-child,
#games-screen .game-card .game-icon-svg,
#games-screen .accessible-game-grid .game-card strong,
#games-screen .accessible-game-grid .game-card span:last-child,
#games-screen .accessible-game-grid .game-card .game-icon-svg {
  color: #173b20 !important;
}

/* Internet: informação calma e facilmente reconhecível. */
#home-screen .internet-tile,
.internet-tile {
  background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%) !important;
  border-color: rgba(2, 136, 209, .28) !important;
  color: #12344a !important;
}

#home-screen .internet-tile .tile-image,
#home-screen .internet-tile .tile-title,
#home-screen .internet-tile .tile-subtitle {
  color: #12344a !important;
}

/* Vídeos: entretenimento com cor forte apenas no cartão. */
#home-screen .videos-tile,
#videos-screen .youtube-button {
  background: linear-gradient(135deg, #9c1650 0%, #74103b 100%) !important;
  border-color: #74103b !important;
  color: #fff !important;
}

/* SOS: vermelho reservado para risco. */
#home-screen .home-emergency-bar,
.sos-tile,
.danger-button,
.samu-button {
  background: linear-gradient(135deg, #9b1c1c 0%, #771414 100%) !important;
  border-color: #771414 !important;
  color: #fff !important;
}

#home-screen .videos-tile .tile-image,
#home-screen .videos-tile .tile-title,
#home-screen .videos-tile .tile-subtitle,
#home-screen .home-emergency-bar .tile-image,
#home-screen .home-emergency-bar strong,
#home-screen .home-emergency-bar small {
  color: #fff !important;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid #1c1c1e !important;
  outline-offset: 3px;
}

@media (max-width: 650px) {
  .app-header { height: 60px !important; min-height: 60px !important; }
  .header-action,
  .accessibility-nav button { min-height: 46px !important; padding: 8px 10px !important; }
  .home-tile,
  #games-screen .game-card,
  #games-screen .accessible-game-grid .game-card { border-radius: 20px !important; }
}

/* Companhia | movimento tátil dos controles. */
.home-tile,
.card-option,
button,
.game-card {
  transition: transform .25s cubic-bezier(.34, 1.28, .64, 1),
              box-shadow .25s ease,
              filter .2s ease !important;
  will-change: transform, box-shadow;
  cursor: pointer;
}

.home-tile:hover,
.home-tile:focus-visible,
.card-option:hover,
.card-option:focus-visible,
.game-card:hover,
.game-card:focus-visible {
  transform: translateY(-4px) scale(1.01) !important;
  box-shadow: 0 14px 28px rgba(0, 0, 0, .12), 0 4px 8px rgba(0, 0, 0, .06) !important;
}

.home-tile:active,
.card-option:active,
button:active,
.game-card:active {
  transform: scale(.96) translateY(2px) !important;
  box-shadow: 0 3px 8px rgba(0, 0, 0, .08) !important;
  filter: brightness(.97);
}

.home-tile .tile-image,
.home-tile .tile-icon,
.home-tile .icon,
.game-card .game-emoji {
  transition: transform .2s ease !important;
}

.home-tile:active .tile-image,
.home-tile:active .tile-icon,
.home-tile:active .icon,
.game-card:active .game-emoji {
  transform: scale(1.08) rotate(-3deg) !important;
}

@media (prefers-reduced-motion: reduce) {
  .home-tile,
  .card-option,
  button,
  .game-card,
  .home-tile .tile-image,
  .home-tile .tile-icon,
  .home-tile .icon,
  .game-card .game-emoji {
    transition: none !important;
    will-change: auto;
  }

  .home-tile:hover,
  .home-tile:focus-visible,
  .card-option:hover,
  .card-option:focus-visible,
  .game-card:hover,
  .game-card:focus-visible,
  .home-tile:active,
  .card-option:active,
  button:active,
  .game-card:active,
  .home-tile:active .tile-image,
  .home-tile:active .tile-icon,
  .home-tile:active .icon,
  .game-card:active .game-emoji {
    transform: none !important;
  }
}