/* legacy/kn-skin.css - the pre-kj table skin (kn-*), lifted verbatim out of styles.css on 2026-09-06
 * (FE-STANDARD 8, step 6d.3) and loaded right after it so nothing in the cascade moves.
 * DELETION LIST: 197 rules, 130 kn- classes. The roomy tiers (tablet / landscape / wide)
 * still render the auction and the ceremony from these templates; each family below is deleted the day
 * its kj- component covers those tiers. Do not add to this file. */

.kn-resume {
  background: linear-gradient(120deg, #14241C 0%, #0F1A14 100%);
  border: 1px solid #24352B;
  border-radius: 20px;
  padding: 18px 18px 18px 0;
  display: flex; align-items: center; gap: 4px;
  margin-bottom: 14px;
  position: relative; overflow: hidden;
}

.kn-resume[hidden] { display: none; }

.kn-resume-mark { width: 116px; display: block; flex: none; margin-left: -6px; }

.kn-resume-body {
  display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0;
  /* EXPLICIT. `body { text-align: center }` in the <=720px block cascades into
     everything ported from an artboard, and the artboard is left-aligned. This
     is the documented trap ("ported markup needs an explicit text-align:start")
     and it caught this card: measured centre at 386px, with the eyebrow, the
     title and the Arabic all stacked down the middle of the column. */
  text-align: start;
}

.kn-eyebrow {
  font-family: 'IBM Plex Mono', monospace; font-size: 9px; letter-spacing: 0.22em;
  text-transform: uppercase; color: #7FA893;
}

.kn-resume-title {
  font-family: 'Archivo Black', sans-serif; font-size: 23px; line-height: 1;
  letter-spacing: -0.02em; color: #F4E9D4;
}

.kn-resume-ar {
  font-family: Lemonada, sans-serif; font-weight: 700; font-size: 14px;
  line-height: 1.3; color: #D9A94F;
}

.kn-resume-cta {
  appearance: none; border: 0; cursor: pointer;
  background: #EFC375; color: #0C1009;
  font-size: 13px; font-weight: 800; letter-spacing: 0.04em;
  padding: 10px 0; border-radius: 9px; text-align: center;
  margin: 7px 18px 0 0;
}

.kn-resume-leave {
  appearance: none; background: none; border: 0; cursor: pointer;
  margin: 6px 18px 0 0; padding: 4px 0;
  font-size: 11.5px; color: #9A8F79; text-decoration: underline;
  text-underline-offset: 3px; text-align: start;
}

.kn-sec-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 2px 2px;
}

.kn-sec-en {
  font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: 0.2em;
  text-transform: uppercase; color: #8A9479;
}

