/* Coral Quest work in progress: preserve the original screen geometry. */
body.at-home {
  --bgi: url('../assets/coral/home.webp') !important;
}
body.at-cafe {
  --bgi: url('../assets/coral/world-1.webp') !important;
}
html body #cafe-screen .cf-raios,
html body #cafe-screen .cf-moldura {
  display: none !important;
}
html body #cafe-screen .cafe-frame {
  border: 6px solid #0d8795 !important;
  border-radius: 16px !important;
  box-shadow:
    0 0 0 3px #f7d776,
    0 6px 14px #07546799 !important;
}
#home .home-panda {
  content: normal !important;
}
@media (min-width: 900px) and (min-aspect-ratio: 11/10) {
  html body #home .home-panda {
    width: calc(var(--sw) * 0.26) !important;
    left: calc(var(--sx) + var(--sw) * 0.37) !important;
    top: calc(var(--sy) + var(--sh) * 0.265) !important;
    z-index: 2 !important;
  }
  html body #home .home-shadow {
    z-index: 1 !important;
    background: radial-gradient(ellipse, rgba(2, 49, 61, 0.48), rgba(2, 49, 61, 0.18) 55%, transparent 75%) !important;
  }
  html body #home .home-ticks {
    left: calc(var(--sx) + var(--sw) * 0.605) !important;
  }
}
html body.motion-reduced #home .home-panda {
  animation: none !important;
}
html body .btn:not(.ghost):not(.more) {
  background: none !important;
}
html body .btn:not(.ghost):not(.more)::after {
  border: 0 !important;
  border-image: none !important;
  background: url('../assets/coral/button.webp') center / 100% 100% no-repeat !important;
}
/* The original home artwork contained the button; Coral Quest draws it here. */
html body #home #play::after {
  display: block !important;
}
html body #home #play {
  font-size: min(5.8vh, 10vw, 48px) !important;
}
@media (max-height: 500px) and (orientation: landscape) {
  html.phone-land body #pause[data-mode='pause'] .card {
    translate: 0 min(6vh, 24px);
  }
  html.phone-land body #pause:is([data-mode='settings'], [data-mode='sound']) :is(.pause-panda, .pp-tq) {
    display: none;
  }
}
html body #pause .card::after,
html body #panel .card::after,
html body #panel .card.win::after {
  border-image-source: url('../assets/coral/panel.webp') !important;
  border-image-slice: 18% 12% !important;
  background: linear-gradient(145deg, #e9fffa, #b7f1ee) !important;
  border-radius: 20px;
}
html body .boost {
  background: radial-gradient(circle at 50% 35%, #f2fffc, #a6ede9) !important;
  border-color: #056e7d !important;
  box-shadow:
    inset 0 0 0 5px #e3bc5c,
    0 5px 0 #075467 !important;
}
html body #hud .bar,
html body #map .mp-bar {
  background: linear-gradient(#eafffa, #a7e7e2) !important;
  border-color: #086b7a !important;
  box-shadow:
    inset 0 0 0 5px #edc85f,
    0 5px 0 #064b5f99 !important;
}
html body #hud .goals {
  border-color: #087383 !important;
}
body.at-map[data-map-world] {
  --bgi: url('../assets/coral/map-portrait.webp') !important;
}
html body #map .lv-chalk {
  display: none;
}
html body #map .lv.cur {
  background-image: url('../assets/coral/marker-current.webp') !important;
}
html body #map .lv.lock {
  background-image: url('../assets/coral/marker-locked.webp') !important;
}
html body #map .lv.cur::before {
  display: none !important;
}
html body #map .lv.hard::after {
  background-image: var(--coral-hard) !important;
}
html body #map .lv-arrow.prev img {
  transform: none;
}
html body #map .lv-arrow.next img {
  transform: scaleX(-1);
}
@media (min-aspect-ratio: 11/10) {
  body.at-map[data-map-world] {
    --bgi: url('../assets/coral/map-land.webp') !important;
  }
}
.ic-panda {
  background-image: var(--octopus-peek) !important;
}
#home .petals i {
  top: auto;
  bottom: -8%;
  width: clamp(8px, 1.1vmin, 14px);
  border: 1px solid rgba(219, 252, 255, 0.75);
  border-radius: 50%;
  background: radial-gradient(
    circle at 30% 25%,
    rgba(255, 255, 255, 0.88) 0 9%,
    rgba(129, 230, 250, 0.12) 32%,
    rgba(56, 170, 210, 0.25) 100%
  ) !important;
  animation-name: coral-rise;
  opacity: 0.6;
}
@keyframes coral-rise {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(18px, -115vh, 0);
  }
}
body.motion-reduced #home .petals {
  display: none !important;
}
body[data-world]:not(.at-home):not(.at-map):not(.at-cafe) {
  --bgi: url('../assets/coral/world-1.webp') !important;
}
body[data-world='1']:not(.at-home):not(.at-map):not(.at-cafe) {
  --bgi: url('../assets/coral/world-2.webp') !important;
}
body[data-world='2']:not(.at-home):not(.at-map):not(.at-cafe) {
  --bgi: url('../assets/coral/world-3.webp') !important;
}
body[data-world='3']:not(.at-home):not(.at-map):not(.at-cafe) {
  --bgi: url('../assets/coral/world-4.webp') !important;
}
body[data-world='4']:not(.at-home):not(.at-map):not(.at-cafe) {
  --bgi: url('../assets/coral/world-5.webp') !important;
}
body[data-world] #decor,
body[data-world] #frente-mesa,
body[data-world] #frente-cadeira {
  display: none !important;
}

/* Coral Quest UI refresh: straight, scalable controls and marine colors. */
:root {
  --ink: #073f5b;
}
html body .btn:not(.ghost):not(.more) {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 0 0.7em !important;
  line-height: 1 !important;
  background: linear-gradient(180deg, #36e4ec 0%, #08a9d9 46%, #037ac1 50%, #0866ae 100%) !important;
  border: 3px solid #f4d274 !important;
  border-radius: 999px !important;
  box-shadow:
    inset 0 3px 0 #b9ffffaa,
    inset 0 -4px 0 #07579588,
    0 3px 0 #07536c !important;
  color: #fff !important;
  text-shadow:
    0 2px 0 #064c70,
    1px 0 #064c70,
    -1px 0 #064c70,
    0 -1px #064c70 !important;
}
html body .btn:not(.ghost):not(.more)::after,
html body #home #play::after {
  display: none !important;
}
html body #home #play {
  font-size: min(5.2vh, 9vw, 43px) !important;
}
html body #pause #pause-resume {
  width: 72% !important;
  left: 14% !important;
  height: 12% !important;
  font-size: min(calc(var(--ch) * 0.047), 34px) !important;
}
html body #pause .card::after,
html body #panel .card::after,
html body #panel .card.win::after {
  border-image: none !important;
  border: 4px solid #0e8eac !important;
  border-radius: 22px;
  background: linear-gradient(160deg, #e7fffb, #a4f0ed) !important;
  box-shadow:
    inset 0 0 0 3px #ddffff,
    0 7px 0 #07526d88 !important;
}
html body #pause .opt::after,
html body #panel .win .earn::after,
html body #panel .win #cafe-box::after {
  border-image: none !important;
  border: 2px solid #53c8d4 !important;
  border-radius: 15px;
  background: linear-gradient(#eafffc, #b6f0ef) !important;
  box-shadow: inset 0 0 0 2px #fff9;
}
html body #pause .opt {
  color: #084b69 !important;
}
html body #pause .opt.lang span[data-i18n] {
  width: 34% !important;
}
html body #pause .opt.lang select {
  left: 59% !important;
  width: 37% !important;
  max-width: 37% !important;
  padding: 0 1.5em 0 0.5em !important;
  font-size: 0.82em !important;
  border: 2px solid #147a91 !important;
  background-color: #f0fffc !important;
  color: #064c69 !important;
}
html body #pause .opt.vol span[data-i18n] {
  width: 33% !important;
}
html body #pause .opt.vol input[type='range'] {
  left: 59% !important;
  width: 36% !important;
}
html body #pause .opt.vol input[type='range']::-webkit-slider-runnable-track {
  border-color: #147a91;
  background: linear-gradient(90deg, #1fc9d0 var(--v, 80%), #c9e7e7 var(--v, 80%));
}
html body #pause .opt.vol input[type='range']::-webkit-slider-thumb {
  background: #eaffff;
  border-color: #147a91;
}
html body #btn-settings {
  position: relative;
}
html body #btn-settings::before {
  content: '';
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 25%, #5be9e5, #058e9d 65%, #086078);
  border: 2px solid #f3d176;
  box-shadow: 0 2px 0 #07536c;
}
html body #btn-settings img {
  position: relative;
  width: 80% !important;
  height: 80% !important;
  object-fit: contain;
}
html body #map .lv.cur b {
  font-size: min(calc(var(--mh) * 0.022), calc(var(--sh) * 0.034)) !important;
  inset: 14% 0 0 !important;
  text-shadow:
    1px 1px 0 #07536c,
    -1px -1px 0 #07536c !important;
}
html body #map .lv-title,
html body #map .lv-title small {
  color: #075572 !important;
  text-shadow: none !important;
}
html body #map .mp-cafe,
html body #home .home-cafe {
  background: linear-gradient(#e7fffb, #a8eae9) !important;
  border-color: #08788c !important;
  color: #075572 !important;
}
html body #map .mp-cafe .shop {
  top: 50% !important;
  transform: translateY(-50%) !important;
  height: 85% !important;
}
html body #panel .card.win {
  color: #064965 !important;
  row-gap: calc(var(--u) * 0.045) !important;
}
html body #panel .card.win .earn,
html body #panel .card.win #cafe-box {
  color: #064965 !important;
}
html body #panel .card.win #cafe-box canvas {
  transform: none !important;
  rotate: none !important;
  border-color: #efffff !important;
  box-shadow: 0 0 0 2px #1598ac !important;
}
html body #panel .card.win .cafe-bar {
  background: #c8f4f1 !important;
  border-color: #167d94 !important;
}
html body #panel .card.win .cafe-bar b {
  background: linear-gradient(#68e6e2, #18b0bb) !important;
}
html body #panel .card.win #panel-btn {
  width: 76% !important;
  height: calc(var(--u) * 0.18) !important;
  font-size: calc(var(--u) * 0.075) !important;
}
html body #cafe-screen #cafe-title {
  box-sizing: border-box;
  display: flex !important;
  align-items: center;
  justify-content: center;
  min-height: calc(var(--ch) * 0.09);
  padding: 0.2em 0.7em !important;
  color: #fff !important;
  text-align: center;
  font-size: clamp(16px, 3.5vh, 32px) !important;
  line-height: 1.1;
  background: linear-gradient(#31d9e6, #087cb9) !important;
  border: 3px solid #d7ffff !important;
  border-radius: 999px !important;
  box-shadow: 0 4px 0 #07536c99;
  text-shadow: 0 2px 0 #07536c;
}
html body #cafe-screen #cafe-title::before,
html body #cafe-screen #cafe-title::after {
  display: none !important;
}
html body #cafe-screen .cafe-steps {
  background: linear-gradient(#e9fffc, #a9eeee) !important;
  border-color: #087a94 !important;
  box-shadow:
    inset 0 0 0 3px #eaffff,
    0 5px 0 #07536c88 !important;
}
html body #cafe-screen .cs-badge {
  background: radial-gradient(#e6fffc, #5fd4d8) !important;
  border-color: #0b849a !important;
}
html body #cafe-screen .cs-top b {
  color: #075572 !important;
}
html body #cafe-screen .cs-top span {
  background: linear-gradient(#3fdbdf, #0789aa) !important;
  border-color: #087389 !important;
}
html body #cafe-screen .cs-cups i {
  background: #c5efef;
  border-color: #70c9d0;
}
html body #cafe-screen .cs-cups i.on {
  background: #e8fffd;
  border-color: #19b9c6;
}
html body #cafe-screen #cafe-go {
  font-size: min(calc(var(--ch) * 0.042), 32px) !important;
}
html body #map .lv.cur b {
  font-size: clamp(15px, calc(var(--sh) * 0.035), 30px) !important;
  color: #075572 !important;
  text-shadow: 0 1px 0 #eaffff !important;
}
html body #pause .opt.lang span[data-i18n] {
  width: 37% !important;
}
html body #pause .opt.lang select {
  left: 61% !important;
  width: 35% !important;
  max-width: 35% !important;
}
html body #pause,
html body #panel,
html body #intro {
  background: rgba(2, 44, 67, 0.55) !important;
}
html body.modal:not(.at-cafe) #hud .bar::after {
  background: rgba(2, 44, 67, 0.35) !important;
}
html body .coin-pill,
html body .boost-coins,
html body #home .home-level,
html body #map .lv-chest b {
  color: #075572 !important;
  background: linear-gradient(#eafffc, #b9eeed) !important;
  border-color: #08778b !important;
}
html body #home .home-level::after {
  border-image: none !important;
  background: linear-gradient(#eafffc, #b9eeed);
  border: 2px solid #08778b;
  border-radius: 999px;
}
html body #hud .box,
html body #hud .goal {
  background: #d9faf5 !important;
  border-color: #16849a !important;
  color: #075572 !important;
}
html body #hud .box b,
html body #hud .box small,
html body #hud .goal span {
  color: #075572 !important;
}
html body #hud .box.lv::before,
html body #hud .box.lv::after {
  background: linear-gradient(#5cdee0, #0a96ab) !important;
  border-color: #08758b !important;
}
html body #cafe-screen .cs-badge img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;
}
:root {
  --cream: #e8fffb;
  --caramel: #129ab0;
}
html body {
  background-color: #086a82;
}
html body #panel .lose #panel-text::after {
  border-image: none !important;
  border: 2px solid #54c5d0 !important;
  border-radius: 14px;
  background: #e8fffc !important;
}
html body #panel .lose #panel-text .earn {
  border-color: #69cbd2 !important;
  color: #075572 !important;
}
html body #panel .lose #more {
  background: linear-gradient(#46dfe5, #078cb6) !important;
  border: 3px solid #a1f5ef !important;
  border-radius: 999px;
}
html body #panel .lose #more::after {
  display: none !important;
}
html body #panel .lose #panel-home,
html body #pause #pause-quit {
  color: #075572 !important;
}
html body #pause .card,
html body #panel .card {
  box-shadow: 0 7px 0 rgba(2, 62, 82, 0.3) !important;
}
html body #pause #pause-quit::after {
  border-image: none !important;
  border: 2px solid #248ca0 !important;
  border-radius: 999px;
  background: linear-gradient(#e8fffb, #b7eded) !important;
}
html body #cafe-screen #cafe-title {
  font-size: clamp(15px, 2.7vh, 26px) !important;
}
html body #panel .lose #more :is(em, span) {
  color: #fff !important;
  -webkit-text-stroke: 0 !important;
  text-shadow:
    0 2px 0 #07536c,
    1px 0 #07536c,
    -1px 0 #07536c !important;
}
html body #wipe {
  background: rgba(4, 70, 90, 0.6) !important;
}

