.age-page.wrap { max-width: 1164px; padding: 25px 30px 45px; }
.age-page-top { display: flex; justify-content: space-between; align-items: center; gap: 15px; margin-bottom: 16px; }
.age-page-back { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 9px 18px; border: 1px solid #e7e1f0; border-radius: 999px; background: #ffffffee; color: #715797; font-family: var(--font-play); font-size: 17px; box-shadow: 0 3px 0 #9d87b52e; }
.age-page-badge { padding: 7px 15px; background: #fff5dbe8; border: 1px solid #fff8e5; border-radius: 999px; color: #7b602e; font-size: 12px; }
.age-subject-world { position: relative; isolation: isolate; text-align: center; padding: 24px 24px 100px; border-radius: 45px; background: radial-gradient(ellipse at 50% 40%, #f4fefff7, #e9faffee 57%, #e3f7edaa 80%, transparent); }
.age-world-art { position: absolute; inset: auto 0 -7px; z-index: -1; width: 100%; height: auto; pointer-events: none; }
.age-subject-world > .section-kicker { display: inline-block; font-family: var(--font-play); font-size: 16px; color: #855e9c; margin-bottom: 8px; }
.age-page h1 { color: #416a98; font-family: var(--font-play); font-size: clamp(29px, 4vw, 43px); font-weight: 500; line-height: 1.3; letter-spacing: 0; }
.age-page-intro { color: #537181; font-size: 14px; line-height: 1.8; margin: 12px auto 0; max-width: 520px; }
.age-subjects { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; max-width: 760px; margin: 32px auto 0; }
.subject-orb { --orb-top:#f4e9ff; --orb-bottom:#dac0f4; --orb-shadow:#b49acb; --orb-ink:#6e468d; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; width: 100%; aspect-ratio: 1; padding: 13px 8px; border: 4px solid #ffffffd9; border-radius: 50%; background: radial-gradient(ellipse at 35% 15%, #ffffffbf, transparent 60%), linear-gradient(150deg, var(--orb-top), var(--orb-bottom)); box-shadow: inset 0 2px 0 #fff, 0 4px 0 var(--orb-shadow), 0 11px 21px #54729a20; color: var(--orb-ink); transition: transform .18s; }
.subject-orb[data-subject="math"] { --orb-top:#e6f8ff; --orb-bottom:#b9dff8; --orb-shadow:#87b5d1; --orb-ink:#3e668c; }
.subject-orb[data-subject="hebrew"] { --orb-top:#fff4d5; --orb-bottom:#ffe09f; --orb-shadow:#d1b174; --orb-ink:#7d5a2b; }
.subject-orb[data-subject="thinking"] { --orb-top:#e8fff2; --orb-bottom:#b8e6cd; --orb-shadow:#8cbaa0; --orb-ink:#3b7256; }
.subject-orb[data-subject="thinking"] strong { font-size: 18px; }
.subject-character { display: block; width: 80px; height: 80px; margin-top: -9px; filter: drop-shadow(0 4px 3px #425c7026); }
.subject-character > .animal-sprite { display: block; width: 100%; height: 100%; }
.subject-orb strong { font-family: var(--font-play); font-size: 21px; font-weight: 500; line-height: 1.2; }
.subject-orb small { font-size: 11px; color: #506577; line-height: 1.4; }
.subject-orb:hover { transform: translateY(-4px); }
.subject-orb[aria-current="page"] { outline: 3px solid #aa73d1; outline-offset: 5px; }
.subject-orb:focus-visible { outline: 3px solid #3d568f; outline-offset: 7px; }
.age-games-panel { margin-top: 17px; padding: 28px 25px 33px; border: 1px solid #ffffffc9; border-radius: 36px; background: linear-gradient(145deg, #f7fefff2, #edfbf3ed); box-shadow: 0 5px 18px #426b7512; }
.age-games-heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 27px; }
.age-games-heading h2 { color: #5d5c99; font-family: var(--font-play); font-size: 29px; font-weight: 500; letter-spacing: 0; }
.age-games-heading p { color: #5d7786; font-size: 13px; line-height: 1.7; }
.age-game-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 29px 24px; align-items: start; }
.age-game-orb { display: flex; flex-direction: column; align-items: center; gap: 9px; width: 100%; min-width: 0; padding: 0 3px 8px; border: 0; background: transparent; color: #575a8d; text-align: center; cursor: pointer; }
.age-game-art { position: relative; display: block; width: 100%; max-width: 190px; aspect-ratio: 1; border: 5px solid white; border-radius: 50%; background: #dceffa; box-shadow: 0 4px 0 #a0b8d44d, 0 10px 18px #607f9520; transition: transform .18s; }
.age-game-art > img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.age-game-play { position: absolute; inset-inline-start: -2px; bottom: 4px; display: grid; place-items: center; width: 39px; height: 39px; border: 3px solid white; border-radius: 50%; background: #9d78cf; color: white; font-size: 17px; box-shadow: 0 3px 7px #5b457a30; }
.age-game-orb:nth-child(4n+2) .age-game-play { background: #74b79d; }
.age-game-orb:nth-child(4n+3) .age-game-play { background: #d2a657; }
.age-game-orb:nth-child(4n+4) .age-game-play { background: #77accc; }
.age-game-orb strong { font-family: var(--font-play); font-size: 20px; font-weight: 400; line-height: 1.35; text-wrap: balance; }
.age-game-orb small { max-width: 195px; color: #5b7682; font-size: 11px; line-height: 1.6; }
.age-game-orb:hover .age-game-art { transform: translateY(-4px); }
.age-game-orb:focus-visible { outline: 3px solid #7950ad; outline-offset: 6px; border-radius: 20px; }
.age-game-empty { padding: 25px; text-align: center; color: #64758c; }
.age-page > .learning-path { margin-top: 28px; padding: 25px; border: 1px solid #fff; border-radius: 29px; background: #f7fcfff0; }
.age-page > .return-to-game { margin-top: 25px; }
@media(max-width:900px) { .age-game-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 27px 18px; } .age-subjects { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 400px; gap: 25px; } .subject-character { width: 80px; height: 80px; } .subject-orb strong { font-size: 21px; } }
@media(max-width:650px) {
  .age-page.wrap { padding: 18px 16px 30px; }
  .age-page-top { gap: 9px; margin-bottom: 15px; }
  .age-page-back { font-size: 16px; padding: 8px 13px; }
  .age-page-badge { font-size: 10px; padding: 6px 11px; }
  .age-subject-world { padding: 23px 20px 65px; border-radius: 30px; }
  .age-page h1 { font-size: 32px; }
  .age-page-intro { font-size: 13px; }
  .age-subjects { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 360px; gap: 23px 21px; margin-top: 26px; }
  .subject-orb { padding: 10px 5px; }
  .subject-character { width: 75px; height: 75px; }
  .subject-orb strong { font-size: 20px; }
  .subject-orb small { font-size: 10px; }
  .age-games-panel { margin-top: 12px; padding: 22px 15px 27px; border-radius: 28px; }
  .age-games-heading { display: block; margin-bottom: 23px; }
  .age-games-heading h2 { font-size: 27px; }
  .age-games-heading p { font-size: 12px; margin-top: 7px; }
  .age-game-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 25px 17px; }
  .age-game-orb { gap: 8px; }
  .age-game-orb strong { font-size: 18px; }
  .age-game-orb small { font-size: 10px; }
  .age-game-play { width: 33px; height: 33px; font-size: 14px; bottom: 1px; }
  .age-page > .learning-path { padding: 23px 17px; }
}
@media(max-width:350px) { .age-subject-world { padding-inline: 13px; } .age-subjects { gap: 22px 17px; } .subject-character { width: 62px; height: 62px; } .subject-orb strong { font-size: 17px; } .subject-orb[data-subject="thinking"] strong { font-size: 16px; } .subject-orb small { font-size: 9px; } .age-game-orb strong { font-size: 16px; } }
@media(prefers-reduced-motion:reduce) { .subject-orb, .age-game-art { transition: none; } .subject-orb:hover, .age-game-orb:hover .age-game-art { transform: none; } }

.age-search{display:grid;gap:9px;margin:0 auto 27px;max-width:650px;color:#4a355a}.age-search label{font-family:var(--font-play);font-size:22px}.age-search>div{display:flex;gap:12px;align-items:center}.age-search input{width:100%;min-width:0;min-height:48px;border:2px solid #ac96bc;border-radius:24px;padding:10px 18px;background:#fffdf5;color:#42304e;font:inherit;font-size:16px}.age-search input::placeholder{color:#6a5579;opacity:1}.age-search button{flex:none;min-height:48px;border:2px solid #b09ac0;border-radius:22px;background:#f2e5fa;color:#4a355a;padding:9px 16px;font:inherit;font-size:14px}.age-search :focus-visible{outline:3px solid #4a2d65;outline-offset:4px}.age-search button:disabled{opacity:.6;cursor:default}@media(max-width:480px){.age-search>div{flex-wrap:wrap;gap:10px}.age-search input{flex-basis:100%}.age-search label{font-size:20px}.age-search button{margin-inline-start:auto}}@media(forced-colors:active){.age-search input,.age-search button{border-color:ButtonText;background:Canvas;color:CanvasText}}