html {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: 'Arial Black', Gadget, sans-serif;
}

body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #1d1c1f;
}

#canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  z-index: 1;
}

/* Start Screen Styles (Unchanged) */
#start-screen {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; padding: 0; box-sizing: border-box; z-index: 2000;
}
#start-screen-content {
  width: 100%; height: 100%; background-color: #FFC72C; color: #DB0007; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 25px; box-sizing: border-box; border: 12px solid #DB0007; border-radius: 35px; overflow: hidden; box-shadow: 0px 0px 30px 8px rgba(0, 0, 0, 0.4); position: relative;
}
#start-screen-interactive {
  display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; z-index: 2; position: relative;
}
#logo-placeholder {
  max-width: 150px; max-height: 150px; margin-top: 2vh; margin-bottom: 1.5vh;
}
#start-screen h1 {
  font-size: clamp(2.2em, 7vw, 3.2em); margin-top: 0; margin-bottom: 2vh; font-weight: 900; color: #DB0007; line-height: 1.1; text-transform: uppercase; text-shadow: 1px 1px 0px #FFF352, -1px -1px 0px #b00006, 2px 2px 3px rgba(0,0,0,0.2);
}
#start-screen button#start-button {
  padding: 35px 75px; font-size: clamp(2.4em, 11vw, 3.5em); font-weight: 900; color: #FFC72C; background-color: #DB0007; border: 3px solid #FFC72C; border-radius: 150px; cursor: pointer; transition: all 0.2s ease; text-transform: uppercase; min-width: auto; width: fit-content; max-width: 80%; margin-top: 0; margin-bottom: 2.5vh; box-shadow: 0 4px 8px rgba(0,0,0,0.25); text-shadow: 1px 1px 0px #c50007, -1px -1px 0px rgba(255,255,255,0.15), 1px 1px 2px rgba(0,0,0,0.3);
}
#start-screen button#start-button:hover {
  background-color: #c50007; color: #fff352; border-color: #fff352; transform: translateY(-2px); box-shadow: 0 6px 12px rgba(0,0,0,0.3);
}
#start-screen button#start-button:active {
  transform: translateY(1px); background-color: #b00006;
}
#start-screen button#start-button:disabled {
  background-color: #a30005; color: #d4a200; border-color: #d4a200; cursor: not-allowed; box-shadow: none; transform: none; text-shadow: none;
}
#permission-status {
  padding-bottom: 2vh; font-size: clamp(0.9em, 2.5vw, 1.1em); color: #DB0007; font-weight: 700; max-width: 90%; line-height: 1.3; text-shadow: 1px 1px 0px #FFF352, -1px -1px 0px #b00006, 1px 1px 2px rgba(0,0,0,0.15); position: relative; z-index: 1;
}
#bgg-image {
  position: absolute; bottom: 0; right: 0; max-width: 100%; max-height: 40%; width: auto; height: auto; object-fit: contain; z-index: 0;
}

/* 4-DOT START SCREEN LOADER (Unchanged) */
#start-screen-content #loading.custom-loader-start-screen {
  display: flex; justify-content: center; align-items: center; width: 100%; min-height: 100px; margin: 30px 0; z-index: 2; position: relative;
}
.custom-loader-start-screen .dot {
  width: 20px; height: 20px; margin: 0 8px; border-radius: 50%; animation: bounceDot 1.4s infinite ease-in-out both;
}
.custom-loader-start-screen .dot:nth-child(odd) { background-color: #DB0007; }
.custom-loader-start-screen .dot:nth-child(even) { background-color: #FFC72C; border: 1px solid #DB0007; }
.custom-loader-start-screen .dot:nth-child(1) { animation-delay: -0.48s; }
.custom-loader-start-screen .dot:nth-child(2) { animation-delay: -0.32s; }
.custom-loader-start-screen .dot:nth-child(3) { animation-delay: -0.16s; }
.custom-loader-start-screen .dot:nth-child(4) { animation-delay: 0s; }
@keyframes bounceDot { 0%, 80%, 100% { transform: scale(0); opacity: 0.5; } 40% { transform: scale(1.0); opacity: 1; } }

/* 4-DOT GLOBAL LOADER (Unchanged) */
#loading-global.custom-loader-global {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.65); display: flex; justify-content: center; align-items: center; z-index: 3000;
}
.custom-loader-global .dot {
  width: 22px; height: 22px; margin: 0 10px; border-radius: 50%; animation: bounceDot 1.4s infinite ease-in-out both;
}
.custom-loader-global .dot:nth-child(odd) { background-color: #DB0007; }
.custom-loader-global .dot:nth-child(even) { background-color: #FFC72C; }
.custom-loader-global .dot:nth-child(1) { animation-delay: -0.48s; }
.custom-loader-global .dot:nth-child(2) { animation-delay: -0.32s; }
.custom-loader-global .dot:nth-child(3) { animation-delay: -0.16s; }
.custom-loader-global .dot:nth-child(4) { animation-delay: 0s; }

/* Powered by Snap Logo (Unchanged) */
.poweredbysnap-logo {
  width: auto; position: absolute; bottom: -40px; left: 40px; display: flex; align-items: center; justify-content: flex-start; z-index: 900;
}
.poweredbysnap-logo > img { width: 180px; }

/* 3D THEMED CAPTURE BUTTON (Unchanged) */
#controls {
  position: absolute; bottom: 10%; width: 100%; display: flex; justify-content: center; align-items: center; z-index: 999;
}
#capture-button {
  height: var(--button-size, 180px); width: var(--button-size, 180px); background-color: transparent; border: none; border-radius: 50%; z-index: 1000; cursor: pointer; transition: all 0.2s ease; position: relative; -webkit-tap-highlight-color: transparent; box-shadow: 0 6px 12px rgba(0,0,0,0.3), inset 0 3px 5px rgba(0,0,0,0.2);
}
#capture-button::before {
  content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 50%; background: #FFC72C; box-sizing: border-box; border: 10px solid #DB0007; box-shadow: inset 0 0 10px rgba(176,0,6,0.5); transition: all 0.3s ease;
}
#capture-button::after {
  content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 60%; height: 60%; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #f73b41, #DB0007); box-shadow: 0 4px 8px rgba(0,0,0,0.4), inset 0 -3px 4px rgba(0,0,0,0.3); transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
