/* =============================================================================
   fleet-flag-bar.css - Fleet pennant bar (src/fleetFlagBar.js)
   Brush-stroke banners hung from the top edge, centred over the map, one per
   fleet ship. The banner is the quest-header brush (ui/new-frame/quest/bg.png)
   rotated vertical and trimmed to a pennant point.
   ============================================================================= */

.fleet-flag-bar {
    position: fixed;
    /* Banners hang from the top edge of the screen. */
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: var(--z-ship-nav);
    display: flex;
    align-items: flex-start;
    gap: calc(var(--space-lg) * 0.375);
    pointer-events: auto;
}

.fleet-flag-bar[hidden] {
    display: none;
}

/* The flag is clipped, so its shadow / selection glow live on the button:
   drop-shadow() follows the clipped banner's outline. */
.fleet-pennant {
    display: block;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    opacity: 0.55;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6));
    transition:
        opacity 0.15s,
        transform 0.15s,
        filter 0.15s;
    -webkit-touch-callout: none;
    user-select: none;
}

.fleet-pennant:hover,
.fleet-pennant--selected,
.fleet-pennant--commanded {
    opacity: 1;
}

/* Commanded ship: gold edge glow. */
.fleet-pennant--commanded {
    filter: drop-shadow(0 0 1px var(--gold)) drop-shadow(0 0 1px var(--gold)) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6));
}

/* Extra ships following orders (shift+click): softer gold edge. */
.fleet-pennant--selected {
    filter: drop-shadow(0 0 1px rgba(197, 160, 89, 0.7)) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6));
}

/* Trim the bottom to the pennant point (PENNANT_SHAPE.rectFraction = 0.64). */
.fleet-pennant__flag {
    position: relative;
    display: block;
    clip-path: polygon(0 0, 100% 0, 100% 64%, 50% 100%, 0 64%);
}

.fleet-pennant__cloth {
    position: absolute;
    left: 50%;
    top: 50%;
    background: url(/assets/bg-BBQfAgZO.png) center / 100% 100% no-repeat;
    /* Translations after rotate() are in the image's own axes:
       - x: -overhang pins the image's straight end to the flag's top edge, so
         the extra length (and the faded brush tip) hangs below the point;
       - y: the stroke sits low in bg.png, so --brush-centre (fleetFlagBar.js,
         scaled to the flag width) moves it onto the centre line. */
    transform: translate(-50%, -50%) rotate(-90deg)
        translate(calc(-1 * var(--brush-overhang, 0px)), var(--brush-centre, 0px));
}

.fleet-pennant__ship {
    position: absolute;
    object-fit: contain;
    /* Ship art has built-in padding - scale up past the emblem box. */
    transform: rotate(-90deg) scale(1.4);
    pointer-events: none;
}

/* Activity icon in the pennant point - same icons as the map name badge. */
.fleet-pennant__activity {
    position: absolute;
    object-fit: contain;
    pointer-events: none;
}

/* Running activity: mini command-tracker ring (desktop-shell-tracker.css). */
.fleet-pennant__timer {
    position: absolute;
    pointer-events: none;
}

.fleet-pennant__timer-ring,
.fleet-pennant__timer-fill {
    position: absolute;
    inset: 0;
    background: url(/assets/activity-progress-0-gtp9GTeF.png) center / 100% 100% no-repeat;
}

/* Progress ring (pennant stroke colour): SVG arc on the ring art's track
   band (activity-progress-*.png: radius 57-68% of the box), from 12 o'clock. */
.fleet-pennant__timer-fill {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.fleet-pennant__timer-fill circle {
    fill: none;
    stroke: #8e8979;
    stroke-width: 5.5;
}

/* Same icon:box ratio as .command-tracker-icon (2rem in 3.273rem). */
.fleet-pennant__timer-icon {
    position: absolute;
    inset: 19%;
    width: 62%;
    height: 62%;
    object-fit: contain;
    border-radius: 50%;
}

/* Desktop: centre on the map area (between the command rail and the right
   edge), same as #map-taskbar in responsive.css. */
@media (min-width: 768px) and (pointer: fine) {
    .fleet-flag-bar {
        left: calc(50% + (var(--overlay-left) - var(--overlay-right)) / 2);
    }
}

/* Mobile: the activity / tutorial pills sit at top-center - drop below them. */
@media not ((min-width: 768px) and (pointer: fine)) {
    .fleet-flag-bar {
        top: calc(var(--overlay-top, 3.75rem) + 64px);
        gap: var(--space-xs);
    }
}