:root{
  --blue:#0B3D78;--blue2:#1E6EAD;--blue3:#EAF3FA;--red:#D71920;
  --ink:#253544;--muted:#6A7783;--paper:#FFFFFF;--soft:#F3F6F8;
  --shadow:0 18px 48px rgba(7,32,59,.22)
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;height:100%;overflow:hidden;background:#dce7ef;font-family:Inter,Segoe UI,Arial,sans-serif;color:var(--ink)}
button,input{font:inherit}
button{cursor:pointer}
canvas.webgl{position:fixed;inset:0;width:100%;height:100%;display:block;outline:none}

#loading{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;background:linear-gradient(145deg,#082f5c,#0B3D78 55%,#1E6EAD);transition:.45s opacity}
#loading.hidden{opacity:0;pointer-events:none}
.load-card{width:min(420px,86vw);text-align:center;color:#fff}
.load-mark{width:72px;height:72px;border:2px solid rgba(255,255,255,.36);border-radius:24px;display:grid;place-items:center;margin:0 auto 18px;background:rgba(255,255,255,.08);font-size:30px;font-weight:900;box-shadow:0 12px 34px rgba(0,0,0,.18)}
.load-card h1{font-size:clamp(1.35rem,4vw,2rem);letter-spacing:-.03em}.load-card p{margin:7px 0 18px;color:#d8ebfb;font-size:.9rem}
.progress{height:8px;background:rgba(255,255,255,.15);border-radius:999px;overflow:hidden}.progress>i{display:block;height:100%;width:0;background:#fff;border-radius:inherit;transition:.25s width}
#loadText{display:block;margin-top:8px;color:#cfe5f7;font-size:.76rem}

#startOverlay{position:fixed;inset:0;z-index:500;display:none;place-items:center;background:rgba(2,17,32,.56);backdrop-filter:blur(4px)}
#startOverlay.show{display:grid}
.start-card{max-width:420px;margin:20px;background:rgba(8,33,58,.88);border:1px solid rgba(255,255,255,.2);border-radius:24px;padding:26px;text-align:center;color:#fff;box-shadow:var(--shadow)}
.start-card .round{width:58px;height:58px;border-radius:50%;background:var(--red);display:grid;place-items:center;margin:0 auto 14px;font-size:23px}.start-card h2{font-size:1.15rem}.start-card p{font-size:.82rem;color:#d7e5ef;line-height:1.5;margin-top:7px}.start-card button{margin-top:16px;border:0;border-radius:12px;background:#fff;color:var(--blue);font-weight:800;padding:11px 19px}

#toolbar{position:fixed;z-index:120;top:12px;left:12px;right:12px;display:flex;align-items:center;gap:8px;pointer-events:none}
.brand,.toolbar-group,.search-wrap{pointer-events:auto;background:rgba(255,255,255,.94);border:1px solid rgba(11,61,120,.12);box-shadow:0 9px 28px rgba(16,48,78,.14);backdrop-filter:blur(12px)}
.brand{height:48px;display:flex;align-items:center;gap:10px;border-radius:16px;padding:7px 14px 7px 8px;min-width:max-content}
.brand-logo{width:34px;height:34px;border-radius:11px;background:linear-gradient(145deg,var(--blue),var(--blue2));display:grid;place-items:center;color:#fff;font-weight:900;letter-spacing:-.06em}.brand b{display:block;color:var(--blue);font-size:.82rem}.brand small{display:block;color:var(--muted);font-size:.65rem;margin-top:1px}
.toolbar-spacer{flex:1}.toolbar-group{height:48px;border-radius:16px;padding:5px;display:flex;gap:4px;align-items:center}
.tool-btn{height:38px;min-width:38px;border:0;border-radius:11px;background:transparent;color:var(--blue);font-weight:800;font-size:.72rem;padding:0 10px;display:flex;align-items:center;justify-content:center;gap:6px}.tool-btn:hover,.tool-btn.active{background:var(--blue);color:#fff}.tool-btn.route.active{background:var(--red)}
.search-wrap{height:48px;width:min(310px,30vw);border-radius:16px;position:relative;display:flex;align-items:center;padding:5px}
.search-wrap input{width:100%;height:38px;border:0;outline:0;background:var(--soft);border-radius:11px;padding:0 38px 0 12px;color:var(--ink);font-size:.78rem}.search-wrap .glass{position:absolute;right:16px;color:var(--blue)}
#searchResults{position:absolute;top:54px;left:0;right:0;display:none;max-height:320px;overflow:auto;background:#fff;border-radius:14px;box-shadow:var(--shadow);padding:6px}
#searchResults.show{display:block}.result{width:100%;border:0;background:#fff;border-radius:10px;padding:9px 10px;text-align:left;display:flex;justify-content:space-between;gap:10px;color:var(--ink);font-size:.76rem}.result:hover{background:var(--blue3)}.result strong{color:var(--blue)}.result span{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.result .route-label{color:var(--red);font-weight:900}.stand-menu-guide{padding:8px 10px 7px;color:var(--muted);font-size:.70rem;border-bottom:1px solid #e8edf0;margin-bottom:4px}.stand-menu-empty{padding:12px 10px;color:var(--muted);font-size:.76rem;text-align:center}

#levelBadge{position:fixed;left:18px;bottom:18px;z-index:105;background:rgba(8,33,58,.88);color:#fff;border:1px solid rgba(255,255,255,.15);padding:8px 11px;border-radius:12px;font-size:.7rem;font-weight:800;box-shadow:0 8px 24px rgba(0,0,0,.16);pointer-events:none}
#perfBadge{position:fixed;left:18px;bottom:55px;z-index:105;background:rgba(255,255,255,.93);color:var(--blue);border:1px solid rgba(11,61,120,.14);padding:6px 9px;border-radius:10px;font-size:.62rem;font-weight:850;box-shadow:0 7px 20px rgba(8,33,58,.12);pointer-events:none}
#hint{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);z-index:110;display:none;background:rgba(8,33,58,.92);color:#fff;border:1px solid rgba(255,255,255,.16);padding:9px 15px;border-radius:999px;font-size:.73rem;font-weight:750;white-space:nowrap;box-shadow:0 8px 24px rgba(0,0,0,.2);pointer-events:none}
#toast{position:fixed;left:50%;top:76px;z-index:450;transform:translate(-50%,-15px);opacity:0;pointer-events:none;background:#fff;color:var(--ink);box-shadow:var(--shadow);border-radius:13px;padding:10px 14px;font-size:.76rem;font-weight:750;transition:.25s}.toast-show{opacity:1!important;transform:translate(-50%,0)!important}

#mapPanel{position:fixed;right:18px;bottom:18px;z-index:115;width:250px;background:rgba(255,255,255,.96);border:1px solid rgba(11,61,120,.15);border-radius:18px;box-shadow:var(--shadow);overflow:hidden;transform-origin:bottom right;transition:.25s transform,.25s opacity}
#mapPanel.hidden{transform:scale(.7);opacity:0;pointer-events:none}
.map-head{height:38px;display:flex;align-items:center;justify-content:space-between;padding:0 11px;background:var(--blue);color:#fff;font-size:.72rem;font-weight:800}.map-head button{border:0;background:rgba(255,255,255,.14);color:#fff;border-radius:7px;width:25px;height:25px}
#mapCanvas{display:block;width:250px;height:300px;background:#fff;cursor:crosshair;opacity:.999}
.map-foot{padding:7px 10px;color:var(--muted);font-size:.62rem;line-height:1.35;background:#fff}

#standPanel{position:fixed;z-index:300;right:0;top:0;bottom:0;width:min(390px,94vw);background:#fff;box-shadow:-18px 0 48px rgba(8,33,58,.18);transform:translateX(102%);transition:.32s transform;overflow-y:auto}
#standPanel.open{transform:translateX(0)}
.stand-hero{min-height:205px;background:linear-gradient(150deg,#082f5c,var(--blue2));color:#fff;padding:76px 24px 24px;position:relative;overflow:hidden}.stand-hero:after{content:"";position:absolute;width:240px;height:240px;border:42px solid rgba(255,255,255,.08);border-radius:50%;right:-120px;top:-55px}.close-panel{position:absolute;z-index:2;right:16px;top:16px;width:36px;height:36px;border:0;border-radius:11px;background:rgba(255,255,255,.15);color:#fff;font-size:18px}.stand-logo{width:68px;height:68px;border-radius:17px;background:#fff;color:var(--blue);display:grid;place-items:center;font-weight:900;box-shadow:0 12px 26px rgba(0,0,0,.18);margin-bottom:13px}.stand-hero small{color:#d9ecfb;font-weight:700}.stand-hero h2{font-size:1.45rem;margin-top:3px;letter-spacing:-.03em}.stand-body{padding:22px}.ticket-card{background:linear-gradient(135deg,#fff4f4,#fff);border:1px solid #f3c7c9;border-radius:16px;padding:15px;display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}.ticket-card small{display:block;color:#8a5a5d;font-size:.68rem}.ticket-card b{display:block;color:var(--red);font-size:1rem;margin-top:2px}.ticket-icon{width:42px;height:42px;border-radius:12px;background:var(--red);color:#fff;display:grid;place-items:center;font-weight:900}
.detail-row{display:grid;grid-template-columns:105px 1fr;gap:12px;padding:12px 0;border-bottom:1px solid #edf1f4;font-size:.78rem}.detail-row .label{color:var(--muted)}.detail-row .value{font-weight:700;line-height:1.42}.panel-actions{display:flex;gap:9px;margin-top:20px}.panel-actions button{flex:1;border:0;border-radius:12px;padding:11px;font-weight:850;font-size:.76rem}.primary{background:var(--blue);color:#fff}.secondary{background:var(--soft);color:var(--ink)}

.modal{position:fixed;inset:0;z-index:600;display:none;place-items:center;background:rgba(2,17,32,.58);backdrop-filter:blur(5px);padding:18px}.modal.show{display:grid}.modal-card{width:min(560px,94vw);background:#fff;border-radius:22px;box-shadow:var(--shadow);overflow:hidden}.modal-head{background:var(--blue);color:#fff;padding:17px 20px;display:flex;align-items:center;justify-content:space-between}.modal-head h3{font-size:1rem}.modal-head button{width:32px;height:32px;border:0;border-radius:9px;background:rgba(255,255,255,.14);color:#fff}.modal-body{padding:20px}.help-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.help-item{background:var(--soft);border-radius:14px;padding:13px}.help-item b{display:block;color:var(--blue);font-size:.78rem}.help-item p{margin-top:4px;color:var(--muted);font-size:.72rem;line-height:1.4}.note{margin-top:13px;border-left:4px solid var(--red);background:#fff5f5;padding:11px 12px;border-radius:0 10px 10px 0;color:#70494b;font-size:.72rem;line-height:1.45}

#mobileControls{position:fixed;inset:0;z-index:170;pointer-events:none;display:none}.joystick{position:absolute;bottom:20px;width:132px;height:132px;border-radius:50%;background:rgba(8,33,58,.3);border:2px solid rgba(255,255,255,.48);pointer-events:auto;touch-action:none;backdrop-filter:blur(4px);box-shadow:inset 0 0 0 8px rgba(255,255,255,.05),0 8px 22px rgba(0,0,0,.16)}#joyMove{left:16px}#joyLook{right:16px}.joystick-label{position:absolute;left:50%;top:12px;transform:translateX(-50%);color:#fff;font-size:.66rem;font-weight:850;letter-spacing:.04em;text-shadow:0 1px 4px rgba(0,0,0,.35);pointer-events:none}.stick{position:absolute;left:50%;top:50%;width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,.78);box-shadow:0 4px 15px rgba(0,0,0,.22);transform:translate(-50%,-50%);pointer-events:none}.mobile-action{position:absolute;left:50%;bottom:42px;transform:translateX(-50%);pointer-events:auto;border:0;border-radius:999px;background:var(--red);color:#fff;font-size:.72rem;font-weight:850;padding:11px 17px;box-shadow:0 9px 25px rgba(215,25,32,.35)}

@media(max-width:900px){
  #toolbar{top:8px;left:8px;right:8px;gap:6px}.brand{height:44px;border-radius:14px}.brand small{display:none}.toolbar-group{height:44px;border-radius:14px}.tool-btn{height:34px;padding:0 8px}.search-wrap{height:44px;flex:1;min-width:90px;width:auto}.search-wrap input{height:34px}.toolbar-spacer{display:none}
  #mapPanel{right:8px;bottom:auto;top:62px;width:210px;max-height:calc(100vh - 200px)}#mapCanvas{width:210px;height:252px}.map-foot{display:none}
  .help-grid{grid-template-columns:1fr}
}
@media(max-width:600px){
  .brand{min-width:44px;padding:5px}.brand-text{display:none}
  .toolbar-group{gap:1px}
  .tool-btn{min-width:40px;height:38px;padding:0 7px;font-size:.68rem;flex-direction:column;gap:2px}
  .tool-btn .txt{display:block;font-size:.55rem;line-height:1}
  #btnMouse,#btnQuality{display:none}
  .search-wrap input{font-size:.7rem}
  #levelBadge,#perfBadge{display:none}
  #hint{bottom:170px}
  .stand-hero{padding-top:68px}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}.start-card,.modal-card,#standPanel,#mapPanel,#toast{transition:none!important}}