* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; margin: 0; padding: 0; }

body {
    width: 100%; min-height: 100vh; display: flex; justify-content: center; align-items: center;
    background: radial-gradient(circle at center, #1a1c2c 0%, #050505 100%);
    font-family: 'Inter', sans-serif; -webkit-font-smoothing: antialiased; overflow-x: hidden;
}

.wrapper {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    width: 100%; min-height: 100vh; padding: 20px;
}

/* 偏正方形白框 */
.container {
    text-align: center; width: 100%; max-width: 380px; min-height: 400px;
    background-color: #ffffff; padding: 50px 40px; border-radius: 2px;
    box-shadow: 0 40px 100px rgba(0,0,0,0.9);
    display: flex; flex-direction: column; justify-content: center;
}

.logo-container { margin-bottom: 1.8rem; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.logo-img { max-height: 52px; width: auto; }
.logo-text { font-weight: 900; font-size: 1.1rem; letter-spacing: 0.12rem; color: #000; }
.subtitle { font-size: 0.82rem; color: #666; margin-bottom: 2.2rem; }

input { width: 100%; padding: 14px; border: 1px solid #eee; border-radius: 2px; font-size: 16px; margin-bottom: 1rem; outline: none; }
button { 
    position: relative; width: 100%; padding: 15px; background-color: #000; color: #fff; 
    border: none; border-radius: 2px; font-size: 0.82rem; font-weight: 800; letter-spacing: 0.15rem; 
    cursor: pointer; overflow: hidden; transition: background-color 0.5s ease;
}

footer { margin-top: 2.2rem; }
.footer-main { font-size: 0.65rem; font-weight: 700; color: #000; }
.privacy-note { font-size: 10px; color: #aaa; margin-top: 0.6rem; line-height: 1.4; }

/* 計數器樣式 */
.footer-external { margin-top: 2rem; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.copyright { font-size: 0.75rem; color: rgba(255, 255, 255, 0.2); }
.counter-container { font-size: 0.7rem; color: rgba(255, 255, 255, 0.35); display: flex; align-items: center; }
.slot-machine { display: inline-flex; height: 1rem; overflow: hidden; margin: 0 2px; }
.slot-column { width: 0.6rem; text-align: center; }
.slot-numbers { display: flex; flex-direction: column; font-weight: 400; color: rgba(255, 255, 255, 0.7); font-size: 0.75rem; line-height: 1rem; transition: transform 4s cubic-bezier(0.15, 0.9, 0.25, 1); }
.dot { width: 5px; height: 5px; background-color: #4cd964; border-radius: 50%; margin-right: 6px; box-shadow: 0 0 8px rgba(76, 217, 100, 0.6); animation: pulse 2s infinite; }
@keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.2); opacity: 0.5; } 100% { transform: scale(1); } }

/* --- 復刻圖片 Toast --- */
.toast {
    position: fixed; top: 30px; left: 50%; transform: translateX(-50%) translateY(-150px);
    z-index: 9999; transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}
.toast.show { transform: translateX(-50%) translateY(0); }
.toast-content {
    background: #fff; padding: 10px 24px; border-radius: 50px;
    display: flex; align-items: center; box-shadow: 0 10px 30px rgba(0,0,0,0.4);
}
.check-circle {
    width: 20px; height: 20px; background-color: #4cd964; border-radius: 50%;
    position: relative; margin-right: 12px; display: flex; justify-content: center; align-items: center;
}
.checkmark {
    width: 5px; height: 10px; border: solid white; border-width: 0 2px 2px 0;
    transform: rotate(45deg); margin-top: -2px;
}
.toast-text { color: #000; font-size: 0.9rem; font-weight: 700; letter-spacing: 0.05rem; }

.hidden { display: none !important; }
.shimmer { position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent); animation: loading 1.2s infinite; }
@keyframes loading { from { left: -100%; } to { left: 100%; } }
.animate-in { animation: fadeInScale 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
@keyframes fadeInScale { from { opacity: 0; transform: scale(0.98) translateY(10px); } to { opacity: 1; transform: scale(1) translateY(0); } }