/* ============================================================
   THE MULTIMEDIA ENCYCLOPEDIA "ARCADIA 99" — application skin
   Deep navy + gold identity, serif article body, media frames.
   Original artwork & design; evokes the era's CD-ROM feel.
   ============================================================ */

.window.enc-win .titlebar {
  background: linear-gradient(90deg,#100b46 0%, #1c1c7a 55%, #2b3fae 88%, #5d74d8 100%);
}

/* ---------- layout frame ---------- */
.enc-root { position:absolute; inset:0; display:flex; background:#20206e;
  font-family: Verdana, Tahoma, sans-serif; font-size:12px; }
.enc-rail { width:104px; flex:none; display:flex; flex-direction:column; gap:2px; padding:8px 6px;
  background:
    radial-gradient(90% 30% at 50% -4%, rgba(255,255,255,.28), transparent),
    linear-gradient(#191960, #23239b 40%, #17175f);
}
.enc-logo { text-align:center; margin-bottom:8px; }
.enc-logo svg { width:64px; height:38px; filter: drop-shadow(0 2px 2px rgba(0,0,0,.5)); }
.enc-logo b { display:block; color:#ffd24a; font-size:10px; letter-spacing:.12em; margin-top:2px;}
.rail-btn { display:flex; flex-direction:column; align-items:center; gap:3px; padding:7px 2px 5px;
  border:none; background:none; cursor:pointer; color:#e6ebff; font-family:inherit; font-size:10px;
  border-radius:4px; border:1px solid transparent; }
.rail-btn svg { width:24px; height:24px; filter: drop-shadow(0 1px 1px rgba(0,0,0,.55)); transition: transform .12s ease-out; }
.rail-btn:hover { background:rgba(255,255,255,.13); border-color:rgba(255,210,74,.45); color:#fff; }
.rail-btn:hover svg { transform: translateY(-1px) scale(1.08); }
.rail-btn.on { background:#ffd24a; color:#20165e; border-color:#fff0b8; box-shadow: inset 0 -14px 18px -12px #b98a00; }
.rail-btn.on svg { transform:none; }
.rail-sep { height:1px; background:rgba(255,255,255,.22); border-bottom:1px solid rgba(0,0,20,.35); margin:5px 6px; }

.enc-main { flex:1; min-width:0; display:flex; flex-direction:column; background:#f4f2ec; }
.enc-topbar { flex:none; height:34px; display:flex; align-items:center; gap:10px; padding:0 12px;
  background: linear-gradient(#23237e,#14134f); color:#fff;
  box-shadow: inset 0 -6px 10px -8px #000, inset 0 1px 0 rgba(255,255,255,.25); }
.enc-topbar .brandline b { color:#ffd24a; letter-spacing:.05em; font-size:13px;}
.enc-topbar .brandline span { opacity:.85; font-size:11px; }
.enc-crumb { margin-left:auto; font-size:11px; color:#bfd0ff; max-width:52%; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
.enc-topbar .histbtns { display:flex; gap:3px; }
.hbtn { width:26px; height:24px; display:grid; place-items:center; background:linear-gradient(#3d51c9,#25309b);
  color:#fff; border:1px solid #677ff0; border-bottom-color:#10123f; border-right-color:#10123f; cursor:pointer; border-radius:2px;}
.hbtn:disabled { opacity:.42; cursor:default; }
.hbtn:not(:disabled):hover { background:linear-gradient(#5568de,#3340af); }
.enc-stage { flex:1; min-height:0; position:relative; overflow:hidden; }

/* ---------- generic pane background ---------- */
.pane-scroll { position:absolute; inset:0; overflow-y:auto; padding:0 0 26px; scrollbar-gutter:stable;}

/* ---------- SPLASH ---------- */
.splash { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px;
  background:
    radial-gradient(70% 50% at 50% 30%, rgba(90,120,255,.35), transparent 70%),
    linear-gradient(#06061c, #131366 48%, #232397);
  color:#fff; z-index:20; overflow:hidden;}
.splash .disc { width:150px; height:150px; border-radius:50%; position:relative;
  background: conic-gradient(from 140deg, #e9edff, #9fb2ea, #fdfbe8, #b7c4ee, #fffef2, #aab8e6, #e9edff);
  box-shadow: 0 0 0 4px #10104a, 0 10px 32px rgba(0,0,0,.65), inset 0 0 26px rgba(40,50,120,.5);
  animation: discspin 2.6s cubic-bezier(.3,.6,.4,1) infinite; }
.splash .disc::after { content:""; position:absolute; inset:62px; border-radius:50%;
  background:#eceafc; box-shadow: 0 0 0 3px #26266e, inset 0 1px 4px #8080aa;}
@keyframes discspin { to { transform: rotate(360deg); } }
.splash h1 { font-size:34px; letter-spacing:.02em; text-shadow:2px 3px 0 #00084a, 0 6px 18px rgba(0,0,0,.5); }
.splash h1 b { color:#ffd24a; }
.splash .sub { color:#c9d4ff; letter-spacing:.24em; text-transform:uppercase; font-size:11px;}
.splash .loadbar { width:270px; height:14px; border:2px solid #6f7ff0; background:#0a0a34; border-radius:2px; overflow:hidden;}
.splash .loadbar i { display:block; height:100%; width:0%; background:repeating-linear-gradient(90deg,#ffd24a 0 10px,#e6a800 10px 14px);
  animation: splashfill 2.6s ease-in-out forwards; }
@keyframes splashfill { from{width:0} to{width:100%} }
.splash .hint { position:absolute; bottom:26px; font-size:10px; color:#9aa6e8; letter-spacing:.05em;}
.splash .status { font-size:11px; color:#aebbff; height:14px;}

/* ---------- HOME ---------- */
.home { position:absolute; inset:0; overflow-y:auto;
  background:
   radial-gradient(1000px 500px at 110% -10%, rgba(255,210,74,.14), transparent 60%),
   linear-gradient(#e8e5da, #f6f4ee 240px); }
.home-hero { position:relative; min-height:196px; display:flex; align-items:flex-end; gap:18px; padding:20px 24px 16px;
  background:
   radial-gradient(420px 190px at 86% 115%, rgba(255,210,74,.35), transparent 68%),
   linear-gradient(118deg, #171760 0%, #232391 44%, #3154c4 78%, #6d87e0 100%);
  box-shadow: 0 3px 10px rgba(10,10,60,.4); overflow:hidden;}
.home-hero::before { content:""; position:absolute; right:-60px; top:-110px; width:340px; height:340px; border-radius:50%;
  border:26px solid rgba(255,210,74,.18); filter: blur(.4px);}
.hero-globe { width:132px; height:132px; flex:none; margin-left:auto; align-self:center;
  filter: drop-shadow(0 8px 14px rgba(0,0,10,.5)); animation: floaty 6s ease-in-out infinite alternate;}
@keyframes floaty { from{transform:translateY(-4px)} to{transform:translateY(6px)} }
.home-brand { position:relative; z-index:2; }
.home-brand h1 { color:#fff; font-size:31px; line-height:1.05; text-shadow:0 3px 0 #00084a, 0 8px 22px rgba(0,0,30,.45); }
.home-brand h1 small { display:block; font-size:12px; letter-spacing:.34em; color:#ffd24a; font-weight:normal; margin-bottom:4px;}
.home-brand p { color:#cdd8ff; max-width:430px; margin-top:8px; font-size:11.5px; }
.home-find { margin:16px 24px 4px; display:flex; gap:8px; align-items:stretch; }
.home-find input { flex:1; max-width:520px; font:inherit; font-size:13px; padding:6px 9px; background:#fff;
  border:none; border-top:1px solid #44448a; border-left:1px solid #44448a; border-right:1px solid #fff; border-bottom:1px solid #fff;
  box-shadow: 1px 1px 0 #8888b8 inset,-1px -1px 0 #8888b8 inset;}
.home-find button { padding:6px 14px; font-weight:bold; cursor:pointer; font-family:inherit; color:#20165e;
  background:linear-gradient(#ffe89a,#ffc83c); border:1px solid #fff2bd; border-right-color:#8a6a00; border-bottom-color:#8a6a00; border-radius:2px;}
.home-find button:active { transform:translateY(1px); }
.home-title-row { display:flex; align-items:center; gap:10px; margin:20px 24px 10px; }
.home-title-row h2 { font-size:15px; color:#181858; letter-spacing:.03em; border-bottom:3px double #9999cc; padding-bottom:4px; flex:1;}
.cat-tiles { display:grid; grid-template-columns:repeat(auto-fill,minmax(148px,1fr)); gap:12px; padding:0 24px 8px; }
.cat-tile { position:relative; padding:12px 12px 12px 54px; min-height:56px; text-align:left; cursor:pointer;
  font-family:inherit; border-radius:4px; color:#fff; border:1px solid rgba(255,255,255,.35);
  box-shadow: 0 3px 8px rgba(20,20,80,.35), inset 0 1px 0 rgba(255,255,255,.25);
  background-image: var(--tilegrad);
  transition: transform .13s ease-out; }
.cat-tile:hover { transform:translateY(-2px); box-shadow:0 6px 12px rgba(20,20,80,.4), inset 0 1px 0 rgba(255,255,255,.3);}
.cat-tile b { display:block; font-size:13px; }
.cat-tile span { font-size:10px; opacity:.9; }
.cat-tile .catico { position:absolute; left:9px; top:50%; transform:translateY(-50%); width:36px;height:36px;
  display:grid;place-items:center;background:rgba(255,255,255,.18); border-radius:50%; box-shadow:inset 0 0 0 1px rgba(255,255,255,.4);}
.feat-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:14px; padding:0 24px 18px; }
.feat-card { background:#fff; border:1px solid #cbc8ba; box-shadow:2px 3px 6px rgba(40,40,80,.16); cursor:pointer; position:relative;
  transition: transform .14s ease-out; overflow:hidden;}
.feat-card:hover { transform:translateY(-3px); }
.feat-card .fc-media { height:106px; overflow:hidden; display:block; background:#dfe6f2;}
.feat-card .fc-media svg, .feat-card .fc-media canvas, .feat-card .fc-media img { width:100%; height:100%; object-fit:cover; display:block;}
.feat-card .fc-body { padding:8px 10px 10px; }
.feat-card .fc-tag { font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:#7a76c8; }
.feat-card h3 { font-size:12.5px; color:#191960; margin:2px 0 3px; }
.feat-card p { font-size:10.5px; color:#555; line-height:1.4; max-height:29px; overflow:hidden;}
.home-foot { padding:8px 24px 20px; color:#8b8bb0; font-size:10px; display:flex; gap:14px; }
.home-foot a { color:#33409a; }

/* ---------- PINPOINTER ---------- */
.pp-wrap { position:absolute; inset:0; display:flex; flex-direction:column; background:#eef0e4; }
.pp-head { padding:12px 16px 8px; background:linear-gradient(#23237e,#161553); color:#fff;
  box-shadow: inset 0 -8px 12px -10px #000; }
.pp-head h2 { font-size:15px; color:#ffd24a; letter-spacing:.04em; display:flex; align-items:center; gap:8px;}
.pp-head .funnel { filter:drop-shadow(0 1px 1px rgba(0,0,0,.5)); }
.pp-bar { display:flex; gap:8px; margin-top:9px; align-items:center; flex-wrap:wrap;}
.pp-bar input { flex:1; min-width:200px; font:inherit; font-size:14px; padding:5px 8px;
  border-top:1px solid #666; border-left:1px solid #666; border-right:1px solid #fff; border-bottom:1px solid #fff; box-shadow:1px 1px 0 #222 inset;}
.pp-bar select { font:inherit; padding:3px; }
.pp-count { font-size:10.5px; color:#cdd6ff; margin-top:6px; min-height:14px;}
.pp-body { flex:1; min-height:0; display:flex; }
.pp-list { flex:1; overflow-y:auto; background:#fff; margin:10px; border:1px solid #9a9ab8; box-shadow:1px 1px 0 #333 inset;}
.pp-list li { list-style:none; display:flex; align-items:baseline; gap:6px; padding:3px 8px; cursor:pointer; border-bottom:1px dotted #e2e2ea;}
.pp-list li .li-kind { font-size:9px; letter-spacing:.08em; color:#8d8db4; text-transform:uppercase; min-width:52px;}
.pp-list li b { font-weight:bold; color:#141460;}
.pp-list li mark { background:#ffe9a0; padding:0; color:#141460;}
.pp-list li.sel, .pp-list li:hover { background:#1f2f96; color:#fff;}
.pp-list li.sel b, .pp-list li:hover b, .pp-list li.sel .li-kind, .pp-list li:hover .li-kind { color:#fff; }
.pp-list li.sel mark, .pp-list li:hover mark { background:#ffd24a; color:#000;}
.pp-side { width:216px; flex:none; margin:10px 10px 10px 0; display:flex; flex-direction:column; gap:10px;}
.pp-preview { flex:1; background:#fff; border:1px solid #9a9ab8; padding:10px; overflow:auto; box-shadow:1px 1px 0 #333 inset;}
.pp-preview h4 { color:#191960; font-size:13px; border-bottom:2px solid #ffd24a; padding-bottom:3px;}
.pp-preview .deck { font-size:11px; color:#444; margin-top:5px; line-height:1.45;}
.pp-empty { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  background:#fff;border:1px solid #9a9ab8;margin:10px;text-align:center;padding:26px; box-shadow:1px 1px 0 #333 inset;}
.pp-empty .big { font-size:38px; filter:saturate(.8); }
.pp-empty h3 { color:#1c1c72; }
.pp-empty p { color:#555; font-size:11.5px; max-width:330px; line-height:1.5;}
.pp-tips { text-align:left; font-size:11px; color:#333; background:#f6f6ee; border:1px dashed #aaa; padding:8px 12px; max-width:340px;}
.pp-tips li { margin:4px 0 4px 14px; }
.recovery-btn { margin-top:4px; }

/* ---------- ARTICLE VIEW ---------- */
.art-cols { position:absolute; inset:0; display:flex; background:#f6f4ec;}
.art-outline { width:212px; flex:none; background:linear-gradient(#eff1e6,#e6e8dc); border-right:1px solid #b9b7a4;
  display:flex; flex-direction:column;}
.outl-head { padding:8px 10px 6px; font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:#5c5c86;
  border-bottom:1px solid #cfceba; display:flex; justify-content:space-between; align-items:center;}
.outl-toggle-all { border:none; background:none; color:#33409a; cursor:pointer; font-size:10px; text-decoration:underline;}
.outl-tree { flex:1; overflow-y:auto; padding:8px 6px; }
.ol-sec { margin-bottom:2px; }
.ol-sec > .ol-row { display:flex; align-items:center; gap:5px; padding:3px 5px; cursor:pointer; border-radius:3px; }
.ol-sec > .ol-row:hover { background:#dde1f6; }
.ol-row.cur { background:#1f2f96; color:#fff !important; }
.ol-row.cur .twisty { border-color:#fff; }
.twisty { width:0; height:0; border:5px solid transparent; border-left:7px solid #66669e; flex:none; transition:transform .15s ease-out;}
.ol-sec.open > .ol-row .twisty { transform:rotate(90deg); }
.ol-kids { display:none; padding-left:16px; }
.ol-sec.open .ol-kids { display:block; }
.ol-kid { padding:2px 5px; font-size:11px; color:#3c3c72; cursor:pointer; border-radius:2px; list-style:none;}
.ol-kid:hover { background:#dde1f6; color:#11114a;}
.ol-kid::before { content:"§ "; color:#9999c8; }

.art-main { flex:1; min-width:0; overflow-y:auto; scroll-behavior:auto; background:#fffdf6; }
.art-head { padding:20px 30px 10px; border-bottom:1px solid #d9d5be; background:
   linear-gradient(#f2efe2, #fffdf6); }
.art-head h1 { font-family: Georgia, "Times New Roman", serif; font-size:27px; color:#181850; line-height:1.12;}
.art-deck { font-style:italic; color:#5b5b7e; margin-top:5px; font-size:13px; font-family:Georgia,serif;}
.art-kicker { display:inline-block; font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; color:#fff;
  padding:2px 8px; border-radius:2px; margin-bottom:8px; background:#1f2f96;}
.art-layout { padding:14px 30px 30px; display:grid; grid-template-columns:minmax(300px,1fr) 172px; gap:0 16px;}
.art-body { font-family: Georgia, "Times New Roman", serif; font-size:14.5px; line-height:1.62; color:#24241f; min-width:0;}
.art-body p { margin: 0 0 11px; }
.art-body p.lede::first-letter { initial-letter: 3; font-family:Georgia,serif; color:#181850; font-weight:bold; }
.art-sec-h { font-family:Verdana,Tahoma,sans-serif; font-size:12px; letter-spacing:.18em; text-transform:uppercase;
  color:#1d1d6e; margin:20px 0 8px; padding-bottom:3px; border-bottom:2px solid #ffd24a; }
.art-aside { display:flex; flex-direction:column; gap:12px; }
.factbox { background:#f4f2e4; border:1px solid #c9c5ac; box-shadow:2px 2px 0 rgba(60,60,110,.14); padding:9px 10px 7px; font-family:Verdana,sans-serif;}
.factbox h4 { font-size:10px; letter-spacing:.15em; text-transform:uppercase; color:#fff; background:#1f2f96;
  margin:-9px -10px 7px; padding:4px 10px;}
.factbox table { width:100%; border-collapse:collapse; font-size:10.5px;}
.factbox td { padding:3px 2px; vertical-align:top; border-bottom:1px dotted #cbcab2;}
.factbox td:first-child { color:#55557e; padding-right:6px; white-space:nowrap;}
figure.medfig { margin:14px 0; max-width:100%; background:#fff; border:1px solid #bab6a0; box-shadow:3px 3px 0 rgba(60,60,110,.16); padding:5px; cursor:zoom-in; position:relative;}
figure.medfig:hover { outline:2px solid #ffd24a; }
figure.medfig .medclip { display:block; overflow:hidden; background:#e8ecf4;}
figure.medfig .medclip svg, figure.medfig .medclip img { display:block; width:100%; height:auto;}
figure.medfig .medvidthumb { display:block; position:relative; }
figure.medfig .playbadge { position:absolute; right:8px; bottom:8px; width:30px; height:30px; border-radius:50%;
  background:rgba(20,20,80,.82); border:2px solid #fff; display:grid; place-items:center; color:#ffd24a; font-size:12px; pointer-events:none;}
figcaption { font-family:Verdana,sans-serif; font-size:10px; color:#55554e; padding:6px 3px 1px; line-height:1.45;}
figcaption i { color:#8b8b80; }
.seealso { margin-top:22px; background:#eef0fa; border:1px solid #c3c6e2; padding:10px 12px;}
.seealso h4 { font-size:10px; letter-spacing:.16em; color:#33337e; text-transform:uppercase; margin-bottom:7px;}
.sa-chips { display:flex; flex-wrap:wrap; gap:6px;}
.xref { color:#1231ae; text-decoration:underline; cursor:pointer; font-weight:bold; font-family: inherit; }
.xref:hover { background:#dbe6ff; }
.dfn-hot { border-bottom:1px dotted #7a7ad0; cursor:help; }
@media-print-msg { display:none; }

/* article toolbar strip above content */
.art-tools { display:flex; align-items:center; gap:6px; padding:4px 8px; background:#e3e5d8; border-bottom:1px solid #c6c4b2;}
.at-btn { font:inherit; font-size:11px; padding:2px 8px; cursor:pointer; background:#f2f2ea; border:1px solid #9494b4; border-radius:2px;}
.at-btn:hover { background:#ffd24a; border-color:#7a7a9a; }
.art-indexnav { margin-left:auto; font-size:10px; color:#55557e;}

/* ---------- CATEGORY / CONTENTS ---------- */
.cats-wrap { position:absolute; inset:0; display:flex; background:#eef0e4; }
.cats-col { overflow-y:auto; padding:10px 0; }
.cats-col:nth-child(1){ width:158px; background:#e2e5d4; border-right:1px solid #bcbaa6;}
.cats-col:nth-child(2){ width:186px; background:#eef0e4; border-right:1px solid #bcbaa6;}
.cats-col:nth-child(3){ flex:1; background:#fff; }
.cats-col h3 { font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:#55557e; padding:4px 12px 6px;}
.cats-item { display:block; width:calc(100% - 14px); margin:2px 7px; text-align:left; font:inherit; font-size:12px;
  padding:5px 9px; background:none; border:none; cursor:pointer; color:#1a1a5e; border-radius:3px; display:flex; align-items:center; gap:7px;}
.cats-item:hover { background:#dfe3f8; }
.cats-item.cur { background:#1f2f96; color:#fff; font-weight:bold;}
.cats-item .n { margin-left:auto; font-size:10px; opacity:.75;}
.cats-topics li { padding:3px 8px; margin:0 7px 2px; cursor:pointer; font-size:11.5px; border-radius:3px; list-style-position:inside;}
.cats-topics li::marker { color:#8888b8;}
.cats-topics li:hover, .cats-topics li.cur { background:#1f2f96; color:#fff;}
.cats-results { padding:14px 18px; }
.cats-results h3 { padding:0 0 2px; color:#181860; font-size:14px; border-bottom:2px solid #ffd24a;}
.res-art { display:flex; gap:10px; padding:10px 6px; border-bottom:1px dotted #ccc; cursor:pointer; align-items:flex-start;}
.res-art:hover { background:#f2f4ff; }
.res-art .raline { flex:1; min-width:0;}
.res-art b { color:#15217a; font-size:13px; }
.res-art .res-deck { font-size:11px; color:#555; margin-top:2px;}
.kindchip { flex:none; font-size:8.5px; letter-spacing:.1em; text-transform:uppercase; color:#4c4c92;
  border:1px solid #a2a2cc; padding:2px 6px; border-radius:8px; margin-top:2px; background:#f4f4fd;}

/* ---------- TIMELINE ---------- */
.tl-wrap { position:absolute; inset:0; display:flex; flex-direction:column; background:#151555;
  background-image: radial-gradient(900px 300px at 70% -10%, rgba(120,150,255,.25), transparent);}
.tl-head { padding:10px 16px 6px; color:#fff; display:flex; gap:12px; align-items:center;}
.tl-head h2 { color:#ffd24a; font-size:15px; letter-spacing:.05em;}
.tl-modes { margin-left:auto; display:flex; gap:4px;}
.tl-mode { font:inherit; font-size:11px; color:#dfe4ff; background:#22228c; border:1px solid #4d4dcc; padding:3px 10px; cursor:pointer; border-radius:2px;}
.tl-mode.on { background:#ffd24a; color:#20165e; border-color:#fff0b8; font-weight:bold;}
.tl-scroller { flex:1; overflow-x:auto; overflow-y:hidden; position:relative; }
.tl-track { position:relative; height:100%; display:flex; }
.tl-band { position:relative; flex:none; border-left:1px solid rgba(255,255,255,.16); padding-top:34px;}
.tl-year { position:absolute; top:8px; left:10px; color:#ffd24a; font-weight:bold; font-size:15px; text-shadow:0 2px 3px #000;}
.tl-event { position:absolute; width:188px; margin:8px 10px 0; background:rgba(255,255,255,.94); border-left:4px solid #ffb400; border-radius:2px;
  padding:7px 9px; cursor:pointer; box-shadow:0 3px 7px rgba(0,0,20,.5); max-width:190px; transition:transform .12s ease-out;}
.tl-event:hover { transform: translateY(-2px); outline:2px solid #ffd24a;}
.tl-event b { display:block; font-size:11.5px; color:#17175e;}
.tl-event span { font-size:10px; color:#444; line-height:1.4; display:block; margin-top:2px;}
.tl-foot { padding:6px 16px 10px; color:#9aa4e0; font-size:10px;}
.tl-baseline { position:absolute; left:0; right:0; top:56px; height:3px; background:linear-gradient(90deg,#ffd24a,#ff8a3c); opacity:.65; pointer-events:none;}

/* ---------- ATLAS ---------- */
.atlas-wrap { position:absolute; inset:0; display:flex; flex-direction:column; background:#dff0f5; }
.atlas-head { padding:10px 16px; background:linear-gradient(#163a6e,#0e2748); color:#fff; display:flex; align-items:center; gap:12px;}
.atlas-head h2 { color:#ffd24a; font-size:15px;}
.atlas-zoom { margin-left:auto; display:flex; gap:4px; align-items:center;}
.atlas-mapbox { flex:1; position:relative; overflow:hidden; background:linear-gradient(#bfe0ea 0%,#d8eefa 55%,#cfe9dd 100%); touch-action:none;}
.atlas-svgwrap { position:absolute; inset:0; display:grid; place-items:center; }
.atlas-svg { transition: transform .25s ease-out; transform-origin:center; will-change:transform;}
.hotspot { fill:#2f7d3f; fill-opacity:.0; stroke:#14501f; stroke-width:.6; stroke-opacity:0; cursor:pointer;
  transition: fill-opacity .16s ease-out;}
.hotspot.lit { fill:#ffd24a; fill-opacity:.68; stroke:#8a5a00;}
.landmass { fill:#cfe3b8; stroke:#9db183; stroke-width:.7;}
.gratline { stroke:#9fc3d4; stroke-width:.4; fill:none; }
.atlas-tip { position:absolute; z-index:5; pointer-events:none; background:rgba(14,39,72,.94); color:#fff;
  padding:5px 10px; border-radius:3px; font-size:11px; box-shadow:0 4px 10px rgba(0,10,30,.5);
  opacity:0; transform:translateY(4px); transition:opacity .13s ease-out, transform .13s ease-out; max-width:230px;}
.atlas-tip.show { opacity:1; transform:translateY(0);}
.atlas-tip b { color:#ffd24a; display:block;}
.atlas-tip.has-link span { color:#bfe6ff; font-size:10px;}
.atlas-foot { padding:7px 16px; background:#eef6f8; border-top:1px solid #b8ccd4; font-size:10.5px; color:#33567a;
  display:flex; gap:16px; align-items:center;}
.atlas-foot .dotk { display:inline-block; width:10px; height:10px; border-radius:50%; background:#ffd24a; border:1px solid #8a5a00; vertical-align:-1px; margin-right:4px;}

/* ---------- GALLERY (toybox scatter) ---------- */
.gal-wrap { position:absolute; inset:0; overflow:hidden;
  background:
    repeating-linear-gradient(45deg, #b98a54 0 14px, #b28350 14px 15px),
    #b28350;
  box-shadow: inset 0 0 60px rgba(60,30,0,.55);}
.gal-wrap::before { content:""; position:absolute; inset:0; background:radial-gradient(80% 60% at 50% 40%, rgba(255,235,180,.15), transparent 70%);}
.gal-head { position:absolute; top:0; left:0; right:0; z-index:6; display:flex; gap:10px; align-items:center; padding:9px 16px;
  background:rgba(26,22,10,.72); backdrop-filter:blur(2px); color:#fff;}
.gal-head h2 { color:#ffd24a; font-size:15px;}
.gal-tabs { display:flex; gap:4px; flex-wrap:wrap;}
.gal-tab { font:inherit; font-size:10.5px; color:#f4e9c8; background:#4a3c1c; border:1px solid #8a7436; padding:2px 9px; cursor:pointer; border-radius:10px;}
.gal-tab.on { background:#ffd24a; color:#40300a; font-weight:bold;}
.gal-meta { margin-left:auto; font-size:10px; color:#cdbfa0;}
.gal-field { position:absolute; inset:0; }
.gal-card { position:absolute; width:132px; padding:6px 6px 4px; background:#fffdf4; border:1px solid #cdc7b2;
  box-shadow:3px 4px 9px rgba(30,15,0,.45); cursor:grab; border-radius:1px; touch-action:none;}
.gal-card.dragging { cursor:grabbing; box-shadow:8px 12px 22px rgba(30,15,0,.5); z-index:40 !important;}
.gal-card .thumb { width:100%; height:86px; overflow:hidden; display:grid; place-items:center; background:#dfe6f2; pointer-events:none;}
.gal-card .thumb svg, .gal-card .thumb canvas { width:100%; height:100%; object-fit:cover; display:block;}
.gal-card figcaption { padding:4px 2px 1px; font-size:9px; color:#43402f; line-height:1.35; pointer-events:none;}
.gal-card .gtype { position:absolute; top:-7px; left:-7px; width:20px; height:20px; border-radius:50%;
  background:#1f2f96; color:#ffd24a; border:2px solid #fff; display:grid; place-items:center; font-size:9.5px; box-shadow:0 2px 5px rgba(0,0,0,.4);}
.gal-hint { position:absolute; bottom:10px; left:0; right:0; text-align:center; color:#f0e3bc; font-size:10.5px; letter-spacing:.05em; z-index:6; text-shadow:0 1px 2px #000;}
.gal-tidy { position:absolute; right:14px; bottom:26px; z-index:6;}

/* ---------- QUIZ / INTERACTIVITY (kid zone, candy palette allowed here) ---------- */
.quiz-wrap { position:absolute; inset:0; overflow-y:auto; background:
   radial-gradient(700px 340px at 18% -8%, #ffe9f4, transparent 60%),
   radial-gradient(760px 380px at 90% 108%, #e4f7ff, transparent 60%),
   #faf7ff;}
.quiz-home { padding:24px 30px 40px; }
.quiz-home h2, .quiz-run h2 { font-family:"Comic Sans MS","Comic Neue","Trebuchet MS",sans-serif; font-size:21px; color:#8733c9; }
.quiz-sub { color:#8473ad; font-family:"Comic Sans MS","Trebuchet MS",sans-serif; margin:4px 0 18px;}
.qz-cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:16px;}
.qz-pick { border:none; cursor:pointer; text-align:left; font-family:inherit; border-radius:16px; padding:16px 15px; color:#fff;
  background:var(--qzgrad,linear-gradient(#ff8ad4,#d34fb2)); box-shadow:0 5px 0 rgba(0,0,0,.18), 0 8px 18px rgba(90,40,140,.25);
  transition:transform .14s ease-out;}
.qz-pick:hover { transform:translateY(-3px) rotate(-.6deg); }
.qz-pick:active { transform:translateY(1px); }
.qz-pick .em { font-size:26px; display:block; margin-bottom:6px;}
.qz-pick b { font-size:14px; display:block;}
.qz-pick span { font-size:10.5px; opacity:.93;}
.quiz-run { padding:20px 30px 44px; max-width:720px;}
.qz-meter { height:16px; border-radius:9px; background:#eee4fa; overflow:hidden; box-shadow:inset 0 2px 3px rgba(0,0,60,.15); margin:10px 0 18px; border:2px solid #e0d2f4;}
.qz-meter i { display:block; height:100%; background:linear-gradient(90deg,#66d9ff,#5a7bff,#c95aff); border-radius:9px; transition:width .4s cubic-bezier(.22,1.4,.36,1);}
.qz-qnum { font-family:"Comic Sans MS","Trebuchet MS",sans-serif; color:#9a86cc; font-size:11.5px; letter-spacing:.06em;}
.qz-question { font-family:"Comic Sans MS","Trebuchet MS",sans-serif; font-size:18px; color:#482a7c; margin:6px 0 16px; min-height:52px;}
.qz-choices { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:10px;}
.qz-choice { font-family:inherit; font-size:13px; text-align:left; cursor:pointer; border:3px solid #e2d6f7; border-radius:13px;
  background:#fff; padding:11px 13px 11px 40px; position:relative; box-shadow:0 3px 0 #d9c8f2; color:#3a2a63;}
.qz-choice .kbd { position:absolute; left:11px; top:50%; transform:translateY(-50%); width:20px; height:20px; border-radius:6px;
  background:#efe4ff; color:#8733c9; display:grid; place-items:center; font-size:11px; font-weight:bold;}
.qz-choice:hover { border-color:#b98ade; }
.qz-choice.correct { background:linear-gradient(#d9ffe0,#aaf0bb); border-color:#3bb45c; box-shadow:0 3px 0 #2c9b4a;}
.qz-choice.wrong { background:linear-gradient(#ffe0e0,#ffb3b3); border-color:#d94343; box-shadow:0 3px 0 #bf3030; animation:wobble .5s ease;}
.qz-choice.dim { opacity:.5; }
@keyframes wobble { 20%{transform:rotate(-2.4deg)} 45%{transform:rotate(2deg)} 70%{transform:rotate(-1.2deg)} }
@keyframes boing { 0%{transform:scale(1)} 30%{transform:scale(1.06,0.92)} 55%{transform:scale(.96,1.05)} 75%{transform:scale(1.03,.97)} 100%{transform:scale(1)} }
.boing { animation: boing .55s cubic-bezier(.25,1.6,.35,1); }
@keyframes confpop { from{transform:translateY(0) scale(1); opacity:1} to{transform:translateY(-44px) scale(.5); opacity:0}}
.confetto { position:absolute; width:7px; height:10px; border-radius:2px; pointer-events:none; animation:confpop .8s ease-out forwards;}
.qz-why { background:#fff; border:2px dashed #cbaeee; border-radius:12px; padding:10px 14px; margin-top:14px;
  font-size:12.5px; color:#4b3775; line-height:1.5;}
.qz-nextrow { display:flex; justify-content:flex-end; margin-top:14px;}
.qz-scorebig { font-family:"Comic Sans MS","Trebuchet MS",sans-serif; font-size:40px; color:#8733c9;}
.grade-stamp { display:inline-block; margin:12px 0; padding:8px 22px; border:3px dashed #d34fb2; border-radius:14px;
  font-family:"Comic Sans MS","Trebuchet MS",sans-serif; font-size:19px; color:#d34fb2; transform:rotate(-3deg);
  animation: boing .6s cubic-bezier(.25,1.6,.35,1);}

/* ---------- MEDIA VIEWER WINDOWS ---------- */
.viewer-body { background:#2a2a2a; display:flex; flex-direction:column; }
.viewer-stage { flex:1; min-height:0; display:grid; place-items:center; overflow:hidden; position:relative;
  background:
    conic-gradient(#3c3c3c 25%, #303030 0 50%, #3c3c3c 0 75%, #303030 0) 0 0/28px 28px;}
.viewer-stage svg, .viewer-stage canvas, .viewer-stage img { max-width:96%; max-height:94%; box-shadow:0 6px 20px rgba(0,0,0,.65); }
.viewer-controls { flex:none; display:flex; align-items:center; gap:8px; padding:6px 9px; background:#c0c0c0;
  border-top:1px solid #808080; }
.vc-btn { width:26px; height:22px; display:grid; place-items:center; font:inherit; background:#c0c0c0; cursor:pointer;
  border-top:1px solid #fff; border-left:1px solid #fff; border-right:1px solid #4a4a4a; border-bottom:1px solid #4a4a4a; box-shadow:1px 1px 0 #000;}
.vc-btn:active { border-color:#4a4a4a #fff #fff #4a4a4a; box-shadow:none;}
.vc-seek { flex:1; appearance:none; height:16px; background:transparent; }
.vc-seek::-webkit-slider-runnable-track { height:4px; background:#9a9a9a; box-shadow:1px 1px 0 #fff; border:1px solid #808080;}
.vc-seek::-webkit-slider-thumb { appearance:none; width:11px; height:16px; margin-top:-7px; background:#c0c0c0;
  border-top:1px solid #fff; border-left:1px solid #fff; border-right:1px solid #4a4a4a; border-bottom:1px solid #4a4a4a; box-shadow:1px 1px 0 #000;}
.vc-time { font-size:10px; color:#222; min-width:74px; text-align:right; font-family:"Courier New",monospace;}
.viewer-caption { flex:none; background:#101010; color:#ddd; font-size:10px; padding:6px 10px 7px; line-height:1.45;}
.viewer-caption i { color:#999; }
.vu { display:flex; align-items:flex-end; gap:2px; height:16px; margin-left:4px;}
.vu i { width:3px; background:#2bb34b; height:20%;}
.noprint-note { position:absolute; top:8px; left:8px; z-index:9; }

/* print preview dialog progress */
.print-dialog { padding:18px 20px; background:#c0c0c0; min-width:320px;}
.print-dialog .pr-bar { height:16px; border:1px solid #808080; background:#fff; margin:12px 0; box-shadow:1px 1px 0 #fff inset;}
.print-dialog .pr-bar i { display:block; height:100%; width:0; background:repeating-linear-gradient(90deg,#00007a 0 9px,#2a2ab0 9px 12px);}