body{margin:0;padding:20px;background:linear-gradient(135deg,#0f2027,#203a43,#2c5364);background-size:400% 400%;animation:festiveGradient 8s ease infinite;font-family:Arial,sans-serif;color:#fff;min-height:100vh}.hidden{display:none}@keyframes festiveGradient{0%{background-position:0% 50%}25%{background-position:100% 50%}50%{background-position:0% 100%}75%{background-position:100% 100%}to{background-position:0% 50%}}#container{width:780px;height:600px;border:3px solid;border-image:linear-gradient(45deg,#ff6b6b,#ffd93d,#6bcf7f,#4d9de0,#e15554) 1;background-image:url(/games/xmas25/christmas_rain.jpg);position:relative;overflow:hidden;margin:0 auto 40px;cursor:crosshair;box-shadow:0 0 30px #ffd7004d,inset 0 0 50px #ffffff1a}#container .overlay{position:absolute;inset:0;background:linear-gradient(180deg,#0f2027e6,#203a43cc,#2c5364b3);z-index:2;pointer-events:none}#container .decor{position:absolute;inset:0;background:radial-gradient(circle at 20% 80%,rgba(255,107,107,.1) 0%,transparent 50%),radial-gradient(circle at 80% 20%,rgba(107,207,127,.1) 0%,transparent 50%),radial-gradient(circle at 40% 40%,rgba(255,217,61,.1) 0%,transparent 50%);z-index:3;pointer-events:none}@keyframes fadeCycle{0%{opacity:0}5%{opacity:1}25%{opacity:1}30%{opacity:0}to{opacity:0}}.snowflake{position:absolute;color:#fff;user-select:none;pointer-events:none;font-size:20px;text-shadow:0 0 10px rgba(255,255,255,.8),0 0 20px rgba(173,216,230,.6),0 0 30px rgba(173,216,230,.4);opacity:0;transition:opacity .5s ease-in;z-index:5;filter:drop-shadow(0 0 8px rgba(255,255,255,.7))}.snowflake.visible{opacity:1;animation:sparkle 2s ease-in-out infinite alternate}@keyframes sparkle{0%{filter:drop-shadow(0 0 8px rgba(255,255,255,.7)) brightness(1)}to{filter:drop-shadow(0 0 15px rgba(173,216,230,.9)) brightness(1.2)}}.snowflake.sleet{color:#87ceeb;text-shadow:0 0 10px rgba(135,206,235,.8),0 0 20px rgba(135,206,235,.6);filter:drop-shadow(0 0 10px rgba(135,206,235,.8))}.snowflake.rain{color:#4169e1;text-shadow:0 0 10px rgba(65,105,225,.8),0 0 20px rgba(65,105,225,.6);filter:drop-shadow(0 0 10px rgba(65,105,225,.8));animation:rainShimmer 1.5s ease-in-out infinite}@keyframes rainShimmer{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}.snowflake.settled{opacity:.9!important;transform:scale(.95);transition:opacity .5s ease,transform .5s ease;filter:drop-shadow(0 0 5px rgba(255,255,255,.5));animation:settledGlow 3s ease-in-out infinite}@keyframes settledGlow{0%,to{text-shadow:0 0 8px rgba(255,255,255,.6)}50%{text-shadow:0 0 15px rgba(173,216,230,.8)}}.snowflake.decorative-snow{opacity:.8;transform:scale(1);color:#fff;text-shadow:0 0 12px rgba(255,255,255,.8),0 0 24px rgba(173,216,230,.6);z-index:8;animation:decorativeSparkle 2.5s ease-in-out infinite}@keyframes decorativeSparkle{0%,to{filter:brightness(1) drop-shadow(0 0 8px rgba(255,255,255,.7));transform:scale(1)}50%{filter:brightness(1.3) drop-shadow(0 0 15px rgba(173,216,230,.9));transform:scale(1.05)}}.cue-ball{position:absolute;color:#f44;user-select:none;pointer-events:none;font-size:24px;text-shadow:0 0 15px rgba(255,68,68,.8),0 0 30px rgba(255,68,68,.6);z-index:10;filter:drop-shadow(0 0 12px rgba(255,68,68,.8));animation:cueBallPulse 2s ease-in-out infinite}@keyframes cueBallPulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}.santa{position:absolute;font-size:24px;user-select:none;pointer-events:none;z-index:15;text-shadow:0 0 20px rgba(255,215,0,.8),0 0 40px rgba(255,215,0,.6);animation:santaBounce .5s ease-in-out infinite alternate;filter:drop-shadow(0 0 15px rgba(255,215,0,.8))}@keyframes santaBounce{0%{transform:translateY(0) scale(1)}to{transform:translateY(-5px) scale(1.02)}}.santa.rain-cloud{color:#666;text-shadow:0 0 15px rgba(100,100,100,.8),0 0 30px rgba(100,100,100,.5);animation:rainCloudBounce .7s ease-in-out infinite alternate;filter:drop-shadow(0 0 10px rgba(100,100,100,.6))}@keyframes rainCloudBounce{0%{transform:translateY(0)}to{transform:translateY(-3px)}}.santa.warning,.santa.rain-cloud.warning{animation:festiveWarning .3s ease-in-out infinite}@keyframes festiveWarning{0%,to{filter:brightness(1) drop-shadow(0 0 15px gold);transform:scale(1)}50%{filter:brightness(1.5) drop-shadow(0 0 25px red);transform:scale(1.1)}}.fog-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:radial-gradient(circle at var(--fog-x, 50%) var(--fog-y, 50%),transparent 0%,transparent var(--fog-radius, 150px),rgba(200,200,240,.8) calc(var(--fog-radius, 150px) + 50px),rgba(220,220,250,.95) 100%);pointer-events:none;z-index:12;opacity:0;transition:opacity 1s ease-in-out}.fog-overlay.active{opacity:1;animation:fogSwirl 4s ease-in-out infinite}@keyframes fogSwirl{0%,to{filter:hue-rotate(0deg)}50%{filter:hue-rotate(10deg)}}.fog-warning{position:absolute;top:10px;left:50%;transform:translate(-50%);background:linear-gradient(45deg,#646464e6,#787878e6);color:#fff;padding:8px 20px;border-radius:20px;font-size:14px;font-weight:700;z-index:25;opacity:0;transition:opacity .5s ease-in-out;border:2px solid rgba(255,255,255,.3);box-shadow:0 4px 15px #0000004d}.fog-warning.active{opacity:1;animation:warningPulse 1s ease-in-out infinite}@keyframes warningPulse{0%,to{transform:translate(-50%) scale(1)}50%{transform:translate(-50%) scale(1.05)}}.game-over,.game-won{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);padding:30px 50px;border-radius:20px;font-size:24px;font-weight:700;text-align:center;z-index:20;border:3px solid rgba(255,255,255,.5);box-shadow:0 10px 30px #00000080,inset 0 0 20px #ffffff1a;animation:gameEndPulse 1s ease-in-out infinite alternate}.start-screen{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#000;background-image:url(/images/homepage/Other/christmas_scene_2.jpg);background-repeat:repeat;background-position:top left;padding:20px;max-width:500px;width:90%;z-index:20;border:3px solid rgba(255,255,255,.3);box-shadow:0 15px 40px #0009,inset 0 0 30px #ffffff1a;backdrop-filter:blur(10px);animation:startScreenGlow 3s ease-in-out infinite}@keyframes startScreenGlow{0%,to{box-shadow:0 15px 40px #0009,inset 0 0 30px #ffffff1a,0 0 20px #87ceeb4d}50%{box-shadow:0 15px 40px #0009,inset 0 0 30px #ffffff1a,0 0 30px #87ceeb80}}.start-content h1{border-radius:10px;color:#fff;background-color:red;margin:0 0 20px;font-size:28px;padding:5px;text-align:center;text-shadow:0 2px 4px rgba(0,0,0,.5)}.start-instructions{border-radius:10px;padding:5px;background-color:red;color:#ffffffe6;margin:20px 0;text-align:left;line-height:1.6;font-weight:700}.start-instructions p{margin:0 0 15px;font-size:16px}.start-instructions ul{margin:0 0 20px 20px;padding:0}.start-instructions li{margin:8px 0;font-size:14px}.game-elements{background:#ffffff1a;padding:15px;border-radius:10px;margin:20px 0}.element{margin:8px 0;font-size:14px;opacity:.9}.start-button{background-color:red;border:none;color:#fff;padding:15px 30px;font-size:18px;font-weight:700;border-radius:10px;cursor:pointer;display:block;margin:20px auto 10px;box-shadow:0 6px 20px #0000004d;animation:startButtonPulse 2s ease-in-out infinite}@keyframes startButtonPulse{0%,to{transform:scale(1);box-shadow:0 6px 20px #0000004d}50%{transform:scale(1.05);box-shadow:0 8px 25px #ff6b6b66}}.start-tip{color:#ffffffb3;font-size:12px;font-style:italic;margin:10px 0 0}.game-over{background:linear-gradient(45deg,#ff0000e6,#c80000e6);color:#fff;text-shadow:0 0 10px rgba(255,255,255,.8)}.game-won{background:linear-gradient(45deg,#00ff00e6,#00c800e6);color:#fff;text-shadow:0 0 10px rgba(255,255,255,.8)}@keyframes gameEndPulse{0%{transform:translate(-50%,-50%) scale(1)}to{transform:translate(-50%,-50%) scale(1.05)}}.controls{text-align:center;margin:20px 0;padding:20px;background:linear-gradient(45deg,#ffffff1a,#ffffff0d);border-radius:15px;backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2);box-shadow:0 8px 25px #0003}.game-info{display:flex;justify-content:space-between;align-items:center;max-width:800px;margin:0 auto 20px;padding:0 20px}.counter,.timer{background:linear-gradient(45deg,#fff3,#ffffff1a);padding:15px 25px;border-radius:12px;font-size:18px;font-weight:700;border:1px solid rgba(255,255,255,.3);backdrop-filter:blur(10px);box-shadow:0 4px 15px #0003,inset 0 0 10px #ffffff1a;text-shadow:0 1px 3px rgba(0,0,0,.5)}input,button{margin:8px;padding:12px 16px;border-radius:10px;border:2px solid rgba(255,255,255,.3);background:linear-gradient(45deg,#fff3,#ffffff1a);color:#fff;font-weight:700;backdrop-filter:blur(10px);box-shadow:0 4px 15px #0003;transition:all .3s ease}input::placeholder{color:#ffffffb3;font-weight:400}button{cursor:pointer;text-shadow:0 1px 3px rgba(0,0,0,.5)}button:hover{background:linear-gradient(45deg,#fff6,#ffffff4d);transform:translateY(-2px);box-shadow:0 6px 20px #0000004d}button:active{transform:translateY(0);box-shadow:0 4px 15px #0003}.aim-line{position:absolute;background:linear-gradient(90deg,#fffc,#ffd70099,#fff6);height:3px;transform-origin:0 50%;pointer-events:none;z-index:5;display:none;border-radius:2px;box-shadow:0 0 10px #ffd700cc;animation:aimLineGlow 1s ease-in-out infinite alternate}@keyframes aimLineGlow{0%{box-shadow:0 0 10px #ffd700cc;opacity:.8}to{box-shadow:0 0 20px gold;opacity:1}}.brick{position:absolute;user-select:none;pointer-events:none;z-index:6;border-radius:6px;border:2px solid rgba(255,255,255,.3);backdrop-filter:blur(5px);display:flex;align-items:center;justify-content:center;font-weight:700;transition:all .15s ease;text-shadow:0 1px 3px rgba(0,0,0,.5)}.static-brick{animation:staticBrickGlow 3s ease-in-out infinite}@keyframes staticBrickGlow{0%,to{filter:brightness(1);transform:scale(1)}50%{filter:brightness(1.1);transform:scale(1.02)}}.moving-brick{animation:movingBrickShimmer 2s ease-in-out infinite}@keyframes movingBrickShimmer{0%,to{filter:brightness(1) hue-rotate(0deg);transform:scale(1)}25%{filter:brightness(1.15) hue-rotate(5deg);transform:scale(1.03)}50%{filter:brightness(1.2) hue-rotate(10deg);transform:scale(1.05)}75%{filter:brightness(1.15) hue-rotate(5deg);transform:scale(1.03)}}.snow-cloud{position:absolute;user-select:none;pointer-events:none;z-index:14;filter:drop-shadow(0 0 10px rgba(135,206,235,.8));text-shadow:0 0 15px rgba(135,206,235,.9);transition:all .2s ease;animation:snowCloudFloat 3s ease-in-out infinite}@keyframes snowCloudFloat{0%,to{transform:translateY(0) scale(1);filter:drop-shadow(0 0 10px rgba(135,206,235,.8)) brightness(1)}50%{transform:translateY(-8px) scale(1.05);filter:drop-shadow(0 0 15px rgba(135,206,235,1)) brightness(1.1)}}@keyframes snowCloudBonus{0%{transform:scale(1);filter:drop-shadow(0 0 10px rgba(135,206,235,.8)) brightness(1)}25%{transform:scale(1.3);filter:drop-shadow(0 0 25px rgba(135,206,235,1)) brightness(1.5)}50%{transform:scale(1.5) rotate(5deg);filter:drop-shadow(0 0 30px rgba(255,255,255,1)) brightness(1.8)}75%{transform:scale(1.2) rotate(-3deg);filter:drop-shadow(0 0 25px rgba(135,206,235,1)) brightness(1.5)}to{transform:scale(1);filter:drop-shadow(0 0 15px rgba(135,206,235,.9)) brightness(1.2)}}.scrooge{position:absolute;user-select:none;pointer-events:none;z-index:16;filter:drop-shadow(0 0 12px rgba(139,69,19,.8));text-shadow:0 0 15px rgba(139,69,19,.9);transition:all .3s ease;animation:scroogeWalk 2s ease-in-out infinite}@keyframes scroogeWalk{0%,to{transform:translateY(0) scale(1) rotate(0);filter:drop-shadow(0 0 12px rgba(139,69,19,.8)) brightness(1)}25%{transform:translateY(-3px) scale(1.02) rotate(-1deg);filter:drop-shadow(0 0 15px rgba(139,69,19,.9)) brightness(1.05)}50%{transform:translateY(-5px) scale(1.05) rotate(0);filter:drop-shadow(0 0 18px rgba(139,69,19,1)) brightness(1.1)}75%{transform:translateY(-3px) scale(1.02) rotate(1deg);filter:drop-shadow(0 0 15px rgba(139,69,19,.9)) brightness(1.05)}}@keyframes scroogeEvil{0%{transform:scale(1) rotate(0);filter:drop-shadow(0 0 12px rgba(139,69,19,.8)) brightness(1)}25%{transform:scale(1.3) rotate(-10deg);filter:drop-shadow(0 0 25px rgba(255,0,0,1)) brightness(1.5)}50%{transform:scale(1.5) rotate(5deg);filter:drop-shadow(0 0 30px rgba(139,0,0,1)) brightness(1.8)}75%{transform:scale(1.2) rotate(-5deg);filter:drop-shadow(0 0 25px rgba(255,0,0,1)) brightness(1.5)}to{transform:scale(1) rotate(0);filter:drop-shadow(0 0 15px rgba(139,69,19,.9)) brightness(1.2)}}@keyframes scroogeStunned{0%,to{transform:rotate(-5deg) scale(1);filter:drop-shadow(0 0 20px rgba(255,255,0,1)) brightness(1.5)}50%{transform:rotate(5deg) scale(1.1);filter:drop-shadow(0 0 25px rgba(255,255,0,1)) brightness(1.8)}}
