/* melt — 顔でできたハート */
.sc-melt { background: #f24a90; }
.sc-melt .mt-glow {
  position: absolute; left: 50%; top: 50%; width: calc(190 * var(--u)); height: calc(170 * var(--u)); translate: -50% -50%;
  background: radial-gradient(closest-side, rgba(255, 150, 195, .55), rgba(255, 150, 195, 0) 72%); pointer-events: none; will-change: transform;
}
.sc-melt .mt-shadow {
  height: calc(16 * var(--u)); pointer-events: none;
  background: radial-gradient(closest-side, rgba(110, 10, 60, .55), rgba(125, 15, 69, .28) 55%, rgba(125, 15, 69, 0) 100%);
}
.sc-melt .mt-heart { z-index: 4; }
.sc-melt .mt-main { cursor: pointer; z-index: 5; -webkit-tap-highlight-color: transparent; }
.sc-melt .mt-mini { z-index: 6; opacity: 0; pointer-events: none; }
.sc-melt .mt-body {
  position: relative; width: 100%; aspect-ratio: 900 / 830; overflow: hidden;
  -webkit-mask: url(/assets/world/melt/mask.webp) center / 100% 100% no-repeat;
  mask: url(/assets/world/melt/mask.webp) center / 100% 100% no-repeat;
}
.sc-melt .mt-skin { position: absolute; left: -45%; top: -52%; width: 190%; max-width: none; height: auto; will-change: transform; pointer-events: none; }
.sc-melt .mt-gloss { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

/* 垂れるしずく */
.sc-melt .mt-drip { position: absolute; left: 50%; top: 50%; z-index: 3; font-size: var(--u); margin-left: -.8em; opacity: 0; pointer-events: none; will-change: transform; }
.sc-melt .mt-drip s {
  display: block; width: 100%; height: 10em; transform-origin: 50% 0; border-radius: 0 0 1em 1em;
  background: linear-gradient(90deg, #b3155c, #e33b86 38%, #ff8fc0 52%, #d92c78 70%, #a8104f);
}
.sc-melt .mt-drip b {
  position: absolute; left: 50%; top: -1.1em; width: 190%; aspect-ratio: 1 / 1.25; margin-left: -95%; border-radius: 50% 50% 50% 50% / 62% 62% 40% 40%;
  background: radial-gradient(circle at 36% 30%, #fff 0 9%, #ff9cc8 16%, #e33b86 48%, #a8104f 100%);
}
.sc-melt .mt-drop {
  position: absolute; left: 50%; top: 50%; z-index: 7; font-size: var(--u); margin: -.5em 0 0 -.5em; border-radius: 50%; opacity: 0; pointer-events: none;
  background: radial-gradient(circle at 34% 28%, #fff 0 10%, #ffb3d4 18%, #ea3f8a 55%, #9d0d4b 100%);
  box-shadow: .12em .2em .25em rgba(120, 10, 60, .35); will-change: transform;
}

/* ことば */
.sc-melt .mt-head {
  margin: 0; width: max-content; translate: 0 0; z-index: 8; color: #141014;
  font: 700 1em/.98 var(--f-sans); letter-spacing: -.045em; white-space: nowrap; transform-origin: 0 0;
}
.sc-melt .mt-head span { display: inline-block; opacity: 0; will-change: transform; }
.sc-melt .mt-br0, .sc-melt .mt-br2 { display: none; }
.sc-melt.wide .mt-br0, .sc-melt.wide .mt-br2 { display: inline; }
.sc-melt.wide .mt-br1 { display: none; }
.sc-melt .mt-sub { margin: 0; width: max-content; translate: 0 0; z-index: 8; color: #141014; font: 400 1em/1.1 var(--f-sans); letter-spacing: -.01em; white-space: nowrap; opacity: 0; }
.sc-melt .mt-fine {
  margin: 0; width: max-content; z-index: 8; color: #141014; white-space: nowrap; opacity: 0;
  font: 700 calc(max(9.5px, 1.75 * var(--u)))/1.2 var(--f-sans); letter-spacing: .1em;
}
.sc-melt.wide .mt-fine { font-size: calc(2.1 * var(--u)); letter-spacing: .2em;
}
.sc-melt.wide .mt-fine { translate: 0 0; }

/* 札 */
.sc-melt .mt-lab {
  width: max-content; z-index: 9; padding: .34em .7em .22em; background: #f6f1e4; color: #141014; cursor: pointer; opacity: 0;
  font: 400 calc(max(10.5px, 2.2 * var(--u)))/1.2 var(--f-type); letter-spacing: .02em;
  box-shadow: 2px 3px 0 rgba(110, 10, 60, .4); transition: scale .18s cubic-bezier(.3, 1.7, .5, 1), background .15s, color .15s;
}
.sc-melt .mt-l2 { background: #141014; color: #fff; font-family: var(--f-anton); letter-spacing: .1em; padding: .3em .7em; }
.sc-melt .mt-l3 { background: #fff; font-family: var(--f-hand); font-size: calc(max(17px, 4.2 * var(--u))); line-height: .9; padding: .12em .5em .02em; }
.sc-melt .mt-l4 { background: #f8d517; font-family: var(--f-mono); font-weight: 700; text-transform: uppercase; }
.sc-melt .mt-lab:hover { scale: 1.14; }
.sc-melt .mt-lab.is-flip { background: #141014; color: #f24a90; }
.sc-melt .mt-l2.is-flip { background: #fff; color: #141014; }

/* 上の世界へはみ出すもの */
.scene-melt .mt-ov {
  position: absolute; border-radius: 50% 50% 50% 50% / 38% 38% 62% 62%;
  background: radial-gradient(circle at 36% 62%, #ff9cc8 0 12%, #f24a90 40%, #d42b74 100%);
  animation: mt-fall 3.2s ease-in infinite;
}
.scene-melt .mt-ov1 { left: 12%; top: -19vh; width: 22px; height: 30px; }
.scene-melt .mt-ov2 { left: 47%; top: -26vh; width: 15px; height: 21px; animation-delay: -1.1s; }
.scene-melt .mt-ov3 { left: 71%; top: -17vh; width: 28px; height: 38px; animation-delay: -2s; }
.scene-melt .mt-ov4 { left: 88%; top: -30vh; width: 12px; height: 17px; animation-delay: -.5s; }
.scene-melt .mt-ovh { position: absolute; left: 24%; top: -8vh; width: clamp(64px, 9vw, 120px); rotate: -16deg; filter: drop-shadow(3px 5px 4px rgba(90, 0, 40, .35)); }
@keyframes mt-fall { 0% { transform: translateY(-3vh) scaleY(.9); } 100% { transform: translateY(9vh) scaleY(1.15); } }