:root{
  --ink:#16233d;
  --ink-soft:#3a4763;
  --paper:#f6f1e2;
  --paper-raised:#fbf8ef;
  --line:#ddd3b4;
  --gold:#b8902f;
  --gray:#6b675e;

  --wood-dark:#3b2416;
  --wood-mid:#5a3820;
  --wood-light:#754a2a;
  --iron:#232323;
  --iron-light:#4a4a4a;
  --rivet:#8a8a8a;

  --font-display:'Aref Ruqaa', serif;
  --font-body:'Cairo', system-ui, sans-serif;
  --font-mono:'JetBrains Mono', ui-monospace, monospace;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0; overflow-x:hidden;}
body{
  font-family:var(--font-body);
  background:var(--paper);
  color:var(--ink);
  min-height:100vh;
  position:relative;
  -webkit-font-smoothing:antialiased;
}
.hidden{display:none !important;}
button{font-family:inherit; cursor:pointer;}
input{font-family:inherit;}

.ledger-bg{
  position:fixed; inset:0; pointer-events:none; z-index:0;
  background-image:repeating-linear-gradient(
    to bottom, transparent 0 39px, var(--line) 39px 40px
  );
  opacity:.35;
}

/* ================= GATE ================= */
.gate{
  position:fixed; inset:0; z-index:50;
  display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(ellipse at 50% 30%, #6b4526 0%, #2c1a0f 65%, #160d07 100%);
  overflow:hidden;
}
.gate-wall{
  text-align:center;
  padding:20px;
  width:100%;
  max-width:420px;
}
.gate-title{
  font-family:var(--font-display);
  color:#e8d9b5;
  font-size:38px;
  margin:0 0 2px;
  text-shadow:0 2px 12px rgba(0,0,0,.5);
}
.gate-subtitle{
  color:#c7a86b;
  font-size:15px;
  margin:0 0 22px;
  letter-spacing:.05em;
}

.doorway{
  position:relative;
  width:260px;
  height:300px;
  margin:0 auto 22px;
  perspective:900px;
  border-radius:130px 130px 6px 6px;
  overflow:hidden;
  box-shadow:0 20px 50px -10px rgba(0,0,0,.7), inset 0 0 0 6px var(--iron);
  background:var(--iron);
}
.door{
  position:absolute;
  top:0; bottom:0; width:50%;
  background:
    repeating-linear-gradient(90deg, var(--wood-mid) 0 6px, var(--wood-light) 6px 12px);
  transition:transform 1.1s cubic-bezier(.7,-.1,.2,1);
  box-shadow:inset 0 0 30px rgba(0,0,0,.5);
}
.door-left{ right:50%; transform-origin:left center; border-inline-end:2px solid var(--iron);}
.door-right{ left:50%; transform-origin:right center; border-inline-start:2px solid var(--iron);}
.door.open.door-left{ transform:rotateY(-108deg); }
.door.open.door-right{ transform:rotateY(108deg); }
.door.shake{ animation:doorShake .45s ease; }
@keyframes doorShake{
  0%,100%{transform:translateX(0);}
  20%{transform:translateX(-6px);}
  40%{transform:translateX(5px);}
  60%{transform:translateX(-4px);}
  80%{transform:translateX(3px);}
}
.door-band{
  position:absolute; right:0; left:0; height:14px;
  background:linear-gradient(180deg, var(--iron-light), var(--iron));
  box-shadow:0 1px 0 rgba(255,255,255,.08) inset;
}
.door-band::before, .door-band::after{
  content:''; position:absolute; top:2px; width:6px; height:6px; border-radius:50%;
  background:radial-gradient(circle at 35% 35%, var(--rivet), #333);
}
.door-band::before{ inset-inline-start:14px; }
.door-band::after{ inset-inline-end:14px; }
.band-top{ top:28px; }
.band-mid{ top:143px; }
.band-bot{ top:258px; }

.door-ring{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  z-index:2; filter:drop-shadow(0 2px 4px rgba(0,0,0,.6));
  transition:opacity .4s ease;
}
.doorway.open .door-ring{ opacity:0; }

.gate-form{ margin-top:6px; }
.gate-input{
  width:100%;
  padding:13px 16px;
  text-align:center;
  font-size:16px;
  font-family:var(--font-mono);
  letter-spacing:.03em;
  border:2px solid #6b4a2c;
  border-radius:8px;
  background:rgba(255,250,240,.92);
  color:var(--ink);
  outline:none;
}
.gate-input:focus{ border-color:var(--gold); box-shadow:0 0 0 3px rgba(184,144,47,.25); }
.gate-btn{
  width:100%;
  margin-top:12px;
  padding:13px;
  border:none;
  border-radius:8px;
  background:var(--gold);
  color:#1c1206;
  font-weight:800;
  font-size:15.5px;
  transition:background .15s ease, transform .05s ease;
}
.gate-btn:hover{ background:#caa53c; }
.gate-btn:active{ transform:translateY(1px); }
.gate-msg{
  min-height:20px;
  color:#e6b3a3;
  font-size:13px;
  margin:10px 0 0;
  font-weight:600;
}
.gate-credit{
  margin-top:22px;
  font-family:var(--font-mono);
  font-size:11px;
  color:#a5824a;
  letter-spacing:.02em;
}

.gate.unlocked{
  animation:gateFade .6s ease .55s forwards;
  pointer-events:none;
}
@keyframes gateFade{
  from{opacity:1;}
  to{opacity:0; visibility:hidden;}
}

/* ================= READER SHELL ================= */
.reader{ position:relative; z-index:1; min-height:100vh; display:flex; flex-direction:column; }

.reader-head{
  position:sticky; top:0; z-index:10;
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 14px;
  background:var(--paper-raised);
  border-bottom:1px solid var(--line);
}
.reader-head-title{ text-align:center; display:flex; flex-direction:column; line-height:1.25;}
.rh-book{ font-family:var(--font-display); font-size:19px; color:var(--ink); }
.rh-series{ font-size:11px; color:var(--gray); letter-spacing:.08em; }

.icon-btn{
  border:none; background:transparent; font-size:19px; color:var(--ink);
  width:38px; height:38px; border-radius:8px;
}
.icon-btn:hover{ background:var(--line); }

/* drawers */
.drawer{
  position:fixed; top:0; bottom:0; width:min(320px, 84vw);
  background:var(--paper-raised);
  z-index:30;
  box-shadow:0 0 30px rgba(0,0,0,.25);
  transition:transform .25s ease;
  display:flex; flex-direction:column;
}
#tocDrawer{ right:0; transform:translateX(100%); }
#tocDrawer.open{ transform:translateX(0); }

#settingsDrawer{ left:0; transform:translateX(-100%); }
#settingsDrawer.open{ transform:translateX(0); }

.drawer-overlay{
  position:fixed; inset:0; background:rgba(20,15,8,.4); z-index:25;
}

.drawer-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px; border-bottom:1px solid var(--line);
  font-weight:800; font-family:var(--font-display); font-size:18px;
}

.toc-list{ overflow-y:auto; padding:8px 0; }
.toc-part{
  padding:12px 16px 4px;
  font-size:12px; font-weight:700; color:var(--gold);
  letter-spacing:.04em;
}
.toc-chapter{
  display:block; width:100%; text-align:start;
  padding:9px 16px; border:none; background:transparent;
  font-size:14.5px; color:var(--ink);
}
.toc-chapter:hover, .toc-chapter.active{ background:var(--line); }

.settings-body{ padding:14px 16px; overflow-y:auto; }
.settings-label{ font-size:12.5px; font-weight:700; color:var(--gray); margin:16px 0 8px; }
.settings-label:first-child{ margin-top:0; }

.font-options{ display:flex; flex-wrap:wrap; gap:8px; }
.font-opt{
  padding:8px 12px; border:2px solid var(--line); border-radius:8px;
  background:var(--paper); font-size:14px; color:var(--ink);
}
.font-opt.active{ border-color:var(--gold); background:#fdf6e3; }

.size-row{ display:flex; align-items:center; gap:14px; }
.size-row .icon-btn{ border:2px solid var(--line); }
#sizeVal{ font-family:var(--font-mono); font-weight:700; min-width:24px; text-align:center; }

.color-options{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.color-opt{
  width:28px; height:28px; border-radius:50%; border:2px solid var(--line);
  padding:0;
}
.color-opt.active{ border-color:var(--gold); box-shadow:0 0 0 2px var(--gold); }
.color-custom{ width:32px; height:32px; border:none; border-radius:50%; padding:0; background:none; }

.theme-options{ display:flex; gap:8px; }
.theme-opt{
  flex:1; padding:9px 4px; border-radius:8px; border:2px solid var(--line);
  font-size:12.5px; font-weight:700;
}
.theme-paper{ background:#f6f1e2; color:#3a2a18; }
.theme-sepia{ background:#ecd8ab; color:#4a3216; }
.theme-night{ background:#232323; color:#d8d0bd; }
.theme-opt.active{ outline:2px solid var(--gold); outline-offset:2px; }

/* ================= CHAPTER CONTENT ================= */
.chapter-view{
  flex:1;
  max-width:640px;
  width:100%;
  margin:0 auto;
  padding:26px 22px 40px;
}
.ch-part-label{
  text-align:center; font-size:12px; letter-spacing:.1em; color:var(--gold);
  font-weight:700; margin-bottom:6px;
}
.ch-title{
  text-align:center;
  font-family:var(--font-display);
  font-size:26px;
  color:var(--ink);
  margin:0 0 26px;
}
.ch-para{
  margin:0 0 1.1em;
  line-height:2;
  text-align:justify;
}
.ch-quote{
  margin:0 0 1.1em;
  padding-inline-start:16px;
  border-inline-start:3px solid var(--gold);
  font-style:italic;
  opacity:.85;
}

.chapter-nav{
  display:flex; gap:10px; padding:14px 18px 24px;
  max-width:640px; width:100%; margin:0 auto;
}
.nav-btn{
  flex:1; padding:12px; border-radius:8px; border:2px solid var(--line);
  background:var(--paper-raised); font-weight:700; font-size:14px; color:var(--ink);
}
.nav-btn:disabled{ opacity:.35; }

/* ================= READING THEMES ================= */
body.theme-sepia{ background:#ecd8ab; }
body.theme-sepia .reader-head{ background:#f2e4bd; border-color:#d9c48f; }
body.theme-sepia .chapter-view{ color:inherit; }
body.theme-sepia .ledger-bg{ background-image:repeating-linear-gradient(to bottom, transparent 0 39px, #d9c48f 39px 40px); }

body.theme-night{ background:#1c1c1e; }
body.theme-night .ledger-bg{ opacity:.15; background-image:repeating-linear-gradient(to bottom, transparent 0 39px, #444 39px 40px); }
body.theme-night .reader-head{ background:#232326; border-color:#3a3a3d; }
body.theme-night .rh-book, body.theme-night .icon-btn{ color:#e8e2d0; }
body.theme-night .rh-series{ color:#9a9488; }
body.theme-night .drawer{ background:#232326; color:#e8e2d0; }
body.theme-night .drawer-head{ border-color:#3a3a3d; }
body.theme-night .toc-chapter{ color:#e8e2d0; }
body.theme-night .toc-chapter:hover, body.theme-night .toc-chapter.active{ background:#333; }
body.theme-night .font-opt, body.theme-night .nav-btn{ background:#2a2a2d; border-color:#3a3a3d; color:#e8e2d0; }
body.theme-night .ch-title{ color:#e8e2d0; }

@media (max-width:400px){
  .gate-title{ font-size:32px; }
  .doorway{ width:220px; height:260px; }
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important; transition-duration:.01ms !important;}
}