/* CSS block 1 extracted from index.html */
#walkOverlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);color:#fff;
  flex-direction:column;align-items:center;justify-content:center;gap:12px;
  font:700 22px/1.4 sans-serif;pointer-events:none;z-index:99;}
#walkOverlay span{font-size:13px;font-weight:400;opacity:.8;}
#mountTip{display:none;position:absolute;bottom:70px;left:50%;transform:translateX(-50%);
  background:rgba(8,8,8,.88);border:1px solid #2a4a4a;color:#4f98a3;
  font:600 13px 'Segoe UI',sans-serif;padding:8px 16px;border-radius:6px;
  pointer-events:none;z-index:20}
#mountTip b{color:#ffcc00}
#trainerTip{display:none;position:absolute;bottom:104px;left:50%;transform:translateX(-50%);
  background:rgba(8,8,8,.9);border:1px solid #4f98a3;color:#7fd0da;
  font:700 14px 'Segoe UI',sans-serif;padding:9px 18px;border-radius:6px;
  pointer-events:none;z-index:135}
#trainerTip b{color:#ffcc00}
/* VRButton from Three.js — bottom center (clear of top bar) */
#VRButton{position:fixed!important;top:auto!important;bottom:16px!important;
  left:50%!important;transform:translateX(-50%)!important;right:auto!important;
  font-size:11px!important;padding:6px 14px!important;border-radius:4px!important;}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;height:100%;overflow:hidden;background:#1a1a1a;font-family:'Segoe UI',sans-serif}
