@font-face{font-family:Archivo;src:url(/assets/fonts/archivo.woff2)format('woff2');font-weight:400 800;font-stretch:80% 120%;font-display:swap}
@font-face{font-family:'Source Serif';src:url(/assets/fonts/sourceserif.woff2)format('woff2');font-weight:400 600;font-display:swap}
@font-face{font-family:Martian;src:url(/assets/fonts/martian.woff2)format('woff2');font-weight:400 700;font-display:swap}

/* ── tokens ─────────────────────────────────────────────────────────────
   GameLoop's defining screen is the key-mapping overlay: keycaps floating
   over a game, each bound to an action. That is this site's whole visual
   argument — the taxonomy is a keymap, and the keycap is the only shape on
   the page allowed a rounded corner. Everything else is square and quiet.
   Blue, never orange: this is not Tencent. */
:root{
  --ink:#12141A;
  --chrome:#101319;
  --field:#E9ECF1;
  --plate:#fff;
  --bind:#2B4CFF;
  --flag:#D6274A;
  --mute:#69707F;
  --line:rgba(16,19,25,.13);
  --measure:70ch;
  --disp:Archivo,system-ui,sans-serif;
  --serif:'Source Serif',Georgia,serif;
  --mono:Martian,ui-monospace,monospace;

  /* Semantic aliases. The three surfaces added after the original build —
     comments, reactions, the keymap library — were each written against a dark
     theme that this site has never had, referring to --text/--dim/--body and
     falling back to near-white when they resolved to nothing. On a #E9ECF1
     page that rendered light grey on light grey: the keymap library's
     sensitivity numbers, the whole point of the page, were invisible.
     Naming them here is what makes those references true. New surfaces should
     reach for the tokens above; these exist so that a component thinking in
     roles rather than in ink still lands inside the palette. */
  --text:var(--ink);
  --body:#2A2F3A;
  --dim:var(--mute);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:80px}
body{
  margin:0;background:var(--field);color:var(--ink);
  font:400 17px/1.62 var(--serif);
  font-synthesis-weight:none;text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--bind);outline-offset:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* parked above the fold, not at left:-9999px — in an RTL document a negative
   physical offset is real scrollable width, and it pushed the whole Arabic
   edition off its own canvas */
.skip{position:absolute;top:0;inset-inline-start:0;z-index:99;
  background:var(--ink);color:#fff;padding:10px 16px;
  transform:translateY(-200%);transition:transform .12s}
.skip:focus{transform:none}
.wrap{max-width:1180px;margin:0 auto;padding:0 clamp(16px,4vw,40px)}

/* display type: the width axis does real work — headlines compress, labels
   expand. Same family, opposite postures. */
h1,h2,h3,h4{font-family:var(--disp);font-weight:700;font-stretch:88%;
  line-height:1.04;letter-spacing:-.018em;margin:0}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* ── masthead ───────────────────────────────────────────────────────── */
.mast{background:var(--field)}
/* padding-block, not the padding shorthand — the shorthand was silently
   zeroing .wrap's inline padding and letting the masthead touch both edges */
.mast__in{display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  padding-block:18px 16px}
.logo{font-family:var(--disp);font-weight:800;font-stretch:82%;font-size:26px;
  letter-spacing:-.035em;text-decoration:none;line-height:1}
.logo span{color:var(--bind)}
/* nav and picker travel as one block, so a wrap keeps them together at the
   end of the line instead of dropping the picker alone against the margin */
.mast__ctl{margin-inline-start:auto;display:flex;align-items:center;gap:10px;
  flex-wrap:wrap;justify-content:flex-end}
nav.top{display:flex;gap:4px;flex-wrap:wrap}
nav.top a{font-family:var(--disp);font-weight:600;font-stretch:106%;font-size:12.5px;
  letter-spacing:.05em;text-transform:uppercase;text-decoration:none;
  padding:7px 10px;color:var(--mute)}
nav.top a:hover{color:var(--ink)}
nav.top a[aria-current]{color:var(--ink);box-shadow:inset 0 -2px 0 var(--bind)}

