:root{--ink:#3a2614;--parch:#f8ecd0;--parch2:#efdcb4;--wood:#6e4220;--woodD:#3f2510;--woodL:#9a6434;--gold:#ffd35c;--leaf:#4a8f2f;--sky:#7cc4f5}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:#162314;font-family:'Fredoka',system-ui,'Segoe UI',sans-serif;color:var(--ink);overflow:hidden;-webkit-user-select:none;user-select:none}
#game{position:relative;width:100%;height:100%;min-height:460px;overflow:hidden}
#cv{position:absolute;inset:0;display:block;touch-action:none;cursor:pointer}
.hidden{display:none!important}
button{font-family:inherit}
button:focus-visible{outline:3px solid #ffd35c;outline-offset:2px}

/* ---------- HUD ---------- */
#hud{position:absolute;top:10px;left:10px;display:flex;gap:8px;align-items:flex-start;pointer-events:none;flex-wrap:wrap;max-width:calc(100% - 250px)}
.lvl{width:52px;height:52px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffe7a0,#e7a326 60%,#94560b);border:3px solid var(--woodD);display:grid;place-items:center;font-weight:700;font-size:20px;color:#3a2006;box-shadow:0 3px 0 #2a1808,0 6px 14px rgba(0,0,0,.35);flex:none;cursor:pointer}
.bars{display:flex;flex-direction:column;gap:3px;width:min(230px,36vw)}
.bar{position:relative;height:16px;border-radius:9px;background:rgba(30,18,8,.8);border:2px solid var(--woodD);overflow:hidden}
.bar>div{position:absolute;left:0;top:0;bottom:0;width:0;transition:width .25s}
.hp>div{background:linear-gradient(#fb7185,#be123c)}
.xp>div{background:linear-gradient(#7dd3fc,#1d6fd6)}
.st>div{background:linear-gradient(#fde68a,#d97706)}
.bar span{position:relative;display:block;text-align:center;font-size:10.5px;line-height:12px;font-weight:600;color:#fff;text-shadow:0 1px 1px #000}
.pills{display:flex;gap:6px;flex-wrap:wrap}
.pill{background:rgba(43,26,12,.86);color:#fbe7b3;border:2px solid #6b4220;border-radius:20px;padding:3px 11px;font-weight:600;font-size:13.5px;box-shadow:0 3px 8px rgba(0,0,0,.3);white-space:nowrap}
.pill b{color:var(--gold)}
.pill.full{border-color:#ef4444;color:#fecaca}
#toolInfo{position:absolute;top:72px;left:10px;font-size:12px;pointer-events:none}
#right{position:absolute;top:10px;right:10px;display:flex;flex-direction:column;align-items:flex-end;gap:6px;width:220px}
#zone{max-width:220px;overflow:hidden;text-overflow:ellipsis}
#miniWrap{position:relative;width:220px;height:124px;border-radius:14px;overflow:hidden;border:3px solid #6b4220;background:#1d3346;box-shadow:0 4px 12px rgba(0,0,0,.4);cursor:pointer}
#mini{display:block;width:100%;height:100%}
#miniWrap span{position:absolute;right:6px;bottom:5px;background:rgba(43,26,12,.86);color:#fbe7b3;border-radius:8px;padding:1px 7px;font-size:11px;font-weight:600;pointer-events:none}
#tracker{width:220px;background:rgba(43,26,12,.82);border:2px solid #6b4220;border-radius:12px;padding:7px 10px;color:#fbe7b3;font-size:12.5px;line-height:1.3;cursor:pointer}
#tracker h4{font-size:13px;color:var(--gold);font-weight:600;margin-bottom:3px}
#tracker .o{display:flex;gap:6px;justify-content:space-between}
#tracker .o.done{color:#9be07f;text-decoration:line-through;opacity:.8}
#tracker .ready{color:#9be07f;font-weight:600}
#zoomBox{position:absolute;right:10px;bottom:90px;display:flex;flex-direction:column;gap:6px}
.round{width:40px;height:40px;border-radius:50%;border:2px solid var(--woodD);background:#f3dfb0;font-size:19px;font-weight:700;color:#4a2c12;cursor:pointer;box-shadow:0 3px 0 var(--woodD);display:grid;place-items:center}
.round.on{background:#ffd35c}

#bar{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);display:flex;gap:5px;background:linear-gradient(#8a5a2e,#5e3a1a);padding:6px;border-radius:16px;border:3px solid #3a2410;box-shadow:0 6px 18px rgba(0,0,0,.45)}
#bar button{position:relative;width:62px;height:58px;border-radius:11px;border:2px solid #3a2410;background:linear-gradient(#fbecc8,#e2c48c);font-size:22px;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1;box-shadow:inset 0 -3px 0 rgba(90,50,20,.25)}
#bar button:hover{background:linear-gradient(#fff4d8,#ecd29e)}
#bar button span{font-size:10.5px;font-weight:600;color:#4a2c12;margin-top:4px}
#bar button kbd{position:absolute;top:2px;right:4px;font:600 9px 'Fredoka',sans-serif;color:#8a6a44}
#bar button.notif::after{content:'!';position:absolute;top:-6px;right:-5px;width:18px;height:18px;border-radius:50%;background:#ef4444;color:#fff;font-size:12px;font-weight:700;display:grid;place-items:center;border:2px solid #3a2410}
#exitBtn{position:absolute;top:78px;left:50%;transform:translateX(-50%);border:3px solid #3a2410;border-radius:14px;padding:6px 16px;background:linear-gradient(#f5c451,#d18d17);font-weight:700;font-size:15px;color:#3a2006;cursor:pointer;box-shadow:0 4px 0 #6b4220}
#modeBar{position:absolute;bottom:90px;left:50%;transform:translateX(-50%);display:flex;gap:10px;align-items:center;background:rgba(43,26,12,.92);color:#fbe7b3;border:2px solid #d9a441;border-radius:14px;padding:7px 8px 7px 14px;font-weight:500;font-size:14px;max-width:94vw}
#modeBar button{border:2px solid #7f1d1d;background:#ef4444;color:#fff;border-radius:9px;padding:3px 10px;font-weight:700;cursor:pointer}

/* ---------- Panneaux ---------- */
#panel{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:min(620px,95vw);max-height:min(680px,88%);display:flex;flex-direction:column;background:var(--parch);border:4px solid #4f2f14;border-radius:18px;box-shadow:inset 0 0 0 3px #d6b077,0 22px 60px rgba(0,0,0,.55);z-index:5}
.ph{background:linear-gradient(#a56c38,#6e4220);padding:10px 12px 10px 16px;display:flex;align-items:center;gap:10px;border-radius:12px 12px 0 0;border-bottom:3px solid #4f2f14}
.ph h2{color:#fdebbd;font-size:21px;font-weight:700;flex:1;text-shadow:0 2px 0 #3a2410}
.x{width:34px;height:34px;border-radius:10px;border:2px solid #3a2410;background:#f3dfb0;font-size:17px;font-weight:700;cursor:pointer;color:#4a2c12;flex:none}
#pbody{overflow:auto;padding:14px 14px 6px;font-size:15px;line-height:1.38}
#pbody p{margin-bottom:8px}
.say{background:#fff5d6;border-left:4px solid #d9a441;border-radius:8px;padding:6px 10px;margin-bottom:10px;font-style:italic}
.card{background:#fffaf0;border:2px solid #dcc08c;border-radius:12px;padding:10px 12px;margin-bottom:10px}
.card h3{font-size:16px;font-weight:700;margin-bottom:2px}
.card.hl{border-color:#d9a441;background:#fff5d6}
.card.lock{opacity:.6}
.muted{color:#7a5a3a;font-size:13.5px}
.row{display:flex;align-items:center;gap:10px}
.row .grow{flex:1;min-width:0}
.wrap{flex-wrap:wrap}
.btn{font-weight:700;border:2px solid #2f5d1f;background:linear-gradient(#86d163,#4a8f2f);color:#fff;border-radius:10px;padding:6px 12px;cursor:pointer;text-shadow:0 1px 0 rgba(0,0,0,.3);box-shadow:0 3px 0 #2f5d1f;font-size:14.5px;white-space:nowrap}
.btn:active{transform:translateY(2px);box-shadow:0 1px 0 #2f5d1f}
.btn:disabled{filter:grayscale(1);opacity:.5;cursor:not-allowed}
.btn.alt{background:linear-gradient(#f7ce5b,#d18d17);border-color:#8a5a0d;box-shadow:0 3px 0 #8a5a0d;color:#3a2006;text-shadow:none}
.btn.blue{background:linear-gradient(#7cc4f5,#2f7fc4);border-color:#1f4f7c;box-shadow:0 3px 0 #1f4f7c}
.btn.red{background:linear-gradient(#f59090,#c83b3b);border-color:#7f1d1d;box-shadow:0 3px 0 #7f1d1d}
.btn.sm{padding:3px 9px;font-size:13px}
.tabs{display:flex;gap:6px;margin-bottom:12px;flex-wrap:wrap}
.tabs button{border:2px solid #b08850;background:#f1dcae;border-radius:10px;padding:5px 12px;font-weight:600;font-size:14px;cursor:pointer;color:#5a3a1c}
.tabs button.on{background:#6e4220;color:#fdebbd;border-color:#4f2f14}
.req{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 6px}
.req span{background:#f3e5c4;border-radius:8px;padding:1px 8px;font-size:13px;font-weight:600}
.ok{color:#2f6b1f}.no{color:#b42318}
.market-chip{display:inline-flex;align-items:center;gap:4px;padding:4px 9px;border-radius:999px;font-weight:700;font-size:13px;border:1px solid transparent}.market-chip.up{color:#285e27;background:#e8f4d9;border-color:#b9d59a}.market-chip.down{color:#9b3f25;background:#fae6d8;border-color:#e6b99c}
#panel.wide{width:min(1060px,97vw);max-height:min(760px,94%)}.inv{display:flex;gap:14px;align-items:flex-start}.invL{flex:0 0 380px}.invR{flex:1;min-width:0}.doll{display:flex;gap:6px;align-items:center;background:radial-gradient(ellipse at 50% 60%,#fff6dc,#ead7ab);border:2px solid #dcc08c;border-radius:14px;padding:8px}.scol{display:flex;flex-direction:column;gap:6px}.dollc{position:relative;flex:1;display:flex;justify-content:center}.dollc canvas{width:190px;height:240px}.turn{position:absolute;bottom:0;left:50%;transform:translateX(-50%);border:2px solid #b08850;background:#f1dcae;border-radius:9px;font:600 12px Fredoka,system-ui,sans-serif;padding:2px 8px;cursor:pointer;color:#5a3a1c}.eslot{position:relative;width:58px;height:58px;border-radius:12px;border:2px dashed #b99a64;background:rgba(255,250,240,.7);display:grid;place-items:center;touch-action:none;cursor:pointer}.eslot.full{border-style:solid;border-color:#9a6434;background:#fffaf0}.eslot span{font-size:22px;opacity:.45}.eslot img,.cell img{width:48px;height:48px;pointer-events:none}.eslot i{position:absolute;bottom:-1px;left:0;right:0;text-align:center;font:600 9px Fredoka,system-ui,sans-serif;color:#7a5a30;font-style:normal}.eslot.sel,.cell.sel{border-color:#e8a33a;box-shadow:0 0 0 3px rgba(255,200,80,.6)}.dropok{box-shadow:0 0 0 3px #4a8f2f!important;background:#e7f7d8!important}.grid{display:grid;grid-template-columns:repeat(8,1fr);gap:5px;padding:6px;border-radius:12px;background:#e9d6ac;border:2px solid #cdb07a}.cell{position:relative;aspect-ratio:1;border-radius:9px;background:#f8ecd0;border:2px solid #d8bd8a;display:grid;place-items:center;touch-action:none;cursor:pointer}.cell.empty{background:#efe0bd;border-color:#dcc49a;cursor:default}.cell b{position:absolute;right:3px;bottom:1px;font-size:12px;color:#3a2006;text-shadow:0 0 3px #fff,0 0 3px #fff}.cell.dr{cursor:grab}.ghost{position:fixed;width:56px;height:56px;transform:translate(-50%,-50%);pointer-events:none;z-index:50;filter:drop-shadow(0 6px 8px rgba(0,0,0,.4))}.idet{display:flex;gap:10px;align-items:center;margin-top:10px;background:#fffaf0;border:2px solid #dcc08c;border-radius:12px;padding:8px 10px;min-height:70px}.idet img{width:56px;height:56px}.idet .col{display:flex;flex-direction:column;gap:6px}.stats2{display:grid;grid-template-columns:1fr 1fr;gap:3px 12px;margin-top:10px;background:#fffaf0;border:2px solid #dcc08c;border-radius:12px;padding:8px 10px;font-size:13.5px}.stats2 div{display:flex;justify-content:space-between;gap:6px}.capb{display:flex;align-items:center;gap:8px;margin-bottom:8px;font-size:14px}.capb .prog{flex:1;margin:0}.prog.full div{background:#ef4444!important}img.gi{width:52px;height:52px;margin-right:8px;flex:none}@media(max-width:760px){.inv{flex-direction:column}.invL{flex:none;width:100%}.grid{grid-template-columns:repeat(6,1fr)}}
#toolInfo .dur{display:inline-block;width:46px;height:7px;border-radius:4px;background:rgba(0,0,0,.45);border:1px solid #2a170a;vertical-align:1px;overflow:hidden;margin-left:4px}#toolInfo .dur i{display:block;height:100%;background:linear-gradient(#9ae06c,#4a8f2f)}#toolInfo .dur.low i{background:linear-gradient(#fbbf24,#d97706)}#toolInfo .dur.broken{background:#7f1d1d}.ric{font-size:30px;width:48px;text-align:center;flex:none}
canvas.pv{flex:none;width:78px;height:85px;margin-right:10px;border-radius:10px;background:radial-gradient(circle at 50% 70%,#fff6dc,#ead7ab)}canvas.pv.big{width:120px;height:134px}.picks{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:6px}.picks .pk{display:flex;flex-direction:column;align-items:center;gap:2px;padding:4px;border-radius:10px;border:2px solid transparent;background:#fff6dc;cursor:pointer;font:600 11px Fredoka,system-ui,sans-serif;color:#3a2006}.picks .pk canvas.pv{margin:0;width:46px;height:52px;background:none}.picks .pk.on{border-color:#e8a33a;background:#ffe9b0}.picks .pk:disabled{opacity:.4;cursor:default}.card.lock{opacity:.6}
i.gem{display:inline-block;width:11px;height:11px;background:linear-gradient(135deg,var(--c),var(--d));transform:rotate(45deg);border-radius:2px;border:1px solid rgba(0,0,0,.4);margin:0 5px 0 2px;vertical-align:0}
i.gem.c-nature{transform:none;border-radius:40% 40% 20% 20%}i.gem.c-pierre{transform:none;border-radius:50% 45% 40% 50%}i.gem.c-metal{transform:none;border-radius:3px;height:9px;width:12px;box-shadow:inset 0 2px 0 rgba(255,255,255,.45)}i.gem.c-precieux{transform:none;border-radius:50%;box-shadow:inset -2px -2px 0 rgba(0,0,0,.25),inset 2px 2px 0 rgba(255,255,255,.5)}i.gem.c-cristal{transform:none;border-radius:0;width:8px;height:13px;clip-path:polygon(50% 0,100% 25%,100% 100%,0 100%,0 25%)}i.gem.c-gemme{box-shadow:inset 2px 2px 0 rgba(255,255,255,.55)}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:3px 14px;font-size:14px}
.swatches{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.sw{display:flex;align-items:center;gap:5px;border:2px solid #dcc08c;border-radius:10px;padding:3px 8px;font-size:13px;background:#fff;cursor:pointer;color:var(--ink)}
.sw.on{border-color:#4a8f2f;background:#eaf7e2}
.sw:disabled{opacity:.45;cursor:default}
.dot{width:12px;height:12px;border-radius:50%;border:1px solid rgba(0,0,0,.4)}
.prog{height:8px;background:#e7d3a9;border-radius:6px;overflow:hidden;margin-top:5px}
.prog>div{height:100%;background:linear-gradient(90deg,#86d163,#4a8f2f)}
.prog.fuel>div{background:linear-gradient(90deg,#fbbf24,#d97706)}
.obj{display:flex;gap:8px;align-items:center;font-size:14px;margin:2px 0}
.obj .c{width:16px;height:16px;border-radius:5px;border:2px solid #b08850;display:grid;place-items:center;font-size:11px;flex:none}
.obj.done .c{background:#4a8f2f;border-color:#2f5d1f;color:#fff}
.obj.done{color:#5d7a4d}
.rew{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.rew span{background:#e9f5dc;color:#2f5d1f;border-radius:8px;padding:1px 8px;font-size:13px;font-weight:600}
input[type=range]{width:100%;accent-color:#4a8f2f}
.opt{display:grid;grid-template-columns:130px 1fr 40px;gap:10px;align-items:center;margin:6px 0}
.mstats{display:grid;grid-template-columns:repeat(4,1fr);gap:4px 10px;font-size:13.5px;margin-top:4px}
.mstats b{display:block;font-size:15px}

/* ---------- Carte du monde ---------- */
#wmap{position:absolute;inset:0;z-index:7;display:grid;place-items:center;background:rgba(10,14,8,.62)}
.wbox{position:relative;width:min(1180px,96vw);height:min(760px,92%);display:flex;flex-direction:column;background:var(--parch);border:4px solid #4f2f14;border-radius:18px;box-shadow:inset 0 0 0 3px #d6b077,0 22px 60px rgba(0,0,0,.6)}
.wbody{flex:1;display:flex;min-height:0;gap:10px;padding:10px}
#wcvWrap{position:relative;flex:1;min-width:0;border-radius:12px;overflow:hidden;border:3px solid #b08850;background:#d9c49a}
#wcv{position:absolute;inset:0;width:100%;height:100%;cursor:crosshair;touch-action:none}
.wside{width:230px;display:flex;flex-direction:column;gap:8px;overflow:auto;font-size:13.5px}
.wside h3{font-size:15px}
.mk{display:flex;gap:6px;flex-wrap:wrap}
.mk button{border:2px solid #b08850;background:#fff;border-radius:10px;padding:4px 7px;font-size:16px;cursor:pointer}
.mk button.on{border-color:#4a8f2f;background:#eaf7e2;box-shadow:0 0 0 2px #86d163}
.mlist{display:flex;flex-direction:column;gap:4px}
.mlist div{display:flex;align-items:center;gap:6px;background:#fffaf0;border:1px solid #dcc08c;border-radius:8px;padding:3px 6px}
.mlist div span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mlist button{border:0;background:none;cursor:pointer;font-size:14px}
.legend{display:grid;grid-template-columns:1fr 1fr;gap:2px 8px;font-size:12.5px}
#wtip{position:absolute;pointer-events:none;background:rgba(43,26,12,.92);color:#fbe7b3;border-radius:8px;padding:3px 8px;font-size:12.5px;font-weight:500;white-space:nowrap}
#wpop{position:absolute;background:var(--parch);border:3px solid #6e4220;border-radius:12px;padding:8px;box-shadow:0 8px 20px rgba(0,0,0,.4);display:flex;flex-direction:column;gap:6px;min-width:190px}
#wpop input{font:inherit;border:2px solid #b08850;border-radius:8px;padding:3px 7px;width:100%}

#toasts{position:absolute;top:122px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;gap:6px;align-items:center;pointer-events:none;z-index:8;width:max-content;max-width:92vw}
.toast{background:rgba(43,26,12,.93);color:#fbe7b3;border:2px solid #d9a441;border-radius:12px;padding:5px 14px;font-weight:600;font-size:14px;animation:tin .25s ease-out;text-align:center}
.toast.bad{border-color:#ef4444;color:#fecaca}
.toast.good{border-color:#86d163;color:#dcfce7}
.toast.quest{border-color:#c084fc;color:#f3e8ff;background:rgba(46,20,60,.94)}
@keyframes tin{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
#tip{position:absolute;pointer-events:none;background:rgba(43,26,12,.93);color:#fbe7b3;border:2px solid #9a6434;border-radius:10px;padding:4px 10px;font-size:13px;font-weight:500;max-width:270px;z-index:4;line-height:1.3}
#tip b{color:#ffd35c;font-weight:600}
#zbanner{position:absolute;top:22%;left:50%;transform:translateX(-50%);pointer-events:none;text-align:center;color:#fff3cf;font-weight:700;font-size:34px;text-shadow:0 3px 0 #3a2006,0 6px 22px rgba(0,0,0,.7);opacity:0;transition:opacity .8s;white-space:nowrap}
#zbanner small{display:block;font-size:15px;font-weight:500;color:#e8f5d0;margin-top:2px}
#zbanner.on{opacity:1}

#overlay{position:absolute;inset:0;display:grid;place-items:center;background:radial-gradient(ellipse at center,rgba(20,30,15,.3),rgba(10,16,8,.84));z-index:10;padding:16px}
.intro{text-align:center;max-width:500px}
.logo{font-size:clamp(42px,8vw,76px);font-weight:700;line-height:.95;color:#ffe08a;text-shadow:0 4px 0 #8a4b12,0 8px 0 #3a2006,0 14px 30px rgba(0,0,0,.6);letter-spacing:.5px}
.logo small{display:block;font-size:.4em;color:#bfe8a0;text-shadow:0 3px 0 #1f4a14,0 8px 20px rgba(0,0,0,.6);margin-top:10px}
.intro p{color:#f3e4c0;margin:18px 0 22px;font-size:16px;line-height:1.45;text-shadow:0 1px 2px #000}
.intro .btn{font-size:19px;padding:10px 26px;margin:4px}
#loading{color:#f3e4c0;margin-top:12px;font-size:14px}

@media (max-width:760px){
 #bar{width:calc(100% - 12px);box-sizing:border-box;justify-content:center;gap:2px;padding:4px}
 #bar button{width:calc((100% - 16px)/9);max-width:44px;height:48px;font-size:18px}
 #bar button span,#bar button kbd{display:none}
 #right{width:150px}#miniWrap{width:150px;height:86px}#tracker{display:none}
 .pill{font-size:12px;padding:2px 8px}
 .lvl{width:42px;height:42px;font-size:16px}
 #hud{max-width:calc(100% - 170px)}

}
@media (prefers-reduced-motion:reduce){.toast{animation:none}.bar>div{transition:none}#zbanner{transition:none}}

/* ---------- Habillage médiéval : bois, cuir, parchemin, métal discret ---------- */
:root{--leather:#5a3418;--leatherD:#3a2010;--brass:#c9a24a;--brassD:#8a6a24;--cream:#f7ecd2}
.pill{background:linear-gradient(#6a4020,#43270f);border:2px solid #2a170a;box-shadow:inset 0 1px 0 rgba(255,220,160,.25),inset 0 0 0 1px rgba(201,162,74,.35),0 3px 8px rgba(0,0,0,.35);color:#f6e2b0}
.lvl{border-color:#2a170a;box-shadow:0 0 0 2px var(--brass),0 3px 0 #2a1808,0 6px 14px rgba(0,0,0,.35)}
.bar{border-color:#2a170a;box-shadow:inset 0 1px 3px rgba(0,0,0,.5),0 0 0 1px rgba(201,162,74,.35)}
#bar{background:linear-gradient(180deg,#7a4a24 0%,#5e3818 45%,#4a2a12 100%);border:3px solid #2a170a;box-shadow:inset 0 0 0 1px rgba(255,210,140,.25),inset 0 2px 0 rgba(255,220,160,.2),0 0 0 2px var(--brassD),0 8px 22px rgba(0,0,0,.5);background-image:repeating-linear-gradient(90deg,rgba(0,0,0,.06) 0 2px,transparent 2px 9px),linear-gradient(180deg,#7a4a24,#4a2a12)}
#bar button{background:linear-gradient(#fbf0d6,#e6cc98);border:2px solid #2a170a;box-shadow:inset 0 -3px 0 rgba(120,80,30,.25),0 2px 0 #2a170a}
#bar button:hover{background:linear-gradient(#fff6e0,#f0d8a6);transform:translateY(-1px)}
#panel,.wbox{border:4px solid #2a170a;border-radius:16px;background:var(--cream);background-image:radial-gradient(ellipse at 50% 0%,rgba(255,255,255,.55),rgba(255,255,255,0) 60%),repeating-linear-gradient(0deg,rgba(120,80,30,.025) 0 2px,transparent 2px 5px);box-shadow:inset 0 0 0 2px var(--brass),inset 0 0 40px rgba(150,100,40,.18),0 22px 60px rgba(0,0,0,.6)}
.ph{background:linear-gradient(#6e4020,#44260f);border-bottom:3px solid #2a170a;position:relative;box-shadow:inset 0 -2px 0 rgba(201,162,74,.5)}
.ph::after{content:'';position:absolute;left:10px;right:10px;bottom:5px;border-bottom:1.5px dashed rgba(240,210,150,.45)}
.ph h2,#zbanner{font-family:'Cinzel',Georgia,'Times New Roman',serif;letter-spacing:.5px}
.ph h2{color:#f6e2b0;text-shadow:0 2px 0 rgba(0,0,0,.5)}
.x{background:linear-gradient(#f6e2b0,#d9b87a);border-color:#2a170a;box-shadow:0 2px 0 #2a170a}
.card{background:#fffaf0;border:2px solid #d7bb86;box-shadow:inset 0 0 0 1px rgba(255,255,255,.6),0 1px 0 rgba(120,80,30,.15)}
.card.hl{border-color:var(--brass);box-shadow:inset 0 0 0 1px rgba(255,236,180,.8),0 0 0 2px rgba(201,162,74,.25)}
.tabs button{background:linear-gradient(#f6e6c0,#e6cc98);border-color:#8a6a3a}
.tabs button.on{background:linear-gradient(#6e4020,#44260f);border-color:#2a170a;color:#f6e2b0;box-shadow:inset 0 0 0 1px rgba(201,162,74,.5)}
.btn{background:linear-gradient(#7cc15a,#3f7d28);border-color:#244a15}
.btn.alt{background:linear-gradient(#e7b64a,#b57a1c);border-color:#6a4410;box-shadow:0 3px 0 #6a4410}
.toast{background:linear-gradient(#5e3818,#3a2010);border:2px solid var(--brass);box-shadow:0 4px 12px rgba(0,0,0,.4)}
#tracker{background:linear-gradient(rgba(74,42,18,.94),rgba(50,28,12,.94));border:2px solid #2a170a;box-shadow:inset 0 0 0 1px rgba(201,162,74,.45),0 4px 12px rgba(0,0,0,.35)}
#miniWrap{box-shadow:0 0 0 2px var(--brassD),0 4px 12px rgba(0,0,0,.35)}
.round{background:linear-gradient(#fbf0d6,#e2c48c);border-color:#2a170a;box-shadow:0 3px 0 #2a170a,0 0 0 1px rgba(201,162,74,.4)}
#modeBar{box-shadow:inset 0 0 0 1px rgba(201,162,74,.5),0 6px 16px rgba(0,0,0,.4)}
.journal-fab{position:absolute;right:14px;bottom:12px;z-index:3;display:flex;align-items:center;gap:8px;padding:8px 13px;border:3px solid #281508;border-radius:13px;background:linear-gradient(145deg,#81502c,#4a2c17);color:#f8e2ad;font:700 14px Cinzel,Georgia,serif;box-shadow:inset 0 0 0 1px #c49b57,0 5px 12px rgba(0,0,0,.45);cursor:pointer}.journal-fab:hover{background:linear-gradient(145deg,#96623a,#59351d);transform:translateY(-1px)}.journal-fab .book{font-size:23px;filter:drop-shadow(0 1px #2c1708)}.journal-fab kbd{font:600 10px Fredoka,system-ui,sans-serif;color:#e0bc75;background:#382111;border-radius:4px;padding:2px 4px}.journal-fab.notif:after{content:'!';position:absolute;right:-6px;top:-7px;width:19px;height:19px;border-radius:50%;background:#d43c2e;color:#fff;display:grid;place-items:center;border:2px solid #281508;font:700 12px Fredoka,sans-serif}
#panel.journal{width:min(790px,96vw);max-height:min(760px,92%);background:#f3e2bb;border-color:#442813;box-shadow:inset 0 0 0 3px #c59a5d,0 22px 60px rgba(0,0,0,.62)}#panel.journal .ph{background:linear-gradient(#6d3c20,#422512);border-bottom-color:#2c180b}#panel.journal .ph h2{font-family:Cinzel,Georgia,serif;font-size:22px;letter-spacing:.2px}#panel.journal #pbody{background:repeating-linear-gradient(0deg,rgba(112,71,29,.035) 0,rgba(112,71,29,.035) 1px,transparent 1px,transparent 5px);padding:14px 16px 10px}.journal-intro{display:flex;gap:12px;align-items:center;padding:10px 13px;margin-bottom:12px;border:1px solid #c6a36a;border-radius:12px;background:linear-gradient(100deg,#ead4a7,#fff5d9);box-shadow:inset 0 1px #fffaf0}.journal-stamp{font-size:34px;filter:drop-shadow(0 2px #9a6838)}.journal-intro b{font:700 16px Cinzel,Georgia,serif;color:#593315}.journal-intro p{font-size:13px;color:#755535;margin-top:2px}.journal-page{border-left:3px solid #c39b59;padding-left:10px;margin:8px 0 12px}.journal-entry{display:flex;gap:10px;align-items:flex-start}.journal-entry .journal-icon{font-size:25px;min-width:32px;text-align:center}.journal-entry .grow{flex:1}.journal-entry h3{margin:0 0 2px}.journal-entry .badge{display:inline-block;border-radius:10px;padding:2px 7px;font-size:11px;font-weight:700;background:#ead4a7;color:#66451f}.journal-entry .badge.seen{background:#e4f0d6;color:#356124}.journal-count{font-size:13px;color:#7a5a3a;margin:0 0 8px}@media(max-width:760px){.journal-fab{right:9px;bottom:8px;padding:6px 9px;border-radius:12px}.journal-fab .label,.journal-fab kbd{display:none}.journal-fab .book{font-size:22px}#panel.journal{max-height:92%}}
.journal-entry .journal-icon{display:grid;place-items:center;width:48px;min-width:48px;height:50px;flex:none}.journal-art{display:block;width:48px;height:48px;object-fit:contain;filter:drop-shadow(0 2px 2px rgba(76,48,23,.2))}

/* ---------- Roue des émotes (touche E) ---------- */
#emoteWheel{position:absolute;right:60px;bottom:96px;display:grid;grid-template-columns:repeat(5,64px);gap:6px;padding:10px;border-radius:14px;background:linear-gradient(#fbf0d6,#e8d1a0);border:2px solid #2a170a;box-shadow:0 4px 0 #2a170a,0 10px 24px rgba(0,0,0,.35);z-index:30}
#emoteWheel button{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 2px 4px;border-radius:10px;border:1.5px solid #8a5a2e;background:#fffaf0;color:#3a2614;cursor:pointer;font-family:inherit}
#emoteWheel button:hover{background:#ffe9a8;transform:translateY(-1px)}
#emoteWheel span{font-size:24px;line-height:1}
#emoteWheel small{font-size:10.5px;font-weight:600;white-space:nowrap}
#emoteWheel kbd{position:absolute;top:2px;right:4px;font-size:9px;opacity:.55;font-family:inherit}
@media (max-width:520px){#emoteWheel{right:8px;left:8px;grid-template-columns:repeat(5,1fr)}}

/* ---------- Choix de la race ---------- */
#raceScreen{position:absolute;inset:0;z-index:40;display:grid;place-items:center;padding:16px;overflow:auto;background:radial-gradient(ellipse at center,rgba(20,30,15,.55),rgba(10,16,8,.92))}
#raceScreen .rbox{max-width:980px;width:100%;text-align:center;padding:18px 18px 16px;border-radius:16px;background:linear-gradient(#fbf0d6,#ecd6a6);border:3px solid #2a170a;box-shadow:0 6px 0 #2a170a,0 18px 40px rgba(0,0,0,.45)}
#raceScreen h2{font-family:'Cinzel',serif;font-size:28px;color:#3a2614;margin-bottom:2px}
#raceScreen .rgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:14px 0 14px}
#raceScreen .rcard{display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 10px 12px;border-radius:12px;border:2px solid #8a5a2e;background:#fffaf0;color:#3a2614;font-family:inherit;cursor:pointer;text-align:center;transition:transform .12s}
#raceScreen .rcard:hover{transform:translateY(-2px)}
#raceScreen .rcard.on{border-color:#d18d17;background:#fff3cc;box-shadow:0 0 0 3px #ffd35c}
#raceScreen .rcard canvas{width:150px;height:170px;border-radius:10px;background:radial-gradient(ellipse at 50% 70%,#dff0c4,#bcd89a)}
#raceScreen .rcard b{font-size:17px;margin-top:4px}
#raceScreen .rcard i{font-size:13px;color:#8a5a2e}
#raceScreen .rcard p{font-size:12.5px;line-height:1.35;margin:4px 0}
#raceScreen .rcard ul{list-style:none;font-size:12.5px;font-weight:600;text-align:left;display:grid;gap:3px;margin-top:2px}
@media (max-width:820px){#raceScreen .rgrid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:440px){#raceScreen .rgrid{grid-template-columns:1fr}}

/* ---------- Carte du monde plein écran, façon parchemin ---------- */
#wmap{background:rgba(10,14,8,.72)}
#wmap .wbox{width:calc(100% - 16px);height:calc(100% - 16px);max-width:none}
#wmap:not(.hidden) .wbox{animation:mapUnfold .55s cubic-bezier(.2,.8,.25,1)}
@keyframes mapUnfold{0%{clip-path:inset(0 49% 0 49% round 16px);transform:scaleY(.94);opacity:.4}60%{opacity:1}100%{clip-path:inset(0 0 0 0 round 16px);transform:none;opacity:1}}
#wmap .wbody{position:relative;padding:8px}
#wcvWrap{border:3px solid #6e4a24;box-shadow:0 0 0 2px #d6b077}
#wcvWrap::after{content:'';position:absolute;inset:0;pointer-events:none;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,240,200,.5),inset 0 0 38px rgba(80,48,16,.45)}
#wmap .wside{position:absolute;top:14px;right:14px;bottom:66px;width:250px;z-index:2;padding:10px;border-radius:12px;background:linear-gradient(#fbf0d6,#efdcb4);border:2px solid #6e4a24;box-shadow:0 8px 24px rgba(0,0,0,.35);transform:translateX(calc(100% + 24px));opacity:0;pointer-events:none;transition:transform .3s ease,opacity .3s ease}
#wmap .wbody.side-open .wside{transform:none;opacity:1;pointer-events:auto}
.wside-toggle{position:absolute;top:10px;right:10px;z-index:3;padding:6px 12px;border-radius:10px;border:2px solid #2a170a;background:linear-gradient(#fbf0d6,#e2c48c);color:#3a2614;font:700 13px Fredoka,system-ui,sans-serif;box-shadow:0 3px 0 #2a170a;cursor:pointer}
.wside-toggle:hover{background:linear-gradient(#fff6de,#ecd29e)}
#wmap .wbody.side-open .wside-toggle{right:276px}
@media (max-width:620px){#wmap .wside{width:auto;left:14px}#wmap .wbody.side-open .wside-toggle{right:10px;top:auto;bottom:10px}}
@media (prefers-reduced-motion:reduce){#wmap:not(.hidden) .wbox{animation:none}#wmap .wside{transition:none}}

/* ---------- Barres de défilement masquées (le défilement à la molette reste actif) ---------- */
*{scrollbar-width:none;-ms-overflow-style:none}
*::-webkit-scrollbar{display:none;width:0;height:0}

/* ---------- Menu Maison illustré ---------- */
.hhero{display:flex;gap:14px;align-items:stretch;padding:12px;margin-bottom:12px;border-radius:14px;border:2px solid #8a5a2e;background:radial-gradient(ellipse at 30% 85%,#d8ecb8 0,#bcd99a 45%,#9ec47c 100%);box-shadow:inset 0 0 0 2px rgba(255,248,225,.5),0 3px 0 #6e4a24}
.hhero canvas{width:320px;max-width:44%;height:auto;aspect-ratio:4/3;flex:none;filter:drop-shadow(0 6px 6px rgba(40,30,10,.25))}
.hinfo{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px;padding:10px 12px;border-radius:12px;background:rgba(255,250,236,.92);border:1.5px solid #c9a46a}
.hinfo h3{font-family:Cinzel,Georgia,serif;font-size:21px;color:#3a2614;margin:0}
.hstep{font-size:12px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:#8a5a2e}
.hloc{font-size:13.5px}
.hbonus{font-size:13px;padding:6px 9px;border-radius:9px;background:#fff3cc;border:1px solid #e6c56a}
.hchips{display:flex;flex-wrap:wrap;gap:5px}
.hchips span{font-size:12.5px;font-weight:600;padding:3px 8px;border-radius:999px;background:#f3e2bb;border:1px solid #d6b077}
.hbtns{gap:6px;margin-top:auto}
.hsec{margin:6px 0 8px;font-family:Cinzel,Georgia,serif;font-size:16px;color:#4a2c12}
.hgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px;margin-bottom:12px}
.hcard{position:relative;display:flex;flex-direction:column;gap:3px;padding:8px 9px 10px;border-radius:12px;border:2px solid #c9a46a;background:#fffaf0;text-align:left}
.hcard canvas{width:100%;height:auto;aspect-ratio:4/3;border-radius:9px;background:radial-gradient(ellipse at 50% 85%,#dcefc2,#bcd89a)}
.hcard b{font-size:14.5px;color:#3a2614}
.hcard small{font-size:12px;line-height:1.3}
.hcard .btn{margin:6px 0 0;font-size:14px;padding:6px 10px}
.hcard.cur{border-color:#d18d17;background:#fff3cc;box-shadow:0 0 0 3px #ffd35c}
.hcard.own{opacity:.85}
.hcard.next{border-color:#4a8f2f;box-shadow:0 0 0 3px #bfe3a5}
.hcard.lock canvas{filter:grayscale(.85) brightness(.9);opacity:.55}
.hcard.lock{background:#f3ecdf;color:#7b6a55}
.hbadge{align-self:flex-start;margin-top:4px;font-size:12px;font-weight:700;padding:2px 8px;border-radius:999px;background:#f3e2bb;border:1px solid #d6b077}
.hbadge.ok{background:#e4f5da;border-color:#86d163;color:#2f5d1f}
.agrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;margin-bottom:12px}
.acard{display:flex;flex-direction:column;gap:4px;padding:10px;border-radius:12px;border:2px solid #c9a46a;background:#fffaf0}
.acard.on{background:#eef8e6;border-color:#86d163}
.acard .aic{font-size:28px;line-height:1}
.acard small{font-size:12px;line-height:1.3}
.acard .btn{align-self:flex-start;font-size:13.5px;padding:5px 10px;margin:4px 0 0}
.hdemo{border-color:#c0573c;background:#fff4ef}
.hregions{display:grid;gap:6px;margin:8px 0}
.hregions div{display:flex;flex-direction:column;padding:6px 9px;border-radius:9px;background:#fffaf0;border:1px solid #d6b077;font-size:13px}
@media (max-width:620px){.hhero{flex-direction:column}.hhero canvas{max-width:100%;width:100%}}

/* ---------- Carte : rouleau de parchemin ---------- */
#wmap .wbox{border:none;border-radius:6px;background:
 radial-gradient(ellipse at 20% 15%,rgba(150,100,40,.16),transparent 40%),
 radial-gradient(ellipse at 85% 80%,rgba(140,90,30,.18),transparent 45%),
 radial-gradient(ellipse at 60% 40%,rgba(255,250,230,.5),transparent 60%),
 linear-gradient(90deg,#c9ad78 0,#ead7aa 4%,#f2e3bd 12%,#f2e3bd 88%,#ead7aa 96%,#c9ad78 100%);
 box-shadow:inset 0 0 0 1px rgba(120,80,30,.35),inset 0 10px 18px -8px rgba(90,55,20,.45),inset 0 -10px 18px -8px rgba(90,55,20,.45),0 22px 60px rgba(0,0,0,.6);
 width:calc(100% - 76px);height:calc(100% - 40px)}
#wmap .wbox .ph{background:none;border-bottom:1px dashed rgba(110,70,30,.45);box-shadow:none}
#wmap .wbox .ph h2{color:#4a2c12;text-shadow:0 1px 0 rgba(255,250,230,.8);font-family:Cinzel,Georgia,serif;letter-spacing:1px}
#wmap .wbox .ph .x{border-radius:50%;width:38px;height:38px;border:none;color:#fbe7d0;background:radial-gradient(circle at 35% 30%,#d9534a,#9c2a22 60%,#6e1a14);box-shadow:0 2px 0 #4a120e,inset 0 0 0 3px rgba(255,255,255,.12)}
#wcvWrap{border:none;box-shadow:none;background:transparent;border-radius:4px}
#wcvWrap::after{box-shadow:inset 0 0 30px 6px rgba(234,215,170,.95)}
.roller{position:absolute;top:12px;bottom:12px;width:30px;z-index:8;pointer-events:none;border-radius:15px;
 background:linear-gradient(90deg,#3b2210 0,#6e4220 18%,#a36b3a 38%,#c98c52 50%,#a36b3a 62%,#6e4220 82%,#3b2210 100%);
 box-shadow:0 8px 20px rgba(0,0,0,.5),inset 0 0 0 1px rgba(0,0,0,.35)}
.roller.left{left:23px}
.roller.right{right:23px}
.roller .knob{position:absolute;left:50%;width:22px;height:18px;margin-left:-11px;border-radius:50% 50% 45% 45%;background:radial-gradient(circle at 40% 35%,#f3d27a,#b8862b 55%,#6e4d12);box-shadow:0 2px 3px rgba(0,0,0,.5)}
.roller .knob.top{top:-10px}.roller .knob.bottom{bottom:-10px;transform:scaleY(-1)}
#wmap.hidden .roller{display:none}
#wmap:not(.hidden) .roller.left{animation:rollL .6s cubic-bezier(.2,.8,.25,1)}
#wmap:not(.hidden) .roller.right{animation:rollR .6s cubic-bezier(.2,.8,.25,1)}
@keyframes rollL{0%{left:calc(50% - 30px)}100%{left:23px}}
@keyframes rollR{0%{right:calc(50% - 30px)}100%{right:23px}}
@media (prefers-reduced-motion:reduce){#wmap:not(.hidden) .roller{animation:none}}
#wmap .journal-fab{right:66px;bottom:30px;z-index:9}
/* caserne : statistiques des soldats et familiers */
.cstats{display:flex;flex-wrap:wrap;gap:4px 8px;font-size:12px;color:#4a3420;margin:3px 0 2px}
.cstats span{background:#f3e6c8;border-radius:6px;padding:1px 6px}
/* ----- choix de la partie et création du personnage ----- */
#menuScreen{position:absolute;inset:0;z-index:45;display:grid;place-items:center;padding:16px;overflow:auto;background:radial-gradient(ellipse at center,rgba(20,30,15,.6),rgba(10,16,8,.94))}
#menuScreen .mbox{max-width:980px;width:100%;text-align:center;padding:18px 18px 16px;border-radius:16px;background:linear-gradient(#fbf0d6,#ecd6a6);border:3px solid #2a170a;box-shadow:0 6px 0 #2a170a,0 18px 40px rgba(0,0,0,.5);color:#3a2614}
#menuScreen h2{font-family:'Cinzel',serif;font-size:28px;color:#3a2614;margin:4px 0 2px}
#menuScreen .sgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:14px 0}
#menuScreen .scard{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 10px 12px;border-radius:12px;border:2px solid #8a5a2e;background:#fffaf0}
#menuScreen .scard.empty{border-style:dashed;background:#fbf3e0}
#menuScreen .sport canvas{width:120px;height:140px;border-radius:10px;background:radial-gradient(ellipse at 50% 75%,#dff0c4,#bcd89a)}
#menuScreen .scard.empty .sport canvas{background:radial-gradient(ellipse at 50% 75%,#efe3c8,#dccaa2)}
#menuScreen .scard b{font-size:17px}
#menuScreen .scard i{font-size:13px;color:#8a5a2e}
#menuScreen .scard small{font-size:12.5px;line-height:1.4;min-height:34px}
#menuScreen .srow{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:6px}
#menuScreen .srow.center{margin-top:12px}
#menuScreen .steps{display:flex;justify-content:center;gap:6px;font-size:13px;font-weight:700}
#menuScreen .steps span{padding:3px 10px;border-radius:20px;background:#e7d3a6;color:#8a6a44}
#menuScreen .steps span.on{background:#d18d17;color:#fff}
#menuScreen .steps span.done{background:#7da35a;color:#fff}
#menuScreen .rgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:14px 0 4px}
#menuScreen .rcard{display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 10px 12px;border-radius:12px;border:2px solid #8a5a2e;background:#fffaf0;color:#3a2614;font-family:inherit;cursor:pointer;transition:transform .12s}
#menuScreen .rcard:hover{transform:translateY(-2px)}
#menuScreen .rcard.on{border-color:#d18d17;background:#fff3cc;box-shadow:0 0 0 3px #ffd35c}
#menuScreen .rcard canvas{width:150px;height:170px;border-radius:10px;background:radial-gradient(ellipse at 50% 70%,#dff0c4,#bcd89a)}
#menuScreen .rcard b{font-size:17px;margin-top:4px}
#menuScreen .rcard i{font-size:13px;color:#8a5a2e}
#menuScreen .rcard p{font-size:12.5px;line-height:1.35;margin:4px 0}
#menuScreen .rcard ul,#menuScreen .recap ul{list-style:none;font-size:12.5px;font-weight:600;text-align:left;display:grid;gap:3px;margin-top:2px}
#menuScreen .crwrap{display:grid;grid-template-columns:240px 1fr;gap:16px;margin:12px 0 4px;text-align:left}
#menuScreen .crprev{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center}
#menuScreen .crprev canvas{width:220px;height:260px;border-radius:14px;background:radial-gradient(ellipse at 50% 78%,#dff0c4,#b6d492);border:2px solid #8a5a2e}
#menuScreen .crprev small{font-size:12px;color:#8a5a2e}
#menuScreen .crctl{display:flex;flex-direction:column;gap:10px}
#menuScreen .crctl label{display:flex;flex-direction:column;gap:4px;font-weight:700;font-size:14px}
#menuScreen .crctl input{font:inherit;font-size:16px;padding:7px 10px;border-radius:9px;border:2px solid #8a5a2e;background:#fffaf0;color:#3a2614}
#menuScreen .crrow{display:flex;flex-direction:column;gap:5px}
#menuScreen .crrow>span{font-weight:700;font-size:14px}
#menuScreen .crrow small{font-weight:400;color:#8a5a2e}
#menuScreen .sws{display:flex;flex-wrap:wrap;gap:7px}
#menuScreen .sw{width:30px;height:30px;border-radius:50%;border:3px solid #fffaf0;box-shadow:0 0 0 2px #8a5a2e;cursor:pointer;padding:0}
#menuScreen .sw.on{box-shadow:0 0 0 3px #d18d17,0 0 0 6px #ffd35c}
#menuScreen .chips{display:flex;flex-wrap:wrap;gap:6px}
#menuScreen .chip{font:inherit;font-size:13.5px;padding:5px 11px;border-radius:20px;border:2px solid #8a5a2e;background:#fffaf0;color:#3a2614;cursor:pointer}
#menuScreen .chip.on{background:#d18d17;border-color:#9a5f0c;color:#fff}
#menuScreen .recap p{margin:2px 0 6px;font-size:15px}
@media (max-width:820px){#menuScreen .rgrid{grid-template-columns:repeat(2,1fr)}#menuScreen .sgrid{grid-template-columns:1fr}#menuScreen .crwrap{grid-template-columns:1fr}}
@media (max-width:440px){#menuScreen .rgrid{grid-template-columns:1fr}}
/* ----- accueil de Naxomia : îles volantes au crépuscule ----- */
#menuScreen{display:block;padding:0;background:#0b1430}
#menuSky{position:absolute;inset:0;width:100%;height:100%;display:block}
#menuInner{position:absolute;inset:0;display:grid;place-items:center;padding:16px;overflow:auto;pointer-events:none}
#menuInner>*:not(.isles){pointer-events:auto}
.isles{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;padding:16px 16px 22px}
.isles .ititle,.isles .ipanel{pointer-events:auto}
.ititle{font-family:'Cinzel',serif;font-weight:700;font-size:clamp(52px,6.6vw,92px);letter-spacing:.08em;line-height:1;background:linear-gradient(#fff6d2,#f4cc6a 45%,#b8801e 80%,#e9b654);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 3px 0 rgba(30,15,5,.75)) drop-shadow(0 0 24px rgba(255,205,120,.35))}
.isub{display:flex;align-items:center;gap:16px;margin-top:8px;font-family:'Cinzel',serif;font-size:15px;letter-spacing:.42em;color:#dfe6f7;text-shadow:0 2px 6px rgba(0,0,0,.6)}
.isub span{width:80px;height:1.5px;background:linear-gradient(90deg,transparent,#d6e0f5)}
.isub span:last-child{background:linear-gradient(90deg,#d6e0f5,transparent)}
.ispace{flex:1}
.ipanel{width:min(720px,100%);text-align:center;padding:16px 26px 14px;border-radius:18px;background:linear-gradient(#3a2618,#241509);border:3px solid #c9973e;box-shadow:inset 0 0 0 2px #5a3a1e,inset 0 0 0 5px rgba(242,193,78,.25),0 0 30px rgba(255,200,110,.18),0 16px 40px rgba(0,0,0,.55);color:#ecdfc4;position:relative}
.itabs{display:flex;justify-content:center;gap:8px;margin:-34px 0 6px}
.itab{font:inherit;font-weight:700;font-size:13.5px;padding:5px 14px;border-radius:14px;border:2px solid #7a5a32;background:#2a1a10;color:#d9c8a0;cursor:pointer;display:flex;align-items:center;gap:6px}
.itab i{width:9px;height:9px;border-radius:50%;background:var(--c);box-shadow:0 0 6px var(--c)}
.itab.on{border-color:#f2c14e;color:#fff4c8;box-shadow:0 0 12px rgba(242,193,78,.45)}
.ipanel h3{font-family:'Cinzel',serif;font-size:34px;margin:2px 0;background:linear-gradient(#fff4c8,#f2c14e 60%,#c98a2a);-webkit-background-clip:text;background-clip:text;color:transparent}
.ipanel p{font-size:15.5px;margin:0 0 8px;color:#e6d8bc}
.ihero{display:inline-flex;align-items:center;gap:7px;font-weight:700;font-size:14.5px;color:#f3e6c8}
.ihero i{width:10px;height:10px;border-radius:50%;background:#5ad07a;box-shadow:0 0 8px #5ad07a}
.ihero.off i{background:#8a8a8a;box-shadow:none}
.ihero.off{color:#b9a888}
.ibtns{display:flex;justify-content:center;margin-top:12px}
.igo{font-family:'Cinzel',serif;font-weight:700;font-size:22px;letter-spacing:.14em;text-transform:uppercase;padding:12px 48px;border-radius:12px;border:2px solid #fff1c2;background:linear-gradient(#fbe3a0,#e3ad4c);color:#4a2c10;cursor:pointer;box-shadow:0 5px 0 #7a4a14,0 0 26px rgba(255,210,120,.35)}
.igo:hover{filter:brightness(1.07)}
.igo:active{transform:translateY(3px);box-shadow:0 2px 0 #7a4a14}
.itools{display:flex;justify-content:center;align-items:center;gap:12px;margin-top:10px;min-height:26px;font-size:12.5px;color:#b9a888}
.ilink{font:inherit;font-size:13px;padding:4px 12px;border-radius:14px;border:1.5px solid #7a5a32;background:transparent;color:#e6d8bc;cursor:pointer}
.ilink:hover{background:rgba(242,193,78,.12)}
#menuScreen .crrot{display:flex;align-items:center;justify-content:center;gap:6px;margin:4px 0 2px}
#menuScreen .crrot span{min-width:74px;font-weight:700;font-size:13px;color:#5a3a22}
#menuScreen .crrot .chip{padding:3px 9px;font-size:14px;white-space:nowrap}
#menuScreen #crCanvas{cursor:grab;touch-action:none}
.intsw{width:28px;height:28px;border-radius:50%;border:3px solid #fffaf0;box-shadow:0 0 0 2px #8a5a2e;cursor:pointer;padding:0}
.intsw.on{box-shadow:0 0 0 3px #d18d17,0 0 0 6px #ffd35c}

/* ----- multijoueur : connexion, compte, discussion, guilde */
.nwait{font-style:italic;opacity:.85;padding:18px 0}
.nlogin{max-width:460px;text-align:left}
.nlogin .itabs{justify-content:center}
.nlogin label{display:block;font-weight:700;font-size:13.5px;color:#e6c98a;margin:10px 0 0}
.nlogin input[type=text],.nlogin input:not([type]),.nlogin input[type=password]{display:block;width:100%;box-sizing:border-box;margin-top:4px;padding:9px 12px;border-radius:10px;border:2px solid #7a5a32;background:#1b1009;color:#fff4dc;font:inherit;font-size:15px;outline:none}
.nlogin input:focus{border-color:#f2c14e;box-shadow:0 0 0 3px rgba(242,193,78,.2)}
.nlogin .lgchk{display:flex;align-items:center;gap:8px;font-weight:600;color:#d9c8a0}
.nlogin .ibtns{text-align:center;margin-top:12px}
.lgerr{min-height:20px;margin-top:8px;color:#ff9a8a;font-weight:700;font-size:13.5px;text-align:center}
.lgnote{font-size:12.5px!important;opacity:.75;text-align:center;margin-top:10px!important}
.naccount{position:absolute;top:14px;right:16px;display:flex;align-items:center;gap:8px;padding:6px 8px 6px 14px;border-radius:16px;background:rgba(30,18,10,.8);border:1.5px solid #9a7440;color:#f3e3c3;font-weight:700;font-size:13.5px;z-index:3}
.naccount button{font:inherit;font-size:12.5px;padding:4px 10px;border-radius:12px;border:1.5px solid #7a5a32;background:#2a1a10;color:#e6d8bc;cursor:pointer}
.naccount button:hover{border-color:#f2c14e}
#chatBox{position:fixed;left:12px;bottom:92px;width:min(380px,40vw);z-index:40;pointer-events:none;font-size:13px}
#chatLog{max-height:190px;overflow:hidden;display:flex;flex-direction:column;gap:2px}
#chatBox.open #chatLog{overflow-y:auto;pointer-events:auto;background:rgba(20,12,6,.55);border-radius:10px;padding:6px}
.cl{padding:2px 8px;border-radius:8px;background:rgba(20,12,6,.62);color:#fff4dc;width:fit-content;max-width:100%;word-wrap:break-word;transition:opacity 1.2s}
.cl b{color:#f2c14e}
.cl.guild b{color:#6ee7a0}.cl.guild{color:#d7ffe6}
.cl.info{color:#cfe8ff;font-style:italic}
.cl.old{opacity:0}
#chatBox.open .cl.old{opacity:.85}
#chatBar{display:none;margin-top:5px;gap:6px;pointer-events:auto}
#chatBox.open #chatBar{display:flex}
#chatIn{flex:1;padding:7px 10px;border-radius:10px;border:2px solid #c9973e;background:rgba(27,16,9,.95);color:#fff4dc;font:inherit;outline:none}
#chatCh{font:inherit;font-weight:700;padding:5px 10px;border-radius:10px;border:2px solid #7a5a32;background:#2a1a10;color:#e6d8bc;cursor:pointer}
#chatCh.guild{background:#1f5a34;border-color:#6ee7a0;color:#eafff1}
.ninvite{position:fixed;top:70px;left:50%;transform:translateX(-50%);z-index:60;padding:12px 18px;border-radius:14px;background:linear-gradient(#3a2618,#241509);border:2px solid #c9973e;color:#f3e3c3;box-shadow:0 10px 30px rgba(0,0,0,.5);text-align:center}
.ninvite p{margin:0 0 8px}.ninvite div{display:flex;gap:8px;justify-content:center}
.gmember{display:flex;align-items:center;gap:8px;padding:6px 4px;border-bottom:1px solid rgba(120,90,50,.25);flex-wrap:wrap}
.gmember .gzone{flex:1;font-size:12.5px}
.gmember .btn{padding:3px 10px;font-size:12.5px}
.gdot{width:10px;height:10px;border-radius:50%;background:#6b7280;box-shadow:0 0 0 2px rgba(0,0,0,.25)}
.gdot.on{background:#4ade80}
.ginput{flex:1;padding:7px 10px;border-radius:10px;border:2px solid #b98548;font:inherit;min-width:160px}
.nlogin .igo{font-size:18px;padding:10px 30px;white-space:nowrap}
#mountMenu,#objMenu{position:fixed;z-index:70;transform:translate(-50%,calc(-100% - 14px));display:flex;flex-direction:column;gap:6px;padding:10px;border-radius:14px;background:linear-gradient(#3a2618,#241509);border:2px solid #c9973e;box-shadow:0 10px 26px rgba(0,0,0,.5);color:#f3e3c3;min-width:190px;text-align:center}
#mountMenu b,#objMenu b{font-size:13px;color:#f2c14e}
#mountMenu button,#objMenu button{font:inherit;font-weight:700;font-size:14px;padding:8px 12px;border-radius:10px;border:2px solid #7a5a32;background:#2a1a10;color:#f3e3c3;cursor:pointer;text-align:left}
#mountMenu button:hover,#objMenu button:hover{border-color:#f2c14e;background:#3a2616}
#mountMenu small,#objMenu small{float:right;opacity:.75;font-weight:600}
/* ----- nouveautés */
#newsBtn{position:absolute;top:14px;left:16px;z-index:3;font:inherit;font-weight:700;font-size:14px;padding:7px 14px;border-radius:16px;border:1.5px solid #9a7440;background:rgba(30,18,10,.8);color:#f3e3c3;cursor:pointer}
#newsBtn small{opacity:.7;font-weight:600;margin-left:4px}
#newsBtn:hover{border-color:#f2c14e}
#newsBtn.new{border-color:#f2c14e;box-shadow:0 0 0 0 rgba(242,193,78,.6);animation:newsPulse 1.8s infinite}
#newsBtn.new::after{content:'NOUVEAU';margin-left:8px;font-size:10px;padding:2px 6px;border-radius:8px;background:#c0392b;color:#fff}
@keyframes newsPulse{0%{box-shadow:0 0 0 0 rgba(242,193,78,.55)}70%{box-shadow:0 0 0 12px rgba(242,193,78,0)}100%{box-shadow:0 0 0 0 rgba(242,193,78,0)}}
#newsBox{position:fixed;inset:0;z-index:90;background:rgba(8,6,14,.6);display:flex;align-items:center;justify-content:center;padding:20px}
#newsBox .nwin{width:min(640px,100%);max-height:84vh;display:flex;flex-direction:column;border-radius:18px;background:linear-gradient(#3a2618,#241509);border:3px solid #c9973e;box-shadow:inset 0 0 0 2px #5a3a1e,0 16px 40px rgba(0,0,0,.6);color:#f3e3c3}
#newsBox .nhead{display:flex;justify-content:space-between;align-items:center;padding:12px 18px;border-bottom:1.5px solid rgba(201,151,62,.4);font-family:'Cinzel',serif;font-weight:700;font-size:22px;color:#f2c14e}
#newsBox .nhead button{font:inherit;font-size:16px;width:32px;height:32px;border-radius:50%;border:1.5px solid #7a5a32;background:#2a1a10;color:#f3e3c3;cursor:pointer}
#newsBox .nbody{overflow-y:auto;padding:6px 18px 16px}
#newsBox section{padding:12px 0;border-bottom:1px dashed rgba(201,151,62,.3)}
#newsBox section:last-child{border-bottom:none}
#newsBox h4{margin:0;font-size:16px;color:#fff4dc}
#newsBox h4 b{color:#f2c14e}
#newsBox h4 i{font-style:normal;font-size:10px;padding:2px 6px;border-radius:8px;background:#c0392b;color:#fff;margin-left:6px;vertical-align:middle}
#newsBox small{opacity:.6;font-size:12px}
#newsBox ul{margin:8px 0 0;padding-left:4px;list-style:none}
#newsBox li{padding:3px 0;font-size:14px;line-height:1.35}
/* ----- atelier */
.mcchips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.mcchip{font:inherit;font-size:12.5px;font-weight:700;padding:5px 10px;border-radius:12px;border:2px dashed rgba(122,90,50,.6);background:rgba(255,245,220,.35);color:inherit;cursor:pointer;opacity:.75}
.mcchip.own{border-style:solid;opacity:1;background:rgba(255,245,220,.7)}
.mcchip.on{border-color:#c9973e;box-shadow:0 0 0 2px rgba(242,193,78,.45)}
.mcchip span{margin-right:4px}
.mcchip i{font-style:normal;font-size:11px;opacity:.7}
.mcchip i.rdy{opacity:1;color:#fff;background:#3f8a38;padding:1px 6px;border-radius:8px}
.hchipa{display:inline-block;padding:4px 10px;margin:2px;border-radius:12px;background:rgba(201,151,62,.18);font-weight:700}
/* ----- boutique de décorations */
.ndgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.ndcard{display:flex;flex-direction:column;align-items:center;text-align:center;gap:3px;padding:8px 6px;border-radius:12px;background:rgba(255,245,220,.55);border:1.5px solid rgba(122,90,50,.35)}
.ndcard img{width:64px;height:64px}
.ndcard b{font-size:13px;line-height:1.15}
.ndcard small{font-size:11.5px;opacity:.75}
/* ----- vue par la fenêtre */
#winView{position:fixed;top:112px;left:50%;transform:translateX(-50%);z-index:30;opacity:0;pointer-events:none;padding:10px 10px 6px;border-radius:14px 14px 10px 10px;background:linear-gradient(#8a5a2e,#5a3418);border:3px solid #3a2410;box-shadow:0 12px 30px rgba(0,0,0,.45),inset 0 0 0 2px rgba(255,220,160,.25)}
#winView canvas{display:block;width:300px;height:200px;border-radius:8px 8px 4px 4px}
#winView .wvlab{text-align:center;color:#f3e3c3;font-weight:700;font-size:12.5px;margin-top:4px}
/* ----- dialogues */
#talkBox{position:fixed;left:50%;bottom:96px;transform:translate(-50%,20px);width:min(760px,94vw);z-index:65;display:flex;gap:12px;align-items:flex-end;padding:12px 14px;border-radius:16px;background:linear-gradient(#3a2618,#241509);border:3px solid #c9973e;box-shadow:inset 0 0 0 2px #5a3a1e,0 14px 34px rgba(0,0,0,.55);color:#f3e3c3;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}
#talkBox.open{opacity:1;pointer-events:auto;transform:translate(-50%,0)}
#talkBox canvas{flex:0 0 auto;width:120px;height:150px;border-radius:12px;background:radial-gradient(circle at 50% 70%,rgba(255,220,160,.25),rgba(0,0,0,0) 70%)}
#talkBox .tmain{flex:1;min-width:0}
#talkBox .thead{display:flex;justify-content:space-between;align-items:center;font-size:16px}
#talkBox .thead b{font-family:'Cinzel',serif;color:#f2c14e;font-size:19px}
#talkBox .thead span{font-size:12px;letter-spacing:1px}
#talkBox .tline{min-height:54px;margin:6px 0 8px;font-size:15px;line-height:1.4}
#talkBox .tgift{margin:-2px 0 8px;padding:6px 10px;border-radius:10px;background:rgba(242,193,78,.18);color:#ffe7a8;font-weight:700;font-size:13.5px}
#talkBox .tchoices{display:flex;flex-direction:column;gap:5px}
#talkBox .tchoices button{font:inherit;font-size:13.5px;text-align:left;padding:6px 10px;border-radius:10px;border:1.5px solid #7a5a32;background:#2a1a10;color:#f3e3c3;cursor:pointer}
#talkBox .tchoices button:hover{border-color:#f2c14e;background:#3a2616}
#talkBox .tchoices button.seen{opacity:.65}
#talkBox .tchoices button.bye{color:#e6c98a}
.mailtxt{margin:6px 0;white-space:pre-wrap;font-size:14px}
/* ----- négociation */
#talkBox .hgform{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:flex-end;margin:4px 0 10px}
#talkBox .hgform label{display:flex;flex-direction:column;gap:3px;font-size:12.5px;font-weight:700;color:#e6c98a}
#talkBox .hgform input{width:90px;padding:6px 8px;border-radius:8px;border:2px solid #7a5a32;background:#1b1009;color:#fff4dc;font:inherit;font-size:15px}
#talkBox .hgrow{display:flex;gap:4px;align-items:center}
#talkBox .hgrow button{width:30px;height:32px;border-radius:8px;border:1.5px solid #7a5a32;background:#2a1a10;color:#f3e3c3;font:inherit;font-weight:800;cursor:pointer}
#talkBox .hgsum{font-size:13.5px;flex-basis:100%}
#talkBox .hgsum .up{color:#86d163;font-weight:700}#talkBox .hgsum .dn{color:#ff9a8a;font-weight:700}
/* barre des burineurs à proximité */
#nearDrill{position:fixed;transform:translateX(-50%);z-index:40;display:none;align-items:center;gap:6px;padding:5px 7px;border-radius:12px;background:rgba(43,26,12,.92);border:1px solid #a8742f;box-shadow:0 4px 14px rgba(0,0,0,.35);color:#fde9b0;font-size:12px;white-space:nowrap}
#nearDrill span{font-weight:700;padding:0 3px}
#nearDrill button{border:1px solid #c89060;background:#f6e7c4;color:#3a2410;border-radius:8px;padding:4px 8px;font-size:12px;cursor:pointer;font-weight:600}
#nearDrill button:hover:not(:disabled){background:#ffe7a8}
#nearDrill button:disabled{opacity:.55;cursor:default}
/* ----- écran des mondes : carte parcheminée ----- */
#menuScreen{background:#82613d}
#menuSky{z-index:0}
#menuScreen::before{content:'';position:absolute;inset:0;pointer-events:none;z-index:1;background:radial-gradient(ellipse at center,transparent 46%,rgba(38,22,10,.34) 100%),linear-gradient(90deg,rgba(68,38,15,.22),transparent 7%,transparent 93%,rgba(68,38,15,.22))}
#menuInner{z-index:2}
.isles{padding:20px 26px 26px}
.isles::before{content:'';position:absolute;inset:11px;border:2px solid rgba(105,65,24,.75);box-shadow:inset 0 0 0 4px rgba(241,196,95,.42),inset 0 0 0 7px rgba(91,52,18,.6);pointer-events:none}
.atlas-note{position:absolute;left:24px;top:24px;padding:9px 16px;border-radius:18px;background:linear-gradient(#4d2e16,#28170c);border:2px solid #d9a840;box-shadow:inset 0 0 0 2px rgba(255,222,133,.18),0 4px 10px rgba(47,25,7,.35);font:700 16px Cinzel,Georgia,serif;color:#f7e7b6;letter-spacing:.02em}
.atlas-note small{font:600 11px Georgia,serif;opacity:.72;margin-left:5px}
.ititle{font-size:clamp(58px,7.4vw,104px);letter-spacing:.11em;background:linear-gradient(#fff8d6 5%,#f6d473 42%,#b8781b 78%,#ffe79d);filter:drop-shadow(0 3px 0 rgba(72,39,12,.75)) drop-shadow(0 0 18px rgba(255,220,125,.3))}
.isub{color:#513419;text-shadow:0 1px 0 rgba(255,243,199,.85);font-weight:700}
.isub span{background:linear-gradient(90deg,transparent,#9b6325)}
.isub span:last-child{background:linear-gradient(90deg,#9b6325,transparent)}
.ipanel{width:min(820px,calc(100% - 22px));padding:20px 34px 16px;border-radius:10px 10px 25px 25px;background:linear-gradient(100deg,#d6b778,#f7e5b9 12%,#f1ddb0 80%,#c79b5d);border:3px solid #77451b;box-shadow:inset 0 0 0 2px #f9dc96,inset 0 0 0 5px rgba(130,76,23,.4),0 13px 26px rgba(50,27,10,.42);color:#422715}
.ipanel::after{content:'✦';position:absolute;left:50%;bottom:-20px;transform:translateX(-50%);font-size:30px;color:#d9a840;text-shadow:0 2px #77451b}
.itabs{margin:-40px 0 8px}
.itab{padding:7px 18px;border-color:#805022;background:linear-gradient(#4b2b14,#271509);color:#f3db9e;box-shadow:0 3px 0 #704018}
.itab.on{border-color:#ffe28b;background:linear-gradient(#68401b,#35200d);box-shadow:0 3px 0 #704018,0 0 0 3px rgba(255,217,108,.42)}
.ipanel h3{font-size:36px;color:#3f2512;background:none;-webkit-text-fill-color:#3f2512;text-shadow:0 1px 0 #fff1c7}
.ipanel p{color:#5b3a20;font-size:16px}.ihero{color:#4a2d18}.ihero.off{color:#6e5538}.ihero i{background:#3fa95c;box-shadow:0 0 7px #3fa95c}
.igo{min-width:min(520px,90%);font-size:22px;border-color:#fff1b8;background:linear-gradient(#fff0ae,#e4b352 55%,#c88627);color:#512d0f;box-shadow:0 5px 0 #754114,0 0 20px rgba(255,210,110,.4)}
.itools{color:#654426}.ilink{border-color:#805022;background:rgba(255,244,202,.35);color:#4a2d18}.ilink:hover{background:rgba(255,241,183,.75)}
@media (max-width:700px){.atlas-note{left:14px;top:14px;font-size:12px;padding:6px 10px}.isles{padding:14px 10px 20px}.ititle{margin-top:38px}.isub{font-size:11px;letter-spacing:.25em}.isub span{width:38px}.ipanel{padding:18px 14px 13px}.itab{font-size:11px;padding:6px 9px}.itabs{gap:4px}.ipanel h3{font-size:28px}.igo{font-size:16px;padding:11px 14px}}
/* enchantement */
.enchgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:6px;margin-top:8px}
.enchopt{display:flex;flex-direction:column;gap:3px;padding:7px;border-radius:9px;background:rgba(120,80,170,.08);border:1px solid rgba(120,80,170,.3)}
.enchopt small{opacity:.8;line-height:1.25}
.enchopt.done{opacity:.6}
.enchopt .btn{margin-top:auto}
.ench-elf{font-size:11px;padding:1px 6px;border-radius:8px;background:#dff1d6;color:#2f5a2a;vertical-align:middle}
h3.sub{margin:12px 0 6px}
/* Laboratoire des automates */
.robot-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:9px}
.robot-card{display:flex;align-items:center;gap:10px;margin:0;min-width:0}
.robot-card .grow{min-width:0;flex:1}
.robot-card h3{margin:0 0 4px}
.robot-card p{margin:0 0 5px}
.robot-card small{display:block;color:#705438;line-height:1.35}
.robot-preview{flex:none;width:82px;height:92px;border-radius:10px;background:radial-gradient(circle at 50% 45%,#dbe7d8,#c6bd9c 70%,#ad9875);border:1px solid #b49462}
.robot-actions{flex:none;align-self:flex-end}
@media(max-width:650px){.robot-grid{grid-template-columns:1fr}.robot-card{flex-wrap:wrap}.robot-actions{width:100%;text-align:right}}
/* amitié avec Mireille */
.friendcard .prog{margin:5px 0}
.friendcard .favor{margin-top:8px;padding:8px;border-radius:9px;background:rgba(240,180,60,.12);border:1px dashed rgba(170,120,40,.5)}
.friendcard .favor .btn{margin-top:6px}
.hgfriend{font-size:12px;color:#b45309;font-weight:700;margin:4px 0}
/* ===== écran des îles illustré ===== */
#menuScreen.artmode{padding:0;background:#120c06;overflow:hidden}
#menuScreen.artmode #menuSky{display:none}
#menuScreen.artmode #menuInner{padding:0;overflow:hidden;pointer-events:auto}
#menuScreen.artmode .artbg{position:absolute;inset:-40px;background-size:cover;background-position:center;filter:blur(22px) brightness(.5) saturate(1.1)}
#menuScreen.artmode .artwrap{position:relative;container-type:size;--u:min(1cqw,1.777cqh);user-select:none;box-shadow:0 0 60px rgba(0,0,0,.6)}
.artwrap .artimg{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
.artwrap .arthot{position:absolute;padding:0;border:0;background:none;cursor:pointer;border-radius:50%;outline:none}
.artwrap .artdim{position:absolute;inset:6% 4% 16%;border-radius:50%;backdrop-filter:brightness(.62) saturate(.6);-webkit-backdrop-filter:brightness(.62) saturate(.6);transition:opacity .35s;-webkit-mask:radial-gradient(closest-side,#000 70%,transparent);mask:radial-gradient(closest-side,#000 70%,transparent)}
.artwrap .arthot:hover .artdim{opacity:.35}
.artwrap .arthot.on .artdim{opacity:0}
.artwrap .artglow{position:absolute;inset:-4% -2% 10%;border-radius:50%;background:radial-gradient(closest-side,rgba(255,226,150,.34),rgba(255,210,120,.12) 55%,transparent);mix-blend-mode:screen;opacity:0;transition:opacity .4s}
.artwrap .arthot.on .artglow{opacity:1;animation:artPulse 3.2s ease-in-out infinite}
@keyframes artPulse{50%{transform:scale(1.04);filter:brightness(1.25)}}
.artwrap .artban{position:absolute;pointer-events:none;border-radius:calc(.6*var(--u))}
.artwrap .artban.on{box-shadow:0 0 calc(1.4*var(--u)) calc(.3*var(--u)) rgba(255,214,110,.75),inset 0 0 calc(.8*var(--u)) rgba(255,240,190,.5);animation:artBan 2.4s ease-in-out infinite}
@keyframes artBan{50%{box-shadow:0 0 calc(2.2*var(--u)) calc(.5*var(--u)) rgba(255,214,110,.95),inset 0 0 calc(1*var(--u)) rgba(255,240,190,.65)}}
.artwrap .artlamp{position:absolute;left:1.5%;top:63%;width:8%;height:16%;border-radius:50%;background:radial-gradient(closest-side,rgba(255,200,110,.55),transparent);mix-blend-mode:screen;pointer-events:none;animation:artLamp 2.6s infinite}
@keyframes artLamp{0%,100%{opacity:.75}20%{opacity:1}35%{opacity:.6}60%{opacity:.95}80%{opacity:.7}}
.artwrap .artmotes{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.artwrap .artmotes i{position:absolute;bottom:38%;width:calc(.35*var(--u));height:calc(.35*var(--u));border-radius:50%;background:#fff3c4;box-shadow:0 0 calc(.8*var(--u)) calc(.25*var(--u)) rgba(255,226,150,.8);opacity:0;animation:artMote linear infinite}
@keyframes artMote{0%{transform:translateY(0);opacity:0}15%{opacity:.9}100%{transform:translate(calc(1.5*var(--u)),calc(-26*var(--u)));opacity:0}}
/* le panneau du bas, posé sur celui de l'image */
#menuScreen.artmode .artpanel{position:absolute;left:23%;top:60.4%;width:54%;height:37.3%;margin:0;box-sizing:border-box;padding:calc(2.4*var(--u)) calc(3*var(--u)) calc(1*var(--u));display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
 border-radius:calc(.8*var(--u));border:calc(.28*var(--u)) solid #9a6a24;background:radial-gradient(ellipse at 50% 40%,#f7ead0,#ecd8ad 70%,#d9bd84);
 box-shadow:inset 0 0 0 calc(.25*var(--u)) #f3d58a,inset 0 0 0 calc(.45*var(--u)) #8a5a1e,inset 0 0 calc(2.4*var(--u)) rgba(140,90,30,.45),0 calc(.5*var(--u)) calc(2*var(--u)) rgba(0,0,0,.45)}
#menuScreen.artmode .artpanel::before{content:'';position:absolute;inset:calc(.7*var(--u));border:calc(.1*var(--u)) solid rgba(154,106,36,.6);border-radius:calc(.5*var(--u));pointer-events:none}
#menuScreen.artmode .artpanel::after{content:'❖';position:absolute;left:50%;bottom:calc(-1.6*var(--u));transform:translateX(-50%);font-size:calc(2.4*var(--u));color:#e0b04a;text-shadow:0 calc(.15*var(--u)) #6a3e12;pointer-events:none}
#menuScreen.artmode .artpanel .itabs{position:absolute;top:calc(-1.3*var(--u));left:0;right:0;margin:0;gap:calc(.7*var(--u));display:flex;justify-content:center}
#menuScreen.artmode .artpanel .itab{font-size:calc(1.15*var(--u));padding:calc(.35*var(--u)) calc(1.4*var(--u));min-width:calc(9*var(--u));justify-content:center;height:calc(2.7*var(--u));border-radius:calc(1.4*var(--u));border:calc(.16*var(--u)) solid #9a6a24;background:linear-gradient(#3e2412,#1f1108);color:#f3e0b0;box-shadow:0 calc(.2*var(--u)) 0 #4a2a10;gap:calc(.5*var(--u))}
#menuScreen.artmode .artpanel .itab i{width:calc(.75*var(--u));height:calc(.75*var(--u))}
#menuScreen.artmode .artpanel .itab.on{border-color:#ffe08a;background:linear-gradient(#1d2a4a,#101830);box-shadow:0 calc(.2*var(--u)) 0 #4a2a10,0 0 0 calc(.22*var(--u)) rgba(255,217,108,.5),0 0 calc(1.2*var(--u)) rgba(120,170,255,.5)}
#menuScreen.artmode .artpanel h3{font-size:calc(2.6*var(--u));margin:calc(.2*var(--u)) 0 calc(.3*var(--u));letter-spacing:.05em;color:#3a2210;-webkit-text-fill-color:#3a2210;background:none;text-shadow:0 calc(.1*var(--u)) 0 #fff4d0}
#menuScreen.artmode .artpanel p{font-size:calc(1.18*var(--u));margin:0 0 calc(.5*var(--u));color:#4a2e16}
#menuScreen.artmode .artpanel .ihero{font-size:calc(1.08*var(--u));color:#3a2412;gap:calc(.5*var(--u))}
#menuScreen.artmode .artpanel .ihero i{width:calc(.8*var(--u));height:calc(.8*var(--u))}
#menuScreen.artmode .artpanel .ibtns{margin-top:calc(.9*var(--u))}
#menuScreen.artmode .artpanel .igo{min-width:0;width:calc(31*var(--u));font-size:calc(1.75*var(--u));padding:calc(.85*var(--u)) calc(1*var(--u));letter-spacing:.14em;border-radius:calc(.7*var(--u));border:calc(.2*var(--u)) solid #fff0b8;background:linear-gradient(#fff3b8,#f0c45e 45%,#d0922e);color:#4a2a0c;box-shadow:0 0 0 calc(.2*var(--u)) #8a5a1e,0 calc(.4*var(--u)) 0 #6a3e12,0 0 calc(1.6*var(--u)) rgba(255,210,110,.55)}
#menuScreen.artmode .artpanel .itools{margin-top:auto;padding-bottom:calc(.4*var(--u));gap:calc(1*var(--u));font-size:calc(1*var(--u));color:#5a3a1e;min-height:0}
#menuScreen.artmode .artpanel .ilink{font-size:calc(1.05*var(--u));padding:calc(.45*var(--u)) calc(1.3*var(--u));border-radius:calc(1.2*var(--u));border:calc(.14*var(--u)) solid #9a6a24;background:linear-gradient(#3e2412,#1f1108);color:#f3e0b0}
#menuScreen.artmode .artpanel .ilink:hover{background:linear-gradient(#5a3418,#2e180a)}
#menuScreen.artmode .artnews{position:absolute;left:calc(1.1*var(--u));top:calc(1.1*var(--u));width:auto;min-width:calc(13.6*var(--u));white-space:nowrap;height:calc(2.95*var(--u));padding:0 calc(1.1*var(--u));display:flex;align-items:center;justify-content:center;gap:calc(.4*var(--u));font-size:calc(1.15*var(--u));border-radius:calc(1.5*var(--u));border:calc(.14*var(--u)) solid #b8862f;background:linear-gradient(#2e1c0e,#180e06);color:#f3e3c3;box-shadow:0 calc(.2*var(--u)) calc(.8*var(--u)) rgba(0,0,0,.4)}
#menuScreen.artmode .artnews::after{font-size:calc(.7*var(--u));padding:calc(.15*var(--u)) calc(.4*var(--u));margin-left:calc(.3*var(--u))}
/* descente à l'échelle du bunker */
#ladderFx{position:fixed;inset:0;z-index:200;background:#07090a;display:grid;place-items:center;pointer-events:none;transition:opacity .5s;overflow:hidden}
#ladderFx.out{opacity:0}
#ladderFx .lfrails{position:absolute;left:50%;top:-20%;width:160px;height:140%;transform:translateX(-50%);border-left:12px solid #6a7276;border-right:12px solid #6a7276;background:repeating-linear-gradient(transparent 0 46px,#8a9296 46px 58px);box-shadow:inset 0 0 40px #000}
#ladderFx.down .lfrails{animation:lfDown 1.3s linear forwards}
#ladderFx.up .lfrails{animation:lfUp 1.3s linear forwards}
@keyframes lfDown{from{background-position:0 0}to{background-position:0 -290px}}
@keyframes lfUp{from{background-position:0 0}to{background-position:0 290px}}
#ladderFx .lflight{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 0%,rgba(255,245,210,.35),transparent 55%)}
#ladderFx.down .lflight{animation:lfDim 1.3s forwards}
@keyframes lfDim{to{opacity:.15}}
#ladderFx .lftxt{position:relative;font-family:'Cinzel',serif;font-weight:700;font-size:22px;color:#f3e3c3;text-shadow:0 2px 6px #000;padding:10px 20px;border-radius:12px;background:rgba(0,0,0,.45)}
/* île choisie : anneau doré, étincelles en orbite et flèche, visibles même sur une île claire */
.artwrap .artring{position:absolute;left:4%;right:4%;top:41%;height:26%;pointer-events:none;opacity:0;transition:opacity .4s}
.artwrap .arthot.on .artring{opacity:1}
.artwrap .artring::before{content:'';position:absolute;inset:0;border-radius:50%;border:calc(.28*var(--u)) solid #ffd76a;box-shadow:0 0 0 calc(.12*var(--u)) rgba(90,45,0,.75),0 0 calc(1.4*var(--u)) calc(.3*var(--u)) rgba(255,190,60,.85),inset 0 0 calc(1.2*var(--u)) rgba(255,200,80,.7);animation:artRing 2.4s ease-in-out infinite}
@keyframes artRing{50%{transform:scale(1.05);box-shadow:0 0 0 calc(.12*var(--u)) rgba(90,45,0,.75),0 0 calc(2.4*var(--u)) calc(.5*var(--u)) rgba(255,190,60,1),inset 0 0 calc(1.6*var(--u)) rgba(255,200,80,.9)}}
.artwrap .artorbit{position:absolute;left:50%;top:50%;width:100%;aspect-ratio:1;transform:translate(-50%,-50%) scaleY(.27)}
.artwrap .artmark{position:absolute;left:50%;top:-6%;transform:translateX(-50%);font-size:calc(2.6*var(--u));line-height:1;color:#ffd24a;text-shadow:0 0 0 #5a2e00,0 calc(.15*var(--u)) 0 #6a3a08,0 0 calc(1*var(--u)) rgba(255,190,60,.95);-webkit-text-stroke:calc(.12*var(--u)) #5a2e00;opacity:0;pointer-events:none}
.artwrap .arthot.on .artmark{opacity:1;animation:artMark 1.4s ease-in-out infinite}
@keyframes artMark{50%{transform:translate(-50%,calc(.9*var(--u)))}}
.artwrap .artorbit i{position:absolute;inset:0;border-radius:50%}
.artwrap .artorbit i::before{content:'';position:absolute;left:50%;top:0;width:calc(.6*var(--u));height:calc(.6*var(--u)*3.7);margin:calc(-.3*var(--u)*3.7) 0 0 calc(-.3*var(--u));border-radius:50%;background:#fff6cf;box-shadow:0 0 calc(.6*var(--u)) calc(.25*var(--u)) rgba(255,190,60,.95)}
.artwrap .arthot.on .artorbit i{animation:artOrbit 7s linear infinite}
@keyframes artOrbit{to{transform:rotate(360deg)}}
.artwrap .artorbit i:nth-child(1){animation-delay:-0ms}
.artwrap .artorbit i:nth-child(2){animation-delay:-700ms}
.artwrap .artorbit i:nth-child(3){animation-delay:-1400ms}
.artwrap .artorbit i:nth-child(4){animation-delay:-2100ms}
.artwrap .artorbit i:nth-child(5){animation-delay:-2800ms}
.artwrap .artorbit i:nth-child(6){animation-delay:-3500ms}
.artwrap .artorbit i:nth-child(7){animation-delay:-4200ms}
.artwrap .artorbit i:nth-child(8){animation-delay:-4900ms}
.artwrap .artorbit i:nth-child(9){animation-delay:-5600ms}
.artwrap .artorbit i:nth-child(10){animation-delay:-6300ms}
/* tisseuse : drapeaux et créations */
.flgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:8px}
.flcard{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px;border-radius:10px;background:rgba(255,250,240,.7);border:1px solid rgba(138,90,46,.35);text-align:center}
.flcard img{width:84px;height:56px;border-radius:3px;box-shadow:0 2px 6px rgba(0,0,0,.25)}
.flcard b{font-size:12px;line-height:1.2}
.flcard small{font-size:11px;opacity:.75}
.txmk{display:flex;gap:12px;align-items:flex-start;flex-wrap:wrap;margin:6px 0}
.txmk canvas{width:180px;height:120px;border-radius:6px;box-shadow:0 3px 10px rgba(0,0,0,.3);background:#fff}
.txmk label{display:flex;gap:6px;align-items:center;margin:6px 0;font-weight:600}
.txmk select,.txmk input{font:inherit;padding:3px 6px;border-radius:6px;border:1px solid #8a5a2e;background:#fffaf0}
.txsw{display:flex;flex-wrap:wrap;gap:4px;margin:2px 0 6px}
.txsw button{width:20px;height:20px;border-radius:50%;border:2px solid rgba(60,40,20,.5);cursor:pointer;padding:0}
.txsw button.on{border-color:#f2c14e;box-shadow:0 0 0 2px #8a5a2e}
canvas.atprev{width:200px;max-width:100%;height:auto;border-radius:8px;background:#bcd89a;margin-bottom:4px}
#flagNear{position:fixed;transform:translateX(-50%);z-index:40;display:none}
#flagNear button{font:inherit;font-weight:700;font-size:13px;padding:6px 12px;border-radius:12px;border:1.5px solid #c9973e;background:linear-gradient(#3a2618,#241509);color:#f3e3c3;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.35)}
#flagNear button small{opacity:.75;font-weight:600}
.flcard.on{border-color:#f2c14e;box-shadow:0 0 0 2px rgba(242,193,78,.5)}
/* Braiseroc : jauge de radiations */
.rad{cursor:pointer}
.rad>div{background:linear-gradient(#bef264,#4d7c0f)}
.rad.warn>div{background:linear-gradient(#fde047,#ca8a04)}
.rad.hot>div{background:linear-gradient(#fb923c,#b91c1c);animation:radPulse 1s ease-in-out infinite}
@keyframes radPulse{50%{filter:brightness(1.35)}}
/* Braiseroc : établi d'armurier */
canvas.gunpv{display:block;width:100%;max-width:460px;height:auto;border-radius:10px;margin:0 auto 8px;border:2px solid #2a1a10;box-shadow:inset 0 0 18px rgba(0,0,0,.6)}
.gunopts{display:flex;flex-wrap:wrap;gap:5px}
.gunopts .btn.on{outline:2px solid #ffd35c}
.gunopts small{opacity:.75;font-weight:500}
.gsw{display:inline-block;width:14px;height:14px;border-radius:4px;border:1px solid rgba(0,0,0,.6);vertical-align:-2px;margin-right:4px}
/* minicarte en parchemin roulé, et boutons pour réduire */
#miniWrap{overflow:visible;border:none;border-radius:4px;padding:8px 9px 9px;height:auto;margin:8px 4px 6px;
 background:radial-gradient(ellipse at 30% 20%,#f6e7c2 0,#ead3a0 55%,#d8b97e 100%);box-shadow:inset 0 0 0 1px rgba(120,80,30,.35),inset 0 0 14px rgba(120,76,30,.45),0 6px 14px rgba(0,0,0,.45)!important}
#miniWrap canvas{border-radius:3px;height:106px;box-shadow:inset 0 0 0 1px rgba(90,58,28,.5),0 0 0 1px rgba(255,248,226,.6);filter:sepia(.28) saturate(.9) contrast(1.02)}
#miniWrap::before,#miniWrap::after{content:'';position:absolute;left:-9px;right:-9px;height:13px;border-radius:7px;z-index:2;pointer-events:none;
 background:radial-gradient(circle at 6px 50%,#e0b84a 0 4px,#7a5020 5px,transparent 6px),radial-gradient(circle at calc(100% - 6px) 50%,#e0b84a 0 4px,#7a5020 5px,transparent 6px),linear-gradient(#3e2410,#a8743f 35%,#c8945a 50%,#6a4220 80%,#3a2010);box-shadow:0 2px 4px rgba(0,0,0,.45)}
#miniWrap::before{top:-7px}#miniWrap::after{bottom:-7px}
#miniWrap>span{bottom:12px!important;right:13px!important}
#miniWrap .scrollLab{display:none;font-family:'Uncial Antiqua',Cinzel,serif;color:#4a2810;font-size:14px;text-align:center;padding:2px 26px 1px 10px;white-space:nowrap}
#miniWrap.folded{padding:5px 9px}
#miniWrap.folded canvas,#miniWrap.folded>span{display:none}
#miniWrap.folded .scrollLab{display:block}
.uifold{position:absolute;z-index:3;width:22px;height:22px;border-radius:50%;border:1.5px solid #5a3a1c;background:linear-gradient(#f3dfb0,#d4b070);color:#4a2810;font-size:12px;font-weight:700;line-height:18px;cursor:pointer;box-shadow:0 2px 4px rgba(0,0,0,.4);padding:0}
.uifold:hover{filter:brightness(1.08)}
#miniWrap .uifold{top:-2px;left:-2px}
#right{position:absolute}
#trkFold{position:relative;align-self:flex-end;margin:-2px -6px -14px 0}
#tracker.folded{max-height:26px;overflow:hidden;padding-top:4px;padding-bottom:4px}
#tracker.folded .o{display:none}
/* carte : nom des lieux au survol, en calligraphie */
#wtip.calli{background:linear-gradient(#f6ead0,#e8d4a8);color:#3a1e0a;border:1px solid #a8844a;box-shadow:0 2px 8px rgba(40,20,5,.45);padding:5px 12px 6px;text-align:center;border-radius:6px}
#wtip.calli b{display:block;font:400 18px 'Uncial Antiqua',Cinzel,Georgia,serif;letter-spacing:1.5px}
#wtip.calli i{display:block;font:italic 500 11.5px Georgia,serif;color:#6a4a2a;margin-top:1px}
/* faim et soif, coque du navire */
.survRow{display:flex;gap:4px}.survRow.hidden{display:none}.survRow .bar{flex:1;cursor:pointer;height:14px}.survRow .bar span{font-size:9.5px;line-height:10px}
.faim>div{background:linear-gradient(#f6b26b,#b45309)}.soif>div{background:linear-gradient(#7dd3fc,#0369a1)}
.survRow .bar.low{animation:radPulse 1s ease-in-out infinite}
.bar.ship>div{background:linear-gradient(#d6b07a,#7a4a1e)}.bar.ship.warn>div{background:linear-gradient(#fb923c,#b91c1c)}.bar.ship.hidden{display:none}
/* petit panneau de rotation des machines */
#machTurn{position:fixed;left:50%;transform:translateX(-50%);z-index:60;display:flex;align-items:center;gap:6px;padding:6px 8px 6px 12px;border-radius:12px;background:rgba(43,26,12,.9);border:1px solid #c9a24a;box-shadow:0 4px 14px rgba(0,0,0,.45);color:#fbe7b3;font:600 13px Fredoka,system-ui,sans-serif}
#machTurn.hidden{display:none}#machTurn.atTop{top:64px}#machTurn.atBottom{bottom:96px}
#machTurn .mtName{margin-right:4px;white-space:nowrap}
#machTurn button{min-width:34px;height:32px;border-radius:8px;border:1px solid #8a6a3a;background:#f3e3bd;color:#3a1e0a;font:700 17px system-ui,sans-serif;cursor:pointer}
#machTurn button:hover,#machTurn button:focus-visible{background:#fff2cc;outline:2px solid #ffd35c}
#machTurn button.ok{font:700 13px Fredoka,system-ui,sans-serif;padding:0 10px;background:#86d163;border-color:#3f7a2a;color:#173a0e}
#bar button canvas.barIcon{width:38px;height:38px;margin-top:-8px;margin-bottom:-4px;pointer-events:none}
/* chantier naval : image de chaque navire */
canvas.shipprev{width:130px;height:85px;border-radius:8px;border:2px solid #8a6a3a;flex:none;margin-right:6px;background:#9ccbe2}
canvas.shipprev.big{display:block;width:100%;max-width:420px;height:auto;margin:0 auto 8px}
/* oxygène sous l'eau */
.bar.o2>div{background:linear-gradient(#bff4ff,#2a9ac8)}.bar.o2.warn>div{background:linear-gradient(#fca5a5,#b91c1c);animation:radPulse .8s ease-in-out infinite}.bar.o2.hidden{display:none}
/* ---------- langue : sélecteur des écrans d'accueil ---------- */
html[lang=en] #newsBtn.new::after{content:'NEW'}
#langPick{position:absolute;top:12px;right:14px;z-index:6;display:flex;align-items:center;gap:3px;padding:4px 5px 4px 9px;border-radius:20px;border:1.5px solid #b8862f;background:linear-gradient(rgba(46,28,14,.92),rgba(24,14,7,.92));box-shadow:0 3px 10px rgba(0,0,0,.45),inset 0 0 0 1px rgba(255,220,140,.12)}
#langPick .lgglobe{width:16px;height:16px;margin-right:4px;border-radius:50%;border:1.5px solid #e9c877;background:linear-gradient(90deg,transparent 46%,#e9c877 46% 54%,transparent 54%),linear-gradient(transparent 46%,#e9c877 46% 54%,transparent 54%);box-shadow:inset 0 0 0 3px rgba(233,200,119,.18);flex:none}
#langPick button{font:600 13px Fredoka,system-ui,sans-serif;color:#d9c39a;background:none;border:1.5px solid transparent;border-radius:14px;padding:4px 11px;cursor:pointer;transition:color .15s,background .15s}
#langPick button:hover{color:#fff3cf;background:rgba(255,220,140,.1)}
#langPick button.on{color:#3a2208;background:linear-gradient(#fff0b4,#e9b949);border-color:#fff3c8;box-shadow:0 1px 0 #7a4e16;cursor:default}
#langPick button.on::before{content:'✓ ';font-weight:700}
#langPick button:focus-visible,.storytab:focus-visible,.sclose:focus-visible,.sgo:focus-visible{outline:2px solid #ffe08a;outline-offset:2px}
/* ---------- onglet de parchemin « L'histoire de Naxomia » ---------- */
.storytab{position:absolute;left:16px;bottom:18px;z-index:4;display:flex;align-items:center;gap:8px;padding:9px 16px 10px 11px;border:0;cursor:pointer;color:#4a2c10;font:700 14px Cinzel,Georgia,serif;letter-spacing:.02em;text-align:left;line-height:1.15;
 background:radial-gradient(ellipse at 22% 18%,rgba(255,250,224,.9),transparent 55%),radial-gradient(ellipse at 85% 90%,rgba(150,98,40,.35),transparent 60%),linear-gradient(100deg,#ecd49a,#f6e6ba 38%,#e6c98a 78%,#d3ad6a);
 clip-path:polygon(0 9%,4% 2%,11% 6%,19% 0,28% 5%,39% 1%,50% 6%,62% 2%,73% 6%,84% 1%,93% 5%,100% 0,98% 22%,100% 45%,97% 68%,100% 92%,94% 100%,84% 95%,72% 100%,60% 95%,47% 100%,35% 96%,23% 100%,12% 95%,3% 100%,1% 76%,3% 52%,0 30%);
 filter:drop-shadow(0 3px 5px rgba(0,0,0,.5));transform:rotate(-2deg);transition:transform .25s ease,filter .25s ease;overflow:hidden}
.storytab svg{width:26px;height:26px;flex:none}
.storytab::after{content:'';position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.55) 50%,transparent 65%);transform:translateX(-120%);pointer-events:none}
.storytab:hover{transform:rotate(-.6deg) translateY(-3px);filter:drop-shadow(0 6px 9px rgba(0,0,0,.55)) brightness(1.07)}
.storytab:hover::after{transform:translateX(120%);transition:transform .7s ease}
.storytab:active{transform:rotate(-1deg) translateY(0)}
#menuScreen.artmode .storytab{left:3.2%;top:83.5%;bottom:auto;width:17.6%;box-sizing:border-box;font-size:calc(1.12*var(--u));gap:calc(.6*var(--u));padding:calc(.8*var(--u)) calc(1*var(--u)) calc(.9*var(--u)) calc(.8*var(--u))}
#menuScreen.artmode .storytab svg{width:calc(2.3*var(--u));height:calc(2.3*var(--u))}
.artwrap .artsub{position:absolute;left:35%;top:12.7%;width:30%;height:4%;display:flex;align-items:center;justify-content:center;pointer-events:none;background:linear-gradient(90deg,transparent,#27405e 12%,#2b4868 50%,#27405e 88%,transparent)}
.artwrap .artsub span{font:700 calc(1.5*var(--u)) Cinzel,Georgia,serif;letter-spacing:.34em;color:#f3d78a;text-shadow:0 1px 2px #0a1420;white-space:nowrap}
/* ---------- le parchemin déroulé ---------- */
#storyBox{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;padding:14px;background:radial-gradient(ellipse at 50% 40%,rgba(30,18,8,.72),rgba(6,4,2,.88));animation:storyFade .25s ease both}
#storyBox.out{animation:storyFade .22s ease reverse both}
@keyframes storyFade{from{opacity:0}to{opacity:1}}
.sparch{position:relative;width:min(900px,100%);max-height:min(94vh,100%);display:flex;flex-direction:column;animation:storyRoll .5s cubic-bezier(.2,.8,.25,1) both;transform-origin:50% 0}
@keyframes storyRoll{from{clip-path:inset(0 0 86% 0);transform:translateY(8%)}to{clip-path:inset(-30px -30px -30px -30px);transform:none}}
.srod{position:relative;height:22px;flex:none;margin:0 -14px;border-radius:11px;background:linear-gradient(#8a5a2c,#c08a4a 22%,#7a4a22 55%,#4a2a12);box-shadow:0 3px 8px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,225,170,.4);z-index:2}
.srod i{position:absolute;top:-3px;width:18px;height:28px;border-radius:8px;background:linear-gradient(#f4d98a,#c9973e 45%,#7a531c);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 1px 3px rgba(0,0,0,.5)}
.srod i:first-child{left:-6px}.srod i:last-child{right:-6px}
.sbody{position:relative;flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:22px clamp(16px,5vw,52px) 26px;color:#3a2410;font:16px/1.55 Georgia,'Times New Roman',serif;outline:none;
 background:radial-gradient(ellipse at 12% 8%,rgba(255,251,230,.85),transparent 42%),radial-gradient(ellipse at 92% 96%,rgba(160,105,45,.28),transparent 45%),radial-gradient(ellipse at 88% 10%,rgba(170,115,50,.16),transparent 35%),radial-gradient(ellipse at 6% 92%,rgba(150,100,45,.2),transparent 40%),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .22 0 0 0 0 .08 0 0 0 .11 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E"),linear-gradient(#f5e6bd,#ecd6a2 55%,#e3c88e);
 box-shadow:inset 0 0 46px rgba(120,76,28,.38),inset 14px 0 18px -14px rgba(90,55,20,.5),inset -14px 0 18px -14px rgba(90,55,20,.5);scrollbar-color:#9a6a34 transparent;scrollbar-width:thin}
.sbody::-webkit-scrollbar{width:9px}.sbody::-webkit-scrollbar-thumb{background:#9a6a34;border-radius:5px;border:2px solid #ead3a0}
.sclose{position:absolute;top:34px;right:10px;z-index:3;width:38px;height:38px;border-radius:50%;border:2px solid #5a1410;background:radial-gradient(circle at 35% 30%,#d8483a,#8e1f18 70%);color:#ffe9c8;font:700 16px Fredoka,system-ui,sans-serif;cursor:pointer;box-shadow:0 2px 6px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.3);transition:transform .15s,filter .15s}
.sclose:hover{transform:scale(1.08) rotate(6deg);filter:brightness(1.12)}
.shead{text-align:center;margin-bottom:10px}
.shead .sorn{font-size:22px;color:#9a6a24;line-height:1}
.shead h2{margin:2px 0 0;font:400 clamp(26px,5vw,40px)/1.15 'Uncial Antiqua',Cinzel,Georgia,serif;color:#4a2408;text-shadow:0 1px 0 rgba(255,246,214,.9)}
.shead .ssub{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:4px;font:700 12px Cinzel,Georgia,serif;letter-spacing:.3em;text-transform:uppercase;color:#8a5a22}
.shead .ssub::before,.shead .ssub::after{content:'';height:1px;width:clamp(24px,9vw,90px);background:linear-gradient(90deg,transparent,#9a6a24)}
.shead .ssub::after{transform:scaleX(-1)}
.sintro p{margin:6px auto 18px;max-width:720px;font-size:17.5px;font-style:italic;text-align:center;color:#42280f}
.sintro p::first-letter{font:400 44px/0.9 'Uncial Antiqua',Cinzel,serif;font-style:normal;color:#8e1f18;padding-right:3px}
.sgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 26px}
.ssec{display:flex;gap:12px;align-items:flex-start;padding:12px 0 2px;border-top:1px solid rgba(122,78,30,.32)}
.ssec .sico{flex:none;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font-size:23px;background:radial-gradient(circle at 35% 30%,#fff6d8,#e2c27e 70%);border:2px solid #9a6a24;box-shadow:0 2px 4px rgba(70,40,10,.35),inset 0 0 0 2px rgba(255,255,255,.35)}
.ssec h3{margin:0 0 3px;font:700 17px/1.2 Cinzel,Georgia,serif;letter-spacing:.03em;color:#5a2c0a}
.ssec p{margin:0;font-size:15px;line-height:1.5}
.schips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.schip{font:600 12.5px Fredoka,system-ui,sans-serif;color:#4a2c10;background:rgba(255,248,222,.75);border:1px solid #b98d4a;border-radius:11px;padding:2px 9px}
.send{text-align:center;margin-top:20px;padding-top:16px;border-top:1px solid rgba(122,78,30,.32)}
.send p{margin:0 auto 14px;max-width:620px;font-size:17px;font-style:italic;color:#42280f}
.sgo{font:700 16px Cinzel,Georgia,serif;letter-spacing:.14em;text-transform:uppercase;color:#4a2a0c;padding:12px 30px;border-radius:10px;border:2px solid #fff0b8;background:linear-gradient(#fff3b8,#f0c45e 45%,#d0922e);box-shadow:0 0 0 2px #8a5a1e,0 4px 0 #6a3e12,0 8px 14px rgba(60,30,5,.35);cursor:pointer;transition:transform .15s,filter .15s}
.sgo:hover{transform:translateY(-2px);filter:brightness(1.07)}.sgo:active{transform:translateY(2px);box-shadow:0 0 0 2px #8a5a1e,0 2px 0 #6a3e12}
@media(max-width:700px){.sgrid{grid-template-columns:1fr;gap:6px}.sbody{font-size:15px}.sintro p{font-size:16px}.srod{margin:0 -6px}.sclose{right:4px;top:30px;width:34px;height:34px}#langPick{top:8px;right:8px}#langPick button{padding:4px 8px;font-size:12px}}
@media(prefers-reduced-motion:reduce){.sparch,#storyBox{animation:none}.storytab,.storytab::after{transition:none}}
/* ---------- menu Maison : la demeure dans un petit tableau ---------- */
.hhero{align-items:center;background:linear-gradient(135deg,#f6e7c0,#ecd6a2 55%,#e2c58a);border-color:#8a5a2e}
.hhero canvas{align-self:center;width:340px;max-width:46%;border-radius:12px;border:3px solid #7a4e24;box-shadow:inset 0 0 0 2px rgba(255,244,214,.7),0 0 0 2px #e9c877,0 6px 12px rgba(60,36,10,.35);filter:none;background:#dcecc8}
.hinfo{align-self:stretch;justify-content:center}
@media (max-width:620px){.hhero canvas{max-width:100%;width:100%}}