@font-face{font-family:DGPixel;src:url(fonts/press-start-2p.ttf) format("truetype");font-weight:400;font-display:swap}
.dg-arcade{background:#080909;border-top:1px solid #2a2a2a;padding:clamp(38px,4vw,64px) 5vw 48px;scroll-margin-top:100px}
.arcade-wrap{max-width:min(1320px,max(640px,calc((100svh - 260px)*1.6)));margin:0 auto}
.arcade-heading{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:22px;color:#d9dcce}
.arcade-heading h2,.arcade-heading>span{font-family:var(--body);font-size:10px;font-weight:500;line-height:1.6;letter-spacing:.18em;text-transform:uppercase}
.arcade-heading>span{color:#92988a;font-size:9px;letter-spacing:.1em}
.arcade-screen{position:relative;isolation:isolate;aspect-ratio:16/10;overflow:hidden;border:2px solid #cccbb6;background:#070e20;box-shadow:0 0 0 5px #080909,0 0 0 6px #36392e}
.arcade-screen::after{content:"";position:absolute;z-index:5;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,transparent 0 3px,#00000024 3px 4px);opacity:.35}
#dg-arcade-canvas{display:block;width:100%;height:100%;image-rendering:pixelated}
.arcade-hud{position:absolute;z-index:3;top:0;left:0;right:0;display:flex;align-items:flex-start;justify-content:space-between;padding:18px 22px;background:linear-gradient(#060d2066,transparent 80%);pointer-events:none;color:#f6efd2;font-family:DGPixel,monospace;text-shadow:2px 2px #060a16}
.arcade-hud strong{font:400 clamp(13px,2.1vw,27px)/1.3 DGPixel,monospace;letter-spacing:.01em}
.arcade-hud>img{position:absolute;top:19px;left:50%;transform:translateX(-50%);width:45px;height:28px}
.arcade-class{font-size:8px;line-height:1.9;text-align:right}
.arcade-class strong{font-size:18px}
.arcade-turbo{display:flex;align-items:center;gap:10px;margin-top:8px;color:#ffda38;font-size:9px;line-height:1.4}
.arcade-turbo>span{display:flex;gap:3px;padding:3px;border:1px solid #968a40}
.arcade-turbo i{display:block;width:14px;height:7px;background:#ffda38;box-shadow:inset 0 -2px #c69014}
.arcade-scoreboard{position:absolute;z-index:3;bottom:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:44px;padding:13px 22px;border-top:2px solid #d5cca0;background:#071027;color:#f4ebcf;font:400 clamp(7px,.85vw,11px)/1.7 DGPixel,monospace}
.arcade-scoreboard>span:nth-child(2){color:#ffda38;text-align:center;font-size:clamp(7px,1vw,12px)}
.arcade-scoreboard>span:last-child{color:#b7bcd0}
.arcade-announcement{position:absolute;z-index:4;left:8px;right:8px;top:43%;display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center;pointer-events:none}
.arcade-ready{color:#fff3bd;font:400 clamp(18px,3.1vw,42px)/1.4 DGPixel,monospace;text-shadow:4px 4px #090e20,-2px -2px #090e20;opacity:0;transform:translateY(8px);transition:opacity 160ms ease-out,transform 160ms ease-out}
.arcade-fire{display:none;color:#ffd137;font:400 clamp(24px,4.2vw,59px)/1.5 DGPixel,monospace;letter-spacing:-.05em;text-shadow:0 3px #ff7f18,0 6px #b23c0e,4px 9px #070c1b,-3px -2px #070c1b;white-space:nowrap}
.arcade-next{display:none;color:#f4efd2;font:400 clamp(7px,.9vw,12px)/1.8 DGPixel,monospace;letter-spacing:.03em;text-shadow:2px 2px #070c1b}
.dg-arcade[data-state=ready] .arcade-ready,.dg-arcade[data-state=intro] .arcade-ready{opacity:1;transform:none}
.dg-arcade[data-state=fire] .arcade-fire,.dg-arcade[data-state=done] .arcade-fire,.dg-arcade[data-state=fire] .arcade-next,.dg-arcade[data-state=done] .arcade-next{display:block}
.dg-arcade[data-state=fire] .arcade-ready,.dg-arcade[data-state=done] .arcade-ready{display:none}
.dg-arcade[data-state=fire] .arcade-announcement,.dg-arcade[data-state=done] .arcade-announcement{top:20%;padding:28px 0;background:#060d20d6;border-top:1px solid #f8d04b33;border-bottom:1px solid #f8d04b33}
.dg-arcade[data-state=fire] .arcade-fire{animation:arcade-impact 220ms ease-out both}
@keyframes arcade-impact{from{transform:scale(1.13);opacity:0}to{transform:scale(1);opacity:1}}
.arcade-controls{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:18px 0 12px;border-bottom:1px solid #343830;font-family:var(--body);color:#daddd0}
.arcade-controls>div{display:flex;align-items:center;gap:22px}
.arcade-controls button,.arcade-controls>a{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:44px;padding:8px 0;border:0;background:none;color:inherit;font-family:var(--body);font-size:11px;line-height:1.5;letter-spacing:.02em;cursor:pointer;text-decoration:none;white-space:nowrap}
.arcade-controls button:hover,.arcade-controls>a:hover{color:#ffda38}
.arcade-controls button:disabled{opacity:.4;cursor:default}
.arcade-controls button[aria-pressed=true]{color:#ffda38}
.arcade-controls button:focus-visible,.arcade-controls>a:focus-visible{outline:2px solid #f4efd2;outline-offset:5px}
.arcade-controls>a>span{font-size:20px;transition:transform 150ms ease-out}
.arcade-controls>a:hover>span{transform:translate(2px,-2px)}
.arcade-note{margin-top:14px;color:#979f8f;font:400 11px/1.7 var(--body)}
.arcade-note a{color:inherit;text-underline-offset:4px}
.arcade-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.dg-arcade[data-state=error] .arcade-ready{opacity:1;transform:none;font-family:var(--body);font-size:18px}
@media(max-width:700px){
 .dg-arcade{padding:38px 22px 30px}
 .arcade-wrap{max-width:none}
 .arcade-heading{margin-bottom:20px;gap:16px}
 .arcade-heading h2{font-size:9px;letter-spacing:.12em}
 .arcade-heading>span{font-size:8px;max-width:13ch;text-align:right}
 .arcade-screen{aspect-ratio:4/5}
 .arcade-hud{padding:14px 12px}
 .arcade-hud strong{font-size:14px}
 .arcade-hud>img{width:30px;height:22px;top:15px}
 .arcade-class{font-size:6px;line-height:2}
 .arcade-class strong{font-size:12px}
 .arcade-turbo{font-size:6px;gap:6px;margin-top:6px}
 .arcade-turbo>span{gap:2px;padding:2px}
 .arcade-turbo i{width:7px;height:5px}
 .arcade-scoreboard{min-height:40px;padding:10px 12px;gap:10px;font-size:6px}
 .arcade-scoreboard>span:nth-child(2){font-size:6px}
 .arcade-scoreboard>span:last-child{display:none}
 .arcade-fire{font-size:clamp(18px,5.5vw,30px)}
 .arcade-ready{font-size:22px}
 .arcade-next{font-size:7px}
 .arcade-controls{display:block;padding:12px 0 6px}
 .arcade-controls>div{justify-content:space-between;gap:16px}
 .arcade-controls>a{width:100%;justify-content:space-between;border-top:1px solid #30362d;margin-top:6px;min-height:54px}
 .arcade-controls button,.arcade-controls>a{font-size:11px}
 .arcade-note{font-size:10px;margin-top:12px}
}
@media(prefers-reduced-motion:reduce){.dg-arcade *,.dg-arcade *::after{animation:none!important;transition:none!important}}