/* ============================================================
   MANUAL LAYER — additive over style.css (never edit style.css)
   Game-manual page furniture + wear & tear for the artbydaelok hub.
   Placeholder wear is procedural CSS; Aaron's print-distress-rescan
   textures replace the .stain-* / .tape / .crease elements later.
   ============================================================ */

/* ---- scanned-sheet sections ---- */
.sheet {
  position: relative;
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 38px 38px 52px;
  overflow: hidden;
}
.sheet + .sheet { margin-top: 28px; }
.tilt-a { transform: rotate(-0.35deg); }
.tilt-b { transform: rotate(0.3deg); }

.page-no {
  position: absolute; bottom: 14px; right: 18px;
  font: 500 11px/1 "JetBrains Mono", monospace;
  letter-spacing: .12em; color: var(--muted);
}

/* ---- manual furniture ---- */
.banner {
  display: inline-block; position: relative;
  border: 1.5px solid var(--fg);
  background: var(--card-bg);
  padding: 10px 26px;
  font-weight: 600; font-size: 20px;
  letter-spacing: .16em; text-transform: uppercase;
  margin-bottom: 26px;
}
.banner::before, .banner::after {
  content: ""; position: absolute; top: 7px; bottom: 7px; width: 10px;
  border: 1.5px solid var(--fg);
}
.banner::before { left: -11px; border-right: none; transform: skewY(-8deg); }
.banner::after  { right: -11px; border-left: none; transform: skewY(8deg); }

.fig {
  font: 600 10px/1 "JetBrains Mono", monospace;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 8px;
}

/* ---- item entries (the Treasures & Tools table) ---- */
.item-row {
  display: grid; grid-template-columns: 96px 1fr; gap: 20px;
  padding: 22px 0; border-bottom: 1px solid var(--line);
  align-items: start; position: relative;
}
.item-row:last-child { border-bottom: none; }
.item-icon {
  width: 96px; aspect-ratio: 1;
  border: 1.5px solid var(--fg); border-radius: 8px;
  background: #ffffff;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; text-align: center;
  font: 500 9.5px/1.5 "JetBrains Mono", monospace; color: var(--muted);
  padding: 6px;
}
.item-icon.dashed { border: 1.5px dashed var(--muted); background: transparent; }
.item-name { font-size: 22px; font-weight: 600; margin: 0 0 4px; }
.item-body p { margin: 4px 0; }
.item-spec {
  font: 500 11px/1.6 "JetBrains Mono", monospace;
  letter-spacing: .06em; color: var(--muted); margin-top: 8px;
  overflow-wrap: anywhere;
}
.item-cta { margin-top: 12px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* untranslated print (the Tunic device): real text under it for a11y */
.runes {
  color: rgba(22,22,26,.68);
  letter-spacing: .18em; word-spacing: .5em;
  line-height: 1.9; font-size: 13px;
  user-select: none;
  overflow-wrap: anywhere;
}

/* the torn-away entry */
.torn {
  clip-path: polygon(0 0, 100% 0, 100% 34%, 78% 42%, 92% 55%, 71% 66%, 84% 80%, 62% 88%, 70% 100%, 0 100%);
}
.torn-edge-note { position: absolute; right: 5%; bottom: 7%; max-width: 180px; }

/* ---- pen annotations (previous owner's handwriting) ---- */
.pen {
  font-family: "Caveat", cursive;
  font-size: 22px; line-height: 1.12;
  color: #31418f;
  transform: rotate(-2deg);
}
.pen-abs { position: absolute; pointer-events: none; }
.pen small { font-size: 17px; }
.pen-circle {
  display: inline-block; padding: 2px 10px;
  border: 2px solid #31418f; border-radius: 50%;
  transform: rotate(-3deg);
}

/* ---- wear & tear (procedural placeholders; scans replace these) ----
   NO mix-blend-mode or filter here: they composite unpredictably against the
   sheets' transform stacking contexts (rings rendered as glossy emboss).
   Plain translucent browns darken reliably everywhere. */
.stain-ring, .stain-corner, .crease, .tape { position: absolute; pointer-events: none; }
.stain-ring {
  width: 120px; height: 120px; border-radius: 50%;
  border: 11px solid rgba(96, 64, 30, .18);
}
.stain-ring::after {
  content: ""; position: absolute; inset: -14px -4px -2px -10px;
  border-radius: 50%; border: 4px solid rgba(96, 64, 30, .09);
}
.stain-corner {
  width: 240px; height: 240px;
  background: radial-gradient(circle at 0% 100%, rgba(60,45,25,.14), transparent 58%);
  left: 0; bottom: 0;
  transform: rotate(1.5deg);
}
.stain-corner.tr { left: auto; right: 0; top: 0; bottom: auto; transform: scale(-1) rotate(1.5deg); }
.crease {
  left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, transparent, rgba(22,22,26,.09) 18%, rgba(255,255,255,.6) 50%, rgba(22,22,26,.07) 82%, transparent);
}
.tape {
  width: 104px; height: 30px;
  background: rgba(228, 222, 198, .5);
  border: 1px solid rgba(22,22,26,.05);
  box-shadow: 0 1px 2px rgba(22,22,26,.10);
  transform: rotate(-4deg);
}

