/* ═══════════════════════════════════════════════════════════
   МАРКИЗ ДЕ САД — RPG
   XVIII century parchment & ink engraving style
   ═══════════════════════════════════════════════════════════ */

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg:#0d0a07;
  --paper:#1a1510;--paper-light:#231e16;--paper-mid:#1e1912;--paper-warm:#2a2318;
  --gold:#c9a84c;--gold-dim:#8a6f2e;--gold-bright:#e0c060;--gold-faint:rgba(201,168,76,.12);
  --blood:#8b2020;--blood-light:#b33a3a;
  --lust:#a8326e;--lust-light:#d44a8a;
  --insane:#6a3db5;--insane-light:#9d6eff;
  --text:#d4c5a9;--text-dim:#8a7e6a;--text-faint:#5a5040;--ink:#f0e6cc;
  --seine:#1a2a38;
  --radius:4px;
  --font-display:'Playfair Display',Georgia,serif;
  --font-body:'Cormorant Garamond',Georgia,serif;
  --font-ui:'IM Fell English SC',serif;
  --header-h:48px;
  --sidebar-w:280px;
  --transition:all .3s ease;
}

html{font-size:16px;-webkit-text-size-adjust:100%}
body{
  background:var(--bg);color:var(--text);
  font-family:var(--font-body);
  height:100vh;height:100dvh;overflow:hidden;
  line-height:1.5;-webkit-font-smoothing:antialiased;
}

::-webkit-scrollbar{width:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--gold-dim);border-radius:3px}

/* ════════════════════════════════════════
   TOP BAR
   ════════════════════════════════════════ */
#top-bar{
  position:fixed;top:0;left:0;right:0;z-index:100;
  height:var(--header-h);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 .6rem;
  background:linear-gradient(180deg,rgba(26,21,16,.97),rgba(26,21,16,.92));
  backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(201,168,76,.2);
}
.top-left{display:flex;align-items:center;gap:.4rem;flex-shrink:0}
.game-logo{font-size:1.2rem;opacity:.7}
.game-title{
  font-family:var(--font-display);font-size:.9rem;font-weight:700;
  color:var(--gold);white-space:nowrap;letter-spacing:.5px;
}
@media(max-width:550px){.game-title{display:none}}

#stats-bar{
  display:flex;gap:.4rem;align-items:center;justify-content:center;
  flex:1;min-width:0;padding:0 .3rem;
  overflow-x:auto;-ms-overflow-style:none;scrollbar-width:none;
}
#stats-bar::-webkit-scrollbar{display:none}

.stat{
  display:flex;align-items:center;gap:2px;
  font-family:var(--font-ui);font-size:.6rem;
  color:var(--text-dim);white-space:nowrap;
  padding:.15rem .35rem;
  background:rgba(255,255,255,.03);border-radius:10px;
  transition:var(--transition);
}
.stat:hover{background:rgba(201,168,76,.1)}
.stat-icon{font-size:.8rem;line-height:1}
.stat-val{
  color:var(--gold);font-weight:700;
  font-family:var(--font-display);font-size:.8rem;
  min-width:1.2ch;text-align:center;
}
.stat-val.changed{animation:statPulse .4s ease}
@keyframes statPulse{
  0%{transform:scale(1)}50%{transform:scale(1.4);color:var(--gold-bright)}100%{transform:scale(1)}
}
.stat-label{display:none}
@media(min-width:900px){.stat-label{display:inline;margin-left:2px}}

.top-right{display:flex;align-items:center;gap:.3rem;flex-shrink:0}
#time-display{
  font-family:var(--font-ui);font-size:.65rem;
  color:var(--text-dim);white-space:nowrap;
  padding:.2rem .5rem;
  border:1px solid rgba(201,168,76,.15);border-radius:10px;
}
.btn-icon{
  background:none;border:none;color:var(--text-dim);
  font-size:1.1rem;cursor:pointer;
  width:34px;height:34px;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;transition:var(--transition);
}
.btn-icon:hover{background:rgba(201,168,76,.15);color:var(--gold)}
.btn-icon:active{transform:scale(.9)}

/* ════════════════════════════════════════
   LEFT SIDEBAR
   ════════════════════════════════════════ */
