:root {
  --chocolate-brown: #442619;
  --chocolate-brown-dark: #331c12; 
  --sunglow-yellow: #FFC10E;
  --sunglow-yellow-dark: #D4A200; /* Darker yellow for 3D effect */
  --glazed-butter: #FFFCD5;
  --base-plate: #dad7b4; /* The beige base for the button */
  --font-family-brand: 'Poppins', 'Arial Black', sans-serif;
}

html, body {
  margin: 0; padding: 0; width: 100%; height: 100%;
  overflow: hidden; font-family: var(--font-family-brand);
  background-color: var(--sunglow-yellow);
}

#main-app-container {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: var(--sunglow-yellow);
}

/* --- FULLY 3D CANVAS FRAME --- */
#canvas-container {
  position: absolute; /* Positioned by ui.js */
  border-radius: 45px;
  background-color: var(--sunglow-yellow);
  box-shadow: 
    0 12px 0 0 var(--sunglow-yellow-dark),
    0 20px 35px rgba(0,0,0,0.3),
    inset 0 0 15px rgba(255,255,255,0.5);
  z-index: 1;
  padding: 15px;
  box-sizing: border-box;
}
#canvas {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 30px; /* Rounded corners for the actual camera view */
  z-index: 1;
}

/* --- THEMED START SCREEN --- */
#start-screen {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background-color: var(--sunglow-yellow);
  display: flex; justify-content: center; align-items: center; z-index: 2000;
  border-radius: 45px;
  box-shadow: 
    0 12px 0 0 var(--sunglow-yellow-dark),
    0 20px 35px rgba(0,0,0,0.3),
    inset 0 0 15px rgba(255,255,255,0.5);
  padding: 15px;
  box-sizing: border-box;
}
#start-screen-content {
  width: 100%; height: 100%;
  color: var(--chocolate-brown); 
  background-color: var(--glazed-butter);
  border-radius: 30px;
  box-shadow: inset 0 0 15px rgba(0,0,0,0.1);
  display: flex; flex-direction: column;
  justify-content: center; align-items: center; text-align: center; 
  padding: 25px; box-sizing: border-box;
}
#logo-placeholder { max-width: 120px; margin-bottom: 2vh; }
.brand-heading {
  font-size: clamp(2.2em, 7vw, 3.2em); margin: 1vh 0 4vh; font-weight: 800;
  line-height: 1.15; text-transform: uppercase; color: var(--chocolate-brown);
}

/* --- REAL 3D BUTTON --- */
.brand-button-3d {
  padding: 20px 40px; font-size: clamp(1.5em, 7vw, 2.2em); font-weight: 800;
  color: var(--glazed-butter); background-color: var(--chocolate-brown);
  border: none; border-radius: 100px; cursor: pointer;
  box-shadow: 0 8px 0 0 var(--chocolate-brown-dark), 0 12px 20px rgba(0,0,0,0.3);
  text-transform: uppercase; transition: all 0.15s ease-out;
}
.brand-button-3d:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 0 0 var(--chocolate-brown-dark), 0 16px 25px rgba(0,0,0,0.25);
}
.brand-button-3d:active {
  transform: translateY(4px);
  box-shadow: 0 4px 0 0 var(--chocolate-brown-dark), 0 6px 10px rgba(0,0,0,0.3);
}

/* --- 3D CAPTURE BUTTON --- */
#controls { position: absolute; bottom: 3%; width: 100%; display: flex; justify-content: center; align-items: center; z-index: 999; }
#capture-button {
  height: 90px; width: 90px;
  border-radius: 50%; z-index: 1000; cursor: pointer;
  -webkit-tap-highlight-color: transparent; position: relative; border: none;
  background-color: var(--base-plate);
  box-shadow: 0 4px 10px rgba(0,0,0,0.4);
  transition: all 0.3s ease;
}
#capture-button::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -55%);
  width: 74px; height: 74px;
  background-color: var(--sunglow-yellow);
  border-radius: 50%;
  box-shadow: 0 7px 0 0 var(--sunglow-yellow-dark);
  transition: all 0.3s ease-in-out;
}
#capture-button:active::after {
  transform: translate(-50%, -48%);
  box-shadow: 0 3px 0 0 var(--sunglow-yellow-dark);
}
#capture-button.recording::after {
  width: 34px; height: 34px;
  border-radius: 10px;
  background-color: var(--chocolate-brown);
  box-shadow: 0 5px 0 0 var(--chocolate-brown-dark);
}
#capture-button.recording {
  animation: pulse-glow 1.5s infinite;
}
@keyframes pulse-glow {
  0% { box-shadow: 0 4px 10px rgba(0,0,0,0.4), 0 0 0 0px rgba(255, 193, 14, 0.0); }
  50% { box-shadow: 0 4px 10px rgba(0,0,0,0.4), 0 0 0 12px rgba(255, 193, 14, 0.7); }
  100% { box-shadow: 0 4px 10px rgba(0,0,0,0.4), 0 0 0 0px rgba(255, 193, 14, 0.0); }
}