#app{width:100%;height:100%;display:flex;flex-direction:column}
#bar{background:#141414;border-bottom:1px solid #2a2a2a;height:36px;padding:0 12px;display:flex;align-items:center;gap:10px;flex-shrink:0}
.logo{color:#4f98a3;font-size:13px;font-weight:700}
.sub{color:#444;font-size:11px;flex:1}
#ctrl{background:#111;border-bottom:1px solid #222;padding:3px 12px;display:flex;align-items:center;gap:10px;flex-shrink:0}
label{color:#555;font-size:11px;display:flex;align-items:center;gap:4px;cursor:pointer}
select{color:#aaa;background:#1a1a1a;border:1px solid #333;border-radius:4px;padding:2px 6px;font-size:11px}
.sep{width:1px;height:14px;background:#2a2a2a}
#stage{flex:1;min-height:0;position:relative}
canvas{width:100%;height:100%;display:block}
.g{color:#88cc88}.o{color:#fdab43}.p{color:#aa88cc}

/* CSS block 2 extracted from index.html */
.barCenter{position:absolute;left:50%;transform:translateX(-50%);display:flex;gap:8px;}
.barBtn{background:#1a1a1a;color:#4f98a3;border:1px solid #2a4a4a;border-radius:4px;
  padding:3px 14px;font:700 12px 'Segoe UI',sans-serif;cursor:pointer;}
.barBtn:active{background:#2a4a4a}
.barBtn.active{background:#2a4a4a;color:#fff;border-color:#4f98a3}
#bar{position:relative}
#btnFS{background:#1a1a1a;color:#4f98a3;border:1px solid #333;border-radius:4px;
  padding:2px 8px;font-size:13px;line-height:1;cursor:pointer;}
#btnFS:active{background:#2a4a4a}
.modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.6);z-index:200;
  align-items:center;justify-content:center;}
.modal.open{display:flex}
.modal-box{background:#141414;border:1px solid #2a4a4a;border-radius:8px;
  min-width:240px;max-width:88vw;max-height:80vh;overflow:auto;box-shadow:0 8px 40px rgba(0,0,0,0.7);}
.modal-head{display:flex;align-items:center;justify-content:space-between;
  padding:10px 14px;border-bottom:1px solid #222;color:#4f98a3;font:700 13px 'Segoe UI',sans-serif;}
.modal-x{background:none;border:none;color:#888;font-size:16px;cursor:pointer;padding:0 4px;}
.modal-x:active{color:#fff}
.modal-body{padding:14px;display:flex;flex-direction:column;gap:8px;}
.mBtn{background:#1a1a1a;color:#ccc;border:1px solid #333;border-radius:5px;
  padding:10px;font:600 13px 'Segoe UI',sans-serif;cursor:pointer;text-align:left;}
.mBtn:hover{background:#222}
.mBtn:active{background:#2a4a4a;color:#fff}
.modal-body.help{display:block;color:#999;font:400 12px/1.8 'Segoe UI',sans-serif;}
.modal-body.help b{color:#4f98a3}
.import-box{width:min(420px,92vw)}
.import-drop{border:1px dashed #3d6f77;background:#101818;color:#cbd8da;
  min-height:96px;border-radius:6px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:7px;text-align:center;cursor:pointer;}
.import-drop strong{font:700 13px 'Segoe UI',sans-serif;color:#dfeff1}
.import-drop span{font:400 11px 'Segoe UI',sans-serif;color:#7f9fa5}
.import-drop.dragging{background:#173037;border-color:#70c7d3}
.import-status{min-height:34px;color:#aaa;font:400 11px/1.5 'Segoe UI',sans-serif}
.import-status[data-tone="ok"]{color:#88cc88}
.import-status[data-tone="warn"]{color:#fdab43}
.import-status[data-tone="error"]{color:#ff8585}

/* CSS block 3 extracted from index.html */
/* Mobile joysticks + buttons (shown only on touch devices) */
.joystick-container{position:absolute;bottom:20px;width:120px;height:120px;
  background:rgba(255,255,255,0.1);border-radius:50%;display:none;z-index:100;touch-action:none;}
#moveJoystick{left:20px}
#lookJoystick{right:20px}
.joystick-knob{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:50px;height:50px;background:rgba(79,152,163,0.55);border:1px solid #4f98a3;
  border-radius:50%;pointer-events:none;}
#mobileControls{position:absolute;bottom:160px;right:24px;display:none;
  flex-direction:column;gap:14px;z-index:100;}
.mobile-btn{width:52px;height:52px;border-radius:50%;background:rgba(8,8,8,0.75);
  border:1px solid #4f98a3;color:#4f98a3;font:700 18px 'Segoe UI',sans-serif;
  display:flex;align-items:center;justify-content:center;touch-action:none;user-select:none;}
.mobile-btn:active{background:rgba(79,152,163,0.4)}

/* Safety-trainer callout — bottom-center prompt card over the stage */
.tcallout{position:absolute;bottom:56px;left:50%;transform:translateX(-50%);z-index:130;
  max-width:min(560px,86vw);display:flex;align-items:flex-start;gap:10px;
  background:rgba(8,10,12,.92);border:1px solid #2a4a4a;border-radius:8px;
  padding:12px 16px;pointer-events:none;box-shadow:0 6px 30px rgba(0,0,0,.55)}
.tcallout-tag{flex-shrink:0;font:800 10px 'Segoe UI',sans-serif;letter-spacing:.12em;
  padding:3px 8px;border-radius:4px;background:#2a4a4a;color:#7fd0da;margin-top:1px}
.tcallout-text{color:#dfeff1;font:600 13px/1.55 'Segoe UI',sans-serif}
.tcallout[data-tone="fail"]{border-color:#7a2727;background:rgba(26,8,8,.94)}
.tcallout[data-tone="fail"] .tcallout-tag{background:#5a2323;color:#ff9a9a}
.tcallout[data-tone="fail"] .tcallout-text{color:#ffd9d9}
.tcallout[data-tone="done"]{border-color:#2b5a33}
.tcallout[data-tone="done"] .tcallout-tag{background:#234a2b;color:#9adfa4}

/* Safety-locker PPE view — full-stage takeover while equipping */
.locker{position:absolute;inset:0;z-index:180;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 50% 40%,rgba(20,26,30,.9),rgba(6,8,10,.97))}
.locker[hidden]{display:none}
.locker-box{width:min(1120px,96vw);max-height:94vh;overflow:auto;background:#141a1e;
  border:1.5px solid #2a4a4a;border-radius:14px;box-shadow:0 20px 70px rgba(0,0,0,.75);padding:30px 34px}
.locker-head{margin-bottom:24px}
.locker-head b{color:#8fe0ea;font:800 26px 'Segoe UI',sans-serif;letter-spacing:.05em;display:block;margin-bottom:5px}
.locker-head span{color:#b6cbcf;font:600 15px/1.55 'Segoe UI',sans-serif}
.locker-items{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media (max-width:760px){.locker-items{grid-template-columns:1fr}}
.locker-item{text-align:left;background:#0f1418;border:2px solid #2b3a3f;border-radius:12px;
  padding:22px 20px 18px;cursor:pointer;display:flex;flex-direction:column;gap:12px;
  transition:border-color .15s,background .15s}
.locker-item:hover{background:#15201f;border-color:#4f98a3}
.locker-icon{width:76px;height:64px;display:block}
.locker-icon svg{display:block}
.locker-name{color:#f1f6f7;font:800 20px 'Segoe UI',sans-serif;letter-spacing:.01em}
.locker-why{color:#b6cbcf;font:600 14px/1.6 'Segoe UI',sans-serif;flex:1}
.locker-state{color:#7f9aa0;font:800 13px 'Segoe UI',sans-serif;letter-spacing:.05em;margin-top:2px}
.locker-item.equipped{border-color:#2b7a3a;background:#12241a}
.locker-item.equipped .locker-state{color:#8ce898}
.locker-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:26px}
.locker-count{color:#c3d6da;font:800 15px 'Segoe UI',sans-serif}
.locker-exit{background:#1f6f3a;color:#eafff0;border:1px solid #2b8a4a;border-radius:8px;
  padding:13px 26px;font:800 16px 'Segoe UI',sans-serif;cursor:pointer}
.locker-exit:hover:not(:disabled){background:#248045}
.locker-exit:disabled{opacity:.4;cursor:default;background:#26302b;border-color:#333;color:#889}

/* CSS block 4 — Conflicts side panel */
.cpanel{position:absolute;top:8px;right:0;bottom:8px;display:flex;align-items:stretch;z-index:120;pointer-events:none}
.cpanel-tab,.cpanel-body{pointer-events:auto}
.cpanel-tab{align-self:flex-start;margin-top:6px;display:flex;align-items:center;gap:8px;cursor:pointer;
  writing-mode:vertical-rl;transform:rotate(180deg);padding:12px 5px;
  background:#1a1a1a;color:#4f98a3;border:1px solid #2a4a4a;border-right:none;border-radius:6px 0 0 6px;
  font:700 11px 'Segoe UI',sans-serif;letter-spacing:.14em}
.cpanel-tab:active{background:#2a4a4a}
.cpanel.has-conflicts .cpanel-tab{color:#fdab43;border-color:#5a4326}
.cpanel-badge{writing-mode:horizontal-tb;transform:rotate(180deg);background:#fdab43;color:#141414;
  border-radius:8px;font:800 10px 'Segoe UI',sans-serif;padding:1px 6px;min-width:16px;text-align:center}
.cpanel-body{width:346px;max-width:84vw;display:flex;flex-direction:column;overflow:hidden;
  background:#141414;border:1px solid #2a4a4a;border-radius:8px 0 0 8px;box-shadow:-8px 0 30px rgba(0,0,0,.5);
  transition:width .18s ease,opacity .15s ease}
.cpanel.collapsed .cpanel-body{width:0;opacity:0;border-color:transparent;box-shadow:none}
.cpanel-head{flex-shrink:0;display:flex;align-items:center;gap:8px;
  padding:9px 12px;border-bottom:1px solid #222;color:#4f98a3;font:700 12px 'Segoe UI',sans-serif}
.cpanel-sum{flex:1;text-align:right;color:#7f9fa5;font-weight:400;font-size:11px;white-space:nowrap}
.cpanel-export{flex-shrink:0;background:#1a1a1a;color:#4f98a3;border:1px solid #2a4a4a;border-radius:4px;
  padding:2px 9px;font:700 10px 'Segoe UI',sans-serif;letter-spacing:.06em;cursor:pointer}
.cpanel-export:hover{background:#20302f}
.cpanel-export:active{background:#2a4a4a}
.cpanel-export:disabled{opacity:.4;cursor:default}
.cpanel-list{flex:1;min-height:0;overflow-y:auto;padding:8px;display:flex;flex-direction:column;gap:7px}
.cpanel-empty{color:#667;font:400 11px 'Segoe UI',sans-serif;padding:14px 10px;text-align:center}
.cbin{border:1px solid #2a2a2a;border-radius:6px;background:#181818;overflow:hidden}
.cbin-top{display:flex;align-items:center;gap:8px;padding:7px 9px;cursor:pointer}
.cbin-top:hover{background:#1e1e1e}
.cbin-id{font:700 13px 'Segoe UI',sans-serif;color:#e7eef0}
.cbin-tag{font:700 9px 'Segoe UI',sans-serif;letter-spacing:.08em;padding:1px 6px;border-radius:4px;text-transform:uppercase}
.cbin-tag.conflict{background:#5a2323;color:#ff9a9a}
.cbin-tag.over{background:#5a4326;color:#fdc078}
.cbin-qty{margin-left:auto;font:600 11px 'Segoe UI',sans-serif;color:#fdab43}
.cbin-chevron{color:#556;font-size:10px;transition:transform .15s ease}
.cbin.open .cbin-chevron{transform:rotate(90deg)}
.cbin-detail{display:none;padding:0 9px 9px;font:400 11px/1.55 'Segoe UI',sans-serif;color:#9fb0b3}
.cbin.open .cbin-detail{display:block}
.cbin-line{display:flex;justify-content:space-between;gap:10px;padding:2px 0}
.cbin-line span{color:#7f9fa5}
.cbin-line b{color:#cdd8da;font-weight:600;text-align:right}
.cbin-sub{margin-top:7px;border-top:1px solid #222;padding-top:7px}
.cbin-sub h5{color:#4f98a3;font:700 10px 'Segoe UI',sans-serif;letter-spacing:.06em;
  text-transform:uppercase;margin-bottom:5px}
.cbin-mat{color:#7f9fa5;font-size:10px;line-height:1.5;margin-bottom:5px;word-break:break-word}
.cbin-samelist{display:flex;flex-direction:column;gap:1px;max-height:168px;overflow-y:auto}
.csame{display:flex;justify-content:space-between;gap:8px;padding:2px 5px;border-radius:3px}
.csame:hover{background:#1e1e1e}
.csame-id{color:#cdd8da}
.csame-qty{color:#88aa99}
.csame-none{color:#556;font-style:italic;padding:2px 5px}
.cpanel-list::-webkit-scrollbar,.cbin-samelist::-webkit-scrollbar{width:8px}
.cpanel-list::-webkit-scrollbar-thumb,.cbin-samelist::-webkit-scrollbar-thumb{background:#2a2a2a;border-radius:4px}