:root { color-scheme: dark; --bg: #080a0b; --panel: #111619; --line: #33382f; --text: #f1ecdc; --muted: #a6aca3; --orange: #cca25b; --teal: #8eae67; --lavender: #9c83b8; --coral: #c56d70; --mono: 'Courier New', monospace; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 24px; }
body { margin: 0; color: var(--text); background: var(--bg); font-family: 'Arial', sans-serif; font-size: 1.125rem; line-height: 1.6; -webkit-font-smoothing: antialiased; }
button, input { font: inherit; }
button, a, input { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button:disabled { opacity: .4; cursor: not-allowed; }
a { color: inherit; text-decoration: none; }
button { color: inherit; }
button, input { border-radius: 0; }
button:focus-visible, a:focus-visible, input:focus-visible, iframe:focus-visible { outline: 2px solid var(--teal); outline-offset: 5px; }
button:disabled:hover { transform: none; }
[hidden] { display: none !important; }
.wrap { width: min(1240px, calc(100% - 88px)); margin-inline: auto; }
.mono, .eyebrow { font-family: var(--mono); }
.eyebrow { margin: 0; font-size: 0.875rem; font-weight: 700; letter-spacing: 1.9px; line-height: 1.6; }
.muted { color: var(--muted); font-size: 0.875rem; letter-spacing: 1px; }
.accent { color: var(--orange); }
.status-dot { width: 6px; height: 6px; display: inline-block; background: var(--teal); border-radius: 50%; box-shadow: 0 0 9px #79c7bb35; flex-shrink: 0; }
.site-header { display: flex; align-items: center; justify-content: space-between; min-height: 104px; border-bottom: 1px solid var(--line); gap: 24px; }
.brand { display: flex; align-items: center; gap: 13px; font-weight: 900; letter-spacing: 2.8px; font-size: 1.25rem; line-height: .98; }
.brand-alien { width: 34px; height: 29px; fill: var(--orange); image-rendering: pixelated; }
.brand-sub { display: block; font: 0.875rem var(--mono); letter-spacing: 6.25px; margin-top: 8px; }
nav { display: flex; gap: 30px; align-items: center; color: #9ca6b2; font-size: 1rem; }
nav a, .nav-button { padding-block: 12px; }
nav a:hover, .nav-button:hover { color: var(--text); }
nav .nav-active { color: var(--text); position: relative; }
.nav-active::after { content: ''; position: absolute; width: 4px; height: 4px; background: var(--orange); left: 50%; bottom: 0; }
.nav-button { background: none; border: 0; padding-inline: 0; color: inherit; font-size: inherit; }
.nav-button span { margin-left: 6px; }
.header-tag { color: var(--teal); font: 0.875rem var(--mono); letter-spacing: 1.2px; display: flex; align-items: center; gap: 9px; }
.intro { display: flex; justify-content: space-between; align-items: center; padding: 49px 0 42px; gap: 24px; }
.intro-copy > .eyebrow { color: #a6b0ba; font-size: 0.875rem; letter-spacing: 1.6px; }
.small-cross { color: var(--orange); font-size: 1.0625rem; vertical-align: -1px; margin-right: 7px; }
h1 { font-size: clamp(2.375rem, 5.6vw, 4.625rem); line-height: 1.02; letter-spacing: -3.6px; margin: 15px 0 18px; font-weight: 900; }
h1 span { color: var(--orange); }
.intro-description { color: #a6b0bc; line-height: 1.9; font-size: 1.125rem; margin: 0; }
.game-tags { display: flex; gap: 12px; align-items: center; margin-top: 24px; font: 0.875rem var(--mono); color: #a4b0bd; letter-spacing: 1.1px; }
.game-tags i { width: 3px; height: 3px; border-radius: 50%; background: #66717f; }
.record-card { padding: 25px 29px; width: 264px; border: 1px solid var(--line); background: #111822; flex-shrink: 0; position: relative; }
.record-card > .eyebrow { font-size: 0.875rem; color: #a6b0ba; letter-spacing: 1.25px; }
.record-icon { position: absolute; right: 22px; top: 19px; color: var(--orange); font-size: 1.375rem; transform: rotate(180deg); }
.record-value { font: bold 2.3125rem var(--mono); color: var(--orange); margin: 12px 0 6px; letter-spacing: 3px; }
.record-caption { font-size: 0.875rem; color: #b8c1cb; margin: 0; overflow-wrap: anywhere; }
.record-rule { display: block; height: 1px; width: 100%; background: var(--line); margin: 19px 0 12px; }
.record-foot { font-size: 0.875rem; color: #7e8b9a; margin: 0; }
.arcade-layout { display: grid; grid-template-columns: minmax(0, 1fr) 334px; align-items: start; gap: 27px; }
.arcade-panel { border: 1px solid var(--line); background: #101620; min-width: 0; }
.panel-heading { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; gap: 10px; }
.panel-title { display: flex; align-items: center; gap: 10px; font: 0.875rem var(--mono); letter-spacing: 1.1px; white-space: nowrap; }
.panel-title h2 { font: inherit; margin: 0; font-weight: 700; }
.muted-separator { color: #465361; margin: 0 3px; }
.heading-game { color: #96a3b0; }
.game-shell { background: #000; position: relative; width: calc(100% - 32px); margin-inline: 16px; aspect-ratio: 4 / 3; border: 1px solid #293541; overflow: hidden; }
#game-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; }
.standby-screen { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; background-color: #070c14; background-image: radial-gradient(circle at 12% 23%, #8695a0 0 1px, transparent 1px), radial-gradient(circle at 71% 17%, #8695a0 0 1px, transparent 1px), radial-gradient(circle at 31% 73%, #a58f7c 0 1px, transparent 1px), radial-gradient(circle at 81% 81%, #8695a0 0 1px, transparent 1px), radial-gradient(circle at 21% 82%, #7c8992 0 1px, transparent 1px), radial-gradient(circle at 92% 43%, #5c666e 0 1px, transparent 1px), radial-gradient(circle at 47% 8%, #5c666e 0 1px, transparent 1px), radial-gradient(circle at 65% 66%, #5c666e 0 1px, transparent 1px), radial-gradient(circle at 5% 57%, #5c666e 0 1px, transparent 1px); }
.standby-screen::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, #00000013 0 1px, transparent 1px 4px); pointer-events: none; }
.pixel-fleet { width: 263px; margin: 0 0 14px; opacity: .95; }
.pixel-fleet svg { display: block; width: 100%; shape-rendering: crispEdges; }
.standby-title { font: bold clamp(1.875rem, 4vw, 3.3125rem) var(--mono); letter-spacing: 8px; margin: 0; color: #e6e4d6; text-shadow: 3px 3px 0 #e69c6830; }
.standby-sub { font: 0.875rem var(--mono); letter-spacing: 1px; color: #99a6b2; margin: 13px 0 28px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 13px 20px; min-height: 44px; border: 1px solid transparent; font-size: 1rem; font-weight: 700; transition: background .15s, transform .15s; }
.button-orange { background: var(--orange); color: #151b22; }
.button-orange:hover { background: #ffb283; transform: translateY(-1px); }
.start-game { font-size: 1rem; min-width: 176px; z-index: 1; }
.start-game span { font-size: 0.875rem; }
.standby-hint { margin: 18px 0 0; font: 0.875rem var(--mono); letter-spacing: .5px; color: #a6aca3; }
.standby-hint span { margin: 0 8px; }
.screen-corner { position: absolute; width: 13px; height: 13px; pointer-events: none; border-color: #798a98; border-style: solid; opacity: .65; }
.top-left { top: 8px; left: 8px; border-width: 1px 0 0 1px; }
.bottom-right { bottom: 8px; right: 8px; border-width: 0 1px 1px 0; }
.game-toolbar { display: flex; align-items: center; justify-content: space-between; padding: 18px 17px 17px; gap: 12px; }
.live-score { display: flex; align-items: center; gap: 14px; }
.live-score .eyebrow { font-size: 0.875rem; color: #8896a5; letter-spacing: 1px; }
#live-score { font: bold 1.25rem var(--mono); letter-spacing: 2px; }
.toolbar-actions { display: flex; align-items: center; gap: 7px; }
.game-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.game-actions .button { min-height: 48px; }
.icon-button { width: 30px; height: 33px; display: flex; align-items: center; justify-content: center; background: transparent; border: 0; font-size: 1.25rem; color: #98a6b5; }
.icon-button:hover { color: var(--text); }
.toolbar-divider { height: 22px; width: 1px; background: var(--line); margin: 0 7px; }
.button-capture { padding: 9px 13px; min-height: 36px; border-color: #374550; background: #1c2932; color: #a9d5cc; font-size: 0.875rem; gap: 7px; }
.button-capture:hover { background: #2a3e47; }
.button-capture svg { width: 15px; height: 15px; fill: currentColor; }
.under-game { display: flex; justify-content: space-between; align-items: center; padding: 13px 18px; border-top: 1px solid var(--line); }
.under-game p { margin: 0; font-size: 0.875rem; color: #8796a6; }
kbd { display: inline-block; border: 1px solid #34424f; border-bottom-width: 2px; background: #1a232e; font: 0.875rem var(--mono); color: #c4ccd5; padding: 3px 5px; min-width: 19px; text-align: center; margin-right: 3px; border-radius: 3px; }
.control-gap { display: inline-block; width: 12px; }
#new-game { font-size: 0.875rem; padding: 9px 14px; }
.game-notice { margin: 0; padding: 10px 18px 13px; font-size: 0.875rem; line-height: 1.6; color: #738292; }
.pause-overlay { position: absolute; inset: 0; background: #050a12e8; display: flex; align-items: center; justify-content: center; flex-direction: column; }
.pause-overlay p { font: bold 1.25rem var(--mono); letter-spacing: 2px; }
.arcade-panel:fullscreen { width: 100vw; height: 100dvh; display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto auto auto; border: 0; overflow: hidden; }
.arcade-panel:fullscreen > .panel-heading { grid-row: 1; }
.arcade-panel:fullscreen > .game-shell { grid-row: 2; width: 100%; height: 100%; min-height: 0; margin: 0; border: 0; aspect-ratio: auto; }
.arcade-panel:fullscreen > .game-toolbar { grid-row: 3; }
.arcade-panel:fullscreen > .touch-controls { grid-row: 4; }
.arcade-panel:fullscreen > .under-game { grid-row: 5; }
.arcade-panel:fullscreen > .game-notice { grid-row: 6; }
.icon-button.fullscreen-exit { width: 44px; font-size: 0.875rem; }
.touch-controls { display: none; gap: 12px; padding: 0 18px 15px; }
/* Holding a game control must not select its label or open an iOS callout. */
.touch-controls, .touch-controls * { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.touch-controls button { touch-action: none; border: 1px solid #3a4b5a; background: #1c2932; padding: 12px 22px; min-height: 48px; font: bold 1.125rem var(--mono); }
.touch-controls button:last-child { margin-left: auto; background: #eb9865; color: #171b23; font-size: 0.875rem; }
.touch-controls button:active { background: var(--teal); color: var(--bg); }
.leaderboard-panel { background: #111822; border: 1px solid var(--line); min-height: 100%; padding: 23px 22px 20px; }
.leaderboard-heading { display: flex; align-items: flex-start; justify-content: space-between; }
.leaderboard-heading .eyebrow { font-size: 0.875rem; letter-spacing: 1.35px; }
.leaderboard-heading h2 { margin: 11px 0 25px; font-size: 1.4375rem; letter-spacing: -.7px; line-height: 1.2; }
.leaderboard-star { color: var(--orange); font-size: 2.0625rem; line-height: 1; margin-top: 5px; }
.score-filters { display: flex; padding: 4px; background: #0c121b; border: 1px solid #222c37; gap: 4px; }
.score-filters button { background: transparent; border: 0; padding: 9px 8px; font-size: 0.875rem; flex: 1; color: #8b98a6; white-space: nowrap; }
.score-filters button[aria-pressed='true'] { background: #28343d; color: var(--text); }
.table-head { display: flex; justify-content: space-between; font: 0.875rem var(--mono); color: #8492a1; letter-spacing: 1px; padding: 25px 0 13px; border-bottom: 1px solid var(--line); }
.score-list { list-style: none; margin: 0; padding: 0; min-height: 218px; }
.score-row { display: flex; align-items: center; gap: 12px; min-height: 44px; border-bottom: 1px solid #24303b99; font-size: 0.875rem; }
.score-rank { font: 0.875rem var(--mono); color: #6e8091; min-width: 15px; }
.score-row:first-child .score-rank, .score-row:first-child .score-points { color: var(--orange); }
.score-row:first-child { background: linear-gradient(90deg, #f09a6709, transparent); }
.score-name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: #c6cdd4; }
.score-name:hover { color: var(--teal); text-decoration: underline; }
.score-points { margin-left: auto; font: bold 0.875rem var(--mono); letter-spacing: .5px; }
.board-message { color: #8393a3; font-size: 0.875rem; line-height: 1.9; padding: 42px 12px; text-align: center; }
.board-footer { display: flex; justify-content: space-between; align-items: center; color: #7d8b9b; font: 0.875rem var(--mono); letter-spacing: .8px; padding-block: 12px; border-bottom: 1px solid var(--line); }
.board-footer button { border: 0; background: transparent; padding: 2px 6px; color: #8b9aa9; font-size: 1.25rem; }
.board-invitation { display: flex; align-items: center; gap: 14px; margin-top: 18px; }
.board-invitation > span { color: var(--teal); border: 1px solid #31434a; width: 32px; height: 32px; display: grid; place-items: center; font-size: 1.1875rem; }
.board-invitation p { color: #91a1b1; font-size: 0.875rem; line-height: 1.9; margin: 0; }
.board-invitation strong { color: #c8d1d8; font-weight: 400; }
.verification-note { margin: 18px 0 0; color: #798999; font-size: 0.875rem; line-height: 1.75; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; padding: 32px 0 36px; }
.steps article { display: flex; gap: 16px; }
.step-number { color: var(--orange); font: 0.875rem var(--mono); margin-top: 3px; }
.steps h3 { font-size: 1.125rem; margin: 0 0 9px; font-weight: 600; }
.steps p { color: #8290a0; font-size: 1rem; line-height: 1.8; margin: 0; }
.site-footer { border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; color: #a6aca3; font: 0.875rem var(--mono); letter-spacing: 1px; padding-block: 23px 31px; gap: 20px; }
.site-footer p { margin: 0; }
.footer-mark { color: var(--orange); font-size: 1rem; margin-right: 7px; vertical-align: -1px; }
.site-footer > div { display: flex; gap: 22px; letter-spacing: 0; font-size: 0.875rem; }
.site-footer a { color: #8e9caa; }
.shared-score { display: flex; flex-wrap: wrap; flex-direction: column; gap: 12px; padding: 26px; margin-bottom: 27px; border: 1px solid #57604b; background: #182326; }
.shared-score strong { font-size: 1.5625rem; }
.shared-score > span:not(.eyebrow) { color: #a6b5bd; font-size: 0.875rem; }
.modal { background: #131c27; color: var(--text); border: 1px solid #3b4857; max-width: 450px; width: calc(100% - 32px); padding: 34px; max-height: calc(100dvh - 40px); overflow-y: auto; box-shadow: 0 30px 120px #0009; }
.modal::backdrop { background: #030811d9; backdrop-filter: blur(6px); }
.modal-close { position: absolute; top: 12px; right: 15px; color: #a4b0ba; font-size: 1.625rem; background: transparent; border: 0; padding: 0 5px; }
.modal h2 { font-size: 1.9375rem; letter-spacing: -1px; margin: 14px 0 22px; }
.modal > p:not(.eyebrow):not(.modal-note):not(.input-help) { color: #a4b2bf; font-size: 1rem; line-height: 1.8; }
.capture-total { border-block: 1px solid #34404d; padding: 19px 0; margin-bottom: 20px; display: flex; flex-direction: column; gap: 10px; }
.capture-total .eyebrow { color: #91a2b2; font-size: 0.875rem; }
.capture-total strong { font: bold 2.625rem var(--mono); color: var(--orange); letter-spacing: 3px; }
#capture-image { width: 110px; float: right; border: 1px solid var(--line); margin: 0 0 14px 14px; image-rendering: pixelated; }
label { display: block; font-size: 1rem; color: #d5dce3; margin-bottom: 10px; }
input { display: block; width: 100%; min-height: 46px; padding: 12px; background: #0a111b; border: 1px solid #41505f; color: var(--text); font-size: 1rem; }
input[aria-invalid='true'] { border-color: #fba398; }
.input-help { font-size: 0.875rem; color: #8e9eaf; line-height: 1.6; margin: 10px 0; }
.form-error { color: #ffb4a5; font-size: 0.875rem; line-height: 1.7; min-height: 18px; margin: 9px 0; }
.submit-score { width: 100%; margin-top: 5px; }
.modal-note { font-size: 0.875rem; color: #7e8f9f; line-height: 1.7; margin: 18px 0 0; clear: both; }
.text-link { display: inline-block; color: var(--teal); font-size: 0.875rem; margin-top: 16px; }
.text-link:hover { text-decoration: underline; }
.success-icon { color: var(--orange); font-size: 3.25rem; display: block; margin-bottom: 16px; }
.share-box { border-top: 1px solid var(--line); padding-top: 22px; margin-top: 22px; }
.share-box input { font-size: 1rem; }
.share-box button { width: 100%; margin-top: 12px; }
.instructions { margin: 24px 0; }
.instructions > div { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.instructions dt { width: 86px; }
.instructions dd { margin: 0; color: #a4b2bf; font-size: 1rem; }
.skip-link { position: fixed; top: -100px; left: 15px; padding: 15px; color: #000; background: var(--teal); z-index: 100; }
.skip-link:focus { top: 10px; }
@media (min-width: 1450px) { .wrap { width: min(1280px, calc(100% - 128px)); } .intro { padding-top: 62px; padding-bottom: 50px; } }
@media (pointer: coarse) { .touch-controls { display: flex; } }
@media (max-width: 1100px) { .wrap { width: calc(100% - 48px); } .header-tag { display: none; } .arcade-layout { grid-template-columns: minmax(0, 1fr) 294px; gap: 20px; } .leaderboard-panel { padding: 22px 17px; } .leaderboard-heading h2 { font-size: 1.3125rem; } .intro h1 { font-size: 3.5rem; } .game-toolbar { flex-wrap: wrap; padding: 15px 14px; } .live-score { gap: 8px; } .live-score .eyebrow { font-size: 0.875rem; } #live-score { font-size: 1.0625rem; } .toolbar-actions { gap: 3px; } .button-capture { padding: 9px; } .toolbar-divider { margin-inline: 2px; } .pixel-fleet { width: 220px; } .standby-sub { margin-bottom: 18px; } .panel-heading > .muted { display: none; } }
@media (max-width: 850px) { .arcade-layout { grid-template-columns: 1fr; } .record-card { width: 220px; padding: 23px; } .record-value { font-size: 1.9375rem; } .intro h1 { font-size: 3rem; letter-spacing: -2.6px; } .intro-description { font-size: 1.125rem; } .leaderboard-panel { padding: 24px; min-height: auto; } .leaderboard-heading h2 br { display: none; } .leaderboard-heading h2 { margin-bottom: 22px; } .leaderboard-star { font-size: 1.875rem; } .score-list { min-height: 130px; } .score-filters { max-width: 360px; } .score-row { min-height: 47px; } .board-message { padding-block: 30px; } .score-points { font-size: 0.875rem; } .steps { gap: 20px; } .steps article { gap: 10px; } .steps p { font-size: 1rem; } .site-footer { align-items: flex-start; } .site-footer > div { flex-direction: column; gap: 10px; } .standby-title { font-size: 3.375rem; } .pixel-fleet { width: 270px; } }
@media (max-width: 580px) { .wrap { width: calc(100% - 32px); } .site-header { min-height: 84px; gap: 14px; } .brand { font-size: 1.25rem; letter-spacing: 1.8px; gap: 10px; } .brand-alien { width: 27px; } .brand-sub { font-size: 0.875rem; letter-spacing: 5px; } nav { gap: 16px; font-size: 1rem; } nav a:first-child { display: none; } .nav-button span { display: none; } .intro { padding: 31px 0 27px; display: block; } .intro-copy > .eyebrow { font-size: 0.875rem; letter-spacing: 1.2px; } .intro h1 { font-size: clamp(2.3125rem, 9vw, 3.1875rem); margin-block: 12px 14px; letter-spacing: -2px; } .intro-description { font-size: 1.125rem; } .game-tags { font-size: 0.875rem; margin-top: 18px; } .record-card { display: none; } .arcade-layout { gap: 23px; } .panel-heading { padding: 14px; } .game-shell { margin-inline: 9px; width: calc(100% - 18px); } .standby-title { font-size: 2.125rem; letter-spacing: 5px; } .standby-sub { font-size: 0.875rem; letter-spacing: 2px; margin: 10px 0 19px; } .pixel-fleet { width: 180px; margin-bottom: 7px; } .start-game { padding: 10px 16px; min-height: 39px; font-size: 1rem; min-width: 152px; } .standby-hint { font-size: 0.875rem; margin-top: 13px; } .game-toolbar { padding: 15px 10px; gap: 12px; } .live-score { flex-direction: column; align-items: flex-start; gap: 6px; } #live-score { font-size: 1rem; } .toolbar-actions { gap: 1px; } .icon-button { width: 27px; font-size: 1.25rem; } .button-capture { font-size: 0.875rem; gap: 5px; padding: 9px 8px; } .toolbar-divider { margin: 0 4px; } .under-game { padding: 12px 11px; gap: 10px; flex-wrap: wrap; } .under-game p { font-size: 0.875rem; } kbd { font-size: 0.875rem; padding: 3px; min-width: 17px; } .control-gap { width: 5px; } .game-notice { padding: 2px 12px 12px; font-size: 0.875rem; } .steps { grid-template-columns: 1fr; gap: 24px; padding: 28px 5px; } .steps article { gap: 18px; } .steps p { font-size: 1rem; } .steps br { display: none; } .steps h3 { margin-bottom: 6px; } .site-footer { display: block; padding-block: 20px; } .site-footer > div { flex-direction: row; justify-content: space-between; margin-top: 17px; font-size: 0.875rem; } .leaderboard-panel { padding: 23px 20px; } .modal { padding: 30px 23px; } .modal h2 { font-size: 1.6875rem; } .shared-score { padding: 23px; } .shared-score strong { font-size: 1.3125rem; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; } }
@media (max-height: 480px) { .arcade-panel:fullscreen > .panel-heading, .arcade-panel:fullscreen > .game-notice, .arcade-panel:fullscreen > .under-game p { display: none; } .arcade-panel:fullscreen > .under-game { justify-content: flex-end; padding-block: 3px; } .arcade-panel:fullscreen > .game-toolbar { padding-block: 6px; } .arcade-panel:fullscreen > .touch-controls { padding-bottom: 6px; } }

/* The cartridge's black, ochre frame, and small colored sprites. */
body { background-image: radial-gradient(circle at 41px 87px, #9c83b82b 0 1px, transparent 1.4px), radial-gradient(circle at 251px 283px, #8eae672e 0 1px, transparent 1.4px), radial-gradient(circle at 463px 139px, #cca25b26 0 1px, transparent 1.4px); background-size: 541px 487px, 673px 593px, 769px 631px; }
.site-header { position: relative; border-bottom-color: #4b402c; }
.site-header::after { content: ''; position: absolute; right: 0; bottom: -2px; width: 4px; height: 4px; background: var(--teal); box-shadow: -9px 0 var(--lavender), -18px 0 var(--coral); }
.brand { font-family: var(--mono); }
.brand-alien { object-fit: contain; }
.button { font-family: var(--mono); box-shadow: 3px 3px 0 #0006; }
.button-orange { border-color: #dfbb7a; }
.button-orange:hover { background: #dfb971; }
.button-outline { border-color: #695634; color: #e2d3ae; background: #0d100f; box-shadow: none; }
.button-outline:hover { background: #211e14; }
.arcade-panel { background: #101412; border-color: #695634; box-shadow: inset 0 3px 0 var(--orange), 5px 5px 0 #0004; }
.panel-heading { background: #12150f; border-bottom: 1px solid #383222; }
.game-shell { border-color: #725c37; }
.screen-corner { border-color: var(--orange); opacity: .9; }
.standby-screen { background-color: #030405; background-image: radial-gradient(circle at 12% 23%, #8eae6773 0 1px, transparent 1px), radial-gradient(circle at 71% 17%, #9c83b880 0 1px, transparent 1px), radial-gradient(circle at 31% 73%, #cca25b66 0 1px, transparent 1px), radial-gradient(circle at 81% 81%, #c56d7066 0 1px, transparent 1px), radial-gradient(circle at 92% 43%, #f1ecdc40 0 1px, transparent 1px), radial-gradient(circle at 47% 8%, #8eae6766 0 1px, transparent 1px), radial-gradient(circle at 5% 57%, #9c83b866 0 1px, transparent 1px); }
.standby-title { color: #e0bf7d; text-shadow: 3px 3px 0 #47351d; }
.pixel-fleet img { display: block; width: 100%; height: auto; image-rendering: pixelated; }
#live-score { color: #e0bf7d; }
.button-capture { color: #c1d3ac; background: #1b2418; border-color: #48543b; }
.button-capture:hover { background: #2a3823; }
.touch-controls button:last-child { background: var(--orange); color: #12150e; }
.touch-controls button:active { background: var(--teal); }
.modal { background: #101512; border-color: #78613b; }
.modal input, .modal textarea { border-color: #4e5944; background: #080c09; }
.modal input::placeholder, .modal textarea::placeholder { color: #9aa58f; opacity: 1; }
.brand { font-size: 1.25rem; letter-spacing: 2px; }
.brand-sub { font-size: 0.875rem; letter-spacing: 2.1px; color: #a0aaa9; }
.header-tag { font-size: 0.875rem; }
.memorial-intro { padding-block: 58px 50px; gap: 64px; }
.memorial-intro .intro-copy { max-width: 760px; min-width: 0; }
.memorial-intro h1 { font-family: Georgia, 'Times New Roman', serif; font-size: clamp(3rem, 1.5rem + 6vw, 6.5rem); font-weight: 400; letter-spacing: -4px; margin: 12px 0 24px; }
.memorial-intro h1 span { font-style: italic; }
.memorial-identity { display: flex; flex-wrap: wrap; gap: 5px 18px; margin: 0 0 24px; color: #d2d5cf; font-size: 1rem; line-height: 1.7; }
.memorial-dates { color: #a0aaa9; font-size: 1rem; }
.memorial-intro .intro-description { font-size: 1.125rem; line-height: 1.85; max-width: 640px; color: #aeb8ba; }
.memorial-intro .dedication { color: #d2d5cf; margin-bottom: 14px; font-size: 1.125rem; }
.dedication em { font-family: Georgia, 'Times New Roman', serif; color: #e0bf7d; white-space: nowrap; }
.intro-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; }
.notebook-memento { flex-shrink: 0; width: 250px; min-height: 260px; padding: 25px 24px; position: relative; background: #10140f; color: var(--text); box-shadow: 5px 5px 0 #0006; border: 1px solid #695634; }
.notebook-memento::before { content: ''; position: absolute; top: -1px; left: -1px; right: -1px; height: 3px; background: var(--orange); }
.notebook-label { font: 0.875rem var(--mono); letter-spacing: 1.5px; color: #b2b99e; }
.memento-fleet { display: block; width: 142px; max-width: 100%; height: auto; margin: 24px 0 21px; image-rendering: pixelated; }
.notebook-memento p { font: bold 1.3125rem var(--mono); margin: 0 0 17px; position: relative; z-index: 1; }
.notebook-memento p span { font-size: inherit; color: var(--orange); }
.notebook-lines { height: 1px; background: #3c4231; }
.notebook-foot { display: block; margin-top: 15px; font: 0.875rem/1.8 var(--mono); color: #a6aca3; }
.arcade-layout { grid-template-columns: minmax(0, 1fr) 310px; gap: 32px; }
.remembrance-card { padding: 31px 0 20px 3px; position: relative; }
.remembrance-star { color: var(--orange); display: block; font-size: 2.6875rem; margin-top: 24px; }
.remembrance-card h2 { font: 400 2.125rem/1.17 Georgia, 'Times New Roman', serif; letter-spacing: -.7px; margin: 17px 0 22px; }
.remembrance-card > p:not(.eyebrow) { color: #aab4b6; font-size: 1rem; line-height: 1.9; }
.obituary-link { color: #e0bf7d; text-decoration: underline; text-underline-offset: 4px; }
.obituary-link:hover { color: #f0ece1; }
.remembrance-card > .button { width: 100%; margin-block: 16px 4px; }
.remembrance-card .quiet-note { font-size: 0.875rem !important; color: #8e9b9f !important; }
.card-rule { width: 46px; height: 1px; background: #5c6661; margin: 25px 0 18px; }
.remembrance-card .keepsake-note { font: italic 1.0625rem/1.7 Georgia, 'Times New Roman', serif !important; color: #c4c6b9 !important; }
.guestbook { padding-top: 64px; }
.guestbook-heading { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-bottom: 26px; }
.guestbook-heading h2 { font: 400 2.125rem/1.25 Georgia, 'Times New Roman', serif; margin: 12px 0 10px; letter-spacing: -.8px; }
.guestbook-heading p:not(.eyebrow) { margin: 0; color: #9faeb1; font-size: 1rem; line-height: 1.7; }
.guestbook-heading .button { flex-shrink: 0; }
.guestbook-views { display: flex; flex-wrap: wrap; gap: 8px; }
.guestbook-view { min-height: 44px; padding: 10px 18px; border: 1px solid #695634; background: #10140f; color: #d8c395; font: 0.9375rem/1.5 var(--mono); }
.guestbook-view:hover { background: #211e14; }
.guestbook-view[aria-pressed="true"] { background: #cca25b; border-color: #dfbb7a; color: #10140f; }
.guestbook-view-description { margin: 12px 0 20px; color: #aab4b6; font-size: 0.9375rem; line-height: 1.7; }
.notebook-book { color-scheme: light; background: #eee8d6; color: #3b453f; border: 1px solid #887146; box-shadow: 5px 5px 0 #0006; position: relative; }
.notebook-book::before { content: ''; position: absolute; top: 59px; bottom: 0; left: 42px; width: 1px; background: #b8857966; pointer-events: none; }
.notebook-topline { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 29px 18px 64px; border-bottom: 2px solid var(--orange); background: #11150f; font: 0.875rem/1.6 var(--mono); letter-spacing: 1.1px; color: #d8c395; }
.notebook-topline > span::before { content: ''; display: inline-block; width: 4px; height: 4px; margin-right: 28px; vertical-align: 2px; background: var(--teal); box-shadow: 7px 0 var(--lavender), 14px 0 var(--coral); }
.notebook-topline a { color: #e9e2d1; }
.notebook-book .notebook-topline a:focus-visible { outline-color: var(--orange); }
.notebook-topline a { font-family: Arial, sans-serif; letter-spacing: 0; font-size: 0.875rem; text-decoration: underline; text-underline-offset: 3px; }
.guestbook-entries { list-style: none; margin: 0 29px 0 64px; padding: 0; }
.guestbook-entry { padding: 30px 0 29px; border-bottom: 1px solid #bdc6b8; overflow-wrap: anywhere; }
.entry-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; }
.entry-name { color: #39463f; font: 400 1.5625rem/1.35 Georgia, 'Times New Roman', serif; }
.entry-name:hover { text-decoration: underline; text-underline-offset: 4px; }
.entry-heading time { color: #5a6356; flex-shrink: 0; font: 0.875rem/1.6 var(--mono); }
.entry-score { color: #5a6356; font: 0.875rem/1.7 var(--mono); letter-spacing: 1.1px; margin: 7px 0 0; }
.entry-memory { color: #51594e; font: 1.125rem/1.9 Georgia, 'Times New Roman', serif; white-space: pre-wrap; margin: 15px 0 0; }
.guestbook-score-entry { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 10px 24px; padding-block: 23px; }
.guestbook-score-entry .entry-heading { min-width: 0; }
.guestbook-score-entry .entry-score { margin: 0; color: #39463f; font-size: 1rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.guestbook-message { font: italic 1.1875rem/1.8 Georgia, 'Times New Roman', serif; color: #5a6356; padding: 48px 16px 52px 0; max-width: 680px; }
.notebook-bottom { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-left: 64px; padding: 18px 29px 20px 0; }
.notebook-bottom p { margin: 0; color: #5a6356; font: italic 0.875rem/1.7 Georgia, 'Times New Roman', serif; }
.notebook-bottom > div { display: flex; gap: 17px; flex-shrink: 0; }
.notebook-button { color: #515e52; border: 0; padding: 5px 0; background: transparent; font-size: 0.875rem; text-decoration: underline; text-underline-offset: 3px; }
.notebook-button:hover { color: #151f17; }
.guestbook-privacy { color: #8d9a9c; font-size: 0.875rem; line-height: 1.8; max-width: 760px; margin: 15px 0 0; }
.steps { padding-block: 42px; }
.guestbook-modal { max-width: 560px; }
.guestbook-modal h2 { font: 400 1.9375rem/1.2 Georgia, 'Times New Roman', serif; letter-spacing: -.6px; }
.guestbook-modal .dialog-intro { font-size: 1rem !important; margin-bottom: 23px; }
.required-label { font-size: 0.875rem; color: #8e9eaf; font-weight: 400; }
textarea { display: block; width: 100%; padding: 12px; background: #0a111b; border: 1px solid #41505f; border-radius: 0; color: var(--text); font: 1rem/1.7 Arial, sans-serif; resize: vertical; min-height: 115px; }
textarea:focus-visible { outline: 2px solid var(--teal); outline-offset: 5px; }
textarea[aria-invalid='true'] { border-color: #fba398; }
.memory-help { display: flex; justify-content: space-between; gap: 14px; }
#memory-count { white-space: nowrap; }
.attached-score { display: flex; align-items: center; justify-content: space-between; gap: 15px; border-block: 1px solid var(--line); padding: 14px 0; margin-bottom: 22px; }
.attached-score .eyebrow { font-size: 0.875rem; color: #a0aaa9; }
.attached-score strong { display: block; font: bold 1.5rem var(--mono); color: var(--orange); letter-spacing: 2px; margin-top: 5px; }
.attached-score .text-link { margin: 0; }
#turnstile-widget { margin-top: 20px; }
button.text-link { background: transparent; border: 0; padding: 0; cursor: pointer; }
#cancel-signing { margin-top: 20px; }
#back-to-game { display: block; margin-top: 20px; }
.shared-entry-list { margin: 0; padding: 0; list-style: none; }
.shared-entry-list .entry-name { color: #e7d8bc; }
.shared-entry-list .entry-memory { color: #c4cec7; }
.shared-entry-list .entry-heading time, .shared-entry-list .entry-score { color: #a8b9a8; }
@media (max-width: 1100px) { .memorial-intro { gap: 35px; } .notebook-memento { width: 220px; padding-right: 15px; } .notebook-memento p { font-size: 1.5625rem; } .arcade-layout { grid-template-columns: minmax(0, 1fr) 260px; gap: 25px; } .remembrance-card h2 { font-size: 1.875rem; } .remembrance-card > p:not(.eyebrow) { font-size: 1rem; } }
@media (max-width: 850px) { .arcade-layout { grid-template-columns: 1fr; } .memorial-intro { gap: 30px; padding-block: 40px; } .memorial-intro h1 { font-size: clamp(3rem, 1.5rem + 6vw, 6.5rem); } .memorial-intro .dedication { font-size: 1.125rem; } .memorial-intro .intro-description { font-size: 1.125rem; } .notebook-memento { width: 190px; min-height: 225px; padding-top: 22px; padding-left: 30px; } .notebook-label { font-size: 0.875rem; } .notebook-memento p { font-size: 1.375rem; } .remembrance-card { padding: 10px 0 0; } .remembrance-star { float: right; margin: 0 12px; font-size: 3.25rem; } .remembrance-card h2 br { display: none; } .remembrance-card h2 { font-size: 1.9375rem; margin-top: 10px; } .remembrance-card > .button { width: auto; margin-top: 12px; } .remembrance-card .quiet-note { display: inline-block; max-width: 240px; vertical-align: middle; margin-left: 20px; } .card-rule { margin-top: 20px; } .remembrance-card .keepsake-note { margin-bottom: 0; } .guestbook { padding-top: 46px; } .guestbook-heading h2 { font-size: 1.8125rem; } }
@media (max-width: 580px) { .brand { font-size: 1.25rem; } .brand-sub { font-size: 0.875rem; letter-spacing: 1.55px; } .brand-alien { width: 24px; } nav { gap: 15px; font-size: 1rem; } .notebook-memento { display: none; } .memorial-intro { padding: 33px 0 31px; } .memorial-intro h1 { font-size: clamp(3rem, 1.5rem + 6vw, 6.5rem); letter-spacing: -3px; margin-bottom: 20px; } .memorial-intro .dedication { font-size: 1.125rem; line-height: 1.85; } .memorial-intro .intro-copy > .eyebrow { font-size: 0.875rem; letter-spacing: 1px; } .intro-actions { gap: 9px; margin-top: 21px; } .intro-actions .button { font-size: 1rem; padding-inline: 13px; gap: 7px; } .remembrance-card .quiet-note { display: block; margin: 10px 0 0; max-width: none; } .remembrance-card h2 { font-size: 1.8125rem; } .guestbook { padding-top: 34px; } .guestbook-heading { display: block; margin-bottom: 20px; } .guestbook-heading h2 { font-size: 1.75rem; line-height: 1.25; margin-top: 9px; } .guestbook-heading > .button { margin-top: 18px; } .notebook-book::before { left: 17px; } .notebook-topline { margin-left: 30px; padding: 16px 15px 14px 0; font-size: 0.875rem; gap: 12px; } .notebook-topline a { font-size: 0.875rem; white-space: nowrap; } .guestbook-entries { margin-left: 30px; margin-right: 16px; } .guestbook-entry { padding-block: 23px; } .entry-heading { display: block; } .entry-heading time { display: block; margin-top: 5px; font-size: 0.875rem; } .entry-name { font-size: 1.4375rem; } .entry-memory { font-size: 1.125rem; line-height: 1.85; margin-top: 13px; } .guestbook-message { font-size: 1.0625rem; padding-block: 34px; } .notebook-bottom { margin-left: 30px; padding: 17px 15px 18px 0; display: block; } .notebook-bottom > div { margin-top: 10px; } .guestbook-privacy { font-size: 0.875rem; } .steps { padding-block: 30px; } .guestbook-modal h2 { font-size: 1.75rem; } .attached-score { gap: 10px; } .attached-score .text-link { font-size: 0.875rem; } }
@media (max-width: 380px) { .guestbook-modal { padding-inline: 17px; } nav { gap: 10px; font-size: 1rem; } .brand-sub { letter-spacing: 1.1px; } .memorial-intro h1 { font-size: clamp(3rem, 1.5rem + 6vw, 6.5rem); } }
.notebook-book a:focus-visible, .notebook-button:focus-visible { outline-color: #3a654d; }
@media (max-width: 580px) { .site-footer > div { flex-wrap: wrap; gap: 12px; line-height: 1.7; } }
@media (max-width: 1100px) { .notebook-memento p { font-size: 1.25rem; } }
@media (max-width: 850px) { .notebook-memento p { font-size: 1.125rem; } .memento-fleet { margin-block: 23px 19px; } }
@media (max-width: 580px) { .notebook-topline { margin-left: 0; padding-left: 30px; font-size: 0.875rem; letter-spacing: .65px; } .notebook-book::before { top: 51px; } }

/* Let larger type reflow instead of reducing it to fit a device. */
.site-header, nav, .panel-heading, .panel-title, .game-toolbar, .toolbar-actions,
.guestbook-heading, .notebook-topline, .notebook-bottom, .notebook-bottom > div,
.entry-heading, .memory-help, .attached-score, .site-footer, .site-footer > div {
  flex-wrap: wrap;
}
.brand { line-height: 1.25; min-width: 0; }
.brand > span { min-width: 0; overflow-wrap: anywhere; }
.brand-sub { letter-spacing: .5px; line-height: 1.5; }
.brand-alien { flex-shrink: 0; }
nav { gap: 12px 24px; line-height: 1.5; }
nav a, .nav-button { min-height: 44px; }
.header-tag { line-height: 1.5; }
.intro-copy, .guestbook-heading > div, .entry-name, .instructions dd { min-width: 0; }
.memorial-intro h1, .modal, .guestbook-heading, .notebook-topline, .site-footer { overflow-wrap: anywhere; }
h2, h3 { overflow-wrap: anywhere; }
.memorial-intro h1 { line-height: 1.1; letter-spacing: -.035em; }
.memorial-intro .intro-description { max-width: 58ch; line-height: 1.8; }
.personal-note { max-width: 58ch; margin-top: 28px; padding-left: 20px; border-left: 2px solid #695634; }
.story-byline { margin: 0 0 12px; color: var(--orange); font: 700 1rem/1.6 var(--mono); }
.dedication em { white-space: normal; }
.remembrance-card > p:not(.eyebrow) { line-height: 1.8; }
.notebook-memento { width: 250px; padding-inline: 24px; }
.notebook-label { letter-spacing: .5px; line-height: 1.6; }
.panel-title { white-space: normal; line-height: 1.6; gap: 8px; }
.panel-heading > .muted { display: block; line-height: 1.6; }
.game-shell { display: grid; aspect-ratio: auto; }
.game-shell::before { content: ''; grid-area: 1 / 1; padding-top: 75%; pointer-events: none; }
.standby-screen {
  position: relative;
  grid-area: 1 / 1;
  min-width: 0;
  padding: 28px 16px;
  text-align: center;
}
.standby-title { font-size: clamp(1.75rem, 1.25rem + 3vw, 3.3125rem); letter-spacing: .08em; max-width: 100%; overflow-wrap: anywhere; }
.pixel-fleet { max-width: 70%; flex-shrink: 0; }
.standby-sub, .standby-hint { line-height: 1.7; letter-spacing: .5px; }
.standby-hint { color: #a6aca3; }
.start-game { min-height: 48px; max-width: 100%; flex-shrink: 0; }
.start-game span { font-size: .875rem; }
.pause-overlay { padding: 20px; overflow: auto; text-align: center; justify-content: safe center; }
.pause-overlay p { max-width: 100%; overflow-wrap: anywhere; }
.arcade-panel:fullscreen .game-shell::before { display: none; }
.arcade-panel:fullscreen .standby-screen { min-height: 0; overflow: auto; justify-content: safe center; }
@media (max-height: 480px) {
  .arcade-panel:fullscreen .pixel-fleet { display: none; }
  .arcade-panel:fullscreen .standby-screen { padding-block: 12px; }
  .arcade-panel:fullscreen .standby-title { font-size: 2rem; }
  .arcade-panel:fullscreen .standby-sub { margin-block: 8px; }
  .arcade-panel:fullscreen .standby-hint { margin-top: 8px; }
}
.live-score { flex-wrap: wrap; }
.icon-button { width: 44px; height: 44px; flex-shrink: 0; }
.icon-button.fullscreen-exit { width: auto; min-width: 44px; padding-inline: 6px; }
.button-capture { min-height: 44px; }
.button-capture svg { flex-shrink: 0; }
.under-game { flex-wrap: wrap; gap: 12px; }
.under-game p { display: flex; flex-wrap: wrap; gap: 8px 16px; line-height: 1.7; }
.control-hint { display: inline-flex; align-items: center; gap: 4px; }
#new-game { min-height: 44px; }
.game-notice { color: #a6aca3; }
.touch-controls { flex-wrap: wrap; }
.touch-controls button { flex: 1 1 auto; padding-inline: 16px; }
.notebook-topline { position: relative; z-index: 1; }
.notebook-topline a { white-space: normal; line-height: 1.7; padding-block: 8px; }
.entry-memory { max-width: 68ch; line-height: 1.8; }
.entry-heading time { flex-shrink: 1; }
.notebook-bottom > div { flex-shrink: 1; }
.notebook-button { min-height: 44px; }
.steps { grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); }
.steps article { min-width: 0; }
.steps p { color: #a6aca3; }
.steps br { display: none; }
.site-footer { line-height: 1.7; }
.site-footer > div { flex-direction: row; }
.site-footer a { padding-block: 8px; }
.modal { line-height: 1.6; }
.modal-close { width: 44px; height: 44px; line-height: 1; }
.modal > .eyebrow { padding-right: 48px; }
.modal h2 { line-height: 1.25; }
.modal input, .modal textarea { line-height: 1.6; }
.text-link { min-height: 44px; align-content: center; line-height: 1.6; }
.instructions > div { flex-wrap: wrap; }
.instructions dt { width: auto; min-width: 86px; }

@media (max-width: 1100px) {
  .site-header { padding-block: 20px; }
  .memorial-intro { align-items: flex-start; }
  .arcade-layout { grid-template-columns: minmax(0, 1fr); }
  .remembrance-card { padding: 12px 0 0; max-width: 68ch; }
  .remembrance-card h2 br { display: none; }
  .remembrance-card > .button { width: auto; }
}
@media (max-width: 850px) {
  .notebook-memento { display: none; }
  .remembrance-card .quiet-note { display: block; margin-left: 0; max-width: none; }
}
@media (max-width: 580px) {
  .site-header { align-items: flex-start; gap: 16px; }
  nav { width: 100%; gap: 8px 20px; }
  nav a:first-child { display: block; }
  .intro-actions .button { width: 100%; padding-inline: 16px; }
  .game-toolbar { align-items: flex-start; }
  .live-score { flex-direction: row; align-items: center; gap: 12px; }
  .toolbar-actions { width: 100%; gap: 4px; }
  .toolbar-divider { display: none; }
  .game-actions { width: 100%; }
  .game-actions .button { flex: 1 1 120px; }
  .modal { padding-inline: 20px; }
  .guestbook-modal { padding-inline: 17px; }
  .memory-help { gap: 4px 14px; }
  .entry-heading { display: block; }
}