/*
 * Crimson Mandate — "Friendly Frontier" front-door stylesheet (WP-N4).
 * Shared by the landing page, login/register/profile, and every public marketing / SEO page.
 * Same tokens as the /m mobile shell (src/mobile/styles.css) and GameUITheme (Daybreak palette):
 * Fredoka headings, Nunito body, 14 px cards, 12 px / pill buttons, soft drop shadows, no neon glows.
 * Loaded after each page's own <style>, so these component rules win at equal specificity.
 */
:root {
  --fr-bg-deep: #1b2444;
  --fr-bg-dark: #202a4d;
  --fr-bg-panel: #27335c;
  --fr-bg-lit: #2f3d6b;
  --fr-bg-elevated: #37477c;
  --fr-bg-card: #2c3a66;
  --fr-nav: #2a3560;
  --fr-nav-hover: #364480;
  --fr-border-dim: #3f5390;
  --fr-border-med: #5470b5;
  --fr-border-bright: #7592d6;
  --fr-text: #ffffff;
  --fr-text-light: #e6eeff;
  --fr-text-muted: #a9b8dc;
  --fr-sky: #7fd6ff;
  --fr-mint: #7ef5c3;
  --fr-gold: #ffd166;
  --fr-coral: #ff7b7b;
  --fr-orange: #ffb86b;
  --fr-lavender: #c9b6ff;
  --fr-radius: 14px;
  --fr-radius-btn: 12px;
  --fr-shadow: 0 6px 24px rgba(10, 14, 40, 0.35);
  --fr-card-bg: linear-gradient(165deg, rgba(47, 61, 107, 0.94) 0%, rgba(39, 51, 92, 0.94) 70%);
  --fr-heading: 'Fredoka', 'Nunito', 'Noto Sans JP', 'Noto Sans KR', 'Noto Sans SC', system-ui, sans-serif;
  --fr-body: 'Nunito', 'Noto Sans JP', 'Noto Sans KR', 'Noto Sans SC', system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* Legacy page tokens remapped so un-migrated rules inherit the new palette. */
  --neon-cyan: #7fd6ff;
  --neon-magenta: #c9b6ff;
  --neon-yellow: #ffd166;
  --console-green: #7ef5c3;
  --warning-orange: #ffb86b;
  --critical-red: #ff7b7b;
  --grid-blue: #5fb8f0;
  --deep-space: #202a4d;
  --dark-void: #1b2444;
  --panel-dark: #27335c;
  --panel-medium: #2f3d6b;
  --panel-border: #3f5390;
  --text-dim: #a9b8dc;
  color-scheme: dark;
}
:lang(ja) { --fr-body: 'Nunito', 'Noto Sans JP', system-ui, sans-serif; --fr-heading: 'Fredoka', 'Noto Sans JP', system-ui, sans-serif; }
:lang(ko) { --fr-body: 'Nunito', 'Noto Sans KR', system-ui, sans-serif; --fr-heading: 'Fredoka', 'Noto Sans KR', system-ui, sans-serif; }
:lang(zh-CN) { --fr-body: 'Nunito', 'Noto Sans SC', system-ui, sans-serif; --fr-heading: 'Fredoka', 'Noto Sans SC', system-ui, sans-serif; }

/* ---------- Page canvas: bold navy/teal starfield with a readability scrim ---------- */
html { background: var(--fr-bg-deep); }
body {
  font-family: var(--fr-body);
  font-weight: 500;
  color: var(--fr-text-light);
  letter-spacing: 0;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  background:
    linear-gradient(180deg, rgba(20, 28, 58, 0.78) 0%, rgba(20, 28, 58, 0.86) 50%, rgba(20, 28, 58, 0.92) 100%),
    url('/assets/bg-starfield-4k.png') center top / cover fixed no-repeat,
    var(--fr-bg-deep);
}
.starfield {
  background:
    linear-gradient(180deg, rgba(20, 28, 58, 0.74) 0%, rgba(20, 28, 58, 0.84) 50%, rgba(20, 28, 58, 0.9) 100%),
    url('/assets/bg-starfield-4k.png') var(--fr-bg-deep) center center / cover no-repeat;
}
/* Pages with their own fixed .starfield layer paint the art there (the landings opt into the bold, un-scrimmed art). */
body:has(> .starfield) { background: transparent; }
.scanline, .scanlines, .corner-brackets { display: none !important; }