.sidebar{
  position:fixed;top:var(--header-h);left:0;bottom:0;
  width:var(--sidebar-w);z-index:90;
  display:flex;flex-direction:row;
  transform:translateX(0);
  transition:transform .35s cubic-bezier(.22,1,.36,1);
}
.sidebar.closed{transform:translateX(calc(-1 * var(--sidebar-w) + 40px))}

/* Tab strip on the right edge of sidebar */
.sidebar-tabs{
  display:flex;flex-direction:column;gap:2px;
  padding:6px 3px;
  background:linear-gradient(90deg,rgba(26,21,16,.95),rgba(26,21,16,.85));
  border-right:1px solid rgba(201,168,76,.15);
  z-index:2;
}
.sidebar-tab{
  width:34px;height:38px;
  background:none;border:none;
  font-size:1.1rem;cursor:pointer;
  border-radius:4px;
  display:flex;align-items:center;justify-content:center;
  transition:var(--transition);
  opacity:.5;
}
.sidebar-tab:hover{opacity:.8;background:rgba(201,168,76,.1)}
.sidebar-tab.active{opacity:1;background:rgba(201,168,76,.15);
  box-shadow:inset 2px 0 0 var(--gold)}

/* Body of sidebar */
.sidebar-body{
  flex:1;overflow:hidden;
  background:linear-gradient(180deg,rgba(26,21,16,.97),rgba(20,16,10,.97));
  backdrop-filter:blur(6px);
  border-right:1px solid rgba(201,168,76,.1);
  display:flex;flex-direction:column;
}
.sidebar-content{
  display:none;flex:1;overflow-y:auto;
  padding:.8rem;
}
.sidebar-content.active{display:flex;flex-direction:column}
.sidebar-title{
  font-family:var(--font-display);font-size:.95rem;
  color:var(--gold);margin-bottom:.6rem;
  padding-bottom:.4rem;
  border-bottom:1px solid var(--gold-faint);
}

/* Inventory in sidebar */
#inventory-content{display:flex;flex-wrap:wrap;gap:.4rem}
.inv-empty{
  color:var(--text-dim);font-style:italic;font-size:.85rem;
  text-align:center;padding:1.5rem .5rem;width:100%;
}
.inv-item{
  display:flex;align-items:center;gap:.3rem;
  background:var(--paper-light);border:1px solid rgba(201,168,76,.15);
  padding:.35rem .5rem;border-radius:6px;cursor:pointer;
  width:100%;transition:var(--transition);font-size:.85rem;
}
.inv-item:hover{border-color:var(--gold);background:var(--gold-faint)}
.inv-icon{font-size:1.2rem;flex-shrink:0}
.inv-name{color:var(--text);flex:1;line-height:1.2}
.inv-qty{
  font-size:.7rem;font-weight:700;color:var(--gold);
  background:var(--paper);padding:0 4px;border-radius:4px;
}

/* Journal entries */
.log-entry{
  padding:.4rem 0;border-bottom:1px solid rgba(255,255,255,.04);
  font-size:.82rem;color:var(--text);line-height:1.4;
}
.log-entry-time{font-family:var(--font-ui);font-size:.65rem;color:var(--text-dim)}

/* Quest entries */
.quest-entry{padding:.5rem 0;border-bottom:1px solid rgba(255,255,255,.04)}
.quest-name{color:var(--gold);font-family:var(--font-display);font-weight:700;font-size:.9rem}
.quest-desc{color:var(--text-dim);font-size:.8rem;font-style:italic;margin-top:.15rem}

/* Mobile: sidebar becomes bottom sheet or stays collapsed */
@media(max-width:700px){
  :root{--sidebar-w:260px}
}

/* ════════════════════════════════════════
   FULLSCREEN MAP
   ════════════════════════════════════════ */
#map-screen{
  position:fixed;
  top:var(--header-h);left:0;right:0;bottom:0;
  overflow:hidden;background:var(--bg);
}
#map-container{
  width:100%;height:100%;
  display:flex;align-items:center;justify-content:center;
}
#map-container svg{width:100%;height:100%}

