/* The friends' ROOM keeps «Твой стол» (owner 22.10, flow «Своя комната»; the table as a platform, variant Б «Вещи на столе»; since 29.10 the
   menu is the key-art screen at the bottom of this file): one decorated table seen from
   above. The middle is the game (the seats, the three chips of the kinds, the setup); the things on it are the doors: my near edge
   (the workshop), the book «Ты», the guest book with its bell (friends), the scroll of rules and the letter. A thing opens in its
   own material into its own place (ui.ts unfoldMove; owner 22.10: no camera). Positions match hometable.ts THINGS.
   Colours: theme tokens (style.css :root), the table's own wood, brass, leather and flame included (--tb-*). */

.tb-world { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; }

/* the table: a rim of grained wood with a brass inlay, the felt with its weave */
.tb-rim { position: absolute; left: 36px; top: 56px; width: 1848px; height: 988px; border-radius: 300px;
  background: repeating-linear-gradient(97deg, rgba(var(--tb-wood-hi-rgb), .16) 0 2px, transparent 2px 9px, rgba(var(--tb-wood-lo-rgb), .25) 9px 10px, transparent 10px 23px),
    radial-gradient(ellipse at 30% 0%, rgba(var(--tb-wood-hi-rgb), .9), transparent 60%), linear-gradient(165deg, rgb(var(--tb-wood-hi-rgb)) 0%, rgb(var(--tb-wood-rgb)) 42%, rgb(var(--tb-wood-lo-rgb)) 100%);
  box-shadow: 0 50px 120px rgba(var(--c-shadow-rgb), .85), 0 12px 30px rgba(var(--c-shadow-rgb), .6), inset 0 3px 0 rgba(255, 230, 190, .22), inset 0 -10px 24px rgba(var(--c-shadow-rgb), .7); }
.tb-rim::before { content: ""; position: absolute; inset: 16px; border-radius: 284px; border: 2px solid var(--tb-brass); box-shadow: 0 0 0 1px rgba(var(--c-shadow-rgb), .6), inset 0 0 0 1px rgba(var(--c-shadow-rgb), .5); opacity: .85; }
.tb-rim::after { content: ""; position: absolute; inset: 44px; border-radius: 258px; box-shadow: inset 0 6px 14px rgba(var(--c-shadow-rgb), .8), 0 -1px 0 rgba(255, 230, 190, .18); }
.tb-felt { position: absolute; left: 96px; top: 116px; width: 1728px; height: 868px; border-radius: 250px;
  background: repeating-linear-gradient(45deg, rgba(var(--c-shadow-rgb), .07) 0 1px, transparent 1px 4px), repeating-linear-gradient(-45deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px 4px), var(--tex-felt);
  box-shadow: inset 0 0 180px rgba(var(--c-shadow-rgb), .7), inset 0 0 40px rgba(var(--c-shadow-rgb), .5); }

/* what lies on the felt for the look: stacks of chips, a deck, a stray card */
.tb-chips { position: absolute; width: 46px; height: 46px; }
.tb-chips i { position: absolute; left: 0; top: calc(var(--i) * -5px); width: 46px; height: 46px; border-radius: 50%; box-shadow: 0 2px 0 rgba(var(--c-shadow-rgb), .55), 0 6px 10px rgba(var(--c-shadow-rgb), .35);
  background: radial-gradient(circle, transparent 0 13px, var(--chip) 13px 15px, transparent 15px), repeating-conic-gradient(var(--chip) 0 22.5deg, var(--tb-wax) 22.5deg 30deg); }
.tb-chips.c1 { --chip: var(--c-danger); }
.tb-chips.c2 { --chip: var(--tb-brass); }
.tb-chips.c3 { --chip: var(--c-ok); }
.tb-deck { position: absolute; width: 96px; height: 134px; border-radius: 8px; transform: rotate(-9deg); border: 3px solid var(--tb-brass);
  background: repeating-linear-gradient(45deg, rgba(var(--tb-leather-rgb), 1) 0 6px, rgba(var(--tb-leather-lo-rgb), 1) 6px 12px);
  box-shadow: 2px 2px 0 var(--tb-wax), 4px 4px 0 rgba(var(--c-shadow-rgb), .5), 6px 6px 0 var(--tb-wax), 8px 8px 0 rgba(var(--c-shadow-rgb), .5), 12px 16px 24px rgba(var(--c-shadow-rgb), .6); }
.tb-card { position: absolute; width: 96px; height: 134px; border-radius: 8px; transform: rotate(14deg); border: 3px solid var(--tb-brass);
  background: repeating-linear-gradient(-45deg, rgba(var(--tb-leather-rgb), 1) 0 6px, rgba(var(--tb-leather-lo-rgb), 1) 6px 12px); box-shadow: 10px 14px 22px rgba(var(--c-shadow-rgb), .6); }

/* the things: each one a door; it lifts and glows under the hand, its label in brass under it */
.tb-thing { position: absolute; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; font: inherit; text-align: left; transition: transform .22s, filter .22s; }
.tb-thing:hover, .tb-thing:focus-visible { outline: none; transform: translateY(-5px); filter: drop-shadow(0 0 18px rgba(var(--c-gold-rgb), .35)); }
.tb-thing[aria-disabled="true"] { cursor: default; filter: saturate(.6) brightness(.8); transform: none; }
.tb-lbl { position: absolute; left: 50%; bottom: -36px; transform: translateX(-50%); white-space: nowrap; font: var(--fw-bold) 19px/1 var(--font-display); letter-spacing: .16em; text-transform: uppercase; color: var(--tb-brass-hi); text-shadow: 0 2px 4px rgb(var(--c-shadow-rgb)); opacity: .8; transition: opacity .2s; }
.tb-thing:hover .tb-lbl, .tb-thing:focus-visible .tb-lbl { opacity: 1; }

/* the book «Ты»: tooled leather with a spine, gold edges, corner guards */
.tb-book { left: 150px; top: 330px; width: 320px; height: 380px; }
.tb-cover { position: absolute; inset: 0; border-radius: 6px 16px 16px 6px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 26px 20px 26px 40px; box-sizing: border-box; text-align: center;
  background: linear-gradient(90deg, rgba(var(--tb-leather-lo-rgb), 1) 0 26px, rgba(var(--c-shadow-rgb), .5) 26px 30px, transparent 30px), radial-gradient(ellipse at 60% 30%, rgba(var(--tb-leather-rgb), 1), rgba(var(--tb-leather-lo-rgb), 1));
  box-shadow: 14px 18px 30px rgba(var(--c-shadow-rgb), .7), inset 0 0 0 3px rgba(var(--c-shadow-rgb), .4), inset -6px 0 0 var(--tb-wax), inset -8px 0 0 rgba(var(--c-shadow-rgb), .35); }
.tb-cover::before { content: ""; position: absolute; inset: 16px 16px 16px 44px; border: 2px solid rgba(var(--c-gold-rgb), .55); border-radius: 6px; box-shadow: inset 0 0 0 6px rgba(var(--c-gold-rgb), .12); }
.tb-crest { font: 40px/1 var(--font-display); color: var(--tb-brass-hi); text-shadow: 0 2px 0 rgba(var(--c-shadow-rgb), .6); }
.tb-cname { font: var(--fw-bold) 30px/1.05 var(--font-display); color: var(--tb-brass-hi); max-width: 230px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-shadow: 0 2px 0 rgba(var(--c-shadow-rgb), .7); }
.tb-crank { font: var(--fw-semi) 17px var(--font-body); color: var(--c-paper); }
.tb-csub { font: var(--fw-med) 14px var(--font-body); letter-spacing: .06em; color: rgba(var(--c-paper-rgb), .65); }

/* the guest book: a page of names; the requests waiting as a badge on its corner */
.tb-thing.tb-guest { left: 1450px; top: 330px; width: 320px; height: 330px; }
.tb-page { position: absolute; left: 10px; top: 10px; width: 260px; height: 270px; transform: rotate(-3deg); display: flex; flex-direction: column; gap: 8px; padding: 22px 24px; box-sizing: border-box; border-radius: 4px; color: var(--c-paper-ink);
  background: repeating-linear-gradient(180deg, transparent 0 33px, rgba(var(--c-paper-ink-rgb), .14) 33px 34px), linear-gradient(180deg, var(--c-paper), rgba(var(--c-paper-rgb), .86)); box-shadow: 10px 14px 24px rgba(var(--c-shadow-rgb), .6), inset 0 0 30px rgba(var(--tb-wood-rgb), .25); }
