/* ═══ Help page — layout (moved out of the old inline <style>) ═══ */
html, body { height: 100%; overflow: hidden; }

.help-layout { display: grid; grid-template-columns: 220px 1fr; flex: 1; min-height: 0; }
.help-sidebar {
  border-right: 1px solid var(--border); background: var(--chrome-lo);
  padding: 24px 16px; overflow-y: auto; position: sticky; top: 0;
}
.help-sidebar h3 {
  font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-dim); margin: 20px 0 10px;
}
.help-sidebar h3:first-child { margin-top: 0; }
.help-nav { list-style: none; padding: 0; }
.help-nav li { margin-bottom: 2px; }
.help-nav a {
  display: block; padding: 5px 10px; border-radius: 5px; font-size: 12px;
  color: var(--text-mid); text-decoration: none; transition: background 0.1s, color 0.1s;
}
.help-nav a:hover { background: var(--border); color: var(--text); text-decoration: none; }
.help-nav a.active { background: rgba(74,158,192,0.1); color: var(--accent-text); font-weight: 600; }

.help-content { padding: 56px 56px; overflow-y: auto; max-width: 820px; }
.help-content h1 { font-size: 20px; font-weight: 700; margin-bottom: 6px; }
.help-content .article-meta { font-size: 11px; color: var(--text-dim); margin-bottom: 28px; }
.help-content h2 { font-size: 14px; font-weight: 700; margin: 34px 0 10px; }
.help-content h3 { font-size: 12.5px; font-weight: 700; margin: 22px 0 8px; }
.help-content p { font-size: 12px; line-height: 1.75; color: var(--text-mid); margin-bottom: 14px; }
.help-content ol, .help-content ul { padding-left: 20px; margin-bottom: 14px; }
.help-content li { font-size: 12px; line-height: 1.7; color: var(--text-mid); margin-bottom: 5px; }
.help-content hr { border: none; border-top: 1px solid var(--border); margin: 44px 0; }
.help-content code {
  font-family: monospace; background: var(--chrome-lo); border: 1px solid var(--border);
  border-radius: 3px; padding: 1px 5px; font-size: 11px;
}
.help-kbd {
  display: inline-block; font-family: monospace; font-size: 10.5px; line-height: 1;
  padding: 3px 6px; border: 1px solid var(--border); border-bottom-width: 2px;
  border-radius: 4px; background: var(--chrome); color: var(--text);
}
.help-tip-box {
  border: 1px solid var(--border); border-left: 3px solid var(--accent);
  background: var(--chrome-lo); border-radius: 6px; padding: 10px 14px;
  font-size: 11.5px; line-height: 1.65; color: var(--text-mid); margin: 14px 0 20px;
}
.help-tip-box strong { color: var(--text); }

/* ═══ Demo panels (SF2_HELPDEMO) ═══ */
.hd-demo {
  border: 1px solid var(--border); border-radius: 8px; overflow: hidden;
  background: var(--chrome); margin: 18px 0 24px; user-select: none;
}
.hd-stage {
  position: relative; height: 225px; overflow: hidden;
  background: repeating-conic-gradient(rgba(127,127,127,0.07) 0% 25%, transparent 0% 50%) 50% / 16px 16px;
  display: flex; flex-direction: column; padding: 12px; gap: 8px;
}
.hd-cap {
  padding: 8px 14px; font-size: 11px; line-height: 1.5; color: var(--text-mid);
  border-top: 1px solid var(--border); background: var(--chrome-lo); min-height: 33px;
}
.hd-missing { display: none; }

/* cursor */
.hd-cursor {
  position: absolute; left: 0; top: 0; z-index: 40; pointer-events: none;
  transform: translate(30px, 30px); filter: drop-shadow(0 1px 2px rgba(0,0,0,0.4));
}
.hd-cursor.down svg { transform: scale(0.82); }
.hd-cursor svg { transition: transform 0.1s; display: block; }
.hd-ripple {
  position: absolute; z-index: 39; width: 8px; height: 8px; margin: -4px 0 0 -4px;
  border-radius: 50%; border: 2px solid var(--accent); pointer-events: none;
  animation: hd-rip 0.45s ease-out forwards;
}
@keyframes hd-rip { to { transform: scale(3.4); opacity: 0; } }
.hd-pressed { filter: brightness(0.88); }

