:root{--bg-start: #1e3a8a;--bg-end: #111827;--card: #1f2937cc;--accent-primary: #f59e0b;--accent-secondary: #14b8a6;--text-light: #e5e7eb;--text-dark: #111827;--glass: rgba(255, 255, 255, .04);--ui-radius: 14px;font-family:Inter,Noto Sans Thai,Noto Sans Khmer,system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}*{box-sizing:border-box}html,body{height:100%;margin:0;background:linear-gradient(180deg,var(--bg-start) 0%,var(--bg-end) 70%);color:var(--text-light);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.app{display:grid;grid-template-columns:360px 1fr;gap:18px;padding:18px;height:100vh;align-items:stretch}.panel{background:linear-gradient(180deg,#ffffff08,#ffffff05);padding:16px;border-radius:var(--ui-radius);border:1px solid rgba(255,255,255,.05);box-shadow:0 10px 30px #02061799;display:flex;flex-direction:column;gap:12px;overflow:auto}.game-area{position:relative;border-radius:var(--ui-radius);overflow:hidden;box-shadow:0 20px 50px #02061799}canvas#gameCanvas{display:block;width:100%;height:100%;background-color:#111827;background-size:cover;background-position:center;transition:filter .5s ease-out}.game-canvas-blur{filter:blur(10px) brightness(.8)}h1{font-size:20px;margin:0 0 6px;color:var(--accent-primary)}.muted{opacity:.75;font-size:13px}.small{font-size:12px}.btn,.select-btn{background:linear-gradient(90deg,var(--accent-primary),#f97316);border:none;color:var(--text-dark);padding:10px 18px;border-radius:8px;font-weight:600;cursor:pointer;transition:transform .15s,box-shadow .15s}.btn:hover,.select-btn:hover{transform:translateY(-1px);box-shadow:0 4px 14px #f59e0b66}.btn.secondary{background:linear-gradient(90deg,#ffffff1f,#ffffff14);color:var(--text-light);border:1px solid rgba(255,255,255,.15)}.btn.secondary:hover{background:linear-gradient(90deg,#ffffff2e,#ffffff1f);box-shadow:0 4px 14px #ffffff1a}.input-field{width:100%;padding:10px 12px;background:#ffffff14;border:1px solid rgba(255,255,255,.15);border-radius:8px;color:var(--text-light);font-size:14px;transition:border-color .2s,background .2s}.input-field:focus{outline:none;border-color:var(--accent-primary);background:#ffffff1f}.input-field::placeholder{color:#fff6}.btn[disabled]{opacity:.45;cursor:not-allowed;box-shadow:none;transform:none}.secondary{background:linear-gradient(90deg,var(--accent-secondary),#0d9488);color:var(--text-light)}.secondary:hover{box-shadow:0 8px 25px #14b8a64d}.micro{padding:6px 8px;border-radius:8px;font-size:12px}.info-box{background:var(--glass);padding:12px;border-radius:10px;border:1px solid rgba(255,255,255,.05);border-top:3px solid var(--accent-secondary)}select.select-btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");background-repeat:no-repeat;background-position:right .7rem center;background-size:1em;padding-right:2.5rem}select.select-btn option{background:#1e293b;color:#e5e7eb;padding:8px;font-weight:500}.language-select{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:2px solid rgba(255,255,255,.3);border-radius:12px;padding:8px 16px;font-size:14px;font-weight:600;cursor:pointer;transition:all .3s ease;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");background-repeat:no-repeat;background-position:right .7rem center;background-size:1em;padding-right:2.5rem;min-width:140px}.language-select:hover{transform:translateY(-2px);box-shadow:0 4px 12px #667eea66;border-color:#ffffff80}.language-select option{background:#1a1a2e;color:#e5e7eb;padding:10px;font-weight:500}.controls-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:8px}.control-item{display:flex;align-items:center;gap:8px;padding:6px 8px;background:#ffffff0d;border-radius:6px;transition:background .2s ease}.control-item:hover{background:#ffffff14}.control-key{font-size:16px;font-weight:600;min-width:24px}.control-desc{font-size:12px;color:#fffc}.upload-grid{display:grid;grid-template-columns:3fr 1fr;gap:12px}.upload-area{background:#0003;padding:10px;border-radius:8px;display:flex;flex-direction:column;gap:8px}.upload-area strong{font-size:13px}.upload-controls{display:flex;gap:8px;align-items:center}.upload-icon-label{display:flex;align-items:center;justify-content:center;width:40px;height:40px;background:#ffffff1a;border-radius:8px;cursor:pointer;transition:background .2s ease;flex-shrink:0}.upload-icon-label:hover{background:#fff3}.upload-icon-label svg{width:24px;height:24px;stroke:var(--text-light)}input[type=file]{display:none}.preview-row{display:flex;gap:4px;flex-wrap:wrap}.preview{width:40px;height:40px;border-radius:6px;overflow:hidden;background:#0b1220;border:1px solid rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;flex-shrink:0}#surprisePreview{width:40px}#surprisePreview{position:relative;overflow:hidden;border-radius:6px}#surprisePreview.is-blurred img{filter:blur(8px);transform:scale(1.05)}#surprisePreview.is-blurred:after{content:"?";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;text-shadow:0 0 8px rgba(0,0,0,.8);pointer-events:none}.top-right{position:absolute;right:14px;top:14px;text-align:right}.top-right .chip{background:#00000080;padding:8px 12px;border-radius:10px;border:1px solid rgba(255,255,255,.1);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.center-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none;z-index:13000}.center-overlay.has-backdrop{background:#0000004d;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.center-overlay .card{pointer-events:auto;background:linear-gradient(180deg,#1f2937cc,#111827cc);padding:24px;border-radius:12px;border:1px solid rgba(255,255,255,.1);box-shadow:0 10px 30px #02061799;text-align:center;color:#d1d5db}.center-overlay .card h2{font-size:28px;color:var(--accent-primary);text-shadow:1px 1px 5px rgba(0,0,0,.7)}.center-overlay .card p.small{font-size:14px;text-shadow:.5px .5px 1px rgba(0,0,0,.5)}.center-overlay .card strong{color:var(--accent-primary);font-size:16px}.modal-card{max-width:400px;width:90%;z-index:13001;position:relative}.modal-card h3{color:var(--text-light);font-size:20px;margin-bottom:8px}.pop-msg{position:absolute;transform:translate(-50%,-50%);padding:6px 12px;border-radius:8px;background:linear-gradient(90deg,#f97316,var(--accent-primary));color:var(--text-dark);font-weight:700;pointer-events:none;opacity:0;transition:opacity .35s,transform .35s;box-shadow:0 4px 15px #0006}footer{position:absolute;left:18px;bottom:10px;font-size:12px;opacity:.7}#toggleFullscreenBtn{position:absolute;top:14px;right:14px;left:auto;background:#ffffff1f;color:#fff;border:none;border-radius:10px;width:42px;height:42px;font-size:18px;cursor:pointer;display:none;align-items:center;justify-content:center;z-index:1002;box-shadow:0 6px 18px #0006}#toggleFullscreenBtn:hover{background:#fff3}.stats-leaderboard-grid{display:grid;grid-template-columns:1fr 2fr;gap:12px;align-items:start}.game-stats .stat-item{background:#ffffff08;padding:8px;border-radius:8px;margin-bottom:6px;font-size:13px}.game-stats .stat-item span{color:var(--accent-primary);font-weight:600;float:right}.leader{display:flex;flex-direction:column;gap:6px}.leader-row{display:flex;justify-content:space-between;align-items:center;padding:8px;border-radius:8px;background:#ffffff08;transition:all .3s ease-out}.leader-row:hover{background:#ffffff12}.leader-row .npc-thumbnail{width:24px;height:24px;border-radius:4px;object-fit:cover;margin-right:8px;vertical-align:middle;border:1px solid rgba(255,255,255,.1)}.leader-row.top-rank{background:linear-gradient(90deg,#f59e0b30,#f9731630);border:1px solid var(--accent-primary);box-shadow:0 0 12px #f59e0b66,inset 0 0 8px #f59e0b33;font-weight:700}.leader-row.sparkle{animation:sparkle-pulse 1.5s ease-out forwards}@keyframes sparkle-pulse{0%{background:linear-gradient(90deg,#f59e0b30,#f9731630);box-shadow:0 0 #f59e0b00,inset 0 0 #f59e0b00;transform:scale(1)}50%{background:linear-gradient(90deg,#ffc107,#ff9800);box-shadow:0 0 20px #ffc107e6,inset 0 0 10px #ffc107b3;transform:scale(1.02)}to{background:linear-gradient(90deg,#f59e0b30,#f9731630);box-shadow:0 0 12px #f59e0b66,inset 0 0 8px #f59e0b33;transform:scale(1)}}#dimOverlay{position:absolute;inset:0;background-color:#0000;z-index:925;transition:background-color .5s ease-out;pointer-events:none}#fireworksCanvas{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:900}#winnerAwardOverlay{z-index:12200}.award-media-container{position:relative;cursor:pointer;display:block;margin:15px auto 0;max-width:90%;max-height:300px;border-radius:8px;overflow:hidden;border:2px solid var(--accent-primary)}.award-media-container .award-media{display:block;width:100%;height:100%;object-fit:cover}.award-media-container.is-blurred .award-media{filter:blur(20px);transform:scale(1.1)}.award-media-container .reveal-prompt{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:600;text-shadow:0 0 10px black;cursor:pointer}.award-media-container,.award-media-container .reveal-prompt{-webkit-tap-highlight-color:transparent;-webkit-user-select:none;-ms-user-select:none;user-select:none;touch-action:manipulation}.award-media-container:active,.award-media-container *:active,.award-media-container .reveal-prompt:active{transform:none!important;opacity:1!important;outline:none!important;box-shadow:none!important}.award-media-container:focus,.award-media-container .reveal-prompt:focus{outline:none!important}@keyframes mysteriousPop{0%{opacity:0;transform:scale(.5) translateY(50px) rotateX(-30deg)}to{opacity:1;transform:scale(1) translateY(0) rotateX(0)}}.animate-pop{animation:mysteriousPop .6s cubic-bezier(.175,.885,.32,1.275) forwards}#fullscreenImageOverlay{background:#000000e6;z-index:12350;pointer-events:auto;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);cursor:pointer}.fullscreen-media{max-width:95%;max-height:95%;object-fit:contain;border-radius:12px;box-shadow:0 0 30px #000c}.close-btn{position:absolute;top:20px;right:20px;background:#fff3;color:#fff;border:none;border-radius:50%;width:40px;height:40px;font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .3s ease;z-index:1001}.close-btn:hover{background:#fff6}.toggle-fullscreen-btn{position:fixed;top:20px;right:20px;left:auto;background:#fff3;color:#fff;border:none;border-radius:50%;width:40px;height:40px;font-size:22px;cursor:pointer;display:none;align-items:center;justify-content:center;transition:background .3s ease;z-index:1002}.toggle-fullscreen-btn:hover{background:#fff6}.app.game-active .toggle-fullscreen-btn{display:flex!important}#fullscreenImageOverlay #closeFullscreenBtn{display:none!important}.share-link-container{display:flex;gap:8px}.share-link-container input{flex-grow:1;background:#0000004d;border:1px solid rgba(255,255,255,.1);color:var(--text-light);padding:8px;border-radius:8px}.game-area .mobile-hud{display:none}.app.game-active .mobile-hud{display:flex;position:fixed;right:18px;top:50%;transform:translateY(-50%);margin-top:-140px;flex-direction:column;gap:8px;z-index:12100;align-items:flex-end;pointer-events:auto}.app.game-active .avatar-hud{display:flex;position:fixed;right:18px;top:50%;transform:translateY(-50%);flex-direction:column;gap:10px;z-index:12100;align-items:flex-end;pointer-events:auto;max-height:60vh;overflow:auto}.game-area .avatar-hud{display:none}.avatar-hud .combined-hud-card{display:flex;flex-direction:column;gap:10px;align-items:flex-end;background:#0b0b0b;background-clip:padding-box;padding:10px;border-radius:12px;overflow:hidden;isolation:isolate;box-shadow:none;border:1px solid #0b0b0b}.avatar-hud .stats-section{display:flex;flex-direction:column;gap:6px;align-items:flex-end;width:100%}.avatar-hud .stats-section .stat-item{display:flex;flex-direction:column;align-items:flex-end;gap:2px}.avatar-hud .stats-section .label{font-size:11px;color:#ffffffe6;line-height:1}.avatar-hud .stats-section .value{font-size:15px;font-weight:800;color:var(--accent-primary);line-height:1}.avatar-hud .leader-peek{display:flex;flex-direction:column;gap:6px;align-items:flex-end;background:transparent;padding:0;border-radius:0;box-shadow:none}.avatar-hud .leader-peek img{width:36px;height:36px;border-radius:6px;object-fit:cover;border:1px solid rgba(255,255,255,.08)}.avatar-hud .leader-list .avatar-wrap{position:relative;display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;line-height:0}.avatar-hud .leader-list .avatar-wrap img{width:100%;height:100%;border-radius:6px;object-fit:cover;border:1px solid rgba(255,255,255,.08);display:block}.avatar-hud .leader-list{display:flex;flex-direction:column;gap:6px;align-items:flex-end;padding:0}.avatar-hud .leader-list .avatar-wrap{transition:transform .3s ease,opacity .2s ease}.avatar-hud .leader-list .avatar-badge{position:absolute;top:-6px;right:-6px;background:linear-gradient(90deg,#ff5a5f,#ff7b7f);color:#fff;border-radius:999px;padding:2px 6px;font-size:11px;font-weight:800;min-width:20px;text-align:center;box-shadow:0 4px 10px #00000073;line-height:1}.avatar-hud .leader-list .avatar-top-mark{position:absolute;right:-6px;top:50%;transform:translateY(-50%);z-index:3;font-size:13px;line-height:1;pointer-events:none;text-shadow:0 2px 6px rgba(0,0,0,.6)}.mobile-hud .stat{background:#00000073;padding:6px 8px;border-radius:10px;box-shadow:0 6px 18px #02061799;font-weight:600;display:inline-flex;flex-direction:column;gap:2px;align-items:flex-end;min-width:44px;justify-content:center;color:var(--text-light)}.mobile-hud .stat .label{font-size:11px;opacity:.9;line-height:1}.mobile-hud .stat .value{font-size:15px;font-weight:800;color:var(--accent-primary);line-height:1}.mobile-hud .leader-peek{display:flex;flex-direction:column;gap:6px;align-items:flex-end;background:#0b0b0b;padding:6px 8px;border-radius:10px;box-shadow:none}.mobile-hud .leader-peek img{width:36px;height:36px;border-radius:6px;object-fit:cover;border:1px solid rgba(255,255,255,.08)}.mobile-hud .leader-peek.top3 img{width:36px;height:36px;margin:0}.mobile-hud .leader-peek .count{font-weight:700;color:var(--accent-primary);min-width:28px;text-align:center}.mobile-hud .leader-peek .avatar-wrap{position:relative;display:inline-block;line-height:0}.mobile-hud .leader-peek .avatar-wrap img{display:block;border-radius:6px}.mobile-hud .leader-peek .avatar-badge{position:absolute;top:-6px;right:-6px;background:linear-gradient(90deg,#ff5a5f,#ff7b7f);color:#fff;border-radius:999px;padding:2px 6px;font-size:11px;font-weight:800;min-width:20px;text-align:center;box-shadow:0 4px 10px #00000073;line-height:1}.mobile-hud .combined-stats{background:#00000073;padding:8px 10px;border-radius:12px;box-shadow:0 6px 18px #02061799;display:flex;flex-direction:column;gap:6px;align-items:flex-end;min-width:92px}.mobile-hud .combined-stats .stat-item{width:100%;display:flex;flex-direction:column;align-items:flex-end;gap:2px}.mobile-hud .combined-stats .stat-item .label{font-size:11px;color:#ffffffe6;line-height:1}.mobile-hud .combined-stats .stat-item .value{font-size:15px;font-weight:800;color:var(--accent-primary);line-height:1}@media (max-width: 880px){.app{grid-template-columns:1fr;grid-auto-rows:1fr;padding:10px}.panel{display:flex;height:100%;border-radius:var(--ui-radius)}.avatar-hud .leader-list .avatar-top-mark{position:absolute;right:-6px;top:50%;transform:translateY(-50%);z-index:3;font-size:13px;line-height:1;pointer-events:none;text-shadow:0 2px 6px rgba(0,0,0,.6)}.game-area{display:none}#statsBox{display:block;max-height:240px;overflow:auto;margin-top:8px}.app.game-active .panel{display:block}.app.game-active .game-area{display:block;height:100vh;border-radius:0}.app.game-active{padding:0}.mobile-hud .stat{background:transparent;padding:4px 6px;border-radius:6px;font-weight:600;display:inline-flex;gap:6px;align-items:center;min-width:0;justify-content:flex-start;font-size:13px;color:var(--text-light)}.mobile-hud{right:14px;top:48px}.mobile-hud .stat{background:transparent;padding:6px 8px;border-radius:8px;font-weight:700;display:flex;gap:6px;align-items:center;min-width:0;justify-content:flex-end;font-size:13px;color:var(--text-light)}.mobile-hud .stat span{color:var(--accent-primary);font-weight:800;margin-left:6px}.mobile-hud .leader-peek img{width:36px;height:36px;border-radius:6px;object-fit:cover;border:1px solid rgba(255,255,255,.08)}.mobile-hud .leader-peek .count{font-weight:700;color:var(--accent-primary);min-width:28px;text-align:center}}.app.fullscreen{grid-template-columns:0 1fr;gap:0;padding:0;height:100vh}.app.fullscreen .panel{display:none!important}.app.fullscreen .game-area{position:fixed;inset:0;border-radius:0;z-index:9999;box-shadow:none}.app.fullscreen canvas#gameCanvas,.app.fullscreen #fireworksCanvas{width:100vw!important;height:100vh!important}.mobile-controls{display:none;position:absolute;inset:0;z-index:10000;pointer-events:none}.app.game-active .game-area .mobile-controls{display:block}.mobile-controls .control-button{pointer-events:auto;background:linear-gradient(180deg,#ffffff0f,#ffffff08);color:var(--text-light);border:1px solid rgba(255,255,255,.08);width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:26px;box-shadow:0 8px 24px #020617b3;transition:transform .08s ease,background .12s ease}.mobile-controls .control-button:active{transform:scale(.96);background:#ffffff1a}.mobile-controls .shoot-btn{position:absolute;left:14px;top:30%;transform:translateY(-50%);bottom:auto;z-index:10200;pointer-events:auto}.mobile-controls .drag-control-zone{position:absolute;inset:0;pointer-events:auto;touch-action:none;-webkit-user-select:none;user-select:none;z-index:10100}.mobile-controls .joystick-base{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:140px;height:140px;pointer-events:none;opacity:1;animation:joystickBlink 1.5s ease-in-out infinite;transition:opacity .25s cubic-bezier(.34,1.56,.64,1);will-change:transform,opacity;z-index:10101}.mobile-controls .joystick-base.interacting{animation:none;opacity:1}@keyframes joystickBlink{0%,to{opacity:.4;transform:translate(-50%,-50%) scale(.98)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.02)}}.mobile-controls .joystick-base.active{opacity:1}.mobile-controls .joystick-outer{position:absolute;inset:0;border-radius:50%;background:linear-gradient(135deg,#6366f114,#a855f714);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:2px solid rgba(139,92,246,.3);box-shadow:0 0 30px #8b5cf633,0 0 60px #6366f126,inset 0 0 20px #a855f70d;animation:outerPulse 2s ease-in-out infinite}@keyframes outerPulse{0%,to{transform:scale(1);box-shadow:0 0 30px #8b5cf633,0 0 60px #6366f126,inset 0 0 20px #a855f70d}50%{transform:scale(1.02);box-shadow:0 0 40px #8b5cf64d,0 0 80px #6366f133,inset 0 0 25px #a855f714}}.mobile-controls .joystick-indicators{position:absolute;inset:10px;border-radius:50%;pointer-events:none}.mobile-controls .joystick-indicator{position:absolute;width:6px;height:6px;border-radius:50%;background:#a855f766;box-shadow:0 0 10px #a855f799}.mobile-controls .joystick-indicator.left{left:0;top:50%;transform:translate(-50%,-50%)}.mobile-controls .joystick-indicator.right{right:0;top:50%;transform:translate(50%,-50%)}.mobile-controls .joystick-deadzone{position:absolute;inset:35px;border-radius:50%;border:1px dashed rgba(168,85,247,.25);background:radial-gradient(circle,rgba(139,92,246,.03) 0%,transparent 70%)}.mobile-controls .joystick-thumb{position:absolute;width:70px;height:70px;top:50%;left:50%;transform:translate(-50%,-50%);border-radius:50%;background:linear-gradient(135deg,#8b5cf6f2,#6366f1f2);border:3px solid rgba(255,255,255,.3);box-shadow:0 8px 32px #6366f180,0 4px 16px #8b5cf666,inset 0 2px 8px #fff3,inset 0 -2px 8px #0003;cursor:grab;transition:transform .08s cubic-bezier(.34,1.56,.64,1),box-shadow .15s ease;will-change:transform}.mobile-controls .joystick-thumb.dragging{cursor:grabbing;box-shadow:0 12px 48px #6366f1b3,0 6px 24px #8b5cf699,inset 0 2px 12px #ffffff4d,inset 0 -2px 12px #0000004d}.mobile-controls .joystick-thumb-inner{position:absolute;inset:8px;border-radius:50%;background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.25) 0%,transparent 60%);border:2px solid rgba(255,255,255,.1)}.mobile-controls .joystick-thumb-core{position:absolute;inset:18px;border-radius:50%;background:radial-gradient(circle at 35% 35%,rgba(255,255,255,.4) 0%,rgba(168,85,247,.3) 50%,transparent 100%);box-shadow:inset 0 2px 8px #0000004d}.mobile-controls .joystick-arrow{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:24px;color:#fff;text-shadow:0 0 10px rgba(255,255,255,.8),0 0 20px rgba(168,85,247,.6);opacity:0;transition:opacity .2s ease;pointer-events:none}.mobile-controls .joystick-thumb.dragging .joystick-arrow{opacity:1}.mobile-controls .joystick-trail{position:absolute;width:40px;height:40px;border-radius:50%;background:radial-gradient(circle,rgba(168,85,247,.4) 0%,transparent 70%);top:50%;left:50%;transform:translate(-50%,-50%);opacity:0;pointer-events:none;transition:opacity .3s ease,transform .1s ease}.mobile-controls .joystick-thumb.dragging~.joystick-trail{opacity:1}.mobile-controls .joystick-particles{position:absolute;inset:-20px;pointer-events:none;overflow:visible}.mobile-controls .joystick-particle{position:absolute;width:4px;height:4px;border-radius:50%;background:#a855f7cc;box-shadow:0 0 8px #a855f799;pointer-events:none;animation:particleFloat 1.5s ease-out forwards}@keyframes particleFloat{0%{opacity:1;transform:translate(0) scale(1)}to{opacity:0;transform:translate(var(--tx, 0),var(--ty, -50px)) scale(.3)}}.mobile-controls .force-indicator{position:absolute;bottom:-50px;left:50%;transform:translate(-50%);width:100px;height:6px;background:#0000004d;border-radius:10px;overflow:hidden;opacity:0;transition:opacity .3s ease}.mobile-controls .joystick-base.active .force-indicator{opacity:1}.mobile-controls .force-indicator-fill{height:100%;background:linear-gradient(90deg,#6366f1cc,#a855f7e6,#ec4899);border-radius:10px;width:0%;transition:width .1s ease;box-shadow:0 0 10px #a855f7cc}@keyframes hapticPulse{0%{box-shadow:0 0 #a855f7b3,0 8px 32px #6366f180}to{box-shadow:0 0 0 20px #a855f700,0 8px 32px #6366f180}}.mobile-controls .joystick-thumb.haptic{animation:hapticPulse .3s ease-out}.mobile-controls .speed-rings{position:absolute;inset:-10px;pointer-events:none;opacity:0;transition:opacity .2s ease}.mobile-controls .joystick-base.active .speed-rings{opacity:1}.mobile-controls .speed-ring{position:absolute;inset:0;border-radius:50%;border:2px solid rgba(168,85,247,.3);animation:speedRing 1.5s ease-out infinite}.mobile-controls .speed-ring:nth-child(2){animation-delay:.5s}.mobile-controls .speed-ring:nth-child(3){animation-delay:1s}@keyframes speedRing{0%{transform:scale(.8);opacity:0}50%{opacity:.6}to{transform:scale(1.4);opacity:0}}.mobile-controls .touch-ripple{position:absolute;border-radius:50%;background:radial-gradient(circle,rgba(168,85,247,.4) 0%,transparent 70%);pointer-events:none;animation:ripple .6s ease-out forwards}@keyframes ripple{0%{transform:translate(-50%,-50%) scale(0);opacity:1}to{transform:translate(-50%,-50%) scale(2);opacity:0}}.mobile-controls .joystick-base.fade-in{animation:joystickFadeIn .3s cubic-bezier(.34,1.56,.64,1) forwards}.mobile-controls .joystick-base.fade-out{animation:joystickFadeOut .2s ease-out forwards}@keyframes joystickFadeIn{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}@keyframes joystickFadeOut{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.8)}}.mobile-controls .dir-wrap{display:none;position:absolute;right:18px;bottom:22px;gap:8px;align-items:center;z-index:10100}.mobile-controls .dir-wrap .control-button{width:56px;height:56px;font-size:22px}#toggleFullscreenBtn{z-index:12000;pointer-events:auto}@media (max-width: 880px){.close-btn{width:28px;height:28px;font-size:14px;top:12px;right:12px}#toggleFullscreenBtn{width:34px;height:34px;font-size:16px;top:10px;right:10px;left:auto}}.preset-list{display:flex;flex-direction:column;gap:8px;margin-top:8px;max-height:300px;overflow-y:auto}.preset-row{display:flex;align-items:center;gap:10px;padding:8px;background:#0000004d;border-radius:8px;border:1px solid rgba(255,255,255,.05);transition:background .2s ease}.preset-row:hover{background:#0006}.preset-thumb{width:48px;height:48px;border-radius:6px;overflow:hidden;background:#0b1220;border:1px solid rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:20px}.preset-thumb img{width:100%;height:100%;object-fit:cover}.preset-info{flex:1;min-width:0}.preset-name{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.preset-date{font-size:11px;opacity:.7;margin-top:2px}.preset-play-btn{padding:6px 14px;font-size:12px;flex-shrink:0}.preset-share-btn{padding:6px 10px;font-size:16px;flex-shrink:0;min-width:40px;background:linear-gradient(135deg,#a855f7,#ec4899);transition:all .2s ease}.preset-share-btn:hover{background:linear-gradient(135deg,#9333ea,#db2777);transform:scale(1.05)}.preset-del-btn{padding:4px 8px;font-size:14px;flex-shrink:0;min-width:32px}.preset-buttons{display:flex;gap:6px;align-items:center}.shared-preset-page{min-height:100vh;color:#fff}.shared-preset-page .card{animation:slideUp .4s ease-out}@keyframes slideUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}