: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}.trending-section{margin-bottom:20px;position:relative}.trending-label{display:block;font-size:1.1em;color:#333;font-weight:600;margin-bottom:12px;text-align:center}.trending-scroll{display:flex;overflow-x:auto;gap:10px;padding:0 10px 10px;-webkit-overflow-scrolling:touch;scrollbar-width:none;scroll-behavior:smooth}.trending-scroll::-webkit-scrollbar{display:none}.topic-bubble{flex:0 0 auto;padding:10px 20px;background:#fff;border:2px solid #e0e0e0;border-radius:25px;font-size:.95em;color:#555;cursor:pointer;transition:all .2s ease;font-weight:500;white-space:nowrap;text-decoration:none;-webkit-tap-highlight-color:transparent;font-family:inherit}.topic-bubble:hover{background:#e8f5e9;border-color:#4caf50;transform:translateY(-2px);box-shadow:0 4px 8px #0000001a}.topic-bubble:active{transform:translateY(0);box-shadow:0 2px 4px #0000001a}@media (max-width: 768px){.trending-label{font-size:1em;margin-bottom:10px}.topic-bubble{padding:8px 16px;font-size:.9em}.trending-scroll{gap:8px;padding:0 10px 15px}.trending-scroll:after{content:"";position:absolute;right:0;top:0;bottom:15px;width:30px;background:linear-gradient(to right,transparent,#f5f5f5);pointer-events:none}}*{box-sizing:border-box}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:#f5f5f5}.app{max-width:800px;margin:0 auto;padding:20px}.header{text-align:center;margin-bottom:30px}.logo{font-size:4em;margin-bottom:10px;animation:pulse 2s infinite}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}.header h1{color:#333;font-size:3.5em;margin:0;font-weight:900;letter-spacing:-2px;background:linear-gradient(45deg,#4caf50,#7b1fa2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.tagline{font-size:1.3em;color:#555;margin:5px 0;font-weight:600}.subtitle{font-size:1em;color:#777;margin:5px 0}.input-section{background:#fff;padding:20px;border-radius:10px;box-shadow:0 2px 10px #0000001a;margin-bottom:30px}.input-group{display:flex;gap:10px}.topic-input{flex:1;padding:12px;font-size:16px;border:2px solid #ddd;border-radius:5px;outline:none}.topic-input:focus{border-color:#4caf50}.debate-button{padding:12px 30px;font-size:16px;font-weight:700;color:#fff;background:#4caf50;border:none;border-radius:5px;cursor:pointer;transition:background .3s}.debate-button:hover{background:#45a049}.debate-button:disabled{background:#ccc;cursor:not-allowed}.coin-toss{text-align:center;font-size:1.2em;color:#666;margin:20px 0;font-style:italic}.debate-container{background:#fff;border-radius:10px;box-shadow:0 2px 10px #0000001a;padding:0;height:500px;overflow-y:auto;overflow-x:hidden;position:relative}.messages-wrapper{min-height:100%;padding:20px;display:flex;flex-direction:column;justify-content:flex-start;gap:12px}.message{display:flex;align-items:flex-end;gap:8px;animation:messageSlide .3s ease-out;opacity:0;animation-fill-mode:forwards}@keyframes messageSlide{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.message.claude{flex-direction:row}.message.openai{flex-direction:row-reverse}.message-avatar{font-size:1.8em;width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:#f0f0f0;border-radius:50%;flex-shrink:0}.message.claude .message-avatar{background:#e3f2fd}.message.openai .message-avatar{background:#f3e5f5}.message-bubble{max-width:70%;padding:12px 16px;border-radius:18px;background:#f0f0f0;position:relative}.message.claude .message-bubble{background:#1976d2;color:#fff;border-bottom-left-radius:4px}.message.openai .message-bubble{background:#7b1fa2;color:#fff;border-bottom-right-radius:4px}.message-content{line-height:1.5;font-size:.95em;word-wrap:break-word}.message.typing .message-bubble{padding:8px 16px;display:flex;align-items:center;gap:8px}.typing-text{font-size:.85em;opacity:.8}.modal-overlay{position:fixed;inset:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px}.winner-modal{background:#fff3cd;border-radius:20px;padding:40px;max-width:500px;width:100%;text-align:center;box-shadow:0 10px 40px #0003;animation:modalSlide .3s ease-out}@keyframes modalSlide{0%{transform:translateY(-50px);opacity:0}to{transform:translateY(0);opacity:1}}.winner-modal h3{font-size:1.5em;margin-bottom:20px;color:#333}.winner-announcement{margin:20px 0}.winner-announcement h2{color:#d4af37;font-size:2.5em;margin-bottom:20px;text-shadow:2px 2px 4px rgba(0,0,0,.1)}.win-reason{font-size:1.1em;color:#666;font-style:italic;line-height:1.6;margin-bottom:30px}.close-modal{background:#4caf50;color:#fff;border:none;padding:12px 30px;border-radius:5px;font-size:16px;cursor:pointer;transition:background .3s}.close-modal:hover{background:#45a049}.typing-indicator{display:flex;gap:3px;padding:0}.typing-dot{width:8px;height:8px;background:#ffffffb3;border-radius:50%;animation:typing 1.4s infinite}.typing-dot:nth-child(2){animation-delay:.2s}.typing-dot:nth-child(3){animation-delay:.4s}@keyframes typing{0%,60%,to{transform:translateY(0);opacity:.4}30%{transform:translateY(-6px);opacity:1}}.loading-container{background:#f0f0f0;border:4px solid #000;box-shadow:8px 8px #000,inset -2px -2px #ccc,inset 2px 2px #fff;padding:40px;margin:20px 0;text-align:center;position:relative}.loading-animation{display:flex;flex-direction:column;align-items:center;gap:20px}.loading-swords{font-size:4em;animation:sword-clash .8s steps(4) infinite;image-rendering:pixelated;text-shadow:3px 3px 0px #000,-1px -1px 0px #000,1px -1px 0px #000,-1px 1px 0px #000,1px 1px 0px #000}@keyframes sword-clash{0%,to{transform:rotate(-15deg)}25%{transform:rotate(0)}50%{transform:rotate(15deg)}75%{transform:rotate(0)}}.loading-icons{display:flex;align-items:center;gap:30px;font-size:3em}.pulse-icon{animation:pulse-grow 1.5s ease-in-out infinite}.pulse-icon.delay{animation-delay:.3s}@keyframes pulse-grow{0%,to{transform:scale(1);opacity:.8}50%{transform:scale(1.2);opacity:1}}.vs-text{font-weight:700;color:#666;font-size:.8em}.loading-bar{width:300px;height:24px;background:#000;border:3px solid #fff;box-shadow:0 0 0 3px #000;overflow:hidden;margin-top:20px;position:relative;image-rendering:pixelated;image-rendering:-moz-crisp-edges;image-rendering:crisp-edges}.loading-text{font-size:1.1em;color:#333;font-weight:500;min-height:1.5em;animation:text-fade 1s ease-in-out;font-family:Courier New,monospace}@keyframes text-fade{0%{opacity:0}to{opacity:1}}.loading-progress{height:100%;background:#08f;position:relative;transition:width 2s ease-out}.loading-progress:before{content:"";position:absolute;inset:0;background-image:repeating-linear-gradient(90deg,transparent,transparent 4px,rgba(255,255,255,.3) 4px,rgba(255,255,255,.3) 8px),repeating-linear-gradient(0deg,transparent,transparent 4px,rgba(0,0,0,.1) 4px,rgba(0,0,0,.1) 8px)}.loading-progress:after{content:"";position:absolute;top:2px;left:2px;right:2px;height:4px;background:#fff6}.loading-progress.initializing{animation:progress-fill 2s ease-out forwards,punch-out-pulse .5s ease-in-out infinite}@keyframes punch-out-pulse{0%,to{background:#08f}50%{background:#0af}}.loading-progress.preparing{animation:progress-fill 1.5s ease-out forwards}@keyframes progress-fill{0%{width:0}to{width:100%}}.coin-flip{font-size:4em;animation:flip-rotate 2s ease-in-out infinite}@keyframes flip-rotate{0%{transform:rotateY(0)}50%{transform:rotateY(180deg)}to{transform:rotateY(360deg)}}.battle-ready{font-size:2.5em;font-weight:700;background:linear-gradient(45deg,#4caf50,#7b1fa2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:battle-pulse 1s ease-in-out infinite}@keyframes battle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}.error-message{color:#d32f2f;font-style:italic;padding:15px;background:#ffebee;border-radius:5px;text-align:center}@media (max-width: 768px){.app{padding:10px}.logo{font-size:3em}.header h1{font-size:2.5em}.tagline{font-size:1.1em}.subtitle{font-size:.9em}.input-section{padding:15px}.input-group{flex-direction:column}.debate-button{width:100%}.debate-container{height:400px}.messages-wrapper{padding:15px;gap:10px}.message-avatar{width:32px;height:32px;font-size:1.4em}.message-bubble{max-width:80%;padding:10px 14px}.message-content{font-size:.9em}.winner-modal{padding:30px 20px}.winner-announcement h2{font-size:2em}.win-reason{font-size:1em}.loading-bar{width:200px;height:20px}.loading-icons{font-size:2em}.loading-container{padding:20px;box-shadow:4px 4px #000,inset -1px -1px #ccc,inset 1px 1px #fff}}