/* ============================================================
   cinderfall.css — "The Dying Star" theme.
   Palette: crimson #8B0000 / ember #FF6B35 / charcoal #0D0D0D
   ============================================================ */

.cinderfall-panel {
  --theme-primary: #ff6b35;
  --theme-bg: #0d0d0d;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(139,0,0,0.35) 0%, transparent 55%),
    linear-gradient(180deg, rgba(13,13,13,0.96), rgba(8,8,8,0.92));
  color: #f0e0d8;
}

.cinderfall-panel .panel-return { border-color: rgba(255,107,53,0.4); color: #ff8c5a; }
.cinderfall-panel .panel-return:hover { background: rgba(255,107,53,0.15); }
.cinderfall-panel .eyebrow { color: #ff6b35; }
.cinderfall-panel h1 { color: #fff; text-shadow: 0 0 40px rgba(255,107,53,0.6), 0 0 80px rgba(139,0,0,0.5); }
.cinderfall-panel h2 { color: #ffb088; }
.cinderfall-panel h3 { color: #ff6b35; }
.cinderfall-panel p { color: #c9b8b0; }
.cinderfall-panel strong { color: #fff; }
.cinderfall-panel code { background: rgba(255,107,53,0.12); color: #ffb088; }

/* hero */
.cinder-hero { position: relative; min-height: 360px; display: flex; align-items: center; justify-content: center; overflow: hidden; border: 1px solid rgba(255,107,53,0.2); border-radius: 4px; }
.ember-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.cinder-hero-text { position: relative; z-index: 2; text-align: center; padding: 20px; }
.cinder-subtitle { color: #ff8c5a; letter-spacing: 0.08em; text-transform: uppercase; font-size: 13px; margin-top: 8px; }

/* quote */
.cinder-quote {
  margin: 40px 0;
  padding: 24px 28px;
  border-left: 3px solid #ff6b35;
  background: rgba(139,0,0,0.18);
  font-size: clamp(18px, 3vw, 26px);
  font-style: italic;
  color: #f0d8c8;
  font-weight: 500;
}

.muted { color: #8a7268; font-size: 12px; letter-spacing: 0.04em; }

/* solar system mini-map */
.solar-box { position: relative; width: 100%; max-width: 600px; aspect-ratio: 1; margin: 16px auto; border: 1px solid rgba(255,107,53,0.25); border-radius: 4px; overflow: hidden; background: #0d0d0d; }
#solar-canvas { width: 100%; height: 100%; cursor: crosshair; display: block; }
.solar-tooltip {
  position: absolute; z-index: 5; pointer-events: none;
  padding: 6px 10px; background: rgba(13,13,13,0.95); border: 1px solid #ff6b35;
  border-radius: 3px; font-size: 11px; opacity: 0; transition: opacity 120ms;
}
.solar-tooltip.is-visible { opacity: 1; }
.solar-tooltip .ss-name { color: #ff8c5a; font-weight: 700; }
.solar-tooltip .ss-res { color: #c9b8b0; }

/* architecture tree */
.arch-tree { font-size: 13px; background: rgba(0,0,0,0.4); border: 1px solid rgba(255,107,53,0.2); border-radius: 4px; padding: 14px 16px; max-width: 640px; }
.arch-tree details { padding-left: 4px; }
.arch-tree .tree-children { padding-left: 18px; border-left: 1px dashed rgba(255,107,53,0.2); margin-left: 6px; }
.arch-tree summary { cursor: pointer; list-style: none; padding: 2px 0; }
.arch-tree summary::-webkit-details-marker { display: none; }
.arch-tree .tree-row { display: flex; gap: 8px; align-items: center; }
.arch-tree .tree-caret { color: #ff6b35; width: 12px; display: inline-block; transition: transform 150ms; }
.arch-tree details[open] > summary > .tree-row > .tree-caret { transform: rotate(90deg); }
.arch-tree .tree-leaf { color: #5a4a44; }
.arch-tree .tree-label { color: #c9b8b0; }
.arch-tree .tree-dir { color: #ffb088; font-weight: 700; }
.arch-tree summary:hover .tree-label { color: #fff; }

/* stats sidebar */
.cinder-stats {
  margin-top: 48px; padding: 20px 22px;
  background: rgba(139,0,0,0.12); border: 1px solid rgba(255,107,53,0.25);
  border-radius: 4px; max-width: 640px;
}
.stat-row { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid rgba(255,107,53,0.1); font-size: 12px; }
.stat-row:last-child { border-bottom: none; }
.stat-row-label { color: #8a7268; flex: 0 0 150px; text-transform: uppercase; letter-spacing: 0.05em; }
.stat-row-value { color: #ff8c5a; font-weight: 700; margin-left: auto; }
.progress-bar { flex: 1; height: 6px; background: rgba(255,107,53,0.15); border-radius: 3px; overflow: hidden; }
.progress-fill { height: 100%; background: linear-gradient(90deg, #8b0000, #ff6b35); box-shadow: 0 0 8px #ff6b35; }
.stat-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.stat-badge { font-size: 10px; padding: 4px 10px; border: 1px solid rgba(255,107,53,0.4); border-radius: 3px; color: #ffb088; letter-spacing: 0.05em; }

.cinderfall-cta { margin-top: 16px; }
.cinderfall-cta:hover { box-shadow: 0 0 20px rgba(255,107,53,0.5); }