/* NETHERNET — card faces.
   Every measurement is written in millimetres through --mm,
   so the same markup prints at true size (--mm: 1mm) or scales on screen. */

:root {
  --mm: 4.6px;
  --cw: 63;           /* trim width  (mm) */
  --ch: 88;           /* trim height (mm) */
  --paper: #ECE8DF;
  --paper-2: #DCD7CB;
  --ink: #141414;
  --stock: #17171B;   /* role card / back stock */
  --stock-2: #222228;
  --order: #E5A50A;
  --ghost: #1AA6C4;
  --virus: #7D4FD8;
  --zero: #2BAE66;
  --vermilion: #E2532D;
  --f-display: 'Dela Gothic One', 'Noto Sans JP', 'Noto Sans TC', sans-serif;
  --f-body: 'Zen Kaku Gothic New', 'Noto Sans JP', 'Noto Sans TC', 'Yu Gothic', sans-serif;
  --f-mono: 'IBM Plex Mono', ui-monospace, monospace;
}
.size-54 { --cw: 54; --ch: 86; }

.cn {
  width: calc(var(--cw) * var(--mm));
  height: calc(var(--ch) * var(--mm));
  border-radius: calc(3 * var(--mm));
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  font-family: var(--f-body);
  -webkit-font-smoothing: antialiased;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
  box-sizing: border-box;
  line-height: 1.3;
  text-align: left;
}
.cn *, .cn *::before, .cn *::after { box-sizing: border-box; }
.cn svg { display: block; }
.cn .safe {
  position: absolute; inset: calc(3 * var(--mm));
  border: 1px dashed rgba(226, 83, 45, .7);
  pointer-events: none; z-index: 9; display: none;
}
.show-safe .cn .safe { display: block; }

.cn .mono { font-family: var(--f-mono); }

/* ---------- inline keywords ---------- */
.cn .kw { font-weight: 900; white-space: nowrap; }
.cn .kw-V { box-shadow: inset 0 calc(-1 * var(--mm)) 0 var(--virus); }
.cn .kw-O { box-shadow: inset 0 calc(-1 * var(--mm)) 0 var(--order); }
.cn .kw-G { box-shadow: inset 0 calc(-1 * var(--mm)) 0 var(--ghost); }

/* =========================================================
   DATA CARD — paper stock, one spot colour per faction
   ========================================================= */
