.online-arcade{overflow:hidden;background:radial-gradient(800px 420px at 50% 0,rgba(155,92,255,.13),transparent 68%)}
.online-arcade .wrap{container-type:inline-size}
.online-arcade-head{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:26px}
.online-arcade-head-copy{min-width:0}
.online-arcade-head .lead{margin-bottom:0}
.online-booth-link{flex:0 0 auto}
.online-game-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;align-items:stretch}
.online-game{--game-accent:var(--cyan);min-width:0;display:flex;flex-direction:column;position:relative;padding-top:10px;transition:transform .18s ease,filter .18s ease}
.online-game:hover{transform:translateY(-5px);filter:brightness(1.07)}
.online-game-featured::before{content:'TODAY\2019S QUEST';position:absolute;z-index:4;top:0;right:8px;padding:5px 8px;border-radius:5px;background:var(--gold);color:#241400;font:700 .54rem/1 'Orbitron',sans-serif;letter-spacing:.08em;box-shadow:0 0 18px rgba(255,203,61,.45)}
.online-mini-cab{position:relative;display:flex;flex-direction:column;flex:1;background:linear-gradient(180deg,#241141 0%,#120822 74%,#090512 100%);border:2px solid color-mix(in srgb,var(--game-accent) 48%,#2b1746);border-radius:14px 14px 6px 6px;box-shadow:0 18px 34px rgba(0,0,0,.45),inset 0 0 28px rgba(0,0,0,.55);overflow:hidden}
.online-mini-marquee{min-height:49px;display:flex;align-items:center;justify-content:center;text-align:center;padding:9px 8px;background:var(--game-accent);color:#090313;font:900 clamp(.58rem,.75vw,.72rem)/1.35 'Press Start 2P',monospace;text-transform:uppercase;box-shadow:0 0 20px color-mix(in srgb,var(--game-accent) 55%,transparent)}
.online-mini-bezel{margin:11px 10px 0;padding:7px;background:#05020b;border:1px solid #35205c;border-radius:8px;box-shadow:inset 0 0 18px #000}
.online-mini-screen{position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:4px;background:#07020f;box-shadow:inset 0 0 30px rgba(0,0,0,.9)}
.online-mini-screen::after{content:'';position:absolute;inset:0;z-index:9;pointer-events:none;background:repeating-linear-gradient(0deg,transparent 0 2px,rgba(0,0,0,.24) 2px 3px),radial-gradient(circle at 50% 50%,transparent 50%,rgba(0,0,0,.34) 100%)}
.online-preview{position:absolute;inset:0;color:var(--game-accent);overflow:hidden}
.online-preview-shooter .alien{position:absolute;width:11px;height:7px;background:currentColor;box-shadow:0 0 8px currentColor;animation:onlineAlien 1.4s steps(2,end) infinite}
.online-preview-shooter .alien:nth-child(1){left:20%;top:20%}.online-preview-shooter .alien:nth-child(2){left:44%;top:20%;animation-delay:.15s}.online-preview-shooter .alien:nth-child(3){left:68%;top:20%;animation-delay:.3s}.online-preview-shooter .alien:nth-child(4){left:31%;top:38%;animation-delay:.45s}.online-preview-shooter .alien:nth-child(5){left:57%;top:38%;animation-delay:.6s}
.online-preview-shooter .player{position:absolute;bottom:13%;left:calc(50% - 10px);width:20px;height:7px;background:var(--cyan);box-shadow:0 0 9px var(--cyan)}
.online-preview-shooter .laser{position:absolute;left:50%;bottom:23%;width:2px;height:15px;background:var(--gold);box-shadow:0 0 8px var(--gold);animation:onlineLaser 1.05s linear infinite}
.online-preview-paddle .paddle{position:absolute;top:32%;width:4px;height:34%;background:currentColor;box-shadow:0 0 9px currentColor}
.online-preview-paddle .paddle.a{left:10%;animation:onlinePaddleA 1.7s ease-in-out infinite}.online-preview-paddle .paddle.b{right:10%;animation:onlinePaddleB 1.5s ease-in-out infinite}
.online-preview-paddle .ball{position:absolute;width:6px;height:6px;background:#fff;box-shadow:0 0 8px #fff;animation:onlineBall 1.7s linear infinite}
.online-preview-paddle::before{content:'';position:absolute;left:50%;top:8%;bottom:8%;border-left:2px dashed color-mix(in srgb,currentColor 45%,transparent)}
.online-preview-crossing .bridge-line{position:absolute;left:5%;right:5%;top:38%;height:3px;background:currentColor;box-shadow:0 0 8px currentColor}
.online-preview-crossing .bridge-line::before,.online-preview-crossing .bridge-line::after{content:'';position:absolute;bottom:0;width:3px;height:32px;background:currentColor}.online-preview-crossing .bridge-line::before{left:22%}.online-preview-crossing .bridge-line::after{right:22%}
.online-preview-crossing .cross-car{position:absolute;top:30%;left:-24px;width:22px;height:9px;border-radius:4px;background:var(--gold);box-shadow:0 0 10px var(--gold);animation:onlineCross 2.6s linear infinite}
.online-preview-crossing .water{position:absolute;left:0;right:0;bottom:0;height:36%;background:repeating-linear-gradient(0deg,transparent 0 7px,color-mix(in srgb,var(--cyan) 35%,transparent) 7px 9px)}
.online-preview-tunnel{background:radial-gradient(ellipse at 50% 66%,transparent 0 15%,color-mix(in srgb,var(--game-accent) 18%,transparent) 16% 18%,transparent 19% 27%,color-mix(in srgb,var(--game-accent) 28%,transparent) 28% 30%,transparent 31% 41%,color-mix(in srgb,var(--game-accent) 38%,transparent) 42% 44%,transparent 45%)}
.online-preview-tunnel .runner{position:absolute;bottom:15%;left:20%;width:8px;height:13px;background:var(--gold);box-shadow:0 0 12px var(--gold);animation:onlineTunnel 2s ease-in-out infinite}
.online-preview-tunnel .lamp{position:absolute;top:23%;right:19%;width:7px;height:7px;border-radius:50%;background:var(--cyan);box-shadow:0 0 16px 6px color-mix(in srgb,var(--cyan) 45%,transparent);animation:onlineFlicker 1.5s steps(2,end) infinite}
.online-preview-driving .road{position:absolute;left:25%;right:25%;bottom:-5%;height:112%;background:linear-gradient(90deg,transparent 0 10%,rgba(255,255,255,.08) 10% 90%,transparent 90%);clip-path:polygon(42% 0,58% 0,100% 100%,0 100%)}
.online-preview-driving .road::after{content:'';position:absolute;left:49%;top:0;width:2%;height:100%;background:repeating-linear-gradient(180deg,var(--gold) 0 9px,transparent 9px 19px);animation:onlineRoad .7s linear infinite}
.online-preview-driving .drive-car{position:absolute;bottom:13%;left:calc(50% - 12px);width:24px;height:13px;border-radius:5px 5px 2px 2px;background:currentColor;box-shadow:0 0 12px currentColor;animation:onlineDrive 1.2s ease-in-out infinite}
.online-controls{height:28px;margin:7px 13px 0;border:1px solid #342052;border-radius:5px;background:linear-gradient(#21103a,#10071e);display:flex;align-items:center;justify-content:center;gap:8px}
.online-stick{width:7px;height:7px;border-radius:50%;background:var(--magenta);box-shadow:0 0 7px var(--magenta)}
.online-control-button{width:7px;height:7px;border-radius:50%;background:var(--game-accent);box-shadow:0 0 7px var(--game-accent)}
.online-game-copy{display:flex;flex-direction:column;flex:1;padding:12px 12px 14px;text-align:center}
.online-game-meta{min-height:2.2em;color:var(--game-accent);font:700 .58rem/1.45 'Orbitron',sans-serif;letter-spacing:.08em;text-transform:uppercase}
.online-game-copy h3{font:900 .87rem/1.35 'Orbitron',sans-serif;margin:5px 0 7px;color:var(--cream)}
.online-game-copy p{color:var(--mute);font-size:.76rem;line-height:1.48;margin:0 0 12px}
.online-play-button{margin-top:auto;width:100%;padding:11px 9px;min-height:40px;font-size:.67rem;border-color:var(--game-accent);color:var(--game-accent)}
.online-play-button:hover{color:#071016;background:var(--game-accent)}
.online-game-disabled{opacity:.55;filter:saturate(.5)}
.online-game-disabled:hover{transform:none;filter:saturate(.5)}
.online-game-disabled .online-play-button{cursor:not-allowed}
.online-arcade-note{text-align:center;color:var(--mute);font-size:.82rem;margin:18px auto 0;max-width:680px}
.online-game-modal[hidden]{display:none!important}
.online-game-modal{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:16px}
.online-game-modal-backdrop{position:absolute;inset:0;border:0;background:rgba(4,1,14,.93);backdrop-filter:blur(5px);cursor:pointer}
.online-game-stage{position:relative;z-index:1;width:min(960px,96vw);height:min(820px,94vh);display:flex;flex-direction:column;background:#090414;border:1px solid rgba(155,92,255,.55);border-radius:16px;box-shadow:0 0 60px rgba(155,92,255,.3),0 30px 80px rgba(0,0,0,.7);overflow:hidden}
.online-game-stage-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 14px;border-bottom:1px solid rgba(155,92,255,.3);background:#120824}
.online-game-stage-title{min-width:0}.online-game-stage-title span{display:block;color:var(--cyan);font:700 .58rem/1.4 'Orbitron',sans-serif;letter-spacing:.12em;text-transform:uppercase}.online-game-stage-title strong{display:block;color:var(--cream);font:900 .9rem/1.4 'Orbitron',sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.online-game-stage-actions{display:flex;align-items:center;gap:8px;flex:0 0 auto}.online-game-external{font-size:.63rem;padding:9px 11px;min-height:36px}.online-game-close{width:38px;height:38px;border:1px solid rgba(155,92,255,.5);border-radius:8px;background:#1a0d31;color:var(--cream);font-size:1.25rem;cursor:pointer}.online-game-close:hover{border-color:var(--cyan);color:var(--cyan)}
.online-game-frame-wrap{flex:1;min-height:0;padding:8px;background:#05020c}.online-game-frame{display:block;width:100%;height:100%;border:0;border-radius:9px;background:#05020c}
body.online-game-open{overflow:hidden}
@keyframes onlineAlien{50%{transform:translateX(4px)}}@keyframes onlineLaser{from{transform:translateY(0);opacity:1}to{transform:translateY(-70px);opacity:0}}@keyframes onlinePaddleA{0%,100%{transform:translateY(-12px)}50%{transform:translateY(12px)}}@keyframes onlinePaddleB{0%,100%{transform:translateY(10px)}50%{transform:translateY(-14px)}}@keyframes onlineBall{0%{left:14%;top:35%}25%{left:45%;top:67%}50%{left:80%;top:40%}75%{left:45%;top:15%}100%{left:14%;top:35%}}@keyframes onlineCross{from{transform:translateX(0)}to{transform:translateX(230px)}}@keyframes onlineTunnel{0%,100%{transform:translate(0,0)}50%{transform:translate(90px,-28px) scale(.55)}}@keyframes onlineFlicker{0%,70%,100%{opacity:1}72%,76%{opacity:.35}}@keyframes onlineRoad{to{background-position-y:19px}}@keyframes onlineDrive{0%,100%{transform:translateX(-7px)}50%{transform:translateX(7px)}}
@media(max-width:980px){.online-game-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:760px){.online-arcade-head{display:block}.online-booth-link{margin-top:18px}.online-game-grid{display:flex!important;grid-template-columns:none!important;overflow-x:auto;overflow-y:visible;gap:14px;margin-inline:-20px;padding:8px 20px 18px;scroll-snap-type:x mandatory;scroll-padding-inline:20px;-webkit-overflow-scrolling:touch;scrollbar-width:thin}.online-game{flex:0 0 clamp(240px,82%,290px)!important;width:auto!important;min-width:240px!important;max-width:290px;scroll-snap-align:center}.online-game:hover{transform:none}.online-game-stage{width:100%;height:96vh}.online-game-stage-head{padding:10px}.online-game-external{display:none}.online-game-stage-title strong{font-size:.76rem}.online-game-modal{padding:8px}}
@container(max-width:760px){.online-arcade-head{display:block}.online-booth-link{margin-top:18px}.online-game-grid{display:flex!important;grid-template-columns:none!important;overflow-x:auto;overflow-y:visible;gap:14px;margin-inline:-20px;padding:8px 20px 18px;scroll-snap-type:x mandatory;scroll-padding-inline:20px;-webkit-overflow-scrolling:touch;scrollbar-width:thin}.online-game{flex:0 0 clamp(240px,82%,290px)!important;width:auto!important;min-width:240px!important;max-width:290px;scroll-snap-align:center}.online-game:hover{transform:none}.online-game-stage{width:100%;height:96vh}.online-game-stage-head{padding:10px}.online-game-external{display:none}.online-game-stage-title strong{font-size:.76rem}.online-game-modal{padding:8px}}
@media(prefers-reduced-motion:reduce){.online-preview *,.online-preview::before,.online-preview::after{animation:none!important}}