/* =====================================================
   Promise Harbor Library
   Main Stylesheet
   v1.8 Polished Journal
===================================================== */

:root {
  --wood-dark:#1b0d05;
  --wood:#3b1d0d;
  --wood-light:#6b3f1f;
  --brass:#b9852e;
  --brass-light:#f1d48a;
  --paper:#fff1c9;
  --ink:#24170b;
  --blue:#12324a;
  --blue-dark:#0b1e2d;
  --shadow:rgba(0,0,0,.55);
}

* { box-sizing:border-box; }

html, body {
  margin:0;
  min-height:100vh;
  font-family:Georgia, "Times New Roman", serif;
  background:
    radial-gradient(circle at top center, rgba(214,170,82,.18), transparent 35%),
    linear-gradient(180deg, #160b05, #2b160a 45%, #110804);
  color:var(--paper);
}

#ph-library-app {
  min-height:100vh;
  padding:32px 18px;
  display:flex;
  justify-content:center;
  align-items:flex-start;
}

.ph-library-shell {
  width:min(1180px, 100%);
  min-height:780px;
  padding:28px;
  border:3px solid var(--brass);
  border-radius:22px;
  background:
    linear-gradient(180deg, rgba(85,43,18,.94), rgba(31,14,6,.97)),
    repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 2px, transparent 2px 14px);
  box-shadow:inset 0 0 55px rgba(0,0,0,.65), 0 18px 45px var(--shadow);
  position:relative;
  overflow:hidden;
}

.ph-library-shell::before {
  content:"";
  position:absolute;
  inset:14px;
  border:1px solid rgba(241,212,138,.45);
  border-radius:16px;
  pointer-events:none;
}

h1 {
  margin:12px 0 8px;
  text-align:center;
  color:var(--brass-light);
  font-size:clamp(38px, 6vw, 72px);
  letter-spacing:.11em;
  text-transform:uppercase;
  text-shadow:0 3px 0 #000, 0 0 18px rgba(241,212,138,.3);
}

.ph-header p {
  text-align:center;
  margin:0 auto 24px;
  color:#f5ddb0;
  font-size:18px;
}

.ph-library-menu {
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:12px;
  margin:24px 0;
  position:relative;
  z-index:2;
}

.ph-library-menu button,
.ph-back-btn,
.ph-room-item,
.ph-book-button,
.ph-chapter-grid button,
.ph-reader-nav button,
.ph-search-box button,
.ph-search-modes button,
.ph-search-result button,
.ph-journal-list button,
.ph-load-more {
  font-family:Georgia, "Times New Roman", serif;
}

.ph-library-menu button,
.ph-back-btn,
.ph-search-box button,
.ph-search-modes button,
.ph-search-result button,
.ph-journal-list button,
.ph-load-more {
  border:2px solid #6e4216;
  border-radius:10px;
  padding:10px 16px;
  background:linear-gradient(180deg, #f1d48a, #bb812e 50%, #623812);
  color:#160a02;
  font-size:15px;
  font-weight:bold;
  cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45), 0 5px 12px rgba(0,0,0,.4);
}

.ph-library-menu button:hover,
.ph-room-item:hover,
.ph-back-btn:hover,
.ph-book-button:hover,
.ph-chapter-grid button:hover,
.ph-reader-nav button:hover,
.ph-search-box button:hover,
.ph-search-modes button:hover,
.ph-search-result button:hover,
.ph-journal-list button:hover,
.ph-load-more:hover {
  filter:brightness(1.08);
  transform:translateY(-1px);
}

#ph-status {
  position:relative;
  z-index:2;
  width:min(900px, 100%);
  margin:0 auto 22px;
  padding:14px 18px;
  border:1px solid rgba(241,212,138,.7);
  border-radius:12px;
  background:linear-gradient(180deg, #fff4cf, #ead59d);
  color:var(--ink);
  box-shadow:0 5px 14px rgba(0,0,0,.28);
}

