/* Spacecombat visual layer. Theme colors come from styles.css; see DESIGN.md. */
:root {
  --motion-fast: 140ms;
  --motion-panel: 220ms;
  --motion-ease: cubic-bezier(.2,.8,.2,1);
  --tactical-corner: 10px;
}

/* Header: a quiet horizon of light, open navigation, and a clear active marker. */
.site-header .header-main {
  background: radial-gradient(ellipse at 64% 100%, color-mix(in srgb,var(--accent) 8%,transparent),transparent 65%);
}
.site-header .header-navs { border-top-color: transparent; }
.page-nav a { position: relative; border-color: transparent; background: transparent; box-shadow: none; }
.page-nav a::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 0;
  height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left;
  transition: transform var(--motion-fast) var(--motion-ease); pointer-events: none;
}
.page-nav a:is(:hover,:focus-visible)::after { transform: scaleX(1); }
.page-nav a.is-active { border-color: transparent; background: transparent; }
/* One travelling selection box, carrying a small ship above the page labels. */
.site-header .page-nav { margin-top: 20px; row-gap: 28px; }
.site-header .page-nav a::after { content: none; }
.site-header .page-nav a.is-active { background: transparent !important; box-shadow: none; }
.site-header .nav-shared-indicator { overflow: visible; z-index: 2; }
.nav-gladius { position: absolute; width: 36px; height: 29px; left: 50%; top: -25px; margin-left: -18px; transform: scaleX(var(--ship-facing,1)); filter: drop-shadow(0 2px 2px #080c12); }
.nav-gladius img { display: block; width: 100%; height: 100%; object-fit: contain; transform: scaleX(-1); }
@media (prefers-reduced-motion: reduce) {
  .site-header .nav-shared-indicator { transition: none !important; }
}
.header-support-link { gap: 6px; color: var(--text); border-bottom: 1px solid transparent; }
.header-support-link:hover { border-color: currentColor; text-decoration: none; }

/* Brackets use decoration only: no clipped controls, changed hit areas or card sizes. */
.pvp-build-card.compact-loadout { border-color: color-mix(in srgb,var(--line) 75%,transparent); border-radius: 14px 5px 14px 5px; }
.pvp-build-card.compact-loadout::after {
  content: ""; position: absolute; inset: 6px; pointer-events: none; z-index: 1;
  background:
    linear-gradient(var(--accent),var(--accent)) left top / var(--tactical-corner) 1px no-repeat,
    linear-gradient(var(--accent),var(--accent)) left top / 1px var(--tactical-corner) no-repeat,
    linear-gradient(var(--accent),var(--accent)) right bottom / var(--tactical-corner) 1px no-repeat,
    linear-gradient(var(--accent),var(--accent)) right bottom / 1px var(--tactical-corner) no-repeat;
  opacity: .35; transition: opacity var(--motion-fast) ease;
}
.pvp-build-card.compact-loadout:is(:hover,:focus-within)::after { opacity: 1; }
.compact-loadout .build-author { opacity: .95; }
.compact-loadout .build-tag { border-color: color-mix(in srgb,var(--line) 70%,transparent); background: #050b1266; }
.build-filters input { border-radius: 8px; border-color: var(--line); }
.build-tag-filters .btn { border-color: transparent; }
.loadout-info-popover { border-color: var(--line); border-top-color: var(--accent); border-radius: 10px 4px 10px 4px; }
.management-window,.hub-dialog { border-radius: 16px 6px 16px 6px; }
.management-window-heading { border-bottom-color: color-mix(in srgb,var(--line) 55%,transparent); }

/* Chat: one panel, light message grouping, and a deliberate jump to new messages. */
.chat-launch { border-radius: 24px 24px 6px 24px; border-color: color-mix(in srgb,var(--accent) 45%,var(--line)); }
.chat-launch::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 9px; border: 1px solid currentColor; border-radius: 50%; }
.chat-panel { border-radius: 18px 7px 18px 7px; border-top-color: var(--accent); background: linear-gradient(160deg,color-mix(in srgb,var(--accent) 6%,var(--panel)),var(--panel) 50%); }
.chat-heading { padding: 2px 2px 8px; }
.chat-heading h2 { letter-spacing: .015em; }
.chat-feed { padding: 2px 4px; }
.chat-message { border: 0; padding: 10px 8px; margin: 3px 0; border-radius: 10px 10px 10px 3px; background: color-mix(in srgb,var(--panel-elev) 42%,transparent); }
.chat-message.is-own { background: color-mix(in srgb,var(--accent) 8%,var(--panel)); border-left: 2px solid color-mix(in srgb,var(--accent) 50%,transparent); }
.chat-byline { flex-wrap: wrap; }
.chat-message-actions .btn { border-color: transparent; background: transparent; }
.chat-jump { align-self: center; border-radius: 20px; font-size: 12px; padding: 6px 12px; background: var(--panel-elev); }
.chat-jump[hidden] { display: none; }
.chat-compose textarea { border-radius: 12px 12px 4px 12px; }
.chat-compose-row { align-items: flex-end; }

/* Payment destination is configured by the owner; no third-party script is loaded. */
.kofi-setting { display: grid; gap: 6px; margin-top: 12px; font-size: 12px; }
.kofi-setting input { width: 100%; min-width: 0; }
.kofi-setting small { color: var(--muted); }
.kofi-support { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin: 20px auto; padding: 24px 28px; max-width: 1120px; border-left: 2px solid var(--accent); background: linear-gradient(105deg,color-mix(in srgb,var(--accent) 9%,var(--panel)),transparent); }
.kofi-support h2 { margin: 4px 0 8px; font-size: 24px; }
.kofi-support p { max-width: 620px; line-height: 1.6; color: var(--muted); }
.kofi-support .btn { border-radius: 24px 24px 6px 24px; padding: 12px 18px; white-space: nowrap; color: var(--text); }

@media (prefers-reduced-motion: no-preference) {
  .chat-panel:not([hidden]),.management-window[open],.hub-dialog[open] { animation: panel-deploy var(--motion-panel) var(--motion-ease); }
  .loadout-info-popover:popover-open { animation: panel-deploy var(--motion-fast) var(--motion-ease); }
  .chat-message.is-new { animation: message-arrive var(--motion-panel) var(--motion-ease); }
}
@keyframes panel-deploy { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }
@keyframes message-arrive { from { opacity: .35; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  .page-nav a::after,.pvp-build-card.compact-loadout::after { transition: none; }
  .chat-panel,.chat-message,.management-window,.hub-dialog,.loadout-info-popover { animation: none !important; }
}
@media (max-width:720px) { .kofi-support { padding: 18px; gap: 12px; }.kofi-support h2 { font-size: 20px; } }

/* Compact loadout editing: flat sections and shared space, rather than nested panels. */
.component-symbol { width:18px; height:18px; flex:0 0 18px; color:var(--accent); vertical-align:middle; }
.equipment-icon { display:inline-flex; align-items:center; flex-basis:18px; }
.equipment-line { align-items:flex-start; margin:3px 0; }
.equipment-item { color:#fff; font-size:11px; line-height:17px; overflow-wrap:anywhere; }
.component-note-row { display:flex; align-items:flex-start; gap:7px; margin-top:5px; }
.component-note-row span { min-width:0; white-space:pre-wrap; overflow-wrap:anywhere; }
.loadout-info-popover p { margin:5px 0; }
.pvp-build-card.compact-loadout { height:auto; min-height:360px; max-height:none; display:flex; flex-direction:column; }
.compact-loadout .pvp-build-content { height:auto; flex:1; }
.compact-loadout .card-equipment { flex:1 0 auto; min-height:0; overflow:visible; width:100%; }
.compact-loadout .card-equipment p { display:block; -webkit-line-clamp:unset; overflow:visible; }
.compact-loadout .build-tags:empty { display:none; }
.compact-loadout .hub-controls { height:auto; min-height:24px; flex:0 0 auto; }
.build-composer-dialog { padding:14px; }
.build-composer-dialog>.management-window-heading { margin-bottom:10px; }
.build-composer-controls { gap:8px; }
.build-composer-controls .component-picker { border:0; padding:0; margin:0; }
.build-composer-controls .loadout-slots { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 14px; margin-top:10px; align-items:start; }
.build-composer-controls .equipment-group { border:0; border-radius:0; padding:0; margin:0; display:grid; grid-template-columns:minmax(0,1fr); gap:6px; }
.build-composer-controls .equipment-group.equipment-wide { grid-column:1/-1; grid-template-columns:repeat(2,minmax(0,1fr)); }
.equipment-group legend { padding:0; margin-bottom:5px; color:var(--muted); }
.equipment-group legend .component-symbol { width:15px; height:15px; margin-right:5px; }
.build-composer-controls input:not([type=checkbox]),.build-composer-controls select,.build-composer-controls textarea { padding:6px 8px; border-radius:4px; font-size:12px; }
.build-composer-controls .loadout-slots select { margin-top:3px; height:32px; }
.build-composer-controls .catalogue-channel { margin-bottom:8px; }
.build-composer-controls .build-compatibility { display:flex; gap:14px; border:0; padding:0; margin:4px 0; }
.build-composer-controls .build-compatibility label { display:inline-flex; align-items:center; gap:5px; margin:0; }
.build-composer-controls .build-compatibility input { width:14px; height:14px; padding:0; margin:0; accent-color:var(--accent); }
.build-composer-controls .build-tag-picker { border:0; padding:0; margin:0; }
.build-composer-controls .component-build-notes { margin:0; gap:4px; }
.build-composer-controls .component-build-notes .btn { padding:3px 5px; }
@media(max-width:520px) { .build-composer-controls .loadout-slots { grid-template-columns:minmax(0,1fr); }.build-composer-controls .equipment-group.equipment-wide { grid-template-columns:minmax(0,1fr); } }

/* Support sits at the header edge, separate from the editable brand copy. */
.site-header:has(>.header-support-link) { padding-bottom:30px; }
.site-header>.header-support-link { position:absolute; left:22px; bottom:7px; margin:0; font-size:12px; z-index:3; }
@media(max-width:720px) { .site-header>.header-support-link { left:16px; } }

/* Small header tools share the complexity control's column. */
.header-editor-row { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; margin-top:7px; }
.header-editor-row #adminToggle { font-size:10px; line-height:16px; min-height:24px; padding:3px 7px; white-space:nowrap; }
.header-editor-row .editor-guide { position:relative; padding:0; margin:0; border:0; border-radius:0; background:transparent; box-shadow:none; width:auto; }
.header-editor-row .editor-guide summary { font-size:10px; font-weight:400; color:var(--muted); white-space:nowrap; padding:0; }
.header-editor-row .editor-guide-content { position:absolute; top:23px; right:0; width:min(310px,75vw); max-height:55vh; overflow:auto; padding:10px; border:1px solid var(--line); background:var(--panel); box-shadow:0 6px 18px #0006; z-index:20; text-align:left; font-size:12px; }
.header-editor-row .editor-guide-content p { margin:5px 0; }
.site-header .nav-shared-indicator { background:transparent; border:0; box-shadow:none; border-radius:0; }
.site-header .nav-shared-indicator::after { content:''; position:absolute; bottom:0; left:50%; margin-left:-8px; width:16px; height:2px; background:var(--accent); border-radius:1px; }
.nav-gladius::before { content:''; position:absolute; left:-6px; top:12px; width:10px; height:4px; background:linear-gradient(90deg,transparent,#77c8ff 40%,#f1fbff); border-radius:70% 0 0 70%; opacity:0; }
.is-flying .nav-gladius::before { opacity:1; animation:gladius-exhaust 90ms ease-in-out infinite alternate; }
@keyframes gladius-exhaust { to { transform:scaleX(.65); transform-origin:right; opacity:.65; } }
@media(prefers-reduced-motion:reduce){.is-flying .nav-gladius::before { animation:none; opacity:0; }}
.component-note-flags { display:flex; gap:14px; }
.component-note-flags label { display:inline-flex; align-items:center; gap:5px; }
.component-note-flags input[type=checkbox] { width:14px; height:14px; margin:0; padding:0; accent-color:var(--accent); }
.component-info-popover { width:360px; max-width:calc(100vw - 16px); padding:14px; white-space:normal; }
.component-note-title { display:block; font-size:13px; line-height:1.4; margin-bottom:8px; }
.component-availability { display:flex; flex-wrap:wrap; gap:6px 16px; color:var(--muted); font-size:11px; }
.component-availability>span,.component-note-heading { display:flex; align-items:center; gap:6px; }
.component-availability .component-symbol { width:13px; height:13px; flex-basis:13px; }
.component-note-section { margin-top:13px; }
.component-note-heading { margin:0 0 5px; font-size:11px; font-weight:600; color:var(--accent); }
.component-note-text { white-space:pre-line; overflow-wrap:anywhere; }
.component-note-source { color:var(--muted); font-size:10px; line-height:1.5; overflow-wrap:anywhere; }
.component-note-source a { color:var(--muted); text-underline-offset:3px; }
.source-helper-link { padding:0!important; border:0!important; color:var(--accent); text-decoration:underline; font:inherit!important; }
.admin-active .mode-editable-content { display:block!important; }
.build-source-caption { display:block; line-height:18px; }
.build-source-caption .source-helper-link { display:inline; }
.submission-preview .hub-controls { visibility:visible; }
/* Header support opens an accessible centered dialog. */
.site-header>.header-support-link { border:1px solid transparent; border-radius:4px; padding:3px 7px; text-decoration:none; }
.site-header>.header-support-link:hover,.site-header>.header-support-link:focus-visible { border-color:var(--accent); background:rgba(255,255,255,.04); text-decoration:none; }
.support-dialog { width:min(480px,calc(100vw - 32px)); box-sizing:border-box; margin:auto; padding:30px 24px 24px; color:var(--text); background:var(--panel,#101720); border:1px solid var(--border,#384451); border-radius:10px; }
.support-dialog::backdrop { background:rgba(0,0,0,.65); backdrop-filter:blur(4px); }
.support-dialog-close { position:absolute; right:6px; top:4px; }
.support-dialog .kofi-support { display:flex; flex-direction:column; align-items:center; text-align:center; margin:0; padding:0; border:0; background:none; }
.kofi-logo { display:block; max-width:180px; max-height:70px; object-fit:contain; }
/* Let the theme artwork show through a gradual veil instead of stacked opaque bands. */
.site-header::before { background-image:linear-gradient(to bottom,rgba(8,12,18,.58) 0%,rgba(8,12,18,.42) 45%,rgba(8,12,18,.54) 76%,rgba(8,12,18,.72) 100%),var(--header-bg); background-position:center,var(--header-image-position,center); }
.site-header .header-main { background:none; }
.site-header .page-nav,.site-header .category-nav-band { background:linear-gradient(to bottom,transparent,color-mix(in srgb,var(--bg) 12%,transparent) 65%,color-mix(in srgb,var(--bg) 22%,transparent)) !important; }
.header-brand--wordmark .site-brand-link { transform:translateY(5px); }
.header-brand--wordmark .subhead { margin-top:3px; }
.footer-asset-credit { color:var(--muted); font-size:11px; line-height:1.5; max-width:880px; margin:8px auto; }

.home-referral { position:relative; isolation:isolate; overflow:hidden; display:flex; align-items:center; justify-content:space-between; gap:16px 28px; margin:18px 0; padding:21px 24px; border-left:3px solid var(--accent); border-radius:4px; background:radial-gradient(ellipse at 85% 20%,color-mix(in srgb,var(--accent) 14%,transparent),transparent 65%),linear-gradient(105deg,color-mix(in srgb,var(--accent) 12%,var(--panel)),var(--panel)); }
.home-referral-media { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 45%; opacity:.15; pointer-events:none; }
.home-referral > :not(.home-referral-media) { position:relative; z-index:1; }
.home-referral-copy { min-width:0; }
.home-referral h2 { margin:0 0 6px; font-size:clamp(20px,1.8vw,23px); line-height:1.2; }
.home-referral p { margin:0; font-size:13px; color:var(--muted); line-height:1.5; }
.home-referral-actions { display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:10px 15px; }
.home-referral-code-line { display:flex; align-items:center; flex-wrap:wrap; gap:10px; padding:5px 0; border-bottom:1px solid color-mix(in srgb,var(--accent) 55%,transparent); }
.home-referral code { color:var(--text); font-size:20px; font-weight:800; letter-spacing:.08em; white-space:nowrap; user-select:all; }
.home-referral .btn { white-space:nowrap; padding:9px 12px; min-height:38px; font-size:13px; }
.home-referral-enlist { border-color:var(--accent); background:color-mix(in srgb,var(--accent) 12%,var(--panel)); }
.home-referral-edit { font-size:11px; color:var(--muted); }
@media(max-width:1000px){.home-referral{align-items:flex-start;flex-direction:column;gap:15px;}.home-referral-actions{justify-content:flex-start;}}
@media(max-width:600px){.header-brand--wordmark .subhead{margin-top:3px;}.home-referral{padding:18px 19px;}.home-referral-code-line{max-width:100%;}.home-referral code{font-size:clamp(16px,5vw,20px);}}

/* Confirm the external sign-in destination before starting Discord OAuth. */
.discord-leave-dialog { width:min(430px,calc(100vw - 28px)); max-height:calc(100dvh - 28px); box-sizing:border-box; margin:auto; padding:22px 24px 20px; color:var(--text); background:var(--panel-elev); border:1px solid var(--line); border-top:2px solid #5865f2; border-radius:8px; box-shadow:0 18px 55px #0009; }
.discord-leave-dialog::backdrop { background:rgba(3,7,13,.7); backdrop-filter:blur(3px); }
.discord-leave-dialog h2 { margin:0 0 12px; font-size:20px; line-height:1.25; }
.discord-leave-dialog p { margin:0 0 11px; color:var(--text); font-size:13px; line-height:1.55; }
.discord-leave-dialog .discord-leave-privacy { color:var(--muted); font-size:12px; }
.discord-leave-actions { display:flex; justify-content:flex-end; flex-wrap:wrap; gap:8px; margin-top:20px; }
.discord-leave-actions .btn { min-height:36px; padding:8px 12px; font-size:12px; }
.discord-leave-continue { display:inline-flex; align-items:center; gap:8px; border-color:#5865f2; color:#fff; background:#5865f2; }
.discord-leave-continue:hover { background:#4752c4; border-color:#4752c4; color:#fff; }
.discord-leave-continue .discord-logo { width:17px; height:17px; }
.discord-leave-dialog .btn:focus-visible { outline:2px solid var(--text); outline-offset:3px; }