/* ============================================================
   RANGS — écran dédié, scopé #sec-rangs
   Bannière rang actuel + échelle (rail vertical façon ligne de vie)
   ============================================================ */
#sec-rangs.sec { padding: 0 0 16px; }
#sec-rangs * { box-sizing: border-box; }
#sec-rangs { font-family: var(--fb); }

/* ---- sous-header retour ---- */
#sec-rangs .subhead { display:flex; align-items:center; gap:12px; padding:14px 16px 12px; border-bottom:3px solid var(--ink); margin-bottom:4px; }
#sec-rangs .subhead .back { width:38px; height:38px; flex-shrink:0; border:3px solid var(--ink); background:#FFD600; box-shadow:3px 3px 0 var(--ink); display:flex; align-items:center; justify-content:center; font-family:var(--fd); font-size:20px; cursor:pointer; color:var(--ink); }
#sec-rangs .subhead .back:active { transform:translate(2px,2px); box-shadow:1px 1px 0 var(--ink); }
#sec-rangs .subhead .ttl { font-family:var(--fd); font-size:24px; letter-spacing:1.5px; }

/* ---- bannière rang actuel ---- */
#sec-rangs .now { margin:16px; position:relative; }
#sec-rangs .now::before { content:''; position:absolute; top:6px; left:6px; right:-6px; bottom:-6px; background:var(--ink); }
#sec-rangs .now .bd { position:relative; border:4px solid var(--ink); background:#5BE885; padding:16px; }
#sec-rangs .now .row { display:flex; align-items:center; gap:14px; }
#sec-rangs .now .ic { width:66px; height:66px; flex-shrink:0; border:3px solid var(--ink); background:var(--paper); box-shadow:4px 4px 0 var(--ink); display:flex; align-items:center; justify-content:center; transform:rotate(-3deg); }
#sec-rangs .now .ic img { width:46px; height:46px; }
#sec-rangs .now .meta { min-width:0; }
#sec-rangs .now .meta .k { font-family:var(--fb); font-weight:700; font-size:10px; letter-spacing:2px; opacity:.7; }
#sec-rangs .now .meta .nm { font-family:var(--fd); font-size:34px; line-height:32px; }
#sec-rangs .now .meta .sub { font-family:var(--fb); font-weight:700; font-size:11px; margin-top:3px; }
#sec-rangs .now .prog { position:relative; height:18px; border:3px solid var(--ink); background:var(--paper); overflow:hidden; margin-top:14px; }
#sec-rangs .now .prog .f { position:absolute; inset:0 auto 0 0; background:#FF2E93; background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.25) 0 6px,transparent 6px 12px); }
#sec-rangs .now .prog .t { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:var(--fd); font-size:10px; letter-spacing:1px; text-align:center; }

/* ---- divider ---- */
#sec-rangs .sdiv { display:flex; align-items:center; gap:10px; margin:24px 16px 14px; }
#sec-rangs .sdiv .bar { flex:1; height:3px; background:var(--ink); } #sec-rangs .sdiv .bar.l { flex:0 0 22px; }
#sec-rangs .sdiv .t { font-family:var(--fd); font-size:14px; letter-spacing:3px; }

/* ---- échelle ---- */
#sec-rangs .ladder { padding:0 16px; position:relative; }
#sec-rangs .rk { position:relative; padding-left:30px; margin-bottom:14px; }
#sec-rangs .rk::before { content:''; position:absolute; left:11px; top:-14px; bottom:-14px; width:4px; background:var(--ink); z-index:0; }
#sec-rangs .rk:first-child::before { top:24px; }
#sec-rangs .rk:last-child::before { bottom:auto; height:38px; }
#sec-rangs .rk .node { position:absolute; left:0; top:18px; width:26px; height:26px; border:3px solid var(--ink); background:var(--paper); border-radius:50%; z-index:2; }
#sec-rangs .rk.done .node { background:#5BE885; }
#sec-rangs .rk.now-rk .node { background:#FF2E93; box-shadow:0 0 0 4px var(--paper),0 0 0 7px var(--ink); }
#sec-rangs .rk.lock .node { background:#E8E8E8; }