/* --- FULLY 3D PREVIEW POPUPS --- */
.preview-container {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  z-index: 2500; background-color: rgba(0,0,0,0.5); backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex; justify-content: center; align-items: center; padding: 10px; box-sizing: border-box;
}
.preview-popup-3d {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px;
  width: 100%; max-width: 400px; max-height: 80vh;
  aspect-ratio: 9 / 16;
  background: var(--sunglow-yellow); color: var(--chocolate-brown);
  border-radius: 35px; padding: 15px; box-sizing: border-box;
  box-shadow: 0 10px 0 0 var(--sunglow-yellow-dark), 0 18px 30px rgba(0,0,0,0.4);
}
.preview-media-wrapper {
  flex-grow: 1; width: 100%; min-height: 0; border-radius: 20px; overflow: hidden;
  box-shadow: inset 0px 5px 15px rgba(0,0,0,0.2);
}
#preview-video, #preview-image { width: 100%; height: 100%; object-fit: cover; }
.close-preview-button {
  position: absolute; top: -10px; right: -10px; width: 45px; height: 45px;
  background: var(--chocolate-brown); color: var(--sunglow-yellow); border: 4px solid var(--glazed-butter);
  border-radius: 50%; font-size: 24px; font-weight: 800;
  display: flex; align-items: center; justify-content: center; line-height: 1;
  cursor: pointer; z-index: 2505; transition: all 0.2s ease;
  box-shadow: 0 5px 10px rgba(0,0,0,0.3);
}
.close-preview-button:active { transform: scale(0.95) rotate(90deg); }
.popup-actions { 
  display: flex; justify-content: center; gap: 15px; width: 100%; 
}
.popup-button { 
  font-size: 1em; padding: 12px 25px; flex-grow: 0;
}
.popup-button.secondary {
  background: var(--glazed-butter); color: var(--chocolate-brown);
  box-shadow: 0 8px 0 0 var(--base-plate), 0 12px 20px rgba(0,0,0,0.2);
}
.popup-button.secondary:hover { box-shadow: 0 10px 0 0 var(--base-plate), 0 16px 25px rgba(0,0,0,0.15); }
.popup-button.secondary:active { transform: translateY(4px); box-shadow: 0 4px 0 0 var(--base-plate), 0 6px 10px rgba(0,0,0,0.2); }

/* --- REVERTED & RESTYLED 3D DOT LOADER --- */
.custom-loader-container {
  display: flex; justify-content: center; align-items: center;
  width: 100%; min-height: 120px;
}
.custom-loader-container.global {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%; 
  background-color: rgba(0, 0, 0, 0.65); z-index: 3000;
}
.dot {
  width: 22px; height: 22px;
  margin: 0 8px;
  border-radius: 50%;
  animation: bounceDot 1.4s infinite ease-in-out both;
}
/* Style for all dots */
.custom-loader-container .dot {
  box-shadow: 0 4px 0 0_var(--shadow-color-placeholder), 0 6px 8px rgba(0,0,0,0.2);
}
/* Alternating Colors & Shadows */
#start-screen .dot:nth-child(odd) {
  background-color: var(--chocolate-brown);
  box-shadow: 0 4px 0 0 var(--chocolate-brown-dark);
}
#start-screen .dot:nth-child(even) {
  background-color: var(--sunglow-yellow);
  box-shadow: 0 4px 0 0 var(--sunglow-yellow-dark);
}
#loading-global .dot:nth-child(odd) {
  background-color: var(--chocolate-brown);
  box-shadow: 0 4px 0 0 var(--chocolate-brown-dark);
}
#loading-global .dot:nth-child(even) {
  background-color: var(--sunglow-yellow);
  box-shadow: 0 4px 0 0 var(--sunglow-yellow-dark);
}
/* Animation Keyframes */
.dot:nth-child(1) { animation-delay: -0.32s; }
.dot:nth-child(2) { animation-delay: -0.16s; }
.dot:nth-child(3) { animation-delay: 0s; }
.dot:nth-child(4) { animation-delay: 0.16s; }
@keyframes bounceDot { 
  0%, 80%, 100% { transform: scale(0.8) translateY(2px); opacity: 0.7; }
  40% { transform: scale(1.0) translateY(0); opacity: 1; }
}


/* --- MOBILE OPTIMIZATIONS --- */
@media (max-width: 767px) {
  #start-screen, #canvas-container { border-radius: 35px; padding: 10px; }
  #start-screen-content, #canvas { border-radius: 25px; }
  #controls { bottom: 3%; }
}