/* Shared game-data interface. Loaded after page styles so legacy tools share
   typography and surfaces without changing their markup or behaviour. */
:root {
  --font-heading: var(--font-body);
  --ui-accent: #e5b96d;
  --ui-link: #91c7fa;
  --ui-soft: rgba(145, 199, 250, .09);
  --ui-shell: 1280px;
}
:root[data-theme="dark"] {
  --bg-primary: #101720;
  --bg-secondary: #18222f;
  --bg-tertiary: #202d3d;
  --bg-elevated: #243346;
  --card-bg: #18222f;
  --card-border: #2c3a4b;
  --border-primary: #2c3a4b;
  --border-secondary: #41536a;
  --text-primary: #eff4fa;
  --text-secondary: #b7c5d7;
  --text-tertiary: #9baec4;
  --text-accent: #e5b96d;
}
:root[data-theme="light"] {
  --bg-primary: #f1f4f8;
  --bg-secondary: #fff;
  --bg-tertiary: #e9eef5;
  --border-primary: #d5dde8;
  --border-secondary: #abbace;
  --card-border: #d5dde8;
  --text-secondary: #42536b;
  --text-tertiary: #52647b;
  --text-accent: #805715;
  --ui-accent: #805715;
  --ui-link: #1d5da5;
  --ui-soft: rgba(29, 93, 165, .07);
}
.fleet-interface { padding-top: 76px; line-height: 1.6; }
.fleet-interface :is(h1,h2,h3,h4,h5,h6) { font-family: var(--font-body); font-weight: 700; letter-spacing: -.025em; line-height: 1.25; text-wrap: balance; }
.fleet-interface :is(a,button,input,select,summary):focus-visible { outline: 3px solid var(--ui-link); outline-offset: 3px; }
.fleet-interface :is(input,select,button) { font-family: var(--font-body); }
.fleet-interface :is(section,details,[id]) { scroll-margin-top: 90px; }
.fleet-interface .navbar-modern { min-height: 76px; padding: 10px 0; background: #141e2b !important; border-bottom: 1px solid #324052; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.fleet-interface .navbar > .container { max-width: var(--ui-shell); gap: 8px; }
.fleet-interface .navbar-brand { gap: 10px; margin-right: 1.2rem; }
.fleet-interface .twt-logo { font-family: var(--font-body); font-size: .85rem; font-weight: 850; letter-spacing: -.05em; line-height: 1; background: #e5b96d; color: #17212e; padding: 14px 7px; border-radius: 6px; text-shadow: none; }
.fleet-interface .navbar-brand-name { margin: 0; font-size: 1.08rem; line-height: 1.2; color: #eff4fa; }
.navbar-brand-caption { display: block; font-size: .65rem; margin-top: 3px; font-weight: 400; letter-spacing: .02em; color: #a7b8cd; }
.fleet-interface .navbar-modern .navbar-nav .nav-link { border: 1px solid transparent; background: transparent !important; box-shadow: none; border-radius: 5px; padding: 9px 10px; font-size: .85rem; font-weight: 600; color: #bbcadd !important; transform: none; }
.fleet-interface .navbar-modern .navbar-nav .nav-link:is(:hover,:focus-visible,[aria-current="page"]) { color: #fff !important; background: #253449 !important; border-color: #3c506a !important; }
.fleet-interface .navbar-modern .nav-link-updates,
.fleet-interface .navbar-modern .nav-link-youtube { border-color: transparent !important; }
.fleet-interface .navbar-modern .dropdown-menu { background: #18222f; backdrop-filter: none; -webkit-backdrop-filter: none; border-color: #41536a; }
.fleet-interface .navbar-modern .dropdown-item { font-size: .88rem; }
.fleet-interface .navbar-actions { flex-shrink: 0; }
.fleet-interface .navbar-actions .btn { min-height: 38px; font-size: .8rem; box-shadow: none; transform: none; }
.fleet-interface .navbar-actions .btn-warning { background: #e5b96d; border-color: #e5b96d; }
.fleet-interface .theme-toggle { width: 36px; height: 36px; min-width: 36px; border-radius: 5px; color: #dce5f2; border-color: #41536a; background: #202d3d; }
.fleet-interface .container { max-width: var(--ui-shell); }
.fleet-interface :is(.twt-shell,.sd-shell) { max-width: var(--ui-shell); padding-inline: 24px; }
.fleet-interface :is(.twt-kicker,.twt-breadcrumb,.twt-provenance,.twt-results,.twt-source-note,.twt-chiplabel,.twt-select label,.sd-kicker,.sd-eyebrow,.sd-breadcrumb ol,.sd-top-return,.sd-summary-hint,.sd-rating-kind) { font-family: var(--font-body); letter-spacing: .025em; font-size: .76rem; }
.fleet-interface .twt-page-head { align-items: center; padding: 8px 0 6px; }
.fleet-interface .twt-title { font-size: clamp(1.65rem,3vw,2.25rem); line-height: 1.25; }
.fleet-interface .twt-title-accent { font-size: .55em; font-weight: 500; letter-spacing: 0; white-space: nowrap; color: var(--text-secondary); }
.fleet-interface .twt-intro { max-width: 690px; font-size: .9rem; }
.fleet-interface .twt-intro a { color: var(--ui-link); }
.fleet-interface .twt-statcards { gap: 0; border: 1px solid var(--border-primary); border-radius: 8px; overflow: hidden; margin: 0; }
.fleet-interface .twt-statcard { border: 0; border-radius: 0; min-width: 90px; padding: 12px 16px; }
.fleet-interface .twt-statcard + .twt-statcard { border-left: 1px solid var(--border-primary); }
.fleet-interface .twt-statcard dt { font-family: var(--font-body); font-size: .7rem; letter-spacing: .025em; }
.fleet-interface .twt-statcard dd { font-size: 1.45rem; }
.fleet-interface .twt-filterbar { box-shadow: none; border-top-color: var(--border-primary); padding: 20px; gap: 16px; }
.fleet-interface .twt-chip { min-height: 34px; height: auto; font-family: var(--font-body); font-size: .8rem; letter-spacing: 0; }
.fleet-interface .twt-chip.is-active { background: var(--ui-soft); color: var(--ui-link); border-color: var(--ui-link); }
.fleet-interface .twt-select select { height: 42px; font-family: var(--font-body); font-size: .8rem; letter-spacing: 0; }
.fleet-interface .twt-filterbar__controls { grid-template-columns: minmax(0,1fr); }
.fleet-interface .twt-selects { grid-template-columns: repeat(4,minmax(0,1fr)); }
.fleet-interface .twt-apply { height: 44px; background: #e5b96d; color: #17212e; border-color: #e5b96d; font-family: var(--font-body); font-size: .84rem; text-transform: none; letter-spacing: 0; }
.fleet-interface .twt-clear { font-family: var(--font-body); font-size: .8rem; text-transform: none; letter-spacing: 0; }
.fleet-interface .twt-performance__title { font-family: var(--font-body); font-size: .8rem; letter-spacing: 0; text-transform: none; }
.fleet-interface .twt-performance summary { font-size: .8rem; }
.fleet-interface .twt-table { font-variant-numeric: tabular-nums; }
.fleet-interface .twt-table tbody tr:hover { background: var(--ui-soft); }
.fleet-interface .sd-hero { background: var(--bg-secondary); box-shadow: none; border-top: 3px solid var(--ui-accent); }
.fleet-interface .sd-hero h1 { font-size: clamp(2rem,4vw,3rem); }
.fleet-interface .sd-description { font-size: .94rem; }
.fleet-interface :is(.sd-section-heading,.sd-card-heading h2) { font-size: 1.25rem; }
.fleet-interface :is(.sd-visual-card,.sd-card,.sd-glance-grid > div) { box-shadow: none; background: var(--bg-secondary); }
.fleet-interface .sd-glance-grid dt { font-family: var(--font-body); font-size: .75rem; letter-spacing: .025em; }
.fleet-interface .sd-glance-grid dd { font-size: 1.7rem; }
.fleet-interface .sd-definition-row { padding-block: .65rem; }
.fleet-interface :is(.sd-definition-row dd,.twt-statcard dd) { font-variant-numeric: tabular-nums; }
.fleet-interface .updates-masthead { padding-top: 2.5rem; padding-bottom: 2rem; background: var(--bg-secondary); }
.fleet-interface .updates-masthead h1 { font-size: clamp(2rem,4vw,3rem); }
.fleet-interface .updates-masthead__intro { font-size: 1rem; margin-bottom: 1.1rem; }
.fleet-interface .twt-page-hero { padding-block: 2.75rem 2.25rem; background: var(--bg-secondary); border-color: var(--border-primary); }
.fleet-interface .twt-page-hero::before { display: none; }
.fleet-interface .twt-page-title { font-family: var(--font-body); font-size: clamp(2rem,4vw,3rem); }
.fleet-interface .twt-page-lead { font-size: 1rem; }
.fleet-interface .twt-cat-pill { border-color: var(--border-secondary); border-radius: 6px; }
.fleet-interface .twt-cat-pill:is(:hover,.active) { background: var(--ui-soft); color: var(--ui-link); border-color: var(--ui-link); }
.fleet-interface .twt-article-card { background: var(--bg-secondary); border-color: var(--border-primary); box-shadow: none; }
.fleet-interface .fleet-footer { margin-top: 0; padding-block: 2.75rem; background: var(--bg-secondary); border-top: 1px solid var(--border-primary); text-align: left; }
.fleet-interface .footer-content { padding-inline: 0 !important; }
.footer-brand { font-size: 1.35rem; font-weight: 750; color: var(--text-primary); }
.footer-brand span { font-size: .85rem; font-weight: 400; color: var(--text-secondary); margin-left: 1rem; }
.fleet-interface .footer-links { display: flex; gap: .65rem 1rem; flex-wrap: wrap; }
.fleet-interface .footer-links a { margin: 0 !important; padding: 0; font-size: .85rem; }
@media (min-width:1200px) {
  .fleet-interface .navbar .navbar-nav { align-items: center; }
  .fleet-interface .navbar-actions { margin-left: 1rem; }
}
@media (max-width:1199px) {
  .fleet-interface .navbar-collapse { flex-basis: 100%; max-height: calc(100dvh - 90px); overflow-y: auto; }
  .fleet-interface .navbar-nav { margin-top: 12px; }
  .fleet-interface .navbar-actions { padding: 12px 0 4px; }
  .fleet-interface .navbar-nav .dropdown-menu { position: static; }
}
@media (max-width:767px) {
  .fleet-interface :is(.twt-shell,.sd-shell) { padding-inline: 16px; }
  .fleet-interface .twt-statcards { width: 100%; grid-template-columns: repeat(4,minmax(0,1fr)); }
  .fleet-interface .twt-statcard { min-width: 0; padding: 12px 9px; }
  .fleet-interface .twt-filterbar { padding: 14px; }
  .fleet-interface .twt-selects { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .fleet-interface .twt-chip { min-height: 38px; }
  .fleet-interface .sd-hero { padding: 20px; }
  .footer-brand span { display: block; margin: .4rem 0 0; }
}
@media (prefers-reduced-motion:reduce) {
  .fleet-interface *, .fleet-interface *::before, .fleet-interface *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}
/* Keep the data table close to its controls on wider screens. */
@media (min-width:1100px) {
  .fleet-interface .twt-page-head { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 28px; }
  .fleet-interface .twt-page-head > div { min-width: 0; }
  .fleet-interface .twt-statcards { grid-template-columns: repeat(4,minmax(80px,1fr)); }
  .fleet-interface .twt-statcard { min-width: 80px; padding: 12px; }
}
@media (min-width:1200px) {
  .fleet-interface .twt-filterbar__controls { grid-template-columns: minmax(0,1.1fr) minmax(0,1fr); }
}
.fleet-interface .container { padding-inline: 24px; }
@media (max-width:767px) { .fleet-interface .container { padding-inline: 16px; } }
/* Legacy community tools retain their controls and semantic tier colours. */
.fleet-interface {
  --planner-bg: var(--bg-primary);
  --planner-surface: var(--bg-secondary);
  --planner-card: var(--bg-secondary);
  --planner-border: var(--border-primary);
  --planner-text: var(--text-primary);
  --planner-text-muted: var(--text-secondary);
  --planner-accent: #2860a0;
  --planner-accent-light: #2860a0;
  --reviews-primary: var(--bg-primary);
  --reviews-secondary: var(--bg-secondary);
  --reviews-surface: var(--bg-secondary);
  --reviews-card: var(--bg-secondary);
  --reviews-text: var(--text-primary);
  --reviews-text-muted: var(--text-secondary);
  --reviews-border: var(--border-primary);
  --reviews-accent: #2860a0;
  --reviews-accent-light: #2860a0;
  --competitive-primary: var(--bg-primary);
  --competitive-secondary: var(--bg-secondary);
  --competitive-surface: var(--bg-secondary);
  --competitive-card: var(--bg-secondary);
  --competitive-text: var(--text-primary);
  --competitive-text-muted: var(--text-secondary);
  --competitive-border: var(--border-primary);
  --competitive-accent: #2860a0;
  --competitive-accent-light: #2860a0;
}
.fleet-interface :is(.planner-header,.reviews-hero,.competitive-hero) { background: var(--bg-secondary); border-bottom: 1px solid var(--border-primary); }
.fleet-interface :is(.reviews-hero,.competitive-hero)::before { display: none; }
.fleet-interface :is(.planner-title,.hero-title) { background: none; -webkit-text-fill-color: currentColor; color: var(--text-primary); font-size: clamp(1.8rem,4vw,2.6rem); }
.fleet-interface .hero-title .accent { color: var(--ui-link); }
.fleet-interface :is(.points-display,.panel,.skill-tree-container,.skill-tier,.tab-btn) { border-radius: 8px; }
.fleet-interface .tab-navigation { top: 76px; backdrop-filter: none; }
.fleet-interface .tab-btn.active { box-shadow: none; }
.fleet-interface :is(.planner-container .action-share,.planner-container .panel-title i) { color: var(--ui-link); }
.fleet-interface .planner-container .action-share:hover { color: #fff; }
.fleet-interface .ship-data-guide { max-width: 68rem; }
.fleet-interface .ship-data-guide :is(section,.ship-data-guide__contents) { border-color: var(--border-primary); }
:root[data-theme="light"] .planner-container {
  --skill-tier1: #167440;
  --skill-tier2: #215fc0;
  --skill-tier3: #7541b2;
  --skill-tier4: #a62e73;
}
.fleet-interface :is(.twt-kicker,.twt-card-meta,.twt-card-cta,.twt-faq-item h3) { color: var(--text-accent); }
.fleet-interface :is(.twt-category-playbook,.twt-article-cta) { background: var(--bg-secondary); border-color: var(--border-primary); border-radius: 8px; }
.fleet-interface .twt-category-principles article { background: var(--bg-tertiary); border-radius: 6px; }