:root { 
    --gold: #ffcf6a; 
    --red: #b30000; 
}

/* 核心：强制 HTML 和 Body 吞掉整个屏幕高度，包括地址栏下方 */
html, body { 
    margin: 0; padding: 0; 
    width: 100vw; 
    /* dvh 会根据地址栏显示/隐藏动态调整，但我们用 min-height 确保铺满 */
    height: 100vh;
    height: 100dvh; 
    background: transparent !important; 
    overflow: hidden; 
    position: fixed; /* 锁定视口，防止滑动时内容偏移 */
}

/* 1. 背景视频：使用 inset: 0 暴力铺满 */
#home-bg-video { 
    position: fixed; 
    /* 重点：不要写 top/left/width/height，直接写 inset: 0 */
    inset: 0; 
    width: 100vw;
    height: 100dvh;
    object-fit: cover; 
    z-index: -1; 
    filter: brightness(0.4); 
    background: #000;
}

/* 2. 主 UI 容器：也要撑满 */
#ui { 
    position: fixed; 
    inset: 0;
    z-index: 100; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
    pointer-events: none;
}
#ui h1, #ui input, #ui button { pointer-events: auto; }

/* 3. 修正后的页脚：利用 env 变量避开地址栏和 Home 条 */
.footer { 
    position: fixed; 
    bottom: 0;
    left: 0;
    width: 100%; 
    /* 关键：使用 padding-bottom 避开 iPhone 底部的“小胡须” */
    padding-bottom: calc(10px + env(safe-area-inset-bottom)); 
    text-align: center; 
    font-size: 0.8rem; 
    color: rgba(255, 207, 106, 0.4); 
    z-index: 110; 
    pointer-events: none; 
}

/* 4. 抽卡结果层：同样必须 inset: 0 */
#result-layer { 
    position: fixed; 
    inset: 0; 
    z-index: 2000; 
    background: rgba(0,0,0,0.95); 
    display: none; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center;
    padding: env(safe-area-inset-top) 20px env(safe-area-inset-bottom);
}

.card-img { 
    max-height: 70dvh; /* 使用 dvh 确保卡片不会被地址栏挡住 */
    width: auto; 
    max-width: 85%; 
    object-fit: contain;
}