#capture-button:active {
  transform: translateY(3px); box-shadow: 0 3px 6px rgba(0,0,0,0.3), inset 0 3px 5px rgba(0,0,0,0.3);
}
#capture-button:active::after {
  transform: translate(-50%, -50%) scale(0.95); box-shadow: 0 2px 4px rgba(0,0,0,0.4), inset 0 -2px 3px rgba(0,0,0,0.3);
}
#capture-button.recording::before {
  animation: pulse-red-border 1.5s infinite;
}
#capture-button.recording::after {
  width: 35%; height: 35%; border-radius: 25%; background: #DB0007; box-shadow: 0 2px 4px rgba(0,0,0,0.4), inset 0 -2px 3px rgba(0,0,0,0.3);
}
@keyframes pulse-red-border {
  0% { border-color: #DB0007; box-shadow: inset 0 0 10px rgba(176,0,6,0.5); }
  50% { border-color: #ff3c41; box-shadow: inset 0 0 20px rgba(255, 60, 65, 0.8), 0 0 15px rgba(255, 60, 65, 0.5); }
  100% { border-color: #DB0007; box-shadow: inset 0 0 10px rgba(176,0,6,0.5); }
}

/* --- UPDATED: PREVIEW POPUP STYLES --- */
#video-preview-container, #photo-preview-container {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background-color: #FFC72C;
  z-index: 2500; display: flex; justify-content: center;
  align-items: center; padding: 10px; box-sizing: border-box;
}
#video-preview-popup, #photo-preview-popup {
  position: relative; display: flex; flex-direction: column;
  align-items: center;
  gap: 20px;
  aspect-ratio: 9 / 16;
  height: 70vh;
  width: auto;
  max-width: 95vw;
  background: #FFC72C;
  border: 8px solid #DB0007;
  border-radius: 35px;
  padding: 60px; /* UPDATED: Increased padding to make the frame thicker */
  box-shadow: 0px 0px 20px 5px rgba(0, 0, 0, 0.25);
  box-sizing: border-box;
}
.preview-media-wrapper {
  flex-grow: 1;
  width: 100%;
  min-height: 0;
  border-radius: 35px;
  overflow: hidden;
  /* Removed padding from here, it's now on the parent */
}
#preview-video, #preview-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: none;
  border-radius: 35px;
}

/* Bigger Close Button */
#close-video-preview-button, #close-photo-preview-button {
  position: absolute;
  top: 10px; right: 10px;
  width: 80px; height: 80px; /* UPDATED: Increased size */
  background: #DB0007; color: #FFC72C; border: 4px solid #FFC72C;
  border-radius: 50%; font-family: sans-serif;
  font-size: 60px;
  font-weight: bold;
  /* UPDATED: Use flexbox for robust centering of the '×' icon */
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1; /* Reset line-height to prevent interference */
  cursor: pointer; z-index: 2505;
  transition: all 0.2s ease; user-select: none;
  -webkit-tap-highlight-color: transparent;
}
#close-video-preview-button:active, #close-photo-preview-button:active {
    transform: rotate(90deg) scale(0.9);
}

#popup-actions, #photo-popup-actions {
  display: flex;
  justify-content: center;
  gap: 20px;
  width: 100%;
  flex-shrink: 0;
}
.popup-cta-button { 
  font-family: 'Arial Black', Gadget, sans-serif;
  padding: 28px 25px;
  font-size: 1.9em;
  font-weight: 900; color: #FFC72C; background-color: #DB0007;
  border: 4px solid #FFC72C;
  border-radius: 100px; cursor: pointer;
  transition: all 0.2s ease; text-transform: uppercase;
  box-shadow: 0 4px 8px rgba(0,0,0,0.25);
  flex-grow: 1;
  text-align: center;
  line-height: 1;
  max-width: 220px;
}
.popup-cta-button:active {
  transform: translateY(2px) scale(0.98); box-shadow: 0 2px 4px rgba(0,0,0,0.25);
}

/* SWITCH CAMERA BUTTON STYLES (Unchanged) */
#switch-cam {
  position: absolute; top: 5%; right: 5%; z-index: 950;
}
#switch-button {
  height: 70px; width: 70px; background-image: url(assets/SwitchButton.png); background-size: contain; background-position: center; background-repeat: no-repeat; background-color: transparent; border: none; user-select: none; outline: none; transition: transform 0.2s ease; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
#switch-button:active {
  transform: scale(0.9);
}

/* Desktop-specific styles (Unchanged) */
.desktop #capture-button {
  height: 70px; width: 70px;
}
.desktop #capture-button::before {
  border-width: 5px;
}
.desktop #capture-button.recording::before {
  animation: none;
}
.desktop #switch-cam {
  display: none;
}