/* heads — 顔でできたハート */
.sc-heads { background: #fbfaf5; --hd-b: 8.6; }
.sc-heads.wide { --hd-b: 11; }

/* 枠を走る巨大な文字 */
.sc-heads .hd-band { position: absolute; overflow: hidden; color: #0c0c0c; pointer-events: none; z-index: 1; }
.sc-heads .hd-band span { display: block; white-space: nowrap; will-change: transform; font: 400 calc(var(--hd-b) * 1.12 * var(--u)) / calc(var(--hd-b) * var(--u)) var(--f-anton); letter-spacing: -.01em; }
.sc-heads .hd-band b { font-weight: 400; margin-right: .45em; }
.sc-heads .hd-bt { left: 0; right: 0; top: calc(.6 * var(--u)); height: calc(var(--hd-b) * var(--u)); }
.sc-heads .hd-bb { left: 0; right: 0; bottom: calc(.6 * var(--u)); height: calc(var(--hd-b) * var(--u)); rotate: 180deg; }
.sc-heads .hd-bl, .sc-heads .hd-br { top: calc((var(--hd-b) + 1.6) * var(--u)); bottom: calc((var(--hd-b) + 1.6) * var(--u)); width: calc(var(--hd-b) * var(--u)); }
.sc-heads .hd-bl { left: calc(.6 * var(--u)); rotate: 180deg; }
.sc-heads .hd-br { right: calc(.6 * var(--u)); }
.sc-heads .hd-bl span, .sc-heads .hd-br span { writing-mode: vertical-rl; text-orientation: sideways; white-space: nowrap; width: calc(var(--hd-b) * var(--u)); }
.sc-heads .hd-bl b, .sc-heads .hd-br b { margin-right: 0; margin-bottom: .45em; }
.sc-heads:not(.wide) .hd-bb { bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + .6 * var(--u)); }
.sc-heads:not(.wide) .hd-bl, .sc-heads:not(.wide) .hd-br { bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + (var(--hd-b) + 1.6) * var(--u)); }

/* 顔 */
.sc-heads .hd-heart { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.sc-heads .hd-h {
  position: absolute; left: 50%; top: 50%; width: calc(16.4 * var(--u)); height: calc(16.4 * var(--u));
  margin: calc(-8.2 * var(--u)) 0 0 calc(-8.2 * var(--u)); will-change: transform; transform: scale(0);
}
.sc-heads:not(.wide) .hd-stray { display: none; }
.sc-heads .hd-i { position: absolute; inset: 0; background-repeat: no-repeat; }
.sc-heads .hd-hit { position: absolute; left: 30%; top: 26%; width: 40%; height: 48%; border-radius: 50%; pointer-events: auto; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.sc-heads .hd-hit:focus-visible { outline: 2px dashed #0c0c0c; }
.sc-heads .hd-e {
  position: absolute; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%;
  background: radial-gradient(circle at 34% 24%, #fff 0 22%, #f7f7f3 60%); border: calc(.1 * var(--u)) solid #1e1e1e;
  box-shadow: 0 calc(.12 * var(--u)) calc(.2 * var(--u)) rgba(0, 0, 0, .3);
}
.sc-heads .hd-e b { position: absolute; left: 25%; top: 25%; width: 50%; height: 50%; border-radius: 50%; background: radial-gradient(circle at 34% 30%, #fff 0 13%, #0f0f0f 15%); will-change: transform; }

/* 小さな文字 */
.sc-heads .hd-small { width: max-content; max-width: calc(70 * var(--u)); margin: 0; text-align: center; color: #0c0c0c; z-index: 3; font: 700 calc(max(9px, 1.5 * var(--u))) / 1.5 var(--f-sans); letter-spacing: .38em; }
.sc-heads .hd-s1 b { display: block; font-size: calc(max(10px, 1.9 * var(--u))); letter-spacing: .5em; }
.sc-heads .hd-s1 i { display: block; font-style: normal; font-size: calc(max(8px, 1.1 * var(--u))); margin-top: .5em; }
.sc-heads .hd-s2 { background: #0c0c0c; color: #fbfaf5; padding: .5em 1em .4em 1.3em; font-size: calc(max(10px, 1.55 * var(--u))); box-shadow: calc(.4 * var(--u)) calc(.4 * var(--u)) 0 #d9142b; }

/* 打ち文字の札 */
.sc-heads .hd-note { width: max-content; z-index: 4; pointer-events: auto; transition: filter .2s; }
.sc-heads .hd-note span {
  display: block; width: max-content; margin-bottom: calc(.5 * var(--u)); padding: .32em .7em .18em; background: #fff; color: #141012;
  border: 1.5px solid #141012; font: 400 calc(max(10.5px, 1.85 * var(--u))) / 1.2 var(--f-type); box-shadow: 2px 3px 0 rgba(20, 5, 5, .25);
}
.sc-heads .hd-note span:nth-child(2) { margin-left: 1.4em; rotate: 2deg; }
.sc-heads .hd-n1 span:first-child { background: #d9142b; color: #fff4ea; border-color: #d9142b; }
.sc-heads .hd-n2 span:first-child { background: #1d3fd6; color: #fff; border-color: #1d3fd6; }
.sc-heads .hd-n3 span { background: #ff8fb0; }
.sc-heads .hd-n4 span { background: #f6c915; }
.sc-heads .hd-note:hover { filter: invert(1); }
.sc-heads .hd-found { width: max-content; z-index: 6; pointer-events: none; opacity: 0; }
.sc-heads .hd-found span { display: block; padding: .25em .6em .12em; background: #0c7a45; color: #fff4ea; font: 400 calc(max(16px, 4 * var(--u))) / 1 var(--f-type); box-shadow: 3px 4px 0 #0c0c0c; }

/* 上の世界へはみ出す顔 */
.scene-heads .hd-over .hd-peek {
  position: absolute; width: calc(16.4 * var(--u)); height: calc(16.4 * var(--u)); margin: calc(-8.2 * var(--u)) 0 0 calc(-8.2 * var(--u));
  background-repeat: no-repeat; animation: hd-peek 3.2s ease-in-out infinite alternate;
}
@keyframes hd-peek { from { transform: translateY(18%); } to { transform: translateY(-14%); } }

.sc-heads:not(.wide) .hd-s1 b { letter-spacing: .26em; }
.sc-heads:not(.wide) .hd-s1 i { letter-spacing: .3em; }
.sc-heads:not(.wide) .hd-small { max-width: calc(80 * var(--u)); }