:root{
  --ink:#0b0c0a;
  --panel:#141510;
  --steel:#9ca494;
  --paper:#f4f4ed;
  --signal:#ff5a1f;
  --signal-dim:#a13f16;
  --ok:#7fbf6a;
  --mono: 'Courier New', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --sans: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html,body{
  margin:0; padding:0; height:100%; width:100%;
  background:var(--ink); color:var(--paper);
  font-family:var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overscroll-behavior:none;
  overflow:hidden;
}
#app{
  position:fixed; inset:0;
  display:flex; flex-direction:column;
  background:var(--ink);
}

#topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding: max(14px, env(safe-area-inset-top)) 16px 10px 16px;
  font-family:var(--sans);
  font-size:12px;
  letter-spacing:0.08em;
  color:var(--steel);
  z-index:6;
  position:absolute; top:0; left:0; right:0;
  background:linear-gradient(to bottom, rgba(0,0,0,0.75), rgba(0,0,0,0.12));
}
#topbar .branding{ display:flex; flex-direction:column; gap:6px; }
#topbar .brand{ color:var(--paper); font-weight:700; letter-spacing:0.12em; }
#topbar .dot{ color:var(--signal); }
#modeBadge{
  display:inline-flex; align-items:center; justify-content:center;
  padding:4px 8px;
  border-radius:999px;
  background:rgba(255,255,255,0.08);
  color:var(--paper);
  font-size:10px;
  letter-spacing:0.14em;
  text-transform:uppercase;
}
#status{ display:flex; align-items:center; gap:6px; }
#status .rec-dot{
  width:8px; height:8px; border-radius:50%;
  background:var(--signal); display:none;
  box-shadow:0 0 8px var(--signal);
  animation: pulse 1s infinite;
}
#status.recording .rec-dot{ display:inline-block; }
@keyframes pulse{ 0%,100%{opacity:1} 50%{opacity:0.25} }

#viewfinder{
  position:relative;
  flex:1;
  overflow:hidden;
  background:#000;
}
video#preview{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  background:#000;
}
video#preview.mirrored{ transform:scaleX(-1); }
canvas#overlayCanvas{
  position:absolute; inset:0;
  width:100%; height:100%;
  pointer-events:none;
}
canvas#flashFrame{
  position:absolute; inset:0; width:100%; height:100%;
  background:#fff; opacity:0; pointer-events:none;
  transition:opacity 90ms ease-out;
}
#grid{
  position:absolute; inset:0; pointer-events:none;
  opacity:0; transition:opacity 200ms ease;
}
#grid.on{ opacity:0.35; }
#grid line{ stroke:var(--paper); stroke-width:1; }

#placeholder{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:14px; text-align:center; padding:0 30px;
  color:var(--steel);
  z-index:4;
}
#placeholder svg{ width:56px; height:56px; opacity:0.6; }
#placeholder button{
  margin-top:6px;
  background:var(--signal); color:var(--ink); border:none;
  font-family:var(--sans); font-weight:700; font-size:14px;
  padding:12px 22px; border-radius:999px; cursor:pointer;
}
#placeholder p{ font-size:14px; line-height:1.6; max-width:300px; }
#placeholder .err{ color:var(--signal); font-family:var(--sans); font-size:12px; letter-spacing:0.04em; }

#reticle{
  position:absolute; width:74px; height:74px;
  border:1.5px solid var(--signal);
  border-radius:6px;
  transform:translate(-50%,-50%) scale(1.15);
  opacity:0; pointer-events:none;
  z-index:5;
}
#reticle.show{ animation: focusPulse 650ms ease-out; }
@keyframes focusPulse{
  0%{ opacity:1; transform:translate(-50%,-50%) scale(1.15);}
  30%{ opacity:1; transform:translate(-50%,-50%) scale(0.95);}
  100%{ opacity:0; transform:translate(-50%,-50%) scale(0.95);}
}

#thumbWrap{
  position:absolute; left:16px; bottom:max(18px, env(safe-area-inset-bottom));
  width:46px; height:46px; border-radius:10px;
  border:2px solid var(--paper);
  overflow:hidden; background:var(--panel);
  z-index:6; display:none;
}
#thumbWrap.show{ display:block; }
#thumbWrap img{ width:100%; height:100%; object-fit:cover; display:block; }

