* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #0d1117; color: #e6edf3; font: 13px/1.4 system-ui, -apple-system, Segoe UI, sans-serif; }
canvas#game { position: fixed; inset: 0; width: 100%; height: 100%; display: block; cursor: crosshair; }

.panel { position: fixed; background: rgba(13, 17, 23, 0.82); border: 1px solid #30363d; border-radius: 8px; padding: 8px 10px; pointer-events: auto; }
.panel .title { font-weight: 600; margin-bottom: 4px; color: #9da7b3; text-transform: uppercase; font-size: 11px; letter-spacing: 0.06em; }
.hidden { display: none !important; }
.dim { color: #8b949e; margin-top: 4px; }

#hud-stats { top: 10px; left: 10px; min-width: 210px; }
#hud-stats .row, #settings .row { display: flex; justify-content: space-between; gap: 10px; align-items: center; }
#hud-stats .bar { height: 5px; background: #21262d; border-radius: 3px; overflow: hidden; margin: 2px 0 4px; }
#hud-stats .bar > i { display: block; height: 100%; background: #2ea043; }
#hud-stats .safe { color: #58a6ff; font-weight: 600; }

#minimap { position: fixed; right: 10px; top: 10px; width: 160px; height: 160px; border: 1px solid #30363d; border-radius: 6px; image-rendering: pixelated; }

#hud-inv { right: 10px; top: 222px; width: 160px; max-height: calc(100vh - 332px); overflow: auto; }
#hud-inv .grp { color: #8b949e; font-size: 11px; margin-top: 4px; }
#hud-inv .slots { display: flex; flex-wrap: wrap; gap: 3px; }
#hud-inv .slot { width: 30px; height: 30px; border: 1px solid #30363d; border-radius: 4px; background: #161b22; position: relative; }
#hud-inv .slot i { position: absolute; inset: 5px; border-radius: 3px; }
#hud-inv .slot i.blk { inset: 3px; border: 2px solid #e6edf3; }
#hud-inv .slot span { position: absolute; right: 2px; bottom: 0; font-size: 10px; font-weight: 700; text-shadow: 0 0 3px #000; }

#hotbar { position: fixed; bottom: 10px; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; align-items: flex-end; }
#hotbar .hb-group { background: rgba(13, 17, 23, 0.85); border: 1px solid #30363d; border-radius: 8px; padding: 3px 4px 4px; }
#hotbar .hb-label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; margin: 0 2px 3px; white-space: nowrap; }
#hotbar .hb-label b { color: #e6edf3; background: #30363d; border-radius: 3px; padding: 0 4px; margin-right: 2px; }
#hotbar .hb-items { display: flex; gap: 3px; }
#hotbar .hb { width: 54px; height: 54px; background: #161b22; border: 1px solid #30363d; border-bottom: 2px solid var(--cat); border-radius: 5px; position: relative; cursor: pointer; padding: 2px; text-align: center; font-size: 9px; line-height: 1.15; }
#hotbar .hb:hover { background: #1f242c; }
#hotbar .hb.sel { border-color: #58a6ff; box-shadow: 0 0 0 1px #58a6ff; }
#hotbar .hb.no { opacity: 0.45; }
#hotbar .hb .sw { width: 20px; height: 20px; margin: 2px auto 2px; border-radius: 3px; border: 1px solid #000; }
#hotbar .hb .own { position: absolute; right: 3px; top: 1px; color: #3fb950; font-weight: 700; }
#hotbar .hb .cost { position: absolute; left: 3px; top: 1px; color: #8b949e; }
#hotbar .hb .nm { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

#hud-stats .cargo { font-weight: 500; font-size: 11px; text-align: right; max-width: 150px; }

/* custom tooltip */
#tooltip { width: 270px; }
.tt-head { display: flex; align-items: center; gap: 7px; }
.tt-icon { width: 22px; height: 22px; flex: none; image-rendering: auto; }
.tt-sw { width: 18px; height: 18px; border-radius: 3px; border: 1px solid #000; flex: none; }
.tt-name { font-weight: 700; font-size: 14px; flex: 1; }
.tt-cat { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; border: 1px solid; border-radius: 10px; padding: 1px 7px; white-space: nowrap; }
.tt-sub { color: #8b949e; font-size: 11px; margin-top: 2px; }
.tt-live { margin-top: 6px; padding: 5px 6px; background: #161b22; border-radius: 5px; font-size: 11px; }
.tt-hp { position: relative; height: 14px; background: #21262d; border-radius: 3px; overflow: hidden; margin-bottom: 3px; }
.tt-hp i { position: absolute; left: 0; top: 0; bottom: 0; }
.tt-hp span { position: relative; font-size: 10px; font-weight: 700; padding-left: 5px; text-shadow: 0 0 2px #000; }
.tt-grid { display: grid; grid-template-columns: auto 1fr; gap: 1px 10px; margin-top: 6px; font-size: 11px; }
.tt-k { color: #8b949e; }
.tt-v { text-align: right; }
.tt-desc { margin-top: 6px; color: #c9d1d9; font-size: 11px; }
.tt-hint { margin-top: 6px; color: #79c0ff; font-size: 11px; }
.tt-err { margin-top: 6px; color: #f85149; font-weight: 600; }
.tt-preview { margin-top: 6px; font-size: 11px; color: #c9d1d9; border-top: 1px solid #30363d; padding-top: 5px; }
.pos { color: #3fb950; } .neg { color: #f85149; }

#mode { position: fixed; bottom: 92px; left: 50%; transform: translateX(-50%); font-weight: 600; color: #58a6ff; text-shadow: 0 0 4px #000; }
#toasts { position: fixed; top: 70px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 4px; align-items: center; pointer-events: none; }
#toasts div { background: rgba(110, 30, 30, 0.9); border: 1px solid #f85149; padding: 4px 10px; border-radius: 6px; }
#tooltip { pointer-events: none; font-size: 12px; z-index: 5; }
#dead { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 36px; font-weight: 700; color: #f85149; background: rgba(0, 0, 0, 0.35); pointer-events: none; text-shadow: 0 0 10px #000; }
#dead small { font-size: 16px; color: #e6edf3; }

/* ---- tooltips (see ui/tips.js) ---- */
#tips { position: fixed; inset: 0; pointer-events: none; z-index: 31; } /* above the side panels (library tips sit beside them) */
.tip { position: fixed; width: 260px; font-size: 12px; pointer-events: auto; cursor: default; transition: border-color 0.15s; }
.tip.pinned { border-color: #58a6ff; }
.tip-ring { position: absolute; top: 6px; right: 6px; width: 12px; height: 12px; }
.tip-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.tip-ring .bg { fill: none; stroke: rgba(255,255,255,0.12); stroke-width: 3; }
.tip-ring .fg { fill: none; stroke: #79c0ff; stroke-width: 3; stroke-dasharray: 43.98; }
.tip.pinned .tip-ring .fg { stroke: #58a6ff; }
.tip:not(.leaving):not(.pinned) .tip-ring { opacity: 0.35; }
.tip .tt-head { padding-right: 14px; }
.kw { text-decoration: underline dotted rgba(121,192,255,0.7); text-underline-offset: 2px; cursor: help; }
.tt-cat.kw { text-decoration: none; }
.lb-it.kw { text-decoration: none; border-radius: 4px; }
.lb-it.kw:hover { background: rgba(121,192,255,0.18); }
#hint { position: fixed; font-size: 12px; pointer-events: none; z-index: 32; max-width: 240px; }
#confirm { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.45); z-index: 40; }
#confirm.hidden { display: none; }
#confirm .panel { position: static; max-width: 340px; font-size: 13px; }
#confirm .btns { display: flex; gap: 8px; justify-content: flex-end; margin-top: 10px; }
#confirm button { background: #21262d; color: #e6edf3; border: 1px solid #30363d; border-radius: 6px; padding: 5px 12px; cursor: pointer; font: inherit; }
#confirm button.yes { background: #6e1f1f; border-color: #f85149; }

/* minimap buttons + side panels (settings, library): right side, below the minimap */
#hud-btns { position: fixed; top: 178px; right: 10px; display: flex; gap: 6px; justify-content: flex-end; z-index: 30; }
.hud-btn { width: 36px; height: 36px; border-radius: 8px; border: 1px solid #30363d; background: rgba(13,17,23,0.82); color: #c9d1d9; font-size: 19px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; }
.hud-btn:hover, .hud-btn.on { border-color: #58a6ff; color: #fff; }
.panel.side { top: 222px; right: 10px; width: 460px; max-width: calc(100vw - 20px); max-height: calc(100vh - 232px); overflow-y: auto; z-index: 30; font-size: 12px; background: #0d1117; box-shadow: 0 8px 24px rgba(0,0,0,0.5); padding-top: 0; }
.side .tabs { position: sticky; top: 0; background: #0d1117; z-index: 1; padding-top: 8px; }
#settings textarea { width: 100%; margin: 4px 0; background: #161b22; color: #e6edf3; border: 1px solid #30363d; border-radius: 5px; font: 11px/1.35 ui-monospace, Consolas, monospace; padding: 5px; resize: vertical; }
#settings select { background: #161b22; color: #e6edf3; border: 1px solid #30363d; border-radius: 5px; font: inherit; padding: 2px 4px; }
#settings .btn { background: #21262d; color: #e6edf3; border: 1px solid #30363d; border-radius: 6px; padding: 4px 10px; cursor: pointer; font: inherit; }
#settings .btn:hover { border-color: #58a6ff; }
#settings .btn.primary { background: #1f3a5f; border-color: #58a6ff; }
#settings .sub { margin-top: 8px; color: #9da7b3; font-weight: 600; }
#settings #creative-tools .row { margin-top: 4px; }
#settings #enemy-err:empty { display: none; }
#hud-stats .title { display: flex; align-items: center; gap: 6px; }
#hud-stats .title .nm { flex: 1; }
#hud-stats .badge { background: #6e40c9; color: #fff; border-radius: 4px; padding: 0 5px; font-size: 10px; letter-spacing: 0.05em; }
#hud-stats .copyb { background: #21262d; color: #c9d1d9; border: 1px solid #30363d; border-radius: 4px; font: 10px system-ui, sans-serif; padding: 0 5px; cursor: pointer; text-transform: none; letter-spacing: 0; }
#hud-stats .copyb:hover { border-color: #58a6ff; color: #fff; }
/* hidden panels/rows keep `.hidden` */
.side .tabs { display: flex; gap: 4px; margin-bottom: 8px; border-bottom: 1px solid #30363d; padding-bottom: 6px; align-items: center; }
.side .tabs button { background: none; border: 1px solid transparent; color: #8b949e; border-radius: 5px; padding: 3px 9px; cursor: pointer; font: inherit; }
.side .tabs button:hover { color: #e6edf3; }
.side .tabs button.on { color: #e6edf3; border-color: #30363d; background: #161b22; }

/* library */
#lib-search { margin-left: auto; width: 110px; min-width: 60px; flex: 0 1 110px; background: #161b22; color: #e6edf3; border: 1px solid #30363d; border-radius: 5px; font: inherit; padding: 2px 6px; }
#lib-search:focus { outline: none; border-color: #58a6ff; }
#library .tt-icon { width: 20px; height: 20px; vertical-align: middle; }
#library .lb-blk, #library .lb-item, #library .lb-tile { cursor: help; }
#library .lb-item:hover, #library .lb-tile:hover td { background: #1f242c; }
.lb-grp { margin-bottom: 8px; }
.lb-gt { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; margin: 4px 0 3px; }
.lb-row { padding: 4px 6px; border-radius: 5px; background: #161b22; margin-bottom: 3px; }
.lb-line { display: flex; align-items: center; gap: 6px; }
.lb-line .tt-sw { width: 14px; height: 14px; }
.lb-nm { font-weight: 600; }
.lb-stats { margin-left: auto; color: #8b949e; font-size: 11px; white-space: nowrap; display: flex; align-items: center; gap: 2px; }
.lb-desc { color: #8b949e; font-size: 11px; }

.lb-blk:hover { background: #1f242c; }
.lb-more { margin-top: 5px; padding-top: 5px; border-top: 1px solid #30363d; }
.lb-rec { display: flex; align-items: center; gap: 8px; }
.lb-io { display: flex; align-items: center; gap: 4px; flex: 1; flex-wrap: wrap; }
.lb-it { display: inline-flex; align-items: center; gap: 1px; }
.lb-it i { font-style: normal; font-weight: 700; font-size: 11px; }
.lb-arrow { color: #8b949e; margin: 0 3px; }
.lb-io .lb-nm { margin-left: 4px; }
.lb-meta { text-align: right; font-size: 11px; color: #c9d1d9; white-space: nowrap; }
.lb-meta .dim { margin-top: 0; white-space: normal; max-width: 150px; }
.lb-kv { display: grid; grid-template-columns: auto 1fr; gap: 0 8px; font-size: 11px; margin-top: 2px; }
.lb-kv > span:nth-child(odd) { color: #8b949e; }
.lb-tbl { width: 100%; border-collapse: collapse; font-size: 12px; }
.lb-tbl th { text-align: left; color: #8b949e; font-weight: 600; font-size: 11px; padding: 2px 4px; }
.lb-tbl td { padding: 3px 4px; border-top: 1px solid #21262d; }
.lb-tbl .lb-ore { white-space: nowrap; }
.lb-foot { font-size: 11px; }
#settings .tab > div { margin: 2px 0; }
#settings { width: 420px; }
#settings input[type=range] { flex: 1; }
#settings .check { justify-content: flex-start; }
#settings b { min-width: 44px; text-align: right; }