*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}

:root{
  --bg:        #fff0f5;
  --bg2:       #ffe4ef;
  --panel:     #ffffff;
  --pink:      #ff85b3;
  --pink-deep: #e8457a;
  --pink-pale: #ffd6e8;
  --pink-soft: #ffecf4;
  --rose:      #ff5c8d;
  --lilac:     #d9a7e8;
  --lilac-pale:#f3e6ff;
  --sky:       #a8d8ff;
  --mint:      #a8f0d0;
  --lemon:     #ffe8a0;
  --text:      #3a1a2c;
  --text-mid:  #7a4060;
  --text-soft: #c090a8;
  --border:    #f5c0d8;
  --shadow:    rgba(232,69,122,0.12);
  --radius:    16px;
  --radius-sm: 10px;
}

html,body{width:100%;height:100%;overflow:hidden;}

body{
  font-family:'Nunito',sans-serif;
  background:var(--bg);
  color:var(--text);
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Ccircle cx='4' cy='4' r='3' fill='%23ff85b3'/%3E%3C/svg%3E") 4 4, auto;
}

/* ── BG PATTERN ── */
body::before{
  content:'';
  position:fixed;inset:0;
  background-image:
    radial-gradient(circle, rgba(255,133,179,0.12) 1px, transparent 1px);
  background-size:28px 28px;
  pointer-events:none;
  z-index:0;
}

/* ── SCREENS ── */
.screen{
  position:fixed;inset:0;
  display:flex;flex-direction:column;
  opacity:0;pointer-events:none;
  transition:opacity 0.4s cubic-bezier(.4,0,.2,1);
  z-index:1;
}
.screen.active{opacity:1;pointer-events:all;}

/* ══════════════════════
   SHARED COMPONENTS
══════════════════════ */

/* Pill header */
.top-bar{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 24px 0;
  flex-shrink:0;
}
.logo-pill{
  background:var(--pink-deep);
  color:#fff;
  font-family:'Press Start 2P',monospace;
  font-size:8px;
  padding:7px 14px;
  border-radius:100px;
  letter-spacing:0.05em;
  box-shadow:0 2px 8px rgba(232,69,122,0.3);
}
.top-right{
  font-size:11px;
  color:var(--text-soft);
  font-weight:600;
  display:flex;align-items:center;gap:8px;
}
.top-right .heart-badge{
  background:var(--pink-pale);
  color:var(--pink-deep);
  padding:4px 10px;
  border-radius:100px;
  font-size:11px;
}

/* Card */
.card{
  background:var(--panel);
  border-radius:var(--radius);
  border:1.5px solid var(--border);
  box-shadow:0 4px 20px var(--shadow);
}

/* Pixel btn */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:11px 22px;
  border-radius:100px;
  border:none;
  font-family:'Press Start 2P',monospace;
  font-size:7px;
  cursor:pointer;
  letter-spacing:0.05em;
  transition:transform 0.15s, box-shadow 0.15s, filter 0.15s;
  white-space:nowrap;
}
.btn:active{transform:scale(0.96);}
.btn-primary{
  background:linear-gradient(135deg,var(--rose),var(--pink-deep));
  color:#fff;
  box-shadow:0 4px 16px rgba(232,69,122,0.35);
}
.btn-primary:hover{box-shadow:0 6px 22px rgba(232,69,122,0.5);transform:translateY(-1px);}
.btn-ghost{
  background:var(--pink-soft);
  color:var(--pink-deep);
  border:1.5px solid var(--pink-pale);
}
.btn-ghost:hover{background:var(--pink-pale);}

/* Section label */
.sec-label{
  font-family:'Press Start 2P',monospace;
  font-size:6px;
  color:var(--text-soft);
  letter-spacing:0.12em;
  text-transform:uppercase;
  margin-bottom:8px;
}

/* Floating sparkles */
.sparkle{
  position:fixed;pointer-events:none;
  font-size:13px;
  animation:sparkle-drift 5s ease-in-out infinite;
  z-index:0;
  opacity:0.6;
}
@keyframes sparkle-drift{
  0%,100%{transform:translateY(0)rotate(0deg);opacity:0.5;}
  50%{transform:translateY(-12px)rotate(20deg);opacity:0.9;}
}

/* ══════════════════════
   SCREEN 1 — START (REDESIGNED)
══════════════════════ */
#s1{
  background:#fff8fc;
  overflow-y:auto;
  overflow-x:hidden;
  display:block;
  opacity:0;pointer-events:none;
  transition:opacity 0.4s cubic-bezier(.4,0,.2,1);
}
#s1.active{opacity:1;pointer-events:all;}

/* Mesh background */
#s1::after{
  content:'';
  position:fixed;inset:0;
  background:
    radial-gradient(ellipse 60% 50% at 20% 20%, rgba(255,180,210,0.22) 0%, transparent 60%),
    radial-gradient(ellipse 50% 60% at 80% 80%, rgba(200,160,255,0.18) 0%, transparent 55%),
    radial-gradient(ellipse 40% 40% at 50% 50%, rgba(255,220,240,0.12) 0%, transparent 70%);
  pointer-events:none;
  z-index:0;
}

/* ── HERO NAV ── */
.s1-nav{
  display:flex;align-items:center;justify-content:space-between;
  padding:20px 40px;
  position:sticky;
  top:0;
  z-index:10;
  border-bottom:1px solid rgba(255,180,210,0.2);
  background:rgba(255,248,252,0.88);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
.s1-nav-logo{
  display:flex;align-items:center;gap:10px;
}
.s1-nav-logomark{
  width:34px;height:34px;
  background:linear-gradient(135deg,var(--rose),var(--pink-deep));
  border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  font-size:16px;
  box-shadow:0 2px 10px rgba(232,69,122,0.3);
}
.s1-nav-name{
  font-family:'Press Start 2P',monospace;
  font-size:9px;
  color:var(--text);
  letter-spacing:0.04em;
}
.s1-nav-name span{color:var(--pink-deep);}
.s1-nav-links{
  display:flex;align-items:center;gap:6px;
}
.s1-nav-tag{
  font-size:10px;font-weight:800;
  color:var(--text-soft);
  padding:5px 12px;
  border-radius:100px;
  background:var(--pink-soft);
  border:1px solid var(--pink-pale);
  letter-spacing:0.04em;
  transition:all 0.2s;
}
.s1-nav-tag:hover{background:var(--pink-pale);color:var(--pink-deep);}

/* ── HERO SECTION ── */
.s1-hero{
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  gap:0;
  min-height:calc(100vh - 75px);
  position:relative;z-index:2;
  max-width:1100px;
  margin:0 auto;
  padding:60px 40px;
}

.s1-hero-left{
  display:flex;flex-direction:column;
  gap:28px;
  padding-right:40px;
}

.s1-eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  background:linear-gradient(135deg,rgba(255,133,179,0.12),rgba(217,167,232,0.12));
  border:1px solid rgba(255,133,179,0.25);
  border-radius:100px;
  padding:6px 14px 6px 10px;
  width:fit-content;
}
.s1-eyebrow-dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--rose);
  animation:pulse-dot 1.8s ease-in-out infinite;
}
@keyframes pulse-dot{0%,100%{transform:scale(1);opacity:1;}50%{transform:scale(1.4);opacity:0.6;}}
.s1-eyebrow-text{
  font-size:10px;font-weight:800;
  color:var(--pink-deep);
  letter-spacing:0.08em;
  text-transform:uppercase;
}

.s1-headline{
  display:flex;flex-direction:column;gap:4px;
}
.s1-headline-line1{
  font-family:'Press Start 2P',monospace;
  font-size:clamp(18px,3.2vw,36px);
  color:var(--text);
  line-height:1.4;
  letter-spacing:-0.01em;
}
.s1-headline-line2{
  font-family:'Press Start 2P',monospace;
  font-size:clamp(18px,3.2vw,36px);
  background:linear-gradient(135deg,var(--rose),var(--pink-deep),var(--lilac));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  line-height:1.4;
}