#editHeadlineBtn{
  position:absolute; right:16px; bottom:max(18px, env(safe-area-inset-bottom));
  display:none; align-items:center; gap:6px;
  background:rgba(0,0,0,0.65); color:var(--paper);
  border:1px solid rgba(255,255,255,0.22);
  font-family:var(--sans); font-size:12px; letter-spacing:0.08em;
  padding:10px 16px; border-radius:999px; cursor:pointer;
  z-index:6;
}
#editHeadlineBtn.show{ display:flex; }
#editHeadlineBtn svg{ width:14px; height:14px; }

#deck{
  position:relative;
  padding: 10px 0 max(20px, env(safe-area-inset-bottom)) 0;
  background:var(--panel);
  z-index:5;
}

#frameStrip{
  display:flex; gap:10px; overflow-x:auto;
  padding: 4px 16px 10px 16px;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
#frameStrip::-webkit-scrollbar{ display:none; }
.frameChip{
  flex:0 0 auto;
  display:flex; flex-direction:column; align-items:center; gap:4px;
  background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.08);
  color:var(--steel);
  font-family:var(--sans); font-size:11px; letter-spacing:0.03em;
  cursor:pointer; padding:8px 10px; border-radius:16px;
  white-space:nowrap;
  transition:transform 120ms ease, background 120ms ease, border-color 120ms ease;
}
.frameChip:hover, .frameChip:focus-visible{
  background:rgba(255,255,255,0.12);
  transform:translateY(-1px);
  outline:none;
}
.frameChip:focus-visible{ box-shadow:0 0 0 3px rgba(255,90,31,0.16); }
.frameChip .swatch{
  width:44px; height:44px; border-radius:14px;
  background:rgba(255,255,255,0.08);
  border:2px solid transparent;
  display:flex; align-items:center; justify-content:center;
  font-size:19px;
}
.frameChip.active .swatch{ border-color:var(--signal); background:rgba(255,90,31,0.12); }
.frameChip.active{ color:var(--signal); box-shadow:0 8px 20px rgba(255,90,31,0.15); }

#modeRow{
  display:flex; justify-content:center; gap:24px;
  margin: 0 0 16px 0;
  padding: 0 16px;
  font-family:var(--sans); font-size:13px; letter-spacing:0.08em;
}
#modeRow button{
  background:none; border:none; color:var(--steel);
  font-family:var(--sans); font-size:13px; letter-spacing:0.08em;
  padding:6px 4px; cursor:pointer; position:relative;
}
#modeRow button.active{ color:var(--signal); }
#modeRow button.active::after{
  content:''; position:absolute; left:0; right:0; bottom:-6px;
  height:2px; background:var(--signal); border-radius:2px;
}

#controlsRow{
  display:grid; grid-template-columns:1fr auto 1fr;
  align-items:center;
  padding:0 20px;
}
.sideBtn{
  justify-self:center;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.12);
  color:var(--paper);
  width:48px; height:48px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
}
.sideBtn svg{ width:22px; height:22px; }
.sideBtn.on{ background:var(--signal); border-color:var(--signal); color:var(--ink); }
.sideBtn:disabled{ opacity:0.3; }

#shutterOuter{
  justify-self:center;
  width:78px; height:78px; border-radius:50%;
  border:3px solid var(--paper);
  display:flex; align-items:center; justify-content:center;
  padding:5px;
  cursor:pointer;
  background:transparent;
}
#shutter{
  width:100%; height:100%; border-radius:50%;
  background:var(--paper);
  border:none;
  transition:transform 120ms ease, background 120ms ease, border-radius 120ms ease;
}
#shutter:active{ transform:scale(0.88); }
body.mode-video #shutter{ background:var(--signal); }
body.mode-video.is-recording #shutter{
  border-radius:14px; background:var(--signal); transform:scale(0.55);
}
body.mode-video.is-recording #shutterOuter{ border-color:var(--signal); }

#hint{
  text-align:center; margin-top:12px;
  font-family:var(--sans); font-size:13px; letter-spacing:0.08em;
  color:var(--paper); opacity:0.9; min-height:20px;
}

@media (min-width:640px){
  #app{ max-width:480px; margin:0 auto; border-left:1px solid #222; border-right:1px solid #222; }
}

/* ---------- Landscape (phone rotated sideways) — applied via JS as .landscape, so it can be overridden by Portrait Lock ---------- */
#app.landscape{ flex-direction:row; max-width:none; border:none; }
#app.landscape #viewfinder{ flex:1; height:100%; }