/* Restored shell artwork and coordinated underwater panels. */
html body .btn:not(.ghost):not(.more) {
  background: url('../assets/coral/button.webp') center / 100% 100% no-repeat !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 0.7em 0.18em !important;
  overflow: visible !important;
}
html body #home #play {
  font-size: min(4.7vh, 8vw, 39px) !important;
}
html body #panel .card.win #panel-btn {
  font-size: calc(var(--u) * 0.075) !important;
}
html body #boosters .boost.out-of-stock i {
  background: #799ca4 !important;
  color: #fff !important;
  border-color: #275e6b !important;
}
html body #map .lv.done {
  background-image: url('../assets/coral/level-cleared.webp') !important;
}
html body #map .lv.done b {
  inset: 14% 0 0 !important;
  color: #075572 !important;
  font-size: clamp(15px, calc(var(--sh) * 0.035), 30px) !important;
  text-shadow: 0 1px 0 #eaffff !important;
}
html body #map .lv.done em {
  bottom: -10%;
}
/* The illustrated background is reserved for portrait/square cards so it is not stretched across landscape. */
html body #panel .card.win::after,
html body .intro-card::after {
  border-image: none !important;
  border: 0 !important;
  border-radius: 24px !important;
  background: url('../assets/coral/victory-frame.webp') center / 100% 100% no-repeat !important;
  box-shadow: 0 7px 0 #00496777 !important;
  filter: none !important;
}
html body #panel .card.win {
  padding: calc(var(--u) * 0.15) calc(var(--u) * 0.1) calc(var(--u) * 0.12) !important;
  row-gap: calc(var(--u) * 0.035) !important;
}
html body #panel .card.win .earn::after,
html body #panel .card.win #cafe-box::after {
  background: linear-gradient(#d7ffff, #9eebf2) !important;
  border: 2px solid #41c8e0 !important;
  box-shadow:
    inset 0 0 0 2px #efffff,
    0 3px 0 #087b9c77 !important;
}
html body #panel .card.win .cafe-bar b {
  background: linear-gradient(#a3ef96, #48c576) !important;
}
html body .intro-card {
  padding-top: clamp(48px, 8vmin, 78px) !important;
}
html body .intro-card .ic-rib {
  background: url('../assets/coral/ocean-banner.webp') center / 100% 100% no-repeat !important;
  color: #fff !important;
  text-shadow: 0 2px 0 #06516e !important;
}
html body .intro-card .ic-rib svg text {
  fill: #fff !important;
  stroke: #064d6d !important;
}
html body .intro-card .ic-t {
  color: #075572 !important;
}
html body .intro-card .ic-goal::after {
  border-image: none !important;
  border: 2px solid #51c8d5 !important;
  border-radius: 15px;
  background: linear-gradient(#e7fffc, #b1eff0) !important;
}
html body .intro-card .ic-mv {
  color: #075572 !important;
  border-color: #1189a0 !important;
  background: linear-gradient(#e7fffc, #a8e9ec) !important;
}
html body .intro-card u {
  padding: 0.55em 0 !important;
  color: #fff !important;
}
html body .intro-card u::after {
  border-image: none !important;
  border: 0 !important;
  background: url('../assets/coral/button.webp') center / 100% 100% no-repeat !important;
}
html body #celebrate {
  background: rgba(2, 52, 76, 0.52) !important;
}
html body .cb-banner::before {
  background: url('../assets/coral/ocean-banner.webp') center / 100% 100% no-repeat !important;
  filter: drop-shadow(0 0.8vh 0 rgba(0, 61, 81, 0.35));
}
html body .cb-banner svg text {
  stroke: #064d6d !important;
}
@media (max-height: 500px) and (orientation: landscape) {
  html.phone-land body #panel .card.win {
    padding: calc(var(--u) * 0.07) calc(var(--u) * 0.08) calc(var(--u) * 0.045) !important;
  }
  html.phone-land body #panel .card.win::after {
    background: linear-gradient(160deg, #c7faf8, #45dbe8) !important;
    border: 4px solid #14a5be !important;
    box-shadow:
      inset 0 0 0 3px #dcffff,
      0 7px 0 #00496777 !important;
  }
}
html body :is(#home #play, #panel .card.win #panel-btn, #pause #pause-resume, #cafe-screen #cafe-go) {
  padding-bottom: 0.5em !important;
}
html body .cb-banner::before {
  inset: 0 !important;
}
@media (max-height: 500px) and (orientation: landscape) {
  html.phone-land body #intro .intro-card {
    scale: 0.82;
  }
  html.phone-land body #intro .intro-card .ic-panda {
    top: -13% !important;
    width: 22% !important;
  }
}
html body .intro-card i {
  background: #d9fbf8 !important;
  border-color: #1694a8 !important;
  color: #075572 !important;
}
@media (max-height: 500px) and (orientation: landscape) {
  html.phone-land body #intro .intro-card .ic-panda {
    display: none !important;
  }
}
/* Let the restoration caption wrap to two lines. */
html body #panel .card.win .cafe-side span {
  white-space: normal !important;
  overflow: hidden;
  text-overflow: clip !important;
  line-height: 1.12;
  max-height: 2.3em;
  font-size: calc(var(--u) * 0.06) !important;
}

