@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&family=Outfit:wght@400;500;600;700;800&family=Noto+Sans+Arabic:wght@400;600;700;800&display=swap');

:root {
    --ink: #284a3d;
    --green: #285b48;
    --cream: #fbf8ee;
    --muted: #71796c
}

* {
    box-sizing: border-box
}

body {
    margin: 0;
    background: var(--cream);
    color: var(--ink);
    font-family: Nunito, Arial, sans-serif
}

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

button {
    font: 800 15px Nunito, Arial;
    cursor: pointer;
    border: 0
}

button:focus-visible,
a:focus-visible {
    outline: 3px solid #b86839;
    outline-offset: 5px
}

header {
    max-width: 1280px;
    margin: auto;
    padding: 28px 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #e4e5d8
}

.brand {
    display: flex;
    align-items: center;
    gap: 11px;
    color: var(--ink);
    text-decoration: none;
    font: 700 21px Outfit, Arial
}

.brand-icon {
    font-size: 46px;
    color: #e4aa51;
    line-height: 1
}

.brand small {
    font: 800 9px Nunito;
    letter-spacing: 2.8px;
    display: block;
    margin-top: 4px
}

nav {
    display: flex;
    align-items: center;
    gap: 26px
}

nav button {
    background: none;
    color: var(--ink);
    font-size: 13px
}

#stars {
    background: #f6e7b9;
    border-radius: 20px;
    padding: 7px 11px;
    margin-left: 5px;
    color: #84612b
}

main {
    max-width: 1200px;
    margin: auto;
    padding: 24px 30px 70px
}

.eyebrow {
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 2px;
    color: #69806b;
    text-transform: uppercase
}

.hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
    min-height: 370px
}

.hero h1 {
    font: 700 clamp(38px, 4.6vw, 61px)/1.06 Outfit, Arial;
    letter-spacing: -2px;
    margin: 19px 0
}

.hero h1 em {
    font-style: normal;
    color: #a76a39
}

.hero p {
    max-width: 410px;
    font-size: 16px;
    line-height: 1.7;
    color: #71796c
}

.primary {
    background: var(--green);
    color: white;
    padding: 16px 25px;
    border-radius: 13px;
    box-shadow: 0 4px 0 #193f31
}

.hero .primary {
    margin-top: 10px
}

.note {
    display: block;
    font-size: 11px;
    margin-top: 18px;
    color: #818575
}

.illustration {
    background: #e9edda;
    border-radius: 49% 48% 42% 41%;
    height: 310px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center
}

.illustration svg {
    width: 100%;
    height: 100%
}

.floating {
    position: absolute;
    background: #fffdf4;
    padding: 12px 18px;
    border-radius: 15px;
    box-shadow: 0 6px 20px #46664b12;
    font-weight: 900;
    font-size: 14px;
    transform: rotate(-6deg);
    top: 35px;
    left: 20px
}

.flower {
    position: absolute;
    right: 23px;
    bottom: 20px;
    font-size: 50px;
    color: #c38b45
}

.sectionline {
    display: flex;
    justify-content: space-between;
    align-items: end;
    margin: 35px 0 20px
}

.sectionline h2 {
    font: 600 27px Outfit;
    margin: 0
}

.sectionline p {
    font-size: 12px;
    color: var(--muted);
    margin: 8px 0 0
}

.pill {
    font-size: 11px;
    font-weight: 800;
    background: #eceede;
    padding: 9px 14px;
    border-radius: 30px
}

.levels {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px
}

.level {
    border-radius: 22px;
    background: #fffdf7;
    border: 1px solid #e8e5d9;
    overflow: hidden;
    text-align: left;
    padding: 0;
    color: var(--ink);
    transition: transform .2s, box-shadow .2s
}

.level:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px #284a3d12
}

.art {
    height: 126px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    font-size: 55px;
    background: var(--tint)
}

.art:after {
    content: '✧';
    position: absolute;
    right: 25px;
    top: 16px;
    font-size: 23px;
    color: #ffffff
}

.cardtext {
    padding: 17px
}

.cardtext small {
    font-size: 9px;
    letter-spacing: 1.3px;
    font-weight: 900;
    color: #829078
}

.cardtext h3 {
    font: 600 18px Outfit;
    margin: 8px 0
}

.cardtext p {
    font-size: 11px;
    color: var(--muted);
    line-height: 1.6;
    min-height: 35px
}

.cardbottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    margin-top: 16px
}

.arrow {
    border-radius: 50%;
    background: #edf0e2;
    padding: 5px 10px;
    font-size: 16px
}

.strip {
    margin-top: 28px;
    padding: 19px 25px;
    display: flex;
    gap: 16px;
    align-items: center;
    background: #eeeedf;
    border-radius: 16px
}

