*{box-sizing:border-box;padding:0}*,body{margin:0}body{font-family:Segoe UI,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.app-container{min-height:100vh;background:linear-gradient(135deg,#000,#0d1117 30%,#1a1f2e 60%,#0d1117);color:#f0f0f0;position:relative;overflow:hidden}.radial-spotlight{top:50%;left:50%;transform:translate(-50%,-50%);width:150%;height:150%;background:radial-gradient(circle at center,rgba(255,215,0,.03) 0,transparent 70%)}.film-grain,.radial-spotlight{position:absolute;pointer-events:none}.film-grain{inset:0;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' /%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.05'/%3E%3C/svg%3E");opacity:.4;mix-blend-mode:overlay}.sprocket-left,.sprocket-right{position:absolute;top:0;bottom:0;width:40px;background:repeating-linear-gradient(0deg,rgba(255,215,0,.08),rgba(255,215,0,.08) 15px,transparent 0,transparent 25px)}.sprocket-left{left:0;border-right:1px solid rgba(255,215,0,.15);box-shadow:inset -10px 0 20px rgba(0,0,0,.5)}.sprocket-right{right:0;border-left:1px solid rgba(255,215,0,.15);box-shadow:inset 10px 0 20px rgba(0,0,0,.5)}.main-content{max-width:1000px;margin:0 auto;padding:80px 100px;position:relative;z-index:1}.header{text-align:center;margin-bottom:60px}.header-title{font-size:72px;font-weight:900;background:linear-gradient(135deg,gold,#ff8c00 50%,gold);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:12px;text-transform:uppercase;margin-bottom:8px;font-family:Impact,Arial Black,sans-serif;text-shadow:0 0 40px rgba(255,215,0,.4);line-height:1}.header-subtitle{color:gold;font-size:13px;letter-spacing:6px;text-transform:uppercase;opacity:.8;font-weight:600}.card{background:hsla(0,0%,100%,.05);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:20px;padding:50px;border:1px solid rgba(255,215,0,.2);box-shadow:0 20px 60px rgba(0,0,0,.5)}.section-title{font-size:28px;margin-bottom:30px;color:gold;text-align:center}.footer{position:relative;z-index:1;text-align:center;padding:60px 20px 40px;border-top:1px solid rgba(255,215,0,.1)}.footer-credit{font-size:14px;opacity:.6;margin-bottom:12px;font-weight:500;letter-spacing:1px}.footer-credit-name{color:gold;font-weight:600;text-decoration:none;transition:opacity .2s ease}.footer-credit-name:hover{opacity:.8;text-decoration:underline}.footer-tech{font-size:11px;opacity:.4;letter-spacing:.5px}@keyframes fadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse{0%,to{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.1)}}.film-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));grid-gap:20px;gap:20px;margin-bottom:40px}.film-card{padding:12px;background:hsla(0,0%,100%,.05);border:1px solid hsla(0,0%,100%,.1);border-radius:12px;cursor:pointer;text-align:left;transition:all .2s ease;overflow:hidden}.film-card:hover{background:rgba(255,215,0,.1)}.film-card.selected{background:linear-gradient(135deg,rgba(255,215,0,.2),rgba(255,140,0,.2));border:2px solid gold}.film-poster{width:100%;height:280px;object-fit:cover;border-radius:8px;margin-bottom:12px}.film-title{font-size:14px;font-weight:700;color:#fff;margin-bottom:4px}.film-card.selected .film-title{color:gold}.film-info{font-size:12px;opacity:.6}.difficulty-grid{display:flex;gap:16px;margin-bottom:20px}.difficulty-button{flex:1 1;padding:20px;background:hsla(0,0%,100%,.05);border:2px solid hsla(0,0%,100%,.1);border-radius:12px;color:#f0f0f0;font-size:18px;font-weight:700;cursor:pointer;transition:all .3s ease;text-align:left}.difficulty-button.easy.selected{background:linear-gradient(135deg,#4ade80,#22c55e);border-color:#4ade80;color:#0a0a0a}.difficulty-button.hard.selected{background:linear-gradient(135deg,#ef4444,#dc2626);border-color:#ef4444;color:#fff}.difficulty-title{font-size:20px;margin-bottom:8px}.difficulty-description{font-size:13px;opacity:.8;font-weight:400}.quote-card{background:linear-gradient(135deg,rgba(0,0,0,.6),rgba(10,10,20,.8));padding:60px 50px;border-radius:24px;margin-bottom:50px;border:1px solid rgba(255,215,0,.25);box-shadow:0 25px 70px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,215,0,.1);position:relative;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}.quote-badge{position:absolute;top:-18px;left:40px;background:linear-gradient(135deg,gold,#ff8c00);padding:8px 24px;border-radius:24px;font-size:11px;font-weight:700;color:#000;letter-spacing:2px;box-shadow:0 4px 16px rgba(255,215,0,.4)}.quote-text{font-size:26px;line-height:1.7;font-style:italic;text-align:center;color:#fff;text-shadow:2px 2px 8px rgba(0,0,0,.8);font-weight:300;letter-spacing:.3px}.timeline-container{background:linear-gradient(135deg,hsla(0,0%,100%,.03),hsla(0,0%,100%,.08));-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-radius:24px;padding:50px;border:1px solid rgba(255,215,0,.2);box-shadow:0 20px 60px rgba(0,0,0,.4)}.timeline-label{display:block;margin-bottom:28px;font-size:13px;color:gold;letter-spacing:3px;text-align:center;font-weight:600;text-transform:uppercase}.timeline-markers{display:flex;justify-content:space-between;margin-bottom:12px;font-size:11px;opacity:.5;padding-left:20px;padding-right:20px}.timeline-bar{position:relative;height:100px;background:linear-gradient(180deg,rgba(0,0,0,.6),rgba(0,0,0,.8));border-radius:16px;cursor:pointer;border:2px solid rgba(255,215,0,.25);margin-bottom:28px;overflow:visible;box-shadow:inset 0 4px 12px rgba(0,0,0,.5);transition:all .2s ease}.timeline-bar:not(.disabled):hover{border-color:rgba(255,215,0,.4)}.timeline-bar.disabled{cursor:not-allowed}.timeline-dot{position:absolute;top:50%;transform:translate(-50%,-50%);width:24px;height:24px;border-radius:50%;border:3px solid rgba(0,0,0,.8);box-shadow:0 4px 12px rgba(0,0,0,.5);z-index:10;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:#fff}.timeline-dot.correct{background:linear-gradient(135deg,#4ade80,#22c55e)}.timeline-dot.incorrect{background:linear-gradient(135deg,#ef4444,#dc2626)}.timeline-current{position:absolute;top:50%;transform:translate(-50%,-50%);width:32px;height:32px;background:linear-gradient(135deg,gold,#ff8c00);border-radius:50%;border:3px solid rgba(0,0,0,.8);box-shadow:0 0 20px rgba(255,215,0,.6);z-index:20;animation:pulse 1.5s ease-in-out infinite}.timeline-quarter-mark{position:absolute;top:0;bottom:0;width:1px;background:rgba(255,215,0,.2)}.time-input-row{display:flex;gap:20px;align-items:center}.time-display{flex:1 1;padding:24px;background:linear-gradient(135deg,rgba(0,0,0,.6),rgba(10,10,20,.8));border:2px solid rgba(255,215,0,.3);border-radius:16px;color:gold;font-size:32px;font-family:Courier New,monospace;text-align:center;font-weight:700;letter-spacing:2px;box-shadow:inset 0 2px 8px rgba(0,0,0,.5)}.submit-button{padding:24px 48px;background:linear-gradient(135deg,gold,#ff8c00);border:none;border-radius:16px;color:#000;font-size:18px;font-weight:700;cursor:pointer;transition:all .3s ease;min-width:160px;letter-spacing:1px;text-transform:uppercase;box-shadow:0 8px 24px rgba(255,215,0,.3)}.submit-button:hover:not(:disabled){transform:translateY(-2px)}.submit-button:disabled{background:hsla(0,0%,39%,.3);color:#666;cursor:not-allowed;opacity:.4;box-shadow:none}.feedback-message{margin-top:20px;padding:20px;border-radius:12px;font-size:16px;font-weight:700;text-align:center;animation:fadeIn .3s ease}.feedback-message.correct{background:rgba(74,222,128,.1);border:2px solid #4ade80}.feedback-message.incorrect{background:rgba(239,68,68,.1);border:2px solid #ef4444}.timeline-info{margin-top:30px;font-size:13px;opacity:.6;text-align:center}.score-header{display:flex;justify-content:space-between;margin-bottom:40px;padding:20px;background:hsla(0,0%,100%,.05);border-radius:12px;border:1px solid rgba(255,215,0,.2)}.score-item{text-align:left}.score-item.center{text-align:center}.score-item.right{text-align:right}.score-label{font-size:12px;opacity:.7;margin-bottom:4px}.score-value{font-size:18px;font-weight:700}.score-value.gold{color:gold}.game-over-container{text-align:center}.game-over-trophy{color:gold;margin-bottom:30px}.game-over-title{font-size:36px;margin-bottom:20px;color:gold}.game-over-score{font-size:48px;font-weight:700;margin-bottom:40px}.play-again-button{padding:16px 40px;font-size:18px;display:inline-flex;gap:10px}.play-again-button,.start-game-button{background:linear-gradient(135deg,gold,orange);border:none;border-radius:12px;color:#0a0a0a;font-weight:700;cursor:pointer;align-items:center}.start-game-button{width:100%;padding:20px;font-size:20px;display:flex;justify-content:center;gap:12px;transition:all .3s ease;box-shadow:0 10px 30px rgba(255,215,0,.3)}.info-box{background:rgba(255,215,0,.1);padding:30px;border-radius:12px;margin-bottom:30px;border:1px solid rgba(255,215,0,.2)}.info-box h3{font-size:18px;margin-bottom:16px;color:gold}.info-box ul{line-height:1.8;font-size:14px;padding-left:20px}.loading-message{color:gold}.empty-state,.loading-message{text-align:center;padding:40px}.empty-state{background:rgba(255,140,0,.1);border-radius:12px;border:1px dashed rgba(255,215,0,.3)}.empty-state-title{font-size:16px;margin-bottom:12px;color:gold}.empty-state-text{font-size:13px;opacity:.7;line-height:1.6}.empty-state code{background:rgba(0,0,0,.3);padding:2px 6px;border-radius:4px}