/* ══════════════════════════════════════════════════
   WIKI LAYOUT
   [BizPlay side menu 64px] [Wiki side menu 44px→170px] [Content]
   ══════════════════════════════════════════════════ */

.wiki-layout {
  margin-left: calc(var(--side-w) + 44px);
  padding-top: 68px;
  min-height: 100vh;
}

/* ── WIKI SIDE MENU — compact secondary menu ── */
.wiki-side-menu {
  position: fixed;
  top: 68px;
  left: var(--side-w);
  height: calc(100vh - 68px);
  z-index: 85;
}

.wiki-side-inner {
  width: 44px;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 0.75rem 0.3rem;
  background: linear-gradient(180deg, var(--glass-b) 0%, var(--glass-c) 100%);
  backdrop-filter: blur(20px) saturate(1.8);
  -webkit-backdrop-filter: blur(20px) saturate(1.8);
  border-right: 1.5px solid var(--glass-border);
  box-shadow: 3px 0 16px rgba(37,99,235,0.05);
  transition: width 0.3s cubic-bezier(0.34, 1.2, 0.64, 1);
  scrollbar-width: none;
}
.wiki-side-inner::-webkit-scrollbar { display: none; }
.wiki-side-menu:hover .wiki-side-inner { width: 170px; }

/* Items — tighter padding than BizPlay menu */
.wiki-side-item {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.42rem 0.45rem;
  border-radius: 8px;
  cursor: pointer;
  color: var(--text2);
  border: 1px solid transparent;
  transition: all 0.18s;
  flex-shrink: 0;
  white-space: nowrap;
  overflow: hidden;
  user-select: none;
}
.wiki-side-item:hover { background: rgba(37,99,235,0.09); transform: translateX(2px); }
.wiki-side-item.active { background: rgba(37,99,235,0.11); border-color: rgba(37,99,235,0.18); }
.wiki-side-item:hover .wiki-side-icon,
.wiki-side-item.active .wiki-side-icon { color: var(--accent); }
.wiki-side-item.active .wiki-side-label { color: var(--accent); }

/* Icon — 15px vs BizPlay's 20px */
.wiki-side-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  color: var(--text2);
  transition: color 0.18s;
}
.wiki-side-icon i { display: flex; align-items: center; justify-content: center; }
.wiki-side-icon svg { width: 15px; height: 15px; stroke: currentColor; }

/* Label — hidden, appears on hover */
.wiki-side-label {
  font-family: 'LazyDog', sans-serif;
  font-size: 0.8rem;
  color: var(--text);
  opacity: 0;
  transition: opacity 0.2s ease 0.05s;
  pointer-events: none;
}
.wiki-side-menu:hover .wiki-side-label { opacity: 1; }

/* ── WIKI MAIN CONTENT ── */
.wiki-main {
  padding: 2.8rem 3.5rem 6rem;
  max-width: 860px;
}

/* ══════════════════════════════════════════════════
   ARTICLE ANIMATIONS
   ══════════════════════════════════════════════════ */
@keyframes wikiTitleIn {
  from { opacity: 0; transform: translateY(-14px) scale(0.97); }
  to   { opacity: 1; transform: none; }
}
@keyframes wikiCardIn {
  from { opacity: 0; transform: translateX(-12px); }
  to   { opacity: 1; transform: none; }
}
@keyframes wikiQCardIn {
  from { opacity: 0; transform: translateY(20px) scale(0.94); }
  to   { opacity: 1; transform: none; }
}
@keyframes wikiFaqIn {
  from { opacity: 0; transform: translateX(10px); }
  to   { opacity: 1; transform: none; }
}

.wiki-page-content.entering .wiki-article-header { animation: wikiTitleIn 0.4s cubic-bezier(0.34,1.2,0.64,1) both; }
.wiki-page-content.entering .wiki-h2            { animation: wikiCardIn 0.32s ease both; }
.wiki-page-content.entering .wiki-card          { animation: wikiCardIn 0.35s cubic-bezier(0.34,1.2,0.64,1) both; }
.wiki-page-content.entering .wiki-info-box      { animation: wikiCardIn 0.35s cubic-bezier(0.34,1.2,0.64,1) 0.05s both; }
.wiki-page-content.entering .wiki-quick-card    { animation: wikiQCardIn 0.4s cubic-bezier(0.34,1.56,0.64,1) both; }
.wiki-page-content.entering .wiki-faq-item      { animation: wikiFaqIn 0.3s ease both; }
.wiki-page-content.entering .wiki-shortcuts-table { animation: wikiCardIn 0.35s cubic-bezier(0.34,1.2,0.64,1) 0.1s both; }

