/* Shared responsive layout for the playground, charts, shop and studio. */
html{color-scheme:light}*,*::before,*::after{box-sizing:border-box}body{margin:0}img,canvas{max-width:100%}input,textarea,select{max-width:100%}button,a,select,input{touch-action:manipulation}header>*,.activity-card,.studio-controls>*,.manage-panel,.book,.chart-heading>*,.friends-ribbon>*{min-width:0}header nav a{white-space:nowrap}button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid #6c46bc;outline-offset:3px}.paint-tools .palette{grid-template-columns:repeat(auto-fit,minmax(40px,1fr))!important;gap:10px!important}.paint-tools .color-choice{width:40px!important;height:40px!important;margin:3px;border-radius:50%}.studio-controls [data-slot=select-trigger]{max-width:100%}.drawing-area canvas{touch-action:none}.answer{overflow-wrap:anywhere}.social-links{flex-wrap:wrap}.contact-details a{overflow-wrap:anywhere}.game-top .close-button{min-width:44px;min-height:44px}
@media(max-width:850px){.paint-tools{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;align-items:center;gap:14px!important}.paint-tools h2,.paint-tools .palette{grid-column:1/-1}.paint-tools label{margin:0;line-height:1.5}.paint-tools input[type=color]{width:100%;height:44px}.paint-tools>button:last-child{grid-column:1/-1}.drawing-area{min-width:0}.site-header nav{gap:20px}}
@media(max-width:760px){header,header.site-header{display:grid!important;grid-template-columns:minmax(0,1fr) auto auto;gap:10px!important;padding:14px 18px!important;align-items:center}header>.brand,header.site-header>a:first-child{grid-column:1;grid-row:1}header .brand .logo,header.site-header>a:first-child img{width:clamp(96px,25vw,120px)!important;height:auto}header>.motion-toggle{grid-column:2;grid-row:1;margin:0!important;min-height:44px;max-width:82px;white-space:normal;font-size:.8rem;padding:8px}header>.language-control{grid-column:3;grid-row:1;margin:0!important}header .language-control select{width:94px;padding:10px 8px;font-size:1rem}header.site-header .site-language{grid-column:3;grid-row:1;margin:0}header.site-header .site-language [data-slot=select-trigger]{min-width:94px;width:100%;font-size:1rem}header nav,header.site-header nav{grid-column:1/-1;grid-row:2;display:flex!important;width:100%;max-width:100%;justify-content:flex-start!important;gap:20px!important;overflow-x:auto;overscroll-behavior-inline:contain;scrollbar-width:thin;padding:4px 2px 7px;-webkit-overflow-scrolling:touch}header nav a,header.site-header nav a{flex:none;font-size:.94rem;padding:10px 0;min-height:44px}.friends-ribbon{max-width:calc(100% - 36px)}.ribbon-copy{flex-shrink:0}.ribbon-friends{min-width:0}.shop-page,.manager-page,.charts-page,.coloring-page{width:100%;max-width:100%;padding-left:18px;padding-right:18px}.book-grid,.settings-grid,.manage-grid{grid-template-columns:minmax(0,1fr)}.manage-tabs{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;gap:6px}.manage-tabs button{padding:12px 8px;min-height:44px;white-space:normal;line-height:1.35}.listing-row{align-items:flex-start;flex-wrap:wrap}.listing-row>div{min-width:0}.listing-row h3{overflow-wrap:anywhere}.cover-preview{flex-wrap:wrap}.book-info,.manage-panel{padding:20px}.book-cover{height:260px}.studio-controls{gap:18px!important}.studio-controls>div{flex:1 1 220px;width:100%}.studio-controls [data-slot=select-trigger]{width:100%;min-width:0}.studio-controls [data-slot=tabs-list]{width:100%;display:flex}.studio-controls [data-slot=tabs-trigger]{flex:1;min-height:44px}.difficulty-note{margin:0;flex-basis:100%}.chart-tools{width:100%;flex-direction:row}.chart-tools [data-slot=select-trigger]{flex:1;min-width:0;width:100%}.chart-tools [data-slot=button]{min-height:44px}.parent-strip{flex-wrap:wrap}.parent-strip>div{flex:1 1 100%}.parent-strip a{margin-left:0;white-space:normal}.coloring-invite,.chart-invite{gap:18px}.coloring-invite>a,.chart-invite>a{white-space:normal;text-align:center}.drawing-page-gallery{scroll-padding-left:14px}.drawing-page-gallery button{min-height:70px}.drawing-area p{margin:12px 0 0}.shop-page h1,.manager-page h1,.charts-page h1,.coloring-page h1{font-size:clamp(2rem,8vw,3rem);overflow-wrap:break-word;line-height:1.18;letter-spacing:-.025em}}
@media(max-width:500px){header,header.site-header{padding:12px!important;gap:7px!important}.friends-ribbon{max-width:calc(100% - 24px);margin-left:12px;margin-right:12px}.ribbon-friends .ribbon-rainbow{width:58px!important;height:58px!important}.ribbon-friends .sprite{width:42px;height:42px}.ribbon-friends{gap:1px}.ribbon-copy .motion-toggle{max-width:95px;min-height:44px;white-space:normal}.welcome{padding:24px 18px;min-height:0;margin-bottom:28px;border-radius:24px}.welcome h1{font-size:clamp(2.1rem,8.4vw,2.75rem);line-height:1.14;letter-spacing:-.025em}.welcome p{font-size:1rem}.character-stage{height:210px;width:100%;max-width:310px}.sprite.rainbow{width:190px;left:calc(50% - 95px)}.sprite.panda{width:125px;left:calc(50% - 120px)}.sprite.bunny{width:115px;left:calc(50% + 5px)}.hero-actions{gap:10px}.hero-button{flex:1 1 110px;min-height:46px;padding:12px 10px}.learn-first{padding:20px;margin-bottom:30px}.learn-first-buttons{gap:12px}.section-heading{flex-wrap:wrap;gap:10px}.section-heading h2{font-size:1.6rem;line-height:1.3}.game-filters{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.game-filters button{min-height:44px;font-size:.94rem;padding:10px 8px;line-height:1.4}.activity-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 12px}.activity-card{padding:16px 12px}.card-top .category{font-size:.75rem;letter-spacing:0}.card-title{font-size:1.15rem;line-height:1.3;letter-spacing:-.01em;overflow-wrap:anywhere}.card-copy{font-size:.94rem;min-height:0;line-height:1.55}.question-count{font-size:.8rem;margin-top:auto;min-height:0}.card-action{font-size:.94rem;min-height:44px;margin-top:0;padding:12px 5px}.letter-icon{font-size:2.5rem;letter-spacing:-1px}.tile-icon{font-size:3rem}.chart-invite,.coloring-invite{padding:23px 20px}.chart-invite>a,.coloring-invite>a{width:100%;margin:0}.parent-strip{padding:20px}.social-links{gap:20px;font-size:1rem}dialog{width:calc(100% - 20px);max-width:none;max-height:calc(100dvh - 24px);padding:17px;border-radius:22px;overscroll-behavior:contain}#game-title{font-size:1.35rem;line-height:1.4}.game-label{letter-spacing:.07em;max-width:calc(100% - 55px);line-height:1.4}.question-art{padding:18px 12px;gap:8px;min-height:130px;margin:17px 0}.question-art svg{max-width:100%;width:180px;height:140px}.answer{font-size:1rem;min-height:54px;padding:14px 8px}.answers{gap:10px}.level-buttons,.round-buttons{gap:8px}.level-buttons button,.round-buttons button{min-height:48px;font-size:.94rem;line-height:1.4}.round-buttons small{font-size:.8rem}.lesson-jump{grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}.lesson-jump button{min-height:44px;padding:8px 3px}.lesson-visual{padding:20px 12px;min-height:190px}.lesson-letter{font-size:4.5rem}.count-items{gap:8px;font-size:1.6rem}.feedback{margin:14px 0;font-size:1rem}.learning-chart{padding:22px 12px}.chart-heading{gap:14px}.chart-heading h2{font-size:1.7rem}.chart-heading p{font-size:1rem}.chart-tools{flex-direction:column;gap:10px}.chart-tools [data-slot=select-trigger],.chart-tools [data-slot=button]{width:100%;min-width:0!important}.chart-item-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 10px}.chart-item{padding:18px 8px;box-shadow:0 4px 0 #ccd4e5;min-width:0}.chart-picture svg{width:70px;height:70px}.chart-picture{font-size:2.8rem;min-height:76px}.chart-color{width:64px;height:64px}.chart-item strong{font-size:1rem}.chart-letter{font-size:2rem;letter-spacing:1px}.chart-topics{gap:9px}.chart-topics button{min-height:44px;max-width:100%;line-height:1.4}.coloring-book-card{padding:22px}.coloring-book-card h2{font-size:1.35rem}.studio-controls{padding:16px!important}.studio-workspace{padding:12px!important;gap:20px}.paint-tools{gap:12px!important}.paint-tools .palette{grid-template-columns:repeat(auto-fit,minmax(44px,1fr))!important;gap:8px!important}.paint-tools .color-choice{width:38px!important;height:38px!important;box-shadow:0 0 0 3px #fff;outline-offset:1px}.paint-tools [data-slot=select-trigger],.paint-tools label{font-size:1rem}.drawing-area{padding:8px;border-radius:12px}.drawing-area p{font-size:.875rem}.shop-intro{font-size:1rem}.book-info,.manage-panel{padding:18px}.empty-panel{padding:22px}.book-cover{height:230px}.contact-details{padding:22px 18px}.site-footer{gap:18px}.site-language [data-slot=select-trigger],.studio-controls [data-slot=select-trigger]{font-size:1rem!important}}
@media(max-width:350px){header>.motion-toggle{max-width:65px;font-size:.75rem;padding:7px 4px}header .language-control select{width:88px}.ribbon-friends .ribbon-rainbow{display:none}.activity-card{padding:14px 10px}.card-title{font-size:1.08rem}.card-copy{font-size:.875rem}.sprite.bird-small{width:45px;right:0}.lesson-jump{grid-template-columns:repeat(4,minmax(0,1fr))}.friends-ribbon .motion-toggle{font-size:.75rem}}
@media(max-height:600px) and (orientation:landscape){dialog{max-height:calc(100dvh - 16px);padding:16px}.character-stage{height:190px}.question-art{min-height:90px;margin:12px 0}.question-art svg{height:90px}.welcome{min-height:0}}
@media print{header,.friends-ribbon{display:none!important}}

/* Keep multi-symbol card artwork in its own row, including narrow phones. */
.activity-card .card-art{flex-shrink:0;min-width:0}.activity-card .tile-icon{white-space:nowrap;max-width:100%}.activity-card .multi-icon{display:flex;align-items:center;justify-content:center;flex-wrap:nowrap;gap:.15em;font-size:3rem;line-height:1.2;letter-spacing:0}.multi-icon>span{display:block;flex:0 0 auto}
@media(max-width:600px){.activity-card .multi-icon{font-size:clamp(1.4rem,5.5vw,2.2rem);gap:.16em}.activity-card .card-art{height:95px;min-height:95px;margin:4px 0 8px}}

/* The APK link remains visible and easy to tap at every screen width. */
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.hero-actions .app-download{background:#6853c6;color:#fff;box-shadow:0 5px 0 #493c96;white-space:normal;min-height:48px;text-align:center}
.welcome .app-download-note{font-size:14px;line-height:1.5;margin:16px 0 0;color:#354766}
@media(max-width:500px){.hero-actions .app-download{flex-basis:100%;width:100%}.welcome .app-download-note{font-size:13px}}