.strip strong {
    font-size: 13px
}

.strip p {
    margin: 4px 0 0;
    font-size: 11px;
    color: var(--muted)
}

.strip .sprout {
    font-size: 29px
}

.strip button {
    margin-left: auto;
    color: var(--green);
    background: none;
    font-size: 12px
}

footer {
    max-width: 1140px;
    margin: auto;
    border-top: 1px solid #e3e4d7;
    padding: 21px 0 30px;
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    color: #889080
}

.game {
    max-width: 850px;
    margin: 22px auto
}

.gamebar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px
}

.back,
.secondary {
    background: #e9ecde;
    color: var(--green);
    padding: 12px 18px;
    border-radius: 12px
}

.progress {
    display: flex;
    gap: 6px
}

.progress i {
    display: block;
    width: 30px;
    height: 6px;
    border-radius: 8px;
    background: #e2e5d7
}

.progress i.on {
    background: #5c8568
}

.gamebox {
    background: #fffdf8;
    border: 1px solid #e7e4d7;
    border-radius: 28px;
    padding: 32px;
    text-align: center
}

.gamebox h1 {
    font: 600 32px Outfit;
    margin: 10px 0
}

.gamebox .instruction {
    font-size: 18px;
    margin: 12px auto 22px;
    max-width: 600px;
    line-height: 1.5
}

.scene {
    background: #edf0df;
    border-radius: 22px;
    height: 245px;
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center
}

.scene svg {
    height: 100%;
    width: 100%
}

.sceneemoji {
    font-size: 85px;
    letter-spacing: 20px
}

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

.option {
    background: #fff;
    border: 2px solid #dce3d2;
    border-radius: 15px;
    padding: 17px 22px;
    color: var(--ink);
    min-width: 155px;
    font-size: 17px
}

.option:hover {
    border-color: #568366;
    background: #f0f5e8
}

.feedback {
    min-height: 52px;
    padding: 14px;
    border-radius: 12px;
    font-weight: 800;
    background: #f5eedb;
    color: #735c36;
    margin: 16px 0
}

.feedback.success {
    background: #e6f0df;
    color: #315e3b
}

.actions {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap
}

.tiny {
    font-size: 11px;
    color: #7c8375;
    line-height: 1.7
}

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

.memory span {
    background: #f1efdf;
    padding: 18px;
    border-radius: 14px;
    font-weight: 800
}

.bigstars {
    font-size: 54px;
    color: #dca440;
    letter-spacing: 10px
}

.bites {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
    background: #f6e0b9;
    border: 9px solid #fff;
    border-radius: 50%;
    width: 200px;
    padding: 18px;
    box-shadow: 0 5px 0 #d4d2c0
}

.bite {
    font-size: 24px;
    background: #fff6d9;
    border-radius: 15px;
    padding: 5px 15px;
    border: 2px solid transparent
}

.bite:hover {
    border-color: var(--green)
}

.spoon {
    font-size: 32px;
    border: 2px dashed #789475;
    border-radius: 15px;
    padding: 12px;
    position: absolute;
    right: 12%;
    bottom: 20px;
    background: #fffdf0
}

dialog {
    border: 0;
    border-radius: 25px;
    padding: 35px;
    max-width: 700px;
    width: calc(100% - 32px);
    color: var(--ink);
    background: var(--cream);
    max-height: 85vh
}

dialog::backdrop {
    background: #183b2f88
}

.close {
    float: right;
    background: #e6eadb;
    border-radius: 50%;
    padding: 8px 12px
}

dialog h2 {
    font: 600 29px Outfit
}

dialog p,
dialog li {
    line-height: 1.7;
    font-size: 14px
}

dialog a {
    color: #285b48
}

dialog article {
    border-top: 1px solid #dce1cf;
    padding: 12px 0
}

.learned {
    padding: 16px;
    background: #eff0df;
    margin: 10px 0;
    border-radius: 14px;
    display: flex;
    justify-content: space-between
}

.choices-note {
    font-size: 11px;
    color: #7c8375
}

.order {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap
}

.order button {
    background: #f1ead4;
    color: var(--ink);
    padding: 15px;
    border-radius: 12px
}

.order button:disabled {
    opacity: .45
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%)
}

@media(max-width:850px) {
    header {
        padding: 20px
    }

    nav {
        gap: 10px
    }

    nav button {
        font-size: 11px
    }

    .levels {
        grid-template-columns: repeat(3, 1fr)
    }

    .hero {
        gap: 15px
    }

    .hero h1 {
        font-size: 43px
    }

    .illustration {
        height: 275px
    }

    footer {
        padding: 20px
    }

    .hero p {
        font-size: 14px
    }
}