.s1-subhead{
  font-size:15px;
  color:var(--text-mid);
  line-height:1.7;
  font-weight:600;
  max-width:380px;
}

.s1-cta-row{
  display:flex;align-items:center;gap:14px;
  flex-wrap:wrap;
}
.btn-hero{
  padding:14px 30px;
  font-size:8px;
  border-radius:14px;
  box-shadow:0 6px 28px rgba(232,69,122,0.38);
}
.btn-hero:hover{transform:translateY(-2px);box-shadow:0 10px 32px rgba(232,69,122,0.5);}

.s1-cta-note{
  font-size:11px;
  color:var(--text-soft);
  font-weight:700;
  display:flex;align-items:center;gap:5px;
}

/* ── HERO VISUAL ── */
.s1-hero-right{
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
}

/* Camera illustration */
.cam-illo{
  position:relative;
  flex-shrink:0;
  width:300px;
  animation:hero-float 4s ease-in-out infinite;
}
@keyframes hero-float{0%,100%{transform:translateY(0) rotate(-1deg);}50%{transform:translateY(-14px) rotate(1deg);}}

.cam-illo-body{
  background:linear-gradient(145deg,#fce0ec,#f0c8dc,#e8b8ce);
  border-radius:26px;
  padding:20px;
  box-shadow:
    0 0 0 3px rgba(255,255,255,0.9),
    0 0 0 6px rgba(255,200,220,0.4),
    0 20px 60px rgba(232,69,122,0.25),
    0 4px 16px rgba(232,69,122,0.15);
}
.cam-screen-outer{
  background:#0e0614;
  border-radius:14px;
  padding:6px;
  margin-bottom:16px;
  box-shadow:inset 0 2px 10px rgba(0,0,0,0.5);
}
.cam-screen-display{
  border-radius:10px;
  overflow:hidden;
  aspect-ratio:4/3;
  background:linear-gradient(135deg,#180c22,#280e3a);
  display:flex;align-items:center;justify-content:center;
  flex-direction:column;
  gap:10px;
  position:relative;
}
.cam-scanlines{
  position:absolute;inset:0;
  background:repeating-linear-gradient(0deg,
    transparent 0,transparent 2px,
    rgba(255,180,220,0.04) 2px,rgba(255,180,220,0.04) 4px);
  pointer-events:none;
}
.cam-display-bunny{
  font-size:34px;
  animation:bob 1.6s ease-in-out infinite;
  filter:drop-shadow(0 0 12px rgba(255,133,179,0.8));
  position:relative;z-index:1;
}
@keyframes bob{0%,100%{transform:translateY(0);}50%{transform:translateY(-7px);}}
.cam-display-text{
  font-family:'Press Start 2P',monospace;
  font-size:7px;
  color:rgba(255,180,220,0.55);
  letter-spacing:0.25em;
  position:relative;z-index:1;
}
.cam-bottom-row{
  display:flex;align-items:center;gap:14px;
}
.cam-lens-outer{
  width:56px;height:56px;
  border-radius:50%;
  background:radial-gradient(circle at 32% 32%,#777,#181818);
  box-shadow:0 0 0 4px #d8c0cc,0 0 0 7px #b8a0b4,inset 0 2px 8px rgba(0,0,0,0.8);
}
.cam-knobs{display:flex;gap:7px;flex-wrap:wrap;flex:1;justify-content:flex-end;}
.cam-knob{
  height:11px;border-radius:100px;
  background:linear-gradient(135deg,#ead0dd,#caa8bc);
  box-shadow:0 1px 4px rgba(0,0,0,0.2);
}

/* Floating decorations around camera */
.cam-deco{
  position:absolute;
  font-size:20px;
  animation:cam-float 3s ease-in-out infinite;
  filter:drop-shadow(0 2px 6px rgba(255,133,179,0.4));
}
@keyframes cam-float{0%,100%{transform:translateY(0) rotate(0deg);}50%{transform:translateY(-10px) rotate(8deg);}}

/* Orbiting badge */
.cam-badge{
  position:absolute;
  background:#fff;
  border-radius:14px;
  padding:8px 12px;
  box-shadow:0 4px 20px rgba(232,69,122,0.2);
  border:1px solid var(--pink-pale);
  display:flex;align-items:center;gap:7px;
  white-space:nowrap;
  animation:badge-float 3.5s ease-in-out infinite;
}
@keyframes badge-float{0%,100%{transform:translateY(0);}50%{transform:translateY(-6px);}}
.cam-badge-icon{font-size:18px;}
.cam-badge-text{font-size:10px;font-weight:800;color:var(--text-mid);}
.cam-badge-sub{font-size:9px;color:var(--text-soft);font-weight:600;}

/* ── FEATURES ROW ── */
.s1-features{
  position:relative;z-index:2;
  border-top:1px solid rgba(255,180,210,0.2);
  background:linear-gradient(180deg,rgba(255,248,252,0),rgba(255,240,248,0.6));
  padding:48px 40px;
}
.s1-features-inner{
  max-width:1100px;
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
}
.s1-feat{
  background:#fff;
  border-radius:20px;
  border:1px solid rgba(255,190,215,0.3);
  padding:28px 24px;
  display:flex;flex-direction:column;gap:12px;
  box-shadow:0 2px 20px rgba(232,69,122,0.06);
  transition:transform 0.2s, box-shadow 0.2s;
}
.s1-feat:hover{
  transform:translateY(-4px);
  box-shadow:0 8px 30px rgba(232,69,122,0.12);
}
.s1-feat-icon{
  width:46px;height:46px;
  border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  font-size:22px;
  flex-shrink:0;
}
.s1-feat-title{
  font-family:'Press Start 2P',monospace;
  font-size:8px;
  color:var(--text);
  line-height:1.8;
}
.s1-feat-desc{
  font-size:12px;
  color:var(--text-mid);
  font-weight:600;
  line-height:1.7;
}

/* ── FOOTER BAR ── */
.s1-footer{
  position:relative;z-index:2;
  padding:20px 40px;
  border-top:1px solid rgba(255,180,210,0.2);
  display:flex;align-items:center;justify-content:space-between;
  font-size:10px;
  color:var(--text-soft);
  font-weight:700;
}

/* ── LEGACY (needed by other screens) ── */
@keyframes pulse-glow{0%,100%{opacity:0.5;transform:scale(1);}50%{opacity:1;transform:scale(1.1);}}
@keyframes twinkle-row{0%,100%{opacity:1;}50%{opacity:0.4;}}
.dialog-mascot{font-size:48px;animation:bob 1.4s ease-in-out infinite;}
.dialog-glow{position:absolute;inset:-10px;border-radius:50%;background:radial-gradient(circle,rgba(255,133,179,0.25),transparent 70%);animation:pulse-glow 2s ease-in-out infinite;}
.dialog-msg{font-size:13px;font-weight:700;color:var(--text-mid);line-height:1.6;}
.dialog-stars{display:flex;gap:5px;font-size:14px;animation:twinkle-row 1.2s steps(2) infinite;}
.title-block{text-align:center;}
.title-en{font-family:'Press Start 2P',monospace;font-size:clamp(11px,2vw,15px);color:var(--pink-deep);line-height:1.7;text-shadow:0 2px 0 var(--pink-pale);}
.title-jp{font-size:13px;color:var(--text-soft);letter-spacing:0.2em;margin-top:4px;font-weight:700;}

/* ══════════════════════
   SCREEN 2 — STRIP SELECTION (REDESIGNED)
══════════════════════ */
#s2{
  background:#fdf7ff;
  overflow:hidden;
  flex-direction:column;
}

/* ── S2 NAV ── */
.s2-nav{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 28px;
  border-bottom:1px solid rgba(255,180,210,0.25);
  background:rgba(253,247,255,0.9);
  backdrop-filter:blur(12px);
  flex-shrink:0;
}
.s2-nav-left{display:flex;align-items:center;gap:12px;}
.s2-back-btn{
  display:flex;align-items:center;gap:7px;
  background:rgba(255,255,255,0.9);
  border:1.5px solid var(--border);
  border-radius:100px;
  padding:7px 14px;
  font-size:10px;font-weight:800;
  color:var(--text-mid);
  cursor:pointer;
  transition:all 0.18s;
}
.s2-back-btn:hover{background:#fff;border-color:var(--pink);}
.s2-nav-title{
  font-family:'Press Start 2P',monospace;
  font-size:9px;
  color:var(--text);
  letter-spacing:0.04em;
}
.s2-nav-step{
  display:flex;align-items:center;gap:6px;
}
.s2-step-dot{
  width:8px;height:8px;border-radius:50%;
  background:var(--pink-pale);
  transition:background 0.2s;
}
.s2-step-dot.on{background:var(--rose);}

/* ── MAIN LAYOUT ── */
.s2-layout{
  flex:1;
  display:grid;
  grid-template-columns:220px 1fr 200px;
  gap:0;
  min-height:0;
  overflow:hidden;
}

/* ── LEFT PANEL: theme + shots ── */
.s2-left{
  border-right:1px solid rgba(255,180,210,0.2);
  padding:20px 18px;
  display:flex;flex-direction:column;gap:20px;
  overflow-y:auto;
  scrollbar-width:none;
  background:rgba(255,248,252,0.6);
}
.s2-left::-webkit-scrollbar{display:none;}

.s2-section-title{
  font-family:'Press Start 2P',monospace;
  font-size:6.5px;
  color:var(--text-soft);
  letter-spacing:0.12em;
  text-transform:uppercase;
  margin-bottom:10px;
  display:flex;align-items:center;gap:6px;
}
.s2-section-title::after{
  content:'';flex:1;height:1px;
  background:linear-gradient(90deg,var(--pink-pale),transparent);
}

/* Theme grid */
.theme-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:7px;
}
.theme-card{
  border-radius:14px;
  border:2px solid transparent;
  cursor:pointer;
  transition:all 0.2s cubic-bezier(.34,1.56,.64,1);
  position:relative;
  overflow:hidden;
  display:flex;flex-direction:column;
  align-items:center;justify-content:flex-end;
  padding:8px 6px;
  min-height:72px;
  box-shadow:0 2px 8px rgba(0,0,0,0.06);
}
.theme-card:hover{transform:translateY(-2px) scale(1.03);box-shadow:0 6px 18px rgba(0,0,0,0.1);}
.theme-card.active{
  border-color:var(--pink-deep);
  box-shadow:0 0 0 3px var(--pink-pale),0 6px 18px rgba(232,69,122,0.2);
}
.theme-card-emoji{
  font-size:22px;
  position:absolute;top:8px;left:50%;transform:translateX(-50%);
  filter:drop-shadow(0 2px 3px rgba(0,0,0,0.1));
  transition:transform 0.2s;
}
.theme-card:hover .theme-card-emoji{transform:translateX(-50%) scale(1.2) rotate(-5deg);}
.theme-card-label{font-family:'Press Start 2P',monospace;font-size:5.5px;color:#fff;text-shadow:0 1px 4px rgba(0,0,0,0.35);letter-spacing:0.04em;text-align:center;position:relative;z-index:1;}
.theme-card-sub{font-size:8px;font-weight:800;color:rgba(255,255,255,0.75);text-align:center;position:relative;z-index:1;margin-top:1px;}
.theme-active-badge{
  position:absolute;top:5px;right:5px;
  background:#fff;color:var(--pink-deep);
  font-size:7px;width:16px;height:16px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  opacity:0;transform:scale(0);
  transition:all 0.2s cubic-bezier(.34,1.56,.64,1);
  box-shadow:0 1px 5px rgba(232,69,122,0.3);
}
.theme-card.active .theme-active-badge{opacity:1;transform:scale(1);}
.tc-pink    {background:linear-gradient(145deg,#ffb3d1,#ff80b3,#ff5c8d);}
.tc-classic {background:linear-gradient(145deg,#e8e0d8,#d4c8bc,#b8a89c);}
.tc-noir    {background:linear-gradient(145deg,#3a3a3a,#1e1e1e,#0a0a0a);}
.tc-sky     {background:linear-gradient(145deg,#a0d8ff,#70c0ff,#40a0ff);}
.tc-lavender{background:linear-gradient(145deg,#d8a8ff,#c080f8,#9c40e8);}
.tc-matcha  {background:linear-gradient(145deg,#a8e8c0,#70d898,#40b870);}

/* Shot count */
.count-bubbles{display:flex;gap:8px;align-items:center;}
.count-bubble{
  flex:1;height:52px;
  border-radius:12px;
  border:2px solid var(--border);
  background:#fff;
  font-family:'Press Start 2P',monospace;
  font-size:10px;color:var(--text-mid);
  cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  transition:all 0.2s cubic-bezier(.34,1.56,.64,1);
  gap:2px;
  box-shadow:0 2px 6px rgba(232,69,122,0.06);
}
.count-bubble:hover{border-color:var(--pink);transform:translateY(-2px);}
.count-bubble.active{
  background:linear-gradient(135deg,#ff99c0,var(--rose),var(--pink-deep));
  border-color:transparent;color:#fff;
  box-shadow:0 4px 14px rgba(232,69,122,0.4);
  transform:translateY(-1px);
}
.count-bubble-num{font-size:14px;line-height:1;}
.count-bubble-label{font-size:5px;opacity:0.75;font-family:'Nunito',sans-serif;font-weight:800;}
.count-separator{display:none;}

/* ── MIDDLE: FRAME PICKER ── */
.s2-middle{
  display:flex;flex-direction:column;
  overflow:hidden;
  padding:20px 20px 16px;
  gap:14px;
}

/* Frame categories tabs */
.frame-cats{
  display:flex;gap:6px;
  flex-shrink:0;
  flex-wrap:wrap;
}
.frame-cat-btn{
  padding:5px 13px;
  border-radius:100px;
  border:1.5px solid var(--border);
  background:#fff;
  font-size:10px;font-weight:800;
  color:var(--text-soft);
  cursor:pointer;
  transition:all 0.18s;
  white-space:nowrap;
}
.frame-cat-btn:hover{border-color:var(--pink);color:var(--pink-deep);}
.frame-cat-btn.active{
  background:linear-gradient(135deg,var(--rose),var(--pink-deep));
  border-color:transparent;color:#fff;
  box-shadow:0 3px 10px rgba(232,69,122,0.3);
}

/* Frame gallery — big cards showing actual strip templates */
.frame-gallery{
  flex:1;
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(88px, 1fr));
  gap:12px;
  overflow-y:auto;
  padding:4px 2px 8px;
  scrollbar-width:none;
  align-content:start;
}
.frame-gallery::-webkit-scrollbar{display:none;}

.frame-card{
  display:flex;flex-direction:column;
  align-items:center;gap:7px;
  cursor:pointer;
}
.frame-strip-thumb{
  width:80px;
  aspect-ratio:5/12;
  border-radius:10px;
  position:relative;
  overflow:hidden;
  border:2.5px solid transparent;
  transition:all 0.22s cubic-bezier(.34,1.56,.64,1);
  box-shadow:0 3px 12px rgba(0,0,0,0.1);
  display:flex;flex-direction:column;
  gap:0;
}
.frame-card:hover .frame-strip-thumb{transform:translateY(-3px) scale(1.03);box-shadow:0 8px 22px rgba(0,0,0,0.15);}
.frame-card.active .frame-strip-thumb{
  border-color:var(--pink-deep);
  box-shadow:0 0 0 3px var(--pink-pale),0 6px 20px rgba(232,69,122,0.3);
  transform:translateY(-2px) scale(1.02);
}
.frame-card-name{
  font-size:9px;font-weight:800;
  color:var(--text-mid);
  text-align:center;
  font-family:'Nunito',sans-serif;
  transition:color 0.15s;
}
.frame-card.active .frame-card-name{color:var(--pink-deep);}

/* ── STRIP THUMB STYLES (actual strip previews) ── */

/* Photo slot inside strip */
.fst-slot{
  flex:1;
  margin:0 8px;
  background:rgba(255,255,255,0.25);
  position:relative;
  border-radius:3px;
  overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}
.fst-slot::after{content:'♡';font-size:7px;color:rgba(255,255,255,0.4);font-family:'Press Start 2P',monospace;}

/* Spacer between slots */
.fst-gap{height:5px;flex-shrink:0;}
/* Top/bottom padding */
.fst-pad{flex-shrink:0;}

/* PLAIN */
.fst-plain{background:linear-gradient(160deg,#fff0f8,#fde8f8);}
.fst-plain .fst-slot{background:rgba(255,200,220,0.3);border-radius:4px;margin:0 6px;}
.fst-plain .fst-slot::after{color:rgba(232,100,140,0.3);}
.fst-plain .fst-pad{height:8px;}

/* FILM */
.fst-film{background:#141414;}
.fst-film .fst-slot{background:rgba(255,255,255,0.12);margin:0 10px;border-radius:2px;}
.fst-film .fst-slot::after{color:rgba(255,255,255,0.3);}
.fst-film .fst-pad{height:6px;}
.fst-film::before,.fst-film::after{
  content:'';position:absolute;top:0;bottom:0;width:8px;
  background:repeating-linear-gradient(180deg,#141414 0,#141414 2px,rgba(255,255,255,0.85) 2px,rgba(255,255,255,0.85) 5px,#141414 5px,#141414 8px);
  z-index:2;
}
.fst-film::before{left:0;}.fst-film::after{right:0;}

/* POLAROID */
.fst-polaroid{background:#fffcfa;}
.fst-polaroid .fst-slot{background:rgba(200,180,170,0.2);margin:0 7px;border-radius:2px;}
.fst-polaroid .fst-slot::after{color:rgba(100,60,40,0.2);}
.fst-polaroid-bottom{height:18px;background:#fffcfa;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:7px;color:rgba(150,120,100,0.5);border-top:0.5px solid rgba(0,0,0,0.06);}

/* RED LOVE (gingham-r style like reference image 1) */
.fst-redlove{background:repeating-linear-gradient(0deg,rgba(180,30,30,0.18) 0,rgba(180,30,30,0.18) 5px,transparent 5px,transparent 10px),repeating-linear-gradient(90deg,rgba(180,30,30,0.18) 0,rgba(180,30,30,0.18) 5px,transparent 5px,transparent 10px),#fff8f5;}
.fst-redlove .fst-slot{background:rgba(255,255,255,0.85);margin:0 9px;border-radius:3px;border:1px solid rgba(180,30,30,0.15);}
.fst-redlove .fst-slot::after{color:rgba(180,30,30,0.25);}
.fst-redlove .fst-pad{height:8px;}

/* BOW STRIPE */
.fst-bowstripe{background:linear-gradient(180deg,#fff5f8 0%,#fff5f8 100%);}
.fst-bowstripe .fst-slot{background:rgba(255,160,190,0.2);margin:0 7px;border-radius:3px;border:1px solid rgba(255,160,190,0.3);}
.fst-bowstripe .fst-slot::after{color:rgba(232,69,122,0.2);}
.fst-bowstripe-bow{height:16px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:12px;}

/* DARK KAWAII (like reference image 2 - brown/chocolate) */
.fst-choco{background:#3d2010;}
.fst-choco .fst-slot{background:rgba(0,0,0,0.55);margin:0 9px;border-radius:3px;border:0.5px solid rgba(255,200,140,0.2);}
.fst-choco .fst-slot::after{color:rgba(255,200,140,0.25);}
.fst-choco .fst-pad{height:8px;}
.fst-choco-label{font-family:'Press Start 2P',monospace;font-size:4px;color:rgba(255,200,140,0.6);text-align:center;padding:2px 4px;flex-shrink:0;}

/* PINK KAWAII (like reference image 2 - pink dots) */
.fst-pinkdot{background:radial-gradient(circle,rgba(255,255,255,0.5) 1px,transparent 1px) 0 0 / 7px 7px, #f7b8d4;}
.fst-pinkdot .fst-slot{background:rgba(0,0,0,0.5);margin:0 9px;border-radius:4px;border:0.5px solid rgba(255,255,255,0.3);}
.fst-pinkdot .fst-slot::after{color:rgba(255,255,255,0.3);}
.fst-pinkdot .fst-pad{height:8px;}
.fst-pinkdot-label{font-family:'Press Start 2P',monospace;font-size:4px;color:rgba(255,255,255,0.65);text-align:center;padding:2px 4px;flex-shrink:0;}

/* FILM NOIR (black with checkerboard bottom like ref image 3) */
.fst-filmnoir{background:#0d0d0d;}
.fst-filmnoir .fst-slot{background:rgba(255,255,255,0.1);margin:0 10px;border-radius:2px;border:0.5px solid rgba(255,255,255,0.15);}
.fst-filmnoir .fst-slot:nth-child(3){border-radius:50%;margin:4px 14px;}
.fst-filmnoir .fst-slot::after{color:rgba(255,255,255,0.2);}
.fst-filmnoir .fst-pad{height:6px;}
.fst-filmnoir-check{height:12px;flex-shrink:0;background:repeating-linear-gradient(90deg,#fff 0,#fff 5px,#000 5px,#000 10px);}
.fst-filmnoir::before,.fst-filmnoir::after{content:'';position:absolute;top:0;bottom:0;width:8px;background:repeating-linear-gradient(180deg,#0d0d0d 0,#0d0d0d 2px,rgba(255,255,255,0.9) 2px,rgba(255,255,255,0.9) 5px,#0d0d0d 5px,#0d0d0d 8px);z-index:2;}
.fst-filmnoir::before{left:0;}.fst-filmnoir::after{right:0;}

/* NAVY SCRAPBOOK (like ref 3 - dark navy with wavy borders) */
.fst-navy{background:#131b2e;}
.fst-navy .fst-slot{background:rgba(255,255,255,0.08);margin:0 8px;border-radius:3px;border:1px dashed rgba(255,255,255,0.18);}
.fst-navy .fst-slot::after{color:rgba(200,210,255,0.25);}
.fst-navy .fst-pad{height:8px;}
.fst-navy-label{font-family:'Press Start 2P',monospace;font-size:4px;color:rgba(180,190,255,0.5);text-align:center;padding:2px 4px;flex-shrink:0;}

/* CHERRY */
.fst-cherry{background:#fff5f5;}
.fst-cherry .fst-slot{background:rgba(255,255,255,0.7);margin:0 9px;border-radius:3px;}
.fst-cherry .fst-slot::after{color:rgba(200,40,60,0.2);}
.fst-cherry .fst-pad{height:8px;}
.fst-cherry-border{position:absolute;inset:0;pointer-events:none;overflow:hidden;}
.fst-cherry-border::before{content:'🍒🍒🍒🍒🍒🍒🍒🍒🍒🍒🍒🍒🍒🍒🍒🍒';position:absolute;left:0;right:0;top:0;font-size:7px;line-height:1.1;word-break:break-all;opacity:0.45;}
.fst-cherry-border::after{content:'🍒🍒🍒🍒🍒🍒🍒🍒🍒🍒🍒🍒🍒🍒🍒🍒';position:absolute;left:0;right:0;bottom:0;font-size:7px;line-height:1.1;word-break:break-all;opacity:0.45;}

/* DAISY */
.fst-daisy{background:#f0f0ff;}
.fst-daisy .fst-slot{background:rgba(255,255,255,0.7);margin:0 9px;border-radius:3px;}
.fst-daisy .fst-slot::after{color:rgba(100,80,200,0.2);}
.fst-daisy .fst-pad{height:8px;}
.fst-daisy-border{position:absolute;inset:0;pointer-events:none;overflow:hidden;}
.fst-daisy-border::before{content:'🌼🌼🌼🌼🌼🌼🌼🌼🌼🌼🌼🌼🌼🌼🌼🌼';position:absolute;left:0;right:0;top:0;font-size:7px;line-height:1.1;word-break:break-all;opacity:0.5;}
.fst-daisy-border::after{content:'🌼🌼🌼🌼🌼🌼🌼🌼🌼🌼🌼🌼🌼🌼🌼🌼';position:absolute;left:0;right:0;bottom:0;font-size:7px;line-height:1.1;word-break:break-all;opacity:0.5;}

/* HEARTS */
.fst-hearts{background:#fff0f8;}
.fst-hearts .fst-slot{background:rgba(255,255,255,0.7);margin:0 9px;border-radius:3px;}
.fst-hearts .fst-slot::after{color:rgba(232,69,122,0.2);}
.fst-hearts .fst-pad{height:8px;}
.fst-hearts-border{position:absolute;inset:0;pointer-events:none;overflow:hidden;}
.fst-hearts-border::before{content:'💕💕💕💕💕💕💕💕💕💕💕💕💕💕💕💕';position:absolute;left:0;right:0;top:0;font-size:7px;line-height:1.1;word-break:break-all;opacity:0.5;}
.fst-hearts-border::after{content:'💕💕💕💕💕💕💕💕💕💕💕💕💕💕💕💕';position:absolute;left:0;right:0;bottom:0;font-size:7px;line-height:1.1;word-break:break-all;opacity:0.5;}

/* LEOPARD */
.fst-leopard{background:#c8a040;}
.fst-leopard .fst-slot{background:rgba(255,255,255,0.2);margin:0 9px;border-radius:3px;}
.fst-leopard .fst-slot::after{color:rgba(255,255,200,0.3);}
.fst-leopard .fst-pad{height:8px;}

/* LIPS */
.fst-lips{background:#cc2040;}
.fst-lips .fst-slot{background:rgba(255,255,255,0.15);margin:0 9px;border-radius:3px;}
.fst-lips .fst-slot::after{color:rgba(255,200,210,0.3);}
.fst-lips .fst-pad{height:8px;}

/* CITRUS */
.fst-citrus{background:#ffcc60;}
.fst-citrus .fst-slot{background:rgba(255,255,255,0.35);margin:0 9px;border-radius:3px;}
.fst-citrus .fst-slot::after{color:rgba(180,100,0,0.25);}
.fst-citrus .fst-pad{height:8px;}

/* BOWS PATTERN */
.fst-bowspat{background:#b03060;}
.fst-bowspat .fst-slot{background:rgba(255,255,255,0.15);margin:0 9px;border-radius:3px;}
.fst-bowspat .fst-slot::after{color:rgba(255,200,220,0.3);}
.fst-bowspat .fst-pad{height:8px;}

/* CLIPBOARD */
.fst-clip{background:#1a1a1a;}
.fst-clip .fst-slot{background:rgba(255,255,255,0.1);margin:0 9px;border-radius:3px;}
.fst-clip .fst-slot::after{color:rgba(255,255,255,0.2);}
.fst-clip-top{height:22px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:14px;background:#2a2a2a;}

/* BLUE GINGHAM */
.fst-ginghamb{background:repeating-linear-gradient(0deg,rgba(70,120,210,0.2) 0,rgba(70,120,210,0.2) 5px,transparent 5px,transparent 10px),repeating-linear-gradient(90deg,rgba(70,120,210,0.2) 0,rgba(70,120,210,0.2) 5px,transparent 5px,transparent 10px),#eef4ff;}
.fst-ginghamb .fst-slot{background:rgba(255,255,255,0.8);margin:0 9px;border-radius:3px;}
.fst-ginghamb .fst-slot::after{color:rgba(70,120,210,0.2);}
.fst-ginghamb .fst-pad{height:8px;}

/* LILAC GINGHAM */
.fst-ginghamp{background:repeating-linear-gradient(0deg,rgba(140,80,200,0.2) 0,rgba(140,80,200,0.2) 5px,transparent 5px,transparent 10px),repeating-linear-gradient(90deg,rgba(140,80,200,0.2) 0,rgba(140,80,200,0.2) 5px,transparent 5px,transparent 10px),#f4eeff;}
.fst-ginghamp .fst-slot{background:rgba(255,255,255,0.8);margin:0 9px;border-radius:3px;}
.fst-ginghamp .fst-slot::after{color:rgba(140,80,200,0.2);}
.fst-ginghamp .fst-pad{height:8px;}

/* ── RIGHT PANEL: preview + go ── */
.s2-right-col{
  border-left:1px solid rgba(255,180,210,0.2);
  padding:20px 16px;
  display:flex;flex-direction:column;
  gap:14px;
  background:rgba(255,248,252,0.6);
}

/* Mascot panel */
.s2-mascot-panel{
  background:#fff;
  border-radius:18px;
  border:1.5px solid var(--pink-pale);
  box-shadow:0 3px 14px rgba(232,69,122,0.08);
  padding:14px 12px;
  display:flex;flex-direction:column;align-items:center;
  gap:8px;text-align:center;
  position:relative;overflow:hidden;flex-shrink:0;
}
.s2-mascot-panel::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 50% 0%,rgba(255,180,220,0.12),transparent 60%);pointer-events:none;}
.s2-mascot-emoji{font-size:42px;animation:mascot-bounce 1.4s cubic-bezier(.36,.07,.19,.97) infinite;filter:drop-shadow(0 3px 10px rgba(255,133,179,0.45));position:relative;z-index:1;}
@keyframes mascot-bounce{0%,100%{transform:translateY(0)rotate(-3deg);}25%{transform:translateY(-9px)rotate(2deg)scale(1.05);}75%{transform:translateY(-3px)rotate(-1deg);}}
.s2-speech-bubble{background:linear-gradient(135deg,#fff0f5,#ffe8f8);border:1.5px solid var(--pink-pale);border-radius:12px;padding:7px 9px;font-size:10px;font-weight:800;color:var(--text-mid);line-height:1.5;position:relative;z-index:1;width:100%;}
.s2-speech-bubble::before{content:'';position:absolute;top:-7px;left:50%;transform:translateX(-50%);width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:7px solid var(--pink-pale);}
.s2-speech-bubble::after{content:'';position:absolute;top:-5px;left:50%;transform:translateX(-50%);width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:6px solid #fff0f5;}
.s2-hearts{display:flex;gap:3px;font-size:12px;animation:twinkle-row 1.4s steps(2) infinite;}

/* Strip preview panel */
.s2-preview-panel{
  background:#fff;
  border-radius:18px;
  border:1.5px solid var(--pink-pale);
  box-shadow:0 3px 14px rgba(232,69,122,0.08);
  padding:12px 10px;
  display:flex;flex-direction:column;
  gap:8px;flex:1;min-height:0;
}
.s2-preview-label{font-family:'Press Start 2P',monospace;font-size:5.5px;color:var(--text-soft);letter-spacing:0.15em;text-align:center;}
.film-strip-preview{
  flex:1;
  background:linear-gradient(180deg,#1a1a2e,#16162a);
  border-radius:10px;
  padding:7px 4px;
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;gap:4px;
  min-height:60px;
}
.film-strip-preview::before,.film-strip-preview::after{
  content:'';position:absolute;top:0;bottom:0;width:7px;
  background:repeating-linear-gradient(180deg,#1a1a2e 0px,#1a1a2e 2px,#2a2a3e 2px,#2a2a3e 3px,rgba(255,255,255,0.88) 3px,rgba(255,255,255,0.88) 5px,#2a2a3e 5px,#2a2a3e 6px,#1a1a2e 6px,#1a1a2e 9px);
  z-index:1;
}
.film-strip-preview::before{left:0;}.film-strip-preview::after{right:0;}
.film-frames{display:flex;flex-direction:column;gap:3px;padding:0 10px;flex:1;justify-content:center;}
.film-frame{flex:1;border-radius:3px;overflow:hidden;position:relative;transition:background 0.4s;min-height:14px;}
.film-frame::after{content:'♡';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,0.22);font-size:8px;font-family:'Press Start 2P',monospace;}

/* Go button */
.s2-go-btn{
  width:100%;
  background:linear-gradient(135deg,#ff99c0,var(--rose),var(--pink-deep));
  color:#fff;border:none;border-radius:14px;
  font-family:'Press Start 2P',monospace;font-size:7px;
  padding:13px 8px;cursor:pointer;letter-spacing:0.06em;
  box-shadow:0 4px 18px rgba(232,69,122,0.38);
  transition:all 0.2s cubic-bezier(.34,1.56,.64,1);
  flex-shrink:0;position:relative;overflow:hidden;
}
.s2-go-btn::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,0.18),transparent);}
.s2-go-btn:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 7px 26px rgba(232,69,122,0.52);}
.s2-go-btn:active{transform:scale(0.97);}

/* Old compat classes - keep hidden */
.count-card,.count-row,.count-label-txt,.count-pills,.s2-right,.mascot-card,.mid-col,.filmstrip-card,.film-row-wrap{display:none!important;}
.count-pill{display:none;}
.s2-frames-area,.frame-scroll,.frame-chip,.frame-thumb,.frame-thumb-photo,.frame-label{display:none;}
.s2-body,.s2-themes-area,.s2-count-area{display:none;}

/* Stickers */
.s2-sticker{position:absolute;pointer-events:none;font-size:20px;animation:sticker-wobble 3s ease-in-out infinite;z-index:0;opacity:0.65;}
@keyframes sticker-wobble{0%,100%{transform:rotate(-6deg)scale(1);}33%{transform:rotate(4deg)scale(1.08);}66%{transform:rotate(-2deg)scale(0.96);}}

/* ══════════════════════
   FILTER PICKER (Screen 3)
══════════════════════ */
.filter-strip{
  display:flex;gap:7px;
  overflow-x:auto;
  padding:2px 0 4px;
  scrollbar-width:none;
}
.filter-strip::-webkit-scrollbar{display:none;}

.filter-chip{
  display:flex;flex-direction:column;align-items:center;gap:4px;
  cursor:pointer;
  flex-shrink:0;
  transition:transform 0.2s cubic-bezier(.34,1.56,.64,1);
}
.filter-chip:hover{transform:scale(1.1);}
.filter-chip.active{transform:scale(1.12);}

.filter-preview{
  width:44px;height:44px;
  border-radius:12px;
  border:2.5px solid transparent;
  overflow:hidden;
  position:relative;
  transition:border-color 0.15s, box-shadow 0.15s;
  flex-shrink:0;
}
.filter-chip.active .filter-preview{
  border-color:var(--pink-deep);
  box-shadow:0 0 0 2px var(--pink-pale), 0 4px 12px rgba(232,69,122,0.3);
}

/* Each filter preview swatch */
.filter-preview-inner{
  width:100%;height:100%;
  border-radius:9px;
  position:relative;
  overflow:hidden;
}
/* Base gradient per filter — inspired by film/analog aesthetics */
.fp-none   {background:linear-gradient(135deg,#f8d0e8,#d0e8f8,#d8f8d0);}
.fp-dusk   {background:linear-gradient(160deg,#8090c8,#c090b0,#e8c8d8,#7080b0);}
.fp-grain  {background:linear-gradient(135deg,#b8c8a0,#a0b080,#c8c8a8);filter:contrast(1.1);}
.fp-lofi   {background:linear-gradient(135deg,#c89060,#a06040,#e0b080);}
.fp-double {background:linear-gradient(135deg,#d0e8d0,#a8c8a8,#e8f0e0);}
.fp-y2k    {background:linear-gradient(135deg,#ff99cc,#cc66ff,#66ccff);}
.fp-mist   {background:linear-gradient(135deg,#dce8f0,#c8d8e8,#e8eef8);}
.fp-velvet {background:linear-gradient(135deg,#2a0a1e,#4a1030,#8a2050,#ff6090);}
.fp-flower {background:linear-gradient(135deg,#ffe0f0,#ffc8e8,#ffd6f0,#ffb8d8);}
.fp-lily   {background:linear-gradient(135deg,#e8f0e0,#d0e8d8,#f0f8f0,#c8e0d0);}
.fp-stars  {background:linear-gradient(135deg,#0a0818,#1a1040,#3a2060,#8050c0);}
.fp-lace   {background:linear-gradient(135deg,#fff8f0,#f8e8d8,#f0d8c8,#e8c8b0);}
.fp-rain   {background:linear-gradient(160deg,#c8d8e8,#a8c0d8,#d8e8f0,#b8c8e0);}

/* Emoji overlays on filter swatches */
.filter-preview-inner::after{
  content:attr(data-emoji);
  position:absolute;bottom:2px;right:3px;
  font-size:12px;line-height:1;
}

.filter-label{
  font-size:7px;font-weight:800;
  color:var(--text-mid);
  font-family:'Nunito',sans-serif;
  white-space:nowrap;
}
.filter-chip.active .filter-label{color:var(--pink-deep);}

/* Live video CSS filter overlay */
#vid{transition:filter 0.3s;}

/* ══════════════════════
   SCREEN 3 — CAMERA (redesigned)
══════════════════════ */
#s3{
  background:linear-gradient(145deg,#fff5f9 0%,#fdf0ff 50%,#fff0f8 100%);
  overflow:hidden;
}

/* Cute top nav bar */
.s3-nav{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 20px 0;
  flex-shrink:0;
}
.s3-nav-left{display:flex;align-items:center;gap:10px;}
.s3-back-btn{
  display:flex;align-items:center;gap:5px;
  background:#fff;
  border:1.5px solid var(--border);
  border-radius:100px;
  padding:6px 14px;
  font-family:'Press Start 2P',monospace;
  font-size:6px;
  color:var(--text-mid);
  cursor:pointer;
  transition:all 0.18s;
  box-shadow:0 2px 8px var(--shadow);
}
.s3-back-btn:hover{border-color:var(--pink);color:var(--pink-deep);transform:translateX(-2px);}
.s3-title-pill{
  background:linear-gradient(135deg,var(--rose),var(--pink-deep));
  color:#fff;
  font-family:'Press Start 2P',monospace;
  font-size:7px;
  padding:7px 16px;
  border-radius:100px;
  letter-spacing:0.06em;
  box-shadow:0 3px 12px rgba(232,69,122,0.3);
}
.s3-nav-right{display:flex;align-items:center;gap:8px;}
.s3-status-badge{
  background:#fff;
  border:1.5px solid var(--border);
  border-radius:100px;
  padding:5px 13px;
  font-family:'Press Start 2P',monospace;
  font-size:6px;
  color:var(--pink-deep);
  box-shadow:0 2px 8px var(--shadow);
  animation:badge-breathe 2.5s ease-in-out infinite;
}
@keyframes badge-breathe{0%,100%{box-shadow:0 2px 8px var(--shadow);}50%{box-shadow:0 2px 16px rgba(232,69,122,0.22);}}

/* Main 3-column layout */
.s3-body{
  flex:1;
  display:grid;
  grid-template-columns:170px 1fr 200px;
  gap:12px;
  padding:10px 18px 14px;
  min-height:0;
  overflow:hidden;
}

/* ── LEFT COLUMN: strip preview + filter ── */
.s3-left{
  display:flex;flex-direction:column;gap:10px;min-height:0;
}

/* Strip preview panel in left col */
.s3-strip-panel{
  background:#fff;
  border-radius:18px;
  border:1.5px solid var(--pink-pale);
  box-shadow:0 3px 14px var(--shadow);
  padding:12px 10px;
  display:flex;flex-direction:column;align-items:center;gap:8px;
  flex-shrink:0;
}
.s3-strip-panel-label{
  font-family:'Press Start 2P',monospace;
  font-size:5.5px;
  color:var(--text-soft);
  letter-spacing:0.14em;
  text-align:center;
}
#s3-strip-preview{
  display:flex;align-items:center;justify-content:center;
}

/* Shot dots progress */
.shot-dots-row{
  display:flex;gap:5px;align-items:center;
}
.shot-dot{
  width:8px;height:8px;border-radius:50%;
  background:var(--pink-pale);
  border:1.5px solid var(--border);
  transition:all 0.25s cubic-bezier(.34,1.56,.64,1);
}
.shot-dot.filled{
  background:linear-gradient(135deg,var(--rose),var(--pink-deep));
  border-color:transparent;
  box-shadow:0 0 8px rgba(232,69,122,0.45);
  transform:scale(1.15);
}

/* Filter panel */
.s3-filter-panel{
  background:#fff;
  border-radius:18px;
  border:1.5px solid var(--pink-pale);
  box-shadow:0 3px 14px var(--shadow);
  padding:11px 10px 10px;
  display:flex;flex-direction:column;gap:8px;
  flex:1;min-height:0;overflow:hidden;
}
.s3-filter-panel-label{
  font-family:'Press Start 2P',monospace;
  font-size:5.5px;
  color:var(--text-soft);
  letter-spacing:0.14em;
  text-align:center;
  flex-shrink:0;
}
.filter-strip{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px;
  overflow-y:auto;
  padding:2px 1px 4px;
  scrollbar-width:none;
  flex:1;
  align-content:start;
}
.filter-strip::-webkit-scrollbar{display:none;}
.filter-chip{
  display:flex;flex-direction:column;align-items:center;gap:3px;
  cursor:pointer;
  transition:transform 0.2s cubic-bezier(.34,1.56,.64,1);
  padding:4px 2px;
  border-radius:10px;
  border:1.5px solid transparent;
  background:transparent;
  transition:all 0.18s cubic-bezier(.34,1.56,.64,1);
}
.filter-chip:hover{transform:translateY(-2px);background:var(--pink-soft);}
.filter-chip.active{
  background:var(--pink-soft);
  border-color:var(--pink);
  transform:translateY(-1px);
  box-shadow:0 3px 10px var(--shadow);
}
.filter-preview{
  width:52px;height:52px;
  border-radius:12px;
  border:2px solid transparent;
  overflow:hidden;
  position:relative;
  transition:border-color 0.15s, box-shadow 0.15s;
  flex-shrink:0;
}
.filter-chip.active .filter-preview{
  border-color:var(--pink-deep);
  box-shadow:0 0 0 2px var(--pink-pale),0 4px 12px rgba(232,69,122,0.3);
}
.filter-preview-inner{
  width:100%;height:100%;
  border-radius:10px;
  position:relative;
  overflow:hidden;
}
.filter-preview-inner::after{
  content:attr(data-emoji);
  position:absolute;bottom:2px;right:3px;
  font-size:13px;line-height:1;
}
.filter-label{
  font-size:6.5px;font-weight:800;
  color:var(--text-mid);
  font-family:'Nunito',sans-serif;
  white-space:nowrap;
  text-align:center;
}
.filter-chip.active .filter-label{color:var(--pink-deep);}

/* ── CENTRE COLUMN: viewfinder ── */
.vf-col{display:flex;flex-direction:column;gap:10px;min-height:0;}

.vf-card{
  flex:1;
  padding:0;
  position:relative;
  display:flex;flex-direction:column;
  min-height:0;
  background:transparent;
  border:none;
  box-shadow:none;
}

/* Decorative outer frame around the viewfinder */
.vf-outer-frame{
  flex:1;
  border-radius:20px;
  padding:5px;
  background:linear-gradient(145deg,#ffd6e8,#e8c8ff,#c8e0ff,#ffd6e8);
  background-size:300% 300%;
  animation:frame-gradient 6s ease infinite;
  box-shadow:0 8px 32px rgba(232,69,122,0.22),0 2px 8px rgba(200,160,255,0.15);
  position:relative;
  min-height:0;
  display:flex;
}
@keyframes frame-gradient{0%,100%{background-position:0% 50%;}50%{background-position:100% 50%;}}

.vf-inner-wrap{
  flex:1;
  border-radius:16px;
  overflow:hidden;
  background:#0d0810;
  position:relative;
  min-height:180px;
}
video{
  width:100%;height:100%;
  object-fit:cover;
  display:block;
  transform:scaleX(-1);
}

/* Corner brackets — bigger & more visible */
.bracket{position:absolute;width:22px;height:22px;border-color:rgba(255,255,255,0.85);border-style:solid;border-width:0;z-index:6;filter:drop-shadow(0 0 4px rgba(255,133,179,0.7));}
.bracket.tl{top:10px;left:10px;border-top-width:3px;border-left-width:3px;border-radius:4px 0 0 0;}
.bracket.tr{top:10px;right:10px;border-top-width:3px;border-right-width:3px;border-radius:0 4px 0 0;}
.bracket.bl{bottom:10px;left:10px;border-bottom-width:3px;border-left-width:3px;border-radius:0 0 0 4px;}
.bracket.br{bottom:10px;right:10px;border-bottom-width:3px;border-right-width:3px;border-radius:0 0 4px 0;}

/* HUD overlay */
.vf-hud{
  position:absolute;bottom:12px;left:0;right:0;
  text-align:center;pointer-events:none;z-index:7;
}
.hud-pill{
  display:inline-flex;align-items:center;gap:6px;
  background:rgba(10,4,14,0.72);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  color:var(--pink);
  font-family:'Press Start 2P',monospace;
  font-size:7px;
  padding:6px 14px;
  border-radius:100px;
  border:1px solid rgba(255,133,179,0.25);
  letter-spacing:0.1em;
  box-shadow:0 2px 12px rgba(0,0,0,0.3);
}
.hud-pill::before{content:'●';font-size:6px;color:var(--pink);animation:rec-blink 1.2s steps(2) infinite;}
@keyframes rec-blink{0%,100%{opacity:1;}50%{opacity:0;}}

.flash-el{
  position:absolute;inset:0;border-radius:16px;
  background:#fff;opacity:0;pointer-events:none;z-index:20;
  transition:opacity 0.05s;
}
.flash-el.on{opacity:1;}

.cd-num{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%)scale(0);
  font-family:'Press Start 2P',monospace;
  font-size:72px;
  color:#fff;
  text-shadow:0 0 40px rgba(255,133,179,1),0 0 80px rgba(232,69,122,0.6),0 6px 0 var(--pink-deep);
  z-index:15;pointer-events:none;
  opacity:0;
  transition:transform 0.15s cubic-bezier(.34,1.56,.64,1),opacity 0.15s;
}
.cd-num.show{transform:translate(-50%,-50%)scale(1);opacity:1;}

.no-cam{
  position:absolute;inset:0;border-radius:16px;
  background:rgba(13,8,16,0.93);
  display:flex;align-items:center;justify-content:center;
  flex-direction:column;gap:14px;z-index:10;
}
.no-cam.gone{display:none;}
.no-cam-icon{font-size:40px;filter:drop-shadow(0 0 16px rgba(255,133,179,0.7));animation:bob 1.6s ease-in-out infinite;}
.no-cam-txt{
  font-family:'Press Start 2P',monospace;
  font-size:7px;
  color:rgba(255,220,235,0.75);
  text-align:center;line-height:2.2;
  letter-spacing:0.08em;
}

/* ── SHUTTER CARD ── */
.ctrl-card{
  padding:14px 20px 12px;
  background:#fff;
  border-radius:20px;
  border:1.5px solid var(--pink-pale);
  box-shadow:0 4px 18px var(--shadow);
  flex-shrink:0;
  position:relative;
  overflow:hidden;
}
.ctrl-card::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at 50% 0%,rgba(255,180,220,0.1),transparent 65%);
  pointer-events:none;
}
.ctrl-row{
  display:flex;align-items:center;justify-content:center;gap:0;
  position:relative;z-index:1;
}

/* Shot counter */
.shot-counter-wrap{
  flex:1;
  display:flex;flex-direction:column;align-items:center;gap:4px;
}
.shot-counter-label{font-size:8px;font-weight:800;color:var(--text-soft);letter-spacing:0.05em;}
.shot-counter-disp{
  font-family:'Press Start 2P',monospace;
  font-size:13px;
  color:var(--pink-deep);
  text-align:center;
  line-height:1;
}
.shot-counter-disp .slash{color:var(--text-soft);font-size:9px;}

/* Shutter */
.shutter-wrap{
  display:flex;align-items:center;justify-content:center;
  position:relative;
}
.shutter-ring-outer{
  width:76px;height:76px;border-radius:50%;
  background:linear-gradient(145deg,#ffd6e8,#ffb3d6);
  display:flex;align-items:center;justify-content:center;
  animation:ring-pulse 2.2s ease-in-out infinite;
  box-shadow:0 0 0 3px rgba(255,133,179,0.15);
}
@keyframes ring-pulse{0%,100%{box-shadow:0 0 0 0 rgba(255,133,179,0.45),0 0 0 3px rgba(255,133,179,0.15);}50%{box-shadow:0 0 0 10px rgba(255,133,179,0),0 0 0 3px rgba(255,133,179,0.15);}}
.shutter-btn{
  width:60px;height:60px;border-radius:50%;
  background:linear-gradient(145deg,#ff99c0,var(--rose),var(--pink-deep));
  border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  font-size:22px;
  box-shadow:0 5px 20px rgba(232,69,122,0.5),inset 0 2px 0 rgba(255,255,255,0.35),inset 0 -2px 0 rgba(0,0,0,0.1);
  transition:transform 0.12s,box-shadow 0.12s;
}
.shutter-btn:hover{transform:scale(1.07);box-shadow:0 8px 28px rgba(232,69,122,0.65),inset 0 2px 0 rgba(255,255,255,0.35);}
.shutter-btn:active{transform:scale(0.93);box-shadow:0 2px 10px rgba(232,69,122,0.4),inset 0 2px 0 rgba(255,255,255,0.2);}
.shutter-btn:disabled{opacity:0.4;cursor:not-allowed;animation:none;}

/* Timer info */
.timer-wrap{
  flex:1;
  display:flex;flex-direction:column;align-items:center;gap:4px;
}
.timer-icon{font-size:18px;}
.timer-label{font-size:8px;font-weight:800;color:var(--text-soft);letter-spacing:0.04em;}

/* ── RIGHT COLUMN: result strip + save ── */
.s3-right{
  display:flex;flex-direction:column;gap:10px;min-height:0;
}

/* Result card — the live photo strip */
.result-card{
  flex:1;
  padding:10px 8px 8px;
  background:#fff;
  border-radius:18px;
  border:1.5px solid var(--pink-pale);
  box-shadow:0 4px 18px var(--shadow);
  display:flex;flex-direction:column;
  gap:5px;
  min-height:0;
  overflow-y:auto;
  align-items:center;
  position:relative;
}
.result-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:40px;
  background:linear-gradient(180deg,rgba(255,240,248,0.8),transparent);
  border-radius:18px 18px 0 0;
  pointer-events:none;
}
.result-strip-title{
  font-family:'Press Start 2P',monospace;
  font-size:5.5px;
  color:var(--text-soft);
  letter-spacing:0.14em;
  text-align:center;
  flex-shrink:0;
  padding-top:2px;
}
.result-frame{
  width:100%;aspect-ratio:4/3;
  border-radius:10px;
  overflow:hidden;
  flex-shrink:0;
  transition:all 0.3s;
  position:relative;
}
.result-frame.empty{
  background:repeating-linear-gradient(45deg,
    #fff0f6 0,#fff0f6 5px,#fff8fb 5px,#fff8fb 10px);
  border:1.5px dashed rgba(255,133,179,0.35);
  display:flex;align-items:center;justify-content:center;
}
.result-frame.empty::after{
  content:'♡';
  font-family:'Press Start 2P',monospace;
  font-size:10px;
  color:rgba(255,133,179,0.3);
}
.result-frame canvas{width:100%;height:100%;object-fit:cover;display:block;}

.save-row{
  margin-top:2px;width:100%;display:none;
  flex-shrink:0;
}
.result-card.done .save-row{display:flex;}
.save-btn{
  width:100%;
  background:linear-gradient(135deg,#ff99c0,var(--rose),var(--pink-deep));
  color:#fff;border:none;border-radius:12px;
  font-family:'Press Start 2P',monospace;font-size:6px;
  padding:11px 8px;cursor:pointer;letter-spacing:0.06em;
  box-shadow:0 4px 16px rgba(232,69,122,0.38);
  transition:all 0.2s cubic-bezier(.34,1.56,.64,1);
  display:flex;align-items:center;justify-content:center;gap:6px;
  position:relative;overflow:hidden;
}
.save-btn::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,0.18),transparent);}
.save-btn:hover{transform:translateY(-2px);box-shadow:0 7px 24px rgba(232,69,122,0.52);}
.save-btn:active{transform:scale(0.97);}

/* Retake button */
.retake-btn{
  width:100%;
  background:var(--pink-soft);
  color:var(--pink-deep);
  border:1.5px solid var(--pink-pale);
  border-radius:12px;
  font-family:'Press Start 2P',monospace;font-size:6px;
  padding:8px;cursor:pointer;letter-spacing:0.04em;
  display:none;
  transition:all 0.18s;
  flex-shrink:0;margin-top:2px;
}
.result-card.done .retake-btn{display:flex;align-items:center;justify-content:center;gap:5px;}
.retake-btn:hover{background:var(--pink-pale);}

/* Gallery panel */
.gallery-panel{
  background:#fff;
  border-radius:18px;
  border:1.5px solid var(--pink-pale);
  box-shadow:0 3px 14px var(--shadow);
  padding:10px 8px 8px;
  flex-shrink:0;
}
.gallery-panel-label{
  font-family:'Press Start 2P',monospace;
  font-size:5.5px;
  color:var(--text-soft);
  letter-spacing:0.14em;
  text-align:center;
  margin-bottom:7px;
}
.gallery-grid{
  display:grid;grid-template-columns:1fr 1fr;
  gap:5px;
  max-height:96px;
  overflow-y:auto;
}
.gal-thumb{
  aspect-ratio:4/3;
  border-radius:8px;
  overflow:hidden;
  border:1.5px solid var(--border);
  cursor:pointer;
  transition:all 0.18s cubic-bezier(.34,1.56,.64,1);
  position:relative;
}
.gal-thumb:hover{transform:scale(1.06);border-color:var(--pink);box-shadow:0 3px 10px var(--shadow);}
.gal-thumb canvas{width:100%;height:100%;object-fit:cover;display:block;}
.gal-empty{
  grid-column:1/-1;
  font-size:9px;font-weight:800;color:var(--text-soft);
  text-align:center;padding:10px 8px;
  line-height:1.8;
}

canvas#cap{display:none;}

/* Scrollbar */
::-webkit-scrollbar{width:5px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--pink-pale);border-radius:10px;}