.detail-scene .detail-shell{row-gap:24px}
/* Pinned content: keep the existing scenes and add explicit navigation. */
.scene-step-nav{display:flex;justify-content:space-between;gap:12px;width:100%;grid-column:1/-1}
.scene-step-nav button{cursor:pointer;min-height:44px;padding:10px 16px;border:1px solid var(--glass-edge);border-radius:12px;background:var(--glass);color:var(--glass-text);font:600 14px system-ui}
.scene-step-nav button:hover{background:var(--paper);color:var(--river)}
.scene-step-nav button:focus-visible{outline:3px solid var(--rose);outline-offset:3px}
[data-scene="gameplay"] .mode-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
[data-scene="gameplay"] .mode-grid article{min-height:220px;padding:22px}
[data-scene="gameplay"] .mode-no{margin-bottom:28px}
[data-scene="gameplay"] .detail-heading{max-width:720px}
[data-scene="promise"] .detail-copy h1{font-size:clamp(25px,2.1vw,34px);line-height:1.3}
@media(max-width:1100px){[data-scene="gameplay"] .mode-grid{grid-template-columns:repeat(2,minmax(0,1fr))}[data-scene="gameplay"] .mode-grid article{min-height:170px}}
@media(max-width:600px){[data-scene="gameplay"] .mode-grid{grid-template-columns:1fr}[data-scene="gameplay"] .mode-grid article{min-height:0}.scene-step-nav button{padding:10px 12px;font-size:13px}}

.site-loading{position:fixed;inset:0;z-index:20000;display:grid;place-items:center;opacity:1;transition:opacity .2s ease}
.site-loading.is-ready{opacity:0;pointer-events:none}.site-loading[hidden]{display:none}
/* Remove decorative numbering without leaving an empty grid column. */
.detail-shell :is(.info-stack,.promise-list) article{grid-template-columns:minmax(0,1fr)}
.gacha-admin-toolbar{justify-content:flex-end}
.gacha-admin-toolbar:has(>button[hidden]){display:none}

/* Vertical account card: avatar, player name, then the two wallets. */
.chrome,.chrome-right{align-items:flex-start}
.chrome #account-open.is-member{display:flex;flex-direction:column;justify-content:center;gap:7px;width:126px;min-width:0;max-width:126px;min-height:0;height:auto;padding:14px 12px 12px;text-align:center;border-radius:20px;background:var(--paper)!important;box-shadow:0 8px 24px var(--shade)}
.chrome #account-open.is-member #account-avatar{display:block;width:42px;height:42px;border-radius:13px;object-fit:cover;image-rendering:pixelated;border:2px solid var(--rose-soft)}
.chrome #account-open.is-member #account-label{display:block!important;width:100%;max-width:100%;font-size:13px;font-weight:800;line-height:1.3;color:var(--river)}
.chrome #account-open.is-member #account-mini-balance{display:flex!important;flex-direction:column;gap:4px;width:100%;padding:7px 0 0;margin:0;border:0;border-top:1px solid var(--edge);font-size:10px;font-weight:650;line-height:1.3;white-space:normal}
.chrome #account-open.is-member .account-wallet-line{display:block!important;overflow-wrap:anywhere;color:var(--river)}
.chrome #account-open.is-member .account-wallet-line:last-child{color:var(--violet)}

