/* ═══════════════════════════════════════════════════
   layout.css — توپبار، سایدبار، گرید، صفحات
   کیمیاگری با حروف — نسخه ۴.۰
   ═══════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════
   MODULE: layout.css — Topbar
   ═══════════════════════════════════════════════════ */
.topbar {
  position:sticky; top:0; z-index:1200;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 16px; height:52px;
  background:rgba(0,0,0,.85); backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(201,168,76,.12);
}
.brand {
  color:var(--gold-light); font-size:13px; letter-spacing:1px;
  font-family:'Vazirmatn', sans-serif; font-weight:600;
}
.menu-btn {
  width:40px; height:40px; border:none; background:transparent; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:5px; padding:8px; border-radius:8px; transition:var(--transition);
}
.menu-btn:hover { background:rgba(201,168,76,.08) }
.menu-btn span {
  display:block; width:22px; height:1.5px; background:var(--gold);
  border-radius:2px; transition:.25s cubic-bezier(.4,0,.2,1); transform-origin:center;
}
.menu-btn.open span:nth-child(1) { transform:translateY(6.5px) rotate(45deg) }
.menu-btn.open span:nth-child(2) { opacity:0; transform:scaleX(0) }
.menu-btn.open span:nth-child(3) { transform:translateY(-6.5px) rotate(-45deg) }

/* ═══════════════════════════════════════════════════
   MODULE: layout.css — Sidebar
   ═══════════════════════════════════════════════════ */
.sidebar-overlay {
  position:fixed; inset:0; z-index:1250;
  background:rgba(0,0,0,.6); backdrop-filter:blur(4px);
  opacity:0; pointer-events:none; transition:var(--transition);
}
.sidebar-overlay.show { opacity:1; pointer-events:auto }

.sidebar {
  position:fixed; top:0; right:0; bottom:0; z-index:1300;
  width:min(300px, 85vw);
  background:#050300; border-left:1px solid rgba(201,168,76,.15);
  transform:translateX(100%); transition:.3s cubic-bezier(.4,0,.2,1);
  display:flex; flex-direction:column; overflow:hidden;
}
.sidebar.show { transform:translateX(0) }

.sidebar-header {
  padding:20px 20px 16px; border-bottom:1px solid rgba(201,168,76,.1);
  display:flex; align-items:center; justify-content:space-between; flex-shrink:0;
}
.sidebar-logo { display:flex; align-items:center; gap:10px }
.sidebar-logo-icon {
  width:36px; height:36px; border:1px solid rgba(201,168,76,.3); border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  font-size:18px; color:var(--gold); background:rgba(201,168,76,.06);
}
.sidebar-logo-name {
  font-family:'Vazirmatn', sans-serif; font-size:12px; font-weight:600;
  color:var(--gold-light); letter-spacing:.5px; line-height:1.5;
}
.sidebar-logo-sub { font-size:9px; color:var(--gold-dim); letter-spacing:1px }
.sidebar-close {
  width:32px; height:32px; border:1px solid rgba(201,168,76,.15); border-radius:6px;
  background:transparent; color:var(--ink-dim); cursor:pointer;
  display:flex; align-items:center; justify-content:center; font-size:14px; transition:.15s;
}
.sidebar-close:hover { border-color:var(--gold-dim); color:var(--gold) }
.sidebar-body { flex:1; overflow-y:auto; padding:8px 0 }
.sidebar-section-label {
  padding:12px 20px 6px; font-size:10px; color:var(--gold-dim);
  letter-spacing:1px; font-family:'Vazirmatn', sans-serif; font-weight:500;
}
.sidebar-item {
  width:100%; text-align:right; border:none; background:transparent;
  color:var(--ink-dim); padding:11px 20px; font-family:inherit; font-size:14px;
  cursor:pointer; display:flex; align-items:center; gap:12px;
  transition:.15s; position:relative;
}
.sidebar-item:hover { background:rgba(201,168,76,.06); color:var(--ink) }
.sidebar-item.active-page { color:var(--gold-light) }
.sidebar-item.active-page::before {
  content:''; position:absolute; right:0; top:25%; bottom:25%;
  width:2px; background:var(--gold); border-radius:1px;
}
.sidebar-item-ico {
  width:32px; height:32px; border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  font-size:15px; flex-shrink:0;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.06);
}
.sidebar-item:hover .sidebar-item-ico { background:rgba(201,168,76,.08); border-color:rgba(201,168,76,.2) }
.sidebar-item.active-page .sidebar-item-ico { background:rgba(201,168,76,.1); border-color:rgba(201,168,76,.3); color:var(--gold) }
.sidebar-item-label { flex:1; font-family:'Vazirmatn', sans-serif }
.sidebar-item-arrow { font-size:10px; color:var(--gold-dim); opacity:.6 }
.sidebar-divider { height:1px; background:rgba(201,168,76,.06); margin:6px 16px }
.sidebar-footer { padding:14px 20px; border-top:1px solid rgba(201,168,76,.08); flex-shrink:0 }
.sidebar-version { font-size:10px; color:var(--gold-dim); opacity:.5; text-align:center; letter-spacing:.5px; font-family:'Vazirmatn', sans-serif }
.backdrop { position:fixed; inset:0; z-index:1250; display:none }
.backdrop.show { display:block }

/* ═══════════════════════════════════════════════════
   MODULE: layout.css — Start Screen & Method Grid
   ═══════════════════════════════════════════════════ */
