:root{
  --bg0:#070712;
  --bg1:#0b0b18;
  --card: rgba(20, 20, 34, 0.70);
  --stroke: rgba(255,255,255,0.12);
  --text: rgba(255,255,255,0.92);
  --muted: rgba(255,255,255,0.70);
  --muted2: rgba(255,255,255,0.55);
  --good: #2ee59d;
  --accent1: #7c3aed;
  --accent2: #22d3ee;
  --accent3: #fb7185;
  --shadow: 0 18px 60px rgba(0,0,0,0.45);
  --radius: 22px;
  --radius2: 16px;
}

*{ box-sizing: border-box; }

html, body{
  width: 100%;
  height: 100%;
  min-height: 100%;
  margin: 0;
  padding: 0;
  background: #070712;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: manipulation;
}

html{
  position: fixed;
  inset: 0;
}

body{
  position: fixed;
  inset: 0;
  min-height: -webkit-fill-available;
}

body{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color: var(--text);
  background: radial-gradient(1200px 700px at 15% 20%, rgba(124,58,237,0.25), transparent 60%),
              radial-gradient(1200px 700px at 85% 70%, rgba(34,211,238,0.18), transparent 60%),
              linear-gradient(180deg, var(--bg0), var(--bg1));
  overflow:hidden;
}

#btnSend{ width:100%; }

/* Background texture */
.bg{ position: fixed; inset: 0; pointer-events:none; }

.bgGlow{
  position:absolute; inset:-40px;
  background:
    radial-gradient(800px 500px at 25% 25%, rgba(251,113,133,0.12), transparent 70%),
    radial-gradient(900px 600px at 70% 70%, rgba(34,211,238,0.10), transparent 75%);
  filter: blur(10px);
}
@font-face {
  font-family: 'LobsterLocal';
  src: url('/assets/fonts/LOBSTER_1.3.OTF') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: block;
}
.bgGrid{
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 54px 54px;
  opacity: 0.10;
  mask-image: radial-gradient(closest-side at 50% 50%, rgba(0,0,0,1), transparent 70%);
}

.header-title,
.header-handle,
.footer-location{
  font-family: 'Lobster Two', cursive;
}

.app{
  height: var(--app-height, 100%);
  min-height: var(--app-height, 100%);
  display: flex;
  transform: translateY(var(--keyboard-shift, 0px));
  transition: transform 220ms ease-out;
  flex-direction: column;
  gap: 14px;
  padding: 14px;
  max-width: 820px;
  margin: 0 auto;
}

/* Top bar */
.topbar{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--stroke);
  background: rgba(0,0,0,0.18);
  border-radius: var(--radius);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--shadow);
}

.brand{ display:flex; align-items:center; gap: 12px; }

.brand-mark{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background:
    radial-gradient(circle at 25% 30%, rgba(255,255,255,0.25), transparent 50%),
    linear-gradient(135deg, rgba(124,58,237,0.95), rgba(34,211,238,0.85));
  border: 1px solid rgba(255,255,255,0.18);
}

.brand-mark.brand-logo{
  background:
    url("/assets/logo/logo.png") center/98% no-repeat,
    radial-gradient(circle at 30% 20%, rgba(124,58,237,0.9), rgba(34,211,238,0.7));
  border-radius: 22px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}

.brand-title{ font-size: 18px; font-weight: 900; letter-spacing: 0.2px; }
.brand-subtitle{ font-size: 13px; color: var(--muted2); margin-top: 2px; }

.pill{
  display:flex;
  align-items:center;
  gap:10px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: rgba(0,0,0,0.25);
}

.dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  transition: background 0.25s ease, box-shadow 0.25s ease;
}

.dot.ready{
  background: #4cc9ff;
  box-shadow: 0 0 18px rgba(76,201,255,0.6);
}

.dot.live{
  background: #22c55e;
  box-shadow: 0 0 18px rgba(34,197,94,0.6);
}

.dot.preview{
  background: #a855f7;
  box-shadow: 0 0 18px rgba(168,85,247,0.6);
}

.pillText{ font-size: 13px; color: var(--muted); }