#ph-view {
  position:relative;
  z-index:2;
  min-height:480px;
  padding:24px;
  border:2px solid rgba(185,133,46,.75);
  border-radius:18px;
  background:
    linear-gradient(180deg, rgba(18,50,74,.9), rgba(12,28,42,.9)),
    radial-gradient(circle at top left, rgba(255,244,214,.18), transparent 35%);
  box-shadow:inset 0 0 30px rgba(0,0,0,.45), 0 10px 24px rgba(0,0,0,.3);
}

#ph-view h2 {
  color:var(--brass-light);
  font-size:32px;
  margin-top:0;
}

#ph-view h3 {
  color:var(--brass-light);
}

#ph-view p {
  font-size:18px;
  line-height:1.6;
}

/* Room Scene */

.ph-room-scene {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:18px;
}

.ph-room-item {
  min-height:150px;
  padding:22px;
  border:2px solid rgba(241,212,138,.75);
  border-radius:18px;
  background:
    linear-gradient(180deg, rgba(255,244,214,.13), rgba(0,0,0,.18)),
    linear-gradient(135deg, rgba(80,46,22,.65), rgba(15,35,52,.75));
  color:var(--paper);
  cursor:pointer;
  text-align:left;
  box-shadow:inset 0 0 22px rgba(0,0,0,.35), 0 8px 20px rgba(0,0,0,.28);
  transition:.2s ease;
}

.ph-room-item span {
  display:block;
  font-size:38px;
  margin-bottom:12px;
}

.ph-room-item strong {
  display:block;
  color:var(--brass-light);
  font-size:24px;
  margin-bottom:6px;
}

.ph-room-item small {
  display:block;
  color:#f6dfaa;
  font-size:15px;
  line-height:1.4;
}

.ph-back-btn {
  margin-top:20px;
}

/* Bible Cases */

.ph-book-columns {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
}

.ph-bookcase {
  padding:14px;
  border:1px solid rgba(241,212,138,.28);
  border-radius:14px;
  background:rgba(0,0,0,.12);
}

.ph-bookcase h3 {
  color:var(--brass-light);
  font-size:24px;
  margin:0 0 14px;
}

.ph-book-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(135px, 1fr));
  gap:10px;
}

.ph-book-button {
  display:flex;
  align-items:center;
  gap:8px;
  justify-content:flex-start;
  min-height:42px;
  padding:10px 12px;
  border-radius:10px;
  background:linear-gradient(180deg, #f6dd93, #b9822e 52%, #5e3511);
  border:2px solid #7b4b19;
  color:#180b03;
  font-weight:bold;
  cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55), 0 5px 12px rgba(0,0,0,.38);
  transition:.2s ease;
}

.ph-book-button span {
  font-size:18px;
}

.ph-book-button strong {
  font-size:15px;
}

/* Reader */

.ph-chapter-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(54px, 1fr));
  gap:10px;
  margin:20px 0;
}

.ph-chapter-grid button,
.ph-reader-nav button,
.ph-verse-tools button {
  border:2px solid #6e4216;
  border-radius:8px;
  padding:8px 10px;
  background:linear-gradient(180deg, #f1d48a, #bb812e 50%, #623812);
  color:#160a02;
  font-weight:bold;
  cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45), 0 4px 10px rgba(0,0,0,.35);
}

.ph-reader-title {
  text-align:center;
  margin-bottom:20px;
}

.ph-reader-title h2 {
  font-size:44px;
  margin-bottom:4px;
}

.ph-reader-title h3 {
  color:var(--paper);
  font-size:24px;
  margin-top:0;
}

.ph-kjv-label {
  color:var(--brass-light);
  letter-spacing:.08em;
  text-transform:uppercase;
  font-size:13px;
}

.ph-reader-nav {
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:12px;
  margin:18px 0;
}

