*{box-sizing:border-box;margin:0;padding:0}:root{font-family:Georgia,Times New Roman,serif;line-height:1.6;font-weight:400;color-scheme:dark;color:#ffffffde;background-color:#1a0000;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{min-height:100vh}h1,h2,h3,h4,h5,h6{font-family:Georgia,Times New Roman,serif;font-weight:700}button{font-family:Georgia,Times New Roman,serif;font-weight:500;cursor:pointer;transition:all .3s ease;border:none}button:focus,button:focus-visible{outline:2px solid #ffd700;outline-offset:2px}button:disabled{opacity:.5;cursor:not-allowed}a{color:gold;text-decoration:none}a:hover{color:#ffed4e;text-decoration:underline}.audio-recorder{display:flex;flex-direction:column;align-items:center;gap:1.5rem;padding:2rem}.record-button{background:linear-gradient(135deg,#8b0000,#dc143c);border:3px solid #ffd700;border-radius:50%;width:200px;height:200px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 20px #dc143c66}.record-button:hover{transform:scale(1.05);box-shadow:0 6px 30px #dc143c99;border-color:#ffed4e}.record-button:active{transform:scale(.95)}.d20-icon{font-size:4rem;animation:rotate 4s linear infinite}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.record-button span{color:gold;font-size:1.2rem;font-weight:700;text-shadow:2px 2px 4px rgba(0,0,0,.5)}.recording-controls{display:flex;flex-direction:column;align-items:center;gap:1.5rem;background:#0000004d;padding:2rem;border-radius:15px;border:2px solid #ffd700}.recording-indicator{display:flex;align-items:center;gap:.5rem;color:#f44;font-size:1.5rem;font-weight:700}.pulse{width:12px;height:12px;background:#f44;border-radius:50%;animation:pulse 1s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.2)}}.timer{font-size:2rem;color:gold;font-family:Courier New,monospace;font-weight:700}.stop-button{background:linear-gradient(135deg,#dc143c,#8b0000);color:gold;border:2px solid #ffd700;padding:1rem 2rem;font-size:1.2rem;font-weight:700;border-radius:10px;cursor:pointer;transition:all .3s ease;text-transform:uppercase}.stop-button:hover{background:linear-gradient(135deg,#ff1744,#a00000);transform:translateY(-2px);box-shadow:0 4px 15px #dc143c80}.processing{text-align:center;padding:2rem}.spinner{width:60px;height:60px;border:4px solid rgba(255,215,0,.2);border-top-color:gold;border-radius:50%;margin:0 auto 1rem;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.processing p{color:gold;font-size:1.5rem;margin:.5rem 0;font-weight:700}.processing-subtitle{color:#daa520;font-size:1rem!important;font-style:italic}.results-display{max-width:800px;margin:0 auto;padding:2rem;animation:fadeIn .5s ease-in}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.results-header h2{text-align:center;color:gold;font-size:2.5rem;margin-bottom:2rem;text-shadow:2px 2px 4px rgba(0,0,0,.5)}.score-container{display:flex;flex-direction:column;align-items:center;gap:1rem;margin-bottom:2rem}.main-score{display:flex;align-items:baseline;gap:.5rem;padding:2rem 3rem;background:#0006;border:4px solid #ffd700;border-radius:15px;box-shadow:0 4px 20px #ffd7004d}.score-number{font-size:5rem;font-weight:700;color:gold;line-height:1}.score-label{font-size:2rem;color:#daa520}.score-rating{font-size:1.8rem;font-weight:700;text-transform:uppercase;letter-spacing:2px}.damage-modifier{text-align:center;background:linear-gradient(135deg,#dc143c33,#8b000033);padding:2rem;border-radius:15px;border:2px solid #dc143c;margin-bottom:2rem}.damage-modifier h3{color:gold;font-size:1.8rem;margin-bottom:1rem}.damage-value{font-size:4rem;font-weight:700;color:#dc143c;margin:1rem 0;text-shadow:2px 2px 4px rgba(0,0,0,.5)}.damage-description{color:#daa520;font-size:1.2rem;font-style:italic}.commentary{background:#0000004d;padding:1.5rem;border-radius:10px;border-left:4px solid #daa520;margin-bottom:2rem}.commentary h3{color:gold;font-size:1.3rem;margin-bottom:1rem}.commentary-text{color:#e6e6e6;font-style:italic;font-size:1.1rem;line-height:1.6}.transcription{background:#0000004d;padding:1.5rem;border-radius:10px;border-left:4px solid #666;margin-bottom:2rem}.transcription h3{color:gold;font-size:1.3rem;margin-bottom:1rem}.transcription-text{color:#e6e6e6;font-size:1.1rem;line-height:1.6}.breakdown{background:#0000004d;padding:2rem;border-radius:10px;border:2px solid #444;margin-bottom:2rem}.breakdown h3{color:gold;font-size:1.5rem;margin-bottom:1.5rem;text-align:center}.breakdown-grid{display:flex;flex-direction:column;gap:1.5rem}.breakdown-item{display:grid;grid-template-columns:120px 1fr 60px;align-items:center;gap:1rem}.breakdown-label{color:#daa520;font-weight:700}.breakdown-bar{height:20px;background:#00000080;border-radius:10px;overflow:hidden;border:1px solid #444}.breakdown-fill{height:100%;background:linear-gradient(90deg,gold,#ff8c00);transition:width .5s ease}.breakdown-score{color:gold;font-weight:700;text-align:right}.new-insult-button{display:flex;align-items:center;justify-content:center;gap:.5rem;width:100%;padding:1.2rem 2rem;background:linear-gradient(135deg,#8b0000,#dc143c);color:gold;border:3px solid #ffd700;border-radius:10px;font-size:1.3rem;font-weight:700;cursor:pointer;transition:all .3s ease;text-transform:uppercase;letter-spacing:1px}.new-insult-button:hover{background:linear-gradient(135deg,#a00000,#ff1744);transform:translateY(-2px);box-shadow:0 6px 25px #dc143c80;border-color:#ffed4e}.new-insult-button span{font-size:1.5rem}@media(max-width:768px){.results-display{padding:1rem}.score-number{font-size:3.5rem}.damage-value{font-size:3rem}.breakdown-item{grid-template-columns:100px 1fr 50px;gap:.5rem}.breakdown-label{font-size:.9rem}}.app{min-height:100vh;display:flex;flex-direction:column;background:linear-gradient(135deg,#1a0000,#2d1810,#1a0000);background-attachment:fixed}.app:before{content:"";position:fixed;inset:0;background-image:repeating-linear-gradient(0deg,rgba(255,215,0,.03) 0px,transparent 1px,transparent 2px,rgba(255,215,0,.03) 3px),repeating-linear-gradient(90deg,rgba(255,215,0,.03) 0px,transparent 1px,transparent 2px,rgba(255,215,0,.03) 3px);pointer-events:none;z-index:0}.app-header{text-align:center;padding:3rem 1rem 2rem;position:relative;z-index:1}.app-title{font-size:4rem;color:gold;margin:0 0 1rem;text-shadow:2px 2px 4px rgba(0,0,0,.8),0 0 20px rgba(255,215,0,.5);font-weight:700;letter-spacing:2px}.app-subtitle{font-size:1.5rem;color:#daa520;margin:0;font-style:italic;text-shadow:2px 2px 4px rgba(0,0,0,.5)}.app-main{flex:1;padding:2rem 1rem;position:relative;z-index:1}.landing-section{max-width:900px;margin:0 auto}.intro-text{text-align:center;margin-bottom:3rem;color:#e6e6e6;font-size:1.2rem;line-height:1.8}.intro-text p{margin:1rem 0}.intro-text strong{color:gold;font-weight:700}.instructions{background:#0006;padding:2rem;border-radius:15px;border:2px solid #444;margin-top:2rem;text-align:left}.instructions h3{color:gold;font-size:1.5rem;margin:0 0 1rem;text-align:center}.instructions ol{color:#daa520;font-size:1.1rem;line-height:2;padding-left:2rem}.instructions li{margin:.5rem 0}.error-message{max-width:600px;margin:2rem auto;padding:1.5rem;background:#dc143c33;border:2px solid #dc143c;border-radius:10px;display:flex;align-items:center;gap:1rem;animation:shake .5s ease-in-out}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-10px)}75%{transform:translate(10px)}}.error-icon{font-size:2rem;flex-shrink:0}.error-message p{color:#fcc;margin:0;font-size:1.1rem}.app-footer{text-align:center;padding:2rem 1rem;color:#888;font-style:italic;position:relative;z-index:1;border-top:1px solid #333}.app-footer p{margin:0;font-size:1.1rem}@media(max-width:768px){.app-title{font-size:2.5rem}.app-subtitle{font-size:1.2rem}.intro-text{font-size:1rem}.instructions{padding:1.5rem}.instructions ol{font-size:1rem;padding-left:1.5rem}}::-webkit-scrollbar{width:10px}::-webkit-scrollbar-track{background:#1a0000}::-webkit-scrollbar-thumb{background:#8b0000;border-radius:5px}::-webkit-scrollbar-thumb:hover{background:#dc143c}