/* Peças de um mesmo jogo de estudo: cores por área e controles com resposta tátil. */
:root {
  --play-sky: #9ac9de;
  --play-sun: #e5c47f;
  --play-coral: #e9a28d;
  --play-lilac: #bba9df;
  --play-floor: #0d1216;
  --area-color: var(--good);
}
:root[data-theme="light"] {
  --play-sky: #28677f;
  --play-sun: #805c12;
  --play-coral: #a14a32;
  --play-lilac: #71559c;
  --play-floor: #d5ded8;
}
body[data-area="trilhas"] { --area-color: var(--play-sky); }
body[data-area="quiz"] { --area-color: var(--play-sun); }
body[data-area="ranking"] { --area-color: var(--play-lilac); }
body[data-area="comunidade"] { --area-color: var(--play-coral); }
h1, h2, h3 { font-weight: 720; }
button, input, select, textarea { border-radius: 10px; }
button { font-weight: 550; }
.primary, .primary:hover:not(:disabled) {
  border: 1px solid color-mix(in srgb, var(--accent) 70%, var(--ink));
  border-bottom-width: 3px;
  border-radius: 11px;
  box-shadow: 0 3px 0 var(--play-floor);
  font-weight: 720;
}
.primary:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 var(--play-floor); }
button:disabled { transform: none; }
.topbar { border-bottom-width: 2px; }
.brand-group { display: flex; align-items: center; gap: 1.6rem; min-width: 0; }
.brand { flex: none; }
.brand-mark { border-radius: 9px; box-shadow: 0 3px 0 var(--play-floor); }
.game-companion { display: inline-flex; align-items: center; gap: .6rem; padding: .3rem .7rem .3rem .35rem; border: 1px solid var(--line); background: var(--panel); text-align: left; white-space: nowrap; }
.game-companion img { width: 42px; height: 42px; }
.game-companion > span { display: grid; gap: .1rem; }
.game-companion strong { color: var(--text); font-size: .79rem; line-height: 1.2; }
.game-companion small { color: var(--good); font-size: .72rem; line-height: 1.4; }
.game-companion:hover img { transform: rotate(-6deg); }
.sidebar nav a { border-radius: 11px; }
.sidebar nav a.active { background: color-mix(in srgb, var(--area-color) 11%, var(--panel)); box-shadow: inset 3px 0 var(--area-color); }
.sidebar nav a.active .nav-icon { color: var(--area-color); }
.sidebar nav a[data-view="trilhas"] .nav-icon { color: var(--play-sky); }
.sidebar nav a[data-view="quiz"] .nav-icon { color: var(--play-sun); }
.sidebar nav a[data-view="ranking"] .nav-icon { color: var(--play-lilac); }
.sidebar nav a[data-view="comunidade"] .nav-icon { color: var(--play-coral); }
.section-nav-links { gap: .5rem; width: fit-content; max-width: 100%; padding: .3rem; border: 1px solid var(--line); border-radius: 13px; background: var(--panel); }
#section-nav a { min-height: 46px; padding: .6rem .9rem; border-radius: 9px; font-size: .9rem; }
#section-nav a::after { display: none; }
#section-nav a[aria-current="page"] { color: var(--ink); background: var(--accent); font-weight: 700; }
#section-nav a[aria-current="page"] svg { color: inherit; }
.panel, .journey-spotlight, .progress-overview, .quiz-launch-panel { border-width: 2px; border-radius: 16px; box-shadow: 0 5px 0 var(--play-floor); }
.home-feature, .home-lab { border-width: 2px; border-radius: 18px; box-shadow: 0 5px 0 var(--play-floor); }
.home-lesson .lesson-label { display: inline-flex; padding: .2rem .6rem; border: 1px solid color-mix(in srgb, var(--play-sky) 45%, var(--line)); border-radius: 7px; color: var(--play-sky); background: color-mix(in srgb, var(--play-sky) 7%, var(--panel)); }
.lesson-footer img { width: 68px; height: 68px; margin-top: -.5rem; opacity: 1; }
.home-subject { --subject-color: var(--play-sky); border-width: 2px; border-bottom-width: 4px; border-radius: 14px; }
.home-subject:nth-child(2) { --subject-color: var(--play-sun); }
.home-subject:nth-child(3) { --subject-color: var(--play-coral); }
.home-subject:nth-child(4) { --subject-color: var(--play-lilac); }
.home-subject:hover { border-color: var(--subject-color); background: color-mix(in srgb, var(--subject-color) 5%, var(--panel)); }
.home-subject-heading > svg { box-sizing: content-box; padding: .45rem; border-radius: 9px; color: var(--subject-color); background: color-mix(in srgb, var(--subject-color) 12%, var(--panel)); }
.home-subject-action > span { color: var(--subject-color); }
.home-support { border: 1px solid var(--line); border-radius: 13px; }
.study-home > [data-study-game-host] { margin-top: 2.4rem; }
.game-loading { padding: 1rem; color: var(--muted); }
.practice-option .practice-icon { box-sizing: content-box; padding: .6rem; border-radius: 11px; background: color-mix(in srgb, var(--play-sun) 10%, var(--panel)); }
.practice-option { grid-template-columns: 44px minmax(0, 1fr) auto; }
.practice-option + .practice-option .practice-icon { background: color-mix(in srgb, var(--play-coral) 10%, var(--panel)); }
.practice-option .practice-icon svg { color: var(--play-sun); }
.practice-option + .practice-option .practice-icon svg { color: var(--play-coral); }
.course-row { gap: .75rem 1.15rem; margin-bottom: .85rem; padding: 1.3rem; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); }
.course-number { display: grid; place-items: center; width: 32px; height: 32px; margin-top: .1rem; border: 2px solid var(--play-sky); border-radius: 50%; color: var(--play-sky); font-weight: 700; }
.course-row > button { border-width: 2px; color: var(--play-sky); }
.topic-row button { border: 1px solid var(--line); border-radius: 9px; padding-inline: .8rem; background: var(--panel); }
.catalog-quiz { border-width: 2px; border-color: color-mix(in srgb, var(--play-sun) 45%, var(--line)); border-radius: 15px; }
.quiz-topic, .quiz-level, .quiz-length { border-width: 2px; border-radius: 13px; box-shadow: 0 3px 0 var(--play-floor); }
.quiz-topic:has(input:checked), .quiz-level:has(input:checked), .quiz-length:has(input:checked) { border-color: var(--play-sun); background: color-mix(in srgb, var(--play-sun) 7%, var(--panel)); }
.quiz-topic:has(input:checked) .quiz-topic-icon, .quiz-length:has(input:checked) strong { color: var(--play-sun); }
.quiz-level .level-art { width: 56px; height: 56px; }
.quiz-shell .page-head { margin-bottom: 1.3rem; }
.question-panel { border-width: 2px; border-radius: 17px; }
.quiz-shell #feedback > .feedback { overflow: hidden; padding: 0; border: 1px solid var(--line); border-radius: 12px; }
.quiz-shell #feedback .quiz-play-feedback { margin: 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; }
.feedback-answer-copy { padding: 1rem 1.2rem; }
.feedback-answer-copy > p:last-child { margin-bottom: 0; }
.code-block { border-radius: 11px; }
.certificate { border-width: 2px; border-radius: 17px; box-shadow: 0 4px 0 var(--play-floor); }
.certificate .animal .mascot-art { width: 90px; height: 90px; }
.certificate.locked { opacity: .8; }
.lesson-main { border-radius: 16px; }
.lesson-question { border-radius: 13px; border-top: 3px solid var(--play-sky); }
.learning-choices button, .lesson-question button[data-lesson-choice] { border-width: 2px; border-radius: 11px; }
.learning-choices button.is-correct { border-color: var(--good); box-shadow: 0 3px 0 color-mix(in srgb, var(--good) 25%, var(--play-floor)); }
.lesson-reward { display: inline-flex; align-items: center; gap: .5rem; margin-top: .7rem; padding: .4rem .75rem; color: var(--good); background: color-mix(in srgb, var(--good) 9%, var(--panel)); border: 1px solid var(--good); border-radius: 9px; font-size: .88rem; font-weight: 700; }
.lab-office, .lab-station, .lab-task-drawer, .lab-conversation { border-radius: 15px; }
.lab-person-pin { border: 2px solid #f4f5e9; box-shadow: 0 3px 0 #243a3255; }
.lab-person-pin:hover:not(:disabled), .lab-person-pin:focus-visible { outline: 3px solid #c1d5a4; outline-offset: 3px; }
.lab-journey button { border-radius: 11px 11px 0 0; }
.lab-delivery.is-delivered { border: 2px solid var(--good); padding: 1rem; border-radius: 12px; background: color-mix(in srgb, var(--good) 7%, var(--panel)); }
.lab-command-feedback[data-kind="complete"] { border-width: 2px; box-shadow: 0 4px 0 var(--play-floor); }
.lab-badge-icon { border: 1px solid var(--good); border-radius: 12px; color: var(--good); }
.community-tabs, .community-detail-tabs { gap: .6rem; border: 0; flex-wrap: wrap; }
.community-tabs button, .community-detail-tabs button { padding: .65rem .9rem; border: 2px solid var(--line); border-radius: 11px; background: var(--panel); }
.community-tabs button[aria-selected="true"], .community-detail-tabs button[aria-selected="true"] { border-color: var(--play-coral); background: color-mix(in srgb, var(--play-coral) 8%, var(--panel)); }
.community-tabs button[aria-selected="true"]::after, .community-detail-tabs button[aria-selected="true"]::after { display: none; }
.community-join, .community-empty, .community-editor, .community-room-question { border-width: 2px; border-radius: 16px; }
.community-entry-icon { color: var(--play-coral); border: 1px solid var(--line); border-radius: 12px; }
.community-choice { border-width: 2px; border-radius: 12px; }
.community-choice:has(input:checked) { border-color: var(--play-coral); background: color-mix(in srgb, var(--play-coral) 7%, var(--panel)); }
.community-personal-button img { width: 44px; height: 44px; }
.community-score, .community-player { border-radius: 12px; }
.community-room-code { color: var(--play-sun); font-weight: 750; }
@media (max-width: 1200px) {
  .game-companion { display: none; }
}
@media (max-width: 899px) {
  .practice-options { grid-template-columns: 1fr; gap: .25rem; }
  .sidebar nav a.active { box-shadow: inset 0 3px var(--area-color); border-radius: 10px; }
  .sidebar .nav-more[open] { border-radius: 12px; }
  .sidebar .nav-secondary a.active { box-shadow: inset 3px 0 var(--area-color); }
  .course-row { padding: 1rem; }
}
@media (max-width: 650px) {
  .home-lesson .lesson-label { font-size: .8rem; }
  .lesson-footer img { width: 56px; height: 56px; }
  .practice-option { grid-template-columns: 38px minmax(0, 1fr) auto; gap: .7rem; }
  .practice-option .practice-icon { padding: .4rem; }
  .section-nav-links { gap: .3rem; }
  #section-nav a { min-height: 44px; font-size: .82rem; padding: .55rem .65rem; }
  .study-home > [data-study-game-host] { margin-top: 1.7rem; }
  .community-tabs, .community-detail-tabs { gap: .4rem; }
  .community-tabs button, .community-detail-tabs button { font-size: .85rem; padding-inline: .7rem; }
}
@media (max-width: 400px) {
  .practice-option > div { display: contents; }
  .practice-option h3 { grid-column: 2; grid-row: 1; align-self: center; margin: 0; }
  .practice-option p { grid-column: 1 / -1; grid-row: 2; }
  .practice-option > span:last-child { grid-column: 3; grid-row: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .primary:active:not(:disabled), .game-companion:hover img { transform: none; }
}
@media print { .game-companion { display: none; } }