/* Mahjong Treasure Quest styles, part 4 of 4: pirate theme layer: backgrounds, buttons, windows, HUD and the final adjustments.
   The four files are loaded in order (see index.html) and each one can override the one before it:
   to change a rule, edit the LAST file that sets it (many pirate theme rules are in 04-overrides.css). */

/* Map interface: a route and controls built for their real size. */
html body .map,
html body .map.pe-tall {
  background: #151447 var(--wf) center / cover no-repeat !important;
}
html body.land .map {
  background-image: var(--wfl) !important;
}
html body .map::before,
html body .map-art::before {
  display: none !important;
}
html body .map-art,
html body .map.col .map-art.land,
html body .map.pe-tall .map-art {
  background: none !important;
}
.pirate-route {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.pirate-route path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.pirate-route .route-glow {
  stroke: #16d7ff;
  stroke-width: calc(var(--route-width) * 2.5);
  opacity: 0.5;
  filter: blur(5px);
}
.pirate-route .route-line {
  stroke: #b8ffff;
  stroke-width: var(--route-width);
}
.map-mascot-shadow {
  position: absolute;
  transform: translate(-50%, -50%);
  pointer-events: none;
  background: none center / contain no-repeat;
}
.map-mascot {
  z-index: 1;
}
html body .map-art .stop {
  aspect-ratio: 1 / 1 !important;
  height: auto !important;
  padding: 0 !important;
  background-size: contain !important;
}
html body .map-art .stop b,
html body .map-art .stop.cur b {
  color: #153d69 !important;
  -webkit-text-stroke: 0 !important;
  top: 39%;
}
html body .map-art .stop.locked .lock {
  bottom: 7%;
}
html body .topbar .pill,
html body.land .topbar .pill {
  background: linear-gradient(#f4ffff, #bdeefa) !important;
  border: 2px solid #309cc5 !important;
  border-image: none !important;
  border-radius: 999px !important;
  box-shadow: 0 3px 0 #174b80 !important;
  color: #173e71 !important;
}
html body .topbar .pill b,
html body .topbar .pill.level b {
  color: #173e71 !important;
  -webkit-text-stroke: 0 !important;
}
html body .topbar .coins b {
  color: #173e71 !important;
}

/* No bitmap stretching: dimensional CSS buttons retain their round ends. */
html body .modal.pause .col button.btn,
html body .modal.win .row .btn.go,
html body .modal.lose .row .btn.go,
html body .modal.lose .row .btn.yellow,
html body.s-home .home .btn.big {
  box-sizing: border-box !important;
  border: max(2px, 0.4cqh) solid #f9be46 !important;
  border-image: none !important;
  border-radius: 999px !important;
  background:
    radial-gradient(ellipse 70% 36% at 50% 9%, #ffffff8c, transparent 75%),
    linear-gradient(180deg, #b7faff 0%, #1bdaf3 14%, #078bc9 46%, #075ab6 53%, #102b78 100%) !important;
  box-shadow:
    inset 0 3px 3px #fff9,
    inset 0 0 0 2px #b7faff66,
    inset 0 -5px 0 #102c69,
    0 3px 0 #87521b,
    0 5px 8px #10123766 !important;
  color: #fff !important;
  -webkit-text-stroke: 0 !important;
  text-shadow:
    0 2px 2px #073b70,
    1px 0 #073b70,
    -1px 0 #073b70 !important;
  padding: 0 5% !important;
  line-height: 1.05 !important;
}
html body .modal.pause .col button.btn::before,
html body .modal.pause .col button.btn::after,
html body .modal.win .row .btn.go::before,
html body .modal.win .row .btn.go::after,
html body .modal.lose .row .btn::before,
html body .modal.lose .row .btn::after,
html body.s-home .home .btn.big::before,
html body.s-home .home .btn.big::after {
  display: none !important;
}
html body .modal.pause .col button.btn[data-a='restart'],
html body .modal.pause .col button.btn[data-a='map'] {
  height: 9.3cqh !important;
}
html body .modal.pause .col button.btn .bi {
  width: 4.5cqh !important;
  height: 4.5cqh !important;
}
html body .modal.pause .pirate-close {
  position: absolute !important;
  z-index: 10 !important;
  right: 1cqw !important;
  top: -4cqh !important;
  width: 7cqh !important;
  height: 7cqh !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: max(2px, 0.35cqh) solid #ffc849 !important;
  border-radius: 50% !important;
  border-image: none !important;
  background: radial-gradient(circle at 35% 25%, #80f5ff, #078fce 52%, #173b91 100%) !important;
  color: white !important;
  font:
    800 5cqh/1 Arial,
    sans-serif !important;
  text-align: center !important;
  text-shadow: 0 2px #154073 !important;
  box-shadow:
    0 2px 0 #865117,
    0 3px 8px #07123677 !important;
}
html body .modal .ribbon span {
  color: #173e71 !important;
  -webkit-text-stroke: 0 !important;
  text-shadow: none !important;
  padding-top: 0 !important;
  text-align: center;
  line-height: 1.05;
}
html body .modal.pause .vol-row {
  color: #173e71 !important;
}
html body .modal.pause .vol-row[data-a] {
  display: flex !important;
  align-items: center !important;
  gap: 1cqw !important;
  box-sizing: border-box !important;
  padding: 0 2cqw !important;
  border: 2px solid #a0cfdf !important;
  border-image: none !important;
  border-radius: 999px !important;
  background: #e7f8ff !important;
  box-shadow: inset 0 2px 4px #7fb4ca55 !important;
  overflow: hidden !important;
  font-size: 2.5cqh !important;
  text-shadow: none !important;
  -webkit-text-stroke: 0 !important;
}
html body .modal.pause .vol-row .bi {
  margin: 0 !important;
  width: 3.8cqh !important;
  height: 3.8cqh !important;
}
html body .modal.pause .vol-row span {
  color: #173e71 !important;
  text-shadow: none !important;
}
html body .modal.pause .vol-row input[type='range'] {
  width: 0 !important;
  min-width: 0 !important;
  margin: 0 !important;
  border-color: #4082a5 !important;
  background:
    linear-gradient(#52deef, #0498d1) 0 / var(--p, 50%) 100% no-repeat,
    #bedbe8 !important;
}
html body .modal.pause .vol-row input[type='range']::-webkit-slider-thumb {
  border-color: #295783 !important;
  box-shadow: none !important;
}
html body .modal.pause .vol-row input[type='range']::-moz-range-thumb {
  border-color: #295783 !important;
  box-shadow: none !important;
}
html body .modal.pause .switches .set-row {
  color: #173e71 !important;
}
html body .modal.pause .switches .set-lang {
  color: #173e71 !important;
}
html body .modal.lose p,
html body .modal.win .all-done {
  color: #173e71 !important;
}
html body .start-tap span {
  color: #fff !important;
  -webkit-text-stroke: 0.13em #123977 !important;
  text-shadow:
    0 0.08em 0 #082053,
    0 0 0.3em #27d9ff !important;
}
html body.land.s-home .home .btn.big,
html body:not(.land).s-home .home .btn.big {
  color: #fff !important;
  -webkit-text-stroke: 0.04em #123977 !important;
  text-shadow: 0 2px #123977 !important;
}
html body .bubble {
  color: #183c6d !important;
  background: #effdff !important;
  border: 3px solid #39c4e1 !important;
  border-image: none !important;
  border-radius: 20px !important;
  padding: 12px 16px !important;
  box-shadow:
    0 4px 0 #0d5890,
    0 7px 12px #0b144755 !important;
}
html body:not(.land) .bubble {
  background: #effdff !important;
  border: 3px solid #39c4e1 !important;
  border-image: none !important;
  border-radius: 20px !important;
  padding: 12px 16px !important;
  box-sizing: border-box !important;
}
html body .bubble::after {
  border-left-color: #39c4e1 !important;
}
html body.land .bubble::after {
  border-top-color: #39c4e1 !important;
  border-left-color: transparent !important;
  filter: none !important;
}
html body.s-home .home-mascot.home-mascot {
  width: auto !important;
  height: 40vh !important;
  background: radial-gradient(ellipse 31% 3.5% at 50% 88%, #14234870, transparent 100%) no-repeat !important;
}
html body:not(.land).s-home .home-mascot.home-mascot {
  top: 37vh !important;
  height: 34vh !important;
}

body[data-world='0'] {
  --map-approved: none;
}
body[data-world='0'] {
  --map-approved-portrait: none;
}
body[data-world='1'] {
  --map-approved: none;
}
body[data-world='1'] {
  --map-approved-portrait: none;
}
body[data-world='2'] {
  --map-approved: none;
}
body[data-world='2'] {
  --map-approved-portrait: none;
}
body[data-world='3'] {
  --map-approved: none;
}
body[data-world='3'] {
  --map-approved-portrait: none;
}
html body.land .map {
  background-image: var(--map-approved, var(--wfl)) !important;
}
html body.land.s-home::before {
  background-image: none !important;
}
html body:not(.land) .map,
html body:not(.land) .map.pe-tall {
  background-image: var(--map-approved-portrait, var(--wf)) !important;
}
html body:not(.land).s-home {
  background-image: none !important;
}
html body:not(.land).s-home .home .btn.big {
  background:
    radial-gradient(ellipse 70% 36% at 50% 9%, #ffffff8c, transparent 75%),
    linear-gradient(180deg, #b7faff, #1bdaf3 14%, #078bc9 46%, #075ab6 53%, #102b78) !important;
  border: 3px solid #f9be46 !important;
  border-image: none !important;
  border-radius: 999px !important;
  box-shadow:
    inset 0 3px 3px #fff9,
    inset 0 -4px 0 #102c69,
    0 3px 0 #87521b,
    0 5px 8px #10123766 !important;
}
/* The language and vibration controls stay inside the frame. */
html body .modal.pause .switches .lang-row {
  left: 6cqw !important;
  width: 33cqw !important;
}
html body .modal.pause .switches .vibe-row {
  left: 42cqw !important;
  width: 38cqw !important;
}

/* Pirate windows: adaptable content, without stretching the frame art. */
html body .modal-back.pirate-dialog-back,
html body.land .modal-back.pirate-dialog-back {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100dvh !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 8px !important;
  box-sizing: border-box !important;
  z-index: 100 !important;
  pointer-events: auto !important;
}
html body .pirate-dialog {
  position: relative;
  box-sizing: border-box;
  width: min(92vw, 430px, 110vh);
  max-height: calc(100dvh - 16px);
  padding: clamp(7px, 1.6vh, 13px);
  border: 3px solid #ffca50;
  border-radius: 26px;
  background: linear-gradient(135deg, #27eced, #087caa 28%, #102a78 70%, #21c7d4);
  box-shadow:
    inset 0 0 0 3px #0d527d,
    0 5px 0 #8f5514,
    0 12px 26px #090d3c99;
  color: #123b70;
  font-size: clamp(13px, 2.3vh, 19px);
}
.pirate-dialog-header {
  position: relative;
  height: clamp(48px, 10vh, 75px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 23%;
  box-sizing: border-box;
}
.pirate-dialog-header h2 {
  margin: 0;
  color: #fff;
  font-size: clamp(20px, 4vh, 31px);
  line-height: 1;
  text-align: center;
  text-shadow: 0 2px #10265e;
}
.pirate-dialog-mascot {
  position: absolute;
  z-index: 2;
  top: clamp(4px, 1vh, 8px);
  left: clamp(12px, 3vw, 24px);
  width: clamp(45px, 9vh, 70px);
  height: clamp(45px, 9vh, 70px);
  object-fit: contain;
}
.pirate-dialog-close {
  position: absolute;
  z-index: 3;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: clamp(36px, 7vh, 48px);
  height: clamp(36px, 7vh, 48px);
  padding: 0;
  border: 2px solid #ffcb50;
  border-radius: 50%;
  background: linear-gradient(#59f1fa, #0878c0 55%, #163477);
  color: white;
  font: bold clamp(25px, 5vh, 35px) / 1 sans-serif;
  box-shadow: 0 3px 0 #61401d;
  cursor: pointer;
}
.pirate-dialog-content {
  display: flex;
  flex-direction: column;
  gap: clamp(6px, 1.3vh, 10px);
  padding: clamp(9px, 2vh, 16px);
  border: 2px solid #d5ac69;
  border-radius: 19px;
  background: linear-gradient(150deg, #fff8e9, #e6f8ff);
  box-sizing: border-box;
}
.pirate-action-list,
.pirate-volume-list {
  display: flex;
  flex-direction: column;
  gap: clamp(6px, 1.2vh, 10px);
}
html body .pirate-action {
  width: 100%;
  min-height: clamp(37px, 8vh, 56px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 4px 12px;
  box-sizing: border-box;
  border: 2px solid #f6bf46;
  border-radius: 999px;
  background: linear-gradient(#83f9ff, #12c5e8 18%, #087ebd 51%, #1353a5 52%, #102f78);
  box-shadow:
    inset 0 2px 2px #fff8,
    0 3px 0 #ac722a;
  color: #fff;
  font: inherit;
  font-weight: 900;
  text-shadow: 0 2px #173a70;
  cursor: pointer;
}
.pirate-action .bi {
  width: clamp(24px, 5vh, 36px);
  height: clamp(24px, 5vh, 36px);
  flex: 0 0 auto;
  object-fit: contain;
}
.pirate-action:active,
.pirate-dialog-close:active {
  filter: brightness(0.9);
}
.pirate-volume {
  display: grid;
  grid-template-columns: minmax(72px, auto) minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-height: clamp(40px, 8vh, 55px);
  padding: 5px 12px;
  box-sizing: border-box;
  border: 1px solid #8ccbdd;
  border-radius: 15px;
  background: #e2f7ff;
  color: #143e70;
  font-weight: 900;
}
.pirate-volume input {
  appearance: none;
  width: 100%;
  height: 12px;
  margin: 0;
  border: 2px solid #4389b0;
  border-radius: 99px;
  background: linear-gradient(to right, #20cae5 var(--p), #b4d8e5 var(--p));
  cursor: pointer;
}
.pirate-volume input::-webkit-slider-thumb {
  appearance: none;
  width: 24px;
  height: 24px;
  border: 2px solid #24639b;
  border-radius: 50%;
  background: linear-gradient(#fff39a, #ffbf34);
}
.pirate-volume input::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border: 2px solid #24639b;
  border-radius: 50%;
  background: linear-gradient(#fff39a, #ffbf34);
}
.pirate-preferences {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
}
.pirate-language,
.pirate-vibration {
  min-width: 0;
  min-height: clamp(42px, 8vh, 56px);
  padding: 5px 8px;
  box-sizing: border-box;
  border: 1px solid #8ccbdd;
  border-radius: 12px;
  background: #e2f7ff;
  color: #143e70;
  font: inherit;
  font-weight: 900;
}
.pirate-language {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
}
.pirate-language span {
  font-size: 0.7em;
}
.pirate-language select {
  width: 100%;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #143e70;
  font: inherit;
  font-size: 0.83em;
}
.pirate-vibration {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  cursor: pointer;
  font-size: 0.85em;
}
.pirate-vibration i {
  position: relative;
  flex: 0 0 37px;
  width: 37px;
  height: 20px;
  border: 2px solid #3d83ac;
  border-radius: 20px;
  background: #9db9c8;
}
.pirate-vibration i::after {
  content: '';
  position: absolute;
  left: 1px;
  top: 1px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: white;
  box-shadow: 0 1px 3px #284a69;
  transition: transform 0.15s;
}
.pirate-vibration.on i {
  background: #0ab6d5;
}
.pirate-vibration.on i::after {
  transform: translateX(17px);
}
html body .map-art .stop b,
html body .map-art .stop.cur b {
  top: 46% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  text-align: center;
}
html body .mascot {
  background: radial-gradient(ellipse 31% 3.5% at 50% 88%, #14234880, transparent 100%) no-repeat !important;
}

/* Play button: pirate panel finish, with a response to touch. */
html body.s-home .home .btn.big.home-launch {
  --launch-rise: 2px;
  --launch-press: 3px;
  --launch-time: 140ms;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.24em !important;
  overflow: hidden;
  isolation: isolate;
  padding: 0 8% !important;
  border: max(3px, 0.42vh) solid #f2ae32 !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, #80ecf4 0%, #38d2e0 11%, #09a5c1 13%, #087997 51%, #08627f 52%, #06435f 100%) !important;
  box-shadow:
    inset 0 2px 0 #fff9,
    inset 0 -5px 0 #05314f,
    inset 0 0 0 3px #b9f9ed77,
    0 4px 0 #925412,
    0 8px 12px #10143d88 !important;
  color: #fff !important;
  font-size: clamp(20px, 5vh, 54px) !important;
  -webkit-text-stroke: 0.045em #103763 !important;
  paint-order: stroke fill;
  text-shadow:
    0 2px 0 #103763,
    0 4px 0 #052c4a !important;
  animation: none !important;
  transition:
    translate var(--launch-time) ease,
    filter var(--launch-time) ease,
    box-shadow var(--launch-time) ease;
  cursor: pointer;
  touch-action: manipulation;
}
html body.s-home .home .btn.big.home-launch::before {
  content: '' !important;
  display: block !important;
  position: absolute;
  pointer-events: none;
  z-index: -1;
  inset: 9% 5% 52% 5%;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffffff77, #ffffff08);
  opacity: 0.65;
}
html body.s-home .home .btn.big.home-launch::after {
  content: '' !important;
  display: block !important;
  position: absolute;
  pointer-events: none;
  right: 6%;
  top: 17%;
  width: 0.22em;
  height: 0.22em;
  background: #fff8cf;
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  filter: drop-shadow(0 0 4px #fff8a0);
  animation: launch-spark 3s ease-in-out infinite;
}
.home-launch-label {
  min-width: 0;
  max-width: 75%;
  position: relative;
  white-space: nowrap;
}
.home-launch-icon {
  position: relative;
  flex: 0 0 0.86em;
  width: 0.86em;
  height: 0.86em;
  border: 0.045em solid #f6c44d;
  border-radius: 50%;
  box-sizing: border-box;
  background: radial-gradient(circle at 35% 22%, #8dfbff, #08a6bc 45%, #07517d 100%);
  box-shadow:
    inset 0 1px 1px #fff9,
    0 2px 0 #093956;
}
.home-launch-icon::after {
  content: '';
  position: absolute;
  left: 39%;
  top: 25%;
  width: 35%;
  height: 50%;
  background: #fff9dc;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  filter: drop-shadow(1px 1px 0 #063a63);
}
@keyframes launch-spark {
  0%,
  75%,
  100% {
    opacity: 0.45;
    scale: 0.8;
  }
  83% {
    opacity: 1;
    scale: 1.18;
  }
}
@media (hover: hover) {
  html body.s-home .home .btn.big.home-launch:hover {
    translate: 0 calc(-1 * var(--launch-rise));
    filter: brightness(1.08);
  }
}
html body.s-home .home .btn.big.home-launch:active {
  translate: 0 var(--launch-press);
  filter: brightness(0.96);
  box-shadow:
    inset 0 2px 0 #fff8,
    inset 0 -2px 0 #05314f,
    0 1px 0 #925412 !important;
}
html body.s-home .home .btn.big.home-launch:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 4px;
}
@media (prefers-reduced-motion: reduce) {
  html body.s-home .home .btn.big.home-launch,
  html body.s-home .home .btn.big.home-launch::after {
    animation: none !important;
    transition: none !important;
  }
}

/* Light frame, mascot above the title and pirate buttons. */
html body .pirate-dialog {
  width: min(92vw, 460px, 116vh);
  padding: clamp(7px, 1.5vh, 12px);
  border: 3px solid #de9a27;
  border-radius: 26px;
  background: linear-gradient(145deg, #fff6e1, #ffedcd 65%, #ffe1ae);
  box-shadow:
    inset 0 0 0 3px #ffcf74,
    inset 0 -5px 0 #e7ae61,
    0 5px 0 #744519,
    0 12px 24px #090d3c99;
  color: #152d61;
  font-size: clamp(13px, 2.5vh, 19px);
}
html body .pirate-dialog-header {
  height: clamp(72px, 19vh, 130px);
  align-items: end;
  padding: 0 13% 1px;
}
html body .pirate-dialog-header h2 {
  position: relative;
  z-index: 3;
  width: 100%;
  box-sizing: border-box;
  padding: 0.18em 0.8em;
  border: 3px solid #e6aa42;
  border-radius: 999px;
  background: linear-gradient(#fff6df, #ffe9b9);
  box-shadow:
    inset 0 2px #fff,
    0 3px 0 #996024;
  color: #102c62;
  text-shadow: 0 1px #fff;
  font-size: clamp(20px, 4vh, 30px);
  white-space: nowrap;
}
html body .pirate-dialog-mascot {
  z-index: 2;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: clamp(100px, 26vh, 186px);
  height: clamp(65px, 15vh, 110px);
  object-fit: contain;
}
html body .pirate-dialog-close {
  z-index: 5;
  right: 0;
  top: 65%;
  width: clamp(32px, 6vh, 42px);
  height: clamp(32px, 6vh, 42px);
  font-size: clamp(22px, 4.5vh, 31px);
}
html body .pirate-dialog-content {
  padding: clamp(8px, 1.8vh, 14px) clamp(8px, 2.2vh, 16px);
  border: 0;
  background: none;
  gap: clamp(6px, 1.4vh, 10px);
}
html body .pirate-action,
html body.s-home .home .btn.big.home-launch {
  background: none center / 110.7% 108.8% no-repeat !important;
  border: 0 !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  color: #fff !important;
  text-shadow:
    0 2px 0 #104078,
    0 3px 2px #002f6b !important;
  -webkit-text-stroke: 0.025em #164077 !important;
  paint-order: stroke fill;
}
html body .pirate-action {
  min-height: clamp(39px, 8.5vh, 62px);
  gap: 0.35em;
  font-size: clamp(16px, 3vh, 23px);
}
html body .pirate-action:active,
html body.s-home .home .btn.big.home-launch:active {
  translate: 0 3px;
  filter: brightness(0.96);
  box-shadow: none !important;
}
html body .pirate-action .pirate-icon {
  width: 1.25em;
  height: 1.25em;
  flex: 0 0 1.25em;
  color: #fff7d8;
  filter: drop-shadow(0 2px 1px #305189);
}
html body .pirate-action[data-action='restart'],
html body .pirate-action[data-action='map'] {
  background: linear-gradient(#fff6df, #ffe1ac) !important;
  border: 2px solid #b77b35 !important;
  box-shadow:
    inset 0 2px #fff,
    0 2px 0 #a86b28 !important;
  color: #123e70 !important;
  -webkit-text-stroke: 0 !important;
  text-shadow: none !important;
}
html body .pirate-action[data-action='restart'] .pirate-icon,
html body .pirate-action[data-action='map'] .pirate-icon {
  color: #1475a2;
  filter: none;
}
html body .pirate-volume {
  grid-template-columns: 1.4em minmax(60px, auto) minmax(0, 1fr);
  gap: 7px;
  min-height: clamp(38px, 7.5vh, 54px);
  border: 2px solid #bc803b;
  border-radius: 999px;
  background: linear-gradient(#fff7e5, #ffe2b0);
  box-shadow:
    inset 0 2px #fff,
    0 2px 0 #a76b29;
}
html body .pirate-volume .pirate-icon {
  width: 1.3em;
  height: 1.3em;
  color: #d79014;
}
html body .pirate-language,
html body .pirate-vibration {
  background: #fff9ed;
  border: 2px solid #d0a46e;
}
html body .pirate-language select {
  background-color: transparent !important;
}
html body.s-home .home .btn.big.home-launch::before,
html body.s-home .home .btn.big.home-launch::after {
  display: none !important;
}
html body.s-home .home .btn.big.home-launch .home-launch-icon {
  border: 0;
  box-shadow: none;
  background: none;
  width: 0.8em;
  height: 0.8em;
}
html body.s-home .home .btn.big.home-launch .home-launch-icon::after {
  left: 17%;
  top: 7%;
  width: 70%;
  height: 86%;
  background: #fff8e5;
  filter: drop-shadow(0 2px 1px #18437e);
}
@media (max-height: 440px) {
  html body .pirate-dialog-header {
    height: 50px;
  }
  html body .pirate-dialog-mascot {
    width: 85px;
    height: 48px;
  }
  html body .pirate-dialog-content {
    gap: 4px;
    padding: 5px 10px;
  }
  html body .pirate-action-list,
  html body .pirate-volume-list {
    gap: 4px;
  }
  html body .pirate-action {
    min-height: 32px;
  }
  html body .pirate-volume {
    min-height: 33px;
  }
  html body .pirate-language,
  html body .pirate-vibration {
    min-height: 34px;
  }
}
html body .pirate-action[data-action='close'],
html body .pirate-action[data-action='continue'] {
  aspect-ratio: 3.9 / 1;
  height: auto;
  min-height: 0;
  font-size: clamp(18px, 3.8vh, 28px);
}
html body .pirate-action[data-action='restart'],
html body .pirate-action[data-action='map'] {
  aspect-ratio: auto;
}
@media (max-height: 440px) {
  html body .pirate-action[data-action='close'],
  html body .pirate-action[data-action='continue'] {
    aspect-ratio: auto;
    height: 46px;
  }
}
html body .modal.win .row .btn.go,
html body .modal.lose .row .btn.go,
html body .modal.lose .row .btn.yellow {
  background: none center / 110.7% 108.8% no-repeat !important;
  border: 0 !important;
  box-shadow: none !important;
  color: #fff !important;
}
@media (max-height: 440px) {
  html body .pirate-dialog-header {
    height: 66px;
  }
  html body .pirate-dialog-mascot {
    width: 110px;
    height: 62px;
  }
  html body .pirate-action[data-action='close'],
  html body .pirate-action[data-action='continue'] {
    width: min(100%, 205px);
    height: 52px;
    align-self: center;
  }
}

html body .pirate-dialog {
  container-type: size;
  position: relative;
  width: min(92vw, 84vh, 600px);
  height: auto;
  aspect-ratio: 1194 / 1280;
  max-height: none;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none center / 100% 100% no-repeat;
  box-shadow: none;
  font-size: 4cqw;
  color: #162e5c;
}
html body .pirate-dialog-header {
  position: absolute;
  top: 12%;
  left: 10%;
  width: 80%;
  height: 12%;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
html body .pirate-dialog-header h2 {
  position: relative;
  z-index: 3;
  width: auto;
  max-width: 60%;
  padding: 0;
  margin: 0;
  border: 0;
  background: none;
  box-shadow: none;
  color: white;
  font-size: 7cqw;
  line-height: 1;
  text-shadow:
    0 2px 1px #11235d,
    0 4px 2px #06133a;
  white-space: nowrap;
}
html body .pirate-dialog-mascot {
  position: absolute;
  z-index: 2;
  left: 0;
  top: -8%;
  transform: none;
  width: 27%;
  height: 115%;
  object-fit: contain;
  object-position: center bottom;
}
html body .pirate-dialog-close {
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 12%;
  height: auto;
  aspect-ratio: 1;
  padding: 0;
  border: 3px solid #ffc452;
  border-radius: 25%;
  background: linear-gradient(#45e3ed, #0585c4 55%, #075593);
  box-shadow:
    0 3px 0 #9b5e17,
    inset 0 2px 1px #fff9;
  font-size: 8cqw;
  line-height: 1;
}
html body .pirate-dialog-content {
  position: absolute;
  top: 27%;
  bottom: 12%;
  left: 12%;
  right: 12%;
  padding: 0;
  border: 0;
  display: flex;
  flex-direction: column;
  gap: 2.2%;
  background: none;
}
html body .pirate-action-list,
html body .pirate-volume-list {
  display: flex;
  flex-direction: column;
  flex: 2.8 1 0;
  min-height: 0;
  gap: 2%;
}
html body .pirate-volume-list {
  flex: 2 1 0;
  gap: 6%;
}
html body .pirate-action,
html body .pirate-action[data-action='close'],
html body .pirate-action[data-action='continue'],
html body .pirate-action[data-action='restart'],
html body .pirate-action[data-action='map'] {
  display: flex;
  flex: 1 1 0;
  width: 100%;
  height: auto;
  min-height: 0;
  aspect-ratio: auto;
  align-self: stretch;
  align-items: center;
  justify-content: center;
  gap: 3%;
  padding: 0 6%;
  border: 0 !important;
  border-radius: 0 !important;
  background: none center / 105% 138% no-repeat !important;
  box-shadow: none !important;
  color: #fff !important;
  -webkit-text-stroke: 0 !important;
  font-size: 5.5cqw;
  line-height: 1;
  text-shadow:
    0 2px 1px #112964,
    0 3px 2px #080d34 !important;
}
html body .pirate-action[data-action='continue'] {
  background-image: none !important;
}
html body .pirate-action .pirate-icon,
html body .pirate-action[data-action='restart'] .pirate-icon,
html body .pirate-action[data-action='map'] .pirate-icon {
  width: 1.1em;
  height: 1.1em;
  flex: 0 0 1.1em;
  color: #fff7e5;
  filter: drop-shadow(0 2px 1px #35245b);
}
html body .pirate-action span {
  border-left: 1px solid #fff9;
  padding-left: 5%;
  min-width: 0;
  white-space: nowrap;
}
html body .pirate-volume {
  flex: 1 1 0;
  min-height: 0;
  grid-template-columns: minmax(0, 31%) minmax(0, 1fr);
  gap: 2%;
  padding: 2% 4%;
  border: 1px solid #ddad7c;
  border-radius: 18px;
  background: linear-gradient(#fff5e4, #ffe3be);
  box-shadow: inset 0 1px #fff8;
  font-size: 4.3cqw;
  color: #182e5c;
}
html body .pirate-volume input {
  height: max(7px, 2cqw);
  border: 2px solid #2e7298;
  background: linear-gradient(to right, #06c5da var(--p), #b9c7d5 var(--p));
}
html body .pirate-volume input::-webkit-slider-thumb {
  width: max(16px, 6cqw);
  height: max(16px, 6cqw);
  border-color: #ae6e19;
  background: linear-gradient(#ffeb83, #f6a61c);
}
html body .pirate-volume input::-moz-range-thumb {
  width: max(14px, 5.5cqw);
  height: max(14px, 5.5cqw);
  border-color: #ae6e19;
  background: linear-gradient(#ffeb83, #f6a61c);
}
html body .pirate-preferences {
  flex: 1.18 1 0;
  min-height: 0;
  grid-template-columns: 1.05fr 1fr;
  gap: 0;
  align-items: center;
  padding: 2% 4%;
  border: 1px solid #ddad7c;
  border-radius: 18px;
  background: linear-gradient(#fff5e5, #ffe4c3);
}
html body .pirate-language,
html body .pirate-vibration {
  min-height: 0;
  height: 100%;
  padding: 2%;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-size: 3.4cqw;
}
html body .pirate-language {
  padding-right: 8%;
  border-right: 1px solid #d6ae8e;
}
html body .pirate-language span {
  font-size: 0.8em;
}
html body .pirate-language select {
  max-width: none;
  height: 55%;
  padding: 0 1.2em 0 0.4em !important;
  border: 1px solid #c99c7b;
  border-radius: 9px;
  background-color: #fff8ed !important;
  font-size: 0.95em;
}
html body .pirate-vibration {
  padding-left: 8%;
  gap: 4px;
}
html body .pirate-vibration i {
  flex: 0 0 30%;
  width: 30%;
  height: min(42%, 24px);
  min-height: 14px;
}
html body .pirate-vibration i::after {
  top: 1px;
  left: 1px;
  width: auto;
  height: calc(100% - 2px);
  aspect-ratio: 1;
}
html body .pirate-vibration.on i::after {
  transform: translateX(calc(100% - 1px));
}
html body .pirate-dialog.settings .pirate-action[data-action='close'] {
  flex: 1.05 1 0;
}
@media (max-height: 440px) {
  html body .pirate-dialog-header {
    height: 12%;
  }
  html body .pirate-dialog-mascot {
    width: 27%;
    height: 115%;
  }
}
/* Keep the proportion of the button art inside the frame. */
html body .pirate-dialog .pirate-action,
html body .pirate-dialog .pirate-action[data-action] {
  width: 88%;
  align-self: center;
  background-size: 105% 138% !important;
}
html body .pirate-dialog.pause .pirate-action-list {
  flex: 3.25 1 0;
}
html body .pirate-dialog.pause .pirate-preferences {
  flex: 0.85 1 0;
}
html body .pirate-dialog-header .pirate-dialog-mascot {
  top: -21%;
  width: 31%;
  height: 140%;
}
html body .pirate-dialog .pirate-action .pirate-icon {
  width: 1.4em;
  height: 1.4em;
  flex-basis: 1.4em;
  stroke-width: 2.8px;
}
/* The same scale on both axes keeps the ends and the relief of the button art. */
html body .pirate-dialog .pirate-action,
html body .pirate-dialog .pirate-action[data-action] {
  background-size: auto 145% !important;
}
html body .pirate-dialog .pirate-action,
html body .pirate-dialog .pirate-action[data-action] {
  width: 84%;
  background-size: auto 130% !important;
}
html body .pirate-dialog-header .pirate-dialog-mascot {
  top: -27%;
  width: 34%;
  height: 155%;
}
/* Fine tuning of the labels and of the switch states. */
html body .pirate-dialog .pirate-action span {
  position: relative;
  top: -5px;
}
html body .pirate-vibration i::after {
  left: 1px;
  right: auto;
  transform: none;
}
html body .pirate-vibration.on i::after {
  left: auto;
  right: 1px;
  transform: none;
}
/* In-game pirate plaques, with numbers and translations independent of the art. */
html body .game-hud .pill,
html body.land .game-hud .pill {
  box-sizing: border-box !important;
  border: 0 !important;
  border-image: none !important;
  border-radius: 0 !important;
  background: none center / 100% 100% no-repeat !important;
  box-shadow: none !important;
  color: #fff !important;
}
html body .game-hud .pill.level .lvw,
html body.land .game-hud .pill.level .lvw,
html body .game-hud .coins b,
html body.land .game-hud .coins b {
  color: #fff !important;
  -webkit-text-stroke: 0 !important;
  text-shadow:
    0 2px 2px #061543,
    0 3px 1px #061543 !important;
}
html body .game-hud .pill.level b,
html body.land .game-hud .pill.level b {
  color: #ffd663 !important;
  -webkit-text-stroke: 0 !important;
  text-shadow: 0 2px 2px #5b3700 !important;
}
html body.land .game-hud .coins,
html body:not(.land) .game-hud .coins {
  padding: 0 !important;
  justify-content: center !important;
  gap: 0.15em !important;
}
html body.land .game-hud .coins i,
html body:not(.land) .game-hud .coins i {
  margin: 0 !important;
}
html body.land .game-hud .coins b,
html body:not(.land) .game-hud .coins b {
  margin: 0 !important;
  padding: 0 !important;
  flex: 0 1 auto !important;
  min-width: 0 !important;
  font-size: clamp(15px, 3.5vh, 30px) !important;
}
html body.land:not(.s-home) .topbar.game-hud .pill.coins b,
html body:not(.land) .topbar.game-hud .pill.coins b {
  margin: 0 !important;
  padding: 0 !important;
  flex: 0 1 auto !important;
  min-width: 0 !important;
}
html body:not(.land) .game-hud .pill.level {
  gap: 2px !important;
}
html body:not(.land) .game-hud .pill.level .lvw {
  font-size: min(1.6vh, 3.4vw) !important;
  margin: 0 !important;
}
html body:not(.land) .game-hud .pill.level b {
  font-size: min(2.5vh, 5vw) !important;
}

/* Subtle life on the map, without moving the platform or getting in the way of taps. */
.map-ambience {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.map-particle {
  position: absolute;
  left: var(--x);
  top: -8px;
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  background: radial-gradient(circle, #fffef0 0%, #fff5bf 32%, #fff4a700 75%);
  opacity: 0;
  animation: map-particle-fall var(--d) linear var(--delay) infinite;
}
.map-art {
  z-index: 1;
}
@keyframes map-particle-fall {
  0% {
    transform: translate(0, 0);
    opacity: 0;
  }
  10%,
  80% {
    opacity: 0.8;
  }
  100% {
    transform: translate(var(--drift), 105vh);
    opacity: 0;
  }
}
@keyframes map-mascot-hop {
  0%,
  72%,
  100% {
    translate: 0 0;
  }
  79% {
    translate: 0 -6%;
  }
  86% {
    translate: 0 0;
  }
  89% {
    translate: 0 -1%;
  }
  93% {
    translate: 0 0;
  }
}
.map-mascot {
  animation: map-mascot-hop 4.4s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .map-ambience {
    display: none;
  }
  .map-mascot {
    animation: none;
  }
}
/* On phones, the two plaques have the same size and share the axis of the buttons. */
@media (orientation: portrait) {
  html body:not(.land) .topbar.game-hud .pill.level,
  html body:not(.land) .topbar.game-hud .pill.coins {
    top: calc(var(--sat) + 1.4vh + (max(44px, calc(13 * var(--pu) / 100)) - 5vh) / 2) !important;
    margin-top: 0 !important;
    width: calc(25 * var(--pu) / 100) !important;
  }
  html body:not(.land) .topbar.game-hud .pill.level {
    left: calc(var(--px) + 3 * var(--pw) / 100) !important;
  }
  html body:not(.land) .topbar.game-hud .pill.coins {
    left: calc(var(--px) + 29 * var(--pw) / 100) !important;
  }
  html body:not(.land) .topbar.game-hud .snd-btn {
    left: calc(var(--px) + 66 * var(--pw) / 100) !important;
  }
}
/* Numbers of locked levels: readable white on the grey stone. */
html body .map-art .stop.locked b {
  color: #fff !important;
  -webkit-text-stroke: 1px #17355c !important;
  paint-order: stroke fill;
  text-shadow: 0 2px 2px #17355c;
}

/* Mahjong Treasure Quest: artwork is kept separate from the interactive controls. */
body[data-world='0'] {
  --wf: url(../assets/treasure/portrait-0.png);
  --wfl: url(../assets/treasure/world-0.png);
  --wflu: var(--wfl);
  --wmd: var(--wfl);
  --wmu: var(--wfl);
  --map-approved: var(--wfl);
  --map-approved-portrait: var(--wf);
  --wm: var(--wf);
  --wma: var(--wf);
  --wmpa: var(--wf);
  --wmpu: var(--wf);
}
body[data-world='1'] {
  --wf: url(../assets/treasure/portrait-1.png);
  --wfl: url(../assets/treasure/world-1.png);
  --wflu: var(--wfl);
  --wmd: var(--wfl);
  --wmu: var(--wfl);
  --map-approved: var(--wfl);
  --map-approved-portrait: var(--wf);
  --wm: var(--wf);
  --wma: var(--wf);
  --wmpa: var(--wf);
  --wmpu: var(--wf);
}
body[data-world='2'] {
  --wf: url(../assets/treasure/portrait-2.png);
  --wfl: url(../assets/treasure/world-2.png);
  --wflu: var(--wfl);
  --wmd: var(--wfl);
  --wmu: var(--wfl);
  --map-approved: var(--wfl);
  --map-approved-portrait: var(--wf);
  --wm: var(--wf);
  --wma: var(--wf);
  --wmpa: var(--wf);
  --wmpu: var(--wf);
}
body[data-world='3'] {
  --wf: url(../assets/treasure/portrait-3.png);
  --wfl: url(../assets/treasure/world-3.png);
  --wflu: var(--wfl);
  --wmd: var(--wfl);
  --wmu: var(--wfl);
  --map-approved: var(--wfl);
  --map-approved-portrait: var(--wf);
  --wm: var(--wf);
  --wma: var(--wf);
  --wmpa: var(--wf);
  --wmpu: var(--wf);
}
html body.land.s-home::before {
  background-image: url(../assets/treasure/world-0.png) !important;
}
html body:not(.land).s-home {
  background-image: url(../assets/treasure/portrait-0.png) !important;
}
html body .map-art .stop {
  background-image: url(../assets/treasure/level-open.png) !important;
  background-size: 118% 118% !important;
}
html body .map-art .stop.locked {
  background-image: url(../assets/treasure/level-locked.png) !important;
}
html body .map-art .stop b {
  color: #563013;
  -webkit-text-stroke: 0;
  text-shadow: 0 1px #fff7;
}
html body .map-art .stop.locked b {
  color: white !important;
  -webkit-text-stroke: 1px #493529 !important;
  text-shadow: 0 2px 2px #30251e;
}
.pirate-route .route-line {
  stroke: #ffdf91;
  stroke-dasharray: 1 12;
  stroke-linecap: round;
}
.pirate-route .route-glow {
  stroke: #85481e;
  opacity: 0.45;
  stroke-dasharray: 1 12;
  stroke-linecap: round;
}
.map-mascot-shadow {
  background: radial-gradient(ellipse, #43342288, transparent 70%) !important;
}
html body .pirate-dialog {
  background-image: url(../assets/treasure/panel.png) !important;
}
html body .pirate-dialog-header {
  top: 15%;
  height: 12%;
}
html body .pirate-dialog-content {
  top: 31%;
  bottom: 14%;
}
html body .pirate-dialog .pirate-action,
html body .pirate-dialog .pirate-action[data-action] {
  background-image: url(../assets/treasure/button.png) !important;
  background-size: 100% 160% !important;
}
html body.s-home .home .btn.big.home-launch,
html body:not(.land).s-home .home .btn.big {
  background: url(../assets/treasure/button.png) center / 100% 180% no-repeat !important;
}
/* The art is 3:1: do not crop it or size the padding from the ultra-wide width. */
html body.land.s-home .home .btn.big.home-launch {
  left: 0 !important;
  right: 0 !important;
  margin: 0 auto !important;
  width: min(49.5vh, 480px, 86vw) !important;
  height: auto !important;
  aspect-ratio: 3 / 1 !important;
  padding: 0 !important;
  box-sizing: border-box;
  overflow: visible;
  border-radius: 0 !important;
  background-size: contain !important;
  font-size: clamp(20px, 4.4vh, 43px) !important;
}
html body .modal.win::before,
html body .modal.lose::before {
  background: url(../assets/treasure/panel.png) center / 100% 100% no-repeat !important;
}
html body .modal.win .row .btn.go,
html body .modal.lose .row .btn.go,
html body .modal.lose .row .btn.yellow {
  background: url(../assets/treasure/button.png) center / 100% 170% no-repeat !important;
}
html body .modal.win .w-flor,
html body .modal.win .w-brilho-t,
html body .modal.win .w-brilho-e {
  display: none !important;
}
html body .topbar.game-hud .pill {
  background: linear-gradient(#16b9bd, #047480 57%, #045260) !important;
  border: 3px solid #f2b33e !important;
  border-radius: 999px !important;
  box-shadow:
    inset 0 2px #fff8,
    0 3px 0 #9c591b !important;
}
html body .map-art .stop {
  background-size: 100% 100% !important;
}
html body .pirate-dialog .pirate-action span {
  top: -2px;
}
html body .coins i,
html body .earn i {
  background: url(../assets/treasure/coin.png) center / contain no-repeat !important;
}
html body .modal.lose .mini-tray {
  background: url(../assets/treasure/tray.png) center / 100% 100% no-repeat !important;
}
html body .modal.win .ribbon,
html body .modal.lose .ribbon {
  box-sizing: border-box !important;
  border: 3px solid #e7a836 !important;
  border-radius: 999px !important;
  background: linear-gradient(#15a9a9, #076d75 55%, #044c58) !important;
  box-shadow:
    inset 0 2px #fff8,
    0 3px 0 #874719 !important;
}
html body .modal.win .ribbon span,
html body .modal.lose .ribbon span {
  color: #fff !important;
  text-shadow: 0 2px 1px #57391b;
  -webkit-text-stroke: 0 !important;
}
html body .modal.lose .mini-tray i {
  background-color: #fff0d2 !important;
  border: 1px solid #9e6b37 !important;
}
html body .modal.lose .mini-tray i.pair {
  background-color: #fff1b8 !important;
}
.map-sign {
  display: none !important;
}

/* Pirate frames of the result screens, with real controls on top of the art. */
html body #ui .treasure-result-back {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100dvh !important;
  transform: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 100 !important;
  pointer-events: auto !important;
}
html body #ui .treasure-result {
  position: relative !important;
  inset: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  width: min(94vw, 78vh, 760px) !important;
  height: auto !important;
  aspect-ratio: 1.12;
  container-type: inline-size;
  border: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
  background: center / 100% 100% no-repeat !important;
  isolation: isolate;
}
html body #ui .treasure-result.win {
  background-image: url(../assets/treasure/win-frame.png) !important;
  translate: 0 8vh;
}
html body #ui .treasure-result.lose {
  width: min(94vw, 90vh, 800px) !important;
  background-image: url(../assets/treasure/lose-frame.png) !important;
}
html body #ui .treasure-result::before,
html body #ui .treasure-result::after {
  display: none !important;
  content: none !important;
}
html body #ui .treasure-result .result-title {
  position: absolute !important;
  left: 20% !important;
  top: 7% !important;
  width: 60% !important;
  height: 12% !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #fff !important;
  font-size: 8cqw !important;
  line-height: 1 !important;
  text-align: center;
  white-space: nowrap;
  text-shadow:
    0 3px 2px #3e2517,
    0 5px 3px #271912 !important;
  z-index: 3;
}
html body #ui .treasure-result.lose .result-title {
  top: 12% !important;
}
html body #ui .treasure-result .result-mascot {
  position: absolute !important;
  object-fit: contain !important;
  pointer-events: none;
  z-index: 2;
}
html body #ui .treasure-result.win .result-mascot {
  left: 29% !important;
  top: -31% !important;
  width: 42% !important;
  height: 37% !important;
  filter: drop-shadow(0 0 15px #ffd262aa);
}
html body #ui .treasure-result.lose .result-mascot {
  left: 27% !important;
  top: 23% !important;
  width: 46% !important;
  height: 32% !important;
}
html body #ui .treasure-result .result-stars {
  position: absolute !important;
  left: 15% !important;
  top: 24% !important;
  width: 70% !important;
  height: 27% !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 0;
  background: radial-gradient(ellipse, #fff5aacc, transparent 70%);
}
html body #ui .treasure-result .result-stars .star {
  position: relative !important;
  width: 31% !important;
  height: 100% !important;
  object-fit: contain;
  margin: 0 !important;
}
html body #ui .treasure-result .result-stars .star:nth-child(2) {
  width: 35% !important;
  transform: translateY(-5%);
}
html body #ui .treasure-result .result-reward {
  position: absolute !important;
  left: 23%;
  top: 51%;
  width: 55%;
  height: 24%;
  display: flex;
  align-items: center;
  justify-content: center;
}
html body #ui .treasure-result .earn {
  position: static !important;
  margin: 0 !important;
  width: 52% !important;
  height: 40% !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 0.2em;
  color: #fff !important;
  font-size: 6cqw !important;
  text-shadow: 0 2px #5b3118;
  border: 2px solid #b47a43;
  border-radius: 99px;
  background: #88502b !important;
}
html body #ui .treasure-result .earn i {
  width: 1.2em !important;
  height: 1.2em !important;
  flex: none;
}
html body #ui .treasure-result .result-chest {
  width: 45%;
  height: 100%;
  background: url(../assets/treasure/icons-0.png) 100% 0 / 400% 300% no-repeat;
}
html body #ui .treasure-result .result-complete {
  position: absolute !important;
  left: 12%;
  top: 48%;
  width: 76%;
  margin: 0;
  color: #63310f;
  text-align: center;
  font-size: 4.3cqw;
  line-height: 1.1;
}
html body #ui .treasure-result:has(.result-complete) .result-stars {
  top: 22% !important;
  height: 23% !important;
}
html body #ui .treasure-result:has(.result-complete) .result-reward {
  top: 57% !important;
  height: 19% !important;
}
html body #ui .treasure-result .result-actions {
  position: absolute !important;
  left: 13% !important;
  top: 76% !important;
  width: 74% !important;
  height: 14% !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: stretch;
  justify-content: center;
  gap: 3%;
}
html body #ui .treasure-result .result-actions .btn {
  position: relative !important;
  inset: auto !important;
  flex: 1 1 auto !important;
  width: auto !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 5% !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 0.3em;
  border: 0 !important;
  border-image: none !important;
  background: url(../assets/treasure/button.png) center / 100% 170% no-repeat !important;
  box-shadow: none !important;
  color: #fff !important;
  font-size: 6cqw !important;
  line-height: 1;
  text-shadow: 0 2px 2px #15444b;
  white-space: nowrap;
  cursor: pointer;
}
html body #ui .treasure-result .result-actions .lv-btn {
  flex: 0 0 20% !important;
  background: url(../assets/treasure/ui-icons.png) 0 0 / 400% 300% no-repeat !important;
}
html body #ui .treasure-result .result-actions .lv-btn::after {
  display: none !important;
}
html body #ui .treasure-result .result-actions .lv-btn svg {
  display: none;
}
html body #ui .treasure-result .result-actions .bi {
  width: 1.05em !important;
  height: 1.05em !important;
  flex: none;
}
html body #ui .treasure-result .result-actions .bbadge {
  position: absolute !important;
  left: auto !important;
  right: 3% !important;
  top: -10% !important;
  width: 1.1em !important;
  height: 1.1em !important;
  min-width: 0 !important;
  font-size: 0.5em !important;
}
html body #ui .treasure-result .mini-tray {
  position: absolute !important;
  left: 9% !important;
  top: 55% !important;
  width: 82% !important;
  height: 13% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.4% !important;
  padding: 1% 3% !important;
  box-sizing: border-box;
  border: 0 !important;
  background: url(../assets/treasure/tray.png) center / 100% 160% no-repeat !important;
}
html body #ui .treasure-result .mini-tray i {
  position: static !important;
  display: block !important;
  flex: 1 1 0 !important;
  width: auto !important;
  height: 90% !important;
  margin: 0 !important;
  border: 1px solid #c49358 !important;
  border-radius: 13% !important;
  background-color: #fff0d2 !important;
  background-size: 85% !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  box-shadow: none !important;
}
html body #ui .treasure-result .result-lose-text {
  position: absolute !important;
  top: 69%;
  left: 12%;
  width: 76%;
  margin: 0;
  text-align: center;
  font-size: 4.5cqw;
  color: #603313;
}
html body #ui .treasure-result.lose .result-actions {
  top: 76% !important;
  width: 78% !important;
  left: 11% !important;
}
html body #ui .treasure-result.lose .result-actions .btn {
  font-size: 5cqw !important;
}
/* The frame keeps the proportion of its art, with more room for the content. */
html body .pirate-dialog {
  width: min(94vw, 100vh, 710px) !important;
  aspect-ratio: 1.15 !important;
}
html body .pirate-dialog-header h2 {
  text-shadow:
    0 2px 1px #3b2418,
    0 4px 2px #25170f !important;
}
html body .pirate-volume,
html body .pirate-language,
html body .pirate-vibration {
  color: #4c2918 !important;
}
@media (max-height: 500px) {
  html body #ui .treasure-result.win {
    width: min(70vw, 71vh) !important;
    translate: 0 9vh;
  }
  html body #ui .treasure-result.lose {
    width: min(76vw, 91vh) !important;
  }
}
html body #ui .treasure-result-back {
  padding: 0 !important;
}
html body #ui .treasure-result .result-lose-text {
  font-weight: 900 !important;
  color: #63310f !important;
}
html body:has(.treasure-result) .topbar .pill {
  visibility: visible !important;
}
html body.land:has(.treasure-result) .helpers {
  display: block !important;
}
html body:not(.land):has(.treasure-result) .helpers {
  display: flex !important;
}
html body:has(.treasure-result) .mascot {
  display: block !important;
  opacity: 1 !important;
}
html body .pirate-language select {
  color: #4c2918 !important;
}
html body #ui .treasure-result .earn i {
  width: 1.8em !important;
  height: 1.8em !important;
}
html body .pirate-dialog.pause::before,
html body .pirate-dialog.pause::after {
  content: '';
  position: absolute;
  z-index: 4;
  top: 32%;
  width: 11%;
  height: 19%;
  pointer-events: none;
  background: url(../assets/treasure/lantern.png) center / contain no-repeat;
  filter: drop-shadow(0 0 8px #ffb63880);
}
html body .pirate-dialog.pause::before {
  left: 3%;
}
html body .pirate-dialog.pause::after {
  right: 3%;
}
html body #ui .treasure-result .result-complete {
  font-weight: 900 !important;
  font-size: 4.8cqw !important;
}
html body:has(.modal.treasure-result) .topbar .pill {
  visibility: visible !important;
}
@media (min-aspect-ratio: 1/1) and (min-height: 501px) {
  html body .pirate-dialog {
    width: min(94vw, 105vh, 1000px) !important;
  }
  html body #ui .treasure-result.win {
    width: min(94vw, 82vh, 820px) !important;
    translate: 0 5vh;
  }
  html body #ui .treasure-result.win .result-mascot {
    top: -24% !important;
    height: 30% !important;
  }
  html body #ui .treasure-result.lose {
    width: min(94vw, 102vh, 960px) !important;
  }
}
html body #ui .treasure-result.lose .result-actions .btn > svg {
  width: 1.2em !important;
  height: 1.2em !important;
  flex: none;
  stroke: #fff;
  fill: none;
  filter: drop-shadow(0 2px 1px #22525a);
}
html body #ui .treasure-result.lose .result-actions .btn > span:not(.bbadge) {
  border-left: 1px solid #fff9;
  padding-left: 0.3em;
}
html body #ui .treasure-result .result-stars .star.on {
  filter: drop-shadow(0 0 14px #ffe066) !important;
}
@media (min-width: 600px) {
  html body .pirate-dialog-header .pirate-dialog-mascot {
    left: -4%;
    top: -55%;
    width: 44%;
    height: 210%;
  }
  html body #ui .treasure-result.win .result-mascot {
    left: 26% !important;
    width: 48% !important;
    height: 36% !important;
  }
}
html body .pirate-dialog.pause .pirate-action {
  width: 72% !important;
}

