.sc-body { margin: 0; background: #0b0c14; overflow: hidden; height: 100vh; }
#viewport { position: fixed; inset: 0; display: grid; place-items: center; }
#stage { width: 1280px; height: 720px; position: relative; overflow: hidden; transform-origin: center; background: #1a1c2c; font-family: 'Pixelify Sans', monospace; font-weight: 500; color: #f4f4f4; -webkit-font-smoothing: none; }
body.rec #controls { display: none; }
#controls { position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%); display: flex; gap: 10px; align-items: center; z-index: 10; opacity: .4; }
#controls:hover { opacity: 1; }
#bar { width: 240px; height: 8px; background: #333c57; box-shadow: 0 0 0 3px #1a1c2c; }
#barFill { height: 100%; width: 0; background: #ffcd75; }
.layer { position: absolute; inset: 0; }
.shade { pointer-events: none; }
#stage .board-wrap, #stage .layer > .board-3d { width: 100%; height: 100%; }
.logo-t1 { position: absolute; left: 0; right: 0; top: 150px; text-align: center; font-family: 'Silkscreen'; font-weight: 700; font-size: 150px; line-height: 1; letter-spacing: 8px; color: #ffcd75; text-shadow: 0 8px 0 #ef7d57, 0 16px 0 #1a1c2c; }
.logo-x { position: absolute; left: 0; right: 0; top: 330px; text-align: center; font-size: 70px; font-weight: 700; color: #73eff7; text-shadow: 0 5px 0 #1a1c2c; }
.logo-t2 { position: absolute; left: 0; right: 0; top: 420px; text-align: center; font-family: 'Silkscreen'; font-weight: 700; font-size: 100px; letter-spacing: 8px; color: #f4f4f4; text-shadow: 0 7px 0 #b13e53, 0 14px 0 #1a1c2c; }
.logo-sub { position: absolute; left: 0; right: 0; top: 590px; text-align: center; font-size: 30px; font-weight: 600; color: #f4f4f4; text-shadow: 3px 3px 0 #1a1c2c; }
.sc-title { position: absolute; left: 70px; top: 58px; font-family: 'Silkscreen'; font-weight: 700; font-size: 50px; line-height: 1; white-space: nowrap; color: #ffcd75; text-shadow: 4px 4px 0 #b13e53, 8px 8px 0 #1a1c2c; }
.sc-title span { display: inline-block; }
.sc-kicker { position: absolute; left: 74px; top: 26px; font-weight: 700; letter-spacing: 3px; font-size: 22px; color: #73eff7; text-shadow: 3px 3px 0 #1a1c2c; text-transform: uppercase; }
.sc-sub { position: absolute; left: 74px; top: 140px; font-size: 25px; font-weight: 500; color: #f4f4f4; max-width: 450px; line-height: 1.3; text-shadow: 3px 3px 0 #1a1c2c; }
.chip-big { position: absolute; padding: 12px 20px; background: #1a1c2c; box-shadow: 0 0 0 3px #ffcd75, 0 0 0 6px #1a1c2c, 8px 10px 0 4px rgba(0,0,0,.4); font-size: 30px; font-weight: 700; white-space: nowrap; }
.chip-big.win { box-shadow: 0 0 0 3px #38b764, 0 0 0 6px #1a1c2c, 8px 10px 0 4px rgba(0,0,0,.4); }
.big-flash { position: absolute; left: 0; right: 0; top: 290px; text-align: center; font-family: 'Silkscreen'; font-weight: 700; font-size: 104px; color: #ffcd75; text-shadow: 0 8px 0 #b13e53, 0 16px 0 #1a1c2c; }
.card-ev { position: absolute; width: 190px; height: 260px; transform-style: preserve-3d; }
.card-ev .face { position: absolute; inset: 0; backface-visibility: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 16px; text-align: center; }
.card-ev .front { background: linear-gradient(180deg, #29366f, #1a1c2c); box-shadow: 0 0 0 4px #1a1c2c, 0 0 0 8px #ffcd75, 0 0 0 12px #1a1c2c, 10px 14px 0 8px rgba(0,0,0,.4); }
.card-ev .back { background: repeating-linear-gradient(45deg, #b13e53 0 16px, #5d275d 16px 32px); box-shadow: 0 0 0 4px #1a1c2c, 0 0 0 8px #ef7d57; transform: rotateY(180deg); }
.card-ev .back img.px { width: 90px; height: 90px; }
.card-ev .ic img.px { width: 80px; height: 80px; }
.card-ev b { font-size: 26px; margin-top: 10px; color: #ffcd75; text-shadow: 3px 3px 0 #1a1c2c; }
.card-ev small { color: #94b0c2; font-size: 17px; margin-top: 6px; }
.vpbars { position: absolute; left: 74px; top: 260px; width: 380px; display: grid; gap: 16px; }
.vpbars .row { font-weight: 700; font-size: 22px; text-shadow: 3px 3px 0 #1a1c2c; }
.vpbars .track { height: 20px; background: #1a1c2c; box-shadow: 0 0 0 3px #333c57; margin-top: 8px; }
.vpbars .fill { height: 100%; box-shadow: inset -4px -4px 0 rgba(0,0,0,.3); }
.room { position: absolute; font-family: 'Silkscreen'; font-size: 80px; font-weight: 700; color: #ffcd75; background: #1a1c2c; box-shadow: 0 0 0 4px #ffcd75, 0 0 0 8px #1a1c2c; text-shadow: 5px 5px 0 #b13e53; }
.device { position: absolute; width: 170px; height: 300px; background: #1a1c2c; box-shadow: 0 0 0 5px #566c86, 0 0 0 10px #1a1c2c; display: grid; place-items: center; }
.device img.px { width: 90px; height: 90px; }
.link-line { position: absolute; height: 8px; background: repeating-linear-gradient(90deg, #38b764 0 16px, transparent 16px 28px); }
.divider { position: absolute; top: 60px; bottom: 60px; left: 640px; width: 4px; background: repeating-linear-gradient(0deg, #ffcd75 0 8px, transparent 8px 16px); opacity: .5; }
.feature-grid { position: absolute; left: 0; right: 0; top: 500px; display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; padding: 0 70px; }
.feature-grid span { padding: 8px 14px; background: #1a1c2c; box-shadow: 0 0 0 3px #566c86; font-weight: 600; font-size: 21px; }
.url { position: absolute; left: 0; right: 0; top: 640px; text-align: center; font-size: 30px; font-weight: 700; color: #a7f070; text-shadow: 3px 3px 0 #1a1c2c; }