:root {
    --apple-red: #FF3B30;
    --bg-color: #000000;
    --glass-bg: rgba(30, 30, 30, 0.65);
    --glass-border: rgba(255, 255, 255, 0.1);
}

body {
    margin: 0; padding: 0; overflow: hidden;
    background-color: var(--bg-color);
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: #FFFFFF;
    user-select: none; -webkit-user-select: none; touch-action: none;
    -webkit-font-smoothing: antialiased;
}

canvas { display: block; position: absolute; inset: 0; z-index: 1; }

/* --- UI COMPONENTS --- */
.view {
    position: absolute; inset: 0; z-index: 10;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    transition: opacity 0.4s cubic-bezier(0.25, 0.1, 0.25, 1), transform 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
    padding: 24px; box-sizing: border-box;
}
.hidden { opacity: 0; pointer-events: none; transform: scale(0.98); }

/* Navigation Bar */
.nav-bar {
    position: absolute; top: 0; left: 0; width: 100%;
    padding: env(safe-area-inset-top, 20px) 24px 16px; box-sizing: border-box;
    display: flex; justify-content: space-between; align-items: center;
    z-index: 50;
}
.nav-title { font-size: 17px; font-weight: 600; letter-spacing: -0.4px; }
.icon-btn {
    background: var(--glass-bg); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border); border-radius: 50%;
    width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
    cursor: pointer; font-size: 20px; color: #fff;
}

/* Apple Style Buttons */
.btn-primary {
    background: var(--apple-red); color: #fff;
    border: none; border-radius: 14px; padding: 16px 32px;
    font-size: 17px; font-weight: 600; width: 100%; max-width: 300px;
    margin-bottom: 12px; cursor: pointer; transition: transform 0.1s;
}
.btn-primary:active { transform: scale(0.96); }

.btn-secondary {
    background: var(--glass-bg); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    color: #fff; border: 1px solid var(--glass-border); border-radius: 14px; 
    padding: 16px 32px; font-size: 17px; font-weight: 600; width: 100%; max-width: 300px;
    cursor: pointer; transition: transform 0.1s;
}
.btn-secondary:active { transform: scale(0.96); }

/* Typography */
h1 { font-size: 34px; font-weight: 700; letter-spacing: -1px; margin: 0 0 8px 0; text-align: center; }
p.subtitle { font-size: 17px; color: #8E8E93; line-height: 1.4; text-align: center; margin: 0 0 40px 0; max-width: 300px; }

/* iOS Bottom Sheet (Modals) */
.sheet-overlay {
    position: absolute; inset: 0; background: rgba(0,0,0,0.5); z-index: 100;
    opacity: 0; pointer-events: none; transition: opacity 0.3s;
}
.sheet {
    position: absolute; bottom: 0; left: 0; width: 100%;
    background: rgba(28, 28, 30, 0.85); backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(40px);
    border-radius: 24px 24px 0 0; padding: 32px 24px calc(env(safe-area-inset-bottom, 24px) + 24px);
    box-sizing: border-box; transform: translateY(100%); transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 101; border-top: 1px solid var(--glass-border);
}
.sheet.active { transform: translateY(0); }
.sheet-overlay.active { opacity: 1; pointer-events: auto; }

.sheet-grabber {
    width: 36px; height: 5px; background: rgba(255,255,255,0.3);
    border-radius: 3px; margin: -16px auto 24px auto;
}

/* Link Box */
.link-box {
    background: #000; border: 1px solid var(--glass-border); border-radius: 12px;
    padding: 16px; font-family: "SF Mono", Menlo, monospace; font-size: 13px;
    color: var(--apple-red); text-align: center; margin-bottom: 24px;
    word-break: break-all;
}

/* Sensor Target */
.sensor-target {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 200px; height: 200px; border-radius: 50%;
    border: 2px solid rgba(255, 59, 48, 0.3);
    display: flex; align-items: center; justify-content: center;
    flex-direction: column; opacity: 1; transition: opacity 0.5s;
    box-shadow: 0 0 40px rgba(255, 59, 48, 0.1);
}
.sensor-target p { font-size: 13px; font-weight: 600; color: var(--apple-red); letter-spacing: 1px; margin: 0; }
.kissing .sensor-target { opacity: 0; }