/* Sixth scene and fifth information tab share the existing horizontal navigation. */
.scene:nth-child(6){--index:5}
.scene-nav{grid-template-columns:repeat(5,minmax(0,1fr));width:min(540px,calc(100vw - 28px));--tabs-padding:5px}
.scene-nav .nav-progress{width:calc((100% - 2 * var(--tabs-padding))/5)}
.detail-scene .staff-shell{width:min(760px,100%)!important;display:grid;grid-template-columns:1fr;gap:24px}
.staff-shell .detail-heading{max-width:none;text-align:center;padding:22px 26px}
.staff-shell .detail-heading h1{margin:0;max-width:none}
@media(max-width:600px){
 .chrome #account-open.is-member{width:98px;max-width:98px;padding:10px 8px;gap:5px;border-radius:16px}
 .chrome #account-open.is-member #account-avatar{width:32px;height:32px;border-radius:10px}
 .chrome #account-open.is-member #account-label{font-size:12px}
 .chrome #account-open.is-member #account-mini-balance{font-size:9px;gap:3px;padding-top:5px}
 .scene-nav button b{font-size:11px}
 [data-scene="staff"]{padding-top:166px}
}
/* Star fields stay inside information cards, beneath readable content. */
.detail-scene :is(.detail-copy,.detail-heading,.info-stack,.promise-list,.mode-grid article,.connect-card){position:relative;isolation:isolate;overflow:hidden;background:radial-gradient(ellipse at bottom,#254c50 0%,#132e39 55%,#111b29 100%)!important;border-color:#d6eeec40!important;box-shadow:0 12px 30px #071b2426}
.detail-scene :is(.detail-copy,.detail-heading,.info-stack,.promise-list,.mode-grid article,.connect-card)>*{position:relative;z-index:1}
.detail-scene :is(.detail-copy,.detail-heading,.info-stack,.promise-list,.mode-grid article,.connect-card)::before,
.detail-scene :is(.detail-copy,.detail-heading,.info-stack,.promise-list,.mode-grid article,.connect-card)::after{content:"";position:absolute;inset:-320px 0 0;z-index:0;pointer-events:none;background-repeat:repeat;animation:card-stars 52s linear infinite paused;background-image:radial-gradient(1px 1px at 17px 27px,#e2fff5cc 95%,transparent),radial-gradient(1px 1px at 93px 86px,#fce0ed99 95%,transparent),radial-gradient(1px 1px at 154px 143px,#ffffffad 95%,transparent),radial-gradient(1px 1px at 65px 219px,#e2fff566 95%,transparent),radial-gradient(1px 1px at 201px 283px,#ffffff99 95%,transparent);background-size:239px 320px;opacity:.65}
.detail-scene :is(.detail-copy,.detail-heading,.info-stack,.promise-list,.mode-grid article,.connect-card)::after{background-image:radial-gradient(1.5px 1.5px at 42px 64px,#ffc3d8aa 90%,transparent),radial-gradient(1.5px 1.5px at 218px 244px,#d7fff3bb 90%,transparent);background-size:307px 320px;animation-duration:85s;opacity:.55}
.detail-scene.is-active :is(.detail-copy,.detail-heading,.info-stack,.promise-list,.mode-grid article,.connect-card)::before,
.detail-scene.is-active :is(.detail-copy,.detail-heading,.info-stack,.promise-list,.mode-grid article,.connect-card)::after{animation-play-state:running}
@keyframes card-stars{to{transform:translateY(320px)}}

/* Three distinct staff cards orbit without duplicating people or contact details. */
.detail-scene .staff-shell{gap:12px}
.staff-shell .detail-heading{padding:18px 24px}
.staff-carousel{--staff-w:200px;--staff-h:248px;--staff-depth:174px;--staff-tilt:-12deg;text-align:center}
.staff-stage{position:relative;height:352px;width:100%;overflow:hidden;perspective:1000px}
.staff-orbit{position:absolute;top:42px;left:calc(50% - var(--staff-w)/2);width:var(--staff-w);height:var(--staff-h);transform-style:preserve-3d;animation:staff-orbit 30s linear infinite paused}
.staff-card{--staff-color:255,183,210;--staff-index:0;position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:22px 18px;border:1px solid rgba(var(--staff-color),.65);border-radius:18px;background:radial-gradient(ellipse at 50% 100%,rgba(var(--staff-color),.24),transparent 75%),linear-gradient(145deg,#18383f,#111d2c);box-shadow:0 16px 32px #081b2440,inset 0 0 28px rgba(var(--staff-color),.08);backface-visibility:hidden;transform:rotateY(calc(120deg * var(--staff-index))) translateZ(var(--staff-depth))}
.staff-card:nth-child(2){--staff-color:181,185,255;--staff-index:1}
.staff-card:nth-child(3){--staff-color:160,230,206;--staff-index:2}
.staff-monogram{display:grid;place-items:center;width:64px;height:64px;margin-bottom:8px;border-radius:20px;border:1px solid rgba(var(--staff-color),.45);background:rgba(var(--staff-color),.12);color:rgb(var(--staff-color));font-size:34px;font-weight:750}
.staff-shell .staff-role{margin:0;color:rgb(var(--staff-color))!important;font-size:10px;letter-spacing:.16em;font-weight:700}
.staff-card h2{margin:0;font-size:32px;letter-spacing:-.02em}
.staff-card-rule{width:30px;height:2px;margin-top:12px;background:rgba(var(--staff-color),.65);border-radius:2px}
.staff-invite .staff-monogram{width:48px;height:48px;margin-bottom:3px;font-size:30px}
.staff-card.staff-invite h2{font-size:17px;line-height:1.55;font-weight:500;letter-spacing:0}
.staff-invite strong{font-weight:800}
.scene.is-active .staff-orbit{animation-play-state:running}
.effects-paused .scene .staff-orbit{animation-play-state:paused}
.effects-paused .detail-scene :is(.detail-copy,.detail-heading,.info-stack,.promise-list,.mode-grid article,.connect-card)::before,
.effects-paused .detail-scene :is(.detail-copy,.detail-heading,.info-stack,.promise-list,.mode-grid article,.connect-card)::after{animation-play-state:paused}
@keyframes staff-orbit{from{transform:rotateX(var(--staff-tilt)) rotateY(0)}to{transform:rotateX(var(--staff-tilt)) rotateY(1turn)}}
@media(max-width:600px){
 .staff-carousel{--staff-w:164px;--staff-h:230px;--staff-depth:115px;--staff-tilt:-8deg}
 .staff-stage{height:300px}
 .staff-orbit{top:30px}
 .staff-card{padding:17px 12px;gap:8px}
 .staff-card h2{font-size:28px}
 .staff-card.staff-invite h2{font-size:15px;line-height:1.5}
 .staff-shell .staff-role{font-size:9px;letter-spacing:.1em}
 .staff-monogram{width:54px;height:54px;font-size:28px}
}
@media(prefers-reduced-motion:reduce){
 .staff-stage{height:auto;overflow:visible;perspective:none}
 .staff-orbit{position:static;width:auto;height:auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;transform:none;animation:none}
 .staff-card{position:relative;inset:auto;min-height:248px;transform:none;backface-visibility:visible}
}
@media(prefers-reduced-motion:reduce) and (max-width:600px){.staff-orbit{grid-template-columns:1fr}.staff-card{min-height:220px}}
/* Keep the orbit clear of the fixed bottom navigation on shorter screens. */
.staff-carousel{--staff-h:220px}
.staff-stage{height:308px}
.staff-orbit{top:26px}
.staff-shell .detail-heading{padding:14px 24px}
.staff-shell .detail-heading h1{font-size:30px}
.staff-card{backface-visibility:visible}
.staff-card>*{backface-visibility:hidden;transform:translateZ(1px)}
.staff-card::after{content:"✧";position:absolute;inset:-1px;display:grid;place-items:center;border:1px solid rgba(var(--staff-color),.6);border-radius:18px;background:radial-gradient(ellipse at bottom,rgba(var(--staff-color),.22),transparent),linear-gradient(145deg,#18383f,#111d2c);color:rgba(var(--staff-color),.6);font-size:54px;backface-visibility:hidden;transform:rotateY(180deg) translateZ(1px)}
@media(max-width:600px){.staff-carousel{--staff-h:230px}.staff-stage{height:300px}.staff-orbit{top:30px}}
@media(prefers-reduced-motion:reduce){.staff-stage{height:auto}.staff-orbit{top:auto}.staff-card>*{transform:none}.staff-card::after{display:none}}
.staff-card{transform-style:preserve-3d}
.staff-card::after{content:"";background:radial-gradient(circle at center,rgba(var(--staff-color),.4) 0 2px,transparent 3px),radial-gradient(ellipse at bottom,rgba(var(--staff-color),.22),transparent),linear-gradient(145deg,#18383f,#111d2c)}
/* Copy labels participate in layout instead of overlapping the server details. */
.detail-scene .connect-card{display:flex;flex-direction:column;align-items:flex-start}
.detail-scene .connect-card .connect-action{position:relative;inset:auto;align-self:flex-end;display:inline-flex;margin-top:16px;padding:8px 12px;border:1px solid #ffc3d840;border-radius:9px;background:#ffc3d812;line-height:1.3}
.detail-scene .connect-card strong{max-width:100%;overflow-wrap:anywhere;white-space:normal}
/* Top-layer feedback remains visible above both scenes and modal dialogs. */
#toast:not([hidden]){visibility:visible;opacity:1!important}
#toast{position:fixed;inset:24px auto auto 50%;margin:0;transform:translateX(-50%)!important;width:max-content;max-width:calc(100vw - 32px);height:auto;padding:13px 22px;border:1px solid #eeb5c7;border-radius:14px;background:#fffaf7;color:#193b42;box-shadow:0 10px 35px #0d263b40;font:650 14px/1.5 system-ui;z-index:30000;pointer-events:none}
#toast::backdrop{background:transparent;pointer-events:none}
/* The supplied login card, recolored in the site's rose and deep teal. */
#account-dialog:has(#login-form:not([hidden])){--login-accent:#963659;--login-deep:#193b42;width:min(350px,calc(100vw - 44px));max-width:350px;max-height:calc(100dvh - 40px);padding:0;border:2px solid var(--login-deep)!important;border-radius:0 28px 0 28px;background:#fffaf7!important;color:var(--login-deep)!important;box-shadow:-9px 0 0 var(--login-deep),-9px 8px 24px #142b3440!important;overflow:auto}
#account-dialog:has(#login-form:not([hidden])) .dialog-head{position:relative;isolation:isolate;min-height:98px;margin:0;padding:24px 44px 23px;background:var(--login-accent);color:#fffaf7;box-shadow:inset 5px 0 #60233d;overflow:hidden;border:0}
#account-dialog:has(#login-form:not([hidden])) .dialog-head::before{content:"SKANMINE";position:absolute;z-index:-1;bottom:0;left:16px;font-size:38px;line-height:1;font-weight:900;letter-spacing:.06em;color:#ffc3d833}
#account-dialog:has(#login-form:not([hidden])) #account-title{margin:0;color:#fffaf7;font-size:26px;font-weight:800}
#account-dialog:has(#login-form:not([hidden])) .dialog-head .icon-button{top:9px;right:9px;width:30px;height:30px;background:#ffffff12;color:#fffaf7;border:0;border-radius:9px}
#account-dialog #login-form{display:flex;flex-direction:column;align-items:stretch;margin:0;padding:18px 0 12px}
#account-dialog #login-form[hidden]{display:none}
#account-dialog .login-field-area,#account-dialog .login-footer-area{padding:12px 28px;transition:background .25s ease,padding .25s ease}
#account-dialog #login-form label{display:block;margin:0 0 8px;color:var(--login-deep);font-size:12px;font-weight:700}
#account-dialog #login-form input{width:100%;height:46px;margin:0;padding:0 13px;border:2px solid var(--login-accent)!important;border-radius:9px;background:#fffaf7!important;color:var(--login-deep)!important;font:500 13px system-ui;box-shadow:0 5px 7px -4px #193b4240;transition:color .25s,background .25s,border-color .25s}
#account-dialog #login-form input::placeholder{color:#976077;font-size:12px;font-weight:500;opacity:1}
#account-dialog #login-form input:focus-visible{outline:2px solid #ffd2e2!important;outline-offset:3px}
#account-dialog #login-form .password-field{width:100%;margin:0}
#account-dialog #login-form #login-password{padding-right:62px}
#account-dialog #login-form .password-toggle{top:0;right:6px;height:46px;min-width:48px;color:var(--login-accent);font-size:11px}
#account-dialog #login-form .login-field-area:focus-within{padding-inline:22px;background:var(--login-accent)}
#account-dialog #login-form .login-field-area:focus-within label,#account-dialog #login-form .login-field-area:focus-within .password-toggle{color:#fffaf7}
#account-dialog #login-form .login-field-area:focus-within input{background:var(--login-accent)!important;color:#fffaf7!important;border-color:#fffaf7!important}
#account-dialog #login-form .login-field-area:focus-within input::placeholder{color:#ffe0eb}
#account-dialog #login-submit{margin:0;width:100%;height:46px;min-height:46px;padding:0 14px;border:2px solid var(--login-accent);border-radius:9px;background:var(--login-accent);color:#fffaf7;font-weight:750;box-shadow:0 5px 7px -4px #193b4240}
#account-dialog #login-submit:hover{transform:none;background:#7f2c49}
#account-dialog #login-submit:active{transform:scale(.97)}
#account-dialog #login-form .muted{margin:15px 0 0;color:#687a7d;font-size:11px;line-height:1.6}
#account-dialog #login-error{margin:0 0 12px;color:#a32249;font-size:12px;line-height:1.5}
#account-dialog #login-error:empty{display:none}
@media(hover:hover){
 #account-dialog #login-form .login-field-area:hover{padding-inline:22px;background:var(--login-accent)}
 #account-dialog #login-form .login-field-area:hover label,#account-dialog #login-form .login-field-area:hover .password-toggle{color:#fffaf7}
 #account-dialog #login-form .login-field-area:hover input{background:var(--login-accent)!important;color:#fffaf7!important;border-color:#fffaf7!important}
 #account-dialog #login-form .login-field-area:hover input::placeholder{color:#ffe0eb}
}
/* Override legacy dialog colors only within the new login card. */
#account-dialog:has(#login-form:not([hidden])) #account-title{color:#fffaf7!important}
#account-dialog:has(#login-form:not([hidden])) .dialog-head .icon-button{background:#ffffff18!important;color:#fffaf7!important}
#account-dialog #login-form .password-toggle{background:transparent!important;color:var(--login-accent)!important;box-shadow:none}
#account-dialog #login-form input::placeholder{color:#976077!important}
#account-dialog #login-form .login-field-area:focus-within label,#account-dialog #login-form .login-field-area:focus-within .password-toggle{color:#fffaf7!important}
#account-dialog #login-form .login-field-area:focus-within input::placeholder{color:#ffe0eb!important}
@media(hover:hover){
 #account-dialog #login-form .login-field-area:hover label,#account-dialog #login-form .login-field-area:hover .password-toggle{color:#fffaf7!important}
 #account-dialog #login-form .login-field-area:hover input::placeholder{color:#ffe0eb!important}
}
/* Reserve a right rail for the vertical profile and chat controls. The content
   scrolls inside its own safe viewport instead of passing behind fixed controls. */
.detail-scene{padding:90px max(184px,calc(env(safe-area-inset-right) + 160px)) 108px clamp(24px,5vw,78px);overflow:hidden;align-items:center}
.detail-scene .detail-shell{max-height:calc(100dvh - 198px);overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#ffc3d855 transparent;padding:2px!important;align-content:start}
.detail-scene .detail-heading{margin-top:0}
.detail-scene .connect-grid{width:100%;min-width:0}
.detail-scene .connect-card strong{font-size:clamp(20px,2.35vw,30px)}
#member-panel .account-tabs{background:#f0e6e5!important;border:1px solid #e2d4d1;padding:5px}
#member-panel .account-tabs .tab{background:transparent!important;color:#52676c!important}
#member-panel .account-tabs .tab.active{background:#fffaf7!important;color:#963659!important;box-shadow:0 2px 7px #193b4210!important}
#member-panel .account-tabs .tab:hover{color:#963659!important;background:#fffaf780!important}
.home-utilities{display:flex;align-items:stretch;justify-content:center;flex-wrap:wrap;gap:12px;margin-top:18px;max-width:100%}
.home-utilities .premium-trigger{margin:0;font-size:12px;padding:12px 16px}
.launcher-download{position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center;justify-content:center;gap:12px;padding:10px 16px;min-height:52px;min-width:220px;border:2px solid #fffaf7;border-radius:30em;background:#963659;color:#fffaf7;text-decoration:none;box-shadow:4px 5px 14px #102e3540;transition:background .25s}
.launcher-download:hover{background:#7f2c49}
.launcher-download::before{content:"";position:absolute;inset:0;z-index:-1;transform:scaleX(0);transform-origin:left;background:linear-gradient(100deg,#19634f,#547332);border-radius:inherit}
.launcher-download.is-downloading::before{animation:launcher-fill 3s linear forwards}
.launcher-download.is-downloading .launcher-arrow{animation:launcher-arrow .8s ease-in-out infinite alternate}
.launcher-download .launcher-logo{display:block;width:36px;height:36px;flex:0 0 36px;border-radius:50%;object-fit:cover}
@keyframes launcher-fill{to{transform:scaleX(1)}}
@keyframes launcher-arrow{to{transform:translateY(4px)}}
.launcher-download:focus-visible{outline:3px solid #ffc3d8;outline-offset:3px}
.launcher-download strong{display:block;font-size:13px;line-height:1.5}
.launcher-download small{display:block;font-size:10px;line-height:1.5;color:#d6e6e4;text-align:left}
@media(max-width:999px){
 .detail-scene,.detail-scene[data-scene="staff"]{padding:172px 24px 148px}
 .detail-scene .detail-shell{max-height:calc(100dvh - 320px)}
 .detail-scene .split-shell{grid-template-columns:1fr;gap:18px}
 .detail-scene :is(.detail-copy,.info-stack,.promise-list){width:100%;max-width:none;justify-self:stretch}
 .info-open .chat-toggle{bottom:90px;height:44px;width:44px;padding:0}
 .info-open .chat-toggle span{display:none}
}
@media(max-width:600px){
 .detail-scene,.detail-scene[data-scene="staff"]{padding:142px 12px 148px}
 .detail-scene .detail-shell{max-height:calc(100dvh - 290px)}
 .home-utilities{gap:8px;margin-top:14px}
 .home-utilities .premium-trigger{font-size:11px;padding:10px 13px}
 .launcher-download{padding:8px 13px;min-height:48px}
 .launcher-download strong{font-size:12px}
 .home-scene{overflow-y:auto!important}
}
.detail-scene .detail-shell>*{flex-shrink:0}
.detail-scene .detail-shell{grid-auto-rows:max-content}
.detail-scene .connect-shell{gap:18px}
.connect-shell .detail-heading{padding:18px 24px;max-width:550px}
.connect-shell .detail-heading h1{font-size:30px}
.detail-scene .connect-card{padding:20px;min-height:0}
.detail-scene .connect-card strong{margin-top:22px}
.detail-scene .connect-card .connect-action{margin-top:12px}
.home-utilities .minecraft-button-logo{display:block;flex:0 0 30px;width:30px;height:30px;border-radius:5px;object-fit:contain;image-rendering:pixelated}
.detail-scene .detail-shell{touch-action:pan-y pinch-zoom}