.server-stage { position: relative; isolation: isolate; overflow: hidden; }
.stage-backdrop { position: absolute; z-index: -2; inset: -6rem 0 0; opacity: .19; }
.stage-backdrop > img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.stage-backdrop::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg,#111218ef,#11121822 60%,#11121866),linear-gradient(0deg,#111218,transparent 50%,#11121877); }
.stage-body { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.05fr); align-items: center; gap: 2rem; min-height: 36.5rem; padding-block: 2rem 1rem; }
.stage-copy { position: relative; z-index: 5; padding-block: 2rem; }
.stage-label { display: flex; align-items: center; gap: .75rem; font-size: .6875rem; font-weight: 800; letter-spacing: .1em; color: #b6bdc9; margin-bottom: 1.375rem; }
.stage-label > b { padding: .3rem .625rem; color: #a6def0; font-size: .6875rem; background: #233442; border: 1px solid #85cee51d; border-radius: 5px; letter-spacing: .02em; }
.stage-copy h1 { font: 800 clamp(3.5rem,5.7vw,5rem)/1.05 var(--font); letter-spacing: -.065em; margin-bottom: 1.25rem; color: #f5f3ef; }
.stage-copy h1 > span { display: inline-block; color: var(--orange); margin-left: .3em; font-size: .35em; letter-spacing: -.04em; vertical-align: .12em; }
.stage-subtitle { font-size: clamp(1.25rem,2.4vw,1.875rem); font-weight: 800; letter-spacing: -.035em; color: #ffae80; }
.stage-description { color: #a5a8b4; font-size: 1rem; margin-top: .875rem; max-width: 27rem; line-height: 1.8; }
.stage-actions { display: flex; align-items: stretch; gap: .875rem; margin-top: 2rem; }
.play-button { flex-shrink: 0; min-height: 3.75rem; padding: 1rem 1.375rem; gap: .75rem; font-size: .875rem; font-weight: 800; }
.play-button > svg { width: 1rem; height: 1rem; fill: currentColor; }
.stage-ip { display: flex; align-items: center; justify-content: space-between; min-width: 0; gap: 1.125rem; padding: .75rem 1rem; border: 1px solid #ffffff16; background: #1d202bd9; border-radius: 7px; text-align: left; }
.stage-ip small { display: block; color: #767f91; font-size: .5625rem; letter-spacing: .09em; font-weight: 800; }
.stage-ip strong { display: block; font-size: .875rem; color: #d4dde6; margin-top: .2rem; white-space: nowrap; }
.stage-ip > svg { width: 1.125rem; height: 1.125rem; flex-shrink: 0; fill: none; stroke: #8cb9ce; stroke-width: 1.5; }
.stage-guide-link { display: inline-flex; align-items: center; gap: .875rem; font-size: .75rem; color: #9c9fab; min-height: 2.75rem; margin-top: 1rem; }
.stage-guide-link > span { color: var(--orange); }
.hero-art { position: relative; height: 31rem; min-width: 0; --art-x: 0; --art-y: 0; }
.hero-art-inner { position: absolute; inset: 0; transform: perspective(1000px) rotateY(calc(var(--art-x) * 5deg)) rotateX(calc(var(--art-y) * -4deg)); transition: transform .35s ease-out; }
.hero-art img { position: absolute; pointer-events: none; user-select: none; object-fit: contain; max-width: none; filter: drop-shadow(0 16px 12px #0005); }
.art-block { aspect-ratio: 1; height: auto; }
.block-back { width: 30%; right: 1%; bottom: 1%; z-index: 1; filter: brightness(.8) drop-shadow(0 16px 12px #0006)!important; }
.block-main { width: 42%; left: 31%; bottom: -8%; z-index: 1; }
.block-left { width: 30%; left: 5%; bottom: -3%; z-index: 1; filter: brightness(.9) drop-shadow(0 16px 12px #0006)!important; }
.art-alex { height: 82%; width: auto; right: -1%; top: 3%; z-index: 2; transform: rotate(8deg); }
.art-steve { height: 98%; width: auto; left: 3%; top: -7%; z-index: 3; transform: rotate(-9deg); }
.art-pickaxe { width: 20%; left: -3%; top: 53%; z-index: 4; transform: rotate(-26deg); }
.art-diamond { width: 11%; right: 28%; top: 5%; z-index: 3; transform: rotate(17deg); }
.stage-bottom { padding-block: .75rem 1.5rem; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.stage-edition { color: #6f7687; font-size: .6875rem; display: inline-flex; align-items: center; gap: .75rem; }
.stage-edition i { width: 3px; height: 3px; background: #a86d4c; border-radius: 50%; }
.scene-picker { display: flex; align-items: center; gap: .875rem; color: #6f7687; font-size: .625rem; }
.scene-picker > div { display: flex; gap: .25rem; }
.scene-tab { font-size: .625rem; min-height: 2.75rem; padding: .5rem .625rem; color: #787e8f; border-radius: 5px; }
.scene-tab.active { background: #252631; color: #c8cfdb; }
.scene-source { font-size: .625rem; min-height: 2.75rem; color: #777d8e; text-decoration: underline; text-underline-offset: 4px; }
.player-links { display: grid; grid-template-columns: 1.15fr 1fr 1.1fr; gap: 1.125rem; padding-block: .5rem 1.5rem; }
.player-link { position: relative; overflow: hidden; border: 1px solid #ffffff0c; border-radius: 14px; background: #1b1d27; min-width: 0; min-height: 12.5rem; padding: 1.5rem; text-align: left; display: block; }
.player-link > div { position: relative; z-index: 2; }
.player-link h2 { font-size: 1.25rem; line-height: 1.4; letter-spacing: -.035em; margin-top: .75rem; max-width: 14rem; }
.player-link p { font-size: .75rem; color: #9499a8; margin-top: .625rem; max-width: 12rem; line-height: 1.75; }
.link-label { font-size: .5rem; letter-spacing: .12em; font-weight: 800; color: #9298aa; }
.link-open { display: inline-flex; align-items: center; gap: 1rem; min-height: 2.75rem; margin-top: .5rem; font-size: .6875rem; font-weight: 700; color: #c5d0dc; }
.link-open b { font-size: .875rem; font-weight: 500; }
.player-link > img { position: absolute; z-index: 1; width: 6rem; height: 6rem; object-fit: contain; right: -.375rem; bottom: .75rem; pointer-events: none; image-rendering: pixelated; filter: drop-shadow(0 10px 12px #0004); transform: rotate(-12deg); }
.rules-link { background: #1d2230; }
.rules-link .link-label { color: #9eb7da; }
.donate-link { background: #2c211e; border-color: #ff854817; }
.donate-link .link-label { color: #d2916c; }
.donate-link .link-open { color: #ffb68f; }
.donate-link > img { width: 7rem; height: 7rem; right: -.75rem; bottom: .5rem; transform: rotate(17deg); }
.profile-link { background: #1b282e; }
.profile-link .link-label { color: #83b5c3; }
.profile-link > img { width: 7rem; height: 7rem; right: -1.25rem; bottom: .5rem; transform: rotate(10deg); }
.play-guide { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.4fr); gap: clamp(2rem,6vw,6rem); padding-block: 4rem 5rem; }
.guide-heading, .guide-steps { min-width: 0; }
.guide-heading { position: relative; scroll-margin-top: calc(var(--header-height) + 3rem); }
.guide-heading h2 { font-size: clamp(1.75rem,3vw,2.5rem); line-height: 1.25; margin-block: 1rem 1.25rem; }
.guide-heading > p { font-size: .875rem; max-width: 19rem; line-height: 1.85; color: #8f96a6; }
.guide-heading > a { margin-top: 1rem; font-size: .75rem; }
.guide-block { position: absolute; width: 7rem; height: 7rem; object-fit: contain; right: 0; bottom: 1rem; opacity: .7; transform: rotate(-12deg); }
.guide-steps { list-style: none; margin: 0; padding: 0; }
.guide-steps > li { display: flex; align-items: flex-start; gap: 1.5rem; padding: 1.5rem 0; border-bottom: 1px solid var(--line); }
.guide-steps > li:first-child { padding-top: .25rem; }
.guide-steps > li > span { font: 800 1.125rem/1.4 var(--font); color: #ed8c5e; width: 2rem; flex-shrink: 0; }
.guide-steps h3 { font-size: 1rem; line-height: 1.4; letter-spacing: -.015em; margin-bottom: .5rem; }
.guide-steps p { font-size: .8125rem; color: #8f96a6; line-height: 1.85; }
.guide-copy { display: inline-flex; align-items: center; gap: 2rem; margin-top: .875rem; min-height: 2.75rem; padding: .625rem 1rem; background: #1b2431; border: 1px solid #ffffff0c; border-radius: 6px; color: #a9cee0; font-size: .875rem; font-weight: 700; }
.guide-copy svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.5; }
@media (min-width:2400px) { .stage-body { min-height: 37rem; } }
@media (max-width:1100px) {
 .stage-body { gap: 1rem; }
 .stage-copy h1 { font-size: 4rem; }
 .stage-actions { flex-direction: column; max-width: 21rem; }
 .play-button { min-height: 3.5rem; }
 .stage-ip { min-height: 3.5rem; }
 .hero-art { height: 29rem; }
 .player-link { padding: 1.25rem; }
 .player-link > img { opacity: .75; width: 5rem; height: 5rem; bottom: 1rem; }
 .player-link p { max-width: 10rem; }
 .player-link h2 { font-size: 1.125rem; }
 .guide-block { display: none; }
}
@media (max-width:959px) {
 .stage-body { min-height: 33rem; grid-template-columns: 1fr 1fr; padding-block: 1rem; }
 .stage-copy { padding-block: 2rem; }
 .stage-copy h1 { font-size: clamp(2.75rem,6.2vw,3.75rem); }
 .stage-subtitle { font-size: 1.375rem; }
 .stage-description { font-size: .875rem; }
 .hero-art { height: 25rem; }
 .scene-picker > span, .stage-edition { display: none; }
 .stage-bottom { justify-content: flex-end; padding-block: 0 1.25rem; }
 .player-links { grid-template-columns: repeat(3,minmax(0,1fr)); gap: .75rem; }
 .player-link { min-height: 13rem; padding: 1rem; }
 .player-link h2 { font-size: 1rem; max-width: 10rem; }
 .player-link p { max-width: 100%; font-size: .6875rem; }
 .player-link > img { width: 4.5rem; height: 4.5rem; right: -.5rem; bottom: .25rem; opacity: .6; }
 .player-link .link-open { position: relative; z-index: 3; }
 .play-guide { gap: 2.5rem; padding-block: 3.5rem 4rem; }
}
@media (max-width:639px) {
 .stage-body { display: flex; flex-direction: column; gap: 0; min-height: 0; padding-top: .5rem; }
 .stage-copy { padding-block: 2rem 0; width: 100%; }
 .stage-copy h1 { font-size: clamp(2.5rem,11.5vw,3.5rem); margin-bottom: 1rem; }
 .stage-label { font-size: .5625rem; gap: .625rem; margin-bottom: 1rem; }
 .stage-subtitle { font-size: 1.375rem; }
 .stage-description { margin-top: .5rem; font-size: .8125rem; }
 .stage-actions { flex-direction: row; max-width: none; margin-top: 1.5rem; gap: .625rem; flex-wrap: wrap; }
 .play-button { width: 100%; min-height: 3.5rem; }
 .stage-ip { width: 100%; min-height: 3.5rem; padding: .625rem 1rem; }
 .stage-ip strong { font-size: .9375rem; }
 .stage-guide-link { margin-top: .5rem; font-size: .6875rem; }
 .hero-art { width: 100%; height: 20rem; margin: .5rem 0 0; max-width: 26rem; }
 .art-steve { height: 95%; top: -3%; left: 6%; }
 .art-alex { height: 80%; right: 0; top: 4%; }
 .block-left { bottom: 0; }
 .block-main { bottom: -4%; }
 .block-back { bottom: 3%; }
 .art-pickaxe { width: 19%; left: 0; }
 .stage-bottom { justify-content: flex-start; padding-block: 1rem; }
 .scene-picker { width: 100%; justify-content: space-between; gap: .5rem; }
 .scene-picker > span { display: block; }
 .scene-tab { font-size: .5625rem; padding-inline: .5rem; }
 .scene-source { font-size: .5625rem; }
 .player-links { grid-template-columns: minmax(0,1fr); gap: .75rem; padding-block: .5rem 0; }
 .player-link { min-height: 10rem; padding: 1.25rem; }
 .player-link h2 { font-size: 1.25rem; max-width: 80%; margin-top: .5rem; }
 .player-link p { max-width: 75%; font-size: .75rem; margin-top: .5rem; }
 .player-link > img { opacity: 1; width: 6rem; height: 6rem; right: .25rem; bottom: .5rem; }
 .player-link .link-open { margin-top: .25rem; }
 .play-guide { grid-template-columns: minmax(0,1fr); gap: 2rem; padding-block: 3rem; }
 .guide-heading h2 br { display: none; }
 .guide-heading h2 { font-size: 1.75rem; }
 .guide-steps > li { gap: 1rem; padding-block: 1.25rem; }
 .guide-steps h3 { font-size: .9375rem; }
 .guide-copy { gap: 1rem; font-size: .8125rem; }
}
@media (max-width:359px) {
 .stage-copy h1 { font-size: 2.5rem; }
 .stage-subtitle { font-size: 1.125rem; }
 .stage-ip strong { font-size: .875rem; }
 .hero-art { height: 17rem; }
 .scene-picker > span { display: none; }
 .scene-tab { padding-inline: .5rem; }
 .player-link h2 { font-size: 1.0625rem; }
 .player-link > img { width: 5rem; height: 5rem; right: -.5rem; opacity: .7; }
}
@media (prefers-reduced-motion:no-preference) {
 .stage-copy > * { animation: content-enter .6s cubic-bezier(.2,.8,.2,1) both; }
 .stage-copy > :nth-child(2) { animation-delay: .05s; }
 .stage-copy > :nth-child(3) { animation-delay: .1s; }
 .stage-copy > :nth-child(4) { animation-delay: .14s; }
 .stage-copy > :nth-child(5) { animation-delay: .18s; }
 .hero-art { animation: art-enter .85s cubic-bezier(.2,.8,.2,1) both; }
 .art-pickaxe { animation: pickaxe-float 6s ease-in-out infinite; }
 .art-diamond { animation: diamond-float 7s -2s ease-in-out infinite; }
 .player-link { transition: transform .25s, border-color .25s, background .25s; }
 .player-link > img { transition: transform .4s cubic-bezier(.2,.8,.2,1); }
 .player-link:hover { transform: translateY(-4px); border-color: #ffffff26; }
 .player-link:hover > img { transform: translateY(-5px) rotate(-5deg); }
 .stage-ip, .scene-tab { transition: border-color .2s, background .2s; }
 .stage-ip:hover { border-color: #85cee555; background: #252b39; }
}
@keyframes content-enter { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes art-enter { from { opacity: 0; transform: translateY(20px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes pickaxe-float { 0%,100% { transform: translateY(0) rotate(-26deg); } 50% { transform: translateY(-9px) rotate(-18deg); } }
@keyframes diamond-float { 0%,100% { transform: translateY(0) rotate(17deg); } 50% { transform: translateY(9px) rotate(6deg); } }