/* Petits Compagnons — mise en page : une pièce qui remplit l'écran, une bande de quatre besoins, cinq boutons d'action. Les menus montent du bas. */

@font-face{font-family:'FredokaLocal';font-weight:500;font-style:normal;font-display:swap;src:url("../fonts/fredoka-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:'FredokaLocal';font-weight:600;font-style:normal;font-display:swap;src:url("../fonts/fredoka-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:'NunitoLocal';font-weight:700;font-style:normal;font-display:swap;src:url("../fonts/nunito-latin-700-normal.woff2") format("woff2")}
@font-face{font-family:'NunitoLocal';font-weight:800;font-style:normal;font-display:swap;src:url("../fonts/nunito-latin-800-normal.woff2") format("woff2")}

:root{
  color-scheme: light;
  --bg:#F2ECFA;
  --card:#FFFFFF;
  --ink:#4A3A52;
  --ink-soft:#75657F;
  --line:#E3D8EF;
  --pink:#FF7FA3;
  --pink-deep:#D6406F;
  --mint:#7CC6B2;
  --sun:#FFD36E;
  --sky:#5BB8F5;
  --peach:#FFA24A;
  --wall:#D8EEE8;
  --wall-low:#C0E4D9;
  --floor:#E9DBF4;
  --rug:#FFD3E0;
  --font-display:'FredokaLocal','Fredoka','Trebuchet MS',system-ui,sans-serif;
  --font-body:'NunitoLocal','Nunito',system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box}
html,body{height:100%}
[hidden]{display:none!important}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-body);font-size:15px;font-weight:700;overflow-x:hidden}
h1,h2{font-family:var(--font-display);margin:0;font-weight:600;text-wrap:balance}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none;padding:0;-webkit-tap-highlight-color:transparent}
button:disabled{cursor:default}
:focus-visible{outline:3px solid var(--sky);outline-offset:2px;border-radius:12px}