.wiki-page-content.entering .wiki-card:nth-child(1)      { animation-delay: 0.04s; }
.wiki-page-content.entering .wiki-card:nth-child(2)      { animation-delay: 0.09s; }
.wiki-page-content.entering .wiki-card:nth-child(3)      { animation-delay: 0.14s; }
.wiki-page-content.entering .wiki-card:nth-child(4)      { animation-delay: 0.19s; }
.wiki-page-content.entering .wiki-card:nth-child(5)      { animation-delay: 0.22s; }
.wiki-page-content.entering .wiki-card:nth-child(6)      { animation-delay: 0.25s; }
.wiki-page-content.entering .wiki-quick-card:nth-child(1){ animation-delay: 0.03s; }
.wiki-page-content.entering .wiki-quick-card:nth-child(2){ animation-delay: 0.07s; }
.wiki-page-content.entering .wiki-quick-card:nth-child(3){ animation-delay: 0.11s; }
.wiki-page-content.entering .wiki-quick-card:nth-child(4){ animation-delay: 0.15s; }
.wiki-page-content.entering .wiki-quick-card:nth-child(5){ animation-delay: 0.19s; }
.wiki-page-content.entering .wiki-quick-card:nth-child(6){ animation-delay: 0.23s; }
.wiki-page-content.entering .wiki-quick-card:nth-child(7){ animation-delay: 0.27s; }
.wiki-page-content.entering .wiki-quick-card:nth-child(8){ animation-delay: 0.31s; }
.wiki-page-content.entering .wiki-faq-item:nth-child(1)  { animation-delay: 0.04s; }
.wiki-page-content.entering .wiki-faq-item:nth-child(2)  { animation-delay: 0.09s; }
.wiki-page-content.entering .wiki-faq-item:nth-child(3)  { animation-delay: 0.14s; }
.wiki-page-content.entering .wiki-faq-item:nth-child(4)  { animation-delay: 0.18s; }
.wiki-page-content.entering .wiki-faq-item:nth-child(5)  { animation-delay: 0.22s; }
.wiki-page-content.entering .wiki-faq-item:nth-child(6)  { animation-delay: 0.26s; }
.wiki-page-content.entering .wiki-faq-item:nth-child(7)  { animation-delay: 0.30s; }

/* ── ARTICLE STYLES ── */
.wiki-article-header { margin-bottom: 2rem; padding-bottom: 1.2rem; border-bottom: 2px solid rgba(37,99,235,0.1); }
.wiki-article-title { font-family: 'LazyDog',sans-serif; font-size: clamp(1.8rem,4vw,2.6rem); color: var(--text); margin-bottom: 0.5rem; line-height: 1.1; }
.wiki-article-lead  { font-size: 1rem; font-weight: 600; color: var(--text2); line-height: 1.6; }

.wiki-h2 { font-family: 'LazyDog',sans-serif; font-size: 1.15rem; color: var(--text); margin: 2rem 0 0.75rem; padding-bottom: 0.4rem; border-bottom: 1px solid rgba(37,99,235,0.08); }

.wiki-card { background: linear-gradient(135deg,var(--glass-c) 0%,var(--glass-d) 100%); backdrop-filter: blur(14px); border: 1.5px solid var(--glass-border); border-radius: var(--radius); padding: 1.2rem 1.5rem; margin-bottom: 0.9rem; box-shadow: var(--shadow); }
.wiki-card-desc { font-size: 0.9rem; font-weight: 600; color: var(--text2); line-height: 1.65; margin-bottom: 0.6rem; }
.wiki-card-desc:last-child { margin-bottom: 0; }

.wiki-list { list-style: none; display: flex; flex-direction: column; gap: 0.45rem; margin: 0; padding: 0; }
.wiki-list li { font-size: 0.88rem; font-weight: 600; color: var(--text2); padding-left: 1.2rem; position: relative; line-height: 1.5; }
.wiki-list li::before { content: '▸'; position: absolute; left: 0; color: var(--accent); font-size: 0.75em; top: 2px; }
.wiki-list strong { color: var(--text); font-weight: 700; }

.wiki-info-box { display: flex; gap: 0.8rem; align-items: flex-start; background: rgba(37,99,235,0.06); border: 1.5px solid rgba(37,99,235,0.18); border-left: 4px solid var(--accent); border-radius: var(--radius-sm); padding: 1rem 1.2rem; font-size: 0.88rem; font-weight: 600; color: var(--text2); line-height: 1.55; margin-bottom: 1.5rem; }
.wiki-info-icon { font-size: 1.2rem; flex-shrink: 0; margin-top: 1px; }
.wiki-info-box code { font-family:'Courier New',monospace; font-size:0.85em; background:rgba(37,99,235,0.08); border:1px solid rgba(37,99,235,0.15); padding:1px 5px; border-radius:4px; color:var(--accent); }
.wiki-info-box strong { color: var(--text); }

