:root{--color-primary: #c41e3a;--color-secondary: #165b33;--color-accent: #ffd700;--color-background: #fafafa;--color-text: #2c3e50;--color-white: #ffffff;--font-heading: "Playfair Display", serif;--font-body: "Poppins", sans-serif}*{margin:0;padding:0;box-sizing:border-box}body{font-family:var(--font-body);background-color:var(--color-background);background-image:url(/christmas-bg.svg);background-repeat:repeat;color:var(--color-text);line-height:1.6;min-height:100vh;display:flex;flex-direction:column}#app{max-width:100%;min-height:100vh;margin:0 auto;position:relative;overflow-x:hidden}.screen{min-height:100vh;padding:2rem;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;transition:opacity .5s ease-in-out;background:#fffffff2;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}#welcome-screen{position:relative;overflow:hidden}#welcome-screen:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:radial-gradient(circle at center,#fffffff2,#ffffffd9);z-index:-1}h1{font-family:var(--font-heading);font-size:2.5rem;color:var(--color-primary);margin-bottom:1.5rem;animation:fadeInDown 1s ease-out;text-shadow:2px 2px 4px rgba(0,0,0,.1)}h2{font-family:var(--font-heading);font-size:2rem;color:var(--color-secondary);margin-bottom:1rem}p{margin-bottom:2rem;font-size:1.1rem}.primary-button{background-color:var(--color-primary);color:var(--color-white);border:none;padding:1rem 2rem;font-size:1.1rem;border-radius:50px;cursor:pointer;transition:transform .2s ease,background-color .2s ease,box-shadow .2s ease;font-family:var(--font-body);font-weight:600;box-shadow:0 2px 4px #0000001a}.primary-button:hover{transform:translateY(-2px);background-color:#a01830;box-shadow:0 4px 8px #0003}.quiz-content{width:100%;max-width:600px;margin:0 auto;padding:2rem;background:#ffffffe6;border-radius:16px;box-shadow:0 4px 6px #0000001a}.input-group{margin:2rem 0}input[type=text]{width:100%;padding:1rem;font-size:1.1rem;border:2px solid #ddd;border-radius:8px;margin-bottom:.5rem;font-family:var(--font-body);transition:border-color .3s ease,box-shadow .3s ease}input[type=text]:focus{outline:none;border-color:var(--color-secondary);box-shadow:0 0 0 3px #165b331a}.hint-text{color:var(--color-primary);font-size:.9rem;margin-top:.5rem;animation:fadeIn .3s ease-out}.progress-bar{width:100%;height:12px;background-color:#dddddd80;position:fixed;top:0;left:0;z-index:1000;overflow:hidden}.progress-bar:after{content:"";display:block;height:100%;background-color:var(--color-primary);width:var(--progress, 33.33%);transition:width .3s ease;background-image:repeating-linear-gradient(-45deg,transparent,transparent 10px,rgba(255,255,255,.2) 10px,rgba(255,255,255,.2) 20px);animation:moveStripes 20s linear infinite;box-shadow:0 2px 4px #0000001a}@keyframes moveStripes{0%{background-position:0 0}to{background-position:50px 0}}.christmas-tree{width:60px;height:60px;margin-bottom:2rem;filter:drop-shadow(0 2px 4px rgba(0,0,0,.1));animation:treeGlow 2s ease-in-out infinite}@keyframes treeGlow{0%,to{filter:drop-shadow(0 2px 4px rgba(0,0,0,.1))}50%{filter:drop-shadow(0 0 8px rgba(255,215,0,.3))}}.hidden{display:none}@keyframes fadeInDown{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-10px)}75%{transform:translate(10px)}}.incorrect{animation:shake .5s ease-in-out;border-color:var(--color-primary)!important}.correct{border-color:var(--color-secondary)!important;background-color:#165b331a}.celebration-container{font-size:3rem;margin:2rem 0;animation:bounce 1s ease infinite}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}@media (max-width: 768px){h1{font-size:2rem}h2{font-size:1.5rem}.screen{padding:1.5rem}.primary-button{padding:.8rem 1.6rem}.quiz-content{padding:1.5rem}}