/* ==========================================================================
   pages/nguoi-choi.css — 01 · Người chơi (unit P01)
   Page-scoped only: body[data-page="nguoi-choi"] or .p-nc-*.
   Rarity ladder (white/green/blue/purple/gold/red) is allowed on THIS page only.
   ========================================================================== */
body[data-page="nguoi-choi"]{
  --r-white:#D6D4CA; --r-green:#7CCB8B; --r-blue:#63A9F2; --r-purple:#B48CF4; --r-gold:#E6BC4C; --r-red:#FF5A4E;
}

/* ─────────────────────────── HERO ─────────────────────────── */
.p-nc-hero{min-height:88vh;min-height:88svh}
.p-nc-hero .terrain{--terrain-line-alpha:.62;--terrain-calm:.78;--terrain-calm-x:26%;--terrain-calm-y:52%;--terrain-calm-w:62%;--terrain-calm-h:80%}
.p-nc-hero__glow{position:absolute;inset:0;
  background:radial-gradient(38% 46% at 76% 46%, rgb(255 159 28 / .16), transparent 70%)}
.p-nc-hero .hero__title{max-inline-size:11ch}
.p-nc-hero .hero__title em{position:relative;white-space:nowrap}
.p-nc-hero .hero__candid{flex-wrap:nowrap;align-items:flex-start}
.p-nc-hero .hero__candid .i{flex:none;margin-top:2px}
@media (min-width:1024px){
  .p-nc-hero .hero__inner{grid-template-columns:minmax(0,6.2fr) minmax(0,5.8fr);align-items:center}
}

/* the rig: giant keycap + squad panel */
.p-nc-rig{display:flex;flex-direction:column;align-items:center;gap:clamp(20px, 2.4vw, 36px)}
.p-nc-key{position:relative;display:flex;align-items:flex-end;justify-content:center;gap:14px;perspective:900px;padding-top:8px}
.p-nc-key__halo{position:absolute;left:50%;top:55%;width:150%;height:130%;translate:-50% -50%;pointer-events:none;z-index:-1;
  background:radial-gradient(closest-side, rgb(255 159 28 / .28), rgb(255 159 28 / .06) 60%, transparent)}
.p-nc-key__cap{position:relative;display:inline-flex;align-items:baseline;
  padding:.16em .42em .1em;border-radius:14px;
  font:800 clamp(4.75rem, 2.4rem + 7.4vw, 10rem)/.95 var(--ff-display);font-stretch:78%;letter-spacing:.005em;color:var(--text);
  background:linear-gradient(180deg, #2A302B 0%, var(--surface-2) 38%, var(--surface) 100%);
  border:2px solid #7D887E;border-bottom-width:12px;border-bottom-color:#4A524B;
  box-shadow:0 40px 70px -28px rgb(0 0 0 / .95), inset 0 2px 0 rgb(255 255 255 / .08), 0 0 0 1px rgb(255 159 28 / .18);
  transform:rotateX(14deg) rotateZ(-3deg);transform-origin:50% 100%;
  transition:border-bottom-width 110ms var(--ease-out), translate 110ms var(--ease-out)}
.p-nc-key__slash{color:var(--accent);margin-right:.04em}
.p-nc-key__enter{display:none;align-items:center;gap:6px;margin-bottom:10px;padding:.5em .8em .42em;border-radius:8px;
  font:700 .875rem/1 var(--ff-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--on-accent);
  background:var(--accent);border:1px solid var(--accent-hi);border-bottom:5px solid #B86A00;
  transform:rotateZ(-3deg);transition:border-bottom-width 110ms var(--ease-out), translate 110ms var(--ease-out)}
.p-nc-key__enter .i{width:14px;height:14px}
@media (min-width:640px){ .p-nc-key__enter{display:inline-flex} }
.p-nc-rig.is-press .p-nc-key__cap{border-bottom-width:4px;translate:0 8px}
.p-nc-rig.is-press .p-nc-key__enter{border-bottom-width:1px;translate:0 4px}

/* squad panel */
.p-nc-squad{inline-size:100%;max-inline-size:480px;padding:18px 18px 16px;
  background:linear-gradient(180deg, rgb(30 36 32 / .92), rgb(17 20 18 / .92));border-color:var(--line-strong)}
.p-nc-squad__cap{display:flex;align-items:center;gap:8px;padding-right:90px;
  font:700 var(--fs-micro)/1.3 var(--ff-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--text-2)}
.p-nc-squad__cap .i{width:16px;height:16px;color:var(--accent)}
.p-nc-seg{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:14px 0 0;padding:0;border:0;min-width:0}
.p-nc-seg__opt{position:relative;display:block;min-width:0}
.p-nc-seg__opt input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.p-nc-seg__opt span{display:flex;align-items:center;justify-content:center;gap:4px;min-height:44px;padding:6px 8px;text-align:center;
  font:600 var(--fs-small)/1.2 var(--ff-body);color:var(--text-2);background:var(--bg-1);border:1px solid var(--line-strong);
  transition:color var(--dur-hover) var(--ease-out),border-color var(--dur-hover) var(--ease-out),background-color var(--dur-hover) var(--ease-out)}
.p-nc-seg__opt b{font-family:var(--ff-mono);font-weight:700;color:var(--text-3)}
.p-nc-seg__opt:hover span{color:var(--text);border-color:var(--text-2)}
.p-nc-seg__opt input:checked + span{color:var(--text);background:var(--accent-tint);border-color:var(--accent);box-shadow:inset 0 -2px 0 var(--accent)}
.p-nc-seg__opt input:checked + span b{color:var(--accent)}
.p-nc-seg__opt input:focus-visible + span{outline:2px solid var(--focus);outline-offset:2px}

.p-nc-slots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:14px;list-style:none;padding:0}
.p-nc-slot{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-width:0;min-height:88px;padding:10px 4px 8px;
  background:linear-gradient(180deg, var(--surface-2), var(--surface));border:1px solid var(--line-strong);border-top:3px solid var(--text-3)}
