*,*:before,*:after{box-sizing:border-box}html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;min-height:100vh}#root{min-height:100vh}.video-ad-player{position:relative;background:#000;border-radius:12px;overflow:hidden;box-shadow:0 8px 32px #0000004d}.video-element{width:100%;height:100%;object-fit:contain;background:#000}.ad-container{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:auto}.loading-overlay{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#000c;color:#fff;gap:16px}.spinner{width:48px;height:48px;border:4px solid rgba(255,255,255,.2);border-top-color:#3b82f6;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.play-overlay{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(135deg,#1a1a2e,#16213e);cursor:pointer;transition:all .3s ease;gap:16px}.play-overlay:hover{background:linear-gradient(135deg,#1f1f3a,#1a2848)}.play-overlay:hover .play-button{transform:scale(1.1);background:#2563eb}.play-button{width:80px;height:80px;border-radius:50%;background:#3b82f6;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 24px #3b82f666}.play-button svg{width:32px;height:32px;color:#fff;margin-left:4px}.play-overlay p{color:#fffc;font-size:14px;margin:0}.ad-info-overlay{position:absolute;top:12px;left:12px;display:flex;align-items:center;gap:8px;padding:6px 12px;background:#000000b3;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:20px;color:#fff;font-size:13px;font-weight:500}.ad-badge{background:#f59e0b;color:#000;padding:2px 8px;border-radius:4px;font-size:11px;font-weight:700;letter-spacing:.5px}.ad-timer{font-variant-numeric:tabular-nums}.error-overlay{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#000000e6;color:#ff6b6b;gap:16px;padding:24px;text-align:center}.error-overlay p{margin:0;font-size:14px;max-width:300px}.error-overlay button{padding:10px 24px;background:#3b82f6;color:#fff;border:none;border-radius:8px;font-size:14px;cursor:pointer;transition:background .2s}.error-overlay button:hover{background:#2563eb}:root{--bg-primary: #0a0a0f;--bg-secondary: #12121a;--bg-card: #1a1a24;--text-primary: #f0f0f5;--text-secondary: #8888a0;--accent: #3b82f6;--accent-hover: #2563eb;--border: #2a2a3a;--shadow: 0 8px 32px rgba(0, 0, 0, .4)}*{margin:0;padding:0;box-sizing:border-box}body{font-family:SF Pro Display,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:var(--bg-primary);color:var(--text-primary);min-height:100vh}.app{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;background:radial-gradient(ellipse at top,rgba(59,130,246,.08) 0%,transparent 50%),radial-gradient(ellipse at bottom right,rgba(139,92,246,.06) 0%,transparent 50%),var(--bg-primary)}.container{width:100%;max-width:800px;display:flex;flex-direction:column;gap:32px}.header{text-align:center}.header h1{font-size:2.5rem;font-weight:700;margin-bottom:8px;background:linear-gradient(135deg,#fff,#a0a0c0);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.subtitle{color:var(--text-secondary);font-size:1.1rem}.main{display:flex;flex-direction:column;align-items:center;gap:24px}.card{background:var(--bg-card);border:1px solid var(--border);border-radius:16px;padding:32px;width:100%;box-shadow:var(--shadow)}.card h2{font-size:1.25rem;font-weight:600;margin-bottom:20px;color:var(--text-primary)}.ad-type-selector{display:flex;flex-direction:column;gap:12px;margin-bottom:24px}.ad-type-btn{padding:16px 20px;background:var(--bg-secondary);border:2px solid var(--border);border-radius:12px;color:var(--text-primary);font-size:15px;cursor:pointer;transition:all .2s ease;text-align:left}.ad-type-btn:hover{border-color:var(--accent);background:#3b82f60d}.ad-type-btn.active{border-color:var(--accent);background:#3b82f61a;box-shadow:0 0 0 1px var(--accent)}.play-btn{width:100%;padding:18px 24px;background:linear-gradient(135deg,var(--accent) 0%,#1d4ed8 100%);border:none;border-radius:12px;color:#fff;font-size:16px;font-weight:600;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center;gap:10px;box-shadow:0 4px 20px #3b82f64d}.play-btn:hover{transform:translateY(-2px);box-shadow:0 6px 24px #3b82f666}.play-btn .icon{font-size:18px}.hint{margin-top:16px;font-size:13px;color:var(--text-secondary);text-align:center}.playing-section{display:flex;flex-direction:column;align-items:center;gap:20px;width:100%}.ad-notice{font-size:14px;color:var(--text-secondary);text-align:center}.complete-section{width:100%}.success-card{background:var(--bg-card);border:1px solid var(--accent);border-radius:16px;padding:48px 32px;text-align:center;box-shadow:0 0 60px #3b82f61a}.success-icon{font-size:64px;margin-bottom:16px}.success-card h2{font-size:1.75rem;margin-bottom:8px;color:var(--accent)}.success-card p{color:var(--text-secondary);margin-bottom:24px}.reset-btn{padding:14px 32px;background:var(--bg-secondary);border:2px solid var(--border);border-radius:10px;color:var(--text-primary);font-size:15px;font-weight:500;cursor:pointer;transition:all .2s ease}.reset-btn:hover{border-color:var(--accent);background:#3b82f61a}.footer{text-align:center;padding-top:16px;border-top:1px solid var(--border)}.footer p{font-size:13px;color:var(--text-secondary)}.footer strong{color:var(--text-primary)}.footer a{color:var(--accent);text-decoration:none;margin-left:8px}.footer a:hover{text-decoration:underline}@media(max-width:640px){.header h1{font-size:1.75rem}.card{padding:24px}}