/* The journal shares the game's navy/gold palette; keep reading surfaces quiet. */
#exploreLauncher { position: fixed; left: 50%; transform: translateX(-50%); top: max(.7em, env(safe-area-inset-top)); z-index: 4; border-radius: 2em; padding: .6em 1em; font-size: .8em; font-weight: 800; color: #fff; white-space: nowrap; }
#exploreDialog { box-sizing: border-box; width: min(960px, calc(100% - 2em)); height: min(850px, calc(100dvh - 2em)); max-height: calc(100dvh - 2em); padding: 0; border: 1px solid #9cacc2; border-radius: 1.2em; background: #f4f6f9; color: #16233a; box-shadow: 0 1em 5em #07182a80; overflow: hidden; font: 15px/1.65 var(--font); user-select: text; }
#exploreDialog[open] { display: flex; flex-direction: column; }
#exploreDialog::backdrop { background: #07182ab8; backdrop-filter: blur(5px); }
#exploreDialog * { box-sizing: border-box; }
#exploreDialog button, #exploreDialog input, #exploreDialog select { font: inherit; }
.ex-head { display: flex; justify-content: space-between; align-items: center; padding: 1.1em 1.5em; background: #10264c; color: white; flex: none; }
.ex-head small { font-size: .64em; letter-spacing: .15em; color: #ffdb82; }
.ex-head h1 { margin: 0; font-size: 1.45em; }
.ex-head button { width: 2.7em; height: 2.7em; background: #ffffff15; border-radius: 50%; }
.ex-tabs { display: flex; gap: .5em; padding: .7em 1.5em; border-bottom: 1px solid #d7dfeb; background: white; flex: none; }
.ex-tabs button { padding: .45em .85em; border-radius: 2em; font-weight: 700 !important; font-size: .82em !important; }
.ex-tabs button.on { background: #10264c; color: #ffda7e; }
#exploreBody { padding: 1.4em 1.5em 2em; overflow: auto; overscroll-behavior: contain; min-height: 0; }
#exploreStatus { margin: 0; padding: .6em 1.5em; background: #e2f3e7; font-size: .8em; flex: none; max-height: 7em; overflow: auto; }
#exploreStatus:empty { display: none; }
#exploreDialog h2 { line-height: 1.3; font-size: 1.65em; margin: .5em 0 1em; letter-spacing: -.035em; }
#exploreDialog h3 { font-size: 1.05em; margin: 1.35em 0 .65em; }
#exploreDialog p { margin: .65em 0; }
.ex-intro { padding: 1.4em; background: #e8eef6; border-radius: .9em; }
.ex-intro small, .ex-mission > small, .ex-about > small { font-size: .68em; font-weight: 800; letter-spacing: .09em; color: #596e8b; }
.ex-stats { display: flex; gap: 1em; flex-wrap: wrap; font-size: .8em; margin-top: 1em; }
.ex-intro progress { width: 100%; height: .5em; accent-color: #1e7296; }
#exploreDialog .ex-fine { color: #5b6b80; font-size: .76em; line-height: 1.6; }
.ex-tools { display: flex; gap: .8em; margin: 1.25em 0; }
.ex-tools label { display: flex; flex-direction: column; gap: .3em; flex: 1; font-size: .74em; font-weight: 700; }
.ex-tools input, .ex-tools select { width: 100%; min-width: 0; padding: .7em; border: 1px solid #b8c6d6; border-radius: .5em; background: white; color: #16233a; }
.ex-tools select { padding-right: 2.6em; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%2316233a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right .9em center / .75em; -webkit-appearance: none; appearance: none; text-overflow: ellipsis; cursor: pointer; }
.ex-tools select:hover { border-color: #237993; }
.ex-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .8em; }
.ex-lesson-grid { margin-top: 1em; }
.ex-place { display: flex; gap: .7em; text-align: left; border: 1px solid #d6dfeb; background: white; border-radius: .8em; padding: 1em; color: #16233a; }
.ex-place:hover, .ex-gift:hover, .ex-trail:hover { border-color: #237993; }
.ex-icon { font-size: 1.8em; line-height: 1.2; }
.ex-place-text { display: flex; flex-direction: column; gap: .35em; min-width: 0; flex: 1; }
.ex-place-text small { font-size: .63em; color: #63728a; }
.ex-place-text b { line-height: 1.4; }
.ex-place-text > span { font-size: .75em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ex-place-text em, .ex-gift em { font-size: .68em; font-style: normal; font-weight: 700; color: #206b79; }
.ex-article { max-width: 680px; margin: 0 auto; }
.ex-back { color: #285e80 !important; font-size: .8em !important; padding: 0 0 1em; }
.ex-kicker { font-size: .7em; color: #63728a; }
.ex-lead { font-size: 1em; color: #314c68; }
.ex-observe { background: #e8eef6; border-radius: .8em; padding: .1em 1em .7em; margin: 1em 0; }
.ex-observe ul, .ex-roles { padding-left: 1.2em; }
.ex-observe li, .ex-roles li { margin: .5em 0; }
.ex-primary { display: inline-block; padding: .65em 1em; border-radius: .55em; background: #10264c !important; color: #ffdf94 !important; font-weight: 700 !important; font-size: .82em !important; }
.ex-mission { background: white; border: 1px solid #d6dfeb; border-radius: .9em; padding: 1.1em; margin-top: 1.3em; }
.ex-mission h3 { margin-top: .3em !important; }
.ex-mission > p { font-size: .8em; }
.ex-mission fieldset { border: 0; padding: 0; margin: 1.2em 0 .6em; min-width: 0; }
.ex-mission legend { font-weight: 700; padding: 0 0 .6em; }
.ex-option { display: flex; align-items: baseline; gap: .5em; padding: .7em; margin: .4em 0; border: 1px solid #d1dce8; border-radius: .5em; cursor: pointer; font-size: .85em; }
.ex-option:has(input:checked) { background: #edf5fb; border-color: #287b9c; }
.ex-option input { accent-color: #246d8a; flex: none; }
.ex-feedback { color: #98431c; font-size: .8em; }
.ex-done { background: #edf7f0; border-radius: .5em; padding: .8em; margin: .8em 0; font-size: .8em; }
.ex-done p { color: #3b654d; }
.ex-locked { color: #65738a; font-size: .8em; }
.ex-earned { padding: 1em; background: #fff4d6; border-radius: .5em; }
.ex-earned p { font-size: .8em; }
.ex-sources { font-size: .72em; color: #63728a; margin-top: 1.4em; }
.ex-sources summary { cursor: pointer; }
.ex-sources a { display: block; color: #285e80; margin-top: .4em; overflow-wrap: anywhere; }
.ex-trails, .ex-gifts { display: grid; grid-template-columns: 1fr 1fr; gap: .8em; }
.ex-trail, .ex-gift { text-align: left; padding: 1em; border: 1px solid #d6dfeb; background: white; border-radius: .8em; display: flex; flex-direction: column; gap: .4em; color: #53617a; }
.ex-trail > span, .ex-gift > span { font-size: 1.8em; }
.ex-trail p, .ex-gift small { font-size: .75em; }
.ex-trail strong { font-size: .85em; }
#exploreDialog .earned { background: #f0f7f2; border-color: #8fb69a; color: #244d36; }
.ex-projects { display: flex; flex-wrap: wrap; gap: .5em; }
.ex-projects span { padding: .45em .8em; background: #e5edf6; color: #264a71; border-radius: .5em; font-size: .8em; font-weight: 700; }
.ex-contacts { display: flex; flex-wrap: wrap; gap: .5em; margin: 0 0 1.4em; }
.ex-contacts a { display: inline-block; padding: .65em .85em; border: 1px solid #b8c6d6; border-radius: .5em; background: #fff; color: #264a71; font-size: .85em; font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.ex-contacts a:hover { background: #e5edf6; }
.ex-contacts a:focus-visible { outline: 2px solid #287b9c; outline-offset: 2px; }
.ex-trail-note, .ex-empty { font-size: .85em; padding: 1em; background: #e8eef6; border-radius: .6em; }
@media (max-width: 600px) {
  #exploreLauncher { left: auto; right: .7em; transform: none; top: max(6.1em, calc(env(safe-area-inset-top) + 5.4em)); font-size: .68em; padding: .5em .7em; }
  #exploreDialog { width: calc(100% - .8em); height: calc(100dvh - .8em); max-height: calc(100dvh - .8em); border-radius: .9em; }
  .ex-head { padding: .8em 1em; }
  .ex-head h1 { font-size: 1.2em; }
  .ex-tabs { padding: .6em; gap: .1em; justify-content: space-between; }
  .ex-tabs button { padding: .4em .65em; font-size: .75em !important; }
  #exploreBody { padding: 1em; }
  #exploreDialog h2 { font-size: 1.4em; }
  .ex-grid { grid-template-columns: 1fr; }
  .ex-tools { flex-direction: column; }
  .ex-intro { padding: 1em; }
  .ex-trails, .ex-gifts { gap: .5em; }
  .ex-trail, .ex-gift { padding: .8em; }
  .ex-gift b, .ex-trail b { font-size: .82em; }
}

#exploreDialog .ex-tools input, #exploreDialog .ex-tools select { font-size: 16px; }