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 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01UQnSw4RRWp8uqpj3nsnnXF

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. */
+  --corner: 6px; /* clean, confident lines: the hand shows in the stipple, not the edges */
-  --wobble: 255px 14px 225px 14px / 14px 225px 14px 255px;
   /* 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%3Line truncated
   --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);
+  content: ""; position: absolute; top: -14px; left: 0; width: 34px; height: 24px;
-  animation: pop 1.4s ease-in-out infinite;
+  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); } }