/* Keep the shell art at its original 3:1 proportions on every primary action. */
html body .btn:not(.ghost):not(.more) {
  background-size: contain !important;
}
html body #panel .card.win {
  box-shadow: none !important;
}
html body .intro-card::after {
  background-image: url('../assets/coral/victory-frame-transparent.png') !important;
  box-shadow: none !important;
  filter: drop-shadow(0 7px 0 #00496777) !important;
}
@media (min-height: 501px), (orientation: portrait) {
  html body #panel .card.win::after {
    background-image: url('../assets/coral/victory-frame-transparent.png') !important;
    box-shadow: none !important;
    filter: drop-shadow(0 7px 0 #00496777) !important;
  }
}
html body :is(#pause #pause-resume, #panel #panel-btn, #cafe-screen #cafe-go, #finale #fn-home) {
  aspect-ratio: 3 / 1;
  height: auto !important;
}
html body #pause[data-mode='pause'] #pause-resume {
  height: 30% !important;
  font-size: min(calc(var(--ch) * 0.038), 28px) !important;
}
html body #panel .lose #panel-btn {
  top: 76.5% !important;
  font-size: min(calc(var(--ch) * 0.038), 28px) !important;
}
html body #intro .intro-card u {
  box-sizing: border-box;
  display: flex !important;
  align-items: center;
  justify-content: center;
  aspect-ratio: 3 / 1;
  padding: 0 0.5em 0.3em !important;
}
html body #intro .intro-card u::after {
  background-size: contain !important;
}

