/* ============================== The public pages in the Quarterdeck look (Nov 13) ==============================
   Loaded after style.css on every page that uses PublicLayout: the landing page, login and register, captain select,
   the news, the battle replays, referrals, membership, about, privacy and terms. Public pages always paint in Brass, so
   everything here reads the theme tokens and the Materials from style.css (the oak chrome, the brass sheen, the canvas
   buttons, the card texture) and never sets a colour of its own beyond the hero scene. */

/* ---------- The oak top bar: the game's chrome bar, with the wordmark and a few links ---------- */
.site-bar {
  position: relative; z-index: 20;
  display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 14px;
  background: var(--m-chrome-bg); color: var(--chrome-ink);
  box-shadow: 0 2px 8px var(--shade-30), inset 0 -1px rgba(0, 0, 0, 0.4), inset 0 1px rgba(255, 255, 255, 0.06);
  border-bottom: 1px solid var(--chrome-line);
}
.site-bar-inner { display: flex; align-items: center; gap: 10px; width: 100%; max-width: 1180px; margin: 0 auto; min-width: 0; }
.site-brand { display: flex; align-items: center; flex-shrink: 0; line-height: 0; }
.site-brand img { height: 34px; width: auto; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6)); }
.site-links { display: flex; align-items: center; gap: 2px; margin-left: 6px; min-width: 0; }
.site-links a {
  padding: 6px 10px; font: 14.5px -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; color: var(--chrome-ink-2);
  text-decoration: none; white-space: nowrap; border-bottom: 3px solid transparent;
}
.site-links a:hover { color: var(--chrome-ink); }
.site-links a.on { color: var(--chrome-ink); box-shadow: inset 0 -3px 0 #b8892e; }
.site-ctas { display: flex; align-items: center; gap: 8px; margin-left: auto; flex-shrink: 0; }
.site-ctas form { margin: 0; }
.site-bar .btn { padding: 5px 14px; font-size: 13.5px; }
@media (max-width: 640px) {
  .site-links { display: none; }
  .site-bar { padding: 0 10px; }
  .site-brand img { height: 28px; }
}

/* ---------- Brass and canvas buttons on the public pages ---------- */
.hero-cta, .hero-cta:hover {
  background: var(--m-brass-bg); color: var(--m-brass-ink); border: 1px solid var(--m-brass-line);
  text-shadow: 0 1px 0 rgba(255, 240, 200, 0.45); box-shadow: var(--m-brass-shadow);
  font-family: 'Cinzel', serif; font-weight: 700; letter-spacing: 0.05em; font-size: 1.1rem; padding: 0.9rem 2.5rem;
  transition: transform 0.09s ease, box-shadow 0.12s ease, filter 0.12s ease;
}
.hero-cta:hover { filter: brightness(1.06); box-shadow: var(--m-brass-shadow), 0 3px 7px var(--shade-30); }
.hero-cta-small, .hero-cta-small:hover { padding: 0.5rem 1.2rem; font-size: 0.85rem; }
/* The quiet button beside the brass one: canvas with a bevel, as the game's secondary buttons */
.hero-login, .hero-login:hover {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0) 45%, rgba(0, 0, 0, 0.12)), linear-gradient(color-mix(in srgb, var(--surface) var(--m-btn-tint), transparent), color-mix(in srgb, var(--surface) var(--m-btn-tint), transparent)), var(--m-btn) center / 180px, var(--surface);
  color: var(--accent); border: 1px solid var(--line-2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 -1px 0 rgba(0, 0, 0, 0.25), 0 1px 1px rgba(0, 0, 0, 0.15);
  font-family: 'Cinzel', serif; font-size: 1rem; padding: 0.8rem 2rem; text-decoration: none;
  transition: transform 0.09s ease, box-shadow 0.12s ease, filter 0.12s ease;
}
.hero-login:hover { filter: brightness(1.04); color: var(--accent-hi); }

