/* Base Canvas Positioning */
.output_canvas { position: absolute; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 1; }

/* Gift Overlay - Centered and Floating */
#gift-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: #000; z-index: 9999; display: flex; justify-content: center; align-items: center; transition: opacity 0.8s ease; }
.gift-btn { animation: float 3s ease-in-out infinite; cursor: pointer; transition: transform 0.2s; }
.gift-btn:hover { transform: scale(1.1); }
@keyframes float { 0% { transform: translateY(0px); } 50% { transform: translateY(-20px); } 100% { transform: translateY(0px); } }
.fade-out { opacity: 0; pointer-events: none; }

/* Dynamic Island Notch Style */
#notch-container { position: absolute; top: 15px; left: 50%; transform: translateX(-50%); z-index: 150; pointer-events: none; }
#dynamic-notch { background: rgba(15, 15, 15, 0.9); backdrop-filter: blur(15px); border: 1px solid rgba(255, 255, 255, 0.1); height: 40px; width: 250px; border-radius: 25px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); pointer-events: auto; transition: all 0.4s cubic-bezier(0.18, 0.89, 0.32, 1.28); }
#dynamic-notch:hover { width: 300px; }
#song-title { font-size: 11px; font-weight: 500; color: #eee; max-width: 150px; }
#playPauseBtn { font-size: 14px; color: #fff; cursor: pointer; transition: 0.2s; }
.playing-anim { animation: rotateMusic 3s linear infinite; }
@keyframes rotateMusic { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* Floating Action Buttons */
.fab-container { position: absolute; top: 20px; right: 20px; display: flex; gap: 15px; z-index: 100; }
.fab { width: 50px; height: 50px; border-radius: 50%; display: flex; justify-content: center; align-items: center; font-size: 22px; cursor: pointer; box-shadow: 0 4px 15px rgba(255, 255, 255, 0.2); transition: 0.2s; border: 1px solid transparent; }
.fab:hover { transform: scale(1.1); box-shadow: 0 6px 20px rgba(255, 255, 255, 0.4); border-color: #fff; }

.hidden { display: none !important; }

/* PIN Modal Override */
#pin-modal { position: absolute; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,0.85); z-index: 200; display: flex; justify-content: center; align-items: center; backdrop-filter: blur(8px); }
.pin-box { width: 380px; max-width: 90%; border: 1px solid #fff; box-shadow: 0 0 30px rgba(255,255,255,0.1); }
.pin-digit { width: 45px; height: 55px; font-size: 24px; border: 1px solid #555; transition: 0.2s; box-shadow: none !important; text-align: center; }
.pin-digit:focus { border-color: #fff; background: #222 !important; color: #fff; }

/* UI Panel Positioning */
.ui-panel { position: absolute; top: 20px; left: 20px; width: 360px; max-width: calc(100vw - 40px); z-index: 50; max-height: 90vh; overflow-y: auto; }
.ui-panel input:focus, .ui-panel select:focus { border-color: #fff; box-shadow: none; }

/* Camera Overlay */
.camera-box { position: absolute; bottom: 20px; right: 20px; width: 280px; height: 210px; z-index: 50; overflow: hidden; background: #000; }
.input_video { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }
.hand_overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform: scaleX(-1); z-index: 51; }

/* Flash Animation */
#countdown-display { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 15vw; color: rgba(255, 255, 255, 0.2); font-weight: bold; z-index: 5; pointer-events: none; text-shadow: 0 0 40px rgba(255,255,255,0.2); }
#flash { position: absolute; top: 0; left: 0; width: 100vw; height: 100vh; background: white; z-index: 999; opacity: 0; pointer-events: none; }
.flash-anim { animation: flashEffect 0.6s ease-out; }
@keyframes flashEffect { 0% { opacity: 1; } 100% { opacity: 0; } }

/* Table Overrides */
.del-btn { background: transparent; border: 1px solid #fff; color: #fff; border-radius: 4px; padding: 4px 10px; font-size: 12px; transition: 0.2s; }
.del-btn:hover { background: #fff; color: #000; }

/* =======================================================
   MOBILE RESPONSIVENESS (SMARTPHONES & TABLETS)
   ======================================================= */
@media screen and (max-width: 768px) {
    /* UI Panel - Fits screen width, leaves space at the bottom */
    .ui-panel { width: calc(100vw - 30px); left: 15px; top: 70px; max-height: calc(100vh - 180px); padding: 20px !important; }
    
    /* Move FABs so they don't hit the Notch or block the UI */
    .fab-container { top: 70px; right: 15px; flex-direction: column; gap: 12px; }
    .fab { width: 45px; height: 45px; font-size: 18px; }

    /* Shrink the Camera Box so it's not obtrusive on small screens */
    .camera-box { width: 140px; height: 105px; bottom: 15px; right: 15px; border-width: 2px !important; }

    /* Adjust Dynamic Notch to not overlap */
    #dynamic-notch { width: auto; min-width: 220px; max-width: 90%; }
    #dynamic-notch:hover { width: auto; min-width: 240px; }

    /* PIN Modal specific mobile sizing */
    .pin-box { padding: 25px 15px !important; }
    .pin-digit { width: 35px; height: 45px; font-size: 20px; }
    
    /* Make the gift text a bit smaller so it fits well */
    .gift-btn h2 { font-size: 24px; }
    .gift-btn i { font-size: 60px !important; }
}

@media screen and (max-width: 360px) {
    /* Extra adjustments for very small phones like iPhone SE */
    .pin-digit { width: 30px; height: 40px; font-size: 18px; }
    .fab-container { top: 60px; right: 10px; }
    .ui-panel { width: calc(100vw - 20px); left: 10px; top: 60px; }
}