feat: version campaigns and document original puzzle design

Restore v0.1 and v0.2 archives with separate progress, publish the curved v0.3 campaign, and document the original 24-level design with reproducible evidence. Refine board presentation and movement, and keep video lab tooling within its own directory.

design/campaign.css

@@ -0,0 +1,7 @@
+/* Version selection uses the existing semantic input and text roles. */
+.campaign-picker{margin:0 0 12px;font-size:13px}
+.campaign-picker select{appearance:auto;cursor:pointer;min-height:44px;padding:10px 12px;font-size:14px}
+.campaign-description{margin:0 0 16px}
+.campaign-description strong{color:var(--color-text-primary)}
+.campaign-progress-note{display:block;margin-top:5px}
+.level-dialog-grid .level-btn small{font-size:10px}

design/components.css

@@ -93,3 +93,25 @@ body:not(.editing) .rotation-controls{display:flex;position:absolute;left:0;righ
 body:not(.editing) .rotate-button{pointer-events:auto;min-width:80px;min-height:84px;gap:7px;padding:4px}
 body:not(.editing) .rotate-button>.ui-icon{width:58px;height:58px}
 body:not(.editing) .rotate-button b{font-size:13px}
+
+/* Expanded foldables, tablets and desktop windows share a height-aware stage. */
+@media(min-width:600px){
+  body:not(.editing){padding:16px}
+  body:not(.editing) .game-shell{width:min(100%,960px,calc(100dvh + 80px));height:calc(100dvh - 32px);max-height:1200px;padding:12px 20px 16px;margin:auto}
+  body:not(.editing) .game-column{grid-template-rows:48px 44px minmax(0,1fr)}
+  body:not(.editing) .game-top{top:14px;left:28px;right:28px}
+  body:not(.editing) .game-card{grid-template-rows:minmax(0,1fr) 72px}
+  body:not(.editing) .rotation-controls{bottom:88px;left:4%;right:4%;justify-content:space-between}
+  body:not(.editing) .board-tools>button{justify-self:center;width:96px}
+  body:not(.editing) .level-ribbon{font-size:28px}
+}
+@media(min-width:600px) and (max-height:600px){
+  body:not(.editing){padding:6px}
+  body:not(.editing) .game-shell{height:calc(100dvh - 12px);padding:4px 12px}
+  body:not(.editing) .game-column{grid-template-rows:40px 32px minmax(0,1fr)}
+  body:not(.editing) .game-top{top:4px}
+  body:not(.editing) .game-card{grid-template-rows:minmax(0,1fr) 56px}
+  body:not(.editing) .rotation-controls{bottom:66px;left:0;right:0}
+  body:not(.editing) .rotate-button>.ui-icon{width:46px;height:46px}
+}
+body:not(.editing) .game-card{align-self:stretch}

design/notifications.css

@@ -0,0 +1,17 @@
+/* A reserved status row keeps notifications stable and clear of the board. */
+.notice-slot{grid-column:1/-1;display:flex;align-items:center;justify-content:center;min-width:0;padding:3px 12px 7px;pointer-events:none}
+.game-notice{max-width:480px;width:fit-content;display:flex;align-items:center;gap:9px;padding:9px 14px;border:1px solid #52697e24;border-radius:14px;background:#f7faf7ed;color:#334c61;box-shadow:0 3px 10px #273b5008;font-size:12px;font-weight:500;line-height:1.5;text-align:left;overflow-wrap:anywhere;opacity:0;transform:translateY(-4px);transition:opacity .18s ease,transform .18s ease}
+.game-notice::before{content:'i';display:grid;place-items:center;flex:0 0 18px;width:18px;height:18px;border-radius:6px;background:#e0e9ee;color:#435f78;font-size:12px;font-weight:750;font-family:Georgia,serif}
+.game-notice.visible{opacity:1;transform:translateY(0)}
+.game-notice:empty{visibility:hidden}
+body:not(.editing) .game-column{grid-template-rows:44px 44px 64px minmax(0,1fr)}
+body:not(.editing) .notice-slot{grid-row:3;align-self:stretch}
+body:not(.editing) .game-card{grid-row:4}
+.editing .notice-slot{grid-column:1/-1;min-height:64px}
+.phone{grid-template-rows:44px 40px 64px minmax(0,1fr) 60px}
+.phone .notice-slot{grid-row:3}
+.phone canvas{grid-row:4}
+.phone .phone-tools button{grid-row:5}
+@media(min-width:600px){body:not(.editing) .game-column{grid-template-rows:48px 44px 64px minmax(0,1fr)}.game-notice{font-size:13px}}
+@media(min-width:600px) and (max-height:600px){body:not(.editing) .game-column{grid-template-rows:40px 32px 56px minmax(0,1fr)}.game-notice{padding:6px 11px;font-size:12px}}
+@media(prefers-reduced-motion:reduce){.game-notice{transition:none;transform:none}}

design/showcase.css

@@ -24,3 +24,13 @@
 .phone .rotations button>span{width:56px;height:56px}.phone .rotations b{font-size:13px}
 .study-dialog{width:min(360px,calc(100% - 32px));max-height:80dvh;overflow:auto;border:0;border-radius:24px;padding:24px;background:#F7F6F2;color:#273B50}
 .study-dialog::backdrop{background:#273B507A;backdrop-filter:blur(5px)}.study-dialog h2{font-size:22px}.study-dialog button{min-height:44px;padding:10px 15px;border-radius:10px;background:#E4EAF0;color:#273B50}.study-levels{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:16px 0}.study-dialog label{display:block;margin:20px 0;font-size:14px}
+
+/* Let the interactive board demonstrate the current device's usable size. */
+@media(min-width:651px){
+  .studio{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px;align-items:start}
+  .studio .phone{grid-column:1/-1;grid-row:1;width:min(100%,960px,calc(100dvh + 80px));height:clamp(420px,calc(100dvh - 48px),1100px);justify-self:center;padding:12px 20px 16px;border-radius:28px}
+  .studio .theme-story{grid-column:1;grid-row:2}
+  .studio .motion-story{grid-column:2;grid-row:2}
+  .phone .rotations{left:6%;right:6%;justify-content:space-between}
+  .phone .phone-tools button{justify-self:center;width:96px}
+}

design/tokens.json

@@ -196,9 +196,10 @@
     "modalMs": 420,
     "starStartMs": 300,
     "starGapMs": 190,
-    "collisionMs": 650,
+    "collisionMs": 400,
     "rotationMs": 240,
-    "exitMsPerUnit": 60,
+    "exitMsPerUnit": 120,
+    "exitRampMs": 80,
     "exitMinTravelMs": 140,
     "exitMaxTravelMs": 800,
     "exitEffectMs": 180,