/* The new Hideout (ui/hideout2.js): the Harbor Yard map, top bar and left menu. Bucket 7 Section 1, Lane B. */
#h2Root { position:relative; width:100%; height:100%; min-height:100%; overflow:hidden; background:#b9c6cf; }
#h2gl { position:absolute; inset:0; }
#h2hud { position:absolute; inset:0; pointer-events:none; z-index:2; font:800 14px var(--fb); color:#fff; }
#h2hud > * { pointer-events:auto; }
#h2tb { position:absolute; left:14px; right:14px; top:12px; display:flex; align-items:center; gap:10px; pointer-events:none; }
#h2tb > * { pointer-events:auto; }
.h2back { width:50px; height:50px; border-radius:13px; background:linear-gradient(180deg,#ffd23f,#f2a51d); border:3px solid var(--ol); box-shadow:0 3px 0 var(--ol); font:400 34px/1 var(--fh); color:#0b1a33; padding:0 0 4px; cursor:pointer; }
.h2ttl, .h2cur { display:flex; align-items:center; gap:10px; padding:8px 14px; background:linear-gradient(180deg,#2d74c4,#1a4c90); border:3px solid var(--ol); border-radius:16px; box-shadow:0 4px 0 var(--ol), inset 0 2px 0 rgba(140,205,255,.35); }
.h2ttl b { font:400 26px/1 var(--fh); text-shadow:var(--so); letter-spacing:.4px; }
.h2ttl span { font:400 14px var(--fh); background:rgba(11,26,51,.6); border-radius:9px; padding:3px 8px; }
.h2sp { flex:1; }
.h2cur { font:400 25px/1 var(--fh); text-shadow:var(--so); padding:6px 14px 6px 8px; }
.h2cur img { width:38px; height:38px; object-fit:contain; }
.h2cur.bump { animation:h2bump .5s ease; }
@keyframes h2bump { 0% { transform:scale(1); } 35% { transform:scale(1.14); } 100% { transform:scale(1); } }
#h2menu { position:absolute; left:14px; top:96px; width:150px; display:flex; flex-direction:column; gap:12px; }
.h2mi { position:relative; display:flex; flex-direction:column; align-items:center; gap:4px; padding:10px 6px 9px; border-radius:16px; border:3px solid var(--ol); box-shadow:0 4px 0 var(--ol), inset 0 2px 0 rgba(140,205,255,.35); background:linear-gradient(180deg,#2d74c4,#1a4c90); color:#fff; font:400 16px var(--fh); text-shadow:var(--so); text-transform:uppercase; cursor:pointer; }
.h2mi img { width:62px; height:62px; object-fit:contain; filter:drop-shadow(0 3px 0 rgba(0,0,0,.35)); }
.h2mi:hover { filter:brightness(1.08); }
.h2dot { position:absolute; right:-8px; top:-8px; min-width:24px; height:24px; padding:0 5px; box-sizing:border-box; border-radius:12px; background:linear-gradient(180deg,#8ff56a,#3fbf2a); border:2.5px solid #fff; font:900 13px/19px var(--fb); font-style:normal; text-shadow:0 1px 0 rgba(0,0,0,.4); }
.h2dot:empty { display:none; }
.h2dot.red { background:linear-gradient(180deg,#ff8a70,#e8261c); }
.h2fly { position:fixed; left:0; top:0; width:44px; height:44px; object-fit:contain; z-index:9999; pointer-events:none; }
.h2pop { position:fixed; z-index:9999; transform:translate(-50%,-50%); font:400 30px var(--fh); color:#b8ff9a; text-shadow:var(--so); pointer-events:none; animation:h2pop 1.2s ease-out forwards; }
@keyframes h2pop { 0% { opacity:0; transform:translate(-50%,-30%) scale(.7); } 20% { opacity:1; transform:translate(-50%,-80%) scale(1.1); } 100% { opacity:0; transform:translate(-50%,-220%) scale(1); } }
.h2list { display:flex; flex-direction:column; gap:8px; }
.h2li { display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:14px; border:3px solid var(--ol); background:rgba(8,20,45,.45); color:#fff; text-align:left; cursor:pointer; }
.h2li img { width:46px; height:46px; object-fit:contain; }
.h2li b { display:block; font:400 18px var(--fh); text-shadow:var(--so); }
.h2li small { display:block; color:#bcd6f5; font:800 12.5px var(--fb); }
.h2li .grow { flex:1; min-width:0; }
.h2cash { padding:6px 10px; border-radius:11px; border:2.5px solid var(--ol); background:linear-gradient(180deg,#8ff56a,#3fbf2a); font:400 17px var(--fh); text-shadow:var(--so); }
/* phones: the menu becomes a bottom bar */
#h2Root.phone #h2tb { left:8px; right:8px; top:8px; gap:6px; }
#h2Root.phone .h2back { width:42px; height:42px; font-size:28px; }
#h2Root.phone .h2ttl { padding:6px 10px; } #h2Root.phone .h2ttl b { font-size:18px; } #h2Root.phone .h2ttl span { display:none; }
#h2Root.phone .h2cur { font-size:18px; padding:4px 10px 4px 6px; } #h2Root.phone .h2cur img { width:28px; height:28px; }
#h2Root.phone #h2menu { left:0; right:0; top:auto; bottom:0; width:auto; flex-direction:row; gap:6px; padding:6px 6px calc(6px + env(safe-area-inset-bottom)); background:linear-gradient(180deg,#1f57a3,#143a72); border-top:3px solid var(--ol); }
#h2Root.phone .h2mi { flex:1; font-size:12px; padding:5px 2px; border-width:2px; box-shadow:none; border-radius:12px; gap:2px; }
#h2Root.phone .h2mi img { width:30px; height:30px; }