.start-screen {
  min-height:calc(100vh - 52px); display:flex;
  align-items:center; justify-content:center; padding:20px; position:relative; z-index:10;
}
.start-wrap { width:min(980px, 100%) }
.start-title { text-align:center; color:var(--gold-light); font-size:28px; margin-bottom:6px }
.start-ornament { text-align:center; color:var(--gold); font-size:22px; margin-bottom:8px }
.start-sub { text-align:center; color:var(--ink-dim); font-size:13px; margin-bottom:28px }

.volume-section { margin:0 auto 28px; max-width:860px }
.volume-title {
  color:var(--gold); font-size:11px; letter-spacing:.5px;
  font-family:'Vazirmatn', sans-serif; font-weight:500;
  text-align:center; margin-bottom:14px;
  display:flex; align-items:center; gap:10px;
}
.volume-title::before, .volume-title::after {
  content:''; flex:1; height:1px; background:linear-gradient(to left, transparent, var(--gold-dim));
}
.volume-title::after { background:linear-gradient(to right, transparent, var(--gold-dim)) }

.method-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(90px, 1fr)); gap:8px }
.method-card {
  background:linear-gradient(135deg, var(--card-a), var(--card-b));
  border:1px solid var(--border); border-radius:3px;
  padding:10px 6px; text-align:center; cursor:not-allowed;
  transition:var(--transition); position:relative;
}
.method-card.active-card { cursor:pointer; border-color:var(--gold-dim) }
.method-card.active-card:hover { border-color:var(--gold); transform:translateY(-2px); box-shadow:0 6px 20px rgba(201,168,76,.2) }
.method-card-code { font-size:11px; color:var(--gold-dim); letter-spacing:.5px; margin-bottom:4px; font-family:'Cinzel', serif }
.method-card.active-card .method-card-code { color:var(--gold) }
.method-card-name { font-size:12px; color:var(--ink-dim); line-height:1.4 }
.method-card.active-card .method-card-name { color:var(--ink) }
.method-card-lock { position:absolute; top:5px; left:6px; font-size:9px; opacity:.3 }
.coming-soon-footer {
  text-align:center; padding:16px; color:var(--gold-dim); font-size:12px;
  letter-spacing:.5px; border:1px dashed rgba(201,168,76,.2); border-radius:4px;
  margin-top:8px; font-family:'Vazirmatn', sans-serif;
}

/* ═══════════════════════════════════════════════════
   MODULE: layout.css — App Section
   ═══════════════════════════════════════════════════ */
.app { display:none; position:relative; z-index:10 }
.container { max-width:1040px; margin:auto; padding:14px 12px 80px }
.layout { display:grid; grid-template-columns:1fr 300px; gap:14px; align-items:start }
.header { text-align:center; padding:20px 0 14px }
.ornament { font-size:22px; color:var(--gold); display:block; margin-bottom:8px }
h1 { font-size:clamp(20px, 5vw, 28px); color:var(--gold-light) }
.subtitle, .small { font-size:12px; color:var(--ink-dim) }

aside { display:none }
@media(min-width:961px) { aside { display:block } }
@media(max-width:960px) { .layout { grid-template-columns:1fr } }
@media(max-width:600px) {
  .tools-grid { grid-template-columns:1fr }
  .tool-card { border-left:none; border-top:1px solid rgba(201,168,76,.08) }
}

/* ═══════════════════════════════════════════════════
   MODULE: layout.css — Bottom Nav & Inner Pages
   ═══════════════════════════════════════════════════ */
.bottom-nav {
  position:fixed; bottom:0; left:0; right:0; z-index:1050;
  display:flex; align-items:center; justify-content:center; gap:10px;
  padding:10px 16px 14px;
  background:linear-gradient(0deg, var(--card-a) 60%, transparent);
  backdrop-filter:blur(6px); border-top:1px solid rgba(201,168,76,.1);
}
.bottom-nav-btn {
  display:flex; align-items:center; gap:6px; padding:9px 18px;
  border-radius:3px; cursor:pointer; font-family:inherit; font-size:13px;
  transition:.15s; border:1px solid var(--border);
  background:linear-gradient(135deg, var(--card-a), var(--card-c)); color:var(--ink-dim);
}
.bottom-nav-btn:hover { border-color:var(--gold-dim); color:var(--gold-light) }
.bottom-nav-btn.primary {
  border-color:var(--gold-dim);
  background:linear-gradient(135deg, rgba(201,168,76,.12), rgba(201,168,76,.04));
  color:var(--gold-light);
}
.bottom-nav-btn.primary:hover { border-color:var(--gold); background:rgba(201,168,76,.18) }
.bottom-nav-ico { font-size:14px }

.inner-page {
  display:none; position:fixed; inset:0; z-index:1100;
  background:var(--bg); overflow-y:auto;
}
.inner-page.show { display:block }
/* هر لایهٔ رابط باید بالاتر از Canvas بماند تا حروف با متن و کنترل‌ها قاطی نشوند. */
.inner-page > :not(#bgCanvas) { z-index:1 }
.inner-page-topbar {
  position:sticky; top:0; z-index:10;
  display:flex; align-items:center; gap:12px; padding:10px 14px;
  background:linear-gradient(135deg, var(--card-a), var(--card-c));
  border-bottom:1px solid var(--border);
}
.inner-back-btn {
  width:34px; height:34px; border:1px solid var(--border); border-radius:var(--radius);
  background:linear-gradient(135deg, var(--card-a), var(--card-c));
  color:var(--ink); font-size:16px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.inner-page-title {
  color:var(--gold-light); font-size:14px; flex:1;
  font-family:'Vazirmatn', sans-serif; font-weight:600;
}
.inner-page-body {
  position:relative; z-index:1;
  max-width:720px; margin:0 auto; padding:24px 16px 90px;
  line-height:2; color:var(--ink-dim); font-size:14px;
}