/* ---------- A panel with the brass frame: the modal frame from style.css, for cards on the public pages ---------- */
.site-frame {
  border: 4px solid transparent;
  background: linear-gradient(color-mix(in srgb, var(--surface) var(--m-card-tint), transparent), color-mix(in srgb, var(--surface) var(--m-card-tint), transparent)) padding-box, var(--m-card) 0 0 / 256px padding-box, linear-gradient(var(--surface), var(--surface)) padding-box, linear-gradient(180deg, rgba(255, 246, 214, 0.35), rgba(60, 30, 0, 0.25)) border-box, var(--t-brass) center / 200px border-box;
  box-shadow: var(--shadow), inset 0 0 0 1px rgba(60, 30, 0, 0.5);
  outline: 1px solid var(--line-2); outline-offset: -9px;
}
/* A plain panel: the card material with a hairline, for lists and rows */
.site-card { background: var(--m-card-bg); border: 1px solid var(--line-2); box-shadow: var(--shadow); }

/* ---------- Brass rules under the page and section headings ---------- */
.site-rule, .show-text h2, .landing-feed h2, .phone-play-text h2, .faction-showcase h2, .landing-member-card h2, .final-cta h2,
.news-page h1, .referral-hero h1, .premium-hero h1, .about-page h1, .legal-page h1, .captain-select-title, .battle-pitch h2 {
  position: relative; padding-bottom: 12px;
}
.site-rule::after, .show-text h2::after, .landing-feed h2::after, .phone-play-text h2::after, .faction-showcase h2::after, .landing-member-card h2::after, .final-cta h2::after,
.news-page h1::after, .referral-hero h1::after, .premium-hero h1::after, .about-page h1::after, .legal-page h1::after, .captain-select-title::after, .battle-pitch h2::after {
  content: ''; position: absolute; left: 0; bottom: 0; width: 110px; height: 3px;
  background: var(--t-brass) center / 240px 3px; box-shadow: inset 0 1px 0 rgba(255, 244, 210, 0.6), 0 1px 1px rgba(0, 0, 0, 0.35);
}
/* Centred headings centre their rule */
.landing-feed h2::after, .phone-play-text h2::after, .faction-showcase h2::after, .landing-member-card h2::after, .final-cta h2::after,
.referral-hero h1::after, .premium-hero h1::after, .captain-select-title::after, .battle-pitch h2::after, .site-rule.centre::after { left: 50%; transform: translateX(-50%); }
@media (max-width: 900px) { .show-text h2::after { left: 50%; transform: translateX(-50%); } }
.phone-play-text h2::after { left: 0; transform: none; }
@media (max-width: 900px) { .phone-play-text h2::after { left: 50%; transform: translateX(-50%); } }

