/* =====================================================================
   PORTFOLIO — mobile redesign (four-tabs handoff package)
   Adapted to real data: total/cash/invested were already three distinct,
   correct fields in the API response (STATE.me.value / .cash / value-cash)
   — the "same number twice" defect described in the brief is a property of
   a brand-new, zero-holdings test account (value and cash are genuinely
   equal there), not a bug in this code; confirmed by reading the source
   before writing a line of CSS. Shared header untouched — this is new page
   content below it, not a header replacement, so avatar/settings/IQ/Inbux
   stay reachable exactly as on every other screen. Mobile only this pass.
   ===================================================================== */

.pf-content{padding:14px 16px 18px}

.pf-summary{border:3px solid var(--ink);border-radius:18px;background:var(--surface);
  box-shadow:0 5px 0 rgba(22,48,75,.15);padding:14px 15px 15px;margin-bottom:14px}
.pf-summary .k{font-family:'Nunito',sans-serif;font-weight:800;font-size:10px;
  letter-spacing:.1em;color:var(--ink-soft)}
.pf-toprow{display:flex;align-items:flex-end;gap:10px;margin-top:3px}
.pf-total{font-family:'Baloo 2',sans-serif;font-weight:800;font-size:30px;letter-spacing:-.7px;
  color:var(--ink);flex:1;min-width:0}
.pf-total .cur{font-family:'Nunito',sans-serif;font-weight:800;font-size:11px;color:var(--blue);
  margin-left:4px;cursor:pointer}
.pf-retwrap{text-align:right;flex:none}
.pf-ret{font-family:'Baloo 2',sans-serif;font-weight:800;font-size:18px}
.pf-ret.up{color:var(--teal-text)} .pf-ret.down{color:var(--red)}
.pf-retlabel{font-family:'Nunito',sans-serif;font-weight:800;font-size:10px;color:var(--ink-soft)}

