:root {
    --green: #8dff16;
    --green-soft: #64cf0b;
    --green-dark: #183d04;
    --black: #020500;
    --panel: rgba(2, 8, 0, 0.88);
    --panel-solid: #061000;
    --red: #ef2d22;
    --yellow: #ffd54a;
    --white: #e9ffd9;
    --muted: #a8c89a;
    --max-width: 1180px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--black); }
body {
    margin: 0; min-width: 320px; color: var(--white);
    background: linear-gradient(rgba(0,0,0,.22),rgba(0,0,0,.74)), url("assets/clacton-background.jpg") center top / cover fixed;
    font-family: "Courier New", Courier, monospace; line-height: 1.55;
}
body::before { content:""; position:fixed; inset:0; z-index:100; pointer-events:none; opacity:.14; background:repeating-linear-gradient(to bottom,rgba(255,255,255,.07) 0,rgba(255,255,255,.07) 1px,transparent 1px,transparent 4px); mix-blend-mode:screen; }
a { color:inherit; } img { display:block; max-width:100%; }
.skip-link { position:absolute; left:-9999px; top:0; }
.skip-link:focus { left:12px; top:12px; z-index:999; padding:10px 14px; color:var(--black); background:var(--green); }
.site-header { position:sticky; top:0; z-index:50; border-bottom:1px solid rgba(141,255,22,.28); background:rgba(1,6,0,.94); backdrop-filter:blur(10px); }
.nav-shell { width:min(var(--max-width),calc(100% - 32px)); min-height:72px; margin:0 auto; display:flex; align-items:center; gap:22px; }
.brand { margin-right:auto; color:var(--green); font-size:clamp(18px,2vw,25px); font-weight:900; text-decoration:none; letter-spacing:.06em; text-shadow:0 0 12px rgba(141,255,22,.7); }
.nav-links { display:flex; align-items:center; gap:18px; }
.nav-links a { color:var(--white); text-decoration:none; font-size:14px; }
.nav-links a:hover,.nav-links a:focus-visible { color:var(--green); }
.nav-toggle { display:none; border:1px solid var(--green-soft); padding:8px 10px; color:var(--green); background:transparent; font:inherit; }
.button { display:inline-flex; min-height:46px; align-items:center; justify-content:center; gap:8px; border:2px solid var(--green-soft); border-radius:5px; padding:11px 18px; color:var(--green); background:rgba(7,20,0,.88); font:800 15px/1 "Courier New",monospace; text-decoration:none; text-transform:uppercase; letter-spacing:.045em; cursor:pointer; box-shadow:0 0 14px rgba(141,255,22,.12); }
.button:hover,.button:focus-visible { color:var(--black); background:var(--green); box-shadow:0 0 18px rgba(141,255,22,.55); }
.button-donate { border-color:var(--yellow); color:var(--yellow); }
.button-donate:hover,.button-donate:focus-visible { color:#160d00; background:var(--yellow); box-shadow:0 0 18px rgba(255,213,74,.55); }
.button-secondary { border-color:rgba(233,255,217,.55); color:var(--white); }
.hero { min-height:calc(100vh - 72px); display:grid; place-items:center; padding:72px 0 58px; }
.hero-shell,.section-shell { width:min(var(--max-width),calc(100% - 32px)); margin:0 auto; }
.hero-grid { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(300px,.9fr); align-items:center; gap:52px; }
.kicker { margin:0 0 14px; color:var(--green); font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.hero h1 { margin:0; color:var(--green); font-size:clamp(54px,9vw,112px); line-height:.82; letter-spacing:-.065em; text-shadow:0 0 10px rgba(141,255,22,.95),0 0 30px rgba(141,255,22,.4); }
.hero h1 span { display:block; }
.hero-quote { margin:30px 0 12px; color:var(--white); font-size:clamp(21px,3vw,34px); font-weight:900; line-height:1.2; }
.hero-copy { max-width:680px; margin:0; color:#d7efcb; font-size:18px; }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }
.hero-art { position:relative; min-height:510px; display:grid; place-items:center; }
.arcade-panel { position:relative; width:min(100%,430px); aspect-ratio:4/5; overflow:hidden; border:3px solid var(--green); border-radius:12px; background:linear-gradient(rgba(0,0,0,.18),rgba(0,0,0,.54)),url("assets/clacton-background.jpg") center/cover; box-shadow:0 0 34px rgba(141,255,22,.32),inset 0 0 60px rgba(0,0,0,.5); }
.arcade-panel::after { content:""; position:absolute; inset:0; background:radial-gradient(circle at center,transparent 45%,rgba(0,0,0,.65)),repeating-linear-gradient(to bottom,rgba(255,255,255,.05) 0 1px,transparent 1px 4px); pointer-events:none; }
.panel-score { position:absolute; inset:18px 20px auto; display:flex; justify-content:space-between; color:var(--green); font-weight:900; text-shadow:0 0 8px rgba(141,255,22,.9); }
.invader-grid { position:absolute; top:23%; left:10%; right:10%; display:grid; grid-template-columns:repeat(5,1fr); gap:18px 14px; }
.invader-grid img { width:52px; filter:drop-shadow(0 0 7px rgba(141,255,22,.85)); }
.panel-bus { position:absolute; top:15%; right:6%; width:44%; filter:drop-shadow(0 0 7px rgba(239,45,34,.72)); }
.panel-shooter { position:absolute; left:50%; bottom:7%; width:84px; transform:translateX(-50%); filter:drop-shadow(0 0 10px rgba(141,255,22,.85)); }
.section { padding:84px 0; border-top:1px solid rgba(141,255,22,.18); background:rgba(0,5,0,.78); }
.section-alt { background:rgba(5,14,0,.91); }
.section-heading { max-width:780px; margin-bottom:34px; }
.eyebrow { margin:0 0 8px; color:var(--green-soft); font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.section h2 { margin:0; color:var(--green); font-size:clamp(34px,5vw,58px); line-height:1; text-shadow:0 0 14px rgba(141,255,22,.32); }
.section-lead { max-width:760px; margin:18px 0 0; color:#cfe8c3; font-size:18px; }
.card-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.feature-card { border:1px solid rgba(141,255,22,.38); border-radius:7px; padding:24px; background:rgba(2,11,0,.84); }
.feature-card strong { display:block; margin-bottom:8px; color:var(--green); font-size:20px; }
.feature-card p { margin:0; color:#c7dec0; }
.charity-panel { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(260px,.8fr); gap:36px; align-items:center; border:2px solid var(--yellow); border-radius:9px; padding:clamp(24px,5vw,48px); background:rgba(18,12,0,.88); box-shadow:0 0 30px rgba(255,213,74,.12); }
.charity-panel h2 { color:var(--yellow); text-shadow:0 0 14px rgba(255,213,74,.28); }
.charity-panel p { color:#fff2bc; }
.charity-mark { display:grid; gap:14px; }
.charity-name { border:1px solid rgba(255,213,74,.55); border-radius:6px; padding:18px; color:var(--yellow); background:rgba(255,213,74,.05); text-align:center; font-weight:900; font-size:20px; }
.game-preview { display:grid; grid-template-columns:minmax(0,1fr) 350px; gap:30px; align-items:center; }
.preview-window { overflow:hidden; border:2px solid var(--green); border-radius:10px; background:#000; box-shadow:0 0 28px rgba(141,255,22,.22); }
.preview-window img { width:100%; aspect-ratio:16/9; object-fit:cover; opacity:.82; }
.controls-list { margin:22px 0 0; padding:0; list-style:none; }
.controls-list li { margin:9px 0; color:#d7edcd; }
.controls-list code { display:inline-block; min-width:86px; margin-right:8px; border:1px solid rgba(141,255,22,.35); padding:3px 7px; color:var(--green); background:rgba(0,0,0,.48); text-align:center; }
.share-panel { display:flex; justify-content:space-between; align-items:center; gap:28px; flex-wrap:wrap; }
.share-actions { display:flex; flex-wrap:wrap; gap:10px; }
.notice { border-left:4px solid var(--green); padding:18px 20px; color:#cfe3c7; background:rgba(4,14,0,.78); }
.site-footer { padding:34px 0; border-top:1px solid rgba(141,255,22,.2); background:#010400; }
.footer-grid { width:min(var(--max-width),calc(100% - 32px)); margin:0 auto; display:grid; grid-template-columns:1fr auto; gap:24px; align-items:center; }
.footer-grid p { margin:3px 0; color:var(--muted); font-size:13px; }
.footer-links { display:flex; gap:16px; flex-wrap:wrap; }
.footer-links a { color:var(--green); font-size:13px; }
.play-page { min-height:100vh; background:#010400; }
.play-shell { width:min(1240px,calc(100% - 24px)); margin:0 auto; padding:26px 0 50px; }
.play-toolbar { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:18px; }
.game-stage { width:min(100%,calc((100vh - 190px) * 4 / 3)); min-width:0; margin:0 auto; }
.game-frame-shell { position:relative; width:100%; aspect-ratio:4/3; overflow:hidden; border:2px solid var(--green); border-radius:8px; background:#000; box-shadow:0 0 32px rgba(141,255,22,.25); }
.game-frame-shell .game-frame { display:block; width:100%; height:100%; aspect-ratio:auto; border:0; border-radius:0; box-shadow:none; }
.game-size-note { margin:10px 0 0; color:var(--muted); font-size:13px; text-align:center; }
.game-modal { position:fixed; inset:0; z-index:1000; display:none; background:rgba(0,0,0,.96); }
.game-modal.open { display:grid; grid-template-rows:auto minmax(0,1fr); }
.game-modal-toolbar { min-height:62px; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:10px 18px; border-bottom:1px solid rgba(141,255,22,.3); background:#010400; }
.game-modal-title { color:var(--green); font-weight:900; letter-spacing:.05em; }
.game-modal-stage { min-height:0; display:grid; place-items:center; padding:12px; }
.game-modal-stage .game-frame { width:min(calc(100vw - 24px),calc((100vh - 86px) * 4 / 3)); height:auto; aspect-ratio:4/3; border:2px solid var(--green); border-radius:8px; background:#000; box-shadow:0 0 32px rgba(141,255,22,.25); }
body.game-modal-open { overflow:hidden; }
.play-cta { margin-top:22px; border:1px solid rgba(255,213,74,.55); border-radius:7px; padding:22px; background:rgba(23,15,0,.8); text-align:center; }
.play-cta p { margin:0 0 14px; color:#fff2bc; }
@media (max-width:900px) { .hero-grid,.charity-panel,.game-preview { grid-template-columns:1fr; } .hero-art { min-height:auto; } .arcade-panel { width:min(100%,390px); } .card-grid { grid-template-columns:1fr; } }
@media (max-height:760px) and (min-width:721px) { .play-shell{padding-top:14px}.play-toolbar{margin-bottom:10px}.game-stage{width:min(100%,calc((100vh - 135px) * 4 / 3))}.play-cta{margin-top:14px;padding:16px} }
@media (max-width:720px) { .nav-toggle{display:block}.nav-links{position:absolute;left:16px;right:16px;top:72px;display:none;flex-direction:column;align-items:stretch;border:1px solid rgba(141,255,22,.35);padding:14px;background:rgba(1,6,0,.98)}.nav-links.open{display:flex}.nav-links .button{width:100%}.hero{padding-top:48px}.hero h1{font-size:clamp(52px,18vw,86px)}.section{padding:62px 0}.footer-grid{grid-template-columns:1fr}.play-toolbar{align-items:stretch;flex-direction:column}.game-stage{width:100%}.game-size-note{display:none}.game-modal-toolbar{align-items:stretch;flex-direction:column}.game-modal-stage .game-frame{width:min(calc(100vw - 16px),calc((100vh - 130px) * 4 / 3))} }