*{box-sizing:border-box;margin:0;padding:0}html,body,#root{width:100%;height:100%;font-family:Helvetica Neue,Arial,sans-serif;overflow:hidden}.app-container{background:#f0f4f8;width:100vw;height:100dvh;display:flex}.camera-views{flex:1;min-width:0;position:relative}.camera-views canvas{display:block;width:100%!important;height:100%!important}.view-label{color:#334155;pointer-events:none;-webkit-user-select:none;user-select:none;letter-spacing:.1em;background:#ffffffd9;border-radius:6px;padding:4px 14px;font-size:14px;font-weight:700;position:absolute;top:12px;box-shadow:0 1px 4px #0000001a}.view-label-main{top:auto;bottom:12px;left:12px}.pip-frame{aspect-ratio:4/3;pointer-events:none;-webkit-user-select:none;user-select:none;width:min(38%,260px);position:absolute;top:10px;right:10px}.pip-label{color:#334155;letter-spacing:.1em;background:#ffffffd9;border-radius:4px;padding:2px 8px;font-size:11px;font-weight:700;position:absolute;top:4px;left:4px}.front-overlay{width:100%;height:100%;padding:12px;padding-bottom:calc(12px + env(safe-area-inset-bottom));pointer-events:none;flex-direction:column;justify-content:space-between;display:flex;position:absolute;top:0;left:0}.front-overlay-status{justify-content:flex-start;gap:12px;display:flex}.front-overlay-controls{justify-content:flex-end;align-items:flex-end;gap:16px;display:flex}.front-overlay-controls>*{pointer-events:auto}.score{text-align:center}.score,.timer{background:#ffffffd9;border-radius:8px;padding:6px 14px;box-shadow:0 1px 4px #0000001a}.score-label{color:#f59e0b;letter-spacing:.2em;font-size:12px;font-weight:700}.score-value{color:#f59e0b;font-variant-numeric:tabular-nums;font-size:28px;font-weight:700}.timer{text-align:center}.timer-label{color:#64748b;letter-spacing:.2em;font-size:12px;font-weight:700}.timer-value{color:#1e293b;font-variant-numeric:tabular-nums;font-size:28px;font-weight:700}.timer-warning{color:#f44;animation:.5s infinite alternate timer-blink}@keyframes timer-blink{0%{opacity:1}to{opacity:.4}}.dpad{grid-template-rows:56px 56px;grid-template-columns:56px 56px;gap:4px;display:grid}.dpad-btn{color:#475569;cursor:pointer;-webkit-user-select:none;user-select:none;touch-action:none;background:#fff;border:2px solid #cbd5e1;border-radius:8px;justify-content:center;align-items:center;font-size:20px;transition:background .1s,transform .1s;display:flex;box-shadow:0 2px 4px #00000014}.dpad-btn:active{background:#e2e8f0;transform:scale(.92)}.dpad-btn:disabled{color:#cbd5e1;cursor:default;box-shadow:none;pointer-events:none;background:#f1f5f9;border-color:#e2e8f0}.dpad-btn:disabled:active{background:#f1f5f9;transform:none}.dpad-up{grid-area:1/2}.dpad-left{grid-area:2/1}.dpad-center{background:#e2e8f0;border-radius:50%;grid-area:2/2}.catch-btn{color:#fff;cursor:pointer;-webkit-user-select:none;user-select:none;touch-action:none;letter-spacing:.1em;background:radial-gradient(circle at 35% 35%,#f87171,#dc2626);border:4px solid #fca5a5;border-radius:50%;flex-shrink:0;width:100px;height:100px;font-size:16px;font-weight:700;transition:transform .1s,box-shadow .1s;box-shadow:0 4px 12px #dc26264d}.catch-btn:active{transform:scale(.9);box-shadow:0 2px 8px #dc262680}.congrats-overlay{pointer-events:none;z-index:100;position:absolute;inset:0;overflow:hidden}.congrats-flash{background:radial-gradient(circle,#ffffdcf2,#fff09666 60%,#0000);animation:1.2s ease-out forwards congrats-flash;position:absolute;inset:0}@keyframes congrats-flash{0%{opacity:0}15%{opacity:1}to{opacity:0}}.congrats-rays{background:repeating-conic-gradient(#ffc83c2e 0deg 12deg,#0000 12deg 24deg);width:200vmax;height:200vmax;margin:-100vmax 0 0 -100vmax;animation:14s linear infinite congrats-rays-spin,.8s ease-out congrats-fade-in;position:absolute;top:50%;left:50%}@keyframes congrats-rays-spin{to{transform:rotate(360deg)}}@keyframes congrats-fade-in{0%{opacity:0}to{opacity:1}}.confetti-piece{border-radius:2px;animation-name:confetti-fall;animation-timing-function:linear;animation-iteration-count:infinite;position:absolute;top:-24px}@keyframes confetti-fall{0%{opacity:1;transform:translate(0)rotate(0)rotateY(0)}to{transform:translate(var(--drift,0px), 110vh) rotateZ(var(--spin,720deg)) rotateY(720deg);opacity:.8}}.congrats-sparkle{opacity:0;animation:1.6s ease-in-out infinite congrats-sparkle;position:absolute}@keyframes congrats-sparkle{0%,to{opacity:0;transform:scale(.3)rotate(-20deg)}50%{opacity:1;transform:scale(1.2)rotate(20deg)}}.congrats-center{text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:12px;display:flex;position:absolute;inset:0}.congrats-text{letter-spacing:.05em;background:linear-gradient(90deg,#f44336,#ff9800,#ffeb3b,#4caf50,#2196f3,#9c27b0,#f44336) 0 0/300% 100%;color:#0000;filter:drop-shadow(0 3px #ffffffe6)drop-shadow(0 6px 14px #00000040);-webkit-background-clip:text;background-clip:text;font-size:clamp(32px,9vw,72px);font-weight:900;animation:.9s cubic-bezier(.34,1.56,.64,1) both congrats-pop,3s linear infinite congrats-rainbow,1.4s ease-in-out .9s infinite congrats-bounce}.congrats-sub{color:#fff;background:linear-gradient(90deg,#e91e7b,#ff9800);border-radius:999px;padding:8px 26px;font-size:clamp(16px,4vw,28px);font-weight:700;animation:.9s cubic-bezier(.34,1.56,.64,1) .35s both congrats-pop;box-shadow:0 4px 14px #e91e7b66}@keyframes congrats-pop{0%{opacity:0;transform:scale(0)rotate(-8deg)}to{opacity:1;transform:scale(1)rotate(0)}}@keyframes congrats-rainbow{to{background-position:300% 0}}@keyframes congrats-bounce{0%,to{transform:scale(1)}30%{transform:scale(1.08)rotate(-2deg)}60%{transform:scale(.98)rotate(2deg)}}