/* The new Hideout, Section 3: Crafting and Hideout level panels (ui/hideout-craft.js). Reuses .hbPanel/.hbPop/.hbMoney/.hbSq from hideout-biz.css. */
.hcRoot { position:absolute; left:180px; right:16px; top:12px; bottom:14px; z-index:5; display:flex; }
.hcRoot[hidden] { display:none; }
#h2Root.phone .hcRoot { left:0; right:0; top:62px; bottom:72px; }
.hcRoot .kPh .grow { flex:1; }
.hcBody { flex:1; min-height:0; display:grid; grid-template-columns:300px minmax(0,1fr); gap:14px; padding:0 14px 14px; }
.hcLeft { display:flex; flex-direction:column; gap:8px; padding-right:4px; }
.hcRight { padding-right:6px; }
.hcSt { position:relative; display:flex; align-items:center; gap:10px; padding:9px 11px; border-radius:14px; border:3px solid var(--ol); background:rgba(8,20,45,.45); color:#fff; text-align:left; cursor:pointer; flex:none; }
.hcSt.on { border-color:#ffa23c; background:rgba(255,160,40,.18); }
.hcSt .ic, .hcHead .ic { width:48px; height:48px; flex:none; display:flex; align-items:center; justify-content:center; font-size:30px; border-radius:12px; background:rgba(255,255,255,.1); }
.hcSt .ic img, .hcHead .ic img { width:42px; height:42px; object-fit:contain; }
.hcSt .grow { flex:1; min-width:0; }
.hcSt b { display:block; font:400 17px var(--fh); text-shadow:var(--so); }
.hcSt small { display:block; font:800 12px var(--fb); color:#bcd6f5; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hcSt small.g, .hcSlot small.g, .hcBed small.g { color:#8ff56a; } .hcSt small.off { color:#8aa0c4; }
.hcDot { min-width:24px; height:24px; box-sizing:border-box; padding:0 5px; border-radius:12px; background:linear-gradient(180deg,#8ff56a,#3fbf2a); border:2.5px solid #fff; font:900 12px/19px var(--fb); text-align:center; }
.hcMini { display:block; height:7px; border-radius:4px; background:#0b1a33; overflow:hidden; margin-top:4px; } .hcMini > i { display:block; height:100%; background:linear-gradient(90deg,#ffb43c,#ff7a1f); }
.hcMini.big { height:14px; margin-top:8px; }
.hcHead { display:flex; align-items:center; gap:12px; padding:4px 2px 10px; }
.hcHead .grow { flex:1; } .hcHead b { display:block; font:400 26px var(--fh); text-shadow:var(--so); } .hcHead small { font:800 13px var(--fb); color:#bcd6f5; }
.hcTabs { display:flex; gap:6px; margin-bottom:10px; }
.hcTabs button, .hcF button { padding:7px 12px; border-radius:11px; border:2.5px solid var(--ol); background:#24426f; color:#cfe0f8; font:400 14px var(--fh); text-shadow:var(--so); cursor:pointer; display:inline-flex; align-items:center; gap:5px; }
.hcTabs button.on, .hcF button.on { background:linear-gradient(180deg,#ffa23c,#e8670f); color:#fff; }
.hcF { display:flex; flex-wrap:wrap; gap:6px; margin:12px 0 8px; } .hcF svg { width:14px; height:14px; }
.hcQ { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:8px; }
.hcSlot { display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:13px; border:3px solid var(--ol); background:rgba(8,20,45,.5); min-height:52px; }
.hcSlot .grow { flex:1; min-width:0; } .hcSlot b { font:400 15px var(--fh); text-shadow:var(--so); display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hcSlot small { display:block; font:800 12px var(--fb); color:#bcd6f5; } .hcSlot small b { display:inline; font:400 17px var(--fh); color:#fff; }
.hcSlot.done { border-color:#3fbf2a; } .hcSlot.empty { border-style:dashed; border-color:#4a6a98; justify-content:center; }
.hcSlot.lock { border-style:dashed; border-color:#4a6a98; opacity:.6; justify-content:center; } .hcSlot.lock svg { width:13px; height:13px; }
.hcBtn { flex:none; padding:7px 11px; border-radius:11px; border:2.5px solid var(--ol); box-shadow:0 2px 0 var(--ol); color:#fff; font:400 15px var(--fh); text-shadow:var(--so); cursor:pointer; white-space:nowrap; }
.hcBtn.o { background:linear-gradient(180deg,#ffa23c,#e8670f); } .hcBtn.g { background:linear-gradient(180deg,#8ff56a,#3fbf2a); } .hcBtn.b { background:linear-gradient(180deg,#9fe0ff,#2b8de0); }
.hcBtn.d { background:linear-gradient(180deg,#5d7395,#3c4f6e); } .hcBtn.x { background:linear-gradient(180deg,#ff8a70,#e8261c); padding:7px 9px; }
.hcGrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(380px,1fr)); gap:8px; }
.hcRec { display:flex; align-items:center; gap:10px; padding:9px 11px; border-radius:14px; border:3px solid var(--ol); background:rgba(8,20,45,.45); }
.hcRec.lock { opacity:.6; } .hcRec .grow { flex:1; min-width:0; } .hcRec b { font:400 16px var(--fh); text-shadow:var(--so); }
.hcRec small { display:block; font:800 12px var(--fb); color:#bcd6f5; } .hcRec small.why { color:#ff9a8a; }
.hcRec .pi { font-size:30px; } .hcRec .pi.big { width:44px; text-align:center; }
.hcIns, .hcCost { display:flex; flex-wrap:wrap; gap:5px; margin-top:4px; }
.hcIn { display:inline-flex; align-items:center; gap:4px; padding:2px 7px; border-radius:8px; background:rgba(8,20,45,.6); border:2px solid var(--ol); font:800 12px var(--fb); color:#fff; white-space:nowrap; }
.hcIn img, .hcIn .art { width:18px; height:18px; object-fit:contain; font-size:14px; } .hcIn svg { width:13px; height:13px; } .hcIn.miss { color:#ff9a8a; }
.hcTiers { display:flex; gap:4px; margin:4px 0 2px; }
.hcTiers button { width:24px; height:22px; border-radius:7px; border:2px solid var(--ol); background:#24426f; color:var(--rc); font:400 12px var(--fh); cursor:pointer; }
.hcTiers button.on { background:var(--rc); color:#0b1a33; } .hcTiers button.lk { opacity:.4; }
.hcNote { color:#bcd6f5; font:800 13px var(--fb); margin:8px 2px; }
.hcH { font:400 17px var(--fh); color:#ffd23f; text-shadow:var(--so); margin:14px 2px 8px; }
.hcLink { display:block; margin-top:12px; padding:8px 4px; background:none; border:0; color:#9fd0ff; font:800 13px var(--fb); cursor:pointer; text-align:left; }
.hcBeds { display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:8px; }
.hcBed { padding:10px; border-radius:13px; border:3px solid var(--ol); background:rgba(80,55,30,.45); text-align:center; }
.hcBed.empty { border-style:dashed; color:#9fb8dc; font:800 12px var(--fb); } .hcBed.ready { border-color:#3fbf2a; }
.hcBed .pi { font-size:30px; display:block; } .hcBed b { font:400 15px var(--fh); text-shadow:var(--so); }
.hcBed small { display:block; font:800 12px var(--fb); color:#bcd6f5; }
/* Hideout level */
.hqBody { padding:0 16px 16px; }
.hqNext { display:flex; align-items:center; gap:16px; padding:14px; border-radius:16px; border:3px solid var(--ol); background:linear-gradient(180deg,#2462ad,#1c4f95); }
.hqNext .grow { flex:1; min-width:0; } .hqNext .H { font:400 24px var(--fh); text-shadow:var(--so); } .hqNext .sub { color:#cfe0f8; font:800 13px var(--fb); margin:4px 0 8px; }
.hqClock { font:400 30px var(--fh); text-shadow:var(--so); color:#9fe0ff; display:flex; align-items:center; gap:8px; } .hqClock svg { width:26px; height:26px; }
.hqRoad { display:grid; grid-template-columns:repeat(5,1fr); gap:8px; margin-top:14px; }
.hqStep { padding:10px; border-radius:13px; border:3px solid var(--ol); background:rgba(8,20,45,.5); text-align:center; opacity:.75; }
.hqStep b { display:flex; align-items:center; justify-content:center; gap:4px; font:400 22px var(--fh); text-shadow:var(--so); } .hqStep b svg { width:15px; height:15px; }
.hqStep small { display:block; font:800 11.5px/1.3 var(--fb); color:#cfe0f8; margin-top:4px; }
.hqStep.done { opacity:1; } .hqStep.done b { color:#8ff56a; } .hqStep.now { opacity:1; background:linear-gradient(180deg,#ffa23c,#e8670f); }
.hqBuilds { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:8px; }
.hqSt { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:8px; }
.hqS { display:grid; grid-template-columns:1fr auto; align-items:center; gap:2px 10px; padding:9px 11px; border-radius:13px; border:3px solid var(--ol); background:rgba(8,20,45,.45); }
.hqS b { font:400 16px var(--fh); text-shadow:var(--so); } .hqS small { grid-column:1; font:800 12px var(--fb); color:#bcd6f5; } .hqS .hbSq { grid-row:1 / span 2; grid-column:2; }
.hcCost { margin-top:6px; }
/* phones */
#h2Root.phone .hcBody { grid-template-columns:1fr; grid-template-rows:auto minmax(0,1fr); }
#h2Root.phone .hcLeft { flex-direction:row; overflow-x:auto; overflow-y:hidden; padding-bottom:4px; }
#h2Root.phone .hcSt { min-width:190px; }
#h2Root.phone .hcGrid { grid-template-columns:1fr; } #h2Root.phone .hqRoad { grid-template-columns:repeat(2,1fr); }
#h2Root.phone .hqNext { flex-direction:column; align-items:stretch; } #h2Root.phone .hqNext .hbMoney { width:100% !important; }
#h2Root.phone .hcQ { grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
#h2Root.phone .hcSlot { min-height:40px; padding:6px; flex-wrap:wrap; justify-content:center; }
#h2Root.phone .hcSlot small { font-size:11px; text-align:center; }