/* An open storybook: the meadow owns the cover, brass and ink guide the hand. */
.journey-menu { padding: 28px; background: #151e2ce8; overflow-y: auto; align-items: center; }
.journey-home { position: relative; width: min(1060px, 100%); margin: auto; color: #f6edce; border: 1px solid #bba57260; border-radius: 6px; box-shadow: 0 28px 100px #0008; overflow: hidden; }
.journey-cover { position: relative; min-height: 450px; background: #526952 url('../art/img/ow_meadow_day.webp') center 54% / cover; isolation: isolate; }
.journey-cover-shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg,#142c32f2 0%,#172f34cf 30%,#243c3938 68%,#263c3908),linear-gradient(0deg,#132d35b0,transparent 38%); }
.journey-intro { position: relative; padding: 42px 52px 44px; max-width: 570px; }
.journey-mark { color: #e2c58a; font-size: 32px; display: block; line-height: 1; margin-bottom: 6px; }
.journey-intro h1 { color: #fff3cc; font: 500 clamp(58px,7vw,94px)/1.05 Georgia,serif; letter-spacing: -.05em; text-shadow: 0 3px 18px #142c3270; margin: 0 0 14px; }
.journey-subtitle { font: italic 21px/1.4 Georgia,serif; color: #eddfb9; margin: 0 0 26px; }
.journey-premise { font: 16px/1.75 Georgia,serif; color: #e4e5d4; margin: 0 0 24px; }
.journey-begin { display: flex; align-items: center; justify-content: space-between; gap: 40px; min-width: 265px; min-height: 54px; padding: 13px 20px; border: 1px solid #f6dba0; border-radius: 3px; color: #29362f; background: #ecd3a0; font: 600 18px Georgia,serif; box-shadow: 0 4px 16px #112c3033; }
.journey-begin:hover { background: #ffe7b3; transform: translateY(-1px); }
.journey-begin i { font: 22px Georgia,serif; }
.journey-location { display: block; margin-top: 12px; font: 12px/1.4 system-ui,sans-serif; color: #dbddc6; }
.journey-cover-note { position: absolute; bottom: 25px; right: 28px; font: italic 15px Georgia,serif; color: #fff0cf; text-shadow: 0 1px 4px #19372e; }
/* floats over the cover's corner (the cover's text keeps to the left) */
.journey-home .acctbtn { position: absolute; z-index: 5; right: 18px; top: 18px; max-width: 46%; margin: 0; background: #183238c9; border-color: #e6d9b260; color: #f4e7c8; }
.journey-lobby { padding: 23px 34px 14px; background: #f0e9d8; color: #3b4946; }
.journey-lobby-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; font: 20px Georgia,serif; }
/* the old campaign's link and its line of explanation: they ran together as one word */
.journey-legacy { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 10px; row-gap: 2px; }
.journey-lobby .linkbtn { color: #58635b; font: 13px system-ui,sans-serif; }
.journey-duels { border-top: 1px solid #a3a58f80; border-bottom: 1px solid #a3a58f80; padding: 12px 0; }
.journey-duels summary { cursor: pointer; font: 16px Georgia,serif; padding: 4px; }
.journey-duels summary span { float: right; font: 12px system-ui,sans-serif; color: #6c7468; padding-top: 3px; }
.friendly-deck-picker { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.friendly-deck-picker .netdeck { flex: 1; min-width: 0; color: #33453f; background: #f4f0df; border-color: #959d82; text-align: left; }
.friendly-deck-picker .netdeck option { color: #33453f; background: #f4f0df; }
.friendly-deck-picker .netdeck:focus-visible { outline: 2px solid #536352; outline-offset: 2px; }
.journey-duels .optcheck:has(input:disabled) { opacity: 0.5; }
.journey-duels .courtpick { margin-top: 16px; }
.journey-lobby .modegrid { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 0; margin-top: 12px; }
.journey-lobby .modetile { background: transparent; color: #33453f; border: 0; border-radius: 0; min-height: 62px; padding: 8px 10px; gap: 10px; box-shadow: none; }
.journey-lobby .modetile:hover { background: #d9dfce; }
.journey-lobby .modetile .ti { font-size: 24px; color: #7b8665; }
.journey-lobby .modetile .tl { font-size: 13px; color: #33453f; }
.journey-lobby .modetile .ts { font-size: 11px; color: #6b7467; }
.journey-lobby .optbar { background: #dddcca; border-color: #959d8280; }
.journey-lobby .optlabel,.journey-lobby .record { color: #536352; }
.journey-lobby .homefoot { margin-top: 9px; justify-content: center; }
.journey-home button:focus-visible,.journey-home summary:focus-visible,.charter-book button:focus-visible { outline: 3px solid #e2b55b; outline-offset: 4px; }

/* Field notes stay legible over the world, with one observation per spread. */
.charter-overlay { z-index: 4100; background: #172b3570; backdrop-filter: blur(5px); padding: 22px; }
.charter-book { position: relative; width: min(660px,100%); max-height: calc(100dvh - 44px); overflow-y: auto; padding: 32px 42px; border-radius: 5px 14px 14px 5px; border: 1px solid #c4b994; border-left: 7px solid #8d987b; background: #f8f1de; color: #33463f; box-shadow: 0 20px 90px #0b242775; text-align: left; }
.charter-caption,.charter-journal>small { color: #6e826e; font: 10px/1.3 system-ui,sans-serif; letter-spacing: .14em; }
.charter-book h2 { color: #354a42; font: 29px/1.2 Georgia,serif; margin: 10px 24px 18px 0; }
.charter-book p { font: 16px/1.65 Georgia,serif; color: #526053; margin: 13px 0; }
.charter-close { position: absolute; top: 12px; right: 13px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: transparent; color: #687660; font: 25px Georgia,serif; }
.charter-close:hover { background: #dfe4d2; }
.charter-observation { display: flex; align-items: center; gap: 25px; padding: 12px 0; border-block: 1px solid #c8c8b480; }
.charter-book svg { display: block; width: 180px; max-width: 100%; margin: 8px auto; flex-shrink: 0; }
.chart-orbit { fill: none; stroke: #8c9c882f; stroke-dasharray: 2 4; }
.chart-line { fill: none; stroke: #879e87; stroke-width: 1.8; stroke-dasharray: 4 3; }
.chart-point { fill: #d7a751; stroke: #79613c; stroke-width: 1; }
.charter-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 22px; }
.charter-primary,.charter-secondary { min-height: 44px; padding: 11px 20px; border-radius: 3px; font: 15px Georgia,serif; cursor: pointer; }
.charter-primary { border: 1px solid #3f6559; color: #fff1d3; background: #3f6559; }
.charter-primary:hover { background: #2c5147; }
.charter-secondary { border: 1px solid #a7b09a; background: transparent; color: #526650; }
.charter-reference { width: 150px; margin: 0 auto 14px; text-align: center; color: #6e795f; font: italic 13px Georgia,serif; }
.charter-reference svg { width: 120px; }
.charter-charts { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
.charter-chart { padding: 9px; background: #e9eddd; border: 1px solid #b6c1a5; border-radius: 3px; color: #486048; font: 13px Georgia,serif; }
.charter-chart:hover { background: #d7e0c9; border-color: #667d57; }
.charter-book .charter-feedback { min-height: 48px; font: 13px/1.5 system-ui,sans-serif; color: #6b705e; }
.charter-gifts { display: grid; gap: 13px; margin-top: 20px; }
.charter-gift { display: flex; gap: 18px; align-items: center; padding: 12px; background: #e9eddf; border: 1px solid #bbc7aa; border-radius: 5px; color: #344c3b; text-align: left; }
.charter-gift:hover { background: #dce7cf; border-color: #67865a; }
.charter-gift img { width: 88px; height: 88px; object-fit: cover; border-radius: 3px; }
.charter-gift b { display: block; font: 19px Georgia,serif; margin-bottom: 6px; }
.charter-gift small { display: block; font: 13px/1.45 system-ui,sans-serif; }
.charter-gift em { display: block; margin-top: 8px; color: #6c7655; font: 11px system-ui,sans-serif; }
.charter-journal { padding: 18px; margin: 18px 0; background: #dfe8d224; border: 1px solid #a7b69270; border-radius: 5px; text-align: left; }
.charter-journal h3 { font: 21px Georgia,serif; margin: 8px 0; }
.charter-journal p { font-size: 14px; line-height: 1.6; }
.charter-journal ol { padding-left: 23px; font-size: 13px; line-height: 1.9; }
.charter-journal li.done { color: #91ac7b; }
.charter-journal li.done::marker { content: '✓  '; }
.charter-keepsake { font-style: italic; }
.ow-camera-tools { position: absolute; z-index: 55; right: 18px; bottom: 50px; display: flex; gap: 6px; }
.ow-camera-tools button { min-height: 38px; padding: 8px 13px; background: #223c42d9; border: 1px solid #ded3ae65; border-radius: 20px; color: #eee7cc; font: 12px system-ui,sans-serif; }
.ow-camera-tools button:hover { background: #3e5c5c; }
.ow-camera-tools kbd { color: #d7c38a; margin-right: 5px; font: 11px system-ui,sans-serif; }
.w3-plate:hover:not(:disabled),.w3-plate:active { transform: translate(-50%, -100%); }
.w3-plate { visibility: hidden; border: 0; transition: opacity 240ms ease, box-shadow 160ms ease, visibility 0s 240ms; }
.w3-plate.on,.w3-plate.spot { visibility: visible; transition: opacity 240ms ease, box-shadow 160ms ease, visibility 0s 0s; }
.w3-plate-echo.on { pointer-events: auto; cursor: pointer; background: #334b49ed; color: #fff0c6; }
.w3-plate:focus-visible { outline: 3px solid #f2d38c; outline-offset: 4px; }
.ow-wild-search { position: absolute; z-index: 56; bottom: 94px; right: 18px; padding: 12px 18px; min-height: 44px; border: 1px solid #dbd9a9; border-radius: 4px; background: #314e40ee; color: #f8edcb; font: 14px Georgia,serif; }
.ow-echo.charter-released { box-shadow: 0 -28px 18px #c1f3d799; }
.ow-echo.charter-released::before { content: ''; position: absolute; height: 65px; width: 2px; bottom: 12px; left: 50%; background: linear-gradient(transparent,#d5f7cd); transform: rotate(18deg); }
.ow-3d .ow-dialogue { border-radius: 5px 13px 13px 5px; border-left: 5px solid #b9ac7f; box-shadow: 0 16px 60px #17283150; }
.ow-3d .ow-dlg-name { letter-spacing: .04em; }
.ow-echo.charter-beacon::after { content: 'A light in the reeds'; position: absolute; left: 50%; top: 38px; transform: translateX(-50%); white-space: nowrap; font: 16px Georgia,serif; color: #fff1b5; text-shadow: 0 1px 5px #20362c; }
@media(max-width:700px) {
  .journey-menu { padding: 0; align-items: start; }
  .journey-home { border: 0; border-radius: 0; min-height: 100dvh; }
  .journey-cover { min-height: 440px; background-position: 59% center; }
  /* the painting runs up under a phone's status bar; what's on it keeps clear */
  .journey-intro { padding: calc(54px + var(--sat)) 26px 30px; }
  .journey-intro h1 { font-size: 70px; }
  .journey-subtitle { font-size: 18px; max-width: 260px; }
  .journey-premise { font-size: 14px; }
  .journey-cover-note { display: none; }
  .journey-lobby { padding: 20px 20px 15px; }
  .journey-lobby .modegrid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .journey-duels summary span { display: block; float: none; margin-left: 16px; margin-top: 5px; }
  .journey-home .acctbtn { top: calc(12px + var(--sat)); right: calc(12px + var(--sar)); }
  .charter-overlay { padding: 12px; }
  .charter-book { padding: 26px 20px; max-height: calc(100dvh - 24px); }
  .charter-book h2 { font-size: 25px; }
  .charter-book p { font-size: 15px; }
  .charter-observation { gap: 12px; }
  .charter-observation svg { width: 115px; }
  .charter-charts { gap: 6px; }
  .charter-chart { padding: 5px; font-size: 12px; min-height: 110px; }
  .charter-gift { gap: 12px; }
  .charter-gift img { width: 64px; height: 76px; }
  .charter-gift b { font-size: 17px; }
  .ow-camera-tools { right: 10px; bottom: 62px; }
}
@media(prefers-reduced-motion:reduce) {
  .journey-begin:hover { transform: none; }
  .charter-book *, .journey-home * { scroll-behavior: auto; transition: none; animation: none; }
}

.charter-bearing { text-align: center; color: #dabd7c; }
.charter-bearing svg { display: block; width: 180px; height: 180px; margin: 0 auto; }