/* Page 39 · THE KILLS TAB. Page chrome from 38_fin.css; inside the phones, the Dressing Room (A) pieces from page 24
   (re-declared here: page 24 keeps them inline), plus the KILLS tab's own parts. Inside a phone, 1px = 1 canvas unit. */

/* ================================================================== hero */
.kt-hero .htitle__b { font-size: clamp(56px, 7.4vw, 108px); }
.ktrules { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 18px; }
.ktrule { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px 7px 7px; font: 400 14.5px / 1 var(--f-display); letter-spacing: 0.04em; color: var(--ink); border: 3px solid var(--ink); border-radius: 12px; box-shadow: 2px 4px 0 var(--ink); transform: rotate(-1deg); }
.ktrule:nth-child(even) { transform: rotate(1deg); }
.ktrule i { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; background: #fff; border: 2px solid var(--ink); font: 400 14px / 1 var(--f-display); font-style: normal; }
.ktrule--g { background: linear-gradient(180deg, #8DF7B2, var(--green)); }
.ktrule--p { background: linear-gradient(180deg, #FFB0D6, var(--hot)); }
.ktrule--y { background: linear-gradient(180deg, var(--yellow-hi), var(--yellow)); }
.ktrule--c { background: linear-gradient(180deg, #A6F6FF, var(--sky)); }
.kt .said { margin-top: 4px; }

/* the WHAT PLAYS machine */
.machine { padding: 18px; display: grid; gap: 12px; }
.machine__t { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.machine__t b { font: 400 24px / 1 var(--f-display); letter-spacing: 0.03em; color: var(--yellow); -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; }
.machine__t span { font: 800 11px / 1 var(--f-body); letter-spacing: 0.12em; color: var(--cream-3); }
.mlane { display: grid; grid-template-columns: 112px minmax(0, 1fr) 46px minmax(0, 150px); gap: 10px; align-items: center; padding: 10px; border-radius: 16px; background: rgba(0, 0, 0, 0.25); border: 2px solid rgba(255, 246, 224, 0.08); }
.mlane__w { display: grid; justify-items: center; gap: 3px; }
.mlane__w b { font: 400 13px / 1 var(--f-display); letter-spacing: 0.04em; color: var(--cream); }
.mlane__w small { font: 800 9.5px / 1.1 var(--f-body); letter-spacing: 0.08em; color: var(--cream-3); text-align: center; }
.mlane__ks { display: flex; flex-wrap: wrap; gap: 5px; }
.mk { display: inline-flex; align-items: center; gap: 5px; padding: 5px 8px 4px 5px; font: 400 12.5px / 1 var(--f-display); letter-spacing: 0.03em; color: var(--cream-2); background: #2A2148; border: 2px solid var(--ink); border-radius: 8px; transition: transform 0.2s var(--spring), background 0.2s; }
.mk i { width: 14px; height: 14px; border-radius: 4px; border: 2px solid var(--ink); background: #3A3060; display: grid; place-items: center; font: 400 10px / 1 var(--f-display); font-style: normal; color: var(--ink); }
.mk.is-on i { background: var(--green); }
.mk.is-on i::after { content: "\2713"; }
.mk.is-off { opacity: 0.45; text-decoration: line-through; text-decoration-thickness: 2px; }
.mk.is-gen { background: #3B2D6E; }
.mk.is-hit { background: var(--yellow); color: var(--ink); transform: scale(1.12) rotate(-3deg); }
.mlane__dice { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; background: #fff; border: 3px solid var(--ink); box-shadow: 2px 3px 0 var(--ink); }
.mlane__dice svg { width: 30px; height: 30px; }
.mlane__dice.is-roll { animation: dice 0.5s var(--out); }
@keyframes dice { 0% { transform: rotate(0) scale(1); } 40% { transform: rotate(200deg) scale(1.2); } 100% { transform: rotate(360deg) scale(1); } }
.mlane__out { display: grid; gap: 3px; justify-items: start; }
.mlane__out small { font: 800 9.5px / 1 var(--f-body); letter-spacing: 0.1em; color: var(--cream-3); }
.mlane__out b { font: 400 17px / 1 var(--f-display); letter-spacing: 0.03em; color: #fff; -webkit-text-stroke: 3.5px var(--ink); paint-order: stroke fill; }
.mlane__out em { font: 700 10.5px / 1.2 var(--f-body); color: var(--mint); }
.mlane__note { grid-column: 2 / -1; font-size: 11.5px; color: var(--cream-3); margin-top: -4px; }

/* ================================================================== concept blocks */
.ktc { margin-top: 30px; padding-top: 12px; }
.ktc + .ktc { margin-top: 56px; }
.ktc__head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 16px; }
.ktc__head .opt__l { width: 54px; height: 54px; font-size: 32px; }
.ktc__name { flex: 1; min-width: 0; }
.ktc__name h3 { margin: 0 0 6px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font: 400 32px / 1 var(--f-display); letter-spacing: 0.02em; color: #fff; -webkit-text-stroke: 5px var(--ink); paint-order: stroke fill; }
.ktc__name h3 .rec { -webkit-text-stroke: 0; }
.ktc__name p { margin: 0; color: var(--cream-2); max-width: 90ch; }
.ktc__try { margin: 12px 0 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 13px; color: var(--cream-3); }
.ktc__try b { color: var(--yellow); font: 400 14px / 1 var(--f-display); letter-spacing: 0.06em; }
.ktc__try span { padding: 4px 8px; border-radius: 8px; background: rgba(255, 246, 224, 0.06); border: 1.5px solid rgba(255, 246, 224, 0.12); color: var(--cream-2); }
.ktc__foot { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 14px; margin-top: 16px; align-items: stretch; }
.ktc__box { padding: 12px 14px; border-radius: 16px; border: 3px solid var(--ink); background: var(--card-2); box-shadow: 3px 5px 0 var(--ink); font-size: 13.5px; line-height: 1.5; color: var(--cream-2); }
.ktc__box b.h { display: block; font: 400 15px / 1 var(--f-display); letter-spacing: 0.06em; margin-bottom: 5px; }
.ktc__box--y b.h { color: var(--mint); } .ktc__box--n b.h { color: #FF9AAE; }
.ktc__pick { display: flex; align-items: center; }
.ktc.is-picked .dev__body { box-shadow: inset 0 0 0 2px #74747E, inset 0 0 0 5px #0B0B0E, 0 0 0 8px var(--yellow), 0 0 50px rgba(255, 196, 0, 0.55); }

/* ================================================================== the Dressing Room pieces (from page 24, A) */
.cz { position: absolute; inset: 0; color: var(--cream); font-family: var(--f-body); }
.cz .stg { --floor-h: 64px; }
.cz-top { position: absolute; z-index: 10; left: 77px; right: 77px; top: 8px; height: 44px; display: flex; align-items: center; gap: 12px; }
.cz-top .end { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.cz-top .pill { min-width: 96px; height: 32px; }
.cz-back { display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 14px 0 10px; font: 400 18px / 1 var(--f-display); letter-spacing: 0.04em; color: #fff; border: 3px solid var(--ink); border-radius: 14px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.09), transparent 55%), linear-gradient(180deg, var(--panel-3), var(--panel)); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.12), 2px 4px 0 var(--ink); }
.cz-back svg { width: 24px; height: 24px; }
.cz-back span { -webkit-text-stroke: 3.5px var(--ink); paint-order: stroke fill; }
.cz-title { font: 400 26px / 1 var(--f-display); letter-spacing: 0.02em; color: #fff; -webkit-text-stroke: 4.5px var(--ink); paint-order: stroke fill; text-shadow: 0 2.5px 0 var(--ink); }
.seg3 { display: flex; height: 40px; padding: 3px; gap: 3px; border: 3px solid var(--ink); border-radius: 14px; background: #120F1E; box-shadow: 2px 4px 0 var(--ink); }
.seg3 button { padding: 0 14px; border: 0; border-radius: 10px; background: none; cursor: pointer; font: 400 16px / 1 var(--f-display); letter-spacing: 0.04em; color: var(--cream-2); }
.seg3 button.is-on { color: var(--ink); background: linear-gradient(180deg, var(--yellow-hi), var(--yellow) 55%, var(--yellow-lo)); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.6); }
.cz-panel { position: absolute; z-index: 6; border: 3px solid var(--ink); border-radius: 18px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), transparent 45%), repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.025) 0 6px, transparent 6px 12px), linear-gradient(180deg, var(--panel-2), var(--panel)); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.1), 3px 6px 0 var(--ink); }
.cz-cone { position: absolute; z-index: 2; pointer-events: none; }
.cz-lamp { position: absolute; z-index: 3; width: 58px; height: 22px; margin-left: -29px; border: 3px solid var(--ink); border-top: 0; border-radius: 0 0 14px 14px; background: linear-gradient(180deg, #3A3458, #1E1B2B); }
.cz-lamp::after { content: ""; position: absolute; left: 7px; right: 7px; bottom: -6px; height: 9px; border-radius: 50%; background: #FFF6E0; box-shadow: 0 0 14px 6px rgba(255, 240, 200, 0.75); }
.chips { display: flex; gap: 6px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); padding: 2px 2px 6px; }
.chip { flex: none; display: inline-flex; align-items: center; gap: 5px; height: 34px; padding: 0 11px 0 6px; cursor: pointer; font: 400 14.5px / 1 var(--f-display); letter-spacing: 0.04em; color: #fff; white-space: nowrap; border: 2.5px solid var(--ink); border-radius: 10px; background: linear-gradient(180deg, var(--panel-3), var(--panel)); box-shadow: 2px 3px 0 var(--ink); }
.chip svg { width: 22px; height: 22px; }
.chip span { -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; }
.chip.is-on { color: var(--ink); background: linear-gradient(180deg, var(--yellow-hi), var(--yellow) 55%, var(--yellow-lo)); }
.chip.is-on span { -webkit-text-stroke: 0; }
.chip .newb { font: 400 10px / 1 var(--f-display); color: #fff; background: var(--hot); border: 2px solid var(--ink); border-radius: 5px; padding: 2px 3px 1px; margin-left: 2px; -webkit-text-stroke: 0; }
.chip .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--alert); border: 1.5px solid var(--ink); margin-left: 2px; }
.dstrip { position: absolute; display: flex; align-items: center; gap: 10px; padding: 0 8px 0 12px; height: 46px; border: 3px solid var(--ink); border-radius: 14px; background: #120F1E; }
.dstrip .t { flex: 1; min-width: 0; }
.dstrip .t b { display: block; font: 400 17px / 1 var(--f-display); letter-spacing: 0.03em; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dstrip .t small { display: block; margin-top: 3px; font: 800 10.5px / 1 var(--f-body); letter-spacing: 0.08em; color: var(--cream-3); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dstrip .t small em { color: var(--yellow); font-style: normal; }
.cta { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; cursor: pointer; font: 400 15px / 1 var(--f-display); letter-spacing: 0.04em; color: var(--ink); border: 2.5px solid var(--ink); border-radius: 10px; background: linear-gradient(180deg, var(--yellow-hi), var(--yellow) 55%, var(--yellow-lo)); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.5), 2px 3px 0 var(--ink); white-space: nowrap; }
.cta--g { color: #fff; background: linear-gradient(180deg, #7BEFA5, var(--green) 50%, #0F9442); -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; }
.cta--k { color: var(--cream-2); background: linear-gradient(180deg, var(--panel-3), var(--panel)); }
.cta--p { color: #fff; background: linear-gradient(180deg, #FFB0D6, var(--hot) 55%, #C21F72); -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; }
.cta:active { transform: translate(1px, 2px); box-shadow: 0 1px 0 var(--ink); }

/* ================================================================== KILLS tab parts (canvas units) */
/* the ALL UNLOCKED ribbon on a panel */
.unl { position: absolute; z-index: 12; right: 10px; bottom: 58px; padding: 5px 10px 4px; font: 400 13px / 1 var(--f-display); letter-spacing: 0.06em; color: var(--ink); background: linear-gradient(180deg, #8DF7B2, var(--green)); border: 2.5px solid var(--ink); border-radius: 8px; box-shadow: 2px 3px 0 var(--ink); transform: rotate(4deg); white-space: nowrap; }
/* the live preview booth */
.booth { position: absolute; z-index: 4; border: 3px solid var(--ink); border-radius: 16px; overflow: hidden; background: #0B0820; box-shadow: 0 0 0 4px rgba(255, 246, 224, 0.06), 3px 6px 0 var(--ink); }
.booth .fs { position: absolute; inset: 0; }
.booth__tag { position: absolute; z-index: 20; left: 8px; top: 8px; display: inline-flex; align-items: center; gap: 5px; padding: 4px 7px 3px; font: 400 12px / 1 var(--f-display); letter-spacing: 0.06em; color: #fff; background: rgba(29, 27, 36, 0.8); border: 2px solid var(--ink); border-radius: 7px; }
.booth__tag i { width: 8px; height: 8px; border-radius: 50%; background: #FF4F6E; box-shadow: 0 0 6px #FF4F6E; animation: blinkd 1s steps(2) infinite; }
@keyframes blinkd { 50% { opacity: 0.2; } }
.booth__name { position: absolute; z-index: 20; left: 50%; bottom: 8px; transform: translateX(-50%); }
.booth__name .ntag { height: 26px; font-size: 14px; }
.booth__try { position: absolute; z-index: 21; right: 8px; top: 8px; padding: 4px 8px 3px; font: 400 13px / 1 var(--f-display); letter-spacing: 0.06em; color: var(--ink); background: var(--yellow); border: 2px solid var(--ink); border-radius: 7px; transform: rotate(4deg); display: none; }
.is-trying .booth__try { display: block; animation: trybob 1s ease-in-out infinite alternate; }
@keyframes trybob { to { transform: rotate(-3deg) translateY(-2px); } }
/* the weapon strip */
.wstrip { display: flex; align-items: stretch; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 4px 2px 6px; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 30px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 30px), transparent); scroll-behavior: smooth; }
.wstrip::-webkit-scrollbar { display: none; }
.wsrch { flex: none; display: flex; align-items: center; gap: 4px; width: 112px; height: 52px; padding: 0 8px; border: 2.5px solid var(--ink); border-radius: 11px; background: #120F1E; }
.wsrch svg { width: 18px; height: 18px; flex: none; }
.wsrch input { width: 100%; min-width: 0; border: 0; outline: 0; background: none; font: 400 13px / 1 var(--f-display); letter-spacing: 0.04em; color: #fff; text-transform: uppercase; }
.wsrch input::placeholder { color: var(--cream-3); }
.wsep { flex: none; align-self: center; writing-mode: vertical-rl; transform: rotate(180deg); font: 800 8.5px / 1 var(--f-body); letter-spacing: 0.14em; color: var(--cream-3); padding: 0 1px; }
.wt2 { position: relative; flex: none; display: grid; justify-items: center; align-content: center; gap: 0; width: 66px; height: 52px; padding: 0; cursor: pointer; border: 2.5px solid var(--ink); border-radius: 11px; background: linear-gradient(180deg, #3A3160, #221B3C); box-shadow: 2px 3px 0 var(--ink); transition: transform 0.12s var(--out); }
.wt2:hover { transform: translateY(-2px); }
.wt2 .wico { margin-top: -3px; }
.wt2 span { font: 400 9px / 1 var(--f-display); letter-spacing: 0.03em; color: var(--cream-2); white-space: nowrap; max-width: 62px; overflow: hidden; text-overflow: ellipsis; }
.wt2.is-on { background: linear-gradient(180deg, var(--yellow-hi), var(--yellow) 60%, var(--yellow-lo)); }
.wt2.is-on span { color: var(--ink); }
.wt2--gen { width: 72px; background: linear-gradient(180deg, #5A3FD0, #2E1F80); }
.wt2--gen > svg { width: 26px; height: 26px; margin-top: -2px; }
.wt2.is-hide { display: none; }
.pips { position: absolute; right: 3px; top: 3px; display: flex; gap: 2px; }
.pips i { width: 6px; height: 6px; border-radius: 50%; background: #120F1E; border: 1.2px solid var(--ink); }
.pips i.on { background: var(--green); }
.wdice { position: absolute; left: -5px; top: -6px; width: 17px; height: 17px; border-radius: 5px; background: #fff; border: 2px solid var(--ink); display: none; place-items: center; transform: rotate(-10deg); }
.wdice svg { width: 11px; height: 11px; }
.has-rand .wdice { display: grid; }
.wnone { position: absolute; left: -5px; top: -6px; padding: 1px 3px; font: 400 8px / 1 var(--f-display); color: #fff; background: #6B5BA8; border: 1.5px solid var(--ink); border-radius: 4px; display: none; }
.has-none .wnone { display: block; }
/* kill cards (the kit's rarity card, for kills) */
.kk { position: relative; flex: none; width: 124px; height: 132px; padding: 0; cursor: pointer; display: flex; flex-direction: column; border: 3px solid var(--ink); border-radius: 12px; overflow: visible; background: linear-gradient(180deg, #3D3466, #241D40); box-shadow: 2px 4px 0 var(--ink); transition: transform 0.15s var(--out); color: var(--cream); text-align: left; }
.kk:hover { transform: translateY(-3px); }
.kk__art { position: relative; height: 68px; margin: 3px 3px 0; border-radius: 8px; overflow: hidden; background: #0B0820; border: 2px solid var(--ink); }
.kk__art .fs { position: absolute; inset: 0; }
.kk__nm { padding: 5px 6px 0; font: 400 13px / 1.05 var(--f-display); letter-spacing: 0.02em; color: #fff; -webkit-text-stroke: 2.6px var(--ink); paint-order: stroke fill; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kk__tg { padding: 3px 6px 0; font: 800 8.5px / 1 var(--f-body); letter-spacing: 0.1em; color: var(--cream-3); }
.kk__tg.t-new { color: var(--mint); } .kk__tg.t-existing { color: var(--sky); } .kk__tg.t-renamed { color: #FFB3D6; }
.kk__rib { margin-top: auto; height: 24px; display: grid; place-items: center; border-top: 2.5px solid var(--ink); border-radius: 0 0 9px 9px; font: 400 11.5px / 1 var(--f-display); letter-spacing: 0.05em; background: linear-gradient(180deg, #4B4472, #2A2640); color: var(--cream-2); }
.kk.is-eq .kk__rib { background: linear-gradient(180deg, #7BEFA5, var(--green) 55%, #0F9442); color: #fff; -webkit-text-stroke: 2.5px var(--ink); paint-order: stroke fill; }
.kk.is-eq { box-shadow: 0 0 0 3px var(--green), 0 0 14px 2px rgba(31, 191, 92, 0.5), 2px 4px 0 var(--ink); }
.kk.is-play { box-shadow: 0 0 0 3px var(--yellow), 0 0 16px 3px rgba(255, 210, 63, 0.7), 2px 4px 0 var(--ink); }
.kk.is-eq.is-play { box-shadow: 0 0 0 3px var(--yellow), 0 0 0 6px var(--green), 0 0 16px 3px rgba(255, 210, 63, 0.7), 2px 4px 0 var(--ink); }
.kk__chk { position: absolute; z-index: 5; right: -9px; top: -9px; width: 30px; height: 30px; border-radius: 50%; border: 3px solid var(--ink); background: #241D40; display: grid; place-items: center; cursor: pointer; box-shadow: 1px 2px 0 var(--ink); transition: transform 0.2s var(--spring); }
.kk__chk svg { width: 16px; height: 16px; opacity: 0.25; }
.kk.is-eq .kk__chk { background: var(--green); }
.kk.is-eq .kk__chk svg { opacity: 1; }
.kk__chk:hover { transform: scale(1.12); }
.kk.is-pop { animation: icpop 0.45s var(--spring); }
@keyframes icpop { 0% { transform: scale(1); } 35% { transform: scale(1.12) rotate(-4deg); } 70% { transform: scale(0.96); } 100% { transform: none; } }
.kk.is-shake { animation: shake 0.35s; }
@keyframes shake { 25%, 75% { translate: -4px 0; } 50% { translate: 4px 0; } }
.kk--ghost { cursor: default; border-style: dashed; background: repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.04) 0 6px, transparent 6px 12px), #1A1530; box-shadow: none; opacity: 0.85; }
.kk--ghost:hover { transform: none; }
.kk--ghost .kk__art { display: grid; place-items: center; background: #120D22; border-style: dashed; }
.kk--ghost .kk__art svg { width: 34px; height: 34px; opacity: 0.6; }
.kk--ghost .kk__nm { color: var(--cream-3); -webkit-text-stroke: 0; }
.kk--ghost .kk__rib { background: none; border-top-style: dashed; color: var(--cream-3); }
.ptag { position: absolute; z-index: 6; right: -10px; top: 18px; display: inline-flex; align-items: center; gap: 3px; padding: 3px 7px 2px 5px; font: 400 13px / 1 var(--f-display); color: var(--ink); background: #FFF6E0; border: 2.5px dashed var(--ink); border-radius: 7px; transform: rotate(8deg); opacity: 0.8; }
.ptag::before { content: ""; position: absolute; left: -7px; top: 50%; width: 9px; height: 9px; margin-top: -5px; border-radius: 50%; background: #1A1530; border: 2px dashed var(--ink); }
.ptag .gem { width: 15px; height: 15px; display: inline-block; }
.ptag .gem svg { width: 100%; height: 100%; display: block; }
/* toast */
.kttoast { position: absolute; z-index: 30; left: 50%; bottom: 100px; transform: translateX(-50%) translateY(10px); padding: 9px 14px 8px; font: 400 16px / 1 var(--f-display); letter-spacing: 0.04em; color: var(--ink); background: var(--yellow); border: 3px solid var(--ink); border-radius: 12px; box-shadow: 3px 5px 0 var(--ink); opacity: 0; pointer-events: none; transition: opacity 0.2s, transform 0.25s var(--spring); white-space: nowrap; }
.kttoast.is-on { opacity: 1; transform: translateX(-50%) translateY(0); }
/* a rule line (what plays) */
.rl { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font: 800 10.5px / 1.2 var(--f-body); letter-spacing: 0.06em; color: var(--cream-3); text-transform: uppercase; }
.rl b { font: 400 12.5px / 1 var(--f-display); letter-spacing: 0.04em; color: var(--yellow); text-transform: none; }
.rl i { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 5px; border: 2px solid var(--ink); background: #fff; font-style: normal; }
.rl i svg { width: 12px; height: 12px; }
.rl .chipx { display: inline-flex; align-items: center; padding: 3px 6px 2px; border-radius: 6px; border: 2px solid var(--ink); background: #2A2148; font: 400 11.5px / 1 var(--f-display); letter-spacing: 0.03em; color: #fff; text-transform: none; }
.rl .chipx--gen { background: #4B3A9C; }

/* ----------------------------------------------------------------- A · the KILLS chip */
.kA .booth { left: 86px; top: 70px; width: 300px; height: 206px; }
.kA .kA__side { position: absolute; z-index: 5; left: 86px; top: 286px; width: 300px; display: grid; gap: 6px; }
.kA .cz-panel { left: 400px; right: 77px; top: 60px; bottom: 87px; padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; }
.kA .kgrid { display: flex; gap: 12px; padding: 12px 6px 4px; overflow-x: auto; scrollbar-width: none; min-height: 150px; }
.kA .kgrid::-webkit-scrollbar { display: none; }
.kA .dstrip { position: relative; margin-top: auto; }
.sidebox { padding: 6px 9px; border: 2.5px solid var(--ink); border-radius: 12px; background: rgba(18, 15, 30, 0.88); overflow: hidden; }
.sidebox .rl { font-size: 9.5px; gap: 4px; }
.sidebox .rl b { font-size: 12px; }
.sidebox .chipx { font-size: 10.5px; padding: 2px 5px 1px; }
/* ----------------------------------------------------------------- B · the armory */
.kB .alist { position: absolute; z-index: 6; left: 77px; top: 62px; bottom: 14px; width: 248px; padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.kB .alist__scroll { flex: 1; overflow-y: auto; scrollbar-width: thin; display: grid; align-content: start; gap: 4px; padding-right: 2px; }
.kB .afam { font: 800 9.5px / 1 var(--f-body); letter-spacing: 0.14em; color: var(--cream-3); padding: 7px 4px 2px; }
.kB .arow { display: grid; grid-template-columns: 58px 1fr auto; gap: 6px; align-items: center; height: 40px; padding: 0 8px 0 2px; cursor: pointer; border: 2.5px solid var(--ink); border-radius: 10px; background: linear-gradient(180deg, #342B58, #211A3A); text-align: left; color: var(--cream); }
.kB .arow b { font: 400 13px / 1 var(--f-display); letter-spacing: 0.03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kB .arow.is-on { background: linear-gradient(180deg, var(--yellow-hi), var(--yellow)); color: var(--ink); }
.kB .arow--gen { background: linear-gradient(180deg, #5A3FD0, #2E1F80); }
.kB .arow--gen svg { width: 26px; height: 26px; justify-self: center; }
.kB .arow.is-hide, .kB .afam.is-hide { display: none; }
.kB .acount { display: inline-flex; align-items: center; gap: 3px; font: 400 12px / 1 var(--f-display); color: var(--cream-2); }
.kB .arow.is-on .acount { color: var(--ink); }
.kB .acount svg { width: 14px; height: 14px; }
.kB .booth { left: 338px; top: 62px; width: 344px; height: 238px; }
.kB .kB__under { position: absolute; z-index: 5; left: 338px; top: 308px; width: 344px; display: grid; gap: 6px; }
.kB .klist { position: absolute; z-index: 6; left: 694px; right: 77px; top: 62px; bottom: 14px; padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.kB .klist__h { display: flex; align-items: center; gap: 6px; padding: 2px 2px 4px; font: 400 16px / 1 var(--f-display); letter-spacing: 0.03em; color: #fff; }
.kB .klist__h small { margin-left: auto; font: 800 9.5px / 1 var(--f-body); letter-spacing: 0.08em; color: var(--cream-3); }
.krow { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 6px; align-items: center; padding: 7px 8px; border: 2.5px solid var(--ink); border-radius: 11px; background: linear-gradient(180deg, #342B58, #211A3A); cursor: pointer; }
.krow b { display: block; font: 400 14.5px / 1 var(--f-display); letter-spacing: 0.03em; color: #fff; }
.krow small { display: block; margin-top: 3px; font: 800 8.5px / 1 var(--f-body); letter-spacing: 0.1em; color: var(--cream-3); }
.krow.is-play { box-shadow: 0 0 0 2.5px var(--yellow); }
.krow--ghost { border-style: dashed; background: #1A1530; cursor: default; }
.krow--ghost b { color: var(--cream-3); }
.tgl { position: relative; width: 50px; height: 28px; border-radius: 14px; border: 2.5px solid var(--ink); background: #120F1E; cursor: pointer; transition: background 0.2s; }
.tgl::after { content: ""; position: absolute; left: 2px; top: 2px; width: 19px; height: 19px; border-radius: 50%; background: #6B6390; border: 2px solid var(--ink); transition: left 0.22s var(--spring), background 0.2s; }
.tgl.is-on { background: var(--green); }
.tgl.is-on::after { left: 23px; background: #fff; }
.krow.is-shake { animation: shake 0.35s; }
/* ----------------------------------------------------------------- C · the weapon wall */
.kC .booth { left: 86px; top: 70px; width: 300px; height: 206px; }
.kC .kC__side { position: absolute; z-index: 5; left: 86px; top: 286px; width: 300px; display: grid; gap: 6px; }
.kC .cz-panel { left: 400px; right: 77px; top: 60px; bottom: 87px; padding: 10px 12px; overflow: hidden; }
.kC .wwtop { display: flex; align-items: center; gap: 6px; margin: 4px 0 6px; }
.kC .wwtop .wsrch { height: 34px; width: 150px; }
.kC .fchips { display: flex; gap: 5px; }
.kC .fchip { height: 30px; padding: 0 9px; cursor: pointer; font: 400 12.5px / 1 var(--f-display); letter-spacing: 0.04em; color: var(--cream-2); background: #221B38; border: 2px solid var(--ink); border-radius: 8px; }
.kC .fchip.is-on { color: var(--ink); background: var(--yellow); }
.kC .wwall { display: grid; grid-template-columns: repeat(6, 1fr); gap: 7px; height: 222px; overflow-y: auto; scrollbar-width: none; padding: 6px 4px 18px; -webkit-mask-image: linear-gradient(#000 82%, transparent); mask-image: linear-gradient(#000 82%, transparent); }
.kC .wwall::-webkit-scrollbar { display: none; }
.wc { position: relative; height: 70px; padding: 0; cursor: pointer; display: grid; justify-items: center; align-content: center; gap: 2px; border: 2.5px solid var(--ink); border-radius: 11px; background: linear-gradient(180deg, #3A3160, #221B3C); box-shadow: 2px 3px 0 var(--ink); transition: transform 0.12s var(--out); }
.wc:hover { transform: translateY(-2px); }
.wc span { font: 400 9.5px / 1 var(--f-display); letter-spacing: 0.03em; color: var(--cream-2); max-width: 92%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wc--gen { background: linear-gradient(180deg, #5A3FD0, #2E1F80); }
.wc--gen > svg { width: 30px; height: 30px; }
.wc.is-on { background: linear-gradient(180deg, var(--yellow-hi), var(--yellow)); }
.wc.is-on span { color: var(--ink); }
.wc.is-hide { display: none; }
.wc .pips { top: 4px; right: 4px; }
.kC .drawer { position: absolute; z-index: 9; left: 0; right: 0; bottom: 0; height: 200px; padding: 10px 12px; border-top: 3px solid var(--ink); border-radius: 16px 16px 0 0; background: linear-gradient(180deg, #3B3266, #1E1833); box-shadow: 0 -8px 20px rgba(0, 0, 0, 0.5); transform: translateY(105%); transition: transform 0.4s var(--spring); display: flex; flex-direction: column; gap: 6px; }
.kC .drawer.is-open { transform: none; }
.kC .drawer__h { display: flex; align-items: center; gap: 8px; }
.kC .drawer__h b { font: 400 19px / 1 var(--f-display); letter-spacing: 0.03em; color: #fff; -webkit-text-stroke: 3.5px var(--ink); paint-order: stroke fill; }
.kC .drawer__h .cta { margin-left: auto; height: 30px; }
.kC .drawer .kgrid { display: flex; gap: 12px; padding: 10px 6px 2px; overflow-x: auto; scrollbar-width: none; }
.kC .drawer .kgrid::-webkit-scrollbar { display: none; }

/* ================================================================== 02 KO FX */
.kofxbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 18px; }
.kofxbar > b { font: 400 15px / 1 var(--f-display); letter-spacing: 0.06em; color: var(--yellow); margin-right: 4px; }
.fxchip { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 12px 0 6px; cursor: pointer; font: 400 15px / 1 var(--f-display); letter-spacing: 0.04em; color: var(--cream-2); background: #221B38; border: 2.5px solid var(--ink); border-radius: 11px; box-shadow: 2px 3px 0 var(--ink); }
.fxchip svg { width: 26px; height: 26px; }
.fxchip.is-on { color: var(--ink); background: linear-gradient(180deg, var(--yellow-hi), var(--yellow)); }
.fxui { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px; border-radius: 12px; background: rgba(0, 0, 0, 0.3); border: 2px solid rgba(255, 246, 224, 0.08); }
.fxui .chip { height: 30px; font-size: 13px; padding: 0 9px 0 5px; }
.fxui .chip svg { width: 18px; height: 18px; }
.fxui .fxrow { display: flex; gap: 5px; width: 100%; align-items: center; }
.fxui .fxrow > small { font: 800 9.5px / 1 var(--f-body); letter-spacing: 0.1em; color: var(--cream-3); margin-right: 4px; }
.fxui .fxmini { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 9px; border: 2px solid var(--ink); background: #2A2148; }
.fxui .fxmini svg { width: 28px; height: 28px; }
.fxui .fxmini.is-on { box-shadow: 0 0 0 2.5px var(--yellow); }
.fxui .chip--x { opacity: 0.35; text-decoration: line-through; }
.fxnote { font-size: 12.5px; color: var(--cream-3); }
.fxnote b { color: var(--yellow) !important; }
.stg2 { position: relative; border: 3px solid var(--ink); border-radius: 16px; overflow: hidden; background: #0B0820; box-shadow: 3px 5px 0 var(--ink); }

/* ================================================================== 03 loadout */
.lgrid { display: grid; gap: 5px; }
.lrow { display: grid; grid-template-columns: 52px 1fr; gap: 6px; align-items: center; padding: 4px 6px 4px 2px; border-radius: 10px; background: rgba(0, 0, 0, 0.22); }
.lrow .ks { display: flex; flex-wrap: wrap; gap: 4px; }
.lk { display: inline-flex; align-items: center; gap: 3px; padding: 3px 6px 2px 3px; font: 400 10.5px / 1 var(--f-display); letter-spacing: 0.02em; border-radius: 6px; border: 2px solid var(--ink); background: #2A2148; color: var(--cream-3); }
.lk i { width: 11px; height: 11px; border-radius: 3px; border: 1.5px solid var(--ink); background: #3A3060; }
.lk.on { color: #fff; }
.lk.on i { background: var(--green); }
.lk.nw::after { content: "NEW"; font-size: 8px; color: #fff; background: var(--hot); border-radius: 3px; padding: 1px 2px; margin-left: 2px; }
.reel { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; min-height: 108px; align-content: start; }
.rl8 { display: grid; justify-items: center; gap: 2px; padding: 5px 3px; border-radius: 9px; background: #1B1530; border: 2px solid var(--ink); text-align: center; }
.rl8 .wico { margin: -4px 0 -2px; }
.rl8 b { font: 400 10.5px / 1.05 var(--f-display); letter-spacing: 0.02em; color: #fff; }
.rl8 small { font: 800 8px / 1 var(--f-body); letter-spacing: 0.08em; color: var(--cream-3); }
.rl8.rep { box-shadow: 0 0 0 2px #FF8FA8; }
.rl8.isnew b { color: var(--mint); }
.rl8.is-new { animation: rndpop 0.35s var(--spring); }
@keyframes rndpop { 0% { transform: scale(0.4) rotate(-10deg); opacity: 0; } 100% { transform: none; opacity: 1; } }
.lstats { font-size: 12px; color: var(--cream-3); }
.lstats b { color: var(--yellow); }

/* ================================================================== 04 later */
.states { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.stt { display: grid; justify-items: center; gap: 10px; padding: 18px 14px 14px; border: 3px solid var(--ink); border-radius: 20px; background: var(--card-2); box-shadow: 4px 6px 0 var(--ink); text-align: center; }
.stt__card { position: relative; width: 124px; height: 132px; }
.stt__card .kk { position: absolute; inset: 0; }
.stt b { font: 400 18px / 1 var(--f-display); letter-spacing: 0.04em; color: var(--yellow); }
.stt p { margin: 0; font-size: 13px; line-height: 1.45; color: var(--cream-2); }
.nextpage--back { flex-direction: row-reverse; }

/* ================================================================== responsive */
@media (max-width: 1180px) {
  .ktc__foot { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ktc__pick { grid-column: 1 / -1; }
  .states { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .ktc__foot { grid-template-columns: minmax(0, 1fr); }
  .mlane { grid-template-columns: 90px minmax(0, 1fr); }
  .mlane__dice { display: none; }
  .mlane__out { grid-column: 1 / -1; grid-template-columns: auto auto 1fr; align-items: baseline; gap: 8px; }
}
@media (max-width: 640px) {
  .states { grid-template-columns: minmax(0, 1fr); }
  .ktc__name h3 { font-size: 24px; }
  .reel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) { .mlane__dice.is-roll, .rl8.is-new, .kk.is-pop, .booth__tag i { animation: none; } }
html.rm .mlane__dice.is-roll, html.rm .rl8.is-new, html.rm .kk.is-pop, html.rm .booth__tag i { animation: none; }

/* ================================================================== additions: skin row, armory tag, KO FX mocks */
.skrow { gap: 4px; }
.rl .skd, .skd { display: inline-block; width: 16px; height: 16px; border-radius: 50%; background: var(--c); border: 2px solid var(--ink); cursor: pointer; box-shadow: inset -2px -2px 0 rgba(0, 0, 0, 0.18); }
.rl .skd.on, .skd.on { box-shadow: 0 0 0 2px var(--yellow), inset -2px -2px 0 rgba(0, 0, 0, 0.18); transform: scale(1.12); }
.sidebox { min-height: 34px; display: flex; align-items: center; }
.sidebox--note { font-size: 11.5px; line-height: 1.35; color: var(--cream-2); }
.sidebox--note b { color: var(--yellow); }
.kC .kC__side { position: absolute; z-index: 5; left: 84px; top: 270px; width: 304px; display: grid; gap: 6px; }
.kA .kA__side, .kFx .kA__side { position: absolute; z-index: 5; left: 84px; top: 270px; width: 304px; display: grid; gap: 6px; }
.kA .booth, .kC .booth, .kFx .booth { }
.armtag { font: 800 10px / 1 var(--f-body); letter-spacing: 0.14em; color: var(--ink); background: var(--yellow); border: 2px solid var(--ink); border-radius: 6px; padding: 4px 6px 3px; }
.kA .cz-panel { left: 400px; right: 77px; top: 60px; bottom: 87px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.kA .kk, .kC .drawer .kk { height: 124px; }
.kA .kk__art, .kC .drawer .kk__art { height: 60px; }
.kA .kgrid { min-height: 138px; padding-top: 12px; }
.kB .booth .booth__name { bottom: 10px; }
.kB .klist__rows { flex: 1; min-height: 0; align-content: start; padding: 2px; }
.kB .alist .wsrch input { font-size: 12px; }
.kFx .chips .chip { height: 30px; font-size: 13px; padding: 0 9px 0 5px; }
.kFx .chips .chip svg { width: 18px; height: 18px; }
.fxsec { display: grid; gap: 4px; }
.fxsec__h { font: 400 15px / 1 var(--f-display); letter-spacing: 0.05em; color: #fff; }
.fxsec__h small { font: 800 9.5px / 1 var(--f-body); letter-spacing: 0.1em; color: var(--cream-3); margin-left: 6px; }
.fxrow { display: flex; gap: 12px; align-items: center; padding: 8px 4px 2px; }
.fxrow--fx { gap: 8px; padding-top: 2px; }
.fxmini { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 10px; border: 2.5px solid var(--ink); background: #2A2148; box-shadow: 2px 3px 0 var(--ink); }
.fxmini svg { width: 30px; height: 30px; }
.fxmini.is-on { box-shadow: 0 0 0 3px var(--yellow), 2px 3px 0 var(--ink); }
.skinfx { display: flex; align-items: center; gap: 6px; padding: 6px 9px; border-radius: 10px; border: 2.5px solid var(--ink); background: #2A2148; }
.skinfx b { display: block; font: 400 12.5px / 1 var(--f-display); color: #fff; letter-spacing: 0.04em; }
.skinfx small { display: block; font: 800 9px / 1.2 var(--f-body); letter-spacing: 0.06em; color: var(--yellow); }
.fxcall { margin-top: auto; padding: 9px 11px; border-radius: 12px; border: 2.5px dashed rgba(255, 246, 224, 0.3); font-size: 12.5px; color: var(--cream-2); }
.fxcall b { color: var(--yellow); font: 400 14px / 1 var(--f-display); letter-spacing: 0.04em; margin-right: 4px; }
.fxon { position: absolute; z-index: 6; left: 50%; bottom: -12px; transform: translateX(-50%) rotate(-3deg); white-space: nowrap; padding: 3px 6px 2px; font: 400 10.5px / 1 var(--f-display); letter-spacing: 0.04em; color: #fff; background: #B80A12; border: 2px solid var(--ink); border-radius: 6px; }
.fxon b { color: var(--yellow); }
.fxsay { min-height: 44px; }

.kC .drawer .kk { height: 112px; width: 116px; }
.kC .drawer .kk__art { height: 52px; }
.kC .drawer .kgrid { padding-top: 12px; }
.kC .drawer [data-count] { display: none; }
.kB .kB__under { top: 296px; gap: 5px; }
.fxlist { display: grid; gap: 26px; }
.fxrowopt { position: relative; display: grid; grid-template-rows: auto; grid-template-columns: minmax(0, 1.5fr) minmax(280px, 0.6fr); gap: 20px; align-items: center; padding: 16px; border: 3px solid var(--ink); border-radius: 24px; background: var(--card-2); box-shadow: 5px 7px 0 var(--ink); }
.fxrowopt.is-picked { box-shadow: 0 0 0 4px var(--yellow), 0 0 40px rgba(255, 210, 63, 0.35), 5px 7px 0 var(--ink); }
.fxrowopt .rec { position: absolute; left: 70px; top: -14px; transform: rotate(-3deg); z-index: 5; }
.fxrowopt .side { display: grid; gap: 12px; align-content: center; }
.fxrowopt .side p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--cream-2); }
.fxrowopt .side p b { color: var(--yellow); }
@media (max-width: 1000px) { .fxrowopt { grid-template-columns: minmax(0, 1fr); } }

.booth .unl { right: 8px; top: 8px; bottom: auto; font-size: 11px; padding: 4px 7px 3px; z-index: 22; }
.booth__try { top: auto; bottom: 40px; }