.pf-chiprow{display:flex;gap:8px;margin-top:11px}
.pf-chip{flex:1;border:2.5px solid var(--ink);border-radius:11px;padding:6px 9px;min-width:0}
.pf-chip.cash{background:var(--teal-tint)} .pf-chip.inv{background:var(--blue-tint)}
.pf-chip .k{font-family:'Nunito',sans-serif;font-weight:800;font-size:9px;letter-spacing:.06em;
  color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pf-chip .v{font-family:'Baloo 2',sans-serif;font-weight:800;font-size:15px;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.pf-sectionk{font-family:'Nunito',sans-serif;font-weight:800;font-size:10.5px;letter-spacing:.1em;
  color:var(--ink-soft);margin:16px 0 8px}

.pf-holdcard{border:3px solid var(--ink);border-radius:18px;background:var(--surface);
  box-shadow:0 5px 0 rgba(22,48,75,.15);padding:12px 13px 13px;margin-bottom:10px}
.pf-htop{display:flex;align-items:center;gap:11px}
.pf-logo{width:40px;height:40px;border-radius:11px;border:2.5px solid var(--ink);flex:none;
  display:flex;align-items:center;justify-content:center;font-size:19px}
.pf-namewrap{flex:1;min-width:0}
.pf-name{font-family:'Baloo 2',sans-serif;font-weight:800;font-size:16px;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pf-sub{font-family:'Nunito',sans-serif;font-weight:700;font-size:11.5px;color:var(--ink-soft);margin-top:1px}
.pf-valwrap{text-align:right;flex:none}
.pf-val{font-family:'Baloo 2',sans-serif;font-weight:800;font-size:17px;color:var(--ink)}
.pf-change{font-family:'Nunito',sans-serif;font-weight:800;font-size:12px;margin-top:1px}
.pf-change.up{color:var(--teal-text)} .pf-change.down{color:var(--red)}

.pf-detailrow{display:flex;margin-top:10px;padding-top:10px;border-top:2px solid rgba(22,48,75,.12)}
.pf-cell{flex:1;text-align:center}
.pf-cell .k{font-family:'Nunito',sans-serif;font-weight:800;font-size:9.5px;letter-spacing:.06em;
  color:var(--ink-soft)}
.pf-cell .v{font-family:'Baloo 2',sans-serif;font-weight:800;font-size:14px;color:var(--ink);margin-top:2px}

.pf-emptyslot{border:3px dashed var(--locked-border);border-radius:18px;background:var(--locked-surface);
  padding:14px 15px;display:flex;gap:12px;align-items:center;margin-top:4px}
.pf-emptyslot .ic{width:42px;height:42px;border-radius:11px;background:var(--locked-fill);
  border:2.5px solid var(--locked-border);display:flex;align-items:center;justify-content:center;
  font-size:19px;flex:none}
.pf-emptyslot .title{font-family:'Baloo 2',sans-serif;font-weight:800;font-size:15.5px;color:var(--locked-title)}
.pf-emptyslot .sub{font-family:'Nunito',sans-serif;font-weight:700;font-size:12px;color:var(--locked-ink);margin-top:2px}

.pf-inbuxcard{border:3px solid var(--ink);border-radius:18px;background:var(--surface);
  box-shadow:0 5px 0 rgba(22,48,75,.15);padding:13px 14px 14px;margin-top:16px}
.pf-inbuxtop{display:flex;align-items:baseline;gap:8px}
.pf-inbuxtotal{font-family:'Baloo 2',sans-serif;font-weight:800;font-size:27px;color:var(--ink)}
.pf-inbuxtotal .u{font-family:'Nunito',sans-serif;font-weight:800;font-size:13px;color:var(--orange-text);
  margin-left:6px}
.pf-srcrow{display:flex;gap:8px;margin-top:11px}
.pf-src{flex:1;border-radius:10px;padding:6px 8px;text-align:center}
.pf-src.on{border:2.5px solid var(--ink);background:var(--orange-tint)}
.pf-src.off{border:2.5px solid var(--locked-border);background:var(--locked-surface)}
.pf-src .v{font-family:'Baloo 2',sans-serif;font-weight:800;font-size:15px;color:var(--ink)}
.pf-src.off .v{color:var(--locked-ink)}
.pf-src .k{font-family:'Nunito',sans-serif;font-weight:800;font-size:9.5px;color:var(--ink-soft);margin-top:2px}
.pf-src.off .k{color:var(--locked-ink)}
.pf-inbuxcta{min-height:48px;width:100%;margin-top:12px;border:3px solid var(--ink);border-radius:14px;
  background:var(--orange);box-shadow:0 4px 0 #16304B;display:flex;flex-direction:column;
  align-items:center;justify-content:center;cursor:pointer;-webkit-tap-highlight-color:transparent}
.pf-inbuxcta .l{font-family:'Baloo 2',sans-serif;font-weight:800;font-size:15.5px;color:var(--ink)}
.pf-inbuxcta .s{font-family:'Nunito',sans-serif;font-weight:800;font-size:11px;color:var(--ink)}

.pf-fxrow{border:3px solid var(--ink);border-radius:16px;background:var(--blue-tint);padding:12px 13px;
  display:flex;align-items:center;gap:10px;margin-top:16px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.pf-fxrow .e{font-size:18px;flex:none}
.pf-fxrow .t{flex:1;font-family:'Nunito',sans-serif;font-weight:700;font-size:13px;color:var(--ink)}
.pf-fxrow .chev{color:var(--blue);font-size:16px;flex:none}

.pf-emptywrap{text-align:center;padding:40px 20px;font-family:'Nunito',sans-serif;font-weight:700;
  color:var(--ink-soft)}

/* =====================================================================
   LEADERBOARD — mobile redesign (four-tabs handoff package)
   Adapted to real data: leagues genuinely run server-side (5 real tiers,
   LEAGUE_ROOM_SIZE=15 — not the spec's guessed "5"). "Room filling" is
   derived client-side from the real rows[] the API already returns
   (rows.length vs a small, honest threshold) rather than a new server
   field — no data model change. Two tabs: "Your league" (redesigned
   /api/league) and "All players" (the 4 existing boards — Portfolio,
   Chess, Quiz, Analyst — as filters inside it, per the brief). Mobile only.
   ===================================================================== */
.lb-content{padding:14px 16px 90px}
.lb-title{font-family:'Baloo 2',sans-serif;font-weight:800;font-size:21px;color:var(--ink);margin-bottom:11px}
.lb-tabrow{display:flex;gap:8px;margin-bottom:14px}
.lb-tab{flex:1;height:44px;border:2.5px solid var(--ink);border-radius:12px;background:var(--surface);
  font-family:'Nunito',sans-serif;font-weight:800;font-size:13.5px;color:var(--ink);cursor:pointer;
  -webkit-tap-highlight-color:transparent}
.lb-tab.on{background:var(--ink);color:var(--surface);box-shadow:0 3px 0 rgba(22,48,75,.25)}

.lb-leaguecard{border:3px solid var(--ink);border-radius:18px;background:var(--surface);
  box-shadow:0 5px 0 rgba(22,48,75,.15);padding:15px 15px 16px;margin-bottom:14px}
.lb-lhead{display:flex;align-items:center;gap:12px}
.lb-badge{width:48px;height:48px;border-radius:50%;border:3px solid var(--ink);background:var(--orange-tint);
  display:flex;align-items:center;justify-content:center;font-size:24px;flex:none}
.lb-lname{font-family:'Baloo 2',sans-serif;font-weight:800;font-size:20px;color:var(--ink)}
.lb-lsub{font-family:'Nunito',sans-serif;font-weight:700;font-size:12.5px;color:var(--ink-soft);margin-top:1px}
.lb-ladder{display:flex;gap:5px;align-items:flex-end;margin-top:14px}
.lb-tile{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px}
.lb-tile .box{width:100%;height:30px;border:2.5px solid var(--locked-border);border-radius:6px;
  background:var(--locked-fill)}
.lb-tile.on .box{height:34px;border-color:var(--ink);background:var(--orange)}
.lb-tile .lbl{font-family:'Nunito',sans-serif;font-weight:800;font-size:9.5px;color:var(--locked-ink)}
.lb-tile.on .lbl{color:var(--ink)}
.lb-rule{font-family:'Nunito',sans-serif;font-weight:700;font-size:13.5px;color:var(--ink);
  line-height:1.45;margin-top:13px}

.lb-fillcard{border:3px solid var(--ink);border-radius:18px;background:var(--blue-tint);
  box-shadow:0 5px 0 rgba(22,48,75,.15);padding:22px 16px 20px;text-align:center;margin-bottom:14px}
.lb-fillcard .g{font-size:44px}
.lb-fillcard h3{font-family:'Baloo 2',sans-serif;font-weight:800;font-size:20px;color:var(--ink);margin-top:6px}
.lb-fillcard p{font-family:'Nunito',sans-serif;font-weight:700;font-size:14px;color:var(--ink);
  line-height:1.45;margin-top:6px}
.lb-fillprogress{display:flex;align-items:center;gap:10px;margin-top:14px}
.lb-filltrack{flex:1;height:12px;border:2.5px solid var(--ink);border-radius:8px;background:var(--surface);overflow:hidden}
.lb-filltrack i{display:block;height:100%;background:var(--blue)}
.lb-fillcount{font-family:'Nunito',sans-serif;font-weight:800;font-size:12.5px;color:var(--ink);flex:none}

.lb-weekrow{border:3px solid var(--ink);border-radius:18px;background:var(--surface);
  box-shadow:0 5px 0 rgba(22,48,75,.15);padding:13px 14px;display:flex;align-items:center;gap:12px;margin-bottom:14px}
.lb-avatar{width:46px;height:46px;border-radius:50%;border:2.5px solid var(--ink);background:var(--avatar-tint);
  flex:none;display:flex;align-items:center;justify-content:center;font-size:22px;overflow:hidden}
.lb-weekname{font-family:'Baloo 2',sans-serif;font-weight:800;font-size:16px;color:var(--ink)}
.lb-weeksub{font-family:'Nunito',sans-serif;font-weight:700;font-size:12px;color:var(--ink-soft);margin-top:1px}
.lb-weekiq{font-family:'Baloo 2',sans-serif;font-weight:800;font-size:22px;flex:none}
.lb-weekiq.zero{color:var(--ink-soft)}
.lb-weekiq.some{color:var(--ink)}

.lb-actioncard{min-height:56px;border:3px solid var(--ink);border-radius:16px;background:var(--teal);
  box-shadow:0 5px 0 #16304B;padding:10px 16px;display:flex;flex-direction:column;justify-content:center;
  cursor:pointer;-webkit-tap-highlight-color:transparent}
.lb-actioncard .k{font-family:'Nunito',sans-serif;font-weight:800;font-size:10.5px;letter-spacing:.08em;
  color:var(--surface)}
.lb-actioncard .l{font-family:'Baloo 2',sans-serif;font-weight:800;font-size:17px;color:var(--surface);margin-top:1px}

.lb-allrow{border:3px solid var(--ink);border-radius:14px;background:var(--surface);
  box-shadow:0 4px 0 rgba(22,48,75,.15);padding:10px 13px;display:flex;align-items:center;gap:11px;margin-bottom:8px}
.lb-allrow.me{background:var(--teal-tint)}
.lb-allrank{font-family:'Baloo 2',sans-serif;font-weight:800;font-size:15px;color:var(--ink);width:28px;flex:none}
.lb-allname{font-family:'Baloo 2',sans-serif;font-weight:700;font-size:14.5px;color:var(--ink);flex:1;min-width:0}
.lb-allval{font-family:'Baloo 2',sans-serif;font-weight:800;font-size:14.5px;color:var(--ink);flex:none}
.lb-filterrow{display:flex;gap:7px;overflow-x:auto;scrollbar-width:none;margin-bottom:12px}
.lb-filterrow::-webkit-scrollbar{display:none}
.lb-filter{flex:none;height:36px;padding:0 13px;border:2.5px solid var(--ink);border-radius:11px;
  font-family:'Nunito',sans-serif;font-weight:800;font-size:12.5px;background:var(--surface);color:var(--ink)}
.lb-filter.on{background:var(--ink);color:var(--surface)}

@media (min-width:431px){ .lb-content{max-width:430px;margin:0 auto} .pf-content{max-width:430px;margin:0 auto} }

/* =====================================================================
   EXCHANGE — mobile redesign (four-tabs handoff package)
   Adapted to real data: no "vs yesterday" arrow (inbux_rate() overwrites the
   rate daily with no history kept — confirmed in server.py, not fabricated
   here), no "HIGHEST SO FAR" ceiling (only INBUX_FLOOR=0.50 is a real, hard
   value — the bar shows the floor only, no invented right edge), and the
   backing sentence names the guarantee that is actually absolute (the floor)
   rather than claiming the reserve is always 100%, which it is not whenever
   the floor is propping the rate up above reserve/supply. Conversion is
   one-directional (Inbux -> cash only) because convert_inbux() only ever
   goes that way server-side — this matches the mock, only the old page's
   "↔" title text was wrong. Mobile only.
   ===================================================================== */
.ex-content{padding:14px 16px 90px}
.ex-header{margin-bottom:14px}
.ex-title{font-family:'Baloo 2',sans-serif;font-weight:800;font-size:21px;color:var(--ink)}
.ex-subtitle{font-family:'Nunito',sans-serif;font-weight:800;font-size:11px;letter-spacing:.06em;
  color:var(--ink-soft);margin-top:2px}
.ex-walletchip{display:inline-flex;align-items:center;gap:8px;border:2.5px solid var(--orange);
  border-radius:11px;background:var(--orange-tint);padding:7px 12px;margin-top:9px}
.ex-walletchip .k{font-family:'Nunito',sans-serif;font-weight:800;font-size:9.5px;letter-spacing:.06em;color:var(--orange-text)}
.ex-walletchip .v{font-family:'Baloo 2',sans-serif;font-weight:800;font-size:16px;color:var(--ink)}

.ex-ratecard{border:3px solid var(--ink);border-radius:18px;background:var(--surface);
  box-shadow:0 5px 0 rgba(22,48,75,.15);padding:15px 15px 16px;margin-bottom:14px}
.ex-ratecard .k{font-family:'Nunito',sans-serif;font-weight:800;font-size:10px;letter-spacing:.08em;color:var(--ink-soft)}
.ex-rate{font-family:'Baloo 2',sans-serif;font-weight:800;font-size:40px;letter-spacing:-1px;color:var(--ink);margin-top:2px}
.ex-walletline{font-family:'Nunito',sans-serif;font-weight:700;font-size:13.5px;color:var(--ink);margin-top:6px}

.ex-barlabel{font-family:'Nunito',sans-serif;font-weight:800;font-size:10px;letter-spacing:.08em;
  color:var(--ink-soft);margin-top:16px}
.ex-bartrack{position:relative;height:22px;border:2.5px solid var(--ink);border-radius:11px;
  background:var(--track);overflow:hidden;margin-top:6px}
.ex-barfill{position:absolute;left:0;top:0;bottom:0;background:var(--teal)}
.ex-barmarker{position:absolute;top:-3px;bottom:-3px;width:5px;margin-left:-2.5px;background:var(--ink);border-radius:3px}
.ex-barends{display:flex;justify-content:space-between;margin-top:6px}
.ex-barend{text-align:left}
.ex-barend.right{text-align:right}
.ex-barend .v{font-family:'Nunito',sans-serif;font-weight:800;font-size:12px;color:var(--ink)}
.ex-barend .l{font-family:'Nunito',sans-serif;font-weight:800;font-size:10px;color:var(--ink-soft)}

.ex-whycard{border:3px solid var(--ink);border-radius:18px;background:var(--surface);
  box-shadow:0 5px 0 rgba(22,48,75,.15);padding:14px 15px 15px;margin-bottom:14px}
.ex-whycard .k{font-family:'Nunito',sans-serif;font-weight:800;font-size:10px;letter-spacing:.08em;color:var(--ink-soft)}
.ex-whyrow{display:flex;gap:11px;margin-top:12px}
.ex-whyicon{width:34px;height:34px;border-radius:10px;border:2.5px solid var(--ink);flex:none;
  display:flex;align-items:center;justify-content:center;font-size:16px}
.ex-whyhead{font-family:'Baloo 2',sans-serif;font-weight:800;font-size:14.5px;color:var(--ink)}
.ex-whybody{font-family:'Nunito',sans-serif;font-weight:700;font-size:12.5px;color:var(--ink);margin-top:2px}
.ex-backingrule{border-top:2px solid rgba(22,48,75,.12);margin-top:14px;padding-top:12px;
  display:flex;gap:9px;align-items:flex-start}
.ex-backingrule .t{font-family:'Nunito',sans-serif;font-weight:700;font-size:12.5px;color:var(--ink)}

.ex-convertcard{border:3px solid var(--ink);border-radius:18px;background:var(--surface);
  box-shadow:0 5px 0 rgba(22,48,75,.15);padding:15px}
.ex-convrow{display:flex;align-items:center;gap:10px}
.ex-convbox{flex:1;height:60px;border:3px solid var(--ink);border-radius:15px;background:var(--surface);
  display:flex;align-items:center;justify-content:center;gap:4px}
.ex-convbox.out{background:var(--teal-tint)}
.ex-convbox input{width:100%;border:none;background:none;text-align:center;font-family:'Baloo 2',sans-serif;
  font-weight:800;font-size:26px;color:var(--ink);outline:none}
.ex-convbox .out-v{font-family:'Baloo 2',sans-serif;font-weight:800;font-size:24px;color:var(--ink)}
.ex-convbox .u{font-family:'Nunito',sans-serif;font-weight:800;font-size:13px;color:var(--ink-soft)}
.ex-convarrow{flex:none;font-size:20px;color:var(--ink)}
.ex-quickrow{display:flex;gap:8px;margin-top:11px}
.ex-quickchip{flex:1;height:38px;border:2.5px solid var(--ink);border-radius:11px;background:var(--surface);
  font-family:'Nunito',sans-serif;font-weight:800;font-size:13px;color:var(--ink);cursor:pointer;
  -webkit-tap-highlight-color:transparent}
.ex-primarybtn{min-height:56px;width:100%;margin-top:14px;border:3px solid var(--ink);border-radius:16px;
  background:var(--teal);box-shadow:0 5px 0 #16304B;font-family:'Baloo 2',sans-serif;font-weight:800;
  font-size:16.5px;color:var(--surface);cursor:pointer;-webkit-tap-highlight-color:transparent}
.ex-primarybtn[disabled]{background:var(--locked-fill);border-color:var(--locked-border);box-shadow:none;
  color:var(--disabled-ink);cursor:default}
.ex-msg{font-family:'Nunito',sans-serif;font-weight:700;font-size:12.5px;margin-top:9px;text-align:center}
.ex-msg.ok{color:var(--teal-text)} .ex-msg.bad{color:var(--red)}

@media (min-width:431px){ .ex-content{max-width:430px;margin:0 auto} }

/* =====================================================================
   GAMES — mobile redesign (four-tabs handoff package)
   Adapted to real data: 13 real practice games exist (GYM_ORDER), not 9.
   6 matched the spec's guessed names exactly; the other 7 were checked
   against their actual mechanic text (gym.how.*) rather than guessed from
   name alone. 3 of the spec's groups could not honestly fit all 13 (two
   games are pure memory/sequence tasks, not "reading the market" or
   "maths") — added a 4th group rather than force a wrong label, per the
   spec's own warning that a wrong taxonomy is worse than a flat grid.
   Chess/Gym mode switch reuses the existing #subtabs mechanism (just
   restyled to the unified ink-fill, see styles.css) — no new routing.
   Mobile only.
   ===================================================================== */
.gm-content{padding:14px 16px 90px}
.gm-header{margin-bottom:14px}
.gm-title{font-family:'Baloo 2',sans-serif;font-weight:800;font-size:21px;color:var(--ink)}
.gm-subtitle{font-family:'Nunito',sans-serif;font-weight:800;font-size:11px;letter-spacing:.06em;color:var(--teal-text);margin-top:2px}
.gm-iqchip{display:inline-flex;align-items:center;gap:8px;border:2.5px solid var(--blue);
  border-radius:11px;background:var(--blue-tint);padding:7px 12px;margin-top:9px}
.gm-iqchip .k{font-family:'Nunito',sans-serif;font-weight:800;font-size:9.5px;color:var(--blue)}
.gm-iqchip .v{font-family:'Baloo 2',sans-serif;font-weight:800;font-size:16px;color:var(--ink)}

.gm-matchcard{border:3px solid var(--ink);border-radius:18px;background:var(--ink);
  box-shadow:0 5px 0 rgba(22,48,75,.3);padding:14px 15px 15px;margin:14px 0}
.gm-matchicon{width:44px;height:44px;border-radius:11px;border:2.5px solid var(--surface);
  display:flex;align-items:center;justify-content:center;font-size:21px}
.gm-matchtitle{font-family:'Baloo 2',sans-serif;font-weight:800;font-size:19px;color:var(--surface);margin-top:9px}
.gm-matchsub{font-family:'Nunito',sans-serif;font-weight:700;font-size:12.5px;color:var(--surface);margin-top:2px;opacity:1}
.gm-matchbtn{min-height:50px;width:100%;margin-top:12px;border:3px solid var(--ink);border-radius:14px;
  background:var(--teal);box-shadow:0 4px 0 rgba(0,0,0,.28);font-family:'Baloo 2',sans-serif;font-weight:800;
  font-size:16.5px;color:var(--surface);cursor:pointer;-webkit-tap-highlight-color:transparent}

.gm-groupk{font-family:'Nunito',sans-serif;font-weight:800;font-size:10.5px;letter-spacing:.1em;
  color:var(--ink-soft);margin:16px 0 8px}
.gm-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.gm-card{border:3px solid var(--ink);border-radius:16px;background:var(--surface);
  box-shadow:0 4px 0 rgba(22,48,75,.18);padding:11px 11px 12px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.gm-card .g{font-size:24px;line-height:1}
.gm-card .n{font-family:'Baloo 2',sans-serif;font-weight:800;font-size:14.5px;color:var(--ink);
  line-height:1.15;margin-top:6px;min-height:33px}
.gm-statuschip{display:inline-flex;height:20px;padding:0 7px;border:2.5px solid var(--ink);border-radius:7px;
  font-family:'Nunito',sans-serif;font-weight:800;font-size:9.5px;margin-top:6px}
.gm-statuschip.new{background:var(--orange-tint);color:var(--ink)}
.gm-statuschip.best{background:var(--teal-tint);color:var(--ink)}

@media (min-width:431px){ .gm-content{max-width:430px;margin:0 auto} }