/* Split premium ship layers build 20260712-010809 */

/*
  Hide the older single-piece premium ship image.
*/
.hr-premium-ship-art {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/*
  New lower hull / plank / lantern layer.
*/
.hr-premium-ship-hull {
    position: absolute !important;

    left: -3.2% !important;
    bottom: -2.2% !important;

    width: min(78%, 1040px) !important;
    height: auto !important;
    max-width: none !important;

    display: block !important;
    object-fit: contain !important;
    object-position: left bottom !important;

    pointer-events: none !important;
    user-select: none !important;

    z-index: 22 !important;

    filter:
        drop-shadow(
            0 8px 10px
            rgba(0, 0, 0, 0.46)
        )
        saturate(1.05)
        contrast(1.02) !important;
}

/*
  New mast / flag / upper rigging layer.
  It sits behind the hull so the extra lower platform area stays hidden.
*/
.hr-premium-ship-mast {
    position: absolute !important;

    left: -1.0% !important;
    bottom: 18.2% !important;

    width: min(31%, 420px) !important;
    height: auto !important;
    max-width: none !important;

    display: block !important;
    object-fit: contain !important;
    object-position: left bottom !important;

    pointer-events: none !important;
    user-select: none !important;

    z-index: 20 !important;

    filter:
        drop-shadow(
            0 6px 8px
            rgba(0, 0, 0, 0.34)
        )
        saturate(1.04)
        contrast(1.02) !important;
}

/*
  Keep the pirate and Kraken above both ship layers.
*/
.hr-premium-pirate-host,
.hr-premium-pirate-fallback,
.hr-premium-pirate-art {
    z-index: 36 !important;
}

#scene #kraken,
#scene .kraken {
    z-index: 28 !important;
}

/*
  Tablet tuning.
*/
@media (max-width: 900px) {
    .hr-premium-ship-hull {
        left: -5% !important;
        bottom: -1.8% !important;
        width: 84% !important;
    }

    .hr-premium-ship-mast {
        left: -2.8% !important;
        bottom: 17.5% !important;
        width: 35% !important;
    }
}

/*
  Phone tuning.
*/
@media (max-width: 560px) {
    .hr-premium-ship-hull {
        left: -8% !important;
        bottom: -1.0% !important;
        width: 92% !important;
    }

    .hr-premium-ship-mast {
        left: -4.8% !important;
        bottom: 17.8% !important;
        width: 43% !important;
    }
}

/*
  Very small phones.
*/
@media (max-width: 430px) {
    .hr-premium-ship-hull {
        left: -9.5% !important;
        width: 95% !important;
    }

    .hr-premium-ship-mast {
        left: -6.0% !important;
        bottom: 17.2% !important;
        width: 46% !important;
    }
}

/* === SPLIT SHIP BLINK FIX START === */

/*
  Prevent browser compositing flashes while the responsive scene
  is rendered or resized.
*/
.hr-premium-ship-hull,
.hr-premium-ship-mast {
    opacity: 1 !important;
    visibility: visible !important;

    animation: none !important;
    transition: none !important;

    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;

    transform: translateZ(0) !important;
    -webkit-transform: translateZ(0) !important;

    image-rendering: auto !important;
    will-change: auto !important;
}

/* === SPLIT SHIP BLINK FIX END === */

/* === SPLIT SHIP ALIGNMENT REPAIR START === */

/*
  Keep the full decorated left edge inside the game scene.
  The earlier negative left offset clipped part of the hull.
*/
#scene > .hr-premium-ship-hull {
    left: 0% !important;
    bottom: -1.5% !important;

    width: min(77%, 1020px) !important;

    z-index: 22 !important;
}

/*
  The generated mast asset includes a partial lower deck.
  Clip that duplicate lower section so only the full mast,
  flag and upper rigging remain visible.
*/
#scene > .hr-premium-ship-mast {
    left: 1.2% !important;
    bottom: 8.5% !important;

    width: min(31%, 420px) !important;

    clip-path:
        inset(0 0 22% 0) !important;

    -webkit-clip-path:
        inset(0 0 22% 0) !important;

    transform-origin:
        left bottom !important;

    z-index: 21 !important;
}

/*
  Raise the pirate on desktop so his boots rest on top of the
  new plank instead of hanging below it.
  Horizontal wrong-guess movement remains unchanged.
*/
@media (min-width: 901px) {
    #scene .hr-premium-pirate-art {
        transform:
            translate(-50%, 12%) !important;

        transform-origin:
            center bottom !important;
    }
}

/*
  Tablet alignment.
*/
@media (min-width: 561px) and (max-width: 900px) {
    #scene > .hr-premium-ship-hull {
        left: -1% !important;
        bottom: -1.2% !important;
        width: 82% !important;
    }

    #scene > .hr-premium-ship-mast {
        left: 0% !important;
        bottom: 8.5% !important;
        width: 35% !important;

        clip-path:
            inset(0 0 22% 0) !important;

        -webkit-clip-path:
            inset(0 0 22% 0) !important;
    }

    #scene .hr-premium-pirate-art {
        transform:
            translate(-50%, 13%) !important;
    }
}

