.extra-app{display:flex;flex-direction:column;gap:6px;min-width:0;min-height:0;padding:6px;box-sizing:border-box;color:#17243b;background:#eef5ff;overflow:auto;font-family:system-ui,sans-serif}
.extra-app button,.extra-app input,.extra-app select,.extra-app textarea{font:inherit;min-width:0;padding:5px;border:1px solid #9cadc6;border-radius:5px}.extra-app button{cursor:pointer;background:#fff;color:#223660}.extra-app button:active{background:#bee5ff}.extra-app p{margin:2px 0;font-size:11px}.extra-app textarea{width:100%;min-height:70px;box-sizing:border-box;flex:1}.extra-app output{font-size:24px}.extra-app label{display:flex;align-items:center;gap:4px}.extra-app label span{flex:1}.memory-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}.memory-grid button{font-size:22px}.piano-keys{display:flex;min-height:65px}.piano-keys button{flex:1;padding:2px;font-size:10px}
.dance-toolbar,.block-toolbar{display:flex;flex-wrap:wrap;gap:5px;font-size:11px}.dance-toolbar select{max-width:140px}.dance-stage{display:grid;grid-template-columns:1fr 2fr 1fr;align-items:center;gap:8px;min-height:135px;flex:1;background:#22294b;border-radius:9px;overflow:hidden;color:white}.dance-stage canvas{width:100%;height:100%;min-height:135px}.dance-player,.dance-rival{text-align:center;transition:transform .09s;min-width:0}.dance-face{margin:0 auto;background:#fff;color:#121526;border-radius:12px;font-weight:bold;font-size:clamp(14px,3vw,48px);padding:14px 3px;max-width:180px}.dance-rival img{width:100%;max-height:200px;object-fit:contain;image-rendering:auto}.dance-stage small{font-size:10px}.dance-keys{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}.dance-keys button{font-size:22px;touch-action:manipulation}.block-viewport{min-height:150px;flex:1;position:relative}.block-viewport canvas{width:100%;height:100%;display:block;touch-action:none}.software-fullscreen .extra-app{height:100%;font-size:16px}.software-fullscreen .dance-stage{min-height:200px}.software-fullscreen .block-viewport{min-height:220px}.software-fullscreen .dance-stage canvas{max-height:65vh}.software-fullscreen .dance-stage small{font-size:16px}.computer-desktop{overflow-y:auto!important;overflow-x:hidden!important}
.voxel-app{background:#172d29!important;color:#efffe9!important;gap:0!important;padding:0!important;overflow:hidden!important;min-height:240px;font:13px system-ui!important}
.voxel-top{display:flex;align-items:center;gap:9px;flex-wrap:wrap;padding:8px 12px;background:#263d33}.voxel-top strong{color:#f6e2a5;font-size:18px}.voxel-top span{flex:1;color:#b3c9b1;font-size:11px}.voxel-app button{background:#354d3c;color:#f4f7de;border:2px solid #688366;border-radius:2px;box-shadow:inset 0 -3px #0003;cursor:pointer}.voxel-app button:active{background:#729358}
.voxel-view{position:relative;flex:1;min-height:120px;overflow:hidden;outline:none}.voxel-view canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}.voxel-cross{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);color:#fff;font:26px monospace;text-shadow:1px 1px #000;pointer-events:none;z-index:1}.voxel-help{position:absolute;left:12px;top:12px;color:#fff;font-size:12px;background:#10241b88;padding:8px;pointer-events:none}.voxel-coords{position:absolute;right:10px;top:12px;background:#10241b88;padding:7px;color:#fff;font:12px monospace;pointer-events:none}.voxel-oxygen{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);z-index:2;padding:5px 10px;border:2px solid #d9f7ff;background:#133b5dcc;color:#74d9ff;font:700 14px monospace;letter-spacing:2px;pointer-events:none}
.voxel-hotbar{display:flex;gap:4px;justify-content:flex-start;padding:7px;overflow-x:auto;background:#1c2b21}.voxel-hotbar button{flex:0 0 74px;min-height:54px;font-size:11px;padding:3px!important}.voxel-hotbar button:before{content:'';display:block;width:22px;height:22px;background:var(--block-color);margin:0 auto 3px;box-shadow:inset -5px -5px #0002,inset 3px 3px #ffffff22}.voxel-hotbar button.selected{border-color:#f3df93;background:#586f3d}.voxel-bottom{display:flex;align-items:center;gap:5px;flex-wrap:wrap;padding:7px;background:#263d33}.voxel-bottom [role=status]{flex:1;font-size:11px;min-width:100px}.voxel-move{display:flex;gap:3px}.voxel-move button{width:33px;touch-action:none}.software-fullscreen .voxel-app{height:100%;min-height:0}.software-fullscreen .computer-app-content:has(.voxel-app){padding:0}.computer-app-window:not(.software-fullscreen) .voxel-app{min-height:220px;overflow:auto!important}.computer-app-window:not(.software-fullscreen) .voxel-help{display:none}@media(max-width:600px){.voxel-top{padding:4px;gap:4px}.voxel-top strong{font-size:13px}.voxel-top span{display:none}.voxel-help{font-size:9px;max-width:180px}.voxel-coords{top:65px;font-size:9px}.voxel-hotbar{justify-content:flex-start}.voxel-hotbar button{flex-basis:53px}.voxel-bottom [role=status]{flex-basis:100%}}
.voxel-shell{position:relative;background:#20382a!important;padding:0!important}.voxel-game-layer{display:flex;flex-direction:column;width:100%;height:100%;min-height:0}.voxel-menu{display:flex;align-items:center;justify-content:center;min-height:100%;padding:24px;box-sizing:border-box;overflow:auto;background:linear-gradient(155deg,transparent 45%,#47683a 45% 60%,transparent 60%),linear-gradient(25deg,#304c2c 40%,#76a34b 40% 55%,#adcac0 55% 75%,#a3d4e8 75%);color:#fff}.voxel-menu-card{box-sizing:border-box;width:min(480px,100%);max-height:100%;overflow:auto;padding:24px;background:#15251fee;border:3px solid #9aaa7e;box-shadow:6px 6px #0005;display:flex;flex-direction:column;gap:12px;text-align:center}.voxel-menu-card h1{font:900 clamp(30px,5vw,58px) system-ui;margin:5px 0;color:#f1e5b2;text-shadow:3px 4px #0008}.voxel-menu-card h2{margin:3px 0;color:#f1e5b2}.voxel-menu-card p{font:14px/1.7 system-ui!important;margin:0!important}.voxel-menu-card button{padding:12px!important;background:#4a6944!important;color:#fff!important;border:2px solid #9aaf7c!important;border-radius:0!important;font-size:15px!important;cursor:pointer}.voxel-menu-card button:hover{background:#648950!important}.voxel-menu-card input,.voxel-menu-card select{padding:10px;background:#e3e8d6;color:#18291c;max-width:100%;box-sizing:border-box}.voxel-menu-card label{display:flex;flex-direction:column;gap:7px;align-items:stretch}.voxel-menu-tag{color:#eed77f;font-weight:700}.voxel-menu-card small{color:#afc7a9}.voxel-world-row{display:grid;grid-template-columns:1fr 1fr;gap:7px;text-align:left;padding:10px;border:1px solid #81926e}.voxel-world-row strong,.voxel-world-row small{grid-column:1/-1}.voxel-overlay{position:absolute;inset:0;z-index:6;background:#102019aa;display:flex;align-items:center;justify-content:center;padding:20px;box-sizing:border-box}.voxel-overlay .voxel-menu-card{max-height:100%}.computer-app-window:not(.software-fullscreen) .voxel-menu{padding:5px}.computer-app-window:not(.software-fullscreen) .voxel-menu-card{padding:8px}.computer-app-window:not(.software-fullscreen) .voxel-menu-card h1{font-size:20px}

@font-face{font-family:VoxelPixel;src:url('./assets/fonts/fusion-pixel-12px.woff2') format('woff2');font-display:swap;font-weight:400}
.voxel-shell,.voxel-shell *{font-family:VoxelPixel,monospace!important;font-weight:400!important;font-synthesis:none}
.voxel-shell .voxel-menu-card h1{font-size:48px}.voxel-shell .voxel-menu-card h2{font-size:24px}.voxel-shell .voxel-menu-card p{font-size:12px!important;line-height:2!important}.voxel-shell .voxel-menu-card button{font-size:18px!important}.voxel-shell .voxel-top strong{font-size:24px}.voxel-shell .voxel-top button,.voxel-shell .voxel-top span,.voxel-shell .voxel-bottom button,.voxel-shell .voxel-coords,.voxel-shell .voxel-help{font-size:12px}.voxel-shell .voxel-hotbar button{font-size:12px}.voxel-shell .voxel-top{gap:6px}.voxel-shell .voxel-coords{max-width:45%;line-height:1.6;white-space:normal;text-align:right}
@media(max-width:700px){.voxel-shell .voxel-top strong{font-size:12px}.voxel-shell .voxel-top button{font-size:12px;padding:3px}.voxel-shell .voxel-coords{top:58px;max-width:80%;font-size:12px}.voxel-shell .voxel-menu-card h1{font-size:36px}}
.computer-app-window:has(.voxel-shell){font-family:VoxelPixel,monospace}
.voxel-shell .voxel-top .voxel-audio-toggle{width:112px;min-width:112px;white-space:nowrap}
.voxel-edition-badge{padding:9px 12px;border:2px solid #d9c68d;background:#24362dcc;color:#fff2b8;box-shadow:inset 0 0 0 2px #101b16,0 4px 0 #0b120f;font-size:13px;letter-spacing:.03em}
.voxel-menu{flex:1;width:100%;min-width:0}
.voxel-title-screen{position:relative;justify-content:center;overflow:hidden;background:linear-gradient(180deg,#79c8f0 0 43%,transparent 43%),linear-gradient(135deg,#cc7339 0 12%,#8b4c2b 12% 18%,#e7e5df 18% 27%,#6b913e 27% 42%,#365a2d 42% 55%,#b96b35 55% 67%,#6c3923 67% 100%);background-size:100% 100%;isolation:isolate}
.voxel-title-screen:before{content:"";position:absolute;inset:0;z-index:-1;background:repeating-linear-gradient(90deg,#ffffff08 0 32px,#0000000c 32px 64px),linear-gradient(180deg,transparent 0 38%,#ffffff26 38% 40%,transparent 40%);animation:voxel-panorama 24s linear infinite alternate;transform:scale(1.08)}
.voxel-title-card{width:min(590px,72%);margin-right:12%;padding:30px 42px;background:#111a14d9;border-color:#d8ddd2;box-shadow:0 0 0 4px #182019,10px 12px 0 #0007;overflow:visible}
.voxel-title-card h1{font-size:clamp(44px,7vw,78px)!important;letter-spacing:.04em;color:#f2f2ed!important;text-shadow:4px 5px #181818,7px 8px #626262;margin-bottom:12px}
.voxel-title-card>button:first-of-type{background:#16820c!important;border-color:#dfffd7!important;font-size:24px!important;padding:15px!important;box-shadow:inset 0 -5px #0b4a08,0 4px #0b120f!important}
.voxel-splash{position:absolute;right:-42px;top:82px;max-width:240px;color:#fff12c;font-size:15px;line-height:1.4;rotate:-9deg;text-shadow:2px 2px #241d00;animation:voxel-splash-pulse .8s steps(2,end) infinite}
.voxel-profile-card{position:absolute;right:3%;bottom:9%;width:150px;padding:14px;display:grid;justify-items:center;gap:7px;background:#d8d8d4;color:#292929;border:4px solid #262626;box-shadow:inset 0 0 0 3px #f5f5ef,6px 7px #0006;text-align:center}
.voxel-profile-card span{font-size:10px}.voxel-profile-avatar{position:relative;width:76px;height:128px}.voxel-profile-avatar i,.voxel-profile-avatar b,.voxel-profile-avatar em{position:absolute;display:block;image-rendering:pixelated}.voxel-profile-avatar i{left:17px;top:0;width:42px;height:42px;background:linear-gradient(#3f2a1e 0 24%,transparent 24%),linear-gradient(90deg,#b77c58 18%,#d9a37b 18% 80%,#a66d4e 80%);box-shadow:inset -7px 0 #0002}.voxel-profile-avatar i:after{content:"▪  ▪";position:absolute;left:8px;top:11px;color:#37375c;font:18px monospace}.voxel-profile-avatar b{left:8px;top:42px;width:60px;height:46px;background:#25a8aa;border-inline:12px solid #b77c58;box-sizing:border-box}.voxel-profile-avatar em{left:18px;top:88px;width:40px;height:38px;background:linear-gradient(90deg,#4a4385 46%,#252244 46% 54%,#4a4385 54%);border-bottom:8px solid #3b3b3b;box-sizing:border-box}
.voxel-world-list{width:min(800px,96%);text-align:left;background:#131b17ed}.voxel-create-world{background:#16820c!important;font-size:20px!important}.voxel-world-row{grid-template-columns:120px minmax(0,1fr) auto!important;align-items:center;gap:12px!important;background:#243028;border:3px solid #8d968b!important;box-shadow:inset 0 0 0 2px #121713;padding:8px!important}.voxel-world-row>div{display:grid;gap:5px}.voxel-world-row strong,.voxel-world-row small{grid-column:auto!important}.voxel-world-actions{display:flex!important;flex-direction:column;gap:5px}.voxel-world-actions button{padding:7px!important;font-size:12px!important}.voxel-world-preview{display:block;width:120px;height:72px;border:3px solid #151515;background:linear-gradient(180deg,#7bc8ef 0 42%,#4e8a35 42% 55%,#6c4628 55% 100%);image-rendering:pixelated;box-shadow:inset 0 -14px #36291d}.voxel-world-preview[data-terrain="flat"]{background:linear-gradient(180deg,#79c9ef 0 58%,#65a542 58% 68%,#8e6342 68% 100%)}.voxel-create-card{width:min(720px,96%);display:grid;grid-template-columns:1fr 1fr;text-align:left;gap:10px 18px}.voxel-create-card h1,.voxel-create-card>p,.voxel-create-card>button{grid-column:1/-1}.voxel-rule-toggle{display:grid!important;grid-template-columns:1fr auto;align-items:center!important;padding:10px;background:#28362e;border:2px solid #657368}.voxel-rule-toggle input{width:24px!important;height:24px;accent-color:#55b848}
@keyframes voxel-panorama{from{translate:-2% 0}to{translate:2% 0}}@keyframes voxel-splash-pulse{50%{scale:1.07}}
@media(max-width:760px){.voxel-title-card{width:94%;margin:0;padding:22px 16px}.voxel-title-card h1{font-size:42px!important}.voxel-profile-card{display:none}.voxel-splash{right:8px;top:56px;font-size:11px}.voxel-world-row{grid-template-columns:82px 1fr!important}.voxel-world-preview{width:82px;height:58px}.voxel-world-actions{grid-column:1/-1;flex-direction:row!important}.voxel-create-card{grid-template-columns:1fr}}
.voxel-shell[data-voxel-edition="java"] .voxel-joystick{display:none!important}
.voxel-shell[data-voxel-edition="java"] .voxel-view canvas{cursor:crosshair}
.voxel-shell[data-voxel-edition="bedrock"] .voxel-bottom{background:#294638}
.voxel-menu-card.voxel-inventory{width:min(980px,100%);text-align:left;padding:16px;background:#c6c6bc;color:#202820;border-color:#eee}
.voxel-menu-card.voxel-inventory h2{color:#253924}
.dance-keys button{font-size:32px;font-weight:900;-webkit-text-stroke:1px currentColor;min-height:46px}.dance-song-sources a{display:block;padding:7px 0;color:#214aa1;text-decoration:underline}.dance-song-sources{padding:6px;border-top:1px solid #a9bad2}
.dance-song-cards{display:flex;gap:8px;flex-wrap:wrap}.dance-song-cards button{flex:1;min-width:150px;padding:12px;background:#fff8d5;border:2px solid #ebbb4d;font-weight:700}.dance-stage{background:radial-gradient(ellipse at 16% 18%,#fff 0 5%,transparent 5.5%),radial-gradient(ellipse at 82% 25%,#fff 0 7%,transparent 7.5%),linear-gradient(#63c8ff 0 68%,#a7df64 68% 72%,#64b843 72% 100%);grid-template-columns:minmax(60px,1fr) minmax(120px,2fr) minmax(80px,1.4fr);min-height:250px}.dance-rival{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:end;gap:2px}.dance-rival img{height:90px;max-width:100%;display:block}.dance-stage small{color:#133819;background:#ffffffc9;border-radius:4px;padding:2px;display:inline-block}.dance-video{flex-shrink:0;max-width:480px;width:100%;align-self:center}.dance-video[hidden]{display:none}.dance-video iframe{width:100%;min-width:200px;height:220px;border:0}.software-fullscreen .dance-rival img{height:130px}.dance-song-cards button:hover{background:#ffe58e}
.dance-library{padding:8px;background:#dce8fa;border:1px solid #9cadc6;border-radius:5px;font-size:12px}.dance-library summary{cursor:pointer;font-weight:bold}.dance-library[open]{display:flex;flex-direction:column;gap:8px}.dance-library input[type=file]{max-width:100%}.dance-library input[type=number]{width:75px}.dance-toolbar select{max-width:min(320px,65vw)}.extra-app button:disabled{cursor:default;opacity:.55}
.inventory-layout{display:grid;grid-template-columns:1.25fr 1fr;gap:24px}.inventory-layout h3{margin:0 0 10px}.inventory-grid{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:3px}.inventory-pages{display:flex;align-items:center;justify-content:space-between;margin:8px 0}.voxel-inventory .inventory-slot,.voxel-inventory .inventory-output{position:relative;min-width:0;min-height:58px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#8c9188!important;border:2px solid!important;border-color:#535b50 #eef0df #eef0df #535b50!important;padding:3px!important;box-sizing:border-box;color:#fff!important}.inventory-slot small{font-size:10px;color:#fff;white-space:nowrap;max-width:100%;overflow:hidden}.inventory-count{position:absolute;right:2px;bottom:0;font-size:12px;text-shadow:1px 1px #000}.inventory-icon{display:block;width:22px;height:22px;margin:1px 0 9px;background:var(--item-color);box-shadow:inset -5px -5px #0003,inset 4px 4px #fff3}.inventory-slot[aria-pressed=true]{outline:2px solid #ffda63;z-index:1}.inventory-work{display:flex;align-items:center;gap:12px;margin:12px 0}.inventory-recipe{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3px;flex:1}.inventory-output{width:72px}.voxel-inventory button:disabled{cursor:default;opacity:.5}.voxel-inventory .inventory-slot:disabled{opacity:1}.inventory-slot.missing{background:#aa7770!important}.voxel-inventory small{color:inherit}.voxel-inventory select{width:100%}.voxel-inventory [role=status]{min-height:24px;font-weight:bold!important}
@media(max-width:760px){.inventory-layout{grid-template-columns:1fr;gap:16px}.voxel-menu-card.voxel-inventory{padding:10px}.inventory-grid{grid-template-columns:repeat(6,minmax(0,1fr))}.inventory-work{max-width:340px}.voxel-overlay{padding:8px}}

.dance-stage{grid-template-rows:minmax(0,1fr);height:clamp(280px,42vh,500px);flex:1 0 280px;min-height:280px}.dance-stage canvas{min-height:0;max-height:100%!important;align-self:stretch}.dance-rival img{height:clamp(65px,13vh,100px)!important}.dance-rival{max-height:100%;overflow:hidden}

/* Layout follows the available window, including tablet split-screen. */
.extra-app{container-type:inline-size;container-name:game-window}
.dance-toolbar{flex-shrink:0}.dance-toolbar label{min-width:0;max-width:100%}.dance-toolbar select{width:100%;max-width:100%}
.dance-keys{flex-shrink:0}.dance-keys button{min-height:44px;touch-action:manipulation}
.voxel-menu-card{max-width:100%;min-width:0}.voxel-menu-card input{min-width:0;width:100%}
.voxel-view{min-height:0}.voxel-bottom button,.voxel-move button{min-width:44px;min-height:44px;touch-action:none}.voxel-move{flex-wrap:wrap}
.voxel-top{flex-shrink:0}.voxel-hotbar{flex-shrink:0;max-width:100%;box-sizing:border-box}.voxel-bottom{flex-shrink:0;max-height:35%;overflow:auto;box-sizing:border-box}
@container game-window (max-width:520px){
  .dance-song-cards{display:grid;grid-template-columns:1fr 1fr;gap:4px}.dance-song-cards button{min-width:0;font-size:12px;padding:8px;overflow-wrap:anywhere}
  .dance-stage{grid-template-columns:1fr 1.4fr;grid-template-rows:100px minmax(150px,1fr);height:360px;min-height:300px;flex-basis:300px;gap:0}
  .dance-stage canvas{grid-row:2;grid-column:1/-1;width:100%;height:100%}
  .dance-player{grid-row:1;grid-column:1}.dance-face{font-size:20px;max-width:90px;padding:6px}
  .dance-rival{grid-row:1;grid-column:2;display:flex;align-items:center;justify-content:space-evenly}.dance-rival>div{flex:1;min-width:0}.dance-rival img{height:65px!important}.dance-stage small{font-size:9px!important}
  .dance-toolbar{font-size:12px}.dance-toolbar label{flex:1 1 100%}
  .voxel-menu{padding:8px}.voxel-menu-card{padding:12px;gap:8px}.voxel-menu-card h1{font-size:30px!important}
  .voxel-top{padding:4px;gap:3px}.voxel-top strong{font-size:12px!important}.voxel-top span{display:none}.voxel-top button{padding:4px!important;font-size:10px!important}
  .voxel-bottom{gap:3px;padding:4px}.voxel-bottom button{padding:3px!important;font-size:11px!important}.voxel-bottom [role=status]{flex-basis:100%;font-size:10px!important}
  .voxel-hotbar button{flex-basis:48px;min-height:44px}.voxel-hotbar{padding:4px}
  .inventory-layout{grid-template-columns:1fr;gap:12px}.inventory-grid{grid-template-columns:repeat(6,minmax(0,1fr))}
}
@media (orientation:landscape) and (max-height:540px){
  .software-fullscreen .extra-app{gap:3px;padding:3px}.software-fullscreen .dance-stage{height:180px;min-height:160px;flex-basis:160px;grid-template-columns:1fr 2fr 1.3fr;grid-template-rows:minmax(0,1fr)}
  .software-fullscreen .dance-stage canvas{grid-row:1;grid-column:2}.software-fullscreen .dance-rival{grid-row:1;grid-column:3;display:flex}.software-fullscreen .dance-player{grid-row:1;grid-column:1}
  .dance-song-cards button{padding:5px;font-size:11px}.dance-library{padding:3px}.dance-rival img{height:65px!important}.dance-face{font-size:20px;padding:6px}
  .voxel-top{padding:3px}.voxel-top strong,.voxel-top span{display:none}.voxel-hotbar{padding:2px}.voxel-hotbar button{min-height:40px}.voxel-bottom{padding:2px;max-height:28%}.voxel-bottom [role=status]{display:none}.voxel-move{flex-wrap:nowrap}.voxel-menu-card{padding:12px;gap:8px}
}

.voxel-hotbar button.empty:before{visibility:hidden}.voxel-hotbar button{flex:1 0 40px;max-width:76px}.voxel-joystick{position:relative;width:96px;height:96px;flex:0 0 96px;border-radius:50%;background:#e5f2d733;border:2px solid #aac396;touch-action:none;display:none}.voxel-joystick span{position:absolute;left:28px;top:28px;width:40px;height:40px;border-radius:50%;background:#dcf0b9;box-shadow:0 2px 5px #0008;pointer-events:none}.voxel-view canvas{cursor:crosshair}@media(pointer:coarse){.voxel-joystick{display:block}.voxel-move [data-key^="Key"]{display:none}.voxel-bottom{max-height:40%}.voxel-move{max-width:100px}}

.voxel-hand{position:absolute;right:8%;bottom:-24px;width:50px;height:125px;background:linear-gradient(#22a6a9 0 38%,#ba885f 38%);transform:rotate(-25deg);border:3px solid #674c35;box-shadow:inset -14px 0 #0002;pointer-events:none;z-index:2}.holding-pickaxe .voxel-hand i{position:absolute;width:12px;height:130px;background:#805731;left:-15px;top:-55px;border:3px solid #47311e;transform:rotate(-25deg)}.holding-pickaxe .voxel-hand i:before,.avatar-pick:before{content:"";position:absolute;width:68px;height:30px;background:#40d4d0;border:4px solid #236e6e;left:-30px;top:-8px;clip-path:polygon(0 0,100% 0,100% 100%,75% 100%,75% 45%,0 45%)}.voxel-avatar{width:90px;height:125px;position:relative;align-self:center;flex-shrink:0}.avatar-head{position:absolute;left:25px;top:0;width:40px;height:40px;background:linear-gradient(#473224 0 25%,transparent 25%),linear-gradient(90deg,#bc8963 20%,#dbac83 20% 75%,#bc8963 75%);box-shadow:inset -7px 0 #0002}.avatar-head:after{content:"▪ ▪";color:#373963;position:absolute;top:10px;left:7px;font:20px monospace}.avatar-body{position:absolute;left:15px;top:40px;width:60px;height:42px;background:#20a6ad;border-inline:12px solid #b98863;box-sizing:border-box}.avatar-legs{position:absolute;left:25px;top:82px;width:40px;height:42px;background:linear-gradient(90deg,#4b4383 46%,#2d285c 46% 54%,#4b4383 54%);border-bottom:8px solid #484846;box-sizing:border-box}.avatar-pick{position:absolute;left:1px;top:46px;height:67px;width:8px;background:#815b36;transform:rotate(25deg)}

@media(max-width:760px){.voxel-joystick{display:block}.voxel-move [data-key^="Key"]{display:none}.voxel-bottom{max-height:40%}.voxel-move{max-width:100px}}

/* The in-game inventory uses the same crisp block faces as the 3D world. */
.voxel-hotbar button:before,.inventory-icon{background-color:var(--block-color,var(--item-color));background-size:cover;image-rendering:pixelated}.voxel-hotbar button[data-block=grass]:before,.inventory-icon[data-block=grass]{background-image:url('./assets/minecraft-blocks/grass.png')}.voxel-hotbar button[data-block=dirt]:before,.inventory-icon[data-block=dirt]{background-image:url('./assets/minecraft-blocks/dirt.png')}.voxel-hotbar button[data-block=stone]:before,.inventory-icon[data-block=stone]{background-image:url('./assets/minecraft-blocks/cobblestone.png')}.voxel-hotbar button[data-block=wood]:before,.inventory-icon[data-block=wood]{background-image:url('./assets/minecraft-blocks/oak-log.png')}.voxel-hotbar button[data-block=planks]:before,.inventory-icon[data-block=planks]{background-image:url('./assets/minecraft-blocks/oak-planks.png')}.voxel-hotbar button[data-block=sand]:before,.inventory-icon[data-block=sand]{background-image:url('./assets/minecraft-blocks/sand.png')}.voxel-hotbar button[data-block=brick]:before,.inventory-icon[data-block=brick]{background-image:url('./assets/minecraft-blocks/bricks.png')}.voxel-hotbar button[data-block=bedrock]:before,.inventory-icon[data-block=bedrock]{background-image:url('./assets/minecraft-blocks/bedrock.png')}.voxel-hotbar button[data-block=obsidian]:before,.inventory-icon[data-block=obsidian]{background-image:url('./assets/minecraft-blocks/obsidian.png')}.voxel-hotbar button[data-block=endstone]:before,.inventory-icon[data-block=endstone]{background-image:url('./assets/minecraft-blocks/end-stone.png')}.voxel-hotbar button[data-block=darkplanks]:before,.inventory-icon[data-block=darkplanks]{background-image:url('./assets/minecraft-blocks/spruce-planks.png')}

.voxel-view.voxel-sleeping:after{content:"正在睡觉…";position:absolute;inset:0;background:#101326cc;display:grid;place-items:center;color:white;font-size:24px;animation:voxel-sleep 2.4s ease-in-out;z-index:5}@keyframes voxel-sleep{0%,100%{opacity:0}30%,80%{opacity:1}}

/* Wide media and an offline animated ensemble share the same stage. */
.dance-video{max-width:1100px;width:100%}.dance-video iframe{width:100%;height:auto;aspect-ratio:16/9;min-height:240px}.dance-performance{min-height:280px;aspect-ratio:16/9;display:flex;align-items:flex-end;justify-content:space-evenly;overflow:hidden;background:radial-gradient(ellipse at 20% 20%,white 0 7%,transparent 8%),linear-gradient(#75d3ff 0 70%,#80c54b 70%);border:4px solid #24482d;border-radius:12px;padding:20px 8px}.dance-performance figure{margin:0;width:18%;text-align:center;opacity:.55;transform:translateY(8px)}.dance-performance img{width:100%;max-height:300px;object-fit:contain}.dance-performance figcaption{background:#fffd;color:#17351e;border-radius:6px}.dance-performance .singing{opacity:1;animation:ensemble-bounce var(--beat,.6s) infinite ease-in-out}.dance-section{text-align:center;font-weight:bold}@keyframes ensemble-bounce{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-12px) rotate(2deg)}}@media(max-width:600px){.dance-performance{min-height:200px;padding:12px 4px}.dance-video iframe{min-height:180px}}@media(prefers-reduced-motion:reduce){.dance-performance .singing{animation:none}}

.dance-rival{grid-template-columns:repeat(3,minmax(0,1fr))}.dance-rival img{height:76px;object-fit:contain}.software-fullscreen .dance-rival img{height:96px}


/* One stage inside the existing computer application window. */
.dance-stage{position:relative;isolation:isolate;grid-template-columns:minmax(70px,1fr) minmax(160px,2fr) minmax(100px,1.5fr);grid-template-rows:1fr!important;min-height:320px}.dance-lanes{position:relative;align-self:stretch;grid-column:2;grid-row:1;min-width:0;z-index:2}.dance-lanes canvas{width:100%;height:100%;display:block}.dance-targets{position:absolute;top:80%;left:0;right:0;transform:translateY(-50%);display:grid;grid-template-columns:repeat(4,1fr);gap:2px}.dance-targets button{padding:0!important;background:#182431aa!important;border:2px solid #fff9!important;color:#ff698d!important;min-height:44px;font-size:clamp(25px,4vw,56px)!important;touch-action:manipulation}.dance-targets button:nth-child(2){color:#ffd45e!important}.dance-targets button:nth-child(3){color:#5ce4ce!important}.dance-targets button:nth-child(4){color:#ad96ff!important}.dance-stage .dance-video{position:absolute;inset:0;max-width:none;width:100%;height:100%;z-index:-1;overflow:hidden}.dance-video>p{position:absolute;top:0;left:0;background:#fff9;z-index:1;font-size:10px}.dance-stage .dance-video>div,.dance-stage .dance-video iframe{width:100%;height:100%;min-height:0;aspect-ratio:auto}.dance-player{grid-column:1!important;grid-row:1!important;align-self:end;z-index:1;margin-bottom:25px}.dance-rival{grid-column:3!important;grid-row:1!important;align-self:end;margin-bottom:25px;z-index:1}.dance-rival>div{transition:transform .12s}.dance-monitor{padding:9px;background:#7b8584;border:4px solid #394442;border-radius:12px;box-shadow:0 7px #414b48;max-width:180px;margin:auto}.dance-face{position:relative;aspect-ratio:1.2;background:white;padding:0!important;border-radius:5px;max-width:none;display:grid;place-content:center;gap:12px}.dance-eyes{display:flex;gap:clamp(10px,2vw,32px)}.dance-eyes i{display:block;background:#121526;border-radius:50%;width:clamp(9px,1.5vw,22px);height:clamp(9px,1.5vw,22px)}.dance-mouth{width:0;height:0;border-left:9px solid transparent;border-right:9px solid transparent;border-top:13px solid #121526;margin:auto}.dance-player.singing .dance-mouth{animation:computer-mouth .25s infinite alternate}.dance-player.singing .dance-face{animation:computer-face .6s infinite alternate}.dance-rival .singing img{filter:brightness(1.12)}@keyframes computer-mouth{to{border-radius:50%;border:0;width:18px;height:22px;background:#121526}}@keyframes computer-face{to{transform:translate(2px,-3px)}}@media(max-width:600px){.dance-stage{grid-template-columns:70px minmax(130px,2fr) minmax(70px,1fr)!important;min-height:320px}.dance-rival{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:3px}.dance-monitor{padding:4px;border-width:2px}.dance-rival img{height:55px!important}.dance-stage small{font-size:9px!important}}

.dance-stage{grid-template-rows:minmax(0,1fr)!important;isolation:isolate}.dance-lanes{min-height:0;overflow:hidden;height:100%}.dance-lanes canvas{position:absolute;inset:0;width:100%;height:100%}.dance-targets{z-index:3}

/* The computer keeps its original dark display and white face. */
.dance-face{background:#080b10;color:#fff}.dance-eyes i{background:#fff}.dance-mouth{border-top-color:#fff}.dance-lead-character{display:block;max-width:90%;height:clamp(90px,24vh,240px);object-fit:contain;margin:auto}.dance-player.singing .dance-mouth{animation:computer-white-mouth .25s infinite alternate}@keyframes computer-white-mouth{to{border-radius:50%;border:0;width:18px;height:22px;background:#fff}}

.game-loading{position:absolute;inset:0;z-index:10;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#172737;color:white}.game-is-loading .dance-status:before{content:'';display:inline-block;width:16px;height:16px;margin-right:8px;border:3px solid #89a7bc;border-top-color:#3459dc;border-radius:50%;animation:game-spin .8s linear infinite}@keyframes game-spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.game-is-loading .dance-status:before{animation:none}}

/* The connection screen is a tiny stage crew instead of an indefinite spinner. */
.dance-loading-stage{display:none;position:absolute;inset:0;z-index:18;overflow:hidden;background:linear-gradient(#61cffa 0 61%,#85d357 62%);border-radius:10px;pointer-events:none}
.game-is-loading .dance-loading-stage{display:block}
.dance-loading-worker{position:absolute;bottom:12%;left:-28%;width:128px;height:112px;animation:dance-load-carry 2.2s ease-in-out infinite}
.dance-loading-worker:nth-child(2){bottom:27%;animation-delay:-.72s}.dance-loading-worker:nth-child(3){bottom:43%;animation-delay:-1.44s}
.dance-loading-worker i{position:absolute;left:0;bottom:0;width:58px;height:83px;background:url('./assets/sprunki-views/right/oren.png') center bottom/contain no-repeat}
.dance-loading-worker:nth-child(2) i{background-image:url('./assets/sprunki-views/right/pinki.png')}.dance-loading-worker:nth-child(3) i{background-image:url('./assets/sprunki-views/right/sky.png')}
.dance-loading-worker b{position:absolute;right:0;bottom:18px;width:75px;padding:5px;border:3px solid #233746;border-radius:8px;background:#fff8;color:#213342;font:800 11px/1.1 sans-serif;text-align:center}
.dance-loading-floor b{background:conic-gradient(#ff668b,#ffe05e,#5ce4e5,#9478f2,#ff668b);color:#172532}.dance-loading-sky b{border-radius:50%;background:linear-gradient(#72d7ff 0 62%,#fff 63% 69%,#8bdd63 70%)}
@keyframes dance-load-carry{0%{left:-30%;transform:translateY(2px)}48%{left:43%;transform:translateY(-5px)}100%{left:112%;transform:translateY(2px)}}

/* A recoverable miss scene: one role icon leaves, a gray singer walks in, then the icon returns. */
.dance-character-icon{display:block;width:52px;height:62px;background-image:url('./assets/dance-reference/role-icons.png');background-repeat:no-repeat;background-size:655px 130px;image-rendering:auto}
.dance-failure-scene{display:none;position:absolute;inset:0;z-index:17;pointer-events:none;overflow:hidden;background:#16223888}
.dance-failure-scene.is-active{display:block}
.dance-failure-scene strong{position:absolute;left:12%;right:12%;top:10%;padding:8px;border:3px solid #222d3a;border-radius:10px;background:#fff;color:#303846;text-align:center;font:800 clamp(13px,2vw,20px)/1.2 sans-serif}
.dance-failure-icon{position:absolute;left:24%;bottom:24%;width:62px;height:62px;padding:5px;border:4px solid #303947;border-radius:12px;background:#f7f2e6;animation:dance-icon-taken 1.05s ease-in forwards}
.dance-failure-icon .dance-character-icon{position:absolute;inset:0;margin:auto}
.dance-failure-scene.is-returning .dance-failure-icon{animation:dance-icon-return 1.05s ease-out forwards}
.dance-gray-person{position:absolute;left:-20%;bottom:8%;width:130px;height:auto;object-fit:contain;opacity:0;animation:dance-gray-walk 1.15s .65s ease-out forwards}
.dance-failure-scene.is-returning .dance-gray-person{left:43%;opacity:1;animation:dance-gray-transform 1.05s ease-in forwards}
.dance-player.dance-role-lost{filter:grayscale(1);opacity:.18;transform:scale(.55)!important;transition:filter .3s,opacity .3s,transform .3s!important}.dance-rack .role-taken{opacity:.18;transform:translateY(-16px);pointer-events:none}
@keyframes dance-icon-taken{0%{transform:translate(0,0) scale(1)}100%{transform:translate(220%,-170%) rotate(18deg) scale(.72)}}
@keyframes dance-icon-return{0%{transform:translate(220%,-170%) rotate(18deg) scale(.72)}100%{transform:translate(0,0) rotate(0) scale(1)}}
@keyframes dance-gray-walk{0%{left:-20%;opacity:0;transform:translateY(0)}20%{opacity:1}70%{left:43%;transform:translateY(-5px)}100%{left:43%;opacity:1;transform:translateY(0)}}
@keyframes dance-gray-transform{0%{opacity:1;transform:scale(1)}70%{opacity:.35;transform:scale(.72) rotate(-4deg)}100%{opacity:0;transform:scale(.5) rotate(0)}}
.dance-opponent-swap{display:none;position:absolute;left:10%;top:18%;width:112px;height:112px;z-index:16;pointer-events:none}.dance-opponent-swap.is-swapping{display:block}.dance-opponent-swap .dance-character-icon{position:absolute;left:25px;top:25px}.dance-opponent-swap.is-swapping .dance-swap-old{animation:dance-swap-old 340ms ease-in forwards}.dance-opponent-swap.is-swapping .dance-swap-new{animation:dance-swap-new 720ms ease-out both}
@keyframes dance-swap-old{to{transform:translate(-65px,-72px) rotate(-18deg) scale(.35);opacity:0}}
@keyframes dance-swap-new{0%,45%{transform:translate(65px,-72px) rotate(18deg) scale(.35);opacity:0}100%{transform:translate(0,0) rotate(0) scale(1);opacity:1}}
@media(prefers-reduced-motion:reduce){.dance-loading-worker,.dance-failure-icon,.dance-gray-person,.dance-opponent-swap .dance-character-icon{animation-duration:.01ms!important;animation-iteration-count:1!important}}

/* Generated directional art: each input selects a distinct drawing. */
.dance-pose{background-repeat:no-repeat;background-position-x:var(--pose-x,33.333333%);width:100%;flex:none}
.computer-pose{position:relative;aspect-ratio:543 / 724;background-image:url('./assets/dance-poses/computer-directions.png');background-size:400% 100%;max-width:240px;margin:auto}
.cast-pose{aspect-ratio:1;background-image:url('./assets/dance-poses/cast-directions.png');background-size:400% 400%;background-position-y:calc(var(--pose-row) * 100% / 3)}
.dance-rival>div:has(.cast-pose){display:flex;flex-direction:column;align-items:center;min-width:0}
.dance-player:has(.dance-pose){min-width:0;align-self:end;transform:none!important}
.dance-player .cast-pose{max-width:210px;margin:auto}
.dance-screen-caption{position:absolute;inset:33% 21% 38% 18%;display:flex;align-items:center;justify-content:center;text-align:center;background:#050709;color:white;border-radius:12%;font:bold clamp(9px,1.2vw,17px)/1.15 monospace;overflow-wrap:anywhere;padding:3px}
.dance-screen-caption[hidden]{display:none}
.dance-player[data-pose="0"] .dance-screen-caption{transform:rotate(12deg)}
.dance-player[data-pose="3"] .dance-screen-caption{transform:rotate(-12deg)}
.dance-player[data-pose="1"] .dance-screen-caption{inset:43% 24% 36% 24%}
.dance-player[data-pose="2"] .dance-screen-caption{inset:27% 24% 42% 22%}
.dance-player.singing .dance-pose,.dance-rival .dance-pose{animation:none}

.arcade-app{display:flex;flex-direction:column;align-items:center;gap:8px;overflow:auto;padding:12px!important;background:#ecf5fa;color:#183047;box-sizing:border-box}.arcade-app h2,.arcade-app p{margin:2px;text-align:center}.arcade-board{width:min(100%,360px);flex-shrink:0}.merge-board,.tic-board{display:grid;gap:6px;aspect-ratio:1}.merge-board{grid-template-columns:repeat(4,1fr)}.tic-board{grid-template-columns:repeat(3,1fr)}.merge-tile,.tic-board button{display:grid;place-items:center;font:bold clamp(20px,4vw,36px)/1 sans-serif;border-radius:8px;min-width:0;min-height:0}.tic-board button{background:#fff;border:2px solid #518ab3;color:#183047}.tic-board button:disabled{opacity:1}.arcade-controls{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}.arcade-controls button{min-width:44px;min-height:44px;font-size:18px;touch-action:manipulation}.snake-board canvas{display:block;width:100%;height:auto;border-radius:8px}.software-fullscreen .arcade-board{width:min(60vh,85vw,480px)}

/* Independently drawn FNF-style receptors and directional performance timing. */
.dance-targets button{background:transparent!important;border:0!important;min-height:48px;filter:drop-shadow(0 3px 0 #111b);transition:filter .08s;overflow:visible}
.dance-targets button svg{display:block;width:100%;height:clamp(44px,6vw,78px);overflow:visible;pointer-events:none}
.dance-targets button path{fill:var(--arrow-color);stroke:#161221;stroke-width:9;stroke-linejoin:round;paint-order:stroke fill}
.dance-targets button:nth-child(1){--arrow-color:#c66bea}.dance-targets button:nth-child(2){--arrow-color:#43dced}.dance-targets button:nth-child(3){--arrow-color:#78e65a}.dance-targets button:nth-child(4){--arrow-color:#ff626e}
.dance-targets button[data-feedback="hit"]{filter:drop-shadow(0 0 12px var(--arrow-color)) brightness(1.35);transform:scale(1.13)}
.dance-targets button[data-feedback="miss"]{filter:brightness(.65);transform:scale(.94)}
.dance-targets button:focus-visible{outline:3px solid white;border-radius:12px}
.dance-pose,.dance-rival img,.dance-lead-character{transform-origin:50% 100%;transition:transform .09s ease-out}
.dance-player[data-pose="-1"] .dance-pose,.dance-rival>div[data-pose="-1"] .dance-pose,.dance-rival>div[data-pose="-1"] img,.dance-player[data-pose="-1"] .dance-lead-character{animation:fnf-idle .6s infinite ease-in-out}
.dance-player[data-pose="0"] .dance-pose,.dance-rival>div[data-pose="0"] .dance-pose,.dance-rival>div[data-pose="0"] img,.dance-player[data-pose="0"] .dance-lead-character{transform:translateX(-6px) rotate(-5deg)}
.dance-player[data-pose="1"] .dance-pose,.dance-rival>div[data-pose="1"] .dance-pose,.dance-rival>div[data-pose="1"] img,.dance-player[data-pose="1"] .dance-lead-character{transform:translateY(5px) scale(1.06,.91)}
.dance-player[data-pose="2"] .dance-pose,.dance-rival>div[data-pose="2"] .dance-pose,.dance-rival>div[data-pose="2"] img,.dance-player[data-pose="2"] .dance-lead-character{transform:translateY(-8px) scale(.97,1.05)}
.dance-player[data-pose="3"] .dance-pose,.dance-rival>div[data-pose="3"] .dance-pose,.dance-rival>div[data-pose="3"] img,.dance-player[data-pose="3"] .dance-lead-character{transform:translateX(6px) rotate(5deg)}
@keyframes fnf-idle{0%,100%{transform:scale(1,1)}50%{transform:translateY(2px) scale(1.025,.975)}}
@media(prefers-reduced-motion:reduce){.dance-pose,.dance-rival img,.dance-lead-character{animation:none!important;transition:none}}

/* Tempo-linked idle movement between anticipation / singing / recoil poses. */
.dance-player[data-pose="-1"] .dance-pose,.dance-rival>div[data-pose="-1"] .dance-pose,.dance-rival>div[data-pose="-1"] img,.dance-player[data-pose="-1"] .dance-lead-character{animation-duration:var(--dance-beat,.6s)}
@keyframes fnf-idle{0%,100%{transform:translateY(0) rotate(-1deg) scale(1)}30%{transform:translateY(3px) rotate(0deg) scale(1.025,.965)}65%{transform:translateY(-2px) rotate(1deg) scale(.99,1.015)}}
/* Right-hand player, one or two opponents, and an unobscured outdoor stage. */
.dance-stage .dance-player{grid-column:3!important;grid-row:1!important}
.dance-stage .dance-rival{grid-column:1!important;grid-row:1!important;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));overflow:visible}
.dance-stage{grid-template-columns:minmax(100px,1.3fr) minmax(140px,1.8fr) minmax(90px,1fr)!important}
.dance-original{display:block;object-fit:contain;width:100%;height:clamp(120px,25vh,260px)!important;max-width:260px;margin:auto;transform-origin:50% 95%}
.dance-stage .dance-rival img.dance-original{height:clamp(100px,22vh,230px)!important}
.extra-app:not(.dance-custom-motion) .dance-original{animation:none!important;transform:none!important}
.dance-player .dance-original{transition:transform .09s}
.dance-battle{display:grid;grid-template-columns:auto minmax(80px,1fr) auto;align-items:center;gap:8px;font-size:12px;font-weight:bold;color:#223b33}
.dance-balance{height:14px;background:#ee727e;border:2px solid #223b33;border-radius:9px;overflow:visible;position:relative}
.dance-balance i{position:absolute;right:0;top:0;bottom:0;width:var(--player-share,50%);background:#74de9a;border-radius:0 7px 7px 0;transition:width .15s}
.dance-battle-icons{position:absolute;z-index:2;left:calc(var(--player-share,50%) - 25px);top:-9px;width:50px;height:29px;transition:left .15s;filter:drop-shadow(0 2px 1px #15212d99)}
.dance-battle-icon{position:absolute;top:0;transform:scale(.44);transform-origin:top left}
.dance-battle-opponent-icon{left:0}
.dance-battle-player-icon{left:23px;z-index:1}
.dance-battle progress{grid-column:1/-1;width:100%;height:5px;accent-color:#468ac5}
.dance-rack{display:flex;justify-content:center;flex-wrap:wrap;gap:5px;flex-shrink:0}
.dance-rack button{display:flex;flex-direction:column;align-items:center;min-width:48px;touch-action:none;padding:3px 8px;border:2px solid #aab6ba;border-radius:10px;background:#f5f6ef;font-size:11px;cursor:grab}
.dance-rack .dance-character-icon{width:52px;height:62px;pointer-events:none;transform:scale(.72);transform-origin:center;margin:-8px -5px}
.dance-rack button[data-singing="true"]{border-color:#249d65;background:#def8c8;box-shadow:0 0 0 2px #249d6520}
.dance-rack button[aria-pressed="true"]::after{content:'已加入';font-size:9px;color:#165c37}
.dance-rack-help{margin:0;font-size:11px;text-align:center;color:#325348}
@media(max-width:600px){.dance-stage{grid-template-columns:minmax(65px,1fr) minmax(130px,1.8fr) minmax(60px,1fr)!important;gap:1px}.dance-stage .dance-rival{gap:0}.dance-stage .dance-rival img.dance-original{height:110px!important}.dance-original{height:150px!important}.dance-rack button{padding:3px;min-width:40px}}
.dance-custom-motion .dance-player[data-pose="-1"] .dance-original{animation:fnf-idle var(--dance-beat,.6s) infinite ease-in-out}
.dance-rival:has(>div:only-child){grid-template-columns:1fr}
@media(prefers-reduced-motion:reduce){.dance-custom-motion .dance-original{animation:none!important}}
/* Original normal-mode reference scenery, layered from sky to foreground. */
.dance-stage{background-color:#43c5eb;background-image:url('./assets/dance-reference/background-4.png'),url('./assets/dance-reference/background-3.png'),url('./assets/dance-reference/background-2.png'),url('./assets/dance-reference/background-1.png');background-size:120% 42%,115% 43%,110% 44%,cover;background-position:center bottom,center 72%,center 48%,center;background-repeat:no-repeat}
.dance-rack{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:4px;width:100%;max-width:850px;align-self:center}
.dance-rack button{min-width:0;width:100%;font-size:10px;padding:2px;overflow:hidden}
.dance-rack img{height:34px;width:34px}
.dance-rack-help{font-size:11px}
.dance-stage canvas.dance-original{height:clamp(145px,31vh,310px)!important;min-height:0;max-width:100%;position:static;aspect-ratio:256/360;object-fit:contain}
.dance-stage .dance-rival{gap:0;align-items:end}
.dance-stage .dance-rival>div{min-width:0}
@media(max-width:600px){.dance-rack{grid-template-columns:repeat(5,minmax(0,1fr))}.dance-rack img{height:28px;width:28px}.dance-stage canvas.dance-original{height:170px!important}}
.dance-stage{background-image:url('./assets/dance-reference/background-4.png'),url('./assets/dance-reference/background-3.png'),url('./assets/dance-reference/background-2.png'),linear-gradient(transparent 64%,#08cf04 64%),url('./assets/dance-reference/background-1.png');background-size:120% 42%,115% 43%,110% 44%,100% 100%,cover;background-position:center bottom,center 72%,center 48%,center,center}

/* Independent opponent and player arrow banks. */
.dance-stage .dance-lanes{grid-column:1/-1;position:absolute;inset:0 2% 35%;height:auto;z-index:2;overflow:visible}
.dance-player-targets{left:50%;right:0}.dance-opponent-targets{left:0;right:50%;pointer-events:none}
.dance-bank-labels{position:absolute;inset:5px 0 auto;display:grid;grid-template-columns:1fr 1fr;text-align:center;font-size:12px;font-weight:bold;color:#163b49;text-shadow:0 1px white}
.dance-opponent-targets span{display:block;filter:drop-shadow(0 3px 0 #111b)}
.dance-opponent-targets svg{display:block;width:100%;height:clamp(44px,6vw,78px);overflow:visible}
.dance-opponent-targets path{fill:var(--arrow-color);stroke:#161221;stroke-width:9;stroke-linejoin:round;paint-order:stroke fill}
.dance-opponent-targets span:nth-child(1){--arrow-color:#c66bea}.dance-opponent-targets span:nth-child(2){--arrow-color:#43dced}.dance-opponent-targets span:nth-child(3){--arrow-color:#78e65a}.dance-opponent-targets span:nth-child(4){--arrow-color:#ff626e}
.dance-opponent-targets [data-feedback="hit"]{filter:drop-shadow(0 0 12px var(--arrow-color)) brightness(1.4);transform:scale(1.12)}
.dance-sky-sun{position:absolute;top:24px;left:calc(50% - 38px);width:76px;height:76px;object-fit:contain;z-index:0;pointer-events:none;animation:dance-sun-bob 3s ease-in-out infinite}
@keyframes dance-sun-bob{50%{transform:translateY(5px) rotate(5deg)}}
@media(prefers-reduced-motion:reduce){.dance-sky-sun{animation:none}}
@media(max-width:600px){.dance-targets button svg,.dance-opponent-targets svg{height:38px}.dance-bank-labels{font-size:10px}.dance-sky-sun{width:56px;height:56px;left:calc(50% - 28px)}}

/* Two clearly separated four-key fields. */
.dance-stage .dance-lanes{display:grid;grid-template-columns:minmax(0,1fr) 10px minmax(0,1fr);inset:58% 7% 3%;gap:6px;z-index:0}
.dance-bank{position:relative;min-width:0;height:100%;overflow:hidden;border:3px solid #fff9;border-radius:12px;background:linear-gradient(#18304c2e,#101b3652);box-shadow:inset 0 0 0 2px #17243b80}
.dance-bank>b{position:absolute;z-index:4;top:5px;left:0;right:0;color:#fff;font-size:clamp(9px,1.2vw,13px);text-align:center;text-shadow:0 2px 2px #14213c}
.dance-bank canvas{position:absolute!important;inset:0!important;width:100%!important;height:100%!important}
.dance-divider{display:block;width:4px;height:88%;align-self:center;justify-self:center;border-radius:99px;background:#fff;box-shadow:0 0 10px #1c315c}
.dance-player-targets,.dance-opponent-targets{left:0;right:0;top:77%}
.dance-targets button,.dance-opponent-targets span{background:transparent!important;border:0!important;padding:0!important;min-width:0}
.dance-targets path,.dance-opponent-targets path{fill:#d9dee8!important;stroke:#252b3a!important;stroke-width:11!important}
.dance-targets button[data-feedback="hit"] path,.dance-opponent-targets [data-feedback="hit"] path{fill:var(--arrow-color)!important;stroke:#fff!important}
.dance-targets button[data-feedback="miss"] path{fill:#78808d!important}
.dance-player canvas.dance-original{transform:scaleX(-1);transform-origin:50% 100%}
.dance-player[data-view="back"] canvas.dance-original{transform:scaleX(-1) rotateY(24deg);filter:brightness(.78) saturate(.82)}
.dance-rival>div[data-view="back"] canvas.dance-original{transform:rotateY(-24deg);filter:brightness(.78) saturate(.82)}
.dance-player[data-view="front"] canvas.dance-original,.dance-rival>div[data-view="front"] canvas.dance-original{filter:brightness(1.08)}
@media(max-width:600px){.dance-stage .dance-lanes{grid-template-columns:minmax(0,1fr) 4px minmax(0,1fr);gap:2px;inset:61% 2% 3%}.dance-bank{border-width:2px;border-radius:7px}.dance-divider{width:2px}.dance-bank>b{font-size:8px}.dance-targets button svg,.dance-opponent-targets svg{height:30px}}

/* Solo Simon practice: one unboxed, softly rounded printed arrow row. */
.dance-stage .dance-lanes{display:block;inset:61% 22% 3%;z-index:2;overflow:hidden;pointer-events:none}
.dance-stage .dance-lanes>canvas{position:absolute;inset:0;width:100%;height:100%}
.dance-player-targets{left:0;right:0;top:78%;pointer-events:auto}
.dance-player-targets button{filter:none;transform:none}
.dance-player-targets button svg{height:clamp(34px,4vw,52px)}
.dance-player-targets button path{fill:#f6f6f2!important;stroke-width:7!important;stroke-linejoin:round;paint-order:stroke fill}
.dance-player-targets button:nth-child(1) path{stroke:#bf66df!important}.dance-player-targets button:nth-child(2) path{stroke:#45cce0!important}.dance-player-targets button:nth-child(3) path{stroke:#6bd05d!important}.dance-player-targets button:nth-child(4) path{stroke:#ef6574!important}
.dance-player-targets button[data-feedback="hit"]{filter:brightness(1.45);transform:scale(1.12)}
.dance-player-targets button[data-feedback="miss"]{filter:grayscale(1) brightness(.65);transform:scale(.94)}
.dance-solo-score{grid-template-columns:auto minmax(120px,1fr)}
.dance-watch-mode .dance-lanes{display:none!important}
@media(max-width:600px){.dance-stage .dance-lanes{inset:64% 12% 3%}.dance-player-targets button svg{height:30px}}

/* Friend Like You safe stage: two top banks, then one centered bank for Black's middle solo. */
.dance-stage .dance-lanes{
  display:grid;
  grid-template-columns:minmax(0,1fr) 8px minmax(0,1fr);
  gap:8px;
  inset:1% 5% 56%;
  height:auto;
  overflow:visible;
  pointer-events:none;
  z-index:5;
}
.dance-stage .dance-bank{position:relative;height:100%;overflow:hidden;border:0;background:transparent;box-shadow:none}
.dance-stage .dance-bank>b{top:0;color:#fff;font-size:10px;text-shadow:0 2px 3px #000}
.dance-stage .dance-bank canvas{position:absolute!important;inset:0!important;width:100%!important;height:100%!important}
.dance-stage .dance-divider{width:3px;height:92%;background:#fff8;box-shadow:0 0 7px #000;align-self:center}
.dance-stage .dance-targets{top:17%;left:0;right:0;translate:0 -50%;z-index:6}
.dance-stage .dance-player-targets{pointer-events:auto}
.dance-stage .dance-opponent-targets{pointer-events:none}
.dance-stage .dance-targets button,.dance-stage .dance-opponent-targets span{min-height:0;background:transparent!important;border:0!important;padding:0!important}
.dance-stage .dance-targets img{display:block;width:100%;height:clamp(32px,4.6vw,58px);object-fit:contain;filter:drop-shadow(0 3px 1px #111)}
.dance-stage .dance-opponent-targets [data-feedback="hit"] img{filter:brightness(1.55) drop-shadow(0 0 9px #fff)}
.friend-safe-stage .dance-stage{background:#20dbe6 url('./assets/friend-like-you/stage-day.png') center/cover no-repeat!important;transition:filter 1.2s ease,background-color 1.2s ease}
.friend-safe-stage.friend-night-phase .dance-stage{background:#120307 url('./assets/friend-like-you/stage-black.png') center/cover no-repeat!important;filter:none;animation:none}
.friend-safe-stage.friend-night-phase .dance-sky-sun{opacity:0;transition:opacity .8s ease}
.friend-safe-stage.friend-night-phase .dance-player{display:none!important;visibility:hidden!important;opacity:0!important}
.friend-safe-stage.friend-night-phase .dance-rival{grid-column:1/4!important;grid-template-columns:1fr;justify-self:center;width:min(34%,260px);z-index:3}
.friend-safe-stage.friend-single-bank .dance-stage .dance-lanes{grid-template-columns:minmax(0,1fr);inset-inline:31%}
.friend-safe-stage.friend-single-bank .dance-opponent-bank,.friend-safe-stage.friend-single-bank .dance-divider{display:none}
.friend-safe-stage.friend-single-bank .dance-player-bank{display:block}
.friend-safe-stage.friend-single-bank .dance-rival [data-character="black"]{animation:friend-black-arrive .8s ease-out both,friend-black-dance 360ms .8s steps(2,jump-none) infinite;filter:none}
@keyframes friend-dusk-shift{0%{opacity:.7}100%{opacity:1}}
@keyframes friend-black-arrive{0%{translate:75vw 0;opacity:0}65%{translate:-10px 0;opacity:1}100%{translate:0 0;opacity:1}}
@keyframes friend-black-dance{0%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-16px) rotate(5deg)}100%{transform:translateY(-3px) rotate(-2deg)}}
.friend-chorus-crowd{display:none;position:absolute;inset:auto 7% 4%;height:42%;z-index:0;align-items:end;justify-content:space-around;pointer-events:none}
.friend-chorus-phase .friend-chorus-crowd{display:flex}
.friend-chorus-crowd>div{width:14%;height:100%;display:grid;align-items:end;justify-items:center;animation:friend-crowd-bounce var(--dance-beat,.5s) ease-in-out infinite alternate}
.friend-chorus-crowd canvas{width:100%;height:100%;object-fit:contain}
.friend-chorus-crowd small{display:none}
.friend-chorus-crowd>div:nth-child(even){animation-delay:calc(var(--dance-beat,.5s) * -.5)}
@keyframes friend-crowd-bounce{to{translate:0 -10px;rotate:2deg}}
@media(max-width:600px){.dance-stage .dance-lanes{grid-template-columns:minmax(0,1fr) 3px minmax(0,1fr);gap:3px;inset:2% 1% 59%}.friend-safe-stage.friend-single-bank .dance-stage .dance-lanes{inset-inline:22%}.dance-stage .dance-targets img{height:32px}}

/* Exact normal FNF receptors cropped from the reference mod's NOTE_assets atlas. */
.dance-player-targets button img{
  display:block;
  width:100%;
  height:clamp(38px,5vw,62px);
  object-fit:contain;
  image-rendering:auto;
  pointer-events:none;
}
.dance-player-targets button[data-feedback="hit"] img{filter:brightness(1.75) drop-shadow(0 0 8px #fff)}
.dance-player-targets button[data-feedback="miss"] img{filter:brightness(.55)}
@media(max-width:600px){.dance-player-targets button img{height:34px}}

/* The source video supplies the exact song clock and sound; local art forms one seamless stage. */
.friend-safe-stage .dance-stage .dance-video{display:block!important;position:absolute!important;left:-9999px!important;top:0!important;width:1px!important;height:1px!important;opacity:0!important;overflow:hidden;pointer-events:none}
.friend-safe-stage .dance-stage .dance-video>p{display:none}
.friend-safe-stage .dance-stage .dance-video>div{position:absolute;inset:0;width:1px;height:1px}
.friend-safe-stage .dance-stage .dance-video iframe{width:1px;height:1px;border:0;pointer-events:none}
.friend-safe-stage .dance-rival{visibility:visible;z-index:3}
.friend-safe-stage .dance-friend-actor{position:relative;display:block;margin-inline:auto;transform-origin:50% 100%;will-change:transform}
.friend-safe-stage .dance-friend-layer{position:absolute;inset:0;width:100%!important;height:100%!important;max-height:none!important;object-fit:contain;opacity:0;transition:opacity 150ms ease-in-out;filter:inherit;transform:none!important;animation:none!important;will-change:opacity}
.friend-safe-stage .dance-friend-layer.is-active{opacity:1}
.friend-safe-stage .dance-player>small,.friend-safe-stage .dance-rival>div>small{display:none}
.friend-safe-stage .dance-rival .dance-friend-opponent{width:min(38vw,450px);height:clamp(170px,32vh,320px)!important;filter:drop-shadow(0 6px 0 #173b29)}
.friend-safe-stage .dance-rival [data-character="black"] .dance-friend-opponent{width:min(32vw,360px);height:clamp(180px,38vh,360px)!important;filter:drop-shadow(0 6px 0 #26040c)}
.friend-safe-stage .dance-opponent-bank,.friend-safe-stage .dance-divider{visibility:visible}
.friend-safe-stage .dance-player{z-index:4}
.friend-safe-stage .dance-player .dance-friend-view{width:min(28vw,310px);height:clamp(170px,34vh,330px);filter:drop-shadow(0 5px 0 #17202a)}
.friend-safe-stage.friend-night-phase .dance-lanes{z-index:6}
.friend-safe-stage.friend-night-phase .dance-rival{position:absolute!important;inset:8% 32% 0!important;width:36%!important;height:88%!important;display:grid!important;place-items:end center;margin:0!important;overflow:visible}
.friend-safe-stage.friend-night-phase .dance-rival>div{width:100%;height:100%;display:grid;place-items:end center}
.friend-safe-stage.friend-night-phase .dance-rival [data-character="black"] .dance-friend-opponent{width:100%!important;height:100%!important;margin:0}
@media(max-width:600px){.friend-safe-stage.friend-night-phase .dance-rival{inset:12% 26% 0!important;width:48%!important;height:82%!important}}
@media(max-width:600px){.friend-safe-stage .dance-player .dance-friend-view{width:38vw;height:clamp(140px,30vh,240px)}.friend-safe-stage .dance-rival .dance-friend-opponent{width:42vw;height:clamp(140px,30vh,240px)!important}}

/* Video-scale Friend Like You staging: large actors, compact receptors and a full concert finale. */
.friend-safe-stage .dance-stage .dance-lanes{inset:9% 7% 47%;grid-template-columns:minmax(0,44%) minmax(16px,4%) minmax(0,44%);justify-content:space-between;gap:2%}
.friend-safe-stage .dance-bank .dance-targets{left:11%;right:11%;gap:0}
.friend-safe-stage .dance-bank .dance-targets img{width:112%;height:clamp(40px,5.2vw,66px)}
.friend-safe-stage:not(.friend-night-phase) .dance-rival{position:absolute;left:-1%;bottom:-3%;width:50%;height:100%;display:block!important;margin:0;overflow:visible}
.friend-safe-stage:not(.friend-night-phase) .dance-player{position:absolute;grid-column:auto!important;grid-row:auto!important;right:-2%;bottom:-5%;width:39%;height:96%;display:grid;place-items:end center;margin:0;overflow:visible}
.friend-safe-stage:not(.friend-night-phase) .dance-rival>div{width:100%;height:100%}
.friend-safe-stage:not(.friend-night-phase) .dance-rival .dance-friend-opponent{width:100%;height:100%!important;margin:0;animation:friend-video-idle calc(var(--dance-beat,.5s) * 2) ease-in-out infinite}
.friend-safe-stage:not(.friend-night-phase) .dance-player .dance-friend-view{width:100%;height:100%;margin:0;animation:friend-video-idle calc(var(--dance-beat,.5s) * 2) ease-in-out infinite reverse}
.friend-safe-stage.friend-opening-phase .dance-rival{animation:friend-stage-enter-tree .9s cubic-bezier(.16,.84,.28,1) both}
.friend-safe-stage.friend-opening-phase .dance-player{animation:friend-stage-enter-computer 1s .06s cubic-bezier(.16,.84,.28,1) both}
@keyframes friend-stage-enter-tree{0%{translate:-65% 12%;opacity:0}55%{translate:5% -2%;opacity:1}76%{translate:-2% 1%}100%{translate:0 0;opacity:1}}
@keyframes friend-stage-enter-computer{0%{translate:72% 14%;opacity:0}55%{translate:-6% -3%;opacity:1}78%{translate:2% 1%}100%{translate:0 0;opacity:1}}
@keyframes friend-video-idle{0%,100%{translate:0 0;rotate:-.8deg}35%{translate:0 -7px;rotate:1.2deg}70%{translate:0 2px;rotate:-1.4deg}}
.friend-finale-floor{display:none;position:absolute;inset:auto -3% -8%;height:47%;z-index:0;transform:perspective(360px) rotateX(58deg);transform-origin:50% 100%;background:conic-gradient(from 90deg,#ff3ac8 0 25%,#36dcff 0 50%,#ffe24f 0 75%,#7b4dff 0) 0 0/72px 72px;border-top:6px solid #fff8;box-shadow:0 -10px 32px #ff58e999}
.friend-chorus-phase .dance-stage{background:radial-gradient(circle at 18% 14%,#fff 0 2%,transparent 2.4%),radial-gradient(circle at 82% 18%,#fff 0 2%,transparent 2.4%),linear-gradient(145deg,#5126a2 0 36%,#c92b91 64%,#14236d 100%)!important}
.friend-chorus-phase .friend-finale-floor{display:block;animation:friend-floor-flash calc(var(--dance-beat,.5s) * 2) steps(2,jump-none) infinite}
@keyframes friend-floor-flash{0%{filter:hue-rotate(0deg) brightness(.8)}50%{filter:hue-rotate(55deg) brightness(1.45)}100%{filter:hue-rotate(115deg) brightness(1)}}
.friend-chorus-phase .friend-chorus-crowd{display:grid;grid-template-columns:repeat(5,1fr);inset:auto 8% 1%;height:48%;z-index:1;align-items:end;gap:1%}
.friend-chorus-crowd>div{width:100%;height:52%;align-self:end}
.friend-chorus-crowd>div:nth-child(n+6){translate:0 -72%;scale:.78;filter:brightness(.82)}
.friend-safe-stage.friend-chorus-phase .dance-rival{left:2%;bottom:-4%;width:44%;height:101%}
.friend-safe-stage.friend-chorus-phase .dance-player{right:5%;bottom:-2%;width:29%;height:75%}
.friend-safe-stage.friend-chorus-phase .dance-rival .dance-friend-opponent,.friend-safe-stage.friend-chorus-phase .dance-player .dance-friend-view{animation:friend-finale-actor-in .75s cubic-bezier(.16,.84,.28,1) both,friend-video-idle calc(var(--dance-beat,.5s) * 2) .75s ease-in-out infinite}
@keyframes friend-finale-actor-in{from{opacity:0;translate:0 14%;scale:.88}to{opacity:1;translate:0 0;scale:1}}
@media(max-width:600px){.friend-safe-stage .dance-stage .dance-lanes{inset-inline:2%;grid-template-columns:46% 4% 46%;gap:2%}.friend-safe-stage .dance-bank .dance-targets{left:1%;right:1%}.friend-safe-stage:not(.friend-night-phase) .dance-rival{left:-14%;width:64%;height:100%}.friend-safe-stage:not(.friend-night-phase) .dance-player{right:-7%;width:48%;height:85%}.friend-chorus-phase .friend-chorus-crowd{inset-inline:2%;grid-template-columns:repeat(5,1fr)}}

/* Local video cabinet: every picture and voice comes from the bundled Sprunki game. */
.offline-video-app{display:grid!important;grid-template-rows:auto auto minmax(240px,1fr) auto;gap:10px!important;overflow:auto!important;padding:12px!important;background:linear-gradient(145deg,#122038,#203d5f 54%,#16223d)!important;color:#fff!important}
.offline-video-title,.offline-video-help{margin:0;text-align:center}.offline-video-help{color:#cfefff}
.offline-video-player{display:grid;grid-template-rows:minmax(220px,1fr) auto auto;gap:7px;min-height:0}
.offline-video-stage{position:relative;display:flex;align-items:flex-end;justify-content:center;gap:min(1.5vw,14px);min-height:240px;overflow:hidden;border:5px solid #0b121e;border-radius:14px;background:linear-gradient(#83d9ff 0 68%,#70c84f 68%);box-shadow:inset 0 0 0 3px #fff7,0 8px 18px #0008}
.offline-video-stage[data-theme="computer"]{background:radial-gradient(circle at 50% 22%,#6fe6ff 0 4%,transparent 30%),linear-gradient(#182b51 0 68%,#704ba3 68%)}
.offline-video-stage[data-theme="robot"]{background:linear-gradient(135deg,#1b2230 25%,#273b52 25% 50%,#1b2230 50% 75%,#273b52 75%);background-size:42px 42px}
.offline-video-stage[data-theme="rainbow"],.offline-video-stage[data-theme="finale"]{background:linear-gradient(145deg,#ff78bd,#755cff 45%,#32d6ea 70%,#7bdc65)}
.offline-video-stage[data-theme="forest"]{background:radial-gradient(circle at 18% 70%,#245f33 0 18%,transparent 19%),radial-gradient(circle at 82% 72%,#347b3f 0 22%,transparent 23%),linear-gradient(#9bdcff 0 68%,#4c9c47 68%)}
.offline-video-stage figure{position:relative;z-index:1;width:min(15%,120px);min-width:54px;margin:0;text-align:center;transform-origin:50% 100%;animation:offline-video-idle 720ms ease-in-out infinite alternate;animation-delay:var(--video-delay)}
.offline-video-stage[data-theme="computer"] figure{width:min(36%,250px)}
.offline-video-stage figure.video-singing{animation:offline-video-sing 410ms cubic-bezier(.2,.75,.25,1) infinite alternate}
.offline-video-stage figure img{display:block;width:100%;height:clamp(120px,28vh,270px);object-fit:contain;filter:drop-shadow(0 6px 2px #0006)}
.offline-video-stage figure figcaption{padding:2px 5px;border-radius:8px;background:#07111dcc;color:#fff;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.offline-video-caption{text-align:center;font-size:clamp(16px,2vw,24px);color:#fff19a;text-shadow:0 2px #000}
.offline-video-controls{display:flex;align-items:center;justify-content:center;gap:8px}.offline-video-controls progress{width:min(55%,420px);height:16px}
.offline-video-grid{display:grid;grid-template-columns:repeat(4,minmax(130px,1fr));gap:8px}
.offline-video-card{display:grid!important;grid-template-rows:76px auto auto;gap:3px;min-width:0!important;padding:7px!important;background:#edf7ff!important;color:#14283e!important;border:3px solid #5e87a9!important;border-radius:10px!important;text-align:center}
.offline-video-card[aria-pressed="true"]{border-color:#ffe34f!important;box-shadow:0 0 0 3px #ff9f43}
.offline-video-thumb{display:flex;align-items:flex-end;justify-content:center;overflow:hidden;border-radius:7px;background:linear-gradient(#75d5ff 0 67%,#78c655 67%)}
.offline-video-thumb img{width:25%;height:72px;object-fit:contain}.offline-video-card strong,.offline-video-card small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@keyframes offline-video-idle{from{transform:translateY(0) rotate(-2deg)}to{transform:translateY(-6px) rotate(2deg)}}
@keyframes offline-video-sing{0%{transform:translate(-3px,0) rotate(-5deg) scale(1,.97)}55%{transform:translate(3px,-16px) rotate(5deg) scale(.96,1.06)}100%{transform:translate(0,-4px) rotate(-1deg)}}
@container game-window (max-width:620px){.offline-video-grid{grid-template-columns:repeat(2,minmax(110px,1fr))}.offline-video-stage{min-height:210px}.offline-video-stage figure{min-width:42px}.offline-video-stage figure img{height:170px}}
@media(prefers-reduced-motion:reduce){.offline-video-stage figure,.offline-video-stage figure.video-singing{animation:none}}

/* Separate the real online video from the bundled offline performances. */
.video-mode-tabs{display:flex;justify-content:center;gap:8px}.video-mode-tabs button[aria-pressed="true"]{background:#ffe36e!important;color:#17243b!important;border-color:#fff!important}.online-video-panel{display:grid;gap:9px;place-items:center;min-height:300px}.online-video-panel[hidden],.offline-video-player[hidden],.offline-video-grid[hidden]{display:none!important}.online-video-panel iframe{width:min(900px,100%);aspect-ratio:16/9;min-height:240px;border:5px solid #0b121e;border-radius:14px;background:#000}.online-video-panel a{color:#fff19a;font-weight:800}

/* The role guide uses the saved normal-mode art and voices. */
.character-guide-app{overflow:hidden!important;background:linear-gradient(#8bdcff 0 66%,#72c951 66%)!important;color:#17324b!important}.character-guide-app h2{margin:4px;text-align:center}.character-guide-viewer{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;min-height:0;flex:1}.character-guide-viewer>button{font-size:46px;font-weight:900;min-width:52px}.character-guide-viewer article{display:flex;min-height:0;align-items:center;justify-content:center;flex-direction:column;text-align:center;background:#ffffffd9;border:4px solid #263953;border-radius:20px;padding:12px}.character-guide-viewer img{width:min(360px,70%);height:min(48vh,360px);object-fit:contain;animation:character-guide-bob 720ms ease-in-out infinite alternate}.character-guide-viewer h3{margin:4px;font-size:clamp(18px,3vw,30px)}.character-guide-viewer p{max-width:520px;font-size:14px}.character-guide-sound{font-weight:800;background:#ffe36e!important}@keyframes character-guide-bob{to{transform:translateY(-8px) rotate(1deg)}}

/* Two clean banks, without the old center divider. */
.dance-divider{display:none!important}.dance-stage .dance-lanes,.friend-safe-stage .dance-stage .dance-lanes{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:10%;justify-content:space-between}.dance-character-icon{background-size:contain!important;background-repeat:no-repeat!important;background-color:transparent!important}.dance-gray-person{object-fit:contain}.dance-rack[hidden],.dance-rack-help[hidden]{display:none!important}
@media(max-width:600px){.dance-stage .dance-lanes,.friend-safe-stage .dance-stage .dance-lanes{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:5%}.character-guide-viewer{gap:3px}.character-guide-viewer>button{min-width:38px;padding:2px;font-size:34px}.character-guide-viewer article{padding:6px}.online-video-panel iframe{min-height:180px}}

/* Offline performances change mouth frames on the beat without shaking the whole cast. */
.offline-video-stage figure,.offline-video-stage figure.video-singing{animation:none!important;transform:none!important}
.offline-video-stage[data-theme="friend"]{background:#10151f center/cover no-repeat url('./assets/friend-like-you/stage-day.png')}
.offline-video-stage[data-theme="friend"][data-phase="black"]{background-image:url('./assets/friend-like-you/stage-black.png')}
.offline-video-stage[data-theme="friend"] figure{width:min(29%,260px);min-width:90px}
.offline-video-stage[data-theme="friend"] [data-video-character="black"]{transition:opacity .7s ease,translate .7s ease}
.offline-video-stage[data-theme="friend"][data-phase="day"] [data-video-character="black"]{opacity:0;translate:35% 0}
.offline-video-stage[data-theme="finale"]{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));align-items:end;gap:2px;padding:5px;box-sizing:border-box}
.offline-video-stage[data-theme="finale"] figure{animation:none!important;width:100%;min-width:0;align-self:end}
.offline-video-stage[data-theme="finale"] figure img{height:clamp(70px,14vh,125px)}
.offline-video-stage[data-theme="finale"] figure figcaption{font-size:8px;padding:1px}

/* The dance host itself becomes the operating-system fullscreen element. */
.dance-system-fullscreen{position:relative!important;display:grid!important;place-items:center!important;width:100vw!important;height:100vh!important;max-width:none!important;max-height:none!important;padding:0!important;overflow:hidden!important;background:#000!important;color:#fff!important}
.dance-system-fullscreen>*{display:none!important}
.dance-system-fullscreen>.dance-stage{display:grid!important;width:min(100vw,calc(84vh * 16 / 9))!important;height:auto!important;max-height:84vh!important;min-height:0!important;aspect-ratio:16/9;border:0!important;border-radius:0!important;box-shadow:none!important}
.dance-system-fullscreen>.dance-battle{display:grid!important;position:absolute;z-index:30;top:1.2vh;left:50%;translate:-50% 0;width:min(94vw,1100px);color:#fff;text-shadow:0 2px #000}
.dance-system-fullscreen>.dance-toolbar{display:block!important;position:absolute;z-index:40;right:10px;top:8px;background:transparent!important}
.dance-system-fullscreen>.dance-toolbar>*{display:none!important}
.dance-system-fullscreen>.dance-toolbar>.dance-fullscreen-toggle{display:block!important;background:#111c!important;color:#fff!important;border:2px solid #fff8!important}
.dance-system-fullscreen>.dance-keys{display:grid!important;position:absolute;z-index:35;left:50%;bottom:2vh;translate:-50% 0;width:min(520px,86vw)}
.dance-system-fullscreen .dance-battle progress{height:8px;accent-color:#67b7ff}
@media(max-width:700px){.dance-system-fullscreen>.dance-stage{width:min(100vw,calc(78vh * 16 / 9))!important;max-height:78vh!important}.dance-system-fullscreen>.dance-battle{top:2px;font-size:10px}.dance-system-fullscreen>.dance-keys{bottom:5px}}

/* Friend Like You follows the reference video's FNF stage instead of the shared dance layout. */
.friend-fnf-hud{display:none}
.friend-safe-stage>.dance-battle{display:none}
.friend-safe-stage .friend-fnf-hud{display:grid;position:absolute;inset:0;z-index:12;grid-template-rows:34px 1fr 25px;pointer-events:none;color:#fff;font:900 clamp(8px,1.15vw,13px)/1.1 "Courier New",monospace;text-shadow:2px 2px 0 #000}
.friend-safe-stage .dance-stage{height:clamp(360px,56vh,640px);min-height:360px;flex-basis:360px}
.friend-safe-stage .friend-fnf-hud,.friend-safe-stage .friend-fnf-time,.friend-safe-stage .friend-fnf-bottom{font-family:VoxelPixel,"Courier New",monospace!important}
.friend-safe-stage .friend-fnf-countdown{position:absolute;left:50%;top:43%;translate:-50% -50%;z-index:15;color:#fff;font:400 clamp(54px,11vw,126px)/1 VoxelPixel,"Courier New",monospace;text-shadow:6px 6px 0 #161616,-3px -3px 0 #161616;animation:friend-countdown-pop 520ms steps(3,end) infinite;white-space:nowrap}
.friend-safe-stage .friend-fnf-countdown[hidden]{display:none}
@keyframes friend-countdown-pop{0%{scale:.72;opacity:.2}45%{scale:1.1;opacity:1}100%{scale:1;opacity:.92}}
.friend-safe-stage .friend-fnf-top{grid-row:1;position:relative;background:#050505;border-bottom:2px solid #242424;box-shadow:0 4px 8px #0008}
.friend-safe-stage .friend-fnf-time{position:absolute;left:50%;top:4px;translate:-50% 0;min-width:48px;text-align:center;font-size:clamp(12px,1.6vw,18px)}
.friend-safe-stage .friend-fnf-health{position:absolute;left:22%;right:22%;bottom:3px;height:5px;background:linear-gradient(90deg,#d6272f 0 50%,#dedede 50%);border:2px solid #111}
.friend-safe-stage .friend-fnf-health i{display:block;margin-left:calc(var(--friend-health,55%) - 3px);width:6px;height:100%;background:#5df06c;box-shadow:0 0 4px #fff}
.friend-safe-stage .friend-fnf-bottom{grid-row:3;align-self:end;display:flex;justify-content:center;gap:clamp(8px,3vw,30px);padding:5px 8px;background:#050505;border-top:2px solid #242424;white-space:nowrap}
.friend-safe-stage .dance-player-targets{top:83%!important}.friend-safe-stage .dance-opponent-targets{top:17%!important}
.friend-safe-stage .dance-stage .dance-lanes{inset:6% 7% 8%;z-index:8}
.friend-safe-stage .dance-bank>b{display:none}
.friend-safe-stage.friend-night-phase .dance-rival{z-index:7!important}
.friend-safe-stage.friend-night-phase .dance-rival>div,.friend-safe-stage.friend-night-phase .dance-friend-actor,.friend-safe-stage.friend-night-phase .dance-friend-layer{visibility:visible!important;opacity:1}
.friend-safe-stage.friend-night-phase .dance-friend-layer:not(.is-active){opacity:0!important}
.friend-safe-stage.friend-night-phase .dance-stage::before{content:"";position:absolute;inset:0;z-index:0;background:#120307 url('./assets/friend-like-you/stage-black.png') center/cover no-repeat;pointer-events:none}
.friend-safe-stage.friend-night-phase .dance-stage::after{content:"";position:absolute;left:35%;right:35%;top:13%;bottom:4%;z-index:7;background:url('./assets/friend-like-you/black-idle.png') center bottom/contain no-repeat;filter:drop-shadow(0 8px 0 #23030a);transform-origin:50% 100%;animation:friend-black-dance 360ms steps(2,jump-none) infinite;pointer-events:none}
.friend-safe-stage.friend-night-phase .dance-rival{opacity:0!important}
.friend-safe-stage.friend-night-phase .dance-stage:has(.dance-rival [data-character="black"][data-pose="0"])::after{background-image:url('./assets/friend-like-you/black-left.png')}
.friend-safe-stage.friend-night-phase .dance-stage:has(.dance-rival [data-character="black"][data-pose="1"])::after{background-image:url('./assets/friend-like-you/black-down.png')}
.friend-safe-stage.friend-night-phase .dance-stage:has(.dance-rival [data-character="black"][data-pose="2"])::after{background-image:url('./assets/friend-like-you/black-up.png')}
.friend-safe-stage.friend-night-phase .dance-stage:has(.dance-rival [data-character="black"][data-pose="3"])::after{background-image:url('./assets/friend-like-you/black-right.png')}
.friend-safe-stage.friend-single-bank .dance-stage .dance-lanes{inset:6% 32% 8%}
.friend-safe-stage.friend-chorus-phase .dance-rival{z-index:5!important}
.friend-safe-stage.friend-chorus-phase .dance-player{z-index:6!important}
.friend-safe-stage.friend-chorus-phase .friend-chorus-crowd{z-index:3;height:43%;inset-inline:4%;grid-template-columns:repeat(5,minmax(0,1fr));gap:2%}
.friend-safe-stage.friend-chorus-phase .friend-chorus-crowd>div{height:62%}
.friend-safe-stage.friend-chorus-phase .friend-chorus-crowd>div:nth-child(n+6){translate:0 -66%;scale:.7}
.friend-safe-stage:not(.friend-night-phase) .dance-rival{left:-3%;width:55%;height:103%}
.friend-safe-stage:not(.friend-night-phase) .dance-player{right:-3%;width:43%;height:100%}
@media(max-width:600px){.friend-safe-stage .dance-stage{height:clamp(330px,62vh,520px);min-height:330px;flex-basis:330px}.friend-safe-stage .friend-fnf-hud{grid-template-rows:27px 1fr 20px;font-size:7px}.friend-safe-stage .friend-fnf-bottom{gap:7px;padding:4px}.friend-safe-stage .dance-stage .dance-lanes{inset-inline:2%}.friend-safe-stage.friend-single-bank .dance-stage .dance-lanes{inset-inline:23%}}

/* Character facts stay readable in both wide and narrow app windows. */
.character-guide-facts{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:3px 12px;width:min(100%,520px);margin:4px auto;text-align:left;font-size:13px}
.character-guide-facts dt{font-weight:900;color:#264d70}.character-guide-facts dd{margin:0}.character-guide-source-note{max-width:520px;margin:4px;color:#5a6170}
.character-guide-directions{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:5px}.character-guide-directions button{border:2px solid #315273;border-radius:8px;background:#e5f5ff;color:#17324b;padding:5px 10px;font-weight:800}
.character-guide-app .character-guide-viewer img{height:min(32vh,250px)}
@media(max-width:600px){.character-guide-facts{font-size:11px;gap:2px 7px}.character-guide-source-note{font-size:9px}.character-guide-app .character-guide-viewer img{height:min(24vh,170px)}}

/* The player reads falling notes at the bottom; the opponent auto-hits rising notes at the top. */
.dance-player-targets{top:83%!important}.dance-opponent-targets{top:17%!important}

/* Beginner course: choose a singer, clear stages in order, then unlock a song. */
.dance-tutorial-panel{position:absolute;inset:38px 8px 8px;z-index:40;overflow:auto;padding:10px;border:3px solid #fff;border-radius:14px;background:#13233aee;color:#fff;box-shadow:0 14px 34px #0008}.dance-tutorial-panel[hidden]{display:none!important}.dance-tutorial-panel header{display:flex;align-items:center;justify-content:space-between;gap:8px}.dance-tutorial-panel header button{width:28px;height:28px;border:2px solid #fff;border-radius:50%;background:#f45b68;color:#fff;font-size:18px}.dance-tutorial-panel>p{margin:6px 0 9px;font-size:11px}.dance-tutorial-characters{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:9px}.dance-tutorial-character{display:grid;grid-template-columns:34px auto;align-items:center;gap:4px;padding:3px 7px;border:2px solid #8fa4b5;border-radius:10px;background:#e8f2f5;color:#183044}.dance-tutorial-character[aria-pressed="true"]{border-color:#75ef62;background:#d9ffd1;box-shadow:0 0 0 2px #75ef6266}.dance-tutorial-character .dance-character-icon{width:30px;height:34px;background-size:contain!important;background-repeat:no-repeat}.dance-tutorial-levels{display:grid;grid-template-columns:repeat(5,minmax(70px,1fr));gap:6px}.dance-tutorial-level{min-height:45px;border:2px solid #fff;border-radius:10px;background:#375f8f;color:#fff;font-weight:900}.dance-tutorial-level[data-cleared="true"]{background:#258455}.dance-tutorial-level[data-cleared="true"]::after{content:" ✓"}.dance-tutorial-level[disabled]{border-color:#657382;background:#343c49;color:#9aa6b1;filter:grayscale(1);cursor:not-allowed}.dance-tutorial-reward{display:grid;gap:6px;margin-top:10px;padding:9px;border:2px solid #ffe769;border-radius:12px;background:#4a3c0c;text-align:center}.dance-tutorial-reward[hidden]{display:none}.dance-tutorial-reward button{padding:8px;border:0;border-radius:9px;background:#ffe769;color:#332600;font-weight:900}@media(max-width:600px){.dance-tutorial-panel{inset:34px 3px 3px}.dance-tutorial-levels{grid-template-columns:repeat(2,minmax(90px,1fr))}.dance-tutorial-character{grid-template-columns:26px auto;font-size:10px}.dance-tutorial-character .dance-character-icon{width:24px;height:28px}}