h1, h2, h3, h4, h5, h6 { font-family: var(--fr-heading); letter-spacing: 0; text-transform: none; text-shadow: 0 2px 10px rgba(10, 14, 40, 0.45); }
h1 { font-weight: 700; }
h2, h3 { font-weight: 600; }
p, li, td, th, dd, dt, label, small, blockquote { letter-spacing: 0; }
p, li { text-shadow: 0 1px 3px rgba(10, 14, 40, 0.55); }
a { color: var(--fr-sky); }
code, pre, kbd { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
::selection { background: rgba(127, 214, 255, 0.35); color: #fff; }

/* ---------- Buttons: gradient pills like /m ---------- */
.btn-primary, .btn-submit, .cta-btn, .nav-cta, a.cta, .btn-buy, .buy-ship-btn, .table-play-btn, .btn.btn-primary,
#not-logged-in a, #error-state button {
  font-family: var(--fr-heading) !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  text-shadow: none !important;
  color: #0f1a3a !important;
  background: linear-gradient(180deg, #8fdcff 0%, #5fb8f0 100%) !important;
  border: 1px solid transparent !important;
  border-radius: 999px !important;
  box-shadow: 0 6px 18px rgba(127, 214, 255, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
  clip-path: none !important;
  text-decoration: none !important;
  cursor: pointer;
  transition: transform 120ms ease, filter 120ms ease, box-shadow 120ms ease, opacity 120ms ease !important;
}
.btn-secondary, .btn-wallet, .btn, .table-buy-btn, .detail-back-btn, .error-link, .back-link, .btn-free {
  font-family: var(--fr-heading) !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  text-shadow: none !important;
  color: var(--fr-text) !important;
  background: var(--fr-nav) !important;
  border: 1px solid var(--fr-border-med) !important;
  border-radius: 999px !important;
  box-shadow: 0 4px 14px rgba(10, 14, 40, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
  clip-path: none !important;
  text-decoration: none !important;
  cursor: pointer;
  transition: transform 120ms ease, filter 120ms ease, background 120ms ease, opacity 120ms ease !important;
}
.btn.btn-primary { color: #0f1a3a !important; background: linear-gradient(180deg, #8fdcff 0%, #5fb8f0 100%) !important; border-color: transparent !important; }
.btn-buy, .buy-ship-btn.btn-buy { background: linear-gradient(180deg, #ffe08a 0%, #f0b73f 100%) !important; color: #2a1f05 !important; box-shadow: 0 6px 18px rgba(255, 209, 102, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important; }
.btn-free, .buy-ship-btn.btn-free { background: linear-gradient(180deg, #9af7d2 0%, #5fd9a6 100%) !important; color: #0f1a3a !important; border-color: transparent !important; }
#not-logged-in a:hover, #error-state button:hover, .btn-primary:hover, .btn-submit:hover, .cta-btn:hover, .nav-cta:hover, a.cta:hover, .btn-buy:hover, .buy-ship-btn:hover, .table-play-btn:hover,
.btn-secondary:hover, .btn-wallet:hover, .btn:hover, .table-buy-btn:hover, .detail-back-btn:hover, .error-link:hover, .back-link:hover {
  transform: translateY(-1px) !important;
  filter: brightness(1.08);
}
.btn-secondary:hover, .btn-wallet:hover, .btn:not(.btn-primary):hover, .table-buy-btn:hover, .detail-back-btn:hover, .error-link:hover, .back-link:hover {
  background: var(--fr-nav-hover) !important;
  color: var(--fr-text) !important;
}
.btn-primary:active, .btn-submit:active, .cta-btn:active, .nav-cta:active, a.cta:active, .btn-secondary:active, .btn-wallet:active, .btn:active, .btn-buy:active { transform: scale(0.97) !important; }
.btn-primary:disabled, .btn-submit:disabled, .btn-secondary:disabled, .btn-wallet:disabled, .btn:disabled, .btn-buy:disabled { opacity: 0.45 !important; cursor: default; transform: none !important; }
.btn-primary:focus-visible, .btn-submit:focus-visible, .btn-secondary:focus-visible, .btn-wallet:focus-visible, .btn:focus-visible, .cta-btn:focus-visible, a.cta:focus-visible { outline: 3px solid rgba(127, 214, 255, 0.6); outline-offset: 2px; }

/* ---------- Cards / panels: 14 px radius, soft shadow, subtle top highlight ---------- */
.feature-card, .pvp-countdown-card, .form-panel, .component-card, .info-panel, .ship-card, .stat-box, .detail-stat-box,
.phase-card, .info-card, .info-box, .stat-card, .step-card, .alliance-tier-card, .buy-ship-card, .combat-card, .cta-card,
.economy-card, .solar-value-card, .station-card, .zone-card, .unique-card, .feature, .step, .mineral-card, .highlight-box,
.guest-box, .post-box, .share-panel, .class-card, .formula-card, .share-card, .auth-card, .code-card, .summary-card,
.panel, .faq-item, .error-container, .policy-section, .content-card {
  border-radius: var(--fr-radius) !important;
  border: 1px solid var(--fr-border-dim);
  box-shadow: var(--fr-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  clip-path: none !important;
}
.feature-card, .component-card, .info-panel, .ship-card, .phase-card, .info-card, .info-box, .stat-card, .step-card,
.alliance-tier-card, .buy-ship-card, .combat-card, .economy-card, .station-card, .zone-card, .unique-card, .feature, .step,
.mineral-card, .guest-box, .post-box, .share-panel, .class-card, .formula-card, .share-card, .auth-card, .code-card,
.summary-card, .form-panel, .content-card {
  background: var(--fr-card-bg);
}
.feature-card::before, .feature-card::after { display: none; }
.feature-card:hover, .ship-card:hover, .zone-card:hover, .unique-card:hover, .class-card:hover, .phase-card:hover, .stat-card:hover {
  border-color: var(--fr-border-bright);
  box-shadow: 0 10px 28px rgba(10, 14, 40, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transform: translateY(-2px);
}
.highlight-box { background: rgba(127, 214, 255, 0.08); border-left: 4px solid var(--fr-sky); }

/* Tags / chips */
.tag, .phase-tag, .section-tag, .price-tag, .free-tag, .hero-badge, .chip, .code-pill {
  border-radius: 999px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  font-weight: 700;
  font-family: var(--fr-body);
}

/* Form fields: rounded, high-contrast, 48 px */
input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="search"], input[type="url"], textarea, select {
  font-family: var(--fr-body) !important;
  font-size: 16px;
  color: var(--fr-text) !important;
  background: var(--fr-bg-dark) !important;
  border: 1px solid var(--fr-border-med) !important;
  border-radius: var(--fr-radius-btn) !important;
  letter-spacing: 0 !important;
  box-shadow: none !important;
}
input::placeholder, textarea::placeholder { color: #8fa0c8; opacity: 1; }
input:focus, textarea:focus, select:focus { outline: 2px solid var(--fr-sky) !important; outline-offset: 0; border-color: transparent !important; }

/* Tables */
table { border-collapse: separate; border-spacing: 0; }
th { font-family: var(--fr-heading); letter-spacing: 0 !important; text-transform: none !important; }

/* Language button chips used on legacy page headers */
.lang-btn { border-radius: 999px !important; font-family: var(--fr-body) !important; font-weight: 700 !important; }

/* Footer readability */
footer { background: rgba(20, 28, 58, 0.92) !important; border-top: 1px solid var(--fr-border-dim) !important; }
footer a { color: var(--fr-text-muted); }
footer a:hover { color: var(--fr-sky); }

/* Logos (new image logo is already cartoon-outlined; never add neon glows) */
.nav-logo, .hero-logo, .hero-logo-cm, .footer-logo-cm, .cm-nav-logo { filter: drop-shadow(0 6px 14px rgba(10, 14, 40, 0.45)) !important; animation: none !important; }

@media (max-width: 600px) {
  .btn-primary, .btn-submit, .cta-btn, a.cta, .btn-secondary, .btn-wallet, .btn { min-height: 48px; }
  /* 390 px: never scroll sideways — single-column grids, wrapping table cells */
  .info-grid, .feature-grid { grid-template-columns: 1fr !important; }
  table td, table th { overflow-wrap: anywhere; }
  .prize-table th, .prize-table td { padding: 0.6rem 0.5rem !important; font-size: 0.8rem !important; }
}