/* Styles des mini-jeux. Chaque jeu a son écran plein cadre (.gscreen). */

.gscreen{position:absolute;inset:0;display:flex;flex-direction:column;gap:8px;padding:10px;background:#E8F6F0;overflow:hidden}
.ghud{display:flex;align-items:center;gap:8px;flex:none}
.av{width:42px;height:44px;flex:none;display:block}
.av svg{width:100%;height:100%;display:block}
.gtitle{font-family:var(--font-display);font-weight:500;font-size:16px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ghud .pill{padding:6px 12px;font-size:14px;white-space:nowrap}

/* choix du niveau */
.lv{display:flex;gap:2px;width:62px;flex:none}
.lv svg{width:18px;height:18px;display:block}

/* cherche et trouve */
.gscreen.hf{background:#E3F4DA}
.hf-list{display:flex;flex-wrap:wrap;gap:6px;flex:none}
.chip2{display:flex;align-items:center;gap:5px;background:#fff;border-radius:99px;padding:3px 10px 3px 6px;font-family:var(--font-display);font-weight:500;font-size:13px}
.chip2 b{font-size:20px;font-weight:400;line-height:1}
.chip2.done{opacity:.55;text-decoration:line-through;background:#D2F3E0}
.hf-scene{position:relative;flex:1;min-height:0;border-radius:20px;overflow:hidden;background:linear-gradient(180deg,#D6F0FF 0%,#C9ECB6 30%,#B6E3A2 100%)}
.dc{position:absolute;line-height:1;pointer-events:none;user-select:none}
.ho{position:absolute;line-height:1;padding:0;user-select:none}
.ho.found{filter:drop-shadow(0 0 6px #2FBF71)}
.ho.found::after{content:"";position:absolute;inset:-8px;border:3px solid #2FBF71;border-radius:50%}
.ho.hint{animation:hintPulse .55s ease-in-out infinite alternate}
.miss{position:absolute;color:var(--pink-deep);font-family:var(--font-display);font-weight:600;font-size:22px;animation:foam .7s ease-out forwards;pointer-events:none}

/* jeu des différences */
.gscreen.df{background:#E2EEFB}
.dpanel{flex:1;min-height:0;border-radius:18px;overflow:hidden;background:#fff}
.dpanel.shake{animation:nudge .3s ease-in-out}
.dsvg{width:100%;height:100%;display:block}
.hit{fill:transparent;cursor:pointer}
.ok{fill:none;stroke:#2FBF71;stroke-width:4}
.hintring{fill:none;stroke:#FF7FA3;stroke-width:5;animation:ringBlink .45s ease-in-out infinite alternate}

/* penalty */
.gscreen.pen{background:repeating-linear-gradient(0deg,#C4ECB8 0 36px,#B7E5AA 36px 72px)}
.pen-field{position:relative;flex:1;min-height:0}
.goal{position:relative;width:min(94%,400px);aspect-ratio:5/3;margin:4px auto 0}
.goal .net{position:absolute;inset:0;width:100%;height:100%;display:block}
.zones{position:absolute;left:4%;right:4%;top:8%;bottom:0;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr)}
.zone{border:2px dashed transparent;border-radius:10px}
.zone:active,.zone:focus-visible{background:rgba(255,255,255,.35);border-color:#fff}
.keeper{position:absolute;bottom:2%;width:20%;aspect-ratio:3/4;transform:translateX(-50%);transition:left .3s ease-out,bottom .3s ease-out,transform .3s ease-out;pointer-events:none}
.keeper svg{width:100%;height:100%;display:block}
.ball{position:absolute;left:50%;bottom:4%;width:44px;height:44px;margin-left:-22px;transition:transform .45s cubic-bezier(.2,.7,.3,1);pointer-events:none}
.ball svg{width:100%;height:100%;display:block}
.pen-msg{position:absolute;left:0;right:0;top:52%;text-align:center;font-family:var(--font-display);font-weight:600;font-size:34px;color:#fff;text-shadow:0 3px 0 rgba(74,58,82,.35);pointer-events:none}

/* morpion */
.gscreen.mp{background:#F1E6FA}
.mp-msg{text-align:center;font-family:var(--font-display);font-weight:500;font-size:20px;min-height:28px;flex:none}
.mp-board{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;width:min(92%,340px);aspect-ratio:1;margin:auto}
.cell{background:#fff;border-radius:18px;box-shadow:0 3px 0 var(--line);display:grid;place-items:center;min-width:0}
.cell svg{width:62%;height:62%;display:block}
.cell.win{background:#D2F3E0}

@keyframes hintPulse{from{transform:translate(-50%,-50%) scale(1)}to{transform:translate(-50%,-50%) scale(1.5)}}
@keyframes ringBlink{from{opacity:.3}to{opacity:1}}

/* arrosage */
.gscreen.gd{background:#E6F5D8}
.gd-field{flex:1;min-height:0;display:grid;grid-template-columns:repeat(var(--cols),1fr);grid-template-rows:repeat(var(--rows),minmax(0,1fr));gap:8px}
.pot{touch-action:none;user-select:none;-webkit-user-select:none;background:rgba(255,255,255,.55);border-radius:18px;padding:6px 8px 8px;display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0;transition:background .15s}
.pot.pouring{background:rgba(190,228,255,.8)}
.pot{min-height:0}
.pot svg{width:100%;flex:1;min-height:0;display:block;pointer-events:none}
.pot .pr{display:none}
.pot.pouring .pr{display:block}
.dr{animation:dropFall .6s linear infinite}
.dr.d2{animation-delay:.2s}.dr.d3{animation-delay:.4s}
.wm{position:relative;width:100%;height:10px;border-radius:99px;background:#fff;overflow:hidden;box-shadow:inset 0 0 0 2px rgba(74,58,82,.15)}
.wm .band{position:absolute;top:0;bottom:0;background:rgba(47,191,113,.28)}
.wm .fill{position:absolute;left:0;top:0;bottom:0;background:#5BB8F5;border-radius:99px;transition:width .1s linear}
.wm .fill.low{background:#FF9A62}.wm .fill.high{background:#B79CED}
@keyframes dropFall{from{transform:translateY(0);opacity:1}to{transform:translateY(80px);opacity:.2}}

/* puzzle */
.gscreen.pz-screen{background:#FFF1E0}
.pz-wrap{position:relative;flex:1;min-height:0;display:grid;place-items:center}
.pz-board{display:grid;grid-template-columns:repeat(var(--n),1fr);gap:3px;padding:3px;border-radius:16px;width:min(100%,360px,calc(100vh - 140px));aspect-ratio:1;box-shadow:0 3px 0 var(--line)}
.pz{position:relative;overflow:hidden;padding:0;aspect-ratio:1;border-radius:8px;box-shadow:inset 0 0 0 2px rgba(74,58,82,.18);min-width:0}
.pz svg{position:absolute;width:calc(var(--n)*100%);height:calc(var(--n)*100%);left:calc(var(--c)*-100%);top:calc(var(--r)*-100%);pointer-events:none}
.pz.ok{box-shadow:inset 0 0 0 3px #2FBF71}
.pz.sel{box-shadow:inset 0 0 0 4px var(--pink-deep);transform:scale(.94)}
.pz-board.fin .pz{box-shadow:none;border-radius:0}
.pz-board.fin{gap:0;animation:nudge .4s ease-in-out}
.pz-peek{position:absolute;inset:0;margin:auto;width:min(70%,260px);aspect-ratio:1;border-radius:16px;box-shadow:0 6px 24px rgba(74,58,82,.35);display:grid;place-items:center}
.pz-peek[hidden]{display:none}
.pz-peek svg{width:100%;height:100%;display:block}

/* école (inspiré Montessori : bois clair, perles, lettres bleues et rouges) */
.gscreen.ec{background:#FBF3E4}
.ec-card{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:safe center;gap:8px;overflow:auto;padding:4px 0}
.ec-fb{flex:none;min-height:50px;display:grid;place-items:center;text-align:center;font-family:var(--font-display);font-weight:500;font-size:16px;border-radius:16px;padding:8px 12px;color:var(--ink)}
.ec-fb.ok{background:#D2F3E0}.ec-fb.retry{background:#FFE9C9}.ec-fb.reveal{background:#E3EAFB}
.ec-q{margin:0;font-family:var(--font-display);font-weight:500;font-size:19px;text-align:center}
.ec-q .inl{width:22px;height:22px;vertical-align:-5px}
.ec-tip{margin:0;font-size:13px;color:var(--ink-soft);text-align:center}
.ec .pill.btn{font-size:14px}
/* dictée */
.dic-pic{font-size:76px;line-height:1}
.slots{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
.slot{width:38px;height:46px;border-radius:10px;border:2px dashed #CDB894;display:grid;place-items:center;font-family:var(--font-display);font-weight:600;font-size:26px;background:rgba(255,255,255,.6)}
.slot.full{border-style:solid;border-color:transparent;color:#fff}
.slot.full.v{background:#4C7BD9}.slot.full.c{background:#E0556F}
.slot.good{box-shadow:0 0 0 3px #2FBF71}
.tiles{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;max-width:340px}
.tile{width:46px;height:52px;border-radius:12px;font-family:var(--font-display);font-weight:600;font-size:28px;color:#fff;box-shadow:0 3px 0 rgba(74,58,82,.28)}
.tile.v{background:#4C7BD9}.tile.c{background:#E0556F}
.tile:disabled{opacity:.25;box-shadow:none}
.dic-sent{margin:0;font-family:var(--font-display);font-weight:500;font-size:24px;text-align:center;line-height:1.5}
.gap{display:inline-block;min-width:70px;border-bottom:3px solid var(--ink);margin:0 2px;color:var(--ink)}
.gap.good{color:#1E9D5C;border-color:#2FBF71}
.choices{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.choice{font-family:var(--font-display);font-weight:600;font-size:22px;background:#fff;border-radius:16px;padding:10px 20px;box-shadow:0 3px 0 #D9C7A8}
.choice.no{opacity:.35;text-decoration:line-through}
/* grammaire */
.toks{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;max-width:360px}
.tok,.tok2{font-family:var(--font-display);font-weight:500;font-size:22px;background:#fff;border-radius:12px;padding:8px 12px;box-shadow:0 3px 0 #D9C7A8}
.tok2{box-shadow:none;background:transparent;padding:8px 4px}
.tok2.hl{background:#FFE27A;border-radius:10px;padding:8px 12px;font-weight:600}
.tok.good{background:#D2F3E0;box-shadow:0 0 0 3px #2FBF71}
.tok.no{opacity:.4}
.tok.seg{font-size:19px}
.syms{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:min(100%,320px)}
.sym{display:flex;align-items:center;gap:10px;background:#fff;border-radius:16px;padding:8px 12px;font-family:var(--font-display);font-weight:500;font-size:17px;box-shadow:0 3px 0 #D9C7A8}
.sym svg{width:32px;height:32px;flex:none}
.sym.good{background:#D2F3E0;box-shadow:0 0 0 3px #2FBF71}
.sym.no{opacity:.4}
/* calcul */
.eq{font-family:var(--font-display);font-weight:600;font-size:32px;text-align:center}
.eq .ans{display:inline-block;min-width:60px;border-bottom:4px solid var(--ink);color:var(--pink-deep)}
.eq .ans.good{color:#1E9D5C;border-color:#2FBF71}
.viz{display:flex;align-items:flex-end;justify-content:center;flex-wrap:wrap;gap:10px;font-family:var(--font-display);font-size:22px;max-width:340px}
.bar10{display:inline-flex;gap:1px;background:rgba(74,58,82,.1);border-radius:99px;padding:2px}
.bar10 i{width:12px;height:12px;border-radius:50%;box-shadow:inset 0 0 0 1.5px rgba(74,58,82,.35)}
.mrows{display:flex;flex-direction:column;gap:2px}
.gold{display:inline-flex;align-items:flex-end;gap:5px}
.gten{display:flex;flex-direction:column;gap:0;background:rgba(74,58,82,.1);border-radius:6px;padding:1px}
.gten i,.gunits i{width:10px;height:10px;border-radius:50%;background:#E8B923;box-shadow:inset 0 0 0 1.2px rgba(74,58,82,.35)}
.gunits{display:grid;grid-template-columns:repeat(3,10px);gap:2px}
.keypad{display:grid;grid-template-columns:repeat(3,60px);gap:6px}
.key{height:44px;border-radius:12px;background:#fff;font-family:var(--font-display);font-weight:600;font-size:22px;box-shadow:0 3px 0 #D9C7A8}
.key.ok{background:#2FBF71;color:#fff;box-shadow:0 3px 0 #1E9D5C}
.key.aux{background:#F6E1DE;font-size:20px}

/* boutons faciles à toucher */
.ghud .pill.btn,.ec .pill.btn{min-height:40px;padding:8px 14px}

/* maths : parts de partage, bouton d'aide, rappel du cours */
.part{display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:44px;margin:0 4px;border-radius:14px;border:2px dashed var(--line);font-family:var(--font-display);font-weight:600;color:var(--ink-soft)}
.ec-card>.ghost{align-self:center;padding:8px 14px;font-size:14px;text-align:center}
.lesson{font-size:15px;line-height:1.5;padding:0 2px 8px}
.lesson p{margin:0 0 8px}
.gunits.flat{display:flex;flex-wrap:wrap;justify-content:center;gap:4px;max-width:220px}
.gunits.flat i{width:14px;height:14px}
.part{min-width:38px;height:34px}