/* ---------------------------------------------------------------------------
   The streak tags, the rare medals, the Rare badges page and the
   breakthrough card (src/form_view.js). Pixel art like the rest of the
   room: square corners, ink outlines, no blur.
--------------------------------------------------------------------------- */
/* the small tag after an overall: one size everywhere, whatever the row */
.fmx.fmx{display:inline-block;flex:none;width:16px !important;height:16px !important;min-width:0 !important;padding:0 !important;margin:0 1px 0 2px;
  vertical-align:middle;position:relative;top:-1px;cursor:help;line-height:0;border:0 !important;background:none !important;box-shadow:none !important;
  font-size:0 !important;transform:none !important;image-rendering:pixelated}
.fmx.fmx svg{display:block;width:16px;height:16px}
.fmx-hot svg{filter:drop-shadow(1px 1px 0 #0d1b2a)}
.fmx-cold svg{filter:drop-shadow(1px 1px 0 #0d1b2a)}
.fmx-tip{position:fixed;z-index:99999;background:var(--ink,#0d1b2a);color:#fff;border:2px solid #b48cff;padding:6px 8px;
  font:600 12px/1.35 var(--sans,system-ui,sans-serif);box-shadow:0 4px 0 rgba(0,0,0,.5);pointer-events:none}

/* beside his name on his page */
.fmx-names{display:inline-flex;flex-wrap:wrap;gap:6px;align-items:center;margin-left:8px;vertical-align:middle}
.fmx-chip{display:inline-flex;align-items:center;gap:4px;padding:3px 7px 3px 5px;cursor:help;
  font:900 11px/1 var(--sans,system-ui,sans-serif);text-transform:uppercase;letter-spacing:.05em;white-space:nowrap;
  border:2px solid var(--ink,#0d1b2a);box-shadow:2px 2px 0 var(--ink,#0d1b2a);text-shadow:none !important}
.fmx-chip b{font:inherit}
.fmx-chip .fmx.fmx{margin:0}
.fmx-c-hot{background:#ff7a1a;color:#0d1b2a}
.fmx-c-cold{background:#1f5fa8;color:#fff}
.fmx-c-rare{background:linear-gradient(90deg,#ff7ae0,#b48cff 40%,#5fd8ff 75%,#7dffb2);color:#0d1b2a}

/* his Badges tab */
.fmx-panel{margin-bottom:12px}
.fmx-tb{background:linear-gradient(90deg,#5b2bd6,#2a7fd6 60%,#159f8a);color:#fff;box-shadow:inset 0 3px 0 0 rgba(255,255,255,.35),inset 0 -3px 0 0 rgba(0,0,0,.35)}
.fmx-rcard{display:flex;gap:12px;align-items:flex-start;padding:8px 0}
.fmx-rcard + .fmx-rcard{border-top:2px solid rgba(255,255,255,.12)}
.fmx-big{flex:none;width:44px;height:44px;display:block;filter:drop-shadow(2px 2px 0 #0d1b2a)}
.fmx-big svg{width:44px;height:44px;display:block}
.fmx-rt{display:flex;flex-direction:column;gap:3px;min-width:0;font:600 13px/1.35 var(--sans,system-ui,sans-serif)}
.fmx-rt > b{font:900 16px/1.1 var(--sans,system-ui,sans-serif);color:#e6d8ff}
.fmx-how{color:#cfe6ff}
.fmx-near{color:#ffd34d}
.fmx-near a{color:inherit}
.fmx-all{display:inline-block;margin-top:6px;font:800 12px/1 var(--sans,system-ui,sans-serif);color:#9fd8ff}

/* League > Rare badges */
.fmx-intro{margin:0 0 12px;font:600 13px/1.4 var(--sans,system-ui,sans-serif);color:#d8e4f2;max-width:70ch}
.fmx-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px}
.fmx-card{background:var(--ink-2,#14243a);border:2px solid #b48cff;box-shadow:3px 3px 0 #0d1b2a;padding:10px;display:flex;flex-direction:column;gap:8px;min-width:0}
.fmx-card.me{border-color:var(--gold,#ffd34d)}
.fmx-ch{display:flex;gap:10px;align-items:center}
.fmx-ch .fmx-big,.fmx-ch .fmx-big svg{width:36px;height:36px}
.fmx-ch b{display:block;font:900 15px/1.1 var(--sans,system-ui,sans-serif);color:#fff}
.fmx-ch small{display:block;margin-top:2px;font:600 11.5px/1.3 var(--sans,system-ui,sans-serif);color:#a9bdd6}
.fmx-who{display:flex;gap:8px;align-items:center;color:#fff;text-decoration:none;min-width:0}
.fmx-who > span{display:flex;flex-direction:column;gap:3px;min-width:0}
.fmx-who b{font:900 14px/1.1 var(--sans,system-ui,sans-serif);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fmx-who small{font:600 11px/1.2 var(--sans,system-ui,sans-serif);color:#a9bdd6}
.fmx-sub{display:flex;gap:5px;align-items:center;flex-wrap:wrap}
.fmx-sub em,.fmx-close em{font:800 11.5px/1 var(--sans,system-ui,sans-serif);font-style:normal;color:#ffd34d}
.fmx-tm{background:var(--tm,#1e63d6);color:#fff;text-decoration:none;flex:none;width:auto}
.fmx-lift{font:600 12px/1.3 var(--sans,system-ui,sans-serif);color:#cfe6ff}
.fmx-closew{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding-top:6px;border-top:2px solid rgba(255,255,255,.1)}
.fmx-closew .fmx-close{padding-top:0;border-top:0}
.fmx-close{display:flex;gap:6px;align-items:center;flex-wrap:wrap;padding-top:6px;border-top:2px solid rgba(255,255,255,.1);color:#fff;text-decoration:none;font:700 12px/1.2 var(--sans,system-ui,sans-serif)}
.fmx-close > span{font:900 10px/1 var(--sans,system-ui,sans-serif);text-transform:uppercase;letter-spacing:.08em;color:#a9bdd6}
.fmx-close.none em{color:#a9bdd6}
.fmx-h{margin:14px 0 6px;font:900 13px/1 var(--sans,system-ui,sans-serif);text-transform:uppercase;letter-spacing:.08em}
.fmx-log{display:flex;flex-direction:column;gap:4px;font:600 12.5px/1.35 var(--sans,system-ui,sans-serif)}
.fmx-log em{margin-left:6px;font-style:normal;color:#a9bdd6;font-size:11px}

/* the breakthrough card */
.fmx-wrap{position:fixed;inset:0;z-index:95;display:grid;place-items:center;padding:16px;background:rgba(7,13,28,.84)}
.fmx-modal{width:min(520px,100%);max-height:calc(100vh - 32px);display:flex;flex-direction:column;overflow:hidden;
  background:var(--win,#16263d);color:#fff;border:2px solid #fff;box-shadow:var(--frame,0 0 0 3px #0d1b2a),6px 6px 0 #0d1b2a;
  animation:fmx-pop .35s steps(5) both}
@keyframes fmx-pop{from{transform:scale(.6);opacity:0}to{transform:none;opacity:1}}
.fmx-mh{flex:none;padding:10px 14px 8px;background:linear-gradient(90deg,#ff7a1a,#ffd34d);color:#0d1b2a;border-bottom:3px solid #0d1b2a}
.fmx-kick{font:900 11px/1 var(--sans,system-ui,sans-serif);text-transform:uppercase;letter-spacing:.12em}
.fmx-mh h2{margin:4px 0 0;font-size:30px;line-height:1;text-transform:uppercase;text-shadow:2px 2px 0 #fff}
.fmx-mb{flex:1;overflow-y:auto;padding:10px 14px;display:flex;flex-direction:column;gap:8px}
.fmx-bt{display:flex;gap:12px;align-items:center;color:#fff;text-decoration:none;padding:6px;background:rgba(255,255,255,.06);border:2px solid rgba(255,255,255,.12)}
.fmx-bt > span{display:flex;flex-direction:column;gap:3px;min-width:0}
.fmx-bt b{font:900 18px/1.1 var(--sans,system-ui,sans-serif)}
.fmx-sp{font:900 22px/1 var(--disp,var(--sans,system-ui,sans-serif));color:#ffd34d;text-shadow:2px 2px 0 #0d1b2a}
.fmx-bt small{font:600 12px/1.25 var(--sans,system-ui,sans-serif);color:#cfe6ff}
.fmx-note{margin:2px 0 0;font:600 12px/1.3 var(--sans,system-ui,sans-serif);color:#a9bdd6}
.fmx-mf{flex:none;display:flex;gap:8px;justify-content:flex-end;padding:10px 14px;border-top:2px solid rgba(255,255,255,.12)}
@media (max-height:440px){
  .fmx-mh h2{font-size:24px}
  .fmx-mb{padding:8px 12px}
  .fmx-bt .rm-fc.s64{transform:scale(.8);margin:-6px}
}