lanre-ds 0.0.0-stage → 0.2.0

package/tokens/viewer.css

@@ -0,0 +1,1176 @@
+/* The roadside viewer: a memory in a wooden cabinet over the map. A sign on top, a screen that plays one piece at a time,
+   a deck with one key per piece and one big knob that says what happens next, a "who" button, a clue tab, and the guess
+   tray that opens centred over it. Used by RoadsideViewer, ViewerKeys, ViewerKnob, WhoButton, ClueTab, ClueCard and
+   RevealTray (components/viewer). */
+
+/* The root holds the layers: the sheet, the guess tray over it, the keepsake over that. It has no
+   filter or transform of its own, so each layer can pin itself to the window while the sheet scrolls. */
+.mp-viewer {
+  position: fixed;
+  inset: 0;
+  z-index: 40;
+}
+
+.mp-viewer-overlay {
+  position: absolute;
+  inset: 0;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  -webkit-overflow-scrolling: touch;
+  padding: max(58px, calc(env(safe-area-inset-top) + 44px)) 12px max(24px, env(safe-area-inset-bottom));
+  background: var(--bg-scrim);
+  backdrop-filter: blur(3px);
+  -webkit-backdrop-filter: blur(3px);
+  animation: mp-overlay-in 240ms var(--ease-out) both;
+}
+
+@keyframes mp-overlay-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+.mp-viewer-sheet {
+  position: relative;
+  max-width: 1010px;
+  margin: 0 auto;
+  padding: 64px 12px 14px;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  gap: 12px;
+  border-radius: var(--radius-xl);
+  border: 4px solid var(--cream-300);
+  background: linear-gradient(180deg, var(--cream-50), var(--cream-100));
+  box-shadow: inset 0 3px 0 oklch(1 0 0 / 0.7), inset 0 -4px 0 oklch(0 0 0 / 0.06), var(--shadow-panel);
+  animation: mp-modal-in 380ms var(--ease-bounce) both;
+}
+
+@keyframes mp-modal-in {
+  from { opacity: 0; transform: translateY(24px) scale(0.96); }
+  to { opacity: 1; transform: none; }
+}
+
+/* Leaving: the sheet shrinks and fades so the map can take over. */
+.mp-viewer-closing {
+  animation: mp-overlay-out 240ms var(--ease-out) 40ms both;
+  pointer-events: none;
+}
+
+.mp-viewer-closing .mp-viewer-sheet {
+  animation: mp-modal-out 260ms var(--ease-in-out) both;
+}
+
+@keyframes mp-overlay-out {
+  from { opacity: 1; }
+  to { opacity: 0; }
+}
+
+@keyframes mp-modal-out {
+  from { opacity: 1; transform: none; }
+  to { opacity: 0; transform: translateY(18px) scale(0.94); }
+}
+
+/* ------------------------------------------------------------------ sign, ribbon, close */
+
+.mp-viewer-sign {
+  position: absolute;
+  left: -10px;
+  top: -34px;
+  z-index: 5;
+  min-width: 190px;
+  max-width: 250px;
+  padding: 12px 18px 10px;
+  border-radius: 18px;
+  border: 5px solid var(--wood-700);
+  rotate: -3deg;
+  background: repeating-linear-gradient(180deg, transparent 0 9px, oklch(0 0 0 / 0.06) 9px 11px), linear-gradient(180deg, var(--wood-300), var(--wood-500));
+  box-shadow: 0 6px 0 var(--wood-900), 0 14px 22px oklch(0.2 0.05 60 / 0.35), inset 0 3px 0 oklch(1 0 0 / 0.3);
+  text-align: center;
+}
+
+.mp-viewer-sign::before,
+.mp-viewer-sign::after {
+  content: '';
+  position: absolute;
+  top: 8px;
+  width: 9px;
+  height: 9px;
+  border-radius: 50%;
+  background: radial-gradient(circle at 35% 30%, var(--stone-100), var(--stone-500));
+  box-shadow: 0 1px 0 var(--wood-900);
+}
+
+.mp-viewer-sign::before { left: 9px; }
+.mp-viewer-sign::after { right: 9px; }
+
+.mp-viewer-sign-eyebrow {
+  display: block;
+  font-family: var(--font-display);
+  font-size: 13px;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--cream-100);
+}
+
+.mp-viewer-sign-title {
+  margin: 0;
+  font-family: var(--font-display);
+  font-weight: 400;
+  font-size: 34px;
+  line-height: 1.05;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: #fff;
+  -webkit-text-stroke: 0.16em var(--wood-900);
+  paint-order: stroke fill;
+  text-shadow: 0 3px 0 oklch(0 0 0 / 0.28);
+  outline: none;
+}
+
+.mp-viewer-sign-title-long {
+  font-size: 24px;
+}
+
+.mp-viewer-leaf {
+  position: absolute;
+  color: var(--green-500);
+  -webkit-text-stroke: 3px var(--green-900);
+  paint-order: stroke fill;
+  filter: drop-shadow(0 2px 0 oklch(0 0 0 / 0.25));
+}
+
+.mp-viewer-leaf-a { left: -20px; top: -18px; font-size: 40px; rotate: -30deg; }
+.mp-viewer-leaf-b { right: -16px; top: -16px; font-size: 34px; rotate: 60deg; }
+.mp-viewer-leaf-c { left: -14px; bottom: -12px; font-size: 28px; rotate: -120deg; }
+
+.mp-viewer-ribbon {
+  position: absolute;
+  left: 50%;
+  top: -18px;
+  transform: translateX(-50%);
+  z-index: 4;
+  height: 34px;
+  padding: 0 16px;
+  border-radius: 999px;
+  border: 3px solid #fff;
+  background: linear-gradient(180deg, var(--berry-300), var(--berry-500) 50%);
+  box-shadow: 0 4px 0 var(--berry-700);
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-family: var(--font-display);
+  font-size: 14px;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: #fff;
+  white-space: nowrap;
+}
+
+.mp-viewer-close {
+  position: absolute;
+  top: -12px;
+  right: -12px;
+  z-index: 6;
+  width: 48px;
+  height: 48px;
+  padding: 0;
+  border-radius: 50%;
+  border: 3px solid #fff;
+  background: linear-gradient(180deg, var(--coral-300), var(--coral-500) 50%);
+  box-shadow: 0 4px 0 var(--coral-700), 0 6px 10px oklch(0 0 0 / 0.25);
+  color: #fff;
+  font-size: 22px;
+  display: grid;
+  place-items: center;
+  cursor: pointer;
+  transition: transform var(--dur-fast), box-shadow var(--dur-fast);
+}
+
+.mp-viewer-close:active {
+  transform: translateY(3px);
+  box-shadow: 0 1px 0 var(--coral-700), 0 3px 6px oklch(0 0 0 / 0.25);
+}
+
+.mp-viewer-close:focus-visible,
+.mp-who:focus-visible,
+.mp-clue-tab:focus-visible,
+.mp-clue-card:focus-visible,
+.mp-key:focus-visible,
+.mp-knob:focus-visible {
+  outline: 4px solid var(--blue-500);
+  outline-offset: 3px;
+}
+
+/* ------------------------------------------------------------------ title */
+
+.mp-viewer-head {
+  display: grid;
+  gap: 4px;
+  justify-items: center;
+  padding: 0 8px;
+  text-align: center;
+}
+
+.mp-viewer-eyebrow {
+  font-weight: 700;
+  font-size: 12px;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: var(--wood-700);
+}
+
+.mp-viewer-label {
+  display: block;
+  font-weight: 700;
+  font-size: 12px;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--ink-500);
+}
+
+.mp-viewer-title {
+  margin: 0;
+  font-family: var(--font-display);
+  font-weight: 400;
+  font-size: clamp(22px, 3.4vw, 34px);
+  line-height: 1.1;
+  color: var(--ink-900);
+  text-wrap: balance;
+  overflow-wrap: anywhere;
+}
+
+/* ------------------------------------------------------------------ the cabinet */
+
+.mp-cabinet {
+  position: relative;
+  min-width: 0;
+  margin-top: 30px;
+  padding: 12px;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  gap: 12px;
+  border-radius: 26px;
+  border: 5px solid var(--wood-700);
+  background: repeating-linear-gradient(90deg, transparent 0 14px, oklch(0 0 0 / 0.05) 14px 16px), linear-gradient(180deg, var(--wood-300), var(--wood-500));
+  box-shadow: 0 8px 0 var(--wood-900), 0 18px 28px oklch(0.2 0.05 60 / 0.35), inset 0 3px 0 oklch(1 0 0 / 0.3);
+}
+
+/* Who sent it: a mystery face until it's guessed, then the friend. It opens the tray either way. */
+.mp-who {
+  position: absolute;
+  left: 14px;
+  top: -36px;
+  z-index: 3;
+  max-width: calc(100% - 150px);
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 4px 14px 4px 4px;
+  border-radius: 999px;
+  border: 3px solid var(--blue-300);
+  background: linear-gradient(180deg, #fff, var(--blue-100));
+  box-shadow: 0 4px 0 var(--blue-700), 0 8px 14px oklch(0.2 0.05 60 / 0.25);
+  font-family: var(--font-display);
+  font-size: 13px;
+  letter-spacing: 0.04em;
+  color: var(--blue-900);
+  cursor: pointer;
+  transition: translate var(--dur-fast), box-shadow var(--dur-fast);
+  -webkit-tap-highlight-color: transparent;
+}
+
+.mp-who:active {
+  translate: 0 3px;
+  box-shadow: 0 1px 0 var(--blue-700);
+}
+
+.mp-who-berry {
+  border-color: var(--berry-300);
+  background: linear-gradient(180deg, #fff, var(--berry-100));
+  box-shadow: 0 4px 0 var(--berry-700), 0 8px 14px oklch(0.2 0.05 60 / 0.25);
+  color: var(--berry-900);
+}
+
+.mp-who-found {
+  border-color: var(--gold-300);
+  background: linear-gradient(180deg, #fff, var(--gold-100));
+  box-shadow: 0 4px 0 var(--gold-700), 0 0 0 5px oklch(0.92 0.14 90 / 0.35), 0 8px 14px oklch(0.2 0.05 60 / 0.25);
+  color: var(--gold-900);
+  animation: mp-pop 420ms var(--ease-bounce) both;
+}
+
+.mp-who-text {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  line-height: 1.15;
+  text-align: left;
+}
+
+.mp-who-text small {
+  display: block;
+  font-family: var(--font-ui);
+  font-weight: 700;
+  font-size: 10px;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--ink-500);
+}
+
+/* Their clue is parked as a tab on the cabinet; it can be called over the screen whenever the viewer likes. */
+.mp-clue-tab {
+  position: absolute;
+  right: 20px;
+  top: -30px;
+  z-index: 2;
+  height: 30px;
+  padding: 0 12px;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  border-radius: 12px 12px 0 0;
+  border: 3px solid var(--gold-300);
+  border-bottom: 0;
+  background: oklch(0.97 0.05 90);
+  font-family: var(--font-display);
+  font-size: 12px;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--wood-900);
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.mp-clue-tab i {
+  font-size: 14px;
+  color: var(--gold-700);
+}
+
+.mp-clue-tab {
+  transition: translate var(--dur-fast), background var(--dur-fast);
+}
+
+.mp-clue-tab:active {
+  translate: 0 2px;
+}
+
+.mp-clue-tab-on {
+  background: var(--gold-100);
+}
+
+/* Narrow phones: the tab just says "Clue", so "Ready to guess" fits beside it. */
+@media (max-width: 419px) {
+  .mp-clue-tab-their {
+    display: none;
+  }
+
+  .mp-who {
+    max-width: calc(100% - 112px);
+  }
+}
+
+.mp-screen {
+  position: relative;
+  height: clamp(320px, calc(100dvh - 400px), 600px);
+  overflow: hidden;
+  border-radius: 18px;
+  border: 6px solid var(--cream-300);
+  background: radial-gradient(ellipse at 50% 40%, #fff 0%, var(--cream-50) 60%, var(--cream-100) 100%);
+  box-shadow: inset 0 4px 12px oklch(0.3 0.05 60 / 0.18), inset 0 0 0 2px oklch(1 0 0 / 0.6);
+}
+
+.mp-screen-piece {
+  position: absolute;
+  inset: 0;
+  display: grid;
+  place-items: center;
+  container-type: size;
+  animation: mp-piece-in 320ms var(--ease-out) both;
+}
+
+@keyframes mp-piece-in {
+  from { opacity: 0; transform: translateY(10px); }
+  to { opacity: 1; transform: none; }
+}
+
+.mp-clue-card {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  translate: -50% -50%;
+  z-index: 4;
+  width: min(82%, 380px);
+  padding: 18px 18px 14px;
+  display: grid;
+  gap: 6px;
+  border: 0;
+  border-radius: 16px;
+  background: oklch(0.97 0.05 90);
+  box-shadow: 0 3px 0 var(--gold-300), 0 12px 28px oklch(0.2 0.05 60 / 0.35), 0 0 0 100vmax oklch(0.98 0.02 90 / 0.72);
+  rotate: -2deg;
+  font-family: var(--font-ui);
+  text-align: center;
+  color: var(--ink-900);
+  cursor: pointer;
+  animation: mp-pop 300ms var(--ease-bounce) both;
+}
+
+.mp-clue-card-leaving {
+  animation: mp-layer-shrink 180ms var(--ease-in-out) both;
+  pointer-events: none;
+}
+
+@keyframes mp-layer-shrink {
+  from { opacity: 1; transform: none; }
+  to { opacity: 0; transform: scale(0.9); }
+}
+
+.mp-clue-card strong {
+  font-family: var(--font-display);
+  font-weight: 400;
+  font-size: clamp(18px, 2.6vw, 22px);
+  line-height: 1.2;
+  text-wrap: balance;
+  overflow-wrap: anywhere;
+}
+
+.mp-clue-card em {
+  font-style: normal;
+  font-weight: 600;
+  font-size: 12px;
+  color: var(--ink-500);
+}
+
+/* The note inside the guess tray. */
+.mp-tray-clue {
+  position: relative;
+  justify-self: center;
+  width: min(100%, 250px);
+  margin-top: 4px;
+  padding: 14px 14px 12px;
+  border-radius: 16px;
+  background: #fff;
+  box-shadow: 0 3px 0 var(--cream-300), 0 6px 14px oklch(0.2 0.05 60 / 0.22);
+  rotate: 2deg;
+  font-weight: 700;
+  font-size: 16px;
+  line-height: 1.4;
+  color: var(--ink-700);
+  text-align: center;
+  text-wrap: pretty;
+  overflow-wrap: anywhere;
+}
+
+.mp-tray-clue .mp-viewer-label {
+  margin-bottom: 4px;
+}
+
+.mp-clue-tape {
+  position: absolute;
+  left: 50%;
+  top: -10px;
+  width: 62px;
+  height: 18px;
+  margin-left: -31px;
+  border-radius: 3px;
+  background: oklch(0.92 0.14 90 / 0.8);
+}
+
+/* The deck: one key per piece of the memory, and one knob that says what happens next. */
+.mp-deck {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: 12px;
+}
+
+.mp-keys {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  min-width: 0;
+}
+
+.mp-key {
+  min-height: 46px;
+  max-width: 100%;
+  padding: 0 14px;
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  border-radius: 12px;
+  border: 3px solid var(--wood-700);
+  background: linear-gradient(180deg, var(--cream-50), var(--cream-200));
+  box-shadow: 0 4px 0 var(--wood-900);
+  font-family: var(--font-ui);
+  font-weight: 700;
+  font-size: 14px;
+  color: var(--ink-900);
+  cursor: pointer;
+  transition: translate var(--dur-fast), box-shadow var(--dur-fast);
+  -webkit-tap-highlight-color: transparent;
+}
+
+.mp-key > i {
+  font-size: 18px;
+  color: var(--wood-700);
+}
+
+.mp-key:active,
+.mp-key-on {
+  translate: 0 3px;
+  box-shadow: 0 1px 0 var(--wood-900), inset 0 3px 6px oklch(0 0 0 / 0.15);
+}
+
+.mp-key-on {
+  background: linear-gradient(180deg, var(--gold-100), var(--gold-300));
+}
+
+/* More than three pieces: only the one on screen keeps its name, the rest are their icons. */
+.mp-keys-many .mp-key:not(.mp-key-on) {
+  padding: 0 12px;
+}
+
+.mp-keys-many .mp-key:not(.mp-key-on) .mp-key-label,
+.mp-keys-many .mp-key:not(.mp-key-on) .mp-key-meta {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+}
+
+.mp-key-tick {
+  width: 18px;
+  height: 18px;
+  flex: none;
+  border-radius: 50%;
+  background: var(--green-500);
+  color: #fff;
+  font-size: 11px;
+  display: grid;
+  place-items: center;
+  animation: mp-pop 300ms var(--ease-out) both;
+}
+
+.mp-key-meta {
+  font-family: var(--font-display);
+  font-size: 12px;
+  letter-spacing: 0.04em;
+  color: var(--ink-500);
+}
+
+.mp-knob {
+  width: 100%;
+  min-height: 56px;
+  padding: 0 8px 0 20px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  border-radius: 999px;
+  border: 3px solid var(--gold-700);
+  background: linear-gradient(180deg, var(--gold-300), var(--gold-500) 45%);
+  box-shadow: 0 6px 0 var(--gold-900), inset 0 2px 0 oklch(1 0 0 / 0.5), 0 8px 14px oklch(0.2 0.05 60 / 0.3);
+  font-family: var(--font-display);
+  font-size: 16px;
+  letter-spacing: 0.02em;
+  color: var(--gold-900);
+  text-align: left;
+  cursor: pointer;
+  transition: translate var(--dur-fast), box-shadow var(--dur-fast);
+  -webkit-tap-highlight-color: transparent;
+}
+
+.mp-knob:active {
+  translate: 0 4px;
+  box-shadow: 0 2px 0 var(--gold-900), inset 0 2px 0 oklch(1 0 0 / 0.5);
+}
+
+.mp-knob:disabled {
+  opacity: 0.7;
+  cursor: default;
+}
+
+.mp-knob-dial {
+  width: 40px;
+  height: 40px;
+  flex: none;
+  border-radius: 50%;
+  display: grid;
+  place-items: center;
+  font-size: 20px;
+  background: radial-gradient(circle at 35% 30%, #fff, var(--gold-300) 70%);
+  box-shadow: inset 0 -2px 0 oklch(0 0 0 / 0.2), 0 2px 0 var(--gold-900);
+}
+
+/* Waiting on a guess: the blue knob gives the same gentle nudge as the Level button on the map. */
+.mp-knob-attract {
+  animation: mp-knob-attract 6s var(--ease-in-out) 3s infinite;
+}
+
+@keyframes mp-knob-attract {
+  0%, 16%, 100% { scale: 1; }
+  4% { scale: 1.05; }
+  8% { scale: 1; }
+  12% { scale: 1.03; }
+}
+
+.mp-knob-guess {
+  border-color: var(--blue-700);
+  background: linear-gradient(180deg, var(--blue-300), var(--blue-500) 45%);
+  box-shadow: 0 6px 0 var(--blue-900), inset 0 2px 0 oklch(1 0 0 / 0.45), 0 8px 14px oklch(0.2 0.05 60 / 0.3);
+  color: #fff;
+  text-shadow: 0 2px 0 var(--blue-700);
+}
+
+.mp-knob-guess:active {
+  box-shadow: 0 2px 0 var(--blue-900), inset 0 2px 0 oklch(1 0 0 / 0.45);
+}
+
+.mp-knob-guess .mp-knob-dial {
+  background: radial-gradient(circle at 35% 30%, #fff, var(--blue-100) 70%);
+  box-shadow: inset 0 -2px 0 oklch(0 0 0 / 0.2), 0 2px 0 var(--blue-900);
+  color: var(--blue-900);
+  text-shadow: none;
+}
+
+.mp-knob-saved {
+  border-color: var(--green-700);
+  background: linear-gradient(180deg, var(--green-300), var(--green-500) 45%);
+  box-shadow: 0 6px 0 var(--green-900), inset 0 2px 0 oklch(1 0 0 / 0.45);
+  color: #fff;
+  text-shadow: 0 2px 0 var(--green-700);
+}
+
+.mp-knob-saved .mp-knob-dial {
+  background: radial-gradient(circle at 35% 30%, #fff, var(--green-100) 70%);
+  box-shadow: inset 0 -2px 0 oklch(0 0 0 / 0.2), 0 2px 0 var(--green-900);
+  color: var(--green-900);
+  text-shadow: none;
+}
+
+/* ------------------------------------------------------------------ the tray, centred over the viewer */
+
+.mp-tray-layer {
+  position: absolute;
+  inset: 0;
+  z-index: 2;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  display: grid;
+  place-items: center;
+  padding: max(78px, calc(env(safe-area-inset-top) + 64px)) 16px max(24px, env(safe-area-inset-bottom));
+  background: oklch(0.22 0.05 260 / 0.62);
+  backdrop-filter: blur(3px);
+  -webkit-backdrop-filter: blur(3px);
+  animation: mp-overlay-in 240ms var(--ease-out) both;
+}
+
+.mp-tray-in {
+  width: min(100%, 380px);
+  animation: mp-modal-in 380ms var(--ease-bounce) both;
+}
+
+.mp-tray-layer-leaving {
+  animation: mp-overlay-out 200ms var(--ease-out) both;
+  pointer-events: none;
+}
+
+.mp-tray-in-leaving {
+  animation: mp-modal-out 200ms var(--ease-in-out) both;
+}
+
+.mp-tray {
+  position: relative;
+  padding: 62px 18px 18px;
+  outline: none;
+  border-radius: var(--radius-xl);
+  border: 4px solid var(--blue-300);
+  background: linear-gradient(180deg, #fff, var(--blue-100));
+  box-shadow: inset 0 3px 0 oklch(1 0 0 / 0.7), var(--shadow-panel);
+  text-align: center;
+  transition: border-color 400ms var(--ease-out), box-shadow 400ms var(--ease-out);
+}
+
+/* The gold warms in over the blue or berry when the gem lands. */
+.mp-tray::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: calc(var(--radius-xl) - 4px);
+  background: linear-gradient(180deg, #fff, var(--gold-100));
+  opacity: 0;
+  transition: opacity 400ms var(--ease-out);
+  pointer-events: none;
+}
+
+.mp-tray-gold::before {
+  opacity: 1;
+}
+
+.mp-tray-body {
+  position: relative;
+}
+
+.mp-tray-wobble {
+  animation: mp-tray-wobble 520ms var(--ease-out) both;
+}
+
+@keyframes mp-tray-wobble {
+  0%, 100% { rotate: 0deg; translate: 0 0; }
+  20% { rotate: -1.4deg; translate: -6px 0; }
+  45% { rotate: 1.2deg; translate: 5px 0; }
+  70% { rotate: -0.6deg; translate: -3px 0; }
+}
+
+.mp-tray-blue { border-color: var(--blue-300); background: linear-gradient(180deg, #fff, var(--blue-100)); }
+.mp-tray-berry { border-color: var(--berry-300); background: linear-gradient(180deg, #fff, var(--berry-100)); }
+.mp-tray-gold {
+  border-color: var(--gold-300);
+  background: linear-gradient(180deg, #fff, var(--gold-100));
+  box-shadow: inset 0 3px 0 oklch(1 0 0 / 0.7), 0 0 0 6px oklch(0.92 0.14 90 / 0.35), var(--shadow-panel);
+}
+
+.mp-tray-face {
+  position: absolute;
+  left: 50%;
+  top: -50px;
+  transform: translateX(-50%);
+  z-index: 2;
+}
+
+/* The mystery face flips over to show who it was. */
+.mp-tray-flip {
+  position: relative;
+  display: block;
+  width: 104px;
+  height: 104px;
+  transform-style: preserve-3d;
+  transition: transform 520ms var(--ease-in-out);
+}
+
+.mp-tray-flipped {
+  transform: rotateY(180deg);
+}
+
+.mp-tray-face-front,
+.mp-tray-face-back {
+  position: absolute;
+  inset: 0;
+  border-radius: 50%;
+  backface-visibility: hidden;
+  -webkit-backface-visibility: hidden;
+}
+
+.mp-tray-face-back {
+  transform: rotateY(180deg);
+  box-shadow: 0 0 0 0 oklch(0.92 0.14 90 / 0);
+  transition: box-shadow 400ms var(--ease-out) 300ms;
+}
+
+.mp-tray-flipped .mp-tray-face-back {
+  box-shadow: 0 0 0 8px oklch(0.92 0.14 90 / 0.45);
+}
+
+.mp-tray-gem {
+  position: absolute !important;
+  right: -18px;
+  bottom: -8px;
+  animation: mp-gem-drop 620ms var(--ease-bounce) 1100ms both;
+}
+
+@keyframes mp-gem-drop {
+  0% { transform: translateY(-46px) scale(0.3); opacity: 0; }
+  55% { transform: translateY(4px) scale(1.12); opacity: 1; }
+  80% { transform: translateY(-2px) scale(0.97); }
+  100% { transform: translateY(0) scale(1); }
+}
+
+/* Name, relationship, "You found them!" and the buttons arrive one after another. */
+.mp-beat-1 { animation: mp-beat-drop 480ms var(--ease-bounce) 480ms both; }
+.mp-beat-2 { animation: mp-beat-drop 420ms var(--ease-out) 700ms both; }
+.mp-beat-3 { animation: mp-beat-drop 480ms var(--ease-bounce) 900ms both; }
+.mp-beat-4 { animation: mp-beat-drop 420ms var(--ease-out) 1250ms both; }
+
+@keyframes mp-beat-drop {
+  0% { opacity: 0; transform: translateY(-12px) scale(0.85); }
+  100% { opacity: 1; transform: translateY(0) scale(1); }
+}
+
+/* A memory that has already been opened: nothing to unwrap, everything sits still. */
+.mp-tray-settled .mp-tray-flip,
+.mp-tray-settled .mp-tray-face-back,
+.mp-tray-settled .mp-tray {
+  transition: none;
+}
+
+.mp-tray-settled .mp-tray-gem,
+.mp-tray-settled .mp-beat-1,
+.mp-tray-settled .mp-beat-2,
+.mp-tray-settled .mp-beat-3,
+.mp-tray-settled .mp-beat-4 {
+  animation: none;
+}
+
+.mp-tray-body {
+  display: grid;
+  gap: 12px;
+}
+
+.mp-tray-prompt {
+  margin: 0;
+  font-family: var(--font-display);
+  font-size: 24px;
+  line-height: 1.1;
+  color: var(--ink-900);
+  text-wrap: balance;
+}
+
+.mp-tray-hint {
+  margin: 0;
+  font-weight: 700;
+  font-size: 15px;
+  color: var(--ink-700);
+  text-wrap: pretty;
+}
+
+.mp-tray-choices {
+  display: grid;
+  gap: 12px;
+}
+
+.mp-tray-link {
+  justify-self: center;
+  min-height: 44px;
+  padding: 8px 12px;
+  border: 0;
+  background: none;
+  font-family: var(--font-ui);
+  font-weight: 700;
+  font-size: 16px;
+  color: var(--blue-900);
+  text-decoration: underline;
+  text-underline-offset: 4px;
+  cursor: pointer;
+}
+
+.mp-tray-link:disabled {
+  opacity: 0.5;
+}
+
+.mp-tray-back {
+  margin-top: -8px;
+  color: var(--ink-700);
+}
+
+.mp-tray-whowas {
+  display: grid;
+  justify-items: center;
+  gap: 2px;
+}
+
+.mp-tray-name {
+  font-family: var(--font-display);
+  font-size: 30px;
+  line-height: 1.05;
+  color: var(--ink-900);
+  text-wrap: balance;
+}
+
+.mp-tray-relationship {
+  font-weight: 600;
+  font-size: 15px;
+  color: var(--ink-700);
+}
+
+.mp-tray-actions {
+  display: grid;
+  gap: 14px;
+  margin-top: 4px;
+}
+
+.mp-viewer-error {
+  margin: 0;
+  padding: 10px 14px;
+  border-radius: var(--radius-md);
+  background: var(--coral-100);
+  color: var(--coral-900);
+  font-weight: 700;
+}
+
+/* ------------------------------------------------------------------ loading: the screen warms up */
+
+.mp-screen-off {
+  display: grid;
+  place-items: center;
+  border-color: var(--wood-700);
+  background: radial-gradient(ellipse at 50% 45%, oklch(0.36 0.04 70) 0%, oklch(0.26 0.03 60) 70%, oklch(0.2 0.02 55) 100%);
+  box-shadow: inset 0 4px 16px oklch(0 0 0 / 0.45), inset 0 0 0 2px oklch(1 0 0 / 0.06);
+}
+
+/* Faint scan lines on the dark glass. */
+.mp-screen-off::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: repeating-linear-gradient(180deg, oklch(1 0 0 / 0.035) 0 2px, transparent 2px 5px);
+  pointer-events: none;
+}
+
+/* A band of warm light rolls down the glass, again and again. */
+.mp-screen-sweep {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  height: 38%;
+  background: linear-gradient(180deg, transparent, oklch(0.9 0.12 85 / 0.12) 40%, oklch(0.95 0.1 90 / 0.28) 55%, transparent);
+  animation: mp-screen-sweep 1.8s var(--ease-in-out) infinite;
+  pointer-events: none;
+}
+
+@keyframes mp-screen-sweep {
+  from { transform: translateY(-100%); }
+  to { transform: translateY(270%); }
+}
+
+.mp-screen-off-message {
+  position: relative;
+  display: grid;
+  justify-items: center;
+  gap: 14px;
+  padding: 20px;
+  text-align: center;
+  font-weight: 700;
+  font-size: 17px;
+  color: var(--cream-100);
+}
+
+.mp-screen-off-message p {
+  margin: 0;
+  max-width: 32ch;
+  text-wrap: pretty;
+}
+
+.mp-screen-off-message > i {
+  font-size: 44px;
+  color: var(--gold-300);
+}
+
+.mp-screen-tuning {
+  display: inline-flex;
+  align-items: baseline;
+  gap: 2px;
+  font-family: var(--font-display);
+  font-size: 24px;
+  letter-spacing: 0.04em;
+  color: var(--gold-300);
+  text-shadow: 0 0 18px oklch(0.85 0.14 85 / 0.55);
+  animation: mp-screen-flicker 2.6s steps(1) infinite;
+}
+
+@keyframes mp-screen-flicker {
+  0%, 100% { opacity: 1; }
+  47% { opacity: 0.82; }
+  49% { opacity: 1; }
+  83% { opacity: 0.9; }
+}
+
+.mp-tuning-dots {
+  display: inline-flex;
+  gap: 4px;
+  margin-left: 4px;
+}
+
+.mp-tuning-dots i {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: currentColor;
+  animation: mp-screen-dot 1.1s var(--ease-in-out) infinite;
+}
+
+.mp-tuning-dots i:nth-child(2) { animation-delay: 150ms; }
+.mp-tuning-dots i:nth-child(3) { animation-delay: 300ms; }
+
+@keyframes mp-screen-dot {
+  0%, 60%, 100% { transform: translateY(0); opacity: 0.45; }
+  30% { transform: translateY(-6px); opacity: 1; }
+}
+
+/* When the memory arrives the screen switches on: a bright line opens into the picture. */
+.mp-screen:not(.mp-screen-off) {
+  animation: mp-screen-on 460ms var(--ease-out) both;
+}
+
+@keyframes mp-screen-on {
+  0% { clip-path: inset(49% 0 49% 0 round 12px); filter: brightness(1.8); }
+  45% { clip-path: inset(0 0 0 0 round 12px); filter: brightness(1.3); }
+  100% { clip-path: inset(0 0 0 0 round 12px); filter: none; }
+}
+
+/* Soft bars where the title and the keys will be. */
+.mp-placeholder {
+  display: block;
+  border-radius: 999px;
+  background: linear-gradient(90deg, var(--cream-200) 0%, var(--cream-100) 50%, var(--cream-200) 100%) 0 0 / 200% 100%;
+  animation: mp-placeholder-shine 1.4s linear infinite;
+}
+
+@keyframes mp-placeholder-shine {
+  from { background-position: 100% 0; }
+  to { background-position: -100% 0; }
+}
+
+.mp-placeholder-eyebrow {
+  width: 90px;
+  height: 12px;
+}
+
+.mp-placeholder-title {
+  width: min(70%, 360px);
+  height: 30px;
+  border-radius: 12px;
+}
+
+.mp-deck .mp-placeholder {
+  background-image: linear-gradient(90deg, oklch(1 0 0 / 0.16) 0%, oklch(1 0 0 / 0.3) 50%, oklch(1 0 0 / 0.16) 100%);
+}
+
+.mp-placeholder-key {
+  width: 110px;
+  height: 46px;
+  border-radius: 12px;
+}
+
+.mp-placeholder-knob {
+  width: 100%;
+  height: 56px;
+}
+
+@media (min-width: 600px) and (min-height: 620px) {
+  .mp-placeholder-knob {
+    width: 220px;
+    margin-left: auto;
+  }
+}
+
+
+/* ------------------------------------------------------------------ iPad and desktop: the sheet fits the window and the screen takes what is left */
+
+@media (min-width: 600px) and (min-height: 620px) {
+  .mp-viewer-overlay {
+    overflow: hidden;
+    display: grid;
+    grid-template-rows: minmax(0, 1fr);
+    place-items: center;
+    padding: max(56px, calc(env(safe-area-inset-top) + 44px)) 28px max(28px, calc(env(safe-area-inset-bottom) + 16px));
+  }
+
+  .mp-viewer-sheet {
+    width: 100%;
+    max-width: 980px;
+    height: min(100%, 900px);
+    margin: 0;
+    padding: 60px 20px 20px;
+    display: flex;
+    flex-direction: column;
+    gap: 14px;
+  }
+
+  .mp-cabinet {
+    flex: 1;
+    min-height: 0;
+    padding: 14px;
+    grid-template-rows: minmax(0, 1fr) auto;
+  }
+
+  .mp-screen {
+    height: auto;
+    min-height: 0;
+  }
+
+  .mp-who {
+    left: 18px;
+    max-width: calc(100% - 190px);
+    font-size: 14px;
+  }
+
+  .mp-keys {
+    flex: 1;
+  }
+
+  .mp-knob {
+    width: auto;
+    margin-left: auto;
+  }
+
+  .mp-viewer-error {
+    flex: none;
+  }
+}
+
+/* iPad landscape and desktop: height is the scarce thing, so the title moves up beside the sign. */
+@media (min-width: 1000px) and (min-height: 620px) {
+  .mp-viewer-overlay {
+    padding: 50px 60px 26px;
+  }
+
+  .mp-viewer-sheet {
+    height: min(100%, 820px);
+    padding-top: 20px;
+  }
+
+  .mp-viewer-head {
+    min-height: 44px;
+    align-content: center;
+    padding: 0 64px 0 250px;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .mp-tray-flip,
+  .mp-tray-face-back,
+  .mp-tray,
+  .mp-tray::before {
+    transition: none;
+  }
+  .mp-viewer-overlay,
+  .mp-viewer-sheet,
+  .mp-viewer-closing,
+  .mp-viewer-closing .mp-viewer-sheet,
+  .mp-tray-layer,
+  .mp-tray-in,
+  .mp-tray-layer-leaving,
+  .mp-tray-in-leaving,
+  .mp-clue-card-leaving,
+  .mp-knob-attract,
+  .mp-tray-wobble,
+  .mp-tray-gem,
+  .mp-beat-1,
+  .mp-beat-2,
+  .mp-beat-3,
+  .mp-beat-4,
+  .mp-key-tick,
+  .mp-screen-sweep,
+  .mp-screen-tuning,
+  .mp-tuning-dots i,
+  .mp-placeholder,
+  .mp-screen:not(.mp-screen-off),
+  .mp-screen-piece,
+  .mp-who-found,
+  .mp-clue-card {
+    animation: none;
+  }
+  .mp-screen-sweep {
+    display: none;
+  }
+}
+
+/* Contained: sits inside a positioned box instead of covering the window, for docs and previews. */
+.mp-viewer-contained {
+  position: absolute;
+}