.p-nc-slot__who{font:400 clamp(1.5rem, 1.2rem + .8vw, 2rem)/1 var(--ff-stencil);color:var(--text)}
.p-nc-slot__role{font:500 var(--fs-micro)/1.2 var(--ff-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--text-2);text-align:center}
.p-nc-slot--4{display:none}
.p-nc-slot--you{background:linear-gradient(180deg, #FFB547, var(--accent));border-color:var(--accent);border-top-color:#FFD08A}
.p-nc-slot--you .p-nc-slot__who,.p-nc-slot--you .p-nc-slot__role{color:var(--on-accent)}
.p-nc-squad[data-mode="4"] .p-nc-slots,.p-nc-squad:has(input[value="4"]:checked) .p-nc-slots{grid-template-columns:repeat(4,minmax(0,1fr))}
.p-nc-squad[data-mode="4"] .p-nc-slot--4,.p-nc-squad:has(input[value="4"]:checked) .p-nc-slot--4{display:flex}
.p-nc-n4{display:none}
.p-nc-squad[data-mode="4"] .p-nc-n3,.p-nc-squad:has(input[value="4"]:checked) .p-nc-n3{display:none}
.p-nc-squad[data-mode="4"] .p-nc-n4,.p-nc-squad:has(input[value="4"]:checked) .p-nc-n4{display:inline}
.p-nc-squad__status{display:flex;align-items:center;gap:8px;margin-top:12px;padding:10px 12px;
  font:700 var(--fs-label)/1.3 var(--ff-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ok);
  background:var(--ok-bg);border:1px solid rgb(124 203 139 / .5)}
.p-nc-squad__status .i{width:18px;height:18px}
.p-nc-squad__status b{font-weight:700;color:var(--text)}

/* armed (JS + motion only): slots empty until filled one by one */
.p-nc-squad.is-armed .p-nc-slot:not(.is-in){background:transparent;border:1px dashed var(--line-strong);border-top-width:1px}
.p-nc-squad.is-armed .p-nc-slot:not(.is-in) > *{opacity:0}
.p-nc-squad.is-armed .p-nc-slot:not(.is-in)::after{content:"+";position:absolute;inset:0;display:grid;place-items:center;
  font:400 1.75rem/1 var(--ff-mono);color:var(--text-3)}
.p-nc-squad.is-armed .p-nc-slot.is-in{animation:p-nc-pop 420ms var(--ease-expo) both}
.p-nc-squad.is-armed .p-nc-slot--you.is-in{animation:p-nc-pop-you 560ms var(--ease-expo) both}
.p-nc-squad.is-armed .p-nc-squad__status{opacity:0;translate:0 6px}
.p-nc-squad.is-armed.is-full .p-nc-squad__status{opacity:1;translate:none;transition:opacity 240ms var(--ease-out), translate 360ms var(--ease-expo)}
@keyframes p-nc-pop{0%{opacity:0;scale:.82}60%{opacity:1}100%{opacity:1;scale:1}}
@keyframes p-nc-pop-you{0%{opacity:0;scale:1.35;box-shadow:0 0 0 0 rgb(255 159 28 / .7)}45%{opacity:1;scale:.97}100%{opacity:1;scale:1;box-shadow:0 0 0 14px rgb(255 159 28 / 0)}}

@media (max-width:1023px){
  .p-nc-rig{margin-top:var(--s-7)}
}
@media (max-width:479px){
  .p-nc-squad{padding:14px 12px 12px}
  .p-nc-slot{min-height:76px}
  .p-nc-seg__opt span{font-size:.8125rem}
}

/* ─────────────────────────── KHO ĐỒ (loot cards) ─────────────────────────── */
.p-nc-kho{padding-top:clamp(56px, 6vw, 96px)}
.p-nc-kho__head{margin-bottom:clamp(28px, 2vw + 16px, 48px)}
.p-nc-loot-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;list-style:none;padding:0;margin:0}
@media (min-width:768px){ .p-nc-loot-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px} }
@media (min-width:1200px){ .p-nc-loot-grid{grid-template-columns:repeat(6,minmax(0,1fr))} }
.p-nc-loot-grid > li{min-width:0;display:flex}
.p-nc-loot{--r:var(--r-white);position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-rows:auto 1fr auto;
  inline-size:100%;min-height:clamp(196px, 10vw + 120px, 250px);padding:14px 16px 16px;color:var(--text);text-decoration:none;
  background:
    radial-gradient(120% 62% at 50% 108%, color-mix(in srgb, var(--r) 34%, transparent), transparent 72%),
    repeating-linear-gradient(135deg, color-mix(in srgb, var(--r) 7%, transparent) 0 2px, transparent 2px 9px),
    linear-gradient(180deg, var(--surface-2), var(--bg-1));
  border:1px solid color-mix(in srgb, var(--r) 40%, var(--line));border-top:3px solid var(--r);
  box-shadow:var(--shadow-card);
  transition:transform 280ms var(--ease-expo),border-color var(--dur-hover) var(--ease-out),box-shadow 280ms var(--ease-out)}