/* ---------- The landing page ---------- */
.hero-logo { filter: drop-shadow(0 4px 20px rgba(184, 134, 11, 0.3)); }
.hero-trailer { border: 4px solid transparent; background: linear-gradient(#000, #000) padding-box, linear-gradient(180deg, rgba(255, 246, 214, 0.35), rgba(60, 30, 0, 0.25)) border-box, var(--t-brass) center / 200px border-box; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6), inset 0 0 0 1px rgba(60, 30, 0, 0.5); }
.landing-feed { border-top: 0; border-bottom: 0; background: var(--m-card-bg); box-shadow: inset 0 1px 0 var(--line), inset 0 -1px 0 var(--line); }
.landing-feed .battle-feed { background: var(--surface-2); border: 1px solid var(--line-2); }
.show { border-top: 1px solid var(--line); }
.show-clip { border: 4px solid transparent; background: linear-gradient(#111, #111) padding-box, linear-gradient(180deg, rgba(255, 246, 214, 0.35), rgba(60, 30, 0, 0.25)) border-box, var(--t-brass) center / 200px border-box; box-shadow: 0 12px 36px rgba(0, 0, 0, 0.35), inset 0 0 0 1px rgba(60, 30, 0, 0.5); }
.show-dark .show-clip { box-shadow: 0 12px 40px rgba(0, 0, 0, 0.7), inset 0 0 0 1px rgba(60, 30, 0, 0.5); }
.show-pip img { filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.2)); }
.show-pips-portraits .show-pip img { border: 2px solid var(--m-brass-line); box-shadow: 0 0 0 1px rgba(255, 244, 210, 0.5) inset; }
.phone-play-video { border-radius: 18px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35); }
.faction-card { padding: 1.5rem 1rem; }
.faction-card h3 { color: var(--heading); }
.landing-member-card { background: none; border: 0; }
.landing-member-link { border-bottom: 2px solid transparent; background: var(--t-brass) left bottom / 240px 2px repeat-x; padding-bottom: 3px; color: var(--accent); }
.landing-stats { background: linear-gradient(rgba(10, 15, 25, 0.78), rgba(10, 15, 25, 0.78)), url('/img/site/bg2.jpg') center / cover; box-shadow: inset 0 3px 0 rgba(184, 137, 46, 0.6), inset 0 -3px 0 rgba(184, 137, 46, 0.6); }
.landing-footer { border-top: 0; background: var(--t-brass) top / 240px 3px repeat-x; padding-top: 2.2rem; }
.landing-footer a { color: var(--ink-2); }
.landing-footer a:hover { color: var(--accent); }
.landing-footer .publisher-badge a { color: var(--accent) !important; }
/* The cookie line sits under the bar as a strip of its own, never pinned to the bottom edge */
.cookie-notice { position: static; display: none; justify-content: center; align-items: center; gap: 1rem; padding: 0.5rem 1rem; background: var(--navy-bar); color: var(--chrome-ink-2); font-size: 0.75rem; }
.cookie-notice.open { display: flex; }
.cookie-notice p { margin: 0; }
.cookie-notice a { color: var(--chrome-ink); }
.cookie-notice .btn { padding: 2px 10px; font-size: 0.75rem; }

/* ---------- The login window on the landing page: the Quarterdeck shell, narrow ---------- */
#login-modal .qm-body { padding-top: 10px; }
#login-modal .qm-body label { display: block; font: 700 11px 'Cinzel', serif; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); margin: 10px 0 5px; }
#login-modal .qm-input:focus { outline: 1px solid var(--accent); border-color: var(--accent); }
#login-modal .qm-forgot { display: block; margin-top: 10px; font-size: 12.5px; color: var(--ink-2); }
#login-modal .login-modal-logo { display: block; max-width: 190px; width: 60%; margin: 10px auto 0; }

/* ---------- Login, register, forgot and reset: one card on the page ---------- */
.auth-page { min-height: calc(100vh - 48px); min-height: calc(100dvh - 48px); padding: 2rem 1rem 3rem; }
.auth-logo { max-width: 320px; }
.auth-form { border: 4px solid transparent; outline: 1px solid var(--line-2); outline-offset: -9px; padding: 1.6rem 1.8rem 1.8rem;
  background: linear-gradient(color-mix(in srgb, var(--surface) var(--m-card-tint), transparent), color-mix(in srgb, var(--surface) var(--m-card-tint), transparent)) padding-box, var(--m-card) 0 0 / 256px padding-box, linear-gradient(var(--surface), var(--surface)) padding-box, linear-gradient(180deg, rgba(255, 246, 214, 0.35), rgba(60, 30, 0, 0.25)) border-box, var(--t-brass) center / 200px border-box;
  box-shadow: var(--shadow-lg), inset 0 0 0 1px rgba(60, 30, 0, 0.5); }
.auth-form label { font: 700 11px 'Cinzel', serif; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); margin-top: 0.7rem; }
.auth-form label span { font: 11.5px Georgia, serif; letter-spacing: 0; text-transform: none; color: var(--ink-2) !important; }
.auth-form input { padding: 8px 10px; border: 1px solid var(--line); background: var(--surface-2); color: var(--ink); font: 14px Georgia, serif; }
.auth-form .btn { margin-top: 1rem; font-family: 'Cinzel', serif; font-weight: 700; letter-spacing: 0.04em; }
.auth-form h2 { font: 400 28px 'Pirata One', cursive; color: var(--heading); margin: 0 0 0.4rem; }
.auth-form p { font-size: 0.9rem; }
.auth-form .error { border-left: 3px solid var(--danger); background: var(--danger-soft); color: var(--danger); margin-top: 0.4rem; }
.auth-form .guest-claim-notice { background: var(--ok-soft); border: 1px solid var(--ok); }

