/* ===== مكتبة الحصن الرقمية — Omani heritage · dark · luxurious ===== */
:root{
  --bg:#0c0a07;            /* deep warm midnight */
  --bg2:#141009;
  --panel:rgba(40,32,20,.34);
  --panel-brd:rgba(201,164,92,.28);
  --gold:#c9a45c;
  --gold-lite:#e8c87e;
  --gold-soft:rgba(201,164,92,.14);
  --teal:#1f7a6e;          /* Omani door teal */
  --ink:#f3e8d2;           /* warm parchment text */
  --ink-dim:#b6a685;
  --maroon:#7a2e2e;
  --radius:16px;
  --shadow:0 18px 50px -18px rgba(0,0,0,.8);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"Tajawal","Noto Naskh Arabic","Amiri",system-ui,sans-serif;
  direction:rtl; min-height:100vh; line-height:1.7;
  background-image:
    radial-gradient(1100px 600px at 80% -10%, rgba(201,164,92,.10), transparent 60%),
    radial-gradient(900px 500px at 10% 0%, rgba(31,122,110,.10), transparent 55%),
    linear-gradient(180deg,var(--bg2),var(--bg) 40%);
  background-attachment:fixed;
}
/* faint Islamic two-star pattern wash over the whole page */
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:url("pattern.svg?v=3"); background-size:300px; opacity:.07;
}
a{color:inherit;text-decoration:none}
.wrap{position:relative; z-index:1; max-width:1280px; margin:0 auto; padding:0 22px}