#location-label{
  position:absolute;bottom:1.2rem;left:50%;transform:translateX(-50%);
  font-family:var(--font-display);font-size:1rem;
  color:var(--gold);
  padding:.4rem 1.2rem;
  background:rgba(26,21,16,.9);
  border:1px solid rgba(201,168,76,.25);border-radius:16px;
  backdrop-filter:blur(6px);
  white-space:nowrap;pointer-events:none;
  opacity:0;transition:opacity .3s;
}
#location-label.visible{opacity:1}

/* ════════════════════════════════════════
   OVERLAY — only for scene + item detail
   ════════════════════════════════════════ */
.overlay{
  position:fixed;inset:0;z-index:200;
  display:flex;align-items:flex-end;justify-content:center;
}
.overlay.hidden{pointer-events:none}
.overlay.hidden .overlay-backdrop{opacity:0}
.overlay.hidden .overlay-panel{transform:translateY(100%);opacity:0}

.overlay-backdrop{
  position:absolute;inset:0;
  background:rgba(8,6,4,.65);
  backdrop-filter:blur(3px);
  transition:opacity .3s ease;
}
.overlay-panel{
  position:relative;z-index:1;
  width:100%;max-width:600px;
  max-height:calc(100vh - var(--header-h) - 1rem);
  background:linear-gradient(180deg,var(--paper-warm) 0%,var(--paper) 100%);
  border-top:1px solid var(--gold-dim);
  border-radius:16px 16px 0 0;
  overflow-y:auto;padding:1.5rem;
  transition:transform .35s cubic-bezier(.22,1,.36,1), opacity .3s ease;
}
@media(min-width:700px){
  .overlay{align-items:center}
  .overlay-panel{
    border-radius:12px;border:1px solid var(--gold-dim);
    margin:1rem;max-height:calc(100vh - 4rem);
  }
}
.overlay-close{
  position:sticky;top:0;float:right;
  background:rgba(26,21,16,.8);border:1px solid var(--text-faint);
  color:var(--text-dim);font-size:1rem;
  width:32px;height:32px;border-radius:50%;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:var(--transition);z-index:5;
}
.overlay-close:hover{border-color:var(--gold);color:var(--gold)}

/* ════════════════════════════════════════
   SCENE PANEL (inside overlay)
   ════════════════════════════════════════ */
.scene-panel{padding:1.5rem 1.5rem 2rem}

.scene-portrait{
  display:flex;justify-content:center;margin-bottom:.8rem;
}
.scene-portrait svg{
  width:100px;height:133px;
  filter:drop-shadow(0 4px 12px rgba(0,0,0,.5));
}
.scene-art{text-align:center;font-size:2.5rem;margin-bottom:.5rem;opacity:.7}
.scene-title{
  font-family:var(--font-display);font-size:1.3rem;font-weight:700;
  color:var(--gold);margin-bottom:.7rem;text-align:center;
  border-bottom:1px solid var(--gold-faint);padding-bottom:.5rem;
}
.scene-text{
  font-size:1rem;color:var(--ink);margin-bottom:1rem;
  text-align:justify;line-height:1.65;
}
.scene-text p{margin-bottom:.5rem}
.scene-text em{color:var(--gold);font-style:italic}
.scene-text strong{color:var(--blood-light);font-weight:700}
.scene-text .lust{color:var(--lust-light);font-style:italic}

.scene-npcs{
  display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1rem;justify-content:center;
}
.scene-npc{
  display:flex;align-items:center;gap:.5rem;
  background:var(--paper-light);border:1px solid rgba(201,168,76,.2);
  padding:.4rem .7rem;border-radius:8px;cursor:pointer;
  transition:var(--transition);
}
.scene-npc:hover{border-color:var(--gold);background:var(--gold-faint)}
.scene-npc svg{width:28px;height:37px;flex-shrink:0}
.npc-info{display:flex;flex-direction:column}
.npc-name{color:var(--gold);font-weight:600;font-size:.85rem;line-height:1.2}
.npc-title{color:var(--text-dim);font-size:.7rem;font-family:var(--font-ui)}

