body.viewer-match{--match-card-size: clamp(120px, 16vw, 220px);--match-sample-size: clamp(150px, 20vw, 280px);--match-card-gap: clamp(12px, 2.4vw, 28px);--match-card-font-size: clamp(18px, calc(var(--match-card-size) * .22), 36px)}.viewer-match{font-family:Patrick Hand,ui-rounded,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}.match-session{max-width:1100px;margin:0 auto;padding:24px 16px 48px;display:flex;flex-direction:column;min-height:100dvh;gap:var(--match-card-gap)}.match-footer{margin-top:auto;padding:12px 16px 0;width:100%;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px;border-top:1px solid rgba(148,163,184,.35)}.match-session .story-number,.match-session .story-controls{position:static;bottom:auto;right:auto;left:auto;transform:none;white-space:normal}.match-session .story-number{font-size:clamp(14px,1.6vw,18px);color:#475569;margin-left:auto}.match-session .story-controls{font-size:clamp(13px,1.4vw,16px);color:#64748b;text-align:center;flex:1 1 240px}.story-setup__settings-loading{display:flex;align-items:center;gap:10px;padding:12px 14px;border:1px dashed rgba(148,163,184,.45);border-radius:16px;color:#475569;background:#f8fafc}.story-setup__spinner{width:20px;height:20px;border:3px solid rgba(99,102,241,.25);border-top-color:#4f46e5;border-radius:50%;animation:match-spin .9s linear infinite}@keyframes match-spin{to{transform:rotate(360deg)}}.match-session[hidden]{display:none!important}.match-stage{flex:1 1 auto;display:flex;flex-direction:column;gap:var(--match-card-gap);width:100%;min-height:0}.match-grid{flex:1 1 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(var(--match-card-size),1fr));gap:var(--match-card-gap);justify-items:center;justify-content:center;align-content:center;width:100%;position:relative;z-index:0;min-height:0}.match-card-slot{background:#fff;border-radius:22px;border:1px solid rgba(203,213,225,.85);width:var(--match-card-size);height:var(--match-card-size);display:flex;align-items:center;justify-content:center;padding:6px}.match-card-slot--target{border-style:dashed;border-color:#4f46e566}.match-card-slot--sample{font-size:var(--match-card-font-size);font-weight:600;color:#0f172a;text-align:center;padding:18px 14px;cursor:default;-webkit-user-select:none;user-select:none}.match-card-slot .match-slot{width:100%;height:100%;border:2px dashed rgba(148,163,184,.8);border-radius:18px;display:flex;align-items:center;justify-content:center;transition:border-color .25s ease,background .25s ease,box-shadow .25s ease;padding:0}.match-slot--filled{position:relative;border:none;background:transparent;box-shadow:none}.match-slot--filled:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:20px;background:#22c55e26;box-shadow:0 0 20px #22c55e40;opacity:0;transform:scale(.98);transition:opacity .3s ease,transform .3s ease;pointer-events:none}.match-slot--filled.match-slot--correct:after{opacity:1;transform:scale(1)}.match-slot.is-active{border-color:#6366f1b3;background:#6366f114;box-shadow:none}.match-comparisons{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--match-card-gap);justify-items:center;justify-content:center;margin:0 auto;width:min(100%,calc((var(--match-card-size) * 3) + (var(--match-card-gap) * 2)))}.match-comparison-slot{width:var(--match-card-size);height:var(--match-card-size);display:flex;align-items:center;justify-content:center}.match-card,.match-card-slot,.match-slot{width:var(--match-card-size);height:var(--match-card-size);max-width:100%}.match-panel{position:relative;width:100%}.match-panel--comparisons{position:relative;z-index:0;flex:0 0 auto;width:100%;margin-top:auto}.match-panel--comparisons:before{content:"";position:absolute;top:calc(var(--match-card-gap) * -.5);left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(148,163,184,.6),transparent);opacity:.8;pointer-events:none}.match-panel--comparisons:after{display:none}.match-card{position:relative;padding:18px 14px;border-radius:16px;background:#f8fafce6;border:1px solid rgba(203,213,225,.8);font-size:var(--match-card-font-size);display:flex;align-items:center;justify-content:center;text-align:center;cursor:grab;-webkit-user-select:none;user-select:none;transition:box-shadow .2s ease,transform .2s ease;touch-action:none;line-height:1.1;font-weight:600}.match-card__content{width:100%;display:block;word-break:break-word;-webkit-hyphens:auto;hyphens:auto;text-align:center;font-weight:inherit}.match-card.is-dragging{cursor:grabbing;box-shadow:0 15px 30px #0f172a2e}.match-card.is-placed{border-color:#6366f199;background:#fff;transform:scale(1.01);box-shadow:0 18px 30px #6366f12e}.match-card--selected{border-color:#6366f1cc;box-shadow:0 18px 30px #6366f140}.match-card--preview{pointer-events:none}.match-slot .match-card{width:var(--match-card-size);height:var(--match-card-size);max-width:100%;max-height:100%;transform:scale(1);box-shadow:0 20px 40px #4f46e540;border-radius:18px;font-size:var(--match-card-font-size)}.match-setup__hint{margin-top:8px;color:#dc2626;font-weight:600}.story-setup__options--grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--story-card-gap-md, 16px);align-items:stretch;padding:18px;border-radius:22px;border:1px solid rgba(148,163,184,.35);background:#ffffffe6;box-shadow:0 18px 40px #0f172a14;margin-bottom:var(--story-card-gap-md, 16px)}.story-setup__group .story-setup__options--grid{width:100%;margin-top:var(--story-card-gap-sm, 12px)}.story-setup__options-heading{font-size:15px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#475569;grid-column:1 / -1;margin-bottom:4px}.story-setup__options--comparison{grid-template-columns:repeat(auto-fit,minmax(160px,1fr));padding:16px 20px;gap:14px}body.viewer-match .story-number,body.viewer-match .story-controls{position:fixed;bottom:max(20px,calc(env(safe-area-inset-bottom,0) + 14px));left:50%;transform:translate(-50%);margin-top:0;text-align:center;font-size:13px;color:#94a3b8;pointer-events:none}body.viewer-match .story-number{right:max(24px,calc(env(safe-area-inset-right,0) + 18px));left:auto;transform:none}body.viewer-match .story-controls{color:#a5b4fc}@media (max-width: 820px){.match-session{padding-bottom:96px}body.viewer-match .story-number,body.viewer-match .story-controls{position:static;transform:none;bottom:auto;margin-top:10px;pointer-events:auto}}@media (max-width: 640px){body.viewer-match{--match-card-size: clamp(100px, 26vw, 160px);--match-sample-size: clamp(120px, 32vw, 200px);--match-card-gap: clamp(8px, 3vw, 18px);--match-card-font-size: clamp(16px, calc(var(--match-card-size) * .24), 28px)}.match-session{padding:18px 12px 36px;gap:var(--match-card-gap)}.match-grid{align-content:center}}@media (max-width: 480px),(max-height: 600px){body.viewer-match{--match-card-size: clamp(90px, 24vw, 140px);--match-sample-size: clamp(110px, 30vw, 180px);--match-card-gap: clamp(6px, 2.5vw, 14px);--match-card-font-size: clamp(14px, calc(var(--match-card-size) * .24), 24px)}.match-session{padding:12px 10px 28px;gap:var(--match-card-gap);height:100dvh;max-height:100dvh;overflow-y:auto}.match-grid{grid-template-columns:repeat(auto-fit,minmax(var(--match-card-size),1fr));align-content:center}.match-panel--comparisons{margin-top:var(--match-card-gap)}}@media (max-width: 480px) and (max-height: 480px){body.viewer-match{--match-card-size: clamp(72px, 22vw, 120px);--match-sample-size: clamp(80px, 24vw, 140px);--match-card-gap: clamp(4px, 2vw, 10px);--match-card-font-size: clamp(12px, calc(var(--match-card-size) * .24), 18px)}.match-session{padding:8px 8px 20px;gap:var(--match-card-gap);height:100dvh;max-height:100dvh;overflow-y:auto}.match-stage{gap:var(--match-card-gap);min-height:0}.match-grid{grid-template-columns:repeat(auto-fit,minmax(var(--match-card-size),1fr));align-content:start;row-gap:var(--match-card-gap)}.match-panel--comparisons{margin-top:var(--match-card-gap)}}