/*
 * Hồi Quy: Trung Cổ — Media system ornaments/backgrounds (Phiên 17).
 * docs/MEDIA_SYSTEM.md has the full rationale. Reuses the exact `--hq-*` palette variables from
 * game.css (Phiên 10) — no new color system introduced. Every background here is a pure CSS
 * gradient or an inline (data-URI) SVG ornament — NOTHING in this file fetches a remote image, and
 * every ornament is abstract/geometric (lines, flourishes, brackets) so it is structurally
 * impossible for any of them to depict gore ("không đồ họa máu me" — docs/17).
 *
 * Class naming: `.hq-bg-{theme}` matches `Presentation\Media\VisualRegistry::cssClassFor()`'s
 * output exactly (test-enforced — every theme VisualRegistry can return has a rule here).
 */

.hq-scene-background {
  position: relative;
  transition: background 600ms ease;
  background-color: var(--hq-paper);
}

/* --- 10 scene background themes ------------------------------------------------------------ */

.hq-bg-village {
  background: radial-gradient(ellipse at top, rgba(63, 92, 58, 0.18), transparent 65%), var(--hq-paper);
}

.hq-bg-forest {
  background: radial-gradient(ellipse at bottom, rgba(63, 92, 58, 0.28), transparent 70%), var(--hq-paper);
}

.hq-bg-court {
  background: radial-gradient(ellipse at top, rgba(201, 162, 39, 0.14), transparent 60%), var(--hq-paper-light);
}

.hq-bg-war {
  background: radial-gradient(ellipse at center, rgba(122, 31, 43, 0.22), transparent 70%), var(--hq-paper);
}

.hq-bg-market {
  background: radial-gradient(ellipse at top, rgba(201, 162, 39, 0.1), transparent 55%), var(--hq-paper);
}

.hq-bg-hell {
  background: radial-gradient(ellipse at center, rgba(192, 57, 43, 0.12), transparent 75%), #120c08;
}

.hq-bg-devil {
  background: radial-gradient(ellipse at top, rgba(138, 79, 196, 0.22), transparent 65%), var(--hq-paper);
}

.hq-bg-divine {
  background: radial-gradient(ellipse at top, rgba(201, 162, 39, 0.22), transparent 70%), var(--hq-night);
}

.hq-bg-trial {
  background: radial-gradient(ellipse at top, rgba(28, 43, 74, 0.3), transparent 65%), var(--hq-paper);
}

.hq-bg-home {
  background: radial-gradient(ellipse at bottom, rgba(201, 162, 39, 0.08), transparent 60%), var(--hq-paper-light);
}

/* --- Scene illustration box: themed silhouette (Phiên 19, bản 1.0.5) ------------------------- */
/*
 * BUG FIX (báo lỗi thật từ chủ dự án, kèm ảnh chụp: "phần trên không hiện hình ảnh và thông tin gì"):
 * `.hq-illustration` (game.css) trước đây LUÔN LÀ một khối gradient trống, không đổi theo cảnh, không
 * có bất kỳ hình vẽ nào — dù dữ liệu `visual_theme` (10 theme, Phiên 17) đã có sẵn và đã được gán vào
 * `root` qua class `hq-bg-{theme}` (`app.js`'s `renderMainScene()`), riêng `.hq-illustration` thì
 * chưa từng nhận class đó. Từ bản 1.0.5: `renderMainScene()` gán CÙNG class `hq-bg-{theme}` cho
 * chính `.hq-illustration`, và 10 luật dưới đây vẽ một silhouette hình học trừu tượng phù hợp từng
 * theme (nhà/cây cho làng, hàng thông cho rừng, vương miện cho triều đình, cán cân cho pháp nạn...) —
 * SVG nhúng trực tiếp (data-URI), không phải ảnh tải từ máy chủ, không phải ảnh chụp/vẽ tay thật.
 * Vẫn tuân thủ đúng nguyên tắc "không đồ họa máu me theo cấu trúc" của toàn bộ file này: mọi hình chỉ
 * là đường nét/hình học, không có nhân vật/cảnh bạo lực nào được mô tả.
 */