.p-nc-loot::before{content:"";position:absolute;inset:8px;pointer-events:none;--hc:color-mix(in srgb, var(--r) 70%, transparent);--arm:12px;
  background:
    linear-gradient(var(--hc),var(--hc)) bottom left / var(--arm) 2px, linear-gradient(var(--hc),var(--hc)) bottom left / 2px var(--arm),
    linear-gradient(var(--hc),var(--hc)) bottom right / var(--arm) 2px, linear-gradient(var(--hc),var(--hc)) bottom right / 2px var(--arm);
  background-repeat:no-repeat;opacity:0;transition:opacity 200ms var(--ease-out), inset 200ms var(--ease-snap)}
.p-nc-loot__tier{grid-row:1;justify-self:start;padding:3px 7px 2px;font:700 var(--fs-micro)/1.2 var(--ff-mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--bg-0);background:var(--r)}
.p-nc-loot__code{position:absolute;top:10px;right:12px;font:400 1.5rem/1 var(--ff-stencil);color:color-mix(in srgb, var(--r) 45%, transparent)}
.p-nc-loot__art{grid-row:2;display:grid;place-items:center;color:var(--r);transition:translate 360ms var(--ease-expo), scale 360ms var(--ease-expo)}
.p-nc-loot__art .i{width:clamp(48px, 2vw + 34px, 64px);height:clamp(48px, 2vw + 34px, 64px);stroke-width:1.3;
  filter:drop-shadow(0 0 18px color-mix(in srgb, var(--r) 45%, transparent))}
