fix(auth): the crown no longer clips on tall forms; game checkbox

justify-content centred the register form past the top of the screen;
auto margins centre it without overflowing. The age checkbox is a carved
slot that pops a green tick, and checkboxes squash and click like buttons.
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

public/js/core/feel.js

@@ -10,7 +10,7 @@
 import * as audio from './audio.js';
 import * as store from './store.js';
 
-const PRESSABLE = 'button, .deck-card, .chip, [role="button"], [role="radio"], [role="switch"], [role="tab"], .tab-item, a.btn';
+const PRESSABLE = 'button, .deck-card, .chip, [role="button"], [role="radio"], [role="switch"], [role="tab"], .tab-item, a.btn, input[type="checkbox"], input[type="radio"]';
 const MOVE_CANCEL = 10;          // px of travel that turns a press into a scroll
 const DEAL_WINDOW = 2600;        // ms after a scene mounts during which content is dealt
 const DEAL_MAX = 14;             // only the first items are staggered

public/js/modules/auth/scenes/login.js

@@ -179,13 +179,14 @@ export const AUTH_STYLE = `
     min-height: 100%;
     display: flex;
     flex-direction: column;
-    justify-content: center;
     padding: var(--s-8) var(--gutter);
   }
+  /* Auto margins centre the card but, unlike justify-content, never push a
+     tall form past the top of the screen. */
   .au-inner {
     width: 100%;
     max-width: 380px;
-    margin-inline: auto;
+    margin: auto;
     display: flex;
     flex-direction: column;
   }
@@ -248,14 +249,38 @@ export const AUTH_STYLE = `
     cursor: pointer;
   }
   .au-check input {
-    width: 20px;
-    height: 20px;
+    appearance: none;
+    width: 32px;
+    height: 32px;
     flex-shrink: 0;
-    accent-color: var(--red-ink);
+    margin: 0;
+    border-radius: 9px;
+    background: rgba(0, 0, 0, 0.55);
+    box-shadow: inset 0 3px 4px rgba(0, 0, 0, 0.7), 0 0 0 2px rgba(255, 210, 140, 0.28);
+    display: grid;
+    place-items: center;
     cursor: pointer;
+    transition: transform var(--dur-fast) var(--ease-pop), background var(--dur-fast) ease;
+  }
+  .au-check input::after {
+    content: "";
+    width: 20px;
+    height: 20px;
+    background: #fff;
+    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E") center / contain no-repeat;
+            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E") center / contain no-repeat;
+    filter: drop-shadow(0 1px 0 var(--btn-green-edge));
+    transform: scale(0);
+    transition: transform var(--dur-fast) var(--ease-pop);
+  }
+  .au-check input:checked {
+    background: linear-gradient(180deg, var(--btn-green-1), var(--btn-green-2));
+    box-shadow: 0 0 0 2px var(--outline), 0 3px 0 var(--btn-green-edge), inset 0 2px 0 rgba(255, 255, 255, 0.5);
   }
+  .au-check input:checked::after { transform: scale(1); }
+  .au-check input:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
   .au-terms { font-size: var(--fs-xs); line-height: 1.6; color: var(--text-muted); }
-  .au-terms a { min-block-size: 0; display: inline; color: var(--sky); font-weight: 600; }
+  .au-terms a { min-block-size: 0; display: inline; color: var(--gold-soft); font-weight: 700; }
 
   .au-or {
     display: flex;