/* Discovery pages share the game's parchment palette and leave battle layout intact. */
.app-shell { display: block; }
.topbar { position: relative; top: auto; }
.skip-link { position: fixed; top: -80px; left: 16px; z-index: 100000; padding: 12px; color: var(--panel); background: var(--ink); }
.skip-link:focus { top: 10px; }
.topbar { display: flex; align-items: center; gap: 22px; padding: 12px 4px 18px; margin-bottom: 8px; }
.site-brand { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font-weight: 800; font-size: 20px; letter-spacing: -.5px; line-height: 1; }
.site-brand img { width: 35px; height: 35px; }
.site-brand small { display: block; font-size: 11px; letter-spacing: 1.8px; text-transform: uppercase; margin-top: 5px; }
.primary-navigation { display: flex; gap: 26px; margin-left: auto; }
.primary-navigation a, .account-link { color: var(--ink); text-decoration: none; font-size: 14px; font-weight: 650; }
.primary-navigation a:hover, .primary-navigation a[aria-current="page"] { color: var(--journey-green); text-decoration: underline; text-underline-offset: 6px; }
.account-link { padding: 9px 15px; border: 1px solid var(--line); border-radius: 7px; max-width: 190px; overflow: hidden; text-overflow: ellipsis; }
.view-menu { order: 4; }
.view-menu .tabs { top: calc(100% + 10px); right: 0; left: auto; padding: 10px; min-width: 220px; max-height: min(78vh, 700px); overflow-y: auto; }
.view-menu .tab { white-space: nowrap; border-color: transparent; }
.view-menu .tab[hidden], [hidden].site-notice { display: none; }
.site-notice { padding: 12px 18px; background: #fff0dd; border: 1px solid #d4ad78; border-radius: 8px; margin: 0 auto 16px; max-width: 1160px; overflow-wrap: anywhere; }
.site-notice.good { background: var(--journey-soft); border-color: #92ab8f; }
.button-link { display: inline-flex; align-items: center; justify-content: center; gap: 10px; background: var(--journey-green); border: 1px solid var(--journey-green); color: #fffdf4; padding: 11px 18px; border-radius: 7px; text-decoration: none; font-weight: 650; font-size: 14px; min-height: 44px; }
.button-link:hover { filter: brightness(1.12); }
.text-link { display: inline-block; margin-top: 24px; color: var(--ink); }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid #5888bb; outline-offset: 3px; }
.landing-hero { display: grid; grid-template-columns: 1.1fr 1fr; gap: 35px; align-items: center; background: #173b31; background-image: radial-gradient(ellipse at 100% 0%, #355b45 0, transparent 65%); color: #f7f1e3; border-radius: 18px; padding: clamp(28px, 5vw, 78px); min-height: 465px; max-width: 1320px; margin: 0 auto; overflow: hidden; }
.hero-copy .eyebrow { color: #c4d1bb; font-size: 11px; letter-spacing: 2px; }
.hero-copy h1 { font-family: Georgia, "Times New Roman", serif; font-size: clamp(38px, 4.5vw, 68px); line-height: 1.07; font-weight: 500; letter-spacing: -1.7px; margin: 20px 0; }
.hero-description { max-width: 475px; color: #e3e6d7; font-size: 17px; line-height: 1.65; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 24px 0 16px; }
.hero-primary { background: #edca75; border-color: #edca75; color: #173b31; }
.hero-secondary { color: #f7f1e3; background: transparent; border-color: #6f8975; }
.hero-note { font-size: 11px; color: #c4d1bb; line-height: 1.7; max-width: 410px; }
.hero-art { transform: rotate(-8deg); text-align: center; position: relative; }
.landing-board { width: 100%; max-width: 520px; filter: drop-shadow(0 20px 16px #091d1d66); }
.art-caption { display: block; font-size: 11px; color: #c4d1bb; transform: rotate(8deg); margin-top: 10px; letter-spacing: .6px; }
.landing-body { max-width: 1180px; padding: 0 22px 42px; margin: 0 auto; }
.landing-principles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 46px; padding: 50px 0; border-bottom: 1px solid var(--line); }
.principle-number { display: inline-block; font-size: 12px; font-weight: 750; color: var(--journey-green); border-bottom: 2px solid #b5bc96; padding-bottom: 6px; }
.landing-principles h2 { font-size: 19px; margin: 16px 0 10px; }
.landing-principles p, .path-card p { font-size: 14px; line-height: 1.65; color: var(--muted); }
.landing-paths { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; padding-top: 42px; }
.landing-paths > div { grid-column: 1 / -1; }
.landing-paths h2 { font-family: Georgia, serif; font-weight: 500; font-size: 29px; line-height: 1.2; margin: 12px 0; }
.landing-paths h2 br { display: none; }
.path-card { text-decoration: none; color: var(--ink); padding: 24px; border: 1px solid var(--line); background: var(--panel); border-radius: 12px; transition: transform 160ms, border-color 160ms; }
.path-card:hover { transform: translateY(-3px); border-color: #698376; }
.path-card > span { color: var(--journey-green); font-size: 27px; }
.path-card h3 { font-size: 19px; margin-bottom: 8px; }
.path-card strong { display: block; color: var(--journey-green); font-size: 13px; padding-top: 12px; }
.page-surface.journey-page { width: 100%; max-width: 1160px; padding: clamp(20px, 3.5vw, 50px); margin: 0 auto 30px; border-radius: 14px; box-sizing: border-box; }
.journey-page .page-heading { margin-bottom: 30px; }
.journey-page .page-heading h1 { font-family: Georgia, serif; font-size: clamp(30px, 3.5vw, 44px); font-weight: 500; line-height: 1.15; letter-spacing: -.8px; margin: 10px 0 14px; }
.journey-page .page-heading p { line-height: 1.6; max-width: 670px; color: var(--muted); }
.journey-page .eyebrow { color: var(--journey-green); }
.journey-page button { min-height: 42px; }
.journey-callout, .campaign-progress { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; background: var(--journey-soft); border: 1px solid #c2ceb6; border-radius: 10px; padding: 20px; margin: 20px 0; }
.journey-callout span, .campaign-progress span { font-size: 14px; color: var(--muted); }
.campaign-progress div { display: grid; gap: 6px; }
.campaign-progress progress { flex: 1; min-width: 120px; max-width: 250px; height: 9px; accent-color: var(--journey-green); }
.campaign-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.campaign-chapter { grid-column: 1 / -1; font-size: 21px; margin: 30px 0 5px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.level-card { display: flex; flex-direction: column; gap: 14px; padding: 22px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); min-width: 0; }
.level-topline, .room-card header, .section-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.level-number { font-family: Georgia, serif; font-size: 28px; color: #7a8562; }
.level-status { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; }
.level-card h3 { font-size: 18px; line-height: 1.35; margin: 0; }
.level-card p { color: var(--muted); font-size: 13px; line-height: 1.6; margin: 0; }
.level-card > p { min-height: 62px; }
.level-card details { font-size: 12px; color: var(--muted); margin-bottom: auto; }
.level-card summary { cursor: pointer; padding: 5px 0; }
.level-card details p { margin-top: 9px; }
.level-card button { text-align: left; background: var(--journey-green); border-color: var(--journey-green); }
.level-card button.secondary { color: var(--ink); background: transparent; border-color: var(--line); }
.level-completed { border-color: #8aab88; }
.level-completed .level-status { color: var(--good); }
.mode-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.mode-badges > span { display: inline-block; font-size: 11px; line-height: 1.4; border: 1px solid var(--line); border-radius: 5px; padding: 5px 7px; color: var(--muted); }
.mode-badges i { font-style: normal; }
.multiplayer-heading { display: flex; align-items: center; justify-content: space-between; gap: 25px; }
.multiplayer-heading > a { flex-shrink: 0; }
.rooms-section { margin: 32px 0 0; }
.rooms-section h2 { font-size: 21px; }
.count-pill { display: inline-block; background: var(--journey-soft); padding: 3px 9px; border-radius: 20px; font-size: 13px; }
.rooms-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.room-card { padding: 22px; border: 1px solid var(--line); border-radius: 10px; min-width: 0; }
.room-card header h3 { letter-spacing: 2px; margin: 0 0 15px; }
.lobby-teams { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 20px 0; }
.lobby-team { border: 1px solid var(--line); border-radius: 7px; border-top: 3px solid #d4b452; padding: 13px; min-width: 0; }
.lobby-team.team-blue { border-top-color: #65a0db; }
.lobby-team strong { display: block; font-size: 13px; margin-bottom: 6px; }
.lobby-team span { font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; color: var(--muted); }
.join-room-form, .join-code-form { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; }
.join-code-form { background: var(--paper); border-radius: 9px; padding: 20px; margin: 18px 0 25px; }
.join-room-form label, .join-code-form label, .signin-card label { display: grid; gap: 7px; font-size: 12px; font-weight: 600; }
.join-room-form label { flex: 1; min-width: 100px; }
.join-room-form input, .join-room-form select, .join-code-form input, .join-code-form select { width: 100%; min-height: 42px; max-width: 220px; }
.form-feedback { flex-basis: 100%; font-size: 13px; color: var(--danger); margin: 0; }
.form-feedback:empty { display: none; }
.empty-rooms { padding: 32px 20px; border: 1px dashed var(--line); border-radius: 10px; text-align: center; }
.empty-rooms > span { font-size: 32px; color: #859275; }
.empty-rooms h3 { font-size: 20px; margin: 14px 0; }
.empty-rooms p { color: var(--muted); font-size: 14px; }
.waiting-room .room-code { letter-spacing: 3px; color: var(--ink); }
.waiting-room .lobby-team { padding: 25px; }
.waiting-room .lobby-team span { font-size: 15px; }
.signin-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: start; }
.signin-card { display: grid; gap: 18px; border: 1px solid var(--line); border-radius: 12px; padding: 28px; }
.signin-card h2 { font-size: 24px; margin: 0; }
.signin-card p { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.6; }
.signin-card input { width: 100%; min-height: 43px; }
.signin-card button { background: var(--journey-green); border-color: var(--journey-green); }
.signin-card label small { font-weight: 400; color: var(--muted); }
.signin-card summary { font-size: 12px; line-height: 1.5; cursor: pointer; }
.new-game-dialog { position: fixed; width: min(1060px, calc(100% - 30px)); max-height: 90vh; border: 1px solid var(--line); border-radius: 14px; padding: 36px 16px 16px; background: var(--paper); color: var(--ink); overflow-y: auto; }
.new-game-dialog::backdrop { background: #11221bc2; backdrop-filter: blur(3px); }
.new-game-dialog .session-form { width: 100%; max-width: none; box-sizing: border-box; }
.new-game-dialog .dialog-close { top: 10px; right: 12px; }
.room-password-setting { min-width: 240px; margin-right: auto; }
.room-password-setting input { width: 100%; }
.game-journey-banner { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); padding: 12px 16px; font-size: 13px; margin-bottom: 14px; }
.game-journey-banner a { color: var(--ink); font-weight: 700; }
.game-journey-banner small { color: var(--muted); margin-left: auto; }
.team-label-yellow { text-decoration: underline; text-decoration-color: #cfa000; text-decoration-thickness: 3px; text-underline-offset: 4px; }
.team-label-blue { text-decoration: underline; text-decoration-color: #528bcb; text-decoration-thickness: 3px; text-underline-offset: 4px; }
html[data-theme="dark"] { --journey-green: #93bd9b; --journey-soft: #26372c; }
html[data-theme="dark"] .button-link, html[data-theme="dark"] .level-card > button, html[data-theme="dark"] .signin-card button { color: #14291e; }
html[data-theme="dark"] .hero-secondary { color: #f7f1e3; }
html[data-theme="dark"] .level-card > button.secondary { color: var(--ink); }
html[data-theme="dark"] .site-notice { background: #44392a; }
html[data-theme="dark"] .site-notice.good { background: var(--journey-soft); }
@media (min-width: 1500px) { .topbar { max-width: 1320px; margin-left: auto; margin-right: auto; } }
@media (max-width: 850px) { .landing-hero { gap: 12px; padding: 32px; } .hero-copy h1 { font-size: 43px; } .hero-description { font-size: 15px; } .campaign-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .landing-principles { gap: 22px; } .primary-navigation { gap: 16px; } .rooms-grid { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .topbar { gap: 12px; } .primary-navigation { display: none; } .account-link { margin-left: auto; max-width: 115px; } .site-brand { font-size: 17px; } .site-brand img { width: 30px; height: 30px; } .landing-hero { grid-template-columns: 1fr; padding: 30px 24px; border-radius: 12px; } .hero-art { max-width: 290px; margin: 0 auto; } .hero-copy h1 { font-size: 44px; } .hero-copy .eyebrow { font-size: 9px; } .landing-principles, .landing-paths, .signin-grid, .campaign-grid { grid-template-columns: 1fr; } .landing-principles { padding: 30px 0; gap: 24px; } .landing-principles article { padding-left: 42px; position: relative; } .principle-number { position: absolute; left: 0; top: 17px; } .landing-principles p { margin-bottom: 0; } .landing-paths { padding-top: 28px; } .landing-body { padding: 0 8px 25px; } .page-surface.journey-page { padding: 22px 16px; } .multiplayer-heading { display: block; } .multiplayer-heading .button-link { margin-top: 10px; } .campaign-progress { padding: 15px; } .level-card > p { min-height: auto; } .signin-card { padding: 20px; } .waiting-room .lobby-team { padding: 15px; } .join-code-form label { width: 100%; } .join-code-form input, .join-code-form select { max-width: none; } .room-password-setting { width: 100%; min-width: 0; } .game-journey-banner small { margin-left: 0; } }
@media (prefers-reduced-motion: reduce) { .path-card { transition: none; } }