/* ===== Splash: floating 3D level block ===== */
#splash { display: none; }
html.splash-on { overflow: hidden; }
html.splash-on #splash {
  display: block; position: fixed; inset: 0; z-index: 9999; overflow: hidden;
  background: #120934; transition: opacity .7s ease; --s: .9;
}
#splash.out { opacity: 0; pointer-events: none; }

/* ---- sky ---- */
.s-sky { position: absolute; inset: 0;
  background: linear-gradient(#120934 0%, #3a1459 35%, #6a2160 55%, #a73a62 72%, #d4595a 84%, #e0674f 100%); }
.s-stars { position: absolute; inset: 0 0 45% 0; opacity: .9;
  background-image:
    radial-gradient(1.5px 1.5px at 20px 30px, #fff, transparent),
    radial-gradient(1px 1px at 90px 120px, #fff, transparent),
    radial-gradient(2px 2px at 160px 60px, #ffe9c0, transparent),
    radial-gradient(1px 1px at 230px 170px, #fff, transparent),
    radial-gradient(1.5px 1.5px at 270px 20px, #fff, transparent),
    radial-gradient(1px 1px at 50px 210px, #fff, transparent),
    radial-gradient(2px 2px at 200px 250px, #ffe9c0, transparent);
  background-size: 300px 300px; animation: twinkle 4s ease-in-out infinite alternate; }
@keyframes twinkle { from { opacity: .45 } to { opacity: 1 } }

.s-sun { position: absolute; left: 50%; top: 44%; width: 52vmin; height: 52vmin; transform: translate(-50%, -50%);
  border-radius: 50%;
  background: linear-gradient(#c98550, #e9a46a 50%, #ff9a3c);
  box-shadow: 0 0 12vmin 6vmin rgba(255,154,106,.35);
  -webkit-mask-image: linear-gradient(#000 0 56%, transparent 56% 59%, #000 59% 67%, transparent 67% 71%, #000 71% 79%, transparent 79% 84%, #000 84% 92%, transparent 92% 97%, #000 97%);
          mask-image: linear-gradient(#000 0 56%, transparent 56% 59%, #000 59% 67%, transparent 67% 71%, #000 71% 79%, transparent 79% 84%, #000 84% 92%, transparent 92% 97%, #000 97%); }

.s-cloud { position: absolute; height: 5vmin; border-radius: 50%; background: #7a3a70; opacity: .3; filter: blur(2px); }
.s-cloud.c1 { width: 60vw; left: -10vw; top: 30%; animation: drift 60s linear infinite alternate; }
.s-cloud.c2 { width: 45vw; right: -8vw; top: 52%; animation: drift 80s linear infinite alternate-reverse; }
.s-cloud.c3 { width: 70vw; left: 10vw; top: 66%; opacity: .22; animation: drift 100s linear infinite alternate; }
@keyframes drift { to { transform: translateX(6vw); } }

.s-hills { position: absolute; left: 0; right: 0; bottom: 0; height: 24%;
  background: linear-gradient(#4a2058, #1a0d33);
  clip-path: polygon(0 55%, 12% 30%, 24% 52%, 38% 22%, 52% 50%, 66% 26%, 80% 54%, 92% 32%, 100% 48%, 100% 100%, 0 100%); }

.s-dust { position: absolute; inset: 0; pointer-events: none; }
.s-dust i { position: absolute; bottom: -10px; background: #ffd08a; opacity: 0; animation: rise linear infinite; }
@keyframes rise { 0% { transform: translateY(0); opacity: 0 } 15% { opacity: .7 } 100% { transform: translateY(-105vh); opacity: 0 } }

/* ---- layout ---- */
.s-content { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 2vh; padding: 2vh 16px; }

/* ---- extruded title ---- */
.s-title { margin: 0; display: flex; align-items: baseline; justify-content: center; gap: .22em;
  font: 700 clamp(52px, 11vw, 132px)/.95 'Rajdhani', Impact, sans-serif; letter-spacing: .04em;
  transform-origin: 50% 60%; animation: sway 7s ease-in-out infinite; will-change: transform; }
@keyframes sway {
  0%, 100% { transform: perspective(900px) rotateY(-10deg) rotateX(5deg); }
  50%      { transform: perspective(900px) rotateY(10deg)  rotateX(5deg); }
}
.s-title small { font-size: .38em; color: #ffd08a; letter-spacing: .1em; text-shadow: 0 .04em 0 #7a3a1a, 0 .08em 0 #4a2010; }
.t-think { color: #fff3d6;
  text-shadow: .03em .03em 0 #f0a850, .06em .06em 0 #e39342, .09em .09em 0 #d17f36, .12em .12em 0 #b96b2d,
               .15em .15em 0 #9c5826, .18em .18em 0 #7d4620, .21em .21em 0 #60351a, .24em .24em 0 #472714,
               .3em .38em .35em rgba(0,0,0,.55); }
.t-die { font-family: 'Rubik Dirt', 'Rajdhani', Impact, sans-serif; font-weight: 400; color: #ff3b4d;
  text-shadow: .03em .03em 0 #d41f31, .06em .06em 0 #b21829, .09em .09em 0 #901322, .12em .12em 0 #700f1b,
               .15em .15em 0 #560b15, .18em .18em 0 #40080f, .21em .21em 0 #2d060b, .24em .24em 0 #1d0408,
               0 0 .4em rgba(255,43,61,.5), .3em .38em .35em rgba(0,0,0,.55); }

/* ---- 3D scene ---- */
.scene { position: relative; width: 480px; height: 400px; perspective: 1300px; perspective-origin: 50% 35%;
  transform: scale(var(--s)); transition: transform .8s ease-in; flex: none; margin: -2vh 0; }
#splash.out .scene { transform: scale(calc(var(--s) * 1.7)); }
.stage { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform-style: preserve-3d; }
.bob { transform-style: preserve-3d; animation: bob 4.5s ease-in-out infinite; }
@keyframes bob { 0%, 100% { transform: translateY(-8px) } 50% { transform: translateY(14px) } }
.tilt { transform-style: preserve-3d; transition: transform .2s ease-out;
  transform: rotateX(calc(-24deg - var(--py, 0) * 7deg)); }
.spin { transform-style: preserve-3d; animation: spin 22s linear infinite; }
@keyframes spin { from { transform: rotateY(-35deg) } to { transform: rotateY(325deg) } }

.shadow { position: absolute; left: -110px; top: 215px; width: 220px; height: 42px; border-radius: 50%;
  background: radial-gradient(rgba(10,4,25,.55), transparent 70%); animation: shadow 4.5s ease-in-out infinite; }
@keyframes shadow { 0%, 100% { transform: scale(1.06); opacity: .9 } 50% { transform: scale(.82); opacity: .6 } }

/* generic cuboid: centred on its own origin, sized by --w --h --d */
.cb { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-style: preserve-3d;
  transform: translate3d(var(--x), var(--y), var(--z)); }
.cb i { position: absolute; display: block; backface-visibility: hidden; background: var(--side); }
.cb .f, .cb .b { width: var(--w); height: var(--h); left: calc(var(--w) / -2); top: calc(var(--h) / -2); }
.cb .r, .cb .l { width: var(--d); height: var(--h); left: calc(var(--d) / -2); top: calc(var(--h) / -2); }
.cb .t, .cb .u { width: var(--w); height: var(--d); left: calc(var(--w) / -2); top: calc(var(--d) / -2); }
.cb .f { transform: translateZ(calc(var(--d) / 2)); background: var(--front, var(--side)); }
.cb .b { transform: rotateY(180deg) translateZ(calc(var(--d) / 2)); filter: brightness(.7); }
.cb .r { transform: rotateY(90deg) translateZ(calc(var(--w) / 2)); filter: brightness(.82); }
.cb .l { transform: rotateY(-90deg) translateZ(calc(var(--w) / 2)); filter: brightness(.66); }
.cb .t { transform: rotateX(90deg) translateZ(calc(var(--h) / 2)); background: var(--top, var(--side)); }
.cb .u { transform: rotateX(-90deg) translateZ(calc(var(--h) / 2)); background: #120b28; }

/* brick body */
.brick { --brick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Crect width='60' height='60' fill='%23b4502f'/%3E%3Cpath d='M0 0H60M0 30H60M0 0V30M30 30V60' stroke='%2350200f' stroke-width='3' fill='none'/%3E%3Cpath d='M3 3H27M33 33H57' stroke='%23c8683f' stroke-width='3'/%3E%3C/svg%3E");
  --side: #b4502f; --top: #7a3a22; }
.brick i.f, .brick i.b, .brick i.r, .brick i.l { background: var(--brick) 0 0 / 60px 60px; }

/* grass cap */
.grass { --side: #3f8a3a; --top: #62c552; }
.grass i.f, .grass i.b, .grass i.r, .grass i.l { background: linear-gradient(#58b84c 0 55%, #34762f 55%); }
.grass i.t { background:
  repeating-conic-gradient(#68cf57 0 25%, #5bbd4c 0 50%) 0 0 / 40px 40px; }

/* rock underside */
.rock { --side: #3a1a52; --top: #2a1048; }
.rock i.f, .rock i.b, .rock i.r, .rock i.l { background: linear-gradient(#2e1450, #1b0b34); }

/* character */
.hero { --side: #0a0514; --top: #1a0d2e; }
.hero i.f { background: #0a0514; }
.hero i.f::before, .hero i.f::after { content: ""; position: absolute; top: 9px; width: 5px; height: 7px; background: #fff; }
.hero i.f::before { left: 5px; }
.hero i.f::after { right: 5px; }

/* door */
.door { --side: #b8901f; --top: #ffd23a; }
.door i.f { background: #120a04; border: 4px solid #ffd23a; border-radius: 10px 10px 0 0; box-sizing: border-box;
  box-shadow: 0 0 22px rgba(255,210,58,.65), inset 0 0 14px rgba(255,210,58,.25); }
.door i.f::after { content: ""; position: absolute; right: 8px; top: 50%; width: 6px; height: 6px; border-radius: 50%; background: #ffd23a; }

/* spikes: two crossed planes read as 3D while turning */
.spike { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-style: preserve-3d; }
.spike i { position: absolute; display: block; width: 26px; height: 32px; left: -13px; top: -16px;
  background: linear-gradient(90deg, #ff6a76, #d3162a 55%, #8a0c18);
  clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.spike i:nth-child(2) { transform: rotateY(90deg); }

/* ---- enter prompt ---- */
.s-enter { position: relative; z-index: 3; margin-top: 1vh; padding: 12px 28px; cursor: pointer;
  font: 700 17px 'Rajdhani', sans-serif; letter-spacing: .18em; color: #fff;
  background: rgba(10,5,20,.45); border: 2px solid #ff2b3d; border-radius: 6px;
  box-shadow: 0 0 18px rgba(255,43,61,.45); animation: pulse 1.6s ease-in-out infinite; }
.s-enter:hover, .s-enter:focus-visible { background: #ff2b3d; outline: none; }
@keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1) } 50% { opacity: .6; transform: scale(.97) } }

/* ---- responsive & motion ---- */
@media (max-width: 760px) { html.splash-on #splash { --s: .62; } .scene { margin: -6vh 0; } }
@media (max-height: 640px) { html.splash-on #splash { --s: .62; } }
@media (prefers-reduced-motion: reduce) {
  .spin { animation: none; transform: rotateY(-35deg); }
  .bob, .s-title, .shadow, .s-cloud, .s-dust i, .s-stars, .s-enter { animation: none; }
  .s-dust { display: none; }
}