.hq-illustration.hq-bg-village {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 140'%3E%3Cg fill='none' stroke='%235c8a54' stroke-width='2' opacity='0.55'%3E%3Cpath d='M40 120 L360 120'/%3E%3Cpath d='M70 120 L70 85 L110 55 L150 85 L150 120'/%3E%3Cpath d='M90 120 L90 100 L110 100 L110 120'/%3E%3Ccircle cx='280' cy='90' r='24'/%3E%3Cpath d='M280 114 L280 132'/%3E%3Ccircle cx='230' cy='40' r='14'/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(135deg, var(--hq-night), var(--hq-moss) 140%);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 85% auto, cover;
}

.hq-illustration.hq-bg-forest {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 140'%3E%3Cg fill='none' stroke='%235c8a54' stroke-width='2' opacity='0.55'%3E%3Cpath d='M70 130 L70 60 L45 100 L95 100 Z'/%3E%3Cpath d='M160 130 L160 40 L120 95 L200 95 Z'/%3E%3Cpath d='M260 130 L260 55 L225 105 L295 105 Z'/%3E%3Cpath d='M340 130 L340 70 L312 108 L368 108 Z'/%3E%3Cpath d='M10 130 L390 130'/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(135deg, var(--hq-night), var(--hq-moss-bright) 140%);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 85% auto, cover;
}

.hq-illustration.hq-bg-court {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 140'%3E%3Cg fill='none' stroke='%23c9a227' stroke-width='2' opacity='0.55'%3E%3Cpath d='M60 130 L60 40 M340 130 L340 40'/%3E%3Cpath d='M40 40 L80 40 M320 40 L360 40'/%3E%3Cpath d='M160 130 L160 70 L175 90 L200 55 L225 90 L240 70 L240 130'/%3E%3Ccircle cx='160' cy='60' r='6'/%3E%3Ccircle cx='200' cy='45' r='7'/%3E%3Ccircle cx='240' cy='60' r='6'/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(135deg, var(--hq-paper-light), var(--hq-gold-bright) 180%);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 85% auto, cover;
}

.hq-illustration.hq-bg-war {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 140'%3E%3Cg fill='none' stroke='%23a8303f' stroke-width='2.5' opacity='0.55'%3E%3Cpath d='M120 20 L280 120'/%3E%3Cpath d='M280 20 L120 120'/%3E%3Cpath d='M120 20 L150 30 L120 45 Z'/%3E%3Cpath d='M280 20 L250 30 L280 45 Z'/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(135deg, var(--hq-night), var(--hq-wine) 140%);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 70% auto, cover;
}

.hq-illustration.hq-bg-market {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 140'%3E%3Cg fill='none' stroke='%23c9a227' stroke-width='2' opacity='0.55'%3E%3Cpath d='M40 130 L40 70 L100 50 L160 70 L160 130'/%3E%3Cpath d='M40 70 L160 70'/%3E%3Cpath d='M220 130 L220 75 L280 55 L340 75 L340 130'/%3E%3Cpath d='M220 75 L340 75'/%3E%3Ccircle cx='100' cy='115' r='10'/%3E%3Ccircle cx='280' cy='115' r='10'/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(135deg, var(--hq-paper-light), var(--hq-gold-bright) 160%);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 85% auto, cover;
}

.hq-illustration.hq-bg-hell {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 140'%3E%3Cg fill='none' stroke='%23c0392b' stroke-width='2' opacity='0.5'%3E%3Cpath d='M60 130 Q80 90 60 70 Q95 85 100 50 Q120 90 140 65 Q150 100 180 75 Q170 110 200 100'/%3E%3Ccircle cx='250' cy='40' r='3'/%3E%3Ccircle cx='290' cy='60' r='2.5'/%3E%3Ccircle cx='320' cy='30' r='3'/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(135deg, #120c08, var(--hq-danger) 200%);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 70% auto, cover;
}