/*
  Mobile keeps the pirate position already tuned earlier.
  Only repair the ship layering and missing left edge.
*/
@media (max-width: 560px) {
    #scene > .hr-premium-ship-hull {
        left: -2% !important;
        bottom: -0.8% !important;
        width: 88% !important;
    }

    #scene > .hr-premium-ship-mast {
        left: -1% !important;
        bottom: 8% !important;
        width: 42% !important;

        clip-path:
            inset(0 0 23% 0) !important;

        -webkit-clip-path:
            inset(0 0 23% 0) !important;
    }
}

@media (max-width: 430px) {
    #scene > .hr-premium-ship-hull {
        left: -3% !important;
        width: 91% !important;
    }

    #scene > .hr-premium-ship-mast {
        left: -2% !important;
        bottom: 7.5% !important;
        width: 45% !important;
    }
}

/* === SPLIT SHIP ALIGNMENT REPAIR END === */

/* === FINAL SHIP PIRATE TUNE START === */

/*
  Desktop:
  - nudge hull a hair left/down
  - move mast a bit left/up and clip more of the lower duplicate area
  - place pirate closer to the start of the plank
*/
@media (min-width: 901px) {
    #scene > .hr-premium-ship-hull {
        left: -1.4% !important;
        bottom: -1.8% !important;
        width: min(79%, 1040px) !important;
    }

    #scene > .hr-premium-ship-mast {
        left: -0.8% !important;
        bottom: 10.2% !important;
        width: min(28.5%, 390px) !important;

        clip-path: inset(0 0 28% 0) !important;
        -webkit-clip-path: inset(0 0 28% 0) !important;
    }

    /*
      Move pirate onto the plank start more cleanly.
      Slightly right, slightly lower than the previous desktop tune.
    */
    #scene .hr-premium-pirate-art {
        transform:
            translate(calc(-50% + 18px), 17%) !important;
        transform-origin:
            center bottom !important;
    }
}

/*
  Tablet:
  keep similar relationship but slightly roomier.
*/
@media (min-width: 561px) and (max-width: 900px) {
    #scene > .hr-premium-ship-hull {
        left: -2.4% !important;
        bottom: -1.5% !important;
        width: 84% !important;
    }

    #scene > .hr-premium-ship-mast {
        left: -1.4% !important;
        bottom: 9.6% !important;
        width: 31.5% !important;

        clip-path: inset(0 0 28% 0) !important;
        -webkit-clip-path: inset(0 0 28% 0) !important;
    }

    #scene .hr-premium-pirate-art {
        transform:
            translate(calc(-50% + 14px), 17%) !important;
        transform-origin:
            center bottom !important;
    }
}

/*
  Mobile:
  only lightly tune the split ship layers.
  Leave the earlier mobile pirate height work mostly intact.
*/
@media (max-width: 560px) {
    #scene > .hr-premium-ship-hull {
        left: -3.8% !important;
        bottom: -0.9% !important;
        width: 90% !important;
    }

    #scene > .hr-premium-ship-mast {
        left: -2.6% !important;
        bottom: 8.7% !important;
        width: 40% !important;

        clip-path: inset(0 0 29% 0) !important;
        -webkit-clip-path: inset(0 0 29% 0) !important;
    }
}

@media (max-width: 430px) {
    #scene > .hr-premium-ship-hull {
        left: -4.6% !important;
        width: 92% !important;
    }

    #scene > .hr-premium-ship-mast {
        left: -3.2% !important;
        bottom: 8.3% !important;
        width: 42% !important;
    }
}

/* === FINAL SHIP PIRATE TUNE END === */

/* === SHIP LEFT EDGE AND PIRATE HEIGHT REPAIR START === */

/*
  DESKTOP
  - Raise pirate more
  - Keep hull as the main visible ship body
  - Clip mast image more aggressively, especially lower-left area
*/
@media (min-width: 901px) {
    #scene > .hr-premium-ship-hull {
        left: -1.0% !important;
        bottom: -1.6% !important;
        width: min(80%, 1060px) !important;
        z-index: 22 !important;
    }

    #scene > .hr-premium-ship-mast {
        left: 0.8% !important;
        bottom: 11.0% !important;
        width: min(26.5%, 365px) !important;

        /*
          Remove most of the lower duplicated ship area and trim
          the left side that is making the ship look broken.
        */
        clip-path: polygon(
            10% 0%,
            100% 0%,
            100% 68%,
            88% 68%,
            82% 100%,
            24% 100%,
            24% 60%,
            10% 60%
        ) !important;

        -webkit-clip-path: polygon(
            10% 0%,
            100% 0%,
            100% 68%,
            88% 68%,
            82% 100%,
            24% 100%,
            24% 60%,
            10% 60%
        ) !important;

        z-index: 21 !important;
    }

    /*
      Raise pirate a good bit so he sits on the plank.
      Keep slight right nudge.
    */
    #scene .hr-premium-pirate-art {
        transform:
            translate(calc(-50% + 18px), 2%) !important;
        transform-origin:
            center bottom !important;
    }
}

