diff --git a/.gitignore b/.gitignore index 85540fc..d4fccfb 100644 --- a/.gitignore +++ b/.gitignore @@ -3,6 +3,7 @@ dist .env *.local -# Raw source image — public/intro.webp is the optimized derivative that -# actually ships; no need to bloat the repo with the 1.7MB original. +# Raw source images — public/*.webp are the optimized derivatives that +# actually ship; no need to bloat the repo with the 1.7MB originals. /intro.png +/gameover.png diff --git a/public/gameover.webp b/public/gameover.webp new file mode 100644 index 0000000..33481a5 Binary files /dev/null and b/public/gameover.webp differ diff --git a/src/style.css b/src/style.css index 5482cff..0781acc 100644 --- a/src/style.css +++ b/src/style.css @@ -81,14 +81,19 @@ button { font: inherit; } linear-gradient(rgba(13, 13, 26, 0.6), rgba(13, 13, 26, 0.88)), url('/intro.webp') center / cover no-repeat; } +.end-screen { + background: + linear-gradient(rgba(13, 13, 26, 0.55), rgba(13, 13, 26, 0.85)), + url('/gameover.webp') center / cover no-repeat; +} .seal { width: clamp(160px, 25vw, 260px); aspect-ratio: 1; display: grid; place-items: center; border: 8px double var(--stamp); border-radius: 50%; color: var(--stamp); font: 700 clamp(90px, 16vw, 160px)/1 'Special Elite'; transform: rotate(-8deg); opacity: .85; box-shadow: 0 0 60px rgba(217,84,98,.25); background: rgba(13, 13, 26, 0.35); backdrop-filter: blur(1px); } .intro-copy h1 { margin: 0; color: var(--stamp); font-size: clamp(52px, 10vw, 92px); letter-spacing: .15em; line-height: 1; } .intro-sub { color: var(--dim); font-size: 10px; letter-spacing: .15em; text-transform: uppercase; } .intro-copy > p:not(.intro-sub) { color: #b0b0c4; } -.end-card { width: min(620px, 100%); padding: clamp(24px, 5vw, 50px); border: 1px solid var(--border); background: var(--panel); text-align: center; position: relative; } +.end-card { width: min(620px, 100%); padding: clamp(24px, 5vw, 50px); border: 1px solid var(--border); background: rgba(18, 18, 31, 0.82); backdrop-filter: blur(2px); text-align: center; position: relative; } .end-card h1 { color: var(--text); } .end-card > p { color: var(--dim); } -.audit-stamp { display: inline-block; padding: 8px 16px; border: 3px solid var(--safe); color: var(--safe); font-size: 18px; font-weight: 700; letter-spacing: .12em; transform: rotate(-4deg); } +.audit-stamp { display: inline-block; padding: 8px 16px; border: 3px solid var(--safe); color: var(--safe); font-size: 18px; font-weight: 700; letter-spacing: .12em; transform: rotate(-4deg); background: rgba(13, 13, 26, 0.3); } .failure .audit-stamp { border-color: var(--danger); color: var(--danger); } .final-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 25px 0; } .final-stats div { padding: 12px; border: 1px solid var(--border); }