/* ---------- header ---------- */
header.hero{position:relative; text-align:center; padding:54px 0 26px}
.crest-link{display:inline-block; cursor:pointer; transition:transform .2s, filter .2s; -webkit-tap-highlight-color:transparent}
.crest-link:hover{transform:translateY(-2px)}
.crest-link:hover .crest{filter:drop-shadow(0 6px 18px rgba(201,164,92,.7))}
.crest-link:active{transform:scale(.96)}
.crest{width:62px;height:62px;margin:0 auto 14px;display:block;filter:drop-shadow(0 4px 14px rgba(201,164,92,.4))}
.brand-ar{
  font-family:"Aref Ruqaa","Amiri",serif; font-weight:700;
  font-size:clamp(30px,5.4vw,52px); margin:0; letter-spacing:.5px;
  background:linear-gradient(180deg,var(--gold-lite),var(--gold) 60%,#9c7b3e);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 2px 30px rgba(201,164,92,.25);
}
.brand-en{font-family:"Reem Kufi",sans-serif; letter-spacing:5px; font-size:13px;
  color:var(--ink-dim); margin-top:4px; text-transform:uppercase}
.tagline{color:var(--ink-dim); font-size:15px; margin:10px 0 0}
.ayah{
  font-family:"Amiri Quran","Amiri",serif; margin:14px 0 0;
  font-size:clamp(20px,3.4vw,28px); line-height:2.1; letter-spacing:.3px;
  color:var(--gold);
}
/* each word twinkles on its own slow cycle (durations/delays vary per word via
   inline --t/--d) so different parts glint at different times — a continuous,
   random-feeling shimmer rather than one fast sweep. */
.ayah .w{
  background:linear-gradient(180deg,var(--gold-lite),var(--gold) 70%,#a8854a);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 1px 22px rgba(201,164,92,.20);
  animation:ayahTwinkle var(--t,4s) ease-in-out infinite;
  animation-delay:var(--d,0s);
  will-change:filter;
}
@keyframes ayahTwinkle{
  0%,100% { filter:brightness(.92);
            text-shadow:0 1px 16px rgba(201,164,92,.16); }
  50%     { filter:brightness(1.5);
            text-shadow:0 0 12px rgba(255,246,214,.6), 0 1px 26px rgba(232,200,126,.5); }
}
.divider{display:block; width:min(560px,90%); height:auto; margin:18px auto 4px; opacity:.95}

/* ---------- logo & divider animations ---------- */
/* divider rosette: ticks like a clock's second hand. Holds for ~0.8s then a
   quick 30° snap, accumulating a full turn over 12s (12 ticks) so the loop is
   seamless. 30° (not 45°) makes each rest orientation visibly different — the
   45° version looked static because the 8-point star is 45°-symmetric. */
@keyframes roseTick{
  0%,6.83%    { transform:rotate(0deg); }
  8.33%,15.16%{ transform:rotate(30deg); }
  16.66%,23.5%{ transform:rotate(60deg); }
  25%,31.83%  { transform:rotate(90deg); }
  33.33%,40.16%{ transform:rotate(120deg); }
  41.66%,48.5%{ transform:rotate(150deg); }
  50%,56.83%  { transform:rotate(180deg); }
  58.33%,65.16%{ transform:rotate(210deg); }
  66.66%,73.5%{ transform:rotate(240deg); }
  75%,81.83%  { transform:rotate(270deg); }
  83.33%,90.16%{ transform:rotate(300deg); }
  91.66%,98.5%{ transform:rotate(330deg); }
  100%        { transform:rotate(360deg); }
}
.rose-spin{ transform-box:fill-box; transform-origin:center;
  animation:roseTick 12s ease-out infinite; }

/* logo cannon (8s loop): emerge from the summit → fire right → 4s later fire left → retract */
.cannon{ transform-box:view-box; transform-origin:32px 12px;
  animation:cannonEmerge 8s ease-in-out infinite; }
@keyframes cannonEmerge{
  0%   { transform:scale(0); opacity:0; }
  6%   { transform:scale(1) translateX(0); opacity:1; }
  12.5%{ transform:scale(1) translateX(0); }
  16%  { transform:scale(1) translateX(-1.8px); }   /* recoil from the right shot */
  22%  { transform:scale(1) translateX(0); }
  62.5%{ transform:scale(1) translateX(0); }
  66%  { transform:scale(1) translateX(1.8px); }    /* recoil from the left shot */
  72%  { transform:scale(1) translateX(0); }
  94%  { transform:scale(1) translateX(0); opacity:1; }
  100% { transform:scale(0); opacity:0; }
}
/* show the right barrel for the first shot, the left barrel for the second */
.barrel-r{ animation:barrelR 8s step-end infinite; }
.barrel-l{ animation:barrelL 8s step-end infinite; }
@keyframes barrelR{ 0%,49%{opacity:1} 50%,100%{opacity:0} }
@keyframes barrelL{ 0%,50%{opacity:0} 51%,100%{opacity:1} }
/* projectiles */
.ball{ transform-box:view-box; transform-origin:center; }
.ball-r{ animation:ballR 8s linear infinite; }
.ball-l{ animation:ballL 8s linear infinite; }
@keyframes ballR{
  0%,11%{ transform:translateX(0); opacity:0; }
  12.5%{ transform:translateX(0); opacity:1; }
  26%  { transform:translateX(18px); opacity:0; }
  100% { transform:translateX(18px); opacity:0; }
}
@keyframes ballL{
  0%,61%{ transform:translateX(0); opacity:0; }
  62.5%{ transform:translateX(0); opacity:1; }
  76%  { transform:translateX(-18px); opacity:0; }
  100% { transform:translateX(-18px); opacity:0; }
}
@media (prefers-reduced-motion:reduce){
  .rose-spin,.cannon,.barrel-r,.barrel-l,.ball-r,.ball-l,.ayah .w{ animation:none; }
  .barrel-l,.ball-r,.ball-l{ opacity:0; }   /* clean static cannon */
}

/* ---------- controls ---------- */
/* sticky positioning wrapper only — the glass lives on .toolbar-inner so the
   category popover (an absolute child, below) can move with it natively AND keep
   its own working backdrop-filter (not nested inside another backdrop-filter). */
.toolbar{
  position:sticky; top:0; z-index:20; margin:18px 0 8px;
}
.toolbar-inner{
  padding:14px;
  /* frosted glass */
  background:linear-gradient(180deg,rgba(64,53,35,.34),rgba(40,32,20,.22));
  backdrop-filter:blur(20px) saturate(1.4);
  -webkit-backdrop-filter:blur(20px) saturate(1.4);
  border:1px solid var(--panel-brd); border-radius:var(--radius);
  box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,.08);
}
.search{position:relative; max-width:560px; margin:0 auto}
.search input{
  width:100%; padding:14px 48px 14px 18px; font-size:16px; color:var(--ink);
  background:rgba(0,0,0,.35); border:1px solid var(--panel-brd);
  border-radius:12px; outline:none; font-family:inherit;
  transition:border-color .2s, box-shadow .2s;
}
.search input::placeholder{color:var(--ink-dim)}
.search input:focus{border-color:var(--gold); box-shadow:0 0 0 3px var(--gold-soft)}
.search .ic{position:absolute; top:50%; right:16px; transform:translateY(-50%);
  color:var(--gold); font-size:18px; pointer-events:none}
.chiprow{display:flex; align-items:center; justify-content:center; gap:14px; margin-top:12px}
.chiprow .chips{margin-top:0; flex:0 1 auto}
.social{flex:0 0 auto; width:42px; height:42px; border-radius:50%; display:grid; place-items:center;
  color:var(--gold-lite); background:rgba(255,255,255,.03); border:1px solid var(--panel-brd);
  transition:.18s; box-shadow:0 6px 18px -10px rgba(0,0,0,.7)}
.social:hover{color:#1a1308; background:linear-gradient(180deg,var(--gold-lite),var(--gold));
  border-color:var(--gold-lite); transform:translateY(-2px)}
.social svg{width:19px; height:19px; fill:currentColor; display:block}
@media(max-width:520px){.social{width:38px; height:38px} .social svg{width:17px; height:17px}
  .chiprow{gap:9px}}
.chips{display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin-top:12px}
.chip{
  font-family:inherit; font-size:13px; color:var(--ink); font-weight:700;
  cursor:pointer;
  padding:7px 15px; border-radius:999px; background:rgba(255,255,255,.03);
  border:1px solid var(--panel-brd); transition:.18s; white-space:nowrap;
  display:inline-flex; align-items:center; gap:7px;
}
/* drawn icons inherit the chip text colour (gold when idle, dark when active) */
.cicon{width:16px; height:16px; flex:0 0 auto; stroke:currentColor; fill:none;
  stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
.caret{width:13px; height:13px; flex:0 0 auto; stroke:currentColor; fill:none;
  stroke-width:2; stroke-linecap:round; stroke-linejoin:round; opacity:.8;
  transition:transform .2s}
.cat-trigger.open .caret{transform:rotate(180deg)}
.chip:hover{color:var(--ink); border-color:var(--gold)}
.chip.on{color:#1a1308; background:linear-gradient(180deg,var(--gold-lite),var(--gold));
  border-color:var(--gold-lite); font-weight:700}
/* category dropdown — keeps the toolbar short; categories live in a popover */
.chips{flex-wrap:nowrap}
.catwrap{position:relative; display:inline-block}
.cat-trigger.open{border-color:var(--gold)}
.catpanel{
  /* absolute child of the sticky .toolbar wrapper → sits flush under it (top:100%)
     and moves with it natively while scrolling (no JS, always smooth, no gap).
     Its backdrop-filter works because no ancestor is backdrop-filtered (the glass
     is on .toolbar-inner, a sibling). */
  position:absolute; top:100%; margin-top:4px; left:50%; transform:translateX(-50%);
  z-index:40; display:flex; flex-wrap:wrap; gap:8px; justify-content:center;
  width:max-content; max-width:min(92vw,560px); max-height:60vh; overflow:auto;
  padding:14px; border-radius:14px;
  /* frosted glass — identical to the toolbar (same colour, opacity & blur) */
  background:linear-gradient(180deg,rgba(64,53,35,.34),rgba(40,32,20,.22));
  backdrop-filter:blur(20px) saturate(1.4);
  -webkit-backdrop-filter:blur(20px) saturate(1.4);
  border:1px solid var(--panel-brd);
  box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,.08);
}
.catpanel[hidden]{display:none}
/* disclaimer link spans a full row at the bottom of the category popover */
.catpanel .disc-chip{flex:1 0 100%; justify-content:center; margin-top:8px;
  border-style:dashed; border-color:var(--gold-soft); color:var(--ink-dim);
  font-weight:600; background:transparent}
.catpanel .disc-chip:hover{color:var(--gold-lite); border-color:var(--gold)}
.statbar{display:flex; gap:26px; justify-content:center; margin:14px 0 6px;
  color:var(--ink-dim); font-size:13.5px}
.statbar b{color:var(--gold-lite); font-size:16px; font-family:"Reem Kufi",sans-serif}

/* ---------- grid ---------- */
.grid{display:grid; gap:20px; padding:22px 0 60px;
  grid-template-columns:repeat(auto-fill,minmax(158px,1fr))}
.card{
  position:relative; cursor:pointer; border-radius:14px; overflow:hidden;
  background:var(--panel); border:1px solid var(--panel-brd);
  backdrop-filter:blur(6px); transition:transform .22s, box-shadow .22s, border-color .22s;
  display:flex; flex-direction:column;
}
.card:hover{transform:translateY(-6px); border-color:var(--gold);
  box-shadow:0 22px 44px -16px rgba(0,0,0,.85), 0 0 0 1px var(--gold-soft),
             0 10px 40px -12px rgba(201,164,92,.35)}
.cover{position:relative; aspect-ratio:2/3; background:#1a140c; overflow:hidden}
.cover img{width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .4s; background:#1a140c}
.card:hover .cover img{transform:scale(1.05)}
.cover .fmt{position:absolute; bottom:8px; left:8px; display:flex; gap:5px}
.badge{font-size:10px; font-weight:700; letter-spacing:.5px; padding:3px 7px;
  border-radius:6px; background:rgba(0,0,0,.6); color:var(--gold-lite);
  border:1px solid var(--panel-brd); backdrop-filter:blur(4px)}
.meta{padding:11px 12px 13px}
.meta .t{font-size:14px; font-weight:700; color:var(--ink); margin:0 0 3px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:2.4em}
.meta .a{font-size:12px; color:var(--ink-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.sentinel{height:1px}
.empty{text-align:center; color:var(--ink-dim); padding:60px 0; font-size:16px}

/* ---------- modal ---------- */
.modal-bg{position:fixed; inset:0; z-index:60; display:none; align-items:center; justify-content:center;
  padding:20px; background:rgba(6,5,3,.72); backdrop-filter:blur(8px)}
.modal-bg.open{display:flex; animation:fade .2s ease}
@keyframes fade{from{opacity:0}to{opacity:1}}
.modal{width:min(640px,100%); background:linear-gradient(180deg,#171107,#0e0b06);
  border:1px solid var(--gold); border-radius:20px; box-shadow:var(--shadow);
  overflow:hidden; position:relative}
.modal .strip{height:5px; background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.modal-body{display:flex; gap:20px; padding:24px; align-items:flex-start}
/* drawn legal icons (scales / books) — inherit text colour & size, like the
   category icons, so they match the site style instead of OS emoji */
.licon{width:1em; height:1em; vertical-align:-.14em; flex:0 0 auto;
  stroke:currentColor; fill:none; stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round; margin-inline-end:.3em}
.disc-chip .licon{margin-inline-end:0}   /* chip already spaces via gap */

/* disclaimer modal text */
.disc-body{padding:24px 26px 28px; color:var(--ink); line-height:1.95; font-size:15px}
.disc-body p{margin:0 0 12px}
.disc-body b{color:var(--gold-lite); font-weight:700}
.disc-list{margin:6px 0 0; padding:0; list-style:none}
.disc-list li{position:relative; padding:7px 20px 7px 0; color:var(--ink-dim)}
.disc-list li::before{content:"◆"; position:absolute; right:0; top:7px; color:var(--gold); font-size:11px}
.disc-list li b{color:var(--gold-lite)}
.modal-body img{width:160px; aspect-ratio:2/3; object-fit:cover; border-radius:10px;
  border:1px solid var(--panel-brd); flex:0 0 auto; background:#1a140c}
.modal h2{font-family:"Aref Ruqaa",serif; color:var(--gold-lite); margin:0 0 8px; font-size:23px; line-height:1.4}
.modal .by{color:var(--ink-dim); font-size:14px; margin:0 0 6px}
.modal .pub{color:var(--teal); font-size:13px; margin:0 0 16px; filter:brightness(1.4)}
.modal .actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:8px}
.btn{font-family:inherit; font-size:14.5px; font-weight:700; cursor:pointer;
  padding:11px 18px; border-radius:11px; border:1px solid var(--gold);
  display:inline-flex; align-items:center; gap:7px; transition:.18s}
.btn.gold{background:linear-gradient(180deg,var(--gold-lite),var(--gold)); color:#1a1308; border:none}
.btn.gold:hover{filter:brightness(1.08); transform:translateY(-2px)}
.btn.ghost{background:transparent; color:var(--gold-lite)}
.btn.ghost:hover{background:var(--gold-soft); transform:translateY(-2px)}
.modal .x{position:absolute; top:12px; left:14px; z-index:2; cursor:pointer;
  width:34px; height:34px; border-radius:50%; display:grid; place-items:center;
  background:rgba(0,0,0,.4); color:var(--ink); border:1px solid var(--panel-brd); font-size:18px}
.modal .x:hover{color:var(--gold-lite); border-color:var(--gold)}
.modal-tip{display:flex; align-items:center; gap:11px; margin:0 24px 22px; padding:11px 14px;
  background:var(--gold-soft); border:1px solid var(--panel-brd); border-radius:12px;
  color:var(--ink-dim); font-size:13px; line-height:1.65}
.modal-tip b{color:var(--gold-lite); font-weight:700}
.modal-tip .books-ic{flex:0 0 auto; width:30px; height:30px;
  filter:drop-shadow(0 3px 8px rgba(255,106,0,.35))}
@media(max-width:520px){.modal-body{flex-direction:column; align-items:center; text-align:center}
  .modal-body img{width:150px}
  .modal-tip{margin:0 16px 18px; text-align:right}}

/* ---------- footer ---------- */
footer{text-align:center; padding:34px 0 50px; color:var(--ink-dim); font-size:13px;
  border-top:1px solid var(--panel-brd); margin-top:20px}
footer .admin{display:inline-flex; align-items:center; gap:6px; margin-top:10px;
  color:var(--gold-lite); border:1px solid var(--panel-brd); padding:7px 16px; border-radius:999px; transition:.18s}
footer .admin:hover{border-color:var(--gold); background:var(--gold-soft)}
.loader{text-align:center; color:var(--ink-dim); padding:30px}