.cn.data { background: var(--paper); color: var(--ink); display: flex; flex-direction: column; }
.cn.data.c-ORDER { --fc: var(--order); --fink: #141210; }
.cn.data.c-GHOST { --fc: var(--ghost); --fink: #0E1315; }
.cn.data.c-VIRUS { --fc: var(--virus); --fink: #F4F1EA; }

.dc-top {
  display: flex; align-items: stretch; gap: calc(2.2 * var(--mm));
  padding: calc(3.2 * var(--mm)) calc(3.2 * var(--mm)) 0;
  height: calc(16 * var(--mm));
}
.dc-idx {
  width: calc(11 * var(--mm)); height: calc(11 * var(--mm));
  background: var(--fc); color: var(--fink);
  display: flex; align-items: center; justify-content: center;
  border-radius: calc(.8 * var(--mm));
  flex-shrink: 0;
}
.dc-idx svg { width: calc(7 * var(--mm)); height: calc(7 * var(--mm)); }
.dc-proto { display: flex; flex-direction: column; justify-content: center; min-width: 0; height: calc(11 * var(--mm)); }
.dc-proto .p-row { display: flex; align-items: center; gap: calc(1 * var(--mm)); }
.dc-proto svg { width: calc(4.2 * var(--mm)); height: calc(4.2 * var(--mm)); flex-shrink: 0; }
.dc-proto b { font-family: var(--f-body); font-weight: 900; font-size: calc(4 * var(--mm)); letter-spacing: .02em; line-height: 1; white-space: nowrap; }
.dc-proto small { font-size: calc(2.3 * var(--mm)); font-weight: 700; opacity: .62; margin-top: calc(.9 * var(--mm)); white-space: nowrap; }
.dc-no { margin-left: auto; font-family: var(--f-mono); font-size: calc(2.4 * var(--mm)); font-weight: 600; opacity: .5; padding-top: calc(.6 * var(--mm)); }

.dc-rule { height: calc(.35 * var(--mm)); background: var(--ink); margin: 0 calc(3.2 * var(--mm)); }

.dc-body { flex: 1; padding: calc(3 * var(--mm)) calc(3.2 * var(--mm)) calc(2.5 * var(--mm)); display: flex; flex-direction: column; min-height: 0; }
.dc-timing {
  align-self: flex-start;
  font-size: calc(2.3 * var(--mm)); font-weight: 900; letter-spacing: .06em;
  background: var(--ink); color: var(--paper);
  padding: calc(.5 * var(--mm)) calc(1.4 * var(--mm));
  border-radius: calc(.5 * var(--mm));
}
.dc-name {
  font-family: var(--f-display); font-weight: 400;
  font-size: calc(min(var(--fmax, 7.4), (var(--cw) - 8) / var(--len, 4)) * var(--mm));
  line-height: 1.05; margin-top: calc(2.4 * var(--mm)); white-space: nowrap; letter-spacing: -.01em;
}
.dc-sub { font-family: var(--f-mono); font-size: calc(2.3 * var(--mm)); font-weight: 600; letter-spacing: .14em; margin-top: calc(1.2 * var(--mm)); opacity: .7; }
.dc-text { font-size: calc(3 * var(--mm)); font-weight: 700; line-height: 1.5; margin-top: auto; padding-top: calc(2 * var(--mm)); }
.size-54 .dc-text { font-size: calc(2.85 * var(--mm)); }

.dc-band {
  height: calc(23 * var(--mm));
  background: var(--fc); color: var(--fink);
  display: flex; align-items: center; gap: calc(2.6 * var(--mm));
  padding: 0 calc(3.2 * var(--mm));
  position: relative;
}
.c-VIRUS .dc-band {
  background-image: repeating-linear-gradient(135deg, rgba(0,0,0,.13) 0 calc(.5 * var(--mm)), transparent calc(.5 * var(--mm)) calc(2.2 * var(--mm)));
}
.dc-kanji {
  font-family: var(--f-display); font-size: calc(11.5 * var(--mm)); line-height: 1;
  width: calc(16 * var(--mm)); height: calc(16 * var(--mm));
  display: flex; align-items: center; justify-content: center;
  border: calc(.6 * var(--mm)) solid currentColor; border-radius: calc(1 * var(--mm));
}
.dc-fac b { display: block; font-family: var(--f-display); font-weight: 400; font-size: calc(5 * var(--mm)); line-height: 1; letter-spacing: .04em; }
.dc-fac small { display: block; font-size: calc(2.4 * var(--mm)); font-weight: 900; margin-top: calc(1.2 * var(--mm)); opacity: .8; }
.dc-serial { position: absolute; right: calc(3.2 * var(--mm)); bottom: calc(2.6 * var(--mm)); font-family: var(--f-mono); font-size: calc(2.1 * var(--mm)); font-weight: 600; opacity: .75; }

/* Simplified Chinese: the display face lacks many glyphs, so use the bold Gothic. */
.cn.l-zh .dc-name, .cn.l-zh .rc-name { font-family: var(--f-body); font-weight: 900; letter-spacing: 0; }

/* =========================================================
   ROLE CARD — Operator licence: emblem as portrait, codename,
   ROOT mark; paper panel with one row per skill
   ========================================================= */
.cn.role { background: var(--stock); color: var(--paper); display: flex; flex-direction: column; box-shadow: 0 0 0 1px #4A4A56; }
.id-frame { position: absolute; inset: calc(1.3 * var(--mm)); border: calc(.35 * var(--mm)) solid rgba(236,232,223,.7); border-radius: calc(2 * var(--mm)); pointer-events: none; z-index: 2; }
.id-hdr { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: calc(1.2 * var(--mm)); padding: calc(3.2 * var(--mm)) calc(3.6 * var(--mm)) 0; }
.id-kind { font-family: var(--f-display); font-size: calc(2.9 * var(--mm)); letter-spacing: .14em; white-space: nowrap; }
.id-slot { width: calc(8 * var(--mm)); height: calc(2 * var(--mm)); border-radius: calc(1 * var(--mm)); background: #0A0A0C; box-shadow: inset 0 0 0 calc(.35 * var(--mm)) rgba(236,232,223,.5); }
.id-no { justify-self: end; font-family: var(--f-mono); font-size: calc(2 * var(--mm)); font-weight: 600; opacity: .8; white-space: nowrap; }
.id-no b { font-family: var(--f-display); font-weight: 400; font-size: calc(3.4 * var(--mm)); margin-left: calc(.5 * var(--mm)); }

.id-main { display: flex; gap: calc(3 * var(--mm)); align-items: center; padding: calc(2.6 * var(--mm)) calc(3.6 * var(--mm)) calc(3 * var(--mm)); }
.id-photo { flex: none; position: relative; width: calc(22 * var(--mm)); height: calc(22 * var(--mm)); display: flex; align-items: center; justify-content: center;
  background:
    linear-gradient(var(--paper), var(--paper)) left top / calc(3 * var(--mm)) calc(.45 * var(--mm)) no-repeat,
    linear-gradient(var(--paper), var(--paper)) left top / calc(.45 * var(--mm)) calc(3 * var(--mm)) no-repeat,
    linear-gradient(var(--paper), var(--paper)) right top / calc(3 * var(--mm)) calc(.45 * var(--mm)) no-repeat,
    linear-gradient(var(--paper), var(--paper)) right top / calc(.45 * var(--mm)) calc(3 * var(--mm)) no-repeat,
    linear-gradient(var(--paper), var(--paper)) left bottom / calc(3 * var(--mm)) calc(.45 * var(--mm)) no-repeat,
    linear-gradient(var(--paper), var(--paper)) left bottom / calc(.45 * var(--mm)) calc(3 * var(--mm)) no-repeat,
    linear-gradient(var(--paper), var(--paper)) right bottom / calc(3 * var(--mm)) calc(.45 * var(--mm)) no-repeat,
    linear-gradient(var(--paper), var(--paper)) right bottom / calc(.45 * var(--mm)) calc(3 * var(--mm)) no-repeat; }
.size-54 .id-photo { width: calc(18.5 * var(--mm)); height: calc(18.5 * var(--mm)); }
.id-photo svg { width: 70%; height: 70%; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: square; stroke-linejoin: miter; }
.id-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rc-name { font-family: var(--f-display); font-weight: 400; white-space: nowrap; line-height: 1.12;
  font-size: calc(min(6.6, (var(--cw) - 34) / var(--len, 4)) * var(--mm)); }
.size-54 .rc-name { font-size: calc(min(5.8, (var(--cw) - 29.5) / var(--len, 4)) * var(--mm)); }
.rc-en { font-family: var(--f-mono); font-size: calc(2 * var(--mm)); font-weight: 600; letter-spacing: .12em; opacity: .7; white-space: nowrap; overflow: hidden; margin-top: calc(.6 * var(--mm)); }
.id-tags { display: flex; gap: calc(1.2 * var(--mm)); margin-top: calc(2 * var(--mm)); align-items: center; }
.rc-tag { font-size: calc(2.3 * var(--mm)); font-weight: 900; letter-spacing: .06em; border: calc(.3 * var(--mm)) solid currentColor; padding: 0 calc(1.1 * var(--mm)); border-radius: calc(.4 * var(--mm)); line-height: 1.35; white-space: nowrap; }
.id-root { font-family: var(--f-mono); font-size: calc(2 * var(--mm)); font-weight: 700; letter-spacing: .14em; line-height: 1.5; padding: 0 calc(1.1 * var(--mm)); background: var(--paper); color: var(--stock); border-radius: calc(.4 * var(--mm)); }
.id-root::before { content: '#'; margin-right: calc(.4 * var(--mm)); }

.rc-panel { flex: 1; min-height: 0; background: var(--paper); color: var(--ink); display: flex; flex-direction: column; margin: 0 calc(1.3 * var(--mm)) calc(1.3 * var(--mm)); border-radius: 0 0 calc(2 * var(--mm)) calc(2 * var(--mm));
  padding: calc(2.6 * var(--mm)) calc(2.6 * var(--mm)) calc(2.2 * var(--mm));
  clip-path: polygon(0 0, calc(100% - 6 * var(--mm)) 0, 100% calc(6 * var(--mm)), 100% 100%, 0 100%); }
.rc-sname { font-size: calc(3.7 * var(--mm)); font-weight: 900; letter-spacing: .02em; line-height: 1.15; padding-bottom: calc(1.4 * var(--mm)); border-bottom: calc(.45 * var(--mm)) solid var(--ink); margin-right: calc(5 * var(--mm)); }
.rc-skills { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: calc(2.2 * var(--mm)); padding: calc(2 * var(--mm)) 0 calc(1.6 * var(--mm)); }
.rc-foot { display: flex; align-items: center; justify-content: space-between; font-family: var(--f-mono); font-size: calc(1.8 * var(--mm)); font-weight: 600; opacity: .6; letter-spacing: .1em; }
.rc-bars { width: calc(16 * var(--mm)); height: calc(2.4 * var(--mm)); background: repeating-linear-gradient(90deg, var(--ink) 0 calc(.35 * var(--mm)), transparent 0 calc(.8 * var(--mm)), var(--ink) 0 calc(1.6 * var(--mm)), transparent 0 calc(2.1 * var(--mm))); }

/* skill rows — shared by the printed card and the in-game role panel */
.sk-row { display: flex; gap: calc(2 * var(--mm)); align-items: flex-start; }
.sk-badge { flex: none; width: calc(12.6 * var(--mm)); min-height: calc(11.4 * var(--mm)); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(.3 * var(--mm)); border-radius: calc(.8 * var(--mm)); position: relative; padding: calc(.8 * var(--mm)) 0; }
.sk-badge i { font-style: normal; font-size: calc(5.2 * var(--mm)); font-weight: 900; line-height: 1; }
.sk-badge b { font-size: calc(2.25 * var(--mm)); font-weight: 900; line-height: 1.1; text-align: center; letter-spacing: 0; white-space: nowrap; }
.sk-txt { flex: 1; min-width: 0; font-size: calc(3.25 * var(--mm)); font-weight: 700; line-height: 1.42; align-self: center; }
.size-54 .sk-txt { font-size: calc(3 * var(--mm)); }
.size-54 .sk-badge { width: calc(11.2 * var(--mm)); }
.size-54 .sk-badge b { font-size: calc(2.05 * var(--mm)); }
/* always on: solid block */
.tm-PASSIVE .sk-badge { background: var(--ink); color: var(--paper); }
/* once per game: outlined ticket with a tick box to mark it used */
.tm-ONCE .sk-badge { border: calc(.5 * var(--mm)) solid var(--ink); background: transparent; color: var(--ink); }
.tm-ONCE .sk-badge::before, .tm-ONCE .sk-badge::after { content: ''; position: absolute; top: 50%; width: calc(1.8 * var(--mm)); height: calc(1.8 * var(--mm)); margin-top: calc(-.9 * var(--mm)); border-radius: 50%; background: var(--paper); border: calc(.5 * var(--mm)) solid var(--ink); }
.tm-ONCE .sk-badge::before { left: calc(-1.2 * var(--mm)); clip-path: inset(0 0 0 50%); }
.tm-ONCE .sk-badge::after { right: calc(-1.2 * var(--mm)); clip-path: inset(0 50% 0 0); }
.tm-ONCE .sk-badge u { position: absolute; top: calc(.6 * var(--mm)); right: calc(.6 * var(--mm)); width: calc(1.8 * var(--mm)); height: calc(1.8 * var(--mm)); border: calc(.3 * var(--mm)) solid var(--ink); }
/* once per round: dashed outline */
.tm-ROUND .sk-badge { border: calc(.5 * var(--mm)) dashed var(--ink); color: var(--ink); }
/* a used once-only skill: box ticked, text faded */
.sk-used .sk-txt { opacity: .4; text-decoration: line-through; }
.tm-ONCE.sk-used .sk-badge u::after { content: '✓'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: calc(1.8 * var(--mm)); font-weight: 900; line-height: 1; text-decoration: none; }
/* on crash: red block */
.tm-DEATH .sk-badge { background: var(--vermilion); color: #FFF6EE; }

/* =========================================================
   IDENTITY CARD — full flood
   ========================================================= */
.cn.ident { color: var(--iink); background: var(--ic); display: flex; flex-direction: column; }
.cn.ident.i-ORDER { --ic: var(--order); --iink: #141210; }
.cn.ident.i-GHOST { --ic: var(--ghost); --iink: #0E1315; }
.cn.ident.i-ZERO  { --ic: var(--zero);  --iink: #0F1410; }
.id-head { display: flex; justify-content: space-between; align-items: center; padding: calc(3.4 * var(--mm)) calc(3.4 * var(--mm)) 0; }
.id-head .mono { font-size: calc(2.4 * var(--mm)); font-weight: 600; letter-spacing: .14em; }
.id-head span:last-child { font-size: calc(2.6 * var(--mm)); font-weight: 900; border: calc(.4 * var(--mm)) solid currentColor; padding: calc(.3 * var(--mm)) calc(1.4 * var(--mm)); border-radius: calc(.5 * var(--mm)); }
.id-mark { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(2 * var(--mm)); min-height: 0; }
.id-kanji {
  font-family: var(--f-display); font-size: calc(19 * var(--mm)); line-height: 1;
  width: calc(31 * var(--mm)); height: calc(31 * var(--mm));
  display: flex; align-items: center; justify-content: center;
  border: calc(1 * var(--mm)) solid currentColor; border-radius: calc(1.6 * var(--mm));
}
.id-title { font-family: var(--f-display); font-size: calc(6.6 * var(--mm)); letter-spacing: .08em; line-height: 1; }
.id-text { background: var(--ink); color: var(--paper); margin: 0 calc(2.4 * var(--mm)) calc(2.4 * var(--mm)); padding: calc(2.6 * var(--mm)) calc(2.8 * var(--mm)); border-radius: calc(1 * var(--mm)); font-size: calc(2.75 * var(--mm)); font-weight: 700; line-height: 1.5; }
.id-text .lbl { display: block; font-family: var(--f-mono); font-size: calc(2 * var(--mm)); font-weight: 600; letter-spacing: .16em; color: var(--ic); margin-bottom: calc(.8 * var(--mm)); }
.id-text .lbl + p { margin: 0; }
.id-text p + .lbl { margin-top: calc(1.8 * var(--mm)); }
.i-ZERO .id-kanji { font-size: calc(15.5 * var(--mm)); }
.i-ZERO .id-mark { gap: calc(1.4 * var(--mm)); }
.i-ZERO .id-kanji { width: calc(25 * var(--mm)); height: calc(25 * var(--mm)); }
.size-54 .id-text { font-size: calc(2.6 * var(--mm)); }

/* =========================================================
   BACKS + REFERENCE
   ========================================================= */
.cn.back { background: var(--stock); color: var(--paper); }
.cn.back svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.cn.back.id-back { background: var(--paper); color: var(--ink); }

.cn.ref { background: var(--paper); color: var(--ink); padding: calc(3.4 * var(--mm)); display: flex; flex-direction: column; }
.ref-title { display: flex; justify-content: space-between; align-items: baseline; border-bottom: calc(.5 * var(--mm)) solid var(--ink); padding-bottom: calc(1.4 * var(--mm)); }
.ref-title b { font-family: var(--f-display); font-weight: 400; font-size: calc(5 * var(--mm)); }
.ref-title span { font-family: var(--f-mono); font-size: calc(2.1 * var(--mm)); font-weight: 600; opacity: .6; }
.ref ol { list-style: none; margin: calc(2 * var(--mm)) 0 0; padding: 0; }
.ref li { display: grid; grid-template-columns: calc(5 * var(--mm)) 1fr; gap: calc(1.2 * var(--mm)); padding: calc(1.2 * var(--mm)) 0; border-bottom: calc(.2 * var(--mm)) solid rgba(0,0,0,.18); font-size: calc(2.5 * var(--mm)); font-weight: 700; line-height: 1.4; }
.ref li i { font-style: normal; font-family: var(--f-mono); font-weight: 600; opacity: .55; }
.ref li b { display: block; font-weight: 900; font-size: calc(2.8 * var(--mm)); }
.ref .ref-foot { margin-top: auto; display: flex; gap: calc(1 * var(--mm)); }
.ref .ref-foot span { flex: 1; text-align: center; font-size: calc(2.3 * var(--mm)); font-weight: 900; padding: calc(1 * var(--mm)) 0; border-radius: calc(.5 * var(--mm)); }

/* =========================================================
   MINI CHIP (received cards on the table)
   ========================================================= */
.chip {
  display: inline-flex; align-items: center; gap: 4px;
  height: 22px; padding: 0 6px 0 3px; border-radius: 3px;
  font: 700 11px/1 var(--f-body); white-space: nowrap;
}
.chip .k { font-family: var(--f-body); font-weight: 900; font-size: 13px; width: 16px; text-align: center; }
.chip svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.2; }
.chip.c-ORDER { background: var(--order); color: #141210; }
.chip.c-GHOST { background: var(--ghost); color: #0E1315; }
.chip.c-VIRUS { background: var(--virus); color: #F4F1EA; }

/* =========================================================
   DATA CARD v2 — the pictogram is the card.
   Readable without Japanese: one big sign, faction accent inside it.
   ========================================================= */
.cn.data { --acc: var(--fc); }
.cn.data .dc-body { padding: calc(2.4 * var(--mm)) calc(3.2 * var(--mm)) calc(2.2 * var(--mm)); gap: calc(1.6 * var(--mm)); }
.dc-meta { display: flex; align-items: center; justify-content: space-between; gap: calc(1 * var(--mm)); }
.dc-meta .dc-timing { align-self: auto; }
.dc-alt { font-size: calc(2.3 * var(--mm)); font-weight: 900; opacity: .5; white-space: nowrap; }
.dc-hero { --ps: calc((var(--ch) - 57) * var(--mm)); display: flex; align-items: stretch; gap: calc(1.6 * var(--mm)); height: var(--ps); }
.dc-picto { width: var(--ps); height: var(--ps); flex-shrink: 0; color: var(--ink); position: relative; }
.dc-picto svg { width: 100%; height: 100%; overflow: visible; }
/* fine registration corners around the sign */
.dc-picto::before { content: ''; position: absolute; inset: calc(-1 * var(--mm));
  background:
    linear-gradient(var(--ink), var(--ink)) 0 0 / calc(2.4 * var(--mm)) calc(.3 * var(--mm)) no-repeat,
    linear-gradient(var(--ink), var(--ink)) 0 0 / calc(.3 * var(--mm)) calc(2.4 * var(--mm)) no-repeat,
    linear-gradient(var(--ink), var(--ink)) 100% 100% / calc(2.4 * var(--mm)) calc(.3 * var(--mm)) no-repeat,
    linear-gradient(var(--ink), var(--ink)) 100% 100% / calc(.3 * var(--mm)) calc(2.4 * var(--mm)) no-repeat;
  opacity: .55; }
.c-VIRUS .dc-picto svg [fill="var(--acc)"], .c-VIRUS .dc-picto svg [stroke="var(--acc)"] { filter: saturate(1.1); }
.dc-vname {
  writing-mode: vertical-rl; text-orientation: upright;
  font-family: var(--f-display); font-weight: 400; line-height: 1;
  font-size: calc(min(6.4, (var(--ch) - 57) / var(--len, 4) * .98) * var(--mm));
  letter-spacing: -.02em; margin-left: auto; white-space: nowrap;
}
.cn.l-zh .dc-vname { font-family: var(--f-body); font-weight: 900; }
.dc-ven { writing-mode: vertical-rl; font-family: var(--f-mono); font-size: calc(2.2 * var(--mm)); font-weight: 600; letter-spacing: .2em; opacity: .55; white-space: nowrap; }
.cn.data .dc-text { margin-top: auto; padding-top: 0; font-size: calc(2.75 * var(--mm)); line-height: 1.45; }
.size-54 .cn.data .dc-text { font-size: calc(2.55 * var(--mm)); }
.cn.data .dc-band { height: calc(18 * var(--mm)); }
.cn.data .dc-kanji { width: calc(12.5 * var(--mm)); height: calc(12.5 * var(--mm)); font-size: calc(9 * var(--mm)); }
.cn.data .dc-fac b { font-size: calc(4.6 * var(--mm)); }

/* small uses of the pictogram: accent shape takes the ink colour */
.dc-idx { --acc: currentColor; }
.dc-idx svg { width: calc(7.6 * var(--mm)); height: calc(7.6 * var(--mm)); }
.chip { --acc: currentColor; }
.chip svg { stroke-width: 4.6; }

/* =========================================================
   PROTOCOL STRIP — three looks you can tell apart without reading:
   ROUTE solid dark / DIRECT dark with chevrons / OPEN light outlined
   ========================================================= */
.cn.data .dc-top { height: auto; padding: calc(3.2 * var(--mm)) calc(3.2 * var(--mm)) 0; gap: calc(1.6 * var(--mm)); align-items: stretch; }
.cn.data .dc-idx { width: calc(11.5 * var(--mm)); height: calc(11.5 * var(--mm)); }
.dc-pstrip { flex: 1; min-width: 0; height: calc(11.5 * var(--mm)); border-radius: calc(.9 * var(--mm)); display: flex; align-items: center; gap: calc(1.4 * var(--mm)); padding: 0 calc(1.8 * var(--mm)) 0 calc(1.4 * var(--mm)); position: relative; overflow: hidden; }
.dc-picon svg { width: calc(7.6 * var(--mm)); height: calc(7.6 * var(--mm)); }
.dc-pword { display: flex; flex-direction: column; line-height: 1; min-width: 0; }
.dc-pword b { font-family: var(--f-display); font-weight: 400; font-size: calc(4.2 * var(--mm)); letter-spacing: .04em; }
.dc-pword small { font-size: calc(2.1 * var(--mm)); font-weight: 900; opacity: .75; margin-top: calc(.8 * var(--mm)); white-space: nowrap; }
.dc-pstrip .dc-no { margin-left: auto; align-self: flex-start; padding-top: calc(1 * var(--mm)); font-family: var(--f-mono); font-size: calc(2.1 * var(--mm)); opacity: .55; }
.dc-chev { font-family: var(--f-display); font-size: calc(6 * var(--mm)); line-height: 1; letter-spacing: -.12em; opacity: .9; margin-left: calc(.5 * var(--mm)); }
.dc-pstrip.p-ROUTE { background: var(--ink); color: var(--paper); }
.dc-pstrip.p-DIRECT { background: var(--ink); color: var(--paper);
  background-image: repeating-linear-gradient(-55deg, transparent 0 calc(2.4 * var(--mm)), rgba(236,232,223,.13) calc(2.4 * var(--mm)) calc(3.2 * var(--mm))); }
.dc-pstrip.p-OPEN { background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 calc(.6 * var(--mm)) var(--ink); }
.dc-pstrip.p-OPEN .dc-picon svg { stroke-width: 2.8; }
.size-54 .dc-pword b { font-size: calc(3.7 * var(--mm)); }
.size-54 .dc-chev { display: none; }
/* the old two-line protocol label and rule are no longer used */
.cn.data .dc-rule { display: none; }
.cn.data .dc-body { padding-top: calc(2.8 * var(--mm)); }

/* Traditional Chinese: use a Traditional face so every glyph matches. */
:lang(zh-Hant) { --f-body: 'Noto Sans TC', 'Microsoft JhengHei', 'PingFang TC', sans-serif; }
.cn.l-zh { --f-body: 'Noto Sans TC', 'Microsoft JhengHei', 'PingFang TC', sans-serif; font-family: var(--f-body); }

/* two-part skills: each part on its own line, second part set off by a hairline */
.sk-ln { display: block; padding-left: 1.05em; position: relative; }
.sk-ln::before { content: '▸'; position: absolute; left: 0; }
.sk-ln + .sk-ln { margin-top: .35em; padding-top: .35em; border-top: 1px dashed rgba(20,20,20,.35); }
.sk-ln + .sk-ln::before { top: .35em; }
.cn.role .rc-text { min-height: 0; }
.size-54 .id-main { gap: calc(2.2 * var(--mm)); padding-left: calc(3.2 * var(--mm)); padding-right: calc(3.2 * var(--mm)); }
.size-54 .id-hdr { padding-left: calc(3.2 * var(--mm)); padding-right: calc(3.2 * var(--mm)); gap: calc(1.2 * var(--mm)); }
.size-54 .id-slot { width: calc(5.5 * var(--mm)); }
.size-54 .id-kind { font-size: calc(2.5 * var(--mm)); letter-spacing: .08em; }

/* identity: faint company caption (behind everything) */
.id-wm { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.wm-cap { position: absolute; left: calc(1.6 * var(--mm)); top: calc(10 * var(--mm)); writing-mode: vertical-rl; font-family: var(--f-mono); font-weight: 600; font-size: calc(1.6 * var(--mm)); letter-spacing: .32em; white-space: nowrap; opacity: .38; }
.wm-cap::before { content: ''; display: inline-block; width: calc(.3 * var(--mm)); height: calc(6 * var(--mm)); background: currentColor; margin-bottom: calc(1.6 * var(--mm)); vertical-align: top; }
.size-54 .cn.ident > :not(.id-wm):not(.safe) { position: relative; z-index: 1; }

/* English: card names turn sideways (read top to bottom) instead of stacking letters */
.cn.l-en .dc-vname { text-orientation: mixed; letter-spacing: .02em; font-size: calc(min(7, (var(--ch) - 57) / var(--len, 4) * 1.3) * var(--mm)); }
.cn.l-en .dc-ven { font-family: var(--f-body); letter-spacing: .1em; }
.cn.l-en .dc-text { font-size: calc(2.6 * var(--mm)); line-height: 1.35; }
.size-54 .cn.l-en.data .dc-text { font-size: calc(2.4 * var(--mm)); }
.cn.l-en .sk-txt { font-size: calc(2.95 * var(--mm)); line-height: 1.35; }
.size-54 .cn.l-en .sk-txt { font-size: calc(2.75 * var(--mm)); }
.cn.l-en .sk-badge b { font-size: calc(1.95 * var(--mm)); }

/* Layout fixes (overlap audit):
   - protocol strip: the word never shrinks; the card number sits in the top-right corner
     and the DIRECT chevrons sit low on the right, so neither can run into the word.
   - English names: sized so even wide words (JAMMING, TRUTH SERUM) stay inside the art area. */
.dc-pword { flex: none; }
.dc-pstrip .dc-no { position: absolute; top: calc(1 * var(--mm)); right: calc(1.8 * var(--mm)); margin: 0; padding: 0; line-height: 1; }
.dc-chev { margin-left: auto; align-self: flex-end; margin-bottom: calc(1.3 * var(--mm)); font-size: calc(4.8 * var(--mm)); }
.cn.l-en .dc-vname { font-size: calc(min(7, (var(--ch) - 57) / var(--len, 4) * .98) * var(--mm)); }

/* covert operator mark */
.id-root.covert { background: transparent; color: currentColor; border: 1px dashed currentColor; }

/* access class badge: ROOT (solid) / COVERT (striped, dashed) */
.id-class { display: inline-flex; align-items: center; gap: calc(.9 * var(--mm)); height: calc(4.8 * var(--mm)); padding: 0 calc(1.6 * var(--mm)) 0 calc(1.2 * var(--mm));
  border-radius: calc(.5 * var(--mm)); font-family: var(--f-mono); line-height: 1; }
.id-class svg { width: calc(3 * var(--mm)); height: calc(3 * var(--mm)); flex: none; }
.id-class b { font-size: calc(2.7 * var(--mm)); font-weight: 700; letter-spacing: .16em; }
.id-class.root { background: var(--paper); color: var(--stock); }
.id-class.covert { color: var(--paper); border: calc(.35 * var(--mm)) dashed var(--paper);
  background: repeating-linear-gradient(-45deg, rgba(236,232,223,.16) 0 calc(.8 * var(--mm)), transparent calc(.8 * var(--mm)) calc(1.8 * var(--mm))); }
.id-class { height: calc(6 * var(--mm)); gap: calc(1.1 * var(--mm)); padding: 0 calc(1.9 * var(--mm)) 0 calc(1.4 * var(--mm)); }
.id-class svg { width: calc(3.8 * var(--mm)); height: calc(3.8 * var(--mm)); }
.id-class b { font-size: calc(3.3 * var(--mm)); letter-spacing: .14em; }

/* hidden (covert) operators: a dashed inner border and a stamp on the portrait */
.cn.role.covert .id-frame { border-style: dashed; }
.id-stamp { position: absolute; left: 50%; bottom: calc(-1.6 * var(--mm)); transform: translateX(-50%) rotate(-7deg); z-index: 3;
  padding: calc(.5 * var(--mm)) calc(1.8 * var(--mm)); border: calc(.45 * var(--mm)) solid var(--paper); border-radius: calc(.6 * var(--mm));
  background: var(--stock); color: var(--paper); font-family: var(--f-body); font-weight: 900; font-size: calc(2.9 * var(--mm)); line-height: 1.15; letter-spacing: .2em; white-space: nowrap;
  box-shadow: 0 0 0 calc(.5 * var(--mm)) var(--stock); }
.cn.l-en .id-stamp { font-family: var(--f-mono); font-size: calc(2.4 * var(--mm)); letter-spacing: .16em; }

/* Role cards with three skill rows (e.g. Phantom): same design, tighter text so all of it fits. */
.cn.role.rc-dense .rc-sname { padding-bottom: calc(1 * var(--mm)); }
.cn.role.rc-dense .rc-skills { gap: calc(1.3 * var(--mm)); padding: calc(1.3 * var(--mm)) 0 calc(1 * var(--mm)); }
.cn.role.rc-dense .sk-txt { font-size: calc(2.8 * var(--mm)); line-height: 1.3; }
.cn.role.rc-dense .sk-badge { min-height: calc(9.6 * var(--mm)); }

/* ===== Simplified Chinese: one typeface (Noto Sans SC) for all Chinese text =====
   Dela Gothic One is a Japanese face: it has some Chinese characters in Japanese shapes and lacks the
   Simplified-only ones (网 务 络 …), so a title would mix two fonts. In Simplified, display text uses
   Noto Sans SC Black instead; faction emblems and Latin-only wordmarks keep Dela Gothic One.
   Monospace labels fall back to Noto Sans SC for their Chinese characters. */
:lang(zh-Hans) {
  --f-body: 'Noto Sans SC', 'Microsoft YaHei', 'PingFang SC', sans-serif;
  --f-display: 'Noto Sans SC', 'Microsoft YaHei', 'PingFang SC', sans-serif;
  --f-mono: 'IBM Plex Mono', 'Noto Sans SC', 'Microsoft YaHei', monospace;
}
:lang(zh-Hans) .cn.l-zh { --f-body: 'Noto Sans SC', 'Microsoft YaHei', 'PingFang SC', sans-serif; --f-display: var(--f-body); font-family: var(--f-body); }
:lang(zh-Hans) .dc-name,
:lang(zh-Hans) .dc-fac b,
:lang(zh-Hans) .id-kind,
:lang(zh-Hans) .rc-name,
:lang(zh-Hans) .id-title,
:lang(zh-Hans) .ref-title b,
:lang(zh-Hans) .dc-vname,
:lang(zh-Hans) .dc-pword b,
:lang(zh-Hans) .setup h1,
:lang(zh-Hans) .dp-name,
:lang(zh-Hans) .s-deadid,
:lang(zh-Hans) .r-ORDER .rs-title,
:lang(zh-Hans) .r-GHOST .rs-title,
:lang(zh-Hans) .r-ZERO .rs-title,
:lang(zh-Hans) .rs-me,
:lang(zh-Hans) .rs-id,
:lang(zh-Hans) .rs-crown,
:lang(zh-Hans) .rs-dead,
:lang(zh-Hans) .pg-head h2,
:lang(zh-Hans) .tut-story p:first-of-type,
:lang(zh-Hans) .idr-seal,
:lang(zh-Hans) .idr h1,
:lang(zh-Hans) .sb-col,
:lang(zh-Hans) .jb-in b,
:lang(zh-Hans) .bd-in b,
:lang(zh-Hans) .cr-id b,
:lang(zh-Hans) .cb-1 b,
:lang(zh-Hans) .cb-2 b,
:lang(zh-Hans) .ks-verdict,
:lang(zh-Hans) .fx-keys.void .ks-verdict,
:lang(zh-Hans) .fx-keybox.void .ks-verdict,
:lang(zh-Hans) .gc-copy h3 { font-weight: 900; }
:lang(zh-Hans) .dc-kanji,
:lang(zh-Hans) .id-kanji,
:lang(zh-Hans) .dp-kanji,
:lang(zh-Hans) .rs-mark,
:lang(zh-Hans) .rs-kanji,
:lang(zh-Hans) .idr-roll span,
:lang(zh-Hans) .topbar .brand,
:lang(zh-Hans) .hm-logo h1,
:lang(zh-Hans) .nn-word,
:lang(zh-Hans) .nn-logo h1.nn-word,
:lang(zh-Hans) .topbar .brand.nn-word,
:lang(zh-Hans) .nb-word,
:lang(zh-Hans) .cr-word,
:lang(zh-Hans) .room-code span,
:lang(zh-Hans) .sy-year,
:lang(zh-Hans) .s-hand b,
:lang(zh-Hans) .id-no b,
:lang(zh-Hans) .dc-chev { font-family: 'Dela Gothic One', 'Noto Sans SC', sans-serif; }

/* Long effect text (e.g. Japanese SKIP): a little smaller so it stays above the faction band */
.cn.data .dc-text.long { font-size: calc(2.42 * var(--mm)); line-height: 1.4; }
.size-54 .cn.data .dc-text.long { font-size: calc(2.32 * var(--mm)); }
/* 54×86 is shorter: dense operator cards (3 skills) get slightly smaller skill text so the footer stays on the card */
.size-54 .cn.role.rc-dense .sk-txt { font-size: calc(2.62 * var(--mm)); line-height: 1.28; }
.size-54 .cn.role.rc-dense .sk-badge { min-height: calc(9 * var(--mm)); }