:root{--bg:#fdf6ee;--card:#ffffff;--ink:#2b2433;--muted:#7a7186;--accent:#7c5cff;--accent2:#ff7eb6;--line:#ece3f3;--ok:#2fb67c;--bad:#e5484d;--me:#7c5cff;--them:#f1ebf8}
@media(prefers-color-scheme:dark){:root{--bg:#17131f;--card:#221c2e;--ink:#f3eefc;--muted:#a89fb8;--line:#352c46;--them:#2e2640}}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:var(--bg);color:var(--ink);min-height:100vh}
button,input{font:inherit;color:inherit}
header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 20px;border-bottom:1px solid var(--line);background:var(--card);position:sticky;top:0;z-index:5}
.logo{font-weight:800;font-size:22px;cursor:pointer;background:linear-gradient(90deg,var(--accent),var(--accent2));-webkit-background-clip:text;background-clip:text;color:transparent}
nav{display:flex;gap:8px;align-items:center}
main{max-width:1000px;margin:0 auto;padding:24px 16px 60px}
.btn{border:0;border-radius:12px;padding:10px 16px;font-weight:600;cursor:pointer;background:linear-gradient(90deg,var(--accent),var(--accent2));color:#fff;transition:transform .1s,opacity .2s}
.btn:hover{transform:translateY(-1px)}
.btn:disabled{opacity:.5;cursor:default;transform:none}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.btn.small{padding:6px 10px;font-size:13px;border-radius:9px}
.btn.ok{background:var(--ok)}
.btn.bad{background:transparent;color:var(--bad);border:1px solid var(--bad)}
.card{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:20px}
/* accueil */
.hero{text-align:center;padding:30px 0 10px}
.hero h1{font-size:clamp(32px,6vw,52px);margin:10px 0}
.hero p{color:var(--muted);max-width:520px;margin:0 auto 22px;font-size:18px}
.hero .cta{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.hero .row{display:flex;justify-content:center;gap:10px;margin-bottom:10px}
.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-top:40px}
.features .card h3{margin:0 0 6px}.features .card p{margin:0;color:var(--muted)}
/* auth */
.auth{max-width:440px;margin:20px auto}
.tabs{display:flex;gap:6px;background:var(--bg);padding:4px;border-radius:14px;margin-bottom:18px}
.tabs button{flex:1;border:0;background:transparent;padding:9px;border-radius:10px;cursor:pointer;font-weight:600;color:var(--muted)}
.tabs button.on{background:var(--card);color:var(--ink);box-shadow:0 1px 4px #0002}
label{display:block;font-size:14px;font-weight:600;margin:12px 0 5px}
input[type=text],input[type=password]{width:100%;padding:11px 13px;border-radius:12px;border:1px solid var(--line);background:var(--bg)}
input:focus{outline:2px solid var(--accent);outline-offset:1px}
.err{color:var(--bad);font-size:14px;min-height:20px;margin:10px 0 0}
.okm{color:var(--ok);font-size:14px;font-weight:600;margin:0 0 6px}
.hint{color:var(--muted);font-size:13px;margin-top:10px}
/* avatar pixel */
.av svg{display:block;border-radius:20%}
.av .bob{animation:pbob 1s steps(1,end) infinite}
.av .eye{animation:pblink 4s steps(1,end) infinite;transform-box:fill-box;transform-origin:center}
@keyframes pbob{0%{transform:translateY(0)}50%{transform:translateY(1px)}}
@keyframes pblink{0%{transform:scaleY(1)}94%{transform:scaleY(.5)}97%{transform:scaleY(1)}}
.editor{display:grid;grid-template-columns:200px 1fr;gap:22px;align-items:start}
@media(max-width:640px){.editor{grid-template-columns:1fr}.ed-prev{margin:auto}}
.ed-prev{width:180px}
@media(min-width:641px){.ed-prev{position:sticky;top:0}}   /* l'aperçu reste visible pendant qu'on fait défiler les options */
.opt-v{max-width:100%}
.opt{margin-bottom:12px}.opt-l{font-size:13px;font-weight:700;color:var(--muted);margin-bottom:6px}
.opt-v{display:flex;flex-wrap:wrap;gap:6px}
.sw{width:28px;height:28px;border-radius:50%;border:2px solid var(--line);cursor:pointer;padding:0}
.sw.on{outline:3px solid var(--accent);outline-offset:1px}
.chip{border:1px solid var(--line);background:var(--bg);border-radius:999px;padding:5px 12px;cursor:pointer;font-size:13px}
.chip.on{background:var(--accent);color:#fff;border-color:var(--accent)}

/* boutique d'avatar */
.shop{display:grid;grid-template-columns:210px 1fr;gap:20px;align-items:start}
.shop-prev{position:sticky;top:0;display:flex;flex-direction:column;align-items:center;gap:12px}
.shop-stage{width:192px;padding:8px;border-radius:24px;background:var(--bg);border:1px solid var(--line)}
.shop-stage .av svg{width:100%;height:auto;border-radius:16px}
.shop-main{min-width:0}
.shop-tabs{display:flex;gap:6px;overflow-x:auto;padding-bottom:10px;margin-bottom:6px;scrollbar-width:none}
.shop-tabs::-webkit-scrollbar{display:none}
.stab{flex:none;border:1px solid var(--line);background:var(--bg);color:var(--ink);border-radius:12px;padding:8px 14px;font-weight:700;font-size:14px;cursor:pointer}
.stab.on{background:linear-gradient(90deg,var(--accent),var(--accent2));color:#fff;border-color:transparent}
.shop-sec{margin-bottom:20px}
.shop-h{font-size:13px;font-weight:700;color:var(--muted);margin-bottom:8px}
.shop-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(90px,1fr));gap:8px}
.shop-grid.cols{grid-template-columns:repeat(auto-fill,44px);gap:8px}
.tile{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px 4px 8px;border:2px solid var(--line);border-radius:14px;background:var(--bg);cursor:pointer;color:var(--ink);font:inherit;font-size:12px;font-weight:600;transition:transform .1s}
.tile:hover{transform:translateY(-2px)}
.tile.on{border-color:var(--accent);background:var(--card)}
.tile-i .av svg{border-radius:10px}
.tile-l{text-align:center;line-height:1.15}
.tile-ck{position:absolute;top:4px;right:4px;width:18px;height:18px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center}
.tile .av .bob,.tile .av .eye{animation:none}
.sw.big{width:44px;height:44px;border-radius:12px}
.shop-save{display:flex;gap:8px;justify-content:flex-end;position:sticky;bottom:0;z-index:5;background:var(--card);padding:12px 0 12px;margin-top:12px;border-top:1px solid var(--line)}
@media(max-width:640px){
  .shop{grid-template-columns:1fr;gap:10px}
  .shop-prev{flex-direction:row;justify-content:space-between;z-index:4;background:var(--card);padding:6px 0 8px;border-bottom:1px solid var(--line)}
  .shop-stage{width:112px;padding:5px;border-radius:18px}
  .shop-grid{grid-template-columns:repeat(3,1fr)}
  .shop-tabs{position:sticky;top:var(--prev-h,128px);z-index:3;background:var(--card);margin-bottom:0;padding:8px 0 8px}
}
/* compte */
.account{display:grid;grid-template-columns:330px 1fr;gap:16px;align-items:start}
@media(max-width:820px){.account{grid-template-columns:1fr}}
.me{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.me b{font-size:18px;display:block}
h3.sec{font-size:14px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:18px 0 8px}
.user{display:flex;align-items:center;gap:10px;padding:8px;border-radius:14px}
.user:hover{background:var(--bg)}
.user .av{position:relative}
.dot{position:absolute;right:0;bottom:2px;width:12px;height:12px;border-radius:50%;background:#aaa;border:2px solid var(--card)}
.dot.on{background:var(--ok)}
.user .nm{flex:1;min-width:0;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.user .nm small{display:block;color:var(--muted);font-weight:400}
.badge{background:var(--bad);color:#fff;border-radius:999px;font-size:12px;padding:1px 7px;font-weight:700;margin-right:4px}
.acts{display:flex;gap:5px}
.empty{color:var(--muted);font-size:14px;padding:6px 8px}
.chat{display:flex;flex-direction:column;height:560px;padding:0;overflow:hidden}
.chat-h{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line)}
.msgs{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:6px}
.m{max-width:75%;padding:8px 12px;border-radius:16px;background:var(--them);word-wrap:break-word;overflow-wrap:anywhere}
.m.me{align-self:flex-end;background:var(--me);color:#fff;border-bottom-right-radius:4px}
.m:not(.me){border-bottom-left-radius:4px}
.m time{display:block;font-size:11px;opacity:.65;margin-top:2px}
.chat form{display:flex;gap:8px;padding:12px;border-top:1px solid var(--line)}
.chat form input{flex:1}
.placeholder{display:flex;flex-direction:column;flex:1;align-items:center;justify-content:center;text-align:center;color:var(--muted);padding:30px;line-height:1.5}

/* ---- Paramètres du compte : formulaires en colonne (ne pas hériter du formulaire de chat) ---- */
.chat form.sform{display:flex;flex-direction:column;align-items:stretch;gap:0;padding:0;border:0;max-width:460px}
.chat form.sform input{flex:none;width:100%}
.chat form.sform .btn{align-self:flex-start;margin-top:12px}
.chat form.sform .hint{margin-top:10px}

/* ---- Mobile ---- */
@media(max-width:820px){
  header{padding:10px 12px}
  nav{flex-wrap:wrap;justify-content:flex-end}
  main{padding:14px 10px 40px}
  .card{padding:16px;border-radius:16px}
  .chat{height:calc(100dvh - 150px);min-height:420px}
  .m{max-width:88%}
  .hero{padding:16px 0 6px}
}
@media(max-width:520px){
  input[type=text],input[type=password]{font-size:16px}   /* évite le zoom auto sur iOS */
  .chat form.sform{max-width:none}
  .chat form.sform .btn{align-self:stretch;width:100%;padding:12px}
  .user{flex-wrap:wrap}
  .acts{flex-wrap:wrap}
  .hero .cta .btn{flex:1 1 100%}
  .ed-prev{width:150px}
}

/* ================= Application connectée (style Snapchat) ================= */
body.in-app{display:flex;flex-direction:column;height:100vh;height:100dvh;overflow:hidden}
body.in-app header{position:static;flex:none}
body.in-app main{flex:1;min-height:0;width:100%;max-width:720px;margin:0 auto;padding:0;border-inline:1px solid var(--line)}
.app{display:flex;flex-direction:column;height:100%;background:var(--card)}
.app .chat{position:relative;flex:1;min-height:0;height:auto;border:0;border-radius:0;display:flex;flex-direction:column;overflow:hidden;padding:0}
.app .chat.pad{padding:0 20px;display:block;overflow-y:auto}
.app .chat.pad::before{content:"";display:block;height:20px}
.app .chat.pad>:last-child:not(.shop-save){margin-bottom:20px}
.tab-h{flex:none;padding:14px 16px;font-size:22px;font-weight:800;border-bottom:1px solid var(--line)}
.searchbar{flex:none;padding:10px 12px 0}
.tab-body{flex:1;min-height:0;overflow-y:auto;padding:6px 8px}
.tab-body h3.sec{margin:14px 8px 6px}
.user.tap{cursor:pointer}
.user.unread .nm{font-weight:800}
.user.unread .nm small{color:var(--ink);font-weight:600}
.user .nm small{overflow:hidden;text-overflow:ellipsis}
.meta{display:flex;flex-direction:column;align-items:flex-end;gap:4px;font-size:11px;color:var(--muted)}
.meta .badge{margin:0}
.app .chat.scroll{overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.prof{flex:none;display:flex;flex-direction:column;align-items:center;gap:12px;padding:30px 20px}
.prof b{font-size:22px}
.prof .btn{width:100%;max-width:300px}
.chat-h .nm{min-width:0;font-weight:600}
.chat-h .nm small{display:block;font-weight:400}
.chat-h{flex:none}
.app .chat form{padding-bottom:calc(12px + env(safe-area-inset-bottom))}
.tabbar{flex:none;display:flex;border-top:1px solid var(--line);background:var(--card);padding-bottom:env(safe-area-inset-bottom)}
.tabbar[hidden]{display:none}
.tabbar button{flex:1;min-width:0;border:0;background:transparent;padding:8px 4px 10px;cursor:pointer;color:var(--muted);font-size:11px;font-weight:600;display:flex;flex-direction:column;align-items:center;gap:2px}
.tabbar button.on{color:var(--accent)}
.ti{position:relative;line-height:0;opacity:.75}
.ti svg{display:block}
.tabbar button.on .ti{opacity:1}
.ti .badge{position:absolute;top:-6px;right:-14px;font-size:10px;line-height:1.3;padding:1px 5px;margin:0}
@media(max-width:560px){body.in-app main{border-inline:0}}

/* ---- Accueil / connexion sur mobile ---- */
@media(max-width:520px){
  .hero h1{font-size:28px;line-height:1.15;margin:8px 0}
  .hero p{font-size:16px;margin-bottom:18px}
  .hero .row{gap:6px}
  .hero .row .av svg{width:30vw;height:30vw;max-width:96px;max-height:96px}
  .hero .cta{flex-direction:column}
  .hero .cta .btn{flex:none;width:100%}
  .features{grid-template-columns:1fr;margin-top:24px}
  .auth{margin:6px auto}
  .tabs button{padding:11px 6px}
  .btn{min-height:42px}
}

/* ---- Jardin pixel ---- */
#reqs{flex:none;max-height:34%;overflow-y:auto;padding:0 8px}
#reqs:empty{display:none}
.garden{position:relative;flex:1;min-height:220px;margin:10px 12px 0;border:2px solid var(--line);border-radius:14px;overflow:hidden;background:#78c868;touch-action:manipulation}
.gbg{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated;image-rendering:crisp-edges;image-rendering:pixelated}
.glayer{position:absolute;inset:0}
.gav{position:absolute;left:0;top:0;width:48px;height:48px;cursor:pointer;will-change:transform}
.gav::before{content:"";position:absolute;left:11px;right:11px;top:40px;height:5px;background:rgba(0,0,0,.2);border-radius:50%}
.gav .fl{position:relative}
.gav .av svg{border-radius:0}
.gav.walk .av svg{animation:gstep .3s steps(1,end) infinite}
@keyframes gstep{0%{transform:translateY(0)}50%{transform:translateY(-3px)}}
.gn{position:absolute;top:100%;left:50%;transform:translateX(-50%);margin-top:0;white-space:nowrap;font-size:11px;font-weight:700;padding:1px 6px;background:rgba(0,0,0,.55);color:#fff;border-radius:6px;max-width:92px;overflow:hidden;text-overflow:ellipsis}
.gav.sel .gn{background:var(--accent)}
/* tuile de sélection : avatar animé en grand + choix */
.gpop{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(270px,calc(100% - 24px));max-height:calc(100% - 16px);overflow-y:auto;z-index:99999;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;background:var(--card);border:2px solid var(--accent);border-radius:18px;padding:18px 14px 14px;box-shadow:0 10px 30px #0006;animation:gpopin .3s steps(4,end)}
@keyframes gpopin{from{transform:translate(-50%,-42%) scale(.9);opacity:0}}
.gpop[hidden]{display:none}
.gpop>*{flex:none}
.gpop b{line-height:1.3}
@media(max-height:760px){.gpop{padding:14px 12px 12px;gap:6px}.gpop .gbig .av svg{width:84px;height:84px}}
.gpop b{max-width:100%;font-size:18px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gpop .gx{position:absolute;top:6px;right:6px;padding:2px 8px;min-height:0}
.gpop .gbig .av svg{border-radius:16px;border:3px solid var(--line)}
.gpop .gst{font-size:13px;color:var(--muted)}
.gpop .gst.on{color:var(--ok);font-weight:700}
.gpop .gact{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;width:100%;margin-top:4px}
.gpop .gact .btn{flex:1 1 auto;min-height:40px}
.gnote:empty{display:none}
.gnote{flex:none;text-align:center;font-size:12px;color:var(--muted);padding:8px 12px 10px}

/* ---- Maison pixel, capture, menu, suppression de messages ---- */
.garden.house{background:#f4e3c8}
.gdot{position:absolute;top:0;right:2px;background:var(--bad);color:#fff;border-radius:999px;font-size:10px;font-weight:700;padding:0 5px;line-height:15px;z-index:2}
.gball{position:absolute;left:0;top:0;width:28px;height:28px;z-index:99998;pointer-events:none}
.gball .gb{width:28px;height:28px}
.gspark{position:absolute;left:0;top:0;width:6px;height:6px;z-index:99998;pointer-events:none}
.gtxt{position:absolute;z-index:99998;transform:translate(-50%,0);white-space:nowrap;font-size:12px;font-weight:800;color:#fff;background:var(--accent);padding:3px 8px;border-radius:8px;pointer-events:none}
.cmenu{position:absolute;right:0;top:calc(100% + 6px);z-index:30;background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:0 8px 24px #0005;min-width:220px;overflow:hidden}
.cmenu[hidden]{display:none}
.cmenu button{display:block;width:100%;text-align:left;padding:12px 14px;border:0;background:transparent;cursor:pointer;font-weight:600}
.cmenu button:hover{background:var(--bg)}
.cmenu .danger{color:var(--bad)}
.m.me{cursor:pointer}
.m.sel{outline:2px solid var(--accent2);outline-offset:2px}
.mdel{display:block;margin-top:6px;border:1px solid #fff9;background:#0003;color:#fff;border-radius:8px;padding:5px 9px;font-size:12px;font-weight:600;cursor:pointer}
.chat-h{position:relative}

/* ---- Téléportation, option jardin ---- */
.gbeam{position:absolute;width:36px;height:140px;z-index:99997;pointer-events:none;background:linear-gradient(90deg,transparent 0 12%,#b79cffcc 12% 28%,#fff 28% 72%,#b79cffcc 72% 88%,transparent 88%)}
label.toggle{display:flex;align-items:center;gap:10px;margin:6px 0 0;font-size:14px;font-weight:600;cursor:pointer}
label.toggle input{-webkit-appearance:none;appearance:none;width:22px;height:22px;flex:none;margin:0;border:2px solid var(--ink);border-radius:0;background:var(--card);box-shadow:2px 2px 0 var(--line);cursor:pointer;position:relative}
label.toggle input:checked{background:var(--accent);border-color:var(--accent)}
label.toggle input:checked::after{content:"";position:absolute;inset:1px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='white' shape-rendering='crispEdges'%3E%3Crect x='10' y='2' width='1' height='1'/%3E%3Crect x='11' y='2' width='1' height='1'/%3E%3Crect x='9' y='3' width='1' height='1'/%3E%3Crect x='10' y='3' width='1' height='1'/%3E%3Crect x='1' y='4' width='1' height='1'/%3E%3Crect x='8' y='4' width='1' height='1'/%3E%3Crect x='9' y='4' width='1' height='1'/%3E%3Crect x='1' y='5' width='1' height='1'/%3E%3Crect x='2' y='5' width='1' height='1'/%3E%3Crect x='7' y='5' width='1' height='1'/%3E%3Crect x='8' y='5' width='1' height='1'/%3E%3Crect x='2' y='6' width='1' height='1'/%3E%3Crect x='3' y='6' width='1' height='1'/%3E%3Crect x='6' y='6' width='1' height='1'/%3E%3Crect x='7' y='6' width='1' height='1'/%3E%3Crect x='3' y='7' width='1' height='1'/%3E%3Crect x='4' y='7' width='1' height='1'/%3E%3Crect x='5' y='7' width='1' height='1'/%3E%3Crect x='6' y='7' width='1' height='1'/%3E%3Crect x='4' y='8' width='1' height='1'/%3E%3Crect x='5' y='8' width='1' height='1'/%3E%3C/svg%3E") center/contain no-repeat;image-rendering:pixelated}
label.toggle input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ---- Barre de recherche + bouton « Envoyées » ---- */
.searchbar.sb{display:flex;gap:8px;align-items:center}
.searchbar.sb input{flex:1;min-width:0}
.searchbar.sb .btn{flex:none;white-space:nowrap;min-height:0;height:42px}

/* ---- Jardin de nuit (pendant une recherche) ---- */
.gbg{transition:filter .6s}
.garden{transition:background-color .6s}
.garden.night{background:#16204a}
.garden.night .gbg{filter:brightness(.36) saturate(.75) hue-rotate(12deg)}
.garden.night .gav::before{background:rgba(0,0,0,.45)}

/* ---- Tubes d'eau : demandes envoyées ---- */
.tubes{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:22px 8px;padding:20px 8px 8px;justify-items:center}
.tube-w{display:flex;flex-direction:column;align-items:center;width:100%;min-width:0}
.tube{position:relative;width:84px;height:190px;margin-top:10px;border:4px solid #cfe6f7;border-top:0;border-radius:0 0 42px 42px;background:rgba(190,225,255,.14)}
.tube::before{content:"";position:absolute;left:-9px;right:-9px;top:-8px;height:8px;background:#cfe6f7;border-radius:3px}
.tube::after{content:"";position:absolute;left:0;right:0;bottom:0;height:78%;background:rgba(70,150,230,.24);border-radius:0 0 38px 38px;z-index:2;pointer-events:none}
.water{position:absolute;left:0;right:0;bottom:0;height:78%;background:linear-gradient(#8fd6ff,#3b94dc);border-radius:0 0 38px 38px;overflow:hidden}
.water::before{content:"";position:absolute;left:0;right:0;top:0;height:5px;background:repeating-linear-gradient(90deg,#e3f6ff 0 6px,#a9e0ff 6px 12px);animation:wsurf 1s steps(2,end) infinite}
@keyframes wsurf{to{background-position:12px 0}}
.bub{position:absolute;bottom:-6px;width:5px;height:5px;background:#e6f6ff;opacity:0;animation:brise 3s steps(8,end) infinite}
.bub.b2{width:4px;height:4px;animation-duration:4s}
.bub.b3{width:6px;height:6px;animation-duration:3.5s}
@keyframes brise{0%{transform:translateY(0);opacity:0}15%{opacity:.9}100%{transform:translateY(-140px);opacity:0}}
.tavs{position:absolute;left:50%;bottom:34px;margin-left:-32px;z-index:1;animation:tfloat 2.4s steps(1,end) infinite}
@keyframes tfloat{0%{transform:translateY(0)}25%{transform:translateY(-4px)}50%{transform:translateY(-8px)}75%{transform:translateY(-4px)}}
.gloss{position:absolute;left:8px;top:14px;bottom:36px;width:6px;background:rgba(255,255,255,.55);border-radius:3px;z-index:3;pointer-events:none}
.tn{margin-top:10px;font-weight:700;font-size:13px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ts{font-size:11px;color:var(--muted)}
.tube-w .btn{margin-top:8px}


/* ---- Photos éphémères (style Snap) ---- */
.chat form .cam{flex:none;padding:10px 12px;font-size:18px;line-height:1}
.m .phs{display:block;font-size:12px;opacity:.85}
.m .pho.off{opacity:.7}
.m.phnew{background:linear-gradient(90deg,var(--accent),var(--accent2));color:#fff;padding:0}
.phbtn{display:flex;flex-direction:column;align-items:flex-start;gap:2px;border:0;background:transparent;color:inherit;font:inherit;font-weight:700;cursor:pointer;padding:9px 14px;text-align:left}
.phbtn small{font-weight:400;opacity:.85;font-size:12px}
.m.phnew time{padding:0 14px 6px;margin-top:0}

.camov,.phov{position:fixed;inset:0;z-index:40;background:#000;color:#fff;display:flex;flex-direction:column;padding-top:env(safe-area-inset-top);-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.cam-top{flex:none;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px}
.cbtn{width:44px;height:44px;flex:none;border-radius:50%;border:0;background:#ffffff26;color:#fff;font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
.cbtn.ph{background:transparent;cursor:default}
.cam-stage{flex:1;min-height:0;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden}
.cam-cv{width:100%;height:100%;object-fit:contain;image-rendering:pixelated;image-rendering:crisp-edges;image-rendering:pixelated}
.cam-cv:not(.ready){opacity:0}
.cam-msg{position:absolute;left:16px;right:16px;top:50%;transform:translateY(-50%);text-align:center;color:#ddd;font-size:15px;pointer-events:none}
.cam-bar{flex:none;padding:12px 16px calc(18px + env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:center;gap:12px}
.cam-row{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;max-width:360px}
.cam-row .btn{flex:1}
.camov .btn.ghost{color:#fff;border-color:#ffffff66}
.cam-hint{font-size:13px;color:#cfc8dc;text-align:center}
.shutter{width:72px;height:72px;border-radius:50%;border:5px solid #fff;background:#ffffff33;cursor:pointer;padding:0}
.shutter:active{background:#fff}

.ph-wait{margin:auto;color:#ccc}
.ph-top{flex:none;display:flex;justify-content:space-between;align-items:center;padding:12px 18px;font-size:16px}
.ph-count{min-width:38px;height:38px;border:3px solid #fff;border-radius:50%;text-align:center;line-height:32px;font-weight:800;font-size:18px}
.ph-img{flex:1;min-height:0;width:100%;object-fit:contain;image-rendering:pixelated;image-rendering:crisp-edges;image-rendering:pixelated;-webkit-user-drag:none}
.ph-bar{flex:none;height:6px;background:#ffffff33}
.ph-bar i{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--accent),var(--accent2))}
.ph-tip{flex:none;text-align:center;font-size:12px;color:#aaa;padding:10px 12px calc(14px + env(safe-area-inset-bottom))}


/* ---- Icônes pixel ---- */
.pi{display:inline-block;vertical-align:-3px;margin-right:6px;flex:none;image-rendering:pixelated}
.pi.solo{margin:0;vertical-align:middle}
.placeholder .pi{margin:0 0 8px;opacity:.75}
.features h3 .pi{vertical-align:-4px;color:var(--accent)}
.od{display:inline-block;width:8px;height:8px;margin-right:6px;background:var(--ok)}
.od.off{background:#8d8799}
.cbtn .pi{display:block}
.cmenu button .pi{vertical-align:-3px}
.btn.small .pi{vertical-align:-3px}

/* ---- Amis hors ligne : ils dorment à l'arrêt dans la maison ---- */
.gon{position:absolute;left:5px;top:3px;width:8px;height:8px;background:var(--ok);border:2px solid #fff;z-index:2}
.gav.zz .av .eye{animation:none;transform:scaleY(.18)}
.gav.zz .av svg{filter:brightness(.8)}
.gav.zz .av{animation:zbreath 2.4s steps(2,end) infinite}
@keyframes zbreath{50%{transform:translateY(1px)}}
.zzz{position:absolute;left:32px;top:-4px;width:20px;height:30px;pointer-events:none;z-index:3}
.zzz i{position:absolute;left:0;bottom:0;font:800 12px/1 ui-monospace,Menlo,Consolas,monospace;font-style:normal;color:#fff;opacity:0;text-shadow:1px 0 #2b2433,-1px 0 #2b2433,0 1px #2b2433,0 -1px #2b2433;animation:zup 2.4s steps(6,end) infinite}
.zzz i:nth-child(2){animation-delay:.8s;font-size:15px}
.zzz i:nth-child(3){animation-delay:1.6s;font-size:18px}
@keyframes zup{0%{transform:translate(0,4px);opacity:0}20%{opacity:1}100%{transform:translate(6px,-22px);opacity:0}}
.m:not(.me) .mdel{color:var(--ink);border-color:var(--line);background:var(--card)}

/* ---- Jardin à pages : au-delà de 10 avatars, le jardin se prolonge et se fait glisser ---- */
.gscroll{position:absolute;inset:0;display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.gscroll::-webkit-scrollbar{display:none}
.gpage{position:relative;flex:0 0 100%;height:100%;scroll-snap-align:start;scroll-snap-stop:always;overflow:hidden}
.gnav{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);z-index:5000;display:flex;align-items:center;gap:2px;padding:3px;background:rgba(0,0,0,.6);border-radius:10px}
.gnav[hidden]{display:none}
.gnb{width:32px;height:32px;display:flex;align-items:center;justify-content:center;border:0;border-radius:8px;background:transparent;color:#fff;cursor:pointer;padding:0}
.gnb.next svg{transform:scaleX(-1)}
.gnb:hover:not(:disabled){background:rgba(255,255,255,.18)}
.gnb:disabled{opacity:.3;cursor:default}
.gnb:focus-visible,.gd:focus-visible{outline:2px solid #fff;outline-offset:1px}
.gdots{display:flex;align-items:center;gap:2px;padding:0 2px}
.gd{width:20px;height:32px;border:0;background:transparent;cursor:pointer;padding:0;position:relative}
.gd::after{content:"";position:absolute;left:50%;top:50%;width:8px;height:8px;margin:-4px 0 0 -4px;background:rgba(255,255,255,.4)}
.gd.on::after{background:#fff}
.gcount{min-width:54px;text-align:center;color:#fff;font-size:13px;font-weight:700}


/* ================= Maison personnalisable : décor, objets, inventaire, boutique ================= */
.gpage{isolation:isolate}                                  /* les objets « devant » restent sous la fenêtre de l'avatar et la barre de pages */
.hroom,.hwin,.hback,.hfront{position:absolute;inset:0;pointer-events:none}
.hwall,.hfloor{position:absolute;left:0;right:0;image-rendering:pixelated;background-repeat:repeat}
.hwall{background-color:#f4e3c8}
.hfloor{bottom:0;background-color:#c68f58}
.hw{position:absolute;display:block;image-rendering:pixelated}
.hback{z-index:0}
.hfront{z-index:auto}                                      /* les meubles se classent comme les avatars (z-index = position des pieds) : devant, sauf quand un avatar passe devant */
.hi{position:absolute;display:block;image-rendering:pixelated;max-width:none;user-select:none;-webkit-user-select:none;-webkit-user-drag:none}
.app .garden.house{flex:none;min-height:0;aspect-ratio:4/3;width:min(calc(100% - 24px),max(240px,calc((100vh - 290px)*4/3)));width:min(calc(100% - 24px),max(240px,calc((100dvh - 290px)*4/3)));margin:12px auto 0;border-radius:0;border:0;box-shadow:0 0 0 3px #6e4620}
.app .garden.house.deco{width:min(calc(100% - 24px),max(240px,calc((100vh - 400px)*4/3)));width:min(calc(100% - 24px),max(240px,calc((100dvh - 400px)*4/3)))}
.btn.small.off{opacity:.5}
.gav.me .gn{background:var(--accent)}
.gav .fl.pet{padding-top:8px}
.av.pet svg{border-radius:0}
.gav.walk .pet svg{animation:gstep .3s steps(1,end) infinite}
.deco .gpage{position:absolute;left:0;top:0;width:400px;height:300px;flex:none;transform-origin:0 0}
.garden.house .gscroll{inset:auto;left:0;top:0;width:400px;height:300px;transform-origin:0 0;overflow:hidden}
.deco .hi{pointer-events:auto;cursor:grab;touch-action:none}
.deco .hi:active{cursor:grabbing}
.deco .hi.sel{outline:2px dashed var(--accent);outline-offset:3px}
.coins,.coinline{display:inline-flex;align-items:center;gap:6px;font-weight:700}
.coins{margin-left:auto}
.coins .pi,.coinline .pi{color:#e8a91f}
.coinline{font-size:15px;margin-bottom:2px}
.dsel{flex:none;display:flex;align-items:center;gap:10px;min-height:46px;padding:6px 14px;font-size:14px;border-bottom:1px solid var(--line)}
.dsel .btn{margin-left:auto;display:inline-flex;align-items:center;gap:6px}
.dsel.err{color:var(--bad);font-weight:700}
.dpane{flex:1;min-height:0;overflow-y:auto;padding:10px 12px}
.dseg{display:flex;gap:6px;margin-bottom:8px}
.dseg .stab{flex:1}
.dchips{display:flex;gap:6px;overflow-x:auto;padding-bottom:10px;scrollbar-width:none}
.dchips::-webkit-scrollbar{display:none}
.dchips .chip{flex:none}
.dgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px}
.dtile .dimg{display:flex;align-items:center;justify-content:center;width:100%;height:52px}
.dtile .dimg img{image-rendering:pixelated;max-width:100%;max-height:100%;object-fit:contain}
.dtile .sw2{display:block;width:72px;height:44px;border:1px solid var(--line);image-rendering:pixelated}
.dtile .dsub{display:flex;align-items:center;gap:4px;font-size:11px;font-weight:700;color:var(--muted)}
.dtile .dsub .pi{color:#e8a91f}
.dtile.poor .dsub{color:var(--bad)}
.dtile:disabled{opacity:.55;cursor:default}
.dtile:disabled:hover{transform:none}
.dbar{flex:none;display:flex;gap:8px;justify-content:flex-end;padding:10px 12px calc(10px + env(safe-area-inset-bottom));border-top:1px solid var(--line);background:var(--card)}

/* ---- Décorer : inventaire et boutique s'ouvrent en grand ---- */
.dhub{flex:1 0 auto;display:flex;gap:10px;align-items:stretch;padding:12px}
.dopen{flex:1;min-height:92px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:12px 8px;border:2px solid var(--line);border-radius:14px;background:var(--bg);color:var(--ink);cursor:pointer;text-align:center}
.dopen:hover{border-color:var(--accent)}
.dopen b{font-size:17px}
.dopen small{font-size:12px;color:var(--muted)}
.dopen .pi{margin:0;color:var(--accent)}
.dbar{position:sticky;bottom:0;z-index:4}
.dsheet{position:absolute;inset:0;z-index:30;background:var(--card);display:flex;flex-direction:column;animation:dsin .22s steps(4,end)}
.dsheet[hidden]{display:none}
@keyframes dsin{from{transform:translateY(28px);opacity:0}}
.dsh-h{flex:none;display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--line);font-size:18px}
.dsh-h .coins{margin-left:auto}
.dflash{flex:none;padding:8px 14px;font-size:14px;font-weight:700;color:var(--ok);border-bottom:1px solid var(--line)}
.dflash.err{color:var(--bad)}
.dflash:empty{display:none}
.dsheet .dpane{padding:12px 14px calc(16px + env(safe-area-inset-bottom));-webkit-overflow-scrolling:touch}
.dsheet .dgrid{grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px}
.dsheet .dtile .dimg{height:68px}
.pbuy{display:flex;flex-direction:column;align-items:center;gap:12px;padding:6px 0 10px}
.pbuy>.btn.small{align-self:flex-start}
.pprev{display:flex;justify-content:center;padding:18px 34px;background:var(--bg);border:1px solid var(--line)}
.pcols{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.app .chat.scroll.lock{overflow:hidden}
.dnud{margin-left:auto;display:flex;gap:4px}
.dnud .btn{padding:4px 9px;min-height:0}
.dsel .dnud+.btn{margin-left:0}

/* ---- Fenêtres de dialogue ---- */
.mdl-ov{position:fixed;inset:0;z-index:200;background:rgba(20,12,32,.6);display:flex;align-items:center;justify-content:center;padding:16px}
.mdl{width:min(400px,100%);background:var(--card);color:var(--ink);border:2px solid var(--line);border-radius:16px;padding:20px;box-shadow:0 12px 40px #0007;animation:mdlin .2s steps(4,end)}
@keyframes mdlin{from{transform:translateY(14px) scale(.96);opacity:0}}
.mdl h3{margin:0 0 8px;font-size:18px;line-height:1.3;overflow-wrap:anywhere}
.mdl p{margin:0 0 18px;line-height:1.45;color:var(--muted);white-space:pre-line;overflow-wrap:anywhere}
.mdl-a{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
.mdl-a .btn{min-width:96px}
.btn.dng{background:var(--bad)}
.mdl .btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* flèches de déplacement dans la maison */
.dpad{display:flex;justify-content:center;gap:10px;margin:16px 0 4px}
.dpad button{width:54px;height:52px;padding:0;border-radius:14px;border:1px solid var(--line);background:var(--card);color:var(--accent);display:grid;place-items:center;cursor:pointer;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
.dpad button.on{background:var(--accent);color:#fff;transform:translateY(1px)}
.dpad .pi{width:26px;height:26px}

/* portes (espaces noirs) : à droite = pièce suivante, à gauche = pièce précédente, collées au bord */
.hstairs{position:absolute;inset:0;z-index:1;pointer-events:none}
.hstairs svg{position:absolute;display:block;image-rendering:pixelated;shape-rendering:crispEdges}
.hdoors{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.hdoor{position:absolute;width:9px;height:64px;padding:0;border:0;border-radius:0;background:#0a0612;cursor:pointer;pointer-events:auto;-webkit-tap-highlight-color:transparent}
.hdoor.r{right:-1px}
.hdoor.l{left:-1px}
.deco .hdoors{display:none}

/* vente d'objets (inventaire) */
.dsellbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 10px}
.dsellbar .btn.on{border-color:var(--accent);color:var(--accent)}
.dtile.sellable{border-color:var(--accent)}

/* mini-jeux : meilleurs scores */
.mg-sc{display:flex;flex-wrap:wrap;gap:2px 12px;margin-top:3px;font-size:12px;font-style:normal;color:var(--muted)}
.mg-sc b{color:var(--ink);font-variant-numeric:tabular-nums}
.mg-rank{margin:10px auto 0;max-width:260px;text-align:left;font-size:13px}
.mg-rank>b{display:block;text-align:center;margin-bottom:4px}
.mg-rank ol{list-style:none;margin:0;padding:0}
.mg-rank li{display:flex;justify-content:space-between;gap:10px;padding:2px 0;border-bottom:1px solid #fff3}
.mg-rank li.me{font-weight:800}
.mg-rank li span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mg-rank li i{font-style:normal;font-variant-numeric:tabular-nums}
.mg-rank small{display:block;text-align:center;margin-top:5px;opacity:.85}
.mg-rec{font-weight:800;color:#ffd23f}

/* ---- Amis : petits tubes (en ligne / hors ligne), sous « Écris une bulle » ---- */
.ftubes{flex:none;display:flex;align-items:flex-start;gap:12px;overflow-x:auto;overflow-y:hidden;min-height:150px;box-sizing:content-box;padding:10px 16px 14px;margin:4px 0 0;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.ftubes:empty{display:none}
.ft{all:unset;box-sizing:border-box;flex:none;display:flex;flex-direction:column;align-items:center;width:80px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.ft:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:10px}
.ft .tube{display:block;flex:none;width:52px;height:100px;margin-top:8px;border-width:3px;border-radius:0 0 24px 24px}
.ft .tube::before{left:-6px;right:-6px;top:-6px;height:6px}
.ft .tube::after{border-radius:0 0 21px 21px}
.ft .water{display:block;border-radius:0 0 21px 21px}
.ft .water::before{height:3px;background:repeating-linear-gradient(90deg,#e3f6ff 0 4px,#a9e0ff 4px 8px)}
.ft .bub{animation-name:fbrise}
.ft .tavs{display:block;bottom:16px;margin-left:-20px}
.ft .tavs svg{width:40px;height:40px;display:block}
.ft .gloss{left:5px;top:10px;bottom:22px;width:4px}
.ft .tn{margin-top:6px;font-size:12px;width:100%;text-align:center}
.ft .ts{font-size:10px;white-space:nowrap}
.ft:active .tube{transform:translateY(1px)}
.ft.off .tavs{animation:none;bottom:8px}
.ft.off .tavs svg{filter:grayscale(1) opacity(.65)}
.ft.off .water::before{animation:none}
.ft.on .tavs{animation-duration:2.4s}
.fbadge{position:absolute;right:-9px;top:-4px;z-index:4;min-width:18px;height:18px;padding:0 4px;border-radius:9px;background:var(--bad);color:#fff;font-size:11px;font-weight:800;line-height:18px;text-align:center;box-sizing:border-box}
@keyframes fbrise{0%{transform:translateY(0);opacity:0}15%{opacity:.9}100%{transform:translateY(-56px);opacity:0}}
@media(prefers-reduced-motion:reduce){.ft .tavs,.ft .bub,.ft .water::before{animation:none}}

/* ---- Fiche d'un ami (clic sur son éprouvette) ---- */
.fsheet{position:fixed;inset:0;z-index:900;display:grid;place-items:center;padding:16px;background:rgba(20,12,32,.6)}
.fs-card{position:relative;width:min(340px,100%);max-height:100%;overflow:auto;background:var(--card);color:var(--ink);border:2px solid var(--line);border-radius:16px;padding:18px 18px 20px;display:flex;flex-direction:column;align-items:center;box-shadow:4px 4px 0 var(--line)}
.fs-x{position:absolute;right:10px;top:10px}
.fs-tube .tube{margin-top:14px}
.fs-n{margin:14px 0 2px;font-size:20px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fs-s{font-size:13px;color:var(--muted)}
.fs-a{display:flex;flex-direction:column;gap:8px;width:100%;margin-top:16px}
.fs-a .btn{width:100%;justify-content:center}
.fs-tube.off .tavs{animation:none;bottom:8px}
.fs-tube.off .tavs svg{filter:grayscale(1) opacity(.65)}
.fs-tube.off .water::before{animation:none}
@media(prefers-reduced-motion:reduce){.fs-tube .tavs,.fs-tube .bub,.fs-tube .water::before{animation:none}}

/* ---- Éprouvettes d'amis : remplies de liquide violet, avec bulles ---- */
.ft .water,.fs-tube .water{height:78%;background:linear-gradient(#c9b6ff,#7c5cff)}
.ft .tube::after,.fs-tube .tube::after{height:78%;background:rgba(124,92,255,.22)}
.ft .water::before,.fs-tube .water::before{background:repeating-linear-gradient(90deg,#f1ebff 0 4px,#d3c4ff 4px 8px)}
.fs-tube .water::before{background:repeating-linear-gradient(90deg,#f1ebff 0 6px,#d3c4ff 6px 12px)}
.ft .bub,.fs-tube .bub{background:#f4efff}
.ft.off .water,.fs-tube.off .water{background:linear-gradient(#b4aacd,#6e6490)}
.ft.off .tube::after,.fs-tube.off .tube::after{background:rgba(110,100,144,.2)}
.ft.off .bub,.fs-tube.off .bub{opacity:.0;animation-duration:7s}
.ft.off .tavs,.fs-tube.off .tavs{bottom:16px}
.fs-tube.off .tavs{bottom:34px}
.fs-tube .bub{animation-name:brise}

/* ---- Notification de message (en haut, translucide, ne capte aucun clic) ---- */
.mtoast{position:fixed;left:50%;top:calc(env(safe-area-inset-top,0px) + 10px);transform:translateX(-50%);z-index:950;display:flex;gap:10px;align-items:center;width:max-content;max-width:min(360px,92vw);padding:8px 14px 8px 8px;border-radius:14px;color:var(--ink);background:rgba(255,255,255,.72);background:color-mix(in srgb,var(--card) 72%,transparent);border:1px solid var(--line);box-shadow:0 6px 20px #0003;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);pointer-events:none;animation:mtin .25s ease-out;transition:opacity .35s,transform .35s}
.mtoast.out{opacity:0;transform:translate(-50%,-12px)}
.mt-av{flex:none;display:block;width:32px;height:32px;border-radius:8px;overflow:hidden}
.mt-av svg{width:32px;height:32px;display:block}
.mt-t{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.mt-t b{font-size:13px}
.mt-t b i{font-style:normal;font-weight:700;color:var(--accent)}
.mt-t span{font-size:13px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;word-break:break-word}
@keyframes mtin{from{opacity:0;transform:translate(-50%,-14px)}to{opacity:1;transform:translate(-50%,0)}}
@media(prefers-reduced-motion:reduce){.mtoast{animation:none;transition:none}}

/* ---- Volume de la musique (profil) ---- */
.volrow{display:flex;align-items:center;gap:10px;width:100%;max-width:300px;margin:6px 0 0;font-size:14px;font-weight:600}
.volrow span{flex:none}
.volrow input[type=range]{flex:1;min-width:60px;accent-color:var(--accent);cursor:pointer}
.volrow output{flex:none;width:44px;text-align:right;font-variant-numeric:tabular-nums;color:var(--muted);font-weight:700}

/* ---- Échecs : plateau carré à dimensions fixes (les pièces ne peuvent plus déformer les cases) ---- */
.duo .chs{display:grid!important;grid-template-columns:repeat(8,minmax(0,1fr))!important;grid-template-rows:repeat(8,minmax(0,1fr))!important;width:min(100%,420px)!important;max-width:100%;aspect-ratio:1/1;height:auto!important;margin:0 auto;container-type:inline-size;contain:layout paint;box-sizing:border-box}
.duo .chs .sq{display:flex!important;align-items:center;justify-content:center;width:100%!important;height:100%!important;min-width:0!important;min-height:0!important;padding:0!important;margin:0;overflow:hidden;line-height:1!important;font-size:0;box-sizing:border-box;aspect-ratio:1/1}
.duo .chs .pc{display:block;flex:none;line-height:1!important;font-size:clamp(18px,8.5vw,38px);font-size:min(10.5cqw,40px);font-family:"Segoe UI Symbol","Noto Sans Symbols 2","Apple Symbols","DejaVu Sans",sans-serif;pointer-events:none;transform:none!important}
.duo .duo-st{min-height:2.6em}