#sec-rangs .rk .card { position:relative; }
#sec-rangs .rk .card::before { content:''; position:absolute; top:5px; left:5px; right:-5px; bottom:-5px; background:var(--ink); }
#sec-rangs .rk .bd { position:relative; border:3px solid var(--ink); background:var(--paper); padding:12px 13px; display:flex; align-items:center; gap:12px; }
#sec-rangs .rk .em { width:50px; height:50px; flex-shrink:0; border:3px solid var(--ink); background:var(--paper); display:flex; align-items:center; justify-content:center; transform:rotate(-3deg); box-shadow:3px 3px 0 var(--ink); }
#sec-rangs .rk .em img { width:34px; height:34px; }
#sec-rangs .rk .info { flex:1; min-width:0; }
#sec-rangs .rk .info .nm { font-family:var(--fd); font-size:21px; line-height:20px; letter-spacing:.5px; }
#sec-rangs .rk .info .xp { font-family:var(--fd); font-size:11px; letter-spacing:.5px; background:var(--ink); color:var(--paper); padding:2px 7px; display:inline-block; margin:4px 0 5px; }
#sec-rangs .rk .info .perk { font-family:var(--fb); font-weight:700; font-size:10px; line-height:1.35; color: rgba(10,10,10,0.7); }
#sec-rangs .rk .info .perk b { color:var(--ink); }
#sec-rangs .rk .stamp { position:absolute; top:-10px; right:-6px; transform:rotate(6deg); padding:3px 8px; border:2.5px solid var(--ink); font-family:var(--fd); font-size:10px; letter-spacing:1px; box-shadow:2px 2px 0 var(--ink); z-index:3; }
#sec-rangs .rk.done .stamp { background:#5BE885; }
#sec-rangs .rk.now-rk .stamp { background:#FF2E93; color:var(--paper); }
#sec-rangs .rk.lock .stamp { background:#E8E8E8; }

/* teintes par tier sur le carré emoji */
#sec-rangs .em.t-gray { background:#D8D8D8; } #sec-rangs .em.t-orange { background:#FF9F45; } #sec-rangs .em.t-cyan { background:#5BD8E5; }
#sec-rangs .em.t-green { background:#5BE885; } #sec-rangs .em.t-yellow { background:#FFD600; } #sec-rangs .em.t-purple { background:#9D4EDD; } #sec-rangs .em.t-red { background:#FF5252; }

#sec-rangs .rk.lock .bd { background:#F0F0F0; }
#sec-rangs .rk.lock .em img { filter:grayscale(.7) opacity(.6); }
#sec-rangs .rk.lock .info .nm { color: rgba(10,10,10,0.55); }

/* mini progress sur le prochain rang */
#sec-rangs .rk .mini { margin-top:7px; height:13px; border:2.5px solid var(--ink); background:var(--paper); position:relative; overflow:hidden; }
#sec-rangs .rk .mini .f { position:absolute; inset:0 auto 0 0; background:#5BE885; }
#sec-rangs .rk .mini .tt { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:var(--fd); font-size:8px; letter-spacing:.5px; }

