SOURCE / PINNED RELEASE
Made of little things.
Shiftfield
- Release
- 5a170c505f6b…
- Author-recorded commit
- a2e23e0171aa…
- License
- LICENSE
- Author’s source reference
- nostr://npub16nzc4ql748r2kv9202rgzrt0fmtk4n3tzsjl86yf6ty9agqe9u0qjcc7hc/wss%3A%2F%2Fgit.napplet.soy%2F/n-e4fb6341ccd
Archive hash verified: 66de7623efd91da1…. The source-to-build association is the author’s claim; it has not been independently rebuilt.
/*
Minesweeper DX — "Shiftfield" visual direction (docs/napplet-visual-design.md):
Character: industrial mineshaft terminal. Claustropholic dark grid, monospace
HUD, semantic hazard colors. Suits a roguelike where the board itself is the
threat — the UI stays quiet so ice/fire/shift telegraphs read instantly.
Theme policy: app-owned (FOLLOW_HOST_THEME stays false); gameplay colors are
semantic and never follow host branding.
Semantic tokens: ice=cyan, fire=orange, mine=red, flag=amber, safe=steel.
Density: 1fr board grid that fits any frame; HUD wraps; abilitybar collapses
to icon-only under 240px.
PHASE 4 (Juice, ruling 2026-10-25): hybrid render layer — the DOM board
stays sanctioned; src/juice.ts adds a fixed pointer-events:none effects
canvas (#fx) for particles/flashes, #app is the screen-shake layer, and
CSS carries per-tile motion (flood-fade reveal waves, hazard flicker,
telegraph edge). prefers-reduced-motion kills all of it (canvas side AND
the media block at the bottom). Procedural Web Audio lives in src/sfx.ts.
*/
:root {
--bg: #14181d;
--panel: #1c222a;
--grid: #232b35;
--fg: #d7dee7;
--muted: #7d8896;
--border: #303b48;
--primary: #e8b13c;
--safe: #46586c;
--safe-hi: #5a7188;
--ice: #4fd2ff;
--fire: #ff7a29;
--mine: #e5484d;
--flag: #e8b13c;
--focus: #f2f5f8;
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--control-h: 30px;
--board-min: 120px;
--radius: 4px;
color-scheme: dark;
font: 13px/1.4 "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}
* {
box-sizing: border-box;
}
:where(html, body, body *) {
-webkit-user-select: none;
user-select: none;
}
html,
body,
#app {
height: 100%;
margin: 0;
background: var(--bg);
color: var(--fg);
}
/* Shiftfield ambience: a drifting minefield glow over a faint survey grid,
pinned behind everything (z-index:-1) so no stacking context swallows it. */
body::before {
content: '';
position: fixed;
inset: -20%;
z-index: -2;
background:
radial-gradient(60% 55% at 18% 88%, rgba(232, 177, 60, 0.055), transparent 70%),
radial-gradient(70% 60% at 85% 10%, rgba(79, 210, 255, 0.05), transparent 70%),
radial-gradient(90% 80% at 50% 45%, rgba(28, 42, 58, 0.55), transparent 100%);
animation: bgDrift 36s ease-in-out infinite alternate;
pointer-events: none;
}
body::after {
content: '';
position: fixed;
inset: 0;
z-index: -1;
background-image:
linear-gradient(rgba(125, 155, 185, 0.045) 1px, transparent 1px),
linear-gradient(90deg, rgba(125, 155, 185, 0.045) 1px, transparent 1px);
background-size: 26px 26px;
mask-image: radial-gradient(120% 100% at 50% 40%, #000 30%, transparent 100%);
-webkit-mask-image: radial-gradient(120% 100% at 50% 40%, #000 30%, transparent 100%);
pointer-events: none;
}
@keyframes bgDrift {
to {
transform: translate3d(2.5%, -2%, 0) scale(1.06);
}
}
/* screen-shake layer (juice.ts drives the transform) */
#app {
position: relative;
}
/* D5 (audit 2026-10-28): promotion lives ONLY for the shake window —
juice.ts toggles .shaking on start/teardown. A permanent will-change on
#app kept a viewport-sized promoted layer alive all game, and the #fx
canvas inside it churned that layer on every 60 fps repaint (the B2
multiplier on low-VRAM/software-raster clients). */
#app.shaking {
will-change: transform;
}
/* effects canvas: above the scene, below the .overlay screens (z 10) */
#fx {
position: fixed;
inset: 0;
z-index: 9;
pointer-events: none;
}
button {
font: inherit;
color: inherit;
}
.app {
container-type: size;
display: grid;
grid-template-rows: auto minmax(0, 1fr) auto;
gap: var(--space-2);
padding: var(--space-2);
overflow: hidden;
}
/* HUD ───────────────────────────────────────────────────────────────── */
.hud {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-1) var(--space-3);
min-height: var(--control-h);
padding: 0 var(--space-1);
border: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
border-radius: var(--radius);
background: linear-gradient(180deg, color-mix(in srgb, var(--panel) 55%, transparent), transparent);
box-shadow: 0 0 24px rgba(79, 210, 255, 0.035), inset 0 1px 0 rgba(255, 255, 255, 0.03);
}
/* HUD value just changed: quick amber pop (main.ts toggles .stat-pop) */
.stat-pop {
display: inline-block;
animation: statPop 0.32s ease-out;
}
/* P4 perf: drop brightness filter (see juiceReveal note). */
@keyframes statPop {
0% {
transform: scale(1.4);
}
100% {
transform: scale(1);
}
}
/* sound mute toggle */
.icon-btn {
font: inherit;
height: 22px;
padding: 0 var(--space-2);
border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
border-radius: 999px;
background: var(--panel);
color: var(--muted);
line-height: 1;
cursor: pointer;
}
.icon-btn:hover {
color: var(--fg);
border-color: var(--primary);
}
.stat {
color: var(--muted);
font-size: 12px;
white-space: nowrap;
}
.stat b {
color: var(--fg);
font-weight: 700;
}
.stat-key {
display: none;
}
@container (min-width: 360px) {
.stat-key {
display: inline;
}
}
.stat-shift {
color: var(--primary);
}
.stat-shift b {
color: var(--primary);
text-shadow: 0 0 10px rgba(232, 177, 60, 0.45);
}
.stat-shield {
color: var(--ice);
}
.status {
margin-left: auto;
padding: 0 var(--space-2);
border-radius: 999px;
font-size: 12px;
font-weight: 600;
line-height: 22px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}
.status-idle {
color: var(--muted);
background: var(--panel);
}
.status-ok {
color: #7ee2a0;
background: color-mix(in srgb, #7ee2a0 14%, var(--bg));
}
.status-warn {
color: var(--primary);
background: color-mix(in srgb, var(--primary) 16%, var(--bg));
}
.status-error {
color: var(--mine);
background: color-mix(in srgb, var(--mine) 16%, var(--bg));
}
/* Board ─────────────────────────────────────────────────────────────── */
.board-host {
display: grid;
place-items: center;
min-height: 0;
min-width: 0;
}
/* Depth-6 Shifter awakening modal (ruling 2026-10-28, ack follow-up): one
BLOCKING panel per run — z above the .overlay screens (10); the full-viewport
backdrop swallows board clicks, so the run cannot continue until the
player presses the acknowledge button. */
.intro-modal {
position: fixed;
inset: 0;
z-index: 12;
display: grid;
place-items: center;
background: rgba(8, 10, 13, 0.62);
}
.intro-modal[hidden] { display: none; }
.intro-panel {
display: flex;
flex-direction: column;
gap: 10px;
max-width: min(92vw, 430px);
padding: 16px 20px;
border-radius: 12px;
background: rgba(18, 14, 7, 0.97);
border: 1px solid var(--primary);
color: #f2d89b;
font-size: 13px;
line-height: 1.5;
text-align: center;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6);
animation: intro-drop 320ms ease-out;
}
.intro-panel b { color: var(--primary); letter-spacing: 0.06em; }
.intro-panel button { align-self: center; }
/* One-time name gate (ruling 2026-10-29): the summary-name input contract
(≤24, muted label) rides inside the intro panel — centered under the copy. */
.intro-panel .summary-name { align-self: center; }
@keyframes intro-drop {
from { opacity: 0; transform: translateY(-10px); }
to { opacity: 1; transform: translateY(0); }
}
/* Count-pulse (ruling 2026-10-28): an already-revealed tile whose proximity
digit changed because the mines shifted under it. Amber — matches the wind
and warning band. The class is added per paint (capped to COUNT_PULSE_CAP
leading-edge cells, board.ts) and stripped by ONE delegated animationend
on the board root.
B1 restyle (audit 2026-10-28): the old keyframes animated box-shadow +
background-color on the cell itself — paint-only, non-compositable, so
every pulsing digit repainted all frames during the shift window. The
glow is now a static overlay on a ::before pseudo (.cell is already
position:relative, and ice/fire glyphs only live on HIDDEN tiles, so the
pseudo is free here); only `opacity` animates — painted once, then
composited. */
.cell-count-pulse::before {
content: '';
position: absolute;
inset: -1px;
z-index: 3;
border-radius: 2px;
background: rgba(232, 177, 60, 0.26);
box-shadow: inset 0 0 0 1px rgba(232, 177, 60, 0.9), 0 0 10px rgba(232, 177, 60, 0.5);
pointer-events: none;
animation: cell-count-pulse 620ms ease-out both;
}
@keyframes cell-count-pulse {
0% { opacity: 1; }
100% { opacity: 0; }
}
.board {
display: grid;
grid-template-columns: repeat(10, minmax(0, 1fr));
grid-template-rows: repeat(10, minmax(0, 1fr));
gap: 2px;
width: max(var(--board-min), min(100cqw - var(--space-2) * 2, 100cqh - var(--control-h) * 5));
aspect-ratio: 1;
max-height: 100%;
padding: var(--space-1);
position: relative;
background:
radial-gradient(120% 120% at 50% 0%, color-mix(in srgb, var(--panel) 70%, transparent), transparent 90%),
var(--grid);
/* wrap cue (player trial 2026-10-28, rev 2): dashed seam REJECTED by the
player — border returns to the original solid frame; the cue is now
carried by the corner brackets + inward portal chevrons in
.board::after, which ride entirely INSIDE the board box (an earlier
-10px overhang clipped against the app frame in the real shell). */
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.45),
inset 0 0 28px rgba(0, 0, 0, 0.5),
0 14px 40px rgba(0, 0, 0, 0.45),
0 0 60px rgba(79, 210, 255, 0.045);
}
/* Wrap cue (player trial 2026-10-28, rev 2): solid amber L-brackets in the
four corners plus double-chevron portal marks centered on each edge,
fully INSIDE the padding box (negative/overhanging positions clip) —
arrows sit just inside the frame, tips pointing outward at the edge
midpoint: "exit here, re-enter opposite side". Pure decoration: one
pseudo-layer, pointer-events off, no DOM nodes, no canvas/rAF cost,
reduced-motion safe. SVG stroke is solid --flag amber. */
.board::after {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
--brk: color-mix(in srgb, var(--flag) 62%, transparent);
background:
/* corner brackets, arms flush into each corner (background-position
100% = flush: the % anchors against box-minus-image, so calc(100% -
Npx) would detach the arm by Npx — that was the NE/SE/SW break) */
linear-gradient(var(--brk), var(--brk)) 0 0 / 16px 2px no-repeat,
linear-gradient(var(--brk), var(--brk)) 0 0 / 2px 16px no-repeat,
linear-gradient(var(--brk), var(--brk)) 100% 0 / 16px 2px no-repeat,
linear-gradient(var(--brk), var(--brk)) 100% 0 / 2px 16px no-repeat,
linear-gradient(var(--brk), var(--brk)) 0 100% / 16px 2px no-repeat,
linear-gradient(var(--brk), var(--brk)) 0 100% / 2px 16px no-repeat,
linear-gradient(var(--brk), var(--brk)) 100% 100% / 16px 2px no-repeat,
linear-gradient(var(--brk), var(--brk)) 100% 100% / 2px 16px no-repeat,
/* portal chevrons: fully inside, tips outward, softened (stroke-opacity
.7, player note rev 3: arrows good but slightly too bright) */
url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2026%2018'%3E%3Cpath%20d='M6%203%2014%209%206%2015M15%203%2023%209%2015%2015'%20fill='none'%20stroke='%23e8b13c'%20stroke-width='2.6'%20stroke-opacity='0.7'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E") right 6px center / 26px 18px no-repeat,
url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2026%2018'%3E%3Cpath%20d='M20%203%2012%209%2020%2015M11%203%203%209%2011%2015'%20fill='none'%20stroke='%23e8b13c'%20stroke-width='2.6'%20stroke-opacity='0.7'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E") 6px center / 26px 18px no-repeat,
url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2018%2026'%3E%3Cpath%20d='M3%2020%209%2012%2015%2020M3%2011%209%203%2015%2011'%20fill='none'%20stroke='%23e8b13c'%20stroke-width='2.6'%20stroke-opacity='0.7'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E") center 6px / 18px 26px no-repeat,
url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2018%2026'%3E%3Cpath%20d='M3%206%209%2014%2015%206M3%2015%209%2023%2015%2015'%20fill='none'%20stroke='%23e8b13c'%20stroke-width='2.6'%20stroke-opacity='0.7'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E") center bottom 6px / 18px 26px no-repeat;
}
.cell {
border-radius: 2px;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(0, 0, 0, 0.18)),
var(--safe);
cursor: pointer;
outline: none;
position: relative;
min-width: 0;
min-height: 0;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), inset 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.cell:hover:not(.cell-revealed) {
background: var(--safe-hi);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.07),
inset 0 -1px 0 rgba(0, 0, 0, 0.25),
0 0 0 1px color-mix(in srgb, var(--ice) 40%, transparent),
0 0 10px color-mix(in srgb, var(--ice) 22%, transparent);
}
.cell:active:not(.cell-revealed) {
transform: translateY(1px);
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.45);
}
.cell-revealed {
background:
radial-gradient(110% 110% at 50% 120%, rgba(79, 210, 255, 0.05), transparent 70%),
color-mix(in srgb, var(--safe) 30%, var(--bg));
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
cursor: default;
display: grid;
place-items: center;
font-size: clamp(8px, 2.4cqi, 16px);
font-weight: 700;
line-height: 1;
}
/* Proximity numbers on revealed tiles (classic 1-8 palette, dark-frame tuned).
Rendered as cell text by Board.refresh(), recomputed from the engine every
sync — so shift-driven mine movement updates stale numbers for free. */
.cell-num-1 { color: #6cb6ff; text-shadow: 0 0 9px rgba(108, 182, 255, 0.6); }
.cell-num-2 { color: #7ee2a0; text-shadow: 0 0 9px rgba(126, 226, 160, 0.6); }
.cell-num-3 { color: #ff8a8a; text-shadow: 0 0 9px rgba(255, 138, 138, 0.6); }
.cell-num-4 { color: #c792ea; text-shadow: 0 0 9px rgba(199, 146, 234, 0.6); }
.cell-num-5 { color: #e8b13c; text-shadow: 0 0 9px rgba(232, 177, 60, 0.6); }
.cell-num-6 { color: #4fd2ff; text-shadow: 0 0 9px rgba(79, 210, 255, 0.6); }
.cell-num-7 { color: #d7dee7; text-shadow: 0 0 9px rgba(215, 222, 231, 0.5); }
.cell-num-8 { color: var(--muted); text-shadow: 0 0 9px rgba(125, 136, 150, 0.5); }
.cell-flagged {
background:
radial-gradient(100% 100% at 50% 130%, rgba(232, 177, 60, 0.25), transparent 75%),
color-mix(in srgb, var(--flag) 28%, var(--safe));
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--flag) 55%, transparent);
animation: flagDrop 0.22s cubic-bezier(0.2, 1.4, 0.4, 1);
}
@keyframes flagDrop {
0% {
transform: scale(1.5) rotate(-8deg);
}
100% {
transform: scale(1) rotate(0);
}
}
.cell-flagged::after {
content: "⚑";
position: absolute;
inset: 0;
display: grid;
place-items: center;
color: var(--flag);
font-size: clamp(8px, 2.4cqi, 16px);
}
.cell-ice {
background:
repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.07) 0 2px, transparent 2px 6px),
color-mix(in srgb, var(--ice) 35%, var(--safe));
box-shadow: inset 0 0 0 1px var(--ice), 0 0 10px rgba(79, 210, 255, 0.22);
}
/* P3 perf: shimmer rides an opacity-only overlay so the animation is
compositor-only (was `filter` on the tile = paint+recalc every frame per
hazard tile; traced 1.5k-2k Paints/1.5s idle). Alpha lives in the
gradient, keyframes touch only opacity. :not(.cell-mine-reveal) keeps
::before free for the death mine glyph on ignited mines (MINE_ON_FIRE). */
.cell-ice:not(.cell-mine-reveal)::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.16), transparent 55%, rgba(150, 230, 255, 0.14));
animation: iceSheen 3.2s ease-in-out infinite;
}
@keyframes iceSheen {
0%,
100% {
opacity: 0;
}
50% {
opacity: 1;
}
}
.cell-ice::after {
content: "❄";
position: absolute;
inset: 0;
display: grid;
place-items: center;
color: #0b3a4a;
font-size: clamp(7px, 2.2cqi, 14px);
}
.cell-fire {
background: color-mix(in srgb, var(--fire) 45%, var(--safe));
box-shadow: inset 0 0 4px 1px var(--fire);
}
/* P3 perf: ember pulse = opacity-only overlay glow (was animated
box-shadow+filter per fire tile, every frame, forever — fire persists and
spreads). Edge-hot radial approximates the old inset box-shadow pulse. */
.cell-fire:not(.cell-mine-reveal)::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(125% 125% at 50% 50%, transparent 35%, color-mix(in srgb, var(--fire) 55%, #fff) 100%);
opacity: 0.4;
animation: fireGlow 1.2s ease-in-out infinite;
}
@keyframes fireGlow {
0% {
opacity: 0.45;
}
30% {
opacity: 1;
}
55% {
opacity: 0.3;
}
80% {
opacity: 1;
}
100% {
opacity: 0.45;
}
}
.cell-fire::after {
content: "▲";
position: absolute;
inset: 0;
display: grid;
place-items: center;
color: #ffd9c0;
font-size: clamp(7px, 2.2cqi, 14px);
}
.cell-focused {
box-shadow: inset 0 0 0 2px var(--focus);
}
/* Targeting mode (radar armed): crosshair over the board, and the focused
tile reads as a reticle rather than a reveal cursor. */
.board-targeting .cell {
cursor: crosshair;
}
.board-targeting .cell-focused {
box-shadow: inset 0 0 0 2px var(--primary);
}
.abilitybar button.armed {
border-color: var(--primary);
outline: 2px solid var(--primary);
outline-offset: 1px;
animation: armedBreath 1.4s ease-in-out infinite;
}
@keyframes armedBreath {
50% {
outline-offset: 3px;
}
}
/* Juice (Phase 4) ────────────────────────────────────────────────────── */
/* Flood-fade reveal: board.ts stamps .juice-reveal + --juice-delay (stagger
by distance from the click) on every cell a reveal newly opened. */
.juice-reveal {
animation: juiceReveal 0.3s ease-out backwards;
animation-delay: var(--juice-delay, 0ms);
}
/* P4 perf: pop comes from scale+opacity only — `filter: brightness` on up to
100 staggered flood tiles meant 100 filter-animated layers per flood
(composited per-layer blur-less filter is still per-frame raster work on
weak iGPUs, and it stacked on the old P3 hazard repaints). */
@keyframes juiceReveal {
0% {
opacity: 0.1;
transform: scale(0.82);
}
100% {
opacity: 1;
transform: scale(1);
}
}
/* A4 fairness fallback (audit 2026-10-29): main.ts keeps this class on the
board for the whole armed-shift window, but the glow ONLY renders while
the juice watchdog has flagged the fx canvas dead (html.fx-dead set by
juice.ts lostWatchdog). Static box-shadow, no animation, zero cost when
fx is healthy (the selector simply never matches). */
html.fx-dead .board-shift-telegraph {
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.45),
inset 0 0 28px rgba(0, 0, 0, 0.5),
0 0 26px rgba(232, 177, 60, 0.35);
}
.cell-mine-reveal {
background:
radial-gradient(90% 90% at 50% 40%, rgba(229, 72, 77, 0.8), color-mix(in srgb, var(--mine) 45%, var(--bg)) 75%);
box-shadow: inset 0 0 0 1px var(--mine), 0 0 14px rgba(229, 72, 77, 0.5);
animation: mineRevealPop 0.5s cubic-bezier(0.2, 1.3, 0.4, 1) backwards;
}
@keyframes mineRevealPop {
0% {
opacity: 0;
transform: scale(0.6);
}
}
/* Death sweep: mines pop in a diagonal wave outward from the blast — the
100-cell board lets nth-child carry the (x + y) wave position. */
.board .cell:nth-child(1).cell-mine-reveal { animation-delay: 0ms; }
.board .cell:nth-child(2).cell-mine-reveal { animation-delay: 26ms; }
.board .cell:nth-child(3).cell-mine-reveal { animation-delay: 52ms; }
.board .cell:nth-child(4).cell-mine-reveal { animation-delay: 78ms; }
.board .cell:nth-child(5).cell-mine-reveal { animation-delay: 104ms; }
.board .cell:nth-child(6).cell-mine-reveal { animation-delay: 130ms; }
.board .cell:nth-child(7).cell-mine-reveal { animation-delay: 156ms; }
.board .cell:nth-child(8).cell-mine-reveal { animation-delay: 182ms; }
.board .cell:nth-child(9).cell-mine-reveal { animation-delay: 208ms; }
.board .cell:nth-child(10).cell-mine-reveal { animation-delay: 234ms; }
.board .cell:nth-child(11).cell-mine-reveal { animation-delay: 26ms; }
.board .cell:nth-child(12).cell-mine-reveal { animation-delay: 52ms; }
.board .cell:nth-child(13).cell-mine-reveal { animation-delay: 78ms; }
.board .cell:nth-child(14).cell-mine-reveal { animation-delay: 104ms; }
.board .cell:nth-child(15).cell-mine-reveal { animation-delay: 130ms; }
.board .cell:nth-child(16).cell-mine-reveal { animation-delay: 156ms; }
.board .cell:nth-child(17).cell-mine-reveal { animation-delay: 182ms; }
.board .cell:nth-child(18).cell-mine-reveal { animation-delay: 208ms; }
.board .cell:nth-child(19).cell-mine-reveal { animation-delay: 234ms; }
.board .cell:nth-child(20).cell-mine-reveal { animation-delay: 260ms; }
.board .cell:nth-child(21).cell-mine-reveal { animation-delay: 52ms; }
.board .cell:nth-child(22).cell-mine-reveal { animation-delay: 78ms; }
.board .cell:nth-child(23).cell-mine-reveal { animation-delay: 104ms; }
.board .cell:nth-child(24).cell-mine-reveal { animation-delay: 130ms; }
.board .cell:nth-child(25).cell-mine-reveal { animation-delay: 156ms; }
.board .cell:nth-child(26).cell-mine-reveal { animation-delay: 182ms; }
.board .cell:nth-child(27).cell-mine-reveal { animation-delay: 208ms; }
.board .cell:nth-child(28).cell-mine-reveal { animation-delay: 234ms; }
.board .cell:nth-child(29).cell-mine-reveal { animation-delay: 260ms; }
.board .cell:nth-child(30).cell-mine-reveal { animation-delay: 286ms; }
.board .cell:nth-child(31).cell-mine-reveal { animation-delay: 78ms; }
.board .cell:nth-child(32).cell-mine-reveal { animation-delay: 104ms; }
.board .cell:nth-child(33).cell-mine-reveal { animation-delay: 130ms; }
.board .cell:nth-child(34).cell-mine-reveal { animation-delay: 156ms; }
.board .cell:nth-child(35).cell-mine-reveal { animation-delay: 182ms; }
.board .cell:nth-child(36).cell-mine-reveal { animation-delay: 208ms; }
.board .cell:nth-child(37).cell-mine-reveal { animation-delay: 234ms; }
.board .cell:nth-child(38).cell-mine-reveal { animation-delay: 260ms; }
.board .cell:nth-child(39).cell-mine-reveal { animation-delay: 286ms; }
.board .cell:nth-child(40).cell-mine-reveal { animation-delay: 312ms; }
.board .cell:nth-child(41).cell-mine-reveal { animation-delay: 104ms; }
.board .cell:nth-child(42).cell-mine-reveal { animation-delay: 130ms; }
.board .cell:nth-child(43).cell-mine-reveal { animation-delay: 156ms; }
.board .cell:nth-child(44).cell-mine-reveal { animation-delay: 182ms; }
.board .cell:nth-child(45).cell-mine-reveal { animation-delay: 208ms; }
.board .cell:nth-child(46).cell-mine-reveal { animation-delay: 234ms; }
.board .cell:nth-child(47).cell-mine-reveal { animation-delay: 260ms; }
.board .cell:nth-child(48).cell-mine-reveal { animation-delay: 286ms; }
.board .cell:nth-child(49).cell-mine-reveal { animation-delay: 312ms; }
.board .cell:nth-child(50).cell-mine-reveal { animation-delay: 338ms; }
.board .cell:nth-child(51).cell-mine-reveal { animation-delay: 130ms; }
.board .cell:nth-child(52).cell-mine-reveal { animation-delay: 156ms; }
.board .cell:nth-child(53).cell-mine-reveal { animation-delay: 182ms; }
.board .cell:nth-child(54).cell-mine-reveal { animation-delay: 208ms; }
.board .cell:nth-child(55).cell-mine-reveal { animation-delay: 234ms; }
.board .cell:nth-child(56).cell-mine-reveal { animation-delay: 260ms; }
.board .cell:nth-child(57).cell-mine-reveal { animation-delay: 286ms; }
.board .cell:nth-child(58).cell-mine-reveal { animation-delay: 312ms; }
.board .cell:nth-child(59).cell-mine-reveal { animation-delay: 338ms; }
.board .cell:nth-child(60).cell-mine-reveal { animation-delay: 364ms; }
.board .cell:nth-child(61).cell-mine-reveal { animation-delay: 156ms; }
.board .cell:nth-child(62).cell-mine-reveal { animation-delay: 182ms; }
.board .cell:nth-child(63).cell-mine-reveal { animation-delay: 208ms; }
.board .cell:nth-child(64).cell-mine-reveal { animation-delay: 234ms; }
.board .cell:nth-child(65).cell-mine-reveal { animation-delay: 260ms; }
.board .cell:nth-child(66).cell-mine-reveal { animation-delay: 286ms; }
.board .cell:nth-child(67).cell-mine-reveal { animation-delay: 312ms; }
.board .cell:nth-child(68).cell-mine-reveal { animation-delay: 338ms; }
.board .cell:nth-child(69).cell-mine-reveal { animation-delay: 364ms; }
.board .cell:nth-child(70).cell-mine-reveal { animation-delay: 390ms; }
.board .cell:nth-child(71).cell-mine-reveal { animation-delay: 182ms; }
.board .cell:nth-child(72).cell-mine-reveal { animation-delay: 208ms; }
.board .cell:nth-child(73).cell-mine-reveal { animation-delay: 234ms; }
.board .cell:nth-child(74).cell-mine-reveal { animation-delay: 260ms; }
.board .cell:nth-child(75).cell-mine-reveal { animation-delay: 286ms; }
.board .cell:nth-child(76).cell-mine-reveal { animation-delay: 312ms; }
.board .cell:nth-child(77).cell-mine-reveal { animation-delay: 338ms; }
.board .cell:nth-child(78).cell-mine-reveal { animation-delay: 364ms; }
.board .cell:nth-child(79).cell-mine-reveal { animation-delay: 390ms; }
.board .cell:nth-child(80).cell-mine-reveal { animation-delay: 416ms; }
.board .cell:nth-child(81).cell-mine-reveal { animation-delay: 208ms; }
.board .cell:nth-child(82).cell-mine-reveal { animation-delay: 234ms; }
.board .cell:nth-child(83).cell-mine-reveal { animation-delay: 260ms; }
.board .cell:nth-child(84).cell-mine-reveal { animation-delay: 286ms; }
.board .cell:nth-child(85).cell-mine-reveal { animation-delay: 312ms; }
.board .cell:nth-child(86).cell-mine-reveal { animation-delay: 338ms; }
.board .cell:nth-child(87).cell-mine-reveal { animation-delay: 364ms; }
.board .cell:nth-child(88).cell-mine-reveal { animation-delay: 390ms; }
.board .cell:nth-child(89).cell-mine-reveal { animation-delay: 416ms; }
.board .cell:nth-child(90).cell-mine-reveal { animation-delay: 442ms; }
.board .cell:nth-child(91).cell-mine-reveal { animation-delay: 234ms; }
.board .cell:nth-child(92).cell-mine-reveal { animation-delay: 260ms; }
.board .cell:nth-child(93).cell-mine-reveal { animation-delay: 286ms; }
.board .cell:nth-child(94).cell-mine-reveal { animation-delay: 312ms; }
.board .cell:nth-child(95).cell-mine-reveal { animation-delay: 338ms; }
.board .cell:nth-child(96).cell-mine-reveal { animation-delay: 364ms; }
.board .cell:nth-child(97).cell-mine-reveal { animation-delay: 390ms; }
.board .cell:nth-child(98).cell-mine-reveal { animation-delay: 416ms; }
.board .cell:nth-child(99).cell-mine-reveal { animation-delay: 442ms; }
.board .cell:nth-child(100).cell-mine-reveal { animation-delay: 468ms; }
.cell-mine-reveal::before {
content: "✸";
position: absolute;
inset: 0;
display: grid;
place-items: center;
color: #ffe0e0;
font-size: clamp(8px, 2.4cqi, 16px);
}
/* Ability bar ───────────────────────────────────────────────────────── */
.abilitybar {
display: flex;
flex-wrap: wrap;
gap: var(--space-1);
min-height: var(--control-h);
}
.abilitybar button {
display: inline-flex;
align-items: center;
gap: var(--space-1);
height: var(--control-h);
padding: 0 var(--space-2);
flex: 1 1 auto;
border: 1px solid var(--border);
border-radius: var(--radius);
background: linear-gradient(180deg, color-mix(in srgb, var(--panel) 80%, #fff 4%), var(--panel));
cursor: pointer;
white-space: nowrap;
overflow: hidden;
transition: border-color 80ms linear, box-shadow 120ms ease;
}
.abilitybar button:hover:not(:disabled) {
box-shadow: 0 0 12px rgba(232, 177, 60, 0.12);
}
.abilitybar button:hover:not(:disabled) {
border-color: var(--primary);
}
.abilitybar button:disabled {
opacity: 0.4;
cursor: not-allowed;
}
.abilitybar button:focus-visible {
outline: 2px solid var(--primary);
outline-offset: 1px;
}
.cost {
color: var(--muted);
font-size: 11px;
}
.cd {
color: var(--primary);
font-size: 11px;
min-width: 2.5em;
text-align: right;
}
/* icon-only under 320px: keep the glyph, hide the name */
@container (max-width: 320px) {
.abilitybar button {
justify-content: center;
padding: 0;
}
.abilitybar .label,
.abilitybar .cost {
display: none;
}
}
/* Overlay ───────────────────────────────────────────────────────────── */
.overlay {
position: fixed;
inset: 0;
display: grid;
place-items: center;
background:
radial-gradient(120% 90% at 50% 30%, transparent 40%, rgba(0, 0, 0, 0.35) 100%),
color-mix(in srgb, var(--bg) 82%, transparent);
backdrop-filter: blur(3px);
z-index: 10;
animation: overlayIn 0.25s ease-out;
}
@keyframes overlayIn {
from {
opacity: 0;
}
}
.overlay[hidden] {
display: none;
}
.panel {
display: grid;
gap: var(--space-2);
justify-items: center;
max-width: min(90%, 340px);
padding: var(--space-3);
background:
radial-gradient(140% 90% at 50% 0%, color-mix(in srgb, var(--border) 45%, transparent), transparent 80%),
var(--panel);
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.05);
text-align: center;
}
/* screen entrance (panels start hidden inside .overlay[hidden]) */
.panel-anim {
animation: panelIn 0.34s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}
.overlay:has(#summaryScreen:not([hidden])) .panel-anim.death-blast {
/* Fatal boom: main.ts sets .death-blast so the canvas explosion breathes
first. The panel stays "visible" to automation the whole time (opacity
dips to 0.03 mid-animation instead of an invisible backwards-fill gap) —
the layout contract in tests/browser.test.mjs may assert instantly. */
animation: panelBreatheIn 1s cubic-bezier(0.16, 1, 0.3, 1);
}
/* P1 perf: the shake transform lives on #app, the overlay's blur ancestor —
every shake frame re-rasterized the full-viewport backdrop-filter for the
whole ~620 ms blast (measured 2-3 dropped frames; blur off -> 0). Kill the
blur during the death blast only; the panel stays visible. .death-blast is
removed on every non-summary showScreen (main.ts), so this cannot linger
onto the next screen. A/B harness: tests/perf.test.mjs (pnpm test:perf). */
.overlay:has(.death-blast) {
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
@keyframes panelBreatheIn {
0%, 45% {
opacity: 0.03;
transform: translateY(10px) scale(0.98);
}
100% {
opacity: 1;
transform: none;
}
}
@keyframes panelIn {
0% {
opacity: 0;
transform: translateY(14px) scale(0.97);
}
}
.panel h2 {
margin: 0;
font-size: 16px;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.panel p {
margin: 0;
color: var(--muted);
font-size: 12px;
}
.panel button {
height: calc(var(--control-h) + 4px);
padding: 0 var(--space-3);
border: 1px solid var(--primary);
border-radius: var(--radius);
background: color-mix(in srgb, var(--primary) 18%, var(--panel));
color: var(--fg);
font-weight: 700;
cursor: pointer;
}
.panel button:hover {
background: color-mix(in srgb, var(--primary) 30%, var(--panel));
}
/* MENU actions (fix 2026-10-28): the three menu CTAs sat in an unstyled
inline flow, so the wrapped Leaderboard button shared an exact edge with
the row above (measured: row-1 bottom == row-2 top at every tier) and
read as clipping into Start/Workshop. Stack the menu as a single centered
column — CTA on top, secondaries below — with real gaps; other panels'
2-button rows are untouched. */
#menuScreen .panel-actions {
display: grid;
gap: var(--space-2);
width: min(100%, 220px);
margin-inline: auto;
}
/* ==========================================================================
SHOP / Workshop (ruling 2026-10-28, shop_layout_ruling)
Grouped cards: Intel / Survival / Economy, each a card grid. 2-up at
large frames, 1-up when narrow, one-line ledger rows on short frames
(200×160 contract). The list scrolls INSIDE the panel so the footer CTAs
are never clipped — the unstyled build measured 636px tall inside a
437px frame and hid the last rows. Colors stay in the Shiftfield
industrial-terminal palette; no new hues.
========================================================================== */
/* The overlay centers via flex, not grid: a grid auto-track sized to the
uncapped content (761px) stranded the capped panel 123px down, running
its footer CTAs below the frame even though max-height was honored. */
#shopScreen.overlay:not([hidden]) {
display: flex;
align-items: center;
justify-content: center;
padding: var(--space-2);
}
.panel-shop {
width: min(94vw, 760px);
max-width: 94vw;
justify-items: stretch;
text-align: left;
max-height: calc(100dvh - 2 * var(--space-2));
grid-template-rows: auto auto minmax(0, 1fr) auto;
}
.panel-shop h2 {
text-align: center;
}
.shop-scrap {
text-align: center;
}
#shopScrap {
color: var(--fg);
font-size: 15px;
}
.upgrade-list {
display: grid;
gap: var(--space-3);
min-height: 0;
overflow-y: auto;
overscroll-behavior: contain;
scrollbar-width: thin;
scrollbar-color: var(--border) transparent;
}
.shop-group {
display: grid;
gap: var(--space-2);
}
.shop-group-title {
margin: 0;
padding-bottom: var(--space-1);
border-bottom: 1px solid var(--border);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--muted);
}
.shop-cards {
display: grid;
gap: var(--space-2);
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.upgrade-row {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: var(--space-3);
padding: var(--space-2) var(--space-3) var(--space-3);
background: color-mix(in srgb, var(--grid) 45%, var(--panel));
border: 1px solid var(--border);
border-radius: var(--radius);
}
.upgrade-info {
display: grid;
gap: 2px;
min-width: 0;
}
.upgrade-name {
display: flex;
align-items: center;
gap: var(--space-2);
min-width: 0;
}
/* ellipsis lives in the base rule: without min-width:0 + overflow hidden
on the title, the name flex overflows its 1fr track at narrow widths
and the auto-placed buy button lands on top of the pips */
.upgrade-title {
font-weight: 700;
flex: 0 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.upgrade-lvl {
font-size: 11px;
color: var(--muted);
}
/* level pips: tiny diamonds, filled = purchased (the old build drew these
as zero-width spans — invisible) */
.upgrade-pips {
display: inline-flex;
gap: 3px;
margin-left: auto;
}
.pip {
width: 7px;
height: 7px;
border: 1px solid var(--border);
background: transparent;
transform: rotate(45deg);
}
.pip-on {
border-color: var(--primary);
background: var(--primary);
}
.upgrade-desc {
font-size: 11px;
color: var(--muted);
}
/* card states: locked = dashed outline, unaffordable = dimmed but the
price stays legible, affordable = amber outline, maxed = quiet accent */
.upgrade-row.locked {
border-style: dashed;
}
.upgrade-row.locked .upgrade-title {
color: var(--muted);
}
.upgrade-row.unaffordable {
opacity: 0.55;
}
.upgrade-row.affordable {
border-color: color-mix(in srgb, var(--primary) 55%, var(--border));
}
.upgrade-row.maxed {
border-color: color-mix(in srgb, var(--primary) 40%, var(--border));
}
.buy-btn {
white-space: nowrap;
}
.panel .buy-btn:disabled {
cursor: not-allowed;
pointer-events: none;
border-color: var(--border);
background: transparent;
color: var(--muted);
}
.panel .upgrade-row.maxed .buy-btn:disabled {
border-color: color-mix(in srgb, var(--primary) 40%, var(--border));
color: var(--primary);
}
/* narrow frames: one card per row, tighter panel */
@media (max-width: 640px) {
.panel-shop {
max-width: 94vw;
}
.shop-cards {
grid-template-columns: 1fr;
}
}
/* very narrow frames (200px contract): the Lv text tag and prose compete
with the price for ~170px of row; pips already convey the level, so the
text tag drops out, the title gets an ellipsis, and Buy goes compact */
@media (max-width: 240px) {
.upgrade-lvl {
display: none;
}
.upgrade-title {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.upgrade-row {
gap: var(--space-2);
}
.panel .buy-btn {
padding: 0 var(--space-2);
gap: 4px;
font-size: 11px;
}
}
/* short frames (200×160 / max-height tiers): cards collapse to one-line
ledger rows — title, pips and price stay (the Lv text tag drops at
narrow widths, see 240px block); prose drops out */
@media (max-height: 300px) {
.panel-shop {
gap: 4px;
padding: 8px;
}
.shop-group-title {
display: none;
}
.shop-actions button {
min-height: 26px;
padding: 4px var(--space-3);
font-size: 12px;
}
.upgrade-list {
gap: var(--space-1);
}
.upgrade-row {
padding: 2px var(--space-2);
}
.upgrade-desc {
display: none;
}
.shop-group-title {
padding-bottom: 0;
border-bottom: none;
}
.panel .buy-btn {
height: var(--control-h);
}
}
/* ==========================================================================
FIELD MANUAL (ruling 2026-10-28, how_to_play_menu_ruling)
Tabbed how-to-play overlay. Rides the shop's capped-box contract (2026-10-28
shop_layout_ruling): flex-centered overlay, capped panel, body scrolls
INSIDE so the Back CTA never clips — at the 200x160 floor or anywhere else.
Static copy only; tab switching is a pure class/hidden toggle in main.ts.
At max-height:200px the shared .icon-btn rule hides the HUD `?` (same tier
that hides the mute pill) — the manual stays reachable from MENU.
========================================================================== */
#helpScreen.overlay:not([hidden]) {
display: flex;
align-items: center;
justify-content: center;
padding: var(--space-2);
}
.panel-help {
width: min(94vw, 560px);
max-width: 94vw;
justify-items: stretch;
text-align: left;
max-height: calc(100dvh - 2 * var(--space-2));
grid-template-rows: auto auto minmax(0, 1fr) auto;
}
.panel-help h2 {
text-align: center;
}
.help-tabs {
display: flex;
gap: var(--space-1);
border-bottom: 1px solid var(--border);
padding-bottom: var(--space-1);
}
.panel-help .help-tab {
height: auto;
padding: 5px var(--space-2);
border-color: var(--border);
background: var(--panel);
color: var(--muted);
font-size: 11px;
}
.panel-help .help-tab:hover {
color: var(--fg);
background: color-mix(in srgb, var(--primary) 10%, var(--panel));
}
.panel-help .help-tab.active {
border-color: var(--primary);
background: color-mix(in srgb, var(--primary) 18%, var(--panel));
color: var(--fg);
}
.help-body {
min-height: 0;
overflow-y: auto;
overscroll-behavior: contain;
scrollbar-width: thin;
scrollbar-color: var(--border) transparent;
}
/* the panels are <section>s: the explicit display beats the UA [hidden]
rule, so the inactive panel needs its own display:none */
.help-tab-panel {
display: grid;
gap: var(--space-1);
}
.help-tab-panel[hidden] {
display: none;
}
.help-tab-panel h3 {
margin: var(--space-2) 0 0;
padding-bottom: var(--space-1);
border-bottom: 1px solid var(--border);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--muted);
}
.help-tab-panel h3:first-child {
margin-top: 0;
}
.help-tab-panel p {
margin: 0;
}
.help-tab-panel ul,
.help-tab-panel ol {
margin: 0;
padding-left: 1.2em;
display: grid;
gap: 3px;
color: var(--muted);
font-size: 12px;
}
.help-tab-panel b {
color: var(--fg);
}
/* narrow frames: the tab strip wraps rather than squeezing the labels */
@media (max-width: 640px) {
.help-tabs {
flex-wrap: wrap;
}
}
/* short frames (200x160 contract): tighter chrome, smaller tabs — the body
scroll carries whatever prose does not fit (same contract as the shop's
one-line ledger rows) */
@media (max-height: 300px) {
.panel-help {
gap: 6px;
padding: 8px;
}
.panel-help .help-tab {
padding: 2px var(--space-1);
font-size: 10px;
}
.help-tab-panel h3 {
margin-top: var(--space-1);
padding-bottom: 0;
border-bottom: none;
}
}
.stub-note {
font-size: 10px !important;
color: color-mix(in srgb, var(--muted) 70%, var(--bg)) !important;
}
/* short frames: drop the stub note, tighten padding */
@media (max-height: 260px) {
.app {
gap: var(--space-1);
padding: var(--space-1);
}
.stub-note {
display: none;
}
}
/* extreme frames (e.g. 200×160): one-line chrome so the 120px board fits */
@media (max-height: 200px) {
:root {
--control-h: 22px;
--space-2: 4px;
--board-min: 96px;
}
/* with the HUD wrapped to 2 rows at 200px wide, only ~84px is left for
the board square — a 96px floor overflows the viewport (contract test) */
@media (max-height: 170px) {
:root {
--board-min: 76px;
}
}
/* the HUD frame (Phase 4) would push the board out of a 160px viewport —
drop its decoration, keep the row functional */
.hud {
border-color: transparent;
background: none;
box-shadow: none;
padding: 0;
}
.app {
gap: 2px;
padding: var(--space-1);
}
.status,
.stat {
font-size: 10px;
}
.abilitybar button {
font-size: 11px;
padding: 0 var(--space-1);
}
.cost,
.cd {
display: none;
}
/* the mute pill would wrap the HUD to a 3rd row and push the board
out of a 160px viewport; sound is still toggleable at every
normal frame size */
.icon-btn {
display: none;
}
}
/* Motion policy (Phase 4): the game is fully playable with zero animation —
juice.ts reads the same preference and disables particles/shake/chroma, so
this block only has to silence the CSS-side motion. */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
body::before {
animation: none;
}
}
/* ==========================================================================
LEADERBOARD — shared depth-v1 board (ruling 2026-10-28). Same industrial
palette; the row list scrolls INSIDE the panel (shop precedent) so the
Back/Refresh CTAs are never clipped on short frames.
========================================================================== */
.summary-name {
display: grid;
gap: 4px;
width: 100%;
max-width: 240px;
margin-top: var(--space-1);
color: var(--muted);
font-size: 11px;
text-align: left;
}
.summary-name input {
height: var(--control-h);
padding: 0 var(--space-2);
border: 1px solid var(--border);
border-radius: var(--radius);
background: color-mix(in srgb, var(--bg) 60%, var(--panel));
color: var(--fg);
font: inherit;
}
.summary-name input:focus {
outline: 1px solid var(--primary);
}
#boardScreen .panel {
max-height: 86dvh;
}
.board-rows {
display: grid;
gap: 4px;
width: 100%;
max-width: 300px;
max-height: 46dvh;
overflow-y: auto;
margin: 0;
font-size: 12px;
text-align: left;
}
.board-rows .ledger-row {
display: flex;
justify-content: space-between;
gap: var(--space-2);
padding: 2px var(--space-2);
border-radius: calc(var(--radius) / 2);
}
.board-rows .ledger-row dt,
.board-rows .ledger-row dd {
margin: 0;
min-width: 0;
}
.board-rows .ledger-row dt {
color: var(--fg);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.board-rows .ledger-row dd {
color: var(--muted);
font-variant-numeric: tabular-nums;
}
.board-rows .ledger-row.own {
background: color-mix(in srgb, var(--primary) 16%, transparent);
}
.board-rows .ledger-row.own dd {
color: var(--fg);
font-weight: 700;
}