/* Tropical leaves on the beach and on the map of the first world. */
#clima.clima-praia .gota,
body[data-world='0'] .map-particle {
  height: calc(var(--s) * 0.65);
  border-radius: 85% 0 85% 0;
  background: linear-gradient(145deg, #c6e967 0%, #72b936 42%, #398c3c 100%);
  box-shadow:
    inset 0 1px 1px #e9fca577,
    0 1px 2px #245c3766;
  filter: none;
  opacity: 0.8;
}
#clima.clima-praia .gota {
  animation-name: brisa-praia;
}
body[data-world='0'] .map-particle {
  width: calc(var(--s) * 3);
  height: calc(var(--s) * 1.95);
  animation-name: brisa-mapa;
}
@keyframes brisa-praia {
  0% {
    translate: 0 0;
    rotate: -35deg;
  }
  50% {
    translate: calc(9vw + var(--b)) 50vh;
    rotate: 95deg;
  }
  100% {
    translate: calc(18vw + var(--b)) 110vh;
    rotate: 260deg;
  }
}
@keyframes brisa-mapa {
  0% {
    transform: translate(0, 0) rotate(-35deg);
    opacity: 0;
  }
  12%,
  82% {
    opacity: 0.8;
  }
  50% {
    transform: translate(calc(9vw + var(--drift)), 50vh) rotate(95deg);
  }
  100% {
    transform: translate(calc(18vw + var(--drift)), 105vh) rotate(260deg);
    opacity: 0;
  }
}
@media (pointer: coarse) {
  #clima.clima-praia .gota:nth-child(n + 9),
  body[data-world='0'] .map-particle:nth-child(n + 9) {
    display: none;
  }
}

