:root{
    --c-cyan:#4ff1f6;
    --c-blue:#0088f3;
    --c-magenta:#fb28d3;
    --c-orange:#fe9b49;
    --bg:#0a0a12;
    --bg-soft:#16161f;
    --bg-elev:#1f1f2b;
    --white:#ffffff;
    --ink:#f2f2f7;
    --muted:#9494a6;
    --grad: linear-gradient(135deg, var(--c-cyan) 0%, var(--c-blue) 32%, var(--c-magenta) 68%, var(--c-orange) 100%);
    --safe-bottom: env(safe-area-inset-bottom,0px);
    --safe-left: env(safe-area-inset-left,0px);
    --safe-right: env(safe-area-inset-right,0px);
  }
  *{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
  button{touch-action:manipulation;}
  button:focus-visible, [role="button"]:focus-visible{outline:3px solid var(--c-cyan); outline-offset:3px;}
  html,body{height:100%; height:100dvh; margin:0; overscroll-behavior:none;}
  body{
    background:var(--bg);
    color:var(--ink);
    font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    overflow:hidden;
    position:fixed; inset:0;
    -webkit-user-select:none;
    user-select:none;
  }
  #app{position:fixed; inset:0; display:flex; flex-direction:column; height:100%; height:100dvh;}

  /* ---------- Top bar ---------- */
  #topbar{
    position:absolute; top:0; left:0; right:0;
    display:flex; align-items:center; justify-content:space-between;
    padding:calc(env(safe-area-inset-top,0px) + 14px) calc(var(--safe-right) + 16px) 10px calc(var(--safe-left) + 16px);
    z-index:45;
    background:linear-gradient(to bottom, rgba(0,0,0,.55), rgba(0,0,0,0));
  }
  #wordmark-chip{height:22px; display:flex; align-items:center; gap:8px;}
  #wordmark-chip img{height:18px; display:block;}
  #topbarActions{display:flex; align-items:center; gap:8px;}
  .icon-btn{
    width:42px; height:42px; border-radius:50%;
    background:rgba(20,20,30,.55); border:1px solid rgba(255,255,255,.14);
    display:flex; align-items:center; justify-content:center;
    color:var(--ink); backdrop-filter:blur(6px);
  }
  .icon-btn[hidden]{display:none !important;}
  .icon-btn svg{width:20px; height:20px;}
  #lensOptions{
    display:flex; align-items:center; gap:2px; max-width:min(52vw,220px);
    padding:3px; overflow-x:auto; border-radius:24px;
    background:rgba(20,20,30,.62); border:1px solid rgba(255,255,255,.14);
    backdrop-filter:blur(6px); scrollbar-width:none;
  }
  #lensOptions[hidden]{display:none !important;}
  #lensOptions::-webkit-scrollbar{display:none;}
  .lens-choice{
    flex:0 0 auto; min-width:38px; height:36px; padding:0 8px; border:0; border-radius:18px;
    background:transparent; color:var(--ink); font:800 12px/1 inherit;
  }
  .lens-choice.active{background:var(--white); color:#10101a;}

  /* ---------- Stage ---------- */
  #stage{
    position:relative; flex:1; display:flex; align-items:center; justify-content:center;
    background:#000; overflow:hidden;
  }
  #frameWrap{
    position:relative;
    width:100%; height:100%;
    display:flex; flex-direction:column;
  }
  #borderTop, #borderBottom{height:12px; background:var(--grad); flex:0 0 auto;}
  #borderMid{flex:1; display:flex; min-height:0;}
  #borderLeft, #borderRight{width:12px; background:var(--grad); flex:0 0 auto;}
  #viewportBox{flex:1; position:relative; background:#000; overflow:hidden; min-width:0;}

  video, #snapCanvas{
    position:absolute; inset:0; width:100%; height:100%; object-fit:contain;
    transform:scaleX(1);
  }
  video.mirror{transform:scaleX(-1); object-fit:contain;}
  @media (orientation:landscape){
    video, video.mirror, #snapCanvas{object-fit:cover;}
  }
  #spectrumOverlay{
    position:absolute; inset:0; background:var(--grad);
    mix-blend-mode:overlay; opacity:0; pointer-events:none; transition:opacity .15s ease;
  }
  #focusRing{
    position:absolute; z-index:24; width:58px; height:58px; margin:-29px 0 0 -29px;
    border:2px solid var(--c-cyan); border-radius:50%; opacity:0; pointer-events:none;
    box-shadow:0 0 0 1px rgba(0,0,0,.35), 0 0 14px rgba(79,241,246,.35);
  }
  #focusRing.show{animation:focusTap .75s ease-out both;}
  @keyframes focusTap{
    0%{opacity:0; transform:scale(1.35)}
    18%{opacity:1; transform:scale(1)}
    70%{opacity:1}
    100%{opacity:0; transform:scale(.92)}
  }
  #flashOverlay{
    position:absolute; inset:0; z-index:25; background:#fff;
    opacity:0; pointer-events:none;
  }
  #flashOverlay.fire{animation:cameraFlash .28s ease-out;}
  @keyframes cameraFlash{0%{opacity:0}20%{opacity:.9}100%{opacity:0}}
  #logoBar{display:none !important;}
  #logoBar img{height:6.5vh; max-height:60px; max-width:52%; display:block;}
  #dateCaption{
    color:#33333d; text-align:right;
    font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    font-size:clamp(16px,5.2vw,24px); font-weight:800; line-height:1.18;
    letter-spacing:.06em;
  }

  #hint{
    position:absolute; top:12px; left:0; right:0; text-align:center;
    color:rgba(255,255,255,.75); font-size:13px; z-index:20; pointer-events:none;
    letter-spacing:.2px;
  }

  /* ---------- Bottom controls ---------- */
  #controls{
    position:absolute; left:0; right:0; bottom:0; z-index:30;
    padding:10px var(--safe-right) calc(var(--safe-bottom) + 18px) var(--safe-left);
    background:linear-gradient(to top, rgba(0,0,0,.6), rgba(0,0,0,0));
  }
  #filterStrip{
    display:none;
    gap:14px; overflow-x:auto; padding:4px 18px 12px;
    scrollbar-width:none;
  }
  #filterStrip::-webkit-scrollbar{display:none;}
  .filter-thumb{
    flex:0 0 auto; width:58px; display:flex; flex-direction:column; align-items:center; gap:6px;
    opacity:.75;
  }
  .filter-thumb.active{opacity:1;}
  .swatch{
    width:52px; height:52px; border-radius:50%; background:#333;
    border:2px solid transparent; background-size:cover; background-position:center;
  }
  .filter-thumb.active .swatch{border-color:var(--c-magenta); box-shadow:0 0 0 2px rgba(255,255,255,.5) inset;}
  #actionRow{
    display:flex; align-items:center; justify-content:center; gap:18px; padding:0 20px;
  }
  #shutter{
    width:74px; height:74px; border-radius:50%; background:var(--white);
    border:4px solid rgba(255,255,255,.35); position:relative;
    transition:transform .12s ease;
  }
  #shutter.pressed{transform:scale(.88);}
  #shutter::after{
    content:""; position:absolute; inset:6px; border-radius:50%; background:var(--grad);
  }
  #frameToggle{
    width:46px; height:46px; border-radius:50%;
    background:rgba(20,20,30,.6); border:1px solid rgba(255,255,255,.16);
    display:flex; align-items:center; justify-content:center; color:var(--ink);
  }
  #frameToggle.on{background:rgba(251,40,211,.22); border-color:var(--c-magenta);}
  #frameToggle svg{width:20px; height:20px;}


  #boothToggle{width:46px;height:46px;border-radius:50%;background:rgba(20,20,30,.6);border:1px solid rgba(255,255,255,.16);display:flex;align-items:center;justify-content:center;color:var(--ink);}
  #boothToggle.on{background:rgba(79,241,246,.22);border-color:var(--c-cyan);}
  #boothToggle svg{width:21px;height:21px;}
  #countdownOverlay{position:fixed;inset:0;z-index:70;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.28);color:#fff;pointer-events:none;font-size:min(42vw,220px);font-weight:800;line-height:1;text-shadow:0 8px 30px rgba(0,0,0,.55);}
  #countdownOverlay.show{display:flex;animation:countPulse .75s ease both;}
  @keyframes countPulse{0%{transform:scale(.72);opacity:0}25%{opacity:1}100%{transform:scale(1.08);opacity:.15}}
  #orientationGuard{display:none !important;}
  @media (orientation:landscape){
    body.shutter-side-right #stage{
      margin-right:calc(104px + var(--safe-right));
    }
    body.shutter-side-left #stage{
      margin-left:calc(104px + var(--safe-left));
    }
    #controls{
      top:0; bottom:0; width:104px;
      display:flex; align-items:center; justify-content:center;
      background:linear-gradient(to left, rgba(0,0,0,.72), rgba(0,0,0,.18));
      padding:12px 0;
    }
    body.shutter-side-right #controls{
      left:auto; right:0; width:calc(104px + var(--safe-right));
      padding-right:var(--safe-right);
    }
    body.shutter-side-left #controls{
      left:0; right:auto; width:calc(104px + var(--safe-left));
      padding-left:var(--safe-left);
      background:linear-gradient(to right, rgba(0,0,0,.72), rgba(0,0,0,.18));
    }
    #actionRow{
      flex-direction:column; gap:18px; padding:0;
    }
    #shutter{position:relative; margin:0; transform:none;}
    #shutter.pressed{transform:scale(.88);}
  }

  #toast{
    position:fixed; left:50%; bottom:calc(var(--safe-bottom) + 120px);
    z-index:260; max-width:min(82vw,360px); padding:10px 16px; border-radius:20px;
    background:rgba(31,31,43,.94); color:var(--ink); text-align:center; font-size:13px;
    opacity:0; transform:translate(-50%,10px); pointer-events:none;
    transition:opacity .2s ease, transform .2s ease;
  }
  #toast.show{opacity:1; transform:translate(-50%,0);}

  /* ---------- Review screen ---------- */
  #review{
    position:fixed; inset:0; background:var(--bg); z-index:50;
    display:none; flex-direction:column;
  }
  #review.show{display:flex;}
  #reviewImgWrap{position:relative; flex:1; display:flex; align-items:center; justify-content:center; padding:calc(env(safe-area-inset-top,0px) + 8px) 8px 8px; min-height:0;}
  #reviewImgWrap > #reviewImg{
    max-width:100%; max-height:100%; border-radius:4px; box-shadow:0 10px 40px rgba(0,0,0,.5);
    -webkit-touch-callout:none; -webkit-user-select:none; user-select:none;
  }
  #stickerLayer{position:absolute; z-index:3; overflow:visible; pointer-events:none;}
  #reviewImgWrap #frameOverlay{
    position:absolute; inset:0; z-index:5; width:100%; height:100%;
    max-width:none; max-height:none; border-radius:0; box-shadow:none; pointer-events:none;
  }
  #reviewImgWrap #frameOverlay[hidden]{display:none;}
  #review:not(.editing-stickers) #frameOverlay{display:none;}
  .placed-sticker{
    position:absolute; pointer-events:auto; touch-action:none; cursor:grab;
    transform-origin:center;
  }
  .placed-sticker.active{z-index:2; outline:1px dashed rgba(255,255,255,.8); outline-offset:4px;}
  .placed-sticker:active{cursor:grabbing;}
  .placed-sticker img{display:block; width:100%; height:auto; max-width:none; max-height:none; box-shadow:none; pointer-events:none; user-select:none;}
  .sticker-delete{
    position:absolute; top:0; right:0; z-index:3;
    display:none; align-items:center; justify-content:center;
    width:36px; height:36px; margin:0; padding:0;
    border:2px solid rgba(255,255,255,.92); border-radius:50%;
    background:rgba(16,16,26,.9); color:#fff;
    font:700 24px/1 inherit; cursor:pointer;
    touch-action:manipulation; pointer-events:auto;
    box-shadow:0 2px 10px rgba(0,0,0,.45);
    transform-origin:center center;
  }
  .placed-sticker.active .sticker-delete{display:flex;}
  #stickerPanel{
    flex:0 0 auto; z-index:8;
    padding:4px 8px 0;
    background:rgba(10,10,18,.96);
  }
  #stickerPanel p{display:none;}
  #stickerCarousel{
    display:flex; gap:8px; overflow-x:auto; padding:2px 2px 4px;
    scroll-snap-type:x mandatory; scrollbar-width:none;
  }
  #stickerCarousel::-webkit-scrollbar{display:none;}
  .sticker-option{
    flex:0 0 54px; height:54px; border-radius:10px; border:2px solid transparent;
    background:#fff; padding:5px; color:#171721;
    font-family:inherit; font-size:11px; font-weight:700; line-height:1.15;
    display:flex; align-items:center; justify-content:center; text-align:center;
    scroll-snap-align:center;
  }
  .sticker-option img{max-width:100%; max-height:100%; object-fit:contain; box-shadow:none;}
  .sticker-option.active{border-color:var(--c-cyan); box-shadow:0 0 0 2px rgba(79,241,246,.3);}
  #review:not(.picking-stickers) #stickerPanel{display:none;}
  #review:not(.editing-stickers) #addStickerBtn{display:none;}
  #anotherPhotoBtn{display:none;}
  #review.photo-saved #reviewBar .pill-btn{display:none;}
  #review.photo-saved #reviewBar #shareBtn,
  #review.photo-saved #reviewBar #anotherPhotoBtn{display:flex; max-width:110px;}
  #review.editing-stickers #editBtn,
  #review.editing-stickers #fondoBtn{display:none;}

  /* ---------- Fondo hint indicator ---------- */
  #fondoHint{
    display:flex; justify-content:center; align-items:center;
    padding:4px 12px; margin-bottom:2px; z-index:40;
    animation:hintFloat 2s ease-in-out infinite;
  }
  #fondoHint[hidden]{display:none !important;}
  #review.editing-stickers #fondoHint,
  #review.photo-saved #fondoHint{display:none !important;}
  .fondo-hint-bubble{
    cursor:pointer; display:inline-flex; flex-direction:column; align-items:center; gap:3px;
    background:rgba(20,20,35,0.92); border:1.5px solid var(--c-cyan);
    color:#fff; padding:7px 16px 5px; border-radius:18px;
    font-size:12px; font-weight:600; letter-spacing:0.2px; text-align:center;
    box-shadow:0 4px 18px rgba(79,241,246,0.35), 0 2px 8px rgba(0,0,0,0.5);
    backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
    transition:transform 0.15s ease, background 0.15s ease;
  }
  .fondo-hint-bubble:active{
    transform:scale(0.96);
    background:rgba(30,30,50,0.98);
  }
  .fondo-hint-arrow{
    width:16px; height:16px; color:var(--c-cyan);
    animation:arrowBounce 1.2s ease-in-out infinite;
    flex-shrink:0;
  }
  @keyframes hintFloat{
    0%,100%{transform:translateY(0);}
    50%{transform:translateY(-4px);}
  }
  @keyframes arrowBounce{
    0%,100%{transform:translateY(0);}
    50%{transform:translateY(3px);}
  }
  #reviewBar{
    flex:0 0 auto; display:flex; align-items:flex-start; justify-content:space-around;
    gap:6px;
    padding:6px calc(var(--safe-right) + 8px) calc(var(--safe-bottom) + 8px) calc(var(--safe-left) + 8px);
  }
  .pill-btn{
    display:flex; flex-direction:column; align-items:center; gap:6px;
    max-width:84px;
    background:none; border:none; color:var(--ink); font-size:11px; line-height:1.15;
    text-align:center; font-family:inherit;
  }
  #fondoBtn.on .circle,
  #addStickerBtn[aria-pressed="true"] .circle{background:rgba(79,241,246,.22); border-color:var(--c-cyan);}
  .pill-btn .circle{
    width:42px; height:42px; border-radius:50%; background:var(--bg-elev);
    border:1px solid rgba(255,255,255,.12);
    display:flex; align-items:center; justify-content:center;
  }
  .pill-btn.primary .circle{background:var(--grad);}
  .pill-btn svg{width:22px; height:22px; color:var(--ink);}
  .pill-btn.primary svg{color:#10101a;}

  /* ---------- Loading ---------- */
  #loadingVeil{
    position:fixed; inset:0; background:var(--bg); z-index:80;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px;
    text-align:center; padding:24px;
  }
  #loadingVeil img{
    width:min(94vw,680px);
    max-height:min(72vh,640px);
    height:auto;
    object-fit:contain;
  }
  #loadingVeil.brand-splash .spinner,
  #loadingVeil.brand-splash p{opacity:0;}
  #loadingVeil p{color:var(--muted); font-size:14px; max-width:280px; margin:0;}
  .spinner{
    width:28px; height:28px; border-radius:50%;
    border:3px solid rgba(255,255,255,.18); border-top-color:var(--c-magenta);
    animation:spin 0.9s linear infinite;
  }
  @keyframes spin{to{transform:rotate(360deg);}}
  @media (prefers-reduced-motion:reduce){
    *, *::before, *::after{animation-duration:.01ms !important; transition-duration:.01ms !important;}
  }

  #installSheet{
    position:fixed; inset:0; z-index:90;
    display:none; flex-direction:column; align-items:center; justify-content:center;
    gap:22px; padding:40px 24px calc(var(--safe-bottom) + 32px);
    text-align:center; background:var(--bg);
    -webkit-user-select:none; user-select:none; -webkit-touch-callout:none;
  }
  #installSheet.show{display:flex;}
  #installSheet img{display:none;}
  #installSheet h2{margin:0; max-width:18ch; font-size:clamp(34px,9vw,52px); line-height:1.12;}
  #installSheet p{margin:0; max-width:22ch; color:var(--muted); font-size:clamp(22px,5.6vw,30px); line-height:1.35;}
  #installNowBtn{
    margin-top:12px; min-width:min(92vw,460px); padding:22px 28px; border:0; border-radius:32px;
    background:var(--grad); color:#10101a; font:800 clamp(20px,5.2vw,28px)/1.2 inherit;
  }
  #installLaterBtn{
    background:none; border:0; color:var(--muted); font:700 clamp(18px,4.6vw,24px)/1.2 inherit; padding:14px;
  }
  #installedSheet{
    position:fixed; inset:0; z-index:95;
    display:none; flex-direction:column; align-items:center; justify-content:center;
    gap:22px; padding:40px 24px; text-align:center; background:var(--bg);
  }
  #installedSheet.show{display:flex;}
  #installedSheet h2{margin:0; max-width:16ch; font-size:clamp(34px,9vw,52px); line-height:1.12;}
  #installedSheet p{margin:0; max-width:20ch; color:var(--muted); font-size:clamp(22px,5.6vw,30px); line-height:1.35;}

  #permError{
    position:fixed; inset:0; background:var(--bg); z-index:85;
    display:none; flex-direction:column; align-items:center; justify-content:center; gap:14px;
    padding:32px; text-align:center;
  }
  #permError.show{display:flex;}
  #permError h2{font-size:18px; margin:0;}
  #permError p{color:var(--muted); font-size:14px; max-width:300px; margin:0;}
  #permError button{
    margin-top:8px; padding:12px 22px; border-radius:24px; border:none;
    background:var(--grad); color:#10101a; font-weight:600; font-size:14px;
  }