/* Layout: le jardin plein écran (canvas), une barre flottante en haut, un panneau qui s'ouvre à droite (en bas sur téléphone). Look unique : jardin de nuit éclairé aux lanternes. */
:root{
  color-scheme:dark;
  --night:#0b1310; --panel:#13201a; --panel-2:#1a2b22; --ink:#ece6d6; --muted:#a3ab9c; --line:#2c3f33;
  --lantern:#f3c96b; --moss:#8fc49a; --danger:#e8907a;
  --f-display:"Young Serif", Georgia, "Times New Roman", serif;
  --f-body:"Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono:"DM Mono", ui-monospace, Menlo, monospace;
}
*{box-sizing:border-box}
html,body{height:100%}
body{background:var(--night);color:var(--ink);font:15px/1.5 var(--f-body);overflow:hidden}
#world{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none;outline:none}
button,input,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--lantern);outline-offset:2px}

/* barre du haut */
.bar{position:fixed;left:0;right:0;top:0;padding:calc(env(safe-area-inset-top,0px) + 12px) 16px 12px;display:flex;justify-content:space-between;align-items:center;gap:12px;pointer-events:none;
  background:linear-gradient(to bottom, color-mix(in srgb,var(--night) 85%,transparent), transparent)}
.bar > *{pointer-events:auto}
.brand{display:flex;flex-direction:column;min-width:0}
.brand h1{font-family:var(--f-display);font-weight:400;font-size:1.45rem;margin:0;line-height:1.1;color:var(--ink)}
.here{font-size:.82rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.here b{color:var(--lantern);font-weight:600}
.tools{display:flex;gap:8px;flex:none}
.pill{border:1px solid var(--line);background:color-mix(in srgb,var(--panel) 88%,transparent);backdrop-filter:blur(6px);border-radius:999px;padding:7px 14px;font-weight:600;font-size:.9rem;display:inline-flex;align-items:center;gap:6px}
.pill:hover{border-color:var(--lantern)}
.pill.main{background:var(--lantern);border-color:var(--lantern);color:#1d1708}


.toast{position:fixed;left:50%;transform:translateX(-50%);top:calc(env(safe-area-inset-top,0px) + 74px);background:var(--panel-2);border:1px solid var(--line);border-radius:12px;padding:10px 16px;max-width:calc(100% - 32px);font-size:.92rem;box-shadow:0 10px 30px rgba(0,0,0,.4)}

/* panneau */
.panel{position:fixed;top:calc(env(safe-area-inset-top,0px) + 70px);right:16px;bottom:calc(env(safe-area-inset-bottom,0px) + 16px);width:min(400px,calc(100% - 32px));
  background:color-mix(in srgb,var(--panel) 96%,transparent);border:1px solid var(--line);border-radius:18px;box-shadow:0 20px 50px rgba(0,0,0,.5);display:flex;flex-direction:column;overflow:hidden}
.panel-head{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:14px 16px 10px;border-bottom:1px solid var(--line)}
.panel-head h2{font-family:var(--f-display);font-weight:400;font-size:1.2rem;margin:0;text-wrap:balance}
.panel-body{overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:14px;min-height:0}
@media (max-width:640px){
  .panel{left:0;right:0;width:auto;top:auto;bottom:0;max-height:72%;border-radius:18px 18px 0 0;padding-bottom:env(safe-area-inset-bottom,0px)}
  .brand h1{font-size:1.2rem}
  .pill .lbl{display:none}
  .pill{padding:7px 11px}
}
.x{border:0;background:transparent;color:var(--muted);font-size:1.4rem;line-height:1;padding:2px 6px;border-radius:8px}
.x:hover{color:var(--ink)}
.label{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.muted{color:var(--muted)}
p{margin:0}
.btn{border:1px solid var(--lantern);background:var(--lantern);color:#1d1708;border-radius:999px;padding:8px 18px;font-weight:700}
.btn:disabled{opacity:.5;cursor:default}
.ghost{border:1px solid var(--line);background:transparent;border-radius:999px;padding:5px 12px;font-size:.86rem;color:var(--muted)}
.ghost:hover{border-color:var(--lantern);color:var(--ink)}
.ghost.on{border-color:var(--moss);color:var(--moss)}
.err{color:var(--danger);font-size:.88rem}

.time{font-family:var(--f-mono);font-size:.74rem;color:var(--muted)}
.top{display:flex;justify-content:space-between;align-items:center;gap:8px}
.state{font-size:.76rem;border-radius:999px;padding:2px 10px;flex:none;border:1px solid var(--line)}
.state.leaf{color:var(--moss);border-color:color-mix(in srgb,var(--moss) 50%,transparent)}
.text{white-space:pre-wrap;overflow-wrap:anywhere;font-size:1.02rem}
.photo{border-radius:12px;display:block;max-height:420px;width:100%;object-fit:contain;background:var(--night)}
.actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.small{font-size:.85rem;color:var(--muted)}
.reply .by{font-size:.85rem;font-weight:600}
.reply .by .time{font-weight:400;margin-left:6px}

.compose textarea{width:100%;min-height:110px;resize:vertical;border:1px solid var(--line);border-radius:12px;background:var(--night);padding:12px;outline:none;font-size:1rem}
.compose textarea:focus,.compose input:focus{border-color:var(--lantern)}
.compose input[type=url]{width:100%;border:1px solid var(--line);border-radius:999px;background:var(--night);padding:8px 14px;outline:none}
.preview{position:relative}
.preview img{border-radius:12px;display:block;max-height:220px}
.preview button{position:absolute;top:8px;right:8px;background:var(--panel)}
::placeholder{color:var(--muted)}

.dot{width:10px;height:10px;border-radius:50%;flex:none}
.keys{display:grid;grid-template-columns:auto 1fr;gap:6px 12px;font-size:.92rem}
kbd{font-family:var(--f-mono);font-size:.78rem;border:1px solid var(--line);border-bottom-width:2px;border-radius:6px;padding:1px 6px;white-space:nowrap}
.field{width:100%;border:1px solid var(--line);border-radius:999px;background:var(--night);padding:8px 14px;outline:none}
.field:focus{border-color:var(--lantern)}
.av-prev{width:240px;height:170px;max-width:100%;align-self:center;border-radius:16px;background:var(--panel-2)}
.tab{background:none;border:0;border-bottom:2px solid transparent;padding:8px 10px;color:var(--muted);font-weight:600;font-size:.9rem}
.tab:hover{color:var(--ink)}
.tab.on{color:var(--ink);border-bottom-color:var(--lantern)}
.sw{width:30px;height:30px;border-radius:50%;border:2px solid transparent;box-shadow:inset 0 0 0 2px rgba(0,0,0,.15)}
.sw.on{border-color:var(--ink);transform:scale(1.08)}
.status{border:1px dashed var(--line);border-radius:12px;padding:12px;color:var(--muted)}

/* ---------- pièces d'or, niveau, boutique ---------- */
.ico{width:17px;height:17px;flex:none}
.coin{display:inline-block;width:15px;height:15px;border-radius:50%;flex:none;vertical-align:-2px;
  background:radial-gradient(circle at 35% 30%,#fff3b8 0 18%,#f3c44d 34%,#c8901e 72%,#8a5f10 100%);box-shadow:inset 0 0 0 1.5px rgba(120,80,10,.55),0 1px 2px rgba(0,0,0,.4)}
.wallet{gap:7px;font-family:var(--f-mono);font-weight:500}
.wallet .lvl{font-family:var(--f-body);font-weight:800;font-size:.72rem;color:#2a1d0a;background:#e6b84a;border-radius:999px;padding:1px 7px}
.wallet .lvl::before{content:"Niv. "}
@media (max-width:640px){ .wallet .lvl::before{content:""} .wallet{gap:5px} }
.level-card{display:flex;flex-direction:column;gap:8px;background:var(--panel-2);border:1px solid var(--line);border-radius:14px;padding:14px}
.level-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.gold-big{font-family:var(--f-mono);font-size:1.05rem;display:inline-flex;align-items:center;gap:7px}
.xpbar{height:8px;border-radius:999px;background:var(--night);border:1px solid var(--line);overflow:hidden}
.xpbar > span{display:block;height:100%;background:linear-gradient(90deg,#c8901e,var(--lantern));border-radius:999px}
.item{display:flex;flex-direction:column;gap:6px;background:var(--panel-2);border:1px solid var(--line);border-radius:14px;padding:8px}
.item.owned{border-color:color-mix(in srgb,var(--moss) 45%,var(--line))}
.item img{width:100%;aspect-ratio:4/3;object-fit:contain;border-radius:9px;background:#24382c}
.item .ds{font-size:.76rem;color:var(--muted);line-height:1.35;flex:1}
.price{font-family:var(--f-mono);font-size:.82rem;display:inline-flex;align-items:center;gap:5px}
.price.short{color:var(--danger)}
.item .btn,.item .ghost{padding:4px 11px;font-size:.8rem}
.btn:disabled{opacity:.45;cursor:default}
.ghost.locked{border-style:dashed}

/* bouton de saut (téléphone, dès le niveau 5) */
.jump-btn{position:fixed;right:calc(env(safe-area-inset-right,0px) + 18px);bottom:calc(env(safe-area-inset-bottom,0px) + 54px);width:62px;height:62px;border-radius:50%;
  border:1px solid var(--lantern);background:color-mix(in srgb,var(--panel) 80%,transparent);backdrop-filter:blur(6px);color:var(--lantern);display:grid;place-items:center;
  box-shadow:0 6px 18px rgba(0,0,0,.45);touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.jump-btn svg{width:26px;height:26px}
.jump-btn:active{transform:scale(.94);background:var(--lantern);color:#1d1708}

/* ---------- version 3D ---------- */
.bubble3{position:fixed;left:0;top:0;background:rgba(243,201,107,.95);color:#1d1708;font:700 .85rem var(--f-body);padding:4px 12px;border-radius:999px;pointer-events:none;white-space:nowrap;z-index:3}
.bubble3.key3{background:none;padding:0 0 6px;border-radius:0}
.bubble3 .kc{display:grid;place-items:center;width:30px;height:30px;border-radius:7px;background:linear-gradient(#fbf3df,#e4d3ab);color:#2a2112;font:800 .95rem/1 var(--f-body);border:1px solid #b9a271;box-shadow:0 3px 0 #9c8350,0 6px 10px rgba(0,0,0,.35);animation:kc-bob 1.8s ease-in-out infinite}
.bubble3 .kc.press{transform:translateY(3px);box-shadow:0 0 0 #9c8350,0 2px 4px rgba(0,0,0,.35);animation:none;transition:transform .05s}
@keyframes kc-bob{50%{transform:translateY(-3px)}}
@media (prefers-reduced-motion:reduce){ .bubble3 .kc{animation:none} }
.floater{position:fixed;left:0;top:0;font:800 1.05rem var(--f-body);pointer-events:none;white-space:nowrap;text-shadow:0 2px 0 rgba(20,14,6,.85),0 0 6px rgba(20,14,6,.7);z-index:3}
.fade3{position:fixed;inset:0;background:#0a0806;opacity:0;pointer-events:none;z-index:1}
.bar,.panel,.toast{z-index:5}
.cam-btns{position:fixed;left:calc(env(safe-area-inset-left,0px) + 16px);bottom:calc(env(safe-area-inset-bottom,0px) + 54px);display:none;gap:8px;z-index:3}
.cam-btns button,.look-btn{width:48px;height:48px;border-radius:50%;border:1px solid var(--line);background:color-mix(in srgb,var(--panel) 85%,transparent);backdrop-filter:blur(6px);color:var(--ink);font:800 1.1rem var(--f-body);display:grid;place-items:center}
.look-btn{position:fixed;left:16px;bottom:calc(env(safe-area-inset-bottom,0px) + 54px);z-index:3}
.look-btn svg{width:22px;height:22px}
.look-btn.on{border-color:var(--lantern);color:var(--lantern)}
@media (pointer:coarse){ .cam-btns{display:flex} .look-btn{display:none} }
body.locked #world{cursor:none}

/* ---------- menu général (touche M) : sachets de graines sur un carnet de jardinier ---------- */
.gmenu{position:fixed;inset:0;z-index:20;display:grid;place-items:center;padding:24px 16px}
.gmenu[hidden]{display:none}
.gmenu-veil{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 45%, rgba(18,32,24,.55), rgba(5,10,8,.88) 70%);backdrop-filter:blur(7px) saturate(.8);opacity:0;transition:opacity .25s}
.gmenu.shown .gmenu-veil{opacity:1}
.gmenu.leaving .gmenu-veil{opacity:0}
.gmenu-box{position:relative;display:flex;flex-direction:column;align-items:center;gap:26px;width:min(1040px,100%)}
.gmenu-head{text-align:center;color:#efe4c8;opacity:0;transform:translateY(-10px);transition:opacity .35s .05s,transform .35s .05s}
.gmenu.shown .gmenu-head{opacity:1;transform:none}
.gmenu-head h2{margin:2px 0 4px;font-family:var(--f-display);font-weight:400;font-size:clamp(2.1rem,5vw,3.2rem);line-height:1;color:#f6ecd2;text-shadow:0 2px 18px rgba(243,201,107,.25)}
.gmenu-packets{display:flex;gap:18px;justify-content:center;flex-wrap:wrap}
/* un sachet : papier kraft clair, haut dentelé, bandeau de couleur, illustration au trait, timbre numéroté */
.packet{--band:#7fa486;--ink2:#2e3a2c;position:relative;width:172px;height:244px;border:0;padding:0;background:none;color:var(--ink2);
  display:flex;flex-direction:column;align-items:center;text-align:center;cursor:pointer;
  transform:translateY(40px);opacity:0;transition:transform .35s cubic-bezier(.2,.9,.3,1.25),opacity .3s,filter .2s,--tilt .35s cubic-bezier(.2,.9,.3,1.25);filter:drop-shadow(0 14px 18px rgba(0,0,0,.45))}
.packet::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:4px 4px 10px 10px;
  background:
    linear-gradient(var(--band),var(--band)) top/100% 64px no-repeat,
    repeating-linear-gradient(90deg,rgba(120,90,50,.05) 0 2px,transparent 2px 7px),
    radial-gradient(ellipse at 30% 20%,rgba(255,255,255,.35),transparent 60%),
    linear-gradient(170deg,#f3e8cc,#e6d6ae);
  -webkit-mask:conic-gradient(from 135deg at 50% 0,#0000,#000 1deg 89deg,#0000 90deg) top/14px 9px repeat-x,linear-gradient(#000 0 0) bottom/100% calc(100% - 9px) no-repeat;
          mask:conic-gradient(from 135deg at 50% 0,#0000,#000 1deg 89deg,#0000 90deg) top/14px 9px repeat-x,linear-gradient(#000 0 0) bottom/100% calc(100% - 9px) no-repeat}
.packet::after{content:"";position:absolute;left:14px;right:14px;bottom:14px;height:1px;background:repeating-linear-gradient(90deg,rgba(46,58,44,.35) 0 4px,transparent 4px 8px)}
.packet:nth-child(1){--tilt:-3deg}
.packet:nth-child(2){--tilt:1.5deg}
.packet:nth-child(3){--tilt:-1deg}
.packet:nth-child(4){--tilt:-2deg}
.packet:nth-child(5){--tilt:2.5deg}
.gmenu.shown .packet{opacity:1;transform:none}
.packet[hidden]{display:none}
/* barre d'XP tout en bas de l'écran, le niveau juste au-dessus */
.hud-xp{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(env(safe-area-inset-bottom,0px) + 10px);width:min(520px,calc(100% - 32px));z-index:5;pointer-events:none;text-align:center}
.hud-xp[hidden]{display:none}
.xp-lvl{display:flex;justify-content:center;align-items:baseline;gap:8px;margin-bottom:5px;font-family:var(--f-mono);font-size:.72rem;letter-spacing:.04em;color:#f3ead2;text-shadow:0 1px 2px rgba(0,0,0,.6)}
.xp-lvl b{font-size:.86rem;color:#f6d36b}
.xp-track{height:7px;border-radius:999px;background:rgba(10,16,12,.62);box-shadow:inset 0 0 0 1px rgba(243,234,210,.22);overflow:hidden}
.xp-track i{display:block;height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,#8fc46a,#d9e86f);transition:width .6s ease}
/* seul le papier est penché : le texte et le dessin restent droits, donc parfaitement nets */
@property --tilt{syntax:"<angle>";inherits:true;initial-value:0deg}
.packet::before,.packet::after{transform:rotate(var(--tilt))}
.gmenu.shown .packet:nth-child(1){transition-delay:.04s}
.gmenu.shown .packet:nth-child(2){transition-delay:.09s}
.gmenu.shown .packet:nth-child(3){transition-delay:.14s}
.gmenu.shown .packet:nth-child(4){transition-delay:.19s}
.gmenu.shown .packet:nth-child(5){transition-delay:.24s}
.gmenu.leaving .packet{opacity:0;transform:translateY(24px);transition-delay:0s}
.gmenu.shown .packet.sel{--tilt:0deg;transform:translateY(-18px);transition-delay:0s;filter:drop-shadow(0 22px 26px rgba(0,0,0,.55)) drop-shadow(0 0 22px rgba(243,201,107,.18))}
.packet:focus,.gmenu-box:focus{outline:none}
.packet.sel .packet-name{text-decoration:underline;text-decoration-color:var(--band);text-underline-offset:5px;text-decoration-thickness:2px}
.p-sage{--band:#7fa486}
.p-terra{--band:#c9785a}
.p-mustard{--band:#d8a93e}
.p-plum{--band:#8a5a78}
.p-slate{--band:#5f7f96}
.packet-art{margin-top:34px;width:104px;height:104px;border-radius:50%;display:grid;place-items:center;background:#faf3e1;border:2px solid var(--band);box-shadow:inset 0 0 0 5px #faf3e1,inset 0 0 0 6px rgba(46,58,44,.18);color:var(--ink2);transition:transform .35s}
.packet-art svg{width:62px;height:62px}
.packet.sel .packet-art{transform:rotate(-6deg) scale(1.05)}
.packet-name{margin-top:16px;font-family:var(--f-display);font-size:1.32rem;line-height:1.1;padding:0 10px}
.packet-sub{margin-top:5px;font-family:var(--f-mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(46,58,44,.65);padding:0 12px}
.packet.confirm{--band:#b8443c}
.packet.confirm .packet-sub{color:#9b3029;font-weight:500}
.packet.confirm .packet-art{animation:gm-shake .4s}
@keyframes gm-shake{25%{transform:rotate(-8deg)}75%{transform:rotate(8deg)}}
.gmenu-foot{margin:0;font-family:var(--f-mono);font-size:.74rem;color:var(--muted);opacity:0;transition:opacity .3s .2s}
.gmenu.shown .gmenu-foot{opacity:1}
.gmenu-foot kbd{font-family:var(--f-mono);font-size:.72rem;border:1px solid var(--line);border-bottom-width:2px;border-radius:5px;padding:1px 6px;margin:0 1px;color:var(--ink);background:var(--panel)}
@media (min-width:861px){ .gmenu-box{width:auto} .gmenu-packets{flex-wrap:nowrap} }
@media (max-width:860px){ .gmenu-packets{display:grid;grid-template-columns:repeat(2,minmax(0,170px));gap:16px} .packet:last-child{grid-column:1 / -1;justify-self:center;width:calc(50% - 8px)!important} .packet{width:100%;height:220px} .packet-art{width:86px;height:86px;margin-top:30px} .packet-art svg{width:52px;height:52px} }
@media (prefers-reduced-motion:reduce){ .packet,.gmenu-veil,.gmenu-head,.gmenu-foot,.packet-art{transition:none} }

/* reprise de la balade (la souris est capturée par le jeu) et viseur discret au centre */
.resume{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:6;border:1px solid color-mix(in srgb,var(--lantern) 60%,transparent);background:color-mix(in srgb,var(--night) 78%,transparent);backdrop-filter:blur(6px);
  color:var(--ink);font-family:var(--f-display);font-size:1.15rem;padding:14px 26px;border-radius:999px;box-shadow:0 10px 30px rgba(0,0,0,.4);animation:resume-pulse 2.4s ease-in-out infinite}
.resume[hidden]{display:none}
.resume::before{content:"";display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--lantern);margin-right:10px;vertical-align:middle;box-shadow:0 0 10px var(--lantern)}
@keyframes resume-pulse{50%{box-shadow:0 10px 30px rgba(0,0,0,.4),0 0 0 6px color-mix(in srgb,var(--lantern) 15%,transparent)}}
.crosshair{position:fixed;left:50%;top:50%;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:rgba(255,248,230,.75);box-shadow:0 0 0 1.5px rgba(0,0,0,.35);pointer-events:none;z-index:2;display:none}
body.locked .crosshair{display:block}
.look-btn[hidden]{display:none}

/* ---------- sous-sections du menu : carnet du jardinier (inventaire, boutique, aide) ---------- */
.gbook{--band:#7fa486;--kraft:#efe3c4;--kraft2:#e3d3ab;--ink2:#2e3a2c;--soft:rgba(46,58,44,.62);position:fixed;inset:0;z-index:19;display:grid;place-items:center;padding:22px 16px}
.gbook[hidden]{display:none}
.gbook[data-theme="terra"]{--band:#c9785a}
.gbook[data-theme="mustard"]{--band:#d8a93e}
.gbook[data-theme="slate"]{--band:#5f7f96}
.gbook-veil{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 40%,rgba(18,32,24,.55),rgba(5,10,8,.9) 70%);backdrop-filter:blur(7px) saturate(.8)}
.gbook-sheet{position:relative;width:min(1040px,100%);height:min(720px,calc(100vh - 56px));height:min(720px,calc(100dvh - 56px));display:flex;flex-direction:column;color:var(--ink2);border-radius:6px 6px 14px 14px;
  background:repeating-linear-gradient(90deg,rgba(120,90,50,.045) 0 2px,transparent 2px 7px),radial-gradient(ellipse at 20% 0%,rgba(255,255,255,.4),transparent 55%),linear-gradient(170deg,var(--kraft),var(--kraft2));
  box-shadow:0 30px 70px rgba(0,0,0,.55);transform:translateY(26px);opacity:0;transition:transform .35s cubic-bezier(.2,.9,.3,1.15),opacity .25s}
.gbook.shown .gbook-sheet{transform:none;opacity:1}
/* haut dentelé + bandeau de couleur, comme les sachets */
.gbook-head{position:relative;display:flex;align-items:center;gap:12px;padding:20px 22px 16px;background:var(--band);color:#fbf4e2;border-radius:6px 6px 0 0}
.gbook-head::before{content:"";position:absolute;left:0;right:0;top:-8px;height:9px;background:var(--band);
  -webkit-mask:conic-gradient(from 135deg at 50% 0,#0000,#000 1deg 89deg,#0000 90deg) top/14px 9px repeat-x;mask:conic-gradient(from 135deg at 50% 0,#0000,#000 1deg 89deg,#0000 90deg) top/14px 9px repeat-x}
.gbook-titles{flex:1;text-align:center;min-width:0}
.gbook-kicker{margin:0;font-family:var(--f-mono);font-size:.68rem;letter-spacing:.3em;text-transform:uppercase;opacity:.85}
.gbook-head h2{margin:2px 0 0;font-family:var(--f-display);font-weight:400;font-size:2rem;line-height:1}
.gbook-back,.gbook-x{border:1.5px solid rgba(251,244,226,.55);background:rgba(0,0,0,.08);color:#fbf4e2;border-radius:999px;font-weight:600;font-size:.86rem;padding:6px 14px;min-width:90px}
.gbook-x{min-width:0;width:38px;height:38px;padding:0;font-size:1.3rem;line-height:1}
.gbook-back:hover,.gbook-x:hover{background:rgba(0,0,0,.18);border-color:#fbf4e2}
.gbook-body{flex:1;min-height:0;overflow:auto;padding:18px 22px 22px}
.gbook-body > div{display:flex;flex-direction:column;gap:14px;min-height:100%}
.bk-bag,.bk-shop{height:100%}
/* éléments communs */
.bk-strip{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.bk-purse{display:inline-flex;align-items:center;gap:7px;background:#faf3e1;border:1.5px solid rgba(46,58,44,.18);border-radius:999px;padding:6px 14px;font-size:.88rem;color:var(--soft)}
.bk-purse b{font-family:var(--f-mono);font-size:1.05rem;color:var(--ink2)}
.bk-tags{display:flex;gap:8px;flex-wrap:wrap}
.bk-tag{position:relative;border:0;background:#faf3e1;color:var(--soft);font-weight:600;font-size:.86rem;padding:7px 16px 7px 24px;border-radius:4px 14px 14px 4px;box-shadow:0 2px 0 rgba(46,58,44,.12);transform:rotate(-1deg)}
.bk-tag:nth-child(2n){transform:rotate(1deg)}
.bk-tag::before{content:"";position:absolute;left:9px;top:50%;width:7px;height:7px;margin-top:-3.5px;border-radius:50%;background:var(--kraft2);box-shadow:inset 0 1px 1px rgba(0,0,0,.25)}
.bk-tag i{font-style:normal;font-family:var(--f-mono);font-size:.74rem;margin-left:7px;opacity:.7}
.bk-tag.on{background:var(--band);color:#fbf4e2;transform:rotate(0) translateY(-2px)}
.bk-tag.on::before{background:rgba(255,255,255,.5)}
.bk-cols{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:18px}
.bk-side{display:flex;flex-direction:column;gap:12px;min-height:0;overflow:auto;padding-top:8px}
.bk-card{background:#faf3e1;border-radius:10px;padding:16px;display:flex;flex-direction:column;gap:8px;box-shadow:0 1px 0 rgba(46,58,44,.12),inset 0 0 0 1.5px rgba(46,58,44,.1);position:relative}
.bk-card::after{content:"";position:absolute;top:-7px;left:50%;width:54px;height:16px;margin-left:-27px;background:rgba(216,169,62,.35);transform:rotate(-2deg)} /* ruban adhésif */
.bk-card-art{aspect-ratio:4/3;border-radius:8px;background:#24382c;display:grid;place-items:center;overflow:hidden;border:3px solid #fff8ea;box-shadow:0 0 0 1.5px rgba(46,58,44,.15)}
.bk-card-art img{width:100%;height:100%;object-fit:contain}
.bk-card-art.blank{background:repeating-linear-gradient(45deg,rgba(46,58,44,.06) 0 8px,transparent 8px 16px),#f3e9d0}
.bk-card h3{margin:2px 0 0;font-family:var(--f-display);font-weight:400;font-size:1.35rem;line-height:1.15}
.bk-card p{margin:0;font-size:.86rem;line-height:1.45;color:var(--soft)}
.bk-card.empty{text-align:center;align-items:center}
.bk-cat{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--band);filter:brightness(.8)}
.bk-state{align-self:flex-start;font-size:.78rem;font-weight:600;color:#3f6b48;background:rgba(127,164,134,.22);border-radius:999px;padding:3px 10px}
.bk-btn{border:0;border-radius:999px;background:var(--band);color:#fbf4e2;font-weight:700;padding:9px 18px;font-size:.9rem;box-shadow:0 3px 0 rgba(0,0,0,.18);transition:transform .15s}
.bk-btn:hover:not(:disabled){transform:translateY(-1px)}
.bk-btn:active:not(:disabled){transform:translateY(1px);box-shadow:0 1px 0 rgba(0,0,0,.18)}
.bk-btn:disabled{opacity:.45;cursor:not-allowed}
.bk-btn.soft{background:transparent;color:var(--ink2);box-shadow:inset 0 0 0 1.5px rgba(46,58,44,.35)}
.bk-link{border:0;background:none;color:var(--ink2);font-weight:600;font-size:.86rem;text-decoration:underline;text-decoration-color:var(--band);text-underline-offset:4px;margin-left:auto}
.bk-note{font-size:.8rem;color:var(--soft);margin:0}
.bk-short{font-size:.8rem;color:#9b3a2f;margin:0}
.bk-none{color:var(--soft)}
/* inventaire : tampon de niveau, tige d'XP, casier en bois */
.bk-level{width:70px;height:70px;flex:none;border-radius:50%;display:grid;place-content:center;text-align:center;color:var(--band);border:2.5px dashed var(--band);background:#faf3e1;transform:rotate(-8deg);filter:brightness(.85)}
.bk-level span{font-family:var(--f-mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase}
.bk-level b{font-family:var(--f-display);font-weight:400;font-size:1.8rem;line-height:.9}
.bk-xp{flex:1;min-width:200px}
.bk-xp-lbl{font-family:var(--f-mono);font-size:.8rem;font-weight:500}
.bk-xp-sub{font-size:.76rem;color:var(--soft)}
.bk-stem{position:relative;height:12px;margin:5px 0 4px;border-radius:999px;background:rgba(46,58,44,.12);overflow:hidden}
.bk-stem span{position:absolute;left:0;top:0;bottom:0;border-radius:999px;background:
  radial-gradient(ellipse 6px 4px at 6px 3px,#a9cf8a 98%,#0000) 0 0/22px 12px repeat-x,
  radial-gradient(ellipse 6px 4px at 17px 9px,#a9cf8a 98%,#0000) 0 0/22px 12px repeat-x,
  linear-gradient(#6f9e5a,#5b8a4a) center/100% 3px no-repeat;transition:width .6s}
.bk-tray{min-height:0;overflow:auto;padding:14px;border-radius:12px;background:linear-gradient(#8b6440,#7a5534);box-shadow:inset 0 2px 6px rgba(0,0,0,.35),0 2px 0 rgba(46,58,44,.15)}
.bk-slots{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
.bk-slot{position:relative;aspect-ratio:1;border:0;padding:6px;border-radius:7px;background:linear-gradient(160deg,#5e4128,#4f3620);box-shadow:inset 0 3px 6px rgba(0,0,0,.45),inset 0 -1px 0 rgba(255,220,170,.12);display:grid;place-items:center}
.bk-slot.full{background:linear-gradient(160deg,#f6ecd2,#e6d6ae);box-shadow:0 3px 0 rgba(0,0,0,.25),inset 0 0 0 2px rgba(255,255,255,.4);cursor:pointer;transition:transform .15s}
.bk-slot.full:hover{transform:translateY(-3px) rotate(-1.5deg)}
.bk-slot img{width:100%;height:100%;object-fit:contain;border-radius:4px;background:#24382c}
.bk-slot.sel{box-shadow:0 0 0 3px var(--band),0 0 18px rgba(243,201,107,.45),0 3px 0 rgba(0,0,0,.25);transform:translateY(-3px)}
.bk-slot.used::after{content:"";position:absolute;top:-4px;right:-4px;width:16px;height:16px;border-radius:50%;background:#7fa486;border:2px solid #faf3e1;box-shadow:0 1px 2px rgba(0,0,0,.3)}
.bk-slot:focus-visible{outline:3px solid #fbf4e2;outline-offset:2px}
/* boutique : auvent rayé, étiquettes de prix suspendues */
.bk-awning{height:22px;margin:-18px -22px 0;background:repeating-linear-gradient(90deg,#c9785a 0 34px,#f6ecd2 34px 68px);
  -webkit-mask:radial-gradient(17px 12px at 17px 0,#000 98%,#0000) 0 0/34px 22px repeat-x,linear-gradient(#000,#000) top/100% 10px no-repeat;mask:radial-gradient(17px 12px at 17px 0,#000 98%,#0000) 0 0/34px 22px repeat-x,linear-gradient(#000,#000) top/100% 10px no-repeat;filter:drop-shadow(0 3px 2px rgba(0,0,0,.2))}
.bk-stall{min-height:0;overflow:auto;padding:16px 6px 6px;background:linear-gradient(transparent 0 calc(100% - 1px),rgba(46,58,44,.18) 0) 0 0/100% 196px}
.bk-tagsgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(138px,1fr));gap:26px 14px}
.bk-price{position:relative;border:0;padding:24px 10px 12px;background:#faf3e1;border-radius:6px 6px 10px 10px;color:var(--ink2);display:flex;flex-direction:column;align-items:center;gap:6px;
  clip-path:polygon(18% 0,82% 0,100% 12%,100% 100%,0 100%,0 12%);transform:rotate(var(--sw,0deg));transform-origin:50% -14px;transition:transform .2s;filter:drop-shadow(0 4px 4px rgba(0,0,0,.18))}
.bk-price::before{content:"";position:absolute;left:50%;top:-16px;width:1.5px;height:24px;background:rgba(46,58,44,.45)} /* la ficelle */
.bk-price:hover{transform:rotate(calc(var(--sw,0deg) * -2)) translateY(-2px)}
.bk-price.sel{background:#fff8ea;filter:drop-shadow(0 0 0 var(--band)) drop-shadow(0 6px 10px rgba(0,0,0,.22));box-shadow:inset 0 0 0 2.5px var(--band)}
.bk-hole{position:absolute;top:8px;left:50%;width:9px;height:9px;margin-left:-4.5px;border-radius:50%;background:var(--kraft2);box-shadow:inset 0 1px 2px rgba(0,0,0,.3)}
.bk-price img{width:100%;aspect-ratio:4/3;object-fit:contain;border-radius:5px;background:#24382c}
.bk-pname{font-family:var(--f-display);font-size:.98rem;line-height:1.15;text-align:center}
.bk-pcost{display:inline-flex;align-items:center;gap:5px;font-family:var(--f-mono);font-size:.86rem;font-weight:500}
.bk-pcost.short{color:#9b3a2f}
.bk-stamp{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:#3f6b48;border:1.5px solid #3f6b48;border-radius:4px;padding:1px 7px;transform:rotate(-6deg)}
.bk-price.owned{opacity:.85}
.bk-buyrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:4px}
.bk-bigprice{display:inline-flex;align-items:center;gap:7px;font-family:var(--f-mono);font-size:1.25rem;margin-right:auto}
.bk-bigprice.short{color:#9b3a2f}
/* aide : chapitres et page lignée */
.bk-help{flex-direction:row !important;gap:0 !important}
.bk-chapters{flex:none;width:210px;display:flex;flex-direction:column;gap:6px;padding:4px 14px 0 0}
.bk-ch{display:flex;align-items:center;gap:10px;border:0;background:none;text-align:left;padding:9px 12px;border-radius:8px;color:var(--soft);font-weight:600;font-size:.92rem}
.bk-ch i{font-style:normal;font-family:var(--f-display);font-size:.95rem;width:26px;color:var(--band);filter:brightness(.8)}
.bk-ch:hover{background:rgba(255,255,255,.3)}
.bk-ch.on{background:#faf3e1;color:var(--ink2);box-shadow:0 2px 0 rgba(46,58,44,.12)}
.bk-page{flex:1;min-width:0;overflow:auto;background:#fbf6e8;border-radius:4px 10px 10px 4px;padding:22px 26px 24px 46px;position:relative;font-size:.92rem;line-height:1.6;
  background-image:linear-gradient(90deg,transparent 30px,rgba(201,120,90,.35) 30px 31.5px,transparent 31.5px),repeating-linear-gradient(transparent 0 26px,rgba(90,130,170,.16) 26px 27px);box-shadow:inset 0 0 0 1.5px rgba(46,58,44,.08)}
.bk-page p{margin:0 0 12px}
.bk-h{margin:0 0 10px;font-family:var(--f-display);font-weight:400;font-size:1.6rem;line-height:1.1}
.bk-keys{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 18px;margin-bottom:12px}
.bk-key{display:flex;align-items:center;gap:10px}
.bk-key kbd{flex:none;min-width:96px;text-align:center;font-family:var(--f-mono);font-size:.74rem;background:#efe3c4;color:var(--ink2);border:1.5px solid rgba(46,58,44,.25);border-bottom-width:3px;border-radius:6px;padding:3px 8px}
.bk-chips{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 14px}
.bk-chip{border:1.5px solid rgba(46,58,44,.25);background:#faf3e1;border-radius:999px;padding:5px 13px;font-size:.84rem;font-weight:600;color:var(--soft)}
.bk-chip.on{background:var(--band);border-color:var(--band);color:#fbf4e2}
@media (max-width:820px){
  .gbook{padding:18px 10px 10px} .gbook-sheet{height:calc(100dvh - 28px)} .bk-bag,.bk-shop{height:auto} .bk-tray,.bk-stall{overflow:visible}
  .bk-cols{grid-template-columns:1fr} .bk-slots{grid-template-columns:repeat(4,minmax(0,1fr))}
  .bk-help{flex-direction:column !important} .bk-chapters{width:auto;flex-direction:row;flex-wrap:wrap;padding:0 0 10px} .bk-keys{grid-template-columns:1fr}
  .gbook-back{min-width:0} .gbook-head h2{font-size:1.5rem}
}
@media (prefers-reduced-motion:reduce){ .gbook-sheet{transition:none} }
.bk-slider{display:grid;grid-template-columns:minmax(0,1fr) 180px 92px;align-items:center;gap:12px;margin:0 0 10px}
.bk-slider span{font-weight:600}
.bk-slider b{font-family:var(--f-mono);font-size:.82rem;text-align:right}
.bk-slider input{accent-color:var(--band);width:100%}
/* case pour taper la valeur d'un curseur (ui/numfield.js) */
.num-field{display:flex;align-items:center;gap:3px;justify-self:end;font-family:var(--f-mono);font-size:.82rem}
.num-field i{font-style:normal;color:var(--soft)}
.bk-slider .num-field input{width:6.4ch;box-sizing:border-box;padding:3px 5px;border:1px solid rgba(46,58,44,.25);border-radius:6px;background:rgba(255,255,255,.55);font:inherit;text-align:right;color:inherit}
.bk-slider .num-field input:focus{outline:2px solid var(--band);outline-offset:1px;background:#fff}
@media (max-width:820px){ .bk-slider{grid-template-columns:1fr 92px} .bk-slider span{grid-column:1 / -1} }

/* ---------- Inventaire : sections (objets / personnalisation de l'avatar) ---------- */
.gbook-body > .bk-bag-wrap{gap:12px}
.bk-bag-wrap > .bk-bag,.bk-bag-wrap > .bk-av{flex:1;min-height:0;height:auto}
.bk-sections{display:flex;gap:4px;border-bottom:2px solid rgba(46,58,44,.14);margin:-4px 0 2px}
.bk-section{position:relative;border:0;background:none;padding:8px 16px 9px;font-family:var(--f-display);font-size:1.05rem;color:var(--soft);border-radius:8px 8px 0 0}
.bk-section:hover{color:var(--ink2);background:rgba(255,255,255,.25)}
.bk-section.on{color:var(--ink2);background:#faf3e1;box-shadow:0 -1px 0 rgba(46,58,44,.08)}
.bk-section.on::after{content:"";position:absolute;left:12px;right:12px;bottom:-2px;height:3px;border-radius:2px;background:var(--band)}
/* personnalisation de l'avatar : aperçu à gauche, réglages à droite */
.bk-av{display:grid !important;grid-template-columns:300px minmax(0,1fr);gap:20px;min-height:0}
.bk-av-stage{display:flex;flex-direction:column;gap:8px;min-height:0}
.bk-av-art{aspect-ratio:auto;flex:1;min-height:240px;max-height:440px;background:radial-gradient(ellipse at 50% 85%,#3a5442,#24382c 70%)}
.bk-av-art canvas{width:100%;height:100%;display:block}
.bk-field{width:100%;border:1.5px solid rgba(46,58,44,.25);border-radius:999px;background:#fbf6e8;color:var(--ink2);padding:8px 14px;font-size:.95rem;outline:none}
.bk-field:focus{border-color:var(--band);box-shadow:0 0 0 3px rgba(127,164,134,.25)}
.bk-av-acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
.bk-av-acts .bk-btn{flex:1 1 auto;white-space:nowrap}
.bk-av-opts{min-height:0;overflow:auto;background:#fbf6e8;border-radius:10px;padding:16px 18px 6px;box-shadow:inset 0 0 0 1.5px rgba(46,58,44,.08)}
.bk-av-opts .bk-tags{margin-bottom:14px}
.bk-av-group{border-top:1px dashed rgba(46,58,44,.18);padding-top:10px;margin-bottom:6px}
.bk-av-group:first-of-type{border-top:0;padding-top:0}
.bk-av-h{margin:0 0 8px;font-family:var(--f-mono);font-size:.7rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--band);filter:brightness(.75)}
.bk-av .bk-chips{margin:0 0 10px}
.bk-chip:hover{border-color:var(--band);color:var(--ink2)}
.bk-chip.locked{border-style:dashed}
.bk-chip i{font-style:normal;font-family:var(--f-mono);font-size:.72rem;margin-left:6px;opacity:.8}
.bk-swatches{display:flex;flex-wrap:wrap;gap:9px;margin:0 0 12px}
.bk-sw{width:30px;height:30px;border-radius:50%;border:3px solid #fbf6e8;box-shadow:0 0 0 1.5px rgba(46,58,44,.25),0 2px 3px rgba(0,0,0,.12);padding:0;cursor:pointer;transition:transform .12s}
.bk-sw:hover{transform:scale(1.08)}
.bk-sw.on{box-shadow:0 0 0 2.5px var(--band),0 2px 4px rgba(0,0,0,.18);transform:scale(1.12)}
.bk-sw-custom{position:relative;display:inline-block;background:conic-gradient(#e44,#fd4,#4c4,#4cf,#44e,#e4e,#e44)}
.bk-sw-custom input{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer}
.bk-av .bk-slider{grid-template-columns:minmax(0,1fr) minmax(110px,220px) 92px;margin:0 0 8px}
.bk-av .bk-note{margin:2px 0 12px}
.bk-sw:focus-visible,.bk-chip:focus-visible,.bk-section:focus-visible{outline:2px solid var(--band);outline-offset:2px}
@media (max-width:820px){
  .bk-av{grid-template-columns:1fr} .bk-av-art{min-height:220px;max-height:280px;flex:none;height:260px} .bk-av-opts{overflow:visible}
  .bk-sections{overflow-x:auto} .bk-section{white-space:nowrap;font-size:.95rem;padding:7px 12px}
}

/* ---------- Paramètres ---------- */
.gbook-body > .bk-settings{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(400px,100%),1fr));gap:22px;align-content:start;min-height:0;padding:6px 2px 10px}
.bk-set{position:relative;background:#fbf6e8;border-radius:10px;padding:20px 22px 18px;box-shadow:0 1px 0 rgba(46,58,44,.12),inset 0 0 0 1.5px rgba(46,58,44,.1)}
.bk-set::after{content:"";position:absolute;top:-7px;left:50%;width:54px;height:16px;margin-left:-27px;background:rgba(95,127,150,.35);transform:rotate(-2deg)}
.bk-set .bk-h{margin-top:0}
.bk-set .bk-slider{grid-template-columns:minmax(0,1fr) 150px 92px}
.bk-toggle{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:6px 0 12px;font-weight:600;cursor:pointer}
.bk-toggle input{appearance:none;-webkit-appearance:none;width:42px;height:24px;border-radius:12px;background:rgba(46,58,44,.18);position:relative;cursor:pointer;transition:background .2s;flex:none;margin:0}
.bk-toggle input::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff8ea;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .2s}
.bk-toggle input:checked{background:var(--band)}
.bk-toggle input:checked::after{transform:translateX(18px)}
.bk-toggle input:focus-visible{outline:2px solid var(--band);outline-offset:2px}
.bk-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.bk-set .bk-keys{grid-template-columns:1fr}
.gmenu-ver{opacity:.55;margin-left:4px}

/* compteur de performances (F3) */
.perf3{position:fixed;left:10px;top:64px;z-index:30;white-space:pre;font:600 12px/1.45 var(--f-mono);color:#e8f5d8;background:rgba(6,12,9,.72);border:1px solid rgba(232,245,216,.18);border-radius:8px;padding:8px 10px;pointer-events:none}
.perf3[hidden]{display:none}

/* =====================================================================================================
   Design « épuré » (body.ui-clean) : le menu et le carnet occupent presque tout l'écran ; plus de papier kraft
   derrière : le jeu flouté sert de fond, et seuls les boutons, cartes et réglages sont posés dessus, nets.
   (Retirer la classe ui-clean du <body> dans index.html ramène l'ancien style.)
   ===================================================================================================== */
body.ui-clean{--cl-text:#f4ecd8;--cl-soft:rgba(244,236,216,.66);--cl-line:rgba(244,236,216,.18);--cl-card:#f8f2e4}
.ui-clean .gmenu-veil,.ui-clean .gbook-veil{background:rgba(6,12,9,.5);backdrop-filter:blur(14px) saturate(.85);-webkit-backdrop-filter:blur(14px) saturate(.85)}
.ui-clean .gmenu,.ui-clean .gbook{padding:0}

/* --- menu général : une rangée de tuiles sur toute la largeur --- */
.ui-clean .gmenu-box{align-items:stretch;gap:28px}
.ui-clean .gmenu-head{text-align:left;padding:0 6px}
.ui-clean .gmenu-head h2{font-size:3rem;text-shadow:none}
.ui-clean .gmenu-packets{display:flex;flex-wrap:nowrap;gap:16px;justify-content:stretch}
.ui-clean .packet{flex:1 1 0;width:auto;min-width:0;height:300px;background:var(--cl-card);border-radius:16px;overflow:hidden;
  justify-content:center;filter:none;box-shadow:0 10px 30px rgba(0,0,0,.35);transition:transform .3s cubic-bezier(.2,.9,.3,1.2),opacity .3s,box-shadow .2s}
.ui-clean .packet::before{inset:0 0 auto 0;height:6px;background:var(--band);-webkit-mask:none;mask:none;border-radius:0;transform:none;z-index:0}
.ui-clean .packet::after{display:none}
.ui-clean .packet-art{margin-top:0;width:96px;height:96px;background:none;border:0;box-shadow:none;color:var(--band);filter:brightness(.8)}
.ui-clean .packet-art svg{width:64px;height:64px}
.ui-clean .packet.sel .packet-art{transform:scale(1.08)}
.ui-clean .packet-name{font-size:1.45rem}
.ui-clean .packet-sub{color:rgba(46,58,44,.55)}
.ui-clean .gmenu.shown .packet.sel{transform:translateY(-10px);filter:none;box-shadow:0 0 0 3px var(--band),0 18px 40px rgba(0,0,0,.45)}
.ui-clean .packet.sel .packet-name{text-decoration:none}
.ui-clean .gmenu-foot{text-align:center;color:var(--cl-soft)}

/* --- carnet : plus de feuille, le contenu flotte sur le fond flouté --- */
.ui-clean .gbook-sheet{background:none;box-shadow:none;border-radius:0;color:var(--cl-text);width:auto}
.ui-clean .gbook-head{background:none;color:var(--cl-text);padding:6px 4px 14px;border-bottom:1px solid var(--cl-line);border-radius:0}
.ui-clean .gbook-head::before{display:none}
.ui-clean .gbook-head::after{content:"";position:absolute;left:4px;bottom:-1px;width:140px;height:3px;border-radius:2px;background:var(--band)}
.ui-clean .gbook-titles{text-align:left;padding-left:8px}
.ui-clean .gbook-kicker{color:var(--band);filter:brightness(1.25);opacity:1}
.ui-clean .gbook-head h2{font-size:2.4rem}
.ui-clean .gbook-back,.ui-clean .gbook-x{background:var(--cl-card);color:#2e3a2c;border:0;box-shadow:0 4px 14px rgba(0,0,0,.3)}
.ui-clean .gbook-back:hover,.ui-clean .gbook-x:hover{background:#fff;box-shadow:0 0 0 2px var(--band),0 4px 14px rgba(0,0,0,.3)}
.ui-clean .gbook-x{order:3}
.ui-clean .gbook-body{padding:18px 4px 6px}
/* posé directement sur le fond : texte clair */
.ui-clean .gbook .bk-note,.ui-clean .gbook .bk-xp-sub,.ui-clean .gbook .bk-none{color:var(--cl-soft)}
.ui-clean .gbook .bk-cat,.ui-clean .gbook .bk-av-h{color:var(--band);filter:brightness(1.3)}
.ui-clean .gbook .bk-btn.soft{color:var(--cl-text);box-shadow:inset 0 0 0 1.5px rgba(244,236,216,.5)}
.ui-clean .gbook .bk-link{color:var(--cl-text)}
.ui-clean .bk-stem{background:rgba(244,236,216,.16)}
.ui-clean .bk-level{transform:none;filter:none;background:var(--cl-card);border-style:solid}
/* cartes et commandes : surfaces claires et nettes, texte foncé */
.ui-clean .bk-card,.ui-clean .bk-set,.ui-clean .bk-av-opts,.ui-clean .bk-page,.ui-clean .bk-price{color:#2e3a2c;background-color:var(--cl-card);box-shadow:0 8px 26px rgba(0,0,0,.28)}
.ui-clean .bk-card,.ui-clean .bk-set,.ui-clean .bk-av-opts{border-radius:14px}
.ui-clean .bk-card::after,.ui-clean .bk-set::after{display:none}
.ui-clean .bk-card .bk-note,.ui-clean .bk-set .bk-note,.ui-clean .bk-av-opts .bk-note,.ui-clean .bk-card .bk-none{color:rgba(46,58,44,.62)}
.ui-clean .bk-card .bk-cat,.ui-clean .bk-set .bk-cat,.ui-clean .bk-av-opts .bk-cat,.ui-clean .bk-av-opts .bk-av-h{filter:brightness(.8)}
.ui-clean .bk-card .bk-btn.soft,.ui-clean .bk-set .bk-btn.soft,.ui-clean .bk-av-opts .bk-btn.soft{color:#2e3a2c;box-shadow:inset 0 0 0 1.5px rgba(46,58,44,.35)}
.ui-clean .bk-card .bk-link{color:#2e3a2c}
.ui-clean .bk-tag,.ui-clean .bk-tag:nth-child(2n){transform:none;background:var(--cl-card);border-radius:999px;padding:7px 16px;box-shadow:none}
.ui-clean .bk-tag::before{display:none}
.ui-clean .bk-tag.on{background:var(--band);transform:none}
.ui-clean .bk-purse{background:var(--cl-card);border:0}
/* sections de l'inventaire */
.ui-clean .bk-sections{border-bottom:1px solid var(--cl-line)}
.ui-clean .bk-section{color:var(--cl-soft)}
.ui-clean .bk-section:hover{color:var(--cl-text);background:rgba(244,236,216,.08)}
.ui-clean .bk-section.on{color:var(--cl-text);background:none;box-shadow:none}
/* casier : les cases flottent, sans bois */
.ui-clean .bk-tray{background:none;box-shadow:none;padding:4px}
.ui-clean .bk-slot{background:rgba(244,236,216,.06);box-shadow:inset 0 0 0 1.5px rgba(244,236,216,.2);border-radius:12px}
.ui-clean .bk-slot.full{background:var(--cl-card);box-shadow:0 6px 18px rgba(0,0,0,.3);border-radius:12px}
.ui-clean .bk-slot.full:hover{transform:translateY(-3px)}
.ui-clean .bk-slot.sel{box-shadow:0 0 0 3px var(--band),0 8px 22px rgba(0,0,0,.35)}
.ui-clean .bk-slot img{border-radius:8px}
/* boutique : sans auvent ni ficelles */
.ui-clean .bk-awning{display:none}
.ui-clean .bk-stall{background:none;padding-top:6px}
.ui-clean .bk-price{clip-path:none;border-radius:14px;padding:12px 10px;transform:none;filter:none}
.ui-clean .bk-price::before,.ui-clean .bk-hole{display:none}
.ui-clean .bk-price:hover{transform:translateY(-3px)}
.ui-clean .bk-price.sel{background:#fff;box-shadow:0 0 0 3px var(--band),0 8px 22px rgba(0,0,0,.35)}
/* aide */
.ui-clean .bk-ch{color:var(--cl-soft)}
.ui-clean .bk-ch:hover{background:rgba(244,236,216,.08);color:var(--cl-text)}
.ui-clean .bk-ch.on{background:var(--cl-card);color:#2e3a2c}
.ui-clean .bk-page{background-image:none;border-radius:14px;padding:24px 28px}
/* personnalisation : le pseudo et les boutons sous l'aperçu */
.ui-clean .bk-av-art{border-radius:14px;border:0;box-shadow:0 8px 26px rgba(0,0,0,.3)}
.ui-clean .bk-field{background:var(--cl-card);border:0}
.ui-clean .bk-av-group{border-top-color:rgba(46,58,44,.14)}

/* ---------- palette du menu (design épuré) ----------
   Dark Spruce #2F4B26 · Sea Green #3E885B · Muted Teal #85BDA6 · Icy Blue #BEDCFE · Tea Green #C0D7BB */
body.ui-clean{--pal-spruce:#2F4B26;--pal-sea:#3E885B;--pal-teal:#85BDA6;--pal-ice:#BEDCFE;--pal-tea:#C0D7BB;
  --cl-card:var(--pal-tea);--cl-text:#eef6ec;--cl-soft:rgba(238,246,236,.72);--cl-line:rgba(190,220,254,.22);
  --cl-in:rgba(255,255,255,.42)} /* fond des champs et pastilles posés sur une carte */
.ui-clean .gmenu-veil,.ui-clean .gbook-veil{background:linear-gradient(160deg,rgba(47,75,38,.62),rgba(20,34,18,.72))}
.ui-clean .gbook,.ui-clean .gbook[data-theme]{--band:var(--pal-sea);--ink2:var(--pal-spruce);--soft:rgba(47,75,38,.7)}
/* menu général : chaque tuile garde sa couleur de la palette */
.ui-clean .packet{--ink2:var(--pal-spruce);color:var(--pal-spruce)}
.ui-clean .packet[data-act="bag"]{--band:var(--pal-sea)}
.ui-clean .packet[data-act="shop"]{--band:var(--pal-teal)}
.ui-clean .packet[data-act="help"]{--band:var(--pal-ice)}
.ui-clean .packet[data-act="settings"]{--band:var(--pal-teal)}
.ui-clean .packet[data-act="admin"]{--band:var(--pal-spruce)}
.ui-clean .packet[data-act="logout"]{--band:var(--pal-sea)}
.ui-clean .packet::before{height:8px}
.ui-clean .packet-art{color:var(--pal-sea);filter:none}
.ui-clean .packet-sub{color:rgba(47,75,38,.62)}
.ui-clean .gmenu.shown .packet.sel{background:#d3e5ce;box-shadow:0 0 0 3px var(--pal-ice),0 18px 40px rgba(0,0,0,.45)}
.ui-clean .packet.confirm{--band:#b8443c}
.ui-clean .gmenu-head h2{color:#f2f8f0}
.ui-clean .gmenu-foot kbd{background:var(--pal-tea);color:var(--pal-spruce);border-color:var(--pal-teal)}
/* carnet : en-tête */
.ui-clean .gbook-kicker{color:var(--pal-ice);filter:none}
.ui-clean .gbook-head::after{background:var(--pal-teal)}
.ui-clean .gbook-back,.ui-clean .gbook-x{color:var(--pal-spruce)}
.ui-clean .gbook-back:hover,.ui-clean .gbook-x:hover{background:#d3e5ce;box-shadow:0 0 0 2px var(--pal-ice),0 4px 14px rgba(0,0,0,.3)}
/* textes posés sur le fond */
.ui-clean .gbook .bk-cat,.ui-clean .gbook .bk-av-h{color:var(--pal-ice);filter:none}
.ui-clean .bk-section.on::after{background:var(--pal-teal)}
.ui-clean .bk-ch i{color:var(--pal-ice);filter:none}
.ui-clean .bk-stem{background:rgba(190,220,254,.16)}
/* cartes (Tea Green) et ce qu'elles contiennent */
.ui-clean .bk-card,.ui-clean .bk-set,.ui-clean .bk-av-opts,.ui-clean .bk-page,.ui-clean .bk-price,.ui-clean .bk-slot.full,.ui-clean .bk-level,
.ui-clean .bk-purse,.ui-clean .bk-tag,.ui-clean .bk-ch.on,.ui-clean .bk-field{background-color:var(--pal-tea);color:var(--pal-spruce)}
.ui-clean .bk-card .bk-cat,.ui-clean .bk-set .bk-cat,.ui-clean .bk-av-opts .bk-cat,.ui-clean .bk-av-opts .bk-av-h{color:var(--pal-sea);filter:none}
.ui-clean .bk-card .bk-note,.ui-clean .bk-set .bk-note,.ui-clean .bk-av-opts .bk-note,.ui-clean .bk-card p,.ui-clean .bk-purse,.ui-clean .bk-tag{color:rgba(47,75,38,.75)}
.ui-clean .bk-purse b{color:var(--pal-spruce)}
.ui-clean .bk-chip{background:var(--cl-in);border-color:rgba(47,75,38,.28);color:var(--pal-spruce)}
.ui-clean .bk-chip:hover{border-color:var(--pal-sea)}
.ui-clean .bk-chip.on,.ui-clean .bk-tag.on{background:var(--pal-sea);border-color:var(--pal-sea);color:#fff}
.ui-clean .bk-btn{background:var(--pal-sea);color:#fff}
.ui-clean .bk-key kbd{background:var(--cl-in);color:var(--pal-spruce);border-color:rgba(47,75,38,.3)}
.ui-clean .bk-slider .num-field input{background:var(--cl-in);border-color:rgba(47,75,38,.3)}
.ui-clean .bk-slider .num-field input:focus{background:#fff;outline-color:var(--pal-sea)}
.ui-clean .num-field i{color:rgba(47,75,38,.6)}
.ui-clean .bk-toggle input{background:rgba(47,75,38,.22)}
.ui-clean .bk-toggle input:checked{background:var(--pal-sea)}
.ui-clean .bk-sw{border-color:var(--pal-tea)}
.ui-clean .bk-av-group{border-top-color:rgba(47,75,38,.2)}
.ui-clean .bk-state{color:var(--pal-spruce);background:rgba(62,136,91,.2)}
.ui-clean .bk-stamp{color:var(--pal-sea);border-color:var(--pal-sea)}
.ui-clean .bk-slot.used::after{background:var(--pal-sea);border-color:var(--pal-tea)}
.ui-clean .bk-slot{background:rgba(190,220,254,.06);box-shadow:inset 0 0 0 1.5px rgba(190,220,254,.22)}
.ui-clean .bk-slot.sel,.ui-clean .bk-price.sel{background:#d3e5ce;box-shadow:0 0 0 3px var(--pal-ice),0 8px 22px rgba(0,0,0,.35)}
.ui-clean .bk-slot img,.ui-clean .bk-price img,.ui-clean .bk-card-art{background:var(--pal-spruce)}
.ui-clean .bk-card-art{border-color:var(--pal-tea)}
.ui-clean .bk-av-art{background:radial-gradient(ellipse at 50% 85%,#4a6e3d,var(--pal-spruce) 70%)}
.ui-clean .bk-field:focus{box-shadow:0 0 0 3px var(--pal-ice)}
.ui-clean .bk-sw:focus-visible,.ui-clean .bk-chip:focus-visible,.ui-clean .bk-section:focus-visible{outline-color:var(--pal-ice)}

/* compte déjà en jeu sur un autre appareil (main.js, sessionLock) */
.session-lock{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:16px;background:linear-gradient(160deg,rgba(47,75,38,.7),rgba(20,34,18,.82));backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.session-card{width:min(520px,100%);background:#C0D7BB;color:#2F4B26;border-radius:16px;padding:26px 26px 22px;box-shadow:0 18px 50px rgba(0,0,0,.45)}
.session-card h2{margin:0 0 10px;font-family:var(--f-display);font-weight:400;font-size:2rem;line-height:1.1}
.session-card p{margin:0 0 10px;line-height:1.5}
.session-card .session-sub{font-size:.9rem;color:rgba(47,75,38,.75)}
.session-acts{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.session-card .bk-btn{background:#3E885B;color:#fff}
.session-card .bk-btn.soft{background:transparent;color:#2F4B26;box-shadow:inset 0 0 0 1.5px rgba(47,75,38,.4)}
/* accessoires pas encore faits pour les persos : « bientôt » */
.bk-chip.soon{opacity:.55;cursor:not-allowed;border-style:dashed}
.bk-stamp.soon{color:#3E885B;border-color:#3E885B}

/* ===== v63 : menu principal, or, onglets, curseurs ===== */
/* menu principal : « SECRET GARDEN » en haut au centre, le nom du joueur, son niveau, son XP et son or */
.gmenu-brand{position:absolute;top:calc(env(safe-area-inset-top,0px) + 18px);left:0;right:0;margin:0;text-align:center;font-family:var(--f-display);font-weight:400;font-size:clamp(1.1rem,2.4vw,1.6rem);letter-spacing:.32em;text-transform:uppercase;color:#f2f8f0;opacity:0;transition:opacity .35s;pointer-events:none;z-index:1}
.gmenu.shown .gmenu-brand{opacity:.92}
.ui-clean .gmenu-head{text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px}
.gmenu-prog{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap}
.gmenu-prog .bk-xp{min-width:min(320px,60vw);text-align:left}
.gmenu-prog .bk-xp-lbl{color:var(--cl-text,#f4ecd8);font-family:var(--f-mono);font-size:.82rem}
.gmenu-prog .bk-xp-sub{color:var(--cl-soft,#cfd9c8);font-size:.78rem}
.packet-sub{display:none}
.packet.confirm .packet-sub{display:block}
.gmenu-foot{text-align:center}
.gmenu-ver{opacity:.7;margin:0}
/* l'or, partout : la pièce et le nombre */
.gold-pill{display:inline-flex;align-items:center;gap:7px;border-radius:999px;padding:6px 14px;background:var(--pal-tea,#C0D7BB);color:var(--pal-spruce,#2F4B26);line-height:1}
.gold-pill b{font-family:var(--f-mono);font-size:1.05rem;font-weight:700}
.gold-pill.short{padding:2px 9px;vertical-align:middle}
.gold-pill.short b{font-size:.92rem;color:#b8443c}
.gold-pill.gold-big{font-size:1.05rem}
.bk-short .gold-pill,.small .gold-pill{margin-left:2px}
.gbook-gold{display:flex;align-items:center;order:2;margin-left:auto}
.gbook-gold:empty{display:none}
.ui-clean .gbook-gold .gold-pill{box-shadow:0 4px 14px rgba(0,0,0,.3)}
.gbook-kicker[hidden]{display:none}
/* onglets : de vrais onglets posés sur une ligne, plus des bulles */
.ui-clean .bk-tags{gap:2px;flex-wrap:nowrap;overflow-x:auto;border-bottom:2px solid var(--pal-teal,#85BDA6);padding:0 6px;scrollbar-width:none}
.ui-clean .bk-tag,.ui-clean .bk-tag:nth-child(2n){position:relative;flex:none;transform:none;border-radius:10px 10px 0 0;padding:9px 20px 8px;margin-bottom:-2px;background:rgba(192,215,187,.18);color:rgba(242,248,240,.78);border:2px solid transparent;border-bottom:0;box-shadow:none;font-weight:600;transition:background .15s,color .15s}
.ui-clean .bk-tag:hover{background:rgba(192,215,187,.32);color:#fff}
.ui-clean .bk-tag.on,.ui-clean .bk-tag.on:nth-child(2n){background:var(--pal-tea,#C0D7BB);color:var(--pal-spruce,#2F4B26);border-color:var(--pal-teal,#85BDA6);transform:none}
.ui-clean .bk-tag.on::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--pal-tea,#C0D7BB)}
.ui-clean .bk-tag i{opacity:.65}
/* dans une carte claire (personnalisation) */
.ui-clean .bk-av-opts .bk-tags{border-bottom-color:rgba(47,75,38,.25);padding:0}
.ui-clean .bk-av-opts .bk-tag{background:rgba(47,75,38,.07);color:rgba(47,75,38,.75)}
.ui-clean .bk-av-opts .bk-tag:hover{background:rgba(47,75,38,.13);color:var(--pal-spruce,#2F4B26)}
.ui-clean .bk-av-opts .bk-tag.on{background:var(--pal-sea,#3E885B);color:#fff;border-color:var(--pal-sea,#3E885B)}
.ui-clean .bk-av-opts .bk-tag.on::after{background:var(--pal-sea,#3E885B)}
/* curseurs : rail arrondi rempli jusqu'au bouton, bouton rond */
.bk-range{-webkit-appearance:none;appearance:none;height:22px;background:transparent;cursor:pointer;margin:0;--pct:50%;--fill:var(--pal-sea,#3E885B);--rail:rgba(47,75,38,.18)}
.bk-range:focus{outline:none}
.bk-range::-webkit-slider-runnable-track{height:8px;border-radius:999px;background:linear-gradient(to right,var(--fill) 0 var(--pct),var(--rail) var(--pct) 100%)}
.bk-range::-moz-range-track{height:8px;border-radius:999px;background:var(--rail)}
.bk-range::-moz-range-progress{height:8px;border-radius:999px;background:var(--fill)}
.bk-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;margin-top:-6px;border-radius:50%;background:#fff;border:3px solid var(--fill);box-shadow:0 2px 6px rgba(0,0,0,.25);transition:transform .12s}
.bk-range::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:#fff;border:3px solid var(--fill);box-shadow:0 2px 6px rgba(0,0,0,.25)}
.bk-range:hover::-webkit-slider-thumb,.bk-range:active::-webkit-slider-thumb{transform:scale(1.15)}
.bk-range:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px rgba(190,220,254,.8),0 2px 6px rgba(0,0,0,.25)}
.bk-range:focus-visible::-moz-range-thumb{box-shadow:0 0 0 4px rgba(190,220,254,.8)}
/* curseur « taille » d'un admin : la partie au-delà de la plage normale est dorée (voir wideFill, ui/avatar.js) */
.bk-range-wide{--nfill:var(--pal-sea,#3E885B);--wide:#C98A2B;--wide-rail:rgba(201,138,43,.4)}
.bk-range-wide.out{--fill:var(--wide)}
.bk-range-wide::-webkit-slider-runnable-track{background:var(--track)}
.bk-range-wide::-moz-range-track{background:var(--track)}
.bk-range-wide::-moz-range-progress{background:transparent}
/* console admin : « Tout sélectionner » au-dessus des autres */
.bk-toggle.all{padding-bottom:10px;margin-bottom:10px;border-bottom:1px solid rgba(47,75,38,.2)}
/* aide : chapitres sans chiffres romains */
.bk-ch i{display:none}
/* Paramètres : le nom du réglage au-dessus de son curseur (plus de libellés coupés en trois lignes) */
.bk-set .bk-slider{grid-template-columns:minmax(0,1fr) 92px;row-gap:4px;margin-bottom:14px}
.bk-set .bk-slider > span{grid-column:1 / -1}
/* téléphone : les sachets du menu sur deux colonnes (plus de noms coupés) */
@media (max-width:700px){
  .ui-clean .gmenu-packets{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .ui-clean .packet{height:150px}
  .ui-clean .packet:last-child:nth-child(odd){grid-column:1 / -1}
  .ui-clean .packet-art{width:64px;height:64px}
  .ui-clean .packet-art svg{width:46px;height:46px}
  .ui-clean .packet-name{font-size:1.15rem;margin-top:8px}
  .gmenu-brand{font-size:1rem}
  .gmenu{padding-top:60px}
}
/* barre d'XP : remplie d'un vert clair uni (plus de motif de feuilles), deux fois plus longue dans le menu */
.ui-clean .bk-stem span{background:#a9d58a;box-shadow:inset 0 -2px 0 rgba(47,75,38,.18)}
.gmenu-prog .bk-xp{min-width:min(640px,72vw)}
/* ---------- Console admin : réglages des mouvements ---------- */
.bk-reglages{grid-column:1 / -1}
.bk-reglages .bk-slider.bk-rg{grid-template-columns:minmax(0,1fr) auto;gap:2px 14px;margin:0 0 10px}
.bk-reglages .bk-rg > span{grid-column:1 / -1;display:flex;align-items:center;gap:8px;font-weight:600}
.bk-rg-val{display:flex;align-items:center;gap:6px}
.bk-rg-unit{font-style:normal;font-size:.76rem;color:var(--soft);width:7ch}
.bk-rg-back{border:0;background:none;color:var(--soft);font-size:1rem;cursor:pointer;padding:0 4px}
.bk-rg-back:hover{color:var(--band)}
.bk-rg-dot{flex:none;width:9px;height:9px;border-radius:50%;box-shadow:inset 0 0 0 1.5px rgba(46,58,44,.3)}
.bk-rg-dot.enr{background:#5f7f96;box-shadow:none}
.bk-rg-dot.essai{background:#d98a2b;box-shadow:none}
.bk-rg-leg{display:flex;flex-wrap:wrap;gap:16px;font-size:.78rem;color:var(--soft);margin:-4px 0 12px}
.bk-rg-leg span{display:flex;align-items:center;gap:6px}
.bk-rg-list{columns:2 520px;column-gap:34px}
.bk-rg-list .bk-rg{break-inside:avoid}
.bk-rg-count{margin-top:8px}