/* ── language picker ─────────────────────────────────────────────────────
   Nine editions, one control. It invents no new vocabulary: closed, it is an
   unpressed key; open, it is a pressed one with a plate hanging off it. The
   site already knows what a key that is down means. Square panel, hard
   shadow — the keycap keeps its monopoly on radius, and nothing here blurs.
   Anchored with logical properties so the Arabic edition mirrors for free. */
.lang{position:relative;z-index:30;flex:none}
.lang>summary{
  display:inline-flex;align-items:center;gap:8px;cursor:pointer;list-style:none;
  background:var(--plate);border:1px solid var(--line);border-radius:8px;
  padding:6px 10px 6px 7px;
  box-shadow:0 2px 0 rgba(16,19,25,.14);
  transition:transform .09s,box-shadow .09s,background-color .12s,border-color .12s}
.lang>summary::-webkit-details-marker{display:none}
.lang>summary:hover{border-color:var(--bind)}
/* language names are names: set in the display face, left in their own case */
.lang__now{font-family:var(--disp);font-weight:600;font-stretch:104%;font-size:13px;
  letter-spacing:.01em;line-height:1}
.lang>summary::after{content:"";width:6px;height:6px;flex:none;
  margin-inline-start:1px;border:solid var(--mute);border-width:0 1.6px 1.6px 0;
  transform:translateY(-2px)rotate(45deg);transition:transform .14s,border-color .12s}
