:root{--crt-flicker:0.08}
@keyframes crt-flicker{0%{opacity:.92} 2%{opacity:.95} 4%{opacity:.98} 8%{opacity:1} 12%{opacity:.96} 16%{opacity:.99} 20%{opacity:.93} 24%{opacity:1} 28%{opacity:.97} 32%{opacity:.94} 36%{opacity:1} 40%{opacity:.95} 44%{opacity:.98} 48%{opacity:.92} 52%{opacity:1} 56%{opacity:.96} 60%{opacity:.99} 64%{opacity:.94} 68%{opacity:1} 72%{opacity:.97} 76%{opacity:.93} 80%{opacity:.98} 84%{opacity:1} 88%{opacity:.95} 92%{opacity:.97} 96%{opacity:.99} 100%{opacity:.94}}
body{position:relative}
.crt{position:relative;z-index:0}
.crt::before{content:"";position:fixed;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,.04) 0px,rgba(0,0,0,.04) 1px,transparent 2px,transparent 4px);mix-blend-mode:multiply;z-index:4;animation:crt-flicker .5s infinite linear}
.crt::after{
	content:"";
	position:fixed;
	inset:-12vh -12vw -12vh -12vw;
	pointer-events:none;
	background:radial-gradient(
		ellipse at center,
		rgba(0,0,0,0) 0%,
		rgba(0,0,0,0.25) 60%,
		rgba(0,0,0,0.5) 100%
	);
	z-index:5
}
.aperture{
	position:fixed;
	inset:0;
	pointer-events:none;
	background:repeating-linear-gradient(
		90deg,
		rgba(0,0,0,.08) 0 1px,
		rgba(0,0,0,0) 1px 2px,
		rgba(0,0,0,.08) 2px 3px
	);
	mix-blend-mode:multiply;
	opacity:.2;
	z-index:2
}
.crt > *{position:relative;z-index:1}
.crt > *::before{content:"";position:fixed;inset:0;pointer-events:none;backdrop-filter:none;}
.crt .curved{position:relative;}
.crt .curved::before{content:"";position:absolute;inset:-2vh -2vw;pointer-events:none;background:radial-gradient(120% 100% at 50% 50%, rgba(255,255,255,.02) 0%, rgba(0,0,0,0) 60%), radial-gradient(140% 120% at 50% 50%, rgba(0,0,0,.25) 60%, rgba(0,0,0,.45) 100%);border-radius:12px}
@keyframes scan-shift{from{transform:translateY(-2%)} to{transform:translateY(2%)}}
@keyframes random-flicker{0%{opacity:1} 1%{opacity:.97} 1.5%{opacity:1} 3%{opacity:.94} 3.2%{opacity:1} 8%{opacity:.98} 8.1%{opacity:1} 15%{opacity:.96} 15.3%{opacity:1} 23%{opacity:.92} 23.4%{opacity:1} 31%{opacity:.99} 47%{opacity:.95} 47.2%{opacity:1} 67%{opacity:.93} 67.5%{opacity:1} 78%{opacity:.97} 78.1%{opacity:1} 89%{opacity:.94} 89.3%{opacity:1} 100%{opacity:1}}
.crt .scanlines{position:fixed;inset:0;pointer-events:none;background:linear-gradient(rgba(0,0,0,.08) 50%, rgba(0,0,0,0) 50%);background-size:100% 3px;mix-blend-mode:multiply;animation:scan-shift 6s infinite alternate ease-in-out, random-flicker 4.7s infinite linear;z-index:3}

header, footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
}

header {
    position: sticky;
    background-color: #fff;
    font-weight: bold;
    font-size: 3em;
    border-bottom: 1px solid #555;
    z-index: 10;
}

footer {
    position: sticky;
    background-color: #fff;
    font-size: 3em;
    padding-bottom: 20px;
    border-top: 1px solid #555;
    z-index: 10;

    white-space: nowrap;
    font-size: clamp(1em, 2em, 3em);
}

header div {
    display: flex;
    align-items: center;
    gap: 10px;
}

.logo {
    height: 1em;
}

header a, footer a {
    font-weight: normal;
    text-decoration: underline;
    color: blue;
    margin-left: 15px;
}

html {
    overflow: hidden;
}

body {
    display: flex;
    flex-direction: column;
    height: 100vh;
    justify-content: flex-start;
}

p {
    font-size: ;
}

main {
    flex: 1;
    overflow: hidden;
}

.choice {
    height: 1em;
    cursor: pointer;
    margin-left: 10px;
    vertical-align: middle;
    transition: transform 0.2s; 
}

.choice:hover {
    transform: scale(1.05);
}

#container {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

#game {
    image-rendering: pixelated;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
}

#layertwo {
	position: absolute;
	inset: 0;
	pointer-events: none;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
}

#wrapper {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
}

.exploding {
	position: absolute;
	will-change: transform;
}

.particle {
	position: absolute;
	top: 0;
	left: 0;
}

.particle--debris {
	background: #255ff4;
}

.particle--fire {
	border-radius: 50%;
}

#help {
    position: fixed;
    top: -100%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;

    max-width: 80%;
    width: 80%;
    image-rendering: pixelated;

    transition: top 0.5s ease-in-out, transform 0.2s ease;
    pointer-events: none;
}

#help.show {
    top: 100px;
    pointer-events: auto;
}

#help:hover {
    transform: translateX(-50%) scale(1.025);
}

#unsupported {
    display: none;
    max-width: 90%;
    max-height: 90%;
    image-rendering: pixelated;
}

main.unsupported {
    display: flex;
    align-items: center;
    justify-content: center;
}