/* PixelShelf : feuille de style unique (thème bois et parchemin, fonds de bibliothèque, cartes, menus) */
:root{--bg:#f1e6cf;--fg:#2b1d10;--mut:#7a6548;--pan:#faf2e0;--line:#d4bf94;--ac:#8b4a2b;--cy:#8a5a14;
box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#1c130c;--fg:#f1e3c8;--mut:#b8a07c;--pan:#2a1c11;--line:#4a3320;--cy:#e0b25a}}
:root[data-theme="dark"]{--bg:#1c130c;--fg:#f1e3c8;--mut:#b8a07c;--pan:#2a1c11;--line:#4a3320;--cy:#e0b25a}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font:400 16px/1.5 Outfit,system-ui,sans-serif;min-height:100vh}
main{max-width:1000px;margin:0 auto;padding:14px}
h1,h2,h3{font-family:Fraunces,Georgia,serif;margin:0 0 8px}
h1{font-size:1.8rem}
button,select,input{font:inherit;color:var(--fg)}
button{cursor:pointer;border:1px solid var(--line);background:var(--pan);border-radius:10px;padding:8px 14px}
button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--cy);outline-offset:2px}
button.pri{background:var(--ac);border-color:var(--ac);color:#fff;font-weight:600}
button.on{background:var(--fg);color:var(--bg)}
.top{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px}
.bar{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.mut{color:var(--mut)}
.sm{font-size:.85rem}
.room{border-radius:14px;padding:14px;min-height:60vh;display:flex;flex-direction:column;gap:20px;
background:repeating-linear-gradient(90deg,#fff1 0 2px,transparent 2px 44px),linear-gradient(160deg,var(--a),var(--b));box-shadow:inset 0 0 40px #0006}
.rn{background:#0004;border:1px solid #fff3;border-radius:8px;color:#fff;padding:3px 10px;width:min(240px,100%);margin-bottom:6px;font-size:.85rem}
.rn::placeholder{color:#fff8}
.plank{display:flex;align-items:flex-end;gap:3px;min-height:140px;padding:0 8px;overflow-x:auto;background:#0003;border-bottom:10px solid #3b2412;border-radius:4px 4px 0 0}
.sp{flex:none;width:36px;border:0;border-radius:3px 3px 0 0;color:#fff;writing-mode:vertical-rl;padding:8px 0;font-size:.72rem;font-weight:600;box-shadow:-2px 0 6px #0008;transition:transform .15s;background-size:cover;background-position:center;overflow:hidden;text-shadow:0 1px 3px #000}
.sp:hover{transform:translateY(-8px)}
.ov{position:fixed;inset:0;background:#000c;display:grid;place-items:center;z-index:9;padding:16px;overflow:auto}
.dt{background:var(--pan);border:1px solid var(--line);border-radius:16px;padding:20px;width:min(420px,100%);max-height:92vh;overflow:auto}
.dt.w{width:min(720px,100%)}
.col{display:flex;flex-direction:column;gap:8px;margin:12px 0}
.step{display:flex;gap:14px;align-items:center;margin:12px 0}
.step b{font-size:1.6rem;min-width:2ch;text-align:center}
.fm label{display:block;font-size:.85rem;margin-top:10px}
.fm input:not([type=checkbox]),.fm select{width:100%;padding:8px;border:1px solid var(--line);border-radius:8px;background:var(--bg)}
.fm .ck{display:flex;gap:8px;align-items:center}
.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.act{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}
.fams{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;margin-top:10px}
.fam{text-align:left;color:#fff;border:0;padding:14px;background:linear-gradient(160deg,var(--a),var(--b))}
.fam b{display:block;font-family:Fraunces,serif}
.fam small{opacity:.85;line-height:1.3;display:block}
.cover{width:140px;aspect-ratio:2/3;object-fit:cover;border-radius:6px;float:left;margin:0 14px 8px 0;box-shadow:0 4px 12px #0006}
.toast{position:fixed;bottom:calc(16px + env(safe-area-inset-bottom,0px));left:50%;transform:translateX(-50%);background:var(--fg);color:var(--bg);padding:10px 18px;border-radius:99px;z-index:20;max-width:90%;text-align:center}
a{color:var(--cy)}
.bg-lit-cla{--bgi:url("../img/backgrounds/lit-cla.webp")}
.bg-lit-dark{--bgi:url("../img/backgrounds/lit-dark.webp")}
.bg-lit-light{--bgi:url("../img/backgrounds/lit-light.webp")}
.bg-lit-rom{--bgi:url("../img/backgrounds/lit-rom.webp")}
.bg-lit-vin{--bgi:url("../img/backgrounds/lit-vin.webp")}
.wrap{overflow-x:auto;border-radius:14px}
.room{position:relative;display:block;padding:0;min-height:0;min-width:900px;aspect-ratio:3/2;container-type:inline-size;gap:0;border-radius:0;box-shadow:none;background:var(--bgi,linear-gradient(160deg,var(--a),var(--b))) center/100% 100%}
.cp{position:absolute;display:flex;align-items:flex-end;gap:1px;padding:0 .3cqw;cursor:pointer;border-radius:3px}
.cp:hover,.cp:focus-visible{background:#ffffff14;outline:1px solid #fff6}
.room.nb .cp{border-bottom:.8cqw solid #3b2412;background:#0003}
.nm{position:absolute;left:4px;top:2px;font-size:max(8px,.8cqw);color:#fff;text-shadow:0 1px 3px #000;pointer-events:none}
.cp .sp{flex:0 1 1.5cqw;min-width:4px;max-width:none;width:auto;font-size:max(7px,.8cqw);padding:.4cqw 0;overflow:hidden}
.sps{display:flex;gap:2px;align-items:flex-end;height:130px;overflow-x:auto;padding:6px 6px 0;margin:8px 0;background:#0003;border-bottom:8px solid #3b2412;border-radius:6px 6px 0 0}
.sps .sp{width:34px;flex:none}
.fam{background:var(--bgi,linear-gradient(160deg,var(--a),var(--b)));background-size:cover;background-position:center;text-shadow:0 1px 4px #000}
.fam[class*=" bg-"]{min-height:120px;display:flex;align-items:flex-end}
.bg-ima-s0{--bgi:url("../img/backgrounds/ima-s0.webp")}
.bg-ima-s1{--bgi:url("../img/backgrounds/ima-s1.webp")}
.bg-ima-s2{--bgi:url("../img/backgrounds/ima-s2.webp")}
.bg-ima-s3{--bgi:url("../img/backgrounds/ima-s3.webp")}
fieldset{border:1px solid var(--line);border-radius:10px;margin:14px 0;padding:6px 12px 12px;min-width:0}
legend{font-family:Fraunces,serif;font-weight:700;color:var(--cy);padding:0 6px}
.fm textarea{width:100%;padding:8px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--fg);font:inherit;min-height:56px;resize:vertical}
.fm input[type=radio]{width:auto}
.cg{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:2px 10px}
.cg label,.rd label{display:flex;gap:6px;align-items:center;margin:2px 0}
.rd{display:flex;flex-wrap:wrap;gap:2px 14px}
.fm h4{margin:12px 0 2px;font-size:.9rem;color:var(--cy)}
.crop{position:relative;display:inline-block;max-width:100%;overflow:hidden;line-height:0;margin:8px 0;border:1px dashed var(--cy);background:repeating-conic-gradient(#8884 0 25%,transparent 0 50%) 0 0/16px 16px}
.crop canvas{display:block}
.box{position:absolute;box-shadow:0 0 0 999px #0008;outline:2px solid var(--cy);cursor:move;touch-action:none}
.hd{position:absolute;right:2px;bottom:2px;width:18px;height:18px;background:var(--cy);border-radius:50%;cursor:nwse-resize;touch-action:none}
body{overflow:hidden}
.stage{position:fixed;inset:0;display:flex;overflow:auto;background:#140d07}
.stage .room{margin:auto;flex:none;width:max(min(100vw,150vh),900px)}
.fab{position:fixed;top:calc(10px + env(safe-area-inset-top,0px));z-index:6;width:44px;height:44px;padding:0;border-radius:50%;font-size:1.2rem;background:#000a;color:#fff;border:1px solid #fff4;backdrop-filter:blur(6px)}
.fab.l{left:12px}
.fab.r{right:12px}
.bd{position:fixed;inset:0;z-index:7;background:#0006}
.dr{position:fixed;top:0;bottom:0;z-index:8;width:min(320px,86vw);background:var(--pan);color:var(--fg);padding:calc(14px + env(safe-area-inset-top,0px)) 16px calc(14px + env(safe-area-inset-bottom,0px));overflow:auto;box-shadow:0 0 30px #0008;visibility:hidden;transition:transform .25s,visibility .25s}
.dr.l{left:0;transform:translateX(-105%)}
.dr.r{right:0;transform:translateX(105%)}
.dr.open{visibility:visible;transform:none}
.dh{display:flex;justify-content:space-between;align-items:center;gap:8px}
.dr .col button{text-align:left}
.dr button small{display:block;opacity:.75}
.dng{color:#e5484d;border-color:#e5484d}
.dng2{background:#e5484d!important;border-color:#e5484d!important}
.tip{position:fixed;bottom:calc(14px + env(safe-area-inset-bottom,0px));left:50%;transform:translateX(-50%);background:#000b;color:#fff;padding:8px 16px;border-radius:99px;z-index:5;font-size:.9rem;max-width:90%;text-align:center}
@media (prefers-reduced-motion:reduce){.dr{transition:none}}
*,*::before,*::after{font-family:"Snell Roundhand","Petit Formal Script",Arial,Helvetica,sans-serif!important}
body{font-size:18px!important}
.sp{font-family:Arial,Helvetica,sans-serif!important;font-size:max(7px,.8cqw)}
body{background:radial-gradient(ellipse at 30% 15%,#f8eed8,#efe2c4 55%,#e0cca2)!important;background-attachment:fixed}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) body{background:repeating-linear-gradient(90deg,#0000001a 0 2px,#0000 2px 11px),linear-gradient(180deg,#2c1d11,#190f08)!important;background-attachment:fixed}}
:root[data-theme="dark"] body{background:repeating-linear-gradient(90deg,#0000001a 0 2px,#0000 2px 11px),linear-gradient(180deg,#2c1d11,#190f08)!important}
.nm{background:#0005;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);padding:1px 8px;border-radius:8px}
.sps .sp.sel{outline:2px solid var(--cy);transform:translateY(-4px)}
.mv{display:flex;gap:6px;margin:4px 0}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chips span{background:var(--bg);border:1px solid var(--line);border-radius:99px;padding:1px 10px;font-size:.85rem}
.res,.qt{white-space:pre-line}
details{border:1px solid var(--line);border-radius:10px;padding:6px 12px;margin:10px 0}
summary{cursor:pointer;font-weight:600}
.qt{margin:14px 0 4px;padding:10px 14px;border-left:4px solid var(--cy);background:var(--bg);border-radius:0 10px 10px 0;font-style:italic}
.dt h4{margin:12px 0 4px;font-size:.9rem;color:var(--cy)}
.bg-myt-s0{--bgi:url("../img/backgrounds/myt-s0.webp")}
.bg-myt-s1{--bgi:url("../img/backgrounds/myt-s1.webp")}
.bg-myt-s2{--bgi:url("../img/backgrounds/myt-s2.webp")}
.bg-myt-s3{--bgi:url("../img/backgrounds/myt-s3.webp")}
.bg-geek-s0{--bgi:url("../img/backgrounds/geek-s0.webp")}
.bg-geek-s1{--bgi:url("../img/backgrounds/geek-s1.webp")}
.bg-geek-s2{--bgi:url("../img/backgrounds/geek-s2.webp")}
.bg-geek-s3{--bgi:url("../img/backgrounds/geek-s3.webp")}
.bg-geek-s4{--bgi:url("../img/backgrounds/geek-s4.webp")}
.bg-myt-s4{--bgi:url("../img/backgrounds/myt-s4.webp")}
.bg-myt-s5{--bgi:url("../img/backgrounds/myt-s5.webp")}
.bg-nat-s0{--bgi:url("../img/backgrounds/nat-s0.webp")}
.dr.r{width:min(420px,94vw)}
.bg-nat-s3{--bgi:url("../img/backgrounds/nat-s3.webp")}
.bg-nat-s1{--bgi:url("../img/backgrounds/nat-s1.webp")}
.bg-nat-s2{--bgi:url("../img/backgrounds/nat-s2.webp")}
.bg-som-s0{--bgi:url("../img/backgrounds/som-s0.webp")}
.bg-som-s1{--bgi:url("../img/backgrounds/som-s1.webp")}
.bg-som-s2{--bgi:url("../img/backgrounds/som-s2.webp")}

/* Fonds : Fantaisie & douceur et Occultisme */
.bg-fan-s0{--bgi:url("../img/backgrounds/fan-s0.webp")}
.bg-fan-s1{--bgi:url("../img/backgrounds/fan-s1.webp")}
.bg-fan-s2{--bgi:url("../img/backgrounds/fan-s2.webp")}
.bg-fan-s3{--bgi:url("../img/backgrounds/fan-s3.webp")}
.bg-som-s3{--bgi:url("../img/backgrounds/som-s3.webp")}

/* Fonds : Design & décoration */
.bg-des-s0{--bgi:url("../img/backgrounds/des-s0.webp")}
.bg-des-s1{--bgi:url("../img/backgrounds/des-s1.webp")}
.bg-des-s2{--bgi:url("../img/backgrounds/des-s2.webp")}