.wiki-cards-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(160px,1fr)); gap: 0.9rem; margin-bottom: 1.5rem; }
.wiki-quick-card { display: flex; flex-direction: column; gap: 0.3rem; padding: 1.1rem 1rem; background: linear-gradient(135deg,var(--glass-c) 0%,var(--glass-d) 100%); border: 1.5px solid var(--glass-border); border-radius: var(--radius); box-shadow: var(--shadow); cursor: pointer; text-align: left; transition: all 0.2s cubic-bezier(0.34,1.56,0.64,1); }
.wiki-quick-card:hover { border-color: rgba(37,99,235,0.3); transform: translateY(-3px) scale(1.02); box-shadow: var(--shadow-hover); }
.wqc-icon  { font-size: 1.6rem; line-height: 1; margin-bottom: 0.2rem; }
.wqc-title { font-family: 'LazyDog',sans-serif; font-size: 0.88rem; color: var(--text); }
.wqc-desc  { font-size: 0.74rem; font-weight: 600; color: var(--text2); }

.wiki-shortcuts-table { background: linear-gradient(135deg,var(--glass-c) 0%,var(--glass-d) 100%); border: 1.5px solid var(--glass-border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.wiki-shortcut-row { display: grid; grid-template-columns: 180px 1fr; padding: 0.75rem 1.2rem; border-bottom: 1px solid rgba(37,99,235,0.06); font-size: 0.88rem; font-weight: 600; color: var(--text2); gap: 1rem; align-items: center; }
.wiki-shortcut-row.header { font-family:'LazyDog',sans-serif; font-size:0.7rem; text-transform:uppercase; letter-spacing:0.1em; opacity:0.6; background:rgba(37,99,235,0.04); }
.wiki-shortcut-row:last-child { border-bottom: none; }

.wiki-faq-item { border: 1.5px solid var(--glass-border); border-radius: var(--radius-sm); margin-bottom: 0.7rem; overflow: hidden; background: linear-gradient(135deg,var(--glass-c) 0%,var(--glass-d) 100%); }
.wiki-faq-q { font-family:'LazyDog',sans-serif; font-size:0.9rem; color:var(--text); padding:0.95rem 1.2rem; cursor:pointer; user-select:none; display:flex; justify-content:space-between; align-items:center; gap:1rem; }
.wiki-faq-q::after { content:'▸'; color:var(--accent); transition:transform 0.2s; font-size:0.75em; flex-shrink:0; }
.wiki-faq-item.open .wiki-faq-q::after { transform:rotate(90deg); }
.wiki-faq-a { font-size:0.88rem; font-weight:600; color:var(--text2); line-height:1.6; padding:0 1.2rem 0.95rem; display:none; }
.wiki-faq-item.open .wiki-faq-a { display:block; }

code { font-family:'Courier New',monospace; font-size:0.85em; background:rgba(37,99,235,0.07); border:1px solid rgba(37,99,235,0.12); padding:1px 6px; border-radius:4px; color:var(--accent); }
kbd  { display:inline-block; font-family:'Courier New',monospace; font-size:0.8em; padding:1px 6px; background:var(--bg3); border:1.5px solid var(--card-border); border-radius:5px; box-shadow:0 2px 0 var(--card-border); color:var(--text); vertical-align:middle; }

/* ── WIKI BADGES ── */
.wiki-badges-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 1rem; margin-top: 0.5rem; }
.wiki-badge-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.5rem; padding: 1.4rem 1rem; background: linear-gradient(135deg, var(--glass-c), var(--glass-d)); border: 1.5px solid var(--glass-border); border-radius: var(--radius-sm); }
.wb-icon { width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; }
.wb-badge-emoji { font-size: 2.2rem; line-height: 1; }
.wb-badge-img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; border: 2px solid var(--glass-border); }
.wb-name { font-family: 'LazyDog', sans-serif; font-size: 0.88rem; color: var(--text); }
.wb-desc { font-size: 0.78rem; color: var(--text2); line-height: 1.4; }
.wb-criteria { font-family: 'LazyDog', sans-serif; font-size: 0.7rem; color: var(--accent); margin-top: 2px; }

/* ── MOBILE ── */
@media (max-width: 900px) {
  .wiki-layout { margin-left: 0; }
  .wiki-side-menu { display: none; }
  .wiki-main { padding: 1.5rem 1rem 4rem; }
}