@media(max-width:580px) {
    header {
        align-items: flex-start
    }

    .brand {
        font-size: 16px
    }

    .brand-icon {
        font-size: 35px
    }

    nav {
        flex-wrap: wrap;
        justify-content: flex-end;
        max-width: 170px
    }

    nav #home {
        display: none
    }

    main {
        padding: 18px
    }

    .hero {
        grid-template-columns: 1fr;
        gap: 12px
    }

    .hero h1 {
        font-size: 44px;
        max-width: 330px
    }

    .illustration {
        height: 230px;
        margin-top: 12px
    }

    .levels {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px
    }

    .sectionline {
        align-items: start
    }

    .sectionline .pill {
        display: none
    }

    .art {
        height: 110px
    }

    .cardtext {
        padding: 14px
    }

    .strip {
        padding: 16px
    }

    .strip button {
        font-size: 10px
    }

    .gamebox {
        padding: 20px 14px
    }

    .gamebox h1 {
        font-size: 27px
    }

    .scene {
        height: 220px
    }

    .option {
        min-width: 125px;
        padding: 13px;
        font-size: 15px
    }

    .spoon {
        right: 2%
    }

    footer {
        gap: 20px;
        font-size: 9px
    }

    .sceneemoji {
        font-size: 60px;
        letter-spacing: 5px
    }
}

.language-picker {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 10px;
    background: #edf0e2;
    border: 1px solid #d8dfcc;
    border-radius: 12px;
    color: var(--green)
}

.language-picker select {
    max-width: 115px;
    border: 0;
    background: transparent;
    color: inherit;
    font: 800 13px Nunito, Arial, sans-serif;
    cursor: pointer;
    padding: 3px
}

.language-picker:focus-within {
    outline: 3px solid #b86839;
    outline-offset: 3px
}

header {
    gap: 20px
}

nav {
    gap: 16px;
    flex-wrap: wrap;
    justify-content: flex-end
}

.hand-view,
.hand-task .options {
    direction: ltr
}

.hand-task .options button {
    unicode-bidi: plaintext
}

[dir=rtl] body,
[dir=rtl] button,
[dir=rtl] select {
    font-family: 'Noto Sans Arabic', Tahoma, Arial, sans-serif
}

[dir=rtl] .hero h1,
[dir=rtl] h1,
[dir=rtl] h2,
[dir=rtl] h3,
[dir=rtl] .brand {
    font-family: 'Noto Sans Arabic', Tahoma, Arial, sans-serif;
    letter-spacing: 0;
    line-height: 1.5
}

[dir=rtl] .brand small,
[dir=rtl] .eyebrow,
[dir=rtl] .cardtext small {
    letter-spacing: 0
}

[dir=rtl] .level {
    text-align: right
}

[dir=rtl] .strip {
    text-align: right !important
}

[dir=rtl] .strip button {
    margin-left: 0;
    margin-right: auto
}

[dir=rtl] #stars {
    margin-left: 0;
    margin-right: 5px
}

[dir=rtl] .close {
    float: left
}

[dir=rtl] .hero h1 {
    font-size: clamp(34px, 4vw, 50px)
}

[dir=rtl] .cardtext h3 {
    font-size: 17px
}

[dir=rtl] .cardtext p {
    min-height: 50px;
    line-height: 1.9
}

[dir=rtl] .brand {
    font-size: 19px
}

[dir=rtl] .brand small {
    font-size: 10px
}

.language-picker select option {
    font-family: Arial, sans-serif
}

@media(max-width:850px) {
    nav {
        max-width: 440px
    }

    .brand {
        flex-shrink: 0
    }

    .cardtext h3 {
        line-height: 1.4
    }
}

@media(max-width:580px) {
    header {
        gap: 10px
    }

    nav {
        max-width: 190px;
        gap: 10px
    }

    .language-picker {
        padding: 4px 6px
    }

    .language-picker select {
        font-size: 12px;
        max-width: 106px
    }

    [dir=rtl] .brand {
        font-size: 15px
    }

    [dir=rtl] .hero h1 {
        font-size: 36px
    }

    .gamebar {
        gap: 8px;
        flex-wrap: wrap
    }

    .back {
        font-size: 12px;
        padding: 10px
    }

    .progress i {
        width: 22px
    }

    .strip {
        flex-wrap: wrap
    }

    .strip button {
        margin-inline-start: 0
    }

    .level {
        min-width: 0
    }
}

.level-progress {
    display: flex;
    align-items: center;
    gap: 24px;
    background: #eeefdf;
    border: 1px solid #dfe4d2;
    border-radius: 18px;
    padding: 18px 23px;
    margin: 4px 0 22px
}

