body[data-view]:not([data-view="classic"]){display:block;min-height:100dvh;height:auto;overflow-y:auto}
html:has(body[data-view]:not([data-view="classic"])){height:auto;overflow-y:auto}
header{margin-inline:auto}
.welcome,.path-menu,.new-activity{position:relative;z-index:1;width:min(1050px,calc(100% - 32px));margin:20px auto 36px}
.cloud-title{
 position:relative;width:fit-content;max-width:100%;display:block;margin:0 auto 28px;
 padding:.28em .62em .36em;border:3px solid #fff7e8;border-radius:1em;
 background:linear-gradient(180deg,#fffaf0,#ffe3ab);color:#4c187a;text-align:center;
 font-size:clamp(32px,6vw,66px);font-weight:950;letter-spacing:-.045em;
 text-shadow:0 2px #fff9ed;box-shadow:0 6px #ecae69,0 11px #36156777;
}
.path-menu.launch .cloud-title{
 background:linear-gradient(180deg,#f3fff5,#b8f6db);
 box-shadow:0 6px #65c6a6,0 11px #36156777;
}
.path-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.path-card{display:flex;flex-direction:column;align-items:center;gap:8px;padding:20px 16px 14px;color:#4e188b;border:3px solid #fff7e9;border-radius:36px;box-shadow:0 9px 0 #46227c69;transition:transform .16s,box-shadow .16s}
.path-card:hover,.game-pick:hover{transform:translateY(-3px)}
.path-card:active,.game-pick:active{transform:translateY(2px)}
.path-discover{background:linear-gradient(145deg,#fff08e,#ffce52)}
.path-launch{background:linear-gradient(145deg,#ccffed,#69d8b4)}
.path-card strong{font-size:clamp(26px,4vw,46px);line-height:1.05}
.age-pill{font-size:17px;background:#fff9ee;padding:4px 12px;border-radius:20px;font-weight:800}
.path-card img{width:min(100%,280px);height:auto;border-radius:30px}
.path-caption{background:#fff7e9;border-radius:22px;padding:9px 16px;font-size:clamp(16px,2.1vw,23px);font-weight:800}
.path-stars{color:#8b5017;letter-spacing:4px;font-size:22px}
.game-picker{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.game-pick{
 --top:#fff3bd;--fill:#ffda73;--edge:#e59c47;--badge:#fff4c7;--icon:#8c4008;
 display:grid;justify-items:center;align-content:center;gap:9px;min-height:142px;padding:12px;
 border:2px solid #fff9ec;border-radius:25px;background:linear-gradient(155deg,var(--top),var(--fill));
 color:#3d146a;box-shadow:0 5px var(--edge),0 10px #2e0e5d75;
 transition:transform .16s,box-shadow .16s;
}
.game-pick[data-game="numbers"],.game-pick[data-game="tens"]{
 --top:#e5faff;--fill:#9fdefd;--edge:#568fcb;--badge:#edfaff;--icon:#23487c;
}
.game-pick[data-game="stars"],.game-pick[data-game="tables"]{
 --top:#ffebf5;--fill:#f9acd8;--edge:#cb6eb7;--badge:#fff0f9;--icon:#83255f;
}
.game-pick[data-game="match"]{
 --top:#e4fff5;--fill:#93ead0;--edge:#4bb698;--badge:#ebfff6;--icon:#196d5b;
}
.game-pick[data-game="box"],.game-pick[data-game="share"]{
 --top:#fff1db;--fill:#ffc2a3;--edge:#dd846e;--badge:#fff3e9;--icon:#903e39;
}
.game-pick[data-game="pattern"],.game-pick[data-game="train"]{
 --top:#f7eaff;--fill:#d7bcff;--edge:#9b6cdb;--badge:#fbf0ff;--icon:#5d2e9a;
}
.game-icon{
 display:grid;place-items:center;min-width:58px;height:52px;padding:0 8px;
 border:2px solid #fff9ee;border-radius:17px;
 background:var(--badge);color:var(--icon);box-shadow:0 3px var(--edge);
 transform:rotate(-7deg);font-size:30px;font-weight:950;letter-spacing:-.06em;line-height:1;
}
.game-pick:nth-child(even) .game-icon{transform:rotate(7deg)}
.game-name{font-size:clamp(16px,1.85vw,23px);font-weight:950;line-height:1.12;letter-spacing:-.025em;text-wrap:balance;text-shadow:0 1px #fff9ed}
.path-card strong{text-shadow:0 2px #fff9eb;letter-spacing:-.035em}
@media (min-width:761px){
 .game-picker:has(.game-pick:nth-child(6):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}
}
.activity-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
.activity-heading h1{font-size:clamp(20px,4vw,36px);margin:0;text-align:center}
.activity-board{display:grid;grid-template-columns:minmax(145px,27%) 1fr;gap:18px;align-items:center;background:#fff7ea;color:#54258c;padding:22px;border-radius:30px;text-align:center;box-shadow:0 6px 0 #47277a88}
.activity-cat{width:100%;height:auto;border-radius:24px}
.activity-content{min-width:0}
.activity-content h2{font-size:clamp(21px,4vw,33px);margin:0 0 12px}
#activityObjects{margin-block:12px}
#activitySetting select{font:inherit;margin-left:6px;padding:4px 8px;border-radius:9px}
.activity-choices,.object-tiles{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.activity-choice,.object-button{min-width:54px;min-height:49px;padding:8px 12px;border:2px solid #c4a5e8;border-radius:16px;background:#eee0ff;color:#53218e;font-weight:800;font-size:clamp(22px,5vw,34px)}
.object-button{font-size:28px}
.object-button[aria-pressed="true"]{background:#ffe491;border-color:#d3a53c}
.activity-choice:hover,.object-button:hover{background:#d7f8e9}
.activity-choice:disabled,.object-button:disabled{opacity:.78;cursor:default}
#activityStatus{min-height:1.5em;margin-top:12px;font-weight:700}
.ten-frame{display:grid;grid-template-columns:repeat(5,minmax(28px,52px));justify-content:center;gap:5px;margin:12px auto}
.ten-frame span{aspect-ratio:1;display:grid;place-items:center;border:2px solid #d1b3eb;border-radius:10px;font-size:clamp(17px,4vw,26px)}
.ten-frame span.filled{background:#ffe495;border-color:#dabe71}
.equation-reveal{font-size:clamp(23px,6vw,42px);font-weight:900;margin:10px 0;color:#432075}
.creature.mascot-feedback{background:none;box-shadow:none;transform:none;width:100px;border-radius:14px;overflow:hidden;height:auto}
.creature.mascot-feedback::before,.creature.mascot-feedback::after{display:none}
.mascot-feedback img{width:100%;display:block}
#activityNext{margin-top:8px}
@media(max-width:760px){
 html:has(body[data-view]){height:auto;overflow-y:auto}
 body[data-view]{display:block;min-height:100dvh;height:auto;overflow-y:auto}
 body[data-view="classic"] .stage{overflow:visible;padding-bottom:12px}
 .welcome,.path-menu,.new-activity{width:calc(100% - 24px);margin:12px auto 24px}
 .cloud-title{margin-bottom:22px}
 .path-grid{grid-template-columns:1fr;gap:13px}
 .path-card{display:grid;grid-template-columns:minmax(85px,35%) 1fr;text-align:center;padding:12px;gap:6px;border-radius:24px}
 .path-card img{grid-column:1;grid-row:1 / span 4;border-radius:16px}
 .path-card strong,.age-pill,.path-caption,.path-stars{grid-column:2;justify-self:center}
 .path-caption{font-size:14px;padding:5px 8px}
 .age-pill{font-size:13px}
 .path-stars{font-size:16px}
 .game-picker{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 11px}
 .game-pick{min-height:108px;padding:8px;border-radius:20px;gap:7px}
 .game-icon{min-width:48px;height:43px;border-radius:14px;font-size:24px}
 .game-name{font-size:clamp(15px,3.8vw,19px)}
 .activity-board{grid-template-columns:1fr;padding:14px}
 .activity-cat{width:100px;margin:auto;grid-row:2}
 .activity-content h2{font-size:23px}
 .header-actions{flex-wrap:wrap;justify-content:flex-end}
}
@media(prefers-reduced-motion:reduce){.path-card,.game-pick{transition:none}}
.activity-listen{display:inline-block;margin:0 0 8px;padding:7px 13px;border:1px solid #d5b9ee;border-radius:16px;color:#53218e;background:#efe3fb;font-weight:800}
.matching-activity #activityChoices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.quantity-card{display:flex;flex-wrap:wrap;align-content:center;align-items:center;justify-content:center;min-width:0;min-height:170px;padding:10px 6px;border:2px solid #d5b9ee;border-radius:18px;background:#eee0ff;font-size:clamp(26px,3.25vw,43px);line-height:1}
.quantity-card img{
 flex:none;width:calc((100% - 12px)/3);max-width:78px;aspect-ratio:1;
 object-fit:contain;pointer-events:none;
}
.quantity-card[data-quantity="1"] img,.quantity-card[data-quantity="2"] img{width:calc((100% - 6px)/2)}
.match-target{
 display:grid;place-items:center;width:1.7em;aspect-ratio:1;margin:4px auto 10px;
 border:2px solid #d0a3ed;border-radius:.45em;background:#f4e2ff;
 box-shadow:0 4px #d2b5e6;color:#542084;line-height:1;
}
.quantity-card:hover:not(:disabled){background:#d7f8e9;border-color:#8ccab0}
.ten-frame span.added-fish{background:#c8f6e6;border-color:#69b89b}
@media(max-width:760px){
 .matching-activity #activityChoices{gap:6px}
 .quantity-card{min-height:114px;padding:6px 2px;font-size:clamp(19px,6vw,32px)}
}
.cookie-stock{font-weight:800;font-size:22px}
.card:has(#limit option[value="100"]:checked) .equation{font-size:clamp(32px,12cqw,93px);gap:clamp(4px,1.5cqw,12px)}
.card:has(#limit option[value="100"]:checked) .equation input{width:1.95em}

.pattern-activity .activity-board{grid-template-columns:minmax(110px,18%) 1fr}
.pattern-sequence,.pattern-activity #activityChoices{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(6px,1vw,12px)}
.pattern-card{display:grid;place-items:center;aspect-ratio:1;border:3px solid #d3b1f3;border-radius:20px;background:#fffefa;color:#5b2794;font-family:inherit;font-size:clamp(39px,6vw,78px);font-weight:900;line-height:1;box-shadow:0 4px 0 #d7c0eb}
.pattern-sequence .pattern-card{width:clamp(67px,9vw,123px)}
.pattern-sequence .pattern-card:nth-child(even){background:#f1e4ff}
.pattern-sequence .pattern-missing{background:#ffedb5;border-style:dashed;border-color:#c19135}
.pattern-sequence .pattern-solved{background:#c8f6e6;border-color:#69b89b}
.pattern-activity #activityChoices{margin-top:20px}
.pattern-option{width:clamp(64px,8vw,103px);background:#eee0ff;font-size:clamp(35px,5vw,65px)}
.pattern-option:hover:not(:disabled){background:#c8f6e6;border-color:#69b89b}
.pattern-option:disabled{cursor:default;opacity:.75}
@media(max-width:760px){
 .pattern-activity .activity-board{grid-template-columns:1fr}
 .pattern-sequence .pattern-card{width:clamp(54px,19vw,88px);font-size:clamp(34px,11vw,54px);border-radius:13px}
 .pattern-option{width:clamp(50px,17vw,74px);font-size:clamp(32px,10vw,49px);border-radius:13px}
 .pattern-activity #activityChoices{margin-top:13px}
}

.back-button{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:10px 19px;border:2px solid #ffecc6;border-bottom:5px solid #c4791e;border-radius:17px;background:#ffd56f;color:#542769;line-height:1.15;font-family:inherit;font-size:clamp(16px,2vw,21px);font-weight:900;white-space:nowrap;box-shadow:0 3px 8px #38176155;cursor:pointer}
.back-button:hover{background:#ffe59d}
.back-button:focus-visible{outline:3px solid white;outline-offset:3px}
@media(max-width:760px){
 .activity-heading:has(.back-button){display:grid;grid-template-columns:minmax(0,1fr) auto}
 #activityBack{grid-column:1/-1;width:100%;grid-row:1}
 .activity-heading h1{text-align:left}
 header:has(#homeButton:not([hidden])){display:grid;grid-template-columns:1fr auto auto;gap:8px}
 header:has(#homeButton:not([hidden])) .header-actions{display:contents}
 #homeButton{grid-column:1/-1;grid-row:2;width:100%}
 header:has(#homeButton:not([hidden])) #sound{justify-self:end}
}

.table-modes{display:flex;justify-content:center;gap:7px;margin-bottom:10px}
.table-mode,.share-take{min-height:44px;border:2px solid #cba9ed;border-radius:13px;padding:6px 12px;background:#f4e8fc;color:#53218e;font-weight:800}
.table-mode[aria-pressed="true"]{background:#6841a5;color:white;border-color:#6841a5}
.grid-row-setting{display:flex;align-items:center;justify-content:center;gap:8px;font-weight:700;margin-bottom:10px}
.grid-row-setting select{font:inherit;border-radius:8px;padding:4px 8px}
.times-grid{display:grid;grid-template-columns:repeat(11,minmax(0,1fr));gap:3px;width:min(100%,365px);margin-inline:auto}
.times-cell,.axis-mark{aspect-ratio:1;display:grid;place-items:center;border-radius:5px}
.times-cell{background:#f2e9fb;border:1px solid #d2b9e8}
.times-cell:nth-child(even){background:#e9daf6}
.times-cell.times-filled{background:#a87ce4;border-color:#7f4bb9}
.times-cell.times-filled:nth-child(even){background:#bf99ee}
.axis-mark{color:#53218e;font-size:clamp(12px,2vw,17px);font-weight:900}
.axis-active{background:#ffda71;color:#4b246b}
.share-activity .activity-board{grid-template-columns:1fr}
.share-activity .activity-cat{display:none}
.share-tray{max-width:650px;margin:0 auto 14px;padding:12px;border:2px solid #eac683;border-radius:20px;background:#ffedc6}
.share-cookies{display:flex;justify-content:center;flex-wrap:wrap;overflow-wrap:anywhere;min-height:1.25em;font-size:clamp(23px,4vw,39px);line-height:1.3}
.share-chats{display:flex;justify-content:center;gap:12px}
.share-card{flex:1;min-width:0;max-width:260px;display:grid;align-content:start;gap:6px}
.share-give{display:grid;justify-items:center;gap:5px;min-width:0;min-height:110px;background:#f0dfff;color:#53218e;border:2px solid #c8a7ec;border-radius:19px;padding:9px;font-size:clamp(17px,3vw,25px)}
.share-give img{width:min(100%,160px);border-radius:13px}
.share-give:hover:not(:disabled){background:#e1f8ed;border-color:#78bc9e}
.share-take:disabled{opacity:.45}
@media(max-width:460px){.share-chats{gap:5px}.share-give{padding:4px}.share-take{font-size:12px;padding:4px}.times-grid{gap:2px}}
.equation-explanation{flex:0 0 100%;font-weight:800;font-size:clamp(18px,3vw,25px);color:#633e86;text-align:center}

/* Taille du jeu calculée après chaque changement de contenu. */
html:has(body[data-view="classic"]),html:has(body[data-view="activity"]){height:100%;overflow:hidden}
body[data-view="classic"],body[data-view="activity"]:not([data-view="classic"]){display:flex;height:100dvh;min-height:0;overflow:hidden}
body[data-view="classic"] .stage,.activity-viewport{flex:1;min-height:0;width:100%;display:flex;align-items:center;justify-content:center;overflow:hidden}
.activity-viewport .new-activity{flex:none;margin:0;transform:scale(var(--activity-scale,1));transform-origin:center}
.table-mode.table-mode-learn{background:#d1f3e5;border-color:#70bda3;color:#245847}
.table-mode.table-mode-quiz{background:#ffe3a0;border-color:#d3a951;color:#633c25}
.table-mode[aria-pressed="true"]{outline:2px solid currentColor;outline-offset:-5px}
.table-result{font-size:2.2em;font-weight:950;line-height:1;color:#5b1c9a;vertical-align:middle}
.table-activity .times-grid{width:min(100%,365px,45dvh)}
@media(max-width:760px){
 .new-activity .activity-cat{width:72px}
 .activity-board{gap:8px}
 .table-activity .activity-cat{display:none}
 .table-activity .times-grid{width:min(100%,355px,42dvh)}
 .table-result{font-size:2em}
}
@media(max-height:680px){
 .activity-heading{margin-bottom:8px}
 .activity-board{padding:12px}
 .activity-content h2{margin-bottom:6px}
 #activityObjects{margin-block:7px}
 #activityStatus{margin-top:7px}
 .table-activity .times-grid{width:min(100%,365px,40dvh)}
}

.quantity-groups{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.quantity-groups .ten-frame{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-content:start;width:min(100%,195px);gap:4px;margin:0;padding:6px;border:2px solid #d1b3eb;border-radius:14px;background:#f7effe}
.quantity-groups .ten-frame span{min-width:0;border-radius:7px;font-size:clamp(15px,2vw,23px)}
@media(max-width:580px){
 .quantity-groups{gap:5px}
 .quantity-groups .ten-frame{width:calc((100% - 5px)/2);gap:2px;padding:4px}
}

.numilou-intro{text-align:center;margin:0 auto clamp(12px,2.5dvh,24px)}
.numilou-intro h1{margin:0}
.numilou-logo{display:block;width:min(100%,640px,72dvh);height:auto;margin:0 auto;filter:drop-shadow(0 8px 10px #39205e55)}
.numilou-intro p{color:#fff6dd;font-size:clamp(18px,3vw,28px);font-weight:850;margin:8px 0 0}
#welcome .path-card img{width:min(100%,220px,30dvh)}
#welcome .path-caption{margin-top:4px}
body[data-view="home"] header .brand{visibility:hidden}
@media(max-width:760px){
 .numilou-intro{margin-bottom:14px}
 .numilou-logo{width:min(100%,360px,60dvh)}
 #welcome .path-card{min-width:0}
 #welcome .path-card img{grid-row:1 / span 3;width:100%;max-width:145px}
 #welcome .path-card strong{font-size:clamp(21px,6vw,32px)}
 #welcome .path-caption{margin-top:0}
}

body[data-view]{
 background-color:#6034a9;
 background-image:radial-gradient(ellipse at 16% 4%,#ae72ef 0,transparent 52%),
                  radial-gradient(ellipse at 97% 43%,#8d4be4 0,transparent 57%),
                  linear-gradient(146deg,#7444bf,#472286);
}
.playful-background{position:fixed;inset:0;overflow:hidden;pointer-events:none;user-select:none;z-index:0}
.playful-background::before,.playful-background::after{
 content:"";position:absolute;inset:0;
}
.playful-background::before{
 background-image:
  radial-gradient(circle at 22px 32px,#ffe592 0 2px,transparent 3px),
  radial-gradient(ellipse at 83px 75px,#f4a6df 0 3px,transparent 4px),
  radial-gradient(circle at 149px 46px,#a1f0d5 0 2px,transparent 3px),
  radial-gradient(circle at 50px 145px,#f2d9ff 0 2px,transparent 3px),
  radial-gradient(ellipse at 167px 117px,#ffc595 0 3px,transparent 4px);
 background-size:190px 172px;
 opacity:.65;
}
.playful-background::after{
 background:
  linear-gradient(36deg,transparent 34%,#f8b6df 35% 65%,transparent 66%) 32px 84px / 11px 9px,
  linear-gradient(120deg,transparent 34%,#b6f6e2 35% 65%,transparent 66%) 128px 30px / 9px 13px,
  linear-gradient(146deg,transparent 30%,#ffda86 31% 69%,transparent 70%) 120px 132px / 12px 8px;
 background-repeat:no-repeat;
}
.math-sticker{
 position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%) rotate(var(--tilt));
 color:var(--ink);font-size:clamp(24px,4.4vw,75px);font-weight:950;line-height:1;
 text-shadow:0 .08em #46246e70;opacity:.73;
}
.kitten-sticker{
 position:absolute;bottom:4%;width:clamp(86px,13vw,188px);height:auto;
 border:4px solid #ffeaff;border-radius:28%;box-shadow:0 6px #411e7a88,0 10px 24px #28135675;
}
.kitten-curious{left:1%;transform:rotate(-10deg)}
.kitten-cheering{right:1%;transform:rotate(10deg)}
body:is([data-view="classic"],[data-view="activity"]) .playful-background{opacity:.56}
#sound{
 display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;
 padding:4px 12px 4px 5px;border:2px solid #f7fff6;border-radius:26px;
 background:linear-gradient(140deg,#edfff4,#a3f0d3);color:#164e47;
 box-shadow:0 3px #45ae92;font-size:clamp(12px,2.6vw,15px);font-weight:850;white-space:nowrap;
}
#sound[aria-pressed="false"]{
 background:linear-gradient(140deg,#fff2fa,#ffd4e9);color:#6c2658;box-shadow:0 3px #d784b4;
}
.sound-icon{
 flex:none;width:32px;height:32px;padding:4px;border-radius:50%;background:#fffdf2;
}
.sound-icon path:not(:first-child){fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
#sound[aria-pressed="true"] .sound-cross,#sound[aria-pressed="false"] .sound-waves{display:none}
#sound:hover{filter:brightness(1.06)}
@media (max-width:760px){
 .kitten-sticker{width:clamp(64px,17vw,106px);opacity:.85;bottom:2%;border-width:3px}
 .math-sticker{opacity:.58}
}
@media (max-width:370px){
 #sound{padding-inline:5px}
 .sound-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
}

.app-version{
 position:fixed;inset:auto 0 0;z-index:1;padding:2px 10px max(5px,env(safe-area-inset-bottom));
 text-align:center;color:#fff1ff;background:#48217dcc;font-size:11px;font-weight:750;letter-spacing:.06em;
}
body:is([data-view="classic"],[data-view="activity"]) .app-version{position:static;width:100%;flex:none}
body:is([data-view="home"],[data-view="menu"]){padding-bottom:24px}

/* Les panneaux de la partie encadrent l’activité sur ordinateur. */
.activity-viewport .new-activity{width:min(1450px,calc(100% - 24px))}
.activity-layout{display:grid;grid-template-columns:minmax(125px,1fr) minmax(0,4fr) minmax(125px,1fr);gap:12px}
.activity-layout .activity-board{min-width:0}
.activity-heading h1{flex:1}
.activity-record,.activity-session{
 display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
 min-width:0;padding:12px 9px;border:2px solid #e4bcff88;border-radius:27px;
 background:linear-gradient(155deg,#8656c7,#572e91);text-align:center;box-shadow:0 6px 0 #47277a88;
}
.activity-record h2,.activity-session h2{margin:0;font-size:clamp(16px,1.8vw,24px)}
.activity-score{font-size:clamp(26px,3.5vw,51px);color:#ffe299;line-height:1}
.activity-star-display{color:#ffe299;font-size:16px;overflow-wrap:anywhere;max-width:100%;line-height:1.05}
.activity-record p,.activity-session p{margin:0;font-size:12px}
.activity-record b,.activity-session b{font-size:14px}
.activity-award:not(:empty){width:min(100%,140px);height:clamp(60px,15dvh,150px);display:grid;place-items:center}
.activity-award svg{width:auto;height:100%;max-width:100%}
.activity-award.not-earned svg{opacity:.5}
#activityRewardHero svg{height:var(--reward-size,100%)}
@media (max-width:900px){
 .activity-layout{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
 .activity-layout .activity-board{grid-row:2;grid-column:1/-1}
 .activity-record,.activity-session{min-height:69px;gap:3px;position:relative;border-radius:16px;padding:6px 43px 6px 5px;font-size:11px}
 .activity-record h2,.activity-session h2{font-size:15px}
 .activity-record b{font-size:10px}
 .activity-award:not(:empty){position:absolute;right:3px;top:50%;transform:translateY(-50%);height:44px;width:38px}
 #activityCollection,#activitySaveNote,#activityRewardNote,#activityRewardName{display:none}
 .activity-star-display{font-size:12px}
}

.table-choice{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px}
.table-random{background:#ebd7ff;color:#572783;border-color:#c69fec}
.table-random[aria-pressed="true"]{background:#634099;color:white}
.matching-activity .activity-board,.train-activity .activity-board{grid-template-columns:1fr}
.matching-activity .activity-cat,.train-activity .activity-cat{display:none}
.matching-activity:has(#activityNext:not([hidden])) .activity-cat{display:block;width:76px;margin:auto;grid-row:2}
.matching-activity .quantity-card{
 min-height:clamp(134px,24dvh,216px);gap:3px;padding:8px 5px;border-radius:23px;
 transition:transform .14s,box-shadow .14s;
 border:2px solid #f9eafa;box-shadow:0 4px #bea3de;
 background:linear-gradient(150deg,#fff2fc,#e6baf8);
}
.matching-activity .quantity-card:nth-child(2){background:linear-gradient(150deg,#f8ffed,#a6edd8)}
.matching-activity .quantity-card:nth-child(3){background:linear-gradient(150deg,#fff7d6,#ffcc92)}
.matching-activity .quantity-card:hover:not(:disabled){outline:3px solid #7950b4;outline-offset:1px;transform:translateY(-2px)}
@media(prefers-reduced-motion:reduce){
 .matching-activity .quantity-card{transition:none}
 .matching-activity .quantity-card:hover:not(:disabled){transform:none}
}
.place-value-activity .activity-board{grid-template-columns:1fr}
.place-value-activity .activity-cat{display:none}
.place-value-group{
 display:grid;grid-template-columns:clamp(75px,15%,110px) minmax(0,1fr);align-items:center;
 gap:8px;margin:8px 0;padding:8px 10px;border:2px solid #e4c9f4;border-radius:16px;
 background:#fbf1ff;text-align:left;
}
.place-value-group>strong{color:#65378d;font-size:clamp(15px,2vw,24px)}
.place-value-cards{
 display:grid;grid-template-columns:repeat(10,minmax(0,63px));align-items:center;
 gap:5px;min-width:0;font-weight:850;
}
.place-value-card{
 min-width:0;width:100%;border-radius:12px;font-size:clamp(16px,2.7vw,38px);
}
.place-value-card:nth-child(even){background:#f0e6ff}
.place-value-card.ten-card{
 color:#5b208b;background:linear-gradient(#fff6d2,#ffde8c);border-color:#efc071;
 font-weight:950;text-shadow:0 2px #fff5cb;
}
@media(max-width:600px){
 .place-value-group{gap:5px;padding:6px;grid-template-columns:clamp(60px,20%,76px) minmax(0,1fr)}
 .place-value-cards{grid-template-columns:repeat(5,minmax(0,49px));gap:5px}
 .place-value-card{border-radius:9px;font-size:clamp(17px,5.3vw,25px)}
}
@media(max-width:760px),(pointer:coarse){
 #full{display:none}
 .activity-viewport .new-activity{width:calc(100% - 14px)}
}
@media(max-width:480px){
 .matching-activity .quantity-card{padding:6px 3px;border-radius:15px}
}
.train-platform{
 display:grid;gap:8px;justify-items:center;padding:9px;
 border:2px solid #f2cd84;border-radius:19px;background:#fff0ce;color:#643b55;
}
.train-passengers{display:flex;flex-wrap:wrap;justify-content:center;gap:5px;width:min(100%,680px)}
.train-passengers img{width:calc((100% - 45px)/10);max-width:63px;height:auto;aspect-ratio:1.22;object-fit:cover;border-radius:11px}
.train-activity #activityChoices{display:grid;grid-template-columns:1fr;gap:7px}
.train-choice{
 display:grid;grid-template-columns:minmax(0,1fr) clamp(80px,16%,130px);place-items:center;gap:5px;min-width:0;min-height:46px;
 padding:7px 4px;border:2px solid #ba93e7;border-radius:17px;background:#ead9ff;
 color:#472373;box-shadow:0 3px #c2a4e0;
}
.train-choice:nth-child(2){background:#d7f6ec;border-color:#87c9b3}
.train-choice:nth-child(3){background:#ffe4ef;border-color:#e6a6c2}
.train-choice:hover:not(:disabled){outline:2px solid #6c44b1;outline-offset:-2px}
.train-cars{display:flex;align-items:center;flex-flow:row-reverse wrap;justify-content:center;gap:7px 3px;width:100%}
.train-engine{font-size:clamp(23px,3vw,45px);line-height:1;transform:scaleX(-1)}
.train-wagon{
 display:flex;gap:3px;align-items:center;justify-content:center;padding:4px;
 position:relative;border:2px solid #7655ac;border-radius:7px;background:#a581df;
}
.train-choice .train-engine{font-size:clamp(18px,2.3vw,29px)}
.train-choice .train-wagon{gap:2px;padding:2px}
.train-choice .train-seat{width:clamp(7px,1.2vw,14px)}
.train-wagon::after{
 content:"";position:absolute;bottom:-5px;left:16%;right:16%;height:5px;
 background:radial-gradient(circle at 10% 50%,#4e3769 0 2px,transparent 3px),
 radial-gradient(circle at 90% 50%,#4e3769 0 2px,transparent 3px);
}
.train-seat{
 display:grid;place-items:center;width:clamp(11px,1.24vw,19px);aspect-ratio:1;
 border-radius:4px;background:#fff6d7;border:1px solid #73529b;
}
.train-seat img{width:100%;height:100%;object-fit:cover;border-radius:3px}
.train-departing .train-seat{width:clamp(13px,2.4vw,29px)}
.train-departing{animation:train-roll .65s ease-out}
@keyframes train-roll{from{transform:translateX(-22px);opacity:.65}}
.train-activity:has(.equation-reveal) #activityChoices{display:grid;grid-template-columns:1fr;gap:4px}
.train-activity .equation-reveal{margin:0}
@media(max-width:760px){
 .train-choice{font-size:14px}
 .train-platform{padding:5px;gap:5px}
 .train-passengers img{border-radius:6px}
}

.stars-activity .activity-board{grid-template-columns:1fr}
.stars-activity .activity-cat{display:none}
.star-groups{
 --tile-size:clamp(55px,8vw,91px);--star-size:clamp(31px,5vw,55px);
 display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(10px,1.65vw,20px);margin:auto;
}
.star-groups[data-density="compact"]{
 --tile-size:clamp(47px,5.2vw,72px);--star-size:clamp(28px,3.4vw,45px);
}
.star-group{
 display:grid;grid-template-columns:repeat(var(--columns),minmax(0,var(--tile-size)));
 gap:clamp(5px,.8vw,9px);max-width:100%;padding:7px;
 border-radius:20px;background:#ead9f688;
}
.star-tile{
 min-width:0;width:100%;padding:0;font-size:var(--star-size);
 border-radius:clamp(12px,1.7vw,21px);
 background:linear-gradient(155deg,#fff5cf,#ffe19a);
 border-color:#f1c975;box-shadow:0 4px #dbad5b;
}
.star-tile:nth-child(3n+2){
 background:linear-gradient(155deg,#ffe8f4,#f5c7ec);border-color:#e6abd8;box-shadow:0 4px #d098c7;
}
.star-tile:nth-child(3n){
 background:linear-gradient(155deg,#edfff3,#bfeee2);border-color:#a1dcc8;box-shadow:0 4px #8cccb4;
}
.star-tile:hover:not(:disabled){filter:brightness(1.04)}
.star-tile[aria-pressed="true"]{
 background:linear-gradient(155deg,#ffe67e,#ffc952);border-color:#9b4e0a;
 box-shadow:0 2px #bb7b24;transform:translateY(2px);
}
@media(max-width:760px){
 .star-groups{--tile-size:clamp(44px,13vw,69px);--star-size:clamp(25px,8vw,42px)}
 .star-groups[data-density="compact"]{--tile-size:clamp(34px,9vw,49px);--star-size:clamp(23px,6vw,32px)}
 .star-group{padding:5px;border-radius:14px}
}

.record-settings{text-align:center;margin-top:25px;color:#fff6ff}
#resetRecords{
 min-height:44px;padding:8px 15px;border-radius:16px;border:1px solid #ead3ff;
 background:#492477;color:inherit;font-size:14px;font-weight:750;
}
#resetRecords:hover{background:#5b3189}
#recordResetStatus{margin:8px 0 0;font-size:14px;font-weight:750}
#recordResetStatus:empty{display:none}

.activity-choice.activity-answer-selected:disabled{
 opacity:1;background:#ffdf81;color:#472373;border-color:#956318;
 outline:3px solid #7139a5;outline-offset:2px;box-shadow:0 3px #c08b3c;
}

.picture-sticker{display:block;object-fit:contain;pointer-events:none}
.game-icon .picture-sticker{width:1.15em;height:1.15em}
.pattern-card .picture-sticker,.ten-frame .picture-sticker{width:81%;height:81%;min-width:0;min-height:0}
.earned-star{width:1em;height:1em;object-fit:contain;vertical-align:middle;margin-inline:1px}

/* Equal side columns keep the title centered above the game. */
#activity .activity-heading{
 display:grid;grid-template-columns:minmax(0,1fr) minmax(0,48%) minmax(0,1fr);
 align-items:center;gap:10px;
}
#activity #activityBack{grid-column:1;grid-row:1;justify-self:start}
#activity #activityTitle{display:block;grid-column:2;grid-row:1;text-align:center;text-wrap:balance}
@media(max-width:760px){
 #activity .activity-heading{grid-template-columns:minmax(0,1fr);gap:6px}
 #activity #activityBack{grid-column:1;grid-row:1}
 #activity #activityTitle{grid-column:1;grid-row:2}
}

.train-example{
 display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:6px 14px;
 margin-top:7px;padding:6px 10px;border:2px solid #dbc3f2;border-radius:14px;background:#f3e6ff;
}
.train-example .train-cars{width:auto;min-height:34px}
.train-example .train-engine{font-size:clamp(25px,4vw,41px)}
.train-example .train-seat{width:clamp(19px,3.25vw,29px)}

.game-help-link{
 display:inline-flex;align-items:center;justify-content:center;min-height:44px;margin:0;
 padding:8px 15px;border:2px solid #fff5e1;border-radius:16px;
 background:#ffdc86;color:#462269;text-decoration:none;font-size:14px;font-weight:850;
}
.game-help-link:hover{background:#ffe8ab}
.game-help-link:focus-visible{outline:3px solid #fff;outline-offset:3px}

header .game-help-link{display:none}
body[data-view="home"] header .game-help-link{display:inline-flex}
body[data-view="home"] header .brand{display:none}

@media(min-width:761px){
 body[data-view="home"] #welcome{margin:clamp(6px,1.4dvh,18px) auto 10px}
 body[data-view="home"] .numilou-intro{margin-bottom:clamp(8px,1.7dvh,20px)}
 body[data-view="home"] .numilou-logo{width:min(100%,640px,66dvh)}
 body[data-view="home"] .numilou-intro p{font-size:clamp(17px,3.1dvh,28px);margin-top:6px}
 body[data-view="home"] #welcome .path-card{padding-block:clamp(9px,2dvh,20px);gap:clamp(4px,1dvh,8px)}
 body[data-view="home"] #welcome .path-card strong{font-size:clamp(23px,5dvh,46px)}
 body[data-view="home"] #welcome .path-card img{width:min(100%,220px,25dvh)}
 body[data-view="home"] #welcome .path-caption{font-size:clamp(13px,2.7dvh,23px);padding-block:5px;margin-top:0}
 body[data-view="home"] .record-settings{margin-top:clamp(8px,2.2dvh,23px)}
}
@media(min-width:761px) and (max-height:580px){
 body[data-view="home"] header{padding-block:4px}
 body[data-view="home"] .age-pill{font-size:13px;padding-block:2px}
}
@media(max-width:480px){header .game-help-link{font-size:12px;padding:6px 9px}}

.table-examples{display:flex;justify-content:center;flex-wrap:wrap;gap:7px;margin:0 0 8px}
.table-example{background:#f8e8ff;border-color:#d3a8ed;padding-inline:14px}
@media(min-width:761px) and (max-height:800px){
 body[data-view="home"] .numilou-logo{width:min(100%,640px,53dvh)}
 body[data-view="home"] #welcome .path-card img{width:min(100%,220px,21dvh)}
}