* { margin: 0; padding: 0; box-sizing: border-box; }
  body { background: #080810; color: #e0e0e0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; overflow: hidden; }
  #canvas-container { position: fixed; inset: 0; }

  /* ── Left UI ── */
  #ui { position: fixed; top: 10px; left: 10px; z-index: 10; display: flex; flex-direction: column; gap: 6px; width: 260px; pointer-events: none; transition: opacity 0.2s, transform 0.2s; }
  #ui > * { pointer-events: auto; }
  #ui.collapsed { transform: translateX(-110%); opacity: 0; pointer-events: none; }

  /* Left-UI collapse button — sits at the panel's top-right corner;
     when the panel is hidden it stays pinned to the left edge */
  #ui-collapse {
    position: fixed; top: 12px; left: 272px; z-index: 15;
    width: 22px; height: 22px; padding: 0; line-height: 1;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.7rem; color: #99a3b5; cursor: pointer;
    background: rgba(12,12,24,0.9); border: 1px solid rgba(255,255,255,0.12);
    border-radius: 6px; backdrop-filter: blur(12px);
    transition: all 0.2s ease;
  }
  #ui-collapse:hover { color: #e8c040; border-color: rgba(232,192,64,0.5); }
  body.ui-hidden #ui-collapse { left: 10px; }
  .panel { background: rgba(12,12,24,0.95); border: 1px solid rgba(255,255,255,0.06); border-radius: 10px; padding: 10px 12px; backdrop-filter: blur(12px); }

  .subtitle { font-size: 0.62rem; color: #666; margin-bottom: 2px; }

  /* Company selector — large */
  .company-selector { display: flex; flex-direction: column; gap: 3px; margin-bottom: 2px; }
  .co-btn { padding: 6px 12px; border: 1px solid rgba(255,255,255,0.12); border-radius: 6px; background: rgba(255,255,255,0.04); color: #aaa; cursor: pointer; font-size: 0.75rem; font-weight: 700; transition: all 0.15s; display: flex; align-items: center; gap: 8px; }
  .co-btn:hover { background: rgba(255,255,255,0.08); color: #fff; }
  .co-btn .dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
  .co-btn .chevron { margin-left: auto; font-size: 0.65rem; opacity: 0.5; transition: transform 0.2s; }
  .co-btn.waf { border-left: 4px solid #c89830; }
  .co-btn.pdi { border-left: 4px solid #3377bb; }
  .co-btn.afm { border-left: 4px solid #77aa44; }
  .co-btn.bnz { border-left: 4px solid #66cc88; }
  .co-btn.waf .dot { background: #c89830; }
  .co-btn.pdi .dot { background: #3377bb; }
  .co-btn.afm .dot { background: #77aa44; }
  .co-btn.bnz .dot { background: #66cc88; }
  .co-btn.tre { border-left: 4px solid #cc8844; }
  .co-btn.aue { border-left: 4px solid #88cc66; }
  .co-btn.tcg { border-left: 4px solid #ddaa44; }
  .co-btn.stn { border-left: 4px solid #aa77cc; }
  .co-btn.tre .dot { background: #cc8844; }
  .co-btn.aue .dot { background: #88cc66; }
  .co-btn.tcg .dot { background: #ddaa44; }
  .co-btn.stn .dot { background: #aa77cc; }
  .co-btn .com { font-size: 0.56rem; color: #777; font-weight: 500; }
  .co-btn.waf.selected { background: #c89830; color: #111; border-color: #c89830; }
  .co-btn.pdi.selected { background: #3377bb; color: #fff; border-color: #3377bb; }
  .co-btn.afm.selected { background: #77aa44; color: #111; border-color: #77aa44; }
  .co-btn.bnz.selected { background: #66cc88; color: #111; border-color: #66cc88; }
  .co-btn.tre.selected { background: #cc8844; color: #111; border-color: #cc8844; }
  .co-btn.aue.selected { background: #88cc66; color: #111; border-color: #88cc66; }
  .co-btn.tcg.selected { background: #ddaa44; color: #111; border-color: #ddaa44; }
  .co-btn.stn.selected { background: #aa77cc; color: #111; border-color: #aa77cc; }
  .co-btn.selected .chevron { transform: rotate(180deg); }

  /* Project sub-buttons — only shown for selected company */
  .project-list { display: none; flex-direction: column; gap: 3px; padding: 4px 0 2px 20px; }
  .project-list.open { display: flex; }
  .proj-btn { padding: 5px 10px; border: 1px solid rgba(255,255,255,0.08); border-radius: 5px; background: rgba(255,255,255,0.02); color: #999; cursor: pointer; font-size: 0.68rem; font-weight: 600; text-align: left; transition: all 0.15s; }
  .proj-btn:hover { background: rgba(255,255,255,0.06); color: #fff; }
  .proj-btn.waf { border-left: 3px solid #998020; }
  .proj-btn.pdi { border-left: 3px solid #225588; }
  .proj-btn.afm { border-left: 3px solid #558833; }
  .proj-btn.bnz { border-left: 3px solid #448866; }
  .proj-btn.waf.active { background: #998020; color: #111; border-color: #c89830; }
  .proj-btn.pdi.active { background: #225588; color: #fff; border-color: #3377bb; }
  .proj-btn.afm.active { background: #558833; color: #111; border-color: #77aa44; }
  .proj-btn.bnz.active { background: #448866; color: #fff; border-color: #66cc88; }

  /* Timeline */
  .timeline { display: flex; align-items: center; gap: 5px; margin-top: 2px; }
  .timeline input[type=range] { flex: 1; accent-color: #e8c040; height: 3px; }
  .tl-label { font-size: 0.64rem; font-weight: 600; color: #e8c040; min-width: 48px; text-align: center; }
  .tl-btn { font-size: 0.58rem; padding: 1px 7px; border: 1px solid rgba(255,255,255,0.10); border-radius: 4px; background: none; color: #777; cursor: pointer; }
  .tl-btn:hover { color: #fff; }

  /* Legend */
  .legend { margin-top: 3px; }
  .legend-title { font-size: 0.58rem; color: #555; }
  .legend-bar { width: 100%; height: 6px; border-radius: 3px;
    background: linear-gradient(to right, #2255cc, #2288cc, #22aaaa, #22cc55, #88cc22, #cccc22, #cc8822, #cc4422, #cc2222, #cc22aa); }
  .legend-labels { display: flex; justify-content: space-between; font-size: 0.52rem; color: #666; }
  .cutoff-row { margin-top: 6px; }
  .cutoff-label { font-size: 0.58rem; color: #999; margin-bottom: 2px; }
  .cutoff-label b { color: #e8c040; }
  #cutoff-slider { width: 100%; accent-color: #e8c040; cursor: pointer; }
  /* Integrated left-UI sections + layer toggle rows */
  .ui-sec { font-size: 0.55rem; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: #5a5f72; margin: 11px 0 5px; display: flex; align-items: center; gap: 8px; }
  .ui-sec::after { content: ''; flex: 1; height: 1px; background: rgba(255,255,255,0.07); }
  .layer-row { display: flex; align-items: center; gap: 8px; margin-top: 5px; font-size: 0.66rem; color: #9aa2b5; cursor: pointer; user-select: none; padding: 4px 7px; border-radius: 6px; transition: all 0.15s; }
  .layer-row:hover { background: rgba(255,255,255,0.045); color: #e8e2d0; }
  .layer-row .ly-dot { width: 8px; height: 8px; border-radius: 50%; background: #2a2f42; flex-shrink: 0; border: 1px solid rgba(255,255,255,0.14); transition: all 0.18s; }
  .layer-row.on .ly-dot { background: #e8c040; border-color: rgba(232,192,64,0.7); box-shadow: 0 0 7px rgba(232,192,64,0.45); }
  .layer-row input { margin-left: auto; accent-color: #e8c040; cursor: pointer; }
  .layer-row .ly-text { flex: 1; display: flex; flex-direction: column; line-height: 1.25; }
  .layer-row .ly-sub { font-size: 0.52rem; color: #5f6577; font-weight: 400; }
  .layer-row .ly-dot.amber.on { background: #d4a017; border-color: rgba(212,160,23,0.7); box-shadow: 0 0 7px rgba(212,160,23,0.45); }
  /* Pit shell source — Algo / Company segmented switch */
  .pit-mode { display: flex; align-items: center; gap: 8px; margin: 6px 0 0 7px; }
  .pit-mode .pm-label { font-size: 0.52rem; color: #5f6577; text-transform: uppercase; letter-spacing: 1px; }
  .pit-mode .pm-seg { display: flex; border: 1px solid rgba(255,255,255,0.12); border-radius: 6px; overflow: hidden; }
  .pit-mode .pm-btn { background: rgba(255,255,255,0.03); color: #8a93a8; border: none; padding: 3px 10px; font-size: 0.62rem; font-weight: 700; cursor: pointer; transition: all 0.15s; }
  .pit-mode .pm-btn + .pm-btn { border-left: 1px solid rgba(255,255,255,0.12); }
  .pit-mode .pm-btn:hover { color: #fff; background: rgba(255,255,255,0.08); }
  .pit-mode .pm-btn.active { background: #e8c040; color: #111; }
  .layer-sub { margin-left: 24px; }
  #ui .panel { max-height: calc(100vh - 20px); overflow-y: auto; }
  #ui .panel::-webkit-scrollbar { width: 5px; }
  #ui .panel::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 3px; }

  /* ── Right data panel ── */
  #rhs { position: fixed; top: 10px; right: 10px; bottom: 10px; z-index: 10; width: 280px; display: flex; flex-direction: column; gap: 6px; pointer-events: none; }
  #rhs > * { pointer-events: auto; }
  #data-panel { flex: 1; min-height: 0; overflow-y: auto; background: rgba(12,12,24,0.95); border: 1px solid rgba(255,255,255,0.06); border-radius: 10px; padding: 10px 12px; backdrop-filter: blur(12px); font-size: 0.62rem; transition: all 0.3s; }
  /* Minimised: collapse to the title row only (flex-basis auto keeps the
     header visible; flex: 0 would zero the height and clip it). */
  #data-panel.minimised { flex: 0 0 auto; overflow: hidden; padding: 6px 12px; }
  /* Mine economics + calibration — same panel pattern as data/sources/detail */
  #econ-panel, #calib-panel { flex: 0 0 auto; max-height: 45%; overflow-y: auto; background: rgba(12,12,24,0.95); border: 1px solid rgba(255,255,255,0.06); border-radius: 10px; padding: 10px 12px; backdrop-filter: blur(12px); font-size: 0.62rem; transition: all 0.3s; }
  #econ-panel.minimised, #calib-panel.minimised { overflow: hidden; padding: 6px 12px; max-height: none; }
  #econ-panel .section-title, #calib-panel .section-title { font-size: 0.65rem; font-weight: 700; color: #e8c040; margin-bottom: 6px; display: flex; align-items: center; justify-content: space-between; cursor: pointer; }
  #econ-panel .section-title .toggle, #calib-panel .section-title .toggle { font-size: 0.55rem; color: #666; padding: 2px 6px; border: 1px solid rgba(255,255,255,0.08); border-radius: 3px; }
  #econ-panel .section-title .toggle:hover, #calib-panel .section-title .toggle:hover { color: #fff; }
  #econ-panel .data-body, #calib-panel .data-body { transition: opacity 0.2s; }
  #econ-panel.minimised .data-body, #calib-panel.minimised .data-body { display: none; }

  /* Pit Shell Method — POPUP opened from the bottom disclaimer click
     (2026-08-11: moved out of the RHS stack per user request) */
  #method-popup { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 360px; max-width: calc(100vw - 40px); max-height: 70vh; overflow-y: auto; z-index: 70; background: rgba(12,12,24,0.97); border: 1px solid rgba(232,192,64,0.35); border-radius: 12px; padding: 10px 14px; backdrop-filter: blur(14px); box-shadow: 0 18px 60px rgba(0,0,0,0.65); font-size: 0.62rem; }
  #method-popup .pop-title { display: flex; align-items: center; justify-content: space-between; font-size: 0.68rem; font-weight: 700; color: #e8c040; margin-bottom: 8px; }
  #method-popup .pop-close { cursor: pointer; color: #666; border: 1px solid rgba(255,255,255,0.1); border-radius: 4px; padding: 1px 7px; font-size: 0.6rem; }
  #method-popup .pop-close:hover { color: #fff; border-color: rgba(255,255,255,0.3); }
  #method-popup .pi-src { font-size: 0.55rem; color: #777; margin: 1px 0 3px; }
  #method-popup .m-title { font-size: 0.62rem; font-weight: 700; color: #d8b45a; margin: 5px 0 2px; }
  #method-popup .m-row { font-size: 0.58rem; color: #aab; line-height: 1.45; margin: 1px 0; }
  #method-popup .m-step { font-size: 0.58rem; color: #99a; line-height: 1.4; margin: 3px 0; padding-left: 10px; }
  #method-popup .m-code { color: #7fc98a; font-weight: 600; }
  #method-popup .m-warn { color: #cc8866; font-size: 0.55rem; line-height: 1.4; margin-top: 4px; }

  /* Data sources — own panel, collapsed by default */
  #sources-panel { flex: 0 0 auto; max-height: 30%; overflow-y: auto; background: rgba(12,12,24,0.95); border: 1px solid rgba(255,255,255,0.06); border-radius: 10px; padding: 10px 12px; backdrop-filter: blur(12px); font-size: 0.62rem; transition: all 0.3s; }
  #sources-panel.minimised { overflow: hidden; padding: 6px 12px; max-height: none; }
  #sources-panel .section-title { font-size: 0.65rem; font-weight: 700; color: #e8c040; margin-bottom: 6px; display: flex; align-items: center; justify-content: space-between; cursor: pointer; }
  #sources-panel .section-title .toggle { font-size: 0.55rem; color: #666; padding: 2px 6px; border: 1px solid rgba(255,255,255,0.08); border-radius: 3px; }
  #sources-panel .section-title .toggle:hover { color: #fff; }
  #sources-panel .data-body { transition: opacity 0.2s; }
  #sources-panel.minimised .data-body { display: none; }
  #sources-panel .pi-src { font-size: 0.55rem; color: #777; margin: 1px 0 3px; }
  #sources-panel .pi-src-link { display: block; font-size: 0.54rem; color: #887744; text-decoration: none; padding: 1px 0; line-height: 1.35; }
  #sources-panel .pi-src-link:hover { color: #e8c040; text-decoration: underline; }

  #data-panel .section-title { font-size: 0.65rem; font-weight: 700; color: #e8c040; margin-bottom: 6px; display: flex; align-items: center; justify-content: space-between; cursor: pointer; }
  #data-panel .section-title .toggle { font-size: 0.55rem; color: #666; padding: 2px 6px; border: 1px solid rgba(255,255,255,0.08); border-radius: 3px; }
  #data-panel .section-title .toggle:hover { color: #fff; }
  #data-panel .data-body { transition: opacity 0.2s; }
  #data-panel.minimised .data-body { display: none; }

  .data-table { width: 100%; border-collapse: collapse; }
  .data-table th { text-align: left; color: #666; font-weight: 600; font-size: 0.58rem; padding: 3px 4px; border-bottom: 1px solid rgba(255,255,255,0.05); }
  .data-table td { padding: 2px 4px; font-size: 0.6rem; color: #aaa; border-bottom: 1px solid rgba(255,255,255,0.03); }
  .data-table td.grade { font-weight: 700; }
  .data-table tr:hover td { color: #fff; background: rgba(255,255,255,0.03); }
  .data-table .clickable { cursor: pointer; }
  .data-table .clickable:hover { color: #e8c040; }

  /* Hole search — filter the drill list by hole ID (list is capped at
     the top 100 by grade, so a specific hole may not be visible) */
  #hole-search { width: 100%; box-sizing: border-box; margin-top: 6px; padding: 5px 8px;
    font-size: 0.62rem; color: #ccc; background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.12); border-radius: 6px; outline: none; }
  #hole-search::placeholder { color: #666; }
  #hole-search:focus { border-color: #e8c040; background: rgba(255,255,255,0.08); }

  #keys { position: fixed; bottom: 10px; left: 112px; font-size: 0.52rem; color: #55565f; z-index: 10; pointer-events: none; white-space: nowrap; text-shadow: 0 1px 2px rgba(0,0,0,0.6); transition: left 0.2s; }
  #keys .kver { color: #6b6c78; margin-right: 6px; }
  body.ui-hidden #keys { left: 44px; }

  /* Screenshot export — subtle, sits above the keys row, bottom-left */
  #shot-wrap { position: fixed; bottom: 26px; left: 112px; z-index: 11; transition: left 0.2s; }
  body.ui-hidden #shot-wrap { left: 44px; }
  #shot-btn {
    background: rgba(16,16,28,0.85); color: #99a3b5; border: 1px solid rgba(120,130,160,0.3);
    border-radius: 5px; padding: 2px 8px; font-size: 0.62rem; cursor: pointer;
    transition: all 0.15s ease; pointer-events: auto;
  }
  #shot-btn:hover { background: rgba(40,44,70,0.95); color: #e8e2d0; border-color: #e8c040; }
  #shot-btn:active { transform: translateY(1px); }
  #shot-btn.saved { border-color: #7fc98a; color: #7fc98a; }

  /* Domain credit — © year + hostname, lower right of the viewport.
     Filled by JS (creditLine in events.js); also composited onto exported PNGs. */
  #brand-credit { position: fixed; bottom: 10px; right: 300px; font-size: 0.55rem; color: #6d707b; z-index: 10; pointer-events: none; white-space: nowrap; text-shadow: 0 1px 2px rgba(0,0,0,0.6); letter-spacing: 0.4px; }

  /* Company start-screen map — geospatial mine selector */
  #company-map-wrap { position: fixed; inset: 0; z-index: 5; display: flex;
    flex-direction: column; align-items: center; justify-content: center;
    background: radial-gradient(ellipse at 50% 40%, #101018 0%, #080810 70%);
    pointer-events: auto; }
  #company-map { width: min(78vw, 78vh * 1.6); max-width: 900px; border: 1px solid #2a2a35;
    border-radius: 8px; background: #0c0c14; box-shadow: 0 0 40px rgba(0,0,0,0.6); }
  #company-map-title { margin-top: 12px; color: #e8e2d0; font-size: 1.05rem; font-weight: 700;
    letter-spacing: 0.5px; text-shadow: 0 1px 3px #000; }
  #company-map-hint { margin-top: 4px; color: #8a8a95; font-size: 0.72rem; letter-spacing: 0.3px; }
  @media (max-width: 900px) { #company-map { width: 94vw; } }

  /* Zoom-adaptive scale bar — bottom centre of the 3D viewport.
     Width + label are set by drawScaleBar() each frame. */
  #scalebar { position: fixed; bottom: 14px; left: 50%; transform: translateX(-50%);
              z-index: 10; pointer-events: none; text-align: center; }
  /* Pit hover popover — mineral resource after ~1 s of stable hover */
  #pit-popover { position: fixed; z-index: 60; pointer-events: none; display: none;
                 max-width: 300px; background: rgba(10,12,20,0.94);
                 border: 1px solid rgba(232,192,64,0.45); border-radius: 6px;
                 padding: 8px 10px; font-size: 0.66rem; line-height: 1.45;
                 box-shadow: 0 4px 18px rgba(0,0,0,0.6); }
  #pit-popover .pp-title { color: #e8c040; font-weight: 600; margin-bottom: 2px; }
  #pit-popover .pp-row { display: flex; justify-content: space-between; gap: 10px; }
  #pit-popover .pp-row span:first-child { color: #8a93a8; }
  #pit-popover .pp-row span:last-child { color: #e8e2d0; text-align: right; font-variant-numeric: tabular-nums; }
  #pit-popover .pp-row span.pp-algo { color: #e8c040; font-weight: 600; }
  #pit-popover .pp-row span.pp-pub { color: #77aadd; font-weight: 600; }
  #pit-popover .pp-src { color: #667; font-size: 0.58rem; margin-top: 3px; }
  #scalebar-label { color: #e8e2d0; font-size: 0.62rem; letter-spacing: 0.5px;
                    text-shadow: 0 1px 3px #000, 0 0 2px #000; margin-bottom: 2px; }
  #scalebar-bar { height: 3px; background: #e8e2d0; box-shadow: 0 0 4px #000, 0 1px 2px #000;
                  margin: 0 auto; position: relative; }
  #scalebar-bar::before, #scalebar-bar::after { content: ''; position: absolute; top: -3px;
                  width: 1.5px; height: 9px; background: #e8e2d0; box-shadow: 0 0 3px #000; }
  #scalebar-bar::before { left: 0; }
  #scalebar-bar::after { right: 0; }
  @media (max-width: 900px) { #scalebar { display: none !important; } }

  /* Pit shell info + reserves — in-flow top of the RHS column.
     The Drillhole Context is important: it grows to fill the column
     (3:2 vs the Drilling Data panel) and its content is NEVER capped —
     when the viewport is too short to show it all, a slim scrollbar
     appears on the side. */
  #br-stack { flex: 3 1 0; display: flex; flex-direction: column; gap: 6px; width: 100%; min-height: 0; overflow-y: auto; pointer-events: auto; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.22) transparent; }
  #br-stack::-webkit-scrollbar { width: 6px; }
  #br-stack::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.22); border-radius: 3px; }
  #br-stack::-webkit-scrollbar-track { background: transparent; }
  #disclaimer .warn { color: #cc9933; font-weight: 700; }

  /* ── Hole detail — in-column panel (minimised by default) ── */
  #detail-panel { flex: 0 0 auto; max-height: 42%; overflow-y: auto; background: rgba(12,12,24,0.95); border: 1px solid rgba(255,255,255,0.08); border-radius: 10px; padding: 8px 12px; backdrop-filter: blur(12px); font-size: 0.62rem; transition: all 0.3s; box-shadow: 0 8px 30px rgba(0,0,0,0.5); }
  #detail-panel.minimised { overflow: hidden; padding: 6px 12px; max-height: none; }
  #detail-panel .section-title { font-size: 0.65rem; font-weight: 700; color: #e8c040; margin-bottom: 6px; display: flex; align-items: center; justify-content: space-between; cursor: pointer; }
  #detail-panel .section-title .toggle { font-size: 0.55rem; color: #666; padding: 2px 6px; border: 1px solid rgba(255,255,255,0.08); border-radius: 3px; }
  #detail-panel .section-title .toggle:hover { color: #fff; }
  #detail-panel .data-body { transition: opacity 0.2s; }
  #detail-panel.minimised .data-body { display: none; }
  .dp-title { color: #e8c040; font-weight: 700; font-size: 0.72rem; }
  .dp-body { padding: 2px 0 0; font-size: 0.62rem; }
  .dp-meta { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; margin-bottom: 6px; }
  .dp-meta .k { color: #555; }
  .dp-meta .v { color: #bbb; font-weight: 600; }
  .dp-meta .v.hl { color: #e8c040; }
  .dp-meta .v.dp-src { grid-column: 2; }
  .dp-meta .dp-src a { color: #887744; text-decoration: none; }
  .dp-meta .dp-src a:hover { color: #e8c040; text-decoration: underline; }
  #dp-section { width: 100%; height: 200px; background: #0a0a18; border: 1px solid rgba(255,255,255,0.08); border-radius: 6px; margin: 4px 0 8px; }
  .dp-section-title { font-size: 0.58rem; color: #666; margin: 2px 0 4px; text-align: center; }
  .dp-table { width: 100%; border-collapse: collapse; }
  .dp-table th { text-align: left; color: #666; font-weight: 600; font-size: 0.56rem; padding: 2px 4px; border-bottom: 1px solid rgba(255,255,255,0.06); }
  .dp-table td { padding: 1.5px 4px; color: #999; font-size: 0.58rem; border-bottom: 1px solid rgba(255,255,255,0.03); }
  .dp-table td.g { font-weight: 700; }

  /* ── Compass (bottom left) ── */
  #compass-wrap { position: fixed; bottom: 10px; left: 10px; z-index: 15; background: rgba(12,12,24,0.85); border: 1px solid rgba(255,255,255,0.08); border-radius: 50%; width: 92px; height: 92px; pointer-events: none; display: flex; align-items: center; justify-content: center; }
  #compass { width: 84px; height: 84px; }

  /* ── Overhead map (top right, left of the data panel) ── */
  #map-wrap { position: fixed; top: 10px; right: 300px; z-index: 15; width: 215px; background: rgba(12,12,24,0.9); border: 1px solid rgba(255,255,255,0.08); border-radius: 10px; padding: 6px 8px 8px; pointer-events: none; }
  #map-title { font-size: 0.55rem; color: #777; text-align: center; margin-bottom: 4px; letter-spacing: 0.5px; }
  #overhead-map { width: 100%; height: 190px; border-radius: 6px; background: #0a0a18; display: block; pointer-events: auto; cursor: crosshair; }
  #map-zoom { position: absolute; top: 18px; right: 6px; display: flex; flex-direction: column; gap: 3px; z-index: 3; pointer-events: auto; }
  #map-zoom button { width: 20px; height: 18px; font-size: 0.72rem; line-height: 1; color: #ccc;
    background: rgba(16,16,28,0.9); border: 1px solid rgba(255,255,255,0.18); border-radius: 4px;
    cursor: pointer; padding: 0; pointer-events: auto; }
  #map-zoom button:hover { background: rgba(60,60,90,0.95); color: #fff; }
  #map-legend { font-size: 0.52rem; color: #777; text-align: center; margin-top: 3px; line-height: 1.4; }

  /* ── Pit shell info (bottom right, above disclaimer) ── */
  #pit-info { width: 100%; background: rgba(12,12,24,0.95); border: 1px solid rgba(255,255,255,0.08); border-radius: 10px; padding: 8px 11px; backdrop-filter: blur(12px); }
  #pit-info .pi-title { font-size: 0.62rem; font-weight: 700; color: #cc9933; margin-bottom: 3px; }
  #pit-info .pi-row { display: flex; justify-content: space-between; font-size: 0.6rem; color: #999; padding: 1.5px 0; }
  #pit-info .pi-row .v { color: #ddd; font-weight: 600; }
  /* Overhead map is the merged coverage view (2026-08-11): bench rings +
     shallow/deep collar colours + counts legend live in #map-wrap; the old
     #coverage-panel in the RHS was removed. */
  #pit-info .pi-row .v.hl-gold { color: #e8c040; font-weight: 700; }
  #pit-info .pi-src { font-size: 0.55rem; color: #777; margin: 1px 0 2px; }
  #disclaimer { flex: 0 0 auto; background: rgba(12,12,24,0.88); border: 1px solid rgba(255,255,255,0.07); border-radius: 10px; padding: 7px 11px; font-size: 0.55rem; color: #776633; line-height: 1.4; cursor: pointer; transition: border-color 0.15s; }
  #disclaimer:hover { border-color: rgba(232,192,64,0.4); }
  #disclaimer .disc-link { color: #e8c040; text-decoration: underline; white-space: nowrap; }
  /* Reserves & Resources — stacked cards (label+headline / detail / note) */
  .res-row { padding: 3px 0 4px; }
  .res-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
  .res-label { font-size: 0.62rem; color: #b8b8c0; font-weight: 600; line-height: 1.3; }
  .res-date { color: #666; font-size: 0.54rem; font-weight: 400; }
  .res-head { font-size: 0.8rem; color: #e8c040; font-weight: 700; white-space: nowrap; }
  .res-detail { font-size: 0.6rem; color: #bbb; line-height: 1.45; margin-top: 1px; }
  .res-note { font-size: 0.56rem; color: #888; font-style: italic; line-height: 1.4; margin-top: 1px; }
  .res-link { display: block; font-size: 0.54rem; color: #887744; text-decoration: none;
              margin: 3px 0 2px; line-height: 1.35; }
  .res-link:hover { color: #c8a44a; text-decoration: underline; }
  .res-sep { border-top: 1px solid rgba(255,255,255,0.08); margin: 6px 0 5px; }
  /* Project totals block — subtle gold-tinted card above the per-pit list */
  #pit-info .pit-total { background: rgba(232,192,64,0.07); border: 1px solid rgba(232,192,64,0.28); border-radius: 8px; padding: 5px 8px 6px; margin-bottom: 6px; }
  #pit-info .pit-total .pi-title { color: #e8c040; }
  #pit-info .pi-src-link { display: block; font-size: 0.54rem; color: #887744; text-decoration: none; padding: 1px 0; line-height: 1.35; }
  #pit-info .pi-src-link:hover { color: #e8c040; text-decoration: underline; }
  /* Company reserves/resources (bottom right, above disclaimer) */
  #reserves-info { width: 100%; background: rgba(12,12,24,0.95); border: 1px solid rgba(255,255,255,0.08); border-radius: 10px; padding: 8px 11px; backdrop-filter: blur(12px); }
  #reserves-info .pi-title { font-size: 0.62rem; font-weight: 700; color: #7aa2cc; margin-bottom: 3px; }
  #reserves-info .pi-row { display: flex; justify-content: space-between; font-size: 0.6rem; color: #999; padding: 1.5px 0; gap: 8px; }
  #reserves-info .pi-row .v { color: #ddd; font-weight: 600; text-align: right; }
  #reserves-info .pi-src { font-size: 0.55rem; color: #777; margin: 2px 0 1px; }
  #reserves-info .pi-src-link { display: block; font-size: 0.54rem; color: #887744; text-decoration: none; padding: 1px 0; line-height: 1.35; }
  #reserves-info .pi-src-link:hover { color: #e8c040; text-decoration: underline; }

  .loading-overlay { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 20; background: rgba(8,8,16,0.94); transition: opacity 0.4s; }
  .loading-overlay.hidden { opacity: 0; pointer-events: none; }
  .loading-box { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; }
  .spinner { width: 28px; height: 28px; border: 2px solid rgba(232,192,64,0.3); border-top-color: #e8c040; border-radius: 50%; animation: spin 0.7s linear infinite; margin-top: 4px; }
  .loading-status { font-size: 0.66rem; color: #888; min-height: 14px; letter-spacing: 0.5px; }
  .loading-status .dot { animation: blink 1s infinite; }
  @keyframes blink { 50% { opacity: 0.2; } }
  .loading-error { display: flex; flex-direction: column; gap: 6px; align-items: center; font-size: 0.66rem; color: #cc6644; }
  .loading-error.hidden { display: none; }
  .loading-retry { padding: 5px 16px; border: 1px solid rgba(232,192,64,0.5); border-radius: 5px; background: rgba(232,192,64,0.12); color: #e8c040; cursor: pointer; font-size: 0.68rem; font-weight: 600; }
  .loading-retry:hover { background: rgba(232,192,64,0.25); }
  @keyframes spin { to { transform: rotate(360deg); } }

  /* ── Touch: let OrbitControls own every gesture on the 3D canvas ── */
  #canvas-container canvas, #canvas-container { touch-action: none; }
  body { -webkit-tap-highlight-color: transparent; overscroll-behavior: none; }

  /* Mobile hamburger + touch hints — hidden on desktop */
  #menu-btn { position: fixed; top: 10px; left: 10px; z-index: 16; display: none; align-items: center; justify-content: center; width: 44px; height: 44px; font-size: 1.15rem; color: #ddd; background: rgba(12,12,24,0.92); border: 1px solid rgba(255,255,255,0.12); border-radius: 10px; cursor: pointer; backdrop-filter: blur(12px); }
  #menu-btn:active { background: rgba(232,192,64,0.25); }
  #touch-hint { display: none; position: fixed; bottom: 12px; left: 50%; transform: translateX(-50%); z-index: 16; font-size: 0.56rem; color: #4a4a5e; letter-spacing: 0.4px; background: rgba(8,8,16,0.55); padding: 4px 12px; border-radius: 20px; pointer-events: none; white-space: nowrap; }

  /* ── Mobile (phones, small tablets) ── */
  @media (max-width: 900px) {
    /* Left UI becomes a slide-down drawer behind a hamburger */
    #ui {
      top: 0; left: 0; right: 0; width: auto;
      max-height: 78vh; overflow-y: auto;
      border-radius: 0 0 14px 14px;
      transform: translateY(-110%);
      transition: transform 0.25s ease;
      box-shadow: 0 10px 40px rgba(0,0,0,0.6);
    }
    #ui.open { transform: translateY(0); }
    /* desktop collapse state doesn't apply to the mobile drawer */
    #ui.collapsed { transform: translateY(-110%); opacity: 1; pointer-events: auto; }
    #menu-btn { display: flex; }
    #menu-btn.hidden { display: none; }

    /* Right data panel → bottom sheet (respect iPhone home indicator) */
    #rhs { top: auto; bottom: 0; left: 0; right: 0; width: auto; max-height: 46vh; flex-direction: column; padding-bottom: env(safe-area-inset-bottom, 0px); }
    #data-panel { flex: 1; min-height: 0; }

    /* Detail panel — in-column within the sheet; cap its height */
    #detail-panel { max-height: 34vh; }

    /* Pit info + reserves — in-flow top of the sheet; scrolls
       internally so it never dominates (disclaimer sits at the
       bottom of the column, after the sources panel) */
    #br-stack { flex: 0 0 auto; width: 100%; max-height: 26vh; overflow-y: auto; }
    #pit-info { backdrop-filter: none; }
    #reserves-info { backdrop-filter: none; }
    /* Sheet minimised → collapse to just the header height */
    #rhs:has(#data-panel.minimised) ~ #compass-wrap { bottom: 46px; }

    /* Compass — smaller, above the data sheet */
    #compass-wrap { bottom: calc(46vh + 8px); left: 8px; width: 64px; height: 64px; }
    #compass { width: 56px; height: 56px; }

    /* Overhead map — compact, top-right below the menu */
    #map-wrap { top: 52px; right: 8px; width: 150px; }
    #overhead-map { height: 110px; }

    /* Keyboard hints are useless on touch — show touch hints instead */
    #keys { display: none; }
    #brand-credit { display: none; }
    #touch-hint { display: block; }

    .co-btn { padding: 10px 14px; font-size: 0.82rem; }
    .tl-btn { padding: 4px 12px; }
  }