/* Bridge Lab 3 — compact mission controls around a full-size 3D workbench. */
[hidden] { display: none !important; }
:root { --bp-deep:#0b1421; --bp-mid:#132234; --border-cy:rgba(108,203,221,.27); }
body { font-family:'Nunito','Jua',system-ui,sans-serif; }
button { touch-action:manipulation; }
button:focus-visible,a:focus-visible { outline:3px solid #fde68a; outline-offset:3px; }
button:disabled { opacity:.4; cursor:default; }
button:disabled:not(.build-point) { transform:none!important; }
.topbar { height:66px; padding:10px 18px; background:#101d2d; gap:9px; box-shadow:0 3px 20px #0002; }
.tb-title { font-size:28px; text-shadow:none; }
.tb-title small { color:#8bcbd5; }
.tb-chip { background:#1a2c3e; border-color:#345064; font-size:13px; padding:8px 12px; }
.tb-icon-btn { width:38px;height:40px;background:transparent; }
#btnOrbit { font-size:24px; }
#btnOrbit[aria-pressed=true] { color:#fff2ae;border-color:#f0c971;background:#665129; }
.btn-test { min-height:44px; padding:10px 19px; background:#f3bb54; border:1px solid #ffe0a0; color:#192535; font-weight:900; box-shadow:0 3px 0 #ac7824; }
.btn-test:hover { background:#ffca6e; }
.btn-test.stop { background:#1e5369; color:white; box-shadow:none; }
#stage { min-height:0; }
#stage>canvas { display:block; }
#stage[data-mode="build"] #legend { display:none; }
#mission { position:absolute; z-index:12; left:112px; top:18px; width:286px; padding:17px 18px; border:1px solid #bedde94d; background:rgba(14,31,47,.95); border-radius:16px; box-shadow:0 12px 28px #08162724; }
.mission-eyebrow { display:flex; justify-content:space-between; align-items:center; gap:8px; color:#89c5d1; font-size:10px; letter-spacing:1.5px; font-weight:800; }
#saveState { color:#a1b6c3; letter-spacing:0; font-size:10px; }
#mission h1 { margin:8px 0 6px; font-family:'Jua',sans-serif; font-size:23px; font-weight:400; color:#f8fafc; }
#missionGoal { color:#bfd0dc; font-size:12px; line-height:1.6; }
#missionSteps { display:flex; justify-content:space-between; gap:6px; margin:13px 0; font-size:10px; color:#9aaebd; }
#missionSteps span { display:flex; align-items:center; gap:4px; }
#missionSteps b { display:inline-flex; align-items:center; justify-content:center; width:17px; height:17px; border:1px solid #516574; border-radius:50%; font:10px system-ui; }
#missionSteps .complete { color:#80e8c6; }
#missionSteps .complete b { border-color:#63bd9f; background:#173f3a; }
#buildActions { display:flex; gap:8px; }
#buildActions button,#runPanel button { flex:1; min-height:36px; padding:6px 12px; border:1px solid #587584; background:#213c4d; border-radius:8px; color:#e6f7fd; font-size:12px; cursor:pointer; }
#buildActions button[aria-pressed=true] { background:#246879; border-color:#9adbea; }
#buildActions #btnExample { background:transparent; color:#a8c5d4; }
#guideNote { margin-top:11px; font-size:11px; line-height:1.6; color:#b1dce7; }
#palette { transform:none;top:18px;left:16px;width:80px;gap:7px; background:rgba(14,31,47,.95);border-radius:16px;padding:8px; }
.pal-btn { width:62px;min-height:66px;border-radius:10px; }
#palette.hidden { transform:translateX(-16px); }
.pal-btn.sel { box-shadow:none; background:#234c60; border-color:#87d9e8; }
.pal-mini-row { flex-wrap:wrap;justify-content:center;gap:4px; }
.pal-mini { min-height:32px;flex:1; }
#legend { left:auto;bottom:auto;width:218px;top:18px;right:18px; background:rgba(14,31,47,.93);border-radius:12px; }
#hintBar { bottom:18px;left:50%;width:520px;max-width:calc(100% - 300px);min-height:80px; padding:11px 18px; background:rgba(14,31,47,.94); border-radius:12px; font-size:12px; white-space:normal; line-height:1.5; text-overflow:clip; }
#toolInfo { display:block; color:#a0b8c8; font-size:10px; margin-top:3px; }
#camInfo { bottom:20px;right:18px;font-size:10px;color:#d4ebef; background:rgba(14,31,47,.8);padding:9px 12px;border-radius:8px; }
#runPanel { position:absolute;z-index:14;left:50%;transform:translateX(-50%);bottom:100px;width:min(460px,70%);padding:12px 16px;background:rgba(14,31,47,.96);border:1px solid #618294;border-radius:12px; }
#runStatus { font-size:12px; } #runDistance { float:right;color:#f7cd7f;font:12px monospace; }
#runProgress { width:100%;height:7px;display:block;margin:10px 0;accent-color:#f3bb54; }
#runPanel>div { display:flex;gap:8px; }
#runPanel button { min-height:32px; }
#loadingStatus { position:absolute;z-index:30;inset:0;background:#102235;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:30px;color:#c6e9f0;gap:10px; }
#loadingStatus small { color:#89a6bc; }
#resDiagnosis { color:#c4dfeb;font-size:14px;line-height:1.7;margin:12px 0;background:#1c354a;border-radius:10px;padding:12px; }
#resCriteria { color:#dfc28b;font-size:11px;margin:0 0 18px;line-height:1.7; }
.lv-card { text-align:left;color:#e2e8f0;font-family:inherit; }
.modal { background:#122638; }
#resTitle { font-family:'Jua',sans-serif;font-size:28px; }
.res-btns { flex-wrap:wrap; }.res-btn { padding:11px 16px; }
#toast { max-width:calc(100% - 32px);white-space:normal;text-align:center; }
@media(max-width:1100px) {
    #chipWeight,.tb-title small { display:none; }
    .tb-title { font-size:24px; }
    .topbar { padding:8px 10px;gap:6px; }
    #camInfo { display:none; }
    #hintBar { max-width:calc(100% - 200px); }
}
@media(max-width:760px) {
    .topbar { height:auto;min-height:96px;flex-wrap:wrap;padding:8px 10px;gap:6px; }
    .tb-title { font-size:24px;margin-right:auto; }
    #chipLevel { order:10;flex:1;justify-content:center;min-width:0; }
    #chipBudget { order:11;font-size:11px; }
    .tb-chip .mono { font-size:11px; }
    .tb-icon-btn { width:32px;height:34px;font-size:14px; }
    #btnForces,#btnSound { display:none; }
    #btnTest { min-height:36px;padding:7px 12px;font-size:12px;box-shadow:none; }
    #mission { left:10px;top:10px;width:calc(100% - 20px);padding:11px 13px; }
    .mission-eyebrow { font-size:9px; }
    #mission h1 { font-size:19px;margin:5px 0 2px; }
    #missionGoal { font-size:11px; }
    #missionSteps { margin:7px 0;font-size:10px;justify-content:flex-start;gap:18px; }
    #buildActions { position:absolute;right:12px;top:31px;max-width:48%;gap:5px; }
    #buildActions button { padding:5px 7px;min-height:32px;font-size:10px; }
    #missionGoal { max-width:53%; }
    #guideNote { font-size:10px;margin-top:5px; }
    #palette { top:auto;bottom:10px;left:10px;right:10px;width:auto;flex-direction:row;align-items:center;justify-content:center;gap:5px;padding:7px; }
    .pal-btn { width:48px;min-height:57px;flex:1;max-width:70px;padding:4px; }
    .pal-btn .ic { font-size:18px; }.pal-btn .nm { font-size:10px; }.pal-btn .cost { font-size:8px; }
    .pal-div { display:none; }
    .pal-mini-row { width:66px;flex-shrink:0;gap:3px; }
    .pal-mini { min-height:26px;min-width:25px;font-size:11px; }
    #hintBar { bottom:91px;width:calc(100% - 20px);max-width:none;padding:8px 11px;font-size:10px; }
    #toolInfo { font-size:9px; }
    #legend { min-width:0;top:auto;bottom:172px;right:10px;width:130px;padding:8px;font-size:10px;pointer-events:none; }
    #runPanel { bottom:92px;width:calc(100% - 20px); }
    #runPanel:not([hidden])~#hintBar { bottom:10px; }
    #toast { top:auto;bottom:170px;width:calc(100% - 32px);font-size:12px; }
    .modal { padding:18px;max-height:90dvh; }
    #resStars { font-size:36px; }
}
@media(max-height:560px) and (min-width:761px) {
    #mission { left:10px;top:10px;width:280px;padding:8px 12px; }
    #mission h1 { font-size:19px;margin:5px 0; }
    #mission h1,#missionGoal,#missionSteps,#guideNote { display:none; }
    #buildActions { margin-top:7px; }
    #legend { top:10px;right:10px;width:170px;min-width:0; }
    #palette { flex-direction:row;width:auto;top:auto;bottom:10px;left:10px; }
    .pal-btn { min-height:48px;width:52px; }
    .pal-mini-row { max-width:60px; }.pal-div { display:none; }
    #hintBar { bottom:12px;left:auto;right:10px;transform:none;max-width:45%;font-size:10px; }
    #runPanel { bottom:90px; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important;transition:none!important; } }
/* Keep fallback icon text inside the shared navigation handle when fonts are offline. */
#gnav-root .material-symbols-rounded { max-width:1.2em; overflow:hidden; white-space:nowrap; flex-shrink:0; }
#tooltip,#measure { position:fixed; }

/* One visible point is one real joint. Pointer input stays on the canvas. */
#buildPoints { position:absolute;inset:0;z-index:8;overflow:hidden;pointer-events:none; }
#buildPoints .build-point { position:absolute;left:0;top:0;width:28px;height:28px;margin:0;padding:0;border:0;background:transparent;border-radius:50%;pointer-events:none;opacity:1;box-shadow:none; }
.build-point::before { content:'';position:absolute;inset:7px;border:2px solid #ebf8ff;background:#34566d;border-radius:50%;box-shadow:0 0 0 3px #12344935; }
.build-point.road-point::before { border-color:#a2f1ff;background:#197aab;box-shadow:0 0 0 3px #0c608f50; }
.build-point.anchor-point::before { inset:5px;border:3px solid #ffcc53;background:#805b17;box-shadow:0 0 0 3px #63492250; }
.build-point.anchor-point.road-point::before { background:#1678ae; }
.build-point.used-point:not(.anchor-point)::before { background:#e4f3fb;border-color:#35576d; }
.build-point.used-point.road-point:not(.anchor-point)::before { background:#8be9ff;border-color:#196a8f; }
.build-point.unavailable-point::before { opacity:.28;box-shadow:none; }
.build-point.target-point::before { box-shadow:0 0 0 4px #71f9e364;border-color:#e7fff9;background:#1c988b; }
.build-point.start-point::before { background:#fff2aa;border-color:#fff;box-shadow:0 0 0 5px #ffdc6480; }
#buildPoints .build-point:focus-visible { outline:3px solid #fff;outline-offset:1px; }
#pointLegend { display:flex;justify-content:center;gap:14px;margin-bottom:5px;color:#d4e6ee;font-size:10px; }
.point-key { display:inline-flex;align-items:center;gap:5px; }
.point-key::before { content:'';width:8px;height:8px;border:2px solid #dbeefa;border-radius:50%;background:#34566d; }
.point-key.road-key::before { border-color:#a2f1ff;background:#197aab; }
.point-key.anchor-key::before { border-color:#ffcc53;background:#805b17; }
#roadRepair { margin-top:9px; }
#btnRoadRepair { width:100%;min-height:32px;border:1px solid #c19b54;border-radius:7px;background:#624d2a;color:#fff0c6;padding:5px 8px;font-family:inherit;font-size:11px;cursor:pointer; }
@media(max-width:760px) { #pointLegend { font-size:9px;gap:12px; } }

/* Music controls reuse the owned GUI Pro Casual Game frame and button sprites. */
#btnMusic { font-size:24px;color:#9fe5d6; }
#btnMusic.on { color:#fff1af;border-color:#ecc76e; }
.music-modal { position:relative;isolation:isolate;width:min(510px,92vw);border:0;padding:28px;background:none; }
.music-modal::before { content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;border:14px solid transparent;border-image:url('./ui/music-panel.png') 10 fill stretch;filter:brightness(.52); }
.music-eyebrow { font:800 9px 'Nunito',sans-serif;letter-spacing:1.6px;color:#94c8d7;margin:0 35px 10px 0; }
.music-modal h2 { font-family:'Jua',sans-serif;font-size:27px;text-shadow:none;margin-bottom:7px; }
.music-intro { color:#bccbd9;font-size:12px;margin:0 0 20px; }
#musicTracks { display:grid;gap:9px; }
.music-track { display:flex;align-items:center;gap:14px;width:100%;text-align:left;color:#e2edf5;cursor:pointer;border:9px solid transparent;border-image:url('./ui/music-button.png') 12 14 fill stretch;background:none;padding:7px 6px;min-height:84px;font-family:inherit; }
.music-track[aria-pressed=true] { filter:brightness(1.3);color:#fff2b4; }
.music-track:hover { filter:brightness(1.18); }
.music-number { font:500 20px 'JetBrains Mono',monospace;color:#80b8d5; }
.music-copy { display:grid;gap:4px;flex:1;min-width:0; }
.music-copy strong { font:16px 'Jua',sans-serif; }
.music-mood { color:#c3d7e8;font-size:11px; }
.music-copy small { color:#96b6cc;font-size:9px; }
.music-track-state { font-size:18px;color:#e8d58f; }
.music-controls { display:grid;grid-template-columns:150px 1fr;gap:7px 18px;align-items:center;margin-top:19px; }
#musicToggle { grid-row:span 2;min-height:49px;border:8px solid transparent;border-image:url('./ui/music-button.png') 12 14 fill stretch;padding:6px 0;background:none;color:#fff2b4;font-size:12px; }
.music-controls label { display:flex;justify-content:space-between;font-size:11px;color:#b9cfdf; }
#musicVolumeValue { color:#a3ecdd;font:11px monospace; }
#musicVolume { width:100%;height:24px;margin:0;accent-color:#87d8c6;cursor:pointer; }
#musicStatus { min-height:18px;color:#b4dacf;font-size:11px;margin:16px 0 9px; }
.music-footnote { color:#8caabd;font-size:9px;line-height:1.6;margin:0; }
@media(max-width:480px){
    .tb-title { font-size:22px; }
    .music-modal { padding:20px;max-height:92dvh; }
    .music-modal h2 { font-size:24px; }
    .music-intro { margin-bottom:14px;font-size:11px; }
    .music-track { min-height:78px;gap:10px; }
    .music-copy strong { font-size:15px; }
    .music-controls { grid-template-columns:132px 1fr;gap:6px 12px; }
}