.ph-bible-page {
  background:linear-gradient(180deg, #fff4cf, #ead59d);
  color:var(--ink);
  border:2px solid var(--brass);
  border-radius:16px;
  padding:28px;
  box-shadow:inset 0 0 24px rgba(0,0,0,.18);
}

.ph-verse-block {
  border-bottom:1px solid rgba(36,23,11,.12);
}

.ph-bible-verse {
  font-size:20px;
  line-height:1.75;
  margin:0 0 8px;
}

.ph-bible-verse sup {
  color:#8a5c1e;
  font-weight:bold;
  margin-right:6px;
}

.ph-verse-tools {
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin:6px 0 14px;
}

.ph-verse-tools button {
  font-size:13px;
  padding:6px 9px;
}

/* Search */

.ph-search-box {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:18px 0;
}

.ph-search-box input {
  flex:1;
  min-width:260px;
  padding:13px 14px;
  border-radius:10px;
  border:2px solid var(--brass);
  font-size:17px;
  font-family:Georgia, "Times New Roman", serif;
}

.ph-search-modes {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:12px 0 20px;
}

.ph-search-result {
  background:linear-gradient(180deg, #fff4cf, #ead59d);
  color:var(--ink);
  border:1px solid var(--brass);
  border-radius:12px;
  padding:14px;
  margin:12px 0;
}

.ph-search-result p {
  color:var(--ink);
}

mark {
  background:#ffe66d;
  color:#140900;
  padding:0 2px;
}

/* Journal */

.ph-backup-panel {
  background:
    linear-gradient(180deg, rgba(46,22,10,.95), rgba(19,8,3,.96));
  border:2px solid var(--brass);
  border-radius:18px;
  padding:18px;
  box-shadow:inset 0 0 24px rgba(0,0,0,.45), 0 8px 18px rgba(0,0,0,.3);
  margin:18px 0 24px;
}

.ph-backup-panel p {
  color:#f7dfad;
}

.ph-journal-list {
  list-style:none;
  padding:0;
  margin:0 0 26px;
  display:grid;
  gap:12px;
}

.ph-journal-list li {
  background:
    linear-gradient(180deg, #fff4cf, #ead59d);
  color:var(--ink);
  border:2px solid rgba(185,133,46,.75);
  border-radius:14px;
  padding:14px;
  box-shadow:inset 0 0 18px rgba(0,0,0,.12), 0 5px 12px rgba(0,0,0,.22);
}

.ph-journal-list strong {
  color:#6b3f1f;
  font-size:17px;
}

.ph-note-editor {
  background:
    linear-gradient(180deg, rgba(46,22,10,.95), rgba(19,8,3,.96));
  border:2px solid var(--brass);
  border-radius:18px;
  padding:20px;
}

.ph-note-verse {
  background:linear-gradient(180deg, #fff4cf, #ead59d);
  color:var(--ink);
  border-left:6px solid var(--brass);
  padding:14px;
  border-radius:12px;
}

#ph-note-text {
  width:100%;
  min-height:240px;
  padding:16px;
  font-size:18px;
  border-radius:12px;
  border:2px solid var(--brass);
  background:#fff8df;
  color:var(--ink);
  font-family:Georgia, "Times New Roman", serif;
  line-height:1.5;
}

/* Mobile */

@media (max-width:800px) {
  .ph-book-columns {
    grid-template-columns:1fr;
  }

  .ph-bible-page {
    padding:18px;
  }

  .ph-bible-verse {
    font-size:18px;
  }
}

@media (max-width:700px) {
  #ph-library-app {
    padding:14px;
  }

  .ph-library-shell {
    padding:18px;
    min-height:680px;
  }

  h1 {
    font-size:34px;
  }

  .ph-header p {
    font-size:16px;
  }

  .ph-library-menu {
    display:grid;
    grid-template-columns:1fr 1fr;
  }

  .ph-library-menu button {
    padding:12px 10px;
    font-size:14px;
  }

  #ph-view {
    padding:16px;
  }

  .ph-room-scene {
    grid-template-columns:1fr;
  }

  .ph-room-item {
    min-height:120px;
  }

  .ph-search-box {
    display:block;
  }

  .ph-search-box input,
  .ph-search-box button {
    width:100%;
    margin-bottom:10px;
  }
}