From da3cd728a85d93f0a3f919bc1ab24966ee47e1f8 Mon Sep 17 00:00:00 2001 From: Smokey <150986568+jacisjake@users.noreply.github.com> Date: Tue, 27 Oct 2026 12:14:07 -0600 Subject: [PATCH] Clean lines, stippled disabled state, flash sparkles - Consistent 6px corners instead of hand-wobble edges - Disabled buttons: light stipple fill with a dashed line, not gray - Drop the stipple underline under the title - Four-point stars and broken crosses for waiting, level-up and dazed states, after the reference flash sheet - Fix: trust badge was sized by the crow-art rule and filled the whole crow once a crow earned trust Co-Authored-By: Claude Opus 5.5 Claude-Session: https://claude.ai/code/session_01UQnSw4RRWp8uqpj3nsnnXF --- ui/src/style.css | 33 +++++++++++++++++++-------------- 1 file changed, 19 insertions(+), 14 deletions(-) diff --git a/ui/src/style.css b/ui/src/style.css index 1928404..b44f408 100644 --- a/ui/src/style.css +++ b/ui/src/style.css @@ -9,12 +9,13 @@ --muted: #5f574b; --red: #9b2f22; --pen: 1.75px solid var(--ink); - /* Hand-drawn box: unequal corner radii make the line read as inked by hand. */ - --wobble: 255px 14px 225px 14px / 14px 225px 14px 255px; + --corner: 6px; /* clean, confident lines: the hand shows in the stipple, not the edges */ /* Stipple: a seamless tile of fine, randomly placed dots (generated, fixed seed), layered at two unrelated sizes so the repeat never shows. Reads as hand stippling, not a halftone screen. */ --stipple-tile: url('data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' width=\'64\' height=\'64\' fill=\'%231c1915\'%3E%3Ccircle cx=\'20.7\' cy=\'9.7\' r=\'0.35\'/%3E%3Ccircle cx=\'4.6\' cy=\'34.3\' r=\'0.5\'/%3E%3Ccircle cx=\'37.3\' cy=\'58.2\' r=\'0.42\'/%3E%3Ccircle cx=\'2.4\' cy=\'27.8\' r=\'0.35\'/%3E%3Ccircle cx=\'15.4\' cy=\'35.3\' r=\'0.35\'/%3E%3Ccircle cx=\'52.9\' cy=\'7.9\' r=\'0.42\'/%3E%3Ccircle cx=\'40.4\' cy=\'37.3\' r=\'0.35\'/%3E%3Ccircle cx=\'36.9\' cy=\'25.4\' r=\'0.42\'/%3E%3Ccircle cx=\'3.0\' cy=\'54.9\' r=\'0.5\'/%3E%3Ccircle cx=\'26.8\' cy=\'34.6\' r=\'0.5\'/%3E%3Ccircle cx=\'35.9\' cy=\'43.6\' r=\'0.35\'/%3E%3Ccircle cx=\'37.2\' cy=\'40.9\' r=\'0.5\'/%3E%3Ccircle cx=\'6.2\' cy=\'45.6\' r=\'0.35\'/%3E%3Ccircle cx=\'39.6\' cy=\'31.8\' r=\'0.6\'/%3E%3Ccircle cx=\'49.7\' cy=\'29.8\' r=\'0.6\'/%3E%3Ccircle cx=\'23.1\' cy=\'15.9\' r=\'0.42\'/%3E%3Ccircle cx=\'44.7\' cy=\'15.6\' r=\'0.5\'/%3E%3Ccircle cx=\'33.6\' cy=\'56.0\' r=\'0.6\'/%3E%3Ccircle cx=\'18.4\' cy=\'62.7\' r=\'0.35\'/%3E%3Ccircle cx=\'32.8\' cy=\'10.6\' r=\'0.5\'/%3E%3Ccircle cx=\'9.7\' cy=\'31.3\' r=\'0.35\'/%3E%3Ccircle cx=\'61.6\' cy=\'5.0\' r=\'0.5\'/%3E%3Ccircle cx=\'21.8\' cy=\'22.4\' r=\'0.6\'/%3E%3Ccircle cx=\'37.1\' cy=\'29.2\' r=\'0.35\'/%3E%3Ccircle cx=\'60.5\' cy=\'30.3\' r=\'0.35\'/%3E%3Ccircle cx=\'3.9\' cy=\'44.9\' r=\'0.6\'/%3E%3Ccircle cx=\'18.2\' cy=\'24.7\' r=\'0.5\'/%3E%3Ccircle cx=\'1.4\' cy=\'29.5\' r=\'0.42\'/%3E%3Ccircle cx=\'39.1\' cy=\'31.6\' r=\'0.42\'/%3E%3Ccircle cx=\'49.2\' cy=\'8.3\' r=\'0.42\'/%3E%3Ccircle cx=\'25.5\' cy=\'58.7\' r=\'0.6\'/%3E%3Ccircle cx=\'5.2\' cy=\'28.7\' r=\'0.5\'/%3E%3Ccircle cx=\'56.5\' cy=\'52.4\' r=\'0.5\'/%3E%3Ccircle cx=\'45.2\' cy=\'-0.9\' r=\'0.6\'/%3E%3Ccircle cx=\'45.2\' cy=\'63.1\' r=\'0.6\'/%3E%3Ccircle cx=\'61.3\' cy=\'9.7\' r=\'0.42\'/%3E%3Ccircle cx=\'9.7\' cy=\'42.1\' r=\'0.35\'/%3E%3Ccircle cx=\'31.0\' cy=\'37.7\' r=\'0.5\'/%3E%3Ccircle cx=\'18.0\' cy=\'9.3\' r=\'0.5\'/%3E%3Ccircle cx=\'39.0\' cy=\'20.4\' r=\'0.42\'/%3E%3Ccircle cx=\'44.2\' cy=\'33.0\' r=\'0.35\'/%3E%3Ccircle cx=\'29.2\' cy=\'55.7\' r=\'0.6\'/%3E%3Ccircle cx=\'25.5\' cy=\'25.2\' r=\'0.6\'/%3E%3Ccircle cx=\'40.6\' cy=\'4.0\' r=\'0.35\'/%3E%3Ccircle cx=\'-1.0\' cy=\'28.2\' r=\'0.35\'/%3E%3Ccircle cx=\'63.0\' cy=\'28.2\' r=\'0.35\'/%3E%3Ccircle cx=\'21.8\' cy=\'3.4\' r=\'0.35\'/%3E%3Ccircle cx=\'36.3\' cy=\'34.3\' r=\'0.5\'/%3E%3Ccircle cx=\'39.3\' cy=\'4.5\' r=\'0.42\'/%3E%3Ccircle cx=\'39.3\' cy=\'9.5\' r=\'0.5\'/%3E%3Ccircle cx=\'61.1\' cy=\'38.5\' r=\'0.6\'/%3E%3Ccircle cx=\'7.9\' cy=\'54.3\' r=\'0.6\'/%3E%3Ccircle cx=\'30.7\' cy=\'20.0\' r=\'0.42\'/%3E%3Ccircle cx=\'6.5\' cy=\'21.9\' r=\'0.5\'/%3E%3Ccircle cx=\'30.6\' cy=\'44.3\' r=\'0.35\'/%3E%3Ccircle cx=\'13.1\' cy=\'60.9\' r=\'0.5\'/%3E%3Ccircle cx=\'9.4\' cy=\'34.8\' r=\'0.35\'/%3E%3Ccircle cx=\'48.5\' cy=\'19.1\' r=\'0.35\'/%3E%3Ccircle cx=\'44.6\' cy=\'16.7\' r=\'0.5\'/%3E%3Ccircle cx=\'58.1\' cy=\'22.8\' r=\'0.42\'/%3E%3Ccircle cx=\'34.1\' cy=\'49.9\' r=\'0.5\'/%3E%3Ccircle cx=\'40.7\' cy=\'39.2\' r=\'0.42\'/%3E%3Ccircle cx=\'51.6\' cy=\'52.4\' r=\'0.42\'/%3E%3Ccircle cx=\'12.8\' cy=\'31.5\' r=\'0.35\'/%3E%3Ccircle cx=\'-0.7\' cy=\'50.6\' r=\'0.6\'/%3E%3Ccircle cx=\'63.3\' cy=\'50.6\' r=\'0.6\'/%3E%3Ccircle cx=\'16.6\' cy=\'44.3\' r=\'0.5\'/%3E%3Ccircle cx=\'28.6\' cy=\'60.0\' r=\'0.5\'/%3E%3Ccircle cx=\'61.1\' cy=\'23.3\' r=\'0.42\'/%3E%3Ccircle cx=\'6.5\' cy=\'30.1\' r=\'0.5\'/%3E%3Ccircle cx=\'13.1\' cy=\'39.9\' r=\'0.35\'/%3E%3Ccircle cx=\'30.7\' cy=\'41.8\' r=\'0.35\'/%3E%3Ccircle cx=\'53.4\' cy=\'7.7\' r=\'0.6\'/%3E%3Ccircle cx=\'50.1\' cy=\'48.0\' r=\'0.6\'/%3E%3Ccircle cx=\'56.9\' cy=\'27.8\' r=\'0.5\'/%3E%3Ccircle cx=\'5.6\' cy=\'60.6\' r=\'0.6\'/%3E%3Ccircle cx=\'29.6\' cy=\'47.6\' r=\'0.35\'/%3E%3Ccircle cx=\'46.4\' cy=\'10.9\' r=\'0.42\'/%3E%3Ccircle cx=\'1.8\' cy=\'37.8\' r=\'0.6\'/%3E%3Ccircle cx=\'51.6\' cy=\'9.4\' r=\'0.6\'/%3E%3Ccircle cx=\'42.1\' cy=\'22.4\' r=\'0.42\'/%3E%3Ccircle cx=\'1.4\' cy=\'51.2\' r=\'0.35\'/%3E%3Ccircle cx=\'33.7\' cy=\'59.8\' r=\'0.6\'/%3E%3Ccircle cx=\'-0.9\' cy=\'12.5\' r=\'0.42\'/%3E%3Ccircle cx=\'63.1\' cy=\'12.5\' r=\'0.42\'/%3E%3Ccircle cx=\'1.8\' cy=\'13.6\' r=\'0.42\'/%3E%3Ccircle cx=\'48.9\' cy=\'20.9\' r=\'0.6\'/%3E%3Ccircle cx=\'53.4\' cy=\'3.9\' r=\'0.5\'/%3E%3Ccircle cx=\'57.5\' cy=\'42.4\' r=\'0.6\'/%3E%3Ccircle cx=\'52.9\' cy=\'56.2\' r=\'0.42\'/%3E%3Ccircle cx=\'34.0\' cy=\'33.5\' r=\'0.35\'/%3E%3Ccircle cx=\'55.9\' cy=\'49.7\' r=\'0.35\'/%3E%3Ccircle cx=\'49.7\' cy=\'9.6\' r=\'0.42\'/%3E%3Ccircle cx=\'30.3\' cy=\'46.4\' r=\'0.35\'/%3E%3Ccircle cx=\'20.9\' cy=\'33.2\' r=\'0.6\'/%3E%3Ccircle cx=\'50.2\' cy=\'6.8\' r=\'0.35\'/%3E%3Ccircle cx=\'15.9\' cy=\'17.7\' r=\'0.35\'/%3E%3Ccircle cx=\'32.5\' cy=\'36.0\' r=\'0.35\'/%3E%3Ccircle cx=\'28.4\' cy=\'39.2\' r=\'0.42\'/%3E%3Ccircle cx=\'44.3\' cy=\'29.0\' r=\'0.6\'/%3E%3Ccircle cx=\'32.5\' cy=\'15.8\' r=\'0.5\'/%3E%3Ccircle cx=\'59.1\' cy=\'57.1\' r=\'0.42\'/%3E%3Ccircle cx=\'53.8\' cy=\'8.8\' r=\'0.35\'/%3E%3Ccircle cx=\'25.1\' cy=\'20.2\' r=\'0.42\'/%3E%3Ccircle cx=\'27.4\' cy=\'13.6\' r=\'0.5\'/%3E%3Ccircle cx=\'50.2\' cy=\'57.4\' r=\'0.42\'/%3E%3Ccircle cx=\'60.1\' cy=\'41.2\' r=\'0.5\'/%3E%3Ccircle cx=\'9.2\' cy=\'56.5\' r=\'0.6\'/%3E%3Ccircle cx=\'14.1\' cy=\'61.0\' r=\'0.6\'/%3E%3Ccircle cx=\'56.6\' cy=\'10.4\' r=\'0.42\'/%3E%3Ccircle cx=\'10.3\' cy=\'27.6\' r=\'0.6\'/%3E%3Ccircle cx=\'21.7\' cy=\'12.5\' r=\'0.5\'/%3E%3Ccircle cx=\'5.9\' cy=\'23.4\' r=\'0.5\'/%3E%3Ccircle cx=\'35.5\' cy=\'28.2\' r=\'0.35\'/%3E%3Ccircle cx=\'24.6\' cy=\'33.1\' r=\'0.5\'/%3E%3Ccircle cx=\'32.8\' cy=\'4.1\' r=\'0.42\'/%3E%3Ccircle cx=\'62.2\' cy=\'6.7\' r=\'0.5\'/%3E%3Ccircle cx=\'17.4\' cy=\'58.0\' r=\'0.42\'/%3E%3Ccircle cx=\'17.3\' cy=\'8.3\' r=\'0.6\'/%3E%3Ccircle cx=\'54.4\' cy=\'43.3\' r=\'0.5\'/%3E%3Ccircle cx=\'26.0\' cy=\'34.3\' r=\'0.6\'/%3E%3Ccircle cx=\'44.8\' cy=\'5.7\' r=\'0.35\'/%3E%3Ccircle cx=\'51.2\' cy=\'11.7\' r=\'0.35\'/%3E%3Ccircle cx=\'17.2\' cy=\'1.1\' r=\'0.35\'/%3E%3Ccircle cx=\'51.3\' cy=\'5.4\' r=\'0.42\'/%3E%3Ccircle cx=\'4.3\' cy=\'55.2\' r=\'0.6\'/%3E%3Ccircle cx=\'0.7\' cy=\'-0.4\' r=\'0.6\'/%3E%3Ccircle cx=\'0.7\' cy=\'63.6\' r=\'0.6\'/%3E%3Ccircle cx=\'64.7\' cy=\'-0.4\' r=\'0.6\'/%3E%3Ccircle cx=\'64.7\' cy=\'63.6\' r=\'0.6\'/%3E%3Ccircle cx=\'59.3\' cy=\'17.1\' r=\'0.42\'/%3E%3Ccircle cx=\'2.8\' cy=\'45.4\' r=\'0.35\'/%3E%3Ccircle cx=\'62.0\' cy=\'16.8\' r=\'0.42\'/%3E%3Ccircle cx=\'12.9\' cy=\'20.0\' r=\'0.5\'/%3E%3Ccircle cx=\'34.0\' cy=\'13.2\' r=\'0.6\'/%3E%3Ccircle cx=\'32.0\' cy=\'11.4\' r=\'0.5\'/%3E%3Ccircle cx=\'51.4\' cy=\'-0.4\' r=\'0.35\'/%3E%3Ccircle cx=\'51.4\' cy=\'63.6\' r=\'0.35\'/%3E%3Ccircle cx=\'1.0\' cy=\'46.9\' r=\'0.42\'/%3E%3Ccircle cx=\'65.0\' cy=\'46.9\' r=\'0.42\'/%3E%3Ccircle cx=\'32.9\' cy=\'15.7\' r=\'0.6\'/%3E%3Ccircle cx=\'6.8\' cy=\'52.4\' r=\'0.6\'/%3E%3Ccircle cx=\'42.0\' cy=\'34.9\' r=\'0.6\'/%3E%3Ccircle cx=\'62.1\' cy=\'19.7\' r=\'0.42\'/%3E%3Ccircle cx=\'62.9\' cy=\'21.9\' r=\'0.42\'/%3E%3Ccircle cx=\'25.9\' cy=\'22.2\' r=\'0.35\'/%3E%3Ccircle cx=\'53.6\' cy=\'0.9\' r=\'0.5\'/%3E%3Ccircle cx=\'53.6\' cy=\'64.9\' r=\'0.5\'/%3E%3Ccircle cx=\'27.6\' cy=\'3.5\' r=\'0.6\'/%3E%3Ccircle cx=\'55.7\' cy=\'42.9\' r=\'0.5\'/%3E%3Ccircle cx=\'38.3\' cy=\'44.3\' r=\'0.35\'/%3E%3Ccircle cx=\'29.4\' cy=\'10.1\' r=\'0.6\'/%3E%3Ccircle cx=\'0.2\' cy=\'23.3\' r=\'0.5\'/%3E%3Ccircle cx=\'64.2\' cy=\'23.3\' r=\'0.5\'/%3E%3Ccircle cx=\'62.2\' cy=\'35.0\' r=\'0.42\'/%3E%3Ccircle cx=\'2.2\' cy=\'56.5\' r=\'0.42\'/%3E%3Ccircle cx=\'22.8\' cy=\'0.1\' r=\'0.6\'/%3E%3Ccircle cx=\'22.8\' cy=\'64.1\' r=\'0.6\'/%3E%3Ccircle cx=\'5.4\' cy=\'17.9\' r=\'0.42\'/%3E%3Ccircle cx=\'15.9\' cy=\'49.7\' r=\'0.35\'/%3E%3Ccircle cx=\'16.9\' cy=\'5.7\' r=\'0.6\'/%3E%3Ccircle cx=\'37.6\' cy=\'25.2\' r=\'0.5\'/%3E%3Ccircle cx=\'19.5\' cy=\'14.9\' r=\'0.42\'/%3E%3Ccircle cx=\'42.1\' cy=\'45.8\' r=\'0.6\'/%3E%3Ccircle cx=\'48.9\' cy=\'46.1\' r=\'0.6\'/%3E%3Ccircle cx=\'9.6\' cy=\'46.3\' r=\'0.42\'/%3E%3Ccircle cx=\'2.8\' cy=\'53.5\' r=\'0.6\'/%3E%3Ccircle cx=\'47.0\' cy=\'52.0\' r=\'0.42\'/%3E%3Ccircle cx=\'58.2\' cy=\'48.2\' r=\'0.35\'/%3E%3Ccircle cx=\'52.9\' cy=\'37.4\' r=\'0.42\'/%3E%3Ccircle cx=\'5.4\' cy=\'2.7\' r=\'0.5\'/%3E%3Ccircle cx=\'61.4\' cy=\'24.1\' r=\'0.6\'/%3E%3Ccircle cx=\'35.7\' cy=\'40.2\' r=\'0.42\'/%3E%3Ccircle cx=\'31.3\' cy=\'0.2\' r=\'0.35\'/%3E%3Ccircle cx=\'31.3\' cy=\'64.2\' r=\'0.35\'/%3E%3Ccircle cx=\'47.9\' cy=\'32.2\' r=\'0.35\'/%3E%3Ccircle cx=\'42.2\' cy=\'4.2\' r=\'0.6\'/%3E%3Ccircle cx=\'16.1\' cy=\'4.8\' r=\'0.5\'/%3E%3Ccircle cx=\'15.0\' cy=\'48.4\' r=\'0.42\'/%3E%3Ccircle cx=\'47.3\' cy=\'62.4\' r=\'0.6\'/%3E%3Ccircle cx=\'54.1\' cy=\'4.9\' r=\'0.5\'/%3E%3Ccircle cx=\'49.1\' cy=\'39.5\' r=\'0.42\'/%3E%3Ccircle cx=\'5.0\' cy=\'9.4\' r=\'0.5\'/%3E%3Ccircle cx=\'41.7\' cy=\'44.3\' r=\'0.42\'/%3E%3Ccircle cx=\'0.8\' cy=\'3.9\' r=\'0.5\'/%3E%3Ccircle cx=\'64.8\' cy=\'3.9\' r=\'0.5\'/%3E%3Ccircle cx=\'62.2\' cy=\'6.4\' r=\'0.42\'/%3E%3Ccircle cx=\'43.2\' cy=\'18.6\' r=\'0.5\'/%3E%3Ccircle cx=\'29.7\' cy=\'29.8\' r=\'0.35\'/%3E%3Ccircle cx=\'-0.4\' cy=\'35.1\' r=\'0.5\'/%3E%3Ccircle cx=\'63.6\' cy=\'35.1\' r=\'0.5\'/%3E%3Ccircle cx=\'62.6\' cy=\'59.9\' r=\'0.35\'/%3E%3Ccircle cx=\'18.5\' cy=\'4.9\' r=\'0.6\'/%3E%3Ccircle cx=\'-0.4\' cy=\'24.8\' r=\'0.42\'/%3E%3Ccircle cx=\'63.6\' cy=\'24.8\' r=\'0.42\'/%3E%3Ccircle cx=\'4.8\' cy=\'5.8\' r=\'0.5\'/%3E%3Ccircle cx=\'61.0\' cy=\'8.5\' r=\'0.5\'/%3E%3Ccircle cx=\'56.8\' cy=\'45.0\' r=\'0.42\'/%3E%3Ccircle cx=\'31.9\' cy=\'56.1\' r=\'0.6\'/%3E%3Ccircle cx=\'1.6\' cy=\'0.2\' r=\'0.6\'/%3E%3Ccircle cx=\'1.6\' cy=\'64.2\' r=\'0.6\'/%3E%3Ccircle cx=\'43.6\' cy=\'25.9\' r=\'0.42\'/%3E%3Ccircle cx=\'26.6\' cy=\'24.1\' r=\'0.35\'/%3E%3Ccircle cx=\'53.8\' cy=\'0.1\' r=\'0.5\'/%3E%3Ccircle cx=\'53.8\' cy=\'64.1\' r=\'0.5\'/%3E%3Ccircle cx=\'53.7\' cy=\'7.7\' r=\'0.42\'/%3E%3Ccircle cx=\'45.6\' cy=\'57.7\' r=\'0.5\'/%3E%3Ccircle cx=\'16.2\' cy=\'4.2\' r=\'0.6\'/%3E%3Ccircle cx=\'-0.1\' cy=\'37.7\' r=\'0.5\'/%3E%3Ccircle cx=\'63.9\' cy=\'37.7\' r=\'0.5\'/%3E%3Ccircle cx=\'59.2\' cy=\'48.4\' r=\'0.35\'/%3E%3Ccircle cx=\'18.0\' cy=\'3.3\' r=\'0.5\'/%3E%3Ccircle cx=\'40.6\' cy=\'9.5\' r=\'0.5\'/%3E%3Ccircle cx=\'27.9\' cy=\'20.2\' r=\'0.5\'/%3E%3Ccircle cx=\'50.2\' cy=\'27.4\' r=\'0.35\'/%3E%3Ccircle cx=\'52.0\' cy=\'40.4\' r=\'0.42\'/%3E%3Ccircle cx=\'46.1\' cy=\'3.2\' r=\'0.6\'/%3E%3Ccircle cx=\'28.9\' cy=\'48.2\' r=\'0.5\'/%3E%3Ccircle cx=\'31.1\' cy=\'58.4\' r=\'0.42\'/%3E%3Ccircle cx=\'10.9\' cy=\'26.6\' r=\'0.5\'/%3E%3Ccircle cx=\'19.1\' cy=\'47.3\' r=\'0.5\'/%3E%3Ccircle cx=\'26.0\' cy=\'15.3\' r=\'0.6\'/%3E%3Ccircle cx=\'35.7\' cy=\'25.2\' r=\'0.42\'/%3E%3Ccircle cx=\'41.2\' cy=\'4.8\' r=\'0.6\'/%3E%3Ccircle cx=\'35.2\' cy=\'29.0\' r=\'0.5\'/%3E%3Ccircle cx=\'-0.2\' cy=\'28.8\' r=\'0.42\'/%3E%3Ccircle cx=\'63.8\' cy=\'28.8\' r=\'0.42\'/%3E%3Ccircle cx=\'35.1\' cy=\'15.6\' r=\'0.42\'/%3E%3Ccircle cx=\'21.9\' cy=\'5.8\' r=\'0.42\'/%3E%3Ccircle cx=\'23.6\' cy=\'51.8\' r=\'0.42\'/%3E%3Ccircle cx=\'56.8\' cy=\'48.0\' r=\'0.6\'/%3E%3Ccircle cx=\'24.5\' cy=\'47.7\' r=\'0.42\'/%3E%3Ccircle cx=\'24.1\' cy=\'21.6\' r=\'0.35\'/%3E%3Ccircle cx=\'31.9\' cy=\'36.8\' r=\'0.5\'/%3E%3Ccircle cx=\'8.1\' cy=\'32.2\' r=\'0.42\'/%3E%3Ccircle cx=\'5.9\' cy=\'57.4\' r=\'0.6\'/%3E%3Ccircle cx=\'25.6\' cy=\'28.5\' r=\'0.5\'/%3E%3Ccircle cx=\'54.3\' cy=\'55.9\' r=\'0.35\'/%3E%3Ccircle cx=\'8.1\' cy=\'27.2\' r=\'0.6\'/%3E%3Ccircle cx=\'62.0\' cy=\'31.3\' r=\'0.35\'/%3E%3Ccircle cx=\'25.1\' cy=\'59.3\' r=\'0.6\'/%3E%3Ccircle cx=\'62.2\' cy=\'15.9\' r=\'0.35\'/%3E%3Ccircle cx=\'14.3\' cy=\'9.7\' r=\'0.35\'/%3E%3Ccircle cx=\'60.3\' cy=\'46.2\' r=\'0.6\'/%3E%3Ccircle cx=\'5.4\' cy=\'49.7\' r=\'0.35\'/%3E%3Ccircle cx=\'50.1\' cy=\'14.9\' r=\'0.35\'/%3E%3Ccircle cx=\'41.3\' cy=\'19.4\' r=\'0.42\'/%3E%3Ccircle cx=\'40.1\' cy=\'33.8\' r=\'0.6\'/%3E%3Ccircle cx=\'44.7\' cy=\'7.2\' r=\'0.35\'/%3E%3Ccircle cx=\'19.2\' cy=\'60.4\' r=\'0.42\'/%3E%3Ccircle cx=\'24.8\' cy=\'14.3\' r=\'0.35\'/%3E%3Ccircle cx=\'0.7\' cy=\'19.3\' r=\'0.6\'/%3E%3Ccircle cx=\'64.7\' cy=\'19.3\' r=\'0.6\'/%3E%3Ccircle cx=\'17.8\' cy=\'20.2\' r=\'0.42\'/%3E%3Ccircle cx=\'30.4\' cy=\'15.0\' r=\'0.42\'/%3E%3Ccircle cx=\'1.9\' cy=\'26.4\' r=\'0.5\'/%3E%3Ccircle cx=\'3.5\' cy=\'12.4\' r=\'0.6\'/%3E%3Ccircle cx=\'5.2\' cy=\'14.6\' r=\'0.6\'/%3E%3Ccircle cx=\'59.2\' cy=\'14.5\' r=\'0.35\'/%3E%3Ccircle cx=\'44.5\' cy=\'46.0\' r=\'0.5\'/%3E%3Ccircle cx=\'43.7\' cy=\'12.7\' r=\'0.5\'/%3E%3Ccircle cx=\'47.3\' cy=\'32.3\' r=\'0.42\'/%3E%3Ccircle cx=\'31.7\' cy=\'12.8\' r=\'0.42\'/%3E%3Ccircle cx=\'14.8\' cy=\'14.2\' r=\'0.5\'/%3E%3Ccircle cx=\'7.0\' cy=\'39.9\' r=\'0.42\'/%3E%3Ccircle cx=\'57.4\' cy=\'31.0\' r=\'0.35\'/%3E%3Ccircle cx=\'60.7\' cy=\'9.4\' r=\'0.6\'/%3E%3Ccircle cx=\'3.5\' cy=\'1.5\' r=\'0.42\'/%3E%3Ccircle cx=\'26.6\' cy=\'45.4\' r=\'0.42\'/%3E%3Ccircle cx=\'25.2\' cy=\'57.5\' r=\'0.5\'/%3E%3Ccircle cx=\'46.9\' cy=\'-0.2\' r=\'0.42\'/%3E%3Ccircle cx=\'46.9\' cy=\'63.8\' r=\'0.42\'/%3E%3Ccircle cx=\'21.1\' cy=\'11.9\' r=\'0.6\'/%3E%3Ccircle cx=\'2.0\' cy=\'42.5\' r=\'0.6\'/%3E%3Ccircle cx=\'53.7\' cy=\'-1.0\' r=\'0.6\'/%3E%3Ccircle cx=\'53.7\' cy=\'63.0\' r=\'0.6\'/%3E%3Ccircle cx=\'10.8\' cy=\'0.2\' r=\'0.5\'/%3E%3Ccircle cx=\'10.8\' cy=\'64.2\' r=\'0.5\'/%3E%3Ccircle cx=\'5.2\' cy=\'26.9\' r=\'0.35\'/%3E%3Ccircle cx=\'35.9\' cy=\'48.6\' r=\'0.6\'/%3E%3Ccircle cx=\'22.8\' cy=\'52.6\' r=\'0.6\'/%3E%3Ccircle cx=\'5.6\' cy=\'45.1\' r=\'0.42\'/%3E%3Ccircle cx=\'23.9\' cy=\'58.8\' r=\'0.42\'/%3E%3Ccircle cx=\'20.7\' cy=\'47.2\' r=\'0.6\'/%3E%3Ccircle cx=\'1.9\' cy=\'26.3\' r=\'0.6\'/%3E%3Ccircle cx=\'2.6\' cy=\'2.2\' r=\'0.35\'/%3E%3Ccircle cx=\'51.4\' cy=\'4.0\' r=\'0.42\'/%3E%3Ccircle cx=\'47.8\' cy=\'57.5\' r=\'0.5\'/%3E%3Ccircle cx=\'23.2\' cy=\'21.4\' r=\'0.35\'/%3E%3Ccircle cx=\'16.8\' cy=\'45.9\' r=\'0.5\'/%3E%3Ccircle cx=\'59.2\' cy=\'19.0\' r=\'0.35\'/%3E%3Ccircle cx=\'1.6\' cy=\'15.0\' r=\'0.6\'/%3E%3Ccircle cx=\'45.8\' cy=\'29.8\' r=\'0.6\'/%3E%3Ccircle cx=\'50.5\' cy=\'58.5\' r=\'0.6\'/%3E%3Ccircle cx=\'8.5\' cy=\'31.8\' r=\'0.35\'/%3E%3Ccircle cx=\'51.4\' cy=\'47.3\' r=\'0.42\'/%3E%3Ccircle cx=\'38.9\' cy=\'21.0\' r=\'0.5\'/%3E%3Ccircle cx=\'29.5\' cy=\'50.2\' r=\'0.35\'/%3E%3Ccircle cx=\'32.8\' cy=\'25.1\' r=\'0.42\'/%3E%3Ccircle cx=\'15.8\' cy=\'4.1\' r=\'0.35\'/%3E%3Ccircle cx=\'30.8\' cy=\'34.9\' r=\'0.42\'/%3E%3Ccircle cx=\'62.7\' cy=\'56.5\' r=\'0.35\'/%3E%3Ccircle cx=\'17.0\' cy=\'5.4\' r=\'0.35\'/%3E%3Ccircle cx=\'26.9\' cy=\'-0.7\' r=\'0.6\'/%3E%3Ccircle cx=\'26.9\' cy=\'63.3\' r=\'0.6\'/%3E%3C/svg%3E'); --stipple: var(--stipple-tile) 0 0 / 64px 64px, var(--stipple-tile) 23px 11px / 47px 47px; + --sparkle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231c1915'%3E%3Cpath d='M12 0C12.8 7 17 11.2 24 12C17 12.8 12.8 17 12 24C11.2 17 7 12.8 0 12C7 11.2 11.2 7 12 0Z'/%3E%3C/svg%3E"); + --glint: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke='%231c1915' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 2v6M12 16v6M2 12h6M16 12h6'/%3E%3C/svg%3E"); --display: "IM Fell English SC", Georgia, serif; --body: "EB Garamond", Georgia, serif; } @@ -31,7 +32,7 @@ main { max-width: 680px; margin: 0 auto; padding: 0 16px 64px; } /* Shared recipe: a hand-inked panel with a stippled shadow behind it. ::before is the paper and the pen line; ::after is the dot shading. */ .inked { position: relative; isolation: isolate; background: none; border: 0; } -.inked::before, .inked::after { content: ""; position: absolute; border-radius: var(--wobble); pointer-events: none; } +.inked::before, .inked::after { content: ""; position: absolute; border-radius: var(--corner); pointer-events: none; } .inked::before { inset: 0; z-index: -1; background: var(--card); border: var(--pen); } .inked::after { inset: 7px -7px -7px 7px; z-index: -2; background: var(--stipple); @@ -45,10 +46,6 @@ main { max-width: 680px; margin: 0 auto; padding: 0 16px 64px; } max-width: 680px; margin: 0 auto; padding: 22px 16px 10px; } .top h1 { margin: 0; font: 400 34px/1 var(--display); position: relative; } -.top h1::after { - content: ""; position: absolute; left: 0; right: 0; bottom: -8px; height: 6px; background: var(--stipple); - -webkit-mask-image: linear-gradient(90deg, #000, transparent); mask-image: linear-gradient(90deg, #000, transparent); -} .who { color: var(--muted); font-style: italic; } .who input { margin-left: 6px; width: 140px; padding: 2px 4px; font: 500 18px var(--body); color: var(--ink); @@ -64,7 +61,9 @@ main { max-width: 680px; margin: 0 auto; padding: 0 16px 64px; } .btn::after { inset: 5px -5px -5px 5px; } .btn:active:not(:disabled) { transform: translate(4px, 4px); } .btn:active:not(:disabled)::after { opacity: 0; } -.btn:disabled { opacity: 0.5; cursor: default; } +.btn:disabled { cursor: default; color: var(--muted); } +.btn:disabled::before { background: linear-gradient(rgb(249 245 234 / 0.72), rgb(249 245 234 / 0.72)), var(--stipple-tile) 0 0 / 64px 64px, var(--stipple-tile) 23px 11px / 47px 47px, var(--card); border-style: dashed; } +.btn:disabled::after { opacity: 0; } .btn:focus-visible { outline: 1.5px dashed var(--ink); outline-offset: 6px; } .btn-go { color: var(--paper); } .btn-go::before { background: var(--ink); } @@ -94,7 +93,7 @@ main { max-width: 680px; margin: 0 auto; padding: 0 16px 64px; } .crow.role-sentry { order: -1; } .crow.role-elder { order: 99; } .crow-body { width: 72px; height: 66px; } -.crow svg { width: 100%; height: 100%; overflow: visible; } +.crow .crow-body svg { width: 100%; height: 100%; overflow: visible; } .crow .disc { fill: #b7e4c7; } .crow.role-sentry .disc { fill: #ffe08a; } .crow.role-elder .disc { fill: #d6dde6; } @@ -103,7 +102,7 @@ main { max-width: 680px; margin: 0 auto; padding: 0 16px 64px; } .crow figcaption { margin-top: 2px; font: 400 15px/1.2 var(--display); } .crow.role-sentry figcaption, .crow.role-elder figcaption { font-style: italic; text-decoration: underline; text-underline-offset: 3px; } -.badge { +.crow .badge { position: absolute; top: -4px; right: 4px; width: 22px; height: 22px; fill: var(--card); stroke: var(--ink); stroke-width: 1.6; stroke-linejoin: round; opacity: 0; transform: scale(0.4); transition: 150ms; @@ -117,11 +116,15 @@ main { max-width: 680px; margin: 0 auto; padding: 0 16px 64px; } .pose-flying .jaw { transform: rotate(-10deg); } .pose-waiting .crow-body { animation: tilt 1.4s ease-in-out infinite; } .pose-waiting::after { - content: "?"; position: absolute; top: -12px; left: 4px; font: 400 26px/1 var(--display); - animation: pop 1.4s ease-in-out infinite; + content: ""; position: absolute; top: -14px; left: 0; width: 34px; height: 24px; + background: var(--sparkle) 0 2px / 18px 18px no-repeat, var(--glint) 22px 0 / 11px 11px no-repeat; + animation: twinkle-sparkle 1.4s ease-in-out infinite; } .pose-grounded .crow-body { transform: rotate(-18deg) translateY(6px); opacity: 0.5; } -.pose-grounded::after { content: "✕ ✕"; position: absolute; top: -6px; font-size: 12px; animation: spin 1.6s linear infinite; } +.pose-grounded::after { + content: ""; position: absolute; top: -8px; width: 40px; height: 14px; animation: spin 1.6s linear infinite; + background: var(--sparkle) 0 2px / 10px 10px no-repeat, var(--glint) 15px 0 / 9px 9px no-repeat, var(--sparkle) 28px 3px / 9px 9px no-repeat; +} /* Reaction layer: one-shots on top */ .r-cheer .crow-body { animation: hop 0.8s ease-out; } @@ -130,7 +133,8 @@ main { max-width: 680px; margin: 0 auto; padding: 0 16px 64px; } .r-levelUp .crow-body { animation: levelup 2s ease-out; } .r-levelUp .jaw { transform: rotate(16deg); } .r-levelUp::before { - content: "✦"; position: absolute; top: -22px; font-size: 26px; animation: rise 2s ease-out forwards; + content: ""; position: absolute; top: -26px; width: 56px; height: 30px; animation: rise 2s ease-out forwards; + background: var(--sparkle) 16px 0 / 26px 26px no-repeat, var(--glint) 0 14px / 12px 12px no-repeat, var(--glint) 44px 10px / 10px 10px no-repeat; } .r-levelDown .crow-body { animation: shrug 1s ease-out; } .r-prank .crow-body { animation: prank 2.5s ease-in-out; } @@ -140,6 +144,7 @@ main { max-width: 680px; margin: 0 auto; padding: 0 16px 64px; } @keyframes tilt { 50% { transform: rotate(8deg); } } @keyframes pop { 50% { transform: translateY(-4px); } } @keyframes spin { to { transform: rotate(360deg); } } +@keyframes twinkle-sparkle { 50% { transform: scale(1.15) rotate(8deg); } } @keyframes twinkle { 50% { transform: rotate(-12deg) scale(1.15); } } @keyframes hop { 30% { transform: translateY(-22px) scale(0.95, 1.08); } 60% { transform: translateY(0) scale(1.08, 0.92); } } @keyframes droop { 40%, 70% { transform: translateY(6px) rotate(-6deg) scale(1, 0.94); } }