.tb-page b { font: var(--fw-bold) 21px/1.1 var(--font-display); color: rgb(var(--tb-leather-rgb)); }
.tb-fr { font: var(--fw-med) 17px var(--font-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-fr::before { content: "○ "; color: rgba(var(--c-paper-ink-rgb), .5); }
.tb-fr.on::before { content: "● "; color: var(--c-ok); }
.tb-fr.fight::before { content: "◐ "; color: var(--tb-brass-lo); }
.tb-badge { position: absolute; top: 0; right: 40px; min-width: 30px; height: 30px; padding: 0 7px; box-sizing: border-box; border-radius: 15px; display: grid; place-items: center;
  font: var(--fw-bold) 15px/1 var(--font-num); color: var(--c-paper); background: var(--c-danger); box-shadow: 0 0 0 2px var(--tb-wax), 0 0 14px rgba(var(--c-danger-rgb), .7); animation: tb-ring 2.4s ease-in-out infinite; }
@keyframes tb-ring { 0%, 80%, 100% { transform: rotate(0); } 84% { transform: rotate(-14deg); } 90% { transform: rotate(12deg); } 95% { transform: rotate(-6deg); } }
html[data-fx="off"] .tb-badge { animation: none; }

/* my near edge — the workshop: a stitched leather mat with my name and the box that holds my build */
.tb-work { left: 560px; top: 780px; width: 800px; height: 170px; display: flex; align-items: center; gap: 26px; padding: 0 30px; box-sizing: border-box; border-radius: 26px;
  background: radial-gradient(ellipse at 50% 0%, rgba(var(--tb-wood-hi-rgb), .45), transparent 70%), linear-gradient(180deg, rgba(var(--tb-wood-rgb), .96), rgba(var(--tb-wood-lo-rgb), .98));
  box-shadow: 0 16px 34px rgba(var(--c-shadow-rgb), .7), inset 0 0 0 2px var(--tb-brass), inset 0 2px 0 rgba(255, 230, 190, .2); }
.tb-work::before { content: ""; position: absolute; inset: 9px; border: 2px dashed rgba(var(--c-gold-rgb), .35); border-radius: 18px; pointer-events: none; }
.tb-work .tb-lbl { bottom: auto; top: -34px; }
/* the whole mat is the build (owner 22.10: «отдать все пространство мастерской под эти вещи»): no box inside it */
.tb-box { flex: 1; min-width: 0; align-self: stretch; display: flex; align-items: center; padding: 14px 6px; }
.tb-box .menu-build { flex: 1; min-width: 0; height: 100%; }

/* the corners: a clothbound rulebook and a sealed letter */
.tb-rules { left: 220px; top: 800px; width: 240px; height: 140px; }
/* the scroll of rules: rolled parchment between two wooden rods, a red ribbon */
.tb-scroll { position: absolute; left: 18px; right: 18px; top: 28px; bottom: 28px; transform: rotate(-6deg); display: grid; place-items: center; border-radius: 6px;
  background: linear-gradient(90deg, rgba(var(--c-paper-ink-rgb), .22), transparent 14%, transparent 86%, rgba(var(--c-paper-ink-rgb), .22)), var(--c-paper); box-shadow: 10px 14px 22px rgba(var(--c-shadow-rgb), .6); }
.tb-scroll::before, .tb-scroll::after { content: ""; position: absolute; top: -14px; bottom: -14px; width: 26px; border-radius: 13px;
  background: linear-gradient(90deg, rgb(var(--tb-wood-lo-rgb)), rgb(var(--tb-wood-hi-rgb)) 45%, rgb(var(--tb-wood-lo-rgb))); box-shadow: 0 6px 10px rgba(var(--c-shadow-rgb), .5), inset 0 0 0 2px rgba(var(--c-gold-rgb), .35); }
.tb-scroll::before { left: -14px; }
.tb-scroll::after { right: -14px; }
.tb-scroll b { font: var(--fw-bold) 26px var(--font-display); letter-spacing: .1em; color: rgb(var(--tb-leather-rgb)); padding: 2px 14px; border-bottom: 4px solid var(--c-danger); }
.tb-letter { left: 1460px; top: 800px; width: 240px; height: 140px; }
.tb-env { position: absolute; inset: 0; transform: rotate(-6deg); border-radius: 4px; display: grid; place-items: center;
  background: linear-gradient(155deg, transparent 49.5%, rgba(var(--c-paper-ink-rgb), .2) 50%, transparent 50.5%), linear-gradient(25deg, transparent 49.5%, rgba(var(--c-paper-ink-rgb), .2) 50%, transparent 50.5%), var(--c-paper); box-shadow: 10px 14px 22px rgba(var(--c-shadow-rgb), .6); }
.tb-env b { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; font: 24px/1 var(--font-body); color: var(--c-paper); background: radial-gradient(circle at 40% 35%, var(--c-danger), rgba(var(--tb-leather-lo-rgb), 1)); box-shadow: 0 3px 6px rgba(var(--c-shadow-rgb), .5); }
.tb-rules .tb-lbl, .tb-letter .tb-lbl { bottom: auto; top: -38px; }

/* the game in the middle of the felt: the setup, the other seats, the medallions or what the table does now */
.tb-play { position: absolute; inset: 0; pointer-events: none; }
.tb-play > * { pointer-events: auto; }
.tb-setup { position: absolute; left: 50%; top: 150px; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; padding: 8px 18px; white-space: nowrap; border-radius: 30px; background: rgba(var(--c-shadow-rgb), .4); box-shadow: inset 0 0 0 1px rgba(var(--c-gold-rgb), .3); }
.tb-setup:has(.tb-bots.open) { z-index: 5; }
/* the bots' strength (owner 24.10): the chosen bot and its rating; open, every bot weakest first with its rating */
.tb-bots { position: relative; }
.tb-bots-head { display: inline-flex; align-items: baseline; gap: 8px; height: 32px; padding: 0 12px; border: 0; border-radius: 16px; cursor: pointer; color: var(--c-ink);
  background: rgba(var(--c-ink-rgb), .06); box-shadow: inset 0 0 0 1px rgba(var(--c-gold-rgb), .35); font: var(--fw-bold) 17px/32px var(--font-display); letter-spacing: .02em; }
.tb-bots-head:hover, .tb-bots.open .tb-bots-head { box-shadow: inset 0 0 0 1px rgba(var(--c-gold-rgb), .7); }
.tb-bot-r { font: var(--fw-bold) 14px var(--font-num); color: var(--c-gold); font-variant-numeric: tabular-nums; }
.tb-bots-caret { font-size: 11px; color: var(--c-ink-2); transition: transform .15s; }
.tb-bots.open .tb-bots-caret { transform: rotate(180deg); }
.tb-bots-list { display: none; position: absolute; left: 50%; top: calc(100% + 10px); transform: translateX(-50%); width: 340px; padding: 8px; border-radius: 16px; white-space: normal;
  background: radial-gradient(ellipse at 50% 0%, rgba(var(--tb-wood-hi-rgb), .3), transparent 70%), rgba(var(--c-shadow-rgb), .92); box-shadow: inset 0 0 0 1px rgba(var(--c-gold-rgb), .35), 0 14px 30px rgba(var(--c-shadow-rgb), .6); }
.tb-bots.open .tb-bots-list { display: block; }
.tb-bot { display: grid; grid-template-columns: 1fr 72px 38px; align-items: center; gap: 10px; width: 100%; padding: 7px 10px; border: 0; border-radius: 10px; cursor: pointer; text-align: left; color: var(--c-ink-2); background: transparent; }
.tb-bot:hover { color: var(--c-ink); background: rgba(var(--c-ink-rgb), .06); }
.tb-bot.on { color: var(--c-ink); background: rgba(var(--c-gold-rgb), .12); box-shadow: inset 3px 0 0 var(--c-gold); }
.tb-bot-n { font: var(--fw-bold) 17px/1.2 var(--font-display); letter-spacing: .02em; white-space: nowrap; }
.tb-bot .tb-bot-r { text-align: right; }
.tb-bot-bar { height: 4px; border-radius: 2px; background: rgba(var(--c-ink-rgb), .1); overflow: hidden; }
.tb-bot-bar i { display: block; height: 100%; border-radius: 2px; background: linear-gradient(90deg, rgba(var(--c-gold-rgb), .45), var(--c-gold)); }
.tb-bots-note { margin: 6px 10px 2px; font-size: 11px; color: var(--c-ink-2); opacity: .8; }
.tb-others { position: absolute; left: 50%; top: 216px; transform: translateX(-50%); display: flex; gap: 26px; }
.tb-seat { box-sizing: border-box; width: min(250px, calc((960px - (var(--n) - 1) * 26px) / var(--n))); min-height: 128px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; padding: 14px 16px; border-radius: 18px;
  background: radial-gradient(ellipse at 50% 0%, rgba(var(--tb-wood-hi-rgb), .35), transparent 70%), rgba(var(--c-shadow-rgb), .55);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--seat, var(--tb-brass)) 80%, transparent), 0 12px 26px rgba(var(--c-shadow-rgb), .5); }