.lang[open]>summary{transform:translateY(2px);box-shadow:0 0 0 rgba(0,0,0,0);
  background:var(--bind);border-color:var(--bind);color:#fff}
.lang[open]>summary .cap{background:rgba(255,255,255,.22);color:#fff}
.lang[open]>summary::after{border-color:#fff;transform:translateY(1px)rotate(-135deg)}
/* 2–3 letter codes need a wider cap than the single-character keys do */
.cap--lang{width:25px;height:21px;font-size:10px;letter-spacing:.02em}

.lang__list{position:absolute;top:calc(100% + 9px);inset-inline-end:0;
  list-style:none;margin:0;padding:5px;min-width:186px;
  max-height:min(62vh,430px);overflow-y:auto;overscroll-behavior:contain;
  background:var(--plate);border:1px solid var(--line);
  box-shadow:0 3px 0 rgba(16,19,25,.14)}
.lang__list a{display:flex;align-items:center;gap:9px;padding:7px 9px;
  text-decoration:none;white-space:nowrap;
  font-family:var(--disp);font-weight:600;font-stretch:100%;font-size:13px;
  line-height:1.25;transition:background-color .1s,color .1s}
.lang__list a:hover{background:var(--field)}
.lang__list a:hover .cap{background:var(--bind);color:#fff}
/* the endonym is the label; below this width the code carries it alone */
@media(max-width:559px){.lang__now{display:none}}

/* ── the keymap: signature element ──────────────────────────────────────
   Rendered as links so it navigates with JS off. On the archive the same
   markup upgrades to instant multi-select filtering. Sticky, because on a
   site whose job is "find the thing", the filter should never scroll away. */
.keymap{position:sticky;top:0;z-index:20;background:var(--field);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:10px 0 11px}
.keymap__in{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.keys{list-style:none;display:flex;gap:7px;margin:0;padding:0 2px 3px;
  overflow-x:auto;scrollbar-width:none;max-width:100%;
  /* the row scrolls on a phone; the fade is the only signal that it does */
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent);
  mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent)}
.keys::-webkit-scrollbar{display:none}
[dir=rtl] .keys{-webkit-mask-image:linear-gradient(270deg,#000 calc(100% - 26px),transparent);
  mask-image:linear-gradient(270deg,#000 calc(100% - 26px),transparent)}
.keys li{flex:none}
@media(min-width:900px){.keys{-webkit-mask-image:none;mask-image:none}}

.key{display:inline-flex;align-items:center;gap:8px;text-decoration:none;
  background:var(--plate);border:1px solid var(--line);border-radius:8px;
  padding:6px 11px 6px 7px;
  box-shadow:0 2px 0 rgba(16,19,25,.14);
  transition:transform .09s,box-shadow .09s,background-color .12s,border-color .12s}
.key__l{font-family:var(--disp);font-weight:600;font-stretch:108%;font-size:12.5px;
  letter-spacing:.05em;text-transform:uppercase}
.key__n{font-size:10px;color:var(--mute);padding-inline-start:2px}
.key:hover{border-color:var(--bind)}
.key:active,.key--on{transform:translateY(2px);box-shadow:0 0 0 rgba(0,0,0,0)}
.key--on{background:var(--bind);border-color:var(--bind);color:#fff}
.key--on .key__n{color:rgba(255,255,255,.72)}
.key--on .cap{background:rgba(255,255,255,.22);color:#fff}

/* the keycap itself — the one rounded shape on the site, reused as each
   category's mark inside every tile and headline kicker */
.cap{font-family:var(--mono);font-weight:700;font-size:11px;line-height:1;
  width:22px;height:22px;border-radius:5px;display:grid;place-items:center;
  background:var(--field);color:var(--ink);flex:none;transition:inherit}
/* Two-character marks (a game's initials, a language code) need the extra
   millimetre; the keycap does not otherwise change shape. */
.cap--wide{width:26px;font-size:10px;letter-spacing:.02em}
/* A cap holding a real key name — W, Space, Mouse 4. Grows with its label
   instead of clipping it, and is the only place the mono face is set in ink
   on plate rather than on field, because here the cap sits on a card. */
.cap--bind{width:auto;min-width:22px;height:auto;min-height:22px;
  padding:4px 7px;background:var(--plate);border:1px solid var(--line);
  box-shadow:0 2px 0 rgba(16,19,25,.10);font-size:11.5px;white-space:nowrap}

/* ── icons ────────────────────────────────────────────────────────────────
   Tabler outline, inherited colour, sized off the text it sits beside. An
   icon never appears alone unless it is labelled: it sharpens a word, it does
   not replace one. */
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.i{width:1em;height:1em;display:inline-block;vertical-align:-.125em;
  flex:none;stroke-width:2;color:inherit}
.i--lg{width:1.15em;height:1.15em}

.find{position:relative;margin-inline-start:auto}
.find input{font:400 13px/1 var(--mono);color:var(--ink);
  background:var(--plate);border:1px solid var(--line);border-radius:8px;
  padding:9px 30px 9px 12px;width:min(210px,44vw)}
.find input::placeholder{color:var(--mute)}
.find input:focus{border-color:var(--bind);outline:none;box-shadow:0 0 0 3px rgba(43,76,255,.16)}
.find__k{position:absolute;inset-inline-end:10px;top:50%;transform:translateY(-50%);
  font-size:11px;color:var(--mute);pointer-events:none}
.find input:focus + .find__k{opacity:0}
.keymap__cnt{margin:0;font-size:11.5px;color:var(--mute);white-space:nowrap}
.keymap__hint{margin:9px auto 0;font-size:12px;color:var(--mute)}
.keymap__hint b{font-weight:400;color:var(--ink);background:var(--plate);
  border:1px solid var(--line);border-radius:4px;padding:1px 5px;font-size:11px}
/* the shortcut hint is noise without a keyboard */
@media(pointer:coarse){.keymap__hint,.find__k{display:none}}

/* ── verdict chips: square, so the keycap keeps its monopoly on radius ── */
.vd{font-family:var(--mono);font-weight:700;font-size:9.5px;letter-spacing:.08em;
  text-transform:uppercase;padding:4px 8px;white-space:nowrap;
  border:1px solid transparent;display:inline-block;line-height:1}
.vd--ok{background:var(--bind);color:#fff}
.vd--bad{background:var(--flag);color:#fff}
.vd--wait{background:transparent;color:var(--mute);border-color:var(--line)}

/* ── lead: letterboxed, because that is what a phone game on a PC looks
   like — black bars either side of the play area ───────────────────── */
.lead{background:var(--chrome);padding:clamp(20px,3.4vw,34px) 0}
.lead__box{background:var(--plate);padding:clamp(26px,4.6vw,56px);max-width:1000px;margin:0 auto}
.kick{display:flex;gap:10px;align-items:center;margin-bottom:18px;flex-wrap:wrap}
.kick__l{font-family:var(--disp);font-weight:600;font-stretch:115%;font-size:10.5px;
  letter-spacing:.17em;text-transform:uppercase;color:var(--mute)}
.lead h1{font-size:clamp(31px,6vw,60px);font-stretch:84%;font-weight:800;
  letter-spacing:-.028em;max-width:19ch}
.lead h1 a{text-decoration:none}
.lead h1 a:hover{color:var(--bind)}
.lead__deck{font-size:clamp(17px,2.1vw,20px);color:#2C3240;margin:18px 0 0;
  max-width:56ch;line-height:1.52}
.lead__meta{margin-top:26px;padding-top:16px;border-top:1px solid var(--line);
  display:flex;gap:16px;flex-wrap:wrap;align-items:center}
.lead__go{margin-inline-start:auto;font-family:var(--disp);font-weight:700;font-stretch:104%;
  font-size:13px;letter-spacing:.03em;color:var(--bind);text-decoration:none}
.lead__go:hover{text-decoration:underline;text-underline-offset:4px}
.byline{font-family:var(--mono);font-size:11px;color:var(--mute)}

/* ── sections ───────────────────────────────────────────────────────── */
.band{padding:clamp(34px,5vw,56px) 0}
.sechead{display:flex;align-items:baseline;gap:14px;padding-bottom:11px;
  border-bottom:2px solid var(--ink);margin-bottom:22px}
.sechead h2{font-size:15px;font-stretch:113%;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase}
.sechead__go{margin-inline-start:auto;font-family:var(--disp);font-weight:600;font-stretch:106%;
  font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--bind);
  text-decoration:none;white-space:nowrap}
.sechead__go:hover{text-decoration:underline;text-underline-offset:3px}

.phead{max-width:62ch;padding-bottom:30px}
.phead h1{font-size:clamp(30px,5.2vw,52px);font-stretch:85%;font-weight:800;
  letter-spacing:-.026em}
.phead p{font-size:18px;color:#3A4150;line-height:1.55;margin:16px 0 0}

/* ── tiles: the launcher library, set in type instead of box art ────── */
.tiles{list-style:none;margin:0;padding:0;display:grid;gap:14px;
  grid-template-columns:1fr}
.tile>a{display:flex;flex-direction:column;gap:9px;height:100%;
  background:var(--plate);border:1px solid var(--line);
  padding:16px 18px 18px;text-decoration:none;
  transition:border-color .14s,transform .14s}
.tile>a:hover{border-color:var(--bind);transform:translateY(-2px)}
.tile>a:hover .cap{background:var(--bind);color:#fff}
.tile>a:hover h3{color:var(--bind)}
.tile__top{display:flex;align-items:center;gap:9px}
.tile__cat{font-family:var(--disp);font-weight:600;font-stretch:113%;font-size:10px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.tile__top time{margin-inline-start:auto;font-size:10.5px;color:var(--mute)}
.tile h3{font-size:20px;font-stretch:92%;line-height:1.15;transition:color .12s}
.tile p{margin:0;color:#3A4150;font-size:14.5px;line-height:1.5}
.tile__vd{margin-top:auto;padding-top:4px}
.tile[hidden]{display:none}

.empty{background:var(--plate);border:1px dashed var(--line);padding:26px;
  text-align:center;color:var(--mute);font-size:15px}
.linkish{background:none;border:0;padding:0;font:inherit;color:var(--bind);
  cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.btn{display:inline-block;background:var(--bind);color:#fff;text-decoration:none;
  font-family:var(--disp);font-weight:700;font-stretch:104%;font-size:13px;
  letter-spacing:.05em;text-transform:uppercase;padding:12px 20px;margin-top:8px}
.btn:hover{background:var(--ink)}

/* ── version ledger: the numbers are the sequence, so nothing decorative
   numbers them ─────────────────────────────────────────────────────── */
.ledger{list-style:none;margin:0;padding:0;background:var(--plate);border:1px solid var(--line)}
.ledger li{padding:14px 17px;border-bottom:1px solid var(--line)}
.ledger li:last-child{border-bottom:0}
.ledger__top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.ledger .v{font-weight:700;font-size:15px;letter-spacing:-.02em}
.ledger .d{display:block;margin-top:6px;font-size:12.5px;color:var(--mute);line-height:1.5}

.note{background:var(--plate);border-inline-start:3px solid var(--bind);padding:20px 22px}
.note h3{font-size:13px;font-stretch:112%;letter-spacing:.09em;text-transform:uppercase;
  margin-bottom:12px}
.note p{margin:0 0 12px;font-size:14.5px;line-height:1.55;color:#3A4150}
.note p:last-child{margin-bottom:0}
.note a{color:var(--bind);font-weight:600}
.note b{font-family:var(--mono);font-weight:700;font-size:12px;letter-spacing:.02em}

/* ── article ────────────────────────────────────────────────────────── */
.art{background:var(--plate);border-bottom:1px solid var(--line)}
.crumb{max-width:var(--measure);margin:0 auto;padding:22px 0 0;
  font-family:var(--mono);font-size:11px;color:var(--mute)}
.crumb a{text-decoration:none}
.crumb a:hover{color:var(--bind)}
.art__head{max-width:var(--measure);margin:0 auto;padding:26px 0 26px}
.art__head h1{font-size:clamp(30px,5vw,50px);font-stretch:85%;font-weight:800;
  letter-spacing:-.026em}
.art__deck{font-size:19px;color:#2C3240;margin:18px 0 0;line-height:1.5}
.art__meta{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-top:22px;
  padding-top:14px;border-top:1px solid var(--line)}
.prose{max-width:var(--measure);margin:0 auto;padding:0 0 clamp(40px,6vw,72px)}
.prose h2{font-size:26px;font-stretch:92%;margin:44px 0 12px;letter-spacing:-.015em}
.prose h3{font-size:20px;font-stretch:97%;margin:32px 0 8px}
.prose p{margin:0 0 20px}
.prose ul,.prose ol{margin:0 0 22px;padding-inline-start:22px}
.prose li{margin-bottom:9px}
.prose a{color:var(--bind);text-underline-offset:3px}
.prose strong{font-weight:600}
.prose code{font-family:var(--mono);font-size:.82em;background:var(--field);
  padding:2px 5px}
.prose blockquote{margin:26px 0;padding:4px 0;padding-inline-start:20px;border-inline-start:3px solid var(--bind);
  color:#2C3240;font-size:18px}
.prose hr{border:0;border-top:1px solid var(--line);margin:36px 0}
.tblwrap{overflow-x:auto;margin:0 0 24px}
.prose table{width:100%;border-collapse:collapse;font-size:15px}
.prose th,.prose td{border:1px solid var(--line);padding:9px 12px;text-align:start}
.prose th{font-family:var(--disp);font-weight:600;font-stretch:108%;font-size:12px;
  letter-spacing:.08em;text-transform:uppercase;background:var(--field);white-space:nowrap}
.callout{background:var(--field);border-inline-start:3px solid var(--ink);padding:18px 20px;
  margin:28px 0;font-size:15.5px;line-height:1.55}
.callout .lbl{display:block;margin-bottom:6px;font-family:var(--disp);font-weight:600;
  font-stretch:115%;font-size:10.5px;letter-spacing:.17em;text-transform:uppercase;
  color:var(--mute)}
.prose figure.art{margin:28px 0}
.prose figure.art img{max-width:100%;height:auto;border-radius:6px;display:block}
.prose figure.art figcaption{font-size:13px;color:var(--mute);margin-top:8px;font-style:italic;text-align:center}

/* references — evidence and further reading, kept visually apart from the
   body so a reader can tell a citation from a recommendation at a glance */
.refs{max-width:var(--measure);margin:0 auto;padding:0 0 clamp(40px,6vw,72px)}
.refs__b{border-top:1px solid var(--line);padding-top:18px;margin-top:26px}
.refs__h{font-family:var(--disp);font-weight:600;font-stretch:108%;font-size:11px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--mute);margin:0 0 12px}
.refs__l{margin:0;padding-inline-start:20px;font-size:14.5px;line-height:1.5}
.refs__l li{margin-bottom:8px}
.refs__l a{color:var(--bind);text-underline-offset:3px;overflow-wrap:anywhere}
.refs__l--plain{list-style:none;padding-inline-start:0}
.refs__l--plain li{padding-inline-start:16px;position:relative}
.refs__l--plain li::before{content:"";position:absolute;inset-inline-start:0;top:.55em;
  width:6px;height:1px;background:var(--mute)}
.refs__n{font-size:12.5px;color:var(--mute);margin:10px 0 0;line-height:1.45}

/* ── footer ─────────────────────────────────────────────────────────── */
footer.site{background:var(--chrome);color:#B7BECD;padding:46px 0 34px;font-size:14px}
footer.site a{color:#fff;text-underline-offset:3px;text-decoration:none}
footer.site a:hover{text-decoration:underline}
footer.site .cols3{display:grid;gap:28px;grid-template-columns:1fr}
footer.site h4{font-family:var(--disp);font-weight:600;font-stretch:114%;font-size:10.5px;
  letter-spacing:.17em;text-transform:uppercase;color:#79839A;margin:0 0 12px}
footer.site ul{list-style:none;margin:0;padding:0}
footer.site li{margin-bottom:8px}
footer.site li .num{color:#5C6580;font-size:11px}
.foot__blurb{margin:0;max-width:44ch;line-height:1.6}
.disclaimer{margin-top:32px;padding-top:20px;border-top:1px solid rgba(255,255,255,.15);
  font-size:12.5px;line-height:1.6;color:#79839A;max-width:70ch}

/* ── responsive ─────────────────────────────────────────────────────── */
@media(min-width:640px){
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(min-width:900px){
  .tiles{grid-template-columns:repeat(3,minmax(0,1fr))}
  .band--split{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(260px,1fr);
    gap:clamp(24px,4vw,48px);align-items:start}
  footer.site .cols3{grid-template-columns:2fr 1fr 1fr}
}

/* ── motion: one gesture, and it belongs to the keys ────────────────── */
@media(prefers-reduced-motion:no-preference){
  @keyframes settle{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
  .tiles.is-filtering .tile:not([hidden]){animation:settle .22s cubic-bezier(.2,.7,.3,1) both}
  .tiles.is-filtering .tile:nth-child(2):not([hidden]){animation-delay:.03s}
  .tiles.is-filtering .tile:nth-child(3):not([hidden]){animation-delay:.06s}
  .tiles.is-filtering .tile:nth-child(n+4):not([hidden]){animation-delay:.09s}
}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}
@media print{.keymap,nav.top,.lang,footer.site{display:none}body{background:#fff}}

/* ── reader comments ──────────────────────────────────────────────────────── */
.cmt-section{padding:2rem 0 1rem}
.cmt-title{font-size:1.1rem;font-weight:700;margin-bottom:1rem;color:var(--text,#e2e8f0)}
.cmt-count{font-weight:400;color:var(--dim,#6b7280)}
.cmt-loading,.cmt-empty{color:var(--dim,#6b7280);font-size:.9rem;padding:.5rem 0}
.cmt-list{display:flex;flex-direction:column;gap:.85rem;margin-bottom:1.5rem}
.cmt{padding:.9rem 1rem;background:var(--plate);border:1px solid var(--line)}
.cmt-head{display:flex;align-items:baseline;gap:.7rem;margin-bottom:.45rem;flex-wrap:wrap}
.cmt-name{font-weight:600;font-size:.88rem;color:var(--text,#e2e8f0)}
.cmt-date{font-size:.78rem;color:var(--dim,#6b7280)}
.cmt-body{font-size:.9rem;line-height:1.6;color:var(--body,#cbd5e1)}
.cmt-body p{margin:.35rem 0}
.cmt-body code{background:var(--field);font-family:var(--mono);padding:.1em .35em;font-size:.85em}
.cmt-form-wrap{border-top:1px solid var(--line);padding-top:1.25rem}
.cmt-form-title{font-size:.95rem;font-weight:600;margin-bottom:.9rem;color:var(--text,#e2e8f0)}
.cmt-field{margin-bottom:.75rem}
.cmt-field label{display:block;font-size:.8rem;font-weight:600;color:var(--dim,#6b7280);margin-bottom:.3rem}
.cmt-field input,.cmt-field textarea{width:100%;padding:.5rem .75rem;background:var(--plate);border:1px solid var(--line);color:var(--ink);font:inherit;font-size:.9rem;resize:vertical}
.cmt-field input:focus,.cmt-field textarea:focus{outline:none;border-color:var(--bind);box-shadow:0 0 0 3px rgba(43,76,255,.16)}
.cmt-hint{font-size:.73rem;color:var(--dim,#6b7280);margin-top:.25rem;display:block}
.cmt-btn{padding:.5rem 1.1rem;background:var(--bind);color:#fff;border:none;
  font-family:var(--disp);font-weight:600;font-stretch:106%;font-size:12.5px;
  letter-spacing:.05em;text-transform:uppercase;cursor:pointer}
.cmt-btn:hover{background:var(--ink)}.cmt-btn:disabled{opacity:.5;cursor:default}
.cmt-status{font-size:.82rem;margin-top:.5rem}
.cmt-status--ok{color:var(--bind)}.cmt-status--err{color:var(--flag)}
.cmt-avatar{width:24px;height:24px;border-radius:50%;object-fit:cover;flex-shrink:0;vertical-align:middle;margin-right:.1rem}
.cmt-head{align-items:center}
.cmt--verified .cmt-name{color:var(--bind)}
.cmt-badge{font-size:.7rem;color:#38bdf8;background:rgba(56,189,248,.12);border-radius:.2rem;padding:.05em .3em;line-height:1.3;flex-shrink:0}
.cmt-me{display:flex;align-items:center;gap:.5rem;font-size:.83rem;color:var(--dim,#6b7280);margin-bottom:.9rem;padding:.5rem .75rem;background:rgba(88,101,242,.1);border:1px solid rgba(88,101,242,.2);border-radius:.4rem}
.cmt-me-avatar{width:28px;height:28px;border-radius:50%;object-fit:cover;flex-shrink:0}
.cmt-me strong{color:var(--text,#e2e8f0)}
.cmt-logout-btn{background:none;border:none;color:var(--dim,#6b7280);font:inherit;font-size:.78rem;cursor:pointer;padding:0;text-decoration:underline}
.cmt-logout-btn:hover{color:var(--text,#e2e8f0)}
.cmt-discord-cta{font-size:.82rem;margin-bottom:.9rem;display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.cmt-discord-btn{display:inline-flex;align-items:center;gap:.4rem;padding:.35rem .75rem;background:#5865f2;color:#fff;border-radius:.35rem;font-size:.82rem;font-weight:600;text-decoration:none;line-height:1.3}
.cmt-discord-btn:hover{background:#4752c4}
.cmt-discord-note{color:var(--dim,#6b7280);font-size:.78rem}

/* ── article reactions ────────────────────────────────────────────────────── */
.rx-bar{display:flex;gap:.5rem;flex-wrap:wrap;padding:.75rem 0 .5rem}
/* A reaction is a key you press, so it is built from the keycap: same plate,
   same 8px radius, same 2px of travel on :active. A pill would have been a
   second vocabulary for the same gesture. */
.rx-btn{display:inline-flex;align-items:center;gap:.35rem;padding:.4rem .85rem;
  background:var(--plate);border:1px solid var(--line);border-radius:8px;
  box-shadow:0 2px 0 rgba(16,19,25,.14);
  color:var(--ink);font:inherit;font-size:.88rem;
  cursor:pointer;transition:transform .09s,box-shadow .09s,background-color .12s,border-color .12s;
  user-select:none;line-height:1}
.rx-btn:hover{border-color:var(--bind)}
.rx-btn:active,.rx-btn--on{transform:translateY(2px);box-shadow:0 0 0 rgba(0,0,0,0)}
.rx-btn:disabled{opacity:.5;cursor:default;transform:none}
.rx-btn--on{background:var(--bind);border-color:var(--bind);color:#fff}
.rx-btn--on .rx-count{color:rgba(255,255,255,.72)}
.rx-emoji{font-size:1.05em;line-height:1}
.rx-count{font-family:var(--mono);font-variant-numeric:tabular-nums;
  font-size:.8em;font-weight:700;color:var(--mute);min-width:1ch}