/* ---- the playable inset, framed as a printed screenshot ---- */
.demo-frame {
  position: relative; background: #0a0b0e;
  border-radius: var(--r-card); overflow: hidden;
  border: 1px solid var(--line);
  aspect-ratio: 16 / 9;
}
.demo-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.demo-scan {
  position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg, transparent 0px, transparent 2px, rgba(255,255,255,.035) 3px);
}
.demo-ph {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 8px;
  color: #838a9c; font: 500 12px/1.7 "JetBrains Mono", monospace; /* 5.7:1 on #0a0b0e */
  text-align: center; padding: 20px;
}
.demo-ph b { color: #cfd6e4; font-weight: 500; }

/* ---- hint strip (bottom-of-page whisper, Tunic style) ---- */
.hint-strip {
  background: var(--fg); color: var(--accent-ink);
  font: 500 12px/1.5 "JetBrains Mono", monospace;
  letter-spacing: .12em; text-align: center;
  padding: 12px 16px;
}

/* ---- taped-in photo prints (media slots become physical photos) ---- */
.photo {
  position: relative;
  background: #ffffff;
  padding: 10px 10px 14px;
  border: 1px solid var(--line);
  box-shadow: 0 2px 10px rgba(22,22,26,.09);
  transform: rotate(.6deg);
}
.photo--l { transform: rotate(-.5deg); }
.photo .shot, .photo .demo-frame { border-radius: 2px; }
.photo > .tape { top: -14px; left: 50%; margin-left: -52px; z-index: 2; } /* tape laps OVER the print edge */

/* quieter sheet interior for utility pages (steps, faq) */
.sheet--quiet { padding: 30px 34px 46px; }

/* printed ownership line with a pen-filled blank */
.property { font: 500 11px/1.6 "JetBrains Mono", monospace; letter-spacing: .08em; color: var(--muted); }
.property .pen { display: inline; font-size: 19px; transform: none; }
.pen-strike { text-decoration: line-through; text-decoration-thickness: 2.5px; opacity: .8; margin-right: .4em; } /* .8 keeps the composited blue >=4.5:1 on paper */

/* floating page number for sections that are not sheets */
.page-no--loose { position: absolute; right: 0; bottom: -4px; }

/* ---- responsive ---- */
@media (max-width: 640px) {
  .sheet { padding: 24px 18px 44px; }
  .item-row { grid-template-columns: 64px 1fr; gap: 14px; }
  .item-icon { width: 64px; }
  .pen-abs, .torn-edge-note { display: none; }  /* hand notes overlap too easily on small screens */
  .banner { font-size: 15px; padding: 8px 16px; }
}