/* generic mock chrome */
.hd-row { display: flex; align-items: center; gap: 6px; }
.hd-col { display: flex; flex-direction: column; gap: 6px; }
.hd-cols { display: flex; gap: 12px; flex: 1; min-height: 0; align-items: stretch; }
.hd-grow { flex: 1; min-width: 0; }
.hd-cols > .hd-grow { display: flex; flex-direction: column; }   /* canvas children fill the column */
.hd-flex { flex: 1; }
.hd-label { font-size: 9px; font-weight: 700; letter-spacing: 0.08em; color: var(--text-dim); }
.hd-dim { font-size: 10.5px; color: var(--text-dim); }
.hdb {
  appearance: none; font: 600 11px 'Noto Sans', sans-serif; color: var(--text);
  background: var(--chrome); border: 1px solid var(--border); border-radius: 5px;
  padding: 4px 10px; cursor: default; white-space: nowrap;
}
.hdb.accent, .hdb.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.hdc {
  font-size: 10.5px; font-weight: 600; padding: 3px 9px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--chrome); color: var(--text-mid);
}
.hdc.on { border-color: var(--accent); color: var(--accent-text); background: rgba(74,158,192,0.12); }
.hd-input {
  min-width: 110px; height: 24px; padding: 0 8px; font: 600 11px monospace;
  color: var(--text); background: var(--chrome); border: 1px solid var(--border);
  border-radius: 5px; display: flex; align-items: center;
}
.hd-toast {
  position: absolute; left: 50%; bottom: 12px; transform: translate(-50%, 10px);
  background: #1e2228; color: #e0e4ea; font-size: 11px; font-weight: 600;
  padding: 6px 14px; border-radius: 6px; opacity: 0; transition: all 0.25s; z-index: 45;
}
.hd-toast.on { opacity: 1; transform: translate(-50%, 0); }

/* windows / panels */
.hdw { border: 1px solid var(--border); border-radius: 7px; background: var(--chrome); overflow: hidden; }
.hdw-title {
  font-size: 10px; font-weight: 700; color: var(--text-mid); padding: 5px 10px;
  background: var(--chrome-lo); border-bottom: 1px solid var(--border);
}
.hdw-body { padding: 6px; }
.hd-panel { width: 170px; flex: 0 0 auto; }

/* app bar (tour demo) */
.hd-appbar {
  display: flex; align-items: center; gap: 4px; padding: 6px 10px;
  background: var(--chrome); border: 1px solid var(--border); border-radius: 7px;
}
.hd-brand { font-size: 11px; font-weight: 800; color: var(--accent-text); margin-right: 8px; }
.hd-tab {
  appearance: none; border: none; background: transparent; font: 600 11px 'Noto Sans', sans-serif;
  color: var(--text-mid); padding: 5px 9px; border-radius: 5px; cursor: default;
}
.hd-tab.on { background: rgba(74,158,192,0.14); color: var(--accent-text); }
.hd-pill { border-radius: 12px; }
.hd-bignote {
  flex: 1; display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 600; color: var(--text-dim);
  border: 1px dashed var(--border); border-radius: 7px; background: var(--chrome-lo);
}
.hd-menu {
  position: absolute; right: 14px; top: 46px; z-index: 30; width: 110px;
  background: var(--chrome); border: 1px solid var(--border); border-radius: 7px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.18); padding: 4px; display: flex; flex-direction: column;
}
.hd-menu-item {
  appearance: none; border: none; background: transparent; text-align: left;
  font: 600 11px 'Noto Sans', sans-serif; color: var(--text-mid); padding: 5px 8px; border-radius: 4px;
}
.hd-menu-item.on { color: var(--accent-text); background: rgba(74,158,192,0.12); }

