@import url('https://fonts.googleapis.com/css2?family=Rakkas&family=Tajawal:wght@400;500;700;800&family=IBM+Plex+Mono:wght@400;600&display=swap');

/* ===== Design tokens ===== */
:root{
  --ink: #14151a;
  --ink-2: #1c1e26;
  --ink-3: #23252f;
  --parchment: #efe4cd;
  --parchment-2: #e2d3ab;
  --parchment-ink: #2b2418;
  --brass: #b6905a;
  --brass-light: #d9b97c;
  --crimson: #8c2f2f;
  --crimson-light: #8c2f2f;
  --ash: #93938c;
  --ash-dim: #5c5c58;
  --success: #4f7a5a;

  --font-display: 'Rakkas', 'Tajawal', serif;
  --font-body: 'Tajawal', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;

  --radius: 10px;
  --radius-lg: 18px;
  --shadow-card: 0 12px 30px -12px rgba(0,0,0,0.55);
  --shadow-soft: 0 4px 14px -6px rgba(0,0,0,0.4);

  --header-bg: rgba(20,21,26,0.9);
}

/* ===== الوضع الفاتح — نفس هوية الموقع (الحبر الداكن + الأحمر القرمزي + الذهبي) لكنها
   مقلوبة: خلفية الصفحة تصبح كريمية فاتحة بدل الحبر الداكن، والنصوص تتحوّل إلى نفس لون
   الحبر الداكن المستخدم أصلًا على بطاقات "الورق" (case-folder وغيرها)، فيبقى كل شيء
   متّسقًا بصريًا. بطاقات "الورق" نفسها (القصة، الأدلة، النوافذ المنبثقة) وعناصر العلامة
   الثابتة (الختم، شاشة عدم الاتصال) تبقى كما هي في الوضعين — لا تتغيّر أبدًا. */
:root[data-theme="light"]{
  --ink: #f6efdd;
  --ink-2: #ffffff;
  --ink-3: #f0e7d0;
  --parchment: #2b2418;
  --ash: #6b6456;
  --ash-dim: #8f8874;
  --brass: #96692e;
  --brass-light: #8a5f2a;
  --header-bg: rgba(246,239,221,0.92);
}

*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--ink);
  background-image:
    radial-gradient(circle at 12% 8%, rgba(182,144,90,0.08), transparent 40%),
    radial-gradient(circle at 88% 82%, rgba(140,47,47,0.09), transparent 45%);
  color: var(--parchment);
  font-family: var(--font-body);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration:none; }
ul,ol{ padding-inline-start: 1.3em; margin:0; }
h1,h2,h3{ font-family: var(--font-display); font-weight:400; line-height:1.25; margin:0 0 .5em; color: var(--brass-light); }
p{ margin:0 0 1em; color: var(--parchment); }
.container{ width:min(1080px, 92%); margin-inline:auto; }

:focus-visible{ outline: 2px solid var(--brass-light); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.001ms !important; animation-iteration-count:1 !important; transition-duration: 0.001ms !important; }
}

.eyebrow{
  font-family: var(--font-mono);
  letter-spacing: .04em;
  color: var(--brass);
  font-size: .85rem;
  margin-bottom:.6em;
}
.brand-red{ color: var(--crimson); }