/* Keep empty powers recognizable; the zero badge communicates their stock. */
html body #boosters .boost.empty {
  opacity: 1;
  filter: saturate(0.68);
}
html body #boosters .boost {
  aspect-ratio: 1;
  width: auto;
}
html body #boosters .boost img {
  width: 100%;
  height: 100%;
  transform: scale(1.25);
}
html body #boosters .boost.out-of-stock i {
  background: #426f7c !important;
  border-color: #d5ffff !important;
}
html body #map .lv.done b {
  inset: 2% 0 12% !important;
}
html body #map .lv.done.no-stars b {
  inset: 10% 0 4% !important;
}
html body #panel .win .earn.gift {
  gap: 0.15em;
  padding: 0.2em !important;
}
html body #panel .win .earn.gift span {
  min-width: 0;
  white-space: normal;
  line-height: 1.05;
  text-align: center;
}
html body #map .lv-chest img {
  transform: scale(1.28);
  transform-origin: center bottom;
}

/* A soft beacon makes the page arrows visible against detailed scenery. */
html body #map .lv-arrow::before {
  content: '';
  position: absolute;
  inset: -15%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle, #fff9abcc 0 28%, #ffd74b88 48%, transparent 72%);
  animation: coral-arrow-glow 1.8s ease-in-out infinite;
  pointer-events: none;
}
html body #map .lv-arrow img {
  filter: drop-shadow(0 3px 0 #064b5f) drop-shadow(0 0 6px #fff4a6);
}
@keyframes coral-arrow-glow {
  50% {
    opacity: 0.45;
    transform: scale(1.14);
  }
}
@media (prefers-reduced-motion: reduce) {
  html body #map .lv-arrow::before {
    animation: none;
  }
}
html body.motion-reduced #map .lv-arrow::before {
  animation: none;
}