/*
  TABLET
*/
@media (min-width: 561px) and (max-width: 900px) {
    #scene > .hr-premium-ship-hull {
        left: -2.0% !important;
        bottom: -1.4% !important;
        width: 85% !important;
    }

    #scene > .hr-premium-ship-mast {
        left: -0.2% !important;
        bottom: 10.4% !important;
        width: 29.5% !important;

        clip-path: polygon(
            10% 0%,
            100% 0%,
            100% 68%,
            88% 68%,
            82% 100%,
            24% 100%,
            24% 60%,
            10% 60%
        ) !important;

        -webkit-clip-path: polygon(
            10% 0%,
            100% 0%,
            100% 68%,
            88% 68%,
            82% 100%,
            24% 100%,
            24% 60%,
            10% 60%
        ) !important;
    }

    #scene .hr-premium-pirate-art {
        transform:
            translate(calc(-50% + 14px), 3%) !important;
        transform-origin:
            center bottom !important;
    }
}

/*
  MOBILE
  Leave pirate height mostly as previously tuned.
  Only improve ship layer cleanup.
*/
@media (max-width: 560px) {
    #scene > .hr-premium-ship-hull {
        left: -3.4% !important;
        bottom: -0.9% !important;
        width: 90% !important;
    }

    #scene > .hr-premium-ship-mast {
        left: -1.4% !important;
        bottom: 9.0% !important;
        width: 39% !important;

        clip-path: polygon(
            10% 0%,
            100% 0%,
            100% 67%,
            88% 67%,
            82% 100%,
            24% 100%,
            24% 60%,
            10% 60%
        ) !important;

        -webkit-clip-path: polygon(
            10% 0%,
            100% 0%,
            100% 67%,
            88% 67%,
            82% 100%,
            24% 100%,
            24% 60%,
            10% 60%
        ) !important;
    }
}

@media (max-width: 430px) {
    #scene > .hr-premium-ship-hull {
        left: -4.0% !important;
        width: 92% !important;
    }

    #scene > .hr-premium-ship-mast {
        left: -2.0% !important;
        bottom: 8.6% !important;
        width: 41% !important;
    }
}

/* === SHIP LEFT EDGE AND PIRATE HEIGHT REPAIR END === */

/* === HARD FIX SHIP PIRATE START === */

/*
  DESKTOP
  Make the hull the main visible ship body.
  Restrict the mast image to only upper mast/flag/rigging.
*/
@media (min-width: 901px) {
    #scene > .hr-premium-ship-hull {
        left: 0.0% !important;
        bottom: -1.7% !important;
        width: min(77%, 1010px) !important;
        z-index: 22 !important;
    }

    #scene > .hr-premium-ship-mast {
        left: 1.8% !important;
        bottom: 16.0% !important;
        width: min(21.5%, 300px) !important;

        /*
          Clip much more of the mast layer so the lower duplicate
          ship body and broken left edge stop showing.
        */
        clip-path: inset(0 0 40% 16%) !important;
        -webkit-clip-path: inset(0 0 40% 16%) !important;

        transform-origin: left bottom !important;
        z-index: 21 !important;
    }

    /*
      Raise pirate noticeably.
      Negative Y moves him up.
    */
    #scene .hr-premium-pirate-art {
        transform:
            translate(calc(-50% + 16px), -12%) !important;
        transform-origin:
            center bottom !important;
    }
}

/*
  TABLET
*/
@media (min-width: 561px) and (max-width: 900px) {
    #scene > .hr-premium-ship-hull {
        left: -1.0% !important;
        bottom: -1.5% !important;
        width: 82% !important;
    }

    #scene > .hr-premium-ship-mast {
        left: 0.8% !important;
        bottom: 14.8% !important;
        width: 25.5% !important;

        clip-path: inset(0 0 40% 15%) !important;
        -webkit-clip-path: inset(0 0 40% 15%) !important;
    }

    #scene .hr-premium-pirate-art {
        transform:
            translate(calc(-50% + 12px), -10%) !important;
        transform-origin:
            center bottom !important;
    }
}

/*
  MOBILE
  Light cleanup only.
*/
@media (max-width: 560px) {
    #scene > .hr-premium-ship-hull {
        left: -2.8% !important;
        bottom: -0.9% !important;
        width: 88% !important;
    }

    #scene > .hr-premium-ship-mast {
        left: -0.2% !important;
        bottom: 12.6% !important;
        width: 33% !important;

        clip-path: inset(0 0 42% 15%) !important;
        -webkit-clip-path: inset(0 0 42% 15%) !important;
    }
}

@media (max-width: 430px) {
    #scene > .hr-premium-ship-hull {
        left: -3.5% !important;
        width: 90% !important;
    }

    #scene > .hr-premium-ship-mast {
        left: -1.0% !important;
        bottom: 12.2% !important;
        width: 35% !important;
    }
}

/* === HARD FIX SHIP PIRATE END === */