.p-nc-loot__name{grid-row:3;font:800 clamp(1.25rem, 1.05rem + .5vw, 1.5rem)/1.05 var(--ff-display);font-stretch:75%;text-transform:uppercase;letter-spacing:.01em}
.p-nc-loot:hover,.p-nc-loot:focus-visible{color:var(--text);border-color:var(--r);box-shadow:0 26px 60px -26px color-mix(in srgb, var(--r) 55%, transparent)}
.p-nc-loot:hover::before,.p-nc-loot:focus-visible::before{opacity:1;inset:5px}
.p-nc-loot:hover .p-nc-loot__art,.p-nc-loot:focus-visible .p-nc-loot__art{translate:0 -4px;scale:1.06}
.p-nc-loot:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
@media (hover:hover){ .p-nc-loot:hover{transform:translateY(-5px)} }
.p-nc-loot--red{background:
    radial-gradient(120% 62% at 50% 108%, rgb(255 90 78 / .42), transparent 72%),
    repeating-linear-gradient(135deg, rgb(255 90 78 / .09) 0 2px, transparent 2px 9px),
    linear-gradient(180deg, #2A1715, var(--bg-1))}

/* ─────────────────────────── FEATURES (rarity-accented) ─────────────────────────── */
.p-nc-gear{padding-block:clamp(72px, 7vw, 120px)}
.p-nc-feat{scroll-margin-top:calc(var(--header-h) + 24px)}
.p-nc-feat .feature__title{max-inline-size:15ch}
.p-nc-feat .kicker{gap:6px 10px}
.p-nc-tier{display:inline-flex;align-items:center;padding:3px 7px 2px;font:700 var(--fs-micro)/1.2 var(--ff-mono);letter-spacing:.14em;
  color:var(--bg-0);background:var(--r)}
.p-nc-vis{border-color:color-mix(in srgb, var(--r) 30%, var(--line));border-top:3px solid var(--r);
  background:
    radial-gradient(70% 60% at 50% 0%, color-mix(in srgb, var(--r) 16%, transparent), transparent 70%),
    radial-gradient(60% 60% at 15% 100%, rgb(111 211 232 / .05), transparent 70%),
    var(--bg-1)}
.p-nc-vis .mock{inline-size:100%;max-inline-size:600px}
.p-nc-vis__tier{position:absolute;top:0;left:0;z-index:3;padding:5px 10px 4px;font:700 var(--fs-micro)/1 var(--ff-mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--bg-0);background:var(--r)}
@media (max-width:767px){ .p-nc-vis{padding:36px 10px 14px} }
.p-nc-note{display:flex;align-items:flex-start;gap:10px;margin-top:var(--s-5);max-inline-size:40ch;padding:12px 14px;
  font-weight:500;line-height:1.5;color:var(--text);background:rgb(255 90 78 / .08);border-left:3px solid var(--danger)}
.p-nc-note .i{width:20px;height:20px;margin-top:2px;color:var(--danger)}

/* mock bits shared on this page */
.p-nc-ok{display:inline-flex;align-items:center;gap:4px;font:600 .75rem/1.3 var(--ff-mono);color:var(--ok);white-space:nowrap}
.p-nc-ok .i{width:14px;height:14px}
.dc-alias--sm{grid-row:auto}

/* 01 · /lfg mock */
.p-nc-lfg__fields{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:480px){ .p-nc-lfg__fields{grid-template-columns:repeat(4,minmax(0,auto))} }
.p-nc-lfg__need{font:700 1rem/1 var(--ff-mono);color:var(--accent)}
.p-nc-lfg__slots{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;list-style:none;padding:0;margin-top:12px}
.p-nc-mslot{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:58px;padding:6px 2px;min-width:0;
  background:var(--surface);border:1px solid var(--line-strong);border-top:2px solid var(--text-3)}
.p-nc-mslot b{font:400 1.25rem/1 var(--ff-stencil);color:var(--text)}
.p-nc-mslot span{font:500 var(--fs-micro)/1.2 var(--ff-mono);letter-spacing:.04em;text-transform:uppercase;color:var(--text-2);text-align:center}
.p-nc-mslot.is-open{background:transparent;border:1px dashed var(--accent);border-top-width:1px}
.p-nc-mslot.is-open b{font-family:var(--ff-mono);color:var(--accent)}
.p-nc-mslot.is-you{background:var(--accent);border:1px solid var(--accent)}
.p-nc-mslot.is-you b,.p-nc-mslot.is-you span{color:var(--on-accent)}
.p-nc-mslot.is-pop{animation:p-nc-pop-you 520ms var(--ease-expo) both}
.p-nc-lfg .dc-btn[aria-pressed="true"]{background:var(--surface-3);color:var(--text);border-color:var(--accent)}
.p-nc-lfg .mock__status:not(:empty){display:flex;gap:8px;align-items:flex-start}
.p-nc-lfg .mock__status .i,.p-nc-lobby .mock__status .i{width:16px;height:16px;margin-top:3px;flex:none;color:var(--ok)}

/* 02 · voice lobby mock */
.p-nc-lobby__cap{display:flex;align-items:center;gap:8px;padding:2px 90px 12px 0;margin-bottom:12px;border-bottom:1px solid var(--line);
  font:700 var(--fs-micro)/1.3 var(--ff-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--text-2)}
.p-nc-lobby__cap .i{width:16px;height:16px;color:var(--r-purple)}
.p-nc-lobby__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
@media (min-width:480px){ .p-nc-lobby__grid{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (min-width:1024px) and (max-width:1199px){ .p-nc-lobby__grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
.p-nc-mode{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-width:0;min-height:76px;padding:10px 10px 9px;text-align:left;
  color:var(--text);background:linear-gradient(180deg, var(--surface-2), var(--surface));border:1px solid var(--line-strong);
  transition:border-color var(--dur-hover) var(--ease-out),background-color var(--dur-hover) var(--ease-out)}
.p-nc-mode .i{width:20px;height:20px;color:var(--text-2)}
.p-nc-mode__name{font:700 .875rem/1.2 var(--ff-body)}
.p-nc-mode__cap{position:absolute;top:12px;right:10px;display:flex;gap:3px}
.p-nc-mode__cap i{width:6px;height:10px;background:var(--text-3)}
.p-nc-mode__note{position:absolute;top:10px;right:8px;padding:2px 5px;font:600 var(--fs-micro)/1.2 var(--ff-mono);color:var(--text-2);border:1px solid var(--line-strong)}
button.p-nc-mode:hover{border-color:var(--r-purple)}
.p-nc-mode.is-on,.p-nc-mode[aria-pressed="true"]{background:linear-gradient(180deg, rgb(180 140 244 / .22), rgb(180 140 244 / .08));border-color:var(--r-purple);box-shadow:inset 0 -3px 0 var(--r-purple)}
.p-nc-mode.is-on .i,.p-nc-mode[aria-pressed="true"] .i{color:var(--r-purple)}
.p-nc-mode.is-on .p-nc-mode__cap i,.p-nc-mode[aria-pressed="true"] .p-nc-mode__cap i{background:var(--r-purple)}
.p-nc-lobby__grid .p-nc-mode:last-child{grid-column:1 / -1;min-height:56px;flex-direction:row;align-items:center}
.p-nc-room{margin-top:12px;padding:12px;background:var(--bg-1);border:1px solid var(--line-strong);border-left:3px solid var(--r-purple)}
.p-nc-room__title{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font:700 var(--fs-small)/1.35 var(--ff-body);color:var(--text)}
.p-nc-room__title .i{width:18px;height:18px;color:var(--r-purple)}
.p-nc-room__cap{margin-left:auto;font:600 var(--fs-micro)/1 var(--ff-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--text-2)}
.p-nc-room__cap:empty{display:none}
.p-nc-room__ctrls{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.p-nc-room__ctrls .dc-btn{padding:0 12px}
.p-nc-room__ctrls .dc-btn[aria-pressed="true"]{border-color:var(--r-purple);background:rgb(180 140 244 / .16)}
.p-nc-lobby .mock__status:not(:empty){display:flex;gap:8px;align-items:flex-start;padding-inline:0}

/* 03 · rank verification mock */
.p-nc-rank{display:grid;gap:14px;padding-top:38px}
@media (min-width:560px){ .p-nc-rank{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center} }
.p-nc-rank__shot{position:relative;overflow:hidden;display:grid;grid-template-columns:auto 1fr;align-items:center;gap:14px;min-height:170px;padding:34px 16px 16px;
  background:
    linear-gradient(90deg, rgb(99 169 242 / .06) 1px, transparent 1px) 0 0 / 16px 16px,
    linear-gradient(rgb(99 169 242 / .06) 1px, transparent 1px) 0 0 / 16px 16px,
    linear-gradient(160deg, #1B2530, #10161B);
  border:1px solid rgb(99 169 242 / .45)}
.p-nc-rank__file{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;gap:6px;padding:6px 10px;
  font:500 var(--fs-micro)/1.2 var(--ff-mono);color:var(--text-2);background:rgb(0 0 0 / .35);border-bottom:1px solid rgb(99 169 242 / .25)}
.p-nc-rank__file .i{width:14px;height:14px;color:var(--r-blue)}
.p-nc-rank__badge{display:grid;place-items:center;width:72px;height:72px;border-radius:50%;color:var(--r-blue);
  background:radial-gradient(circle, rgb(99 169 242 / .25), transparent 70%);border:2px solid rgb(99 169 242 / .6)}
.p-nc-rank__badge .i{width:40px;height:40px;stroke-width:1.3}
.p-nc-rank__lines{display:grid;gap:8px}
.p-nc-rank__lines i{display:block;height:9px;background:rgb(233 231 223 / .16)}
.p-nc-rank__lines i:nth-child(1){width:88%;background:rgb(233 231 223 / .32)}
.p-nc-rank__lines i:nth-child(2){width:62%}
.p-nc-rank__lines i:nth-child(3){width:74%}
.p-nc-rank__beam{position:absolute;left:0;right:0;top:0;height:40%;pointer-events:none;opacity:0;
  background:linear-gradient(180deg, transparent, rgb(99 169 242 / .28) 80%, rgb(140 200 255 / .9) 98%, transparent);
  translate:0 -100%}
html.motion-ok .p-nc-rank.is-scan .p-nc-rank__beam{animation:p-nc-scan 1.3s var(--ease-inout) 1 both}
@keyframes p-nc-scan{0%{opacity:0;translate:0 -100%}15%{opacity:1}85%{opacity:1}100%{opacity:0;translate:0 260%}}
.p-nc-rank__steps{display:grid;gap:6px;list-style:none;padding:0;margin:0}
.p-nc-rank__steps li{display:grid;grid-template-columns:36px minmax(0,1fr);column-gap:10px;align-items:center;padding:8px 10px;
  background:var(--surface-2);border:1px solid var(--line-strong)}
.p-nc-rank__steps b{font:700 var(--fs-small)/1.3 var(--ff-body);color:var(--text)}
.p-nc-rank__steps li > span:last-child{grid-column:2;font:500 .75rem/1.35 var(--ff-mono);color:var(--text-2)}
.p-nc-rank__ico{grid-row:1 / span 2;display:grid;place-items:center;width:36px;height:36px;color:var(--r-blue);border:1px solid rgb(99 169 242 / .45)}
.p-nc-rank__ico .i{width:18px;height:18px}
.p-nc-rank__steps li.is-done{background:var(--ok-bg);border-color:rgb(124 203 139 / .6)}
.p-nc-rank__steps li.is-done .p-nc-rank__ico{color:var(--ok);border-color:var(--ok)}

/* ─────────────────────────── 04 · DANGER band + kill card (signature 2) ─────────────────────────── */
.p-nc-danger{background:#0E0B0B;border-block:1px solid rgb(255 90 78 / .22);padding-block:clamp(88px, 9vw, 152px);scroll-margin-top:var(--header-h)}
.p-nc-danger__bg{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(50% 60% at 72% 50%, rgb(255 90 78 / .16), transparent 70%),
    radial-gradient(40% 50% at 10% 90%, rgb(255 90 78 / .06), transparent 72%),
    repeating-linear-gradient(135deg, rgb(255 90 78 / .035) 0 14px, transparent 14px 28px)}
.p-nc-danger .feature__title{max-inline-size:15ch}
.p-nc-danger .feature__body{color:var(--text-2)}
.p-nc-vis--kill{background:radial-gradient(70% 60% at 50% 20%, rgb(255 90 78 / .18), transparent 70%), #140E0D;min-height:clamp(320px, 20vw + 200px, 480px)}
.p-nc-kill{position:relative;overflow:visible;padding-bottom:56px}
.p-nc-kill__msg{position:relative;padding:6px;margin:-6px}
.p-nc-kill__link{color:var(--danger);text-decoration:line-through 2px;background:rgb(255 90 78 / .1);padding:0 4px}
.p-nc-kill__msg .dc-text{opacity:.62}
.p-nc-kill__gone{display:inline-flex;align-items:center;gap:6px;font:600 .75rem/1.3 var(--ff-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--text-2)}
.p-nc-kill__gone .i{width:14px;height:14px}
.p-nc-kill__card{position:relative;margin-top:14px;box-shadow:0 20px 50px -20px rgb(255 90 78 / .45)}
.p-nc-kill__card .dc-kill__bar{font-size:.875rem;padding:10px 14px}
.p-nc-kill__eq{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;font:700 clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem)/1.1 var(--ff-mono)}
.p-nc-kill__eq code{font-size:inherit;color:var(--text)}
.p-nc-kill__eq code:first-child{color:var(--danger)}
.p-nc-kill__eq > span[aria-hidden]{color:var(--danger)}
.p-nc-kill__line{color:var(--text-2)}
.p-nc-kill__stamp{position:absolute;right:14px;bottom:10px;z-index:3;font-size:clamp(1.5rem, 1.1rem + 1.2vw, 2.25rem);padding:6px 16px 4px;border-width:3px;
  transform:rotate(-6deg);background:rgb(14 11 11 / .7)}
.p-nc-kill__foot{position:absolute;left:12px;bottom:8px}
.p-nc-kill__foot .dc-btn{padding-inline:8px}
/* armed / run states (JS + motion only; final state = no classes) */
.p-nc-kill.is-armed .p-nc-kill__card{opacity:0;transform:translateY(-18px) scale(1.16)}
.p-nc-kill.is-armed .p-nc-kill__stamp{opacity:0}
.p-nc-kill.is-armed .p-nc-kill__gone{opacity:0}
.p-nc-kill.is-armed .p-nc-kill__link{text-decoration-color:transparent}
.p-nc-kill.is-armed .p-nc-kill__msg .dc-text{opacity:1}
.p-nc-kill.is-scan .p-nc-kill__msg::after{content:"";position:absolute;top:0;bottom:0;left:0;width:30%;pointer-events:none;
  background:linear-gradient(90deg, transparent, rgb(255 90 78 / .35), transparent);animation:p-nc-sweep 620ms var(--ease-inout) both}
@keyframes p-nc-sweep{from{translate:-100% 0}to{translate:340% 0}}
.p-nc-kill.is-struck .p-nc-kill__link{text-decoration-color:currentColor;transition:text-decoration-color 160ms}
.p-nc-kill.is-slam .p-nc-kill__card{animation:p-nc-slam 280ms cubic-bezier(.55,.055,.675,.19) both}
.p-nc-kill.is-slam .p-nc-kill__gone{animation:cd-intro-fade 300ms var(--ease-out) both}
.p-nc-kill.is-slam .p-nc-kill__msg .dc-text{opacity:.62;transition:opacity 300ms var(--ease-out)}
.p-nc-kill.is-slam:not(.is-stamp) .p-nc-kill__stamp{opacity:0}   /* hidden between slam and stamp: appears exactly once */
.p-nc-kill.is-stamp .p-nc-kill__stamp{animation:p-nc-stamp 240ms cubic-bezier(.55,.055,.675,.19) both}
.p-nc-vis--kill.is-shake{animation:p-nc-shake 320ms linear both}
.p-nc-vis--kill.is-flash::after{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;background:rgb(255 90 78 / .22);animation:cd-intro-fade 300ms reverse both}
@keyframes p-nc-slam{0%{opacity:0;transform:translateY(-18px) scale(1.16)}70%{opacity:1}100%{opacity:1;transform:none}}
@keyframes p-nc-stamp{0%{opacity:0;transform:rotate(-14deg) scale(2.1)}100%{opacity:1;transform:rotate(-6deg) scale(1)}}
@keyframes p-nc-shake{0%,100%{translate:0 0}20%{translate:-5px 2px}40%{translate:4px -2px}60%{translate:-3px 1px}80%{translate:2px 0}}

/* 05 · /hoi mock */
.p-nc-hoi__seg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:0 0 12px;padding-right:0}
.p-nc-hoi__seg:not([hidden]) + .dc-chan{padding-right:0}
.p-nc-hoi .dc-chan{padding-right:90px}
.p-nc-hoi__seg:not([hidden]){margin-top:28px}
.p-nc-hoi__pick{display:flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:6px 8px;text-align:center;
  font:600 .8125rem/1.2 var(--ff-body);color:var(--text-2);background:var(--bg-1);border:1px solid var(--line-strong)}
.p-nc-hoi__pick .i{width:16px;height:16px;flex:none}
.p-nc-hoi__pick:hover{color:var(--text);border-color:var(--text-2)}
.p-nc-hoi__pick[aria-pressed="true"]{color:var(--text);background:color-mix(in srgb, var(--r) 12%, transparent);border-color:var(--r);box-shadow:inset 0 -2px 0 var(--r)}
.p-nc-hoi__pick[aria-pressed="true"] .i{color:var(--r)}
@media (max-width:479px){ .p-nc-hoi__pick{flex-direction:column;gap:3px;font-size:.75rem} }
.p-nc-hoi__ex{display:grid;gap:14px}
html.js .p-nc-hoi__ex{display:none}
html.js .p-nc-hoi__ex.is-active{display:grid}
html.no-js .p-nc-hoi__ex + .p-nc-hoi__ex{margin-top:18px;padding-top:18px;border-top:1px dashed var(--line-strong)}
.p-nc-hoi .dc-msg + .dc-msg{margin-top:0}
.p-nc-hoi__ans--unk{--e:var(--khaki)}
.p-nc-src{display:inline-flex;align-items:center;gap:6px;padding:3px 8px;font:600 var(--fs-micro)/1.3 var(--ff-mono);letter-spacing:.06em;text-transform:uppercase;border:1px solid currentColor}
.p-nc-src .i{width:13px;height:13px}
.p-nc-src--ok{color:var(--ok);background:var(--ok-bg)}
.p-nc-src--unk{color:var(--khaki);background:var(--khaki-bg);border-style:dashed}
.p-nc-hoi__typing{display:none;gap:5px;align-items:center;margin:10px 0 0 48px;height:18px}
.p-nc-hoi__typing span{width:7px;height:7px;background:var(--text-3);animation:p-nc-dot 600ms var(--ease-inout) 3}
.p-nc-hoi__typing span:nth-child(2){animation-delay:150ms}
.p-nc-hoi__typing span:nth-child(3){animation-delay:300ms}
@keyframes p-nc-dot{0%,100%{opacity:.3}50%{opacity:1}}
.p-nc-hoi.is-typing .p-nc-hoi__typing{display:flex}
.p-nc-hoi.is-typing .p-nc-hoi__ex.is-active .dc-msg:last-child{display:none}
.p-nc-hoi__ex.is-in .dc-msg:last-child{animation:cd-intro-up 420ms var(--ease-expo) both}

/* 06 · XP mock */
.p-nc-xp{display:grid;gap:12px}
.p-nc-xp__lvl{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-right:90px}
.p-nc-xp__label{font:700 var(--fs-micro)/1.3 var(--ff-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--text-2)}
.p-nc-xp__pips{display:flex;gap:6px;list-style:none;padding:0}
.p-nc-xp__pips li{width:28px;height:12px;border:1px solid var(--line-strong);background:transparent}
.p-nc-xp__pips li.is-on{background:var(--r);border-color:var(--r)}
.p-nc-xp__pips li.is-now{box-shadow:0 0 0 3px color-mix(in srgb, var(--r) 25%, transparent)}
.p-nc-xp__bar{height:12px;background:var(--bg-1);border:1px solid var(--line-strong);overflow:hidden}
.p-nc-xp__bar i{display:block;height:100%;width:68%;background:linear-gradient(90deg, color-mix(in srgb, var(--r) 45%, #1B1F1C), var(--r));transform-origin:0 50%}
html.motion-ok .p-nc-xp.is-fill .p-nc-xp__bar i{animation:p-nc-grow 1.1s var(--ease-expo) both}
@keyframes p-nc-grow{from{scale:0 1}to{scale:1 1}}
.p-nc-xp__meta{display:flex;justify-content:space-between;margin-top:-6px;font:600 var(--fs-micro)/1.3 var(--ff-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--text-2)}
.p-nc-xp__board{display:grid;gap:6px;list-style:none;padding:0;margin-top:4px}
.p-nc-xp__board li{display:grid;grid-template-columns:22px auto minmax(0,1fr);align-items:center;gap:10px;padding:6px 10px;background:var(--surface-2);border:1px solid var(--line)}
.p-nc-xp__board b{font:400 1.125rem/1 var(--ff-stencil);color:var(--text-2)}
.p-nc-xp__board .dc-alias{width:auto;min-width:36px;padding:0 6px}
.p-nc-xp__board i{display:block;height:8px;width:calc(var(--w,.5) * 100%);background:color-mix(in srgb, var(--r) 55%, transparent)}
.p-nc-xp__board li.is-you{border-color:var(--accent);background:var(--accent-tint)}
.p-nc-xp__board li.is-you i{background:var(--accent)}
.p-nc-xp__board li.is-you b{color:var(--accent)}
.p-nc-xp__event{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;margin-top:4px;padding:12px;
  background:linear-gradient(90deg, color-mix(in srgb, var(--r) 10%, transparent), transparent);border:1px solid var(--line-strong);border-left:3px solid var(--r)}
.p-nc-xp__event > .i{width:26px;height:26px;color:var(--r)}
.p-nc-xp__event p{display:grid;gap:2px}
.p-nc-xp__event b{font:700 var(--fs-small)/1.3 var(--ff-body)}
.p-nc-xp__event p span{font:500 .75rem/1.3 var(--ff-mono);color:var(--ok)}
.p-nc-xp__bell{display:grid;place-items:center;width:36px;height:36px;color:var(--on-accent);background:var(--accent)}
.p-nc-xp__bell .i{width:18px;height:18px}

/* ─────────────────────────── LUẬT CHƠI ─────────────────────────── */
.p-nc-rules__bg{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(50% 70% at 50% 0%, rgb(124 203 139 / .08), transparent 70%)}
.p-nc-rules__list{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;list-style:none;padding:0;margin:0}
@media (min-width:640px){ .p-nc-rules__list{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:1024px){ .p-nc-rules__list{grid-template-columns:repeat(5,minmax(0,1fr));gap:14px} }
.p-nc-rule{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:18px;min-width:0;min-height:230px;padding:22px 20px 24px;
  background:linear-gradient(180deg, var(--surface), var(--bg-0));border:1px solid var(--line-strong);border-top:3px solid var(--ok)}
.p-nc-rule__no{position:absolute;right:-.06em;bottom:-.22em;font:400 7rem/1 var(--ff-stencil);color:rgb(233 231 223 / .05);pointer-events:none}
.p-nc-rule__icon{display:grid;place-items:center;width:56px;height:56px;color:var(--ok);background:var(--ok-bg);border:1px solid rgb(124 203 139 / .5)}
.p-nc-rule__icon .i{width:28px;height:28px}
.p-nc-rule__text{position:relative;font:500 1.0625rem/1.45 var(--ff-body);color:var(--text-2);text-wrap:pretty}
.p-nc-rule__text b{color:var(--text);font-weight:700}
@media (max-width:639px){
  .p-nc-rule{flex-direction:row;align-items:center;min-height:0;padding:16px}
  .p-nc-rule__icon{flex:none;width:48px;height:48px}
}
.p-nc-rules__list > .p-nc-rule:last-child{border-top-color:var(--intel)}
.p-nc-rules__list > .p-nc-rule:last-child .p-nc-rule__icon{color:var(--intel);background:var(--intel-bg);border-color:rgb(111 211 232 / .5)}
@media (min-width:640px) and (max-width:1023px){ .p-nc-rules__list > .p-nc-rule:last-child{grid-column:1 / -1;min-height:0} }

/* ─────────────────────────── HỎI NHANH ─────────────────────────── */
.p-nc-faq{padding-block:clamp(72px, 7vw, 120px)}
@media (min-width:1024px){
  .p-nc-faq__grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:var(--s-8);align-items:start}
  .p-nc-faq__head{margin-bottom:0;position:sticky;top:calc(var(--header-h) + 32px)}
}
.p-nc-faq__list{max-inline-size:none}
.p-nc-links{display:flex;flex-wrap:wrap;gap:0 20px}
.p-nc-links .ext-link{display:inline-flex;align-items:center;min-height:44px;padding-block:10px}

/* ─────────────────────────── XUẤT KÍCH ─────────────────────────── */
.p-nc-deploy{padding-block:clamp(96px, 10vw, 168px)}
.p-nc-deploy__shade{position:absolute;inset:0;background:
  radial-gradient(60% 55% at 50% 45%, rgb(11 13 12 / .82), rgb(11 13 12 / .45) 70%, transparent),
  linear-gradient(180deg, var(--bg-0) 0%, transparent 25%, transparent 75%, var(--bg-0) 100%)}
.p-nc-deploy .terrain{--terrain-fade:var(--bg-0)}
.p-nc-steps{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;max-inline-size:1200px;margin:var(--s-7) auto 0;list-style:none;padding:0;counter-reset:none;text-align:left}
@media (min-width:640px){ .p-nc-steps{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:1024px){ .p-nc-steps{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px} }
.p-nc-step{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:14px;min-width:0;min-height:96px;padding:16px 18px;
  background:rgb(17 20 18 / .86);border:1px solid var(--line-strong);border-top:3px solid var(--ok)}
.p-nc-step__no{position:absolute;right:10px;top:6px;font:400 2.5rem/1 var(--ff-stencil);color:rgb(124 203 139 / .25)}
.p-nc-step__icon{display:grid;place-items:center;width:48px;height:48px;color:var(--ok);background:var(--ok-bg);border:1px solid rgb(124 203 139 / .5)}
.p-nc-step__icon .i{width:24px;height:24px}
.p-nc-step__text{font:700 1.0625rem/1.35 var(--ff-body);color:var(--text);padding-right:28px}
.p-nc-step--go{border-top-color:var(--accent);background:linear-gradient(180deg, rgb(255 159 28 / .14), rgb(17 20 18 / .9))}
.p-nc-step--go .p-nc-step__icon{color:var(--on-accent);background:var(--accent);border-color:var(--accent)}
.p-nc-step--go .p-nc-step__no{color:rgb(255 159 28 / .35)}
@media (min-width:1024px){
  .p-nc-step:not(:last-child)::after{content:"";position:absolute;top:50%;right:-12px;z-index:1;width:10px;height:10px;
    border-top:2px solid var(--ok);border-right:2px solid var(--ok);transform:translateY(-50%) rotate(45deg)}
}
.p-nc-deploy .btn-row{margin-top:var(--s-7)}

/* ─────────────────────────── JS off: no dead mock buttons ─────────────────────────── */
html.no-js .p-nc-lfg .dc-actions,html.no-js .p-nc-room__ctrls,html.no-js [data-kill-replay]{display:none}
html.no-js .p-nc-mode{cursor:default}

/* ─────────────────────────── reduced motion / print ─────────────────────────── */
html.motion-off .p-nc-hoi__typing{display:none !important}
@media (prefers-reduced-motion: reduce){ .p-nc-hoi__typing{display:none !important} }
@media print{
  .p-nc-danger,.p-nc-vis,.p-nc-loot{background:#fff !important}
  .p-nc-kill__stamp,.p-nc-key__halo{display:none}
}

/* ─────────────────────────── small phones: give mock embeds the full width ─────────────────────────── */
@media (max-width:519px){
  .p-nc-vis .mock{padding:12px}
  .p-nc-vis .p-nc-kill{padding-bottom:68px}                           /* keep room for the stamp + Xem lại */
  .p-nc-lfg .dc-embed,.p-nc-hoi .dc-embed{grid-column:1 / -1 !important}
  .p-nc-lfg .dc-embed{margin-top:6px}
  .p-nc-mslot{min-height:52px}
  .p-nc-mslot span{letter-spacing:0}
  .p-nc-loot{min-height:176px}
}