.tb-seat.free { background: rgba(var(--c-shadow-rgb), .25); box-shadow: inset 0 0 0 2px rgba(var(--c-gold-rgb), .25); }
.tb-sn { font: var(--fw-bold) 22px/1.1 var(--font-display); color: var(--seat, var(--c-ink)); text-align: center; }
.tb-seat.free .tb-sn { color: var(--c-ink-2); }
.tb-sr { font-size: 15px; color: var(--c-ink-2); text-align: center; }
.tb-sa { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.tb-mid { position: absolute; left: 50%; top: 380px; transform: translateX(-50%); width: 960px; display: flex; justify-content: center; }
/* no backing under the middle (owner 22.10: «темное закругление… полностью убрать»): it lies on the felt itself */
.tb-panel { box-sizing: border-box; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 10px 0; text-align: center; text-shadow: 0 2px 6px rgba(var(--c-shadow-rgb), .8); }
.tb-panel h2 { margin: 0; font: var(--fw-bold) 34px/1.1 var(--font-display); color: var(--c-ink); }
.tb-panel p { margin: 0; }
.tb-acts { display: flex; gap: 14px; }
/* the friends' table (owner 23.10): its name right in the middle of the felt, the buttons lower down */

/* who watches a friends' table */
/* who watches: one line under «Готов» and «Начать бой» (owner 22.10) */
.tb-watch { display: flex; align-items: baseline; gap: 10px; font-size: 16px; }
.tb-wn { color: var(--c-ink-2); }

/* the bar over the table: «⚙», «⋯» */
.tb-top { position: absolute; left: 40px; right: 40px; top: 24px; display: flex; align-items: center; gap: 12px; z-index: 32; }
.tb-sp { flex: 1; }

/* windows that grow out of a thing (ui.ts Unfold): where they stand, what they are made of; the table under them is not dimmed */
.shade.uf-shade { background: transparent; }
.modal.uf-full { position: absolute; left: 70px; top: 50px; width: 1780px; height: 980px; max-width: none; min-width: 0; box-sizing: border-box; overflow: auto; }
.modal.uf-left { position: absolute; left: 0; top: 0; width: 880px; height: 1080px; max-width: none; min-width: 0; box-sizing: border-box; overflow: auto; border-radius: 0 var(--r-lg) var(--r-lg) 0; }
.modal.uf-right { position: absolute; right: 0; top: 0; width: 820px; height: 1080px; max-width: none; min-width: 0; box-sizing: border-box; overflow: auto; border-radius: var(--r-lg) 0 0 var(--r-lg); }
/* dark: the game's own panel, a brass hairline around it */
.uf.dark, .uf.scroll { background: var(--tex-panel), var(--c-bg); box-shadow: inset 0 0 0 1.5px rgba(var(--c-gold-rgb), .45), 0 24px 60px rgba(var(--c-shadow-rgb), .75); }
/* the scroll of rules: dark between two wooden rods */
.modal.uf.scroll { border-radius: 4px; padding-top: 50px; padding-bottom: 50px; overflow: visible; }
.modal.uf.scroll::before, .modal.uf.scroll::after { content: ""; position: absolute; left: -22px; right: -22px; height: 34px; border-radius: 17px;
  background: linear-gradient(180deg, rgb(var(--tb-wood-lo-rgb)), rgb(var(--tb-wood-hi-rgb)) 45%, rgb(var(--tb-wood-lo-rgb))); box-shadow: 0 8px 16px rgba(var(--c-shadow-rgb), .55), inset 0 0 0 2px rgba(var(--c-gold-rgb), .4); }
.modal.uf.scroll::before { top: -17px; }
.modal.uf.scroll::after { bottom: -17px; }
.modal.uf.scroll .mgl-body { max-height: 780px; overflow: auto; }
/* leather: the book «Ты» — its cover is the frame, the page inside stays the game's dark */
.uf.leather { background: linear-gradient(90deg, transparent calc(100% - 24px), rgba(var(--tb-leather-lo-rgb), 1) calc(100% - 24px)), var(--tex-panel), var(--c-bg);
  box-shadow: inset -8px 0 0 var(--tb-brass), inset 0 0 0 10px rgba(var(--tb-leather-rgb), 1), inset 0 0 0 12px var(--tb-brass), 20px 0 60px rgba(var(--c-shadow-rgb), .7); }

/* «⋯» */
.modal.more { min-width: 420px; }

/* «Ты»: the drawer on the right (owner 29.10, «Ты · А · Ящик» and «ящик будет справа»): glass in the menu's look, 820 wide, the whole height; it grows out of
   the player plate. profileview.ts / ladderscreen.ts / account.ts draw the page, hometable.ts youDrawer the frame. */
.you-shade { position: absolute; inset: 0; z-index: 30; background: linear-gradient(270deg, rgba(var(--km-v), .55) 0%, rgba(var(--km-v), 0) 62%); }
.you { --you-red: color-mix(in srgb, var(--c-danger) 78%, var(--c-ink)); position: absolute; right: 0; top: 0; width: 820px; height: 1080px; z-index: 31; box-sizing: border-box; display: flex; flex-direction: column; gap: 28px; padding: 48px 56px 40px; overflow: auto; border-radius: var(--r-lg) 0 0 var(--r-lg);
  color: var(--c-ink); font: var(--fw-med) 18px/1.4 var(--font-body); background: linear-gradient(180deg, rgba(var(--c-surface-rgb), .94), rgba(var(--km-v), .97)); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: inset 0 0 0 1px rgba(var(--c-accent-2-rgb), .24), inset 0 1px 0 rgba(var(--t-hi-1-rgb), .08), -20px 0 50px rgba(var(--c-shadow-rgb), .55); }
.you button { font-family: inherit; }
.you-h { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.you-x { height: 52px; padding: 0 18px; border: 0; border-radius: var(--r-sm); display: inline-flex; align-items: center; gap: 10px; cursor: pointer; color: var(--c-ink); background: transparent; box-shadow: inset 0 0 0 1px rgba(var(--c-ink-rgb), .3);
  font: var(--fw-semi) 15px/1 var(--font-body); letter-spacing: .08em; text-transform: uppercase; }
.you-x:hover { box-shadow: inset 0 0 0 1px rgba(var(--c-accent-2-rgb), .6); }
.you-x kbd { font: var(--fw-semi) 13px/1 var(--font-body); letter-spacing: .08em; color: var(--t-ink2-2); }
.you-page { flex: 1 0 auto; display: flex; flex-direction: column; gap: 28px; }
.you-page.you-lad { flex: 1 1 0; min-height: 0; gap: 18px; }
.you-top { display: flex; flex-direction: column; gap: 28px; }
.you-sub, .you-dim { margin: 0; font: var(--fw-med) 16px/1.25 var(--font-body); color: var(--km-sub); }
.you-hero { display: flex; align-items: center; gap: 30px; }
.you-hero > svg, .you-oct { flex: none; }
.you-oct { width: 150px; height: 150px; clip-path: var(--clip-chamfer); background: linear-gradient(180deg, rgba(var(--c-ink-rgb), .14), rgba(var(--c-ink-rgb), .05)); }
.you-who { min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.you-name { margin: 0; font: var(--fw-bold) 72px/.9 var(--font-display); color: var(--tb-brass-hi); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.you-line { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 14px; }
.you-tier { font: var(--fw-semi) 30px/1 var(--font-display); color: var(--c-accent-2); }
.you-tier.guest { font-size: 26px; color: var(--km-sub); }
.you-need { margin: 0; color: var(--c-gold); }
.you-card { border-radius: 12px; padding: 24px 26px; display: flex; flex-direction: column; gap: 14px; }
.you-ch { display: flex; align-items: baseline; gap: 14px; }
.you-big { margin-left: auto; font: var(--fw-bold) 44px/1 var(--font-num); }
.you-bar { position: relative; display: block; height: 12px; border-radius: 6px; background: rgba(var(--c-shadow-rgb), .6); box-shadow: inset 0 0 0 1px rgba(var(--c-ink-rgb), .18); overflow: hidden; }
.you-bar i { position: absolute; top: 0; bottom: 0; }
.you-bar .f { left: 0; background: linear-gradient(90deg, var(--c-accent-lo), var(--c-gold)); }
.you-bar .t { width: 2px; background: var(--c-bg-2); }
.you-cells { display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; font: var(--fw-semi) 13px/1 var(--font-body); letter-spacing: .12em; color: var(--t-ink2-2); }
.you-cells .on { color: var(--c-accent-2); }
.you-cl { display: flex; align-items: center; gap: 14px; }
.you-cl > .you-sub { flex: 1; min-width: 0; }
.you-next { flex: none; font: var(--fw-med) 16px/1.25 var(--font-body); color: var(--c-accent-2); }
.you-chip { flex: none; height: 34px; padding: 0 12px; border-radius: 999px; display: inline-flex; align-items: center; gap: 6px; font: var(--fw-bold) 18px/1 var(--font-num);
  color: var(--t-ok-3); background: rgba(var(--c-ok-rgb), .16); box-shadow: inset 0 0 0 1px rgba(var(--c-ok-rgb), .5); }
.you-chip.neg { color: var(--c-danger-2); background: rgba(var(--c-danger-rgb), .16); box-shadow: inset 0 0 0 1px rgba(var(--c-danger-rgb), .5); }
.you-chip.zero { color: var(--km-sub2); background: rgba(var(--c-ink-rgb), .08); box-shadow: inset 0 0 0 1px rgba(var(--c-ink-rgb), .25); }
.you-duel { border-radius: 12px; padding: 18px 26px; display: flex; align-items: center; gap: 18px; }
.you-dm { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 6px; }
.you-dh { display: flex; align-items: baseline; gap: 12px; }
.you-dt { font: var(--fw-semi) 22px/1 var(--font-display); color: var(--c-accent-2); }
.you-dm .you-sub { font-size: 15px; }
.you-dp { font: var(--fw-bold) 32px/1 var(--font-num); }
.you-near { display: flex; flex-direction: column; gap: 6px; }
.you-nh { display: flex; align-items: center; gap: 14px; margin-bottom: 6px; }
.you-nh .kr-seg { margin-left: auto; }
.you-lnk { font-size: 14px; }
.you .btn.you-lnk-b { height: auto; min-height: 0; padding: 8px 4px; border-radius: 0; background: transparent; box-shadow: none; color: var(--km-sub2); font: var(--fw-semi) 13px/1 var(--font-body); letter-spacing: .14em; }
.you .btn.you-lnk-b:hover { background: transparent; box-shadow: none; color: var(--c-accent-2); }
.you-row { box-sizing: border-box; width: 100%; height: 46px; display: flex; align-items: center; gap: 16px; padding: 0 16px; border: 0; border-radius: var(--r-sm); cursor: pointer; text-align: left; color: var(--c-ink); background: transparent; font: inherit; }
.you-row:hover { background: rgba(var(--c-ink-rgb), .06); }
.you-row.me { background: rgba(var(--c-gold-rgb), .12); box-shadow: inset 0 0 0 1px rgba(var(--c-gold-rgb), .55); }
.you-pl { flex: none; width: 44px; text-align: right; font: var(--fw-semi) 20px/1 var(--font-num); color: var(--t-ink2-2); }
.you-row.me .you-pl { color: var(--c-gold); }
.you-nm { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 10px; white-space: nowrap; overflow: hidden; font: var(--fw-semi) 19px/1.1 var(--font-body); }
.you-row.me .you-nm { color: var(--tb-brass-hi); }
.you-nm .hseal { margin-left: 0; align-self: center; }
.you-tag { font: var(--fw-semi) 12px/1 var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--c-accent-2); }
.you-tr { flex: none; width: 130px; font: var(--fw-med) 16px/1 var(--font-body); color: var(--km-sub); }
.you-near .you-tr { display: none; }
.you-pt { flex: none; min-width: 64px; text-align: right; font: var(--fw-semi) 20px/1 var(--font-num); color: var(--t-paper-3); }
.you-row.me .you-pt { color: var(--tb-brass-hi); }

/* the account: the form of a guest, the code shown once, the foot of a signed-in player */
.you-acct { margin-top: auto; display: flex; flex-direction: column; gap: 18px; }
.you-page.guest .you-acct { flex: 1; margin-top: 0; }
.you-page:has(#acct-code) .you-acct { order: -1; margin-top: 0; }
.you-page:has(#acct-code) .you-near, .you-page:has(.you-del) .you-near { display: none; }
.you-abody { display: contents; }
.you-h3 { margin: 6px 0 0; font: var(--fw-semi) 13px/1.2 var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--c-accent-2); }
.you-h3 span { margin-left: 10px; letter-spacing: .06em; text-transform: none; font-weight: var(--fw-med); color: var(--km-sub); }
.you-with { border-radius: 12px; padding: 22px 26px; display: flex; flex-direction: column; gap: 12px; }
.you-tick { display: flex; align-items: center; gap: 12px; font: var(--fw-med) 18px/1.3 var(--font-body); }
.you-tick svg { flex: none; color: var(--c-gold); }
.you .seg { align-self: flex-start; gap: 4px; padding: 4px; border-radius: 7px; background: rgba(var(--c-shadow-rgb), .4); box-shadow: inset 0 0 0 1px rgba(var(--c-ink-rgb), .12); }
.you .seg .btn { height: 40px; padding: 0 20px; border-radius: 5px; font: var(--fw-semi) 17px/1 var(--font-num); letter-spacing: 0; text-transform: none; color: var(--km-sub2); background: transparent; box-shadow: none; }
.you .seg .btn:hover { color: var(--c-ink); }
.you .seg .btn.on { color: var(--c-on-accent); background: var(--km-key); box-shadow: none; }
.you .field { display: flex; flex-direction: column; align-items: stretch; gap: 8px; margin: 0; }
.you .field > span { text-align: left; font: var(--fw-semi) 13px/1 var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--km-sub); }
.you .field input[type] { box-sizing: border-box; width: 100%; height: 56px; padding: 0 16px; border: 0; border-radius: var(--r-sm); color: var(--c-ink); background: rgba(var(--c-shadow-rgb), .45); box-shadow: inset 0 0 0 1px rgba(var(--c-ink-rgb), .22); font: var(--fw-med) 19px/1 var(--font-body); }
.you .field input[type]:focus-visible { outline: none; box-shadow: inset 0 0 0 1px rgba(var(--c-accent-2-rgb), .8); }
.you .field input::placeholder { color: var(--c-ink-dim); }
.you .row { margin: 0; display: flex; align-items: center; justify-content: flex-start; gap: 16px; }
.you .btn.primary { height: 64px; min-width: 260px; padding: 0 28px; border-radius: 8px; font: var(--fw-bold) 28px/1 var(--font-display); letter-spacing: .04em; text-transform: none; color: var(--c-on-accent); background: var(--km-key);
  box-shadow: inset 0 1px 0 rgba(var(--t-hi-1-rgb), .8), inset 0 -4px 0 var(--c-accent-edge), 0 0 0 1px rgba(var(--c-shadow-rgb), .6), 0 16px 40px rgba(var(--c-shadow-rgb), .6), 0 0 60px rgba(var(--c-gold-rgb), .28); }
.you .btn.primary:hover { filter: brightness(1.07); }
.you-more { align-self: flex-start; height: 52px; }
.you .skel-warn, .you #acct-http { margin: 0; font: var(--fw-med) 15px/1.35 var(--font-body); color: var(--you-red); }
.you #acct-http { order: 2; margin-top: auto; }
.you #acct-status { margin: 0; font-size: 16px; color: var(--km-sub); }
.you #acct-status:empty { display: none; }
.you .skel-code { padding: 22px 16px; border-radius: 12px; text-align: center; overflow-wrap: anywhere; user-select: all; font: var(--fw-bold) 36px/1.15 var(--font-num); letter-spacing: .08em; color: var(--tb-brass-hi);
  background: rgba(var(--c-shadow-rgb), .45); box-shadow: inset 0 0 0 1px rgba(var(--c-gold-rgb), .55); }
.you-abody > p:not([class]) { margin: 0; }
.you-acct-line { display: flex; align-items: center; gap: 18px; }
.you-key { flex: none; display: grid; color: var(--t-ink2-2); }
.you-acct-t { flex: 1; min-width: 0; margin: 0; font: var(--fw-med) 15px/1.3 var(--font-body); color: var(--km-sub); }
.you-acct-t b { font-weight: var(--fw-semi); color: var(--c-ink); }
.you .btn.you-out { flex: none; height: 52px; padding: 0 18px; border-radius: var(--r-sm); gap: 8px; font: var(--fw-semi) 15px/1 var(--font-body); letter-spacing: .08em; background: transparent; box-shadow: inset 0 0 0 1px rgba(var(--c-ink-rgb), .3); }
.you .btn.you-out:hover { box-shadow: inset 0 0 0 1px rgba(var(--c-accent-2-rgb), .6); }
.you .btn.you-rm { flex: none; height: auto; padding: 14px 6px; gap: 8px; background: transparent; box-shadow: none; color: var(--you-red); font: var(--fw-semi) 14px/1 var(--font-body); letter-spacing: .14em; }
.you .btn.you-rm:hover { filter: brightness(1.15); }
.you-del { border-radius: 12px; padding: 22px 26px; display: flex; flex-direction: column; gap: 14px; box-shadow: inset 0 0 0 1px rgba(var(--c-danger-rgb), .55), 0 20px 50px rgba(var(--c-shadow-rgb), .55); }
.you-del p { margin: 0; }
.you .btn.you-danger { height: 56px; padding: 0 24px; border-radius: var(--r-sm); font: var(--fw-bold) 16px/1 var(--font-body); letter-spacing: .08em; color: var(--c-ink); background: rgba(var(--c-danger-rgb), .3); box-shadow: inset 0 0 0 1px rgba(var(--c-danger-rgb), .8); }
.you .row .btn.you-lnk-b { height: 56px; padding: 0 8px; }

/* the whole ladder inside the drawer */
.you-lrow { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.you-lrow .you-dim { margin-left: auto; }
.you-lad #lad-list { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 4px; }
/* «+ в друзья» sits in a gutter at the right edge: every row is as wide as the gutter leaves, with or without the button */
.you-lad .lad-line { gap: 8px; }
.you-lad .lad-line .you-row { flex: 1; min-width: 0; width: auto; }
.you-lad .lad-line .btn { width: 150px; height: 40px; flex: none; }
.you-lad #lad-list > .you-row { width: calc(100% - 158px); }
.you-mine { margin: 0; font: var(--fw-semi) 17px/1.25 var(--font-body); color: var(--c-accent-2); }
.you-lad .you-h3 { margin: 14px 0 4px 16px; }

/* phones: the stage is ~0.4, so the drawer is wider (it covers the menu's right side), a target is ≥ 116 stage px and the type is ≥ 24; the rank page
   shows three rows around me, not five, and drops the division names, the duel's last line and the long text of the account's foot; what still
   does not fit scrolls inside the drawer */

/* «Друзья», «Позвать за стол» */
.modal.frwin { width: 760px; }
.frw { display: flex; flex-direction: column; gap: 10px; max-height: 640px; overflow: auto; }
.frw-add { display: flex; gap: 10px; }
.frw-add input { flex: 1; }
.frw-row { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 8px 12px; border-radius: var(--r-sm); background: rgba(var(--c-surface-2-rgb), .6); }
.frw-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--dot); }
.frw-row b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.frw-st { font-size: 15px; color: var(--c-ink-2); }
.frw-acts { display: flex; gap: 8px; }
.frw-code { flex: 1; font: var(--fw-bold) 22px var(--font-num); letter-spacing: .12em; align-self: center; }
/* the invite banner (D3 of «Г · Ключевой арт»): glass, a green dot, the friend's name in colour; on the menu it sits under the title */
.invites { position: absolute; left: 50%; top: 24px; transform: translateX(-50%); z-index: 70; display: flex; flex-direction: column; gap: 10px; }
#stage:has(.screen.km) .invites { top: 176px; }
.invite { display: flex; align-items: center; gap: 16px; width: 640px; box-sizing: border-box; padding: 18px 20px 18px 26px; border-radius: var(--r-md); font: var(--fw-med) 21px/1.3 var(--font-body); color: var(--c-ink);
  background: linear-gradient(180deg, rgba(var(--c-surface-rgb), .78), rgba(var(--t-bg2-2-rgb), .86)); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: inset 0 0 0 1px rgba(var(--t-accent2-1-rgb), .55), 0 20px 50px rgba(var(--c-shadow-rgb), .6), 0 0 40px rgba(var(--c-gold-rgb), .18); }
.invite::before { content: ""; width: 12px; height: 12px; flex: none; border-radius: 50%; background: var(--c-ok); box-shadow: 0 0 12px var(--c-ok); }
.invite > span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.invite > span b { font-weight: var(--fw-bold); color: rgb(var(--seat-2-rgb)); }
.invite .btn { height: 52px; letter-spacing: .08em; text-transform: uppercase; }
.invite .btn.primary { padding: 0 24px; font: var(--fw-bold) 18px/1 var(--font-body); letter-spacing: .08em; }
.invite .btn.ghost { padding: 0 18px; font: var(--fw-semi) 16px/1 var(--font-body); letter-spacing: .08em; background: transparent; box-shadow: inset 0 0 0 1px rgba(var(--c-ink-rgb), .3); }
.lad-line { display: flex; align-items: center; gap: 10px; }
.erow .btn.small { height: 32px; padding: 0 10px; font-size: 13px; }

/* The menu «Г · Ключевой арт» (owner 29.10): the world's art full-bleed under a veil, the title, the list of modes and the brass key «Играть»
   on the left; glass plates (player, ⚙, music, friends) on the right. 1920×1080 stage; colours and type are theme tokens, so another
   theme only recolours it. The search and the invite banner are states of the same screen. hometable.ts builds it. */
.screen.km { overflow: hidden; color: var(--c-ink); font: var(--fw-med) 18px/1.4 var(--font-body); background: var(--c-bg-2);
  --km-v: var(--t-bg2-2-rgb); --km-sub: color-mix(in srgb, var(--c-ink) 72%, var(--c-bg)); --km-sub2: color-mix(in srgb, var(--c-ink) 80%, var(--c-bg));
  --km-key: linear-gradient(180deg, var(--tb-brass-hi) 0%, color-mix(in srgb, var(--tb-brass-hi) 50%, var(--tb-brass)) 38%, var(--tb-brass) 70%, color-mix(in srgb, var(--tb-brass) 55%, var(--tb-brass-lo)) 100%); }
.km button { font-family: inherit; }
.km-bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.km-bg > * { position: absolute; }
.km-art { left: 180px; top: -120px; width: 1920px; height: 1280px; max-width: none; object-fit: cover; filter: saturate(.9) brightness(.92); }
.km-veil { inset: 0; background: linear-gradient(90deg, rgba(var(--km-v), .97) 0%, rgba(var(--km-v), .9) 26%, rgba(var(--km-v), .35) 48%, rgba(var(--km-v), 0) 66%); }
.km-vig { inset: 0; background: radial-gradient(ellipse 70% 80% at 68% 45%, rgba(var(--km-v), 0) 40%, rgba(var(--km-v), .75) 100%); }
.km-fade { left: 0; right: 0; bottom: 0; height: 260px; background: linear-gradient(180deg, rgba(var(--km-v), 0), rgba(var(--km-v), .92)); }
.km-glow { left: 1010px; top: 330px; width: 520px; height: 360px; border-radius: 50%; background: radial-gradient(closest-side, rgba(var(--c-gold-rgb), .22), rgba(var(--c-gold-rgb), 0)); }

.km-logo { position: absolute; left: 120px; top: 96px; margin: 0; display: flex; flex-direction: column; gap: 4px; font-weight: inherit; }
.km-l1 { font: var(--fw-bold) 118px/.88 var(--font-display); letter-spacing: .01em; color: var(--c-gold); -webkit-text-fill-color: transparent;
  background: linear-gradient(180deg, var(--t-ink-3) 0%, var(--c-gold) 46%, var(--c-accent-lo) 100%); -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 6px 18px rgba(var(--c-shadow-rgb), .8)); }
.km-l2 { font: var(--fw-semi) 52px/1 var(--font-display); letter-spacing: .32em; color: var(--c-accent-2); padding-left: 6px; text-shadow: 0 4px 14px rgba(var(--c-shadow-rgb), .9); }
.km-rule { display: block; width: 420px; height: 1px; margin-top: 18px; background: linear-gradient(90deg, rgba(var(--c-accent-2-rgb), .8), rgba(var(--c-accent-2-rgb), 0)); }

/* the glass of the plates */
.km-glass { background: linear-gradient(180deg, rgba(var(--c-surface-rgb), .78), rgba(var(--km-v), .86)); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: inset 0 0 0 1px rgba(var(--c-accent-2-rgb), .22), inset 0 1px 0 rgba(var(--t-hi-1-rgb), .08), 0 20px 50px rgba(var(--c-shadow-rgb), .55); }

/* the list of modes */
.km-modes { position: absolute; left: 104px; top: 372px; width: 520px; display: flex; flex-direction: column; gap: 4px; }
.km-modes.km-with-code { top: 316px; }
.km-mode { display: flex; align-items: center; gap: 18px; width: 100%; padding: 14px 22px; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--c-ink); text-align: left; cursor: pointer; transition: background .18s; }
.km-mode:hover { background: rgba(var(--c-accent-2-rgb), .08); }
.km-mode:focus-visible { outline-offset: 0; }
.km-mode[aria-pressed="true"] { background: linear-gradient(90deg, rgba(var(--c-accent-2-rgb), .16), rgba(var(--c-accent-2-rgb), 0) 85%); box-shadow: inset 0 0 0 1px rgba(var(--c-accent-2-rgb), .45); }
.km-mtx { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.km-mname { font: var(--fw-semi) 34px/1 var(--font-display); letter-spacing: .01em; white-space: nowrap; }
.km-msub { font: var(--fw-med) 17px/1.2 var(--font-body); color: var(--km-sub); }
.km-mode[aria-pressed="true"] .km-mname { color: var(--t-ink-3); }
.km-mode[aria-pressed="true"] .km-msub { color: var(--c-paper); }
.km-val { width: 46px; height: 46px; flex: none; display: grid; place-items: center; font: var(--fw-bold) 18px/1 var(--font-num); clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%); }
.km-val.v-rated { background: linear-gradient(180deg, var(--tb-brass-hi), var(--tb-brass)); color: var(--c-on-accent); }
.km-val.v-duel { background: rgb(var(--tb-leather-rgb)); color: var(--tb-wax); box-shadow: inset 0 0 0 2px var(--tb-wax); }
.km-val.v-free { background: var(--c-paper); color: var(--c-paper-ink); }
.km-val.v-friends { background: var(--c-paper-ink); color: var(--c-gold); box-shadow: inset 0 0 0 2px var(--c-accent-lo); }
.km-code { display: flex; align-items: center; gap: 12px; padding: 6px 22px 0 86px; }
.km-code[hidden] { display: none; }
.km-code input { flex: 1; min-width: 0; height: 48px; text-transform: uppercase; letter-spacing: .12em; }
.km-code .btn { height: 48px; }

