/* encarta.css — Encarta 99 application visual identity */
/* Encarta 99 chrome: deep teal-navy bands, warm gold accents, serif article text */

.enc-view-root {
  flex: 1; min-height: 0; margin: 2px;
  background: #fff;
  box-shadow: inset -1px -1px #fff, inset 1px 1px var(--sh), inset -2px -2px var(--face-lt), inset 2px 2px var(--dk);
  overflow: auto;
  font-size: 13px;
}

/* ---------- toolbar ---------- */
.enc-toolbar {
  display: flex; align-items: stretch; gap: 1px;
  background: linear-gradient(180deg, #0d5a7a 0%, #0a4666 60%, #083a55 100%);
  padding: 3px 4px;
  border-top: 1px solid #0a3a50;
  flex: none;
}
.enc-tbb {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  background: transparent; border: 1px solid transparent; color: #eaf4f8;
  padding: 3px 7px 2px; min-width: 52px; cursor: default;
  border-radius: 2px;
}
.enc-tbb:not(:disabled):hover { background: rgba(255,255,255,0.16); border-color: #6aa8c8; }
.enc-tbb:disabled { color: #7a9ab0; }
.enc-tbb:disabled svg * { stroke: #7a9ab0 !important; fill: none; }
.enc-tbb .enc-tbb-label { font-size: 10px; }
.enc-tb-sep { width: 1px; background: rgba(255,255,255,0.25); margin: 4px 3px; }

/* ---------- search band ---------- */
.enc-search-band {
  display: flex; align-items: center; gap: 4px;
  background: linear-gradient(180deg, #e8eef4, #c8d4de);
  padding: 3px 6px;
  border-bottom: 1px solid var(--sh);
  flex: none;
}
.enc-search-ico { display: flex; }
.enc-search-input { flex: 1; font-style: italic; color: #204a6a; }
.enc-search-input:focus { font-style: normal; }

/* ---------- loading ---------- */
.enc-loading {
  height: 100%; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 12px;
  background: repeating-linear-gradient(45deg, #fff, #fff 8px, #f4f8fa 8px, #f4f8fa 16px);
}
.enc-loading-bar { width: 220px; height: 12px; padding: 2px; background: #c8d4de; box-shadow: inset 1px 1px var(--sh), inset -1px -1px #fff; }
.enc-loading-fill { height: 100%; width: 0; background: repeating-linear-gradient(90deg, #0d5a7a 0 6px, #2a8ab0 6px 12px); }

/* ---------- splash ---------- */
.enc-splash { padding: 26px 10px 0; text-align: center; }
.enc-splash-logo { animation: encSpinIn 900ms ease-out; }
@keyframes encSpinIn { from { transform: rotate(-120deg) scale(0.3); opacity: 0; } to { transform: none; opacity: 1; } }
.enc-splash-title { color: #fff; font-size: 21px; font-family: Georgia, serif; margin-top: 10px; }
.enc-splash-title .r { font-size: 11px; vertical-align: top; }
.enc-splash-sub { color: #ffd23f; font-size: 14px; margin-top: 2px; letter-spacing: 1px; }
.enc-splash-copy { color: #9ac0d4; font-size: 10px; margin-top: 8px; }
.enc-splash-pb-wrap { padding: 0 60px 6px; }
.enc-splash-lbl { text-align: center; color: #cfe4ef; padding: 0 12px 12px; }

/* ---------- home ---------- */
.enc-home { padding: 14px 16px 20px; background: linear-gradient(180deg, #f4f8fb 0%, #e6eef4 100%); min-height: 100%; }
.enc-home-hero { display: flex; align-items: center; gap: 12px; padding: 6px 8px 12px; }
.enc-home-title { font-family: Georgia, serif; font-size: 21px; color: #0a4666; }
.enc-home-title b { color: #d8901a; }
.enc-home-welcome { font-size: 12px; color: #4a6a80; margin-top: 2px; font-style: italic; }
.enc-home-features {
  display: flex; gap: 8px; flex-wrap: wrap;
  background: linear-gradient(180deg, #0d5a7a, #0a4666);
  padding: 8px; border-radius: 3px;
  box-shadow: inset 0 1px #2a8ab0;
  margin-bottom: 14px;
}
.enc-feature-tile {
  flex: 1 1 0; min-width: 90px;
  background: linear-gradient(180deg, #f6fafc, #d8e6ee);
  border: 1px solid #083a55; border-radius: 3px;
  padding: 8px 4px 6px; text-align: center; color: #0a4666;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.enc-feature-tile:hover { background: linear-gradient(180deg, #fff, #e8f2f8); box-shadow: 0 0 0 2px #ffd23f; }
.enc-feature-label { font-weight: 700; font-size: 11px; }
.enc-home-cols { display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap; }
.enc-home-cats { flex: 1 1 260px; }
.enc-home-side { flex: 1 1 220px; display: flex; flex-direction: column; gap: 6px; }
.enc-home-h {
  font-size: 11px; text-transform: uppercase; letter-spacing: 1px;
  color: #0a4666; border-bottom: 2px solid #d8901a; padding-bottom: 2px; margin-bottom: 6px;
}
.enc-cat-row {
  display: flex; align-items: center; gap: 8px; width: 100%;
  background: #fff; border: 1px solid #c8d4de; margin-bottom: 4px; padding: 5px 8px;
  text-align: left;
}
.enc-cat-row:hover { border-color: #0d5a7a; background: #eef6fa; box-shadow: 0 0 0 1px #d8901a inset; }
.enc-cat-name { flex: 1; font-weight: 700; color: #123; }
.enc-cat-count { color: #6a8aa0; font-size: 10px; }
.enc-aod {
  background: #fff; border: 1px solid #c8d4de; padding: 10px; text-align: left;
  display: block; width: 100%;
}
.enc-aod:hover { border-color: #0d5a7a; }
.enc-aod-title { font-family: Georgia, serif; font-size: 15px; color: #0a4666; font-weight: 700; }
.enc-aod-abs { margin-top: 4px; color: #3a4a58; line-height: 15px; }
.enc-aod-more { margin-top: 6px; color: #b06a10; font-weight: 700; }
.enc-datebox { background: #fff; border: 1px solid #c8d4de; padding: 8px 10px; }
.enc-date-big { font-family: Georgia, serif; font-size: 19px; color: #0a4666; }
.enc-date-small { color: #6a8aa0; }
.enc-home-tip { background: #fffbe8; border: 1px solid #e0d090; padding: 7px 9px; color: #5a4a20; line-height: 15px; }

/* ---------- shared ---------- */
.enc-crumbs { padding: 6px 12px 2px; color: #4a6a80; }
.enc-crumb { color: #0a4666; text-decoration: underline; }
.enc-crumb:hover { color: #b06a10; }
.enc-error { padding: 24px; color: #a03030; }

/* ---------- category browse ---------- */
.enc-cat-view { padding-bottom: 18px; }
.enc-cat-head { display: flex; gap: 10px; align-items: center; padding: 6px 12px 2px; }
.enc-cat-title { font-family: Georgia, serif; font-size: 19px; color: #0a4666; font-weight: 700; }
.enc-cat-sub { color: #6a8aa0; }
.enc-cat-list { padding: 8px 12px; display: flex; flex-direction: column; gap: 12px; }
.enc-cat-group-h {
  font-size: 11px; text-transform: uppercase; color: #b06a10;
  border-bottom: 1px solid #e0c890; padding-bottom: 2px; margin-bottom: 4px;
}
.enc-art-row {
  display: flex; gap: 8px; align-items: flex-start; width: 100%;
  background: #fff; border: 1px solid transparent; padding: 6px 8px; text-align: left;
}
.enc-art-row:hover { border-color: #0d5a7a; background: #f2f8fc; }
.enc-badges { display: flex; gap: 2px; padding-top: 2px; }
.enc-badge { display: flex; }
.enc-art-row-t { flex: 1; }
.enc-art-row-title { font-weight: 700; color: #0a2a44; }
.enc-art-row-abs { color: #4a5a68; margin-top: 2px; line-height: 14px; }

/* ---------- pinpointer ---------- */
.enc-pin { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.enc-pin-top { padding: 8px 12px 4px; }
.enc-pin-title { color: #0a4666; font-size: 14px; }
.enc-pin-sub { color: #6a8aa0; margin-top: 2px; }
.enc-pin-ctrl { display: flex; gap: 8px; align-items: center; padding: 4px 12px 6px; flex-wrap: wrap; }
.enc-pin-input { flex: 1; min-width: 160px; }
.enc-pin-chk { margin-left: 4px; }
.enc-pin-tabs { display: flex; gap: 1px; padding: 0 12px; flex-wrap: wrap; }
.enc-pin-tab {
  width: 20px; height: 18px; padding: 0;
  background: var(--face); border: 1px solid #8aa0b4;
  font-size: 10px; color: #123;
}
.enc-pin-tab.active { background: #0d5a7a; color: #fff; border-color: #083a55; font-weight: 700; }
.enc-pin-list { flex: 1; min-height: 60px; margin: 4px 12px; overflow: auto; }
.enc-pin-row {
  display: flex; align-items: center; gap: 6px;
  padding: 3px 6px; border-bottom: 1px dotted #d0dce4;
}
.enc-pin-row:hover { background: #eef6fa; }
.enc-pin-row.selected { background: #0d5a7a; color: #fff; }
.enc-pin-title-t { flex: 1; }
.enc-pin-row.selected .enc-pin-title-t { color: #fff; }
.enc-pin-cat { color: #6a8aa0; font-size: 10px; }
.enc-pin-row.selected .enc-pin-cat { color: #cfe4ef; }
.enc-pin-status { padding: 4px 14px 8px; color: #4a6a80; }
.enc-pin-empty { padding: 26px; text-align: center; color: #6a8aa0; }
.enc-pin-empty-t { font-size: 14px; font-weight: 700; color: #3a5a70; margin-top: 8px; }
.enc-pin-empty-s { margin-top: 4px; line-height: 14px; }

/* ---------- article ---------- */
.enc-art { display: flex; height: 100%; min-height: 0; }
.enc-art-outline {
  width: 176px; flex: none;
  background: #eef2f5; border-right: 1px solid #c8d4de;
  display: flex; flex-direction: column; min-height: 0;
}
.enc-art.outline-hidden .enc-art-outline { width: auto; border-right: none; }
.enc-art.outline-hidden .enc-art-outline-list { display: none; }
.enc-art-outline-head {
  display: flex; align-items: center; gap: 5px;
  padding: 7px 8px 5px; color: #0a4666;
  border-bottom: 1px solid #d0dce4; background: #e2eaef;
}
.enc-outline-collapse {
  margin-left: auto; width: 16px; height: 16px; padding: 0;
  background: var(--face); border: 1px solid #8aa0b4; font-size: 10px;
}
.enc-art-outline-list { overflow: auto; padding: 6px 4px; flex: 1; }
.enc-outline-item { padding: 3px 8px; color: #2a4a60; cursor: pointer; border-left: 3px solid transparent; }
.enc-outline-item:hover { background: #dde8ee; }
.enc-outline-item.active { background: #fff; border-left-color: #d8901a; font-weight: 700; color: #0a2a44; }
.enc-outline-item.sub { padding-left: 18px; }
.enc-art-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.enc-art-content {
  flex: 1; overflow: auto; padding: 4px 26px 30px;
  font-family: var(--font-doc);
  color: #1a1a14;
  user-select: text; -webkit-user-select: text;
}
.enc-art-head { padding-top: 8px; }
.enc-art-title {
  font-family: Georgia, serif; font-size: 24px; color: #0a2a44;
  border-bottom: 3px double #d8901a; padding-bottom: 6px; margin: 4px 0 4px;
}
.enc-art-meta { color: #6a8aa0; font-size: 11px; margin-bottom: 10px; display: flex; align-items: center; gap: 4px; font-family: var(--font-ui); }
.enc-art-sec { margin-top: 14px; }
.enc-art-h {
  font-family: Georgia, serif; color: #0a4666; font-size: 16px;
  margin: 8px 0 6px; border-bottom: 1px solid #cfe0ea; padding-bottom: 2px;
}
.enc-art-p { line-height: 18px; margin: 0 0 10px; text-align: justify; hyphens: auto; }
.enc-xref { color: #0a4fa0; text-decoration: underline; cursor: pointer; }
.enc-xref:hover { color: #b06a10; }

.enc-media-box { margin: 12px auto; max-width: 420px; border: 1px solid #c8d4de; background: #fff; padding: 6px; }
.enc-media-fig { display: block; width: 100%; height: auto; min-height: 120px; background: #f4f8fa; border: 1px solid #d8e2e8; padding: 0; }
.enc-media-fig svg { display: block; width: 100%; height: auto; }
.enc-media-type {
  display: inline-block; background: #0d5a7a; color: #fff;
  font-size: 9px; font-weight: 700; padding: 1px 6px; border-radius: 2px;
  font-family: var(--font-ui); margin-right: 6px; vertical-align: top;
}
.enc-media-cap { margin-top: 5px; line-height: 14px; font-size: 11px; font-family: var(--font-ui); color: #3a4a58; }
.enc-media-captext { display: inline-block; width: 85%; }
.enc-media-credit { margin-top: 3px; font-size: 10px; color: #8aa0b0; font-style: italic; font-family: var(--font-ui); }

.enc-sidebar {
  margin: 14px 0; padding: 10px 14px;
  background: #fdf6e3; border: 1px solid #e0d090; border-left: 5px solid #d8901a;
  line-height: 16px;
}
.enc-sidebar-tag { font-size: 9px; letter-spacing: 2px; color: #b06a10; font-weight: 700; font-family: var(--font-ui); }
.enc-sidebar-title { font-weight: 700; font-size: 14px; margin: 3px 0 6px; font-family: Georgia, serif; }
.enc-sidebar-text { font-size: 12.5px; }

.enc-table-wrap { margin: 14px 0; }
.enc-table-title { font-weight: 700; font-family: var(--font-ui); color: #0a4666; margin-bottom: 5px; }
.enc-table { border-collapse: collapse; font-family: var(--font-ui); font-size: 11px; width: 100%; max-width: 560px; }
.enc-table th { background: #0d5a7a; color: #fff; text-align: left; padding: 4px 8px; }
.enc-table td { border-bottom: 1px solid #d8e2e8; padding: 4px 8px; }
.enc-table tr:nth-child(even) td { background: #f2f8fc; }

.enc-related { margin-top: 20px; border-top: 2px solid #d8901a; padding-top: 8px; }
.enc-related-h { font-family: var(--font-ui); font-weight: 700; color: #0a4666; text-transform: uppercase; font-size: 10px; letter-spacing: 1px; margin-bottom: 6px; }
.enc-related-row {
  display: flex; gap: 8px; align-items: baseline; width: 100%;
  background: #fff; border: 1px solid transparent; padding: 4px 6px; text-align: left;
  font-family: var(--font-ui);
}
.enc-related-row:hover { border-color: #0d5a7a; background: #f2f8fc; }
.enc-related-arrow { color: #d8901a; font-weight: 700; }
.enc-related-cat { margin-left: auto; color: #8aa0b0; font-size: 10px; }
.enc-further { margin-top: 12px; font-family: var(--font-ui); font-size: 11px; color: #3a4a58; }
.enc-further ul { margin: 4px 0 0 18px; }

/* ---------- atlas ---------- */
.enc-atlas { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.enc-atlas-bar { display: flex; align-items: center; gap: 4px; padding: 2px 12px 6px; flex-wrap: wrap; }
.enc-atlas-z { min-width: 26px; min-height: 21px; padding: 0 6px; }
.enc-atlas-zoomlbl { color: #4a6a80; margin: 0 6px; }
.enc-atlas-legend-title { color: #6a8aa0; font-size: 10px; margin-left: auto; }
.enc-atlas-main { flex: 1; min-height: 0; display: flex; gap: 8px; padding: 0 12px 6px; }
.enc-atlas-map { flex: 1.7; min-width: 0; overflow: hidden; position: relative; background: #9cc8e8; }
.enc-atlas-svg { width: 100%; height: 100%; }
.enc-grat line { stroke: rgba(255,255,255,0.4); stroke-width: 0.7; }
.enc-equator { stroke: rgba(255,255,255,0.8); stroke-width: 1.4; stroke-dasharray: 6 4; }
.enc-atlas-region { cursor: pointer; }
.enc-atlas-region:hover { filter: brightness(1.08); stroke: #d8901a; stroke-width: 2.5; }
.enc-ocean-label { fill: #3a6a9a; font-size: 10px; font-style: italic; font-family: Georgia, serif; }
.enc-place { cursor: pointer; }
.enc-place-dot { fill: #c03030; stroke: #fff; stroke-width: 1.2; }
.enc-place:hover .enc-place-dot { fill: #ffd23f; stroke: #0a4666; }
.enc-place-label { fill: #10263a; font-size: 8.5px; font-family: Arial; }
.enc-atlas-side { flex: 1; min-width: 150px; overflow: auto; background: #f4f8fb; border: 1px solid #c8d4de; padding: 10px; }
.enc-atlas-side-h { font-family: Georgia, serif; font-size: 16px; color: #0a4666; font-weight: 700; }
.enc-atlas-side-sub { color: #6a8aa0; margin: 4px 0 8px; font-size: 10px; }
.enc-atlas-place-btn {
  display: block; width: 100%; text-align: left;
  background: #fff; border: 1px solid #c8d4de; margin-bottom: 3px; padding: 4px 6px;
}
.enc-atlas-place-btn:hover { border-color: #0d5a7a; background: #eef6fa; }
.enc-atlas-facts { margin: 6px 0; }
.enc-fact-row { display: flex; gap: 6px; padding: 2px 0; border-bottom: 1px dotted #d0dce4; }
.enc-fact-k { width: 76px; color: #6a8aa0; flex: none; }
.enc-fact-v { font-weight: 700; color: #123; }
.enc-atlas-sensor {
  flex: none; margin: 0 12px 6px; padding: 4px 8px;
  background: #0a4666; color: #cfe4ef; font-family: var(--font-ui);
  border: 1px solid #083a55;
}

/* ---------- timeline ---------- */
.enc-tl { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.enc-tl-bar { display: flex; align-items: center; gap: 4px; padding: 2px 12px 6px; flex-wrap: wrap; }
.enc-tl-chip { border: 1px solid rgba(0,0,0,0.35); color: #fff; font-size: 10px; padding: 2px 4px 2px 8px; opacity: 0.95; }
.enc-tl-chip.on { box-shadow: inset 0 0 0 2px #ffd23f; }
.enc-tl-chip:not(.on) { opacity: 0.35; }
.enc-tl-hint { margin-left: auto; color: #6a8aa0; font-size: 10px; }
.enc-tl-strip { flex: 1.4; min-height: 140px; overflow-x: auto; overflow-y: hidden; position: relative; background: #f4f0e2; }
.enc-tl-inner { position: relative; height: 100%; min-width: 100%; }
.enc-tl-era { position: absolute; top: 0; bottom: 18px; border-right: 1px solid rgba(90,70,40,0.35); }
.enc-tl-era-name { font-family: Georgia, serif; font-style: italic; color: #6a5a3a; padding: 3px 8px; font-size: 11px; }
.enc-tl-era-year { position: absolute; bottom: 2px; left: 6px; font-size: 9px; color: #8a7a5a; }
.enc-tl-axis { position: absolute; left: 0; right: 0; bottom: 18px; height: 1px; background: #5a4a30; }
.enc-tl-tick { position: absolute; bottom: 0; }
.enc-tl-tickline { position: absolute; bottom: 18px; width: 1px; height: 10px; background: #5a4a30; }
.enc-tl-ticklabel { position: absolute; bottom: 2px; left: -14px; font-size: 9px; color: #4a3a20; font-family: Arial; }
.enc-tl-ev { position: absolute; top: 50%; background: none; border: none; padding: 0; }
.enc-tl-dot { position: absolute; left: -3px; top: -3px; width: 7px; height: 7px; border-radius: 50%; border: 1px solid #333; }
.enc-tl-stem { position: absolute; left: 0; width: 1.6px; height: 16px; top: 2px; }
.enc-tl-stem.up { top: auto; bottom: 2px; }
.enc-tl-lab {
  position: absolute; top: 18px; left: 2px; width: 158px; text-align: left;
  font-size: 9px; color: #33322a; font-family: Arial; line-height: 11px;
}
.enc-tl-ev.up .enc-tl-lab { top: auto; bottom: 18px; }
.enc-tl-detail { flex: 1; min-height: 70px; margin: 4px 12px 8px; padding: 10px 14px; background: #fff; }
.enc-tl-detail-empty { color: #8aa0b0; font-style: italic; padding: 8px; }
.enc-tl-card-year { font-family: Georgia, serif; font-size: 22px; font-weight: 700; }
.enc-tl-card-lab { font-size: 14px; margin: 4px 0 2px; }
.enc-tl-card-cat { font-size: 10px; text-transform: uppercase; letter-spacing: 1px; }
.enc-tl-card-link { background: #eef6fa; border: 1px solid #0d5a7a; padding: 5px 10px; margin-top: 8px; color: #0a4666; font-weight: 700; }
.enc-tl-card-link:hover { background: #fff; box-shadow: 0 0 0 2px #ffd23f; }

/* ---------- interactivities ---------- */
.enc-ia { padding-bottom: 18px; }
.enc-ia-head { font-family: Georgia, serif; font-size: 20px; color: #0a4666; padding: 6px 14px 2px; }
.enc-ia-sub { color: #6a8aa0; padding: 0 14px 10px; }
.enc-ia-grid { display: flex; flex-wrap: wrap; gap: 12px; padding: 4px 14px; }
.enc-ia-card {
  flex: 1 1 180px; max-width: 260px;
  background: #fff; border: 1px solid #c8d4de; padding: 12px;
  display: flex; flex-direction: column; gap: 6px; text-align: left;
}
.enc-ia-card:hover { border-color: #0d5a7a; box-shadow: 0 0 0 2px #ffd23f; }
.enc-ia-icon { align-self: center; padding: 6px; background: #eef6fa; border-radius: 50%; }
.enc-ia-title { font-weight: 700; color: #0a4666; text-align: center; }
.enc-ia-desc { color: #4a5a68; line-height: 14px; font-size: 11px; }
.enc-ia-count { color: #b06a10; font-size: 10px; text-align: center; }
.enc-quiz { padding: 4px 16px 16px; }
.enc-quiz-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 8px; }
.enc-quiz-title { font-weight: 700; color: #0a4666; font-size: 14px; }
.enc-quiz-prog { color: #6a8aa0; }
.enc-quiz-pb { max-width: 300px; margin-bottom: 10px; }
.enc-quiz-q { font-family: Georgia, serif; font-size: 16px; margin-bottom: 10px; color: #123; }
.enc-quiz-opts { display: flex; flex-direction: column; gap: 5px; max-width: 460px; }
.enc-quiz-opt {
  display: flex; align-items: center; text-align: left; width: 100%;
  background: #fff; border: 1px solid #c8d4de; padding: 6px 9px;
}
.enc-quiz-opt:hover { border-color: #0d5a7a; background: #f2f8fc; }
.enc-quiz-opt.right { border-color: #2a8a2a; background: #e8f6e8; }
.enc-quiz-opt.wrong { border-color: #b03030; background: #f8e8e8; }
.enc-quiz-fb { margin-top: 10px; min-height: 40px; line-height: 15px; }
.enc-quiz-fb .ok { color: #2a8a2a; }
.enc-quiz-fb .no { color: #b03030; }
.enc-quiz-next { margin-top: 8px; }
.enc-quiz-results { text-align: center; padding: 20px 0; }
.enc-quiz-score { font-family: Georgia, serif; font-size: 34px; color: #0a4666; font-weight: 700; }
.enc-quiz-verdict { font-size: 16px; color: #b06a10; margin: 4px 0; }
.enc-quiz-pct { color: #6a8aa0; }
.enc-quiz-btns { display: flex; justify-content: center; gap: 8px; margin-top: 14px; }

/* ---------- mindmaze ---------- */
.enc-mm { display: flex; flex-direction: column; height: 100%; min-height: 0; padding-bottom: 8px; }
.enc-mm-head { display: flex; gap: 12px; align-items: center; padding: 8px 14px 4px; }
.enc-mm-title { font-family: Georgia, serif; font-size: 17px; color: #0a2a44; font-weight: 700; }
.enc-mm-sub { color: #6a8aa0; max-width: 420px; line-height: 13px; }
.enc-mm-score { margin-left: auto; text-align: center; background: #0a4666; color: #ffd23f; padding: 5px 12px; border-radius: 3px; }
.enc-mm-score-v { font-family: Georgia, serif; font-size: 22px; font-weight: 700; }
.enc-mm-score-l { font-size: 9px; letter-spacing: 2px; color: #cfe4ef; }
.enc-mm-main { flex: 1; min-height: 0; display: flex; gap: 12px; padding: 4px 14px; }
.enc-mm-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(3, 1fr);
  gap: 10px; flex: 1.3;
  background: linear-gradient(180deg, #2a2438, #171226);
  padding: 12px; border: 2px solid #0a0812; border-radius: 4px;
}
.enc-mm-cell {
  background: linear-gradient(180deg, #4a4260, #36304a);
  border: 2px solid #241e36; border-radius: 3px; position: relative;
  min-height: 64px;
}
.enc-mm-cell.visited { background: linear-gradient(180deg, #5a5478, #443e5e); border-color: #3a3454; }
.enc-mm-cell:hover { border-color: #d8901a; }
.enc-mm-cell.exit { border-color: #a08828; background: linear-gradient(180deg, #5a4c2e, #443c24); }
.enc-mm-cell.entrance { border-color: #28485a; }
.enc-mm-cell.loot::after {
  content: "\2605"; position: absolute; right: 4px; bottom: 2px; color: #ffd23f; font-size: 13px;
}
.enc-mm-fig { font-size: 22px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.enc-mm-exit-l { position: absolute; left: 5px; top: 3px; color: #ffd23f; }
.enc-mm-ent-l { position: absolute; left: 5px; top: 3px; color: #7ab8d8; }
.enc-mm-side { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.enc-mm-status { flex: none; padding: 8px 10px; background: #fff; line-height: 14px; min-height: 34px; }
.enc-mm-q { flex: 1; min-height: 0; overflow: auto; background: #fff; padding: 10px 12px; }
.enc-mm-qh { font-size: 10px; text-transform: uppercase; letter-spacing: 1px; color: #b06a10; font-weight: 700; }
.enc-mm-qq { font-family: Georgia, serif; font-size: 14px; margin: 6px 0 8px; color: #123; }
.enc-mm-opts { display: flex; flex-direction: column; gap: 4px; }
.enc-mm-win { font-family: Georgia, serif; font-size: 20px; color: #0a4666; font-weight: 700; text-align: center; }
.enc-mm-win-s { text-align: center; margin: 8px 0 4px; }
.enc-mm-win-q { text-align: center; color: #6a8aa0; font-size: 11px; }

/* ---------- gallery ---------- */
.enc-gal { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.enc-gal-bar { display: flex; gap: 4px; align-items: center; padding: 2px 12px 6px; flex-wrap: wrap; }
.enc-gal-tab { background: #e2eaef; border: 1px solid #b8c8d4; padding: 3px 8px; display: inline-flex; align-items: center; }
.enc-gal-tab.active { background: #0d5a7a; color: #fff; border-color: #083a55; }
.enc-gal-count { margin-left: auto; color: #6a8aa0; }
.enc-gal-grid {
  flex: 1; min-height: 0; overflow: auto; margin: 0 12px 10px;
  display: flex; flex-wrap: wrap; gap: 10px; align-content: flex-start;
}
.enc-gal-card {
  width: 148px; background: #fff; border: 1px solid #c8d4de; padding: 6px;
  display: flex; flex-direction: column; gap: 4px; text-align: left;
}
.enc-gal-card:hover { border-color: #0d5a7a; box-shadow: 0 0 0 2px #ffd23f; }
.enc-gal-thumb { height: 88px; overflow: hidden; background: #eef4f8; display: flex; align-items: center; justify-content: center; }
.enc-gal-thumb.audio { background: linear-gradient(180deg, #f0e6f4, #d8c4e4); }
.enc-gal-thumb.video { background: linear-gradient(180deg, #141a26, #2a3448); }
.enc-gal-thumb.chart { background: #f4f8f4; }
.enc-gal-thumb.pano { background: #cfe4f4; position: relative; }
.enc-gal-type { font-size: 9px; color: #b06a10; text-transform: uppercase; letter-spacing: 1px; font-family: var(--font-ui); }
.enc-gal-title { font-size: 11px; font-weight: 700; color: #123; line-height: 13px; max-height: 38px; overflow: hidden; }

/* ---------- media viewer ---------- */
.enc-mv { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 6px; }
.enc-mv-stage { flex: 1; min-height: 0; background: #fff; border: 1px solid #c8d4de; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.enc-mv-img { width: 100%; height: 100%; overflow: hidden; display: flex; align-items: center; justify-content: center; background: #f4f8fa; }
.enc-mv-img svg { object-fit: contain; }
.enc-mv-pano { position: absolute; top: 0; left: 0; width: 2400px; height: 100%; overflow: hidden; }
.enc-mv-pano svg { width: 2400px; height: auto; }
.enc-mv-pano-hint { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); background: rgba(10,70,102,0.85); color: #fff; padding: 3px 10px; border-radius: 8px; font-size: 10px; pointer-events: none; }
.enc-mv-compass { position: absolute; top: 8px; right: 10px; background: rgba(255,255,255,0.9); border: 1px solid #0a4666; color: #0a4666; font-weight: 700; padding: 2px 8px; border-radius: 10px; }
.enc-mv-chart { padding: 8px; }
.enc-mv-audio { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; }
.enc-mv-audio-pb { width: 240px; }
.enc-mv-audio-time { font-family: var(--font-mono); color: #0a4666; }
.enc-mv-audio-row { display: flex; gap: 8px; }
.enc-mv-video { flex: 1; display: flex; flex-direction: column; gap: 6px; padding: 6px; min-height: 0; }
.enc-mv-video canvas { width: 100%; height: auto; border: 1px solid #123; background: #000; }
.enc-mv-video-controls { display: flex; gap: 6px; align-items: center; }
.enc-mv-video-label { color: #0a4666; font-style: italic; }
.enc-mv-caption { flex: none; padding: 6px 4px 2px; font-size: 11px; color: #3a4a58; line-height: 14px; }