[hidden] { display: none !important; }
.sync-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: center; padding: 9px 12px; color: #806b58; font-size: 12px; text-align: center; }
.sync-bar [data-kind="ok"] { color: #627d4d; }
.sync-bar [data-kind="error"], .sync-bar [data-kind="conflict"] { color: #a44e38; font-weight: 800; }
#sync-server-version { display: none; padding: 8px 12px; background: #f9e3cf; color: #855236; border-radius: 10px; font-weight: 800; }
.sync-bar:has([data-kind="conflict"]) #sync-server-version { display: inline-block; }
.backup-tools { border-top: 1px solid #f0e1d5; margin-top: 20px; padding-top: 18px; color: #806257; }
.backup-tools h3 { margin: 0; font-size: 16px; }
.backup-tools p { font-size: 12px; line-height: 1.6; }
.backup-tools button { border: 1px solid #debfa1; box-shadow: 0 3px 0 #d7b99b; }
.header { height: auto; min-height: 82px; gap: 16px; padding: 14px 0; flex-wrap: wrap; }
.player-nav { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.player-nav button { max-width: 250px; overflow-wrap: anywhere; }
.layout { align-items: start; }
.profile-mode .layout { margin-top: 30px; }
.profile-mode .leaderboard, .profile-mode .goal, .training-mode .leaderboard { display: none; }
.profile-mode .layout { align-items: start; }
.profile-mode .play-card { min-width: 0; }
.profile-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 20px 0; }
.profile-choice { display: flex; flex-direction: column; gap: 7px; align-items: center; padding: 16px 10px; background: #fff0d9; border: 1px solid #e9c797; border-bottom: 4px solid #dab181; border-radius: 16px; color: #77523c; overflow-wrap: anywhere; }
.profile-avatar { font-size: 34px; }
.profile-choice strong { font-size: 17px; }
.profile-choice small { font-size: 11px; color: #96734e; }
.profile-form { display: grid; gap: 12px; text-align: left; border-top: 1px solid #f0e1d5; padding-top: 20px; }
.profile-form > label { font-size: 14px; font-weight: 900; }
.profile-form > input { width: 100%; border: 2px solid #f0ddcf; border-radius: 13px; padding: 12px; font: 700 17px Nunito, system-ui; background: #fffbf7; color: #604940; }
.profile-form fieldset { border: 0; margin: 0; padding: 0; }
.profile-form legend { font-size: 12px; color: #927665; padding: 5px 0 10px; }
.avatar-options { display: flex; flex-wrap: wrap; gap: 8px; }
.avatar-options label { cursor: pointer; position: relative; }
.avatar-options input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.avatar-options span { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; background: #fbf1e6; border: 2px solid transparent; font-size: 24px; }
.avatar-options input:checked + span { background: #ffe0aa; border-color: #b8824e; }
.avatar-options input:focus-visible + span { outline: 3px solid #b8824e; outline-offset: 2px; }
.training-launchers { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; border-top: 1px solid #f0e1d5; padding-top: 24px; margin-top: 24px; }
.mode-button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; border: 1px solid #e9cfb1; border-bottom: 4px solid #dcb58c; background: #fff1dd; color: #795438; padding: 16px 10px; border-radius: 16px; transition: transform .15s; }
.mode-button:hover, .profile-choice:hover { transform: translateY(-2px); }
.mode-button small { font-size: 12px; line-height: 1.5; color: #936b4d; }
.mode-icon { font-size: 28px; }
.missing-launcher { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; text-align: left; background: linear-gradient(130deg, #ffe0b4, #ffecd2); border-color: #d9a566; border-bottom-color: #c08d53; padding: 18px; }
.care-reminder { width: 100%; box-sizing: border-box; flex-direction: row; justify-content: space-between; }
.care-reminder > .mode-icon { flex-shrink: 0; white-space: nowrap; }
.missing-launcher > span:nth-child(2), .care-reminder > span:nth-child(2) { display: grid; gap: 5px; }
.care-reminder > span:nth-child(2) { flex: 1; min-width: 0; text-align: left; overflow-wrap: anywhere; }
.missing-launcher strong, .care-reminder strong { font-size: 18px; }
.training-mode .layout { grid-template-columns: minmax(210px, .62fr) minmax(0, 1.38fr); align-items: start; }
.training-mode .cat-card { position: sticky; top: 20px; }
.training-mode .play-card { min-width: 0; }
.training-mode .intro { padding-top: 30px; }
.training-mode h2:focus { outline: none; }
.training-path { margin: 0 0 18px; padding: 8px 12px; background: #fff1cf; border-radius: 12px; font-size: 12px; color: #936b3e; font-weight: 900; }
.daily-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 24px 0; }
.daily-facts > span { display: grid; gap: 8px; padding: 18px 8px; background: #fff2dc; border-radius: 16px; font-size: 32px; }
.daily-facts strong { font-size: 19px; }
.paw-mascot { display: block; font-size: 55px; margin-bottom: 16px; animation: secret-wiggle 2s 2; }
.missing-demo, .missing-equation { display: flex; align-items: center; justify-content: center; gap: 12px; font-size: clamp(27px, 4vw, 43px); font-weight: 900; color: #78513d; margin: 24px 0; }
.paw-slot { position: relative; display: inline-grid; place-items: center; flex-shrink: 0; width: 58px; height: 62px; background: #edb68d; border: 2px dashed #b77953; border-radius: 40% 40% 35% 35%; color: #74442d; }
.paw-slot::before { content: '🐾'; position: absolute; top: -20px; font-size: 23px; transform: rotate(-18deg); }
.found-factor { display: inline-block; padding: 15px 22px; margin: 15px 0; background: #fff0d6; border-radius: 15px; font-size: 20px; color: #936038; animation: factor-arrive .4s; }
.found-factor strong { font-size: 30px; margin-left: 10px; }
.mail-envelope { display: block; font-size: 80px; margin: 15px 0; animation: factor-arrive .6s; }
.retention-stamp { display: block; font-size: 10px; color: #62804e; font-weight: 900; padding-top: 4px; }
.big-stamp { display: inline-block; font-size: 16px; background: #eff1d5; border: 2px dashed #9ca979; border-radius: 12px; padding: 12px 18px; transform: rotate(-3deg); }
.stat-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 22px 0; }
.stat-cards > div { display: grid; gap: 7px; padding: 14px 8px; border-radius: 15px; background: #fff0d9; color: #976442; }
.stat-cards strong { font-size: 29px; }
.stat-cards span { font-size: 11px; font-weight: 800; }
.stats-scroll { overflow-x: auto; margin: 24px 0; }
.stats-table { width: 100%; min-width: 420px; text-align: left; border-collapse: collapse; font-size: 12px; }
.stats-table caption { text-align: left; color: #947b6c; padding: 8px 0; }
.stats-table th, .stats-table td { padding: 12px 8px; border-bottom: 1px solid #efdfcf; }
.stats-table tbody th { white-space: nowrap; }
.fact-status { display: inline-block; padding: 5px 7px; border-radius: 8px; background: #fff0de; color: #976945; }
.status-confident { background: #edf0d7; color: #657746; }
.status-new { background: #f7eee5; color: #9a8678; }
.status-slow { background: #ffe7d9; color: #a36c47; }
@media (max-width: 700px) {
  .player-nav { justify-content: flex-start; width: 100%; gap: 6px; }
  :root .player-nav .header-reset { font-size: 11px; padding: 8px 9px; }
  .training-mode .layout { grid-template-columns: minmax(0, 1fr); }
  .training-mode .cat-card { position: static; display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 8px; align-items: center; padding: 12px; }
  .training-mode .cat-top, .training-mode .goal { display: none; }
  .training-mode .cat-image { height: 70px; }
  .training-mode .speech { font-size: 12px; padding: 10px; }
  .profile-mode .cat-card { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 8px; align-items: center; padding: 12px; }
  .profile-mode .cat-top { display: none; }
  .profile-mode .cat-image { height: 70px; }
  .profile-mode .speech { font-size: 12px; padding: 10px; }
  .training-mode .play-card { padding: 20px 16px; }
  .training-mode .answer-row { flex-wrap: wrap; }
  .training-mode .answer-row input { flex: 1; min-width: 70px; max-width: 120px; }
  .training-mode .answer-row .primary { font-size: 13px; padding: 12px 14px; }
  .missing-equation { gap: 8px; }
  .paw-slot { width: 45px; height: 53px; }
  .training-launchers { gap: 9px; }
  .mode-button { padding: 13px 9px; }
  .mode-button strong { font-size: 14px; }
  .missing-launcher strong, .care-reminder strong { font-size: 16px; }
  .mode-button small { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .training-mode *, .mode-button, .profile-choice { animation: none !important; transition: none !important; }
}