/* ---------- Captain select: the chosen captain and Set Sail in a strip that sticks to the top, never the bottom ---------- */
.captain-select-page { min-height: 0; padding: 1.5rem 1rem 3rem; }
.captain-select-page .auth-logo { max-width: 260px; margin-bottom: 0.8rem; }
.captain-select-title { color: var(--heading); margin-bottom: 1.6rem; }
.captain-deck {
  position: sticky; top: 0; z-index: 15; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 8px 14px;
  background: var(--m-chrome-bg); color: var(--chrome-ink); border-bottom: 1px solid var(--chrome-line);
  box-shadow: 0 2px 8px var(--shade-30), inset 0 -1px rgba(0, 0, 0, 0.4), inset 0 1px rgba(255, 255, 255, 0.06);
}
.captain-deck form { margin: 0; display: inline; }
.captain-deck-portrait { width: 36px; height: 36px; border-radius: 50%; border: 2px solid #b8892e; object-fit: cover; background: var(--chrome-2); }
.captain-deck-label { font: 700 13px 'Cinzel', serif; color: var(--chrome-ink); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.captain-deck .btn { padding: 6px 22px; font-family: 'Cinzel', serif; font-weight: 700; letter-spacing: 0.04em; }
.captain-deck .btn:disabled { opacity: 0.55; cursor: not-allowed; }
.captain-card { border: 1px solid var(--line-2); box-shadow: var(--shadow); transition: transform 0.15s, box-shadow 0.15s; }
.captain-card:hover { border-color: var(--line-2); box-shadow: var(--shadow), 0 4px 12px var(--shade-20); }
.captain-selected, .captain-selected:hover { border: 1px solid var(--m-brass-line); box-shadow: 0 0 0 3px #b8892e, 0 4px 12px var(--shade-20); }
.captain-portrait-frame { border: 3px solid var(--line-2); }
.captain-selected .captain-portrait-frame { border-color: #b8892e; }
.captain-name { color: var(--heading); }
.captain-locked-tag { background: var(--m-brass-bg); color: var(--m-brass-ink); border: 1px solid var(--m-brass-line); font-family: 'Cinzel', serif; font-size: 0.6rem; letter-spacing: 0.06em; }
@media (max-width: 520px) {
  .captain-deck { gap: 8px; padding: 6px 10px; }
  .captain-deck .btn { padding: 6px 14px; }
}

/* ---------- The news, about, legal, referrals and membership pages: the guide header is the oak bar now ---------- */
.news-page h1, .about-page h1, .legal-page h1, .referral-hero h1, .premium-hero h1 { color: var(--heading); }
.news-page h1 { margin-top: 1.8rem; }
.news-card.panel { border: 1px solid var(--line-2); box-shadow: var(--shadow); }
.news-card.panel:hover { border-color: var(--m-brass-line); box-shadow: var(--shadow), 0 4px 12px var(--shade-20); }
.news-type-news { background: var(--m-brass-bg); color: var(--m-brass-ink); }
.news-banner { border: 4px solid transparent; border-radius: 0; background: linear-gradient(#000, #000) padding-box, linear-gradient(180deg, rgba(255, 246, 214, 0.35), rgba(60, 30, 0, 0.25)) border-box, var(--t-brass) center / 200px border-box; box-shadow: inset 0 0 0 1px rgba(60, 30, 0, 0.5); }
.news-body h2 { padding-bottom: 4px; background: var(--t-brass) left bottom / 240px 2px repeat-x; border-bottom: 0; }
.news-back { display: inline-block; margin-top: 1.2rem; }
.about-page, .legal-page { line-height: 1.7; color: var(--ink); }
.legal-page { max-width: 680px; margin: 0 auto; padding: 1rem 1rem 3rem; }
.legal-page h2 { font-family: 'Cinzel', serif; font-size: 1.05rem; color: var(--heading); margin: 1.5rem 0 0.5rem; padding-bottom: 4px; background: var(--t-brass) left bottom / 240px 2px repeat-x; }
.about-page h2 { padding-bottom: 4px; background: var(--t-brass) left bottom / 240px 2px repeat-x; }
.referral-share-public, .referral-both-card.panel, .milestone-card-public, .premium-feature { border: 1px solid var(--line-2); box-shadow: var(--shadow); background: var(--m-card-bg); }
.referral-share-public { border-left: 3px solid var(--m-brass-line); }
.premium-feature-highlight { border: 4px solid transparent; outline: 1px solid var(--line-2); outline-offset: -9px;
  background: linear-gradient(color-mix(in srgb, var(--surface) var(--m-card-tint), transparent), color-mix(in srgb, var(--surface) var(--m-card-tint), transparent)) padding-box, var(--m-card) 0 0 / 256px padding-box, linear-gradient(var(--surface), var(--surface)) padding-box, linear-gradient(180deg, rgba(255, 246, 214, 0.35), rgba(60, 30, 0, 0.25)) border-box, var(--t-brass) center / 200px border-box; }
.referral-both-get h2, .referral-milestones-public h2, .premium-ships h2 { padding-bottom: 4px; background: var(--t-brass) center bottom / 240px 2px repeat-x; }
.referral-progress-bar { background: linear-gradient(color-mix(in srgb, var(--progress) 72%, transparent), color-mix(in srgb, var(--progress) 72%, transparent)), var(--m-track) 0 0 / 256px; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.55); border-radius: 3px; }
.referral-progress-fill { background: var(--m-brass-bg); border-radius: 2px; }
.referral-cta-section h2, .premium-cta-section h2 { color: var(--heading); }

/* ---------- The battle replay page: the oak bar over the scene, the report in a brass frame ---------- */
.battle-head { display: flex; align-items: center; gap: 1rem; max-width: 900px; margin: 0 auto; padding: 0.9rem 1rem 0; position: relative; z-index: 3; }
.battle-head .battle-title-wrap { flex: 1; min-width: 0; }
.battle-card { border: 4px solid transparent; border-radius: 0; outline: 1px solid var(--line-2); outline-offset: -9px;
  background: linear-gradient(color-mix(in srgb, var(--surface) var(--m-card-tint), transparent), color-mix(in srgb, var(--surface) var(--m-card-tint), transparent)) padding-box, var(--m-card) 0 0 / 256px padding-box, linear-gradient(var(--surface), var(--surface)) padding-box, linear-gradient(180deg, rgba(255, 246, 214, 0.35), rgba(60, 30, 0, 0.25)) border-box, var(--t-brass) center / 200px border-box;
  box-shadow: 0 8px 30px var(--shade-60), inset 0 0 0 1px rgba(60, 30, 0, 0.5); padding: 1.2rem 1.4rem; }
.battle-outcome-row { border-bottom: 0; padding-bottom: 6px; background: var(--t-brass) left bottom / 240px 2px repeat-x; }
.battle-portrait { border: 2px solid var(--m-brass-line); }
.battle-replay-btn { font-family: 'Cinzel', serif; }
.battle-share-row .btn { white-space: nowrap; }
.battle-page .error-panel { max-width: 560px; margin: 3rem auto; text-align: center; }
@media (max-width: 640px) { .battle-head { padding-top: 0.7rem; } }