/* Fishin' Bids player hub (js/hub.js): the round whale PFP button top right + the captain card + the whale gallery,
 * and the small whale PFPs on the leaderboard. Game style: navy card, 3px #284a66 frame, Lilita titles, candy buttons. */
:root{ --hubO:#0a1230; --hubTxt:0 2px 0 #050a18, 1.5px 0 0 #050a18, -1.5px 0 0 #050a18, 0 -1.5px 0 #050a18, 1px 1px 0 #050a18, -1px 1px 0 #050a18; }

/* ---------- the button: whale in a slate candy ring */
.hubbtn{ flex:none; width:40px; height:40px; padding:3px; border-radius:50%; border:2px solid var(--hubO); cursor:pointer; position:relative;
  background:linear-gradient(180deg,#62779f 0%,#3a4d78 50%,#27365e 100%);
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.38), 0 3px 0 var(--hubO), 0 5px 9px rgba(0,0,0,.35); transition:transform .08s, box-shadow .08s; box-sizing:border-box; }
.hubbtn[hidden]{ display:none; }
.hubbtn img{ display:block; width:100%; height:100%; border-radius:50%; object-fit:cover; background:#0c162d; box-shadow:0 0 0 1px rgba(5,10,24,.8); }
.hubbtn.nf img{ display:none; }
.hubbtn.nf::after{ content:attr(data-l); display:grid; place-items:center; width:100%; height:100%; border-radius:50%; background:#0c162d; color:#ffd27a; font:400 17px/1 var(--fun); }
.hubbtn:hover{ filter:brightness(1.1); }
.hubbtn:active{ transform:translateY(2px); box-shadow:inset 0 1.5px 0 rgba(255,255,255,.3), 0 1px 0 var(--hubO), 0 2px 4px rgba(0,0,0,.3); }
.hubbtn:focus-visible{ outline:2px solid #fff; outline-offset:2px; }
@media (max-width:899px){ .hubbtn{ width:38px; height:38px; } }
/* very narrow phones (under 360px): "?" moves into the hub (How to play is in the card) so Bankroll + Banked keep their room */
@media (max-width:359px){ html.fbsigned .bar .helpbtn{ display:none; } }

/* ---------- overlay + card */
.hubov{ position:fixed; inset:0; z-index:130; display:flex; align-items:flex-start; justify-content:center; overflow-y:auto; background:rgba(3,6,16,.62); backdrop-filter:blur(3px);
  padding:max(12px,env(safe-area-inset-top)) 12px max(12px,env(safe-area-inset-bottom)); box-sizing:border-box; }
.hubov[hidden]{ display:none; }
@media (min-width:900px){ .hubov{ justify-content:flex-end; padding:64px max(16px,env(safe-area-inset-right)) 16px 16px; } }
.hubc{ position:relative; box-sizing:border-box; width:min(100%,400px); margin:auto 0; padding:16px 16px 14px; display:flex; flex-direction:column; gap:12px;
  border-radius:18px; border:3px solid #284a66; background:linear-gradient(180deg,#16244a,#0c162d); box-shadow:0 18px 50px rgba(0,0,0,.55); color:#e8eefc; font:14px/1.4 var(--font); }
@media (min-width:900px){ .hubc{ margin:0; } }
.hubload{ padding:30px 0; text-align:center; color:var(--ink-2); font:400 18px var(--fun); }
.hubx{ position:absolute; right:8px; top:6px; width:36px; height:36px; border:0; border-radius:10px; background:none; color:var(--ink-2); font:400 26px/1 var(--font); cursor:pointer; z-index:2; }
.hubx:hover{ color:#fff; }

/* who */
.hubwho{ display:flex; gap:14px; align-items:center; padding-right:30px; }
.hubbig{ flex:none; padding:4px; border-radius:50%; border:2px solid var(--hubO); cursor:pointer; background:linear-gradient(180deg,#62779f 0%,#3a4d78 50%,#27365e 100%);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.38), 0 4px 0 var(--hubO), 0 8px 16px rgba(0,0,0,.4); }
.hubbig:active{ transform:translateY(2px); }
.hubbig.pop{ animation:hubpop .45s ease-out; }
@keyframes hubpop{ 0%{ transform:scale(.86) rotate(-6deg); } 60%{ transform:scale(1.06) rotate(2deg); } 100%{ transform:none; } }
@media (prefers-reduced-motion:reduce){ .hubbig.pop{ animation:none; } .hubbtn, .hubb{ transition:none; } }
.hubface{ display:grid; place-items:center; border-radius:50%; overflow:hidden; background:#0c162d; }
.hubface img{ display:block; width:100%; height:100%; object-fit:cover; }
.hubface.nf{ color:#ffd27a; font:400 40px/1 var(--fun); }
.hubid{ min-width:0; display:grid; gap:4px; }
.hubn{ margin:0; font:400 26px/1.05 var(--fun); letter-spacing:.02em; color:#ffd27a; text-shadow:var(--hubTxt); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hubn.sm{ font-size:22px; color:#fff; }
.hubsince{ color:var(--ink-3); font:500 12px var(--font); }
.hubrank{ justify-self:start; padding:3px 9px 2px; border-radius:8px; font:400 13px/1.1 var(--fun); letter-spacing:.04em; color:#fff; text-shadow:var(--hubTxt);
  background:linear-gradient(180deg,#fff0b8,#f5c76a 50%,#d9962a); border:2px solid #6b3f00; box-shadow:inset 0 1px 0 rgba(255,255,255,.5); }
.hubrank.none{ background:rgba(2,6,18,.55); border-color:transparent; color:var(--ink-3); text-shadow:none; box-shadow:inset 0 2px 4px rgba(0,0,0,.5); }

/* stats */
.hubgrid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
.hubst{ display:grid; gap:4px; padding:8px 8px 7px; border-radius:12px; background:rgba(2,6,18,.55); box-shadow:inset 0 2px 5px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.04); min-width:0; }
.hubst .k{ font:700 9px/1 var(--font); letter-spacing:.1em; text-transform:uppercase; color:#8f9bbb; white-space:nowrap; }
.hubst b{ font:400 18px/1 var(--fun); letter-spacing:.02em; color:#fff; text-shadow:var(--hubTxt); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hubst b.gold{ color:#ffd27a; } .hubst b.gain{ color:var(--gain); } .hubst b.loss{ color:var(--loss); }

/* sections + candy buttons */
.hubsec{ display:grid; gap:6px; }
.hubrow{ display:flex; gap:8px; align-items:center; }
.hubrow > *{ flex:1 1 0; min-width:0; }
.hubrow.end{ justify-content:flex-end; } .hubrow.end > *{ flex:0 0 auto; }
.hubb{ --cbHi:#62779f; --cbMid:#3a4d78; --cbLo:#27365e; --cbO:#0a1230; min-height:42px; padding:0 12px; border-radius:12px; border:2px solid var(--cbO); cursor:pointer;
  background:linear-gradient(180deg,var(--cbHi) 0%,var(--cbMid) 50%,var(--cbLo) 100%); color:#fff; font:400 16px/1 var(--fun); letter-spacing:.03em;
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.38), 0 3px 0 var(--cbO), 0 5px 9px rgba(0,0,0,.3); text-shadow:0 1.5px 0 var(--cbO), 1px 0 0 var(--cbO), -1px 0 0 var(--cbO), 0 -1px 0 var(--cbO);
  transition:transform .08s, box-shadow .08s; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hubb:hover:not(:disabled){ filter:brightness(1.1); }
.hubb:active:not(:disabled){ transform:translateY(2px); box-shadow:inset 0 1.5px 0 rgba(255,255,255,.3), 0 1px 0 var(--cbO); }
.hubb:disabled{ filter:grayscale(.6) brightness(.7); cursor:default; }
.hubb:focus-visible, .hubbig:focus-visible, .hubg:focus-visible, .hublink:focus-visible, .hubx:focus-visible, .hubback:focus-visible{ outline:2px solid #fff; outline-offset:2px; }
.hubb.gold{ --cbHi:#fff0b8; --cbMid:#f5c76a; --cbLo:#d9962a; --cbO:#6b3f00; flex:0 0 auto; }
.hubb.red{ --cbHi:#ffb3bd; --cbMid:#e0566b; --cbLo:#b0304a; --cbO:#4d0a18; flex:0 0 auto; }
.hubb.arm{ --cbHi:#ffb3bd; --cbMid:#e0566b; --cbLo:#b0304a; --cbO:#4d0a18; }
.hubb.wide{ width:100%; }
.hubc input[type=text]{ height:42px; box-sizing:border-box; font:16px var(--font); padding:0 12px; border-radius:10px; border:1px solid rgba(148,170,220,.3); background:#0a1430; color:#e8eefc; }
.hubc input[type=text]:focus{ outline:none; border-color:#7fe3ff; }
.hubck{ display:flex; gap:8px; align-items:center; color:var(--ink-2); font:13px/1.3 var(--font); cursor:pointer; }
.hubck input{ width:18px; height:18px; margin:0; flex:none; accent-color:#4fd1c5; }
.hubhint{ margin:0; color:var(--ink-3); font:12px/1.4 var(--font); }
.hubhint.c{ text-align:center; }
.hubm{ min-height:16px; margin:-4px 0; text-align:center; color:#ff8a9a; font:500 13px var(--font); }
.hubm:empty{ min-height:0; margin:0; }
.hubm.ok{ color:#7fe3c4; }
.hublinks{ display:flex; justify-content:center; gap:18px; flex-wrap:wrap; padding-top:2px; }
.hublinks a, .hublink{ background:none; border:0; padding:4px 2px; color:#7fe3ff; font:600 13px var(--font); cursor:pointer; text-decoration:none; }
.hublinks a:hover, .hublink:hover{ text-decoration:underline; }
.hubfoot{ display:flex; justify-content:space-between; align-items:center; border-top:1px solid rgba(148,170,220,.14); padding-top:8px; }
.hublink.danger{ color:#ff8a9a; font-weight:500; font-size:12.5px; }
.hubver{ color:#5f6b8c; font:500 11px var(--font); }
.hubdel{ display:grid; gap:8px; padding:10px; border-radius:12px; border:2px solid rgba(255,120,140,.35); background:rgba(60,8,20,.35); }
.hubdel[hidden]{ display:none; }

/* gallery */
.hubgh{ display:flex; align-items:center; gap:8px; padding-right:34px; }
.hubback{ width:36px; height:36px; flex:none; border:0; border-radius:10px; background:rgba(2,6,18,.55); color:#fff; font:400 26px/1 var(--font); cursor:pointer; }
.hubgal{ display:grid; grid-template-columns:repeat(auto-fill,minmax(64px,1fr)); gap:8px; max-height:min(58vh,520px); overflow-y:auto; padding:4px 4px 8px; margin:0 -4px;
  overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }
.hubg{ aspect-ratio:1; padding:3px; border-radius:50%; border:2px solid var(--hubO); background:linear-gradient(180deg,#3e5079,#22305a); cursor:pointer; box-shadow:0 2px 0 var(--hubO); }
.hubg img{ display:block; width:100%; height:100%; border-radius:50%; object-fit:cover; background:#0c162d; }
.hubg:hover:not(:disabled){ filter:brightness(1.12); }
.hubg:disabled{ opacity:.45; cursor:default; }
.hubg.on{ background:linear-gradient(180deg,#fff0b8,#f5c76a 50%,#d9962a); border-color:#6b3f00; box-shadow:0 0 0 2px rgba(255,210,122,.35), 0 2px 0 #6b3f00; }

@media (max-width:389px){ .hubc{ padding:14px 12px 12px; } .hubst b{ font-size:16px; } .hubb{ font-size:15px; padding:0 8px; } .hubn{ font-size:23px; } }

/* ---------- leaderboard: small whale PFP before the name */
.lb .lr{ grid-template-columns:30px 32px minmax(0,1fr) auto auto; }
.lb .lbw{ display:block; width:32px; height:32px; border-radius:50%; object-fit:cover; background:#0c162d; box-shadow:0 0 0 2px #3a4d78, 0 0 0 3.5px #0a1230; }
.lb .lr.me .lbw{ box-shadow:0 0 0 2px #f5c76a, 0 0 0 3.5px #6b3f00; }