/* Each map shares its frame, but reveals the scenery of the selected world. */
body.at-map[data-map-world='0'],
body.at-cafe[data-reno-world='0'],
body[data-world='0']:not(.at-home):not(.at-map):not(.at-cafe) {
  --bgi: url('../assets/coral/world-1-reef.webp') !important;
}
body.at-map[data-map-world='1'] {
  --bgi: url('../assets/coral/world-2.webp') !important;
}
body.at-map[data-map-world='2'] {
  --bgi: url('../assets/coral/world-3.webp') !important;
}
body.at-map[data-map-world='3'] {
  --bgi: url('../assets/coral/world-4.webp') !important;
}
body.at-map[data-map-world='4'] {
  --bgi: url('../assets/coral/world-5.webp') !important;
}
body.at-map[data-map-world]::after {
  background-image: url('../assets/coral/map-frame-portrait.webp'), var(--bgi) !important;
  background-position:
    center 4vh,
    center !important;
  background-size:
    auto 78%,
    cover !important;
  background-repeat: no-repeat !important;
}
@media (min-aspect-ratio: 11/10) {
  body.at-map[data-map-world]::after {
    background-image: url('../assets/coral/map-frame-land.webp'), var(--bgi) !important;
    background-position: center, center !important;
    background-size:
      100% 100%,
      100% 100% !important;
  }
}
body.at-cafe[data-reno-world='1'] {
  --bgi: url('../assets/coral/world-2.webp') !important;
}
body.at-cafe[data-reno-world='2'] {
  --bgi: url('../assets/coral/world-3.webp') !important;
}
body.at-cafe[data-reno-world='3'] {
  --bgi: url('../assets/coral/world-4.webp') !important;
}
body.at-cafe[data-reno-world='4'] {
  --bgi: url('../assets/coral/world-5.webp') !important;
}
@media (max-aspect-ratio: 11/10) {
  body.at-map[data-map-world='0'],
  body.at-cafe[data-reno-world='0'],
  body[data-world='0']:not(.at-home):not(.at-map):not(.at-cafe) {
    --bgi: url('../assets/coral/world-1-portrait.webp') !important;
  }
  body.at-map[data-map-world='1'],
  body.at-cafe[data-reno-world='1'],
  body[data-world='1']:not(.at-home):not(.at-map):not(.at-cafe) {
    --bgi: url('../assets/coral/world-2-portrait.webp') !important;
  }
  body.at-map[data-map-world='2'],
  body.at-cafe[data-reno-world='2'],
  body[data-world='2']:not(.at-home):not(.at-map):not(.at-cafe) {
    --bgi: url('../assets/coral/world-3-portrait.webp') !important;
  }
  body.at-map[data-map-world='3'],
  body.at-cafe[data-reno-world='3'],
  body[data-world='3']:not(.at-home):not(.at-map):not(.at-cafe) {
    --bgi: url('../assets/coral/world-4-portrait.webp') !important;
  }
  body.at-map[data-map-world='4'],
  body.at-cafe[data-reno-world='4'],
  body[data-world='4']:not(.at-home):not(.at-map):not(.at-cafe) {
    --bgi: url('../assets/coral/world-5-portrait.webp') !important;
  }
}
@media (max-width: 350px) and (max-height: 650px) {
  html body #map .lv-title {
    top: calc(var(--my) + var(--mh) * 0.2) !important;
  }
}

