/* Feldlager (ui/camp.js): mercenaries, fishing, mining, stable, incubator, coin trader */
.camp-head { display: flex; justify-content: space-between; align-items: center; gap: 4px; min-height: 14px; margin-bottom: 3px; }
.camp-head .row { gap: 3px; }
#camp .camp-head { display: block; }
#camp .camp-head > .camp-line { margin-top: 0; }
.camp-coins { display: inline-flex; align-items: center; gap: 2px; cursor: help; }
.camp-coins img { width: 16px; height: 16px; }
.camp-tabs .tab { padding: 0 2px; }
.camp-body { max-height: 238px; overflow-y: auto; padding-right: 2px; }
.camp-sec { margin-top: 4px; padding-top: 3px; border-top: 1px solid #2a2119; }
.camp-sec:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.camp-sec-t { color: var(--gold); font-size: 7px; margin-bottom: 1px; }
.camp-help { margin: 1px 0 2px; line-height: 7px; }
.camp-line { display: flex; justify-content: space-between; align-items: center; gap: 4px; min-height: 13px; margin-top: 2px; font-size: 7px; }
.camp-line.end { justify-content: flex-end; }
.camp-line .row { gap: 3px; min-width: 0; }
.camp-line .risk { display: inline-block; width: 4px; height: 4px; margin-right: 2px; vertical-align: 1px; }
.camp-line .risk.r0 { background: var(--green); }
.camp-line .risk.r1 { background: #c8e05a; }
.camp-line .risk.r2 { background: #ffaa40; }
.camp-line .risk.r3 { background: var(--red); }
.camp-txt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 7px; }
.camp-card { margin-top: 3px; padding: 3px 4px; background: #1d1712; box-shadow: inset 0 0 0 1px var(--bronze-d); }
.camp-card:first-of-type { margin-top: 2px; }
.camp-card.off { opacity: .6; }
.camp-card > .camp-line:first-child { margin-top: 0; }
.camp-lv { color: var(--dim); font-size: 7px; cursor: help; }
.camp-bar { flex: 1; min-width: 50px; height: 9px; }
.camp-bar > i { background: linear-gradient(#a8e88c 0 1px, #5cae44 1px 5px, #3c7a32 5px); }
.camp-bar.exp > i { background: linear-gradient(#ffe8a0 0 1px, #f2c45a 1px, #b8862e); }
.camp-bar .bt { line-height: 9px; text-shadow: var(--ol); }
.camp-bar.mining { margin-top: 3px; }
.camp-pick { display: flex; flex-direction: column; gap: 1px; margin-top: 2px; }
.camp-sel { width: 100%; }
.camp-hours { display: inline-flex; gap: 2px; }
.camp-hours .btn.small { min-width: 0; padding: 0 3px; }
.cic { position: relative; display: inline-block; flex: none; width: 16px; height: 16px; background: #0f0c0a; box-shadow: inset 0 0 0 1px var(--bronze-d); }
.cic img { position: absolute; left: 0; top: 0; width: 16px; height: 100%; }
.cic .cnt { position: absolute; right: 0; bottom: 0; font-size: 6px; line-height: 6px; color: #fff; }
.camp-tool { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; font-size: 7px; }
.camp-tool > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.camp-tool .camp-bar { flex: none; }
.camp-line > .row:first-child { flex: 1; }
.camp-locked { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 14px 10px; text-align: center; }
.camp-locked .lock { width: 12px; height: 12px; background: var(--ic-lock) center / 12px 12px no-repeat; }
.camp-jname { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: help; }
.camp-gems { display: inline-flex; gap: 1px; }
.camp-gems .gem { width: 6px; height: 6px; background: #0f0c0a; box-shadow: inset 0 0 0 1px var(--bronze); }
.camp-gems .gem.on { background: var(--gold); box-shadow: inset 0 0 0 1px #8a5e1c; }
.col.tight { gap: 0; }
.camp-report { margin-top: 4px; padding: 3px 4px; background: #1d1712; box-shadow: inset 0 0 0 1px var(--gold-d); font-size: 7px; }
.camp-report .camp-line:first-child { margin-top: 0; }
.camp-got { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 1px; margin: 2px 0; }
.btn.pulse { animation: inv-new-tab 1.2s ease-in-out infinite; }
/* coin trader */
#coin-shop .coin-list { max-height: 210px; overflow-y: auto; padding-right: 2px; }
#coin-shop .coin-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#coin-shop .coin-ic { width: 8px; height: 8px; }
#coin-shop .camp-head img { width: 16px; height: 16px; }
/* what works without the player: chips in the window head, a counter on the menu button */
.camp-status { display: flex; flex-wrap: wrap; gap: 2px; margin: 2px 0 3px; }
.camp-chip { display: inline-flex; align-items: center; gap: 2px; height: 10px; padding: 0 3px; font-size: 6px; line-height: 10px; cursor: pointer;
  background: #1d1712; box-shadow: inset 0 0 0 1px var(--bronze-d); color: var(--dim); }
.camp-chip i { width: 4px; height: 4px; background: #5a4e40; }
.camp-chip.run i { background: var(--green); }
.camp-chip.ready { color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold-d); animation: inv-new-tab 1.2s ease-in-out infinite; }
.camp-chip.ready i { background: var(--gold); }
.camp-chip.idle { color: #ff9a88; }
.camp-chip.idle i { background: var(--red); }
.camp-chip:hover { color: var(--text); }
.mbtn-i .mb-badge { position: absolute; left: 0; top: 0; min-width: 8px; height: 8px; padding: 0 2px; font-size: 6px; line-height: 8px; text-align: center;
  color: #fff; background: var(--red); box-shadow: 0 0 0 1px var(--edge); pointer-events: none; }
/* "So geht's" */
.camp-guide { margin-bottom: 3px; padding: 2px 4px; background: rgba(242, 196, 90, .05); box-shadow: inset 0 0 0 1px var(--bronze-d); }
.camp-guide-h { display: flex; justify-content: space-between; align-items: center; height: 9px; font-size: 7px; cursor: pointer; }
.camp-guide-h .dim { font-size: 6px; }
.camp-guide ol { margin: 2px 0 1px; padding-left: 9px; font-size: 6px; line-height: 7px; color: var(--text); }
.camp-guide li { margin-top: 1px; }
/* introduction when a part of the camp opens */
#camp-intro { position: absolute; left: 50%; top: 30%; transform: translate(-50%, -50%); width: 200px; padding: 6px 7px; z-index: 900; }
#camp-intro .camp-intro-t { font-size: 8px; margin-bottom: 3px; text-align: center; }
#camp-intro .camp-intro-p { font-size: 7px; line-height: 8px; margin-top: 3px; }
#camp-intro .camp-line { margin-top: 5px; }
/* ride button next to AUTO (Feldlager horse) */
#ride-btn { width: 18px; height: 18px; flex: none; display: flex; align-items: center; justify-content: center; cursor: pointer;
  background: linear-gradient(#2e251c, #1c1611); box-shadow: 0 0 0 1px var(--edge), inset 0 0 0 1px #4a3b2b; }
#ride-btn i { width: 16px; height: 16px; background: var(--ic-horse) center / 16px 16px no-repeat; opacity: .6; }
#ride-btn:hover i { opacity: .9; }
#ride-btn.on { background: linear-gradient(#2c4a22, #1a2e14); box-shadow: 0 0 0 1px var(--edge), inset 0 0 0 1px #5fb04a; }
#ride-btn.on i { opacity: 1; }
/* pet window (ui/pets.js) */
#pets .pet-list { display: flex; flex-direction: column; gap: 1px; max-height: 76px; overflow-y: auto; margin-bottom: 4px; }
#pets .pet-row { display: flex; align-items: center; gap: 3px; padding: 1px 3px; font-size: 7px; cursor: pointer; background: #1d1712; box-shadow: inset 0 0 0 1px var(--bronze-d); }
#pets .pet-row:hover { box-shadow: inset 0 0 0 1px var(--bronze); }
#pets .pet-row.picked { box-shadow: inset 0 0 0 1px var(--gold-d); background: #2a2018; }
#pets .pet-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#pets .pet-stars { color: var(--gold); font-size: 6px; letter-spacing: -.5px; }
#pets .pet-stars.big { font-size: 7px; }
#pets .pet-stars .off { color: #4a3e30; }
#pets .pet-skill { display: flex; align-items: center; gap: 3px; margin-top: 2px; min-height: 18px; font-size: 7px; }
#pets .pet-skill.off .cic { opacity: .4; }
#pets .pet-sk { flex: 1; min-width: 0; }
#pets .pet-sk .dim { font-size: 6px; line-height: 7px; }
/* costume page of the equipment panel (ui/inventory.js) */
.eq-tabs { margin-bottom: 1px; }
.equip-panel .eq-slot.cs { display: none; }
.equip-panel.cost .eq-slot { display: none; }
.equip-panel.cost .eq-slot.cs { display: block; }
.equip-panel.cost::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: rgba(120, 60, 160, .12); }
/* coin trader tabs and costume groups */
#coin-shop .coin-tabs .tab { padding: 0 2px; }
#coin-shop .coin-group { margin-top: 3px; }
#coin-shop .coin-list .camp-line .row .btn.small:first-child { min-width: 0; padding: 0 3px; }