.kn-sec-ar { font-family: Lemonada, sans-serif; font-weight: 600; font-size: 12px; color: #8A9479; }

.kn-games { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }

.kn-game {
  appearance: none; cursor: pointer; text-align: start;
  background: #131A0F; border: 1px solid #232B1B; border-radius: 16px;
  padding: 15px 14px; min-height: 116px;
  display: flex; flex-direction: column; gap: 9px;
  transition: border-color .18s, transform .18s cubic-bezier(.22,1,.36,1);
}

.kn-game:active { transform: scale(.985); }

.kn-game:hover { border-color: #37452B; }

.kn-game-top { display: flex; align-items: center; justify-content: space-between; }

.kn-game-meta { font-family: 'IBM Plex Mono', monospace; font-size: 9px; color: #8A9479; }

.kn-game-name { margin-top: auto; display: flex; flex-direction: column; gap: 2px; }

.kn-game-en {
  font-family: 'Archivo Black', sans-serif; font-size: 17px; line-height: 1; color: #F4E9D4;
}

.kn-game-ar {
  font-family: Lemonada, sans-serif; font-weight: 700; font-size: 12px;
  line-height: 1.3; color: #C99A46;
}

.kn-suit { font-size: 22px; line-height: 1; color: #8A9479; }

.kn-suit--gold { color: #EFC375; }

.kn-suit--red { color: #C4553F; }

.kn-row {
  width: 100%; appearance: none; cursor: pointer; text-align: start;
  display: flex; align-items: center; gap: 12px;
  background: #131A0F; border: 1px solid #232B1B; border-radius: 16px;
  padding: 14px 16px; margin-top: 10px;
  list-style: none;   /* it is a <summary> in the More options case */
}

.kn-row::-webkit-details-marker { display: none; }

.kn-row--dashed { border-style: dashed; border-color: #2A3421; padding: 13px 16px; }

.kn-row .kn-suit { font-size: 20px; }

.kn-row--dashed .kn-suit { font-size: 18px; }

.kn-row-body { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }

.kn-row-title { font-size: 14px; font-weight: 700; color: #F4E9D4; }

.kn-row-title--quiet { font-size: 13px; font-weight: 600; color: #A79D88; }

.kn-row-sub { font-size: 11.5px; color: #9A8F79; }

.kn-row-cue { font-family: 'IBM Plex Mono', monospace; font-size: 15px; color: #8A9479; }

.kn-row--dashed .kn-row-cue { font-size: 13px; transition: transform .18s; }

details.play-more[open] .kn-row--dashed .kn-row-cue { transform: rotate(180deg); }

.kn-pill {
  display: inline-flex; align-items: center; gap: 6px;
  background: #16200F; border: 1px solid #2A3421; border-radius: 999px;
  padding: 5px 11px; text-decoration: none;
}

.kn-pill[hidden] { display: none; }

.kn-pill-gem { width: 9px; height: 9px; transform: rotate(45deg); background: #EFC375; }

.kn-pill b {
  font-family: 'IBM Plex Mono', monospace; font-size: 12px; font-weight: 500; color: #EFC375;
}

.kn-avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: #1F544F; border: 1.5px solid #3C7A70;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800; color: #CFE0DA;
  text-decoration: none; overflow: hidden; flex: none;
}

.kn-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

.kn-avatar img[hidden] { display: none; }

.kn-games--open { display: flex; flex-direction: column; gap: 10px; }

.kn-games--open .kn-game[data-game="Trix"] { display: none; }

.kn-game--collapsed {
  min-height: 0; opacity: .66;
  flex-direction: row; align-items: center; gap: 12px; padding: 15px 16px;
}

.kn-game--collapsed .kn-game-top { display: contents; }

.kn-game--collapsed .kn-suit { order: 0; }

.kn-game--collapsed .kn-game-name { order: 1; flex: 1; margin-top: 0; }

.kn-game--collapsed .kn-game-en { font-size: 16px; }

.kn-game--collapsed .kn-game-ar { font-size: 12px; line-height: 1.4; }

.kn-game--collapsed .kn-game-meta { order: 2; letter-spacing: .14em; }

.kn-suit--trix { color: #C08FD0; }

.kn-trix {
  box-sizing: border-box;
  background: linear-gradient(150deg, #1C1424 0%, #131A0F 82%);
  border: 1px solid #3A2A46; border-radius: 18px;
  padding: 17px 17px 18px;
}

.kn-trix[hidden] { display: none; }

/* Board 30 is left-aligned throughout. `body { text-align: center }` (<=720px)
   cascaded into both panels - the unwrapped legends ("2 · WHO WITH",
   "2 · SIGNALS" ...) and the say line sat in the middle of the card (measured
   2026-09-26 against the board). Explicit, per the ported-markup rule. */
.kn-trix { text-align: start; }

.kn-trix-head {
  width: 100%; appearance: none; cursor: pointer; text-align: start;
  background: none; border: 0; padding: 0;
  display: flex; align-items: center; gap: 12px; margin-bottom: 16px;
}

.kn-trix-name { display: flex; flex-direction: column; gap: 2px; flex: 1; }

.kn-trix-en {
  font-family: 'Archivo Black', sans-serif; font-size: 17px; line-height: 1; color: #F2E4F7;
}

.kn-trix-ar {
  font-family: Lemonada, sans-serif; font-weight: 700; font-size: 12px;
  line-height: 1.4; color: #A98BB8;
}

.kn-trix-chev { font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: #A98BB8; }

.kn-trix-group { display: flex; flex-direction: column; gap: 7px; }

.kn-trix-group--len { margin-bottom: 13px; }

.kn-trix-group--who { margin-bottom: 15px; }

/* Trap 90. styles.css dresses every <button>: a shadow (the dark box that sat
   behind both panels' heads), 0.5px letter-spacing inherited by every label,
   and a hover fill + lift + shadow that STICKS after a tap on Android. The
   board draws these as plain divs with none of that. The hover rule is
   button:hover:not(:disabled) (0,2,1), so the reset is scoped by .kn-trix to
   outrank it and re-reads each tile's own fill from --kn-bg / --kn-bd. */
.kn-trix-head, .kn-trix-opt { letter-spacing: normal; }
.kn-trix-head, .kn-trix-opt, .kn-trix-start { box-shadow: none; }
.kn-trix .kn-trix-opt:hover:not(:disabled) {
  background: var(--kn-bg); border-color: var(--kn-bd); transform: none; box-shadow: none;
}
.kn-trix .kn-trix-head:hover:not(:disabled) { background: none; transform: none; box-shadow: none; }
.kn-trix .kn-trix-start:hover:not(:disabled) { background: #C08FD0; transform: none; box-shadow: none; }
.kn-trix--tarneeb .kn-trix-start:hover:not(:disabled) { background: #EFC375; }

/* Boards 02 and 30: the home column sits 18px from the phone's edges. `main`
   (16) plus .home-scroll (16) put it at 32, so every home card was 28px
   narrower than the board (measured 2026-09-26: the panel 320 wide, the
   board's 348), which is what made the panels read cramped. */
main:has(#view-home:not(.hidden)) { padding-left: 0; padding-right: 0; }
.home-scroll { padding-left: 18px; padding-right: 18px; }

.kn-trix-group--speed { margin-bottom: 15px; }

.kn-trix-group--table { margin-bottom: 15px; }

/* Board 30's rhythm with four rows: 13 between one row of options and the
   next legend, 15 from the LAST row to the say box. SIGNALS is the last row of
   the Trix panel's shape but not of this one. */
.kn-trix--tarneeb .kn-trix-group--who,
.kn-trix--tarneeb .kn-trix-group--speed { margin-bottom: 13px; }

/* Words, not numbers: the board sets a word label at 12.5 (NORMAL / COMPLEX);
   the 17 below is for the numbers 31 / 41 / 61 and 10 / 12 / 15. */
.kn-trix--tarneeb #tarneeb-privacy .kn-trix-opt-en { font-size: 12.5px; }

/* The Arabic say line is its own RTL run (so "61 ... 10" read in order) but
   sits on the board's left edge under the English, like every Arabic line on
   the board. */
#tarneeb-say-ar { text-align: left; }

.kn-trix-legend { display: flex; align-items: baseline; gap: 7px; }

.kn-trix-k {
  font-family: 'IBM Plex Mono', monospace; font-size: 9px;
  letter-spacing: .18em; color: #A98BB8;
}

.kn-trix-last {
  margin-left: auto; font-family: 'IBM Plex Mono', monospace; font-size: 9px; color: #7E6A88;
}

.kn-trix-last[hidden] { display: none; }

.kn-trix-opts { display: flex; gap: 7px; }

.kn-trix-opt {
  flex: 1; box-sizing: border-box; appearance: none; cursor: pointer;
  background: #131A0F; border: 1px solid #2A2233; border-radius: 13px;
  --kn-bg: #131A0F; --kn-bd: #2A2233;
  padding: 11px 9px;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  transition: background .18s, border-color .18s;
}

.kn-trix-opt-en {
  font-family: 'Archivo Black', sans-serif; font-size: 12.5px; line-height: 1; color: #C6BCA6;
}

.kn-trix-opt-ar {
  font-family: Lemonada, sans-serif; font-weight: 700; font-size: 9.5px;
  line-height: 1.4; color: #7E6A88;
}

.kn-trix-opt-deals {
  font-family: 'IBM Plex Mono', monospace; font-size: 8.5px;
  letter-spacing: .06em; color: #6E5A78; margin-top: 2px;
}

.kn-trix-opt-time {
  font-family: 'IBM Plex Mono', monospace; font-size: 8.5px;
  letter-spacing: .06em; color: #5E4E68;
}

.kn-trix-opt[aria-pressed="true"] { background: #332040; border-color: #C08FD0; --kn-bg: #332040; --kn-bd: #C08FD0; }

.kn-trix-opt[aria-pressed="true"] .kn-trix-opt-en { color: #F2E4F7; }

.kn-trix-opt[aria-pressed="true"] .kn-trix-opt-ar { color: #C08FD0; }

.kn-trix-opt[aria-pressed="true"] .kn-trix-opt-deals { color: #C08FD0; }

.kn-trix-opt[aria-pressed="true"] .kn-trix-opt-time { color: #8A7A96; }

/* text-align: a <button> does not inherit it (the UA sets center), and the
   board's "who" tile is a div whose two lines sit flush left beside the dots. */
.kn-trix-opt--who { flex-direction: row; align-items: center; gap: 9px; padding: 11px 10px; text-align: start; }

.kn-trix-dots {
  display: grid; grid-template-columns: 9px 9px; grid-template-rows: 9px 9px;
  gap: 3px; flex: none;
}

.kn-trix-dots i { border-radius: 50%; background: #6E5A78; }

.kn-trix-who-body { display: flex; flex-direction: column; gap: 1px; }

.kn-trix-who-en { font-size: 12px; font-weight: 800; color: #C6BCA6; }

.kn-trix-who-ar {
  font-family: Lemonada, sans-serif; font-weight: 700; font-size: 9.5px;
  line-height: 1.4; color: #7E6A88;
}

.kn-trix-opt--who[aria-pressed="true"] .kn-trix-who-en { color: #F2E4F7; }

.kn-trix-opt--who[aria-pressed="true"] .kn-trix-who-ar { color: #C08FD0; }

.kn-trix-opt--who[aria-pressed="true"] .kn-trix-dots--pairs i:nth-child(1),
.kn-trix-opt--who[aria-pressed="true"] .kn-trix-dots--pairs i:nth-child(4) { background: #C08FD0; }

.kn-trix-dots--solo i:nth-child(1) { background: #6E5A78; }

.kn-trix-dots--solo i:nth-child(2) { background: #8A7A96; }

.kn-trix-dots--solo i:nth-child(3) { background: #5E4E68; }

.kn-trix-dots--solo i:nth-child(4) { background: #7E6A88; }

.kn-trix-say {
  display: flex; align-items: center; gap: 11px; box-sizing: border-box;
  background: rgba(192,143,208,.1); border: 1px solid #3A2A46; border-radius: 13px;
  padding: 11px 13px; margin-bottom: 12px;
}

.kn-trix-say img { width: 36px; display: block; flex: none; }

.kn-trix-say-body { display: flex; flex-direction: column; gap: 2px; }

.kn-trix-say-en {
  font-size: 11.5px; font-weight: 800; line-height: 1.35; color: #E9D4F2; text-wrap: pretty;
}

.kn-trix-say-ar {
  font-family: Lemonada, sans-serif; font-weight: 600; font-size: 9.5px;
  line-height: 1.4; color: #8A7A96;
}

.kn-trix-start {
  width: 100%; box-sizing: border-box; appearance: none; cursor: pointer;
  background: #C08FD0; color: #150E1C;
  font-size: 15px; font-weight: 800; letter-spacing: .04em;
  padding: 15px 0; border: 0; border-radius: 12px; text-align: center;
  transition: transform .18s cubic-bezier(.22,1,.36,1);
}

.kn-trix-start:active { transform: scale(.99); }

.kn-trix-start[disabled] { opacity: .55; cursor: default; }

body.theme-dark .kn-trix-start { color: #150E1C; }

/* 2026-09-26 · the Tarneeb setup panel (#tarneeb-setup): board 30's parts in
   Tarneeb's gold. Open, it takes the TARNEEB card's place at the top and the
   TRIX card collapses under it - the mirror of the Trix panel. */
.kn-games--open-t { display: flex; flex-direction: column; gap: 10px; }

.kn-games--open-t .kn-game[data-game="Tarneeb"] { display: none; }

.kn-games--open-t #tarneeb-setup { order: -1; }

.kn-trix--tarneeb { background: linear-gradient(150deg, #1F1A0E 0%, #131A0F 82%); border-color: #4A3C1E; }

.kn-trix--tarneeb .kn-trix-en { color: #F7E9C8; }

.kn-trix--tarneeb .kn-trix-ar,
.kn-trix--tarneeb .kn-trix-chev,
.kn-trix--tarneeb .kn-trix-k { color: #B89A5E; }

.kn-trix--tarneeb .kn-trix-last { color: #8A7448; }

.kn-trix--tarneeb .kn-trix-opt { border-color: #2E2A1C; --kn-bd: #2E2A1C; }

.kn-trix--tarneeb .kn-trix-opt-en { font-size: 17px; }

.kn-trix--tarneeb .kn-trix-opt-ar,
.kn-trix--tarneeb .kn-trix-who-ar { color: #8A7448; }

.kn-trix--tarneeb .kn-trix-opt-deals { color: #7A6844; }

.kn-trix--tarneeb .kn-trix-opt[aria-pressed="true"] { background: #33290F; border-color: #EFC375; --kn-bg: #33290F; --kn-bd: #EFC375; }

.kn-trix--tarneeb .kn-trix-opt[aria-pressed="true"] .kn-trix-opt-en,
.kn-trix--tarneeb .kn-trix-opt--who[aria-pressed="true"] .kn-trix-who-en { color: #F7E9C8; }

.kn-trix--tarneeb .kn-trix-opt[aria-pressed="true"] .kn-trix-opt-ar,
.kn-trix--tarneeb .kn-trix-opt[aria-pressed="true"] .kn-trix-opt-deals,
.kn-trix--tarneeb .kn-trix-opt--who[aria-pressed="true"] .kn-trix-who-ar { color: #EFC375; }

.kn-trix--tarneeb .kn-trix-say { background: rgba(239,195,117,.08); border-color: #4A3C1E; }

.kn-trix--tarneeb .kn-trix-say-en { color: #F2E3C0; }

.kn-trix--tarneeb .kn-trix-say-ar { color: #8A7448; }

.kn-trix--tarneeb .kn-trix-start,
body.theme-dark .kn-trix--tarneeb .kn-trix-start { background: #EFC375; color: #0C1009; }

.kn-tarneeb-sig {
  font-family: 'IBM Plex Mono', monospace; font-size: 15px; line-height: 1;
  color: #7A6844; flex: none; text-align: center;
  /* 21 = the board's dot grid (9 + 3 + 9), so the words start at 41px like
     "Partners" / "Every man" do. */
  width: 21px;
}

.kn-trix-opt--who[aria-pressed="true"] .kn-tarneeb-sig { color: #EFC375; }

.kn-go { align-items: stretch; text-align: start; gap: 0; }

.kn-go-kicker {
  font: 600 10px/1 var(--font-ui, inherit);
  letter-spacing: .18em;
  color: var(--gold-dim);
}

.kn-go-line {
  font: 700 40px/1.05 var(--font-ui, inherit);
  color: var(--gold-hi);
  margin: 14px 0 10px;
  text-wrap: pretty;
}

.kn-go-sub { font: 400 14px/1.5 var(--font-ui, inherit); color: var(--ink2); }

.kn-go-rule { height: 1px; background: var(--line2); margin: 22px 0; }

.kn-go-again {
  height: 52px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 18px;
  border: 0;
  border-radius: 0;
  background: var(--gold);
  color: var(--on-gold);
  font: 700 13px/1 var(--font-ui, inherit);
  letter-spacing: .06em;
  cursor: pointer;
  align-self: flex-start;
}

.kn-go-again--waiting {
  background: transparent;
  border: 1px solid var(--line3);
  color: var(--ink3);
  cursor: default;
}

.kn-go .go-rematch-count { margin-top: 10px; font: 400 12px/1.5 var(--font-ui, inherit); color: var(--ink3); }

.kn-go .go-actions { align-items: flex-start; }

#view-room .kn-claim {
  --pc-w: clamp(40px, 15.3vw, 92px);
  --pc-h: calc(var(--pc-w) * 1.4);
  position: absolute;
  left: 50%;
  top: 47%;
  transform: translate(-50%, -50%);
  z-index: 70;
  display: flex;
  justify-content: center;
  align-items: center;
  /* Slight overlap, as a run of winners laid down by one hand would fall —
     small enough that every rank and suit stays readable, which is the point. */
  gap: calc(var(--pc-w) * -0.06);
  max-width: 92%;
  pointer-events: none;
  animation: knClaimIn 260ms cubic-bezier(.22, 1, .36, 1);
}

#view-room .kn-claim .card {
  /* RELATIVE, not static. The card face is built from absolutely-positioned
     .corner and .pip children, so a static card is not their containing block
     and all four faces collapse onto the .kn-claim box instead — which renders
     as a row of blank cards with one stray glyph, and is exactly what it did. */
  position: relative;
  flex: 0 0 auto;
  margin: 0;
  width: var(--pc-w);
  height: var(--pc-h);
  border-radius: var(--radius-card-lg);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .55);
}

#view-room .kn-claim .card .pip { font-size: calc(var(--pc-w) * 0.62); }

#view-room .kn-claim .card .corner .rank { font-size: calc(var(--pc-w) * 0.26); }

#view-room .kn-claim .card .corner .suit { font-size: calc(var(--pc-w) * 0.21); }

#view-room .kn-claim .card .corner.tl { top: 4px; left: 5px; }

#view-room .kn-claim .card .corner.br { bottom: 4px; right: 5px; }

#view-room .kn-claim--tight { gap: calc(var(--pc-w) * -0.34); }

.kn-share-scrim {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: var(--scrim, rgba(0, 0, 0, .62));
  display: flex;
  align-items: flex-end;
  justify-content: center;
  animation: knShareIn 160ms ease-out;
}

.kn-share-sheet {
  width: 100%;
  max-width: 460px;
  background: var(--surf, #131a0f);
  border-top: 1px solid var(--line4, rgba(255, 255, 255, .12));
  box-shadow: 0 -12px 32px rgba(0, 0, 0, .55);
  padding: 16px 14px calc(14px + env(safe-area-inset-bottom, 0px));
  animation: knSheet 240ms cubic-bezier(.22, 1, .36, 1);
}

.kn-share-head {
  font: 800 11px/1 var(--font-ui);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-mute, #8fa391);
  margin-bottom: 6px;
}

.kn-share-code {
  font: 800 22px/1.1 var(--font-ui);
  letter-spacing: .12em;
  color: var(--gold, #e5b26a);
  margin-bottom: 14px;
  word-break: break-all;
}

.kn-share-rows { display: flex; flex-direction: column; }

.kn-share-row {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 46px;
  padding: 0 14px;
  margin-top: 8px;
  box-sizing: border-box;
  border: 1px solid var(--line3, rgba(255, 255, 255, .14));
  background: var(--surf0, rgba(255, 255, 255, .03));
  color: var(--ink, #f4e9d4);
  font: 700 13px/1 var(--font-ui);
  letter-spacing: .06em;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.kn-share-row:hover { border-color: var(--gold, #e5b26a); color: var(--gold, #e5b26a); }

.kn-share-cancel { justify-content: center; border-color: transparent; color: var(--ink-mute, #8fa391); }

.kn-fallback-bid {
  position: absolute;
  left: 50%;
  bottom: 22%;
  transform: translateX(-50%);
  z-index: 1000;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  padding: 12px 14px;
  max-width: min(92vw, 420px);
  border-radius: 14px;
  background: rgba(12, 14, 18, .94);
  border: 1px solid rgba(212, 175, 55, .35);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .5);
}

.kn-fallback-bid button {
  min-width: 44px;          /* a real touch target, not a decorative one */
  min-height: 44px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid rgba(212, 175, 55, .45);
  background: rgba(212, 175, 55, .12);
  color: #f4e9d4;
  font-size: 1rem;
  font-weight: 600;
}

.kn-fallback-bid button:disabled {
  opacity: .35;
  border-color: rgba(255, 255, 255, .12);
  background: transparent;
}

.kn-fallback-bid button.pass {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .22);
  color: #c6bca6;
}

.kn-taunt {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  pointer-events: none;   /* he is scenery; never steal a tap from a card */
}

.kn-taunt img { display: block; flex: none; width: 52px; height: auto; }

.kn-taunt-bubble {
  background: var(--bubble);
  /* gold stays as the edge his voice comes from - logical, so it moves to the
     right side in Arabic along with the tail */
  border-inline-start: 3px solid var(--bubble-edge);
  border-radius: 12px;
  border-start-start-radius: 3px;
  border-end-start-radius: 3px;
  padding: 9px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.kn-taunt-en { font: 800 12px/1.35 var(--font-ui); color: var(--bubble-ink); text-wrap: pretty; }

.kn-taunt-ar { font: 600 10.5px/1.5 var(--font-ar); color: var(--bubble-ink-2); }

/* 65, one language per surface (2026-09-18). The joker spoke twice on the
   lobby, once in each language, stacked - the felt's own strip has been
   collapsing for a fortnight (.kj-cer2-strip-en) and this pair was never
   added. His WORDS are copy, not a player's phrase, so they translate and
   only one of them is shown. */
body.kj-ar .kn-taunt-en { display: none; }
body.kj-en .kn-taunt-ar { display: none; }

.kn-taunt--turn {
  position: absolute;
  inset-inline-start: 16px;
  bottom: 116px;
  max-width: 250px;
  z-index: 6;
}

.kn-taunt--bid { margin: 0 0 10px; align-self: flex-start; max-width: 84%; }

.kn-taunt--bid img { width: 60px; }

.kn-taunt--room img { width: 48px; }

.kn-taunt--room .kn-taunt-bubble { flex: 1; }

.kn-taunt--round {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--line2);
  align-items: center;
}

.kn-taunt--round img { width: 58px; }

/* the round variant has no bubble at all, so it gets no edge either */
.kn-taunt--round .kn-taunt-bubble { background: none; padding: 0; border-inline-start: 0; border-radius: 0; }

.kn-taunt--round .kn-taunt-en { color: var(--gold); font-size: 13px; }

.kn-taunt--round .kn-taunt-ar { color: var(--ink3); font-size: 11px; }

.kn-taunt--victory .kn-taunt-bubble {
  border-radius: 14px;
  padding: 12px 15px;
  width: 100%;
}

.kn-taunt--victory .kn-taunt-en { font-size: 13.5px; }

.kn-taunt--victory .kn-taunt-ar { font-size: 11.5px; }

.kn-wr-head {
  flex: none; height: 54px; display: flex; align-items: center;
  padding: 0 18px; gap: 10px;
}

.kn-wr-back, .kn-wr-menu {
  flex: none; font: 400 17px/1 var(--font-mono); color: var(--ink3);
  cursor: pointer; min-width: 24px;
}

.kn-wr-menu { text-align: end; }

.kn-wr-heading {
  flex: 1; min-width: 0; display: flex; flex-direction: column;
  align-items: center; gap: 1px;
}

.kn-wr-title {
  font: 400 13px/1 var(--font-display); letter-spacing: .02em;
  color: var(--ink); white-space: nowrap;
}

.kn-wr-meta {
  font: 500 9px/1 var(--font-mono); letter-spacing: .18em;
  color: var(--on-felt-2); white-space: nowrap;
}

.kn-wr-stage {
  flex: 1 1 auto; min-height: 0; display: flex; align-items: center;
  justify-content: center; padding: 8px 16px;
}

.kn-table {
  position: relative; width: 100%; max-width: 352px;
  aspect-ratio: 352 / 400; max-height: 100%;
  border-radius: 26px; overflow: hidden;
  background: radial-gradient(70% 58% at 50% 50%, var(--felt1) 0%, var(--felt2) 48%, var(--felt3) 100%);
  border: 1px solid var(--felt-line);
}

.kn-axis { position: absolute; pointer-events: none; }

.kn-axis--us {
  left: 37.5%; top: 2%; width: 25%; height: 96%;
  border-radius: 44px; background: rgba(239, 195, 117, .075);
}

.kn-axis--them {
  left: 2.27%; top: 39.5%; width: 95.45%; height: 21%;
  border-radius: 42px; background: rgba(196, 85, 63, .085);
}

.kn-table-ring {
  position: absolute; inset: 12px; pointer-events: none;
  border: 1px solid rgba(239, 195, 117, .14);
  border-radius: 50% / 26%;
}

.kn-table-hint {
  position: absolute; inset-inline-start: 12px; top: 12px;
  font: 500 8px/1 var(--font-mono); letter-spacing: .14em; color: var(--ink4);
  background: rgba(9, 13, 8, .6); border: 1px solid var(--line4);
  border-radius: 8px; padding: 4px 9px; pointer-events: none;
}

.kn-table-chip {
  position: absolute; left: 50%; top: 61%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 8px;
  background: rgba(9, 13, 8, .55); border: 1px solid var(--line4);
  border-radius: 9px; padding: 6px 12px; pointer-events: none;
}

.kn-table-target { font: 400 13px/1 var(--font-display); color: var(--gold); }

.kn-table-div { width: 1px; height: 12px; background: var(--line5); }

.kn-table-mode { font: 500 9px/1 var(--font-mono); letter-spacing: .16em; color: var(--on-felt-2); }

.kn-wseat {
  position: absolute; transform: translate(-50%, -50%);
  width: 96px; z-index: 20;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  transition: left 420ms cubic-bezier(.22, 1, .36, 1),
              top  420ms cubic-bezier(.22, 1, .36, 1);
}

.kn-wseat-av {
  width: var(--kn-av, 50px); height: var(--kn-av, 50px); box-sizing: border-box;
  border-radius: 50%; display: grid; place-items: center;
  font: 800 17px/1 var(--font-ui);
  background: var(--kn-avBg); border: var(--kn-avBorder); color: var(--kn-avCol);
  animation: var(--kn-avPulse, none);
}

.kn-wseat-name {
  font: 700 12px/1 var(--font-ui); color: var(--kn-nameCol);
  white-space: nowrap; text-shadow: 0 1px 3px rgba(0, 0, 0, .65);
}

.kn-wseat-role {
  font: 500 8px/1 var(--font-mono); letter-spacing: .14em; color: var(--kn-roleCol);
  white-space: nowrap; text-shadow: 0 1px 3px rgba(0, 0, 0, .65);
}

.kn-teams {
  flex: none; display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  margin: 10px 22px 0;
}

.kn-team {
  border-radius: 14px; padding: 11px 13px;
  display: flex; flex-direction: column; gap: 5px; min-width: 0;
}

.kn-team--us   { background: var(--surf2); border: 1px solid var(--gold-dim); }

.kn-team--them { background: var(--surf);  border: 1px solid var(--oxblood-line); }

.kn-team-label { font: 500 8.5px/1 var(--font-mono); letter-spacing: .16em; }

.kn-team--us   .kn-team-label { color: var(--gold); }

.kn-team--them .kn-team-label { color: var(--oxblood-hi); }

.kn-team-line {
  display: flex; align-items: center; gap: 7px;
  font: 700 13px/1.2 var(--font-ui); min-width: 0;
}

.kn-team-line > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.kn-team--us   .kn-team-line { color: var(--ink); }

.kn-team--them .kn-team-line { color: var(--ink2); }

.kn-team-pip { flex: none; font-size: 13px; line-height: 1; }

.kn-team--us   .kn-team-pip { color: var(--gold); }

.kn-team--them .kn-team-pip { color: var(--oxblood-hi); }

.kn-team-seats { font: 500 8px/1 var(--font-mono); letter-spacing: .12em; color: var(--ink4); }

.kn-wr-taunt { flex: none; margin: 10px 20px 0; }

.kn-wr-persona {
  flex: none; margin: 10px 22px 0; height: 44px; box-sizing: border-box;
  display: flex; align-items: center; gap: 10px; padding: 0 12px;
  border: 1px solid var(--line4); border-radius: 12px;
  background: var(--surf); cursor: pointer;
}

.kn-wr-persona-k { flex: none; font: 500 8px/1 var(--font-mono); letter-spacing: .14em; color: var(--ink4); }

.kn-wr-persona-v {
  flex: 1; min-width: 0; font: 700 13px/1 var(--font-ui); color: var(--gold-hi);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.kn-wr-persona-meter { flex: none; width: 56px; height: 4px; background: var(--surf4); border-radius: 2px; overflow: hidden; }

.kn-wr-persona-meter i { display: block; height: 100%; background: var(--gold); }

.kn-wr-persona-chev { flex: none; font: 700 13px/1 var(--font-ui); color: var(--ink4); }

.kn-wr-cta { flex: none; display: flex; flex-direction: column; gap: 9px; padding: 12px 22px 30px; }

.kn-wr-start {
  background: var(--kn-startBg); color: var(--kn-startFg);
  font: 800 15px/1 var(--font-ui); letter-spacing: .04em;
  padding: 15px 8px; border-radius: 12px; text-align: center;
  cursor: var(--kn-startCursor, pointer);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.kn-wr-secondary { display: grid; grid-template-columns: 1.6fr 1fr; gap: 9px; }

.kn-wr-sec {
  border: 1px solid var(--line5); color: var(--ink2);
  font: 600 14px/1 var(--font-ui); padding: 12px 6px; border-radius: 12px;
  text-align: center; cursor: pointer; white-space: nowrap;
}

.kn-seats [data-kn="initial"] { transition: transform 120ms ease; }

.kn-seats [role="button"]:hover [data-kn="initial"] { transform: scale(1.06); }

.kn-seats [role="button"]:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 2px; }