.app{position:relative;height:100%;height:100dvh;max-width:480px;margin:0 auto;padding-inline:16px;padding-top:calc(12px + env(safe-area-inset-top,0px));padding-bottom:calc(12px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:10px}
.main{display:flex;flex-direction:column;gap:10px;flex:1;min-height:0}

/* en-tête */
.top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.who{min-width:0;flex:1;text-align:left;display:block;border-radius:14px}
.who:focus-visible{outline-offset:3px}
.who .pname,.who .psub{display:block}
.who .pname::after{content:" ▾";font-size:14px;color:var(--ink-soft)}
.pname{font-family:var(--font-display);font-size:24px;font-weight:600;line-height:1.1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.psub{font-size:12px;color:var(--ink-soft)}
.right{display:flex;gap:8px;align-items:center;flex:none}
.coins{display:flex;align-items:center;gap:6px;height:40px;padding:0 14px 0 10px;border-radius:99px;background:var(--card);font-family:var(--font-display);font-weight:600;font-size:17px;box-shadow:0 2px 0 var(--line);font-variant-numeric:tabular-nums}
.icon-btn{width:40px;height:40px;border-radius:50%;background:var(--card);display:grid;place-items:center;box-shadow:0 2px 0 var(--line)}
.icon-btn svg{width:22px;height:22px}

/* la pièce */
.stage{position:relative;flex:1;min-height:240px;border-radius:28px;overflow:hidden;background:var(--wall);box-shadow:0 3px 0 var(--line);touch-action:manipulation}
.stage.washing{touch-action:none;cursor:grab}
.room{position:absolute;inset:0;width:100%;height:100%}
.pet{position:absolute;left:50%;bottom:4%;height:74%;aspect-ratio:252/262;max-width:92%;transform:translateX(-50%);z-index:2;display:block}
.pet-inner{width:100%;height:100%;transform-origin:50% 100%;animation:bob 3.2s ease-in-out infinite}
.pet.sleeping .pet-inner{animation-duration:5s}
.pet-inner.bounce{animation:bounce .5s ease-out}
.pet svg{width:100%;height:100%;display:block;overflow:visible}
.eye{transform-box:fill-box;transform-origin:center;animation:blink 4.6s infinite}
.chomp{transform-box:fill-box;transform-origin:50% 0%;animation:chomp .3s ease-in-out infinite alternate}
.stink{animation:stink 1.6s ease-in-out infinite}
.wag{transform-box:fill-box;transform-origin:0% 100%;animation:wag .55s ease-in-out infinite alternate}
.fx{position:absolute;inset:0;z-index:5;pointer-events:none;overflow:hidden}
.heart{position:absolute;width:24px;height:24px;margin:-12px 0 0 -12px;animation:rise 1.1s ease-out forwards}
.heart svg{width:100%;height:100%;display:block}
.food{position:absolute;font-size:34px;line-height:1;margin:-17px 0 0 -17px}
.foam{position:absolute;border-radius:50%;background:rgba(255,255,255,.82);border:2px solid rgba(91,184,245,.75);animation:foam 1s ease-out forwards}
.bubble{position:absolute;top:12px;left:50%;transform:translateX(-50%);z-index:9;max-width:86%;padding:9px 16px;border-radius:20px;background:#fff;color:var(--ink);font-family:var(--font-display);font-weight:500;font-size:17px;line-height:1.25;text-align:center;box-shadow:0 3px 0 rgba(74,58,82,.12);animation:bubIn .25s ease-out}
.bubble::after{content:"";position:absolute;left:50%;bottom:-7px;width:15px;height:15px;background:#fff;transform:translateX(-50%) rotate(45deg);border-radius:3px}
.stage.washing .bubble{top:70px}

/* besoins */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.stat{display:flex;flex-direction:column;gap:5px;min-width:0}
.stat span{font-size:12px;color:var(--ink-soft);font-weight:800;white-space:nowrap}
.bar{height:10px;border-radius:99px;background:var(--line);overflow:hidden}
.bar i{display:block;height:100%;width:50%;border-radius:inherit;background:var(--c);transition:width .5s}
.stat.low .bar i{background:var(--pink-deep)}
.stat.low{animation:nudge 1.3s ease-in-out infinite}

/* actions */
.actions{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.act{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 0 8px;border-radius:20px;background:var(--card);box-shadow:0 3px 0 var(--line);font-family:var(--font-display);font-weight:500;font-size:13px;min-width:0;transition:transform .12s,box-shadow .12s}
.act:active:not(:disabled){transform:translateY(2px);box-shadow:0 1px 0 var(--line)}
.act:disabled{opacity:.42}
.act svg{width:26px;height:26px;color:var(--ic)}

/* menus du bas */
.scrim{position:absolute;inset:0;z-index:20;background:rgba(74,58,82,.3);animation:fadeIn .2s}
.sheet{position:absolute;left:0;right:0;bottom:0;z-index:21;max-height:74%;display:flex;flex-direction:column;gap:12px;background:var(--card);border-radius:28px 28px 0 0;padding:16px 16px calc(16px + env(safe-area-inset-bottom,0px));box-shadow:0 -6px 24px rgba(74,58,82,.18);animation:sheetIn .25s ease-out}
.sheet-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.sheet-head h2{font-size:22px}
.close{width:36px;height:36px;border-radius:50%;background:var(--bg);display:grid;place-items:center}
.close svg{width:18px;height:18px}
.sheetbody{overflow:auto;display:flex;flex-direction:column;gap:8px;min-height:0}
.row{display:flex;align-items:center;gap:12px;width:100%;padding:10px 12px;border-radius:18px;background:var(--bg);text-align:left}
button.row:disabled{opacity:.5}
.emo{font-size:30px;width:44px;text-align:center;line-height:1;flex:none}
.rt{flex:1;min-width:0;display:flex;flex-direction:column}
.rt b{font-family:var(--font-display);font-weight:500;font-size:16px}
.rt small{font-size:12px;color:var(--ink-soft)}
.price{font-family:var(--font-display);font-size:15px;display:flex;align-items:center;gap:4px;white-space:nowrap;flex:none}
.fav{font-style:normal;font-size:11px;background:var(--pink-deep);color:#fff;padding:2px 8px;border-radius:99px;margin-left:6px;font-family:var(--font-body);font-weight:800;white-space:nowrap}
.pv{flex:none;display:block}
.pv.sm{width:56px;height:58px}
.pv svg{width:100%;height:100%;display:block}
.mini{font-family:var(--font-display);font-weight:500;font-size:14px;padding:8px 14px;border-radius:99px;background:var(--card);box-shadow:0 2px 0 var(--line);display:flex;align-items:center;gap:5px;white-space:nowrap}
.mini.buy{background:var(--pink-deep);color:#fff;box-shadow:0 2px 0 #A92F57}
.mini:disabled{opacity:.45}
.primary{background:var(--pink-deep);color:#fff;font-family:var(--font-display);font-weight:600;font-size:17px;padding:12px 22px;border-radius:99px;box-shadow:0 3px 0 #A92F57}
.primary:active{transform:translateY(2px);box-shadow:0 1px 0 #A92F57}
.primary:disabled{opacity:.5}
.talk{display:flex;flex-direction:column;gap:10px}
.talk label{font-size:14px;color:var(--ink-soft)}
.talkrow{display:flex;gap:8px}
input[type=text]{flex:1;min-width:0;height:48px;border-radius:16px;border:2px solid var(--line);background:#fff;color:var(--ink);padding:0 14px;font-family:var(--font-display);font-weight:500;font-size:18px}
input[type=text]::placeholder{color:#A79BB1}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{font-family:var(--font-display);font-weight:500;font-size:14px;padding:8px 14px;border-radius:99px;background:var(--bg)}
.opt{display:flex;align-items:center;gap:12px;padding:12px;border-radius:18px;background:var(--bg);cursor:pointer}
.opt input{width:22px;height:22px;accent-color:var(--pink-deep)}
.ghost{padding:12px 16px;border-radius:16px;border:2px solid var(--line);font-family:var(--font-display);font-weight:500;font-size:15px;text-align:left}
.ghost.danger{color:var(--pink-deep);border-color:var(--pink-deep)}
.note{margin:0;font-size:13px;color:var(--ink-soft);font-weight:700;line-height:1.4}

/* écran d'adoption */
.choose{display:flex;flex-direction:column;gap:12px;flex:1;min-height:0;overflow:auto;padding-bottom:4px}
.choose h1{font-size:30px;line-height:1.05}
.choose p{margin:0;color:var(--ink-soft)}
.preview{width:min(52%,200px);aspect-ratio:252/262;margin:0 auto;background:var(--tint);border-radius:28px;padding:4px;flex:none}
.preview svg{width:100%;height:100%;display:block}
.pick{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
#speciesRow{grid-template-columns:repeat(3,1fr)}
.ghost.back{padding:6px 12px;font-size:13px;margin-bottom:8px}
.code{width:100%;border-radius:14px;border:2px solid var(--line);padding:10px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;font-weight:700;color:var(--ink);background:#fff;resize:none;word-break:break-all}
.row[aria-current="true"]{box-shadow:inset 0 0 0 3px var(--pink-deep)}
.card{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 4px 8px;border-radius:20px;background:var(--card);box-shadow:0 3px 0 var(--line);border:3px solid transparent;min-width:0;transition:transform .15s}
.card[aria-checked="true"]{border-color:var(--pink-deep);transform:translateY(-2px)}
.card .pv{width:100%;aspect-ratio:252/262;background:var(--tint);border-radius:14px;margin-bottom:4px}
.card b{font-family:var(--font-display);font-size:13px;font-weight:500;white-space:nowrap}
.tr{padding:10px 2px;border-radius:16px;background:var(--card);box-shadow:0 2px 0 var(--line);font-family:var(--font-display);font-weight:500;font-size:14px;border:3px solid transparent;min-width:0}
.tr[aria-checked="true"]{border-color:var(--pink-deep)}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:14px;color:var(--ink-soft)}
.field input{flex:none;width:100%}

/* sommeil */
.night{position:absolute;inset:0;z-index:7;width:100%;background:rgba(36,28,76,.62);display:block;animation:fadeIn .5s}
.night .tap{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);background:rgba(255,255,255,.94);border-radius:99px;padding:8px 18px;font-family:var(--font-display);font-weight:500;font-size:15px;white-space:nowrap;color:var(--ink)}
.night .moon{position:absolute;top:14px;right:18px;width:46px;height:46px}
.z{position:absolute;font-family:var(--font-display);font-weight:600;color:#fff;opacity:0;animation:zfloat 3s ease-in infinite}
.z1{left:60%;top:34%;font-size:28px}
.z2{left:66%;top:28%;font-size:22px;animation-delay:1s}
.z3{left:71%;top:22%;font-size:17px;animation-delay:2s}

/* jeux */
.game{position:absolute;inset:0;z-index:8;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none}
.gbody,.glayer{position:absolute;inset:0}
.hud{position:absolute;top:10px;left:10px;right:10px;display:flex;justify-content:space-between;align-items:center;gap:8px;z-index:3;pointer-events:none}
.pill{background:#fff;border-radius:99px;padding:6px 14px;font-family:var(--font-display);font-weight:500;font-size:16px;box-shadow:0 2px 0 rgba(74,58,82,.12);font-variant-numeric:tabular-nums}
.pill.btn{pointer-events:auto}
.it{position:absolute;left:0;top:0;width:60px;height:60px;display:grid;place-items:center;will-change:transform;z-index:2}
.it svg{width:46px;height:46px;display:block}
.it.pop svg{animation:popit .25s ease-out forwards}
.result{position:absolute;inset:0;display:grid;place-items:center;z-index:4;background:rgba(74,58,82,.38);padding:16px}
.rcard{background:#fff;border-radius:26px;padding:22px 24px;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;max-width:300px}
.rcard h2{font-size:26px}
.rcard p{margin:0;color:var(--ink-soft)}

/* toilette */
.washhud{position:absolute;left:12px;right:12px;top:10px;z-index:8;display:flex;align-items:center;gap:10px;background:#fff;border-radius:20px;padding:8px 8px 8px 14px;box-shadow:0 3px 0 rgba(74,58,82,.12)}
.washhud span{font-family:var(--font-display);font-weight:500;font-size:15px;white-space:nowrap}
.washhud .bar{flex:1;min-width:0}
.washhud .bar i{background:var(--sky)}

@keyframes bob{0%,100%{transform:scale(1,1)}50%{transform:scale(1.025,.975)}}
@keyframes bounce{0%{transform:translateY(0) scale(1,1)}30%{transform:translateY(-14%) scale(.96,1.05)}60%{transform:translateY(0) scale(1.05,.94)}100%{transform:translateY(0) scale(1,1)}}
@keyframes blink{0%,93%,100%{transform:scaleY(1)}96%{transform:scaleY(.08)}}
@keyframes chomp{from{transform:scaleY(.35)}to{transform:scaleY(1.1)}}
@keyframes wag{from{transform:rotate(-14deg)}to{transform:rotate(16deg)}}
@keyframes stink{0%,100%{opacity:.35;transform:translateY(0)}50%{opacity:.9;transform:translateY(-5px)}}
@keyframes rise{0%{transform:translate(0,0) scale(.5);opacity:1}100%{transform:translate(var(--dx,0),-90px) scale(1.15);opacity:0}}
@keyframes foam{0%{transform:scale(.4);opacity:1}100%{transform:translateY(-26px) scale(1.2);opacity:0}}
@keyframes nudge{0%,100%{transform:translateX(0)}25%{transform:translateX(-2px)}75%{transform:translateX(2px)}}
@keyframes bubIn{from{opacity:0;transform:translate(-50%,6px)}to{opacity:1;transform:translate(-50%,0)}}
@keyframes sheetIn{from{transform:translateY(40px);opacity:0}to{transform:translateY(0);opacity:1}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes zfloat{0%{opacity:0;transform:translate(0,12px)}25%{opacity:1}100%{opacity:0;transform:translate(14px,-26px)}}
@keyframes popit{0%{transform:scale(1);opacity:1}100%{transform:scale(1.7);opacity:0}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* temps de jeu */
.tleft{display:flex;flex-direction:column;align-items:center;gap:1px;font-size:11px;line-height:1;color:var(--ink-soft);min-width:34px}
.tleft svg{display:block}
.chip[aria-pressed="true"]{background:var(--pink-deep);color:#fff}
.set-h{margin:6px 0 0;font-family:var(--font-display);font-weight:600;font-size:15px}
.bye{position:absolute;inset:0;z-index:15;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:24px;text-align:center;color:#fff;
  background:radial-gradient(2px 2px at 18% 14%,#fff,transparent),radial-gradient(2px 2px at 78% 24%,#fff,transparent),radial-gradient(1.5px 1.5px at 40% 8%,#fff,transparent),
  radial-gradient(2px 2px at 88% 60%,#fff,transparent),radial-gradient(1.5px 1.5px at 10% 70%,#fff,transparent),radial-gradient(1.5px 1.5px at 60% 86%,#fff,transparent),
  linear-gradient(180deg,#3D3B72 0%,#241C4C 100%);animation:fadeIn .8s}
.byemoon{position:absolute;top:22px;right:24px;width:56px;height:56px}
.byepet{width:min(62vw,230px);animation:byeBob 3.6s ease-in-out infinite}
.byepet svg{width:100%;display:block}
.bye h2{font-size:26px}
.bye p{margin:0;font-size:16px;font-weight:700;opacity:.92}
.bye .byewait{font-family:var(--font-display);font-weight:500;background:rgba(255,255,255,.16);border-radius:99px;padding:6px 16px}
.bye .parent{position:absolute;bottom:calc(16px + env(safe-area-inset-bottom,0px));font-size:12px;padding:6px 14px;border-radius:99px;background:rgba(255,255,255,.14);color:#fff;opacity:.8}
@keyframes byeBob{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}

.hud .pill.btn{min-height:40px}
/* téléphone couché : on demande de le remettre debout */
.rotate{display:none}
@media (orientation:landscape) and (max-height:520px){
  .rotate{display:flex;position:fixed;inset:0;z-index:100;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:var(--bg);text-align:center;padding:24px;font-family:var(--font-display);font-weight:500;font-size:20px}
  .rotate .ph{font-size:56px;animation:rot 2.4s ease-in-out infinite}
}
@keyframes rot{0%,30%{transform:rotate(-90deg)}60%,100%{transform:rotate(0)}}
.stage.ingame .bubble{top:64px;font-size:15px;padding:6px 12px;pointer-events:none}

/* repas : l'aliment à croquer, bouchée par bouchée */
.foodbtn{position:absolute;z-index:6;width:92px;height:92px;margin:-46px 0 0 -46px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.55);box-shadow:0 0 0 4px rgba(255,255,255,.7);animation:foodIn .4s ease-out,foodWig 1.1s ease-in-out .4s infinite;touch-action:manipulation}
.foodbtn span{font-size:56px;line-height:1;display:block;transform:scale(var(--s,1));transition:transform .25s cubic-bezier(.3,1.6,.5,1)}
.foodbtn.bitten{animation:none}
.foodbtn.bitten span{animation:bitePop .25s ease-out}
.crumb{position:absolute;width:8px;height:8px;border-radius:50%;background:#D9A55E;animation:crumb .7s ease-out forwards}
@keyframes foodIn{from{transform:translateY(60px) scale(.5);opacity:0}to{transform:none;opacity:1}}
@keyframes foodWig{0%,100%{transform:rotate(-5deg) scale(1)}50%{transform:rotate(5deg) scale(1.07)}}
@keyframes bitePop{0%{filter:brightness(1)}50%{filter:brightness(1.15)}}
@keyframes crumb{from{transform:translate(0,0);opacity:1}to{transform:translate(var(--dx,0),44px);opacity:0}}

/* choix du style des dessins */
.chips.styles{justify-content:center}

/* chambre : lit pour dormir, pièce plus sombre la nuit */
.bedlayer{position:absolute;left:50%;bottom:2%;width:96%;aspect-ratio:300/150;transform:translateX(-50%);pointer-events:none;animation:bedIn .5s ease-out}
.bedlayer svg{width:100%;height:100%;display:block}
.bedback{z-index:1}
.bedfront{z-index:3}
.pet.sleeping{height:54%;bottom:5%;transform:translateX(-50%) rotate(-90deg);transform-origin:50% 55%;z-index:2}
.stage.dim .pet{filter:brightness(.86) saturate(.92)}
@keyframes bedIn{from{opacity:0;transform:translate(-50%,30px)}to{opacity:1;transform:translate(-50%,0)}}

.zzz{animation:zzz 2.4s ease-in-out infinite}.spark{animation:spark .9s ease-in-out infinite alternate}
@keyframes zzz{0%,100%{opacity:.5;transform:translateY(2px)}50%{opacity:1;transform:translateY(-4px)}}
@keyframes spark{from{opacity:.45}to{opacity:1}}