#app.landscape #deck{
  width:118px; flex:0 0 auto;
  height:100%; max-height:100%;
  display:flex; flex-direction:column; justify-content:space-between; align-items:center;
  padding: max(10px, env(safe-area-inset-top)) 10px max(10px, env(safe-area-inset-bottom)) 10px;
  overflow-y:auto;
}
#app.landscape #frameStrip{
  flex-direction:column; overflow-x:visible; overflow-y:auto;
  padding:2px 0; gap:8px; width:100%;
}
#app.landscape #modeRow{
  flex-direction:column; gap:10px; margin:10px 0; padding:0;
}
#app.landscape #modeRow button.active::after{ left:auto; right:-10px; top:0; bottom:0; width:2px; height:auto; }
#app.landscape #controlsRow{
  grid-template-columns:1fr; grid-template-rows:auto auto auto;
  gap:14px; padding:0; justify-items:center;
}
#app.landscape #hint{ display:none; }
#app.landscape #thumbWrap{ left:auto; right:10px; bottom:10px; }
#app.landscape #editHeadlineBtn{ right:10px; bottom:64px; }
#app.landscape #shareBtn{ left:auto; right:10px; bottom:118px; transform:none; }

#topbar button{
  background:none; border:none; color:var(--steel);
  display:flex; align-items:center; gap:6px;
  font-family:var(--mono); font-size:11px; letter-spacing:0.1em;
  cursor:pointer; padding:8px 10px; border-radius:14px;
  transition:background 160ms ease, color 160ms ease, transform 160ms ease;
}
#topbar button:hover,
#topbar button:focus-visible{
  background:rgba(255,255,255,0.08);
  color:var(--paper);
  transform:translateY(-1px);
  outline:none;
}
#topbar button:focus-visible{ box-shadow:0 0 0 3px rgba(255,90,31,0.24); }
#topbar button svg{ width:14px; height:14px; }
#topbar button.active{ color:var(--signal); }
#lockBtn.active{ color:var(--signal); }
#logoBtn.active{ color:var(--ok); }
#uploadBtn.active{ color:var(--signal); }
#resetBtn{ padding:8px 10px; border-radius:14px; }
#resetBtn:hover{ color:var(--paper); }


img#uploadedImg, video#uploadedVideo{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; background:#000;
  display:none;
}
img#uploadedImg.show, video#uploadedVideo.show{ display:block; }

body.upload-mode #modeRow,
body.upload-mode #flipBtn,
body.upload-mode #flashBtn{ visibility:hidden; }

#shareBtn{
  position:absolute; left:50%; bottom:max(18px, env(safe-area-inset-bottom));
  transform:translateX(-50%);
  display:none; align-items:center; gap:6px;
  background:var(--signal); color:var(--ink);
  border:none;
  font-family:var(--sans); font-weight:700; font-size:12px;
  padding:10px 18px; border-radius:999px; cursor:pointer;
  z-index:6; box-shadow:0 4px 14px rgba(255,90,31,0.4);
}
#shareBtn.show{ display:flex; }
#shareBtn svg{ width:15px; height:15px; }

#editPanel{
  position:fixed; inset:0; z-index:30;
  background:rgba(0,0,0,0.6);
  display:none; align-items:flex-end; justify-content:center;
}
#editPanel.show{ display:flex; }
#editCard{
  width:100%; max-width:480px;
  background:var(--panel);
  border-radius:20px 20px 0 0;
  padding:20px 20px calc(20px + env(safe-area-inset-bottom));
  display:flex; flex-direction:column; gap:14px;
  max-height:80vh; overflow-y:auto;
}
#editCard h3{
  margin:0; font-size:14px; letter-spacing:0.06em;
  color:var(--paper); font-family:var(--mono);
}
.editField{ display:flex; flex-direction:column; gap:6px; }
.editField label{
  font-family:var(--mono); font-size:10px; letter-spacing:0.1em; color:var(--steel);
}
.editField input[type="text"]{
  background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.15);
  color:var(--paper); border-radius:10px; padding:11px 13px;
  font-family:var(--sans); font-size:14px;
}
.editCheckRow{
  display:flex; align-items:center; gap:9px;
  font-family:var(--mono); font-size:11px; letter-spacing:0.06em; color:var(--paper);
}
.editCheckRow input{ width:18px; height:18px; accent-color:var(--signal); }
#editBtnRow{ display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:10px; margin-top:4px; }
.editBtnRow button{
  padding:13px; border-radius:999px; border:none;
  font-family:var(--sans); font-weight:700; font-size:14px; cursor:pointer;
}
#editResetBtn{ background:rgba(255,255,255,0.08); color:var(--paper); }
#editSaveBtn{ background:var(--signal); color:var(--ink); }
#editCancelBtn{ background:rgba(255,255,255,0.09); color:var(--paper); }
#editBtnRow button:hover{ opacity:0.95; }