.bonfire-logo{max-height:32px;width:auto;display:block;filter:drop-shadow(0 2px 8px rgba(0,0,0,.3))}@media(max-width:640px){.bonfire-logo{max-height:28px}}@media(max-width:380px){.bonfire-logo{max-height:24px}}.top-bar{position:absolute;top:8px;left:8px;right:8px;display:flex;justify-content:space-between;align-items:center;padding:1rem 1.5rem;border:1px solid rgba(255,255,255,.15);border-radius:16px;background:linear-gradient(to bottom,#0009,#0006,#0000);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:100;pointer-events:auto}.top-bar__logo{display:flex;align-items:center}.top-bar__controls{display:flex;gap:.75rem;align-items:center}.control-button{display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;background:#ffffff1a;border:1px solid rgba(255,255,255,.2);border-radius:8px;color:#ffffffe6;cursor:pointer;transition:all .2s ease;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.control-button:hover{background:#fff3;border-color:#fff6;transform:translateY(-1px);box-shadow:0 4px 12px #0000004d}.control-button:active{transform:translateY(0);box-shadow:0 2px 6px #0000004d}.control-button svg{width:24px;height:24px;color:currentColor}@media(max-width:640px){.top-bar{padding:.75rem 1rem}.control-button{width:40px;height:40px}.control-button svg{width:20px;height:20px}.top-bar__controls{gap:.5rem}}@media(max-width:380px){.top-bar{padding:.5rem .75rem}.control-button{width:36px;height:36px}}.settings-modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#000000bf;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:2000;padding:1rem;overflow-y:auto;pointer-events:auto}.settings-modal{background:#1b1e24;border:1px solid rgba(255,255,255,.15);border-radius:16px;box-shadow:0 20px 60px #00000080;max-width:600px;width:100%;height:100%;max-height:80vh;overflow-y:auto;color:#fffffff2;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}.settings-modal__header{position:sticky;top:0;display:flex;justify-content:space-between;align-items:center;padding:1.5rem 2rem;background:#0003;border-bottom:1px solid rgba(255,255,255,.1);z-index:1;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}.settings-modal__header h2{margin:0;font-size:1.5rem;font-weight:600;color:#fffffff2}.close-button{display:flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;background:#ffffff0d;border:1px solid rgba(255,255,255,.1);border-radius:8px;color:#fffc;cursor:pointer;transition:all .2s ease}.close-button:hover{background:#ffffff1a;border-color:#fff3;color:#fff;transform:scale(1.05)}.close-button:active{transform:scale(.95)}.settings-modal__content{padding:2rem}.settings-section{margin-bottom:2rem}.settings-section:last-child{margin-bottom:0}.settings-section h3{margin:0 0 1rem;font-size:1.125rem;font-weight:600;color:#fffffff2}.settings-section p{margin:0 0 .75rem;line-height:1.6;color:#fffc}.orb-key{display:flex;flex-direction:column;gap:.75rem}.orb-key-item{display:flex;align-items:center;gap:1rem;padding:.75rem;background:#ffffff08;border:1px solid rgba(255,255,255,.08);border-radius:8px;transition:all .2s ease}.orb-key-item:hover{background:#ffffff0d;border-color:#ffffff1f}.orb-key-color{width:24px;height:24px;border-radius:50%;flex-shrink:0;box-shadow:0 0 12px currentColor,0 2px 8px #0000004d;border:1px solid rgba(255,255,255,.2)}.orb-key-info{display:flex;flex-direction:column;gap:.25rem;flex:1}.orb-key-info strong{font-weight:600;color:#fffffff2}.orb-key-description{font-size:.875rem;color:#ffffffa6;line-height:1.4}.instructions-list{margin:0;padding-left:1.5rem;line-height:1.8;color:#fffc}.instructions-list li{margin-bottom:.5rem}.instructions-list li:last-child{margin-bottom:0}.settings-section--actions{display:flex;justify-content:center;padding-top:1rem;border-top:1px solid rgba(255,255,255,.1)}.reset-button{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.875rem 1.5rem;background:linear-gradient(135deg,#4a90e2,#357abd);border:1px solid rgba(255,255,255,.2);border-radius:8px;color:#fff;font-size:1rem;font-weight:600;cursor:pointer;transition:all .2s ease;box-shadow:0 4px 12px #4a90e24d}.reset-button:hover{background:linear-gradient(135deg,#5aa0f2,#4580c7);transform:translateY(-2px);box-shadow:0 6px 16px #4a90e266}.reset-button:active{transform:translateY(0);box-shadow:0 2px 8px #4a90e24d}.reset-button svg{width:20px;height:20px}.settings-modal__footer{padding-top:1.5rem;margin-top:1.5rem;border-top:1px solid rgba(255,255,255,.1);display:flex;flex-direction:column;gap:16px}.footer-text{margin:0;font-size:.875rem;color:#fff9;text-align:center}.footer-text strong{color:#ffffffe6}.footer-text--credits a{color:#fff}.footer-text--credits a:hover{opacity:.8}@media(max-width:640px){.settings-modal{max-height:95vh;border-radius:12px}.settings-modal__header{padding:1.25rem 1.5rem}.settings-modal__header h2{font-size:1.25rem}.settings-modal__content{padding:1.5rem}.settings-section h3{font-size:1rem}.orb-key-item{padding:.625rem;gap:.75rem}.orb-key-color{width:20px;height:20px}.reset-button{padding:.75rem 1.25rem;font-size:.9375rem}}@media(max-width:380px){.settings-modal-overlay{padding:.5rem}.settings-modal__header,.settings-modal__content{padding:1rem}.settings-section{margin-bottom:1.5rem}}.settings-modal{scroll-behavior:smooth}.settings-modal::-webkit-scrollbar{width:8px}.settings-modal::-webkit-scrollbar-track{background:#0003;border-radius:0 16px 16px 0}.settings-modal::-webkit-scrollbar-thumb{background:#fff3;border-radius:4px}.settings-modal::-webkit-scrollbar-thumb:hover{background:#ffffff4d}.ui-layer{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:1000}.ui-layer>*{pointer-events:auto}.loading-screen{position:fixed;top:0;left:0;width:100vw;height:100vh;background:linear-gradient(135deg,#0a0a1a,#1b1e24,#000);display:flex;align-items:center;justify-content:center;z-index:9999;overflow:hidden}.logo-container{display:flex;justify-content:center;margin-bottom:32px}.loading-content{position:relative;z-index:2;text-align:center;padding:2rem;max-width:500px}.loading-title{font-family:Soleil,sans-serif;font-size:3rem;font-weight:700;color:#fff;margin:0 0 .5rem;text-shadow:0 0 20px rgba(74,144,226,.5)}.loading-subtitle{font-family:Soleil,sans-serif;font-size:1.2rem;font-weight:400;color:#fffc;margin:0 0 2rem}.loading-controls{display:grid;grid-template-columns:1fr;grid-auto-rows:1fr;gap:.75rem;margin-bottom:1rem;width:100%;max-width:500px}.settings-row{display:block;width:100%;background:#ffffff08;border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:0;cursor:pointer;transition:all .3s ease;text-align:left;font-family:Soleil,sans-serif}@media(hover:hover){.settings-row:hover{background:#ffffff0f;border-color:#ffffff4d}}.settings-row:active{background:#ffffff0f;border-color:#ffffff4d}.settings-row-content{display:grid;grid-template-columns:auto 1fr auto;align-items:center;padding:1.25rem 1.5rem;gap:1rem}.settings-row-left{display:contents}.settings-row-icon{display:flex;align-items:center;justify-content:center;color:#fff;grid-column:1}.settings-row-text{grid-column:2;min-width:0}.settings-row-title{font-size:1rem;font-weight:600;color:#fff;margin:0 0 .25rem}.settings-row-description{font-size:.85rem;font-weight:400;color:#fffc;margin:0;line-height:1.4}.toggle-switch{position:relative;width:51px;height:31px;background:#78788052;border-radius:16px;transition:background-color .3s ease;border:1px solid rgba(255,255,255,.1);grid-column:3}.toggle-switch.on{background:#5b8fc2;border-color:#5b8fc2;box-shadow:0 0 12px #4a90e266}.toggle-slider{position:absolute;top:1px;left:1px;width:27px;height:27px;background:#fff;border-radius:50%;transition:transform .3s ease;box-shadow:0 2px 4px #0003}.toggle-switch.on .toggle-slider{transform:translate(20px)}.loading-progress{margin:2rem 0}.progress-bar-container{width:100%;height:4px;background:#ffffff1a;border-radius:2px;overflow:hidden;margin-bottom:1rem}.progress-bar-fill{height:100%;background:linear-gradient(90deg,#4a90e2,#5e57ff);border-radius:2px;transition:width .3s ease;box-shadow:0 0 10px #4a90e280}.progress-text{font-family:Soleil,sans-serif;font-size:.9rem;color:#8b9dc3;margin:0}.loading-error{margin:2rem 0}.error-text{font-family:Soleil,sans-serif;font-size:1rem;color:#ff6b6b;margin:0 0 1.5rem}.error-continue{background:#ff6b6b33;border-color:#ff6b6b}.error-continue:hover{background:#ff6b6b4d;box-shadow:0 0 20px #ff6b6b66}.loading-complete{margin:2rem 0}.start-button{font-family:Soleil,sans-serif;font-size:1.1rem;font-weight:600;color:#fff;background:#4a90e233;border:2px solid #5B8FC2;border-radius:8px;padding:1rem 3rem;cursor:pointer;transition:all .3s ease;box-shadow:0 0 20px #4a90e24d}.start-button:hover{background:#4a90e24d;box-shadow:0 0 30px #4a90e280;transform:translateY(-2px)}.start-button:active{transform:translateY(0)}.tap-hint{font-family:Soleil,sans-serif;font-size:.85rem;color:#fff9;font-style:italic}.loading-bg-animation{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;pointer-events:none}.orb-glow{position:absolute;border-radius:50%;filter:blur(60px);opacity:.3;animation:float 8s ease-in-out infinite}.orb-1{width:300px;height:300px;background:radial-gradient(circle,#4A90E2,transparent);top:20%;left:10%;animation-delay:0s}.orb-2{width:200px;height:200px;background:radial-gradient(circle,#5e57ff,transparent);bottom:30%;right:15%;animation-delay:2s}.orb-3{width:250px;height:250px;background:radial-gradient(circle,#02fee4,transparent);bottom:10%;left:20%;animation-delay:4s}@keyframes float{0%,to{transform:translate(0) scale(1)}33%{transform:translate(30px,-30px) scale(1.1)}66%{transform:translate(-20px,20px) scale(.9)}}@media(max-width:768px){.loading-title{font-size:2rem}.loading-subtitle{font-size:1rem;margin-bottom:2rem}.loading-content{padding:1.5rem}.start-button{padding:.875rem 2rem;font-size:1rem}.orb-1,.orb-2,.orb-3{width:150px;height:150px}}.notification{position:fixed;bottom:2rem;left:50%;transform:translate(-50%) translateY(120%) scale(1);z-index:900;background:#1b1e24;border:1px solid rgba(255,255,255,.15);border-radius:12px;box-shadow:0 20px 60px #00000080;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);padding:1rem 2rem;max-width:600px;width:auto;min-width:300px;opacity:0;filter:blur(10px);transition:all .6s cubic-bezier(.34,1.56,.64,1);pointer-events:none}.notification--visible{opacity:1;transform:translate(-50%) translateY(0) scale(1);filter:blur(0px);pointer-events:auto}.notification--exiting{opacity:0;transform:translate(-50%) translateY(0) scale(.85);filter:blur(5px);transition:all .2s ease-out;pointer-events:none}.notification__text{margin:0;color:#fffffff2;font-size:1rem;font-weight:500;text-align:center;line-height:1.5}@media(max-width:640px){.notification{bottom:1.5rem;left:1rem;right:1rem;transform:translate(0) translateY(120%) scale(1);min-width:0;width:auto;padding:.875rem 1.5rem}.notification--visible{transform:translate(0) translateY(0) scale(1)}.notification--exiting{transform:translate(0) translateY(0) scale(.85)}.notification__text{font-size:.9375rem}}@media(max-width:380px){.notification{bottom:1rem;left:.75rem;right:.75rem;padding:.75rem 1.25rem}.notification__text{font-size:.875rem}}.App{position:relative;width:100vw;height:100vh;margin:0;padding:0;overflow:hidden}.app-transition{position:absolute;top:0;left:0;width:100%;height:100%;opacity:1;transition:opacity 2s ease-in-out}.app-transition.fade-out{opacity:0;pointer-events:none}.app-transition.fade-in{animation:fadeIn 2s ease-in-out forwards}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.App>canvas{position:absolute;top:0;left:0;width:100%;height:100%;z-index:0}@font-face{font-family:Soleil;src:url(/web-fonts/Soleil-Regular.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:Soleil;src:url(/web-fonts/Soleil-Italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}@font-face{font-family:Soleil;src:url(/web-fonts/Soleil-SemiBold.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}@font-face{font-family:Soleil;src:url(/web-fonts/Soleil-SemiBoldItalic.woff2) format("woff2");font-weight:600;font-style:italic;font-display:swap}@font-face{font-family:Soleil;src:url(/web-fonts/Soleil-Bold.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}@font-face{font-family:Soleil;src:url(/web-fonts/Soleil-BoldItalic.woff2) format("woff2");font-weight:700;font-style:italic;font-display:swap}*{margin:0;padding:0;box-sizing:border-box}body{margin:0;font-family:Soleil,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#000;overflow:hidden}#root{width:100vw;height:100vh}
