/* ================= LAB · SECUENCIA 7: hoja de servicio, career track e identidad ================= */
body.sr-open #lobby { opacity: 0; pointer-events: none; transition: opacity .25s; }
#sr { position: fixed; inset: 0; z-index: 26; font-family: var(--cond); color: #fff; pointer-events: none; }
#sr > * { pointer-events: auto; }
#sr.sr-hidden { display: none; }
#sr.sr-out { opacity: 0; transition: opacity .3s; }
.sr-bg { position: absolute; inset: 0; pointer-events: none !important; background: linear-gradient(90deg, rgba(5, 8, 13, .96) 0%, rgba(5, 8, 13, .9) 50%, rgba(5, 8, 13, .25) 72%, transparent 85%); animation: srBg .5s both; }
@keyframes srBg { from { opacity: 0; } }
.sr-head { position: absolute; left: 3vw; right: 3vw; top: 3vh; display: flex; align-items: flex-end; gap: 30px; animation: fadeup .4s both; }
.sr-title { display: flex; flex-direction: column; line-height: 1; }
.sr-title small { font-size: 12px; letter-spacing: 6px; color: var(--cyan); font-weight: 800; }
.sr-title b { font-size: 36px; font-weight: 900; font-style: italic; }
.sr-tabs { display: flex; gap: 4px; }
.sr-tabs button { position: relative; background: none; border: 0; border-bottom: 3px solid transparent; color: #8ea2bd; font-family: var(--cond); font-size: 18px; font-weight: 800; letter-spacing: 1px; padding: 6px 14px; cursor: pointer; transition: color .2s, border-color .2s; }
.sr-tabs button:hover { color: #fff; }
.sr-tabs button.on { color: #fff; border-bottom-color: var(--cyan); }
.sr-badge { position: absolute; top: -4px; right: -2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #ff3b4e; color: #fff; font-style: normal; font-size: 12px; line-height: 18px; box-shadow: 0 0 10px #ff3b4e; animation: blink 1.2s infinite; }
.sr-x { margin-left: auto; background: none; border: 0; color: #cfd6e2; font-family: var(--cond); font-size: 18px; font-weight: 800; cursor: pointer; }
.sr-x:hover { color: var(--cyan); }
.sr-x kbd { font-size: 11px; }
.sr-body { position: absolute; left: 3vw; top: calc(3vh + 64px); bottom: 3vh; width: min(780px, 60vw); overflow: hidden; }

/* tarjeta de jugador */
.pcard { position: relative; width: 100%; aspect-ratio: 4 / 1; overflow: hidden; border: 1px solid rgba(255, 255, 255, .18); box-shadow: 0 14px 40px rgba(0, 0, 0, .5); clip-path: polygon(0 0, 100% 0, calc(100% - 18px) 100%, 0 100%); }
.pcard > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.pcard::after { content: ''; position: absolute; top: 0; bottom: 0; width: 25%; left: -30%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .22), transparent); animation: pcShine 4s 1s infinite; }
@keyframes pcShine { 0%, 70% { left: -30%; } 100% { left: 120%; } }
.pc-emb { position: absolute; left: 3%; top: 12%; height: 76%; aspect-ratio: 1; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .6)); }
.pc-emb svg { width: 100%; height: 100%; }
.pc-txt { position: absolute; left: 22%; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; line-height: 1; text-shadow: 0 2px 6px rgba(0, 0, 0, .7); }
.pc-txt b { font-size: clamp(20px, 2.6vw, 34px); font-weight: 900; font-style: italic; }
.pc-txt span { font-size: clamp(10px, 1vw, 14px); letter-spacing: 4px; font-weight: 800; color: var(--cyan); margin-top: 4px; }
.pc-rank { position: absolute; right: 5%; top: 14%; height: 72%; aspect-ratio: 1; }
.pc-rank svg { width: 100%; height: 100%; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .6)); }
.pc-rank small { position: absolute; left: 0; right: 0; bottom: -2px; text-align: center; font-size: 13px; font-weight: 900; text-shadow: 0 1px 3px #000; }

/* ---------- SERVICE RECORD ---------- */
.sr-hero { animation: srIn .5s cubic-bezier(.2, 1, .3, 1) .05s both; }
@keyframes srIn { from { opacity: 0; transform: translateX(-30px); } }
.sr-xp { margin-top: 14px; }
.sr-xpl { display: flex; align-items: baseline; gap: 14px; font-size: 16px; font-weight: 800; letter-spacing: 2px; color: #cfd6e2; }
.sr-xpl b { font-size: 30px; color: #fff; font-style: italic; }
.sr-rank { color: var(--cyan); }
.sr-next { margin-left: auto; font-size: 14px; color: #8ea2bd; }
.sr-bar { height: 8px; margin-top: 6px; background: rgba(255, 255, 255, .08); transform: skewX(-20deg); overflow: hidden; }
.sr-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #1aa3c4, var(--cyan)); box-shadow: 0 0 12px var(--cyan); transition: width 1.2s cubic-bezier(.2, 1, .3, 1) .2s; }
.sr-xpn { margin-top: 6px; font-size: 13px; letter-spacing: 2px; color: #8ea2bd; font-weight: 700; }
.sr-xpn b { color: #fff; }
.sr-name { display: flex; gap: 6px; margin-top: 12px; }
.sr-name input { flex: 1; max-width: 260px; background: rgba(20, 28, 42, .9); border: 1px solid rgba(255, 255, 255, .15); color: #fff; font-family: var(--cond); font-size: 16px; font-weight: 800; padding: 6px 10px; }
.sr-name button { background: rgba(30, 40, 58, .9); border: 1px solid rgba(255, 255, 255, .15); color: #fff; font-family: var(--cond); font-weight: 800; padding: 6px 14px; cursor: pointer; }
.sr-name button:hover { border-color: var(--cyan); }
.sr-gauges { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 18px; }
.sr-gauge { position: relative; display: flex; flex-direction: column; align-items: center; padding: 10px 6px 8px; background: rgba(16, 22, 34, .75); border: 1px solid rgba(255, 255, 255, .08); animation: fadeup .45s both; }
.sr-gauge:nth-child(2) { animation-delay: .08s; } .sr-gauge:nth-child(3) { animation-delay: .16s; } .sr-gauge:nth-child(4) { animation-delay: .24s; }
.sr-gauge svg { width: 86px; height: 86px; transform: rotate(-90deg); }
.sr-gauge circle { fill: none; stroke-width: 7; }
.g-bg { stroke: rgba(255, 255, 255, .08); }
.g-fg { stroke: var(--c); stroke-linecap: round; filter: drop-shadow(0 0 4px var(--c)); stroke-dasharray: 264; stroke-dashoffset: 264; transition: stroke-dashoffset 1.3s cubic-bezier(.2, 1, .3, 1) .25s; }
.sr-gauge b { position: absolute; top: 38px; font-size: 24px; font-weight: 900; }
.sr-gauge small { margin-top: 6px; font-size: 11px; letter-spacing: 2px; color: #8ea2bd; font-weight: 800; }
.sr-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 10px; }
.sr-stat { display: flex; flex-direction: column; padding: 8px 12px; background: rgba(16, 22, 34, .7); border-left: 2px solid rgba(63, 224, 255, .35); animation: fadeup .4s .3s both; }
.sr-stat b { font-size: 24px; font-weight: 900; }
.sr-stat small { font-size: 11px; letter-spacing: 2px; color: #8ea2bd; font-weight: 800; }

/* ---------- CAREER TRACK ---------- */
.ct-top { display: flex; align-items: flex-end; justify-content: space-between; animation: fadeup .35s both; }
.ct-top > div:first-child { display: flex; flex-direction: column; line-height: 1; }
.ct-top small { font-size: 12px; letter-spacing: 5px; color: var(--cyan); font-weight: 800; }
.ct-top b { font-size: 34px; font-weight: 900; font-style: italic; }
.ct-top b span { font-size: 18px; color: #8ea2bd; }
.ct-ready { font-size: 15px; letter-spacing: 2px; font-weight: 800; color: #8ea2bd; }
.ct-ready b { color: #ff5a6a; font-size: 22px; }
.ct-scroll { position: relative; margin-top: 14px; overflow-x: auto; overflow-y: hidden; scroll-behavior: smooth; scrollbar-width: thin; scrollbar-color: rgba(63, 224, 255, .4) transparent; padding: 18px 0 16px; mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.ct-track { position: relative; display: flex; gap: 14px; padding: 0 40px; width: max-content; }
.ct-line { position: absolute; left: 40px; right: 40px; top: 74px; height: 4px; background: rgba(255, 255, 255, .08); }
.ct-line i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: linear-gradient(90deg, #1aa3c4, var(--cyan)); box-shadow: 0 0 12px var(--cyan); }
.ct-node { position: relative; width: 112px; display: flex; flex-direction: column; align-items: center; text-align: center; z-index: 1; }
.ct-lv { font-size: 13px; font-weight: 900; letter-spacing: 2px; color: #6f7f96; margin-bottom: 6px; }
.ct-box { position: relative; width: 96px; height: 96px; display: flex; align-items: center; justify-content: center; background: linear-gradient(180deg, rgba(22, 30, 46, .96), rgba(12, 16, 26, .96)); border: 2px solid rgba(255, 255, 255, .1); border-bottom: 3px solid var(--rc); transition: transform .2s, border-color .2s, box-shadow .2s; }
.ct-ico { opacity: .35; filter: grayscale(.8); transition: opacity .3s, filter .3s; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.ct-lock { position: absolute; right: 4px; top: 2px; font-style: normal; font-size: 13px; }
.ct-ok { position: absolute; right: 5px; top: 2px; font-style: normal; font-size: 16px; font-weight: 900; color: #7dff9a; display: none; }
.ct-name { margin-top: 6px; font-size: 13px; font-weight: 800; line-height: 1.1; color: #8ea2bd; min-height: 28px; }
.ct-kind { font-size: 10px; letter-spacing: 2px; color: #56657a; font-weight: 700; }
.ct-claim { margin-top: 6px; visibility: hidden; font-family: var(--cond); font-size: 14px; font-weight: 900; letter-spacing: 1px; color: #071018; background: var(--cyan); border: 0; padding: 4px 16px; cursor: pointer; clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%); }
.ct-claim:hover { background: #fff; }
.ct-node:hover .ct-box { transform: translateY(-4px); border-color: rgba(255, 255, 255, .3); }
.ct-node.reached .ct-lv { color: var(--cyan); }
.ct-node.reached .ct-box { border-color: rgba(63, 224, 255, .45); }
.ct-node.reached .ct-ico { opacity: 1; filter: none; }
.ct-node.reached .ct-lock { display: none; }
.ct-node.reached .ct-name { color: #fff; }
.ct-node.pop .ct-box { animation: ctPop .45s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes ctPop { 40% { transform: scale(1.18); box-shadow: 0 0 30px var(--cyan); } }
.ct-node.ready .ct-box { border-color: var(--rc); box-shadow: 0 0 22px color-mix(in srgb, var(--rc) 60%, transparent); animation: ctGlow 1.4s infinite; }
@keyframes ctGlow { 50% { box-shadow: 0 0 6px color-mix(in srgb, var(--rc) 40%, transparent); } }
.ct-node.ready .ct-claim { visibility: visible; animation: fadeup .3s both; }
.ct-node.claimed .ct-ico { opacity: .55; }
.ct-node.claimed .ct-ok { display: block; }
.ct-node.claimed .ct-claim { visibility: hidden; }
.ct-node.flip .ct-box { animation: ctFlip .6s cubic-bezier(.2, 1, .3, 1); }
@keyframes ctFlip { 0% { transform: rotateY(0); } 50% { transform: rotateY(90deg) scale(1.1); box-shadow: 0 0 40px var(--rc); } 100% { transform: rotateY(0); } }
.ct-pop { position: absolute; top: 40px; left: 50%; transform: translateX(-50%); font-size: 22px; font-weight: 900; font-style: italic; color: #ffd26a; text-shadow: 0 2px 6px #000; pointer-events: none; animation: ctPopTxt 1.2s ease-out forwards; white-space: nowrap; }
@keyframes ctPopTxt { 0% { opacity: 0; transform: translate(-50%, 10px) scale(.6); } 20% { opacity: 1; transform: translate(-50%, -10px) scale(1.1); } 100% { opacity: 0; transform: translate(-50%, -50px); } }
.ct-detail { display: flex; align-items: center; gap: 18px; margin-top: 10px; padding: 14px 18px; background: linear-gradient(90deg, rgba(16, 22, 34, .92), rgba(16, 22, 34, .4)); border-left: 3px solid var(--rc, var(--cyan)); min-height: 110px; }
.ct-detail.swap { animation: wtSwap .3s cubic-bezier(.2, 1, .3, 1) both; }
.ctd-ico { width: 150px; height: 90px; flex: none; display: flex; align-items: center; justify-content: center; }
.ctd-ico .rw-emb { width: 84px; height: 84px; } .ctd-ico .rw-card { width: 150px; } .ctd-ico .rw-gun { max-width: 150px; max-height: 80px; } .ctd-ico .rw-op { max-height: 90px; }
.ctd-ico .rw-coin, .ctd-ico .rw-shard { transform: scale(1.6); }
.ctd-txt { display: flex; flex-direction: column; line-height: 1.1; }
.ctd-txt small { font-size: 12px; letter-spacing: 3px; font-weight: 800; }
.ctd-txt b { font-size: 34px; font-weight: 900; font-style: italic; }
.ctd-txt span { font-size: 13px; letter-spacing: 2px; color: #8ea2bd; font-weight: 700; }

/* iconos de premio */
.rw-coin { display: block; width: 46px; height: 46px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff2b0, #e9a91f 55%, #9a6a0a); box-shadow: 0 4px 10px rgba(0, 0, 0, .5), inset 0 0 0 3px rgba(255, 255, 255, .25); }
.rw-shard { display: block; width: 44px; height: 44px; background: linear-gradient(135deg, #e9f2ff, #8aa0c0 60%, #56657a); clip-path: polygon(50% 0, 100% 38%, 80% 100%, 20% 100%, 0 38%); filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .5)); }
.rw-emb { width: 70px; height: 70px; } .rw-emb svg { width: 100%; height: 100%; }
.rw-card { width: 88px; aspect-ratio: 4 / 1; overflow: hidden; border: 1px solid rgba(255, 255, 255, .25); } .rw-card svg { width: 100%; height: 100%; display: block; }
.rw-gun { max-width: 88px; max-height: 60px; filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .6)); }
.rw-op { max-height: 84px; }

/* ---------- IDENTITY ---------- */
.id-preview { max-width: 560px; animation: srIn .4s both; }
.id-preview.equip .pcard { animation: idEquip .5s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes idEquip { 30% { transform: scale(1.04); filter: brightness(1.4); } }
.id-cols { display: grid; grid-template-columns: 1fr 1.3fr; gap: 20px; margin-top: 16px; }
.id-cols h4 { font-size: 16px; letter-spacing: 3px; font-weight: 900; margin-bottom: 8px; color: #cfd6e2; }
.id-cols h4 span { color: var(--cyan); }
.id-emblems { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.id-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.id-emb, .id-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 6px 6px; background: rgba(16, 22, 34, .8); border: 1px solid rgba(255, 255, 255, .08); border-bottom: 2px solid var(--rc); color: #cfd6e2; font-family: var(--cond); cursor: pointer; transition: transform .15s, border-color .15s; }
.id-emb svg { width: 56px; height: 56px; }
.id-card svg { width: 100%; aspect-ratio: 4 / 1; height: auto; display: block; }
.id-emb small, .id-card small { font-size: 11px; letter-spacing: 1px; font-weight: 800; }
.id-emb:hover, .id-card:hover { transform: translateY(-3px); border-color: rgba(255, 255, 255, .35); }
.id-emb.on, .id-card.on { border-color: var(--cyan); box-shadow: 0 0 14px rgba(63, 224, 255, .35); }
.id-emb.on::after, .id-card.on::after { content: 'EQUIPPED'; position: absolute; top: 3px; left: 4px; font-size: 9px; letter-spacing: 1px; font-weight: 900; color: #071018; background: var(--cyan); padding: 0 4px; }
.id-emb.locked svg, .id-card.locked svg { filter: grayscale(1) brightness(.35); }
.id-emb.locked small, .id-card.locked small { color: #ff8a8a; }
.id-emb.shake, .id-card.shake { animation: shake .35s; }

/* identidad en otras pantallas */
.tt-emb { display: inline-block; width: 30px; height: 30px; align-self: center; }
.tt-emb svg { width: 100%; height: 100%; }
.mm-emb { width: 20px; height: 20px; flex: none; } .mm-emb svg { width: 100%; height: 100%; display: block; }

@media (max-height: 620px) {
  .sr-body { top: calc(3vh + 54px); }
  .sr-gauge svg { width: 64px; height: 64px; } .sr-gauge b { top: 30px; font-size: 18px; }
  .sr-stat b { font-size: 18px; } .sr-stat { padding: 5px 10px; }
  .ct-box { width: 80px; height: 80px; } .ct-node { width: 94px; } .ct-line { top: 66px; }
  .ct-detail { min-height: 80px; padding: 8px 14px; } .ctd-txt b { font-size: 24px; }
}