@import "https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap";@property --mesh-color-1{syntax:"<color>";inherits:true;initial-value:#1e005080}@property --mesh-color-2{syntax:"<color>";inherits:true;initial-value:#00327866}@property --mesh-color-3{syntax:"<color>";inherits:true;initial-value:#00143c4d}:root{--bg-main:radial-gradient(circle at 50% 50%, #0d0f12 0%, #000 100%);--bg-card:#ffffff05;--bg-card-hover:#ffffff0a;--border-glass:1px solid #00e5ff1a;--border-focus:1px solid #00e5ff;--text-primary:#fff;--text-secondary:#8e9a9d;--text-muted:#4e5a5c;--primary:#00e5ff;--primary-glow:#00e5ff4d;--secondary:#00e5ff;--secondary-glow:#00e5ff4d;--accent:#fff;--accent-glow:#fff3;--success:#00ffd8;--warning:#fff;--font-title:"Outfit", "Plus Jakarta Sans", sans-serif;--font-body:"Plus Jakarta Sans", sans-serif;--shadow-neon:0 8px 32px 0 #00e5ff14;--shadow-neon-hover:0 12px 48px 0 #00e5ff33;--transition-smooth:all .3s cubic-bezier(.4, 0, .2, 1);--radius-lg:16px;--radius-md:10px}*{box-sizing:border-box;margin:0;padding:0}body{color:var(--text-primary);font-family:var(--font-body);background:#050308;min-height:100vh;line-height:1.6;overflow-x:hidden}body:before{content:"";z-index:-1;background:radial-gradient(ellipse 80% 60% at 20% 30%, var(--mesh-color-1,#1e005080) 0%, transparent 70%), radial-gradient(ellipse 60% 80% at 80% 70%, var(--mesh-color-2,#00327866) 0%, transparent 70%), radial-gradient(ellipse 70% 50% at 50% 50%, var(--mesh-color-3,#00143c4d) 0%, transparent 70%);transition:--mesh-color-1 2s,--mesh-color-2 2s,--mesh-color-3 2s;animation:12s ease-in-out infinite alternate mesh-shift;position:fixed;inset:0}@keyframes mesh-shift{0%{background-position:0 0,100% 100%,50%;transform:scale(1)rotate(0)}50%{background-position:30% 20%,70% 80%,40% 60%;transform:scale(1.05)rotate(1deg)}to{background-position:10% 40%,90% 60%,60% 30%;transform:scale(1)rotate(-1deg)}}[data-phase=lobby]{--mesh-color-1:#1e005080;--mesh-color-2:#14003c66;--mesh-color-3:#0a05284d}[data-phase=prompting]{--mesh-color-1:#003c9673;--mesh-color-2:#0078b459;--mesh-color-3:#5000a04d}[data-phase=prompting][data-urgent=true]{--mesh-color-1:#c83c0080;--mesh-color-2:#b4640066;--mesh-color-3:#78003c59}body[data-phase=prompting][data-urgent=true]:before{animation-duration:3s}[data-phase=voting]{--mesh-color-1:#c8640066;--mesh-color-2:#b43c0059;--mesh-color-3:#7828004d}[data-phase=results]{--mesh-color-1:#b4960066;--mesh-color-2:#00a0504d;--mesh-color-3:#78640040}h1,h2,h3,h4,h5,h6{font-family:var(--font-title);letter-spacing:-.02em;font-weight:700}.glass-panel{background:var(--bg-card);-webkit-backdrop-filter:blur(16px);border:var(--border-glass);border-radius:var(--radius-lg);box-shadow:var(--shadow-neon);transition:var(--transition-smooth)}.glass-panel:hover{background:var(--bg-card-hover);box-shadow:var(--shadow-neon-hover);border-color:#ffffff1f}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:#0003}::-webkit-scrollbar-thumb{background:var(--primary);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--secondary)}.btn{font-family:var(--font-title);border-radius:var(--radius-md);cursor:pointer;transition:var(--transition-smooth);border:none;justify-content:center;align-items:center;gap:8px;padding:12px 28px;font-size:1rem;font-weight:600;text-decoration:none;display:inline-flex}.btn-primary{background:linear-gradient(135deg, var(--primary) 0%, #512da8 100%);color:#fff;box-shadow:0 4px 14px 0 var(--primary-glow)}.btn-primary:hover:not(:disabled){box-shadow:0 6px 20px 0 var(--primary-glow);filter:brightness(1.1);transform:translateY(-2px)}.btn-primary:active:not(:disabled){transform:translateY(1px)}.btn-primary:disabled{opacity:.5;cursor:not-allowed}.btn-secondary{color:var(--secondary);border:1px solid var(--secondary);background:0 0;box-shadow:0 4px 14px #00e5ff1a}.btn-secondary:hover:not(:disabled){background:var(--secondary);color:#050308;box-shadow:0 6px 20px 0 var(--secondary-glow);transform:translateY(-2px)}.btn-danger{color:var(--text-primary);box-shadow:none;background:0 0;border:1px solid #ffffff40}.btn-danger:hover{background:#ffffff14;border-color:#ffffff80;transform:translateY(-1px)}.rating-slider{-webkit-appearance:none;width:100%;height:12px;transition:var(--transition-smooth);background:#ffffff1a;border-radius:6px;outline:none}.rating-slider::-webkit-slider-thumb{appearance:none;background:linear-gradient(135deg, var(--secondary) 0%, var(--primary) 100%);cursor:pointer;width:28px;height:28px;box-shadow:0 0 10px var(--secondary-glow);transition:var(--transition-smooth);border-radius:50%}.rating-slider::-webkit-slider-thumb:hover{box-shadow:0 0 18px var(--secondary-glow);transform:scale(1.2)}.form-input{border:var(--border-glass);border-radius:var(--radius-md);color:var(--text-primary);font-family:var(--font-body);width:100%;transition:var(--transition-smooth);background:#0000004d;padding:14px 18px;font-size:1rem}.form-input:focus{border-color:var(--primary);outline:none;box-shadow:0 0 0 4px #7c4dff40}@keyframes pulse{0%,to{opacity:.6}50%{opacity:1}}.pulse-slow{animation:3s infinite pulse}@keyframes spin{to{transform:rotate(360deg)}}.spinner{border:3px solid #ffffff1a;border-top-color:var(--secondary);border-radius:50%;width:24px;height:24px;animation:.8s linear infinite spin}.header-bar{border-bottom:1px solid #ffffff0d;justify-content:space-between;align-items:center;gap:15px;margin-bottom:30px;padding-bottom:15px;display:flex}.header-actions{align-items:center;gap:15px;display:flex}.lobby-selection-panel{width:100%;max-width:500px;margin:0 auto;padding:40px}.lobby-panel{text-align:center;width:100%;max-width:700px;margin:0 auto;padding:40px}.settings-grid{grid-template-columns:1fr 1fr 1fr;gap:15px;display:grid}.game-grid{grid-template-columns:1.2fr 1fr;gap:30px;width:100%;max-width:1200px;margin:0 auto;display:grid}.battle-panel{flex-direction:column;gap:20px;padding:30px;display:flex}.target-image-container{border-radius:var(--radius-lg);border:var(--border-glass);background:#0003;justify-content:center;align-items:center;height:420px;display:flex;overflow:hidden}.render-panel{flex-direction:column;justify-content:center;align-items:center;min-height:260px;padding:20px;display:flex}.voting-panel{flex-direction:column;gap:25px;width:100%;max-width:800px;margin:0 auto;padding:40px;display:flex}.voting-image-container{border-radius:var(--radius-lg);border:var(--border-glass);background:#00000040;justify-content:center;align-items:center;height:380px;display:flex;overflow:hidden}.rating-buttons-container{justify-content:space-between;gap:10px;width:100%;margin-top:5px;display:flex}.rating-button{border-radius:var(--radius-md);transition:var(--transition-smooth);flex:1;padding:12px 0;font-size:1.1rem;font-weight:800}.score-summary-panel{border:1px solid var(--success);text-align:center;background:#00e6760d;grid-template-columns:1fr 1fr;gap:20px;width:100%;padding:20px;display:grid}.leaderboard-panel{width:100%;max-width:600px;margin:0 auto;padding:40px}@media (width<=768px){.header-bar{text-align:center;flex-direction:column;align-items:center}.header-actions{flex-wrap:wrap;justify-content:center;gap:10px;width:100%}.lobby-selection-panel,.lobby-panel{padding:24px 16px}.game-grid{grid-template-columns:1fr;gap:20px}.battle-panel{gap:15px;padding:20px 15px}.target-image-container{height:280px}.render-panel{min-height:200px;padding:15px}.voting-panel{gap:15px;padding:24px 16px}.voting-image-container{height:260px}.rating-buttons-container{gap:5px}.rating-button{padding:8px 0;font-size:.95rem}.leaderboard-panel{padding:24px 16px}}@media (width<=500px){.settings-grid{grid-template-columns:1fr;gap:12px}.score-summary-panel{grid-template-columns:1fr;gap:15px}}.error-banner{color:#ff6b6b;border-radius:var(--radius-md);cursor:pointer;z-index:1000;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);text-align:center;background:#ff3b3026;border:1px solid #ff3b3080;max-width:90vw;padding:12px 24px;font-size:.95rem;font-weight:600;animation:.3s slideDown;position:fixed;top:20px;left:50%;transform:translate(-50%)}@keyframes slideDown{0%{opacity:0;transform:translate(-50%)translateY(-10px)}to{opacity:1;transform:translate(-50%)translateY(0)}}.loading-overlay{-webkit-backdrop-filter:blur(20px);z-index:9999;background:#0a0c10b3;justify-content:center;align-items:center;width:100vw;height:100vh;animation:.4s cubic-bezier(.16,1,.3,1) fadeIn;display:flex;position:fixed;top:0;left:0}.loading-overlay-content{border-radius:var(--radius-lg);text-align:center;background:#ffffff08;border:1px solid #00e5ff33;flex-direction:column;align-items:center;gap:25px;width:90%;max-width:450px;padding:40px 50px;animation:.4s cubic-bezier(.34,1.56,.64,1) forwards scaleUp;display:flex;transform:scale(.95);box-shadow:0 0 40px #00e5ff26}.loading-overlay .spinner-large{border:4px solid #00e5ff1a;border-top-color:var(--secondary);border-radius:50%;width:50px;height:50px;animation:.8s linear infinite spin}.loading-status-text{font-family:var(--font-title);color:var(--text-primary);letter-spacing:-.01em;margin:0;font-size:1.25rem;font-weight:600}.loading-subtext{color:var(--text-secondary);margin:0;font-size:.9rem}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes scaleUp{to{transform:scale(1)}}.switch{width:44px;height:24px;display:inline-block;position:relative}.switch input{opacity:0;width:0;height:0}.slider{cursor:pointer;background-color:#ffffff1a;border:1px solid #ffffff1a;border-radius:24px;transition:all .3s;position:absolute;inset:0}.slider:before{content:"";background-color:var(--text-secondary);border-radius:50%;width:16px;height:16px;transition:all .3s;position:absolute;bottom:3px;left:3px}input:checked+.slider{border-color:var(--primary);background-color:#00e5ff33}input:checked+.slider:before{background-color:var(--primary);box-shadow:0 0 8px var(--primary-glow);transform:translate(20px)}.floating-emojis-container{z-index:500;pointer-events:none;position:fixed;inset:0;overflow:hidden}.floating-emoji{pointer-events:none;filter:drop-shadow(0 0 6px #ffffff4d);font-size:2.2rem;animation:2.5s ease-out forwards float-up;position:absolute;bottom:-50px}@keyframes float-up{0%{opacity:1;transform:translateY(0)scale(1)rotate(0)}70%{opacity:1}to{opacity:0;transform:translateY(-100vh)scale(.6)rotate(20deg)}}.emoji-bar{justify-content:center;gap:12px;padding:12px 0;display:flex}.emoji-btn{cursor:pointer;width:52px;height:52px;transition:var(--transition-smooth);background:#ffffff0d;border:1px solid #ffffff1a;border-radius:50%;justify-content:center;align-items:center;padding:0;font-size:1.8rem;display:flex}.emoji-btn:hover{background:#ffffff1f;border-color:#ffffff40;transform:scale(1.15)}.emoji-btn:active{transform:scale(.9)}.comparison-slider{border-radius:var(--radius-lg);cursor:col-resize;touch-action:none;-webkit-user-select:none;user-select:none;border:var(--border-glass);background:#00000040;width:100%;height:380px;position:relative;overflow:hidden}.comparison-img{object-fit:contain;pointer-events:none;width:100%;height:100%;position:absolute;inset:0}.comparison-img-bottom{z-index:1}.comparison-img-top{z-index:2}.comparison-divider{z-index:3;background:#fffc;width:3px;position:absolute;top:0;bottom:0;transform:translate(-50%);box-shadow:0 0 12px #00e5ff80}.comparison-handle{background:#00e5ffe6;border:3px solid #fff;border-radius:50%;justify-content:center;align-items:center;width:36px;height:36px;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 0 16px #00e5ff99}.comparison-handle:before{content:"◀ ▶";color:#fff;letter-spacing:2px;font-size:.5rem}.comparison-label{z-index:4;text-transform:uppercase;letter-spacing:.08em;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);pointer-events:none;background:#0009;border-radius:6px;padding:4px 10px;font-size:.75rem;font-weight:700;position:absolute;top:12px}.comparison-label-left{color:var(--primary);border:1px solid #00e5ff4d;left:12px}.comparison-label-right{color:var(--success);border:1px solid #00ffd84d;right:12px}.confetti-canvas{z-index:9000;pointer-events:none;position:fixed;inset:0}.timer-urgent{animation:.5s ease-in-out infinite pulse-urgent;color:#f44!important;border-color:#f44!important}@keyframes pulse-urgent{0%,to{opacity:1;transform:scale(1)}50%{opacity:.7;transform:scale(1.05)}}.word-counter{justify-content:flex-end;padding:4px 0;font-size:.8rem;font-weight:600;display:flex}.word-counter.over-limit{color:#f44}.word-counter.within-limit{color:var(--text-secondary)}.rating-button-bounce{animation:.2s ease-out btn-pop}@keyframes btn-pop{0%{transform:scale(1)}50%{transform:scale(1.15)}to{transform:scale(1.05)}}.winner-row{position:relative;overflow:hidden}.winner-row:before{content:"";border-radius:inherit;z-index:-1;background:linear-gradient(90deg,#0000,#ffd7004d,#0000);animation:2s ease-in-out infinite winner-shimmer;position:absolute;inset:-2px}@keyframes winner-shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}@media (width<=768px){.comparison-slider{height:260px}.emoji-btn{width:44px;height:44px;font-size:1.5rem}.emoji-bar{gap:8px}}.guide-overlay{-webkit-backdrop-filter:blur(8px);z-index:8000;background:#050308bf;justify-content:center;align-items:center;animation:.25s fadeIn;display:flex;position:fixed;inset:0}body:has(.guide-overlay) .glass-panel:not(.guide-modal){pointer-events:none}.guide-modal,.guide-modal:hover{background:#0f0f19e6;border:1px solid #00e5ff33;width:90%;max-width:420px;max-height:85vh;padding:30px;animation:.25s cubic-bezier(.34,1.56,.64,1) scaleUp;overflow-y:auto;box-shadow:0 0 40px #00e5ff1f}.guide-steps{flex-direction:column;gap:14px;display:flex}.guide-step{color:var(--text-secondary);align-items:flex-start;gap:14px;font-size:.92rem;line-height:1.5;display:flex}.guide-step-num{background:linear-gradient(135deg, var(--primary), #512da8);color:#fff;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:26px;height:26px;font-size:.75rem;font-weight:800;display:flex}.guide-features{border-top:1px solid #ffffff0f;flex-direction:column;gap:10px;margin-top:24px;padding-top:20px;display:flex}.guide-feature{color:var(--text-muted);align-items:flex-start;gap:10px;font-size:.85rem;line-height:1.5;display:flex}.guide-feature strong{color:var(--text-secondary)}
