@font-face { font-family: VCR; src: url('Fonts/VCR_OSD_MONO_1.001.ttf') format('truetype'); font-display: swap; }
.arcade-page { margin: 0; min-height: 100svh; height: auto; overflow-x: hidden; overflow-y: auto; background: radial-gradient(ellipse at 25% 0, #103e50a0, transparent 55%), radial-gradient(ellipse at 85% 75%, #40194580, transparent 55%), #090c19; color: #eaffff; font: 16px VCR, monospace; display: block; cursor: auto; }
.arcade-page::before { opacity: .15; }
.arcade-page * { box-sizing: border-box; }
.arcade-page .back-nav, .arcade-page .back-btn { position: absolute; left: 24px; top: 18px; border: 0; box-shadow: none; padding: 8px; color: #b2dbe3; font: .9rem VCR, monospace; text-decoration: none; z-index: 20; }
.arcade-page .back-link { border: 0; font: .9rem VCR, monospace; }
.arcade-page .page-header, .arcade-heading { padding: 90px 20px 26px; text-align: center; background: none; min-height: 0; }
.arcade-page .page-header::before { content: none; }
.arcade-kicker { color: #ff91d5; font: .8rem VCR, monospace; letter-spacing: .18em; margin: 0 0 14px; }
.arcade-page .page-title, .arcade-heading h1 { font: clamp(2rem, 6vw, 3.5rem)/1.2 VCR, monospace; color: #efffff !important; background: none; -webkit-text-fill-color: currentColor; text-shadow: 3px 3px #24667b !important; animation: none; margin: 0 0 14px; }
.arcade-page .page-title::before, .arcade-page .page-title::after { content: none; }
.arcade-page .page-subtitle, .arcade-heading p:not(.arcade-kicker) { font: 1rem/1.6 VCR, monospace; color: #acc6d5; margin: 0; }
.arcade-page .gallery-container, .arcade-main { max-width: 960px; margin: auto; padding: 0 24px 55px; width: 100%; }
.arcade-page .life-section { max-width: none; margin: 0; padding: 0; }
.arcade-page canvas { display: block; width: 100%; max-width: 100%; height: auto; border: 0; box-shadow: none; background: #080e1b; image-rendering: pixelated; touch-action: none; cursor: crosshair; }
.arcade-page .canvas-wrapper, .arcade-arena { position: relative; padding: 7px; border: 1px solid #477083 !important; border-radius: 0; background: #121b2c; box-shadow: 0 0 24px #00ffff18, 5px 5px 0 #060a16 !important; }
.arcade-hud { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 0; font: .95rem VCR, monospace; color: #71f5ed; flex-wrap: wrap; }
.arcade-hud .rival { color: #ff91d5; }
.arcade-page .life-controls, .arcade-actions { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px; margin: 22px 0; }
.arcade-page button, .arcade-button { background: #101a2b; border: 1px solid #71f5ed; color: #71f5ed; padding: 12px 18px; min-height: 44px; font: .9rem VCR, monospace; cursor: pointer; box-shadow: 3px 3px #060a16; border-radius: 0; }
.arcade-page button:hover { background: #203746; color: #fff; }
.arcade-page .arcade-primary { color: #170d24; background: #ff91d5; border-color: #ffbce5; }
.arcade-page button:disabled { opacity: .4; cursor: default; }
.arcade-page .life-instructions, .arcade-page .controls, .arcade-help { font: .9rem/1.65 VCR, monospace; color: #adbdcf; text-align: center; margin: 20px auto; max-width: 750px; text-shadow: none; }
.arcade-page .footer { margin-top: 0; padding: 25px; border-top: 1px solid #293e54; background: none; font: .8rem VCR, monospace; }
.arcade-status { color: #b9ceda; text-align: center; font: .9rem VCR, monospace; min-height: 1.5em; }
.arcade-page #score-display { display: block; margin-top: 18px; color: #71f5ed; font: 1.2rem VCR, monospace; text-shadow: 0 0 10px #71f5ed40; }
.arcade-dialog { max-width: min(450px, calc(100% - 32px)); color: #eaffff; border: 1px solid #71f5ed; background: #101a2b; padding: 28px; text-align: center; font: 1rem/1.5 VCR, monospace; }
.arcade-dialog::backdrop { background: #050815cc; }
.arcade-dialog h2 { color: #71f5ed; font: 2rem VCR, monospace; }
.arcade-dialog input { display: block; margin: 16px auto; width: 100px; padding: 8px; color: #ff91d5; background: #080e1b; border: 1px solid #ff91d5; font: 1.8rem VCR, monospace; text-align: center; text-transform: uppercase; }
.arcade-reward { color: #ff91d5; text-align: center; font: .85rem/1.5 VCR, monospace; margin: 18px 0; }
.gravity-console { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 20000; display: flex; gap: 20px; align-items: center; background: #101a2bef; padding: 16px 22px; border: 1px solid #71f5ed; color: #71f5ed; font: .9rem VCR, monospace; max-width: calc(100% - 24px); }
.gravity-console button { background: transparent; border: 1px solid #ff91d5; color: #ff91d5; padding: 10px; font: inherit; cursor: pointer; }
.portal-page .noise { opacity: .035; animation: none; }
.portal-page { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.portal-page .container:not(.visible) { display: none; }
.portal-page #start-screen { padding: 30px; text-align: center; cursor: pointer; animation: none; }
.portal-page #start-screen::before { content: ''; display: block; width: 96px; height: 96px; margin: 0 auto 28px; background: url('Assets/invaders/skull.svg') 0 0 / 400% 100% no-repeat; image-rendering: pixelated; filter: drop-shadow(0 0 16px #ff91d580); }
.portal-page .vignette { background: radial-gradient(circle, transparent 40%, #30132d80); animation: none; }
.portal-page h1 { font-size: clamp(2.5rem, 10vw, 5rem); animation: none; }
.portal-page #start-screen { color: #71f5ed; font-size: clamp(1rem, 4vw, 1.7rem); }
.portal-page .container { padding: 24px; max-width: 100%; }
.portal-page #status-text { font-size: 1rem; color: #ff91d5; }
@media (max-width: 600px) { .arcade-page .gallery-container, .arcade-main { padding: 0 12px 40px; } .arcade-page .back-nav, .arcade-page .back-btn { left: 12px; } .arcade-hud { font-size: .8rem; gap: 8px; } .arcade-page button { padding: 10px 12px; } .gravity-console { font-size: .75rem; gap: 10px; padding: 10px; } }
@media (prefers-reduced-motion: reduce) { .arcade-page *, .arcade-page *::before, .arcade-page *::after { animation: none !important; transition: none !important; } }