html body #btn-settings::before {
  display: none !important;
}
html body #btn-settings img {
  width: 100% !important;
  height: 100% !important;
}
html body #tip {
  background: #fff !important;
  color: #075572 !important;
  border-color: #09859b !important;
  box-shadow: 0 3px 0 #07536c88 !important;
}
html body #tut .tut-bubble {
  background: #fff !important;
  color: #075572 !important;
  border-color: #09859b !important;
  box-shadow:
    inset 0 0 0 3px #c7f5f5,
    0 6px 0 #07536c66 !important;
}
html body #tut .tut-bubble p b {
  color: #087d9a !important;
}
html body #tut .tut-bubble small {
  color: #fff !important;
  background: linear-gradient(#27cce4, #0879bb) !important;
  border-color: #075d80 !important;
  text-shadow: 0 1px 1px #07526f !important;
  box-shadow: 0 2px 0 #07526f88 !important;
}
html body #tut .tut-bubble::before {
  border-bottom-color: #09859b !important;
}
html body #tut .tut-bubble::after {
  border-bottom-color: #fff !important;
}
html body #tut .tut-bubble.up::before {
  border-top-color: #09859b !important;
  border-bottom-color: transparent !important;
}
html body #tut .tut-bubble.up::after {
  border-top-color: #fff !important;
  border-bottom-color: transparent !important;
}
html body #hud .box.mv :is(small, b) {
  text-shadow:
    0 2px 0 #07506d,
    0 -2px 0 #07506d,
    2px 0 #07506d,
    -2px 0 #07506d !important;
}
html body #tapstart {
  background: radial-gradient(circle at 50% 45%, #40d9e433, #003d5a99) !important;
}
html body #tapstart .ts-txt {
  text-shadow:
    0 3px #034763,
    0 -2px #034763,
    2px 0 #034763,
    -2px 0 #034763 !important;
}
html body #home .home-level {
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  color: #fff !important;
  padding-top: 0.28em !important;
  text-shadow:
    0 2px 1px #06445f,
    1px 0 #06445f,
    -1px 0 #06445f !important;
}
html body #home .home-level::after {
  border: 0 !important;
  border-image: none !important;
  background: url('../assets/coral/ocean-banner.webp') center / 100% 100% no-repeat !important;
}

