/* UI adaptative : tout est en em, l'échelle vient de la taille de police de .nui (1em = 14 unités du design 480×320). */
.nui{font:bold clamp(13px,2.4vmin + 5px,22px)/1.15 ui-rounded,"Arial Rounded MT Bold","Nunito","Baloo 2",system-ui,sans-serif;color:#fff;-webkit-text-stroke:.22em #0b3a7a;paint-order:stroke fill;user-select:none;-webkit-user-select:none;
  --st:max(.4em,env(safe-area-inset-top));--sr:max(.5em,env(safe-area-inset-right));--sb:max(.4em,env(safe-area-inset-bottom));--sl:max(.5em,env(safe-area-inset-left))}
.nui *{box-sizing:border-box}
.nui button{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer;pointer-events:auto;touch-action:manipulation}
.nui button:active{filter:brightness(1.2);transform:scale(.95)}
.nui [data-s]{background:center/100% 100% no-repeat}
.nui :where(i[data-s]){display:inline-block;flex:none;height:1.4em;vertical-align:middle}
.nui [data-b]{border:0 solid transparent}
.nui[hidden],.nui [hidden]{display:none!important}

/* compteur (niveau, monnaies) */
.nui .pill{position:relative;flex:0 1 7.4em;min-width:0;height:2.2em;display:flex;align-items:center;justify-content:flex-end;gap:.3em;padding:0 .8em 0 2.3em}
.pill>i:first-child{position:absolute;left:-.25em;top:50%;translate:0 -50%;height:2.5em}
.pill>i.plus{position:absolute;right:-.3em;bottom:-.5em;height:1.3em}
.pill small{font-size:.6em;margin-right:auto}
.xp{position:absolute;left:2.4em;right:.9em;bottom:.2em;height:.3em;border-radius:1em;background:#06224f;overflow:hidden}
.xp>span{display:block;height:100%;background:#9be64c}

/* HUD : barre du haut, colonne des quêtes, menu du bas */
.hud{position:absolute;inset:0;display:grid;grid-template-rows:auto minmax(0,1fr) auto;padding:var(--st) var(--sr) 0 var(--sl);pointer-events:none}
.hud-top{display:flex;gap:.6em;align-items:center}
.hud-top .heart{height:2.4em;margin-left:auto}
.hud-top .heart i{height:100%}
.hud-quests{justify-self:start;align-self:start;max-height:100%;overflow-y:auto;display:flex;flex-direction:column;gap:.3em;margin-top:.9em;scrollbar-width:none}
.quest{position:relative;display:block}
.quest>i{height:3.2em;display:block}
.quest>i+i{position:absolute;right:-.2em;bottom:0;height:1.4em}
.hud-bottom{margin:0 calc(-1*var(--sr)) 0 calc(-1*var(--sl))}
.btn-menu{margin:0 0 var(--sb) var(--sl);width:6.8em;height:2.86em;font-size:1.05em;color:#fff7c2;-webkit-text-stroke-color:#1c5c0e}
.menubar{display:flex;align-items:flex-end;justify-content:space-evenly;gap:.3em;padding:1.4em var(--sr) var(--sb) var(--sl);background:linear-gradient(#0000,#062a66e6 55%);pointer-events:auto}
.menubar button{display:flex;flex-direction:column;align-items:center;font-size:.8em;min-width:0}
.menubar button i{height:3.5em}
.menubar p{flex:1;margin:0 0 .6em;font-size:.9em;text-align:left}
@media (max-width:480px){.hud-top{gap:.35em}.pill small{display:none}}

/* écran plein cadre (Nursery…) */
.screen{position:absolute;inset:0;display:flex;flex-direction:column;pointer-events:auto}
.screen>.title{flex:none;padding:calc(var(--st) + .2em) 1em .3em;text-align:center;font-size:1.35em;color:#fff3b0;-webkit-text-stroke-color:#8a1765}
.tabs{flex:none;display:flex;gap:.3em;padding:.5em var(--sr) 0 var(--sl);overflow-x:auto;scrollbar-width:none}
/* onglets en CSS pur (les sprites merket_bg / underlinetext_bg ne sont pas étirables : ils se répétaient) */
.nui .tabs button{flex:1 0 auto;height:2.4em;font-size:.8em;padding:0 1.1em .2em;border:.15em solid #0b3a7a;border-bottom:0;border-radius:.9em .9em 0 0;background:linear-gradient(#0d55c4,#06358a);box-shadow:inset 0 .15em 0 #ffffff40}
.nui .tabs button[aria-selected=true]{background:linear-gradient(#4cc3ff,#0a8cf0);border-color:#2aa0ff}
.grid{flex:1;min-height:0;overflow-y:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(9.5em,1fr));gap:.5em;align-content:start;padding:.6em var(--sr) .6em var(--sl);background:#0a4fb4cc;border-block:.15em solid #2aa0ff}
.foot{flex:none;display:flex;align-items:center;gap:.9em;padding:.5em var(--sr) var(--sb) var(--sl);background:linear-gradient(#0a3f95,#04173f)}
.foot .back i{height:2.6em;display:block}

/* article de la Nursery */
.card{display:flex!important;flex-direction:column;align-items:center;gap:.15em;padding:.7em .6em .6em!important;font-size:.85em!important;min-width:0}
.card.off{filter:grayscale(1) brightness(.8)}
.card .name{min-height:2.3em;display:grid;place-items:center}
.card canvas{width:100%;height:6.5em;object-fit:contain}
.card .row{display:flex;align-items:center;justify-content:center;gap:.25em;flex-wrap:wrap;min-height:1.5em}
.card .row b{color:#ffe14d}
.card .row span{margin-right:.5em}
.card .req{color:#ffd0d0;-webkit-text-stroke-color:#7a1010}
.card .price{flex-wrap:wrap;align-self:stretch;margin-top:.2em;padding:.35em;display:flex;align-items:center;justify-content:center;gap:.4em;font-size:1.15em}

/* monnaies */
.card .big i{height:3.6em}
.card .big i:nth-child(2){height:1.6em}

/* papier (réglages, fiche de l'album) : texte sombre sans contour */
.paper{flex:1;min-height:0;overflow-y:auto;width:min(100% - 1em,32em);margin:.6em auto;padding:1em 1.2em;color:#5b3a12;-webkit-text-stroke:0}
.paper small{display:block;text-align:center;margin-top:1em;opacity:.6}
.setting{display:flex;align-items:center;justify-content:space-between;gap:1em;padding:.5em 0;border-bottom:.12em solid #c9ad74}
.setting button{flex:none;min-width:5.6em;padding:.75em 1em;color:#fff;-webkit-text-stroke:.22em #17550f}
.setting button.off{filter:hue-rotate(250deg);-webkit-text-stroke-color:#6d1010}

/* album : grille de vignettes + fiche ; côte à côte en paysage, fiche au-dessus en portrait */
.album{flex:1;min-height:0;display:flex;gap:.5em;padding:.5em var(--sr) .5em var(--sl);background:#0a4fb4cc;border-block:.15em solid #2aa0ff}
.album .grid{background:none;border:0;padding:0;grid-template-columns:repeat(auto-fill,minmax(4.6em,1fr));gap:.3em}
.stickers button{padding:.5em;aspect-ratio:1}
.stickers canvas{width:100%;height:100%;display:block}
.album .paper{flex:0 1 17em;margin:0;text-align:center}
.album .paper canvas{width:min(100%,11em);aspect-ratio:1;border-radius:.6em}
.album .paper h3{margin:.4em 0;font-size:1.15em}
.album .paper p{margin:0;font-size:.85em;white-space:pre-line;text-align:left}
@media (orientation:portrait){.album{flex-direction:column-reverse}.album .paper{flex:0 0 auto;max-height:45%;width:100%;display:grid;grid-template-columns:8em 1fr;gap:0 .8em;align-content:start}.album .paper canvas{grid-row:span 2;width:100%}.album .paper h3{text-align:left}}

/* modale native */
dialog.modal{pointer-events:auto;width:min(92vw,24em);max-height:90dvh;overflow-y:auto;padding:1.4em 1.4em 1.2em;background:none;text-align:center}
dialog.modal::backdrop{background:#021a3eb3}
dialog.modal h2{margin:0 0 .6em;font-size:1.25em;color:#fff3b0}
dialog.modal p{margin:0 0 1em}
dialog.modal .btns{display:flex;justify-content:center;gap:1em}
dialog.modal .btns button{min-width:5.5em;padding:.8em 1em}

/* contenu des modales */
dialog.modal .paper{flex:none;width:auto;margin:0 0 1em;overflow:visible;text-align:left}
dialog.modal .paper::after{content:"";display:block;clear:both}
dialog.modal .paper p{margin:0 0 .6em}
dialog.modal .paper h3{margin:0 0 .5em;text-align:center}
dialog.modal .btns{flex-wrap:wrap;gap:.6em}
dialog.modal canvas{max-width:60%;height:auto}
.nui .c{text-align:center}
.portrait{float:left;height:4.5em!important;margin:0 .7em .3em 0}
.tasks{margin:0;padding:0;list-style:none}
.tasks{clear:both;border-top:.12em solid #c9ad74}
.tasks li{display:flex;align-items:center;gap:.5em;padding:.35em 0;border-bottom:.12em solid #c9ad74}
.tasks li span{flex:1}
.tasks li em{flex:none;width:1.3em;height:1.3em;border:.14em solid #a8823e;border-radius:.3em;background:#fff6dc}
.tasks li em i{display:block;height:1.5em;margin:-.35em 0 0 -.05em}
.tasks li.done span{opacity:.6;text-decoration:line-through}
.rewards{display:flex;justify-content:center;flex-wrap:wrap;gap:.3em 1.1em;margin:.7em 0 0!important;font-size:1.1em;color:#b4530a}
.rewards span{display:flex;align-items:center;gap:.25em}
.rewards i{height:1.6em}
dialog.questcard .paper{padding:1em 1.1em}
.level{font-size:1.3em;text-align:center;margin:0 0 .4em!important}
.level i{height:1.8em}
.level b{color:#ffe14d;font-size:1.3em}
.paper .level b{color:#b4530a}
.unlocked{display:flex;gap:.4em;overflow-x:auto;margin-bottom:1em}
.unlocked canvas{flex:none;width:5.5em;max-width:none!important}
.bar{height:.7em;border-radius:1em;background:#06224f;overflow:hidden;margin:.3em 0}
.bar>span{display:block;height:100%;background:#9be64c}
.stats{margin:.6em 0 0;padding:0;list-style:none}
.stats li{display:flex;align-items:center;gap:.4em;padding:.25em 0;border-bottom:.1em solid #c9ad74}
.stats b{margin-left:auto;font-variant-numeric:tabular-nums;color:#b4530a}
.stats li:last-child{border-bottom:0}
.vit{margin:0 0 .8em;padding:0;list-style:none;text-align:left}
.vit li{display:grid;grid-template-columns:2em 1fr auto;align-items:center;gap:0 .4em;padding:.25em 0}
.vit li>i{height:1.7em;justify-self:center}
.vit .bar{grid-column:1/-1;height:.6em;box-shadow:0 0 0 .1em #2aa0ff}
.vit .off{opacity:.5}
.vit .full b{color:#9be64c}
.vit .total{margin-top:.4em;padding-top:.6em;border-top:.12em solid #2aa0ff;font-size:1.1em;color:#fff3b0}
.vit .total .bar>span{background:#ff6fae}
dialog.modal h2 small{display:block;font-size:.6em;color:#fff}
.help{margin:0 0 1em;font-size:.75em;text-align:left}
.help summary{text-align:center;cursor:pointer;margin-bottom:.4em}
.daily{display:grid;grid-template-columns:repeat(3,1fr);gap:.4em;width:min(100%,15em);margin:0 auto 1em}
.daily button{aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.2em}
.daily button i{height:2.2em}
.daily button:disabled{filter:none;transform:none;cursor:default}
dialog.modal .btns button:disabled{filter:grayscale(1) brightness(.8);cursor:default}

/* conversation : portraits au-dessus de la bulle */
.talk{position:absolute;inset:0;pointer-events:auto;cursor:pointer;display:grid;grid-template:1fr auto/1fr 1fr;align-items:end;padding:var(--st) var(--sr) var(--sb) var(--sl);background:linear-gradient(#0000 45%,#021a3ecc)}
.talk>i{height:min(8em,30dvh);opacity:0;transition:opacity .2s;background:center/100% 100% no-repeat}
.talk>i+i{justify-self:end}
.bubble{grid-column:1/-1;justify-self:center;width:min(100%,36em);padding:1em 1.2em .8em;color:#5b3a12;-webkit-text-stroke:0;display:flex;flex-direction:column}
.bubble p{margin:0 0 .6em;min-height:3.4em}
.bubble span{align-self:flex-end;padding:.55em 1.2em;color:#fff;-webkit-text-stroke:.22em #17550f}

/* panneau d'entité et outils du mode déplacement, au-dessus du bas d'écran */
.entity{position:absolute;left:50%;translate:-50%;bottom:var(--sb);width:min(100% - 1em,34em);display:flex;align-items:center;gap:.6em;padding:.7em .9em;pointer-events:auto}
.entity .info{flex:1;min-width:0;display:flex;flex-direction:column;gap:.15em}
.entity .info span{font-size:.85em}
.entity button[data-b]{flex:none;padding:.8em .9em;font-size:.9em}
.entity button>i[data-s="UI_closebutton_menu"]{height:2.2em;display:block}
.tools{position:absolute;left:50%;translate:-50%;bottom:calc(var(--sb) + 4.5em);display:flex;gap:.8em}
.tools i{height:3.4em;display:block}
dialog.chest canvas{height:6em;width:auto}
@media (max-height:480px){dialog.modal{width:min(92vw,38em);padding-block:1em}dialog.modal h2{margin-bottom:.35em}}
/* inventaire (mode déplacement) */
dialog.modal.inventory{width:min(94vw,34em)}
dialog.modal .grid.inv{max-height:55dvh;margin:0 0 1em;padding:.4em;border:0;background:#06224f66}
dialog.modal .grid.inv canvas{max-width:100%}
.entity button>i[data-s="btn_inventory_ready"]{height:2.2em;display:block}
.menubar [data-k="invBtn"]{position:relative}
.menubar [data-k="invBtn"] b{position:absolute;right:0;top:0;font-size:1.2em}

/* compte */
form.account input{display:block;width:100%;box-sizing:border-box;margin:0 0 .6em;padding:.6em .7em;border:0;border-radius:.4em;font:inherit;-webkit-text-stroke:0;color:#06224f;background:#fff}
form.account input::placeholder{color:#5b6f8f}
form.account .err{min-height:1.2em;margin:0 0 .6em;color:#ffb0a0}