/* Stage */
.stageWrap{
  border: 1px solid var(--stroke);
  background: rgba(0,0,0,0.18);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding: 12px;
}

.stage{
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius2);
  overflow: hidden;
  background: #000;
  border: 1px solid rgba(255,255,255,0.12);
  transition: transform 120ms ease-out;
}

.stage.pulse{
  transform: scale(0.97);
}

#video{
  width: 100%;
  height: 100%;
  transform: scaleX(-1);
  object-fit: cover;
  background: #000;
}

.stage .previewCanvas{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: none;
  object-fit: contain;
  background: #000;
  border-radius: 0;
  border: 0;
}

/* Flash */
.flashOverlay{
  position: fixed;
  inset: 0;
  background: white;
  opacity: 0;
  pointer-events: none;
  z-index: 99999;
}

.flashOverlay.active{
  animation: cameraFlash 1500ms linear;
}

@keyframes cameraFlash{
  0%   { opacity: 0; }
  5%   { opacity: 1; }
  60%  { opacity: 1; }
  100% { opacity: 0; }
}

/* Countdown overlay */
.countdown{
  position:absolute;
  inset: 0;
  display:none;
  align-items:center;
  justify-content:center;
  font-size: 120px;
  font-weight: 900;
  letter-spacing: -1px;
  background: rgba(0,0,0,0.35);
  user-select: none;
}

/* Overlay controls */
.overlay{
  position:absolute;
  inset: 0;
  display:flex;
  flex-direction: column;
  justify-content: space-between;
  pointer-events: none;
}

.overlayTop{
  display:flex;
  justify-content: flex-start;
  padding: 12px;
}

.tip{
  pointer-events: auto;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(0,0,0,0.35);
  backdrop-filter: blur(10px);
}

.tipTitle{ font-size: 12px; color: var(--muted2); }
.tipText{ font-size: 14px; font-weight: 800; margin-top: 2px; }

.overlayBottom{
  pointer-events: auto;
  display:flex;
  gap: 10px;
  padding: 12px;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,0.45));
}

/* Buttons */
.btn{
  appearance: none;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 18px;
  padding: 14px 14px;
  font-size: 16px;
  font-weight: 900;
  color: var(--text);
  background: rgba(255,255,255,0.06);
  cursor: pointer;
  transition: transform .08s ease, filter .12s ease, background .12s ease;
  user-select: none;
  flex: 1;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.btn:active{ transform: scale(0.98); }
.btn:disabled{ opacity: 0.45; cursor: not-allowed; }

.btn-primary{
  background: linear-gradient(135deg, #7c3aed, #22d3ee);
  border: none;
  border-radius: 18px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.35);
}

.btn-primary:hover{ filter: brightness(1.05) saturate(1.1); }

.btn-ghost{
  background: rgba(255,255,255,0.06);
}

/* Preview canvas */
.previewCanvas{
  width: 100%;
  border-radius: var(--radius2);
  border: 1px solid rgba(255,255,255,0.12);
  background: #000;
  display: none;
  margin-top: 12px;
}

/* Bottom panel */
.panel{
  border: 1px solid var(--stroke);
  background: rgba(0,0,0,0.18);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding: 14px;
  display:flex;
  flex-direction: column;
  gap: 14px;
}

.field{
  display:flex;
  flex-direction: column;
  gap: 8px;
}

.label{
  color: var(--muted2);
  font-size: 13px;
  font-weight: 800;
}

.select,
.input{
  width: 100%;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  color: var(--text);
  padding: 12px 14px;
  font-size: 16px;
  outline: none;
}

.input::placeholder{
  color: rgba(255,255,255,0.45);
}

.help{
  font-size: 12px;
  color: var(--muted2);
}

.help.social-line{
  color: rgba(255,255,255,0.75);
  margin-top: 22px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.08);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
}

.help.social-line b{
  color: #4cc9ff;
  font-weight: 800;
}

.toast{
  min-height: 22px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.25);
  color: var(--muted);
  font-size: 14px;
}

.panel .fineprint{
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.4;
  color: rgba(255,255,255,0.85);
}

