/* ---------- Page reset ---------- */
html, body {
  height: 100%;
  margin: 0;
  overflow: hidden; /* no scrollbar */
  font-family: "IM Fell English", serif;
  cursor:url("/Asylum/Assets/Penelope-cursor.png") 6 24, auto;
}
.penelope-room{
  position: fixed;
  inset: 0;
  /* use url("…") and put sizing/position after a slash */
  background: url("/Asylum/Assets/penelope-room.png") center / 100% 100% no-repeat;
  z-index: 0;
}

/* ---------- Draggable sprite ---------- */
.penelope-sprite {
  position: absolute;
  bottom: 0;         /* start at floor */
  left: 10%;
  height: 80%;
  user-select: none;
  -webkit-user-drag: none;
  cursor: grab;
  z-index: 10;       /* sits above hotspots */
  touch-action: none; /* lets our JS receive pointermove on touch */

}
.penelope-sprite.dragging { cursor: grabbing; }

/* ---------- Dialogue modal ---------- */
.dlg {
  position: fixed; inset: 0;
  display: none;                 /* toggled via [aria-hidden] */
  place-items: center;
  background: radial-gradient(120% 120% at 50% 50%, rgba(0,0,0,.05), rgba(0,0,0,.55));
  z-index: 30;
}
.dlg[aria-hidden="false"] { display: grid; }

