body.race-map-page .race-map {
    grid-template-rows: auto minmax(0, 1fr) auto;
    color: #153f60;
    background: #f4fbff;
}

body.race-map-page .race-map__bar {
    flex-wrap: nowrap;
    gap: 8px;
    padding: max(5px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) 5px max(10px, env(safe-area-inset-left));
    background: #f4fbff;
    border-bottom: 1px solid #bfdbe9;
    box-shadow: none;
}
.race-map__bar strong { display: none; }
body.race-map-page .race-map__bar > div:first-child { display: block; min-width: 0; }
body.race-map-page .race-map__bar small { display: block; font-size: 10px; }
.race-map__live { color: #194d73; font-size: 11px; letter-spacing: .04em; }
.race-map__live i { background: #ff795c; box-shadow: none; }
body.race-map-page .race-map__bar-actions {
    flex-wrap: nowrap;
    align-items: center;
    gap: 6px;
}
body.race-map-page .race-map__bar-actions :is(button, a) {
    display: grid !important;
    place-items: center;
    min-height: 44px;
    min-width: 44px;
    padding: 6px 9px;
    font-size: 11px;
    background: #e3f1fa;
    color: #194d73;
}
body.race-map-page .race-map__bar-actions a { font-size: 22px; }
body.race-map-page .race-map__bar-actions [aria-pressed=true] { background: #194d73; color: white; }

body.race-map-page .race-map__viewport {
    background: #187fae url('open-water.svg') center / 320px 320px repeat !important;
    background-attachment: scroll !important;
    contain: layout paint;
    isolation: isolate;
}
body.race-map-page .race-map__world {
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow: visible;
    contain: layout style;
    backface-visibility: visible;
    will-change: auto;
    visibility: hidden;
}
.race-map__world:before { display: none; }
.drone-scenery, .drone-course { position: absolute; pointer-events: none; }
.drone-scenery {
    /* Spazio per le coste oltre le coordinate della regata. */
    inset: -29.62963% -18.18182%;
    background: url('drone-sea.svg?v=10') center / 100% 100% no-repeat;
}
.drone-course { inset: 0; width: 100%; height: 100%; overflow: visible; }
.drone-course__line {
    fill: none;
    stroke: #fff4d4;
    stroke-width: 8;
    stroke-dasharray: 15 26;
    stroke-linecap: round;
    opacity: .7;
}
.drone-course__label {
    transform: scale(var(--course-label-scale, 1));
    dominant-baseline: central;
    text-anchor: middle;
    font: 800 70px system-ui, sans-serif;
    fill: #fff4d4;
    stroke: #10486b;
    stroke-width: 13;
    stroke-linejoin: round;
    paint-order: stroke;
}
.drone-current {
    position: absolute;
    left: var(--current-x);
    top: 29%;
    width: 160px;
    height: 60px;
    opacity: .42;
    pointer-events: none;
}
.drone-current + .drone-current { top: 72%; }
.race-map__world .drone-discovery {
    position: absolute;
    z-index: 6;
    left: var(--discovery-x);
    top: var(--discovery-y);
    transform: translate(-50%, -50%);
    width: var(--discovery-hit, 100px);
    height: var(--discovery-hit, 100px);
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    box-shadow: none;
    cursor: pointer;
}
.drone-discovery__art {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: max(112px, calc(var(--discovery-hit, 100px) * .66));
    height: auto;
    pointer-events: none;
}
.drone-discovery[data-treasure-open] { z-index: 7; }
.drone-discovery[data-treasure-open] .drone-discovery__art { width: max(132px, calc(var(--discovery-hit, 100px) * .72)); }
.drone-beacon { opacity: .3; }
.drone-treasure__open,
[data-treasure-open=true] .drone-discovery__default { display: none; }
[data-treasure-open=true] .drone-treasure__open { display: inline; }
.drone-reward__coin {
    position: absolute;
    left: 50%;
    top: 50%;
    width: clamp(36px, calc(var(--discovery-hit, 100px) * .45), 170px);
    height: auto;
    opacity: 0;
    pointer-events: none;
}
.drone-reward__amount {
    position: absolute;
    left: 50%;
    top: 50%;
    opacity: 0;
    pointer-events: none;
    color: #ffdf79;
    font: 900 clamp(38px, calc(var(--discovery-hit, 100px) * .39), 120px)/1 system-ui, sans-serif;
    text-shadow: .04em .05em .08em #102c45, -.04em -.04em .08em #102c45;
    white-space: nowrap;
}
.drone-discovery:hover .drone-discovery__art,
.drone-discovery[aria-expanded=true] .drone-discovery__art {
    filter: drop-shadow(0 0 5px #ffdf91);
}
.race-map__viewport .drone-discovery-card {
    position: absolute;
    inset: auto 8px 8px;
    z-index: 9;
    width: min(370px, calc(100% - 16px));
    margin: 0 auto;
    padding: 10px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    border: 1px solid #97c6dc;
    border-radius: 14px;
    background: #f4fbff;
    color: #153f60;
    box-shadow: 0 5px 16px #06243c50;
}
.drone-discovery-card[hidden], .drone-discovery-card [hidden] { display: none !important; }
.drone-discovery-card p { margin: 3px 0 0; font-size: 13px; line-height: 1.4; }
.drone-discovery-card :is(button, a) {
    display: inline-grid;
    place-items: center;
    min-width: 44px;
    min-height: 44px;
    padding: 4px 8px;
    border: 0;
    border-radius: 9px;
    background: #e3f1fa;
    color: #194d73;
    font: 750 13px system-ui;
}
.drone-discovery-card [data-close-discovery] { font-size: 22px; }
.race-map__viewport *, .race-map__viewport *::before, .race-map__viewport *::after {
    animation: none !important;
}
@keyframes drone-current-drift {
    from { transform: translate3d(-14px, 2px, 0); opacity: .23; }
    to { transform: translate3d(24px, -7px, 0); opacity: .6; }
}
@keyframes drone-beacon-pulse {
    0%, 72%, 100% { opacity: .12; }
    81%, 90% { opacity: .75; }
}
@media (prefers-reduced-motion: no-preference) {
    .race-map__viewport .drone-current {
        animation: drone-current-drift 5.5s ease-in-out infinite alternate !important;
    }
    .race-map__viewport .drone-current + .drone-current { animation-delay: -2.7s !important; }
    .race-map__viewport .drone-beacon {
        animation: drone-beacon-pulse 8s ease-in-out infinite !important;
    }
    .race-map__viewport:is(.is-map-moving, .is-map-hidden) :is(.drone-current, .drone-beacon),
    .is-replaying .race-map__viewport :is(.drone-current, .drone-beacon) { animation-play-state: paused !important; }
}
body.race-map-page .race-map__boat {
    height: 126px;
    filter: none !important;
    transform: translate(calc(-50% + var(--replay-offset, 0px)), calc(-50% + var(--replay-offset-y, 0px)));
}
.race-map__boat-art { bottom: 20px; transition: none !important; }
body.race-map-page .race-map__boat-art .boat-wrap { transform: translateX(-50%) scale(.8); }
.race-map__boat :is(.boat-wrap, .accessory) { filter: none !important; will-change: auto !important; }
body.race-map-page .race-map__boat > :is(.race-map__name, .race-map__rank) { display: none !important; }
body.race-map-page .race-map__boat:is(.is-mine, .is-selected, .is-replay-actor, .is-replay-target)::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 100px;
    height: 24px;
    transform: translateX(-50%);
    border: 2px solid #ffb29a;
    border-radius: 50%;
    pointer-events: none;
}
body.race-map-page .race-map__boat:is(.is-selected, .is-replay-actor)::after { border-color: #fff3b8; }
body.race-map-page .race-map__boat.is-replay-target::after { border-color: #ff947b; }

.drone-dock {
    z-index: 8;
    min-width: 0;
    padding: 5px max(6px, env(safe-area-inset-right)) max(6px, env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left));
    background: #f4fbff;
    border-top: 1px solid #bfdbe9;
}
body.race-map-page .race-map__controls {
    position: static;
    display: flex;
    justify-content: center;
    gap: 4px;
    transform: none;
    padding: 0;
    background: none;
    box-shadow: none;
}
.drone-dock button {
    cursor: pointer;
    min-height: 44px;
    border: 0;
    border-radius: 9px;
    background: #e3f1fa;
    color: #194d73;
    font: 750 12px system-ui;
}
body.race-map-page .race-map__controls button { height: auto; min-width: 44px; padding: 5px 7px; }
body.race-map-page .race-map__controls [data-map-zoom] { font-size: 20px; }
.drone-dock [data-open-replay], .drone-dock [data-replay-play] {
    background: #a93e29 !important;
    color: white !important;
}
.drone-dock button:disabled { opacity: .45; cursor: default; }
.drone-replay {
    max-width: 540px;
    margin: 0 auto 5px;
    padding: 0 6px 5px;
    border-bottom: 1px solid #bfdbe9;
}
.drone-replay__top, .drone-replay__transport { display: flex; align-items: center; gap: 5px; }
.drone-replay__top { justify-content: space-between; font-size: 11px; }
.drone-replay__top button { padding: 5px 9px; }
.drone-replay__event { margin: 0; font-size: 11px; line-height: 1.35; overflow-wrap: anywhere; }
.drone-replay__transport button { flex: 0 0 44px; }
.drone-replay__transport[hidden] { display: none; }
body.race-map-page [data-replay-seek] {
    display: block;
    flex: 1;
    min-width: 32px;
    height: 44px;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
    accent-color: #a93e29;
}
.drone-attack-overlay { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 7; pointer-events: none; }
.drone-attack-line { fill: none; stroke: #ffe5a3; stroke-width: 10; stroke-linecap: round; stroke-dasharray: 18 15; }
.drone-attack-line.is-failed { stroke: #ff957e; }
.drone-attack-ring { fill: #ff785b22; stroke: #ffb28a; stroke-width: 6; stroke-dasharray: 10 10; }
.drone-attack-label { fill: #fff3c9; stroke: #123b63; stroke-width: 4; paint-order: stroke; font: bold 24px system-ui; text-anchor: middle; }

.race-map__card {
    position: absolute !important;
    inset: 50% auto auto 50% !important;
    transform: translate(-50%, -50%) !important;
    width: min(760px, calc(100% - 20px));
    max-height: calc(100% - 24px);
    overflow: auto;
    margin: 0 !important;
    padding: 12px 44px 12px 12px;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
}
.race-map__card > .race-inspector__identity { display: flex; }
.race-map__card :is(.race-inspector__numbers, .race-inspector__loadout) { display: grid; }
.race-map__card .race-inspector__close { display: block; position: absolute; z-index: 20; }
.race-map__card > .race-report-button { position: static !important; justify-self: end; transform: none !important; }
body.race-map-page :is(.race-map__card, .race-report-button, .race-report-form, .drone-replay)[hidden] { display: none !important; }
.is-replaying .race-map__card :is(.race-inspector__loadout, .race-inspector__numbers > span:nth-child(n+3)) { display: none !important; }

@media (orientation: portrait) {
    body.race-map-page .race-map.is-landscape {
        inset: 0 auto auto 100%;
        width: 100dvh;
        height: 100dvw;
        transform: rotate(90deg);
        transform-origin: top left;
    }
    .race-map.is-landscape .drone-replay { display: grid; grid-template-columns: minmax(0, 1fr) minmax(180px, 1fr); gap: 2px 8px; max-width: 760px; }
    .race-map.is-landscape .drone-replay__event { grid-column: 1; grid-row: 2; }
    .race-map.is-landscape .drone-replay__transport { grid-column: 2; grid-row: 1 / 3; }
}