/* hadith.css v8 — dark scene + motion + new controls */
:root{
  --fg:#e9eef6;
  --fg-dim:#b7c2d6;
  --accent:#7ecbff;
  --accent-2:#a0ddff;
  --glass: rgba(255,255,255,.10);
  --glass-2: rgba(255,255,255,.16);
  --border: rgba(255,255,255,.18);
}

/* Reset + base */
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  color:var(--fg);
  font:16px/1.6 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
  background:#071019;
  overflow:hidden;
}

/* Layer 1: drifting blobs */
body::before{
  content:"";
  position:fixed; inset:-10%;
  background:
    radial-gradient(60% 70% at 20% 30%, #0f141c 60%, transparent 70%),
    radial-gradient(70% 55% at 80% 70%, #0d1822 60%, transparent 70%),
    radial-gradient(85% 80% at 50% 50%, #0d121a 55%, transparent 70%);
  filter: blur(10px) saturate(1.05);
  animation: drift 24s ease-in-out infinite alternate,
             shade 10s ease-in-out infinite alternate;
  z-index:0;
}
@keyframes drift { from{transform:translateX(-2%) translateY(-1%)} to{transform:translateX(2%) translateY(1%)} }
@keyframes shade { from{opacity:.9} to{opacity:1} }

/* Layer 2: slow rotating vignette for depth */
body::after{
  content:"";
  position:fixed; inset:-20%;
  background:
    radial-gradient(120% 120% at 50% 50%, transparent 55%, rgba(0,0,0,.25) 85%),
    conic-gradient(from 0deg, rgba(255,255,255,.06), rgba(255,255,255,.02), rgba(255,255,255,.06));
  mix-blend-mode: overlay;
  animation: swirl 60s linear infinite;
  pointer-events:none;
  z-index:0;
}
@keyframes swirl { to{ transform:rotate(360deg) } }

/* Top bar */
.topbar{
  position:fixed; top:14px; left:14px; z-index:3; display:flex; gap:10px; align-items:center;
}
.exit{
  display:inline-block;
  color:#fff; text-decoration:none; font-weight:700; letter-spacing:.2px;
  background:rgba(255,255,255,.12); border:1px solid var(--border);
  padding:8px 14px; border-radius:999px; backdrop-filter:blur(6px);
}
.btn-ghost.small{
  appearance:none; border:1px solid var(--border); color:#fff;
  background:var(--glass); padding:8px 12px; border-radius:999px; cursor:pointer;
}

/* Favorite star (top-right) */
.icon{
  position:fixed; z-index:3; width:46px; height:46px; border-radius:999px;
  border:1px solid var(--border); background:var(--glass); cursor:pointer;
  backdrop-filter: blur(6px);
}
.icon.star{ top:14px; right:14px; }
.icon[aria-pressed="true"]{ background:var(--accent); border-color:transparent; }

.icon.star::before{
  content:""; display:block; width:100%; height:100%;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 17.3l-6.18 3.73 1.64-7.03L2 9.24l7.19-.62L12 2l2.81 6.62L22 9.24l-5.46 4.76 1.64 7.03z"/></svg>') center/22px 22px no-repeat;
  mask:       url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 17.3l-6.18 3.73 1.64-7.03L2 9.24l7.19-.62L12 2l2.81 6.62L22 9.24l-5.46 4.76 1.64 7.03z"/></svg>') center/22px 22px no-repeat;
  background:#fff;
  opacity:.95;
}

/* Pencil (bottom-left) */
.icon.pencil{ left:14px; bottom:18px; }
.icon.pencil::before{
  content:""; display:block; width:100%; height:100%;
  -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04a1.003 1.003 0 000-1.42l-2.34-2.34a1.003 1.003 0 00-1.42 0l-1.83 1.83 3.75 3.75 1.84-1.82z"/></svg>') center/22px 22px no-repeat;
  mask:      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04a1.003 1.003 0 000-1.42l-2.34-2.34a1.003 1.003 0 00-1.42 0l-1.83 1.83 3.75 3.75 1.84-1.82z"/></svg>') center/22px 22px no-repeat;
  background:#fff; opacity:.95;
}

/* Notes panel */
.notes-panel{
  position:fixed; left:70px; bottom:18px; z-index:3;
  display:grid; gap:8px; width:min(360px, calc(100vw - 110px));
  background:var(--glass-2); border:1px solid var(--border); border-radius:14px;
  padding:10px 12px; backdrop-filter: blur(8px);
  animation: pop .15s ease-out;
}
@keyframes pop{ from{ transform:translateY(8px); opacity:0 } to{ transform:none; opacity:1 } }
.notes-label{ font-size:12px; color:var(--fg-dim) }
.notes-input{
  width:100%; padding:10px 12px; border-radius:10px; border:1px solid var(--border);
  background:rgba(0,0,0,.25); color:#fff; outline:none;
}
.notes-actions{ display:flex; align-items:center; gap:10px }
.muted{ font-size:12px; opacity:.7 }
.btn.small{ appearance:none; border:1px solid var(--border); border-radius:999px; padding:8px 12px; background:var(--glass); color:#fff; cursor:pointer }

/* Arrows */
.arrow{
  position:fixed; top:50%; transform:translateY(-50%);
  width:54px; height:54px; border-radius:50%;
  display:grid; place-items:center; font-size:32px; line-height:1;
  color:#fff; background:rgba(255,255,255,.07); cursor:pointer; z-index:3;
  border:1px solid var(--border); backdrop-filter: blur(6px);
}
.arrow.left{ left:18px }
.arrow.right{ right:18px }
.arrow:hover{ background:rgba(255,255,255,.12) }

/* Centered content */
.stage{ position:relative; z-index:2; height:100%; display:grid; place-items:center; padding:28px 16px; }
.content{ max-width:1000px; text-align:center; }

.title{
  font-weight:800; letter-spacing:.3px; opacity:.96;
  font-size: clamp(18px, 2.2vw, 22px);
  color: var(--fg-dim);
  margin-bottom:10px;
}

/* Two layers that fade */
.layer{
  max-width:1000px; margin:0 auto 8px; font-size: clamp(20px, 3.2vw, 34px);
  line-height:1.55; opacity:0; transition:opacity .45s ease; min-height:3lh;
}
.layer.show{ opacity:1; }
#explainText{ color:var(--fg-dim); }

.source{ font-size:13px; opacity:.75; margin-top:10px; }

/* Heart under hadith */
.heart-btn{
  margin:12px auto 2px;
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px; border-radius:999px;
  background:rgba(255,255,255,.08); border:1px solid var(--border); color:#fff;
  cursor:pointer;
}
.heart-btn .heart{
  width:16px; height:16px; display:inline-block; background:#fff;
  -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 21s-7-4-7-10a4.5 4.5 0 018-2 4.5 4.5 0 018 2c0 6-7 10-7 10z"/></svg>') center/16px 16px no-repeat;
  mask:      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 21s-7-4-7-10a4.5 4.5 0 018-2 4.5 4.5 0 018 2c0 6-7 10-7 10z"/></svg>') center/16px 16px no-repeat;
}
.heart-btn[aria-pressed="true"]{
  background:var(--accent); border-color:transparent;
}
.heart-btn[aria-pressed="true"] .heart{ background:#fff; }

/* Center controls */
.controls{
  display:flex; gap:14px; align-items:center; justify-content:center; margin-top:12px;
  flex-wrap:wrap;
}
.btn-special.big{
  appearance:none; border:none; cursor:pointer; font-weight:700; color:#fff;
  background:linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.08));
  border:1px solid var(--border); padding:12px 22px; border-radius:999px; backdrop-filter: blur(6px);
  font-size: clamp(16px, 2vw, 18px);
}
.counter{ font-size:13px; opacity:.75 }

/* Counter bovenin verbergen */
/* Zichtbare 1 / N teller onder de tekst */
#counter{
  display:inline-block;
  margin-top:6px;
  font-size:12px;
  letter-spacing:.2px;
  color:rgba(255,255,255,.75);
  background:rgba(0,0,0,.22);
  border:1px solid var(--border);
  border-radius:999px;
  padding:4px 10px;
  user-select:none;
}


/* Swipe-hint (alleen mobiel zichtbaar) */
.swipe-hint{
  position:fixed; left:50%; bottom:10px; transform:translateX(-50%);
  display:none; /* default desktop: uit */
  font-size:12px; color:rgba(255,255,255,.7);
  background:rgba(0,0,0,.25);
  border:1px solid var(--border);
  border-radius:999px;
  padding:6px 10px;
  backdrop-filter:blur(6px);
  pointer-events:none;
  opacity:0;
  transition:opacity .25s ease;
}
.swipe-hint.show{ opacity:1; }

@media (max-width:720px){
  /* verberg pijlen volledig op mobiel */
  .arrow{ display:none !important; }

  /* icon-knoppen iets kleiner */
  .icon{ width:40px; height:40px }

  /* notes-panel compacter */
  .notes-panel{
    left:62px;
    bottom:14px;
    width: min(320px, calc(100vw - 100px));
    padding: 8px 10px;
  }
  .notes-input{ padding:9px 10px; }
  .btn.small{ padding:7px 10px; }

  /* toon de hint op mobiel */
  .swipe-hint{ display:block; }
}

/* respecteer hidden attribuut voor het paneel */
.notes-panel[hidden] { display: none !important; }