/* Best-moments gallery and the full-screen clip editor. Scoped so Card Studio is unchanged. */
.mm-page { padding-bottom: 24px; }
.mm-page h1 { font-family: var(--serif); font-weight: 500; font-size: clamp(34px, 6vw, 56px); line-height: 1.02; margin: 8px 0 6px; }
.mm-lead { max-width: 42rem; color: var(--ink-2); margin: 0 0 14px; }
.mm-bar { position: sticky; top: var(--hdrH, 64px); z-index: 5; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; padding: 8px 0; background: color-mix(in srgb, var(--cream) 92%, transparent); backdrop-filter: blur(8px); }
.mm-bar select, .mm-bar button { font: 600 14px var(--sans); border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--ink); padding: 8px 12px; }
.mm-bar button[aria-pressed="true"] { background: var(--midnight); color: var(--cream); border-color: var(--midnight); }
.mm-count { margin-left: auto; color: var(--muted); font-size: 13px; }
.mm-sess { margin: 22px 0 8px; font: 600 12px var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-deep); }
.mm-talk { margin: 0 0 22px; }
.mm-head { display: flex; gap: 12px; align-items: center; margin-bottom: 10px; }
.mm-head img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; background: var(--midnight); }
.mm-head h2 { font: 500 22px var(--serif); margin: 0; }
.mm-head p { margin: 2px 0 0; color: var(--muted); font-size: 14px; }
.mm-head a { color: inherit; text-decoration: none; }
.mm-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 12px; }
.mm { display: flex; flex-direction: column; color: inherit; text-decoration: none; min-width: 0; }
.mm canvas { width: 100%; height: auto; aspect-ratio: 9/16; border-radius: 14px; background: #0d1326; display: block; box-shadow: 0 10px 24px rgba(20, 16, 40, .16); }
.mm q { font-family: var(--serif); font-size: 15.5px; line-height: 1.25; margin: 8px 0 0; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.mm small { color: var(--muted); font-size: 12px; margin-top: 4px; }
.mm-why { color: var(--muted); font-size: 12px; margin: 2px 0 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mm-miss { padding: 18px; }

/* Editor */
body.ce-on { overflow: hidden; background: #0d1326; }
body.ce-on > *:not(#ce):not(script):not(style):not(link) { display: none !important; }
.ce { position: fixed; inset: 0; z-index: 20; display: flex; flex-direction: column; background: radial-gradient(120% 80% at 50% 0%, #1c2448, #0d1326 70%); color: #fffaf0; font-family: var(--sans); padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); }
.ce button, .ce input, .ce textarea, .ce select { font-family: inherit; }
.ce-top { display: flex; align-items: center; gap: 6px; padding: 6px 10px; min-height: 48px; }
.ce-ic { width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(255,255,255,.08); color: #fffaf0; display: grid; place-items: center; text-decoration: none; cursor: pointer; }
.ce-ic:disabled { opacity: .35; }
.ce-name { flex: 1; min-width: 0; }
.ce-name b { display: block; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ce-name span, .ce-note { display: block; font-size: 11px; color: rgba(255,246,228,.72); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ce-shuffle { border: 0; background: transparent; color: #f6dfa6; font: 700 14px var(--sans); cursor: pointer; padding: 8px; }
.ce-main { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.ce-stage { flex: 1; min-height: 0; position: relative; display: grid; place-items: center; padding: 4px 12px 8px; }
.ce-wrap { position: relative; border-radius: 16px; box-shadow: 0 18px 50px rgba(0,0,0,.45); max-width: 100%; }
.ce-wrap canvas { width: 100%; height: 100%; display: block; border-radius: 14px; background: #0d1326; touch-action: none; }
.ce-play { position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%); width: 64px; height: 64px; border-radius: 50%; border: 0; background: rgba(13,19,38,.55); color: #fff; font-size: 22px; cursor: pointer; backdrop-filter: blur(6px); }
.ce-play[hidden] { display: none; }
.ce-miss { position: absolute; left: 12px; right: 12px; top: 8px; background: rgba(13,19,38,.92); border: 1px solid rgba(246,223,166,.45); color: #fffaf0; border-radius: 14px; padding: 10px 12px; font-size: 13px; line-height: 1.4; z-index: 3; }
.ce-miss a { color: #f6dfa6; }
.ce-toast { position: absolute; left: 50%; bottom: 10px; transform: translate(-50%, 8px); opacity: 0; background: rgba(14,18,38,.92); border: 1px solid rgba(255,255,255,.14); border-radius: 999px; padding: 8px 14px; font-size: 13px; pointer-events: none; transition: .25s ease; max-width: 92%; z-index: 4; }
.ce-toast.on { opacity: 1; transform: translate(-50%, 0); }
.ce-prog { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(5,8,20,.55); z-index: 5; font-size: 15px; border-radius: 16px; }
.ce-side { display: flex; flex-direction: column; min-height: 0; }
.ce-phase, .ce-strip { display: flex; gap: 8px; overflow-x: auto; padding: 0 12px 8px; scrollbar-width: none; }
.ce-phase::-webkit-scrollbar, .ce-strip::-webkit-scrollbar, .ce-row::-webkit-scrollbar { display: none; }
.ce-phase button, .ce-bar button, .ce-tools button { cursor: pointer; }
.ce-phase button { border: 1px solid rgba(255,255,255,.2); background: transparent; color: #fffaf0; border-radius: 999px; padding: 6px 12px; font: 600 13px var(--sans); }
.ce-phase button[aria-pressed="true"] { background: #f6dfa6; color: #2a1d08; border-color: #f6dfa6; }
.ce-t { flex: 0 0 auto; width: 68px; border: 0; background: none; color: rgba(255,246,228,.8); font: 500 10.5px var(--sans); padding: 0; text-align: center; cursor: pointer; }
.ce-t i { display: block; height: 46px; border-radius: 8px; border: 2px solid transparent; margin-bottom: 3px; }
.ce-t[aria-pressed="true"] i { border-color: #f6dfa6; }
.ce-t span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ce-tools { display: flex; border-top: 1px solid rgba(255,255,255,.08); background: rgba(8,11,26,.55); }
.ce-tools button { flex: 1; border: 0; background: none; color: rgba(255,246,228,.75); font: 500 10px var(--sans); padding: 8px 0 6px; min-height: 46px; }
.ce-tools button[aria-pressed="true"] { color: #f6dfa6; }
.ce-sheet { background: #fbf8f2; color: #1d1b2e; border-radius: 16px 16px 0 0; max-height: 42vh; display: flex; flex-direction: column; }
.ce-sheet[hidden] { display: none; }
.ce-sh-h { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px 4px; }
.ce-sh-h b { font-size: 16px; }
.ce-sh-h button { border: 1px solid rgba(0,0,0,.15); background: transparent; border-radius: 999px; padding: 6px 12px; cursor: pointer; }
.ce-sh-b { overflow: auto; padding: 0 14px 12px; -webkit-overflow-scrolling: touch; }
.ce-sh-b h3 { margin: 12px 0 6px; font: 600 11px var(--sans); letter-spacing: .14em; text-transform: uppercase; color: #a87a35; }
.ce-help { color: #6d6878; font-size: 12.5px; margin: 4px 0 8px; }
.ce-row { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.ce-sw { flex: 0 0 auto; min-width: 72px; border: 1.5px solid rgba(29,27,46,.12); background: #fff; border-radius: 12px; padding: 8px 8px 6px; display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; color: #1d1b2e; font: 600 12px var(--sans); }
.ce-sw[aria-pressed="true"], .ce-mus[aria-pressed="true"] { border-color: #d8a95b; box-shadow: 0 0 0 3px rgba(216,169,91,.28); }
.ce-sw small { font-weight: 500; color: #6d6878; }
.ce-dot { width: 28px; height: 28px; border-radius: 50%; display: block; border: 1px solid rgba(0,0,0,.12); }
.ce-field { display: flex; flex-direction: column; gap: 4px; font-size: 13px; margin: 8px 0; }
.ce-field input[type="range"] { width: 100%; }
.ce-field input[type="text"], .ce-field textarea { width: 100%; border: 1px solid rgba(0,0,0,.12); border-radius: 10px; padding: 8px; font: 500 15px var(--sans); }
.ce-own { background: #fff4dc; border-radius: 10px; padding: 8px 10px; font-size: 13px; }
.ce-words { font: 500 15px/1.45 var(--serif); background: #fff; border-radius: 12px; padding: 8px 10px; }
.ce-words mark { background: #f6dfa6; color: inherit; border-radius: 3px; }
.ce-nudge { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ce-nudge button { border: 1px solid rgba(0,0,0,.12); background: #fff; border-radius: 999px; padding: 7px 10px; cursor: pointer; }
.ce-chk { display: flex; gap: 8px; align-items: center; margin: 8px 0; font-size: 14px; }
.ce-bar { display: flex; gap: 8px; padding: 8px 12px 10px; }
.ce-bar button { flex: 1; border-radius: 999px; padding: 12px 8px; font: 700 14px var(--sans); border: 1px solid rgba(255,255,255,.2); background: transparent; color: #fffaf0; }
.ce-bar .gold { border: 0; color: #2a1d08; background: linear-gradient(135deg, #f6dfa6, #d8a95b); }
.ce-lic { font-size: 12px; color: #6d6878; }
.ce-lic a { color: #8a5f1f; }

@media (min-width: 980px) {
  .ce-main { flex-direction: row; }
  .ce-stage { flex: 1; }
  .ce-side { width: 420px; border-left: 1px solid rgba(255,255,255,.08); }
  .ce-sheet { max-height: none; flex: 1; border-radius: 0; }
  .ce-tools { order: -1; border-top: 0; border-bottom: 1px solid rgba(255,255,255,.08); }
}
@media (prefers-reduced-motion: reduce) {
  .ce-toast, .ce-sheet, .mm canvas { transition: none !important; animation: none !important; }
}