/* Shared responsive collection. Only the dialog body scrolls at large text sizes. */
.compacttop .xpchip.level-chip{display:flex;flex-direction:column;align-items:stretch;justify-content:center;gap:3px;min-width:118px;max-width:180px;padding:8px 14px;line-height:1.1;text-align:center;min-height:54px;width:auto}
.level-chip strong{font-size:17px}.level-chip small{font-size:11px;white-space:nowrap}.level-track{display:block;height:5px;background:#dcc677;border-radius:20px;overflow:hidden}.level-track i{display:block;height:100%;background:#6450ae;border-radius:20px}
.collection-open{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;padding:14px;margin:12px 0;border:2px solid #b8c9df;border-radius:16px;background:#fff4bf;color:#283956;font:inherit;text-align:left}.collection-open strong{white-space:nowrap}.collection-profile-avatar{width:48px;height:48px;border-radius:50%;object-fit:cover}
#tell-collection{position:fixed;inset:0;margin:auto;width:min(620px,calc(100% - 24px));max-width:620px;max-height:calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));padding:0;border:3px solid #b8c9df;border-radius:25px;background:#fffdf7;color:#283956;box-sizing:border-box;overflow:auto;font-family:inherit;font-size:1rem;box-shadow:0 12px 50px #18213b40}
#tell-collection::backdrop{background:#17203e85;backdrop-filter:blur(7px)}
#tell-collection *{box-sizing:border-box}#tell-collection .collection-panel{padding:20px}#tell-collection header{display:flex;align-items:center;justify-content:space-between;gap:12px}#tell-collection h2{font-size:1.5em;line-height:1.2;margin:0}#tell-collection button{font:inherit;color:inherit;cursor:pointer}#tell-collection [data-close]{flex:0 0 44px;width:44px;height:44px;border:2px solid #b8c9df;border-radius:14px;background:#fff;font-size:26px}#tell-collection button:focus-visible,.level-chip:focus-visible,.collection-open:focus-visible{outline:3px solid #7259bb;outline-offset:3px}
.collection-balance{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin:14px 0}.collection-balance strong{padding:7px 12px;background:#ffe07a;border-radius:12px}.collection-balance span{font-size:.85em}.collection-explain{font-size:.9em;line-height:1.5;margin:12px 0}.collection-status{font-size:.9em;color:#4c3a86;line-height:1.4}.collection-status:empty{display:none}.collection-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
#tell-collection .collection-item{display:flex;flex-direction:column;align-items:center;justify-content:start;gap:7px;min-width:0;border:2px solid #b8c9df;border-radius:18px;padding:12px 6px;background:#f2efff;box-shadow:0 3px 0 #b8c9df;line-height:1.2}#tell-collection .collection-item.owned{background:#fff7d3}.collection-item img{display:block;width:min(80px,100%);height:auto;aspect-ratio:1;border-radius:50%;object-fit:cover}.collection-item span{font-size:.8em}.collection-item strong{overflow-wrap:anywhere;font-size:.95em}.collection-preview{text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px}.collection-preview img{border-radius:50%;max-width:100%;height:auto}.collection-preview h3,.collection-preview p{margin:0;line-height:1.45}#tell-collection .collection-preview button{width:100%;min-height:48px;border:2px solid #b8c9df;border-radius:14px;padding:12px;background:#fff}#tell-collection .collection-preview .primary{background:#ffde6a;border-color:#d3ae4b;box-shadow:0 4px 0 #cda546}#tell-collection button:disabled{cursor:default;opacity:.65}
@media(max-width:420px){#tell-collection .collection-panel{padding:15px}.collection-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.collection-open{flex-wrap:wrap}.compacttop .xpchip.level-chip{min-width:112px;padding:6px 12px}.level-chip strong{font-size:15px}}
html[data-tell-theme="contrast"] #tell-collection,html[data-tell-theme="contrast"] .collection-open{background:#fff;color:#111;border-color:#111}
html[data-tell-theme="cream"] #tell-collection{background:#fff4d5}

#tell-collection [data-close]{display:grid;place-items:center;padding:8px}#tell-collection [data-close] svg{display:block;width:20px;height:20px;flex-shrink:0}

#tell-collection .rarity{font-size:11px;font-weight:800;letter-spacing:.4px;text-transform:uppercase}#tell-collection .rarity-Rare{border-color:#6298cb;background:#edf6ff}#tell-collection .rarity-Epic{border-color:#9b6ad0;background:#f3eaff}#tell-collection .rarity-Legendary{border-color:#d7a330;background:#fff1bf;box-shadow:0 3px 0 #c99938,inset 0 0 16px #f6cf6b55}#tell-collection .collection-item.locked{opacity:1}#tell-collection .collection-item img{opacity:1;filter:none}#tell-collection .collection-preview .rarity{padding:5px 12px;border-radius:12px;border:2px solid #c8b7e5}

/* App header: leave the installed-app status area clear, with one thin XP line. */
#app .shell{padding-top:0}
#app .tell-app-header{height:auto;min-height:0;display:block;flex-shrink:0;position:relative;isolation:isolate;margin:0 -18px 8px;padding:calc(env(safe-area-inset-top,0px) + 14px) 18px 12px;background:#f3f5ff;border-bottom:1px solid #c4d2e6;box-shadow:none;backdrop-filter:none;filter:none}
#app .tell-app-header .header-row{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:10px;min-height:44px}
#app .tell-app-header .header-level{font:800 18px/1.2 'Baloo 2',Nunito,sans-serif;white-space:nowrap}
#app .tell-app-header .header-product{font:800 22px/1.2 'Baloo 2',Nunito,sans-serif;color:#514482;letter-spacing:.2px}
#app .tell-app-header .header-settings{justify-self:end;margin:0;width:44px;height:44px;min-width:44px;min-height:44px;box-shadow:none;border:0;background:transparent;border-radius:12px;color:inherit;display:grid;place-items:center}
#app .tell-app-header .header-settings svg{width:25px;height:25px}
#app .tell-app-header .header-progress{display:flex;flex-direction:column;gap:5px;align-items:stretch;width:100%;min-width:0;max-width:none;margin:0;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;color:inherit;line-height:1}
#app .tell-app-header .header-xp{align-self:flex-end;font:800 11px/1.2 Nunito,sans-serif}
#app .tell-app-header .level-track{height:4px;width:100%;border-radius:3px;background:#d6dcec}
#app .tell-app-header .level-track i{background:#7a59be;border-radius:3px}
#app .tell-app-header.schools-header{background:#2864a0;color:#fff;border-bottom-color:#1e5286}
#app .schools-header .header-product{color:#fff;font-size:19px}
#app .schools-header .level-track{background:#ffffff45}
#app .schools-header .level-track i{background:#ffdb70}
#app .home-simplified .startbuttons{display:grid;grid-template-columns:minmax(0,1fr);width:min(420px,100%);max-width:420px;margin-left:auto;margin-right:auto;gap:0}
#app .home-simplified .startbuttons button{grid-column:1 / -1;width:100%}
@media(min-width:701px){#app .tell-app-header{margin-left:-46px;margin-right:-46px;padding-left:46px;padding-right:46px}}
@media(display-mode:standalone){#app .tell-app-header{padding-top:calc(env(safe-area-inset-top,0px) + 22px)}}
@media(max-height:600px){#app .tell-app-header{padding-bottom:8px;margin-bottom:4px}#app .home-simplified>.pip{max-height:100px;max-width:100px}}
html:is([data-tell-theme=contrast],[data-tell-theme=cream]) #app .tell-app-header{background:var(--tell-surface)!important;color:var(--tell-ink)!important;border-color:var(--tell-edge)!important}
#app .shell{--tell-shell-gutter:clamp(16px,4vw,46px);padding-left:var(--tell-shell-gutter);padding-right:var(--tell-shell-gutter)}
#app .tell-app-header{margin-left:calc(-1 * var(--tell-shell-gutter));margin-right:calc(-1 * var(--tell-shell-gutter));padding-left:var(--tell-shell-gutter);padding-right:var(--tell-shell-gutter)}
@media(max-width:600px){html[data-tell-text-size=largest] #app .tell-app-header .header-row{grid-template-columns:minmax(0,1fr) 44px;row-gap:6px}html[data-tell-text-size=largest] #app .tell-app-header .header-product{grid-column:1 / -1;grid-row:1;justify-self:center}html[data-tell-text-size=largest] #app .tell-app-header .header-level{grid-row:2;grid-column:1}html[data-tell-text-size=largest] #app .tell-app-header .header-settings{grid-row:2;grid-column:2}}

/* Compact stats and a consistent square home illustration on phones. */
#app .public-header .header-row{grid-template-columns:minmax(0,1fr) 44px}
#app .tell-app-header .header-stats{display:flex;flex-direction:column;gap:2px;min-width:0;align-items:flex-start}
#app .tell-app-header .header-level{font-size:15px;line-height:1.15}
#app .tell-app-header .header-xp{align-self:flex-start;font-size:10px;line-height:1.25}
#app .tell-app-header .header-settings svg{display:block;flex-shrink:0;width:24px;height:24px;aspect-ratio:1;fill:currentColor;stroke:none}
#app .tell-app-header .header-progress{margin-top:6px}
#app .tell-app-header .level-track{height:3px}
@media(max-width:700px){
 #app .home-content .home-simplified{display:grid;grid-template-areas:"brand" "art" "actions" "credit";grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto auto;align-content:center;align-items:center;justify-items:center;gap:clamp(8px,2svh,16px);width:100%;max-width:100%;height:100%;min-height:0;padding:8px 0 0;text-align:center}
 #app .home-simplified>.pip,#app .home-simplified>.home-presenter{display:none!important}
 #app .home-simplified .home-brand{display:block;grid-area:brand;width:100%;text-align:center}
 #app .home-simplified .titlelogo{display:flex;justify-content:center;margin:0;line-height:1}
 #app .home-simplified .titlelogo picture{display:block;width:min(180px,22svh)}
 #app .home-simplified .titlelogo img{display:block;width:100%;height:auto;max-height:none;object-fit:contain}
 #app .home-simplified .home-brand .eyebrow{max-width:none;margin:5px 0 0;font-size:9px;line-height:1.4;letter-spacing:.8px;text-align:center}
 #app .home-simplified .school-class-name{margin:4px 0 0;font-size:10px;line-height:1.4}
 #app .home-simplified .home-case-gallery{display:flex;grid-area:art;align-items:center;justify-content:center;min-height:0;width:100%;height:100%;padding-bottom:5px}
 #app .home-simplified .home-case-gallery img{display:block;width:min(58vw,28svh,260px);height:min(58vw,28svh,260px);aspect-ratio:1;object-fit:contain;border:3px solid #bbc9e2;border-radius:22px;background:#fffdf8;box-shadow:0 5px 0 #aabbd5}
 #app .home-simplified .home-case-gallery img:not(:first-child){display:none}
 #app .home-simplified .startbuttons{grid-area:actions;position:static;width:min(420px,100%);max-width:100%;margin:0;justify-self:center}
 #app .home-simplified .startbuttons button{min-height:50px;font-size:19px;padding:10px}
 #app .home-simplified>.powered{grid-area:credit;position:static;justify-self:center;margin:0;font-size:10px;line-height:1.5}
 html[data-tell-text-size=largest] #app .tell-app-header .header-stats{grid-column:1;grid-row:2}
 html[data-tell-text-size=largest] #app .public-header .header-stats,html[data-tell-text-size=largest] #app .public-header .header-settings{grid-row:1}
}
@media(max-width:700px){#app .home-content .home-simplified{grid-template-rows:auto auto auto auto;align-content:center;gap:clamp(10px,2.4svh,20px)}#app .home-simplified .home-case-gallery{height:auto}}
/* Compact app menu, coin destination and unmistakable collection ownership. */
#app .tell-app-header{position:relative}
#app .tell-app-header .header-coins{position:absolute;right:calc(var(--tell-shell-gutter) + 54px);top:calc(env(safe-area-inset-top,0px) + 24px);display:flex;align-items:center;gap:4px;font-size:12px;font-weight:900;line-height:1.2}
.coin-icon{display:inline-block;flex-shrink:0;vertical-align:middle;width:20px;height:20px}
.collection-balance strong,.collection-open strong{display:flex;align-items:center;gap:5px}
#tell-app-menu{position:fixed;inset:12px 12px auto auto;margin:env(safe-area-inset-top,0px) 0 0;width:min(340px,calc(100% - 24px));max-height:calc(100dvh - 40px - env(safe-area-inset-top));overflow:auto;box-sizing:border-box;border:3px solid #b8c9df;border-radius:22px;background:#fffdf8;color:#30436b;box-shadow:0 12px 45px #17213b55;padding:18px;font:inherit}
#tell-app-menu::backdrop{background:#17213b88;backdrop-filter:blur(5px)}
#tell-app-menu header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;gap:8px}#tell-app-menu h2{font-size:23px;margin:0}#tell-app-menu button{font:inherit;font-weight:800;color:inherit;cursor:pointer;min-height:46px;border:2px solid #d3ccec;background:#f3efff;border-radius:13px;padding:10px 14px}#tell-app-menu section>button{display:flex;width:100%;align-items:center;justify-content:space-between;gap:8px;margin-top:8px;text-align:left}#tell-app-menu header button{width:44px;font-size:24px;padding:0}#tell-app-menu p{line-height:1.5}#tell-app-menu a{color:#5f479e;font-weight:800}#tell-app-menu button:focus-visible{outline:3px solid #7259bb;outline-offset:2px}
#tell-collection .collection-item{position:relative}#tell-collection .collection-portrait{position:relative;display:block;width:92px;height:92px}#tell-collection .collection-portrait img{width:100%;height:100%;object-fit:contain}
#tell-collection .collection-ownership{position:absolute;right:-4px;bottom:-2px;display:grid;place-items:center;width:29px;height:29px;border:2px solid #fffdf8;border-radius:50%;background:#64718a;color:#fff;font-size:18px;box-shadow:0 2px 3px #18213b33}
#tell-collection .locked .collection-portrait img{filter:saturate(.35);opacity:.55}#tell-collection .locked:hover .collection-portrait img,#tell-collection .locked:focus-visible .collection-portrait img{filter:none;opacity:1}#tell-collection .owned .collection-ownership{background:#16754e}#tell-collection .equipped{outline:3px solid #7259bb;outline-offset:-3px}#tell-collection .equipped .collection-ownership{background:#7259bb}
@media(display-mode:standalone){#app .tell-app-header .header-coins{top:calc(env(safe-area-inset-top,0px) + 32px)}}
@media(max-width:380px){#app .schools-header .header-product{font-size:12px}#app .schools-header .header-coins{right:calc(var(--tell-shell-gutter) + 46px);font-size:10px}#app .schools-header .header-coins .coin-icon{width:16px;height:16px}}
html[data-tell-text-size=largest] #app .header-coins{position:static;justify-content:flex-end;margin-top:5px}
html:is([data-tell-theme=contrast],[data-tell-theme=cream]) #tell-app-menu{background:var(--tell-surface);color:var(--tell-ink);border-color:var(--tell-edge)}
@media(max-width:700px){#app .home-simplified .startbuttons{width:min(58vw,28svh,260px)}#app .home-simplified .startbuttons button{font-size:16px;line-height:1.2;min-height:48px;padding:10px 7px}}
#tell-app-menu.has-panel{width:min(900px,calc(100% - 24px))}#tell-app-menu .menu-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:0}#tell-app-menu.has-panel .menu-layout{grid-template-columns:minmax(0,1fr) 190px;gap:14px}#tell-app-menu .menu-layout>header{grid-column:1/-1}#tell-app-menu .menu-nav{grid-column:1;display:flex;flex-direction:column;gap:8px}#tell-app-menu.has-panel .menu-nav{grid-column:2;grid-row:2}#tell-app-menu .menu-nav button{text-align:left;width:100%}#tell-app-menu .menu-nav button.active{background:#e0d7ff;border-color:#7259bb}#tell-app-menu .menu-detail{grid-column:1;grid-row:2;border:2px solid #cfc7e5;border-radius:16px;padding:16px;min-width:0;max-height:calc(100dvh - 140px - env(safe-area-inset-top));overflow:auto;background:#fffdf8}#tell-app-menu .menu-detail[hidden]{display:none}#tell-app-menu .menu-detail h2{margin-bottom:14px}#tell-app-menu .menu-detail p{margin:10px 0;font-size:14px}#tell-app-menu .menu-detail .wp-settings{padding:0}#tell-app-menu .menu-detail button{font-size:14px}#tell-app-menu .menu-detail label{display:block;margin:12px 0;font-weight:800}#tell-app-menu .menu-detail input:not([type=checkbox]),#tell-app-menu .menu-detail select{display:block;width:100%;box-sizing:border-box;padding:10px;border:2px solid #b8c9df;border-radius:12px;background:#fff;color:#30436b;font:inherit}#tell-app-menu .menu-detail input[type=checkbox]{margin-right:8px}#tell-app-menu .menu-detail .settingrow{display:flex;align-items:center;gap:10px;padding:10px 0}#tell-app-menu .menu-detail .settingrow button{flex-shrink:0}#tell-app-menu #tell-collection.embedded{position:static;inset:auto;display:block;margin:0;border:0;box-shadow:none;width:100%;max-width:none;max-height:none;overflow:visible;background:transparent}#tell-app-menu #tell-collection .collection-panel{padding:0}#tell-app-menu #tell-collection .collection-grid{grid-template-columns:repeat(3,minmax(0,1fr))}#tell-app-menu #tell-collection .collection-portrait{width:min(80px,100%);height:auto;aspect-ratio:1}
@media(max-width:640px){#tell-app-menu.has-panel .menu-layout{grid-template-columns:minmax(0,1fr);gap:12px}#tell-app-menu.has-panel .menu-nav{grid-column:1;grid-row:2;flex-direction:row;overflow:auto;padding:0 0 5px}#tell-app-menu.has-panel .menu-nav button{width:auto;flex:0 0 auto;white-space:nowrap;font-size:12px;padding:8px 10px}#tell-app-menu .menu-detail{grid-row:3;padding:12px;max-height:calc(100dvh - 210px - env(safe-area-inset-top))}#tell-app-menu #tell-collection .collection-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

#tell-app-menu .tell-bug-form{display:grid;gap:12px}#tell-app-menu .tell-bug-form label{font-weight:900}#tell-app-menu .tell-bug-form p{margin:0;font-size:14px;line-height:1.45}#tell-app-menu .tell-bug-form textarea{box-sizing:border-box;width:100%;min-height:120px;resize:vertical;border:2px solid #b8c9df;border-radius:13px;background:var(--tell-surface,#fffdf8);color:var(--tell-ink,#30436b);padding:12px;font:16px/1.5 Nunito,system-ui;user-select:text;-webkit-user-select:text}#tell-app-menu .tell-bug-status{overflow-wrap:anywhere}

#app .school-leaders{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:10px 0 18px}#app .school-leader{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;padding:9px 6px;background:#fff4ce;border:2px solid #d9b55e;border-radius:16px;min-width:0}#app .school-leader:nth-child(2){background:#f1f5fc;border-color:#bdc9dc}#app .school-leader:nth-child(3){background:#ffeddf;border-color:#d1a17c}#app .school-leader .collection-profile-avatar{width:36px;height:36px;flex-shrink:0}#app .school-leader strong{font-size:12px;line-height:1.25;overflow-wrap:anywhere}#app .school-leader b,#app .school-leader>span{font-size:13px}#app .school-leaders-title{font-size:20px;margin:14px 0 6px}#app .school-my-rank{border:2px solid #af9ad8;border-radius:14px;margin-bottom:16px;overflow:hidden}#app .school-board-limit{font-size:12px}

#app .school-leader>span{display:flex;align-items:center;gap:3px}
#tell-app-menu .menu-nav [data-menu=sound]{display:flex;align-items:center;justify-content:space-between;gap:12px}
#tell-app-menu .tell-menu-sound-status{font-size:12px;color:#5e4d99;font-weight:900;background:#eee8ff;border-radius:10px;padding:4px 9px}
#tell-app-menu .tell-menu-version{display:block;grid-column:1/-1;grid-row:3;margin-top:14px;color:#778196;font:600 11px/1.4 Nunito,system-ui,sans-serif;text-align:center}
@media(max-width:640px){#tell-app-menu.has-panel .tell-menu-version{grid-row:4}}

/* Let the desktop app bar escape the centred page column. */
@media(min-width:701px){
 #app .shell > .tell-app-header{align-self:center;width:100vw;max-width:none;margin-left:0;margin-right:0}
}
