* { margin: 0; padding: 0; box-sizing: border-box; }
body {
    font-family: 'Courier New', monospace;
    /* background: rgb(14, 45, 67); */
    background: #FBBAD0;
    color: black;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    height: 100dvh;
}
.container { text-align: center; padding: 0px; width: 100%; max-width: 1000px; height: 95dvh;
margin: 0 auto;
}
.camera-container {
    position: relative; display: inline-block; border: 4px solid white;
    overflow: hidden; margin-bottom: 10px; background: black;
    margin: 0 auto;
    padding: 0;
}
#video {
    width: 100%; max-width: 1000px; height: 95dvh; object-fit: cover;
    display: block;
    margin: 0 auto;
    padding: 0;
}
#video.mirrored {
    transform: scaleX(-1);
}
.overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; }
.status {
    position: absolute; top: 0; left: 0; background: rgb(0,0,255); color: white;
    padding: 10px; font-size: 26px; font-weight: bold; text-transform: uppercase;
    letter-spacing: 1px;
}
.countdown {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    display: flex; align-items: center; justify-content: center;
    font-size: 14em;  /* Increased from 10em */
    font-weight: bold;
    color: #ffff00;   /* Changed from white to neon yellow */
    width: 350px; height: 350px;  /* Increased from 250px */
    text-shadow: 0 0 8px #ffffff;  /* Added neon glow */
    transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);  /* Changed from opacity 0.3s */
}
.countdown.active { 
    opacity: 1; 
    transform: translate(-50%, -50%) scale(1.1);  /* Added scale up effect */
}
.countdown.fade-out {  /* New class for exit animation */
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.8);
}
.phase-button, .carousel-nav, .download-button, .photo-counter {
    background: black; color: white; border: 2px solid white;
    padding: 10px; font-family: 'Courier New', monospace;
    font-size: 16px; font-weight: bold; text-transform: uppercase;
    letter-spacing: 2px; cursor: pointer; margin-top: 5px; transition: all 0.1s;
}
.photo-counter {
    cursor: auto !important;
}
.phase-button:active { transform: translate(2px, 2px); }
.carousel-nav:disabled { background: #666; color: #ccc; border-color: #666; cursor: not-allowed; }
.carousel-nav:disabled:hover { background: #666; }
.download-button {
    background: rgb(0,0,255);
}
.carousel-container { display: none; width: 100%; }
.carousel-container.active { display: block; }
.carousel-image {
    width: 100%; max-width: 1000px; height: 70dvh; object-fit: cover;
    border: 4px solid white; background: white; display: none; margin: 0 auto;
    touch-action: manipulation; /* Optimize for touch */
    user-select: none; /* Prevent text selection on touch */
    -webkit-user-select: none; /* Safari/iOS specific */
    -webkit-touch-callout: default; /* Allow long-press context menu on iOS */
    -webkit-user-drag: none; /* Prevent dragging */
}
.carousel-image.active { display: block; }
.carousel-controls {
    display: flex; justify-content: center; align-items: center;
    gap: 10px; margin: 10px 0;
}
.no-photos {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    text-align: center; font-family: 'Courier New', monospace;
    font-weight: bold; text-transform: uppercase; letter-spacing: 2px;
    color: black; border: 4px solid black; padding: 40px; background: white; z-index: 2;
}
.loading {
    background: black; color: white; padding: 20px; margin-bottom: 20px;
    border: 4px solid rgb(0,0,255); text-transform: uppercase;
    font-weight: bold; letter-spacing: 2px;
}
.detection-box {
    position: absolute; border: 3px solid rgb(255, 0, 0);
    background: rgba(255, 0, 0, 0.1);
}
.detection-box.cat { border: 3px solid rgb(0,0,255); background: rgba(0,0,255,0.1); }
.detection-label {
    position: absolute; top: -30px; left: 0; background: rgb(255, 0, 0);
    color: white; padding: 4px 8px; font-size: 20px;
    font-weight: bold; text-transform: uppercase;
}
.detection-label.cat { background: rgb(0,0,255); }
.photo-count-badge {
    position: absolute; top: 0; right: 0; background: black; color: white;
    padding: 10px 15px; font-size: 14px; font-weight: bold;
    text-transform: uppercase; border-left: 4px solid rgb(0,0,255);
    border-bottom: 4px solid rgb(0,0,255); cursor: pointer;
    transition: all 0.2s; opacity: 0; letter-spacing: 1px;
    user-select: none; pointer-events: auto; z-index: 10;
}
.photo-count-badge.visible { opacity: 1; }
.photo-count-badge:hover {
    background: rgb(0,0,255); color: white; transform: translate(-2px, 2px);
}
.photo-count-badge:active { transform: translate(0, 0); }
.thumbnail-strip {
    display: flex; justify-content: center; align-items: center;
    gap: 10px; padding: 5px; background: black; overflow-x: auto; flex-wrap: wrap;
}
.thumbnail {
    width: 120px; height: 90px; border: 3px solid white; background: white;
    cursor: pointer; transition: all 0.1s; object-fit: cover; flex-shrink: 0;
}
.thumbnail:hover { border-color: white; transform: scale(1.05); }
.thumbnail.active { border-color: rgb(0, 0, 255); box-shadow: 0 0 10px rgba(255,255,255,0.5); }
.control-menu {
    position: absolute; bottom: 10px; left: 10px; z-index: 10;
    display: flex; flex-direction: column; gap: 5px;
}
.control-button {
    background: black; color: white; border: 2px solid white;
    padding: 8px 12px; font-family: 'Courier New', monospace;
    font-size: 12px; cursor: pointer; text-transform: uppercase; letter-spacing: 1px;
    user-select: none; transition: all 0.1s; min-width: 100px; text-align: center;
}
.control-button:hover { background: rgb(0,0,255); }
.control-button.active { background: rgb(0,0,255); }
.control-button.mobile-only { display: none; }
.photo-mode-only { display: block; }
.carousel-mode-only { display: none; }
.hat-overlay {
    position: absolute;
    pointer-events: none;
    z-index: 5;
    transition: all 0.1s ease-out;
}
@media (max-width: 768px) {
    .media-container { width: 100%; height: 75vw; max-height: 600px; }
    .countdown { font-size: 10em; width: 250px; height: 250px; }
    .control-button.mobile-only { display: block; }
}