:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;min-width:320px;min-height:100vh}#root{width:100%;min-height:100vh}*{margin:0;padding:0;box-sizing:border-box}:root{--primary: #6366f1;--primary-dark: #4f46e5;--secondary: #ec4899;--background: #0f172a;--surface: #1e293b;--surface-light: #334155;--text: #f1f5f9;--text-secondary: #cbd5e1;--success: #10b981;--danger: #ef4444;--warning: #f59e0b}body{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;background:linear-gradient(135deg,#0f172a,#1e293b);color:var(--text);min-height:100vh;overflow-x:hidden}.app{max-width:1200px;margin:0 auto;padding:2rem;animation:fadeIn .5s ease-in}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.header{text-align:center;margin-bottom:3rem;animation:slideDown .6s ease-out}@keyframes slideDown{0%{opacity:0;transform:translateY(-30px)}to{opacity:1;transform:translateY(0)}}.title{font-size:3.5rem;font-weight:800;background:linear-gradient(135deg,var(--primary) 0%,var(--secondary) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:.5rem;text-shadow:0 0 30px rgba(99,102,241,.3)}.emoji{display:inline-block;animation:bounce 2s infinite}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.subtitle{font-size:1.2rem;color:var(--text-secondary);font-weight:300}.joke-section{background:var(--surface);border-radius:20px;padding:2rem;margin-bottom:3rem;box-shadow:0 20px 60px #0006;border:1px solid var(--surface-light);transition:transform .3s ease,box-shadow .3s ease}.joke-section:hover{transform:translateY(-5px);box-shadow:0 25px 70px #6366f14d}.joke-card{min-height:150px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#6366f11a,#ec48991a);border-radius:15px;padding:2rem;margin-bottom:1.5rem;border:2px solid transparent;background-clip:padding-box;position:relative;overflow:hidden}.joke-card:before{content:"";position:absolute;inset:0;border-radius:15px;padding:2px;background:linear-gradient(135deg,var(--primary),var(--secondary));-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.5}.joke-text{font-size:1.5rem;line-height:1.6;text-align:center;font-weight:500;animation:jokeAppear .4s ease-out}@keyframes jokeAppear{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}.joke-button{width:100%;padding:1rem 2rem;font-size:1.2rem;font-weight:700;color:#fff;background:linear-gradient(135deg,var(--primary) 0%,var(--primary-dark) 100%);border:none;border-radius:12px;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 15px #6366f166}.joke-button:hover{transform:translateY(-2px);box-shadow:0 6px 20px #6366f199;background:linear-gradient(135deg,var(--primary-dark) 0%,var(--primary) 100%)}.joke-button:active{transform:translateY(0)}.game-section{background:var(--surface);border-radius:20px;padding:2rem;box-shadow:0 20px 60px #0006;border:1px solid var(--surface-light);margin-bottom:2rem}.game-title{font-size:2rem;text-align:center;margin-bottom:.5rem;color:var(--text)}.game-instructions{text-align:center;color:var(--text-secondary);margin-bottom:1.5rem;font-size:1rem}.score-board{display:flex;justify-content:space-around;margin-bottom:1.5rem;padding:1rem;background:var(--background);border-radius:12px}.score-item{font-size:1.2rem;font-weight:700;color:var(--primary)}.game-container{position:relative;width:100%;height:300px;background:linear-gradient(to bottom,#0ea5e9,#38bdf8,#7dd3fc);border-radius:15px;overflow:hidden;cursor:pointer;box-shadow:inset 0 -5px 10px #0003}.game-container.active{animation:gameStart .5s ease-out}@keyframes gameStart{0%{transform:scale(.95)}to{transform:scale(1)}}.player{position:absolute;left:80px;bottom:50px;font-size:3rem;transition:bottom .05s linear;z-index:10;filter:drop-shadow(0 2px 4px rgba(0,0,0,.3))}.obstacle{position:absolute;bottom:50px;font-size:2.5rem;animation:moveObstacle 3s linear infinite;z-index:5;filter:drop-shadow(0 2px 4px rgba(0,0,0,.3))}.ground{position:absolute;bottom:0;width:100%;height:50px;background:linear-gradient(to bottom,#22c55e,#16a34a,#15803d);border-top:3px solid #14532d}.ground:before{content:"";position:absolute;top:-10px;left:0;right:0;height:10px;background:repeating-linear-gradient(90deg,transparent,transparent 10px,rgba(255,255,255,.1) 10px,rgba(255,255,255,.1) 20px);animation:groundMove .5s linear infinite}@keyframes groundMove{0%{transform:translate(0)}to{transform:translate(-20px)}}.game-overlay{position:absolute;inset:0;background:#0f172af2;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:100;animation:overlayFadeIn .3s ease-out}@keyframes overlayFadeIn{0%{opacity:0}to{opacity:1}}.game-overlay h3{font-size:2.5rem;margin-bottom:1rem;background:linear-gradient(135deg,var(--primary) 0%,var(--secondary) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.game-overlay p{font-size:1.2rem;margin-bottom:.5rem;color:var(--text-secondary)}.new-record{color:var(--warning)!important;font-weight:700;animation:pulse 1s infinite}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.8;transform:scale(1.05)}}.start-button{margin-top:1rem;padding:1rem 3rem;font-size:1.3rem;font-weight:700;color:#fff;background:linear-gradient(135deg,var(--secondary) 0%,var(--danger) 100%);border:none;border-radius:12px;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 15px #ec489966}.start-button:hover{transform:translateY(-2px) scale(1.05);box-shadow:0 6px 20px #ec489999}.start-button:active{transform:translateY(0) scale(1)}.footer{text-align:center;padding:2rem;color:var(--text-secondary);font-size:.9rem;animation:fadeIn 1s ease-in .5s backwards}@media(max-width:768px){.app{padding:1rem}.title{font-size:2.5rem}.joke-text{font-size:1.2rem}.game-container{height:250px}.player{font-size:2.5rem}.obstacle{font-size:2rem}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}