/* the brass key */
.km-play { position: absolute; left: 120px; top: 760px; width: 480px; height: 96px; border: 0; border-radius: 8px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 18px;
  color: var(--c-on-brass); background: var(--km-key); /* not on-accent: d2 and d4 read 1.8:1 on the brass (audit 30.10) */
  box-shadow: inset 0 1px 0 rgba(var(--t-hi-1-rgb), .8), inset 0 -4px 0 var(--c-accent-edge), 0 0 0 1px rgba(var(--c-accent-edge-rgb), .8), 0 16px 40px rgba(var(--c-shadow-rgb), .6), 0 0 60px rgba(var(--c-gold-rgb), .28); transition: filter .15s; }
.km-play:hover { filter: brightness(1.07); }
.km-play:active { transform: translateY(1px); filter: brightness(.94); }
.km-play-t { font: var(--fw-bold) 42px/1 var(--font-display); letter-spacing: .08em; }
.km-play-k { font: var(--fw-semi) 15px/1 var(--font-body); letter-spacing: .1em; text-transform: uppercase; opacity: .78; }

/* the links: what lay on the table */
.km-links { position: absolute; left: 112px; top: 900px; display: flex; gap: 34px; }
.km-link { display: flex; align-items: center; gap: 10px; border: 0; background: transparent; color: var(--km-sub2); font: var(--fw-semi) 16px/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; padding: 14px 4px; transition: color .15s; }
.km-link:hover { color: var(--c-accent-2); }
.km-link[aria-disabled="true"] { opacity: .5; cursor: default; }
.km-link[aria-disabled="true"]:hover { color: var(--km-sub2); }
.km-link svg { flex: none; }
.km-link-t { max-width: 340px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* the player plate, ⚙ and the music */
.km-plate { position: absolute; right: 120px; top: 48px; width: 400px; height: 96px; border: 0; border-radius: 10px; display: flex; align-items: center; gap: 16px; padding: 0 20px; color: var(--c-ink); text-align: left; cursor: pointer; }
/* a guest's plate grows to the left with the name (audit 30.10: «Странник-6164» got 82px beside the button and read «Стр…»), up to a cap */
.km-plate.guest { cursor: default; padding-right: 18px; width: auto; min-width: 400px; max-width: 640px; }
.km-tier { width: 58px; height: 58px; flex: none; display: grid; place-items: center; }
.km-pbody { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.km-prow { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.km-pname { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: var(--fw-bold) 30px/1.1 var(--font-display); }
.km-plate.guest .km-pname { flex: 1; }
.km-ptier { flex: none; font: var(--fw-semi) 18px/1 var(--font-body); color: var(--c-accent-2); }
.km-ppts { flex: none; margin-left: auto; font: var(--fw-semi) 20px/1 var(--font-num); }
.km-pbar { position: relative; height: 8px; border-radius: 4px; background: rgba(var(--c-shadow-rgb), .6); box-shadow: inset 0 0 0 1px rgba(var(--c-ink-rgb), .18); }
.km-pbar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; background: linear-gradient(90deg, var(--c-accent-lo), var(--c-gold)); }
/* 12px sides, not 16: in d2 «Манускрипт» «Войти или создать аккаунт» took three lines, 53px of text in the 50px key (audit 30.10) */
.km-cta { margin-left: auto; flex: none; height: 50px; max-width: 190px; padding: 0 12px; border: 0; border-radius: 6px; cursor: pointer; background: transparent; box-shadow: inset 0 0 0 1px rgba(var(--c-accent-2-rgb), .7);
  color: var(--c-accent-2); font: var(--fw-semi) 15px/1.15 var(--font-body); letter-spacing: .06em; text-transform: uppercase; text-align: center; }
.km-plate:hover, .km-sq:hover { box-shadow: inset 0 0 0 1px rgba(var(--c-accent-2-rgb), .55), inset 0 1px 0 rgba(var(--t-hi-1-rgb), .08), 0 20px 50px rgba(var(--c-shadow-rgb), .55); }
.km-plate.guest:hover { box-shadow: inset 0 0 0 1px rgba(var(--c-accent-2-rgb), .22), inset 0 1px 0 rgba(var(--t-hi-1-rgb), .08), 0 20px 50px rgba(var(--c-shadow-rgb), .55); }
.km-cta:hover { background: rgba(var(--c-accent-2-rgb), .1); }
.km-sq { position: absolute; right: 48px; top: 64px; width: 56px; height: 56px; border: 0; border-radius: 8px; display: grid; place-items: center; color: var(--c-ink); cursor: pointer; }

/* the music (owner 29.10, «Плеер А+Б», tablemusic.ts musicStrip): the strip «Сейчас играет» under the plate, the player opens under it */
.mplay { position: absolute; right: 48px; top: 160px; width: 472px; z-index: 3; }
.mp-strip { height: 64px; border-radius: 10px; display: flex; align-items: center; gap: 14px; padding: 0 8px 0 20px; }
.mp-open { flex: 1; min-width: 0; align-self: stretch; display: flex; flex-direction: column; justify-content: center; gap: 5px; border: 0; padding: 0; background: transparent; color: var(--c-ink); text-align: left; cursor: pointer; }
.mp-cap { font: var(--fw-semi) 14px/1 var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--c-accent-2); }
.mp-name { font: var(--fw-semi) 24px/1.05 var(--font-display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-open:hover .mp-name, .mp-open[aria-expanded="true"] .mp-name { color: var(--t-ink-3); }
.mp-ib { flex: none; width: 48px; height: 48px; display: grid; place-items: center; border: 0; border-radius: 6px; background: transparent; color: var(--c-ink); cursor: pointer; box-shadow: inset 0 0 0 1px rgba(var(--c-accent-2-rgb), .3); }
.mp-ib:hover { box-shadow: inset 0 0 0 1px rgba(var(--c-accent-2-rgb), .7); background: rgba(var(--c-accent-2-rgb), .08); }
.mp-eq { flex: none; width: 22px; height: 22px; display: flex; align-items: flex-end; gap: 3px; }
.mp-eq i { flex: 1; height: 100%; border-radius: 1px; background: var(--c-gold); transform-origin: bottom; transform: scaleY(.3); }
.mp-on .mp-strip .mp-eq i, .mp-on .mp-piece[aria-pressed="true"] .mp-eq i { animation: mp-eq .9s ease-in-out infinite alternate; }
.mp-eq i:nth-child(2) { animation-delay: .35s !important; }
.mp-eq i:nth-child(3) { animation-delay: .7s !important; }
.mp-eq i:nth-child(4) { animation-delay: .2s !important; }
@keyframes mp-eq { from { transform: scaleY(.25); } to { transform: scaleY(1); } }
.mp-panel { margin-top: 8px; border-radius: 10px; padding: 18px 22px 16px; display: flex; flex-direction: column; gap: 16px; }
.mp-panel[hidden] { display: none; }
.mp-head { display: flex; align-items: center; }
.mp-close { margin-left: auto; box-shadow: none; }
.mp-now { display: flex; flex-direction: column; gap: 8px; }
.mp-title { font: var(--fw-bold) 36px/1.05 var(--font-display); color: var(--t-ink-3); }
.mp-pos { font: var(--fw-med) 16px/1 var(--font-body); color: var(--km-sub); }
.mp-ctl { display: flex; align-items: center; gap: 12px; }
.mp-big { width: 60px; height: 60px; border-radius: 50%; color: var(--c-on-accent); background: var(--km-key); box-shadow: inset 0 -3px 0 var(--c-accent-edge), 0 8px 20px rgba(var(--c-shadow-rgb), .5); }
.mp-big:hover { background: var(--km-key); filter: brightness(1.07); box-shadow: inset 0 -3px 0 var(--c-accent-edge), 0 8px 20px rgba(var(--c-shadow-rgb), .5); }
.mp-volic { display: grid; margin-left: 10px; color: var(--km-sub2); }
.mp-vol { flex: 1; min-width: 0; accent-color: var(--c-gold); height: 44px; }
.mp-volv { width: 34px; text-align: right; font: var(--fw-semi) 17px/1 var(--font-num); }
.mp-modes { display: flex; gap: 4px; padding: 4px; border-radius: 7px; background: rgba(var(--c-shadow-rgb), .4); box-shadow: inset 0 0 0 1px rgba(var(--c-ink-rgb), .12); }
.mp-mode { flex: 1; height: 44px; border: 0; border-radius: 5px; background: transparent; color: var(--km-sub2); cursor: pointer; font: var(--fw-semi) 15px/1 var(--font-body); letter-spacing: .06em; text-transform: uppercase; }
.mp-mode:hover { color: var(--c-ink); }
.mp-mode[aria-pressed="true"] { background: var(--km-key); color: var(--c-on-accent); }
.mp-list { max-height: 336px; overflow-y: auto; margin: 0 -8px; display: flex; flex-direction: column; gap: 2px; scrollbar-width: thin; }
.mp-piece { flex: none; height: 46px; display: flex; align-items: center; gap: 12px; padding: 0 14px; border: 0; border-radius: 6px; background: transparent; color: var(--c-paper); text-align: left; cursor: pointer; font: var(--fw-semi) 22px/1 var(--font-display); }
.mp-piece > span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-piece .mp-eq { visibility: hidden; }
.mp-piece:hover { background: rgba(var(--c-accent-2-rgb), .08); }
.mp-piece[aria-pressed="true"] { color: var(--t-ink-3); background: linear-gradient(90deg, rgba(var(--c-accent-2-rgb), .18), rgba(var(--c-accent-2-rgb), 0)); box-shadow: inset 2px 0 0 var(--c-gold); }
.mp-piece[aria-pressed="true"] .mp-eq { visibility: visible; }
html[data-fx="off"] .mp-eq i { animation: none !important; transform: scaleY(.6); }

/* the friends panel */
.km-friends { position: absolute; right: 48px; bottom: 56px; width: 380px; border-radius: 10px; padding: 20px 22px; display: flex; flex-direction: column; gap: 14px; }
.km-fhead { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 46px; margin: -7px 0; padding: 0; border: 0; background: transparent; color: var(--c-ink); text-align: left; cursor: pointer; }
.km-fcap { font: var(--fw-semi) 15px/1 var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--c-accent-2); }
.km-fon { font: var(--fw-med) 16px/1 var(--font-body); color: var(--km-sub); }
.km-fbadge { margin-left: auto; font: var(--fw-bold) 14px/1 var(--font-body); color: var(--c-on-accent); background: var(--c-gold); padding: 6px 10px; border-radius: var(--r-pill); }
.km-fhead:hover .km-fcap { color: var(--t-ink-3); }
.km-frow { display: flex; align-items: center; gap: 12px; }
.km-dot { width: 10px; height: 10px; flex: none; border-radius: 50%; background: var(--c-ok); }
.km-frow.fight .km-dot { background: linear-gradient(90deg, var(--c-warn) 50%, transparent 50%); box-shadow: inset 0 0 0 2px var(--c-warn); }
.km-frow.off .km-dot { background: transparent; box-shadow: inset 0 0 0 2px var(--c-ink-dim); }
.km-fwho { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.km-fwho b { font: var(--fw-semi) 19px/1.1 var(--font-body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.km-fwho span { font: var(--fw-med) 15px/1 var(--font-body); color: var(--km-sub); }
.km-call { flex: none; height: 48px; padding: 0 14px; border: 0; border-radius: 6px; background: transparent; box-shadow: inset 0 0 0 1px rgba(var(--c-accent-2-rgb), .6); color: var(--c-accent-2); font: var(--fw-semi) 14px/1 var(--font-body); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.km-call:hover { background: rgba(var(--c-accent-2-rgb), .1); }
.km-fnote { font: var(--fw-med) 18px/1.35 var(--font-body); color: var(--km-sub2); }
#home-friends-guest::first-letter { text-transform: uppercase; }
#home-friends-none { font-size: 15px; }
.km .who.srv { position: absolute; left: 48px; bottom: 24px; border: 0; background: transparent; color: var(--km-sub); font: var(--fw-med) 18px var(--font-body); cursor: pointer; padding: 4px; min-height: 46px; }
.km .who.srv b { color: var(--c-ink); }
.km .who.srv.warn, .km .who.srv.warn b { color: var(--c-accent-2-tx); }

/* the search takes the place of the list and the key */
.km-search { position: absolute; left: 104px; top: 380px; width: 520px; border-radius: 10px; padding: 34px 36px; display: flex; flex-direction: column; gap: 14px; }
.km-scap { font: var(--fw-semi) 16px/1 var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--c-accent-2); }
.km-stime { font: var(--fw-semi) 96px/1 var(--font-num); letter-spacing: .02em; font-variant-numeric: tabular-nums; color: var(--t-ink-3); text-shadow: 0 0 30px rgba(var(--c-gold-rgb), .35); }
.km-skind { display: flex; align-items: center; gap: 14px; }
.km-skind > span:last-child { font: var(--fw-semi) 30px/1.1 var(--font-display); }
.km-sweep { position: relative; display: block; height: 4px; border-radius: 2px; overflow: hidden; background: rgba(var(--c-ink-rgb), .12); }
.km-sweep i { position: absolute; left: 30%; width: 34%; top: 0; bottom: 0; border-radius: 2px; background: linear-gradient(90deg, rgba(var(--c-gold-rgb), 0), var(--c-gold), rgba(var(--c-gold-rgb), 0)); animation: km-sweep 2.4s ease-in-out infinite alternate; }
@keyframes km-sweep { from { left: -34%; } to { left: 100%; } }
html[data-fx="off"] .km-sweep i { animation: none; }
.km-snote { font: var(--fw-med) 17px/1.4 var(--font-body); color: var(--km-sub2); }
.btn.km-cancel { position: absolute; left: 120px; top: 760px; width: 480px; height: 72px; border-radius: 8px; color: var(--c-ink); font: var(--fw-semi) 20px/1 var(--font-body); letter-spacing: .1em; text-transform: uppercase;
  background: linear-gradient(180deg, var(--c-surface-2), var(--c-surface-3)); box-shadow: inset 0 0 0 1px rgba(var(--c-ink-rgb), .28), 0 12px 30px rgba(var(--c-shadow-rgb), .55); }
.btn.km-cancel:hover { box-shadow: inset 0 0 0 1px rgba(var(--c-accent-2-rgb), .6), 0 12px 30px rgba(var(--c-shadow-rgb), .55); }

/* phones: the stage is scaled to ~0.36 (a phone's landscape), so a target is ≥ 116 stage px (≈ 42 px) and the left column moves up to make room */

/* The friends' room in the menu's frame (owner 29.10, «Комната · А · Как меню»): the same art, veil, plates and links as the menu; the left column
   holds the table's code, the seats as rows, the keys «Готов» / «Начать сейчас» and the links; the right column the setup and the build.
   hometable.ts roomTable builds it. Colours and type are theme tokens. */
.kr .km-veil { background: linear-gradient(90deg, rgba(var(--km-v), .97) 0%, rgba(var(--km-v), .9) 32%, rgba(var(--km-v), .35) 52%, rgba(var(--km-v), .2) 66%, rgba(var(--km-v), .85) 100%); }
#stage:has(.screen.kr) .invites { left: 1010px; }
.kr-left { position: absolute; left: 104px; top: 84px; bottom: 0; width: 660px; display: flex; flex-direction: column; padding-bottom: 106px; box-sizing: border-box; }
.kr-left > * { flex: none; }
.kr-head { min-height: 150px; padding-left: 16px; }
.kr-cap { display: block; font: var(--fw-semi) 15px/1 var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--c-accent-2); }
.kr-codeline { display: flex; align-items: center; gap: 18px; margin-top: 12px; }
.kr-code { margin: 0; min-width: 0; font: var(--fw-bold) 88px/1 var(--font-display); letter-spacing: .08em; color: var(--c-gold); -webkit-text-fill-color: transparent;
  background: linear-gradient(180deg, var(--t-ink-3), var(--c-gold) 46%, var(--c-accent-lo)); -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 6px 18px rgba(var(--c-shadow-rgb), .8)); }
.kr-hint { margin: 12px 0 0; max-width: 520px; font: var(--fw-med) 17px/1.3 var(--font-body); color: var(--km-sub); }
.kr-btn { flex: none; height: 48px; padding: 0 18px; border: 0; border-radius: 6px; display: inline-flex; align-items: center; gap: 10px; background: transparent; cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(var(--c-accent-2-rgb), .55); color: var(--c-accent-2); font: var(--fw-semi) 15px/1 var(--font-body); letter-spacing: .08em; text-transform: uppercase; }
.kr-btn:hover { background: rgba(var(--c-accent-2-rgb), .1); }
.kr-btn[aria-disabled="true"] { opacity: .5; cursor: default; }

/* the seats */
.kr-seats { display: flex; flex-direction: column; gap: 6px; margin-top: 96px; }
.kr-dense .kr-seats { margin-top: 36px; }
.kr-row { display: flex; align-items: center; gap: 18px; padding: 14px 22px; border-radius: var(--r-sm); color: var(--c-ink); }
.kr-dense .kr-row { padding: 10px 22px; }
.kr-row.me { background: linear-gradient(90deg, rgba(var(--c-accent-2-rgb), .16), rgba(var(--c-accent-2-rgb), 0) 85%); box-shadow: inset 0 0 0 1px rgba(var(--c-accent-2-rgb), .45); }
.kr-row.free { box-shadow: inset 0 0 0 1px rgba(var(--c-ink-rgb), .16); }
.kr-row.off { opacity: .8; }
.kr-oct { width: 52px; height: 52px; flex: none; display: grid; place-items: center; color: var(--c-on-accent); background: var(--seat, var(--c-accent-2));
  clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%); }
.kr-row.free .kr-oct { background: rgba(var(--c-ink-rgb), .1); color: var(--km-sub); }
.kr-rt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.kr-name { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: var(--fw-semi) 32px/1.05 var(--font-display); }
.kr-dense .kr-name { font-size: 30px; }
.kr-row.free .kr-name { color: var(--km-sub2); }
.kr-sub { font: var(--fw-med) 17px/1.2 var(--font-body); color: var(--km-sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kr-row.me .kr-sub { color: var(--c-paper); }
.kr-acts { flex: none; display: flex; gap: 8px; }
.kr-st { flex: none; display: flex; align-items: center; gap: 8px; font: var(--fw-semi) 16px/1 var(--font-body); letter-spacing: .06em; text-transform: uppercase; color: var(--km-sub2); }
.kr-st.ok { color: var(--c-ok); }

/* the keys */
.kr-keys { display: flex; align-items: center; gap: 16px; margin: 28px 0 0 16px; }
.kr-keys:empty { display: none; }
.kr .km-play.kr-key { position: static; flex: none; width: 400px; height: 96px; }
.kr-key-on .km-play-t { font-size: 30px; letter-spacing: .04em; }
.kr-dark { flex: none; width: 220px; height: 96px; border: 0; border-radius: 8px; cursor: pointer; color: var(--c-ink); text-align: center; font: var(--fw-semi) 20px/1.15 var(--font-body); letter-spacing: .08em; text-transform: uppercase;
  background: linear-gradient(180deg, var(--c-surface-2), var(--c-surface-3)); box-shadow: inset 0 0 0 1px rgba(var(--c-ink-rgb), .28), 0 12px 30px rgba(var(--c-shadow-rgb), .55); }
/* a shut «Начать сейчас» (not everyone is ready) does not light up under the pointer and is dimmed like a shut .btn (audit 30.10) */
.kr-dark:hover:not([aria-disabled="true"]) { box-shadow: inset 0 0 0 1px rgba(var(--c-accent-2-rgb), .6), 0 12px 30px rgba(var(--c-shadow-rgb), .55); }
.kr-dark[aria-disabled="true"] { opacity: .38; cursor: default; }
.kr-note { margin: 14px 0 0 16px; max-width: 640px; font: var(--fw-med) 17px/1.4 var(--font-body); color: var(--km-sub2); }
.kr-note.go { color: var(--c-gold); }
.kr-wline { margin: 6px 0 0 16px; max-width: 640px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font: var(--fw-med) 17px/1.4 var(--font-body); color: var(--km-sub); }
.kr-wline[hidden] { display: none; }
.kr-wline b { font-weight: var(--fw-semi); color: var(--km-sub2); }
.kr .km-links.kr-links { position: static; margin: auto 0 0 8px; width: max-content; gap: 26px; }

/* the right column: the table's setup, the build */
.kr-right { position: absolute; right: 48px; top: 248px; width: 472px; display: flex; flex-direction: column; gap: 24px; }
.kr-setup { position: relative; border-radius: 10px; padding: 22px; display: flex; flex-direction: column; gap: 16px; box-sizing: border-box; }
.kr-setup:has(.tb-bots.open) { z-index: 6; }
.kr-srow { display: flex; align-items: center; gap: 14px; }
.kr-lbl { width: 110px; flex: none; font: var(--fw-semi) 17px/1 var(--font-body); }
.kr-seg { display: flex; gap: 4px; padding: 4px; border-radius: 7px; background: rgba(var(--c-shadow-rgb), .4); box-shadow: inset 0 0 0 1px rgba(var(--c-ink-rgb), .12); }
.kr-seg-b { min-width: 44px; height: 40px; border: 0; border-radius: 5px; background: transparent; color: var(--km-sub2); font: var(--fw-semi) 17px/1 var(--font-num); cursor: pointer; }
.kr-seg-b:hover { color: var(--c-ink); }
.kr-seg-b[aria-pressed="true"] { background: var(--km-key); color: var(--c-on-accent); }
.kr-seg-b[aria-disabled="true"], .kr-sel[aria-disabled="true"], .kr-setup .tb-bots-head[aria-disabled="true"] { cursor: default; }
.kr-setup.locked .kr-seg-b[aria-pressed="false"] { opacity: .6; }
.kr-sel, .kr-setup .tb-bots-head { flex: 1; min-width: 0; width: 100%; height: 48px; padding: 0 14px; border: 0; border-radius: 6px; display: flex; align-items: center; gap: 10px; cursor: pointer; color: var(--c-ink); text-align: left;
  background: rgba(var(--c-shadow-rgb), .4); box-shadow: inset 0 0 0 1px rgba(var(--c-ink-rgb), .2); font: var(--fw-semi) 17px/1 var(--font-body); letter-spacing: 0; }
.kr-sel > span:first-child { flex: 1; }
.kr-sel:hover, .kr-setup .tb-bots-head:hover, .kr-setup .tb-bots.open .tb-bots-head { box-shadow: inset 0 0 0 1px rgba(var(--c-accent-2-rgb), .6); }
.kr-setup .tb-bots { flex: 1; min-width: 0; }
.kr-setup .tb-bots-head b { font-weight: var(--fw-semi); }
.kr-setup .tb-bot-r { font-size: 17px; }
.kr-setup .tb-bots-caret { margin-left: auto; font-size: 14px; color: var(--km-sub2); }
.kr-setup .tb-bots-list { left: 0; right: 0; width: auto; transform: none; top: calc(100% + 8px); padding: 8px; border-radius: 10px;
  background: linear-gradient(180deg, rgba(var(--c-surface-rgb), .97), rgba(var(--km-v), .98)); box-shadow: inset 0 0 0 1px rgba(var(--c-accent-2-rgb), .3), 0 20px 50px rgba(var(--c-shadow-rgb), .7); }
.kr-setup .tb-bot { grid-template-columns: 1fr 72px 44px; min-height: 48px; padding: 8px 12px; border-radius: 6px; color: var(--km-sub2); }
.kr-setup .tb-bot-n { font: var(--fw-semi) 21px/1.1 var(--font-display); }
.kr-setup .tb-bots-note { margin: 8px 10px 4px; font-size: 15px; color: var(--km-sub); opacity: 1; }
.kr-build { width: 100%; box-sizing: border-box; border: 0; border-radius: 10px; padding: 18px 22px 20px; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; color: var(--c-ink); text-align: left; cursor: pointer; font-family: inherit; }
.kr-build:hover { box-shadow: inset 0 0 0 1px rgba(var(--c-accent-2-rgb), .55), inset 0 1px 0 rgba(var(--t-hi-1-rgb), .08), 0 20px 50px rgba(var(--c-shadow-rgb), .55); }
.kr-bcap { font: var(--fw-semi) 14px/1 var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--c-accent-2); }
.kr-build .menu-build { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 14px; height: auto; padding: 0; overflow: visible; }
.kr-build .mb-head { gap: 14px; }
.kr-build .mb-sign svg { width: 56px; height: 56px; }
.kr-build .mb-name { max-width: 340px; font-size: 32px; }
.kr-build .mb-name-long { font-size: 24px; }
.kr-build .mb-side { width: 100%; justify-content: space-between; gap: 16px; }
.kr-build .mb-cap { font-size: 14px; font-variant: normal; text-transform: uppercase; letter-spacing: .12em; opacity: 1; color: var(--km-sub); }
.kr-build .mb-medal { width: 48px; height: 48px; }
.kr .km-friends { width: 472px; }

/* phones: the stage is ~0.36, so a target is ≥ 116 stage px; the left column is wider (the buttons of a free seat need the room), the
   friends panel gives way to the setup and the build (a free seat's «Позвать» still opens the invite) */