/* ===== Buttons ===== */
.btn{
  display:inline-flex; align-items:center; gap:.5em;
  font-family: var(--font-body); font-weight:700; font-size:1rem;
  padding: .85em 1.6em;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor:pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn:hover{ transform: translateY(-2px); }
.btn-primary{ background: var(--crimson); color: #efe4cd; box-shadow: var(--shadow-soft); }
.btn-primary:hover{ background: #a53a3a; }
.btn-secondary{ background: transparent; color: var(--brass-light); border-color: var(--brass); }
.btn-secondary:hover{ background: rgba(182,144,90,0.1); }
.btn:disabled{ opacity:.5; cursor:not-allowed; transform:none; }

.tag{
  display:inline-block;
  font-family: var(--font-mono);
  font-size: .78rem;
  padding: .3em .75em;
  border: 1px solid var(--brass);
  border-radius: 999px;
  color: var(--brass-light);
  margin-inline-end:.4em;
}

/* ===== Splash screen — يُحاكي وقع ختم حقيقي (stamp) على الصفحة: يهبط بسرعة وزاوية مبالغ
   فيها، يرتد قليلاً عند الاصطدام (كأنه ضرب السطح فعلاً)، ثم يستقر تمامًا على نفس ميلان الختم
   الأصلي (-9deg المُضمّن داخل الـ SVG نفسه). حلقة حبر خفيفة تتوسّع وتتلاشى عند لحظة الاصطدام
   لتعزيز إحساس "الطبع". تُعاد هذه الحركة بالكامل من الصفر في كل مرة تظهر فيها الشاشة (انظر
   showSplash في main.js). */
.splash-screen{
  position: fixed; inset: 0; z-index: 200;
  background: #14151a;
  display:flex; align-items:center; justify-content:center;
  cursor: pointer;
  opacity:0; visibility:hidden; pointer-events:none;
}
.splash-screen.active{
  animation: splash-hold-then-fade 1.7s ease forwards;
}
.splash-content{
  position: relative;
  text-align:center;
  animation: splash-stamp-slam .5s cubic-bezier(.2,.9,.25,1) both;
}
.splash-logo{ width: 300px; height:300px; max-width: 72vw; max-height: 72vw; filter: drop-shadow(0 8px 20px rgba(0,0,0,.5)); }
.splash-impact{
  position:absolute; inset:0; margin:auto;
  width: 300px; height:300px; max-width: 72vw; max-height: 72vw;
  border-radius: 28px;
  border: 6px solid var(--crimson);
  opacity:0;
  pointer-events:none;
  animation: splash-impact-ring .45s ease-out .32s both;
}

@keyframes splash-hold-then-fade{
  0%{ opacity:1; visibility:visible; pointer-events:auto; }
  82%{ opacity:1; }
  100%{ opacity:0; visibility:hidden; pointer-events:none; }
}
@keyframes splash-stamp-slam{
  0%{ transform: scale(2.6) rotate(-48deg); opacity:0; }
  40%{ transform: scale(.9) rotate(5deg); opacity:1; }
  58%{ transform: scale(1.07) rotate(-4deg); }
  76%{ transform: scale(.98) rotate(1deg); }
  100%{ transform: scale(1) rotate(0deg); }
}
@keyframes splash-impact-ring{
  0%{ transform: scale(.85); opacity:.85; }
  100%{ transform: scale(1.4); opacity:0; }
}
@media (prefers-reduced-motion: reduce){
  .splash-content{ animation: splash-pop-reduced .3s ease both; }
  .splash-impact{ animation: none; display:none; }
}
@keyframes splash-pop-reduced{
  from{ transform: scale(.96) rotate(0deg); opacity:0; }
  to{ transform: scale(1) rotate(0deg); opacity:1; }
}

/* ===== Offline screen ===== */
.offline-screen{
  position: fixed; inset: 0; z-index: 300;
  background: rgba(20,21,26,0.97);
  display:flex; align-items:center; justify-content:center;
  text-align:center; padding: 2em;
  animation: splash-pop .4s ease;
}
.offline-screen[hidden]{ display:none; }
.offline-content{ max-width: 380px; }
.offline-icon-wrap{
  position:relative; width:5.5rem; height:5.5rem; margin: 0 auto .5em;
  display:flex; align-items:center; justify-content:center;
  perspective: 400px;
}
.offline-icon{
  position:relative; z-index:1; font-size: 3rem; opacity:.9;
  display:inline-block; transform-style: preserve-3d;
  animation: offline-icon-flip 2.6s ease-in-out infinite;
}
.offline-signal-ring{
  position:absolute; inset:0; margin:auto; width:2.4rem; height:2.4rem;
  border-radius:50%; border: 2px solid var(--crimson); opacity:0;
  animation: offline-signal-wave 2.2s ease-out infinite;
}
.offline-signal-ring-2{ animation-delay: 1.1s; }
.offline-content h2{ color: #d9b97c; margin-bottom:.4em; font-size:1.4rem; }
.offline-content p{ color: #93938c; font-size:.95rem; margin:0; }
.offline-brand{ font-family: var(--font-display); color: var(--crimson); font-size:1.15em; }
.offline-pulse{
  display:inline-block; width:8px; height:8px; border-radius:50%;
  background: var(--crimson); margin-inline-start:.4em;
  animation: offline-pulse 1.4s ease-in-out infinite;
}
@keyframes offline-pulse{
  0%,100%{ opacity:1; transform: scale(1); }
  50%{ opacity:.4; transform: scale(.7); }
}
@keyframes offline-icon-flip{
  0%,100%{ transform: rotateY(0deg); }
  50%{ transform: rotateY(180deg); }
}
@keyframes offline-signal-wave{
  0%{ transform: scale(.6); opacity:.7; }
  100%{ transform: scale(2.6); opacity:0; }
}
@media (prefers-reduced-motion: reduce){
  .offline-pulse{ animation: none; }
  .offline-icon{ animation: none; }
  .offline-signal-ring{ animation: none; display:none; }
}

/* ===== Header ===== */
.site-header{
  border-bottom: 1px solid rgba(182,144,90,0.25);
  background: var(--header-bg);
  backdrop-filter: blur(6px);
  position: sticky; top:0; z-index: 40;
}
.header-inner{ display:flex; align-items:center; justify-content:space-between; padding: 1.2em 0; gap:1em; flex-wrap:wrap; }
.brand{ display:flex; align-items:baseline; gap:.6em; }
.brand-mark{ font-family: var(--font-display); font-size:2.2rem; color: var(--crimson); }
.brand-tagline{ font-family: var(--font-mono); font-size:.82rem; color: var(--ash); }
.main-nav{ display:flex; gap:1.4em; font-family: var(--font-display); font-weight:400; font-size:1.25rem; flex-wrap:wrap; }
.main-nav a{ color: var(--parchment); opacity:.85; padding:.3em 0; border-bottom:2px solid transparent; }
.main-nav a:hover{ opacity:1; border-color: var(--brass); }
.streak-badge{
  font-family: var(--font-mono); font-size:.85rem; color: var(--brass-light);
  border:1px solid var(--brass); border-radius: 999px; padding:.35em .9em;
  display:flex; align-items:center; gap:.4em;
}
.header-actions{ display:flex; align-items:center; gap:.7em; }
.theme-toggle-btn{
  display:flex; align-items:center; justify-content:center;
  width: 2.3em; height: 2.3em;
  border:1px solid var(--brass); border-radius: 999px;
  background: transparent; color: var(--brass-light);
  font-size: 1rem; cursor:pointer; line-height:1;
  transition: background .15s ease, transform .15s ease;
}
.theme-toggle-btn:hover{ background: rgba(182,144,90,0.12); transform: translateY(-1px); }

/* ===== Footer ===== */
.site-footer{ border-top:1px solid rgba(182,144,90,0.2); margin-top:5em; padding: 2.5em 0; }
.footer-inner p{ margin:.2em 0; color: var(--ash); font-size:.9rem; }
.footer-note{ font-size:.8rem; color: var(--ash-dim); }
.footer-feedback-link{
  display:inline-block; margin-top:.8em; color: var(--brass-light); font-size:.85rem;
  text-decoration: underline; text-underline-offset: 3px;
}
.footer-feedback-link:hover{ color: var(--crimson); }

/* ===== Hero (case folder) ===== */
.hero{ padding: 4em 0 2em; position:relative; overflow:hidden; }
.hero-inner{ position:relative; }
.case-folder{
  background: linear-gradient(180deg, #efe4cd, #e2d3ab);
  color: var(--parchment-ink);
  border-radius: var(--radius-lg);
  padding: 2.6em clamp(1.4em, 5vw, 3.2em);
  box-shadow: var(--shadow-card);
  max-width: 720px;
  position:relative;
}
.case-folder::before{
  content:"";
  position:absolute; top:-14px; right: 2.5em;
  width: 120px; height: 28px;
  background: #e2d3ab;
  border-radius: 6px 6px 0 0;
  box-shadow: 0 -2px 4px rgba(0,0,0,0.15) inset;
}
.case-folder .eyebrow{ color: var(--crimson); }
.hero-title{ font-size: clamp(1.8rem, 4vw, 2.6rem); color: var(--parchment-ink); }
.hero-teaser{ color: #4a4030; font-size:1.05rem; }
.hero-meta{ margin: 1.2em 0; }
.hero-meta .tag{ border-color: var(--crimson); color: var(--crimson); }
.stamp-decor{
  position:absolute; left: 6%; bottom: -10px; width:150px; height:150px;
  border:6px double var(--crimson); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  transform: rotate(-14deg);
  opacity:.18;
  font-family: var(--font-display); color: var(--crimson); font-size:1.1rem; text-align:center;
}

/* ===== دعوة تجربة التدريب اليومي (الصفحة الرئيسية) ===== */
.practice-cta{ padding: .5em 0 2em; }
.practice-cta-inner{
  background: var(--ink-2); border:1px solid var(--crimson); border-radius: var(--radius-lg);
  padding: 1.6em clamp(1.2em, 4vw, 2.4em); box-shadow: var(--shadow-soft);
  display:flex; align-items:center; justify-content:space-between; gap:1.5em; flex-wrap:wrap;
}
.practice-cta-badge{
  display:inline-block; font-family: var(--font-mono); font-size:.75rem; color: var(--crimson);
  border:1px solid var(--crimson); border-radius:999px; padding:.2em .8em; margin-bottom:.5em;
}
.practice-cta-text h2{ color: var(--parchment); font-size:1.3rem; margin:.1em 0 .4em; }
.practice-cta-text p{ color: var(--ash); font-size:.92rem; max-width:520px; margin:0; }
.practice-cta-btn{ flex: 0 0 auto; white-space:nowrap; }

@media (max-width: 640px){
  .practice-cta-inner{ flex-direction:column; align-items:flex-start; }
  .practice-cta-btn{ width:100%; text-align:center; }
}

/* ===== Stats strip ===== */
.stats-strip{ padding: 1.5em 0; }
.stats-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:1em; }
.stat-card{
  background: var(--ink-2); border:1px solid rgba(182,144,90,0.2);
  border-radius: var(--radius); padding: 1.2em; text-align:center;
}
.stat-num{ display:block; font-family: var(--font-mono); font-size:1.9rem; color: var(--brass-light); }
.stat-label{ font-size:.85rem; color: var(--ash); }

/* ===== How it works ===== */
.how-it-works{ padding: 3em 0; }
.how-it-works h2{ color: var(--crimson); }
.steps{ list-style:none; padding:0; display:grid; gap:1em; counter-reset: step; }
.steps li{
  counter-increment: step;
  background: var(--ink-2); border:1px solid rgba(182,144,90,0.18);
  border-radius: var(--radius); padding: 1.1em 1.3em 1.1em 1.3em;
  position:relative; padding-inline-start: 3.2em;
}
.steps li::before{
  content: counter(step);
  position:absolute; inset-inline-start: 1em; top:50%; transform:translateY(-50%);
  font-family: var(--font-mono); color: var(--crimson); border:1px solid var(--crimson);
  width:1.8em; height:1.8em; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:.9rem;
}

/* ===== Archive ===== */
.page-header{ padding: 3em 0 1em; }
.page-header h1{ color: var(--crimson); }

/* ===== صفحة الإحصائيات ===== */
.stats-section{ padding: 1em 0 4em; }
.stats-grid{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap:1em; margin-bottom:2.5em;
}
.stat-tile{
  background: var(--ink-2); border:1px solid rgba(182,144,90,.25); border-radius: var(--radius-lg);
  padding:1.4em 1em; text-align:center; display:flex; flex-direction:column; gap:.3em;
}
.stat-emoji{ font-size:1.5rem; }
.stat-value{ font-family: var(--font-display); font-size:1.7rem; color: var(--crimson); }
.stat-label{ color: var(--ash); font-size:.82rem; }

.difficulty-breakdown h2{ color: var(--crimson); margin-bottom:.8em; }
.difficulty-cards{ display:grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap:1em; }
.difficulty-card{
  background: var(--ink-2); border:1px solid rgba(182,144,90,.25); border-radius: var(--radius-lg);
  padding:1.2em; text-align:center;
}
.difficulty-card h3{ color: var(--brass-light); margin:0 0 .5em; }
.difficulty-count{ font-family: var(--font-display); font-size:1.4rem; color: var(--parchment); margin:0 0 .3em; }
.difficulty-acc{ color: var(--ash); font-size:.85rem; margin:0; }

.empty-stats-note{
  margin-top:2em; padding:1em 1.2em; border-radius: var(--radius); border:1px dashed rgba(182,144,90,.4);
  color: var(--ash);
}
.empty-stats-note a{ color: var(--crimson); font-weight:700; }
.archive-preview-grid, .archive-grid{
  display:grid; grid-template-columns: repeat(auto-fill, minmax(260px,1fr)); gap:1.2em; margin: 1.5em 0;
}
.archive-upcoming-heading{
  font-family: var(--font-display); color: var(--brass-light); font-size:1.2rem;
  margin: 2em 0 0; padding-top: 1.4em; border-top: 1px dashed rgba(182,144,90,.35);
  text-align:center;
}
.case-card{
  background: var(--ink-2); border:1px solid rgba(182,144,90,0.22);
  border-radius: var(--radius-lg); padding: 1.4em; position:relative; overflow:hidden;
  display:flex; flex-direction:column; gap:.6em;
  transition: transform .15s ease, border-color .15s ease;
}
.case-card:hover{ transform: translateY(-3px); border-color: var(--brass); }
.case-card-top{ display:flex; justify-content:space-between; align-items:center; }
.case-number{ font-family: var(--font-mono); color: var(--ash); font-size:.8rem; }
.case-card h3{ font-size:1.25rem; margin:0; }
.case-card p{ font-size:.92rem; color: var(--ash); margin:0; flex-grow:1; }
.case-card-bottom{ display:flex; justify-content:space-between; align-items:center; margin-top:.4em; }
.case-card-bottom .date{ font-family: var(--font-mono); font-size:.78rem; color: var(--ash-dim); }
.case-card.locked{ opacity:.55; }
.case-card.locked .case-card-bottom .locked-label{
  font-family: var(--font-mono); font-size:.8rem; color: var(--ash); border:1px dashed var(--ash-dim);
  padding:.3em .8em; border-radius:999px;
}
.case-card.solved{ border-color: var(--success); }
.case-card.failed{ border-color: var(--crimson); }
.solved-stamp{
  position:absolute; top:.9em; left:-1.2em;
  transform: rotate(-16deg);
  border:3px double var(--crimson); color: var(--crimson);
  font-family: var(--font-display); font-size:.85rem;
  padding: .15em 1.4em; opacity:.9;
}
.solved-stamp.failed-stamp{ border-color: var(--ash-dim); color: var(--ash); }

/* ===== Case / puzzle page ===== */
.practice-banner{ padding: 0 0 1em; }
.practice-note{
  background: rgba(140,47,47,0.12); border: 1px solid var(--crimson); border-radius: var(--radius);
  color: var(--parchment); padding: .9em 1.2em; font-size:.92rem; line-height:1.7; margin:0;
}
.practice-note strong{ color: var(--crimson); }
.case-header{ padding: 3em 0 1em; }
.case-header h1{ font-size: clamp(1.7rem, 3.6vw, 2.3rem); color: var(--crimson); }
.case-setting{ color: var(--ash); font-style: normal; }
.case-timer{
  font-family: var(--font-mono); color: var(--brass-light); font-size:1rem;
  border:1px solid var(--brass); border-radius:999px; padding:.35em 1em; display:inline-flex; gap:.5em; align-items:center;
}

.story-card{
  background: linear-gradient(180deg, #efe4cd, #e2d3ab);
  color: var(--parchment-ink); border-radius: var(--radius-lg); padding: 1.8em clamp(1.2em,4vw,2.4em);
  box-shadow: var(--shadow-card);
}
.story-card h2{ color: var(--crimson); font-size:1.3rem; }
.story-card p{ color: #3a3122; }
.victim-line{ border-top: 1px dashed var(--brass); padding-top:.8em; margin-top:1em; font-size:.95rem; }

/* ===== Card browser (Murdle-style) ===== */
.case-cast{ padding: 2.5em 0 1em; }
.cast-tabs{ display:flex; align-items:center; justify-content:center; gap:.6em; flex-wrap:wrap; margin-bottom:.4em; }
.cast-tab{
  background:none; border:none; cursor:pointer; font-family: var(--font-body); font-weight:700;
  font-size: .95rem; color: var(--ash); padding:.3em .2em; border-bottom: 2px solid transparent;
}
.cast-tab.active{ color: var(--brass-light); border-bottom-color: var(--crimson); }
.cast-tab-sep{ color: var(--ash-dim); }
.case-cast .hint{ text-align:center; }

.flip-card-grid{ display:flex; justify-content:center; flex-wrap:wrap; gap:1em; }
.flip-card-grid .flip-card{ width: 130px; flex: 0 0 auto; }
.flip-card{ perspective: 800px; cursor:pointer; aspect-ratio: 5 / 7; }
.flip-card-inner{
  position:relative; width:100%; height:100%;
  transition: transform .5s cubic-bezier(.4,.2,.2,1);
  transform-style: preserve-3d;
}
.flip-card.flipped .flip-card-inner{ transform: rotateY(180deg); }
.flip-card-front, .flip-card-back{
  position:absolute; inset:0;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  border-radius: 12px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:.6em; text-align:center;
  box-shadow: 3px 4px 0 rgba(0,0,0,.45);
}
.flip-card-front{
  background: var(--crimson); border:3px solid #14151a;
  color: #efe4cd;
}
.flip-card-front svg{ width: 58%; height: 58%; }
.flip-card:hover .flip-card-front{ border-color: var(--brass-light); }
.flip-card-back{
  background: linear-gradient(180deg, #efe4cd, #e2d3ab);
  border:3px solid #14151a;
  transform: rotateY(180deg);
  cursor: pointer;
}
.flip-card-emoji{ font-size: 5.6rem; line-height:1; }
.flip-card:focus-visible .flip-card-front{ outline: 2px solid var(--brass-light); outline-offset:2px; }

/* Card detail modal */
.card-modal-overlay{
  position: fixed; inset:0; z-index: 150;
  background: rgba(0,0,0,.65);
  display:flex; align-items:center; justify-content:center; padding: 1.5em;
}
.card-modal-overlay[hidden]{ display:none; }
.card-modal-box{
  width: 100%; max-width: 340px;
  background: linear-gradient(180deg, #efe4cd, #e2d3ab);
  border: 4px solid #14151a; border-radius: 18px;
  box-shadow: 5px 6px 0 rgba(0,0,0,.5);
  padding: 1.8em 1.5em 1.5em;
  text-align:center;
}
.card-modal-icon{ font-size: 3rem; margin-bottom:.4em; }
.card-modal-name{ font-family: var(--font-display); font-size:1.3rem; color: var(--crimson); margin: 0 0 .6em; }
.card-modal-trait{
  display:inline-block; font-family: var(--font-mono); font-size:.75rem;
  color: var(--crimson); border:1px solid var(--crimson); border-radius:999px;
  padding:.3em .9em; margin-bottom:.8em;
}
.card-modal-desc{ color:#3a3122; font-size:.9rem; line-height:1.6; margin-bottom:1.2em; }
.card-modal-actions{ display:flex; gap:.6em; }
.card-modal-btn{
  flex:1; background:#14151a; color: #efe4cd; border:none;
  border-radius: 8px; padding:.8em 1em; font-family: var(--font-body); font-weight:700;
  cursor:pointer; box-shadow: 2px 3px 0 var(--brass);
}
.card-modal-btn:hover{ background:#22232c; }
.card-modal-next{ flex: 0 0 auto; padding-inline: 1.2em; }

.hint-modal-overlay{
  position: fixed; inset:0; z-index: 160;
  background: rgba(0,0,0,.65);
  display:flex; align-items:center; justify-content:center; padding: 1.5em;
}
.hint-modal-overlay[hidden]{ display:none; }
.hint-modal-box{
  width: 100%; max-width: 380px;
  background: linear-gradient(180deg, #efe4cd, #e2d3ab);
  border: 3px solid #1a1a1a; border-radius: 16px;
  box-shadow: var(--shadow-card);
  padding: 1.6em 1.6em 1.4em;
  text-align:center;
}
.hint-modal-label{ font-family: var(--font-mono); font-size:.75rem; color: var(--crimson); letter-spacing:.04em; margin: 0 0 .7em; }
.hint-modal-text{ color: var(--parchment-ink); font-size:1rem; line-height:1.6; margin: 0 0 1.2em; }
.hint-modal-close{
  background:#1a1a1a; color: #efe4cd; border:none;
  border-radius: 8px; padding:.75em 1.2em; font-family: var(--font-body); font-weight:700;
  cursor:pointer; width:100%;
}
.hint-modal-close:hover{ background:#2a2b35; }

.case-clues{ padding: 2.5em 0 1em; }
.case-clues h2{ color: var(--crimson); }
.case-evidence{ padding: 2.5em 0 1em; }
.clue-card{
  background: linear-gradient(180deg, #efe4cd, #e2d3ab);
  color: var(--parchment-ink);
  border-radius: var(--radius-lg);
  padding: 1.8em clamp(1.2em,4vw,2.4em);
  box-shadow: var(--shadow-card);
  border: 3px solid #1a1a1a;
}
.clue-card-title{
  text-align:center; text-decoration: underline; text-underline-offset:4px;
  color: var(--crimson); font-family: var(--font-mono); letter-spacing:.05em;
  font-size:1rem; margin-bottom:1.1em;
}
.clues-list{ list-style: none; display:flex; flex-direction:column; gap:.9em; padding:0; margin:0; }
.clues-list li{
  position:relative; padding-inline-start:1.3em; color:#1a1a1a; line-height:1.6; font-size:.95rem;
  cursor: pointer; transition: opacity .2s ease;
}
.clues-list li::before{ content:"•"; position:absolute; inset-inline-start:0; color:#1a1a1a; }
.clues-list li.evidence-done{ opacity: .45; }
.clues-list li.evidence-done .evidence-text{ text-decoration: line-through; text-decoration-thickness: 2px; }
.clues-list li.clue-reveal{ color: var(--crimson); font-weight:700; }
.clues-list li.clue-reveal::before{ color: var(--crimson); }

.clues-list li.secret-evidence::before{ color: var(--crimson); }
.clues-list li.hint-evidence::before{ color: var(--crimson); }
.clues-list li.hint-evidence .evidence-text{ font-style: italic; }
.secret-evidence-label{ font-weight:700; color: var(--crimson); }
.secret-evidence-text{ font-family: var(--font-mono); letter-spacing: .04em; color: var(--crimson); }

/* "(؟)" بجانب كل دليل في وضع التدريب — تنقر عليها فتتحول إلى الشرح نفسه بدل "؟"، وتنقر
   عليها مجددًا فتعود "(؟)" — تمامًا على طراز Murdle الحقيقي. */
.evidence-help-toggle{
  display:inline; margin-inline-start:.4em; color: var(--crimson); font-style: italic;
  font-weight:700; cursor:pointer; user-select:none;
}
.evidence-help-toggle:hover{ text-decoration: underline; }

.hint-button{ display:block; margin-bottom: 1.2em; }
.hint-button:disabled{ opacity:.4; cursor:not-allowed; }

/* زر المساعدة الأحمر الدائري "؟" — يظهر بجانب عناوين أقسام التدريب، وأحيانًا داخل دليل نفسه */
.help-icon-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:1.5em; height:1.5em; margin-inline-start:.4em;
  border-radius:50%; border:2px solid var(--crimson); background: transparent;
  color: var(--crimson); font-family: var(--font-mono); font-weight:700; font-size:.85rem;
  cursor:pointer; line-height:1; vertical-align:middle; flex:0 0 auto;
}
.help-icon-btn:hover{ background: var(--crimson); color: #efe4cd; }
.help-icon-inline{ margin-inline-start:.6em; }
.liar-reveal{
  background: rgba(140,47,47,0.1); border-inline-start: 3px solid var(--crimson);
  padding: .8em 1em; border-radius: 0 var(--radius) var(--radius) 0; font-size:.95rem;
}

.statements-list{ list-style:none; padding:0; display:flex; flex-direction:column; gap:.8em; }
.statement-item{
  background: var(--ink-2); border-inline-start: 3px solid var(--brass);
  border-radius: 0 var(--radius) var(--radius) 0; padding: .9em 1.1em;
  display:flex; flex-direction:column; gap:.3em;
}
.statement-name{ font-family: var(--font-mono); font-size: .78rem; color: var(--brass-light); letter-spacing:.02em; display:flex; align-items:center; gap:.6em; }
.statement-quote{ font-style: normal; color: var(--parchment); line-height:1.6; }
.statement-item.liar-statement{ border-inline-start-color: var(--crimson); }
.liar-badge{
  font-family: var(--font-mono); font-size:.7rem; color: var(--crimson);
  border:1px solid var(--crimson); border-radius:999px; padding:.1em .6em;
}

/* Deduction grids — dark theme, exact Murdle 4-category staircase structure */
.deduction-section{ padding: 2.5em 0; }
.deduction-section h2{ color: var(--crimson); }
.hint{ color: var(--ash); font-size:.9rem; }
/* align-items:center يوسّط صندوق الجدول أفقيًا داخل حاويته (بدل التمدد على العرض كاملاً)،
   ويتقلّص/يتمدد حسب محتواه الفعلي — حجم الخلايا نفسه مضبوط أدناه بأحجام أكبر قليلاً ليبقى
   الجدول واضحًا ومريحًا للعين حتى بعد التوسيط. */
.grids-wrap{ display:flex; flex-direction:column; align-items:center; gap:2em; margin-top:1em; }
/* حجم الخلية بات متغيّرًا حسابيًا (--grid-cell-size) يضبطه grid-renderer.js عند كل رسم،
   بحساب العرض المتاح فعليًا وعدد الأعمدة معًا — فيتقلّص تلقائيًا في القضايا الكبيرة (الصعبة،
   ٦ مشتبه بهم) حتى يتّسع الجدول كاملاً بلا حاجة للتمرير الجانبي، بدل حجم ثابت يفرض التمرير
   دائمًا. القيم هنا افتراضية فقط (قبل أن يضبطها JS، ولقضايا صغيرة تتّسع أصلاً بلا تصغير). */
.mini-grid{
  overflow-x:auto; max-width:100%; width:100%; box-sizing:border-box;
  background: var(--ink-2); border-radius: var(--radius-lg); padding: 1em; border:1px solid rgba(182,144,90,.2);
}
table.grid-table{
  --grid-cell-size: 44px;
  --grid-font-size: 1.3rem;
  border-collapse: collapse; table-layout: fixed; width:auto; margin: 0 auto;
}
table.grid-table col.col-grouplabel{ width: 1.9em; }
table.grid-table col.col-rowlabel{ width: calc(var(--grid-cell-size) + .6em); }
table.grid-table col.col-data{ width: var(--grid-cell-size); }
table.grid-table th, table.grid-table td{
  border:1px solid rgba(182,144,90,.4); text-align:center; padding:.2em; font-size:.85rem;
  overflow:hidden; white-space:nowrap; box-sizing: border-box; min-width:0; max-width:0;
}
/* صفّ عناوين الفئات (نص عربي بـ colspan) يُسمح له بالالتفاف على أكثر من سطر — وإلا يبقى
   عرضه الأدنى (min-content) الفعلي أكبر من عرض الأعمدة المحسوب، فيتمدّد الجدول رغم
   table-layout:fixed. الالتفاف يقلّص الحد الأدنى إلى عرض أطول كلمة مفردة فقط. */
table.grid-table thead tr:first-child th{
  white-space: normal; overflow-wrap: break-word; line-height:1.15; word-break: keep-all;
}
table.grid-table th{ background: var(--ink-3); color: var(--brass-light); font-weight:700; font-family: var(--font-mono); font-size:.72rem; letter-spacing:.03em; }
table.grid-table th:first-child, table.grid-table th.row-label{
  text-align:start; background: var(--ink-3); color: var(--parchment); font-weight:700;
}
td.grid-td{
  padding: 0;
  cursor:pointer;
  background: var(--ink-2);
}
.grid-cell{
  display:flex; align-items:center; justify-content:center;
  width: var(--grid-cell-size); height: var(--grid-cell-size);
  min-width:0; max-width:100%; overflow:hidden;
  user-select:none; color: var(--ash);
  font-size: var(--grid-font-size); font-weight:700;
  transition: background .12s ease, color .12s ease;
}
td.grid-td:hover .grid-cell{ background: rgba(182,144,90,.16); }
td.grid-td:focus-visible{ outline: 2px solid var(--brass-light); outline-offset: -2px; }
td.grid-td:active .grid-cell{ background: rgba(182,144,90,.28); }
.grid-cell[data-state="check"]{ color: var(--success); }
.grid-cell[data-state="cross"]{ color: var(--crimson); }

table.grid-table th.corner{ background: transparent; border: none; }
table.grid-table th.row-group-label{
  writing-mode: vertical-rl;
  text-orientation: mixed;
  background: var(--ink-3); color: var(--brass-light);
  font-family: var(--font-mono); font-size: .66rem; letter-spacing: .04em;
  width: 1.9em; text-align:center;
}
table.grid-table th.row-label{ width: calc(var(--grid-cell-size) + .6em); }
table.grid-table th.grid-emoji-header{
  font-size: var(--grid-font-size);
  cursor: help;
  width: var(--grid-cell-size);
}
table.grid-table th.row-label.grid-emoji-header{ text-align:center; }
table.grid-table .quadrant-divider-row th,
table.grid-table .quadrant-divider-row td{ border-top: 2px solid var(--brass); }
table.grid-table th.col-divider,
table.grid-table td.col-divider{ border-inline-start: 2px solid var(--brass); }
table.grid-table td.disabled-cell{
  padding:0; width: var(--grid-cell-size); height: var(--grid-cell-size);
  background: repeating-linear-gradient(
    135deg,
    rgba(147,147,140,0.08),
    rgba(147,147,140,0.08) 4px,
    transparent 4px,
    transparent 9px
  );
}

/* Answer form */
.answer-section{ padding: 2em 0 4em; }
.answer-section h2{ color: var(--crimson); }
.answer-form{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); gap:1.2em; align-items:end;
  background: var(--ink-2); border:1px solid rgba(182,144,90,.2); border-radius: var(--radius-lg); padding: 1.6em;
}
.answer-form label{ display:flex; flex-direction:column; gap:.5em; font-weight:700; font-size:.92rem; color: var(--brass-light); }
.answer-form select{
  font-family: var(--font-body); font-size:1rem; padding:.7em .8em; border-radius: var(--radius);
  border:1px solid var(--brass); background: var(--ink); color: var(--parchment);
}
.answer-form .btn{ grid-column: 1 / -1; justify-self:start; }

.result-panel{ margin-top:2em; padding: 1.8em; border-radius: var(--radius-lg); position:relative; }
.result-panel.success{ background: rgba(79,122,90,0.12); border:1px solid var(--success); }
.result-panel.fail{ background: rgba(140,47,47,0.1); border:1px solid var(--crimson); }
.result-fields{ display:flex; gap:1.2em; flex-wrap:wrap; margin: 1em 0; font-family: var(--font-mono); font-size:.9rem; }
.result-fields span.ok{ color: var(--success); }
.result-fields span.no{ color: var(--crimson); }
.streak-lost-note{ color: var(--ash); font-size:.9rem; }
.share-btn{ display:block; width:100%; margin: 1em 0; }
.share-btn-row{ display:flex; gap:.8em; margin: 1em 0; flex-wrap:wrap; }
.share-btn-row .share-btn{ flex:1 1 180px; margin:0; }

.share-toast{
  position: fixed; bottom: 1.5em; left:50%; transform: translateX(-50%) translateY(20px);
  background:#14151a; color: #efe4cd; border:1px solid var(--brass);
  border-radius: 999px; padding:.7em 1.4em; font-size:.9rem;
  box-shadow: 0 6px 20px rgba(0,0,0,.4);
  opacity:0; pointer-events:none; transition: opacity .25s ease, transform .25s ease;
  z-index: 300;
}
.share-toast.visible{ opacity:1; transform: translateX(-50%) translateY(0); }

.stamp{
  position:absolute; top:1em; left:1em;
  border:5px double var(--crimson); color: var(--crimson);
  font-family: var(--font-display); font-size:1.3rem;
  padding: .25em 1em; border-radius:10px;
  transform: rotate(-9deg);
  animation: stamp-in .35s ease-out;
}
@keyframes stamp-in{
  from{ transform: rotate(-9deg) scale(2.2); opacity:0; }
  to{ transform: rotate(-9deg) scale(1); opacity:1; }
}
.shake{ animation: shake .4s ease; }
@keyframes shake{
  0%,100%{ transform: translateX(0); }
  25%{ transform: translateX(6px); }
  75%{ transform: translateX(-6px); }
}

/* How to play modal */
.modal-overlay{
  position:fixed; inset:0; background: rgba(0,0,0,.6); display:flex; align-items:center; justify-content:center;
  padding: 1.5em; z-index: 60;
}
.modal-overlay[hidden]{ display:none; }
.modal-box{
  background: linear-gradient(180deg, #efe4cd, #e2d3ab); color: var(--parchment-ink);
  border-radius: var(--radius-lg); max-width: 480px; width:100%; padding: 1.6em;
  max-height: 82vh; overflow-y: auto; box-shadow: var(--shadow-card);
}
.modal-box h2{ color: var(--crimson); margin-top:0; }
.modal-box p{ color:#3a3122; font-size:.95rem; line-height:1.6; }
.modal-close{ margin-top:1em; }

/* نافذة "ملاحظات" */
.feedback-box{ position:relative; text-align:center; }
.feedback-box h2{ text-align:center; }
.feedback-box p{ text-align:start; }

.modal-x-close{
  position:absolute; top:.7em; inset-inline-end:.7em;
  width:2em; height:2em; border-radius:50%; border:1px solid rgba(58,49,34,.3);
  background: rgba(255,255,255,.35); color: var(--parchment-ink);
  font-size:.95rem; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition: background .15s ease;
}
.modal-x-close:hover{ background: rgba(255,255,255,.6); }

/* زر "إغلاق" النصّي — بترتيب الصفحة العادي بعد زر الإرسال/الشكر، ماروني دائمًا */
.modal-close-btn{
  display:block; width:100%; margin-top:.7em;
  padding:.5em 1.1em; border-radius: var(--radius); border:1px solid var(--crimson);
  background: var(--crimson); color:#efe4cd;
  font-family: var(--font-body); font-size:.9rem; font-weight:700; cursor:pointer;
  transition: background .15s ease;
}
.modal-close-btn:hover,
.modal-close-btn:active,
.modal-close-btn:focus-visible{
  background:#6f2424;
}

/* الكلمة "أثر" داخل النص — بنفس خط وألوان عنوان النافذة (ملاحظاتكم) */
.brand-word,
.modal-box p .brand-word{ font-family: var(--font-display); color: var(--crimson) !important; font-size:1.1em; }

.feedback-textarea{
  width:100%; min-height:140px; margin-top:.8em; padding:.8em 1em; box-sizing:border-box;
  border-radius: var(--radius); border:1px solid rgba(58,49,34,.3); background:#f7f0dc;
  color: var(--parchment-ink); font-family: var(--font-body); font-size:.95rem; line-height:1.6;
  resize: vertical; text-align:start;
}
.feedback-textarea:focus{ outline:2px solid var(--crimson); outline-offset:2px; }
.feedback-status{ font-size:.88rem; margin: .7em 0 0; text-align:start; }
.feedback-status.success{ color:#2e6b3e; }
.feedback-status.error{ color: var(--crimson); }
.feedback-submit-btn{ display:block; width:100%; margin-top:1.2em; }

/* حالة "شكرًا" بعد الإرسال — ختم أحمر ينبثق بحركة، بنفس روح ختم شاشة البداية */
.feedback-thanks{ text-align:center; padding: .5em 0 .2em; }
.feedback-thanks-stamp{
  position:relative; width:84px; height:84px; margin: 0 auto 1em;
  display:flex; align-items:center; justify-content:center;
  animation: feedback-stamp-slam .5s cubic-bezier(.2,.9,.25,1) both;
}
.feedback-thanks-check{
  position:relative; z-index:1; width:100%; height:100%; border-radius:50%;
  background: var(--crimson); color:#efe4cd; font-size:2.2rem; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 6px 16px rgba(140,47,47,.4);
}
.feedback-thanks-ring{
  position:absolute; inset:0; margin:auto; width:84px; height:84px; border-radius:50%;
  border: 4px solid var(--crimson); opacity:0; pointer-events:none;
  animation: feedback-ring-pulse .6s ease-out .3s both;
}
.feedback-thanks h2{ margin-bottom:.3em; }
.feedback-thanks p{ text-align:center; }
.feedback-thanks .btn{ margin-top:1em; }

@keyframes feedback-stamp-slam{
  0%{ transform: scale(2.2) rotate(-30deg); opacity:0; }
  45%{ transform: scale(.92) rotate(4deg); opacity:1; }
  65%{ transform: scale(1.06) rotate(-3deg); }
  100%{ transform: scale(1) rotate(0deg); }
}
@keyframes feedback-ring-pulse{
  0%{ transform: scale(.8); opacity:.8; }
  100%{ transform: scale(1.6); opacity:0; }
}
@media (prefers-reduced-motion: reduce){
  .feedback-thanks-stamp{ animation: none; }
  .feedback-thanks-ring{ animation: none; display:none; }
}

/* بطاقات "كيف تلعب" المتدرّجة — كل فقرة في بطاقة مستقلة، يتنقّل بينها المستخدم بزر
   "التالي" بدل عرضها كلها دفعة واحدة بشريط تمرير طويل */
.modal-steps{ position:relative; }
.modal-step-card{ display:none; }
.modal-step-card.active{ display:block; animation: modal-step-in .25s ease; }
.modal-step-card p{ margin:0; }
@keyframes modal-step-in{
  from{ opacity:0; transform: translateY(6px); }
  to{ opacity:1; transform: translateY(0); }
}
.modal-dots{ display:flex; gap:.45em; justify-content:center; margin: 1.2em 0; }
.modal-dot{
  width:7px; height:7px; border-radius:50%; background: var(--ash-dim);
  transition: all .2s ease;
}
.modal-dot.active{ width:18px; border-radius:4px; background: var(--crimson); }
#how-to-play-close{
  display:block; width:100%; text-align:center;
  background: var(--crimson); color: #efe4cd; border-color: var(--crimson);
}
#how-to-play-close:hover{ background:#a53a3a; }

@media (max-width: 640px){
  .header-inner{ flex-direction:column; align-items:flex-start; }
  .main-nav{ gap:1em; font-size:.92rem; }
  .modal-overlay{ padding: 1em; align-items: flex-end; }
  .modal-box{ max-width: 100%; max-height: 80vh; padding: 1.3em; }
}