/* ---- modal détails de rang ---- */
.rk-modal { padding: 0 !important; overflow: hidden; background: #F8F8F8; border: 4px solid var(--ink); width: 90%; max-width: 360px; box-shadow: 10px 10px 0 var(--ink); border-radius: 0; position: relative; }
.rk-modal .hd { padding: 40px 20px 30px; text-align: center; position: relative; border-bottom: 4px solid var(--ink); }
.rk-modal .hd.t-gray { background: #E8E8E8; } .rk-modal .hd.t-orange { background: #FF9F45; } .rk-modal .hd.t-cyan { background: #5BD8E5; }
.rk-modal .hd.t-green { background: #5BE885; } .rk-modal .hd.t-yellow { background: #FFD600; } .rk-modal .hd.t-purple { background: #9D4EDD; } .rk-modal .hd.t-red { background: #FF5252; } .rk-modal .hd.t-gold { background: linear-gradient(135deg, #FFD600, #FFAA00); }
.rk-modal .cls { position: absolute; top: -4px; right: -4px; width: 44px; height: 44px; background: white; border: 0; border-bottom: 4px solid var(--ink); border-left: 4px solid var(--ink); font-family: 'Anton', sans-serif; font-size: 20px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--ink); z-index: 10; transition: transform 0.1s; }
.rk-modal .cls:active { transform: scale(0.9); }
.rk-modal .em { width: 100px; height: 100px; border: 4px solid var(--ink); background: var(--paper); margin: 0 auto; display: flex; align-items: center; justify-content: center; box-shadow: 6px 6px 0 var(--ink); transform: rotate(-3deg); animation: df-wob 2.5s ease-in-out infinite; }
.rk-modal .em img { width: 70px; height: 70px; }
.rk-modal .nm { font-family: var(--fd); font-size: 34px; line-height: 32px; margin-top: 24px; letter-spacing: 1px; text-transform: uppercase; background: var(--ink); color: white; display: inline-block; padding: 8px 16px; transform: rotate(-2deg); box-shadow: 4px 4px 0 rgba(0,0,0,0.3); }
.rk-modal .bdy { padding: 20px; display: flex; flex-direction: column; gap: 14px; background: #F8F8F8; }
.rk-modal .xp-box { display: flex; align-items: center; justify-content: space-between; background: var(--paper); border: 4px solid var(--ink); padding: 14px; box-shadow: 4px 4px 0 var(--ink); }
.rk-modal .xp-box .lbl { font-family: var(--fb); font-weight: 900; font-size: 11px; color: var(--ink); letter-spacing: 1px; }
.rk-modal .xp-box .val { font-family: var(--fd); font-size: 24px; color: var(--ink); line-height: 1; }
.rk-modal .perk-box { background: white; border: 4px solid var(--ink); padding: 14px; box-shadow: 4px 4px 0 var(--ink); text-align: left; }
.rk-modal .perk-box .lbl { font-family: var(--fd); font-size: 16px; color: #FF2E93; letter-spacing: 1px; margin-bottom: 6px; }
.rk-modal .perk-box .desc { font-family: var(--fb); font-weight: 700; font-size: 14px; color: var(--ink); line-height: 1.4; }
.rk-modal .req-box { border: 3px dashed var(--magenta); padding: 12px; background: #FFF0F5; text-align: left; }
.rk-modal .req-box .lbl { display: flex; align-items: center; gap: 6px; font-family: var(--fd); font-size: 14px; color: var(--magenta); margin-bottom: 4px; }
.rk-modal .req-box .desc { font-family: var(--fb); font-weight: 700; font-size: 12px; color: var(--ink); line-height: 1.4; }
.rk-modal .pg-box { border: 3px solid var(--ink); padding: 5px; background: white; box-shadow: 3px 3px 0 var(--ink); }
.rk-modal .pg-bar { position: relative; height: 16px; border: 2px solid var(--ink); background: #F8F8F8; overflow: hidden; }
.rk-modal .pg-bar .f { position: absolute; inset: 0 auto 0 0; background: #5BE885; }
.rk-modal .pg-bar .t { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--fb); font-weight: 700; font-size: 9px; letter-spacing: 1px; mix-blend-mode: hard-light; color: #0A0A0A; }
/* ---- MODALE RANG CUSTOM ---- */
.hm-rq-ov { position:fixed; inset:0; z-index:9999; display:flex; align-items:center; justify-content:center; padding:16px; background:rgba(10,10,10,0.85); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); opacity:0; pointer-events:none; transition:opacity .2s; }
.hm-rq-ov.show { opacity:1; pointer-events:auto; }

.hm-rq-card { position:relative; width:100%; max-width:360px; background:var(--paper); border:4px solid var(--ink); box-shadow:8px 8px 0 var(--ink); display:flex; flex-direction:column; transform:translateY(20px); transition:transform .25s cubic-bezier(.175,.885,.32,1.275); }
.hm-rq-ov.show .hm-rq-card { transform:translateY(0); }

.hm-rq-close { position:absolute; top:-18px; right:-18px; width:40px; height:40px; background:#FF5252; border:3px solid var(--ink); color:var(--paper); font-family:var(--fd); font-size:24px; line-height:34px; text-align:center; box-shadow:3px 3px 0 var(--ink); cursor:pointer; z-index:10; }
.hm-rq-close:active { transform:translate(2px,2px); box-shadow:1px 1px 0 var(--ink); }

.hm-rq-head { position:relative; padding:40px 20px 20px; text-align:center; border-bottom:4px solid var(--ink); overflow:hidden; }
.hm-rq-card.t-gray .hm-rq-head { background:#E8E8E8; }
.hm-rq-card.t-orange .hm-rq-head { background:linear-gradient(135deg, #FF9F45, #FF6B3D); }
.hm-rq-card.t-cyan .hm-rq-head { background:linear-gradient(135deg, #5BD8E5, #1E9BD6); }
.hm-rq-card.t-green .hm-rq-head { background:linear-gradient(135deg, #5BE885, #13B77B); }
.hm-rq-card.t-yellow .hm-rq-head { background:linear-gradient(135deg, #FFD600, #E8A200); }
.hm-rq-card.t-purple .hm-rq-head { background:linear-gradient(135deg, #9D4EDD, #7A3FE0); }
.hm-rq-card.t-red .hm-rq-head { background:linear-gradient(135deg, #FF5252, #FF144A); }
.hm-rq-card.t-gold .hm-rq-head { background:linear-gradient(135deg, #FFD600, #FF9F45, #FF5252); background-size:200% 200%; animation:rq-grad 3s ease infinite; }
@keyframes rq-grad { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }

.hm-rq-head .stamp-tier { position:absolute; top:12px; left:-2px; background:var(--ink); color:var(--paper); padding:4px 10px; font-family:var(--fb); font-weight:700; font-size:11px; letter-spacing:1px; transform:rotate(-4deg); box-shadow:3px 3px 0 rgba(0,0,0,0.2); z-index:2; }

.hm-rq-head .em { position:relative; width:90px; height:90px; margin:0 auto 12px; background:var(--paper); border:4px solid var(--ink); display:flex; align-items:center; justify-content:center; box-shadow:6px 6px 0 var(--ink); transform:rotate(3deg); z-index:2; }
.hm-rq-ov.show .hm-rq-head .em { animation:rq-bounce .6s cubic-bezier(.175,.885,.32,1.275); }
@keyframes rq-bounce { 0%{transform:scale(0) rotate(-15deg)} 100%{transform:scale(1) rotate(3deg)} }
.hm-rq-head .em img { width:60px; height:60px; filter:drop-shadow(2px 2px 0 rgba(0,0,0,.15)); }

.hm-rq-head .nm { position:relative; font-family:var(--fd); font-size:42px; line-height:1.1; letter-spacing:1px; color:var(--ink); text-shadow:2px 2px 0 #FFF, -2px -2px 0 #FFF, 2px -2px 0 #FFF, -2px 2px 0 #FFF; z-index:2; }

.hm-rq-body { padding:20px; background:var(--paper); display:flex; flex-direction:column; gap:16px; }

.hm-rq-body .rk-prog-box { background:#F8F8F8; border:3px solid var(--ink); padding:12px 14px; text-align:center; }
.hm-rq-body .rk-prog-box.done { background:#DDF7EC; border-color:#13B77B; color:#13B77B; }
.hm-rq-body .rk-prog-box .xp-nums { font-family:var(--fb); font-weight:700; font-size:14px; letter-spacing:.5px; margin-bottom:8px; }
.hm-rq-body .rk-prog-box .prog { position:relative; height:18px; border:2.5px solid var(--ink); background:#FFF; overflow:hidden; }
.hm-rq-body .rk-prog-box .prog .f { position:absolute; inset:0 auto 0 0; background:#FF2E93; background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.25) 0 6px,transparent 6px 12px); }
.hm-rq-body .rk-prog-box .rem { font-family:var(--fb); font-weight:700; font-size:10px; margin-top:6px; opacity:.7; color:var(--ink); }

.hm-rq-body .rk-perk { border:3px dashed var(--ink); padding:14px; background:#FFF1C2; }
.hm-rq-body .rk-perk .k { font-family:var(--fb); font-weight:700; font-size:12px; margin-bottom:8px; color:var(--ink); letter-spacing:1px; }
.hm-rq-body .rk-perk .v { font-family:var(--fd); font-size:18px; line-height:1.2; }
.hm-rq-body .rk-perk .v b { font-weight:normal; color:#FF2E93; }

.hm-rq-body .rk-req { border:3px solid var(--magenta); padding:14px; background:#FFE3F1; position:relative; overflow:hidden; }
.hm-rq-body .rk-req.done { border-color:#13B77B; background:#DDF7EC; }
.hm-rq-body .rk-req .k { font-family:var(--fb); font-weight:700; font-size:11px; margin-bottom:4px; letter-spacing:1px; color:var(--magenta); }
.hm-rq-body .rk-req.done .k { color:#13B77B; }
.hm-rq-body .rk-req .v { font-family:var(--fd); font-size:16px; line-height:1.2; margin-bottom:10px; color:var(--ink); }
.hm-rq-body .rk-req .check { font-family:var(--fb); font-weight:700; font-size:11px; padding:4px 8px; display:inline-block; border:2px solid var(--magenta); color:var(--magenta); background:#FFF; }
.hm-rq-body .rk-req.done .check { border-color:#13B77B; color:#FFF; background:#13B77B; }