/* Bubbles rise slowly in the two underwater worlds. */
#clima.clima-submerso .gota,
body[data-world='1'] .map-particle,
body[data-world='2'] .map-particle {
  box-sizing: border-box;
  border: 1px solid rgba(205, 255, 255, 0.65);
  border-radius: 50%;
  background: radial-gradient(
    circle at 30% 24%,
    rgba(255, 255, 255, 0.8),
    rgba(181, 255, 255, 0.16) 30%,
    rgba(126, 229, 243, 0.08) 65%,
    rgba(205, 255, 255, 0.45)
  );
  box-shadow: inset -1px -1px 2px rgba(158, 245, 255, 0.35);
}
#clima.clima-submerso .gota {
  top: auto;
  bottom: -4vh;
  animation-name: bolha-sobe;
}
body[data-world='1'] .map-particle,
body[data-world='2'] .map-particle {
  top: auto;
  bottom: -4vh;
  width: calc(var(--s) * 2.3);
  height: calc(var(--s) * 2.3);
  animation-name: bolha-mapa;
}
body[data-world='1'] .map-particle:nth-child(n + 11),
body[data-world='2'] .map-particle:nth-child(n + 11) {
  display: none;
}
@keyframes bolha-sobe {
  0% {
    translate: 0 0;
    opacity: 0;
  }
  12%,
  75% {
    opacity: 0.65;
  }
  50% {
    translate: var(--b) -50vh;
  }
  100% {
    translate: calc(var(--b) * -0.5) -105vh;
    opacity: 0;
  }
}
@keyframes bolha-mapa {
  0% {
    transform: translate(0, 0);
    opacity: 0;
  }
  12%,
  75% {
    opacity: 0.65;
  }
  100% {
    transform: translate(var(--drift), -105vh);
    opacity: 0;
  }
}
@media (pointer: coarse) {
  #clima.clima-submerso .gota:nth-child(n + 8),
  body[data-world='1'] .map-particle:nth-child(n + 8),
  body[data-world='2'] .map-particle:nth-child(n + 8) {
    display: none;
  }
}

