/* Pi launcher: the pi link, the WOPR modal and the CRT transition. Host vars --mono, --dim and --accent are optional. */ #pi { position: fixed; right: calc(0.25rem + env(safe-area-inset-right, 0px)); bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px)); display: grid; place-items: center; width: 2.75rem; height: 2.75rem; font: 1rem/1 var(--mono, ui-monospace, Menlo, Consolas, monospace); color: var(--dim, #888); text-decoration: none; } #pi:hover, #pi:focus-visible { color: var(--accent, #239c49); } body:has(.wopr[open]) { overflow: hidden; } /* The game keeps its own green terminal look in both themes. */ .wopr { box-sizing: border-box; width: min(60rem, calc(100vw - 4rem)); height: min(44rem, calc(100vh - 4rem)); max-width: none; max-height: none; padding: 0; border: 1px solid #2e2e2e; border-radius: 0.4rem; background: #020b05; color: #e8e8e8; } .wopr[open] { display: flex; flex-direction: column; } .wopr::backdrop { background: rgb(0 0 0 / 0.8); } .wopr .close { align-self: flex-end; min-width: 2.75rem; min-height: 2.75rem; padding: 0.4rem 0.75rem; border: 0; background: none; font: 0.8rem/1 var(--mono, ui-monospace, Menlo, Consolas, monospace); color: #a0a0a0; cursor: pointer; } .wopr .close:hover, .wopr .close:focus-visible { color: #e8e8e8; } .wopr iframe { flex: 1; width: 100%; min-height: 0; border: 0; } /* CRT transition. pi.js sets crt-glitch on for the page, then crt-on and crt-off on the dialog. */ .crt-glitch body > :not(dialog, #pi, script) { animation: crt-glitch 420ms steps(12, end) both; } .crt-glitch body::before, .crt-glitch body::after { content: ""; position: fixed; inset: 0; z-index: 10; pointer-events: none; } .crt-glitch body::before { background: repeating-linear-gradient(to bottom, rgb(0 0 0 / 0.4) 0 1px, transparent 1px 3px), rgb(20 255 90 / 0.1); animation: crt-scan 420ms linear both; } .crt-glitch body::after { height: 12vh; background: linear-gradient(to bottom, transparent, rgb(120 255 160 / 0.3), transparent); animation: crt-roll 420ms linear both; } .wopr.crt-on { animation: crt-on 340ms cubic-bezier(0.2, 0.7, 0.2, 1) both; } .wopr.crt-on::backdrop { animation: crt-fade 340ms linear both; } .wopr.crt-off { animation: crt-off 240ms ease-in both; } .wopr.crt-off::backdrop { animation: crt-fade 240ms linear reverse both; } @keyframes crt-glitch { 0% { transform: none; filter: none; } 12% { transform: translateX(-7px) skewX(5deg); filter: brightness(1.4) contrast(1.3); } 24% { transform: translateX(6px); filter: hue-rotate(60deg) saturate(2); } 36% { transform: translateX(-3px) skewX(-3deg) scaleY(1.02); filter: sepia(1) hue-rotate(70deg) saturate(3); } 60% { transform: translateX(2px); filter: sepia(1) hue-rotate(75deg) saturate(4) brightness(0.8); } 100% { transform: scaleY(0.96); filter: sepia(1) hue-rotate(80deg) saturate(5) brightness(0.3); } } @keyframes crt-scan { 0% { opacity: 0; } 30% { opacity: 1; } 100% { opacity: 1; background-position: 0 6px, 0 0; } } @keyframes crt-roll { from { transform: translateY(-12vh); } to { transform: translateY(100vh); } } @keyframes crt-on { 0% { transform: scale(0.02, 0.004); filter: brightness(4); } 45% { transform: scale(1, 0.006); filter: brightness(4); } 100% { transform: none; filter: none; } } @keyframes crt-off { 0% { transform: none; filter: none; } 55% { transform: scale(1, 0.006); filter: brightness(4); } 100% { transform: scale(0, 0.004); filter: brightness(4); opacity: 0; } } @keyframes crt-fade { from { opacity: 0; } to { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .crt-glitch body > :not(dialog, #pi, script), .crt-glitch body::before, .crt-glitch body::after, .wopr.crt-on, .wopr.crt-off, .wopr.crt-on::backdrop, .wopr.crt-off::backdrop { animation: none; } } /* Full screen game on phones, landscape included. */ @media (max-width: 48rem), (max-height: 30rem) { .wopr { width: 100%; height: 100%; height: 100dvh; margin: 0; padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px); border: 0; border-radius: 0; } }