.scene-actions{display:flex;flex-direction:column;gap:.45rem;margin-top:.5rem}
.action-btn{
  background:var(--paper);border:1px solid rgba(201,168,76,.25);
  color:var(--text);font-family:var(--font-body);font-size:.95rem;
  padding:.65rem .9rem;text-align:left;cursor:pointer;
  border-radius:8px;transition:var(--transition);line-height:1.4;
  position:relative;overflow:hidden;
}
.action-btn::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(201,168,76,.05),transparent);
  transform:translateX(-100%);transition:transform .4s;
}
.action-btn:hover::before{transform:translateX(100%)}
.action-btn:hover{
  background:var(--paper-light);border-color:var(--gold);color:var(--ink);
  padding-left:1.2rem;
}
.action-btn:active{transform:scale(.98)}
.action-btn.spicy{border-color:rgba(168,50,110,.4);color:var(--lust-light)}
.action-btn.spicy:hover{border-color:var(--lust-light);background:rgba(168,50,110,.08)}
.action-btn.insane{border-color:rgba(106,61,181,.4);color:var(--insane-light)}
.action-btn.insane:hover{border-color:var(--insane-light);background:rgba(106,61,181,.08)}
.action-btn.disabled{opacity:.35;cursor:not-allowed;transform:none!important}

/* ════════════════════════════════════════
   ITEM DETAIL (small centered popup)
   ════════════════════════════════════════ */
.item-panel{
  max-width:340px;text-align:center;padding:1.5rem;
  border-radius:12px;
}
.item-detail-icon{font-size:2.5rem;display:block;margin-bottom:.5rem}
.item-detail-name{
  font-family:var(--font-display);color:var(--gold);
  font-size:1.1rem;display:block;margin-bottom:.5rem;
}
.item-detail-desc{color:var(--text);font-size:.9rem;margin-bottom:.8rem;line-height:1.5}
.item-action-btn{
  background:var(--blood);border:1px solid var(--blood-light);color:var(--ink);
  font-family:var(--font-display);font-size:.85rem;
  padding:.45rem 1.2rem;border-radius:8px;cursor:pointer;
  transition:var(--transition);margin:.2rem;
}
.item-action-btn:hover{background:var(--blood-light)}
.item-action-btn.disabled{opacity:.4;cursor:not-allowed}

/* ════════════════════════════════════════
   TOAST
   ════════════════════════════════════════ */
.toast{
  position:fixed;top:calc(var(--header-h) + .5rem);
  left:50%;transform:translateX(-50%) translateY(-20px);
  background:var(--paper-warm);border:1px solid var(--gold);color:var(--gold);
  font-family:var(--font-ui);padding:.5rem 1.2rem;border-radius:8px;
  font-size:.8rem;opacity:0;transition:all .4s ease;
  z-index:300;pointer-events:none;
  box-shadow:0 4px 20px rgba(0,0,0,.5);
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ════════════════════════════════════════
   MAP SVG STYLES
   ════════════════════════════════════════ */
.map-svg text{
  font-family:'IM Fell English SC',serif;
  text-anchor:middle;dominant-baseline:central;
  pointer-events:none;user-select:none;
}
.map-district{transition:opacity .2s,filter .2s}
.map-district.unlocked{cursor:pointer}
.map-district.unlocked:hover{filter:brightness(1.3)}

/* ════════════════════════════════════════
   ANIMATIONS
   ════════════════════════════════════════ */
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.fade-in{animation:fadeIn .4s ease both}

/* ════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════ */
@media(max-width:480px){
  :root{--header-h:44px;--sidebar-w:240px}
  .stat{padding:.12rem .25rem;font-size:.55rem}
  .stat-val{font-size:.7rem}
  .overlay-panel{padding:1rem}
  .scene-title{font-size:1.1rem}
  .scene-text{font-size:.9rem}
  .action-btn{padding:.55rem .7rem;font-size:.85rem}
}

/* Time-of-day tinting */
body.time-morning{--sky-tint:rgba(255,200,100,.03)}
body.time-afternoon{--sky-tint:rgba(255,220,150,.04)}
body.time-evening{--sky-tint:rgba(200,100,50,.05)}
body.time-night{--sky-tint:rgba(30,40,80,.08)}