/* The treasure chest opens with its own sprites and drops a few coins. */
html body #ui .treasure-result .result-chest {
  position: relative;
  background: none;
  overflow: visible;
}
html body #ui .treasure-result .chest-art {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  background: url(../assets/treasure/icons-0.png) 100% 0 / 400% 300% no-repeat;
  transform-origin: 50% 80%;
  animation:
    bau-movimento var(--chest-open-time) ease-out both,
    bau-abre var(--chest-open-time) step-end both;
}
html body #ui .treasure-result .chest-coin {
  position: absolute;
  left: 50%;
  top: 43%;
  z-index: 2;
  width: 17%;
  height: 21%;
  pointer-events: none;
  opacity: 0;
  background: url(../assets/treasure/coin.png) center / contain no-repeat;
  filter: drop-shadow(0 0 3px #ffcf4a);
  animation: bau-moeda var(--chest-burst-time) ease-out var(--delay) both;
}
@keyframes bau-movimento {
  0%,
  100% {
    transform: none;
  }
  18% {
    transform: rotate(-5deg);
  }
  35% {
    transform: rotate(5deg);
  }
  52% {
    transform: rotate(-3deg);
  }
  70% {
    transform: translateY(-5%) scale(1.05);
  }
}
@keyframes bau-abre {
  0% {
    background-position: 100% 50%;
  }
  70%,
  100% {
    background-position: 100% 0;
  }
}
@keyframes bau-moeda {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.3);
  }
  15% {
    opacity: 1;
  }
  75% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(0.85) rotate(35deg);
  }
}
.coins.bump {
  animation: tesouro-placar 0.28s ease-out;
}
@keyframes tesouro-placar {
  0%,
  100% {
    scale: 1;
  }
  45% {
    scale: 1.1;
  }
}
html body #ui .treasure-result.reduced-motion .chest-art {
  animation: none;
}
html body #ui .treasure-result.reduced-motion .chest-coin {
  display: none;
}
@media (prefers-reduced-motion: reduce) {
  .coins.bump {
    animation: none;
  }
  html body #ui .treasure-result .chest-art {
    animation: none;
  }
  html body #ui .treasure-result .chest-coin {
    display: none;
  }
}

/* End of css/04-overrides.css */