.level-progress>div:first-child {
    min-width: 125px
}

.level-progress strong {
    font: 700 24px Outfit, Arial;
    display: block;
    margin-top: 5px
}

.level-track {
    flex: 1
}

.track-label {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 12px;
    font-weight: 800;
    margin-bottom: 9px
}

.level-track progress {
    width: 100%;
    height: 12px;
    border: 0;
    border-radius: 12px;
    overflow: hidden;
    background: #d8dfcb;
    appearance: none
}

.level-track progress::-webkit-progress-bar {
    background: #d8dfcb;
    border-radius: 12px
}

.level-track progress::-webkit-progress-value {
    background: #c28a35;
    border-radius: 12px
}

.level-track progress::-moz-progress-bar {
    background: #c28a35;
    border-radius: 12px
}

#playerlevel {
    font-size: 11px;
    background: #e5ead7;
    border-radius: 20px;
    padding: 7px 9px;
    white-space: nowrap
}

.level-up {
    border: 1px solid #e4c47e;
    border-radius: 18px;
    padding: 20px;
    background: #fff0c9;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 18px;
    margin: 20px 0
}

.level-up strong {
    font-size: 20px
}

.level-up span {
    font-size: 25px;
    font-weight: 900
}

.earned {
    font-size: 20px;
    font-weight: 900;
    color: #91632c;
    margin: 8px 0
}

.game .level-progress {
    margin-bottom: 24px
}

[dir=rtl] .level-progress strong {
    font-family: 'Noto Sans Arabic', Tahoma, Arial, sans-serif
}

@media(max-width:580px) {
    .level-progress {
        padding: 15px;
        gap: 12px
    }

    .level-progress>div:first-child {
        min-width: 87px
    }

    .level-progress .eyebrow {
        font-size: 8px;
        letter-spacing: .7px
    }

    .level-progress strong {
        font-size: 20px
    }

    .track-label {
        font-size: 10px;
        flex-wrap: wrap;
        gap: 3px
    }

    .level-up {
        flex-direction: column;
        gap: 5px
    }

    #playerlevel {
        font-size: 10px
    }

    .brand small {
        letter-spacing: 1.7px
    }
}.rank-name{display:block;font-size:13px;font-weight:800;color:#86602f;margin-top:3px}.rank-guide{background:#eff0e1;border-radius:14px;padding:15px 18px;margin:18px 0}.rank-guide summary{cursor:pointer;font-weight:800}.rank-guide p{font-size:12px}.rank-guide ul{list-style:none;padding:0;margin:10px 0 0}.rank-guide li{display:flex;gap:8px;padding:7px 0;border-top:1px solid #dce2cf;font-size:13px}.rank-guide li span{flex:1}.rank-guide strong{color:#89612c}#playerlevel{display:inline-block;max-width:175px;white-space:normal;vertical-align:middle}.level-up span{text-align:center}[dir=rtl] .rank-guide{text-align:right}@media(max-width:580px){#playerlevel{max-width:135px}.rank-name{font-size:11px}.level-up span{font-size:20px}.level-progress>div:first-child{max-width:125px}}
.adult-entry{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:19px 24px;border:1px solid #d2dbc6;background:#e8eddc;border-radius:16px;color:#285b48;text-decoration:none;margin:15px 0 28px}.adult-entry strong{display:block;font-size:15px}.adult-entry small{display:block;font-size:12px;color:#6b7962;margin-top:3px}.adult-entry>span:last-child{font-size:28px}.adult-entry:hover{background:#e0e8d2}.adult-footer-link{color:inherit;text-decoration:none}.child-toolbar{display:flex;justify-content:space-between;align-items:center;gap:15px;flex-wrap:wrap;margin:0 0 20px}.child-toolbar input{background:#fffdf6;border:1px solid #d5ddc8;color:#284a3d;border-radius:12px;padding:11px 15px;font:700 13px Nunito,Arial,sans-serif;min-width:240px}.child-toolbar>div{display:flex;gap:7px;flex-wrap:wrap}.child-toolbar button{background:#edefdf;border:1px solid transparent;color:#5c7356;border-radius:30px;font-size:11px;padding:8px 13px}.child-toolbar button.active{background:#285b48;color:#fffdf6}.child-toolbar button:focus-visible,.child-toolbar input:focus-visible{outline:3px solid #b86839;outline-offset:3px}[dir=rtl] .child-toolbar input{font-family:'Noto Sans Arabic',Tahoma,Arial,sans-serif}@media(max-width:580px){.adult-entry{padding:16px}.adult-entry small{font-size:11px}.child-toolbar label,.child-toolbar input{width:100%}.child-toolbar input{min-width:0}.child-toolbar{gap:10px}}