/* All level states share the locked marker's gold rim and proportions. */
html body #map .lv:is(.cur, .done) {
  background-image: url('../assets/coral/marker-unlocked.webp') !important;
}
html body #map .lv:is(.cur, .done) b {
  inset: 0 !important;
  color: #075572 !important;
  font-size: clamp(15px, calc(var(--sh) * 0.035), 30px) !important;
  text-shadow: 0 1px 0 #eaffff !important;
}
html body #map .lv-grid:not(.calm) .lv.cur:not(.unlock),
html body #map .lv-grid.calm .lv.cur:not(.unlock) {
  animation: none !important;
}
html body #map .lv.done em {
  left: 26%;
  right: 26%;
  bottom: 15%;
  height: 17%;
  align-items: center;
  gap: 1%;
}
html body #map .lv.done em img {
  width: 32%;
  height: auto;
  margin: 0;
}
html body #map .lv.done em img:nth-child(2) {
  transform: none;
}

html body #home .home-level {
  height: auto !important;
  aspect-ratio: 3 / 1;
  font-size: clamp(14px, 2.5vh, 25px) !important;
  padding: 0.12em 0 0 !important;
}
@media (min-aspect-ratio: 11/10) {
  html body #home .home-level {
    width: calc(var(--sw) * 0.16) !important;
    left: calc(var(--sx) + var(--sw) * 0.42) !important;
  }
}

/* End of css/coral.css */