.hq-illustration.hq-bg-devil {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 140'%3E%3Cg fill='none' stroke='%238a4fc4' stroke-width='2' opacity='0.55'%3E%3Ccircle cx='200' cy='70' r='50'/%3E%3Cpath d='M180 55 L220 55 L200 90 Z'/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(135deg, var(--hq-paper), var(--hq-devil-purple) 160%);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 55% auto, cover;
}

.hq-illustration.hq-bg-divine {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 140'%3E%3Cg fill='none' stroke='%23c9a227' stroke-width='2' opacity='0.6'%3E%3Ccircle cx='200' cy='60' r='22'/%3E%3Cpath d='M200 20 L200 5 M240 40 L252 28 M160 40 L148 28 M240 80 L252 92 M160 80 L148 92 M200 100 L200 115'/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(135deg, var(--hq-night), var(--hq-gold-bright) 180%);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 55% auto, cover;
}

.hq-illustration.hq-bg-trial {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 140'%3E%3Cg fill='none' stroke='%23b9ab8c' stroke-width='2' opacity='0.55'%3E%3Cpath d='M200 20 L200 120'/%3E%3Cpath d='M140 45 L260 35'/%3E%3Cpath d='M140 45 L120 80 L160 80 Z'/%3E%3Cpath d='M260 35 L245 75 L280 75 Z'/%3E%3Cpath d='M170 120 L230 120'/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(135deg, var(--hq-paper), var(--hq-night-bright) 180%);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 55% auto, cover;
}

.hq-illustration.hq-bg-home {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 140'%3E%3Cg fill='none' stroke='%23c9a227' stroke-width='2' opacity='0.55'%3E%3Cpath d='M100 130 L100 70 L200 20 L300 70 L300 130'/%3E%3Cpath d='M170 130 L170 90 L230 90 L230 130'/%3E%3Ccircle cx='140' cy='100' r='10'/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(135deg, var(--hq-paper-light), var(--hq-gold-bright) 200%);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 65% auto, cover;
}

/* --- Ornaments (abstract, local, inline SVG — no remote fetch, no figurative imagery) -------- */

/* Corner flourish: a simple curling line, one per corner via CSS transform, not 4 separate assets. */
.hq-ornament-corner {
  position: absolute;
  width: 36px;
  height: 36px;
  opacity: 0.5;
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M2 2 Q2 20 20 20 Q2 20 2 38' fill='none' stroke='%23c9a227' stroke-width='1.5'/%3E%3C/svg%3E");
}

.hq-ornament-corner--top-left { top: 6px; left: 6px; }
.hq-ornament-corner--top-right { top: 6px; right: 6px; transform: scaleX(-1); }
.hq-ornament-corner--bottom-left { bottom: 6px; left: 6px; transform: scaleY(-1); }
.hq-ornament-corner--bottom-right { bottom: 6px; right: 6px; transform: scale(-1, -1); }

/* Divider: a simple horizontal flourish line between narrative and choices. */
.hq-ornament-divider {
  width: 100%;
  height: 14px;
  margin: 12px 0;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14'%3E%3Cline x1='0' y1='7' x2='85' y2='7' stroke='%23b9ab8c' stroke-width='1' opacity='0.5'/%3E%3Ccircle cx='100' cy='7' r='3' fill='none' stroke='%23c9a227' stroke-width='1.2'/%3E%3Cline x1='115' y1='7' x2='200' y2='7' stroke='%23b9ab8c' stroke-width='1' opacity='0.5'/%3E%3C/svg%3E");
}

/* Devil route's "ô Đức tím" ornament frame — purple, matches docs/15's "ô Đức tím" requirement. */
.hq-ornament-devil-frame {
  border: 1px solid var(--hq-devil-purple-bright);
  border-radius: var(--hq-radius);
  box-shadow: 0 0 12px rgba(138, 79, 196, 0.35) inset;
}