:root {
    --xmas-red: linear-gradient(145deg, #e63946, #b31d1f);
    --xmas-gold: linear-gradient(45deg, #ffd700, #f9d71c, #e6b800);
}

body { background: radial-gradient(circle at center, #1a472a, #072211); }
.xmas-font { font-family: 'Mountains of Christmas', cursive; }
.code-font { font-family: 'Fira Code', monospace; }

/* Mobile Scaling */
@media (max-width: 480px) { 
    .gift-container { transform: scale(0.85); } 
    #main-view h1 { font-size: 3rem !important; }
}

/* Snowflake Animation */
.snowflake { color: #fff; position: fixed; top: -10%; z-index: 9999; pointer-events: none; animation: fall linear forwards; }
@keyframes fall { to { transform: translateY(110vh) rotate(360deg); } }

/* THE GIFT BOX */
.gift-container { perspective: 1000px; position: relative; width: 160px; height: 180px; cursor: pointer; }
.gift-box { width: 140px; height: 120px; background: var(--xmas-red); position: absolute; bottom: 0; left: 10px; border-radius: 6px; box-shadow: 0 15px 35px rgba(0,0,0,0.5); overflow: hidden; transition: 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275); }

/* Shimmer Glint Effect */
.glint { position: absolute; top: 0; left: -150%; width: 50%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent); animation: shine-box 4s infinite; }
@keyframes shine-box { 0% { left: -150%; } 20% { left: 150%; } 100% { left: 150%; } }

.ribbon-v { position: absolute; height: 100%; width: 26px; background: var(--xmas-gold); left: 50%; transform: translateX(-50%); z-index: 2; }
.ribbon-h { position: absolute; width: 100%; height: 26px; background: var(--xmas-gold); top: 50%; transform: translateY(-50%); z-index: 2; }

.gift-lid { position: absolute; width: 156px; height: 44px; background: #c1272d; top: 15px; left: 2px; z-index: 10; border: 2px solid #f9d71c; border-radius: 4px; transition: 0.5s ease; box-shadow: 0 8px 15px rgba(0,0,0,0.4); }

.bow-loop { position: absolute; width: 55px; height: 40px; border: 9px solid #f9d71c; border-radius: 50% 50% 0 50%; top: -35px; left: 50%; transform: translateX(-100%) rotate(-15deg); }
.bow-loop.right { border-radius: 50% 50% 50% 0; transform: translateX(0) rotate(15deg); }
.bow-knot { position: absolute; width: 32px; height: 32px; background: #f9d71c; top: -16px; left: 50%; transform: translateX(-50%); border-radius: 6px; }

/* OPEN STATE ANIMATION */
.is-open .gift-lid { transform: translateY(-250px) rotate(-20deg); opacity: 0; }
.is-open .gift-box { transform: scale(0); opacity: 0; }
.is-open #open-text { opacity: 0; }

/* REVEAL LOGIC */
.reveal-card { opacity: 1 !important; transform: scale(1) !important; visibility: visible !important; }

/* LUCKY TOKEN UI */
.lucky-token { background: var(--xmas-gold); border-radius: 20px; padding: 20px; position: relative; overflow: hidden; cursor: pointer; transition: transform 0.2s; }
.lucky-token:active { transform: scale(0.98); }
.token-pulse { position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent); animation: token-shine 3s infinite; }
@keyframes token-shine { to { left: 200%; } }

.floating { animation: float 3s ease-in-out infinite; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }