/* ============================================================
   Encarta 99 — encyclopedia chrome & content
   ============================================================ */
:root {
  --enc-green: #0b5349;
  --enc-green2: #12735f;
  --enc-pale: #e6efe4;
  --enc-cream: #fcfbf3;
  --enc-head: #083a33;
  --enc-link: #0343b4;
  --enc-maroon: #7a1f2b;
  --enc-gold: #c8932a;
}

/* ---------- splash ---------- */
.enc-splash {
  position: absolute; width: 480px; height: 330px; z-index: 9990;
  border: 1px solid #04241f; box-shadow: 4px 4px 14px rgba(0,0,0,.55);
  background: linear-gradient(160deg, #062b25 0%, #0b5349 45%, #10437a 100%);
  color: #fff; overflow: hidden;
}
.enc-splash .swirl { position: absolute; inset: 0; opacity: .9; }
.enc-splash .brand { position: absolute; left: 0; right: 0; top: 118px; text-align: center; }
.enc-splash .brand .e { font: italic 700 58px Georgia, "Times New Roman", serif; color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,.5); letter-spacing: 1px; }
.enc-splash .brand .sub { font: 16px Georgia, serif; color: #d8ecdf; margin-top: 2px; letter-spacing: 5px; }
.enc-splash .brand .yr { font: bold 26px Georgia, serif; color: var(--enc-gold); margin-top: 6px; }
.enc-splash .foot { position: absolute; left: 14px; right: 14px; bottom: 10px; display: flex; justify-content: space-between; font: 10px Tahoma; color: #a8c8b8; }
.enc-splash .load { position: absolute; left: 0; right: 0; top: 240px; text-align: center; font: 11px Tahoma; color: #cfe8dc; }

/* ---------- app frame ---------- */
.enc-root { display: flex; flex-direction: column; height: 100%; background: var(--face); }
.enc-toolbar {
  display: flex; align-items: center; gap: 2px; padding: 2px 4px; flex: none;
  border-bottom: 1px solid var(--shade);
  box-shadow: inset 0 -1px 0 var(--hilite);
  background: var(--face); flex-wrap: wrap;
}
.enc-tb {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  min-width: 44px; padding: 3px 5px 2px; font: 10px Tahoma; color: #000;
  border: 1px solid transparent; background: transparent;
}
.enc-tb .ico { width: 20px; height: 20px; }
.enc-tb:hover:not(.dis) { border-color: var(--lite) var(--dark) var(--dark) var(--lite);
  box-shadow: inset 1px 1px 0 var(--hilite), inset -1px -1px 0 var(--shade); }
.enc-tb:active:not(.dis) { border-color: var(--dark) var(--lite) var(--lite) var(--dark);
  box-shadow: inset 1px 1px 0 var(--shade); }
.enc-tb.dis { color: #808080; }
.enc-tb.dis .ico { filter: grayscale(1) opacity(.45); }
.enc-tbsep { width: 1px; align-self: stretch; margin: 2px 3px; border-left: 1px solid var(--shade); border-right: 1px solid var(--hilite); }

.enc-main { flex: 1; display: flex; min-height: 0; }

/* ---------- pinpointer pane ---------- */
.enc-pin {
  width: 218px; flex: none; display: flex; flex-direction: column;
  background: var(--enc-pale); border-right: 1px solid var(--shade);
}
.enc-pin.hidden { display: none; }
.enc-pin-head {
  background: linear-gradient(90deg, var(--enc-green), var(--enc-green2));
  color: #fff; font: bold 12px Tahoma; padding: 4px 8px; display: flex; align-items: center; gap: 6px; flex: none;
}
.enc-pin-head .ico { width: 16px; height: 16px; }
.enc-pin-ctl { padding: 7px 8px 4px; flex: none; border-bottom: 1px solid #b9cbbd; }
.enc-pin-ctl label { font: 10px Tahoma; color: #24413a; display: block; margin-bottom: 3px; }
.enc-pin-ctl input { width: 100%; height: 20px; }
.enc-pin-scope { display: flex; gap: 4px; margin-top: 5px; }
.enc-pin-scope .sc {
  flex: 1; text-align: center; font: 10px Tahoma; padding: 2px 0; color: #24413a;
  border: 1px solid #b9cbbd; background: #d8e4d6; cursor: default;
}
.enc-pin-scope .sc.on { background: var(--enc-green); color: #fff; border-color: var(--enc-green); }
.enc-pin-list {
  flex: 1; overflow-y: auto; margin: 6px 4px 4px 8px; background: #fff;
  border: 1px solid; border-color: var(--shade) var(--hilite) var(--hilite) var(--shade);
  box-shadow: inset 1px 1px 0 var(--dark), inset -1px -1px 0 var(--lite);
}
.enc-pin-item { padding: 2px 6px; font: 11px Tahoma; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: default; }
.enc-pin-item .pcat { color: #6a7d72; font-size: 10px; }
.enc-pin-item.sel { background: var(--sel); color: #fff; }
.enc-pin-item.sel .pcat { color: #c8d8ff; }
.enc-pin-item:hover:not(.sel) { background: #dce8e0; }
.enc-pin-foot { flex: none; font: 10px Tahoma; color: #3c574e; padding: 3px 8px 5px; }
.enc-pin-tree { padding: 4px 0; }
.enc-pt-cat { font: bold 11px Tahoma; color: var(--enc-head); padding: 2px 8px; display: flex; align-items: center; gap: 5px; }
.enc-pt-cat:hover { background: #dce8e0; }
.enc-pt-cat .tw { width: 10px; font-size: 8px; }
.enc-pt-item { font: 11px Tahoma; padding: 1px 8px 1px 24px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.enc-pt-item:hover { background: #dce8e0; }
.enc-pt-item.sel { background: var(--sel); color: #fff; }

.enc-splitter { width: 4px; flex: none; cursor: e-resize; background: var(--face); }
.enc-splitter:hover { background: #a8a8a8; }

/* ---------- content pane ---------- */
.enc-content { flex: 1; display: flex; flex-direction: column; min-width: 0; background: var(--enc-cream); }
.enc-crumbs {
  flex: none; padding: 4px 12px; font: 10px Tahoma; color: #4a6058;
  border-bottom: 1px solid #d8d4c0; background: #f2f0e2;
  display: flex; align-items: center; gap: 4px; white-space: nowrap; overflow: hidden;
}
.enc-crumbs b { color: var(--enc-head); }
.enc-crumbs a { color: var(--enc-link); cursor: pointer; text-decoration: none; }
.enc-crumbs a:hover { text-decoration: underline; }
.enc-view { flex: 1; overflow: auto; position: relative; }

/* ---------- home ---------- */
.enc-home { min-height: 100%; }
.enc-home-hero {
  background: linear-gradient(150deg, #062b25, #0b5349 55%, #136a8a);
  color: #fff; padding: 26px 30px 22px; position: relative; overflow: hidden;
}
.enc-home-hero .wm { font: italic 700 44px Georgia, serif; letter-spacing: 1px; text-shadow: 0 2px 6px rgba(0,0,0,.4); }
.enc-home-hero .sub { font: 13px Tahoma; color: #cfe0d6; margin-top: 2px; }
.enc-home-hero .orbits { position: absolute; right: -30px; top: -40px; width: 260px; height: 260px; opacity: .5; }
.enc-home-search { display: flex; gap: 6px; margin-top: 16px; max-width: 520px; position: relative; z-index: 2; }
.enc-home-search input { flex: 1; height: 24px; font-size: 12px; }
.enc-home-search .btn { min-width: 80px; }
.enc-home-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; padding: 18px 26px; }
.enc-home-cat {
  display: flex; align-items: center; gap: 9px; padding: 8px 10px;
  background: #fff; border: 1px solid #d0ccb4; box-shadow: 1px 1px 0 #e8e4cf;
  font: bold 12px Tahoma; color: var(--enc-head); cursor: default;
}
.enc-home-cat:hover { border-color: var(--enc-green); background: #f2f8f0; }
.enc-home-cat .ico { width: 28px; height: 28px; flex: none; }
.enc-home-cat .n { font: 9px Tahoma; color: #7a8a80; display: block; font-weight: normal; margin-top: 1px; }
.enc-home-side { display: flex; gap: 18px; padding: 0 26px 24px; flex-wrap: wrap; }
.enc-home-panel { flex: 1; min-width: 240px; background: #fff; border: 1px solid #d0ccb4; padding: 0; }
.enc-home-panel h3 { font: bold 11px Tahoma; color: #fff; background: var(--enc-green); padding: 4px 8px; letter-spacing: .5px; }
.enc-home-panel .inner { padding: 8px 10px; font: 11px Tahoma; line-height: 1.45; }
.enc-home-panel .inner a { color: var(--enc-link); cursor: pointer; }
.enc-home-panel img { max-width: 100%; border: 1px solid #c0bca8; }
.enc-featrow { display: flex; gap: 8px; flex-wrap: wrap; padding: 0 26px 20px; }
.enc-feat {
  display: flex; align-items: center; gap: 6px; padding: 5px 10px; font: 11px Tahoma;
  background: var(--enc-pale); border: 1px solid #b9cbbd; color: var(--enc-head); cursor: default;
}
.enc-feat:hover { background: #d8e8dc; }
.enc-feat .ico { width: 18px; height: 18px; }

/* ---------- article view ---------- */
.enc-article-wrap { display: flex; height: 100%; min-height: 0; }
.enc-outline {
  width: 148px; flex: none; overflow-y: auto; padding: 10px 8px;
  border-right: 1px solid #d8d4c0; background: #f4f2e6;
}
.enc-outline h4 { font: bold 10px Tahoma; color: var(--enc-maroon); letter-spacing: 1px; text-transform: uppercase; margin-bottom: 6px; }
.enc-outline .ol { font: 11px Tahoma; color: var(--enc-link); padding: 2px 4px 2px 8px; cursor: pointer; line-height: 1.3; position: relative; }
.enc-outline .ol::before { content: attr(data-n) "."; position: absolute; left: -6px; color: #8a9478; font-size: 9px; display: none; }
.enc-outline .ol .n { color: #8a9478; font-size: 9px; margin-right: 4px; }
.enc-outline .ol:hover { text-decoration: underline; }
.enc-outline .ol.cur { color: var(--enc-head); font-weight: bold; }
.enc-article { flex: 1; overflow-y: auto; padding: 18px 26px 40px; font: 12px/1.55 Arial, Helvetica, sans-serif; color: #2a2a2a; }
.enc-article h1.atitle { font: 400 30px Georgia, "Times New Roman", serif; color: var(--enc-head); margin: 0 0 2px; }
.enc-article .adates { font: 12px Tahoma; color: var(--enc-maroon); margin-bottom: 12px; }
.enc-article h2 { font: bold 15px Arial; color: var(--enc-green); margin: 18px 0 6px; padding-bottom: 2px; border-bottom: 1px solid #d8d4c0; }
.enc-article h2:first-of-type { margin-top: 10px; }
.enc-article p { margin: 0 0 9px; }
.enc-article a, .enc-body a { color: var(--enc-link); cursor: pointer; text-decoration: none; }
.enc-article a:hover { text-decoration: underline; }
.enc-article a.ext { color: #7a5a00; cursor: not-allowed; }
.enc-facts {
  float: right; width: 190px; margin: 2px 0 10px 14px; background: #fff;
  border: 1px solid #c8c4ac; font: 10px Tahoma;
}
.enc-facts .fh { background: var(--enc-green); color: #fff; font-weight: bold; padding: 3px 7px; font-size: 10px; }
.enc-facts table { width: 100%; border-collapse: collapse; }
.enc-facts td { padding: 3px 7px; border-top: 1px solid #e8e4d0; vertical-align: top; }
.enc-facts td:first-child { color: #5a6650; width: 42%; }
.enc-img { float: right; clear: right; width: 200px; margin: 4px 0 10px 14px; background: #fff; border: 1px solid #c8c4ac; padding: 3px; }
.enc-img img { width: 100%; display: block; border: 1px solid #a09c84; cursor: pointer; }
.enc-img .cap { font: 10px/1.35 Tahoma; color: #3c463c; padding: 4px 2px 1px; }
.enc-img .cred { font: 9px Tahoma; color: #8a8a72; padding: 0 2px 2px; }
.enc-sidebox {
  clear: both; margin: 14px 0; padding: 0; background: #f0e8d0;
  border: 1px solid #c8b880; border-left: 4px solid var(--enc-gold);
}
.enc-sidebox .sh { font: bold 11px Tahoma; color: var(--enc-maroon); padding: 5px 10px 0; letter-spacing: .5px; }
.enc-sidebox .sb { font: 11px/1.5 Tahoma; color: #4a4028; padding: 4px 10px 8px; }
.enc-media-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0; }
.enc-mediabox {
  width: 150px; background: #fff; border: 1px solid #c8c4ac; padding: 4px; cursor: pointer;
}
.enc-mediabox:hover { border-color: var(--enc-green); }
.enc-mediabox .thumb { height: 88px; background: #20241f; display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative; }
.enc-mediabox .thumb img { width: 100%; height: 100%; object-fit: cover; }
.enc-mediabox .badge { position: absolute; right: 3px; bottom: 3px; background: rgba(0,0,0,.7); color: #fff; font: 9px Tahoma; padding: 1px 5px; }
.enc-mediabox .cap { font: 10px/1.3 Tahoma; color: #3c463c; padding-top: 4px; }
.enc-seealso { margin-top: 18px; border-top: 1px solid #d8d4c0; padding-top: 10px; font: 11px Tahoma; }
.enc-seealso b { color: var(--enc-maroon); }
.enc-seealso ul { list-style: none; margin-top: 5px; }
.enc-seealso li { display: inline; }
.enc-seealso li + li::before { content: " • "; color: #9aa090; }
.enc-loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: var(--enc-cream); font: 12px Tahoma; color: #5a6a60; gap: 10px; }
.enc-loading .spin { width: 22px; height: 22px; animation: encspin 1s linear infinite; }
@keyframes encspin { to { transform: rotate(360deg); } }

/* ---------- category / search results ---------- */
.enc-listpage { padding: 16px 24px 30px; }
.enc-listpage h1 { font: 400 26px Georgia, serif; color: var(--enc-head); margin-bottom: 4px; }
.enc-listpage .desc { font: 11px/1.5 Tahoma; color: #4a544a; max-width: 560px; margin-bottom: 12px; }
.enc-res { border-top: 1px solid #d8d4c0; }
.enc-res-item { padding: 7px 4px; border-bottom: 1px solid #e4e0cc; }
.enc-res-item .t { font: bold 12px Arial; color: var(--enc-link); cursor: pointer; }
.enc-res-item .t:hover { text-decoration: underline; }
.enc-res-item .sn { font: 11px/1.4 Tahoma; color: #4a544a; margin-top: 2px; }
.enc-res-item .sn b { color: var(--enc-head); }
.enc-res-item .c { font: 9px Tahoma; color: #8a9478; }
.enc-res-empty { padding: 30px 10px; text-align: center; color: #5a6a60; font: 12px Tahoma; }
.enc-res-empty .big { font-size: 15px; color: var(--enc-head); margin-bottom: 6px; }

/* ---------- media gallery ---------- */
.enc-gallery { padding: 14px 20px 30px; }
.enc-gal-tabs { display: flex; gap: 4px; margin-bottom: 12px; }
.enc-gal-tabs .gt { padding: 3px 12px; font: 11px Tahoma; border: 1px solid #b9cbbd; background: #e4ecdf; cursor: default; }
.enc-gal-tabs .gt.on { background: var(--enc-green); color: #fff; border-color: var(--enc-green); }
.enc-gal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.enc-gal-item { background: #fff; border: 1px solid #c8c4ac; padding: 4px; cursor: pointer; }
.enc-gal-item:hover { border-color: var(--enc-green); box-shadow: 1px 1px 4px rgba(0,0,0,.15); }
.enc-gal-item .thumb { height: 92px; background: #1a201c; overflow: hidden; display: flex; align-items: center; justify-content: center; position: relative; }
.enc-gal-item .thumb img { width: 100%; height: 100%; object-fit: cover; }
.enc-gal-item .thumb .ico { width: 34px; height: 34px; }
.enc-gal-item .badge { position: absolute; right: 3px; bottom: 3px; background: rgba(0,0,0,.7); color: #fff; font: 9px Tahoma; padding: 1px 5px; }
.enc-gal-item .cap { font: 10px/1.3 Tahoma; color: #3c463c; padding: 4px 2px 1px; }

/* ---------- media viewer window ---------- */
.mview { display: flex; flex-direction: column; height: 100%; background: #20241f; color: #fff; }
.mview .stage { flex: 1; display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 10px; }
.mview .stage img { max-width: 100%; max-height: 100%; box-shadow: 0 0 0 1px #000, 0 4px 14px rgba(0,0,0,.6); }
.mview .capbar { flex: none; padding: 7px 12px; background: #101410; font: 11px Tahoma; color: #d8e4da; border-top: 1px solid #000; }
.mview .capbar .cred { color: #7a8a7c; font-size: 10px; }
.mview .zoom { position: absolute; right: 10px; top: 10px; display: flex; gap: 4px; }
.mview .zoom .btn { min-width: 26px; min-height: 20px; padding: 0 6px; font-size: 12px; }

/* media player */
.mp-wrap { display: flex; flex-direction: column; height: 100%; background: #181818; }
.mp-screen { flex: 1; position: relative; overflow: hidden; min-height: 80px; }
.mp-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.mp-audioface { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  background: radial-gradient(ellipse at 50% 30%, #233028, #101410); }
.mp-vu { display: flex; gap: 4px; align-items: flex-end; height: 22px; }
.mp-vu i { width: 7px; background: #2eff70; height: 4px; transition: height .12s; }
.mp-audiotitle { font: 12px Tahoma; color: #cfe0d6; }
.mp-ctrls { flex: none; display: flex; align-items: center; gap: 4px; padding: 6px 8px; background: var(--face); border-top: 1px solid #000; }
.mp-btn { min-width: 30px; min-height: 21px; padding: 0 6px; }
.mp-seek { flex: 1; }
.mp-time { font: 11px Tahoma; min-width: 38px; text-align: center; }
.mp-caption { flex: none; padding: 4px 8px; font: 10px Tahoma; color: #8a9a8e; background: #101410; }

/* ---------- timeline ---------- */
.enc-timeline { height: 100%; display: flex; flex-direction: column; }
.enc-tl-head { flex: none; padding: 8px 14px 4px; }
.enc-tl-head h1 { font: 400 22px Georgia, serif; color: var(--enc-head); }
.enc-tl-scroll { flex: 1; overflow-x: auto; overflow-y: hidden; position: relative; padding: 8px 0; }
.enc-tl-track { position: relative; height: 100%; min-height: 200px; }
.enc-tl-era { position: absolute; top: 0; bottom: 24px; border-left: 1px solid rgba(0,0,0,.15); }
.enc-tl-era .en { position: sticky; top: 0; font: bold 10px Tahoma; color: #fff; padding: 2px 7px; display: inline-block; }
.enc-tl-axis { position: absolute; left: 0; right: 0; top: 50%; height: 2px; background: #8a9478; }
.enc-tl-tick { position: absolute; top: 50%; width: 1px; height: 8px; background: #8a9478; }
.enc-tl-tick .yr { position: absolute; top: 10px; left: -16px; width: 40px; text-align: center; font: 9px Tahoma; color: #6a7a68; }
.enc-tl-ev { position: absolute; top: 50%; transform: translateY(-50%); }
.enc-tl-ev .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--enc-green); border: 1px solid #fff; box-shadow: 0 0 0 1px var(--enc-green); margin: 0 auto; cursor: pointer; }
.enc-tl-ev .dot:hover { background: var(--enc-gold); box-shadow: 0 0 0 2px var(--enc-gold); }
.enc-tl-ev .lbl { position: absolute; left: -70px; width: 148px; text-align: center; font: 9px/1.25 Tahoma; color: #33413a; cursor: pointer; }
.enc-tl-ev .lbl:hover { color: var(--enc-link); text-decoration: underline; }
.enc-tl-ev .lbl.above { bottom: 12px; } .enc-tl-ev .lbl.below { top: 12px; }
.enc-tl-ev .yr2 { font-weight: bold; color: var(--enc-maroon); display: block; }

/* ---------- atlas ---------- */
.enc-atlas { height: 100%; display: flex; flex-direction: column; }
.enc-atlas-map { flex: 1; overflow: auto; position: relative; background: #b8cfe8; }
.enc-atlas-map .mapwrap { position: relative; width: 900px; margin: 10px auto; }
.enc-atlas-map img { display: block; width: 900px; }
.enc-atlas-pt { position: absolute; transform: translate(-50%, -50%); }
.enc-atlas-pt .pin { width: 10px; height: 10px; border-radius: 50%; background: var(--enc-maroon); border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.4); cursor: pointer; margin: 0 auto; }
.enc-atlas-pt .pin:hover { background: var(--enc-gold); }
.enc-atlas-pt .nm { font: 9px Tahoma; color: #17325a; background: rgba(255,255,255,.75); padding: 0 3px; margin-top: 1px; white-space: nowrap; }
.enc-atlas-card { position: absolute; z-index: 10; width: 220px; background: #ffffe1; border: 1px solid #404040;
  box-shadow: 3px 3px 8px rgba(0,0,0,.4); padding: 8px 10px; font: 11px Tahoma; }
.enc-atlas-card b { color: var(--enc-head); font-size: 12px; }
.enc-atlas-card p { margin: 5px 0; color: #444; line-height: 1.35; }
.enc-atlas-card a { color: var(--enc-link); cursor: pointer; }

/* ---------- mindmaze ---------- */
.enc-maze { height: 100%; display: flex; flex-direction: column; background: #141020; color: #e8e0f8; font: 12px Tahoma; }
.enc-maze-top { flex: none; padding: 6px 12px; display: flex; justify-content: space-between; align-items: center; background: #241a38; border-bottom: 1px solid #000; }
.enc-maze-top .t { font: bold 14px Georgia, serif; color: #d8c88a; }
.enc-maze-main { flex: 1; display: flex; min-height: 0; }
.enc-maze-view { flex: 1; position: relative; overflow: hidden; background: #0a0812; }
.enc-maze-grid { position: absolute; inset: 0; display: grid; margin: 14px; }
.enc-maze-side { width: 230px; flex: none; background: #1c1430; border-left: 1px solid #000; padding: 10px; overflow-y: auto; }
.mm-cell { position: relative; border: 1px solid #241a38; background: #120e1e; }
.mm-cell.wall { background: #050408; border-color: #050408; }
.mm-cell.seen { background: #1a1428; }
.mm-cell.here { background: #2a2044; }
.mm-cell .avatar { position: absolute; inset: 15%; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #ffe9a0, #c8932a); box-shadow: 0 0 14px rgba(255,220,120,.8); }
.mm-cell .door { position: absolute; inset: 30%; border-radius: 3px; background: #7a5a28; box-shadow: 0 0 8px rgba(200,147,42,.7); }
.mm-cell .door.done { background: #3a6a3a; box-shadow: none; }
.mm-cell .exit { position: absolute; inset: 20%; background: radial-gradient(circle, #f9d870, #b8860b); border-radius: 4px; box-shadow: 0 0 16px #f9d870; }
.mm-torch { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at var(--tx, 50%) var(--ty, 50%), transparent 60px, rgba(0,0,0,.82) 150px); }
.mm-q { background: #241a38; border: 1px solid #4a3a6a; padding: 10px; margin-bottom: 10px; }
.mm-q .qt { font: bold 12px Tahoma; color: #f0e8c8; margin-bottom: 8px; }
.mm-q .opt { display: block; width: 100%; text-align: left; margin: 4px 0; padding: 4px 8px;
  background: #33254e; color: #e8e0f8; border: 1px solid #4a3a6a; font: 11px Tahoma; }
.mm-q .opt:hover:not(:disabled) { background: #453468; }
.mm-q .opt.right { background: #2a5a2a; border-color: #4a9a4a; }
.mm-q .opt.wrong { background: #5a2a2a; border-color: #9a4a4a; }
.mm-log { font: 10px/1.5 Tahoma; color: #a898c8; }
.mm-score { font: bold 12px Tahoma; color: #f9d870; }

/* ---------- dictionary ---------- */
.enc-dict-entry { padding: 2px 0; }
.enc-dict-entry .dw { font: bold 13px Arial; color: var(--enc-head); }
.enc-dict-entry .dp { font: italic 10px Tahoma; color: var(--enc-maroon); }
.enc-dict-entry .dd { font: 11px/1.45 Tahoma; color: #333; margin-top: 3px; }

/* ---------- misc ---------- */
.enc-wintitle { color: var(--enc-head); }

/* ---------- OS app styles (explorer/notepad/minesweeper/ie) ---------- */
.fsbar { display: flex; align-items: center; gap: 5px; padding: 4px 6px; border-bottom: 1px solid var(--shade); flex: none; font: var(--font); }
.fsbtn { min-width: 26px !important; min-height: 22px; padding: 1px 4px; }
.fsbtn svg { width: 14px; height: 14px; vertical-align: middle; }
.fsaddr { font: var(--font); color: #333; padding-left: 4px; }
.fslist { flex: 1; margin: 4px; overflow: auto; display: flex; flex-wrap: wrap; align-content: flex-start; gap: 4px; padding: 8px; }
.fsitem { width: 74px; text-align: center; padding: 5px 2px; cursor: default; }
.fsitem .ico { width: 32px; height: 32px; margin: 0 auto; display: block; }
.fsitem span { font: 11px Tahoma; display: block; margin-top: 3px; word-wrap: break-word; }
.fsitem.sel { background: var(--sel); }
.fsitem.sel span { color: #fff; }
.np-text { width: 100%; height: 100%; border: none; resize: none; font: 12px "Lucida Console", "Courier New", monospace; padding: 4px 6px; outline: none; background: #fff; -webkit-user-select: text; user-select: text; }
.ms-top { display: flex; justify-content: space-between; align-items: center; padding: 6px; }
.ms-led { font: bold 16px "Courier New", monospace; color: #ff2020; background: #000; padding: 0 3px; letter-spacing: 2px; }
.ms-face { width: 30px; height: 30px; font-size: 15px; line-height: 1;
  border: 1px solid; border-color: var(--lite) var(--dark) var(--dark) var(--lite);
  box-shadow: inset 1px 1px 0 var(--hilite), inset -1px -1px 0 var(--shade); background: var(--face); }
.ms-face:active { border-color: var(--dark) var(--lite) var(--lite) var(--dark); box-shadow: inset 1px 1px 0 var(--shade); }
.ms-grid { display: grid; grid-template-columns: repeat(9, 22px); grid-auto-rows: 22px; margin: 0 auto 8px; width: 198px;
  border: 2px solid; border-color: var(--shade) var(--hilite) var(--hilite) var(--shade); }
.ms-cell { display: flex; align-items: center; justify-content: center; font: bold 13px Tahoma; background: var(--face);
  border: 1px solid; border-color: var(--lite) var(--dark) var(--dark) var(--lite);
  box-shadow: inset 1px 1px 0 var(--hilite), inset -1px -1px 0 var(--shade); cursor: default; }
.ms-cell.open { border: 1px solid #909090; box-shadow: none; background: #d0d0d0; }
.ms-cell.mine { background: #ff4040; }
.iepage { flex: 1; overflow: auto; background: #fff; }