/* Silence, on range — styles du jeu. */
/* Layout : une colonne — barre d'état, scène isométrique pixelisée, mains + chariot + légende ; modales par-dessus. Monde unique (soirée bleu ardoise), un seul thème assumé. */
:root{
  --bg:#1c2628; --panel:#263336; --panel2:#30403f; --line:#425654;
  --ink:#f3ecdc; --muted:#a8b6b0; --wood:#e0a663; --glass:#9fd3e0;
  --bad:#ee7a63; --good:#86d6a6; --warn:#f0c55a;
  --sci:#3d7fd6; --let:#d9533f; --dro:#3aa76d;
  --scr:#eef2ef; --scr-ink:#1d2a2b; --scr-mut:#566865; --scr-line:#cfd9d5; --scr-acc:#2f6b55; --scr-ok:#23784b; --scr-bad:#b4412c;
  --f-display:"Pixelify Sans", ui-monospace, "Courier New", monospace;
  --f-body:"Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-px:"Silkscreen", ui-monospace, monospace;
  color-scheme:dark;
}
[hidden]{display:none!important}
html,body{height:100%}
body{
  background:var(--bg); color:var(--ink); font-family:var(--f-body); font-size:15px; line-height:1.45;
  padding-left:max(16px, env(safe-area-inset-left, 0px));
  padding-right:max(16px, env(safe-area-inset-right, 0px));
  padding-block:12px 24px;
}
.wrap{max-width:960px; margin:0 auto; display:flex; flex-direction:column; gap:10px}
.top{display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px}
.brand{font-family:var(--f-display); font-weight:700; font-size:1.25rem; letter-spacing:.02em; color:var(--wood); margin-right:auto}
.stats{display:flex; flex-wrap:wrap; gap:6px 16px; align-items:baseline}
.stat{display:flex; gap:6px; align-items:baseline}
.k{font-family:var(--f-px); font-size:.68rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted)}
.v{font-family:var(--f-display); font-size:1.1rem; font-variant-numeric:tabular-nums}
.clockbar{height:6px; background:var(--panel); border-radius:3px; overflow:hidden}
.clockbar i{display:block; height:100%; width:0; background:linear-gradient(90deg,var(--glass),var(--wood)); transition:width .3s linear}
.stage{position:relative; border-radius:8px; overflow:hidden; background:#22302f; border:1px solid var(--line)}
canvas{display:block; width:100%; height:auto; image-rendering:pixelated; image-rendering:crisp-edges; touch-action:manipulation; cursor:pointer}
.bottom{display:flex; flex-wrap:wrap; gap:10px 22px; align-items:center}
.group{display:flex; gap:8px; align-items:center}
.slots{display:flex; gap:4px}
.slot{width:16px; height:22px; border-radius:2px; border:2px solid var(--line); background:var(--panel)}
.legend{display:flex; gap:12px; flex-wrap:wrap; margin-left:auto}
.chip{display:flex; align-items:center; gap:6px; font-size:.85rem; color:var(--muted)}
.chip i{width:10px; height:14px; border-radius:1px; display:inline-block}
.tip{margin:0; min-height:1.5em; font-size:.92rem; color:var(--muted)}
.tip b{color:var(--ink); font-weight:700}
button{font:inherit; cursor:pointer}
button:focus-visible{outline:2px solid var(--wood); outline-offset:2px}
.ghost{font-family:var(--f-px); font-size:.7rem; letter-spacing:.06em; text-transform:uppercase; background:transparent; color:var(--ink); border:1px solid var(--line); border-radius:4px; padding:6px 10px}
.ghost:hover{background:var(--panel)}
.overlay{position:fixed; inset:0; background:rgba(14,20,21,.72); display:flex; align-items:center; justify-content:center; z-index:20;
  padding:max(16px, env(safe-area-inset-top,0px)) max(16px, env(safe-area-inset-right,0px)) max(16px, env(safe-area-inset-bottom,0px)) max(16px, env(safe-area-inset-left,0px))}
.card{background:var(--panel); border:2px solid var(--line); border-radius:10px; width:min(520px,100%); max-height:100%; overflow:auto; padding:20px; display:flex; flex-direction:column; gap:14px; box-shadow:0 10px 0 rgba(0,0,0,.25)}
.card h2{font-family:var(--f-display); font-weight:700; font-size:1.6rem; margin:0; color:var(--wood); text-wrap:balance}
.card p{margin:0}
.card ul{margin:0; padding-left:1.1em; display:flex; flex-direction:column; gap:6px}
.primary{font-family:var(--f-display); font-weight:700; font-size:1.1rem; background:var(--wood); color:#2a1d0f; border:0; border-radius:6px; padding:12px 16px; box-shadow:0 4px 0 #9c6c35}
.primary:active{transform:translateY(2px); box-shadow:0 2px 0 #9c6c35}
.grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px}
.cell{background:var(--panel2); border-radius:6px; padding:8px 10px; display:flex; flex-direction:column; gap:2px}
.cell .v{font-size:1.3rem}
.stars{font-family:var(--f-display); font-size:2rem; letter-spacing:.15em; color:var(--warn)}
.stars .off{color:var(--line)}
.shop{display:flex; flex-direction:column; gap:8px}
.item{display:flex; gap:10px; align-items:center; background:var(--panel2); border-radius:6px; padding:8px 10px}
.item .txt{flex:1; min-width:0; display:flex; flex-direction:column}
.item .txt b{font-family:var(--f-display); font-weight:500; font-size:1.02rem}
.item .txt span{font-size:.85rem; color:var(--muted)}
.buy{font-family:var(--f-display); background:transparent; color:var(--wood); border:2px solid var(--wood); border-radius:5px; padding:6px 10px; white-space:nowrap; font-variant-numeric:tabular-nums}
.buy:disabled{opacity:.4; cursor:not-allowed}
.buy.owned{border-color:var(--good); color:var(--good); opacity:1}
.row{display:flex; gap:10px; flex-wrap:wrap}
.row > *{flex:1}
/* comptoir : écran d'ordinateur (écran clair dans un boîtier sombre) */
.desk{background:#2b3437; border-radius:12px; padding:10px 10px 14px; box-shadow:0 6px 0 rgba(0,0,0,.25); position:relative}
.desk::after{content:""; position:absolute; left:50%; bottom:5px; width:28px; height:3px; margin-left:-14px; border-radius:2px; background:#4a5659}
.screen{background:var(--scr); color:var(--scr-ink); border-radius:5px; overflow:hidden; display:flex; flex-direction:column}
.sbar{display:flex; justify-content:space-between; gap:4px 10px; flex-wrap:wrap; align-items:baseline; background:var(--scr-acc); color:#eef6f2; padding:6px 10px; font-size:.82rem; font-variant-numeric:tabular-nums}
.sbar b{font-family:var(--f-px); font-weight:400; font-size:.68rem; letter-spacing:.08em}
.pat{height:4px; background:var(--scr-line)}
.pat i{display:block; height:100%; width:100%; background:var(--good)}
.sbody{padding:10px 12px; display:flex; flex-direction:column; gap:10px}
.idle{margin:0; color:var(--scr-mut)}
.who{display:flex; gap:10px; align-items:center}
.avatar{width:36px; height:36px; border-radius:4px; display:grid; place-items:center; font-family:var(--f-display); font-weight:700; color:#fff; text-shadow:0 1px 0 rgba(0,0,0,.35); flex:none}
.who b{display:block} .who span{font-size:.82rem; color:var(--scr-mut)}
.fields{display:grid; grid-template-columns:auto minmax(0,1fr); gap:5px 14px; margin:0; padding:8px 10px; background:#fff; border:1px solid var(--scr-line); border-radius:5px; font-size:.95rem}
.fields dt{color:var(--scr-mut)}
.fields dd{margin:0; font-weight:700; font-variant-numeric:tabular-nums; text-align:right}
.fields dd.done{color:var(--scr-ok)}
.doc{display:flex; gap:10px; align-items:center; font-size:.9rem; min-width:0}
.doc > div{min-width:0; display:flex; flex-direction:column; gap:2px}
.doc .k{color:var(--scr-mut)}
.sacts{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; padding:0 12px 10px}
.sbtn{font:inherit; font-size:.9rem; line-height:1.2; background:#fff; color:var(--scr-ink); border:1px solid var(--scr-line); border-bottom-width:3px; border-radius:5px; padding:9px 6px}
.sbtn:hover{border-color:var(--scr-acc)}
.sbtn:active{transform:translateY(1px)}
.sbtn.main{background:var(--scr-acc); color:#fff; border-color:#1f4c3c}
.smsg{margin:0; padding:0 12px 10px; min-height:1.4em; font-size:.88rem; color:var(--scr-mut)}
.smsg.bad{color:var(--scr-bad)} .smsg.good{color:var(--scr-ok)}
.bubble{margin:0; background:#fff7e3; border:1px solid #e6d4a6; border-radius:8px; padding:8px 11px; font-size:.95rem}
.sbox{display:flex; flex-wrap:wrap; align-items:center; gap:6px; background:#fff; border:2px solid var(--scr-acc); border-radius:6px; padding:6px 8px; min-height:40px; color:var(--scr-acc)}
.sbox .ph{color:var(--scr-mut); font-size:.9rem}
.tok{font:inherit; font-size:.88rem; background:var(--scr-acc); color:#fff; border:0; border-radius:12px; padding:3px 10px}
.sugg{display:flex; flex-wrap:wrap; gap:6px}
.sg{font:inherit; font-size:.88rem; background:transparent; color:var(--scr-ink); border:1px dashed #98aba6; border-radius:12px; padding:3px 10px}
.sg.flt{border-style:solid; background:#e4ebe8}
.sg.flt.on{background:var(--scr-ink); color:#fff; border-color:var(--scr-ink)}
.rcount{margin:0; font-size:.82rem; color:var(--scr-mut)}
.rcount b{color:var(--scr-ink)}
.res{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px}
.rc{width:100%; text-align:left; font:inherit; color:var(--scr-ink); background:#fff; border:2px solid var(--scr-line); border-radius:6px; padding:6px 8px; display:flex; gap:10px; align-items:center}
.rc.sel{border-color:var(--wood); background:#fffaf0}
.rc .info{min-width:0; display:flex; flex-direction:column; gap:1px}
.rc .t{font-weight:700; font-size:.92rem; line-height:1.25}
.rc .a{font-size:.8rem; color:var(--scr-mut)}
.cover{width:30px; height:44px; flex:none; border-radius:1px 4px 4px 1px; position:relative; box-shadow:inset 3px 0 0 rgba(0,0,0,.28), 0 1px 2px rgba(0,0,0,.2)}
.cover i{position:absolute; left:7px; right:5px; height:3px; background:rgba(255,255,255,.8)}
.tags{display:flex; flex-wrap:wrap; gap:4px; margin-top:3px}
.tag{font-size:.74rem; padding:1px 6px; border-radius:3px; background:#e4ebe8; color:var(--scr-ink); font-variant-numeric:tabular-nums; white-space:nowrap}
.tag.ok{background:#d4efdf; color:#1d6a43}
.tag.out{background:#f7dad3; color:#9a3526}
.tag.cote{color:#fff; font-family:var(--f-px); font-size:.62rem; align-self:center}
/* comptoir : planche de prêt */
.desk.wood{background:var(--panel); padding:10px; box-shadow:none; border:1px solid var(--line); display:flex; flex-direction:column; gap:8px}
.desk.wood::after{display:none}
.ctop{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.ctop .k{color:var(--wood)}
.ctop .cnt{font-size:.9rem; color:var(--muted)}
.ctop .pat{flex:1; min-width:60px; height:5px; border-radius:3px; background:var(--panel2)}
.surf{position:relative; height:172px; border-radius:6px; overflow:hidden; touch-action:none; user-select:none; -webkit-user-select:none;
  background:repeating-linear-gradient(90deg, rgba(0,0,0,.04) 0 2px, transparent 2px 23px), repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 9px), linear-gradient(#cfa36c,#b98a52);
  box-shadow:inset 0 -4px 0 rgba(0,0,0,.12)}
.pad{position:absolute; left:34%; width:32%; top:16%; height:68%; border-radius:8px; background:linear-gradient(#3a4448,#2a3235); box-shadow:inset 0 0 0 2px #4b575b, 0 3px 0 rgba(0,0,0,.25); transition:box-shadow .15s}
.pad .laser{position:absolute; left:10%; right:10%; top:50%; height:2px; margin-top:-1px; background:#ff5a4a; box-shadow:0 0 6px 1px rgba(255,90,74,.7); border-radius:1px}
.pad .plabel{position:absolute; left:0; right:0; bottom:6px; text-align:center; font-family:var(--f-px); font-size:.55rem; letter-spacing:.08em; color:#93a3a6; text-transform:uppercase}
.pad.reading .laser{animation:laser .18s linear infinite}
.pad.flash{box-shadow:inset 0 0 0 2px #86d6a6, 0 0 18px 2px rgba(134,214,166,.6), 0 3px 0 rgba(0,0,0,.25)}
.pad.flash .laser{background:#86d6a6; box-shadow:0 0 8px 2px rgba(134,214,166,.8)}
@keyframes laser{50%{opacity:.35}}
.rzone{position:absolute; right:3%; top:8px}
.rzone .avatar{width:26px; height:26px; font-size:.8rem; border-radius:50%; display:grid; place-items:center; color:#fff; font-family:var(--f-display); font-weight:700; text-shadow:0 1px 0 rgba(0,0,0,.35)}
.book{position:absolute; width:96px; height:62px; border-radius:2px 5px 5px 2px; background:var(--c); box-shadow:inset 7px 0 0 var(--cd), 0 3px 0 rgba(0,0,0,.18), 0 1px 0 rgba(255,255,255,.2) inset;
  transition:left .28s cubic-bezier(.2,.8,.3,1.2), top .28s cubic-bezier(.2,.8,.3,1.2), transform .2s; touch-action:none}
.book.top{cursor:grab}
.book.drag{transition:none; cursor:grabbing; box-shadow:inset 7px 0 0 var(--cd), 0 10px 14px rgba(0,0,0,.3)}
.book .bt{position:absolute; left:12px; right:6px; top:5px; color:#fff; font-size:.62rem; line-height:1.15; font-weight:700; max-height:2.35em; overflow:hidden; text-shadow:0 1px 0 rgba(0,0,0,.25)}
.book .bc{position:absolute; right:5px; bottom:5px; width:36px; height:16px; border-radius:1px; background:#fff repeating-linear-gradient(90deg,#1d2a2b 0 1px,transparent 1px 3px,#1d2a2b 3px 5px,transparent 5px 6px); background-clip:content-box; padding:2px 3px; box-sizing:border-box}
.book.scan .bc, .book.ok .bc{outline:2px solid #86d6a6}
.book.ok{filter:saturate(.85)}
/* comptoir : chariot de retours (on y fait tomber les livres rendus, vers le bas) */
.bac{position:absolute; left:3%; width:67%; bottom:0; height:36%; border-radius:6px 6px 0 0; background:linear-gradient(#7c8a91,#5e6c73); box-shadow:inset 0 3px 0 #9aa8ae, inset 0 -3px 0 rgba(0,0,0,.2); transition:box-shadow .15s, background-color .15s}
.bac .dos{position:absolute; left:8px; right:8px; top:7px; display:flex; gap:2px; align-items:flex-end; height:22px; overflow:hidden}
.bac .dos i{display:block; width:7px; height:20px; border-radius:1px; box-shadow:inset 0 -2px 0 rgba(0,0,0,.25); flex:none}
.bac .dos i:last-child{animation:tombe .22s cubic-bezier(.2,1.6,.4,1)}
.bac .plabel{position:absolute; left:0; right:0; bottom:5px; text-align:center; font-family:var(--f-px); font-size:.55rem; letter-spacing:.08em; color:#dfe6e8; text-transform:uppercase}
.bac.vise{box-shadow:inset 0 3px 0 #e8f3f0, inset 0 0 0 2px #e8f3f0, 0 0 14px 2px rgba(232,243,240,.35)}
.bac.plein{background:linear-gradient(#9a6a60,#7a4f47)}
.book.tombe{opacity:0; pointer-events:none; transition:left .2s cubic-bezier(.5,0,1,1), top .2s cubic-bezier(.5,0,1,1), transform .2s, opacity .12s .1s}
@keyframes tombe{from{transform:translateY(-8px)}}
.manques{margin:0; color:var(--muted); font-size:.92rem}
.cmsg{margin:0; min-height:1.4em; font-size:.9rem; color:var(--muted)}
.cmsg.bad{color:var(--bad)} .cmsg.good{color:var(--good)}
@media (prefers-reduced-motion:reduce){ .book, .book.tombe{transition:none} .pad.reading .laser{animation:none} .bac .dos i:last-child{animation:none} }
@media (max-width:520px){
  .legend{margin-left:0}
  .brand{font-size:1.1rem}
}
@media (prefers-reduced-motion:reduce){ .clockbar i{transition:none} }
/* zones sûres des téléphones à encoche */
:root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}body{margin:0}