*{margin:0;padding:0;box-sizing:border-box}html,body{width:100%;height:100%;overflow:hidden;font-family:Microsoft YaHei,PingFang SC,sans-serif;background:#1a1a1a;touch-action:manipulation;user-select:none;-webkit-user-select:none}#app{width:100%;height:100%;position:relative}#scene-container{width:100%;height:100%;display:block}#header{position:absolute;top:0;left:0;right:0;z-index:10;text-align:center;padding:16px 20px;background:linear-gradient(180deg,rgba(180,0,0,.9) 0%,rgba(180,0,0,.6) 70%,transparent 100%);pointer-events:none}#header h1{color:#fff;font-size:clamp(18px,4vw,28px);font-weight:700;letter-spacing:4px;text-shadow:0 2px 8px rgba(0,0,0,.5)}#header .subtitle{color:#ffd700e6;font-size:clamp(11px,2vw,14px);letter-spacing:6px;margin-top:4px;text-shadow:0 1px 4px rgba(0,0,0,.5)}#loading{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:20;text-align:center;color:#fff;transition:opacity .6s}#loading.hidden{opacity:0;pointer-events:none}.loading-text{font-size:18px;margin-bottom:16px;letter-spacing:2px}.dots span{animation:dot 1.4s infinite;opacity:0;font-size:24px}.dots span:nth-child(1){animation-delay:0s}.dots span:nth-child(2){animation-delay:.2s}.dots span:nth-child(3){animation-delay:.4s}@keyframes dot{0%,60%,to{opacity:0}30%{opacity:1}}.loading-bar{width:280px;max-width:70vw;height:6px;background:#ffffff26;border-radius:3px;overflow:hidden;margin:0 auto}.loading-progress{width:0%;height:100%;background:linear-gradient(90deg,#c0392b,#e74c3c);border-radius:3px;transition:width .3s}.loading-percent{margin-top:8px;font-size:13px;color:#fff9}#info{position:absolute;bottom:120px;left:50%;transform:translate(-50%);z-index:10;color:#fff6;font-size:12px;letter-spacing:1px;text-shadow:0 1px 4px rgba(0,0,0,.5);pointer-events:none}#controls{position:absolute;bottom:30px;left:50%;transform:translate(-50%);z-index:10}.dpad{display:flex;flex-direction:column;align-items:center;gap:2px}.dpad-row{display:flex;gap:2px}.dpad-btn{width:52px;height:52px;border:2px solid rgba(200,200,200,.6);border-radius:6px;background:linear-gradient(180deg,#4a4a4a,#2d2d2d,#252525);color:#fff;font-size:22px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .1s;box-shadow:inset 0 2px 2px #ffffff1a,inset 0 -2px 2px #0000004d,0 2px 4px #00000080;touch-action:manipulation}.dpad-btn:active,.dpad-btn.pressed{background:linear-gradient(180deg,#3d3d3d,#252525,#1f1f1f);border-color:#fff6;transform:scale(.95);box-shadow:inset 0 2px 4px #00000080,inset 0 -1px 2px #ffffff0d}.dpad-btn:hover{border-color:#ffffff80}.edit-toggle-btn{position:absolute;top:100px;right:20px;z-index:15;padding:10px 20px;background:#141414cc;border:1px solid rgba(255,255,255,.2);border-radius:8px;color:#fff;font-size:14px;cursor:pointer;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:background .2s}.edit-toggle-btn:hover{background:#323232cc}.edit-toggle-btn.active{background:#6496ffcc}#rotation-controls.edit-panel{position:absolute;top:180px;right:20px;z-index:10;width:240px;background:#141414e6;border-radius:12px;border:1px solid rgba(255,255,255,.1);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);display:none;flex-direction:column}.edit-panel-header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid rgba(255,255,255,.1)}.edit-panel-title{color:#ffffffe6;font-size:14px;font-weight:600}.edit-panel-close{background:none;border:none;color:#ffffff80;font-size:20px;cursor:pointer;line-height:1}.edit-panel-close:hover{color:#fffc}.edit-panel-content{padding:12px;display:flex;flex-direction:column;gap:10px}.edit-group{background:#3232324d;border-radius:8px;padding:10px}.rotation-label{color:#fff9;font-size:12px;text-align:center;margin-bottom:8px;letter-spacing:1px}.grid-toggle{display:flex;align-items:center;gap:8px;color:#fffc;font-size:12px;cursor:pointer}.grid-toggle input{width:16px;height:16px;cursor:pointer}.rotation-buttons{display:flex;gap:6px}.rotation-btn{width:48px;height:48px;border:none;border-radius:10px;background:#64646480;color:#fff;font-size:16px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s,transform .1s;touch-action:manipulation}.rotation-btn:hover{background:#96969699}.rotation-btn:active{background:#c8c8c8b3;transform:scale(.95)}.rotation-value{text-align:center;color:#fffc;font-size:13px;margin-top:8px;font-family:monospace}.save-btn{width:100%;height:40px;border:none;border-radius:8px;background:#4caf5099;color:#fff;font-size:14px;font-weight:700;cursor:pointer;transition:background .15s;touch-action:manipulation}.save-btn:hover{background:#4caf50cc}.save-btn:active{background:#4caf50}.mark-btn{width:100%;height:40px;border:none;border-radius:8px;background:#ff980099;color:#fff;font-size:14px;font-weight:700;cursor:pointer;transition:background .15s;touch-action:manipulation}.mark-btn:hover{background:#ff9800cc}.mark-btn:active,.mark-btn.active{background:#ff9800}.mark-status{text-align:center;color:#ff9800e6;font-size:12px;margin-top:6px;min-height:16px}.info-btn{position:absolute;top:100px;left:20px;z-index:15;width:auto;padding:10px 20px;height:40px;border:none;border-radius:8px;background:#3498db99;color:#fff;font-size:14px;font-weight:700;cursor:pointer;transition:background .15s;touch-action:manipulation}.info-btn:hover{background:#3498dbcc}.info-btn:active{background:#3498db}.marker-panel{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:#141414f2;border-radius:16px;padding:20px;width:90%;max-width:400px;z-index:100;display:none;box-shadow:0 10px 40px #00000080;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.marker-panel.show{display:block}.marker-panel-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.marker-panel-title{color:#fff;font-size:18px;font-weight:700}.marker-panel-close{width:32px;height:32px;border:none;border-radius:50%;background:#ffffff1a;color:#fff;font-size:20px;cursor:pointer;transition:background .2s}.marker-panel-close:hover{background:#fff3}.marker-content{width:100%;height:80px;padding:12px;border:1px solid rgba(255,255,255,.2);border-radius:8px;background:#ffffff0d;color:#fff;font-size:14px;resize:none;outline:none;box-sizing:border-box}.marker-content::placeholder{color:#fff6}.marker-panel-actions{display:flex;gap:12px;margin-top:16px}.marker-delete-btn{flex:1;height:40px;border:none;border-radius:8px;background:#ef444499;color:#fff;font-size:14px;font-weight:700;cursor:pointer;transition:background .2s}.marker-delete-btn:hover{background:#ef4444cc}.marker-save-btn{flex:2;height:40px;border:none;border-radius:8px;background:#4caf5099;color:#fff;font-size:14px;font-weight:700;cursor:pointer;transition:background .2s}.marker-save-btn:hover{background:#4caf50cc}.marker-form-group{margin-bottom:12px}.marker-label{display:block;color:#ffffffb3;font-size:12px;margin-bottom:6px}.marker-select,.marker-input{width:100%;height:36px;padding:0 12px;border:1px solid rgba(255,255,255,.2);border-radius:8px;background:#ffffff0d;color:#fff;font-size:14px;outline:none;box-sizing:border-box}.marker-select:focus,.marker-input:focus{border-color:#ff980099}.marker-select option{background:#2a2a2a;color:#fff}.interaction-popup{position:fixed;top:20%;left:50%;transform:translate(-50%);z-index:200;display:none}.interaction-popup.show{display:block}.interaction-popup-content{background:#000000e6;border:2px solid rgba(255,152,0,.8);border-radius:16px;padding:24px 32px;max-width:500px;display:flex;align-items:flex-start;gap:16px;box-shadow:0 0 30px #ff98004d}.interaction-popup-text{color:#fff;font-size:16px;line-height:1.6;flex:1}.interaction-popup-close{width:28px;height:28px;border:none;border-radius:50%;background:#ffffff1a;color:#fff;font-size:18px;cursor:pointer;flex-shrink:0;transition:background .2s}.interaction-popup-close:hover{background:#fff3}.info-panel{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:#141414f2;border-radius:16px;padding:24px;width:85%;max-width:700px;max-height:70vh;z-index:150;display:none;box-shadow:0 10px 40px #00000080;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(52,152,219,.3)}.info-panel.show{display:block}.info-panel-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;padding-bottom:12px;border-bottom:1px solid rgba(255,255,255,.1)}.info-panel-title{color:#3498db;font-size:20px;font-weight:700}.info-panel-close{width:32px;height:32px;border:none;border-radius:50%;background:#ffffff1a;color:#fff;font-size:20px;cursor:pointer;transition:background .2s}.info-panel-close:hover{background:#fff3}.info-panel-content{max-height:calc(70vh - 80px);overflow-y:auto;padding-right:8px;color:#fff;font-size:15px;line-height:1.8}.info-panel-content h3{color:#3498db;margin:20px 0 12px;font-size:18px;font-weight:700}.info-panel-content h3:first-child{margin-top:0}.info-panel-content p{margin-bottom:12px;text-align:justify}.info-panel-content ul{margin:12px 0 12px 24px;list-style-type:disc}.info-panel-content li{margin-bottom:8px}.info-panel-content strong{color:#f39c12}.info-panel-content::-webkit-scrollbar{width:6px}.info-panel-content::-webkit-scrollbar-track{background:#ffffff0d;border-radius:3px}.info-panel-content::-webkit-scrollbar-thumb{background:#3498db80;border-radius:3px}.info-panel-content::-webkit-scrollbar-thumb:hover{background:#3498dbb3}.save-status{text-align:center;color:#4caf50e6;font-size:12px;margin-top:6px;min-height:16px}#hint{position:absolute;bottom:12px;left:50%;transform:translate(-50%);z-index:10;color:#ffffff40;font-size:11px;pointer-events:none;white-space:nowrap}@media(max-width:480px){.dpad-btn{width:48px;height:48px;font-size:18px;border-radius:10px}#controls{bottom:20px}#info{bottom:105px;font-size:11px}.info-panel{width:95%;max-height:80vh;padding:16px}.info-panel-content{font-size:14px;max-height:calc(80vh - 70px)}}#mobile-controls{position:fixed;bottom:20px;left:50%;transform:translate(-50%);z-index:10;pointer-events:none}.control-pad{pointer-events:auto}#move-pad{display:flex;justify-content:center;align-items:center}@media(max-width:480px){.dpad-btn{width:44px;height:44px;font-size:18px}}canvas{display:block}@media screen and (min-width:481px){#mobile-controls{display:none}}@media screen and (orientation:landscape)and (max-width:768px){.dpad-btn{width:40px;height:40px;font-size:16px}#header h1{font-size:clamp(16px,3.5vw,24px)}#header .subtitle{font-size:clamp(10px,1.8vw,12px)}}