/* History Is Told: seven historical puzzle engines. Fully scoped; no game "shells". */
.hitg-history-app {
 --hh-ink:#30282a; --hh-muted:#665e59; --hh-burgundy:#6b2d3a; --hh-border:#d9d0c5;
 --hh-gold:#97713a; --hh-cream:#faf8f3; --hh-paper:#fffefa; --hh-success:#216c45;
 color:var(--hh-ink); font:400 16px/1.55 "Heebo",Arial,sans-serif; direction:rtl;
 width:100%; min-width:0; max-width:100%; text-align:right; overflow-wrap:break-word;
 container-type:inline-size;
}
.hitg-history-app *, .hitg-history-app *::before, .hitg-history-app *::after { box-sizing:border-box; }
.hitg-history-app button, .hitg-history-app select, .hitg-history-app input { font:inherit; }
.hitg-history-app button { cursor:pointer; touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
.hitg-history-app button:disabled { cursor:default; }
.hitg-history-app button:focus-visible, .hitg-history-app select:focus-visible,
.hitg-history-app input:focus-visible, .hitg-history-app [tabindex]:focus-visible { outline:3px solid #b57a29; outline-offset:3px; }
.hitg-history-app p, .hitg-history-app h2, .hitg-history-app h3, .hitg-history-app h4 { margin:0; }
.hitg-history-app h2 { font-size:clamp(1.3rem,2.5vw,1.75rem); font-weight:800; color:var(--hh-burgundy); line-height:1.3; }
.hitg-history-app h3 { font-size:1.1rem; line-height:1.4; }
.hitg-history-app h4 { font-size:.94rem; margin:13px 0 5px; }
.hitg-history-app .hh-sr-only { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
.hitg-history-app .hh-heading { display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:10px 20px; padding:3px 0 17px; border-bottom:1px solid var(--hh-border); }
.hitg-history-app .hh-heading>div:first-child { flex:1 1 280px; min-width:0; }
.hitg-history-app .hh-eyebrow { font-size:.76rem; font-weight:780; color:var(--hh-gold); letter-spacing:.025em; }
.hitg-history-app .hh-heading p { margin-top:5px; color:var(--hh-muted); font-size:.92rem; max-width:690px; }
.hitg-history-app .hh-level { display:flex; gap:7px; flex-direction:column; font-size:.82rem; font-weight:730; color:var(--hh-muted); }
.hitg-history-app select { background:var(--hh-paper); color:var(--hh-ink); border:1px solid #c7b9a9; border-radius:6px; min-height:44px; max-width:100%; padding:7px 10px; }
.hitg-history-app .hh-toolbar { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin:15px 0; }
.hitg-history-app .hh-stat { font-size:.82rem; color:var(--hh-muted); padding:5px 9px; border:1px solid var(--hh-border); border-radius:5px; font-weight:650; }
.hitg-history-app .hh-btn { background:var(--hh-paper); border:1px solid #bdb2a6; border-radius:6px; min-height:44px; padding:7px 14px; line-height:1.4; color:var(--hh-ink); font-weight:740; transition:background .12s ease,border-color .12s ease; }
.hitg-history-app .hh-btn:hover:not(:disabled) { background:#f4ecde; border-color:var(--hh-gold); }
.hitg-history-app .hh-btn-primary { background:var(--hh-burgundy); color:#fff; border-color:var(--hh-burgundy); }
.hitg-history-app .hh-btn-primary:hover:not(:disabled) { background:#56202d; color:#fff; }
.hitg-history-app .hh-btn-soft { background:#f6f3ec; }
.hitg-history-app button:disabled { opacity:.6; }
.hitg-history-app .hh-actions { display:flex; gap:8px; flex-wrap:wrap; margin:17px 0 12px; }
.hitg-history-app .hh-note { margin:12px 0 4px; color:var(--hh-muted); font-size:.83rem; }
.hitg-history-app .hh-message, .hitg-history-app .hh-feedback { margin:14px 0; padding:11px 14px; background:#f6f3eb; border-inline-start:3px solid var(--hh-gold); border-radius:3px; font-size:.89rem; }
.hitg-history-app .hh-message[hidden] { display:none!important; }
.hitg-history-app .hh-feedback.is-success { background:#ebf5ed; border-color:var(--hh-success); color:#194f34; }
.hitg-history-app .hh-feedback h3 { margin-bottom:6px; }
/* Crossword: roomy cell size and scroll confined to the board. */
.hitg-history-app .hh-active-clue { display:flex; flex-wrap:wrap; gap:8px; align-items:baseline; background:#f4eee6; padding:9px 12px; border-radius:5px; margin:14px 0 8px; }
.hitg-history-app .hh-active-clue strong { color:var(--hh-burgundy); white-space:nowrap; }
.hitg-history-app .hh-active-clue span { font-size:.92rem; }
.hitg-history-app .hh-crossword-layout { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(250px,.8fr); gap:22px; align-items:start; }
.hitg-history-app .hh-grid-scroll { width:100%; max-width:100%; overflow:auto; padding:4px; border:1px solid var(--hh-border); background:#f4f1e9; border-radius:5px; scrollbar-width:thin; }
.hitg-history-app .hh-crossword-grid { display:grid; grid-template-columns:repeat(var(--hh-cols), minmax(0,1fr)); width:max(100%,calc(var(--hh-cols)*42px)); max-width:none; direction:ltr; gap:2px; }
.hitg-history-app .hh-cross-cell { position:relative; width:100%; aspect-ratio:1/1; min-height:38px; background:#fff; border:1px solid #afa99b; color:var(--hh-ink); border-radius:2px; display:grid; place-items:center; padding:1px; }
.hitg-history-app .hh-cross-cell small { position:absolute; top:0; left:3px; font-size:9px; font-weight:700; line-height:1; direction:rtl; }
.hitg-history-app .hh-cross-cell b { font-size:1.2rem; font-weight:800; line-height:1; }
.hitg-history-app .hh-cross-cell.is-selected { background:#f5e7bf; box-shadow:inset 0 0 0 2px #a87e36; }
.hitg-history-app .hh-cross-cell.is-wrong { color:#9d2e27; background:#fbe0dd; }
.hitg-history-app .hh-crossword-void { background:transparent; }
.hitg-history-app .hh-keyboard { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:4px; margin-top:12px; }
.hitg-history-app .hh-keyboard button { min-width:0; min-height:44px; background:#fff; color:var(--hh-ink); border:1px solid #bdb4a7; border-radius:4px; font-size:1.05rem; font-weight:700; }
.hitg-history-app .hh-keyboard button:hover { background:#f5e9d3; }
.hitg-history-app .hh-key-erase { color:var(--hh-burgundy)!important; }
.hitg-history-app .hh-clues { min-width:0; }
.hitg-history-app .hh-clues h3 { margin-bottom:4px; }
.hitg-history-app .hh-clue-list { display:grid; gap:4px; }
.hitg-history-app .hh-clue { text-align:right; color:var(--hh-ink); background:transparent; padding:8px; border:1px solid transparent; border-radius:5px; font-size:.87rem; min-height:44px; }
.hitg-history-app .hh-clue strong { color:var(--hh-burgundy); }
.hitg-history-app .hh-clue small { font-size:.75rem; color:var(--hh-muted); }
.hitg-history-app .hh-clue.is-selected { background:#f4ecde; border-color:#c5ae84; }
/* Memory: real pairs with readable text, no decorative card backs. */
.hitg-history-app .hh-memory-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:9px; margin-top:12px; }
.hitg-history-app .hh-memory-card { background:#ebe5dc; border:1px solid #c1b8ae; border-radius:6px; min-height:100px; display:grid; place-items:center; text-align:center; padding:10px; color:var(--hh-burgundy); font-weight:770; line-height:1.35; }
.hitg-history-app .hh-memory-card:not(.is-open) { background:#6d3543; color:#fff; font-size:1.4rem; }
.hitg-history-app .hh-memory-card.is-open { background:#fffdfa; font-size:.86rem; }
.hitg-history-app .hh-memory-card.is-paired { border-color:#3b7b52; background:#e8f2e9; color:#26513a; opacity:1; }
/* Cipher controls and legible decoded text. */
.hitg-history-app .hh-cipher { margin:18px 0; padding:20px; border:1px solid var(--hh-border); border-radius:5px; background:var(--hh-cream); }
.hitg-history-app .hh-cipher-text, .hitg-history-app .hh-cipher-decoded { font-size:clamp(1.2rem,2.7vw,1.85rem); font-weight:760; letter-spacing:.03em; padding:8px 0 14px; overflow-wrap:anywhere; }
.hitg-history-app .hh-cipher-text { color:var(--hh-burgundy); }
.hitg-history-app .hh-cipher-decoded { color:#1f6451; }
.hitg-history-app .hh-cipher-editor { margin:15px 0; padding-top:17px; border-top:1px solid var(--hh-border); }
.hitg-history-app .hh-cipher-editor label { display:block; margin-bottom:12px; }
.hitg-history-app .hh-cipher-editor input { display:block; width:100%; accent-color:var(--hh-burgundy); min-height:28px; }
.hitg-history-app .hh-stepper { display:flex; gap:8px; margin:9px 0 0; }
/* Period objects: functional audit cards rather than fabricated scenes. */
.hitg-history-app .hh-artifacts { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; margin-top:14px; }
.hitg-history-app .hh-artifact { background:var(--hh-paper); border:1px solid var(--hh-border); min-height:110px; border-radius:5px; padding:12px; text-align:right; display:flex; flex-direction:column; align-items:flex-start; gap:5px; color:var(--hh-ink); }
.hitg-history-app .hh-artifact:hover:not(:disabled) { background:#f6f0e6; border-color:var(--hh-gold); }
.hitg-history-app .hh-artifact-index { font-size:.7rem; color:var(--hh-gold); }
.hitg-history-app .hh-artifact strong { line-height:1.32; }
.hitg-history-app .hh-artifact-state { font-size:.77rem; color:var(--hh-muted); margin-top:auto; }
.hitg-history-app .hh-artifact.is-found { background:#e9f3ea; border-color:#42855a; opacity:1; }
.hitg-history-app .hh-artifact.is-found .hh-artifact-state { color:#216c45; }
.hitg-history-app .hh-artifact.is-expected { background:#f4f1ea; opacity:.78; }
/* Map sourced from bundled local vector. Hit area can be scrolled inside narrow containers. */
.hitg-history-app .hh-question { margin:13px 0; }
.hitg-history-app .hh-map-scroll { width:100%; overflow:auto; border:1px solid var(--hh-border); background:#e9eee9; border-radius:4px; scrollbar-width:thin; }
.hitg-history-app .hh-world-map { min-width:650px; width:100%; aspect-ratio:1200/520; position:relative; background-image:url('../../../assets/images/world-map.svg'); background-size:100% 100%; background-repeat:no-repeat; cursor:crosshair; touch-action:pan-x pan-y; }
.hitg-history-app .hh-map-plot { position:absolute; inset:0; pointer-events:none; }
.hitg-history-app .hh-map-plot svg { width:100%; height:100%; display:block; }
.hitg-history-app .hh-map-answer { fill:#29734c; stroke:#fff; stroke-width:4; }
.hitg-history-app .hh-map-answer-ring { fill:none; stroke:#29734c; stroke-width:3; stroke-dasharray:6 5; }
.hitg-history-app .hh-map-guess { fill:#903344; stroke:#fff; stroke-width:4; }
.hitg-history-app .hh-map-regions { display:flex; flex-wrap:wrap; gap:8px; margin:13px 0; }
/* Detective: evidence is intentionally a straightforward accessible disclosure. */
.hitg-history-app .hh-section-title { margin:17px 0 9px; }
.hitg-history-app .hh-evidence { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.hitg-history-app .hh-evidence-item { border:1px solid var(--hh-border); background:var(--hh-paper); border-radius:5px; min-width:0; }
.hitg-history-app .hh-evidence-toggle { width:100%; min-height:56px; background:transparent; color:var(--hh-ink); border:0; padding:10px 12px; display:flex; align-items:center; text-align:right; justify-content:space-between; gap:8px; }
.hitg-history-app .hh-evidence-toggle span { font-size:.76rem; color:var(--hh-burgundy); }
.hitg-history-app .hh-evidence-item p { border-top:1px solid var(--hh-border); font-size:.9rem; padding:12px; }
.hitg-history-app .hh-choices { display:grid; gap:8px; }
.hitg-history-app .hh-choice { text-align:right; color:var(--hh-ink); border:1px solid var(--hh-border); background:var(--hh-paper); padding:13px; border-radius:5px; min-height:48px; }
.hitg-history-app .hh-choice.is-selected { border-color:var(--hh-burgundy); background:#f4e9e8; box-shadow:inset 3px 0 0 var(--hh-burgundy); }
/* Reconstruction: three original, clearly labelled educational drawings. */
.hitg-history-app .hh-reconstruction { display:grid; grid-template-columns:minmax(0,500px) minmax(175px,1fr); gap:20px; margin:14px 0; align-items:start; }
.hitg-history-app .hh-puzzle-grid { display:grid; grid-template-columns:repeat(var(--hh-size),minmax(0,1fr)); gap:3px; border:2px solid #b4a18a; padding:3px; background:#e4d8c7; width:100%; aspect-ratio:1/1; }
.hitg-history-app .hh-puzzle-piece { min-width:0; min-height:0; width:100%; aspect-ratio:1/1; background-repeat:no-repeat; background-size:var(--hh-bg-size) var(--hh-bg-size); background-position:var(--hh-tile-x) var(--hh-tile-y); color:#fff; border:1px solid rgba(31,31,31,.24); position:relative; }
.hitg-history-app .hh-puzzle-piece>span { position:absolute; top:4px; right:4px; font-size:.68rem; font-weight:780; background:#2c2525c9; padding:1px 5px; border-radius:3px; }
.hitg-history-app .hh-puzzle-piece.is-selected { outline:4px solid #cc7d30; outline-offset:-4px; z-index:1; }
.hitg-history-app .hh-puzzle-piece.is-correct>span { background:#236d48dd; }
.hitg-history-app .hh-art-mosaic { background-image:url('./mosaic.svg'); }
.hitg-history-app .hh-art-tablet { background-image:url('./tablet.svg'); }
.hitg-history-app .hh-art-route { background-image:url('./route.svg'); }
.hitg-history-app .hh-preview-col h3 { margin-bottom:9px; }
.hitg-history-app .hh-preview { width:min(100%,210px); aspect-ratio:1/1; background-color:#e4d8c7; background-size:cover; border:1px solid #c8baa6; display:grid; place-items:center; margin-bottom:9px; }
.hitg-history-app .hh-preview:not(.is-showing) { background-image:none; }
.hitg-history-app .hh-preview>span { font-size:.85rem; color:var(--hh-muted); text-align:center; }
.hitg-history-app .hh-preview-col .hh-btn { width:min(100%,210px); }
@container (max-width: 680px) {
 .hitg-history-app .hh-crossword-layout { grid-template-columns:minmax(0,1fr); gap:15px; }
 .hitg-history-app .hh-memory-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
 .hitg-history-app .hh-evidence { grid-template-columns:1fr; }
 .hitg-history-app .hh-reconstruction { grid-template-columns:minmax(0,1fr); }
 .hitg-history-app .hh-preview-col { display:flex; align-items:center; flex-wrap:wrap; gap:8px 12px; }
 .hitg-history-app .hh-preview-col h3 { width:100%; margin:0; }
 .hitg-history-app .hh-preview { width:100px; margin:0; }
 .hitg-history-app .hh-preview-col .hh-btn { width:auto; }
 .hitg-history-app .hh-preview-col .hh-note { flex-basis:100%; }
}
@container (max-width: 440px) {
 .hitg-history-app .hh-heading { display:block; }
 .hitg-history-app .hh-heading .hh-level { margin-top:13px; }
 .hitg-history-app .hh-memory-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; }
 .hitg-history-app .hh-memory-card { min-height:87px; }
 .hitg-history-app .hh-artifacts { grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; }
 .hitg-history-app .hh-artifact { min-height:108px; padding:9px; }
 .hitg-history-app .hh-keyboard { gap:3px; }
 .hitg-history-app .hh-keyboard button { min-height:42px; font-size:1rem; }
 .hitg-history-app .hh-cipher { padding:13px; }
 .hitg-history-app .hh-map-regions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
 .hitg-history-app .hh-btn { padding:8px 10px; }
}
@media (prefers-reduced-motion: reduce) {
 .hitg-history-app *, .hitg-history-app *::before, .hitg-history-app *::after { transition:none!important; animation:none!important; scroll-behavior:auto!important; }
}
@media (forced-colors: active) {
 .hitg-history-app .hh-cross-cell.is-selected, .hitg-history-app .hh-puzzle-piece.is-selected, .hitg-history-app .hh-choice.is-selected { outline:3px solid Highlight; }
}

/* v1.1: calm feedback, unambiguous interactions, and full keyboard alternatives. */
.hitg-history-app .hh-message {
  display:flex; align-items:center; min-height:64px;
  border:1px solid #d8c8ad; border-inline-start:4px solid #98703d;
  border-radius:10px; padding:12px 15px; line-height:1.6;
}
.hitg-history-app .hh-tip {
  margin:13px 0; border:1px solid #e2d6c4; background:#fcf8f1;
  padding:10px 13px; border-radius:10px; font-size:.89rem; line-height:1.7;
}
.hitg-history-app .hh-tip strong { color:#6b2d3a; }
.hitg-history-app .hh-howto {
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; margin:16px 0;
}
.hitg-history-app .hh-howto div {
  border:1px solid #e2d6c4; background:#fffefa; border-radius:11px; padding:12px;
  display:flex; align-items:flex-start; gap:9px; line-height:1.6; font-size:.86rem;
}
.hitg-history-app .hh-howto b { color:#743447; font-weight:900; font-variant-numeric:tabular-nums; }
.hitg-history-app .hh-cipher-example {
  border-inline-start:3px solid #ac8854; border-radius:5px; background:#f6f0e6;
  padding:11px 14px; font-size:.92rem; line-height:1.7;
}
.hitg-history-app .hh-stepper .hh-btn { flex:1; font-weight:800; }
.hitg-history-app .hh-match-review {
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px 14px;
  margin:13px 0 0; padding:12px 14px; border:1px solid #cfb585;
  border-radius:10px; background:#fff8e9; font-size:.88rem;
}
.hitg-history-app .hh-match-review strong { color:#6d3643; }
.hitg-history-app .hh-findings {
  margin:17px 0; border:1px solid #dcd1c1; border-radius:10px; background:#fffefa;
  padding:15px; color:#3d3533;
}
.hitg-history-app .hh-findings h3 { margin-bottom:10px; }
.hitg-history-app .hh-findings ul { margin:0; padding-inline-start:22px; }
.hitg-history-app .hh-findings li { padding:5px 0; line-height:1.65; }
.hitg-history-app .hh-map-coordinate {
  background:#fbf8f1; border:1px solid #dacdbd; border-radius:10px; padding:14px;
  margin:14px 0;
}
.hitg-history-app .hh-map-coordinate h4 { font-size:1rem; margin:0 0 5px; }
.hitg-history-app .hh-map-coordinate p { font-size:.86rem; color:#665e59; margin:5px 0 13px; }
.hitg-history-app .hh-map-coordinates { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin-bottom:14px; }
.hitg-history-app .hh-map-coordinates label { display:grid; gap:7px; font-size:.86rem; font-weight:700; }
.hitg-history-app .hh-map-coordinates input { width:100%; min-height:35px; accent-color:#703443; cursor:pointer; }
.hitg-history-app .hh-map-coordinates output { color:#703443; }
.hitg-history-app .hh-puzzle-piece { touch-action:manipulation; }
@container (max-width: 580px) {
  .hitg-history-app .hh-howto { grid-template-columns:1fr; gap:7px; }
  .hitg-history-app .hh-howto div { padding:10px 12px; }
  .hitg-history-app .hh-map-coordinates { grid-template-columns:1fr; }
  .hitg-history-app .hh-match-review .hh-btn { width:100%; }
}