* { margin: 0; padding: 0; box-sizing: border-box; }
@font-face {
  font-family: "KS Noto";
  src: url("../assets/fonts/NotoSansSC-subset.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
html, body { width: 100%; height: 100%; overflow: hidden; background: #0a0a12; }
body { font-family: "KS Noto", "PingFang SC", "Microsoft YaHei", sans-serif; color: #e8ecf4;
  -webkit-user-select: none; user-select: none; }
#app { position: fixed; inset: 0; }
#game { position: absolute; inset: 0; width: 100%; height: 100%; display: block; background: #0a0a12; }
#ui { position: absolute; inset: 0; pointer-events: none; }
#ui > * { pointer-events: auto; }

/* ---------- screens ---------- */
.screen { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center;
  justify-content: center; background: radial-gradient(ellipse at 50% 40%, rgba(30,40,70,.92), rgba(8,10,18,.97)); z-index: 10; }
.title { font-size: 64px; font-weight: 900; letter-spacing: 4px;
  background: linear-gradient(180deg, #6ec1ff, #1e88e5 60%, #0d5ec4);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  text-shadow: 0 0 40px rgba(30,136,229,.4); margin-bottom: 8px; }
.subtitle { font-size: 18px; color: #8fa3c8; margin-bottom: 36px; letter-spacing: 6px; }
.btn { display: inline-block; padding: 14px 42px; margin: 8px; font-size: 20px; font-weight: 700;
  color: #eaf3ff; background: linear-gradient(180deg, #2a9df4, #1565c0); border: 2px solid #6ec1ff;
  border-radius: 12px; cursor: pointer; transition: transform .08s, box-shadow .2s;
  min-width: 280px; text-align: center; }
.btn.ghost { min-width: 280px; }
.btn.small { min-width: 0; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 6px 24px rgba(30,136,229,.5); }
.btn.ghost { background: rgba(40,55,90,.4); border-color: #3d517a; }
.btn.small { padding: 8px 22px; font-size: 15px; }

/* ---------- card grids ---------- */
.grid { display: flex; flex-wrap: wrap; gap: 18px; justify-content: center; max-width: 1200px; }
.card { width: 128px; padding: 14px 8px 10px; background: rgba(28,38,62,.85); border: 2px solid #33436b;
  border-radius: 14px; text-align: center; cursor: pointer; transition: all .12s; }
.card:hover { border-color: #6ec1ff; transform: translateY(-4px) scale(1.04); background: rgba(38,52,84,.95); }
.card.sel { border-color: #ffd24a; box-shadow: 0 0 24px rgba(255,210,74,.35); }
.card img { width: 84px; height: 84px; image-rendering: auto; }
.card .nm { font-size: 16px; font-weight: 700; margin-top: 6px; }
.card .ds { font-size: 11px; color: #9db1d4; margin-top: 4px; line-height: 1.4; height: 64px; overflow-y: auto; }
.card.lvl { width: 210px; }
.card.lvl .ds { height: 34px; }
.card.lvl .tags { height: 46px; overflow-y: auto; margin-top: 2px; }
.card.lvl img { width: 64px; height: 64px; }
/* thin scrollbars for fixed-size boxes */
.card .ds::-webkit-scrollbar, .card.lvl .tags::-webkit-scrollbar, .char-detail::-webkit-scrollbar,
.skillcard .ds::-webkit-scrollbar { width: 5px; }
.card .ds::-webkit-scrollbar-thumb, .card.lvl .tags::-webkit-scrollbar-thumb, .char-detail::-webkit-scrollbar-thumb,
.skillcard .ds::-webkit-scrollbar-thumb { background: #3d517a; border-radius: 3px; }
.lvl-preview { display: flex; align-items: flex-end; justify-content: center; gap: 2px;
  border-radius: 10px; padding: 8px 6px 4px; margin-bottom: 4px; height: 64px; overflow: hidden; }
.lvl-preview .pv-m { width: 40px; height: 40px; object-fit: contain; }
.lvl-preview .pv-m:last-child { width: 52px; height: 52px; }
.card .tag { display: inline-block; font-size: 10px; padding: 1px 8px; border-radius: 8px; background: #1e88e5; margin: 2px; }
h2.pick { font-size: 30px; margin-bottom: 20px; color: #cfe3ff; letter-spacing: 3px; }

/* ---------- level-up overlay ---------- */
#levelup { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center;
  justify-content: center; background: rgba(6,8,14,.72); z-index: 20; backdrop-filter: blur(3px); }
#levelup .grid { max-width: 1100px; }
.skillcard { width: 240px; padding: 18px 14px; border-radius: 14px; text-align: center; cursor: pointer;
  background: linear-gradient(180deg, rgba(34,46,76,.96), rgba(20,28,48,.96)); border: 2px solid #44567f;
  transition: all .12s; }
.skillcard:hover { transform: translateY(-6px) scale(1.05); }
.skillcard.r0 { border-color: #9aa7bd; } .skillcard.r1 { border-color: #4da3ff; }
.skillcard.r2 { border-color: #b46bff; } .skillcard.r3 { border-color: #ffd24a; box-shadow: 0 0 26px rgba(255,210,74,.25); }
.skillcard .ic { font-size: 44px; line-height: 1; }
.skillcard .nm { font-size: 18px; font-weight: 800; margin: 10px 0 6px; height: 44px; overflow: hidden; }
.skillcard .rarity { font-size: 11px; letter-spacing: 2px; opacity: .8; }
.skillcard .ds { font-size: 13px; color: #b9c8e2; line-height: 1.5; margin-top: 8px; height: 66px; overflow-y: auto; }
.skillcard .own { font-size: 11px; color: #ffd24a; margin-top: 6px; }
.skillcard.owned { opacity: .92; }
.skillcard .ownbadge { display: inline-block; font-size: 12px; font-weight: 800; color: #ffd24a;
  border: 1px solid #ffd24a; border-radius: 8px; padding: 2px 10px; margin-top: 8px; }
.skillcard .newbadge { display: inline-block; font-size: 12px; font-weight: 800; color: #7ef0b2;
  border: 1px solid #3fd68f; border-radius: 8px; padding: 2px 10px; margin-top: 8px; letter-spacing: 1px; }
#reroll { margin-top: 22px; }

/* ---------- HUD ---------- */
#hud { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
#hud .bar { position: absolute; height: 20px; border-radius: 10px; background: rgba(10,14,24,.7);
  border: 1px solid rgba(120,150,200,.4); overflow: hidden; }
#hpbar { left: 20px; top: 18px; width: 260px; }
#hpbar .fill { height: 100%; background: linear-gradient(90deg, #ff5a6e, #ff8a5a); width: 100%; transition: width .15s; }
#hpbar .txt, #xpbar .txt { position: absolute; inset: 0; text-align: center; font-size: 12px; font-weight: 700; line-height: 20px; color: #fff; text-shadow: 0 1px 2px #000; }
#xpbar { left: 20px; top: 44px; width: 260px; height: 14px; }
#xpbar .fill { height: 100%; background: linear-gradient(90deg, #3fd68f, #7ef0b2); width: 0%; }
#xpbar .txt { font-size: 10px; line-height: 14px; }
#lvtext { position: absolute; left: 292px; top: 40px; font-size: 14px; font-weight: 800; color: #7ef0b2; }
#ammo { position: absolute; left: 20px; top: 68px; font-size: 15px; font-weight: 700; color: #ffd24a; text-shadow: 0 1px 3px #000; }
#timer { position: absolute; top: 16px; left: 50%; transform: translateX(-50%); font-size: 34px; font-weight: 900;
  color: #eaf3ff; text-shadow: 0 0 18px rgba(110,193,255,.6); letter-spacing: 2px; }
#score { position: absolute; top: 60px; left: 50%; transform: translateX(-50%); font-size: 16px; color: #ffd24a; font-weight: 700; }
#combo { position: absolute; top: 82px; left: 50%; transform: translateX(-50%); font-size: 14px; color: #ff9a5a; font-weight: 800; }
#bombs { position: absolute; right: 20px; top: 18px; font-size: 16px; font-weight: 700; color: #ffb2c1; }
#special { position: absolute; right: 20px; top: 44px; font-size: 14px; font-weight: 700; color: #9ad1ff; }
#bossbar { position: absolute; left: 50%; bottom: 46px; transform: translateX(-50%); width: 46%; height: 22px; display: none; }
#bossbar .fill { height: 100%; background: linear-gradient(90deg, #b44dff, #ff4d88); width: 100%; }
#bossbar .txt { position: absolute; inset: 0; text-align: center; font-size: 12px; font-weight: 800; line-height: 22px; text-shadow: 0 1px 2px #000; }
#skillicons { position: absolute; left: 20px; bottom: 16px; display: flex; flex-wrap: wrap; gap: 4px; max-width: 420px; pointer-events: auto; }
#skillicons .si { width: 30px; height: 30px; border-radius: 6px; background: rgba(30,40,66,.8); border: 1px solid #44567f;
  font-size: 17px; text-align: center; line-height: 28px; }
#toast { position: absolute; left: 50%; top: 130px; transform: translateX(-50%); font-size: 20px; font-weight: 800;
  color: #ffe9a8; text-shadow: 0 2px 8px #000; opacity: 0; transition: opacity .3s; }

/* ---------- game over / results ---------- */
.result { background: rgba(10,12,20,.94); border: 2px solid #33436b; border-radius: 18px; padding: 34px 46px; text-align: center; max-width: 640px; }
.result h1 { font-size: 40px; margin-bottom: 6px; }
.result h1.win { color: #7ef0b2; } .result h1.lose { color: #ff6e7e; }
.result .breakdown { text-align: left; margin: 18px auto; font-size: 14px; color: #b9c8e2; line-height: 1.9; max-width: 420px; }
.result .breakdown b { color: #ffd24a; float: right; }
.result .total { font-size: 26px; color: #ffd24a; font-weight: 900; margin: 12px 0; }
#nameInput { font-size: 18px; padding: 10px 16px; border-radius: 10px; border: 2px solid #44567f;
  background: #141c30; color: #eaf3ff; text-align: center; width: 260px; outline: none; }
#nameInput:focus { border-color: #6ec1ff; }

/* ---------- leaderboard ---------- */
#leaderboard { max-height: 46vh; overflow-y: auto; margin: 14px 0; min-width: 460px; }
#leaderboard table { width: 100%; border-collapse: collapse; font-size: 14px; }
#leaderboard th { color: #8fa3c8; font-size: 12px; padding: 6px 10px; border-bottom: 1px solid #33436b; }
#leaderboard td { padding: 5px 10px; border-bottom: 1px solid rgba(51,67,107,.4); }
#leaderboard tr.me td { color: #ffd24a; font-weight: 800; }
#leaderboard td.r1 { color: #ffd24a; font-weight: 900; }
#leaderboard td.r2 { color: #d8e2f2; font-weight: 800; }
#leaderboard td.r3 { color: #ffab7a; font-weight: 800; }

.settings-row { margin: 10px; font-size: 16px; display: flex; align-items: center; gap: 10px; }
.settings-row input[type=range] { width: 180px; }
.kbd { display: inline-block; padding: 1px 8px; border: 1px solid #55688f; border-radius: 6px; background: #1a2338; font-size: 12px; margin: 0 2px; }
.help { font-size: 14px; color: #9db1d4; line-height: 2.2; text-align: center; }
::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-thumb { background: #33436b; border-radius: 4px; }

/* ---------- pause panel ---------- */
.pause-panel { width: min(1060px, 94vw); max-height: 92vh; overflow-y: auto; background: rgba(10,14,24,.96);
  border: 2px solid #33436b; border-radius: 18px; padding: 26px 34px; }
.pause-panel h2.pick { font-size: 24px; margin-bottom: 14px; text-align: center; }
.pause-cols { display: flex; gap: 28px; align-items: flex-start; }
.pause-col { flex: 1; min-width: 0; }
.pause-col h3 { font-size: 15px; color: #8fa3c8; margin: 10px 0 8px; letter-spacing: 2px; }
.pause-sec { margin-bottom: 10px; background: rgba(24,32,54,.6); border-radius: 10px; padding: 8px 12px; }
.pause-sec-title { font-size: 13px; font-weight: 800; color: #cfe3ff; margin-bottom: 6px; }
.pause-row { display: flex; justify-content: space-between; font-size: 13px; padding: 2px 0; color: #9db1d4; }
.pause-row b { color: #ffd24a; font-weight: 700; text-align: right; }
.pause-skills { display: flex; flex-direction: column; gap: 5px; max-height: 46vh; overflow-y: auto; }
.pause-skill { display: flex; align-items: center; gap: 8px; background: rgba(24,32,54,.6); border-radius: 8px;
  padding: 5px 10px; border-left: 3px solid #9aa7bd; font-size: 13px; }
.pause-skill.r1 { border-left-color: #4da3ff; } .pause-skill.r2 { border-left-color: #b46bff; }
.pause-skill.r3 { border-left-color: #ffd24a; }
.pause-skill .ic { font-size: 17px; }
.pause-skill .nm { font-weight: 700; white-space: nowrap; }
.pause-skill .ds { color: #8fa3c8; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pause-empty { color: #5a6b8c; font-size: 13px; padding: 10px; }
.pause-btns { display: flex; justify-content: center; gap: 10px; margin: 16px 0 10px; }
.pause-panel .help { text-align: center; font-size: 12px; }

/* ---------- music box ---------- */
.mb-now { display: flex; align-items: center; gap: 16px; background: rgba(24,32,54,.8);
  border: 2px solid #33436b; border-radius: 14px; padding: 16px 22px; width: min(560px, 90vw); }
.mb-disc { font-size: 34px; width: 56px; height: 56px; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle, #2a9df4 0 30%, #1565c0 31% 60%, #0d3a6e 61%); border-radius: 50%; }
.mb-disc.spin { animation: mbspin 2.2s linear infinite; }
@keyframes mbspin { from { transform: rotate(0); } to { transform: rotate(360deg); } }
.mb-nowinfo { flex: 1; }
.mb-name { font-size: 17px; font-weight: 800; color: #cfe3ff; margin-bottom: 4px; }
.mb-desc { font-size: 12px; color: #8fa3c8; line-height: 1.5; margin-bottom: 8px; min-height: 18px; }
.mb-prog { height: 8px; background: rgba(10,14,24,.8); border-radius: 4px; overflow: hidden; }
.mb-progfill { height: 100%; width: 0%; background: linear-gradient(90deg, #2a9df4, #6ec1ff); transition: width .25s linear; }
.mb-progtxt { font-size: 11px; color: #8fa3c8; margin-top: 4px; }
.mb-controls { display: flex; gap: 8px; margin: 14px 0; }
.mb-list { width: min(560px, 90vw); max-height: 42vh; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }
.mb-row { display: flex; align-items: center; gap: 10px; padding: 8px 14px; background: rgba(24,32,54,.6);
  border-radius: 8px; cursor: pointer; border-left: 3px solid transparent; transition: all .1s; font-size: 14px; }
.mb-row:hover { background: rgba(38,52,84,.9); }
.mb-row.playing { border-left-color: #ffd24a; background: rgba(50,60,90,.9); }
.mb-row.playing .mb-title { color: #ffd24a; }
.mb-idx { color: #5a6b8c; font-size: 12px; }
.mb-title { font-weight: 700; flex: 1; }
.mb-kind { color: #8fa3c8; font-size: 11px; }
.mb-dur { color: #5a6b8c; font-size: 12px; }

/* ---------- language selector & pause settings ---------- */
.langsel { font-family: inherit; font-size: 15px; padding: 7px 12px; border-radius: 8px;
  background: #141c30; color: #eaf3ff; border: 2px solid #44567f; outline: none; cursor: pointer; }
.langsel:focus { border-color: #6ec1ff; }
.pause-settings { display: flex; justify-content: center; gap: 26px; flex-wrap: wrap; margin: 14px 0 4px;
  padding: 12px; background: rgba(24,32,54,.5); border-radius: 10px; }
.pause-set-item { display: flex; align-items: center; gap: 10px; font-size: 14px; color: #9db1d4; }
.pause-set-item input[type=range] { width: 140px; }

/* ---------- RTL adaptations ---------- */
body.rtl { direction: rtl; }
body.rtl .title, body.rtl .subtitle { letter-spacing: normal; }
body.rtl .subtitle { line-height: 1.8; }
body.rtl .pause-row, body.rtl .settings-row, body.rtl .pause-set-item,
body.rtl .mb-row, body.rtl .pause-skill { direction: rtl; }
body.rtl .pause-skill { border-left: none; border-right: 3px solid #9aa7bd; }
body.rtl .pause-skill.r1 { border-right-color: #4da3ff; } body.rtl .pause-skill.r2 { border-right-color: #b46bff; }
body.rtl .pause-skill.r3 { border-right-color: #ffd24a; }
body.rtl .mb-row { border-left: none; border-right: 3px solid transparent; }
body.rtl .mb-row.playing { border-right-color: #ffd24a; }
body.rtl .result .breakdown b { float: left; }
body.rtl #hpbar, body.rtl #xpbar, body.rtl #ammo, body.rtl #skillicons { left: auto; right: 20px; }
body.rtl #lvtext { left: auto; right: 292px; }
body.rtl #bombs, body.rtl #special { right: auto; left: 20px; }
body.rtl table { direction: rtl; }

.ver-badge { position: absolute; left: 14px; bottom: 12px; font-size: 12px; color: #5a6b8c;
  letter-spacing: 1px; pointer-events: none; }

/* ---------- character detail ---------- */
.char-detail { display: flex; align-items: center; gap: 18px; margin-top: 22px; padding: 14px 22px;
  background: rgba(24,32,54,.75); border: 1px solid #33436b; border-radius: 14px;
  width: min(920px, 92vw); height: 230px; overflow-y: auto; }
.char-detail img { width: 72px; height: 72px; flex: none; }
.cd-body { flex: 1; text-align: left; }
body.rtl .cd-body { text-align: right; }
.cd-name { font-size: 18px; font-weight: 800; color: #cfe3ff; }
.cd-hp { margin-left: 10px; }
.cd-desc { font-size: 12px; color: #8fa3c8; margin: 4px 0 8px; }
.cd-stats { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 12px; color: #9db1d4; margin-bottom: 8px; }
.cd-stats span { display: inline-flex; align-items: center; gap: 5px; }
.cd-stats b { color: #ffd24a; }
.cd-kit { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.cd-kit b { color: #ffd24a; margin-right: 8px; }
.cd-kit span { color: #b9c8e2; }
.char-kit { display: flex; flex-direction: column; gap: 6px; }
.ck-row { font-size: 13px; }
.ck-row b { color: #ffd24a; display: block; }
.ck-row span { color: #9db1d4; font-size: 12px; }
.lvl-intel { min-height: 120px; }
.lvl-intel-rows { display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.lvl-intel-rows b { color: #ffd24a; margin-right: 8px; }
.lvl-intel-rows span { color: #b9c8e2; }
.intel-note { color: #7ef0b2; font-size: 12px; margin-top: 4px; }

/* ---------- leaderboard details ---------- */
.lb-row { cursor: pointer; }
.lb-row:hover td { background: rgba(50,65,100,.35); }
.lb-detail td { color: #8fa3c8; font-size: 12px; padding: 4px 12px 10px !important; background: rgba(18,24,40,.6); }

/* ---------- glossary term tooltips ---------- */
.term { border-bottom: 1px dashed #6ec1ff; cursor: help; }

/* ---------- leaderboard build icons ---------- */
.lb-build { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.lb-sk { display: inline-flex; width: 24px; height: 24px; align-items: center; justify-content: center;
  background: rgba(40,55,90,.6); border: 1px solid #44567f; border-radius: 6px; }
.lb-sk.tome { border-color: #ffd24a; }
.lb-sk-sep { color: #44567f; align-self: center; }
.lb-sk { cursor: pointer; }
.lb-sk:hover { border-color: #6ec1ff; background: rgba(60,80,130,.7); }
.lb-sk-detail { margin-top: 8px; padding: 10px 14px; background: rgba(30,42,70,.8); border-radius: 10px;
  border-left: 3px solid #6ec1ff; font-size: 13px; }
.lb-sk-detail b { color: #ffd24a; margin-right: 8px; }
.lb-sk-detail span { color: #8fa3c8; font-size: 11px; }
.lb-sk-detail p { color: #b9c8e2; margin-top: 4px; line-height: 1.5; }

/* ---------- replay theater & playback chrome ---------- */
.rp-row { display: flex; align-items: center; gap: 10px; width: min(680px, 92vw); padding: 9px 14px;
  background: rgba(24,32,54,.6); border-radius: 8px; cursor: pointer; font-size: 14px; }
.rp-row .mb-kind { flex: 1; color: #8fa3c8; font-size: 12px; }
.rp-ver { font-size: 11px; color: #ff8a8a; }
.rp-ver.ok { color: #7ef0b2; }
.lb-play { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px;
  border-radius: 50%; background: #1e88e5; color: #fff; cursor: pointer; }
.lb-play:hover { background: #42a5f5; transform: scale(1.12); }
#pbchrome { position: absolute; right: 16px; bottom: 14px; display: flex; gap: 14px; align-items: center;
  background: rgba(10,14,24,.75); border: 1px solid #33436b; border-radius: 10px; padding: 7px 14px;
  font-size: 13px; color: #cfe3ff; z-index: 8; }
#pbchrome .pb-tag { color: #ffd24a; font-weight: 800; letter-spacing: 1px; }
#pbchrome .pb-hint { color: #8fa3c8; font-size: 11px; }
body.rtl #pbchrome { right: auto; left: 16px; }

/* anti-cheat verification warning on the replay-end screen */
.cheat-warn { margin: 12px 0; padding: 10px 14px; border: 1px solid #ff8a5a; border-left: 4px solid #ff8a5a;
  border-radius: 8px; background: rgba(255,138,90,.12); color: #ffb59a; font-size: 13px; line-height: 1.5; }

/* ---------- codex (in-game encyclopedia) ---------- */
.codex-panel { width: min(1060px, 94vw); max-height: 88vh; display: flex; flex-direction: column; }
.codex-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.codex-tabs .active { border-color: #6ec1ff; color: #bfe3ff; background: rgba(60,100,160,.35); }
.codex-body { overflow-y: auto; flex: 1; min-height: 0; padding-right: 4px; }
.codex-search { width: 100%; padding: 8px 12px; margin-bottom: 10px; background: rgba(20,28,48,.8); color: #dce6f7;
  border: 1px solid #44567f; border-radius: 8px; font-size: 14px; outline: none; }
.codex-search:focus { border-color: #6ec1ff; }
.codex-tag { margin: 12px 0 6px; color: #8fa3c8; font-size: 13px; font-weight: 600; border-bottom: 1px solid rgba(80,100,150,.3); padding-bottom: 3px; }
.codex-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 6px; }
.codex-card { display: flex; gap: 8px; align-items: flex-start; padding: 8px 10px; border-radius: 8px;
  background: rgba(24,32,54,.65); border: 1px solid rgba(70,90,130,.35); border-left-width: 3px; font-size: 13px; }
.codex-card .cx-ic { flex: 0 0 auto; margin-top: 2px; }
.codex-card .cx-main { flex: 1; min-width: 0; }
.codex-card .cx-main b { color: #e8f0ff; margin-right: 6px; }
.codex-card .cx-main p { color: #a9badb; margin: 3px 0 0; line-height: 1.45; font-size: 12px; }
.codex-card .cx-rar { font-size: 11px; color: #8fa3c8; }
.codex-card .cx-state { flex: 0 0 auto; font-size: 11px; white-space: nowrap; }
.codex-card .cx-owned { color: #7ef0b2; font-weight: 700; }
.codex-card .cx-avail { color: #6ec1ff; }
.codex-card .cx-lock { color: #66748f; }
.codex-card:has(.cx-lock) { opacity: .62; }
.codex-card .cx-sprite { width: 40px; height: 40px; object-fit: contain; image-rendering: pixelated; flex: 0 0 auto; }
.codex-card .cx-kit { font-size: 12px; color: #a9badb; }
.codex-card .cx-elite { color: #ffd24a; font-size: 11px; margin-left: 6px; }
.codex-card .cx-boss { color: #ff8a8a; font-size: 11px; margin-left: 6px; }
.codex-card.mon.boss { border-left-color: #ff8a8a; }
.codex-card .cx-stats { font-size: 11px; color: #8fa3c8; }
.codex-gloss { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 6px; }
.codex-card.gloss { display: block; }
.codex-card.gloss b { color: #ffd24a; }

/* tome benefit/cost clause coloring */
.tome-pro { color: #7ef0b2; }
.tome-con { color: #ff8a8a; }
/* conditional skill icon activation indicator */
#skillicons .si { opacity: 0.55; transition: opacity 0.15s, border-color 0.15s, box-shadow 0.15s; }
#skillicons .si.always { opacity: 0.9; }
#skillicons .si.active { opacity: 1; border-color: #7ef0b2; box-shadow: 0 0 6px rgba(126,240,178,0.55); }

/* skill icon hover tooltip */
.si-tip { position: fixed; z-index: 90; max-width: 280px; background: rgba(16,22,40,.96); border: 1px solid #44567f;
  border-radius: 8px; padding: 8px 10px; pointer-events: none; box-shadow: 0 4px 16px rgba(0,0,0,.5); }
.si-tip .si-tip-name { font-weight: 700; color: #eaf3ff; display: flex; align-items: center; gap: 6px; }
.si-tip .si-tip-rarity { font-size: 11px; margin-top: 2px; }
.si-tip .si-tip-rarity.r0 { color: #b9c8e2; } .si-tip .si-tip-rarity.r1 { color: #7ec8ff; }
.si-tip .si-tip-rarity.r2 { color: #c89aff; } .si-tip .si-tip-rarity.r3 { color: #ffd24a; }
.si-tip .si-tip-desc { font-size: 12px; color: #b9c8e2; line-height: 1.5; margin-top: 4px; }
/* playback pick feed */
#pbfeed { position: absolute; right: 20px; top: 88px; display: flex; flex-direction: column; gap: 4px; align-items: flex-end; z-index: 12; pointer-events: none; }
#pbfeed .pbfeed-row { background: rgba(16,22,40,.88); border: 1px solid #44567f; border-radius: 6px;
  padding: 3px 9px; font-size: 12px; color: #d8e4ff; display: flex; align-items: center; gap: 6px;
  opacity: 1; transition: opacity 0.6s; }
#pbfeed .pbfeed-row b { color: #7ef0b2; font-weight: 700; }
#pbfeed .pbfeed-row.fade { opacity: 0; }
body.rtl #pbfeed { right: auto; left: 20px; }
/* playback paused state */
#pbchrome.paused { outline: 1px solid #ffd24a; outline-offset: 4px; border-radius: 6px; }
#pbchrome .pb-paused { color: #ffd24a; font-weight: 700; display: inline-flex; align-items: center; gap: 4px; }

/* pinnable term windows */
#pins { position: fixed; inset: 0; pointer-events: none; z-index: 1000; }
.pin { position: fixed; width: 270px; background: rgba(12,18,32,.98); border: 1px solid #44567f;
  border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.6); pointer-events: auto; }
.pin .pin-head { display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 5px 10px; background: rgba(40,56,96,.6); border-bottom: 1px solid #44567f;
  border-radius: 8px 8px 0 0; cursor: grab; user-select: none; touch-action: none; }
.pin .pin-head:active { cursor: grabbing; }
.pin .pin-title { font-weight: 700; color: #9ad1ff; font-size: 13px; }
.pin .pin-x { background: none; border: none; color: #8fa3c8; font-size: 16px; line-height: 1;
  cursor: pointer; padding: 0 2px; }
.pin .pin-x:hover { color: #ff8a8a; }
.pin .pin-body { padding: 8px 11px; color: #cfe3ff; font-size: 12px; line-height: 1.55;
  max-height: 220px; overflow-y: auto; }
/* transient preview state: identical frame & position to a pinned window,
   just non-interactive (no drag, no close, ignores the pointer) */
.pin.transient { pointer-events: none; }
.pin.transient .pin-head { cursor: default; }

/* rarity colors on every skill card (codex, leaderboard icons, lb detail) */
.codex-card.r0 { border-left-color: #9aa7bd; } .codex-card.r1 { border-left-color: #4da3ff; }
.codex-card.r2 { border-left-color: #b46bff; } .codex-card.r3 { border-left-color: #ffd24a; box-shadow: 0 0 18px rgba(255,210,74,.18); }
.codex-card.r0 .cx-rar { color: #b9c8e2; } .codex-card.r1 .cx-rar { color: #7ec8ff; }
.codex-card.r2 .cx-rar { color: #c89aff; } .codex-card.r3 .cx-rar { color: #ffd24a; }
body.rtl .codex-card { border-left-width: 1px; border-right-width: 3px; }
body.rtl .codex-card.r0 { border-right-color: #9aa7bd; } body.rtl .codex-card.r1 { border-right-color: #4da3ff; }
body.rtl .codex-card.r2 { border-right-color: #b46bff; } body.rtl .codex-card.r3 { border-right-color: #ffd24a; }
.lb-sk.r0 { border-color: #9aa7bd; } .lb-sk.r1 { border-color: #4da3ff; }
.lb-sk.r2 { border-color: #b46bff; } .lb-sk.r3 { border-color: #ffd24a; }
.cx-rar.r0 { color: #b9c8e2; } .cx-rar.r1 { color: #7ec8ff; }
.cx-rar.r2 { color: #c89aff; } .cx-rar.r3 { color: #ffd24a; }