:root{
  --bg:#0e0f12;
  --panel:#14151a;
  --panel2:#101116;
  --line:rgba(255,255,255,0.10);
  --text:#eef0f6;
  --muted:rgba(238,240,246,0.70);
  --accent:#7b7cff;
  --danger:#ff5b6a;

  --safe-top: env(safe-area-inset-top, 0px);
  --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; }
html, body { height: 100%; }
body{
  margin:0;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.app{
  height:100%;
  width:100%;
  overflow:hidden;
}

.stage{
  position:relative;
  height:100%;
  width:100%;
  background: #07080b;
}

.gb-canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  background:#07080b;
}

.overlay-scanlines{
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:0.20;
  mix-blend-mode: overlay;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,0.05),
      rgba(255,255,255,0.05) 1px,
      rgba(0,0,0,0.00) 3px,
      rgba(0,0,0,0.00) 6px
    );
}

.overlay-vignette{
  position:absolute;
  inset:0;
  pointer-events:none;
  background: radial-gradient(circle at center, rgba(0,0,0,0.0) 35%, rgba(0,0,0,0.55) 100%);
}

.hud{
  position:absolute;
  left:0; right:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-left: calc(12px + var(--safe-left));
  padding-right: calc(12px + var(--safe-right));
  z-index:5;
  pointer-events:none;
}

.hud.top{
  top:0;
  padding-top: calc(10px + var(--safe-top));
  padding-bottom: 10px;
  background: linear-gradient(to bottom, rgba(0,0,0,0.55), rgba(0,0,0,0));
}

.hud.bottom{
  bottom:0;
  padding-top: 10px;
  padding-bottom: calc(14px + var(--safe-bottom));
  background: linear-gradient(to top, rgba(0,0,0,0.65), rgba(0,0,0,0));
}

.hud-left, .hud-right,
.bottom-left, .bottom-center, .bottom-right{
  pointer-events:auto;
  display:flex;
  align-items:center;
  gap:10px;
}

.brand{
  display:flex;
  align-items:center;
  gap:8px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(10,10,14,0.55);
  backdrop-filter: blur(10px);
}

.brand-dot{
  width:10px; height:10px;
  border-radius:999px;
  background: radial-gradient(circle, rgba(123,124,255,1), rgba(123,124,255,0.25));
  box-shadow: 0 0 14px rgba(123,124,255,0.65);
}

.brand-text{
  font-weight:800;
  letter-spacing:1.2px;
  font-size:12px;
}

.status{
  font-size: 13px;
  color: var(--muted);
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(10,10,14,0.45);
  backdrop-filter: blur(10px);
}

.icon-btn{
  border: 1px solid var(--line);
  background: rgba(20,21,26,0.60);
  color: var(--text);
  border-radius: 999px;
  width: 42px;
  height: 42px;
  display:grid;
  place-items:center;
  cursor:pointer;
  backdrop-filter: blur(10px);
}

.icon-btn:hover{ background: rgba(35,36,45,0.70); }
.icon{
  font-size: 18px;
  line-height: 1;
}

.pill{
  border: 1px solid var(--line);
  background: rgba(20,21,26,0.60);
  color: var(--text);
  border-radius: 999px;
  padding: 10px 12px;
  cursor:pointer;
  font-weight: 650;
  letter-spacing: 0.3px;
  backdrop-filter: blur(10px);
}
.pill:hover{ background: rgba(35,36,45,0.70); }

.danger{
  border: 1px solid rgba(255,91,106,0.55);
  background: rgba(255,91,106,0.16);
  color: var(--text);
  border-radius: 999px;
  padding: 10px 12px;
  cursor:pointer;
  font-weight: 650;
}
.danger:hover{ background: rgba(255,91,106,0.24); }

.shutter{
  width: 78px;
  height: 78px;
  border-radius: 999px;
  border: 4px solid rgba(255,255,255,0.90);
  background: rgba(255,255,255,0.06);
  box-shadow:
    0 0 0 8px rgba(0,0,0,0.40),
    0 18px 40px rgba(0,0,0,0.40);
  cursor:pointer;
  position: relative;
}
.shutter:active{
  transform: translateY(1px) scale(0.98);
}
.shutter::after{
  content:"";
  position:absolute;
  inset: 10px;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,0.35);
}

/* Viewfinder */
.viewfinder{
  position:absolute;
  left: calc(12px + var(--safe-left));
  bottom: calc(110px + var(--safe-bottom));
  z-index: 6;
  width: min(34vw, 180px);
  aspect-ratio: 3 / 4;
  transition: 180ms ease;
}

.vf-frame{
  position:relative;
  width:100%;
  height:100%;
  border-radius: 18px;
  overflow:hidden;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(0,0,0,0.35);
  box-shadow: 0 14px 34px rgba(0,0,0,0.40);
}

.viewfinder video{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
  filter: contrast(1.05) saturate(1.05);
}

