/* jack — びっくり箱 */
.sc-jack { background: #d92a26; }
.sc-jack .jk-crumple {
  position: absolute; inset: -2%; background: url(/assets/world/jack/crumple.webp) center / cover;
  mix-blend-mode: multiply; opacity: .9;
}
.sc-jack .jk-rig, .sc-jack .jk-clip, .sc-jack .jk-conf { position: absolute; inset: 0; }
.sc-jack .jk-rig { will-change: transform; }
.sc-jack .jk-rays { overflow: visible; }
.sc-jack .jk-rays polygon { fill: #f8d517; }
.sc-jack .jk-head img, .sc-jack .jk-lid img, .sc-jack .jk-boxfront img { filter: drop-shadow(calc(.55 * var(--u)) calc(.7 * var(--u)) calc(.4 * var(--u)) rgba(40, 0, 0, .35)); }
.sc-jack .jk-conf { pointer-events: none; font-size: var(--u); }
.sc-jack .jk-cf { position: absolute; left: 50%; top: 50%; margin: -.35em 0 0 -.9em; box-shadow: .16em .2em .12em rgba(60, 0, 0, .25); opacity: 0; will-change: transform; }

.sc-jack .jk-tag { width: auto; white-space: nowrap; transform-origin: 0 50%; z-index: 5; }
.sc-jack .jk-tag span {
  display: block; padding: .1em .2em .06em; background: #f8d517; color: #1d49cf;
  font: 400 1em/1 var(--f-archivo); letter-spacing: -.01em;
  box-shadow: .035em .045em .03em rgba(50, 0, 0, .3);
}
.sc-jack .jk-t-mind span { letter-spacing: .08em; padding: .28em .5em .22em; }

.sc-jack .jk-strips { width: auto; z-index: 6; }
.sc-jack .jk-strips p {
  margin: 0 0 calc(.9 * var(--u)); width: max-content; padding: .28em .7em .2em;
  background: #f6f1e4; color: #141210; font: 700 calc(max(11.5px, 2.5 * var(--u)))/1.25 var(--f-jp); letter-spacing: .04em;
  box-shadow: 2px 3px 0 rgba(50, 0, 0, .28);
}
.sc-jack .jk-strips p:nth-child(1) { rotate: -2deg; font-size: calc(max(13px, 3 * var(--u))); background: #111; color: #fff; }
.sc-jack .jk-strips p:nth-child(2) { rotate: 1.5deg; margin-left: calc(2 * var(--u)); }
.sc-jack .jk-strips p:nth-child(3) { rotate: -1deg; }
.sc-jack .jk-strips p:nth-child(4) { rotate: 2deg; margin-left: calc(1.4 * var(--u)); }
.sc-jack .jk-strips p:nth-child(5) { rotate: -1.6deg; margin-left: calc(.4 * var(--u)); }

.sc-jack .jk-fine { width: calc(min(88, 60) * var(--u)); margin: 0; color: #f1ece0; font: 700 calc(max(8px, 1.05 * var(--u)))/1.5 var(--f-sans); letter-spacing: .2em; }
.sc-jack .jk-scroll { width: auto; text-align: center; color: #f1ece0; z-index: 7; pointer-events: none; }
.sc-jack .jk-scroll b { display: block; font: 400 calc(max(15px, 3.4 * var(--u)))/1 var(--f-anton); letter-spacing: .22em; }
.sc-jack .jk-scroll i { display: block; font: 400 calc(max(22px, 5 * var(--u)))/1.1 var(--f-anton); font-style: normal; }
.sc-jack .jk-scroll span { display: block; font: 400 calc(max(15px, 3.2 * var(--u)))/1 var(--f-hand); }

/* 「情報はこの札から」— 札を指す手書きの矢印 */
.sc-jack .jk-navhint { position: absolute; z-index: 8; right: 26px; top: 66px; color: #fff; text-align: right; rotate: 3deg; pointer-events: none; }
.sc-jack .jk-navhint span { display: block; font: 700 13px/1.35 var(--f-jp); letter-spacing: .06em; padding-right: 34px; padding-top: 16px; }
.sc-jack .jk-navhint i {
  position: absolute; right: 4px; top: -2px; width: 26px; height: 40px;
  background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 40' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 38C16 32 20 20 15 4'/%3E%3Cpath d='M6 12 15 3l8 10'/%3E%3C/svg%3E");
  animation: jk-nudge 1s ease-in-out infinite alternate;
}
@keyframes jk-nudge { to { transform: translateY(-5px); } }
@media (max-width: 860px) {
  .sc-jack .jk-navhint { top: auto; right: 14px; bottom: calc(var(--nav-h) + 12px + env(safe-area-inset-bottom)); rotate: -3deg; }
  .sc-jack .jk-navhint span { padding-top: 0; padding-bottom: 8px; font-size: 11px; }
  .sc-jack .jk-navhint i { top: auto; bottom: -4px; transform: scaleY(-1); animation: none; }
}