.segmented{
  display:flex;
  gap: 10px;
}

.seg{
  flex: 1;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  color: var(--text);
  padding: 12px 12px;
  font-size: 15px;
  font-weight: 900;
  cursor: pointer;
}

.seg[aria-pressed="true"]{
  background: linear-gradient(135deg, rgba(251,113,133,0.45), rgba(124,58,237,0.35));
  border-color: rgba(255,255,255,0.20);
}

.hiddenSelect{ display:none; }

/* Small screens */
@media (max-height: 700px){
  body{ overflow:auto; }
}

/* iPad 9.7" portrait (A1893 / iPad 6th gen) */
@media only screen
  and (max-device-width: 768px)
  and (max-device-height: 1024px)
  and (orientation: portrait) {

  html, body{
    width: 100%;
    height: var(--app-height, 100%);
    min-height: var(--app-height, 100%);
    margin: 0;
    padding: 0;
    background: #070712;
    overflow: hidden;
    overscroll-behavior: none;
  }

  body{
    padding-top: 10px;
    position: fixed;
    inset: 0;
    overflow: hidden;
    touch-action: manipulation;
  }

  .app{
    height: var(--app-height);
    max-width: 720px;
    margin: 0 auto;
    padding: 10px;
    gap: 10px;
    display: grid;
    grid-template-rows: auto auto 1fr;
  }

  .topbar{
    padding: 10px 12px;
  }

  .brand-mark{
    width: 40px;
    height: 40px;
  }

  .brand-title{
    font-size: 17px;
  }

  .brand-subtitle,
  .pillText{
    font-size: 12px;
  }

  .pill{
    padding: 8px 10px;
    gap: 8px;
  }

  .stageWrap{
    padding: 10px;
  }

  .stage{
    max-height: 54dvh;
  }

  .stageWrap .toast,
  .stageWrap .help{
    text-align: center;
    font-size: 20px;
    font-weight: 400;
    letter-spacing: 0.2px;
    color: rgba(34, 211, 238, 0.85);
  }

  .overlayTop{
    padding: 10px;
  }

  .overlayBottom{
    padding: 10px;
    gap: 8px;
  }

  .tip{
    padding: 8px 10px;
  }

  .tipTitle{
    font-size: 11px;
  }

  .tipText{
    font-size: 13px;
  }

  .btn{
    padding: 12px 12px;
    font-size: 15px;
    border-radius: 16px;
  }

  .overlayBottom .btn{
    font-size: 24px;
    font-weight: 900;
    padding: 20px 16px;
    letter-spacing: 0.6px;
  }

  .input::placeholder{
    color: #ffffff;
    opacity: 1;
    font-weight: 700;
  }

  .panel{
    padding: 10px;
    gap: 8px;
  }

  .panel .label{
    color: #ffffff;
    font-size: 20px;
    font-weight: 800;
  }

  .panel .help:not(.social-line){
    color: #ffffff;
    font-size: 16px;
    font-weight: 500;
  }

  .social-line,
  .panel .fineprint{
    margin-top: 16px;
    padding-top: 10px;
    border-top: 1px solid rgba(255,255,255,0.08);
  }

  .field{
    gap: 5px;
  }

  .input,
  .select{
    padding: 11px 12px;
    font-size: 16px;
    border-radius: 12px;
  }

  .toast{
    min-height: 18px;
    padding: 8px 10px;
    font-size: 13px;
  }

  #btnSend{
    padding-top: 10px;
    padding-bottom: 10px;
    max-height: 56px;
    font-size: 25px;
  }
}

/* iPad on-screen keyboard support */
body.keyboard-open .app{
  will-change: transform;
}

body.keyboard-open .panel{
  position: relative;
  z-index: 20;
}

body.keyboard-open .input{
  scroll-margin-bottom: 24px;
}

/* Landscape blocker */
@media screen and (orientation: landscape){
  body::before{
    content: "Please rotate iPad to portrait";
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #070712;
    color: #ffffff;
    font-size: 32px;
    font-weight: 800;
    text-align: center;
    padding: 40px;
  }

  .app{
    display: none !important;
  }
}