/* Choose your bizon: one theme, a nostalgic analog console.
* Type: Jersey 10 (display), Silkscreen (labels), Pixelify Sans (speech, item notes), Monocraft (small text, project text).
* All free to use without credit: Google Fonts OFL, Monocraft OFL.
* Motion: one era only, 8-bit; everything moves in frames (steps), no easing.
*/
:root {
--read: 'IBM Plex Mono', ui-monospace, monospace; /* project captions only, titles and labels stay pixel (Sans option: 'IBM Plex Sans', system-ui, sans-serif) */
/* palette: generated by tools/apply_palette.py */
--n-0: #14170f; --n-1: #1b1f18; --n-2: #232a26; --n-3: #2e3836; --n-4: #3b4744;
--n-5: #4a5343; --n-6: #6f7a63; --n-7: #9aa48b; --n-8: #c4c9b4; --cream-0: #a88d5e;
--cream-1: #cdbd92; --cream-2: #f1dcae; --cream-3: #fff6dc; --rust-0: #3a120c; --rust-1: #4f1c14;
--rust-2: #7b2f22; --rust-3: #b0402e; --rust-4: #e0644c; --amber-0: #5a3a12; --amber-1: #9a5a1e;
--amber-2: #d98a3d; --amber-3: #f0b06a; --gold-0: #8f6d22; --gold-1: #c9a24a; --gold-2: #ecca72;
--gold-3: #fff0c4; --blue-0: #1b3442; --blue-1: #2c5266; --blue-2: #4f86a8; --blue-3: #8fc0d8;
--green-0: #2e4424; --green-1: #4c6e38; --green-2: #6f9a52; --green-3: #a4c97a; --green-4: #d4ecaa;
--plum-0: #2e1c2a; --plum-1: #5a3150; --plum-2: #8e5078; --plum-3: #c27aa0; --brown-0: #2b1d15;
--brown-1: #3e2a1e; --brown-2: #5a3b22; --brown-3: #7a5434;
/* /palette */
--room: var(--n-1);
--case: var(--n-6); --case-l: var(--n-7); --case-d: var(--n-5);
--edge: var(--n-1);
--deep: var(--n-3); --deep-l: var(--n-4);
--scr: var(--blue-1); --scr-d: var(--blue-0);
--cream: var(--cream-2); --cream-d: var(--cream-1); --paper: var(--cream-2);
--ink: var(--n-1); --ink-2: var(--n-5);
--rust: var(--rust-2); --rust-l: var(--rust-3); --rust-d: var(--rust-1);
--amber: var(--amber-2); --amber-l: var(--amber-3); --amber-d: var(--amber-1);
--gold: var(--gold-1); --gold-l: var(--gold-2); --gold-d: var(--gold-0);
--teal: var(--blue-2);
--c-cd: var(--rust-2); --c-ent: var(--gold-1); --c-des: var(--blue-2); --c-cc: var(--green-2); --c-all: var(--gold-2);
/* the same keys when not picked: one step down their own ramp (no mixed in-between tones) */
--c-cd-off: var(--rust-1); --c-ent-off: var(--gold-0); --c-des-off: var(--blue-1); --c-cc-off: var(--green-1); --c-all-off: var(--n-1);
--tc: var(--c-cd);
--display: 'Jersey 10', ui-monospace, monospace;
--label: 'Silkscreen', ui-monospace, monospace;
--talk: 'Pixelify Sans', ui-monospace, monospace; /* speech bubbles and item notes: the console's own face, as it was */
--small: 'Monocraft', 'Pixelify Sans', ui-monospace, monospace; /* small console text */
--text: 'Monocraft', 'Pixelify Sans', system-ui, sans-serif; /* reading text on project pages */
--inset: inset 3px 3px 0 rgba(255, 255, 255, .07), inset -3px -3px 0 rgba(0, 0, 0, .3);
--pad: clamp(12px, 2.5vw, 28px);
}
/* Monocraft (Idrees Hassan, OFL), regular cut: small console text and project text, free to use without credit */
@font-face { font-family: 'Monocraft'; font-weight: 400; src: url('assets/fonts/monocraft.woff') format('woff'), url('assets/fonts/monocraft.ttf') format('truetype'); font-display: swap; }
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body {
min-height: 100vh;
color: var(--cream);
font: 400 16px/1.5 var(--text);
-webkit-font-smoothing: antialiased; font-synthesis: none;
background: radial-gradient(ellipse 80% 60% at 50% 35%, var(--n-2) 0%, var(--room) 75%) fixed, var(--room);
}
/* analog film grain over everything */
body::after {
content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 40; opacity: .09; mix-blend-mode: overlay;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
body.is-paper { color: var(--ink); background: var(--paper); }
/* each project is shown on the page colour of its Behance presentation (set in arcade.js, pageColour) */
.has-bg .w__tools li { background: var(--panel); border-color: var(--rule); box-shadow: none; }
.has-bg .w__meta > div { border-color: var(--rule) !important; }
.has-bg .w__next { border-top-color: var(--rule); }
body.has-bg::before { display: none; }
.has-bg .st__media > img, .has-bg .st__grid img, .has-bg .st__row img, .has-bg .st__vid { background: var(--panel); }
/* a slide cut out on transparency sits directly on the page colour */
.st__row--clear img, .has-bg .st__row--clear img { background: none; }
.is-ink .wbar__back, .is-ink .wbar__nav a, .is-ink .wbar__st, .is-ink .player::after, .is-ink .keys kbd { color: var(--n-1); }
.is-ink .player:focus-visible .sprite { outline-color: var(--ink); }
a { color: inherit; }
img { display: block; max-width: 100%; height: auto; }
.px { font-family: var(--label); font-weight: 400; letter-spacing: .02em; }
.pxl { image-rendering: pixelated; shape-rendering: crispEdges; display: block; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 60; background: var(--cream); color: var(--ink); padding: 8px 12px; font: 400 12px var(--label); }
.skip:focus { top: 12px; }
:focus-visible { outline: 3px solid var(--cream); outline-offset: 3px; }
.is-paper :focus-visible { outline-color: var(--ink); }
[hidden] { display: none !important; }
/* the bizon wordmark: a mask, so it takes the colour of the text around it */
.logo {
display: inline-block; height: .8em; aspect-ratio: 447 / 135; vertical-align: -.06em; margin: 0 .04em;
background: currentColor; -webkit-mask: url(img/bizon-logo.png) center / contain no-repeat; mask: url(img/bizon-logo.png) center / contain no-repeat;
}
.mod__lbl .logo, .keys .logo, .key .logo, .guide .logo { height: 1.05em; vertical-align: -.2em; }
/* ---------- motion vocabulary (8-bit) ---------- */
.bob { animation: bob .8s steps(2) infinite; }
@keyframes bob { 50% { transform: translateY(-4px); } }
@keyframes jump { 50% { transform: translateY(-14px); } }
@keyframes blink { 50% { opacity: 0; } }
@keyframes pop { from { transform: scale(.92); opacity: 0; } }
.eye { animation: blink-eye 4.2s steps(1) infinite; animation-delay: var(--bd, 0s); }
@keyframes blink-eye { 0%, 94% { fill: #120F18; } 95%, 100% { fill: #F2C29B; } }
.qm { display: block; font-family: var(--display); line-height: 1; color: var(--cream); }
/* ---------- building blocks ---------- */
.screen { max-width: 1180px; margin: 0 auto; padding: 22px var(--pad) 72px; }
.console {
width: 100%; padding: 16px; background: var(--case); border: 4px solid var(--edge);
box-shadow: inset 4px 4px 0 var(--case-l), inset -4px -4px 0 var(--case-d), 0 12px 0 rgba(27, 31, 24, .35);
clip-path: polygon(0 10px, 10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px));
}
/* the chamfered corners are cut with clip-path, which also cuts the border: draw the stroke back along each cut */
.console { position: relative; }
.console::after {
content: ""; position: absolute; inset: -4px; pointer-events: none; z-index: 2;
background:
linear-gradient(135deg, var(--edge) 0 11.1px, transparent 11.1px) left top / 16px 16px no-repeat,
linear-gradient(225deg, var(--edge) 0 11.1px, transparent 11.1px) right top / 16px 16px no-repeat,
linear-gradient(315deg, var(--edge) 0 11.1px, transparent 11.1px) right bottom / 16px 16px no-repeat,
linear-gradient(45deg, var(--edge) 0 11.1px, transparent 11.1px) left bottom / 16px 16px no-repeat;
}
.mod { background: var(--deep); border: 3px solid var(--edge); box-shadow: var(--inset); color: var(--cream); padding: 10px 12px; min-width: 0; }
.mod__lbl { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 11px; color: var(--gold); }
/* raised analog key */
.key, .btn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; text-decoration: none;
font: 400 12px var(--label); letter-spacing: .02em; color: var(--ink); padding: 11px 14px;
background: var(--gold); border: 3px solid var(--edge); box-shadow: inset 3px 3px 0 var(--gold-l), inset -3px -3px 0 var(--gold-d);
}
.key:active, .btn:active { box-shadow: inset -3px -3px 0 var(--gold-l), inset 3px 3px 0 var(--gold-d); transform: translateY(1px); }
.key--amber { background: var(--amber); box-shadow: inset 3px 3px 0 var(--amber-l), inset -3px -3px 0 var(--amber-d); }
.key--amber:active { box-shadow: inset -3px -3px 0 var(--amber-l), inset 3px 3px 0 var(--amber-d); }
/* change character: a cream key, apart from every character colour and from the coin's brown */
.key--cream { color: var(--n-1); background: var(--cream-2); box-shadow: inset 3px 3px 0 var(--cream-3), inset -3px -3px 0 var(--cream-0); }
.key--cream:active { box-shadow: inset -3px -3px 0 var(--cream-3), inset 3px 3px 0 var(--cream-0); }
.key--rust, .btn--hot { background: var(--rust); color: var(--cream); box-shadow: inset 3px 3px 0 var(--rust-l), inset -3px -3px 0 var(--rust-d); }
.key--rust:active, .btn--hot:active { box-shadow: inset -3px -3px 0 var(--rust-l), inset 3px 3px 0 var(--rust-d); }
.sound {
position: fixed; top: 14px; right: 14px; z-index: 45; width: 44px; height: 44px; display: grid; place-items: center; cursor: pointer;
background: var(--gold); border: 3px solid var(--edge); box-shadow: inset 3px 3px 0 var(--gold-l), inset -3px -3px 0 var(--gold-d);
}
.sound .pxl rect { fill: var(--ink); }
.sound:active { box-shadow: inset -3px -3px 0 var(--gold-l), inset 3px 3px 0 var(--gold-d); }
.flash { position: fixed; inset: 0; background: var(--cream); opacity: 0; pointer-events: none; z-index: 50; }
.flash.go { animation: flash .45s steps(3); }
@keyframes flash { 0% { opacity: .8; } 100% { opacity: 0; } }
/* ---------- console pieces (select + play) ---------- */
.lcd { display: flex; justify-content: space-between; align-items: center; font-size: 12px; background: var(--n-2); color: var(--green-3); }
.lcd b { font-weight: 400; color: var(--green-4); }
.lives { display: flex; gap: 4px; }
.crt-mod { display: flex; flex-direction: column; }
.crt {
position: relative; flex: 1; min-height: 280px; overflow: hidden;
background-color: var(--scr); border: 3px solid var(--edge); box-shadow: inset 0 0 0 3px var(--scr-d), inset 0 0 40px rgba(27, 31, 24, .45);
background-image: repeating-linear-gradient(0deg, rgba(27, 31, 24, .14) 0 1px, transparent 1px 3px),
linear-gradient(rgba(255, 246, 220, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 246, 220, .05) 1px, transparent 1px);
background-size: auto, 16px 16px, 16px 16px;
}
/* sized by the screen's width so the whole figure, prop included, always fits across; the waist down falls off the bottom */
.crt .pxl, .crt .sprite { position: absolute; left: -2%; top: 3%; width: 104%; height: auto !important; margin: 0; z-index: 1; }
.crt .head { position: absolute; left: 0; right: 0; top: 4%; height: 92%; width: auto; margin: 0 auto; z-index: 1; image-rendering: pixelated; }
.crt.picking .pxl, .crt.picking .sprite, .crt.picking .head { animation: jump .3s steps(3) 2; }
.sprite { display: block; width: auto; max-width: none; image-rendering: auto; user-select: none; -webkit-user-drag: none; }
/* a new bizon is scanned onto the tube from the top, bright, then settles */
.scan-in { animation: scan-in .75s steps(8) both; }
.scan-in.bob { animation: scan-in .75s steps(8) both, bob .8s steps(2) infinite; }
.scan-in.boss { animation: aura 1s steps(2) infinite, scan-in .75s steps(8) both, bob .8s steps(2) infinite; }
@keyframes scan-in {
0% { clip-path: inset(0 0 100% 0); filter: brightness(2.4) sepia(1) saturate(.6); }
70% { clip-path: inset(0 0 0 0); filter: brightness(1.5) sepia(.5); }
100% { clip-path: inset(0); filter: none; }
}
/* portrait-animate: each pixel lands in the bizon colour first, then settles to its own */
.mat rect { animation: px-in .7s both; animation-timing-function: steps(1, end); }
@keyframes px-in { 0% { opacity: 0; } 1% { opacity: 1; fill: var(--tc); } 60% { opacity: 1; fill: var(--tc); } }
/* dialog box: RPG style, along the bottom of the screen, never over a face */
.console, .ic { --text: var(--small); } /* small console text */
.console, .ic { font-family: var(--text); } /* on the console the small text stays chunky; DotGothic16 is for reading pages */
.dialog {
position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 4; min-height: 52px; margin: 0; padding: 10px 30px 10px 12px;
font: 400 15px/1.4 var(--small); color: var(--ink); background: var(--cream);
border: 3px solid var(--edge); box-shadow: inset 0 0 0 2px var(--cream-3), 3px 3px 0 rgba(27, 31, 24, .35);
opacity: 0; visibility: hidden;
}
.dialog.on { opacity: 1; visibility: visible; animation: pop .18s steps(2); }
.dialog.has-who { margin-top: 14px; }
.dialog__who { position: absolute; left: 8px; top: -14px; font-size: 10px; color: var(--cream); background: var(--tc); border: 2px solid var(--edge); padding: 2px 6px; display: none; }
.dialog.has-who .dialog__who { display: block; color: var(--ink); }
.dialog__more { position: absolute; right: 9px; bottom: 6px; font-size: 10px; font-style: normal; color: var(--rust); opacity: 0; }
.dialog.done .dialog__more { opacity: 1; animation: blink .7s steps(1) infinite; }
.mod__lbl .meta { color: var(--cream-d); }
.mod__lbl > span { white-space: nowrap; }
.crt__name { height: 40px; display: flex; align-items: center; margin: 8px 0 0; font: 400 40px/1 var(--display); color: var(--cream); letter-spacing: .02em; white-space: nowrap; overflow: hidden; }
.meters .mod__lbl { margin-bottom: 6px; }
.meters .mod__lbl .meta b { font-weight: 400; color: var(--gold-l); }
.carts { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
/* an inventory slot: cream plastic rim, a recessed dark well, the item lit from above */
.cart {
position: relative; display: block; width: 100%; padding: 4px; cursor: pointer; font: inherit;
background: var(--cream-1); border: 3px solid var(--edge); box-shadow: inset 2px 2px 0 var(--cream-2), inset -2px -2px 0 var(--cream-0);
}
.cart__win {
display: grid; place-items: center; aspect-ratio: 1 / 1; width: 100%;
background: var(--n-3);
border: 2px solid var(--edge); box-shadow: inset 0 3px 0 rgba(27, 31, 24, .3);
}
.cart__win svg { width: 64px; height: 64px; }
.cart:hover .cart__win, .cart:focus-visible .cart__win { background: var(--n-4); }
/* the item's note: a tooltip on the slot itself */
.cart::before {
content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%); z-index: 6;
width: max-content; max-width: 220px; padding: 7px 10px; font: 400 14px/1.35 var(--small); text-align: left; white-space: normal;
color: var(--ink); background: var(--cream); border: 3px solid var(--edge); box-shadow: 3px 3px 0 rgba(27, 31, 24, .35);
opacity: 0; visibility: hidden; pointer-events: none;
}
.cart:hover::before, .cart:focus-visible::before { opacity: 1; visibility: visible; }
/* keep the note inside the console: the left half opens to the right, the right half to the left */
.carts .cart:nth-child(-n + 2)::before { left: 0; transform: none; }
.carts .cart:nth-child(n + 4)::before { left: auto; right: 0; transform: none; }
.is-powering .cart::before { display: none; }
.cart:hover .cart__win svg, .cart:focus-visible .cart__win svg { transform: translateY(-3px); }
.cart:active { box-shadow: inset -2px -2px 0 var(--cream-2), inset 2px 2px 0 var(--cream-0); }
/* P keys */
.keys5 { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 5px; flex: 1; min-width: 0; }
.key5 {
display: grid; place-items: center; min-width: 0; height: 42px; padding: 0; cursor: pointer; text-decoration: none;
font: 400 11px var(--label);
background: var(--c-off); color: var(--cream-1); border: 3px solid var(--edge);
box-shadow: inset 2px 2px 0 rgba(255, 246, 220, .25), inset -2px -2px 0 rgba(27, 31, 24, .3);
}
.key5:hover { background: var(--c); color: var(--n-1); }
.key5.on { background: var(--c); box-shadow: inset -2px -2px 0 rgba(255, 246, 220, .3), inset 2px 2px 0 rgba(27, 31, 24, .35), 0 0 0 2px var(--cream); }
.key5.on { color: var(--n-1); }
.key5[style*="c-cd)"]:hover, .key5[style*="c-cd)"].on { color: var(--cream-3); }
/* the boss key: black with a gold frame and gold letters, not another gold key */
.key5[style*="c-all)"] { color: var(--gold-2); box-shadow: inset 0 0 0 2px var(--gold-0); }
.key5[style*="c-all)"]:hover, .key5[style*="c-all)"].on { background: var(--n-1); color: var(--gold-2); }
.key5[style*="c-all)"].on { box-shadow: inset 0 0 0 2px var(--gold-1), 0 0 0 2px var(--gold-2); }
/* ---------- select: console panel ---------- */
.sel-screen { padding-top: 22px; padding-bottom: 22px; max-width: 1100px; display: flex; flex-direction: column; justify-content: center; min-height: calc(100vh - 50px); }
.guide { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 26px; list-style: none; margin: 0 0 14px; padding: 0; font-size: 12px; color: var(--cream-d); }
.guide li { display: flex; align-items: center; gap: 9px; white-space: nowrap; }
.guide li + li::before { content: "▶"; margin-right: 17px; color: var(--gold); }
.guide b { display: grid; place-items: center; width: 22px; height: 22px; font-weight: 400; color: var(--ink); background: var(--gold); border: 2px solid var(--edge); }
/* the steps light up in turn, 1 > 2 > 3, so the eye follows the order instead of two arrows blinking on their own */
.guide b, .guide li + li::before { animation: 3.6s steps(1) infinite; }
.guide b { animation-name: g-step; }
.guide li + li::before { animation-name: g-arrow; }
.guide li:nth-child(2)::before { animation-delay: -2.6s; }
.guide li:nth-child(2) b { animation-delay: -2.4s; }
.guide li:nth-child(3)::before { animation-delay: -1.4s; }
.guide li:nth-child(3) b { animation-delay: -1.2s; }
@keyframes g-step { 0% { opacity: 1; box-shadow: 0 0 0 2px var(--gold); } 33%, 100% { opacity: .45; box-shadow: none; } }
@keyframes g-arrow { 0% { opacity: 1; } 11%, 100% { opacity: .25; } }
.sel-screen .console { display: grid; grid-template-columns: minmax(270px, 37%) minmax(0, 1fr); gap: 14px; }
.con-left, .con-right { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.crt-mod { flex: 1; }
.pad { display: flex; align-items: center; gap: 8px; }
.knob {
flex: none; width: 42px; height: 42px; padding: 0; cursor: pointer; border: 0; font-size: 0; color: transparent;
background: none center / 100% 100% no-repeat; image-rendering: pixelated;
}
/* the knobs are drawn as 14x14 pixel art (3px a pixel): round dark rim, lit top left, a pixel arrow; pressed swaps the light */
#carPrev { background-image: url("data:image/svg+xml,"); }
#carPrev:hover { background-image: url("data:image/svg+xml,"); }
#carPrev:active { background-image: url("data:image/svg+xml,"); }
#carNext { background-image: url("data:image/svg+xml,"); }
#carNext:hover { background-image: url("data:image/svg+xml,"); }
#carNext:active { background-image: url("data:image/svg+xml,"); }
.bigbtn {
position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; width: 100%; cursor: pointer;
padding: 16px; color: var(--cream); background: var(--rust); border: 4px solid var(--edge);
box-shadow: inset 4px 4px 0 var(--rust-l), inset -4px -4px 0 var(--rust-d), 0 0 0 3px var(--case-d);
}
.bigbtn__t { font: 400 clamp(48px, 5.6vw, 72px)/.85 var(--display); letter-spacing: .04em; text-transform: uppercase; text-shadow: 3px 3px 0 var(--rust-0); }
.bigbtn__s { font-size: 11px; color: var(--gold-l); white-space: nowrap; }
.bigbtn:active { box-shadow: inset -4px -4px 0 var(--rust-l), inset 4px 4px 0 var(--rust-d), 0 0 0 3px var(--case-d); }
.bigbtn.on::before, .bigbtn.on::after { content: "▶"; position: absolute; top: 50%; margin-top: -10px; font-size: 16px; animation: blink .8s steps(1) infinite; }
.bigbtn.on::before { left: 16px; }
.bigbtn.on::after { content: "◀"; right: 16px; }
/* power up: the console's green, so the gold of Powered up reads as the upgrade */
/* Power up is a screwed-on steel plate: 8-bit brushed metal (2px grain lines) with two hard glints, in the neutral ramp */
.bigbtn--alt { color: var(--n-1); padding: 12px;
background: repeating-linear-gradient(180deg, transparent 0 4px, rgba(27, 31, 24, .09) 4px 6px),
linear-gradient(115deg, transparent 22%, rgba(255, 246, 220, .2) 22% 30%, transparent 30% 35%, rgba(255, 246, 220, .14) 35% 38%, transparent 38%),
var(--n-7);
box-shadow: inset 4px 4px 0 var(--n-8), inset -4px -4px 0 var(--n-5), 0 0 0 3px var(--case-d); }
.bigbtn--alt .bigbtn__t { font-size: clamp(30px, 2.8vw, 38px); text-shadow: 2px 2px 0 var(--n-8); }
.bigbtn--alt { position: relative; overflow: visible; }
.sel-screen .row3 .col { container-type: inline-size; }
#no .bigbtn__t { white-space: nowrap; }
/* powered up: a gold plate that glows and catches a shine, not a key that asks to be pressed */
#no.is-max { color: var(--n-1); cursor: default; background: linear-gradient(110deg, transparent 38%, rgba(255, 246, 220, .6) 46%, rgba(255, 246, 220, .6) 52%, transparent 60%) 0 0 / 300% 100% no-repeat, var(--gold); box-shadow: inset 4px 4px 0 var(--gold-l), inset -4px -4px 0 var(--gold-d), 0 0 0 3px var(--case-d); animation: plate-glow 1.2s steps(2) infinite, plate-shine 2.8s steps(14) infinite; }
#no.is-max:active { box-shadow: inset 4px 4px 0 var(--gold-l), inset -4px -4px 0 var(--gold-d), 0 0 0 3px var(--case-d); }
#no.is-max .bigbtn__t { font-size: min(clamp(30px, 2.8vw, 38px), calc((100cqi - 36px) / 5.4)); text-shadow: 2px 2px 0 rgba(255, 246, 220, .45); }
#no.is-max .bigbtn__s { color: var(--amber-0); }
#no.is-max.flare { animation: plate-glow 1.2s steps(2) infinite, plate-shine 2.8s steps(14) infinite, zap .8s steps(1); }
@keyframes plate-glow { 0%, 100% { filter: none; } 50% { filter: brightness(1.12) drop-shadow(0 0 8px rgba(236, 202, 114, .85)); } }
@keyframes plate-shine { 0% { background-position: 100% 0; } 45%, 100% { background-position: -50% 0; } }
.bigbtn--alt.zap { animation: zap .8s steps(1); }
/* the arcs: two bolts racing round the key's frame in opposite directions */
.arc { position: absolute; left: -10px; top: -10px; z-index: 2; overflow: visible; pointer-events: none; }
.arc path { fill: none; stroke: var(--cream-3); stroke-width: 3; stroke-linejoin: miter; stroke-dasharray: 18 82; shape-rendering: crispEdges;
filter: drop-shadow(0 0 2px var(--gold-2)) drop-shadow(0 0 6px rgba(217, 138, 61, .85)); animation: arc-a .8s steps(14) forwards; }
.arc .arc__b { stroke-dasharray: 12 88; animation-name: arc-b; }
@keyframes arc-a { 0% { stroke-dashoffset: 0; opacity: 1; } 50% { opacity: .55; } 60% { opacity: 1; } 100% { stroke-dashoffset: -100; opacity: 0; } }
@keyframes arc-b { 0% { stroke-dashoffset: 50; opacity: 1; } 40% { opacity: .5; } 55% { opacity: 1; } 100% { stroke-dashoffset: 150; opacity: 0; } }
@keyframes zap { 0%, 30%, 60% { filter: brightness(1.35) saturate(1.15); box-shadow: inset 4px 4px 0 var(--gold-3), inset -4px -4px 0 var(--n-5), 0 0 0 3px var(--gold-l), 0 0 16px 3px rgba(240, 176, 106, .7); }
15%, 45%, 100% { filter: none; } }
.bigbtn--alt:active { box-shadow: inset -4px -4px 0 var(--n-8), inset 4px 4px 0 var(--n-5), 0 0 0 3px var(--case-d); }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.chip { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.chip b { display: block; font: 400 26px/1 var(--display); color: var(--cream); letter-spacing: .02em; }
.chip small { display: block; margin-top: 4px; font: 400 14px/1.1 var(--text); color: var(--cream-d); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chip__face { flex: none; width: 54px; height: 54px; display: grid; place-items: start center; overflow: hidden; background: var(--scr); border: 2px solid var(--edge); }
.chip__face svg, .chip__face .sprite { margin-top: 3px; }
.chip__txt { min-width: 0; flex: 1; }
.chip b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chip__ico { flex: none; width: 58px; height: 58px; display: grid; place-items: center; background: var(--brown-1); border: 2px solid var(--edge); }
.chip--coin { background: var(--brown-2); box-shadow: inset 4px 4px 0 var(--brown-3), inset -4px -4px 0 var(--brown-1), 0 0 0 3px var(--case-d); }
.chip--coin:active { box-shadow: inset -4px -4px 0 var(--brown-3), inset 4px 4px 0 var(--brown-1), 0 0 0 3px var(--case-d); }
.chip--coin:hover b { color: var(--gold-l); }
.lvbar { display: block; height: 9px; margin-top: 7px; background: var(--n-1); border: 2px solid var(--edge); }
.lvbar i { display: block; height: 100%; background: var(--tc); }
.row3 { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 12px; }
.row3 .col { display: flex; flex-direction: column; gap: 12px; }
.counter { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px 14px; align-items: center; grid-template-rows: auto auto; padding: 15px; background: var(--cream-2); color: var(--ink); flex: none; } /* sized to its content: 15px all round like the chips */
.counter__ico { width: 84px; height: 84px; display: grid; place-items: center; background: var(--deep); border: 3px solid var(--edge); box-shadow: inset 0 0 0 2px rgba(27, 31, 24, .25); }
.counter__txt { display: flex; flex-direction: column; justify-content: space-between; height: 84px; } /* label on the icon's top edge, number on its bottom edge */
.counter__txt small { font-size: 12px; color: var(--ink-2); }
.counter__txt b { font: 400 min(108px, 30cqi)/.62 var(--display); } /* shrinks with a narrow column (tablets) */
.counter__pips { grid-column: 1 / -1; display: flex; gap: 4px; }
.counter__pips i { flex: 1; height: 18px; background: rgba(27, 31, 24, .1); border: 2px solid rgba(27, 31, 24, .3); clip-path: polygon(0 0, calc(100% - 4px) 0, 100% 4px, 100% 100%, 0 100%); }
.counter__pips i.f { background: var(--tc); border-color: var(--edge); }
/* ---------- power up: enchanted inventory, charging meters ---------- */
.bigbtn--alt .bigbtn__s { color: var(--n-3); }
.is-powering .cart { animation: charge .5s steps(2) infinite, slot-glow .5s steps(2) infinite; animation-delay: calc(var(--i) * 80ms); }
/* the item slots light up and carry the enchant glint while charging */
@keyframes slot-glow { 50% { box-shadow: inset 2px 2px 0 var(--gold-3), inset -2px -2px 0 var(--gold-d), 0 0 0 3px var(--gold-l), 0 0 18px 4px rgba(194, 122, 160, .55); } }
.is-powering .cart__win { background: linear-gradient(115deg, var(--n-3) 28%, rgba(194, 122, 160, .6) 42%, rgba(255, 240, 196, .75) 50%, rgba(194, 122, 160, .6) 58%, var(--n-3) 72%) 0 0 / 320% 100%; animation: glint .9s steps(9) infinite; }
@keyframes glint { from { background-position: 100% 0; } to { background-position: -100% 0; } }
/* the whole select screen is enchanted: a violet glint sweeps the console, like an enchanted item */
.sel-screen .console::before { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0;
background: linear-gradient(120deg, transparent 30%, rgba(194, 122, 160, .32) 42%, rgba(255, 240, 196, .38) 50%, rgba(194, 122, 160, .32) 58%, transparent 70%) 0 0 / 260% 100%; mix-blend-mode: screen; }
.is-powering .console::before { opacity: 1; animation: glint 1.1s steps(12) infinite; }
/* power down: the tube collapses to a line and back */
.is-powering .cart::after { content: "✦"; position: absolute; top: -11px; right: -7px; font-size: 16px; color: var(--gold-l); text-shadow: 2px 2px 0 var(--edge); animation: blink .4s steps(1) infinite; animation-delay: calc(var(--i) * 90ms); }
.cart.lit { background: var(--gold-l); box-shadow: inset 3px 3px 0 var(--gold-3), inset -3px -3px 0 var(--gold-d), 0 0 0 3px var(--gold); }
.cart.lit .cart__win { box-shadow: inset 0 0 0 2px var(--gold); }
@keyframes charge { 50% { transform: translateY(-3px); } }
.is-powering .meter__bar i { animation: meter-charge .9s steps(1) 2; animation-delay: calc(var(--i) * 70ms); }
@keyframes meter-charge { 0% { background: var(--n-4); } 35% { background: var(--gold-l); } 70% { background: var(--sc); } }
.is-powering .crt { animation: crt-pulse .3s steps(2) 4; }
@keyframes crt-pulse { 50% { filter: brightness(1.35) saturate(1.2); } }
/* the transformation */
.is-powering .crt { animation: shake .12s steps(2) infinite; }
@keyframes shake { 50% { transform: translate(3px, -2px); } }
.meter__bar i.new { animation: seg-in .3s steps(2); }
@keyframes seg-in { 0% { background: var(--cream-3); } }
.warn {
position: absolute; left: 0; right: 0; top: 50%; z-index: 3; margin: -26px 0 0; padding: 6px 0;
font: 400 44px/1 var(--display); letter-spacing: .12em; text-transform: uppercase; text-align: center; color: var(--cream-3);
background: repeating-linear-gradient(-45deg, var(--rust) 0 12px, var(--n-1) 12px 24px);
border-top: 3px solid var(--edge); border-bottom: 3px solid var(--edge); text-shadow: 3px 3px 0 var(--edge);
animation: blink .3s steps(1) infinite;
}
/* lightning on the tube */
.bolts { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; pointer-events: none; fill: var(--cream-3); filter: drop-shadow(0 0 2px var(--gold-2)) drop-shadow(0 0 6px rgba(236, 202, 114, .8)); }
.crt.struck { background-color: var(--blue-2); }
.sprite.charging { animation: charging .22s steps(2) infinite !important; }
@keyframes charging { 0% { filter: brightness(0) invert(1); } 100% { filter: none; } }
/* stats glow with the figure while charging and once the boss is here */
.is-powering .meter__bar i.f, .is-boss .meter__bar i.f { animation: bar-glow 1s steps(2) infinite; animation-delay: calc(var(--i) * 60ms); }
@keyframes bar-glow { 0%, 100% { box-shadow: 0 0 3px rgba(236, 202, 114, .6); } 50% { box-shadow: 0 0 8px 1px rgba(241, 220, 174, .95); background: var(--gold-2); } }
.is-boss .meter__bar { border-color: var(--gold-0); }
/* the final boss: a golden aura that pulses in frames */
.boss { animation: bob .8s steps(2) infinite, aura 1s steps(2) infinite; }
@keyframes aura { 0%, 100% { filter: drop-shadow(0 0 3px rgba(201, 162, 74, .7)); } 50% { filter: drop-shadow(0 0 9px rgba(236, 202, 114, .95)); } }
.is-boss .crt { box-shadow: inset 0 0 0 3px var(--scr-d), inset 0 0 60px rgba(201, 162, 74, .35); }
/* ---------- play: same console, works as cartridges ---------- */
.playbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
/* the sound key docked into a top bar (set in arcade.js): an ordinary key at the end of the row */
.sound.docked { position: static; flex: none; order: 9; }
.wbar .sound.docked { margin-left: 0; }
.playbar__btns { display: flex; gap: 8px; flex-wrap: wrap; }
.who { display: flex; align-items: center; gap: 12px; flex: 1 1 260px; min-width: 0; margin: 0; }
.who__p { flex: none; font: 400 12px var(--label); background: var(--tc); color: var(--tc-ink, var(--ink)); border: 3px solid var(--edge); padding: 6px 8px; }
.who__name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font: 400 clamp(32px, 3.6vw, 46px)/1 var(--display); color: var(--ink); letter-spacing: .02em; }
.mini { display: flex; gap: 8px; }
.mini .key5 { height: 40px; min-width: 46px; padding: 0 10px; }
.play { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 14px; align-items: start; }
.side { display: flex; flex-direction: column; gap: 12px; position: sticky; top: 16px; }
.side .crt { min-height: 270px; }
.side .dialog { font-size: 16px; }
.side .carts { gap: 6px; }
.side .cart { padding: 3px; }
.side .cart__win svg { width: 34px; height: 34px; }
.inv .mod__lbl { margin-bottom: 10px; }
.side .meters { padding-bottom: 15px; }
.wl #count { color: var(--cream-d); }
.tagbar { display: flex; flex-wrap: wrap; gap: 6px; margin: -2px 0 12px; }
.tag { display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px; cursor: pointer; font-size: 10px; color: var(--cream-d);
background: var(--n-2); border: 2px solid var(--edge); box-shadow: inset 2px 2px 0 rgba(255, 246, 220, .06), inset -2px -2px 0 rgba(27, 31, 24, .3); }
.tag b { font-weight: 400; color: var(--gold); }
.tag:hover { color: var(--cream); }
.tag[aria-pressed="true"] { color: var(--ink); background: var(--gold); box-shadow: inset 2px 2px 0 var(--gold-l), inset -2px -2px 0 var(--gold-d); }
.tag[aria-pressed="true"] b { color: var(--ink); }
.tag:focus-visible { outline: 2px solid var(--cream); outline-offset: 2px; }
.works__none { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0; padding: 28px 12px; font-size: 11px; color: var(--cream-d); }
.works { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.wk {
position: relative; display: block; text-decoration: none; color: var(--ink); padding: 12px 12px 0;
background: var(--n-7); border: 3px solid var(--edge); box-shadow: inset 3px 3px 0 var(--n-8), inset -3px -3px 0 var(--n-6);
clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% calc(100% + 6px), 0 calc(100% + 6px));
transition: translate .12s steps(2);
}
/* an invisible strip under the card keeps it hovered while it is lifted, so the bottom edge never flickers */
.wk::before { content: ""; position: absolute; left: -3px; right: -3px; top: calc(100% + 3px); height: 6px; }
.wk::after {
content: ""; position: absolute; top: -3px; right: -3px; width: 18px; height: 18px; pointer-events: none;
background: linear-gradient(to bottom left, var(--edge) 0 15.7px, transparent 15.7px);
}
/* dealing the cards in is its own animation (staggered by --d); the hover lift is a separate translate with no delay, so it starts the moment the pointer arrives and drops the moment it leaves */
.wk.in { animation: wk-in .2s steps(2) backwards; animation-delay: var(--d, 0ms); }
@keyframes wk-in { from { opacity: 0; transform: translateY(12px); } }
.wk:hover, .wk:focus-visible { translate: 0 -4px; }
/* the ring sits inside: the corner-cut clip-path would cut an outer one down to a stray line under the card */
.wk:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--cream); }
.wk__cover { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--scr); border: 3px solid var(--edge); }
.wk__cover img, .wk__cover video { display: block; width: 100%; height: 100%; object-fit: cover; }
.w__cover--video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* an animated cover: the 16:9 film is scaled up to fill the 16:10 frame, and never takes the click */
.wk__cover { position: relative; }
.wk__cover iframe { position: absolute; top: 0; left: 50%; width: 112%; height: 100%; transform: translateX(-50%); border: 0; pointer-events: none; opacity: 0; transition: opacity .3s steps(3); }
.wk__tag { position: absolute; top: 20px; left: 20px; font-size: 10px; color: var(--cream); background: var(--rust); border: 2px solid var(--edge); padding: 3px 6px; }
.wk--made .wk__tag { color: var(--ink); background: var(--gold); }
.wk__no { position: absolute; top: 20px; right: 28px; font-size: 10px; color: var(--ink); background: var(--cream); border: 2px solid var(--edge); padding: 3px 6px; }
.wk__foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 12px -12px 0; padding: 10px 12px 12px; background: var(--cream); border-top: 3px solid var(--edge); }
.wk { min-width: 0; }
.wk__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wk__name { font: 400 28px/1 var(--display); letter-spacing: .01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wk__meta { font: 400 14px var(--small); color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wk__by { display: flex; gap: 2px; flex: none; }
/* ---------- item card (small works) ---------- */
.ic { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; padding: 24px 16px; background: rgba(20, 23, 15, .84); }
.ic__box {
/* a fixed frame that always fits the screen: top bar, info and buttons stay put, only the image pane scrolls */
display: flex; flex-direction: column; height: min(calc(100dvh - 48px), 860px); margin: auto;
width: min(560px, 100%); overflow: hidden; padding: 14px; animation: pop .25s steps(3);
background: var(--case); border: 4px solid var(--edge); box-shadow: inset 4px 4px 0 var(--case-l), inset -4px -4px 0 var(--case-d), 0 12px 0 rgba(27, 31, 24, .4);
}
.coin__box { width: min(492px, 100%); /* two link columns wide enough for the whole email address */ margin: auto; padding: 14px; display: grid; gap: 12px; animation: pop .25s steps(3);
background: var(--case); border: 4px solid var(--edge); box-shadow: inset 4px 4px 0 var(--case-l), inset -4px -4px 0 var(--case-d), 0 12px 0 rgba(27, 31, 24, .4); }
.coin__box .ic__top { margin: 0; }
.coin__stage { position: relative; display: grid; place-items: center; height: 190px; background: var(--scr); border: 3px solid var(--edge);
box-shadow: inset 0 0 0 3px var(--scr-d), inset 0 0 40px rgba(27, 31, 24, .45); background-image: repeating-linear-gradient(0deg, rgba(27, 31, 24, .14) 0 1px, transparent 1px 3px); }
/* the coin turns like an arcade sprite: it narrows to its edge and flips, in eight steps, and bobs */
.coin__spin { display: block; width: 144px; height: 144px; animation: coin-bob 2.2s steps(8) infinite alternate; }
.coin__spin svg { display: none; width: 144px; height: 144px; }
.coin__spin svg.on { display: block; }
@keyframes coin-bob { from { translate: 0 4px; } to { translate: 0 -8px; } }
.coin__shadow { position: absolute; bottom: 22px; width: 70px; height: 8px; background: rgba(27, 31, 24, .35); }
.coin__t { margin: 0; font: 400 46px/.9 var(--display); color: var(--ink); text-align: center; }
.coin__p { margin: 0; font: 400 16px/1.45 var(--text); color: var(--ink); text-align: center; }
.coin__links { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.coin__link:first-child { grid-column: 1 / -1; } /* email on its own row, the four networks two by two under it */
.coin__link { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; justify-content: stretch; text-align: left; gap: 10px; padding: 9px 10px; min-width: 0; }
.coin__ico { display: grid; place-items: center; width: 40px; height: 40px; background: rgba(27, 31, 24, .12); border: 2px solid rgba(27, 31, 24, .35); }
.coin__txt { display: grid; gap: 4px; min-width: 0; }
.coin__txt > span { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 480px) { .coin__links { grid-template-columns: 1fr; } .coin__stage { height: 170px; } }
.coin__link small { font: 500 13px 'Pixelify Sans', ui-monospace, monospace; letter-spacing: 0; text-transform: none; color: var(--amber-0); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .coin__spin { animation: none; } }
.ic__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; font-size: 11px; color: var(--ink); }
.ic__x { font: 400 12px/1 var(--label); text-decoration: none; color: var(--ink); background: var(--cream); border: 3px solid var(--edge); padding: 3px 7px; }
.ic__cover { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
/* the whole presentation sheet, never cropped: a long one scrolls inside the card */
.ic__top, .ic__body, .ic__nav { flex: none; }
.ic__media { position: relative; flex: 1 1 auto; min-height: 140px; display: flex; }
.ic__full { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; background: var(--scr-d); border: 3px solid var(--edge); scrollbar-width: thin; scrollbar-color: var(--gold) var(--deep); }
.ic__full { display: flex; flex-direction: column; justify-content: safe center; }
.ic__full img { flex: none; display: block; width: 100%; height: auto; }
.ic__full:focus-visible { outline: 3px solid var(--cream); outline-offset: 2px; }
/* scroll hint: two pixel chevrons blinking over the bottom of the image */
.ic__hint { position: absolute; right: 12px; bottom: 12px; display: grid; justify-items: center; gap: 2px; padding: 6px 9px;
background: rgba(27, 31, 24, .82); border: 2px solid var(--edge); pointer-events: none; animation: blink 1s steps(1) infinite; }
.ic__hint[hidden] { display: none; }
.ic__hint i { width: 14px; height: 8px; background: var(--cream); clip-path: polygon(0 0, 50% 100%, 100% 0, 75% 0, 50% 50%, 25% 0); }
@media (prefers-reduced-motion: reduce) { .ic__hint { animation: none; } }
.ic__body { background: var(--deep); border: 3px solid var(--edge); box-shadow: var(--inset); padding: 12px 14px; margin-top: 12px; }
.ic__tag { margin: 0 0 6px; font-size: 10px; color: var(--gold); line-height: 1.6; }
.ic__title { margin: 0 0 8px; font: 400 46px/.9 var(--display); color: var(--cream); letter-spacing: .01em; }
.ic__desc { margin: 0 0 12px; font: 400 16px/1.5 var(--text); color: var(--cream-d); }
.ic__tools { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.ic__tools li { display: flex; align-items: center; gap: 6px; font: 400 11px var(--label); color: var(--ink); background: var(--cream); border: 2px solid var(--edge); padding: 3px 8px 3px 3px; }
.ic__nav { display: grid; grid-template-columns: minmax(46px, 1fr) minmax(0, auto) minmax(46px, 1fr); gap: 8px; margin-top: 12px; }
.ic__nav .btn { min-width: 0; white-space: nowrap; }
.ic__nav .btn > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ic__title { overflow-wrap: anywhere; }
.ic__prev { justify-self: start; max-width: 100%; }
.ic__next { justify-self: end; max-width: 100%; }
.ic__year { align-self: flex-start; width: max-content; margin: 0; padding: 5px 10px; font: 400 16px/1 var(--text); color: var(--ink); background: var(--cream); border: 2px solid var(--edge); box-shadow: inset -2px -2px 0 var(--cream-d); }
.ic__facts { display: flex; gap: 8px; margin: 0; }
.ic__facts div { padding: 6px 10px; color: var(--ink); background: var(--cream); border: 2px solid var(--edge); box-shadow: inset -2px -2px 0 var(--cream-d); }
.ic__facts dt { font-size: 9px; color: var(--ink-2, var(--n-5)); margin-bottom: 2px; }
.ic__facts dd { margin: 0; font: 400 16px/1 var(--text); }
.ic__full.fill { overflow: hidden; }
.ic__full.fill img { flex: 1 1 auto; height: 100%; object-fit: cover; }
/* ---------- project page: an old game manual ---------- */
body.is-paper::before {
content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
background: repeating-linear-gradient(0deg, rgba(27, 31, 24, .035) 0 1px, transparent 1px 28px);
}
.paper { position: relative; z-index: 1; padding-top: 22px; }
.work { max-width: 1000px; margin: 0 auto; }
.wbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 20px; }
.wbar__back {
font: 400 12px var(--label); text-decoration: none; color: var(--ink); padding: 10px 13px;
background: var(--gold); border: 3px solid var(--edge); box-shadow: inset 3px 3px 0 var(--gold-l), inset -3px -3px 0 var(--gold-d);
}
.wbar__st { margin-left: auto; font-size: 11px; background: var(--ink); color: var(--cream); padding: 6px 9px; }
.wbar__nav { display: flex; gap: 6px; }
.wbar__nav a {
width: 40px; height: 40px; display: grid; place-items: center; text-decoration: none; color: var(--ink); font-size: 16px;
background: var(--cream); border: 3px solid var(--edge); box-shadow: inset -3px -3px 0 var(--cream-d);
}
.wbar__nav a:active, .wbar__back:active { transform: translateY(1px); }
.w__cover { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; }
/* a real cover is shown whole, at its own proportions, like the first image of a Behance page */
.w__cover.is-real { aspect-ratio: auto; height: auto; }
.w__lead { gap: 10px; }
.w__cover--video { position: relative; aspect-ratio: 16 / 9; background: var(--panel, var(--n-1)); }
/* ghost: while something is still on its way, its box shimmers in the project's colours (8-bit steps, not a smooth glow) */
@keyframes ghost { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.ghost, .story img:not(.ok), .story video:not(.ok), .wk__cover img:not(.ok), .wk__cover video:not(.ok), .ic__full img:not(.ok), .w__cover:not(.w__cover--video):not(.ok) {
--g: var(--ghost, var(--panel, var(--n-4)));
background: linear-gradient(100deg, color-mix(in srgb, var(--g) 80%, var(--n-1)) 35%, color-mix(in srgb, var(--g) 70%, var(--cream-3)) 50%, color-mix(in srgb, var(--g) 80%, var(--n-1)) 65%) 0 0 / 300% 100%;
animation: ghost 1.4s steps(10) infinite;
}
@media (prefers-reduced-motion: reduce) { .ghost, .story img:not(.ok), .story video:not(.ok), .wk__cover img:not(.ok), .wk__cover video:not(.ok), .ic__full img:not(.ok) { animation: none; } }
.w__cover--video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; opacity: 0; transition: opacity .3s steps(3); }
.w__cover--video iframe.on, .wk__cover iframe.on { opacity: 1; }
.w__head { max-width: 780px; margin: clamp(26px, 4vw, 44px) 0 clamp(22px, 3vw, 34px); }
.w__tier { display: inline-block; margin: 0 0 14px; font-size: 11px; color: var(--tc-ink, var(--n-1)); background: var(--tc); border: 3px solid var(--edge); padding: 5px 9px; }
.w__title { margin: 0 0 16px; font: 400 clamp(52px, 11vw, 140px)/.82 var(--display); overflow-wrap: anywhere; letter-spacing: .01em; color: var(--ink); }
.w__title:focus { outline: none; }
.w__lede { margin: 0; font: 400 clamp(18px, 1.7vw, 21px)/1.55 var(--read); color: var(--ink-2); }
.w__meta {
display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 0 0 clamp(26px, 4vw, 42px);
border: 3px solid var(--edge); background: var(--gold-3);
}
.w__meta > div { padding: 12px 14px; border-right: 3px dashed rgba(27, 31, 24, .25); }
.w__meta > div:last-child { border-right: 0; }
.w__meta dt { font: 400 10px var(--label); color: var(--ink-2); margin-bottom: 8px; }
.w__meta dd { margin: 0; font: 400 16px/1.35 var(--text); }
.w__players { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.player { position: relative; display: block; cursor: help; outline: none; }
.player .sprite { display: block; }
.player::after {
content: attr(data-role); position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%); z-index: 3;
white-space: nowrap; padding: 5px 8px; font: 400 11px var(--label); color: var(--cream); background: var(--ink); border: 2px solid var(--edge);
box-shadow: 3px 3px 0 rgba(27, 31, 24, .25); opacity: 0; pointer-events: none;
}
.player::before { content: ""; position: absolute; left: 50%; bottom: calc(100% + 2px); margin-left: -6px; border: 6px solid transparent; border-top-color: var(--ink); border-bottom: 0; opacity: 0; }
.player:hover::after, .player:hover::before, .player:focus-visible::after, .player:focus-visible::before { opacity: 1; }
.player:focus-visible .sprite { outline: 3px solid var(--ink); outline-offset: 3px; }
.w__tools { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 20px; margin-bottom: clamp(26px, 4vw, 42px); }
.w__tools h2 { margin: 0; font-size: 12px; color: var(--ink-2); }
.w__tools ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; }
.w__tools li { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 104px; padding: 12px 6px 9px; background: var(--gold-3); border: 3px solid var(--edge); box-shadow: inset -3px -3px 0 rgba(27, 31, 24, .12); font: 400 16px/1.2 var(--text); text-align: center; }
.w__cats { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 20px; margin-bottom: clamp(26px, 4vw, 42px); }
.w__cats h2 { margin: 0; font-size: 12px; color: var(--ink-2); }
.w__cats ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.w__cats li { font-size: 11px; color: var(--ink); background: var(--panel, var(--gold-3)); border: 3px solid var(--rule, var(--edge)); padding: 6px 10px; }
.w__did { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 20px; margin-bottom: clamp(26px, 4vw, 42px); }
.w__did h2 { margin: 0; font-size: 12px; color: var(--ink-2); }
.w__did ul { margin: 0; padding: 0; list-style: none; font: 400 19px/1.8 var(--text); }
.w__did li::before { content: "▪ "; color: var(--tc); }
.w__gal { display: grid; grid-template-columns: 1.6fr 1fr; gap: 14px; }
.w__gal img { width: 100%; height: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.w__gal img:last-child { aspect-ratio: auto; }
/* case study */
.story { --st-gap: clamp(40px, 6vw, 76px); display: grid; gap: var(--st-gap); margin-top: var(--st-gap); }
.st__head { display: grid; grid-template-columns: minmax(150px, 28%) minmax(0, 1fr); gap: 24px; margin: 0 7.1% var(--st-gap); }
.st__h { margin: 0; font: 400 clamp(30px, 3vw, 40px)/.95 var(--display); letter-spacing: .01em; color: var(--ink); text-wrap: balance; }
.st__p { white-space: pre-line; margin: 0; font: 400 clamp(16px, 1.4vw, 17px)/1.7 var(--read); color: var(--ink-2); text-wrap: pretty; }
.st__media { display: grid; gap: 14px; }
.st__media > img, .st__grid img, .st__row img { display: block; width: 100%; height: auto; background: var(--scr); }
.st__row { display: flex; align-items: flex-start; width: 100%; }
.st__row img { flex: none; display: block; height: auto; }
.st__grid { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 14px; }
.st__grid[style*="--n:1"] { width: min(100%, 620px); justify-self: center; }
.st__grid--lineup { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.st__cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 12px; }
.st__card { display: grid; align-content: start; gap: 8px; text-decoration: none; color: inherit; }
.st__thumb { position: relative; display: block; aspect-ratio: 9 / 16; overflow: hidden; background: var(--panel, var(--n-1)); }
.st__thumb img { width: 100%; height: 100%; object-fit: cover; }
.st__views { position: absolute; left: 8px; bottom: 8px; font: 400 11px var(--label); color: var(--n-1); background: var(--gold); border: 2px solid var(--edge); padding: 3px 6px; }
.st__cap { display: grid; gap: 3px; }
.st__cap b { font: 400 16px/1.3 var(--text); }
.st__cap i { font: 400 16px/1.3 var(--text); font-style: normal; color: var(--ink-2); }
.st__card:hover .st__cap b, .st__card:focus-visible .st__cap b { text-decoration: underline; }
.st__yt { margin: 0; display: grid; gap: 8px; }
.st__play { position: relative; display: block; width: 100%; padding: 0; border: 0; cursor: pointer; background: var(--panel, var(--n-1)); aspect-ratio: 16 / 9; }
.st__play img { width: 100%; height: 100%; object-fit: cover; }
.st__tri { position: absolute; inset: 50% auto auto 50%; width: 64px; height: 48px; margin: -24px 0 0 -32px; background: var(--rust-3); border: 3px solid var(--edge); box-shadow: inset 3px 3px 0 var(--rust-4), inset -3px -3px 0 var(--rust-2); }
.st__tri::after { content: ""; position: absolute; left: 24px; top: 11px; border: 10px solid transparent; border-left: 16px solid var(--cream-3); border-right: 0; }
.st__play:hover .st__tri, .st__play:focus-visible .st__tri { transform: translateY(-2px); }
.st__play:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.st__yt figcaption { display: grid; gap: 2px; }
.st__yt b { font: 400 16px/1.3 var(--text); }
.st__yt i { font: 400 16px var(--text); font-style: normal; color: var(--ink-2); }
.st__vid { position: relative; aspect-ratio: 16 / 9; background: var(--scr); }
.st__vid iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.st__vid video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.w__link { margin: 30px 0 0; display: flex; flex-wrap: wrap; gap: 12px; }
.w__link a {
display: inline-block; font: 400 12px var(--label); text-decoration: none; color: var(--cream); padding: 12px 16px;
background: var(--rust); border: 3px solid var(--edge); box-shadow: inset 3px 3px 0 var(--rust-l), inset -3px -3px 0 var(--rust-d);
}
.w__next { display: flex; align-items: center; gap: 16px; margin-top: clamp(38px, 6vw, 66px); padding-top: 22px; border-top: 3px solid var(--edge); }
.w__next__go { flex: 1; min-width: 0; text-decoration: none; }
.w__next__arrow { flex: none; font-size: 34px; text-decoration: none; }
.w__next .w__sel { flex: none; color: var(--n-1); }
.w__next__go:hover b, .w__next__arrow:hover { color: var(--tc); }
.w__next .px { display: block; margin-bottom: 8px; font-size: 11px; color: var(--ink-2); }
.w__next b { font: 400 clamp(40px, 5vw, 60px)/.9 var(--display); letter-spacing: .01em; }
/* ---------- tv: tube switching on, tape tracking, channel static ---------- */
.tv { position: fixed; inset: 0; z-index: 35; pointer-events: none; display: none; }
.tv.is-on, .tv.is-track, .tv.is-static { display: block; }
.tv__top, .tv__bot { position: absolute; left: 0; right: 0; height: 50.5%; background: var(--n-0); opacity: 0; }
.tv__top { top: 0; }
.tv__bot { bottom: 0; }
.tv__line { position: absolute; left: 0; right: 0; top: 50%; height: 4px; margin-top: -2px; background: var(--cream-3); box-shadow: 0 0 18px 4px rgba(255, 246, 220, .6); opacity: 0; }
.tv__noise {
position: absolute; inset: 0; opacity: 0;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
repeating-linear-gradient(0deg, rgba(255, 246, 220, .08) 0 2px, transparent 2px 6px);
background-size: 160px 160px, auto;
}
.tv.is-on .tv__top { animation: tv-top .6s steps(6) both; }
.tv.is-on .tv__bot { animation: tv-bot .6s steps(6) both; }
.tv.is-on .tv__line { animation: tv-line .6s steps(6) both; }
@keyframes tv-line { 0% { opacity: 1; transform: scaleX(0); } 30% { opacity: 1; transform: scaleX(1); } 50% { opacity: 1; transform: scaleY(1); } 100% { opacity: 0; transform: scaleY(70); } }
@keyframes tv-top { 0%, 45% { opacity: 1; transform: none; } 100% { opacity: 1; transform: translateY(-101%); } }
@keyframes tv-bot { 0%, 45% { opacity: 1; transform: none; } 100% { opacity: 1; transform: translateY(101%); } }
.tv.is-static .tv__noise { animation: tv-noise .2s steps(4) both; }
.tv.is-track .tv__noise { animation: tv-noise .42s steps(6) both; }
.tv.is-track .tv__line { height: 46px; margin: 0; background: rgba(255, 246, 220, .18); box-shadow: none; animation: tv-band .42s steps(6) both; }
@keyframes tv-noise { 0% { opacity: .6; background-position: 0 0, 0 0; } 50% { opacity: .5; background-position: 70px 40px, 0 12px; } 100% { opacity: 0; background-position: 30px 110px, 0 30px; } }
@keyframes tv-band { 0% { opacity: 1; top: -8%; } 100% { opacity: 1; top: 104%; } }
body:has(.tv.is-track) .screen { animation: tracking .42s steps(6); }
@keyframes tracking { 20% { transform: translateX(-14px) skewX(-2deg); } 40% { transform: translateX(10px); } 60% { transform: translateX(-6px) skewX(1deg); } 80% { transform: translateX(3px); } }
/* on-screen display, like a VCR */
.osd { position: fixed; top: 6px; left: 16px; z-index: 46; margin: 0; font-size: 14px; letter-spacing: .06em; color: var(--green-4); text-shadow: 0 0 6px rgba(212, 236, 170, .6), 2px 2px 0 rgba(27, 31, 24, .6); opacity: 0; pointer-events: none; background: rgba(20, 23, 15, .82); padding: 5px 9px; }
.osd.on { opacity: 1; }
/* ---------- key hints: a label strip along the bottom ---------- */
.keys {
position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: flex; justify-content: center; gap: 18px; flex-wrap: wrap;
padding: 8px 14px; font: 400 10px var(--label); color: var(--ink);
background: var(--case); border-top: 3px solid var(--edge); box-shadow: inset 0 3px 0 var(--case-l);
}
.keys span { display: inline-flex; align-items: center; gap: 7px; }
.keys kbd { font: 400 10px var(--label); color: var(--ink); background: var(--cream); border: 2px solid var(--edge); box-shadow: inset -2px -2px 0 var(--cream-d); padding: 2px 6px; }
/* phones: no key bar, but room under the last block for the browser's own bottom bar */
@media (hover: none), (pointer: coarse) { .keys { display: none; } .screen { padding-bottom: calc(64px + env(safe-area-inset-bottom)); } }
/* the long step hints only where all three fit on one line */
@media (max-width: 1100px) { .g-long { display: none; } }
/* ---------- small screens ---------- */
@media (max-width: 760px) {
.sel-screen { min-height: 0; }
.sel-screen .console { grid-template-columns: 1fr; }
.crt { min-height: 240px; }
.play { grid-template-columns: 1fr; }
.side { position: static; }
.side .carts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 761px) and (max-width: 900px) {
.sel-screen .console { grid-template-columns: minmax(240px, 40%) minmax(0, 1fr); }
.play { grid-template-columns: 250px minmax(0, 1fr); }
.works { grid-template-columns: minmax(0, 1fr); }
}
/* the manual page reads in one column on tablets and phones */
@media (max-width: 900px) {
.w__meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.w__meta > div:last-child { grid-column: 1 / -1; } /* Played as: the whole row, so two or three figures fit side by side */
.w__meta > div:nth-child(2) { border-right: 0; }
.w__meta > div:nth-child(-n + 2) { border-bottom: 3px dashed rgba(27, 31, 24, .25); }
.w__did, .w__tools, .w__cats, .st__head { grid-template-columns: 1fr; gap: 10px; }
.st__grid--lineup, .st__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.st__row--many { flex-wrap: wrap; gap: 6px; }
.st__row--many img { width: calc(33.33% - 4px) !important; margin-left: 0 !important; }
.st__grid { gap: 10px; }
}
@media (max-width: 600px) {
.console { padding: 10px; }
.row2, .row3 { grid-template-columns: 1fr; }
.works { grid-template-columns: minmax(0, 1fr); }
.mini { width: 100%; }
.mini .key5 { flex: 1; }
.playbar__btns { width: 100%; }
.playbar__btns .key { flex: 1; }
.w__gal { grid-template-columns: 1fr; }
.w__next { flex-wrap: wrap; row-gap: 14px; }
.w__next__go { flex: 1 1 100%; }
.w__next .w__sel { flex: 1; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation: none !important; transition: none !important; }
}
/* folding side panels: a plain label on desktop, a toggle on phones */
.fold__head { display: flex; width: 100%; padding: 0; background: none; border: 0; text-align: left; cursor: default; }
.fold__mark { display: none; }
.fold__t { display: inline-flex; align-items: center; gap: 10px; }
.fold__ico { display: grid; place-items: center; width: 32px; height: 32px; background: var(--n-1); border: 2px solid var(--edge); }
.fold__ico svg { width: 24px; height: 24px; }
.mini-coin { display: inline-grid; width: 16px; height: 16px; }
.mini-coin svg { display: block; }
.key--coin { gap: 8px; }
/* Insert coin is the contact key everywhere: the same brown as its chip on the select screen */
.key--coin { color: var(--cream-2); background: var(--brown-2); box-shadow: inset 3px 3px 0 var(--brown-3), inset -3px -3px 0 var(--brown-1); }
.key--coin:active { box-shadow: inset -3px -3px 0 var(--brown-3), inset 3px 3px 0 var(--brown-1); }
.wbar__short { display: none; }
/* ---------- phones: one clean column ---------- */
@media (max-width: 760px) {
/* select: the player chip moves above the screen; every block keeps the same 12px rhythm */
.sel-screen .console { display: flex; flex-direction: column; gap: 12px; }
.sel-screen .con-left, .sel-screen .con-right, .sel-screen .row2, .sel-screen .row3 { display: contents; }
/* the visitor's path: who am I playing > pick > play > what they carry > power up > get in touch */
.sel-screen .lcd { order: 1; }
#chipBizon { order: 2; }
.sel-screen .crt-mod { order: 3; }
.sel-screen .pad { order: 4; }
#carts { order: 5; }
#meters { order: 6; }
.sel-screen .row3 .col { order: 7; display: grid; gap: 12px; }
#yes { order: 8; }
.sel-screen .chip--coin { order: 9; }
/* guide: one row of three short steps, clear of the sound key */
.guide { flex-wrap: nowrap; justify-content: space-between; gap: 0; font-size: 10px; min-height: 40px; align-items: center; margin: -6px 0 12px; padding-right: 56px; }
.guide li { gap: 6px; }
.guide li + li::before { margin: 0 8px 0 0; font-size: 8px; }
.g-long, .g-mid { display: none; }
.dialog { font-size: 16px; min-height: 40px; padding: 7px 26px 7px 10px; }
/* items: all four in one row, the icon a touch bigger than the slot math would give */
.carts, .side .carts { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.cart, .side .cart { padding: 3px; }
.cart__win svg, .side .cart__win svg { width: 36px; height: 36px; }
/* play: name, the bizon keys, then two equal buttons on one line */
.playbar { gap: 10px; }
.playbar__btns { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); width: 100%; }
.playbar__btns .key { white-space: nowrap; padding: 11px 4px; font-size: 11px; letter-spacing: .04em; min-width: 0; justify-content: center; }
/* categories: one row that scrolls sideways */
.tagbar { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.tagbar::-webkit-scrollbar { display: none; }
.tag { flex: none; }
/* stats and items fold */
.fold__head { cursor: pointer; margin-bottom: 0; }
.fold:not(.shut) .fold__head { margin-bottom: 10px; }
.fold.shut > :not(.fold__head) { display: none; }
/* shut: the head sits in the middle of its box, same space above and below */
.mod.fold.shut { padding-bottom: 10px; }
/* the select screen on phones: pick, power up, play; stats and the works count live on the play screen */
.sel-screen #meters, .sel-screen .counter { display: none; }
.mod.fold.shut .fold__head.mod__lbl { margin-bottom: 0; }
.fold__mark { display: inline-block; width: 10px; height: 6px; margin-left: 8px; background: var(--gold); clip-path: polygon(0 0, 100% 0, 50% 100%); }
.fold:not(.shut) .fold__mark { transform: rotate(180deg); }
/* key hints: one evenly spaced row that scrolls sideways instead of stacking into three */
.keys { flex-wrap: nowrap; justify-content: flex-start; gap: 14px; overflow-x: auto; padding: 7px 12px; scrollbar-width: none; }
.keys::-webkit-scrollbar { display: none; }
.keys span { flex: none; gap: 5px; }
/* project page: one bar, buttons of one height */
.wbar { flex-wrap: nowrap; gap: 8px; }
.wbar__long { display: none; }
.wbar__short { display: inline; }
.wbar__back, .wbar__st, .wbar__nav a { height: 38px; display: inline-flex; align-items: center; }
.wbar__back { padding: 0 12px; gap: 6px; }
.wbar__st { margin-left: auto; padding: 0 8px; }
.wbar__nav a { width: 38px; justify-content: center; }
/* play on phones: the two keys sit top right beside the sound key, then the bizon, then the switch under it, then the works.
Items and stats stay on the select screen. */
.console--play { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px; }
.console--play .playbar, .console--play .play, .console--play .side { display: contents; }
.console--play .who, .console--play .side .inv, .console--play .side .meters { display: none; }
.console--play .playbar .sound.docked { grid-column: 1; grid-row: 1; }
.console--play .playbar__btns { grid-column: 2; grid-row: 1; }
.console--play:not(:has(.sound.docked)) .playbar__btns { grid-column: 1 / -1; }
.console--play .side .crt-mod { grid-column: 1 / -1; grid-row: 2; }
.console--play .mini { grid-column: 1 / -1; grid-row: 3; }
.console--play .works-mod { grid-column: 1 / -1; grid-row: 4; }
/* project pages on phones: the tools and what-I-did lists are left out; the story below carries the page */
.w__tools, .w__did { display: none; }
.wbar .sound.docked { width: 38px; height: 38px; }
}
/* labels read a size up: Silkscreen runs small */
.mod__lbl, .lcd, .bigbtn__s, .counter small, .wl { font-size: 12px; }
.key, .btn, .wbar__back, .w__link a, .ic__x { font-size: 13px; }
.meter__l, .key5, .cart__no, .wk__tag, .wk__no, .ic__tag, .w__meta dt { font-size: 11px; }
.keys, .keys kbd { font-size: 11px; }
/* the player chip opens the profile: it reads as a key, with a small Info tag */
.chip--who { width: 100%; font: inherit; text-align: left; cursor: pointer; }
.chip--who:hover, .chip--who:focus-visible { box-shadow: inset 0 0 0 2px var(--gold); }
/* the name keeps one height whatever size fitLine gives it, so the console never changes height between bizons */
.chip--who b { height: 26px; line-height: 26px; }
.chip__more { flex: none; padding: 3px 7px; font-size: 10px; color: var(--ink); background: var(--gold); border: 2px solid var(--edge); box-shadow: inset 2px 2px 0 var(--gold-l), inset -2px -2px 0 var(--gold-d), 0 0 0 2px var(--case-d); }
.chip--who:hover .chip__more, .chip--who:focus-visible .chip__more { background: var(--gold-l); }
/* player profile popup */
/* the square photo fills its square frame, edge to edge */
.prof__stage { display: block; height: auto; aspect-ratio: 1 / 1; padding: 0; overflow: hidden; background: var(--n-8); background-image: none; box-shadow: none; }
.prof__stage img { display: block; width: 100%; height: 100%; object-fit: cover; }
.prof__role { margin: -4px 0 0; font-size: 12px; color: var(--ink-2, var(--n-5)); text-align: center; }
.prof__role .logo { height: 1.05em; vertical-align: -.2em; }
.prof { overflow-y: auto; }
/* select screen: the stats title is plain text, no icon */
#meters .fold__ico { display: none; }
/* the rows share the panel height evenly: the same space above the title as under the last row */
#meters:not(.shut) { align-content: space-between; padding-bottom: 15px; } /* the last bar sits as far from the bottom edge as the title's letters from the top */
/* both chips: the same 58px well in the same place */
.sel-screen .chip__face { width: 58px; height: 58px; }
/* the Info key sits top right, on the title's line */
.chip__top { display: flex; align-items: center; gap: 10px; height: 26px; }
.chip__top b { flex: 1; min-width: 0; }
.chip__more { padding: 4px 8px; font-size: 10px; line-height: 1; box-shadow: inset 2px 2px 0 var(--gold-l), inset -2px -2px 0 var(--gold-d), 0 0 0 3px var(--n-1); }
.chip--who:active .chip__more { box-shadow: inset -2px -2px 0 var(--gold-l), inset 2px 2px 0 var(--gold-d), 0 0 0 3px var(--n-1); }
/* tablets: the two chips stack, so names and the Info key never squeeze */
@media (min-width: 761px) and (max-width: 1060px) { .sel-screen .row2 { grid-template-columns: 1fr; } }
/* the profile is the boss card: a gold frame with a slow aura, arcs on its edge, and a strike on the photo when it opens */
.prof__box { position: relative; overflow: visible; border-color: var(--n-0); box-shadow: inset 4px 4px 0 var(--gold-l), inset -4px -4px 0 var(--gold-d), 0 0 0 3px var(--gold), 0 12px 0 rgba(27, 31, 24, .4); animation: pop .25s steps(3), prof-aura 2.4s ease-in-out .3s infinite; }
@keyframes prof-aura { 0%, 100% { filter: drop-shadow(0 0 4px rgba(201, 162, 74, .45)); } 50% { filter: drop-shadow(0 0 14px rgba(236, 202, 114, .8)); } }
.prof__box.strike .prof__stage img { animation: prof-strike .7s steps(1); }
@keyframes prof-strike { 0%, 28%, 56% { filter: brightness(2.2) contrast(.6) grayscale(1); } 14%, 42%, 70%, 100% { filter: none; } }
/* an open popup owns the screen: the floating sound key steps behind its dimmer instead of sitting on the close key */
body:has(.ic:not([hidden])) .sound:not(.docked) { z-index: 25; }
@media (max-width: 360px) { .console--play .playbar__btns .key { font-size: 10px; letter-spacing: 0; gap: 5px; } }
/* Raven fantasy item art: 64px files, scaled in whole or nearest steps so the pixels stay square */
img.rv { display: block; image-rendering: pixelated; }
.cart:hover .cart__win img.rv, .cart:focus-visible .cart__win img.rv { transform: translateY(-3px); }
/* ---------- stats: an RPG status screen. Icon in a slot, name and value on top, a lit gauge in the stat's own colour ---------- */
.meters { display: grid; gap: 6px; align-content: start; padding-bottom: 15px; }
.meter { display: grid; grid-template-columns: 34px minmax(0, 1fr); grid-template-rows: 16px auto; column-gap: 10px; row-gap: 3px; align-items: center;
padding: 2px 6px 2px 3px; background: linear-gradient(90deg, rgba(255, 246, 220, .05), transparent 70%); border-left: 3px solid var(--sc); }
.meter__ico { grid-row: 1 / 3; display: grid; place-items: center; width: 34px; height: 34px; background: var(--n-1); border: 2px solid var(--edge);
box-shadow: inset 2px 2px 0 rgba(255, 246, 220, .08), inset -2px -2px 0 rgba(27, 31, 24, .45); }
.meter__ico svg { width: 22px; height: 22px; }
.meter__top { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-width: 0; height: 16px; } /* fixed: a MAX badge and a number take the same room */
.meter__l { font-size: 11px; letter-spacing: .06em; color: var(--cream-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.meter__v { flex: none; font: 400 20px/16px var(--display); color: var(--cream-3); }
.meter__v small { font-size: 14px; color: var(--n-7); margin-left: 1px; }
.meter__bar { display: flex; gap: 2px; padding: 2px; background: var(--n-0); border: 2px solid var(--edge); }
.meter__bar i { flex: 1; height: 8px; background: var(--n-2); box-shadow: inset 0 2px 0 rgba(27, 31, 24, .45); }
.meter__bar i.f { background: var(--sc); box-shadow: inset 0 2px 0 var(--sc-l), inset 0 -2px 0 var(--sc-d); }
.is-boss .meter { border-left-color: var(--gold-2); }
.cart__win { container-type: inline-size; }
.cart__win img.rv { max-width: 82cqi; height: auto !important; aspect-ratio: 1; } /* the markup size is the largest; small slots shrink it */
/* item card with a landscape image: the frame takes the image's own ratio and the card its natural height */
.ic__box.is-wide { height: auto; max-height: calc(100dvh - 48px); }
.ic__box.is-wide .ic__media { flex: none; display: block; min-height: 0; }
.ic__full.wide { display: block; width: 100%; overflow: hidden; }
.ic__full.wide { box-sizing: content-box; width: calc(100% - 6px); } /* the ratio is the image's own inside the 3px frame, so no band shows on any side */
.ic__full.wide img { width: 100%; height: 100%; object-fit: cover; }
/* profile record: four status tiles, two by two */
.prof__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; }
.prof__facts .pf { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 10px; align-items: center; padding: 8px; text-align: left;
background: var(--cream-2); border: 3px solid var(--edge); box-shadow: inset 3px 3px 0 var(--cream-3), inset -3px -3px 0 var(--cream-1); }
.pf__ico { display: grid; place-items: center; width: 52px; height: 52px; background: var(--n-2); border: 2px solid var(--edge); box-shadow: inset 2px 2px 0 rgba(255, 246, 220, .08), inset -2px -2px 0 rgba(27, 31, 24, .45); }
.pf__txt { display: grid; gap: 2px; min-width: 0; }
.pf__t { font-size: 9px; letter-spacing: .08em; color: var(--rust-2); }
.pf__v { font: 400 28px/.9 var(--display); color: var(--n-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf small { font: 400 14px/1 var(--small); color: var(--n-5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf__pips { display: flex; gap: 2px; margin-top: 3px; }
.pf__pips b { flex: 1; height: 6px; background: var(--cream-0); }
.pf__pips b.f { background: var(--gold-1); box-shadow: inset 0 2px 0 var(--gold-2); }
.prof__p { font-size: 14px; line-height: 1.5; }
.pf__t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* the boss carries its items in gold slots */
.is-boss .cart { background: var(--gold-l); box-shadow: inset 3px 3px 0 var(--gold-3), inset -3px -3px 0 var(--gold-d); }
/* profile, laid out to fit the screen without scrolling: photo on the left, the record on the right, both columns the same height */
.prof { overflow: hidden; }
.prof__box { width: min(880px, 100%); max-height: calc(100dvh - 32px); grid-template-columns: auto minmax(0, 1fr); column-gap: 20px; row-gap: 14px; align-items: stretch; }
.prof__box > .ic__top { grid-column: 1 / -1; }
.prof__stage { width: min(340px, calc(100dvh - 170px)); align-self: start; } /* refined in arcade.js (fitProfile) to the record's height */
.prof__info { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.prof__t, .prof__role, .prof__p { margin: 0; text-align: left; }
.prof__facts { margin-top: auto; grid-auto-rows: 1fr; } /* the tiles sit on the photo's bottom edge, all four the same height */
.prof__facts .pf { align-items: start; } /* label, value and line start at the same height in every tile */
.prof__facts .pf .pf__ico { align-self: center; }
/* split: photo beside name, line and story; the tiles across the whole card below (moved there by fitProfile) */
.prof__box.is-split > .prof__facts { grid-column: 1 / -1; margin-top: 0; }
@media (max-width: 720px) {
.ic.prof { padding: 12px; }
.prof__box { max-height: calc(100dvh - 24px); padding: 12px; row-gap: 10px; grid-template-columns: 1fr; }
.prof__stage { justify-self: center; width: min(100%, 26dvh); }
.prof__info { gap: 8px; }
.prof__t, .prof__role, .prof__p { text-align: center; }
.prof__t { font-size: clamp(28px, 9vw, 40px); }
.prof__p { font-size: 13px; line-height: 1.4; }
.prof__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.prof__facts .pf { grid-template-columns: 34px minmax(0, 1fr); gap: 7px; padding: 6px; }
.pf__ico { width: 34px; height: 34px; }
.pf__ico img.rv, .pf__ico svg { width: 26px !important; height: 26px !important; }
.pf__v { font-size: 22px; }
.pf small { font-size: 12px; }
}
/* tools: equal tiles in a grid, icon at the same height in every tile, the name centred under it and never wider than the tile */
.w__tools ul { display: grid; grid-template-columns: repeat(auto-fill, 140px); gap: 12px; }
.w__tools li { width: auto; height: 100%; justify-content: flex-start; padding: 14px 8px 12px; }
.w__tools li span { font-size: 14px; line-height: 1.25; text-align: center; } /* 140px tiles hold the longest single word (Illustrator) */
.cart { min-width: 0; }
.cart__win svg { max-width: 82cqi; height: auto; aspect-ratio: 1; } /* narrow slots (tablet side card) shrink the drawn icons too */
/* the contact popup keeps its first face: Pixelify, not the reading face */
#coinPop { --text: 'Pixelify Sans', ui-monospace, monospace; }
#coinPop .coin__p { font-weight: 500; }
/* popups: the title bar hugs the top edge so the space above the label matches the space under the last row */
/* popups, one standard for all three (item card, insert coin, profile):
- the content sits --pad in from every side of the frame
- the title tab and the close key are the same height (--tab), both centred on the frame's top border line,
the title's left edge on the content's left edge and the key's right edge on the content's right edge,
so the two read as a pair and only half of each hangs inside the frame */
.coin__box, .ic__box, .prof__box { --pad: 26px; --tab: 34px; --bw: 4px; position: relative; padding: var(--pad); }
.ic__box { overflow: visible; } /* the image pane scrolls on its own; the box must not clip the close key */
.ic__top { display: contents; }
.ic__top > span:first-child, .ic__x { position: absolute; z-index: 5; top: calc(var(--bw) / -2 - var(--tab) / 2); height: var(--tab);
border: 3px solid var(--edge); box-shadow: inset 3px 3px 0 var(--cream-3), inset -3px -3px 0 var(--cream-0), 0 4px 0 rgba(27, 31, 24, .45); }
.ic__top > span:first-child { left: var(--pad); display: flex; align-items: center; padding: 0 12px; font-size: 11px; line-height: 1;
color: var(--ink); background: var(--cream); white-space: nowrap; }
.ic__x { right: var(--pad); display: grid; place-items: center; width: var(--tab); padding: 0; font: 400 14px/1 var(--label); color: var(--ink);
background: var(--cream); text-decoration: none; cursor: pointer; }
.ic__x:hover { background: var(--cream-3); }
.ic__x:active { box-shadow: inset -3px -3px 0 var(--cream-3), inset 3px 3px 0 var(--cream-0); translate: 0 2px; }
.ic, .ic.prof { padding: 32px 16px 24px; } /* room above the frame for the half of the tabs that hangs outside */
@media (max-width: 720px) { .coin__box, .ic__box, .prof__box { --pad: 18px; --tab: 30px; } }
/* the power key takes whatever height the column has left, its two lines centred */
.row3 .col > #no { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; }
@media (max-width: 600px) {
/* item card keys: arrows alone on the sides, the middle key's label whole */
.ic__prev > span, .ic__next > span { display: none; }
.ic__prev, .ic__next { justify-content: center; }
.ic__go { font-size: 11px; letter-spacing: .02em; padding-left: 8px; padding-right: 8px; }
}
/* a narrow column (tablets): the works box keeps its 15px padding and shrinks its icon and number instead of overflowing */
@container (max-width: 260px) {
.counter__ico { width: 58px; height: 58px; }
.counter__ico svg { width: 44px; height: 44px; }
.counter__txt { height: 58px; }
}
/* the power key is a plate screwed to the console: four pixel screws, a straight slot each, in the key's own ramp */
#no { --sc-face: var(--n-6); --sc-hi: var(--n-8); --sc-lo: var(--n-5); --sc-ol: var(--n-2); }
#no.is-max { --sc-face: var(--gold-1); --sc-hi: var(--gold-3); --sc-lo: var(--gold-0); --sc-ol: var(--n-1); }
.screw { position: absolute; width: 12px; height: 12px; pointer-events: none; }
/* a 6x6 pixel screw head drawn at 2px per pixel: dark round outline, rim lit top left, slot running corner to corner */
.screw::before { content: ''; position: absolute; left: 0; top: 0; width: 2px; height: 2px;
box-shadow: 2px 0px 0 var(--sc-ol), 4px 0px 0 var(--sc-ol), 6px 0px 0 var(--sc-ol), 8px 0px 0 var(--sc-ol), 0px 2px 0 var(--sc-ol), 2px 2px 0 var(--sc-hi), 4px 2px 0 var(--sc-hi), 6px 2px 0 var(--sc-hi), 8px 2px 0 var(--sc-ol), 10px 2px 0 var(--sc-ol), 0px 4px 0 var(--sc-ol), 2px 4px 0 var(--sc-hi), 4px 4px 0 var(--sc-face), 6px 4px 0 var(--sc-ol), 8px 4px 0 var(--sc-lo), 10px 4px 0 var(--sc-ol), 0px 6px 0 var(--sc-ol), 2px 6px 0 var(--sc-face), 4px 6px 0 var(--sc-ol), 6px 6px 0 var(--sc-face), 8px 6px 0 var(--sc-lo), 10px 6px 0 var(--sc-ol), 0px 8px 0 var(--sc-ol), 2px 8px 0 var(--sc-ol), 4px 8px 0 var(--sc-lo), 6px 8px 0 var(--sc-lo), 8px 8px 0 var(--sc-lo), 10px 8px 0 var(--sc-ol), 2px 10px 0 var(--sc-ol), 4px 10px 0 var(--sc-ol), 6px 10px 0 var(--sc-ol), 8px 10px 0 var(--sc-ol); }
.screw--tl { top: 9px; left: 9px; }
.screw--tr { top: 9px; right: 9px; }
.screw--bl { bottom: 9px; left: 9px; }
.screw--br { bottom: 9px; right: 9px; }
/* project page: one text column. Title, facts, categories and the closing row sit on the same 7.1% inset as the story's
text and images (the Behance canvas column), so every left and right edge under the cover lines up */
.work > :is(.w__head, .w__spec, .w__link, .w__next) { margin-left: 7.1%; margin-right: 7.1%; }
/* a presentation on Koto's proportions (measured at 1440): a 1072px media column, 8px gutters, full and half rows,
the same text block as every project, and long pauses between sections */
.work:has(.story--grid) { --g: 8px; max-width: 1072px; width: auto; margin-left: auto; margin-right: auto; }
.story--grid { --st-gap: clamp(64px, 9vw, 130px); gap: var(--st-gap); }
.story--grid .st__head { margin-bottom: clamp(40px, 6vw, 76px); }
.story--grid .st__head:last-child { margin-bottom: 0; }
.story--grid .st__media { display: block; }
.story--grid .st__media > * + * { margin-top: var(--g); }
.story--grid .st__row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--g); }
.story--grid .st__row img { width: 100% !important; margin: 0 !important; background: none; }
.story--grid .st__vid { background: none; }
.story--grid .st__media > .st__row--space { margin-top: clamp(48px, 7vw, 100px); }
/* the facts under the title: up to four equal columns in one band, two by two on phones */
.w__spec { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); grid-template-columns: none; background: var(--panel, var(--gold-3)); border-color: var(--rule, var(--edge)); }
.w__spec dd { color: var(--ink); }
.w__spec > div:last-child { grid-column: auto; }
.w__spec > div:nth-child(n) { border-bottom: 0; border-right: 3px dashed var(--rule, rgba(27, 31, 24, .25)); }
.w__spec > div:last-child { border-right: 0; }
@media (max-width: 600px) {
.w__spec { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.w__spec > div:nth-child(even) { border-right: 0; }
.w__spec > div:nth-child(-n + 2):not(:only-child) { border-bottom: 3px dashed var(--rule, rgba(27, 31, 24, .25)); }
}
.st__label { margin: clamp(28px, 4vw, 48px) 0 10px; font-size: 11px; color: var(--ink-2); }
.st__media > .st__label:first-child { margin-top: 0; }
/* not ready yet: the cover stays as a blurred hint, and the card does not open */
.wk--soon { cursor: default; }
.wk--soon:hover, .wk--soon:focus-visible { translate: none; }
.wk--soon .wk__cover img { filter: blur(7px) saturate(.8); transform: scale(1.08); }
.wk__soon { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); white-space: nowrap; padding: 6px 10px; font-size: 11px; color: var(--ink); background: var(--gold); border: 3px solid var(--edge); }
/* phones: the power key is as tall as the play key beside it in the flow, never a thin strip */
@media (max-width: 760px) { .sel-screen #no { min-height: 102px; flex: none; } }
/* play was pressed before powering up: the key calls for it until it is pressed */
#no.demand { outline: 3px solid var(--gold-l); outline-offset: 3px; animation: demand .7s steps(2) infinite; }
@keyframes demand { 50% { filter: brightness(1.3) saturate(1.2); outline-color: transparent; } }
@media (prefers-reduced-motion: reduce) { #no.demand { animation: none; } }
/* phones: no lives and timer, the select screen opens on the bizon's card; a small credit closes every page */
.credit { display: none; }
@media (max-width: 760px) {
.sel-screen .lcd { display: none; }
.credit { display: block; margin: -44px 0 0; padding: 0 16px calc(20px + env(safe-area-inset-bottom)); text-align: center; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: #a3a997; }
.credit .logo { height: 1.3em; vertical-align: -.3em; }
}