/* cube — NO PATTERN!! */
.sc-cube { background: #d6201c radial-gradient(ellipse at 50% 55%, rgba(255, 120, 90, .22), rgba(90, 0, 0, .22) 85%); }

.sc-cube .cb-s, .scene-cube .cb-ov {
  display: block; background: url(/assets/world/cube/tiles.webp) 0 0 / 600% 600% no-repeat; border-radius: 15%;
}

/* ---- 3D のキューブ ---- */
.sc-cube .cb-wrap { width: 0; height: 0; z-index: 4; --cs: 200px; }
.sc-cube .cb-persp { position: absolute; left: 0; top: 0; width: 0; height: 0; perspective: calc(var(--cs) * 4.4); pointer-events: none; }
.sc-cube .cb-cube, .sc-cube .cb-layer { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-style: preserve-3d; will-change: transform; }
.sc-cube .cb-f {
  position: absolute; background: #0d0c0c; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  display: grid; gap: calc(var(--cs) * .026); padding: calc(var(--cs) * .026);
}
.sc-cube .cb-side { left: calc(var(--cs) / -2); top: calc(var(--cs) / -6); width: var(--cs); height: calc(var(--cs) / 3 + .6px); grid-template-columns: repeat(3, 1fr); }
.sc-cube .cb-f0 { transform: translateZ(calc(var(--cs) / 2)); }
.sc-cube .cb-f1 { transform: rotateY(90deg) translateZ(calc(var(--cs) / 2)); }
.sc-cube .cb-f2 { transform: rotateY(180deg) translateZ(calc(var(--cs) / 2)); }
.sc-cube .cb-f3 { transform: rotateY(270deg) translateZ(calc(var(--cs) / 2)); }
.sc-cube .cb-top { left: calc(var(--cs) / -2); top: calc(var(--cs) / -2); width: var(--cs); height: var(--cs); grid-template-columns: repeat(3, 1fr); transform: rotateX(90deg) translateZ(calc(var(--cs) / 6)); }
.sc-cube .cb-black { background: #151414; }
.sc-cube .cb-f .cb-s { width: 100%; height: 100%; }
.sc-cube .cb-sh { position: absolute; inset: 0; background: #000; opacity: .2; pointer-events: none; }
.sc-cube .cb-f::after { content: ''; position: absolute; inset: 0; background: linear-gradient(125deg, transparent 40%, rgba(255, 255, 255, .13) 52%, transparent 64%); pointer-events: none; }
.sc-cube .cb-word {
  position: absolute; left: calc(var(--cs) / -2); top: 0; width: var(--cs); height: calc(var(--cs) * .12); text-align: center; white-space: nowrap;
  color: #f3e7c9; font: 700 calc(var(--cs) * .058)/2 var(--f-sans); letter-spacing: .2em; backface-visibility: hidden;
}
.sc-cube .cb-w0 { transform: translateY(calc(var(--cs) / 2)) translateZ(calc(var(--cs) * .5)) rotateX(90deg); transform-origin: 50% 0; }
.sc-cube .cb-w1 { transform: rotateY(90deg) translateY(calc(var(--cs) / 2)) translateZ(calc(var(--cs) * .5)) rotateX(90deg); transform-origin: 50% 0; }
.sc-cube .cb-w2 { transform: rotateY(180deg) translateY(calc(var(--cs) / 2)) translateZ(calc(var(--cs) * .5)) rotateX(90deg); transform-origin: 50% 0; }
.sc-cube .cb-w3 { transform: rotateY(270deg) translateY(calc(var(--cs) / 2)) translateZ(calc(var(--cs) * .5)) rotateX(90deg); transform-origin: 50% 0; }
.sc-cube .cb-hit {
  position: absolute; left: calc(var(--cs) * -.85); top: calc(var(--cs) * -.8); width: calc(var(--cs) * 1.7); height: calc(var(--cs) * 1.6);
  border-radius: 50%; cursor: grab; touch-action: pan-y;
}
.sc-cube .cb-hit:active { cursor: grabbing; }

.sc-cube .cb-floor {
  --w: 96; height: calc(26 * var(--u)); z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(70, 0, 0, .78), rgba(70, 0, 0, .35) 45%, transparent 70%);
}

/* ---- 文字 ---- */
.sc-cube .cb-head { width: auto; z-index: 3; color: #f3e7c9; transform-origin: 0 50%; pointer-events: none; }
.sc-cube .cb-head b { display: block; font: 400 1em/.93 var(--f-archivo); letter-spacing: -.035em; white-space: nowrap; text-shadow: .03em .04em 0 rgba(80, 0, 0, .45); }
.sc-cube .cb-sub { width: auto; margin: 0; z-index: 3; white-space: nowrap; color: #f3e7c9; font: 700 calc(max(10px, 2.5 * var(--u)))/1 var(--f-sans); letter-spacing: .26em; }
.sc-cube .cb-tag { width: auto; z-index: 3; }
.sc-cube .cb-tag span {
  display: block; white-space: nowrap; padding: .55em .9em .5em; background: #f3e7c9; color: #d6201c;
  font: 700 calc(max(10px, 2.3 * var(--u)))/1 var(--f-sans); letter-spacing: .2em; box-shadow: 3px 3px 0 rgba(80, 0, 0, .35);
}
.sc-cube .cb-count { width: auto; z-index: 6; display: flex; gap: .9em; white-space: nowrap; padding: .5em .8em .4em; background: #111; color: #f3e7c9; font: 700 calc(max(10px, 2.2 * var(--u)))/1 var(--f-mono); letter-spacing: .12em; box-shadow: 3px 3px 0 rgba(80, 0, 0, .4); }
.sc-cube .cb-count b { color: #ffd21f; }
.sc-cube .cb-grab { width: auto; z-index: 6; white-space: nowrap; color: #f3e7c9; font: 400 calc(max(15px, 3.6 * var(--u)))/.95 var(--f-hand); pointer-events: none; }

/* ---- 剥がれたシール ---- */
.sc-cube .cb-loose { z-index: 5; aspect-ratio: 1; cursor: pointer; opacity: 0; }
.sc-cube .cb-loose .cb-s { width: 100%; height: 100%; box-shadow: calc(.6 * var(--u)) calc(.8 * var(--u)) calc(.5 * var(--u)) rgba(70, 0, 0, .4); transition: scale .18s; }
.sc-cube .cb-loose:hover .cb-s { scale: 1.12; }
.sc-cube .cb-loose .cb-pop { animation: cb-pop .7s cubic-bezier(.3, 1.5, .5, 1); }
@keyframes cb-pop { 0% { rotate: 0deg; scale: 1; } 40% { scale: 1.5; } 100% { rotate: 360deg; scale: 1; } }

/* ---- 上の世界との境目にまたがるシール ---- */
.scene-cube .cb-ov { position: absolute; width: calc(13 * var(--u)); aspect-ratio: 1; box-shadow: 3px 5px 8px rgba(0, 0, 0, .35); }
.scene-cube .cb-o0 { left: 7%; top: calc(-9 * var(--u)); rotate: -16deg; }
.scene-cube .cb-o1 { left: 58%; top: calc(-12 * var(--u)); rotate: 22deg; width: calc(10 * var(--u)); }
.scene-cube .cb-o2 { right: 6%; top: calc(-4 * var(--u)); rotate: -8deg; width: calc(11 * var(--u)); }