.battle-container{min-height:100vh;padding:var(--space-4)var(--space-6);max-width:var(--max-width);flex-direction:column;margin:0 auto;display:flex}.battle-header{margin-bottom:var(--space-4);justify-content:flex-start;align-items:center;display:flex}.header-links{gap:var(--space-3);display:flex}.header-link{padding:var(--space-1)0;font-size:var(--text-s);font-weight:var(--font-bold);color:var(--color-black);transition:all var(--transition-fast);text-transform:uppercase;letter-spacing:.05em;background:0 0;border:none;align-items:center;display:inline-flex}.header-link:hover{color:var(--color-gray-500)}.battle-logo{text-align:center;margin-bottom:var(--space-4)}.battle-logo h1{font-size:var(--text-4xl);font-weight:var(--font-black);color:var(--color-black);letter-spacing:-.03em;margin:0}.battle-subtitle{font-size:var(--text-base);color:var(--color-gray-600);margin:var(--space-1)0 0 0}.battle-subtitle a{color:var(--color-primary);font-weight:var(--font-semibold);text-decoration:none}.battle-subtitle a:hover{text-decoration:underline}.tagline{display:none}.prompt-section{background:var(--color-gray-50);padding:var(--space-3)var(--space-4);border-radius:var(--radius-md);margin-bottom:var(--space-4);border:1px solid var(--color-gray-200)}.prompt-section h2{margin:0 0 var(--space-2)0;font-size:.65rem;font-weight:var(--font-bold);color:var(--color-gray-400);text-transform:uppercase;letter-spacing:.1em}.prompt-text{font-size:var(--text-base);font-weight:var(--font-regular);color:var(--color-black);margin:0;line-height:1.4}.battle-section{gap:var(--space-4);margin-bottom:var(--space-4);grid-template-columns:1fr auto 1fr;align-items:start;width:100%;display:grid}.model-container{background:var(--color-white);border-radius:var(--radius-md);padding:var(--space-4);border:1px solid var(--color-gray-200);transition:border-color var(--transition-base);min-width:0;overflow:hidden}.model-container:hover{border-color:var(--color-gray-400)}.model-header{margin-bottom:var(--space-3);padding-bottom:var(--space-3);border-bottom:1px solid var(--color-gray-200);justify-content:space-between;align-items:center;gap:var(--space-3);display:flex}.model-header h3{font-size:var(--text-lg);font-weight:var(--font-bold);color:var(--color-black);margin:0}.share-button{padding:var(--space-2)var(--space-4);background:var(--color-black);color:var(--color-white);border-radius:var(--radius-full);cursor:pointer;font-size:var(--text-sm);font-weight:var(--font-bold);font-family:var(--font-display);transition:all var(--transition-fast);white-space:nowrap;text-transform:uppercase;letter-spacing:.05em;border:none}.share-button:hover{background:var(--color-gray-800);transform:translateY(-1px)}.share-button.copied{background:var(--color-success)}.player-container{flex-direction:column;justify-content:center;width:100%;min-width:0;display:flex;overflow:hidden}.player-loading{background:var(--color-gray-900);border:1px solid var(--color-gray-700);border-radius:var(--radius-md);width:100%;height:200px;margin-bottom:var(--space-2);justify-content:center;align-items:center;display:flex}.player-loading-spinner{border:2px solid var(--color-gray-600);border-top-color:var(--color-white);border-radius:50%;width:24px;height:24px;animation:.8s linear infinite spin}@media (max-width:640px){.player-loading{height:150px}}.vs-divider{padding-top:var(--space-12);justify-content:center;align-items:center;display:flex}.vs-divider span{background:var(--color-black);width:56px;height:56px;color:var(--color-white);font-size:var(--text-lg);font-weight:var(--font-black);border-radius:var(--radius-full);letter-spacing:-.02em;justify-content:center;align-items:center;display:flex}.voting-section{padding:var(--space-3)var(--space-4);margin-bottom:var(--space-4);justify-content:center;align-items:center;gap:var(--space-3);flex-wrap:wrap;display:flex}.vote-buttons{gap:var(--space-2);flex-wrap:wrap;justify-content:center;display:flex}.vote-button-wrapper{display:inline-block}.vote-button{padding:var(--space-2)var(--space-4);font-size:var(--text-sm);font-weight:var(--font-bold);font-family:var(--font-display);border-radius:var(--radius-full);cursor:pointer;transition:all var(--transition-fast);text-transform:uppercase;letter-spacing:.03em;white-space:nowrap;border:2px solid transparent}.vote-button:hover:not(:disabled){transform:translateY(-2px)}.vote-button:active:not(:disabled){transform:translateY(0)}.vote-button:disabled{opacity:.4;cursor:not-allowed}.vote-primary{background:var(--color-black);color:var(--color-white)}.vote-primary:hover:not(:disabled){background:var(--color-gray-800)}.vote-secondary{color:var(--color-gray-500);border-color:var(--color-gray-300);background:0 0}.vote-secondary:hover:not(:disabled){background:var(--color-white);color:var(--color-black);border-color:var(--color-gray-400)}.voting-hint{display:none}.voting-indicator{align-items:center;gap:var(--space-2);color:var(--color-gray-500);font-size:var(--text-sm);display:flex}.voting-spinner{border:2px solid var(--color-gray-300);border-top-color:var(--color-black);border-radius:50%;width:16px;height:16px;animation:.8s linear infinite spin}.vote-error{color:var(--color-error);margin-bottom:var(--space-4);padding:var(--space-3);background:var(--color-error-light);border:1px solid var(--color-error);border-radius:var(--radius-md);text-align:left;font-size:var(--text-sm)}.vote-error strong{margin-bottom:var(--space-2);display:block}.error-hint-small{margin:var(--space-2)0 0 0;font-size:var(--text-sm);opacity:.8}.listen-popup{align-items:center;gap:var(--space-2);padding:var(--space-3)var(--space-6);background:var(--color-gray-50);border:1px solid var(--color-gray-200);border-radius:var(--radius-lg);color:var(--color-gray-600);font-size:var(--text-sm);font-weight:var(--font-medium);text-align:center;box-shadow:var(--shadow-lg);z-index:100;pointer-events:auto;flex-direction:column;animation:.15s ease-out popupFadeIn;display:flex;position:fixed;transform:translate(-50%,-100%)}.listen-popup:after{content:"";border-style:solid;border-width:8px 8px 0;border-color:var(--color-gray-200)transparent transparent transparent;position:absolute;bottom:-8px;left:50%;transform:translate(-50%)}.listen-popup:before{content:"";border-style:solid;border-width:6px 6px 0;border-color:var(--color-gray-50)transparent transparent transparent;z-index:1;position:absolute;bottom:-6px;left:50%;transform:translate(-50%)}@keyframes popupFadeIn{0%{opacity:0;transform:translate(-50%,-100%)translateY(4px)}to{opacity:1;transform:translate(-50%,-100%)translateY(0)}}.listen-status{font-size:var(--text-xs);color:var(--color-gray-400);letter-spacing:.05em}.vote-submitted{background:var(--color-success-light);padding:var(--space-8);border-radius:var(--radius-lg);text-align:center;border:2px solid var(--color-success);margin-bottom:var(--space-8)}.vote-submitted p{margin:0 0 var(--space-2)0;font-size:var(--text-xl);font-weight:var(--font-bold);color:var(--color-success)}.vote-submitted-subtitle{font-size:var(--text-base)!important;color:var(--color-gray-600)!important;margin:0 0 var(--space-6)0!important}.next-comparison-button{padding:var(--space-4)var(--space-8);font-size:var(--text-base);font-weight:var(--font-bold);font-family:var(--font-display);background:var(--color-black);color:var(--color-white);border-radius:var(--radius-full);cursor:pointer;transition:all var(--transition-fast);text-transform:uppercase;letter-spacing:.05em;border:none}.next-comparison-button:hover{background:var(--color-gray-800);transform:translateY(-2px)}.loading,.error{text-align:center;flex-direction:column;justify-content:center;align-items:center;min-height:60vh;display:flex}.spinner{border:3px solid var(--color-gray-200);border-top-color:var(--color-black);border-radius:50%;width:48px;height:48px;animation:1s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.loading p{margin-top:var(--space-4);color:var(--color-gray-500);font-size:var(--text-lg)}.error h2{color:var(--color-error);margin-bottom:var(--space-4)}.error p{color:var(--color-gray-600);margin-bottom:var(--space-4)}.error-hint{background:var(--color-gray-50);padding:var(--space-4);border-radius:var(--radius-md);border-left:4px solid var(--color-gray-300);text-align:left;margin:var(--space-4)0;white-space:pre-line;line-height:1.8;font-size:var(--text-sm)}.error-actions{gap:var(--space-4);margin-top:var(--space-6);flex-wrap:wrap;justify-content:center;display:flex}.button-primary{padding:var(--space-3)var(--space-6);font-size:var(--text-sm);font-weight:var(--font-bold);font-family:var(--font-display);background:var(--color-black);color:var(--color-white);border-radius:var(--radius-full);cursor:pointer;transition:all var(--transition-fast);text-transform:uppercase;letter-spacing:.05em;border:none;text-decoration:none;display:inline-block}.button-primary:hover{background:var(--color-gray-800);transform:translateY(-1px)}.button-secondary{padding:var(--space-3)var(--space-6);font-size:var(--text-sm);font-weight:var(--font-bold);font-family:var(--font-display);color:var(--color-black);border:2px solid var(--color-gray-300);border-radius:var(--radius-full);cursor:pointer;transition:all var(--transition-fast);text-transform:uppercase;letter-spacing:.05em;background:0 0;text-decoration:none;display:inline-block}.button-secondary:hover{border-color:var(--color-black);transform:translateY(-1px)}.modal-overlay{z-index:1000;padding:var(--space-4);background:rgba(10,10,10,.8);justify-content:center;align-items:center;animation:.2s ease-out fadeIn;display:flex;position:fixed;top:0;bottom:0;left:0;right:0}.modal-content{background:var(--color-white);border-radius:var(--radius-xl);padding:var(--space-8);width:100%;max-width:560px;box-shadow:var(--shadow-lg);max-height:90vh;animation:.3s ease-out slideUp;overflow-y:auto}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.modal-content h2{margin:0 0 var(--space-4)0;color:var(--color-error);font-size:var(--text-2xl)}.modal-hint{font-size:var(--text-sm);color:var(--color-gray-600);margin-bottom:var(--space-6);line-height:1.6}.modal-form{gap:var(--space-4);flex-direction:column;display:flex}.modal-form label{font-weight:var(--font-bold);font-size:var(--text-sm);color:var(--color-black);text-transform:uppercase;letter-spacing:.05em}.modal-form textarea{width:100%;padding:var(--space-4);border:2px solid var(--color-gray-200);border-radius:var(--radius-md);font-size:var(--text-base);font-family:var(--font-mono);background:var(--color-gray-50);color:var(--color-black);resize:vertical;min-height:120px;transition:border-color var(--transition-fast)}.modal-form textarea:focus{border-color:var(--color-black);background:var(--color-white);outline:none}.modal-form textarea:disabled{opacity:.5;cursor:not-allowed}.modal-actions{gap:var(--space-4);margin-top:var(--space-4);justify-content:flex-end;display:flex}.report-error{padding:var(--space-4);background:var(--color-error-light);border:1px solid var(--color-error);border-radius:var(--radius-md);color:var(--color-error);margin-bottom:var(--space-4)}.report-error strong{margin-bottom:var(--space-1);display:block}@media (max-width:900px){.battle-section{gap:var(--space-4);grid-template-columns:1fr}.vs-divider{padding:var(--space-4)0}.vs-divider span{width:48px;height:48px;font-size:var(--text-base)}.battle-header h1{font-size:var(--text-4xl)}}@media (max-width:600px){.battle-container{padding:var(--space-4)}.battle-header h1{font-size:var(--text-3xl)}.voting-section{border-radius:var(--radius-lg);flex-direction:column}.vote-buttons{width:100%}.prompt-text{font-size:var(--text-lg)}.model-header{flex-direction:column;align-items:stretch}.model-header h3{text-align:center}.share-button{width:100%}.modal-content{padding:var(--space-6)}.modal-actions{flex-direction:column}.button-primary,.button-secondary{text-align:center;width:100%}}