/* cards (files demo) */
.hd-cardgrid { display: flex; gap: 8px; flex-wrap: wrap; }
.hd-card {
  position: relative; width: 84px; border: 1px solid var(--border); border-radius: 7px;
  background: var(--chrome); padding: 8px 4px 6px; display: flex; flex-direction: column;
  align-items: center; gap: 5px;
}
.hd-card-name { font-size: 9.5px; font-weight: 600; color: var(--text-mid); white-space: nowrap; overflow: hidden; max-width: 76px; }
.hd-card.is-ref { border-style: dashed; }
.hd-bookmark { position: absolute; top: 2px; right: 4px; font-size: 10px; }
.hd-preview { width: 130px; animation: hd-pop 0.25s ease-out; }
@keyframes hd-pop { from { transform: scale(0.9); opacity: 0; } }

/* canvas / stage scenery */
.hd-canvas {
  position: relative; flex: 1; min-height: 0; border: 1px solid var(--border);
  border-radius: 7px; background: linear-gradient(#cfe6f2, #eef6fa 70%); overflow: hidden;
}
.hd-ground { position: absolute; left: 0; right: 0; bottom: 26px; height: 2px; background: #7a9c56; box-shadow: 0 2px 0 rgba(122,156,86,0.4); }
.hd-abs, .hd-stage .hd-abs { position: absolute !important; }   /* beats .hd-char's position:relative */
.hd-selbox { position: absolute; inset: -5px; border: 1px dashed var(--accent); border-radius: 3px; }

/* real DF sprites (baked frame stacks in help/assets/) */
.hd-sprite { image-rendering: pixelated; display: block; }
.hd-flip { transform: scaleX(-1); }
.hd-abs > .hd-sprite { transition: opacity 0.25s; }
.hd-preview-char { position: absolute; inset: 0; margin: auto; }
.hd-charprev { flex: 0 0 170px; display: flex; align-items: center; justify-content: center; }
.hd-swing { animation: hd-swingf 0.5s ease-out; }
@keyframes hd-swingf { 35% { transform: rotate(-10deg) translateX(6px); } 65% { transform: rotate(4deg) translateX(10px); } }
.hd-roam { animation: hd-roamf 3.4s ease-in-out infinite; }
.hd-roam.alt { animation-duration: 4.1s; animation-delay: 0.6s; }
@keyframes hd-roamf {
  0%, 12% { transform: translateX(0); }
  30% { transform: translateX(-56px) scaleX(1); }
  38% { transform: translateX(-56px) scaleX(-1); }
  62% { transform: translateX(30px) scaleX(-1); }
  70% { transform: translateX(30px) scaleX(1); }
  100% { transform: translateX(0); }
}
.hd-knock { animation: hd-knockf 1s ease-out; }
@keyframes hd-knockf { 15% { transform: translateX(26px); } 45% { transform: translateX(26px); } 100% { transform: translateX(0); } }
.hd-nametag {
  position: absolute; bottom: 8px; background: rgba(30,34,40,0.85); color: #fff;
  font-size: 9px; font-weight: 600; padding: 2px 7px; border-radius: 4px; transition: left 0.1s linear;
}
/* Misc flipbook (real LevelUp frames) */
.hd-fxview { background: linear-gradient(#20242c, #2a3038); display: flex; align-items: flex-end; justify-content: center; overflow: hidden; }
.hd-fx { max-height: 100%; width: auto !important; }
.hd-framestrip { display: flex; gap: 5px; }
.hd-frame {
  width: 34px; height: 34px; border: 1px solid var(--border); border-radius: 5px;
  background: #2a3038; display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.hd-frame.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.hd-frame-img { max-width: 30px; max-height: 30px; width: auto !important; }

/* maps demo — real grassySoil backdrops (back/0 hills · back/3 tree · bsc tile) */
.hd-mapview { background: linear-gradient(#a8d4ea, #d8ecf6 75%); transition: transform 0.8s ease-in-out; }
.hd-dolly { transform: scale(1.18); }
.hd-par { position: absolute; left: -60px; right: -180px; will-change: transform, background-position; }
.hd-par-bg { bottom: 30px; height: 96px; background: url('assets/back-hills.png') repeat-x bottom; background-size: auto 96px; opacity: 0.85; }
.hd-par-mid { bottom: 28px; height: 150px; }
.hd-tree { position: absolute; bottom: 0; left: 40px; width: 132px !important; }
.hd-tree.t2 { left: 230px; width: 104px !important; }
.hd-par-fg { bottom: 0; height: 30px; background: url('assets/tile-grass.png') repeat-x bottom; background-size: 45px 30px; }
.hd-mapmob { bottom: 28px; left: 190px; }
.hd-letterbox { position: absolute; left: 0; right: 0; height: 26px; background: rgba(16,20,26,0.82); z-index: 6; }
.hd-letterbox.t { top: 0; } .hd-letterbox.b { bottom: 0; }
.hd-toolbar { flex: 0 0 auto; }
.hd-keys { display: flex; gap: 4px; }
.hd-key {
  min-width: 20px; height: 20px; padding: 0 5px; display: inline-flex; align-items: center; justify-content: center;
  font: 700 10px monospace; color: var(--text-mid); background: var(--chrome);
  border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 4px;
}
.hd-key.on { background: var(--accent); border-color: var(--accent); color: #fff; }

/* tiles demo — real grassySoil bsc tile */
.hd-tilegrid { background-image: linear-gradient(rgba(74,158,192,0.12) 1px, transparent 1px), linear-gradient(90deg, rgba(74,158,192,0.12) 1px, transparent 1px); background-size: 45px 30px; background-color: #eef6fa; }
.hd-tilecell { position: absolute; width: 45px; height: 30px; transition: opacity 0.15s; }
.hd-tilecell.on { background: url('assets/tile-grass.png') center / 100% 100%; image-rendering: pixelated; }

/* layer rows (scenes demo) */
.hd-lrow { display: flex; align-items: center; gap: 6px; padding: 4px 6px; border-radius: 5px; font-size: 10.5px; font-weight: 600; color: var(--text-mid); }
.hd-lrow.on { background: rgba(74,158,192,0.14); color: var(--accent-text); }
.hd-lrow.sub { margin-left: 14px; }
.hd-lrow.off .hd-lname { opacity: 0.4; }
.hd-lrow.hd-folder { color: var(--text); }
.hd-eye { font-size: 10px; cursor: default; }
.hd-lname { white-space: nowrap; overflow: hidden; }

/* picker cells + swatches (characters/pets demos) */
.hd-cell {
  width: 38px; height: 38px; border: 1px solid var(--border); border-radius: 6px;
  background: var(--chrome); display: flex; align-items: center; justify-content: center;
}
.hd-cell.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.hd-cell-swatch { width: 20px; height: 12px; border-radius: 6px 6px 0 0; }
.hd-cell-glyph { font-size: 16px; }
.hd-swatch { width: 16px; height: 16px; border-radius: 50%; border: 1px solid rgba(0,0,0,0.25); }

/* chat bubble demo — the game's real ChatBalloon.img/0 9-slice + arrow */
.hd-bubbleview { background: linear-gradient(#cfe6f2, #eef6fa 70%); }
.hd-bubble {
  position: absolute; left: 50%; top: 26px; transform: translateX(-50%);
  min-width: 20px; min-height: 8px; max-width: 220px; padding: 3px 6px;
  border: 6px solid transparent;
  border-image: url('assets/balloon-nine.png') 6 fill stretch;
  image-rendering: pixelated;
  font-size: 11px; font-weight: 600; color: #222; transition: all 0.15s;
}
.hd-bubble-tail {
  position: absolute; left: 50%; bottom: -12px; margin-left: -6px;
  image-rendering: pixelated; transition: all 0.2s;
}
.hd-bubble.tail-right .hd-bubble-tail { left: auto; right: -14px; bottom: 30%; margin-left: 0; transform: rotate(-90deg); }
.hd-bubble-char { left: 50%; transform: translateX(-50%); bottom: 26px; }
/* card art + picker minis */
.hd-card-art { height: 46px; display: flex; align-items: flex-end; justify-content: center; }
.hd-card-art .hd-sprite { max-height: 46px; width: auto !important; }
.hd-cell .hd-cell-mini { max-width: 32px; max-height: 34px; width: auto !important; }
/* tour cast row */
.hd-bignote { flex-direction: column; gap: 10px; }
.hd-bignote-txt { font-size: 13px; font-weight: 600; color: var(--text-dim); }
.hd-bignote-cast { display: flex; align-items: flex-end; gap: 18px; }