.vf-label{
  position:absolute;
  left: 10px;
  bottom: 10px;
  padding: 6px 10px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 999px;
  background: rgba(10,10,14,0.50);
  backdrop-filter: blur(10px);
}

.vf-toggle{
  position:absolute;
  right: 10px;
  top: 10px;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(10,10,14,0.55);
  color: var(--text);
  cursor:pointer;
  display:grid;
  place-items:center;
  backdrop-filter: blur(10px);
}

.viewfinder.expanded{
  width: min(70vw, 380px);
  left: calc(50% - min(70vw, 380px)/2);
  bottom: calc(120px + var(--safe-bottom));
  aspect-ratio: 16 / 9;
}

/* Sheets / overlays */
.hidden{ display:none !important; }

.sheet{
  position:absolute;
  inset:0;
  z-index: 20;
  background: rgba(0,0,0,0.55);
  display:grid;
  place-items:end center;
  padding: 14px;
  padding-bottom: calc(14px + var(--safe-bottom));
}

.sheet-card{
  width: min(560px, 100%);
  border-radius: 18px;
  border: 1px solid var(--line);
  background: rgba(20,21,26,0.92);
  backdrop-filter: blur(16px);
  padding: 14px;
}

.sheet-title{
  font-weight: 850;
  letter-spacing: 0.8px;
  margin-bottom: 10px;
}

.sheet-row{
  display:flex;
  gap:10px;
  flex-wrap: wrap;
}

.sheet-opt{
  border: 1px solid var(--line);
  background: rgba(30,31,38,0.85);
  color: var(--text);
  border-radius: 999px;
  padding: 10px 12px;
  cursor:pointer;
  font-weight: 700;
}
.sheet-opt.active{
  border-color: rgba(123,124,255,0.6);
  background: rgba(123,124,255,0.20);
}
.sheet-close{
  margin-top: 12px;
  width: 100%;
  border: 1px solid var(--line);
  background: rgba(30,31,38,0.85);
  color: var(--text);
  border-radius: 14px;
  padding: 12px;
  cursor:pointer;
  font-weight: 750;
}

/* Gallery */
.gallery{
  position:absolute;
  inset:0;
  z-index: 30;
  background: rgba(0,0,0,0.60);
  display:grid;
  place-items:center;
  padding: 14px;
  padding-top: calc(14px + var(--safe-top));
  padding-bottom: calc(14px + var(--safe-bottom));
}

.gallery-card{
  width: min(980px, 100%);
  max-height: 92vh;
  overflow:hidden;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: rgba(20,21,26,0.92);
  backdrop-filter: blur(16px);
  display:flex;
  flex-direction: column;
}

.gallery-head{
  display:flex;
  align-items:center;
  justify-content: space-between;
  padding: 14px;
  border-bottom: 1px solid var(--line);
}
.gallery-title{ font-weight: 900; letter-spacing: 0.6px; }
.gallery-sub{ color: var(--muted); font-size: 13px; margin-top: 4px; }

.gallery-grid{
  padding: 14px;
  overflow:auto;
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
}

.card{
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow:hidden;
  background: rgba(10,10,14,0.45);
  cursor:pointer;
  transition: transform 0.06s ease;
}
.card:hover{ transform: translateY(-1px); }
.card.selected{ outline: 3px solid rgba(123,124,255,0.55); }

.card img{ width: 100%; display:block; background:#05060a; }
.card .meta{
  padding: 10px;
  display:flex;
  justify-content: space-between;
  gap: 10px;
  color: var(--muted);
  font-size: 12px;
}

.gallery-foot{
  padding: 12px 14px;
  border-top: 1px solid var(--line);
  display:flex;
  gap: 10px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

/* Viewer */
.viewer{
  position:absolute;
  inset:0;
  z-index: 40;
  background: rgba(0,0,0,0.70);
  display:grid;
  place-items:center;
  padding: 14px;
}

.viewer-card{
  width: min(920px, 100%);
  border-radius: 18px;
  border: 1px solid var(--line);
  background: rgba(20,21,26,0.94);
  backdrop-filter: blur(16px);
  overflow:hidden;
}

.viewer-head{
  display:flex;
  justify-content: space-between;
  align-items:center;
  padding: 14px;
  border-bottom: 1px solid var(--line);
}
.viewer-title{ font-weight: 900; letter-spacing: 0.4px; }
#viewerImg{ width:100%; display:block; background:#05060a; }

.viewer-foot{
  padding: 12px 14px;
  border-top: 1px solid var(--line);
  display:flex;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

/* Flash */
.flash{
  position:absolute;
  inset:0;
  z-index: 50;
  background: rgba(255,255,255,0.85);
  animation: flash 160ms ease;
}
@keyframes flash{
  from{ opacity: 0.0; }
  30%{ opacity: 1.0; }
  to{ opacity: 0.0; }
}