.dlg-paper {
  position: relative;
  width: min(720px, 92vw);
  padding: 18px 20px 16px;
  color: #2b2b2b;
  background:
    linear-gradient(rgba(255,255,255,.85), rgba(255,255,255,.85)),
    url('https://www.shutterstock.com/image-vector/seamless-pattern-thin-bow-knots-600nw-2562784749.jpg');
  background-repeat: repeat;
  background-size: 260px auto;
  border: 2px solid #c9b89f;
  box-shadow: 8px 10px 0 rgba(0,0,0,.45);
  transform: rotate(-.6deg);
}
.dlg-paper::before,
.dlg-paper::after {
  content: "";
  position: absolute; width: 70px; height: 14px;
  background: linear-gradient(#f9f3c8, #e8dfa2);
  opacity: .9; filter: drop-shadow(0 1px 0 rgba(0,0,0,.25));
}
.dlg-paper::before { top: -12px; left: 14px; transform: rotate(-4deg); }
.dlg-paper::after  { bottom: -12px; right: 12px; transform: rotate(6deg); }

.dlg-close {
  position: absolute; top: 8px; right: 10px;
  border: 0; background: transparent; font-size: 18px; cursor: pointer;
}
.dlg-line {
  font-family: "IM Fell English", "Times New Roman", serif;
  font-size: clamp(18px, 2.4vw, 22px);
  line-height: 1.45;
  margin: 6px 4px 12px;
}
.dlg-choices { display: grid; gap: 10px; }
.dlg-choices .choice {
  padding: .55rem .85rem;
  background: #fffdf6;
  border: 2px solid #cbbca1;
  box-shadow: 3px 3px 0 rgba(0,0,0,.35);
  transform: rotate(-.4deg);
  font-family: "IM Fell English", serif;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
}
.dlg-choices .choice:hover {
  transform: translate(-2px,-2px) rotate(-.4deg);
  box-shadow: 5px 5px 0 rgba(0,0,0,.45);
}

/* ---------- Drawer hotspot (clickable area on the dresser) ---------- */
.drawer-hotspot {
  position: absolute;

  /* Tweak these 4 numbers so it sits over your drawer */
  left: 21vw;          /* <- adjust */
  bottom: 45vh;        /* <- adjust */
  width: 24vw;         /* <- adjust */
  height: 7vh;         /* <- adjust */

  /* make invisible but clickable */
  background: transparent;
  border: 0;
  cursor: pointer;
  z-index: 5;          /* below sprite so it won't block dragging if overlapping */
}
.drawer-hotspot:focus-visible {
  outline: 2px dashed rgba(255, 200, 220, .8);
  outline-offset: 2px;
}

/* ---------- Drawer modal ---------- */
.drawer-modal {
  position: fixed; inset: 0;
  display: none;                 /* toggled via [aria-hidden] */
  place-items: center;
  background: radial-gradient(120% 120% at 50% 50%, rgba(0,0,0,.15), rgba(0,0,0,.65));
  z-index: 40;
}
.drawer-modal[aria-hidden="false"] { display: grid; }

.drawer-stage {
  position: relative;
  width: min(900px, 94vw);
  aspect-ratio: 16 / 9;
  background:
    linear-gradient(rgba(255,255,255,.06), rgba(255,255,255,.06)),
  url("/Asylum/Assets/Penelope-drawer.png")
      center/cover no-repeat;
  border: 2px solid #c9b89f;
  box-shadow: 10px 12px 0 rgba(0,0,0,.45);
  transform: rotate(-.4deg);
}

.drawer-close {
  position: absolute; top: 8px; right: 10px;
  border: 0; background: transparent; font-size: 20px; color: #2b2b2b;
  cursor: pointer;
  filter: drop-shadow(0 1px 0 #fff);
}

/* ---------- Clickable items inside the drawer ---------- */
.drawer-item {
  position: absolute;  /* important: positions relative to .drawer-stage */
  cursor: pointer;
  filter: drop-shadow(0 4px 0 rgba(0,0,0,.35));
  transition: transform .15s ease, filter .15s ease, opacity .2s ease;
  z-index: 1;
}
.drawer-item:hover {
  transform: translateY(-2px) rotate(-1deg);
  filter: drop-shadow(0 6px 0 rgba(0,0,0,.45));
}

/* Position the items (adjust for your art) */
.drawer-item.heart { left: 26%; bottom: 10%; width: 16%; }
.drawer-item.diary { right: 18%; bottom: 20%; width: 22%; }

/* Make the heart image fill its wrapper width */
.drawer-item.heart img { width: 100%; display: block; }

/* Tooltip for the heart (hidden by default) */
.drawer-item.heart .tooltip {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.85);
  color: #ffdddd;
  font-size: 14px;
  padding: 4px 8px;
  border-radius: 4px;
  white-space: nowrap;
  pointer-events: none;

  visibility: hidden;
  opacity: 0;
  transition: opacity .2s ease;
}
.drawer-item.heart:hover .tooltip {
  visibility: visible;
  opacity: 1;
}

/* ---------- Diary reader modal ---------- */
.diary-modal {
  position: fixed; inset: 0;
  display: none;
  place-items: center;
  background: radial-gradient(120% 120% at 50% 50%, rgba(0,0,0,.1), rgba(0,0,0,.6));
  z-index: 50;
}
.diary-modal[aria-hidden="false"] { display: grid; }

.diary-paper {
  position: relative;
  width: min(760px, 94vw);
  padding: 20px 18px 16px;
  color: #2b2b2b;
  background:
    linear-gradient(rgba(255,255,255,.88), rgba(255,255,255,.88)),
    url('https://www.shutterstock.com/image-vector/seamless-pattern-thin-bow-knots-600nw-2562784749.jpg');
  background-size: 260px auto;
  border: 2px solid #c9b89f;
  box-shadow: 10px 12px 0 rgba(0,0,0,.45);
  transform: rotate(-.6deg);
}

.diary-close {
  position: absolute; top: 8px; right: 10px;
  border: 0; background: transparent; font-size: 18px; cursor: pointer;
}
.diary-page {
  font-family: "IM Fell English","Times New Roman",serif;
  font-size: clamp(18px, 2.2vw, 22px);
  line-height: 1.5;
  white-space: pre-line;     /* keep line breaks */
  min-height: 240px;
}
.diary-nav { display: flex; gap: 10px; justify-content: flex-end; }
.paper-btn {
  padding: .55rem .9rem;
  background: #fffdf6;
  border: 2px solid #cbbca1;
  box-shadow: 3px 3px 0 rgba(0,0,0,.35);
  transform: rotate(-.4deg);
  cursor: pointer;
  font-family: "IM Fell English", serif;
  transition: transform .15s ease, box-shadow .15s ease;
}
.paper-btn:hover {
  transform: translate(-2px,-2px) rotate(-.4deg);
  box-shadow: 5px 5px 0 rgba(0,0,0,.45);
}

/* ---------- Helpful focus styles ---------- */
button:focus-visible, .paper-btn:focus-visible, .dlg-close:focus-visible,
.drawer-close:focus-visible, .diary-close:focus-visible {
  outline: 2px dashed rgba(255,150,200,.9);
  outline-offset: 3px;
}
/* === Inventory dock === */
.inventory{
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 60;
  display: grid;
  gap: 10px;
  justify-items: end;
  pointer-events: none;              /* so it never blocks dragging unless inside */
}
.inventory * { pointer-events: auto; }  /* re-enable for children */

.inv-toggle{
  font-family: "IM Fell English", serif;
  font-size: 14px;
  padding: .45rem .7rem;
  background:#fffdf6;
  border:2px solid #cbbca1;
  box-shadow:3px 3px 0 rgba(0,0,0,.35);
  transform: rotate(-.6deg);
  cursor:pointer;
}

.inv-grid{
  width: auto;                 /* let slots define size */
  grid-template-columns: repeat(3, 88px);
  grid-auto-rows: 88px;        /* square slots */
  gap: 8px;
  padding: 10px;
  background:
    linear-gradient(rgba(255,255,255,.86), rgba(255,255,255,.86)),
    url('https://www.shutterstock.com/image-vector/seamless-pattern-thin-bow-knots-600nw-2562784749.jpg');
  background-size: 240px auto;
  border: 2px solid #c9b89f;
  box-shadow: 8px 10px 0 rgba(0,0,0,.45);
  transform: rotate(-.6deg);
}

.inventory.collapsed .inv-grid{ display:none; }
.inventory.collapsed .inv-toggle{ transform: rotate(-.6deg) translateY(0); }

.inv-slot{
  width: 88px;
  height: 88px;
  background:#fffef9;
  border:2px dashed #cbbca1;
  display:grid;
  place-items:center;
  position:relative;
}

/* The item wrapper should have a real box to constrain the icon */
.inv-item{
  width: 86%;
  height: 86%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  filter: drop-shadow(0 3px 0 rgba(0,0,0,.25));
  transition: transform .12s ease;
}
.inv-item:hover{ transform: translateY(-2px) rotate(-.4deg); }

/* Make the icon fit inside the wrapper box */
.inv-item img{
  width: 100%;
  height: 100%;
  object-fit: contain;   /* keeps proportions */
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}

/* small label that appears on hover */
.inv-item .inv-label{
  position:absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,.82);
  color:#ffd9e4;
  font-size: 12px;
  padding: 3px 6px;
  border-radius: 4px;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity .15s ease;
}
.inv-item:hover .inv-label{ opacity:1; visibility:visible; }
#backToHallway {
  position: absolute;
  top: 20px;
  right: 20px;
  padding: 10px 16px;
  font-family: "Garamond", serif;
  font-size: 16px;
  background: #fff8f9;
  border: 2px solid #d9b6d8;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}
#backToHallway:hover {
  background: #fdd;

  transform: translateY(-2px);
}